.fv-phone-page { --phone-ink:#101114; --phone-gold:#d5b878; --phone-muted:#858586; min-height:100svh; color:#f6f3eb; background:#0d0e10; font-family:var(--font, var(--body, sans-serif)); padding:48px 24px 24px; box-sizing:border-box; }
.fv-phone-page *, .fv-gym-qr-staff *, .fv-phone-member * { box-sizing:border-box; }
.fv-phone-layout { width:min(100%,480px); margin:0 auto; }
.fv-phone-intro { padding-bottom:24px; }
.fv-phone-brand { display:block; color:var(--phone-gold); font-family:var(--heading, sans-serif); font-size:15px; letter-spacing:.16em; font-weight:700; }
.fv-phone-kicker { display:flex; gap:8px; align-items:center; margin-top:42px; color:#b8b5ac; letter-spacing:.12em; font-size:10px; font-weight:700; }
.fv-phone-kicker span { width:6px; height:6px; border-radius:50%; background:var(--phone-gold); }
.fv-phone-intro h1 { margin:12px 0 7px; color:#fffaf0; font-family:var(--heading,sans-serif); font-size:clamp(32px,8vw,44px); line-height:1.08; letter-spacing:-.035em; overflow-wrap:anywhere; }
.fv-phone-intro p { margin:0; color:#aaa79f; font-size:14px; line-height:1.7; }
.fv-phone-card { min-width:0; padding:32px; border:1px solid #35332e; border-radius:16px; background:#f7f5ee; color:var(--phone-ink); box-shadow:0 16px 50px #0002; }
.fv-phone-card h2 { margin:12px 0; font-family:var(--heading,sans-serif); font-size:30px; line-height:1.15; letter-spacing:-.03em; overflow-wrap:anywhere; }
.fv-phone-card p { color:#60605b; font-size:14px; line-height:1.75; margin:0 0 20px; }
.fv-phone-step { color:#746038; font-size:10px; font-weight:700; line-height:1.6; letter-spacing:.11em; }
.fv-phone-activation form { display:grid; gap:10px; margin-top:28px; }
.fv-phone-activation label { font-size:13px; font-weight:700; }
.fv-phone-activation input { min-width:0; min-height:52px; border:1px solid #c9c5b9; border-radius:8px; padding:12px; color:#141414; background:#fff; font-family:inherit; font-size:16px; letter-spacing:.025em; }
.fv-phone-activation small { color:#65655f; font-size:12px; line-height:1.6; }
.fv-phone-page .btn { display:flex; justify-content:center; align-items:center; gap:12px; min-height:52px; width:100%; margin-top:12px; padding:13px 18px; border:1px solid #c6a960; border-radius:8px; color:#141414; background:#d5b878; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:background .16s ease,transform .16s ease; }
.fv-phone-page .btn:hover:not(:disabled) { background:#e0c789; transform:translateY(-1px); }
.fv-phone-page .btn:disabled { opacity:.6; cursor:wait; }
.fv-phone-page .btn-secondary { color:#232321; background:transparent; border-color:#bdb8a9; }
.fv-phone-page :is(button,input):focus-visible { outline:3px solid #a48137; outline-offset:3px; }
.fv-phone-assurance { display:flex; gap:8px; align-items:flex-start; padding-top:24px; color:#63635d; font-size:12px; line-height:1.65; }
.fv-phone-assurance svg { width:18px; height:18px; flex:0 0 auto; color:#79703c; }
.fv-phone-member-note { padding:16px; color:#63635d; border-top:1px solid #dedace; border-bottom:1px solid #dedace; font-size:12px; line-height:1.65; }
.fv-phone-membership { display:grid; grid-template-columns:1fr auto; gap:8px; margin:24px 0; padding:18px 0; border-block:1px solid #dfdacf; font-size:13px; }
.fv-phone-membership >span { color:#62625c; }
.fv-phone-membership strong { color:#855d3c; }
.fv-phone-membership strong.is-active { color:#3b6b49; }
.fv-phone-membership small { grid-column:1/-1; color:#67675f; font-size:12px; }
.fv-phone-page .fv-phone-check-button { justify-content:space-between; font-size:16px; }
.fv-phone-check-button span { font-size:24px; }
.fv-phone-page .fv-phone-text-button { display:block; width:100%; border:0; border-radius:6px; color:#605e55; background:transparent; padding:15px 4px; min-height:44px; font-size:12px; font-family:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; overflow-wrap:anywhere; }
.fv-phone-symbol { display:flex; justify-content:center; align-items:center; width:52px; height:52px; margin:0 0 22px; color:#7a652e; background:#eee7d5; border:1px solid #d9ceb2; border-radius:50%; font-size:28px; }
.fv-phone-symbol.is-success { color:#426a47; background:#e5eddf; border-color:#c4d5b7; }
.fv-phone-symbol svg { width:28px; height:28px; }
.fv-phone-card .fv-phone-feedback { min-height:0; margin:0; font-size:13px; color:#436345; }
.fv-phone-feedback:not(:empty) { padding:16px 0 0; }
.fv-phone-card .fv-phone-feedback.is-error { color:#963d2a; }
.fv-phone-footer { display:grid; gap:8px; padding:22px 2px; color:#9e9a8f; font-size:11px; line-height:1.7; }
.fv-phone-footer span { color:#77776f; }
.fv-phone-loading { display:grid; justify-items:center; padding:38px 0 18px; gap:20px; }
.fv-phone-spinner { width:30px; height:30px; border:2px solid #ddd5c3; border-top-color:#8c7136; border-radius:50%; animation:fv-phone-spin .8s linear infinite; }
@keyframes fv-phone-spin { to { transform:rotate(360deg); } }
.fv-gym-qr-staff, .fv-phone-member { display:grid; gap:18px; min-width:0; padding:24px; border:1px solid var(--border,#34332e); border-radius:12px; background:var(--surface,#171819); }
.fv-gym-qr-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.fv-gym-qr-eyebrow { display:block; color:var(--accent,#d5b878); letter-spacing:.1em; font-size:10px; font-weight:700; line-height:1.6; }
.fv-gym-qr-heading h3, .fv-phone-member h3 { margin:6px 0 0; font-size:24px; font-family:var(--heading,sans-serif); }
.fv-gym-qr-status { flex:0 0 auto; padding:6px 10px; border:1px solid var(--border,#34332e); border-radius:20px; color:var(--muted,#aaa89e); font-size:11px; }
.fv-gym-qr-status.is-enabled { color:#91bf95; border-color:#3b5540; }
.fv-gym-qr-explainer, .fv-phone-member p { margin:0; color:var(--muted,#aaa89e); font-size:13px; line-height:1.75; }
.fv-gym-qr-preview { display:grid; grid-template-columns:minmax(130px,190px) minmax(0,1fr); gap:26px; align-items:center; }
.fv-gym-qr-image { width:100%; max-width:280px; aspect-ratio:1; flex-shrink:0; padding:0; background:#fff; border-radius:4px; }
.fv-gym-qr-image svg { display:block; width:100%; height:100%; }
.fv-gym-qr-preview strong { font-size:20px; font-family:var(--heading,sans-serif); }
.fv-gym-qr-preview p { color:var(--muted,#aaa89e); font-size:13px; line-height:1.7; }
.fv-gym-qr-address { overflow-wrap:anywhere; font-size:11px!important; }
.fv-gym-qr-actions { display:flex; flex-wrap:wrap; gap:10px; }
.fv-gym-qr-actions .btn, .fv-gym-qr-staff >.btn { min-height:44px; }
.fv-gym-qr-staff .fv-gym-qr-hint, .fv-phone-member .fv-gym-qr-hint { margin:0; color:var(--muted,#aaa89e); font-size:11px; line-height:1.8; }
.fv-gym-qr-feedback { min-height:1em; margin:0; color:var(--muted,#aaa89e); font-size:12px; line-height:1.65; }
.fv-gym-qr-print { display:none; }
.fv-gym-qr-poster { display:flex; flex-direction:column; align-items:center; gap:18px; padding:32px; color:#161616; background:#fff; text-align:center; }
.fv-gym-qr-brand { font-weight:700; letter-spacing:.15em; font-size:15px; font-family:var(--heading,sans-serif); }
.fv-gym-qr-poster h1 { font-family:var(--heading,sans-serif); font-size:30px; margin:10px 0 0; overflow-wrap:anywhere; }
.fv-gym-qr-poster p { margin:0; line-height:1.7; }
.fv-gym-qr-poster small { font-size:11px; }
@media (max-width:600px) { .fv-phone-page { padding:32px 16px 16px; } .fv-phone-card { padding:26px 22px; } .fv-phone-kicker { margin-top:32px; } .fv-gym-qr-preview { grid-template-columns:1fr; } .fv-gym-qr-preview .fv-gym-qr-image { width:min(100%,230px); margin:0 auto; } .fv-gym-qr-staff, .fv-phone-member { padding:20px; } .fv-gym-qr-actions { flex-direction:column; } .fv-gym-qr-actions .btn { width:100%; } }
@media (min-width:900px) { .fv-phone-page { display:flex; align-items:center; padding:56px; } .fv-phone-layout { width:min(100%,1000px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); column-gap:76px; align-items:center; } .fv-phone-intro { padding-bottom:0; } .fv-phone-intro h1 { font-size:clamp(44px,5vw,64px); } .fv-phone-intro p { font-size:17px; } .fv-phone-kicker { margin-top:52px; } .fv-phone-card { padding:36px; } .fv-phone-footer { grid-column:2; } }
@media (prefers-reduced-motion:reduce) { .fv-phone-spinner { animation:none; } .fv-phone-page .btn { transition:none; } .fv-phone-page .btn:hover:not(:disabled) { transform:none; } }
@media print { body.fv-print-gym-qr >* { display:none!important; } body.fv-print-gym-qr >.fv-gym-qr-print { display:block!important; position:static!important; width:100%!important; margin:0!important; padding:15mm!important; color:#000!important; background:#fff!important; } body.fv-print-gym-qr { padding:0!important; background:#fff!important; } .fv-gym-qr-poster { width:150mm; margin:0 auto; padding:10mm; break-inside:avoid; border:1px solid #ccc; } .fv-gym-qr-poster .fv-gym-qr-image { width:85mm; max-width:none; } }