:root{
  --bg:#F5F0E6;--paper:#FFFCF6;--paper2:#FBF7EF;--ink:#1D2830;--ink2:#3A4853;--muted:#7C858C;--line:#E6DDCD;--line2:#EEE8DC;
  --clay:#B25E3B;--clay-ink:#fff;--slate:#3E5667;--sage:#667F63;--ochre:#B8862F;--plum:#7A5676;--sea:#347885;--rose:#BC5963;
  --hol:#8A6A2F;--now:#C4492C;
  --shadow:0 1px 2px rgba(29,40,48,.05),0 10px 30px -12px rgba(29,40,48,.18);
  --r:16px;--serif:'Newsreader',Georgia,'Times New Roman',serif;--sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --hour:52px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#11161B;--paper:#182027;--paper2:#1C252D;--ink:#ECE5D8;--ink2:#C9C1B3;--muted:#8E979E;--line:#29333C;--line2:#222B33;
  --clay:#D9825D;--clay-ink:#1B1410;--slate:#8FA9BB;--sage:#93AE8F;--ochre:#D9AE5F;--plum:#B993B4;--sea:#6FB2BE;--rose:#DE8A92;--hol:#D9B36A;--now:#F0714F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -12px rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11161B;--paper:#182027;--paper2:#1C252D;--ink:#ECE5D8;--ink2:#C9C1B3;--muted:#8E979E;--line:#29333C;--line2:#222B33;
  --clay:#D9825D;--clay-ink:#1B1410;--slate:#8FA9BB;--sage:#93AE8F;--ochre:#D9AE5F;--plum:#B993B4;--sea:#6FB2BE;--rose:#DE8A92;--hol:#D9B36A;--now:#F0714F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -12px rgba(0,0,0,.6);color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4{margin:0;font-weight:500}
.muted{color:var(--muted)}.small{font-size:12px}
kbd{font:11px var(--mono);border:1px solid var(--line);border-radius:5px;padding:0 4px;margin:0 1px;background:var(--paper2)}

/* layout */
.app{display:grid;grid-template-columns:268px minmax(0,1fr) 332px;height:100dvh;overflow:hidden}
.rail{padding:18px 12px 24px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;padding:14px 8px 14px 8px}
.sheet{background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;padding:22px 20px 20px}
.brand{font:500 22px/1 var(--serif);letter-spacing:-.01em;display:flex;align-items:center;gap:10px;padding:4px 4px 2px}
.brand-mark{width:22px;height:22px;border-radius:7px;background:var(--clay);position:relative;flex:none}
.brand-mark::after{content:"";position:absolute;inset:6px 6px 6px 6px;border-radius:50%;background:var(--paper)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-head h3{font:500 16px/1.2 var(--serif)}

/* clock */
.clock-card{padding:16px 16px 14px;background:linear-gradient(160deg,var(--paper) 0%,var(--paper2) 100%)}
.clock-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);font-weight:600}
.clock{font:300 58px/1 var(--serif);letter-spacing:-.03em;margin:6px 0 4px;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;gap:4px}
.clock-sec{font:400 16px/1 var(--mono);color:var(--muted);margin-top:8px}
.clock-date{font:italic 400 17px/1.3 var(--serif);color:var(--ink2)}
.sky{display:flex;gap:12px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink2)}
.sky .moon svg{width:30px;height:30px;stroke:none}
.sky .sun{display:grid;gap:2px;font-family:var(--mono);font-size:11.5px}
.sky b{font-weight:500;color:var(--ink)}

/* weather */
.wx-now{display:flex;align-items:center;gap:10px;margin:-2px 0 10px}
.wx-now .temp{font:300 34px/1 var(--serif)}
.wx-now .desc{font-size:12.5px;color:var(--ink2);line-height:1.35}
.wx-ic{width:26px;height:26px;stroke-width:1.5;flex:none;color:var(--ink2)}
.wx-ic.sun{color:var(--ochre)}.wx-ic.rain,.wx-ic.drizzle,.wx-ic.storm{color:var(--sea)}
.wx-week{display:grid;gap:2px}
.wx-row{display:grid;grid-template-columns:40px 24px 1fr 34px;align-items:center;gap:8px;padding:4px 2px;border-radius:8px;font-size:12.5px}
.wx-row .wx-ic{width:20px;height:20px}
.wx-row .d{font-weight:500}
.wx-row.today .d{color:var(--clay)}
.wx-bar{position:relative;height:5px;border-radius:3px;background:var(--line2)}
.wx-bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--sea),var(--ochre),var(--clay))}
.wx-row .lo{color:var(--muted);font-family:var(--mono);font-size:11.5px;position:absolute;left:0}
.wx-row .rng{display:grid;grid-template-columns:24px 1fr 24px;gap:6px;align-items:center;font:11.5px var(--mono)}
.wx-row .rng span:first-child{color:var(--muted);text-align:right}
.wx-row .rain{font:11px var(--mono);color:var(--sea);text-align:right}

/* mini */
.mini-nav{display:flex;gap:2px}
.mini{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.mini .dow{font-size:10.5px;color:var(--muted);padding:2px 0 4px;font-weight:500}
.mini button{aspect-ratio:1;border-radius:50%;font-size:12px;font-variant-numeric:tabular-nums;position:relative}
.mini button:hover{background:var(--line2)}
.mini .out{color:var(--muted);opacity:.5}
.mini .today{color:var(--clay);font-weight:600}
.mini .sel{background:var(--ink);color:var(--paper)!important}
.mini .has::after{content:"";position:absolute;bottom:3px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--clay)}

/* bookmarks */
.bookmarks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bookmarks li{display:flex;align-items:center;gap:8px;border-radius:9px;padding:6px 6px}
.bookmarks li:hover{background:var(--line2)}
.bookmarks a{flex:1;color:var(--ink);text-decoration:none;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bookmarks img{width:16px;height:16px;border-radius:4px;flex:none}
.bookmarks .x{opacity:0;color:var(--muted);font-size:16px;padding:0 4px}
.bookmarks li:hover .x{opacity:1}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;font-weight:500;font-size:13.5px;border:1px solid transparent;transition:background .15s,border-color .15s}
.btn.primary{background:var(--clay);color:var(--clay-ink)}
.btn.primary:hover{filter:brightness(1.05)}
.btn b{font-weight:500}
.btn.primary span{font-size:18px;font-weight:400;margin-top:-2px}
.btn.ghost{border-color:var(--line);background:var(--paper)}
.btn.ghost:hover{background:var(--paper2);border-color:var(--muted)}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.btn.danger{color:var(--rose)}
.btn.wide{width:100%;justify-content:center}
.btn.file{cursor:pointer}
.icon-btn{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;color:var(--ink2);font-size:18px;line-height:1}
.icon-btn:hover{background:var(--line2);color:var(--ink)}
.icon-btn.lg{width:34px;height:34px;font-size:24px}
.seg{display:inline-flex;background:var(--line2);border-radius:11px;padding:3px;gap:2px}
.seg button{height:30px;padding:0 11px;border-radius:8px;font-size:13px;color:var(--ink2);font-weight:500}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg.sm button{height:26px;padding:0 10px;font-size:12px}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 10px 14px;flex-wrap:wrap}
.nav{display:flex;align-items:center;gap:4px;min-width:0}
.nav h1{font:400 26px/1.1 var(--serif);overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:-.02em;margin-left:10px;white-space:nowrap}
.nav h1 em{font-style:italic;color:var(--muted);font-weight:300}
.tools{display:flex;align-items:center;gap:8px}
.chip{display:none;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--paper);font:500 13px var(--mono)}
.view{flex:1;min-height:0;display:flex;flex-direction:column}

/* month */
.month{flex:1;display:grid;grid-template-rows:auto 1fr;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);min-height:0}
.mhead{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.mhead div{padding:9px 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;min-height:0}
.mcell{border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:6px 6px 4px;min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer;overflow:hidden;position:relative;transition:background .12s}
.mcell:nth-child(7n){border-right:0}
.mcell:hover{background:var(--paper2)}
.mcell.out{background:color-mix(in srgb,var(--bg) 55%,var(--paper))}
.mcell.out .num{color:var(--muted);opacity:.6}
.mcell.weekend{background:color-mix(in srgb,var(--bg) 25%,var(--paper))}
.mcell.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.mtop{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:24px}
.num{font:400 16px/1 var(--serif);width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-variant-numeric:tabular-nums;flex:none}
.mcell.today .num{background:var(--clay);color:var(--clay-ink);font-weight:500}
.mmeta{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:11px}
.mmeta .wx-ic{width:16px;height:16px}
.jdot{width:6px;height:6px;border-radius:50%;background:var(--sage);display:inline-block}
.hol{font:italic 12px/1.2 var(--serif);color:var(--hol);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chipev{--c:var(--clay);display:flex;align-items:center;gap:5px;font-size:12px;line-height:1.25;padding:2px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--ink)}
.chipev.timed{background:none;padding-left:2px}
.chipev.timed::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.chipev .tm{font:11px var(--mono);color:var(--muted)}
.more{font-size:11.5px;color:var(--muted);padding-left:4px}

/* time grid */
.tg{flex:1;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);min-height:0}
.tg-head{display:grid;border-bottom:1px solid var(--line)}
.tg-head .gut{border-right:1px solid var(--line2)}
.tg-day{padding:10px 8px 8px;text-align:center;cursor:pointer;border-right:1px solid var(--line2);min-width:0}
.tg-day:last-child{border-right:0}
.tg-day .dw{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tg-day .dn{font:400 26px/1.15 var(--serif);display:inline-grid;place-items:center;min-width:38px;height:38px;border-radius:50%;margin-top:2px}
.tg-day.today .dw{color:var(--clay)}
.tg-day.today .dn{background:var(--clay);color:var(--clay-ink)}
.tg-day .wxs{display:flex;justify-content:center;align-items:center;gap:4px;font:11px var(--mono);color:var(--muted);min-height:18px}
.tg-day .wxs .wx-ic{width:16px;height:16px}
.tg-day .hol{font-size:11.5px;display:block}
.tg-all{display:grid;border-bottom:1px solid var(--line);min-height:28px}
.tg-all .gut{font-size:10.5px;color:var(--muted);text-align:right;padding:6px 6px 0 0;border-right:1px solid var(--line2)}
.tg-all .cell{padding:3px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line2);min-width:0}
.tg-body{flex:1;overflow-y:auto;position:relative;scrollbar-width:thin}
.tg-grid{display:grid;position:relative}
.tg-hours{border-right:1px solid var(--line2)}
.tg-hours div{height:var(--hour);font:10.5px var(--mono);color:var(--muted);text-align:right;padding-right:6px;transform:translateY(-7px)}
.tg-col{position:relative;border-right:1px solid var(--line2);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour) - 1px),var(--line2) calc(var(--hour) - 1px),var(--line2) var(--hour));cursor:crosshair}
.tg-col:last-child{border-right:0}
.tg-col.today{background-color:color-mix(in srgb,var(--clay) 4%,transparent)}
.ev{--c:var(--clay);position:absolute;left:3px;right:3px;border-radius:8px;padding:4px 7px;font-size:12px;line-height:1.25;overflow:hidden;cursor:pointer;background:color-mix(in srgb,var(--c) 16%,var(--paper));border-left:3px solid var(--c);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .1s}
.ev:hover{transform:translateY(-1px);z-index:3}
.ev b{font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .tm{font:10.5px var(--mono);color:var(--ink2);opacity:.8}
.nowline{position:absolute;left:-4px;right:0;height:2px;background:var(--now);z-index:4;pointer-events:none}
.nowline::before{content:"";position:absolute;left:-2px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--now)}

/* year */
.year{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;align-content:start;padding:2px 2px 20px}
.ym{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 12px 10px;box-shadow:var(--shadow)}
.ym h3{font:500 17px var(--serif);margin-bottom:8px;cursor:pointer}
.ym h3:hover{color:var(--clay)}
.ym.cur h3{color:var(--clay)}
.ymg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ymg .dow{font-size:9.5px;color:var(--muted);text-align:center;font-weight:600}
.ymg button{aspect-ratio:1;border-radius:6px;font-size:11px;font-variant-numeric:tabular-nums;position:relative}
.ymg button:hover{outline:1px solid var(--muted)}
.ymg .d1{background:color-mix(in srgb,var(--clay) 14%,transparent)}
.ymg .d2{background:color-mix(in srgb,var(--clay) 30%,transparent)}
.ymg .d3{background:color-mix(in srgb,var(--clay) 50%,transparent)}
.ymg .hd{color:var(--hol);font-weight:600;text-decoration:underline dotted}
.ymg .td{background:var(--ink)!important;color:var(--paper)}
.ymg .jd::after{content:"";position:absolute;right:2px;top:2px;width:3px;height:3px;border-radius:50%;background:var(--sage)}
.ymg .wk{color:var(--muted)}

/* journal feed */
.jfeed{flex:1;overflow-y:auto;padding:0 2px 30px}
.jfeed-inner{max-width:720px;margin:0 auto}
.jbar{display:flex;align-items:center;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.jbar input{flex:1;min-width:180px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:0 12px}
.jstats{font-size:12.5px;color:var(--muted)}
.jmonth{font:italic 400 15px var(--serif);color:var(--clay);margin:26px 0 10px;letter-spacing:.02em}
.jentry{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin-bottom:12px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s}
.jentry:hover{border-color:var(--muted)}
.jentry h3{font:500 20px/1.2 var(--serif);display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.jentry h3 small{font:12px var(--sans);color:var(--muted)}
.jentry p{margin:0;font:400 16.5px/1.6 var(--serif);color:var(--ink2);white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.jentry mark,.sr mark{background:color-mix(in srgb,var(--ochre) 35%,transparent);color:inherit;border-radius:3px}
.empty{text-align:center;padding:60px 20px;color:var(--muted);font:italic 18px var(--serif)}

/* sheet */
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:18px}
.sheet-dow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);font-weight:600}
.sheet-date{font:400 32px/1.1 var(--serif);letter-spacing:-.02em;margin-top:2px}
.sheet-meta{font:italic 14px/1.4 var(--serif);color:var(--muted);margin-top:4px}
.sheet-sec{padding:14px 0;border-top:1px solid var(--line2)}
.sheet-sec h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px;display:flex;gap:8px;align-items:baseline}
.sheet-sec.grow{flex:1;display:flex;flex-direction:column;min-height:260px}
.agenda{display:grid;gap:6px}
.ag{--c:var(--clay);display:grid;grid-template-columns:56px 1fr;gap:10px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--c) 10%,transparent);cursor:pointer;border-left:3px solid var(--c)}
.ag:hover{background:color-mix(in srgb,var(--c) 18%,transparent)}
.ag .tm{font:12px/1.35 var(--mono);color:var(--ink2)}
.ag b{font-weight:500;display:block}
.ag .sub{font-size:12px;color:var(--muted)}
.ag.holiday{--c:var(--hol);cursor:default}
.none{color:var(--muted);font:italic 14.5px var(--serif)}
.todos{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:2px}
.todos li{display:flex;align-items:flex-start;gap:10px;padding:6px 4px;border-radius:8px}
.todos li:hover{background:var(--paper2)}
.todos .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--muted);flex:none;margin-top:1px;display:grid;place-items:center;transition:all .15s}
.todos .box svg{width:12px;height:12px;stroke-width:2.5;opacity:0}
.todos li.done .box{background:var(--sage);border-color:var(--sage);color:#fff}
.todos li.done .box svg{opacity:1}
.todos li.done .txt{text-decoration:line-through;color:var(--muted)}
.todos .txt{flex:1;outline:none;word-break:break-word}
.todos .carried{font-size:10.5px;color:var(--ochre);border:1px solid color-mix(in srgb,var(--ochre) 50%,transparent);border-radius:20px;padding:0 6px;white-space:nowrap;margin-top:1px}
.todos .x{opacity:0;color:var(--muted);font-size:16px;line-height:1}
.todos li:hover .x{opacity:1}
.todo-form input,.field{width:100%;height:36px;border:1px dashed var(--line);border-radius:10px;background:transparent;padding:0 12px;outline:none}
.todo-form input:focus{border-style:solid;border-color:var(--clay)}
.journal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.journal-head h4{margin:0}
.journal-tools{display:flex;align-items:center;gap:8px}
.mic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--line2);color:var(--ink2);transition:all .2s}
.mic:hover{color:var(--clay)}
.mic.on{background:var(--now);color:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--now) 50%,transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
#journal{flex:1;width:100%;min-height:220px;resize:none;border:0;outline:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,var(--line2) 29px,var(--line2) 30px);font:400 17px/30px var(--serif);color:var(--ink);padding:0 2px}
#journal::placeholder{color:var(--muted);font-style:italic}

/* dialogs */
.dlg{border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);padding:20px;width:min(520px,calc(100vw - 24px));box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
.dlg::backdrop{background:rgba(20,26,31,.38);backdrop-filter:blur(3px)}
.dlg[open]{animation:pop .18s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
.dlg-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dlg-head h3{flex:1;font:500 20px var(--serif)}
.title-input{flex:1;border:0;outline:none;background:none;font:400 26px/1.2 var(--serif);padding:4px 0;border-bottom:1px solid var(--line)}
.title-input:focus{border-color:var(--clay)}
.dlg label{display:grid;gap:5px;font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:.02em;margin-bottom:12px}
.dlg label input:not([type=checkbox]),.dlg select,.dlg textarea{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--paper2);padding:0 10px;font-size:14px;color:var(--ink);outline:none;width:100%}
.dlg textarea{height:auto;padding:8px 10px;resize:vertical}
.dlg input:focus,.dlg select:focus,.dlg textarea:focus{border-color:var(--clay)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.dlg label.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);padding-top:18px}
.dlg label.check input{width:18px;height:18px;accent-color:var(--clay)}
.swatches{display:flex;gap:10px;margin:4px 0 16px}
.swatches button{width:26px;height:26px;border-radius:50%;background:var(--c);outline-offset:3px}
.swatches button.on{outline:2px solid var(--c)}
.dlg-foot{display:flex;gap:8px;align-items:center}
.spacer{flex:1}
.search-dlg{padding:0;width:min(640px,calc(100vw - 24px));margin-top:10vh}
.search-box{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.search-box svg{color:var(--muted)}
.search-box input{flex:1;border:0;outline:none;background:none;font-size:17px;height:34px}
.search-results{max-height:60vh;overflow-y:auto;padding:6px}
.sr{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:9px 10px;border-radius:10px;cursor:pointer}
.sr:hover,.sr.act{background:var(--line2)}
.sr .k{font-size:14px;text-align:center}
.sr b{font-weight:500}
.sr .sn{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr .dt{font:11.5px var(--mono);color:var(--muted);white-space:nowrap}
.menu-grid{display:grid;gap:10px}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.menu-grid hr{border:0;border-top:1px solid var(--line);width:100%;margin:6px 0}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:12px;font-size:13.5px;opacity:0;pointer-events:none;transition:all .25s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0)}
.tabbar,.fab{display:none}

/* week list (mobile) */
.wlist{display:grid;gap:10px;padding-bottom:10px}
.wl{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.wl.today{border-color:var(--clay)}
.wl-h{display:flex;align-items:center;gap:10px;margin-bottom:6px;cursor:pointer}
.wl-h .dn{font:400 26px/1 var(--serif);min-width:34px}
.wl.today .dn{color:var(--clay)}
.wl-h .dw{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;flex:1}
.wl-h .wxs{display:flex;align-items:center;gap:4px;font:11px var(--mono);color:var(--muted)}
.wl-h .wxs .wx-ic{width:18px;height:18px}
.wl .ag{margin-top:4px}

/* responsive */
@media (max-width:1699px){#newBtn{width:36px;padding:0;justify-content:center}#newBtn b{display:none}#newBtn span{margin:0}}
@media (max-width:1439px){
  .app{grid-template-columns:minmax(0,1fr) 340px}
  .rail{position:fixed;inset:0 auto 0 0;width:300px;z-index:30;background:var(--bg);transform:translateX(-105%);transition:transform .25s ease;box-shadow:var(--shadow);border-right:1px solid var(--line)}
  .rail.open{transform:none}
  .chip{display:inline-flex}
  .scrim{position:fixed;inset:0;background:rgba(20,26,31,.3);z-index:25}
}
@media (max-width:899px){
  html,body{height:auto}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .app{display:flex;flex-direction:column;height:auto;overflow:visible;padding:env(safe-area-inset-top) 0 0}
  .rail{display:contents;position:static;transform:none}
  .rail>*{margin:0 12px}
  .brand{order:0;margin-top:14px}
  .clock-card{order:1;margin-top:12px}
  .main{order:2;padding:12px 12px 0}
  .sheet{order:3;margin:14px 12px 0;border:1px solid var(--line);border-radius:var(--r);overflow:visible;box-shadow:var(--shadow)}
  .rail>section:nth-of-type(2){order:4;margin-top:14px}
  .rail>section:nth-of-type(3){order:5;margin-top:14px}
  .rail>section:nth-of-type(4){order:6;margin-top:14px}
  .chip,.scrim{display:none}
  .clock{font-size:64px}
  .topbar{padding:0 0 12px;flex-wrap:nowrap;gap:4px}
  .nav{flex:1;gap:2px}
  .nav h1{font-size:21px;margin-left:4px}
  #todayBtn{padding:0 10px}
  .tools .seg,#newBtn{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar button{flex:1;height:44px;border-radius:10px;font-size:13px;font-weight:500;color:var(--muted)}
  .tabbar button.on{color:var(--clay);background:var(--line2)}
  .fab{display:grid;place-items:center;position:fixed;right:18px;bottom:calc(76px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--clay);color:var(--clay-ink);font-size:30px;font-weight:300;z-index:21;box-shadow:0 10px 24px -6px rgba(0,0,0,.4)}
  .view{min-height:0}
  .month{min-height:62vh}
  .mcell{padding:4px 3px;min-height:64px}
  .mhead div{padding:7px 4px;text-align:center;font-size:10px}
  .num{font-size:14px;width:24px;height:24px}
  .chipev{font-size:10.5px;padding:1px 4px}
  .chipev .tm,.mmeta .wx-ic,.hol{display:none}
  .tg{height:72vh}
  .tg-day .dn{font-size:22px;height:34px;min-width:34px}
  .year{grid-template-columns:repeat(2,1fr);gap:10px;overflow:visible}
  .ym{padding:10px 8px}
  .jfeed{overflow:visible}
  .dlg{padding:16px}
  .grid2{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){.year{grid-template-columns:1fr 1fr}.ymg button{font-size:10px}}