:root {
  --accent: #FE6113;
  --bg: #090a0c;
  --surface: #101216;
  --surface-2: #15181d;
  --border: rgba(255,255,255,.075);
  --border-strong: rgba(255,255,255,.13);
  --text: #f7f7f8;
  --muted: #949aa6;
  --muted-2: #666d78;
  --success: #4ad08b;
  --danger: #ef6b72;
  --shadow: 0 22px 70px rgba(0,0,0,.35);
  --radius: 16px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: rgba(20,24,32,.08);
  --border-strong: rgba(20,24,32,.14);
  --text: #14171c;
  --muted: #626a76;
  --muted-2: #858d98;
  --shadow: 0 22px 70px rgba(35,41,52,.12);
}
:root[data-theme="light"] body { background: radial-gradient(900px 420px at 50% -180px, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%), var(--bg); }
:root[data-theme="light"] .sidebar, :root[data-theme="light"] .topbar, :root[data-theme="light"] .auth-panel { background: rgba(255,255,255,.88); }
:root[data-theme="light"] .field input { background:#fff; }

* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { min-height:100vh; background:
  radial-gradient(900px 420px at 50% -180px, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
  var(--bg); }
button, input, select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.boot { min-height:100vh; display:grid; place-content:center; text-align:center; color:var(--muted); gap:12px; }
.boot-mark, .brand-mark { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); font-weight:800; letter-spacing:-.05em; box-shadow:0 0 30px color-mix(in srgb,var(--accent) 13%,transparent); }
.brand-mark.image { overflow:hidden; padding:7px; }
.brand-mark.image img { width:100%; height:100%; object-fit:contain; display:block; }
.shell { min-height:100vh; display:grid; grid-template-columns:220px 1fr; }
.shell.with-project-rail { grid-template-columns:58px 220px 1fr; }
.project-rail { border-right:1px solid var(--border); background:#07080a; position:sticky; top:0; height:100vh; z-index:8; padding:12px 7px; display:flex; flex-direction:column; align-items:center; }
.project-rail-brand, .project-rail-managed { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:10px; font-weight:850; letter-spacing:-.04em; }
.project-rail-brand { color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border)); background:color-mix(in srgb,var(--accent) 7%,#0b0c0f); box-shadow:0 0 24px color-mix(in srgb,var(--accent) 10%,transparent); }
.project-rail-list { width:100%; display:grid; justify-items:center; gap:8px; margin-top:18px; }
.project-rail-item { width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; text-decoration:none; color:var(--muted); overflow:hidden; position:relative; transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.project-rail-item:hover { border-color:var(--border-strong); background:var(--surface-2); transform:translateY(-1px); }
.project-rail-item.active { border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 9%,transparent); }
.project-rail-item.active::after { content:""; width:3px; height:16px; border-radius:3px; background:var(--accent); position:absolute; left:-1px; top:10px; }
.project-rail-item img { width:100%; height:100%; object-fit:contain; padding:8px; display:block; }
.project-rail-item span { font-size:9px; font-weight:800; }
.project-rail-managed { margin-top:auto; color:var(--muted-2); border:1px solid var(--border); background:transparent; }
.sidebar { border-right:1px solid var(--border); background:rgba(10,11,14,.86); backdrop-filter: blur(20px); padding:22px 14px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:11px; padding:0 8px 24px; }
.brand-copy strong { display:block; font-size:14px; letter-spacing:-.02em; }
.brand-copy span { display:block; color:var(--muted-2); font-size:11px; margin-top:2px; }
.nav { display:grid; gap:6px; }
.nav button { width:100%; border:0; background:transparent; color:var(--muted); border-radius:10px; padding:10px 11px; display:flex; gap:10px; align-items:center; text-align:left; }
.nav button:hover { background:rgba(255,255,255,.035); color:var(--text); }
.nav button.active { background:color-mix(in srgb,var(--accent) 9%,var(--surface)); color:var(--text); box-shadow:inset 2px 0 var(--accent); }
.nav-icon { width:18px; text-align:center; color:var(--accent); opacity:.9; }
.sidebar-foot { margin-top:auto; padding:12px 9px 2px; border-top:1px solid var(--border); }
.sidebar-foot .email { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-foot .hint { font-size:11px; color:var(--muted-2); margin-top:3px; }
.main { min-width:0; }
.topbar { height:68px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 32px; background:rgba(9,10,12,.65); backdrop-filter:blur(16px); position:sticky; top:0; z-index:4; }
.topbar .crumb { color:var(--muted); font-size:13px; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.page { width:min(1120px, calc(100% - 56px)); margin:0 auto; padding:46px 0 80px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; margin-bottom:10px; }
h1 { margin:0; font-size:34px; letter-spacing:-.045em; line-height:1.08; }
.lead { margin:10px 0 0; color:var(--muted); max-width:680px; line-height:1.55; }
.hero { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:32px; }
.status-pill { padding:8px 11px; border:1px solid var(--border); background:var(--surface); border-radius:99px; font-size:12px; color:var(--muted); white-space:nowrap; }
.status-pill.ok::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--success); margin-right:7px; box-shadow:0 0 12px color-mix(in srgb,var(--success) 55%,transparent); }
.grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.card { border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%), var(--surface); border-radius:var(--radius); padding:20px; box-shadow:0 1px 0 rgba(255,255,255,.02); }
.card h3 { font-size:13px; margin:0; letter-spacing:-.015em; }
.card p { color:var(--muted); font-size:13px; line-height:1.5; margin:8px 0 0; }
.metric { font-size:26px; font-weight:760; letter-spacing:-.045em; margin-top:22px; }
.metric.small { font-size:18px; }
.mini-status { margin-top:17px; display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1px solid var(--border); background:var(--surface-2); border-radius:8px; padding:6px 8px; font-size:11px; color:var(--muted); }
.chip.on { color:#b6efd0; border-color:rgba(74,208,139,.18); background:rgba(74,208,139,.06); }
.product-empty { margin-top:14px; min-height:220px; border:1px dashed var(--border-strong); border-radius:var(--radius); display:grid; place-content:center; text-align:center; padding:36px; color:var(--muted); background:rgba(255,255,255,.012); }
.product-empty .plus { margin:0 auto 14px; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); font-size:22px; }
.product-empty strong { color:var(--text); font-size:14px; }
.product-empty span { font-size:12px; max-width:420px; line-height:1.5; margin-top:7px; }
.btn { border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); border-radius:10px; padding:9px 12px; font-weight:650; font-size:12px; }
.btn:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#111; box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 20%,transparent); }
.btn.ghost { background:transparent; color:var(--muted); }
.settings-list { margin-top:22px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.setting-row { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:18px 20px; border-bottom:1px solid var(--border); }
.setting-row:last-child { border-bottom:0; }
.setting-row label { font-size:12px; font-weight:700; }
.setting-row .value { font-size:13px; color:var(--muted); min-width:0; overflow-wrap:anywhere; }
.swatch { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--accent); margin-right:7px; vertical-align:-1px; }
.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(320px, 480px) 1fr; }
.auth-panel { padding:42px clamp(28px,5vw,70px); display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--border); background:rgba(9,10,12,.82); backdrop-filter:blur(18px); }
.auth-brand { display:flex; align-items:center; gap:11px; position:absolute; top:28px; left:clamp(28px,5vw,70px); }
.auth-card { width:100%; max-width:370px; }
.auth-card h1 { font-size:29px; }
.auth-card .lead { font-size:13px; margin-bottom:26px; }
.mode-tabs { display:grid; grid-template-columns:repeat(3, 1fr); padding:4px; border:1px solid var(--border); background:var(--surface); border-radius:11px; gap:3px; margin-bottom:20px; }
.mode-tabs button { border:0; border-radius:8px; padding:8px 5px; background:transparent; color:var(--muted); font-size:11px; }
.mode-tabs button.active { background:var(--surface-2); color:var(--text); box-shadow:0 1px 5px rgba(0,0,0,.25); }
.field { display:grid; gap:7px; margin-bottom:12px; }
.field label { font-size:11px; color:var(--muted); font-weight:650; }
.field input { width:100%; border:1px solid var(--border-strong); background:#0d0f12; color:var(--text); padding:11px 12px; border-radius:10px; outline:none; }
.field input:focus { border-color:color-mix(in srgb,var(--accent) 65%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.form-actions { margin-top:18px; display:flex; gap:8px; }
.form-actions .btn { flex:1; padding:11px 13px; }
.form-message { min-height:18px; font-size:11px; color:var(--muted); margin-top:11px; line-height:1.5; }
.form-message.error { color:#ff9fa4; }
.auth-art { display:grid; place-content:center; padding:60px; overflow:hidden; position:relative; }
.auth-art::before { content:""; width:450px; height:450px; border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, color-mix(in srgb,var(--accent) 13%,transparent), transparent 67%); filter:blur(10px); }
.foundation-visual { position:relative; width:min(540px, 48vw); aspect-ratio:1.35; border:1px solid var(--border); background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); border-radius:24px; box-shadow:var(--shadow); padding:22px; transform:perspective(900px) rotateY(-5deg) rotateX(2deg); }
.foundation-top { height:34px; border-bottom:1px solid var(--border); display:flex; gap:7px; align-items:flex-start; }
.foundation-dot { width:7px; height:7px; border-radius:50%; background:var(--muted-2); }
.foundation-dot:first-child { background:var(--accent); }
.foundation-body { display:grid; grid-template-columns:90px 1fr; height:calc(100% - 34px); padding-top:18px; gap:18px; }
.foundation-side { border-right:1px solid var(--border); display:grid; align-content:start; gap:12px; padding-right:16px; }
.foundation-line { height:7px; border-radius:9px; background:rgba(255,255,255,.07); }
.foundation-line.active { background:color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.07)); }
.foundation-content { display:grid; align-content:start; gap:12px; }
.foundation-title { width:46%; height:16px; border-radius:8px; background:rgba(255,255,255,.12); }
.foundation-card-row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.foundation-card { height:88px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.018); }
.setup-page { min-height:100vh; display:grid; place-items:center; padding:30px; }
.setup-card { width:min(620px,100%); border:1px solid var(--border); border-radius:20px; background:var(--surface); padding:28px; box-shadow:var(--shadow); }
.setup-card h1 { font-size:27px; }
.setup-steps { margin-top:22px; display:grid; gap:10px; }
.setup-step { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
.setup-step b { color:var(--accent); width:20px; }
.toast { position:fixed; bottom:20px; right:20px; z-index:30; border:1px solid var(--border-strong); background:#15181d; border-radius:11px; padding:11px 14px; color:var(--text); font-size:12px; box-shadow:var(--shadow); max-width:360px; }
@media (max-width: 900px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-art { display:none; }
  .auth-panel { border-right:0; min-height:100vh; }
  .brand-mark.image { overflow:hidden; padding:7px; }
.brand-mark.image img { width:100%; height:100%; object-fit:contain; display:block; }
.shell { grid-template-columns:72px 1fr; }
  .shell.with-project-rail { grid-template-columns:52px 72px 1fr; }
  .project-rail { padding:11px 6px; }
  .project-rail-brand, .project-rail-item, .project-rail-managed { width:36px; height:36px; }
  .sidebar { padding:18px 10px; }
  .brand-copy, .nav button span:not(.nav-icon), .sidebar-foot { display:none; }
  .brand { padding:0 4px 22px; }
  .nav button { justify-content:center; padding:11px; }
  .grid { grid-template-columns:1fr; }
  .page { width:min(100% - 30px, 760px); padding-top:30px; }
  .topbar { padding:0 18px; }
  .hero { flex-direction:column; }
}
@media (max-width: 560px) {
  .brand-mark.image { overflow:hidden; padding:7px; }
.brand-mark.image img { width:100%; height:100%; object-fit:contain; display:block; }
.shell { display:block; }
  .shell.with-project-rail { display:grid; grid-template-columns:50px 1fr; }
  .shell.with-project-rail .sidebar { display:none; }
  .project-rail { width:50px; padding:10px 6px; }
  .sidebar { display:none; }
  .topbar { height:58px; }
  h1 { font-size:28px; }
  .setting-row { grid-template-columns:1fr; gap:6px; }
  .auth-panel { padding:90px 24px 40px; }
  .auth-brand { left:24px; }
}