/* ============================================================================
   Delego console — product UI shell. Dark surface (the product lives on ink).
   Tokens from ../../colors_and_type.css (linked first).
   ============================================================================ */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ink-1000);color:var(--fg);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased}
#root{height:100vh}
::selection{background:rgba(75,61,245,.4);color:#fff}
button{font-family:inherit}

.app{display:grid;grid-template-columns:236px 1fr;height:100vh;overflow:hidden}

/* ---- sidebar ------------------------------------------------------------- */
.side{background:var(--ink-950);border-right:1px solid var(--ink-800);display:flex;flex-direction:column;padding:16px 12px}
.side-brand{display:flex;align-items:center;gap:9px;padding:8px 8px 16px;font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.035em;color:#F3F5FA}
.side-brand img{width:26px;height:26px}
.side-sec{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);padding:14px 10px 7px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--fg-2);font-size:14px;cursor:pointer;transition:all var(--dur) var(--ease);border:none;background:none;width:100%;text-align:left}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item:hover{background:var(--ink-850);color:var(--fg)}
.nav-item.active{background:var(--ink-850);color:#fff}
.nav-item.active svg{color:var(--indigo-400)}
.nav-badge{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--approval);color:#1a1408;border-radius:999px;padding:1px 7px;font-weight:600}
.side-foot{margin-top:auto;border-top:1px solid var(--ink-800);padding-top:12px}
.ws{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer}
.ws:hover{background:var(--ink-850)}
.ws-logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--indigo-400),var(--indigo-600));display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px}

/* ---- main ---------------------------------------------------------------- */
.main{display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;gap:16px;padding:0 26px;height:60px;border-bottom:1px solid var(--ink-800);flex-shrink:0;background:var(--ink-950)}
.topbar h1{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0}
.crumb{font-family:var(--font-mono);font-size:12px;color:var(--ink-500)}
.search{display:flex;align-items:center;gap:9px;background:var(--ink-900);border:1px solid var(--ink-700);border-radius:10px;padding:8px 12px;width:300px;color:var(--fg-muted);font-size:13px}
.search svg{width:15px;height:15px}
.env{display:inline-flex;align-items:center;gap:7px;background:var(--ink-850);border:1px solid var(--ink-700);border-radius:8px;padding:6px 11px;font-size:12.5px;color:var(--fg-2);cursor:pointer}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3DEBB6,#06C98C);display:grid;place-items:center;color:#062a1f;font-weight:600;font-size:12px}
.content{flex:1;overflow-y:auto;padding:26px}
.content-wrap{max-width:1080px;margin:0 auto}

/* ---- shared bits --------------------------------------------------------- */
.card{background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--r-lg)}
.mono{font-family:var(--font-mono)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11.5px;font-weight:500;padding:3px 9px 3px 7px;border-radius:999px;border:1px solid;white-space:nowrap}
.pill svg{width:12px;height:12px}
.pill-allow{color:#3DEBB6;background:rgba(6,201,140,.10);border-color:rgba(6,201,140,.30)}
.pill-appr{color:#F5B53F;background:rgba(245,165,36,.10);border-color:rgba(245,165,36,.30)}
.pill-deny{color:#F0728A;background:rgba(240,85,106,.10);border-color:rgba(240,85,106,.30)}
.pill-indigo{color:#9A90FA;background:rgba(75,61,245,.12);border-color:rgba(106,95,246,.32)}
.pill-neutral{color:var(--fg-2);background:var(--ink-850);border-color:var(--ink-700)}

.btn{font-size:13.5px;font-weight:500;border-radius:9px;padding:8px 14px;border:1px solid transparent;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--indigo-500);color:#fff}
.btn-primary:hover{background:var(--indigo-600)}
.btn-ghost{background:var(--ink-850);color:var(--fg);border-color:var(--ink-700)}
.btn-ghost:hover{background:var(--ink-800);border-color:var(--ink-600)}
.btn-allow{background:rgba(6,201,140,.14);color:#3DEBB6;border-color:rgba(6,201,140,.34)}
.btn-allow:hover{background:rgba(6,201,140,.22)}
.btn-deny{background:rgba(240,85,106,.12);color:#F0728A;border-color:rgba(240,85,106,.32)}
.btn-deny:hover{background:rgba(240,85,106,.2)}
.btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}

.page-head{margin-bottom:22px}
.page-head .eb{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.page-head h2{font-size:23px;font-weight:600;letter-spacing:-.022em;margin:8px 0 0}
.page-head p{font-size:14px;color:var(--fg-2);margin:8px 0 0;max-width:60ch;line-height:1.55}

.fadein{animation:fadein .35s var(--ease) both}
@keyframes fadein{from{opacity:.4}to{opacity:1}}

/* scrollbar */
.content::-webkit-scrollbar{width:10px}
.content::-webkit-scrollbar-thumb{background:var(--ink-700);border-radius:10px;border:3px solid var(--ink-1000)}