/* =============================================
         BASE
      ============================================= */
      body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
         background-color: #0a0a0a;
         color: #eeeeee;
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 100vh;
         margin: 0;
         padding: 20px;
         box-sizing: border-box;
         transition: background-color 0.3s, color 0.3s;
      }

      h2 {
         text-align: center;
         color: #ffffff;
         margin: 0 0 1.5rem;
         font-size: 1.4rem;
      }

      label {
         display: block;
         margin-bottom: 0.4rem;
         font-size: 0.75rem;
         color: #aaaaaa;
         text-transform: uppercase;
      }

      input, select {
         width: 100%;
         padding: 10px;
         /* border-radius: 6px; */
         border: 1px solid #444444;
         background-color: #121212;
         color: #ffffff;
         box-sizing: border-box;
         font-size: 1rem;
         transition: background-color 0.3s, color 0.3s, border-color 0.3s;
      }

      input { text-align: center; }

      input:focus, select:focus {
         border-color: #ffffff;
         outline: none;
      }

      /* =============================================
         LAYOUT
      ============================================= */
      .dashboard-wrapper {
         display: flex;
         gap: 20px;
         align-items: stretch;
         flex-wrap: wrap;
         justify-content: center;
      }

      .container {
         background-color: #1e1e1e;
         padding: 1.5rem;
         /* border-radius: 12px; */
         box-shadow: 0 8px 24px rgba(0,0,0,0.8);
         width: 320px;
         border: 1px solid #333333;
         display: flex;
         flex-direction: column;
         position: relative;
         z-index: 10;
         transition: background-color 0.3s, border-color 0.3s;
      }

      .input-row {
         display: flex;
         gap: 10px;
      }

      .input-group {
         flex: 1;
         margin-bottom: 1rem;
      }

      /* =============================================
         BUTTONS
      ============================================= */
      button.main-btn {
         width: 100%;
         padding: 12px;
         background-color: #333333;
         border: 1px solid #444444;
         /* border-radius: 6px; */
         color: #ffffff;
         font-weight: bold;
         cursor: pointer;
         transition: 0.2s;
         margin-bottom: 1rem;
      }

      button.main-btn:hover { background-color: #444444; }

      /* =============================================
         VÝSLEDEK BOX
      ============================================= */
      .vysledek-box {
         margin-top: auto;
         padding: 1rem;
         background-color: #121212;
         /* border-radius: 8px; */
         text-align: center;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         position: relative;
         transition: background-color 0.3s;
      }

      .time-val {
         display: block;
         font-size: 1.9rem;
         font-weight: 800;
         color: #ffffff;
         margin-bottom: 5px;
      }

      .countdown {
         color: #ffffff;
         font-size: 1.9rem;
         font-weight: bold;
      }

      .label-text {
         font-size: 0.8rem;
         color: #aaaaaa;
      }

      /* =============================================
         PROGRESS BARS
      ============================================= */
      .progress-container {
         width: 100%;
         background-color: #000000;
         height: 12px;
         /* border-radius: 6px; */
         margin-bottom: 15px;
         overflow: hidden;
         border: 1px solid #333333;
      }

      .progress-bar {
         height: 100%;
         width: 0%;
         background-color: #555555;
         background-image: linear-gradient(
            45deg,
            rgba(255,255,255,0.1) 25%, transparent 25%,
            transparent 50%, rgba(255,255,255,0.1) 50%,
            rgba(255,255,255,0.1) 75%, transparent 75%
         );
         background-size: 40px 40px;
         transition: width 0.5s ease-out, background-color 0.5s ease;
         animation: progress-stripes 1.5s linear infinite;
      }

      @keyframes progress-stripes {
         from { background-position: 0 0; }
         to   { background-position: 40px 0; }
      }

      /* =============================================
         OUTLINE PROGRESS
      ============================================= */
      #outline-progress-container {
         position: fixed;
         inset: 0;
         pointer-events: none;
         z-index: 9999;
         display: none;
      }

      .outline-segment {
         position: absolute;
         background-color: var(--outline-color, #ffffff);
         transition: background-color 0.5s ease;
         box-shadow: 0 0 10px var(--outline-color, transparent);
      }

      #outline-top    { top: 0; left: 0; height: 4px; width: 100%; transform-origin: left;   transform: scaleX(0); }
      #outline-right  { top: 0; right: 0; width: 4px; height: 100%; transform-origin: top;   transform: scaleY(0); }
      #outline-bottom { bottom: 0; right: 0; height: 4px; width: 100%; transform-origin: right; transform: scaleX(0); }
      #outline-left   { bottom: 0; left: 0; width: 4px; height: 100%; transform-origin: bottom; transform: scaleY(0); }

      /* =============================================
         BINGO
      ============================================= */
      .bingo-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 8px;
         margin-top: 10px;
      }

      .bingo-cell {
         background-color: #121212;
         border: 1px solid #333333;
         /* border-radius: 4px; */
         aspect-ratio: 1;
         font-size: 0.65rem;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         cursor: pointer;
         padding: 4px;
         transition: 0.2s;
         color: #eeeeee;
         user-select: none;
         position: relative;
         overflow: hidden;
         word-wrap: break-word;
      }

      .bingo-cell.active {
         background-color: #ffffff;
         color: #000000;
         font-weight: bold;
         border-color: #ffffff;
      }

      .bingo-cell:hover::after {
         content: "✎";
         position: absolute;
         top: 2px; right: 2px;
         font-size: 0.5rem;
         opacity: 0.5;
      }

      /* =============================================
         EVENTS / COUNTDOWN
      ============================================= */
      @keyframes blink-red {
         0%, 100% { background-color: var(--vysledek-bg, #121212); }
         50%       { background-color: #b71c1c; }
      }

      .blikajici-vypln {
         animation: blink-red 0.5s step-end infinite alternate !important;
      }

      .porada-controls {
         margin-top: 15px;
         text-align: left;
         font-size: 0.85rem;
         border-top: 1px solid #333333;
         padding-top: 10px;
      }

      .porada-option {
         display: flex;
         align-items: center;
         gap: 8px;
         margin-bottom: 5px;
         cursor: pointer;
      }

      .porada-option input { width: auto; }

      /* =============================================
         CUSTOM EVENTS
      ============================================= */
      .vlastni-udalost-row {
         margin-bottom: 8px;
         padding-bottom: 8px;
         border-bottom: 1px solid rgba(255,255,255,0.1);
         position: relative;
      }

      .vlastni-udalost-row:last-child { border-bottom: none; }

      .btn-add-vlastni {
         background: #333333;
         border: 1px solid #444444;
         color: #ffffff;
         /* border-radius: 4px; */
         padding: 4px 8px;
         font-size: 0.7rem;
         cursor: pointer;
         margin-top: 5px;
         display: block;
         width: 100%;
      }

      .btn-del-vlastni {
         position: absolute;
         top: 15px; right: 0;
         transform: translateY(-50%);
         background: transparent;
         border: none;
         color: #888888;
         cursor: pointer;
         font-size: 1.2rem;
         line-height: 1;
         padding: 0 8px;
         opacity: 0.6;
         transition: 0.2s;
      }

      .btn-share-vlastni {
        background: transparent;
        border: none;
        color: #888888;
        cursor: pointer;
        font-size: 0.85rem;
        padding: 0 4px;
        opacity: 0.6;
        transition: 0.2s;
        line-height: 1;
        margin-top: 10px;
        }

        .btn-share-vlastni:hover { opacity: 1; }

        .btn-share-vlastni.zkopiro {
        color: #4ade80;
        opacity: 1;
        }

      /* =============================================
         SETTINGS
      ============================================= */
      .settings-wrapper {
         position: fixed;
         top: 15px; right: 15px;
         z-index: 100;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         gap: 8px;
      }

      .settings-icon {
         background: #1e1e1e;
         padding: 8px;
         /* border-radius: 8px; */
         border: 1px solid #333333;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 12px rgba(0,0,0,0.5);
         transition: 0.2s;
      }

      .settings-icon:hover { background-color: #333333; }

      .settings-toggle {
         background: #1e1e1e;
         padding: 12px;
         /* border-radius: 8px; */
         border: 1px solid #333333;
         font-size: 0.75rem;
         color: #aaaaaa;
         display: none;
         flex-direction: column;
         gap: 8px;
         user-select: none;
         box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      }

      .settings-toggle.open { display: flex; }

      .settings-row {
         display: flex;
         align-items: center;
         gap: 8px;
         cursor: pointer;
      }

      .settings-toggle input[type="checkbox"] {
         width: auto;
         margin: 0;
         cursor: pointer;
      }

      /* =============================================
         TRVALÁ ZMĚNA
      ============================================= */
      .trvala-zmena-btn {
         background: transparent;
         border: 1px solid #333333;
         color: #888888;
         font-size: 0.7rem;
         padding: 8px;
         /* border-radius: 6px; */
         cursor: pointer;
         margin-top: 4px;
         transition: 0.2s;
      }

      .trvala-zmena-btn:hover {
         border-color: #666666;
         color: #ffffff;
         background-color: #121212;
      }

      .trvala-zmena-menu {
         background-color: #000000;
         padding: 12px;
         /* border-radius: 8px; */
         border: 1px solid #333333;
         margin-top: 4px;
         display: none;
         flex-direction: column;
         gap: 12px;
         box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
      }

      .trvala-zmena-item {
         display: flex;
         flex-direction: column;
         gap: 4px;
      }

      .trvala-zmena-item label {
         text-transform: none;
         color: #888888;
         font-size: 0.7rem;
         margin-bottom: 0.3rem;
      }

      .trvala-zmena-item input,
      .trvala-zmena-item select {
         padding: 6px;
         font-size: 0.85rem;
         background-color: #121212;
         border: 1px solid #333333;
         color: #ffffff;
      }

      /* =============================================
         FULLSCREEN
      ============================================= */
      .fs-icon {
         position: absolute;
         top: 8px; right: 8px;
         cursor: pointer;
         opacity: 0.3;
         transition: 0.2s;
         font-size: 1.2rem;
         z-index: 10;
      }

      .fs-icon:hover { opacity: 1; }

      #fs-exit {
         display: none;
         position: absolute;
         top: 20px; right: 30px;
         cursor: pointer;
         font-size: 3rem;
         color: #ffffff;
         opacity: 0.5;
         z-index: 20;
         transition: 0.2s;
         line-height: 1;
      }

      #fs-exit:hover { opacity: 1; }

      #fs-overlay {
         display: none;
         position: absolute;
         inset: 0;
         background-color: #b71c1c;
         z-index: 1;
      }

      #udalost-container:fullscreen {
         width: 100vw !important;
         height: 100vh !important;
         max-width: none !important;
         max-height: none !important;
         display: grid !important;
         grid-template-rows: 20vh 60vh 20vh;
         background-color: #000000 !important;
         margin: 0 !important;
         padding: 0 !important;
         border: none !important;
         /* border-radius: 0 !important; */
         overflow: hidden !important;
      }

      body[data-theme="light"] #udalost-container:fullscreen {
        background-color: #ffffff !important;
      }

      body[data-theme="light"] #udalost-container:fullscreen h2 {
        color: #000000 !important;
      }

      body[data-theme="light"] #udalost-container:fullscreen #countdown-lunch {
        color: #000000 !important;
      }

      body[data-theme="light"] #udalost-container:fullscreen #fs-exit {
       color: #555555 !important;
      }

      #udalost-container:fullscreen #fs-overlay  { display: block; opacity: 0; }
      #udalost-container:fullscreen #fs-exit      { display: block; }
      #udalost-container:fullscreen h2            { grid-row: 1; font-size: 8vh; margin: 0; color: #ffffff; align-self: end; z-index: 2; }
      #udalost-container:fullscreen .vysledek-box { grid-row: 2; background-color: transparent !important; width: 100% !important; height: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; z-index: 2; }
      #udalost-container:fullscreen #countdown-lunch { font-size: 20vw !important; line-height: 1 !important; color: #ffffff !important; }
      #udalost-container:fullscreen .porada-controls,
      #udalost-container:fullscreen .fs-icon,
      #udalost-container:fullscreen #next-date    { display: none !important; }

      /* =============================================
         MISC
      ============================================= */
      .hidden { display: none !important; }

      #prazdna-hlaska {
         display: none;
         position: fixed !important;
         top: 50% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;
         z-index: 80 !important; /* Sníženo z 9999, aby nepřekrýval dialogy */
         text-align: center;
         width: auto;
         max-width: 90vw;
         height: auto;
      }
      #prazdna-hlaska img {
         display: block !important;
         margin: 0 auto !important;
         max-width: 280px !important; /* Bezpečná šířka pro mobilní displeje */
         height: auto !important;
         /* border-radius: 12px; */
         box-shadow: 0 8px 24px rgba(0,0,0,0.6);
      }

      .create-event-link {
         display: inline-block;
         margin-top: -4px;
         margin-bottom: 12px;
         color: #ffffff;
         text-decoration: underline;
         font-size: 0.75rem;
         cursor: pointer;
         opacity: 0.7;
         transition: 0.2s;
      }

      .create-event-link:hover { opacity: 1; }

      #version-tag {
         position: fixed;
         bottom: 50px; right: 15px;
         font-size: 0.75rem;
         color: #ffffff;
         user-select: none;
         pointer-events: none;
         opacity: 0.7;
      }

      #link-tag {
         position: fixed;
         bottom: 15px; right: 15px;
         font-size: 0.75rem;
         color: #ffffff;
         opacity: 0.7;
      }

      #link-tag a            { color: inherit; text-decoration: underline; }
      #link-tag a:hover      { color: #c2c2c2; }

      #helpdesk-tag {
         position: fixed;
         bottom: 15px; left: 15px;
         font-size: 0.75rem;
         color: #ffffff;
         opacity: 0.7;
      }

      #helpdesk-tag a            { color: inherit; text-decoration: underline; }
      #helpdesk-tag a:hover      { color: #c2c2c2; }

      #qis-logo {
         position: fixed;
         bottom: 60px; left: 30px;
         pointer-events: none;
         z-index: -1;
         height: 50%;
      }

      #nastaveni-img {
         position: fixed;
         top: 60px; right: 60px;
         pointer-events: none;
         z-index: -1;
         height: 130px;
      }

      #udalost-img {
         position: fixed;
         bottom: 60px; right: 60px;
         pointer-events: none;
         z-index: -1;
         height: 300px;
         display: none;
      }

      /* =============================================
         TÉMATA
      ============================================= */
      body[data-theme="dark"]   { --mini-bar-color: #555555; }

      body[data-theme="light"]  { background-color: #0a0a0a; color: #eeeeee; --mini-bar-color: #555555; }
      body[data-theme="blue"]   { background-color: #0f172a; color: #f8fafc;  --mini-bar-color: #3b82f6; }
      body[data-theme="purple"] { background-color: #1a1025; color: #f3e8ff;  --mini-bar-color: #9333ea; }
      body[data-theme="green"]  { background-color: #0d1f15; color: #e6f4ea;  --mini-bar-color: #166534; }
      body[data-theme="red"]    { background-color: #1a0505; color: #ffeaea;  --mini-bar-color: #991b1b; }
      body[data-theme="orange"] { background-color: #1a0f05; color: #fff2ea;  --mini-bar-color: #9a3412; }
      body[data-theme="pink"]   { background-color: #1a0514; color: #ffeaf5;  --mini-bar-color: #9d174d; }

      /* containers */
      body[data-theme="light"]  .container, body[data-theme="light"]  .settings-toggle, body[data-theme="light"]  .settings-icon, body[data-theme="light"]  .trvala-zmena-menu { background-color: #ffffff;  border-color: #cccccc; color: #111111; } body[data-theme="light"] .settings-icon svg { stroke: #111111; }
      body[data-theme="blue"]   .container, body[data-theme="blue"]   .settings-toggle, body[data-theme="blue"]   .settings-icon, body[data-theme="blue"]   .trvala-zmena-menu { background-color: #1e293b;  border-color: #334155; }
      body[data-theme="purple"] .container, body[data-theme="purple"] .settings-toggle, body[data-theme="purple"] .settings-icon, body[data-theme="purple"] .trvala-zmena-menu { background-color: #2d1b4e;  border-color: #4a2b7a; }
      body[data-theme="green"]  .container, body[data-theme="green"]  .settings-toggle, body[data-theme="green"]  .settings-icon, body[data-theme="green"]  .trvala-zmena-menu { background-color: #163323;  border-color: #245236; }
      body[data-theme="red"]    .container, body[data-theme="red"]    .settings-toggle, body[data-theme="red"]    .settings-icon, body[data-theme="red"]    .trvala-zmena-menu { background-color: #2d0a2a;  border-color: #450a0a; }
      body[data-theme="orange"] .container, body[data-theme="orange"] .settings-toggle, body[data-theme="orange"] .settings-icon, body[data-theme="orange"] .trvala-zmena-menu { background-color: #2d1a0a;  border-color: #452a0a; }
      body[data-theme="pink"]   .container, body[data-theme="pink"]   .settings-toggle, body[data-theme="pink"]   .settings-icon, body[data-theme="pink"]   .trvala-zmena-menu { background-color: #2d0a22;  border-color: #450a31; }

      /* inputs / vysledek-box / bingo-cell */
      /* inputs / vysledek-box / bingo-cell */
      body[data-theme="light"]  input, body[data-theme="light"]  select, body[data-theme="light"]  .vysledek-box, body[data-theme="light"]  .bingo-cell, body[data-theme="light"] #kakulacka-manual { background-color: #e8e8ed; color: #111111; border-color: #cccccc; --vysledek-bg: #e8e8ed; }
      body[data-theme="blue"]   input, body[data-theme="blue"]   select, body[data-theme="blue"]   .vysledek-box, body[data-theme="blue"]   .bingo-cell, body[data-theme="blue"] #kakulacka-manual { background-color: #0f172a; color: #f8fafc;  border-color: #334155; --vysledek-bg: #0f172a; }
      body[data-theme="purple"] input, body[data-theme="purple"] select, body[data-theme="purple"] .vysledek-box, body[data-theme="purple"] .bingo-cell, body[data-theme="purple"] #kakulacka-manual { background-color: #1a1025; color: #f3e8ff;  border-color: #4a2b7a; --vysledek-bg: #1a1025; }
      body[data-theme="green"]  input, body[data-theme="green"]  select, body[data-theme="green"]  .vysledek-box, body[data-theme="green"]  .bingo-cell, body[data-theme="green"] #kakulacka-manual { background-color: #0d1f15; color: #e6f4ea;  border-color: #245236; --vysledek-bg: #0d1f15; }
      body[data-theme="red"]    input, body[data-theme="red"]    select, body[data-theme="red"]    .vysledek-box, body[data-theme="red"]    .bingo-cell, body[data-theme="red"] #kakulacka-manual { background-color: #1a0505; color: #ffeaea;  border-color: #450a0a; --vysledek-bg: #1a0505; }
      body[data-theme="orange"] input, body[data-theme="orange"] select, body[data-theme="orange"] .vysledek-box, body[data-theme="orange"] .bingo-cell, body[data-theme="orange"] #kakulacka-manual { background-color: #1a0f05; color: #fff2ea;  border-color: #452a0a; --vysledek-bg: #1a0f05; }
      body[data-theme="pink"]   input, body[data-theme="pink"]   select, body[data-theme="pink"]   .vysledek-box, body[data-theme="pink"]   .bingo-cell, body[data-theme="pink"] #kakulacka-manual { background-color: #1a0514; color: #ffeaf5;  border-color: #450a31; --vysledek-bg: #1a0514; }
      
      /* buttons */
      body[data-theme="light"]  button.main-btn, body[data-theme="light"]  .btn-add-vlastni { background-color: #e2e8f0; color: #111111; border-color: #cbd5e1; }
      body[data-theme="blue"]   button.main-btn, body[data-theme="blue"]   .btn-add-vlastni { background-color: #334155; color: #f8fafc;  border-color: #475569; }
      body[data-theme="purple"] button.main-btn, body[data-theme="purple"] .btn-add-vlastni { background-color: #4a2b7a; color: #f3e8ff;  border-color: #6b21a8; }
      body[data-theme="green"]  button.main-btn, body[data-theme="green"]  .btn-add-vlastni { background-color: #245236; color: #e6f4ea;  border-color: #306e48; }
      body[data-theme="red"]    button.main-btn, body[data-theme="red"]    .btn-add-vlastni { background-color: #450a0a; color: #ffeaea;  border-color: #7f1d1d; }
      body[data-theme="orange"] button.main-btn, body[data-theme="orange"] .btn-add-vlastni { background-color: #452a0a; color: #fff2ea;  border-color: #7c2d12; }
      body[data-theme="pink"]   button.main-btn, body[data-theme="pink"]   .btn-add-vlastni { background-color: #450a31; color: #ffeaf5;  border-color: #831843; }

      body[data-theme="light"]  button.main-btn:hover { background-color: #cbd5e1; }
      body[data-theme="blue"]   button.main-btn:hover { background-color: #475569; }
      body[data-theme="purple"] button.main-btn:hover { background-color: #6b21a8; }
      body[data-theme="green"]  button.main-btn:hover { background-color: #306e48; }
      body[data-theme="red"]    button.main-btn:hover { background-color: #7f1d1d; }
      body[data-theme="orange"] button.main-btn:hover { background-color: #7c2d12; }
      body[data-theme="pink"]   button.main-btn:hover { background-color: #831843; }

      /* headings / time-val / countdown */
      body[data-theme="light"]  h2, body[data-theme="light"]  .time-val, body[data-theme="light"]  .countdown { color: #111111; }
      body[data-theme="blue"]   h2, body[data-theme="blue"]   .time-val, body[data-theme="blue"]   .countdown,
      body[data-theme="purple"] h2, body[data-theme="purple"] .time-val, body[data-theme="purple"] .countdown,
      body[data-theme="green"]  h2, body[data-theme="green"]  .time-val, body[data-theme="green"]  .countdown,
      body[data-theme="red"]    h2, body[data-theme="red"]    .time-val, body[data-theme="red"]    .countdown,
      body[data-theme="orange"] h2, body[data-theme="orange"] .time-val, body[data-theme="orange"] .countdown,
      body[data-theme="pink"]   h2, body[data-theme="pink"]   .time-val, body[data-theme="pink"]   .countdown { color: #ffffff; }

      /* label-text / label */
      body[data-theme="light"]  .label-text, body[data-theme="light"]  label { color: #555555; }
      body[data-theme="blue"]   .label-text, body[data-theme="blue"]   label { color: #94a3b8; }
      body[data-theme="purple"] .label-text, body[data-theme="purple"] label { color: #d8b4fe; }
      body[data-theme="green"]  .label-text, body[data-theme="green"]  label { color: #a3cbb3; }
      body[data-theme="red"]    .label-text, body[data-theme="red"]    label { color: #fca5a5; }
      body[data-theme="orange"] .label-text, body[data-theme="orange"] label { color: #fdba74; }
      body[data-theme="pink"]   .label-text, body[data-theme="pink"]   label { color: #f9a8d4; }

      /* bingo active */
      body[data-theme="light"]  .bingo-cell.active { background-color: #cbd5e1; color: #000000; border-color: #94a3b8; }
      body[data-theme="blue"]   .bingo-cell.active { background-color: #38bdf8; color: #0f172a;  border-color: #38bdf8; }
      body[data-theme="purple"] .bingo-cell.active { background-color: #c084fc; color: #1a1025;  border-color: #c084fc; }
      body[data-theme="green"]  .bingo-cell.active { background-color: #4ade80; color: #0d1f15;  border-color: #4ade80; }
      body[data-theme="red"]    .bingo-cell.active { background-color: #ef4444; color: #1a0505;  border-color: #ef4444; }
      body[data-theme="orange"] .bingo-cell.active { background-color: #f97316; color: #1a0f05;  border-color: #f97316; }
      body[data-theme="pink"]   .bingo-cell.active { background-color: #ec4899; color: #1a0514;  border-color: #ec4899; }

      /* trvala-zmena-btn */
      body[data-theme="light"]  .trvala-zmena-btn { color: #555555; border-color: #cccccc; }
      body[data-theme="blue"]   .trvala-zmena-btn { color: #94a3b8; border-color: #334155; }
      body[data-theme="purple"] .trvala-zmena-btn { color: #d8b4fe; border-color: #4a2b7a; }
      body[data-theme="green"]  .trvala-zmena-btn { color: #a3cbb3; border-color: #245236; }
      body[data-theme="red"]    .trvala-zmena-btn { color: #fca5a5; border-color: #450a0a; }
      body[data-theme="orange"] .trvala-zmena-btn { color: #fdba74; border-color: #452a0a; }
      body[data-theme="pink"]   .trvala-zmena-btn { color: #f9a8d4; border-color: #450a31; }

      body[data-theme="light"]  .trvala-zmena-btn:hover { background-color: #e8e8ed; color: #111111; }
      body[data-theme="blue"]   .trvala-zmena-btn:hover { background-color: #334155; color: #f8fafc; }
      body[data-theme="purple"] .trvala-zmena-btn:hover { background-color: #4a2b7a; color: #f3e8ff; }
      body[data-theme="green"]  .trvala-zmena-btn:hover { background-color: #245236; color: #e6f4ea; }
      body[data-theme="red"]    .trvala-zmena-btn:hover { background-color: #450a0a; color: #ffeaea; }
      body[data-theme="orange"] .trvala-zmena-btn:hover { background-color: #452a0a; color: #fff2ea; }
      body[data-theme="pink"]   .trvala-zmena-btn:hover { background-color: #450a31; color: #ffeaf5; }

      /* progress-container */
      body[data-theme="light"]  .progress-container { background-color: #cccccc; border-color: #aaaaaa; }
      body[data-theme="blue"]   .progress-container { background-color: #020617; border-color: #334155; }
      body[data-theme="purple"] .progress-container,
      body[data-theme="green"]  .progress-container,
      body[data-theme="red"]    .progress-container,
      body[data-theme="orange"] .progress-container,
      body[data-theme="pink"]   .progress-container { background-color: #000000; border-color: inherit; }

      body[data-theme="purple"] .progress-container { border-color: #4a2b7a; }
      body[data-theme="green"]  .progress-container { border-color: #245236; }
      body[data-theme="red"]    .progress-container { border-color: #450a0a; }
      body[data-theme="orange"] .progress-container { border-color: #452a0a; }
      body[data-theme="pink"]   .progress-container { border-color: #450a31; }

      /* vynucení light stylu */
      body[data-theme="light"] #nahradni-volno-msg,
      body[data-theme="light"] #dovolena-msg,
      body[data-theme="light"] #prescas-prepočet,
      body[data-theme="light"] #bingo-win,
      body[data-theme="light"] #countdown-lunch,
      body[data-theme="light"] .vysledek-box div[style*="color:#ffffff"] { color: #111111 !important; }
      body[data-theme="light"] .create-event-link { color: #111111; }
      body[data-theme="light"] #kakulacka-vysledek, body[data-theme="light"] #kakulacka-desetinny-prepočet { color: #111111 !important; }

      /* pride */
      @keyframes pride-bg {
         0%   { background-position: 0% 50%; }
         50%  { background-position: 100% 50%; }
         100% { background-position: 0% 50%; }
      }

      body[data-theme="pride"] {
         background: linear-gradient(-45deg, #fe0000, #fd8c00, #ffe500, #119f0b, #0644b3, #c22edc);
         background-size: 600% 600%;
         animation: pride-bg 15s ease infinite;
         color: #ffffff;
         --mini-bar-color: #ffffff;
      }

      body[data-theme="pride"] .container,
      body[data-theme="pride"] .settings-toggle,
      body[data-theme="pride"] .settings-icon,
      body[data-theme="pride"] .trvala-zmena-menu {
         background-color: rgba(255,255,255,0.2);
         backdrop-filter: blur(10px);
         border-color: rgba(255,255,255,0.3);
      }

      body[data-theme="pride"] input,
      body[data-theme="pride"] button,
      body[data-theme="pride"] select,
      body[data-theme="pride"] .vysledek-box,
      body[data-theme="pride"] .bingo-cell {
         background-color: rgba(0,0,0,0.3);
         color: #ffffff;
         border-color: rgba(255,255,255,0.2);
         --vysledek-bg: rgba(0,0,0,0.3);
      }

      body[data-theme="pride"] h2,
      body[data-theme="pride"] .time-val,
      body[data-theme="pride"] .countdown { color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }

      body[data-theme="pride"] .label-text,
      body[data-theme="pride"] label      { color: rgba(255,255,255,0.8); }

      body[data-theme="pride"] .bingo-cell.active { background-color: rgba(255,255,255,0.9); color: #000000; }

      #changelog-tag {
        position: fixed;
        bottom: 35px; right: 15px;
        font-size: 0.75rem;
        color: #ffffff;
        user-select: none;
        opacity: 0.7;
        cursor: pointer;
        text-decoration: underline;
        z-index: 1;
        }
        #changelog-tag:hover { color: #c2c2c2; }

        #changelog-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 10000; /* Zvýšeno nad prázdnou hlášku i obvodový bar */
        justify-content: center;
        align-items: center;
        }
        #changelog-overlay.open { display: flex; }

        #changelog-dialog {
        background-color: #1e1e1e;
        border: 1px solid #333333;
        /* border-radius: 12px; */
        padding: 1.5rem;
        width: 420px;
        max-width: 90vw;
        max-height: 70vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0,0,0,0.8);
        position: relative;
        }
        #changelog-dialog h3 {
        margin: 0 0 1rem;
        font-size: 1.1rem;
        color: #ffffff;
        text-align: center;
        }
        #changelog-close {
        position: absolute;
        top: 10px; right: 12px;
        background: transparent;
        border: none;
        color: #aaaaaa;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        transition: 0.2s;
        }
        #changelog-close:hover { color: #ffffff; }
        #changelog-content {
        overflow-y: auto;
        font-size: 0.85rem;
        color: #cccccc;
        line-height: 1.7;
        white-space: pre-wrap;
        }
        #changelog-content .cl-version {
        font-weight: bold;
        color: #ffffff;
        display: inline;
        }

        /* Téma-aware přepsání pro #changelog-dialog */
        body[data-theme="light"]  #changelog-dialog { background-color: #ffffff; border-color: #cccccc; }
        body[data-theme="light"]  #changelog-dialog h3 { color: #111111; }
        body[data-theme="light"]  #changelog-close { color: #555555; }
        body[data-theme="light"]  #changelog-close:hover { color: #111111; }
        body[data-theme="light"]  #changelog-content { color: #333333; }
        body[data-theme="light"]  #changelog-content .cl-version { color: #111111; }

        body[data-theme="blue"]   #changelog-dialog { background-color: #1e293b; border-color: #334155; }
        body[data-theme="purple"] #changelog-dialog { background-color: #2d1b4e; border-color: #4a2b7a; }
        body[data-theme="green"]  #changelog-dialog { background-color: #163323; border-color: #245236; }
        body[data-theme="red"]    #changelog-dialog { background-color: #2d0a2a; border-color: #450a0a; }
        body[data-theme="orange"] #changelog-dialog { background-color: #2d1a0a; border-color: #452a0a; }
        body[data-theme="pink"]   #changelog-dialog { background-color: #2d0a22; border-color: #450a31; }
        body[data-theme="pride"]  #changelog-dialog { background-color: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.3); }
        body[data-theme="pride"]  #changelog-dialog h3,
        body[data-theme="pride"]  #changelog-content .cl-version { color: #ffffff; }
        body[data-theme="pride"]  #changelog-content { color: rgba(255,255,255,0.85); }
        body[data-theme="pride"]  #changelog-close { color: rgba(255,255,255,0.6); }
        body[data-theme="pride"]  #changelog-close:hover { color: #ffffff; }



        /* =============================================
         STYLY PRO KAKULAČKU
      ============================================= */
      .kakula-btn {
         width: 70px;
         height: 70px;
         /* border-radius: 50%; */
         border: 2px solid #444444;
         background-color: #121212;
         font-size: 2.2rem;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.2s ease;
         box-shadow: 0 4px 10px rgba(0,0,0,0.3);
         opacity: 0.3;
      }
      .kakula-btn:disabled {
         cursor: not-allowed;
      }
      .kakula-btn.active {
         opacity: 1;
         border-color: var(--mini-bar-color, #ffffff);
         background-color: #1e1e1e;
      }
      .kakula-btn.active:hover {
         transform: scale(1.08);
      }
      
      /* Úprava pozadí tlačítek pro specifická témata */
      body[data-theme="light"] .kakula-btn {
         background-color: #e8e8ed;
         border-color: #cbd5e1;
         box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      }
      body[data-theme="light"] .kakula-btn.active {
         background-color: #ffffff;
         border-color: #555555;
      }
      body[data-theme="pride"] .kakula-btn {
         background-color: rgba(0,0,0,0.4);
         border-color: rgba(255,255,255,0.2);
      }
      body[data-theme="pride"] .kakula-btn.active {
         background-color: rgba(255,255,255,0.3);
         border-color: #ffffff;
      }

      /* Křížek pro rychlé skrytí modulů */
      .close-icon {
         position: absolute;
         top: 8px; right: 8px;
         cursor: pointer;
         opacity: 0.3;
         transition: 0.2s;
         font-size: 1.2rem;
         z-index: 10;
         user-select: none;
      }
      .close-icon:hover { opacity: 1; }

      /* nová verze changelog tag */
      #changelog-content .cl-new-version {
            color: #4ade80 !important;
            font-weight: bold;
        }

      /* =============================================
         STYLY PRO ČERNÉ PUNTÍKY
      ============================================= */
      #tabulka-puntiku input[type="text"]:focus {
         border: none !important;
         background-color: rgba(255, 255, 255, 0.05);
         outline: none;
      }
      
      body[data-theme="light"] #tabulka-puntiku input[type="text"] {
         color: #111111;
      }


      /* =============================================
         HYDRATAČNÍ ALERT OVERLAY
      ============================================= */
      #hydratace-overlay {
         display: none;
         position: fixed;
         inset: 0;
         background: rgba(0,0,0,0.7);
         z-index: 10001;
         justify-content: center;
         align-items: center;
      }

      #hydratace-overlay.open {
         display: flex;
      }

      .hydratace-dialog {
         background-color: #1e1e1e;
         border: 1px solid #333333;
         padding: 1.5rem;
         width: 320px;
         max-width: 90vw;
         text-align: center;
         position: relative;
         box-shadow: 0 8px 32px rgba(0,0,0,0.8);
      }

      .hydratace-close {
         position: absolute;
         top: 10px; right: 12px;
         background: transparent;
         border: none;
         color: #aaaaaa;
         font-size: 1.5rem;
         line-height: 1;
         cursor: pointer;
         padding: 0;
         transition: 0.2s;
      }

      .hydratace-close:hover { color: #ffffff; }

      /* Témata pro Hydratační dialog */
      body[data-theme="light"]  .hydratace-dialog { background-color: #ffffff; border-color: #cccccc; color: #111111; }
      body[data-theme="light"]  .hydratace-close { color: #555555; }
      body[data-theme="light"]  .hydratace-close:hover { color: #111111; }

      body[data-theme="blue"]   .hydratace-dialog { background-color: #1e293b; border-color: #334155; }
      body[data-theme="purple"] .hydratace-dialog { background-color: #2d1b4e; border-color: #4a2b7a; }
      body[data-theme="green"]  .hydratace-dialog { background-color: #163323; border-color: #245236; }
      body[data-theme="red"]    .hydratace-dialog { background-color: #2d0a2a; border-color: #450a0a; }
      body[data-theme="orange"] .hydratace-dialog { background-color: #2d1a0a; border-color: #452a0a; }
      body[data-theme="pink"]   .hydratace-dialog { background-color: #2d0a22; border-color: #450a31; }
      body[data-theme="pride"]  .hydratace-dialog { background-color: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-color: rgba(255,255,255,0.3); color: #ffffff; }


      /* Zmenšení paddingu celého modulu a nadpisu */
      #kunda-container {
         padding: 1rem 1.25rem;
      }

      #kunda-container h2 {
         margin-bottom: 0.8rem;
         font-size: 1.2rem;
      }

      /* Zmenšení mezer mezi vstupními poli a tloušťky vstupů */
      #kunda-container .input-group {
         margin-bottom: 0.5rem;
      }

      /* #kunda-container input {
         padding: 6px 8px;
         font-size: 0.9rem;
      } */

      #kunda-container label {
         margin-bottom: 0.2rem;
         font-size: 0.7rem;
      }

      /* #kunda-container button.main-btn {
         padding: 8px;
         margin-bottom: 0.5rem;
      } */

      /* Kompaktnější výstupní box s výsledky */
      #kunda-container .vysledek-box {
         padding: 0.6rem;
      }

      /* Zmenšení přebujelých písmen a odstupů v textu výsledků */
      #kunda-container .time-val,
      #kunda-container .countdown {
         font-size: 1.4rem;
         margin-bottom: 2px;
      }

      #kunda-container .progress-container {
         margin-bottom: 8px;
         height: 8px;
      }

      #kunda-container hr {
         margin: 6px 0 !important;
      }

      #kunda-container .create-event-link {
         margin-bottom: 6px;
      }

      /* Zmenšení zdvojených odpočtů dole */
      #kunda-container #vysledek-obsah-standard span,
      #kunda-container #v-praci-container,
      #kunda-container #bilance-container {
         margin-top: 2px !important;
      }