/* YIFEIGROUP Design System — batch 1 (b2) */
/* ===== YIFEIGROUP Design System v1 — PREVIEW LAYER ===== */
:root{
 /* Brand */
 --brand-900:#4a0f19;--brand-800:#621623;--brand-700:#7d1f2c;--brand-600:#94293a;--brand-500:#a3374a;--brand-200:#ecd3d7;--brand-100:#f6e8ea;--brand-50:#fbf4f5;
 /* Neutral (warm) */
 --n-0:#ffffff;--n-25:#fcfaf8;--n-50:#f7f4f1;--n-100:#efeae6;--n-200:#e4ddd8;--n-300:#cfc6c1;--n-500:#8a7f81;--n-600:#6b6163;--n-800:#3a3133;--n-900:#231c1e;
 /* Semantic */
 --success:#2f7d55;--success-bg:#e8f3ec;--warning:#a86a12;--warning-bg:#fbf1df;--danger:#b4232f;--danger-bg:#fbe9ea;--info:#2f5f8f;--info-bg:#e7eef6;
 /* Map old tokens -> new */
 --rouge:var(--brand-700);--rouge-2:var(--brand-500);--rouge-soft:var(--brand-100);--bg:var(--n-50);--card:var(--n-0);--ink:var(--n-900);--muted:var(--n-500);--line:var(--n-100);--ok:var(--success);
 /* Space 4pt */
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;
 /* Radius */
 --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;--radius:var(--r-lg);
 /* Elevation */
 --e1:0 1px 2px rgba(35,28,30,.05),0 0 0 1px rgba(35,28,30,.04);
 --e2:0 4px 14px rgba(35,28,30,.07),0 0 0 1px rgba(35,28,30,.03);
 --e3:0 12px 32px rgba(35,28,30,.14);
 --shadow:var(--e1);
 /* Type */
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
 --t-display:600 28px/1.25 var(--font);--t-h1:700 22px/1.3 var(--font);--t-h2:650 17px/1.35 var(--font);--t-body:400 15px/1.55 var(--font);--t-label:600 13px/1.4 var(--font);--t-cap:400 12px/1.4 var(--font);
 --nav-h:64px;--side-w:248px;
}
body{background:var(--bg);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
/* ---------- Top bar: light, quiet ---------- */
.top{background:rgba(247,244,241,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--n-100)}
.top.compact{box-shadow:0 1px 0 var(--n-200)}
.top .ptitle{font:var(--t-h2);letter-spacing:.02em}
.top .burger{color:var(--ink)}
.top .lang{color:var(--n-600);border:1px solid var(--n-200);background:var(--n-0);border-radius:var(--r-pill);font:var(--t-label);padding:5px 12px}
main{padding:var(--s4) var(--s4) calc(var(--nav-h) + 28px + env(safe-area-inset-bottom))}
/* ---------- Hero -> calm greeting header ---------- */
.hero{background:none !important;color:var(--ink);box-shadow:none;border-radius:0;padding:var(--s2) var(--s1) var(--s4) !important;margin-bottom:var(--s2) !important}
.hero .glow{display:none}
.hero .hi{font:var(--t-display) !important;font-family:var(--font) !important;letter-spacing:0 !important}
.hero .dt{font:var(--t-label);color:var(--muted);opacity:1;margin-top:2px;order:-1}
.hero .quote{border-top:0;padding-top:0 !important;margin-top:6px !important;color:var(--n-600);font:italic 400 13px/1.5 Georgia,"Noto Serif TC",serif !important;opacity:1}
/* ---------- Section label ---------- */
.hlab{font:var(--t-label);color:var(--n-600);letter-spacing:.04em;margin:var(--s5) var(--s1) var(--s2)}
.hlab .hmore{font:var(--t-label);color:var(--brand-700)}
/* ---------- Surfaces (cards) ---------- */
.myshift,.hsec,.annlist,.actrow,.card,.qtile,.pushcard{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--e1)}
.myshift{border-left:0;padding:var(--s4);position:relative;overflow:hidden}
.myshift::before{content:"";position:absolute;left:0;top:var(--s4);bottom:var(--s4);width:3px;border-radius:0 3px 3px 0;background:var(--brand-700)}
.myshift .lbl{font:var(--t-label);color:var(--brand-700);letter-spacing:.02em}
.myshift .big{font:var(--t-h1);margin-top:var(--s1)}
.myshift .sub{font:var(--t-body);color:var(--n-600)}
.hsec{padding:var(--s4)}
.hsec h3{font:var(--t-h2);margin:0 0 var(--s2);display:flex;align-items:center;gap:var(--s2)}
/* Action rows */
.actrow{padding:var(--s3) var(--s4);gap:var(--s3);margin-bottom:var(--s2)}
.actrow.must{box-shadow:var(--e1);background:linear-gradient(0deg,var(--brand-50),var(--brand-50))}
.actrow .ai{width:36px;height:36px;border-radius:var(--r-md);background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center}
.actrow .ai svg{width:19px;height:19px}
.actrow .at b{font:600 15px/1.35 var(--font)}
.actrow .at small{font:var(--t-cap);color:var(--n-600);margin-top:1px}
.actrow .ab{background:var(--brand-700);font:var(--t-label);padding:7px 14px}
/* Facial mini */
.facmini .fhrow{padding:var(--s3) 0;border-top:1px solid var(--n-100)}
.facmini .fhrow:first-of-type{border-top:0}
.facmini .fm b{font:600 15px/1.35 var(--font)}
.facmini .fm small{font:var(--t-cap);color:var(--n-600)}
.fst.ok{background:var(--success-bg);color:var(--success);border-radius:var(--r-pill);padding:4px 10px;font:var(--t-label)}
/* Announcements */
.annlist{padding:0 var(--s4)}
.annrow{padding:var(--s3) 0;border-bottom:1px solid var(--n-100)}
.annrow b{font:600 15px/1.4 var(--font)}
.annrow span{font:var(--t-cap);color:var(--n-600)}
.annrow .pin{display:inline-block;font:600 11px/1 var(--font);color:var(--brand-700);background:var(--brand-100);border-radius:var(--r-sm);padding:3px 6px;margin-right:6px;vertical-align:2px}
/* Star banner -> neutral card with accent */
.starmini{background:var(--card) !important;box-shadow:var(--e1);border-radius:var(--r-lg);color:var(--ink) !important;padding:var(--s3) var(--s4)}
.starmini b{font:600 15px/1.3 var(--font)}
.starmini span{color:var(--n-600);font:var(--t-cap) !important}
.starmini .dsi{width:36px;height:36px;border-radius:var(--r-md);background:var(--warning-bg);color:var(--warning);display:flex;align-items:center;justify-content:center;flex:none}
.starmini .go{color:var(--n-300)}
/* Quick tiles: one tint family */
.qgrid{gap:var(--s2)}
.qtile{min-height:auto;flex-direction:row;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r-lg)}
.qtile .qi,.qtile:nth-child(n) .qi{background:var(--brand-50) !important;color:var(--brand-700) !important;width:36px;height:36px;border-radius:var(--r-md);flex:none}
.qtile .ql{font:600 14px/1.3 var(--font)}
/* Buttons */
.btn{border-radius:var(--r-md);font:600 15px/1 var(--font);padding:13px 16px;min-height:44px}
.btn-primary{background:var(--brand-700)}
.btn-primary:hover{background:var(--brand-800)}
.btn-primary:disabled{background:var(--n-200);color:var(--n-500);opacity:1}
.pill{border-color:var(--n-200);font:var(--t-label);padding:7px 14px}
/* ---------- Bottom tab bar (mobile) ---------- */
.dsnav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -1px 0 var(--n-100)}
.dsnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:500 11px/1 var(--font);color:var(--n-500);position:relative}
.dsnav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dsnav button.on{color:var(--brand-700);font-weight:650}
.dsnav button.on::before{content:"";position:absolute;top:6px;width:44px;height:30px;border-radius:var(--r-pill);background:var(--brand-100);z-index:-1}
.dsnav button.on svg{transform:translateY(-1px)}
.dsnav .dot{position:absolute;top:8px;left:calc(50% + 8px);min-width:16px;height:16px;border-radius:8px;background:var(--danger);color:#fff;font:600 10px/16px var(--font);padding:0 4px}
.fab{bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom))}
/* ---------- Drawer (as "更多" sheet on mobile) ---------- */
.drawer{background:var(--n-25)}
.dhead{border-bottom:1px solid var(--n-100)}
.drawer button[data-tab],.dlogout{font:500 15px/1.3 var(--font);padding:11px 16px;margin:2px 10px;width:calc(100% - 20px);border-radius:var(--r-md)}
.drawer button[data-tab].active{background:var(--brand-100);box-shadow:none;color:var(--brand-800);font-weight:650}
.drawer button[data-tab]:hover{background:var(--n-100)}
.drawer button svg{width:20px;height:20px;color:var(--n-500)}
.dgh{font:600 11.5px/1 var(--font) !important;letter-spacing:.08em;color:var(--n-500) !important;padding:16px 26px 6px !important;text-transform:uppercase}
/* ---------- Desktop: persistent sidebar ---------- */
@media (min-width:1024px){
 .dsnav{display:none}
 .drawer{transform:none !important;visibility:visible !important;width:var(--side-w);box-shadow:1px 0 0 var(--n-100) !important;z-index:6}
 .drawer-bd{display:none !important}
 .topwrap{margin-left:var(--side-w)}
 .top .burger{display:none}
 main,main.wide{margin-left:calc(var(--side-w) + max(0px,(100vw - var(--side-w) - 1120px)/2));margin-right:auto;max-width:1120px;padding:var(--s6) var(--s8) var(--s8)}
 #hm{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0 var(--s6);align-items:start}
 #hm>*{grid-column:1}
 #hm>#hStar,#hm>.hlab.ql2,#hm>.qgrid,#hm>.qhead,#hm>#whoBox,#hm>.hsec{grid-column:2}
 .qgrid{grid-template-columns:1fr 1fr}
 .fab{bottom:24px}
}
.hero,.hero.morning,.hero.day,.hero.night{background:transparent !important;box-shadow:none !important}
.qtile{justify-content:flex-start}
.facmini .btn{min-height:34px;font:600 13.5px/1 var(--font);padding:8px 14px !important;border-radius:var(--r-pill)}
.dlogo{max-width:150px;height:auto}
.qhead.hlab h3{font:inherit;margin:0;color:inherit}
.qhead .mini{font:var(--t-label);color:var(--brand-700);background:none;border:0}
@media (min-width:1024px){
 #hm{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s6);align-items:start}
 #hm>.dsL,#hm>.dsR{grid-column:auto}
 #hm .dsL>.hlab:first-child,#hm .dsR>.hlab:first-child,#hm .dsR>#hStar:first-child .starmini{margin-top:0}
 .drawer button[data-tab],.dlogout{font-size:14.5px;padding:9px 14px}
}
/* ===== Motion tokens ===== */
:root{
 --dur-instant:100ms;   /* 按壓回饋 */
 --dur-fast:220ms;      /* hover、顏色、小元件 */
 --dur-base:340ms;      /* 頁面進場、卡片、對話框 */
 --dur-slow:480ms;      /* 側邊選單、底部面板 */
 --ease-out:cubic-bezier(.22,1,.36,1);        /* 進場：快起慢停 */
 --ease-in:cubic-bezier(.4,0,1,1);            /* 離場：短而乾脆 */
 --ease-ios:cubic-bezier(.32,.72,0,1);        /* 面板、選單（iOS 風格） */
 --ease-std:cubic-bezier(.2,0,0,1);           /* 一般狀態切換 */
 --shift-sm:4px;--shift-md:8px;--shift-lg:24px;
 --press-scale:.97;--stagger:50ms;
}
@keyframes dsIn{from{opacity:0;transform:translate3d(0,var(--shift-md),0)}to{opacity:1;transform:none}}
@keyframes dsFade{from{opacity:0}to{opacity:1}}
@keyframes dsSheetUp{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes dsPop{from{opacity:0;transform:scale(.96) translate3d(0,var(--shift-md),0)}to{opacity:1;transform:none}}
/* 1. 頁面切換：淡入＋8px 上移，最多錯開 4 層，總長 ≤ 340ms */
#main.enter>*,#hm>*,#hm .dsL>*,#hm .dsR>*{animation:dsIn var(--dur-base) var(--ease-out) both}
#main.enter>*:nth-child(2),#hm>*:nth-child(2),.dsL>*:nth-child(2),.dsR>*:nth-child(2){animation-delay:calc(var(--stagger)*1)}
#main.enter>*:nth-child(3),#hm>*:nth-child(3),.dsL>*:nth-child(3),.dsR>*:nth-child(3){animation-delay:calc(var(--stagger)*2)}
#main.enter>*:nth-child(n+4),#hm>*:nth-child(n+4),.dsL>*:nth-child(n+4),.dsR>*:nth-child(n+4){animation-delay:calc(var(--stagger)*3)}
#hm>.dsL,#hm>.dsR{animation:none}
/* 2. 側邊選單：iOS 曲線滑入，背景同步變暗 */
.drawer{transition:transform var(--dur-slow) var(--ease-ios),visibility 0s linear var(--dur-slow) !important;will-change:transform}
body.drawer-open .drawer{transition:transform var(--dur-slow) var(--ease-ios) !important;box-shadow:var(--e3) !important}
.drawer-bd{background:rgba(35,20,24,.32);transition:opacity var(--dur-slow) var(--ease-ios) !important}
body.drawer-open .drawer button[data-tab]{animation:dsIn var(--dur-base) var(--ease-out) both;animation-delay:60ms}
/* 3. 彈出視窗：手機由下滑上、桌機淡入＋輕微放大；關閉時反向 */
.backdrop{animation:dsFade var(--dur-base) var(--ease-out) both;background:rgba(35,20,24,.36)}
.backdrop .sheet{animation:dsSheetUp var(--dur-slow) var(--ease-ios) both;will-change:transform}
@media(min-width:700px){.backdrop .sheet{animation:dsPop var(--dur-base) var(--ease-out) both}}
.backdrop.out{animation:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-in)}
.backdrop.out .sheet{animation:none;transform:translate3d(0,var(--shift-lg),0);opacity:0;transition:transform var(--dur-fast) var(--ease-in),opacity var(--dur-fast) var(--ease-in)}
/* 4. 非同步內容（載入後才出現的卡片）輕微淡入 */
#hPend>*,#hFacial>*,#hTask>*,#hStar>*,.list>*{animation:dsIn var(--dur-base) var(--ease-out) both}
/* 5. 按壓回饋：只用 transform/opacity，按下 100ms、放開 160ms */
.btn,.pill,.card,.actrow,.annrow,.qtile,.starmini,.evebtn,.dsnav button,.drawer button,.fab,.lang,.burger{transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-std),color var(--dur-fast) var(--ease-std),box-shadow var(--dur-fast) var(--ease-std),opacity var(--dur-fast) var(--ease-std) !important;-webkit-tap-highlight-color:transparent}
.btn:active,.pill:active,.card:active,.actrow:active,.qtile:active,.starmini:active,.evebtn:active,.fab:active,.lang:active{transform:scale(var(--press-scale)) !important;transition-duration:var(--dur-instant) !important}
.annrow:active,.drawer button:active{opacity:.6;transition-duration:var(--dur-instant) !important}
@media(hover:hover){.actrow:hover,.qtile:hover,.starmini:hover{box-shadow:var(--e2)}}
/* 底部導覽：選取膠囊滑動 */
.dsnav button::before{content:"";position:absolute;top:6px;width:44px;height:30px;border-radius:999px;background:var(--brand-100);z-index:-1;opacity:0;transform:scale(.6);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-std)}
.dsnav button.on::before{opacity:1;transform:none}
.dsnav button:active svg{transform:scale(.88)}
.dsnav svg{transition:transform var(--dur-fast) var(--ease-out)}
/* Toast：由下滑入 */
#toast>*{animation:dsIn var(--dur-base) var(--ease-out) both}
/* 減少動態：保留淡入，移除位移與縮放 */
@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation-duration:1ms !important;animation-delay:0s !important;transition-duration:1ms !important}
}
/* 快速切換：分頁列＝120ms 淡入、不位移；連點＝不播 */
#main.quick>*,#main.quick #hm>*,#main.quick .dsL>*,#main.quick .dsR>*{animation:dsFade 240ms var(--ease-out) both !important;animation-delay:0s !important}
#main.instant>*,#main.instant #hm>*,#main.instant .dsL>*,#main.instant .dsR>*{animation:none !important}
.drawer.dragging,.drawer-bd.dragging,.sheet.dragging{transition:none !important}
body.drawer-open .drawer.dragging button[data-tab]{animation:none}
.sgrab{width:36px;height:5px;border-radius:3px;background:var(--n-200);margin:-6px auto 2px;touch-action:none}
@media(min-width:700px){.sgrab{display:none}}
html,button,a,input,select,label{touch-action:manipulation}
.sheet-head{touch-action:none}
/* 頂部列 A：胭脂紅 */
body.tbA .top{background:var(--brand-700);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body.tbA .top.compact{box-shadow:0 2px 10px rgba(74,15,25,.22)}
body.tbA .top .burger{color:#fff}
body.tbA .top .lang{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
/* ===================== v3 PREVIEW LAYER ===================== */
:root{
 --bp-tablet:600px; --bp-laptop:1024px; --bp-desktop:1280px; --bp-wide:1600px;   /* 文件用：斷點 */
 --side-w:248px; --side-w-c:76px; --top-h:60px; --panel-w:440px;
 --ring:0 0 0 3px rgba(163,55,74,.28);
 --dur-panel:400ms;
}
/* ---------- 每日小語卡片：保留原本大小與存在感，改成柔和配色 ---------- */
.hero{display:block !important;position:relative;overflow:hidden;border-radius:20px !important;padding:18px 18px 16px !important;margin-bottom:12px !important;
 color:var(--brand-900) !important;border:1px solid rgba(125,31,44,.07);box-shadow:0 1px 2px rgba(74,15,25,.05),0 8px 24px rgba(74,15,25,.06) !important}
.hero.morning{background:linear-gradient(135deg,#fdf4ea 0%,#f8e6d6 60%,#f3d9c6 100%) !important}
.hero.day{background:linear-gradient(135deg,#fcf1f2 0%,#f6e1e4 60%,#efd0d6 100%) !important}
.hero.night{background:linear-gradient(135deg,#f4eef4 0%,#e9dde9 60%,#ddcbdc 100%) !important}
.hero .glow{display:block !important;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 70%) !important;opacity:.9}
.hero::after{content:"\201C";position:absolute;right:14px;bottom:-34px;font:700 150px/1 Georgia,serif;color:rgba(125,31,44,.07);pointer-events:none}
.hero .dt{order:0;font:500 13px/1.4 var(--font) !important;color:rgba(74,15,25,.62) !important;margin-top:4px}
.hero .hi{font:600 24px/1.3 var(--font) !important;color:var(--brand-900)}
.hero .quote{margin-top:14px !important;padding-top:12px !important;border-top:1px solid rgba(125,31,44,.12) !important;color:var(--brand-800) !important;
 font:400 15px/1.6 Georgia,"Noto Serif TC","Songti TC",serif !important;font-style:normal !important;letter-spacing:.3px;opacity:1 !important}
@media(min-width:1024px){.hero{padding:24px 28px 22px !important}.hero .hi{font-size:28px !important}.hero .quote{font-size:16.5px !important;max-width:780px}}

/* ---------- 讀取進度條（取代空白等待） ---------- */
#dsbar{position:fixed;left:0;top:0;height:2px;width:0;z-index:60;background:var(--brand-500);opacity:0;pointer-events:none;
 transition:width 600ms var(--ease-out),opacity 200ms var(--ease-std)}
#dsbar.run{opacity:1;width:72%}
#dsbar.done{opacity:0;width:100%;transition:width 160ms var(--ease-out),opacity 260ms 120ms var(--ease-std)}
@media(min-width:1024px){#dsbar{left:var(--sidecur,var(--side-w))}}

/* ---------- 側選單：功能分類（人事／營運／客戶／文件／設定）＋平滑展開收合 ---------- */
.dsg{margin-top:4px}
.dsgh{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 20px);margin:10px 10px 2px;padding:8px 12px;border:0;background:none;border-radius:8px;
 font:600 11.5px/1 var(--font);letter-spacing:.08em;color:var(--n-500);cursor:pointer}
.dsgh:hover{background:var(--n-100)}
.dsgh svg{width:14px;height:14px;transition:transform var(--dur-base) var(--ease-out)}
.dsg.closed .dsgh svg{transform:rotate(-90deg)}
.dsgi{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-std)}
.dsgi>div{overflow:hidden;min-height:0}
.dsg.closed .dsgi{grid-template-rows:0fr;opacity:0}
.dsset{font:600 11.5px/1 var(--font);letter-spacing:.08em;color:var(--n-500);padding:16px 22px 6px;border-top:1px solid var(--n-100);margin-top:8px}
.drawer .dlogout{border-top:0 !important}
.dsnavedit{display:flex;align-items:center;gap:14px;width:calc(100% - 20px);margin:2px 10px;padding:11px 16px;border:0;background:none;border-radius:12px;font:500 15px/1.3 var(--font);color:var(--ink);text-align:left}
.dsnavedit svg{width:20px;height:20px;color:var(--n-500)}
@media(min-width:1024px){.dsnavedit{display:none}}

/* ---------- 底部導覽自訂面板 ---------- */
.nvprev{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;background:var(--n-50);border-radius:16px;padding:8px;margin:4px 0 14px}
.nvprev .sl{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px 8px;border-radius:12px;border:1.5px dashed transparent;font:500 11px/1 var(--font);color:var(--n-500);background:none;min-height:62px;position:relative}
.nvprev .sl svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.nvprev .sl.fix{opacity:.55}
.nvprev .sl.ed{background:#fff;color:var(--ink);box-shadow:var(--e1)}
.nvprev .sl.ed.sel{border-color:var(--brand-500);color:var(--brand-700);box-shadow:var(--ring)}
.nvprev .sl .n{position:absolute;top:4px;right:6px;font:700 10px/1 var(--font);color:var(--brand-500)}
.nvhint{font:var(--t-cap);color:var(--n-600);margin:0 0 10px}
.nvlist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nvlist button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;border:1px solid var(--n-100);background:#fff;font:500 12.5px/1.2 var(--font);color:var(--ink);position:relative}
.nvlist button svg{width:22px;height:22px;color:var(--brand-700)}
.nvlist button.on{border-color:var(--brand-200);background:var(--brand-50)}
.nvlist button.on::after{content:attr(data-n);position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:9px;background:var(--brand-700);color:#fff;font:700 11px/18px var(--font);text-align:center}
.nvlist button.soon{opacity:.45}
.nvlist button.soon small{font:500 10px/1 var(--font);color:var(--n-500)}
.nvdemo{display:inline-block;font:700 10.5px/1 var(--font);letter-spacing:.06em;color:#8a5a00;background:#fbf1df;border-radius:6px;padding:4px 7px;margin-left:6px;vertical-align:2px}

/* ---------- 列表按下回饋（像 Tina：按下立即變色） ---------- */
.card:active,.annrow:active,.dayrow:active,.dstable tbody tr:active,.drawer button[data-tab]:active{background:var(--brand-50) !important}
:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:8px}
button:focus:not(:focus-visible){outline:none}

/* ---------- 提示訊息：成功／錯誤 ---------- */
#toast div{display:flex;align-items:center;gap:8px;background:var(--n-900) !important;border-radius:14px !important;padding:12px 16px !important;font:500 14px/1.4 var(--font) !important;box-shadow:var(--e3) !important}
#toast div::before{content:"";width:8px;height:8px;border-radius:4px;background:#7dd3a7;flex:none}
#toast div.err{background:var(--danger) !important}
#toast div.err::before{background:#fff}
@media(min-width:1024px){#toast{left:auto;right:28px;bottom:28px;transform:none}}

/* ===================== 桌面版 Shell（≥1024px） ===================== */
@media(min-width:1024px){
 body{--sidecur:var(--side-w)}
 body.ds-col{--sidecur:var(--side-w-c)}
 .drawer{width:var(--sidecur) !important;transition:width var(--dur-base) var(--ease-std) !important;overflow-x:hidden;overflow-y:auto;background:var(--n-25)}
 .topwrap{margin-left:var(--sidecur) !important;transition:margin-left var(--dur-base) var(--ease-std)}
 main,main.wide{margin-left:var(--sidecur) !important;transition:margin-left var(--dur-base) var(--ease-std);max-width:none !important;
  padding:var(--s6) clamp(24px,3vw,40px) var(--s8) !important}
 main>*{max-width:1120px;margin-left:auto;margin-right:auto}
 body.ds-data main>*{max-width:1600px}
 .dhead{position:relative;padding:18px 16px 14px !important}
 .dlogo{transition:opacity var(--dur-fast),width var(--dur-base) var(--ease-std)}
 .dscol{position:absolute;right:10px;top:16px;width:30px;height:30px;border-radius:8px;border:0;background:none;color:var(--n-500);display:flex;align-items:center;justify-content:center;cursor:pointer}
 .dscol:hover{background:var(--n-100);color:var(--ink)}
 .dscol svg{width:18px;height:18px;transition:transform var(--dur-base) var(--ease-std)}
 body.ds-col .dscol{position:static;margin:4px auto 0}
 body.ds-col .dscol svg{transform:rotate(180deg)}
 body.ds-col .dlogo,body.ds-col .dwho{display:none}
 body.ds-col .drawer button[data-tab] span,body.ds-col .dlogout span,body.ds-col .dsgh span,body.ds-col .dsset{display:none}
 body.ds-col .drawer button[data-tab],body.ds-col .dlogout{justify-content:center;padding:11px 0 !important;margin:2px 10px !important;width:calc(100% - 20px) !important}
 body.ds-col .dsgh{justify-content:center;height:1px;padding:0;margin:10px 18px;background:var(--n-100)}
 body.ds-col .dsgh svg{display:none}
 body.ds-col .dsg.closed .dsgi{grid-template-rows:1fr;opacity:1}
 .drawer button[data-tab]{font-size:14.5px !important;padding:9px 14px !important}
 .drawer button[data-tab]:hover{background:var(--n-100)}
 /* 頂部工具列 */
 .top{height:var(--top-h);padding:0 clamp(24px,3vw,40px) !important;gap:16px}
 .top .ptitle{font:650 18px/1 var(--font) !important}
 .top .crumb{font:500 12.5px/1 var(--font);color:var(--n-500);margin-right:2px}
 .top-actions{display:flex;align-items:center;gap:10px}
 .dsacct{display:flex;align-items:center;gap:10px;border:1px solid var(--n-200);background:#fff;border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;font:600 13px/1 var(--font);color:var(--ink)}
 .dsacct:hover{box-shadow:var(--e2)}
 .dsacct .av{width:28px;height:28px;border-radius:14px;background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--font)}
 .dsacct small{display:block;font:500 11px/1 var(--font);color:var(--n-500);margin-top:3px}
}
/* 帳號選單（Popover：從右上角縮放淡入） */
.dspop{position:fixed;top:64px;right:24px;z-index:40;min-width:220px;background:#fff;border-radius:14px;box-shadow:var(--e3);padding:6px;transform-origin:top right;
 animation:dsPopIn var(--dur-fast) var(--ease-out) both}
.dspop.out{animation:dsPopOut 120ms var(--ease-in) both}
.dspop button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px 12px;border-radius:10px;font:500 14px/1.2 var(--font);color:var(--ink);text-align:left;cursor:pointer}
.dspop button:hover{background:var(--n-50)}
.dspop hr{border:0;border-top:1px solid var(--n-100);margin:6px 4px}
@keyframes dsPopIn{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes dsPopOut{to{opacity:0;transform:scale(.97) translateY(-2px)}}

/* ---------- 右側詳情面板（桌面；非全螢幕彈窗） ---------- */
.dspanel{position:fixed;top:0;right:0;bottom:0;width:min(var(--panel-w),92vw);z-index:35;background:#fff;box-shadow:-1px 0 0 var(--n-100),var(--e3);
 transform:translate3d(104%,0,0);transition:transform var(--dur-panel) var(--ease-ios);display:flex;flex-direction:column;will-change:transform}
.dspanel.open{transform:none}
.dspanel .ph{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--n-100)}
.dspanel .ph h2{font:var(--t-h2);margin:0;flex:1}
.dspanel .ph .x{width:34px;height:34px;border-radius:10px;border:0;background:var(--n-50);cursor:pointer;font-size:18px;color:var(--n-600)}
.dspanel .ph .x:hover{background:var(--n-100)}
.dspanel .pb{padding:18px 20px;overflow:auto;flex:1}
.dspanel .pf{padding:14px 20px;border-top:1px solid var(--n-100);display:flex;gap:10px;justify-content:flex-end}
.dspanel .row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--n-100);font:400 14px/1.4 var(--font)}
.dspanel .row .k{color:var(--n-500)}
.dspanel .pbody>*{animation:dsIn var(--dur-base) var(--ease-out) both}

/* ---------- 桌面資料表（員工管理 Demo） ---------- */
.dstable-wrap{background:#fff;border-radius:16px;box-shadow:var(--e1);overflow:hidden}
.dstable{width:100%;border-collapse:collapse;font:400 14px/1.4 var(--font)}
.dstable th{position:sticky;top:0;background:var(--n-25);text-align:left;font:600 12.5px/1 var(--font);color:var(--n-500);padding:12px 14px;border-bottom:1px solid var(--n-100);white-space:nowrap}
.dstable td{padding:10px 14px;border-bottom:1px solid var(--n-100);white-space:nowrap}
.dstable tbody tr{cursor:pointer;transition:background-color var(--dur-fast) var(--ease-std)}
.dstable tbody tr:hover{background:var(--n-25)}
.dstable tbody tr.sel{background:var(--brand-50);box-shadow:inset 3px 0 0 var(--brand-700)}
.dstable .who{display:flex;align-items:center;gap:10px}
.dstable .who .avatar{width:32px;height:32px;border-radius:16px;font-size:12px}
.dstable .who small{display:block;color:var(--n-500);font-size:12px}
.dstable .tag{display:inline-block;border-radius:999px;padding:3px 9px;font:600 11.5px/1.3 var(--font);background:var(--n-50);color:var(--n-600)}
.dstable .tag.ok{background:var(--success-bg);color:var(--success)}
.dstable .tag.adm{background:var(--brand-100);color:var(--brand-800)}
.dstable .tag.mgr{background:var(--info-bg);color:var(--info)}
.dstable .num{font-variant-numeric:tabular-nums;color:var(--n-600)}
.dsdemo-flag{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font);color:#8a5a00;background:#fbf1df;border-radius:8px;padding:6px 10px;margin:0 0 12px}

/* ---------- 桌面排班表：固定姓名欄與日期列、資訊密度 ---------- */
@media(min-width:1024px){
 body.ds-data .gridwrap{max-height:calc(100vh - 230px);overflow:auto;border-radius:16px;box-shadow:var(--e1);background:#fff}
 table.g{font:400 13px/1.35 var(--font)}
 table.g th,table.g td{border-color:var(--n-100) !important}
 table.g thead th{background:var(--n-25) !important;font:600 12.5px/1.3 var(--font);color:var(--n-600);padding:10px 8px}
 table.g thead th.tdy{color:var(--brand-700);box-shadow:inset 0 -2px 0 var(--brand-700) !important}
 table.g td.tdy{box-shadow:none !important;background:#fffafa !important}
 table.g .namecol{min-width:120px;padding:10px 14px !important;font:600 13.5px/1.3 var(--font);background:#fff}
 table.g td.cell{min-width:132px;height:auto;padding:6px !important;text-align:left;vertical-align:top}
 table.g td.cell:hover{background:var(--n-25) !important}
 table.g td.cell .chip{display:flex;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box;border-radius:8px;padding:6px 8px;font:600 12.5px/1.3 var(--font);white-space:normal}
 table.g td.cell .chip small{display:block;font:500 11.5px/1.3 var(--font);color:var(--n-600);margin:1px 0 0 !important;font-variant-numeric:tabular-nums}
 table.g td.cell .chip .cnote{font-weight:400;color:var(--n-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 table.g td.cell .loctag{display:inline-flex;align-items:center;gap:5px;background:none !important;padding:2px 2px 0;margin-top:3px;font:600 11.5px/1.2 var(--font)}
 table.g td.cell .loctag::before{content:"";width:6px;height:6px;border-radius:3px;background:currentColor}
 table.g td.cell .fcb{margin:3px 0 0 0}
 table.g tfoot td{font:500 12px/1.4 var(--font);color:var(--n-600)}
}
@media (prefers-reduced-motion: reduce){.dspanel,.drawer,.topwrap,main{transition:none !important}}
/* 底部導覽要在彈出面板（z 20）與側選單（z 30）之下 */
.dsnav{z-index:15 !important}
@media(min-width:1024px){#dsdemo{left:auto !important;right:24px;bottom:24px !important}}
.nvlist svg,.nvprev svg{fill:none !important;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nvprev .sl.fix svg circle{fill:currentColor;stroke:none}
@media(max-width:1023px){.dscol{display:none !important}}
/* iPhone：選單高度用實際可視高度，最下方留出 Home 列空間，避免版本號被 Safari 工具列遮住 */
.drawer{height:100vh;height:100dvh;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
/* 線條圖示（取代 Emoji） */
.ai svg,.dsi svg,.h3i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.h3i{width:28px;height:28px;border-radius:8px;background:var(--brand-100);color:var(--brand-700);display:inline-flex;align-items:center;justify-content:center;flex:none}
.h3i svg{width:16px;height:16px}
.starmini{display:flex;align-items:center;gap:12px}
.starmini .smt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.ann .t .pin,.annrow .pin{display:inline-block;font:600 11px/1 var(--font);color:var(--brand-700);background:var(--brand-100);border-radius:8px;padding:3px 6px;margin-right:6px;vertical-align:2px}