/* ══════════════════════════════════════════════════════════════════
   LED Tools — Shared site styles (homepage, module launcher, placeholders)
   Reuses the exact visual identity/design tokens of the LED Tool app.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#051c2c;--surface:#061e30;--card:#082436;--border:#113050;
  --accent:#1972e1;--accent2:#fd5d08;--green:#00857e;--red:#de2b37;
  --teal:#00857e;--txt:#f5f7fa;--muted:#8daabf;
  --night-blue:#051c2c;--white:#ffffff;--mid-grey:#5a6370;--light-grey:#fafafa;--grey:#c1c5c8;
  --gradient-start:#fd5d08;--gradient-end:#00857e;
  --brand-gradient:linear-gradient(90deg, #fd5d08 0%, #DE2B37 5%, #432680 50%, #1972E1 90%, #00857E 100%);
  --table-head:#030e17;--accent-hover:#1560c0;--teal-hover:#00a09a;
  --mono:'DM Mono',monospace;--sans:'Work Sans',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);min-height:100vh;display:flex;flex-direction:column}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* HEADER (identical structure/spacing to the LED Tool app header) */
header{background:linear-gradient(135deg,var(--table-head),var(--surface));border-bottom:1px solid color-mix(in srgb,var(--accent) 25%,transparent);padding:14px 26px;display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;gap:12px;position:sticky;top:0;z-index:100}
header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--brand-gradient)}
header{position:relative}
header svg{flex-shrink:0}
.logo-home-link{display:contents;cursor:pointer;text-decoration:none}
header .sub{font-size:.7rem;color:var(--muted);font-family:var(--mono);margin-left:auto}

/* Header nav links (Home / LED Tool / Platform Selection / Roadmap LED) */
.site-nav{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;row-gap:6px}
.site-nav a{
  display:flex;align-items:center;gap:6px;
  background:transparent;border:1px solid color-mix(in srgb,var(--white) 20%,transparent);
  color:color-mix(in srgb,var(--white) 75%,transparent);
  padding:5px 10px;border-radius:20px;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.04em;transition:all .25s;white-space:nowrap;
}
.site-nav a:hover,.site-nav a.active{background:color-mix(in srgb,var(--white) 8%,transparent);border-color:color-mix(in srgb,var(--white) 35%,transparent);color:var(--white)}

/* Theme toggle button (identical to the LED Tool app header) */
#theme-toggle{
  display:flex;align-items:center;gap:6px;
  background:transparent;border:1px solid color-mix(in srgb,var(--white) 20%,transparent);
  color:color-mix(in srgb,var(--white) 75%,transparent);
  padding:5px 10px;border-radius:20px;cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.04em;transition:all .25s;white-space:nowrap;
  margin-left:12px;
}
#theme-toggle:hover{background:color-mix(in srgb,var(--white) 8%,transparent);border-color:color-mix(in srgb,var(--white) 35%,transparent);color:var(--white)}
#theme-toggle .toggle-icon{font-size:.85rem;transition:transform .4s}
[data-theme="light"] #theme-toggle{border-color:color-mix(in srgb,var(--night-blue) 25%,transparent);color:var(--muted)}
[data-theme="light"] #theme-toggle:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}

/* Theme toggle + Changelog buttons (identical look, shared across every page) */
#theme-toggle,#btn-changelog{
  display:flex;align-items:center;gap:6px;
  background:transparent;border:1px solid color-mix(in srgb,var(--white) 20%,transparent);
  color:color-mix(in srgb,var(--white) 75%,transparent);
  padding:5px 10px;border-radius:20px;cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.04em;transition:all .25s;white-space:nowrap;
  margin-left:12px;
}
#theme-toggle:hover,#btn-changelog:hover{background:color-mix(in srgb,var(--white) 8%,transparent);border-color:color-mix(in srgb,var(--white) 35%,transparent);color:var(--white)}
#theme-toggle .toggle-icon{font-size:.85rem;transition:transform .4s}
[data-theme="light"] #theme-toggle,[data-theme="light"] #btn-changelog{border-color:color-mix(in srgb,var(--night-blue) 25%,transparent);color:var(--muted)}
[data-theme="light"] #theme-toggle:hover,[data-theme="light"] #btn-changelog:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}

/* Changelog modal (shared generic dialog look, reused by every page) */
.czm-dlg{background:var(--card);border:1px solid var(--border);border-radius:12px;width:min(96vw,1140px);max-height:94vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px color-mix(in srgb,var(--night-blue) 60%,transparent)}
.czm-hdr{display:flex;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border);gap:10px}
.czm-hdr-title{font-size:.82rem;font-weight:700;flex:1;font-family:var(--sans)}
.czm-x{background:transparent;border:1px solid var(--border);color:var(--muted);width:26px;height:26px;border-radius:5px;cursor:pointer;display:grid;place-items:center;font-size:.8rem;transition:all .15s;flex-shrink:0}
.czm-x:hover{border-color:var(--red);color:var(--red)}
.czm-bdy{flex:1;padding:14px;min-height:0}
[data-theme="light"] .czm-dlg{background:var(--white)}
#changelog-modal{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--table-head) 92%,transparent);z-index:10000;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#changelog-modal.czm-open{display:flex}
[data-theme="light"] #changelog-modal{background:color-mix(in srgb,var(--night-blue) 65%,transparent)}
#changelog-body ul{margin:6px 0 0 16px;padding:0;list-style:disc}
#changelog-body strong{color:var(--txt);font-size:.78rem}
#changelog-body code{font-family:var(--mono);background:color-mix(in srgb,var(--border) 60%,transparent);padding:1px 4px;border-radius:3px}

/* MAIN CONTENT */
main{flex:1;padding:40px 26px;display:flex;flex-direction:column;gap:32px;max-width:1320px;margin:0 auto;width:100%}
.hero{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:10px 0 6px}
.hero h1{font-size:1.6rem;font-weight:700;letter-spacing:-.01em}
.hero p{font-size:.9rem;color:var(--muted);font-family:var(--mono)}

.sec{font-family:var(--mono);font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;gap:7px;margin-bottom:4px}
.sec::after{content:'';flex:1;height:1px;background:var(--border)}

/* CARDS GRID */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:960px){.tool-grid{grid-template-columns:1fr}}

.tool-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:40px 32px;min-height:290px;display:flex;flex-direction:column;gap:18px;text-decoration:none;color:var(--txt);
  transition:all .2s;box-shadow:0 2px 8px color-mix(in srgb,var(--night-blue) 30%,transparent);
}
.tool-card:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-3px);box-shadow:0 14px 32px color-mix(in srgb,var(--accent) 18%,transparent)}
.tool-card .tc-icon{font-size:2.6rem}
.tool-card h2{font-size:1.5rem;font-weight:700}
.tool-card p{font-size:.95rem;color:var(--muted);line-height:1.6;flex:1}
.tool-card .tc-link{font-family:var(--mono);font-size:.86rem;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:6px}
.tool-card.disabled .tc-link{color:var(--accent2)}
.tool-card .tc-badge{align-self:flex-start;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;padding:4px 11px;border-radius:99px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.tool-card.disabled .tc-badge{background:color-mix(in srgb,var(--accent2) 10%,transparent);color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 35%,transparent)}
.tool-card .tc-badge.tc-badge-preview{background:color-mix(in srgb,var(--accent2) 14%,transparent);color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 40%,transparent);font-weight:700}
[data-theme="light"] .tool-card .tc-badge.tc-badge-preview{background:color-mix(in srgb,var(--accent2) 16%,var(--white));color:#b34400}

/* UNDER CONSTRUCTION PAGES */
.uc-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.uc-card{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:44px 40px;max-width:520px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;
}
.uc-card .uc-icon{font-size:2.4rem;opacity:.8}
.uc-card h1{font-size:1.3rem;font-weight:700}
.uc-card p{font-size:.85rem;color:var(--muted);line-height:1.6}
.uc-card .uc-version{font-family:var(--mono);font-size:.68rem;color:var(--accent);text-transform:uppercase;letter-spacing:.1em}
.uc-card .uc-back{
  margin-top:6px;background:var(--accent);color:var(--white);border:none;padding:10px 20px;border-radius:8px;
  font-family:var(--sans);font-size:.82rem;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s;
}
.uc-card .uc-back:hover{background:var(--accent-hover);transform:translateY(-1px)}

/* FOOTER */
footer{padding:16px 26px;text-align:center;font-family:var(--mono);font-size:.66rem;color:var(--muted);border-top:1px solid var(--border)}

/* ── LIGHT THEME (Schréder white) ─────────────────────────── */
[data-theme="light"]{
  --bg:var(--light-grey);--surface:var(--white);--card:#f0f3f7;--border:#dde3ec;
  --accent:#1972e1;--accent2:#fd5d08;--green:#00857e;--red:#DE2B37;
  --teal:#00857e;--txt:var(--night-blue);--muted:var(--mid-grey);
  --table-head:#e8edf5;
}
[data-theme="light"] header{background:linear-gradient(135deg,var(--white),color-mix(in srgb,var(--accent) 6%,var(--white)));border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}
[data-theme="light"] .site-nav a{border-color:color-mix(in srgb,var(--night-blue) 25%,transparent);color:var(--muted)}
[data-theme="light"] .site-nav a:hover,[data-theme="light"] .site-nav a.active{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
[data-theme="light"] .tool-card{box-shadow:0 2px 8px color-mix(in srgb,var(--night-blue) 6%,transparent)}
[data-theme="light"] footer{border-top-color:var(--border)}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 30%,transparent);border-radius:3px}