/* Login page — the same design as the full Arcivéo Monitor login (public/login.php there). */

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

/* The accent is rationed: focus ring, brand mark, lock glyph and the rule in the
   brand pane, nowhere else. */
:root {
    color-scheme: dark;
    --pane:       #030605;
    --bg:         #050908;
    --field:      #030605;
    --line:       rgba(94,234,212,.18);
    --line-hover: rgba(94,234,212,.26);
    --line-soft:  rgba(94,234,212,.10);
    --grid:       rgba(94,234,212,.03);
    --t1:         #f2f5f7;
    --t2:         #8bb0a7;
    --t3:         #6b8f88;
    --accent:     #2dd4bf;
    --accent-soft: rgba(45,212,191,.16);
    --btn-bg:     #0c7d72;
    --btn-fg:     #ffffff;
    --btn-hover:  #0e9387;
    --red:        #f06464;
    --red-soft:   rgba(240,100,100,.09);
    --amber:      #f0a030;
    --mark-op:    .5;
    --seam:       rgba(45,212,191,.34);
    --ambient:    rgba(255,255,255,.03);
    --halo:       rgba(45,212,191,.17);
    --fill:       rgba(255,255,255,.022);
    --vignette:   rgba(0,0,0,.5);
    --inset-hi:   rgba(255,255,255,.03);
    --btn-glow:   rgba(12,125,114,.5);
}

[data-theme="light"] {
    color-scheme: light;
    --pane:       #d3ded9;
    --bg:         #e9f1ee;
    --field:      #f2f8f6;
    --line:       rgba(6,60,55,.15);
    --line-hover: rgba(6,60,55,.30);
    --line-soft:  rgba(6,60,55,.08);
    --grid:       rgba(6,60,55,.035);
    --t1:         #0b1a17;
    --t2:         #47615a;
    --t3:         #6b837c;
    --accent:     #0d9488;
    --accent-soft: rgba(13,148,136,.13);
    --btn-bg:     #0c7d72;
    --btn-fg:     #ffffff;
    --btn-hover:  #0b6b62;
    --red:        #dc2626;
    --red-soft:   rgba(220,38,38,.06);
    --amber:      #b45309;
    --mark-op:    .10;
    --seam:       rgba(13,148,136,.32);
    --ambient:    rgba(13,148,136,.05);
    --halo:       rgba(13,148,136,.13);
    --fill:       rgba(242,248,246,.55);
    --vignette:   rgba(6,60,55,.08);
    --inset-hi:   rgba(255,255,255,.75);
    --btn-glow:   rgba(12,125,114,.26);
}

::selection { background: var(--accent-soft); color: var(--t1); }

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--t1);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.ic { display: block; flex: none; }

/* ── Left: brand half ── */
.lp-pane {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 48px 52px;
    background:
        radial-gradient(125% 105% at 50% 48%, transparent 38%, var(--vignette) 100%),
        radial-gradient(480px 480px at 50% 48%, var(--halo), transparent 80%),
        radial-gradient(700px 480px at 8% 106%, var(--accent-soft), transparent 64%),
        radial-gradient(90% 78% at 50% 48%, var(--fill), transparent 72%),
        var(--pane);
    border-inline-end: 1px solid var(--line);
}

.lp-pane::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(128% 96% at 16% 34%, #000 0%, rgba(0,0,0,.5) 48%, transparent 84%);
            mask-image: radial-gradient(128% 96% at 16% 34%, #000 0%, rgba(0,0,0,.5) 48%, transparent 84%);
}

/* The mark as a silhouette standing in front of the halo, not a glowing object. */
.lp-pane::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(78%, 640px);
    aspect-ratio: 1 / 1;
    background: url('icons/logo-mark.svg') center / contain no-repeat;
    filter: brightness(0);
    opacity: var(--mark-op);
    pointer-events: none;
}

.lp-mark { position: relative; display: flex; align-items: center; gap: 12px; }
.lp-mark img { width: 26px; height: 26px; display: block; }
.lp-mark span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--t1);
}

/* Edition mark: the same mono caps as "MONITOR · FREE" in the panel's sidebar. */
.lp-edition {
    font-style: normal;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--accent);
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--line);
}

.lp-pane-foot { position: relative; }
.lp-pane-foot hr {
    width: 48px;
    height: 1px;
    border: 0;
    background: var(--accent);
    opacity: .75;
    margin-bottom: 18px;
}
.lp-pane-foot p {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--t2);
    max-width: 16ch;
    line-height: 1.3;
}

/* ── Right: form half ── */
.lp-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 40px;
    background: radial-gradient(720px 560px at 50% 46%, var(--ambient), transparent 72%);
}

.lp-main::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: -1px;
    width: 1px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, var(--seam) 38%, var(--seam) 62%, transparent 100%);
}

.lp-form { width: 100%; max-width: min(344px, 100%); }

.lp-title {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
}

.lp-host {
    margin-top: 6px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--t3);
    overflow-wrap: anywhere;
}

.lp-fields { margin-top: 30px; }
.lp-field + .lp-field { margin-top: 16px; }

.lp-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t2);
}

.lp-input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    font: inherit;
    color: var(--t1);
    caret-color: var(--accent);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
    box-shadow: inset 0 1px 0 var(--inset-hi);
    transition: border-color .15s, box-shadow .15s;
}
.lp-input:hover { border-color: var(--line-hover); }
.lp-input:focus {
    border-color: var(--accent);
    box-shadow: inset 0 1px 0 var(--inset-hi), 0 0 0 3px var(--accent-soft);
}
.lp-input:-webkit-autofill,
.lp-input:-webkit-autofill:hover,
.lp-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--t1);
    -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
    transition: background-color 9999s ease-out 0s;
}

.lp-pw { position: relative; }
.lp-pw .lp-input { padding-inline-end: 44px; }
.lp-pw-btn {
    position: absolute;
    inset-inline-end: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t3);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: color .15s, background .15s;
}
.lp-pw-btn:hover { color: var(--t1); background: var(--line-soft); }
.lp-pw-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lp-pw-btn [hidden] { display: none; }

.lp-caps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--amber);
}
.lp-caps[hidden] { display: none; }

.lp-btn {
    width: 100%;
    height: 44px;
    margin-top: 26px;
    font: inherit;
    font-weight: 600;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    outline: none;
    box-shadow: 0 6px 18px -9px var(--btn-glow);
    transition: background .15s, box-shadow .15s, opacity .15s, transform .06s;
}
.lp-btn:hover:not(:disabled) { background: var(--btn-hover); box-shadow: 0 9px 24px -9px var(--btn-glow); }
.lp-btn:active:not(:disabled) { transform: translateY(1px); }
.lp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lp-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    margin-top: 22px;
    font-size: 13px;
    color: var(--red);
    background: var(--red-soft);
    border: 1px solid var(--red);
    border-radius: 8px;
    overflow-wrap: anywhere;
}
.lp-alert .ic { margin-top: 2px; }

.lp-conn {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    font-size: 12px;
    color: var(--t3);
    overflow-wrap: anywhere;
}
.lp-conn .ic { color: var(--accent); }
.lp-conn.warn, .lp-conn.warn .ic { color: var(--amber); }
.lp-conn[hidden] { display: none; }

/* Mobile Safari zooms in on focused fields under 16px; raise the size on touch. */
@media (pointer: coarse) {
    .lp-input { font-size: 16px; }
}

@media (max-width: 900px) {
    body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .lp-pane {
        flex-direction: row;
        align-items: center;
        padding: 16px 22px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--line);
    }
    .lp-pane::after, .lp-pane-foot { display: none; }
    .lp-main::before { display: none; }
    .lp-main { padding: 40px 22px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}