:root { --ink:#161411; --paper:#f4f0e6; --sand:#e4dac9; --accent:#ed6a4c; --green:#5a9c72; --gold:#d5a94b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#d9d2c4; font-family:"IBM Plex Sans Thai",sans-serif; }
button, input, select, textarea { font:inherit; }
.planner-shell { width:min(1180px, calc(100% - 32px)); margin:32px auto; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.7fr); box-shadow:10px 12px 0 #2a2721; border:2px solid var(--ink); background:var(--paper); }
.board { border-right:2px dashed var(--ink); padding:28px; min-width:0; }
.masthead { position:relative; min-height:155px; padding:20px 24px; background:var(--ink); color:var(--paper); overflow:hidden; }
.masthead:after { content:""; position:absolute; width:200px; height:200px; border:2px solid var(--paper); border-radius:50%; right:-70px; top:-82px; opacity:.75; }
.masthead p { margin:0 0 8px; font:600 11px "Space Grotesk",sans-serif; letter-spacing:.14em; color:#d9d2c4; }
h1,h2,p { margin-top:0; } h1 { font:700 clamp(38px,5vw,58px)/.78 "Space Grotesk",sans-serif; letter-spacing:-.07em; margin-bottom:0; position:relative; z-index:1; }
.add-button { position:absolute; right:20px; bottom:20px; z-index:1; border:2px solid var(--paper); padding:9px 12px; color:var(--ink); background:var(--paper); font-weight:700; cursor:pointer; }
.add-button:hover,.save-button:hover { background:var(--accent); color:white; }
.summary { display:grid; grid-template-columns:repeat(3,1fr); margin:20px 0; border:2px solid var(--ink); }
.summary div { padding:10px 14px; border-right:2px solid var(--ink); } .summary div:last-child { border:0; } .summary span { display:block; font:700 28px/1 "Space Grotesk",sans-serif; } .summary small { font-size:12px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 10px; } .section-heading h2 { margin:0; font:700 19px "Space Grotesk",sans-serif; letter-spacing:-.04em; } .section-heading span { font-size:12px; color:#756e62; }
select { padding:6px 8px; border:1.5px solid var(--ink); background:var(--paper); }
.task-table-wrap { overflow-x:auto; border:2px solid var(--ink); } table { border-collapse:collapse; width:100%; min-width:620px; } th { font-size:11px; text-align:left; padding:9px; border-bottom:2px solid var(--ink); } td { padding:10px 9px; border-bottom:1.5px solid var(--ink); font-size:13px; } tbody tr:last-child td { border-bottom:0; } .date-cell { font:600 12px "Space Grotesk",sans-serif; white-space:nowrap; } .priority { font-size:11px; font-weight:600; white-space:nowrap; } .priority:before { content:""; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--green); } .priority.high:before { background:var(--accent); } .priority.medium:before { background:var(--gold); }
.status-button { border:1.5px solid var(--ink); padding:5px 8px; background:transparent; font-size:11px; cursor:pointer; white-space:nowrap; } .status-button:hover { background:var(--ink); color:var(--paper); }.delete-button { border:0; background:none; cursor:pointer; font-size:17px; }
textarea { width:100%; min-height:78px; resize:vertical; border:2px solid var(--ink); padding:10px; background:#fbf8f0; font-size:13px; }
.calendar-panel { padding:28px 22px; background:var(--sand); }.calendar-top p { margin:0 0 20px; font:600 11px "Space Grotesk",sans-serif; letter-spacing:.11em; }.month-controls { display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--ink); padding-bottom:13px; }.month-controls h2 { margin:0; font:700 19px "Space Grotesk",sans-serif; }.month-controls button { border:0; background:none; cursor:pointer; font-size:20px; }
.weekday-row,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; }.weekday-row { padding:18px 0 8px; font-size:11px; font-weight:700; }.calendar-grid { gap:4px; }.day { height:38px; border:1px solid transparent; background:none; cursor:pointer; position:relative; }.day:hover { border-color:var(--ink); }.day.muted { color:#999184; }.day.today { border:1.5px solid var(--ink); font-weight:700; }.day.selected { background:var(--ink); color:var(--paper); }.day.has-task:after { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); position:absolute; bottom:5px; left:calc(50% - 2px); }.day.selected:after { background:var(--paper); }.legend { display:flex; flex-wrap:wrap; gap:13px; padding-top:26px; font-size:11px; }.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; background:var(--green); }.dot.high { background:var(--accent); }.dot.medium { background:var(--gold); }.selected-date { margin-top:26px; border-top:2px solid var(--ink); padding-top:14px; font-size:13px; line-height:1.55; }
dialog { width:min(440px,calc(100% - 28px)); border:2px solid var(--ink); padding:0; background:var(--paper); box-shadow:8px 8px 0 var(--ink); }dialog::backdrop { background:rgba(22,20,17,.55); }dialog form { padding:22px; }.dialog-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }.dialog-title h2 { margin:0; font:700 24px "Space Grotesk",sans-serif; }.dialog-title button { border:0; background:none; font-size:27px; cursor:pointer; }label { display:block; font-size:12px; font-weight:600; margin-bottom:14px; }input,select { display:block; width:100%; margin-top:5px; padding:9px; border:1.5px solid var(--ink); background:#fbf8f0; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.save-button { width:100%; border:2px solid var(--ink); padding:11px; background:var(--ink); color:var(--paper); font-weight:700; cursor:pointer; }
@media (max-width:800px) { .planner-shell { grid-template-columns:1fr; margin:16px auto; box-shadow:5px 6px 0 #2a2721; }.board { border-right:0; border-bottom:2px dashed var(--ink); padding:18px; }.calendar-panel { padding:22px 18px; } }.@media (max-width:430px) { .masthead { min-height:140px; }.summary span { font-size:23px; }.summary div { padding:9px; }.form-grid { grid-template-columns:1fr; gap:0; } }