/* World Time Wall — Apple calm × TvS punch × Ioana warmth. Light-first, CWV-safe. */
:root{
  --bg:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --muted:#6e6e73;
  --stroke:#e5e5ea; --accent:#0071e3; --red:#ff3b30;
  --glass:rgba(255,255,255,.82);
  --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 40px rgba(0,0,0,.08);
  --r:20px; --max:1200px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Inter,Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme="dark"]{
  --bg:#000000; --card:#161617; --ink:#f5f5f7; --muted:#a1a1a6;
  --stroke:#2c2c2e; --accent:#2997ff;
  --glass:rgba(22,22,23,.78);
  --shadow:0 18px 50px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
code{font-family:var(--mono);font-size:.9em;background:rgba(127,127,127,.14);padding:1px 6px;border-radius:6px}
a{color:var(--accent)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0 0 12px 0;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
/* NAV — Apple slim */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--stroke)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px}
.nav-brand{font-weight:800;letter-spacing:-.02em;color:var(--ink);text-decoration:none;font-size:17px;display:flex;gap:8px;align-items:center}
.nav-mark{width:28px;height:28px;display:grid;place-items:center;background:var(--ink);color:var(--bg);border-radius:9px}
.nav-links{display:flex;gap:4px;margin-left:12px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;padding:6px 10px;border-radius:999px}
.nav-links a:hover{color:var(--ink);background:rgba(127,127,127,.12)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:800;background:rgba(127,127,127,.16)}
/* Global nav search */
.gsearch{position:relative}
.gsearch input{border:1px solid var(--stroke);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13px;font-family:inherit;width:190px}
.gsearch input:focus{outline:2px solid var(--accent);width:230px}
.gresults{position:absolute;top:calc(100% + 8px);right:0;width:min(360px,84vw);background:var(--card);border:1px solid var(--stroke);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;z-index:60}
.grow{display:flex;gap:8px;align-items:center;padding:6px 8px 6px 12px;border-bottom:1px solid var(--stroke)}
.grow:last-child{border-bottom:0}
.grow.active,.grow:hover{background:rgba(127,127,127,.1)}
.ggo{flex:1;min-width:0;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left;padding:6px 0;font-size:14px;font-family:inherit}
.ggo strong{font-weight:700}
.ggo .muted{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;white-space:nowrap}
.gpin{border:1px solid var(--stroke);background:var(--ink);color:var(--bg);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.gpin:disabled{opacity:.45;cursor:default}
@media(max-width:760px){.gsearch input{width:130px}.gsearch input:focus{width:160px}.nav-live{display:none}}
/* Inner pages */
.page-head{padding:20px 4px 2px}
.page-head h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.035em;margin:0}
.link-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.link-card{border:1px solid var(--stroke);border-radius:16px;padding:14px 16px;background:var(--card);text-decoration:none;color:var(--ink);display:grid;gap:4px}
.link-card:hover{border-color:var(--ink)}
.boards-big{align-items:flex-start}
.boards-main{flex:1;min-width:0}
.boards-side{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.boards-side .ghost{text-decoration:none;font-size:13px}
/* Contact form */
.form{display:grid;gap:10px;margin-top:12px}
.form label{display:grid;gap:6px;font-size:13px;font-weight:700}
.form input,.form select,.form textarea{border:1px solid var(--stroke);background:var(--card);color:var(--ink);border-radius:12px;padding:11px 13px;font-size:14px;font-family:inherit;width:100%}
.form textarea{min-height:130px;resize:vertical;font-family:inherit}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav-live{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:#30d158;display:inline-block;box-shadow:0 0 0 4px rgba(48,209,88,.18)}
/* HERO — ultra-compact */
.hero{max-width:var(--max);margin:0 auto;padding:20px 22px 12px;text-align:center}
.hero h1{font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.035em;margin:0;font-weight:800}
.hero h1 .loud{background:var(--ink);color:var(--bg);padding:0 10px;border-radius:10px;display:inline-block;transform:rotate(-1.2deg)}
.hero .sub{margin:6px 0 10px;color:var(--muted);font-size:14px}
.toolbar{display:inline-flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 auto;padding:6px 10px}
.glass{background:var(--glass);border:1px solid var(--stroke);border-radius:var(--r);backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--shadow)}
.seg{display:flex;background:rgba(127,127,127,.14);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:13px}
.seg button.active{background:var(--ink);color:var(--bg)}
.pill{border:1px solid var(--stroke);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700;font-size:13px}
/* ADS — 3 slim units per page: top, in-content, rail. Muted, CLS-safe. */
.ad-slot{position:relative;border:1px solid var(--stroke);border-radius:12px;background:transparent;margin:14px 0;min-height:64px;display:grid;place-items:center;overflow:hidden;opacity:.85}
.ad-label{position:absolute;top:4px;left:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.7}
.ad-infeed{min-height:72px}.ad-rail{min-height:250px;margin:0}.ad-top{min-height:72px;margin:10px 0}
/* LAYOUT */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
main{display:grid;gap:14px;min-width:0}
.panel{padding:20px}
h2{margin:0 0 6px;font-size:22px;letter-spacing:-.03em}
h3{font-size:17px;letter-spacing:-.01em}
.count{background:var(--ink);color:var(--bg);border-radius:999px;padding:2px 10px;font-size:13px}
.muted{color:var(--muted);font-size:14px}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.panel-head.wrap{flex-wrap:wrap;align-items:center}
.panel-actions,.tabs{display:flex;gap:8px}
.ghost{border:1px solid var(--stroke);background:var(--card);color:var(--ink);border-radius:12px;padding:9px 13px;cursor:pointer;font-weight:600}
.ghost:hover{border-color:var(--ink)}
.ghost.danger{color:var(--red)}
[data-theme="light"] .ghost.danger{color:#c8102e}
.ghost:disabled{opacity:.4}
.tabs button{border:1px solid var(--stroke);background:var(--card);color:var(--muted);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:700}
.tabs button.active{background:var(--ink);color:var(--bg)}
/* CARDS — contained: every face stays inside its own card */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.grid.small{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--stroke);box-shadow:0 1px 0 rgba(0,0,0,.03);transition:transform .15s ease;min-width:0;overflow:hidden}
.card:hover{transform:translateY(-2px)}
.card.local{outline:2px solid var(--accent)}
.card-top{display:flex;justify-content:space-between;gap:8px}
.city{font-weight:800;font-size:16px;letter-spacing:-.01em}
.city .you{display:inline-flex;margin-left:.3em;color:var(--accent);vertical-align:-.06em}
.city .you .ic{width:.92em;height:.92em}
.zone{font-size:12px;color:var(--muted);font-family:var(--mono)}
.time{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px;font-variant-numeric:tabular-nums;max-width:100%}
.time small{font-size:14px;color:var(--muted)}
.date{font-size:13px;color:var(--muted)}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.badge{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid var(--stroke);background:rgba(127,127,127,.12);white-space:nowrap;flex:none;display:inline-block;min-width:62px;text-align:center;line-height:1.6}
.badge.utc{width:80px;min-width:80px;max-width:80px;padding-left:0;padding-right:0}
.badge.day{background:#e7f9ee}.badge.night{background:#eceaff}
.badge.dst{background:#fff4d6}.badge.diff{background:#e8f3ff}.badge.biz{background:#dff7e8}
[data-theme="dark"] .badge.day,[data-theme="dark"] .badge.night,[data-theme="dark"] .badge.dst,[data-theme="dark"] .badge.diff,[data-theme="dark"] .badge.biz{color:#1d1d1f}
.card-btns{display:flex;gap:6px;margin-top:12px}
.card-btns button{flex:1;border:1px solid var(--stroke);background:transparent;color:var(--ink);border-radius:10px;padding:8px;cursor:pointer;font-size:13px;font-weight:700}
.card-btns .pin{background:var(--ink);color:var(--bg);border:0}
.card-btns [data-act="style"]{flex:0 0 auto;padding:8px 10px}
.card-btns [data-act="style"].custom{border-color:var(--accent);color:var(--accent)}
/* Analog cards show the dial only (digital readout hidden) — consistent in every view */
.card.is-analog [data-clock-time]{display:none}
.empty{border:2px dashed var(--stroke);border-radius:18px;padding:26px;text-align:center;color:var(--muted)}
.friendly{background:#fffdf4}
[data-theme="dark"] .friendly{background:#1c1a12}
.analog{width:86px;height:86px;border-radius:50%;border:2px solid var(--stroke);position:relative;margin:10px auto;background:var(--card);aspect-ratio:1/1;flex:none;max-width:100%}
.analog i{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;background:var(--ink);border-radius:2px}
.analog .h{width:4px;height:22px;margin-left:-2px}.analog .m{width:3px;height:30px;margin-left:-1.5px}
.analog .s{width:2px;height:34px;margin-left:-1px;background:var(--red)}
.analog::after{content:"";position:absolute;width:8px;height:8px;background:var(--red);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.analog::before{content:"";position:absolute;inset:7%;border-radius:50%;pointer-events:none}
.conv-row{display:flex;gap:8px;flex-wrap:wrap}
.conv-row input,.conv-row select,.filters input,.filters select{border:1px solid var(--stroke);background:var(--card);color:var(--ink);border-radius:12px;padding:11px 13px;font-size:14px;font-family:inherit}
.filters{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:8px;align-items:stretch;margin-bottom:12px}
.filters input{min-width:0}
input::placeholder{color:var(--muted);opacity:1}
.check{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--stroke);border-radius:12px;padding:8px 14px;background:var(--card);cursor:pointer;user-select:none}
.check input{accent-color:var(--ink);width:15px;height:15px;margin:0}
@media(max-width:760px){.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}}
.conv-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:10px}
.conv-out div{border:1px solid var(--stroke);border-radius:12px;padding:10px;font-size:13px;background:var(--card)}
.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:14px}
/* Slim content + FAQ */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chips a{text-decoration:none;color:var(--ink);border:1px solid var(--stroke);border-radius:999px;padding:6px 12px;background:var(--card);font-size:13px}
.chips span{color:var(--muted);font-variant-numeric:tabular-nums}
details{border-top:1px solid var(--stroke);padding:10px 2px}
details summary{cursor:pointer;font-weight:600;font-size:15px}
details p{color:var(--muted)}
/* RAIL */
.rail{display:grid;gap:14px;position:sticky;top:70px;align-content:start}
.rail-card{padding:14px 16px}
/* FOOTER — one line */
.footer{border-top:1px solid var(--stroke);margin-top:20px;padding:14px 0 22px}
.foot-slim{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.foot-slim a{color:var(--muted);text-decoration:none}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;transition:.25s;pointer-events:none;z-index:99}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* FULLSCREEN WALL DISPLAY — big-monitor mode */
.ghost.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fs-bar{display:none;align-items:center;gap:12px;padding:10px 4px 14px}
.fs-title{font-weight:800;letter-spacing:-.02em}
.fs-spacer{flex:1}
/* Vector icons (never rely on the ⛶ glyph — most systems lack it) */
.ic{width:1.05em;height:1.05em;vertical-align:-0.16em;flex:none}
button .ic{pointer-events:none}
.fs-title .ic{width:1.2em;height:1.2em;vertical-align:-0.2em}
.fs-bar kbd{border:1px solid var(--stroke);border-radius:6px;padding:1px 6px;font-family:var(--mono);font-size:12px}
/* Real Fullscreen API target = #board — FIT ALL pinned zones, no scroll */
#board:fullscreen{overflow:hidden;border-radius:0;border:0;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh;background:var(--bg);display:flex;flex-direction:column;padding:18px 22px}
#board:fullscreen .fs-bar{display:flex;position:static;background:none;backdrop-filter:none;padding:0 0 12px}
#board:fullscreen .panel-actions,#board:fullscreen .panel-head .muted,#board:fullscreen #boardEmpty{display:none}
#board:fullscreen .panel-head{margin:0 0 10px}
#board:fullscreen #boardTitle{font-size:20px}
#board:fullscreen #boardGrid{flex:1;min-height:0;display:grid;gap:14px;overflow:hidden;align-content:stretch;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
#board:fullscreen .card{padding:20px;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
#board:fullscreen .city{font-size:clamp(18px,1.6vw,24px)}
#board:fullscreen .zone{font-size:13px}
#board:fullscreen .time{font-size:var(--fs-time,clamp(44px,4.5vw,76px));margin:4px 0}
#board:fullscreen .date{font-size:15px}
#board:fullscreen .badge{font-size:12px}
#board:fullscreen .card-btns{display:none}
#board:fullscreen .analog{display:block;width:clamp(120px,22vh,180px);height:clamp(120px,22vh,180px)}
#board:fullscreen .card.is-analog [data-clock-time],
#board:fullscreen .card.is-analog [data-clock-date]{display:none}
/* Fallback presentation mode (when Fullscreen API blocked, e.g. iframe) */
#board.presenting{position:fixed;inset:0;z-index:80;overflow:hidden;border-radius:0;background:var(--bg);display:flex;flex-direction:column;padding:18px 22px;height:100vh;height:100dvh}
#board.presenting .fs-bar{display:flex;position:static;background:none;backdrop-filter:none;padding:0 0 12px}
#board.presenting .converter,#board.presenting .boards,#board.presenting .panel-actions,#board.presenting .kicker,#board.presenting .panel-head .muted,#board.presenting #boardEmpty{display:none}
#board.presenting .converter,#board.presenting .boards,#board.presenting .panel-actions,#board.presenting .kicker,#board.presenting .panel-head .muted{display:none}
#board.presenting .panel-head{margin:0 0 10px}
#board.presenting #boardGrid{flex:1;min-height:0;display:grid;gap:14px;overflow:hidden;align-content:stretch}
#board.presenting .card{padding:20px;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
#board.presenting .city{font-size:clamp(18px,1.6vw,24px)}
#board.presenting .time{font-size:var(--fs-time,clamp(44px,4.5vw,76px));margin:4px 0}
#board.presenting .date{font-size:15px}
#board.presenting .card-btns{display:none}
#board.presenting .analog{display:block;width:clamp(120px,22vh,180px);height:clamp(120px,22vh,180px)}
#board.presenting .card.is-analog [data-clock-time],
#board.presenting .card.is-analog [data-clock-date]{display:none}
/* SNAPSHOT FULLSCREEN — one saved board's exact zones, on the Boards page */
#snapFs{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;padding:18px 22px;overflow:hidden}
#snapFs:fullscreen{height:100vh;height:100dvh}
#snapFs .snap-head{display:flex;align-items:center;gap:12px;padding-bottom:12px}
#snapFs .snap-grid{flex:1;min-height:0;display:grid;gap:14px;overflow:hidden}
#snapFs .card{padding:20px;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
#snapFs .city{font-size:clamp(18px,1.6vw,24px)}
#snapFs .time{font-size:var(--fs-time,clamp(44px,4.5vw,76px));margin:4px 0}
#snapFs .date{font-size:15px}
#snapFs .analog{display:block;width:clamp(120px,22vh,180px);height:clamp(120px,22vh,180px)}
#snapFs .card.is-analog [data-clock-time],
#snapFs .card.is-analog [data-clock-date]{display:none}
/* SAVED BOARDS — on-device, no sign-up */
.boards-row{display:flex;gap:8px;flex-wrap:wrap}
.boards-row input{flex:2;min-width:200px;border:1px solid var(--stroke);background:var(--card);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:14px;font-family:inherit}
.boards-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.boards-item{display:flex;gap:8px;align-items:center;border:1px solid var(--stroke);border-radius:12px;padding:8px 8px 8px 12px;background:var(--card)}
.boards-load{flex:1;border:0;background:transparent;color:var(--ink);font-weight:800;font-size:14px;text-align:left;cursor:pointer;padding:4px 0}
.boards-load:hover{text-decoration:underline}
.boards-meta{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%}
.boards-del{flex:0 0 auto}
.boards-empty{border:1px dashed var(--stroke);border-radius:12px;padding:10px 12px}
@media(max-width:640px){.hide-small{display:none}}
@media(max-width:1020px){.layout{grid-template-columns:1fr}.rail{position:static;grid-template-columns:1fr 1fr}.ad-rail{min-height:160px}}
@media(max-width:640px){.nav-links{display:none}.hero{padding-top:22px}.panel{padding:18px}.rail{grid-template-columns:1fr}.panel-head{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ============ CLOCK STYLES — nearest [data-clock] scope wins (page default, per-card override, gallery preview) ============ */
/* Generic consumers: every clock reads its look from inherited variables. Defaults reproduce the classic look. */
.time{background:var(--t-bg,transparent);color:var(--t-fg,inherit);font-family:var(--t-font,inherit);font-weight:var(--t-weight,inherit);font-style:var(--t-fst,normal);letter-spacing:var(--t-spacing,normal);line-height:var(--t-lh,inherit);padding:var(--t-pad,0);border-radius:var(--t-radius,0);border:var(--t-bdw,0) var(--t-bds,solid) var(--t-bdc,transparent);border-bottom:var(--t-bbw,0) var(--t-bbs,solid) currentColor;box-shadow:var(--t-box,none);text-shadow:var(--t-shadow,none);-webkit-background-clip:var(--t-clip,border-box);background-clip:var(--t-clip,border-box);-webkit-text-stroke:var(--t-sw,0) var(--t-sc,currentcolor)}
.time small{color:var(--t-sm,var(--muted));opacity:var(--t-so,1)}
.analog{background-color:var(--a-bgc,var(--card));background-image:var(--a-bgi,none);background-size:cover;background-position:center;border:var(--a-bdw,2px) solid var(--a-bdc,var(--stroke));animation:var(--a-anim,none)}
.analog::before{background:repeating-conic-gradient(from -.3deg,var(--a-tick,transparent) 0deg var(--a-tw,.7deg),transparent var(--a-tw,.7deg) 30deg);-webkit-mask:radial-gradient(closest-side,transparent 78%,#000 79%);mask:radial-gradient(closest-side,transparent 78%,#000 79%)}
.analog .h{background:var(--h-bg,var(--ink));width:var(--h-w,4px);margin-left:calc(var(--h-w,4px)/-2);box-shadow:var(--h-sh,none)}
.analog .m{background:var(--m-bg,var(--ink));width:var(--m-w,3px);margin-left:calc(var(--m-w,3px)/-2);box-shadow:var(--m-sh,none)}
.analog .s{background:var(--s-bg,var(--red));width:var(--s-w,2px);margin-left:calc(var(--s-w,2px)/-2);box-shadow:var(--s-sh,none)}
.analog::after{background:var(--a-dot,var(--red));box-shadow:var(--a-dsh,none);width:var(--a-dw,8px);height:var(--a-dh,8px)}

/* ---- DIGITAL presets (d-classic intentionally unstyled: it IS the default) ---- */
[data-clock="d-neon"]{--t-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--t-bg:#07070f;--t-fg:#7df9ff;--t-radius:12px;--t-pad:4px 12px;--t-shadow:0 0 8px #22d3ee,0 0 22px #22d3ee;--t-sm:#7df9ff;--t-so:.7}
[data-clock="d-terminal"]{--t-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--t-bg:#0a0f0a;--t-fg:#4dff6a;--t-radius:8px;--t-pad:4px 12px;--t-spacing:.06em;--t-sm:#4dff6a;--t-so:.7}
[data-clock="d-elegant"]{--t-font:Georgia,'Times New Roman',serif;--t-weight:400;--t-spacing:.1em}
[data-clock="d-bold"]{--t-weight:900;--t-spacing:-.03em}
[data-clock="d-pill"]{--t-bg:rgba(127,127,127,.16);--t-radius:999px;--t-pad:2px 16px}
[data-clock="d-outline"]{--t-fg:transparent;--t-sw:1.3px;--t-sc:var(--ink)}
[data-clock="d-station"]{--t-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--t-weight:800;--t-spacing:.12em;--t-bbw:3px;--t-bbs:double}
[data-clock="d-thin"]{--t-weight:200;--t-spacing:.1em}
[data-clock="d-sunset"]{--t-bg:linear-gradient(90deg,#ff8a00,#ff2d78);--t-clip:text;--t-fg:transparent;--t-weight:800}
[data-clock="d-candy"]{--t-bg:linear-gradient(135deg,#ff5fa2,#b16cea);--t-fg:#fff;--t-radius:18px;--t-pad:6px 18px;--t-weight:900;--t-spacing:.02em;--t-shadow:2px 2px 0 #5b2a86;--t-box:0 6px 18px rgba(177,108,234,.45);--t-sm:#fff;--t-so:.85}
[data-clock="d-pop"]{--t-bg:#ffd500;--t-fg:#111;--t-bdw:3px;--t-bdc:#111;--t-radius:14px;--t-pad:4px 16px;--t-weight:900;--t-spacing:.04em;--t-box:5px 5px 0 #111;--t-sm:#111}
[data-clock="d-matrix"]{--t-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--t-bg:repeating-linear-gradient(transparent 0 3px,rgba(0,255,102,.07) 3px 4px),#020604;--t-fg:#00ff66;--t-radius:8px;--t-pad:6px 14px;--t-spacing:.1em;--t-shadow:0 0 6px #00ff66,0 0 24px #00ff66;--t-sm:#00ff66;--t-so:.75}
[data-clock="d-retro"]{--t-bg:linear-gradient(180deg,#3b1f5e 0 32%,#c96f2e 32% 55%,#e8a94c 55% 76%,#f5d78e 76%);--t-fg:#fff8e7;--t-radius:14px;--t-pad:6px 16px;--t-weight:900;--t-fst:italic;--t-spacing:.05em;--t-shadow:3px 3px 0 #5b2a1a;--t-sm:#fff8e7}
[data-clock="d-lagoon"]{--t-bg:linear-gradient(135deg,#023e8a,#00b4d8);--t-fg:#caf0f8;--t-radius:14px;--t-pad:6px 16px;--t-weight:800;--t-spacing:.05em;--t-shadow:0 0 12px #48cae4;--t-sm:#caf0f8;--t-so:.8}
[data-clock="d-grid"]{--t-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--t-weight:700}
[data-clock="d-typo"]{--t-font:Georgia,'Times New Roman',serif;--t-weight:900;--t-spacing:-.02em}
[data-clock="d-vars"]{--t-weight:800}

/* ---- ANALOG presets ---- */
[data-clock="a-heritage"]{--a-bgc:#f6efdc;--a-bdc:#8a6d3b;--a-tick:#8a6d3b;--h-bg:#4a2f18;--h-w:5px;--m-bg:#4a2f18;--s-bg:#b3261e;--a-dot:#b3261e}
[data-clock="a-midnight"]{--a-bgc:#0b0e1a;--a-bdc:#2b3350;--a-tick:rgba(255,255,255,.55);--h-bg:#f2f5ff;--m-bg:#f2f5ff;--s-bg:#38e1ff;--a-dot:#38e1ff;--a-dsh:0 0 10px #38e1ff}
[data-clock="a-minimal"]{--a-bgc:transparent;--a-bdc:#c9c9d2;--h-bg:#8e8e93;--h-w:3px;--m-bg:#8e8e93;--m-w:2px;--s-bg:#8e8e93;--s-w:1px;--a-dot:#8e8e93}
[data-clock="a-forest"]{--a-bgc:#123524;--a-bdc:#0b2418;--a-tick:#e8dfc3;--h-bg:#f0e8d2;--m-bg:#f0e8d2;--s-bg:#e0a100;--a-dot:#e0a100}
[data-clock="a-ocean"]{--a-bgc:#0f2a4a;--a-bdc:#081c34;--a-tick:#bcd6f5;--h-bg:#fff;--m-bg:#fff;--s-bg:#ff7a1a;--a-dot:#ff7a1a}
[data-clock="a-blush"]{--a-bgc:#fbe3e8;--a-bdc:#d99cae;--a-tick:#a34a62;--h-bg:#6e1f36;--m-bg:#6e1f36;--s-bg:#c2255c;--a-dot:#c2255c}
[data-clock="a-bauhaus"]{--a-bgc:#fff;--a-bdw:3px;--a-bdc:#111;--a-tick:#111;--a-tw:1deg;--h-bg:#d62728;--h-w:7px;--m-bg:#1f4fa8;--m-w:5px;--s-bg:#f2b705;--a-dot:#111;--a-dw:10px;--a-dh:10px}
[data-clock="a-aviator"]{--a-bgc:#101014;--a-bdc:#3a3a40;--a-tick:#fff;--a-tw:1deg;--h-bg:#fff;--h-w:6px;--m-bg:#fff;--m-w:4px;--s-bg:#ff453a;--a-dot:#ff453a}
[data-clock="a-paper"]{--a-bgc:#fdfdf8;--a-bdc:#e2e2da;--a-tick:#9a9a92;--h-bg:#3c3c38;--m-bg:#3c3c38;--s-bg:#3c3c38;--a-dot:#3c3c38}
[data-clock="a-ember"]{--a-bgc:#1c1310;--a-bdc:#3a241a;--a-tick:#f5c99b;--h-bg:#ffd9a8;--m-bg:#ffd9a8;--s-bg:#ff6a00;--a-dot:#ff6a00}
[data-clock="a-candy"]{--a-bgc:#ff8fc7;--a-bdc:#fff;--a-tick:#fff;--a-tw:2deg;--h-bg:#6a1b9a;--h-w:6px;--m-bg:#6a1b9a;--m-w:4px;--s-bg:#ffea00;--a-dot:#6a1b9a}
[data-clock="a-rainbow"]{--a-bgi:conic-gradient(#ff595e,#ffca3a,#8ac926,#1982c4,#6a4c93,#ff595e);--a-bdc:#fff;--h-bg:#fff;--h-w:6px;--h-sh:0 0 0 1.5px rgba(0,0,0,.55);--m-bg:#fff;--m-sh:0 0 0 1.5px rgba(0,0,0,.55);--s-bg:#fff;--s-sh:0 0 0 1.5px rgba(0,0,0,.55);--a-dot:#fff;--a-dsh:0 0 0 2px rgba(0,0,0,.55)}
[data-clock="a-disco"]{--a-bgi:linear-gradient(135deg,#ff00cc,#3333ff 55%,#00ffcc);--a-bdc:#fff;--a-anim:disco 7s linear infinite;--a-tick:rgba(255,255,255,.85);--h-bg:#fff;--h-w:6px;--h-sh:0 0 0 1.5px rgba(0,0,0,.55);--m-bg:#fff;--m-sh:0 0 0 1.5px rgba(0,0,0,.55);--s-bg:#fff;--s-sh:0 0 0 1.5px rgba(0,0,0,.55);--a-dot:#fff;--a-dsh:0 0 0 2px rgba(0,0,0,.55)}
[data-clock="a-sunset"]{--a-bgi:linear-gradient(180deg,#2d1b4e,#ff5e62 58%,#ff9966);--a-bdc:#ffe3b3;--a-tick:#ffe3b3;--h-bg:#fff3d6;--h-w:6px;--h-sh:0 0 0 1px rgba(0,0,0,.4);--m-bg:#fff3d6;--m-sh:0 0 0 1px rgba(0,0,0,.4);--s-bg:#2d1b4e;--a-dot:#fff3d6;--a-dsh:0 0 0 2px rgba(0,0,0,.4)}
[data-clock="a-jungle"]{--a-bgc:#8ee63f;--a-bdc:#1d5c1d;--a-tick:#1d5c1d;--h-bg:#123f12;--h-w:6px;--m-bg:#123f12;--m-w:4px;--s-bg:#ff4d00;--a-dot:#123f12}
[data-clock="a-lolli"]{--a-bgi:repeating-conic-gradient(#e63946 0 18deg,#fff 18deg 36deg);--a-bdc:#fff;--h-bg:#fff;--h-w:6px;--h-sh:0 0 0 1.5px #b02334;--m-bg:#fff;--m-sh:0 0 0 1.5px #b02334;--s-bg:#b02334;--a-dot:#b02334;--a-dsh:0 0 0 2px #fff}
[data-clock="a-graffiti"]{--a-bgc:#14141c;--a-bdw:3px;--a-bdc:#00e5ff;--a-tick:#fff;--a-tw:1deg;--h-bg:#ff2bd6;--h-w:7px;--h-sh:0 0 8px #ff2bd6;--m-bg:#b6ff00;--m-w:5px;--m-sh:0 0 8px #b6ff00;--s-bg:#00e5ff;--s-sh:0 0 8px #00e5ff;--a-dot:#fff;--a-dsh:0 0 10px #ff2bd6}
[data-clock="custom-face"]{--a-bgi:var(--face);--a-bgc:#222;--a-bdc:rgba(255,255,255,.85);--a-tick:rgba(255,255,255,.9);--h-bg:#fff;--h-w:6px;--h-sh:0 0 0 1.5px rgba(0,0,0,.65);--m-bg:#fff;--m-sh:0 0 0 1.5px rgba(0,0,0,.65);--s-bg:#ffd60a;--s-sh:0 0 0 1.5px rgba(0,0,0,.65);--a-dot:#fff;--a-dsh:0 0 0 2px rgba(0,0,0,.6)}

/* ---- Structural clock DOM (renderer-built, scope-independent) ---- */
.gridc{display:inline-block;white-space:nowrap;max-width:100%;font-size:.9em}
.gc{display:inline-block;background:rgba(127,127,127,.14);border-radius:.25em;padding:0 .12em;margin:0 .04em;min-width:1.15em;text-align:center}
.gc.pop{animation:gcpop .35s ease}
@keyframes gcpop{0%{transform:scale(1.28);background:var(--accent);color:#fff}100%{transform:scale(1)}}
[data-clock="d-typo"] .time::after{content:"";display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--red);margin-left:.2em;vertical-align:baseline;animation:ticktock 1s ease-in-out infinite alternate}
@keyframes ticktock{from{transform:translateX(-.35em)}to{transform:translateX(.35em)}}
[data-clock="d-vars"] .time{color:#4da3ff;color:hsl(var(--hue,210) 90% 62%);font-weight:800;text-shadow:0 0 18px hsl(var(--hue,210) 90% 55% / .8)}
[data-clock="d-vars"] .time small{opacity:.75}
[data-clock="d-vars"] .time::after{content:"";display:block;height:5px;border-radius:99px;margin-top:6px;width:calc(var(--ts,0)*1.6667%);background:#4da3ff;background:hsl(var(--hue,210) 90% 55%)}
@keyframes disco{to{filter:hue-rotate(360deg)}}

/* ---- Style gallery modal ---- */
.modal{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal-card{max-width:780px;width:100%;max-height:88vh;overflow:auto;padding:22px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.modal-head h2{margin:0}
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.style-pick{border:1px solid var(--stroke);border-radius:14px;background:var(--card);color:var(--ink);padding:10px;cursor:pointer;display:grid;gap:8px;justify-items:center;font-family:inherit}
.style-pick.active{outline:2px solid var(--accent);outline-offset:1px}
.style-pick-name{font-size:13px;font-weight:700}
.style-prev{min-height:66px;display:grid;place-items:center;width:100%}
.style-prev .analog{width:76px;height:76px;margin:4px auto}
.style-prev .time{font-size:24px;margin:0}

/* ---- City page analog face ---- */
.analog.city-face{width:min(52vw,220px);height:min(52vw,220px);margin:14px auto}

/* ---- Face upload row + empty tile ---- */
.face-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.style-pick.face-empty{border-style:dashed}
.face-prompt{display:grid;place-items:center;gap:2px;min-height:66px;color:var(--muted);font-size:24px}
.face-prompt small{font-size:11px}

/* ---- Calm down ambient motion when requested ---- */
@media(prefers-reduced-motion:reduce){
[data-clock="a-disco"] .analog{animation:none}
[data-clock="d-typo"] .time::after{animation:none}
}