/* ============================================================= health-core · 共用設計系統（健康產品家族） 來源：旗艦款 healthcare 抽取，四支 App 共用同一套視覺語言。 改這裡 → 用 sync.bat 同步到各 App。請勿在各 App 內單獨改。 ============================================================= */ :root { --bg: #F5F4F0; --surface: #FFFFFF; --surface2: #EFEFEB; --surface3: #E5E4E0; --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.14); --text: #1A1917; --text2: #6B6A67; --text3: #6A6965; /* a11y:由 #9B9A97 加深至 ~4.6:1 對比(WCAG AA) */ --green: #1D9E75; --green-bg: #E1F5EE; --amber: #BA7517; --amber-bg: #FAEEDA; --red: #D85A30; --red-bg: #FCEBEB; --blue: #185FA5; --blue-bg: #E6F1FB; --purple: #534AB7; --purple-bg: #EEEDFE; --pink: #C6417F; --pink-bg: #FBE9F2; --nav-h: 70px; --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 6px 18px rgba(0,0,0,.10); --shadow-lg: 0 14px 34px rgba(0,0,0,.14); /* 各 App 覆寫 --brand / --brand-bg 即可換家族色 */ --brand: #534AB7; --brand-bg: #EEEDFE; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141412; --surface: #1E1D1B; --surface2: #282724; --surface3: #333230; --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14); --text: #F0EFE9; --text2: #A8A7A3; --text3: #8E8D88; --green-bg: #0D2E22; --amber-bg: #2D1F08; --red-bg: #2D1210; --blue-bg: #0A1E35; --purple-bg: #1A1835; --pink-bg: #2E0F20; } } :root[data-theme="dark"] { --bg: #141412; --surface: #1E1D1B; --surface2: #282724; --surface3: #333230; --border: rgba(255,255,255,0.08); --border2: rgba(255,255,255,0.14); --text: #F0EFE9; --text2: #A8A7A3; --text3: #8E8D88; --green-bg: #0D2E22; --amber-bg: #2D1F08; --red-bg: #2D1210; --blue-bg: #0A1E35; --purple-bg: #1A1835; --pink-bg: #2E0F20; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'PingFang TC','Noto Sans TC','Microsoft JhengHei','Segoe UI',sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} input,select,button,textarea{font-family:inherit;font-size:inherit;color:inherit} .num,.sv,.rv,.cp-val,.score-num,.ring-val,.net-val{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'} input,select,textarea{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;height:40px;width:100%;outline:none;transition:border .15s} textarea{padding:10px 12px;height:auto;min-height:72px;line-height:1.5} input:focus,select:focus,textarea:focus{border-color:var(--brand)} input::placeholder,textarea::placeholder{color:var(--text3)} button{cursor:pointer;border:none;background:none} /* 大字體模式（長輩友善）— 加在 */ html.bigfont{font-size:17.5px} html.bigfont .page-title{font-size:25px} html.bigfont .stat-card .sv,html.bigfont .rv{font-size:23px} html.bigfont input,html.bigfont select{height:46px} html.bigfont .btn{height:46px} html.bigfont .nav-item span{font-size:13px} /* a11y:大字模式連「次要小灰字」一起放大,長輩才真的看得清 */ html.bigfont .hint,html.bigfont .li-sub,html.bigfont .sl,html.bigfont .su,html.bigfont .sn,html.bigfont .ring-lbl,html.bigfont .fam-sub,html.bigfont .note,html.bigfont .badge,html.bigfont .field label,html.bigfont .prog-label,html.bigfont .page-date,html.bigfont .reading-sub,html.bigfont .mc-time,html.bigfont .card-sub,html.bigfont .pc-sub{font-size:14px} html.bigfont .desc,html.bigfont .en{font-size:15px} /* Layout */ .app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;background:var(--bg)} .page{display:none;padding:16px 16px calc(var(--nav-h) + 16px);min-height:100vh} .page.active{display:block} /* Bottom Nav */ .nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:var(--nav-h);background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;z-index:100} .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;cursor:pointer;color:var(--text3);transition:color .15s;border:none;background:none} .nav-item.active{color:var(--brand)} .nav-item i{font-size:26px} .nav-item span{font-size:12px;font-weight:600} .nav-dot{width:4px;height:4px;border-radius:50%;background:var(--brand);opacity:0;transition:opacity .2s;margin-top:-2px} .nav-item.active .nav-dot{opacity:1} /* Cards */ .card{background:var(--surface);border:1px solid var(--border);border-left:3px solid color-mix(in srgb, var(--accent, var(--brand)) 28%, transparent);border-radius:var(--radius);padding:16px;margin-bottom:12px} .card-title{font-size:13px;font-weight:600;color:var(--text2);display:flex;align-items:center;gap:6px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px} .card-title i{font-size:15px;color:var(--accent,var(--brand))} /* Page Header */ .page-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-top:4px} .page-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px} .page-title{font-size:22px;font-weight:700;color:var(--text)} .page-date{font-size:12px;color:var(--text3);margin-left:auto} /* Stat Grid */ .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px} .stat-grid.three{grid-template-columns:1fr 1fr 1fr} .stat-grid.four{grid-template-columns:repeat(4,1fr)} .stat-card{background:var(--surface2);border-radius:var(--radius-sm);padding:10px 12px} .stat-card .sl{font-size:11px;color:var(--text3);margin-bottom:2px} .stat-card .sv{font-size:20px;font-weight:700} .stat-card .su{font-size:11px;color:var(--text2);margin-left:2px} .stat-card .sn{font-size:11px;margin-top:2px} /* Progress bars */ .prog-wrap{margin-bottom:8px} .prog-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:4px} .prog-track{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden} .prog-fill{height:100%;border-radius:3px;transition:width .4s ease;background:var(--brand)} /* Segment control */ .seg{display:flex;background:var(--surface2);border-radius:var(--radius-sm);padding:3px;gap:2px;margin-bottom:12px} .seg-btn{flex:1;height:32px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text2);transition:all .15s;background:none;border:none} .seg-btn.on{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1)} /* Buttons */ .btn{height:40px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;padding:0 16px} .btn-primary{background:var(--brand);color:#fff;border:none} .btn-primary:hover{filter:brightness(.92)} .btn-primary:disabled{opacity:.5;cursor:not-allowed} .btn-outline{background:none;border:1px solid var(--border2);color:var(--text2)} .btn-outline:hover{background:var(--surface2)} .btn-green{background:var(--green);color:#fff} .btn-red{background:var(--red);color:#fff} .btn-block{width:100%} /* Colors */ .c-green{color:var(--green)}.c-amber{color:var(--amber)}.c-red{color:var(--red)}.c-blue{color:var(--blue)}.c-purple{color:var(--purple)}.c-pink{color:var(--pink)}.c-brand{color:var(--brand)}.c-muted{color:var(--text3)} /* Badge */ .badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:500} .badge-green{background:var(--green-bg);color:var(--green)} .badge-amber{background:var(--amber-bg);color:var(--amber)} .badge-red{background:var(--red-bg);color:var(--red)} .badge-blue{background:var(--blue-bg);color:var(--blue)} .badge-purple{background:var(--purple-bg);color:var(--purple)} .badge-pink{background:var(--pink-bg);color:var(--pink)} .badge-brand{background:var(--brand-bg);color:var(--brand)} .badge-gray{background:var(--surface2);color:var(--text2)} /* Form fields */ .field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px} .field label{font-size:12px;color:var(--text2);font-weight:500} .field .hint{font-size:11px;color:var(--text3)} .field-row{display:grid;gap:8px} .field-row.two{grid-template-columns:1fr 1fr} .field-row.three{grid-template-columns:1fr 1fr 1fr} .field-row>*{min-width:0} /* 讓 date 等輸入框能縮，避免撐爆 grid 造成水平溢出 */ input,select{min-width:0} /* Generic pick buttons (段落選擇) */ .pick-grid{display:grid;gap:6px;margin-bottom:10px} .pick-grid.two{grid-template-columns:1fr 1fr} .pick-grid.three{grid-template-columns:repeat(3,1fr)} .pick-grid.four{grid-template-columns:repeat(4,1fr)} .pick-grid.five{grid-template-columns:repeat(5,1fr)} .pick-btn{padding:10px 6px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);text-align:center;font-size:12px;color:var(--text2);transition:all .15s} .pick-btn i{display:block;font-size:18px;margin-bottom:3px} .pick-btn.on{border-color:var(--brand);background:var(--brand-bg);color:var(--brand);font-weight:600} /* Result cards */ .result-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px} .result-card{background:var(--brand-bg);border-radius:var(--radius-sm);padding:10px 12px} .result-card .rl{font-size:11px;color:var(--brand);margin-bottom:2px} .result-card .rv{font-size:18px;font-weight:700;color:var(--brand)} .result-card .ru{font-size:11px;color:var(--brand);opacity:.7} .result-card .rn{font-size:11px;color:var(--brand);margin-top:2px} .result-card-g{background:var(--green-bg)} .result-card-g .rl,.result-card-g .ru,.result-card-g .rn,.result-card-g .rv{color:var(--green)} .result-card-a{background:var(--amber-bg)} .result-card-a .rl,.result-card-a .ru,.result-card-a .rn,.result-card-a .rv{color:var(--amber)} .result-card-r{background:var(--red-bg)} .result-card-r .rl,.result-card-r .ru,.result-card-r .rn,.result-card-r .rv{color:var(--red)} .result-card-b{background:var(--blue-bg)} .result-card-b .rl,.result-card-b .ru,.result-card-b .rn,.result-card-b .rv{color:var(--blue)} /* Log / history / reminder rows */ .log-item,.hist-item,.rem-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)} .log-item:last-child,.hist-item:last-child,.rem-row:last-child{border-bottom:none} .li-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .li-name{flex:1;font-size:13px;font-weight:500;color:var(--text)} .li-sub{font-size:11px;color:var(--text3)} .li-val{font-size:14px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .li-del{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text3);transition:all .15s;flex-shrink:0} .li-del:hover{background:var(--red-bg);color:var(--red)} /* Chart */ .chart-wrap{height:170px;position:relative;margin-bottom:6px} .chart-wrap.sm{height:130px} /* Ring (svg) */ .ring-wrap{position:relative;width:150px;height:150px;margin:0 auto 12px} .ring-wrap svg{width:100%;height:100%} .ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center} .ring-val{font-size:34px;font-weight:800;color:var(--text);line-height:1} .ring-lbl{font-size:12px;color:var(--text3);margin-top:3px} /* Toggle */ .toggle{position:relative;width:36px;height:20px;flex-shrink:0} .toggle input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;margin:0;z-index:1} .toggle-track{width:100%;height:100%;background:var(--surface3);border-radius:10px;transition:background .2s;position:absolute} .toggle input:checked~.toggle-track{background:var(--brand)} .toggle-thumb{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s;pointer-events:none} .toggle input:checked~.toggle-thumb{transform:translateX(16px)} /* Empty state */ .empty{text-align:center;padding:24px 0;font-size:13px;color:var(--text3)} .empty i{font-size:30px;display:block;margin-bottom:6px} /* Info / warn note */ .note{border-radius:var(--radius-sm);padding:9px 12px;font-size:12px;display:flex;gap:6px;align-items:flex-start;margin-top:10px;line-height:1.5} .note i{font-size:14px;flex-shrink:0;margin-top:1px} .note-green{background:var(--green-bg);color:var(--green)} .note-amber{background:var(--amber-bg);color:var(--amber)} .note-red{background:var(--red-bg);color:var(--red)} .note-blue{background:var(--blue-bg);color:var(--blue)} .note-brand{background:var(--brand-bg);color:var(--brand)} /* Adv toggle */ .adv-toggle{width:100%;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text2);padding:10px 0 0;border-top:1px solid var(--border);margin-top:4px;background:none;border-left:none;border-right:none;border-bottom:none} .adv-toggle i.chev{transition:transform .25s;margin-left:auto;font-size:15px} .adv-toggle.open i.chev{transform:rotate(180deg)} .adv-body{max-height:0;overflow:hidden;transition:max-height .3s ease} .adv-body.open{max-height:1200px} /* Scrollable list */ .scroll-list{max-height:230px;overflow-y:auto} /* Stepper（+/− 數字步進器，減少手動輸入、觸控友善）*/ .stepper{display:flex;align-items:center;gap:8px} .stepper-btn{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border2);background:var(--surface2);font-size:22px;line-height:1;color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s;user-select:none} .stepper-btn:active{background:var(--brand-bg);transform:scale(.94)} .stepper input{text-align:center;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;height:44px} html.bigfont .stepper-btn{width:50px;height:50px;font-size:26px} html.bigfont .stepper input{height:50px;font-size:23px} /* Quick chips（常用值/快速選項，一點即帶入）*/ .chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px} .chip-row.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch} .chip{padding:7px 12px;border-radius:20px;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;transition:all .12s;flex-shrink:0} .chip:active{transform:scale(.95)} .chip.on{background:var(--brand-bg);border-color:var(--brand);color:var(--brand);font-weight:600} .chip-ghost{border-style:dashed;color:var(--text3)} /* 多分頁時底部導覽自動縮排（5+ tab 仍不擠）*/ .nav.compact .nav-item i{font-size:23px} .nav.compact .nav-item span{font-size:11px} /* 家族切換浮鈕 + 底部選單 + 家族基本資料 */ .fam-fab{position:fixed;right:14px;bottom:calc(var(--nav-h) + 14px);width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#14B8A6,#0EA5E9);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.24);display:flex;align-items:center;justify-content:center;font-size:23px;z-index:200;border:none} .fam-fab:active{transform:scale(.93)} .fam-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:450;display:none;align-items:flex-end;justify-content:center;overflow-x:hidden} .fam-overlay.show{display:flex} .fam-sheet{background:var(--surface);width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:16px 14px calc(18px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto;overflow-x:hidden;box-sizing:border-box} .fam-title{font-size:17px;font-weight:800;text-align:center;margin-bottom:4px;color:var(--text)} .fam-sub{font-size:12px;color:var(--text3);text-align:center;margin-bottom:12px} .fam-basic{background:var(--surface2);border-radius:12px;padding:12px;margin-bottom:14px} .fam-divider{font-size:12px;color:var(--text3);font-weight:600;margin:2px 0 8px;letter-spacing:1px} .fam-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;text-decoration:none;color:var(--text);border:1px solid var(--border);margin-bottom:8px;background:var(--surface2)} .fam-row.cur{border-color:var(--brand);background:var(--brand-bg)} .fam-emo{font-size:22px} .fam-name{flex:1;font-weight:600;font-size:15px} .fam-here{font-size:12px;color:var(--brand);font-weight:700} .fam-row i{color:var(--text3)} .fam-close{text-align:center;padding:12px;color:var(--text2);font-weight:700;cursor:pointer} .fam-swatches{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px} .fam-swatch{width:38px;height:38px;border-radius:50%;border:2px solid var(--border2);cursor:pointer;background:var(--surface2);font-size:11px;color:var(--text3);display:flex;align-items:center;justify-content:center;transition:transform .1s} .fam-swatch:active{transform:scale(.9)} .fam-swatch.on{outline:3px solid var(--brand);outline-offset:2px;border-color:#fff} .fam-copyright{font-size:10.5px;color:var(--text3);text-align:center;line-height:1.7;padding:12px 6px 2px;border-top:1px solid var(--border);margin-top:6px} /* Toast */ .toast-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:6px;pointer-events:none;width:calc(100% - 32px);max-width:420px} .toast{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,0.12);opacity:0;transform:translateY(-10px);transition:all .25s cubic-bezier(.2,.8,.2,1);pointer-events:auto} .toast.show{opacity:1;transform:translateY(0)} .toast i{font-size:16px;flex-shrink:0} .toast.toast-ok{border-color:var(--green);color:var(--green)} .toast.toast-ok i{color:var(--green)} .toast.toast-warn{border-color:var(--amber);color:var(--amber)} .toast.toast-warn i{color:var(--amber)} .toast.toast-info{border-color:var(--blue);color:var(--blue)} .toast.toast-info i{color:var(--blue)} .spin{display:inline-block;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ===== 安裝橫幅 hc-ib（在瀏覽器開啟且未安裝時自動出現；可關閉）===== */ .hc-ib{position:fixed;left:0;right:0;bottom:var(--nav-h,0px);z-index:400;display:flex;align-items:center;gap:10px; padding:11px 12px calc(11px + env(safe-area-inset-bottom)); background:var(--brand,#14B8A6);color:#fff;font-size:13.5px;line-height:1.35; box-shadow:0 -4px 18px rgba(0,0,0,.2);animation:hcIbUp .28s ease} @keyframes hcIbUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .hc-ib .hc-ib-t{flex:1;display:flex;align-items:center;gap:6px} .hc-ib .hc-ib-t i{font-size:19px;flex:none} .hc-ib .hc-ib-t b{font-weight:700} .hc-ib .hc-ib-go{flex:none;background:#fff;color:var(--brand,#0f766e);border:none;border-radius:9px; padding:8px 18px;font-weight:800;font-size:14px} .hc-ib .hc-ib-go:active{transform:scale(.95)} .hc-ib .hc-ib-x{flex:none;background:transparent;border:none;color:#fff;font-size:22px;line-height:1;padding:2px 4px;opacity:.9} body:has(#hc-ib) .fam-fab{bottom:calc(var(--nav-h,0px) + 60px)} /* ===== 更新橫幅 hc-upd（偵測到新版時從頂端跳出；點「立即更新」換新版）===== */ .hc-upd{position:fixed;left:0;right:0;top:0;z-index:500;display:flex;align-items:center;justify-content:center;gap:12px; padding:calc(9px + env(safe-area-inset-top)) 12px 9px;background:#0f766e;color:#fff;font-size:13.5px; box-shadow:0 3px 14px rgba(0,0,0,.22);animation:hcUpdDown .28s ease} @keyframes hcUpdDown{from{transform:translateY(-100%)}to{transform:translateY(0)}} .hc-upd .hc-upd-t{display:flex;align-items:center;gap:6px} .hc-upd .hc-upd-t i{font-size:18px} .hc-upd .hc-upd-go{flex:none;background:#fff;color:#0f766e;border:none;border-radius:8px;padding:6px 15px;font-weight:800;font-size:13px} .hc-upd .hc-upd-go:active{transform:scale(.95)} /* 從 HUB「安裝」進來時：橫幅加外框、按鈕脈動，引導使用者注意 */ .hc-ib.urge{box-shadow:0 -4px 22px rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.55)} .hc-ib.urge .hc-ib-go{animation:hcBtnPulse 1.05s ease-in-out infinite} @keyframes hcBtnPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.65)}50%{transform:scale(1.05);box-shadow:0 0 0 7px rgba(255,255,255,0)}} /* ===== a11y:鍵盤焦點可見(WCAG 2.4.7) ===== */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:1px} a:focus-visible,button:focus-visible,[role="button"]:focus-visible,.nav-item:focus-visible,.pick-btn:focus-visible,.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* ===== a11y:尊重「減少動態」偏好,關掉脈動等動畫(WCAG 2.3.3) ===== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ===== 稜線家族帽 top app-bar(僅視覺外殼,不動醫療內容/色彩) ===== */ .rl-signature{padding:32px 18px 26px;text-align:center;color:var(--text3,#6E8BA3);border-top:1px solid var(--border,rgba(130,130,130,.2));margin-top:22px} .rl-signature .rl-sig-row{display:inline-flex;align-items:center;gap:18px;text-align:left} .rl-signature .rl-sig-glyph{width:52px;height:52px;flex:none;color:var(--text,#141E2B)} .rl-signature .rl-sig-rule{width:2px;height:52px;background:#DE9A45;border-radius:2px;flex:none} .rl-signature .rl-sig-quote{margin:0;font-family:'Noto Serif TC','Songti TC',serif;font-weight:600;font-size:18px;line-height:1.4;letter-spacing:1px;color:var(--text,#141E2B)} .rl-signature .rl-sig-by{margin:14px 0 2px;font-size:12px;letter-spacing:5px;color:var(--text3,#6E8BA3)} .rl-signature .fam-credits{margin:8px auto 0;max-width:520px;font-size:11px;line-height:1.7;color:var(--text3,#6E8BA3)} .rl-appbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--brand);color:#fff} .rl-appbar .rl-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.15);flex:none} .rl-appbar .rl-glyph{width:24px;height:24px} .rl-appbar .rl-title{font-family:'Noto Serif TC','Songti TC',serif;font-weight:600;font-size:18px;line-height:1.15} .rl-appbar .rl-sub{font-size:11.5px;opacity:.85;letter-spacing:1px;margin-top:1px}