:root {
  --bg: #f5f6f8; --panel: #ffffff; --text: #15171b; --muted: #6b7280;
  --border: #e5e7eb; --accent: #e11d48; --shadow: 0 12px 34px rgba(15, 23, 42, .10);
  --radius: 16px; --stage-h: 320px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1115; --panel:#15181e; --text:#e9ebee; --muted:#9aa1ad; --border:#272c35; --shadow:0 12px 34px rgba(0,0,0,.5); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; color:var(--text); background:var(--bg);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color: transparent; }
body.modal-open { overflow: hidden; }
.topbar { padding:20px clamp(16px,4vw,40px) 4px; }
.brand { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:15px; line-height:1.2; }
.brand-mark { display:inline-flex; flex:0 0 auto; }
.brand-mark svg { display:block; }
.brand-text { font-size:15px; font-weight:800; letter-spacing:.01em; color:#e11d48; }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .brand-text {
    background:linear-gradient(90deg,#e4032e,#ff7a00,#ffd400,#1fae3a,#0060e6,#7b2ff7);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
.tagline { margin:4px 0 0; color:var(--muted); font-size:14px; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.preview-caption { margin:10px 2px 0; font-size:12px; line-height:1.5; color:var(--muted); }

.layout { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(16px,3vw,28px);
  align-items:start; padding:16px clamp(16px,4vw,40px) 40px; max-width:1440px; margin:0 auto; }
.stage { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(12px,2vw,20px); position:sticky; top:16px; }
.canvas-wrap { position:relative; background:#fff; border-radius:12px; overflow:hidden; }
#bike { display:block; width:100%; height:auto; }
.loading { position:absolute; inset:0; display:grid; place-items:center; color:#6b7280; font-weight:600; background:#fff; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.spacer { flex:1; }
.lbl-short { display:none; }
.btn { appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--text);
  padding:9px 14px; border-radius:10px; font:inherit; font-weight:600; cursor:pointer;
  touch-action: manipulation; transition:border-color .15s ease, background .15s ease; }
.btn:hover { border-color:var(--muted); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-sm { padding:5px 10px; font-size:13px; }
.btn:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:2px; }

.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; position:sticky; top:16px;
  max-height:calc(100vh - 128px); max-height:calc(100dvh - 128px); overflow-y:auto;
  scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--muted) transparent; }
.panel::-webkit-scrollbar { width:11px; height:11px; }
.panel::-webkit-scrollbar-track { background:transparent; }
.panel::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; border:3px solid var(--panel); }
.panel::-webkit-scrollbar-thumb:hover { background:var(--muted); }
.groups { display:flex; flex-direction:column; gap:18px; }
.group h3 { margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.group .head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px; }
.group .cur { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.swatch { display:flex; align-items:center; gap:9px; padding:7px 9px; border:2px solid var(--border);
  border-radius:11px; background:transparent; color:var(--text); cursor:pointer; font:inherit; text-align:left;
  min-width:0; touch-action: manipulation; }
.swatch:hover { border-color:var(--muted); }
.swatch.is-selected { border-color:var(--accent); }
.swatch-dot { width:26px; height:26px; border-radius:7px; border:1px solid rgba(0,0,0,.15);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); flex:0 0 auto; }
.swatch-name { font-weight:600; font-size:12.5px; flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-foot { margin-top:8px; }
.toggle-row { display:flex; align-items:center; gap:10px; padding:8px 2px; cursor:pointer; }
.toggle-box { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.toggle-text { font-weight:600; font-size:13px; }
.chip { border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:999px;
  padding:5px 12px; font:inherit; font-size:12px; cursor:pointer; touch-action: manipulation; }
.chip.is-active { background:var(--text); color:var(--panel); border-color:var(--text); }
.disclaimer { margin:18px 2px 0; font-size:11px; line-height:1.5; color:var(--muted); }

/* saved designs */
.save-row { display:flex; gap:8px; margin-bottom:10px; }
.save-row .search { margin-bottom:0; flex:1 1 auto; }
.import-row { margin-bottom:12px; }
.import-row .btn { width:100%; }
.designs-list { overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:6px; }
.design-row { display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--border); border-radius:9px; }
.design-row .design-name { font-weight:600; font-size:13px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.design-row .design-date { font-size:11px; color:var(--muted); white-space:nowrap; }
.design-empty { margin:4px 2px; font-size:13px; color:var(--muted); }

/* ---------- landing content ---------- */
.content { max-width:820px; margin:0 auto; padding:8px clamp(16px,4vw,40px) 0; }
.content .lead { font-size:clamp(15px,1.6vw,17px); font-weight:600; }
.content h2 { margin:32px 0 8px; font-size:clamp(18px,2.4vw,22px); letter-spacing:-.01em; }
.content h2:first-child { margin-top:16px; }
.content h3 { margin:18px 0 6px; font-size:15px; }
.content p { margin:0 0 12px; }
.content ul { margin:0 0 12px; padding-left:20px; }
.content li { margin:0 0 4px; }
.content strong { font-weight:700; }

.faq .faq-item { border-bottom:1px solid var(--border); }
.faq .faq-item summary { display:flex; align-items:center; gap:10px; cursor:pointer; padding:12px 2px; list-style:none; }
.faq .faq-item summary::-webkit-details-marker { display:none; }
.faq .faq-item summary h3 { margin:0; font-size:15px; flex:1 1 auto; }
.faq .faq-item summary::after { content:'+'; font-weight:700; color:var(--muted); font-size:18px; line-height:1; flex:0 0 auto; }
.faq .faq-item[open] summary::after { content:'\2212'; }
.faq .faq-item p { margin:0 2px 14px; }

.site-footer { max-width:820px; margin:28px auto 40px; padding:16px clamp(16px,4vw,40px) 0;
  border-top:1px solid var(--border); font-size:12px; line-height:1.6; color:var(--muted); }
.site-footer p { margin:0 0 8px; }

/* group navigation chips (mobile: under canvas; desktop: pinned in panel) */
.group-nav { display:none; }
.nav-chip { flex:0 0 auto; border:1px solid var(--border); background:transparent; color:var(--muted);
  border-radius:999px; padding:8px 13px; font:inherit; font-size:12.5px; min-height:38px;
  cursor:pointer; touch-action: manipulation; white-space:nowrap; }
.nav-chip.is-active { background:var(--text); color:var(--panel); border-color:var(--text); }

.panel-nav { display:none; }
.panel-fade { display:none; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:50; padding:16px; }
.modal[hidden] { display:none; }
.modal-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; width:min(560px,100%);
  max-height:85vh; display:flex; flex-direction:column; padding:16px; box-shadow:var(--shadow); }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.custom-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.custom-label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
#hexInput { width:44px; height:34px; border:1px solid var(--border); border-radius:8px; background:none; padding:0; }
.finish-toggle { display:flex; gap:6px; }
.search { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:transparent; color:var(--text); font:inherit; font-size:16px; margin-bottom:10px; }
.ral-list { overflow-y:auto; overscroll-behavior: contain; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ral-item { display:flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--border);
  border-radius:9px; background:transparent; color:var(--text); cursor:pointer; font:inherit; text-align:left;
  min-width:0; touch-action: manipulation; }
.ral-item:hover { border-color:var(--muted); }
.ral-item .swatch-dot { width:22px; height:22px; }
.ral-text { display:flex; flex-direction:column; min-width:0; }
.ral-item .code { font-weight:600; font-size:12px; }
.ral-item .nm { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- desktop: pinned group nav + scroll affordance ---------- */
@media (min-width: 900px) {
  .panel { padding:0; }
  .panel-nav { display:flex; flex-wrap:wrap; gap:6px; position:sticky; top:0; z-index:3;
    padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--border); }
  .panel-nav::-webkit-scrollbar { display:none; }
  .panel .groups { padding:16px 16px 0; }
  .panel .disclaimer { margin:0; padding:18px 16px 16px; }
  .panel .group { scroll-margin-top:calc(var(--panel-nav-h, 64px) + 10px); }
  .panel-fade { display:block; position:sticky; bottom:0; z-index:2;
    margin:0; height:30px; pointer-events:none;
    background:linear-gradient(to bottom, transparent, var(--panel));
    transition:opacity .15s ease; }
  .panel.at-end .panel-fade { opacity:0; }
}

/* ---------- mobile / tablet ---------- */
@media (max-width: 899px) {
  .topbar { padding:12px 14px 6px; }
  .tagline { display:none; }
  .layout { display:block; padding:0; }

  .stage { position:sticky; top:0; z-index:20; border:0; border-bottom:1px solid var(--border);
    border-radius:0; box-shadow:var(--shadow); padding:8px 12px 10px;
    padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
  .canvas-wrap { border-radius:10px; display:grid; place-items:center; }
  #bike { width:auto; height:auto; max-width:100%; max-height:42svh; }

  .group-nav { display:flex; gap:6px; overflow-x:auto; margin-top:10px; padding-bottom:2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .group-nav::-webkit-scrollbar { display:none; }

  .panel { position:static; top:auto; max-height:none; overflow:visible; border:0; border-radius:0; box-shadow:none;
    padding:16px 14px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  .group { scroll-margin-top: calc(var(--stage-h, 320px) + 8px); }
  .grid { grid-template-columns:1fr 1fr; }
  .swatch { min-height:46px; }
  .btn { min-height:44px; padding:11px 16px; }

  .toolbar { position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0; gap:6px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--border); background:var(--panel);
    box-shadow:0 -6px 18px rgba(0,0,0,.06); }
  .toolbar .btn { flex:1; text-align:center; justify-content:center; white-space:nowrap; font-size:12.5px; padding-left:5px; padding-right:5px; min-width:0; }
  .toolbar .spacer { display:none; }
  .lbl-full { display:none; }
  .lbl-short { display:inline; }

  .modal { align-items:flex-end; padding:0; }
  .modal-card { width:100%; max-height:92dvh; border-radius:16px 16px 0 0; border-bottom:0;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .ral-list { grid-template-columns:1fr; }
}

@media (max-width: 380px) {
  .grid { grid-template-columns:1fr; }
}

@media (max-width: 899px) and (orientation: landscape) {
  #bike { max-height:64svh; }
}