:root { --navy:#0e1c2f; --ink:#172638; --muted:#647386; --canvas:#f3f6f8; --surface:#fff; --line:#dce3e9; --blue:#1768ac; --blue-soft:#e3f0fa; --amber:#c7830b; --amber-soft:#fff1d9; --green:#287a59; --green-soft:#e3f4eb; --danger:#b02a37; --radius:10px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.topbar { align-items:center; background:var(--navy); color:#fff; display:flex; justify-content:space-between; padding:1.5rem clamp(1rem,4vw,4rem); }
.user-controls { align-items:center; display:flex; gap:1rem; }.user-controls span { color:#d7e6f3; font-size:.8rem; }
.eyebrow { color:#9bc4e4; font-size:.75rem; font-weight:700; letter-spacing:.12em; margin:0 0 .35rem; }
h1 { font-size:clamp(1.6rem,4vw,2.25rem); line-height:1.1; margin:0; }
main { margin:0 auto; max-width:1600px; padding:clamp(1rem,3vw,2.5rem); }
.login-shell[hidden], #app[hidden] { display:none !important; }
.login-shell { align-items:center; display:flex; justify-content:center; min-height:calc(100vh - 108px); }.login-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 22px #152a4212; max-width:430px; padding:2rem; width:100%; }.login-card h2 { margin:.3rem 0 .7rem; }.login-card p:not(.eyebrow) { color:var(--muted); line-height:1.5; }.login-card #google-signin { margin-top:1.25rem; }.board-controls { align-items:end; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; padding:1rem; }.board-controls h2 { font-size:1.1rem; margin:.15rem 0 0; }.board-controls .eyebrow { color:var(--muted); margin:0; }.board-controls label { margin:0; min-width:140px; }.history-banner { background:var(--blue-soft); border-left:4px solid var(--blue); color:var(--ink); margin:.75rem 0; padding:.75rem 1rem; }
.board { align-items:start; display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.column { background:#eaf0f4; border:1px solid var(--line); border-radius:var(--radius); min-height:calc(100vh - 175px); padding:.9rem; }
.column > header { border-bottom:1px solid var(--line); margin-bottom:.8rem; padding:0 .2rem .75rem; }
.column h2 { align-items:center; display:flex; font-size:.86rem; gap:.5rem; letter-spacing:.06em; margin:0; }
.column h2 span { align-items:center; background:#d6e0e8; border-radius:999px; display:inline-flex; font-size:.7rem; height:1.3rem; justify-content:center; letter-spacing:0; min-width:1.3rem; }
.column p { color:var(--muted); font-size:.82rem; margin:.35rem 0 0; }
.todo h2 { color:var(--blue); }.progress h2 { color:var(--amber); }.done h2 { color:var(--green); }
.task-list { display:grid; gap:.7rem; min-height:3rem; }
.task-list.drag-over { outline:2px dashed var(--blue); outline-offset:3px; }
.drop-marker { align-items:center; background:var(--blue-soft); border:2px dashed var(--blue); border-radius:7px; color:var(--blue); display:flex; font-size:.82rem; font-weight:700; justify-content:center; min-height:4.25rem; padding:.75rem; }
.task { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:7px; box-shadow:0 1px 2px #152a4212; min-width:0; padding:.85rem; }
.task[data-status="IN_PROGRESS"] { border-left-color:var(--amber); }.task[data-status="DONE"] { border-left-color:var(--green); }
.task.urgent { background:#fff9eb; border-color:#e8bc62; border-left-color:var(--amber); }.task.overdue { background:#fff0f0; border-color:#dc8590; border-left-color:var(--danger); }
.task[draggable="true"] { cursor:grab; }.task.dragging { opacity:.45; }
.task h3 { font-size:.98rem; line-height:1.35; margin:0; overflow-wrap:anywhere; }.task .notes { color:#465667; font-size:.84rem; line-height:1.4; margin:.55rem 0 .75rem; overflow-wrap:anywhere; white-space:pre-line; word-break:break-word; }
.completion-notes { background:var(--green-soft); border-left:3px solid var(--green); color:#245b45; font-size:.8rem; line-height:1.4; margin:.6rem 0 .75rem; overflow-wrap:anywhere; padding:.5rem .6rem; white-space:pre-line; word-break:break-word; }
.project-tag { background:var(--blue-soft); border-radius:999px; color:var(--blue); display:inline-block; font-size:.72rem; font-weight:700; margin:.55rem 0 0; padding:.22rem .55rem; }
.task-footer { align-items:center; display:flex; gap:.45rem; justify-content:space-between; }.due { color:var(--muted); font-size:.75rem; }.due.urgent { color:#9b6200; font-weight:700; }.due.overdue { color:var(--danger); font-weight:700; }
.actions { display:flex; gap:.35rem; }.text-button { background:transparent; border:0; color:var(--blue); font-size:.78rem; font-weight:700; padding:.25rem; }.danger { color:var(--danger); }
.move { border:1px solid var(--line); border-radius:5px; color:var(--ink); font-size:.72rem; margin-top:.75rem; max-width:100%; padding:.35rem; width:100%; }
.empty { border:1px dashed #b5c1cc; border-radius:6px; color:var(--muted); font-size:.82rem; padding:1rem; text-align:center; }
.primary,.secondary { border-radius:6px; font-weight:700; padding:.6rem .85rem; }.primary { background:var(--blue); border:1px solid var(--blue); color:#fff; }.primary:hover { background:#11568e; }.secondary { background:#fff; border:1px solid #b9c6d0; color:var(--ink); }
dialog { border:0; border-radius:var(--radius); box-shadow:0 20px 60px #08142355; color:var(--ink); max-width:560px; padding:0; width:calc(100% - 2rem); }dialog::backdrop { background:#0a1626aa; }dialog form { display:grid; gap:.5rem; padding:1.25rem; }.dialog-header { align-items:center; display:flex; justify-content:space-between; margin-bottom:.4rem; }.dialog-header h2 { margin:0; }.icon-button { background:transparent; border:0; color:var(--muted); font-size:1.6rem; line-height:1; }.form-grid { display:grid; gap:1rem; grid-template-columns:1fr 1fr; }label { font-size:.84rem; font-weight:700; margin-top:.5rem; }input,textarea,select { border:1px solid #aebdca; border-radius:6px; padding:.55rem; width:100%; }textarea { resize:vertical; }.dialog-actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:.7rem; }.form-error { color:var(--danger); font-size:.84rem; margin:0; min-height:1.2rem; }.notice { bottom:1rem; margin:0; max-width:520px; position:fixed; right:1rem; z-index:2; }.notice:not(:empty) { background:var(--navy); border-radius:6px; box-shadow:0 4px 12px #08142333; color:#fff; padding:.75rem 1rem; }
.archived-section { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-top:1rem; padding:1rem; }.archived-heading { align-items:center; display:flex; justify-content:space-between; gap:1rem; }.archived-heading .eyebrow { color:var(--muted); margin:0; }.archived-heading h2 { font-size:1.05rem; margin:.2rem 0 0; }.archived-tasks { display:grid; gap:.65rem; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); margin-top:1rem; }.archived-task { background:#f7f9fa; border:1px solid var(--line); border-radius:7px; padding:.8rem; }.archived-task h3 { font-size:.9rem; margin:0; }.archived-task p { color:var(--muted); font-size:.8rem; margin:.4rem 0 0; }
.loading { align-items:center; background:#0e1c2fe8; border-radius:999px; bottom:1rem; box-shadow:0 4px 14px #08142355; color:#fff; display:flex; font-size:.86rem; font-weight:700; gap:.65rem; left:50%; padding:.7rem 1rem; position:fixed; transform:translateX(-50%); z-index:5; }.loading[hidden] { display:none; }.loading-spinner { animation:spin .8s linear infinite; border:3px solid #ffffff66; border-radius:50%; border-top-color:#fff; display:block; height:1.1rem; width:1.1rem; }@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width: 900px) { .board { grid-template-columns:1fr; }.column { min-height:0; }.topbar { align-items:flex-start; gap:1rem; flex-direction:column; }.form-grid { grid-template-columns:1fr; gap:0; }.board-controls { align-items:stretch; flex-direction:column; }.user-controls { align-items:flex-start; flex-direction:column; } }
@media (max-width: 400px) { .dialog-actions { flex-direction:column-reverse; }.dialog-actions button { width:100%; } }