/* =========================================================
   vid2cat - 萌宠图鉴治愈系主题 (基于参考图片重构)
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    /* 主题色：软萌的暖色调 */
    --primary: #fbbd61;      /* 温暖的橘黄色 (参考图主色) */
    --primary-dark: #e8a53a; /* 橘黄按下状态 */
    --accent: #a88be8;       /* 柔和的紫色 (参考图“查看卡片”按钮) */
    
    /* 背景色：奶油/羊皮纸质感 */
    --bg: #fcf9f2;           /* 整体背景底色 */
    --bg-light: #ffffff;
    --card: #ffffff;         /* 卡片底色保持纯白，靠边框区分 */
    --card-hover: #fdfaf4;
    
    /* 文本颜色：深咖/灰褐色代替纯黑，更柔和 */
    --text: #6d5b53;
    --text-main: #4a3e38;
    --muted: #a6998f;
    
    /* 边框与UI元素：绘本感粗边框 */
    --border: #e8ded1;       /* 柔和的奶茶色边框 */
    --border-thick: 2px solid var(--border);
    --danger: #f69393;
    --success: #8cdba8;
    
    /* 阴影：扁平化设计，极弱的暖色阴影 */
    --shadow: 0 8px 24px rgba(166, 148, 126, 0.08);
    --btn-shadow: 0 4px 0 #d8ccbd; /* 按钮的 3D 厚度 */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* 推荐使用圆润的字体，配合整体风格 */
    font-family: 'Nunito', 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', 'Comic Sans MS', sans-serif;
    color: var(--text);
    background-color: var(--bg);
    /* 顶部加上类似云彩/晚霞的微弱暖色渐变背景 */
    background-image: linear-gradient(180deg, #fff3e0 0%, #fcf9f2 400px);
    background-repeat: no-repeat;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

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

.page-shell {
    width: min(1160px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 64px;
}

/* =========================================================
   基础卡片与容器 (绘本风：圆角 + 粗边框)
========================================================= */
.hero-card,
.content-card,
.search-box,
.detail-hero,
.market-card,
.cat-switch-card,
.unified-dialog-card,
.info-panel,
.stat-box,
.chat-messages {
    background: var(--card);
    border: var(--border-thick);
    border-radius: 28px; /* 非常圆润的倒角 */
    box-shadow: var(--shadow);
    padding: 24px;
}

/* 降低内部元素的内边距冗余 */
.market-card { padding: 0; overflow: hidden; }
.cat-switch-card { padding: 16px; }
.info-panel, .stat-box { border-radius: 20px; }

/* 标题排版 */
h1, h2, h3 {
    color: var(--text-main);
    font-weight: 800;
    margin-top: 0;
    letter-spacing: 0.5px;
}

h2 { font-size: 24px; margin-bottom: 0; }
h3 { font-size: 18px; margin-bottom: 8px; }

.section-hint {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* =========================================================
   按钮与交互 (3D 果冻/游戏按键风)
========================================================= */
button, .primary-btn, .accent-btn, .ghost-btn, .anchor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px; /* 胶囊形状 */
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    border: var(--border-thick);
}

.primary-btn {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 0 var(--primary-dark);
}

.primary-btn:hover { background: #fccc7f; transform: translateY(2px); box-shadow: 0 2px 0 var(--primary-dark); }
.primary-btn:active { transform: translateY(4px); box-shadow: none; }

.accent-btn {
    background: var(--accent);
    color: #fff;
    border-color: #8c73c4;
    box-shadow: 0 4px 0 #8c73c4;
}

.accent-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #8c73c4; }
.accent-btn:active { transform: translateY(4px); box-shadow: none; }

.ghost-btn {
    background: #fff;
    color: var(--text-main);
    box-shadow: var(--btn-shadow);
}

.ghost-btn:hover {
    background: var(--card-hover);
    transform: translateY(2px);
    box-shadow: 0 2px 0 #d8ccbd;
}

.ghost-btn:active { transform: translateY(4px); box-shadow: none; }

.full-width { width: 100%; }

/* =========================================================
   标签与胶囊 (Pill & Tags - 参考图中的小彩条)
========================================================= */
.pill-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill, .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid transparent;
}

/* 默认亮色标签 */
.pill {
    background: #fff0d4;
    color: #d68915;
    border-color: #fde2b4;
}

/* 柔和/次要标签 */
.pill.muted, .tag {
    background: #f5f1eb;
    color: var(--muted);
    border-color: var(--border);
}

/* 激活/主要属性标签 */
.pill.active {
    background: #e8f5ed !important;
    color: #4eb57a !important;
    border-color: #c0e6ce !important;
}

/* 技能稀有度徽章 */
.skill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    border: var(--border-thick);
}
.skill-rarity { font-size: 12px; font-weight: 900; opacity: 0.9; }

/* =========================================================
   我的猫咪页 (My Cat) 核心区域定制
========================================================= */

/* 1. 左侧猫咪列表 (类似图鉴侧边栏) */
.cat-switcher-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cat-switch-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    transition: all 0.2s ease;
}

.cat-switch-card.active {
    background: #fffaf0;
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(251, 189, 97, 0.2);
}

.cat-switch-thumb {
    width: 96px;
    height: 96px;
    border-radius: 20px;
    overflow: hidden;
    background: #f0f4f8; /* 柔和的天空蓝底色 */
    border: var(--border-thick);
}

.cat-switch-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cat-switch-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800; color: var(--primary);
}

.cat-switch-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cat-switch-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cat-switch-top h3 { margin: 0; font-size: 16px; min-width: 0; }
.cat-switch-top .pill { flex-shrink: 0; }
.cat-switch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.cat-switch-actions form {
    margin: 0;
}

.cat-switch-actions .ghost-btn,
.cat-switch-actions .pill {
    min-width: 96px;
}

/* 2. 主展示区布局 */
.cat-stage-layout {
    display: grid;
    grid-template-columns: minmax(320px, 400px) 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 20px;
}

.cat-stage-side { display: grid; gap: 20px; }

/* 3. 猫咪形象主立绘 (参考图中间的天空背景) */
.cat-avatar-card {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 模仿参考图中蓝天白云的清新背景 */
    background: linear-gradient(180deg, #e0f2f7 0%, #fdfbf6 100%);
    border: var(--border-thick);
    border-radius: 36px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* 4. 属性雷达与进度条 */
.info-panel { padding: 20px; background: #faf7f2; }

.stats-row-tight { display: flex; gap: 12px; }
.stat-box {
    flex: 1;
    background: #fff;
    padding: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.stat-box .label { display: block; font-size: 13px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.stat-box strong { font-size: 22px; color: var(--text-main); font-weight: 800; }

.current-stats-panel {
    margin-top: 18px;
}

.compact-profile-grid {
    margin-bottom: 0;
}

.compact-profile-grid .profile-item {
    min-width: 0;
}

/* 进度条 (粗短萌系) */
.exp-bar {
    width: 100%;
    height: 18px;
    border-radius: 999px;
    background: #ede6dd;
    border: 2px solid #e1d6c8;
    overflow: hidden;
    margin: 12px 0;
}
.exp-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
}

/* =========================================================
   对话与聊天面板 (手账记事本风格)
========================================================= */
.unified-dialog-card {
    background: #fff;
}

.chat-messages {
    background: #faf7f2;
    border: var(--border-thick);
    min-height: 360px;
    max-height: 500px;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    max-width: 85%;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
}

.message-content {
    padding: 12px 18px;
    border-radius: 20px;
    border: var(--border-thick);
}

.message.user { align-self: flex-end; }
.message.user .message-content {
    background: #fff4e6;
    border-color: #fde0b2;
    color: #b57410;
    border-bottom-right-radius: 4px;
}

.message.assistant { align-self: flex-start; }
.message.assistant .message-content {
    background: #fff;
    color: var(--text-main);
    border-bottom-left-radius: 4px;
}

/* 输入区 */
.unified-input-area { margin-top: 16px; }
textarea {
    width: 100%;
    border: var(--border-thick);
    background: #faf7f2;
    border-radius: 20px;
    padding: 16px;
    outline: none;
    font-weight: 600;
    color: var(--text-main);
    resize: vertical;
    min-height: 110px;
    transition: all 0.2s;
}
textarea:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(251, 189, 97, 0.2);
}

/* =========================================================
   广场/市场页 (Plaza) - 图鉴卡片网格
========================================================= */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.market-card {
    display: flex;
    flex-direction: column;
    border: var(--border-thick);
    border-radius: 28px;
    background: #fff;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.market-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(166, 148, 126, 0.15);
}

.market-card-cover {
    height: 220px;
    background: linear-gradient(180deg, #f0f4f8 0%, #fff 100%);
    border-bottom: var(--border-thick);
    padding: 10px;
}

.market-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.market-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.market-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.market-owner { color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 4px;}
.card-summary { font-size: 14px; line-height: 1.6; color: var(--text); flex: 1; margin: 0; }
.market-card-action, .action-row { margin-top: auto; }
.action-row { display: flex; gap: 12px; }

/* =========================================================
   表单与输入框
========================================================= */
select, input[type="text"], input[type="email"], input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    border: var(--border-thick);
    background: #faf7f2;
    color: var(--text-main);
    font-weight: 600;
    outline: none;
}
select:focus, input:focus { border-color: var(--primary); }
.stack-form { display: flex; flex-direction: column; gap: 16px; }
.adoption-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adoption-grid label { display: flex; flex-direction: column; gap: 8px; font-weight: 700; color: var(--text-main); }

.dialog-open {
    overflow: hidden;
}

.dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.dialog-overlay.hidden {
    display: none;
}

.dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(74, 62, 56, 0.38);
    backdrop-filter: blur(6px);
}

.adoption-dialog {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    border-radius: 28px;
}

.dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.dialog-close-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--text-main);
    font-size: 24px;
    line-height: 1;
}

.dialog-actions {
    justify-content: flex-end;
}

.auth-dialog {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-height: min(88vh, 760px);
    overflow-y: auto;
    border-radius: 28px;
}

.auth-tab-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.auth-tab-btn {
    background: #fff;
    color: var(--text-main);
    border: var(--border-thick);
    box-shadow: none;
}

.auth-tab-btn.active {
    background: #fff4df;
    border-color: var(--primary);
    color: var(--primary-dark);
}

.auth-panel {
    display: none;
}

.auth-panel.active {
    display: block;
}

.auth-panel .stack-form input {
    min-height: 48px;
}

.guide-dialog {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    border-radius: 28px;
}

.hover-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.hover-info-card {
    position: relative;
}

.hover-info-trigger {
    width: 100%;
    background: #fff;
    color: var(--text-main);
    box-shadow: var(--btn-shadow);
}

.hover-info-popover {
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: min(280px, 78vw);
    padding: 14px 16px;
    border-radius: 18px;
    border: var(--border-thick);
    background: #fffefb;
    box-shadow: 0 16px 36px rgba(166, 148, 126, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 5;
}

.hover-info-popover h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text-main);
}

.hover-info-popover p {
    margin: 0;
    color: var(--text);
    line-height: 1.65;
    font-size: 13px;
}

.hover-info-card:hover .hover-info-popover,
.hover-info-card:focus-within .hover-info-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel-actions {
    display: flex;
    margin-top: 18px;
}

.panel-actions-right {
    justify-content: flex-end;
}

.danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    border: 2px solid #d96c6c;
    background: #f69393;
    color: #fff;
    box-shadow: 0 4px 0 #d96c6c;
    transition: all 0.15s ease;
}

.danger-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #d96c6c;
}

.danger-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

.image-preview-dialog {
    position: relative;
    z-index: 1;
    width: min(860px, 100%);
    max-height: min(92vh, 900px);
    overflow: auto;
    border-radius: 28px;
}

.image-preview-body {
    border-radius: 20px;
    border: var(--border-thick);
    background: #faf7f2;
    padding: 12px;
}

.image-preview-body img {
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.loading-dialog {
    position: relative;
    z-index: 1;
    width: min(360px, calc(100vw - 32px));
    text-align: center;
    border-radius: 28px;
}

.loading-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 4px solid #f6dec0;
    border-top-color: var(--primary-dark);
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   杂项提示与状态
========================================================= */
.notice, .inline-warning, .empty-state {
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 20px;
    font-weight: 700;
    border: var(--border-thick);
}
.notice.success { background: #e8f5ed; color: #3b915d; border-color: #c0e6ce; }
.notice.error, .inline-warning { background: #fdf2f2; color: #d9534f; border-color: #f7d2d2; }
.empty-state { background: #faf7f2; color: var(--muted); text-align: center; padding: 40px 20px; }

/* 导航栏 */
.site-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: var(--border-thick);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-container { max-width: 1160px; margin: 0 auto; padding: 10px 20px; min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.site-logo { font-size: 20px; font-weight: 900; color: var(--primary-dark); }
.nav-links { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex: 1; font-weight: 700; min-width: 0; }
.nav-primary-links,
.nav-auth-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-auth-actions .accent-btn {
    min-width: 132px;
}

.nav-primary-links a {
    white-space: nowrap;
}

.nav-auth-actions .ghost-btn,
.nav-auth-actions .accent-btn {
    padding: 10px 16px;
}

.menu-action-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text-main);
    border: none;
    box-shadow: none;
    padding: 8px 12px;
    border-radius: 8px;
}

.menu-action-btn:hover {
    background: #faf7f2;
}

.nav-links a:hover { color: var(--primary); }

/* 响应式调整 */
@media (max-width: 820px) {
    .cat-stage-layout, .adoption-grid { grid-template-columns: 1fr; }
    .cat-avatar-card { min-height: 260px; }
    .dialog-overlay {
        padding: 16px;
    }
    .header-container,
    .nav-links {
        align-items: stretch;
        flex-direction: column;
    }
    .nav-links {
        width: 100%;
        gap: 12px;
    }
    .nav-primary-links,
    .nav-auth-actions {
        width: 100%;
        justify-content: space-between;
    }
    .hover-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .market-grid { grid-template-columns: 1fr; }
    .action-row { flex-direction: column; }
    .cat-switch-card { grid-template-columns: 72px 1fr; }
    .cat-switch-thumb { width: 72px; height: 72px; border-radius: 16px; }
    .cat-switch-actions { grid-column: 1 / -1; width: 100%; }
    .cat-switch-actions .ghost-btn,
    .cat-switch-actions form,
    .cat-switch-actions form button { width: 100%; }
    .adoption-dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 24px;
    }
    .guide-dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 24px;
    }
    .auth-dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 24px;
    }
    .image-preview-dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 24px;
    }
    .dialog-header {
        align-items: center;
    }
    .dialog-actions {
        flex-direction: column-reverse;
    }
    .stats-row-tight {
        flex-direction: column;
    }
    .hover-info-grid {
        grid-template-columns: 1fr 1fr;
    }
    .hover-info-popover {
        width: calc(100vw - 48px);
        max-width: none;
        left: 50%;
        transform: translate(-50%, 6px);
    }
    .hover-info-card:hover .hover-info-popover,
    .hover-info-card:focus-within .hover-info-popover {
        transform: translate(-50%, 0);
    }
    .panel-actions-right {
        justify-content: stretch;
    }
    .panel-actions-right form,
    .danger-btn {
        width: 100%;
    }
    .nav-primary-links,
    .nav-auth-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .nav-primary-links a,
    .nav-auth-actions button {
        white-space: nowrap;
    }
    .auth-tab-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}