:root{
  --bg:#f1ece3; --panel:#fff; --panel2:#faf7f1;
  --line:#e2dace; --line2:#cfc3b2;
  --tx:#13293d; --tx2:#43536a; --tx3:#5b6979;
  --accent:#1b4f7a; --gold:#c9a24b;
  --ok:#1f6a4b; --warn:#7d5609; --err:#a81010;
  --okbg:#e4f2ea; --warnbg:#fbf1d9; --errbg:#fbe6e6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--tx);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:.01em}

/* 頂條 */
header{background:var(--tx);border-bottom:3px solid var(--gold);color:#f4efe6;padding:14px 16px 13px}
header .t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
header h1{font-size:19px;color:#fff}
header .sub{font-size:13.5px;color:#c9d4e0}
header .meta{margin-top:7px;font-size:13.5px;color:#dfe7ee;display:flex;gap:8px;flex-wrap:wrap}
header .pill{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  padding:2px 9px;border-radius:999px;font-size:12.5px}
header .pill.gold{background:var(--gold);color:#2a1f06;border-color:var(--gold);font-weight:700}

main{max-width:860px;margin:0 auto;padding:16px 14px 60px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(19,41,61,.05)}
.card>h2{font-size:16.5px;margin-bottom:4px}
.card>h2 .n{color:var(--accent)}
.hint{font-size:13.5px;color:var(--tx3);margin:4px 0 12px;line-height:1.6}

/* 名字選擇 */
.names{display:flex;flex-wrap:wrap;gap:8px}
.nm{border:1.5px solid var(--line2);background:var(--panel2);color:var(--tx);
  padding:9px 14px;border-radius:10px;font-size:15.5px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-family:inherit}
.nm .d{font-size:12px;color:var(--tx3);font-weight:500}
.nm.done{border-color:#a9cbb8;background:var(--okbg)}
.nm.done .d{color:var(--ok)}
.nm.todo{border-style:dashed;border-color:#d9b98f;background:#fdf6ea}
.nm.todo .d{color:var(--warn)}
.nm.sel{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(27,79,122,.3)}
.nm.sel .d{color:#cfe0ee}

/* 快捷 */
.quick{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.qb{border:1px solid var(--line2);background:#fff;color:var(--tx2);border-radius:8px;
  padding:6px 11px;font-size:13.5px;cursor:pointer;font-family:inherit}
.qb:hover{border-color:var(--accent);color:var(--accent)}
.qb.on{background:var(--errbg);border-color:#e0a5a5;color:var(--err);font-weight:700}

/* 日曆 */
.mon{margin-top:16px}
.mon h3{font-size:15px;color:var(--tx);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.mon h3 .tag{font-size:12px;font-weight:600;color:var(--warn);background:var(--warnbg);
  border:1px solid #e6d3a4;padding:1px 8px;border-radius:999px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.dow{text-align:center;font-size:12.5px;color:var(--tx3);font-weight:700;padding:2px 0}
.dow.we{color:var(--err)}
.cell{aspect-ratio:1/1.12;border:1.5px solid var(--line);background:#fff;border-radius:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  cursor:pointer;position:relative;padding:2px;font-family:inherit;color:var(--tx)}
.cell.pad{border:none;background:transparent;cursor:default}
.cell .dd{font-size:15.5px;font-weight:700;line-height:1}
.cell .cnt{font-size:10.5px;line-height:1.1;color:var(--tx3)}
.cell.free{border-color:#8fc0a8;background:var(--okbg)}
.cell.free .cnt{color:var(--ok);font-weight:700}
.cell.near1{border-color:#e0c98c;background:#fdf8ec}
.cell.near1 .cnt{color:var(--warn)}
.cell.near2{border-color:#e8d3c0;background:#fdf6f0}
.cell.many{background:#f5f2ed;color:var(--tx3);border-color:var(--line)}
.cell.me{background:var(--err)!important;border-color:#8c0d0d!important;color:#fff!important}
.cell.me .cnt{color:#f6d6d6!important}
.cell.hol::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.cell.lock{box-shadow:0 0 0 3px var(--gold)}
.cell:disabled{cursor:default}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12.5px;color:var(--tx3)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;
  vertical-align:-1px;border:1.5px solid}
.lg-free i{background:var(--okbg);border-color:#8fc0a8}
.lg-near i{background:#fdf8ec;border-color:#e0c98c}
.lg-me i{background:var(--err);border-color:#8c0d0d}
.lg-hol i{background:var(--gold);border-color:var(--gold);border-radius:50%}

/* 送出 */
.bar{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 62%,rgba(241,236,227,0));
  padding:14px 0 10px;margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:12px 22px;
  font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;flex:1;min-width:150px}
.btn:disabled{background:#e8e2d6;color:#645d50;cursor:default}
.btn.ghost{background:#fff;color:var(--accent);border:1.5px solid var(--accent);flex:0 0 auto;min-width:0}
.btn.gold{background:var(--gold);color:#2a1f06}
.cnt-me{font-size:14px;color:var(--tx2);font-weight:600}

/* 結果 */
.rank{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--panel2)}
.row.top{border-color:#8fc0a8;background:var(--okbg)}
.row.mid{border-color:#e0c98c;background:#fdf8ec}
.row .d{font-size:16.5px;font-weight:800;min-width:82px}
.row .who{font-size:13.5px;color:var(--tx2);flex:1}
.row .who b{color:var(--err)}
.row .badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.row.top .badge{background:var(--ok);color:#fff}
.row.mid .badge{background:var(--warn);color:#fff}
.row .hol{font-size:11.5px;color:var(--warn);background:var(--warnbg);
  border:1px solid #e6d3a4;padding:1px 7px;border-radius:999px;white-space:nowrap}

.alert{border:1.5px solid #e0a5a5;background:var(--errbg);border-radius:11px;padding:13px 15px;margin-bottom:13px}
.alert h3{font-size:15px;color:var(--err);margin-bottom:5px}
.alert p{margin:0;font-size:14px;color:#7d2323;line-height:1.65}
.alert.info{border-color:#a9c4dc;background:#eaf2f8}
.alert.info h3{color:var(--accent)}
.alert.info p{color:#22475f}

.miss{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.miss span{background:#fdf6ea;border:1px dashed #d9b98f;color:var(--warn);
  padding:4px 11px;border-radius:8px;font-size:14px;font-weight:600}
textarea{width:100%;border:1px solid var(--line2);border-radius:9px;padding:11px;
  font:13.5px/1.7 inherit;color:var(--tx2);background:var(--panel2);resize:vertical}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tx);
  color:#fff;padding:11px 20px;border-radius:999px;font-size:14.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:99;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.toast.on{opacity:1}
footer{text-align:center;font-size:12.5px;color:var(--tx3);padding:6px 0 30px}
footer a{color:var(--accent)}
@media(max-width:420px){
  .cell .dd{font-size:14px} .cell .cnt{font-size:9.5px}
  main{padding:13px 10px 60px} .card{padding:13px}
}

/* 資料還沒收齊的月份：不可以長得像「確定全員可以」 */
.cell.unsure{border-color:var(--line2);background:#f7f4ef;border-style:dashed}
.cell.unsure .cnt{color:var(--tx3)}
.mon h3 .tag.warn2{color:var(--accent);background:#eaf2f8;border-color:#a9c4dc}