:root {
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  --radius: 1.25rem;
  --shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --space-1: clamp(.25rem, .5vw, .5rem);
  --space-2: clamp(.5rem, 1vw, .75rem);
  --space-3: clamp(.75rem, 1.25vw, 1rem);
  --space-4: clamp(1rem, 1.5vw, 1.25rem);
  --space-5: clamp(1.25rem, 2vw, 1.75rem);
  --maxw: min(1200px, 100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 2rem);
  --primary: #0d6efd;
  --orange: #ff7a18;
  --danger: #dc3545;
  --bg: hsl(210 20% 98%);
  --panel: #fff;
  --text: hsl(220 15% 15%);
  --muted: hsl(220 10% 45%);
  --outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:hsl(220 17% 6%); --panel:hsl(220 16% 12%); --text:hsl(220 10% 92%); --muted:hsl(220 6% 70%); --shadow:0 10px 30px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35); }
}
* { box-sizing: border-box }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--text);
  background: radial-gradient(1200px 600px at 10% -20%, rgba(13,110,253,.08), transparent 50%), radial-gradient(1200px 600px at 110% 120%, rgba(255,122,24,.09), transparent 50%), var(--bg);
  line-height: 1.45; -webkit-text-size-adjust:100%; text-rendering: optimizeLegibility;
}
.container { width: var(--maxw); margin-inline: auto; padding: var(--space-4) 0; }
.site-header { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, transparent), transparent); border-bottom: 1px solid color-mix(in srgb, var(--panel) 70%, transparent); backdrop-filter: saturate(1.2) blur(6px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.logo-title { display:flex; align-items:center; gap:var(--space-3); }
.logo { width: clamp(56px, 10vw, 88px); height:auto; border-radius:.75rem; box-shadow: var(--shadow); }
.brand { margin:0; font-size: clamp(1.15rem, 2.8vw, 1.6rem); }
.tag { margin:.25rem 0 0; }
.site-footer { border-top: 1px solid color-mix(in srgb, var(--panel) 70%, transparent); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.footer-links { display:flex; gap: var(--space-3); }
.grid { display:grid; grid-template-columns:1fr; gap: var(--space-4); }
@media (min-width: 900px) { .grid { grid-template-columns:2fr 1fr; } }
.panel { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-4); }
.mt { margin-top: var(--space-4); }
.uploader { border:2px dashed color-mix(in srgb, var(--text) 20%, transparent); border-radius: var(--radius); padding: var(--space-4); text-align:center; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.uploader input[type=file] { display:none; }
.uploader .uploader-actions { display:flex; gap: var(--space-3); justify-content:center; flex-wrap:wrap; margin: var(--space-3) 0; }
.url-load { display:flex; gap: var(--space-2); justify-content:center; margin-top: var(--space-2); }
.input { inline-size: clamp(180px, 40vw, 420px); padding:.7rem .9rem; border-radius:.75rem; border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); background: var(--panel); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.canvas-wrap { margin-top: var(--space-4); display:grid; gap: var(--space-2); }
#canvas { width:100%; height:auto; max-height: min(65vh, 70dvh); border-radius:.75rem; background: repeating-conic-gradient(#ddd 0 25%, #eee 0 50%) 0 / 16px 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
#canvasHint { text-align:center; }
.tools { display:flex; gap: var(--space-2); flex-wrap:wrap; margin-top: var(--space-2); }
.selected { display:grid; grid-template-columns:90px 1fr; gap: var(--space-3); align-items:center; }
.swatch { width:100%; aspect-ratio:1/1; border-radius:.75rem; border:1px solid rgba(0,0,0,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.codes .row { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap: var(--space-2); padding:.25rem 0; }
.codes code { padding:.35rem .6rem; border-radius:.5rem; background: color-mix(in srgb, var(--panel) 85%, transparent); }
.contrast-row { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-2); }
.chip { padding:.9rem; border-radius:.75rem; background:#fff; color:#111; text-align:center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) }
.chip-dark { background:#111; color:#fff; }
.history { display:grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-2); }
.history .item { background: color-mix(in srgb, var(--panel) 90%, transparent); border:1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius:.75rem; overflow:clip; }
.history .item .sw { width:100%; aspect-ratio:1/1; }
.history .meta { display:grid; gap:.25rem; padding:.5rem; font-size:.9rem; }
.history .meta .codes { display:grid; gap:.15rem; }
.history .actions { display:flex; gap:.35rem; padding:.5rem; justify-content:space-between; }
.btn { --bg: var(--panel); --fg: var(--text); display:inline-flex; align-items:center; justify-content:center; padding:.65rem .9rem; min-height:44px; border-radius:.75rem; border:1px solid color-mix(in srgb, var(--text) 18%, transparent); background: var(--bg); color: var(--fg); cursor:pointer; text-decoration:none; transition: transform .06s ease, box-shadow .2s ease; box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.06); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.btn:focus-visible { outline: var(--outline); outline-offset:2px; }
.btn:active { transform: translateY(0); }
.btn-primary { --bg: var(--primary); --fg:#fff; border-color: color-mix(in srgb, var(--primary) 90%, black 10%); }
.btn-orange { --bg: var(--orange); --fg:#111; border-color: color-mix(in srgb, var(--orange) 70%, black 12%); }
.btn-danger { --bg: var(--danger); --fg:#fff; border-color: color-mix(in srgb, var(--danger) 85%, black 10%); }
.btn-outline { --bg: transparent; }
.btn-small { padding:.45rem .6rem; min-height:36px; font-size:.9rem; }
.muted { color: var(--muted); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: var(--outline); }
.skip-link{ position:absolute; left:-9999px; top:0; }
.skip-link:focus{ left:0; background: var(--primary); color:#fff; padding:.5rem .75rem; border-radius:.5rem; }
.site-main { padding-bottom: var(--space-5); }