/* ===== 基座：配色变量 / 全局重置 / 页面骨架 =====
   本文件由原 index.css 按关注点分片而来，同目录下还有：
     index-history.css    历史记录侧栏 / 移动端历史抽屉
     index-inputs.css     卡片 / 提示词输入 / 参数表单 / 参考图上传
     index-controls.css   模型标识 / 按钮
     index-result.css     右侧结果区 / 生成中加载画布
     index-modals.css     弹窗 / 全屏看图
     index-workspace.css  应用外壳（侧栏 + 主区）
     index-templates.css  灵感模板模块 / 模板详情弹窗
     index-responsive.css 响应式媒体查询
   分片是按原文件顺序切开的，<link> 必须保持相同顺序，级联结果才与拆分前一致；
   跨文件的覆盖关系仍然依赖顺序，不要随意调整 index.html 里的引入次序。 */
:root {
    /* 动物森友会配色系统 */
    --bg: #f8f8f0;
    --card-bg: rgb(247, 243, 223);
    --border: #d4c9b4;
    --border-light: #e5dec8;
    --text: #725d42;
    --text-heading: #794f27;
    --text-secondary: #9f927d;
    --text-muted: #c4b89e;
    --primary: #19c8b9;
    --primary-hover: #3dd4c6;
    --primary-active: #11a89b;
    --primary-light: #e6f9f6;
    --primary-3d: #0e9e95;
    --danger: #e05a5a;
    --danger-active: #c94444;
    --danger-bg: #fff5f5;
    --success: #6fba2c;
    --success-active: #5a9e1e;
    --success-bg: #f4faf0;
    --warning: #f5c31c;
    --warning-active: #dba90e;
    --warning-bg: #fffdf5;
    --focus: #ffcc00;
    --focus-dark: #e0b800;
    --shadow-3d: #bdaea0;
    --shadow-btn: rgba(61, 52, 40, 0.06);
    --shadow-btn-hover: rgba(61, 52, 40, 0.10);
    --radius-btn: 50px;
    --radius-card: 20px;
    --radius-sm: 16px;
    --radius-xs: 12px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    font-family: Nunito, 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
    font-weight: 500;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(25, 200, 185, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(136, 157, 240, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(247, 205, 103, 0.04) 0%, transparent 50%);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
    /* 用 flex 精确分配高度，避免硬编码 calc 造成的 1~2px 溢出与滚动条 */
    display: flex;
    flex-direction: column;
}

/* ========== Header ========== */
.header {
    flex-shrink: 0;
    border-bottom: 2px solid var(--border-light);
    background: var(--card-bg);
    box-shadow: 0 2px 12px rgba(61, 52, 40, 0.04);
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-heading);
}

.logo-icon {
    width: 34px;
    height: 34px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 3px 0 0 var(--primary-active);
}

.logo-text {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ========== Main Layout ========== */
.main-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    height: calc(100vh - 62px);
    overflow: hidden;
}

/* ========== Controls Panel ========== */
.left-panel {
    width: 440px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    overflow-y: auto;
    padding-right: 4px;
}