:root {
  color-scheme: light;
  --paper: #f4f2ed;
  --surface: #fbfaf7;
  --ink: #20221e;
  --muted: #74776f;
  --line: #dcd9d1;
  --accent: #c71920;
  --accent-soft: #efe0dc;
  --focus: #2d5e99;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #11120f;
  --surface: #191a16;
  --ink: #eeece4;
  --muted: #a6a49a;
  --line: #303229;
  --accent: #e44343;
  --accent-soft: #332222;
  --focus: #8bb8e8;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .segmented-control input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
[hidden] { display: none !important; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 58px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-bottom: 40px; }
.brand { color: var(--ink); font-weight: 750; letter-spacing: -.03em; text-decoration: none; font-size: 1.08rem; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.brand-lockup img { width: 24px; height: 24px; object-fit: contain; opacity: .86; }
nav { display: flex; gap: 4px; align-items: center; }
.ambient-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.view-link, .quiet, .text-button, .icon-button, .drag-handle, .quick-action { border: 0; background: transparent; cursor: pointer; }
.view-link { text-decoration: none; }
.view-link { color: var(--muted); padding: 7px 10px; border-radius: 999px; font-size: .9rem; transition: color .22s ease, background .22s ease, opacity .22s ease; }
.view-link.active { color: var(--ink); background: color-mix(in srgb, var(--ink), transparent 92%); }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.intro.closed-mode { margin-bottom: 20px; }
.intro-actions { display: flex; align-items: center; gap: 10px; }
.completed-tools { display: grid; grid-template-columns: auto minmax(180px, 280px); align-items: center; gap: 10px 14px; margin: -6px 0 18px; color: var(--muted); }
.completed-tools[hidden] { display: none; }
.completed-periods { display: flex; flex-wrap: wrap; gap: 5px; }
.period-pill { border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink), transparent 94%); color: var(--muted); padding: 7px 10px; cursor: pointer; font-size: .82rem; transition: background .22s ease, color .22s ease; }
.period-pill.active { background: var(--ink); color: var(--surface); }
.completed-search { margin: 0; }
.completed-search input { margin: 0; border-radius: 999px; padding: 8px 12px; font-size: .84rem; }
.completed-results { grid-column: 1 / -1; margin: -1px 0 0; min-height: 1.2em; color: color-mix(in srgb, var(--muted), transparent 14%); font-size: .78rem; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 750; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 500 clamp(1.9rem, 4.4vw, 3.28rem)/.98 Georgia, serif; letter-spacing: -.055em; }
.primary, .secondary { border: 1px solid var(--ink); border-radius: 999px; padding: 9px 15px; cursor: pointer; font-weight: 700; }
a.primary, a.secondary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.primary { background: var(--ink); color: var(--surface); }
.secondary { background: transparent; color: var(--ink); }
.primary:hover { background: var(--accent); }
.workbench { display: block; }
.project-column { min-width: 0; }
.job-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.job-card { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; min-height: 62px; border-bottom: 1px solid var(--line); transition: transform .32s cubic-bezier(.2,.75,.2,1), box-shadow .32s ease, opacity .24s ease, background .24s ease, border-color .24s ease; will-change: transform; }
.job-card.first { min-height: 70px; background: color-mix(in srgb, var(--surface), transparent 20%); margin: 0 -8px; padding: 0 8px; border-radius: 10px; border-bottom-color: transparent; }
.job-card.selected { background: color-mix(in srgb, var(--ink), transparent 96%); border-radius: 12px; border-bottom-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink), transparent 92%); }
.job-card.selected::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink), transparent 24%); }
.job-card.dragging { opacity: .94; transform: translateY(-3px) scale(1.006); box-shadow: 0 18px 44px rgba(28, 30, 26, .13); background: var(--surface); z-index: 1; }
.position { color: color-mix(in srgb, var(--muted), transparent 32%); font-size: .64rem; letter-spacing: .13em; font-weight: 500; }
.job-copy { text-align: left; border: 0; background: transparent; cursor: pointer; padding: 8px 12px 8px 0; min-width: 0; }
.job-copy strong { display: block; font: 540 clamp(.96rem, 1.5vw, 1.18rem)/1.14 Georgia, serif; letter-spacing: -.02em; }
.job-card.first .job-copy strong { font-size: clamp(1.04rem, 1.8vw, 1.36rem); }
.job-copy > span:not(.job-meta) { display: block; color: var(--muted); margin-top: 2px; line-height: 1.22; font-size: .8rem; }
.completed-date { display: block; margin-top: 5px; color: color-mix(in srgb, var(--muted), transparent 18%); font: 600 .72rem/1.2 Inter, ui-sans-serif, sans-serif; letter-spacing: .02em; }
.card-checklist { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); font: 650 .72rem/1.2 Inter, ui-sans-serif, sans-serif; }
.card-checklist-track { width: 46px; height: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink), transparent 90%); }
.card-checklist-track span { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--ink), var(--muted) 24%); transition: width .22s ease; }
.job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 18px; margin: 0 0 3px; color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.status-badge, .priority-badge { display: inline-flex; align-items: center; gap: 5px; vertical-align: .18em; border-radius: 999px; padding: 2px 7px; color: var(--muted); background: color-mix(in srgb, var(--ink), transparent 94%); font: 650 .58rem/1.2 Inter, ui-sans-serif, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.priority-dot { width: .42em; height: .42em; border-radius: 50%; background: currentColor; opacity: .92; }
.status-review { color: #795c3e; background: #f1e7d9; }
.status-completed { opacity: .72; }
.status-in_progress { color: #4a6251; background: #e3ebe4; }
:root[data-theme="dark"] .status-review { color: #ddc0a0; background: #30261c; }
:root[data-theme="dark"] .status-in_progress { color: #b7d3bf; background: #1f2a22; }
:root[data-theme="dark"] .priority-high { color: #e1c399; background: #322719; }
:root[data-theme="dark"] .priority-urgent { color: #efaca8; background: #38201f; }
.priority-high { color: #77572e; background: #f2e7d4; }
.priority-urgent { color: #87312e; background: var(--accent-soft); }
.priority-low { color: #59708a; background: #e7edf2; opacity: .78; }
.project-separator { color: var(--muted); opacity: .58; }
.job-actions { display: flex; align-items: center; gap: 4px; }
.icon-button { width: 38px; height: 38px; border-radius: 50%; color: var(--muted); font-size: 1.05rem; }
.drag-handle { width: 36px; height: 36px; border-radius: 50%; color: #a8aaa2; cursor: grab; font-size: 1rem; letter-spacing: -.28em; padding-right: .26em; touch-action: none; opacity: 0; transform: translateX(4px); transition: opacity .24s ease, transform .24s ease, background .2s ease, color .2s ease; }
.drag-handle:active { cursor: grabbing; }
.job-card:hover .drag-handle, .job-card:focus-within .drag-handle, .job-card.dragging .drag-handle { opacity: 1; transform: translateX(0); }
.job-list.is-sorting .job-card:not(.dragging) { transform: translateY(0); }
.icon-button:hover:not(:disabled), .text-button:hover, .drag-handle:hover { background: rgba(32,34,30,.07); color: var(--ink); }
.icon-button:disabled { opacity: .25; cursor: default; }
.text-button { color: var(--muted); padding: 7px 9px; border-radius: 999px; font-size: .84rem; opacity: .7; white-space: nowrap; transition: opacity .22s ease, background .22s ease, color .22s ease; }
.quick-action { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; border-radius: 999px; color: var(--muted); padding: 7px 9px; font-size: .76rem; opacity: .62; white-space: nowrap; transition: opacity .18s cubic-bezier(.2,.8,.2,1), background .18s cubic-bezier(.2,.8,.2,1), color .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1); }
.quick-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.quick-action:hover, .quick-action:focus-visible { opacity: 1; background: color-mix(in srgb, var(--ink), transparent 93%); color: var(--ink); transform: translateY(-1px); }
.quick-progress.is-active { opacity: .86; color: #35543c; background: color-mix(in srgb, #dcebdd, transparent 12%); }
.empty { text-align: center; color: var(--muted); padding: 54px 20px; border-top: 1px solid var(--line); }
.status-message { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: white; min-height: 0; transition: opacity .16s cubic-bezier(.2,.8,.2,1), transform .16s cubic-bezier(.2,.8,.2,1); }
.status-message:empty { display: none; }

.recent-activity { margin-top: 70px; border-top: 1px solid var(--line); padding-top: 24px; }
.recent-activity h2 { color: var(--ink); font: 500 1.55rem/1.1 Georgia, serif; margin: 5px 0 14px; }
.recent-activity.is-quiet { margin-top: 42px; padding-top: 14px; opacity: .82; }
.recent-activity.is-quiet .eyebrow { display: none; }
.recent-activity.is-quiet h2 { color: var(--muted); font: 750 .72rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.recent-activity ul { list-style: none; padding: 0; margin: 0; }
.recent-activity li { display: grid; grid-template-columns: 48px minmax(120px, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: .85rem; }
.recent-activity li img { width: 48px; height: 38px; object-fit: cover; border-radius: 7px; background: var(--paper); }
.recent-activity li span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-activity time { color: var(--muted); }
.recent-activity em { color: #7b5137; background: #f3e9df; border-radius: 999px; padding: 4px 7px; font-style: normal; font-size: .75rem; }
.feed-state { position: fixed; right: 20px; top: 18px; z-index: 5; margin: 0; border-radius: 999px; padding: 6px 10px; background: #f1e7d9; color: #795c3e; font-size: .72rem; }
.render-notice { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: grid; grid-template-columns: minmax(260px, 1.35fr) minmax(190px, .85fr); width: min(640px, calc(100vw - 48px)); overflow: hidden; border: 1px solid rgba(31,30,27,.1); border-radius: 20px; background: rgba(251,250,247,.97); box-shadow: 0 24px 70px rgba(30,28,23,.2); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 300ms ease, transform 300ms ease; }
.render-notice[hidden] { display: none; }
.render-notice.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.render-notice > img { width: 100%; height: 280px; object-fit: cover; background: var(--paper); }
.render-notice-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 26px; }
.render-notice-copy h2 { margin: 7px 0 9px; font: 500 1.5rem/1.12 Georgia, serif; }
.render-notice-copy > p:not(.eyebrow) { color: var(--muted); font-size: .82rem; }
.render-notice-copy button { margin-top: 26px; border: 0; border-radius: 999px; background: var(--ink); color: white; padding: 9px 14px; cursor: pointer; }

.project-panel { position: fixed; inset: 0; z-index: 32; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.project-panel[hidden] { display: none; }
.project-panel-backdrop { position: absolute; inset: 0; border: 0; background: rgba(25, 25, 22, .32); backdrop-filter: blur(5px); cursor: pointer; animation: sheet-fade .15s ease both; }
:root[data-theme="dark"] .project-panel-backdrop { background: rgba(0, 0, 0, .48); }
.project-panel form { position: relative; z-index: 1; width: min(78vw, 1120px); height: min(90dvh, 900px); max-height: calc(100dvh - 48px); overflow: auto; scrollbar-width: thin; padding: clamp(20px, 2.4vw, 30px); border: 1px solid color-mix(in srgb, var(--line), transparent 18%); border-radius: 18px; background: var(--surface); box-shadow: 0 28px 90px rgba(20, 21, 18, .22); animation: sheet-in .2s cubic-bezier(.2,.75,.2,1) both; }
.project-panel.is-closing .project-panel-backdrop { animation: sheet-fade-out .15s ease both; }
.project-panel.is-closing form { animation: sheet-out .15s cubic-bezier(.4,0,.2,1) both; }
.note-form { display: flex; flex-direction: column; gap: 0; min-height: 0; }
.note-close { position: absolute; top: 16px; right: 18px; width: 38px; height: 38px; border-radius: 999px; font-size: 1.25rem; line-height: 1; }
.note-form :is(button, input, select, textarea, [role="textbox"], [tabindex]):focus-visible { outline: 2px solid color-mix(in srgb, var(--ink), transparent 42%); outline-offset: 3px; }
.note-form .sheet-title-editable:focus-visible { border-radius: 10px; outline-offset: 5px; }
.project-sheet-head { padding: 0 54px 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 28%); margin-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.sheet-title-area { min-width: 0; }
.project-sheet-head p { margin: 0 0 4px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 720; }
.project-sheet-head h2 { max-width: 18ch; margin: 0; border-radius: 10px; font: 520 clamp(1.55rem, 2.8vw, 2.85rem)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.04em; outline: 0; overflow-wrap: anywhere; transition: background .16s ease, box-shadow .16s ease, padding .16s ease; }
.sheet-title-editable { cursor: text; }
.sheet-title-editable:hover { background: color-mix(in srgb, var(--ink), transparent 96%); }
.sheet-title-editable.is-editing { padding: 4px 8px; background: color-mix(in srgb, var(--surface), white 48%); box-shadow: inset 0 0 0 1px var(--line); }
.create-name-field { display: none; }
.note-form.is-creating .project-sheet-head { display: none; }
.note-form.is-creating .create-name-field { display: block; }
.note-form.is-creating .sheet-meta-grid { grid-template-columns: minmax(210px, .98fr) minmax(220px, 1.05fr) minmax(118px, .42fr) minmax(108px, .31fr) minmax(104px, .3fr); }
.sheet-save-status { flex: 0 0 auto; margin-top: 2px; color: var(--muted); font-size: .76rem; font-weight: 650; transition: color .16s ease, opacity .16s ease; }
.sheet-save-status[data-state="saving"], .sheet-save-status[data-state="dirty"] { color: color-mix(in srgb, var(--ink), var(--muted) 45%); }
.sheet-save-status[data-state="error"] { color: #8a2f2a; }
.dialog-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.dialog-head h2 { margin-bottom: 0; font: 500 2rem/1 Georgia, serif; letter-spacing: -.04em; }
.quiet { color: var(--muted); align-self: start; padding: 6px; }
label { display: block; font-weight: 650; margin: 8px 0; font-size: .84rem; color: color-mix(in srgb, var(--ink), var(--muted) 18%); }
label span { float: right; color: var(--muted); font-size: .75rem; font-weight: 500; }
input, textarea, select { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), white 42%); padding: 9px 10px; color: var(--ink); }
input[type="hidden"] { display: none !important; }
textarea { resize: vertical; }
.sheet-meta-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(118px, .42fr) minmax(108px, .31fr) minmax(104px, .3fr); gap: 9px; align-items: start; margin-bottom: 9px; }
.sheet-compact-field { min-width: 0; margin: 0; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.sheet-compact-field input, .sheet-compact-field select { min-height: 36px; margin-top: 5px; padding: 7px 10px; border-radius: 10px; font-size: .92rem; font-weight: 650; letter-spacing: 0; text-transform: none; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.sheet-compact-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.delivery-date-control { float: none; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px; align-items: center; width: 100%; min-height: 36px; margin-top: 5px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface), white 42%); color: inherit; font-size: inherit; font-weight: inherit; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.delivery-date-control:focus-within { border-color: color-mix(in srgb, var(--ink), transparent 50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink), transparent 92%); }
.delivery-date-control input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.delivery-date-display { min-width: 0; min-height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; padding: 7px 9px; font-size: .9rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.delivery-date-control[data-empty="true"] .delivery-date-display { color: var(--muted); }
.delivery-date-clear { width: 30px; height: 30px; margin-right: 3px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.delivery-date-clear:hover { background: color-mix(in srgb, var(--ink), transparent 94%); color: var(--ink); }
.sheet-compact-field select.just-changed { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(20,21,18,.07); }
#status-select[data-value="in_progress"], #status-select[data-value="review"], #priority-select[data-value="high"], #priority-select[data-value="urgent"] { border-color: color-mix(in srgb, currentColor, var(--line) 50%); }
#status-select[data-value="in_progress"] { color: #4a6251; background-color: #edf3ee; }
#status-select[data-value="review"] { color: #795c3e; background-color: #f5edde; }
#status-select[data-value="completed"] { color: #58615a; background-color: #eef0ec; }
#priority-select[data-value="low"] { color: #59708a; background-color: #eef3f7; }
#priority-select[data-value="high"] { color: #77572e; background-color: #f6eddf; }
#priority-select[data-value="urgent"] { color: #87312e; background-color: #f8e2df; }
:root[data-theme="dark"] #status-select[data-value="in_progress"] { color: #b7d3bf; background-color: #1f2a22; }
:root[data-theme="dark"] #status-select[data-value="review"] { color: #ddc0a0; background-color: #30261c; }
:root[data-theme="dark"] #status-select[data-value="completed"] { color: #c5c8bf; background-color: #252720; }
:root[data-theme="dark"] #priority-select[data-value="low"] { color: #b9cde3; background-color: #1c2630; }
:root[data-theme="dark"] #priority-select[data-value="high"] { color: #e1c399; background-color: #322719; }
:root[data-theme="dark"] #priority-select[data-value="urgent"] { color: #efaca8; background-color: #38201f; }
.sheet-main-info { display: grid; gap: 6px; margin: 0 0 12px; }
.inline-note-field { min-width: 0; }
.inline-note-label { display: block; margin: 0 0 3px 7px; color: var(--muted); font-size: .68rem; line-height: 1.2; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.inline-note-display { width: 100%; border: 0; border-radius: 11px; background: transparent; color: var(--ink); text-align: left; cursor: text; padding: 7px 8px; transition: background .16s ease, color .16s ease, opacity .16s ease, box-shadow .16s ease; }
.inline-note-display:hover { background: color-mix(in srgb, var(--ink), transparent 96%); }
.inline-note-display:focus-visible { background: color-mix(in srgb, var(--ink), transparent 97%); }
.inline-note-display.is-empty { color: var(--muted); font-style: italic; }
.description-display { display: block; max-height: 3.18em; overflow: hidden; color: color-mix(in srgb, var(--ink), var(--muted) 20%); font-size: .92rem; line-height: 1.52; white-space: pre-wrap; overflow-wrap: anywhere; }
.description-display.is-expanded { max-height: none; }
.description-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 7px 4px; animation: inline-edit-in .16s ease both; }
.description-links a { border: 1px solid color-mix(in srgb, var(--line), transparent 10%); border-radius: 999px; padding: 4px 8px; color: color-mix(in srgb, var(--ink), #2f62a3 46%); font-size: .78rem; font-weight: 650; text-decoration: none; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.description-links a:hover { border-color: color-mix(in srgb, var(--ink), transparent 78%); background: color-mix(in srgb, var(--ink), transparent 96%); color: var(--ink); }
.inline-note-editor { margin-top: 0; animation: inline-edit-in .16s ease both; }
.description-editor { min-height: 118px; max-height: 240px; resize: vertical; padding: 12px 13px; border-radius: 13px; font-size: .98rem; line-height: 1.5; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.description-editor:focus { border-color: color-mix(in srgb, var(--ink), transparent 48%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink), transparent 92%); }
.description-toggle { justify-self: start; margin-top: -2px; padding-left: 7px; }
@keyframes inline-edit-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.sheet-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 12px; row-gap: 11px; align-items: end; margin-bottom: 10px; }
.segmented-field { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; min-width: 0; }
.segmented-field legend { display: block; margin: 0 0 4px; font-weight: 650; font-size: .84rem; color: color-mix(in srgb, var(--ink), var(--muted) 18%); }
.segmented-control { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; min-height: 40px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface), white 42%); padding: 4px; }
.segmented-control label { margin: 0; min-width: 0; font-size: .82rem; font-weight: 650; color: var(--muted); }
.segmented-control input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.segmented-control span { float: none; display: grid; place-items: center; height: 100%; min-height: 32px; border-radius: 9px; padding: 0 9px; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; transition: background .22s ease, color .22s ease, box-shadow .22s ease; }
.segmented-control input:checked + span { background: var(--ink); color: var(--surface); box-shadow: 0 5px 14px rgba(20, 21, 18, .08); }
.priority-control input[value="low"]:checked + span { background: #e7edf2; color: #59708a; }
.priority-control input[value="high"]:checked + span { background: #f2e7d4; color: #77572e; }
.priority-control input[value="urgent"]:checked + span { background: var(--accent-soft); color: #87312e; }
:root[data-theme="dark"] .priority-control input[value="low"]:checked + span { background: #1c2630; color: #b9cde3; }
:root[data-theme="dark"] .priority-control input[value="high"]:checked + span { background: #322719; color: #e1c399; }
:root[data-theme="dark"] .priority-control input[value="urgent"]:checked + span { background: #38201f; color: #efaca8; }
.sheet-lower-grid { flex: 0 0 clamp(360px, calc(100dvh - 360px), 560px); min-height: 360px; max-height: 560px; display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(300px, .86fr); gap: 18px; margin-top: 14px; overflow: hidden; }
.sheet-column { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.sheet-left-column { gap: 12px; }
.sheet-right-column { gap: 14px; }
.resources-editor { flex: 0 0 auto; min-height: 0; margin-top: 0; border: 1px solid color-mix(in srgb, var(--line), transparent 28%); border-radius: 14px; padding: 12px; background: color-mix(in srgb, var(--surface), var(--paper) 18%); }
.resources-editor[hidden] { display: none !important; }
.resources-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.resources-head p { margin: 0; font-weight: 650; font-size: .94rem; }
.resource-row { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(160px, 1.2fr) auto auto; align-items: center; gap: 8px; margin-top: 8px; }
.resource-row a { color: var(--muted); text-decoration: none; font-size: .86rem; }
.resource-row a:hover { color: var(--ink); text-decoration: underline; }
.resources-empty { margin: 7px 0 0; color: var(--muted); font-size: .84rem; }
.checklist-editor { flex: 1 1 auto; min-height: 0; margin-top: 0; border: 1px solid color-mix(in srgb, var(--line), transparent 28%); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; overflow: hidden; background: color-mix(in srgb, var(--surface), var(--paper) 18%); }
.checklist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.checklist-head p { margin: 0; font-weight: 650; font-size: .94rem; }
.checklist-head span { color: var(--muted); font-size: .78rem; font-weight: 650; }
.checklist-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.checklist-visibility { padding: 4px 7px; font-size: .75rem; }
.checklist-empty { margin: 4px 0 7px; color: var(--muted); font-size: .86rem; }
.checklist-empty[hidden], .checklist-add[hidden] { display: none; }
.checklist-boards { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 10px; padding-right: 4px; scrollbar-width: thin; }
.checklist-board { overflow: clip; border: 1px solid color-mix(in srgb, var(--line), transparent 28%); border-radius: 14px; padding: 9px; background: color-mix(in srgb, var(--surface), var(--bg) 30%); transition: border-color .18s cubic-bezier(.2,.8,.2,1), background .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1); }
.checklist-board:focus-within, .checklist-board:hover { border-color: color-mix(in srgb, var(--line), var(--ink) 14%); }
.checklist-board-head { display: grid; grid-template-columns: auto minmax(0, 1fr) 30px; align-items: center; gap: 6px; min-height: 32px; margin-bottom: 2px; }
.checklist-board-toggle { min-width: 0; display: inline-grid; grid-template-columns: 18px auto; align-items: center; gap: 4px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; padding: 3px 4px; transition: background .16s cubic-bezier(.2,.8,.2,1); }
.checklist-board-toggle:hover, .checklist-board-toggle:focus-visible { background: color-mix(in srgb, var(--ink), transparent 95%); }
.checklist-board-toggle > span:last-child { color: var(--muted); font-size: .76rem; font-weight: 680; }
.checklist-collapse { width: 22px; color: var(--muted); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.checklist-board.is-collapsed .checklist-collapse { transform: rotate(-90deg); }
.checklist-title-button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; padding: 5px 6px; cursor: text; font-weight: 680; font-size: .9rem; transition: background .16s cubic-bezier(.2,.8,.2,1), color .16s cubic-bezier(.2,.8,.2,1), transform .16s cubic-bezier(.2,.8,.2,1); }
.checklist-title-button:hover, .checklist-title-button:focus-visible { background: color-mix(in srgb, var(--ink), transparent 95%); }
.checklist-name-input { min-width: 0; margin: 0; padding: 7px 8px; font-size: .9rem; }
.checklist-board-body { max-height: 900px; overflow: hidden; opacity: 1; transform-origin: top; transition: max-height .2s cubic-bezier(.2,.8,.2,1), opacity .16s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1); }
.checklist-board.is-collapsed .checklist-board-body { max-height: 0; opacity: 0; transform: translateY(-3px); pointer-events: none; }
.checklist-list { flex: 1 1 auto; list-style: none; padding: 0; margin: 0; min-height: 20px; overflow: hidden; }
.checklist-row { display: grid; grid-template-columns: 24px 24px minmax(0, 1fr) 30px; align-items: center; gap: 4px; min-height: 36px; border-radius: 8px; animation: checklist-row-in .16s cubic-bezier(.2,.8,.2,1) both; animation-delay: min(calc(var(--item-index, 0) * 60ms), 180ms); transition: background .16s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1), opacity .16s cubic-bezier(.2,.8,.2,1); }
.checklist-row:hover, .checklist-row:focus-within { background: color-mix(in srgb, var(--ink), transparent 96%); }
.checklist-row.dragging { opacity: .96; background: var(--surface); box-shadow: 0 12px 30px rgba(20, 21, 18, .12); transform: translateY(-2px) scale(1.006); }
.checklist-toggle { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: .76rem; transition: background .16s cubic-bezier(.2,.8,.2,1), border-color .16s cubic-bezier(.2,.8,.2,1), transform .16s cubic-bezier(.2,.8,.2,1), color .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s cubic-bezier(.2,.8,.2,1); }
.checklist-toggle:active { transform: scale(.92); }
.checklist-row.is-completed .checklist-toggle { background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink), transparent 88%); }
.checklist-toggle:disabled { cursor: default; opacity: .72; }
.checklist-text { min-width: 0; border: 0; background: transparent; color: var(--ink); text-align: left; padding: 5px 3px; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; }
.checklist-text:disabled { cursor: default; color: inherit; }
.checklist-row.is-completed .checklist-text { color: var(--muted); opacity: .72; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--muted), transparent 50%); transition: color .16s cubic-bezier(.2,.8,.2,1), opacity .16s cubic-bezier(.2,.8,.2,1), text-decoration-color .16s cubic-bezier(.2,.8,.2,1); }
.checklist-handle, .checklist-delete { border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 999px; opacity: .34; transition: opacity .2s ease, background .2s ease, color .2s ease, transform .16s ease; }
.checklist-handle { width: 24px; height: 30px; touch-action: none; cursor: grab; font-size: .92rem; }
.checklist-delete { justify-self: end; width: 30px; height: 30px; display: grid; place-items: center; font-size: .84rem; opacity: .18; }
.checklist-row:hover .checklist-handle, .checklist-row:focus-within .checklist-handle, .checklist-row:hover .checklist-delete, .checklist-row:focus-within .checklist-delete, .checklist-board-head:hover .checklist-delete, .checklist-board-head:focus-within .checklist-delete { opacity: .78; }
.checklist-handle:hover, .checklist-delete:hover, .checklist-delete:focus-visible { background: color-mix(in srgb, var(--ink), transparent 93%); color: var(--ink); transform: scale(1.03); }
.checklist-row.is-removing, .checklist-board.is-removing { opacity: 0; transform: translateY(-3px) scale(.992); max-height: 0; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; pointer-events: none; }
.checklist-add, .checklist-add-inline { margin-top: 8px; }
.checklist-add input, .checklist-add-inline input { margin: 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--line), transparent 20%); border-radius: 0; background: transparent; padding: 10px 2px 2px; font-size: .9rem; transition: border-color .15s ease, color .15s ease; }
.checklist-add input:focus, .checklist-add-inline input:focus { outline: none; border-color: color-mix(in srgb, var(--ink), transparent 64%); }
.checklist-add-button { margin-top: 7px; padding-left: 0; }
.checklist-error { min-height: 1.2em; margin: 5px 0 0; color: #8a2f2a; font-size: .82rem; }
.checklist-error:empty { display: none; }
.checklist-edit-input { grid-column: 1 / -1; margin: 2px 0; }
.comments-editor, .history-editor { min-height: 0; margin-top: 0; border: 1px solid color-mix(in srgb, var(--line), transparent 28%); border-radius: 14px; padding: 12px; background: color-mix(in srgb, var(--surface), var(--paper) 18%); }
.comments-editor { flex: 1 1 58%; display: flex; flex-direction: column; overflow: hidden; }
.history-editor { flex: 0 0 auto; display: grid; grid-template-rows: auto 0fr; gap: 0; overflow: hidden; min-height: 0; padding: 0; transition: grid-template-rows .19s ease, border-color .19s ease, background .19s ease; }
.history-editor.is-expanded { flex: 0 1 38%; grid-template-rows: auto minmax(0, 1fr); min-height: 120px; }
.comments-head, .history-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.comments-head p, .history-head p { margin: 0; font-weight: 650; font-size: .94rem; }
.comments-head span { color: var(--muted); font-size: .78rem; font-weight: 650; }
.comments-list { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 8px; margin-bottom: 8px; padding-right: 4px; scrollbar-width: thin; }
.comment-card { border: 1px solid color-mix(in srgb, var(--line), transparent 32%); border-radius: 12px; background: color-mix(in srgb, var(--surface), var(--paper) 22%); padding: 9px 11px; animation: comment-in .18s cubic-bezier(.2,.75,.2,1) both; animation-delay: min(calc(var(--comment-index, 0) * 45ms), 160ms); }
.comment-card > div { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comment-card strong { font-size: .82rem; }
.comment-card time, .comments-help, .comments-empty, .history-list time, .history-empty { color: var(--muted); font-size: .74rem; }
.comment-card p { margin: 0; color: var(--ink); font-size: .9rem; line-height: 1.38; white-space: normal; }
#comment-input { flex: 0 0 auto; min-height: 58px; max-height: 130px; resize: vertical; }
.comments-help { margin: 5px 0 0; }
.comments-error { min-height: 1.2em; margin: 5px 0 0; color: #8a2f2a; font-size: .82rem; }
.comments-error:empty { display: none; }
.history-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; border: 0; background: transparent; color: color-mix(in srgb, var(--ink), var(--muted) 16%); padding: 9px 12px; cursor: pointer; font: 650 .9rem/1.2 Inter, ui-sans-serif, sans-serif; text-align: left; transition: background .16s ease, color .16s ease; }
.history-toggle:hover { background: color-mix(in srgb, var(--ink), transparent 96%); color: var(--ink); }
.history-toggle span:last-child { color: var(--muted); font-size: .78rem; font-weight: 650; }
.history-body { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .19s ease; }
.history-editor.is-expanded .history-body { opacity: 1; }
.history-list { max-height: 180px; overflow: auto; list-style: none; padding: 0 12px 10px; margin: 0; display: grid; align-content: start; gap: 5px; scrollbar-width: thin; }
.history-list li { display: flex; justify-content: space-between; gap: 12px; color: color-mix(in srgb, var(--ink), var(--muted) 16%); font-size: .82rem; }
.history-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes comment-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.display-checklist-title { margin: 14px 10px 4px; color: var(--display-soft); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 650; }
.form-error { color: #8a2f2a; min-height: 1.3em; font-size: .9rem; }
:root[data-theme="dark"] .form-error { color: #e2a09a; }
.dialog-actions { display: none; }
.note-form.is-creating .dialog-actions { display: flex; justify-content: flex-end; padding-top: 4px; }

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sheet-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.99); }
}
@keyframes sheet-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sheet-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes checklist-row-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes display-placeholder {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: .42; transform: none; }
}
@keyframes display-progress-on {
  0% { transform: translateY(0) scale(1); box-shadow: none; }
  45% { transform: translateY(-2px) scale(1.006); box-shadow: 0 12px 34px color-mix(in srgb, var(--display-shadow), transparent 32%); }
  100% { transform: translateY(0) scale(1); box-shadow: none; }
}
@keyframes display-progress-off {
  0% { transform: translateY(-1px) scale(1.003); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes display-progress-error {
  0% { transform: translateX(0); }
  35% { transform: translateX(-2px); }
  70% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes display-label-in {
  from { opacity: 0; transform: translateY(2px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.admin-page { min-height: 100dvh; }
.admin-app[hidden], .admin-access[hidden] { display: none !important; }
.admin-shell { width: min(1160px, calc(100% - 36px)); margin: 0 auto; padding: 18px 0 42px; }
.admin-access { min-height: calc(100dvh - 36px); display: grid; place-items: center; }
.admin-access-card { width: min(420px, 100%); border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), transparent 4%); padding: 26px; box-shadow: 0 18px 44px rgba(30, 28, 23, .07); }
.admin-access-brand { display: inline-flex; margin-bottom: 26px; }
.admin-access-card h1 { margin-bottom: 10px; font: 500 clamp(1.7rem, 3vw, 2.3rem)/1.02 Georgia, serif; letter-spacing: 0; }
.admin-access-card p { color: var(--muted); line-height: 1.45; }
.admin-access-form { display: grid; gap: 12px; margin-top: 22px; }
.admin-access-form button { justify-self: start; }
.admin-header { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), transparent 2%); padding: 12px 14px; box-shadow: 0 14px 34px rgba(30, 28, 23, .06); }
.admin-title-block { min-width: 0; }
.admin-title-block .brand { display: inline-flex; margin-bottom: 5px; font-size: .82rem; }
.admin-title-block h1 { margin: 0; font: 650 1.2rem/1.12 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
.admin-title-block p { margin: 3px 0 0; max-width: 520px; color: var(--muted); font-size: .84rem; line-height: 1.35; }
.admin-header-status { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 7px; color: var(--muted); font-size: .76rem; }
.admin-header-status span { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; background: color-mix(in srgb, var(--paper), transparent 46%); white-space: nowrap; }
.admin-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.admin-layout { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: start; }
.admin-sidebar { position: sticky; top: 96px; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), transparent 10%); }
.admin-nav-link { border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; padding: 9px 10px; text-align: left; font-size: .9rem; font-weight: 700; transition: background .2s ease, color .2s ease; }
.admin-nav-link:hover, .admin-nav-link:focus-visible, .admin-nav-link.is-active { background: color-mix(in srgb, var(--ink), transparent 92%); color: var(--ink); }
.admin-sidebar-links { display: grid; gap: 3px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.admin-sidebar-links a { border-radius: 6px; color: var(--muted); padding: 7px 10px; text-decoration: none; font-size: .82rem; }
.admin-sidebar-links a:hover, .admin-sidebar-links a:focus-visible { background: color-mix(in srgb, var(--ink), transparent 94%); color: var(--ink); }
.admin-mobile-nav { display: none; margin-bottom: 12px; }
.admin-mobile-nav label { margin: 0 0 6px; }
.admin-form { min-width: 0; }
.admin-save-actions { display: flex; align-items: center; gap: 8px; }
.admin-save-state { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }
.admin-save-state[data-state="dirty"] { color: #7a5a2d; }
.admin-save-state[data-state="saving"] { color: var(--focus); }
.admin-save-state[data-state="saved"] { color: #4f6a58; }
.admin-feedback { min-height: 1.25em; margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
.admin-feedback:empty { display: none; }
.admin-feedback[data-state="error"] { color: #87312e; }
.admin-section { display: grid; gap: 12px; }
.admin-section[hidden] { display: none; }
.admin-section-head { border: 0; padding: 0; }
.admin-section-head h2 { margin: 0 0 5px; font: 650 1.15rem/1.15 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
.admin-section-head p:not(.eyebrow) { max-width: 620px; color: var(--muted); line-height: 1.44; }
.admin-panel { display: grid; gap: 16px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), transparent 8%); padding: 16px; }
.admin-field-group { display: grid; gap: 12px; min-width: 0; border-top: 1px solid var(--line); padding-top: 15px; }
.admin-field-group:first-child { border-top: 0; padding-top: 0; }
.admin-field-group h3 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-note { color: var(--muted); margin: 0; font-size: .9rem; line-height: 1.45; }
.admin-choice, .admin-switches { margin: 0; padding: 0; border: 0; display: grid; gap: 9px; }
.admin-choice legend, .admin-switches legend { margin-bottom: 8px; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 750; }
.admin-choice label, .admin-switches label { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 38px; margin: 0; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.admin-choice label:first-of-type, .admin-switches label:first-of-type { border-top: 0; }
.admin-choice input, .admin-switches input { width: auto; margin: 0; flex: 0 0 auto; }
.admin-preview-card,
.module-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface), transparent 8%);
  padding: 16px;
}
.module-card { display: grid; gap: 12px; }
.module-card-official { border-color: color-mix(in srgb, var(--line), var(--accent) 18%); }
.module-card-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.module-kicker,
.admin-preview-card span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.module-card h3,
.admin-preview-card strong { display: block; margin: 0 0 5px; color: var(--ink); font-size: 1.02rem; }
.module-card p,
.admin-preview-card p { margin: 0; color: var(--muted); line-height: 1.42; }
.module-card > strong { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.module-toggle { flex: 0 0 auto; margin: 0; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px; color: var(--muted); background: color-mix(in srgb, var(--surface), transparent 4%); font-size: .82rem; font-weight: 650; }
.module-toggle input { width: auto; margin: 0; }
.admin-preview-card { min-height: 160px; display: grid; align-content: end; background: linear-gradient(135deg, color-mix(in srgb, var(--surface), white 30%), color-mix(in srgb, var(--bg), var(--accent-soft) 18%)); }
.admin-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.admin-metric { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: color-mix(in srgb, var(--paper), transparent 34%); }
.admin-metric span { display: block; color: var(--muted); font-size: .74rem; }
.admin-metric strong { display: flex; align-items: center; gap: 7px; margin-top: 5px; overflow-wrap: anywhere; font-size: .92rem; }
.backup-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.backup-toolbar strong { display: block; margin-bottom: 5px; }
.backup-list { min-width: 0; }
.status-dot { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor, transparent 86%); }
.status-dot.is-ok { background: #55735c; color: #55735c; }
.status-dot.is-warn { background: #8a6c32; color: #8a6c32; }
.status-dot.is-error { background: #943c38; color: #943c38; }
.status-dot.is-muted { background: var(--muted); color: var(--muted); }
.admin-access-state { display: flex; align-items: flex-start; gap: 13px; }
.admin-access-state p { margin: 4px 0 0; color: var(--muted); line-height: 1.4; }
.renderfeed-control-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.renderfeed-control-head strong { display: flex; align-items: center; gap: 8px; font-size: 1rem; }

.app-version {
  margin: 44px 0 0;
  color: var(--muted);
  font-size: .66rem;
  letter-spacing: .08em;
  opacity: .58;
  text-align: center;
}
.status-footer { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.render-feed-pill { white-space: nowrap; }
.render-feed-pill[data-state="connected"] { opacity: .72; }
.render-feed-pill[data-state="reconnecting"] { opacity: .68; }
.render-feed-pill[data-state="disconnected"] { opacity: .62; }
.renderfeed-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
  color: var(--muted);
  font-size: .78rem;
}
.renderfeed-overview span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface), transparent 18%);
  padding: 6px 10px;
}
.recent-activity.is-quiet .renderfeed-overview { margin-bottom: 0; font-size: .72rem; opacity: .8; }
.recent-activity.is-quiet .renderfeed-overview span { padding: 5px 8px; background: transparent; }
.renderfeed-overview [data-state="connected"] { color: #496455; }
.renderfeed-overview [data-state="reconnecting"] { color: #756332; }
.renderfeed-overview [data-state="disconnected"] { color: #7a5c58; }
.system-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.system-panel-head h2 { margin: 0; }
.system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.system-card { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface), transparent 8%); padding: 16px; }
.system-card h3 { margin: 0 0 12px; font-size: 1rem; letter-spacing: -.01em; }
.system-card dl { margin: 0; display: grid; gap: 9px; }
.system-card div { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.system-card dt { color: var(--muted); }
.system-card dd { margin: 0; text-align: right; }
.diagnostics-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.diagnostics-grid { display: grid; gap: 16px; }
.diagnostic-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.diagnostic-summary article {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface), transparent 8%);
  padding: 13px;
  min-width: 0;
}
.diagnostic-summary span,
.diagnostic-summary small { display: block; color: var(--muted); font-size: .72rem; }
.diagnostic-summary strong { display: block; margin: 5px 0; font-size: .96rem; overflow-wrap: anywhere; }
.diagnostic-block { border-top: 1px solid var(--line); padding-top: 15px; }
.diagnostic-block h3 { margin: 0 0 10px; font-size: .98rem; }
.diagnostic-block-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.diagnostic-block-head h3 { margin-bottom: 0; }
.diagnostic-block-head label { min-width: min(280px, 100%); }
.diagnostic-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.diagnostic-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.diagnostic-table th,
.diagnostic-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.diagnostic-table th { color: var(--muted); font-weight: 650; }
.diagnostic-table tr:last-child td { border-bottom: 0; }
.diagnostic-thumb { width: 34px; height: 24px; object-fit: cover; border-radius: 5px; margin-right: 8px; vertical-align: middle; background: var(--line); }
.diagnostic-render-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.diagnostic-render-card dl { margin: 0; display: grid; gap: 8px; }
.diagnostic-render-card div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
.diagnostic-render-card dt { color: var(--muted); }
.diagnostic-render-card dd { margin: 0; overflow-wrap: anywhere; }
.diagnostic-open-thumb { text-decoration: none; white-space: nowrap; }
.diagnostic-render-actions { display: grid; gap: 8px; justify-items: end; }
.display-version {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--display-footer-space);
  margin: 0;
  padding: 10px max(22px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  color: var(--display-soft);
  background: color-mix(in srgb, var(--display-bg), transparent 8%);
  border-top: 1px solid color-mix(in srgb, var(--display-line), transparent 20%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
  opacity: .78;
}

.display-version[hidden] { display: none !important; }

.display-page {
  --display-footer-space: calc(50px + env(safe-area-inset-bottom));
  --display-bg: #f8f7f3;
  --display-ink: #171916;
  --display-soft: #777970;
  --display-faint: #b7b4aa;
  --display-line: #dfddd5;
  --display-panel: rgba(255, 255, 252, .86);
  --display-panel-solid: #fffefa;
  --display-header-bg: rgba(248, 247, 243, .88);
  --display-control-bg: rgba(255, 254, 250, .78);
  --display-control-border: rgba(223, 221, 213, .74);
  --display-backdrop: rgba(248, 247, 243, .52);
  --display-shadow: rgba(20, 22, 18, .16);
  min-height: 100dvh;
  background: var(--display-bg);
  color: var(--display-ink);
  overflow: hidden;
  touch-action: manipulation;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-display-theme="light"]) .display-page,
  :root[data-display-theme="auto"] .display-page {
    --display-bg: #10110f;
    --display-ink: #eceae2;
    --display-soft: #a7a69e;
    --display-faint: #686a63;
    --display-line: #2f312d;
    --display-panel: rgba(25, 26, 23, .88);
    --display-panel-solid: #191a17;
    --display-header-bg: rgba(16, 17, 15, .88);
    --display-control-bg: rgba(25, 26, 23, .78);
    --display-control-border: rgba(47, 49, 45, .86);
    --display-backdrop: rgba(16, 17, 15, .64);
    --display-shadow: rgba(0, 0, 0, .38);
  }
}
:root[data-display-theme="dark"] .display-page {
  --display-bg: #10110f;
  --display-ink: #eceae2;
  --display-soft: #a7a69e;
  --display-faint: #686a63;
  --display-line: #2f312d;
  --display-panel: rgba(25, 26, 23, .88);
  --display-panel-solid: #191a17;
  --display-header-bg: rgba(16, 17, 15, .88);
  --display-control-bg: rgba(25, 26, 23, .78);
  --display-control-border: rgba(47, 49, 45, .86);
  --display-backdrop: rgba(16, 17, 15, .64);
  --display-shadow: rgba(0, 0, 0, .38);
}
.display-shell {
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) max(30px, env(safe-area-inset-right)) calc(var(--display-footer-space) + 18px) max(30px, env(safe-area-inset-left));
  opacity: 1;
  animation: display-arrive 1.4s ease 1.85s both;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.display-shell::-webkit-scrollbar { display: none; }
.display-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 42px; margin: 0 0 clamp(10px, 1.6vh, 18px); padding-bottom: 8px; background: var(--display-header-bg); box-shadow: 0 1px 0 var(--display-line); backdrop-filter: blur(14px); }
.display-brand { display: flex; align-items: center; gap: 10px; color: var(--display-soft); font-size: .68rem; letter-spacing: .24em; font-weight: 650; }
.display-logo { width: 24px; height: 24px; object-fit: contain; opacity: .68; filter: drop-shadow(0 8px 16px var(--display-shadow)); }
.display-ambient { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--display-soft); font-size: clamp(.82rem, 1.15vw, 1.05rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.display-tools { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .8s ease, transform .8s ease; }
.display-tools[hidden] { display: none; }
.display-tools.is-visible { opacity: .74; transform: translateY(0); pointer-events: auto; }
.display-tool, .theme-switch button { border: 1px solid var(--display-control-border); border-radius: 999px; background: var(--display-control-bg); color: var(--display-soft); padding: 7px 10px; cursor: pointer; font-size: .72rem; }
.display-last-render { border: 1px solid var(--display-control-border); border-radius: 999px; background: var(--display-control-bg); color: var(--display-soft); padding: 7px 11px; cursor: pointer; font-size: .72rem; opacity: .68; transition: opacity .35s ease, background .35s ease, color .35s ease, transform .35s ease; }
.display-last-render:hover, .display-last-render:focus-visible { opacity: 1; background: var(--display-panel-solid); color: var(--display-ink); transform: translateY(-1px); }
.theme-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--display-control-border); border-radius: 999px; background: var(--display-control-bg); }
.theme-switch button { border: 0; background: transparent; padding: 5px 8px; }
.theme-switch button.active { background: var(--display-ink); color: var(--display-bg); }
.display-page h1 { font: 450 clamp(1rem, 1.65vw, 1.54rem)/1.04 Georgia, "Times New Roman", serif; color: var(--display-ink); margin-bottom: clamp(8px, 1.4vh, 15px); letter-spacing: 0; }
.display-review-count { margin: -4px 0 9px; color: var(--display-soft); font-size: clamp(.68rem, .9vw, .82rem); letter-spacing: .08em; }
.display-list { list-style: none; margin: 0; padding: 0 0 calc(var(--display-footer-space) + clamp(34px, 5vh, 58px)); }
.display-list, .display-item, .display-item * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.display-item { position: relative; border-top: 1px solid var(--display-line); transition: opacity .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s cubic-bezier(.2,.8,.2,1), filter .18s cubic-bezier(.2,.8,.2,1); }
.display-item-button { position: relative; isolation: isolate; overflow: hidden; width: 100%; display: grid; grid-template-columns: clamp(42px, 5vw, 60px) minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 0; background: transparent; text-align: left; cursor: pointer; padding: clamp(11px, 1.55vh, 17px) 0 clamp(12px, 1.7vh, 18px); color: inherit; touch-action: pan-y; border-radius: 12px; transition: background .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1); }
.display-item-button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, #6d8b71, transparent 88%), transparent 36%); opacity: 0; transform: translateX(-10px); transition: opacity .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.display-item-button > span { color: var(--display-faint); font-size: clamp(.58rem, .82vw, .72rem); font-weight: 400; letter-spacing: .18em; padding-top: .48em; font-variant-numeric: tabular-nums; }
.display-item strong { display: block; max-width: 26ch; font: 500 clamp(1.12rem, 1.92vw, 1.82rem)/1.02 Georgia, "Times New Roman", serif; letter-spacing: 0; color: var(--display-ink); }
.display-priority { display: inline-flex; align-items: center; gap: 7px; margin-right: .42em; vertical-align: .18em; color: var(--display-soft); font: 650 clamp(.56rem, .72vw, .66rem)/1 Inter, ui-sans-serif, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.display-priority span { width: .46em; height: .46em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor, transparent 88%); }
.display-priority em { font-style: normal; }
.display-priority-low { color: #6f8eaa; }
.display-priority-high { color: #bc7b32; }
.display-priority-urgent { color: #c7413b; }
:root[data-display-theme="dark"] .display-priority-low { color: #8eb1ce; }
:root[data-display-theme="dark"] .display-priority-high { color: #d39c58; }
:root[data-display-theme="dark"] .display-priority-urgent { color: #df6963; }
.display-item p { color: var(--display-soft); margin: 3px 0 0; max-width: 60ch; font-size: clamp(.7rem, .96vw, .88rem); line-height: 1.22; }
.display-item.current { border-top-color: var(--display-ink); }
.display-item.is-in-progress { border-top-color: color-mix(in srgb, #55735c, var(--display-line) 34%); }
.display-item.is-in-progress .display-item-button::before { opacity: 1; transform: translateX(0); }
.display-item.is-progress-on .display-item-button { animation: display-progress-on .2s cubic-bezier(.2,.8,.2,1) both; }
.display-item.is-progress-off .display-item-button { animation: display-progress-off .18s cubic-bezier(.2,.8,.2,1) both; }
.display-item.is-progress-error .display-item-button { animation: display-progress-error .2s cubic-bezier(.2,.8,.2,1) both; }
.display-item.current .display-item-button { padding-top: clamp(14px, 1.9vh, 21px); padding-bottom: clamp(15px, 2vh, 22px); }
.display-item.current .display-item-button > span { color: var(--display-soft); }
.display-item.current strong { font-size: clamp(1.34rem, 2.34vw, 2.22rem); }
.display-item.next { opacity: .78; }
.display-list.is-display-sorting .display-item:not(.is-moving) { opacity: .58; transform: translateY(0); }
.display-item.is-moving { z-index: 2; opacity: .92; border-top-color: transparent; filter: saturate(1.02); }
.display-item.is-moving .display-item-button { background: var(--display-panel); box-shadow: 0 18px 56px var(--display-shadow); transform: translateY(-3px) scale(1.006); cursor: grabbing; }
.display-item.is-moving::after { content: ""; position: absolute; inset: 6px 0; z-index: -1; border: 1px dashed color-mix(in srgb, var(--display-ink), transparent 72%); border-radius: 14px; opacity: .42; animation: display-placeholder .18s ease both; }
body.display-dragging, body.display-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; }
.is-display-dragging .display-item-button { touch-action: none; }
.display-progress-toggle { min-height: 32px; border: 1px solid var(--display-control-border); border-radius: 999px; background: var(--display-control-bg); color: var(--display-soft); padding: 7px 11px; cursor: pointer; font-size: clamp(.66rem, .88vw, .78rem); white-space: nowrap; transition: background .18s cubic-bezier(.2,.8,.2,1), color .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s cubic-bezier(.2,.8,.2,1), opacity .16s cubic-bezier(.2,.8,.2,1); touch-action: manipulation; }
.display-progress-toggle span { display: inline-block; transform-origin: center; animation: display-label-in .16s cubic-bezier(.2,.8,.2,1) both; }
.display-progress-toggle[aria-pressed="true"] { color: #35543c; border-color: color-mix(in srgb, #6d8b71, transparent 54%); background: color-mix(in srgb, #dcebdd, transparent 16%); }
:root[data-display-theme="dark"] .display-progress-toggle[aria-pressed="true"] { color: #c9e2cc; background: color-mix(in srgb, #35543c, transparent 34%); }
.display-progress-toggle:hover, .display-progress-toggle:focus-visible { transform: translateY(-1px); color: var(--display-ink); background: var(--display-panel-solid); }
.display-progress-toggle:disabled { cursor: default; opacity: .76; transform: none; }
.display-empty { display: grid; min-height: calc(100dvh - 160px); place-items: center; align-content: center; color: var(--display-soft); text-align: center; border-top: 1px solid var(--display-line); }
.display-empty[hidden] { display: none; }
.display-empty img { width: clamp(54px, 7vw, 84px); height: clamp(54px, 7vw, 84px); object-fit: contain; margin-bottom: 22px; opacity: .86; }
.display-empty strong { color: var(--display-ink); font-size: clamp(.96rem, 1.5vw, 1.2rem); letter-spacing: .32em; font-weight: 600; margin-bottom: 24px; }
.display-empty p { margin: 0; color: var(--display-soft); font: 400 clamp(1.12rem, 2.1vw, 1.7rem)/1.45 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.display-intro { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 14px; background: var(--display-bg); color: var(--display-ink); text-align: center; transition: opacity 1.4s ease, visibility 1.4s ease; }
.display-intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.display-intro-logo { width: clamp(72px, 9vw, 116px); height: clamp(72px, 9vw, 116px); object-fit: contain; margin-bottom: 12px; opacity: .9; filter: drop-shadow(0 12px 22px rgba(20, 22, 18, .09)); }
.display-intro p { margin: 0 0 18px; color: var(--display-ink); font-size: clamp(1rem, 1.8vw, 1.45rem); letter-spacing: .42em; font-weight: 600; }
.display-intro span { display: block; color: var(--display-soft); font-size: clamp(1.05rem, 2.2vw, 1.72rem); line-height: 1.2; }
@keyframes display-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.job-detail-layer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: max(28px, env(safe-area-inset-top)) max(34px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(34px, env(safe-area-inset-left)); }
.job-detail-layer[hidden] { display: none; }
.job-detail-layer.is-closing { pointer-events: none; animation: detail-out .42s ease both; }
.job-detail-backdrop { position: absolute; inset: 0; border: 0; background: var(--display-backdrop); backdrop-filter: blur(12px); cursor: pointer; }
.job-detail-card { position: relative; width: min(860px, 86vw); max-height: min(620px, 82dvh); overflow: auto; scrollbar-width: none; border: 1px solid var(--display-control-border); border-radius: 8px; background: var(--display-panel); color: var(--display-ink); box-shadow: 0 28px 80px var(--display-shadow); padding: clamp(30px, 4vw, 54px); animation: detail-in .72s ease both; }
.job-detail-card::-webkit-scrollbar { display: none; }
.job-detail-close { position: absolute; top: 18px; right: 18px; border: 0; border-radius: 999px; background: transparent; color: var(--display-soft); padding: 8px 10px; cursor: pointer; font-size: .8rem; }
.job-detail-pin { position: absolute; top: 16px; right: 80px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--display-soft); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.job-detail-pin svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.job-detail-pin:hover, .job-detail-pin:focus-visible, .job-detail-pin.is-pinned { background: var(--display-control-bg); border-color: var(--display-control-border); color: var(--display-ink); }
.job-detail-pin.is-pinned { transform: rotate(-12deg); }
.job-detail-position { color: var(--display-soft); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; margin-bottom: 18px; }
.job-detail-card h2 { margin: 0 54px 18px 0; font: 500 clamp(2rem, 4vw, 4.1rem)/1.02 Georgia, "Times New Roman", serif; letter-spacing: 0; }
.job-detail-summary { color: var(--display-soft); font-size: clamp(1rem, 1.65vw, 1.35rem); line-height: 1.38; margin-bottom: 24px; }
.job-detail-context { border-top: 1px solid var(--display-line); padding-top: 24px; color: var(--display-ink); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.55; }
.job-detail-context a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.job-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--display-line); }
.job-detail-meta[hidden] { display: none; }
.job-detail-meta div { min-width: 0; }
.job-detail-meta dt { color: var(--display-soft); text-transform: uppercase; letter-spacing: .13em; font-size: .64rem; margin-bottom: 4px; }
.job-detail-meta dd { margin: 0; color: var(--display-ink); font-size: .9rem; overflow-wrap: anywhere; }
.job-detail-link { display: inline-flex; margin-top: 24px; color: var(--display-ink); text-decoration: none; border-bottom: 1px solid var(--display-soft); padding-bottom: 3px; }
.job-detail-notes { margin-top: 26px; border-top: 1px solid var(--display-line); padding-top: 18px; color: var(--display-soft); }
.job-detail-notes p { margin-bottom: 10px; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; }
.job-detail-notes ul { margin: 0; padding-left: 18px; }
.job-detail-notes li { margin: 7px 0; line-height: 1.35; }
.job-detail-checklist { margin-top: 26px; border-top: 1px solid var(--display-line); padding-top: 18px; }
.job-detail-checklist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; color: var(--display-soft); }
.job-detail-checklist p { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; }
.job-detail-checklist span { color: var(--display-soft); font-size: .9rem; }
.job-detail-checklist ol { max-height: min(280px, 34dvh); overflow: auto; list-style: none; padding: 0; margin: 0; scrollbar-width: thin; }
.job-detail-checklist li { margin: 6px 0; }
.job-detail-checklist button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; border: 0; border-radius: 10px; background: transparent; color: var(--display-ink); text-align: left; cursor: pointer; padding: 7px 10px; transition: background .22s ease, color .22s ease, opacity .22s ease; }
.job-detail-checklist button:hover, .job-detail-checklist button:focus-visible { background: color-mix(in srgb, var(--display-ink), transparent 92%); }
.job-detail-checklist button > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--display-line); border-radius: 50%; color: var(--display-ink); font-size: 1rem; }
.job-detail-checklist strong { min-width: 0; font: 500 clamp(1rem, 1.55vw, 1.32rem)/1.18 Inter, ui-sans-serif, sans-serif; }
.job-detail-checklist li.is-completed strong { color: var(--display-soft); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--display-soft), transparent 52%); }
.job-detail-actions { position: relative; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--display-line); display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr); align-items: center; gap: 12px; }
.display-review-button, .display-finish-button, .display-finish-confirm button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--display-control-border); border-radius: 999px; background: var(--display-control-bg); color: var(--display-ink); padding: 11px 18px; cursor: pointer; font-size: .92rem; transition: opacity .25s ease, transform .25s ease, background .25s ease; }
.display-review-button svg, .display-finish-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.display-review-button:hover, .display-finish-button:hover, .display-finish-confirm button:hover { transform: translateY(-1px); background: var(--display-panel-solid); }
.display-review-button:disabled, .display-finish-button:disabled, .display-finish-confirm button:disabled { opacity: .55; cursor: default; transform: none; }
.display-finish-button { justify-self: end; min-width: min(220px, 100%); }
.display-review-button { justify-self: start; min-width: min(220px, 100%); }
.display-finish-confirm { display: inline-flex; align-items: center; gap: 8px; color: var(--display-soft); font-size: .84rem; }
.display-finish-confirm[hidden] { display: none; }
.display-finish-confirm button:last-child { background: #dcebdd; color: #25492e; border-color: transparent; }
.display-finish-confirm, .job-detail-feedback, .completion-particles { grid-column: 1 / -1; }
.job-detail-feedback { min-height: 1.3em; margin: 0; color: var(--display-soft); font-size: .84rem; }
.job-detail-card.is-completing { animation: complete-card .86s cubic-bezier(.2,.75,.2,1) both; }
.job-detail-card.is-completing::after { content: "✓"; position: absolute; inset: auto clamp(26px, 4vw, 46px) clamp(24px, 4vw, 42px) auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #dcebdd; color: #25492e; font-size: 1.35rem; box-shadow: 0 10px 28px rgba(40, 78, 47, .16); animation: complete-tick .76s ease both; }
.completion-particles { position: absolute; right: clamp(42px, 5vw, 72px); bottom: clamp(42px, 5vw, 70px); pointer-events: none; }
.completion-particles span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #7eb487; opacity: 0; animation: complete-particle .82s ease-out both; rotate: calc(var(--particle-index) * 40deg); transform-origin: 0 0; }
@keyframes detail-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes detail-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes complete-card {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  28% { transform: translateY(-4px) scale(1.006); opacity: 1; }
  100% { transform: translateY(-10px) scale(.985); opacity: 0; }
}
@keyframes complete-tick {
  0% { transform: scale(.78); opacity: 0; }
  40% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes complete-particle {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  30% { opacity: .85; }
  100% { opacity: 0; transform: translate(34px, 0) scale(.9); }
}

.render-overlay { position: fixed; inset: 0; z-index: 10; background: #0b0c0a; color: #f6f5ef; }
.render-overlay[hidden] { display: none; }
.render-stage { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: clamp(18px, 3vw, 42px); padding-bottom: clamp(88px, 12vh, 122px); background: transparent; cursor: pointer; }
.render-stage img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.render-meta { position: absolute; left: clamp(22px, 4vw, 56px); right: clamp(22px, 4vw, 56px); bottom: clamp(20px, 3vh, 38px); display: flex; justify-content: space-between; align-items: end; gap: 30px; text-shadow: 0 1px 12px #000; }
.render-meta p { margin-bottom: 6px; color: #c6c8c1; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(.68rem, 1vw, .85rem); font-weight: 750; }
.render-meta strong { font: 500 clamp(1.25rem, 2.5vw, 2.2rem)/1.1 Georgia, serif; }
.render-meta time { color: #aeb1aa; margin-left: 12px; font-size: .85rem; }
.render-meta .render-status { margin: 8px 0 0; max-width: 42ch; color: #f0d9a7; text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 550; line-height: 1.35; }
.render-actions { display: flex; gap: 8px; }
.render-actions button { border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(12,13,11,.55); backdrop-filter: blur(8px); color: #f6f5ef; padding: 9px 14px; cursor: pointer; font-size: .82rem; }
.render-actions button:disabled { opacity: .7; cursor: default; }

@media (max-width: 900px) {
  .project-panel { place-items: end stretch; padding: max(10px, env(safe-area-inset-top)) 8px 0; }
  .project-panel[hidden] { display: none; }
  .project-panel-backdrop { display: block; }
  .project-panel form { width: 100%; height: min(96dvh, 900px); max-height: none; border: 1px solid color-mix(in srgb, var(--line), transparent 24%); border-bottom: 0; border-radius: 18px 18px 0 0; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); box-shadow: 0 -20px 70px rgba(20,21,18,.18); }
  .sheet-meta-grid, .note-form.is-creating .sheet-meta-grid { grid-template-columns: minmax(0, 1fr) minmax(132px, .62fr); }
  .sheet-grid { grid-template-columns: 1fr; row-gap: 12px; }
  .project-sheet-head { padding-right: 48px; }
}

@media (max-width: 760px) {
  .project-panel form { overflow: auto; }
  .sheet-meta-grid { grid-template-columns: 1fr; }
  .sheet-lower-grid { display: block; flex: none; height: auto; min-height: 0; max-height: none; overflow: visible; }
  .sheet-column { display: block; overflow: visible; min-height: 0; }
  .resources-editor, .checklist-editor, .comments-editor, .history-editor { margin-top: 14px; overflow: visible; }
  .checklist-boards, .comments-list { overflow: visible; max-height: none; padding-right: 0; }
  .comments-editor { display: block; min-height: 0; }
  .history-editor { display: grid; overflow: hidden; min-height: 0; }
  .history-editor.is-expanded { min-height: 0; }
  .history-list { max-height: min(220px, 32dvh); padding-right: 12px; }
}

@media (max-width: 720px) {
  .segmented-control { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .segmented-control span { min-height: 36px; }
}

@media (max-width: 640px) {
  .shell { width: min(100% - 22px, 920px); padding-top: 18px; }
  .topbar { padding-bottom: 30px; flex-wrap: wrap; gap: 12px; }
  .ambient-meta { order: 3; width: 100%; margin-left: 0; }
  nav { width: 100%; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  .view-link { flex: 0 0 auto; }
  .intro { align-items: stretch; flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .intro-actions { width: 100%; display: block; }
  .intro .primary, .intro .secondary { width: 100%; padding: 12px; }
  .completed-tools { grid-template-columns: 1fr; gap: 9px; margin: -4px 0 14px; }
  .completed-search input { width: 100%; }
  .job-card, .job-card.first { grid-template-columns: 30px minmax(0, 1fr); padding: 0; margin: 0; min-height: 74px; align-items: start; }
  .job-card.first { min-height: 82px; padding: 0 6px; }
  .job-actions { grid-column: 2; justify-content: flex-start; padding: 0 0 10px; gap: 4px; }
  .drag-handle { opacity: .28; transform: none; width: 34px; height: 34px; margin-left: 0; }
  .job-card:active .drag-handle, .job-card.dragging .drag-handle { opacity: 1; }
  .quick-action-icon { width: 34px; min-width: 34px; padding: 7px; justify-content: center; }
  .quick-action-icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
  .text-button { font-size: .8rem; padding: 7px 8px; }
  .job-copy { padding: 11px 8px 4px 0; }
  .job-copy strong { font-size: clamp(1.02rem, 6vw, 1.26rem); }
  .job-card.first .job-copy strong { font-size: clamp(1.12rem, 6.5vw, 1.42rem); }
  .job-copy span { font-size: .86rem; }
  .project-panel form { padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .note-close { top: 10px; right: 10px; }
  .project-sheet-head { margin-bottom: 10px; }
  .project-sheet-head h2 { font-size: clamp(1.5rem, 7.5vw, 2.2rem); }
  label { margin: 9px 0; font-size: .9rem; }
  input, textarea { margin-top: 4px; padding: 10px 11px; }
  .sheet-grid, .resource-row { grid-template-columns: 1fr; gap: 10px; }
  .segmented-field { margin-top: 2px; }
  .segmented-control { gap: 5px; padding: 4px; }
  .segmented-control label { font-size: .82rem; }
  .segmented-control span { padding: 0 8px; }
  .resource-row { padding: 8px 0; border-top: 1px solid var(--line); }
  .checklist-row { grid-template-columns: 26px 26px minmax(0, 1fr) 38px; min-height: 42px; }
  .checklist-delete { width: 38px; height: 38px; opacity: .62; }
  textarea { min-height: 104px; }
  .form-error { margin-bottom: 4px; }
  .recent-activity li { grid-template-columns: 42px minmax(90px, 1fr) auto; }
  .recent-activity li img { width: 42px; height: 34px; }
  .recent-activity em { grid-column: 3; }
  .render-notice { right: 12px; bottom: 12px; width: calc(100vw - 24px); grid-template-columns: 1fr; }
  .render-notice > img { height: min(40vh, 230px); }
  .render-notice-copy { padding: 19px; }
  .display-shell { padding-left: 22px; padding-right: 22px; padding-bottom: calc(var(--display-footer-space) + 8px); }
  .display-header { margin-bottom: 18px; }
  .display-ambient { order: 3; width: 100%; margin-left: 0; justify-content: flex-end; font-size: .84rem; }
  .display-item { grid-template-columns: 52px 1fr; }
  .display-item-button { grid-template-columns: 52px minmax(0, 1fr); }
  .display-progress-toggle { grid-column: 2; justify-self: start; margin-top: 8px; }
  .display-page h1 { margin-bottom: 18px; }
  .display-item strong, .display-item.current strong { max-width: 12ch; }
  .render-meta { align-items: start; flex-direction: column; gap: 14px; }
  .render-stage { padding-bottom: 150px; }
  .admin-shell { width: min(100% - 24px, 1180px); padding-top: 12px; padding-bottom: 96px; }
  .admin-access { min-height: calc(100dvh - 24px); }
  .admin-access-card { padding: 20px; }
  .admin-header { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; padding: 11px; }
  .admin-title-block .brand { margin-bottom: 3px; }
  .admin-title-block p { font-size: .78rem; }
  .admin-header-status { justify-content: flex-start; }
  .admin-header-actions { position: fixed; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 20; display: grid; grid-template-columns: 1fr auto auto; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface), transparent 2%); padding: 9px; box-shadow: 0 12px 34px rgba(30, 28, 23, .14); }
  .admin-save-state { align-self: center; }
  .admin-layout { grid-template-columns: 1fr; gap: 0; }
  .admin-sidebar { display: none; }
  .admin-mobile-nav { display: block; }
  .admin-panel { padding: 14px; }
  .admin-grid, .admin-control-grid { grid-template-columns: 1fr; gap: 0; }
  .module-card-head { align-items: stretch; flex-direction: column; }
  .module-toggle { justify-content: space-between; }
  .admin-metrics { grid-template-columns: 1fr; }
  .backup-toolbar { align-items: stretch; flex-direction: column; }
  .backup-toolbar button { width: 100%; }
  .renderfeed-control-head { align-items: stretch; flex-direction: column; }
  .admin-choice label, .admin-switches label { min-height: 42px; }
  .system-grid { grid-template-columns: 1fr; }
  .system-panel-head { align-items: stretch; flex-direction: column; }
  .diagnostic-summary { grid-template-columns: 1fr; }
  .diagnostics-actions { justify-content: stretch; }
  .diagnostics-actions button { flex: 1; }
  .diagnostic-block-head { align-items: stretch; flex-direction: column; }
  .diagnostic-render-card { grid-template-columns: 1fr; }
  .diagnostic-render-card div { grid-template-columns: 1fr; gap: 3px; }
}

@media (orientation: portrait) {
  .display-shell {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: calc(var(--display-footer-space) + 10px);
    width: min(94vw, 860px);
    margin: 0 auto;
  }
  .display-page h1 { font-size: clamp(1.32rem, 4.8vw, 2.28rem); margin-bottom: clamp(14px, 2.2vh, 28px); }
  .display-item-button { grid-template-columns: clamp(38px, 8vw, 58px) minmax(0, 1fr); gap: 10px; padding: clamp(14px, 1.8vh, 22px) 0; }
  .display-progress-toggle { grid-column: 2; justify-self: start; margin-top: 8px; }
  .display-item strong,
  .display-item.current strong { max-width: none; font-size: clamp(1.34rem, 5.2vw, 2.36rem); line-height: 1.07; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .display-item p { max-width: none; font-size: clamp(.86rem, 2.7vw, 1.12rem); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .display-item.next { opacity: .86; }
  .job-detail-layer { padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .job-detail-card { width: min(94vw, 780px); max-height: 86dvh; padding: clamp(24px, 5vw, 42px); }
  .job-detail-card h2 { font-size: clamp(2rem, 7vw, 3.8rem); }
  .job-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (orientation: portrait) and (max-width: 520px) {
  .display-shell { width: min(94vw, 420px); padding-left: 12px; padding-right: 12px; }
  .display-brand span { display: none; }
  .display-item-button { grid-template-columns: 34px 1fr; }
  .display-item strong,
  .display-item.current strong { font-size: clamp(1.2rem, 7vw, 1.8rem); }
  .display-item p { font-size: .9rem; }
  .job-detail-actions { grid-template-columns: 1fr; }
  .job-detail-meta { grid-template-columns: 1fr; }
  .display-review-button, .display-finish-button { justify-self: stretch; width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .display-item-button,
  .display-progress-toggle span,
  .checklist-row,
  .comment-card,
  .project-panel form,
  .job-detail-card { transform: none !important; }
  .display-item-button::before { transform: none !important; }
  .job-detail-card.is-completing { animation: none; opacity: 0; }
  .job-detail-card.is-completing::after { animation: none; }
  .completion-particles { display: none; }
}