:root { color-scheme: light; font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f7f8; color: #172b33; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: .6rem; background: #135c61; color: white; padding: .65rem 1rem; font-weight: 650; }
button:hover { background: #0f484c; }
button.secondary { background: #e8eef0; color: #24444a; }
button.secondary:hover { background: #d6e1e4; }
button:disabled { opacity: .55; cursor: not-allowed; }
input, textarea, select { width: 100%; border: 1px solid #c7d2d7; border-radius: .55rem; padding: .62rem .7rem; background: white; color: #172b33; }
input:focus, textarea:focus, select:focus { outline: 2px solid #58a6a7; outline-offset: 1px; }
textarea { resize: vertical; }
label { font-size: .9rem; font-weight: 650; margin-top: .55rem; }
form { display: grid; gap: .4rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 1.8rem; line-height: 1.2; margin-bottom: .45rem; }
h2 { font-size: 1.1rem; margin-bottom: .85rem; }
h3 { font-size: 1rem; margin-bottom: .55rem; }
p { color: #567079; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #123c42; color: white; padding: .85rem max(1rem, calc((100vw - 1200px)/2)); }
.topbar strong { font-size: 1.18rem; }
.subtitle { margin-left: .8rem; font-size: .82rem; opacity: .75; }
.account { display: flex; align-items: center; gap: .7rem; }
.account span { font-size: .86rem; }
main { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem; }
.panel { border: 1px solid #dde5e8; background: white; border-radius: .9rem; padding: 1.2rem; box-shadow: 0 2px 8px #123c4210; }
.login-panel { max-width: 420px; margin: 8vh auto; }
.login-panel button { margin-top: .6rem; }
.overview { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.overview p { margin-bottom: 0; }
.eyebrow { color: #14757b; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.tabs button { background: #edf2f3; color: #28525a; }
.tabs button.active { background: #135c61; color: white; }
.columns { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.detail-column { display: grid; gap: 1rem; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; }
.count { background: #e9f2f1; color: #135c61; border-radius: 2rem; padding: .1rem .55rem; font-size: .8rem; }
.task-list { display: grid; gap: .5rem; margin-top: .8rem; max-height: 70vh; overflow-y: auto; }
.task-card { width: 100%; text-align: left; background: #f8fafb; color: #223a41; border: 1px solid #e1e8eb; padding: .8rem; }
.task-card:hover, .task-card.selected { background: #eaf4f3; border-color: #7eadaa; }
.task-card strong { display: block; line-height: 1.25; }
.task-meta { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .5rem; font-size: .78rem; color: #60757d; }
.pill { display: inline-block; border-radius: 2rem; padding: .12rem .55rem; background: #e8eef0; color: #35555c; font-size: .78rem; white-space: nowrap; }
.pill.in_progress { background: #d9ecfb; color: #17527b; }
.pill.review { background: #fbebd5; color: #79541d; }
.pill.blocked { background: #fbe2e0; color: #8f322d; }
.pill.done { background: #dff1df; color: #316434; }
.detail-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.detail-header h2 { margin-bottom: .25rem; font-size: 1.32rem; }
.detail-body { white-space: pre-wrap; color: #2e464d; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 1rem 0; }
.field-value { display: block; color: #2c454b; font-size: .94rem; }
.field-label { display: block; color: #70858c; font-size: .73rem; text-transform: uppercase; letter-spacing: .06em; }
.update-list { display: grid; gap: .6rem; margin-bottom: 1rem; }
.update { border-left: 3px solid #d6e4e5; padding: .15rem .65rem; }
.update strong { font-size: .82rem; }
.update time { color: #70858c; font-size: .76rem; margin-left: .4rem; }
.update p { color: #30484f; white-space: pre-wrap; margin: .3rem 0 0; }
.actions { display: flex; align-items: end; gap: .6rem; flex-wrap: wrap; }
.actions > * { flex: 1; }
.actions button { flex: 0 0 auto; }
.empty { color: #7d9095; margin: 0; padding: 1.2rem .2rem; }
.message { min-height: 1.4rem; margin: 1rem 0; color: #9a361e; font-weight: 600; }
.message.ok { color: #236942; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px) { .overview, .topbar { align-items: start; flex-direction: column; } .columns { grid-template-columns: 1fr; } .task-list { max-height: 38vh; } .detail-grid { grid-template-columns: 1fr; } }