:root {
  --bg: #06080b;
  --panel: rgba(11, 14, 19, .90);
  --panel-2: rgba(14, 18, 24, .92);
  --sidebar: rgba(7, 10, 14, .91);
  --line: rgba(115, 135, 162, .18);
  --line-strong: rgba(122, 162, 247, .28);
  --text: #f4f7fb;
  --muted: #8f9aa8;
  --muted-2: #667180;
  --accent: #7aa2f7;
  --accent-2: #9ab9ff;
  --accent-soft: rgba(122, 162, 247, .10);
  --danger: #e86a78;
  --warning: #f2bd54;
  --success: #8bd8b4;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; background:var(--bg); color:var(--text); font-family:"Manrope", system-ui, sans-serif; overflow:hidden; }
button, input, select { font: inherit; }
button { color:inherit; }
#dna-background { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.ambient { position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(circle at 60% 28%, rgba(122,162,247,.035), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.006), transparent 30%); }
.is-hidden { display:none !important; }
.glass-card { border:1px solid var(--line); background:linear-gradient(180deg, rgba(15,19,25,.96),rgba(9,12,16,.95)); box-shadow:0 28px 80px rgba(0,0,0,.46); backdrop-filter:blur(14px); }
.login-view { position:relative; z-index:1; width:100%; height:100%; display:grid; place-items:center; padding:32px; }
.login-card { width:min(460px, calc(100vw - 48px)); border-radius:18px; padding:32px; }
.eyebrow { color:var(--accent); font:600 10px/1 "JetBrains Mono", monospace; letter-spacing:1.65px; margin-bottom:16px; }
.login-card h1 { margin:0; font-size:30px; letter-spacing:-1px; }
.login-copy { color:var(--muted); font-size:13px; line-height:1.75; margin:12px 0 26px; }
.primary-button { min-height:46px; border:0; border-radius:10px; background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#080b10; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; text-decoration:none; box-shadow:0 10px 26px rgba(122,162,247,.14); transition:.18s ease; }
.primary-button:hover { transform:translateY(-1px); filter:brightness(1.05); }
.oauth-button svg { width:20px; height:20px; fill:#080b10; }
.login-foot { color:#535f6e; font:500 9px/1 "JetBrains Mono", monospace; text-align:center; margin-top:18px; letter-spacing:1.3px; }
.app-shell { position:relative; z-index:1; height:100%; display:grid; grid-template-columns:260px minmax(0,1fr); grid-template-rows:44px minmax(0,1fr); }
.topbar { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:rgba(5,7,10,.82); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.3px; color:#9aa4b0; }
.brand strong { color:#f4f7fb; font-size:12px; }
.brand-separator { width:1px; height:14px; background:#303741; }
.brand-mark { width:15px;height:15px;position:relative; display:inline-block; }
.brand-mark i { position:absolute; left:7px; top:0; width:1px; height:15px; background:#96a3b4; }
.brand-mark i:last-child { transform:rotate(90deg); }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.connection-chip { display:flex; align-items:center; gap:7px; color:#818c99; font-size:10px; }
.connection-chip .dot { width:6px;height:6px;border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(139,216,180,.07); }
.sidebar { grid-row:2; grid-column:1; position:relative; overflow:hidden; padding:18px 12px 60px; background:var(--sidebar); border-right:1px solid var(--line); backdrop-filter:blur(14px); }
.profile-card { height:84px; display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:14px; padding:13px; background:linear-gradient(180deg,rgba(15,19,25,.92),rgba(10,13,18,.9)); }
.avatar { width:54px;height:54px;border-radius:50%; display:grid;place-items:center; background:linear-gradient(145deg,#161d2b,#0e1219); border:2px solid #313b49; color:var(--accent); font-weight:800; font-size:18px; background-size:cover; background-position:center; flex:none; }
.profile-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.profile-copy strong { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-copy span { color:#a0a9b5; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-copy small { color:#657180; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-nav { margin-top:14px; display:flex; flex-direction:column; gap:4px; }
.nav-category, .nav-item, .logout-button { width:100%; border:0; background:transparent; cursor:pointer; text-align:left; display:flex; align-items:center; }
.nav-category { height:40px; border-radius:8px; gap:11px; padding:0 11px; color:#747e8b; font-size:11px; font-weight:700; transition:.16s ease; }
.nav-category:hover, .nav-category.is-open { color:#eef2f7; background:linear-gradient(180deg,rgba(18,23,30,.95),rgba(11,15,20,.95)); outline:1px solid rgba(84,100,121,.28); }
.nav-category b { margin-left:auto; color:#687484; font-size:13px; font-weight:500; }
.category-icon,.nav-icon { width:17px; height:17px; display:inline-grid; place-items:center; flex:none; color:#6f7b89; }
.category-icon svg,.nav-icon svg { width:100%;height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-children { overflow:hidden; max-height:180px; opacity:1; transition:max-height .2s ease,opacity .2s ease; padding-left:18px; }
.nav-children.is-collapsed { max-height:0; opacity:0; }
.nav-item { height:35px; border-radius:7px; color:#77818e; font-size:12px; font-weight:600; gap:8px; padding:0 8px 0 3px; }
.nav-item:hover { color:#cbd2db; background:rgba(255,255,255,.018); }
.nav-item.is-active { color:#f5f7fb; }
.nav-item.is-active .nav-icon { color:#dce5f5; }
.branch { width:15px; color:#596473; font-family:monospace; margin-top:-2px; }
.logout-button { position:absolute; left:12px; bottom:12px; width:calc(100% - 24px); height:36px; border-radius:8px; color:#7e8996; gap:10px; padding:0 10px; font-size:12px; font-weight:600; }
.logout-button:hover { color:#d3d9e1; background:rgba(255,255,255,.025); }
.content-shell { grid-column:2; grid-row:2; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.page-head { flex:none; min-height:108px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:18px 26px 14px 18px; }
.page-head h2 { margin:0; font-size:32px; line-height:1.15; letter-spacing:-1.15px; font-weight:800; }
.page-head p { margin:8px 0 0; color:var(--muted); font-size:13px; max-width:760px; }
.status-pill { min-width:82px; height:40px; border:1px solid var(--line); background:#0c1117; border-radius:999px; display:flex;align-items:center; justify-content:center; gap:9px; padding:0 15px; color:#c5ccd5; font-size:12px; font-weight:700; flex:none; }
.status-pill span { width:8px;height:8px;border-radius:50%; background:var(--accent); }
.status-pill[data-mode="busy"] span { background:var(--warning); }
.status-pill[data-mode="error"] span { background:var(--danger); }
.page-scroll { min-height:0; overflow-y:auto; padding:14px 26px 42px 18px; scrollbar-width:thin; scrollbar-color:#2b3440 transparent; }
.page-scroll::-webkit-scrollbar{width:8px}.page-scroll::-webkit-scrollbar-thumb{background:#29313c;border-radius:8px}.page-scroll::-webkit-scrollbar-track{background:transparent}
.card { border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,rgba(14,18,24,.88),rgba(9,12,16,.87)); box-shadow:0 14px 46px rgba(0,0,0,.12); padding:18px; margin-bottom:16px; }
.card h3 { margin:0 0 6px; font-size:16px; font-weight:800; letter-spacing:-.3px; }
.card-copy { margin:0 0 20px; color:var(--muted); font-size:12px; line-height:1.65; }
.field-label { display:block; color:#9ca6b2; font-size:10px; font-weight:800; letter-spacing:.7px; margin:0 0 7px; }
.field-row { display:flex; gap:12px; align-items:flex-end; }
.field { min-width:0; flex:1; }
.input, .select { width:100%; height:46px; border:1px solid var(--line); border-radius:10px; background:#090d12; color:#e8edf4; outline:none; padding:0 13px; font-size:13px; transition:.16s ease; }
.input:focus,.select:focus { border-color:rgba(122,162,247,.7); box-shadow:0 0 0 3px rgba(122,162,247,.07); }
.input::placeholder { color:#505b69; }
.action-button { height:46px; border:1px solid rgba(122,162,247,.34); background:linear-gradient(180deg,rgba(122,162,247,.96),rgba(105,144,226,.96)); color:#070a0e; border-radius:10px; padding:0 21px; font-weight:800; font-size:12px; cursor:pointer; min-width:178px; }
.action-button.secondary { color:#c7d0dc; background:#0c1118; border-color:var(--line); }
.action-button.danger { color:#ffd8dd; background:rgba(232,106,120,.10); border-color:rgba(232,106,120,.22); }
.action-button:disabled { opacity:.45; cursor:not-allowed; }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.info-box { border:1px solid var(--line); border-radius:12px; background:#090d12; padding:12px; }
.info-box span { display:block; color:var(--muted-2); font-size:10px; text-transform:uppercase; letter-spacing:.55px; margin-bottom:5px; }
.info-box strong { font-size:17px; }
.notice { border:1px solid rgba(122,162,247,.18); background:rgba(122,162,247,.055); color:#9eabc0; border-radius:12px; padding:12px 14px; font-size:12px; line-height:1.55; margin-top:14px; }
.progress { height:10px; border:1px solid var(--line); border-radius:999px; background:#080c10; overflow:hidden; margin:14px 0 0; }
.progress span { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .25s ease; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.setting-row { min-height:68px; border-bottom:1px solid rgba(115,135,162,.12); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.setting-row:last-child { border-bottom:0; }
.setting-copy strong { display:block; font-size:13px; margin-bottom:4px; }
.setting-copy span { color:var(--muted); font-size:11px; }
.switch { position:relative; width:46px;height:26px; flex:none; }
.switch input { opacity:0; width:0;height:0; }
.switch-track { position:absolute; inset:0; border-radius:999px; background:#1a212b; border:1px solid #2c3541; cursor:pointer; transition:.18s ease; }
.switch-track::after { content:""; position:absolute; width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#7d8897;transition:.18s ease; }
.switch input:checked + .switch-track { background:rgba(122,162,247,.24); border-color:rgba(122,162,247,.62); }
.switch input:checked + .switch-track::after { transform:translateX(20px); background:var(--accent-2); }
.rich-status { display:flex;align-items:center;justify-content:space-between;gap:16px; }
.rich-status .state { display:flex;align-items:center;gap:10px; font-size:13px;font-weight:700; }
.rich-status .state i { width:8px;height:8px;border-radius:50%;background:#4e5967; }
.rich-status.is-on .state i { background:var(--success); box-shadow:0 0 0 4px rgba(139,216,180,.06); }
.button-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.toast { position:fixed; z-index:10; right:22px; bottom:22px; min-width:260px; max-width:420px; padding:13px 15px; border-radius:11px; border:1px solid var(--line); background:rgba(11,15,20,.96); color:#d7dde6; font-size:12px; box-shadow:0 18px 50px rgba(0,0,0,.38); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease; }
.toast.is-visible { opacity:1; transform:translateY(0); }
@media (max-width: 1024px) { .app-shell{grid-template-columns:235px minmax(0,1fr)} .sidebar{padding-left:10px;padding-right:10px}.page-head{padding-right:18px}.page-scroll{padding-right:18px} }
@media (max-width: 760px) { html,body{overflow:auto}.app-shell{display:block;overflow:auto}.topbar{height:44px;position:sticky;top:0;z-index:5}.sidebar{position:relative;width:100%;height:auto;border-right:0;border-bottom:1px solid var(--line);padding-bottom:18px}.logout-button{position:static;margin-top:10px;width:100%}.content-shell{min-height:700px}.page-head{padding:20px 18px}.page-head h2{font-size:27px}.page-scroll{overflow:visible;padding:10px 18px 40px}.field-row,.split{display:flex;flex-direction:column;align-items:stretch}.action-button{width:100%}.info-grid{grid-template-columns:1fr}.topbar-actions{display:none} }