/* ============================================================
   Panda Network — shared design system (matches homepage)
   Tokens: --bg #06080a · --jade #3ff59a · --violet #8f7bff
   Fonts: Unbounded (display) / Space Grotesk (body) / IBM Plex Mono (data)
   ============================================================ */
:root{
  --bg:#06080a; --bg-2:#0a0d10; --surface:#0e1216; --surface-2:#131920;
  --line:rgba(180,255,220,.09); --line-2:rgba(180,255,220,.16);
  --text:#e8f1ec; --muted:#8fa39a; --dim:#5c6d66;
  --jade:#3ff59a; --jade-dim:rgba(63,245,154,.14);
  --violet:#8f7bff; --violet-dim:rgba(143,123,255,.14);
  --red:#ff6b7a; --red-dim:rgba(255,107,122,.14);
  --amber:#ffcf5c; --amber-dim:rgba(255,207,92,.14);
  --grad:linear-gradient(92deg,var(--jade),#5cd9ff 55%,var(--violet));
  --display:'Unbounded',sans-serif; --body:'Space Grotesk',sans-serif; --mono:'IBM Plex Mono',monospace;
  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  --side-w:248px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--jade);color:#04130b}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--jade);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700}
h2{font-size:1.1rem;font-weight:700}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2.2rem}
.mb-2{margin-bottom:1rem}
.flex{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.right{margin-left:auto}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.72em 1.35em;border-radius:999px;font-weight:600;font-size:.88rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--jade);color:#04130b}
.btn-primary:hover{box-shadow:0 8px 26px -8px rgba(63,245,154,.55)}
.btn-violet{background:var(--violet);color:#0d0722}
.btn-violet:hover{box-shadow:0 8px 26px -8px rgba(143,123,255,.55)}
.btn-ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--jade)}
.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,107,122,.35)}
.btn-danger:hover{box-shadow:0 8px 22px -10px rgba(255,107,122,.5)}
.btn-sm{padding:.5em 1em;font-size:.78rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- Badges / pills ---------- */
.badge{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;padding:.35em .8em;border-radius:999px;border:1px solid}
.badge-ok{color:var(--jade);background:var(--jade-dim);border-color:rgba(63,245,154,.35)}
.badge-warn{color:var(--amber);background:var(--amber-dim);border-color:rgba(255,207,92,.35)}
.badge-bad{color:var(--red);background:var(--red-dim);border-color:rgba(255,107,122,.35)}
.badge-dim{color:var(--muted);background:rgba(255,255,255,.03);border-color:var(--line-2)}
.prem{color:var(--amber);font-family:var(--mono);font-size:.62rem;margin-left:.4em}

/* ---------- App shell ---------- */
.app{display:block;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:1.2rem 1rem;z-index:50;transition:transform .4s var(--ease)}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:.95rem}
.logo .mark{width:30px;height:30px;flex:none}
.logo-dot{color:var(--jade)}
.side-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:1.4rem 0 .5rem;padding-left:.6rem}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border-radius:var(--r-sm);color:var(--muted);font-size:.9rem;font-weight:500;transition:.25s;border:1px solid transparent}
.side-nav a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.side-nav a.on{color:var(--jade);background:var(--jade-dim);border-color:rgba(63,245,154,.25)}
.side-nav .ni{width:18px;text-align:center;opacity:.85}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:.7rem;padding-top:1rem;border-top:1px solid var(--line)}
.side-switch{font-family:var(--mono);font-size:.72rem;color:var(--violet)}
.side-switch:hover{text-decoration:underline}
.side-user{display:flex;gap:.6rem;align-items:center;min-width:0}
.side-ava{width:34px;height:34px;flex:none;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.72rem;color:#04130b}
.side-mail{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-main{margin-left:var(--side-w);padding:clamp(1.2rem,3vw,2.4rem);min-height:100vh}
.sidebar-toggle{display:none;position:fixed;top:14px;left:14px;z-index:60;width:42px;height:42px;border-radius:10px;background:var(--surface);border:1px solid var(--line-2)}
.sidebar-toggle span{display:block;width:18px;height:2px;background:var(--text);margin:3px auto;transition:.3s}

/* ---------- Page head ---------- */
.page-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.page-head .sub{color:var(--muted);font-size:.88rem;width:100%}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--jade)}

/* ---------- Cards & stat widgets ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.3rem;position:relative}
.card + .card{margin-top:1rem}
.card h2{margin-bottom:.9rem}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-bottom:1.4rem}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.1rem 1.2rem;position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.stat-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.stat-card::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--grad);opacity:.6}
.stat-card small{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block}
.stat-card b{font-family:var(--mono);font-weight:600;font-size:1.45rem;display:block;margin-top:.3rem}
.stat-card .delta{font-family:var(--mono);font-size:.66rem;color:var(--jade)}
.stat-card.violet::after{background:var(--violet)}
.stat-card.amber::after{background:var(--amber)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:600px}
th{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line-2);white-space:nowrap;cursor:pointer;user-select:none}
th.nosort{cursor:default}
th .arr{opacity:.5;font-size:.7em}
td{padding:.75rem 1rem;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s}
tbody tr:hover{background:rgba(255,255,255,.02)}
td b{color:var(--text);font-weight:600}
.tools{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem;align-items:center}
.search-input{flex:1;min-width:180px}

/* ---------- Forms ---------- */
label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 .4rem}
.field{margin-bottom:1rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=date],select,textarea{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--text);font-family:var(--body);font-size:.92rem;padding:.7em .9em;transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px rgba(63,245,154,.12)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
textarea{min-height:96px;resize:vertical}
.check{display:flex;gap:.6rem;align-items:center;font-size:.86rem;color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--body)}
.check input{width:16px;height:16px;accent-color:var(--jade)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.help{font-size:.76rem;color:var(--dim);margin-top:.35rem}
.strength{height:5px;border-radius:999px;background:var(--bg-2);margin-top:.5rem;overflow:hidden}
.strength i{display:block;height:100%;width:0;border-radius:999px;background:var(--red);transition:width .35s var(--ease),background .35s}
.strength-label{font-family:var(--mono);font-size:.62rem;color:var(--dim);margin-top:.3rem}

/* ---------- Auth pages ---------- */
.auth-body{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem;position:relative;overflow:hidden}
.auth-glow{position:fixed;width:44vw;min-width:340px;aspect-ratio:1;border-radius:50%;filter:blur(110px);opacity:.16;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
.auth-glow.g1{background:var(--jade);top:-14%;left:-8%}
.auth-glow.g2{background:var(--violet);bottom:-18%;right:-8%;animation-delay:-7s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(4%,7%)}}
.auth-wrap{width:min(430px,100%);position:relative;z-index:1}
.auth-logo{justify-content:center;margin-bottom:1.4rem}
.auth-card{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:var(--r-lg);padding:2rem 1.8rem;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.auth-card h1{font-size:1.35rem;text-align:center}
.auth-card .sub{text-align:center;color:var(--muted);font-size:.86rem;margin:.5rem 0 1.5rem}
.auth-alt{text-align:center;font-size:.84rem;color:var(--muted);margin-top:1.2rem}
.auth-alt a{color:var(--jade)}
.role-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.role-pick input{position:absolute;opacity:0;pointer-events:none}
.role-pick span{display:block;text-align:center;padding:.65em .3em;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:.8rem;color:var(--muted);transition:.25s;cursor:pointer}
.role-pick input:checked + span{border-color:var(--jade);color:var(--jade);background:var(--jade-dim)}

/* ---------- Flash messages ---------- */
.flash-stack{position:sticky;top:0;z-index:40;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.auth-body .flash-stack{position:static}
.flash{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:var(--r-sm);font-size:.88rem;border:1px solid;animation:flashin .4s var(--ease)}
@keyframes flashin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
.flash-success{background:var(--jade-dim);border-color:rgba(63,245,154,.35);color:var(--jade)}
.flash-error{background:var(--red-dim);border-color:rgba(255,107,122,.35);color:var(--red)}
.flash-info{background:var(--violet-dim);border-color:rgba(143,123,255,.35);color:var(--violet)}
.flash-x{margin-left:auto;font-size:1.1rem;opacity:.7}

/* ---------- Code / embed boxes ---------- */
.codebox{position:relative;background:#05070a;border:1px solid var(--line-2);border-radius:var(--r-md);padding:1rem 1.1rem;font-family:var(--mono);font-size:.76rem;color:#b9e8cf;overflow-x:auto;white-space:pre;line-height:1.6}
.codebox .copy-btn{position:absolute;top:.6rem;right:.6rem;font-family:var(--mono);font-size:.66rem;padding:.45em .9em;border-radius:999px;background:var(--jade);color:#04130b;font-weight:600;transition:.25s}
.codebox .copy-btn:hover{box-shadow:0 6px 18px -6px rgba(63,245,154,.6)}
.step-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--violet);border:1px solid rgba(143,123,255,.35);border-radius:999px;padding:.3em .9em;margin-bottom:.5rem}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(3,5,7,.7);backdrop-filter:blur(4px);z-index:80;display:none;place-items:center;padding:1rem}
.modal-back.open{display:grid}
.modal{width:min(560px,100%);background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.6rem;max-height:90vh;overflow-y:auto;animation:modalin .35s var(--ease)}
@keyframes modalin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1}}
.modal h2{margin-bottom:1.1rem}
.modal-close{float:right;font-size:1.3rem;color:var(--dim)}

/* ---------- Pager ---------- */
.pager{display:flex;gap:.35rem;margin-top:1rem;flex-wrap:wrap}
.pager-btn{font-family:var(--mono);font-size:.76rem;min-width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:8px;color:var(--muted);transition:.25s}
.pager-btn:hover{border-color:var(--jade);color:var(--jade)}
.pager-btn.on{background:var(--jade);color:#04130b;border-color:var(--jade)}
.pager-gap{color:var(--dim);align-self:center}

/* ---------- Reveal (subtle) ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Misc ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line);font-size:.86rem}
.kv:last-child{border-bottom:0}
.kv b{font-family:var(--mono);font-weight:600}
.chart-box{height:280px;position:relative}
.chart-box canvas{max-height:100%}
.empty{padding:2.4rem 1rem;text-align:center;color:var(--dim);font-size:.9rem}
.empty b{display:block;font-family:var(--display);color:var(--muted);margin-bottom:.4rem}
hr.sep{border:0;border-top:1px solid var(--line);margin:1.3rem 0}
.tag-mono{font-family:var(--mono);font-size:.72rem;background:var(--bg-2);border:1px solid var(--line-2);border-radius:6px;padding:.2em .55em;color:var(--jade)}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}
  .sidebar-toggle{display:block}
  .app-main{margin-left:0;padding-top:4.4rem}
  .split,.form-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
}