:root{
  --bg:#F6F3EC; --card:#FFFFFF; --ink:#1E1C19; --muted:#7A746A; --line:#E6E0D4;
  --accent:#1F7A55; --accent-soft:#E2F0E8; --warn:#B4532A; --warn-soft:#FBEAE2;
  --sun:#C2453A; --sat:#3B6EA8; --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#161513;--card:#211F1C;--ink:#F1ECE3;--muted:#A39C90;--line:#34312C;
    --accent:#4FB386;--accent-soft:#1E3329;--warn:#E08560;--warn-soft:#3A2419;--sun:#E3746A;--sat:#7FA7DA;}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  font-size:15px;line-height:1.45;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.app{max-width:520px;margin:0 auto;padding:12px 14px calc(88px + env(safe-area-inset-bottom))}

/* header */
.mnav{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
.mnav h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.2px}
.mnav .nb{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:20px;line-height:1}
.mnav .mid{display:flex;align-items:center;gap:8px}
.mnav .today-btn{font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--muted)}
.sum{background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.sum small{opacity:.7;font-size:12px}
.sum .big{display:block;font-size:26px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.sum .sub{display:flex;justify-content:space-between;font-size:13px;opacity:.85;margin-top:4px;font-variant-numeric:tabular-nums}

/* calendar */
.dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:12px;color:var(--muted);text-align:center;margin-bottom:4px}
.dow .sun{color:var(--sun)} .dow .sat{color:var(--sat)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cell{min-height:78px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:3px 2px 4px;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;text-align:left;overflow:hidden}
.cell.empty{background:transparent;border:none}
.cell .dn{font-size:12px;font-weight:600;padding:0 3px;display:flex;justify-content:space-between;align-items:center}
.cell.sun .dn{color:var(--sun)} .cell.sat .dn{color:var(--sat)}
.cell.today{border:2px solid var(--ink)}
.chip{font-size:10.5px;font-weight:600;border-radius:4px;padding:1px 3px;
  background:color-mix(in srgb,var(--c) 18%,var(--card));border-left:3px solid var(--c);
  white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.chip.plan{background:transparent;border:1px dashed var(--c);border-left:3px solid var(--c);color:var(--muted)}
.chip.abs{text-decoration:line-through;opacity:.6}
.jh{font-size:10px;line-height:1.2;color:var(--accent);font-weight:600;padding:0 3px;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.more{font-size:10px;color:var(--muted);padding:0 3px}
.pd{font-size:11px}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin:12px 2px 0;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.legend .dash{border:1px dashed var(--muted);background:transparent}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.ch{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ch b{font-size:16px}
.dot{width:12px;height:12px;border-radius:4px;flex:none}
.tag{font-size:11px;padding:2px 7px;border-radius:99px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.ch .tag:first-of-type{margin-left:auto}
.rows{display:flex;flex-direction:column}
.r{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;font-variant-numeric:tabular-nums}
.r span:first-child{color:var(--muted)}
.r.sep{border-top:1px solid var(--line);margin-top:4px;padding-top:9px}
.r.tot span{color:var(--ink);font-weight:700}
.r.net span:last-child{color:var(--accent);font-weight:700;font-size:16px}
.r.minus span:last-child{color:var(--warn)}
.note{font-size:12px;color:var(--muted);margin-top:6px}
.warn{font-size:12.5px;color:var(--warn);background:var(--warn-soft);border-radius:8px;padding:7px 10px;margin:8px 0 2px}
details{margin-top:8px} summary{font-size:13px;color:var(--muted);cursor:pointer}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:5px 4px;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:500}

.joblist .card{display:flex;align-items:center;gap:10px}
.joblist .meta{flex:1;min-width:0}
.joblist .meta b{display:block}
.joblist .meta small{color:var(--muted)}
.empty-state{text-align:center;padding:36px 16px;color:var(--muted)}
.empty-state b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}

/* buttons */
.primary{background:var(--ink);color:var(--bg);border:none;border-radius:11px;padding:12px 16px;font-weight:600}
.ghost{background:transparent;border:1px solid var(--line);border-radius:11px;padding:11px 14px}
.danger{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.btns{display:flex;gap:8px;margin-top:14px}
.btns .primary{flex:1}
.block{width:100%;margin-top:4px}
.small-btn{font-size:13px;padding:7px 11px;border-radius:9px;border:1px solid var(--line);background:var(--card)}

/* tabbar */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom));display:flex;justify-content:center}
.tabbar .in{display:flex;max-width:520px;width:100%}
.tabbar button{flex:1;background:none;border:none;padding:6px 0;font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar button svg{width:22px;height:22px}
.tabbar button.on{color:var(--ink);font-weight:600}
.fab{position:fixed;right:max(18px,calc(50% - 242px));bottom:calc(78px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;font-size:28px;box-shadow:0 6px 18px rgba(0,0,0,.18)}

/* sheet */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:flex-end;justify-content:center;z-index:20}
.overlay.open{display:flex}
.sheet{background:var(--bg);width:100%;max-width:520px;max-height:90vh;overflow:auto;border-radius:20px 20px 0 0;
  padding:8px 16px calc(18px + env(safe-area-inset-bottom));animation:up .2s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:4px auto 10px}
.sheet h2{font-size:18px;margin:0 0 12px}
.f{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.f>span{font-size:12.5px;color:var(--muted)}
.f input,.f select,.f textarea{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 11px;width:100%;font-size:16px}
.f textarea{font-size:12px;font-family:ui-monospace,Menlo,monospace;min-height:90px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tg{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;gap:10px}
.tg .lbl{display:flex;flex-direction:column}
.tg .lbl small{color:var(--muted);font-size:11.5px}
.sw{position:relative;width:46px;height:28px;flex:none}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:.15s}
.sw span::after{content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked+span{background:var(--accent)}
.sw input:checked+span::after{transform:translateX(18px)}
.colors{display:flex;gap:8px;flex-wrap:wrap}
.colors button{width:30px;height:30px;border-radius:50%;border:3px solid transparent}
.colors button.sel{border-color:var(--ink)}
.preview{background:var(--accent-soft);border-radius:10px;padding:10px 12px;font-size:13.5px;font-variant-numeric:tabular-nums}
.preview b{font-size:17px;color:var(--accent)}
.dayitem{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;padding:10px 12px;margin-bottom:8px;width:100%;text-align:left;display:block}
.dayitem .t{display:flex;justify-content:space-between;font-weight:600}
.dayitem small{color:var(--muted);display:block;margin-top:2px}
.payinfo{background:var(--accent-soft);border-radius:10px;padding:9px 12px;margin-bottom:8px;font-size:13.5px}
.toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:9px 16px;border-radius:99px;font-size:13.5px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:30;white-space:nowrap}
.toast.show{opacity:1}
.sec-title{font-size:13px;color:var(--muted);margin:16px 2px 8px;font-weight:600}

.xitem{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;font-variant-numeric:tabular-nums}
.xitem .nm{flex:1;color:var(--muted)}
.xitem .x{border:none;background:none;color:var(--muted);font-size:16px;padding:0 4px}
.plus{color:var(--accent)} .minus-t{color:var(--warn)}
.addx{margin-top:6px;font-size:13px}
.filein{display:none}
[hidden]{display:none!important}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.tsel{display:flex;gap:6px}
.tsel select{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 8px;font-size:16px;font-variant-numeric:tabular-nums}
.f select:disabled,.f input:disabled{opacity:.6}
.rule.ended{opacity:.55}
.joblist + .primary{margin-bottom:4px}