:root { --ink:#eef6f4; --sub:#9baeb6; --line:#2b3b43; --mint:#a8f0d9; --violet:#a9a8f5; --panel:#151e25; }
body { background:#0b1016; color:var(--ink); }
.eyebrow { color:var(--mint); }
.workspace { display:grid; grid-template-columns:264px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; display:flex; flex-direction:column; height:100vh; padding:28px 16px 17px; border-right:1px solid #294047; background:linear-gradient(162deg,#17272b,#10191f 55%,#121820); overflow-y:auto; }
.sidebar .brand { margin:0 12px 42px; }
.brand-word { display:grid; gap:1px; }
.brand-word small { font-size:8px; letter-spacing:.28em; color:#79aea4; }
.side-nav { display:grid; gap:5px; }
.nav-link { display:flex; align-items:center; gap:13px; min-height:45px; padding:9px 12px; border-radius:11px; color:#a7b8bd; font-size:13px; font-weight:650; }
.nav-link:hover,.project-nav:hover { background:#23343a; color:#ecfff9; }
.nav-link.is-active,.project-nav.is-active { color:#12251f; background:var(--mint); }
.nav-icon { width:23px; text-align:center; font-size:19px; font-weight:500; line-height:1; }
.project-nav-list { display:grid; gap:3px; margin:0 0 8px 46px; padding-left:11px; border-left:1px solid #42605c; }
.project-nav { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:7px; padding:7px 9px; color:#819ba2; font-size:12px; }
.sidebar-bottom { display:grid; gap:4px; margin-top:auto; padding-top:24px; }
.side-caption { margin:0 0 5px 13px; color:#6c858c; font-size:10px; font-weight:800; letter-spacing:.17em; }
.account-link { display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 6px 3px; border-top:1px solid var(--line); font-size:13px; font-weight:700; }
.account-link:hover { color:var(--mint); }
.account-link span:nth-child(2) { display:grid; gap:2px; flex:1; }
.account-link small { color:#849aa0; font-size:11px; font-weight:400; }
.avatar { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; background:#334859; color:#d5efff; }
.avatar.large { width:54px; height:54px; font-size:23px; }
.workspace-main { min-width:0; background:radial-gradient(circle at 85% 0,#1d454147,transparent 37%),#0b1116; }
.mobile-header { display:none; }
.content { max-width:1440px; margin:auto; padding:50px clamp(24px,4.5vw,72px) 80px; }
.page-heading { margin-bottom:33px; }
.page-heading h1 { margin:0 0 11px; font-size:clamp(34px,4.2vw,57px); letter-spacing:-.056em; line-height:1.08; }
.page-heading>p:last-child { max-width:680px; margin:0; color:var(--sub); font-size:15px; line-height:1.55; }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:38px; }
.metric { background:linear-gradient(145deg,#19252c,#141c23); border-color:#2b3b43; min-height:124px; }
.metric span { font-size:12px; }
.metric strong { color:#e8fff7; font-size:clamp(22px,2.3vw,31px); }
.section-title { display:flex; justify-content:space-between; align-items:end; gap:20px; margin:0 0 18px; }
.section-title .eyebrow { margin:0 0 5px; }
.section-title h2 { margin:0; font-size:24px; letter-spacing:-.04em; }
.subtle-link { color:var(--mint); font-size:13px; font-weight:700; }
.subtle-link:hover { text-decoration:underline; text-underline-offset:4px; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.project-tile { position:relative; display:grid; grid-template-columns:1fr auto; align-content:start; gap:12px; min-height:170px; padding:22px; border:1px solid #2e4249; border-radius:18px; background:linear-gradient(145deg,#1c2b30,#151f26); }
.project-tile:hover { border-color:#7ac6b5; transform:translateY(-2px); }
.project-tile .pill { justify-self:start; align-self:start; }
.project-tile .stage { justify-self:end; }
.project-tile strong { grid-column:1/-1; font-size:20px; letter-spacing:-.035em; }
.project-tile small { grid-column:1/-1; max-width:90%; color:#94aab0; font-size:12px; }
.project-tile .tile-arrow { position:absolute; right:20px; bottom:20px; color:var(--mint); }
.dashboard-footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px; }
.feature-link { display:flex; align-items:center; gap:15px; padding:19px; border:1px solid #2c3c44; border-radius:16px; background:#151f26; }
.feature-link:hover { border-color:#80c8b7; }
.feature-link span:nth-child(2) { display:grid; gap:5px; flex:1; }
.feature-link strong { font-size:14px; }
.feature-link small { color:#8da4ab; font-size:12px; line-height:1.4; }
.feature-link b { color:var(--mint); }
.feature-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:12px; background:#2a4742; color:var(--mint); font-size:22px; }
.panel { background:var(--panel); border-color:#2c3b43; }
.panel h2 { margin:0 0 10px; font-size:22px; letter-spacing:-.035em; }
.panel p { line-height:1.6; }
.create { max-width:720px; margin-top:22px; }
.create form { grid-template-columns:repeat(2,minmax(0,1fr)); }
.create form label:first-of-type,.create form label:last-of-type,.create form button { grid-column:1/-1; }
.back-link { display:inline-block; margin-bottom:28px; color:var(--mint); font-size:13px; }
.detail-grid,.architecture-notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; margin-bottom:20px; }
.brief-panel { margin-bottom:20px; }.brief-panel>p:not(.eyebrow) { color:var(--sub); font-size:14px; }
.brief-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
.brief-grid>div { display:grid; gap:7px; padding:14px; border:1px solid var(--line); border-radius:11px; background:#1b272d; }
.brief-grid small { color:#88a2a8; font-size:11px; }.brief-grid strong { font-size:13px; line-height:1.45; }
textarea { width:100%; border:1px solid #34454a; border-radius:10px; background:#111a20; color:#edf3f4; padding:12px 13px; resize:vertical; font:inherit; }
textarea:focus { outline:none; border-color:#a2e3d2; box-shadow:0 0 0 3px #a2e3d225; }
.detail-grid .panel { min-height:160px; }
.edit-panel,.future-panel { max-width:900px; margin-bottom:20px; }
.edit-panel form { max-width:540px; }
.future-panel p { color:var(--sub); }
.result-panel { margin-bottom:20px; border-color:#3d6159; background:linear-gradient(120deg,#1d3733,#172429); }
.result-panel h2 { font-size:36px; }
.subscription-row { padding:18px 0; }
.subscription-actions { gap:4px; }
.subscription-actions>span { color:#8ea4ab; font-size:11px; }
.capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.capability-card { min-height:218px; }
.capability-card h2 { margin-top:19px; }
.capability-card p { color:var(--sub); font-size:13px; }
.state-badge { display:inline-block; border-radius:999px; padding:6px 9px; font-size:10px; font-weight:800; letter-spacing:.1em; }
.state-badge.live { background:#294b3f; color:#b7f5d6; }
.state-badge.planned { background:#3a3853; color:#d1cafb; }
.arch-legend { display:flex; gap:22px; margin:-9px 0 18px; color:var(--sub); font-size:12px; }
.legend-dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; }
.live-dot { background:#a8f0d9; }.future-dot { background:#aaa8f5; }
.architecture-map { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-bottom:19px; }
.arch-column { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:21px; border:1px solid #304149; border-radius:20px; background:#151f26; }
.arch-column>.eyebrow { margin:0 0 8px; }
.arch-node { display:grid; gap:7px; min-height:92px; padding:17px; border:1px solid #37545a; border-radius:14px; background:#1d2d34; }
.arch-node strong { font-size:16px; }.arch-node small { color:#9fb3b8; font-size:12px; }
.arch-node.focus-node { border-color:#93d9c6; background:#214039; }.arch-node.private-node { border-color:#73749f; }
.arch-flow { align-self:center; color:var(--mint); font-size:12px; }
.architecture-notes .panel { min-height:180px; }.architecture-notes p:last-child { color:var(--sub); font-size:13px; }
.flow-diagram { display:grid; gap:9px; margin-bottom:20px; padding:20px; border:1px solid #304149; border-radius:20px; background:#151f26; }
.flow-diagram>.eyebrow { margin:0 0 5px; }
.flow-line { display:grid; grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr); align-items:center; gap:12px; }
.flow-node { display:grid; align-content:center; gap:5px; min-height:70px; padding:13px 16px; border:1px solid #365259; border-radius:12px; background:#1d2d34; }
.flow-node strong { font-size:14px; }.flow-node small { color:#98adb3; font-size:11px; }
.flow-arrow { color:var(--mint); font-size:12px; text-align:center; }
.account-panel { max-width:640px; }.account-panel form.stack { max-width:470px; }.account-identity { display:flex; align-items:center; gap:15px; padding-bottom:24px; margin-bottom:25px; border-bottom:1px solid var(--line); }.account-identity h2 { margin:0 0 3px; }.account-identity p { margin:0; color:var(--sub); font-size:12px; }.logout-form { margin-top:22px; }
.login-shell { grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr); }
.login-aside { background:radial-gradient(circle at 68% 58%,#315d5677,transparent 42%),linear-gradient(145deg,#173137,#101b26 65%,#10171d); }
.login-message { position:relative; z-index:1; }
.login-message h1 { margin:0; font-size:clamp(55px,7vw,108px); letter-spacing:-.075em; line-height:.96; }
.login-message h1 em { color:var(--mint); font-style:normal; }
.login-message>p:last-child { max-width:470px; color:#abc1c6; font-size:16px; }
.login-foot { z-index:1; color:#7d9da2; font-size:10px; letter-spacing:.19em; }
.login-index { color:var(--mint); font-size:11px; font-weight:800; letter-spacing:.19em; }
.login-card h2 { margin:14px 0 7px; font-size:34px; }
.orbit { position:absolute; right:-145px; bottom:-170px; width:620px; height:620px; border:1px solid #9be5d43d; border-radius:50%; pointer-events:none; }
.orbit span { position:absolute; inset:13%; border:1px solid #a5f4dc28; border-radius:50%; }.orbit span:nth-child(2) { inset:27%; }.orbit span:nth-child(3) { inset:42%; background:#b6ffe820; }
@media (max-width:1050px) { .workspace { grid-template-columns:218px minmax(0,1fr); }.sidebar { padding-inline:10px; }.metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.architecture-map { grid-template-columns:1fr; }.arch-column { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }.arch-column>.eyebrow { grid-column:1/-1; }.arch-flow { transform:rotate(-90deg); }.login-shell { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) { .workspace { display:block; }.sidebar { position:relative; height:auto; padding:10px 14px; overflow:visible; }.sidebar>.brand,.sidebar-bottom .side-caption,.project-nav-list { display:none; }.side-nav { display:flex; gap:4px; overflow-x:auto; }.nav-link { flex:none; min-height:40px; padding:8px 10px; font-size:12px; }.sidebar-bottom { display:flex; align-items:center; padding:5px 0 0; margin:0; gap:4px; overflow-x:auto; }.sidebar-bottom .nav-link { flex:none; }.sidebar-bottom .account-link { display:none; }.mobile-header { display:flex; justify-content:space-between; align-items:center; min-height:58px; padding:10px 18px; border-bottom:1px solid var(--line); }.mobile-header>a:last-child { color:var(--mint); font-size:13px; }.content { padding:30px 18px 55px; }.project-grid,.dashboard-footer,.detail-grid,.capability-grid,.architecture-notes,.brief-grid { grid-template-columns:1fr; }.flow-line { grid-template-columns:1fr; gap:5px; }.flow-arrow { padding:3px; }.login-shell { grid-template-columns:1fr; }.login-aside { min-height:300px; }.login-message h1 { font-size:52px; }.login-message>p:last-child { font-size:13px; }.login-panel { padding:38px 22px; } }
@media (max-width:500px) { .sidebar { padding-inline:8px; }.nav-link { gap:7px; }.nav-icon { width:17px; font-size:15px; }.metrics { gap:8px; }.metric { min-height:105px; padding:14px; }.metric strong { font-size:22px; }.arch-column { display:flex; }.arch-flow { transform:none; }.create form { grid-template-columns:1fr; }.login-aside { min-height:250px; }.login-message h1 { font-size:42px; } }