/* ==========================================================
   Zervope — Auth (login) styles
   Standalone: no Mofi / Bootstrap CSS required on this page.
   ========================================================== */

:root {
    --zv-umber:      #16110A;   /* page */
    --zv-vault:      #211A10;   /* card surface */
    --zv-well:       #120D07;   /* input wells */
    --zv-seam:       #3A2F1E;   /* borders */
    --zv-gold:       #C88401;   /* brand gold (from logo) */
    --zv-gold-hi:    #E9AE3C;
    --zv-gold-lo:    #8F5F02;
    --zv-ivory:      #F4EBDA;   /* primary text */
    --zv-sand:       #A8987C;   /* secondary text */
    --zv-danger:     #F07A5F;

    --zv-chamfer: 26px;
    --zv-font: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html, body { height: 100%; }

body.zv-auth {
    margin: 0;
    font-family: var(--zv-font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--zv-ivory);
    background:
            radial-gradient(120% 80% at 50% 0%, #241B0E 0%, transparent 60%),
            radial-gradient(90% 70% at 50% 110%, #1F170B 0%, transparent 60%),
            var(--zv-umber);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---------- Stage ---------- */
.zv-stage {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 48px 20px;
    isolation: isolate;
}

/* ---------- The split-Z slash (signature element) ---------- */
.zv-slash {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.zv-slash__band {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 210px;
    height: 180vmax;
    transform-origin: center;
    background: linear-gradient(180deg,
    transparent 0%,
    rgba(200, 132, 1, .10) 25%,
    rgba(233, 174, 60, .22) 50%,
    rgba(200, 132, 1, .10) 75%,
    transparent 100%);
}

/* two parallel strokes with a hairline gap, like the logo's cut */
.zv-slash__band--a {
    transform: translate(calc(-50% - 118px), -50%) rotate(40deg);
    animation: zv-in-a 1.1s cubic-bezier(.2, .7, .1, 1) both;
}
.zv-slash__band--b {
    width: 120px;
    transform: translate(calc(-50% + 70px), -50%) rotate(40deg);
    opacity: .7;
    animation: zv-in-b 1.1s .08s cubic-bezier(.2, .7, .1, 1) both;
}

@keyframes zv-in-a {
    from { opacity: 0; transform: translate(calc(-50% - 118px), -58%) rotate(40deg); }
    to   { opacity: 1; transform: translate(calc(-50% - 118px), -50%) rotate(40deg); }
}
@keyframes zv-in-b {
    from { opacity: 0; transform: translate(calc(-50% + 70px), -42%) rotate(40deg); }
    to   { opacity: .7; transform: translate(calc(-50% + 70px), -50%) rotate(40deg); }
}

/* ---------- Panel ---------- */
.zv-panel {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: zv-rise .8s .25s cubic-bezier(.2, .7, .1, 1) both;
}

@keyframes zv-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.zv-logo {
    display: block;
    margin-bottom: 32px;
    line-height: 0;
}
.zv-logo img {
    width: 210px;
    max-width: 60vw;
    height: auto;
}

/* ---------- Card with Z-style chamfered corners ---------- */
.zv-card {
    width: 100%;
    padding: 1px; /* forms the gradient hairline border */
    background: linear-gradient(140deg,
    rgba(233, 174, 60, .65) 0%,
    rgba(200, 132, 1, .18) 35%,
    rgba(58, 47, 30, .9) 65%,
    rgba(200, 132, 1, .45) 100%);
    clip-path: polygon(
            var(--zv-chamfer) 0, 100% 0,
            100% calc(100% - var(--zv-chamfer)),
            calc(100% - var(--zv-chamfer)) 100%,
            0 100%, 0 var(--zv-chamfer));
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
}

.zv-card__inner {
    background:
            linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%),
            var(--zv-vault);
    clip-path: inherit;
    padding: 40px 38px 34px;
}

/* ---------- Form ---------- */
.zv-form__head { margin-bottom: 28px; }

.zv-form__head h1 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--zv-ivory);
}

.zv-form__head p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--zv-sand);
}

.zv-field { margin-bottom: 18px; }

.zv-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #D9CDB6;
}

.zv-input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font: inherit;
    font-size: 14.5px;
    color: var(--zv-ivory);
    background: var(--zv-well);
    border: 1px solid var(--zv-seam);
    border-radius: 10px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.zv-input::placeholder { color: #6E6250; opacity: 1; }

.zv-input:hover { border-color: #54442A; }

.zv-input:focus {
    border-color: var(--zv-gold);
    background: #150F08;
    box-shadow: 0 0 0 3px rgba(200, 132, 1, .2);
}

/* keep autofill on-theme */
.zv-input:-webkit-autofill,
.zv-input:-webkit-autofill:hover,
.zv-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--zv-ivory);
    -webkit-box-shadow: 0 0 0 1000px var(--zv-well) inset;
    caret-color: var(--zv-ivory);
    transition: background-color 9999s;
}

.zv-input--code {
    letter-spacing: .35em;
    font-weight: 500;
}
.zv-input--code::placeholder { letter-spacing: .35em; }

/* ---------- Password show / hide (driven by existing script.js) ---------- */
.zv-input-wrap { position: relative; }
.zv-input-wrap .zv-input { padding-right: 68px; }

.zv-input-wrap .show-hide {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: block;
}

.zv-input-wrap .show-hide span {
    display: inline-block;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--zv-gold-hi);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease;
}
.zv-input-wrap .show-hide span:hover { background: rgba(200, 132, 1, .12); }
.zv-input-wrap .show-hide span::before      { content: "Hide"; }
.zv-input-wrap .show-hide span.show::before { content: "Show"; }

/* ---------- Button ---------- */
.zv-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #1A1206;
    background: linear-gradient(180deg, var(--zv-gold-hi) 0%, var(--zv-gold) 100%);
    border: 0;
    border-radius: 10px;
    box-shadow:
            inset 0 1px 0 rgba(255, 236, 190, .55),
            0 10px 24px -10px rgba(200, 132, 1, .7);
    cursor: pointer;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

.zv-btn:hover {
    filter: brightness(1.06);
    box-shadow:
            inset 0 1px 0 rgba(255, 236, 190, .6),
            0 14px 30px -10px rgba(200, 132, 1, .85);
}
.zv-btn:active { transform: translateY(1px); filter: brightness(.96); }

.zv-btn:focus-visible {
    outline: 2px solid var(--zv-gold-hi);
    outline-offset: 3px;
}

.zv-btn:disabled,
.zv-btn.disabled {
    cursor: progress;
    filter: saturate(.6) brightness(.85);
}

/* ---------- Error holder (filled by main.js) ---------- */
#errorHolder p {
    margin: 16px 0 0;
    padding: 10px 14px;
    font-size: 13px;
    text-align: center;
    color: var(--zv-danger);
    background: rgba(240, 122, 95, .08);
    border: 1px solid rgba(240, 122, 95, .28);
    border-radius: 8px;
}
#errorHolder p:empty { display: none; }

/* ---------- Footer ---------- */
.zv-foot {
    margin-top: 28px;
    font-size: 12px;
    color: #7A6D58;
}

/* ---------- Utility shims (classes kept from old markup) ---------- */
.mb-0 { margin-bottom: 0 !important; }
.position-relative { position: relative; }
.w-100 { width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    :root { --zv-chamfer: 18px; }
    .zv-stage { padding: 32px 14px; align-items: start; }
    .zv-logo { margin: 12px 0 26px; }
    .zv-logo img { width: 170px; }
    .zv-card__inner { padding: 30px 22px 26px; }
    .zv-form__head h1 { font-size: 19px; }
    .zv-slash__band--a { width: 140px; }
    .zv-slash__band--b { width: 80px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .zv-slash__band,
    .zv-panel { animation: none !important; }
    * { transition: none !important; }
}