:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090a09;
  color: #f4f4f3;
  --background: #0b0c0b;
  --panel: #101110;
  --muted: #1b1c1b;
  --border: #272927;
  --foreground: #f4f4f3;
  --muted-foreground: #8c8f8c;
  --accent: oklch(0.62 0.21 263);
  --orange: #f97316;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; overflow: hidden; background: #090a09; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
.label { color: #777b77; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

main { display: grid; grid-template-columns: 256px minmax(0, 1fr); height: 100vh; min-height: 0; }
.project-sidebar { position: relative; min-width: 0; overflow-y: auto; padding: 0 8px 64px; background: #080908; }
.studio-brand { height: 48px; margin: 0 -8px 12px; padding: 8px 18px; display: flex; align-items: center; gap: 10px; background: linear-gradient(110deg, color-mix(in oklch, var(--accent) 48%, black), color-mix(in oklch, var(--accent) 82%, black) 55%, color-mix(in oklch, var(--accent) 62%, black)); box-shadow: inset 0 -1px #ffffff12; }
.studio-brand-mark { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #ffffff66; border-radius: 5px; color: white; font-size: 9px; font-weight: 700; }
.studio-brand strong, .studio-brand span { display: block; }
.studio-brand .studio-brand-mark { display: grid; }
.studio-brand strong { font-size: 13px; line-height: 16px; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 5px 10px; }
.sidebar-label { padding: 0; }
.sidebar-projects-link { min-width: 0; padding: 5px 7px 5px 0; display: flex; align-items: center; gap: 7px; cursor: pointer; color: inherit; border: 0; border-radius: 5px; background: transparent; }
.sidebar-projects-link:hover .sidebar-label, .sidebar-projects-link.active .sidebar-label { color: #d5d8d5; }
.sidebar-projects-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar-project-count { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; color: #797d79; border: 1px solid #282b28; border-radius: 9px; background: #121312; font-size: 10px; }
.project-add-button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; cursor: pointer; color: #969a96; border: 0; border-radius: 5px; background: transparent; font-size: 19px; font-weight: 300; line-height: 1; }
.project-add-button:hover, .project-add-button:focus-visible { color: #fff; background: #1a1b1a; outline: none; }
#projects { display: grid; gap: 2px; }
.project { width: 100%; min-height: 58px; padding: 10px 11px; display: grid; grid-template-columns: 7px minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; color: inherit; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.project-copy, .project-copy strong, .project-copy span { min-width: 0; display: block; }
.project-copy strong { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.project-copy > span { margin-top: 6px; color: #777a77; font-size: 11px; }
.project-stage-dot, .kanban-stage-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #787c78; box-shadow: 0 0 0 3px #787c7815; }
.project-stage-dot[data-stage="ideas"], .kanban-stage-dot[data-stage="ideas"] { background: #a78bfa; box-shadow: 0 0 0 3px #a78bfa18; }
.project-stage-dot[data-stage="research"], .kanban-stage-dot[data-stage="research"] { background: #38bdf8; box-shadow: 0 0 0 3px #38bdf818; }
.project-stage-dot[data-stage="ready"], .kanban-stage-dot[data-stage="ready"] { background: #34d399; box-shadow: 0 0 0 3px #34d39918; }
.project-stage-dot[data-stage="production"], .kanban-stage-dot[data-stage="production"] { background: #f59e0b; box-shadow: 0 0 0 3px #f59e0b18; }
.project-stage-dot[data-stage="review"], .kanban-stage-dot[data-stage="review"] { background: #fb7185; box-shadow: 0 0 0 3px #fb718518; }
.project-stage-dot[data-stage="scheduled"], .kanban-stage-dot[data-stage="scheduled"] { background: #818cf8; box-shadow: 0 0 0 3px #818cf818; }
.project:hover { background: #141514; }
.project.active { color: #fff; }
.project.active[data-project-stage="ideas"] { background: #171226; }
.project.active[data-project-stage="research"] { background: #0b1b23; }
.project.active[data-project-stage="ready"] { background: #0c1d17; }
.project.active[data-project-stage="production"] { background: #241a08; }
.project.active[data-project-stage="review"] { background: #241014; }
.project.active[data-project-stage="scheduled"] { background: #12152a; }


.workspace { min-width: 0; min-height: 0; display: flex; height: 100vh; flex-direction: column; background: #0b0c0b; }
.surface-nav { height: 48px; flex: 0 0 48px; padding: 7px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #1e201e; background: #090a09; }
.surface-tabs, .surface-meta { display: flex; align-items: center; gap: 5px; }
.surface-tabs button { height: 34px; padding: 0 13px; cursor: pointer; color: #858885; border: 0; border-radius: 7px; background: transparent; font-size: 13px; }
.surface-tabs button:hover { color: #dfe1df; background: #151615; }
.surface-tabs button.active { color: white; background: #181918; box-shadow: inset 0 0 0 1px #202220; }

.projects-section { min-width: 0; min-height: 0; flex: 1; overflow: auto; padding: 20px 28px 40px; background: radial-gradient(circle at 35% 0, #151715 0, #0b0c0b 380px); }

.media-section { min-width: 0; min-height: 0; flex: 1; overflow-y: auto; padding: 28px 32px 48px; background: radial-gradient(circle at 35% 0, #151715 0, #0b0c0b 420px); }
.media-header { max-width: 1280px; margin: 0 auto 22px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.media-header h2 { margin-top: 4px; font-size: 30px; font-weight: 650; }
.media-header p:not(.label) { margin-top: 7px; color: #7f837f; font-size: 12px; }
.media-header button { height: 36px; padding: 0 14px; cursor: pointer; color: white; border: 1px solid color-mix(in oklch, var(--accent) 68%, black); border-radius: 7px; background: color-mix(in oklch, var(--accent) 72%, black); font-size: 12px; font-weight: 600; }
.media-header button:hover { background: color-mix(in oklch, var(--accent) 84%, black); }
.media-header button:disabled { cursor: wait; opacity: .55; }
.media-drop-zone { max-width: 1280px; min-height: 74px; margin: 0 auto 14px; display: grid; cursor: pointer; place-content: center; gap: 4px; text-align: center; color: #8b908b; border: 1px dashed #343a34; border-radius: 9px; background: #11141199; transition: border-color .15s, background .15s, color .15s; }
.media-drop-zone strong { color: #c5c9c5; font-size: 12px; }
.media-drop-zone span { font-size: 10px; }
.media-drop-zone:hover, .media-drop-zone:focus-visible, .media-drop-zone.is-drag-over { color: color-mix(in oklch, var(--accent) 34%, white); border-color: color-mix(in oklch, var(--accent) 70%, black); outline: none; background: color-mix(in oklch, var(--accent) 12%, transparent); }
.media-toolbar { max-width: 1280px; margin: 0 auto 16px; display: grid; grid-template-columns: minmax(220px, 440px) 160px auto; gap: 8px; }
.media-toolbar input, .media-toolbar select { width: 100%; height: 36px; padding: 0 11px; color: #e6e8e6; border: 1px solid #2d302d; border-radius: 7px; outline: none; background: #121412; font: 12px inherit; }
.media-toolbar input:focus, .media-toolbar select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 22%, transparent); }
.media-toolbar > button { height: 36px; padding: 0 11px; cursor: pointer; color: #898d89; border: 1px solid #2d302d; border-radius: 7px; background: #121412; font-size: 11px; }
.media-toolbar > button:hover { color: #dfe2df; border-color: #3a3e3a; }
.media-toolbar > button[aria-pressed="true"] { color: color-mix(in oklch, var(--accent) 38%, white); border-color: color-mix(in oklch, var(--accent) 58%, black); background: color-mix(in oklch, var(--accent) 16%, var(--background)); }
.media-status { max-width: 1280px; margin: 0 auto 10px; color: #737773; font-size: 11px; }
.media-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.media-card { min-width: 0; overflow: hidden; border: 1px solid #272a27; border-radius: 10px; background: #121412; box-shadow: 0 7px 22px #0002; }
.media-card.is-archived { opacity: .78; }
.media-preview { aspect-ratio: 16 / 10; display: grid; overflow: hidden; place-items: center; color: #858985; border-bottom: 1px solid #272a27; background: #0b0d0b; }
.media-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-type-mark { padding: 7px 9px; border: 1px solid #343834; border-radius: 6px; font: 600 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.media-card-copy { min-width: 0; padding: 11px 11px 8px; }
.media-card-copy strong, .media-card-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card-copy strong { color: #e3e5e3; font-size: 12px; font-weight: 550; }
.media-card-copy span { margin-top: 5px; color: #707470; font-size: 10px; text-transform: capitalize; }
.media-card-actions { margin: 0 11px 11px; display: flex; align-items: center; gap: 6px; }
.media-card-actions button { padding: 6px 8px; cursor: pointer; color: color-mix(in oklch, var(--accent) 42%, white); border: 1px solid color-mix(in oklch, var(--accent) 50%, black); border-radius: 5px; background: color-mix(in oklch, var(--accent) 18%, var(--background)); font-size: 10px; }
.media-card-actions button:hover { color: white; background: color-mix(in oklch, var(--accent) 28%, var(--background)); }
.media-card-actions button:disabled { cursor: wait; opacity: .55; }
.media-card-actions .media-remove-button { margin-left: auto; color: #8b908b; border-color: #323532; background: transparent; }
.media-card-actions .media-remove-button:hover { color: #efb1b1; border-color: #6a3838; background: #351d1d; }
.media-card-actions .media-remove-button.is-confirming { color: #fff; border-color: #9a4545; background: #7a2f2f; }

.context-section { min-width: 0; min-height: 0; flex: 1; padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--background); }
.context-toolbar, .context-browser { width: 100%; }
.context-item-mark, .context-detail-mark { display: grid; flex: 0 0 auto; place-items: center; color: color-mix(in oklch, var(--accent) 48%, white); border: 1px solid color-mix(in oklch, var(--accent) 56%, black); background: color-mix(in oklch, var(--accent) 22%, var(--background)); font-weight: 700; }
.context-toolbar { min-height: 44px; padding: 5px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); }
.context-tabs { display: flex; align-items: center; gap: 3px; }
.context-tabs button { height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 7px; cursor: pointer; color: #7e827e; border: 0; border-radius: 6px; background: transparent; font-size: 11px; }
.context-tabs button:hover { color: #d8dbd8; background: #191b19; }
.context-tabs button.active { color: #fff; background: #202320; box-shadow: inset 0 0 0 1px #2b2f2b; }
.context-tabs button span { min-width: 18px; height: 17px; padding: 0 5px; display: grid; place-items: center; color: #7f847f; border-radius: 9px; background: #0d0f0d; font-size: 9px; }
.context-filters { display: flex; align-items: center; gap: 5px; }
.context-filters label { display: block; }
.context-memory-actions, .context-chat-actions, .context-import-actions, .context-connection-actions { display: flex; align-items: center; gap: 5px; }
.context-filters input, .context-filters select, #context-refresh, .context-memory-actions button, .context-chat-actions button, .context-import-actions button, .context-connection-actions button { height: 32px; padding: 0 9px; color: #cdd0cd; border: 1px solid #292d29; border-radius: 6px; outline: none; background: #151715; font-size: 10px; }
.context-filters input { width: min(230px, 20vw); }
.context-filters select { width: 132px; }
.context-filters input:focus, .context-filters select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 20%, transparent); }
.context-filters select:disabled { opacity: .4; }
#context-refresh, .context-memory-actions button, .context-chat-actions button, .context-import-actions button, .context-connection-actions button { cursor: pointer; color: color-mix(in oklch, var(--accent) 42%, white); border-color: color-mix(in oklch, var(--accent) 50%, black); background: color-mix(in oklch, var(--accent) 18%, var(--background)); }
.context-memory-actions button, .context-chat-actions button, .context-import-actions button, .context-connection-actions button { white-space: nowrap; }
#context-refresh:hover, .context-memory-actions button:hover, .context-chat-actions button:hover, .context-import-actions button:hover, .context-connection-actions button:hover { color: white; background: color-mix(in oklch, var(--accent) 28%, var(--background)); }
#context-refresh:disabled, .context-memory-actions button:disabled, .context-chat-actions button:disabled, .context-import-actions button:disabled, .context-connection-actions button:disabled { cursor: wait; opacity: .45; }
.context-memory-actions button[aria-pressed="true"] { color: white; border-color: color-mix(in oklch, var(--accent) 72%, black); background: color-mix(in oklch, var(--accent) 34%, var(--background)); }
.context-browser { position: relative; min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); overflow: hidden; background: var(--background); }
.context-drop-overlay { position: absolute; z-index: 20; inset: 8px; display: grid; place-content: center; gap: 6px; text-align: center; color: color-mix(in oklch, var(--accent) 44%, white); border: 1px dashed color-mix(in oklch, var(--accent) 74%, black); border-radius: 9px; background: color-mix(in oklch, var(--accent) 13%, #090a09e8); backdrop-filter: blur(4px); pointer-events: none; }
.context-drop-overlay strong { font-size: 13px; }
.context-drop-overlay span { color: #929792; font-size: 10px; }
.context-list { min-width: 0; overflow-y: auto; border-right: 1px solid var(--border); background: var(--background); }
.context-list-item { width: 100%; padding: 12px; display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; color: inherit; border: 0; border-bottom: 1px solid #202320; background: transparent; text-align: left; }
.context-list-item:hover { background: #141514; }
.context-list-item.active { background: color-mix(in oklch, var(--accent) 14%, var(--panel)); box-shadow: inset 2px 0 var(--accent); }
.context-item-mark { width: 31px; height: 31px; border-radius: 8px; font-size: 10px; }
.context-item-copy { min-width: 0; display: block; }
.context-item-copy > span { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.context-item-copy strong { overflow: hidden; color: #dedfde; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.context-item-copy time { flex: 0 0 auto; color: #5f635f; font-size: 8px; }
.context-item-copy small { margin-top: 4px; display: block; overflow: hidden; color: #6e726e; font-size: 8px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.context-item-copy p { margin-top: 7px; display: -webkit-box; overflow: hidden; color: #888c88; font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.context-detail { min-width: 0; overflow-y: auto; padding: 22px 24px 36px; background: var(--panel); }
.context-detail.source-detail { overflow: hidden; padding: 0; }
.context-detail-header { padding-bottom: 18px; display: flex; align-items: start; gap: 12px; border-bottom: 1px solid #252825; }
.context-detail-mark { width: 38px; height: 38px; border-radius: 10px; font-size: 12px; }
.context-detail-header > div { min-width: 0; }
.context-detail-header .label { font-size: 8px; }
.context-detail-header h3 { margin-top: 4px; color: #f0f2f0; font-size: 19px; line-height: 1.25; }
.context-detail-header div > span { margin-top: 6px; display: block; color: #747874; font-size: 9px; }
.context-detail-meta { padding: 12px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid #222522; }
.context-detail-meta > span { display: grid; gap: 4px; color: #676b67; font-size: 8px; text-transform: uppercase; }
.context-detail-meta strong { overflow: hidden; color: #b9bdb9; font-size: 10px; font-weight: 550; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.context-prose { padding: 20px 0; color: #c8cbc8; font-size: 12px; line-height: 1.65; }
.context-prose p, .context-prose h1, .context-prose h2, .context-prose h3, .context-prose blockquote, .context-prose ul, .context-prose ol { margin: 0 0 11px; }
.context-prose h1, .context-prose h2, .context-prose h3 { color: #f0f2f0; line-height: 1.3; }
.context-prose h1 { font-size: 19px; }
.context-prose h2 { font-size: 16px; }
.context-prose h3 { font-size: 13px; }
.context-prose ul, .context-prose ol { padding-left: 21px; }
.context-prose blockquote { padding-left: 11px; color: #a3aaa3; border-left: 2px solid #3d423d; }
.context-revisions { margin-top: 6px; border-top: 1px solid #252825; }
.context-revisions h4 { margin: 0; padding: 13px 0 8px; color: #8b8f8b; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.context-revisions h4 span { color: #555955; }
.context-revisions > div { padding: 7px 0; display: flex; justify-content: space-between; color: #747874; border-top: 1px solid #1e211e; font-size: 9px; }
.context-revisions strong { color: #a8aca8; font-weight: 500; }
.memory-detail-actions { margin-top: 16px; display: flex; gap: 7px; }
.memory-detail-actions button { padding: 8px 10px; cursor: pointer; color: #cbd0cb; border: 1px solid #303430; border-radius: 6px; background: #171917; font-size: 10px; }
.memory-detail-actions button:hover { color: white; border-color: color-mix(in oklch, var(--accent) 48%, #303430); }
.memory-detail-actions .memory-archive.confirm { color: #ffb1b1; border-color: #743d3d; background: #2a1717; }
.context-detail-loading { padding: 36px 0; color: #6f736f; font-size: 10px; }
.context-empty { min-height: 150px; padding: 20px; display: grid; place-content: center; gap: 5px; text-align: center; color: #686c68; }
.context-empty strong { color: #999d99; font-size: 11px; }
.context-empty span { font-size: 9px; }
.context-empty-detail { height: 100%; }
.context-thread-id { margin: 12px 0 0; color: #6f736f; font-size: 9px; }
.context-thread-id code { color: color-mix(in oklch, var(--accent) 32%, white); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.connection-detail { max-width: 720px; padding-top: 18px; }
.connection-endpoint { margin-top: 14px; display: grid; gap: 7px; }
.connection-endpoint span { color: #737873; font-size: 9px; text-transform: uppercase; }
.connection-endpoint code { padding: 11px 12px; overflow-x: auto; color: color-mix(in oklch, var(--accent) 32%, white); border: 1px solid #292d29; border-radius: 7px; background: #0d0f0d; font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.connection-detail-actions { margin-top: 16px; display: flex; gap: 7px; }
.connection-detail-actions button { padding: 8px 10px; cursor: pointer; color: #cbd0cb; border: 1px solid #303430; border-radius: 6px; background: #171917; font-size: 10px; }
.connection-detail-actions button:hover { color: white; border-color: color-mix(in oklch, var(--accent) 48%, #303430); }
.connection-detail-actions .connection-revoke.confirm { color: #ffb1b1; border-color: #743d3d; background: #2a1717; }
.conversation-transcript { padding-top: 16px; display: grid; gap: 10px; }
.conversation-message { max-width: 86%; padding: 11px 12px; border: 1px solid #292d29; border-radius: 9px; background: #151715; }
.conversation-message[data-role="user"] { margin-left: auto; border-color: color-mix(in oklch, var(--accent) 42%, var(--border)); background: color-mix(in oklch, var(--accent) 12%, var(--panel)); }
.conversation-message[data-role="assistant"] { margin-right: auto; }
.conversation-message[data-role="system"], .conversation-message[data-role="tool"] { max-width: 100%; border-style: dashed; background: #101210; }
.conversation-message header { margin-bottom: 7px; display: flex; justify-content: space-between; gap: 14px; }
.conversation-message header strong { color: #9ea39e; font-size: 8px; text-transform: uppercase; }
.conversation-message header span { color: #626662; font-size: 8px; }
.conversation-message > div { color: #c8cbc8; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.conversation-message > small { margin-top: 8px; display: block; color: color-mix(in oklch, var(--accent) 24%, var(--muted-foreground)); font-size: 8px; }
.source-file-browser { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); overflow: hidden; }
.source-file-list { min-height: 0; overflow-y: auto; border-right: 1px solid var(--border); background: var(--background); }
.source-file-list button { width: 100%; padding: 9px 10px; display: block; cursor: pointer; color: inherit; border: 0; border-bottom: 1px solid #1e211e; background: transparent; text-align: left; }
.source-file-list button:hover { background: #141514; }
.source-file-list button.active { background: color-mix(in oklch, var(--accent) 14%, var(--panel)); box-shadow: inset 2px 0 var(--accent); }
.source-file-list span, .source-file-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-file-list span { color: #bdc1bd; font-size: 9px; }
.source-file-list small { margin-top: 4px; color: #5f635f; font-size: 7px; }
.source-file-preview { min-width: 0; min-height: 0; overflow: auto; padding: 14px 17px; background: var(--panel); }
.source-file-preview > header { padding-bottom: 11px; display: flex; align-items: start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #252825; }
.source-file-preview > header strong, .source-file-preview > header span { display: block; }
.source-file-preview > header strong { color: #dfe2df; font-size: 10px; }
.source-file-preview > header span { margin-top: 4px; color: #666a66; font-size: 8px; }
.source-file-preview > header small { color: #666a66; font-size: 8px; }
.source-file-preview pre { margin: 14px 0 0; color: #bfc6bf; font: 9px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.source-prose { padding-bottom: 0; font-size: 10px; }

.kanban-board { min-width: 1460px; display: grid; grid-template-columns: repeat(6, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.kanban-column { min-height: 330px; padding: 11px; display: flex; flex-direction: column; border: 1px solid #202320; border-radius: 11px; background: #0e100e; transition: border-color .15s ease, background .15s ease; }
.kanban-column.is-drag-over { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 10%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 22%, transparent); }
.kanban-column-header { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kanban-column-header > div { display: flex; align-items: center; gap: 9px; }
.kanban-column-header h2 { font-size: 12px; font-weight: 650; letter-spacing: .01em; }
.kanban-stage-dot { flex: 0 0 7px; margin-top: 0; }
.kanban-column-count { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; color: #7d817d; border-radius: 10px; background: #1a1c1a; font-size: 10px; }
.kanban-card-list { display: grid; flex: 1; align-content: start; gap: 8px; }
.kanban-card { position: relative; padding: 12px; border: 1px solid #292c29; border-radius: 9px; background: linear-gradient(145deg, #181a18, #141614); box-shadow: 0 6px 18px #0002; transition: border-color .15s ease, opacity .15s ease, transform .15s ease; }
.kanban-card:hover { border-color: #3a3e3a; transform: translateY(-1px); box-shadow: 0 10px 24px #0004; }
.kanban-card.is-dragging { opacity: .35; transform: rotate(1deg) scale(.98); }
.kanban-card-remove { position: absolute; z-index: 1; top: 8px; right: 8px; padding: 3px 5px; opacity: 0; cursor: pointer; color: #6f736f; border: 0; border-radius: 4px; background: transparent; font-size: 9px; transition: opacity .15s ease, color .15s ease, background .15s ease; }
.kanban-card:hover .kanban-card-remove, .kanban-card:focus-within .kanban-card-remove, .kanban-card-remove.confirm { opacity: 1; }
.kanban-card-remove:hover, .kanban-card-remove.confirm { color: #ffb1b1; background: #3a2020; }
.kanban-card-open { width: 100%; padding: 0 0 2px; display: block; cursor: pointer; color: inherit; border: 0; background: transparent; text-align: left; }
.kanban-card-open strong, .kanban-card-open span { display: block; }
.kanban-card-open strong { color: #e7e9e7; font-size: 12px; font-weight: 600; line-height: 1.4; }
.kanban-card-open span { margin-top: 7px; display: -webkit-box; overflow: hidden; color: #777b77; font-size: 10px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }
.kanban-empty { min-height: 72px; display: grid; place-items: center; color: #4e524e; border: 1px dashed #292c29; border-radius: 8px; font-size: 10px; }
.kanban-add-form { margin-top: 10px; border-bottom: 1px solid #292c29; }
.kanban-add-input { height: 34px; padding: 0 2px; color: #e4e7e4; border: 0; border-radius: 0; outline: none; background: transparent; box-shadow: none; font-size: 11px; }
.kanban-add-input::placeholder { color: #737773; opacity: .72; }
.kanban-add-input:hover::placeholder { color: #969a96; }
.kanban-add-input:focus { border: 0; box-shadow: none; }
.kanban-add-form:focus-within { border-bottom-color: #4d5150; }
.kanban-add-form[aria-busy="true"] { opacity: .55; }
.kanban-add-form[aria-busy="true"] .kanban-add-input { cursor: wait; }

.app-toast { position: fixed; z-index: 2000; right: 18px; bottom: 18px; max-width: min(420px, calc(100vw - 36px)); padding: 10px 13px; color: #dcefe1; border: 1px solid #2f5c3a; border-radius: 8px; background: #142319ee; box-shadow: 0 12px 36px #0009; font-size: 11px; backdrop-filter: blur(12px); }
.app-toast.is-error { color: #ffd0d0; border-color: #743d3d; background: #2a1717ee; }

.project-section { min-width: 0; min-height: 0; flex: 1; overflow-y: auto; padding: 24px 28px 48px; }
.project-section > * { max-width: 1120px; margin-right: auto; margin-left: auto; }
.workspace-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 20px; }
.workspace-title .label { margin-bottom: 6px; }
#heading { max-width: 28ch; color: #f4f4f3; font-size: clamp(25px, 3vw, 34px); font-weight: 650; line-height: 1.12; letter-spacing: -.035em; }
#heading[contenteditable] { cursor: text; outline: none; }
#editor { display: grid; gap: 22px; padding: 24px 0; }
label, .field-group { display: grid; gap: 8px; color: #8c908c; font-size: 12px; }
.field-label { color: #8c908c; }
input, textarea, select { width: 100%; padding: 10px 11px; color: #eceeec; border: 1px solid #2c2f2c; border-radius: 7px; outline: none; background: #131513; font: inherit; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent); }
textarea { resize: vertical; line-height: 1.5; }
.inline-field { width: 100%; min-height: 26px; padding: 1px 0; cursor: text; color: #dedfde; border: 0; outline: none; background: transparent; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.inline-field:focus { color: white; }
.inline-field[data-field="promise"] { max-width: 68ch; font-size: 15px; line-height: 1.55; }
.inline-field:empty::before { content: attr(data-placeholder); color: #606460; pointer-events: none; }
#heading:empty::before { content: attr(data-placeholder); color: #565a56; pointer-events: none; }
.rich-editor { overflow: visible; border: 1px solid #2c2f2c; border-radius: 8px; background: #101210; transition: border-color .15s ease, box-shadow .15s ease; }
.rich-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent); }
.rich-editor-toolbar { position: sticky; z-index: 10; top: -24px; min-height: 39px; padding: 5px 7px; display: flex; align-items: center; gap: 3px; border-bottom: 1px solid #292c29; border-radius: 7px 7px 0 0; background: #151715f5; box-shadow: 0 5px 14px #0003; backdrop-filter: blur(10px); }
.rich-editor-toolbar button { min-width: 28px; height: 28px; padding: 0 7px; cursor: pointer; color: #9b9f9b; border: 0; border-radius: 5px; background: transparent; font-size: 11px; }
.rich-editor-toolbar button:hover, .rich-editor-toolbar button.is-active { color: #f4f4f3; background: #282b28; }
.rich-editor-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rich-editor-divider { width: 1px; height: 18px; margin: 0 4px; background: #303330; }
.rich-editor-save-status { margin-left: auto; padding: 0 5px; color: #6f736f; font-size: 10px; }
.rich-editor-save-status[data-save-state="saving"] { color: #9eaa9e; }
.rich-editor-save-status[data-save-state="dirty"] { color: #d1a36e; }
.rich-editor-save-status[data-save-state="error"] { color: #ff9b9b; }
.notes-field { min-height: 280px; height: auto; max-height: none; padding: 14px 16px 24px; overflow: visible; }
.notes-field p, .notes-field h1, .notes-field h2, .notes-field h3, .notes-field blockquote, .notes-field ul, .notes-field ol { margin: 0 0 10px; }
.notes-field h1, .notes-field h2, .notes-field h3 { color: #f4f4f3; line-height: 1.35; }
.notes-field h1 { font-size: 22px; }
.notes-field h2 { font-size: 18px; }
.notes-field h3 { font-size: 15px; }
.notes-field blockquote { padding-left: 13px; color: #aeb2ae; border-left: 3px solid #424642; }
.notes-field ul, .notes-field ol { padding-left: 24px; }
.notes-field li { margin: 3px 0; }
.notes-field > :last-child { margin-bottom: 0; }
.row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; padding: 20px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.sign-in-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; color: #f2f3f2; border: 1px solid #343734; border-radius: 12px; background: #171917; box-shadow: 0 24px 80px #000d; }
.sign-in-dialog::backdrop { background: #050605d9; backdrop-filter: blur(5px); }
.sign-in-dialog form { padding: 26px; display: grid; gap: 16px; }
.sign-in-dialog h2 { margin: -8px 0 0; font-size: 22px; }
.sign-in-dialog p { margin: 0; color: #929692; font-size: 13px; line-height: 1.55; }
.sign-in-dialog label { display: grid; gap: 7px; color: #b7bab7; font-size: 12px; }
.sign-in-dialog input { padding: 11px 12px; color: white; border: 1px solid #3b3e3b; border-radius: 7px; outline: none; background: #0f100f; font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; }
.sign-in-dialog input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.sign-in-dialog button { padding: 10px 14px; cursor: pointer; color: white; border: 0; border-radius: 7px; background: color-mix(in oklch, var(--accent) 72%, black); font-weight: 600; }
.sign-in-dialog .sign-in-error { min-height: 18px; color: #ee9a9a; font-size: 12px; }
.memory-dialog { width: min(620px, calc(100vw - 32px)); }
.memory-dialog-heading { display: grid; gap: 10px; }
.memory-dialog-row { display: grid; grid-template-columns: 1fr 1.2fr .8fr; gap: 10px; }
.memory-dialog select, .memory-dialog textarea { width: 100%; padding: 10px 11px; color: white; border: 1px solid #3b3e3b; border-radius: 7px; outline: none; background: #0f100f; font: 12px inherit; resize: vertical; }
.memory-dialog select:focus, .memory-dialog textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.memory-dialog label { position: relative; }
.memory-dialog label > span { position: absolute; right: 11px; bottom: 11px; color: #777b77; font-size: 11px; }
.memory-dialog input[type="number"] { padding-right: 28px; font-family: inherit; }
.memory-dialog :disabled { opacity: .55; }
.chat-import-dialog { width: min(660px, calc(100vw - 32px)); }
.chat-import-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chat-import-dialog select { width: 100%; padding: 10px 11px; color: white; border: 1px solid #3b3e3b; border-radius: 7px; outline: none; background: #0f100f; font: 12px inherit; }
.chat-import-dialog select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); }
.chat-import-preview { max-height: 250px; overflow-y: auto; display: grid; gap: 7px; }
.chat-import-preview article { padding: 10px 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; border: 1px solid #2b2e2b; border-radius: 7px; background: #101210; }
.chat-import-preview strong { overflow: hidden; color: #d8dbd8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-import-preview span { color: #717571; font-size: 9px; }
.chat-import-preview p { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; color: #969a96; font-size: 10px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.connection-dialog { width: min(620px, calc(100vw - 32px)); }
.connection-dialog #connection-create-step, .connection-dialog #connection-secret-step { display: grid; gap: 14px; }
.connection-dialog textarea { resize: none; color: #dfe8ff; background: #0f100f; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.connection-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.connection-dialog-actions button:first-child { color: #b6bab6; border: 1px solid #343734; background: transparent; }
.connection-dialog .connection-secret-warning { padding: 9px 10px; color: #aab6d8; border: 1px solid color-mix(in oklch, var(--accent) 34%, #292d29); border-radius: 7px; background: color-mix(in oklch, var(--accent) 10%, var(--panel)); font-size: 10px; }

.canvas-section { min-width: 0; min-height: 0; flex: 1; padding: 0; background: #111211; }
#tldraw-root { position: relative; width: 100%; height: calc(100vh - 48px); overflow: hidden; background: #121312; }
.creator-tldraw { position: absolute; inset: 0; --tl-color-background: #121312; --tl-color-selection-stroke: var(--accent); --tl-color-selection-fill: color-mix(in oklch, var(--accent) 12%, transparent); }
.creator-tldraw .tl-background { background: #121312; }
.canvas-loading { padding: 20px; color: #777b77; font-size: 12px; }

.creator-studio-canvas-tools { position: absolute; z-index: 20; top: 56px; left: 12px; width: 40px; padding: 4px; display: flex; pointer-events: auto; flex-direction: column; gap: 2px; border-radius: 20px; background: #090a09f2; box-shadow: 0 0 0 1px #2a2c2aaa, 0 8px 24px #0005; backdrop-filter: blur(10px); }
.creator-studio-canvas-tool { display: grid; width: 32px; height: 32px; padding: 0; cursor: pointer; place-items: center; color: #858985; border: 0; border-radius: 7px; background: transparent; }
.creator-studio-canvas-tool:first-child { border-radius: 16px 16px 7px 7px; }
.creator-studio-canvas-tool:last-child { border-radius: 7px 7px 16px 16px; }
.creator-studio-canvas-tool:hover, .creator-studio-canvas-tool[data-active="true"] { color: #f4f4f3; background: #202220; box-shadow: inset 0 0 0 1px #303330; }
.creator-studio-canvas-tool.canvas-tool-accent { color: #ff9a52; }
.creator-studio-canvas-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.canvas-tool-separator { height: 1px; margin: 3px 5px; background: #282a28; }
.canvas-media-picker { position: absolute; z-index: 60; top: 92px; left: 61px; width: min(300px, calc(100vw - 82px)); max-height: min(430px, calc(100vh - 116px)); padding: 6px; display: flex; pointer-events: auto; flex-direction: column; gap: 6px; color: #eff1ef; border: 1px dashed #303330; border-radius: 9px; outline: none; background: #111311f7; box-shadow: 0 18px 52px #000c; backdrop-filter: blur(14px); transition: border-color 120ms ease, background 120ms ease; }
.canvas-media-picker.is-drag-over { border-color: color-mix(in oklch, var(--accent) 76%, black); background: color-mix(in oklch, var(--accent) 15%, #111311); }
.canvas-media-library { min-height: 68px; max-height: 278px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.canvas-media-library > p { grid-column: 1 / -1; padding: 22px 8px; text-align: center; color: #767a76; font-size: 10px; }
.canvas-media-item { min-width: 0; padding: 0; overflow: hidden; cursor: pointer; color: #bfc3bf; border: 1px solid #292c29; border-radius: 6px; background: #0b0d0b; }
.canvas-media-item:hover { color: white; border-color: color-mix(in oklch, var(--accent) 62%, black); background: color-mix(in oklch, var(--accent) 10%, #0b0d0b); }
.canvas-media-item:disabled { cursor: wait; opacity: .5; }
.canvas-media-item img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: #080908; }
.canvas-media-item span { padding: 5px 5px 6px; display: block; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.canvas-media-message { margin: -1px 2px 0; overflow: hidden; color: #7f947f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.creator-studio-canvas-minimap { position: absolute; right: 12px; bottom: 12px; width: 152px; overflow: hidden; border-radius: 10px; background: #090a09e8; box-shadow: 0 0 0 1px #2c2e2ccc; backdrop-filter: blur(10px); }
.creator-studio-canvas-minimap .tlui-minimap { height: 92px; min-height: 92px; padding: 6px; }
.canvas-image-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.canvas-image-label { position: absolute; max-width: 260px; padding: 4px 8px; overflow: hidden; pointer-events: auto; color: #d8dad8; border: 1px solid #343734; border-radius: 5px; background: #111311e8; box-shadow: 0 3px 12px #0007; font-family: inherit; font-size: 11px; font-weight: 400; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); }
button.canvas-image-label { cursor: text; }
.canvas-image-name-input { width: min(260px, 40vw); outline: 2px solid var(--accent); outline-offset: 1px; }
.mindmap-branch-controls { position: absolute; inset: 0; pointer-events: none; }
.mindmap-branch-button { position: absolute; display: grid; width: 22px; height: 22px; padding: 0; pointer-events: auto; color: #f6f8f6; border: 1px solid #4a4e4a; border-radius: 50%; background: #242724; box-shadow: 0 2px 9px #0008; place-items: center; transform: translate(-50%, -50%); transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; }
.mindmap-branch-button:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 72%, black); transform: translate(-50%, -50%) scale(1.08); }
.mindmap-branch-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.creator-mindmap-backdrop { position: absolute; z-index: 100; inset: 0; display: grid; padding: 20px; place-items: center; background: #0008; backdrop-filter: blur(3px); }
.creator-mindmap-dialog { width: min(500px, calc(100vw - 48px)); padding: 0; overflow: hidden; color: #f2f3f2; border: 1px solid #343734; border-radius: 11px; background: #171917; box-shadow: 0 24px 70px #000b; }
.creator-mindmap-dialog-header { padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #292c29; }
.creator-mindmap-dialog-header span { color: #757975; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.creator-mindmap-dialog-header h3 { margin-top: 3px; font-size: 16px; font-weight: 600; }
.creator-mindmap-dialog-header button { display: grid; width: 30px; height: 30px; cursor: pointer; place-items: center; color: #8e928e; border: 0; border-radius: 6px; background: transparent; }
.creator-mindmap-dialog-header button:hover { color: white; background: #242624; }
.creator-mindmap-field { margin: 15px 16px 0; display: grid; gap: 7px; color: #929692; font-size: 12px; }
.creator-mindmap-field textarea { min-height: 150px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.creator-mindmap-help { min-height: 16px; margin: 10px 16px; color: #777b77; font-size: 11px; }
.creator-mindmap-help.is-error { color: #ee9a9a; }
.creator-mindmap-dialog-footer { padding: 12px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #292c29; }
.creator-mindmap-dialog-footer button { padding: 8px 11px; cursor: pointer; border-radius: 6px; font-weight: 600; }
.creator-mindmap-dialog-footer button:disabled { cursor: default; opacity: .45; }
.canvas-dialog-secondary { color: #a3a7a3; border: 0; background: transparent; }
.canvas-dialog-primary { color: white; border: 0; background: color-mix(in oklch, var(--accent) 72%, black); }

.receipts { position: relative; }
.receipts summary { height: 32px; padding: 0 9px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: #858985; border: 1px solid #242624; border-radius: 7px; background: #111211; font-size: 11px; }
.receipts summary::-webkit-details-marker { display: none; }
.receipts summary::after { content: "+"; color: #666a66; font-size: 14px; }
.receipts[open] summary { color: white; background: #181a18; }
.receipts[open] summary::after { content: "−"; }
#receipt-count { color: #737773; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
#receipts { position: absolute; z-index: 1000; top: calc(100% + 8px); right: 0; width: min(580px, calc(100vw - 300px)); max-height: 360px; overflow: auto; padding: 8px; display: grid; gap: 2px; border: 1px solid #2d302d; border-radius: 9px; background: #111311; box-shadow: 0 18px 50px #000c; }
#receipts article { padding: 10px; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; border-radius: 6px; font-size: 11px; }
#receipts article:hover { background: #191b19; }
#receipts span, #receipts small { color: #747874; }

@media (max-width: 1120px) and (min-width: 761px) {
  .context-toolbar { align-items: stretch; flex-direction: column; }
  .context-filters { justify-content: flex-end; }
}

@media (max-width: 760px) {
  body { overflow: auto; }
  main { display: block; height: auto; }
  .project-sidebar { min-height: auto; padding-bottom: 20px; }
  .workspace { height: auto; min-height: 100vh; }
  .surface-nav { position: sticky; z-index: 50; top: 0; max-width: 100vw; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; }
  .rich-editor-toolbar { top: 48px; }
  .project-section { overflow: visible; padding: 22px 18px 40px; }
  .projects-section { min-height: calc(100vh - 48px); padding: 22px 16px 34px; }
  .media-section { min-height: calc(100vh - 48px); padding: 22px 16px 34px; }
  .context-section { min-height: calc(100vh - 48px); padding: 0; overflow: visible; }
  .media-header { align-items: flex-start; flex-direction: column; }
  .context-toolbar { align-items: stretch; flex-direction: column; }
  .context-tabs { overflow-x: auto; }
  .context-filters { display: grid; grid-template-columns: 1fr 1fr auto; }
  .context-memory-actions, .context-chat-actions, .context-import-actions, .context-connection-actions { grid-column: 1 / -1; }
  .memory-dialog-row { grid-template-columns: 1fr; }
  .chat-import-fields { grid-template-columns: 1fr; }
  .context-filters input, .context-filters select { width: 100%; }
  .context-browser { display: block; overflow: visible; }
  .context-drop-overlay { position: fixed; inset: 12px; }
  .context-list { max-height: 360px; border-right: 0; border-bottom: 1px solid #252825; }
  .context-detail { min-height: 520px; overflow: visible; padding: 18px 16px 28px; }
  .source-file-browser { height: auto; display: block; }
  .source-file-list { max-height: 230px; border-right: 0; border-bottom: 1px solid #252825; }
  .source-file-preview { max-height: none; }
  .media-toolbar { grid-template-columns: 1fr; }
  .kanban-board { min-width: 0; grid-template-columns: 1fr; }
  .kanban-column { min-height: 150px; }
  .workspace-title { align-items: flex-start; flex-direction: column; }
  .row { grid-template-columns: 1fr; }
  #tldraw-root { height: 680px; }
  .canvas-section { min-height: 724px; }
  #receipts { position: fixed; top: 54px; right: 12px; left: 12px; width: auto; }
  .creator-studio-canvas-minimap { width: 120px; }
  .creator-studio-canvas-minimap .tlui-minimap { height: 76px; min-height: 76px; }
}