:root{
  --bg:#04110f;
  --bg-soft:#071c19;
  --surface:#0a2824;
  --surface-2:#0d342f;
  --surface-3:#103f39;
  --surface-glass:rgba(8,43,39,.78);
  --line:rgba(129,255,230,.12);
  --line-strong:rgba(129,255,230,.24);
  --mint:#28d8bd;
  --mint-2:#16b79f;
  --mint-3:#8af7e2;
  --mint-soft:rgba(40,216,189,.10);
  --text:#f6fffd;
  --text-soft:#c9ded9;
  --muted:#7e9d96;
  --muted-2:#63837c;
  --danger:#ff5a67;
  --warning:#ffc46c;
  --shadow-sm:0 10px 28px rgba(0,0,0,.16);
  --shadow:0 22px 60px rgba(0,0,0,.28);
  --sidebar:296px;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden}
body{margin:0;min-height:100vh;max-width:100%;overflow-x:hidden;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:
  radial-gradient(circle at 88% 3%,rgba(40,216,189,.12),transparent 28%),
  radial-gradient(circle at 2% 76%,rgba(22,183,159,.08),transparent 28%),
  linear-gradient(155deg,#082521 0%,#041411 52%,#061d1a 100%);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -10%,rgba(116,255,227,.04),transparent 36%);z-index:0}
a{color:inherit}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.ico-svg{display:block;flex:0 0 auto}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.is-hidden{display:none!important}

/* TOPBAR */
.topbar{height:76px;padding:0 16px;display:flex;align-items:center;gap:11px;background:rgba(3,20,18,.82);backdrop-filter:blur(20px) saturate(130%);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:0 8px 28px rgba(0,0,0,.08)}
.menu-btn,.logout-btn,.icon-btn{display:grid;place-items:center;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.025));color:#eafffb;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.menu-btn,.logout-btn{width:46px;height:46px;border-radius:15px}
.logout-btn{margin-left:auto;text-decoration:none}
.menu-btn:hover,.logout-btn:hover,.icon-btn:hover{transform:translateY(-1px);border-color:var(--line-strong);background:var(--mint-soft);color:var(--mint-3)}
.brand-mini{display:flex;align-items:center;gap:11px;min-width:0;overflow:hidden}
.brand-mini img{width:45px;height:45px;min-width:45px;max-width:45px;object-fit:contain;border-radius:14px;background:linear-gradient(145deg,#041210,#0a2d29);padding:5px;border:1px solid rgba(138,247,226,.19);box-shadow:0 9px 22px rgba(0,0,0,.18)}
.brand-mini>div{min-width:0}.brand-mini b{display:block;font-size:15px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-mini span{display:block;margin-top:5px;color:var(--mint);font-size:10px;font-weight:850;letter-spacing:.02em}
.api-pill{display:none;align-items:center;gap:8px;margin-left:auto;border:1px solid var(--line);padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.035);color:#bfece4;font-size:11px;font-weight:750;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(40,216,189,.09),0 0 18px rgba(40,216,189,.42)}

/* DRAWER */
.drawer{position:fixed;left:0;top:0;bottom:0;width:min(87vw,320px);max-width:320px;z-index:80;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(7,49,44,.995),rgba(3,25,22,.997));border-right:1px solid var(--line);transform:translateX(-104%);transition:transform .24s cubic-bezier(.22,.8,.23,1);box-shadow:34px 0 90px rgba(0,0,0,.45);overflow:hidden}
.drawer::after{content:"";position:absolute;inset:auto -80px 9% auto;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,rgba(40,216,189,.10),transparent 70%);pointer-events:none}
.menu-open .drawer{transform:translateX(0)}
.overlay{position:fixed;inset:0;z-index:70;background:rgba(0,9,8,.67);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.2s}.menu-open .overlay{opacity:1;visibility:visible}
.drawer-brand{display:flex;align-items:center;gap:13px;padding:21px 17px 18px;border-bottom:1px solid var(--line);min-height:102px;overflow:hidden}
.logo-ring{width:62px;height:62px;min-width:62px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(40,216,189,.18),rgba(255,255,255,.025));border:1px solid rgba(138,247,226,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.18);padding:6px;overflow:hidden}
.logo-ring img{display:block;width:50px;height:50px;min-width:50px;max-width:50px;object-fit:contain;border-radius:14px;margin:0;padding:0;transform:none}
.drawer-brand>div:last-child{min-width:0;overflow:hidden}.drawer-brand h2{font-size:18px;line-height:1.1;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer-brand span{font-size:9px;color:#78dfd0;letter-spacing:.19em;font-weight:900}
.nav{padding:11px 11px 15px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(138,247,226,.12) transparent}
.nav .section{padding:15px 11px 7px;color:#608a82;font-size:9px;letter-spacing:.19em;font-weight:900}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 10px;margin:3px 0;border-radius:15px;color:#d8ece8;text-decoration:none;border:1px solid transparent;transition:.18s;font-size:13px;font-weight:720;position:relative;overflow:hidden}
.nav a::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,216,189,.08),transparent);opacity:0;transition:.18s;pointer-events:none}
.nav a:hover{background:rgba(255,255,255,.03);color:#fff}.nav a:hover::after{opacity:1}
.nav a.active{background:linear-gradient(90deg,rgba(40,216,189,.15),rgba(40,216,189,.035));border-color:rgba(40,216,189,.14);box-shadow:inset 3px 0 0 var(--mint),0 9px 22px rgba(0,0,0,.08);color:#fff}
.nav-ico{width:36px;height:36px;min-width:36px;border-radius:11px;background:rgba(255,255,255,.04);display:grid;place-items:center;color:#8bded2;border:1px solid rgba(255,255,255,.02)}
.nav a.active .nav-ico{background:rgba(40,216,189,.12);color:var(--mint-3);border-color:rgba(40,216,189,.10)}
.drawer-foot{margin-top:auto;padding:13px;position:relative;z-index:1}.profile-box{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.avatar{width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,var(--mint-3),var(--mint-2));display:grid;place-items:center;color:#06392f;font-weight:950;box-shadow:0 8px 22px rgba(22,183,159,.18)}
.profile-box b{font-size:13px}.profile-box .muted{font-size:10px;margin-top:3px}.powered{text-align:center;color:#668c84;font-size:10px;margin-top:12px}.developer-link,.developer-link:visited{text-decoration:none;font-weight:900;color:#68ead8}.developer-link:hover{color:#9cffee}

/* LAYOUT */
.layout{max-width:1280px;margin:0 auto;padding:24px 14px 66px;position:relative;z-index:1}
.hero{display:grid;gap:18px;padding:24px 20px;border:1px solid var(--line);border-radius:var(--radius-xl);background:linear-gradient(135deg,rgba(15,68,61,.93),rgba(5,31,28,.95));box-shadow:var(--shadow);position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 35%);z-index:-1}
.hero::after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-170px;top:-215px;background:radial-gradient(circle,rgba(71,239,211,.20),transparent 67%);pointer-events:none;z-index:-1}
.hero-copy{min-width:0}.eyebrow,.panel-kicker{color:#76e9d8;letter-spacing:.18em;font-size:9px;font-weight:950;text-transform:uppercase}.hero .developer-link{border-bottom:1px solid rgba(104,234,216,.32)}
.hero h1,.page-title h1{font-size:31px;line-height:1.06;margin:10px 0 8px;letter-spacing:-.035em}.hero p,.page-title p{margin:0;color:var(--muted);line-height:1.58;font-size:13px;max-width:760px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-weight:800;font-size:11px;color:#e0f8f3;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.integration-card{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid rgba(40,216,189,.18);border-radius:18px;background:linear-gradient(135deg,rgba(40,216,189,.12),rgba(255,255,255,.022));position:relative;z-index:2;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.integration-icon{width:49px;height:49px;border-radius:15px;display:grid;place-items:center;background:rgba(40,216,189,.12);color:var(--mint-3);flex:0 0 auto;border:1px solid rgba(40,216,189,.1)}
.integration-card span,.metric span{display:block;color:#86b4ac;font-size:8px;letter-spacing:.14em;font-weight:950}.integration-card strong{display:block;font-size:14px;margin:5px 0}.integration-card small{display:block;color:#77e4d3;font-size:10px;overflow-wrap:anywhere}

/* DASHBOARD */
.metric-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:14px!important;width:100%!important;align-items:stretch!important}
.metric{min-width:0!important;min-height:102px!important;display:flex!important;align-items:center!important;gap:12px!important;padding:15px 13px!important;border:1px solid var(--line)!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(11,52,47,.95),rgba(5,30,27,.96))!important;overflow:hidden!important;position:relative!important;box-shadow:var(--shadow-sm)!important}
.metric::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:4px;background:linear-gradient(var(--mint-3),var(--mint-2));opacity:.65}
.metric::after{content:"";position:absolute;width:110px;height:110px;right:-50px;top:-58px;border-radius:50%;background:radial-gradient(circle,rgba(40,216,189,.09),transparent 70%);pointer-events:none}
.metric-ico{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:13px!important;display:grid!important;place-items:center!important;background:linear-gradient(145deg,rgba(40,216,189,.13),rgba(40,216,189,.06))!important;color:#75eedc!important;border:1px solid rgba(40,216,189,.09)!important}
.metric>div:last-child{min-width:0;position:relative;z-index:1}.metric strong{display:block!important;font-size:24px!important;line-height:1.02!important;margin:5px 0 3px!important;white-space:normal!important;overflow-wrap:anywhere!important;letter-spacing:-.02em}.metric strong.status-text{font-size:13px!important;letter-spacing:0!important}.metric small{display:block!important;font-size:9px!important;color:#6f968f!important;line-height:1.35!important}

/* PANELS */
.panel{margin-top:18px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(9,44,40,.965),rgba(4,27,24,.97));box-shadow:0 18px 50px rgba(0,0,0,.18);overflow:hidden;position:relative}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(138,247,226,.18),transparent);pointer-events:none}
.panel-head{padding:18px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(90deg,rgba(40,216,189,.05),transparent 55%)}
.panel-head h2{margin:5px 0 0;font-size:18px;letter-spacing:-.015em}.panel-body{padding:18px}.panel-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(40,216,189,.09);color:var(--mint-3);border:1px solid rgba(40,216,189,.11)}
.quick-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding:16px!important}
.quick,.quick:visited{display:flex!important;align-items:center!important;gap:11px!important;padding:14px!important;border-radius:17px!important;border:1px solid var(--line)!important;background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.015))!important;text-decoration:none!important;color:#f1fbf9!important;transition:transform .18s ease,border-color .18s ease,background .18s ease!important;min-width:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.quick:hover{transform:translateY(-2px);border-color:var(--line-strong)!important;background:rgba(40,216,189,.055)!important}
.quick>span{width:42px!important;height:42px!important;flex:0 0 42px!important;border-radius:13px!important;background:rgba(40,216,189,.10)!important;display:grid!important;place-items:center!important;color:var(--mint-3)!important;border:1px solid rgba(40,216,189,.08)!important}.quick.primary{background:linear-gradient(135deg,rgba(40,216,189,.16),rgba(22,183,159,.055))!important;border-color:rgba(40,216,189,.19)!important}.quick b{display:block;font-size:13px;color:#fff;white-space:normal}.quick small{display:block;color:#7fa9a2;font-size:9px;margin-top:3px;line-height:1.3}
.secure-badge,.status{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(255,255,255,.033);padding:8px 10px;border-radius:999px;font-size:9px;color:#91bbb4;white-space:nowrap}.status i{width:7px;height:7px;border-radius:50%;background:#6d807d}.status.on{color:#8de9db}.status.on i{background:var(--mint);box-shadow:0 0 0 4px rgba(40,216,189,.08)}.status.off{color:#d3a4a8}.status.off i{background:#e8656f}

/* PAGE TITLES + BUTTONS */
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:4px 0 14px;padding:2px}.page-title h1{margin-top:8px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(40,216,189,.18);border-radius:13px;background:linear-gradient(135deg,#1dbca5,#24d4b8);color:#062b25;padding:11px 14px;text-decoration:none;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(22,183,159,.13),inset 0 1px 0 rgba(255,255,255,.23);transition:transform .17s ease,filter .17s ease,border-color .17s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}.btn.ghost{background:rgba(255,255,255,.035);color:#cde9e4;border-color:var(--line);box-shadow:none}.btn.danger{background:linear-gradient(135deg,#f1535f,#dd3947);color:#fff;border-color:rgba(255,101,113,.24);box-shadow:none}.btn.small{padding:9px 11px;font-size:10px}.icon-btn{width:34px;height:34px;border-radius:10px;text-decoration:none}

/* FORMS */
.grid2{display:grid;grid-template-columns:1fr;gap:0 14px}.form-row{display:grid;gap:8px;margin-bottom:15px}.form-row label,.panel-body>form>label{font-size:9px;letter-spacing:.10em;font-weight:950;color:#a5c8c2}.input,select,textarea{display:block;width:100%;min-width:0;border:1px solid rgba(176,255,240,.13);background:linear-gradient(145deg,rgba(14,57,52,.96),rgba(10,47,43,.96));color:#f5fdfb;border-radius:14px;padding:12px 13px;font:inherit;font-size:12px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.input:focus,select:focus,textarea:focus{border-color:rgba(40,216,189,.55);box-shadow:0 0 0 4px rgba(40,216,189,.075);background:rgba(17,66,60,.98)}.input::placeholder,textarea::placeholder{color:#668b84}textarea{min-height:112px;resize:vertical}select option{background:#0b302c;color:#fff}.help{font-size:9px;color:#789e98;line-height:1.5}.help code{display:inline-block;padding:3px 6px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:#9ee9dd}.form-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:4px}.form-actions.full{grid-column:1/-1}.form-actions.center{justify-content:center}
.searchbox{width:100%;max-width:330px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.03);color:#78b9af}.searchbox input{width:100%;border:0;outline:0;background:transparent;color:#edf9f7;padding:11px 0;font:inherit;font-size:11px}.searchbox input::placeholder{color:#62857e}.bulk{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}

/* TABLES */
.table-wrap{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(255,255,255,.035);border-radius:16px;background:rgba(0,0,0,.05)}.table{width:100%;min-width:690px;border-collapse:separate;border-spacing:0}.table th{text-align:left;padding:12px 12px;color:#80cfc3;background:rgba(255,255,255,.024);font-size:8px;letter-spacing:.13em;white-space:nowrap;position:sticky;top:0}.table td{padding:13px 12px;border-top:1px solid var(--line);font-size:11px;color:#dcece9;vertical-align:middle}.table tbody tr{transition:background .16s}.table tbody tr:hover{background:rgba(40,216,189,.028)}.check{width:16px;height:16px;accent-color:var(--mint)}.mono{color:#acd7cf}.id-badge,.count-pill,.badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:9px;font-weight:900}.count-pill{min-width:34px;color:#7ce7d6;background:rgba(40,216,189,.08)}.empty{text-align:center;padding:28px;color:#6d938c}

/* SPECIAL */
.info-box{padding:14px 15px;border:1px solid rgba(40,216,189,.13);background:linear-gradient(135deg,rgba(40,216,189,.06),rgba(255,255,255,.015));border-radius:14px;color:#aacdc7;line-height:1.55;font-size:11px;margin-bottom:17px}.choice-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px}.choice{position:relative;display:flex;align-items:flex-start;gap:12px;padding:15px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.024);cursor:pointer;transition:.18s}.choice:hover{border-color:var(--line-strong);background:rgba(40,216,189,.035)}.choice input{position:absolute;opacity:0}.choice-check{position:absolute;right:13px;top:13px;width:15px;height:15px;border:1px solid #678a84;border-radius:50%}.choice input:checked~.choice-check{border:4px solid var(--mint);box-shadow:0 0 0 3px rgba(40,216,189,.08)}.choice-ico{width:40px;height:40px;border-radius:12px;background:rgba(40,216,189,.09);color:#73dfcf;display:grid;place-items:center;flex:0 0 auto}.choice b{display:block;font-size:11px;margin-bottom:4px}.choice small{display:block;color:#7ba19a;font-size:9px;line-height:1.45;padding-right:16px}
.toggle-row{display:flex!important;align-items:center;gap:10px;margin:5px 0 18px;cursor:pointer}.toggle-row input{display:none}.toggle{width:42px;height:23px;border-radius:999px;background:#314b47;position:relative;transition:.2s}.toggle::after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#a8b7b4;transition:.2s}.toggle-row input:checked+.toggle{background:rgba(40,216,189,.31)}.toggle-row input:checked+.toggle::after{left:22px;background:var(--mint-3);box-shadow:0 0 14px rgba(40,216,189,.34)}
.logo-preview{height:210px;border-radius:19px;border:1px solid var(--line);background:radial-gradient(circle,rgba(40,216,189,.11),transparent 44%),#061817;display:grid;place-items:center;position:relative;overflow:hidden;margin:8px 0 12px}.logo-preview img{max-width:150px;max-height:150px;object-fit:contain;position:relative;z-index:2}.logo-halo{position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid rgba(40,216,189,.11);box-shadow:0 0 70px rgba(40,216,189,.08)}.file-input{width:100%;font-size:10px;color:#90aba7;background:rgba(255,255,255,.024);border:1px dashed rgba(147,255,233,.15);padding:12px;border-radius:13px}.profile-form{max-width:620px}.flash{display:flex;align-items:center;gap:10px;margin-bottom:15px;padding:13px 15px;border-radius:14px;background:rgba(40,216,189,.08);border:1px solid rgba(40,216,189,.18);color:#c7eee7;font-size:11px;box-shadow:var(--shadow-sm)}.flash.err{background:rgba(255,90,103,.08);border-color:rgba(255,90,103,.22);color:#ffd1d4}

/* PWA */
.pwa-install{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(138,247,226,.18);background:rgba(40,216,189,.09);color:#dffff9;border-radius:13px;padding:10px 12px;font:inherit;font-size:11px;font-weight:850;cursor:pointer}.pwa-install[hidden]{display:none!important}.top-install{margin-left:auto}.top-install+.logout-btn{margin-left:0}

/* LOGIN */
.login-page{background:radial-gradient(circle at 15% 15%,rgba(40,216,189,.17),transparent 26%),radial-gradient(circle at 82% 82%,rgba(22,183,159,.11),transparent 32%),linear-gradient(150deg,#061c19,#03110f 62%,#082723);display:grid;place-items:center;padding:78px 16px 26px;overflow-x:hidden}
.login-page::before{opacity:.13}.login-shell{width:min(470px,100%);position:relative;z-index:2}.login-glow{position:absolute;border-radius:50%;filter:blur(54px);pointer-events:none}.login-glow.g1{width:190px;height:190px;background:rgba(40,216,189,.17);left:-65px;top:-80px}.login-glow.g2{width:170px;height:170px;background:rgba(22,183,159,.12);right:-55px;bottom:-70px}
.login-card{position:relative;padding:76px 26px 25px;border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.985),rgba(237,251,248,.965));color:#0b2320;box-shadow:0 38px 110px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.9);overflow:visible}
.login-card::after{content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(9,106,92,.025)}
.login-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-44%);width:112px;height:112px;border-radius:29px;background:linear-gradient(145deg,#04110f,#0a211e);padding:10px;border:7px solid #f5fcfa;box-shadow:0 22px 48px rgba(0,0,0,.24),0 0 0 1px rgba(12,116,101,.06);display:grid;place-items:center}.login-logo{width:100%;height:100%;object-fit:contain;border-radius:20px}.login-kicker{text-align:center;color:#168e80;font-size:9px;letter-spacing:.20em;font-weight:950}.login-card h1{text-align:center;margin:10px 0 7px;font-size:29px;letter-spacing:-.035em}.login-sub{text-align:center;color:#74827f;font-size:11px;margin:0 0 22px;line-height:1.5}.login-card .form-row label{color:#40524f}.login-card .input{background:#edf4f2;border:1px solid #dde9e6;color:#10201e;padding-left:42px;min-height:54px;font-size:13px}.login-card .input:focus{background:#f7fbfa;border-color:#70d7c7;box-shadow:0 0 0 4px rgba(22,183,159,.10)}.field-icon{position:relative}.field-icon>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8b9b98;z-index:2}.remember{display:flex;align-items:center;gap:9px;color:#657572!important;font-size:10px!important;letter-spacing:0!important;margin:2px 0 18px}.remember input{accent-color:#16b79f;width:16px;height:16px}.login-btn{width:100%;color:#fff;background:linear-gradient(135deg,#109b8d,#1fcbb2);font-size:13px;padding:14px;min-height:52px;border-color:rgba(10,122,106,.08);box-shadow:0 13px 28px rgba(16,155,141,.18)}.security-line{margin:15px auto 0;display:flex;align-items:center;justify-content:center;gap:6px;color:#7e8d8a;font-size:9px}.login-pwa{width:100%;margin-top:12px;color:#0a4e45;background:#ddf8f3;border-color:#c5eee7}.login-foot{border-top:1px solid #e2ece9;margin-top:18px;padding-top:16px;text-align:center;display:grid;gap:4px;color:#6c7b78;font-size:9px}.login-foot b{color:#1a4a44}.login-card .flash{color:#8b2730;background:#ffe9ea;border-color:#ffd0d3;box-shadow:none}

/* RESPONSIVE */
@media(min-width:700px){
  .layout{padding:32px 22px 78px}.hero{grid-template-columns:1.65fr .85fr;padding:30px}.hero h1,.page-title h1{font-size:38px}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}.quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;padding:20px!important}.quick{min-height:92px!important;align-items:flex-start!important;flex-direction:column!important}.quick>span{width:40px!important;height:40px!important;flex-basis:40px!important}.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-head{padding:21px 24px}.panel-body{padding:23px 24px}.api-pill{display:flex}.app-grid{gap:28px}.topbar{padding-left:20px;padding-right:20px}
}
@media(min-width:1024px){
  .drawer{transform:none;width:var(--sidebar);max-width:var(--sidebar);box-shadow:none}.overlay,.menu-btn{display:none!important}.topbar{margin-left:var(--sidebar);padding-left:30px}.layout{margin-left:var(--sidebar);max-width:none;padding-left:32px;padding-right:32px}.nav a{font-size:13px}.quick{flex-direction:row!important;align-items:center!important;min-height:86px!important}
}
@media(max-width:699px){
  body.menu-open{overflow:hidden}.topbar{height:70px;padding:0 11px;gap:8px}.menu-btn,.logout-btn{width:43px;height:43px;border-radius:13px}.brand-mini img{width:42px;height:42px;min-width:42px;max-width:42px;border-radius:12px}.brand-mini b{font-size:13px}.brand-mini span{font-size:9px}.layout{padding:16px 10px 54px}.hero{padding:20px 16px;border-radius:22px}.hero h1,.page-title h1{font-size:27px}.hero p,.page-title p{font-size:12px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.metric{padding:13px 10px!important;min-height:98px!important;align-items:flex-start!important}.metric-ico{width:38px!important;height:38px!important;flex-basis:38px!important}.metric strong{font-size:20px!important}.metric strong.status-text{font-size:12px!important}.panel{border-radius:21px}.panel-head{padding:15px 15px;align-items:flex-start}.panel-body{padding:15px}.quick-grid{padding:13px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.quick{padding:12px!important;min-height:105px!important;align-items:flex-start!important;flex-direction:column!important}.quick>span{width:38px!important;height:38px!important;flex-basis:38px!important}.quick b{font-size:12px}.quick small{font-size:9px}.page-title{align-items:flex-start;flex-direction:column;margin-bottom:12px}.page-title .btn{width:100%}.searchbox{max-width:none}.table{min-width:680px}.secure-badge{display:none}.login-page{display:block;padding-top:78px}.login-shell{margin:0 auto}.login-card{padding:73px 20px 22px;border-radius:27px}.login-badge{width:106px;height:106px}.login-card h1{font-size:27px}.drawer{width:min(86vw,320px);max-width:320px}.drawer-brand{padding:17px 14px}.drawer-brand .logo-ring{width:58px;height:58px;min-width:58px}.drawer-brand .logo-ring img{width:46px;height:46px;min-width:46px;max-width:46px}.nav{padding:8px 10px 12px}.nav .section{padding:13px 10px 6px}.nav a{padding:10px 10px;margin:2px 0;font-size:13px}.drawer-foot{padding:12px}.profile-box{padding:11px}.powered{margin-top:10px}.integration-card{padding:13px}.integration-card strong{font-size:13px}.top-install span{display:none}.top-install{width:43px;height:43px;padding:0;border-radius:13px}
}
@media(max-width:390px){
  .brand-mini span{display:none}.metric-grid{grid-template-columns:1fr 1fr!important}.metric{min-height:94px!important}.chips{gap:6px}.chip{font-size:10px;padding:8px 10px}.quick-grid{grid-template-columns:1fr 1fr!important}.quick{min-height:100px!important}.drawer{width:88vw!important}.hero h1,.page-title h1{font-size:25px!important}
}
@media(max-width:350px){.metric-grid,.quick-grid{grid-template-columns:1fr!important}.quick{min-height:72px!important;flex-direction:row!important;align-items:center!important}}

/* ===== V10 PREMIUM POLISH ===== */
:root{
  --bg:#03110f;
  --surface:#082722;
  --surface-2:#0b312b;
  --surface-3:#104039;
  --mint:#29e0c1;
  --mint-2:#14bda1;
  --mint-3:#a0ffed;
  --line:rgba(139,255,234,.13);
  --line-strong:rgba(139,255,234,.28);
  --shadow:0 26px 72px rgba(0,0,0,.30);
}
body{
  background:
    radial-gradient(circle at 84% -8%,rgba(41,224,193,.16),transparent 31%),
    radial-gradient(circle at -12% 72%,rgba(20,189,161,.10),transparent 30%),
    linear-gradient(150deg,#072a25 0%,#03110f 52%,#061d19 100%);
}
body::before{opacity:.18;background-size:42px 42px}
.topbar{
  height:80px;
  background:linear-gradient(180deg,rgba(4,24,21,.94),rgba(3,18,16,.88));
  border-bottom-color:rgba(142,255,235,.10);
  box-shadow:0 12px 34px rgba(0,0,0,.14);
}
.brand-mini img{border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.24),0 0 0 1px rgba(132,255,234,.08)}
.api-pill{background:linear-gradient(145deg,rgba(41,224,193,.10),rgba(255,255,255,.025));border-color:rgba(104,246,221,.18)}
.drawer{
  background:
    radial-gradient(circle at 20% 0%,rgba(41,224,193,.14),transparent 25%),
    linear-gradient(180deg,#073e36 0%,#042a25 46%,#031b18 100%);
  border-right-color:rgba(143,255,235,.15);
}
.drawer-brand{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.logo-ring{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 15px 32px rgba(0,0,0,.22),0 0 28px rgba(41,224,193,.08)}
.nav a{min-height:54px;border-radius:17px}
.nav a.active{
  background:linear-gradient(90deg,rgba(41,224,193,.19),rgba(41,224,193,.055));
  border-color:rgba(126,255,233,.18);
  box-shadow:inset 3px 0 0 var(--mint),0 12px 28px rgba(0,0,0,.10);
}
.profile-box{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border-color:rgba(139,255,234,.14)}
.layout{padding-top:30px}
.hero{
  min-height:238px;
  align-items:center;
  background:
    linear-gradient(118deg,rgba(20,87,76,.96),rgba(5,33,29,.97) 63%),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  border-color:rgba(145,255,235,.17);
  box-shadow:0 30px 86px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045);
}
.hero::before{
  background:
    linear-gradient(120deg,rgba(255,255,255,.045),transparent 34%),
    repeating-linear-gradient(115deg,transparent 0 28px,rgba(255,255,255,.012) 29px 30px);
}
.hero h1{font-weight:820;letter-spacing:-.045em;text-shadow:0 8px 28px rgba(0,0,0,.14)}
.hero p{color:#a9c9c2}
.chip{background:rgba(2,20,18,.32);border-color:rgba(149,255,237,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.integration-card{
  padding:18px;
  border-radius:21px;
  background:linear-gradient(145deg,rgba(41,224,193,.16),rgba(255,255,255,.028));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 34px rgba(0,0,0,.12);
}
.integration-icon{width:56px;height:56px;border-radius:18px;background:linear-gradient(145deg,rgba(41,224,193,.20),rgba(41,224,193,.07));box-shadow:0 10px 24px rgba(0,0,0,.13)}
.metric{
  position:relative;
  overflow:hidden;
  border-color:rgba(145,255,235,.13)!important;
  background:linear-gradient(145deg,rgba(12,58,51,.94),rgba(6,34,30,.96))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.metric::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--mint-3),var(--mint-2));opacity:.75}
.metric::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-70px;top:-70px;background:radial-gradient(circle,rgba(41,224,193,.13),transparent 70%)}
.metric:hover{transform:translateY(-2px);border-color:rgba(145,255,235,.24)!important;box-shadow:0 24px 52px rgba(0,0,0,.22),0 0 35px rgba(41,224,193,.035)!important}
.metric-ico{background:linear-gradient(145deg,rgba(41,224,193,.16),rgba(255,255,255,.035))!important;border:1px solid rgba(142,255,235,.10)}
.metric strong{letter-spacing:-.035em}
.panel{
  border-color:rgba(145,255,235,.12);
  background:linear-gradient(155deg,rgba(8,43,38,.95),rgba(4,27,24,.97));
  box-shadow:0 22px 58px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(155,255,239,.24),transparent);pointer-events:none}
.panel-head{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.panel-head h2{font-weight:800;letter-spacing:-.025em}
.quick-grid{gap:12px!important}
.quick{
  border-color:rgba(143,255,234,.11)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.018))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
.quick:hover{transform:translateY(-2px);border-color:rgba(143,255,234,.25)!important;background:linear-gradient(145deg,rgba(41,224,193,.12),rgba(255,255,255,.025))!important;box-shadow:0 18px 36px rgba(0,0,0,.16)}
.quick.primary{background:linear-gradient(145deg,rgba(41,224,193,.20),rgba(20,189,161,.075))!important;border-color:rgba(143,255,234,.20)!important}
.btn{
  border-radius:14px!important;
  min-height:46px;
  background:linear-gradient(135deg,#16aa92,#2adbbd)!important;
  border:1px solid rgba(163,255,239,.14)!important;
  box-shadow:0 12px 28px rgba(13,154,131,.16),inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 16px 34px rgba(13,154,131,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.btn.ghost{background:rgba(255,255,255,.035)!important;box-shadow:none;border-color:rgba(143,255,234,.12)!important}
.btn.danger{background:linear-gradient(135deg,#d84250,#f35b67)!important;box-shadow:0 12px 26px rgba(216,66,80,.13)}
.input,select,textarea{
  background:rgba(3,24,21,.72)!important;
  border-color:rgba(138,255,234,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.input:focus,select:focus,textarea:focus{border-color:rgba(85,239,214,.48)!important;box-shadow:0 0 0 4px rgba(41,224,193,.075)!important;background:rgba(4,31,27,.86)!important}
.table-wrap{border-color:rgba(140,255,235,.10);background:rgba(1,17,15,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.table thead th{background:#082c27;color:#7fd9cd;position:sticky;top:0;z-index:1}
.table tbody tr{transition:background .15s ease}.table tbody tr:hover{background:rgba(41,224,193,.045)}
.searchbox{background:rgba(2,21,18,.38);border-color:rgba(143,255,234,.12)}
.page-title{padding:4px 2px 2px}.page-title h1{font-weight:820;letter-spacing:-.04em}
.info-box{border-color:rgba(143,255,234,.13);background:linear-gradient(145deg,rgba(41,224,193,.075),rgba(255,255,255,.018))}
.logo-preview{background:radial-gradient(circle at 50% 45%,rgba(41,224,193,.14),transparent 45%),linear-gradient(145deg,#071d1a,#03110f);border-color:rgba(145,255,235,.13)}

/* login V10 */
.login-page{
  background:
    radial-gradient(circle at 18% 12%,rgba(41,224,193,.20),transparent 28%),
    radial-gradient(circle at 86% 83%,rgba(20,189,161,.13),transparent 29%),
    linear-gradient(148deg,#062721,#020d0c 58%,#062b25);
}
.login-shell{width:min(490px,100%)}
.login-card{
  padding:80px 30px 28px;
  border-radius:34px;
  background:linear-gradient(155deg,rgba(252,255,254,.99),rgba(234,250,246,.975));
  box-shadow:0 44px 120px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.68),inset 0 1px 0 #fff;
}
.login-card::before{content:"";position:absolute;left:36px;right:36px;top:0;height:2px;background:linear-gradient(90deg,transparent,#23cdb0,transparent);opacity:.7}
.login-badge{width:118px;height:118px;border-radius:32px;border-width:7px;box-shadow:0 24px 54px rgba(0,0,0,.27),0 0 34px rgba(22,183,159,.10)}
.login-kicker{letter-spacing:.23em;color:#158d7d}
.login-card h1{font-size:31px;font-weight:780;color:#0a2723}
.login-sub{font-size:12px;color:#71827f}
.login-card .input{background:#eef6f4!important;border-color:#dce9e6!important;color:#102622!important;min-height:56px}
.login-card .input:focus{background:#fbfefd!important;border-color:#58cdbb!important;box-shadow:0 0 0 4px rgba(22,183,159,.10)!important}
.login-btn{background:linear-gradient(135deg,#0e9887,#22cdb0)!important;box-shadow:0 16px 34px rgba(14,152,135,.22)!important}
.security-line{color:#70827e}

@media(min-width:1024px){
  .layout{padding-top:36px;padding-left:38px;padding-right:38px}
  .hero{padding:34px 34px;grid-template-columns:minmax(0,1.65fr) minmax(310px,.85fr)}
  .metric-grid{gap:14px!important}
}
@media(max-width:699px){
  .topbar{height:72px}
  .layout{padding:18px 11px 58px}
  .hero{min-height:0;padding:22px 17px;border-radius:24px}
  .hero::after{right:-220px;top:-245px}
  .integration-card{padding:14px;border-radius:18px}
  .integration-icon{width:46px;height:46px;border-radius:15px}
  .metric{min-height:104px!important;border-radius:18px!important}
  .panel{border-radius:23px}
  .quick{border-radius:17px!important}
  .login-page{padding-top:82px}
  .login-card{padding:76px 20px 24px;border-radius:29px}
  .login-card h1{font-size:28px}
}