/* button font-family（_tokens.css 不涵蓋 button reset） */ button{font-family:inherit} /* Page layout vars（design token 已抽到 _tokens.css） */ :root{--sidebar-w:220px} @media(max-width:768px){:root{--sidebar-w:0px}} body{min-height:100vh;overflow:hidden} @media(max-width:768px){body{overflow:auto}} /* ── Layout ── */ .dash-wrap{position:fixed;inset:0;z-index:1;display:grid;grid-template-columns:var(--sidebar-w) 1fr;background:var(--bg);overflow:hidden} .dash-sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border-dim);display:flex;flex-direction:column;overflow:hidden;height:100vh} .dash-main{display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0} .dash-content{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0} .dash-content::-webkit-scrollbar{width:4px} .dash-content::-webkit-scrollbar-track{background:transparent} .dash-content::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:2px} .dash-content::-webkit-scrollbar-thumb:hover{background:var(--border-bright)} /* .sb-* / .m-* mobile topbar / overlay 已集中至 _components.css */ @media(max-width:768px){ .dash-wrap{position:relative;display:block;height:auto;min-height:100svh;overflow:visible} .dash-sidebar{display:none} .dash-main{display:block;height:auto;overflow:visible} .dash-content{overflow:visible;height:auto;background:var(--bg);padding-top:52px;padding-bottom:2rem;min-height:100svh} } /* ── Login page styles ── */ .login-center{min-height:100%;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem} .login-wrap{width:100%;max-width:420px} .lp-logo-wrap{text-align:center;margin-bottom:1.75rem} .lp-logo-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:var(--accent-dim);border:1px solid rgba(123,108,255,.2);margin-bottom:.85rem} .lp-logo-icon svg{width:26px;height:26px;color:var(--accent)} .lp-title{font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:.25rem} .lp-subtitle{font-size:.875rem;color:var(--text-muted)} .tab-bar{display:flex;border-radius:12px;background:var(--bg-surface);border:1px solid var(--border-dim);padding:4px;margin-bottom:1.25rem} .tab-btn{flex:1;padding:.5rem;border-radius:8px;font-size:.875rem;font-weight:500;text-align:center;cursor:pointer;border:none;background:none;color:var(--text-muted);transition:background .18s ease,color .18s ease} .tab-btn.active{background:var(--accent);color:#fff} .card{background:var(--bg-surface);border:1px solid var(--border-dim);border-radius:16px;padding:1.75rem;box-shadow:0 4px 24px rgba(0,0,0,.1)} .panel{display:none} .panel.active{display:block;animation:panelIn .32s ease forwards} @keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .msg-box{display:none;margin-bottom:1.25rem;padding:.7rem 1rem;border-radius:10px;font-size:.875rem;font-weight:500;border:1px solid} .msg-error{color:#f87171;background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25)} .msg-success{color:#4ade80;background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.25)} .field-wrap{margin-bottom:.875rem} .field-label{display:block;font-size:.75rem;font-weight:500;color:var(--text-muted);margin-bottom:.4rem} .field-label span{color:var(--text-dim);font-weight:400} .field-hint{font-size:.7rem;color:var(--text-dim);line-height:1.5;margin:-.15rem 0 .45rem} .field-hint.msg-center{text-align:center;margin-top:8px} /* .ios-wait-hint — Turnstile 載入時 iOS/Android 主執行緒都會卡，提示使用者等驗證完成後再輸入。 預設 display:none，由 inline script 在 iOS 打 html.is-ios，或 pointer:coarse 觸控裝置（Android 手機/平板）顯示。 註：Turnstile widget 本身的 .ts-wrap / .ts-hint 樣式在 _components.css。 */ .ios-wait-hint{display:none;font-size:.75rem;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(123,108,255,.22);border-radius:8px;padding:.5rem .75rem;margin:0 0 1rem;text-align:center;line-height:1.4} html.is-ios .ios-wait-hint{display:block} @media(pointer:coarse){.ios-wait-hint{display:block}} .field-input{width:100%;padding:.72rem 1rem;border-radius:10px;background:var(--bg);border:1px solid var(--border-mid);color:var(--text);font-size:.875rem;font-family:var(--font-sans);outline:none;transition:border-color .18s ease,box-shadow .18s ease} .field-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)} .field-input::placeholder{color:var(--text-dim)} .field-input-wrap{position:relative} .field-input-wrap .field-input{padding-right:2.75rem} input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--bg) inset!important;-webkit-text-fill-color:var(--text)!important} .eye-btn{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-dim);padding:.25rem;display:flex;align-items:center;transition:color .18s ease} .eye-btn:hover,.eye-btn.eye-active{color:var(--accent)} .eye-btn svg{width:18px;height:18px} .submit-btn{width:100%;margin-top:1.25rem;padding:.78rem;border-radius:10px;background:var(--accent);color:#fff;font-size:.875rem;font-weight:600;border:none;cursor:pointer;transition:filter .18s ease,transform .18s ease} .submit-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} .submit-btn:active{transform:scale(.98)} .submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;filter:none!important} .forgot-link{display:block;text-align:right;margin-top:.4rem;font-size:.75rem;color:var(--text-dim);transition:color .18s ease} .forgot-link:hover{color:var(--accent)} .divider{display:flex;align-items:center;gap:.75rem;margin:1.1rem 0} .divider-line{flex:1;height:1px;background:var(--border-dim)} .divider-text{font-size:.75rem;color:var(--text-dim)} .oauth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem} @media(max-width:768px){.oauth-grid{grid-template-columns:repeat(2,1fr)}} .oauth-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.62rem .5rem;border-radius:10px;font-size:.813rem;font-weight:500;text-decoration:none;border:1px solid;transition:filter .18s ease,transform .18s ease} .oauth-btn:hover{filter:brightness(1.12);transform:translateY(-1px)} .oauth-btn svg{width:16px;height:16px;flex-shrink:0} .oauth-discord{background:rgba(88,101,242,.10);border-color:rgba(88,101,242,.25);color:#7289da} .oauth-google{background:var(--hover-overlay);border-color:var(--border);color:var(--text-muted)} .oauth-line{background:rgba(0,185,0,.10);border-color:rgba(0,185,0,.25);color:#06c755} .oauth-facebook{background:rgba(24,119,242,.10);border-color:rgba(24,119,242,.25);color:#1877F2} /* Phase D-3c：passkey login 按鈕 — full-width 但高度與 OAuth grid 同調 */ .passkey-btn{width:100%;cursor:pointer;font-size:.813rem;padding:.62rem .5rem;background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.30);color:#a78bfa;margin-bottom:.5rem} .passkey-btn:hover{filter:brightness(1.12);transform:translateY(-1px)} .passkey-btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .passkey-btn svg{width:16px;height:16px} .notice-text{font-size:.75rem;color:var(--text-dim);text-align:center;margin-top:.85rem} .pkce-notice{display:none;text-align:center;font-size:.75rem;color:#f59e0b;margin-top:1rem;border:1px solid rgba(245,158,11,.2);border-radius:10px;padding:.625rem 1rem;background:rgba(245,158,11,.05)} .totp-icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent-dim);border:1px solid rgba(123,108,255,.2);margin-bottom:.75rem} .totp-icon-wrap svg{width:22px;height:22px;color:var(--accent)} .totp-center{text-align:center;margin-bottom:1.25rem} .totp-desc{font-size:.875rem;color:var(--text-muted);line-height:1.65} .totp-input{text-align:center;letter-spacing:.18em} .totp-back-btn{margin-top:.625rem;width:100%;padding:.5rem;background:none;border:none;cursor:pointer;font-size:.75rem;color:var(--text-dim);transition:color .18s ease} .totp-back-btn:hover{color:var(--text-muted)} /* notice banner (before card) */ .pre-notice{font-size:.875rem;font-weight:500;padding:.7rem 1rem;border-radius:10px;border:1px solid;margin-bottom:1rem} /* .m-ov-lang-* / .m-top-lang-drop 已集中至 _components.css */ .notice-text-spaced { margin-top: 1.5rem; }