:root{
  --bg:#f4f5f7; --surface:#ffffff; --ink:#1c2230; --muted:#6b7280;
  --line:#e6e8ec; --brand:#6d28d9; --brand-ink:#5b21b6; --brand-050:#f5f3ff;
  --green:#0f9d58; --green-050:#e8f6ee; --red:#d64545; --red-050:#fbeaea;
  --amber:#b45309; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 16px rgba(16,24,40,.06);
  --r:16px; --r-sm:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; padding-bottom:76px;
}
a{color:var(--brand-ink); text-decoration:none}
h1,h2,h3{margin:0 0 .2em; line-height:1.25}
h1{font-size:1.35rem} h2{font-size:1.1rem}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--brand); color:#fff;
  padding:14px 18px; display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 10px rgba(109,40,217,.25);
}
.topbar .brand{font-weight:700; font-size:1.05rem; letter-spacing:.2px}
.topbar .spacer{flex:1}
.topbar a{color:#fff; opacity:.9; font-size:.9rem}

.wrap{max-width:720px; margin:0 auto; padding:18px}

/* cards */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:18px; margin-bottom:16px}
.card h2{display:flex; align-items:center; gap:8px}

/* stat grid */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--shadow); padding:14px}
.stat .k{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.stat .v{font-size:1.35rem; font-weight:700; margin-top:4px}
.stat.brand .v{color:var(--brand-ink)}
.stat.green .v{color:var(--green)}
.stat.red .v{color:var(--red)}

/* list rows */
.rowlist{display:flex; flex-direction:column}
.rowitem{display:flex; align-items:center; gap:12px; padding:13px 4px; border-top:1px solid var(--line)}
.rowitem:first-child{border-top:none}
.rowitem .av{width:40px; height:40px; border-radius:50%; background:var(--brand-050);
  color:var(--brand-ink); font-weight:700; display:grid; place-items:center; flex:none}
.rowitem .main{flex:1; min-width:0}
.rowitem .main .t{font-weight:600}
.rowitem .main .s{font-size:.85rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rowitem .end{text-align:right; font-weight:700; white-space:nowrap}

.badge{display:inline-block; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:999px}
.badge.ok{background:var(--green-050); color:var(--green)}
.badge.no{background:var(--red-050); color:var(--red)}
.pos{color:var(--red)} .zero{color:var(--muted)} .neg{color:var(--green)}

/* forms */
label{display:block; font-size:.85rem; color:var(--muted); margin:12px 0 5px; font-weight:600}
input,select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:1rem; background:#fff; color:var(--ink); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}
textarea{min-height:70px; resize:vertical}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 18px; border-radius:var(--r-sm); border:none; font-size:1rem; font-weight:700;
  cursor:pointer; width:100%; margin-top:16px}
.btn.primary{background:var(--brand); color:#fff}
.btn.primary:active{background:var(--brand-ink)}
.btn.ghost{background:#fff; border:1px solid var(--line); color:var(--ink); margin-top:8px}
.btn.danger{background:var(--red-050); color:var(--red)}
.btn-row{display:flex; gap:10px}
.btn-row .btn{margin-top:8px}

.searchbar{margin-bottom:14px}
.searchbar input{padding-left:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:13px center}

.empty{text-align:center; color:var(--muted); padding:30px 10px}
.flash{padding:12px 14px; border-radius:var(--r-sm); margin-bottom:14px; font-size:.92rem}
.flash.ok{background:var(--green-050); color:var(--green)}
.flash.err{background:var(--red-050); color:var(--red)}
.muted{color:var(--muted); font-size:.88rem}
.right{text-align:right}

/* bottom nav */
.bottomnav{position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line);
  display:flex; z-index:20; padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.bottomnav a{flex:1; text-align:center; color:var(--muted); font-size:.72rem; padding:6px 0; font-weight:600}
.bottomnav a.active{color:var(--brand-ink)}
.bottomnav a svg{display:block; margin:0 auto 3px; width:22px; height:22px}

/* login */
.login-wrap{max-width:400px; margin:8vh auto; padding:22px}
.login-logo{width:64px; height:64px; border-radius:18px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-size:1.8rem; margin:0 auto 16px; box-shadow:0 8px 24px rgba(109,40,217,.35)}
.login-wrap h1{text-align:center}
.login-wrap .muted{text-align:center; margin-bottom:8px}

.fab{position:fixed; right:18px; bottom:86px; width:56px; height:56px; border-radius:50%;
  background:var(--brand); color:#fff; display:grid; place-items:center; font-size:1.8rem;
  box-shadow:0 8px 24px rgba(109,40,217,.4); z-index:21}