/* CaptionsHE – שפת העיצוב של דפי המערכת
   התחברות, הרשמה, איפוס סיסמה, דאשבורד, בחירת מנוי ודפי המדיניות.
   אותה שפה כמו דף הבית (css/landing.css): רקע כהה, גרדיאנט סגול–אפרסק, טיימליין של עורך וידאו. */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --p {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}

:root {
    --purple: #5c4c9f;
    --purple-soft: #a395ec;
    --peach: #fda085;
    --pink: #ff5e8a;
    --grad: linear-gradient(135deg, #5c4c9f 0%, #fda085 100%);
    --grad-text: linear-gradient(90deg, #a395ec 0%, #ff8fae 50%, #fda085 100%);

    --bg: #06050a;
    --surface: rgba(20, 17, 30, .62);
    --surface-solid: #120f1b;
    --field: rgba(255, 255, 255, .04);
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .16);
    --text: #f6f4fb;
    --muted: #aaa3bd;
    --danger: #ff6b81;
    --success: #4ade80;

    --radius: 24px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: 110px; }

body.app {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* הילה צבעונית שזזה לאט מאחורי כל הדף */
body.app::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(35% 30% at 78% 18%, rgba(92, 76, 159, .38), transparent 70%),
        radial-gradient(30% 28% at 18% 72%, rgba(253, 160, 133, .16), transparent 70%),
        radial-gradient(25% 25% at 60% 90%, rgba(255, 94, 138, .1), transparent 70%);
    filter: blur(20px);
    animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
    to { transform: translate3d(-4%, 3%, 0) rotate(6deg) scale(1.08); }
}

/* גרעיניות עדינה */
body.app::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.app img { max-width: 100%; }
.app a { color: inherit; }
.app h1, .app h2, .app h3, .app h4 { line-height: 1.12; margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.app p { margin: 0; }
.app ul, .app ol { margin: 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.grad-text {
    background: var(--grad-text);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 6s ease-in-out infinite alternate;
}
@keyframes shimmer { to { background-position: 100% 0; } }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--peach);
}
.eyebrow::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--peach);
    box-shadow: 0 0 0 4px rgba(253, 160, 133, .18);
    animation: rec 1.6s ease-in-out infinite;
}
@keyframes rec { 50% { opacity: .35; } }

/* ---------- פס התקדמות בראש הדף ---------- */
.scroll-playhead {
    position: fixed;
    top: 0; inset-inline: 0;
    height: 3px;
    z-index: 80;
    pointer-events: none;
    background: rgba(255, 255, 255, .05);
}
.scroll-playhead span {
    position: absolute;
    inset: 0;
    background: var(--grad);
    transform-origin: right;
    transform: scaleX(var(--progress, 0));
}

/* ---------- כותרת עליונה ---------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    padding: 16px;
}
.app-header-pill {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px;
    padding-inline-start: 22px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(12, 10, 18, .62);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 10px 40px -20px rgba(0, 0, 0, .8);
}
.app-header .brand { display: flex; align-items: center; flex: none; }
.app-header .brand img { height: 28px; width: auto; display: block; }
.app-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 5px 5px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .04);
    font-weight: 500;
    font-size: .92rem;
    max-width: 52vw;
}
.user-chip .avatar {
    width: 32px; height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--grad);
    font-weight: 800;
    font-size: .9rem;
    color: #fff;
}
.user-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- כפתורים ---------- */
.btn,
.app .button,
.app .plan-button,
.app .download-button,
.app .legal-back {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .2s, border-color .2s, opacity .2s;
    isolation: isolate;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover,
.app .button:hover,
.app .plan-button:hover,
.app .download-button:hover,
.app .legal-back:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.btn:active, .app .button:active { transform: scale(.98); }
.btn:focus-visible,
.app .button:focus-visible,
.app .plan-button:focus-visible,
.app .download-button:focus-visible,
.app .legal-back:focus-visible { outline: 3px solid var(--peach); outline-offset: 3px; }
.btn:disabled, .app .button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* כפתור ראשי: גרדיאנט המותג עם הבזק אור במעבר עכבר */
.btn-primary,
.app .submit-button,
.app .upgrade-button,
.app .plan-button.pro-button {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 40px -10px rgba(253, 160, 133, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary::before,
.app .submit-button::before,
.app .upgrade-button::before,
.app .plan-button.pro-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(120%);
    transition: transform .8s var(--ease-out);
}
.btn-primary:hover::before,
.app .submit-button:hover::before,
.app .upgrade-button:hover::before,
.app .plan-button.pro-button:hover::before { transform: translateX(-120%); }
.btn-primary:hover,
.app .submit-button:hover,
.app .upgrade-button:hover,
.app .plan-button.pro-button:hover {
    background: var(--grad);
    border-color: transparent;
    box-shadow: 0 18px 50px -12px rgba(253, 160, 133, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-sm, .app .button.btn-sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.app .submit-button { width: 100%; margin-top: 6px; }

.app .logout-button:hover { border-color: rgba(255, 107, 129, .5); background: rgba(255, 107, 129, .1); }
.app .whatsapp-button { background: #1fa855; border-color: transparent; color: #fff; }
.app .whatsapp-button:hover { background: #25c063; border-color: transparent; }

/* ---------- שדות טופס ---------- */
.app .modern-form, .app .modal-form { display: grid; gap: 18px; }
.app .form-group { display: grid; gap: 8px; }
.app .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--muted);
    transition: color .25s;
}
.app .form-group label i { width: 16px; text-align: center; font-size: .85rem; color: var(--purple-soft); transition: color .25s; }
.app .form-group:focus-within label { color: var(--text); }
.app .form-group:focus-within label i { color: var(--peach); }

.app input[type="text"],
.app input[type="email"],
.app input[type="password"],
.app input[type="tel"] {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid var(--border-strong);
    background: var(--field);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    transition: border-color .25s, box-shadow .35s var(--ease-out), background-color .25s;
}
.app input::placeholder { color: rgba(170, 163, 189, .6); }
.app input[type="text"]:hover,
.app input[type="email"]:hover,
.app input[type="password"]:hover,
.app input[type="tel"]:hover { border-color: rgba(255, 255, 255, .26); }
.app input[type="text"]:focus,
.app input[type="email"]:focus,
.app input[type="password"]:focus,
.app input[type="tel"]:focus {
    outline: none;
    border-color: rgba(253, 160, 133, .7);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 4px rgba(253, 160, 133, .14), 0 12px 30px -16px rgba(253, 160, 133, .6);
}
.app input:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px #17131f inset;
    caret-color: var(--text);
}

.app .password-field { position: relative; }
.app .password-field input { padding-inline-end: 56px; }
.app .password-toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: 7px;
    translate: 0 -50%;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .2s, background-color .2s;
}
.app .password-toggle:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.app .password-toggle:focus-visible { outline: 2px solid var(--peach); outline-offset: 1px; }

/* תיבות סימון */
.app .form-check { display: flex; align-items: flex-start; gap: 12px; }
.app .form-check label { color: var(--muted); font-size: .92rem; line-height: 1.5; cursor: pointer; }
.app .form-check label a { color: var(--peach); text-decoration: none; font-weight: 500; }
.app .form-check label a:hover { text-decoration: underline; }
.app input[type="checkbox"]:not(#subscription-toggle) {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 22px; height: 22px;
    margin: 1px 0 0;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: var(--field);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, box-shadow .3s;
}
.app input[type="checkbox"]:not(#subscription-toggle)::after {
    content: "";
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: translateY(-1px) rotate(45deg) scale(0);
    transition: transform .3s var(--ease-out);
}
.app input[type="checkbox"]:not(#subscription-toggle):checked {
    background: var(--grad);
    border-color: transparent;
    box-shadow: 0 6px 18px -6px rgba(253, 160, 133, .7);
}
.app input[type="checkbox"]:not(#subscription-toggle):checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.app input[type="checkbox"]:focus-visible { outline: 2px solid var(--peach); outline-offset: 2px; }
.app .checkbox-container { display: grid; gap: 6px; }

/* הודעות */
.app .error-message,
.app .success-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    margin: 0 0 18px;
    border-radius: 14px;
    font-size: .93rem;
    line-height: 1.5;
    animation: msg-in .5s var(--ease-out);
}
.app .error-message { background: rgba(255, 107, 129, .1); border: 1px solid rgba(255, 107, 129, .35); color: #ffd3da; }
.app .error-message i { color: var(--danger); margin-top: 3px; }
.app .success-message { background: rgba(74, 222, 128, .08); border: 1px solid rgba(74, 222, 128, .35); color: #d2f9df; }
.app .success-message i { color: var(--success); margin-top: 3px; }
@keyframes msg-in { from { opacity: 0; transform: translateY(-8px); } }
.app .field-error { color: #ffb3c0; font-size: .85rem; line-height: 1.45; }
.app .field-error:empty { display: none; }

/* מצב שדה המייל בהרשמה */
.app input.email-valid { border-color: rgba(74, 222, 128, .6) !important; box-shadow: 0 0 0 4px rgba(74, 222, 128, .1); }
.app input.email-warning { border-color: rgba(250, 204, 21, .7) !important; box-shadow: 0 0 0 4px rgba(250, 204, 21, .1); }
.app input.email-error { border-color: rgba(255, 107, 129, .8) !important; box-shadow: 0 0 0 4px rgba(255, 107, 129, .12); }

/* ---------- כרטיס עם הילה שעוקבת אחרי העכבר ---------- */
.glow-card { position: relative; isolation: isolate; }
.glow-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(253, 160, 133, .13), transparent 45%);
    opacity: 0;
    transition: opacity .4s;
}
.glow-card:hover::after { opacity: 1; }

/* מסגרת גרדיאנט מסתובבת */
.conic-border { position: relative; }
.conic-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--angle), transparent 0 55%, var(--purple-soft) 70%, var(--peach) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin-angle 5s linear infinite;
    pointer-events: none;
}
@keyframes spin-angle { to { --angle: 360deg; } }

/* =====================================================================
   דפי התחברות / הרשמה / איפוס סיסמה
   ===================================================================== */
.auth-shell {
    flex: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 4px 16px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 28px;
    align-items: start;
}

.auth-panel { display: flex; justify-content: center; padding: 3vh 0; }
.auth-card {
    width: 100%;
    max-width: 480px;
    padding: 40px 38px;
    border-radius: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: card-in .9s var(--ease-out) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.auth-card > h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    letter-spacing: -0.035em;
    margin-bottom: 8px;
}
.auth-card > h2 i {
    font-size: 1.1rem;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(253, 160, 133, .12);
    color: var(--peach);
}
.auth-sub { color: var(--muted); margin-bottom: 26px; }

.login-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.forgot-link { color: var(--peach); text-decoration: none; font-size: .92rem; font-weight: 500; }
.forgot-link:hover { text-decoration: underline; }
.auth-link { text-align: center; color: var(--muted); font-size: .95rem; padding-top: 6px; }
.auth-link a { color: var(--text); font-weight: 700; text-decoration: none; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-link a:hover { text-decoration: underline; text-decoration-color: var(--peach); }

/* צד ויזואלי: רקע WebGL + הדגמת עורך */
.auth-visual {
    position: sticky;
    top: 96px;
    height: calc(100vh - 128px);
    min-height: 560px;
    max-height: 820px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0b0912;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}
.app-shader {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    display: block;
}
.auth-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 5, 10, .1), rgba(6, 5, 10, .25) 45%, rgba(6, 5, 10, .85));
}
.auth-visual-copy { max-width: 520px; }
.auth-visual h1 {
    font-size: clamp(2.6rem, 4.6vw, 4.4rem);
    letter-spacing: -0.045em;
    line-height: 1;
    margin: 16px 0 14px;
}
.auth-visual-copy p { color: rgba(246, 244, 251, .78); font-size: 1.08rem; max-width: 420px; }

/* הדגמת עורך: מסך + טיימליין */
.reel {
    border-radius: 20px;
    padding: 10px;
    background: rgba(12, 10, 18, .6);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
    direction: ltr;
}
.reel-screen {
    position: relative;
    aspect-ratio: 16 / 7;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(60% 80% at 30% 30%, rgba(92, 76, 159, .55), transparent 70%),
        radial-gradient(50% 70% at 80% 70%, rgba(253, 160, 133, .35), transparent 70%),
        #120f1b;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 16px 18px;
}
.reel-hud {
    position: absolute;
    top: 10px; inset-inline: 12px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: .72rem;
    color: rgba(255, 255, 255, .8);
}
.reel-hud .rec { color: #ff6b6b; font-weight: 700; }
.reel-caption {
    direction: rtl;
    min-height: 1.5em;
    padding: 4px 14px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .55);
    font-weight: 800;
    font-size: clamp(1.05rem, 1.8vw, 1.45rem);
    text-align: center;
}
.reel-caption .w { display: inline-block; opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity .35s, transform .45s var(--ease-out), filter .35s; }
.reel-caption .w.on { opacity: 1; transform: none; filter: none; }
.reel-caption .w.hl { color: var(--peach); }
.reel-tracks { position: relative; display: grid; gap: 5px; padding: 10px 2px 2px; }
.reel-track { position: relative; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, .04); }
.reel-track i {
    position: absolute;
    top: 2px; bottom: 2px;
    left: var(--s);
    width: var(--w);
    border-radius: 4px;
}
.reel-track.v i { background: linear-gradient(90deg, #4b3f86, #5c4c9f); }
.reel-track.c i { background: linear-gradient(90deg, #f38c73, #fda085); }
.reel-track.a {
    background:
        repeating-linear-gradient(90deg, rgba(163, 149, 236, .55) 0 2px, transparent 2px 5px) center / 100% 60% no-repeat,
        rgba(255, 255, 255, .04);
    -webkit-mask: linear-gradient(90deg, #000, rgba(0, 0, 0, .5) 30%, #000 55%, rgba(0, 0, 0, .6) 80%, #000);
    mask: linear-gradient(90deg, #000, rgba(0, 0, 0, .5) 30%, #000 55%, rgba(0, 0, 0, .6) 80%, #000);
}
.reel-playhead {
    position: absolute;
    top: 4px; bottom: 0;
    left: calc(var(--ph, 0) * 100%);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 12px rgba(253, 160, 133, .9);
}
.reel-playhead::before {
    content: "";
    position: absolute;
    top: -4px; left: -5px;
    width: 12px; height: 8px;
    border-radius: 2px 2px 6px 6px;
    background: var(--peach);
}

/* שלבים בהרשמה ובאיפוס – בסגנון טיימליין */
.registration-steps, .reset-steps {
    display: flex;
    align-items: center;
    margin: 20px 0 28px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
}
.app .step { display: flex; align-items: center; gap: 10px; flex: none; opacity: .5; transition: opacity .4s; }
.app .step.active, .app .step:has(~ .step.active) { opacity: 1; }
.app .step-number {
    width: 32px; height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border-strong);
    font-family: var(--mono);
    font-weight: 700;
    font-size: .85rem;
    transition: background-color .4s, box-shadow .4s, border-color .4s;
}
.app .step.active .step-number {
    background: var(--grad);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(253, 160, 133, .16), 0 8px 20px -8px rgba(253, 160, 133, .8);
}
.app .step:has(~ .step.active) .step-number { background: rgba(74, 222, 128, .14); border-color: rgba(74, 222, 128, .45); color: transparent; position: relative; }
.app .step:has(~ .step.active) .step-number::after { content: "✓"; position: absolute; color: var(--success); font-family: 'Heebo', sans-serif; }
.app .step-text { font-size: .82rem; font-weight: 500; white-space: nowrap; }
.app .step.active .step-text { color: var(--text); font-weight: 700; }
.app .step-line {
    flex: 1;
    min-width: 14px;
    height: 2px;
    margin: 0 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .1);
    position: relative;
    overflow: hidden;
}
.app .step-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .7s var(--ease-out);
}
.app .step-line:has(~ .step.active)::after { transform: scaleX(1); }

/* שלב אימות המייל */
.verification-info {
    text-align: center;
    padding: 24px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
}
.verification-info > i {
    font-size: 1.6rem;
    width: 64px; height: 64px;
    display: inline-grid;
    place-items: center;
    border-radius: 20px;
    margin-bottom: 14px;
    background: var(--grad);
    box-shadow: 0 16px 40px -14px rgba(253, 160, 133, .8);
}
.verification-info h3 { font-size: 1.4rem; margin-bottom: 6px; }
.verification-info p { color: var(--muted); }
.verification-info .email-display { color: var(--peach); font-weight: 700; margin-top: 6px; direction: ltr; word-break: break-all; }
.verification-actions { display: flex; gap: 10px; }
.verification-actions .button { flex: 1; min-height: 46px; padding: 0 14px; font-size: .92rem; }

/* קוד בן 6 ספרות – תאים בסגנון טיימקוד */
.app #verification_code,
.app #reset_code {
    height: 64px;
    text-align: center;
    direction: ltr;
    font-family: var(--mono);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .55em;
    padding-inline-start: .55em;
}
.app #verification_code::placeholder,
.app #reset_code::placeholder { font-family: 'Heebo', sans-serif; font-size: .95rem; letter-spacing: 0; font-weight: 400; }

/* איפוס סיסמה: שדות שמופיעים לפי השלב */
.app .code-group, .app .password-group { display: none; }
.app .code-group.visible, .app .password-group.visible { display: grid; animation: reveal-field .6s var(--ease-out); }
@keyframes reveal-field { from { opacity: 0; transform: translateY(14px); } }
.app .code-button { width: 100%; }

/* =====================================================================
   דאשבורד
   ===================================================================== */
.dash {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 80px;
}
.dash-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 40px 0 34px;
}
.dash-hero h1 {
    font-size: clamp(2.6rem, 6.4vw, 5.2rem);
    letter-spacing: -0.05em;
    line-height: .98;
    margin-top: 14px;
}
.dash-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
    font-size: .95rem;
}
.dash-status::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .18);
}
.dash-status.expired::before { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 107, 129, .18); }
.dash-status strong { color: var(--text); }
.dash-hero form { margin: 0; }
.dash-hero .upgrade-button { min-height: 58px; padding: 0 32px; font-size: 1.05rem; }

.bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(170px, auto);
    gap: 16px;
}
.tile {
    position: relative;
    padding: 26px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    animation: tile-in .9s var(--ease-out) both;
}
.tile:nth-child(2) { animation-delay: .08s; }
.tile:nth-child(3) { animation-delay: .16s; }
.tile:nth-child(4) { animation-delay: .24s; }
@keyframes tile-in { from { opacity: 0; transform: translateY(26px); } }
.tile-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
}
.tile-label i {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(163, 149, 236, .12);
    color: var(--purple-soft);
    font-size: .85rem;
}
.tile-value {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    direction: ltr;
    text-align: right;
    overflow-wrap: anywhere;
}
.tile-value.plan { direction: rtl; }
.tile-foot { color: var(--muted); font-size: .88rem; }

/* אריח הדקות – טבעת התקדמות */
.tile-minutes {
    grid-column: span 2;
    grid-row: span 2;
    flex-direction: row;
    align-items: center;
    gap: 34px;
    background:
        radial-gradient(80% 90% at 15% 20%, rgba(92, 76, 159, .32), transparent 70%),
        var(--surface);
}
.tile-minutes .minutes-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tile-minutes .tile-value { font-size: clamp(2.8rem, 5vw, 4.4rem); }
.ring {
    --size: clamp(170px, 18vw, 230px);
    flex: none;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(from 0deg, var(--purple-soft), var(--peach) calc(var(--p) * 1%), rgba(255, 255, 255, .07) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
    animation: ring-in 1.8s var(--ease-out) both;
    filter: drop-shadow(0 0 18px rgba(253, 160, 133, .35));
}
@keyframes ring-in { from { --p: 0; } }
.ring-wrap { position: relative; flex: none; display: grid; place-items: center; }
.ring-wrap .ring-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}
.ring-center b { direction: ltr; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
.ring-center > span { color: var(--muted); font-size: .85rem; }
.meter {
    height: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
}
.meter span {
    display: block;
    height: 100%;
    width: calc(var(--p) * 1%);
    border-radius: inherit;
    background: var(--grad);
    animation: ring-in 1.8s var(--ease-out) both;
}

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 70px 0 20px;
}
.section-title h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.035em; }
.section-title span { color: var(--muted); font-family: var(--mono); font-size: .8rem; }

.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.download-card {
    position: relative;
    padding: 28px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    transition: transform .5s var(--ease-out), border-color .3s;
}
.download-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.download-card .os-icon {
    width: 58px; height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 1.6rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border-strong);
    margin-bottom: 8px;
    transition: background .4s, transform .5s var(--ease-out);
}
.download-card:hover .os-icon { background: var(--grad); border-color: transparent; transform: rotate(-6deg) scale(1.05); }
.download-card h3 { font-size: 1.4rem; }
.download-card p { color: var(--muted); font-size: .95rem; flex: 1; }
.download-card .download-button { margin-top: 10px; align-self: flex-start; min-height: 46px; padding: 0 20px; font-size: .95rem; }
.download-card .os-ghost {
    position: absolute;
    bottom: -30px; inset-inline-end: -10px;
    font-size: 9rem;
    color: rgba(255, 255, 255, .03);
    pointer-events: none;
    transition: transform .8s var(--ease-out), color .4s;
}
.download-card:hover .os-ghost { transform: rotate(-10deg) translateY(-10px); color: rgba(253, 160, 133, .07); }

.dash-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 60px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}
.dash-footer-actions form { margin: 0; }
.admin-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* =====================================================================
   בחירת מנוי (payment.php / vc_packages.php)
   ===================================================================== */
.subscription-wrapper {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 80px;
}
.page-header { text-align: center; padding: 40px 0 36px; }
.page-header h2 {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 16px 0 16px;
}
.page-header h2 i { display: none; }
.page-description { color: var(--muted); font-size: 1.1rem; max-width: 560px; margin: 0 auto; }

.toggle-container { display: flex; justify-content: center; margin-bottom: 40px; }
#subscription-toggle {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.toggle-label {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    user-select: none;
    isolation: isolate;
    min-width: min(420px, 100%);
}
.toggle-text {
    position: relative;
    z-index: 1;
    padding: 12px 22px;
    text-align: center;
    font-weight: 700;
    font-size: .95rem;
    color: var(--muted);
    white-space: nowrap;
    transition: color .3s;
}
.toggle-slider {
    position: absolute;
    top: 5px; bottom: 5px;
    inset-inline-start: 5px;
    width: calc(50% - 5px);
    border-radius: 999px;
    background: var(--grad);
    box-shadow: 0 8px 26px -8px rgba(253, 160, 133, .7);
    transition: transform .55s var(--ease-out);
}
.toggle-label .monthly-text { grid-column: 1; grid-row: 1; }
.toggle-label .three-months-text { grid-column: 2; grid-row: 1; }
#subscription-toggle:not(:checked) + .toggle-label .monthly-text,
#subscription-toggle:checked + .toggle-label .three-months-text { color: #fff; }
#subscription-toggle:checked + .toggle-label .toggle-slider { transform: translateX(-100%); }
#subscription-toggle:focus-visible + .toggle-label { outline: 3px solid var(--peach); outline-offset: 3px; }

.plans-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    animation: plans-in .6s var(--ease-out);
}
@keyframes plans-in { from { opacity: 0; transform: translateY(16px); } }
.subscription-card {
    position: relative;
    flex: 1 1 340px;
    max-width: 440px;
    padding: 34px;
    border-radius: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    transition: transform .5s var(--ease-out), border-color .3s;
}
.subscription-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.subscription-card.pro {
    border-color: transparent;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(92, 76, 159, .4), transparent 70%),
        var(--surface);
    box-shadow: 0 40px 90px -40px rgba(253, 160, 133, .5);
}
.plan-badge {
    position: absolute;
    top: 22px;
    inset-inline-end: 22px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(253, 160, 133, .14);
    border: 1px solid rgba(253, 160, 133, .4);
    color: var(--peach);
    font-size: .8rem;
    font-weight: 700;
}
.subscription-card.pro .plan-badge { background: var(--grad); color: #fff; border-color: transparent; }
.plan-header h3 { font-size: 1.15rem; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-bottom: 14px; }
.plan-header .price {
    font-size: clamp(3rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
}
.plan-header .price span { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.plan-features ul { list-style: none; padding: 20px 0 0; display: grid; gap: 12px; border-top: 1px solid var(--border); }
.plan-features li { display: flex; align-items: center; gap: 12px; color: rgba(246, 244, 251, .88); }
.plan-features li i {
    width: 22px; height: 22px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(253, 160, 133, .14);
    color: var(--peach);
    font-size: .65rem;
}
.app .plan-button { width: 100%; margin-top: auto; }

.page-actions { display: flex; justify-content: center; margin-top: 44px; }

/* הודעת נעילה */
.locked-message {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 34px;
    border-radius: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: center;
    display: grid;
    gap: 22px;
}
.locked-icon {
    width: 72px; height: 72px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 22px;
    font-size: 1.6rem;
    background: rgba(253, 160, 133, .12);
    border: 1px solid rgba(253, 160, 133, .35);
    color: var(--peach);
}
.locked-message h3 { font-size: 1.6rem; }
.locked-message .info-card {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
}
.locked-message .info-card i, .conditions-list i { color: var(--peach); margin-inline-end: 6px; }
.conditions-list { text-align: right; color: var(--muted); }
.conditions-list ul { list-style: none; padding: 12px 0 0; display: grid; gap: 10px; }
.conditions-list li { color: var(--text); }
.contact-section { display: grid; gap: 12px; justify-items: center; color: var(--muted); }

/* מודאל תשלום */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 5, 10, .72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: fade-in .3s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.modal-content {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 30px;
    border-radius: 28px;
    background: #110e19;
    border: 1px solid var(--border-strong);
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(92, 76, 159, .6);
    animation: card-in .5s var(--ease-out);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.modal-header h3 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; }
.modal-header h3 i { color: var(--peach); }
.modal-close {
    width: 40px; height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.modal-close:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payment-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, .03);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform .4s var(--ease-out), border-color .25s, background-color .25s, box-shadow .4s;
}
.payment-option-btn img { height: 38px; width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; }
.payment-option-btn:hover {
    transform: translateY(-4px);
    border-color: rgba(253, 160, 133, .6);
    background: rgba(253, 160, 133, .07);
    box-shadow: 0 20px 40px -20px rgba(253, 160, 133, .6);
}
.payment-option-btn:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; }
.modal-footer { margin-top: 18px; text-align: center; }
.secure-payment { color: var(--muted); font-size: .88rem; display: inline-flex; gap: 8px; align-items: center; }
.secure-payment i { color: var(--success); }
.loading-payment { text-align: center; padding: 30px 0; display: grid; gap: 10px; justify-items: center; }
.loading-payment p { color: var(--muted); }
.spinner {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, var(--purple-soft), var(--peach));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: spin 0.9s linear infinite;
    margin-bottom: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error-content { display: grid; gap: 18px; color: var(--muted); }

/* =====================================================================
   דפי מדיניות
   ===================================================================== */
.legal-wrapper {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 16px 80px;
    line-height: 1.85;
}
.legal-wrapper:has(.legal-toc) {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
}
.legal-wrapper > * { grid-column: 2; }
.legal-wrapper > h1,
.legal-wrapper > .legal-updated,
.legal-wrapper > .legal-intro { grid-column: 1 / -1; }
.legal-wrapper > h1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    font-size: clamp(2.4rem, 6vw, 5rem);
    letter-spacing: -0.05em;
    line-height: 1;
    padding: 40px 0 18px;
    max-width: 900px;
}
.legal-wrapper > h1 i {
    font-size: 1.3rem;
    width: 52px; height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--grad);
    box-shadow: 0 16px 40px -14px rgba(253, 160, 133, .8);
}
.legal-updated { color: var(--muted); font-family: var(--mono); font-size: .85rem; margin-bottom: 40px; }
.legal-intro {
    color: rgba(246, 244, 251, .86);
    font-size: 1.15rem;
    max-width: 860px;
    padding: 22px 26px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
    margin-bottom: 40px !important;
}
.legal-toc {
    grid-column: 1;
    grid-row: span 60;
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    scrollbar-width: thin;
}
.legal-toc h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--peach);
    margin-bottom: 12px;
}
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
    display: flex;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--muted);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.4;
    transition: color .2s, background-color .2s;
}
.legal-toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--mono);
    font-size: .75rem;
    padding-top: 2px;
    color: rgba(170, 163, 189, .55);
}
.legal-toc a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.legal-toc a.active { color: var(--text); background: rgba(253, 160, 133, .1); }
.legal-toc a.active::before { color: var(--peach); }

.legal-section {
    position: relative;
    padding: 34px 0 34px;
    border-top: 1px solid var(--border);
    scroll-margin-top: 100px;
    max-width: 860px;
}
.legal-section h2 {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}
.legal-section h2 .sec-num {
    flex: none;
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0;
    padding: 4px 9px;
    border-radius: 8px;
    color: var(--peach);
    background: rgba(253, 160, 133, .1);
    border: 1px solid rgba(253, 160, 133, .25);
    translate: 0 -4px;
}
.legal-section h3 { font-size: 1.12rem; color: var(--text); margin: 20px 0 8px; }
.legal-section p { margin-bottom: 12px; color: rgba(246, 244, 251, .82); }
.legal-section ul, .legal-section ol { padding-right: 22px; margin: 8px 0 12px; }
.legal-section li { margin-bottom: 8px; color: rgba(246, 244, 251, .82); }
.legal-section li::marker { color: var(--peach); }
.legal-section strong { color: var(--text); }
.legal-wrapper a:not(.legal-back) { color: var(--peach); text-decoration: underline; text-decoration-color: rgba(253, 160, 133, .35); text-underline-offset: 3px; }
.legal-wrapper a:not(.legal-back):hover { text-decoration-color: var(--peach); }
.legal-toc a, .legal-toc a:hover { text-decoration: none !important; }

.highlight-box, .contact-box {
    padding: 28px !important;
    margin: 12px 0;
    border-radius: 22px;
    border: 1px solid rgba(253, 160, 133, .3) !important;
    background:
        radial-gradient(80% 100% at 100% 0%, rgba(253, 160, 133, .1), transparent 70%),
        rgba(255, 255, 255, .02);
}
.highlight-box + .legal-section, .contact-box + .legal-section { border-top: 0; }
table.legal-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0; border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden; }
table.legal-table th, table.legal-table td {
    padding: 12px 16px;
    text-align: right;
    vertical-align: top;
    color: rgba(246, 244, 251, .86);
    font-size: .95rem;
    border-bottom: 1px solid var(--border);
}
table.legal-table tr:last-child td { border-bottom: 0; }
table.legal-table th { background: rgba(253, 160, 133, .08); color: var(--peach); font-weight: 700; }
.business-details { list-style: none; padding-right: 0 !important; display: grid; gap: 6px; }
.business-details li::marker { content: none; }
.business-details strong { color: var(--peach); }
.legal-formula {
    margin: 14px 0;
    padding: 18px 22px;
    border-radius: 16px;
    border: 1px dashed rgba(253, 160, 133, .45);
    background: rgba(253, 160, 133, .06);
    font-weight: 700;
    text-align: center;
}
.legal-note { color: var(--muted); font-size: .9rem; padding-top: 20px; }
.legal-wrapper > div:has(> .legal-back) { padding-top: 30px; text-align: right !important; }

/* =====================================================================
   פוטר
   ===================================================================== */
.app-footer { position: relative; overflow: hidden; padding-top: 70px; margin-top: auto; }
.app-footer-top {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.app-footer-top img.logo { height: 34px; width: auto; display: block; }
.app-footer .footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.app-footer .footer-links a { color: var(--muted); text-decoration: none; font-size: .93rem; transition: color .2s; }
.app-footer .footer-links a:hover { color: var(--text); }
.app-footer .socials { display: flex; gap: 10px; }
.app-footer .socials a {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    text-decoration: none;
    transition: background-color .2s, transform .3s var(--ease-out);
}
.app-footer .socials a:hover { background: rgba(255, 255, 255, .08); transform: translateY(-3px); }
.app-footer .copyright { color: var(--muted); font-size: .85rem; padding: 18px 16px 30px; text-align: center; }

/* וורדמארק ענק עם אלומת אור (כמו בדף הבית) */
.spot { position: relative; overflow: hidden; isolation: isolate; margin-top: 46px; }
.spot-word {
    display: block;
    direction: ltr;
    text-align: center;
    font-weight: 900;
    font-size: 19.6vw;
    line-height: .8;
    letter-spacing: -0.065em;
    padding: .06em 0 .04em;
    white-space: nowrap;
    user-select: none;
}
.spot-word.base { color: #1e1929; }
.spot-beam, .spot-lit {
    position: absolute;
    inset: 0;
    clip-path: polygon(var(--t1, 40%) 0, var(--t2, 58%) 0, var(--b2, 30%) 100%, var(--b1, 12%) 100%);
    pointer-events: none;
}
.spot-beam { z-index: 1; background: linear-gradient(180deg, rgba(163, 149, 236, .1), rgba(163, 149, 236, .3) 45%, rgba(253, 160, 133, .38)); }
.spot-lit { z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; }
.spot-lit .spot-word {
    color: transparent;
    background: linear-gradient(100deg, #a395ec, #ff8fae 50%, #fda085);
    -webkit-background-clip: text;
    background-clip: text;
}

/* =====================================================================
   רספונסיבי
   ===================================================================== */
@media (max-width: 1024px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile-minutes { grid-row: auto; }
    .legal-wrapper:has(.legal-toc) { grid-template-columns: 230px minmax(0, 1fr); column-gap: 32px; }
}

@media (min-width: 901px) and (max-height: 820px) {
    .auth-visual { min-height: 0; height: calc(100vh - 112px); padding: 30px; }
    .auth-visual h1 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); margin: 12px 0 10px; }
    .auth-visual-copy p { font-size: .98rem; }
    .reel-screen { aspect-ratio: 16 / 5; }
}
@media (min-width: 901px) and (max-height: 680px) {
    .auth-visual-copy p { display: none; }
}

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; gap: 16px; padding-top: 0; }
    .auth-visual {
        order: -1;
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        padding: 22px 22px 20px;
        border-radius: 24px;
    }
    .auth-visual h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); margin: 10px 0 0; }
    .auth-visual-copy p { display: none; }
    .reel { display: none; }
    .auth-panel { padding: 0; }
    .auth-card { max-width: 560px; }

    .legal-wrapper:has(.legal-toc) { display: block; }
    .legal-toc { position: relative; top: auto; max-height: none; margin-bottom: 30px; }
    .legal-toc ol { grid-template-columns: 1fr 1fr; column-gap: 8px; }
}

@media (max-width: 640px) {
    .app-header { padding: 10px 12px; }
    .app-header-pill { padding: 6px; padding-inline-start: 16px; gap: 8px; }
    .app-header .brand img { height: 24px; }
    .app-header-actions .btn-sm, .app-header-actions .button { min-height: 38px; padding: 0 14px; font-size: .85rem; }
    .user-chip { font-size: .85rem; padding-inline-end: 12px; }
    .user-chip .avatar { width: 28px; height: 28px; }

    .auth-shell { padding: 0 12px 30px; }
    .auth-card { padding: 28px 20px; border-radius: 24px; }
    .auth-card > h2 { font-size: 1.9rem; }
    .auth-card > h2 i { width: 38px; height: 38px; font-size: .95rem; }
    .registration-steps, .reset-steps { padding: 12px; margin: 16px 0 22px; }
    .app .step { flex-direction: column; gap: 6px; }
    .app .step-text { font-size: .72rem; }
    .app .step-line { margin: 0 4px 22px; }
    .verification-actions { flex-direction: column; }

    .dash { padding: 0 12px 60px; }
    .dash-hero { padding: 26px 0 26px; }
    .dash-hero form, .dash-hero .upgrade-button { width: 100%; }
    .bento { grid-template-columns: 1fr 1fr; gap: 12px; grid-auto-rows: auto; }
    .tile { padding: 20px; min-height: 140px; }
    .tile-value { font-size: 1.5rem; }
    .tile-minutes { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 22px; }
    .tile-minutes .ring-wrap { align-self: center; }
    .ring { --size: 190px; }
    .tile-label i { width: 30px; height: 30px; }
    .download-grid { grid-template-columns: 1fr; }
    .section-title { margin-top: 50px; }
    .dash-footer-actions { flex-direction: column-reverse; align-items: stretch; }
    .dash-footer-actions .button, .admin-buttons, .admin-buttons form, .admin-buttons .button { width: 100%; }

    .subscription-wrapper { padding: 0 12px 60px; }
    .page-header { padding: 26px 0 28px; }
    .toggle-label { min-width: 100%; }
    .toggle-text { padding: 11px 10px; font-size: .88rem; }
    .subscription-card { padding: 26px 22px; flex-basis: 100%; }
    .locked-message { padding: 30px 20px; }
    .modal-content { padding: 22px 18px; border-radius: 24px; }
    .payment-option-btn { min-height: 104px; }

    .legal-wrapper { padding: 10px 14px 60px; }
    .legal-wrapper > h1 { padding-top: 20px; }
    .legal-toc ol { grid-template-columns: 1fr; }
    .legal-section { padding: 26px 0; }
    .legal-section h2 { flex-direction: column; gap: 10px; }
    .legal-section h2 .sec-num { translate: none; }
    table.legal-table, table.legal-table tbody, table.legal-table tr, table.legal-table td, table.legal-table th { display: block; width: 100%; }
    table.legal-table tr { border-bottom: 1px solid var(--border-strong); }
    table.legal-table td, table.legal-table th { border-bottom: 0; }

    .app-footer-top { flex-direction: column; text-align: center; }
    .app-footer .footer-links { justify-content: center; }
}

/* ---------- תנועה מופחתת ---------- */
@media (prefers-reduced-motion: reduce) {
    body.app::before, .grad-text, .conic-border::before, .eyebrow::before { animation: none; }
    .auth-card, .tile, .plans-container, .ring, .meter span { animation: none; }
}
html.acc-no-motion body.app::before,
html.acc-no-motion .ring,
html.acc-no-motion .meter span { animation: none !important; }