:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f6f7fb;
  font-synthesis: none;
  --header-height: 92px;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .category-panel::-webkit-scrollbar, .side-drawer::-webkit-scrollbar, .task-modal::-webkit-scrollbar { display: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100svh; background: #f6f7fb; }
.app-header { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e7eaf0; }
.app-header h1 { margin: 2px 0 0; font-size: clamp(1.35rem,2vw,1.75rem); letter-spacing: -.04em; }
.eyebrow { color: #8a91a2; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.task-total { color: #70788a; font-size: .9rem; }
.primary-button,.secondary-button,.danger-button,.icon-button { border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; }
.primary-button { color: #fff; background: #1e2a44; box-shadow: 0 7px 18px rgba(30,42,68,.18); }
.primary-button--full { width: 100%; }
.secondary-button { color: #26324a; background: #edf0f5; }
.danger-button { color: #c84242; background: #fff0f0; }
.icon-button { width: 38px; height: 38px; padding: 0; font-size: 1.5rem; color: #667086; background: #f0f2f6; }

.priority-matrix { height: calc(100svh - var(--header-height)); min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 1px; background: #dfe3eb; }
.category-panel { --accent:#64748b; --wash:#f0f3f6; min-width:0; min-height:0; overflow:auto; scrollbar-width:none; padding:20px 22px; background:var(--wash); }
.category-panel--coral { --accent:#df5c57; --wash:#fff6f4; }
.category-panel--blue { --accent:#3979cf; --wash:#f3f8ff; }
.category-panel--violet { --accent:#7b5bc7; --wash:#f8f5ff; }
.category-panel--slate { --accent:#66758c; --wash:#f5f7f9; }
.category-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.category-title { min-width:0; display:flex; align-items:flex-start; gap:10px; padding:0; color:inherit; text-align:left; background:none; border:0; }
.category-dot { width:10px; height:10px; flex:0 0 10px; margin-top:7px; border-radius:50%; background:var(--accent); }
.category-title strong { display:block; font-size:1rem; }
.category-title small { display:block; margin-top:3px; color:#7b8292; font-size:.78rem; }
.category-arrow { margin-top:1px; color:var(--accent); opacity:0; transform:translateX(-4px); transition:160ms ease; }
.category-title:hover .category-arrow { opacity:1; transform:translateX(0); }
.category-count,.drawer-count { min-width:30px; padding:5px 9px; border-radius:999px; color:var(--accent); text-align:center; font-size:.78rem; font-weight:700; background:#fff; }
.task-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.task-card { min-width:0; display:flex; align-items:flex-start; gap:10px; padding:12px; color:#1f293d; background:#fff; border:1px solid rgba(26,38,61,.07); border-radius:12px; box-shadow:0 4px 12px rgba(25,36,56,.05); cursor:grab; transition:transform 150ms ease,box-shadow 150ms ease; }
.task-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(25,36,56,.09); }
.task-check { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center; margin-top:1px; padding:0; color:#fff; font-size:.75rem; font-weight:800; background:#fff; border:1.5px solid #bcc3cf; border-radius:6px; }
.task-check.is-checked { background:#2c9b66; border-color:#2c9b66; }
.task-content { min-width:0; flex:1; padding:0; color:inherit; text-align:left; background:transparent; border:0; }
.task-name { display:block; font-size:.88rem; font-weight:700; line-height:1.35; }
.task-project { display:flex; align-items:center; gap:6px; margin-top:11px; color:#8a91a0; font-size:.75rem; }
.task-card.is-completed { opacity:.68; }
.task-card.is-completed .task-name { color:#737b8a; text-decoration:line-through; }
.add-card-button { display:flex; align-items:center; gap:7px; margin-top:12px; padding:8px 4px; color:var(--accent); font-weight:700; background:none; border:0; }

.drawer-backdrop,.modal-backdrop { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:0; background:rgba(21,29,45,.38); border:0; transition:opacity 180ms ease; }
.drawer-backdrop.is-open { pointer-events:auto; opacity:1; }
.side-drawer { position:fixed; top:0; right:0; z-index:21; width:min(470px,100%); height:100svh; overflow-y:auto; scrollbar-width:none; background:#fff; box-shadow:-18px 0 50px rgba(17,25,40,.18); transform:translateX(105%); transition:transform 220ms ease; }
.side-drawer.is-open { transform:translateX(0); }
.overlay-topbar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:rgba(255,255,255,.96); border-bottom:1px solid #eceef3; }
.drawer-content,.modal-content { padding:24px; }
.drawer-heading,.modal-heading { margin-bottom:22px; }
.drawer-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.drawer-heading h2,.modal-heading h2 { margin:0; font-size:1.5rem; line-height:1.25; letter-spacing:-.035em; }
.drawer-heading p,.modal-heading p { margin:7px 0 0; color:#737c8e; line-height:1.6; }
.drawer-task-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.drawer-count { color:#3e4c66; background:#f0f2f6; }

.modal-layer { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; pointer-events:none; opacity:0; transition:opacity 180ms ease; }
.modal-layer.is-open { pointer-events:auto; opacity:1; }
.modal-layer .modal-backdrop { position:absolute; z-index:0; pointer-events:auto; opacity:1; }
.task-modal { position:relative; z-index:1; width:min(640px,100%); max-height:calc(100svh - 40px); overflow-y:auto; scrollbar-width:none; background:#fff; border-radius:18px; box-shadow:0 28px 80px rgba(17,25,40,.3); transform:translateY(12px) scale(.985); transition:transform 180ms ease; }
.modal-layer.is-open .task-modal { transform:translateY(0) scale(1); }
.status-pill { display:inline-flex; margin-bottom:16px; padding:6px 10px; color:#315f9b; font-size:.75rem; font-weight:700; background:#eaf3ff; border-radius:999px; }
.completed-title { color:#737b8a; text-decoration:line-through; }
.details-list { margin:24px 0; }
.details-list div { display:grid; grid-template-columns:120px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid #eceef3; }
.details-list dt { color:#8a91a0; font-size:.82rem; }
.details-list dd { margin:0; color:#2d374d; font-weight:700; }
.complete-button { width:100%; display:flex; align-items:center; justify-content:center; gap:9px; margin:4px 0 22px; padding:12px; color:#3f4a60; font-weight:700; background:#f3f5f8; border:1px solid #e0e4eb; border-radius:10px; }
.complete-button span { width:20px; height:20px; display:grid; place-items:center; color:#fff; background:#fff; border:1.5px solid #aeb6c5; border-radius:6px; }
.complete-button.is-complete { color:#22754e; background:#edf9f3; border-color:#ccebdc; }
.complete-button.is-complete span { background:#2c9b66; border-color:#2c9b66; }
.modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:22px; }
.task-form { display:grid; gap:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-grid label { display:grid; gap:7px; color:#4d576b; font-size:.82rem; font-weight:700; }
.form-wide { grid-column:1/-1; }
.form-grid input,.form-grid textarea,.form-grid select { width:100%; padding:12px 13px; color:#1f293d; background:#fafbfc; border:1px solid #dfe3ea; border-radius:10px; outline:none; }
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus { border-color:#7589ab; box-shadow:0 0 0 3px rgba(73,99,139,.12); }
.form-grid textarea { resize:vertical; }

@media (max-width:760px) {
  :root { --header-height:auto; }
  .app-header { min-height:0; padding:14px 16px; }
  .app-header .eyebrow,.task-total { display:none; }
  .priority-matrix { height:auto; min-height:0; grid-template-columns:1fr; grid-template-rows:none; }
  .category-panel { min-height:100svh; padding:18px 16px; overflow:visible; }
  .task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px) {
  .app-header h1 { font-size:1.15rem; }
  .primary-button { padding:9px 12px; }
  .task-grid,.drawer-task-list,.form-grid { grid-template-columns:1fr; }
  .form-wide { grid-column:auto; }
  .drawer-content,.modal-content { padding:20px 18px; }
  .modal-layer { padding:12px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; } }