/* ========== THEME (mint neo) ========== */
:root{
  --bg:#0b1220; --card:#121a2a; --text:#e9eef7; --muted:#8fa0b8; --accent:#49c68a; --accent2:#3ba8f9; --danger:#ff6b6b;
  --ring:rgba(73,198,138,.25); --stroke:rgba(255,255,255,.06);
  --input-bg:#0f1626; --input-stroke:rgba(255,255,255,.09);
  --radius:18px; --radius-sm:14px; --control-h:44px;
}
:root[data-theme='light']{
  --bg:#f5f8fc; --card:#ffffff; --text:#0f1a2b; --muted:#6b778c; --accent:#2fc88f; --accent2:#2f8af8; --danger:#e5484d;
  --ring:rgba(47,138,248,.18); --stroke:rgba(0,0,0,.06);
  --input-bg:#f3f6fb; --input-stroke:rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
#app{max-width:1024px;margin:0 auto;padding:12px 12px 92px}

/* Header */
.app-header{display:flex;justify-content:space-between;align-items:center;margin:4px 0 12px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{font-weight:900;font-size:24px;letter-spacing:.5px;background:linear-gradient(90deg,var(--accent2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{font-size:12px;color:#0b2b21;background:linear-gradient(90deg,#7de8c1,#61e09f);padding:6px 10px;border-radius:999px}
.header-right{display:flex;align-items:center;gap:10px}
.icon-btn{display:inline-grid;place-items:center;border:none;background:transparent;color:var(--text);width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1px var(--stroke) inset}
.icon-btn.ghost{background:transparent}
.icon-btn.danger{background:#ff6b6b22;color:#ff9e9e}
.toggle-lang{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background:transparent;color:var(--text);font-weight:800}
.flag{border-radius:2px;box-shadow:0 0 0 1px var(--stroke)}
#userBox{font-size:12px;color:var(--muted)}

/* Segmented */
.segmented{display:flex;gap:10px;margin:8px 2px 12px}
.seg{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;height:42px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);color:var(--muted);font-weight:800}
.seg svg{fill:currentColor}
.seg.active{color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 0 1px var(--stroke)}

/* Cards */
.card{background:var(--card);border-radius:20px;padding:16px;margin:12px 0;box-shadow:0 10px 28px rgba(0,0,0,.22),0 0 0 1px var(--stroke)}
.card.neo{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));backdrop-filter:saturate(120%) blur(4px)}
.card h2{margin:0 0 12px 0;font-size:16px}
.card-title-with-icon{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.circle-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#1c273b,#0e1524);box-shadow:inset 0 0 0 1px var(--stroke);color:#9fb5ff;font-weight:900}

/* Grid */
.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:1fr 1fr} }

.grid label{display:grid;gap:6px;font-size:12px;color:var(--muted)}

/* Inputs/selects */
input,select{height:var(--control-h);border-radius:var(--radius);border:1px solid var(--input-stroke);background:var(--input-bg);color:var(--text);padding:12px 14px;font-weight:600;outline:none}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2390a3bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
input::placeholder{color:var(--muted)}
input:focus,select:focus{box-shadow:0 0 0 4px var(--ring);border-color:transparent}
.pill{border-radius:999px}
.readonly{opacity:.9}

.actions-right{display:flex;justify-content:flex-end}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:999px;border:1px solid transparent;background:rgba(255,255,255,.05);color:var(--text);font-weight:800}
.btn.grad{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0a1a14}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--text)}

.muted{color:var(--muted);font-size:12px}
.muted.inline{display:flex;align-items:center;gap:6px;margin-top:8px}
.full{grid-column:1/-1}

/* Stat tiles */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:16px;padding:12px}
.tile .k{color:var(--muted);font-size:12px;margin-bottom:6px}
.tile .v{font-weight:900;font-size:18px}
.tile.accent{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.05));box-shadow:0 0 0 1px rgba(73,198,138,.25) inset}

/* Entries */
.entry{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--stroke);border-radius:16px;margin:8px 0;background:rgba(255,255,255,0.03)}
.entry .date{font-weight:800}
.entry .nums{text-align:right;font-size:13px}
.entry .actions{display:flex;gap:8px}
.entry .actions .btn{background:#2a3144;width:38px;height:38px;padding:0;border-radius:12px}
.entry .actions .btn.del{background:#ff6b6b33;color:#ffd4d4}

/* Admin table */
.table{display:grid;gap:6px;margin-top:8px;font-size:13px}
.table .tr{display:grid;grid-template-columns:1fr 90px 120px 120px;gap:8px;padding:10px;background:rgba(255,255,255,.04);border-radius:12px}
.table .head{font-weight:700;background:rgba(255,255,255,.08)}
.hover-id{cursor:help;border-bottom:1px dotted var(--muted)}

/* Tabs (bottom) */
.tab{display:none}
.tab.active{display:block}
.tabbar.neo{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.25))}
.tabbtn{height:44px;border-radius:999px;border:none;background:rgba(255,255,255,.06);color:var(--muted);font-weight:900}
.tabbtn.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0a1a14}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}