/* =====================================================================
   CYBERANDA AUTH — v3.1  (The Perimeter)
   ===================================================================== */
:root {
    --bg: #07080d;
    --bg-2: #0b0d15;
    --surface: #10131d;
    --surface-2: #151926;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --text: #eef1f7;
    --text-2: #a3abbd;
    --text-3: #6c7489;
    --cyan: #3dd6e0;
    --purple: #8a5cf0;
    --red: #ff3b5c;
    --danger: #ff5c77;
    --ok: #2ee59d;
    --warn: #ffb547;
    --brand-grad: linear-gradient(135deg, #3dd6e0 0%, #7a6cf0 55%, #9b4fd6 100%);

    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --font-brand: 'Orbitron', var(--font-body);
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
    /* backward compatibility */
    --neon-green: #00ff41; --neon-blue: #00f0ff;
    --font-heading: var(--font-body); --text-main: var(--text); --text-muted: var(--text-3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    background: var(--bg); color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
html[dir="rtl"] body { font-family: var(--font-ar); }
html[dir="rtl"] button, html[dir="rtl"] label, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] p { font-family: var(--font-ar); }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr); }

/* ===================== STAGE ===================== */
.stage {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    padding: 36px 48px 44px;
    background:
        radial-gradient(90% 60% at 15% 0%, rgba(61, 214, 224, 0.10), transparent 60%),
        radial-gradient(80% 70% at 95% 100%, rgba(138, 92, 240, 0.16), transparent 60%),
        var(--bg-2);
    border-inline-end: 1px solid var(--line);
}
.stage-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 75%);
}
.brand {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-brand); font-weight: 800; letter-spacing: 3px; font-size: 1rem;
}
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.scene-wrap { position: relative; z-index: 1; width: 100%; max-width: 720px; margin: 0 auto; }
.crew { width: 100%; height: auto; display: block; overflow: visible; }
.scene-caption {
    margin-top: 6px; text-align: center; min-height: 1.4em;
    font: 500 .82rem var(--font-mono); color: var(--text-2); letter-spacing: .02em;
    transition: color .3s;
}
html[dir="rtl"] .scene-caption { font-family: var(--font-ar); font-size: .9rem; }
.scene-caption.bad { color: var(--danger); }
.scene-caption.good { color: var(--ok); }

.stage-copy { position: relative; z-index: 2; max-width: 640px; }
.kicker { font: 600 .72rem var(--font-mono); letter-spacing: 3px; color: var(--cyan); margin-bottom: 12px; }
html[dir="rtl"] .kicker { letter-spacing: 0; font-family: var(--font-ar); font-size: .85rem; }
.stage-copy h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
html[dir="rtl"] .stage-copy h2 { letter-spacing: 0; line-height: 1.35; }
.stage-sub { margin-top: 12px; color: var(--text-2); font-size: 1rem; line-height: 1.65; }
.features { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.features li { display: flex; align-items: flex-start; gap: 10px; }
.f-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--cyan); background: rgba(61,214,224,.08); border: 1px solid rgba(61,214,224,.2); }
.features b { display: block; font-size: .88rem; font-weight: 600; color: var(--text); }
.features small { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-3); line-height: 1.4; }

/* ---------- Scene parts ---------- */
.ground { stroke: rgba(255,255,255,0.12); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.shadow { fill: rgba(0,0,0,0.5); }
.net-path { stroke: rgba(61,214,224,.18); stroke-width: 1.5; stroke-dasharray: 3 6; fill: none; }
.probe { fill: var(--red); opacity: 0; }
.crew:not(.st-password):not(.st-success) .probe { animation: probe 3.4s cubic-bezier(.4,0,.6,1) infinite; }
.crew .q2 { animation-delay: -1.7s !important; }
@keyframes probe {
    0%   { transform: translate(140px, 290px); opacity: 0; }
    8%   { opacity: .95; }
    46%  { transform: translate(192px, 290px); opacity: .95; }
    60%  { transform: translate(176px, 284px); opacity: 0; }
    100% { transform: translate(176px, 284px); opacity: 0; }
}

.char, .lean, .row, .shutter, .glitch, .visor { transform-box: fill-box; transform-origin: 50% 100%; }
.char { transition: transform .55s cubic-bezier(.34,1.4,.64,1), opacity .5s; }
.lean { transition: transform .35s ease-out; }

/* adversary */
.visor { transform-origin: 50% 50%; }
.visor-glow { opacity: .6; transition: opacity .3s; }
.dev-txt { font: 700 7px var(--font-mono); fill: #ff3b5c; letter-spacing: .5px; }
.glitch { opacity: 0; }
#spy .g-r { animation: glitchR 6s steps(1) infinite; }
#spy .g-c { animation: glitchC 6s steps(1) infinite; }
@keyframes glitchR { 0%,91%,100% { opacity: 0; transform: none; } 92% { opacity: 1; transform: translate(-4px, 1px); } 94% { opacity: 1; transform: translate(3px, -1px); } 96% { opacity: 0; } }
@keyframes glitchC { 0%,91%,100% { opacity: 0; transform: none; } 92% { opacity: 1; transform: translate(4px, -1px); } 94% { opacity: 1; transform: translate(-3px, 1px); } 96% { opacity: 0; } }

/* beam */
.beam { opacity: 0; transition: opacity .3s; }
.beam-line { animation: beamFlow .6s linear infinite; }
@keyframes beamFlow { to { stroke-dashoffset: -22; } }
.beam-hit { opacity: 0; }

/* firewall */
.row rect { fill: #1b2233; stroke: #2e3a55; stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.row line { stroke: #2e3a55; stroke-width: 1.2; transition: stroke .3s; }
.row { transform: translateY(130px); transition: transform .45s cubic-bezier(.34,1.5,.64,1); }
.fw-label { font: 700 8px var(--font-mono); letter-spacing: 1.5px; fill: var(--text-3); opacity: 0; transition: opacity .25s, fill .25s; }
.firewall[data-level="1"] .r1,
.firewall[data-level="2"] .r1, .firewall[data-level="2"] .r2,
.firewall[data-level="3"] .r1, .firewall[data-level="3"] .r2, .firewall[data-level="3"] .r3,
.firewall[data-level="4"] .row { transform: translateY(0); }
.firewall[data-level="3"] .r2 { transition-delay: .05s; } .firewall[data-level="3"] .r3 { transition-delay: .1s; }
.firewall[data-level="4"] .r2 { transition-delay: .05s; } .firewall[data-level="4"] .r3 { transition-delay: .1s; } .firewall[data-level="4"] .r4 { transition-delay: .15s; }
.firewall[data-level="1"] .row rect, .firewall[data-level="2"] .row rect { fill: #3a1a24; stroke: #ff5c77; }
.firewall[data-level="1"] .row line, .firewall[data-level="2"] .row line { stroke: #ff5c77; }
.firewall[data-level="3"] .row rect { fill: #3a2a12; stroke: var(--warn); }
.firewall[data-level="3"] .row line { stroke: var(--warn); }
.firewall[data-level="4"] .row rect { fill: #0f2a33; stroke: var(--cyan); }
.firewall[data-level="4"] .row line { stroke: var(--cyan); }
.firewall[data-level="idle"] .row { transform: translateY(0); }
.firewall[data-level="idle"] .row rect { fill: rgba(61,214,224,.04); stroke: rgba(61,214,224,.35); }
.firewall[data-level="idle"] .row line { stroke: rgba(61,214,224,.25); }
.firewall:not([data-level="0"]) .fw-label { opacity: 1; }
.fw-label.blocked { fill: var(--cyan); }
.fw-label.breach { fill: var(--danger); }

/* vault */
.scr { font: 500 8.5px var(--font-mono); fill: #9cf6ff; }
.scr.dim { fill: #56708a; }
.scr.red { fill: var(--danger); }
.scr.green { fill: var(--ok); }
.bays rect { fill: #151b2b; stroke: #222c44; stroke-width: 1; }
.led { fill: var(--ok); animation: led 1.8s steps(2) infinite; }
.led.l2 { animation-delay: -.4s; } .led.l3 { animation-delay: -.9s; } .led.l4 { animation-delay: -1.3s; }
@keyframes led { 50% { opacity: .25; } }
.tag { font: 700 7.5px var(--font-mono); letter-spacing: 1.5px; fill: #56708a; }
.crew.st-breach .led { fill: var(--danger); animation-duration: .4s; }
.crew.st-breach #vault rect:first-of-type { stroke: var(--danger); }

/* drone (motion is driven by auth_crew.js for smooth physics) */
.rotor-disc { fill: rgba(170, 220, 255, .22); stroke: rgba(170, 220, 255, .35); stroke-width: .8; animation: rotorBlur .09s linear infinite alternate; }
.rotor-disc.d2 { animation-delay: -.045s; }
@keyframes rotorBlur { from { opacity: .55; } to { opacity: 1; } }
.status-led { fill: var(--cyan); animation: led 2.4s ease-in-out infinite; }
.scan-cone { opacity: .9; transition: opacity .4s; }
.eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .1s; }
.eye.blink { transform: scaleY(.12); }
.shutter { transform: scaleY(0); transform-origin: 50% 0%; transition: transform .35s cubic-bezier(.34,1.4,.64,1); }
.shutter-txt { font: 700 7px var(--font-mono); letter-spacing: 1.5px; fill: #fff; }
.crew.st-password .scan-cone { opacity: 0; }
.crew.st-password .status-led { fill: #a98bff; }

/* ---------- states ---------- */
.crew.st-password .shutter { transform: scaleY(1); }
.crew.st-password.st-reveal .shutter { transform: scaleY(.55); }
.crew.st-password #spy { transform: translateX(8px) rotate(4deg); }
.crew.st-password .beam { opacity: 1; }
.crew.st-password .visor-glow { opacity: 1; }
.crew.st-password:not(.st-breach) .beam-line { stroke-dasharray: 6 5; }
.crew.st-blocked .beam-hit { opacity: 1; animation: hitPulse .6s ease-in-out infinite; }
@keyframes hitPulse { 50% { transform: scale(1.35); } }
.crew.st-blocked .beam-hit { transform-box: fill-box; transform-origin: 50% 50%; }


.crew.st-error #vault { animation: shakeNo .5s ease-in-out; }
@keyframes shakeNo { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.crew.st-success #spy { transform: translate(-60px, 10px) scale(.92); opacity: .15; }


/* ===================== PANEL ===================== */
.panel { display: flex; flex-direction: column; padding: 28px clamp(24px, 5vw, 72px); background: var(--bg); }
.panel-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.brand-mobile { display: none; margin-inline-end: auto; }
.lang-btn {
    font: 500 .82rem var(--font-body); color: var(--text-2);
    background: transparent; border: 1px solid var(--line-strong); border-radius: 999px;
    padding: 7px 16px; cursor: pointer; transition: all .2s;
}
.lang-btn:hover { color: var(--text); border-color: var(--cyan); }

.auth-panel { width: 100%; max-width: 420px; margin: auto; padding: 32px 0; }

.url-check {
    display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 6px 12px; margin-bottom: 20px;
    font-size: .76rem; color: var(--text-3);
    background: rgba(46,229,157,.06); border: 1px solid rgba(46,229,157,.2); border-radius: 999px;
}
.url-check svg { color: var(--ok); }
.url-check .host { color: var(--ok); font: 600 .76rem var(--font-mono); }
.url-check .sep { opacity: .5; }

#gateway-title { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
html[dir="rtl"] #gateway-title { letter-spacing: 0; line-height: 1.4; }
.subtitle { color: var(--text-2); margin-top: 8px; font-size: .95rem; }

.tab-container {
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    margin: 26px 0 24px; padding: 4px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.tab-btn {
    position: relative; z-index: 1; background: none; border: 0; cursor: pointer;
    padding: 10px 8px; border-radius: 9px;
    font: 600 .88rem var(--font-body); color: var(--text-3); transition: color .25s;
}
html[dir="rtl"] .tab-btn { font-family: var(--font-ar); }
.tab-btn.active { color: var(--text); }
.tab-indicator {
    position: absolute; top: 4px; bottom: 4px; width: calc(50% - 4px); inset-inline-start: 4px;
    background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 9px;
    transition: transform .35s cubic-bezier(.5,1.4,.5,1);
}
#tab-register.active ~ .tab-indicator { transform: translateX(100%); }
html[dir="rtl"] #tab-register.active ~ .tab-indicator { transform: translateX(-100%); }

.cyber-form { display: flex; flex-direction: column; gap: 18px; animation: formIn .35s ease; }
@keyframes formIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.input-group { display: flex; flex-direction: column; gap: 8px; }
label { font-size: .84rem; font-weight: 600; color: var(--text-2); }
.hint { font-size: .76rem; color: var(--text-3); }
.under-row { display: flex; justify-content: center; margin-top: -4px; }

.input-wrapper { position: relative; }
/* English content is always typed left-to-right, whatever the page language */
.input-wrapper input {
    width: 100%; direction: ltr; text-align: left;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: 11px;
    padding: 13px 14px; font: 500 .95rem var(--font-body);
    outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-wrapper input::placeholder { color: #474e60; }
.input-wrapper input:hover { border-color: rgba(255,255,255,.24); }
.input-wrapper input:focus { border-color: var(--cyan); background: var(--surface-2); box-shadow: 0 0 0 4px rgba(61, 214, 224, 0.14); }
.input-wrapper input.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255, 92, 119, 0.12); }
.input-wrapper input[type="password"] { letter-spacing: 2px; }
.input-wrapper.has-toggle input { padding-right: 46px; }
.pw-toggle {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 6px; border-radius: 8px;
    display: grid; place-items: center;
}
.pw-toggle:hover { color: var(--text); background: rgba(255,255,255,.05); }
.pw-toggle.on .eye-slash { opacity: 0; }

.strength { display: flex; align-items: center; gap: 10px; }
.strength .bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 110px; flex-shrink: 0; }
.strength .bars i { height: 4px; border-radius: 2px; background: var(--line-strong); transition: background .25s; }
.strength-label { font-size: .76rem; color: var(--text-3); }
.strength[data-level="1"] .bars i:nth-child(-n+1),
.strength[data-level="2"] .bars i:nth-child(-n+2) { background: var(--danger); }
.strength[data-level="3"] .bars i:nth-child(-n+3) { background: var(--warn); }
.strength[data-level="4"] .bars i { background: var(--ok); }
.strength[data-level="1"] .strength-label, .strength[data-level="2"] .strength-label { color: var(--danger); }
.strength[data-level="3"] .strength-label { color: var(--warn); }
.strength[data-level="4"] .strength-label { color: var(--ok); }

.link { color: var(--cyan); font-size: .82rem; font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }

.form-error { font-size: .86rem; font-weight: 500; color: var(--danger); line-height: 1.45; }
.form-error:empty { display: none; }

.cyber-btn {
    position: relative; overflow: hidden;
    display: flex; justify-content: center; align-items: center; gap: 10px;
    width: 100%; min-height: 50px; padding: 14px;
    border: 0; border-radius: 11px; cursor: pointer;
    font: 700 .95rem var(--font-body); color: #07080d;
    background: var(--brand-grad); background-size: 160% 160%; background-position: 0% 50%;
    transition: background-position .5s, transform .15s, box-shadow .25s;
    box-shadow: 0 8px 24px -10px rgba(122, 108, 240, .7);
}
html[dir="rtl"] .cyber-btn, html[dir="rtl"] .ghost-btn { font-family: var(--font-ar); }
.cyber-btn:hover { background-position: 100% 50%; box-shadow: 0 12px 30px -10px rgba(122, 108, 240, .9); }
.cyber-btn:active { transform: translateY(1px) scale(.995); }
.cyber-btn:disabled { cursor: wait; opacity: .85; }

.ghost-btn {
    width: 100%; padding: 12px; border-radius: 11px; cursor: pointer;
    background: transparent; border: 1px solid var(--line-strong); color: var(--text-2);
    font: 600 .9rem var(--font-body); transition: all .2s;
}
.ghost-btn:hover { color: var(--text); border-color: var(--text-3); }

.loader { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(7,8,13,.25); border-top-color: #07080d; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-desc { color: var(--text-2); font-size: .92rem; line-height: 1.6; }
.form-title { font-size: 1.15rem; font-weight: 700; }

.success { text-align: center; padding: 24px 8px; animation: formIn .35s ease; }
.success-icon {
    width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.8rem; font-weight: 700;
    color: var(--ok); background: rgba(46,229,157,.1); border: 1px solid rgba(46,229,157,.35);
}
.success p { color: var(--text); line-height: 1.6; }

.panel-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-size: .75rem; color: var(--text-3); line-height: 1.5; }
.panel-foot > span:first-child { white-space: nowrap; }
.panel-foot > span:last-child { max-width: 300px; text-align: end; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1000px) {
    .page { display: flex; flex-direction: column; }
    .panel { display: contents; }
    .panel-top { order: 0; padding: 16px 16px 0; }
    .brand-mobile { display: inline-flex; }
    .stage { order: 1; padding: 8px 16px 0; border-inline-end: 0; background: transparent; gap: 0; }
    .stage > .brand, .stage-copy { display: none; }
    .scene-wrap { max-width: 360px; }
    .auth-panel { order: 2; padding: 12px 16px 28px; }
    .panel-foot { order: 3; padding: 0 16px 20px; flex-direction: column-reverse; align-items: center; text-align: center; gap: 8px; }
    .panel-foot > span:last-child { text-align: center; }
}
@media (max-width: 420px) {
    #gateway-title { font-size: 1.6rem; }
    .stats { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* browser autofill must keep the dark theme */
.input-wrapper input:-webkit-autofill,
.input-wrapper input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--text); caret-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    transition: background-color 99999s ease-out 0s;
}
.input-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset, 0 0 0 4px rgba(61, 214, 224, 0.14);
}
/* avoid a flash of English text before Arabic loads */
html.i18n-pending .page { opacity: 0; }
.page { transition: opacity .2s; }
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }

/* ---------- Continue with Google ---------- */
.oauth-block { margin-bottom: 18px; }
.google-btn {
    width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 11px; cursor: pointer;
    font: 600 .93rem var(--font-body); transition: background .2s, box-shadow .2s, transform .15s;
}
html[dir="rtl"] .google-btn { font-family: var(--font-ar); }
.google-btn:hover { background: #f4f6fa; box-shadow: 0 6px 18px -8px rgba(255,255,255,.35); }
.google-btn:active { transform: translateY(1px); }
.google-btn:disabled { opacity: .7; cursor: wait; }
.or-divider { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--text-3); font-size: .8rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.panel-header:has(.tab-container.hidden) { margin-bottom: 26px; }

/* ---------- returning from Google ---------- */
.auth-panel { position: relative; }
.resume-loader { display: none; }
.auth-panel.resuming > :not(.resume-loader) { visibility: hidden; }
.auth-panel.resuming .resume-loader {
    display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 12px;
    color: var(--text-2); font-size: .95rem;
}
.resume-loader .spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--cyan); animation: spin .7s linear infinite; }
/* ---------- small text buttons ---------- */
.link-btn { align-self: center; background: none; border: 0; color: var(--cyan); font: 500 .84rem var(--font-body); cursor: pointer; padding: 4px; text-decoration: underline; text-underline-offset: 3px; }
html[dir="rtl"] .link-btn { font-family: var(--font-ar); }
.link-btn:disabled { color: var(--text-3); cursor: default; text-decoration: none; }
.success .link-btn { margin-top: 14px; }