:root {
    color-scheme: dark;
    --bg: #070b10; --sidebar: #080d13; --surface: #0c141d; --surface-2: #101a25; --surface-3: #142131;
    --line: #213044; --line-soft: #172536; --text: #f2f5f8; --muted: #8d9bac;
    --green: #36d6aa; --yellow: #f0bf4f; --purple: #a785ff; --blue: #6a9fff; --red: #ff6b79;
    --sidebar-width: 226px; --radius: 13px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 14px; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; } button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.12; }
h2 { margin-bottom: 8px; font-size: 17px; letter-spacing: -.02em; }
p { color: #a8b4c2; } small, .muted { color: var(--muted); }
code, pre { font-family: "SFMono-Regular", Consolas, monospace; }
code { display: inline-block; border: 1px solid var(--line); border-radius: 7px; background: #080e15; color: #b8c8da; padding: 5px 8px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 20; display: flex; flex-direction: column; padding: 18px 10px 12px; background: var(--sidebar); border-right: 1px solid var(--line-soft); }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 20px; color: white; font-weight: 800; font-size: 18px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(145deg, #46dcce, #5dafff); color: #071019; font-size: 16px; box-shadow: 0 8px 26px rgba(58, 205, 190, .2); }
.sidebar nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { margin: 14px 9px 6px; color: #536478; text-transform: uppercase; font-size: 10px; letter-spacing: .18em; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 9px 10px; border-radius: 8px; color: #b4bfca; }
.nav-item:hover { background: #0d1622; color: white; }
.nav-item.active { background: #101a28; color: white; box-shadow: inset 0 0 0 1px #162438; }
.nav-item > span { width: 12px; text-align: center; color: #dce5ee; }
.area-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255,255,255,.025); }
.area-dot.trading { color: var(--green); } .area-dot.gastro { color: var(--yellow); } .area-dot.video { color: var(--purple); }
.worker-card { margin-top: auto; padding: 11px; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; border: 1px solid var(--line); border-radius: 9px; background: #0c131c; }
.worker-card small { grid-column: 1 / -1; }
.online-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #e6edf5; box-shadow: 0 0 0 3px rgba(230,237,245,.08); }
.app-main { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 15; min-height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line-soft); background: rgba(7, 11, 16, .9); backdrop-filter: blur(16px); }
.crumb { font-weight: 750; } .crumb a:hover { color: var(--green); } .crumb span { color: #738195; font-weight: 500; }
.top-actions, .head-actions, .hero-actions { display: flex; gap: 8px; align-items: center; }
.content { width: min(1280px, calc(100% - 36px)); margin: 0 auto; padding: 24px 0 70px; }
.btn { min-height: 38px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: #0d1621; color: #eef3f7; cursor: pointer; transition: .16s ease; }
.btn:hover { border-color: #354a63; background: #121f2e; transform: translateY(-1px); }
.btn.primary { border-color: #247a68; background: #16483f; color: #d9fff5; } .btn.primary:hover { background: #1a594c; }
.btn.blue { border-color: #3b6090; background: #1f426d; } .btn.danger { border-color: #65303b; background: #28171d; color: #ff9ca6; }
.btn.wide { width: 100%; }
.icon-btn { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; }
.text-link { color: #8db1ff; }
.eyebrow { display: block; margin-bottom: 8px; color: #65758a; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 800; }
.pill { width: max-content; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: #c5d0db; font-size: 11px; background: #0b121b; }
.badge, .repo-ok { padding: 3px 7px; border-radius: 99px; background: #19263a; color: #90b2ff; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.repo-ok { margin-left: auto; background: #15352f; color: #76dfc1; }
.card { background: linear-gradient(150deg, rgba(14, 24, 34, .96), rgba(10, 18, 27, .96)); border: 1px solid var(--line); border-radius: var(--radius); }
.page-head { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; margin-bottom: 14px; }
.page-head p { margin: 0; max-width: 760px; } .task-heading { align-items: center; margin-bottom: 22px; }
.task-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } .task-actions form { margin: 0; } .modal-danger { border-color: #713541; } .modal-danger p { color: #f2b8bd; } .modal-danger code { color: #ffd6d9; font-weight: 800; }
.quick-capture { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin: 8px 0 16px; padding: 7px; border: 1px solid var(--line); background: #0b131d; border-radius: 11px; }
.quick-capture input { border: 0; background: transparent; }
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.area-card { min-height: 184px; padding: 15px; transition: .18s ease; overflow: hidden; }
.area-card:hover, .board-card:hover { border-color: #344a61; transform: translateY(-2px); }
.area-card h2 { font-size: 18px; } .area-card p { min-height: 43px; margin-bottom: 18px; }
.stats { display: flex; gap: 26px; } .stats span { display: flex; flex-direction: column; } .stats b { font-size: 20px; } .stats small { font-size: 10px; }
.accent-trading { --accent: var(--green); } .accent-gastro { --accent: var(--yellow); } .accent-video { --accent: var(--purple); }
.area-card::before { content: ''; display: block; width: 38px; height: 2px; margin: -15px 0 15px -15px; background: var(--accent); box-shadow: 0 0 24px var(--accent); }
.section-block { margin-top: 26px; }
.section-head { min-height: 38px; display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 8px; } .section-head h2 { margin: 0; }
.row-list { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #0a121a; }
.task-row { min-height: 63px; display: grid; grid-template-columns: minmax(260px, 1.3fr) 110px 90px minmax(180px, 1fr) 20px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); transition: background .15s ease; }
.task-row:last-child { border-bottom: 0; } .task-row:hover { background: #101a25; }
.task-main { display: flex; min-width: 0; flex-direction: column; }
.task-main strong, .task-main small, .task-next { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { width: max-content; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 6px; background: #162236; color: #8db1ff; font-size: 10px; text-transform: uppercase; font-weight: 850; letter-spacing: .04em; }
.status.large { padding: 7px 10px; font-size: 11px; }
.status-running, .status-completed { color: #52e0b7; background: #12332d; }
.status-waiting, .status-planning, .status-steer_queued { color: #f4ca67; background: #342a14; }
.status-needs_manuel, .status-blocked, .status-failed { color: #ff8e99; background: #351a21; } .status-done { color: #a3b1be; background: #1b242d; }
.task-provider, .task-next, .arrow { color: #aab5c1; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compact-card { padding: 4px 14px; }
.reminder-row, .ai-row, .provider-row { min-height: 58px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.reminder-row:last-child, .ai-row:last-child, .provider-row:last-child { border-bottom: 0; }
.reminder-row > div, .ai-row > div { display: flex; flex: 1; flex-direction: column; }
.reminder-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #101923; }
.live-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(54,214,170,.08); }
.empty { min-height: 72px; display: grid; place-items: center; padding: 15px; color: var(--muted); text-align: center; }
.flash { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #265e52; border-radius: 8px; background: #123029; color: #b5ffe8; } .flash.error { border-color: #66313c; background: #2d171c; color: #ffb0b8; }
.tabs { display: flex; width: 100%; margin: 18px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a { flex: 0 0 auto; min-width: 112px; padding: 11px 15px; color: #7e8da0; text-align: center; border-bottom: 2px solid transparent; }
.tabs a:hover { color: #c8d2dc; } .tabs a.active { color: white; border-color: var(--accent, var(--green)); }
.area-overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, .7fr); gap: 13px; }
.hero-card, .metric-card { min-height: 205px; padding: 22px; } .hero-card { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.hero-card h2 { max-width: 700px; font-size: clamp(24px, 3vw, 35px); } .hero-card p { max-width: 680px; } .hero-actions { margin-top: 22px; }
.big-metric { font-size: 58px; line-height: 1; font-weight: 800; } .mini-metrics { display: flex; flex-wrap: wrap; gap: 7px; }
.mini-metrics span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: #9eabb8; font-size: 11px; }
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.topic-card { min-height: 82px; display: flex; align-items: center; gap: 9px; padding: 13px; } .topic-card > div { display: flex; flex-direction: column; } .topic-card.focus { border-color: #275c51; }
.board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.board-card { min-height: 154px; padding: 10px; display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--line); border-radius: 11px; background: #0c141e; transition: .18s ease; }
.board-thumb { position: relative; height: 92px; overflow: hidden; border-radius: 7px; border: 1px solid #1d2a3b; background-color: #0b1118; background-image: radial-gradient(#203146 1px, transparent 1px); background-size: 12px 12px; }
.board-thumb span { position: absolute; width: 38px; height: 21px; border: 1px solid #385169; border-radius: 4px; background: #142131; }
.board-thumb span:nth-child(1) { left: 18%; top: 24%; } .board-thumb span:nth-child(2) { left: 45%; top: 51%; border-color: #2e7464; } .board-thumb span:nth-child(3) { left: 72%; top: 22%; border-color: #66549b; }
.task-boards-card .section-head { margin-bottom: 4px; } .task-board-list { display: grid; gap: 6px; margin-top: 12px; }
.task-board-list > a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 54px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: #0a121b; }
.task-board-list > a:hover { border-color: #356175; background: #101d29; } .task-board-list > a > span { color: var(--green); font-size: 17px; } .task-board-list > a > div { display: flex; min-width: 0; flex-direction: column; } .task-board-list > a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-board-list > a b { color: #87a2b9; }
input, textarea, select { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #09111a; color: var(--text); }
input:focus, textarea:focus, select:focus { border-color: #47739f; box-shadow: 0 0 0 3px rgba(74, 124, 174, .12); } textarea { resize: vertical; }
label { display: grid; gap: 6px; color: #9eacba; font-size: 11px; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid .full { grid-column: 1 / -1; } .form-actions { display: flex; justify-content: flex-end; }
.task-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(330px, .72fr); gap: 16px; align-items: start; }
.task-column, .task-side { display: grid; gap: 14px; } .detail-card, .side-card { padding: 17px; } .side-card form { display: grid; gap: 11px; }
.juergen-card { background: linear-gradient(160deg, #12182a, #0c1520); border-color: #313c67; }
.juergen-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; } .juergen-head > div { display: flex; flex-direction: column; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #efe9ff; background: linear-gradient(145deg, #7657b4, #3f5a9a); font-weight: 900; }
.juergen-chat-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 14px; align-items: start; }
.task-juergen-chat { margin-bottom: 16px; } .task-chat-context .text-link { display: inline-block; margin-bottom: 8px; font-weight: 800; } .task-chat-context > p { color: #aebdca; }
.juergen-chat-card, .juergen-context-card { padding: 20px; } .juergen-chat-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); } .juergen-chat-head .avatar { flex: 0 0 auto; width: 44px; height: 44px; } .juergen-chat-head .eyebrow { margin-bottom: 5px; } .juergen-chat-head h2 { margin-bottom: 4px; font-size: 21px; } .juergen-chat-head p { margin-bottom: 0; }
.juergen-thread { display: grid; gap: 12px; max-height: 740px; min-height: 260px; padding: 16px 0; overflow: auto; }
.juergen-message { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; align-items: flex-start; } .juergen-message > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #465477; border-radius: 50%; background: #202947; color: #eeeaff; font-size: 11px; font-weight: 900; } .juergen-message--manuel > span { border-color: #2e7162; background: #123e36; color: #c7ffef; }
.juergen-message > div { padding: 11px 12px; border: 1px solid #2a394d; border-radius: 11px; background: #0d1722; } .juergen-message--manuel > div { border-color: #24594e; background: #0d221f; } .juergen-message small { display: block; margin-bottom: 6px; color: #71849a; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .juergen-message pre { margin: 0; color: #d5dde5; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.juergen-action { margin-top: 12px; }
.juergen-chat-empty { display: flex; align-items: flex-start; gap: 11px; padding: 24px 8px; color: #b8c5d2; } .juergen-chat-empty > div { display: grid; gap: 5px; } .juergen-chat-empty p { margin: 0; }
.juergen-composer { display: grid; gap: 8px; padding-top: 15px; border-top: 1px solid var(--line-soft); } .juergen-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .juergen-composer > div small { max-width: 430px; }
.juergen-live-run { display: grid; gap: 12px; padding: 14px; border: 1px solid #2b7866; border-radius: 13px; background: radial-gradient(circle at 8% 15%, rgba(49,190,151,.16), transparent 31%), linear-gradient(135deg, rgba(17,73,61,.55), rgba(10,24,31,.96)); box-shadow: inset 0 1px rgba(194,255,233,.08); } .juergen-live-run[hidden], .juergen-composer[hidden] { display: none; } .juergen-live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .juergen-live-head > div { display: grid; gap: 2px; } .juergen-live-identity { display: flex !important; align-items: center; gap: 10px; } .juergen-live-identity .avatar { width: 36px; height: 36px; background: linear-gradient(145deg, #26bb91, #4b579d); box-shadow: 0 0 0 5px rgba(61,225,176,.11); animation: juergen-pulse 1.6s ease-in-out infinite; } .juergen-live-head strong { color: #d1ffed; font-size: 16px; } .juergen-live-head small { color: #9dccbc; } .juergen-progress { max-height: 260px; overflow: auto; padding: 10px 12px; border: 1px solid #234a42; border-radius: 8px; background: rgba(5,18,19,.72); } .juergen-progress ol { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: #abc9c0; font-size: 12px; } .juergen-steer { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid #245448; } .juergen-steer > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .juergen-steer small { color: #8eaaa2; } @keyframes juergen-pulse { 50% { box-shadow: 0 0 0 9px rgba(61,225,176,0); transform: scale(1.04); } }
.juergen-context-card { position: sticky; top: 74px; } .juergen-context-card h2 { margin-bottom: 5px; } .juergen-context-card pre { max-height: 340px; margin: 15px 0; padding: 11px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 8px; background: #09111a; color: #aebaca; white-space: pre-wrap; font: 11px/1.5 "SFMono-Regular", Consolas, monospace; } .juergen-context-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .juergen-context-stats span { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 7px; color: #8f9daf; font-size: 10px; } .juergen-context-stats b { color: #d9e5ee; font-size: 18px; }
.ai-chat-card { display: grid; gap: 0; margin-bottom: 16px; padding: 20px; border-color: #35506d; background: radial-gradient(circle at 90% 2%, rgba(74,124,174,.17), transparent 29%), linear-gradient(145deg, #0d1926, #0a121b); }
.ai-chat-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); } .ai-chat-head h2 { margin-bottom: 4px; font-size: 21px; } .ai-chat-head p { margin-bottom: 0; color: #aab9c7; } .ai-chat-head code { color: #92bbdc; overflow-wrap: anywhere; }
.ai-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid #4c789e; border-radius: 50%; background: linear-gradient(145deg, #315f8b, #444d8e); color: #e7f3ff; font-size: 19px; font-weight: 900; }
.ai-thread { display: grid; gap: 12px; max-height: 760px; min-height: 190px; padding: 16px 0; overflow: auto; }
.ai-message { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 9px; align-items: flex-start; } .ai-message > span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #4a6280; border-radius: 50%; background: #1d3048; color: #d9edff; font-size: 11px; font-weight: 900; } .ai-message--manuel > span { border-color: #2e7162; background: #123e36; color: #c7ffef; }
.ai-message > div { padding: 11px 12px; border: 1px solid #2d425c; border-radius: 11px; background: #0a1520; } .ai-message--manuel > div { border-color: #24594e; background: #0d221f; } .ai-message small { display: block; margin-bottom: 6px; color: #71849a; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .ai-message pre { margin: 0; color: #d5dde5; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.ai-composer { display: grid; gap: 8px; padding-top: 15px; border-top: 1px solid var(--line-soft); } .ai-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ai-composer > div small { max-width: 560px; } .ai-composer[hidden], .ai-live-run[hidden] { display: none; } .ai-chat-error { min-height: 1.1em; color: #ff9f9f; }
.ai-live-run { display: grid; gap: 12px; padding: 14px; border: 1px solid #3d719d; border-radius: 13px; background: radial-gradient(circle at 8% 15%, rgba(84,155,219,.18), transparent 31%), linear-gradient(135deg, rgba(20,63,92,.62), rgba(8,18,28,.97)); box-shadow: inset 0 1px rgba(213,239,255,.08); } .ai-live-run > small { color: #9cb4ca; } .ai-live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ai-live-identity { display: flex; align-items: center; gap: 10px; } .ai-live-identity > div { display: grid; gap: 2px; } .ai-live-identity .ai-avatar { width: 36px; height: 36px; font-size: 15px; box-shadow: 0 0 0 5px rgba(95,166,224,.11); animation: ai-pulse 1.6s ease-in-out infinite; } .ai-live-head strong { color: #dbf0ff; font-size: 16px; } .ai-live-head small { color: #aac9e2; } .ai-progress { max-height: 260px; overflow: auto; padding: 10px 12px; border: 1px solid #294c68; border-radius: 8px; background: rgba(5,13,21,.74); } .ai-progress ol { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: #b5cfdf; font-size: 12px; } @keyframes ai-pulse { 50% { box-shadow: 0 0 0 9px rgba(95,166,224,0); transform: scale(1.04); } }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .plan-card { display: grid; gap: 9px; min-height: 190px; padding: 18px; border-color: #30445e; background: linear-gradient(145deg, #101e2c, #0c141d); } .plan-card strong { color: #e7f3ff; font-size: 18px; } .plan-card p { margin: 0; color: #a6b6c5; } .plan-card > div { display: flex; align-items: center; gap: 9px; margin-top: auto; color: #85bdae; font-size: 12px; } .plan-card > div b { margin-left: auto; color: #c8ffec; font-size: 17px; }
.plan-execution { margin-top: 24px; } .plan-execution > .section-head { align-items: end; } .plan-execution > .section-head > p { max-width: 370px; margin: 0; text-align: right; } .plan-execution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .plan-execution-card { display: grid; align-content: start; gap: 13px; min-height: 260px; padding: 16px; } .plan-execution-card .section-head { align-items: center; margin: 0; } .plan-execution-card h3 { margin: 2px 0 0; font-size: 18px; } .plan-mini-list { display: grid; align-content: start; gap: 8px; } .plan-mini-list > article, .plan-mini-list > a { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 11px; border: 1px solid var(--line-soft); border-radius: 9px; background: #0a131c; color: inherit; text-decoration: none; } .plan-mini-list > a:hover { border-color: #3a806e; background: #0d1a21; } .plan-mini-list > article > div, .plan-mini-list > a > div { min-width: 0; } .plan-mini-list strong { display: block; color: #d9e7f2; font-size: 13px; } .plan-mini-list p { margin: 4px 0 0; color: #93a5b6; font-size: 12px; line-height: 1.42; } .plan-mini-list .status, .plan-mini-list .badge { flex: 0 0 auto; }
.timeline article { display: grid; grid-template-columns: 14px 1fr; gap: 7px; padding-bottom: 14px; }
.timeline-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #536983; }
.timeline-meta { color: #76869a; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.timeline pre, .run pre { margin: 6px 0 0; color: #c0cad4; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.artifact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.artifact { display: flex; gap: 9px; align-items: center; min-height: 56px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; } .artifact > div { display: flex; flex-direction: column; }
.session-card { display: grid; gap: 9px; padding: 10px 0 15px; border-bottom: 1px solid var(--line); } .session-card:last-child { border: 0; }
.session-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.session-card dl { display: grid; gap: 4px; margin: 0; font-size: 11px; } .session-card dl > div { display: grid; grid-template-columns: 70px 1fr; gap: 6px; }
.session-card dt { color: #68788a; } .session-card dd { margin: 0; overflow-wrap: anywhere; color: #acb9c6; }
.run { border: 1px solid var(--line-soft); border-radius: 7px; } .run summary { padding: 7px; cursor: pointer; color: #abb7c2; font-size: 11px; }
.event-feed { max-height: 180px; overflow: auto; padding: 7px; border-top: 1px solid var(--line-soft); }
.event-feed div { display: grid; grid-template-columns: 52px 1fr; gap: 5px; color: #9daab7; font-size: 10px; } .event-feed time { color: #58687b; }
.steer-form { display: grid !important; grid-template-columns: 1fr auto; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } .provider-row { justify-content: space-between; } .provider-row > div { display: flex; flex-direction: column; }
.clean-list { padding-left: 18px; color: #aab7c3; }
.modal { width: min(570px, calc(100vw - 28px)); padding: 0; color: var(--text); border: 1px solid #2b3b50; border-radius: 14px; background: #0c141d; box-shadow: 0 30px 100px rgba(0,0,0,.7); }
.modal::backdrop { background: rgba(2,5,8,.78); backdrop-filter: blur(5px); } .modal form { display: grid; gap: 13px; padding: 20px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; } .modal-head h2 { margin: 0; font-size: 24px; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.login-page { min-height: 100vh; background: radial-gradient(circle at 20% 20%, #123030 0, transparent 30%), radial-gradient(circle at 80% 80%, #1a2039 0, transparent 35%), #070b10; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(430px, 100%); display: grid; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,17,25,.93); box-shadow: 0 32px 100px rgba(0,0,0,.4); }
.login-brand { padding: 0 0 18px; } .login-card h1 { margin: 0; } .login-card p { margin-bottom: 3px; } .check { display: flex; align-items: center; gap: 8px; } .check input { width: auto; }
.two-factor-card input { text-align: center; font-size: 24px; font-weight: 800; letter-spacing: .28em; }
.security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; align-items: start; }
.security-section { display: grid; gap: 12px; } .security-section p { margin: 0; }
.security-form { display: grid; gap: 11px; margin-top: 4px; }
.security-ok { color: #9cebd8 !important; font-weight: 750; }
.totp-setup { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 15px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #081019; }
.totp-qr { width: 150px; height: 150px; border-radius: 6px; background: white; }
.totp-setup > div { display: grid; gap: 8px; min-width: 0; } .totp-setup small { line-height: 1.35; }
.totp-secret { width: 100%; overflow-wrap: anywhere; color: #d9fff5; font-size: 12px; }
.inline-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }.inline-form .btn { min-height: 41px; }
.text-button { padding: 0; border: 0; background: transparent; color: #8db1ff; cursor: pointer; text-align: left; }
.board-page .content { width: calc(100% - 24px); padding-bottom: 18px; }
.board-page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; } .board-page-head h1 { font-size: 23px; } .save-state { color: #6f8195; font-size: 11px; }
.board-shell { height: calc(100vh - 145px); min-height: 560px; display: grid; grid-template-columns: minmax(0, 1fr) 315px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #080d12; }
.board-workspace { position: relative; min-width: 0; overflow: hidden; }
.board-toolbar { position: absolute; z-index: 8; top: 10px; left: 50%; display: flex; align-items: center; gap: 3px; padding: 5px; transform: translateX(-50%); border: 1px solid #27384d; border-radius: 9px; background: rgba(10, 18, 27, .94); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.board-toolbar button { height: 31px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #9cabb9; cursor: pointer; white-space: nowrap; }
.board-toolbar button:hover, .board-toolbar button.active { background: #1a2939; color: white; } .toolbar-sep { width: 1px; height: 20px; background: var(--line); }
[data-zoom] { min-width: 38px; color: #718398; text-align: center; font-size: 10px; }
.board-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; background-color: #090e14; background-image: radial-gradient(#1a2736 1px, transparent 1px); background-size: 18px 18px; outline: 0; user-select: none; }
.node-layer, .edge-layer, .arrow-layer, .stroke-layer, .selection-layer { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 0; overflow: visible; }
.edge-layer, .arrow-layer, .stroke-layer, .selection-layer { pointer-events: none; }
.board-node { position: absolute; min-width: 120px; min-height: 64px; display: flex; flex-direction: column; padding: 12px; border: 1px solid #314359; border-radius: 9px; background: #142131; box-shadow: 0 8px 24px rgba(0,0,0,.25); cursor: grab; overflow: hidden; touch-action: none; }
.board-node:active { cursor: grabbing; } .board-node.selected { border-color: #76a8dc; box-shadow: 0 0 0 2px rgba(118,168,220,.18), 0 10px 28px rgba(0,0,0,.34); }
.board-node.green { border-color: #2b6d5f; background: #11312b; } .board-node.yellow { border-color: #756128; background: #302912; } .board-node.purple { border-color: #66519d; background: #251d3d; } .board-node.blue { border-color: #3b6090; background: #172c47; }
.board-node strong, .board-node p { pointer-events: none; } .board-node p { margin: 5px 0 0; font-size: 12px; } .board-node .task-chip { margin-top: auto; color: #82addd; font-size: 9px; }
.resize-handle { position: absolute; right: -1px; bottom: -1px; width: 17px; height: 17px; border: 0; border-radius: 8px 0 8px 0; background: #416887; cursor: nwse-resize; }
.edge-line { stroke: #506985; stroke-width: 2; marker-end: url(#arrow); } .stroke-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.free-arrow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lasso-rect { fill: rgba(110, 168, 223, .13); stroke: #76a8dc; stroke-width: 2; stroke-dasharray: 8 6; }
.toolbar-group { display: flex; align-items: center; gap: 2px; padding-right: 3px; border-right: 1px solid rgba(84, 107, 135, .35); }
.toolbar-group:last-child { border-right: 0; padding-right: 0; }
.board-toolbar { max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; }
.board-toolbar::-webkit-scrollbar { display: none; }
.board-toolbar .swatch { width: 22px; min-width: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; }
.board-toolbar .swatch.active { box-shadow: 0 0 0 1px #dbe9f5; }
.board-toolbar .swatch.green { background: #2ed9a3; } .board-toolbar .swatch.blue { background: #6ea8df; } .board-toolbar .swatch.yellow { background: #f0bf4f; } .board-toolbar .swatch.purple { background: #a785ff; } .board-toolbar .swatch.white { background: #e8edf4; }
.board-toolbar .width-group button:nth-child(1) { font-size: 9px; } .board-toolbar .width-group button:nth-child(3) { font-weight: 700; } .board-toolbar .width-group button:nth-child(4) { font-weight: 900; font-size: 16px; }
.board-node.node-sticky { background: #4c3f13; border-color: #9b7d27; } .board-node.node-text { min-width: 80px; min-height: 42px; padding: 7px 10px; background: transparent; border-color: transparent; box-shadow: none; } .board-node.node-text p { display: none; }
.board-node.node-shape { align-items: center; justify-content: center; text-align: center; background: #172c47; } .board-node.node-shape p { margin: 4px 12px 0; font-size: .75em; }
.board-node.shape-terminator { border-radius: 999px; } .board-node.shape-decision { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); padding-inline: 34px; } .board-node.shape-data { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); padding-inline: 26px; }
.board-node.node-text .resize-handle { background: rgba(65, 104, 135, .7); } .board-shell.pencil-only .board-viewport { box-shadow: inset 0 0 0 1px rgba(46, 217, 163, .18); }
.board-pencil-dock { position: absolute; z-index: 9; left: 14px; bottom: 14px; display: none; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #2a4058; border-radius: 12px; background: rgba(8, 17, 27, .94); box-shadow: 0 12px 30px rgba(0,0,0,.36); color: #aab9c8; font-size: 11px; backdrop-filter: blur(12px); }
.board-pencil-dock button { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #b9c7d5; cursor: pointer; } .board-pencil-dock button:hover, .board-pencil-dock button.active { border-color: #4c7da8; background: #172b3e; color: white; }
.board-pencil-dock i { width: 1px; height: 19px; background: #2a4058; } .board-pencil-dock b { display: block; border-radius: 50%; background: currentColor; } .board-pencil-dock [data-eraser-size="6"] b { width: 5px; height: 5px; } .board-pencil-dock [data-eraser-size="12"] b { width: 9px; height: 9px; } .board-pencil-dock [data-eraser-size="24"] b { width: 14px; height: 14px; }
.board-empty { position: absolute; inset: 0; display: none; place-items: center; color: #4f6073; pointer-events: none; } .board-viewport.empty .board-empty { display: grid; }
.board-panel { display: flex; min-width: 0; flex-direction: column; border-left: 1px solid var(--line); background: #0c141d; }
.panel-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); } .panel-head > div { display: flex; flex-direction: column; }
.panel-body { display: grid; gap: 13px; padding: 14px; overflow: auto; } .panel-body form { display: grid; gap: 10px; } .panel-body hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.keyboard-help { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; color: #687a8e; font-size: 10px; }
.mobile-nav { display: none; }
@media (max-width: 1050px) {
    :root { --sidebar-width: 74px; } .sidebar .brand > span:last-child, .nav-item:not(.active) { font-size: 0; } .nav-item, .brand { justify-content: center; } .nav-item.active { font-size: 0; } .nav-item span, .nav-item .area-dot { font-size: 14px; } .nav-label, .worker-card { display: none; } .brand { padding-inline: 0; }
    .area-grid { grid-template-columns: 1fr; } .area-card { min-height: auto; } .task-row { grid-template-columns: minmax(240px, 1fr) 105px 70px 20px; } .task-next { display: none; }
    .topic-grid { grid-template-columns: repeat(3, 1fr); } .task-layout, .juergen-chat-layout { grid-template-columns: 1fr; } .task-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .juergen-context-card { position: static; }
    .board-shell { grid-template-columns: minmax(0, 1fr) 280px; } .board-toolbar { left: 10px; right: 10px; overflow-x: auto; transform: none; } .board-pencil-dock { display: flex; }
}
@media (max-width: 720px) {
    .app-shell { display: block; } .sidebar { display: none; } .app-main { display: block; } .topbar { min-height: 52px; padding: 0 12px; } .top-actions .btn:first-child { display: none; }
    .content { width: calc(100% - 24px); padding: 17px 0 88px; } .page-head { align-items: flex-start; } .page-head .head-actions { display: none; } .task-heading .task-actions { justify-content: flex-start; }
    .quick-capture { grid-template-columns: 1fr auto; } .quick-capture .btn:last-child { display: none; }
    .area-grid, .two-column, .area-overview-grid, .board-grid, .settings-grid, .security-grid, .artifact-grid { grid-template-columns: 1fr; } .area-card p { min-height: auto; }
    .inline-form { grid-template-columns: 1fr; } .totp-setup { grid-template-columns: 1fr; } .totp-qr { width: min(230px, 100%); height: auto; }
    .task-row { min-height: 72px; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 7px; } .task-provider, .task-next { display: none; } .status { justify-self: end; }
    .section-head { align-items: flex-start; } .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tabs { margin-inline: -12px; width: calc(100% + 24px); } .tabs a { min-width: auto; padding-inline: 13px; }
    .form-grid { grid-template-columns: 1fr; } .form-grid .full { grid-column: auto; } .task-side { grid-template-columns: 1fr; } .juergen-composer > div { align-items: stretch; flex-direction: column; } .juergen-composer .btn { width: 100%; }
    .mobile-nav { position: fixed; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); inset: auto 0 0; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(8,13,19,.96); backdrop-filter: blur(18px); }
    .mobile-nav a, .mobile-nav button { display: grid; place-items: center; gap: 1px; padding: 3px; color: #93a2b2; border: 0; background: transparent; } .mobile-nav small { font-size: 9px; }
    .board-page .topbar { display: none; } .board-page .content { width: 100%; padding: 0 0 70px; } .board-page-head { min-height: 60px; padding: 8px 12px; margin: 0; } .board-page-head h1 { margin: 0; font-size: 18px; } .board-page-head .pill { margin: 0; }
    .board-shell { height: calc(100vh - 130px); min-height: 500px; grid-template-columns: 1fr; border-inline: 0; border-radius: 0; }
    .board-panel { position: fixed; z-index: 35; right: 0; bottom: 70px; width: min(330px, calc(100vw - 24px)); max-height: 65vh; border: 1px solid var(--line); border-radius: 12px 0 0 0; box-shadow: 0 0 40px rgba(0,0,0,.55); transform: translateX(100%); transition: transform .2s ease; }
    .board-shell.panel-open .board-panel { transform: none; } .board-toolbar button { font-size: 11px; }
}

.brainboard {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
}
.brainboard.is-focus {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: #050c18;
    padding: .75rem;
    overflow: hidden;
}
.brainboard__tabbar {
    display: flex;
    align-items: flex-end;
    gap: .18rem;
    border-bottom: 1px solid rgba(42, 48, 56, .9);
    padding: 0 .2rem;
    min-width: 0;
    overflow: hidden;
}
.brainboard__scope {
    flex: 0 0 auto;
    max-width: min(280px, 28vw);
    overflow: hidden;
    padding: .54rem .55rem .59rem;
    color: #7f98af;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.brainboard__tabs {
    display: flex;
    align-items: flex-end;
    gap: .18rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.brainboard__tabs::-webkit-scrollbar {
    display: none;
}
.brainboard__tab-actions {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    padding: 0 0 .28rem .35rem;
}
.brainboard__top-action {
    border: 1px solid rgba(96, 165, 250, .16);
    background: rgba(8, 17, 29, .72);
    color: #94a3b8;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
}
.brainboard__top-action:hover {
    color: #18f0a7;
    border-color: rgba(20, 241, 165, .28);
    background: rgba(20, 241, 165, .07);
}
.brainboard__tab {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    min-height: 34px;
    border: 1px solid rgba(96, 165, 250, .12);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: rgba(5, 12, 24, .58);
    color: #8ea2bd;
    padding: .35rem .45rem .38rem .6rem;
    transform: translateY(1px);
    flex: 0 0 auto;
}
.brainboard__tab.is-active {
    color: #18f0a7;
    border-color: rgba(20, 241, 165, .28);
    background: rgba(20, 241, 165, .06);
}
.brainboard__tab-label {
    color: inherit;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.brainboard__tab-label:hover {
    color: #18f0a7;
}
.brainboard__tab-label--editable {
    min-width: 82px;
    outline: 0;
}
.brainboard__tab-label--editable:focus {
    color: #18f0a7;
}
.brainboard__tab .inline-text-status {
    display: none;
}
.brainboard__tab-close {
    margin: 0;
}
.brainboard__tab-close button {
    border: 0;
    background: transparent;
    color: #64748b;
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 9px;
    line-height: 1;
}
.brainboard__tab--add button {
    border: 0;
    background: transparent;
    color: #64748b;
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 10px;
    line-height: 1;
}
.brainboard__tab-close button:hover,
.brainboard__tab--add button:hover {
    color: #18f0a7;
    background: rgba(20, 241, 165, .075);
}
.brainboard__tab-close.is-confirming button,
.brainboard__tab-close.is-confirming button:hover {
    width: 18px;
    min-width: 18px;
    height: 18px;
    border: 0 !important;
    border-radius: 4px;
    background: transparent !important;
    color: #fca5a5 !important;
    box-shadow: none !important;
    outline: 0;
}
.brainboard__tab--add {
    padding: .35rem .45rem .38rem;
}
.brainboard__tab--add:hover {
    border-color: rgba(20, 241, 165, .28);
    background: rgba(20, 241, 165, .055);
}
.brainboard__tab-close .pending-action__label {
    font-size: 9px;
    line-height: 1;
}
.brainboard__tab-close .pending-action__bar {
    display: none;
}
.brainboard__toolbar {
    display: flex;
    align-items: center;
    gap: .38rem;
    flex-wrap: wrap;
    padding: .45rem;
    border: 1px solid rgba(96, 165, 250, .12);
    border-radius: 8px;
    background: rgba(4, 10, 19, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.brainboard__group {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    min-height: 36px;
    padding: .18rem;
    border: 1px solid rgba(96, 165, 250, .1);
    border-radius: 8px;
    background: rgba(8, 17, 29, .62);
}
.brainboard__group--tail {
    margin-left: auto;
}
.brainboard__tool,
.brainboard__save,
.brainboard__mode,
.brainboard__shape,
.brainboard__width,
.brainboard__swatch {
    border: 1px solid rgba(96, 165, 250, .14);
    background: rgba(5, 12, 24, .85);
    color: #94a3b8;
    border-radius: 6px;
    min-width: 32px;
    height: 32px;
    padding: 0 .45rem;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    flex: 0 0 auto;
}
.brainboard__tool:hover,
.brainboard__mode:hover,
.brainboard__shape:hover,
.brainboard__width:hover,
.brainboard__save:hover,
.brainboard__tool.is-active,
.brainboard__mode.is-active,
.brainboard__shape.is-active,
.brainboard__width.is-active {
    color: #18f0a7;
    border-color: rgba(20, 241, 165, .3);
    background: rgba(20, 241, 165, .075);
}
.brainboard__save { color: #18f0a7; }
.brainboard__tool {
    text-decoration: none;
}
.brainboard__modes {
    padding: .16rem;
}
.brainboard__mode {
    min-width: 0;
    padding: 0 .65rem;
    font-weight: 800;
    white-space: nowrap;
}
.brainboard__mode:not(.is-active) {
    color: #64748b;
}
.brainboard__group[hidden],
.brainboard__text[hidden] {
    display: none !important;
}
.brainboard__swatch {
    min-width: 25px;
    width: 25px;
    height: 25px;
    padding: 0;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,255,255,0) 48%),
        var(--swatch);
}
.brainboard__swatch.is-active {
    outline: 2px solid rgba(248, 250, 252, .82);
    outline-offset: 2px;
    border-color: rgba(0, 0, 0, .35);
}
.brainboard__width {
    width: 34px;
    padding: 0 .35rem;
}
.brainboard__width span {
    display: block;
    width: 20px;
    min-height: 2px;
    border-radius: 999px;
    background: #cbd5e1;
}
.brainboard__zoom {
    min-width: 48px;
    height: 32px;
    border: 1px solid rgba(96, 165, 250, .12);
    border-radius: 6px;
    background: rgba(5, 12, 24, .62);
    color: #8ea2bd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    font: 800 10px 'JetBrains Mono', monospace;
    letter-spacing: .02em;
    user-select: none;
}
.brainboard__shape span {
    display: block;
    width: 19px;
    height: 14px;
    border: 2px solid currentColor;
}
.brainboard__shape-pill { border-radius: 999px; }
.brainboard__shape-box { border-radius: 4px; }
.brainboard__shape-diamond {
    width: 15px !important;
    height: 15px !important;
    transform: rotate(45deg);
    border-radius: 2px;
}
.brainboard__shape-data {
    transform: skew(-16deg);
    border-radius: 3px;
}
.brainboard__text {
    min-height: 38px;
    width: min(220px, 100%);
    border-radius: 6px;
    border: 1px solid rgba(96, 165, 250, .14);
    background: rgba(5, 12, 24, .8);
    color: #e8f0fb;
    padding: .4rem .55rem;
    font-size: 12px;
    flex: 1 1 150px;
    max-width: 240px;
}
.brainboard__status {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 6;
    min-width: 0;
    max-width: 220px;
    border: 1px solid rgba(96, 165, 250, .12);
    border-radius: 999px;
    background: rgba(5, 12, 24, .72);
    padding: .22rem .48rem;
    backdrop-filter: blur(10px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #64748b;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .16s ease, transform .16s ease;
}
.brainboard__status:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}
.brainboard__status[data-kind="ok"] { color: #18f0a7; }
.brainboard__status[data-kind="err"] { color: #f87171; }
.brainboard__status[data-kind="pending"] { color: #fbbf24; }
.brainboard__status[data-kind="sync"] {
    color: #18f0a7;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.brainboard__canvas-wrap {
    position: relative;
    border: 1px solid rgba(42, 48, 56, .9);
    border-radius: 8px;
    overflow: hidden;
    background: #050c18;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
}
.brainboard.is-focus .brainboard__canvas-wrap {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    resize: none;
}
.brainboard canvas {
    display: block;
    width: 100%;
    height: min(72vh, 820px);
    min-height: 560px;
    touch-action: none;
    cursor: default;
}
.brainboard[data-tool="draw"] canvas,
.brainboard[data-tool="marker"] canvas,
.brainboard[data-tool="arrow"] canvas {
    cursor: crosshair;
}
.brainboard[data-tool="pan"] canvas {
    cursor: grab;
}
.brainboard[data-tool="lasso"] canvas {
    cursor: crosshair;
}
.brainboard.is-eraser canvas {
    cursor: none;
}
.brainboard__inline-text {
    position: absolute;
    z-index: 12;
    resize: none;
    border: 1px solid rgba(20, 241, 165, .62);
    border-radius: 8px;
    background: rgba(5, 12, 24, .94);
    color: #e8f0fb;
    box-shadow: 0 0 0 2px rgba(20, 241, 165, .14), 0 16px 34px rgba(0, 0, 0, .34);
    padding: .6rem .7rem;
    font: 800 15px Inter, sans-serif;
    line-height: 1.32;
    outline: 0;
}
.brainboard.is-focus canvas {
    height: calc(100vh - 174px);
    min-height: 420px;
}
.brainboard__pencil-dock {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    border: 1px solid rgba(96, 165, 250, .14);
    border-radius: 999px;
    background: rgba(5, 12, 24, .68);
    padding: .28rem;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
    backdrop-filter: blur(14px);
}
.brainboard__pencil-dock + .brainboard__status {
    bottom: 3.6rem;
}
.brainboard__dock-btn,
.brainboard__dock-size {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(96, 165, 250, .12);
    border-radius: 999px;
    background: rgba(8, 17, 29, .74);
    color: #8ea2bd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.brainboard__dock-btn:hover,
.brainboard__dock-size:hover,
.brainboard__dock-btn.is-active,
.brainboard__dock-size.is-active {
    color: #18f0a7;
    border-color: rgba(20, 241, 165, .3);
    background: rgba(20, 241, 165, .08);
}
.brainboard__dock-size span {
    display: block;
    width: var(--eraser-dot, 5px);
    height: var(--eraser-dot, 5px);
    border-radius: 999px;
    background: currentColor;
}
.brainboard__dock-divider {
    width: 1px;
    height: 18px;
    background: rgba(96, 165, 250, .12);
}
.brainstorm-standalone-panel .brainboard canvas {
    height: calc(100vh - 330px);
    min-height: 460px;
}
.brainboard__tool--ipad {
    color: #60a5fa;
    border-color: rgba(96, 165, 250, .24);
}
.brainboard__tool--ipad:disabled {
    opacity: .78;
    cursor: wait;
}
.brainstorm-tablet {
    margin: -1.25rem;
    min-height: calc(100vh - 56px);
    background: #05070d;
}
.brainstorm-tablet-page {
    margin: 0;
    min-height: 100dvh;
    overflow: hidden;
    background: #05070d;
    color: #e8f0fb;
}
.brainstorm-tablet-page .brainstorm-tablet {
    margin: 0;
    min-height: 100dvh;
}
.brainstorm-tablet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid rgba(42, 48, 56, .86);
    background: rgba(5, 12, 24, .92);
}
.brainstorm-tablet__head h1 {
    margin: 0;
    color: #e8f0fb;
    font-size: 18px;
}
.brainstorm-tablet__eyebrow {
    color: #18f0a7;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.brainstorm-tablet-page {
    -webkit-tap-highlight-color: transparent;
}
.brainboard--tablet canvas,
.brainboard--tablet .brainboard__tabbar,
.brainboard--tablet .brainboard__toolbar,
.brainboard--tablet .brainboard__pencil-dock,
.ipad-board-picker__head,
.ipad-board-picker__card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.brainstorm-tablet-page input,
.brainstorm-tablet-page textarea,
.brainstorm-tablet-page [contenteditable="true"],
.brainstorm-tablet-page .brainboard__inline-text {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}
.brainboard--tablet {
    border-radius: 0;
    height: 100dvh;
    padding: 0;
    background: #05070d;
    overflow: hidden;
}
.brainboard--tablet .brainboard__head {
    display: none;
}
.brainboard--tablet .brainboard__tabbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 28;
    align-items: center;
    border-bottom: 1px solid rgba(42, 48, 56, .88);
    padding: max(6px, env(safe-area-inset-top)) 10px 0;
    gap: .18rem;
    background: rgba(5, 7, 13, .94);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
    pointer-events: none;
}
.brainboard--tablet .brainboard__tabs {
    pointer-events: auto;
    gap: .12rem;
    align-items: flex-end;
}
.brainboard--tablet .brainboard__tab {
    min-height: 34px;
    max-width: 168px;
    border: 1px solid rgba(96, 165, 250, .14);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: rgba(5, 12, 24, .68);
    padding: .32rem .56rem .36rem;
    transform: translateY(1px);
    backdrop-filter: none;
}
.brainboard--tablet .brainboard__tab.is-active {
    color: #7fffd1;
    border-color: rgba(20, 241, 165, .24);
    background: rgba(20, 241, 165, .105);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.brainboard--tablet .brainboard__tab-label {
    max-width: 126px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
}
.brainboard--tablet .brainboard__tab-actions {
    display: none;
}
.brainboard--tablet .brainboard__tablet-exit {
    pointer-events: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: .25rem;
    border: 1px solid rgba(96, 165, 250, .14);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: rgba(5, 12, 24, .68);
    color: #94a3b8;
    text-decoration: none;
    transform: translateY(1px);
}
.brainboard--tablet .brainboard__tablet-exit:hover {
    color: #f87171;
    border-color: rgba(248, 113, 113, .28);
    background: rgba(248, 113, 113, .08);
}
.brainboard--tablet .brainboard__toolbar {
    position: static;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.brainboard--tablet .brainboard__group {
    flex: 0 0 auto;
    pointer-events: auto;
    background: rgba(5, 12, 24, .84);
    border-color: rgba(96, 165, 250, .16);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(18px);
}
.brainboard--tablet .brainboard__modes,
.brainboard--tablet .brainboard__group--nav,
.brainboard--tablet .brainboard__group--elements,
.brainboard--tablet .brainboard__group--tail,
.brainboard--tablet .brainboard__group--draw,
.brainboard--tablet .brainboard__group--colors,
.brainboard--tablet .brainboard__group--widths {
    position: fixed;
    z-index: 24;
}
.brainboard--tablet .brainboard__modes {
    display: none;
}
.brainboard--tablet .brainboard__group--elements {
    top: max(50px, calc(env(safe-area-inset-top) + 46px));
    left: 10px;
    right: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 12px;
    padding-left: .34rem;
    padding-right: .34rem;
}
.brainboard--tablet .brainboard__group--elements::-webkit-scrollbar {
    display: none;
}
.brainboard--tablet .brainboard__group--nav {
    display: none;
}
.brainboard--tablet .brainboard__group--tail {
    top: max(116px, calc(env(safe-area-inset-top) + 110px));
    right: 12px;
    margin-left: 0;
    border-radius: 999px;
}
.brainboard--tablet .brainboard__group--draw {
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    border-radius: 999px;
}
.brainboard--tablet .brainboard__group--colors {
    left: 50%;
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 58px));
    transform: translateX(-50%);
    border-radius: 999px;
}
.brainboard--tablet .brainboard__group--widths {
    right: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
    border-radius: 999px;
}
.brainboard--tablet .brainboard__tool,
.brainboard--tablet .brainboard__save,
.brainboard--tablet .brainboard__mode,
.brainboard--tablet .brainboard__shape,
.brainboard--tablet .brainboard__width {
    min-width: 42px;
    height: 42px;
    font-size: 12px;
}
.brainboard--tablet .brainboard__swatch {
    width: 34px;
    height: 34px;
}
.brainboard--tablet .brainboard__text {
    max-width: 190px;
    min-height: 44px;
}
.brainboard--tablet .brainboard__canvas-wrap {
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.brainboard--tablet canvas {
    height: 100dvh;
    min-height: 100dvh;
}
.brainboard--tablet .brainboard__pencil-dock {
    right: auto;
    left: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
}
.ipad-board-picker {
    min-height: 100dvh;
    padding: max(22px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
    background: #05070d;
}
.ipad-board-picker__head {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin-bottom: 1.1rem;
}
.ipad-board-picker__head span {
    color: #18f0a7;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.ipad-board-picker__head strong {
    min-width: 0;
    color: #e8f0fb;
    font-size: clamp(20px, 3vw, 34px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ipad-board-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}
.ipad-board-picker__card {
    position: relative;
    display: grid;
    gap: .3rem;
    min-height: 132px;
    padding: 1rem 3rem 1rem 1rem;
    border: 1px solid rgba(96, 165, 250, .16);
    border-radius: 10px;
    background: rgba(8, 17, 29, .78);
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.ipad-board-picker__card.is-active {
    border-color: rgba(20, 241, 165, .34);
    background: rgba(20, 241, 165, .08);
}
.ipad-board-picker__card span {
    color: #e8f0fb;
    font-size: 20px;
    font-weight: 850;
}
.ipad-board-picker__card small {
    align-self: end;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.ipad-board-picker__card i {
    position: absolute;
    right: 1rem;
    top: 50%;
    color: #18f0a7;
    transform: translateY(-50%);
}
.ipad-receiver {
    min-height: calc(100vh - 120px);
    display: grid;
    place-items: center;
    padding: 1.5rem;
}
.ipad-receiver__panel {
    width: min(520px, 100%);
    border: 1px solid rgba(96, 165, 250, .18);
    background: rgba(8, 17, 29, .82);
    border-radius: 8px;
    padding: 1.4rem;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
}
.ipad-receiver__panel > i {
    color: #18f0a7;
    font-size: 34px;
    margin-bottom: .6rem;
}
.ipad-receiver__panel h1 {
    margin: 0 0 .35rem;
    color: #e8f0fb;
    font-size: 24px;
}
.ipad-receiver__actions {
    display: flex;
    justify-content: center;
    gap: .45rem;
    margin: .8rem 0 .55rem;
}
.ipad-receiver__panel p {
    margin: 0 0 .55rem;
    color: #94a3b8;
}
.ipad-receiver__panel p:last-of-type {
    margin-bottom: 1rem;
}
.ipad-receiver__boards {
    display: grid;
    gap: .45rem;
    margin-top: .9rem;
    max-height: min(58vh, 520px);
    overflow: auto;
    text-align: left;
}
.ipad-receiver__board {
    display: flex;
    flex-direction: column;
    gap: .16rem;
    padding: .68rem .75rem;
    border: 1px solid rgba(96, 165, 250, .12);
    border-radius: 8px;
    background: rgba(5, 12, 24, .72);
    color: inherit;
    text-decoration: none;
}
.ipad-receiver__board:hover {
    border-color: rgba(20, 241, 165, .3);
    background: rgba(20, 241, 165, .055);
}
.ipad-receiver__board strong {
    color: #e8f0fb;
    font-size: 13px;
}
.ipad-receiver__board span {
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
}

@media (max-width: 900px) {
    .plan-grid,
    .plan-execution-grid,
    .brainstorm-plan-grid,
    .brainstorm-output-grid,
    .brainstorm-mini-list {
        grid-template-columns: 1fr;
    }
    .brainstorm-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .brainboard__tabs {
        padding-left: 0;
        padding-right: 0;
    }
    .brainboard__group--tail { margin-left: 0; }
    .brainboard canvas {
        height: 62vh;
        min-height: 460px;
    }
    .brainstorm-tablet {
        margin: -.8rem;
    }
    .brainstorm-tablet-page .brainstorm-tablet {
        margin: 0;
    }
    .brainboard--tablet .brainboard__toolbar {
        max-width: none;
    }
    .brainboard--tablet .brainboard__modes,
    .brainboard--tablet .brainboard__group--nav {
        top: max(60px, calc(env(safe-area-inset-top) + 54px));
    }
    .brainboard--tablet .brainboard__group--elements {
        top: max(50px, calc(env(safe-area-inset-top) + 46px));
        left: 10px;
        right: 10px;
    }
    .brainboard--tablet .brainboard__group--tail {
        top: max(164px, calc(env(safe-area-inset-top) + 158px));
    }
    .brainboard--tablet canvas {
        height: 100dvh;
        min-height: 100dvh;
    }
}

/* Orbit adaptation of the Cockpit OS whiteboard shell. */
.board-page .content { width: calc(100% - 34px); max-width: none; padding-top: 12px; }
.board-page .brainboard { min-height: calc(100dvh - 98px); }
.board-page .brainboard__canvas-wrap { flex: 1 1 auto; }
.board-page .brainboard__tab-close { color: #64748b; font: 700 14px/1 sans-serif; }
.board-page .brainboard__tab-close:hover { color: #f87171; }
.brainboard__top-action { font-family: inherit; }
.brainboard--tablet .brainboard__canvas-wrap { min-height: 100dvh; }

.ipad-scope-page {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: radial-gradient(circle at 10% 10%, rgba(34, 95, 84, .18), transparent 34%), radial-gradient(circle at 90% 90%, rgba(77, 71, 147, .16), transparent 38%), #05070d;
}
.ipad-scope-picker { width: min(1100px, 100%); }
.ipad-scope-picker__intro { max-width: 660px; margin-bottom: 28px; } .ipad-scope-picker__intro h1 { font-size: clamp(32px, 5vw, 58px); } .ipad-scope-picker__intro p { margin: 0; font-size: 16px; }
.ipad-scope-picker__areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ipad-scope-picker__area { min-height: 218px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, #111c27), #091019 80%); box-shadow: 0 16px 46px rgba(0, 0, 0, .25); }
.ipad-scope-picker__area:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 75%, white); } .ipad-scope-picker__area strong { margin-top: auto; font-size: 22px; } .ipad-scope-picker__area b { margin-top: 8px; color: color-mix(in srgb, var(--accent) 75%, white); } .ipad-scope-picker__area.is-empty { opacity: .62; }
.ipad-scope-picker__hint { margin: 20px 0 0; color: #708195; font-size: 12px; }
@media (max-width: 760px) { .ipad-scope-picker__areas { grid-template-columns: 1fr; } .brainboard__scope { display: none; } }