/* ══════════════════════════════════════════════════════════════
   Dr. Machine — Auth / Utility pages · "Soft Industrial" v2.0
   Shared sheet for login · register · forgot/reset · verify · org_register.
   Loaded AFTER each page's inline <style> to upgrade them to the modern
   soft look (rounded, airy, soft shadows, accessible cyan, NO orange,
   NO isometric grid / corner brackets). Themed via the auth toggle
   (data-theme="dark" | "light"). Self-contained — no JS/HTML changes.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens (override the pages' inline :root) ── */
:root, :root[data-theme="dark"] {
    --bg-primary: #121416;
    --bg-surface: #1E2022;
    --text-primary: #E2E2E5;
    --text-muted: #BDC8D0;
    --structure-cyan: #24A9E0;
    --structure-cyan-muted: #3E484F;     /* used as soft border by inline control bar */
    --activation-orange: #FFB4AB;         /* legacy name → error (dark) */
    --logo-machine: #DAE5ED;
    --logo-tagline: #88929A;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-primary-ar: 'Alexandria', sans-serif;
    --font-primary-en: 'Inter', 'Alexandria', sans-serif;
    --bg-card: #1E2022;
    --success-green: #6DD58C;

    --a-sunken: #1A1C1E;
    --a-faint: #88929A;
    --a-card-border: #2A3036;
    --a-cyan-strong: #24A9E0;             /* button bg on dark (cyan readable) */
    --a-ring: 0 0 0 3px rgba(91, 194, 239, 0.45);
    --a-shadow: 0 10px 34px rgba(0, 0, 0, 0.46);
    --a-page-bg:
        radial-gradient(1100px 560px at 50% -8%, rgba(36,169,224,0.10), transparent 62%),
        radial-gradient(820px 460px at 88% 6%, rgba(45,68,112,0.14), transparent 60%),
        #121416;
    --a-err-bg: rgba(255,180,171,0.10); --a-err-bd: rgba(255,180,171,0.32);
    --a-ok-bg: rgba(109,213,140,0.10);  --a-ok-bd: rgba(109,213,140,0.32);
}

:root[data-theme="light"] {
    --bg-primary: #F8FAFB;
    --bg-surface: #FFFFFF;
    --text-primary: #191C1E;
    --text-muted: #40484E;
    --structure-cyan: #24A9E0;
    --structure-cyan-muted: #E4EAEF;
    --activation-orange: #BA1A1A;
    --logo-machine: #252161;
    --logo-tagline: #6B6C70;
    --bg-card: #FFFFFF;
    --success-green: #198639;

    --a-sunken: #F2F4F6;
    --a-faint: #70787F;
    --a-card-border: #E4EAEF;
    --a-cyan-strong: #0C6E9C;             /* accessible cyan (white text passes AA) */
    --a-ring: 0 0 0 3px rgba(36,169,224,0.18);
    --a-shadow: 0 6px 18px rgba(16,24,40,0.06), 0 18px 40px rgba(16,24,40,0.07);
    --a-page-bg:
        radial-gradient(1100px 560px at 50% -8%, rgba(36,169,224,0.10), transparent 62%),
        radial-gradient(820px 460px at 88% 6%, rgba(45,68,112,0.08), transparent 60%),
        #F8FAFB;
    --a-err-bg: rgba(186,26,26,0.07); --a-err-bd: rgba(186,26,26,0.28);
    --a-ok-bg: rgba(25,134,57,0.07);  --a-ok-bd: rgba(25,134,57,0.28);
}

/* ── Base reset + utilities (moved out of each page's inline <style>) ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
.hidden { display: none !important; }

/* ── Page background: soft glow, kill the isometric grid ── */
body {
    background: var(--a-page-bg) !important;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 40px 16px;
    -webkit-font-smoothing: antialiased;
}
[dir="rtl"] body { font-family: 'Alexandria', sans-serif; }
[dir="ltr"] body { font-family: 'Inter', 'Alexandria', sans-serif; }
body::before, body::after { content: none !important; display: none !important; background: none !important; }

/* ── Container ── */
.login-container { position: relative; z-index: 1; width: 100%; max-width: 430px; padding: 0; }

/* ── Logo block ── */
.logo-section { text-align: center; margin-bottom: 28px; }
.logo-section svg { width: auto; height: auto; margin-bottom: 0; }
.brand-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 12px; }
.brand-name { font-family: 'Alexandria', sans-serif; font-weight: 800; font-size: 22px; color: var(--text-primary); }
.auth-logo-wrap { filter: drop-shadow(0 4px 14px rgba(36,169,224,0.32)); }

/* ── Card (soft, rounded, no corner brackets) ── */
.login-card {
    background: var(--bg-surface);
    border: 1px solid var(--a-card-border);
    border-radius: 18px;
    padding: 34px;
    box-shadow: var(--a-shadow);
    backdrop-filter: none;
    position: relative;
}
.login-card h2 {
    font-family: 'Alexandria', sans-serif;
    font-weight: 800;
    font-size: 21px;
    text-align: center;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.login-card .login-subtitle, .login-subtitle {
    font-size: 13.5px; text-align: center; color: var(--text-muted); margin-bottom: 22px;
}
.corner-marks, .corner-marks-alt { display: none !important; }
.structure-line { width: 100%; height: 1px; background: var(--a-card-border); margin: 22px 0; }

/* ── Form fields ── */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--a-faint); pointer-events: none; }
.form-input {
    width: 100%;
    background: var(--a-sunken);
    border: 1px solid var(--a-card-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    padding: 13px 14px;
    padding-inline-start: 44px;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
[dir="rtl"] .form-input { font-family: 'Alexandria', sans-serif; }
[dir="ltr"] .form-input { font-family: 'Inter', 'Alexandria', sans-serif; }
.form-input::placeholder { color: var(--a-faint); }
.form-input:focus { border-color: var(--structure-cyan); box-shadow: var(--a-ring); background: var(--bg-surface); }

select.form-input {
    appearance: none; -webkit-appearance: none; padding-inline-end: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2388929A' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: calc(100% - 14px) center;
}
[dir="rtl"] select.form-input { background-position: 14px center; }
select.form-input option { background: var(--bg-surface); color: var(--text-primary); }

.password-wrapper { position: relative; }
.password-wrapper .form-input { padding-inline-end: 44px; }
.toggle-password {
    position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--a-faint); cursor: pointer;
    width: 18px; height: 18px; padding: 0; transition: color 0.18s;
}
.toggle-password:hover { color: var(--structure-cyan); }

/* ── Messages ── */
.error-msg {
    display: none; background: var(--a-err-bg); border: 1px solid var(--a-err-bd);
    border-radius: 10px; padding: 11px 14px; margin-bottom: 18px;
    font-size: 13px; text-align: center; color: var(--activation-orange);
}
.error-msg.visible { display: block; }
.error-msg.shake { animation: a-shake 0.4s linear; }
@keyframes a-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-4px)} }
.success-msg {
    display: none; background: var(--a-ok-bg); border: 1px solid var(--a-ok-bd);
    border-radius: 10px; padding: 11px 14px; margin-bottom: 18px;
    font-size: 13px; text-align: center; color: var(--structure-cyan);
}
:root[data-theme="light"] .success-msg { color: #198639; }
.success-msg.visible { display: block; }

/* ── Submit button (accessible cyan, soft) ── */
.btn-submit {
    width: 100%; padding: 14px; background: var(--a-cyan-strong); color: #FFFFFF;
    font-family: 'Alexandria', sans-serif; font-size: 15px; font-weight: 700;
    border: none; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 8px 24px rgba(36,169,224,0.28);
    transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
}
.btn-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.spinner {
    display: none; width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
    border-radius: 50%; animation: a-spin 0.6s linear infinite;
}
.spinner.visible { display: block; }
@keyframes a-spin { to { transform: rotate(360deg); } }

/* ── Links / footer ── */
.login-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.login-links a { font-size: 12.5px; color: var(--a-cyan-strong); text-decoration: none; font-weight: 600; transition: color 0.15s; }
[dir="rtl"] .login-links a { font-family: 'Alexandria', sans-serif; }
.login-links a:hover { text-decoration: underline; }
.home-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
    padding: 10px 18px; border: 1px solid var(--a-card-border); border-radius: 10px;
    background: var(--bg-surface); color: var(--text-muted);
    font-family: 'Alexandria', sans-serif; font-size: 12.5px; letter-spacing: 0;
    text-decoration: none; transition: border-color 0.15s, color 0.15s;
}
.home-link:hover { border-color: var(--structure-cyan); color: var(--a-cyan-strong); }
.login-footer {
    text-align: center; margin-top: 22px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; color: var(--a-faint); opacity: 1; letter-spacing: 0.04em;
}

/* ── Sequential reveal (smoother easing) ── */
.assemble { opacity: 0; transform: translateY(10px); animation: a-rise 0.45s cubic-bezier(.2,0,0,1) forwards; }
.assemble-1 { animation-delay: 0.04s; }
.assemble-2 { animation-delay: 0.10s; }
.assemble-3 { animation-delay: 0.16s; }
.assemble-4 { animation-delay: 0.22s; }
@keyframes a-rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .assemble, .btn-submit, .form-input, .spinner { animation: none !important; transition: none !important; }
    .assemble { opacity: 1; transform: none; }
}