/* shared.css — base reset, tokens, layout, and utility classes.
   Linked by every page. Write once here; never duplicate inline. */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root{
  --bg-page:#0a0a0a;--bg-shell:#111;--bg-card:#1c1c1e;--bg-elevated:#1e1e20;--bg-control:#2c2c2e;--bg-overlay:rgba(30,30,32,0.95);--bg-detail:#050505;--muted-control:#3a3a3c;
  --text-primary:#f2f2f7;--text-secondary:#aaa;--text-tertiary:#888;--text-muted:#555;--text-faint:#444;
  --border-soft:rgba(255,255,255,0.08);--border-default:rgba(255,255,255,0.16);--border-strong:rgba(255,255,255,0.2);--icon-strong:rgba(255,255,255,0.55);
}
[data-theme="light"]{
  --bg-page:#f5f4f0;--bg-shell:#ffffff;--bg-card:#f1f0eb;--bg-elevated:#efeee8;--bg-control:#e6e4dc;--bg-overlay:rgba(255,255,255,0.95);--bg-detail:#f5f4f0;--muted-control:#d3d1c6;
  --text-primary:#1c1c1a;--text-secondary:#58564f;--text-tertiary:#6b6960;--text-muted:#8f8d83;--text-faint:#a4a297;
  --border-soft:rgba(0,0,0,0.08);--border-default:rgba(0,0,0,0.12);--border-strong:rgba(0,0,0,0.18);--icon-strong:rgba(0,0,0,0.45);
}

/* ── Shell layout ─────────────────────────────────────────────────────────── */
body{background:var(--bg-page);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;padding:2rem 0;}
.shell{width:375px;background:var(--bg-shell);border-radius:26px;border:0.5px solid var(--border-default);display:flex;flex-direction:column;overflow:hidden;position:relative;height:780px;}
.sb{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 4px;font-size:11px;color:var(--text-muted);flex-shrink:0;}

/* ── empty state ─────────────────────────────────────────────────────────── */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
  min-height:300px;
  gap:10px;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.6;
}
.empty-icon{font-size:40px;line-height:1;}
.empty-title{font-size:20px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;}
.empty-desc{font-size:12px;color:var(--text-muted);line-height:1.6;max-width:260px;}
.empty-state strong{color:var(--text-muted);font-size:14px;font-weight:500;}
.empty-btn{
  margin-top:6px;
  padding:12px 22px;
  border-radius:99px;
  background:var(--text-primary);
  color:var(--bg-shell);
  border:none;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition:opacity .15s;
}
@media (hover: hover){ .empty-btn:hover{opacity:.88;} }

/* ── pull-to-refresh ─────────────────────────────────────────────────────── */
.ptr-indicator{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -48px);
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--bg-elevated);
  border:0.5px solid var(--border-default);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  z-index:10;
  pointer-events:none;
}
.ptr-spinner{
  width:16px;
  height:16px;
  border:2px solid var(--border-default);
  border-top-color:var(--text-primary);
  border-radius:50%;
  transition:transform .2s ease;
}
.ptr-indicator.ptr-ready .ptr-spinner{
  border-top-color:var(--text-primary);
  transform:rotate(180deg);
}
.ptr-indicator.ptr-loading .ptr-spinner{
  animation:ptr-spin .7s linear infinite;
}
@keyframes ptr-spin{to{transform:rotate(360deg);}}