/* ============================================================ Neuraphic Accounts — Global Styles ============================================================ */ /* --- Brand tokens --- Pearl gray #f0f1f3 + rich black #131314 are canonical per brand memory. All secondary/muted/border/state colors are defined as tokens so WCAG AA contrast is enforced at a single source of truth. */ :root { --color-bg: #f0f1f3; --color-fg: #131314; /* 60% black on pearl gray = ~5.1:1 contrast (passes WCAG AA normal text). */ --color-text-muted: rgba(19,19,20,0.62); /* 55% black — for non-essential metadata lines. */ --color-text-subtle: rgba(19,19,20,0.55); --color-border: rgba(19,19,20,0.12); --color-border-subtle: rgba(19,19,20,0.06); --color-surface: #ffffff; /* Semantic state tokens — rich accents, AA-compliant on pearl gray. */ --color-danger: #b42318; --color-danger-soft: rgba(180,35,24,0.08); --color-success: #0f7a3a; --color-success-soft: rgba(15,122,58,0.08); --color-warning: #9a5b00; --color-warning-soft: rgba(154,91,0,0.08); } /* --- Self-hosted variable fonts --- Phase 8 removed the Google Fonts CDN for privacy and supply-chain reasons. Both Inter and Space Grotesk are variable fonts: a single WOFF2 covers the full weight range (100-900 for Inter, 300-700 for Space Grotesk). The font-weight: X Y declaration tells the browser the supported range and the font picks the right axis position for any specific weight. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-variable.woff2') format('woff2-variations'), url('../fonts/inter-variable.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/space-grotesk-variable.woff2') format('woff2-variations'), url('../fonts/space-grotesk-variable.woff2') format('woff2'); } /* --- Skip-to-content link (a11y) --- */ .skip-link { position: absolute; top: -40px; left: 8px; background: var(--color-fg); color: var(--color-bg); padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 10000; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 8px; outline: 2px solid var(--color-fg); outline-offset: 2px; } /* --- Visible focus ring on every interactive element --- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, details summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; border-radius: 4px; } /* --- Respect reduced-motion preference --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- Fallback for auth.js visibility gate --- /account/* pages use as an anti-flicker gate that auth.js clears once user data loads. If JS fails or is disabled, reveal the page after 5 seconds so users never see a permanently blank tab. */ html.acct-loading body { visibility: hidden; } @keyframes _acct_reveal { to { visibility: visible; } } body[style*="visibility:hidden"] { animation: _acct_reveal 0s linear 5s forwards; } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ::selection { background: #131314; color: #f0f1f3; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; color: #131314; background: #f0f1f3; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.2; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } input, select, button, textarea { font-family: inherit; font-size: inherit; } /* --- Nav Bar --- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; padding: 0 clamp(24px, 4vw, 48px); background: rgba(240, 241, 243, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; border-bottom: 1px solid rgba(19, 19, 20, 0.06); } .nav-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.08em; color: #131314; } .nav-links { display: flex; align-items: center; gap: 0; margin-left: auto; } .nav-links a { font-size: 15px; font-weight: 500; color: #131314; padding: 10px 20px; transition: opacity 0.2s; } .nav-links a:hover { opacity: 0.6; } .nav-cta { font-size: 14px; font-weight: 500; color: #f0f1f3; margin-left: 8px; background: #131314; padding: 10px 24px; border-radius: 8px; transition: opacity 0.2s; } .nav-cta:hover { opacity: 0.85; } /* --- Split Layout (Sign In) --- */ .auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding-top: 80px; } .auth-split-left { display: flex; align-items: center; justify-content: center; padding: 120px 60px 80px; } .auth-split-right { background: #131314; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-top: -80px; padding-top: 80px; } .auth-split-right svg { width: 80%; max-width: 480px; opacity: 0.9; } .auth-form-wrapper { width: 100%; max-width: 400px; } .auth-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.1em; color: #131314; margin-bottom: 40px; } .auth-title { font-size: 1.75rem; margin-bottom: 8px; color: #131314; } .auth-subtitle { font-size: 0.95rem; color: #6b7280; margin-bottom: 36px; font-weight: 400; } /* --- Centered Card Layout (Signup, Recovery) --- */ .auth-centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 24px 80px; } .auth-card { width: 100%; max-width: 480px; background: #fff; border-radius: 16px; padding: 48px 40px; box-shadow: 0 1px 3px rgba(19, 19, 20, 0.06), 0 8px 24px rgba(19, 19, 20, 0.04); } .auth-card .auth-logo { text-align: center; } .auth-card .auth-title { text-align: center; } .auth-card .auth-subtitle { text-align: center; } /* --- Form Elements --- */ .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 0.85rem; font-weight: 500; color: #131314; margin-bottom: 6px; } .form-input { width: 100%; height: 48px; padding: 0 16px; background: #fff; border: 1px solid #dadce0; border-radius: 12px; font-size: 0.95rem; color: #131314; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .form-input:focus { border-color: #131314; box-shadow: 0 0 0 1px #131314; } .form-input::placeholder { color: #9ca3af; } .form-input.error { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-select { width: 100%; height: 48px; padding: 0 16px; background: #fff; border: 1px solid #dadce0; border-radius: 12px; font-size: 0.95rem; color: #131314; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .form-select:focus { border-color: #131314; box-shadow: 0 0 0 1px #131314; } /* --- Buttons --- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; background: #131314; color: #f0f1f3; font-size: 0.95rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .btn-primary:hover { opacity: 0.88; } .btn-primary:active { transform: scale(0.985); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; background: transparent; color: #131314; font-size: 0.95rem; font-weight: 600; border: 1px solid #dadce0; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .btn-secondary:hover { background: rgba(19, 19, 20, 0.04); } /* --- Email Chip --- */ .email-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; background: rgba(19, 19, 20, 0.05); border-radius: 20px; margin-bottom: 24px; font-size: 0.85rem; color: #131314; } .email-chip-avatar { width: 26px; height: 26px; border-radius: 50%; background: #131314; color: #f0f1f3; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; } /* --- Show Password Toggle --- */ .password-wrapper { position: relative; } .password-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #6b7280; display: flex; align-items: center; padding: 4px; transition: color 0.2s; } .password-toggle:hover { color: #131314; } .password-toggle svg { width: 20px; height: 20px; } /* --- Alert Messages --- */ .alert { padding: 12px 16px; border-radius: 10px; font-size: 0.875rem; margin-bottom: 20px; display: none; } .alert.show { display: block; } .alert-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; } .alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; } /* --- Terms Checkbox --- */ .terms-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; } .terms-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: #131314; cursor: pointer; flex-shrink: 0; } .terms-check label { font-size: 0.84rem; color: #6b7280; line-height: 1.5; cursor: pointer; } .terms-check label a { color: #131314; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; } /* --- Auth Links & Legal --- */ .auth-links { margin-top: 24px; text-align: center; } .auth-links a { font-size: 0.875rem; font-weight: 500; color: #131314; text-decoration: underline; text-underline-offset: 2px; } .auth-legal { margin-top: 32px; font-size: 0.78rem; color: #9ca3af; line-height: 1.6; } .auth-legal a { color: #6b7280; text-decoration: underline; text-underline-offset: 2px; } /* --- Step Dots --- */ .step-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; } .step-dot { width: 8px; height: 8px; border-radius: 50%; background: #dadce0; transition: background 0.3s, transform 0.3s; } .step-dot.active { background: #131314; transform: scale(1.25); } /* --- Step Transitions --- */ .auth-step { display: none; animation: fadeSlideIn 0.35s ease forwards; } .auth-step.active { display: block; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --- Success State --- */ .success-icon { width: 56px; height: 56px; margin: 0 auto 20px; background: #f0fdf4; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .success-icon svg { width: 28px; height: 28px; color: #16a34a; } /* --- Forgot Password Link --- */ .forgot-link { display: inline-block; margin-top: 12px; font-size: 0.875rem; color: #6b7280; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; } .forgot-link:hover { color: #131314; } /* ============================================================ Recovery Methods ============================================================ */ .recovery-methods { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; } .recovery-method { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; border: 1px solid #dadce0; border-radius: 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s; text-align: left; width: 100%; font-family: inherit; font-size: inherit; } .recovery-method:hover { border-color: #131314; background: rgba(19,19,20,0.02); } .recovery-method-icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(19,19,20,0.04); border-radius: 10px; color: #131314; } .recovery-method-text { display: flex; flex-direction: column; gap: 2px; } .recovery-method-text strong { font-size: 15px; color: #131314; } .recovery-method-text span { font-size: 13px; color: #6b7280; } /* Code expiry timer */ .auth-code-expiry { font-size: 13px; color: #6b7280; margin-top: 8px; margin-bottom: 16px; transition: color 0.2s; } .auth-code-expiry strong { font-family: 'Space Grotesk', monospace; font-weight: 600; } /* Success icon */ .success-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: #f0fdf4; border-radius: 50%; margin: 0 auto 24px; color: #16a34a; } .success-icon svg { width: 28px; height: 28px; } /* ============================================================ 2FA & Device Verification ============================================================ */ .auth-2fa-options { margin-top: 8px; } .auth-2fa-option { display: block; font-size: 14px; color: #131314; font-weight: 500; padding: 12px 0; border-top: 1px solid rgba(19,19,20,0.06); transition: padding-left 0.2s; } .auth-2fa-option:hover { padding-left: 6px; } .auth-device-info { background: #fff; border: 1px solid #dadce0; border-radius: 12px; padding: 20px; margin-bottom: 24px; } .auth-device-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; } .auth-device-row:not(:last-child) { border-bottom: 1px solid rgba(19,19,20,0.04); } .auth-device-label { color: #6b7280; } .auth-device-value { color: #131314; font-weight: 500; } /* ============================================================ Footer (same as neuraphic.com) ============================================================ */ .footer { background: #131314; padding: clamp(64px, 8vh, 100px) 0 clamp(32px, 4vh, 48px); } .footer .wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 48px); } .footer__main { display: grid; grid-template-columns: 160px repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); margin-bottom: clamp(48px, 6vh, 80px); } .footer__brand-col { display: flex; flex-direction: column; align-items: flex-start } .footer__logo { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; color: #f0f1f3; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } .footer__col h5 { font-size: 13px; font-weight: 600; color: #f0f1f3; margin-bottom: 16px } .footer__col-sep { margin-top: 28px } .footer__col a { display: block; font-size: 13px; color: #6b7280; padding: 4px 0; transition: color .2s; line-height: 1.6; text-decoration: none; } .footer__col a:hover { color: #f0f1f3 } .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: clamp(24px, 3vh, 36px); border-top: 1px solid rgba(255,255,255,0.06); gap: 16px; flex-wrap: wrap; } .footer__social { display: flex; gap: 18px } .footer__social a { color: #6b7280; transition: color .2s; text-decoration: none } .footer__social a:hover { color: #f0f1f3 } .footer__copy { font-size: 12px; color: #6b7280 } /* ============================================================ Account Panel (authenticated pages) ============================================================ */ /* Header */ .acct-header { display: flex; align-items: center; padding: 16px clamp(20px, 3vw, 32px); border-bottom: 1px solid rgba(19,19,20,0.06); background: #fff; position: sticky; top: 0; z-index: 100; } .acct-header-brand { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: #131314; letter-spacing: -0.02em; margin-right: auto; } .acct-header-right { margin-left: auto; } .acct-avatar-wrap { position: relative; } .acct-header-avatar { width: 36px; height: 36px; border-radius: 50%; background: #131314; color: #f0f1f3; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; cursor: pointer; border: none; font-family: 'Inter', sans-serif; } .acct-avatar-menu { display: none; position: absolute; top: 44px; right: 0; background: #fff; border: 1px solid rgba(19,19,20,0.08); border-radius: 12px; box-shadow: 0 4px 24px rgba(19,19,20,0.1); min-width: 240px; z-index: 200; overflow: hidden; } .acct-avatar-menu.open { display: block; } .acct-avatar-menu-info { padding: 16px 20px; border-bottom: 1px solid rgba(19,19,20,0.06); } .acct-avatar-menu-info strong { display: block; font-size: 14px; color: #131314; } .acct-avatar-menu-info span { font-size: 13px; color: #6b7280; } .acct-avatar-menu-signout { display: block; padding: 12px 20px; font-size: 14px; font-weight: 500; color: #dc2626; transition: background 0.15s; } .acct-avatar-menu-signout:hover { background: rgba(220,38,38,0.04); } /* Body: sidebar + main */ .acct-body { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 65px); padding-bottom: 48px; } /* Sidebar */ .acct-sidebar { border-right: 1px solid rgba(19,19,20,0.06); padding: 20px 0; position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; } .acct-nav { display: flex; align-items: center; gap: 14px; padding: 11px 20px 11px 24px; font-size: 13.5px; font-weight: 500; color: #6b7280; transition: all 0.15s; border-radius: 0 28px 28px 0; margin-right: 12px; letter-spacing: 0.01em; } .acct-nav:hover { background: rgba(19,19,20,0.04); color: #131314; } .acct-nav.active { background: rgba(19,19,20,0.07); color: #131314; font-weight: 600; } .acct-nav svg { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.45; transition: opacity 0.15s; } .acct-nav:hover svg { opacity: 0.7; } .acct-nav.active svg { opacity: 1; } /* Main content */ .acct-main { padding: clamp(24px, 4vw, 48px); max-width: 800px; } .acct-page-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: #131314; margin-bottom: 4px; } .acct-page-header p { font-size: 14px; color: #6b7280; margin-bottom: 32px; } /* Welcome */ .acct-welcome { margin-bottom: 32px; } .acct-welcome h1 { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: #131314; margin-bottom: 4px; } .acct-welcome p { font-size: 14px; color: #6b7280; } /* Cards */ .acct-card { background: #fff; border: 1px solid rgba(19,19,20,0.06); border-radius: 12px; padding: 24px; margin-bottom: 16px; } .acct-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: #131314; margin-bottom: 16px; } /* Card rows */ .acct-card-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(19,19,20,0.04); gap: 16px; } .acct-card-row:last-child { border-bottom: none; } .acct-card-label { font-size: 13px; color: #6b7280; display: block; } .acct-card-value { font-size: 14px; font-weight: 500; color: #131314; display: block; } /* Card grid */ .acct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .acct-grid .acct-card { margin-bottom: 0; transition: border-color 0.2s; } .acct-grid .acct-card:hover { border-color: rgba(19,19,20,0.15); } /* Buttons */ .acct-btn { font-size: 13px; font-weight: 500; color: #131314; padding: 8px 16px; border: 1px solid rgba(19,19,20,0.15); border-radius: 8px; background: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; font-family: 'Inter', sans-serif; } .acct-btn:hover { background: rgba(19,19,20,0.03); border-color: rgba(19,19,20,0.3); } .acct-btn-danger { color: #dc2626; border-color: rgba(220,38,38,0.2); } .acct-btn-danger:hover { background: rgba(220,38,38,0.04); border-color: rgba(220,38,38,0.4); } /* Badges */ .acct-badge-success { color: #16a34a; font-weight: 600; } .acct-badge-active { font-size: 12px; font-weight: 500; color: #16a34a; background: rgba(22,163,74,0.08); padding: 4px 10px; border-radius: 20px; } .acct-badge-inactive { font-size: 12px; font-weight: 500; color: #6b7280; background: rgba(19,19,20,0.05); padding: 4px 10px; border-radius: 20px; } /* Mini footer (Privacy, Terms, Help, About) */ .acct-mini-footer { display: flex; justify-content: center; gap: 24px; padding: 12px 20px; font-size: 12px; color: #9ca3af; background: #f0f1f3; border-top: 1px solid rgba(19,19,20,0.06); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; } .acct-mini-footer a { color: #9ca3af; transition: color 0.15s; } .acct-mini-footer a:hover { color: #6b7280; } /* Security status card */ .acct-security-status { display: flex; align-items: center; gap: 20px; padding: 20px 24px; } .acct-security-status svg { flex-shrink: 0; } .acct-security-status strong { display: block; font-size: 15px; color: #131314; margin-bottom: 2px; } .acct-security-status p { font-size: 13px; color: #6b7280; margin: 0; } /* Link cards (home page quick links) */ .acct-link-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #fff; border: 1px solid rgba(19,19,20,0.06); border-radius: 12px; transition: border-color 0.2s, box-shadow 0.2s; color: inherit; } .acct-link-card:hover { border-color: rgba(19,19,20,0.15); box-shadow: 0 2px 8px rgba(19,19,20,0.04); } .acct-link-card svg { color: #131314; opacity: 0.7; } .acct-link-card strong { font-size: 15px; color: #131314; } .acct-link-card p { font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0; } /* Forms inside account panel */ .acct-form-group { margin-bottom: 20px; } .acct-form-label { display: block; font-size: 13px; font-weight: 500; color: #131314; margin-bottom: 6px; } .acct-form-input { width: 100%; padding: 12px 16px; font-size: 16px; font-family: 'Inter', sans-serif; color: #131314; background: #fff; border: 1px solid #dadce0; border-radius: 8px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .acct-form-input:focus { border-color: #131314; box-shadow: 0 0 0 3px rgba(19,19,20,0.12); } .acct-form-input:focus-visible { border-color: #131314; box-shadow: 0 0 0 3px rgba(19,19,20,0.18); } .acct-nav:focus-visible, .acct-btn:focus-visible, .acct-btn-primary:focus-visible, .acct-btn-danger:focus-visible { outline: 2px solid #131314; outline-offset: 2px; } /* FOUC spinner — shown on html element so body's visibility:hidden doesn't suppress it. Scoped to .acct-loading so it only appears on pages where auth.js opts in. */ @keyframes acct-spin { to { transform: rotate(360deg); } } html.acct-loading::before { content: ''; position: fixed; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 3px solid rgba(19,19,20,0.12); border-top-color: #131314; border-radius: 50%; animation: acct-spin 0.8s linear infinite; z-index: 99999; pointer-events: none; } .acct-form-input::placeholder { color: #9ca3af; } .acct-form-actions { margin-top: 24px; } .acct-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; color: #f0f1f3; background: #131314; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s; } .acct-btn-primary:hover { background: #2a2a2e; } /* Strength meter */ .acct-strength-meter { height: 4px; background: #dadce0; border-radius: 2px; overflow: hidden; margin-bottom: 6px; } .acct-strength-bar { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; } .acct-strength-text { font-size: 12px; color: #6b7280; } /* Card row hover */ .acct-card-row-hover { cursor: pointer; transition: background 0.15s; border-radius: 8px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; } .acct-card-row-hover:hover { background: rgba(19,19,20,0.02); } /* Toggle switch */ .acct-toggle-track { width: 44px; height: 24px; background: #dadce0; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .acct-toggle-track.active { background: #131314; } .acct-toggle-thumb { width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .acct-toggle-track.active .acct-toggle-thumb { transform: translateX(20px); } /* Empty state */ .acct-empty-state { text-align: center; padding: 32px 16px; } .acct-empty-state svg { margin: 0 auto 16px; } .acct-empty-state p { font-size: 15px; font-weight: 600; color: #131314; margin-bottom: 4px; } .acct-empty-state span { font-size: 13px; color: #6b7280; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 768px) { .nav { padding: 0 20px; } .nav-links { display: none; } .auth-split { grid-template-columns: 1fr; } .auth-split-right { display: none; } .auth-split-left { padding: 120px 24px 60px; } .auth-card { padding: 36px 24px; } .acct-body { grid-template-columns: 1fr; } .acct-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid rgba(19,19,20,0.06); padding: 12px 0; display: flex; overflow-x: auto; gap: 0; } .acct-nav { white-space: nowrap; border-radius: 20px; margin: 0 4px; padding: 8px 16px; font-size: 13px; } .acct-main { padding: 24px 20px; } .acct-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 960px) { .footer__main { grid-template-columns: repeat(3, 1fr) } .footer__brand-col { grid-column: 1 / -1; margin-bottom: 8px } } @media (max-width: 640px) { .footer__main { grid-template-columns: 1fr 1fr } .footer__brand-col { grid-column: 1 / -1 } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px } }