[hidden]{display:none!important}
.mode-tabs{display:flex;align-items:stretch;align-self:stretch;min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.mode-tabs::-webkit-scrollbar{display:none}
.topbar{overflow:hidden}
/* Components for Context engineering, Lab, Data & go live, Team and World. Same tokens as workstation.css. */
.pill.red{background:#4a2326;color:#ffb3b0}
.tab-badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#2d3b4d;color:#e6eef6;font-size:10px;margin-left:4px}
.notice.info{border-color:#3b5a7d;background:#152437;color:#cfe3ff}
.workstation.full-width{grid-template-columns:minmax(0,1fr)}
.wide-content{max-width:1560px;padding:18px 28px 80px}
.grow{flex:1;min-width:160px}
.row.tight{gap:4px}
.link{background:none;border:0;padding:0;color:#9be1d4;text-align:left;font:inherit;cursor:pointer}
.link:hover{text-decoration:underline}
.check{display:flex;align-items:center;gap:7px;font-size:12px;color:#d7e2ec;font-weight:500;letter-spacing:0}
.check input{accent-color:#9bded0}
.inline-select{display:flex;align-items:center;gap:6px;font-size:11px;color:#9dafc2}
.inline-select select,.coordinate-strip select,.lab-coordinate select,.world-perspective select,input.mini,.mixer-grid select{background:#0e151e;color:#eef3f7;border:1px solid #304154;border-radius:5px;padding:5px 7px;font-size:12px}
input.mini{width:74px}
.coordinate-strip label{display:flex;align-items:center;gap:6px}
.side-facts{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 11px;font-size:11px;color:#9eb1c4}
.side-footer{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:14px}
.draft-bar{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid #6b5a2a;background:#2e2814;color:#ffe3a3;border-radius:7px;margin-bottom:14px}
.draft-bar span{flex:1}
.metrics-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 14px}
.metric.small{padding:11px 13px}
.metric.small strong{font-size:16px}
.data-table-wrap{overflow:auto;margin:6px 0 12px;border:1px solid #273647;border-radius:7px}
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{position:sticky;top:0;background:#111a24;text-align:left;color:#93a7bc;font-size:10px;letter-spacing:.08em;font-weight:800;padding:8px 10px;border-bottom:1px solid #2b3a4b;white-space:nowrap}
.data-table td{padding:8px 10px;border-bottom:1px solid #1f2b39;vertical-align:top;color:#dbe5ee}
.data-table tr:last-child td{border-bottom:0}
.data-table small{color:#9cb0c3}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:8px 0 12px;font-size:12px}
.kv dt{color:#93a7bc;font-weight:700}
.kv dd{margin:0;color:#e2ebf3;word-break:break-word}
.raw-json{margin-top:10px}
.raw-json summary{cursor:pointer;color:#93a7bc;font-size:11px}
.empty-state{padding:26px;text-align:center;border:1px dashed #38495b;border-radius:8px}
.empty-state .row{justify-content:center}
.code-block{font-size:11.5px}
.wrap{word-break:break-all}
dialog.wide-dialog{width:min(980px,calc(100vw - 30px))}
.kind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.starter-card.selected{border-color:#66b5a4;background:#173731}
.starter-card.disabled{opacity:.55;cursor:default}
.starter-grid.compact .starter-card{min-height:0}
.seg-option{display:inline-flex}
.seg-option input{position:absolute;opacity:0;pointer-events:none}
.seg-option span{background:#18232f;border:1px solid #2c3c4d;color:#aebed1;padding:6px 10px;font-size:11px;margin-left:-1px;cursor:pointer}
.seg-option:first-child span{border-radius:5px 0 0 5px}
.seg-option:last-child span{border-radius:0 5px 5px 0}
.seg-option input:checked+span{background:#193e38;border-color:#3d7c6c;color:#a6ebdb}
.binding-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #1f2b39;font-size:12px}
.binding-row small{flex:1;color:#9cb0c3}
.file-button{cursor:pointer}

/* Context engineering · Design */
.ce-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 320px;gap:14px;align-items:start}
.ce-browser{max-height:calc(100vh - 230px);overflow:auto;padding:12px}
.ce-section{margin-bottom:12px}
.ce-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.ce-item{display:flex;flex-direction:column;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:6px 8px;color:#e1eaf2;font-size:12px}
.ce-item:hover{background:#1a2532}
.ce-item.selected{background:#193a36;border-color:#3d7c6c}
.ce-item small{color:#93a7bc;font-size:10.5px;display:flex;gap:5px;align-items:center}
.ce-center{min-width:0}
.inspector{position:sticky;top:10px;max-height:calc(100vh - 230px);overflow:auto}
.inspector .field{font-size:9.5px}
.kv-inline{font-size:12px;color:#9cb0c3}
.ce-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-bottom:14px}
.ce-check{display:flex;gap:9px;padding:11px;border:1px solid #2d3d4f;border-radius:7px;background:#141c27}
.ce-check.done{border-color:#2f6b5d}
.ce-check span{color:#9be1d4;font-weight:800}
.ce-check small{display:block;margin-top:3px}
.message-block{margin:10px 0}
.message-block pre{max-height:360px}
.budget-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#0e151e;border:1px solid #2b3a4b;margin:10px 0 6px}
.budget-bar .seg.free{background:transparent}
.seg-0{background:#5fd3b4}.seg-1{background:#7aa7ff}.seg-2{background:#f2b950}.seg-3{background:#d38bff}.seg-4{background:#ff8f7a}.seg-5{background:#7fd8f2}
.budget-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#9cb0c3;margin-bottom:10px}
.budget-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}
.ce-file-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px}
.ce-file-list{max-height:520px;overflow:auto;display:flex;flex-direction:column}
#ce-file-editor{width:100%;min-height:440px;background:#0b1118;color:#e9f1f6;border:1px solid #2b3a4b;border-radius:6px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.assertion{padding:4px 0;border-bottom:1px dashed #2a394a;font-size:11.5px}
.endpoint-box{margin-top:10px;padding:10px;border:1px solid #2b3a4b;border-radius:7px;background:#101822}
.trace-detail .panel{margin-bottom:12px}
.history-result{margin-top:10px}
.limits{color:#9cb0c3;font-size:11.5px}

/* Context Lab */
.lab{display:flex;flex-direction:column;height:calc(100vh - 48px);min-height:620px}
.lab-top{padding:9px 14px;border-bottom:1px solid #2b3a4b;background:#111a24;display:flex;flex-direction:column;gap:8px}
.lab-coordinate{font-size:11px;color:#9dafc2}
.lab-coordinate label{display:flex;align-items:center;gap:5px}
.lab-coordinate input{background:#0e151e;color:#eef3f7;border:1px solid #304154;border-radius:5px;padding:6px 8px}
.lab-body{flex:1;display:grid;grid-template-columns:58px 260px minmax(0,1fr) 290px;min-height:0}
.lab-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;background:#0f1620;border-right:1px solid #243243}
.lab-rail button{background:none;border:0;color:#9db0c4;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;width:54px;border-radius:6px}
.lab-rail button.active,.lab-rail button:hover{background:#1b2a36;color:#d2fff3}
.lab-rail span{font-size:16px}.lab-rail small{font-size:9px;color:inherit}
.rail-spacer{flex:1}
.lab-explorer,.lab-window{overflow:auto;padding:10px;border-right:1px solid #243243;background:#121a24}
.lab-window{border-right:0;border-left:1px solid #243243}
.lab-pane-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.lab-folder{display:block;width:100%;text-align:left;background:none;border:0;color:#93a7bc;font-size:11px;padding:5px 2px}
.lab-file-row{display:flex;align-items:center;border-radius:5px}
.lab-file-row.active,.lab-file-row:hover{background:#1b2733}
.lab-file-row .file-actions{display:none}
.lab-file-row:hover .file-actions{display:flex}
.lab-file{flex:1;display:flex;align-items:center;gap:6px;background:none;border:0;color:#dce6ef;font-size:12px;padding:5px 4px;text-align:left;min-width:0}
.lab-file small{margin-left:auto;color:#8ea2b7}
.lab-file .git{color:#f2b950;font-size:10px}
.kind{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;padding:1px 4px;border-radius:3px;background:#22303f;color:#a8bbce}
.kind-knowledge{background:#173b34;color:#9ee2d4}.kind-policy{background:#473922;color:#f8cb78}.kind-test,.kind-guard{background:#2d2b4b;color:#ccc6ff}.kind-agent,.kind-context{background:#1d3550;color:#a9d1ff}.kind-legacy{background:#3b2525;color:#ffb3b0}
.lab-editor{display:flex;flex-direction:column;min-width:0;background:#0d131b}
.lab-tabs{display:flex;overflow-x:auto;border-bottom:1px solid #243243;background:#101823}
.lab-tab{display:flex;align-items:center;border-right:1px solid #243243}
.lab-tab button{background:none;border:0;color:#9db0c4;padding:8px 10px;font-size:12px;white-space:nowrap}
.lab-tab.active{background:#0d131b}.lab-tab.active button{color:#eef5fb}
.lab-tab .close{padding:8px 7px 8px 0}
.lab-editor .editor-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #1f2b39}
.lab-edit-area{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0}
#lab-text{width:100%;height:100%;min-height:300px;resize:none;background:#0b1118;color:#e9f1f6;border:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:18px;outline:none}
.lab-lenses{overflow:auto;border-left:1px solid #1f2b39;padding:8px;display:flex;flex-direction:column;gap:6px}
.lens{display:flex;flex-direction:column;gap:2px;text-align:left;background:#121b26;border:1px solid #233243;border-left:4px solid #6c7a8a;border-radius:5px;padding:6px 8px;color:#dce6ef;font-size:11.5px}
.lens small{color:#93a7bc}
.lens .dot{display:none}
.state-selected{border-left-color:#5fd3b4!important}.state-cut-by-rule{border-left-color:#f2b950!important;border-left-style:dashed!important}.state-excluded{border-left-color:#f07c7c!important}.state-not-applicable{border-left-color:#6c7a8a!important}.state-UNKNOWN{border-left-color:#a99cff!important}
.dot.state-selected,.dot.state-cut-by-rule,.dot.state-excluded,.dot.state-not-applicable,.dot.state-UNKNOWN{display:inline-block;width:8px;height:8px;border-radius:50%;border-left:0!important}
.dot.state-selected{background:#5fd3b4}.dot.state-cut-by-rule{background:#f2b950}.dot.state-excluded{background:#f07c7c}.dot.state-not-applicable{background:#6c7a8a}.dot.state-UNKNOWN{background:#a99cff}
.diag{font-size:11.5px;padding:6px 8px;border-radius:5px;background:#231c14;border:1px solid #5e4523}
.diag.sev-1{background:#2a1617;border-color:#6b2b2d}
.lab-layer{display:flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 0}
.lab-layer span{flex:1}
.lab-bottom{height:250px;border-top:1px solid #243243;background:#0f1620;display:flex;flex-direction:column}
.lab-bottom .subtabs{margin:0;padding:0 10px}
.lab-bottom-body{flex:1;overflow:auto;padding:8px 12px}
.lab-console{max-height:160px;overflow:auto}
.lab-console pre{margin:0 0 4px;padding:6px 8px;max-height:none;font-size:11.5px}
.console-in{color:#9be1d4;background:transparent!important;border:0!important}
.console-err{color:#ffb3b0}
.prompt{color:#9be1d4;font-family:ui-monospace,monospace}
#lab-console-form input{background:#0b1118;color:#eef3f7;border:1px solid #304154;border-radius:5px;padding:6px 8px;font-family:ui-monospace,monospace}
.sweep{display:grid;grid-template-columns:540px minmax(0,1fr);gap:14px}
.sweep-plot{width:100%;background:#0b1118;border:1px solid #243243;border-radius:6px}
.sweep-plot .axis{stroke:#3a4a5c}.sweep-plot .axis-label{fill:#8ea2b7;font-size:10px}
.pt-pass{fill:#5fd3b4}.pt-fail{fill:none;stroke:#f07c7c;stroke-width:1.6}.pt-rec{stroke:#fff;stroke-width:2}.pt-knee{stroke:#d38bff;stroke-width:2}
.diff{font-size:11.5px;line-height:1.5}
.diff .add{color:#a6f0c6;background:#12301f;display:inline-block;width:100%}
.diff .del{color:#ffb3b0;background:#341719;display:inline-block;width:100%}
.diff .ctx{color:#8ea2b7}

/* Data & go live */
.stepper{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0 0 6px}
.stepper i{width:22px;height:1px;background:#2b3a4b}
.step{display:flex;align-items:center;gap:7px;background:none;border:0;color:#9db0c4;padding:6px 8px;font-size:12.5px}
.step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#1d2a38;font-size:11px}
.step.done{color:#9be1d4}.step.done span{background:#9bded0;color:#102b2a}
.step.current{color:#eef5fb;font-weight:700}.step.current span{background:#3b6fd0;color:#fff}
.table-use{border:1px solid #2b3a4b;border-radius:7px;padding:10px;margin:0 0 10px}
.table-use legend{padding:0 6px}
.column-picks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.qr{width:240px;height:240px;background:#fff;border-radius:8px;padding:8px}
.chat-panel{display:flex;flex-direction:column;gap:10px}
.chat-log{min-height:260px;max-height:520px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:6px}
.bubble{max-width:78%;padding:10px 13px;border-radius:12px;font-size:13px;line-height:1.5;white-space:pre-wrap}
.bubble.user{align-self:flex-end;background:#1f4a42;color:#e9fff8}
.bubble.agent{align-self:flex-start;background:#18222e;border:1px solid #2b3a4b;color:#e3ebf2}
.why{margin-top:8px;font-size:11.5px;color:#9cb0c3}
.why summary{cursor:pointer}
.gap{margin-top:8px;padding:8px;border-radius:6px;background:#2e2814;color:#ffe3a3;font-size:12px}
.chat-panel textarea{background:#0e151e;color:#f4f7fa;border:1px solid #304154;border-radius:6px;padding:9px;resize:vertical}
.spark{display:flex;align-items:flex-end;gap:4px;height:70px}
.spark span{flex:1;height:100%;display:flex;align-items:flex-end;position:relative}
.spark i{display:block;width:100%;background:#2f6b5d;border-radius:2px 2px 0 0}
.spark b{position:absolute;bottom:0;left:30%;width:40%;background:#d3964a;border-radius:2px 2px 0 0}

/* Team */
.team-members{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;align-items:center}
.member-card{display:flex;gap:10px;padding:10px 12px;border:1px solid #2d3d4f;border-radius:8px;background:#141c27;min-width:220px;max-width:300px}
.member-card.lead{border-color:#5e559a}
.member-card small{display:block;color:#93a7bc;font-size:11px}
.kanban{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:10px;overflow-x:auto}
.kanban-col{background:#111a24;border:1px solid #243243;border-radius:8px;padding:9px;min-height:240px;display:flex;flex-direction:column;gap:7px}
.work-card{display:flex;flex-direction:column;gap:4px;text-align:left;background:#18222e;border:1px solid #2b3a4b;border-radius:7px;padding:9px;color:#e3ebf2;font-size:12px}
.work-card small{color:#93a7bc}
.work-card.status-review{border-color:#7a6230}.work-card.status-failed,.work-card.status-blocked,.work-card.status-rejected{border-color:#6b2b2d}.work-card.status-done{border-color:#2f6b5d}
.approval{border-left:4px solid #5e559a}
.message-list{max-height:460px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.team-message{padding:8px 10px;border-radius:7px;background:#151e29;border:1px solid #243243;font-size:12px}
.team-message.mine{background:#163029}
.team-message p{margin:4px 0 0;color:#d7e2ec;white-space:pre-wrap}

/* Context World */
.world-perspective{display:flex;flex-direction:column;gap:9px}
.world-perspective label{display:flex;align-items:center;gap:6px;font-size:11px;color:#9dafc2}
.world-perspective input{background:#0e151e;color:#eef3f7;border:1px solid #304154;border-radius:5px;padding:8px}
.world-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr);gap:14px;align-items:start}
.world-canvas{display:flex;flex-direction:column;align-items:center}
.world-map{width:100%;max-width:620px}
.world-map .ring{fill:none;stroke:#2b3a4b;stroke-dasharray:3 5}
.world-map .ring-0{stroke:#2f6b5d;stroke-dasharray:none;fill:#0f2421}
.world-map .ring-3{stroke:#6b2b2d}
.world-map .agent-core{fill:#9bded0}
.world-map .agent-label{fill:#102b2a;font-size:9px;font-weight:800}
.world-map .region-label{font-size:10px;fill:#9cb0c3}
.world-map .crystal{cursor:pointer}
.world-map .crystal circle{stroke:#0b1017;stroke-width:1.5}
.world-map .crystal.tier-2 circle{opacity:.55}
.world-map .crystal.tier-3 circle{opacity:.35}
.world-map .crystal.selected circle{stroke:#fff;stroke-width:2.5}
.world-map .guard-ring{fill:none!important;stroke:#f2b950!important;stroke-dasharray:2 2}
.world-map .region-0{fill:#5fd3b4}.world-map .region-1{fill:#7aa7ff}.world-map .region-2{fill:#f2b950}.world-map .region-3{fill:#d38bff}.world-map .region-4{fill:#ff8f7a}.world-map .region-5{fill:#7fd8f2}
.world-map text.region-0,.world-map text.region-1,.world-map text.region-2,.world-map text.region-3,.world-map text.region-4,.world-map text.region-5{fill:#b7c7d6}
.ring-legend{display:flex;gap:14px;font-size:11px;color:#9cb0c3;margin-top:8px}
.ring-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;border:1px solid #3a4a5c}
.ring-dot.ring-0{background:#2f6b5d}.ring-dot.ring-1{background:#22303f}.ring-dot.ring-2{background:#151e29}.ring-dot.ring-3{background:#4a2326}
.door-preview{margin-top:10px}
.quests .quest{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #1f2b39}
.quests .quest div{flex:1}
.quests .quest small{display:block;color:#93a7bc}
.quests .quest.done strong{color:#9be1d4}
.xp-bar{height:6px;border-radius:3px;background:#1d2a38;margin:6px 0 10px;overflow:hidden}
.xp-bar span{display:block;height:100%;background:#9bded0}

@media (max-width:1180px){
  .ce-layout{grid-template-columns:1fr}
  .inspector{position:static;max-height:none}
  .lab-body{grid-template-columns:52px 220px minmax(0,1fr)}
  .lab-window{display:none}
  .world-layout,.sweep{grid-template-columns:1fr}
  .kanban{grid-template-columns:repeat(5,220px)}
}
@media (max-width:760px){
  .wide-content{padding:14px 16px 60px}
  .lab-body{grid-template-columns:1fr}
  .lab-rail,.lab-explorer{display:none}
  .lab-edit-area{grid-template-columns:1fr}
  .ce-file-grid{grid-template-columns:1fr}
}

.lab-notice{padding:8px 14px 0;background:#111a24}
.lab-notice .notice{margin-bottom:8px}
.chat-log.compact{min-height:120px;max-height:340px}
.new-secret{margin:4px 0 8px}
.new-secret summary{cursor:pointer;color:#93a7bc;font-size:11px}
.example-row{margin:10px 0 18px;gap:8px}
.proof.passed{border-color:#2f6b5d}.proof.failed{border-color:#6b2b2d}.proof ul{margin:6px 0 0;padding-left:18px;color:#cfdbe6;font-size:12px}
#ap-collaborate-form input,#ob-ask-form input[name=question]{background:#0e151e;color:#eef3f7;border:1px solid #304154;border-radius:5px;padding:8px}
.palette-search{background:#0e151e;color:#eef3f7;border:1px solid #304154;border-radius:6px;padding:10px;margin:8px 0;font-size:13px}
.palette-list{display:flex;flex-direction:column;max-height:420px;overflow:auto}
.palette-item{text-align:left;background:none;border:0;color:#dce6ef;padding:8px 10px;border-radius:5px;font-size:12.5px}
.palette-item:hover,.palette-item.first{background:#1b2a36}
.recipes{margin:10px 0 14px}
.mode-tabs .mode-tab{padding:10px 8px}
@media (max-width:1500px){.env-label{display:none}.topbar .pill{max-width:170px;overflow:hidden;text-overflow:ellipsis}}

/* ─── Team (desktop parity: roster · guru/board/messages/documents/setup · needs you + live) ─── */
.team-screen{max-width:1680px;padding:18px 24px 80px}
.team-screen textarea,.team-screen input:not([type=checkbox]):not([type=radio]),.team-screen select{border:1px solid #304154;background:#0e151e;color:#f4f7fa;border-radius:5px;padding:8px 9px;font:inherit;font-size:12px;font-weight:450}
.team-screen textarea{width:100%;resize:vertical;line-height:1.45}
.team-screen h2{font-size:17px;margin:2px 0 4px}
.team-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.team-top h1{margin:2px 0;font-size:26px}
.team-officebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.team-officebar .pill{margin:0}
.team-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 340px;gap:18px;align-items:start}
.team-roster,.team-side{position:sticky;top:12px;max-height:calc(100vh - 90px);overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.team-roster .eyebrow,.team-side .eyebrow{padding:6px 0 2px}
.roster-card{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;padding:9px 10px;border:1px solid #2b3a4b;border-radius:10px;background:transparent;color:#e3ebf2;cursor:pointer}
.roster-card:hover{background:#141e2a}
.roster-card.lead{background:#10241f;border-color:#3f8f7d}
.roster-card.on{outline:2px solid #9bded0}
.roster-card .avatar{width:32px;height:32px;min-width:32px;border-radius:50%;font-size:16px;background:#1d2733}
.roster-card.lead .avatar{width:38px;height:38px;min-width:38px;background:#173b34}
.roster-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.roster-name{display:flex;gap:6px;align-items:center;font-weight:700;font-size:13px}
.roster-name .pill{margin:0}
.roster-body small{color:#93a7bc;font-size:11px;line-height:1.35}
.roster-body small.busy{color:#f8cb78}
.roster-flows{margin-top:8px}
.flow-line{margin:0;display:flex;flex-direction:column;gap:2px;font-size:12px;color:#dce6ef}
.flow-line small{color:#93a7bc;font-size:11px}
.team-center{min-width:0;display:flex;flex-direction:column;gap:12px}
.team-tabs{border:1px solid #2d3b4d;border-radius:8px;overflow:hidden;align-self:flex-start;flex-wrap:wrap}
.team-tabs button{background:transparent;border:0;border-right:1px solid #2d3b4d;color:#93a7bc;padding:8px 15px;font-weight:650;font-size:13px;cursor:pointer}
.team-tabs button:last-child{border-right:0}
.team-tabs button.on{background:#1d2a38;color:#f4f7fa}
.side-head{display:flex;align-items:center;gap:8px}
.side-head h2{margin:0}
.side-head .pill{margin:0}
.approval-card{display:flex;flex-direction:column;gap:7px;padding:11px 12px;border:1px solid #2d3b4d;border-radius:10px;background:#141c27;font-size:12px}
.approval-card.send{border-color:#a3792f}
.approval-card.question{border-color:#3b5a7d}
.approval-card.stuck{border-color:#6b2b2d}
.approval-card p{margin:0;color:#dce6ef;line-height:1.45}
.approval-card small{color:#b9c7d6;line-height:1.4}
.approval-head{display:flex;gap:8px;align-items:center;font-size:13px}
.recipient{display:block;font-size:13px;color:#f4f7fa;background:#0e151e;border:1px solid #304154;border-radius:5px;padding:5px 8px;word-break:break-all}
.side-live{margin-top:8px}
.live-list{display:flex;flex-direction:column;gap:5px}
.live-line{display:grid;grid-template-columns:42px 1fr;gap:6px;font-size:11.5px;color:#dce6ef;line-height:1.35}
.live-line time{color:#7f93a8;font-family:ui-monospace,monospace;font-size:10.5px}
.live-line.error span{color:#ffb3b0}
.team-create{max-width:960px}
.team-create h1{font-size:28px;margin:4px 0 6px}
.team-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
.preview-card{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid #2d3b4d;border-radius:10px;background:#141c27;font-size:12px}
.preview-card span{font-size:22px}
.preview-card small{color:#93a7bc}
.preview-card.lead{background:#10241f;border-color:#3f8f7d}
.team-checklist{border:1px solid #a3792f;border-radius:10px;padding:10px 14px;background:#0f1720;display:flex;flex-direction:column;gap:8px;margin:10px 0}
.check-step{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.check-step>span{font-size:16px;color:#f8cb78}
.check-step.done>span{color:#9ee2d4}
.check-step b{font-size:12.5px;display:block}
.check-step.done b{color:#93a7bc}
.check-step small{color:#93a7bc;font-size:11px}
.team-chat{display:flex;flex-direction:column;gap:10px}
.team-log{min-height:300px;max-height:min(62vh,640px);background:#0f1720;border:1px solid #2b3a4b;border-radius:12px;padding:14px}
.team-log .bubble{max-width:min(680px,92%)}
.bubble.user{white-space:pre-wrap}
.bubble.agent{white-space:normal}
.bubble.update{background:#10241f;border-color:#3f8f7d}
.bubble.thinking em{color:#93a7bc}
.bubble-who{font-size:11px;font-weight:700;color:#9ee2d4;margin-bottom:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips .pill{margin:0}
.btn.chip{min-height:22px;padding:2px 8px;font-size:11px;border-radius:999px;background:#152437;border-color:#3b5a7d;color:#cfe3ff}
.ideas .btn{font-weight:500}
.composer{align-items:stretch}
.composer textarea{min-height:52px}
.md p{margin:0 0 6px}
.md p:last-child{margin-bottom:0}
.md ul{margin:4px 0 8px 18px;padding:0}
.md li{margin:2px 0}
.md h3,.md h4,.md h5,.md h6{margin:8px 0 4px;font-size:13px}
.md a,.sources a,.csv a{color:#8fc1ff}
.md code{background:#0e151e;padding:1px 4px;border-radius:4px}
.board-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.board-head .subtle{margin:0}
.filter-row{background:#152437;border:1px solid #3b5a7d;border-radius:8px;padding:6px 10px}
.team-kanban{display:flex;gap:8px;overflow:visible}
.team-kanban .kanban-col{min-width:0;flex:1 1 0}
.team-kanban .kanban-col{min-height:160px}
.team-kanban .kanban-col.empty{opacity:.75}
.kanban-head{display:flex;gap:6px;align-items:baseline;font-size:12px}
.kanban-head small{color:#93a7bc}
.kanban-head.alert b{color:#ffb3b0}
.kanban-empty{height:46px;border:1px solid #243243;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#5f7286}
.work-card{cursor:pointer;width:100%}
.work-card.status-working{border-color:#a3792f}
.work-card strong{font-size:12px;line-height:1.35}
.work-card .pill{margin:2px 0 0;align-self:flex-start}
.pipeline{background:#0f1720;border:1px solid #2b3a4b;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.pipe-chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pipe-step{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border:1px solid #2d3b4d;border-radius:8px;background:#141c27;font-size:12px}
.pipe-step small{color:#93a7bc;font-size:10.5px}
.pipe-step.busy{border-color:#a3792f}
.pipe-step.waiting{border-color:#a3792f;background:#2e2618}
.pipe-arrow{display:flex;flex-direction:column;align-items:center;color:#9ee2d4;font-size:16px;line-height:1}
.pipe-arrow small{font-size:9.5px;color:#93a7bc}
.work-detail{display:flex;flex-direction:column;gap:12px}
.work-detail>.btn{align-self:flex-start}
.work-title{display:flex;gap:10px;align-items:center}
.work-title h2{margin:0}
.work-title .avatar{width:32px;height:32px;border-radius:50%;font-size:16px;background:#1d2733}
.work-summary{margin:0;font-size:13px;line-height:1.5}
.work-items{margin:0;padding-left:18px;font-size:12px;line-height:1.5;display:flex;flex-direction:column;gap:3px}
.unknowns{color:#f8cb78;margin:0;font-size:12px}
.sources{display:flex;flex-wrap:wrap;gap:8px}
.history-line{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:11.5px}
.history-line time{color:#7f93a8;font-family:ui-monospace,monospace;font-size:10.5px}
.btn.left{justify-content:flex-start;text-align:left}
.btn.danger{border-color:#6b2b2d;color:#ffb3b0;background:#2b1a1c}
.btn.on{background:#173b34;border-color:#3f8f7d;color:#9ee2d4}
.team-message .row{gap:8px}
.team-message small{color:#7f93a8}
.docs-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;align-items:start}
.doc-list{display:flex;flex-direction:column;gap:4px}
.doc-row{display:flex;flex-direction:column;gap:1px;text-align:left;padding:7px 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#dce6ef;cursor:pointer;font-size:12px}
.doc-row:hover{background:#141e2a}
.doc-row.on{background:#1d2a38;border-color:#3b5a7d}
.doc-row small{color:#7f93a8;font-size:10.5px}
.doc-text{white-space:pre-wrap;font-size:12px;max-height:60vh;overflow:auto}
.csv td{max-width:240px;vertical-align:top}
.setup-section{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.setup-card{border:1px solid #2d3b4d;border-radius:10px;padding:10px 12px;background:#141c27}
.setup-card.open{border-color:#3f8f7d}
.setup-card.off{opacity:.7}
.member-head{display:flex;gap:10px;align-items:center}
.member-head>div:not(.row){flex:1;min-width:0}
.member-head b{font-size:12.5px;display:block}
.member-head small{color:#93a7bc;font-size:11px;line-height:1.4}
.member-head .avatar{width:30px;height:30px;border-radius:50%;font-size:15px;background:#1d2733}
.ability-row{display:flex;flex-wrap:wrap;gap:6px}
.chip-check{border:1px solid #304154;border-radius:999px;padding:3px 10px;background:#0e151e;cursor:pointer}
.chip-check:has(input:checked){border-color:#3f8f7d;background:#173b34}
.three-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.spend-big{font-size:16px}
.spend-bar{height:6px;border-radius:3px;background:#233142;overflow:hidden}
.spend-bar i{display:block;height:100%;background:#9bded0}
.spend-bar.over i{background:#f8cb78}
.amber-text{color:#f8cb78}
.row.wrap{flex-wrap:wrap}
.row.between{justify-content:space-between}
@media (max-width:1320px){.team-layout{grid-template-columns:230px minmax(0,1fr)}.team-side{grid-column:1/-1;position:static;max-height:none}}
@media (max-width:900px){.team-layout{grid-template-columns:1fr}.team-roster{position:static;max-height:none}.team-preview{grid-template-columns:1fr 1fr}.docs-layout,.three-columns{grid-template-columns:1fr}.team-kanban{flex-direction:column}.team-kanban .kanban-col{min-height:0}}
/* The app's own dialogs (never the browser's): questions, confirmations, leaving with unsaved work. */
dialog.modal{width:min(480px,calc(100vw - 32px));padding:24px}
dialog.modal h2{font-size:19px;margin-bottom:4px}
dialog.modal p{margin:0;color:#b5c4d4}
.modal-actions{justify-content:flex-end;margin-top:6px}
.btn.danger:hover{background:#3a2023;color:#ffd0cd}
.unsaved-list{margin:0;padding-left:18px;color:#e6eef6;line-height:1.7}
/* Freshness: an out-of-date file says why and offers the fix in place. */
.freshness-banner{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:0 0 10px;padding:10px 12px;border-radius:8px;border:1px solid #8e6436;background:#2f2418}
.freshness-banner.due{border-color:#4d5f74;background:#172330}
.freshness-banner p{margin:2px 0 0;font-size:12px;color:#f3d9b5}
.freshness-banner.due p{color:#b9c9da}
.freshness-banner b{color:#ffe0b0}
.freshness-banner.due b{color:#dfe9f3}
.freshness-icon{font-size:20px}
.stale-badge{margin-left:auto;color:#f8cb78;font-weight:400}
@media (max-width:900px){.freshness-banner{grid-template-columns:auto 1fr}.freshness-banner .row{grid-column:1/-1}}
/* Home: the project just closed, and what still runs on the server. */
.closed-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;margin:0 0 18px;border:1px solid #2d4f49;background:#11241f;border-radius:8px;color:#bfe9de}
.closed-banner small{color:#94b9b0}
.closed-banner .btn{margin-left:auto}
/* Home as a project hub: open, rename, export or delete each project; search when there are many. */
.project-row{padding:6px 8px 6px 16px}
.project-open{display:flex;align-items:center;gap:14px;flex:1;min-width:0;padding:10px 0;color:inherit}
.project-open:hover{text-decoration:none}
.project-open>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
.project-open .open{margin-left:auto}
.row-menu{position:relative}
.row-menu summary{list-style:none;font-size:16px;line-height:1}
.row-menu summary::-webkit-details-marker{display:none}
.row-menu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;align-items:stretch;min-width:180px;padding:6px;background:#151e29;border:1px solid #33465a;border-radius:8px;box-shadow:0 14px 34px #0009}
.row-menu-list .btn{justify-content:flex-start}
.danger-text{color:#ffb3b0!important}
.project-search{width:100%;margin:0 0 10px;padding:9px 12px;border:1px solid #304154;border-radius:6px;background:#0e151e;color:#f4f7fa}
.drop-hint{margin:8px 0 0;text-align:center}
/* Dragging files in: where they land is outlined, and a banner says what dropping does there. */
.drop-overlay{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:1000;pointer-events:none;padding:12px 18px;border-radius:999px;background:#1d4c43;border:1px solid #6fd0bb;color:#d9fff5;font-weight:650;box-shadow:0 14px 40px #000a}
.drop-overlay.refuse{background:#3a2023;border-color:#8d3f43;color:#ffd0cd}
.drop-hover{outline:2px dashed #8fe3d1!important;outline-offset:4px;border-radius:10px;background-color:#16302c!important}
.drop-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto}
.drop-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:10px 12px;border:1px solid #2d3b4d;border-radius:8px;background:#111923}
.drop-item.skip{opacity:.75}
.drop-item>b{word-break:break-word}
.drop-item>span{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.drop-item>small{grid-column:1/-1;color:#9fb3c6}
.drop-item>.check{grid-column:2;justify-self:end}
.drop-agents{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.inline-select select{margin-left:6px;background:#0e151e;color:#f4f7fa;border:1px solid #304154;border-radius:5px;padding:4px 6px}
/* ─── The hub: a left rail, then projects, the journey, the desktop app and the account center ─── */
.hub{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:calc(100vh - 48px)}
.hub-nav{position:sticky;top:0;align-self:start;height:calc(100vh - 48px);display:flex;flex-direction:column;gap:14px;padding:18px 12px;background:#0f161f;border-right:1px solid #243243}
.hub-nav nav{display:flex;flex-direction:column;gap:2px}
.hub-link{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:none;color:#cdd8e3;font-weight:600;font-size:13px;text-align:left}
.hub-link span{width:18px;text-align:center;color:#8fa6ba}
.hub-link:hover{background:#18232f;color:#fff}
.hub-link.active{background:#183a35;color:#a8efdf}
.hub-link.active span{color:#9be1d2}
.hub-level{display:flex;gap:11px;align-items:flex-start;margin-top:6px;padding:12px;border:1px solid #2b3d4e;border-radius:12px;background:linear-gradient(160deg,#152a2a,#121a26);color:#e6eef6;text-align:left}
.hub-level:hover{border-color:#5fb8a5}
.level-badge{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c9f7ea,#5fb8a5);color:#0b2522;font-weight:800}
.level-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.level-body small{font-size:10.5px;color:#9bb1c3}
.level-body .streak{color:#f3c97b}
.xp-track{display:block;height:6px;border-radius:3px;background:#243344;overflow:hidden}
.xp-track i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#5fb8a5,#b9f3e5)}
.xp-track.big{height:9px;max-width:420px}
.hub-nav-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:0 12px}
.hub-nav-foot a{font-size:11.5px;color:#91a6b9}
.hub-main{min-width:0;padding:30px 44px 70px;max-width:1240px;width:100%}
.hub-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hub-head h1{margin:0;font-size:28px}
.hub-head h1 small{font-size:14px;color:#8fa4b8;font-weight:600;margin-left:6px}
.hub-actions{display:flex;gap:8px;flex-wrap:wrap}
.hub-top-cards{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;margin-bottom:22px}
.continue-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid #2f5850;border-radius:14px;background:linear-gradient(120deg,#122b28,#131c27);color:inherit}
.continue-card:hover{text-decoration:none;border-color:#6fd0bb}
.continue-icon{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:12px;background:#0d1f1c;font-size:24px;color:#9be1d2}
.continue-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.continue-body b{font-size:18px;color:#f1f7fb}
.continue-body small{color:#9fb6c7}
.next-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:16px 18px;border:1px solid #3a3561;border-radius:14px;background:linear-gradient(140deg,#1d1a33,#141b27)}
.next-card b{font-size:15px;color:#efeaff}
.next-card small{color:#b5b0d6}
.next-card.done{border-color:#2f5850;background:#122520}
.next-card .btn{margin-top:4px}
.hub-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.hub-search{flex:1;max-width:420px;padding:9px 12px;border:1px solid #304154;border-radius:8px;background:#0e151e;color:#f4f7fa}
.hub-table{border:1px solid #273647;border-radius:12px;overflow:visible;background:#111924}
.hub-row{display:flex;align-items:center;gap:6px;padding-right:8px;border-top:1px solid #1f2b39}
.hub-row:first-child{border-top:0}
.hub-row.head{padding:9px 16px;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#8ea3b7;text-transform:uppercase;background:#0f1620;border-radius:12px 12px 0 0}
.hub-row.head span:nth-child(1){width:34px}
.hub-row.head span:nth-child(2){flex:1}
.hub-row.head span:nth-child(3){width:170px}
.hub-row.head span:nth-child(4){width:130px}
.hub-row.head span:nth-child(5){width:40px}
.hub-row-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:13px 16px;color:inherit}
.hub-row-main:hover{text-decoration:none}
.hub-row:not(.head):hover{background:#162130}
.hub-row-icon{width:24px;text-align:center;font-size:18px;color:#9bdccf}
.hub-row-name{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hub-row-name b{font-size:13.5px;color:#eef4f8}
.hub-row-type{width:170px;color:#a7b8c8;font-size:12px}
.hub-row-date{width:130px;color:#93a6b8;font-size:12px}
.run-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:#173b34;color:#a8eedd;font-size:10.5px;font-weight:700}
.run-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5fe0b5;box-shadow:0 0 0 3px #5fe0b522;margin-right:3px}
.hub-start{margin-top:26px}
.hub-start-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.start-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid #2f3f51;border-radius:999px;background:#131c27;color:#dbe6ef;font-weight:600}
.start-chip:hover{border-color:#79cbb8;color:#fff}
.hub-welcome{padding:26px;border:1px solid #2d3d4e;border-radius:16px;background:radial-gradient(circle at 10% 0,#173430,#111924 60%);margin-bottom:18px}
.hub-welcome h2{font-size:26px;margin-bottom:6px}
.hub-welcome>p{max-width:760px;margin-bottom:18px}
/* The account button and menus in the top bar. */
.avatar-menu,.project-menu,.mode-more{position:relative}
.avatar-menu summary,.project-menu summary,.mode-more summary{list-style:none;cursor:pointer}
.avatar-menu summary::-webkit-details-marker,.project-menu summary::-webkit-details-marker,.mode-more summary::-webkit-details-marker{display:none}
.avatar-chip{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#5fb8a5,#3d6ea8);color:#06201c;font-weight:800;font-size:12px}
.avatar-chip.big{width:40px;height:40px;font-size:14px}
.avatar-chip.huge{width:72px;height:72px;font-size:26px}
.avatar-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:240px;padding:6px;display:flex;flex-direction:column;background:#151e29;border:1px solid #33465a;border-radius:10px;box-shadow:0 18px 44px #000a}
.project-menu .avatar-pop{left:0;right:auto}
.avatar-pop button,.avatar-pop a{display:block;width:100%;padding:9px 10px;border:0;border-radius:7px;background:none;color:#dfe8f0;text-align:left;font-size:12.5px;white-space:nowrap}
.avatar-pop button:hover,.avatar-pop a:hover{background:#1f2c3a;text-decoration:none}
.avatar-who{display:flex;gap:10px;align-items:center;padding:8px 10px 10px;border-bottom:1px solid #26354a;margin-bottom:4px}
.avatar-who span:last-child{display:flex;flex-direction:column;min-width:0}
.avatar-who small{color:#93a8bb;overflow:hidden;text-overflow:ellipsis}
.crumb-kind{font-size:10px;font-weight:700;color:#8fd6c6;background:#16302c;border-radius:999px;padding:2px 7px;margin-left:4px}
.mode-more summary.mode-tab{display:inline-flex;align-items:center}
/* New project: categories, a gallery, the details and the name. */
dialog.wizard-dialog{width:min(1060px,calc(100vw - 30px));padding:0}
.wizard{display:grid;grid-template-columns:200px minmax(0,1fr) 300px;min-height:480px}
.wizard-cats{display:flex;flex-direction:column;gap:2px;padding:20px 10px;border-right:1px solid #26354a;background:#111923}
.wizard-cats button{display:flex;gap:10px;align-items:center;padding:10px 12px;border:0;border-radius:8px;background:none;color:#cdd8e3;font-weight:600;text-align:left}
.wizard-cats button.active{background:#183a35;color:#a8efdf}
.wizard-cats button:hover{background:#18232f}
.wizard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-content:start;padding:20px;overflow:auto;max-height:70vh}
.wizard-tile{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:14px;border:1px solid #2d3d4e;border-radius:10px;background:#141d28;color:#e3edf4;text-align:left;min-height:130px}
.wizard-tile small{color:#9fb2c4;font-size:11.5px}
.wizard-tile:hover{border-color:#79cbb8}
.wizard-tile.selected{border-color:#9be1d2;box-shadow:0 0 0 2px #9be1d233;background:#15302c}
.wizard-detail{display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-left:1px solid #26354a;background:#111923}
.wizard-detail h2{margin:0}
.wizard-detail .btn.wide{margin-top:auto}
/* The journey. */
.journey-hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(240px,320px);gap:22px;align-items:center;padding:24px;border:1px solid #2f5850;border-radius:18px;background:radial-gradient(circle at 0 0,#1a3d37,#111924 55%);margin-bottom:10px}
.level-ring{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:conic-gradient(#9be1d2,#5f7fe0,#c8a6ff,#9be1d2);padding:5px}
.level-ring span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#0f1a22;font-size:36px;font-weight:800;color:#d9fff5}
.journey-hero-body h1{margin:4px 0}
.journey-hero-body p{margin:0 0 8px;color:#b8cad8}
.journey-stats{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:#cfdbe6}
.journey-intro{margin:14px 0}
.level-ladder{margin:6px 0 18px}
.level-ladder>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ladder-step{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid #2b3a4c;border-radius:10px;background:#121a25;color:#cbd7e2;min-width:130px}
.ladder-step b{color:#8fa6ba}
.ladder-step small{color:#8ea2b5}
.ladder-step.past{border-color:#2f5850;color:#a8efdf}
.ladder-step.now{border-color:#9be1d2;background:#15302c;color:#e8fff9;box-shadow:0 0 0 2px #9be1d222}
.milestone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.milestone{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid #2b3a4c;border-radius:12px;background:#121a25}
.milestone>div{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.milestone small{color:#9fb2c4}
.milestone-meta{color:#8ea2b5!important;font-size:11px}
.milestone-badge{font-size:22px;opacity:.55}
.milestone.done{border-color:#2f5850;background:#11231f}
.milestone.done .milestone-badge{opacity:1}
/* The desktop app. */
.desktop-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:26px;border:1px solid #2d3d4e;border-radius:18px;background:linear-gradient(130deg,#151f2c,#11201d);margin-bottom:18px}
.desktop-art{display:grid;place-items:center;width:110px;height:110px;border-radius:26px;background:linear-gradient(140deg,#9be1d2,#3d6ea8);color:#082220;font-size:52px}
.desktop-meta{display:block;margin-top:8px}
.check-list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.check-list li{color:#d3dee8;font-size:12.5px}
.check-list li::before{content:'✓';color:#7fd8c3;margin-right:8px}
ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:#d3dee8}
/* The account center. */
.account-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.account-nav{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px}
.account-nav button{padding:9px 12px;border:0;border-radius:8px;background:none;color:#c5d2de;text-align:left;font-weight:600}
.account-nav button:hover{background:#18232f}
.account-nav button.active{background:#1b2a39;color:#fff;box-shadow:inset 3px 0 0 #9be1d2}
.account-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.account-card{padding:18px 20px;border:1px solid #2b3a4c;border-radius:14px;background:#131b26}
.account-card h2{margin:0;font-size:16px}
.account-intro{margin:0}
.profile-card{display:flex;gap:18px;align-items:center}
.profile-card h2{font-size:22px}
.profile-card p{margin:2px 0 8px}
.device-list{display:flex;flex-direction:column}
.device-row{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid #223042}
.device-row:first-child{border-top:0}
.device-row>div{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.device-icon{font-size:20px}
.key-card{display:flex;flex-direction:column;gap:10px}
.key-form input{padding:9px 12px;border:1px solid #304154;border-radius:7px;background:#0e151e;color:#f4f7fa}
.ok-text{color:#8fe3cf}
.event-list{display:flex;flex-direction:column;gap:6px}
.plan-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.plan-card h2{font-size:24px;margin:4px 0}
.meter{display:block;height:7px;max-width:260px;border-radius:4px;background:#243344;overflow:hidden;margin:6px 0}
.meter i{display:block;height:100%;background:#9bded0}
.meter.full i{background:#f3c97b}
.usage-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center;padding:8px 0;border-top:1px solid #223042}
.usage-row:first-child{border-top:0}
.usage-row span{display:flex;flex-direction:column}
.premium-card{display:flex;justify-content:space-between;align-items:center;gap:20px;border-color:#4b3f7a;background:linear-gradient(130deg,#1d1934,#131b26)}
.danger-zone{border-color:#5a2a2e;background:#1b1316}
/* Celebrations: a milestone earned, with the XP and the level it led to. */
.celebrations{position:fixed;right:18px;bottom:18px;z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.celebration{display:flex;gap:12px;align-items:center;padding:12px 16px;min-width:280px;border:1px solid #5fb8a5;border-radius:14px;background:linear-gradient(120deg,#163a34,#141d2a);color:#eafff9;text-align:left;box-shadow:0 18px 50px #000b;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.celebration span:last-child{display:flex;flex-direction:column;gap:2px}
.celebration small{color:#a7d9cc;font-size:11px}
.celebration b{font-size:14px}
.celebration .lvl{color:#f3d58a}
.celebration-badge{font-size:26px}
.celebration.level-up{border-color:#c8a6ff;background:linear-gradient(120deg,#2a2150,#162030)}
.celebration.leaving{opacity:0;transform:translateY(8px);transition:.6s}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.celebration{animation:none}}
@media (max-width:1100px){.hub-top-cards{grid-template-columns:1fr}.journey-hero{grid-template-columns:auto 1fr}.journey-hero .next-card{grid-column:1/-1}.wizard{grid-template-columns:180px minmax(0,1fr)}.wizard-detail{grid-column:1/-1;border-left:0;border-top:1px solid #26354a}}
@media (max-width:860px){.hub{grid-template-columns:1fr}.hub-nav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 10px;border-right:0;border-bottom:1px solid #243243}.hub-nav nav{flex-direction:row;flex-wrap:wrap}.hub-level{margin-top:0;flex:1;min-width:220px}.hub-nav-foot{display:none}.hub-main{padding:20px 16px 60px}.account-layout{grid-template-columns:1fr}.account-nav{position:static;flex-direction:row;flex-wrap:wrap}.hub-row-type,.hub-row.head span:nth-child(3){display:none}.plan-card,.usage-row{grid-template-columns:1fr}.wizard{grid-template-columns:1fr}.wizard-cats{flex-direction:row;flex-wrap:wrap;border-right:0}.desktop-card{grid-template-columns:1fr}}
/* Menus in the top bar must not be clipped: the bar scrolls only on narrow screens, where menus open fixed. */
@media (min-width:901px){.topbar,.topbar .mode-tabs{overflow:visible}}
@media (max-width:900px){.topbar .avatar-pop{position:fixed;top:52px;right:10px;left:auto}.topbar .project-menu .avatar-pop{left:10px;right:auto}}
.mode-more{display:flex;align-self:stretch}
.mode-more>summary.mode-tab{height:100%}
.mode-more .avatar-pop{min-width:200px}
.hub{background-image:linear-gradient(90deg,#0f161f 0 235px,#243243 235px 236px,transparent 236px)}
@media (max-width:860px){.hub{background-image:none}}
.text-link{color:#9be1d2;text-decoration:underline;text-underline-offset:3px}