/* ============================================================
   KidsVPS Cloud — shared panel design system (panel.css v2)
   Loaded AFTER each page's inline <style>, so these rules win
   at equal specificity and keep every panel page consistent:
   same buttons, cards, nav, alerts, tables and mobile layout.
   Pages that must NOT get this theme (print views, File Manager)
   simply do not link it. Dark pages opt out with body.auth /
   body.term (see below).
   ============================================================ */
:root{
  --indigo:#6366f1; --indigo-d:#4f46e5; --violet:#8b5cf6;
  --ink:#0f172a; --slate:#64748b; --slate-l:#94a3b8;
  --line:#e2e8f0; --line-l:#f1f5f9;
  --green:#16a34a; --green-bg:#dcfce7; --green-tx:#166534;
  --amber:#d97706; --amber-bg:#fef3c7; --amber-tx:#92400e;
  --red:#dc2626; --red-bg:#fecaca; --red-tx:#991b1b;
  --r-lg:18px; --r-md:12px; --r-sm:9px;
  --sh-sm:0 1px 3px rgba(15,23,42,.05);
  --sh-md:0 8px 24px -12px rgba(15,23,42,.18);
}

/* ---------- Page background: soft premium gradient (light pages) ---------- */
body{
  background:linear-gradient(180deg,#e9edf5 0%,#f1f5f9 220px,#f8fafc 100%);
  color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,'Noto Sans Bengali',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
/* Dark auth pages (login / not-found): keep the dark gradient + glow */
body.auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(640px 420px at 50% -10%,rgba(99,102,241,.30),transparent 62%),
             linear-gradient(135deg,#0f172a,#1e1b4b);
  padding:20px;
}
/* Dark full-height terminal page */
body.term{background:#0f172a;color:#e2e8f0;display:flex;flex-direction:column;overflow:hidden}

/* ---------- Top navigation (user panel) ---------- */
.nav{
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);
  color:#cbd5e1;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;box-shadow:0 2px 14px rgba(15,23,42,.28);
}
.nav .brand{color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center}
.nav .brand img{height:30px;width:auto}
.nav a{
  color:#94a3b8;text-decoration:none;font-size:13px;font-weight:600;
  margin-left:18px;padding:7px 12px;border-radius:9px;transition:background .15s,color .15s;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav a.on{color:#fff;background:rgba(99,102,241,.38)}
.nav a.danger{color:#f87171}
.nav a.danger:hover{background:rgba(220,38,38,.20);color:#fca5a5}

/* ---------- Cards & layout ---------- */
.wrap{max-width:1050px;margin:30px auto;padding:0 20px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;margin-bottom:20px;box-shadow:var(--sh-sm);
}
body.auth .card{
  background:#1e293b;border-color:#334155;border-radius:20px;padding:36px;
  box-shadow:0 25px 60px rgba(0,0,0,.5);margin-bottom:0;
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px}

/* ---------- Stat tiles ---------- */
.stat{
  background:#fff;border:1px solid var(--line);border-radius:15px;padding:19px;
  box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.stat .lbl{font-size:11px;color:var(--slate);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.stat .val{font-size:21px;font-weight:800;margin-top:6px}
.stat .val small{font-size:12px;color:var(--slate-l);font-weight:600}
.bar{height:6px;background:#e2e8f0;border-radius:99px;margin-top:11px;overflow:hidden}
.bar>div{height:100%;border-radius:99px;background:linear-gradient(90deg,#6366f1,#8b5cf6)}

/* ---------- Buttons: one system everywhere ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:11px;border:0;cursor:pointer;
  font-weight:700;font-size:13.5px;line-height:1.2;color:#fff;text-decoration:none;
  transition:transform .12s,box-shadow .15s,background .15s,opacity .15s;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.20)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn i{font-size:14px}
.btn-indigo{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.btn-indigo:hover{box-shadow:0 8px 20px rgba(99,102,241,.42)}
.btn-green{background:linear-gradient(135deg,#16a34a,#22c55e)}
.btn-green:hover{box-shadow:0 8px 20px rgba(22,163,74,.35)}
.btn-amber{background:linear-gradient(135deg,#d97706,#f59e0b)}
.btn-amber:hover{box-shadow:0 8px 20px rgba(217,119,6,.35)}
.btn-red{background:linear-gradient(135deg,#dc2626,#ef4444)}
.btn-red:hover{box-shadow:0 8px 20px rgba(220,38,38,.38)}
.btn-gray{background:#64748b}
.btn-gray:hover{background:#475569}
.btn-violet{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.btn-violet:hover{box-shadow:0 8px 20px rgba(124,58,237,.38)}
.btn-ghost{background:#fff;border:1.5px solid #cbd5e1;color:#334155}
.btn-ghost:hover{border-color:#6366f1;color:#4f46e5;box-shadow:0 4px 12px rgba(99,102,241,.14)}
.btn-sm{padding:8px 13px;font-size:12px;border-radius:9px;min-height:36px}
.btn-lg{padding:14px 26px;font-size:15px;border-radius:12px}
.btn-block{width:100%}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}
.b-running{background:var(--green-bg);color:var(--green-tx)}
.b-stopped{background:#f1f5f9;color:var(--slate)}
.b-suspended{background:var(--amber-bg);color:var(--amber-tx)}
.b-provisioning{background:#dbeafe;color:#1d4ed8}
.b-bot{background:#ede9fe;color:#6d28d9}
.b-web{background:var(--green-bg);color:var(--green-tx)}

/* ---------- Alerts ---------- */
.msg{
  display:flex;gap:10px;align-items:flex-start;background:var(--green-bg);color:var(--green-tx);
  border:1px solid #bbf7d0;border-left:4px solid #22c55e;padding:13px 16px;border-radius:12px;
  font-size:13px;margin-bottom:18px;font-weight:600;line-height:1.55;
}
.msg.err{background:var(--red-bg);color:var(--red-tx);border-color:#fca5a5;border-left-color:#ef4444}
.msg.info{background:#eef2ff;border-color:#c7d2fe;color:#3730a3;border-left-color:#6366f1}

/* ---------- Range pills (analytics) ---------- */
.range a{
  display:inline-flex;align-items:center;padding:8px 16px;border-radius:99px;border:1px solid #cbd5e1;
  text-decoration:none;color:#334155;font-weight:700;font-size:13px;margin:0 8px 8px 0;transition:all .15s;
}
.range a:hover{border-color:#6366f1;color:#4f46e5}
.range a.on{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(99,102,241,.32);
}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--slate);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:9px 12px;text-align:left}
td{padding:10px 12px;border-bottom:1px solid var(--line-l);text-align:left}
tbody tr:hover td{background:#f8fafc}
code{background:#f1f5f9;border:1px solid var(--line);padding:2px 7px;border-radius:6px;font-size:12px;word-break:break-all}
pre{
  background:#0f172a;color:#e2e8f0;padding:16px;border-radius:12px;font-size:12px;line-height:1.6;
  overflow:auto;max-height:380px;white-space:pre-wrap;word-break:break-word;
}

/* ---------- Forms: focus ring + 44px tap targets (padding untouched) ---------- */
input,select,textarea{font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,.18);outline:none}
input,select{min-height:44px}
label{font-size:12.5px;font-weight:700;color:#334155;display:block;margin-bottom:6px}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px}

/* ---------- Quick Access helpers ---------- */
.slotbtns{display:flex;gap:8px;flex-wrap:wrap}
.slotbtns form{display:inline}
.pbar{background:#e2e8f0;border-radius:99px;height:14px;overflow:hidden;margin-top:12px}
.pbar-fill{background:linear-gradient(90deg,#6366f1,#22c55e);height:100%;border-radius:99px;transition:width .5s ease}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
.spin.dark{border-color:rgba(15,23,42,.2);border-top-color:#4f46e5}
@keyframes spin{to{transform:rotate(360deg)}}
.term-frame{width:100%;height:420px;border:0;border-radius:12px;background:#0f172a;display:block}
.backlink{color:#4f46e5;font-size:13px;font-weight:700;text-decoration:none}
.backlink:hover{text-decoration:underline}
.note{font-size:12px;color:var(--slate);margin-top:8px;line-height:1.6}

/* ---------- Dashboard action tiles ---------- */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}
.act{
  background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:22px 16px;
  text-align:center;text-decoration:none;color:var(--ink);transition:all .15s;
}
.act:hover{border-color:#6366f1;transform:translateY(-2px);box-shadow:0 8px 20px rgba(99,102,241,.15)}
.act .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:19px}
.act .t{font-size:12.5px;font-weight:700}
.act .s{font-size:10.5px;color:var(--slate-l);margin-top:3px}
.i1{background:#ede9fe;color:#7c3aed}.i2{background:#dcfce7;color:#16a34a}
.i3{background:#dbeafe;color:#2563eb}.i4{background:#fef3c7;color:#d97706}

/* ---------- Admin sidebar (shared collapse fixes the mobile bug:
   dashboard / manage / create had no sidebar media query) ---------- */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:230px;z-index:20;overflow-y:auto;
  background:linear-gradient(180deg,#0f172a,#1e1b4b);color:#cbd5e1;padding:22px 16px;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:16px;margin-bottom:30px}
.sidebar .brand i{font-size:22px;color:#818cf8}
.sidebar a{
  display:flex;align-items:center;gap:10px;color:#94a3b8;text-decoration:none;
  padding:11px 13px;border-radius:10px;font-size:13.5px;font-weight:600;margin-bottom:4px;transition:all .15s;
}
.sidebar a:hover,.sidebar a.active{background:#1e293b;color:#fff}
.sidebar a.active{box-shadow:inset 3px 0 0 #6366f1}
.main{margin-left:230px;padding:26px 32px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.top h1{font-size:22px}
a.small{color:#6366f1;font-weight:700;text-decoration:none;font-size:12.5px}
a.small:hover{text-decoration:underline}
.form-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ================= Mobile ================= */
@media (max-width:720px){
  .nav{flex-wrap:wrap;padding:12px 14px;gap:6px 10px}
  .nav a{margin-left:0;margin-right:12px;font-size:12px;white-space:nowrap;padding:7px 10px}
  .nav .brand{font-size:15px}
  .wrap{margin:18px auto;padding:0 12px}
  .card{padding:16px}
  body.auth .card{padding:24px 20px}
  .stat .val{font-size:19px}
  .grid{gap:12px}
  code{word-break:break-all}
  table{display:block;overflow-x:auto}
  .toolbar{flex-wrap:wrap}
  .sidebar{position:static;width:auto;padding:16px}
  .main{margin-left:0;padding:16px}
  .top h1{font-size:19px}
  .btn{min-height:44px}
  .btn-sm{min-height:36px}
  .actions{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .act{padding:18px 12px}
  .range a{padding:8px 14px}
  .term-frame{height:340px}
}
@media (max-width:400px){
  .nav{padding:10px 12px}
  .nav .brand{font-size:14px}
  .nav .brand img{height:26px}
  .wrap{padding:0 10px;margin:14px auto}
  .card{padding:14px}
  h1{font-size:19px}
  .grid{grid-template-columns:1fr}
  .actions{grid-template-columns:1fr 1fr}
  .stat{padding:16px}
  .stat .val{font-size:18px}
  .btn{padding:11px 14px;font-size:13px}
  .slotbtns .btn{flex:1 1 100%}
  .frow{grid-template-columns:1fr}
  .top{flex-direction:column;align-items:flex-start}
}

/* ---- Inline SVG icons (icon() helper in boot.php) ---- */
.ico{display:inline-block;vertical-align:-3px;flex:none}
.lbl .ico{margin-right:2px}
.btn .ico{vertical-align:-3px;margin-right:4px}
.btn-sm .ico{margin-right:3px}
.fic .ico{vertical-align:middle}
.act .ic .ico{width:22px;height:22px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;vertical-align:middle;margin-right:4px}
.stepnum{display:inline-flex;width:18px;height:18px;border-radius:50%;background:#4f46e5;color:#fff;font-size:11px;font-weight:700;align-items:center;justify-content:center;vertical-align:-4px}

/* ---- Log viewer: dark terminal box + coloured lines ---- */
pre.logbox{background:#0f172a;color:#cbd5e1;border:1px solid #1e293b;border-radius:10px;padding:12px 14px;font-size:12px;line-height:1.6;overflow:auto;max-height:420px;white-space:pre-wrap;word-break:break-word}
.log-ok{color:#4ade80}
.log-err{color:#f87171;font-weight:600}
.log-warn{color:#fbbf24}
.log-line{color:#cbd5e1}