@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');

 /* Vizualizace breakpointů */
 /* body.breakpoint-6xl {
     outline: 2px solid #880E4F;
 }
 body.breakpoint-5xl {
     outline: 2px solid #AD1457;
 }
 body.breakpoint-4xl {
     outline: 2px solid #C2185B;
 }
 body.breakpoint-3xl {
     outline: 2px solid #D81B60;
 }
 body.breakpoint-2xl {
     outline: 2px solid #E91E63;
 }

 body.breakpoint-xl {
     outline: 2px solid #EC407A;
 }

 body.breakpoint-lg {
     outline: 2px solid #F06292;
 }

 body.breakpoint-md {
     outline: 2px solid #F48FB1;
 }

 body.breakpoint-sm {
     outline: 2px solid #F8BBD0;
 }

 body.breakpoint-xs {
     outline: 2px solid #FCE4EC;
 }
     
 body::before {
     content: "Current breakpoint: " attr(class);
     display: none;
 } */

 * {
     box-sizing: border-box;
 }

 :root {
     /* Výchozí hodnoty - fallback pokud JS nefunguje */

     /* Základní velikosti */
     --tile-size: 95px;
     --gap-size: 6px;
     --tile-font-size: 48px;

     /* App kontejner */
     --app-max-width: 2434px;
     --app-margin: 24px auto;
     --app-padding: 18px;

     /* Typografie */
     --font-base: 16px;
     --font-small: 14px;
     --font-xsmall: 12px;
     --font-el-name: 11px;

     /* Typografie */
     --h1-size: 35px;
     --h2-size: 30px;
     --h3-size: 25px;
     --h4-size: 20px;
     --h5-size: 17px;
     --h6-size: 15px;
     --font-legend: 15px;

     /* Komponenty */
     --modal-width: 1000px;
     --modal-tile-size: 320px;
     --modal-tile-font-size: 140px;
     --chip-width: 245px;
     --switch-icon-size: 20px;
     --controls-height: 33px;
     --font-modal-txt: 28px;

     --border-radius: 6px;

     --base-hue: 200;
     /* Základní odstín - modrá */
     --base-saturation: 60%;
     /* Základní sytost */
     --base-lightness: 85%;
     /* Základní světlost */

     --font-family-basic: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
     --font-family-large: "Paytone One", sans-serif;
     --bg-color: #ffffff;
     --bg-grad: linear-gradient(180deg, #f1f1f1 0%, #f4f4f4 100%);
     --text-color: #333333;
     --arrow-bg: #c4c4c4;
     --arrow-txt-color: #2d2d2d;
     --buttons-bg: black;
     --buttons-txt: #f9f9f9;
     --filter-box-border-color: #33333338;
     --filter-button-shadow: 1px 1px 2px #dedede57;
     --margin-period-arrow: -5px;
     --modal-bg: #f9f9f9;
     --modal-txt-color: #2d2d2d;
     --modal-h2: #3c2d2d;
     --modal-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
     --modal-link-txt: #333333;
     --modal-link-color: #8bc3ff;
     --primary-color: #007bff;
     --border-color: #dddddd;


     --card: #071025;
     --muted: #9aa6b2;
     --accent: #60a5fa;
     --icon-color: rgb(236, 249, 255);
     --trans-dur: 0.3s;
     --trans-timing: cubic-bezier(0.76, 0.05, 0.24, 0.95);
     --trans-timing-in: cubic-bezier(0.76, 0.05, 0.86, 0.06);
     --trans-timing-out: cubic-bezier(0.05, 0.76, 0.06, 0.86);
 }

 [data-theme="dark"] {
     --bg-color: #1a1a1a;
     --bg-grad: linear-gradient(180deg, #071025 0%, #041022 100%);
     --text-color: #ffffff;
     --arrow-bg: #686868;
     --arrow-txt-color: #e4e4e4;
     --buttons-bg: #f9f9f9;
     --buttons-txt: black;
     --filter-box-border-color: rgba(205, 205, 205, 0.3);
     --filter-button-shadow: 1px 1px 2px #dedede57;
     --modal-bg: #202020;
     --modal-txt-color: #f2feff;
     --modal-h2: #ffffff;
     --modal-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
     --modal-link-txt: #ffffff;
     --modal-link-color: #d8cd25;


     --primary-color: #4da6ff;
     --border-color: #444444;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     font-family: var(--font-family-basic);
     background-color: var(--bg-color);
     background: var(--bg-grad);
     color: var(--text-color);
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 .app {
     max-width: var(--app-max-width);
     margin: var(--app-margin);
     padding: var(--app-padding);
     /* background: white;
     border-radius: 12px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     min-height: 100vh;
 }


 header {
     display: flex;
     gap: 12px;
     align-items: center;
     justify-content: space-between;
     margin: .4em 0;
 }

 h1 {
     margin: 0;
     font-size: 20px;
     font-family: var(--font-family-large);
     font-size: var(--h1-size);
     font-weight: 400;
     font-style: normal;
 }

 h3 {
     color: var(--text-color);
     font-size: var(--h3-size);
     margin: .8em 0 .4em;
 }

 .controls {
     display: flex;
     gap: 8px;
     align-items: center;
     flex-wrap: wrap;
 }


 .controls select,
 .controls button,
 .controls option {
     height: var(--controls-height);
     padding: 8px 10px;
     border-radius: var(--border-radius);
     border: none;
     background-color: var(--buttons-bg);
     color: var(--buttons-txt);
     cursor: pointer;
     font-size: var(--font-base);
 }

 .lightbox-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 9999;
 }

 #buttonBox {
     z-index: 99;
     position: absolute;
     left: 50%;
     top: 40%;
     transform: translate(-50%, -50%);
     background: var(--bg-color);
     border-radius: 8px;
     padding: 24px 20px 16px 20px;
     box-shadow: 0 6px 32px rgba(0, 0, 0, 0.18);
     min-width: 400px;
     /* width: 1200px; */
     display: flex;
     flex-direction: column;
     gap: 10px;
     cursor: default;
 }

 .drag-bar {
     cursor: move;
     background: #f2f2f2;
     color: black;
     font-size: var(--font-base);
     padding: 6px 6px 4px 6px;
     margin: -24px -20px 12px -20px;
     border-radius: 8px 8px 0 0;
     font-weight: bold;
     user-select: none;
 }

 .group-btn {
     padding: 6px 16px;
     border: 1px solid #888;
     border-radius: 4px;
     background: #ececec;
     cursor: pointer;
 }



 input[type=search] {
     height: var(--controls-height);
     padding: 8px 10px;
     border-radius: var(--border-radius);
     border: 1px solid #99ccff;
     background: rgb(187 187 187 / 97%);
     color: #191919;
     font-size: var(--font-base);
 }

 input::placeholder {
     color: rgb(53, 53, 53);
     font-weight: bold;
     opacity: 0.5;
     font-size: var(--font-base);
 }

 #testmode.alert {
     animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
 }

 @keyframes blinker {
     from {
         opacity: 1;
         background: linear-gradient(90deg, #ed2853, #f54a94);
     }

     to {
         opacity: .9;
         background: linear-gradient(270deg, #ed2853, #f54a94);
     }
 }

 .legend {
     margin-top: .1em;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     color: var(--muted);
     font-size: var(--font-legend)
 }

 .table-container {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .main-table-area {
     flex: 1;
     min-width: 0;
     /* Důležité pro flexbox */
 }

 /* Fallback pro velmi staré prohlížeče */
 .periodic-table {
     max-width: 100%;
 }


 #ptable-wrapper {
     display: inline-flex;
 }

 #ptable {
     display: grid;
     grid-template-columns: repeat(18, var(--tile-size));
     grid-template-rows: repeat(10, var(--tile-size));
     gap: var(--gap-size);
 }

 /* ŠIPKA NAHORU – nad skupinou */
 .top-arrow-box {
     display: inline-block;
     background: var(--arrow-bg);
     width: 100%;
     color: var(--arrow-txt-color);
     padding: 2px 6px;
     position: relative;
     margin-bottom: 6px;
     font-size: var(--font-base);
     text-align: center;
     font-weight: bold;
 }

 .top-arrow-box::after {
     --new-size: calc(var(--tile-size)/2);
     content: "";
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: -8px;
     /* výška trojúhelníku */
     width: 0;
     height: 0;
     border-left: var(--new-size) solid transparent;
     border-right: var(--new-size) solid transparent;
     border-top: 8px solid var(--arrow-bg);
     /* barva boxu */
 }

 .period-box,
 .group-row {
     opacity: .4;
 }

 .group-row {
     display: grid;
     /* ODSTRANIT: position: absolute; */
     grid-template-columns: repeat(18, var(--tile-size));
     text-align: center;
     font-weight: bold;
     margin-bottom: 4px;
     gap: var(--gap-size);
 }

 .period-box {
     position: absolute;
     transform: translateX(var(--margin-period-arrow));
     z-index: 2;
 }

 /* ŠIPKA DOLEVA – vedle periody */
 .period-col {
     display: grid;
     grid-template-rows: repeat(10, var(--tile-size));
     font-weight: bold;
     gap: var(--gap-size);
 }

 .period-col div {
     line-height: var(--tile-size);
 }


 .left-arrow-box {
     display: inline-block;
     background: var(--arrow-bg);
     color: var(--arrow-txt-color);
     padding: 4px 6px;
     position: relative;
     font-size: var(--font-base);
     text-align: center;
     height: var(--tile-size);
 }

 .left-arrow-box::after {
     --new-size: calc(var(--tile-size)/2);
     content: "";
     position: absolute;
     top: 50%;
     right: -8px;
     /* šířka trojúhelníku */
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-top: var(--new-size) solid transparent;
     border-bottom: var(--new-size) solid transparent;
     border-left: 8px solid var(--arrow-bg);
     /* barva boxu */
 }


 .tile {
     border-radius: var(--border-radius);
     padding: 4px;
     display: flex;
     box-sizing: border-box;
     cursor: pointer;
     outline: 2px solid transparent;
     transition: background .2s, transform .1s;
     flex-direction: column;
     justify-content: space-between;
 }

 .tile.hidden {
     /* visibility: hidden; */
     opacity: 0.08;
 }

 .tile:focus {
     outline-color: var(--accent)
 }



 .num {
     display: flex;
     justify-content: space-between;
     /* rozstrčí vlevo/vpravo */
     font-size: var(--font-xsmall);
     padding: 0 2px;
 }

 /* Výchozí stav - pokročilé info viditelné */
 .mass,
 .elneg {
     display: block;
     opacity: 0.8;
     transition: all 0.3s ease;
 }

 /* Skrytí na mobilech */
 .hide-advanced-info .num .mass .hide-advanced-info .elneg {
     display: none !important;
 }

 /* Zjednodušený vzhled pro mobily */
 .hide-advanced-info .tile {
     padding: 2px;
 }

 .hide-advanced-info .tile .sym {
     font-size: 1.2em;
     /* Větší symbol na mobilech */
 }

 /* Obnovení na větších obrazovkách */
 .show-advanced-info .tile {
     padding: 4px;
 }

 .num .mass,
 .num .elneg {
     text-align: left;
 }

 .name {
     font-size: var(--font-el-name);
     width: 100%;
     text-align: center;
     font-weight: bold;
 }

 .bb {
     position: relative;
     width: 100%;
 }

 .tile .sym {
     font-family: var(--font-family-large);
     font-weight: 400;
     font-style: normal;
     width: 100%;
     text-align: center;
     font-size: var(--tile-font-size);
     line-height: 1em;
     text-shadow: 2px 1px 2px rgba(255, 255, 255, 0.54);
 }

 .tile .left {
     text-align: left;
     display: block;
     position: relative;
 }

 .z {
     font-size: var(--font-small);
     font-weight: bold;
 }

 /* 
 .rotate {
     rotate: 270deg;
     left: -.2em;
     bottom: .3em;
 } */



 .tile .name {
     font-size: var(--font-el-name);
     color: var(--dark);
     position: relative;
 }

 .cat-alkali {
     background: linear-gradient(180deg, #f37070, #ffa8a8);
     color: #241205
 }

 .cat-hal {
     background: linear-gradient(180deg, #00ccff, #76e4ff);
     color: #241205
 }

 .cat-alkaline {
     background: linear-gradient(180deg, #dda806, #ffe69a);
     color: #072000
 }

 .cat-transition {
     background: linear-gradient(180deg, #c691ff, #e1c4ff);
     color: #071036
 }

 .cat-no-transition {
     background: linear-gradient(180deg, #77b1ec, #bedfff);
     color: #071036
 }

 .cat-post,
 .cat-metalloid-xx {
     background: linear-gradient(180deg, #ed2853, #ff86a0);
     color: #052024
 }

 .cat-metalloid {
     background: linear-gradient(180deg, #92e8e8, #dcffff);
     color: #2b0522
 }

 .cat-nonmetal {
     background: linear-gradient(180deg, #89d92f, #d4ffa2);
     color: #05203a
 }

 .cat-noble {
     background: linear-gradient(180deg, #d3d305, #ffff99);
     color: #07101b
 }

 .cat-lanth {
     background: linear-gradient(180deg, #ffedcc, #ffd486);
     color: #2b1502
 }

 .cat-act {
     background: linear-gradient(180deg, #ffc3cc, #ffa9b6);
     color: #2b0710
 }

 .empty {
     background: transparent;
     visibility: hidden;
 }

 .empty:hover {
     filter: none;
     transition: none;
     transform: none;
 }

 .close {
     margin-left: auto
 }

 /* Modal */

 #modalBackdrop {
     z-index: 999;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     display: none;
     justify-content: center;
     align-items: center;
 }

 #modal {
     background: var(--modal-bg);
     color: var(--modal-txt-color);
     padding: 2em;
     border-radius: var(--border-radius);
     border: 1px solid var(--text-color);
     max-width: 99%;
     width: var(--modal-width);
     max-height: 90%;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
 }

 .modal-header {
     display: flex;
     align-items: flex-start;
     position: sticky;
     top: 0;
     z-index: 2;
     /* ať je tlačítko nad obsahem */
 }


 #modal .row {
     margin: .6em 0
 }

 .close-button {
     margin-left: auto;
     right: 12px;
     top: 12px;
     border: none;
     font-size: 20px;
     cursor: pointer;
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: rgb(204, 37, 138);
     position: -webkit-sticky;
     position: sticky;
     display: block;
     z-index: 200;
     text-indent: -9999px;
 }

 .close-button:before,
 .close-button:after {
     content: '';
     width: 55%;
     height: 2px;
     background: #fff;
     position: absolute;
     top: 48%;
     left: 22%;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -ms-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
 }

 .close-button:after {
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -ms-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
 }

 .close-button:hover:before,
 .close-button:hover:after {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
 }

 #modal table {
     width: 100%;
     border-collapse: collapse;
     overflow: hidden;
 }

 #modal th,
 #modal td {
     padding: .2em;
     background-color: #dfdfdf68;
     color: var(--text-color);
 }

 #modal th {
     text-align: left;
 }

 #modal thead th {
     background-color: #55608f;
 }

 #modal tbody tr:hover {
     background-color: rgba(146, 146, 146, 0.3);
 }

 #modal tbody td {
     position: relative;
     border: 1px solid var(--text-color);
 }

 #modal tbody td strong {
     color: var(--text-color);
     padding: .2em;
     margin: 0;
     display: block;
     border: none;
     font-weight: normal;
     font-size: var(--h3-size);
 }

 #modal tbody td:hover:before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: -9999px;
     bottom: -9999px;
     background-color: rgba(255, 255, 255, 0.2);
     z-index: -1;
 }

 #m-symbol {
     position: relative;
     display: contents;
 }

 #m-symbol:before {
     content: attr(z);
     position: absolute;
     font-size: .38em;
     bottom: .2em;
     left: .2em;
     width: 100%;
     display: block;
 }

 .symbol {
     position: relative;
     width: var(--modal-tile-size);
     height: var(--modal-tile-size);
     font-size: var(--modal-tile-font-size);
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: var(--font-family-large);
     font-weight: 400;
     font-style: normal;
     margin: 0;
     text-shadow: 2px 1px 2px #000000ba, -2px 1px 2px #ffffff57;
     padding: .45em;
     border-radius: var(--border-radius);
 }

 .i {
     position: absolute;
     width: 100%;
     padding: 0 .45em;
     box-sizing: border-box;
     top: 6px;
     font-family: var(--font-family-basic);
     font-size: .3em;
     display: grid;
     grid-template-columns: 1fr 1fr;
     text-shadow: none;
     color: black;
 }

 .i-elneg {
     text-align: left;
 }

 .i-mass {
     text-align: right;
 }

 .modal-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px 16px;
     margin: 1em 0
 }

 .source {
     text-align: right;
     margin: 1.5em 0
 }



 /* Link button */

 .cta {
     position: relative;
     margin: auto;
     text-decoration: none;
     padding: 19px 22px;
     transition: all 0.2s ease;
     margin: 10px auto 20px;
 }

 .cta:before {
     content: "";
     position: absolute;
     top: 11px;
     left: 0;
     display: block;
     border-radius: 18px;
     background: var(--modal-link-color);
     width: 38px;
     height: 38px;
     transition: all 0.3s ease;
 }

 .cta span {
     position: relative;
     color: var(--modal-link-txt);
     font-size: var(--font-modal-txt);
     line-height: 1em;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     vertical-align: middle;
 }

 .cta svg {
     position: relative;
     top: 0;
     margin-left: 10px;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke: var(--modal-link-txt);
     stroke-width: 2;
     transform: translateX(-5px);
     transition: all 0.3s ease;
 }

 .cta:hover:before {
     width: 100%;
     background: var(--modal-link-color);
 }

 .cta:hover svg {
     transform: translateX(0);
 }

 .cta:active {
     transform: scale(0.96);
 }


 #modal h2 {
     margin: 0 0 1.5em 0;
     height: 2em;
     position: relative;
     font-size: var(--h2-size);
     font-family: var(--font-family-large);
     color: var(--modal-h2);
 }

 #modal .czn {
     position: absolute;
     width: 100%;
     border-top: 2px solid;
     font-size: .6em;
     text-align: right;
     display: table-cell;
     color: var(--muted);
 }

 #modal strong {
     color: var(--text-color);
     padding: .2em .4em;
     margin: 0.2em .4em .2em 0;
     border-radius: var(--border-radius);
     display: inline-block;
     text-transform: uppercase;
     border: 1px solid var(--text-color);
     font-size: var(--h3-size);
 }

 #m-z,
 #m-mass,
 #m-group,
 #m-period,
 #m-elneg,
 #m-phase,
 #m-density,
 #m-melt,
 #m-boil,
 #m-discovered {
     font-family: var(--font-family-large);
     font-size: var(--font-modal-txt);
     margin-left: .5em;
 }

 #m-cat,
 #m-elec {
     font-weight: bold;
     font-family: var(--font-family-large);
     font-size: var(--font-modal-txt);
 }

 #m-cat {
     margin: .6em 0;
 }

 .ioniz {
     padding: .2em .5em;
     border-radius: var(--border-radius);
     margin: .2em;
     color: black;
     text-shadow: 1px 1px white;
     font-weight: bold;
     display: inline-block;
     font-family: var(--font-family-large);
     font-size: var(--font-modal-txt);
     --step: 0;
     --hue-step: 1;
     --saturation-step: 2%;
     --lightness-step: 1%;
     --current-hue: calc(var(--base-hue) + (var(--step) * var(--hue-step)));
     --current-saturation: calc(var(--base-saturation) + (var(--step) * var(--saturation-step)));
     --current-lightness: calc(var(--base-lightness) - (var(--step) * var(--lightness-step)));
     background-color: hsl(var(--current-hue), var(--current-saturation), var(--current-lightness));

 }

 .ioniz:nth-child(1) {
     --step: 0;
 }

 .ioniz:nth-child(2) {
     --step: 1;
 }

 .ioniz:nth-child(3) {
     --step: 2;
 }

 .ioniz:nth-child(4) {
     --step: 3;
 }

 .ioniz:nth-child(5) {
     --step: 4;
 }

 .ioniz:nth-child(6) {
     --step: 5;
 }

 .ioniz:nth-child(7) {
     --step: 6;
 }

 .ioniz:nth-child(8) {
     --step: 7;
 }

 .ioniz:nth-child(9) {
     --step: 8;
 }

 .ioniz:nth-child(10) {
     --step: 9;
 }

 .ioniz:nth-child(11) {
     --step: 10;
 }

 .ioniz:nth-child(12) {
     --step: 11;
 }

 .ioniz:nth-child(13) {
     --step: 12;
 }

 .ioniz:nth-child(14) {
     --step: 13;
 }

 .ioniz:nth-child(15) {
     --step: 14;
 }

 #modal .cat {
     white-space: nowrap;
     display: inline-block;
     padding: .2em .5em;
     margin: .2em;
     border-radius: var(--border-radius);
     border: 1px solid var(--text-color)
 }

 span#m-summary {
     display: block;
     text-align: justify;
     font-size: var(--font-modal-txt);
 }

 #modal div#m-img {
     margin: 20px auto;
 }

 #modal img.el-image {
     width: 100%;
     height: auto;
 }

 #spectr {
     width: 100%;
     height: auto;
 }

 #spectr img {
     margin: 10px auto;
 }

 div#m-spectr {
     margin: 5px 0 20px;
 }

 .spectr {
     max-width: 100%;
 }

 .imgBox {
     position: relative;
     width: 100%;
     height: 200px;
     object-fit: cover;
 }


 .imgBox img {
     position: relative;
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .imgBox h5 {
     content: attr(info);
     z-index: 1;
     position: absolute;
     bottom: 5px;
     right: 16px;
     margin: 0;
     max-width: 85%;
     right: 10px;
     background: rgba(0, 0, 0, 0.8);
     color: #fff;
     padding: 3px 6px;
     border-radius: var(--border-radius);
     white-space: normal;
     font-size: 10px;
 }

 [data-tooltip] {
     position: relative;
     cursor: help;
 }

 [data-tooltip]::after {
     content: attr(data-tooltip);
     position: absolute;
     bottom: 125%;
     /* nad prvkem */
     left: 50%;
     transform: translateX(-50%);
     background: rgba(0, 0, 0, 0.8);
     color: #fff;
     padding: 3px 6px;
     border-radius: 4px;
     white-space: nowrap;
     font-size: 10px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s;
 }

 [data-tooltip]:hover::after {
     opacity: 1;
 }

 .ec {
     padding: .2em .6em;
     border-radius: var(--border-radius);
     margin: 1px;
     color: black;
     font-weight: bold;
     ;
     display: inline-block;
     font-family: var(--font-family-large);
     font-size: var(--font-modal-txt);
 }

 .orb-s {
     background: #ffcccc;
 }

 /* červená */
 .orb-p {
     background: #ccffcc;
 }

 /* zelená */
 .orb-d {
     background: #ccccff;
 }

 /* modrá */
 .orb-f {
     background: #fff0b3;
 }

 /* žlutá */

 #modal #m-shells {
     position: relative;
     /* nutné pro absolutní pozice vnitřních kruhů */
     width: 200px;
     height: 200px;
     margin: 0 auto;
     /* centrování v modalu */
 }

 .shell {
     border: 1px solid #888;
     border-radius: 50%;
     position: absolute;
     /* pozice se počítá od #m-shells */
 }

 .electron {
     width: 8px;
     height: 8px;
     background: #007bff;
     border-radius: 50%;
     position: absolute;
 }


 /* CATEGORY TABLE */
 .catBox {
     display: flex;
     margin: .2em 0 .6em;
     gap: 4px;
 }

 button#clearCatFilter {
     position: relative;
     background: linear-gradient(0deg, #ab205f, #C51162);
     color: #fdfdfd;
     display: inline;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
 }

 button#clearCatFilter:hover {
     background: linear-gradient(180deg, #ab205f, #C51162);
     color: #fdfdfd;
     transform: scale(1.06);
 }

 .tb {
     display: flex;
     width: 100%;
     padding: 4px;
     justify-content: space-evenly;
     align-items: center;
 }

 .trash {
     background: var(--icon-color);
     transform: scale(.8);
     /* top: 7px; */
     width: 28px;
     height: 30px;
     position: absolute;
     display: none;
     margin: 0;
     left: 1vw;
     -webkit-border-bottom-right-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
     -moz-border-radius-bottomright: 4px;
     -moz-border-radius-bottomleft: 4px;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
 }

 .trash span {
     position: absolute;
     height: 5px;
     background: var(--icon-color);
     top: -7px;
     left: -3px;
     right: -2px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     transform: rotate(0deg);
     transition: transform 250ms;
     transform-origin: 19% 100%;
 }

 .trash span:after {
     content: '';
     position: absolute;
     width: 12px;
     height: 4px;
     background: var(--icon-color);
     top: -6px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
     transform: rotate(0deg);
     transition: transform 250ms;
     transform-origin: 19% 100%;
     left: 12px;
 }


 .trash i {
     position: relative;
     width: 3px;
     height: 24px;
     background: #C51162;
     display: block;
     margin: 3px auto;
     border-radius: 2px;
 }

 .trash i:after {
     content: '';
     width: 3px;
     height: 24px;
     background: #C51162;
     position: absolute;
     left: -7px;
     border-radius: 2px;
 }

 .trash i:before {
     content: '';
     width: 3px;
     height: 24px;
     background: #C51162;
     position: absolute;
     right: -7px;
     border-radius: 2px;
 }

 button#clearCatFilter:hover .trash span {
     transform: rotate(-45deg);
     transition: transform 250ms;
 }

 /* Legend container */
 .category-legend {
     display: inline-grid;
     width: 100%;
 }

 /* Chip (kategorie) */
 .chip {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     padding: .35em .42em;
     border-radius: var(--border-radius);
     font-size: var(--font-base);
     text-transform: uppercase;
     cursor: pointer;
     border: 2px solid rgba(255, 255, 255, 0.04);
     background-image: url(carbon.png);
     box-shadow: var(--filter-button-shadow);
     transition: background-color 0.3s, transform 0.3s;
     margin: 2px;
 }

 .chip span {
     color: white;
 }

 .chip:focus {
     outline: 2px solid #60a5fa;
     outline-offset: 2px
 }

 /* small color swatch on left */
 .chip .sw {
     height: 16px;
     border-radius: 50%;
     margin-right: 2px;
     flex: 0 0 16px;
     border: 4px solid rgb(241 241 241 / 60%);
 }

 /* selected chip */
 .chip.selected {
     transform: scale(1.05);
     transform: translateY(-2px);
     box-shadow: 0 1px 4px rgba(149, 46, 113, .3);
     border: 4px solid rgb(149, 46, 113)
 }

 .chip.fading {
     background-color: #ddd !important;
     /* barva „default“ chipu */
     transform: scale(1);
 }

 /* clear button */
 .chip.clear {
     background: transparent;
     border: 1px dashed rgba(255, 255, 255, 0.06);
 }

 .tile.testing {
     /* opacity: 0.995;
     filter: grayscale(0.98);
     transition: opacity .18s, filter .18s; */
     background: gainsboro !important;
 }

 /* Tile dim / highlight behavior */
 .tile.dimmed {
     opacity: 0.15;
     filter: grayscale(0.9);
     transition: opacity .18s, filter .18s;
 }

 .tile.highlight {
     transform: scale(1.04);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
     z-index: 2;
 }

 .tile:hover {
     transform: scale(1.3);
     filter: drop-shadow(2px 4px 6px black);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
     z-index: 2;
     transition: filter .28s;
 }

 /* Pokud chceš, můžeš přidat kontrastní orámování pro vybrané */
 .tile.highlight::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06);
     pointer-events: none;
 }

 /* Ujisti se, že .tile má position:relative; pokud používáš pseudo-elementy */
 .tile {
     position: relative;
 }


 /* SWITCH DARK /LIGHT */


 .switch {
     font-size: var(--switch-icon-size);
     margin: auto;
     position: relative;
     transition:
         background-color var(--trans-dur),
         color var(--trans-dur);
 }

 .switch__icon,
 .switch__input {
     display: block;
 }

 .switch__icon {
     position: absolute;
     top: 0.5em;
     right: 0.5em;
     width: 0.75em;
     height: 0.75em;
     transition: opacity calc(var(--trans-dur) / 2),
         transform calc(var(--trans-dur) / 2);
 }

 .switch__icon polyline {
     transition: stroke-dashoffset calc(var(--trans-dur) / 2);
 }

 .switch__icon--light,
 .switch__icon--light polyline {
     transition-delay: calc(var(--trans-dur) / 2);
     transition-timing-function: var(--trans-timing-out);
 }

 .switch__icon--dark {
     opacity: 0;
     transform: translateX(-0.75em) rotate(30deg) scale(0.75);
     transition-timing-function: var(--trans-timing-in);
 }

 .switch__input {
     font: 1em/1.5 sans-serif;
     background-color: hsl(210, 90%, 70%);
     border-radius: 0.75em;
     box-shadow:
         0 0 0 0.125em hsla(var(--hue), 90%, 50%, 0),
         0.125em 0.125em 0.25em hsla(var(--hue), 90%, 10%, 0.2);
     outline: transparent;
     position: relative;
     width: 3em;
     height: 1.5em;
     -webkit-appearance: none;
     appearance: none;
     -webkit-tap-highlight-color: transparent;
     transition:
         background-color var(--trans-dur) var(--trans-timing),
         box-shadow 0.15s linear;
 }

 .switch__input:focus-visible {
     box-shadow:
         0 0 0 0.125em hsl(var(--hue), 90%, 50%),
         0.125em 0.125em 0.25em hsla(var(--hue), 90%, 10%, 0.2);
 }

 .switch__input:before,
 .switch__input:after {
     content: "";
     display: block;
     position: absolute;
 }

 .switch__input:before {
     background-color: hsl(50, 90%, 50%);
     border-radius: inherit;
     mask-image: linear-gradient(120deg, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 80%);
     -webkit-mask-image: linear-gradient(120deg, hsl(0, 0%, 0%) 20%, hsla(0, 0%, 0%, 0) 80%);
     inset: 0;
     transition: background-color var(--trans-dur) var(--trans-timing);
 }

 .switch__input:after {
     background-color: hsl(0, 0%, 100%);
     border-radius: 50%;
     box-shadow: 0.05em 0.05em 0.05em hsla(var(--hue), 90%, 10%, 0.1);
     top: 0.125em;
     left: 0.125em;
     width: 1.25em;
     height: 1.25em;
     transition:
         background-color var(--trans-dur) var(--trans-timing),
         transform var(--trans-dur) var(--trans-timing);
     z-index: 1;
 }

 .switch__input:checked {
     background-color: hsl(290, 90%, 40%);
 }

 .switch__input:checked:before {
     background-color: hsl(220, 90%, 40%);
 }

 .switch__input:checked:after {
     background-color: hsl(0, 0%, 0%);
     transform: translateX(1.5em);
 }

 .switch__input:checked~.switch__icon--light,
 .switch__input:checked~.switch__icon--light polyline {
     transition-delay: 0s;
     transition-timing-function: var(--trans-timing-in);
 }

 .switch__input:checked~.switch__icon--light {
     opacity: 0;
     transform: translateX(-0.75em) rotate(-30deg) scale(0.75);
 }

 .switch__input:checked~.switch__icon--light polyline {
     stroke-dashoffset: 1.5;
 }

 .switch__input:checked~.switch__icon--dark {
     opacity: 1;
     transform: translateX(-1.5em);
     transition-delay: calc(var(--trans-dur) / 2);
     transition-timing-function: var(--trans-timing-out);
 }

 .switch__sr {
     overflow: hidden;
     position: absolute;
     width: 1px;
     height: 1px;
 }




 /* .toast {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     padding: 10px 16px;
     border-radius: var(--border-radius);
     background: rgba(0, 0, 0, 0.8);
     color: #fff;
     display: none;
 } */

 .fullscreen-overlay {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.35);
     z-index: 9999;
     animation: overlay-fade 1.2s forwards;
 }

 @keyframes overlay-fade {
     0% {
         opacity: 0
     }

     15% {
         opacity: 1
     }

     85% {
         opacity: 1
     }

     100% {
         opacity: 0
     }
 }

 .success-icon {
     width: 100px;
     height: 100px;
 }

 .circle {
     stroke: #47d147;
     stroke-width: 4;
     stroke-dasharray: 157;
     stroke-dashoffset: 157;
     animation: draw-circle 0.6s ease-in-out forwards 0.15s;
 }

 @keyframes draw-circle {
     to {
         stroke-dashoffset: 0;
     }
 }

 .check {
     stroke: #47d147;
     stroke-width: 4;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-dasharray: 48;
     stroke-dashoffset: 48;
     animation: draw-check 0.4s ease-in-out forwards 0.5s;
 }

 @keyframes draw-check {
     to {
         stroke-dashoffset: 0;
     }
 }


 .error-icon {
     width: 100px;
     height: 100px;
 }

 .error .circle {
     stroke: #c00;
     stroke-width: 4;
     stroke-dasharray: 157;
     stroke-dashoffset: 157;
     animation: draw-circle 0.6s ease-in-out forwards 0.15s;
 }

 .cross {
     stroke: #c00;
     stroke-width: 4;
     stroke-linecap: round;
     stroke-dasharray: 56;
     stroke-dashoffset: 56;
     animation: draw-cross 0.4s cubic-bezier(0.4, 2.4, 0.4, 0.8) forwards 0.5s;
 }

 @keyframes draw-cross {
     to {
         stroke-dashoffset: 0;
     }
 }


 .tablet-optimized .filter,
 .tablet-optimized .period-box,
 .tablet-optimized .exportButton,
 .breakpoint-md .group-row,
 .breakpoint-xs .group-row,
 .breakpoint-xs .filter,
 .breakpoint-xs .period-box,
 .breakpoint-xs .exportButton,
 .breakpoint-sm .group-row,
 .breakpoint-sm .filter,
 .breakpoint-sm .period-box,
 .breakpoint-sm .exportButton  {
     display: none;
 }


/* .mobile-optimized .num */

 .tablet-optimized .sym,
   .breakpoint-sm .sym,
   .breakpoint-xs .sym
    {
     border-top-width: 1px !important;
 }

 /* CLEAN MAP & QUIZ STYLES */
.clean-map-mode .tile {
    background: white !important;
    border: 2px solid #e0e0e0 !important;
    transition: all 0.3s ease !important;
}

.clean-map-mode .tile:hover {
    background: #f5f5f5 !important;
    border-color: #999 !important;
    transform: scale(1.05) !important;
    z-index: 100 !important;
}

.quiz-mode .tile {
    cursor: text !important;
}

.quiz-mode .tile.quiz-correct {
    background: #e8f5e9 !important;
    border-color: #4CAF50 !important;
    animation: pulse-correct 0.6s ease;
}

.quiz-mode .tile.quiz-incorrect {
    background: #ffebee !important;
    border-color: #f44336 !important;
    animation: pulse-incorrect 0.6s ease;
}

.quiz-mode .tile.quiz-answered {
    border-width: 3px !important;
}

@keyframes pulse-correct {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes pulse-incorrect {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.97); }
}

/* QUIZ INPUTS */
.quiz-input {
    font-family: inherit !important;
    transition: all 0.3s ease !important;
}

.quiz-input:focus {
    border-color: #2196F3 !important;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3) !important;
}

/* QUIZ CONTROLS */
#quiz-controls button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

#quiz-controls button:active {
    transform: translateY(0) !important;
}
 

@keyframes pulse-correct {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pulse-incorrect {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Overlay pro zaměření na test */
.quiz-mode #ptable {
    filter: grayscale(.2);
}

.quiz-mode #quiz-panel {
    filter: none;
    opacity: 1;
}

 @media (max-width:900px) {}

 @media (max-width:670px) {

     .group-row,
     .period-col {
         display: none;
     }

     .controls {
         flex-direction: column;
         align-items: stretch
     }
 }