:root { --bg:#050914; --panel:#0b1530; --panel-2:#101d3d; --line:rgba(155,184,255,.16); --text:#e9f0ff; --muted:#8c9abc; --yellow:#ffd528; --cyan:#37ddff; --green:#39e98a; --pink:#f34cd0; --orange:#ff9a2e; --red:#ff586c; --purple:#a67aff; --shadow:0 18px 45px rgba(0,0,0,.24); --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html, body, #root { min-height:100%; margin:0; }
body { background:var(--bg); color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:14px; }
button, input, select, textarea { font:inherit; }
button { color:inherit; border:0; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
button:not(:disabled) { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }

/* Auth */
.auth-shell { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 10%,rgba(50,78,178,.18),transparent 38%),#030508; position:relative; overflow:hidden; }
.auth-shell:before, .auth-shell:after { content:""; position:absolute; inset:-10%; pointer-events:none; opacity:.32; background-image:linear-gradient(120deg,transparent 49%,rgba(112,144,255,.18) 50%,transparent 51%),linear-gradient(30deg,transparent 49%,rgba(112,144,255,.12) 50%,transparent 51%); background-size:220px 150px,260px 180px; transform:rotate(-8deg); }
.auth-noise { position:absolute; inset:0; opacity:.12; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:64px 64px; }
.auth-card { width:min(100%,390px); padding:31px 24px 22px; background:linear-gradient(180deg,rgba(12,16,24,.78),rgba(4,7,11,.88)); border:1px solid rgba(255,255,255,.14); border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03) inset; position:relative; z-index:1; }
.brand-lockup { display:flex; align-items:center; justify-content:center; gap:10px; letter-spacing:.14em; text-align:left; }
.brand-lockup > span:last-child { font-size:18px; color:#dbe2ef; position:relative; }
.brand-lockup b { font-weight:800; color:#f3f5fa; }
.brand-lockup strong { font-weight:800; color:#72a6ff; }
.brand-lockup small { display:block; color:#71809b; font-size:7px; letter-spacing:.22em; text-transform:uppercase; margin-top:3px; }
.brand-orb { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#f4f7ff; font-size:11px; font-weight:900; letter-spacing:-.08em; border:2px solid #79a8ff; box-shadow:0 0 0 3px rgba(93,124,255,.22),0 0 22px rgba(54,123,255,.55); background:radial-gradient(circle at 35% 30%,#6df6ff,#2650c6 55%,#080d25); }
.brand-lockup.compact { justify-content:flex-start; }
.brand-lockup.compact .brand-orb { width:32px; height:32px; font-size:9px; }
.brand-lockup.compact > span:last-child { font-size:14px; }
.auth-heading { text-align:center; margin:28px 0 20px; }
.eyebrow { text-transform:uppercase; letter-spacing:.19em; font-size:10px; font-weight:800; color:#7383a3; }
.auth-heading h1 { margin:8px 0 4px; font-size:25px; letter-spacing:.03em; color:#fff; }
.auth-heading p { color:#79839a; font-size:12px; margin:0; }
.auth-form { display:grid; gap:13px; }
.auth-form label, .field-label { display:grid; gap:7px; }
.auth-form label > span, .field-label > span { display:flex; align-items:center; gap:6px; color:#9aa9c7; font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.auth-form label > span { color:#b6bfd1; font-size:11px; text-transform:none; letter-spacing:0; }
.auth-form label em { font-style:normal; color:#59667f; margin-left:auto; font-size:9px; }
.ghost-icon { background:transparent; color:#91a1bd; padding:2px; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; }
input, select, textarea { width:100%; color:var(--text); background:rgba(4,9,22,.82); border:1px solid rgba(128,156,225,.15); border-radius:10px; padding:12px 13px; min-height:42px; outline:none; transition:.18s var(--ease); }
input::placeholder, textarea::placeholder { color:#586783; }
input:focus, select:focus, textarea:focus { border-color:rgba(73,208,255,.75); box-shadow:0 0 0 3px rgba(55,221,255,.1),0 0 24px rgba(55,221,255,.08); }
textarea { min-height:90px; resize:vertical; }
.auth-form input { border-radius:18px; min-height:40px; padding-left:14px; }
.remember { text-align:left; background:transparent; color:#8993a8; font-size:11px; display:flex; gap:7px; align-items:center; }
.remember i { width:26px; height:14px; border-radius:10px; background:#3b4050; position:relative; transition:.2s; }
.remember i:before { content:""; position:absolute; width:10px; height:10px; top:2px; left:2px; background:#f15b6e; border-radius:50%; transition:.2s; }
.remember.on i { background:#1d8d8b; }.remember.on i:before { left:14px; background:#5bffc1; }
.primary, .secondary, .danger, .soft { display:flex; align-items:center; justify-content:center; gap:8px; border-radius:11px; padding:12px 14px; font-weight:800; font-size:12px; transition:.18s var(--ease); }
.primary { color:#071126; background:linear-gradient(100deg,#3c9bff,#31dcff); box-shadow:0 10px 26px rgba(42,186,255,.18); }.secondary { color:#d8e6ff; background:rgba(46,65,112,.45); border:1px solid rgba(125,153,222,.2); }.danger { color:#fff; background:linear-gradient(100deg,#d94458,#ff6a70); }.soft { color:#041b15; background:linear-gradient(100deg,#3ee5a0,#78f29c); }
.primary:hover, .secondary:hover, .danger:hover, .soft:hover, .action-button:hover { transform:translateY(-1px); filter:brightness(1.08); }.primary:active, .secondary:active, .danger:active, .soft:active, .action-button:active { transform:scale(.97); }
.auth-submit { width:100%; min-height:45px; margin-top:3px; border-radius:22px; }
.auth-divider { display:flex; align-items:center; gap:12px; color:#4e5668; margin:17px 0 12px; font-size:10px; }.auth-divider:before,.auth-divider:after { content:""; height:1px; background:rgba(255,255,255,.09); flex:1; }
.auth-switch { width:100%; font-size:11px; min-height:37px; }.auth-footnote { text-align:center; color:#4c586d; font-size:9px; margin:18px 0 0; }

/* App shell */
.app-shell { min-height:100vh; min-height:100dvh; position:relative; overflow-x:hidden; background:radial-gradient(circle at 50% -15%,rgba(63,88,195,.35),transparent 38%),linear-gradient(180deg,#0b1740 0%,#0b1b4b 45%,#102e79 100%); }
.constellation { position:fixed; inset:0; pointer-events:none; opacity:.27; background-image:linear-gradient(28deg,transparent 49.4%,rgba(180,204,255,.55) 49.6%,transparent 50.3%),linear-gradient(155deg,transparent 49.3%,rgba(180,204,255,.32) 49.5%,transparent 50.2%); background-size:260px 220px,310px 290px; mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 80%,transparent); }
.topbar { position:sticky; top:0; z-index:20; height:54px; display:flex; align-items:center; gap:10px; padding:0 15px; background:rgba(7,16,42,.75); border-bottom:1px solid rgba(142,173,255,.12); backdrop-filter:blur(16px); }.topbar h1 { font-size:13px; margin:0; font-weight:800; letter-spacing:.02em; }.menu-button { width:28px; height:28px; display:grid; place-items:center; background:transparent; color:var(--yellow); }.user-pill { margin-left:auto; display:flex; align-items:center; gap:6px; background:rgba(44,54,87,.82); padding:6px 10px; border-radius:16px; font-size:9px; font-weight:800; color:#f6d83a; border:1px solid rgba(254,213,40,.22); max-width:165px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.user-pill small { text-transform:uppercase; font-size:7px; color:#98a4bd; }.status-dot { width:7px; height:7px; border-radius:50%; background:#54f7b0; box-shadow:0 0 9px #54f7b0; }
.app-content { width:min(100%,650px); padding:18px 14px 42px; margin:0 auto; position:relative; z-index:1; }.page-stack { display:grid; gap:16px; }.hero-strip { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:18px 17px; border:1px solid rgba(111,156,255,.2); border-radius:16px; background:linear-gradient(115deg,rgba(12,28,74,.86),rgba(21,45,105,.55)); box-shadow:var(--shadow); }.hero-strip h2 { font-size:20px; line-height:1.15; margin:8px 0 7px; letter-spacing:-.03em; }.hero-strip p { color:#95a9d3; font-size:11px; line-height:1.5; margin:0; max-width:310px; }.hero-signal { display:grid; justify-items:end; gap:6px; color:#8df7c6; font-size:9px; white-space:nowrap; }.hero-signal small { color:#7186b1; font-size:8px; }.pulse { width:14px; height:14px; border-radius:50%; background:#49f0a3; box-shadow:0 0 0 5px rgba(73,240,163,.13),0 0 22px rgba(73,240,163,.75); }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.metric-card { min-height:92px; padding:14px 13px; border-radius:13px; background:linear-gradient(150deg,rgba(21,45,95,.83),rgba(10,25,67,.86)); border:1px solid rgba(129,169,252,.15); box-shadow:0 9px 25px rgba(2,8,30,.18); position:relative; }.metric-icon { width:25px; height:25px; display:grid; place-items:center; margin-bottom:10px; border-radius:8px; background:rgba(0,0,0,.2); }.metric-card strong { display:block; font-size:21px; line-height:1; color:#f2f6ff; }.metric-card span { display:block; color:#7e90b7; font-size:9px; margin-top:7px; text-transform:uppercase; letter-spacing:.05em; }.metric-card.yellow .metric-icon { color:var(--yellow); }.metric-card.green .metric-icon { color:var(--green); }.metric-card.red .metric-icon { color:var(--red); }.metric-card.cyan .metric-icon { color:var(--cyan); }.metric-card.purple .metric-icon { color:var(--purple); }.metric-card.orange .metric-icon { color:var(--orange); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.section-title { display:flex; align-items:center; gap:7px; color:var(--cyan); }.section-title h2 { margin:0; font-size:14px; font-weight:900; letter-spacing:.035em; text-transform:uppercase; }.section-title.yellow { color:var(--yellow); }.section-title.pink { color:var(--pink); }.section-title.orange { color:var(--orange); }.section-title.cyan { color:var(--cyan); }.section-title.green { color:var(--green); }.text-link { color:#b7d4ff; background:transparent; display:flex; align-items:center; gap:4px; font-size:10px; }.text-link svg { transform:rotate(180deg); }.count-pill { color:#8fa8db; background:rgba(64,93,166,.38); padding:5px 8px; border-radius:12px; font-size:9px; }
.recent-list, .license-list { display:grid; gap:11px; }.license-mini, .license-card, .form-card, .table-card, .identity-card, .server-banner { background:linear-gradient(150deg,rgba(19,47,109,.87),rgba(9,28,74,.9)); border:1px solid rgba(123,166,252,.18); box-shadow:var(--shadow); border-radius:15px; }.license-mini { padding:13px; }.license-key { display:flex; align-items:center; gap:7px; color:var(--yellow); }.license-key b { color:#dbe7ff; font-size:11px; overflow:hidden; text-overflow:ellipsis; }.license-key .status-badge { margin-left:auto; }.license-meta { display:flex; flex-wrap:wrap; gap:12px; color:#8497bd; font-size:9px; margin-top:12px; }.license-meta b { color:#c9d8f6; font-weight:700; }.status-badge { padding:4px 7px; border-radius:10px; text-transform:uppercase; font-size:8px; font-weight:900; letter-spacing:.04em; }.status-badge.good { background:rgba(48,232,145,.14); color:#53edaa; }.status-badge.warn { background:rgba(255,207,36,.15); color:#ffd638; }.status-badge.danger { background:rgba(255,84,109,.14); color:#ff7182; }.status-badge.muted { background:rgba(157,177,221,.12); color:#9eacd0; }
.empty-state { text-align:center; padding:36px 15px; border:1px dashed rgba(126,168,250,.22); border-radius:15px; color:#8398c3; }.empty-state > span { width:42px; height:42px; margin:0 auto 12px; display:grid; place-items:center; color:var(--cyan); border-radius:50%; background:rgba(55,221,255,.08); }.empty-state b { display:block; color:#d4e0fa; font-size:12px; }.empty-state p { font-size:10px; margin:6px auto 0; max-width:260px; line-height:1.45; }

/* Drawer */
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:.25s var(--ease); z-index:30; backdrop-filter:blur(4px); }.drawer-backdrop.show { opacity:1; pointer-events:auto; }.drawer { position:fixed; z-index:31; top:0; bottom:0; left:0; width:min(86vw,310px); padding:17px 14px; display:flex; flex-direction:column; gap:16px; transform:translateX(-105%); transition:.28s var(--ease); background:linear-gradient(180deg,#0a1735,#071127); border-right:1px solid rgba(104,150,255,.18); box-shadow:20px 0 50px rgba(0,0,0,.42); }.drawer.open { transform:translateX(0); }.drawer-top { display:flex; align-items:center; justify-content:space-between; }.drawer-top .ghost-icon { color:#9aaccf; }.operator-card { display:flex; align-items:center; gap:9px; padding:12px 10px; border:1px solid rgba(131,165,246,.15); border-radius:14px; background:rgba(24,43,83,.62); }.avatar { width:30px; height:30px; display:grid; place-items:center; color:#a8d3ff; background:linear-gradient(145deg,#244d9d,#131d4b); border-radius:10px; }.avatar.large { width:50px; height:50px; border-radius:15px; }.operator-card div:nth-child(2) { display:grid; gap:4px; min-width:0; }.operator-card b { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.operator-card span:not(.live-chip) { color:#778cb6; font-size:9px; text-transform:uppercase; }.live-chip { margin-left:auto; color:#62f2ad; text-transform:uppercase; font-size:8px; display:flex; align-items:center; gap:4px; }.live-chip i { width:5px; height:5px; border-radius:50%; background:#62f2ad; }.drawer nav { display:grid; gap:7px; }.nav-item { display:flex; align-items:center; gap:9px; width:100%; padding:10px 11px; border-radius:9px; color:#a2b1d0; background:rgba(40,61,111,.48); text-align:left; font-size:10px; transition:.18s var(--ease); }.nav-item.active { color:#fff; background:linear-gradient(100deg,#239de6,#2b7bd5); box-shadow:0 7px 19px rgba(31,133,239,.22); }.nav-item.active svg { color:#ffe12f; }.nav-item b { margin-left:auto; color:#d8ff6c; }.nav-item:hover { background:rgba(61,90,155,.65); }.drawer-bottom { margin-top:auto; }.logout { color:#c6d3ee; }.drawer-build { display:flex; justify-content:space-between; color:#4f6184; font-size:8px; margin-top:15px; }

/* Forms, tables, controls */
.form-card, .table-card, .identity-card, .server-banner { padding:16px; }.form-card { display:grid; gap:15px; }.form-card.compact-card { gap:13px; }.field-label select { appearance:auto; }.field-label input[type=date] { color-scheme:dark; }.dot-label { width:6px; height:6px; border-radius:50%; display:inline-block; }.dot-label.yellow { background:var(--yellow); }.dot-label.cyan { background:var(--cyan); }.dot-label.green { background:var(--green); }
.segmented { display:grid; grid-template-columns:1fr 1fr; padding:3px; gap:3px; background:rgba(3,11,32,.44); border-radius:12px; }.segmented button { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; background:transparent; color:#8495b8; border-radius:9px; font-size:10px; }.segmented button.active { background:linear-gradient(100deg,#1c8fe2,#36d4f8); color:#07162b; font-weight:900; }.key-preview { padding:17px; display:grid; gap:7px; text-align:center; border:1px solid rgba(56,221,255,.18); border-radius:12px; background:linear-gradient(135deg,rgba(29,92,168,.42),rgba(21,60,115,.4)); }.key-preview span { font-size:8px; color:#90a9d0; letter-spacing:.17em; }.key-preview b { color:#9effd3; font-size:15px; letter-spacing:.11em; }.key-preview small { color:#6c83ae; font-size:8px; }.expiry-readout { display:flex; justify-content:center; align-items:center; gap:5px; border:1px solid rgba(255,210,41,.45); padding:11px 10px; border-radius:9px; color:#58e2ff; font-size:10px; background:rgba(88,110,44,.15); }.expiry-readout svg { color:var(--cyan); }.action-button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; border-radius:10px; padding:11px 14px; font-size:11px; font-weight:900; transition:.18s var(--ease); }.action-button.primary { background:linear-gradient(100deg,#3978ff,#2ce0ef); color:#071126; }.action-button.secondary { background:rgba(48,72,132,.5); color:#d8e6ff; border:1px solid rgba(136,172,244,.16); }.action-button.danger { background:linear-gradient(100deg,#bc3b56,#ff6876); }.action-button.soft { background:linear-gradient(100deg,#34d88b,#86ee93); color:#061a16; }.button-row { display:flex; flex-wrap:wrap; gap:9px; }.button-row > * { flex:1; }.glow-yellow { box-shadow:0 0 0 1px rgba(255,210,41,.06),0 18px 44px rgba(0,0,0,.24); }
.license-card { padding:14px; }.license-card-top { display:flex; align-items:center; gap:8px; }.package-mark { width:28px; height:28px; display:grid; place-items:center; color:var(--yellow); background:rgba(255,214,42,.12); border-radius:8px; }.license-card-top div { min-width:0; display:grid; gap:4px; }.license-card-top small { color:#8496ba; font-size:8px; }.license-card-top b { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.license-card-top .status-badge { margin-left:auto; }.license-lines { display:grid; gap:7px; padding:12px 0 9px; color:#889cc7; font-size:9px; border-bottom:1px solid rgba(133,166,236,.12); }.license-lines i { color:var(--yellow); font-style:normal; }.license-lines b { color:#b6cff9; }.secret-key { display:flex; gap:8px; align-items:center; margin:11px 0; padding:9px 10px; background:rgba(4,10,27,.75); border-radius:8px; border:1px solid rgba(125,165,241,.14); }.secret-key code { flex:1; color:#d77bf5; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.secret-key button { color:#849bc9; background:transparent; }.card-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.card-actions button, .row-actions button { color:#adc0e2; background:rgba(62,81,134,.37); border-radius:7px; padding:7px 4px; font-size:8px; display:flex; justify-content:center; align-items:center; gap:4px; }.card-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:10px; }.delete-link { color:#fb7587; background:transparent; font-size:9px; display:flex; align-items:center; gap:4px; }.status-line { display:flex; align-items:center; gap:5px; text-transform:uppercase; font-size:8px; font-weight:900; }.status-line i { width:6px; height:6px; border-radius:50%; background:currentColor; }.status-line.good { color:#52eaa9; }.status-line.warn { color:#ffdc35; }.status-line.danger { color:#ff7184; }.status-line.muted { color:#9aa8c3; }
.responsive-table { overflow-x:auto; }.table-row { min-width:510px; display:grid; grid-template-columns:1.35fr .7fr .75fr 1.25fr; gap:12px; align-items:center; padding:12px 8px; border-bottom:1px solid rgba(137,170,236,.11); font-size:10px; color:#b7c7e7; }.table-row:last-child { border:0; }.table-row > span:first-child { display:grid; gap:4px; }.table-row small { color:#7288b1; font-size:8px; overflow:hidden; text-overflow:ellipsis; }.table-head { padding-top:2px; color:#7389b5; text-transform:uppercase; letter-spacing:.07em; font-size:8px; }.role-chip { justify-self:start; color:#ffe23a; background:rgba(255,219,42,.13); border-radius:10px; padding:4px 7px; text-transform:uppercase; font-size:8px; }.row-actions { display:flex; gap:5px; }.mono-code { color:#67e8ff; font-family:ui-monospace,monospace; }
.identity-card { display:flex; align-items:center; gap:12px; }.identity-card > div:nth-child(2) { display:grid; gap:5px; min-width:0; }.identity-card small { color:#7a8eb9; font-size:8px; }.identity-card b { font-size:13px; }.identity-card span:not(.role-chip) { color:#8ba0c6; font-size:10px; overflow:hidden; text-overflow:ellipsis; }.identity-card .role-chip { margin-left:auto; }

/* Server */
.server-banner { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(110deg,rgba(15,75,87,.5),rgba(16,42,102,.72)); }.server-banner h2 { font-size:19px; margin:10px 0 5px; }.server-banner p { margin:0; color:#7f9ac7; font-size:10px; }.server-banner > svg { color:#61ecaf; opacity:.8; }.server-state { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:12px; color:#55eba7; background:rgba(49,225,144,.12); text-transform:uppercase; font-size:9px; font-weight:900; }.server-state i { width:6px; height:6px; border-radius:50%; background:currentColor; }.server-state.maintenance { color:#ffd43c; background:rgba(255,211,60,.12); }.server-state.offline { color:#ff6878; background:rgba(255,104,120,.12); }.server-metrics { grid-template-columns:repeat(2,1fr); }.mode-grid { display:grid; gap:8px; }.mode-option { display:grid; grid-template-columns:22px 1fr; column-gap:7px; align-items:center; text-align:left; padding:13px; border-radius:11px; background:rgba(22,49,107,.56); border:1px solid rgba(124,165,249,.12); color:#a6b8df; }.mode-option svg { grid-row:span 2; color:#51efaa; }.mode-option:nth-child(2) svg { color:#ff7582; }.mode-option:nth-child(3) svg { color:#ffdb3b; }.mode-option b { font-size:11px; }.mode-option small { color:#728ab5; font-size:8px; margin-top:4px; }.mode-option.selected { border-color:#e6d34b; box-shadow:0 0 0 1px rgba(255,217,50,.2) inset; background:rgba(46,60,100,.78); }.alert-types { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.alert-types button { display:grid; gap:6px; place-items:center; padding:12px 5px; border-radius:9px; background:rgba(24,51,109,.6); color:#a2b6e1; border:1px solid rgba(133,171,251,.08); text-transform:capitalize; font-size:9px; }.alert-types button span { font-size:14px; }.alert-types button.selected { border-color:currentColor; background:rgba(54,78,133,.65); }.alert-types .info { color:#69a5ff; }.alert-types .warning { color:#ffdd37; }.alert-types .danger { color:#ff6878; }.alert-types .success { color:#55e99c; }.active-alert { display:flex; align-items:center; gap:9px; color:#bae8ff; background:rgba(33,120,169,.25); border:1px solid rgba(66,196,242,.2); padding:9px 11px; border-radius:10px; font-size:10px; }.active-alert span { text-transform:uppercase; font-size:8px; color:#73ddff; display:flex; align-items:center; gap:4px; }

/* Modal and loading */
.modal-layer { position:fixed; inset:0; display:grid; place-items:center; padding:18px; z-index:50; background:rgba(3,8,20,.68); backdrop-filter:blur(8px); animation:fadeIn .18s var(--ease); }.modal { width:min(100%,360px); max-height:calc(100vh - 36px); overflow:auto; position:relative; padding:23px 18px 18px; display:grid; gap:13px; border:1px solid rgba(112,164,255,.26); border-radius:17px; background:linear-gradient(160deg,#132552,#0a1635); box-shadow:0 22px 70px rgba(0,0,0,.55),0 0 30px rgba(47,126,255,.12); animation:modalIn .22s var(--ease); }.modal-close { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(117,147,212,.12); color:#9db2d8; }.modal h2 { text-align:center; font-size:17px; margin:0; }.modal-sub { margin:0; text-align:center; color:#8ea4ce; font-size:10px; }.modal-icon { width:49px; height:49px; border-radius:50%; display:grid; place-items:center; margin:0 auto; }.modal-icon.good { color:#54edaa; background:rgba(47,225,143,.12); }.modal-icon.cyan { color:var(--cyan); background:rgba(55,221,255,.12); }.modal-icon.danger { color:#ffdb3a; background:rgba(255,219,58,.12); }.modal-title { display:flex; align-items:center; gap:7px; color:#b8d1ff; font-size:13px; font-weight:800; }.modal-title svg { color:var(--cyan); }.modal-key { padding:11px; border-radius:8px; background:rgba(2,10,30,.7); color:#ff9eea; font:11px ui-monospace,monospace; text-align:center; }.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.result-grid { display:grid; gap:8px; padding:12px; border-radius:10px; background:rgba(3,12,34,.6); color:#8ba3cf; font-size:10px; }.result-grid span { display:flex; justify-content:space-between; gap:10px; }.result-grid b { color:#e1ecff; }.good-text { color:#58ebaa !important; }.device-empty { display:grid; justify-items:center; gap:8px; text-align:center; padding:22px 10px; border-radius:11px; border:1px dashed rgba(107,161,248,.2); }.device-empty span { color:#a1bedf; }.device-empty b { color:#d7e3fc; font-size:12px; }.device-empty small { color:#748dbb; font-size:9px; max-width:190px; line-height:1.4; }.modal .action-button { width:100%; }.loading-screen { min-height:100vh; display:grid; place-items:center; align-content:center; gap:22px; background:#030508; }.loading-screen .brand-lockup { transform:scale(1.15); }.loader { width:22px; height:22px; border:2px solid rgba(101,144,255,.25); border-top-color:#47e0ff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes fadeIn { from{opacity:0}to{opacity:1} } @keyframes modalIn { from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none} } @keyframes spin { to{transform:rotate(360deg)} }
@media (min-width:760px) { .app-content { width:min(100%,950px); padding:26px 28px 60px; }.metric-grid { grid-template-columns:repeat(3,1fr); }.hero-strip { padding:24px; }.license-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.mode-grid { grid-template-columns:repeat(3,1fr); }.server-metrics { grid-template-columns:repeat(4,1fr); }.drawer { width:290px; }.topbar { padding:0 28px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }