/* 宗主御覽｜沿用 2026/09/24 核准樣稿的設計 */
:root{
  --bg:#eef1f5;--surface:#fff;--surface-2:#f5f7fa;--ink:#14223a;--ink-2:#44536a;--muted:#667487;--line:#d9e0e8;
  --navy:#12233d;--navy-2:#1d3456;--on-navy:#eef2f7;--on-navy-2:#b7c3d3;--champagne:#d6ba82;
  --gold:#80612a;--gold-wash:#f6f0e4;--gold-line:#d9c49a;--danger:#a3362c;--danger-wash:#fbeeec;--danger-solid:#a3362c;
  --primary-bg:var(--navy);--primary-ink:#fff;--focus:#b8904a;--hero:#12233d;--hero-line:#12233d;
  --serif:"Noto Serif TC","Songti TC","PMingLiU","MingLiU",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c1524;--surface:#142039;--surface-2:#1a2946;--ink:#e7ecf3;--ink-2:#bac5d4;--muted:#95a3b6;--line:#2a3b58;
  --navy:#08111f;--navy-2:#1b3052;--on-navy:#eef2f7;--on-navy-2:#a9b6c8;--champagne:#dcc28d;
  --gold:#dcc28d;--gold-wash:#2b2a2a;--gold-line:#6f6048;--danger:#f0a197;--danger-wash:#3a2023;--danger-solid:#b0382c;
  --primary-bg:#dcc28d;--primary-ink:#0f1c31;--focus:#dcc28d;--hero:#1a2d4c;--hero-line:#3a5075;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1524;--surface:#142039;--surface-2:#1a2946;--ink:#e7ecf3;--ink-2:#bac5d4;--muted:#95a3b6;--line:#2a3b58;
  --navy:#08111f;--navy-2:#1b3052;--on-navy:#eef2f7;--on-navy-2:#a9b6c8;--champagne:#dcc28d;
  --gold:#dcc28d;--gold-wash:#2b2a2a;--gold-line:#6f6048;--danger:#f0a197;--danger-wash:#3a2023;--danger-solid:#b0382c;
  --primary-bg:#dcc28d;--primary-ink:#0f1c31;--focus:#dcc28d;--hero:#1a2d4c;--hero-line:#3a5075;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);overflow-wrap:anywhere}
@media (min-width:560px){body{background:color-mix(in srgb,var(--bg) 70%,#8a95a5)}}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg);position:relative}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 頂欄 */
.top{position:sticky;top:0;z-index:20;background:var(--navy);color:var(--on-navy);border-bottom:1px solid #a88b55;padding-top:env(safe-area-inset-top)}
.top-in{display:flex;align-items:center;gap:12px;height:56px;padding:0 8px 0 16px}
.crest{width:32px;height:36px;display:grid;place-items:center;border:1px solid var(--champagne);color:var(--champagne);font:20px/1 var(--serif);flex:none}
.brand{font:600 18px/1.2 var(--serif);letter-spacing:.18em;flex:1;min-width:0;white-space:nowrap}
.account-btn{display:flex;align-items:center;gap:6px;min-height:44px;max-width:52%;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--on-navy-2);font-size:13px;cursor:pointer}
.account-btn .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-panel{background:var(--navy-2);color:var(--on-navy);padding:14px 16px 16px;font-size:14px}
.account-panel p{margin:0 0 12px;color:var(--on-navy-2)}
.account-panel button{min-height:44px;width:100%;border:1px solid #4a6285;border-radius:8px;background:transparent;color:var(--on-navy);cursor:pointer}
.demo-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 8px 0 16px;background:#6e521c;color:#fff;font-size:13px;font-weight:600}
.demo-strip button{min-height:44px;padding:0 12px;border:0;background:none;color:#fff;text-decoration:underline;cursor:pointer;font-size:13px}
.demo-panel{background:var(--navy-2);color:var(--on-navy);padding:14px 16px 16px;font-size:14px}
.demo-panel p{margin:0 0 10px;color:var(--on-navy-2)}
.demo-panel .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.demo-panel button{min-height:44px;border:1px solid #4a6285;border-radius:8px;background:transparent;color:var(--on-navy);font-size:14px;cursor:pointer;padding:4px 6px}
.demo-panel button[aria-pressed="true"]{border-color:var(--champagne);color:var(--champagne)}

main{padding:16px 16px calc(100px + env(safe-area-inset-bottom))}
body[data-mode="bar"] main{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
body[data-mode="plain"] main{padding-bottom:32px}
h1{font:600 24px/1.35 var(--serif);margin:4px 0;letter-spacing:.04em}
h2{font-size:15px;font-weight:600;margin:0;color:var(--ink-2);letter-spacing:.04em}
p{margin:0}
.meta{font-size:14px;color:var(--muted)}
.meta a{color:var(--gold)}
.sec{margin-top:28px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;min-height:44px}
.sec-head a{min-height:44px;display:inline-flex;align-items:center;padding:0 4px;color:var(--gold);text-decoration:none;font-size:15px}
.note{font-size:14px;color:var(--muted);margin-top:6px}
.back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:-6px 0 4px -6px;padding:0 10px 0 2px;color:var(--gold);text-decoration:none;font-size:15px}
.loading{padding:48px 0;text-align:center;color:var(--muted)}
.mt{margin-top:14px}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;text-align:center}
.btn-primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-ink)}
.btn-danger{background:var(--danger-solid);border-color:var(--danger-solid);color:#fff}
.btn-block{display:flex;width:100%}
.btn-sm{min-height:44px;padding:0 14px;font-size:15px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.6;cursor:default}
.link-btn{min-height:44px;padding:0 4px;border:0;background:none;color:var(--gold);font-size:14px;cursor:pointer;white-space:nowrap}
.text-danger{color:var(--danger)}

/* 首頁 */
.searchbox{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 14px;min-height:52px;color:var(--muted)}
.searchbox input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px;color:var(--ink);min-height:50px;padding:0}
.searchbox:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
.results{margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.results:empty{display:none}
.empty-line{padding:14px 16px;color:var(--muted);font-size:15px}
.empty-line.small{padding:10px 14px;font-size:13px}
.pending-card{margin-top:16px;background:var(--hero);border:1px solid var(--hero-line);color:var(--on-navy);border-radius:14px;padding:18px 16px 16px}
.pc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pc-label{font-size:15px;color:var(--on-navy-2)}
.pc-count{font:600 40px/1 var(--serif);color:var(--champagne);font-variant-numeric:tabular-nums}
.pc-count small{font:14px var(--sans);color:var(--on-navy-2);margin-left:4px}
.pc-list{list-style:none;margin:10px 0 14px;padding:0;border-top:1px solid #2c4468}
.pc-list a{display:flex;align-items:center;gap:8px;min-height:48px;border-bottom:1px solid #2c4468;text-decoration:none;color:var(--on-navy)}
.pc-list .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.pc-list .c{font-size:14px;color:var(--on-navy-2);white-space:nowrap}
.pending-card .btn-primary{background:var(--champagne);border-color:var(--champagne);color:#12233d}
.pending-card.is-empty{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.pending-card.is-empty .pc-label,.pending-card.is-empty .pc-count small,.pending-card.is-empty .pc-count{color:var(--muted)}
.tile{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;min-height:64px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-decoration:none}
.tile .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--gold-wash);color:var(--gold);flex:none}
.tile .tx{flex:1;min-width:0}
.tile strong{display:block;font-size:16px}
.tile small{display:block;font-size:13px;color:var(--muted)}

/* 清單 */
.list{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list+.list{margin-top:10px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:64px;text-decoration:none;border:0;border-top:1px solid var(--line);background:none;width:100%;text-align:left;cursor:pointer}
.row:first-child{border-top:0}
.row .main{flex:1;min-width:0}
.row .title{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.row .title strong{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
.row .sub{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .side{font-size:13px;color:var(--muted);white-space:nowrap}
.row .chev{color:var(--muted)}
.avatar{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--navy);color:var(--champagne);font:18px/1 var(--serif);flex:none}
.avatar.lg{width:56px;height:56px;font-size:26px;border-radius:12px}
.more{margin-top:12px}
.more .btn{width:100%}
.more .err{display:block;margin-bottom:8px}

/* 標籤 */
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px;white-space:nowrap;flex:none}
.pill-pending{border:1px solid var(--ink-2);color:var(--ink-2)}
.pill-pending:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-done{background:var(--gold-wash);color:var(--gold);border:1px solid var(--gold-line)}
.pill-need{border:1px dashed var(--gold);color:var(--gold)}
.pill-later,.pill-muted{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pill-warn{border:1px solid var(--danger);color:var(--danger)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:13px;padding:3px 9px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.lv{font-size:13px;padding:3px 9px;border-radius:6px;white-space:nowrap;border:1px solid var(--line);color:var(--ink-2)}
.lv-重要{background:var(--gold-wash);color:var(--gold);border-color:var(--gold-line)}
.lv-特殊{background:var(--navy);color:var(--champagne);border-color:var(--navy)}

/* 詳情 */
.status-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.block{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.block-title{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.04em;margin:0 0 8px}
.reasons{list-style:none;margin:0;padding:0}
.reasons li{padding:10px 0;border-top:1px solid var(--line)}
.reasons li:first-child{border-top:0;padding-top:0}
.reasons li:last-child{padding-bottom:0}
.r-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:2px}
.r-head strong{font-size:15px}
.r-head span{font-size:13px;color:var(--muted)}
.reasons p{font-size:16px;white-space:pre-wrap}
details.raw{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
details.raw>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:50px;padding:0 16px;cursor:pointer;color:var(--gold);font-size:15px}
details.raw>summary::-webkit-details-marker{display:none}
details.raw>summary:after{content:"展開";font-size:13px;color:var(--muted)}
details.raw[open]>summary:after{content:"收合"}
.raw-body{padding:0 16px 14px}
.quote{border-left:3px solid var(--gold-line);padding:2px 0 2px 12px;margin:6px 0 0;font-size:15px;color:var(--ink);white-space:pre-wrap}
.expired{font-size:14px;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:10px 12px;margin-top:6px}
.ext-link{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-size:14px;text-decoration:none}
.summary-text{font-size:17px;white-space:pre-wrap}
.summary-text.missing{color:var(--muted)}
.actions{display:grid;gap:8px;margin-top:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:8px;font-size:13px;color:var(--muted)}

/* 表單 */
.form-title{margin:28px 0 4px;font:600 18px/1.4 var(--serif);letter-spacing:.04em}
.field{margin:16px 0 0;border:0;padding:0;min-width:0}
.field>legend,.label{display:block;font-size:15px;font-weight:600;margin-bottom:8px;padding:0}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.label-row .label{margin:0}
.req{font-size:12px;font-weight:600;color:var(--gold);margin-left:4px}
.opt{font-size:12px;font-weight:400;color:var(--muted);margin-left:4px}
textarea,input.text,input[type=date]{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 14px;font-size:16px;line-height:1.55}
input.text,input[type=date]{min-height:50px}
textarea{min-height:120px;resize:vertical}
textarea.short{min-height:88px}
textarea:focus,input.text:focus,input[type=date]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent)}
[aria-invalid="true"]{border-color:var(--danger)!important}
.field-foot{display:flex;justify-content:space-between;gap:10px;margin-top:4px;font-size:13px;color:var(--muted);min-height:20px}
.hint{font-size:13px;color:var(--muted);margin-top:4px}
.err{color:var(--danger);font-size:14px;font-weight:600}
.err:empty{display:none}
.chips{display:grid;gap:8px}
.chips.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.chips.c3,.chips.c6{grid-template-columns:repeat(3,minmax(0,1fr))}
.chip{position:relative;display:block}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 4px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:16px;white-space:nowrap}
.chip input:checked+span{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-ink);font-weight:600}
.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.fieldset-invalid .chip span{border-color:var(--danger)}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.quick button{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line);background:var(--surface-2);font-size:14px;cursor:pointer}
.picked{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 10px 10px 14px}
.picked .main{flex:1;min-width:0}
.picked strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fine{font-size:13px;color:var(--muted);margin-top:14px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.switch>span{display:flex;flex-direction:column;min-width:0}
.switch input{width:24px;height:24px;accent-color:var(--navy);flex:none}
.decline{margin-top:20px;border-top:1px solid var(--line);padding-top:8px}
.decline .confirm{background:var(--danger-wash);border-radius:12px;padding:12px 14px;margin-top:8px}
.decline .confirm p{font-size:14px;margin-bottom:10px}
.decline .confirm .two{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}

/* 提示列 */
.banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 12px;border-radius:10px;font-size:14px;line-height:1.5}
.banner .msg{flex:1;min-width:0}
.banner button,.banner a{min-height:44px;flex:none;padding:0 12px;border-radius:8px;border:1px solid currentColor;background:none;color:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.banner.warn{background:var(--gold-wash);border:1px solid var(--gold-line);color:var(--ink)}
.banner.err{background:var(--danger-wash);border:1px solid var(--danger);color:var(--ink)}
.banner.info{background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.page-msg{margin-top:12px}

/* 底部 */
.actionbar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;z-index:15;display:grid;grid-template-columns:1fr 1.6fr;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
.actionbar .btn{min-height:52px;width:100%}
.actionbar .bar-msg{grid-column:1/-1}
.actionbar .bar-msg:empty{display:none}
.actionbar.single{grid-template-columns:1fr}
.nav{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;z-index:15;display:grid;grid-template-columns:repeat(var(--tabs,4),1fr);background:var(--surface);border-top:1px solid var(--line);padding:4px 4px env(safe-area-inset-bottom)}
body[data-mode="bar"] .nav,body[data-mode="plain"] .nav{display:none}
.nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;text-decoration:none;color:var(--muted);font-size:12px;border-radius:10px}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a[aria-current="page"] svg{color:var(--gold)}
.nav .badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#b0382c;color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center}
.toast{position:fixed;left:0;right:0;margin:0 auto;max-width:448px;width:calc(100% - 32px);bottom:calc(78px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;border:1px solid #37507a;border-radius:12px;padding:10px 10px 10px 16px;font-size:15px;box-shadow:0 10px 28px #0a142640}
body[data-mode="bar"] .toast{bottom:calc(150px + env(safe-area-inset-bottom))}
body[data-mode="plain"] .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
.toast .msg{flex:1;min-width:0}
.toast a{min-height:44px;display:inline-flex;align-items:center;padding:0 12px;border-radius:8px;border:1px solid var(--champagne);color:var(--champagne);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}

/* 事蹟卡 */
.deed{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:10px;text-decoration:none}
.deed-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.src{display:inline-flex;align-items:center;gap:6px;min-width:0}
.src svg{width:16px;height:16px;color:var(--gold)}
.deed-sum{margin-top:6px;font-size:16px;white-space:pre-wrap}
.deed-sum.missing{color:var(--muted)}
.deed-more{display:flex;align-items:center;min-height:44px;margin-top:6px;border-top:1px solid var(--line);color:var(--gold);font-size:14px}
.month{font-size:13px;font-weight:600;color:var(--muted);margin:18px 0 -2px;letter-spacing:.06em}
.filter{display:flex;flex-wrap:wrap;gap:8px}
.filter button{flex:none;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--line);background:var(--surface);font-size:14px;cursor:pointer}
.filter button[aria-pressed="true"]{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-ink);font-weight:600}
.profile-head{display:flex;align-items:center;gap:14px;margin-top:4px}
.profile-head .main{flex:1;min-width:0}
.profile-head h1{margin:0}
.empty{text-align:center;padding:36px 16px;background:var(--surface);border:1px dashed var(--line);border-radius:12px;margin-top:14px}
.empty strong{display:block;font-size:17px;margin-bottom:4px}
.empty p{color:var(--muted);font-size:15px}
.empty .btn{margin-top:16px}
.status-card{margin-top:14px;display:flex;gap:12px;align-items:flex-start;background:var(--gold-wash);border:1px solid var(--gold-line);border-radius:12px;padding:14px 16px}
.status-card .ic{color:var(--gold);margin-top:2px}
.status-card strong{display:block;color:var(--gold);font-size:16px}
.status-card p{font-size:14px;color:var(--ink-2)}

/* 登入與全頁狀態 */
.screen{min-height:calc(100dvh - 60px);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px 24px;text-align:center}
.screen .crest{width:56px;height:64px;font-size:34px;margin:0 auto 6px;border-color:var(--gold);color:var(--gold)}
.screen h1{font-size:26px}
.screen p{color:var(--muted)}
.screen .btn{margin-top:10px}

@media (max-width:359px){
  main{padding-left:12px;padding-right:12px}
  .brand{letter-spacing:.1em;font-size:17px}
  .chip span{font-size:15px}
  .actionbar{padding-left:12px;padding-right:12px}
}