/* ============================================================
   Nova AI Bot — Admin  ·  Light Blue/Indigo, mobile-polished
   Left drawer (open/close) · notch-safe · app-comfortable
   ============================================================ */
:root{
  --pri:#4f6ef7; --pri-d:#3a55e0; --pri-l:#eef1ff; --pri-grad:linear-gradient(135deg,#5b73ff,#3aa3ff);
  --bg:#eef1f8; --card:#ffffff; --ink:#1e2740; --ink2:#5a6685; --muted:#9aa3bd;
  --line:#e7ebf4; --field:#f2f5fb;
  --ok:#2faa4d; --okbg:#e9f7ec; --err:#e1455d; --errbg:#fdeaee;
  --rad:20px; --rad-sm:14px; --head:58px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sh:0 8px 22px rgba(40,55,95,.08);
  --sh-clay:0 8px 18px rgba(79,110,247,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);font-size:15px;font-weight:500;-webkit-font-smoothing:antialiased}
body.noscroll{overflow:hidden}
a{text-decoration:none;color:inherit}

/* ---------- sticky header (notch-safe) ---------- */
.top{position:sticky;top:0;z-index:50;height:calc(var(--head) + var(--sat));padding:var(--sat) 16px 0;
  display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top h1{font-size:18px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
.who{font-size:13px;font-weight:700;color:var(--pri-d);background:var(--pri-l);padding:7px 13px;border-radius:30px}
.burger{display:flex;flex-direction:column;justify-content:center;gap:4.5px;width:42px;height:42px;border:0;
  background:var(--pri-l);border-radius:13px;cursor:pointer;padding:0 11px;transition:.15s}
.burger:active{transform:scale(.92)}
.burger span{height:2.5px;background:var(--pri-d);border-radius:3px}

/* ---------- shell + left drawer ---------- */
.shell{display:flex;min-height:calc(100vh - var(--head))}
.scrim{position:fixed;inset:0;background:rgba(18,26,48,.5);opacity:0;visibility:hidden;transition:.28s;z-index:55;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.scrim.show{opacity:1;visibility:visible}
.side{position:fixed;top:0;left:0;width:268px;height:100vh;background:var(--card);z-index:60;
  transform:translateX(-100%);transition:transform .3s cubic-bezier(.33,1,.45,1);
  padding:calc(14px + var(--sat)) 12px calc(14px + var(--sab));display:flex;flex-direction:column;
  border-radius:0 22px 22px 0;box-shadow:10px 0 40px rgba(25,35,65,.16);overflow-y:auto}
.side.open{transform:translateX(0)}
.side-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.brand{font-size:20px;font-weight:700;display:flex;flex-direction:column;line-height:1.15;margin:6px 8px;color:var(--pri-d)}
.brand span{font-size:11px;font-weight:600;color:var(--muted);margin-top:3px}
.side-x{width:38px;height:38px;border:0;background:var(--field);color:var(--ink2);border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;flex-shrink:0;margin-top:4px;transition:.15s}
.side-x:active{background:var(--errbg);color:var(--err);transform:scale(.92)}
.side nav{display:flex;flex-direction:column;gap:4px;flex:1}
.side nav a{position:relative;display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:14px;color:var(--ink2);font-weight:600;font-size:15px;transition:.15s}
.side nav a i{font-style:normal;font-size:18px;width:22px;text-align:center}
.side nav a:active{background:var(--field);transform:scale(.98)}
.side nav a.on{background:var(--pri-grad);color:#fff;box-shadow:var(--sh-clay)}
.side nav a.on::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--pri-d);border-radius:0 4px 4px 0}
.logout{display:flex;align-items:center;gap:11px;color:var(--err);padding:14px 15px;border-radius:14px;font-weight:700;margin-top:6px}
.logout:active{background:var(--errbg);transform:scale(.98)}

main{flex:1;min-width:0}
.wrap{padding:16px 16px calc(28px + var(--sab));max-width:1000px;margin:0 auto}

/* ---------- stat cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:16px}
.card{background:var(--card);border-radius:var(--rad);box-shadow:var(--sh);padding:17px;display:flex;align-items:center;gap:13px;transition:.15s}
.card:active{transform:scale(.985)}
.c-ic{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:23px;background:var(--pri-grad);color:#fff;box-shadow:var(--sh-clay);flex-shrink:0}
.c-n{font-size:23px;font-weight:700;line-height:1.05;letter-spacing:-.5px}
.c-l{font-size:12px;color:var(--ink2);font-weight:600;margin-top:1px}

/* ---------- panels (boxed) ---------- */
.panel{background:var(--card);border-radius:var(--rad);box-shadow:var(--sh);margin-bottom:16px;overflow:hidden}
.panel-h{padding:16px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px;color:var(--ink)}
.kv{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line)}
.kv>div{background:var(--card);padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
.kv span{color:var(--ink2);font-weight:600}
.kv b{font-weight:700}

/* ---------- forms (comfortable taps) ---------- */
.form{padding:18px}
.form label{display:block;font-weight:700;color:var(--ink2);margin:16px 0 8px;font-size:13px}
.form label:first-child{margin-top:0}
.form label.chk{display:flex;align-items:center;gap:11px;color:var(--ink);cursor:pointer;font-weight:600;font-size:15px}
.form label.chk input{width:21px;height:21px;accent-color:var(--pri)}
.form input,.form select,.form textarea{width:100%;background:var(--field);border:1.5px solid var(--line);border-radius:var(--rad-sm);
  padding:14px 15px;color:var(--ink);font-family:inherit;font-size:16px;font-weight:600;outline:none;transition:.15s}
.form input::placeholder,.form textarea::placeholder{color:var(--muted);font-weight:500}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--pri);background:#fff;box-shadow:0 0 0 4px rgba(79,110,247,.15)}
.form textarea{resize:vertical;line-height:1.55}
.row2{display:grid;grid-template-columns:1fr;gap:0}
.actions{margin-top:22px;display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.form .muted{margin-top:13px;line-height:1.55}

/* ---------- buttons (indigo clay) ---------- */
button,.btn-ghost{font-family:inherit;font-size:15px;font-weight:700;border:0;cursor:pointer;
  padding:15px 28px;border-radius:15px;color:#fff;background:var(--pri-grad);box-shadow:var(--sh-clay);transition:.15s}
button:active{transform:translateY(1px) scale(.99)}
.btn-ghost{background:var(--field);color:var(--ink2);box-shadow:none}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px}
.tbl th{color:var(--ink2);font-weight:700;background:var(--field)}
.tbl tr:last-child td{border-bottom:0}
.muted{color:var(--muted)}
.badge{background:var(--pri-l);color:var(--pri-d);padding:4px 11px;border-radius:30px;font-size:11px;font-weight:700;white-space:nowrap}
.rowbtns{display:flex;gap:6px;flex-wrap:wrap}
.rowbtns form{display:inline;margin:0}
.mini{padding:8px 13px;border-radius:11px;font-size:12px;font-weight:700;color:#fff;background:var(--pri)}
.mini.ghost{background:var(--field);color:var(--ink2)}
.mini.danger{background:var(--errbg);color:var(--err)}

/* ---------- flash ---------- */
.flash{margin:0 0 16px;padding:14px 16px;border-radius:var(--rad-sm);font-weight:700;font-size:14px}
.flash.ok{background:var(--okbg);color:var(--ok)}
.flash.err{background:var(--errbg);color:var(--err)}

/* ---------- pager ---------- */
.pager{display:flex;gap:7px;padding:16px 18px;flex-wrap:wrap}
.pager a{padding:9px 14px;border-radius:11px;background:var(--field);color:var(--ink2);font-weight:700}
.pager a.on{background:var(--pri-grad);color:#fff}

/* ---------- login ---------- */
.login-bg{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:linear-gradient(160deg,#eef2ff,#e6f0ff)}
.login-card{width:100%;max-width:374px;background:var(--card);border-radius:28px;padding:36px 26px;box-shadow:0 24px 60px rgba(40,55,95,.16)}
.login-brand{font-size:26px;font-weight:700;text-align:center;display:flex;flex-direction:column;margin-bottom:24px;line-height:1.15;color:var(--pri-d)}
.login-brand span{font-size:12px;color:var(--muted);font-weight:600;margin-top:5px}
.login-card label{display:block;color:var(--ink2);font-weight:700;font-size:13px;margin:14px 0 8px}
.login-card input{width:100%;background:var(--field);border:1.5px solid var(--line);border-radius:14px;padding:15px;color:var(--ink);font-size:16px;font-weight:600;outline:none}
.login-card input:focus{border-color:var(--pri);background:#fff;box-shadow:0 0 0 4px rgba(79,110,247,.15)}
.login-card button{width:100%;margin-top:24px;padding:16px}

/* ============================================================
   DESKTOP — drawer still left + toggle; grids widen
   ============================================================ */
@media(min-width:900px){
  .wrap{padding:26px}
  .cards{grid-template-columns:repeat(4,1fr);gap:16px}
  .row2{grid-template-columns:1fr 1fr;gap:16px}
  .kv{grid-template-columns:1fr 1fr}
  .top{padding-left:24px;padding-right:24px}
  .top h1{font-size:20px}
  .side{width:288px}
}
@media(min-width:560px) and (max-width:899px){ .cards{grid-template-columns:repeat(4,1fr)} }