:root{
  --cream:#faf6ef; --card:#ffffff; --ink:#3a3327; --gold:#c9a45c; --soft:#8a7f6b;
  --line:#e7e0d2; --gap:#e74c3c; --gap-bg:#fdecea; --dad:#2e6fb0; --dad-bg:#eaf1f8;
  --mom:#c2588a; --mom-bg:#fbeaf2; --both:#3a9b5c; --both-bg:#e9f6ee;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;}
body{
  font-family:"PingFang TC","Heiti TC","Noto Sans TC",system-ui,sans-serif;
  background:var(--cream); color:var(--ink);
  font-size:clamp(15px,4.2vw,18px); line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:560px; margin:0 auto; padding:12px 12px 40px;}

/* 頂列 */
.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--ink); color:#fff;
  text-align:center; white-space:nowrap;
  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
}
.logo{font-size:clamp(0.95rem, 4vw, 1.1rem); vertical-align:middle; margin-right:2px;}
.topbar .title{font-weight:800; font-size:clamp(0.95rem, 4.3vw, 1.15rem); letter-spacing:.5px; vertical-align:middle;}
.topbar .month{color:var(--gold); font-size:clamp(1rem, 4.8vw, 1.25rem); font-weight:800; letter-spacing:.5px; margin-left:clamp(6px, 2.5vw, 12px); vertical-align:middle;}
.legend .updated{color:var(--soft); font-size:.78em; margin-top:12px; text-align:right;}

.loading{text-align:center; color:var(--soft); padding:50px 0;}

/* 家庭密碼閘門 */
.pin-gate{position:fixed; inset:0; z-index:100; background:var(--cream); display:flex; align-items:center; justify-content:center; padding:24px;}
.pin-gate[hidden]{display:none;}
.pin-box{text-align:center; width:100%; max-width:320px;}
.pin-logo{font-size:3em;}
.pin-title{font-size:1.4em; font-weight:800; margin-top:8px;}
.pin-sub{color:var(--soft); margin:6px 0 20px;}
.pin-input{width:100%; padding:14px; font-size:1.6em; text-align:center; letter-spacing:8px;
  border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); outline:none;}
.pin-input:focus{border-color:var(--gold);}
.pin-err{color:var(--gap); font-size:.85em; min-height:1.2em; margin:8px 0;}
.pin-btn{width:100%; padding:14px; border:none; border-radius:14px; background:var(--ink); color:#fff;
  font-size:1.05em; font-weight:700; cursor:pointer;}

/* 今天大卡片 */
.today{
  background:var(--card); border-radius:18px; padding:18px;
  box-shadow:0 4px 16px rgba(58,51,39,.08); margin-bottom:14px;
  border:2px solid var(--both);
}
.today.warn{border-color:var(--gap);}
.day-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.nav-arrow{flex:0 0 auto; border:none; background:#f1ece1; color:var(--ink); width:40px; height:40px; border-radius:50%; font-size:1.5em; line-height:1; cursor:pointer; font-weight:700;}
.nav-arrow:active{background:#e3dccb;}
.nav-arrow:disabled{opacity:.25;}
.day-pick{text-align:center; flex:1;}
.day-pick .date{font-size:1.5em; font-weight:800;}
.day-pick .dow{color:var(--soft); font-size:.8em; margin-left:6px; font-weight:600;}
.todaytag{display:inline-block; background:var(--gold); color:#fff; font-size:.58em; padding:2px 8px; border-radius:7px; margin-left:8px; vertical-align:middle; font-weight:700;}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.backtoday{margin-left:auto; border:1px solid var(--line); background:#fff; color:var(--soft); font-size:.8em; padding:5px 12px; border-radius:999px; cursor:pointer;}
.today .row1{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px;}
.today .date{font-size:1.5em; font-weight:800;}
.today .dow{color:var(--soft); font-size:.8em; margin-left:6px; font-weight:600;}
.badge{
  font-size:.82em; font-weight:800; padding:5px 12px; border-radius:999px;
  background:var(--both-bg); color:var(--both); white-space:nowrap;
}
.badge.warn{background:var(--gap-bg); color:var(--gap);}
.today .lines>div{padding:4px 0; font-weight:600; line-height:1.5;}
.today .lines>div .dot{margin-right:6px;}
.today .commute{color:var(--soft); font-weight:500; font-size:.86em; padding-left:16px;}
.today .big-gap{
  background:var(--gap-bg); color:var(--gap); border-radius:12px;
  padding:10px 12px; margin-top:8px; font-weight:700; line-height:1.5;
}

/* 本月概況 */
.summary{display:flex; gap:8px; margin-bottom:14px;}
.chip{
  flex:1; background:var(--card); border-radius:14px; padding:12px 8px; text-align:center;
  box-shadow:0 2px 8px rgba(58,51,39,.06);
}
.chip .num{font-size:1.7em; font-weight:800; line-height:1;}
.chip .lbl{font-size:.72em; color:var(--soft); margin-top:5px;}
.chip.ok .num{color:var(--both);}
.chip.warn .num{color:var(--gap);}
.chip.mom .num{color:var(--mom);}

/* 月曆 */
.cal-card{background:var(--card); border-radius:18px; padding:12px 10px; box-shadow:0 2px 10px rgba(58,51,39,.06); margin-bottom:14px;}
.cal-head,.cal-grid{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-head{margin-bottom:4px;}
.cal-head span{text-align:center; font-size:.72em; color:var(--soft); font-weight:700; padding:2px 0;}
.cal-head span.we{color:var(--gold);}
.cal-grid{gap:4px;}
.cell{
  aspect-ratio:1/1.15; border-radius:10px; background:#faf7f0; border:1px solid var(--line);
  padding:3px; display:flex; flex-direction:column; align-items:center; cursor:pointer;
  position:relative; overflow:hidden;
}
.cell.empty{background:transparent; border:none; cursor:default;}
.cell.off{background:#f1ece1;}
.cell.gap{border-color:var(--gap); background:var(--gap-bg);}
.cell.today{outline:2.5px solid var(--gold); outline-offset:-1px;}
.cell .d{font-weight:800; font-size:.95em; line-height:1;}
.cell.gap .d{color:var(--gap);}
.cell .dots{display:flex; gap:3px; margin-top:auto; flex-wrap:wrap; justify-content:center; padding-bottom:1px;}
.dot{width:7px; height:7px; border-radius:50%;}
.dot.dad{background:var(--dad);} .dot.mom{background:var(--mom);}
.dot.both,.dot.ok{background:var(--both);} .dot.gap{background:var(--gap);}
.cell .night{position:absolute; top:2px; right:3px; font-size:.7em;}
.cell .mini{font-size:.62em; color:var(--soft); line-height:1.1; text-align:center; margin-top:1px;}

/* 圖例 */
.legend{background:var(--card); border-radius:16px; padding:14px 16px; box-shadow:0 2px 8px rgba(58,51,39,.06); font-size:.82em;}
.legend h3{margin:0 0 8px; font-size:1em;}
.legend .item{display:flex; align-items:center; gap:8px; padding:3px 0; color:var(--ink);}
.legend .note{color:var(--soft); font-size:.92em; margin-top:8px; line-height:1.6;}
.demo-tag{background:var(--gold); color:#fff; font-size:.62em; padding:2px 7px; border-radius:6px; font-weight:700; margin-left:6px; vertical-align:middle;}

/* 底部詳情抽屜 */
.overlay{position:fixed; inset:0; background:rgba(40,35,25,.45); z-index:50; display:flex; align-items:flex-end;}
.overlay[hidden]{display:none;}
.sheet{
  background:var(--cream); width:100%; max-width:560px; margin:0 auto;
  border-radius:20px 20px 0 0; padding:8px 18px calc(env(safe-area-inset-bottom) + 18px);
  max-height:85vh; overflow-y:auto; animation:slideup .22s ease;
}
@keyframes slideup{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-handle{width:42px; height:5px; border-radius:3px; background:#d8cfbd; margin:8px auto 14px;}
.sheet h2{margin:0 0 4px; font-size:1.3em;}
.sheet .sub{color:var(--soft); font-size:.82em; margin-bottom:14px;}
.detail-row{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.detail-row .k{flex:0 0 64px; color:var(--soft); font-size:.85em; font-weight:600;}
.detail-row .v{flex:1; font-weight:600;}
.detail-row .v.gap{color:var(--gap);} .detail-row .v.dad{color:var(--dad);} .detail-row .v.mom{color:var(--mom);} .detail-row .v.ok{color:var(--both);}
.pill{display:inline-block; padding:2px 9px; border-radius:8px; font-size:.85em; font-weight:700; margin:2px 4px 2px 0;}
.pill.dad{background:var(--dad-bg); color:var(--dad);} .pill.mom{background:var(--mom-bg); color:var(--mom);}
.pill.gap{background:var(--gap-bg); color:var(--gap);} .pill.ok{background:var(--both-bg); color:var(--both);}
.sheet-close{
  width:100%; margin-top:18px; padding:14px; border:none; border-radius:14px;
  background:var(--ink); color:#fff; font-size:1em; font-weight:700; cursor:pointer;
}

/* ── 缺口派工 ── */
.big-gap.arranged{background:var(--both-bg); color:var(--both);}
.cell.covered{border-color:var(--both); background:var(--both-bg);}
.cell.covered .d{color:var(--both);}

.assign-sec{margin-top:16px; padding-top:14px; border-top:2px dashed var(--line);}
.assign-title{font-weight:800; font-size:.95em; margin-bottom:10px;}
.assign-item{background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px;}
.assign-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;}
.assign-head .gtl{font-weight:700; font-size:.9em;}
.assign-head .assigned{color:var(--both); font-weight:700; font-size:.9em;}
.assign-head .unassigned{color:var(--gap); font-weight:700; font-size:.85em;}
.cg-chips{display:flex; flex-wrap:wrap; gap:6px;}
.cg{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:18px; padding:7px 14px; font-size:.88em; font-weight:600;
  cursor:pointer; transition:all .12s;
}
.cg:active{transform:scale(.96);}
.cg.on{background:var(--both); border-color:var(--both); color:#fff;}
.cg.clear{color:var(--soft);}
.cg:disabled{opacity:.5;}
.assign-note{color:var(--soft); font-size:.8em; margin-top:4px;}