/* Shared visual theme for the public auth pages (login, forgot/reset password).
   Keeping this in one file means the brand panel + process timeline can never
   drift out of sync between pages the way the old per-page inline styles did. */

:root {
    --ink: #1C2B22;
    --ink-soft: #5B6B61;
    --paper: #FAF9F5;
    --surface: #FFFFFF;
    --line: rgba(28, 43, 34, 0.10);
    --forest: #1F6F4A;
    --forest-deep: #123D28;
    --forest-tint: #E9F3EC;
    --gold: #B8863A;
    --gold-tint: #F6EEDF;
    --lime: #BFD630;
    --danger: #C1443A;
    --danger-tint: #FDF1F0;
    --info: #2F7FAE;
    --info-tint: rgba(47, 127, 174, 0.12);
    --shadow: 0 1px 2px rgba(20, 30, 25, 0.04), 0 20px 45px rgba(18, 61, 40, 0.12);
    --card-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 1px 2px rgba(20, 30, 25, 0.05),
        0 24px 48px -16px rgba(18, 61, 40, 0.22),
        0 8px 20px -8px rgba(18, 61, 40, 0.14);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    font-family: 'Inter', sans-serif;
    color: var(--ink);
}

h1, h2, h3, h4, h5 { font-family: 'Fraunces', serif; }

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
}

/* ── Brand / process panel ──────────────────────────────────────────── */
.brand-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 8%, rgba(184, 134, 58, 0.22), transparent 45%),
        linear-gradient(160deg, var(--forest) 0%, #175a3d 45%, var(--forest-deep) 100%);
    background-size: 100% 100%, 220% 220%;
    animation: panelDrift 22s ease-in-out infinite;
    color: #F4F8F5;
    padding: 3.2rem 3.2rem 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@keyframes panelDrift {
    0%, 100% { background-position: 0% 0%, 0% 0%; }
    50%      { background-position: 0% 0%, 100% 60%; }
}

.brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: radial-gradient(circle, #ffffff 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    pointer-events: none;
}

/* Softly drifting food/QA iconography — a live nod to the actual workflow
   (recipes, allergens, audits, training) rather than generic decoration. */
.brand-floaters {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.brand-floaters i {
    position: absolute;
    color: rgba(244, 248, 245, 0.16);
    animation: floatDrift ease-in-out infinite;
    animation-fill-mode: both;
}
@keyframes floatDrift {
    0%   { transform: translateY(14px) translateX(0) rotate(0deg); opacity: 0; }
    12%  { opacity: 1; }
    50%  { transform: translateY(-18px) translateX(10px) rotate(8deg); }
    88%  { opacity: 1; }
    100% { transform: translateY(-46px) translateX(-8px) rotate(-6deg); opacity: 0; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.brand-top { position: relative; z-index: 1; }

.brand-logo-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    padding: 10px 18px;
    box-shadow: var(--shadow);
    animation: fadeUp .6s ease-out both;
}
.brand-logo-chip img {
    height: 30px;
    width: auto;
    display: block;
    animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.brand-heading {
    margin-top: 2.6rem;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 600;
    line-height: 1.25;
    max-width: 30ch;
    color: #ffffff;
    animation: fadeUp .6s ease-out both;
    animation-delay: .1s;
}
.brand-subheading {
    margin-top: .9rem;
    font-size: .98rem;
    color: rgba(244, 248, 245, 0.78);
    max-width: 40ch;
    line-height: 1.6;
    animation: fadeUp .6s ease-out both;
    animation-delay: .2s;
}

/* ── Process timeline ──────────────────────────────────────────────── */
.process-timeline {
    position: relative;
    z-index: 1;
    margin-top: 2.6rem;
    padding-left: 4px;
}
.process-line {
    position: absolute;
    left: 27px;
    top: 27px;
    bottom: 27px;
    width: 2px;
    background: rgba(244, 248, 245, 0.16);
}
.process-line-glow {
    position: absolute;
    left: 27px;
    top: 27px;
    width: 2px;
    height: 46px;
    background: linear-gradient(180deg, var(--gold), rgba(184, 134, 58, 0));
    border-radius: 2px;
    animation: travelDown 6.6s ease-in-out infinite;
}
@keyframes travelDown {
    0%   { transform: translateY(0); opacity: .9; }
    30%  { transform: translateY(0); opacity: .9; }
    36%  { transform: translateY(78px); opacity: .9; }
    63%  { transform: translateY(78px); opacity: .9; }
    69%  { transform: translateY(156px); opacity: .9; }
    96%  { transform: translateY(156px); opacity: .9; }
    100% { transform: translateY(0); opacity: 0; }
}

.process-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 34px;
    animation: fadeUp .6s ease-out both;
}
.process-step:last-child { padding-bottom: 0; }
.process-step:nth-child(1) { animation-delay: .3s; }
.process-step:nth-child(2) { animation-delay: .4s; }
.process-step:nth-child(3) { animation-delay: .5s; }

.step-icon {
    position: relative;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(244, 248, 245, 0.08);
    color: rgba(244, 248, 245, 0.55);
    border: 1px solid rgba(244, 248, 245, 0.18);
    animation: stepGlow 6.6s ease-in-out infinite;
}
.process-step:nth-child(2) .step-icon { animation-delay: 2.2s; }
.process-step:nth-child(3) .step-icon { animation-delay: 4.4s; }

/* Expanding "signal" ring — pings right as each step lights up, reinforcing
   the sense of the workflow moving from stage to stage. */
.step-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    opacity: 0;
    animation: stepPing 6.6s ease-in-out infinite;
}
.process-step:nth-child(2) .step-icon::after { animation-delay: 2.2s; }
.process-step:nth-child(3) .step-icon::after { animation-delay: 4.4s; }

@keyframes stepGlow {
    0%, 30%, 100% {
        background: rgba(244, 248, 245, 0.08);
        color: rgba(244, 248, 245, 0.55);
        border-color: rgba(244, 248, 245, 0.18);
        box-shadow: none;
        transform: scale(1);
    }
    8%, 22% {
        background: var(--gold);
        color: var(--forest-deep);
        border-color: var(--gold);
        box-shadow: 0 0 0 8px rgba(184, 134, 58, 0.16);
        transform: scale(1.07);
    }
}
@keyframes stepPing {
    0%, 6%, 30%, 100% { transform: scale(1); opacity: 0; }
    9%  { opacity: .6; }
    24% { transform: scale(1.4); opacity: 0; }
}

.step-text { padding-top: 8px; }
.step-title { font-weight: 600; font-size: .98rem; color: #ffffff; }
.step-sub { font-size: .82rem; color: rgba(244, 248, 245, 0.68); margin-top: 2px; line-height: 1.5; max-width: 34ch; }

/* ── 3D brand scene — three extruded cards (recipes, audits, training)
   orbiting above a glowing platform, connected by pulsing gold traces.
   The showcase motion (scene-rotator's auto-orbit + each cube's float)
   is pure CSS, so it runs identically on desktop and mobile with no JS
   and no pointer required. The optional mouse parallax on .scene-stage
   is layered on top for fine-pointer desktops only — never load-bearing
   for the animation itself, so touch devices still get the full effect. */
.brand-scene {
    position: relative;
    z-index: 1;
    margin-top: 2.4rem;
    animation: fadeUp .6s ease-out both;
    animation-delay: .55s;
}
.scene-stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 440 / 260;
    margin: 0 auto;
    perspective: 1200px;
    transform-style: preserve-3d;
    transform: rotateX(3deg);
    transition: transform .6s cubic-bezier(.22, .8, .3, 1);
    will-change: transform;
}

/* Soft ambient bloom sitting behind the whole scene. */
.scene-backdrop-glow {
    position: absolute;
    left: 50%;
    top: 58%;
    width: 78%;
    aspect-ratio: 1 / 1;
    max-width: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(191, 214, 48, 0.24), rgba(184, 134, 58, 0.08) 55%, transparent 72%);
    filter: blur(2px);
    animation: sceneCoreGlow 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sceneCoreGlow {
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* The rotator carries every 3D element and is what actually auto-animates —
   a slow, bounded turntable swing (never flips a card away from camera). */
.scene-rotator {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: sceneAutoOrbit 12s ease-in-out infinite;
}
@keyframes sceneAutoOrbit {
    0%, 100% { transform: rotateY(-12deg) rotateX(3deg); }
    50%      { transform: rotateY(12deg) rotateX(8deg); }
}

.scene-orbit-ring {
    position: absolute;
    left: 50%;
    top: 66%;
    width: 66%;
    max-width: 250px;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) rotateX(76deg);
    transform-style: preserve-3d;
    border-radius: 50%;
    border: 1px dashed rgba(191, 214, 48, 0.4);
    pointer-events: none;
}
.scene-orbit-ring::before {
    content: '';
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    border: 1px solid rgba(244, 248, 245, 0.14);
    animation: sceneRingPulse 3.4s ease-in-out infinite;
}
.scene-orbit-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: sceneRingSpin 14s linear infinite;
    background:
        radial-gradient(circle 4px at 100% 50%, var(--gold), transparent 60%);
}
@keyframes sceneRingSpin { to { transform: rotate(360deg); } }
@keyframes sceneRingPulse {
    0%, 100% { transform: scale(1); opacity: .55; }
    50%      { transform: scale(1.12); opacity: .15; }
}

.scene-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene-connectors path { animation: sceneBeamFlow 3.6s linear infinite; }
@keyframes sceneBeamFlow { to { stroke-dashoffset: -14; } }

.scene-card {
    position: absolute;
    width: 28%;
    transform: translate(-50%, -100%);
    transform-style: preserve-3d;
}
.scene-card--recipes { left: 19%; top: 52%; }
.scene-card--audits  { left: 50%; top: 24%; }
.scene-card--training{ left: 81%; top: 52%; }

.scene-card-float {
    transform-style: preserve-3d;
    animation: sceneCardFloat 6s ease-in-out infinite;
}
.scene-card--recipes .scene-card-float { animation-duration: 6.4s; animation-delay: 0s; }
.scene-card--audits  .scene-card-float { animation-duration: 7.2s; animation-delay: .4s; }
.scene-card--training .scene-card-float{ animation-duration: 5.8s; animation-delay: .9s; }
@keyframes sceneCardFloat {
    0%, 100% { transform: translateY(0) translateZ(0) rotateZ(0deg); }
    50%      { transform: translateY(-10px) translateZ(10px) rotateZ(1deg); }
}

/* A genuine extruded box — front/side/bottom faces in real 3D space —
   rather than a flat panel faked with a drop shadow. */
.scene-cube {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transform: rotateX(12deg) rotateY(-10deg);
    animation: sceneCubeRock 6s ease-in-out infinite;
}
.scene-card--audits .scene-cube { transform: rotateX(9deg) rotateY(0deg) scale(1.1); animation-delay: .3s; }
.scene-card--training .scene-cube { transform: rotateX(12deg) rotateY(10deg); animation-delay: .6s; }
@keyframes sceneCubeRock {
    0%, 100% { rotate: y -4deg; }
    50%      { rotate: y 4deg; }
}

.cube-face--front {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 13px 8px 14px;
    background: linear-gradient(165deg, #FFFFFF, var(--paper));
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 4px rgba(10, 28, 19, 0.18);
    transform: translateZ(9px);
    backface-visibility: hidden;
}
.cube-face--side {
    position: absolute;
    top: 3px;
    right: -9px;
    bottom: -9px;
    width: 9px;
    background: linear-gradient(180deg, rgba(9, 34, 22, 0.6), rgba(9, 34, 22, 0.22));
    transform: rotateY(90deg);
    transform-origin: left center;
    border-radius: 0 8px 8px 0;
    backface-visibility: hidden;
}
.cube-face--bottom {
    position: absolute;
    left: 3px;
    right: -9px;
    bottom: -9px;
    height: 9px;
    background: linear-gradient(180deg, rgba(9, 34, 22, 0.5), rgba(9, 34, 22, 0.1));
    transform: rotateX(-90deg);
    transform-origin: top center;
    border-radius: 0 0 10px 8px;
    backface-visibility: hidden;
}
.scene-cube::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -22px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(6, 22, 15, 0.4), transparent 72%);
    transform: translateZ(-4px);
}

.cube-face--front i {
    font-size: 1.05rem;
    color: var(--gold);
}
.cube-face--front span {
    font-size: .72rem;
    font-weight: 600;
    color: var(--forest-deep);
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Small sparks drifting up past the scene — cheap, GPU-friendly ambiance
   that reinforces the "always-on" feel without any JS. */
.scene-particles { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.scene-particles span {
    position: absolute;
    bottom: 30%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 6px 2px rgba(191, 214, 48, 0.55);
    opacity: 0;
    animation: sceneParticleRise 5.5s ease-in infinite;
}
.scene-particles span:nth-child(1) { left: 24%; animation-delay: 0s; }
.scene-particles span:nth-child(2) { left: 42%; animation-delay: 1.2s; background: var(--gold); box-shadow: 0 0 6px 2px rgba(184, 134, 58, 0.5); }
.scene-particles span:nth-child(3) { left: 58%; animation-delay: 2.4s; }
.scene-particles span:nth-child(4) { left: 76%; animation-delay: 3.4s; background: var(--gold); box-shadow: 0 0 6px 2px rgba(184, 134, 58, 0.5); }
.scene-particles span:nth-child(5) { left: 50%; animation-delay: 4.3s; }
@keyframes sceneParticleRise {
    0%   { transform: translateY(0) translateZ(0); opacity: 0; }
    15%  { opacity: .9; }
    85%  { opacity: .6; }
    100% { transform: translateY(-70px) translateZ(20px); opacity: 0; }
}

.scene-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 1.1rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(244, 248, 245, 0.55);
}
.scene-caption i { font-size: .68rem; color: var(--gold); }

@media (pointer: coarse) {
    .scene-stage { transform: rotateX(3deg) !important; transition: none; }
}

/* ── Ambient activity graph — a small isometric bar chart + trend line
   that never stops moving, purely to keep the panel feeling alive.
   Deliberately unlabeled: no counts, percentages or "live" claims, since
   there's no real session data to back a number on a pre-login page. */
.brand-metrics {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
    animation: fadeUp .6s ease-out both;
    animation-delay: .62s;
}
.metrics-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 64px;
    padding: 0 2px;
}
.metrics-bar {
    position: relative;
    width: 13px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, rgba(191, 214, 48, 0.9), rgba(31, 111, 74, 0.85));
    animation: barRise 3.4s ease-in-out infinite;
    animation-delay: var(--d);
}
/* Skewed top + side faces give each bar the same believable "thickness"
   as the scene cards above, without a second full 3D layer. */
.metrics-bar::before {
    content: '';
    position: absolute;
    top: -5px; left: 0;
    width: 100%; height: 5px;
    background: rgba(233, 243, 236, 0.85);
    transform: skewX(-40deg);
    transform-origin: bottom left;
    border-radius: 2px 2px 0 0;
}
.metrics-bar::after {
    content: '';
    position: absolute;
    top: 0; right: -5px;
    width: 5px; height: 100%;
    background: rgba(9, 34, 22, 0.65);
    transform: skewY(-45deg);
    transform-origin: top left;
}
.metrics-bar--peak { background: linear-gradient(180deg, rgba(212, 175, 116, 0.95), rgba(184, 134, 58, 0.9)); }
.metrics-bar--peak::before { background: rgba(246, 238, 223, 0.9); }
.metrics-bar--peak::after { background: rgba(123, 88, 32, 0.7); }

@keyframes barRise {
    0%, 100% { height: 30%; }
    50%      { height: var(--h); }
}

.metrics-trend {
    display: block;
    width: 100%;
    max-width: 300px;
    height: 26px;
    margin-top: 10px;
    overflow: visible;
}
.metrics-trend-path {
    fill: none;
    stroke: rgba(184, 134, 58, 0.55);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 4 5;
    animation: trendFlow 5s linear infinite;
}
@keyframes trendFlow {
    to { stroke-dashoffset: -90; }
}
.metrics-trend-dot {
    fill: var(--gold);
    animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: .55; r: 2.6; }
    50%      { opacity: 1;   r: 3.6; }
}

.metrics-caption {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: .7rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(244, 248, 245, 0.5);
}
.metrics-caption i { font-size: .68rem; color: var(--gold); }

.brand-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    color: rgba(244, 248, 245, 0.55);
    border-top: 1px solid rgba(244, 248, 245, 0.14);
    padding-top: 1.1rem;
    margin-top: 2rem;
    animation: fadeUp .6s ease-out both;
    animation-delay: .6s;
}

/* ── Form panel (shared shell — page-specific fields go in the page) ── */
.form-panel {
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
}

/* Elevated ivory card — the form's real home. Layered shadows read as
   soft, believable depth rather than a flat drop-shadow. */
.form-panel-inner {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 2.75rem 2.5rem 2.5rem;
    box-shadow: var(--card-shadow);
    animation: cardRise .6s cubic-bezier(.22, .8, .3, 1) both;
}
.form-panel-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--lime), var(--gold));
    opacity: .75;
}
@keyframes cardRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.form-eyebrow {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--forest);
    animation: fadeUp .5s ease-out both;
    animation-delay: .15s;
}
.form-title {
    font-size: 1.65rem; font-weight: 600; margin: .35rem 0 .3rem; color: var(--ink);
    animation: fadeUp .5s ease-out both;
    animation-delay: .22s;
}
.form-subtitle {
    color: var(--ink-soft); font-size: .92rem; margin-bottom: 2rem;
    animation: fadeUp .5s ease-out both;
    animation-delay: .29s;
}

.field-group {
    margin-bottom: 1.2rem;
    animation: fadeUp .5s ease-out both;
}
.field-group:nth-of-type(1) { animation-delay: .36s; }
.field-group:nth-of-type(2) { animation-delay: .43s; }
.field-group label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: .4rem;
}
.input-wrap { position: relative; }
.input-wrap i.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
    font-size: .95rem;
    pointer-events: none;
}
.input-wrap input[type="text"],
.input-wrap input[type="email"],
.input-wrap input[type="password"] {
    width: 100%;
    padding: 13px 16px 13px 42px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: .96rem;
    color: var(--ink);
    /* Subtle inset depth rather than a flat fill. */
    box-shadow: inset 0 1px 2px rgba(28, 43, 34, 0.05);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input-wrap input:focus {
    outline: none;
    border-color: var(--forest);
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(28, 43, 34, 0.04), 0 0 0 3px var(--forest-tint);
}
.input-wrap input:focus ~ i.input-icon { color: var(--forest); }
.input-wrap input[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--danger-tint);
}
.input-wrap input[aria-invalid="true"]:focus {
    box-shadow: inset 0 1px 2px rgba(28, 43, 34, 0.04), 0 0 0 3px rgba(193, 68, 58, 0.16);
}
.input-wrap input.has-toggle { padding-right: 44px; }

.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.password-toggle:hover { color: var(--forest); background: var(--forest-tint); }
.password-toggle:focus-visible {
    outline: 2px solid var(--forest);
    outline-offset: 2px;
}

.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: .45rem;
    font-size: .78rem;
    color: var(--danger);
    line-height: 1.4;
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: .3rem 0 1.6rem;
    font-size: .86rem;
    animation: fadeUp .5s ease-out both;
    animation-delay: .5s;
}
.remember-check { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.remember-check input { width: 16px; height: 16px; accent-color: var(--forest); cursor: pointer; }
.auth-link { color: var(--forest); text-decoration: none; font-weight: 500; }
.auth-link:hover { text-decoration: underline; }

.btn-auth {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-weight: 600;
    font-size: .96rem;
    color: #fff;
    background: linear-gradient(135deg, var(--forest), var(--forest-deep));
    box-shadow: 0 10px 22px rgba(31, 111, 74, 0.28);
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: fadeUp .5s ease-out both;
    animation-delay: .57s;
}
.btn-auth:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(31, 111, 74, 0.34); }
.btn-auth:active { transform: translateY(0); }
.btn-auth:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.btn-auth:disabled { opacity: .75; cursor: default; transform: none; }
.btn-auth::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
    transition: left .6s ease;
}
.btn-auth:hover::after { left: 120%; }

.btn-auth.is-loading { cursor: progress; }
.btn-auth .btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: btnSpin .7s linear infinite;
}
.btn-auth.is-loading .btn-spinner { display: inline-block; }
.btn-auth.is-loading i.fa-sign-in-alt { display: none; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

.back-to-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 1.4rem;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .88rem;
    transition: color .15s ease;
}
.back-to-login:hover { color: var(--forest); }

.auth-alert {
    border-radius: 10px;
    padding: .9rem 1.1rem;
    font-size: .86rem;
    line-height: 1.5;
    margin-bottom: 1.4rem;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: fadeUp .35s ease-out both;
}
.auth-alert i { margin-top: 2px; }
.auth-alert.info    { background: var(--info-tint);   color: var(--info); }
.auth-alert.warning  { background: var(--gold-tint);   color: var(--gold); }
.auth-alert.danger  { background: var(--danger-tint); color: var(--danger); }

.recovery-box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.4rem;
}
.recovery-box .label { font-weight: 600; font-size: .84rem; color: var(--ink); margin-bottom: .5rem; }
.recovery-box a {
    display: block;
    color: var(--forest);
    word-break: break-all;
    font-size: .85rem;
    margin-bottom: .6rem;
}
.recovery-box .hint { font-size: .78rem; color: var(--ink-soft); margin: 0; }

.page-footer {
    margin-top: 2.4rem;
    text-align: center;
    font-size: .74rem;
    color: var(--ink-soft);
}
.seal-container { line-height: 0; margin-top: -6px; margin-bottom: -6px; }
#DigiCertClickID_5PrQdn3Y { margin: 0 auto !important; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .auth-shell { grid-template-columns: 1fr; }
    /* Login fields are the reason someone lands here — put the form panel
       first in the stacked mobile layout so it's visible without scrolling,
       and let the compact brand header follow underneath. */
    .form-panel { order: -1; padding: 2.2rem 1.5rem 1.5rem; }
    .form-panel-inner { max-width: 460px; border-radius: 18px; padding: 2.2rem 1.8rem; }
    .brand-panel { padding: 2rem 1.6rem 1.6rem; }
    .brand-heading { max-width: none; margin-top: 1.8rem; }
    .brand-subheading { max-width: none; }
    .process-step { padding-bottom: 22px; }
    .step-sub { display: none; }
    .step-icon { width: 44px; height: 44px; font-size: 1rem; }
    .process-line, .process-line-glow { left: 22px; }
    /* The bar-chart metrics strip is the first thing to go on a shorter,
       narrower viewport — but the 3D scene stays and just scales down,
       since it's the animation this page is meant to show off, on every
       device, not just wide desktops. */
    .brand-scene { margin-top: 1.8rem; }
    .scene-stage { max-width: 320px; }
    .brand-metrics { display: none; }
}
@media (max-width: 767.98px) {
    /* Floating icons compete with the timeline for a much shorter panel
       on tablets/phones — keep the panel calm and let the timeline read. */
    .brand-floaters i:nth-child(n+5) { display: none; }
}
@media (max-width: 575.98px) {
    .brand-panel { padding: 1.7rem 1.25rem 1.3rem; }
    .brand-logo-chip { padding: 8px 14px; }
    .brand-logo-chip img { height: 24px; }
    .brand-heading { font-size: 1.3rem; margin-top: 1.4rem; }
    .brand-subheading { font-size: .86rem; }
    .process-timeline { margin-top: 1.4rem; }
    .form-panel { padding: 1.75rem 1rem 2.25rem; }
    .form-panel-inner { padding: 1.9rem 1.4rem; }
    .brand-floaters i { display: none; }
    .brand-scene { margin-top: 1.4rem; }
    .scene-stage { max-width: 260px; }
    .cube-face--front { padding-top: 10px; }
}

/* Short laptop screens: trim vertical rhythm rather than clip content —
   the page still scrolls naturally if it needs to. */
@media (min-width: 992px) and (max-height: 760px) {
    .brand-panel { padding: 2.2rem 3rem 2rem; }
    .brand-heading { margin-top: 1.6rem; }
    .process-timeline { margin-top: 1.6rem; }
    .process-step { padding-bottom: 22px; }
    .brand-scene { margin-top: 1.6rem; }
    .scene-stage { max-width: 360px; }
    .brand-metrics { margin-top: 1.2rem; }
    .metrics-bars { height: 46px; }
    .metrics-trend { margin-top: 6px; }
    .form-panel-inner { padding: 2.2rem 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .scene-stage { transform: none !important; }
    .scene-rotator { transform: rotateY(0deg) rotateX(4deg) !important; }
}