/* ===== Design System Visualizer — Stripe-style Demo (Light only) ===== */
:root{
  --bg:#f6f7fb; --panel:#ffffff; --panel-2:#f2f5fb; --text:#0b1220; --muted:#546179;
  --border:#d8e0ec; --chip:#eef2fb; --chip-text:#2a3342; --accent:#2f6bff; --shadow:0 18px 60px rgba(0,0,0,.10);
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:20px; --space-5:28px;
  --font-heading: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --size-h1:32px; --size-h2:22px; --size-h3:16px; --size-body:14px; --lh-tight:1.15; --lh-normal:1.45; --lh-relaxed:1.7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--font-body)}

.app{max-width:1460px;margin:24px auto;padding:0 16px 32px}
.shell{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}

.header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.header .title{font:600 18px var(--font-heading)}
.header .sub{color:var(--muted);font-size:13px}

.content{display:grid;grid-template-columns:360px 1fr;gap:16px;padding:16px;align-items:start}
@media(max-width:1200px){.content{grid-template-columns:1fr}}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
.panel h3{margin:0 0 8px;font:600 12px var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.controls{display:flex;gap:8px;flex-wrap:wrap}
.input, input[type=file], input[type=text], input[type=url]{height:36px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:0 12px}
.btn{appearance:none;border:1px solid #c7d3eb;background:linear-gradient(180deg,#2f6bff,#1a50d6);color:#fff;border-radius:10px;height:36px;padding:0 14px;font-weight:600;cursor:pointer;transition:transform .1s ease, filter .1s ease}
.btn.secondary{background:var(--chip);color:var(--chip-text);border-color:var(--border)}
.btn:disabled{opacity:.55;cursor:not-allowed}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.btn:active{transform:translateY(0);filter:brightness(.96)}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;background:var(--chip);color:var(--chip-text);border:1px solid var(--border);border-radius:999px;font-size:12px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}

.token-box,.code-box{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px}
.code-box pre{margin:0;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:22px;height:22px;border-radius:999px;border:1px solid var(--border)}

.notice{font-size:12px;background:var(--panel-2);border:1px solid var(--border);color:var(--muted);padding:8px 10px;border-radius:10px}

/* ===== Stripe-like demo ===== */
.demo-shell{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--panel-2);pointer-events:none}
.topbar .brand{font:700 14px var(--font-heading)}
.topbar .nav{display:flex;gap:12px;color:var(--muted)}

.dashboard{padding:12px}
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1200px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kpi-row{grid-template-columns:1fr}}

.kpi{background:#f8fbff;border:1px solid var(--border);border-radius:12px;padding:10px}
.kpi .label{font-size:12px;color:var(--muted)}
.kpi .value{font:700 18px var(--font-heading);margin-top:4px}

.main-row{display:grid;grid-template-columns:2fr 1.1fr;gap:10px;margin-top:10px}
@media(max-width:1200px){.main-row{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.card .head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);font:600 13px var(--font-heading)}
.card .body{padding:12px;overflow-wrap:anywhere;word-break:break-word}

.chart{height:160px;border:1px dashed var(--border);border-radius:10px;display:grid;place-items:center;color:var(--muted)}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{background:#f8fbff;border:1px solid var(--border);padding:8px 10px}
.table th{color:var(--muted);text-align:left}
.table td:first-child,.table th:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
.table td:last-child,.table th:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}

.activity{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:10px;background:#fff}
.item .dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.item .txt{flex:1 1 auto;min-width:0;color:var(--muted)}