/* ============ ZuriPOS — Sign in ============ */
.auth-body { background: #fff; }
.auth { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(420px, 1fr); min-height: 100vh; }

/* ---------- Hero ---------- */
.auth-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(ellipse at 75% 18%, rgba(243,169,82,.20), transparent 50%),
        radial-gradient(ellipse at 20% 85%, rgba(20,154,150,.20), transparent 55%),
        linear-gradient(160deg, #13293b 0%, #0d1d2a 45%, #0a141d 100%);
    color: #fff;
}
.hero-art, .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-photo { object-fit: cover; }
.lamp-glow { animation: flicker 6s ease-in-out infinite; transform-origin: center; }
.lamp-glow:nth-of-type(2) { animation-delay: -2s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
.hero-shade {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(9,20,30,.92) 0%, rgba(9,20,30,.72) 38%, rgba(9,20,30,.15) 75%, rgba(9,20,30,.05) 100%),
                linear-gradient(0deg, rgba(9,20,30,.55) 0%, transparent 30%);
}
.has-photo .hero-shade {
    background: linear-gradient(90deg, rgba(9,22,34,.88) 0%, rgba(9,22,34,.62) 45%, rgba(9,22,34,.2) 100%);
}
.hero-content { position: relative; height: 100%; display: flex; flex-direction: column; padding: 52px 76px 56px; }

.auth-logo { display: flex; align-items: center; gap: 22px; font-size: 38px; letter-spacing: 1.5px; font-weight: 500; }
.auth-logo b { color: #2fc4bd; font-weight: 600; }
.cloche { width: 70px; height: 48px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.hero-copy { margin-top: auto; margin-bottom: auto; max-width: 640px; animation: rise .7s ease both; }
.hero-copy h1 { font-size: clamp(40px, 4.6vw, 66px); font-weight: 800; letter-spacing: -2px; line-height: 1.05; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-copy p { font-size: clamp(19px, 1.9vw, 28px); line-height: 1.4; color: #e6edf3; margin-top: 18px; max-width: 470px; }
.hero-points { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-points li { display: flex; align-items: center; gap: 24px; font-size: 20px; color: #eef3f7; animation: rise .6s ease both; }
.hero-points li:nth-child(2) { animation-delay: .08s; }
.hero-points li:nth-child(3) { animation-delay: .16s; }
.hero-points span {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: rgba(13, 52, 66, .55); border: 2px solid rgba(47,196,189,.55);
    backdrop-filter: blur(6px);
}
.hero-foot { display: flex; align-items: center; gap: 22px; font-size: 16px; letter-spacing: 2.5px; color: #dbe5ee; }
.hero-foot i { width: 48px; height: 2px; background: #2fc4bd; border-radius: 2px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Panel ---------- */
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 48px 24px; background: #fff; }
.auth-card { width: 100%; max-width: 480px; animation: rise .5s ease both; }
.auth-footer { margin-top: 36px; font-size: 13px; color: var(--muted); letter-spacing: .3px; }

.auth-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--teal-50); color: var(--teal-dark); font-weight: 600; font-size: 16px;
}
.auth-badge-warn { background: #fdefdf; color: #c25e00; }
.auth-title { font-size: 44px; font-weight: 800; letter-spacing: -1.2px; margin-top: 22px; line-height: 1.1; color: #0b1622; }
.auth-sub { font-size: 20px; color: var(--text-2); margin-top: 8px; line-height: 1.45; }

.auth-error {
    display: flex; align-items: center; gap: 10px; margin-top: 22px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--red-50); border: 1px solid #f6caca; color: #b42323; font-size: 15px; font-weight: 500;
    animation: shake .35s ease;
}
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.auth-form { display: flex; flex-direction: column; gap: 22px; margin-top: 34px; }
.auth-field { display: flex; flex-direction: column; gap: 10px; font-size: 16px; font-weight: 600; color: #0b1622; }
.auth-input {
    position: relative; display: flex; align-items: center; gap: 14px;
    height: 56px; padding: 0 18px;
    border: 1px solid #d3dbe3; border-radius: 8px; background: #fff;
    color: #4b5866; transition: border-color .15s, box-shadow .15s;
}
.auth-input:hover { border-color: #b8c4cf; }
.auth-input:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,154,150,.14); }
.auth-input input, .auth-input select {
    flex: 1; min-width: 0; height: 100%;
    border: 0; outline: none; background: transparent;
    font: inherit; font-size: 17px; font-weight: 400; color: #0b1622;
}
.auth-input input::placeholder { color: #8a96a3; }
.auth-select select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px; margin-right: -34px; font-weight: 500; }
.auth-select .icon { pointer-events: none; color: #3b4658; }
.reveal { border: 0; background: none; padding: 6px; margin-right: -6px; border-radius: 8px; color: #4b5866; cursor: pointer; display: grid; }
.reveal:hover { color: var(--text); background: #f1f4f7; }
.reveal:focus-visible { outline: 2px solid var(--teal); }
.caps-warning { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #c25e00; }

.auth-row { display: flex; justify-content: flex-end; margin-top: -12px; }
.auth-link { font-size: 16px; color: #1f5fbf; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.auth-link:hover { color: #164a96; }

.auth-submit {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 58px; margin-top: 10px; border: 0; border-radius: 8px;
    background: #12807c; color: #fff; font: inherit; font-size: 21px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 16px rgba(18,128,124,.25);
    transition: background .15s, transform .1s, box-shadow .15s;
}
.auth-submit:hover { background: #0e6e6a; box-shadow: 0 8px 22px rgba(18,128,124,.32); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:focus-visible { outline: 3px solid #0b1622; outline-offset: 2px; }
.auth-submit .spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.auth-submit.is-loading { pointer-events: none; opacity: .9; }
.auth-submit.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-submit-outline { background: #fff; color: var(--teal-dark); border: 1px solid #b9dcd9; box-shadow: none; font-size: 18px; margin-top: 28px; }
.auth-submit-outline:hover { background: var(--teal-50); box-shadow: none; }
a.auth-submit { margin-top: 30px; }

.auth-divider { height: 1px; background: #e2e8ee; margin: 30px 0 28px; }
.auth-help { text-align: center; font-size: 16px; color: var(--text-2); }
.auth-alt { text-align: center; margin-top: 18px; }

.auth-status {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    margin-top: 28px; padding: 18px 20px;
    border: 1px solid #e2e8ee; border-radius: 10px; background: #fbfcfd;
}
.auth-status p { display: flex; align-items: center; gap: 16px; font-size: 16px; color: #0b1622; margin: 0 0 8px; }
.auth-status p .dot-lg { width: 15px; height: 15px; margin: 0; }
.auth-status small { font-size: 15px; color: var(--text-2); }
.auth-status-icon { width: 76px; height: 76px; border-radius: 50%; background: #eef2f6; color: #3b4658; display: grid; place-items: center; flex-shrink: 0; }

.auth-steps { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.auth-steps li { display: flex; gap: 16px; align-items: flex-start; }
.auth-steps li > span { width: 34px; height: 34px; border-radius: 50%; background: var(--teal-50); color: var(--teal-dark); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.auth-steps div { display: flex; flex-direction: column; gap: 3px; padding-top: 5px; }
.auth-steps strong { font-size: 16px; }
.auth-steps small { font-size: 14px; color: var(--muted); }

.demo-accounts { margin-top: 20px; border: 1px dashed #cfd8e2; border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.demo-accounts summary { cursor: pointer; font-weight: 600; color: var(--text-2); }
.demo-accounts summary small { font-weight: 400; color: var(--muted); }
.demo-accounts ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.demo-accounts button {
    width: 100%; display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; text-align: left;
    padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: #f5f7fa; font: inherit; font-size: 14px; cursor: pointer;
}
.demo-accounts button:hover { border-color: var(--teal); background: var(--teal-50); }
.demo-accounts span { font-family: ui-monospace, Consolas, monospace; color: var(--text-2); }
.demo-accounts em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .hero-content { padding: 44px 48px; }
    .auth-panel { padding: 48px 36px 24px; }
}
@media (max-width: 960px) {
    .auth { grid-template-columns: 1fr; }
    .auth-hero { min-height: 300px; }
    .hero-content { padding: 32px 28px 30px; }
    .hero-copy { margin: 36px 0 0; }
    .hero-copy h1 { font-size: 40px; }
    .hero-points, .hero-foot { display: none; }
    .auth-logo { font-size: 28px; gap: 14px; }
    .cloche { width: 52px; height: 36px; }
}
@media (max-width: 520px) {
    .auth-panel { padding: 32px 16px 20px; }
    .auth-title { font-size: 34px; }
    .auth-sub { font-size: 17px; }
    .auth-status-icon { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Change password ---------- */
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: -2px; }
.pw-meter i { height: 5px; border-radius: 3px; background: #e3e8ee; }
.pw-meter i.on.s1 { background: #e0483f; }
.pw-meter i.on.s2 { background: #f2a33c; }
.pw-meter i.on.s3, .pw-meter i.on.s4 { background: #2fb07a; }
.pw-hint { font-size: 13px; font-weight: 500; color: var(--muted); }
.pw-hint.is-bad { color: #c62828; }
.pw-hint.is-good { color: #138a47; }
.auth-back { display: block; text-align: center; margin-top: 18px; }