:root{
  --bg:#f4f7ff;
  --bg-soft:#f9fbff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#d9e5fb;
  --primary:#1e63ff;
  --primary-strong:#1652df;
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#ef4444;
  --radius:22px;
  --shadow:0 8px 24px rgba(30, 41, 59, .07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;background:radial-gradient(1200px 600px at 15% -20%,#eaf1ff 0%,transparent 60%),radial-gradient(1000px 500px at 100% 0%,#edf3ff 0%,transparent 55%),var(--bg);color:var(--text);font-family:"SF Pro Display","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif}
.hidden{display:none!important}
.app-shell{display:flex;min-height:100vh;min-height:100dvh;max-width:100%;overflow-x:hidden}
.app-main-wrap{flex:1;display:flex;flex-direction:column;min-width:0;max-width:100%}
.app-main{flex:1;padding:16px;padding-bottom:calc(94px + env(safe-area-inset-bottom));min-width:0;max-width:100%;overflow-x:hidden}
.topbar{position:sticky;top:0;background:linear-gradient(180deg,#07142f 0%,#0a1c43 100%);backdrop-filter:blur(10px);z-index:20;border-bottom:1px solid rgba(255,255,255,.12)}
.sidebar{display:none}
.toast-container{position:fixed;right:14px;top:14px;z-index:140}
.toast{background:#0b1222;color:#fff;border-radius:14px;padding:11px 14px;margin-bottom:8px;font-size:13px;font-weight:600;box-shadow:0 14px 34px rgba(2,8,23,.3);border:1px solid rgba(255,255,255,.1)}
.offline-banner{position:fixed;left:12px;right:12px;top:12px;z-index:150;background:#0b1222;color:#fff;padding:10px 12px;border-radius:12px;font-size:13px;box-shadow:var(--shadow)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi .value{font-weight:900;font-size:24px;letter-spacing:-.02em}
.muted{color:var(--muted)}
.btn{border:none;border-radius:14px;padding:10px 14px;font-weight:700;cursor:pointer;transition:.18s transform,.18s opacity,.18s box-shadow}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(145deg,var(--primary),var(--primary-strong));color:#fff;box-shadow:0 8px 18px rgba(30,99,255,.28)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:#0f172a}
.badge{font-size:11px;padding:5px 10px;border-radius:999px;font-weight:800;letter-spacing:.01em}
.badge-ok{background:#dcfce7;color:#166534}
.badge-warn{background:#fff3d6;color:#9a5a00}
.badge-err{background:#fee2e2;color:#991b1b}
.search{display:flex;gap:8px;background:#fff;border-radius:16px;padding:11px 12px;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.search input{border:none;outline:none;background:transparent;flex:1;font-size:16px}
.list{display:grid;gap:10px}
.row{display:flex;justify-content:space-between;gap:8px;align-items:center;min-width:0}
.row > *{min-width:0}
.grid-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.modal-backdrop{position:fixed;inset:0;background:rgba(2,8,23,.5);z-index:160;display:grid;place-items:center;padding:16px}
.modal-card{width:min(720px,100%);max-height:90vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:0 30px 80px rgba(2,8,23,.34)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:13px;padding:11px;background:#fff;font-size:15px}
@media (max-width: 700px){
  .modal-backdrop{padding:10px}
  .modal-card{width:100%;max-height:92vh;border-radius:18px}
}