@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--bg:#f7f8fc;--surface:#fff;--surface-2:#f1f3f8;--ink:#172033;--muted:#778197;--line:#e7eaf1;--brand:#5b5cf0;--brand-dark:#4748d5;--brand-soft:#eeefff;--good:#159570;--good-soft:#e7f7f1;--warn:#c88721;--warn-soft:#fff5df;--bad:#d24d62;--bad-soft:#fff0f3;--shadow:0 12px 30px rgba(28,38,68,.06);--radius:16px;--sidebar:264px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink)}body{font-size:14px}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:inherit;text-decoration:none}.app{min-height:100vh}.shell{display:flex;min-height:100vh}.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);background:#131827;color:#8e99ad;padding:22px 14px;display:flex;flex-direction:column;transition:width .25s ease,transform .25s ease;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:4px 12px 31px;color:#fff}.brand-mark{width:37px;height:37px;border-radius:12px;display:grid;place-items:center;color:#fff;font:800 12px Manrope,sans-serif;letter-spacing:-.5px;background:linear-gradient(135deg,#7a73ff,#4a4bd8);box-shadow:0 7px 18px #5b5cf04d}.brand-copy strong{display:block;font:800 15px Manrope,sans-serif;letter-spacing:-.2px}.brand-copy small{display:block;color:#707c91;font-size:10px;margin-top:2px}.side-label{padding:0 13px;margin:17px 0 7px;color:#667188;font-size:10px;line-height:1;font-weight:700;letter-spacing:.13em}.nav{display:grid;gap:3px}.nav-btn{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;border-radius:10px;color:inherit;background:transparent;text-align:left;transition:.18s ease}.nav-btn:hover{background:#1d2435;color:#dce2ee}.nav-btn.active{background:linear-gradient(90deg,#2e3454,#252b46);color:#fff}.nav-btn.active:before{content:'';position:absolute;left:-14px;width:3px;height:23px;border-radius:0 5px 5px 0;background:#827aff}.nav-icon{width:18px;text-align:center;font-size:15px;opacity:.85}.nav-btn.active .nav-icon{color:#aaa5ff}.side-bottom{margin-top:auto;border-top:1px solid #252c3d;padding:17px 8px 0}.api-state{display:flex;align-items:center;gap:9px;font-size:12px}.dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px #1595701c}.workspace{display:flex;align-items:center;gap:10px;margin-top:17px;padding:10px 8px;border-radius:11px;background:#1a2030}.avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#d9d7ff;color:#4c4dcc;font-weight:800;font-size:12px}.workspace strong{display:block;color:#e9edf6;font-size:12px}.workspace small{color:#79849a;font-size:10px}.main{min-width:0;flex:1}.topbar{height:76px;background:rgba(255,255,255,.84);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:25px;padding:0 clamp(20px,4vw,48px);position:sticky;top:0;z-index:10}.hamburger{display:none;background:transparent;font-size:22px;color:var(--ink)}.crumb{color:var(--muted);font-size:12px;margin-bottom:4px}.top-title{font:700 19px Manrope,sans-serif;letter-spacing:-.4px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.global-search{width:220px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:9px 11px;color:var(--muted)}.global-search input{border:0;outline:0;background:transparent;width:100%;font-size:12px;color:var(--ink)}.icon-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);display:grid;place-items:center;transition:.18s ease}.icon-btn:hover{border-color:#cfd1f8;color:var(--brand);background:var(--brand-soft)}.profile{display:flex;align-items:center;gap:9px;padding-left:8px;border-left:1px solid var(--line)}.profile-name{font-size:12px;font-weight:700}.profile small{display:block;color:var(--muted);font-weight:400;margin-top:2px}.content{max-width:1540px;margin:0 auto;padding:34px clamp(20px,4vw,48px) 55px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:27px}.eyebrow{color:var(--brand);text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.12em;margin-bottom:8px}.page-head h1{margin:0;font:800 27px Manrope,sans-serif;letter-spacing:-.9px}.page-head p{margin:8px 0 0;color:var(--muted)}.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:10px 14px;font-weight:700;font-size:12px;transition:.18s ease}.btn-primary{background:var(--brand);color:#fff;box-shadow:0 7px 16px #5b5cf02b}.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px)}.btn-soft{background:var(--brand-soft);color:var(--brand)}.btn-neutral{background:var(--surface);border:1px solid var(--line);color:var(--ink)}.btn-danger{background:var(--bad-soft);color:var(--bad)}.btn-sm{padding:7px 10px;font-size:11px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:19px 20px;box-shadow:var(--shadow);min-width:0}.metric-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:600}.metric-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-size:16px}.metric-value{font:800 28px Manrope,sans-serif;letter-spacing:-1px;margin-top:16px}.metric-foot{display:flex;align-items:center;gap:7px;margin-top:10px;color:var(--muted);font-size:11px}.trend{font-weight:700;color:var(--good)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:17px;margin-top:18px}.surface{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.surface-pad{padding:21px}.surface-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:20px}.surface-head h2,.surface-head h3{margin:0;font:700 15px Manrope,sans-serif;letter-spacing:-.25px}.surface-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px;color:var(--muted);font-size:11px;outline:0}.chart-area{height:190px;display:flex;align-items:stretch;gap:12px}.chart-y{display:flex;flex-direction:column;justify-content:space-between;color:#a3abbb;font-size:10px;padding:3px 0 19px}.chart-plot{flex:1;display:flex;flex-direction:column;justify-content:space-between;background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,var(--line) 48px);position:relative;border-bottom:1px solid var(--line)}.bars{height:100%;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;padding:0 5%;}.bar-item{height:100%;display:flex;align-items:flex-end;gap:3px;flex:1;max-width:40px}.bar{width:50%;min-height:4px;border-radius:5px 5px 0 0;background:#c9caff}.bar.hot{background:linear-gradient(180deg,#8c88ff,#5b5cf0)}.axis{display:flex;justify-content:space-around;color:#a3abbb;font-size:10px;padding:8px 5% 0}.legend{display:flex;gap:15px;color:var(--muted);font-size:11px}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:5px}.legend i.gray{background:#c9caff}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quick{padding:15px;border:1px solid var(--line);border-radius:11px;background:var(--surface);transition:.18s}.quick:hover{border-color:#cfd1f8;transform:translateY(-2px);box-shadow:var(--shadow)}.quick b{display:block;margin-top:9px;font-size:12px}.quick span{font-size:18px;color:var(--brand)}.activity{display:grid;gap:17px}.activity-item{display:flex;gap:12px;position:relative}.activity-item:not(:last-child):after{content:'';position:absolute;left:4px;top:17px;width:1px;height:29px;background:var(--line)}.activity-dot{width:9px;height:9px;border-radius:50%;margin-top:4px;background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);z-index:1}.activity-item.good .activity-dot{background:var(--good);box-shadow:0 0 0 4px var(--good-soft)}.activity-copy b{display:block;font-size:12px}.activity-copy small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.toolbar-card{padding:15px 17px;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.search-field{display:flex;align-items:center;gap:9px;flex:1;min-width:210px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;color:var(--muted);background:var(--surface)}.search-field input{width:100%;border:0;outline:0;color:var(--ink);background:transparent;font-size:12px}.table-card{overflow:hidden}.table-scroll{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:720px}.data-table th{text-align:left;padding:13px 17px;color:#929bae;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line);background:var(--surface-2)}.data-table td{padding:14px 17px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}.data-table tbody tr{transition:.15s}.data-table tbody tr:hover{background:#fafaff}.data-table tbody tr:last-child td{border-bottom:0}.entity{display:flex;align-items:center;gap:10px}.entity-avatar{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:800}.entity strong{display:block;font-size:12px}.entity small,.muted{display:block;color:var(--muted);font-size:11px;margin-top:3px}.mono{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;color:#5b657a}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:5px 9px;font-size:10px;font-weight:700}.badge:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.badge-active{background:var(--good-soft);color:var(--good)}.badge-blocked,.badge-deleted{background:var(--bad-soft);color:var(--bad)}.badge-expired,.badge-inactive{background:var(--warn-soft);color:var(--warn)}.row-actions{display:flex;gap:5px;justify-content:flex-end}.empty{padding:58px 20px;text-align:center;color:var(--muted)}.empty-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin:0 auto 15px;background:var(--brand-soft);color:var(--brand);font-size:21px}.empty h3{color:var(--ink);margin:0 0 7px;font:700 15px Manrope,sans-serif}.empty p{margin:0 auto 17px;max-width:330px;font-size:12px}.skeleton{background:linear-gradient(90deg,var(--surface-2),#fff,var(--surface-2));background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:8px}@keyframes shimmer{to{background-position:-200% 0}}.skeleton-card{height:115px}.modal-backdrop{position:fixed;inset:0;background:#11182780;backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;z-index:50}.modal{width:min(560px,100%);max-height:calc(100vh - 36px);overflow:auto;background:var(--surface);border-radius:18px;box-shadow:0 25px 80px #10152640;animation:modal-in .2s ease}@keyframes modal-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.modal-head{display:flex;justify-content:space-between;gap:15px;padding:22px 23px 16px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0;font:700 17px Manrope,sans-serif}.modal-head p{margin:6px 0 0;color:var(--muted);font-size:12px}.modal-body{padding:21px 23px}.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:15px 23px;border-top:1px solid var(--line)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:700;color:var(--muted)}.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;outline:0;background:var(--surface);color:var(--ink)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #5b5cf01a}.toast-stack{position:fixed;right:22px;bottom:22px;display:grid;gap:9px;z-index:80}.toast{min-width:260px;max-width:360px;padding:13px 15px;border-radius:11px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 28px #1015261c;display:flex;gap:10px;align-items:flex-start;animation:toast-in .22s ease}.toast b{display:block;font-size:12px}.toast small{display:block;color:var(--muted);margin-top:3px;font-size:11px}.toast.ok strong{color:var(--good)}.toast.fail strong{color:var(--bad)}@keyframes toast-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}.drawer{display:none}.detail-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px;margin-bottom:17px}.detail-id{color:var(--muted);font-family:monospace;font-size:11px;margin-top:7px}.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:17px}.tab{background:none;padding:0 0 12px;color:var(--muted);font-size:12px;font-weight:700;border-bottom:2px solid transparent}.tab.active{color:var(--brand);border-color:var(--brand)}[data-theme=dark]{--bg:#0f1320;--surface:#171d2c;--surface-2:#202739;--ink:#edf1fa;--muted:#929db2;--line:#2b3346;--shadow:0 12px 30px #0000001a}[data-theme=dark] .topbar{background:#171d2cdd}[data-theme=dark] .data-table tbody tr:hover{background:#1b2233}[data-theme=dark] .chart-plot{background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,#2b3346 48px)}[data-theme=dark] .skeleton{background:linear-gradient(90deg,#202739,#2b3346,#202739);background-size:200% 100%}[data-theme=dark] .login{background:radial-gradient(circle at 80% 15%,#282554,transparent 35%),#0f1320}[data-theme=dark] .login-card{background:var(--surface)}@media(max-width:1100px){:root{--sidebar:218px}.global-search{width:175px}.dashboard-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);box-shadow:20px 0 40px #0e142833}.sidebar.open{transform:none}.drawer{display:block;position:fixed;inset:0;background:#0e142866;z-index:19}.hamburger{display:block}.topbar{padding:0 17px;gap:12px}.top-actions{gap:5px}.global-search{display:none}.profile-name{display:none}.content{padding:24px 16px 40px}.page-head{align-items:flex-start;flex-direction:column;margin-bottom:20px}.page-head h1{font-size:23px}.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric{padding:15px}.metric-value{font-size:24px}.dashboard-grid{margin-top:12px}.surface-pad{padding:16px}.toolbar-card{align-items:stretch}.toolbar-card .search-field{flex-basis:100%}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.detail-hero{align-items:flex-start;flex-direction:column}.toast-stack{right:12px;left:12px;bottom:12px}.toast{min-width:0}.side-label{margin-top:10px}}