/* ============================================
   Future You — 未来自我心理干预系统
   设计系统：暖白底 + 鼠尾草绿 + 大量留白
   字体使用系统默认（国内无需 Google Fonts，避免加载超时）
   ============================================ */

/* === CSS 变量 === */
:root {
    /* 色彩 */
    --color-bg: #faf9f7;
    --color-bg-card: #ffffff;
    --color-text: #2d2d2d;
    --color-text-secondary: #6b6b6b;
    --color-text-muted: #999999;
    --color-accent: #7c9a92;
    --color-accent-hover: #6a8a82;
    --color-accent-light: #e8f0ed;
    --color-warm: #d4a574;
    --color-warm-light: #faf3eb;
    --color-border: #e8e5e0;
    --color-success: #8fbc8f;
    --color-error: #c97b7b;
    --color-error-light: #fdf0f0;

    /* 排版 */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-serif: Georgia, 'Noto Serif SC', 'SimSun', serif;

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 50%;

    /* 阴影 */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-elevated: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-button: 0 2px 8px rgba(124,154,146,0.25);

    /* 过渡 */
    --transition: 0.25s ease;

    /* 间距 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* 布局 */
    --max-form: 680px;
    --max-showcase: 880px;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover {
    color: var(--color-accent-hover);
}

/* === Typography === */
h1, h2, h3, h4 {
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-text);
}

h1 { font-size: clamp(1.65rem, 3vw, 2rem); margin-bottom: var(--space-md); }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.5rem); margin-bottom: var(--space-lg); }
h3 { font-size: clamp(1.08rem, 2vw, 1.2rem); margin-bottom: var(--space-md); }

/* === Layout === */
#app {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: var(--max-form);
    margin: 0 auto;
    padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
    min-width: 0;
}

.container-wide {
    max-width: var(--max-showcase);
}

.view {
    flex: 1;
    padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl));
    padding-bottom: max(clamp(var(--space-xl), 6vw, var(--space-3xl)), env(safe-area-inset-bottom));
    animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Utility === */
.text-center { text-align: center; }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.font-serif { font-family: var(--font-serif); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.hidden { display: none !important; }