:root{--bg:#F5F5FB;--surface:#FFFFFF;--surface-2:#FAFAFE;--surface-3:#F2F1FA;--border:#E9E8F2;--border-strong:#DAD9E8;--ink:#181826;--ink-2:#54546B;--ink-3:#8A8AA1;--accent:#e8000d;--accent-2:#ff3b30;--accent-ink:#FFFFFF;--accent-soft:#fdeaea;--good:#118A4B;--good-soft:#E4F4EA;--warn:#B87400;--warn-soft:#F9EFD8;--danger:#D23B41;--danger-soft:#FAE7E8;--info:#2A72C8;--info-soft:#E5F0FB;--radius:16px;--radius-sm:11px;--radius-xs:8px;--shadow-sm:0 1px 2px rgba(24,24,45,.05);--shadow:0 1px 2px rgba(24,24,45,.04), 0 10px 26px -12px rgba(24,24,45,.14);--shadow-lg:0 24px 60px -20px rgba(35,25,90,.3);--font:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--display:"Sora",var(--font);--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0E0E16;--surface:#181824;--surface-2:#1D1D2B;--surface-3:#23233340;--border:#282838;--border-strong:#363649;--ink:#F1F1F7;--ink-2:#A7A7BF;--ink-3:#70708A;--accent:#ff4d4d;--accent-2:#ff7a7a;--accent-ink:#FFFFFF;--accent-soft:#3a1414;--good:#3BC978;--good-soft:#152A20;--warn:#E7A63E;--warn-soft:#2E2415;--danger:#F2686B;--danger-soft:#331A1D;--info:#5AA6EC;--info-soft:#152331;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.55);--shadow-lg:0 30px 70px -24px rgba(0,0,0,.7);color-scheme:dark}}:root[data-theme=dark]{--bg:#0E0E16;--surface:#181824;--surface-2:#1D1D2B;--surface-3:#23233340;--border:#282838;--border-strong:#363649;--ink:#F1F1F7;--ink-2:#A7A7BF;--ink-3:#70708A;--accent:#ff4d4d;--accent-2:#ff7a7a;--accent-ink:#FFFFFF;--accent-soft:#3a1414;--good:#3BC978;--good-soft:#152A20;--warn:#E7A63E;--warn-soft:#2E2415;--danger:#F2686B;--danger-soft:#331A1D;--info:#5AA6EC;--info-soft:#152331;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.55);--shadow-lg:0 30px 70px -24px rgba(0,0,0,.7);color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}button{font-family:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%}::selection{background:var(--accent-soft)}.app{display:grid;grid-template-columns:264px 1fr;min-height:100%}.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px}.brand .logo{width:40px;height:40px;border-radius:12px;flex:none;background:linear-gradient(150deg,var(--accent),var(--accent-2));display:grid;place-items:center;box-shadow:0 6px 16px -6px var(--accent)}.brand .logo svg{width:22px;height:22px}.brand b{font-family:var(--display);font-size:16px;font-weight:700;display:block;line-height:1.1}.brand span{font-size:11.5px;color:var(--ink-3);letter-spacing:.04em}.usercard{margin:4px 14px 8px;padding:13px 14px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border)}.usercard .u-name{font-weight:600;font-size:13.5px}.usercard .u-mail{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge-role{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:3px 9px;font-size:11px;font-weight:600;border-radius:20px;background:var(--good-soft);color:var(--good)}.badge-role:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}nav{padding:10px 12px;display:flex;flex-direction:column;gap:3px;flex:1}.nav-label{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:14px 12px 6px}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-xs);color:var(--ink-2);font-weight:500;font-size:13.5px;border:none;background:none;width:100%;text-align:left;transition:background .15s,color .15s}.nav-item svg{width:18px;height:18px;flex:none;opacity:.85}.nav-item:hover{background:var(--surface-2);color:var(--ink)}.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.nav-item.active svg{opacity:1}.sidebar-foot{padding:12px;border-top:1px solid var(--border)}.signout{color:var(--danger)}.signout:hover{background:var(--danger-soft)}.main{min-width:0;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:14px 28px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);font-weight:500}.crumbs b{color:var(--ink);font-weight:600}.crumbs svg{width:14px;height:14px;opacity:.6}.topbar .spacer{flex:1}.search{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 13px;min-width:230px;color:var(--ink-3)}.search svg{width:15px;height:15px;flex:none}.search input{border:none;background:none;outline:none;color:var(--ink);font-family:inherit;font-size:13px;width:100%}.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);display:grid;place-items:center;transition:.15s;position:relative}.iconbtn:hover{color:var(--ink);border-color:var(--border-strong)}.iconbtn svg{width:17px;height:17px}.iconbtn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}.hamb{display:none}.content{padding:28px;max-width:1240px;width:100%;margin:0 auto}.page-head{margin-bottom:24px}.page-head h1{font-size:30px;font-weight:700}.page-head p{color:var(--ink-2);margin:7px 0 0;font-size:14.5px;max-width:60ch}.head-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;justify-content:space-between;margin-bottom:24px}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:13.5px;transition:.15s;white-space:nowrap}.btn svg{width:16px;height:16px}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 18px -8px var(--accent)}.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--ink-2)}.btn-ghost:hover{border-color:var(--border-strong);color:var(--ink)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(4,1fr)}.kpi{padding:20px}.kpi .k-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.kpi .k-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center}.kpi .k-ico svg{width:19px;height:19px}.kpi .k-label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700}.kpi .k-val{font-family:var(--display);font-size:34px;font-weight:700;line-height:1;margin:8px 0 6px;font-variant-numeric:tabular-nums}.kpi .k-sub{font-size:12.5px;color:var(--ink-3)}.k-trend{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:12px;padding:3px 8px;border-radius:20px;background:var(--good-soft);color:var(--good)}.k-trend svg{width:12px;height:12px}.i-violet{background:var(--accent-soft);color:var(--accent)}.i-green{background:var(--good-soft);color:var(--good)}.i-amber{background:var(--warn-soft);color:var(--warn)}.i-info{background:var(--info-soft);color:var(--info)}.i-rose{background:var(--danger-soft);color:var(--danger)}.two-col{grid-template-columns:1fr 1fr}.three-col{grid-template-columns:2fr 1fr}.panel{padding:22px}.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.panel-head .p-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}.panel-head .p-ico svg{width:17px;height:17px}.panel-head h3{font-size:15.5px;font-weight:600}.panel-head .big-num{margin-left:auto;font-family:var(--display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}.bar{height:9px;border-radius:20px;background:var(--surface-3);overflow:hidden;display:flex;gap:2px}.bar span{display:block;height:100%}.legend{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap}.legend .li{font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:3px}.legend .li .lt{display:flex;align-items:center;gap:6px;font-weight:500}.legend .li .dot{width:8px;height:8px;border-radius:50%}.legend .li b{font-family:var(--display);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}.chart-wrap{position:relative}.chart-wrap svg{width:100%;height:150px;display:block;overflow:visible}.chart-foot{display:flex;justify-content:space-between;color:var(--ink-3);font-size:11.5px;margin-top:8px}.qa{display:flex;flex-direction:column;gap:10px}.qa-item{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);transition:.15s;text-align:left;width:100%}.qa-item:hover{border-color:var(--accent);background:var(--accent-soft);transform:translate(2px)}.qa-item .qa-ico{width:36px;height:36px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;flex:none;color:var(--accent)}.qa-item .qa-ico svg{width:17px;height:17px}.qa-item b{font-size:13.5px;display:block}.qa-item small{color:var(--ink-3);font-size:12px}.qa-item .arr{margin-left:auto;color:var(--ink-3)}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.bigsearch{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 15px;color:var(--ink-3)}.bigsearch svg{width:16px;height:16px;flex:none}.bigsearch input{border:none;outline:none;background:none;width:100%;color:var(--ink);font-family:inherit;font-size:13.5px}.tabs{display:inline-flex;background:var(--surface-3);border-radius:10px;padding:4px}.tab{padding:7px 15px;border-radius:8px;border:none;background:none;color:var(--ink-2);font-weight:600;font-size:13px;transition:.15s}.tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}.table-card{overflow:hidden}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:920px}thead th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:14px 18px;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface-2)}tbody td{padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:middle}tbody tr:last-child td{border-bottom:none}tbody tr{transition:background .12s}tbody tr:hover{background:var(--surface-2)}.cust{display:flex;align-items:center;gap:11px}.avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-family:var(--display);color:#fff;font-size:14px;flex:none}.cust b{font-size:13.5px;font-weight:600}.cust small{color:var(--ink-3);font-size:11.5px}.mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)}.chip{display:inline-flex;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}.chip-life{background:var(--accent-soft);color:var(--accent)}.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px}.status:before{content:"";width:7px;height:7px;border-radius:50%}.st-active{color:var(--good)}.st-active:before{background:var(--good)}.st-expired{color:var(--danger)}.st-expired:before{background:var(--danger)}.st-suspended{color:var(--warn)}.st-suspended:before{background:var(--warn)}.act{font-size:12px;color:var(--ink-2)}.act .on{color:var(--good);font-weight:600}.act small{display:block;color:var(--ink-3);font-size:11px}.rowbtns{display:flex;gap:6px;justify-content:flex-end}.rb{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--ink-3);transition:.15s}.rb svg{width:15px;height:15px}.rb:hover{color:var(--ink);border-color:var(--border-strong)}.rb.view:hover{color:var(--info);border-color:var(--info)}.rb.susp:hover{color:var(--warn);border-color:var(--warn)}.rb.del:hover{color:var(--danger);border-color:var(--danger)}.empty{padding:48px;text-align:center;color:var(--ink-3)}.form-section{margin-bottom:18px}.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.sec-num{width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-family:var(--display);font-size:13px;flex:none}.sec-head h3{font-size:16px;font-weight:600}.sec-head p{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}label{font-size:12.5px;font-weight:600;color:var(--ink-2)}.hint{font-size:11.5px;color:var(--ink-3);font-weight:400;margin-top:-2px}input.inp,select.inp{padding:11px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:13.5px;outline:none;transition:.15s;width:100%}input.inp::placeholder{color:var(--ink-3)}input.inp:focus,select.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--surface)}.inp.mono{font-family:var(--mono);letter-spacing:.02em}.toggle-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin-bottom:18px}.toggle-row .t-txt b{font-size:13.5px}.toggle-row .t-txt small{display:block;color:var(--ink-3);font-size:12px}.switch{margin-left:auto;width:44px;height:25px;border-radius:20px;background:var(--border-strong);border:none;position:relative;transition:.2s;flex:none}.switch:after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px #00000040}.switch.on{background:var(--accent)}.switch.on:after{left:22px}.modules-head{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:12px;background:var(--good-soft);margin-bottom:16px}.modules-head .m-ico{width:30px;height:30px;border-radius:9px;background:var(--good);color:#fff;display:grid;place-items:center;flex:none}.modules-head .m-ico svg{width:16px;height:16px}.modules-head b{font-size:14px}.modules-head .count{font-size:11.5px;color:var(--good);background:var(--surface);padding:3px 9px;border-radius:20px;font-weight:600}.selectall{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mod{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;transition:.15s;-webkit-user-select:none;user-select:none}.mod:hover{border-color:var(--border-strong)}.mod.sel{border-color:var(--accent);background:var(--accent-soft)}.mod .m-glyph{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--accent)}.mod b{font-size:13px;font-weight:600;display:block;line-height:1.2}.mod small{font-size:11px;color:var(--ink-3);display:block;line-height:1.3}.mod .chk{margin-left:auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-strong);flex:none;display:grid;place-items:center;transition:.15s}.mod .chk svg{width:13px;height:13px;color:#fff;opacity:0;transition:.15s}.mod.sel .chk{background:var(--accent);border-color:var(--accent)}.mod.sel .chk svg{opacity:1}.form-foot{display:flex;justify-content:flex-end;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}.keyout{margin-top:20px;border:1px dashed var(--accent);border-radius:14px;padding:18px;background:var(--accent-soft)}.keyout .ko-top{display:flex;align-items:center;gap:9px;color:var(--accent);font-weight:700;margin-bottom:10px;font-size:13.5px}.keyout .ko-top svg{width:17px;height:17px}.keyval{font-family:var(--mono);font-size:12.5px;word-break:break-all;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--ink);line-height:1.6}.keyout .ko-foot{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap}.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.price-field label{display:flex;align-items:center;gap:7px;margin-bottom:8px}.price-field label svg{width:14px;height:14px;color:var(--ink-3)}.price-field .free{font-size:10.5px;color:var(--good);background:var(--good-soft);padding:2px 7px;border-radius:20px;font-weight:700}.money{display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);overflow:hidden}.money span{padding:0 12px;color:var(--ink-3);font-weight:600;border-right:1px solid var(--border)}.money input{border:none;outline:none;background:none;padding:11px 12px;width:100%;color:var(--ink);font-family:var(--mono);font-size:13.5px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,140%);z-index:100;background:var(--ink);color:var(--bg);padding:13px 20px;border-radius:12px;font-weight:600;font-size:13.5px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;transition:transform .35s cubic-bezier(.2,.9,.3,1);max-width:90vw}#toast.show{transform:translate(-50%)}#toast svg{width:17px;height:17px;color:var(--good);flex:none}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a1466;z-index:39;opacity:0;pointer-events:none;transition:.2s}.overlay.show{opacity:1;pointer-events:auto}.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 500px at 50% -10%,var(--accent-soft),transparent),var(--bg)}.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);padding:32px}.login-card .brand{justify-content:center;padding:0 0 20px}.login-card h1{font-size:22px;text-align:center;margin-bottom:4px}.login-card .sub{text-align:center;color:var(--ink-3);font-size:13px;margin-bottom:24px}.login-card .field{margin-bottom:14px}.login-err{background:var(--danger-soft);color:var(--danger);padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:14px}.login-card .btn-primary{width:100%;justify-content:center;margin-top:8px;padding:12px}.login-hint{text-align:center;color:var(--ink-3);font-size:11.5px;margin-top:18px;line-height:1.6}.loader{display:grid;place-items:center;min-height:60vh;color:var(--ink-3)}.spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px}@keyframes sk{to{background-position:-200% 0}}@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}.three-col{grid-template-columns:1fr}.modules{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;width:270px;transform:translate(-100%);transition:transform .25s;box-shadow:var(--shadow-lg)}.sidebar.open{transform:none}.hamb{display:grid}.content{padding:20px 16px}.search{display:none}}@media(max-width:620px){.kpis,.two-col,.fgrid,.modules,.pricing{grid-template-columns:1fr}.page-head h1{font-size:24px}.content{padding:18px 14px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}