:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
  --color-bg:#f7f6f2; --color-surface:#f9f8f5; --color-surface-2:#fbfbf9; --color-surface-offset:#f3f0ec; --color-border:#d4d1ca;
  --color-text:#28251d; --color-text-muted:#6b6861; --color-text-faint:#9d9a94; --color-text-inverse:#f9f8f4;
  --color-primary:#01696f; --color-primary-hover:#0c4e54; --color-primary-highlight:#cedcd8;
  --color-success:#437a22; --color-success-highlight:#d4dfcc;
  --color-warn:#a05a00; --color-warn-highlight:#f1dfc4;
  --color-danger:#9c2f2f;
  --radius-sm:0.375rem; --radius-md:0.5rem; --radius-lg:0.75rem; --radius-xl:1rem; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(40,37,29,.06);
  --font-body:'Satoshi','-apple-system','SF Pro Text',sans-serif;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"] {
  --color-bg:#171614; --color-surface:#1c1b19; --color-surface-2:#201f1d; --color-surface-offset:#22211f; --color-border:#393836;
  --color-text:#e4e1dc; --color-text-muted:#b1ada7; --color-text-faint:#7f7b75; --color-text-inverse:#171614;
  --color-primary:#4f98a3; --color-primary-hover:#227f8b; --color-primary-highlight:#313b3b;
  --color-success:#6daa45; --color-success-highlight:#314129;
  --color-warn:#cf9145; --color-warn-highlight:#3a2e1d;
  --shadow-sm:0 1px 2px rgba(0,0,0,.22);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:none; text-size-adjust:none; }
body {
  min-height:100dvh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.5;
  background:var(--color-bg);
  color:var(--color-text);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--radius-sm); }

.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:var(--space-4); top:var(--space-4); background:var(--color-primary); color:var(--color-text-inverse); padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); z-index:20; }

.app { max-width:1100px; margin:0 auto; padding:var(--space-4); display:grid; gap:var(--space-4); }

.topbar, .card, .sticker-item, .section-block {
  background:var(--color-surface);
  border:1px solid rgba(40,37,29,.12);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
}
[data-theme="dark"] .topbar,
[data-theme="dark"] .card,
[data-theme="dark"] .sticker-item,
[data-theme="dark"] .section-block { border-color:rgba(255,255,255,.1); }

.topbar { position:sticky; top:var(--space-2); z-index:10; padding:var(--space-4); display:grid; gap:var(--space-3); }

.brand { display:flex; justify-content:space-between; gap:var(--space-3); align-items:center; }
.brand-left { display:flex; gap:var(--space-3); align-items:center; }
.brand-right { display:flex; gap:var(--space-3); align-items:center; }
.logo { width:38px; height:38px; color:var(--color-primary); }
h1 { font-size:var(--text-xl); line-height:1.1; }
h2 { font-size:var(--text-lg); line-height:1.15; }
.muted { color:var(--color-text-muted); }
.tiny { font-size:var(--text-xs); color:var(--color-text-muted); }
.entry-help { margin-top:calc(var(--space-2) * -1); }

.btn-icon {
  width:44px; height:44px; border-radius:var(--radius-full);
  background:var(--color-surface-offset); border:1px solid var(--color-border);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:background var(--transition);
}
.btn-icon:hover { background:var(--color-primary-highlight); }

.conn-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--color-text-faint); display:inline-block;
  transition:background var(--transition);
}
.conn-dot[data-state="online"] { background:var(--color-success); }
.conn-dot[data-state="offline"] { background:var(--color-warn); }
.conn-dot[data-state="connecting"] { background:var(--color-text-faint); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.who-row { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.who-label { color:var(--color-text-muted); font-size:var(--text-sm); }
.select-mini {
  min-height:36px; padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-md); border:1px solid var(--color-border);
  background:var(--color-surface-2); font-weight:500;
}

.entry-row { display:grid; grid-template-columns:1fr auto; gap:var(--space-2); }
.toolbar-row { display:grid; grid-template-columns:1fr auto; gap:var(--space-2); }

.btn {
  min-height:44px; padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-lg); font-size:var(--text-sm); font-weight:700;
  transition:all var(--transition);
}
.btn-primary { background:var(--color-primary); color:var(--color-text-inverse); }
.btn-primary:hover { background:var(--color-primary-hover); }
.btn-secondary {
  background:var(--color-surface-offset); border:1px solid var(--color-border);
}
.btn-secondary:hover { background:var(--color-primary-highlight); }
.btn-ghost { background:transparent; color:var(--color-text-muted); }

.btn-chip {
  min-height:38px; padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-full);
  background:var(--color-surface-offset); border:1px solid var(--color-border);
  font-size:var(--text-xs); font-weight:600;
  display:inline-flex; align-items:center; gap:var(--space-1);
}
.btn-chip:hover { background:var(--color-primary-highlight); }
.btn-chip.active { background:var(--color-primary-highlight); border-color:transparent; color:var(--color-primary); }
.btn-chip.ghost { background:transparent; border-style:dashed; }

.input, .select {
  min-height:44px; width:100%;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-lg); border:1px solid var(--color-border);
  background:var(--color-surface-2);
}
.input:focus, .select:focus { border-color:var(--color-primary); }

.filters { display:flex; flex-wrap:wrap; gap:var(--space-2); }

.summary { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-3); }
.card { padding:var(--space-4); }
.stat { display:grid; gap:var(--space-1); }
.stat strong { font-size:var(--text-lg); font-variant-numeric:tabular-nums lining-nums; }

.section-list { display:grid; gap:var(--space-4); }
.section-block { padding:var(--space-4); display:grid; gap:var(--space-3); scroll-margin-top:var(--space-4); }
.section-head { display:flex; justify-content:space-between; gap:var(--space-3); align-items:flex-start; flex-wrap:wrap; }
.mini-stats { font-size:var(--text-xs); color:var(--color-text-muted); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; }
.progress {
  appearance:none; -webkit-appearance:none; width:100%; height:6px;
  border:none; border-radius:var(--radius-full); background:var(--color-surface-offset); overflow:hidden;
}
.progress::-webkit-progress-bar { background:var(--color-surface-offset); border-radius:var(--radius-full); }
.progress::-webkit-progress-value { background:var(--color-primary); border-radius:var(--radius-full); transition:width var(--transition); }
.progress::-moz-progress-bar { background:var(--color-primary); border-radius:var(--radius-full); }

.section-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; }

.stickers-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:var(--space-2); }
.sticker-item { padding:var(--space-3); display:grid; gap:var(--space-2); align-content:start; transition:transform 120ms; }
.sticker-meta { display:grid; gap:var(--space-1); }
.sticker-item.flash { transform:scale(1.03); }
.sticker-top { display:flex; justify-content:space-between; gap:var(--space-2); align-items:center; }
.code { font-weight:700; font-variant-numeric:tabular-nums lining-nums; }
.tag {
  font-size:var(--text-xs); padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-full);
  background:var(--color-surface-offset); color:var(--color-text-muted);
  font-weight:600;
}
.sticker-item.owned .tag { background:var(--color-success-highlight); color:var(--color-success); }
.sticker-item.swap .tag { background:var(--color-warn-highlight); color:var(--color-warn); }

.sticker-controls { display:flex; gap:var(--space-1); align-items:center; justify-content:space-between; }
.count-pill {
  flex:1; text-align:center; font-weight:700; font-variant-numeric:tabular-nums lining-nums;
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  background:var(--color-surface-offset);
}
.sticker-item.owned .count-pill { background:var(--color-success-highlight); color:var(--color-success); }
.sticker-item.swap .count-pill { background:var(--color-warn-highlight); color:var(--color-warn); }
.btn-step {
  width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--color-surface-offset); border:1px solid var(--color-border);
  font-size:1.1rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-step:hover { background:var(--color-primary-highlight); }
.last-by { font-size:0.7rem; color:var(--color-text-faint); }

.toast {
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + var(--space-4));
  transform:translate(-50%, 120%); transition:transform var(--transition);
  background:var(--color-text); color:var(--color-text-inverse);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-full);
  font-size:var(--text-sm); font-weight:600; pointer-events:none;
  max-width:90%; text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.toast.show { transform:translate(-50%, 0); }
.toast.error { background:var(--color-danger); color:#fff; }

@media (max-width:780px) {
  .summary { grid-template-columns:repeat(2, 1fr); }
  .stickers-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-2); }
  .toolbar-row { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .app { padding:var(--space-2); gap:var(--space-2); }
  .topbar { position:static; padding:var(--space-3); gap:var(--space-2); border-radius:var(--radius-lg); }
  .brand h1 { font-size:1.25rem; }
  .brand p { font-size:0.7rem; }
  .logo { width:32px; height:32px; }
  .who-row { gap:var(--space-2); }
  .who-label { display:none; }
  #lastChangeLabel { font-size:0.7rem; }
  .entry-help { display:none; }
  .filters { gap:var(--space-1); }
  .btn-chip { min-height:34px; padding:var(--space-1) var(--space-3); }
  .summary { grid-template-columns:repeat(4, 1fr); gap:var(--space-2); }
  .summary .card { padding:var(--space-2); text-align:center; }
  .summary .stat strong { font-size:1rem; }
  .summary .tiny { font-size:0.65rem; }
  .hint { display:none; }
  .section-block { padding:var(--space-3); gap:var(--space-2); }
  .section-head h2 { font-size:1.05rem; }
  .stickers-grid { grid-template-columns:1fr; gap:var(--space-2); }
  .sticker-item { padding:var(--space-2) var(--space-3); gap:var(--space-1); }
  .sticker-controls { gap:var(--space-2); }
  .btn-step { width:44px; height:44px; }
  .count-pill { padding:var(--space-2); }
  .last-by { font-size:0.65rem; }
  .section-actions .btn { min-height:38px; padding:var(--space-2) var(--space-3); font-size:0.8rem; }
}

@media (display-mode:standalone) and (min-width:521px) {
  .topbar { top:0; }
}

.btn-link {
  background:transparent;
  border:none;
  padding:0 var(--space-1);
  font-size:var(--text-xs);
  color:var(--color-primary);
  text-decoration:underline;
  cursor:pointer;
}
.btn-link:hover { color:var(--color-primary-hover); }

.name-dialog {
  position:fixed; inset:0;
  background:rgba(40,37,29,.55);
  display:none;
  align-items:center; justify-content:center;
  padding:var(--space-4);
  z-index:100;
}
.name-dialog.show { display:flex; }
.name-dialog-card {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5);
  display:grid; gap:var(--space-3);
  width:100%; max-width:380px;
  box-shadow:0 8px 32px rgba(0,0,0,.22);
}
.name-dialog-card h2 { font-size:var(--text-lg); }

.help-card {
  max-width:560px;
  max-height:85vh;
  padding:var(--space-4);
  gap:var(--space-3);
}
.help-head {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
}
.help-head h2 { font-size:var(--text-lg); }
.help-body {
  overflow-y:auto;
  padding-right:var(--space-2);
  display:grid;
  gap:var(--space-3);
  font-size:var(--text-sm);
  line-height:1.55;
}
.help-body h3 {
  font-size:var(--text-base);
  margin-top:var(--space-2);
  color:var(--color-primary);
}
.help-body h3:first-child { margin-top:0; }
.help-body p { margin:0; }
.help-body ol, .help-body ul {
  margin:0;
  padding-left:var(--space-5);
  display:grid;
  gap:var(--space-1);
}
.help-body code {
  background:var(--color-surface-offset);
  border-radius:var(--radius-sm);
  padding:0 var(--space-1);
  font-size:0.9em;
  font-family:'SF Mono', Menlo, monospace;
}
.help-body strong { color:var(--color-text); }