/* WikiDev – Bento Dashboard */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa;
  --primary-a10: rgba(59,130,246,.1); --primary-a20: rgba(59,130,246,.2);
  --success: #10b981; --success-a10: rgba(16,185,129,.12);
  --warning: #f59e0b; --warning-a10: rgba(245,158,11,.12);
  --danger: #ef4444; --danger-a10: rgba(239,68,68,.12);
  --purple: #8b5cf6; --cyan: #06b6d4;
  --bg-body: #08080c; --bg-card: #0d0d13; --bg-elevated: #14141d;
  --bg-input: #0a0a0f; --bg-hover: #1a1a26;
  --text-primary: #f0f0f5; --text-secondary: #a1a1aa; --text-muted: #63637a;
  --border: rgba(255,255,255,.06); --border-light: rgba(255,255,255,.1);
  --radius: .5rem; --radius-lg: .625rem;
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'JetBrains Mono','Fira Code',monospace;
  --header-h: clamp(42px, 3.5vw, 52px);
  --g: clamp(6px, .5vw, 10px);
  --fs-2xs: clamp(9px, .65vw, 11px);
  --fs-xs: clamp(10px, .75vw, 12px);
  --fs-sm: clamp(11px, .85vw, 13px);
  --fs-base: clamp(12px, .92vw, 14px);
  --fs-md: clamp(13px, 1vw, 16px);
  --fs-lg: clamp(16px, 1.2vw, 20px);
  --fs-xl: clamp(20px, 1.6vw, 28px);
}

html, body { height:100%; width:100%; overflow:hidden; font-family:var(--font); background:var(--bg-body); color:var(--text-primary); -webkit-font-smoothing:antialiased; }
.mono { font-family:var(--mono); }

/* ===== Login ===== */
.login-screen { display:flex; align-items:center; justify-content:center; height:100vh; background:radial-gradient(ellipse at 50% 0%,rgba(59,130,246,.08) 0%,transparent 60%),var(--bg-body); }
.login-card { text-align:center; padding:3rem 2.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); max-width:400px; width:90%; }
.login-logo { color:var(--primary); margin-bottom:1rem; }
.login-title { font-size:2rem; font-weight:700; margin-bottom:.25rem; }
.login-subtitle { color:var(--text-secondary); font-size:.9rem; margin-bottom:2rem; }
.login-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 2rem; background:var(--primary); color:#fff; font-weight:600; font-size:.9rem; border:none; border-radius:var(--radius); cursor:pointer; transition:background .15s; }
.login-btn:hover { background:var(--primary-dark); }
.login-footer { margin-top:1.5rem; font-size:.8rem; color:var(--text-muted); }

/* ===== Dashboard Shell ===== */
.dashboard { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* Header */
.dash-header { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); padding:0 clamp(.6rem,.9vw,1.2rem); background:var(--bg-card); border-bottom:1px solid var(--border); flex-shrink:0; }
.dash-header-left { display:flex; align-items:center; gap:clamp(.3rem,.4vw,.6rem); color:var(--primary); }
.dash-header-title { font-size:var(--fs-md); font-weight:700; color:var(--text-primary); }
.dash-header-right { display:flex; align-items:center; gap:clamp(.35rem,.4vw,.6rem); }
.dash-header-name { font-size:var(--fs-sm); color:var(--text-secondary); }
.dash-header-devid { font-size:var(--fs-2xs); font-family:var(--mono); color:var(--text-muted); background:rgba(255,255,255,.04); padding:.15rem .3rem; border-radius:.2rem; }
.dash-header-avatar { width:clamp(24px,2vw,30px); height:clamp(24px,2vw,30px); border-radius:50%; background:var(--primary-a20); color:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs); font-weight:600; overflow:hidden; }
.dash-header-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.dash-header-logout { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:.2rem; border-radius:.25rem; display:flex; transition:color .15s,background .15s; }
.dash-header-logout:hover { color:var(--danger); background:var(--danger-a10); }

/* App Selector */
.app-selector { display:flex; align-items:center; gap:4px; margin-left:clamp(.3rem,.4vw,.6rem); }
.app-select { font-family:var(--font); font-size:var(--fs-sm); font-weight:500; padding:clamp(.2rem,.25vw,.3rem) clamp(.4rem,.5vw,.6rem); background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); cursor:pointer; appearance:none; outline:none; max-width:clamp(120px,14vw,220px); }
.app-new-btn { width:clamp(22px,2vw,28px); height:clamp(22px,2vw,28px); border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-elevated); color:var(--primary-light); font-size:var(--fs-md); font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.app-new-btn:hover { background:var(--primary-a10); border-color:var(--primary); }

/* Empty State */
.empty-state { flex:1; display:flex; align-items:center; justify-content:center; }
.empty-card { text-align:center; max-width:420px; color:var(--text-muted); }
.empty-card svg { margin-bottom:1rem; color:var(--text-muted); }
.empty-card h2 { font-size:var(--fs-lg); color:var(--text-primary); margin-bottom:.5rem; }
.empty-card p { font-size:var(--fs-sm); margin-bottom:1.5rem; line-height:1.5; }

/* Buttons */
.btn-primary { font-family:var(--font); font-size:var(--fs-sm); font-weight:600; padding:.4rem 1rem; background:var(--primary); color:#fff; border:none; border-radius:var(--radius); cursor:pointer; transition:background .15s; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-ghost { font-family:var(--font); font-size:var(--fs-sm); font-weight:500; padding:.4rem 1rem; background:none; color:var(--text-secondary); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; transition:all .15s; }
.btn-ghost:hover { border-color:var(--border-light); color:var(--text-primary); }
.btn-send { display:flex; align-items:center; gap:.3rem; font-family:var(--font); font-size:var(--fs-xs); font-weight:600; padding:.2rem .5rem; background:var(--primary); color:#fff; border:none; border-radius:.3rem; cursor:pointer; transition:background .15s; }
.btn-send:hover { background:var(--primary-dark); }
.btn-send:disabled { opacity:.5; cursor:not-allowed; }

/* ===== Split Layout ===== */
.split-layout { flex:1; display:flex; overflow:hidden; }
.panel-left { width:60%; padding:var(--g); overflow:hidden; }
.panel-right { width:40%; display:flex; flex-direction:column; border-left:1px solid var(--border); overflow:hidden; }

/* ===== BENTO GRID ===== */
.bento {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto 2fr 1fr 2fr;
  grid-template-areas:
    "profile  creds   rate    stats"
    "chart    chart   chart   users"
    "hourly   hourly  hourly  users"
    "activity health  appinfo users";
  gap:var(--g);
  height:100%;
  overflow:hidden;
}

/* Bento card base */
.b-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:clamp(.5rem,.65vw,.85rem);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:border-color .15s;
  min-width:0;
  min-height:0;
}
.b-card:hover { border-color:var(--border-light); }
.b-label { font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:clamp(.25rem,.3vw,.5rem); flex-shrink:0; }
.b-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(.2rem,.25vw,.4rem); flex-shrink:0; }
.b-head .b-label { margin-bottom:0; }

/* Grid areas */
.b-profile  { grid-area:profile; }
.b-creds    { grid-area:creds; }
.b-rate     { grid-area:rate; }
.b-stats    { grid-area:stats; }
.b-chart    { grid-area:chart; }
.b-hourly   { grid-area:hourly; }
.b-users    { grid-area:users; }
.b-activity { grid-area:activity; }
.b-health   { grid-area:health; }
.b-appinfo  { grid-area:appinfo; }

/* ===== Profile Card ===== */
.prof-top { display:flex; align-items:center; gap:clamp(.4rem,.5vw,.7rem); margin-bottom:clamp(.35rem,.4vw,.6rem); }
.prof-avatar { width:clamp(30px,2.6vw,40px); height:clamp(30px,2.6vw,40px); border-radius:50%; background:var(--primary-a20); color:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:700; overflow:hidden; flex-shrink:0; }
.prof-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.prof-name { font-size:var(--fs-sm); font-weight:600; line-height:1.2; }
.prof-email { font-size:var(--fs-2xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:clamp(80px,10vw,160px); }
.prof-meta { display:grid; grid-template-columns:1fr 1fr; gap:clamp(.2rem,.25vw,.4rem) clamp(.3rem,.35vw,.5rem); }
.pm { display:flex; justify-content:space-between; font-size:var(--fs-2xs); padding:clamp(.15rem,.18vw,.25rem) 0; border-bottom:1px solid var(--border); }
.pm:last-child { border-bottom:none; }
.pm-full { grid-column:1/-1; }
.pm-l { color:var(--text-muted); }
.pm-v { color:var(--text-secondary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:clamp(55px,7vw,110px); }
.pm-link { color:var(--primary-light); text-decoration:none; }
.pm-link:hover { text-decoration:underline; }

/* ===== Credentials Card ===== */
.b-creds { gap:clamp(.2rem,.22vw,.3rem); }
.cred-item { background:var(--bg-elevated); border-radius:.4rem; padding:clamp(.25rem,.3vw,.4rem) clamp(.35rem,.4vw,.55rem); }
.cred-item + .cred-item { margin-top:clamp(.15rem,.18vw,.25rem); }
.cred-tag { font-size:var(--fs-2xs); color:var(--text-muted); display:flex; align-items:center; gap:.3rem; }
.cred-team { font-size:clamp(7.5px,.55vw,9px); padding:.06rem .25rem; border-radius:.15rem; background:var(--warning-a10); color:var(--warning); }
.cred-line { display:flex; align-items:center; gap:3px; margin-top:2px; }
.cred-val { font-family:var(--mono); font-size:var(--fs-2xs); color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.cred-detail { font-size:var(--fs-2xs); color:var(--text-muted); margin-top:auto; padding-top:clamp(.15rem,.18vw,.25rem); }
.ib { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:2px; border-radius:.15rem; display:flex; transition:color .15s; flex-shrink:0; }
.ib:hover { color:var(--primary-light); }

/* ===== Rate Limit Card (3 gauges) ===== */
.b-rate { align-items:center; text-align:center; justify-content:center; }
.rate-trio { display:flex; justify-content:center; gap:clamp(.3rem,.4vw,.7rem); flex:1; align-items:center; }
.ri { display:flex; flex-direction:column; align-items:center; gap:2px; }
.ri-wrap { position:relative; width:clamp(36px,3.5vw,56px); height:clamp(36px,3.5vw,56px); }
.ri-svg { width:100%; height:100%; transform:rotate(-90deg); }
.rate-bg { fill:none; stroke:var(--bg-elevated); stroke-width:8; }
.rate-fill { fill:none; stroke:var(--primary); stroke-width:8; stroke-linecap:round; stroke-dasharray:251.33; stroke-dashoffset:251.33; transition:stroke-dashoffset .6s ease,stroke .3s; }
.ri-acct { stroke:var(--cyan); }
.ri-app { stroke:var(--purple); }
.ri-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ri-pct span { font-size:clamp(8px,.6vw,10px); font-weight:700; }
.ri-label { font-size:clamp(7px,.55vw,9px); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.ri-val { font-size:clamp(7px,.55vw,9px); color:var(--text-secondary); font-family:var(--mono); }
.rate-label { font-size:var(--fs-2xs); color:var(--text-muted); margin-top:auto; }

/* ===== Stats Card ===== */
.b-stats { gap:clamp(.3rem,.35vw,.5rem); justify-content:center; }
.st { display:flex; align-items:center; gap:clamp(.3rem,.35vw,.5rem); }
.st-n { font-size:var(--fs-md); font-weight:700; min-width:clamp(32px,3.8vw,55px); text-align:right; font-family:var(--mono); }
.st-l { font-size:var(--fs-2xs); color:var(--text-muted); min-width:clamp(28px,3.2vw,42px); }
.st-bar { flex:1; height:clamp(5px,.45vw,7px); background:var(--bg-elevated); border-radius:3px; overflow:hidden; }
.st-fill { height:100%; background:var(--primary); border-radius:3px; transition:width .4s ease; width:0; }
.st-fill.wk { background:var(--cyan); }
.st-fill.mo { background:var(--purple); }

/* ===== Chart Card ===== */
.b-chart { min-height:0; }
.b-chart canvas { flex:1; min-height:0; width:100%; }
.tab-group { display:flex; gap:1px; background:var(--bg-elevated); border-radius:.25rem; padding:1px; }
.tab { font-family:var(--font); font-size:var(--fs-2xs); font-weight:500; padding:.12rem .4rem; border:none; border-radius:.2rem; background:transparent; color:var(--text-muted); cursor:pointer; transition:all .15s; }
.tab.active { background:var(--primary-a20); color:var(--primary-light); }

/* ===== Hourly Distribution ===== */
.b-hourly { min-height:0; }
.hourly-wrap { flex:1; display:flex; flex-direction:column; min-height:0; }
.hourly-bars { flex:1; display:flex; align-items:flex-end; gap:1px; min-height:0; }
.hourly-bar { flex:1; background:var(--primary); border-radius:2px 2px 0 0; min-height:2px; transition:height .3s ease,background .3s; opacity:.7; }
.hourly-bar:hover { opacity:1; }
.hourly-bar.peak { background:var(--primary-light); opacity:1; }
.hourly-axis { display:flex; justify-content:space-between; font-size:clamp(7px,.5vw,9px); color:var(--text-muted); padding-top:2px; flex-shrink:0; }

/* ===== Users Card (tall, split) ===== */
.b-users { min-height:0; display:flex; flex-direction:column; }
.b-users-top { flex:1; display:flex; flex-direction:column; min-height:0; border-bottom:1px solid var(--border); }
.b-users-bottom { flex:1; display:flex; flex-direction:column; min-height:0; }
.user-list { flex:1; overflow-y:auto; }
.user-list::-webkit-scrollbar { width:3px; }
.user-list::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:2px; }
.user-empty { display:flex; align-items:center; justify-content:center; height:100%; font-size:var(--fs-2xs); color:var(--text-muted); }
.user-row { display:flex; align-items:center; gap:clamp(.25rem,.3vw,.45rem); padding:clamp(.2rem,.25vw,.35rem) 0; border-bottom:1px solid var(--border); font-size:var(--fs-2xs); }
.user-row:last-child { border-bottom:none; }
.user-team { font-family:var(--mono); font-weight:600; color:var(--text-primary); flex:1; }
.user-program { font-size:clamp(7.5px,.55vw,9px); font-weight:600; padding:.06rem .25rem; border-radius:.15rem; flex-shrink:0; }
.user-program.ftc { background:var(--primary-a10); color:var(--primary-light); }
.user-program.frc { background:rgba(139,92,246,.1); color:var(--purple); }
.user-ban-btn { font-family:var(--font); font-size:clamp(8px,.6vw,10px); padding:.1rem .25rem; border-radius:.18rem; border:1px solid var(--border); background:none; color:var(--text-muted); cursor:pointer; transition:all .15s; flex-shrink:0; white-space:nowrap; }
.user-ban-btn:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-a10); }
.user-ban-btn.banned { background:var(--danger-a10); color:var(--danger); border-color:rgba(239,68,68,.2); }

/* ===== Dev Ticket List ===== */
.ticket-filter-select { font-family:var(--font); font-size:var(--fs-2xs); background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border); border-radius:.25rem; padding:1px 4px; cursor:pointer; }
.dev-ticket-list { flex:1; overflow-y:auto; }
.dev-ticket-list::-webkit-scrollbar { width:3px; }
.dev-ticket-list::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:2px; }
.dt-row { display:flex; align-items:center; gap:clamp(.25rem,.3vw,.45rem); padding:clamp(.2rem,.25vw,.35rem) 0; border-bottom:1px solid var(--border); font-size:var(--fs-2xs); cursor:pointer; transition:background .12s; }
.dt-row:hover { background:var(--bg-elevated); }
.dt-row:last-child { border-bottom:none; }
.dt-status-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dt-status-dot[data-s="open"] { background:#3b82f6; }
.dt-status-dot[data-s="in_progress"] { background:#f59e0b; }
.dt-status-dot[data-s="resolved"] { background:#22c55e; }
.dt-status-dot[data-s="closed"] { background:#6b7280; }
.dt-subject { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-team { font-family:var(--mono); color:var(--text-muted); flex-shrink:0; }
.dt-date { color:var(--text-muted); flex-shrink:0; }

/* ===== Ticket Detail Modal ===== */
.ticket-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999; display:none; align-items:center; justify-content:center; }
.ticket-modal-overlay.active { display:flex; }
.ticket-modal { background:var(--bg-card); border-radius:var(--card-r); width:700px; max-width:92vw; max-height:85vh; display:flex; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.ticket-modal-left { flex:2; display:flex; flex-direction:column; border-right:1px solid var(--border); min-width:0; }
.ticket-modal-right { flex:1; padding:var(--g); overflow-y:auto; min-width:200px; }
.ticket-modal-header { display:flex; align-items:center; gap:var(--g); padding:var(--g); border-bottom:1px solid var(--border); }
.ticket-modal-header h3 { flex:1; font-size:var(--fs-sm); font-weight:600; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ticket-modal-close { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:18px; line-height:1; padding:2px; }
.ticket-modal-messages { flex:1; overflow-y:auto; padding:var(--g); display:flex; flex-direction:column; gap:clamp(.3rem,.4vw,.6rem); }
.tm-msg { padding:clamp(.3rem,.35vw,.5rem) clamp(.4rem,.5vw,.7rem); border-radius:var(--card-r); font-size:var(--fs-2xs); line-height:1.5; max-width:90%; word-break:break-word; }
.tm-msg.msg-user { background:var(--bg-elevated); align-self:flex-end; border-bottom-right-radius:3px; }
.tm-msg.msg-developer { background:rgba(59,130,246,.1); align-self:flex-start; border-bottom-left-radius:3px; }
.tm-msg.msg-system { background:rgba(245,158,11,.08); align-self:center; font-style:italic; color:var(--text-muted); text-align:center; }
.tm-msg-meta { font-size:clamp(7px,.5vw,9px); color:var(--text-muted); margin-bottom:2px; display:flex; justify-content:space-between; }
.ticket-modal-reply { padding:var(--g); border-top:1px solid var(--border); display:flex; gap:clamp(.3rem,.35vw,.5rem); align-items:flex-end; }
.ticket-modal-reply textarea { flex:1; font-family:var(--font); font-size:var(--fs-2xs); background:var(--bg-elevated); color:var(--text-primary); border:1px solid var(--border); border-radius:.3rem; padding:clamp(.2rem,.3vw,.4rem); resize:none; }
.tm-meta-group { margin-bottom:clamp(.4rem,.5vw,.7rem); }
.tm-meta-group label { display:block; font-size:clamp(7px,.5vw,9px); color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:2px; }
.tm-val { font-size:var(--fs-2xs); color:var(--text-secondary); }
.tm-select { font-family:var(--font); font-size:var(--fs-2xs); background:var(--bg-elevated); color:var(--text-primary); border:1px solid var(--border); border-radius:.25rem; padding:2px 6px; cursor:pointer; width:100%; }
.tm-reported-content { font-size:var(--fs-2xs); color:var(--text-secondary); background:var(--bg-elevated); padding:clamp(.2rem,.3vw,.4rem); border-radius:.25rem; margin-top:2px; word-break:break-word; max-height:120px; overflow-y:auto; }

/* ===== Activity Card ===== */
.act-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:1px; }
.act-list::-webkit-scrollbar { width:3px; }
.act-list::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:2px; }
.act-empty { display:flex; align-items:center; justify-content:center; height:100%; font-size:var(--fs-2xs); color:var(--text-muted); }
.act-row { display:flex; align-items:center; gap:clamp(.2rem,.25vw,.35rem); font-size:var(--fs-2xs); padding:clamp(.15rem,.18vw,.25rem) 0; border-bottom:1px solid var(--border); }
.act-row:last-child { border-bottom:none; }
.act-method { font-weight:700; font-family:var(--mono); min-width:clamp(24px,2.8vw,36px); }
.act-method.get { color:var(--success); }
.act-method.post { color:var(--warning); }
.act-method.del { color:var(--danger); }
.act-path { flex:1; font-family:var(--mono); color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-status { font-weight:600; padding:.03rem .18rem; border-radius:.12rem; }
.act-status.s2 { color:var(--success); }
.act-status.s4 { color:var(--warning); }
.act-status.s5 { color:var(--danger); }
.act-time { color:var(--text-muted); }

/* ===== Health Card ===== */
.health-row { display:flex; align-items:center; gap:clamp(.2rem,.25vw,.4rem); margin-bottom:clamp(.15rem,.2vw,.3rem); }
.status-dot { width:clamp(7px,.6vw,9px); height:clamp(7px,.6vw,9px); border-radius:50%; background:var(--text-muted); flex-shrink:0; transition:background .3s; }
.status-dot.up { background:var(--success); box-shadow:0 0 6px rgba(16,185,129,.4); }
.status-dot.down { background:var(--danger); box-shadow:0 0 6px rgba(239,68,68,.4); }
.health-txt { font-size:var(--fs-xs); font-weight:600; flex:1; }
.health-lat { font-size:var(--fs-2xs); color:var(--text-muted); font-family:var(--mono); }
.hm { display:flex; justify-content:space-between; font-size:var(--fs-2xs); padding:clamp(.1rem,.12vw,.18rem) 0; border-bottom:1px solid var(--border); color:var(--text-secondary); }
.hm:last-child, .hm:last-of-type { border-bottom:none; }
.hm span:first-child { color:var(--text-muted); }
.b-compact { padding:clamp(.4rem,.5vw,.65rem); }

/* ===== App Info Card ===== */
.ai-row { display:flex; align-items:center; gap:clamp(.25rem,.3vw,.5rem); margin-bottom:clamp(.15rem,.2vw,.3rem); }
.ai-name { font-size:var(--fs-xs); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-id { font-size:var(--fs-2xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.del-app-btn { font-family:var(--font); font-size:var(--fs-2xs); margin-top:auto; padding:clamp(.18rem,.22vw,.3rem) clamp(.4rem,.45vw,.6rem); background:none; border:1px solid rgba(239,68,68,.15); color:var(--danger); border-radius:.25rem; cursor:pointer; transition:all .15s; width:100%; }
.del-app-btn:hover { background:var(--danger-a10); border-color:rgba(239,68,68,.3); }

/* ===== Right Panel ===== */
.docs-section { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.docs-header { display:flex; align-items:center; justify-content:space-between; padding:clamp(.35rem,.4vw,.55rem) clamp(.5rem,.6vw,.8rem); border-bottom:1px solid var(--border); flex-shrink:0; background:var(--bg-card); }
.docs-title { font-size:var(--fs-base); font-weight:700; }
.docs-base { font-size:var(--fs-2xs); color:var(--text-muted); background:var(--bg-elevated); padding:.12rem .35rem; border-radius:.2rem; }
.docs-scroll { flex:1; overflow-y:auto; padding:clamp(.3rem,.35vw,.5rem) clamp(.4rem,.5vw,.7rem); }
.docs-scroll::-webkit-scrollbar { width:3px; }
.docs-scroll::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:2px; }
.doc-group { margin-bottom:clamp(.4rem,.5vw,.7rem); }
.doc-group-title { font-size:var(--fs-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding-bottom:clamp(.12rem,.15vw,.22rem); border-bottom:1px solid var(--border); margin-bottom:clamp(.12rem,.15vw,.22rem); }
.doc-item { padding:clamp(.18rem,.22vw,.32rem) clamp(.25rem,.3vw,.45rem); border-radius:.3rem; cursor:pointer; transition:background .1s; border:1px solid transparent; margin-bottom:1px; }
.doc-item:hover { background:var(--bg-hover); }
.doc-item.selected { background:var(--bg-elevated); border-color:var(--primary-a20); }
.doc-row { display:flex; align-items:center; gap:clamp(.2rem,.25vw,.4rem); }
.doc-path { font-family:var(--mono); font-size:var(--fs-2xs); color:var(--text-primary); }
.doc-desc { font-size:clamp(8px,.55vw,10px); color:var(--text-muted); line-height:1.35; }
.badge { font-size:clamp(7px,.55vw,9px); font-weight:700; padding:.06rem .22rem; border-radius:.15rem; letter-spacing:.03em; flex-shrink:0; }
.badge-get { background:var(--success-a10); color:var(--success); }
.badge-post { background:var(--warning-a10); color:var(--warning); }
.badge-del { background:var(--danger-a10); color:var(--danger); }
.panel-divider { height:1px; background:var(--border); flex-shrink:0; }

/* Builder */
.builder-section { height:clamp(170px,26vh,300px); display:flex; flex-direction:column; flex-shrink:0; background:var(--bg-card); }
.builder-header { display:flex; align-items:center; justify-content:space-between; padding:clamp(.25rem,.3vw,.4rem) clamp(.4rem,.5vw,.7rem); border-bottom:1px solid var(--border); flex-shrink:0; }
.builder-title { font-size:var(--fs-sm); font-weight:700; }
.builder-bar { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.builder-method { font-size:var(--fs-sm); font-weight:600; font-family:var(--mono); padding:clamp(.2rem,.25vw,.35rem) clamp(.3rem,.35vw,.5rem); background:var(--bg-elevated); border:none; color:var(--success); cursor:pointer; appearance:none; outline:none; }
.builder-url { flex:1; font-family:var(--mono); font-size:var(--fs-sm); padding:clamp(.2rem,.25vw,.35rem) clamp(.3rem,.35vw,.5rem); background:transparent; border:none; color:var(--text-primary); outline:none; }
.builder-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.btab { font-family:var(--font); font-size:var(--fs-xs); font-weight:500; padding:clamp(.12rem,.15vw,.22rem) clamp(.4rem,.5vw,.7rem); border:none; background:none; color:var(--text-muted); cursor:pointer; transition:color .12s; border-bottom:2px solid transparent; }
.btab.active { color:var(--primary-light); border-bottom-color:var(--primary); }
.builder-pane { flex:1; overflow:auto; padding:clamp(.25rem,.3vw,.4rem) clamp(.4rem,.5vw,.7rem); min-height:0; }
.builder-pane::-webkit-scrollbar { width:3px; }
.builder-pane::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:2px; }
.header-row { display:grid; grid-template-columns:clamp(70px,8vw,110px) 1fr; gap:clamp(.12rem,.15vw,.25rem); margin-bottom:clamp(.12rem,.15vw,.22rem); }
.h-key, .h-val { font-family:var(--mono); font-size:var(--fs-2xs); padding:clamp(.15rem,.18vw,.25rem) clamp(.25rem,.3vw,.4rem); background:var(--bg-input); border:1px solid var(--border); border-radius:.2rem; color:var(--text-secondary); outline:none; }
.h-key { color:var(--text-muted); }
.h-val:focus { border-color:var(--primary-a20); }
.body-editor { width:100%; height:100%; resize:none; font-family:var(--mono); font-size:var(--fs-2xs); line-height:1.5; padding:clamp(.25rem,.3vw,.4rem); background:var(--bg-input); border:1px solid var(--border); border-radius:.3rem; color:var(--text-secondary); outline:none; }
.body-editor:focus { border-color:var(--primary-a20); }
.resp-bar { display:flex; align-items:center; gap:clamp(.3rem,.35vw,.5rem); margin-bottom:clamp(.12rem,.15vw,.25rem); font-size:var(--fs-2xs); }
.resp-status { font-weight:700; padding:.08rem .3rem; border-radius:.15rem; }
.resp-status.s2xx { background:var(--success-a10); color:var(--success); }
.resp-status.s4xx { background:var(--warning-a10); color:var(--warning); }
.resp-status.s5xx { background:var(--danger-a10); color:var(--danger); }
.resp-time, .resp-size { color:var(--text-muted); }
.resp-body { flex:1; overflow:auto; font-family:var(--mono); font-size:var(--fs-2xs); line-height:1.5; color:var(--text-muted); white-space:pre-wrap; word-break:break-all; }
.resp-body::-webkit-scrollbar { width:3px; }
.resp-body::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:2px; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.2rem,1.5vw,2rem); max-width:400px; width:90%; }
.modal-card h3 { font-size:var(--fs-md); margin-bottom:.5rem; }
.modal-card p { font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:1rem; line-height:1.5; }
.modal-input { width:100%; font-family:var(--font); font-size:var(--fs-sm); padding:.5rem .7rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); outline:none; margin-bottom:1rem; }
.modal-input:focus { border-color:var(--primary-a20); }
.modal-actions { display:flex; justify-content:flex-end; gap:.5rem; }

/* Responsive */
@media (max-width:1200px) {
  .bento {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 2fr 1fr 2fr;
    grid-template-areas:
      "profile  creds   rate"
      "chart    chart   users"
      "hourly   hourly  users"
      "activity health  appinfo";
  }
  .b-stats { display:none; }
}
@media (max-width:900px) {
  .split-layout { flex-direction:column; }
  .panel-left { width:100%; flex:1; overflow-y:auto; }
  .panel-right { width:100%; height:50vh; border-left:none; border-top:1px solid var(--border); }
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    grid-template-areas:
      "profile  creds"
      "rate     stats"
      "chart    chart"
      "hourly   hourly"
      "users    users"
      "activity health";
    overflow:auto;
  }
  .b-stats { display:flex; }
  .b-appinfo { display:none; }
}