html, body {
    background: #f4f5f7;
    color: #232631;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.workspace-shell { margin: 0 auto; max-width: 1440px; padding: 42px 48px 72px; }
.workspace-header { align-items: flex-end; display: flex; gap: 32px; justify-content: space-between; margin-bottom: 34px; }
.eyebrow, .section-kicker, .context-label { color: #707887; font-size: .7rem; font-weight: 800; letter-spacing: .13em; margin: 0 0 8px; text-transform: uppercase; }
.workspace-header h1 { font-size: clamp(2.15rem, 4vw, 4.2rem); letter-spacing: -.06em; line-height: .98; margin: 0; max-width: 720px; }
.header-copy { color: #707887; font-size: 1rem; line-height: 1.6; margin: 18px 0 0; max-width: 610px; }

.mode-switch { background: #e7e9ee; border-radius: 12px; display: flex; flex: 0 0 auto; padding: 4px; }
.mode-button, .list-tab, .quiet-button, .text-button, .primary-button, .check-button { border: 0; }
.mode-button { background: transparent; border-radius: 9px; color: #707887; font-size: .86rem; font-weight: 700; padding: 10px 15px; }
.mode-button.selected { background: #fff; box-shadow: 0 2px 8px #1e263214; color: #232631; }

.list-tabs { align-items: center; border-bottom: 1px solid #dfe2e8; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 0; }
.list-tab { align-items: center; background: transparent; border-bottom: 3px solid transparent; color: #737a88; display: flex; gap: 9px; margin-bottom: -1px; padding: 14px 15px 12px; white-space: nowrap; }
.list-tab:hover, .list-tab.selected { color: #232631; }
.list-tab.selected { border-bottom-color: #e17f55; }
.tab-count { background: #e7e9ee; border-radius: 20px; font-size: .68rem; padding: 2px 7px; }
.new-list { display: flex; margin-left: auto; padding: 6px 0; }
.new-list input { background: transparent; border: 0; color: #232631; outline: none; padding: 8px 10px; width: 110px; }
.new-list button { background: #232631; border: 0; border-radius: 50%; color: white; font-size: 1.2rem; height: 30px; line-height: 1; width: 30px; }

.workspace-main { padding-top: 25px; }
.context-strip { align-items: center; background: #fff; border: 1px solid #e3e5ea; border-radius: 14px; display: flex; justify-content: space-between; margin-bottom: 22px; padding: 15px 20px; }
.context-strip strong { display: block; font-size: 1.1rem; }
.context-strip .context-label { margin-bottom: 4px; }
.context-actions { align-items: center; display: flex; gap: 12px; }
.context-actions select { background: #f7f8fa; border: 1px solid #dfe2e8; border-radius: 8px; color: #353a46; padding: 8px 12px; }
.context-note, .small-note { color: #858b98; font-size: .78rem; }

.workspace-grid { align-items: start; display: grid; gap: 26px; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.composer-card, .task-panel { background: #fff; border: 1px solid #e3e5ea; border-radius: 18px; box-shadow: 0 12px 38px #26324d08; }
.composer-card { padding: 24px; position: sticky; top: 25px; }
.composer-card h2, .task-panel h2 { font-size: 1.25rem; letter-spacing: -.03em; margin: 0 0 22px; }
.composer-card label { color: #5d6471; display: block; font-size: .78rem; font-weight: 700; margin-bottom: 14px; }
.composer-card input, .composer-card textarea, .edit-title, .edit-notes, .edit-row input { background: #f7f8fa; border: 1px solid #e1e4ea; border-radius: 8px; box-sizing: border-box; color: #232631; display: block; margin-top: 6px; outline: none; padding: 10px 11px; width: 100%; }
.composer-card input:focus, .composer-card textarea:focus, .edit-title:focus, .edit-notes:focus, .edit-row input:focus { border-color: #d98763; box-shadow: 0 0 0 3px #d987631a; }
.form-row, .edit-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.composer-card details { border-top: 1px solid #eceef2; margin: 19px 0; padding-top: 14px; }
.composer-card summary { color: #5d6471; cursor: pointer; font-size: .8rem; font-weight: 800; margin-bottom: 15px; }
.primary-button { background: #232631; border-radius: 9px; color: #fff; font-size: .82rem; font-weight: 800; padding: 12px 16px; width: 100%; }
.primary-button:hover { background: #3a4050; }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.primary-button.small { padding: 8px 12px; width: auto; }
.small-note { line-height: 1.45; margin: 16px 0 0; }

.task-panel { min-width: 0; padding: 24px 26px 28px; }
.task-panel-header { align-items: start; display: flex; justify-content: space-between; }
.task-panel-header h2 { margin-bottom: 18px; }
.quiet-button { background: #f1f2f5; border-radius: 8px; color: #59616f; font-size: .78rem; font-weight: 700; padding: 9px 12px; }
.quiet-button:hover { background: #e6e8ed; }
.task-list { display: grid; gap: 10px; }
.task-card { align-items: start; border: 1px solid #e4e6eb; border-radius: 13px; display: grid; gap: 13px; grid-template-columns: 27px 22px minmax(0, 1fr) 22px; padding: 16px 15px; transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.task-card[draggable="true"] { cursor: grab; }
.task-card[draggable="true"]:active { cursor: grabbing; }
.task-card:hover { border-color: #cfd3dc; box-shadow: 0 5px 18px #26324d0b; }
.task-card.highlighted { border-color: #e5a177; box-shadow: 0 0 0 3px #e5a17720; }
.task-card.dimmed { opacity: .48; }
.task-card.done { background: #fafbfc; }
.task-index { color: #a0a6b0; font-size: .74rem; font-variant-numeric: tabular-nums; padding-top: 4px; text-align: right; }
.check-button { background: #fff; border: 1px solid #cfd3db; border-radius: 50%; color: #fff; height: 21px; line-height: 1; margin-top: 1px; padding: 0; width: 21px; }
.check-button.checked { background: #5e9b79; border-color: #5e9b79; }
.task-card.done h3 { color: #8b919b; text-decoration: line-through; }
.task-title-row { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
.task-title-row h3 { font-size: 1rem; letter-spacing: -.015em; margin: 0; overflow-wrap: anywhere; }
.task-list-name { color: #a0a6b0; font-size: .7rem; white-space: nowrap; }
.task-notes { color: #69717e; font-size: .84rem; line-height: 1.5; margin: 8px 0; white-space: pre-wrap; }
.task-meta, .task-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.task-meta { margin-top: 10px; }
.meta-pill { background: #f0f1f4; border-radius: 5px; color: #6f7682; font-size: .68rem; padding: 4px 7px; }
.meta-pill.due { background: #fff1e9; color: #b8643f; }
.meta-pill.project { background: #edf2fb; color: #55729c; }
.relevance-note, .annotation { border-left: 2px solid #e5a177; color: #727987; font-size: .76rem; line-height: 1.45; margin: 11px 0 0; padding-left: 9px; }
.relevance-note span { color: #b8643f; font-weight: 800; margin-right: 4px; }
.annotation { border-left-color: #9aafd1; }
.task-actions { margin-top: 12px; }
.text-button { background: transparent; color: #747c89; font-size: .72rem; padding: 2px 0; }
.text-button:hover { color: #232631; }
.text-button.danger:hover { color: #b55050; }
.drag-handle { color: #b1b6bf; cursor: grab; font-size: 1.1rem; letter-spacing: -4px; padding-top: 1px; text-align: center; }
.edit-title, .edit-notes { margin-top: 0; }
.edit-notes { margin-top: 8px; }
.edit-row { margin-top: 8px; }
.edit-row input { margin-top: 0; }

.empty-state { align-items: center; color: #858b98; display: flex; gap: 10px; justify-content: center; min-height: 250px; }
.empty-state.compact { min-height: 180px; }
.spinner { border: 2px solid #d9dce2; border-radius: 50%; border-top-color: #d98763; height: 15px; width: 15px; }
.error-banner { background: #fff0f0; border: 1px solid #f0c8c8; border-radius: 9px; color: #a04f4f; font-size: .82rem; margin-bottom: 18px; padding: 11px 14px; }

#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px #0003; box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b32121; color: white; padding: 1rem 1rem 1rem 3.7rem; }

@media (max-width: 900px) {
    .workspace-shell { padding: 30px 22px 55px; }
    .workspace-header { align-items: start; flex-direction: column; }
    .mode-switch { align-self: stretch; }
    .mode-button { flex: 1; }
    .workspace-grid { grid-template-columns: 1fr; }
    .composer-card { position: static; }
}

@media (max-width: 560px) {
    .workspace-shell { padding: 24px 14px 42px; }
    .workspace-header h1 { font-size: 2.4rem; }
    .context-strip { align-items: start; flex-direction: column; gap: 14px; }
    .context-actions { width: 100%; }
    .context-actions select { width: 100%; }
    .task-panel { padding: 18px 13px 22px; }
    .task-card { grid-template-columns: 22px 22px minmax(0, 1fr) 17px; padding: 13px 8px; }
    .task-title-row { align-items: start; flex-direction: column; gap: 4px; }
    .new-list { margin-left: 4px; }
}