/* ===================================================================== 2026-09-23 第 3 輪換外觀：四版比較（只有 有值才生效；正式版沒設＝完全不影響） 排法（家蔚已點頭）：第一屏＝小字日期 → 大數字「第幾天」→ 今天的一件事（體重格＋深蹲大圓鈕）→ 本週七天 data-look="1"＝只拿顏色：造型照 6 號 (Not Boring) Habits——黑底、粗大字、大圓鈕、一排週圈圈 data-look="2"＝顏色＋造型：照 15、17 號——黑機殼、拉絲鋁板、螺絲、45 度斜切、燈縫 data-acc="r"＝紅（11、15、17 號）／"y"＝黃（6 號）。重點色只有一個，只用在「現在」和「做到了」。 ===================================================================== */ /* ── 共用：色票 ── */ html[data-look]{ --acc:#E8262D; --acc-rgb:232,38,45; --on-acc:#FFFFFF; --bg:#0B0B0B; --paper:#161616; --paper-2:#1C1C1C; --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07); --txt:#F2F2F2; --txt-2:#A3A3A3; --txt-3:#767676; --burnt:var(--acc); --burnt-soft:rgba(var(--acc-rgb),.14); --on-burnt:var(--on-acc); --f-num:"Archivo","Noto Sans TC","PingFang TC",sans-serif; --f-ui:"Noto Sans TC","PingFang TC",-apple-system,sans-serif; } html[data-look][data-acc="y"]{ --acc:#FFC21A; --acc-rgb:255,194,26; --on-acc:#111111; } html[data-look="2"]{ --bg:#0A0B0D; --paper:#131519; --paper-2:#1A1C1F; --groove:#040506; --plate-hl:#26292E; --edge:#26292E; --edge-hi:#3A3E44; --well:#07080A; --txt:#EEF0F3; --txt-2:#A6ABB2; --txt-3:#80868E; --alu-ink:#3A3E44; --f-num:"Tektur","Noto Sans TC","PingFang TC",sans-serif; } /* ── 共用：頁面底 ── */ html[data-look], html[data-look] body{ background:var(--bg); color:var(--txt); } html[data-look="2"], html[data-look="2"] body{ background:#040506; } html[data-look] body{ font-family:var(--f-ui); max-width:520px; padding:calc(env(safe-area-inset-top) + 8px) 18px calc(env(safe-area-inset-bottom) + 104px); } html[data-look] body::after{ display:none; } html[data-look] .serif{ font-family:var(--f-ui); } html[data-look] .pills, html[data-look] .topnav{ display:none; } html[data-look] .foot{ color:var(--txt-3); font-size:11px; letter-spacing:.08em; text-align:center; margin-top:18px; } html[data-look] input, html[data-look] button{ font-family:var(--f-ui); } /* 日期列（前一天／今天／後一天，照舊） */ html[data-look] .testbar{ border:0; padding:4px 0; margin:0 0 4px; justify-content:space-between; gap:6px; } html[data-look] .testbar button{ border:0; background:var(--paper); color:var(--txt-2); border-radius:999px; padding:8px 13px; font-size:12px; font-weight:700; } html[data-look] .testbar .today-btn{ color:var(--txt); background:var(--paper-2); border:0; } html[data-look] .testbar .vd{ color:var(--txt); font-weight:900; font-size:13px; letter-spacing:.06em; } /* 底部分頁列 */ html[data-look] .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:center; padding:6px 10px calc(env(safe-area-inset-bottom) + 8px); background:#0B0B0B; border-top:1px solid #1E1E1E; } html[data-look] .tab{ flex:1; max-width:104px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 0 4px; text-decoration:none; color:#6E6E6E; font-size:12px; font-weight:700; letter-spacing:.1em; } html[data-look] .tab i{ width:5px; height:5px; border-radius:50%; background:transparent; } html[data-look] .tab.on{ color:var(--txt); } html[data-look] .tab.on i{ background:var(--acc); } html[data-look] body.v3-login .tabbar{ display:none; } /* 往下滑的卡片（兩版共用基本排法） */ html[data-look] .v3-more{ display:flex; flex-direction:column; gap:12px; margin-top:26px; } html[data-look] .col{ background:var(--paper); border:0; border-radius:20px; padding:18px; } html[data-look] .col, html[data-look] .lead, html[data-look] .review, html[data-look] .fallback, html[data-look] .wk{ box-shadow:none; border-color:transparent; } html[data-look] .food-total, html[data-look] .fitem .fk, html[data-look] .pr b, html[data-look] .fcalc b, html[data-look] .adjust .av, html[data-look] .wk-x, html[data-look] .move .r{ font-family:var(--f-num); color:var(--txt); } html[data-look] .fallback{ background:var(--paper); border:0; border-radius:20px; } html[data-look] .fallback .ft{ color:var(--txt-2); } html[data-look] .wday summary::before{ color:var(--txt-3); } html[data-look] .v3-note{ max-width:300px; margin:16px auto 0; text-align:center; font-size:12px; line-height:1.7; color:var(--txt-3); text-wrap:balance; } html[data-look] .col-h{ border-bottom:1px solid var(--line-soft); } html[data-look] .col-h h2{ font-size:16px; font-weight:900; letter-spacing:.04em; } html[data-look] .lab{ color:var(--txt-2); font-weight:900; letter-spacing:.2em; } html[data-look] .w-big{ font-family:var(--f-num); font-weight:900; } html[data-look] .bar{ background:#262626; } html[data-look] .bar i{ background:var(--txt); } html[data-look] .hint, html[data-look] .meta{ color:var(--txt-3); } /* 打勾：圓形勾選框，做到了＝重點色 */ html[data-look] .check .box{ border-radius:50%; border-color:#3A3A3A; background:transparent; } html[data-look] .check.on .box{ border-color:var(--acc); background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3.2 3.2 6-7.6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; } html[data-look][data-acc="y"] .check.on .box{ background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3.2 3.2 6-7.6' fill='none' stroke='%23111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; } html[data-look] .done-badge{ color:var(--acc); } /* 按鈕類（記一筆、加入、三輪完成…） */ html[data-look] .food-add-btn, html[data-look] .all-done-btn, html[data-look] .fsave, html[data-look] .set-btn, html[data-look] .login-btn{ background:var(--paper-2); color:var(--txt); border:1px solid #2A2A2A; border-radius:999px; text-shadow:none; box-shadow:none; } html[data-look] .fcancel, html[data-look] .fmode{ background:transparent; color:var(--txt-2); border:1px solid #2A2A2A; } html[data-look] .fmode.on{ background:var(--txt); color:#111; border-color:var(--txt); } html[data-look] .input, html[data-look] .food-form input, html[data-look] .set-input, html[data-look] .login-input{ background:#0F0F0F; color:var(--txt); border:1px solid #2A2A2A; } html[data-look] .fchip, html[data-look] .madd{ background:var(--paper-2); color:var(--txt); border:1px solid #2A2A2A; } html[data-look] .rd{ background:#0F0F0F; border-color:#2E2E2E; color:var(--txt); } html[data-look] .rd.on{ background:var(--txt); border-color:var(--txt); color:#111; } /* ===================================================================== ① 只拿顏色：照 6 號 (Not Boring) 的造型 ===================================================================== */ html[data-look="1"] .v3-hero .scr, html[data-look="1"] .v3-hero .v3-led{ display:none; } html[data-look="1"] .v3-hero{ text-align:center; padding:8px 0 0; } html[data-look="1"] .v3-phase{ font-size:11px; font-weight:700; letter-spacing:.26em; color:var(--txt-3); } html[data-look="1"] .v3-phase b{ color:var(--txt-2); font-weight:900; } html[data-look="1"] .v3-num{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-top:6px; line-height:.84; } html[data-look="1"] .v3-num b{ font-family:var(--f-num); font-weight:900; font-size:108px; letter-spacing:-.045em; color:var(--txt); } html[data-look="1"] .v3-di{ font-size:24px; font-weight:900; color:var(--txt-2); } html[data-look="1"] .v3-sub{ margin-top:8px; font-size:12px; font-weight:700; letter-spacing:.3em; color:var(--txt-3); } html[data-look="1"] .v3-daily{ text-align:center; padding:14px 0 0; } html[data-look="1"] .v3-daily .cb-kick{ font-size:12px; font-weight:900; letter-spacing:.3em; color:var(--txt); } html[data-look="1"] .v3-daily .cb-title{ font-size:30px; font-weight:900; margin:8px 0 4px; } html[data-look="1"] .v3-daily .cb-lead, html[data-look="1"] .v3-daily .cb-mon{ font-size:13px; color:var(--txt-2); } html[data-look="1"] .v3-daily .cb-act{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; font-size:13px; font-weight:700; color:var(--txt-2); } html[data-look="1"] .dl-step{ background:none; border:0; padding:0; color:var(--txt-2); } html[data-look="1"] .dl-arr{ color:#4A4A4A; } html[data-look="1"] .v3-weight{ display:flex; align-items:center; gap:10px; width:min(100%,300px); height:54px; margin:12px auto 0; padding:0 24px; background:var(--paper); border-radius:999px; cursor:text; } html[data-look="1"] .v3-weight input{ flex:1; min-width:0; background:none; border:0; outline:none; text-align:center; color:var(--txt); font:900 28px/1 var(--f-num); letter-spacing:-.01em; } html[data-look="1"] .v3-weight input::placeholder{ color:#5E5E5E; font:700 16px var(--f-ui); letter-spacing:.06em; } html[data-look="1"] .v3-weight span{ color:var(--txt-3); font-size:13px; font-weight:700; } html[data-look="1"] .v3-btnwrap{ display:flex; justify-content:center; margin:18px 0 6px; } html[data-look="1"] .v3-btn{ width:180px; height:180px; border-radius:50%; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#1B1B1B; color:var(--txt); box-shadow:0 0 0 8px #131313, inset 0 0 0 2px #272727; transition:transform .15s cubic-bezier(.2,.8,.2,1), background .2s; } html[data-look="1"] .v3-btn:active{ transform:scale(.97); } html[data-look="1"] .v3-btn .bt{ font:900 26px/1.1 var(--f-ui); letter-spacing:.02em; } html[data-look="1"] .v3-btn .bs{ font:700 14px/1 var(--f-ui); letter-spacing:.14em; color:var(--txt-2); } html[data-look="1"] .v3-btn.on{ background:var(--acc); color:var(--on-acc); box-shadow:0 0 0 8px rgba(var(--acc-rgb),.16); } html[data-look="1"] .v3-btn.on .bs{ color:var(--on-acc); } html[data-look="1"] .v3-daily .dl-rest{ margin-top:6px; padding:6px 18px; background:none; border:0; color:var(--txt-2); font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#444; } html[data-look="1"] .v3-daily .dl-rest-on{ margin:18px auto 6px; max-width:280px; font-size:17px; font-weight:900; line-height:1.6; } /* 本週七天：白圈打勾、今天＝重點色外圈＋底線（照 6 號最下面那排） */ html[data-look="1"] .v3-first .c-week{ background:none; padding:14px 2px 0; border-radius:0; } html[data-look="1"] .v3-first .c-week .lab-row{ margin-bottom:12px; } html[data-look="1"] .v3-first .c-week .lab{ color:var(--txt); } html[data-look="1"] .v3-first .cells{ grid-template-columns:repeat(7,1fr); gap:0; } html[data-look="1"] .v3-first .cell{ position:relative; height:auto; aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; border-radius:0; padding:0; color:var(--txt-3); } html[data-look="1"] .v3-first .cell::before{ content:""; width:38px; height:38px; border-radius:50%; box-sizing:border-box; border:2px solid #2E2E2E; } html[data-look="1"] .v3-first .cell.done::before{ border-color:#EDEDED; background:#EDEDED url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3.2 3.2 6-7.6' fill='none' stroke='%23111' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat; } html[data-look="1"] .v3-first .cell.miss::before{ background:#181818; border-color:#181818; } html[data-look="1"] .v3-first .cell.rest::before{ border-style:dashed; border-color:#4A4A4A; } html[data-look="1"] .v3-first .cell .cm{ position:absolute; top:0; height:38px; line-height:38px; font-size:13px; font-weight:900; color:var(--txt-2); opacity:1; } html[data-look="1"] .v3-first .cell .cd{ font-size:11px; font-weight:700; } html[data-look="1"] .v3-first .cell.now::before{ box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--acc); } html[data-look="1"] .v3-first .cell.now .cd{ color:var(--txt); } html[data-look="1"] .v3-first .cell.now::after{ content:""; width:16px; height:3px; border-radius:2px; background:var(--acc); margin-top:-3px; } /* ===================================================================== ② 顏色＋造型：照 15、17 號（黑機殼、拉絲鋁板、螺絲、45 度斜切、燈縫） ===================================================================== */ /* 鋁板大數字：外圍 2px 凹槽（::before）＋鋁板面（::after），右上、左下斜切 */ html[data-look="2"] .v3-hero{ position:relative; isolation:isolate; margin-top:8px; padding:14px 18px 16px; text-align:left; } html[data-look="2"] .v3-hero::before{ content:""; position:absolute; inset:-2px; z-index:-2; background:var(--groove); clip-path:polygon(0 0, calc(100% - 19.17px) 0, 100% 19.17px, 100% 100%, 27.17px 100%, 0 calc(100% - 27.17px)); } html[data-look="2"] .v3-hero::after{ content:""; position:absolute; inset:0; z-index:-1; clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); background: linear-gradient(100deg, rgba(255,255,255,0) 8%, rgba(255,255,255,.30) 26%, rgba(255,255,255,0) 46%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.35 0 0 0 0 0.38 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='160' filter='url(%23b)' opacity='.2'/%3E%3C/svg%3E"), linear-gradient(180deg,#F4F5F7 0,#F4F5F7 1px,#DADDE0 1px,#C6CACF 100%); } html[data-look="2"] .v3-phase{ font-family:var(--f-num); font-size:11px; font-weight:600; letter-spacing:.22em; color:var(--alu-ink); padding-left:14px; } html[data-look="2"] .v3-phase b{ color:#131519; font-weight:700; } html[data-look="2"] .v3-win{ display:inline-block; margin-top:10px; padding:10px 16px 8px 12px; border-radius:2px; background:#07080A; box-shadow:inset 0 2px 0 #000, inset 0 0 0 1px #000, 0 -1px 0 #8F949B, 0 1px 0 #F4F5F7; } html[data-look="2"] .v3-num{ display:flex; align-items:baseline; gap:8px; line-height:.8; } html[data-look="2"] .v3-num b{ font-family:var(--f-num); font-weight:600; font-size:84px; letter-spacing:-.02em; color:var(--txt); font-variant-numeric:tabular-nums; } html[data-look="2"] .v3-di{ font-size:20px; font-weight:900; color:var(--txt-2); } html[data-look="2"] .v3-sub{ margin-top:10px; padding-left:14px; font-family:var(--f-num); font-size:11px; font-weight:600; letter-spacing:.3em; color:var(--alu-ink); } html[data-look="2"] .scr{ position:absolute; z-index:1; width:7px; height:7px; border-radius:50%; background: linear-gradient(45deg, transparent 42%, #26292E 42%, #26292E 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #26292E 42%, #26292E 58%, transparent 58%), radial-gradient(circle at 35% 30%, #F4F5F7 0%, #B9BDC3 50%, #72777E 100%); box-shadow:0 0 0 1px #72777E, 0 1px 0 1px #EEF0F3; } html[data-look="2"] .scr.s1{ left:8px; top:8px; } html[data-look="2"] .scr.s2{ right:11px; top:11px; } html[data-look="2"] .scr.s3{ left:16px; bottom:16px; } html[data-look="2"] .scr.s4{ right:8px; bottom:8px; } /* 燈縫：鋁板下緣凹槽裡一道重點色（光暈最多 2px） */ html[data-look="2"] .v3-led{ position:absolute; left:40px; right:34%; bottom:-2px; height:2px; background:var(--acc); box-shadow:0 0 2px rgba(var(--acc-rgb),.9); } /* 今天的一件事：黑色金屬板 */ html[data-look="2"] .v3-daily{ position:relative; isolation:isolate; margin-top:12px; padding:14px 16px 12px; text-align:center; } html[data-look="2"] .v3-daily::before{ content:""; position:absolute; inset:-2px; z-index:-2; background:var(--groove); clip-path:polygon(0 0, calc(100% - 21.17px) 0, 100% 21.17px, 100% 100%, 13.17px 100%, 0 calc(100% - 13.17px)); } html[data-look="2"] .v3-daily::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,var(--plate-hl) 0,var(--plate-hl) 1px,#1A1C1F 1px,#131519 80px); clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } html[data-look="2"] .v3-daily .cb-kick{ font-family:var(--f-num); font-size:11px; font-weight:600; letter-spacing:.3em; color:var(--txt-2); } html[data-look="2"] .v3-daily .cb-title{ font-size:28px; font-weight:900; margin:8px 0 4px; } html[data-look="2"] .v3-daily .cb-lead, html[data-look="2"] .v3-daily .cb-mon{ font-size:13px; color:var(--txt-2); } html[data-look="2"] .v3-daily .cb-act{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px; } html[data-look="2"] .dl-step{ padding:4px 9px; border-radius:1px; background:var(--well); border:1px solid var(--edge-hi); color:var(--txt-2); font-size:12px; font-weight:700; } html[data-look="2"] .dl-arr{ color:#62676E; font-size:12px; } html[data-look="2"] .v3-weight{ display:flex; align-items:center; gap:10px; width:min(100%,290px); height:50px; margin:12px auto 0; padding:0 18px; background:#07080A; border-radius:2px; cursor:text; box-shadow:inset 0 2px 0 #000, inset 0 0 0 1px #000, 0 -1px 0 var(--edge), 0 1px 0 #26292E; } html[data-look="2"] .v3-weight input{ flex:1; min-width:0; background:none; border:0; outline:none; text-align:center; color:var(--txt); font:600 28px/1 var(--f-num); } html[data-look="2"] .v3-weight input::placeholder{ color:#5C6168; font:700 15px var(--f-ui); letter-spacing:.08em; } html[data-look="2"] .v3-weight span{ color:var(--txt-3); font-size:12px; font-weight:700; } html[data-look="2"] .v3-btnwrap{ display:flex; justify-content:center; margin:16px 0 6px; } /* 大圓鈕：鉻金屬外環＋亮面黑鈕面；做到了＝鈕面亮起重點色 */ html[data-look="2"] .v3-btn{ width:176px; height:176px; border-radius:50%; padding:0; cursor:pointer; border:7px solid transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--txt); background: radial-gradient(circle at 50% 30%, #2A2D32 0%, #15171B 52%, #07080A 100%) padding-box, conic-gradient(from 210deg,#F4F5F7,#72777E 18%,#EEF0F3 32%,#4A4E54 50%,#DADDE0 66%,#72777E 82%,#F4F5F7) border-box; box-shadow:0 0 0 2px #040506, 0 12px 26px rgba(0,0,0,.6); transition:transform .15s cubic-bezier(.2,.8,.2,1); } html[data-look="2"] .v3-btn:active{ transform:translateY(1px) scale(.985); } html[data-look="2"] .v3-btn .bt{ font:900 25px/1.1 var(--f-ui); letter-spacing:.04em; } html[data-look="2"] .v3-btn .bs{ font:600 13px/1 var(--f-num); letter-spacing:.24em; color:var(--txt-2); } html[data-look="2"] .v3-btn.on{ color:var(--on-acc); background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 58%) padding-box, linear-gradient(var(--acc),var(--acc)) padding-box, conic-gradient(from 210deg,#F4F5F7,#72777E 18%,#EEF0F3 32%,#4A4E54 50%,#DADDE0 66%,#72777E 82%,#F4F5F7) border-box; } html[data-look="2"] .v3-btn.on .bs{ color:var(--on-acc); } html[data-look="2"] .v3-daily .dl-rest{ margin-top:8px; padding:6px 16px; background:var(--well); border:1px solid var(--edge-hi); border-radius:1px; color:var(--txt-2); font-size:12px; font-weight:700; letter-spacing:.1em; } html[data-look="2"] .v3-daily .dl-rest-on{ margin:18px auto 8px; max-width:280px; font-size:17px; font-weight:900; line-height:1.6; } /* 本週七天：七顆斜切鍵帽——做到＝鋁色亮起、今天＝下緣一道重點色燈縫 */ html[data-look="2"] .v3-first .c-week{ background:none; padding:16px 0 0; border-radius:0; } html[data-look="2"] .v3-first .c-week .lab{ font-family:var(--f-num); color:var(--txt-2); letter-spacing:.26em; } html[data-look="2"] .v3-first .c-week .lab-r{ font-family:var(--f-ui); color:var(--txt-3); } html[data-look="2"] .v3-first .cells{ gap:6px; padding:4px; background:var(--groove); border-radius:2px; } html[data-look="2"] .v3-first .cell{ position:relative; height:40px; aspect-ratio:auto; border:0; border-radius:0; color:var(--txt-3); background:linear-gradient(180deg,#26292E 0,#26292E 1px,#1A1C1F 1px,#131519 100%); clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px); } html[data-look="2"] .v3-first .cell .cd{ font-size:11px; font-weight:700; } html[data-look="2"] .v3-first .cell.done{ background:linear-gradient(180deg,#F4F5F7 0,#F4F5F7 1px,#DADDE0 1px,#B9BDC3 100%); color:var(--alu-ink); } html[data-look="2"] .v3-first .cell.miss{ background:var(--well); color:#4A4E54; } html[data-look="2"] .v3-first .cell.rest{ background:#0E0F12; color:var(--txt-2); } html[data-look="2"] .v3-first .cell .cm{ font-size:10px; font-weight:900; opacity:1; } html[data-look="2"] .v3-first .cell.now{ color:var(--txt); } html[data-look="2"] .v3-first .cell.now.done{ color:var(--alu-ink); } html[data-look="2"] .v3-first .cell.now::after{ content:""; position:absolute; left:8px; right:8px; bottom:3px; height:2px; background:var(--acc); box-shadow:0 0 2px rgba(var(--acc-rgb),.9); } /* 往下的卡片：黑色金屬板＋斜切（凹槽用外框線代替） */ html[data-look="2"] .v3-more .col{ border-radius:0; background:linear-gradient(180deg,#26292E 0,#26292E 1px,#1A1C1F 1px,#131519 80px); clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); box-shadow:inset 0 0 0 1px #1F2226 !important; } html[data-look="2"] .col-h h2{ letter-spacing:.06em; } html[data-look="2"] .col-h .meta{ font-family:var(--f-ui); } html[data-look="2"] .check .box{ border-radius:1px; } html[data-look="2"] .food-add-btn, html[data-look="2"] .all-done-btn, html[data-look="2"] .fsave{ border-radius:2px; background:#1A1C1F; border-color:#3A3E44; } html[data-look="2"] .tabbar{ background:#0A0B0D; border-top:2px solid var(--groove); box-shadow:inset 0 1px 0 #1A1C1F; } html[data-look="2"] .tab{ font-family:var(--f-ui); } html[data-look="2"] .tab i{ width:18px; height:2px; border-radius:0; } html[data-look="2"] .tab.on i{ box-shadow:0 0 2px rgba(var(--acc-rgb),.9); } html[data-look="2"] .testbar button{ border-radius:2px; background:#131519; border:1px solid #26292E; } /* 回來版／休息：舊版的紅框紅底拿掉（新版只靠標題字說「歡迎回來」，重點色不拿來當警示） */ html[data-look] .v3-daily.comeback{ border:0; background:none; padding-left:0; padding-right:0; } html[data-look="2"] .v3-daily.comeback{ padding:14px 16px 12px; } html[data-look] .v3-daily .cb-kick{ margin-bottom:0; } html[data-look] .v3-daily .cb-lead{ text-wrap:balance; margin-top:4px; } html[data-look] .v3-daily .dl-rest-on{ text-wrap:balance; } html[data-look] .comeback .cb-kick{ color:var(--txt); } html[data-look="2"] .comeback .cb-kick{ color:var(--txt-2); } /* ===================================================================== ③ 銀灰鋁板（2026-09-23 第 4 輪，家蔚：「6 是整體風格，但沒叫你照抄他的顏色，用銀灰鋁板試試」） 主體＝17 號那塊霧面銀白鋁板（中性灰、細顆粒、左上打光往右下沉）； 黑色零件＝17 號的黑模組（體重顯示窗、深蹲大圓鈕、做到的週圈、最下面分頁列）； 造型照 6 號：置中、粗大數字、大圓鈕、一排週圈圈（不拿 17 的螺絲／斜切／標註框）。 重點色只用在「今天／做到了」；做到了＝大圓鈕中心亮起來（照 17 號黑圓盤中間那團紅光）。 ===================================================================== */ html[data-look="3"]{ --bg:#D6D7D8; --paper:#ECEDEE; --paper-2:#F6F6F7; --line:rgba(0,0,0,.14); --line-soft:rgba(0,0,0,.08); --txt:#141517; --txt-2:#3A3D41; --txt-3:#46494D; --ink:#131415; --ink-2:#1D1E20; --ink-txt:#F3F3F4; --ink-txt-2:#9A9DA2; --ring:#9A9DA2; --acc-alu:#C81E25; /* 紅放在銀色上要深一階才看得清楚（對比 3.2，原紅只有 2.5） */ } /* 鋁板底：固定在畫面後面（往下滑不會跟著拉長變色） */ html[data-look="3"]{ background:#D6D7D8; } html[data-look="3"] body{ background:transparent; color:var(--txt); } html[data-look="3"] body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.10'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.9' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='300' height='120' filter='url(%23b)' opacity='.16'/%3E%3C/svg%3E"), radial-gradient(130% 75% at 28% -6%, #F4F4F5 0%, #E4E5E6 38%, #D2D3D5 72%, #C7C9CB 100%); } html[data-look="3"] .foot{ color:var(--txt-3); } /* 日期列：銀色小鈕（照 17 號那三顆銀鈕）；「今天」＝黑鈕 */ html[data-look="3"] .testbar button{ color:var(--txt-2); border:1px solid #AEB1B5; background:linear-gradient(180deg,#FAFAFA 0%,#DCDDDF 100%); box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.14); } html[data-look="3"] .testbar .today-btn{ color:var(--ink-txt); background:var(--ink); border-color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.25); } html[data-look="3"] .testbar .vd{ color:var(--txt); } /* 大數字：6 號的粗大字，壓在鋁板上（下緣一條亮邊＝刻上去的感覺） */ html[data-look="3"] .v3-hero .scr, html[data-look="3"] .v3-hero .v3-led{ display:none; } html[data-look="3"] .v3-hero{ text-align:center; padding:8px 0 0; } html[data-look="3"] .v3-phase{ font-size:11px; font-weight:700; letter-spacing:.26em; color:var(--txt-3); } html[data-look="3"] .v3-phase b{ color:var(--txt); font-weight:900; } html[data-look="3"] .v3-num{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-top:6px; line-height:.84; } html[data-look="3"] .v3-num b{ font-family:var(--f-num); font-weight:900; font-size:108px; letter-spacing:-.045em; color:var(--txt); text-shadow:0 1px 0 rgba(255,255,255,.75); } html[data-look="3"] .v3-di{ font-size:24px; font-weight:900; color:var(--txt-2); } html[data-look="3"] .v3-sub{ margin-top:8px; font-size:12px; font-weight:700; letter-spacing:.3em; color:var(--txt-3); } /* 今天的一件事 */ html[data-look="3"] .v3-daily{ text-align:center; padding:14px 0 0; } html[data-look="3"] .v3-daily .cb-kick{ font-size:12px; font-weight:900; letter-spacing:.3em; color:var(--txt); } html[data-look="3"] .v3-daily .cb-title{ font-size:30px; font-weight:900; margin:8px 0 4px; color:var(--txt); } html[data-look="3"] .v3-daily .cb-lead, html[data-look="3"] .v3-daily .cb-mon{ font-size:13px; color:var(--txt-2); } html[data-look="3"] .v3-daily .cb-act{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; font-size:13px; font-weight:700; color:var(--txt-2); } html[data-look="3"] .dl-step{ background:none; border:0; padding:0; color:var(--txt-2); } html[data-look="3"] .dl-arr{ color:#8C8F94; } /* 體重格＝嵌在鋁板裡的黑色顯示窗（17 號的黑模組：圓角＋內側一圈細亮線） */ html[data-look="3"] .v3-weight{ display:flex; align-items:center; gap:10px; width:min(100%,300px); height:56px; margin:12px auto 0; padding:0 24px; border-radius:16px; cursor:text; background:var(--ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 2px 6px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8), 0 -1px 0 rgba(0,0,0,.12); } html[data-look="3"] .v3-weight input{ flex:1; min-width:0; background:none; border:0; outline:none; text-align:center; color:var(--ink-txt); font:900 28px/1 var(--f-num); letter-spacing:-.01em; caret-color:var(--acc); } html[data-look="3"] .v3-weight input::placeholder{ color:var(--ink-txt-2); font:700 16px var(--f-ui); letter-spacing:.06em; } html[data-look="3"] .v3-weight span{ color:var(--ink-txt-2); font-size:13px; font-weight:700; } /* 深蹲大圓鈕＝17 號左下那顆黑圓盤：黑盤面＋內側一圈細線；做到了＝中心亮起重點色、光暈微微灑到鋁板上 */ html[data-look="3"] .v3-btnwrap{ display:flex; justify-content:center; margin:20px 0 8px; } html[data-look="3"] .v3-btn{ width:184px; height:184px; border-radius:50%; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--ink-txt); background:radial-gradient(circle at 50% 38%, #2B2C2F 0%, #17181A 58%, #0E0F10 100%); box-shadow:inset 0 0 0 12px #0E0F10, inset 0 0 0 13px rgba(255,255,255,.16), 0 0 0 1px rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.22), 0 14px 26px -6px rgba(0,0,0,.38); transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .3s; } html[data-look="3"] .v3-btn:active{ transform:scale(.97); } html[data-look="3"] .v3-btn .bt{ font:900 26px/1.1 var(--f-ui); letter-spacing:.02em; } html[data-look="3"] .v3-btn .bs{ font:700 14px/1 var(--f-ui); letter-spacing:.14em; color:var(--ink-txt-2); } html[data-look="3"] .v3-btn.on{ color:#fff; background:radial-gradient(circle at 50% 50%, rgba(var(--acc-rgb),1) 0%, rgba(var(--acc-rgb),.92) 30%, rgba(var(--acc-rgb),.45) 56%, #121314 80%); box-shadow:inset 0 0 0 12px #0E0F10, inset 0 0 0 13px rgba(255,255,255,.16), 0 0 0 1px rgba(0,0,0,.35), 0 2px 3px rgba(0,0,0,.22), 0 14px 26px -6px rgba(0,0,0,.38), 0 0 34px rgba(var(--acc-rgb),.38); } html[data-look="3"] .v3-btn.on .bs{ color:#fff; } html[data-look="3"] .v3-daily .dl-rest{ margin-top:6px; padding:6px 18px; background:none; border:0; color:var(--txt-2); font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#8C8F94; } html[data-look="3"] .v3-daily .dl-rest-on{ margin:18px auto 6px; max-width:280px; font-size:17px; font-weight:900; line-height:1.6; color:var(--txt); } /* 本週七天：銀色圓鈕一排；做到＝黑鈕白勾；今天＝重點色外圈＋底線（6 號最下面那排的排法） */ html[data-look="3"] .v3-first .c-week{ background:none; box-shadow:none; padding:14px 2px 0; border-radius:0; } html[data-look="3"] .v3-first .c-week .lab-row{ margin-bottom:12px; } html[data-look="3"] .v3-first .c-week .lab{ color:var(--txt); } html[data-look="3"] .v3-first .c-week .lab-r{ color:var(--txt-3); } html[data-look="3"] .v3-first .cells{ grid-template-columns:repeat(7,1fr); gap:0; } html[data-look="3"] .v3-first .cell{ position:relative; height:auto; aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; border-radius:0; padding:0; color:var(--txt-3); } html[data-look="3"] .v3-first .cell::before{ content:""; width:38px; height:38px; border-radius:50%; box-sizing:border-box; border:1px solid #A7AAAE; background:linear-gradient(180deg,#FBFBFB 0%,#D5D6D8 100%); box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.16); } html[data-look="3"] .v3-first .cell.done::before{ border-color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.25); background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3.2 3.2 6-7.6' fill='none' stroke='%23F3F3F4' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat; } html[data-look="3"] .v3-first .cell.miss::before{ background:#C3C5C8; border-color:#B4B7BB; box-shadow:inset 0 1px 3px rgba(0,0,0,.18); } html[data-look="3"] .v3-first .cell.rest::before{ background:transparent; border:1.5px dashed #7F8287; box-shadow:none; } html[data-look="3"] .v3-first .cell .cm{ position:absolute; top:0; height:38px; line-height:38px; font-size:13px; font-weight:900; color:var(--txt-2); opacity:1; } html[data-look="3"] .v3-first .cell .cd{ font-size:11px; font-weight:700; } html[data-look="3"] .v3-first .cell.now::before{ outline:2px solid var(--acc-alu); outline-offset:3px; } html[data-look="3"] .v3-first .cell.now .cd{ color:var(--txt); } html[data-look="3"] .v3-first .cell.now::after{ content:""; width:16px; height:3px; border-radius:2px; background:var(--acc-alu); margin-top:-3px; } html[data-look="3"] .v3-note{ color:var(--txt-3); } /* 最下面分頁列＝17 號最上面那條黑模組 */ html[data-look="3"] .tabbar{ background:var(--ink); border-top:0; border-radius:20px 20px 0 0; box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 -6px 20px rgba(0,0,0,.14); } html[data-look="3"] .tab{ color:#8C8F94; } html[data-look="3"] .tab.on{ color:var(--ink-txt); } /* 往下滑的卡片：亮一階的鋁板（上緣一條亮邊＋往下的柔和陰影） */ html[data-look="3"] .col, html[data-look="3"] .fallback{ background:linear-gradient(180deg,#F4F4F5 0%,#E7E8E9 100%); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08), 0 10px 22px -10px rgba(0,0,0,.22); } html[data-look="3"] .fallback .ft{ color:var(--txt-2); } html[data-look="3"] .bar{ background:#C9CBCE; } html[data-look="3"] .bar i{ background:var(--ink); } html[data-look="3"] .check .box{ border-color:#8E9196; background:#FAFAFA; } html[data-look="3"] .done-badge{ color:var(--txt); border-color:var(--acc); } /* 卡片裡的按鈕與輸入格：按鈕＝銀色凸鈕、輸入格＝白色凹槽 */ html[data-look="3"] .food-add-btn, html[data-look="3"] .all-done-btn, html[data-look="3"] .fsave, html[data-look="3"] .set-btn, html[data-look="3"] .login-btn, html[data-look="3"] .fchip, html[data-look="3"] .madd{ color:var(--txt); border:1px solid #AEB1B5; background:linear-gradient(180deg,#FAFAFA 0%,#DCDDDF 100%); box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.14); } html[data-look="3"] .fcancel, html[data-look="3"] .fmode{ color:var(--txt-2); border:1px solid #AEB1B5; background:transparent; } html[data-look="3"] .fmode.on, html[data-look="3"] .rd.on{ background:var(--ink); border-color:var(--ink); color:var(--ink-txt); } html[data-look="3"] .input, html[data-look="3"] .food-form input, html[data-look="3"] .set-input, html[data-look="3"] .login-input, html[data-look="3"] .rd{ background:#FBFBFB; color:var(--txt); border:1px solid #A9ACB0; box-shadow:inset 0 1px 2px rgba(0,0,0,.08); } html[data-look="3"] ::selection{ background:rgba(var(--acc-rgb),.28); } /* 黃色版：黃在銀色上看不清楚 → 黃只放在黑色零件上（大圓鈕、分頁列），銀色上的「今天」外圈改黑圈＋黃底線 */ html[data-look="3"][data-acc="y"]{ --acc-alu:var(--ink); } html[data-look="3"][data-acc="y"] .v3-first .cell.now::after{ background:var(--acc); box-shadow:0 0 0 1px var(--ink); } html[data-look="3"][data-acc="y"] .v3-btn.on{ color:#111; } html[data-look="3"][data-acc="y"] .v3-btn.on .bs{ color:#111; }