/*
 * WATAN Engine Login — Dark Tactical Editorial
 * Applies only to .watan-login-body and its login surface.
 * Watan Crimson #E51B23, charcoal depth, original emblem, and mobile-first rhythm.
 */

:root {
    --watan-crimson: #e51b23;
    --watan-crimson-soft: #ff4b50;
    --watan-ink: #08090d;
    --watan-panel: #171923;
    --watan-input: #05070d;
    --watan-text: #f6f5f1;
    --watan-muted: #a2a3ae;
    --watan-dim: #6c6f7c;
}

html:has(.watan-login-body),
body.watan-login-body {
    min-height: 100%;
    background: var(--watan-ink) !important;
}

body.watan-login-body {
    margin: 0;
    overflow-x: hidden;
    color: var(--watan-text);
    font-family: 'Rajdhani', 'Poppins', sans-serif !important;
}

body.watan-login-body main.watan-login-main,
body.watan-login-body .watan-login-container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
}

.watan-login-page {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 28px 18px 30px;
    isolation: isolate;
    background-color: var(--watan-ink);
    background-image: url('/manus-storage/watan-8ball-login-hero_685a9dae.png'), url('../img/watan-login-bg.png');
    background-position: center;
    background-size: cover;
}

.watan-login-page::before {
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        radial-gradient(circle at 50% 14%, rgba(91, 11, 20, .24), transparent 32%),
        linear-gradient(180deg, rgba(4, 5, 9, .20) 0%, rgba(6, 8, 13, .74) 50%, rgba(7, 8, 12, .98) 100%);
    content: '';
}

.watan-login-backdrop {
    position: absolute;
    z-index: -2;
    inset: -10%;
    opacity: .32;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 22%, rgba(229, 27, 35, .06) 22.2% 22.5%, transparent 22.7% 100%),
        linear-gradient(295deg, transparent 0 73%, rgba(229, 27, 35, .06) 73.2% 73.45%, transparent 73.7% 100%),
        radial-gradient(ellipse at 82% 86%, rgba(190, 16, 28, .16), transparent 34%);
}

.watan-login-shell {
    width: min(100%, 468px);
    animation: watan-login-rise .28s cubic-bezier(.23, 1, .32, 1) both;
}

.watan-login-brand {
    position: relative;
    margin: 0 auto 25px;
    text-align: center;
}

.watan-login-brand__glow {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 180px;
    height: 110px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(229, 27, 35, .21), transparent 70%);
    filter: blur(16px);
    pointer-events: none;
}

.watan-login-brand__logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 146px;
    height: 146px;
    margin: 0 auto 2px;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: drop-shadow(0 15px 24px rgba(0, 0, 0, .36));
}

.watan-login-brand__eyebrow,
.watan-login-card__kicker,
.watan-login-card__index {
    color: #e6323b;
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .22em;
    line-height: 1;
}

.watan-login-brand__eyebrow {
    margin: 5px 0 13px;
}

.watan-login-brand h1 {
    margin: 0;
    color: #faf9f6;
    font-size: clamp(2.6rem, 9vw, 3.7rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: .95;
}

.watan-login-brand__subtitle {
    margin: 12px auto 0;
    max-width: 320px;
    color: var(--watan-muted);
    font-size: .98rem;
    font-weight: 400;
    line-height: 1.6;
}

.watan-login-notice {
    position: relative;
    z-index: 2;
    margin: 0 0 14px;
    border: 1px solid rgba(229, 27, 35, .28);
    border-radius: 12px;
    background: rgba(58, 16, 21, .82);
    color: #f7b3b5;
    font-family: 'Cairo', sans-serif;
    font-size: .81rem;
    line-height: 1.55;
}

.watan-login-notice--success {
    border-color: rgba(103, 194, 140, .32);
    background: rgba(13, 49, 34, .82);
    color: #b9ebcb;
}

.watan-login-notice--warning {
    border-color: rgba(229, 27, 35, .28);
    background: rgba(58, 16, 21, .82);
    color: #f7b3b5;
}

.watan-login-card {
    position: relative;
    overflow: hidden;
    padding: 25px 21px 18px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(25, 27, 37, .91), rgba(13, 15, 23, .95));
    box-shadow: 0 25px 70px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(15px);
}

.watan-login-card::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 27, 35, .55));
    content: '';
}

.watan-login-card__accent {
    width: 46px;
    height: 3px;
    margin-bottom: 19px;
    border-radius: 999px;
    background: var(--watan-crimson);
    box-shadow: 0 0 18px rgba(229, 27, 35, .46);
}

.watan-login-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.watan-login-card__heading h2 {
    margin: 7px 0 0;
    color: #f5f4f0;
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.1;
}

.watan-login-card__index {
    padding-top: 4px;
    color: #6e707c;
    font-size: .65rem;
    letter-spacing: .16em;
    white-space: nowrap;
}

.watan-login-field {
    margin-bottom: 18px;
}

.watan-login-field label {
    display: block;
    margin-bottom: 8px;
    color: #dedee2;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .035em;
}

.watan-login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 13px;
    background: rgba(3, 5, 11, .70);
    transition: border-color .16s ease-out, box-shadow .16s ease-out, background .16s ease-out;
}

.watan-login-input-wrap:focus-within {
    border-color: rgba(229, 27, 35, .74);
    background: rgba(3, 5, 11, .88);
    box-shadow: 0 0 0 3px rgba(229, 27, 35, .12), 0 10px 25px rgba(0, 0, 0, .16);
}

.watan-login-input-icon {
    display: grid;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    margin-left: 16px;
    place-items: center;
    color: #767a88;
}

.watan-login-input-icon svg,
.watan-login-visibility svg,
.watan-login-submit svg,
.watan-login-footer__security svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.watan-login-input-wrap input {
    min-width: 0;
    flex: 1;
    height: 54px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #f6f5f1;
    font-family: 'Cairo', sans-serif;
    font-size: .95rem;
}

.watan-login-input-wrap input::placeholder {
    color: #6e7180;
}

.watan-login-visibility {
    display: grid;
    width: 48px;
    height: 48px;
    margin-right: 3px;
    padding: 14px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #777b8a;
    transition: color .16s ease-out, background .16s ease-out;
}

.watan-login-visibility:hover,
.watan-login-visibility:focus-visible {
    background: rgba(229, 27, 35, .10);
    color: #ec4c54;
}

.watan-login-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 22px;
}

.watan-login-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #a7a8b2;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: .78rem;
    user-select: none;
}

.watan-login-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.watan-login-check__box {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 1px solid #565a66;
    border-radius: 4px;
    transition: border-color .16s ease-out, background .16s ease-out, box-shadow .16s ease-out;
}

.watan-login-check input:checked + .watan-login-check__box {
    border-color: var(--watan-crimson);
    background: var(--watan-crimson);
    box-shadow: 0 0 12px rgba(229, 27, 35, .26);
}

.watan-login-check input:checked + .watan-login-check__box::after {
    position: absolute;
    top: 1px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    content: '';
    transform: rotate(45deg);
}

.watan-login-meta__hint {
    color: #626571;
    font-size: .72rem;
    letter-spacing: .03em;
    text-align: right;
}

.watan-login-submit {
    display: flex;
    width: 100%;
    min-height: 57px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(255, 104, 109, .36);
    border-radius: 13px;
    background: linear-gradient(100deg, #b8121b 0%, #e51b23 57%, #af101a 100%);
    box-shadow: 0 14px 27px rgba(166, 17, 25, .28), inset 0 1px 0 rgba(255, 255, 255, .20);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .04em;
    transition: transform .16s ease-out, filter .16s ease-out, box-shadow .16s ease-out;
}

.watan-login-submit svg {
    width: 18px;
    height: 18px;
}

.watan-login-submit:hover {
    filter: brightness(1.1);
    box-shadow: 0 17px 32px rgba(166, 17, 25, .38), inset 0 1px 0 rgba(255, 255, 255, .23);
    transform: translateY(-1px);
}

.watan-login-submit:active {
    transform: scale(.97);
}

.watan-login-card__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
    color: #777985;
    font-size: .75rem;
    letter-spacing: .04em;
}

.watan-login-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--watan-crimson);
    box-shadow: 0 0 10px rgba(229, 27, 35, .86);
}

.watan-login-footer {
    padding: 21px 12px 0;
    color: #858792;
    text-align: center;
}

.watan-login-footer p {
    margin: 0;
    font-family: 'Cairo', sans-serif;
    font-size: .86rem;
}

.watan-login-footer p a {
    color: #f0444c;
    font-weight: 700;
    text-decoration: none;
}

.watan-login-footer p a:hover {
    color: #ff7a7e;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.watan-login-footer__security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
    color: #646772;
    font-size: .76rem;
    letter-spacing: .03em;
}

.watan-login-footer__security svg {
    width: 16px;
    height: 16px;
    color: #aa2129;
}

.watan-login-footer__signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: #e5e4df;
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .30em;
    opacity: .55;
}

.watan-login-footer__signature b {
    color: var(--watan-crimson);
    letter-spacing: 0;
}

.watan-login-error {
    display: block;
    margin-top: 7px;
    color: #ff8387;
    font-family: 'Cairo', sans-serif;
    font-size: .75rem;
}

@keyframes watan-login-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 640px) {
    .watan-login-page {
        padding: 46px 28px;
    }

    .watan-login-card {
        padding: 28px 30px 20px;
    }

    .watan-login-brand {
        margin-bottom: 29px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}