@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap');

:root { --ink:#1f2926; --muted:#77817b; --paper:#f5f5ef; --card:#fffef9; --line:#dfe3db; --green:#17694d; --strong-green:#087b55; --mint:#d7eee0; --warm:#e8d6ae; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans','Noto Serif SC',sans-serif; }
body:before { content:''; display:block; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:radial-gradient(#b9beb5 .6px, transparent .6px); background-size:5px 5px; }
.app-shell { position:relative; max-width:1160px; margin:auto; padding:52px 48px 26px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:48px; }
.brand { display:flex; gap:18px; align-items:flex-start; }
.brand-mark { color:var(--green); font:500 55px/38px 'DM Mono',monospace; transform:rotate(45deg); display:inline-block; }
.eyebrow { margin:0 0 10px; color:var(--green); font:500 11px/1 'DM Mono',monospace; letter-spacing:.15em; }
h1,h2,p { margin-top:0; }
h1 { margin:0; font:600 clamp(29px,4vw,46px)/1.05 'Noto Serif SC',serif; letter-spacing:-.04em; }
.top-note { margin:6px 0 0; text-align:right; font:600 17px/1.6 'Noto Serif SC',serif; }
.top-note span { color:var(--muted); font:400 12px 'DM Mono',monospace; }
.workspace { display:grid; grid-template-columns:240px 1fr; gap:42px; align-items:start; }
.flag-panel { padding-top:10px; }
.flag-list { display:grid; gap:5px; margin:22px 0 28px; }
.flag-option { display:flex; align-items:center; gap:12px; border:0; border-radius:4px; padding:13px 12px; background:transparent; color:var(--muted); font:600 16px 'Noto Serif SC',serif; text-align:left; cursor:pointer; }
.flag-option:hover,.flag-option.is-selected { background:var(--card); color:var(--ink); box-shadow:0 1px 0 var(--line); }
.flag-option.is-selected .flag-dot { background:var(--green); box-shadow:0 0 0 4px var(--mint); }
.flag-dot { width:8px; height:8px; border:1px solid var(--green); border-radius:50%; }
.add-flag { color:var(--green); font:11px 'DM Mono',monospace; text-decoration:none; }
.add-flag:hover { text-decoration:underline; }
.legend { display:grid; grid-template-columns:12px 1fr; gap:8px 10px; margin-top:100px; color:var(--muted); font:10px 'DM Mono',monospace; }
.legend-chip { width:10px; height:10px; border:1px solid var(--line); border-radius:50%; }
.legend-chip.checked { background:var(--green); border-color:var(--green); }
.calendar-card { background:var(--card); border:1px solid var(--line); padding:36px 40px 27px; box-shadow:0 12px 40px rgba(37,56,44,.05); }
.calendar-head { display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:30px; }
h2 { margin:0 0 8px; font:600 32px 'Noto Serif SC',serif; }
#calendar-subtitle { margin:0; color:var(--muted); font-size:13px; }
.month-nav { display:flex; align-items:center; gap:18px; color:var(--green); font:12px 'DM Mono',monospace; }
.month-nav button { border:1px solid var(--line); width:30px; height:30px; background:transparent; color:var(--green); cursor:pointer; }
.month-nav button:hover { background:var(--mint); }
.weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.weekdays { border-bottom:1px solid var(--line); padding-bottom:13px; color:#99a199; font:10px 'DM Mono',monospace; text-align:center; }
.calendar-grid { gap:8px; padding-top:8px; }
.day { position:relative; min-height:76px; border:1px solid transparent; padding:12px; color:var(--ink); text-decoration:none; transition:.15s ease; }
.day:hover { border-color:var(--green); background:#f8fbf5; }
.day.is-checked { background:var(--strong-green); color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); }
.day.is-checked:hover { background:#045c3f; }
.day.is-today.is-checked { background:#079665; box-shadow:inset 0 0 0 3px #d8ff70, 0 0 0 2px #079665; }
.day.is-future { color:#c4c9c0; cursor:default; }
.day.is-today:not(.is-checked) { border-color:var(--warm); }
.day-number { font:500 14px 'DM Mono',monospace; }
.day-state { position:absolute; right:12px; bottom:10px; color:var(--green); font:14px 'DM Mono',monospace; }
.is-checked .day-state { color:#fff; }
.calendar-hint { border-top:1px solid var(--line); margin:21px 0 0; padding-top:17px; color:var(--muted); font:11px/1.7 'DM Mono',monospace; }
footer { display:flex; justify-content:space-between; margin-top:24px; color:#a3aaa2; font:10px 'DM Mono',monospace; }
@media (max-width:760px) { .app-shell { padding:28px 18px 20px; } .topbar { padding-bottom:28px; } .top-note { display:none; } .workspace { grid-template-columns:1fr; gap:20px; } .flag-panel { padding:0; } .flag-list { display:flex; overflow:auto; margin:17px -18px 15px; padding:0 18px 5px; } .flag-option { white-space:nowrap; } .legend { display:none; } .calendar-card { padding:23px 15px 20px; } .calendar-head { display:block; } .month-nav { justify-content:space-between; margin-top:25px; } .day { min-height:58px; padding:9px 7px; } .day-state { right:7px; bottom:7px; } footer { font-size:9px; } }