:root{
  --brand:#22B0E6;          /* primary */
  --ink:#0f172a;            /* text */
  --muted:#64748b;          /* subtext */
  --bg:#f6f9fc;             /* app bg */
  --card:#ffffff;           /* panels */
  --stroke:#e6ecf1;         /* borders */
}

html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.app{min-height:100%; display:flex; flex-direction:column;}
.appbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:#fff; border-bottom:1px solid var(--stroke);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px}
.brand img{height:28px}
.toolbar{display:flex; align-items:center; gap:10px}
.btn-app{
  appearance:none; border:0; background:var(--ink); color:#fff; padding:9px 12px;
  border-radius:10px; font-weight:600; cursor:pointer;
}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--stroke)}

.content{padding:14px 14px 78px; max-width:960px; width:100%; margin:0 auto;}
.panel{
  background:var(--card); border:1px solid var(--stroke); border-radius:14px;
  box-shadow:0 1px 0 rgba(15,23,42,.04); overflow:hidden;
}
.panel-hd{padding:14px 16px; border-bottom:1px solid var(--stroke); font-weight:700}
.panel-bd{padding:14px 16px}
.muted{color:var(--muted)}
.chip{display:inline-block; padding:4px 10px; background:var(--brand); color:#fff; border-radius:999px; font-size:12px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 8px; border-bottom:1px solid var(--stroke)}

/* Sticky bottom tab bar */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:12; background:#fff;
  border-top:1px solid var(--stroke); padding:6px env(safe-area-inset-left) calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-right);
}
.tabs{display:flex; justify-content:space-around; gap:4px; max-width:960px; margin:0 auto}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px; color:var(--muted); text-decoration:none; border-radius:10px;
}
.tab.active{color:var(--ink); background:#f2f7fb}
.tab .ico{font-size:18px;}
.tab .lbl{font-size:12px; font-weight:600}

/* Buttons in cards */
.btn-inline{display:inline-flex; align-items:center; gap:6px; background:var(--ink); color:#fff; padding:8px 10px; border-radius:10px; text-decoration:none}
.btn-inline.secondary{background:#445A60}

/* Utilities */
.row{display:flex; align-items:center}
.row.gap{gap:10px}
.space{height:10px}

@media(min-width:960px){
  .content{padding-bottom:24px}
}

/* Tiles (Home quick actions) */
.tiles{display:grid; grid-template-columns: repeat(2, 1fr); gap:10px}
.tile{background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:14px; display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); box-shadow:0 1px 0 rgba(15,23,42,.04)}
.tile .ico{font-size:20px; color:var(--brand)}
.tile .txt{font-weight:600}

/* Dark mode */
[data-theme='dark'] body{background:#0b1220; color:#e5e7eb}
[data-theme='dark'] .appbar{background:#0f1525; border-color:#1f2a3a}
[data-theme='dark'] .panel{background:#0f1525; border-color:#1f2a3a}
[data-theme='dark'] .tabbar{background:#0f1525; border-color:#1f2a3a}
[data-theme='dark'] .tile{background:#0f1525; border-color:#1f2a3a}