*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}a{color:inherit}button,input,textarea{font:inherit}:root{--bg: #0d1526;--panel: rgba(255,255,255,.06);--panel-strong: rgba(255,255,255,.1);--card: rgba(255,255,255,.07);--card-border: rgba(255,255,255,.1);--text: #b1b1b1ff;--muted: rgba(229,231,235,.68);--primary: #E63946;--primary-2: #C62836;--brand-dark: #1D3557;--danger: #ef4444;--shadow: 0 10px 30px rgba(0,0,0,.3);--radius: 16px}.app{display:flex;min-height:100vh}.sidebar{width:270px;padding:18px;background:linear-gradient(180deg,#ffffff0f,#ffffff08);border-right:1px solid var(--card-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:14px}.sidebar.is-collapsed{width:78px;padding:16px 10px}.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.sidebar-actions{display:flex;align-items:center}.logout-button{padding:8px;width:40px;height:40px;border:0;background:transparent}.logout-button .nav-icon{width:18px;height:18px}.brand{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;background:#ffffff0d;border:1px solid var(--card-border)}.sidebar.is-collapsed .brand{justify-content:center;padding:10px}.sidebar.is-collapsed .sidebar-top{flex-direction:column}.brand-mark{width:80px;height:42px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 30% 30%,#e63946f2,#1d3557d9);color:#f9fafb;font-weight:900;letter-spacing:.5px}.brand-mark img{max-width:100%;max-height:100%;display:block}.sidebar.is-collapsed .brand-mark{width:42px;height:42px}.brand-title{font-weight:850;line-height:1.1}.brand-sub{font-size:12px;color:var(--muted)}.sidebar.is-collapsed .brand-meta{display:none}.nav{display:flex;flex-direction:column;gap:6px}.sidebar.is-collapsed .nav{align-items:center}.nav a{text-decoration:none;padding:10px 12px;border-radius:12px;border:1px solid transparent;color:var(--text);background:transparent;display:flex;align-items:center;gap:10px}.sidebar.is-collapsed .nav a{justify-content:center;padding:11px}.nav-icon{width:20px;height:20px;display:grid;place-items:center}.nav-icon svg{width:20px;height:20px}.nav-label{white-space:nowrap}.sidebar.is-collapsed .nav-label{display:none}.nav a:hover{background:#ffffff0d;border-color:#ffffff14}.nav a.active{background:#e6394633;border-color:#e6394659}.sidebar-footer{margin-top:auto;padding-top:8px}.sidebar.is-collapsed .sidebar-footer .btn{justify-content:center;padding:10px}.main{flex:1;display:flex;flex-direction:column;min-width:0}.topbar{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;gap:12px}.topbar-title{font-weight:800;letter-spacing:.2px}.sidebar-toggle{width:40px;height:40px;padding:0;display:grid;place-items:center}.sidebar-toggle svg{width:20px;height:20px}.content{padding:18px;max-width:1200px;width:100%;margin:0 auto}.stack{display:grid;gap:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:980px){.app{flex-direction:column}.sidebar{position:fixed;top:0;left:0;right:0;height:auto;width:100%;flex-direction:column;align-items:stretch;padding:8px 12px 10px;z-index:50}.sidebar.is-collapsed{width:100%;padding:10px 12px 12px}.sidebar-top{position:relative;width:100%;flex-direction:row;align-items:center;gap:10px;justify-content:space-between;height:44px}.sidebar-actions{position:static;margin-left:auto}.brand{padding:0;background:transparent;border-color:transparent;flex-direction:row;align-items:center;text-align:left;justify-content:flex-start}.brand-mark{width:32px;height:32px}.brand-meta{display:none}.nav{flex-direction:row;gap:6px;flex:0 0 auto;justify-content:center;overflow-x:auto;padding:0 4px;width:100%;margin-top:6px;display:flex}.nav a{padding:6px 8px;border:0;background:transparent}.nav-icon{width:18px;height:18px}.nav-icon svg{width:18px;height:18px}.nav a{padding:8px 10px}.nav a.active{background:#e639462e}.sidebar-footer{margin-top:0;padding-top:0}.sidebar-toggle{display:none}.main{padding-top:110px}.topbar{display:none}.grid{grid-template-columns:1fr}.card-top{flex-direction:column;align-items:flex-start}.card-right{flex-wrap:wrap}.remove-btn{margin-left:0}.page-head{flex-direction:column;align-items:flex-start}.page-actions{width:100%;flex-wrap:wrap;justify-content:flex-start}.input{width:100%}.stats-grid,.quick-grid{grid-template-columns:1fr}}.h2{margin:0;font-size:20px;font-weight:900}.muted{color:var(--muted)}.small{font-size:12px}.pre{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.page-actions{display:flex;gap:10px;align-items:center}.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);width:100%;min-width:0;position:relative}.card-title{font-weight:850;margin-bottom:10px}.card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.card-main{min-width:0}.card-right{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;width:100%}.remove-btn{margin-left:auto}.mini-spinner{width:16px;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.25);border-top-color:#e63946e6;animation:spin .8s linear infinite;display:inline-block}.divider{height:1px;background:#ffffff1a;margin:12px 0}.label{font-size:12px;color:var(--muted);font-weight:700}.stats-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card{background:linear-gradient(135deg,#1d355773,#0d152673),#ffffff0a;border-color:#ffffff1f;position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;inset:0;background:radial-gradient(200px 120px at 90% -20%,rgba(230,57,70,.35),transparent 60%);opacity:.5;pointer-events:none}.stat-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}.stat-label{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:#e5e7ebb8;font-weight:800}.stat-value{font-size:32px;font-weight:900;margin:8px 0 4px;color:#f8fafc;position:relative;z-index:1}.stat-sub{font-size:13px;color:#e5e7ebb8;position:relative;z-index:1}.stat-chip{font-size:11px;font-weight:900;padding:4px 8px;border-radius:999px;border:1px solid transparent;position:relative;z-index:1}.stat-chip.ok{background:#22c55e29;border-color:#22c55e52;color:#bbf7d0}.stat-chip.warn{background:#f59e0b29;border-color:#f59e0b52;color:#fde68a}.stat-chip.danger{background:#ef444429;border-color:#ef444452;color:#fecaca}.quick-grid{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}.quick-card .input{width:100%}.quick-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.preview-frame{width:100%;height:220px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#0003}.input,.textarea{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:var(--text);border-radius:12px;padding:10px 12px;outline:none}.input{width:320px;max-width:100%}.textarea{width:100%;min-height:84px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:12.5px;line-height:1.35}.input:focus,.textarea:focus{border-color:#e6394673;box-shadow:0 0 0 4px #e639461f}.btn{border:0;border-radius:12px;padding:10px 12px;background:linear-gradient(180deg,var(--primary),var(--primary-2));color:#fff;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center}.btn:hover{filter:brightness(1.05)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-ghost{background:#ffffff0f;border:1px solid rgba(255,255,255,.12)}.btn-danger{background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#fecaca}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:850;border:1px solid transparent}.badge:before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.65}.badge.ok{background:#22c55e24;border-color:#22c55e47;color:#bbf7d0}.badge.warn{background:#f59e0b24;border-color:#f59e0b47;color:#fde68a}.badge.bad{background:#ef444424;border-color:#ef44444d;color:#fecaca}.badge.neutral{background:var(--chip);border-color:var(--border);color:var(--text-soft)}.badge.sm{padding:5px 9px;font-size:11px}.pill{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid rgba(255,255,255,.1);background:#ffffff0f;min-width:72px;text-align:center}.pill.on{border-color:#22c55e47;background:#22c55e1f;color:#bbf7d0}.pill.off{border-color:#94a3b838;background:#94a3b81a;color:#e5e7ebcc}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace}.table-wrap{overflow:auto;border-radius:14px;border:1px solid rgba(255,255,255,.1)}.table{width:100%;border-collapse:collapse;min-width:780px;background:#ffffff08}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}.table th{font-size:12px;color:#e5e7ebb8;letter-spacing:.3px;text-transform:uppercase}.cell-title{font-weight:900}.toggle{width:46px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#ffffff14;position:relative;cursor:pointer;padding:0;transition:.16s ease;display:inline-flex;align-items:center}.toggle:hover{border-color:#fff3}.toggle.on{background:#22c55e38;border-color:#22c55e66}.toggle:not(.on):not(:disabled){background:#e6394638;border-color:#e6394659}.toggle:disabled{opacity:.6;cursor:not-allowed}.toggle-knob{width:22px;height:22px;border-radius:999px;background:#ffffffeb;position:absolute;left:3px;transition:.16s ease;box-shadow:0 6px 18px #00000059}.toggle.on .toggle-knob{left:21px}.codebox{position:relative;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#00000038;overflow:hidden}.codebox textarea{border:0;background:transparent;width:100%;min-height:92px;padding:14px;color:#e5e7ebeb;resize:vertical;outline:none;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:12.5px;line-height:1.35}.codebox-actions{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:2}.icon-btn{height:34px;padding:0 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:#e5e7ebeb;cursor:pointer;font-weight:800;display:inline-flex;align-items:center;gap:8px}.icon-btn:hover{border-color:#fff3;background:#ffffff14}.icon-btn:disabled{opacity:.6;cursor:not-allowed}.icon-btn.ok{border-color:#22c55e59;background:#22c55e24;color:#bbf7d0}.copy-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.copy-icon svg{width:16px;height:16px}.codebox{border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#00000038;overflow:hidden}.codebox-head{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 8px 12px;border-bottom:1px solid rgba(255,255,255,.1);background:#ffffff08}.codebox-title{font-size:12px;color:#e5e7ebb3;font-weight:800;letter-spacing:.2px}.codebox-copy{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:#e5e7ebeb;cursor:pointer;font-weight:850}.codebox-copy:hover{border-color:#ffffff38;background:#ffffff14}.codebox-copy.ok{border-color:#22c55e59;background:#22c55e24;color:#bbf7d0}.codebox-pre{margin:0;padding:14px;overflow:auto;max-height:220px}.codebox-pre code{display:block;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:12.5px;line-height:1.45;color:#e5e7ebeb}.brand-mark img{height:auto;width:70px}.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;padding:48px 8vw;background:radial-gradient(1200px 600px at 10% 0%,rgba(230,57,70,.15),transparent 60%),radial-gradient(900px 500px at 100% 30%,rgba(29,53,87,.35),transparent 65%),var(--bg)}.login-hero{display:flex;flex-direction:column;gap:18px;max-width:520px}.login-hero .brand{width:fit-content;padding:14px 16px;background:#1d355759;border-color:#e6394640}.login-brand{align-self:center;text-align:center;animation:riseIn .7s ease both}.login-hero .brand-meta{text-align:center}.login-title{font-size:clamp(26px,2.6vw,36px);font-weight:900;margin:0;color:#f8fafc}.login-subtitle{margin:0;color:var(--muted);font-size:14px}.login-card{width:min(420px,100%);margin-left:auto;padding:28px;border-radius:20px;background:#0f172abf;border:1px solid rgba(230,57,70,.25);box-shadow:0 18px 40px #00000073;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.login-card h2{margin:0 0 18px;font-weight:900;color:#f8fafc}.login-fields{display:grid;gap:12px}.login-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#f8fafc}.login-input:focus{border-color:#e6394673;box-shadow:0 0 0 4px #e639461f}.login-action{width:100%;margin-top:12px}.login-animate{animation:fadeInUp .72s ease both}.login-animate.delay-1{animation-delay:.12s}.login-animate.delay-2{animation-delay:.24s}.login-loading{display:inline-flex;align-items:center;gap:8px}.loading-dots{display:inline-flex;gap:3px}.loading-dots span{animation:pulseDot 1s infinite ease-in-out;opacity:.35}.loading-dots span:nth-child(2){animation-delay:.15s}.loading-dots span:nth-child(3){animation-delay:.3s}.login-error{color:#fecaca;background:#e639461f;border:1px solid rgba(230,57,70,.35);padding:8px 10px;border-radius:10px;font-size:13px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes riseIn{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulseDot{0%,to{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.login-page{grid-template-columns:1fr;padding:40px 6vw}.login-card{margin:0}.login-hero{max-width:100%;text-align:center;align-items:center}}@media(max-width:520px){.login-page{padding:32px 5vw}.login-card{padding:22px}}