/* SuperBXR Platform - Vogue-Inspired Design System */
/* Typography: Playfair Display (editorial serif) + Inter (clean sans) */
/* Google Fonts 国内不稳定，改用国内镜像 */
@import url('https://fonts.loli.net/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Brand Colors */
    --navy: #1e3a5f;
    --navy-light: #2a4f7f;
    --navy-dark: #152a45;
    --gold: #d4a843;
    --gold-light: #e8c96a;
    --gold-muted: rgba(212,168,67,0.12);

    /* Semantic */
    --primary: var(--navy);
    --primary-light: var(--navy-light);
    --bg: #FAFAF8;
    --card: #FFFFFF;
    --text: #1a1a1a;
    --text-secondary: #6B7280;
    --border: #E8E6E1;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;

    /* Typography */
    --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
}

/* Base */
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
    position: relative;
}
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('/static/images/logo.png');
    background-repeat: repeat;
    background-size: 120px auto;
    opacity: 0.018;
    filter: grayscale(100%);
    pointer-events: none;
    z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* Editorial Headings */
h1, h2, h3, .heading-serif {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Layout */
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

/* Cards */
.card {
    background: var(--card);
    border-radius: 8px;
    padding: var(--space-lg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    border: 1px solid var(--border);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
}
.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--navy-dark);
    font-weight: 600;
}
.btn-gold:hover { box-shadow: 0 4px 16px rgba(212,168,67,0.35); }

/* Inputs */
.input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 15px;
    font-family: var(--font-sans);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,67,0.1); }

/* Badges */
.badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.badge-success { background: #D1FAE5; color: #065F46; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
.badge-gold { background: var(--gold-muted); color: var(--gold); }

/* Utility */
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.gap-4 { gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Divider */
.divider { height: 1px; background: var(--border); margin: var(--space-lg) 0; }

/* Gold accent line */
.accent-line { width: 40px; height: 2px; background: var(--gold); }