:root {
  --paper: #f6f0e7; --card: #fffaf3; --ink: #2b2733; --ink2: #575062; --muted: #8a8295; --line: #e6dccd; --line2: #d9ccb9;
  --gold: #e2a93b; --gold2: #f4d58d; --navy: #2f3b63; --teal: #3fa79c; --coral: #ec7f63; --indigo: #6f74de; --violet: #6c5ce7;
  --shadow: 0 12px 34px -14px rgba(70, 45, 30, .32), 0 2px 6px rgba(70, 45, 30, .06);
  --f-ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --f-disp: "Fraunces", Georgia, serif; --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --dirw: 380px; --railw: 76px; --toph: 60px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--f-ui); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, textarea, select { font: inherit; color: var(--ink); }
a { color: var(--navy); }
img { display: block; }
h1, h2, h3, h4, h5 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 70%, transparent); outline-offset: 2px; }

/* ---------- boot ---------- */
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(900px 600px at 40% 30%, #fffaf2, #f2e6dc 60%, #e8def0); transition: opacity .5s; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px; }
.boot-owl { font-size: 54px; animation: bob 1.6s ease-in-out infinite; }
.boot-card b { font-family: var(--f-disp); font-size: 20px; color: var(--navy); }
.boot-card span { color: var(--ink2); font-weight: 600; }
#boot.error .boot-card span { color: #c4525a; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* ---------- app grid ---------- */
.app { position: fixed; inset: 0; display: grid; grid-template-columns: var(--railw) minmax(0, 1fr) 0; grid-template-rows: var(--toph) minmax(0, 1fr); }
body.dir-open .app { grid-template-columns: var(--railw) minmax(0, 1fr) var(--dirw); }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: linear-gradient(180deg, #fffaf2, #fbf3e8); border-bottom: 1px solid rgba(226, 169, 59, .25); z-index: 5; min-width: 0; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.logo { width: 42px; height: 42px; flex: none; border-radius: 13px; background: linear-gradient(145deg, #2f3b63, #4a5a96); padding: 2px; }
.logo img { width: 38px; height: 38px; border-radius: 11px; }
.brand-t { min-width: 0; }
.brand h1 { font-family: var(--f-disp); font-size: 19px; color: var(--navy); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p { margin: 1px 0 0; font-size: 11.5px; color: var(--ink2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 11px; font: 700 11px var(--f-mono); letter-spacing: .03em; border: 1.5px solid; background: #fff; }
.ai-chip.on { color: #2e7d57; border-color: #9fd6b8; }
.ai-chip.off { color: #a6444b; border-color: #efb7bc; border-style: dashed; }
.audio { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.audio button { width: 32px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); display: grid; place-items: center; }
.audio button.on { background: var(--navy); color: #fff; }
.date-chip { font-weight: 700; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.me { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-align: left; }
.me img { width: 34px; height: 34px; border-radius: 50%; background: #e4ecf8; }
.me b { display: block; font-size: 12.5px; line-height: 1.1; }
.me small { font-size: 10.5px; color: var(--muted); font-weight: 600; }

.rail { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; gap: 1px; padding: 8px 6px; overflow-y: auto; background: #fbf5ec; border-right: 1px solid var(--line); scrollbar-width: none; }
.rail button { position: relative; border: 0; background: transparent; border-radius: 12px; padding: 7px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink2); font-size: 10px; font-weight: 700; }
.rail button:hover { background: #fff; color: var(--navy); }
.rail button.active { background: var(--navy); color: #fff; }
.badge { position: absolute; top: 3px; right: 8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: #fff; font-size: 10px; display: grid; place-items: center; font-style: normal; }

.stage { grid-row: 2; grid-column: 2; position: relative; overflow: hidden; background: radial-gradient(1100px 700px at 38% 18%, #fffaf2 0%, #f9ecdd 42%, #ecdff0 100%); }
body.den-on .stage { background: radial-gradient(1100px 700px at 50% 60%, #3a3266 0%, #241f45 55%, #16122c 100%); }
#c3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.card { background: rgba(255, 250, 243, .95); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--shadow); border-radius: 18px; }

/* ---------- hero / briefing ---------- */
.hero { position: absolute; top: 14px; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; z-index: 2; }
.cta { display: flex; align-items: center; gap: 11px; padding: 6px 22px 6px 6px; border-radius: 999px; border: 2px solid var(--gold2); background: linear-gradient(135deg, #2f3b63, #46589a); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .1em; box-shadow: 0 12px 26px -10px rgba(47, 59, 99, .7), 0 0 0 6px rgba(226, 169, 59, .14); animation: ctaGlow 3.2s ease-in-out infinite; }
.cta img { width: 38px; height: 38px; border-radius: 50%; background: #f4ead6; }
@keyframes ctaGlow { 50% { box-shadow: 0 12px 26px -10px rgba(47, 59, 99, .7), 0 0 0 11px rgba(226, 169, 59, .08); } }
.hero-sec { display: flex; gap: 6px; flex-wrap: wrap; max-width: 330px; }
.hero-sec button { border: 1px solid #fff; background: rgba(255, 250, 243, .96); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--ink2); box-shadow: 0 4px 12px -8px rgba(70, 45, 30, .4); }
body.den-on .hero, body.stepping .hero, body.view-open .hero { display: none; }

.brief { position: absolute; left: 16px; bottom: 76px; width: 300px; padding: 13px; z-index: 2; }
.brief .hello { font-family: var(--f-disp); font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.15; padding-right: 24px; }
.brief .sub { font-size: 11.5px; color: var(--ink2); margin: 4px 0 9px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.brief .sub b { color: var(--coral); }
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cat { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px 5px 9px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.cat .k { font: 700 9px var(--f-mono); letter-spacing: .03em; color: var(--ink2); white-space: nowrap; }
.cat .n { display: grid; place-items: center; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 6px; background: #f1e8dc; font-weight: 800; font-size: 10.5px; }
.cat.hot { border-color: #f5c3b3; background: #fff5f1; } .cat.hot .n { background: var(--coral); color: #fff; }
.cat.appr { border-color: #f2d79c; background: #fffaf0; } .cat.appr .n { background: var(--gold); color: #fff; }
.next { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: #fff6e2; border: 0; border-left: 4px solid var(--gold); font-size: 12px; }
.next b { display: block; font: 700 9.5px var(--f-mono); letter-spacing: .06em; color: #a87a1c; margin-bottom: 2px; }
.x { position: absolute; top: 9px; right: 9px; }
.ib { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; display: inline-grid; place-items: center; color: var(--ink2); flex: none; }
.ib:hover { background: #fff; color: var(--ink); }
.ib.sm { width: 26px; height: 26px; }

/* ---------- view panel ---------- */
.viewpanel { position: absolute; left: 12px; top: 12px; bottom: 12px; width: min(720px, calc(100% - 24px)); display: flex; flex-direction: column; z-index: 4; overflow: hidden; }
.viewpanel > header { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.viewpanel > header h2 { font-family: var(--f-disp); font-size: 21px; color: var(--navy); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewpanel > header .ib { font-size: 18px; font-weight: 700; }
.vbody { flex: 1; overflow-y: auto; padding: 14px 16px 30px; scrollbar-width: thin; }
.vsec { margin-top: 18px; }
.vsec > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.vsec > header h3 { font: 700 11px var(--f-mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.vsec > header h3 i { font-style: normal; color: var(--ink2); }
.vbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; background: #f3effa; color: #4f4570; font-size: 12.5px; margin: 8px 0; }
.note.warn { background: #fff4e3; color: #7a5410; }
.empty { padding: 22px; border: 1.5px dashed var(--line2); border-radius: 16px; text-align: center; color: var(--ink2); }
.empty b { display: block; font-size: 14px; color: var(--ink); }
.empty p { margin: 6px 0 10px; font-size: 12.5px; }
.tabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs.wrap { flex-wrap: wrap; margin-bottom: 8px; }
.tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 800; color: var(--ink2); white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tab i { font-style: normal; color: var(--muted); font-weight: 700; }
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tab.on { background: var(--navy); border-color: var(--navy); color: #fff; } .tab.on i { color: #cfd6f2; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line2); background: #fff; border-radius: 10px; padding: 7px 12px; font-size: 12.5px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--navy); }
.btn.sm { padding: 5px 9px; font-size: 11.5px; border-radius: 9px; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.danger { color: #b2373f; border-color: #efb7bc; }
.btn.danger:hover { background: #b2373f; color: #fff; }
.btn.ghost { border-color: transparent; color: var(--muted); }
.link { border: 0; background: none; color: var(--navy); text-decoration: underline; padding: 0; font-size: 12px; }
.acts-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.search { width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line2); background: #fff; margin-bottom: 10px; }
.bar { flex: 1; display: block; height: 7px; border-radius: 4px; background: #efe5d8; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; }

/* project cards & detail */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pcard { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 12px; border-top: 4px solid var(--c); display: flex; flex-direction: column; gap: 7px; }
.pcard:hover { box-shadow: var(--shadow); }
.pcard b { font-size: 14px; line-height: 1.25; }
.pc-top, .ph-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pc-prog, .ph-prog { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink2); font-weight: 700; }
.pc-next { font-size: 11.5px; color: var(--ink2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pc-team { display: flex; align-items: center; gap: -4px; }
.pc-team .av { margin-right: -5px; border: 2px solid #fff; border-radius: 50%; }
.pc-team .due { margin-left: auto; }
.pstatus { font: 700 10px var(--f-mono); text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: #eef6f2; color: #2e7d57; }
.pstatus.paused { background: #fff4e3; color: #9a6a12; } .pstatus.completed { background: #e8f0fd; color: #2f5fb0; } .pstatus.archived { background: #f0eef3; color: #7b8496; }
.kind { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 800; color: var(--c); }
.phead { border-left: 5px solid var(--c); padding: 2px 0 6px 12px; }
.phead h2 { font-family: var(--f-disp); font-size: 22px; color: var(--navy); margin: 6px 0 8px; outline: 0; border-radius: 6px; }
.phead h2:focus { background: #fff; box-shadow: 0 0 0 2px var(--gold2); }
.ph-prog b { font-size: 13px; color: var(--ink); } .ph-prog span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink2); }
.inline select, .inline input { border: 1px solid var(--line2); border-radius: 8px; padding: 5px 8px; background: #fff; font-size: 12px; }
.due { display: inline-flex; gap: 3px; align-items: center; font: 700 10.5px var(--f-mono); color: var(--ink2); }
.due.late { color: #c4525a; }
.jbox { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); margin-top: 10px; font-size: 12px; }
.jbox input { border: 1px solid var(--line2); border-radius: 8px; padding: 5px 8px; flex: 1 1 140px; min-width: 0; }
.jbox input.short { flex: 0 0 110px; }

.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.task { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 9px 10px; border-radius: 13px; background: #fff; border: 1px solid var(--line); }
.task.working { border-color: #8fd3a8; box-shadow: 0 0 0 3px rgba(58, 168, 100, .12); }
.task-main { min-width: 0; flex: 1; }
.task-top { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.task-title { border: 0; background: none; padding: 0; text-align: left; font-weight: 800; font-size: 13.5px; margin: 4px 0 3px; color: var(--ink); }
.task-title:hover { color: var(--navy); text-decoration: underline; }
.task-meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 11.5px; }
.task-note { font-size: 11.5px; color: #7a5410; margin-top: 4px; }
.task-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 46%; }
.tagmini { font: 700 9.5px var(--f-mono); padding: 1px 6px; border-radius: 5px; background: #efe8f9; color: #5e4a8a; text-transform: uppercase; }
.tagmini.gate { background: #fff1d1; color: #9a6a12; } .tagmini.ok { background: #e3f4ea; color: #2e7d57; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--f-mono); color: #2e7d57; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3aa864; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; transform: scale(1.4); } }

.memgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mem { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 0; }
.mem summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 8px 11px; font-weight: 800; font-size: 12.5px; }
.mem summary::-webkit-details-marker { display: none; }
.mem summary i { font-style: normal; color: var(--teal); font: 700 11px var(--f-mono); }
.mem.filled { border-color: #bfe3cd; background: #fbfffc; }
.mem[open] { grid-column: span 2; }
.mem textarea { width: calc(100% - 20px); margin: 0 10px 8px; border: 1px solid var(--line2); border-radius: 9px; padding: 8px; resize: vertical; }
.memlist { list-style: none; margin: 0; padding: 0 10px; }
.memlist li { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 12px; border-top: 1px dashed var(--line); }
.memlist li .ib { margin-left: auto; }
.memadd { display: flex; gap: 6px; padding: 6px 10px 10px; }
.memadd input { flex: 1; min-width: 0; border: 1px solid var(--line2); border-radius: 8px; padding: 5px 8px; }

.alist, .klist, .evlist, .opp { list-style: none; margin: 0; padding: 0; }
.arow { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 12.5px; }
.arow a { font-weight: 700; }
.klist li { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); margin-bottom: 6px; }
.evlist li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 12px; }
.evlist time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.evlist code { font: 600 10.5px var(--f-mono); color: #5e4a8a; }
.evlist em { font: 700 10px var(--f-mono); font-style: normal; padding: 1px 6px; border-radius: 5px; background: #f1ecf8; color: #5e4a8a; }
.evlist em.src-ai { background: #efe8fd; color: #6f4bd8; } .evlist em.src-user { background: #fbefe2; color: #9a5f17; } .evlist em.src-sample { background: #f0eef3; color: #6f6b78; }
.opp li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px dashed var(--line); }
.opp li span { display: flex; gap: 4px; flex-wrap: wrap; }

.pipe { display: flex; flex-wrap: wrap; gap: 6px; }
.stg { flex: 1 1 120px; min-height: 86px; border-radius: 14px; padding: 9px; background: #fff; border: 1px solid var(--line); }
.stg .n { font: 700 10px var(--f-mono); color: var(--muted); }
.stg b { display: block; font-size: 12px; line-height: 1.2; margin: 2px 0 6px; }
.pj { display: block; width: 100%; text-align: left; font-size: 11px; font-weight: 700; padding: 5px 7px; border-radius: 8px; border: 0; background: color-mix(in srgb, var(--c) 14%, #fff); border-left: 3px solid var(--c); margin-top: 4px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.kpi { border-radius: 14px; background: #fff; border: 1px solid var(--line); padding: 10px 12px; }
.kpi small { display: block; font: 700 9.5px var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.kpi b { display: block; font-size: 22px; font-family: var(--f-disp); margin: 2px 0; }
.kpi span { font-size: 11.5px; color: var(--ink2); display: flex; gap: 4px; flex-wrap: wrap; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; font: 700 9.5px var(--f-mono); letter-spacing: .06em; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); background: #fcf8f2; }
td { padding: 8px; border-bottom: 1px dashed var(--line); vertical-align: top; }
td select { border: 1px solid var(--line2); border-radius: 7px; padding: 3px 5px; font-size: 12px; }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-h { font: 700 10px var(--f-mono); color: var(--muted); text-align: center; padding: 4px 0; }
.cal-c { min-height: 78px; border-radius: 10px; background: #fff; border: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-c.off { background: transparent; border-color: transparent; }
.cal-c.today { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cal-c > span { font: 700 11px var(--f-mono); color: var(--ink2); }
.cal-i { border: 0; text-align: left; font-size: 10.5px; font-weight: 700; padding: 2px 5px; border-radius: 5px; background: color-mix(in srgb, var(--c) 18%, #fff); border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calnav { display: flex; align-items: center; gap: 8px; }

.grp { font: 700 11px var(--f-mono); letter-spacing: .1em; color: var(--muted); margin: 14px 0 8px; text-transform: uppercase; }
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.acard { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.acard img { width: 54px; height: 54px; border-radius: 14px; flex: none; }
.acard div { min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.acard b { font-family: var(--f-disp); font-size: 15px; color: var(--navy); }
.acard span { font-size: 11px; color: var(--ink2); font-weight: 600; line-height: 1.2; }
.acard em { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.appr { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 12px; margin-bottom: 10px; }
.appr.pending { border-color: #f2d79c; box-shadow: 0 12px 26px -22px rgba(160, 110, 20, .8); }
.appr > header { display: flex; gap: 10px; align-items: flex-start; }
.appr > header .av { border-radius: 10px; }
.appr > header div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.appr > header .muted { font-size: 11.5px; }
.appr p { margin: 8px 0; font-size: 12.5px; }
.appr details { margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 6px; }
.appr summary { cursor: pointer; font-weight: 700; font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.astatus { font: 700 10px var(--f-mono); text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: #f0eef3; color: #6f6b78; white-space: nowrap; }
.astatus.pending, .astatus.delegated { background: #fff1d1; color: #9a6a12; } .astatus.approved { background: #e3f4ea; color: #2e7d57; } .astatus.rejected { background: #fbe4e6; color: #b2373f; }
.plan-steps { margin: 6px 0 0; padding-left: 20px; font-size: 12.5px; }
.comments { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; background: #faf6ef; border-radius: 10px; padding: 8px; }

.meeting { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 11px; margin-bottom: 8px; }
.meeting > header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.mstatus { margin-left: auto; font: 700 10px var(--f-mono); text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: #f0eef3; }
.m-who { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.meet { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.meet div { border-radius: 10px; padding: 8px 10px; background: #fcf8f2; border: 1px solid var(--line); font-size: 12px; }
.meet div b { display: block; font: 700 9.5px var(--f-mono); letter-spacing: .06em; color: var(--c); }
.meet div ul { margin: 4px 0 0; padding-left: 16px; } .meet div p { margin: 4px 0 0; }
.meet .wide { grid-column: span 2; }
.final { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #eef1fb; font-size: 12.5px; }
.final b { font: 700 9.5px var(--f-mono); color: var(--navy); margin-right: 6px; }
.review { display: flex; gap: 8px; margin: 6px 0; font-size: 12.5px; }
.review .av { border-radius: 50%; flex: none; }

.states { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.states b { margin-right: 8px; }
.gates { display: flex; flex-direction: column; gap: 6px; }
.tog { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 0; }
.tog em { margin-left: auto; font: 700 10px var(--f-mono); font-style: normal; color: var(--muted); }
.tog.locked span { color: var(--ink2); }
.tog.mini { padding: 0; font-size: 11px; }
.aistat { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid; margin: 8px 0; font-size: 12.5px; }
.aistat.on { border-color: #9fd6b8; background: #f2fbf5; } .aistat.off { border-color: #efb7bc; border-style: dashed; background: #fff7f7; }
.aistat code { font: 600 11px var(--f-mono); }
.howto { padding-left: 18px; color: var(--ink2); }
.howto code { font: 600 11px var(--f-mono); background: #f3ece2; padding: 1px 4px; border-radius: 4px; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.int { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.int .plug { width: 28px; height: 28px; border-radius: 9px; background: #f6efe4; display: grid; place-items: center; color: var(--muted); flex: none; }
.int div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.int b { font-size: 12.5px; } .int small { font-size: 11px; }

/* AI providers & per-agent models */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.pcard { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); }
.pcard.on { border-color: color-mix(in srgb, var(--pc) 45%, #fff); box-shadow: inset 4px 0 0 var(--pc); }
.pcard p { margin: 0; }
.pcard .acts-row { margin-top: 6px; }
.pc-head { display: flex; align-items: center; gap: 9px; }
.pc-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-head b { font-size: 13.5px; } .pc-head small { font-size: 11px; color: var(--ink2); }
.pc-logo { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--pc); color: #fff; font: 800 14px var(--f-ui); font-style: normal; flex: none; }
.pcard.off .pc-logo { opacity: .55; }
.mtable { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.mrow { display: grid; grid-template-columns: minmax(150px, 1.25fr) minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(76px, .55fr) 12px; gap: 6px; align-items: center; padding: 6px 10px; border-top: 1px solid #f1e9dd; }
.mrow.head { border-top: 0; background: #fbf5ec; font: 700 10px var(--f-mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; padding: 7px 10px; }
.mrow.def { background: #fdf8ef; border-top: 0; }
.mrow.own { background: #fffdf8; }
.mrow.flash { animation: mflash 1.6s ease; }
@keyframes mflash { 0%, 60% { background: #fbeccc; } 100% { background: #fffdf8; } }
.mrow select { width: 100%; min-width: 0; border: 1px solid var(--line2); border-radius: 8px; padding: 4px 6px; background: #fff; font-size: 12px; }
.mrow select:disabled { background: #f8f3eb; color: var(--muted); }
.mrow .who { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap; row-gap: 0; }
.mrow .who img, .mrow .who .av { flex: none; }
.mrow .who b { font-size: 12.5px; }
.mrow .who small { flex-basis: 100%; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .who img + b + small, .mrow .who .av + b + small { padding-left: 31px; }
.mgrp { padding: 8px 10px 4px; font: 700 10px var(--f-mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; border-top: 1px solid var(--line); background: #fcf8f2; }
.rdot { width: 9px; height: 9px; border-radius: 50%; background: #c9c1b4; }
.rdot.on { background: #3aa66e; } .rdot.off { background: transparent; border: 2px solid #e08a8f; width: 8px; height: 8px; }
.mline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.mline i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.mline.off i { background: transparent; border: 2px solid #e08a8f; }
.mline em { font: 700 9.5px var(--f-mono); color: var(--muted); font-style: normal; text-transform: uppercase; }

/* ---------- inspector ---------- */
.inspector { position: absolute; right: 12px; top: 12px; width: 340px; max-height: calc(100% - 100px); overflow-y: auto; padding: 14px; z-index: 4; }
.ins-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; padding-right: 26px; }
.ins-head img { width: 62px; height: 62px; border-radius: 18px; flex: none; }
.ins-head .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: #f1e8dc; flex: none; }
.ins-head h3 { font-family: var(--f-disp); font-size: 19px; line-height: 1.15; color: var(--navy); }
.ins-head p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink2); font-weight: 600; line-height: 1.3; }
.fld { padding: 6px 0; border-top: 1px dashed var(--line); font-size: 12.5px; }
.fld > b { display: block; font: 700 9.5px var(--f-mono); letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.fld .line { display: flex; gap: 4px; flex-wrap: wrap; }
.fld .q { display: flex; gap: 5px; align-items: center; margin: 2px 0; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.acts .btn { white-space: normal; text-align: center; }
.divchip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: var(--c); margin-top: 3px; }
.divchip::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c); }

/* ---------- chips ---------- */
.prov { display: inline-flex; align-items: center; gap: 4px; font: 700 9.5px var(--f-mono); letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; border: 1.5px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); white-space: nowrap; vertical-align: middle; }
.prov.sample { border-style: dashed; color: #6f6b78; background: repeating-linear-gradient(135deg, #fff 0 5px, rgba(141, 138, 150, .12) 5px 10px); }
.prov.unavail { border-style: dotted; }
.st { display: inline-flex; align-items: center; gap: 5px; font: 700 9.5px var(--f-mono); letter-spacing: .03em; padding: 3px 7px; border-radius: 7px; color: #fff; background: var(--c); white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .9; }
.mini-av { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mini-av .av, .av { border-radius: 50%; }
.kbd { font: 600 11px var(--f-mono); padding: 3px 7px; border-radius: 7px; background: #fff; border: 1px solid var(--line); color: var(--ink2); }

/* ---------- markdown ---------- */
.md { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.md h3, .md h4, .md h5, .md h6 { font-family: var(--f-disp); color: var(--navy); margin: 12px 0 4px; }
.md p { margin: 6px 0; } .md ul, .md ol { margin: 6px 0; padding-left: 20px; }
.md code { font: 12px var(--f-mono); background: #f3ece2; padding: 1px 4px; border-radius: 4px; }
.md pre { background: #1f2235; color: #e7e9f5; padding: 10px; border-radius: 10px; overflow-x: auto; }
.md pre code { background: none; color: inherit; }
.md blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line2); color: var(--ink2); }
.md .tbl table { font-size: 12px; }

/* ---------- modals ---------- */
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(32, 26, 46, .35); display: grid; place-items: center; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(520px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; background: var(--card); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(20, 10, 30, .5); overflow: hidden; }
.modal.wide { width: min(860px, 100%); }
.modal > header { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--line); }
.modal > header h3 { flex: 1; font-family: var(--f-disp); font-size: 19px; color: var(--navy); min-width: 0; }
.modal-body { padding: 14px 18px; overflow-y: auto; }
.modal > footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.fld-l { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 800; color: var(--ink2); margin-bottom: 10px; }
.fld-l input, .fld-l textarea, .fld-l select { border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; background: #fff; font-weight: 500; font-size: 13px; }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu.grid { display: grid; grid-template-columns: 1fr 1fr; }
.menu button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 13px; }
.menu button.danger { color: #b2373f; }
.pick { max-height: 200px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: #fff; margin-bottom: 10px; }
.pick label { display: flex; gap: 6px; align-items: center; font-size: 12.5px; padding: 4px 0; }
.td-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.td h4 { font: 700 10.5px var(--f-mono); letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; text-transform: uppercase; }
.ctx { font-size: 12px; padding: 8px 10px; border-radius: 10px; background: #f2f7fb; margin: 8px 0; }
.warn-t { color: #9a6a12; font-weight: 700; font-size: 11.5px; }
.output { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 10px 12px; margin-bottom: 8px; }
.output > header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.output > footer { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.art-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.art-body { margin-top: 10px; }
pre.src { white-space: pre-wrap; font: 12px/1.5 var(--f-mono); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; max-height: 50vh; overflow: auto; }
.pe { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.pe-row { display: grid; grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto 28px; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pe-row .n { font: 700 11px var(--f-mono); color: var(--muted); }
.pe-row input, .pe-row select, .pe-row textarea { border: 1px solid var(--line2); border-radius: 8px; padding: 5px 7px; font-size: 12px; min-width: 0; }
.pe-row textarea { grid-column: 2 / -1; resize: vertical; }
.ask-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ask-head div { display: flex; flex-direction: column; }
.chat.ask { max-height: 50vh; min-height: 160px; overflow-y: auto; padding: 4px; }

/* ---------- director panel ---------- */
.director { grid-row: 2; grid-column: 3; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fbf6ee; border-left: 1px solid var(--line); }
.dir-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 6px 14px; }
.dir-head img { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #f4ead6, #e7d8bd); }
.dir-head div { flex: 1; min-width: 0; }
.dir-head b { display: block; font-family: var(--f-disp); font-size: 17px; color: var(--navy); line-height: 1.1; }
.dir-head span { font-size: 11px; color: var(--ink2); font-weight: 600; }
.dir-close { display: none; }
.disclaim { margin: 0 14px 6px; font-size: 10px; color: var(--muted); line-height: 1.3; }
.chat { flex: 1; overflow-y: auto; padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.msg { max-width: 94%; padding: 9px 12px; border-radius: 16px; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.msg.dir { background: #fff; border: 1px solid var(--line); border-top-left-radius: 6px; }
.msg.me { align-self: flex-end; background: var(--navy); color: #fff; border-top-right-radius: 6px; }
.msg.sys { background: #fff7f7; border: 1px dashed #efb7bc; color: #7a3b40; }
.msg .who { display: flex; gap: 5px; align-items: center; font-weight: 800; font-size: 11px; margin-bottom: 4px; }
.msg .md { font-size: 12.5px; }
.msg-prov { margin-top: 6px; }
.dots { display: inline-flex; gap: 3px; margin-right: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: .2; transform: translateY(-3px); } }
.proposal { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 6px 16px -12px rgba(70, 45, 30, .35); }
.prop-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.prop-head > span:first-child { font: 800 10px var(--f-mono); letter-spacing: .08em; color: var(--navy); }
.pstate { font: 700 9.5px var(--f-mono); font-style: normal; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: #fff1d1; color: #9a6a12; }
.pstate.approved { background: #e3f4ea; color: #2e7d57; } .pstate.rejected { background: #fbe4e6; color: #b2373f; } .pstate.paused { background: #f0eef3; color: #6f6b78; }
.proposal h5 { margin: 9px 0 4px; font: 700 9.5px var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.proposal p { margin: 0; font-size: 12.5px; }
.team { display: flex; flex-wrap: wrap; gap: 4px; }
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.flow li { display: flex; align-items: center; gap: 7px; padding: 4px 6px 4px 4px; border-radius: 10px; background: #faf6ef; border: 1px solid #efe5d6; font-size: 11.5px; font-weight: 700; }
.flow li .n { flex: none; width: 19px; height: 19px; border-radius: 6px; background: #efe5d6; display: grid; place-items: center; font: 700 9.5px var(--f-mono); color: var(--ink2); }
.flow li .t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.flow li small { font: 600 9.5px var(--f-mono); color: var(--muted); }
.flow li small.in { color: #9a6a12; } .flow li small.gt { color: #9a6a12; }
.flow li small.fi { color: #2f7f6a; } .flow li small.fin { color: #fff; background: var(--navy); padding: 1px 5px; border-radius: 5px; }
.flow li.final { border-color: #c9cfe6; background: #f4f5fb; }
.flow li img { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.flow li.gate { background: #fff6e2; border-color: #f2d79c; } .flow li.gate .n { background: var(--gold); color: #fff; }
.notes { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.notes div { display: flex; gap: 6px; font-size: 11px; color: var(--ink2); }
.notes i { font-style: normal; }
.reqs { margin: 0; padding-left: 18px; font-size: 12px; }
.prop-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.prop-acts button { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 7px 3px; font-size: 9.6px; font-weight: 800; letter-spacing: .04em; color: var(--navy); }
.prop-acts button:hover:not(:disabled) { border-color: var(--navy); }
.prop-acts .primary { background: linear-gradient(135deg, var(--gold), #d4952a); color: #fff; border-color: transparent; }
.hold-note { margin: 8px 0 0; font-size: 10.5px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.quick { display: flex; gap: 5px; overflow-x: auto; padding: 6px 12px; scrollbar-width: none; flex: none; }
.quick button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: var(--ink2); }
.att-pending { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 14px 6px; }
.att-pending span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line2); font-size: 11px; font-weight: 700; color: var(--ink2); max-width: 100%; }
.att-pending button { width: 18px; height: 18px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #f3ece2; color: var(--ink2); }
.msg .att { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.msg .att span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 10.5px; font-weight: 700; }
.msg.final { border: 1.5px solid #9fd6b8; background: #f2fbf5; }
.msg .offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; padding: 7px 8px; border-radius: 10px; background: #faf6ef; border: 1px solid #efe5d6; }
.msg .offer b { font-size: 12px; } .msg .offer span { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .msg .offer em { font-size: 11px; color: var(--muted); }
.msg.final .acts-row { margin-top: 8px; }
.result { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; margin: 10px 0; border-radius: 14px; border: 1.5px solid; }
.result > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 280px; }
.result small { font: 700 10px var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.result b { font-size: 14.5px; }
.result span { font-size: 11.5px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.result p { margin: 2px 0 0; }
.result .acts-row { margin-top: 0; }
.result.done { border-color: #9fd6b8; background: #f2fbf5; }
.result.working { border-color: #c9cfe6; background: #f6f7fc; border-style: dashed; }
.warn-t { color: #a5402f; }
.finalchip { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--navy); color: #fff; font: 700 9.5px var(--f-mono); letter-spacing: .08em; }
.tog.big span { font-size: 13px; line-height: 1.45; }
.composer { display: flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 5px 5px 5px 8px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line2); flex: none; }
.composer input { flex: 1; min-width: 0; border: 0; outline: 0; font-weight: 600; font-size: 13px; background: transparent; }
.composer button { width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #f3ece2; color: var(--ink2); flex: none; }
.composer button.send, .composer .send { background: var(--navy); color: #fff; }

/* ---------- zone bar, legend, step mode ---------- */
.zonebar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; padding: 5px; border-radius: 999px; z-index: 3; max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; }
.zb { border: 0; background: transparent; border-radius: 999px; padding: 7px 10px; font-size: 11.5px; font-weight: 800; color: var(--ink2); white-space: nowrap; display: flex; align-items: center; gap: 6px; flex: none; }
.zb i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.zb:hover { background: #fff; color: var(--navy); }
.zb.active { background: var(--navy); color: #fff; }
.zb.den { color: var(--violet); } .zb.den.active { background: var(--violet); color: #fff; }
.zonebar .sep { width: 1px; height: 22px; background: var(--line2); margin: 0 3px; flex: none; }
.seg { display: flex; padding: 2px; border-radius: 999px; background: #efe6d9; flex: none; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 6px 10px; font-size: 11.5px; font-weight: 800; color: var(--ink2); display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--navy); box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .3); }
.legend-mini { position: absolute; right: 12px; bottom: 70px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--ink2); border-radius: 14px; z-index: 2; }
.legend-mini span { display: flex; align-items: center; gap: 8px; }
.legend-mini .ring { width: 15px; height: 15px; border-radius: 50%; border: 3px solid #d98b1f; }
.legend-mini .dash { width: 15px; height: 15px; border-radius: 50%; border: 2px dashed #b9b3c3; }
body.view-open .legend-mini, body.insp-open .legend-mini { display: none; }
body.view-open .zonebar { left: calc(min(720px, 100% - 24px) + 24px); right: 12px; transform: none; max-width: none; }
body.insp-open .zonebar { right: 364px; }
body.view-open.insp-open .zonebar { display: none; }
.step-hud { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 3; max-width: calc(100% - 24px); }
.step-hud .where { padding: 7px 15px; border-radius: 999px; font-weight: 800; color: var(--navy); }
.step-hud .keys { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--ink2); font-weight: 700; padding: 5px 12px; border-radius: 999px; flex-wrap: wrap; justify-content: center; }
.tele { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.tele button { border: 1px solid #fff; background: rgba(255, 250, 243, .95); border-radius: 999px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; color: var(--ink2); }
.talk-hint { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; z-index: 3; }
.joy { position: absolute; left: 22px; bottom: 84px; width: 116px; height: 116px; border-radius: 50%; background: rgba(255, 250, 243, .6); border: 2px solid rgba(255, 255, 255, .9); z-index: 3; touch-action: none; box-shadow: var(--shadow); }
.joy .knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: linear-gradient(145deg, #fff, #efe6d9); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
@media (pointer: fine) and (min-width: 760px) { .joy { display: none; } }

/* ---------- den panel ---------- */
.den-panel { position: absolute; left: 16px; bottom: 76px; width: 330px; max-height: calc(100% - 100px); overflow-y: auto; padding: 15px; border-radius: 18px; background: rgba(29, 24, 56, .95); border: 1px solid #4b3fa0; color: #e9e3ff; z-index: 3; box-shadow: 0 20px 40px -20px #000; }
.den-panel .dp-k { font: 700 10px var(--f-mono); letter-spacing: .1em; color: #b9adff; }
.den-panel h3 { font-family: var(--f-disp); font-size: 18px; color: #fff; margin-top: 2px; }
.den-panel select { width: 100%; margin-top: 6px; border-radius: 8px; padding: 5px; background: #2e2858; color: #fff; border: 1px solid #4b3fa0; }
.den-panel .dp-sub { margin: 6px 0; font-size: 11px; color: #b9adff; }
.den-panel ol { list-style: none; margin: 0; padding: 0; }
.den-panel li { display: flex; gap: 9px; padding: 7px 0; border-top: 1px dashed rgba(185, 173, 255, .3); font-size: 12px; line-height: 1.35; }
.den-panel li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #ffe08a; color: #241f45; font: 800 11px var(--f-ui); font-style: normal; }
.den-panel li b { font: 700 9.5px var(--f-mono); color: #ffe08a; margin-right: 4px; }
.den-panel li small { display: block; color: #9d90e6; font: 600 10px var(--f-mono); margin-top: 2px; }
.den-panel .btn { background: transparent; color: #e9e3ff; border-color: #6c5ce7; }

/* ---------- 3D labels ---------- */
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; transition: opacity .25s; will-change: transform; }
.lbl.hide { opacity: 0; }
.lbl-wing { padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 250, 243, .92); border: 1px solid #fff; box-shadow: 0 6px 16px -10px rgba(60, 40, 30, .6); font-weight: 800; font-size: 12.5px; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.lbl-wing i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.lbl-room { padding: 4px 9px; border-radius: 999px; background: rgba(255, 250, 243, .94); border: 1px solid #fff; box-shadow: 0 4px 10px -8px rgba(60, 40, 30, .6); font-weight: 700; font-size: 11px; }
.lbl-room.sel { background: var(--navy); color: #fff; }
.lbl-proj { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 6px 11px; border-radius: 12px; background: #fff; border-left: 4px solid var(--c); box-shadow: 0 10px 22px -12px rgba(60, 40, 30, .6); font-size: 11px; max-width: 260px; white-space: normal; }
.lbl-proj b { font-size: 11.5px; }
.lbl-proj span { color: var(--ink2); font-weight: 600; font-size: 10.5px; }
.lbl-agent { padding: 2px 8px; border-radius: 999px; background: rgba(43, 39, 51, .84); color: #fff; font-weight: 700; font-size: 10.5px; display: flex; gap: 5px; align-items: center; }
.lbl-agent i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.lbl-agent em { font-style: normal; font: 700 9px var(--f-mono); opacity: .85; }
.lbl-emote { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 15px; box-shadow: 0 6px 14px -8px rgba(60, 40, 30, .7); }
.lbl-den { padding: 3px 9px; border-radius: 999px; background: rgba(29, 24, 56, .9); border: 1px solid var(--c); color: #efeaff; font: 700 10.5px var(--f-mono); }
body.den-on .lbl-wing, body.den-on .lbl-room, body.den-on .lbl-proj { opacity: .15; }

/* ---------- toasts ---------- */
#toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(560px, calc(100% - 24px)); }
.toast { padding: 9px 16px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow); opacity: 0; transform: translateY(-8px); transition: .25s; text-align: center; }
.toast.show { opacity: 1; transform: none; }
.toast.ok { background: #2e7d57; } .toast.warn { background: #9a6a12; } .toast.error { background: #b2373f; }

.bnav { display: none; }

/* ---------- tablet: Direktur becomes a drawer ---------- */
@media (max-width: 1179px) {
  .app, body.dir-open .app { grid-template-columns: var(--railw) minmax(0, 1fr) 0; }
  .director { position: fixed; top: var(--toph); right: 0; bottom: 0; width: min(400px, 92vw); z-index: 30; transform: translateX(105%); transition: transform .25s; box-shadow: -20px 0 40px -20px rgba(30, 20, 40, .4); }
  body.dir-open .director { transform: none; }
  .dir-close { display: grid; }
  .date-chip { display: none; }
}

/* ---------- phone ---------- */
@media (max-width: 759px) {
  :root { --toph: 52px; }
  .app, body.dir-open .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--toph) minmax(0, 1fr) 62px; }
  .rail, .legend-mini, .audio, .me div, .brand p { display: none; }
  .stage { grid-column: 1; }
  .brand h1 { font-size: 15px; }
  .logo { width: 36px; height: 36px; } .logo img { width: 32px; height: 32px; }
  .me { padding: 2px; } .me img { width: 30px; height: 30px; }
  .ai-chip { padding: 5px 8px; font-size: 10px; }
  .bnav { display: grid; grid-template-columns: repeat(5, 1fr); grid-row: 3; grid-column: 1; background: #fffaf3; border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .bnav button { position: relative; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 800; color: var(--muted); }
  .bnav button.on { color: var(--navy); }
  .bnav .badge { top: 0; right: 18%; }
  .director { position: fixed; inset: 0; width: auto; top: 0; z-index: 40; transform: translateY(105%); }
  body.dir-open .director { transform: none; }
  .hero { top: 10px; left: 10px; }
  .cta { font-size: 12px; padding: 4px 14px 4px 4px; } .cta img { width: 30px; height: 30px; }
  .hero-sec { display: none; }
  .brief { left: 8px; right: 8px; width: auto; bottom: 64px; }
  .viewpanel { position: fixed; inset: var(--toph) 0 62px 0; width: auto; border-radius: 0; z-index: 20; }
  .inspector { position: fixed; left: 0; right: 0; bottom: 62px; top: auto; width: auto; max-height: 70vh; border-radius: 20px 20px 0 0; z-index: 25; }
  .den-panel { left: 8px; right: 8px; width: auto; bottom: 64px; max-height: 45%; }
  .zonebar { bottom: 8px; left: 8px; right: 8px; transform: none; max-width: none; }
  .zb { padding: 6px 8px; } .seg button span { display: none; }
  .step-hud .keys { display: none; }
  .joy { bottom: 70px; }
  .talk-hint { bottom: 70px; left: auto; right: 12px; transform: none; }
  .memgrid { grid-template-columns: 1fr; } .mem[open] { grid-column: auto; }
  .task { flex-direction: column; } .task-acts { max-width: none; justify-content: flex-start; }
  .meet { grid-template-columns: 1fr; } .meet .wide { grid-column: auto; }
  .pe-row { grid-template-columns: 22px minmax(0, 1fr) 28px; } .pe-row select, .pe-row input[data-k="inputPrompt"], .pe-row .tog { grid-column: 2 / 3; }
  .menu.grid { grid-template-columns: 1fr; }
  #toasts { top: auto; bottom: 74px; }
  .viewpanel { background: #fffaf3; }
  body.view-open .labels, body.view-open .zonebar, body.view-open .hero, body.insp-open .zonebar { display: none; }
  .brief .cats { display: none; }
  .brief .hello { font-size: 17px; }
}

@media (max-width: 759px) {
  .mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px 10px; }
  .mrow .who { grid-column: 1 / -1; }
  .mrow.head span:first-child { display: none; }
  .mrow.head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px 10px; }
}

/* Integrations */
.svc { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 10px; font-size: 11.5px; }
.svc li.y { color: #2b6e4b; font-weight: 700; } .svc li.n { color: var(--muted); }
.svcpick { display: grid; gap: 3px; margin: 4px 0; font-size: 12px; }
.svcpick small { color: var(--muted); }
.copyline { display: flex; gap: 6px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.copyline code { font: 600 11.5px var(--f-mono); background: #f3ece2; padding: 4px 7px; border-radius: 6px; word-break: break-all; }
.ibar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ibar input:not([type]), .ibar input[type="text"], .ibar select { flex: 1 1 180px; min-width: 0; border: 1px solid var(--line2); border-radius: 9px; padding: 7px 9px; background: #fff; font-size: 13px; }
.ibar label { display: inline-flex; align-items: center; gap: 4px; }
.ibar label.inline select { flex: none; }
.crumbs { font-size: 12px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ilist { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ilist li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 7px 10px; border-top: 1px solid #f1e9dd; font-size: 12.5px; }
.ilist li:first-child { border-top: 0; }
.ilist li > span { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ilist li > span:last-child:not(:first-child) { flex-direction: row; align-items: center; gap: 6px; flex: none; }
.ilist small { color: var(--muted); font-size: 11px; }
.ilist pre.src { max-height: 240px; overflow: auto; width: 100%; }
.papers li { align-items: flex-start; }
.papers label { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.papers label > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.papers details { font-size: 11.5px; color: var(--ink2); }
.papers details p { margin: 4px 0 0; }
.metric { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin: 6px 0; line-height: 1.6; }
.sendbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 8px; padding: 7px 9px; border-radius: 10px; background: #f4f5fb; border: 1px solid #dfe3f2; }
.feedrow { display: grid; grid-template-columns: 1.2fr 2fr 1fr 1fr 1fr 28px; gap: 5px; margin-bottom: 5px; }
.feedrow input, .feedrow select { min-width: 0; border: 1px solid var(--line2); border-radius: 8px; padding: 6px 7px; font-size: 12px; background: #fff; }
.seg2 { display: flex; gap: 14px; margin: 6px 0; font-size: 12.5px; }
.acts-row.tight { margin-top: 0; }
.cal-i.g { text-decoration: none; display: block; }
@media (max-width: 759px) { .feedrow { grid-template-columns: 1fr 1fr; } .feedrow [data-rm] { justify-self: end; } }

/* OKR & KPI */
.okperiod { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 4px 0 8px; }
.okperiod .okbar { flex: 1 1 100%; }
.okbar { position: relative; display: block; height: 8px; border-radius: 99px; background: #efe7da; overflow: visible; margin: 5px 0; }
.okbar > i { display: block; height: 100%; border-radius: 99px; }
.okbar > b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); opacity: .55; border-radius: 1px; }
.okst { display: inline-block; padding: 1px 7px; border-radius: 6px; font: 700 9.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--c); }
.okdir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #f4f5fb; border: 1px solid #dfe3f2; margin: 8px 0 4px; }
.okdir > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.okdir .tog { margin: 4px 0 0; }
.okobj { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 10px 12px; margin-bottom: 10px; }
.okobj-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.okobj-h > div { flex: 1 1 240px; min-width: 0; }
.okobj-h p { margin: 2px 0; }
.okpct { font: 800 18px var(--f-ui); color: var(--navy); }
.oklist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.okm { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fbf8f2; border: 1px solid #f0e7da; }
.okm-main { flex: 1 1 300px; min-width: 0; }
.okm-title { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.okm-title b { font-size: 13px; }
.okm-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11px; color: var(--ink2); margin-top: 2px; }
.okm-meta em { color: var(--muted); }
.okm-num { font-size: 11.5px; color: var(--ink2); }
.okm-num b { color: var(--ink); font-size: 13px; }
.okm-acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.okhist { padding-left: 16px; color: var(--ink2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.okobj-h > div > span { display: block; }