@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --ink: #172a27;
  --muted: #6b7d78;
  --green: #087f68;
  --dark-green: #075e54;
  --mint: #e9f7f1;
  --line: #e5eeea;
  --surface: #fff;
  --bg: #f4f8f6;
  font-family: "Hind Siliguri", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; padding-bottom: 86px; }
.topbar { background: linear-gradient(135deg, #075e54, #0c8b70); color: white; padding: 22px 20px 34px; border-radius: 0 0 28px 28px; }
.topbar-inner, .content { width: min(100%, 680px); margin: auto; }
.brand-row { display: flex; align-items: center; gap: 12px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #ffffff8a; background: #cde9dd; }
.brand-name { font-size: 17px; font-weight: 700; line-height: 1.15; }
.subtle-light { color: #d6eee6; font-size: 13px; }
.balance-card { margin-top: 25px; padding: 18px; border: 1px solid #ffffff35; border-radius: 18px; background: #ffffff12; }
.balance-title { color: #d5eee5; font-size: 14px; }
.balance { font-size: 33px; font-weight: 700; margin-top: 2px; }
.balance-foot { display:flex; justify-content:space-between; font-size:13px; color:#d8eee6; }
.content { padding: 18px 16px; }
.section-title { font-size: 19px; font-weight: 700; margin: 8px 0 12px; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 5px 18px #123a2b08; }
.stat-label { color:var(--muted); font-size:13px; }
.stat-value { font-size:20px; font-weight:700; margin-top:4px; }
.notice { margin:15px 0; border-radius:12px; background:#fff8e7; color:#735516; padding:12px 14px; font-size:13px; }
.primary, .secondary, .danger { border:0; border-radius:12px; padding:12px 16px; font-weight:700; }
.primary { color:white; background:var(--green); }
.primary:disabled { opacity:.55; cursor:not-allowed; }
.secondary { color:var(--dark-green); background:var(--mint); }
.danger { background:#fff0ef; color:#a12b26; }
.full { width:100%; }
.button-stack { display:grid; gap:10px; }
.nav { position:fixed; bottom:0; z-index:5; width:100%; display:flex; overflow-x:auto; padding:9px max(8px,calc((100vw - 680px)/2)); gap:2px; background:#ffffffed; border-top:1px solid var(--line); backdrop-filter:blur(12px); }
.nav button { flex:1; min-width:54px; border:0; background:none; padding:5px 3px; color:#71817c; font-size:11px; }
.nav button.active { color:var(--green); font-weight:700; }
.nav-icon { display:block; font-size:19px; line-height:1.1; margin-bottom:2px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stack { display:grid; gap:12px; }
.muted { color:var(--muted); font-size:13px; }
.input, .select { width:100%; margin-top:5px; padding:11px 12px; border:1px solid #dce7e2; border-radius:10px; background:white; }
.field { display:block; margin-bottom:13px; font-size:14px; font-weight:600; }
.error { color:#b42318; background:#fff1f0; padding:10px 12px; border-radius:9px; font-size:13px; }
.success { color:#066345; background:#eaf8ef; padding:10px 12px; border-radius:9px; font-size:13px; }
.pill { display:inline-block; padding:4px 9px; border-radius:100px; background:var(--mint); color:#086149; font-size:12px; }
.table-row { display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.rank { color:var(--muted); font-weight:700; text-align:center; }
.empty { text-align:center; padding:26px 15px; color:var(--muted); }
.admin-shell { max-width:1100px; margin:auto; padding:24px 16px; }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.terminal { background:#10221e; color:#b6e5c9; border-radius:12px; padding:12px; height:240px; overflow:auto; font:12px/1.6 ui-monospace,monospace; }
@media (min-width:700px) { .app-shell { padding-bottom:25px; } .nav { position:static; width:min(100%,680px); margin:0 auto 20px; border:1px solid var(--line); border-radius:14px; } }