:root{
  /* Apple-like palette */
  --bg: #f5f5f7;
  --card:#ffffff;
  --text:#1d1d1f;
  --sub:#6e6e73;
  --muted:#9aa0a6;
  --hair:#e5e5ea;
  --acc:#0071e3;
  --chip:#111827;
  --shadow:0 1px 3px rgba(0,0,0,.06);

  --radius:14px;
  --radius-sm:10px;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c0f;
    --card:#111318;
    --text:#e9ecf2;
    --sub:#a3a7ae;
    --muted:#9aa0a6;
    --hair:#242733;
    --acc:#0a84ff;
    --chip:#e5e7eb;
    --shadow:0 1px 3px rgba(0,0,0,.25);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
}
:root[data-theme="dark"]{
  color-scheme: dark;
}
:root[data-theme="light"] body{ background:#f5f5f7; color:#1d1d1f; }
:root[data-theme="dark"]  body{ background:#0b0c0f; color:#e9ecf2; }

/* base */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif; }

a{ color:var(--acc); text-decoration:none }
a:hover{ text-decoration:underline }

/* nav */
.nav{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1rem; background:var(--card); border-bottom:1px solid var(--hair); box-shadow:var(--shadow);
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:700 }
.logo{ width:24px; height:24px; border-radius:8px; background:linear-gradient(140deg,#5de0ff,#0a84ff); box-shadow:0 6px 18px #0a84ff44, inset 0 1px 0 #fff3 }
.title{ letter-spacing:.2px }
.badge{ font-size:.85rem; color:var(--sub); border:1px solid var(--hair); border-radius:999px; padding:.15rem .5rem }

.row{ display:flex; align-items:center; gap:.6rem }

/* segmented (theme) */
.segmented{ display:inline-flex; background:var(--bg); border:1px solid var(--hair); border-radius:999px; padding:2px }
.segmented button{
  border:0; background:transparent; padding:.35rem .6rem; border-radius:999px; cursor:pointer; color:var(--sub);
}
.segmented button.active{ background:var(--card); color:var(--text); box-shadow:var(--shadow) }

/* layout */
.main{ max-width:1060px; margin:1.2rem auto; padding:0 1rem }
.layout{ display:grid; grid-template-columns:1fr; gap:1rem }

/* cards */
.card{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem;
}
.h1{ font-size:1.25rem; font-weight:800; margin:.2rem 0 .9rem }
.subtitle{ color:var(--sub); margin:-.45rem 0 1rem }
.caption{ color:var(--muted); font-size:.92rem }
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--hair); background:var(--bg); margin-right:.4rem; color:var(--sub) }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-bottom:1rem }
.stat{ background:var(--card); border:1px solid var(--hair); border-radius:var(--radius-sm); padding:.8rem }
.stat .l{ color:var(--sub); font-weight:600; margin-bottom:.35rem }
.stat .v{ font-weight:800; font-size:1.1rem }
.stats.skel .stat{ height:68px; background:linear-gradient(90deg,transparent,#ffffff10,transparent); animation:shimmer 1.2s infinite }
@keyframes shimmer{ 100%{ background-position:100% 0 } }

/* table (cardless) */
.table{ border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden }
.table.cardless{ border:1px solid var(--hair); background:var(--card) }
.t-head, .t-row{ display:grid; grid-template-columns:1.2fr .8fr .9fr .8fr; }
.t-head{ background:var(--bg); color:var(--sub); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border-bottom:1px solid var(--hair); }
.t-head .th{ padding:.6rem .7rem }
.t-row .td{ padding:.65rem .7rem; border-bottom:1px solid var(--hair) }
.t-row:last-child .td{ border-bottom:0 }
.t-row:hover .td{ background:color-mix(in oklab, var(--bg) 70%, transparent) }
.start{ text-align:left } .end{ text-align:right } .mono{ font-variant-numeric: tabular-nums }

/* lists */
.list{ display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--card) }
.list-header{ padding:.55rem .8rem; background:var(--bg); border-bottom:1px solid var(--hair); color:var(--sub); font-weight:700 }
.list-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.7rem .8rem; border-bottom:1px solid var(--hair) }
.list-row:last-child{ border-bottom:0 }
.list-primary .row-top{ font-weight:700 }
.list-primary .row-sub{ color:var(--sub); font-size:.95rem }
.list-meta .amt{ font-weight:800 }
.amt.pos{ color:#34c759 } .amt.neg{ color:#ff3b30 }

.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 1rem }
.input, select{
  background:var(--bg); color:var(--text); border:1px solid var(--hair); border-radius:10px; padding:.6rem .7rem; outline:none;
}
.btn, .btn-outline, .btn-ghost{
  border-radius:10px; padding:.55rem .85rem; border:1px solid transparent; cursor:pointer; user-select:none;
}
.btn{ background:var(--acc); color:#fff }
.btn-outline{ background:transparent; color:var(--text); border-color:var(--hair) }
.btn-ghost{ background:transparent; color:var(--text); opacity:.85 }

.error{ border:1px solid var(--hair); border-radius:var(--radius); background:var(--card); padding:1rem }
.err-title{ font-weight:800; margin-bottom:.35rem }
.err-msg{ color:var(--sub) }

.empty{ padding:1.1rem .9rem; color:var(--sub) }

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  opacity:0; background:var(--card); color:var(--text); border:1px solid var(--hair); border-radius:12px; padding:.55rem .8rem;
  transition:.2s ease; box-shadow:var(--shadow)
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

.skel{ position:relative; overflow:hidden; }
.skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,#fff2,transparent); animation:shimmer 1.4s infinite }
.stack-40{ display:grid; gap:1rem }
.tabbar{ display:flex; gap:.5rem; margin:.8rem 0 1rem }
.tabs button{ padding:.55rem .9rem; border-radius:10px; border:1px solid var(--hair); background:var(--card); cursor:pointer }
.tabs button.active{ background:var(--bg) }