/* ═══════════════════════════════════════════
   hl-app.css｜app.html 2026 多巴胺 dashboard 模組
   2026-05-12 歐寶 P0.1 拆分策略 🅑 從 app.html 抽離 3 個 inline style block
   
   載入順序鐵則：
   <link hourlight-global.css> （base）
   <link hl-design-tokens.css> （variable）
   <link hl-app.css> ← 本檔必須在此 · block 3 !important override 才有效
   
   app-v2.html 不使用本檔（v2 是黑金舊版殘留 · 5-12 Ruby 拍板不動）
═══════════════════════════════════════════ */

/* ═══════ Block 1 · Design System v2 · 2026 多巴胺 + 全套 dashboard 元件（原 app.html line 44-575） ═══════ */

/* === Design System v2 · 2026 多巴胺（無黑金影子） === */
/* 5 年度色：雲舞白 #F0EEE9 / 變革藍綠 #007B7F / 律動絢藍 #2E5EA6 / 暖心粉 #FFCCCC / 映輝 #3D3835 */
body h1,body h2,body h3,body h4,body p,body li,body span,body a,body label,body td,body th,body dt,body dd,body div,body figcaption,body blockquote,body cite,body em,body small,body [class*="desc"],body [class*="text"],body [class*="content"],body [class*="title"],body [class*="heading"],body [class*="label"],body [class*="info"],body [class*="note"],body [class*="hint"],body [class*="sub"]{text-shadow:none!important}
:root{
  /* 主色 · 變革藍綠取代金 */
  --gold:#007B7F;--gold2:#005C5F;--gold3:#005C5F;
  /* 底色 · 雲舞白系 */
  --bg:#F0EEE9;--card:#ffffff;--border:#D8D4CC;
  /* 文字 · 映輝深灰系 */
  --text:#3D3835;--mid:#5C5651;--light:#8A857F;--faint:#B5B0A8;
  /* 撞色 · 暖心粉 + 律動絢藍 */
  --pink:#FFCCCC;--blue:#2E5EA6;
  /* 狀態 */
  --green:#1F6B3F;--red:#A82323;
  /* 字體 · 純 sans-serif（黑金時代 serif 退場）*/
  --serif:'Noto Sans TC','Inter',sans-serif;--body:'Noto Sans TC','Inter',sans-serif;
  /* 圓角 / 尺寸 */
  --radius:18px;--radius-sm:12px;
  --tab-h:60px;--sidebar-w:240px;--topbar-h:56px;
  /* Neo-Brutalism 硬陰影（無模糊）*/
  --shadow:4px 4px 0 #3D3835;
  --shadow-md:6px 6px 0 #3D3835;
  --shadow-cta:6px 6px 0 #3D3835;
  --shadow-cta-h:9px 9px 0 #3D3835;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:var(--body);color:var(--text);background:var(--bg);overflow-x:hidden}
button{cursor:pointer;font-family:var(--body)}
a{text-decoration:none;color:inherit}
input,select,textarea{font-family:var(--body)}
.hide{display:none!important}

/* Loading */
#loading-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:9999}
.ld-logo{width:64px;height:64px;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-md)}
.ld-logo img{width:100%;height:100%;object-fit:cover}
.ld-brand{font-family:var(--serif);font-size:1.1rem;font-weight:500;letter-spacing:.12em}
.ld-dots{display:flex;gap:6px;margin-top:4px}
.ld-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:ldpulse 1.2s ease-in-out infinite}
.ld-dot:nth-child(2){animation-delay:.2s}.ld-dot:nth-child(3){animation-delay:.4s}
@keyframes ldpulse{0%,80%,100%{transform:scale(.6);opacity:1}40%{transform:scale(1);opacity:1}}

/* Login */
#login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9000}
.login-card{width:100%;max-width:380px;background:var(--card);border-radius:20px;padding:32px 28px;box-shadow:var(--shadow-md)}
.lc-head{text-align:center;margin-bottom:28px}
.lc-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;overflow:hidden}
.lc-icon img{width:100%;height:100%;object-fit:cover}
.lc-title{font-family:var(--serif);font-size:1.3rem;font-weight:500;letter-spacing:.06em;margin-bottom:4px}
.lc-sub{font-size:.9rem;color:var(--light)}
.lc-tabs{display:flex;background:#f4ede3;border-radius:10px;padding:4px;margin-bottom:22px;gap:4px}
.lc-tab{flex:1;padding:9px;border:none;background:transparent;border-radius:7px;font-size:.92rem;color:var(--mid);transition:all .2s}
.lc-tab.on{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(45,36,24,.1)}
.lc-form{display:flex;flex-direction:column;gap:14px}
.lc-form.hide{display:none}
.lf-label{font-size:.95rem;color:var(--mid);margin-bottom:3px;display:block}
.lf-input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.9rem;color:var(--text);background:#fdf8f2;outline:none;transition:border-color .2s}
.lf-input:focus{border-color:var(--gold);background:#fff}
.btn-primary{width:100%;padding:13px;background:#FFCCCC;border:2.5px solid #3D3835;border-radius:10px;font-size:.95rem;color:#3D3835;font-weight:700;transition:all .2s;margin-top:2px;box-shadow:3px 3px 0 #3D3835}
.btn-primary:active{opacity:.85}
.btn-google{width:100%;padding:12px;background:#fff;border:1.5px solid var(--border);border-radius:10px;font-size:.95rem;color:var(--text);display:flex;align-items:center;justify-content:center;gap:10px;transition:border-color .2s}
.btn-google:active{border-color:var(--gold)}
.btn-google svg{width:18px;height:18px;flex-shrink:0}
.lc-divider{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:.95rem}
.lc-divider::before,.lc-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.lc-err{font-size:.95rem;color:var(--red);min-height:18px;text-align:center}
.lc-forget{text-align:right}
.lc-forget button{background:none;border:none;font-size:.95rem;color:var(--light)}
.lc-back{text-align:center;margin-top:16px}
.lc-back a{font-size:.95rem;color:var(--light)}

/* PWA Banner */
#pwa-banner{
  display:none;align-items:center;gap:12px;padding:12px 16px;
  background:linear-gradient(135deg,#FFCCCC,#FFFFFF);
  border-bottom:3px solid #3D3835;position:relative;z-index:400;
}
#pwa-banner.show{display:flex}
.pwa-icon{width:36px;height:36px;border-radius:8px;overflow:hidden;flex-shrink:0}
.pwa-icon img{width:100%;height:100%;object-fit:cover}
.pwa-text{flex:1;min-width:0}
.pwa-text-main{font-size:.9rem;color:#3D3835;font-weight:500}
.pwa-text-sub{font-size:.95rem;color:#5C5651;margin-top:1px}
.btn-pwa-install{flex-shrink:0;padding:7px 14px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:8px;font-size:.95rem;color:#3D3835;font-weight:500;white-space:nowrap}
.btn-pwa-dismiss{flex-shrink:0;width:28px;height:28px;background:transparent;border:none;color:rgba(240,232,208,0.8);font-size:1.1rem;display:flex;align-items:center;justify-content:center}

/* App Shell */
#app{display:none;min-height:100vh;min-height:100dvh;flex-direction:column}
#app.show{display:flex}

/* Topbar (Desktop) */
.topbar{height:var(--topbar-h);background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;position:sticky;top:0;z-index:300}
.tb-logo{display:flex;align-items:center;gap:10px}
.tb-logo-img{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0}
.tb-logo-img img{width:100%;height:100%;object-fit:cover}
.tb-brand{font-family:var(--serif);font-size:.95rem;font-weight:500;letter-spacing:.08em}
.tb-sep{color:var(--faint);margin:0 2px}
.tb-page{font-size:.9rem;color:var(--mid)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-role-badge{padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:500}
.tb-user{display:flex;align-items:center;gap:8px}
.tb-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#3D3835;overflow:hidden;flex-shrink:0}
.tb-avatar img{width:100%;height:100%;object-fit:cover}
.tb-name{font-size:.9rem;color:var(--mid);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout{padding:6px 14px;background:transparent;border:1px solid var(--border);border-radius:20px;font-size:.95rem;color:var(--mid);transition:all .2s;white-space:nowrap}
.btn-logout:hover{border-color:var(--gold);color:var(--text)}

/* Layout */
.app-body{flex:1;display:flex;overflow:hidden}

/* Sidebar (Desktop) */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:#FAF9F4;border-right:3px solid #3D3835;display:flex;flex-direction:column;padding:18px 12px;gap:3px;overflow-y:auto;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));-webkit-overflow-scrolling:touch}
.sb-section{margin-bottom:6px}
.sb-section-label{font-size:.95rem;letter-spacing:.14em;color:var(--faint);padding:0 10px;margin-bottom:4px;margin-top:14px;text-transform:uppercase}
.sb-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:transparent;border-radius:10px;font-size:.92rem;color:var(--mid);text-align:left;transition:all .18s}
.sb-item:hover{background:rgba(0,123,127,.08);color:var(--text)}
.sb-item.on{background:linear-gradient(135deg,rgba(0,123,127,.15),rgba(0,92,95,.08));color:var(--text)}
.sb-icon{width:20px;text-align:center;flex-shrink:0;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.sb-badge{margin-left:auto;background:var(--gold);color:#3D3835;font-size:.95rem;padding:1px 7px;border-radius:10px;font-weight:500}
.sb-admin-badge{margin-left:auto;background:#4a78c0;color:#fff;font-size:.95rem;padding:1px 7px;border-radius:10px}
.sb-divider{height:1px;background:var(--border);margin:10px 10px}

/* Main Content */
.main{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.page{padding:24px 24px 40px;max-width:900px;margin:0 auto}
.page-head{margin-bottom:22px}
.page-head h1{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--text);margin-bottom:4px}
.page-head p{font-size:.92rem;color:var(--mid);line-height:1.6}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0}
.card-title{font-size:.95rem;font-weight:500;color:var(--light);letter-spacing:.08em;text-transform:uppercase}
.card-action{font-size:.95rem;color:var(--gold2);background:none;border:none}
.card-body{padding:16px 18px}
.card-body-pt0{padding-top:12px}

/* Hero Card */
.hero-card{background:linear-gradient(135deg,#FFCCCC 0%,#FFFFFF 50%,#A5C3D9 100%);border:3px solid #3D3835;border-radius:var(--radius);padding:28px 24px 0;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:6px 6px 0 #3D3835}
.hero-card::before{content:'';position:absolute;top:-30px;right:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(0,123,127,.35),transparent 70%);filter:blur(20px)}
.hero-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.hero-avatar{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#3D3835;overflow:hidden;box-shadow:0 0 0 2px rgba(0,123,127,.3)}
.hero-avatar img{width:100%;height:100%;object-fit:cover}
.hero-info{flex:1;min-width:0}
.hero-greeting{font-size:.82rem;color:#5C5651;margin-bottom:3px}
.hero-name{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:#3D3835;letter-spacing:.04em}
.hero-role{margin-top:4px}
.hero-role-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:500}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 0}
.hs-item{text-align:center}
.hs-n{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--gold)}
.hs-l{font-size:.72rem;color:#5C5651;margin-top:4px;letter-spacing:.05em;font-weight:600}

/* Oracle */
.oracle-strip{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s;box-shadow:var(--shadow);margin-bottom:16px}
.oracle-strip:active{background:#fdf8f2;border-color:var(--gold)}
.oracle-gem{width:44px;height:44px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,rgba(0,123,127,.15),rgba(0,92,95,.08));display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:1px solid rgba(0,123,127,.2)}
.oracle-info{flex:1;min-width:0}
.oracle-day{font-size:.7rem;color:var(--light);margin-bottom:2px}
.oracle-name{font-family:var(--serif);font-size:.98rem;color:var(--text)}
.oracle-q{font-size:.95rem;color:var(--mid);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oracle-arr{color:var(--faint);font-size:1.1rem;flex-shrink:0}

/* Home Tool Grid */
.home-tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ht-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;transition:all .18s;box-shadow:var(--shadow)}
.ht-item:active{border-color:var(--gold);background:#fdf8f2}
.ht-icon-wrap{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.ht-icon-draw{background:rgba(0,123,127,.12);border:1px solid rgba(0,123,127,.2)}
.ht-icon-quiz{background:rgba(120,180,200,.12);border:1px solid rgba(120,180,200,.2)}
.ht-icon-calc{background:rgba(46,94,166,.12);border:1px solid rgba(46,94,166,.2)}
.ht-info{min-width:0}
.ht-name{font-size:.94rem;color:var(--text);margin-bottom:1px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-desc{font-size:.95rem;color:var(--light)}

/* History items */
.hlist{display:flex;flex-direction:column;gap:0}
.hitem{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.hitem:last-child{border-bottom:none}
.hicon{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.hicon.draw{background:var(--gold)}.hicon.quiz{background:#78b4c8}.hicon.calculator{background:#2E5EA6}.hicon.tool{background:var(--faint)}
.hinfo{flex:1;min-width:0}
.htool{font-size:.92rem;color:var(--text)}
.hdetail{font-size:.95rem;color:var(--light);margin-top:1px}
.htime{font-size:.7rem;color:var(--faint);white-space:nowrap;flex-shrink:0}

/* Tools Page */
.tools-search-wrap{position:relative;margin-bottom:14px}
.tools-search{width:100%;padding:12px 16px 12px 42px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;outline:none;background:var(--card);transition:border-color .2s}
.tools-search:focus{border-color:var(--gold);background:#fff}
.tools-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint)}
.filter-row{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{flex-shrink:0;padding:7px 14px;border:1.5px solid var(--border);border-radius:20px;background:transparent;font-size:.9rem;color:var(--mid);transition:all .18s;white-space:nowrap}
.filter-chip.on{background:var(--gold);border-color:var(--gold);color:#3D3835}
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tool-card{display:flex;flex-direction:column;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);text-decoration:none;transition:all .18s}
.tool-card:active{border-color:var(--gold);transform:scale(.99)}
.tc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:10px}
.tc-name{font-size:.95rem;color:var(--text);font-weight:500;margin-bottom:3px}
.tc-type{font-size:.7rem;color:var(--light)}
.tc-arr{margin-top:auto;padding-top:10px;font-size:.95rem;color:var(--gold2)}

/* History Page */
.history-list{display:flex;flex-direction:column;gap:8px}
.hist-item{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.hist-dot{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.92rem}
.hist-dot.draw{background:rgba(0,123,127,.12)}.hist-dot.quiz{background:rgba(120,180,200,.12)}.hist-dot.calculator{background:rgba(46,94,166,.12)}.hist-dot.tool{background:rgba(176,176,176,.1)}
.hist-info{flex:1;min-width:0}
.hist-tool{font-size:.95rem;color:var(--text);margin-bottom:2px}
.hist-detail{font-size:.95rem;color:var(--mid);line-height:1.5}
.hist-time{font-size:.7rem;color:var(--light);margin-top:3px}
.load-more{text-align:center;padding:16px 0}
.btn-more{padding:9px 24px;border:1.5px solid var(--border);border-radius:20px;background:transparent;font-size:.9rem;color:var(--mid)}

/* Mine Page */
.profile-card{background:linear-gradient(135deg,#FFCCCC 0%,#FFFFFF 50%,#A5C3D9 100%);border:3px solid #3D3835;border-radius:var(--radius);padding:22px;margin-bottom:16px;box-shadow:6px 6px 0 #3D3835}
.pc-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pc-avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#3D3835;overflow:hidden;box-shadow:0 0 0 3px rgba(0,123,127,.25)}
.pc-avatar img{width:100%;height:100%;object-fit:cover}
.pc-info{flex:1;min-width:0}
.pc-name{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:#3D3835;margin-bottom:4px}
.pc-email{font-size:.95rem;color:#5C5651;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-role{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.95rem;font-weight:500;margin-top:6px}
.pc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ps-item{text-align:center}
.ps-n{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--gold)}
.ps-l{font-size:.67rem;color:#5C5651;margin-top:2px;font-weight:600}
.mine-menu{display:flex;flex-direction:column;gap:2px}
.mine-section-label{font-size:.95rem;letter-spacing:.12em;color:var(--light);text-transform:uppercase;padding:14px 4px 6px}
.mine-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:0;cursor:pointer;transition:background .15s;text-decoration:none;color:inherit;width:100%;text-align:left}
.mine-row:first-of-type{border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.mine-row+.mine-row{border-top:none;border-radius:0;margin-top:-1px}
.mine-row:last-of-type{border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.mine-row.standalone{border-radius:var(--radius-sm)!important;margin-top:2px;border-top:1px solid var(--border)!important}
.mine-row:active{background:#fdf8f2}
.mine-row-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.mri-gold{background:rgba(0,123,127,.12)}.mri-blue{background:rgba(100,150,220,.12)}.mri-green{background:rgba(74,144,96,.12)}.mri-gray{background:rgba(176,176,176,.1)}.mri-red{background:rgba(208,80,80,.1)}
.mine-row-info{flex:1;min-width:0}
.mine-row-label{font-size:.95rem;color:var(--text)}
.mine-row-sub{font-size:.73rem;color:var(--light);margin-top:1px}
.mine-row-arr{color:var(--faint);flex-shrink:0}
.mine-logout{width:100%;padding:13px;background:transparent;border:1.5px solid rgba(208,80,80,.3);border-radius:var(--radius-sm);font-size:.95rem;color:var(--red);margin-top:12px;transition:all .2s}
.mine-logout:active{background:rgba(208,80,80,.06)}

/* Sub-page back */
.subpage-back{display:flex;align-items:center;gap:8px;padding:0 0 18px;border:none;background:transparent;color:var(--mid);font-size:.92rem}
.subpage-back svg{width:18px;height:18px}
.subpage-back:active{color:var(--gold)}

/* Notes */
.note-textarea{width:100%;min-height:120px;padding:14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text);background:var(--bg);outline:none;resize:none;line-height:1.7;transition:border-color .2s}
.note-textarea:focus{border-color:var(--gold);background:#fff}
.note-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.note-cnt{font-size:.95rem;color:var(--light)}
.btn-save-note{padding:9px 20px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:9px;font-size:.92rem;color:#3D3835;font-weight:500}
.note-item{padding:14px 0;border-bottom:1px solid var(--border)}
.note-item:last-child{border-bottom:none}
.note-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.note-item-time{font-size:.7rem;color:var(--light)}
.note-item-del{font-size:.95rem;color:var(--faint);background:none;border:none}
.note-item-text{font-size:.94rem;color:var(--text);line-height:1.7;white-space:pre-wrap}

/* Subscription */
.plan-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.plan-item{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);position:relative;box-shadow:var(--shadow);flex-wrap:wrap}
.plan-item .btn-subscribe{width:100%;flex-basis:100%}
.plan-item.current{border-color:var(--gold)}
.plan-item.popular{border-color:rgba(0,123,127,.4)}
.plan-icon-wrap{width:44px;height:44px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.plan-icon-free{background:rgba(176,176,176,.12)}.plan-icon-member{background:rgba(0,123,127,.12)}.plan-icon-premium{background:rgba(100,150,220,.12)}
.plan-info{flex:1}
.plan-name{font-size:.92rem;font-weight:500;color:var(--text);margin-bottom:2px}
.plan-desc{font-size:.95rem;color:var(--mid)}
.plan-price-wrap{text-align:right;flex-shrink:0}
.plan-price{font-family:var(--serif);font-size:1.1rem;color:var(--text)}
.plan-unit{font-size:.7rem;color:var(--light)}
.plan-badge{position:absolute;top:-1px;right:12px;font-size:.95rem;padding:2px 8px;border-radius:0 0 6px 6px;font-weight:500}
.pb-current{background:#FFCCCC;color:#3D3835;border:1.5px solid #3D3835}.pb-hot{background:#007B7F;color:#fff}
/* Popular badge 不蓋價格 fix（5-05 歐寶 v6 · 多巴胺改版後 line 1614 batch 把 .plan-badge 改成 999px 大 pill 蓋住價格）*/
.plan-item .plan-badge{top:-14px!important;right:14px!important;font-size:.7rem!important;padding:3px 10px!important;letter-spacing:.04em!important;box-shadow:2px 2px 0 #3D3835;z-index:2}
.upgrade-cta{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow)}
.upgrade-cta p{font-size:.92rem;color:var(--mid);margin-bottom:12px;line-height:1.6}
.btn-line-upgrade{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;background:linear-gradient(135deg,#06c755,#04a044);border:none;border-radius:10px;font-size:.9rem;color:#fff;font-weight:500}
.birthday-card{background:linear-gradient(135deg,#F0EEE9,#FAF9F4);border:1px solid rgba(0,123,127,.2);border-radius:var(--radius);padding:20px}
.bc-title{font-family:var(--serif);font-size:1rem;font-weight:700;margin-bottom:6px;color:#3D3835;letter-spacing:.04em}
.bc-sub{font-size:.95rem;color:#5C5651;margin-bottom:14px;line-height:1.6}
.bc-price{font-family:var(--serif);font-size:1.5rem;color:var(--gold);margin-bottom:14px}
.bc-price span{font-size:.95rem;color:rgba(240,232,208,0.8);font-family:var(--body)}
.btn-birthday{padding:11px 24px;background:#3D3835;border:2.5px solid #3D3835;border-radius:11px;font-size:.92rem;color:#fff;font-weight:900;display:inline-block;letter-spacing:-.01em;box-shadow:4px 4px 0 #3D3835;transition:.15s cubic-bezier(.4,0,.2,1);text-decoration:none}
.btn-birthday:hover{background:#007B7F;border-color:#007B7F;box-shadow:6px 6px 0 #3D3835;transform:translate(-2px,-2px)}

/* Settings */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:0}
.setting-row:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.setting-row:last-child{border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.setting-row+.setting-row{border-top:none}
.setting-label{font-size:.92rem;color:var(--text);margin-bottom:2px}
.setting-val{font-size:.95rem;color:var(--light)}
.settings-section-title{font-size:.95rem;letter-spacing:.1em;color:var(--light);text-transform:uppercase;margin:20px 0 10px}
.btn-change{padding:7px 16px;border:1px solid var(--border);border-radius:8px;background:transparent;font-size:.95rem;color:var(--mid)}
.btn-change:active{border-color:var(--gold);color:var(--text)}
.danger-zone{margin-top:24px}
.bp-form{display:flex;flex-direction:column;gap:16px;margin-top:8px}
/* 2026/04/15 出生資料表單改為垂直排版 — 橫式在手機爆版 */
.bp-row{display:flex;flex-direction:column;gap:6px}
.bp-row label{font-size:.88rem;color:var(--mid);font-weight:500;display:block}
.bp-row input,.bp-row select{width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:1rem;font-family:inherit;min-height:50px;-webkit-appearance:none;appearance:none}
.bp-row select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23c9a060' d='M6 8L0 0h12z'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.bp-row input:focus,.bp-row select:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(0,123,127,.1)}
.bp-row select option{background:#FAF9F4;color:#3D3835}
/* 國曆生日 = 三欄等寬 grid，即使小螢幕也顯示完整三欄 */
.bp-date-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.bp-date-row input{width:100%;min-width:0;text-align:center;padding:14px 8px;font-size:1rem}
.bp-saved{display:none;padding:12px 16px;background:rgba(90,158,80,.08);border:1px solid rgba(90,158,80,.2);border-radius:10px;font-size:.88rem;color:#5a9e50;text-align:center;margin-top:8px}
.bp-saved.show{display:block}
.bp-status{font-size:.82rem;color:var(--light);margin-top:4px}
.bp-btn{padding:12px 28px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:10px;font-size:.92rem;color:#3D3835;font-weight:600;cursor:pointer;font-family:inherit;margin-top:4px;min-height:48px}
.bp-btn:active{opacity:.8}
.bp-current{padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:10px;margin-top:8px}
.bp-current-item{display:flex;justify-content:space-between;font-size:.88rem;padding:4px 0;color:var(--mid)}
.bp-current-item span:last-child{color:var(--text);font-weight:500}
/* 超小螢幕：padding 縮小 */
@media(max-width:360px){.bp-row input,.bp-row select{padding:12px 14px}.bp-date-row input{padding:12px 4px}}
.danger-title{font-size:.95rem;letter-spacing:.1em;color:var(--red);text-transform:uppercase;margin-bottom:10px;opacity:.7}
.btn-danger{padding:10px 20px;border:1px solid rgba(208,80,80,.3);border-radius:9px;background:transparent;font-size:.92rem;color:var(--red);width:100%}

/* Mentor */
.student-search-wrap{position:relative;margin-bottom:14px}
.search-input{width:100%;padding:12px 16px 12px 42px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;outline:none;background:var(--card);transition:border-color .2s}
.search-input:focus{border-color:var(--gold)}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint)}
.student-list{display:flex;flex-direction:column;gap:8px}
.student-item{display:flex;align-items:center;gap:14px;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);cursor:pointer}
.student-item:active{background:#fdf8f2}
.student-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#3D3835;flex-shrink:0}
.student-info{flex:1;min-width:0}
.student-name{font-size:.9rem;color:var(--text);margin-bottom:1px}
.student-email{font-size:.73rem;color:var(--light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.student-stats{display:flex;gap:14px;flex-shrink:0}
.sstat{text-align:center}
.sstat-n{font-size:1rem;font-weight:500;color:var(--gold3)}
.sstat-l{font-size:.95rem;color:var(--light)}
.cert-card{display:flex;align-items:center;gap:16px;padding:18px;background:var(--card);border:1px solid rgba(0,123,127,.25);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px}
.cert-icon{font-size:2rem;flex-shrink:0}
.cert-info{flex:1}
.cert-name{font-size:.95rem;color:var(--text);margin-bottom:4px}
.cert-detail{font-size:.95rem;color:var(--mid);line-height:1.6}
.cert-status{padding:6px 14px;border-radius:20px;font-size:.74rem;font-weight:500;flex-shrink:0}
.cert-active{background:rgba(74,144,96,.15);color:var(--green)}
.cert-pending{background:rgba(0,123,127,.15);color:var(--gold3)}

/* Admin */
.admin-tabs{display:flex;flex-wrap:wrap;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;margin-bottom:20px}
.admin-tab{flex:0 0 auto;padding:9px 14px;border-radius:8px;border:none;background:transparent;font-size:.82rem;color:var(--mid);transition:all .2s;white-space:nowrap}
@media(max-width:860px){.admin-tab{padding:8px 11px;font-size:.78rem}}
.admin-tab.on{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(45,36,24,.1)}
.admin-sub{display:none}
.admin-sub.on{display:block}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.admin-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.admin-stat .as-trend{position:absolute;top:8px;right:10px;font-size:.65rem;padding:2px 6px;border-radius:8px}
.as-trend.up{background:#e6f4ea;color:#1e7e34}.as-trend.down{background:#fce8e6;color:#d93025}
.as-n{font-family:var(--serif);font-size:1.7rem;font-weight:500;color:var(--text)}
.as-l{font-size:.7rem;color:var(--light);margin-top:4px}
.as-sub{font-size:.65rem;color:var(--mid);margin-top:2px}
.adm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.adm-grid3{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:16px}
.adm-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px;box-shadow:var(--shadow)}
.adm-card-title{font-size:.82rem;color:var(--gold);letter-spacing:.06em;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.trend-bar-wrap{display:flex;align-items:flex-end;gap:4px;height:80px}
.trend-bar{flex:1;background:linear-gradient(to top,var(--gold),var(--gold2));border-radius:4px 4px 0 0;min-height:4px;position:relative;transition:height .5s}
.trend-bar:hover{opacity:.8}
.trend-bar .tb-tip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-size:.6rem;padding:2px 6px;border-radius:4px;white-space:nowrap}
.trend-bar:hover .tb-tip{display:block}
.trend-labels{display:flex;gap:4px;margin-top:4px}
.trend-labels span{flex:1;text-align:center;font-size:.55rem;color:var(--light)}
.rank-list{list-style:none;padding:0;margin:0}
.rank-item{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--border);font-size:.82rem}
.rank-item:last-child{border-bottom:none}
.rank-num{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;flex-shrink:0}
.rank-num.r1{background:#ffd700;color:#3D3835}.rank-num.r2{background:#c0c0c0;color:#3D3835}.rank-num.r3{background:#005C5F;color:#fff}
.rank-num.rn{background:var(--bg);color:var(--mid)}
.rank-name{flex:1;color:var(--text)}.rank-val{color:var(--gold);font-weight:500;font-size:.78rem}
.new-member-item{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border)}
.new-member-item:last-child{border-bottom:none}
.nm-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#3D3835;flex-shrink:0}
.nm-info{flex:1;min-width:0}.nm-name{font-size:.82rem;color:var(--text)}.nm-email{font-size:.65rem;color:var(--light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-time{font-size:.6rem;color:var(--light);flex-shrink:0}
.qlink-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qlink{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text);font-size:.75rem;transition:all .2s;text-align:center}
.qlink:hover{border-color:var(--gold);transform:translateY(-1px)}
.qlink-icon{font-size:1.3rem}
.announce-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:10px;margin-bottom:8px}
.announce-item .ann-status{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.ann-status.active{background:#34a853}.ann-status.draft{background:var(--light)}
.ann-body{flex:1;min-width:0}.ann-title{font-size:.85rem;color:var(--text);margin-bottom:2px}.ann-date{font-size:.65rem;color:var(--light)}
.ann-actions{display:flex;gap:6px;flex-shrink:0}
.ann-btn{padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--mid);font-size:.7rem;cursor:pointer;transition:.2s}
.ann-btn:hover{border-color:var(--gold);color:var(--gold)}
.health-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--border);font-size:.8rem}
.health-row:last-child{border-bottom:none}
.health-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.health-dot.ok{background:#34a853}.health-dot.warn{background:#fbbc05}.health-dot.err{background:#ea4335}
.health-label{flex:1;color:var(--text)}.health-val{color:var(--mid);font-size:.72rem}
.dur-btn{padding:8px 14px;border:1.5px solid var(--border);border-radius:9px;background:var(--bg);color:var(--mid);font-size:.82rem;cursor:pointer;transition:all .2s;font-family:inherit}
.dur-btn:hover{border-color:var(--gold);color:var(--gold)}
.dur-btn.on{background:var(--gold);color:#3D3835;border-color:var(--gold);font-weight:600}
.member-filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.member-search{flex:1;min-width:180px;padding:9px 14px;border:1.5px solid var(--border);border-radius:9px;font-size:.92rem;outline:none;background:var(--bg)}
.member-search:focus{border-color:var(--gold)}
.role-filter{padding:8px 14px;border:1.5px solid var(--border);border-radius:9px;font-size:.9rem;background:var(--bg);outline:none;color:var(--text)}
.member-table{width:100%;border-collapse:collapse}
.member-table th{font-size:.7rem;letter-spacing:.08em;color:var(--light);text-transform:uppercase;padding:10px 12px;border-bottom:2px solid var(--border);text-align:left;background:var(--bg)}
.member-table td{padding:12px;border-bottom:1px solid var(--border);font-size:.92rem;vertical-align:middle}
.member-table tr:hover td{background:#fdf3e8}
.member-table tr:last-child td{border-bottom:none}
.role-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.95rem;font-weight:500}
.user-cell{display:flex;align-items:center;gap:10px}
.user-cell-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;font-size:.95rem;color:#3D3835}
.user-cell-name{font-size:.95rem;color:var(--text);margin-bottom:1px}
.user-cell-email{font-size:.95rem;color:var(--light)}
.btn-edit-role{padding:5px 12px;border:1px solid var(--border);border-radius:7px;background:transparent;font-size:.95rem;color:var(--mid);transition:all .2s}
.btn-edit-role:hover{border-color:var(--gold);color:var(--text)}
.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.page-info{font-size:.95rem;color:var(--light)}
.page-btns{display:flex;gap:6px}
.page-btn{padding:6px 14px;border:1px solid var(--border);border-radius:7px;background:transparent;font-size:.95rem;color:var(--mid);transition:all .2s}
.page-btn.disabled{opacity:1;cursor:default;pointer-events:none}
.member-cards{display:none;flex-direction:column;gap:10px}
.member-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.mc-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.mc-stat{text-align:center;background:var(--bg);border-radius:8px;padding:8px 6px}
.mc-stat-n{font-size:1.1rem;font-weight:500;color:var(--gold3)}
.mc-stat-l{font-size:.95rem;color:var(--light)}
.mc-actions{display:flex;gap:8px}
.event-list{display:flex;flex-direction:column}
.event-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.event-item:last-child{border-bottom:none}
.event-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:7px}
.event-dot.draw{background:var(--gold)}.event-dot.quiz{background:#78b4c8}.event-dot.calculator{background:#2E5EA6}.event-dot.page{background:var(--faint)}
.event-info{flex:1;min-width:0}
.event-tool{font-size:.95rem;color:var(--text);margin-bottom:2px}
.event-user{font-size:.95rem;color:var(--light)}
.event-time{font-size:.95rem;color:var(--faint);white-space:nowrap}
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix-table{border-collapse:collapse;font-size:.95rem;min-width:600px}
.matrix-table th{padding:8px 10px;border:1px solid var(--border);background:var(--bg);color:var(--mid);font-weight:500;white-space:nowrap;font-size:.7rem}
.matrix-table td{padding:8px 10px;border:1px solid var(--border);text-align:center}
.matrix-table td:first-child{text-align:left;font-size:.95rem;color:var(--text);white-space:nowrap;background:var(--bg)}
.matrix-toggle{width:22px;height:22px;border-radius:6px;border:none;cursor:pointer;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center}
.mt-on{background:rgba(74,144,96,.15);color:var(--green)}.mt-off{background:rgba(208,80,80,.1);color:var(--red)}.mt-locked{background:rgba(0,123,127,.15);color:var(--gold3);cursor:default}
.matrix-save{display:flex;justify-content:flex-end;margin-top:14px}
.btn-matrix-save{padding:10px 24px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:9px;font-size:.95rem;color:#3D3835}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(45,36,24,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-box{background:var(--card);border-radius:18px;padding:28px;width:100%;max-width:440px;box-shadow:0 8px 40px rgba(45,36,24,.2)}
.modal-title{font-family:var(--serif);font-size:1.1rem;font-weight:500;margin-bottom:6px}
.modal-sub{font-size:.9rem;color:var(--mid);margin-bottom:20px;line-height:1.6}
.modal-form{display:flex;flex-direction:column;gap:14px}
.modal-label{font-size:.95rem;color:var(--mid);margin-bottom:3px;display:block}
.modal-input{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:.9rem;outline:none;background:var(--bg);transition:border-color .2s}
.modal-input:focus{border-color:var(--gold);background:#fff}
.modal-select{width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;font-size:.9rem;outline:none;background:var(--bg);cursor:pointer}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.btn-modal-cancel{padding:10px 22px;border:1px solid var(--border);border-radius:9px;background:transparent;font-size:.92rem;color:var(--mid)}
.btn-modal-ok{padding:10px 22px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:9px;font-size:.92rem;color:#3D3835}
.modal-err{font-size:.95rem;color:var(--red);min-height:16px}

/* Empty */
.empty{padding:36px 20px;text-align:center;color:var(--light)}
.empty-icon{font-size:2.2rem;margin-bottom:10px;opacity:1}
.empty p{font-size:.92rem;line-height:1.7;color:var(--mid)}
.empty a{color:var(--gold)}

/* Toast */
#toast{position:fixed;bottom:calc(var(--tab-h) + 16px);left:50%;transform:translateX(-50%) translateY(10px);background:#3D3835;color:#ffffff;padding:12px 24px;border-radius:30px;font-size:.92rem;z-index:9999;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;box-shadow:3px 3px 0 #3D3835}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Tab Bar */
.tab-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--card);border-top:1px solid var(--border);height:var(--tab-h);padding:0 4px;padding-bottom:env(safe-area-inset-bottom);align-items:stretch}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;padding:6px 4px;transition:color .15s;cursor:pointer}
.tab-item.on .tab-icon svg{stroke:var(--gold)}
.tab-item.on .tab-label{color:var(--gold)}
.tab-item:not(.on) .tab-icon svg{stroke:var(--faint)}
.tab-item:not(.on) .tab-label{color:var(--faint)}
.tab-icon{width:22px;height:22px}
.tab-icon svg{width:22px;height:22px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab-label{font-size:.95rem;letter-spacing:.02em}

/* RWD */
@media(max-width:860px){
  .topbar{display:none}.sidebar{display:none}.tab-bar{display:flex}.app-body{flex-direction:column}
  .main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .page{padding:16px 16px calc(var(--tab-h) + 24px + env(safe-area-inset-bottom))}
  .page-head h1{font-size:1.2rem}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .adm-grid2,.adm-grid3{grid-template-columns:1fr}
  .qlink-grid{grid-template-columns:repeat(2,1fr)}
  .member-table{display:none}.member-cards{display:flex}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .home-tools-grid{grid-template-columns:1fr 1fr}
  #toast{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px)}
}
@media(max-width:420px){.tools-grid{grid-template-columns:1fr}.home-tools-grid{grid-template-columns:1fr}}
@media(min-width:861px){#pwa-banner{display:none!important}.tab-bar{display:none!important}}

/* Utils */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.btn-sm-gold{padding:8px 18px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:9px;font-size:.9rem;color:#3D3835;font-weight:500}
.qi-desc{font-size:.73rem;color:var(--light)}




/* ── Mobile App Touch Feel ── */
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
button,a,select,input[type=submit],input[type=button]{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
button:active,input[type=submit]:active{transform:scale(.97);transition:transform .08s}
select,input[type=text],input[type=number],input[type=date],input[type=email],input[type=time],input[type=tel],input[type=password],textarea{font-size:16px!important}
@media(max-width:600px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  button,input[type=submit],input[type=button]{min-height:48px}
}


/* ═══════ Block 2 · 遊戲化系統 CSS（原 app.html line 1115-1654） ═══════ */

/* ═══════════════════════════════════════════
   遊戲化系統 CSS ｜ 第一～三層
═══════════════════════════════════════════ */

/* ── 城堡等級徽章 ── */
.level-badge{
  position:absolute;top:14px;right:14px;
  display:flex;flex-direction:column;align-items:center;
  background:rgba(0,0,0,.25);border:1px solid rgba(0,123,127,.3);
  border-radius:10px;padding:6px 10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  cursor:pointer;transition:all .2s;
}
.level-badge:hover{background:rgba(0,0,0,.4)}
.lb-lv{font-size:.65rem;color:rgba(240,232,208,0.7);letter-spacing:.1em;text-transform:uppercase}
.lb-num{font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--gold);line-height:1}
.lb-name{font-size:.58rem;color:rgba(240,232,208,.6);margin-top:2px;white-space:nowrap}
.lb-bar{width:44px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:5px;overflow:hidden}
.lb-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:2px;transition:width .6s ease}

/* ── 連續天數條 ── */
.streak-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 24px;
  background:rgba(0,0,0,.15);
  border-top:1px solid rgba(0,123,127,.08);
  margin:16px -24px 0;border-radius:0 0 var(--radius) var(--radius);
}
.streak-dots{display:flex;gap:4px}
.streak-dot{width:8px;height:8px;border-radius:50%;background:rgba(61,56,53,.15);transition:all .3s}
.streak-dot.active{background:#007B7F;box-shadow:0 0 6px rgba(0,123,127,.5)}
.streak-dot.today{background:#FFCCCC;animation:pulseDot 1.5s ease-in-out infinite;border:1.5px solid #3D3835}
@keyframes pulseDot{0%,100%{box-shadow:0 0 4px rgba(0,123,127,.4)}50%{box-shadow:0 0 10px rgba(0,123,127,.8)}}
.streak-info{flex:1}
.streak-text{font-size:.72rem;color:#5C5651;font-weight:600}
.streak-n{font-family:var(--serif);font-size:.85rem;color:#007B7F;font-weight:700}

/* ── 節氣卡 ── */
.solar-card{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1D3A5F 0%,#007B7F 55%,#3D3835 100%);
  border:1px solid rgba(0,123,127,.25);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;
}
.solar-card::after{
  content:attr(data-char);position:absolute;right:-4px;top:-8px;
  font-size:5rem;color:rgba(0,123,127,0.85);font-family:var(--serif);
  pointer-events:none;line-height:1;
}
.sc-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sc-badge{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:rgba(0,123,127,.12);border:1px solid rgba(0,123,127,.2);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.sc-info .sc-label{font-size:.95rem;color:rgba(0,123,127,.6);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.sc-info .sc-name{font-family:var(--serif);font-size:1.05rem;font-weight:500;color:#ffffff;letter-spacing:.06em}
.sc-info .sc-date{font-size:.95rem;color:rgba(240,232,208,0.8);margin-top:1px}
.sc-quote{font-size:.9rem;color:rgba(240,232,208,0.8);line-height:1.7;margin-bottom:12px;font-style:italic}
.sc-insight{font-size:.95rem;color:rgba(240,232,208,.7);line-height:1.7;margin-bottom:14px}
.sc-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;background:rgba(0,123,127,.15);
  border:1px solid rgba(0,123,127,.25);border-radius:20px;
  font-size:.95rem;color:var(--gold);cursor:pointer;transition:all .2s;
}
.sc-cta:hover{background:rgba(0,123,127,.22)}

/* ── 今日任務卡 ── */
.tasks-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px}
.tasks-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px}
.tasks-title{font-size:.95rem;font-weight:500;color:var(--light);letter-spacing:.08em;text-transform:uppercase}
.tasks-progress{font-size:.95rem;color:var(--mid)}
.tasks-progress span{color:var(--gold);font-weight:500}
.task-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;border-top:1px solid var(--border);
  cursor:pointer;transition:background .15s;
}
.task-item:active{background:#fdf8f2}
.task-item.done{opacity:1}
.task-check{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;transition:all .25s;
}
.task-item.done .task-check{background:var(--gold);border-color:var(--gold);color:#3D3835;font-size:.9rem}
.task-info{flex:1;min-width:0}
.task-name{font-size:.92rem;color:var(--text)}
.task-item.done .task-name{text-decoration:line-through;color:var(--light)}
.task-arr{font-size:.9rem;color:var(--faint)}
.task-item.done .task-arr{display:none}

/* ── 情緒選擇器 ── */
.mood-modal-box{
  background:var(--card);border-radius:20px;
  padding:24px;width:100%;max-width:360px;
  box-shadow:0 8px 40px rgba(45,36,24,.2);
}
.mood-title{font-family:var(--serif);font-size:1.1rem;font-weight:500;margin-bottom:4px}
.mood-sub{font-size:.9rem;color:var(--mid);margin-bottom:20px;line-height:1.6}
.mood-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.mood-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 4px;border:1.5px solid var(--border);
  border-radius:12px;background:transparent;cursor:pointer;transition:all .18s;
}
.mood-btn:active,.mood-btn.selected{border-color:var(--gold);background:rgba(0,123,127,.08)}
.mood-emoji{font-size:1.5rem}
.mood-label{font-size:.95rem;color:var(--mid)}
.btn-skip-mood{width:100%;padding:10px;border:none;background:transparent;font-size:.9rem;color:var(--light);cursor:pointer}

/* ── 覺察日曆 ── */
.awareness-calendar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-title{font-size:.95rem;font-weight:500;color:var(--light);letter-spacing:.08em;text-transform:uppercase}
.cal-month{font-size:.9rem;color:var(--mid)}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:6px}
.cal-wd{font-size:.95rem;color:var(--light);text-align:center;padding:2px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-day{
  aspect-ratio:1;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.95rem;color:var(--light);
  position:relative;cursor:default;transition:all .15s;
}
.cal-day.has-data{cursor:pointer}
.cal-day.has-data:active{transform:scale(.9)}
.cal-day.empty{background:transparent;color:transparent}
.cal-day.level-0{background:#f0ece6;color:var(--faint)}
.cal-day.level-1{background:rgba(0,123,127,.15);color:var(--mid)}
.cal-day.level-2{background:rgba(0,123,127,.3);color:var(--gold3)}
.cal-day.level-3{background:rgba(0,123,127,.55);color:var(--gold2)}
.cal-day.level-4{background:var(--gold);color:#3D3835;font-weight:500}
.cal-day.today-mark{box-shadow:0 0 0 2px var(--gold)}
.cal-mood-dot{position:absolute;bottom:2px;right:2px;width:4px;height:4px;border-radius:50%}
.cal-legend{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.cal-legend-item{display:flex;align-items:center;gap:4px;font-size:.95rem;color:var(--light)}
.cal-legend-dot{width:10px;height:10px;border-radius:3px}

/* ── 勳章系統 ── */
.badges-section{margin-bottom:0}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px}
@media(max-width:360px){.badge-grid{grid-template-columns:repeat(3,1fr)}}
.badge-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 4px;border-radius:12px;
  background:var(--bg);border:1px solid transparent;
  cursor:default;transition:all .2s;
}
.badge-item.unlocked{border-color:rgba(0,123,127,.2);background:var(--card);cursor:pointer}
.badge-item.unlocked:active{background:#fdf8f2}
.badge-icon{font-size:1.5rem;opacity:1;filter:grayscale(1);transition:all .3s}
.badge-item.unlocked .badge-icon{opacity:1;filter:none}
.badge-name{font-size:.95rem;color:var(--light);text-align:center;line-height:1.3}
.badge-item.unlocked .badge-name{color:var(--mid)}

/* ── 稱號顯示 ── */
.title-strip{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:linear-gradient(135deg,rgba(0,123,127,.08),rgba(0,92,95,.04));
  border:1px solid rgba(0,123,127,.2);border-radius:var(--radius-sm);
  margin-bottom:10px;
}
.title-icon{font-size:1.4rem}
.title-info{flex:1}
.title-label{font-size:.95rem;color:var(--light);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.title-name{font-family:var(--serif);font-size:.95rem;color:var(--text)}

/* ── 勳章解鎖動畫 Modal ── */

/* ── 🌌 高維提醒｜宇宙訊息 ── */
.cosmic-block{position:relative;background:#FAF9F4;border:3px solid #3D3835;border-radius:18px;padding:30px 24px 20px;margin-bottom:16px;overflow:hidden;box-shadow:6px 6px 0 #3D3835}
.cosmic-block::before{content:'';position:absolute;top:-40%;right:-20%;width:60%;height:120%;background:radial-gradient(ellipse,rgba(0,123,127,.09),transparent 60%);pointer-events:none}
.cosmic-block::after{content:'';position:absolute;bottom:-40%;left:-20%;width:60%;height:100%;background:radial-gradient(ellipse,rgba(255,204,204,.06),transparent 70%);pointer-events:none}
/* 5-08 hotfix｜Ruby 拍：高維訊息改暖心粉底色 + 星光熠熠（dawn/dusk 從黑底紫改淺粉漸層 · 4 段時辰統一暖心粉家族） */
.cosmic-block[data-slot="dawn"]{background:linear-gradient(145deg,#FFE2E2 0%,#FFCCCC 45%,#FFD8D8 100%)}
.cosmic-block[data-slot="noon"]{background:linear-gradient(145deg,#FFE8E8 0%,#FFCCCC 50%,#FFE0E0 100%);border-color:#3D3835}
.cosmic-block[data-slot="dusk"]{background:linear-gradient(145deg,#FFD8D8 0%,#FFCCCC 45%,#FFE5E2 100%)}
.cosmic-block[data-slot="night"]{background:linear-gradient(145deg,#FFE0E0 0%,#FFCCCC 50%,#FFD5D5 100%);border-color:#3D3835}
.cosmic-pulse{position:absolute;top:22px;right:22px;width:10px;height:10px;border-radius:50%;background:#007B7F;box-shadow:0 0 0 3px #FFCCCC;animation:cosmicPulse 2.8s ease-in-out infinite;z-index:2}
@keyframes cosmicPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
/* 繁星點點 × 流星 */
.cosmic-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* 5-08 星光熠熠：粉底配三層 glow（白核 → 暖粉 halo → 律動藍微暈），暖粉底上看得清楚 */
.cosmic-stars .star{position:absolute;width:2.5px;height:2.5px;background:#fff;border-radius:50%;box-shadow:0 0 4px #fff,0 0 10px rgba(255,255,255,.95),0 0 18px rgba(255,180,200,.85),0 0 28px rgba(46,94,166,.35);animation:starTwinkle 3s ease-in-out infinite}
.cosmic-stars .s1{top:12%;left:18%;animation-delay:0s}
.cosmic-stars .s2{top:20%;left:72%;animation-delay:.4s;width:1px;height:1px}
.cosmic-stars .s3{top:32%;left:42%;animation-delay:.8s}
.cosmic-stars .s4{top:48%;left:8%;animation-delay:1.2s;width:3px;height:3px}
.cosmic-stars .s5{top:60%;left:88%;animation-delay:1.6s;width:1px;height:1px}
.cosmic-stars .s6{top:74%;left:28%;animation-delay:2s}
.cosmic-stars .s7{top:15%;left:55%;animation-delay:.2s;width:1.5px;height:1.5px}
.cosmic-stars .s8{top:38%;left:82%;animation-delay:1.4s;width:2px;height:2px}
.cosmic-stars .s9{top:62%;left:52%;animation-delay:.6s;width:1px;height:1px}
.cosmic-stars .s10{top:28%;left:12%;animation-delay:2.4s;width:2px;height:2px}
.cosmic-stars .s11{top:82%;left:65%;animation-delay:1.8s}
.cosmic-stars .s12{top:8%;left:38%;animation-delay:1s;width:1px;height:1px}
@keyframes starTwinkle{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}}
/* 流星：頭尖亮（前方），尾巴漸散（後方）；斜飛 45° 均速 linear */
/* 5-08 流星：粉底配白光主導 + 暖粉拖尾 + 律動藍微點綴 */
.cosmic-stars .meteor{position:absolute;width:80px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,180,200,.25) 40%,rgba(255,255,255,.85) 80%,#fff 100%);border-radius:2px;box-shadow:0 0 6px rgba(255,255,255,.85),0 0 12px rgba(255,180,200,.7);opacity:0;pointer-events:none;filter:blur(.3px)}
.cosmic-stars .meteor::after{content:'';position:absolute;right:-1px;top:-1px;width:3px;height:3px;background:#fff;border-radius:50%;box-shadow:0 0 8px rgba(255,255,255,.95),0 0 16px rgba(255,180,200,.85),0 0 24px rgba(46,94,166,.4)}
.cosmic-stars .m1{top:8%;left:-15%;animation:meteorFly1 11s linear infinite;animation-delay:1.5s;will-change:transform,opacity}
.cosmic-stars .m2{top:15%;right:-15%;left:auto;animation:meteorFly2 14s linear infinite;animation-delay:6s;will-change:transform,opacity}
/* m1：左上 → 右下 45° 均速飛，淡入淡出平滑，不 scaleX 免得忽胖忽瘦 */
@keyframes meteorFly1{
  0%    {opacity:0;  transform:rotate(45deg) translate(0,0)}
  3%    {opacity:0;  transform:rotate(45deg) translate(40px,40px)}
  8%    {opacity:.85;transform:rotate(45deg) translate(140px,140px)}
  18%   {opacity:.85;transform:rotate(45deg) translate(380px,380px)}
  23%   {opacity:0;  transform:rotate(45deg) translate(500px,500px)}
  100%  {opacity:0;  transform:rotate(45deg) translate(500px,500px)}
}
/* m2：右上 → 左下（流星頭朝左下，translate 用負 x 才是真的往左飛） */
@keyframes meteorFly2{
  0%    {opacity:0;  transform:rotate(135deg) translate(0,0)}
  3%    {opacity:0;  transform:rotate(135deg) translate(-40px,40px)}
  8%    {opacity:.85;transform:rotate(135deg) translate(-140px,140px)}
  18%   {opacity:.85;transform:rotate(135deg) translate(-380px,380px)}
  23%   {opacity:0;  transform:rotate(135deg) translate(-500px,500px)}
  100%  {opacity:0;  transform:rotate(135deg) translate(-500px,500px)}
}
.cosmic-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.cosmic-eyebrow{font-family:'Inter','Noto Sans TC',sans-serif;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,123,127,.85);font-weight:500}
.cosmic-source{font-size:.74rem;letter-spacing:.14em;color:rgba(0,123,127,.55);font-family:'Inter','Noto Sans TC',sans-serif;text-transform:uppercase}
.cosmic-body{position:relative;z-index:1}
.cosmic-text{font-family:'Noto Sans TC','Inter',sans-serif;font-size:1.02rem;line-height:1.95;letter-spacing:.02em;color:#3D3835;font-weight:500;white-space:pre-line;animation:cosmicFadeIn .9s ease-out}
@keyframes cosmicFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cosmic-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid rgba(0,123,127,.08)}
.cosmic-again,.cosmic-copy,.cosmic-img-btn{background:none;border:1px solid rgba(0,123,127,.25);color:rgba(0,123,127,.7);padding:7px 14px;border-radius:18px;font-size:.76rem;letter-spacing:.06em;cursor:pointer;transition:all .22s;font-family:inherit}
.cosmic-again:hover,.cosmic-copy:hover,.cosmic-img-btn:hover{background:#FFCCCC;color:#3D3835;border-color:#3D3835;transform:translate(-2px,-2px);box-shadow:4px 4px 0 #3D3835}
.cosmic-copy.copied,.cosmic-img-btn.copied{background:rgba(109,213,160,.12);border-color:rgba(109,213,160,.4);color:#6dd5a0}
.cosmic-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cosmic-actions-label{font-size:.72rem;color:rgba(0,123,127,.55);margin-right:4px}
.cosmic-img-btn{padding:6px 10px;font-size:.72rem}
@media(max-width:540px){.cosmic-foot{flex-direction:column;align-items:stretch;gap:10px}.cosmic-actions{justify-content:flex-start}}
@media(max-width:540px){.cosmic-block{padding:24px 20px 18px}.cosmic-text{font-size:.96rem;line-height:1.85}}

/* ── 身體覺察日誌 ── */
.ba-dim{text-align:center;background:rgba(0,0,0,.02);border:1px solid rgba(0,123,127,.08);border-radius:12px;padding:10px 6px 8px}
.ba-dim-icon{font-size:1.1rem;margin-bottom:2px}
.ba-dim-label{font-size:.95rem;color:var(--light);margin-bottom:6px}
.ba-dim-btns{display:flex;gap:3px;justify-content:center}
.ba-dot{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(0,123,127,.12);background:transparent;cursor:pointer;font-size:.95rem;display:flex;align-items:center;justify-content:center;color:var(--light);transition:all .2s;padding:0}
.ba-dot:hover{border-color:rgba(0,123,127,.3)}
.ba-dot.on{border-color:var(--gold);background:rgba(0,123,127,.1);color:var(--gold)}
.ba-dot.on-1{border-color:#e85050;background:rgba(232,80,80,.08);color:#e85050}
.ba-dot.on-2{border-color:#f4a340;background:rgba(244,163,64,.08);color:#f4a340}
.ba-dot.on-3{border-color:#007B7F;background:rgba(0,123,127,.08);color:#007B7F}
.ba-dot.on-4{border-color:#5dba8a;background:rgba(93,186,138,.08);color:#5dba8a}
.ba-dot.on-5{border-color:#5dba8a;background:rgba(93,186,138,.12);color:#5dba8a}
.ba-part{padding:5px 10px;border:1px solid rgba(0,123,127,.1);border-radius:8px;font-size:.95rem;color:var(--light);cursor:pointer;transition:all .2s;background:transparent}
.ba-part:hover{border-color:rgba(0,123,127,.25)}
.ba-part.on{border-color:rgba(0,123,127,.35);background:rgba(0,123,127,.06);color:var(--gold)}
.badge-unlock-box{
  background:linear-gradient(135deg,#FFCCCC 0%,#FFFFFF 50%,#A5C3D9 100%);
  border:3px solid #3D3835;border-radius:20px;
  padding:32px 24px;width:100%;max-width:320px;
  text-align:center;box-shadow:6px 6px 0 #3D3835;
}
.bu-sparkle{font-size:.9rem;color:var(--gold);letter-spacing:.2em;margin-bottom:12px}
.bu-icon{font-size:3rem;margin-bottom:12px;animation:buBounce .6s ease}
@keyframes buBounce{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.bu-title{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:#3D3835;margin-bottom:6px}
.bu-name{font-size:.9rem;color:#007B7F;margin-bottom:8px;font-weight:700}
.bu-desc{font-size:.95rem;color:#5C5651;line-height:1.6;margin-bottom:20px}
.btn-bu-ok{padding:11px 32px;background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;border-radius:10px;font-size:.9rem;color:#3D3835;font-weight:500;cursor:pointer}

/* ── 城堡進度（我的頁面）── */
.castle-progress{
  background:linear-gradient(135deg,#FFCCCC 0%,#FFFFFF 50%,#A5C3D9 100%);
  border:3px solid #3D3835;border-radius:var(--radius);
  padding:18px;margin-bottom:12px;position:relative;overflow:hidden;
}
.castle-progress::before{content:'🏰';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:3.5rem;opacity:1}
.cp-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.cp-level{font-family:var(--serif);font-size:.95rem;color:#007B7F;opacity:.85;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;font-weight:700}
.cp-name{font-family:var(--serif);font-size:1rem;font-weight:700;color:#3D3835}
.cp-pct{font-size:.95rem;color:#5C5651;font-weight:600}
.cp-bar{height:6px;background:rgba(61,56,53,.12);border-radius:3px;overflow:hidden;margin-bottom:10px}
.cp-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:3px;transition:width .8s ease}
.cp-rooms{display:flex;gap:6px;flex-wrap:wrap}
.cp-room{
  display:flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:20px;font-size:.7rem;
  border:1px solid rgba(255,255,255,.08);
  color:rgba(240,232,208,0.85);background:transparent;
  transition:all .3s;
}
.cp-room.unlocked{
  border-color:rgba(0,123,127,.3);
  color:rgba(240,232,208,.75);
  background:rgba(0,123,127,.1);
}

/* ══════════════════════════════════════════════════════════
   2026-04-23 2026 設計系統覆蓋層（逸君拍板 · 完整規範 references/2026-design-system.md）
   配色：雲舞白 #F0EEE9 · 變革藍綠 #007B7F · 律動絢藍 #2E5EA6 · 暖心粉 #FFCCCC · 映輝 #3D3835
   !important 全覆蓋以不動原 CSS（避免骨牌）
   ══════════════════════════════════════════════════════════ */

/* 2026-04-23 補修：app.html 用大量 CSS 變數（--card/--text/--mid/--border/--shadow）+ .hero-card 深棕金 gradient 需強制覆蓋 */
:root{
  --card:#ffffff!important;
  --bg:#F0EEE9!important;
  --text:#3D3835!important;
  --ink:#3D3835!important;
  --mid:#6A6560!important;
  --light:#9A948C!important;
  --border:rgba(61,56,53,.15)!important;
  --shadow:3px 3px 0 #3D3835!important;
  --serif:'Noto Sans TC','Inter',sans-serif!important;
  --radius:16px!important;
}
/* 2026-04-24 逸君：app 第一頁不要粉紅 · 沒氣勢 → 改映輝深底 + 律動絢藍高端 Dashboard 感 */
.hero-card{background:linear-gradient(135deg,#3D3835 0%,#1D3A5F 50%,#2E5EA6 100%)!important;border:3px solid #3D3835!important;box-shadow:6px 6px 0 #3D3835!important;color:#F0EEE9!important;border-radius:22px!important}
.hero-card *{color:#F0EEE9!important}
.hero-card a,.hero-card .hero-link{color:#A5C3D9!important;font-weight:700!important}
.hero-card a:hover{color:#FFCCCC!important}
.hero-card::before{background:radial-gradient(circle,rgba(255,204,204,.18),transparent 70%)!important}
.oracle-gem{background:linear-gradient(135deg,#FFCCCC,#FFE5E5)!important;border:2px solid #3D3835!important;color:#3D3835!important}

/* icon 各類型色塊覆蓋 */
.ht-icon-draw{background:rgba(255,204,204,.4)!important;border:2px solid #3D3835!important;color:#3D3835!important}
.ht-icon-quiz{background:rgba(46,94,166,.15)!important;border:2px solid #3D3835!important;color:#2E5EA6!important}
.ht-icon-calc{background:rgba(0,123,127,.15)!important;border:2px solid #3D3835!important;color:#007B7F!important}
.hist-dot.draw{background:rgba(255,204,204,.4)!important}
.hist-dot.quiz{background:rgba(46,94,166,.15)!important}
.hist-dot.calculator{background:rgba(0,123,127,.15)!important}
.hist-dot.tool{background:rgba(61,56,53,.12)!important}
.plan-icon-free{background:rgba(61,56,53,.1)!important;color:#3D3835!important;border:2px solid #3D3835!important}
.plan-icon-member{background:#FFCCCC!important;color:#3D3835!important;border:2px solid #3D3835!important}
.plan-icon-premium{background:#2E5EA6!important;color:#fff!important;border:2px solid #3D3835!important}
.btn-line-upgrade{background:linear-gradient(135deg,#007B7F,#2E5EA6)!important;border:2.5px solid #3D3835!important;color:#fff!important;border-radius:999px!important;box-shadow:3px 3px 0 #3D3835!important;font-weight:900!important}
.btn-line-upgrade:hover{background:#FFCCCC!important;color:#3D3835!important;transform:translate(-2px,-2px)!important;box-shadow:5px 5px 0 #3D3835!important}
.mri-gold{background:rgba(0,123,127,.12)!important;color:#007B7F!important}
.mri-blue{background:rgba(46,94,166,.12)!important;color:#2E5EA6!important}
.mri-green{background:rgba(0,123,127,.12)!important;color:#007B7F!important}
.mri-gray{background:rgba(61,56,53,.1)!important;color:#6A6560!important}
.mri-red{background:rgba(255,107,107,.12)!important;color:#FF6B6B!important}
.bp-saved{background:rgba(0,123,127,.08)!important;border:2px solid #007B7F!important;color:#007B7F!important;border-radius:12px!important;font-weight:700!important}
.modal-overlay{background:rgba(61,56,53,.5)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important}

/* 2026-05-05 逸君：節氣卡改淺底 + 映輝深字（看得見鐵律 · 不再深底） */
.solar-card{background:#FAF9F4!important;border:3px solid #3D3835!important;box-shadow:6px 6px 0 #3D3835!important;color:#3D3835!important;border-radius:22px!important;padding:24px 22px!important}
.solar-card::after{color:rgba(0,123,127,.06)!important}
.sc-badge{background:#FFCCCC!important;border:2.5px solid #3D3835!important;color:#3D3835!important;font-weight:900!important;font-size:1.6rem!important;width:54px!important;height:54px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:3px 3px 0 #3D3835!important;letter-spacing:0!important}
.sc-info .sc-label{color:#007B7F!important;font-weight:800!important;letter-spacing:.18em!important;font-size:.78rem!important;text-transform:uppercase!important}
.sc-info .sc-name{color:#3D3835!important;font-weight:900!important;letter-spacing:-.01em!important;font-size:1.2rem!important;font-family:'Noto Sans TC','Inter',sans-serif!important;margin:4px 0 2px!important}
.sc-info .sc-date{color:#5C5651!important;font-weight:600!important;font-size:.85rem!important}
.sc-quote{color:#3D3835!important;font-weight:600!important;font-style:normal!important;font-size:.95rem!important;line-height:1.7!important;margin-top:14px!important;padding:12px 14px!important;background:#fff!important;border:2px solid #3D3835!important;border-radius:12px!important}
.sc-insight{color:#3D3835!important;font-weight:700!important;font-size:.95rem!important;line-height:1.7!important;margin-top:10px!important}
.sc-cta{background:#F0EEE9!important;border:2.5px solid #F0EEE9!important;color:#3D3835!important;border-radius:999px!important;box-shadow:2px 2px 0 rgba(0,0,0,.2)!important;font-weight:900!important}
.sc-cta:hover{background:#FFCCCC!important;color:#3D3835!important;transform:translate(-1px,-1px)!important;box-shadow:3px 3px 0 rgba(0,0,0,.3)!important}

/* Streak 卡片連動天數 */
.streak-n{color:#007B7F!important;font-weight:900!important}

/* 今日任務卡 */
.tasks-card{background:#ffffff!important;border:2.5px solid #3D3835!important;box-shadow:4px 4px 0 #3D3835!important;border-radius:20px!important}
.tasks-title{color:#3D3835!important;font-weight:900!important}
.tasks-progress{color:#6A6560!important}
.tasks-progress span{color:#007B7F!important;font-weight:900!important}
.task-item{border-top:1px solid rgba(61,56,53,.1)!important;color:#3D3835!important}
.task-item:active{background:#FFE5E5!important}

/* 必要覆蓋：星空 / body / html / input / placeholder */
.hl-cosmos,.hl-stars-layer,.hl-stars-layer-1,.hl-stars-layer-2,.hl-stars-layer-3{display:none!important}
html{background:#F0EEE9!important}
body{background:#F0EEE9!important;background-color:#F0EEE9!important;background-image:none!important;color:#3D3835!important;font-family:'Noto Sans TC','Inter',system-ui,sans-serif!important}
input,select,textarea{color:#3D3835!important;background-color:#ffffff!important}
::placeholder{color:#B5B0A8!important;opacity:1!important}
input::placeholder,select::placeholder,textarea::placeholder{color:#B5B0A8!important;opacity:1!important}
select option{background:#ffffff!important;color:#3D3835!important}
select optgroup{color:#007B7F!important;font-weight:700!important;background:#F0EEE9!important}

/* 所有 section / card 容器 淺底 */
section,main,article,.page-wrap,.container{background-color:transparent!important}
h1,h2,h3,h4{color:#3D3835!important;font-family:'Noto Sans TC','Inter',sans-serif!important}

/* app.html 主要區塊色系 */
.app-greeting,.app-plan-card,.app-tools-card,.app-traces,.app-invite-card,.app-recommend,.cp-greeting,.cp-plan-card,.cp-traces{background:#ffffff!important;border:2.5px solid #3D3835!important;border-radius:20px!important;box-shadow:4px 4px 0 #3D3835!important;color:#3D3835!important}
.app-greeting *,.app-plan-card *,.app-tools-card *,.app-traces *,.app-invite-card *{color:#3D3835!important}

/* ══ app.html 實際用的 class（2026-04-23 逸君回報：很混看不出來改哪 · 精準覆蓋）══ */

/* .page 頁面容器 + .page-head */
.page{background:#F0EEE9!important;padding:16px 16px 80px!important;min-height:100vh!important}
.page-head{color:#3D3835!important;font-weight:900!important;font-family:'Noto Sans TC','Inter',sans-serif!important;font-size:1.4rem!important;letter-spacing:-.01em!important;margin:16px 0 14px!important;padding:0 6px!important}

/* .card 主卡片（app.html 14 次使用）*/
.card{background:#ffffff!important;border:2.5px solid #3D3835!important;border-radius:20px!important;box-shadow:4px 4px 0 #3D3835!important;color:#3D3835!important;padding:0!important;margin:14px 0!important;transition:all .2s!important;overflow:hidden!important}
.card:hover{transform:translate(-2px,-2px)!important;box-shadow:7px 7px 0 #3D3835!important}
.card-head{padding:16px 18px 10px!important;border-bottom:1.5px solid rgba(61,56,53,.1)!important;background:#F5F3EC!important}
.card-title{font-family:'Noto Sans TC','Inter',sans-serif!important;font-size:1.1rem!important;font-weight:900!important;color:#3D3835!important;letter-spacing:-.01em!important}
.card-body{padding:14px 18px 18px!important;color:#3D3835!important;background:#ffffff!important}
.card-body-pt0{padding-top:0!important}
.card-action{color:#007B7F!important;font-weight:700!important;text-decoration:none!important;padding:6px 12px!important;border-radius:999px!important;transition:.2s!important}
.card-action:hover{background:rgba(0,123,127,.08)!important;color:#007B7F!important}

/* .mine-row 記錄列 */
.mine-row{background:#ffffff!important;border:2px solid rgba(61,56,53,.15)!important;border-radius:12px!important;padding:12px 14px!important;margin:8px 0!important;display:flex!important;align-items:center!important;gap:12px!important;color:#3D3835!important;text-decoration:none!important;transition:.2s!important}
.mine-row:hover{border-color:#3D3835!important;transform:translate(-2px,-2px)!important;box-shadow:3px 3px 0 #3D3835!important;background:#FFE5E5!important}
.mine-row-icon{font-size:1.5rem!important;flex-shrink:0!important}
.mine-row-info{flex:1!important;min-width:0!important;color:#3D3835!important}
.mine-row-label{color:#3D3835!important;font-weight:700!important;font-size:.95rem!important;margin:0!important}
.mine-row-sub{color:#6A6560!important;font-size:.8rem!important;margin-top:2px!important;font-weight:500!important}
.mine-row-arr{color:#007B7F!important;font-weight:900!important;font-size:1.1rem!important}
.mine-section-label{color:#6A6560!important;font-size:.78rem!important;font-weight:700!important;letter-spacing:.08em!important;margin:18px 0 8px!important;text-transform:uppercase!important}

/* .ht-item 工具項目 */
.ht-item{background:#ffffff!important;border:2.5px solid #3D3835!important;border-radius:16px!important;padding:14px 16px!important;display:flex!important;align-items:center!important;gap:14px!important;color:#3D3835!important;text-decoration:none!important;transition:.2s!important;box-shadow:3px 3px 0 #3D3835!important;margin:10px 0!important}
.ht-item:hover{transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 #3D3835!important;background:#FFE5E5!important}
.ht-icon-wrap{width:44px!important;height:44px!important;border-radius:12px!important;background:#FFCCCC!important;border:2px solid #3D3835!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:1.3rem!important;flex-shrink:0!important}
.ht-icon-quiz{background:#2E5EA6!important}
.ht-info{flex:1!important;min-width:0!important;color:#3D3835!important}
.ht-name{color:#3D3835!important;font-weight:800!important;font-size:.95rem!important;margin:0!important;line-height:1.3!important}
.ht-desc{color:#6A6560!important;font-size:.78rem!important;margin-top:3px!important;line-height:1.5!important}

/* .ba-dim 四大維度 */
.ba-dim{background:#ffffff!important;border:2.5px solid #3D3835!important;border-radius:14px!important;padding:12px 14px!important;margin:8px 0!important;box-shadow:3px 3px 0 #3D3835!important}
.ba-dim-icon{font-size:1.4rem!important}
.ba-dim-label{color:#3D3835!important;font-weight:800!important;font-size:.9rem!important}
.ba-dim-btns a,.ba-dim-btns button{background:#FFCCCC!important;color:#3D3835!important;border:2px solid #3D3835!important;border-radius:999px!important;padding:6px 14px!important;font-weight:700!important;font-size:.82rem!important;margin:3px 4px!important;text-decoration:none!important;transition:.2s!important;display:inline-block!important}
.ba-dim-btns a:hover,.ba-dim-btns button:hover{background:#007B7F!important;color:#ffffff!important;transform:translate(-1px,-1px)!important;box-shadow:2px 2px 0 #3D3835!important}

/* .filter-chip 過濾器 */
.filter-chip{background:#ffffff!important;color:#3D3835!important;border:2px solid #3D3835!important;border-radius:999px!important;padding:7px 14px!important;font-weight:700!important;font-size:.82rem!important;cursor:pointer!important;transition:.2s!important;margin:3px 4px 3px 0!important;display:inline-flex!important;align-items:center!important;gap:5px!important}
.filter-chip:hover{background:#FFCCCC!important;transform:translate(-1px,-1px)!important;box-shadow:2px 2px 0 #3D3835!important}
.filter-chip.on,.filter-chip.active{background:#007B7F!important;color:#ffffff!important;border-color:#3D3835!important;box-shadow:2px 2px 0 #3D3835!important}

/* .sb-item sidebar items（v2 強化對比 · 字級字重明確 · 不繼承 button default） */
.sb-item{color:#3D3835!important;background:transparent!important;padding:11px 14px!important;border:2px solid transparent!important;border-radius:12px!important;transition:all .15s!important;display:flex!important;align-items:center!important;gap:10px!important;font-size:.96rem!important;font-weight:700!important;letter-spacing:.02em!important;font-family:'Noto Sans TC','Inter',sans-serif!important;line-height:1.4!important;cursor:pointer!important;text-align:left!important;width:100%!important;outline:none!important}
.sb-item:hover{background:#FFE5E5!important;border-color:#3D3835!important;color:#3D3835!important;transform:translate(-1px,-1px)!important;box-shadow:2px 2px 0 #3D3835!important}
.sb-item.on{background:#FFCCCC!important;border-color:#3D3835!important;color:#3D3835!important;font-weight:900!important;box-shadow:3px 3px 0 #3D3835!important}
.sb-icon{color:#007B7F!important;font-size:1.15rem!important;flex-shrink:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:24px!important}
.sb-section{margin:20px 0 8px!important}
.sb-section-label{color:#5C5651!important;font-size:.72rem!important;font-weight:800!important;letter-spacing:.12em!important;text-transform:uppercase!important;padding:0 14px 6px!important;border-bottom:1px solid #D8D4CC!important;margin:0 4px 8px!important}
.sb-divider{height:2px;background:#D8D4CC;margin:8px 12px;border-radius:1px}

/* .setting-row 設定列 */
.setting-row{background:#ffffff!important;border:2px solid rgba(61,56,53,.15)!important;border-radius:12px!important;padding:12px 16px!important;margin:8px 0!important;display:flex!important;justify-content:space-between!important;align-items:center!important;color:#3D3835!important}
.setting-label{color:#3D3835!important;font-weight:700!important;font-size:.92rem!important}
.setting-val{color:#007B7F!important;font-weight:700!important;font-size:.88rem!important}

/* .task-item 任務列 */
.task-item{background:#ffffff!important;border:2px solid rgba(61,56,53,.15)!important;border-radius:12px!important;padding:12px 14px!important;margin:8px 0!important;display:flex!important;align-items:center!important;gap:12px!important}
.task-name{color:#3D3835!important;font-weight:700!important}
.task-arr{color:#007B7F!important;font-weight:900!important}

/* .hs-item / .ps-item 統計（5-05 強化對比 · label 不再淺灰看不見） */
.hs-item,.ps-item{background:#fff!important;border:2.5px solid #3D3835!important;border-radius:14px!important;padding:14px 12px!important;text-align:center!important;box-shadow:3px 3px 0 #3D3835!important}
.hs-n,.ps-n{color:#007B7F!important;font-size:1.6rem!important;font-weight:900!important;font-family:'Noto Sans TC','Inter',sans-serif!important;line-height:1!important;letter-spacing:-.02em!important}
.hs-l{color:#3D3835!important;font-size:.82rem!important;font-weight:800!important;margin-top:6px!important;letter-spacing:.04em!important}

/* 特殊 mri-gold 金色 → 變革藍綠 */
.mri-gold{color:#007B7F!important}

/* .star 星星 */
.star{color:#FFCCCC!important}

/* 2026-05-05 深底深字 P0 全修 ─────────────────────────────── */
/* castle-progress：舊黑金深底 → 2026 淺底 Neo-Brutalism */
.castle-progress{background:#FAF9F4!important;border:3px solid #3D3835!important;box-shadow:6px 6px 0 #3D3835!important;border-radius:20px!important}
.castle-progress::before{opacity:.2!important}
.cp-level{color:#007B7F!important;opacity:1!important}
.cp-name{color:#3D3835!important}
.cp-pct{color:#5C5651!important}
.cp-bar{background:rgba(61,56,53,.12)!important}
.cp-bar-fill{background:linear-gradient(90deg,#007B7F,#2E5EA6)!important}
.cp-room{color:#3D3835!important;background:#F0EEE9!important;border:1px solid rgba(61,56,53,.2)!important}
.cp-room.unlocked{color:#007B7F!important;background:rgba(0,123,127,.1)!important;border-color:rgba(0,123,127,.3)!important}
/* badge-unlock-box：舊黑金深底 → 2026 淺底 */
.badge-unlock-box{background:#FAF9F4!important;border:3px solid #3D3835!important;box-shadow:6px 6px 0 #3D3835!important;border-radius:20px!important}
.bu-sparkle{color:#007B7F!important}
.bu-title{color:#3D3835!important}
.bu-name{color:#007B7F!important}
.bu-desc{color:#5C5651!important}
.btn-bu-ok{background:#FFCCCC!important;color:#3D3835!important;border:2.5px solid #3D3835!important;border-radius:999px!important;box-shadow:3px 3px 0 #3D3835!important;font-weight:900!important}
/* ps-l / bc-price span：舊奶油淺字 → 深灰可見 */
.ps-l{color:#6A6560!important}
.bc-price span{color:#6A6560!important}
/* ─────────────────────────────────────────────────────────── */

/* login form */
.lf-label{color:#3D3835!important;font-weight:700!important;font-size:.88rem!important;margin-bottom:6px!important;display:block!important}
.lf-input{background:#ffffff!important;border:2px solid #3D3835!important;border-radius:12px!important;padding:11px 14px!important;color:#3D3835!important;font-size:.95rem!important;font-weight:500!important;width:100%!important}
.lf-input:focus{border-color:#007B7F!important;box-shadow:0 0 0 3px rgba(0,123,127,.15)!important;outline:none!important}

/* 日曆 */
.cal-wd{color:#3D3835!important;font-weight:800!important}
.cal-legend-dot{border:1.5px solid #3D3835!important}

/* CTA 按鈕 Neo-Brutalism */
.btn-primary,a.btn-primary,button.btn-primary,.rb-btn-primary,.cp-btn-primary,.hub-card-cta,a.rb-btn-primary,.upgrade-btn,.app-plan-upgrade,.plan-cta{background:#FFCCCC!important;color:#3D3835!important;border:3px solid #3D3835!important;border-radius:999px!important;padding:12px 26px!important;font-weight:900!important;letter-spacing:.04em!important;box-shadow:5px 5px 0 #3D3835!important;text-decoration:none!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important}
.btn-primary:hover,a.btn-primary:hover,.rb-btn-primary:hover,.upgrade-btn:hover,.plan-cta:hover{background:#007B7F!important;color:#ffffff!important;transform:translate(-2px,-2px)!important;box-shadow:7px 7px 0 #3D3835!important}

/* 工具卡片 */
.hub-card,.tool-card,.app-tool-item,.cp-tool-item{background:#ffffff!important;border:2.5px solid #3D3835!important;border-radius:16px!important;box-shadow:3px 3px 0 #3D3835!important;color:#3D3835!important;transition:all .2s!important;padding:16px 18px!important}
.hub-card:hover,.tool-card:hover,.app-tool-item:hover{transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 #3D3835!important;background:#FFE5E5!important}
.hub-card *,.tool-card *,.app-tool-item *{color:#3D3835!important}

/* 各種 chip / pill / badge */
.pill,.chip,.tag,.badge,.app-plan-badge,.plan-badge{background:#FFCCCC!important;color:#3D3835!important;border:2px solid #3D3835!important;border-radius:999px!important;padding:4px 12px!important;font-weight:700!important}

/* 訂閱方案卡特殊配色 */
.plan-plus,.app-plan-plus{border-color:#007B7F!important;box-shadow:5px 5px 0 #007B7F!important}
.plan-pro,.app-plan-pro{border-color:#2E5EA6!important;box-shadow:5px 5px 0 #2E5EA6!important}

/* Details 折疊 */
details{background:#F5F3EC!important;border:2.5px solid #3D3835!important;border-radius:16px!important;padding:0!important;margin:14px 0!important;overflow:hidden!important}
details summary{padding:14px 20px!important;background:#3D3835!important;color:#ffffff!important;font-weight:700!important;cursor:pointer!important;list-style:none!important}
details summary::-webkit-details-marker{display:none!important}
details > *:not(summary){padding:16px 20px!important;background:#F5F3EC!important;color:#3D3835!important}
details summary:hover{background:#007B7F!important}

/* 段落文字可見度 */
p,.desc,.hint,.sub{color:#6A6560!important;line-height:1.75!important}
strong,b,em{color:#3D3835!important;font-weight:700!important}
a:not(.btn-primary):not(.rb-btn-primary):not(.hub-card):not(.tool-card){color:#007B7F!important;transition:color .2s!important}
a:not(.btn-primary):not(.rb-btn-primary):not(.hub-card):not(.tool-card):hover{color:#FFCCCC!important}

/* 底部 nav + footer 覆蓋 */
#hl-bottom-nav{background:rgba(61,56,53,.97)!important;border-top:2px solid rgba(0,123,127,.35)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.hl-bn-item{color:rgba(240,238,233,.72)!important}
.hl-bn-item:hover,.hl-bn-item.active{color:#FFCCCC!important;background:rgba(255,204,204,.08)!important}
.hl-bn-item.active::after{background:#007B7F!important;height:3px!important}
.hl-bn-tip{background:rgba(61,56,53,.95)!important;color:#FFCCCC!important}
.hl-footer{background:rgba(240,238,233,.85)!important;border-top:1px solid rgba(61,56,53,.12)!important}
.hl-footer *{color:#3D3835!important}
.hl-footer a{color:#007B7F!important}
.hl-footer a:hover{color:#2E5EA6!important}
.hl-footer-logo,.hl-footer-logo *,.hl-footer-copyright,.hl-footer-copyright *,.hl-footer-copyright-brand,.hl-footer-brand,.hl-footer-brand *{color:#3D3835!important;font-weight:700!important}
.hl-footer-logo{font-family:'Noto Sans TC',Inter,system-ui,sans-serif!important;font-weight:900!important;font-size:1.15rem!important}
#hl-footer-slogan{color:#007B7F!important;font-weight:700!important}
.hl-footer-links a{color:#007B7F!important;font-weight:600!important}



/* ═══════ Block 3 · 2026 多巴胺 !important override（原 app.html line 1677-1824） ═══════ */
/* 本段所有 !important 是要 override hl-design-tokens.css 的設定 · 必須在 hl-design-tokens.css 之後 link */

  /* ── base 底色 / 字體 / 字級全面放大 ── */
  html, body {
    background: #F0EEE9 !important;
    background-image: none !important;
    color: #3D3835 !important;
    font-family: 'Noto Sans TC', 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .hl-cosmos, .hl-stars-layer { display: none !important; }

  /* ── input / select 必要覆蓋（CLAUDE.md 鐵則）── */
  input, select, textarea {
    color: #3D3835 !important;
    background: #fff !important;
    border-color: #3D3835 !important;
    font-size: 1.05rem !important;
  }
  ::placeholder { color: #B5B0A8 !important; opacity: 1 !important; }
  select option { background: #fff !important; color: #3D3835 !important; }

  /* ── 字級放大（既有 .9rem 太小）── */
  .lc-title, .ld-brand { font-size: 1.55rem !important; font-weight: 900 !important; color: #3D3835 !important; letter-spacing: -.02em !important; }
  .lc-sub, .lc-divider, .lc-err, .lc-forget button, .lc-back a, .lf-label { font-size: 1rem !important; color: #6B635D !important; }
  .lf-label { font-weight: 700 !important; color: #3D3835 !important; margin-bottom: 8px !important; }
  .lc-tab { font-size: 1.05rem !important; padding: 12px !important; font-weight: 600 !important; color: #6B635D !important; }
  .lc-tab.active, .lc-tab[aria-selected="true"] { background: #007B7F !important; color: #fff !important; }
  .lf-input { font-size: 1.05rem !important; padding: 14px 16px !important; border-radius: 12px !important; border-width: 2px !important; }

  /* ── 按鈕 Neo-Brutalism 風格 ── */
  .btn-primary {
    background: #007B7F !important;
    color: #fff !important;
    border: 3px solid #3D3835 !important;
    box-shadow: 6px 6px 0 #3D3835 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    padding: 16px !important;
    border-radius: 14px !important;
    transition: transform .15s, box-shadow .15s !important;
    background-image: none !important;
  }
  .btn-primary:hover { transform: translate(-3px, -3px) !important; box-shadow: 9px 9px 0 #3D3835 !important; }
  .btn-primary:active { transform: translate(3px, 3px) !important; box-shadow: 0 0 0 #3D3835 !important; }
  .btn-google {
    background: #fff !important;
    color: #3D3835 !important;
    border: 3px solid #3D3835 !important;
    box-shadow: 4px 4px 0 #FFCCCC !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    transition: transform .15s, box-shadow .15s !important;
  }
  .btn-google:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 #FFCCCC !important; }

  /* ── topbar / 品牌列 ── */
  .tb-brand { font-size: 1.25rem !important; font-weight: 900 !important; color: #3D3835 !important; letter-spacing: -.02em !important; font-family: 'Noto Sans TC', 'Inter', sans-serif !important; }
  .tb-page { font-size: 1.05rem !important; color: #007B7F !important; font-weight: 700 !important; }
  .tb-role-badge { font-size: .9rem !important; padding: 6px 14px !important; background: #FFCCCC !important; color: #3D3835 !important; font-weight: 800 !important; border: 2px solid #3D3835 !important; border-radius: 999px !important; }
  .tb-avatar { width: 38px !important; height: 38px !important; background: #007B7F !important; color: #fff !important; font-weight: 900 !important; font-size: 1rem !important; border: 2px solid #3D3835 !important; }

  /* ── PWA install banner（保留但配色升級）── */
  .pwa-text-main { color: #fff !important; font-size: 1rem !important; font-weight: 700 !important; }
  .pwa-text-sub { color: rgba(255,255,255,.85) !important; font-size: .95rem !important; }
  .btn-pwa-install { background: #FFCCCC !important; color: #3D3835 !important; font-size: 1rem !important; font-weight: 800 !important; border: 2px solid #3D3835 !important; box-shadow: 3px 3px 0 #3D3835 !important; }

  /* ── 卡片 Neo-Brutalism 全套（dashboard 各區塊統一）── */
  .lc-card, .ld-card, .dashboard-card, .role-card,
  [class*="-card"]:not(.theme-card):not(.btn):not(.hero-card) {
    background: #fff !important;
    background-image: none !important;
    border: 2.5px solid #3D3835 !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0 #FFCCCC !important;
    transition: transform .15s, box-shadow .15s !important;
  }
  .lc-card:hover, .ld-card:hover, .dashboard-card:hover, .role-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 6px 6px 0 #FFCCCC !important;
  }

  /* ── Bento details 折疊（多區塊收納 · 對齊 design system 2.2）── */
  details summary { cursor: pointer; list-style: none }
  details summary::-webkit-details-marker { display: none }
  details {
    border: 2.5px solid #3D3835 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #F5F3EC !important;
    margin-bottom: 12px !important;
  }
  details summary {
    padding: 16px 22px !important;
    background: #3D3835 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: .02em !important;
  }
  details summary:hover { background: #007B7F !important }
  details summary::after { content: '＋' !important; font-size: 1.4rem !important; font-weight: 900 !important }
  details[open] summary::after { content: '－' !important }

  /* ── 底部 nav 覆蓋（hl-bottomnav.js 深色 → 多巴胺 · 對齊 design system 3.4）── */
  #hl-bottom-nav {
    background: rgba(61,56,53,.97) !important;
    border-top: 2px solid rgba(0,123,127,.35) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
  }
  .hl-bn-item { color: rgba(240,238,233,.72) !important }
  .hl-bn-item:hover, .hl-bn-item.active { color: #FFCCCC !important; background: rgba(255,204,204,.08) !important }
  .hl-bn-item.active::after { background: #007B7F !important; height: 3px !important }
  .hl-bn-tip { background: rgba(61,56,53,.95) !important; color: #FFCCCC !important; border: 1px solid rgba(0,123,127,.3) !important }

  /* ── footer 覆蓋（雲舞白半透 · 對齊 design system 3.4）── */
  .hl-footer { background: rgba(240,238,233,.6) !important; border-top: 1px solid rgba(61,56,53,.1) !important }
  .hl-footer * { color: #3D3835 !important }
  .hl-footer a { color: #007B7F !important; font-weight: 600 !important }
  .hl-footer a:hover { color: #FFCCCC !important }

  /* ── Pulse 脈衝動畫（badge 點點 · design system 2.2）── */
  @keyframes pulse-2026 { 50% { opacity: .4 } }
  .hero-badge::before, .pulse-dot {
    content: '●';
    color: #FFCCCC;
    animation: pulse-2026 2s ease-in-out infinite;
  }

  /* ── Fade-up 進場動畫 ── */
  @keyframes fadeUp-2026 {
    from { opacity: 0; transform: translateY(18px) }
    to { opacity: 1; transform: none }
  }

  /* ── iOS 防 position:fixed 崩（鐵則）── */
  [style*="position:fixed"], [style*="position: fixed"], .hl-fixed-element {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }