/* ============================================================
   101-style-base.css - 基础样式
   ============================================================ */

:root {
    --primary: #7C5CFC;
    --primary-light: #A78BFA;
    --primary-dark: #5B3FD4;
    --primary-gradient: linear-gradient(135deg, #7C5CFC 0%, #EC4899 100%);
    --primary-soft: rgba(124, 92, 252, 0.12);

    --bg: #F5F0FF;
    --bg-soft: #FAF7FF;
    --card: #FFFFFF;
    --card-glass: rgba(255, 255, 255, 0.72);

    --text: #1A1A2E;
    --text-secondary: #4A4A6A;
    --text-muted: #9A9ABF;

    --border: rgba(124, 92, 252, 0.12);

    --radius: 24px;
    --radius-sm: 16px;
    --radius-xs: 12px;
    --radius-btn: 30px;

    --shadow-card: 0 8px 32px rgba(124, 92, 252, 0.10);
    --shadow-hover: 0 16px 48px rgba(124, 92, 252, 0.18);
    --shadow-btn: 0 6px 24px rgba(124, 92, 252, 0.30);

    --font: -apple-system, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    --transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background: var(--bg);
    min-height: 100vh;
    padding: 16px;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: -20%;
    right: -20%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse, #E8D5FF 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

body::after {
    content: '';
    position: fixed;
    bottom: -10%;
    left: -15%;
    width: 50%;
    height: 50%;
    background: radial-gradient(ellipse, #FCE4EC 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.hidden {
    display: none !important;
}