/* ============================================================
 * auth.css — ibyter 认证页专用样式
 * 变量体系与 common.css 一致
 * ============================================================ */

/* auth 页面局部变量覆盖（基于 common.css 变量体系） */
:root {
    --bg-dark: #0B1020;
    --bg-card: #12192b;
    --bg-card-2: #171f33;
    --line: rgba(255,255,255,0.1);
    --text-primary: #F5F7FB;
    --text-secondary: #96A0B5;
    --primary: #7C3AED;
    --primary-light: #8B5CF6;
    --danger: #ff6b6b;
    --ok: #17c964;
}

* { box-sizing: border-box; }

body.auth-page {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at top, rgba(109,94,248,0.18), transparent 35%), linear-gradient(180deg, #0B1020 0%, #0C1120 100%);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", PingFang SC, Helvetica, Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-shell {
    width: 100%;
    max-width: 420px;
    background: #1A1A2E;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    padding: 36px 24px 32px;
    position: relative;
}

.auth-logo { text-align:center; font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.auth-subtitle { text-align:center; color: var(--text-secondary); font-size: 13px; margin-bottom: 22px; }

.auth-tabs { display:flex; gap:24px; justify-content:center; margin-bottom: 20px; position:relative; }
.auth-tab {
    background:none; border:none; color: var(--text-secondary); font-size:16px; font-weight:600; padding:8px 0; cursor:pointer; position:relative;
}
.auth-tab.active { color: var(--text-primary); }
.auth-tab.active:after {
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.auth-panel { display:none; }
.auth-panel.active { display:block; }

.switch-pills { display:flex; gap:8px; margin-bottom: 16px; }
.switch-pill {
    flex:1; height:36px; border-radius:10px; border:1px solid var(--line); background: rgba(255,255,255,.04);
    color: var(--text-secondary); cursor:pointer; font-size:14px; font-weight:600;
}
.switch-pill.active { background: rgba(109,94,248,.16); color:#fff; border-color: rgba(109,94,248,.4); }

.field { margin-bottom: 14px; }
.field-row { display:flex; gap:10px; align-items:flex-start; }
.field input {
    width:100%; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06);
    color:#fff; padding:0 14px; outline:none; transition: all .2s;
}
.field input:focus { border-color: rgba(109,94,248,.9); box-shadow: 0 0 0 4px rgba(109,94,248,.14); }
.field input::placeholder { color:#7f8aa3; }
.field.half-grow { flex: 1 1 auto; }
.field.half-btn { width: 128px; flex: 0 0 128px; }
.field .send-code {
    width:100%; height:44px; border-radius:12px; border:1px solid rgba(109,94,248,.35); background: rgba(109,94,248,.16);
    color:#fff; font-weight:600;
}
.field .send-code[disabled] { opacity:.55; cursor:not-allowed; }

.error-text { min-height: 18px; color: var(--danger); font-size: 12px; margin-top: 6px; }

.inline-links { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; color: var(--text-secondary); font-size:13px; }
.inline-links a, .agreement a, .auth-footer a { color: #8ea2ff; text-decoration:none; }

.agreement { display:flex; align-items:flex-start; gap:8px; color: var(--text-secondary); font-size: 13px; margin-bottom: 14px; }
.agreement input { margin-top: 2px; }

.submit-btn {
    width:100%; height:44px; border:none; border-radius:12px; color:#fff; font-size:16px; font-weight:700;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}
.submit-btn[disabled] { opacity:.5; cursor:not-allowed; }

.auth-footer { margin-top: 18px; padding-bottom: 4px; text-align:center; color: var(--text-secondary); font-size:13px; }

.layui-layer-iframe .layui-layer-content { overflow: hidden; }
.hidden { display:none !important; }