/* 基礎：設計變數、reset、共用元件、電腦版版面 */
:root{
  /* 主題色調：--th 色相、--thc 中性色染色倍率（「我的→外觀」可選，html[data-th] 切換） */
  --th:65;--thc:1.9;   /* 預設「暖炭」，與 home 的石墨藍區別 */
  --bg:oklch(.984 calc(.005*var(--thc)) var(--th));--surf:oklch(.998 calc(.003*var(--thc)) var(--th));--surf2:oklch(.965 calc(.0075*var(--thc)) var(--th));
  --ink:oklch(.33 calc(.007*var(--thc)) var(--th));--ink2:oklch(.53 calc(.007*var(--thc)) var(--th));--ink3:oklch(.66 calc(.006*var(--thc)) var(--th));
  --line:oklch(.33 calc(.008*var(--thc)) var(--th)/.13);
  --ac:oklch(.71 .14 68);--acink:oklch(.45 .11 62);--actint:oklch(.71 .14 68/.10);
  --navbg:oklch(.305 calc(.012*var(--thc)) var(--th));--navtxt:oklch(.80 calc(.008*var(--thc)) var(--th));--navact:oklch(.30 .05 52);
  --navglass:oklch(1 0 0/.40);--navedge:oklch(1 0 0/.55);--navicon:oklch(.42 calc(.01*var(--thc)) var(--th));
  --dang:oklch(.55 .15 25);--okc:oklch(.55 .13 152);
  --logo-member:url(/customer/img/logo-member.svg);
  --sb-thumb:oklch(.33 calc(.01*var(--thc)) var(--th)/.22);--sb-thumb-hover:oklch(.33 calc(.01*var(--thc)) var(--th)/.38);
  --fd:'Schibsted Grotesk','Noto Sans TC',sans-serif;
  --fb:'Hanken Grotesk','Noto Sans TC',sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:oklch(.215 calc(.005*var(--thc)) var(--th));--surf:oklch(.256 calc(.006*var(--thc)) var(--th));--surf2:oklch(.245 calc(.006*var(--thc)) var(--th));
  --ink:oklch(.93 calc(.005*var(--thc)) var(--th));--ink2:oklch(.74 calc(.006*var(--thc)) var(--th));--ink3:oklch(.59 calc(.006*var(--thc)) var(--th));
  --line:oklch(.93 calc(.005*var(--thc)) var(--th)/.13);
  --ac:oklch(.80 .13 72);--acink:oklch(.86 .10 76);--actint:oklch(.80 .13 72/.13);
  --navbg:oklch(.32 calc(.008*var(--thc)) var(--th));--navtxt:oklch(.80 calc(.008*var(--thc)) var(--th));--navact:oklch(.26 .05 50);
  --navglass:oklch(.30 calc(.008*var(--thc)) var(--th)/.42);--navedge:oklch(.95 calc(.005*var(--thc)) var(--th)/.16);--navicon:oklch(.86 calc(.006*var(--thc)) var(--th));
  --dang:oklch(.68 .15 25);--okc:oklch(.74 .14 152);
  --logo-member:url(/customer/img/logo-member-dark.svg);
  --sb-thumb:oklch(1 0 0/.18);--sb-thumb-hover:oklch(1 0 0/.34);
}}

/* 手動亮暗模式（我的→外觀）：html[data-mode] 強制覆蓋，未設定＝跟隨系統 */
:root[data-mode="dark"]{
  --bg:oklch(.215 calc(.005*var(--thc)) var(--th));--surf:oklch(.256 calc(.006*var(--thc)) var(--th));--surf2:oklch(.245 calc(.006*var(--thc)) var(--th));
  --ink:oklch(.93 calc(.005*var(--thc)) var(--th));--ink2:oklch(.74 calc(.006*var(--thc)) var(--th));--ink3:oklch(.59 calc(.006*var(--thc)) var(--th));
  --line:oklch(.93 calc(.005*var(--thc)) var(--th)/.13);
  --ac:oklch(.80 .13 72);--acink:oklch(.86 .10 76);--actint:oklch(.80 .13 72/.13);
  --navbg:oklch(.32 calc(.008*var(--thc)) var(--th));--navtxt:oklch(.80 calc(.008*var(--thc)) var(--th));--navact:oklch(.26 .05 50);
  --navglass:oklch(.30 calc(.008*var(--thc)) var(--th)/.42);--navedge:oklch(.95 calc(.005*var(--thc)) var(--th)/.16);--navicon:oklch(.86 calc(.006*var(--thc)) var(--th));
  --dang:oklch(.68 .15 25);--okc:oklch(.74 .14 152);
  --logo-member:url(/customer/img/logo-member-dark.svg);
  --sb-thumb:oklch(1 0 0/.18);--sb-thumb-hover:oklch(1 0 0/.34);
}
:root[data-mode="light"]{
  --bg:oklch(.984 calc(.005*var(--thc)) var(--th));--surf:oklch(.998 calc(.003*var(--thc)) var(--th));--surf2:oklch(.965 calc(.0075*var(--thc)) var(--th));
  --ink:oklch(.33 calc(.007*var(--thc)) var(--th));--ink2:oklch(.53 calc(.007*var(--thc)) var(--th));--ink3:oklch(.66 calc(.006*var(--thc)) var(--th));
  --line:oklch(.33 calc(.008*var(--thc)) var(--th)/.13);
  --ac:oklch(.71 .14 68);--acink:oklch(.45 .11 62);--actint:oklch(.71 .14 68/.10);
  --navbg:oklch(.305 calc(.012*var(--thc)) var(--th));--navtxt:oklch(.80 calc(.008*var(--thc)) var(--th));--navact:oklch(.30 .05 52);
  --navglass:oklch(1 0 0/.40);--navedge:oklch(1 0 0/.55);--navicon:oklch(.42 calc(.01*var(--thc)) var(--th));
  --dang:oklch(.55 .15 25);--okc:oklch(.55 .13 152);
  --logo-member:url(/customer/img/logo-member.svg);
  --sb-thumb:oklch(.33 calc(.01*var(--thc)) var(--th)/.22);--sb-thumb-hover:oklch(.33 calc(.01*var(--thc)) var(--th)/.38);
}

/* 主題色調預設組（「我的→外觀」選擇；graphite=home 原本的石墨藍） */
:root[data-th="graphite"]{--th:240;--thc:1;}
:root[data-th="warm"]{--th:65;--thc:1.9;}
:root[data-th="forest"]{--th:175;--thc:1.7;}
:root[data-th="plum"]{--th:325;--thc:1.5;}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}

/* 仿 macOS 捲軸（同 msgcraft 做法）：細、膠囊、不貼邊、透明軌道 */
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent;}   /* Firefox */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-button{display:none;width:0;height:0;}             /* 隱藏 Windows 箭頭鈕 */
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:999px;
  border:2px solid transparent;background-clip:padding-box;transition:background-color .2s;}  /* 透明邊框做內縮留白 */
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:padding-box;}
::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-hover);background-clip:padding-box;}
::-webkit-scrollbar-corner{background:transparent;}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;}
#app{min-height:100%;}
.ti{font-style:normal;line-height:1;}

/* 可變色 logo（B・單色主題版）：mask + currentColor，跟著主題色與亮暗自動染色 */
.logo-mark{display:inline-block;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox=%22146 139 681 754%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22black%22%3E%3Cpath opacity=%22.5%22 d=%22M189.383 386.042C186.528 387.304 304.495 411.727 318.964 407.975C315.789 405.667 316.078 403.935 327.045 397.297C354.462 380.703 399.787 325.724 427.767 242.319C409.008 244.916 362.528 252.131 318.95 259.346C285.728 332.362 216.795 373.921 189.383 386.042Z%22/%3E%3Cpath opacity=%22.7%22 d=%22M447.97 530.053C401.101 559.606 270.962 583.155 210.74 587.484C210.74 599.028 359.658 655.594 423.728 672.044C485.199 666.561 712.617 616.922 770.048 450.977C682.314 530.053 527.912 534.093 447.97 530.053Z%22/%3E%3Cpath opacity=%22.6%22 d=%22M155.851 287.629C146.041 267.427 152.674 152.853 161.911 139C205.649 143.873 425.981 186.042 428.867 242.319C290.341 262.809 219.057 276.951 155.851 287.629Z%22/%3E%3Cpath opacity=%22.82%22 d=%22M191.638 478.394C182.744 460.212 184.615 410.092 188.175 385.754C502.172 460.501 580.094 344.158 613.284 323.993C625.405 327.167 757.295 410.573 770.571 451.843C623.096 586.619 271.869 519.086 191.638 478.394Z%22/%3E%3Cpath d=%22M544.02 892.823C293.226 882.433 213.572 672.91 208.666 585.752C424.592 700.904 628.344 699.749 826.271 601.048C794.525 816.921 687.219 887.34 544.02 892.823Z%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg viewBox=%22146 139 681 754%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg fill=%22black%22%3E%3Cpath opacity=%22.5%22 d=%22M189.383 386.042C186.528 387.304 304.495 411.727 318.964 407.975C315.789 405.667 316.078 403.935 327.045 397.297C354.462 380.703 399.787 325.724 427.767 242.319C409.008 244.916 362.528 252.131 318.95 259.346C285.728 332.362 216.795 373.921 189.383 386.042Z%22/%3E%3Cpath opacity=%22.7%22 d=%22M447.97 530.053C401.101 559.606 270.962 583.155 210.74 587.484C210.74 599.028 359.658 655.594 423.728 672.044C485.199 666.561 712.617 616.922 770.048 450.977C682.314 530.053 527.912 534.093 447.97 530.053Z%22/%3E%3Cpath opacity=%22.6%22 d=%22M155.851 287.629C146.041 267.427 152.674 152.853 161.911 139C205.649 143.873 425.981 186.042 428.867 242.319C290.341 262.809 219.057 276.951 155.851 287.629Z%22/%3E%3Cpath opacity=%22.82%22 d=%22M191.638 478.394C182.744 460.212 184.615 410.092 188.175 385.754C502.172 460.501 580.094 344.158 613.284 323.993C625.405 327.167 757.295 410.573 770.571 451.843C623.096 586.619 271.869 519.086 191.638 478.394Z%22/%3E%3Cpath d=%22M544.02 892.823C293.226 882.433 213.572 672.91 208.666 585.752C424.592 700.904 628.344 699.749 826.271 601.048C794.525 816.921 687.219 887.34 544.02 892.823Z%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}

/* 會員主識別（A・徽章圈）：登入頁 brand 用，彩色原標誌＋開口圓環（亮暗兩版） */
.brandlogo-member{display:inline-block;flex:none;
  background:var(--logo-member,url(/customer/img/logo-member.svg)) center/contain no-repeat;}

.screen{padding-bottom:calc(140px + env(safe-area-inset-bottom));min-height:100vh;min-height:100dvh;}
.pad{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
.gap{height:18px;}.gap.lg{height:23px;}.sp{width:36px;}
.muted{color:var(--ink3)!important;}

/* 返回／標題列（sticky：固定頂部，內容從底下滑過；半透明+模糊維持可讀） */
.appbar{display:flex;justify-content:space-between;align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 18px 16px;}
.hd,.appbar{position:sticky;top:0;z-index:40;
  background:color-mix(in oklch, var(--bg), transparent 18%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);}
.appbar .ttl{font-family:var(--fd);font-weight:600;font-size:16px;}
.appbar .x{width:36px;height:36px;border-radius:50%;border:none;background:none;color:var(--ink2);
  font-size:21px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.appbar .x.danger{font-size:19px;color:var(--ink3);}
.appbar .x.danger:hover{color:var(--dang);background:color-mix(in oklch, var(--dang), transparent 90%);}
.iconbtn{width:38px;height:38px;border-radius:50%;background:var(--surf);border:.5px solid var(--line);
  color:var(--ink2);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* 標籤 + 表單 */
.label{font-family:var(--fd);font-size:11.5px;letter-spacing:.05em;color:var(--ink3);
  text-transform:uppercase;display:block;margin-bottom:8px;}
.input,.textarea{width:100%;background:var(--surf2);border:.5px solid var(--line);border-radius:12px;
  padding:12px 14px;font-family:var(--fb);font-size:14px;color:var(--ink);outline:none;}
.textarea{resize:none;line-height:1.6;}
.input::placeholder,.textarea::placeholder{color:var(--ink3);}
.fieldicon{display:flex;align-items:center;gap:11px;background:var(--surf2);border:.5px solid var(--line);
  border-radius:13px;padding:0 14px;}
.fieldicon>i{font-size:19px;color:var(--ink3);}
.fieldicon input{flex:1;background:none;border:none;outline:none;padding:14px 0;
  font-family:var(--fb);font-size:14.5px;color:var(--ink);}
.fieldicon input::placeholder{color:var(--ink3);}
.fieldicon .eye{border:none;background:none;color:var(--ink3);font-size:19px;cursor:pointer;display:flex;}
.av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--surf2);border:.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:600;font-size:14px;color:var(--ink2);}

/* 頭像照片：疊在縮寫上、填滿裁切；容器需可裁切 */
.av,.avatar-lg,.me-av,.nb-av,.chat-empty-av,.chat-peer .av{position:relative;overflow:hidden;}
.av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}

/* 全螢幕圖片檢視器 */
.imgviewer{position:fixed;inset:0;z-index:1000;background:oklch(0 0 0/.92);opacity:0;transition:opacity .18s ease;
  display:flex;flex-direction:column;touch-action:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.imgviewer.show{opacity:1;}
.iv-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;}
.iv-img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;
  transform-origin:center center;transition:transform .06s linear;will-change:transform;}
.iv-close{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:2;width:40px;height:40px;
  border-radius:50%;border:none;background:oklch(1 0 0/.14);color:#fff;font-size:20px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.iv-close:active{background:oklch(1 0 0/.26);}

/* 主要按鈕 */
.btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ac);
  color:var(--navact);border:none;border-radius:14px;padding:15px;font-family:var(--fd);font-weight:600;
  font-size:15px;cursor:pointer;}
.btn:disabled{opacity:.45;cursor:default;}
.btn .ti{font-size:19px;}

/* 開關 */
.switch{width:44px;height:25px;border-radius:999px;background:var(--surf2);border:.5px solid var(--line);
  position:relative;flex:none;cursor:pointer;transition:background .2s ease;}
.switch .k{position:absolute;top:2.5px;left:3px;width:19px;height:19px;border-radius:50%;
  background:oklch(.99 0 0);transition:left .2s cubic-bezier(.2,.8,.2,1);}
.switch.on{background:var(--ac);border-color:transparent;}
.switch.on .k{left:22px;}

/* 空 / 載入 / toast */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 40px;color:var(--ink3);gap:14px;}
.empty .ti{font-size:40px;color:var(--ink3);opacity:.6;}
.empty .t{font-size:15px;color:var(--ink2);font-weight:500;}
.empty .s{font-size:13px;}
.spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--ac);
  animation:sp .7s linear infinite;margin:60px auto;}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--navbg);color:var(--navtxt);font-size:13.5px;padding:11px 18px;border-radius:999px;
  z-index:80;opacity:0;transition:opacity .25s ease, transform .25s ease;pointer-events:none;max-width:80%;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

/* 進場動畫 */
@media (prefers-reduced-motion:no-preference){
  .stagger>*{opacity:0;transform:translateY(8px);animation:rise .4s cubic-bezier(.2,.8,.2,1) forwards;}
  .stagger>*:nth-child(1){animation-delay:.02s}.stagger>*:nth-child(2){animation-delay:.06s}
  .stagger>*:nth-child(3){animation-delay:.10s}.stagger>*:nth-child(4){animation-delay:.14s}
  .stagger>*:nth-child(5){animation-delay:.18s}.stagger>*:nth-child(6){animation-delay:.22s}
  .stagger>*:nth-child(n+7){animation-delay:.26s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* 桌面版佈局（側邊欄 + 內容）在 style/nav.css 內處理 */

/* ── 加入主畫面提示橫幅（浮在底部導覽上方；登入頁也會出現） ── */
.a2hs{position:fixed;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:90;
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;
  background:var(--surf);border:.5px solid var(--line);box-shadow:0 10px 32px oklch(0 0 0/.18);
  opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease;}
.a2hs.show{opacity:1;transform:none;}
.a2hs-ic{font-size:26px;color:var(--acink);flex:none;}
.a2hs-bd{flex:1;min-width:0;}
.a2hs .t{font-weight:600;font-size:14px;}
.a2hs .s{font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.5;}
.a2hs .s i{font-size:13px;vertical-align:-2px;}
.a2hs-go{flex:none;border:none;border-radius:999px;background:var(--ac);color:oklch(.28 .045 65);
  font-family:var(--fb);font-weight:600;font-size:13.5px;padding:9px 18px;cursor:pointer;}
.a2hs-x{flex:none;border:none;background:none;color:var(--ink3);width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;}
@media (min-width:860px){.a2hs{left:auto;right:24px;width:360px;bottom:24px;}}

/* ── 下拉重新整理指示器 ── */
.ptr{position:fixed;top:calc(-46px + env(safe-area-inset-top));left:50%;z-index:80;width:40px;height:40px;
  transform:translate(-50%,0);border-radius:50%;background:var(--surf);border:.5px solid var(--line);
  box-shadow:0 4px 16px oklch(0 0 0/.14);display:none;align-items:center;justify-content:center;
  color:var(--ink3);font-size:19px;opacity:0;will-change:transform;}
.ptr.show{display:flex;}
.ptr.ready{color:var(--acink);border-color:color-mix(in oklch,var(--ac),transparent 55%);}
.ptr.spinning{transition:transform .18s ease;}
.ptr.spinning i{animation:ptrspin .7s linear infinite;}
@keyframes ptrspin{to{transform:rotate(360deg);}}

/* ── 補自 zj-corp inbox.css：頁首/群組標籤/分段選擇器（customer 只搬需要的基礎件） ── */
.hd{display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(14px + env(safe-area-inset-top)) 22px 14px;}
.hd h1{font-family:var(--fd);font-weight:600;font-size:27px;letter-spacing:-.01em;line-height:1.05;}
.hd .sub{color:var(--ink3);font-size:12.5px;margin-top:5px;}
.hd .acts{display:flex;gap:8px;align-items:center;}
.me-av{width:38px;height:38px;border-radius:50%;background:var(--actint);color:var(--acink);
  font-family:var(--fd);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;}
.seg{display:flex;background:var(--surf);border:.5px solid var(--line);border-radius:999px;padding:3px;
  font-size:12.5px;font-weight:500;}
.seg button{border:none;background:none;cursor:pointer;padding:5px 14px;border-radius:999px;color:var(--ink3);font-family:var(--fb);}
.seg button.on{background:var(--ink);color:var(--bg);}
.glabel{font-family:var(--fd);font-size:11.5px;letter-spacing:.06em;color:var(--ink3);
  text-transform:uppercase;padding:6px 22px 2px;}