/* ============================================================
   DIWANCHO — صفحهٔ ورود
   وابسته به tokens.css (متغیرهای --dw-*)
   ============================================================ */

* { font-family: var(--dw-font); }

body {
    background: var(--dw-bg);
    min-height: 100vh;
    color: var(--dw-text);
}

.login-shell { min-height: 100vh; display: flex; }

/* ---------- پنل برند ---------- */
.brand-panel {
    flex: 1 1 46%;
    background: linear-gradient(160deg, var(--dw-side-bg) 0%, var(--dw-side-bg-2) 100%);
    color: #fff;
    display: flex; flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 6vw, 5rem);
    position: relative; overflow: hidden;
}
.brand-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: .9;
}
.brand-panel__inner { position: relative; z-index: 1; }

.brand-badge { display: inline-flex; align-items: center; gap: .9rem; }
.brand-mark {
    width: 58px; height: 58px; border-radius: var(--dw-radius-lg);
    background: linear-gradient(135deg, var(--dw-gold), var(--dw-gold-dark));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.7rem; font-weight: var(--dw-fw-black); color: #fff;
    box-shadow: 0 8px 24px rgba(201,169,97,.35);
    flex-shrink: 0; overflow: hidden;
}
.brand-title { font-size: 1.9rem; font-weight: var(--dw-fw-black); margin: 0; }
.brand-sub   { color: rgba(255,255,255,.5); margin: 0; letter-spacing: .06em; font-size: .85rem; }

.gold-line {
    display: block;
    width: 64px; height: 3px; border-radius: 99px; margin-top: 1.6rem;
    background: linear-gradient(90deg, var(--dw-gold), transparent);
}

.feature-list { list-style: none; padding: 0; margin: 2.4rem 0 0; max-width: 430px; }
.feature-list li {
    display: flex; align-items: flex-start; gap: .9rem;
    margin-bottom: 1.15rem; color: rgba(255,255,255,.78); line-height: var(--dw-lh);
    font-size: var(--dw-fs-md);
}
.feature-list i {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--dw-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--dw-gold-soft); color: var(--dw-gold);
    border: 1px solid var(--dw-gold-line); font-size: 1rem;
}

.brand-slogan {
    margin-top: 1.8rem;
    font-size: 1.05rem;
    font-weight: var(--dw-fw-bold);
    display: flex; align-items: center; gap: .5rem;
}
.brand-slogan i { color: var(--dw-gold); }
.brand-slogan .slogan-text {
    background: linear-gradient(90deg, #fff, var(--dw-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- پنل فرم ---------- */
.form-panel {
    flex: 1 1 54%; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.25rem;
}
.login-card {
    width: 100%; max-width: 430px;
    background: var(--dw-surface);
    border-radius: var(--dw-radius-lg);
    box-shadow: var(--dw-shadow-lg);
    padding: clamp(1.8rem, 4vw, 2.8rem);
    border: 1px solid var(--dw-border);
}
.login-card h1 { font-size: 1.45rem; font-weight: var(--dw-fw-black); }
.login-card .muted { color: var(--dw-muted); }

.field-icon { position: relative; }
.field-icon > i {
    position: absolute; inset-inline-start: 1rem; top: 50%;
    transform: translateY(-50%); color: var(--dw-faint); pointer-events: none;
}
.field-icon input {
    padding-inline-start: 2.7rem; height: 48px;
    border-radius: var(--dw-radius-sm);
    border: 1.5px solid var(--dw-border);
    transition: border-color var(--dw-t), box-shadow var(--dw-t);
    background: var(--dw-surface);
    color: var(--dw-text);
}
.field-icon input::placeholder { color: var(--dw-faint); }
.field-icon input:focus {
    border-color: var(--dw-gold);
    box-shadow: var(--dw-ring);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--dw-gold);
    border-color: var(--dw-gold-dark);
}
.forgot-link {
    color: var(--dw-gold-deep); font-size: var(--dw-fs-sm);
    text-decoration: none; font-weight: var(--dw-fw-medium);
    transition: color var(--dw-t-fast);
}
.forgot-link:hover { color: var(--dw-gold); }

/* دکمهٔ طلایی اصلی */
.btn-gold {
    height: 48px;
    border: none; border-radius: var(--dw-radius-sm);
    background: linear-gradient(135deg, var(--dw-gold), var(--dw-gold-dark));
    color: #fff; font-weight: var(--dw-fw-bold); font-size: var(--dw-fs-md);
    box-shadow: 0 6px 18px rgba(201,169,97,.32);
    transition: transform var(--dw-t-fast), box-shadow var(--dw-t-fast), filter var(--dw-t-fast);
}
.btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(201,169,97,.42);
    filter: brightness(1.05);
    color: #fff;
}
.btn-gold:active { transform: translateY(0); }
.btn-gold:focus-visible { box-shadow: var(--dw-ring); outline: none; }

/* ---------- دارک تم: پنل برند تیره‌تر ---------- */
[data-theme="dark"] .form-panel { background: var(--dw-bg); }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 991.98px) {
    .brand-panel { display: none; }
    .form-panel { flex: 1 1 100%; }
}

/* ============================================================
   DIWANCHO LOGIN — 3D PREMIUM LAYER
   توکن‌ها از tokens.css بخش ۵/۶
   ============================================================ */

/* پنل برند: عمق_scene با هالهٔ ملایم طلایی */
.brand-panel {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(0,0,0,.25);
}
.brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 75% 25%, rgba(201,169,97,.14), transparent 55%),
                radial-gradient(90% 70% at 15% 90%, rgba(0,0,0,.28), transparent 60%);
}
.brand-panel__inner { position: relative; z-index: 2; }
.brand-canvas { z-index: 1; }

/* برند مارک: برآمده با هاله */
.brand-mark {
    box-shadow: var(--dw-gold-glow-strong), var(--dw-edge-light), inset 0 -2px 0 rgba(0,0,0,.18);
}
.brand-title { text-shadow: 0 2px 14px rgba(0,0,0,.40); }
.gold-line {
    box-shadow: 0 0 14px 2px rgba(201,169,97,.40);
}

/* آیکن‌های لیست ویژگی: برآمده */
.feature-list i {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.20),
                0 4px 10px -4px rgba(0,0,0,.45);
}

/* کارت ورود: شناور، برآمده با لبهٔ نورانی */
.login-card {
    box-shadow: var(--dw-elev-4);
    background-image: var(--dw-surface-grad);
    position: relative;
}
.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: var(--dw-edge-light);
}

/* فیلدها: فرو رفته، با هاله در focus */
.field-icon input {
    box-shadow: inset 0 1px 3px rgba(38,34,28,.07);
}
.field-icon input:focus {
    box-shadow: inset 0 1px 3px rgba(38,34,28,.05),
                0 0 0 3px var(--dw-gold-soft),
                var(--dw-gold-glow);
}

/* دکمهٔ طلایی: سه‌بعدی تاکتیلی */
.btn-gold {
    background-image: var(--dw-gold-grad);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32),
                inset 0 -2px 0 rgba(0,0,0,.18),
                var(--dw-gold-glow);
}
.btn-gold:hover {
    transform: translateY(var(--dw-lift));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32),
                inset 0 -2px 0 rgba(0,0,0,.18),
                var(--dw-gold-glow-strong);
}
.btn-gold:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
                inset 0 -1px 0 rgba(0,0,0,.22);
}
.dw-skip{position:fixed;top:-100px;right:1rem;z-index:10000;padding:.75rem 1.25rem;background:var(--dw-bg);color:var(--dw-text);border:2px solid var(--dw-gold);border-radius:.75rem}
.dw-skip:focus{top:1rem}
.brand-panel{perspective:1000px}
.brand-panel__inner{transform-style:preserve-3d}
.brand-backdrop{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;opacity:.5;transform:translate(var(--scene-x,0px),var(--scene-y,0px)) scale(1.04);transition:transform .2s ease-out}
.brand-panel__inner{transform:translate(calc(var(--scene-x,0px)*-.35),calc(var(--scene-y,0px)*-.35));transition:transform .2s ease-out}
.login-card{border:1px solid var(--dw-border);box-shadow:0 24px 80px color-mix(in srgb,var(--dw-gold) 12%,transparent)}
@media(prefers-reduced-motion:reduce){.brand-backdrop,.brand-panel__inner{transform:none!important;transition:none!important}}

/* Continuous spatial motion, constant brightness: no flashing or fade loop. */
.brand-scene{position:absolute;inset:0;overflow:hidden;animation:wood-drift 22s ease-in-out infinite alternate}
.brand-scene .brand-backdrop{opacity:.8;transform:translate(var(--scene-x,0px),var(--scene-y,0px)) scale(1.045);object-position:center;transition:transform .6s ease-out}
.brand-panel:has(.brand-scene) .brand-canvas{opacity:.15}
.brand-panel:has(.brand-scene) .brand-panel__inner{background:linear-gradient(transparent,rgba(20,15,10,.7));border-radius:16px;padding:20px;margin-top:auto}
@keyframes wood-drift{from{transform:scale(1.02) translate(-.35%,0)}to{transform:scale(1.055) translate(.35%,-.5%)}}
@media(prefers-reduced-motion:reduce){.brand-scene{animation:none}}
@media(max-width:991.98px){.login-shell:has(.brand-scene){flex-direction:column}.brand-panel:has(.brand-scene){display:block;flex:none;min-height:220px;padding:16px}.brand-panel:has(.brand-scene) .brand-panel__inner{display:none}.brand-scene .brand-backdrop{object-position:center 45%}}

/* Full-width wordmark with independent glyph motion; brightness stays fixed. */
.brand-panel:has(.wood-wordmark){flex:1 1 62%;padding:clamp(20px,3vw,48px);justify-content:center;background:#251b12}
.brand-panel:has(.wood-wordmark) .brand-scene{background:url("../brand/wood-grain.a7485a8b4267.webp") center/cover;opacity:.16;animation:none}
.brand-panel:has(.wood-wordmark) .brand-backdrop{display:none}
.brand-panel:has(.wood-wordmark) .brand-panel__inner{margin-top:0;background:none;padding:12px;transform:none}
.brand-panel:has(.wood-wordmark) .feature-list{display:none}
.brand-panel:has(.wood-wordmark) .brand-canvas{opacity:.12}
.wood-wordmark{position:relative;z-index:2;width:100%;transform:translate(var(--scene-x,0px),var(--scene-y,0px));transition:transform .5s ease-out}
.wood-wordmark svg{width:100%;height:auto;display:block;overflow:visible}
.wood-letter{animation:glyph-float 7s ease-in-out infinite;animation-delay:calc(var(--i)*-.65s)}
@keyframes glyph-float{0%,100%{transform:translate(calc(180px + var(--i)*148px),0px)}50%{transform:translate(calc(180px + var(--i)*148px),-12px)}}
.login-shell:has(.wood-wordmark) .form-panel{flex:0 1 480px;min-width:360px}
@media(max-width:991.98px){.brand-panel:has(.wood-wordmark){min-height:0;padding:12px 16px;flex:none}.wood-wordmark{max-width:650px;margin:auto}.login-shell:has(.wood-wordmark) .form-panel{flex:auto;min-width:0;width:100%}.wood-letter{animation-duration:6s}}
@media(prefers-reduced-motion:reduce){.wood-letter{animation:none;transform:translate(calc(180px + var(--i)*148px),0px)}.wood-wordmark{transform:none;transition:none}}