/* 从 signup.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: #FFFFFF;
    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, 0.95);
    border: 1px solid rgba(228, 223, 223, 0.3);
    border-radius: calc(12 * var(--u));
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.textbox:hover { background: rgba(255, 255, 255, 1); 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(563 * var(--u));
    width: calc(317 * var(--u)); height: calc(56 * var(--u));
    background: #5669FF; color: #ffffff; 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, 0.35);
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.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: 0.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: 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(650 * var(--u)); transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.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 0.3s ease;
}
.auth-link:hover { color: #FFFFFF; text-decoration: underline; }

.validation-messages {
    position: absolute; left: calc(29 * var(--u)); top: calc(530 * var(--u));
    width: calc(317 * var(--u)); min-height: calc(20 * var(--u)); z-index: 10;
}
.error-summary {
    color: #ffffff; font-size: calc(13 * var(--u)); font-weight: 700; margin-bottom: calc(10 * var(--u));
    text-align: center; display: none; padding: calc(12 * var(--u));
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: calc(6 * var(--u)); border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(239, 68, 68, 0.4), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.7);
}
.error-list { list-style: none; padding: 0; margin: 0; color: #ffffff; font-size: calc(12 * var(--u)); font-weight: 500; line-height: 1.5; }
.error-list li {
    padding: calc(8 * var(--u)) calc(12 * var(--u)); margin-bottom: calc(6 * var(--u));
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 0.9) 100%);
    border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.25);
    position: relative; animation: slideIn 0.3s ease-out; backdrop-filter: blur(calc(2 * var(--u)));
    box-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(239, 68, 68, 0.3), inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.6);
}
.error-list li:before { content: "⚠"; margin-right: calc(8 * var(--u)); font-weight: bold; font-size: calc(14 * var(--u)); color: #ffffff; text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.3); }
.error-list li:last-child { margin-bottom: 0; }

@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

.success-message {
    color: #ffffff; font-size: calc(16 * var(--u)); font-weight: 700; text-align: center;
    padding: calc(16 * var(--u)); background: linear-gradient(135deg, #00c851 0%, #2ed573 100%);
    border-radius: calc(8 * var(--u)); border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(46, 213, 115, 0.35);
    text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.35);
    display: none;
}

.success-modal-overlay {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(20, 24, 62, 0.35);
    backdrop-filter: blur(6px);
    z-index: 999;
}

.confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

.success-modal {
    width: min(90vw, calc(320 * var(--u)));
    border-radius: calc(20 * var(--u));
    background: linear-gradient(145deg, #ffffff 0%, #f6f7ff 60%, #e9ecff 100%);
    box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(86, 105, 255, 0.35);
    padding: calc(22 * var(--u));
    text-align: center;
    animation: popIn .3s ease-out;
}

.success-illustration {
    width: 100%;
    margin-bottom: calc(12 * var(--u));
}

.envelope {
    width: calc(88 * var(--u));
    height: calc(88 * var(--u));
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd1dc 0%, #ff9eb7 40%, #5669FF 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(255, 158, 183, 0.4);
    animation: float 2.5s ease-in-out infinite;
    overflow: hidden;
    position: relative;
}

/* 让 orangutan 动画完美适配到信封中（居中、等比缩放、圆形裁剪） */
.envelope .orangutan { 
    width: 82%; 
    height: 82%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.envelope .orangutan img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    border-radius: 50%; 
    pointer-events: none; 
}

@media (max-width: 480px) {
    .envelope { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
    .envelope .orangutan { width: 85%; height: 85%; }
}


.success-title {
    font: 700 calc(18 * var(--u))/1 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: #2d2b57;
    margin-bottom: calc(6 * var(--u));
}

.success-desc {
    font: 500 calc(14 * var(--u))/1.4 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: #5566aa;
    margin-bottom: calc(10 * var(--u));
}

.success-email {
    display: inline-block;
    padding: calc(6 * var(--u)) calc(10 * var(--u));
    border-radius: calc(12 * var(--u));
    background: linear-gradient(135deg, #eef2ff 0%, #e3e8ff 100%);
    color: #3b3f7b;
    font-size: calc(12 * var(--u));
    box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(86,105,255,.15);
    margin-bottom: calc(14 * var(--u));
}

.success-actions { display: flex; align-items: center; justify-content: center; }
.success-btn {
    display: inline-block;
    padding: calc(12 * var(--u)) calc(16 * var(--u));
    border-radius: calc(14 * var(--u));
    text-decoration: none;
    font: 600 calc(14 * var(--u))/1 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.success-btn.primary {
    background: linear-gradient(135deg, #728dff 0%, #5669FF 100%);
    color: #fff;
    box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(86, 105, 255, 0.4);
}
.success-btn.primary:active { transform: translateY(calc(1 * var(--u))); }

@keyframes popIn { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(calc(-6 * var(--u))); } 100% { transform: translateY(0); } }

.textbox.error { border-color: #ff1744; border-width: calc(2 * var(--u)); background: rgba(255, 23, 68, 0.15); box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 23, 68, 0.3); }
.textbox.error input { color: #ffffff; font-weight: 500; }
.textbox.error input::placeholder { color: rgba(255, 255, 255, 0.7); }

.textbox.success { border-color: #2ed573; background: rgba(46, 213, 115, 0.1); }

.password-strength { position: absolute; left: calc(29 * var(--u)); top: calc(450 * var(--u)); font: 400 calc(10 * var(--u))/1.2 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; display: none; }
.strength-weak { color: #ff4757; }
.strength-medium { color: #ffa502; }
.strength-strong { color: #2ed573; }

.password-match { position: absolute; left: calc(29 * var(--u)); top: calc(525 * var(--u)); font: 400 calc(10 * var(--u))/1.2 'Airbnb Cereal App', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; display: none; }
.match-success { color: #2ed573; }
.match-error { color: #ff4757; }

.loading {
    display: inline-block; width: calc(20 * var(--u)); height: calc(20 * var(--u));
    border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #ffffff;
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

img { display: block; }

.textbox.checking { border-color: #ffa502; background: rgba(255, 165, 2, 0.1); position: relative; }
.textbox.checking::after { content: "检查中..."; position: absolute; right: calc(15 * var(--u)); top: 50%; transform: translateY(-50%); color: #ffa502; font-size: calc(12 * var(--u)); font-weight: 500; }
.textbox.email-available { border-color: #2ed573; background: rgba(46, 213, 115, 0.1); position: relative; }
.textbox.email-available::after { content: "✓ 邮箱可用"; position: absolute; right: calc(15 * var(--u)); top: 50%; transform: translateY(-50%); color: #2ed573; font-size: calc(12 * var(--u)); font-weight: 500; }
.textbox.email-exists { border-color: #ff1744; background: rgba(255, 23, 68, 0.15); position: relative; }
.textbox.email-exists::after { content: "✗ 邮箱已存在"; position: absolute; right: calc(15 * var(--u)); top: 50%; transform: translateY(-50%); color: #ff1744; font-size: calc(12 * var(--u)); font-weight: 500; }

/* 禁用状态的按钮（与HTML中内联一致） */
.btn:disabled {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(108, 117, 125, 0.3);
}
.btn:disabled:hover { transform: none; box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(108, 117, 125, 0.3); }
/* 全局滚动增强，确保 iPad 可滚动 */
html, body { overflow-y: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y; }