/* 沖繩家族旅行 — 韓系手帳風
   目錄：1 色票與字型  2 基本  3 頁首  4 分頁  5 區塊標題  6 行程  7 資料表與連結
         8 航班與行李  9 預約代碼  10 準備清單  11 體驗  12 記帳  13 記帳視窗  14 登入頁  15 折價券  16 緊急 */

/* 1 色票與字型 ------------------------------------------------------------ */
:root {
  --paper: #FAF7F2; --surface: #FFFFFF; --ink: #4A3F38; --muted: #9A8C80; --line: #D9CFC4; --soft: #F1EBE3;
  --link: #B9776F; --red: #C9433F; --on-accent: #4A3F38;
  --rose: #E7B4B4;   --rose-soft: #F8E6E3;
  --sage: #A9C3A6;   --sage-soft: #E8F0E5;
  --butter: #E9CF8E; --butter-soft: #F8F0D9;
  --sky: #A8C4DA;    --sky-soft: #E4EEF5;
  --lav: #BBA9DA;    --lav-soft: #ECE6F6;
  --peach: #EDBB98;  --peach-soft: #FAE9DC;
  --yellow: #E2C24F; --yellow-soft: #FAEDB0;
  --mint: #9ACDBE;   --mint-soft: #E2F2EC;
  --f-head: "LXGW WenKai TC", "Zen Maru Gothic", serif;
  --f-body: "Zen Maru Gothic", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --f-pen: "Nanum Pen Script", "LXGW WenKai TC", cursive;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #24201D; --surface: #2D2825; --ink: #EDE4DA; --muted: #A99C90; --line: #4A423C; --soft: #332D29;
    --link: #E2A39B; --red: #F08A80; --on-accent: #24201D;
    --rose: #D9A0A0;   --rose-soft: #43312F;
    --sage: #9DBA9A;   --sage-soft: #2F3A2E;
    --butter: #DCC27E; --butter-soft: #3F3825;
    --sky: #9BB8CF;    --sky-soft: #2C3640;
    --lav: #AE9BD2;    --lav-soft: #332C45;
    --peach: #DDA985;  --peach-soft: #42322A;
    --yellow: #CDAF45; --yellow-soft: #463C1C;
    --mint: #85BBAB;   --mint-soft: #263A34;
    color-scheme: dark;
  }
}

/* 2 基本 ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.8; }
img { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 700; line-height: 1.4; margin: 0; text-wrap: balance; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.wrap { max-width: 640px; margin: 0 auto; padding: 28px 20px 80px; }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.detail { font-size: .82rem; color: var(--muted); }
.fineprint { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.hl { background: linear-gradient(transparent 60%, var(--rose-soft) 60%); padding: 0 2px; }
.hl::after { content: " ✿"; color: var(--rose); font-size: .85em; }
/* 海豚輕輕跳（主頁體驗分頁、登入頁） */
.hop { animation: hop 3.2s ease-in-out infinite; }
@keyframes hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hop { animation: none; } }

/* 3 頁首 ------------------------------------------------------------------ */
.mast { position: relative; display: grid; gap: 4px; padding: 8px 0 22px; border-bottom: 1.5px solid var(--ink); }
.mast .pen { font-family: var(--f-pen); font-size: 1.6rem; color: var(--link); line-height: 1; }
.mast h1 { font-size: clamp(2rem, 8vw, 2.6rem); letter-spacing: .02em; }
.mast .line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88rem; color: var(--muted); }
.mast .count { margin-top: 8px; font-size: .92rem; }
.mast .count b { font-size: 1.5rem; color: var(--link); margin: 0 4px; line-height: 1; }
.mast .doodle { position: absolute; right: 0; top: 0; width: 118px; height: 96px; color: var(--ink); }

/* 4 分頁 ------------------------------------------------------------------ */
.tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; gap: 2px; margin: 0 -20px; padding: 8px 14px 4px; overflow-x: auto; scrollbar-width: none; background: var(--paper); }
.tabs button { flex: none; padding: 8px 10px; border: 0; background: none; color: var(--muted); font: inherit; font-family: var(--f-head); font-size: 1.08rem; cursor: pointer; --tc: var(--rose-soft); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 55%, var(--tc) 55%, var(--tc) 85%, transparent 85%) no-repeat center / calc(100% - 10px) 100%; }
.tabs [data-tab="flight"] { --tc: var(--lav-soft); }
.tabs [data-tab="stay"]   { --tc: var(--sage-soft); }
.tabs [data-tab="car"]    { --tc: var(--butter-soft); }
.tabs [data-tab="exp"]    { --tc: var(--sky-soft); }
.tabs [data-tab="prep"]   { --tc: var(--peach-soft); }
.tabs [data-tab="coupon"] { --tc: var(--mint-soft); }
.tabs [data-tab="money"]  { --tc: var(--yellow-soft); }
.tabs [data-tab="sos"]    { --tc: var(--rose-soft); }

/* 行程的日期切換 */
.daypick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px; padding-bottom: 12px; border-bottom: 1.2px dashed var(--line); }
.daypick button { display: grid; padding: 8px 4px; border: 0; border-radius: 16px; background: none; color: var(--muted); font: inherit; font-size: .78rem; line-height: 1.35; cursor: pointer; }
.daypick button:hover { background: var(--soft); }
.daypick button b { font-size: 1rem; color: var(--ink); line-height: 1.2; }
.daypick button:nth-child(1) { --c: var(--rose); }
.daypick button:nth-child(2) { --c: var(--sage); }
.daypick button:nth-child(3) { --c: var(--butter); }
.daypick button:nth-child(4) { --c: var(--sky); }
.daypick button[aria-selected="true"], .daypick button[aria-selected="true"] b { background: var(--c); color: var(--on-accent); }

/* 準備的小分頁 */
.subtabs { display: flex; gap: 22px; margin-top: 18px; padding-bottom: 10px; border-bottom: 1.2px dashed var(--line); }
.subtabs button { padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .95rem; line-height: 1.35; cursor: pointer; }
.subtabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; text-decoration: underline wavy var(--peach); text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.subtabs small { margin-left: auto; align-self: center; font-size: .78rem; color: var(--muted); }

/* 5 區塊與標題 ------------------------------------------------------------ */
.sec { margin-top: 26px; --c: var(--rose); --c-soft: var(--rose-soft); }
#d2, #stay { --c: var(--sage); --c-soft: var(--sage-soft); }
#d3, #car  { --c: var(--butter); --c-soft: var(--butter-soft); }
#d4, #exp  { --c: var(--sky); --c-soft: var(--sky-soft); }
#flight    { --c: var(--lav); --c-soft: var(--lav-soft); }
#prep, #pack { --c: var(--peach); --c-soft: var(--peach-soft); margin-top: 6px; }
#coupon    { --c: var(--mint); --c-soft: var(--mint-soft); }
#money     { --c: var(--yellow); --c-soft: var(--yellow-soft); }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1.2px dashed var(--line); }
.sec-h.spaced { margin-top: 36px; margin-bottom: 14px; }
.sec-h h2 { display: inline; padding: 0 4px; font-size: 1.3rem; background: linear-gradient(transparent 62%, var(--c-soft) 62%); }
.sec-h small { font-size: .8rem; color: var(--muted); }
.sub { margin-top: 18px; font-size: 1rem; }

/* 6 行程 ------------------------------------------------------------------ */
.dayh { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; margin-bottom: 12px; }
.day-doodle { position: absolute; top: -4px; right: 0; width: 76px; height: 58px; color: var(--ink); }
.day-doodle .f, .day-doodle .cab circle { fill: var(--c-soft); }
.day-doodle .w { stroke: var(--sky); }
.dayh .badge { display: grid; place-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--c-soft); text-align: center; }
.dayh .d { font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.dayh .w { font-size: .6rem; letter-spacing: .06em; white-space: nowrap; color: var(--muted); }
.dayh h2 { font-size: 1.35rem; }
.dayh .via { grid-column: 1 / -1; margin-top: 6px; font-size: .84rem; color: var(--muted); }
.wx { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: .84rem; }
.wx:empty { display: none; }
.wx .ic { font-size: 1.1rem; line-height: 1; }
.wx .temp { font-weight: 700; font-variant-numeric: tabular-nums; }
.wx .rain { padding: 0 8px; border-radius: 999px; background: var(--sky-soft); font-size: .78rem; }
.wx .rain.high { background: var(--rose-soft); color: var(--red); font-weight: 700; }
.wx.wait { color: var(--muted); font-size: .78rem; }
.wx-sum { margin-top: 16px; }
.wx-sum-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.wx-sum-h h3 { font-size: 1rem; }
.wx-sum-h small { font-size: .74rem; color: var(--muted); }
.wx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wx-tile { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 12px 6px; border-radius: 18px; background: var(--c-soft); text-align: center; }
.wx-tile:nth-child(1) { --c-soft: var(--rose-soft); }
.wx-tile:nth-child(2) { --c-soft: var(--sage-soft); }
.wx-tile:nth-child(3) { --c-soft: var(--butter-soft); }
.wx-tile:nth-child(4) { --c-soft: var(--sky-soft); }
.wx-tile > b { font-size: 1rem; line-height: 1.2; }
.wx-tile .dow { font-size: .62rem; letter-spacing: .1em; color: var(--muted); }
.wx-tile .wx { display: grid; justify-items: center; gap: 2px; margin-top: 4px; font-size: .78rem; }
.wx-tile .wx .ic { font-size: 1.8rem; }
.wx-tile .wx .rain { background: var(--surface); }
.wx-tile .wx.wait { font-size: .72rem; line-height: 1.4; }
@media (max-width: 480px) { .wx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; }
.rows .t { padding-top: 1px; font-weight: 500; font-size: .88rem; text-align: right; font-variant-numeric: tabular-nums; }
.rows .b { position: relative; min-width: 0; padding: 0 0 18px 18px; border-left: 1.5px dotted var(--line); }
.rows .b::before { content: ""; position: absolute; left: -6px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.rows .b:has(.hl)::before { background: var(--c); border-color: var(--c); }
.rows > li:last-child .b { padding-bottom: 0; }
.rows .ttl { font-weight: 500; font-size: 1rem; }
.rows .tag { margin-left: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; color: var(--muted); vertical-align: 2px; }
.rows ul { margin: 2px 0 0; padding-left: 1.1em; font-size: .86rem; color: var(--muted); }
.rows ul li::marker { content: "– "; }
.rows li.mv .t, .rows li.mv .ttl { font-size: .8rem; color: var(--muted); }
.rows li.mv .b { padding-bottom: 12px; }
.rows li.mv .b::before { left: -4px; top: 10px; width: 5px; height: 5px; border-color: var(--muted); }

.park { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }
.park b { color: var(--link); font-weight: 700; }
.picks { display: grid; gap: 6px; margin-top: 8px; font-size: .84rem; }
.picks div { padding: 6px 12px; border-radius: 12px; background: var(--c-soft); }

.meals { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border-top: 1.2px solid var(--ink); border-bottom: 1.2px solid var(--ink); }
.meals div { min-width: 0; padding: 8px 6px; text-align: center; border-left: 1px dashed var(--line); }
.meals div:first-child { border-left: 0; }
.meals span { display: block; font-family: var(--f-pen); font-size: 1.15rem; color: var(--muted); line-height: 1.1; }
.meals b { font-weight: 500; font-size: .84rem; overflow-wrap: anywhere; }

.aside { display: grid; gap: 12px; margin-top: 18px; font-size: .9rem; }
.aside > div { padding: 12px 16px; border: 1.2px solid var(--line); border-radius: 16px; background: var(--surface); }
.aside h3 { margin-bottom: 2px; font-size: .95rem; }
.aside ul { margin: 0; padding-left: 1.1em; }
.aside ul li::marker { content: "✿ "; color: var(--c); }

.opts { display: grid; gap: 10px; }
.opt { padding: 12px 14px; border: 1.2px solid var(--line); border-radius: 16px; background: var(--surface); }
.opt h3 { font-size: .98rem; }
.opt h3 b { margin-right: 6px; color: var(--link); }
.opt p { margin: 0 0 6px; font-size: .8rem; color: var(--muted); }
.opt .rows > li { grid-template-columns: 44px 1fr; gap: 10px; font-size: .88rem; }
.opt .rows .b { padding-bottom: 8px; }

/* 7 資料表、步驟與連結 ---------------------------------------------------- */
.kv { display: grid; grid-template-columns: 5.6em 1fr; gap: 0 12px; margin: 0; }
.kv dt, .kv dd { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.kv dt { font-size: .84rem; color: var(--muted); }
.kv dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.kv dd.withlink { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.steps { margin: 4px 0 0; padding-left: 1.4em; }
.steps li::marker { font-weight: 700; color: var(--link); }
.steps .ilink { margin-left: 4px; }
.plain { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.links.tight { margin-top: 6px; }
.links a, .ilink { padding: 4px 14px; border: 1.2px solid var(--ink); border-radius: 999px; color: var(--ink); font-size: .85rem; text-decoration: none; white-space: nowrap; }
.ilink { flex: none; padding: 2px 12px; font-size: .8rem; }
.links a::after, .ilink::after { content: " ↗"; }

/* 8 航班與行李 ------------------------------------------------------------ */
.flt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border: 1.2px solid var(--line); border-radius: 16px; background: var(--surface); }
.flt .no { font-weight: 700; font-size: .95rem; color: var(--link); letter-spacing: .03em; }
.flt .seg { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 1.05rem; font-weight: 500; }
.flt .ap { display: grid; white-space: nowrap; }
.flt .ap small { font-size: .75rem; font-weight: 400; color: var(--muted); }
.flt .arr { color: var(--muted); }
.flt .r { text-align: right; font-size: .8rem; color: var(--muted); }

.bags { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: .86rem; }
.bags > div { min-width: 0; padding: 10px 12px; border: 1.2px solid var(--line); border-radius: 14px; background: var(--surface); }
.bags > div:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.bags > div:first-child b { grid-column: 1 / -1; }
.bags b { display: block; margin-bottom: 4px; font-family: var(--f-head); }
.bags .bl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.bags .bl span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.bags .bi { flex: none; width: 18px; height: 18px; color: var(--ink); }
.bags .bq { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* 9 預約代碼（可複製） ---------------------------------------------------- */
.codes { margin-bottom: 8px; }
.codes .row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.codes .lbl { font-size: .8rem; color: var(--muted); }
.codes .val { font-weight: 500; font-size: 1.02rem; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.codes button { grid-row: span 2; padding: 3px 14px; border: 1.2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.codes button.ok { background: var(--rose); border-color: var(--rose); }

/* 10 準備清單 ------------------------------------------------------------- */
.todo { list-style: none; margin: 0; padding: 0; }
.todo li { border-bottom: 1px dashed var(--line); }
.todo label { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 10px 0; cursor: pointer; }
.todo input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 18px; height: 18px; margin-top: 5px; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--surface); cursor: pointer; }
.todo input:checked { background: var(--rose); }
.todo input:checked::after { content: "✓"; font-size: 12px; line-height: 1; color: var(--ink); }
.todo input:checked + span { color: var(--muted); text-decoration: line-through; }
.todo .when { display: block; font-size: .76rem; color: var(--link); }
.who { display: inline-block; margin-top: 22px; padding: 2px 12px; border-radius: 999px; font-size: 1.1rem; }
.who:first-child { margin-top: 4px; }
.who.adult { background: var(--peach-soft); }
.who.kid { background: var(--butter-soft); }

/* 11 體驗 ----------------------------------------------------------------- */
.dolphin { width: 96px; height: 72px; margin: -26px auto -6px 10px; align-self: flex-end; color: var(--ink); }
.lead { margin: 0 0 10px; }
.jp { display: grid; gap: 4px; padding: 14px 16px; border: 1.2px solid var(--line); border-radius: 16px; background: var(--surface); }
.jp-ja { font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.jp-kana { font-size: .85rem; color: var(--link); }
.jp-zh { font-size: .85rem; color: var(--muted); }

/* 12 記帳 ----------------------------------------------------------------- */
.m-sum { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 16px 18px; border: 1.2px solid var(--line); border-radius: 18px; background: var(--surface); }
.m-total { display: grid; gap: 2px; font-size: .82rem; }
.m-total b { font-size: 1.8rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.m-rate { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.m-rate input { width: 76px; padding: 8px 12px; border: 1.2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.m-rate input:focus { outline: 2px solid var(--c); outline-offset: 1px; }
.m-err { margin: 0; font-size: .85rem; color: var(--link); }

/* 分帳：每家要付給誰 */
.m-fam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-fam > div { display: grid; gap: 2px; padding: 10px 12px; border: 1.2px solid var(--line); border-radius: 14px; background: var(--surface); font-size: .84rem; }
.m-fam > div.clear { opacity: .7; }
.m-fam b { font-size: .95rem; }
.m-owe { display: flex; justify-content: space-between; gap: 8px; }
.m-owe .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-owe.zero { color: var(--muted); }
.m-owe.zero .num { font-weight: 400; }

/* 明細 */
.m-list-h { align-items: center; }
.m-add { display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border: 1.2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 500; line-height: 1.4; cursor: pointer; }
.m-add:hover { background: var(--yellow-soft); }
.m-add svg { width: 11px; height: 11px; }
.m-row-h, .m-top { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 7rem 4rem; column-gap: 14px; }
.m-row-h { margin-top: 6px; padding: 4px 2px; border-bottom: 1.2px solid var(--line); font-size: .74rem; color: var(--muted); }
.m-row-h span:nth-child(2), .m-row-h span:nth-child(4) { text-align: right; }
.m-day { margin-top: 16px; }
.m-day h3 { margin-bottom: 4px; padding: 0 2px; font-size: .9rem; color: var(--muted); }
.m-item { border-bottom: 1px dashed var(--line); }
.m-top { align-items: start; padding: 12px 2px; }
.m-top.can-open { cursor: pointer; }
.m-top:hover { background: var(--soft); }
.m-top .c-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: inherit; }
.m-top .t { min-width: 0; font-weight: 500; }
.m-top .chev { flex: none; width: .8em; color: var(--muted); transition: transform .15s; }
.m-item.open .chev { transform: rotate(90deg); }
.m-top .c-amt { display: grid; min-width: 0; text-align: right; }
.m-top .a { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-top .s { font-size: .76rem; color: var(--muted); }
.m-item.pending .t, .m-item.pending .a { color: var(--muted); }
.c-st { justify-self: start; padding: 1px 10px; border-radius: 999px; font-size: .76rem; white-space: nowrap; }
.st-pending { background: var(--rose-soft); }
.st-paid { background: var(--butter-soft); }
.st-settled { background: var(--sage-soft); }
.m-act { display: flex; justify-content: flex-end; gap: 2px; }
.m-act button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: .72rem; white-space: nowrap; cursor: pointer; }
.m-act button svg { width: 15px; height: 15px; }
.m-act button:hover { background: var(--surface); color: var(--ink); }
.m-act .del:hover, .m-act .del.confirm { color: var(--red); }
.m-act .del.confirm { width: auto; padding: 0 6px; background: var(--rose-soft); }
.m-panel { padding: 0 2px 12px 1.4em; }
.m-sub { display: grid; grid-template-columns: 1.3fr 1.2fr repeat(3, 1fr); gap: 2px 10px; padding-top: 2px; font-size: .78rem; }
.m-sub span { min-width: 0; overflow-wrap: anywhere; }
.m-sub .h { font-size: .72rem; color: var(--muted); }
.m-sub .h:nth-child(n+3), .m-sub .n { text-align: right; font-variant-numeric: tabular-nums; }
.m-sub .neg { color: var(--red); font-weight: 700; }

/* 13 記帳視窗 ------------------------------------------------------------- */
.m-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(40, 32, 28, .32); backdrop-filter: blur(2px); }
.m-dialog { position: relative; width: 100%; max-width: 480px; max-height: calc(100% - 32px); overflow: auto; padding: 26px 24px 22px;
  border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 14px 40px rgba(74, 63, 56, .14);
  background-color: var(--paper); background-image: linear-gradient(var(--soft) 1px, transparent 1px), linear-gradient(90deg, var(--soft) 1px, transparent 1px); background-size: 18px 18px; }
.m-tape { position: absolute; top: 8px; left: 50%; width: 96px; height: 22px; border-radius: 2px; transform: translateX(-50%) rotate(-3deg); background: repeating-linear-gradient(45deg, var(--yellow-soft) 0 7px, color-mix(in srgb, var(--yellow) 55%, var(--paper)) 7px 14px); }
.m-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.m-dlg-head .pen { display: block; font-family: var(--f-pen); font-size: 1.25rem; color: var(--link); line-height: 1; }
.m-dlg-head h2 { font-size: 1.2rem; letter-spacing: .02em; }
.m-close { display: grid; place-items: center; width: 28px; height: 28px; margin-top: -4px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.m-close:hover { background: var(--soft); color: var(--ink); }
.m-form { display: grid; gap: 14px; }
.m-form .m-title { min-width: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; outline: none; }
.m-what { display: grid; gap: 6px; margin-bottom: 4px; }
.m-amt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.m-form .m-title:focus, .m-amt:focus-within { border-color: var(--muted); }
.m-amt input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--f-head); font-size: 1.7rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; appearance: textfield; }
.m-amt input::-webkit-outer-spin-button, .m-amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-amt input::placeholder { color: var(--line); font-weight: 500; }
.m-cur { display: flex; flex: none; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.m-cur button { padding: 2px 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; }
.m-cur button[aria-pressed="true"] { background: var(--yellow-soft); color: var(--ink); font-weight: 700; }
.m-field { display: grid; grid-template-columns: 3.8em 1fr; align-items: start; gap: 10px; }
.m-lbl { padding-top: 5px; font-family: var(--f-head); font-size: .8rem; letter-spacing: .04em; color: var(--muted); }
.m-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-chips button { padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.m-chips button:hover { border-color: var(--muted); color: var(--ink); }
.m-chips button[aria-pressed="true"] { border-color: var(--c); background: var(--c-soft); color: var(--ink); font-weight: 700; }
#m-kind { --c: var(--butter); --c-soft: var(--butter-soft); }
#m-status-chips { --c: var(--rose); --c-soft: var(--rose-soft); }
#m-payer, #m-to { --c: var(--sage); --c-soft: var(--sage-soft); }
#m-split { --c: var(--sky); --c-soft: var(--sky-soft); }
#m-day { --c: var(--peach); --c-soft: var(--peach-soft); }
.m-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--line); }
.m-actions .btn-del { margin-right: auto; padding: 6px 4px; border: 0; background: none; color: var(--link); font: inherit; font-size: .82rem; cursor: pointer; }
.m-actions .btn-cancel { margin-left: auto; padding: 8px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; }
.m-actions .btn-save { padding: 7px 22px; border: 1px solid var(--yellow); border-radius: 999px; background: var(--yellow-soft); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.m-actions .btn-save:hover { background: var(--yellow); }
.m-actions button:disabled { opacity: .5; cursor: default; }

/* 手機 -------------------------------------------------------------------- */
@media (max-width: 560px) {
  .m-row-h, .m-top { grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 8px; }
  .m-panel { padding-left: 2px; }
  .m-sub { gap: 2px 6px; }
  .m-modal { place-items: end stretch; padding: 0; }
  .m-dialog { max-width: none; max-height: 92%; border-radius: 20px 20px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 520px) { .opts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .m-fam { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .day-doodle { width: 60px; height: 46px; }
  .meals { grid-template-columns: 1fr 1fr; }
  .meals div:nth-child(3) { border-left: 0; }
  .meals div:nth-child(n+3) { border-top: 1px dashed var(--line); }
  .bags, .bags > div:first-child { grid-template-columns: 1fr; }
}

/* 14 登入頁 --------------------------------------------------------------- */
.login-page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 20px; }
.login { width: 100%; max-width: 360px; display: grid; justify-items: center; }
.login-scene { width: 100%; max-width: 300px; margin-bottom: -6px; color: var(--ink); }
.login-scene .fill-butter { fill: var(--butter-soft); }
.login-scene .fill-sky { fill: var(--sky-soft); }
.login-scene .fill-rose { fill: var(--rose-soft); }
.login-scene .fill-sage { fill: var(--sage-soft); }
.login-scene .fill-peach { fill: var(--peach-soft); }
.login-scene .sea, .login-scene .splash { stroke: var(--sky); }
.login-scene .flower circle { fill: var(--rose-soft); stroke: var(--rose); stroke-width: 1.2; }
.login-scene .star { fill: var(--butter-soft); stroke: var(--butter); stroke-width: 1.2; }
.login-card { width: 100%; padding: 26px 24px 22px; border: 1.2px solid var(--line); border-radius: 20px; background: var(--surface); text-align: center; }
.login-card .pen { font-family: var(--f-pen); font-size: 1.6rem; color: var(--link); line-height: 1; }
.login-card h1 { margin: 6px 0 2px; font-size: 1.8rem; letter-spacing: .02em; }
.login-card h1 span { padding: 0 4px; background: linear-gradient(transparent 62%, var(--rose-soft) 62%); }
.login-meta { margin: 0 0 22px; font-size: .84rem; color: var(--muted); }
.login-label { display: block; margin-bottom: 8px; font-family: var(--f-head); font-size: .9rem; color: var(--muted); }
.login-card input { width: 100%; padding: 8px 12px; border: 0; border-bottom: 1.5px dashed var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 1.5rem; letter-spacing: .5em; text-align: center; outline: none; }
.login-card input:focus { border-bottom-color: var(--rose); }
.login-card button { width: 100%; margin-top: 18px; padding: 9px; border: 1.2px solid var(--ink); border-radius: 999px; background: var(--rose-soft); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.login-card button:hover { background: var(--rose); }
.login-card .err { min-height: 1.4em; margin-top: 10px; font-size: .85rem; color: var(--red); }
.login-foot { margin: 14px 0 0; font-family: var(--f-pen); font-size: 1.3rem; color: var(--muted); }

/* 15 折價券 --------------------------------------------------------------- */
.cp-tabs { margin: 0 0 14px; }
.cp-tabs button[aria-selected="true"] { text-decoration-color: var(--mint); }
.cp-list { display: grid; gap: 12px; }
.cp { display: grid; gap: 6px; padding: 14px 16px; border: 1.2px solid var(--line); border-radius: 16px; background: var(--surface); }
.cp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.cp-head h3 { font-size: 1.08rem; }
.cp-deal { padding: 1px 10px; border-radius: 999px; background: var(--c-soft); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.cp-where { margin: 0; padding-left: 1.1em; font-size: .86rem; }
.cp-where li::marker { content: "✿ "; color: var(--c); }
.cp-where b { font-weight: 700; }
.cp-cond { margin: 0; font-size: .8rem; color: var(--muted); }
.cp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line); }
.cp-until { font-size: .78rem; color: var(--muted); }
.cp-until.soon { color: var(--red); font-weight: 700; }
.cp-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-btns button, .cp-btns a { padding: 3px 14px; border: 1.2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .8rem; text-decoration: none; cursor: pointer; }
.cp-btns .cp-show { background: var(--mint-soft); border-color: var(--mint); font-weight: 700; }
.cp-btns a::after { content: " ↗"; }
.cp-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; background: rgba(40, 32, 28, .6); }
.cp-modal img { display: block; width: auto; height: auto; max-width: min(100%, 560px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); object-fit: contain; border-radius: 12px; background: #fff; }
.cp-close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }

/* 16 緊急 ----------------------------------------------------------------- */
#sos .sec-h.spaced:first-of-type { margin-top: 18px; }
.calls { list-style: none; margin: 0; padding: 0; }
.calls li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.calls li > div { display: grid; min-width: 0; }
.calls b { font-weight: 700; }
.calls span { font-size: .8rem; color: var(--muted); }
.call { flex: none; padding: 5px 14px; border: 1.2px solid var(--ink); border-radius: 999px; background: var(--rose-soft); color: var(--ink); font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }