/* Ultra Dark SaaS UI - single file */
:root{
  --bg:#060b16; --bg2:#081226;
  --stroke:rgba(255,255,255,.09); --stroke2:rgba(255,255,255,.06);
  --txt:#e9f0ff; --muted:#9bb0d0; --muted2:#7f93b3;
  --blue:#1d4ed8; --purple:#7c3aed; --teal:#06b6d4;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --shadow: 0 30px 90px rgba(0,0,0,.55);
  --radius:18px; --blur:18px;
  --sidebar:280px; --topbar:64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(29,78,216,.32), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(124,58,237,.24), transparent 52%),
    radial-gradient(900px 600px at 30% 110%, rgba(6,182,212,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.frameGlow:before{content:"";position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(40,120,255,.25), inset 0 0 90px rgba(40,120,255,.35);z-index:1}
.bgDots{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.10) 1px, transparent 1px),
    radial-gradient(circle at 70% 45%, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:620px 420px, 820px 520px, 980px 680px;
}
.network{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background: radial-gradient(circle at 20% 30%, rgba(6,182,212,.10), transparent 55%),
              radial-gradient(circle at 72% 40%, rgba(124,58,237,.08), transparent 58%);
}
.app{position:relative;z-index:2;display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 16px;background:linear-gradient(180deg, rgba(11,18,33,.82), rgba(8,14,26,.62));border-right:1px solid var(--stroke2);backdrop-filter:blur(var(--blur))}
.brand{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;border-bottom:1px solid var(--stroke2);margin-bottom:14px}
.brand .mark{width:34px;height:34px;border-radius:12px;background:radial-gradient(circle at 30% 30%, rgba(6,182,212,.9), rgba(29,78,216,.9), rgba(124,58,237,.9));box-shadow:0 10px 30px rgba(29,78,216,.35)}
.brand .title{font-weight:900}
.brand .sub{margin-top:2px;color:var(--muted2);font-size:12px}
.sectionTitle{margin:16px 10px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:rgba(155,176,208,.75)}
.navItem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;color:rgba(233,240,255,.88);border:1px solid transparent}
.navItem:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
.navItem.active{background:rgba(6,182,212,.10);border-color:rgba(6,182,212,.20);box-shadow:inset 0 0 0 1px rgba(6,182,212,.12)}
.ico{width:18px;height:18px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);display:inline-block}
.balance{position:absolute;left:16px;right:16px;bottom:14px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--stroke2)}
.balance b{font-size:22px}
.btnLink{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.main{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:var(--topbar);display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--stroke2);background:linear-gradient(180deg, rgba(9,16,30,.55), rgba(9,16,30,.18));backdrop-filter:blur(var(--blur))}
.search{width:520px;max-width:52vw;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.search input{flex:1;background:transparent;border:0;outline:0;color:var(--txt)}
.pills{display:flex;gap:10px;align-items:center}
.pill{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.avatar{width:30px;height:30px;border-radius:999px;background:rgba(124,58,237,.25);border:1px solid rgba(124,58,237,.25);display:grid;place-items:center;font-weight:900}
.content{padding:22px 24px 40px}
.h1{font-size:28px;font-weight:950;margin:0}
.subtitle{color:var(--muted);margin-top:6px;font-size:13px}
.grid2{margin-top:18px;display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.card{border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);backdrop-filter:blur(var(--blur))}
.cardHeader{padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;gap:10px}
.cardTitle{display:flex;align-items:center;gap:10px;font-weight:900}
.badge{padding:6px 10px;border-radius:999px;font-size:11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.badge.teal{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.25)}
.badge.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25)}
.body{padding:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(155,176,208,.8);margin-bottom:6px}
.input,select,textarea{width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);color:var(--txt);outline:none}
textarea{min-height:96px;resize:vertical}
.drop{margin-top:10px;border-radius:16px;border:1px dashed rgba(124,58,237,.45);background:rgba(124,58,237,.10);padding:18px;text-align:center}
.hr{height:1px;background:rgba(255,255,255,.06);margin:14px 0}
.matrixSearch{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.matrixSearch input{flex:1;background:transparent;border:0;outline:0;color:var(--txt)}
.gridCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);padding:12px;cursor:pointer;transition:transform .12s ease;border-color .12s ease;background .12s ease;min-height:74px}
.opt:hover{transform:translateY(-1px);border-color:rgba(6,182,212,.22)}
.opt .name{font-weight:900;font-size:13px}
.opt .meta{color:var(--muted2);font-size:12px;margin-top:4px}
.opt .cr{position:absolute;right:10px;bottom:10px;font-weight:950;color:rgba(6,182,212,.95)}
.opt.active{border-color:rgba(6,182,212,.45);background:rgba(6,182,212,.10);box-shadow:0 14px 40px rgba(6,182,212,.10)}
.opt.active .cr{color:rgba(34,197,94,.95)}
.prBtn{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);cursor:pointer;font-weight:900;font-size:12px}
.prBtn.active{border-color:rgba(29,78,216,.55);background:rgba(29,78,216,.18)}
.bigBtn{width:100%;margin-top:12px;padding:14px 16px;border-radius:16px;border:1px solid rgba(124,58,237,.45);background:linear-gradient(90deg, rgba(29,78,216,.92), rgba(124,58,237,.92));color:#fff;font-weight:950;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.bigBtn:hover{filter:brightness(1.06)}
.note{color:rgba(155,176,208,.85);font-size:12px;margin-top:8px;text-align:center}
@media (max-width:1100px){.app{grid-template-columns:84px 1fr}.brand .title,.brand .sub,.sectionTitle,.navItem span,.balance{display:none}.navItem{justify-content:center}.search{display:none}}
@media (max-width:980px){.grid2{grid-template-columns:1fr}.gridCards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.row{grid-template-columns:1fr}.gridCards{grid-template-columns:1fr}}
