/* ============================================================
   pet.css — 毛孩子性格报告 浅色暖橙皮肤 + 全部组件（自包含）
   由 index.html 加载（本产品唯一皮肤）
   立场：替它说话、帮主人读懂它；暖橙 + 肉垫粉/暖黄，圆润可爱不压抑
   ============================================================ */

/* ---------------- 变量（完整一套） ---------------- */
:root {
    --ink-900: #FFF7EF; --ink-800: #FBF1E7; --ink-700: #FFFFFF;
    --ink-600: #F4EADF; --ink-500: #FBE7D6; --ink-line: rgba(150, 90, 40, 0.12);

    --gold-100: #FFE6D4; --gold-200: #FFC6A2; --gold-300: #FF8A4C;
    --gold-400: #FF7A33; --gold-500: #E5601C;

    --text-main: #3A2A1E; --text-sub: #7C6857; --text-faint: #AB9986;
    --text-on-gold: #FFFFFF;

    --paper: #FFFFFF; --paper-alt: #FBF3EA; --paper-warm: #FFF7F0;
    --paper-chip: #FDEFE2; --paper-track: #F4EADF; --paper-line: #EDDCCC;

    --cinnabar: #E0584C; --celadon: #4FB892;
    --pet-pink: #FF9E9E; --pet-yellow: #FFC46B;
    --primary: var(--gold-300); --danger: var(--cinnabar);

    --bg-card: #FFFFFF; --bg-item: #FBF3EA; --bg-control: #F6ECE1;
    --bg-mask: rgba(60, 35, 15, 0.42);
    --shadow-card: 0 8px 24px rgba(190, 110, 50, 0.12), 0 0 0 1px rgba(230,140,80,.05);

    --font-serif: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ---------------- 全局 ---------------- */
body {
    background: #FBF1E7;
    background-image: linear-gradient(180deg, #FFF8F1 0%, #FBF1E7 240px);
    color: var(--text-main);
}
input, select, textarea { color: var(--text-main); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select option { background: #fff; color: var(--text-main); }
.bg-cosmos, #stars, .meteor { display: none !important; }
.overlay::before { display: none; }

/* ---------------- 顶部标题栏 ---------------- */
.app-header { background: linear-gradient(180deg, #FFF9F3, #FDF0E3); border-bottom: 1px solid var(--ink-line); box-shadow: none; }
.app-header::before, .app-header::after { display: none; }
.header-cloud, .header-disc { display: none; }
.header-title {
    background: none; -webkit-background-clip: initial; background-clip: initial;
    -webkit-text-fill-color: var(--text-main); color: var(--text-main);
    filter: none; font-family: inherit; letter-spacing: 0; font-size: 17px;
}

/* ---------------- 底部 Tab Bar ---------------- */
.tab-bar { background: #FFFDFA; border-top: 1px solid var(--ink-line); box-shadow: 0 -4px 18px rgba(150,90,40,.08); }
.tab-bar::after { display: none; }
.tab-item { color: var(--text-faint); }
.tab-item.active { color: var(--gold-400); text-shadow: none; }
.tab-item.active::before { background: var(--gold-400); box-shadow: none; height: 3px; border-radius: 2px; }
.tab-item.active .tab-icon { filter: none; transform: translateY(-1px) scale(1.08); }

/* ---------------- 子页弹层 / 顶栏 ---------------- */
.overlay { background: #FBF1E7; background-image: none; }
.overlay-inner { display: block; padding: 0 14px 44px; }
.sub-nav { background: linear-gradient(180deg, #FFF9F3, #FDF0E3); border-bottom: 1px solid var(--ink-line); }
.sub-nav__back { color: var(--gold-400); }
.sub-nav__title {
    background: none; -webkit-background-clip: initial; background-clip: initial;
    -webkit-text-fill-color: var(--text-main); color: var(--text-main);
    filter: none; font-family: inherit; letter-spacing: 0; font-size: 17px;
}

/* ---------------- 布局容器 ---------------- */
.pet-scroll { padding: 6px 2px 24px; }
.pet-card {
    background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px;
    box-shadow: 0 6px 18px rgba(190,110,50,.08);
}
.pet-sec-title {
    font-size: 15px; font-weight: 700; color: var(--text-main);
    margin: 18px 2px 10px; display: flex; align-items: center; gap: 7px;
}
.pet-muted { color: var(--text-sub); }
.pet-faint { color: var(--text-faint); }
.pet-danger { color: var(--cinnabar) !important; }
.pet-danger-bg { background: var(--cinnabar); color: #fff; }

/* ---------------- 按钮 ---------------- */
.pet-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: 12px; padding: 12px 18px;
    font-size: 15px; font-weight: 600; background: var(--gold-300); color: #fff;
    transition: transform .08s, opacity .2s;
}
.pet-btn:active { transform: scale(.97); }
.pet-btn--block { width: 100%; box-sizing: border-box; }
.pet-btn--sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.pet-btn--ghost { background: #fff; color: var(--gold-400); box-shadow: inset 0 0 0 1px var(--gold-200); }
.pet-btn--orange { background: linear-gradient(135deg, #FFA066, #FF7A33); }
.pet-btn:disabled { opacity: .5; }
.pet-btn svg { width: 17px; height: 17px; }

/* ---------------- Hero ---------------- */
.pet-hero {
    border-radius: 20px; padding: 22px 18px; color: #fff;
    background: linear-gradient(135deg, #FFA066, #FF7A33);
    box-shadow: 0 12px 28px rgba(255,122,51,.3);
    position: relative; overflow: hidden; margin-bottom: 8px;
}
.pet-hero__deco { position: absolute; right: -30px; top: -34px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.14); }
.pet-hero__deco2 { position: absolute; right: 36px; bottom: -52px; width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.1); }
.pet-hero__greet { font-size: 13px; opacity: .92; position: relative; }
.pet-hero__title { font-size: 22px; font-weight: 800; margin: 6px 0 5px; position: relative; }
.pet-hero__sub { font-size: 13px; opacity: .94; margin-bottom: 16px; position: relative; line-height: 1.55; }
.pet-hero__cta {
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45);
    color: #fff; border-radius: 22px; padding: 9px 17px; font-size: 13px; font-weight: 600;
    display: inline-flex; gap: 6px; align-items: center; position: relative;
}

/* ---------------- 首页宠物卡片 ---------------- */
.pet-card-item { background: #fff; border-radius: 16px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(190,110,50,.08); overflow: hidden; }
.pet-card-item__top { display: flex; align-items: center; gap: 12px; padding: 14px 15px 12px; width: 100%; background: none; border: none; text-align: left; }
.pet-card-item__meta { flex: 1; min-width: 0; }
.pet-card-item__name { font-size: 16px; font-weight: 700; }
.pet-card-item__sub { font-size: 12px; color: var(--text-sub); margin-top: 3px; }
.pet-card-item__btns { display: flex; gap: 9px; padding: 0 15px 14px; }
.pet-card-item__btns .pet-btn { flex: 1; }

.pet-badge { font-size: 11px; padding: 3px 9px; border-radius: 9px; background: var(--paper-chip); color: var(--text-sub); flex: none; }
.pet-badge--done { background: #E4F6EE; color: #2C9C70; }

.pet-addhint { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--gold-400); text-align: center; padding: 26px 16px; }
.pet-addhint__text { font-size: 13px; color: var(--text-sub); line-height: 1.7; }
.pet-how__step { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--text-sub); margin-bottom: 11px; }
.pet-how__step b { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-100); color: var(--gold-500); display: grid; place-items: center; flex: none; }

/* ---------------- 头像 ---------------- */
.pet-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--gold-100); color: var(--gold-400); display: grid; place-items: center; flex: none; overflow: hidden; }
.pet-avatar svg { width: 25px; height: 25px; }
.pet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pet-avatar--lg { width: 86px; height: 86px; }
.pet-avatar--lg svg { width: 46px; height: 46px; }

/* ---------------- 表单 ---------------- */
.pet-field { margin-bottom: 16px; }
.pet-field__label { font-size: 13px; color: var(--text-sub); margin-bottom: 8px; display: block; }
.pet-input {
    width: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--ink-line);
    border-radius: 12px; padding: 12px 14px; font-size: 15px; color: var(--text-main);
}
textarea.pet-input { min-height: 92px; resize: vertical; line-height: 1.6; }
.pet-seg { display: flex; background: #F3E9DE; border-radius: 12px; padding: 3px; }
.pet-seg__item { flex: 1; text-align: center; padding: 9px 4px; border-radius: 9px; font-size: 13px; color: var(--text-sub); border: none; background: none; }
.pet-seg__item.on { background: #fff; color: var(--text-main); font-weight: 600; box-shadow: 0 2px 6px rgba(150,90,40,.12); }

/* 物种选择卡 */
.pet-species-wrap { display: flex; gap: 9px; }
.pet-species {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: #FBF3EA; border: 1.5px solid transparent; border-radius: 14px; padding: 13px 4px; font-size: 13px; color: var(--text-sub);
}
.pet-species__ico { color: var(--gold-400); }
.pet-species__ico svg { width: 30px; height: 30px; }
.pet-species.on { background: #FFF3EA; border-color: var(--gold-300); color: var(--gold-500); font-weight: 600; }

/* ---------------- 列表 / 设置 ---------------- */
.pet-list { background: #fff; border-radius: 16px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(190,110,50,.07); }
.pet-list__row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%; background: none; border: none; text-align: left; border-bottom: 1px solid var(--ink-line); font-size: 15px; }
.pet-list__row:last-child { border-bottom: none; }
.pet-list__ico { width: 21px; color: var(--gold-400); flex: none; display: grid; place-items: center; }
.pet-list__ico svg { width: 20px; height: 20px; }
.pet-list__label { flex: 1; }
.pet-list__val { font-size: 13px; color: var(--text-sub); }
.pet-list__arrow { color: var(--text-faint); display: grid; }
.pet-list__arrow svg { width: 17px; height: 17px; }

/* ---------------- 空状态 ---------------- */
.pet-empty { text-align: center; padding: 46px 22px; color: var(--text-faint); }
.pet-empty__ico { width: 64px; height: 64px; margin: 0 auto 12px; opacity: .5; }
.pet-empty__ico svg { width: 100%; height: 100%; }
.pet-empty__text { font-size: 14px; line-height: 1.6; }

/* ---------------- 晒宠：发布框 ---------------- */
.pet-sharebox { background: #fff; border-radius: 16px; padding: 14px 15px; margin: 6px 0 6px; box-shadow: 0 6px 18px rgba(190,110,50,.07); }
.pet-sharebox__label { font-size: 13px; color: var(--text-sub); display: block; }
.pet-sharebox textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--ink-line); border-radius: 12px; font-size: 15px; resize: none; min-height: 60px; padding: 11px 12px; background: #fff; }
.pet-sharebox__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pet-counter { font-size: 12px; color: var(--text-faint); }

/* ---------------- 晒宠墙 ---------------- */
.pet-wall__item { background: #fff; border-radius: 16px; padding: 14px 15px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(190,110,50,.07); }
.pet-wall__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.pet-wall__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pet-wall__who b { font-size: 14px; font-weight: 600; }
.pet-wall__who span { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.pet-wall__more { background: none; border: none; color: var(--text-faint); font-size: 18px; padding: 0 4px; flex: none; }
.pet-wall__content { font-size: 15px; line-height: 1.6; margin-bottom: 11px; word-break: break-word; }
.pet-wall__foot { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--ink-line); padding-top: 10px; }
.pet-vote { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--text-sub); background: none; border: none; }
.pet-vote svg { width: 19px; height: 19px; }
.pet-vote.on { color: var(--gold-400); }

/* ---------------- 报告库列表 ---------------- */
.pet-replist { display: flex; flex-direction: column; gap: 11px; }
.pet-replist__item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 15px; padding: 13px 15px; width: 100%; border: none; text-align: left; box-shadow: 0 5px 15px rgba(190,110,50,.06); }
.pet-replist__ico { width: 38px; height: 38px; border-radius: 11px; background: var(--gold-100); color: var(--gold-400); display: grid; place-items: center; flex: none; }
.pet-replist__ico svg { width: 22px; height: 22px; }
.pet-replist__meta { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pet-replist__meta b { font-size: 15px; font-weight: 600; }
.pet-replist__meta span { font-size: 12px; color: var(--text-faint); margin-top: 3px; }

/* ---------------- 报告渲染 ---------------- */
.pet-report-cover {
    border-radius: 18px; padding: 26px 22px; color: #fff; text-align: center;
    background: linear-gradient(135deg, #FFA066, #FF7A33); box-shadow: 0 12px 28px rgba(255,122,51,.28); margin-bottom: 14px;
}
.pet-report-cover__kicker { font-size: 12px; opacity: .9; letter-spacing: 2px; }
.pet-report-cover__headline { font-size: 19px; font-weight: 700; line-height: 1.7; margin-top: 12px; }
.dd-chapter { background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(190,110,50,.07); }
.dd-chapter__title { font-size: 16px; font-weight: 700; margin-bottom: 11px; display: flex; gap: 8px; align-items: center; }
.dd-chapter__num { width: 23px; height: 23px; border-radius: 7px; background: var(--gold-100); color: var(--gold-500); display: grid; place-items: center; font-size: 13px; flex: none; }
.dd-chapter__body { font-size: 14px; line-height: 1.75; color: var(--text-main); }
.pet-ai-tag { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: var(--text-sub); border: 1px solid var(--ink-line); border-radius: 10px; padding: 9px; margin: 4px 0 10px; }
.pet-ai-tag svg { width: 15px; height: 15px; color: var(--gold-400); }
.pet-report-actions { display: flex; gap: 10px; margin: 6px 0 10px; }
.pet-report-actions .pet-btn { flex: 1; }

/* 宠物资料信息行 */
.pet-info__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink-line); font-size: 14px; }
.pet-info__row:last-child { border-bottom: none; }
.pet-info__row span { color: var(--text-sub); }
.pet-info__row b { font-weight: 600; }

/* 报告等待 */
.pet-report-wait { text-align: center; padding: 90px 20px; }
.pet-spinner { display: flex; gap: 9px; justify-content: center; margin-bottom: 26px; }
.pet-spinner span { width: 12px; height: 12px; border-radius: 50%; background: var(--gold-300); animation: petbounce 1s infinite; }
.pet-spinner span:nth-child(2) { animation-delay: .15s; }
.pet-spinner span:nth-child(3) { animation-delay: .3s; }
@keyframes petbounce { 0%,80%,100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.pet-report-wait__title { font-size: 17px; font-weight: 700; }
.pet-report-wait__sub { font-size: 13px; color: var(--text-sub); margin-top: 9px; }

/* ---------------- 我的 ---------------- */
.pet-mine__user { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 18px 16px; margin: 6px 0 12px; box-shadow: 0 7px 20px rgba(190,110,50,.08); }
.pet-mine__info { flex: 1; min-width: 0; }
.pet-mine__name { font-size: 18px; font-weight: 700; }
.pet-mine__id { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.pet-vipbanner {
    background: linear-gradient(135deg, #43301F, #5F4A38); border-radius: 16px;
    padding: 15px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
}
.pet-vipbanner__info { flex: 1; min-width: 0; }
.pet-vipbanner__title { font-size: 15px; font-weight: 700; color: #F7E6C4; }
.pet-vipbanner__sub { font-size: 12px; color: #C9B390; margin-top: 4px; }

/* ---------------- 会员套餐 ---------------- */
.pet-vip-plans { display: flex; gap: 10px; }
.pet-vip-plan { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; background: #fff; border: 2px solid var(--ink-line); border-radius: 15px; padding: 17px 6px; }
.pet-vip-plan.on { border-color: var(--gold-300); background: #FFF7F0; }
.pet-vip-plan__tag { font-size: 13px; color: var(--text-sub); }
.pet-vip-plan__price { font-size: 21px; font-weight: 800; color: var(--gold-500); }
.pet-vip-plan__old { font-size: 12px; color: var(--text-faint); text-decoration: line-through; }

/* ---------------- 消息 ---------------- */
.pet-msg { display: flex; flex-direction: column; gap: 10px; }
.pet-msg__item { display: flex; gap: 11px; background: #fff; border-radius: 14px; padding: 13px 15px; width: 100%; border: none; text-align: left; box-shadow: 0 5px 15px rgba(190,110,50,.06); }
.pet-msg__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-400); margin-top: 7px; flex: none; }
.pet-msg__dot.read { background: #D8CABD; }
.pet-msg__meta { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pet-msg__meta b { font-size: 14px; font-weight: 600; }
.pet-msg__meta span { font-size: 13px; color: var(--text-sub); margin-top: 4px; line-height: 1.5; }
.pet-msg__item.is-read .pet-msg__meta b { color: var(--text-sub); font-weight: 500; }

/* ---------------- 海报 / 性格卡 ---------------- */
.pet-poster-wrap { text-align: center; padding: 18px 0; }
.pet-poster-wrap canvas { max-width: 100%; border-radius: 16px; box-shadow: 0 14px 34px rgba(150,90,40,.22); }

/* ---------------- 首次引导 / 登录 ---------------- */
.pet-onboard { padding: 24px; text-align: center; min-height: calc(100vh - 110px); display: flex; flex-direction: column; justify-content: center; }
.pet-onboard__ico { width: 92px; height: 92px; margin: 0 auto 20px; color: var(--gold-400); }
.pet-onboard__title { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.pet-onboard__desc { font-size: 15px; color: var(--text-sub); line-height: 1.75; margin-bottom: 26px; }
.pet-onboard__feat { text-align: left; margin-bottom: 26px; }
.pet-onboard__feat-item { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 15px; font-size: 14px; }
.pet-onboard__feat-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--gold-100); color: var(--gold-400); display: grid; place-items: center; flex: none; }
.pet-onboard__feat-ico svg { width: 19px; height: 19px; }

/* ---------------- 法律页 ---------------- */
.pet-legal { font-size: 14px; line-height: 1.8; }
.pet-legal h3 { font-size: 16px; margin: 18px 0 9px; }
.pet-legal p { margin-bottom: 11px; color: var(--text-sub); }

/* ---------------- 模态 ---------------- */
.pet-modal-mask { position: fixed; inset: 0; z-index: 80; background: var(--bg-mask);
    display: flex; align-items: center; justify-content: center; padding: 28px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pet-modal-mask.show { opacity: 1; pointer-events: auto; }
.pet-modal { background: #fff; border-radius: 18px; padding: 22px 20px; width: 100%; max-width: 340px; text-align: center; position: relative; box-sizing: border-box; }
.pet-modal__close { position: absolute; right: 12px; top: 12px; background: none; border: none; color: var(--text-faint); }
.pet-modal__close svg { width: 19px; height: 19px; }
.pet-modal__title { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.pet-modal__btns { display: flex; gap: 10px; margin-top: 6px; }
.pet-modal__btns .pet-btn { flex: 1; }

/* ---------------- 全局轻提示 toast（公共层 app.js 创建 #globalToast） ---------------- */
.toast { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
    z-index: 99; max-width: 78%; background: rgba(58, 40, 28, 0.92);
    border: 1px solid var(--gold-300); color: #FFF6EE; padding: 11px 20px;
    border-radius: 12px; font-size: 14px; line-height: 1.6; text-align: center;
    box-shadow: 0 6px 20px rgba(120, 80, 50, 0.28);
    opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.show { opacity: 1; }