/* Auto-split from static/css/auth.css */
/* Source lines: 1-232 */

/* ============================================================
   auth.css — 语风弹幕姬 登录/注册页 共享样式
   支持主题 · 响应式卡片布局 · Font Awesome 图标
   ============================================================ */

/* ---- CSS Variables (默认=Apple 主题，与 apple_harmony_theme.css 同步) ---- */
:root {
    --dm-bg:            #edf2fa;
    --dm-surface:       rgba(255,255,255,0.85);
    --dm-surface-2:     rgba(255,255,255,0.92);
    --dm-surface-3:     #f3f7ff;
    --dm-border:        rgba(121,146,192,0.28);
    --dm-border-hover:  rgba(72,104,168,0.45);

    --dm-text:          #0e1f3f;
    --dm-text-secondary:#4f638a;
    --dm-text-muted:    #7284a8;

    --dm-accent:        #2d66ff;
    --dm-accent-hover:  #1f57ee;
    --dm-accent-bg:     rgba(45,102,255,0.12);
    --dm-accent-text:   #ffffff;

    --dm-success:       #0f9f61;
    --dm-danger:        #d44245;
    --dm-warning:       #cc8418;

    --dm-radius:        8px;
    --dm-radius-lg:     12px;
    --dm-shadow:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --dm-shadow-lg:     0 8px 24px rgba(0,0,0,0.08);
    --dm-transition:    220ms cubic-bezier(0.2,0.8,0.2,1);
    --dm-overlay-bg:    rgba(14, 24, 42, 0.55);
    --dm-overlay-blur:  10px;
}

/* ---- Theme Overrides (与 apple_harmony_theme.css 同步) ---- */

.harmony-theme {
    --dm-bg:            #eaf4ff;
    --dm-surface:       rgba(255,255,255,0.86);
    --dm-surface-2:     rgba(255,255,255,0.94);
    --dm-surface-3:     #ecf5ff;
    --dm-border:        rgba(65,131,220,0.26);
    --dm-border-hover:  rgba(40,102,191,0.44);
    --dm-text:          #0d2d55;
    --dm-text-secondary:#396596;
    --dm-text-muted:    #6580a5;
    --dm-accent:        #0f7de8;
    --dm-accent-hover:  #066dcf;
    --dm-accent-bg:     rgba(15,125,232,0.13);
    --dm-success:       #0aa26d;
    --dm-danger:        #d54346;
    --dm-warning:       #cb8726;
    --dm-overlay-bg:    rgba(10, 26, 52, 0.52);
    --dm-overlay-blur:  10px;
}

.graphite-theme {
    --dm-bg:            #0f1725;
    --dm-surface:       rgba(20,29,45,0.8);
    --dm-surface-2:     rgba(24,35,53,0.9);
    --dm-surface-3:     #1c2a40;
    --dm-border:        rgba(120,149,194,0.24);
    --dm-border-hover:  rgba(156,187,237,0.46);
    --dm-text:          #f3f7ff;
    --dm-text-secondary:#bdd0ef;
    --dm-text-muted:    #8ea3c8;
    --dm-accent:        #75a6ff;
    --dm-accent-hover:  #97bdff;
    --dm-accent-bg:     rgba(117,166,255,0.19);
    --dm-accent-text:   #0f1725;
    --dm-success:       #5dd7a3;
    --dm-danger:        #ff7d84;
    --dm-warning:       #f2b764;
    --dm-shadow:        0 4px 16px rgba(0,0,0,0.4);
    --dm-shadow-lg:     0 16px 48px rgba(0,0,0,0.6);
    --dm-overlay-bg:    rgba(0, 0, 0, 0.72);
    --dm-overlay-blur:  6px;
}

.sunrise-theme {
    --dm-bg:            #fff2de;
    --dm-surface:       rgba(255,255,255,0.86);
    --dm-surface-2:     rgba(255,255,255,0.92);
    --dm-surface-3:     #fff8ed;
    --dm-border:        rgba(221,151,82,0.27);
    --dm-border-hover:  rgba(188,108,31,0.45);
    --dm-text:          #412b19;
    --dm-text-secondary:#7c5838;
    --dm-text-muted:    #9a7757;
    --dm-accent:        #e38631;
    --dm-accent-hover:  #c97425;
    --dm-accent-bg:     rgba(227,134,49,0.15);
    --dm-success:       #359259;
    --dm-danger:        #ca4f43;
    --dm-warning:       #c9761f;
    --dm-overlay-bg:    rgba(55, 35, 20, 0.56);
    --dm-overlay-blur:  10px;
}

.capsule-theme {
    --dm-bg:            #eef2ff;
    --dm-surface:       rgba(255,255,255,0.82);
    --dm-surface-2:     rgba(255,255,255,0.94);
    --dm-surface-3:     rgba(255,255,255,0.68);
    --dm-border:        rgba(121,146,192,0.24);
    --dm-border-hover:  rgba(72,104,168,0.42);

    --dm-text:          #0b1b33;
    --dm-text-secondary:#3f5678;
    --dm-text-muted:    #667a9b;

    --dm-accent:        #2d66ff;
    --dm-accent-hover:  #1f57ee;
    --dm-accent-bg:     rgba(45,102,255,0.16);
    --dm-accent-text:   #ffffff;

    --dm-success:       #0f9f61;
    --dm-danger:        #d44245;
    --dm-warning:       #cc8418;

    --dm-radius:        999px;
    --dm-radius-lg:     28px;
    --dm-shadow:        0 10px 30px rgba(11,28,55,0.10);
    --dm-shadow-lg:     0 24px 64px rgba(11,28,55,0.18);

    --dm-overlay-bg:    rgba(14, 24, 42, 0.58);
    --dm-overlay-blur:  10px;
}

/* ---- Base Reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    background: var(--dm-bg);
    color: var(--dm-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* ---- Layout ---- */
.auth-wrapper {
    width: 100%;
    max-width: 440px;
}

.auth-card {
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-lg);
    padding: 36px 32px;
    box-shadow: var(--dm-shadow-lg);
}

/* ---- Header ---- */
.auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo {
    width: 56px;
    height: 56px;
    background: var(--dm-accent-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.4rem;
    color: var(--dm-accent);
    border: 1px solid var(--dm-border);
    overflow: hidden;
}

.auth-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dm-text);
    margin-bottom: 4px;
}

.auth-subtitle {
    font-size: 0.875rem;
    color: var(--dm-text-secondary);
}

/* ---- Form Elements ---- */
.auth-form-group {
    margin-bottom: 18px;
}

.auth-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dm-text-secondary);
    margin-bottom: 6px;
}

.auth-label i {
    width: 14px;
    text-align: center;
    margin-right: 4px;
    color: var(--dm-text-muted);
}

.auth-input {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--dm-text);
    background: var(--dm-surface-3);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    outline: none;
    transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}

.auth-input:focus {
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 3px var(--dm-accent-bg);
}

.auth-input::placeholder {
    color: var(--dm-text-muted);
}

/* Row with input + button (email + send code) */
.auth-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.auth-input-row .auth-input {
    flex: 1;
    min-width: 0;
}

.auth-input-row .auth-btn {
    flex-shrink: 0;
    white-space: nowrap;
}