* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #f4f2fb; --panel: #ffffff; --ink: #17131f; --muted: #6f6a7d;
  --brand: #7c5cff; --dark: #16112b; --dark-ink: #e9e5f8;
  --q1: #e5484d; --q2: #4f76ff; --q3: #d8a410; --q4: #8a8496;
  --radius: 12px;
}
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
.hidden { display: none !important; }

#gate { position: fixed; inset: 0; background: var(--dark); color: var(--dark-ink); display: flex; align-items: center; justify-content: center; }
.gate-box { text-align: center; display: grid; gap: 12px; }
.gate-box input, .gate-box button { padding: 10px 14px; border-radius: 8px; border: 1px solid #443d63; font-size: 15px; }
.gate-box button { background: var(--brand); color: white; border: none; cursor: pointer; }
#gate-error { color: #ff8f93; }

header { background: var(--dark); color: var(--dark-ink); padding: 18px 24px; border-radius: 0 0 var(--radius) var(--radius); display: grid; gap: 10px; }
.brand { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 6px; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.controls select, .controls button { padding: 8px 12px; border-radius: 8px; border: none; font-size: 14px; cursor: pointer; }
.controls button { background: var(--brand); color: white; }
.controls button.danger { background: transparent; border: 1px solid #6a5fa0; color: var(--dark-ink); }
#counts { font-size: 13px; opacity: .85; }
#warning { background: #4a1d20; color: #ffb4b7; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
#status-banner { background: #4a3d1d; color: #ffe2a1; padding: 8px 12px; border-radius: 8px; font-size: 13px; }

#explainer { font-size: 13px; }
#explainer summary { cursor: pointer; opacity: .85; }
#explainer .explainer-body { background: #221b3d; border-radius: 8px; padding: 12px 16px; margin-top: 8px; display: grid; gap: 8px; line-height: 1.5; }
#explainer ol { padding-left: 20px; display: grid; gap: 4px; }
#explainer .note { opacity: .7; font-size: 12px; }
#explainer .c-q1 { color: #ff8f93; }
#explainer .c-q2 { color: #9db4ff; }
#explainer .c-q3 { color: #f0cd63; }
#explainer .c-q4 { color: #b9b3c9; }

main { display: grid; grid-template-columns: 280px 1fr; gap: 16px; padding: 16px 24px; align-items: start; }
#tray, .quadrant { background: var(--panel); border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 3px rgba(23,19,31,.08); }
#tray h2, .quadrant h2 { font-size: 14px; margin-bottom: 10px; }
.quadrant h2 small { color: var(--muted); font-weight: normal; margin-left: 4px; }
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quadrant[data-quadrant="q1"] h2 { color: var(--q1); }
.quadrant[data-quadrant="q2"] h2 { color: var(--q2); }
.quadrant[data-quadrant="q3"] h2 { color: var(--q3); }
.quadrant[data-quadrant="q4"] h2 { color: var(--q4); }

#add-form { display: grid; gap: 6px; margin-bottom: 12px; }
#add-form input, #add-form select { padding: 8px 10px; border: 1px solid #ddd7ee; border-radius: 8px; font-size: 13px; background: white; color: var(--ink); width: 100%; }
#add-form .field-label { font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
#add-form .form-hint { font-size: 11px; color: var(--muted); line-height: 1.4; }
#add-form button { padding: 8px; border: none; border-radius: 8px; background: var(--brand); color: white; cursor: pointer; }

.cards { display: grid; gap: 8px; min-height: 60px; padding-bottom: 20px; }
.cards.drag-over { outline: 2px dashed var(--brand); outline-offset: 4px; border-radius: 8px; }
.card { background: #faf9ff; border: 1px solid #e6e0f5; border-radius: 10px; padding: 10px 12px; cursor: grab; font-size: 13px; display: grid; gap: 6px; }
.card.dragging { opacity: .4; }
.card .title { font-weight: 600; }
.card.done .title { text-decoration: line-through; color: var(--muted); }
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #ece7fb; color: #4f3fa8; }
.chip.status { background: #e2ebff; color: #2b4bb8; }
.chip.manual { background: #e7f5e9; color: #2c7a39; }
.chip.priority { background: #f0ede5; color: #6b6250; }
.chip.priority.hot { background: #fde5e6; color: #b3262c; }
.chip.due { background: #eef2f0; color: #4a5a52; }
.chip.due.overdue { background: #fde5e6; color: #b3262c; font-weight: 600; }
.chip.tier.tier-0 { background: #fde5e6; color: #b3262c; }
.chip.tier.tier-1 { background: #e2ebff; color: #2b4bb8; }
.chip.tier.tier-2 { background: #fdf3d7; color: #8a6d0d; }
.chip.tier.tier-3 { background: #ece7fb; color: #4f3fa8; }
.card a { color: var(--brand); font-size: 12px; text-decoration: none; }
.card .dismiss { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; justify-self: end; }

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 1fr; }
}