:root {
    --bg-elev: rgba(255, 255, 255, 0.86);
    --bg-soft: #f3f7fd;
    --text: #0f172a;
    --muted: #4f6178;
    --line: rgba(143, 169, 198, 0.42);
    --accent: #0f766e;
    --accent-2: #1d4ed8;
    --accent-text: #f2fffb;
    --danger: #b91c1c;
    --shadow: 0 28px 56px rgba(15, 23, 42, 0.2);

    --sky-top: #cbe6ff;
    --sky-mid: #9ccfff;
    --sky-bottom: #eff7ff;
    --sky-glow-a: rgba(87, 183, 255, 0.5);
    --sky-glow-b: rgba(89, 212, 155, 0.34);
    --mesh-a: rgba(90, 137, 255, 0.34);
    --mesh-b: rgba(52, 211, 153, 0.32);

    --star: rgba(255, 255, 255, 0.9);
    --cloud-main: rgba(255, 255, 255, 0.76);

    --hotel-top: #7e96b4;
    --hotel-base: #5d7593;
    --cottage-top: #7f96b5;
    --cottage-base: #5c7699;
    --house-top: #7b8f9e;
    --house-base: #586d7d;
    --tower-top: #6a83a6;
    --tower-base: #425777;

    --window-on: rgba(255, 247, 204, 0.44);
    --window-off: rgba(16, 36, 58, 0.28);
    --window-glow: rgba(255, 224, 148, 0.18);
    --door: #2f4159;

    --street-top: rgba(55, 129, 192, 0.44);
    --street-bottom: rgba(15, 74, 128, 0.46);
    --lamp-post: #4f627c;
    --lamp-head: #1f2d3f;
    --lamp-glow: rgba(255, 219, 128, 0.28);
    --urban-top: #7e8fa8;
    --urban-base: #4a607c;
    --building-width-scale: 1.06;
}

html[data-theme='dark'] {
    --bg-elev: rgba(11, 20, 34, 0.84);
    --bg-soft: #142236;
    --text: #e7f2ff;
    --muted: #a8b7cb;
    --line: rgba(72, 104, 143, 0.58);
    --accent: #22c1a7;
    --accent-2: #2f9ac4;
    --accent-text: #072117;
    --danger: #ef4444;
    --shadow: 0 28px 56px rgba(0, 0, 0, 0.56);

    --sky-top: #040a15;
    --sky-mid: #0e1d33;
    --sky-bottom: #0a1527;
    --sky-glow-a: rgba(57, 118, 216, 0.3);
    --sky-glow-b: rgba(47, 171, 156, 0.24);
    --mesh-a: rgba(85, 146, 255, 0.26);
    --mesh-b: rgba(50, 196, 171, 0.2);

    --cloud-main: rgba(126, 155, 190, 0.16);

    --hotel-top: #1c2f46;
    --hotel-base: #13243a;
    --cottage-top: #243a58;
    --cottage-base: #172c46;
    --house-top: #2b4050;
    --house-base: #1c2f3f;
    --tower-top: #1a2e4a;
    --tower-base: #13233a;

    --window-on: rgba(255, 216, 110, 0.95);
    --window-off: rgba(15, 32, 55, 0.28);
    --window-glow: rgba(255, 212, 102, 0.44);
    --door: #081524;

    --street-top: rgba(18, 63, 104, 0.58);
    --street-bottom: rgba(8, 23, 43, 0.78);
    --lamp-post: #627892;
    --lamp-head: #cdd8e7;
    --lamp-glow: rgba(255, 214, 118, 0.92);
    --urban-top: #273c58;
    --urban-base: #16263d;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--text);
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    background:
        radial-gradient(90vmax 68vmax at 8% -4%, rgba(255, 255, 255, 0.48), transparent 56%),
        radial-gradient(84vmax 60vmax at 90% 2%, rgba(177, 226, 255, 0.44), transparent 55%),
        linear-gradient(165deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-bottom) 100%);
    transition: background 0.35s ease, color 0.35s ease;
}

html[data-theme='dark'] body {
    background:
        radial-gradient(88vmax 68vmax at 8% -6%, rgba(42, 83, 156, 0.34), transparent 56%),
        radial-gradient(80vmax 58vmax at 88% 2%, rgba(29, 171, 163, 0.15), transparent 56%),
        linear-gradient(165deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-bottom) 100%);
}

.scene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.login-header,
.login-layout {
    position: relative;
    z-index: 6;
}

.login-header {
    width: 100%;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 88%, transparent), transparent);
    backdrop-filter: blur(3px);
}

.login-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.login-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.login-logo {
    width: clamp(220px, 28vw, 340px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(26, 48, 78, 0.26));
}

.stars {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--star) 0 1px, transparent 1px 100%);
    background-size: 3px 3px;
    opacity: 0;
    transform: translateY(-6%);
    transition: opacity 0.35s ease;
    animation: none;
}

html[data-theme='dark'] .stars {
    opacity: 0.7;
}

.sky-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(7px);
    animation: skyDrift 18s ease-in-out infinite alternate;
}

.sky-glow-a {
    width: 42vmax;
    height: 42vmax;
    top: -13vmax;
    left: -8vmax;
    background: radial-gradient(circle, var(--sky-glow-a), transparent 68%);
}

.sky-glow-b {
    width: 40vmax;
    height: 40vmax;
    top: -6vmax;
    right: -8vmax;
    background: radial-gradient(circle, var(--sky-glow-b), transparent 68%);
    animation-delay: 2.4s;
}

.mesh {
    position: absolute;
    border-radius: 50%;
    opacity: 0.76;
    animation: meshDrift 24s ease-in-out infinite alternate;
}

.mesh-a {
    width: 34vmax;
    height: 34vmax;
    left: -11vmax;
    bottom: 16vmax;
    background: radial-gradient(circle, var(--mesh-a), transparent 67%);
}

.mesh-b {
    width: 30vmax;
    height: 30vmax;
    right: -8vmax;
    bottom: 12vmax;
    background: radial-gradient(circle, var(--mesh-b), transparent 66%);
    animation-duration: 17s;
}

.cloud {
    position: absolute;
    left: -320px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), var(--cloud-main));
    animation: cloudMove linear infinite;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: inherit;
}

.cloud::before {
    width: 58%;
    height: 78%;
    left: 12%;
    top: -40%;
}

.cloud::after {
    width: 34%;
    height: 64%;
    right: 9%;
    top: -22%;
}

.cloud-a {
    width: 220px;
    top: 13%;
    opacity: 0.66;
    animation-duration: 48s;
}

.cloud-b {
    width: 180px;
    top: 21%;
    opacity: 0.52;
    animation-duration: 36s;
    animation-delay: -12s;
}

.cloud-c {
    width: 260px;
    top: 28%;
    opacity: 0.42;
    animation-duration: 62s;
    animation-delay: -24s;
}

html[data-theme='dark'] .cloud {
    opacity: 0.2;
}

.district {
    position: absolute;
    left: 50%;
    bottom: clamp(64px, 7.4vh, 96px);
    transform: translateX(-50%);
    width: min(1560px, 136vw);
    height: clamp(480px, 76vh, 780px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(10px, 1.8vw, 24px);
    padding: 0 clamp(20px, 3.6vw, 72px);
    z-index: 3;
}

.urban-fill {
    position: absolute;
    left: -8vw;
    right: -8vw;
    bottom: clamp(120px, 14vh, 170px);
    height: clamp(120px, 18vh, 210px);
    z-index: 2;
}

.urban-block {
    position: absolute;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    background:
        repeating-linear-gradient(180deg, var(--window-on) 0 8px, var(--window-off) 8px 16px),
        linear-gradient(180deg, var(--urban-top), var(--urban-base));
    opacity: 0.52;
}

.u1 {
    left: 2%;
    width: 9%;
    height: 72%;
}

.u2 {
    left: 14%;
    width: 7%;
    height: 56%;
}

.u3 {
    left: 26%;
    width: 8%;
    height: 67%;
}

.u4 {
    right: 26%;
    width: 8%;
    height: 64%;
}

.u5 {
    right: 14%;
    width: 7%;
    height: 58%;
}

.u6 {
    right: 2%;
    width: 10%;
    height: 76%;
}

.u7 {
    left: -3%;
    width: 7%;
    height: 82%;
}

.u8 {
    right: -3%;
    width: 7%;
    height: 80%;
}

.district::before,
.district::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    border-radius: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.08) 12px 14px),
        repeating-linear-gradient(180deg, var(--window-on) 0 7px, var(--window-off) 7px 14px),
        linear-gradient(180deg, color-mix(in srgb, var(--tower-top) 70%, #263a52), color-mix(in srgb, var(--tower-base) 86%, #0f1f31));
    pointer-events: none;
}

.district::before {
    height: 64%;
    opacity: 0.34;
    z-index: 1;
    clip-path: polygon(
        0 100%, 0 58%, 5% 58%, 5% 42%, 10% 42%, 10% 61%, 14% 61%, 14% 36%,
        19% 36%, 19% 63%, 24% 63%, 24% 40%, 30% 40%, 30% 66%, 36% 66%, 36% 34%,
        42% 34%, 42% 59%, 48% 59%, 48% 39%, 54% 39%, 54% 64%, 60% 64%, 60% 35%,
        66% 35%, 66% 58%, 72% 58%, 72% 37%, 78% 37%, 78% 63%, 84% 63%, 84% 41%,
        90% 41%, 90% 56%, 96% 56%, 96% 46%, 100% 46%, 100% 100%
    );
}

.district::after {
    height: 44%;
    opacity: 0.5;
    z-index: 2;
    clip-path: polygon(
        0 100%, 0 68%, 6% 68%, 6% 54%, 12% 54%, 12% 74%, 18% 74%, 18% 48%,
        25% 48%, 25% 70%, 31% 70%, 31% 56%, 38% 56%, 38% 76%, 44% 76%, 44% 52%,
        51% 52%, 51% 71%, 58% 71%, 58% 57%, 64% 57%, 64% 73%, 71% 73%, 71% 53%,
        78% 53%, 78% 69%, 85% 69%, 85% 55%, 92% 55%, 92% 67%, 100% 67%, 100% 100%
    );
}

.property {
    position: relative;
    border-radius: 16px 16px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform-origin: bottom center;
    transform: translateY(0) scaleX(var(--building-width-scale));
    animation: skylineMotion 10s ease-in-out infinite;
    z-index: 4;
}

.property:nth-child(2n) {
    animation-duration: 12.5s;
    animation-delay: -2.2s;
}

.property:nth-child(3n) {
    animation-duration: 8.6s;
    animation-delay: -4.1s;
}

.property-roof {
    position: absolute;
    left: 6%;
    right: 6%;
    top: -14px;
    height: 14px;
    border-radius: 10px 10px 0 0;
    background: color-mix(in srgb, #ffffff 24%, rgba(22, 34, 52, 0.88));
}

.window-grid {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 16px;
    bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
    background:
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(0, 0, 0, 0.16) 10px 12px),
        repeating-linear-gradient(180deg, var(--window-on) 0 8px, var(--window-off) 8px 16px);
    opacity: 0.56;
    transition: opacity 0.35s ease, box-shadow 0.35s ease;
}

.window-grid::after {
    content: '';
    position: absolute;
    inset: -10%;
    pointer-events: none;
}

html[data-theme='light'] .window-grid::after {
    background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.32) 50%, transparent 78%);
    transform: translateX(-120%);
    animation: glassSweep 14s cubic-bezier(0.35, 0.03, 0.18, 0.98) infinite;
    opacity: 0.52;
}

html[data-theme='dark'] .window-grid {
    opacity: 0.98;
    box-shadow: 0 0 15px var(--window-glow), inset 0 0 18px rgba(255, 219, 124, 0.14);
    animation: nightWindowFlicker 5.4s steps(6, end) infinite;
}

html[data-theme='dark'] .window-grid::after {
    background: radial-gradient(circle at 50% 50%, rgba(255, 221, 146, 0.22), transparent 72%);
    animation: nightGlowPulse 3.8s ease-in-out infinite;
    opacity: 0.58;
}

.door {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 22%;
    min-width: 22px;
    height: 24%;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--door) 70%, #ffffff), var(--door));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.hotel {
    width: clamp(238px, 26.5vw, 334px);
    height: clamp(428px, 68vh, 630px);
    background: linear-gradient(180deg, var(--hotel-top), var(--hotel-base));
    animation-delay: 0s;
    margin-bottom: 0;
}

.hotel .badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(230, 239, 250, 0.76);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.cottage {
    width: clamp(212px, 22.2vw, 286px);
    height: clamp(252px, 48vh, 383px);
    background: linear-gradient(180deg, var(--cottage-top), var(--cottage-base));
    border-radius: 10px 10px 0 0;
    animation-delay: 0s;
    margin-bottom: 0;
}

.cottage .property-roof {
    top: -52px;
    left: -4%;
    right: -4%;
    height: 0;
    border-left: min(86px, 7vw) solid transparent;
    border-right: min(86px, 7vw) solid transparent;
    border-bottom: 52px solid color-mix(in srgb, var(--cottage-base) 88%, #203f62);
    background: none;
    border-radius: 0;
}

.cottage .window-grid {
    top: 24px;
    bottom: 34px;
}

.house {
    width: clamp(236px, 25.4vw, 318px);
    height: clamp(302px, 54vh, 441px);
    background: linear-gradient(180deg, var(--house-top), var(--house-base));
    animation-delay: 0s;
    margin-bottom: 0;
}

.house .property-roof {
    top: -42px;
    left: 4%;
    right: 4%;
    height: 42px;
    background: #465f73;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    border-radius: 0;
}

.house::after {
    content: '';
    position: absolute;
    top: -56px;
    right: 20px;
    width: 12px;
    height: 30px;
    border-radius: 4px 4px 0 0;
    background: #7a8ea8;
}

.tower {
    width: clamp(146px, 15.9vw, 207px);
    height: clamp(495px, 77vh, 743px);
    background: linear-gradient(180deg, var(--tower-top), var(--tower-base));
    animation-delay: 0s;
    margin-bottom: 0;
}

.tower .property-roof {
    top: -18px;
    left: 22%;
    right: 22%;
    height: 18px;
    background: #2a486d;
}

.tower .window-grid {
    left: 22%;
    right: 22%;
}

.loft {
    width: clamp(175px, 19vw, 249px);
    height: clamp(369px, 59vh, 555px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--urban-top) 78%, #9ab1ce), color-mix(in srgb, var(--urban-base) 88%, #2b4260));
    margin-bottom: 0;
}

.condo {
    width: clamp(186px, 20vw, 268px);
    height: clamp(414px, 63vh, 600px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--hotel-top) 78%, #9aaec5), color-mix(in srgb, var(--hotel-base) 88%, #2d4664));
    margin-bottom: 0;
}

.annex {
    width: clamp(167px, 18.1vw, 242px);
    height: clamp(279px, 47vh, 429px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--house-top) 80%, #9db4b2), color-mix(in srgb, var(--house-base) 88%, #2f4c57));
    margin-bottom: 0;
}

.edge-left {
    width: clamp(157px, 16vw, 226px);
    height: clamp(345px, 56vh, 510px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--urban-top) 82%, #9caec4), color-mix(in srgb, var(--urban-base) 90%, #314960));
    margin-bottom: 0;
}

.edge-right {
    width: clamp(164px, 16.8vw, 236px);
    height: clamp(450px, 69vh, 645px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tower-top) 80%, #9bb0c8), color-mix(in srgb, var(--tower-base) 90%, #2c4560));
    margin-bottom: 0;
}

.street-objects {
    position: absolute;
    left: -8vw;
    right: -8vw;
    bottom: clamp(68px, 8.6vh, 110px);
    height: clamp(58px, 9vh, 88px);
    z-index: 5;
}

.lamp {
    position: absolute;
    bottom: 0;
    width: 6px;
    height: clamp(54px, 8vh, 74px);
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--lamp-post) 56%, #ffffff), var(--lamp-post));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.lamp::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 8px;
    border-radius: 8px;
    background: var(--lamp-head);
}

.lamp .lamp-glow {
    position: absolute;
    left: 50%;
    top: -2px;
    transform: translateX(-50%);
    width: 72px;
    height: 50px;
    background: radial-gradient(ellipse at center, var(--lamp-glow), transparent 70%);
    opacity: 0.3;
    filter: blur(1px);
    animation: none;
}

html[data-theme='dark'] .lamp .lamp-glow {
    opacity: 0.88;
}

.lamp-a {
    left: 22%;
}

.lamp-b {
    left: 74%;
}

.street {
    position: absolute;
    left: -10vw;
    right: -10vw;
    bottom: 0;
    height: clamp(96px, 15vh, 160px);
    background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.18), transparent 42%),
        linear-gradient(180deg, var(--street-top), var(--street-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
}

.street::before {
    content: '';
    position: absolute;
    left: -16%;
    right: -16%;
    top: 40%;
    height: 6px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0 34px, transparent 34px 78px);
    opacity: 0.5;
    animation: none;
}

.login-layout {
    min-height: calc(100vh - 104px);
    display: grid;
    place-items: center;
    padding: 20px;
}

.login-card {
    width: min(460px, 100%);
    border: 1px solid var(--line);
    border-radius: 26px;
    background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    padding: 24px;
    position: relative;
    margin-top: -18px;
    opacity: 0;
    transform: translateY(12px) scale(0.99);
    transition: opacity 0.45s ease, transform 0.45s ease, background 0.35s ease;
}

.login-card.ready {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.home-link {
    position: relative;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-soft) 84%, transparent);
    color: var(--text);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.18s ease, filter 0.2s ease, background 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    backdrop-filter: blur(6px);
    min-width: 118px;
    text-decoration: none;
}

.theme-toggle {
    position: relative;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-soft) 84%, transparent);
    color: var(--text);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.18s ease, filter 0.2s ease, background 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 136px;
    backdrop-filter: blur(6px);
}

.theme-toggle::after {
    content: '';
    position: absolute;
    inset: -180% auto auto -36%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 56%, #ffffff), transparent 72%);
    opacity: 0;
    transform: scale(0.35);
}

.home-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.theme-toggle:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.home-link svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-link span {
    white-space: nowrap;
}

.mode-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 40% 40%, #fffbe3 0%, #ffd97a 48%, #ffb64c 100%);
    box-shadow: 0 0 0 1px rgba(255, 194, 84, 0.45), 0 0 14px rgba(255, 198, 92, 0.45);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

html[data-theme='dark'] .mode-icon {
    background: radial-gradient(circle at 30% 30%, #dbe6ff 0%, #b8c8e9 60%, #8ca0c8 100%);
    box-shadow: inset -5px -3px 0 0 rgba(24, 40, 64, 0.55), 0 0 0 1px rgba(133, 160, 208, 0.48);
    transform: rotate(-16deg);
}

.mode-text {
    white-space: nowrap;
}

body.mode-shift .scene {
    animation: modeSceneSweep 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mode-shift .district {
    animation: modeDistrictSurge 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mode-shift .login-card {
    animation: modeCardFlux 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mode-shift .login-header {
    animation: modeHeaderFlux 820ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mode-shift .theme-toggle::after {
    animation: modeToggleFlash 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand {
    text-align: center;
    padding-top: 8px;
}

.brand h1 {
    margin: 6px 0 0;
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    font-size: clamp(1.4rem, 1.05rem + 1vw, 2rem);
    letter-spacing: 0.12em;
}

.brand p {
    margin: 8px 0 0;
    color: var(--muted);
}

.alert {
    margin: 16px 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 78%, #ffffff);
    border-radius: 12px;
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: color-mix(in srgb, var(--danger) 70%, var(--text));
    font-size: 0.9rem;
}

.login-form {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.login-form label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.login-form input[type='text'],
.login-form input[type='password'] {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 13px;
    background: var(--bg-soft);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-form input:focus {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.remember-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--muted);
    font-weight: 600;
}

.login-btn {
    margin-top: 5px;
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    background: linear-gradient(130deg, var(--accent), var(--accent-2));
    transition: transform 0.18s ease, filter 0.2s ease;
}

.login-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

@keyframes glowFloat {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(16px, 14px) scale(1.06);
    }
}

@keyframes skyDrift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(12px, 10px) scale(1.04);
    }
}

@keyframes meshDrift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(-16px, 12px) scale(1.05);
    }
}

@keyframes skylineMotion {
    0%,
    100% {
        transform: translateY(0) scaleX(var(--building-width-scale));
    }

    50% {
        transform: translateY(-5px) scaleX(var(--building-width-scale));
    }
}

@keyframes modeSceneSweep {
    0% {
        filter: saturate(1);
        transform: scale(1);
    }

    40% {
        filter: saturate(1.2);
        transform: scale(1.012);
    }

    100% {
        filter: saturate(1);
        transform: scale(1);
    }
}

@keyframes modeDistrictSurge {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    45% {
        transform: translateX(-50%) translateY(-8px);
    }

    100% {
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes modeHeaderFlux {
    0% {
        transform: translateY(0);
    }

    45% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes modeCardFlux {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: var(--shadow);
    }

    45% {
        transform: translateY(-6px) scale(1.016);
        box-shadow: 0 34px 70px color-mix(in srgb, var(--accent) 26%, rgba(15, 23, 42, 0.44));
    }

    100% {
        transform: translateY(0) scale(1);
        box-shadow: var(--shadow);
    }
}

@keyframes modeToggleFlash {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }

    35% {
        opacity: 0.64;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.24);
    }
}

@keyframes glassSweep {
    0%,
    22% {
        transform: translateX(-120%);
    }

    42% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes nightWindowFlicker {
    0%,
    18%,
    52%,
    100% {
        opacity: 0.98;
    }

    25%,
    32% {
        opacity: 0.74;
    }

    62% {
        opacity: 0.9;
    }
}

@keyframes nightGlowPulse {
    0%,
    100% {
        opacity: 0.38;
        transform: scale(1);
    }

    50% {
        opacity: 0.62;
        transform: scale(1.04);
    }
}

@keyframes drift {
    from {
        transform: translateY(0) translateX(0);
    }

    to {
        transform: translateY(20px) translateX(-10px);
    }
}

@keyframes cloudMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(135vw);
    }
}

@keyframes buildingFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes lightFlicker {
    0%,
    16%,
    42%,
    100% {
        opacity: 0.98;
    }

    25%,
    36% {
        opacity: 0.7;
    }

    60% {
        opacity: 0.9;
    }
}

@keyframes roadMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 250px 0;
    }
}

@keyframes twinkle {
    from {
        opacity: 0.45;
    }

    to {
        opacity: 0.75;
    }
}

@media (max-width: 860px) {
    .district {
        gap: clamp(8px, 1.6vw, 12px);
        width: min(1340px, 126vw);
        height: clamp(420px, 66vh, 650px);
        padding: 0 18px;
    }

    .street-objects {
        bottom: clamp(66px, 8.4vh, 102px);
    }

    .lamp-a {
        left: 18%;
    }

    .lamp-b {
        left: 78%;
    }

    .hotel {
        width: clamp(199px, 25.4vw, 260px);
    }

    .cottage {
        width: clamp(170px, 22.2vw, 228px);
    }

    .house {
        width: clamp(189px, 24.4vw, 249px);
    }

    .tower {
        width: clamp(122px, 15.9vw, 164px);
    }

    .edge-left {
        width: clamp(125px, 14.9vw, 180px);
    }

    .edge-right {
        width: clamp(138px, 15.9vw, 193px);
    }
}

@media (max-width: 620px) {
    .login-header {
        padding: 10px 12px;
    }

    .login-logo {
        width: clamp(170px, 46vw, 220px);
    }

    .login-header-actions {
        gap: 8px;
    }

    .home-link {
        min-width: 92px;
        padding: 8px 11px;
        font-size: 0.76rem;
        gap: 8px;
    }

    .theme-toggle {
        min-width: 118px;
        padding: 8px 11px;
        font-size: 0.76rem;
        gap: 8px;
    }

    .mode-icon {
        width: 15px;
        height: 15px;
    }

    .district {
        bottom: 72px;
        height: clamp(360px, 56vh, 520px);
        width: 132vw;
        padding: 0 8px;
    }

    .district::before {
        height: 58%;
        opacity: 0.3;
    }

    .district::after {
        height: 40%;
    }

    .street-objects {
        bottom: 66px;
        height: 58px;
    }

    .lamp {
        height: 52px;
    }

    .lamp-b {
        display: none;
    }

    .edge-left {
        width: 117px;
        height: 285px;
    }

    .edge-right {
        width: 122px;
        height: 330px;
    }

    .hotel .badge {
        display: none;
    }

    .brand h1 {
        letter-spacing: 0.08em;
    }

    .login-card {
        border-radius: 20px;
        padding: 22px 16px 18px;
        margin-top: -26px;
    }

}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}