:root {
    color-scheme: dark;
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --bg: #0f1115;
    --surface: rgba(31, 34, 40, .76);
    --surface-2: rgba(41, 45, 52, .78);
    --border: rgba(255,255,255,.10);
    --text: #f4f5f7;
    --muted: #a8adb7;
    --accent: #6aa9ff;
    --accent-strong: #438ff5;
    --danger: #ff6b78;
    --success: #70d6a5;
    --shadow: 0 24px 80px rgba(0,0,0,.38);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 15% 10%, #17243b 0, transparent 34%), radial-gradient(circle at 85% 90%, #202239 0, transparent 32%), var(--bg); color: var(--text); }
button,input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; position: relative; overflow: hidden; }
.ambient { position: fixed; border-radius: 999px; filter: blur(90px); opacity: .16; pointer-events: none; }
.ambient-a { width: 420px; height: 420px; background: #4f8fff; top: -160px; right: 8%; }
.ambient-b { width: 360px; height: 360px; background: #8d6cff; bottom: -180px; left: 8%; }
.glass-card { background: linear-gradient(145deg, rgba(35,38,44,.88), rgba(23,25,30,.82)); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(24px); border-radius: 18px; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(430px, 100%); padding: 34px; }
.brand-mark { width: 52px; height: 52px; border-radius: 14px; display:grid; place-items:center; font-size:25px; font-weight:700; background: linear-gradient(145deg, #6eb3ff, #5779f3); box-shadow: 0 12px 36px rgba(79,143,255,.25); margin-bottom: 22px; }
.brand-mark.small { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; margin:0; }
h1 { margin: 0 0 8px; font-size: 29px; letter-spacing: -.5px; }
h2 { margin: 0; font-size: 18px; }
p { margin: 0; }
.muted { color: var(--muted); }
.compact { margin-top: 5px; font-size: 13px; }
.stack { display: grid; gap: 16px; margin-top: 28px; }
label { display: grid; gap: 8px; color: #dce0e7; font-size: 13px; font-weight: 600; }
input { width: 100%; border: 1px solid var(--border); color: var(--text); background: rgba(9,10,13,.45); border-radius: 10px; padding: 11px 12px; outline: none; transition: border .15s, box-shadow .15s, background .15s; }
input:focus { border-color: rgba(106,169,255,.7); box-shadow: 0 0 0 3px rgba(106,169,255,.13); background: rgba(12,14,18,.72); }
button { border: 1px solid transparent; border-radius: 10px; min-height: 40px; padding: 0 15px; color: var(--text); transition: transform .08s, filter .15s, background .15s; }
button:active { transform: scale(.98); }
.primary { background: linear-gradient(180deg, #63a8ff, #438ff5); color: #07111e; font-weight: 700; }
.primary:hover { filter: brightness(1.06); }
.secondary { background: rgba(255,255,255,.07); border-color: var(--border); }
.ghost { background: transparent; border-color: var(--border); }
.error { color: #ff8a94; min-height: 18px; font-size: 13px; }
.hidden { display: none !important; }
.dashboard { min-height: 100vh; }
.topbar { height: 64px; display:flex; align-items:center; justify-content:space-between; padding: 0 28px; border-bottom: 1px solid var(--border); background: rgba(15,17,21,.72); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }
.brand-row { display:flex; align-items:center; gap:12px; }
.brand-row div:last-child { display:grid; gap:2px; }
.brand-row span { font-size: 12px; color:var(--muted); }
.content { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 60px; }
.title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.status-pill,.tag { font-size:12px; padding:5px 9px; border-radius:999px; background: rgba(106,169,255,.13); border:1px solid rgba(106,169,255,.22); color:#9dc7ff; }
.tag.green { color:var(--success); background:rgba(112,214,165,.10); border-color:rgba(112,214,165,.22); }
.grid.two { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.panel { padding: 22px; }
.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.panel label + label { margin-top:16px; }
.inline-input { display:grid; grid-template-columns: 1fr 42px 42px; gap:8px; }
.icon-button { padding:0; min-width:42px; background:rgba(255,255,255,.06); border-color:var(--border); }
.button-row { display:flex; gap:9px; margin-top:18px; }
.hint { margin-top:16px; font-size:12px; line-height:1.5; color:var(--muted); padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.055); }
.hint.warning { color:#d7c6a2; }
code { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; }
.info-list { display:grid; gap:11px; }
.info-list > div { display:grid; grid-template-columns: 120px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.info-list span { color:var(--muted); font-size:13px; }
.info-list strong { font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.keys-panel { margin-top:16px; }
.keys-list { display:grid; gap:8px; }
.key-row { display:grid; grid-template-columns:minmax(150px,1.2fr) minmax(220px,2fr) auto auto; gap:10px; align-items:center; padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); }
.key-name { font-weight:650; }
.key-mask { font-family:"Cascadia Code",Consolas,monospace; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.switch { width:42px; height:24px; border-radius:999px; background:#383d46; border:1px solid var(--border); position:relative; cursor:pointer; }
.switch::after { content:""; width:18px; height:18px; border-radius:50%; background:#dadde3; position:absolute; top:2px; left:3px; transition:.15s; }
.switch.on { background:#438ff5; }
.switch.on::after { left:19px; background:#fff; }
.delete-button { width:34px; height:34px; min-height:34px; padding:0; background:rgba(255,107,120,.08); color:#ff8b95; border-color:rgba(255,107,120,.16); }
.add-key-row { display:grid; grid-template-columns:minmax(180px,1fr) minmax(300px,2fr) auto; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.empty-state { color:var(--muted); text-align:center; padding:28px 12px; border:1px dashed rgba(255,255,255,.12); border-radius:12px; }
@media (max-width: 800px) { .grid.two { grid-template-columns:1fr; } .key-row { grid-template-columns:1fr auto auto; } .key-mask { grid-column:1/-1; grid-row:2; } .add-key-row { grid-template-columns:1fr; } .content { width:min(100% - 22px,1120px); } }