:root{
  --navy:#0b1220;--panel:#111b2e;--teal:#17e0c4;--cyan:#38bdf8;--violet:#7c6cff;
  --gold:#d2a84a;--ink:#1f2933;--bg:#eef2f6;--line:#dbe3ea;--muted:#8898a2;
}
*{box-sizing:border-box}
body{margin:0;font-family:"PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.6}
a{color:#0f8a81;text-decoration:none}a:hover{text-decoration:underline}

/* ---- top bar: dark AI tech ---- */
.topbar{display:flex;align-items:center;gap:22px;padding:13px 24px;flex-wrap:wrap;color:#fff;
  background:linear-gradient(100deg,#070c16 0%,#0e1c34 55%,#123b4a 100%);
  border-bottom:1px solid rgba(56,189,248,.25);
  box-shadow:0 2px 24px rgba(23,224,196,.08)}
.topbar .brand{font-weight:800;font-size:17px;letter-spacing:.5px;
  background:linear-gradient(90deg,#17e0c4,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar nav{display:flex;gap:18px;flex:1}
.topbar nav a{color:#c6d6e6;font-weight:600;font-size:14px;position:relative}
.topbar nav a:hover{color:#17e0c4;text-decoration:none}
.topbar .who{color:#8fa6ba;font-size:13px}
.topbar .who a{color:var(--teal)}
.wrap{max-width:1140px;margin:0 auto;padding:24px}
.foot{text-align:center;color:#93a3ad;font-size:12px;padding:26px}
h1{color:#0e1c34;font-size:24px;margin:6px 0 16px}
h2{color:#0e1c34;font-size:18px;border-bottom:2px solid var(--gold);padding-bottom:4px;margin:22px 0 10px}
.muted{color:var(--muted)}

/* ---- hero (dashboard) ---- */
.hero{position:relative;overflow:hidden;border-radius:20px;padding:30px 32px;margin-bottom:22px;color:#eaf6ff;
  background:
    radial-gradient(900px 300px at 85% -40%,rgba(124,108,255,.35),transparent 60%),
    radial-gradient(700px 300px at 10% 120%,rgba(23,224,196,.28),transparent 60%),
    linear-gradient(120deg,#0a1324 0%,#0f2238 60%,#113a49 100%);
  border:1px solid rgba(56,189,248,.25);box-shadow:0 20px 50px -24px rgba(16,40,70,.7)}
.hero::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(56,189,248,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.06) 1px,transparent 1px);
  background-size:30px 30px;mask:radial-gradient(600px 240px at 70% 0%,#000,transparent 75%);pointer-events:none}
.hero .ey{font-size:12px;letter-spacing:3px;color:#7fe9d8;font-weight:700;text-transform:uppercase}
.hero h1{color:#fff;font-size:27px;margin:8px 0 4px;position:relative}
.hero .sub{color:#a8c3d6;font-size:14px;position:relative}

/* ---- stat tiles with glow ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:16px 0}
.stat{position:relative;background:linear-gradient(160deg,#0f1f36,#12263f);border:1px solid rgba(56,189,248,.22);
  border-radius:16px;padding:20px;color:#dcefff;overflow:hidden}
.stat::before{content:"";position:absolute;width:120px;height:120px;right:-30px;top:-40px;border-radius:50%;
  background:radial-gradient(circle,rgba(23,224,196,.35),transparent 70%);filter:blur(6px)}
.stat .n{font-size:34px;font-weight:800;line-height:1;position:relative;
  background:linear-gradient(90deg,#17e0c4,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:#9fb8cc;font-size:13px;margin-top:8px;position:relative}
.stat.warn .n{background:linear-gradient(90deg,#ffd27c,#ff9d6c);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- tables (light, readable) ---- */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:10px 0;box-shadow:0 6px 18px -14px rgba(16,40,70,.4)}
th{background:linear-gradient(100deg,#0e1c34,#143a49);color:#dbeefe;text-align:left;font-size:13px;letter-spacing:.3px}
td,th{padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
tr:nth-child(even) td{background:#f6fafc}
tr:hover td{background:#eefcfa}

/* ---- buttons ---- */
.btn{display:inline-block;background:#e8eef3;border:1px solid var(--line);color:#0e1c34;padding:8px 15px;border-radius:9px;cursor:pointer;font-size:14px;transition:.15s}
.btn.primary{background:linear-gradient(100deg,#17e0c4,#38bdf8);color:#06202b;border:0;font-weight:700;box-shadow:0 8px 20px -10px rgba(23,224,196,.7)}
.btn.primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger{background:#fff1f1;border-color:#f2aaaa;color:#a32626}
.btn:hover{filter:brightness(1.03)}

/* ---- cards / forms ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin:10px 0;box-shadow:0 10px 30px -20px rgba(16,40,70,.5)}
form.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#fff;border:1px solid var(--line);padding:16px;border-radius:12px;margin-top:10px}
form.grid .full{grid-column:1/3}
label{display:flex;flex-direction:column;font-size:13px;color:#5a6b74;gap:4px}
input,select,textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;background:#fcfdfe}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.18)}
textarea{min-height:70px}
.addbox{margin:10px 0}.addbox summary{display:inline-block;list-style:none;cursor:pointer}
.addbox summary::-webkit-details-marker{display:none}
.search{display:flex;gap:8px;margin:8px 0}.search input{flex:1;max-width:360px}
.flash{background:linear-gradient(100deg,#e7fff9,#eaf6ff);border:1px solid var(--teal);padding:11px 15px;border-radius:10px;margin-bottom:16px;color:#0a5a52}
.authbody .flash{position:fixed;z-index:5;top:94px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}

/* ---- auth stage (login/register): full AI-tech hero ---- */
.authstage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;
  background:
    radial-gradient(1000px 500px at 80% -10%,rgba(124,108,255,.35),transparent 60%),
    radial-gradient(900px 500px at 0% 110%,rgba(23,224,196,.30),transparent 60%),
    linear-gradient(120deg,#070c16,#0c1a30 55%,#0f3340)}
.authstage::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(56,189,248,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.07) 1px,transparent 1px);
  background-size:34px 34px;mask:radial-gradient(700px 500px at 50% 40%,#000,transparent 80%)}
.authcard{position:relative;width:100%;max-width:400px;background:rgba(17,27,46,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(56,189,248,.3);border-radius:20px;padding:32px 30px;color:#e9f6ff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.authcard .mark{font-size:13px;letter-spacing:3px;color:#7fe9d8;font-weight:800;text-transform:uppercase}
.authcard h2{color:#fff;border:0;font-size:24px;margin:10px 0 6px}
.authcard .tagline{color:#9fc0d6;font-size:13px;margin-bottom:18px}
.authcard label{color:#9fc0d6}
.authcard input,.authcard select{background:rgba(8,16,30,.7);border:1px solid rgba(120,160,200,.3);color:#eaf6ff}
.authcard input::placeholder{color:#6f8aa3}
.authcard .btn.primary{width:100%;margin-top:6px;padding:11px}
.authcard a{color:var(--teal)}
.authcard optgroup{color:#0e1c34}
.authlinks{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;color:#9fc0d6;font-size:13px;flex-wrap:wrap}
.authnote{margin:14px 0 0;padding:9px 11px;border-radius:9px;background:rgba(56,189,248,.08);color:#9fc0d6;font-size:12px}
.authback{margin-top:12px;color:#9fc0d6}

/* ---- customer 360 ---- */
.gid{font-size:13px;color:var(--muted);font-weight:400}
.meta{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 15px;font-size:14px}
.note{background:#edf6f5;border-left:4px solid #0f8a81;padding:8px 12px;margin:10px 0;border-radius:6px}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:800px){.col2{grid-template-columns:1fr}form.grid{grid-template-columns:1fr}form.grid .full{grid-column:1}.topbar{gap:12px}}
.tl{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:8px;padding:10px 12px;margin:8px 0}
.tl-h{font-size:12px;color:var(--muted);margin-bottom:4px}
.tl .next{color:#0f8a81;font-weight:600;font-size:13px;margin-top:4px}
.src{background:linear-gradient(100deg,#0e1c34,#143a49);color:#dbeefe;border-radius:10px;padding:1px 9px;font-size:12px}
.inline{display:inline-flex;gap:6px;margin:4px 8px 4px 0}
.ops{display:flex;gap:6px}.ops form{margin:0}
.back{font-size:13px}
.badge{display:inline-block;background:#ff6b6b;color:#fff;border-radius:10px;font-size:11px;padding:0 6px;margin-left:2px}
.chip{display:inline-block;background:#eef4f7;border:1px solid var(--line);border-radius:12px;padding:2px 9px;font-size:12px;margin:2px 3px 2px 0}
.chip.form{background:#eafaf7;border-color:#9fe0d4}

/* ---- 集團身分比對與完整履歷 ---- */
.identitybox{margin:14px 0}.identityhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.identityhead h2{margin-bottom:6px}
.matchgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.matchcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}.matchsource{font-weight:700;color:#0e1c34;margin-bottom:7px}
.matchfields{display:flex;gap:5px;flex-wrap:wrap}.match{border-radius:8px;padding:2px 7px;font-size:12px}.match.yes{background:#e7faf4;color:#08745f;border:1px solid #a8e1d2}.match.no{background:#f2f4f6;color:#8a98a3;border:1px solid #dce3e8}
.matchnone{color:#8a98a3;font-size:13px}.matchwarn{margin-top:7px;color:#a45d00;background:#fff6df;border-radius:7px;padding:4px 7px;font-size:12px}.matchevidence{color:#8a98a3;font-size:11px;margin-top:7px;word-break:break-all}
.histstats{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 12px}.histstats span{background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px 8px;font-size:11px;color:#70808b}.histstats b{color:#0e1c34}
.histgroup{background:#fff;border:1px solid var(--line);border-radius:10px;margin:8px 0;overflow:hidden}.histgroup>summary{cursor:pointer;list-style:none;padding:9px 12px;font-weight:700;color:#0e1c34;background:#f4f8fb}.histgroup>summary span{float:right;color:#0f8a81}.histgroup>summary::-webkit-details-marker{display:none}
.histlist{padding:0 12px}.histevent{border-bottom:1px dashed var(--line)}.histevent:last-child{border-bottom:0}.histevent-head{display:grid;grid-template-columns:110px minmax(180px,1fr) minmax(120px,220px) 38px;gap:10px;align-items:center;padding:10px 0;cursor:pointer;list-style:none}.histevent-head::-webkit-details-marker{display:none}.histdate{color:#0e6d64;font-size:12px;font-weight:700}.histtitle{min-width:0}.histwho{font-size:12px;color:#526574}.histtoggle{font-size:11px;color:#0f8a81}.histevent[open] .histtoggle{font-size:0}.histevent[open] .histtoggle:after{content:'收合';font-size:11px}.histbody{padding:0 48px 12px 120px}.histsummary{font-size:13px;margin-top:4px;color:#40515c;white-space:normal}.histmeta{font-size:11px;color:#97a3ac;margin-top:6px;word-break:break-all}
@media(max-width:800px){.matchgrid{grid-template-columns:1fr}.histevent-head{grid-template-columns:1fr 38px;gap:3px 8px}.histdate,.histwho{grid-column:1}.histtitle{grid-column:1}.histtoggle{grid-column:2;grid-row:1/4;align-self:center}.histbody{padding:0 0 12px}}

/* ---- ARK AppSheet 鏡像 ---- */
.arknav{display:flex;flex-wrap:wrap;gap:4px;background:linear-gradient(100deg,#0e1c34,#143a49);border-radius:12px;padding:8px;margin:4px 0 6px}
.arknav a{color:#bcd4e6;font-size:13px;font-weight:600;padding:6px 12px;border-radius:8px}
.arknav a:hover{background:rgba(56,189,248,.14);color:#fff;text-decoration:none}
.arknav a.on{background:linear-gradient(100deg,#17e0c4,#38bdf8);color:#06202b}
.arksync{font-size:12px;color:var(--muted);margin:0 0 12px 2px}
.ark3{display:grid;grid-template-columns:270px 1fr 320px;gap:12px;align-items:start}
.ark-col{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px -14px rgba(16,40,70,.4)}
.ark-colh{background:linear-gradient(100deg,#0e1c34,#143a49);color:#dbeefe;font-size:13px;font-weight:700;padding:9px 13px}
.ark-master{max-height:72vh;overflow:auto}
.ark-grp{background:#f1f6f9;color:#0e6d64;font-size:12px;font-weight:700;padding:6px 12px;border-top:1px solid var(--line)}
.ark-item{display:block;padding:9px 13px;border-bottom:1px solid var(--line);color:#1f2933;font-size:14px}
.ark-item:hover{background:#eefcfa;text-decoration:none}
.ark-item.on{background:linear-gradient(100deg,#e7fff9,#eaf6ff);border-left:3px solid var(--teal)}
.ark-item .ark-sub{color:var(--muted);font-size:12px}
.ark-detail,.ark-related{padding:0 0 10px}
.ark-rsec{font-weight:700;color:#0e1c34;font-size:14px;padding:10px 13px 2px}
.ark-rlink{padding:6px 13px;font-size:13px}
table.kv{margin:12px}
table.kv th{width:160px;background:#f4f8fb;color:#0e1c34;font-weight:600;border-right:1px solid var(--line)}
table.kv td{background:#fff}
.tbl-wrap{overflow-x:auto}
@media(max-width:900px){.ark3{grid-template-columns:1fr}.ark-master{max-height:none}}

/* ---- ARK 狀態：只在狀態文字上色，列表維持白底（比照 AppSheet） ---- */
.ark-grp{display:flex;align-items:center;gap:8px;background:#fff;border-top:1px solid var(--line);
  color:#1f2933;font-weight:700;padding:9px 12px 5px;font-size:13px}
.ark-grp .gfunnel{color:#e08a1e;font-size:12px}
.ark-grp .gcnt{color:var(--muted);font-weight:600;font-size:12px}
.gchip{display:inline-block;color:#fff;font-weight:700;border-radius:6px;padding:2px 10px;font-size:13px}
.ark-item{border-left:0;background:#fff}
.ark-item:hover{background:#f7fbfd}
.ark-item.on{background:#eef6fb;border-left:3px solid var(--teal)}
.ark-item .ark-r1 b{color:#0e1c34}
.ark-item .ark-case{color:#2563eb;font-size:12px;margin-left:6px}
.statbadge{display:inline-block;color:#fff;font-weight:700;border-radius:7px;padding:2px 10px;font-size:13px;vertical-align:middle}
.ark-dethead{padding:12px 13px 0;font-size:15px}
.ark-dethead b{color:#0e1c34}
.ark-backlist{display:none}
/* 狀態配色（只作用在 .gchip 與 .statbadge 的文字塊） */
.s-jin{background:#2563eb}.s-wo{background:#0e9f6e}.s-mei{background:#7c3aed}.s-sold{background:#b45309}
.s-can{background:#0891b2}.s-long{background:#64748b}.s-no{background:#94a3b8}.s-oth{background:#475569}
/* 手機：比照 AppSheet 的 清單→明細 下鑽（選取後只看明細，附返回） */
@media(max-width:900px){
  .ark3.sel .ark-master{display:none}
  .ark3:not(.sel) .ark-detail,.ark3:not(.sel) .ark-related{display:none}
  .ark3.sel .ark-backlist{display:inline-block;margin:10px 13px 0;color:#0f8a81;font-weight:600}
}

/* ---- ARK 輕量自選欄位 ---- */
.arkcols{margin:6px 0 10px}
.arkcols .ckwrap{display:flex;flex-wrap:wrap;gap:4px 14px;max-height:220px;overflow:auto;padding:4px 2px}
.ckbox{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#334;white-space:nowrap}
.ark-k{display:inline-block;color:#64748b;font-size:11px;background:#eef3f7;border-radius:4px;padding:0 5px;margin-right:4px}

/* ---- ARK 客戶TEAM 人員卡 ---- */
.ark-person{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);color:#1f2933}
.ark-person:hover{background:#f7fbfd;text-decoration:none}
.ark-person.on{background:#eef6fb;border-left:3px solid var(--teal)}
.avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.ark-person .pn{font-size:14px}

/* ---- ARK 區域導覽 ---- */
.ark-area{display:flex;justify-content:space-between;align-items:center;padding:8px 13px;border-bottom:1px solid var(--line);color:#1f2933;font-size:14px}
.ark-area:hover{background:#f7fbfd;text-decoration:none}
.ark-area.on{background:#eef6fb;border-left:3px solid var(--teal);font-weight:700}
.ark-area .acn{color:var(--muted);font-size:12px;background:#eef3f7;border-radius:10px;padding:0 8px}

/* ---- ARK 分組可收合 ---- */
.ark-group{border:0}
.ark-group>summary{list-style:none;cursor:pointer;user-select:none}
.ark-group>summary::-webkit-details-marker{display:none}
.ark-group>summary::marker{content:""}
.ark-group .gfunnel{display:inline-block;transition:transform .12s}
.ark-group:not([open])>summary .gfunnel{transform:rotate(-90deg)}
.ark-group:not([open])>summary{opacity:.9}

/* ---- ARK 左側垂直導覽 + 標題列內嵌搜尋 ---- */
.arkpage{display:grid;grid-template-columns:168px 1fr;gap:16px;align-items:start}
.arknav{flex-direction:column;flex-wrap:nowrap;gap:2px;position:sticky;top:12px;margin:0}
.arknav a{display:block}
.arkcontent{min-width:0}
.arkhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 10px}
.arkhead h1{margin:0}
.arkhead-search{margin:0;flex:1;min-width:220px;max-width:460px}
@media(max-width:900px){.arkpage{grid-template-columns:1fr}.arknav{flex-direction:row;flex-wrap:wrap;position:static}}

/* ---- #1 自選欄位放到搜尋後面 ---- */
.arkhead .arkcols{margin:0}
.arkhead .arkcols[open]{flex-basis:100%}
.ark-testnotice{background:#fff8df;border:1px solid #efd27b;color:#6d5311;border-radius:10px;padding:8px 12px;margin:0 0 12px;font-size:13px}
.ark-detailops{display:flex;gap:6px;flex-wrap:wrap;padding:8px 13px 0}
.ark-edithead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.ark-edithead h1{margin-bottom:6px}
.ark-editform{max-width:920px}.ark-formops{display:flex;gap:8px;align-items:center}
.ark-deleteform{max-width:920px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* ---- #3 明細值完整換行 ---- */
table.kv td{word-break:break-word}
/* ---- #6 跟進與關聯表格（比照 AppSheet）---- */
.futab{font-size:13px;margin:6px 0}
.futab th{font-size:12px}
.futab td,.futab th{padding:7px 9px;vertical-align:top}
.futab td.nowrap,.nowrap{white-space:nowrap}

/* 釘在最上面的欄位（雲端連結）稍微標示 */
table.kv tr.kv-pin th,table.kv tr.kv-pin td{background:#eef7fb}

/* 客戶來源備註逐欄換行 + 來源篩選下拉 */
.srcnote{margin:0;padding-left:20px}
.srcnote li{margin:3px 0;line-height:1.55}
.search select{padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:#fff;max-width:220px;font-size:14px}

/* 客戶列表分頁 */
.pager{display:flex;align-items:center;gap:12px;margin:10px 0;flex-wrap:wrap}
.pginfo{color:var(--muted);font-size:13px}
.btn.disabled{opacity:.4;pointer-events:none}

/* 審核頁-判別說明 */
.reviewhelp{background:#eef7fb;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0 14px;font-size:13px}
.matchwhy{font-size:12px;margin-top:5px;line-height:1.55}
.matchwhy .cmp{color:#c0392b}

/* AppSheet鏡像同步資訊移到左側功能列最下方 */
.arknav .arksync{color:#8fa6ba;font-size:11px;line-height:1.6;margin:10px 4px 2px;padding-top:9px;border-top:1px solid rgba(255,255,255,.12)}
.arknav .arksync a{color:var(--teal)}
@media(max-width:900px){.arknav .arksync{border-top:0;margin:4px 8px}}

/* 曾出現表單-依時間列表 */
.formlist{list-style:none;margin:6px 0 0;padding:0}
.formlist li{padding:5px 0;border-bottom:1px dashed var(--line);font-size:14px;display:flex;align-items:baseline;gap:4px}
.fdate{color:#0e6d64;font-weight:700;font-size:12px;background:#eafaf7;border:1px solid #cdeee6;border-radius:6px;padding:1px 8px;text-align:center;white-space:nowrap}
.formlist .fdate{flex:0 0 auto;min-width:96px}

/* =====================================================================
   v30 視覺升級：設計系統（色票／層次／間距）＋ 人性化互動元件
   ===================================================================== */
:root{--brand:#0e9f8e;--brand2:#2b8fd6;--ok:#0e8a6a;--err:#c0392b;--warnc:#c77700;
  --card:#fff;--radius:16px;--shadow:0 1px 2px rgba(16,40,70,.06),0 8px 24px -12px rgba(16,40,70,.18)}
body.appbody{background:linear-gradient(180deg,#e9eff6 0,#f3f6fa 260px) no-repeat,#f3f6fa}
h1{font-size:23px;letter-spacing:.2px}
h2{border-bottom:0;padding-bottom:0;font-size:16px}
h2 small,.panel-h small{color:var(--muted);font-weight:500;font-size:12px;margin-left:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:30;gap:16px;padding:10px 22px;backdrop-filter:blur(10px);
  background:linear-gradient(100deg,rgba(7,12,22,.96),rgba(14,28,52,.96) 55%,rgba(18,59,74,.96))}
.topbar .brand{display:flex;align-items:center;gap:8px;-webkit-text-fill-color:initial;color:#e8f6ff;background:none;font-weight:600;font-size:15px;white-space:nowrap}
.topbar .brand b{background:linear-gradient(90deg,#17e0c4,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.topbar .brand:hover{text-decoration:none}
.topbar nav{gap:4px;align-items:center}
.topbar nav a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;color:#b9cde0;font-size:14px;transition:background .15s,color .15s}
.topbar nav a i{font-style:normal;font-size:14px;opacity:.9}
.topbar nav a:hover{background:rgba(56,189,248,.12);color:#fff}
.topbar nav a.on{background:rgba(23,224,196,.16);color:#7ff0de;box-shadow:inset 0 0 0 1px rgba(23,224,196,.35)}
.gsearch input{width:220px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#eaf6ff;border-radius:10px;padding:7px 12px;font-size:13px}
.gsearch input::placeholder{color:#7f97ad}
.gsearch input:focus{background:rgba(255,255,255,.14);width:280px;transition:width .2s}
.topbar details.who{position:relative;color:#c9d9e8}
.topbar details.who summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:3px 6px;border-radius:10px}
.topbar details.who summary::-webkit-details-marker{display:none}
.topbar details.who summary:hover{background:rgba(255,255,255,.08)}
.who .wn{display:flex;flex-direction:column;line-height:1.2;font-size:13px;color:#e6f2fb}
.who .wn small{color:#8fa6ba;font-size:11px}
.who .menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);min-width:150px;padding:6px;z-index:40}
.who .menu a{display:block;color:#1f2933;padding:8px 12px;border-radius:8px;font-size:14px}
.who .menu a:hover{background:#eef6fb;text-decoration:none}
.avatar.sm{width:30px;height:30px;font-size:13px;background:linear-gradient(135deg,#17e0c4,#2b8fd6)}
.avatar.lg{width:58px;height:58px;font-size:24px;flex:0 0 auto}
.navtoggle{display:none;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:9px;padding:4px 10px;font-size:18px;cursor:pointer}
@media(max-width:1100px){.gsearch{display:none}}
@media(max-width:900px){
  .topbar{padding:10px 14px}
  .navtoggle{display:block;margin-left:auto}
  .topbar nav{display:none;order:9;flex-basis:100%;flex-direction:column;align-items:stretch}
  body.navopen .topbar nav{display:flex}
  .who .wn{display:none}
}

/* ---- layout primitives ---- */
.wrap{max-width:1240px;padding:22px 24px 10px}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 12px}
.pagehead h1{margin:0}
.count{display:inline-block;vertical-align:middle;font-size:13px;font-weight:600;color:#47606f;background:#e3ecf3;border-radius:20px;padding:2px 11px;margin-left:6px}
.panel{background:var(--card);border:1px solid #e1e8ef;border-radius:var(--radius);padding:16px 18px;margin:0 0 16px;box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.panel-h h2{margin:0}
.panel-h a{font-size:13px}
.panel table{box-shadow:none}
.hint{background:#eef6fb;border:1px solid #d6e7f2;border-radius:12px;padding:10px 14px;font-size:13px;color:#35505f;margin:0 0 14px}
.hint.warn{background:#fff6e6;border-color:#f3dbae;color:#7a4b00}
.empty{text-align:center;padding:26px 12px;color:#5d707b}
.empty .ico{font-size:34px;margin-bottom:4px}
.empty p{margin:4px 0}
.empty.big{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:48px 20px;max-width:560px;margin:40px auto}
.empty.big h1{margin:6px 0}

/* ---- buttons ---- */
.btn{border-radius:10px;font-weight:600;line-height:1.3}
.btn:hover{text-decoration:none;border-color:#c5d3de}
.btn.ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#e8f6ff}
.btn.ghost:hover{background:rgba(255,255,255,.18)}
.btn.ghostlink{background:none;border-color:transparent;color:#5d707b}
.btn.danger{color:var(--err);border-color:#f0c9c4;background:#fff6f5}
.btn.busy{opacity:.6;pointer-events:none}
.btn.busy::after{content:" …"}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---- flash ---- */
.flash{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;border-radius:12px;transition:opacity .4s,transform .4s;box-shadow:var(--shadow)}
.flash.ok{background:#e9fbf5;border:1px solid #9fe3cc;color:#0b5c48}
.flash.err{background:#fff1ef;border:1px solid #f2b8b0;color:#8c2618}
.flash.info{background:#eef6fd;border:1px solid #b9d9f2;color:#174a6b}
.flash.sticky{font-weight:600}
.flash .x{background:none;border:0;font-size:18px;line-height:1;color:inherit;opacity:.6;cursor:pointer;padding:0 2px}
.flash.hide{opacity:0;transform:translateY(-6px)}
.authbody .flash{top:22px}

/* ---- tables ---- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
table{border-radius:12px;border-color:#e1e8ef;box-shadow:var(--shadow)}
th{background:#f4f7fb;color:#4a5f6d;font-weight:700;font-size:12.5px;border-bottom:1px solid #e1e8ef}
.ark-col table th,table.kv th{background:#f4f8fb}
td{border-bottom-color:#edf1f5}
tr:nth-child(even) td{background:#fbfcfe}
tr:hover td{background:#f0faf8}
tr[data-href]{cursor:pointer}
tr.rowhl td{background:#fffaf0!important}
.futab th{background:#f4f7fb;color:#4a5f6d}

/* ---- forms ---- */
input,select,textarea{border-color:#d5dfe8;border-radius:10px;background:#fff}
form.grid{border-color:#e1e8ef;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.formtitle{font-weight:700;color:#0e1c34;font-size:15px}
.formtitle .muted{font-weight:400;font-size:12px;margin-left:6px}
.formbtns{display:flex;gap:8px;justify-content:flex-end}
.filterbar{flex-wrap:wrap;align-items:center;background:#fff;border:1px solid #e1e8ef;border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);margin:0 0 12px}
.filterbar input[name=q]{flex:1 1 260px;max-width:none}
.filterbar select{max-width:230px}
.pwwrap{position:relative;display:block}
.pwwrap input{width:100%;padding-right:56px}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:#5d8aa8;font-size:12px;cursor:pointer;padding:4px 6px}
.authcard .pweye{color:#7fe9d8}
.lbl{display:block;font-size:13px;color:#5a6b74;margin-bottom:4px}
.typepick{display:flex;flex-wrap:wrap;gap:6px}
.typepick button{border:1px solid #d5dfe8;background:#fff;border-radius:20px;padding:5px 14px;font-size:13px;cursor:pointer;color:#35505f}
.typepick button.on{background:linear-gradient(100deg,#17e0c4,#38bdf8);border-color:transparent;color:#06202b;font-weight:700}
.quickdates{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
form.inline.wide{display:flex;align-items:flex-end;gap:8px;margin:6px 0 10px;width:100%}
form.inline.wide label{flex:1}
.roleform{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.roleform select{padding:5px 8px;font-size:13px;max-width:170px}
.role-preview{display:flex;align-items:center;margin-left:auto}
.role-preview label{display:flex;align-items:center;gap:6px;margin:0;color:#9fb5c9;font-size:12px;white-space:nowrap}
.role-preview select{width:auto;min-width:112px;padding:6px 28px 6px 9px;border-color:rgba(56,189,248,.35);background-color:#101d31;color:#eaf4fb;font-size:12px}
.preview-banner{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 18px;background:#fff4cc;color:#604a00;border-bottom:1px solid #e5ca67;font-size:13px}
.preview-banner span{color:#76611c}.preview-banner form{margin:0}.preview-banner .btn{background:#fff;border-color:#caaa37;color:#604a00}
@media(max-width:1100px){.role-preview label>span{display:none}.role-preview select{min-width:96px}}
@media(max-width:760px){.role-preview{order:8;margin-left:0}.preview-banner{align-items:flex-start;flex-wrap:wrap}.preview-banner span{flex:1 1 220px}}
.ops{flex-wrap:wrap}

/* ---- dashboard ---- */
.hero{padding:26px 30px}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1}
.cards{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
a.stat{display:block;transition:transform .15s,box-shadow .15s}
a.stat:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(16,40,70,.8)}
.stat .ic{position:absolute;right:14px;top:12px;font-size:20px;opacity:.85}
.stat.good .n{background:linear-gradient(90deg,#9ef7a6,#17e0c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.dashgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.dashgrid{grid-template-columns:1fr}}
ul.todo{list-style:none;margin:0;padding:0}
ul.todo li a{display:flex;gap:12px;align-items:center;padding:9px 6px;border-bottom:1px solid #eef2f6;color:#1f2933;border-radius:8px}
ul.todo li a:hover{background:#f3faf9;text-decoration:none}
ul.todo .d{flex:0 0 64px;text-align:center;font-weight:800;color:#0e6d64;background:#eafaf7;border-radius:10px;padding:4px 0;font-size:14px;line-height:1.2}
ul.todo .d small{display:block;font-weight:500;font-size:11px;color:#5d8a83}
ul.todo li.late .d{background:#fff0ee;color:var(--err)}
ul.todo li.late .d small{color:#c46a5f}
ul.todo li.today .d{background:#fff6e0;color:var(--warnc)}
ul.todo .t{display:flex;flex-direction:column;min-width:0}
ul.todo .t small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars{display:flex;flex-direction:column;gap:7px}
a.bar{display:grid;grid-template-columns:minmax(120px,38%) 1fr 48px;gap:10px;align-items:center;color:#1f2933;font-size:13px}
a.bar:hover{text-decoration:none}
a.bar:hover .bt i{filter:brightness(1.1)}
.bar .bl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .bt{background:#eef3f7;border-radius:8px;height:12px;overflow:hidden}
.bar .bt i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#17e0c4,#38bdf8)}
.bar .bn{text-align:right;font-weight:700;color:#0e6d64}

/* ---- customer 360 ---- */
.profile{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid #e1e8ef;border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);margin:8px 0 14px}
.pf-main{display:flex;gap:14px;align-items:center}
.pf-main h1{margin:0 0 6px}
.pf-tags{display:flex;flex-wrap:wrap;gap:4px}
.pf-contact{display:flex;flex-direction:column;gap:6px;font-size:14px;min-width:280px}
.pf-contact .k,.aliasrow .k{display:inline-block;width:72px;color:var(--muted);font-size:12px}
.aliasrow{margin:-4px 0 14px;font-size:13px}
.chip.late{background:#fff0ee;border-color:#f2b8b0;color:var(--err)}
.chip.due{background:#fff6e0;border-color:#f3dbae;color:#8a5600}
.tl{border-radius:12px;border-color:#e6edf3}
.tl-type{display:inline-block;background:#e7f6f3;color:#0e6d64;font-weight:700;border-radius:6px;padding:0 7px;font-size:12px;margin-right:4px}
.formlist li.more{display:none}
.formlist.all li.more{display:flex}
.col2{align-items:start}
.col2>section{min-width:0}
.back{display:inline-block;margin-bottom:4px;color:#47606f}
.context-back{margin:0 0 8px;font-weight:700}
.customer-name-link{color:#087f75;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(8,127,117,.28)}
.customer-name-link:hover{color:#075f59;border-bottom-color:currentColor;text-decoration:none}
.wealth-status{margin:0 0 14px;border-radius:14px;border:1px solid #d7e1ea;box-shadow:var(--shadow);overflow:hidden}
.wealth-status summary,.wealth-status.not-client{display:flex;align-items:center;gap:10px;padding:14px 18px;list-style:none}
.wealth-status summary{cursor:pointer}.wealth-status summary::-webkit-details-marker{display:none}.wealth-status summary::marker{content:""}
.wealth-status.is-client{background:linear-gradient(135deg,#fff9e8,#fff)}
.wealth-status.not-client{background:#f7f9fb;color:#526574}
.wealth-title{font-size:16px;font-weight:800;color:#17324a}.wealth-count{background:#c8973f;color:#fff;border-radius:20px;padding:3px 10px;font-size:12px;font-weight:800}
.wealth-open{margin-left:auto;color:#78612d;font-size:12px;font-weight:700}
.wealth-properties{display:grid;gap:8px;padding:0 14px 14px}
.wealth-property{display:grid;grid-template-columns:minmax(190px,1fr) minmax(110px,.55fr) minmax(220px,1.3fr);gap:12px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid #eadfbd;color:#334155}
.wealth-property:hover{text-decoration:none;border-color:#c8973f}.wealth-property span{font-size:13px;color:#526574}
@media(max-width:700px){.wealth-property{grid-template-columns:1fr}.wealth-status summary{flex-wrap:wrap}.wealth-open{width:100%;margin-left:0}}
.ark-record-link{color:inherit;text-decoration:none}.ark-record-link:hover{text-decoration:underline}
.ark-open{margin-left:auto;font-size:11px;font-weight:600;white-space:nowrap;color:#0f8a81}

/* 客戶姓名固定約四個中文字寬；置於檔案後段並提高選擇器權重，避免通用表格樣式覆蓋。 */
.tbl-wrap>table.futab{width:100%;min-width:0;table-layout:fixed}
.tbl-wrap>table.futab col.futab-name{width:calc(4em + 18px)}
.tbl-wrap>table.futab col.futab-date{width:calc(7em + 18px)}
.tbl-wrap>table.futab td:first-child,.tbl-wrap>table.futab th:first-child{word-break:break-all;overflow-wrap:anywhere}
.tbl-wrap>table.futab td:nth-child(2),.tbl-wrap>table.futab th:nth-child(2){white-space:nowrap}
.tbl-wrap>table.futab td:nth-child(3),.tbl-wrap>table.futab th:nth-child(3){overflow-wrap:anywhere;word-break:break-word}
@media (min-width:901px) and (max-width:1180px){
  .tbl-wrap>table.futab col.futab-name{width:calc(4em + 14px)}
  .tbl-wrap>table.futab col.futab-date{width:calc(7em + 14px)}
}

/* 階段色票 */
.stg{display:inline-block;border-radius:20px;padding:1px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.st-new{background:#eef2f7;color:#46596a}.st-touch{background:#e6f2fd;color:#1b5f95}.st-warm{background:#fff4dc;color:#8a5600}
.st-hot{background:#ffe9e4;color:#b23a1f}.st-won{background:#e3f8ee;color:#0b6b48}.st-cold{background:#f1f1f1;color:#888}

/* ---- users / review ---- */
.pill{display:inline-block;border-radius:20px;padding:1px 10px;font-size:12px;font-weight:700}
.pill.on{background:#e3f8ee;color:#0b6b48}.pill.wait{background:#fff4dc;color:#8a5600}.pill.off{background:#f1f1f1;color:#888}
.ok-t{color:var(--ok);font-weight:700;font-size:12px}.err-t{color:var(--err);font-weight:700;font-size:12px}
.progress{position:relative;height:26px;background:#e6edf3;border-radius:20px;overflow:hidden;margin:0 0 12px}
.progress i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#17e0c4,#38bdf8)}
.progress span{position:relative;display:block;text-align:center;line-height:26px;font-size:12.5px;font-weight:700;color:#0e1c34}

/* ---- auth pages ---- */
.authtip{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(43,214,185,.1);border:1px solid rgba(43,214,185,.35);color:#bfeee4;font-size:13px;line-height:1.5}
ol.steps{display:flex;gap:6px;list-style:none;padding:0;margin:4px 0 14px;counter-reset:s}
ol.steps li{flex:1;counter-increment:s;font-size:12px;color:#7f97ad;border-top:3px solid rgba(127,151,173,.35);padding-top:6px}
ol.steps li::before{content:counter(s) ". "}
ol.steps li.on{color:#7fe9d8;border-top-color:#17e0c4;font-weight:700}
.card.login{max-width:460px;margin:30px auto}
.card.login .btn.primary{width:100%;margin-top:8px;padding:11px}
.card.login form{display:flex;flex-direction:column;gap:12px}
.foot{padding:30px 20px 24px}
@media(max-width:640px){.wrap{padding:16px 12px}.pf-contact{min-width:0}form.inline.wide{flex-wrap:wrap}.hero{padding:22px 18px}.hero h1{font-size:23px}}

/* v31 履歷事件：summary 不用 grid（Safari 不支援），改內層堆疊式，適配半寬欄 */
.histevent-head{display:block;list-style:none;padding:10px 0;cursor:pointer}
.histevent-head::-webkit-details-marker{display:none}.histevent-head::marker{content:""}
.hehead{display:flex;flex-direction:column;gap:4px;min-width:0}
.herow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.herow .histdate{background:#e8f6f4;border-radius:6px;padding:2px 8px;white-space:nowrap}
.herow .src{white-space:nowrap}
.herow .histtoggle{margin-left:auto;white-space:nowrap}
.histtitle{font-weight:700;color:#0e1c34;font-size:14px;line-height:1.5;word-break:break-word}
.histwho{font-size:12px;color:#526574}
.histbody{padding:0 0 12px 0}
@media(max-width:800px){.histevent-head{display:block}.histbody{padding:0 0 12px}}

/* ============ 複利宅沙龍 · 報名詳情卡片化（Nettie 2026-10-06 參考圖二）============ */
.salon-assign-cell{min-width:140px}
.salon-assign-inline{margin:0}
.salon-assign-inline select{font-size:12px;padding:4px 6px;max-width:160px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}

/* inline 審核 buttons on list row (Nettie 2026-10-06) */
.salon-status-cell{min-width:150px}
.salon-review-inline{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.salon-review-inline form{margin:0}
.salon-review-inline .btn.sm{font-size:12px;padding:3px 9px}
.salon-rv-ok{background:#1a7f37;border-color:#1a7f37;color:#fff}
.salon-rv-ok:hover{background:#15682c}
.salon-rv-no{background:#b42318;border-color:#b42318;color:#fff}
.salon-rv-no:hover{background:#991c10}
tr.salon-detail>td{background:#f2f5f8;padding:0;border-top:0}
.salon-detail>details{margin:0}
.salon-detail>details>summary{list-style:none;cursor:pointer;padding:12px 22px;font-weight:600;
  font-size:13.5px;color:#0e1c34;background:#e9eff5;border-top:1px solid var(--line)}
.salon-detail>details>summary::-webkit-details-marker{display:none}
.salon-detail>details>summary::before{content:"\25B8  ";color:var(--gold);font-weight:700}
.salon-detail>details[open]>summary::before{content:"\25BE  "}
.salon-panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;padding:18px 22px 24px}
.salon-panes .pane{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 16px;box-shadow:0 1px 3px rgba(16,28,52,.05)}
.salon-panes .pane h4{margin:0 0 14px;font-size:15px;color:#0e1c34;font-weight:700;
  padding-bottom:9px;border-bottom:2px solid var(--gold);display:inline-block}
dl.kv{margin:0;display:grid;grid-template-columns:max-content 1fr;column-gap:16px}
dl.kv dt{color:var(--muted);font-size:13px;font-weight:600;padding:8px 0;
  border-bottom:1px solid #eef2f6;white-space:nowrap}
dl.kv dd{margin:0;color:var(--ink);font-size:13.5px;padding:8px 0;
  border-bottom:1px solid #eef2f6;word-break:break-word;text-align:right}
dl.kv dt:nth-last-of-type(1),dl.kv dd:nth-last-of-type(1){border-bottom:0}
.salon-panes .pane form.grid{margin-top:12px;padding:14px;background:#fbfcfd;box-shadow:none}
.salon-panes .pane form.grid{grid-template-columns:1fr}
.salon-panes .pane form.grid .full{grid-column:1}
.salon-panes .pane form.grid label{min-width:0}
.salon-panes .pane form.grid label select,.salon-panes .pane form.grid label input,.salon-panes .pane form.grid label textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.salon-panes .pane form.grid select{text-overflow:ellipsis}
.salon-hist{list-style:none;margin:12px 0 0;padding:0}
.salon-hist li{padding:9px 12px;margin-bottom:7px;background:#f7fafc;border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;font-size:13px;line-height:1.55}
.salon-hist .hk{display:inline-block;font-size:11px;font-weight:700;color:#0e1c34;background:#e3edf5;
  padding:1px 8px;border-radius:5px;margin-right:6px}
@media(max-width:640px){.salon-panes{grid-template-columns:1fr;padding:14px}dl.kv dd{text-align:left}}
pre.salon-copy{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;margin:12px 0 0;
  padding:14px 16px;background:#f7fafc;border:1px solid var(--line);border-radius:10px;
  font:14px/1.95 "PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink)}
.panel-h .btn.sm{flex:0 0 auto}

/* 沙龍名單一人一行＋指派泡泡（Nettie 2026-10-08） */
.salon-status-cell{white-space:nowrap}
.salon-status-cell>.tag,.salon-status-cell>.salon-review-inline{display:inline-flex;vertical-align:middle}
.salon-status-cell .salon-review-inline{flex-wrap:nowrap;margin:0 0 0 6px}
tr.salon-detail-row>td.salon-detail{background:#f2f5f8;padding:0;border-top:0}
.salon-bubble{position:absolute;z-index:9999;background:#1a7f37;color:#fff;font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;
  box-shadow:0 4px 14px rgba(16,28,52,.22);white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.salon-bubble::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:inherit}
.salon-bubble{border-top-color:#1a7f37}.salon-bubble.bad{background:#b42318;border-top-color:#b42318}
.salon-bubble.show{opacity:1;transform:translateY(0)}

/* 到場按鈕＋簽到表匯入（Nettie 2026-10-08） */
.salon-att-cell{white-space:nowrap}
.salon-att-wrap{display:inline-flex;gap:4px}
.salon-att-wrap .btn.sm{font-size:12px;padding:3px 9px;background:#fff;color:#526574}
.salon-att-wrap .salon-att.yes.on{background:#1a7f37;border-color:#1a7f37;color:#fff}
.salon-att-wrap .salon-att.no.on{background:#8a94a3;border-color:#8a94a3;color:#fff}
.salon-signin-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.salon-signin-jobs{list-style:none;margin:12px 0 0;padding:0}
.salon-signin-jobs li{padding:9px 12px;margin-bottom:7px;background:#f7fafc;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;font-size:13px;line-height:1.6}
.salon-signin-un{color:#9a5b00}
.salon-session-stats{table-layout:fixed;min-width:960px}
.salon-session-stats th:nth-child(n+5),.salon-session-stats td:nth-child(n+5){text-align:center;vertical-align:middle}
.salon-session-stats th:nth-child(1){width:20%}
.salon-session-stats th:nth-child(2){width:12%}
.salon-session-stats th:nth-child(3){width:10%}
.salon-session-stats th:nth-child(4){width:14%}
.salon-session-stats th:nth-child(n+5){width:8.8%}
.salon-session-stats td:nth-child(n+5) b{display:inline-block;min-width:2.5em;text-align:center}

/* 場次頁返回按鈕放大（Nettie 2026-10-08） */
.salon-backnav{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.salon-backnav .btn{font-size:15px;font-weight:700;padding:10px 20px;border-radius:10px}
.salon-backnav .btn:not(.primary){background:#fff;border:2px solid #1aa6a0;color:#0e6f6b}
.salon-edit-session{margin:14px 0 18px}
.salon-edit-session>summary.btn{font-size:16px;font-weight:800;padding:12px 22px;border-radius:12px}
.salon-edit-session[open]{padding:0 0 16px}

.salon-sess-date{color:#0e6f6b;white-space:nowrap}

/* ---- 複利宅後台手機版：表格轉卡片，避免橫向爆版 ---- */
@media(max-width:720px){
  .wrap{padding:14px 10px}
  .topbar{padding:10px 12px;gap:10px}
  .topbar nav{order:3;width:100%;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .topbar nav a{white-space:nowrap;font-size:13px}
  .topbar .who{font-size:12px}
  h1{font-size:22px;line-height:1.25}
  .hero{padding:20px 16px;border-radius:14px}
  .hero h1{font-size:24px;line-height:1.25}
  .hero-actions,.salon-backnav,.salon-filter{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-actions .btn,.salon-backnav .btn,.salon-filter .btn{width:100%;text-align:center;white-space:normal}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:14px 12px;border-radius:12px}
  .stat .n{font-size:28px}
  .stat .l{font-size:12px}
  .panel{padding:13px 11px;border-radius:12px}
  .panel-h{align-items:stretch;flex-direction:column;gap:8px}
  .panel-h a,.panel-h .btn{width:100%;text-align:center}
  .salon-edit-session>summary.btn{width:100%;text-align:center;font-size:15px;padding:12px 14px;white-space:normal}
  .salon-signin-form input[type=file],.salon-signin-form .btn{width:100%}
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}

  table.salon-mobile-cards{display:block;overflow:visible;background:transparent;border:0;box-shadow:none}
  table.salon-mobile-cards>tbody{display:block}
  table.salon-mobile-cards tr:first-child{display:none}
  table.salon-mobile-cards tr[hidden]{display:none!important}
  table.salon-mobile-cards tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;margin:10px 0;overflow:hidden;box-shadow:0 6px 18px -14px rgba(16,40,70,.4)}
  table.salon-mobile-cards td{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:9px 11px;background:#fff!important;min-height:42px;text-align:right}
  table.salon-mobile-cards td::before{flex:0 0 auto;color:#657684;font-size:12px;font-weight:700;text-align:left;white-space:nowrap}
  table.salon-mobile-cards td:first-child{display:block;text-align:left;background:#f6fafc!important;font-weight:700}
  table.salon-mobile-cards td:first-child::before{display:none}
  table.salon-mobile-cards td:last-child{border-bottom:0}
  table.salon-mobile-cards .btn,table.salon-mobile-cards select{max-width:100%}

  .salon-session-stats{min-width:0;table-layout:auto}
  .salon-session-stats td:nth-child(2)::before{content:"日期"}
  .salon-session-stats td:nth-child(3)::before{content:"狀態"}
  .salon-session-stats td:nth-child(4)::before{content:"操作"}
  .salon-session-stats td:nth-child(5)::before{content:"待審核"}
  .salon-session-stats td:nth-child(6)::before{content:"已核准"}
  .salon-session-stats td:nth-child(7)::before{content:"未通過"}
  .salon-session-stats td:nth-child(8)::before{content:"報名人數"}
  .salon-session-stats td:nth-child(9)::before{content:"實到人數"}
  .salon-session-stats td:nth-child(n+5) a{display:inline-block!important;text-align:right!important}

  .salon-list .salon-main-row>td:nth-child(2)::before{content:"電話"}
  .salon-list .salon-main-row>td:nth-child(3)::before{content:"場次"}
  .salon-list .salon-main-row>td:nth-child(4)::before{content:"來源"}
  .salon-list .salon-main-row>td:nth-child(5)::before{content:"狀態"}
  .salon-list .salon-main-row>td:nth-child(6)::before{content:"指派"}
  .salon-list .salon-main-row>td:nth-child(7)::before{content:"到場"}
  .salon-list .salon-main-row>td:nth-child(8){display:block;text-align:center}
  .salon-list .salon-main-row>td:nth-child(8)::before{display:none}
  .salon-list .salon-main-row .salon-toggle{width:100%}
  .salon-list .salon-detail-row{border:0;box-shadow:none;margin:-4px 0 12px;background:transparent}
  .salon-list .salon-detail-row>td.salon-detail{display:block;padding:0;background:transparent!important;border:0;text-align:left}
  .salon-list .salon-detail-row>td.salon-detail::before{display:none}
  .salon-status-cell{white-space:normal}
  .salon-status-cell>.tag,.salon-status-cell>.salon-review-inline{display:flex}
  .salon-status-cell .salon-review-inline{margin:7px 0 0;flex-wrap:wrap;justify-content:flex-end}
  .salon-review-inline .btn.sm{min-height:32px}
  .salon-assign-cell select,.salon-assign-inline select{max-width:180px}
  .salon-att-wrap{justify-content:flex-end}
  .salon-att-wrap .btn.sm{min-height:32px}
  .salon-panes{grid-template-columns:1fr;padding:10px;gap:10px}
  .salon-panes .pane{border-radius:12px;padding:13px}
  .salon-panes .pane dl.kv{grid-template-columns:1fr;gap:0}
  .salon-panes .pane dl.kv dt{padding:7px 0 0;border-bottom:0}
  .salon-panes .pane dl.kv dd{padding:1px 0 8px;text-align:left}
  .salon-panes textarea[readonly]{font-size:12px}

  .salon-session-list td:nth-child(2)::before{content:"代碼"}
  .salon-session-list td:nth-child(3)::before{content:"日期"}
  .salon-session-list td:nth-child(4)::before{content:"時間"}
  .salon-session-list td:nth-child(5)::before{content:"狀態"}
  .salon-session-list td:nth-child(6)::before{content:"名額"}
  .salon-session-list td:nth-child(7)::before{content:"報名/核准"}
  .salon-session-list td:nth-child(8){display:block;text-align:center}
  .salon-session-list td:nth-child(8)::before{display:none}
  .salon-session-list td:nth-child(8) .btn{width:100%}

  .salon-roster td:nth-child(2)::before{content:"電話"}
  .salon-roster td:nth-child(3)::before{content:"狀態"}
  .salon-roster td:nth-child(4)::before{content:"指派業務"}
  .salon-roster td:nth-child(5)::before{content:"到場"}
  .salon-roster td:nth-child(6){display:block;text-align:center}
  .salon-roster td:nth-child(6)::before{display:none}
  .salon-roster td:nth-child(6) .btn{width:100%}

  .salon-past-list td:nth-child(2)::before{content:"日期"}
  .salon-past-list td:nth-child(3)::before{content:"報名人數"}
  .salon-past-list td:nth-child(4)::before{content:"核准"}
  .salon-past-list td:nth-child(5)::before{content:"實際到場"}
  .salon-past-list td:nth-child(6){display:block;text-align:center}
  .salon-past-list td:nth-child(6)::before{display:none}
  .salon-past-list td:nth-child(6) .btn{width:100%}
}