/* ============================================================
   mluvicihodiny.cz — „půlnoc a mosaz"
   Paleta: půlnoční modř, mosaz, slonovina, měděná červeň
   ============================================================ */
:root{
  --night:   #0a0e1c;
  --panel:   #11182c;
  --panel-2: #161f38;
  --line:    #26314f;
  --ivory:   #f2ede3;
  --muted:   #9aa3bd;
  --brass:   #d9a441;
  --brass-2: #f0c46c;
  --copper:  #d96b4a;
  --teal:    #4cc2b5;
  --radius:  18px;
  --disp: "Fraunces", Georgia, serif;
  --body: "Outfit", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
/* ---------- Světlé schéma: „slonovina a inkoust" ---------- */
html[data-theme="light"]{
  --night:   #f4efe4;
  --panel:   #fdfaf2;
  --panel-2: #efe7d4;
  --line:    #d9cdb2;
  --ivory:   #221a0e;
  --muted:   #6e6550;
  --brass:   #a67612;
  --brass-2: #7d590c;
  --copper:  #b34a2e;
  --teal:    #0d7c70;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 70% -10%, #1a2342 0%, transparent 60%),
    radial-gradient(800px 500px at 0% 100%, #131a30 0%, transparent 55%),
    var(--night);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:330;
  min-height:100vh;
}
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 70% -10%, #fff8e7 0%, transparent 60%),
    radial-gradient(800px 500px at 0% 100%, #ece1c6 0%, transparent 55%),
    var(--night);
  font-weight:380;
}
.mono{font-family:var(--mono)}
a{color:inherit;text-decoration:none}
h2{font-family:var(--disp);font-weight:450;font-size:1.15rem;margin:0 0 .8rem;letter-spacing:.02em}
h3.sub{font-family:var(--disp);font-weight:450;font-size:1rem;margin:1.1rem 0 .5rem;color:var(--brass-2)}
.muted{color:var(--muted);font-size:.85rem}

/* ---------- Hlavička ---------- */
.top{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-dial{width:38px;height:38px;border-radius:50%;border:3px solid var(--brass);position:relative;flex:none;
  background:radial-gradient(circle at 35% 30%, #1c2746, #0d1326)}
html[data-theme="light"] .brand-dial{background:radial-gradient(circle at 35% 30%, #fffdf6, #efe4c8)}
.brand-dial::before,.brand-dial::after{content:"";position:absolute;left:50%;top:50%;background:var(--ivory);
  transform-origin:0 0;border-radius:2px}
.brand-dial::before{width:2.5px;height:12px;transform:rotate(180deg)}
.brand-dial::after{width:2.5px;height:9px;transform:rotate(290deg)}
.brand-name{font-family:var(--disp);font-size:1.25rem;font-weight:500;line-height:1.05;display:flex;flex-direction:column}
.brand-name small{font-family:var(--body);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.tools{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}

.langs,.designs{display:flex;flex-wrap:wrap;gap:.4rem}
.designs{justify-content:center;padding:1.1rem 1rem .2rem}
.pill{padding:.34rem .85rem;border:1px solid var(--line);border-radius:999px;font-size:.82rem;color:var(--muted);
  transition:.18s;background:transparent;cursor:pointer;font-family:var(--body)}
.pill:hover{border-color:var(--brass);color:var(--ivory)}
.pill.on{background:var(--brass);border-color:var(--brass);color:#1c1505;font-weight:600}
html[data-theme="light"] .pill.on{color:#fffdf4}
.pill.big{font-size:.95rem;padding:.45rem 1.1rem}
.pill .lock{margin-left:.35em;font-size:.85em}

/* ---------- Jeviště ---------- */
.stage{display:flex;flex-direction:column;align-items:center;padding:1.6rem 1rem 1rem}
.clock-root{width:min(92vw,560px);min-height:300px;display:flex;align-items:center;justify-content:center}
.stage-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:1.2rem}
.hint{color:var(--copper);font-size:.85rem}
.inline-lbl{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--muted)}
.inline-lbl select{width:auto;margin:0}

/* ---------- Fullscreen ---------- */
#fsWrap{position:relative;display:flex;align-items:center;justify-content:center}
#fsWrap:fullscreen{background:var(--night);width:100vw;height:100vh}
#fsWrap:fullscreen .clock-root{width:min(90vw,980px);min-height:0;transform:scale(var(--fs-scale,1.15))}
.fs-caption{position:absolute;top:5vh;left:0;right:0;text-align:center;pointer-events:none}
.fs-caption .cap1{font-family:var(--disp);font-size:clamp(1.5rem,4.2vw,2.9rem);color:var(--brass-2)}
.fs-caption .cap2{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;
  font-size:clamp(.75rem,1.6vw,1rem);margin-top:.4rem}
.fs-brand{position:absolute;bottom:3.2vh;right:3vw;color:var(--muted);font-size:.85rem;letter-spacing:.14em;pointer-events:none}
.preview-badge{position:absolute;top:.3rem;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;
  background:var(--copper);color:#fff;font-weight:600;font-size:.82rem;letter-spacing:.05em;
  padding:.35rem .95rem;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.4);white-space:nowrap}

/* ---------- Tlačítka & formuláře ---------- */
.btn{font-family:var(--body);font-size:.95rem;font-weight:500;cursor:pointer;border-radius:12px;
  padding:.65rem 1.25rem;border:1px solid var(--line);background:var(--panel-2);color:var(--ivory);transition:.18s}
.btn:hover{transform:translateY(-1px);border-color:var(--brass)}
.btn.gold{background:linear-gradient(160deg,var(--brass-2),var(--brass));color:#211803;border:none;font-weight:650}
html[data-theme="light"] .btn.gold{background:linear-gradient(160deg,var(--brass),var(--brass-2));color:#fffdf4}
.btn.gold:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent}
.btn.small{padding:.45rem .9rem;font-size:.85rem}
.btn.tiny{padding:.3rem .65rem;font-size:.78rem;border-radius:9px}
.btn.danger:hover{border-color:var(--copper);color:var(--copper)}
.btn.cta{border-color:var(--brass);color:var(--brass-2);background:transparent;font-weight:600}
.btn.cta:hover{background:var(--brass);color:#211803;transform:translateY(-1px)}
html[data-theme="light"] .btn.cta:hover{color:#fffdf4}
.btn.rec{border-color:var(--copper)}
.btn.rec.on{background:var(--copper);color:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{filter:brightness(1.25)}}
select,input[type=number],input[type=text],input[type=datetime-local]{
  font-family:var(--body);font-size:.9rem;color:var(--ivory);background:var(--night);
  border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem;width:100%;margin-top:.25rem}
input.num{width:5.2rem}
select:focus,input:focus,.btn:focus-visible,.pill:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.lbl{display:block;font-size:.8rem;color:var(--muted);margin:.7rem 0}
.chk{display:flex;gap:.6rem;align-items:flex-start;margin:.6rem 0;font-size:.9rem;cursor:pointer}
.chk input{accent-color:var(--brass);width:1.1rem;height:1.1rem;margin-top:.1rem;flex:none}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}
.presets{margin-top:.2rem}

/* ---------- Reklama ---------- */
.ad-slot{max-width:1280px;margin:0 auto;padding:.5rem 1.4rem}
.ad-note{display:block;text-align:center;border:1px dashed var(--line);border-radius:12px;padding:1.4rem;
  color:var(--muted);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase}

/* ---------- Mřížka karet ---------- */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  padding:1.2rem 1.4rem 1rem;max-width:1280px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
html[data-theme="light"] .card{box-shadow:0 10px 30px rgba(90,70,30,.12)}
.bigtime{font-size:2.3rem;font-weight:400;letter-spacing:.04em;margin:.3rem 0 .4rem;font-variant-numeric:tabular-nums}
.laps{margin:.6rem 0 0;padding-left:1.4rem;font-size:.85rem;color:var(--muted);max-height:9rem;overflow:auto}
.laps li{padding:.12rem 0}
.laps li b{color:var(--ivory);font-weight:500}
.feats{margin:.4rem 0 0;padding-left:1.2rem;font-size:.9rem;line-height:1.65}
.feats li::marker{color:var(--brass)}

/* ---------- Kalendář ---------- */
.cal{display:flex;gap:1.1rem;align-items:center}
.cal-day{font-family:var(--disp);font-size:4.4rem;font-weight:550;line-height:1;color:var(--brass-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:.55rem .9rem;min-width:4.6rem;text-align:center}
.cal-month{font-family:var(--disp);font-size:1.4rem;margin-bottom:.35rem;text-transform:capitalize}
.cal-meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.35rem}
.tag{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .55rem;border-radius:999px;
  border:1px solid var(--line);color:var(--muted)}
.tag.odd{border-color:var(--copper);color:var(--copper)}
.tag.even{border-color:var(--teal);color:var(--teal)}
.cal-meta2{font-size:.82rem;color:var(--muted)}

/* ---------- Široké sekce (knihovna, studio) ---------- */
.wide{max-width:1280px;margin:0 auto;padding:.6rem 1.4rem 1rem}
.sec-head{display:flex;gap:.8rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap;margin-bottom:.6rem}
.sec-head h2{margin:0}
.sec-tools{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}

/* ---------- Knihovna hlasů ---------- */
.voice-list{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.voice-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;
  display:flex;flex-direction:column;gap:.55rem;transition:.18s}
.voice-card:hover{border-color:var(--brass)}
.voice-card.hl{outline:2px solid var(--brass);outline-offset:2px}
.v-top{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start}
.v-name{font-family:var(--disp);font-size:1.05rem;font-weight:500;line-height:1.25}
.v-badges{display:flex;gap:.3rem;flex-wrap:wrap}
.badge{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.16rem .5rem;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.b-top{border-color:var(--brass);color:var(--brass)}
.badge.b-off{border-color:var(--teal);color:var(--teal)}
.badge.b-priv{border-color:var(--copper);color:var(--copper)}
.badge.b-mine{border-color:var(--brass-2);color:var(--brass-2)}
.v-meta{font-size:.78rem;color:var(--muted)}
.prog{height:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-2));transition:width .3s}
.v-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:auto}
.heart{background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);cursor:pointer;
  padding:.32rem .7rem;font-size:.85rem;transition:.18s;font-family:var(--body)}
.heart:hover{border-color:var(--copper);color:var(--copper)}
.heart.on{background:var(--copper);border-color:var(--copper);color:#fff}

/* ---------- Nahrávací studio ---------- */
.studio-grid{display:grid;gap:1rem;grid-template-columns:minmax(260px,340px) 1fr}
@media (max-width:840px){.studio-grid{grid-template-columns:1fr}}
.clip-groups details{border:1px solid var(--line);border-radius:14px;margin-bottom:.7rem;background:var(--panel)}
.clip-groups summary{cursor:pointer;padding:.75rem 1rem;font-family:var(--disp);font-size:.98rem;
  display:flex;justify-content:space-between;gap:.6rem;align-items:center}
.clip-groups summary .cnt{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.clip-rows{padding:.2rem .9rem .7rem}
.clip-row{display:flex;align-items:center;gap:.6rem;padding:.4rem .1rem;border-bottom:1px dashed var(--line)}
.clip-row:last-child{border-bottom:none}
.clip-row .txt{flex:1;font-size:.92rem}
.clip-row .txt small{display:block;color:var(--muted);font-size:.74rem}
.dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);flex:none}
.dot.up{background:var(--teal);border-color:var(--teal)}
.dot.err{background:var(--copper);border-color:var(--copper)}
.studio-note{font-size:.8rem;color:var(--muted);line-height:1.55;margin-top:.6rem}

/* ---------- Patička, toast, konfety ---------- */
.foot{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;padding:1rem;border-top:1px solid var(--line);
  color:var(--muted);font-size:.78rem}
.foot a{text-decoration:underline;text-underline-offset:3px}
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);background:var(--brass);color:#211803;
  font-weight:600;padding:.7rem 1.3rem;border-radius:999px;box-shadow:0 12px 35px rgba(0,0,0,.5);z-index:90;
  max-width:88vw;text-align:center}
html[data-theme="light"] .toast{color:#fffdf4}
#confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}

/* ---------- Modály ---------- */
.mback{position:fixed;inset:0;background:rgba(4,7,16,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:80;padding:1rem}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  max-width:640px;width:100%;max-height:88vh;overflow:auto;padding:1.4rem 1.5rem;box-shadow:0 25px 70px rgba(0,0,0,.55)}
.modal h2{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.m-close{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1}
.m-close:hover{color:var(--copper)}
.legal{font-size:.85rem;line-height:1.65;color:var(--ivory)}
.legal ol{padding-left:1.3rem}
.legal li{margin:.5rem 0}
.share-url{display:flex;gap:.5rem;margin:.7rem 0}
.share-url input{flex:1;font-family:var(--mono);font-size:.8rem}
.prem-status{border:1px solid var(--brass);border-radius:12px;padding:.8rem 1rem;margin:.7rem 0;font-size:.9rem}
.order-box{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:flex-start;border:1px solid var(--brass);
  border-radius:14px;padding:1rem;margin-top:.9rem}
.order-box img{background:#fff;padding:6px;border-radius:10px;flex:none}
.order-box>div{flex:1;min-width:220px}
.kv{border-collapse:collapse;font-size:.92rem}
.kv td{padding:.18rem .8rem .18rem 0;vertical-align:top}
.kv td:first-child{color:var(--muted)}

/* ============================================================
   DESIGNY HODIN
   ============================================================ */

/* — Analogové — */
.an-stop1{stop-color:#1c2746}
.an-stop2{stop-color:#0d1326}
html[data-theme="light"] .an-stop1{stop-color:#fffdf6}
html[data-theme="light"] .an-stop2{stop-color:#eee2c6}
html[data-theme="light"] .an-tick{stroke:#a99c7e}
.an-wrap{width:min(82vw,420px);aspect-ratio:1;position:relative}
.an-face{width:100%;height:100%}
.an-ring{fill:none;stroke:var(--brass);stroke-width:3.5}
.an-bg{fill:url(#anGrad)}
.an-tick{stroke:#6b7494;stroke-width:1.4}
.an-tick.h5{stroke:var(--brass-2);stroke-width:3}
.an-num{fill:var(--ivory);font-family:var(--disp);font-size:22px;font-weight:500;text-anchor:middle;dominant-baseline:central}
.an-hand{stroke-linecap:round}
.an-hour{stroke:var(--ivory);stroke-width:7}
.an-min{stroke:var(--ivory);stroke-width:4.5}
.an-sec{stroke:var(--copper);stroke-width:1.8}
.an-cap{fill:var(--brass)}
.an-date{fill:var(--muted);font-family:var(--mono);font-size:11px;text-anchor:middle;letter-spacing:.12em}

/* — Digitální — */
.dg-wrap{text-align:center}
.dg-time{font-family:var(--mono);font-weight:300;font-size:clamp(3rem,13vw,6.4rem);letter-spacing:.03em;
  font-variant-numeric:tabular-nums;color:var(--ivory);text-shadow:0 0 28px rgba(217,164,65,.25)}
html[data-theme="light"] .dg-time{text-shadow:none}
.dg-time .sec{font-size:.45em;color:var(--brass-2);vertical-align:.55em}
.dg-time .blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.dg-date{font-size:1rem;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;margin-top:.4rem}

/* — Binární — */
.bn-wrap{display:flex;gap:1.6rem;align-items:flex-end}
.bn-group{display:flex;gap:.55rem}
.bn-col{display:flex;flex-direction:column-reverse;gap:.55rem;align-items:center}
.bn-dot{width:clamp(20px,5.5vw,32px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line);
  background:var(--panel-2);transition:background .15s,box-shadow .15s}
.bn-dot.on{background:var(--brass);border-color:var(--brass-2);box-shadow:0 0 14px rgba(217,164,65,.55)}
.bn-lab{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.45rem}
.bn-read{font-family:var(--mono);color:var(--muted);text-align:center;margin-top:1rem;font-size:1rem}

/* — Slovní — */
.wd-wrap{max-width:560px;text-align:center;padding:1rem}
.wd-text{font-family:var(--disp);font-style:italic;font-weight:420;font-size:clamp(1.7rem,6vw,2.9rem);
  line-height:1.35;color:var(--ivory)}
.wd-text em{font-style:italic;color:var(--brass-2)}
.wd-sub{margin-top:.9rem;font-family:var(--mono);color:var(--muted);font-size:.95rem;letter-spacing:.1em}

/* — Nixie — */
.nx-wrap{display:flex;gap:.5rem;align-items:center}
.nx-tube{width:clamp(40px,9vw,72px);height:clamp(72px,16vw,128px);border-radius:14px 14px 18px 18px;
  background:linear-gradient(180deg,rgba(255,140,60,.06),rgba(255,90,30,.13) 60%,rgba(20,10,5,.5));
  border:1.5px solid #3a2c22;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.nx-tube::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(0,0,0,.22) 7px 8px)}
.nx-digit{font-family:var(--mono);font-weight:300;font-size:clamp(2.4rem,7vw,4.6rem);color:#ffb46b;
  text-shadow:0 0 8px #ff7a2e,0 0 26px #ff5e1a,0 0 60px rgba(255,90,20,.5);z-index:1}
.nx-colon{color:#ff9a4d;font-size:clamp(1.8rem,5vw,3.4rem);text-shadow:0 0 14px #ff6a20;animation:blink 1s steps(1) infinite}

/* — Flip (Premium) — */
.fl-wrap{display:flex;gap:.8rem;align-items:flex-start}
.fl-unit{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.fl-card{position:relative;width:clamp(72px,17vw,124px);height:clamp(92px,21vw,152px);border-radius:13px;
  background:linear-gradient(180deg,#222b4e 0 49.4%, #161e3a 50.6% 100%);
  border:1px solid #060a18;box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:clamp(2.6rem,9.5vw,4.8rem);font-weight:300;color:var(--ivory)}
.fl-card::after{content:"";position:absolute;left:0;right:0;top:50%;height:2.5px;background:rgba(0,0,0,.6)}
html[data-theme="light"] .fl-card{background:linear-gradient(180deg,#fffdf6 0 49.4%, #efe5cc 50.6%);
  border-color:#c9bb9a;box-shadow:0 10px 26px rgba(90,70,30,.2)}
html[data-theme="light"] .fl-card::after{background:rgba(120,100,60,.4)}
.fl-card.tick{animation:flTick .38s ease}
@keyframes flTick{0%{transform:perspective(700px) rotateX(0)}45%{transform:perspective(700px) rotateX(74deg)}100%{transform:perspective(700px) rotateX(0)}}
.fl-lab{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* — Matrix (Premium) — */
.mx-wrap{position:relative;width:min(92vw,560px);aspect-ratio:16/10;border-radius:var(--radius);
  overflow:hidden;border:1px solid #133; background:#020804}
.mx-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.mx-time{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:300;font-size:clamp(2.6rem,10vw,5rem);color:#d2ffe0;
  text-shadow:0 0 10px #22c55e,0 0 40px rgba(34,197,94,.6);font-variant-numeric:tabular-nums}

/* — Zen (Premium) — */
.zn-wrap{text-align:center}
.zn-time{font-family:var(--body);font-weight:200;font-size:clamp(4rem,19vw,9.5rem);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;animation:znBreath 7s ease-in-out infinite}
@keyframes znBreath{0%,100%{opacity:.7}50%{opacity:1}}
.zn-date{color:var(--muted);letter-spacing:.32em;text-transform:uppercase;font-size:.82rem;margin-top:.7rem}

@media (max-width:640px){
  .top{justify-content:center;text-align:center}
  .bigtime{font-size:1.9rem}
  .cal-day{font-size:3.4rem}
  .fl-wrap{gap:.45rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* — Sedmisegment LED (Premium) — */
.ld-wrap{background:#0d0505;border:1px solid #2b1212;border-radius:var(--radius);padding:1.4rem 1.6rem}
.ld-wrap svg{display:block;width:min(84vw,480px)}
.ld-seg{fill:#2a0d0d}
.ld-seg.on{fill:#ff3b30;filter:drop-shadow(0 0 6px #ff3b30)}

/* — Terminál (Premium) — */
.tm-wrap{background:#04120a;border:1px solid #0f3d22;border-radius:var(--radius);
  padding:1.2rem 1.4rem;font-family:var(--mono);color:#4ade80;width:min(88vw,520px);
  box-shadow:inset 0 0 60px rgba(16,185,129,.08)}
.tm-wrap .ln{font-size:.85rem;opacity:.75}
.tm-time{font-size:clamp(2.2rem,9vw,4.2rem);font-weight:300;text-shadow:0 0 12px rgba(74,222,128,.6);margin:.4rem 0}
.tm-cursor{display:inline-block;width:.55em;height:1.1em;background:#4ade80;vertical-align:-0.15em;animation:blink 1s steps(1) infinite}

/* — Prstence (Premium) — */
.rg-wrap{position:relative;width:min(82vw,380px);aspect-ratio:1}
.rg-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.rg-bg{fill:none;stroke:var(--panel-2);stroke-width:10}
.rg-h{fill:none;stroke:var(--brass);stroke-width:10;stroke-linecap:round}
.rg-m{fill:none;stroke:var(--teal);stroke-width:10;stroke-linecap:round}
.rg-s{fill:none;stroke:var(--copper);stroke-width:10;stroke-linecap:round}
.rg-time{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums}
.rg-time b{font-size:clamp(1.9rem,7vw,3rem);font-weight:400;font-family:var(--mono)}
.rg-time span{color:var(--muted);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}

/* — Neon (Premium) — */
.ne-wrap{background:#0b0714;border:1px solid #251445;border-radius:var(--radius);padding:1.6rem 2rem;text-align:center}
.ne-time{font-family:var(--mono);font-weight:300;font-size:clamp(2.8rem,11vw,5.4rem);color:#e9faff;
  text-shadow:0 0 6px #22d3ee,0 0 20px #22d3ee,0 0 46px #0ea5e9;font-variant-numeric:tabular-nums}
.ne-date{margin-top:.5rem;color:#f0abfc;text-shadow:0 0 10px #d946ef;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem}

/* — Retro LCD (Premium) — */
.lc-wrap{background:#9aa876;border:6px solid #3d3a2f;border-radius:14px;padding:1rem 1.4rem;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}
.lc-face{position:relative;font-family:var(--mono);font-weight:500;font-size:clamp(2.4rem,10vw,4.6rem);color:#1c2212}
.lc-ghost{position:absolute;inset:0;opacity:.09}
.lc-date{font-family:var(--mono);font-size:.85rem;color:#2c331d;margin-top:.2rem;letter-spacing:.1em}

/* — Kapesní hodinky (Premium) — */
.kp-wrap{width:min(80vw,400px);aspect-ratio:1}
.kp-face{width:100%;height:100%}
.kp-num{fill:var(--ivory);font-family:var(--disp);font-size:15px;text-anchor:middle;dominant-baseline:central}
html[data-theme="light"] .kp-ring{stroke:#8a6210}

/* — Den a noc (Premium) — */
.sk-wrap{position:relative;width:min(90vw,540px);aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line)}
.sk-body{position:absolute;width:52px;height:52px;border-radius:50%}
.sk-time{position:absolute;left:0;right:0;bottom:.7rem;text-align:center;font-family:var(--mono);
  font-size:clamp(1.8rem,7vw,3rem);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55)}

/* — Nádražní (Premium) — */
.nd-wrap{width:min(80vw,400px);aspect-ratio:1}
.nd-face{width:100%;height:100%}

/* — Mozaika (Premium) — */
.mz-wrap{display:flex;gap:clamp(4px,1vw,7px)}
.mz-col{display:grid;grid-template-rows:repeat(5,1fr);grid-auto-flow:column;gap:clamp(4px,1vw,7px)}
.mz-cell{width:clamp(10px,2.6vw,17px);aspect-ratio:1;border-radius:3px;background:var(--panel-2);transition:background .2s}
.mz-cell.on{background:var(--brass);box-shadow:0 0 8px rgba(217,164,65,.5)}
.mz-gap{width:clamp(6px,1.4vw,10px)}

/* — Astroláb (Premium) — */
.ob-num{fill:var(--brass-2);font-family:var(--disp);font-size:12px;text-anchor:middle;dominant-baseline:central}
.ob-num24{fill:var(--muted);font-family:var(--mono);font-size:7.5px;text-anchor:middle;dominant-baseline:central}

/* — Odbíjení, minutka, pozadí — */
.egg-row{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 .1rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--line);border-radius:999px;
  padding:.3rem .75rem;font-size:.82rem;background:var(--panel-2);cursor:pointer}
.chip:hover{border-color:var(--brass)}
.chip .x{color:var(--muted);cursor:pointer;font-size:.9em}
.chip .x:hover{color:var(--copper)}
.quiet-row select{width:4.6rem}

/* ---------- Barevné akcenty (Premium) ---------- */
html[data-accent="med"]{--brass:#d97a4a;--brass-2:#f0a97c}
html[data-accent="smaragd"]{--brass:#3fae7a;--brass-2:#7bd8ab}
html[data-accent="safir"]{--brass:#4f8fd9;--brass-2:#8ab8ec}
html[data-accent="ametyst"]{--brass:#9a6fd9;--brass-2:#c3a1f0}
html[data-accent="ruze"]{--brass:#d96f9a;--brass-2:#f0a1c0}
html[data-theme="light"][data-accent="med"]{--brass:#a8522a;--brass-2:#7d3a18}
html[data-theme="light"][data-accent="smaragd"]{--brass:#1d7a4f;--brass-2:#125c3a}
html[data-theme="light"][data-accent="safir"]{--brass:#2563a8;--brass-2:#1a4a80}
html[data-theme="light"][data-accent="ametyst"]{--brass:#6d3fb0;--brass-2:#512d86}
html[data-theme="light"][data-accent="ruze"]{--brass:#b03a6d;--brass-2:#8a2a54}
.accents{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0}
.swatch{width:2rem;height:2rem;border-radius:50%;border:2px solid var(--line);cursor:pointer;transition:.15s;padding:0}
.swatch:hover{transform:scale(1.12)}
.swatch.on{border-color:var(--ivory);box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--brass)}