/* 从 signin.html 抽取的页面专属样式（保持原样） */
/* ========= 尺寸与缩放 ========= */
:root {
    --base-width: 375;
    --base-height: 812;
    --u: 1; /* 默认给个值，实际由断点覆盖 */
}

/* < 375px：固定 375 宽，固定高度并允许滚轮滚动 */
@media (max-width: 374px) {
    :root { --u: calc(100vw / var(--base-width)); }

    html, body {
        height: 100vh;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    body {
        background: #1a1a1a;
        overflow-y: auto; /* 允许页面级别滚动 */
    }

    .mobile-container {
        width: 100vw; /* 使用视口宽度而不是固定375px */
        min-height: 100vh; /* 确保至少占满视口高度 */
        margin: 0;
        overflow-y: auto; /* 允许垂直滚动 */
    }

    .frame {
        width: 100%;
        min-height: 100vh; /* 确保内容至少占满视口高度 */
        overflow-y: visible; /* 允许内容正常显示 */
    }
}

/* 375px ~ 1024px：宽度=视口宽度，高度 auto，可纵向滚动 */
@media (min-width: 375px) and (max-width: 1024px) {
    :root { --u: calc(100vw / var(--base-width)); }

    html, body { height: auto; min-height: 100vh; }

    body {
        margin: 0;
        background: #1a1a1a;
        overflow-y: auto; /* 纵向滚动 */
        overflow-x: hidden; /* 禁止横向滚动 */
    }

    .mobile-container {
        width: 100vw; /* 关键：等于显示区宽 */
        height: auto; /* 关键：高度自适应 */
        min-height: calc(var(--base-height) * var(--u)); /* 不低于按比例高度 */
        margin: 0 auto;
        border-radius: 0; /* 铺满感 */
        box-shadow: none; /* 铺满时通常不需要阴影 */
    }

    .frame {
        height: auto;
        min-height: calc(var(--base-height) * var(--u));
    }
}

/* > 1024px：固定 1024 宽，固定高度并允许滚轮滚动 */
@media (min-width: 1025px) {
    :root { --u: calc(1024px / var(--base-width)); }

    html, body {
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow-y: auto; /* 允许页面级别滚动 */
    }

    body {
        background: #1a1a1a;
        display: flex;
        align-items: flex-start; /* 顶部对齐 */
        justify-content: center;
        min-height: 100vh;
        padding: calc(20 * var(--u)) 0; /* 上下内边距 */
    }

    .mobile-container {
        width: 1024px;
        min-height: calc(var(--base-height) * var(--u)); /* 最小高度，允许内容扩展 */
        margin: 0 auto;
        border-radius: calc(20 * var(--u));
        box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
        overflow: visible; /* 允许内容正常显示 */
    }

    .frame {
        width: 100%;
        min-height: calc(var(--base-height) * var(--u));
        overflow: visible; /* 允许内容正常显示 */
    }
}

/* ========= 通用重置 ========= */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; }

/* ========= 页面元素 ========= */
.mobile-container { position: relative; overflow: hidden; background: transparent; }
.mobile-container { min-height: 100svh; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.frame { -webkit-overflow-scrolling: touch; touch-action: pan-y; }
/* 强制覆盖：确保容器与舞台允许滚动 */
.mobile-container { overflow: auto !important; }
.frame { overflow: visible !important; }
/* iOS 触摸滚动增强 */
.mobile-container { min-height: 100svh; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.frame { -webkit-overflow-scrolling: touch; touch-action: pan-y; }

/* 舞台背景 */
.frame { position: relative; width: 100%; background: linear-gradient(135deg, #728dff 0%, #9ab2ff 100%); overflow: hidden; }

.text-title {
    position: absolute;
    left: calc(30 * var(--u));
    top: calc(191 * var(--u));
    color: #fff;
    font: 500 calc(24 * var(--u))/100% 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.textbox {
    position: absolute;
    width: calc(317 * var(--u));
    height: calc(56 * var(--u));
    left: calc(29 * var(--u));
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(228, 223, 223, .3);
    border-radius: calc(12 * var(--u));
    backdrop-filter: blur(10px);
    transition: all .3s ease;
}
.textbox:hover { background: #fff; border-color: #5669FF; }
.textbox input {
    position: absolute;
    left: calc(51 * var(--u));
    top: calc(16 * var(--u));
    width: calc(240 * var(--u));
    height: calc(24 * var(--u));
    border: none; outline: none; background: transparent; color: #120D26;
    font: 400 calc(14 * var(--u))/calc(23 * var(--u)) 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.textbox input::placeholder { color: #747688; }

.icon-left { position: absolute; left: calc(15 * var(--u)); top: calc(17 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.icon-right { position: absolute; left: calc(277 * var(--u)); top: calc(16 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); cursor: pointer; z-index: 10; }

.btn {
    position: absolute;
    left: calc(29 * var(--u));
    top: calc(463 * var(--u));
    width: calc(317 * var(--u));
    height: calc(56 * var(--u));
    background: #5669FF; color: #fff; border: none; border-radius: calc(16 * var(--u));
    font: 500 calc(16 * var(--u))/100% 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: 1px; text-transform: uppercase;
    box-shadow: 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(86, 105, 255, .35);
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .3s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(calc(-2 * var(--u))); }
.btn:active { transform: translateY(calc(1 * var(--u))); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.brand-logo {
    --scale: 3; /* 想放大就改这里，比如 1.75 / 2 / 1.3 */
    position: absolute;
    --old-w: 77.58; --old-h: 58.18; /* 旧尺寸（不变） */
    width: calc(var(--old-w) * var(--scale) * var(--u));
    height: calc(var(--old-h) * var(--scale) * var(--u));
    /* left 自动补偿 = 原left - (新宽 - 旧宽)/2  */
    left: calc(151 * var(--u) - ((var(--old-w) * var(--scale) * var(--u) - var(--old-w) * var(--u)) / 2));
}

.auth-link {
    position: absolute;
    left: 50%; top: calc(550 * var(--u)); transform: translateX(-50%);
    color: rgba(255, 255, 255, .8);
    font: 400 calc(14 * var(--u))/1.5 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    text-decoration: none; transition: color .3s ease;
}
.auth-link:hover { color: #fff; text-decoration: underline; }

.forgot-password {
    position: absolute; right: calc(29 * var(--u)); top: calc(410 * var(--u));
    color: rgba(255, 255, 255, .7);
    font: 400 calc(12 * var(--u))/1.5 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    text-decoration: none; transition: color .3s ease;
}
.forgot-password:hover { color: #fff; text-decoration: underline; }

.error-message {
    position: absolute; left: calc(29 * var(--u)); top: calc(430 * var(--u));
    color: #ff4757; font: 400 calc(12 * var(--u))/1.5 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    display: none;
}

.loading {
    display: inline-block; width: calc(20 * var(--u)); height: calc(20 * var(--u));
    border: 2px solid rgba(255, 255, 255, .3); border-radius: 50%; border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
/* 全局滚动增强，确保 iPad 可滚动 */
html, body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; }