/* ============================================================
   dudu.css — AI学习搭子「橙汽水 Pop」皮肤（v4 视觉焕新）
   奶油汽水底 / 白贴纸卡 + 墨线粗描边 + 硬偏移阴影 / 橙黄撞色
   契约文件：DESIGN.md（方向 C · VARIANCE 8 / MOTION 7 / DENSITY 3）
   仅 dudu 专用 index.html 加载

   ── 设计令牌（dd- 前缀）──
   · 字阶：11 角标 / 12 说明 / 13 次要 / 14 正文 / 15 卡题 / 17 区块题 / 20 内容题·价格 / 22 hero 主标 / 26 统计大数
   · 图标：sprite 三档描边（主线 2.2 / 细节 1.8 / 强调 2.5，48 viewBox）与墨线卡同语言
   · 圆角：图标座 9 / 勾选 7-8 / 卡片 16 / hero·banner 18 / 胶囊 999
   · 描边：小元素 2px / 大卡与栏 2.5px（全站仅此两档）
   · 硬阴影：小贴纸 3px / 大卡 CTA 4px（全站仅此两档），颜色 = 墨描边色
   · 间距：页面左右 16，卡片间距 16（硬阴影占 4），区块间距 24
   · 绿/薄荷仅用于成功态与点缀，主 CTA = 橙底墨字（5.6:1）
   ============================================================ */

/* ---------------- 设计令牌 ---------------- */
:root {
    /* 暖橙手帐令牌 */
    --dd-bg: #FFE9CF;
    --dd-card: #FFFFFF;
    --dd-ink: #2A2118;      /* 主文字 / 全站描边色 */
    --dd-border: #2A2118;   /* 贴纸墨描边（= --dd-ink） */
    --dd-ink2: #5C5347;     /* 次要（对 --dd-bg 6.4:1） */
    --dd-ink3: #6E6154;     /* 弱提示（对 --dd-bg 5.1:1） */
    --dd-line: #F2DDBE;     /* 卡内虚线 / 浅分隔 */
    --dd-brand: #FF6B1A;
    --dd-brand-deep: #C2410C;   /* 文字级品牌橙（白底 5.18:1） */
    --dd-brand-ink: #9A3412;    /* 浅橙底上的文字级橙（5.86:1） */
    --dd-brand-soft: #FFE1C7;   /* 图标座浅橙底 */
    --dd-brand-line: #FFD1A8;   /* 虚线浅橙 */
    --dd-yellow: #FFD23F;       /* 强调贴纸底 */
    --dd-yellow-deep: #6D5300;  /* 黄底文字级（对 --dd-yellow 5.0:1） */
    --dd-mint: #2EC4B6;         /* 薄荷点缀（统计块/开关） */
    --dd-mint-deep: #0F766E;    /* 薄荷文字级（白底 5.47:1） */
    --dd-green: #3DAB7A;        /* 仅成功/完成态 */
    --dd-green-deep: #1F7A50;   /* 文字级成功绿（白底 5.31:1） */
    --dd-r-ico: 9px;
    --dd-r-card: 16px;
    --dd-r-hero: 18px;
    --dd-r-pill: 999px;
    --dd-sh-card: 3px 3px 0 var(--dd-border);   /* 小贴纸硬阴影 */
    --dd-sh-cta: 4px 4px 0 var(--dd-border);    /* 大卡/CTA 硬阴影 */
    --dd-font: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;

    /* 底部 Tab 高度（layout.css 的 .app-view 高度计算消费同一变量） */
    --tabbar-h: 56px;

    /* 遗留共享层（theme/components/layout/pages.css）变量覆盖为奶油汽水系，
       不改动那些文件本身 */
    --ink-900: #FFF6E8;
    --ink-800: #FFE9CF;
    --ink-700: #FFFFFF;
    --ink-600: #FFE4C2;
    --ink-500: #FFD9AE;
    --ink-line: #F2DDBE;

    --gold-100: #FFE1C7;
    --gold-200: #FFD9AE;
    --gold-500: #C2410C;
    /* --gold-300/400/--primary/--celadon 由 config_dudu.js 内联注入，不在此重复 */

    --text-main: #2A2118;
    --text-sub: #5C5347;
    --text-faint: #6E6154;
    --text-on-gold: #2A2118;

    --cinnabar: #D9483C;
    --danger: var(--cinnabar);

    --bg-card: #FFFFFF;
    --bg-item: #FFE9CF;
    --bg-control: #F6ECE1;
    --bg-mask: rgba(42, 33, 24, .45);
    --bg-mask-strong: rgba(42, 33, 24, .6);
    --shadow-card: var(--dd-sh-card);

    --font-serif: var(--dd-font);
    --font-display: var(--dd-font);
}

/* ---------------- 图标线宽体系 ----------------
   sprite symbol 不再写死 stroke-width（已全部删除），线宽由此处设在 svg 上
   经继承传入 <use> shadow tree；内联 svg（计时环等）自带属性值不受影响。
   基础档=手机高 DPR(2-3x)：22px+ 座 1.5、16-20px 座 1.8、大 logo 0.5，
   线重≈2 物理px；桌面低 DPR(≤1.5x) 自动加粗，线重≈1 逻辑px 不发虚 */
svg { stroke-width: 1.8; }
.tab-icon, .dd-quick__ico svg { stroke-width: 1.5; }
.dd-empty__ico svg, .dd-vipbanner > svg, .dd-vipbanner__ico svg { stroke-width: 1.2; }
.dd-onboard__ico svg { stroke-width: .5; }
@media (-webkit-max-device-pixel-ratio: 1.5) {
    svg { stroke-width: 2.8; }
    .tab-icon, .dd-quick__ico svg { stroke-width: 2.4; }
    .dd-empty__ico svg, .dd-vipbanner > svg, .dd-vipbanner__ico svg { stroke-width: 2.2; }
    .dd-onboard__ico svg { stroke-width: 1; }
}

/* ---------------- 全局底色 / 文字 ---------------- */
body {
    font-family: var(--dd-font);
    background: var(--dd-bg);
    background-image: radial-gradient(120% 42% at 50% 0%, #FFF3DC 0%, rgba(255, 243, 220, 0) 60%);
    background-attachment: fixed;
    color: var(--dd-ink);
}
input, select, textarea { color: var(--dd-ink); font-family: var(--dd-font); }
button { font-family: var(--dd-font); }
input::placeholder, textarea::placeholder { color: var(--dd-ink3); }
select option { background: #fff; color: var(--dd-ink); }

/* 隐藏深邃星空 / 流星 / 弹层星点（浅色皮肤不需要） */
.bg-cosmos, #stars, .meteor { display: none !important; }
.overlay::before { display: none; }

/* 轻提示（pages.css 深色版覆盖为暖卡） */
.toast {
    background: #fff;
    border: 2px solid var(--dd-border);
    color: var(--dd-ink);
    border-radius: var(--dd-r-pill);
    font-size: 13px;
    box-shadow: var(--dd-sh-card);
}

/* ---------------- 顶部标题栏：奶油白 + 墨描边 ---------------- */
.app-header {
    background: #FFF6E8;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 2.5px solid var(--dd-border);
    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(--dd-ink); color: var(--dd-ink);
    filter: none; font-family: var(--dd-font); letter-spacing: 0;
    font-size: 17px; font-weight: 600;
}

/* ---------------- 底部 Tab Bar：悬浮白底毛玻璃 ----------------
   左右内缩 16px，与内容卡片区严格同宽（640 容器 − 2×16 = 608），
   宽屏 / 窄屏下左右边缘都与卡片完全对齐；悬浮圆角 + 投影，是一张「底卡」 */
.tab-bar {
    left: 16px; right: 16px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-width: 608px;
    margin: 0 auto;
    height: var(--tabbar-h);
    box-sizing: border-box;
    padding-bottom: 0;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2.5px solid var(--dd-border);
    border-radius: 16px;
    box-shadow: var(--dd-sh-cta);
}
.tab-bar::after { display: none; }
.tab-item { background: none; border: none; padding: 0; margin: 0; font-family: inherit;
    color: var(--dd-ink3); font-size: 12px; letter-spacing: 0; gap: 4px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
.tab-icon { width: 24px; height: 24px; }
.tab-item.active { color: var(--dd-ink); font-weight: 700; text-shadow: none; }
.tab-item.active::before {
    background: var(--dd-yellow);
    border: 2px solid var(--dd-border);
    box-shadow: none; height: 30px; width: 44px; border-radius: 10px;
    top: 8px; z-index: -1;
}
.tab-item.active .tab-icon { filter: none; transform: translateY(-1px); }

/* ---------------- 子页弹层 / 顶栏 ---------------- */
.overlay { background: var(--dd-bg); background-image: none; }
.overlay-inner { display: block; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.sub-nav {
    background: #FFF6E8;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 2.5px solid var(--dd-border);
    margin: 0 -16px 4px;
}
.sub-nav__back { background: none; border: none; padding: 10px 4px 10px 0; margin: 0;
    font-family: inherit; color: var(--dd-brand-deep); font-size: 14px; cursor: pointer; }
.sub-nav__title {
    background: none; -webkit-background-clip: initial; background-clip: initial;
    -webkit-text-fill-color: var(--dd-ink); color: var(--dd-ink);
    filter: none; font-family: var(--dd-font); letter-spacing: 0;
    font-size: 17px; font-weight: 600;
}

/* ---------------- 布局容器 ----------------
   主视区自然满宽 + 纵向滚动（停用等比缩放：缩放会把内容列横向收窄，
   与底部 Tab 栏错位）；底部多让 18px = 悬浮 Tab 抬高 10 + 8 间距，
   滚到最后一张卡片也不会被 Tab 栏遮挡 */
.app-view {
    padding: 14px 16px 0;
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 50px - var(--tabbar-h) - 18px);
    height: calc(100dvh - 50px - var(--tabbar-h) - 18px);
    height: calc(var(--app-vh, 100dvh) - 50px - var(--tabbar-h) - 18px);
}
.dd-scroll { padding: 4px 0 24px; }

/* 卡片公共语言：白贴纸卡 + 2.5 墨描边 + 4 硬阴影 + 16 圆角 + 16 下距 */
.dd-card, .dd-stats, .dd-goal, .dd-memory, .dd-wall, .dd-sharebox, .dd-room,
.dd-list, .dd-calendar, .dd-badge, .dd-mine__user, .dd-chapter, .dd-notice {
    background: var(--dd-card);
    border: 2.5px solid var(--dd-border);
    border-radius: var(--dd-r-card);
    box-shadow: var(--dd-sh-cta);
    margin-bottom: 16px;
}
.dd-card { padding: 16px; }

/* 区块头：17/600 + 品牌短杠；右侧链接 13px 品牌色 */
.dd-sec-title {
    font-size: 17px; font-weight: 600; color: var(--dd-ink);
    margin: 24px 0 12px; display: flex; align-items: center; gap: 8px;
    line-height: 1.4;
}
.dd-sec-title::before {
    content: ""; width: 4px; height: 15px; border-radius: 2px; flex: none;
    background: var(--dd-brand);
}
.dd-sec-title .dd-link { margin-left: auto; font-size: 13px; font-weight: 400;
    color: var(--dd-brand-deep); background: none; border: none; padding: 0;
    font-family: inherit; cursor: pointer; }
.dd-muted { color: var(--dd-ink2); }
.dd-faint { color: var(--dd-ink3); }

/* ---------------- 按钮 ---------------- */
.dd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 2px solid var(--dd-border); border-radius: 12px; padding: 13px 18px;
    font-size: 15px; font-weight: 700; color: var(--dd-ink);
    background: var(--dd-brand);
    box-shadow: var(--dd-sh-card);
    transition: transform .12s ease, box-shadow .12s ease;
}
.dd-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dd-border); }
.dd-btn svg { width: 18px; height: 18px; flex: none; }
.dd-btn--block { width: 100%; }
.dd-btn--sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; box-shadow: none; }
.dd-btn--sm svg { width: 15px; height: 15px; }
.dd-btn--ghost {
    background: #fff; color: var(--dd-ink);
    box-shadow: none;
}
/* 主 CTA（首页「开始专注计时」）：全宽 52 高贴纸大按钮（2.5 描边 + 4 硬阴影 + 下陷） */
.dd-btn--cta {
    height: 52px; padding: 0 18px; border-radius: 14px; border-width: 2.5px;
    font-size: 16px; font-weight: 700; box-shadow: var(--dd-sh-cta);
}
.dd-btn--cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--dd-border); }
.dd-btn--cta svg { width: 20px; height: 20px; }
/* 历史类名 dd-btn--green 仍被逻辑层引用（计时器/目标卡等），
   视觉统一并入品牌橙，绿色不再承担主按钮 */
.dd-btn--green { background: var(--dd-brand); box-shadow: var(--dd-sh-card); }
/* 计时中「暂停」态：墨色平面 */
.dd-btn--dark { background: var(--dd-ink); color: #FFF7EF; box-shadow: var(--dd-sh-card); }
.dd-btn:disabled { opacity: .5; box-shadow: none; }

/* ---------------- 首页 Hero：品牌橙贴纸大卡 ---------------- */
.dd-hero {
    border-radius: var(--dd-r-hero); padding: 20px; color: var(--dd-ink);
    background: var(--dd-brand);
    border: 2.5px solid var(--dd-border);
    box-shadow: var(--dd-sh-cta);
    position: relative; overflow: hidden; margin-bottom: 16px;
}
.dd-hero__deco { position: absolute; right: -34px; top: -38px; width: 150px; height: 150px;
    border-radius: 50%; background: rgba(255, 255, 255, .12); }
.dd-hero__deco2 { position: absolute; right: 36px; bottom: -54px; width: 96px; height: 96px;
    border-radius: 50%; background: rgba(255, 255, 255, .09); }
.dd-hero__row { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.dd-hero__txt { flex: 1; min-width: 0; }
.dd-hero__greet { font-size: 13px; color: #472508; position: relative; }
.dd-hero__title { font-size: 22px; font-weight: 700; margin: 6px 0 0; position: relative;
    color: var(--dd-ink); }
.dd-hero__sub { font-size: 13px; color: #472508; margin: 10px 0 0;
    position: relative; line-height: 1.5; }
/* 「聊聊」：黄贴纸胶囊 + 墨描边 */
.dd-hero__cta {
    background: var(--dd-yellow); border: 2px solid var(--dd-border);
    color: var(--dd-ink); border-radius: var(--dd-r-pill); padding: 7px 13px;
    font-size: 13px; font-weight: 500; flex: none;
    display: inline-flex; gap: 5px; align-items: center; position: relative;
    transition: transform .1s ease, background .15s ease;
}
.dd-hero__cta:active { transform: translate(1px, 1px); }
.dd-hero__cta svg { width: 16px; height: 16px; }

/* ---------------- 统计卡：白卡三等分 ---------------- */
.dd-stats { display: flex; padding: 16px 6px; }
.dd-stat { flex: 1; text-align: center; position: relative; }
.dd-stat + .dd-stat::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%;
    width: 1px; background: var(--dd-line); }
.dd-stat__num { font-size: 26px; font-weight: 700; color: var(--dd-ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1.2; }
.dd-stat__label { font-size: 12px; color: var(--dd-ink3); margin-top: 4px; }

/* ---------------- 计时器 ---------------- */
.dd-timer { text-align: center; padding: 20px 16px 12px; }
.dd-timer__ring { position: relative; width: 208px; height: 208px; margin: 0 auto 16px; }
.dd-timer__ring svg { transform: rotate(-90deg); }
.dd-timer__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dd-timer__time { font-size: 40px; font-weight: 700; color: var(--dd-ink); font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; }
.dd-timer__state { font-size: 13px; color: var(--dd-ink2); margin-top: 8px; }
.dd-timer__btns { display: flex; gap: 10px; justify-content: center; }
.dd-timer__btns .dd-btn { min-width: 108px; }

/* ---------------- 目标 ---------------- */
.dd-goal { padding: 14px 16px; }
.dd-goal__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.dd-goal__name { font-size: 15px; font-weight: 600; color: var(--dd-ink); }
.dd-goal__meta { font-size: 12px; color: var(--dd-ink3); font-variant-numeric: tabular-nums; }
/* 进度条：8 高、浅橙轨道、品牌橙平涂填充 */
.dd-progress { height: 8px; background: var(--dd-brand-soft); border-radius: var(--dd-r-pill); overflow: hidden; }
.dd-progress__bar { height: 100%; background: var(--dd-brand-deep);
    border-radius: var(--dd-r-pill); transition: width .3s; }

/* ---------------- AI 对话 ---------------- */
/* 对话页占满弹层剩余高度：消息区内部滚动、输入栏常驻底部可见。
   高度用实测视口 --app-vh，规避移动端 100vh 在地址栏收放时的错位。 */
.dd-chat { display: flex; flex-direction: column;
    height: calc(var(--app-vh, 100vh) - 110px); min-height: 320px; }
.dd-chat__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.dd-bubble { max-width: 82%; padding: 11px 14px; border-radius: var(--dd-r-card);
    font-size: 14px; line-height: 1.6; word-break: break-word; }
.dd-bubble--ai { align-self: flex-start; background: #fff; color: var(--dd-ink);
    border: 2px solid var(--dd-border); border-bottom-left-radius: 5px; box-shadow: none; }
.dd-bubble--user { align-self: flex-end; background: var(--dd-brand);
    border: 2px solid var(--dd-border);
    color: var(--dd-ink); border-bottom-right-radius: 5px; }
.dd-bubble__mood { font-size: 12px; color: var(--dd-ink3); margin-top: 5px; }
.dd-typing { color: var(--dd-ink3); }
.dd-chat__inputbar { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center;
    padding: 9px 0 calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(250, 243, 236, 0), var(--dd-bg) 28%); }
.dd-chat__input { flex: 1; background: #fff; border: 2px solid var(--dd-border); border-radius: var(--dd-r-pill);
    padding: 10px 16px; font-size: 16px; }
.dd-chat__send { width: 44px; height: 44px; border-radius: 14px; border: 2px solid var(--dd-border);
    background: var(--dd-brand); box-shadow: var(--dd-sh-card);
    color: var(--dd-ink); display: grid; place-items: center; flex: none; }
.dd-chat__send:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--dd-border); }
.dd-chat__send svg { width: 20px; height: 20px; }
.dd-chat__send:disabled { opacity: .5; box-shadow: none; }
.dd-chat__tip { font-size: 12px; color: var(--dd-ink3); text-align: center; padding: 4px 0 2px; }

/* 输入聚焦：统一的全站焦点语言 */
.dd-input:focus, .dd-chat__input:focus, .dd-sharebox textarea:focus {
    outline: none; border-color: var(--dd-brand);
    box-shadow: 0 0 0 3px rgba(255, 107, 26, .16);
}

/* ---------------- 小本子记忆 ---------------- */
.dd-memory { padding: 13px 16px; }
.dd-memory__top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.dd-memory__cat { font-size: 12px; background: var(--dd-brand-soft); color: var(--dd-brand-deep);
    padding: 3px 9px; border-radius: var(--dd-r-pill); font-weight: 600; }
.dd-memory__date { font-size: 12px; color: var(--dd-ink3); margin-left: auto; }
.dd-memory__content { font-size: 14px; color: var(--dd-ink); line-height: 1.6; }
.dd-memory__stars { color: var(--dd-brand-deep); font-size: 12px; letter-spacing: 1px; }
.dd-memory__foot { display: flex; gap: 8px; margin-top: 10px; align-items: center; }

/* ---------------- 打卡墙 ---------------- */
.dd-wall { padding: 14px 16px; }
.dd-wall__top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.dd-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--dd-brand-soft);
    color: var(--dd-brand-deep); display: grid; place-items: center; font-weight: 700; flex: none;
    overflow: hidden; font-size: 15px; }
.dd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dd-avatar--lg { width: 64px; height: 64px; font-size: 24px; }
.dd-wall__name { font-size: 14px; font-weight: 600; color: var(--dd-ink); }
.dd-wall__day { font-size: 12px; color: var(--dd-ink3); margin-top: 1px; }
.dd-wall__content { font-size: 14px; line-height: 1.65; margin-bottom: 10px; color: var(--dd-ink); }
.dd-wall__foot { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--dd-line); padding-top: 10px; }
.dd-vote { display: inline-flex; gap: 5px; align-items: center; font-size: 12px;
    color: var(--dd-ink3); background: none; border: none; padding: 2px 0; }
.dd-vote svg { width: 18px; height: 18px; }
.dd-vote.on { color: var(--dd-brand-deep); }
.dd-vote--down.on { color: var(--dd-ink2); }
.dd-wall__more { margin-left: auto; color: var(--dd-ink3); font-size: 17px;
    font-weight: 700; line-height: 1; padding: 0 2px; }
.dd-wall__minutes { font-size: 12px; color: var(--dd-green-deep); font-weight: 600; margin-left: auto;
    font-variant-numeric: tabular-nums; }
.dd-wall__foot .dd-wall__minutes { margin-left: auto; }
.dd-wall__foot .dd-vote:not(.dd-wall__more) + .dd-wall__minutes { margin-left: auto; }
.dd-wallmore { text-align: center; padding: 6px 0 14px; }

/* 发帖框 */
.dd-sharebox { padding: 14px 16px; }
.dd-sharebox textarea { width: 100%; border: none; font-size: 16px; resize: none;
    min-height: 56px; background: none; line-height: 1.6; }
.dd-sharebox textarea:focus { box-shadow: none; }
.dd-sharebox__foot { display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--dd-line); padding-top: 10px; }
.dd-counter { font-size: 12px; color: var(--dd-ink3); font-variant-numeric: tabular-nums; }

/* ---------------- 自习室 ---------------- */
.dd-room { padding: 14px 16px; border: 2.5px solid var(--dd-border); display: block; font-family: inherit; }
.dd-room__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.dd-room__name { font-size: 15px; font-weight: 600; color: var(--dd-ink); }
.dd-room__code { font-size: 12px; color: var(--dd-brand-ink); background: var(--dd-brand-soft);
    padding: 4px 11px; border: none;
    border-radius: 8px; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }
.dd-member { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dd-line); }
.dd-member:last-child { border-bottom: none; }
.dd-member__info { flex: 1; }
.dd-member__name { font-size: 14px; font-weight: 600; color: var(--dd-ink); }
.dd-member__role { font-size: 12px; color: var(--dd-brand-deep); margin-left: 6px; }
.dd-member__min { font-size: 12px; color: var(--dd-green-deep); font-weight: 600;
    font-variant-numeric: tabular-nums; }

/* ---------------- 列表 / 设置 ----------------
   一张白卡承载整组：行高 54，左侧 28px 图标座（r8 + 16px 品牌图标），
   行间 1px 分割线（左缩进 56px 对齐标题） */
.dd-list { overflow: hidden; }
.dd-list__row { display: flex; align-items: center; gap: 12px; padding: 0 16px; width: 100%;
    min-height: 54px; background: none; border: none; text-align: left; position: relative;
    font-size: 15px; color: var(--dd-ink);
    transition: background .12s ease; }
.dd-list__row:active { background: #FDF7F0; }
.dd-list__row:not(:last-child)::after {
    content: ""; position: absolute; left: 56px; right: 0; bottom: 0; height: 1px;
    background: var(--dd-line);
}
.dd-list__ico { width: 28px; height: 28px; border-radius: 9px; background: var(--dd-brand-soft);
    color: var(--dd-brand-deep); flex: none; display: grid; place-items: center; }
.dd-list__ico svg { width: 16px; height: 16px; }
.dd-list__label { flex: 1; font-size: 15px; }
.dd-list__val { font-size: 13px; color: var(--dd-ink3); }
.dd-list__arrow { color: var(--dd-ink3); display: grid; }
.dd-list__arrow svg { width: 14px; height: 14px; }

/* ---------------- 表单 ---------------- */
.dd-field { margin-bottom: 16px; }
.dd-field__label { font-size: 13px; color: var(--dd-ink2); margin-bottom: 7px; display: block; }
.dd-input { width: 100%; background: #fff; border: 1px solid var(--dd-line); border-radius: var(--dd-r-ico);
    padding: 12px 14px; font-size: 16px; color: var(--dd-ink);
    transition: border-color .15s ease, box-shadow .15s ease; }
textarea.dd-input { min-height: 88px; resize: vertical; line-height: 1.6; }
.dd-seg { display: flex; background: #FFF3E0; border: 2px solid var(--dd-border); border-radius: 12px; padding: 3px; }
.dd-seg__item { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; font-size: 13px;
    color: var(--dd-ink2); border: none; background: none; }
.dd-seg__item.on { background: var(--dd-yellow); color: var(--dd-ink); font-weight: 700;
    box-shadow: none; }
.dd-toggle { width: 46px; height: 28px; border-radius: var(--dd-r-pill); background: #E8D5BC; position: relative;
    border: 2px solid var(--dd-border); transition: background .2s; flex: none; }
.dd-toggle.on { background: var(--dd-mint); }
.dd-toggle__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 1.5px solid var(--dd-border); transition: transform .2s; box-shadow: none; }
.dd-toggle.on .dd-toggle__knob { transform: translateX(18px); }

/* ---------------- 日历 ---------------- */
.dd-calendar { padding: 14px 16px; }
.dd-calendar__nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dd-calendar__nav button { background: var(--dd-brand-soft); border: none; border-radius: 10px;
    width: 34px; height: 32px; color: var(--dd-brand-deep); display: grid; place-items: center; }
.dd-calendar__nav button svg { width: 16px; height: 16px; }
.dd-calendar__month { font-size: 15px; font-weight: 600; color: var(--dd-ink); }
.dd-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dd-calendar__head { text-align: center; font-size: 12px; color: var(--dd-ink3); padding: 4px 0; }
.dd-calendar__cell { aspect-ratio: 1; display: grid; place-items: center; font-size: 13px;
    border-radius: 10px; color: var(--dd-ink); border: none; background: none; }
.dd-calendar__cell.done { background: var(--dd-brand-soft); color: var(--dd-brand-ink); font-weight: 600; }
.dd-calendar__cell.today { box-shadow: inset 0 0 0 2px var(--dd-border); }
.dd-calendar__cell.empty { visibility: hidden; }
/* 日历点开某天后的记录行 */
.dd-day-item { display: flex; align-items: baseline; gap: 12px; padding: 10px 2px;
    border-bottom: 1px solid var(--dd-line); }
.dd-day-item:last-child { border-bottom: none; }
.dd-day-item__min { font-size: 13px; color: var(--dd-green-deep); font-weight: 600; flex: none;
    font-variant-numeric: tabular-nums; }
.dd-day-item__note { font-size: 14px; color: var(--dd-ink); flex: 1; line-height: 1.5; }

/* ---------------- 成就徽章（插画勋章） ---------------- */
/* 4 列 × 3 排 = 11 枚，末排 3 枚居中 */
.dd-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dd-badge { padding: 10px 4px 11px; text-align: center; margin-bottom: 0; }
.dd-badge__ico { width: 46px; height: 46px; margin: 0 auto 5px; }
.dd-badge__ico img { width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 2px 4px rgba(180, 90, 20, .28)); }
.dd-badge__name { font-size: 11px; font-weight: 600; color: var(--dd-ink); }
.dd-badge__desc { font-size: 11px; color: var(--dd-ink3); margin-top: 2px; line-height: 1.35; }
.dd-badge--lock .dd-badge__ico img, .dd-badge.locked .dd-badge__ico img {
    filter: grayscale(1) opacity(.45); }
.dd-badge--lock .dd-badge__name, .dd-badge.locked .dd-badge__name { color: var(--dd-ink3); }
/* 宽屏放大勋章，仍保持 4 列三排 */
@media (min-width: 560px) {
    .dd-badges { gap: 12px; }
    .dd-badge { padding: 12px 8px 13px; }
    .dd-badge__ico { width: 60px; height: 60px; margin-bottom: 6px; }
    .dd-badge__name { font-size: 12px; }
}

/* ---------------- 报告渲染 ---------------- */
.dd-report__title { font-size: 20px; font-weight: 700; margin: 6px 0 5px; color: var(--dd-ink); }
.dd-report__meta { font-size: 12px; color: var(--dd-ink3); margin-bottom: 16px; font-variant-numeric: tabular-nums;
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* 报告封面段：引言式排版，一上来就有"读物感" */
.dd-report__cover {
    font-size: 15px; line-height: 1.8; color: var(--dd-ink);
    background: #FFF6E3; border-left: 4px solid var(--dd-brand);
    border-radius: var(--dd-r-ico); padding: 13px 14px; margin-bottom: 12px;
}
.dd-chapter { padding: 16px; }
.dd-chapter__title { font-size: 15px; font-weight: 600; margin-bottom: 10px; display: flex; gap: 8px;
    align-items: center; color: var(--dd-ink); }
.dd-chapter__title svg { width: 17px; height: 17px; color: var(--dd-brand); }
.dd-chapter__body { font-size: 14px; line-height: 1.72; color: var(--dd-ink); }
.dd-chapter__body p { margin-bottom: 9px; }
.dd-chapter__body ul { margin: 4px 0 9px; }
.dd-chapter__body li { position: relative; padding-left: 16px; margin-bottom: 7px; }
.dd-chapter__body li::before { content: "·"; position: absolute; left: 4px; color: var(--dd-brand); font-weight: 800; }
.dd-ailabel { font-size: 12px; color: var(--dd-ink3); display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--dd-line); padding: 3px 9px; border-radius: var(--dd-r-pill); }

/* ---------------- 标签 ---------------- */
.dd-tag { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: var(--dd-r-pill);
    background: #FFF3E0; color: var(--dd-ink2); }
.dd-tag--orange { background: var(--dd-brand-soft); color: var(--dd-brand-ink); }
.dd-tag--green { background: #DFF3EA; color: var(--dd-green-deep); }

/* ---------------- 空状态：紧凑（24 padding + 28px 图标 + 13 文案） ---------------- */
.dd-empty { text-align: center; padding: 24px 20px; color: var(--dd-ink3); }
.dd-empty__ico { width: 28px; height: 28px; margin: 0 auto 8px; color: var(--dd-ink3); }
.dd-empty__ico svg { width: 100%; height: 100%; display: block; }
.dd-empty__text { font-size: 13px; line-height: 1.6; }
.dd-empty .dd-btn { margin-top: 14px; }
/* 可点空态（首页「还没有目标，点此新建」）：虚线引导卡，整卡可点 */
button.dd-empty {
    display: block; width: 100%; background: #fff; border: 2px dashed #C98A52;
    border-radius: var(--dd-r-card); margin-bottom: 16px; font-family: inherit;
}

/* ---------------- 我的 ---------------- */
/* 资料卡：白卡 16 padding，头像 56 圆，名 17/600 + ID 12 */
.dd-mine__user { display: flex; align-items: center; gap: 14px; padding: 16px; }
.dd-mine__user .dd-avatar { width: 56px; height: 56px; font-size: 22px; }
.dd-mine__info { flex: 1; min-width: 0; }
.dd-mine__name { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px;
    color: var(--dd-ink); }
.dd-mine__id { font-size: 12px; color: var(--dd-ink3); margin-top: 3px; }
/* 「编辑」：30 高描边胶囊 */
.dd-mine__user .dd-btn--sm {
    height: 30px; padding: 0 14px; border-radius: var(--dd-r-pill); font-size: 13px;
    background: #fff; color: var(--dd-ink2); box-shadow: none;
    flex: none;
}
/* 会员 banner：品牌渐变（深棕已移除），皇冠放 36px 白 20% 圆座 */
.dd-vipbanner { background: var(--dd-yellow); border: 2.5px solid var(--dd-border); border-radius: var(--dd-r-card);
    padding: 16px 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
    box-shadow: var(--dd-sh-cta); }
.dd-vipbanner__ico { width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: #fff; border: 2px solid var(--dd-border); display: grid; place-items: center; color: var(--dd-ink); }
.dd-vipbanner__ico svg { width: 20px; height: 20px; }
.dd-vipbanner > svg { width: 30px; height: 30px; flex: none; color: var(--dd-ink); }
.dd-vipbanner__info { flex: 1; min-width: 0; }
.dd-vipbanner__title { font-size: 16px; font-weight: 600; color: var(--dd-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-vipbanner__sub { font-size: 12px; color: var(--dd-ink); opacity: .78; margin-top: 3px; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 「开通」：白底胶囊 + 品牌色字 */
.dd-vipbanner .dd-btn--sm {
    height: 30px; padding: 0 16px; border-radius: var(--dd-r-pill);
    background: #fff; color: var(--dd-ink); font-size: 13px; font-weight: 600;
    box-shadow: none; flex: none;
}

/* 会员套餐选择 */
.dd-vip-plans { display: flex; gap: 10px; }
.dd-vip-plan { flex: 1; background: #fff; border-radius: 12px; padding: 13px 8px;
    text-align: center; border: 2px solid var(--dd-border); transition: box-shadow .15s ease; }
.dd-vip-plan.on { background: #FFF6E3;
    box-shadow: var(--dd-sh-card); }
.dd-vip-plan__name { font-size: 13px; color: var(--dd-ink2); }
.dd-vip-plan__price { font-size: 20px; font-weight: 700; color: var(--dd-brand-deep); margin-top: 4px;
    font-variant-numeric: tabular-nums; letter-spacing: -.5px; }

/* 搭子性格卡（button 复位 + 卡片语言） */
.dd-persona { border: 2.5px solid var(--dd-border); text-align: left; width: 100%; display: flex;
    gap: 12px; align-items: center; padding: 12px 14px;
    font-family: inherit; color: var(--dd-ink); }
.dd-persona:active { transform: scale(.985); }
.dd-persona.on { box-shadow: 0 0 0 2px var(--dd-brand-deep), var(--dd-sh-cta); }
.dd-persona__ava { width: 54px; height: 54px; border-radius: 18px; object-fit: cover;
    flex: 0 0 54px; background: #FFF3E2; }
.dd-persona__body { flex: 1; min-width: 0; }
.dd-pbanner { height: 118px; border-radius: 18px; border: 2.5px solid var(--dd-border);
    background-size: cover; background-position: center; margin: 4px 2px 14px;
    position: relative; overflow: hidden; }
.dd-pbanner__label { position: absolute; left: 12px; bottom: 10px; display: flex;
    align-items: center; gap: 8px; background: rgba(255,255,255,.88);
    border-radius: 999px; padding: 5px 14px 5px 6px; font-weight: 700; font-size: 14px; }
.dd-pbanner__ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.dd-quiz-opt:active { transform: scale(.985); background: #FFF3E2; }

/* ---------------- 消息通知 ---------------- */
.dd-notice { display: flex; gap: 12px; padding: 13px 16px; width: 100%; text-align: left;
    border: 2.5px solid var(--dd-border); font-family: inherit; color: var(--dd-ink); }
.dd-notice:active { background: #FFF3E2; }
.dd-notice__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dd-brand); margin-top: 7px; flex: none; }
.dd-notice.read .dd-notice__dot { background: #D9C6A8; }
.dd-notice__title { font-size: 14px; font-weight: 600; color: var(--dd-ink); }
.dd-notice__body { font-size: 13px; color: var(--dd-ink2); margin-top: 3px; line-height: 1.5; }
.dd-notice__time { font-size: 12px; color: var(--dd-ink3); margin-top: 5px; }

/* ---------------- 海报 ---------------- */
.dd-poster-wrap { text-align: center; padding: 20px 0; }
#ddPosterCanvas, #ddInviteCanvas { max-width: 100%; border: 2.5px solid var(--dd-border); border-radius: var(--dd-r-card);
    box-shadow: var(--dd-sh-cta); }

/* ---------------- 首次引导 ---------------- */
.dd-onboard { padding: 26px 24px; text-align: center; min-height: calc(100vh - 90px);
    display: flex; flex-direction: column; justify-content: center; }
.dd-onboard__ico { width: 92px; height: 92px; margin: 0 auto 22px; color: var(--dd-brand-deep); }
.dd-onboard__ico svg { width: 100%; height: 100%; display: block; }
.dd-onboard__title { font-size: 22px; font-weight: 700; margin-bottom: 12px; color: var(--dd-ink); }
.dd-onboard__desc { font-size: 15px; color: var(--dd-ink2); line-height: 1.75; margin-bottom: 28px; }
.dd-onboard__feat { text-align: left; margin-bottom: 26px; }
.dd-onboard__feat-item { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px;
    font-size: 14px; line-height: 1.5; color: var(--dd-ink); }
.dd-onboard__feat-ico { width: 36px; height: 36px; border-radius: var(--dd-r-ico);
    background: var(--dd-brand-soft);
    color: var(--dd-brand-deep); display: grid; place-items: center; flex: none; }
.dd-onboard__feat-ico svg { width: 19px; height: 19px; }

/* ---------------- 协议法律页 ---------------- */
.dd-legal { font-size: 14px; line-height: 1.8; color: var(--dd-ink); }
.dd-legal h3 { font-size: 15px; margin: 20px 0 9px; color: var(--dd-ink); }
.dd-legal p { margin-bottom: 12px; color: var(--dd-ink2); }

/* ---------------- 模态 ---------------- */
.dd-modal-mask { position: fixed; inset: 0; z-index: 80; background: var(--bg-mask);
    display: flex; align-items: center; justify-content: center; padding: 28px; }
.dd-modal { background: #fff; border: 2.5px solid var(--dd-border); border-radius: var(--dd-r-hero); padding: 22px 20px; width: 100%;
    max-width: 340px; text-align: center; box-shadow: var(--dd-sh-cta); }
.dd-modal__title { font-size: 17px; font-weight: 600; margin-bottom: 9px; color: var(--dd-ink); }
.dd-modal__body { font-size: 14px; color: var(--dd-ink2); line-height: 1.65; margin-bottom: 20px; }
.dd-modal__body .dd-input { text-align: left; }
.dd-modal__btns { display: flex; gap: 10px; }
.dd-modal__btns .dd-btn { flex: 1; }

/* ---------------- 功能入口宫格 ----------------
   首页「为你准备」：3 等宽卡，40px 图标座 + 14/600 名称 + 11px 一句描述
   我的页 3×2：居中 40px 图标座 + 13/500 名称，高约 84 */
.dd-quick { display: flex; gap: 12px; }
.dd-quick__item { flex: 1; min-width: 0; background: #fff; border: 2.5px solid var(--dd-border);
    border-radius: var(--dd-r-card);
    padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    box-shadow: var(--dd-sh-card); transition: transform .1s ease; font-family: inherit; }
.dd-quick__item:active { transform: scale(.96); }
.dd-quick__ico { width: 40px; height: 40px; border-radius: var(--dd-r-ico);
    background: var(--dd-brand-soft);
    display: grid; place-items: center; color: var(--dd-brand-deep); }
.dd-quick__ico svg { width: 22px; height: 22px; }
.dd-quick__label { font-size: 13px; font-weight: 500; color: var(--dd-ink); }
/* 首页带描述变体 */
.dd-quick__item--desc { min-height: 92px; }
.dd-quick__item--desc .dd-quick__label { font-size: 14px; font-weight: 600; }
.dd-quick__desc { font-size: 12px; color: var(--dd-ink3); line-height: 1.35;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 我的页 3×2 宫格 */
.dd-quick--grid { flex-wrap: wrap; row-gap: 12px; margin-bottom: 12px; }
.dd-quick--grid .dd-quick__item { flex: 0 0 calc((100% - 24px) / 3); min-height: 84px;
    justify-content: center; }

/* ---------------- 首页节奏 ---------------- */
.dd-home .dd-hero { margin-bottom: 12px; }
.dd-home .dd-stats { margin-bottom: 12px; }
.dd-home .dd-btn--cta { margin-bottom: 0; }
.dd-home .dd-sec-title { margin: 24px 0 12px; }
.dd-home .dd-goal { margin-bottom: 12px; }

/* 小屏兜底：极矮屏（≤600px 可视高）再压一档留白 */
@media (max-height: 600px) {
    .dd-hero { padding: 16px; }
    .dd-hero__sub { display: none; }
    .dd-stats { padding: 12px 6px; }
    .dd-home .dd-sec-title { margin: 16px 0 8px; }
    .dd-quick__item { padding: 10px 8px; }
    .dd-quick__item--desc { min-height: 0; }
}

/* ============ 主屏密度档：fit-tight / fit-mini ============
   由 app.js Fit.fitMain 按实测高度自动挂载，实现「固定显示所有信息」：
   内容超高时对框内尺寸等比收紧——只缩内边距/间距/字号/图标，
   宽度恒为内容列满宽，不做 transform 缩放，左右边缘与底部 Tab 栏永远对齐。
   fit-tight ≈ 收 16%（轻度超高）；fit-mini ≈ 收 32%（重度超高/矮窗口）；
   仍超高（打卡墙等动态长列表）由 .app-view 滚动兜底，不裁切。 */

/* ---------- fit-tight：轻度收紧 ---------- */
.fit-tight .dd-scroll { padding: 2px 0 14px; }
/* 卡片下距 12→7 */
.fit-tight .dd-card, .fit-tight .dd-stats, .fit-tight .dd-goal, .fit-tight .dd-memory,
.fit-tight .dd-wall, .fit-tight .dd-sharebox, .fit-tight .dd-room, .fit-tight .dd-list,
.fit-tight .dd-calendar, .fit-tight .dd-badge, .fit-tight .dd-mine__user,
.fit-tight .dd-chapter, .fit-tight .dd-notice,
.fit-tight .dd-home .dd-hero, .fit-tight .dd-vipbanner,
.fit-tight .dd-quick--grid { margin-bottom: 7px; }
/* 卡片内边距收紧 */
.fit-tight .dd-card { padding: 11px 14px; }
.fit-tight .dd-goal, .fit-tight .dd-wall, .fit-tight .dd-sharebox,
.fit-tight .dd-room, .fit-tight .dd-calendar { padding: 10px 14px; }
.fit-tight .dd-memory, .fit-tight .dd-notice { padding: 9px 14px; }
/* 区块头 24/12→13/7 */
.fit-tight .dd-sec-title, .fit-tight .dd-home .dd-sec-title { margin: 13px 0 7px; font-size: 16px; }
/* 首页 Hero */
.fit-tight .dd-hero { padding: 13px 16px; }
.fit-tight .dd-hero__title { font-size: 19px; margin-top: 4px; }
.fit-tight .dd-hero__sub { margin-top: 6px; line-height: 1.45; }
/* 统计卡 */
.fit-tight .dd-stats { padding: 9px 6px; }
.fit-tight .dd-stat__num { font-size: 22px; }
.fit-tight .dd-stat__label { margin-top: 2px; }
/* 主 CTA 52→44 */
.fit-tight .dd-btn--cta { height: 44px; font-size: 15px; }
/* 空态 */
.fit-tight .dd-empty { padding: 13px 16px; }
.fit-tight .dd-empty__ico { width: 22px; height: 22px; margin-bottom: 5px; }
.fit-tight .dd-empty .dd-btn { margin-top: 9px; }
/* 宫格 */
.fit-tight .dd-quick { gap: 8px; }
.fit-tight .dd-quick__item { padding: 10px 6px 8px; gap: 4px; }
.fit-tight .dd-quick__item--desc { min-height: 0; }
.fit-tight .dd-quick__ico { width: 34px; height: 34px; }
.fit-tight .dd-quick__ico svg { width: 19px; height: 19px; }
.fit-tight .dd-quick--grid { row-gap: 8px; }
.fit-tight .dd-quick--grid .dd-quick__item { min-height: 68px; }
/* 我的页 */
.fit-tight .dd-mine__user { padding: 11px 14px; gap: 11px; }
.fit-tight .dd-mine__user .dd-avatar { width: 46px; height: 46px; font-size: 18px; }
.fit-tight .dd-mine__name { font-size: 16px; }
.fit-tight .dd-vipbanner { padding: 11px 14px; }
.fit-tight .dd-vipbanner__ico { width: 30px; height: 30px; }
.fit-tight .dd-vipbanner__ico svg { width: 17px; height: 17px; }
.fit-tight .dd-vipbanner__title { font-size: 15px; }
/* 列表行 54→44 */
.fit-tight .dd-list__row { min-height: 44px; gap: 10px; padding: 0 14px; }
.fit-tight .dd-list__row:not(:last-child)::after { left: 50px; }
.fit-tight .dd-list__ico { width: 25px; height: 25px; }
.fit-tight .dd-list__ico svg { width: 14px; height: 14px; }
/* 打卡墙 / 自习室 */
.fit-tight .dd-wall__top { margin-bottom: 7px; }
.fit-tight .dd-wall__content { margin-bottom: 7px; line-height: 1.55; }
.fit-tight .dd-wall__foot { padding-top: 7px; }
.fit-tight .dd-sharebox textarea { min-height: 42px; }
.fit-tight .dd-sharebox__foot { padding-top: 7px; }
.fit-tight .dd-avatar { width: 32px; height: 32px; font-size: 13px; }
.fit-tight .dd-member { padding: 7px 0; gap: 10px; }
.fit-tight .dd-room__top { margin-bottom: 5px; }
/* 计时环 208→176 */
.fit-tight .dd-timer { padding: 12px 16px 8px; }
.fit-tight .dd-timer__ring { width: 176px; height: 176px; margin-bottom: 10px; }
.fit-tight .dd-timer__time { font-size: 33px; }

/* ---------- fit-mini：重度收紧（矮窗口/小屏） ---------- */
.fit-mini .dd-scroll { padding: 0 0 8px; }
.fit-mini .dd-card, .fit-mini .dd-stats, .fit-mini .dd-goal, .fit-mini .dd-memory,
.fit-mini .dd-wall, .fit-mini .dd-sharebox, .fit-mini .dd-room, .fit-mini .dd-list,
.fit-mini .dd-calendar, .fit-mini .dd-badge, .fit-mini .dd-mine__user,
.fit-mini .dd-chapter, .fit-mini .dd-notice,
.fit-mini .dd-home .dd-hero, .fit-mini .dd-vipbanner,
.fit-mini .dd-quick--grid { margin-bottom: 5px; }
.fit-mini .dd-card { padding: 8px 12px; }
.fit-mini .dd-goal, .fit-mini .dd-wall, .fit-mini .dd-sharebox,
.fit-mini .dd-room, .fit-mini .dd-calendar { padding: 8px 12px; }
.fit-mini .dd-memory, .fit-mini .dd-notice { padding: 7px 12px; }
.fit-mini .dd-sec-title, .fit-mini .dd-home .dd-sec-title { margin: 9px 0 5px; font-size: 14px; }
.fit-mini .dd-sec-title::before { height: 12px; }
.fit-mini .dd-hero { padding: 10px 14px; }
.fit-mini .dd-hero__greet { font-size: 11px; }
.fit-mini .dd-hero__title { font-size: 16px; margin-top: 3px; }
.fit-mini .dd-hero__sub { font-size: 11px; margin-top: 4px; line-height: 1.4; }
.fit-mini .dd-hero__cta { padding: 6px 11px; font-size: 12px; }
.fit-mini .dd-stats { padding: 6px 4px; }
.fit-mini .dd-stat__num { font-size: 18px; }
.fit-mini .dd-stat__label { font-size: 11px; margin-top: 1px; }
.fit-mini .dd-btn--cta { height: 38px; font-size: 14px; border-radius: 12px; }
.fit-mini .dd-btn--cta svg { width: 17px; height: 17px; }
.fit-mini .dd-btn:not(.dd-btn--sm):not(.dd-btn--cta) { padding: 9px 13px; font-size: 13px; }
.fit-mini .dd-empty { padding: 9px 12px; }
.fit-mini .dd-empty__ico { width: 18px; height: 18px; margin-bottom: 4px; }
.fit-mini .dd-empty__text { font-size: 12px; }
.fit-mini .dd-empty .dd-btn { margin-top: 7px; }
.fit-mini .dd-quick { gap: 6px; }
.fit-mini .dd-quick__item { padding: 7px 4px 6px; gap: 3px; border-radius: 12px; }
.fit-mini .dd-quick__item--desc { min-height: 0; }
.fit-mini .dd-quick__ico { width: 28px; height: 28px; border-radius: 8px; }
.fit-mini .dd-quick__ico svg { width: 16px; height: 16px; }
.fit-mini .dd-quick__label { font-size: 12px; }
.fit-mini .dd-quick__desc { font-size: 11px; }
.fit-mini .dd-quick--grid { row-gap: 6px; }
.fit-mini .dd-quick--grid .dd-quick__item { min-height: 54px; }
.fit-mini .dd-mine__user { padding: 9px 12px; gap: 9px; }
.fit-mini .dd-mine__user .dd-avatar { width: 38px; height: 38px; font-size: 15px; }
.fit-mini .dd-mine__name { font-size: 14px; }
.fit-mini .dd-mine__id { font-size: 11px; margin-top: 1px; }
.fit-mini .dd-vipbanner { padding: 8px 12px; gap: 9px; }
.fit-mini .dd-vipbanner__ico { width: 25px; height: 25px; }
.fit-mini .dd-vipbanner__ico svg { width: 14px; height: 14px; }
.fit-mini .dd-vipbanner__title { font-size: 13px; }
.fit-mini .dd-vipbanner__sub { font-size: 11px; margin-top: 1px; }
.fit-mini .dd-list__row { min-height: 37px; gap: 9px; padding: 0 12px; }
.fit-mini .dd-list__row:not(:last-child)::after { left: 44px; }
.fit-mini .dd-list__ico { width: 22px; height: 22px; border-radius: 6px; }
.fit-mini .dd-list__ico svg { width: 13px; height: 13px; }
.fit-mini .dd-list__label { font-size: 13px; }
.fit-mini .dd-wall__top { margin-bottom: 5px; gap: 8px; }
.fit-mini .dd-wall__content { margin-bottom: 5px; line-height: 1.45; font-size: 13px; }
.fit-mini .dd-wall__foot { padding-top: 5px; }
.fit-mini .dd-sharebox textarea { min-height: 32px; font-size: 13px; }
.fit-mini .dd-sharebox__foot { padding-top: 5px; }
.fit-mini .dd-avatar { width: 27px; height: 27px; font-size: 11px; }
.fit-mini .dd-member { padding: 5px 0; gap: 8px; }
.fit-mini .dd-member__name, .fit-mini .dd-wall__name { font-size: 13px; }
.fit-mini .dd-room__top { margin-bottom: 4px; }
.fit-mini .dd-room__name { font-size: 14px; }
.fit-mini .dd-timer { padding: 8px 16px 6px; }
.fit-mini .dd-timer__ring { width: 140px; height: 140px; margin-bottom: 8px; }
.fit-mini .dd-timer__time { font-size: 26px; }
.fit-mini .dd-timer__state { font-size: 12px; margin-top: 5px; }
.fit-mini .dd-timer__btns .dd-btn { min-width: 92px; }
.fit-mini .dd-badges { gap: 8px; }
.fit-mini .dd-badge { padding: 10px 6px; }
.fit-mini .dd-badge__ico { width: 34px; height: 34px; margin-bottom: 5px; }

/* ---------------- 键盘焦点可见 ----------------
   theme.css 对 button/input 等做了全局 outline:none；pages.css 的 :focus-visible
   补救清单只覆盖 bazi 共享类。此处补齐 dudu 全部可交互件（含改造成 button 的
   tab/返回/全部链接），键盘 Tab 时一律显示 2px 深橙描边。 */
.dd-btn:focus-visible, .dd-quick__item:focus-visible, .dd-list__row:focus-visible,
.dd-hero__cta:focus-visible, .tab-item:focus-visible, .dd-link:focus-visible,
.sub-nav__back:focus-visible, .dd-toggle:focus-visible, .dd-seg__item:focus-visible,
.dd-vote:focus-visible, .dd-calendar__nav button:focus-visible,
.dd-calendar__cell:focus-visible, .dd-notice:focus-visible, .dd-persona:focus-visible,
button.dd-empty:focus-visible, .dd-input:focus-visible, .dd-chat__input:focus-visible,
.dd-sharebox textarea:focus-visible, .dd-chat__send:focus-visible,
.dd-wall__more:focus-visible {
    outline: 2px solid var(--dd-brand-deep);
    outline-offset: 2px;
}

/* ---------------- 宽视口适配（≥640px）：列宽同轴 + 垂直舒展 ----------------
   桌面/横屏下内容列封顶 608px，与 Tab 栏同轴居中，行不再拉长；
   高视口按 app-view 可用高实算两档舒展（620+ 轻 / 860+ 深），
   消除「内容堆上部、底部大片留白」的失衡。手机端（<640px）零影响；
   内容若仍超高由 fit-tight/fit-mini 收紧（选择器优先级更高）。 */
@media (min-width: 640px) {
    .app-view { padding-left: calc(50% - 304px); padding-right: calc(50% - 304px); }
    .overlay-inner { max-width: 608px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 640px) and (min-height: 620px) {
    .dd-hero { padding: 24px 22px; }
    .dd-hero__sub { margin-top: 12px; }
    .dd-stats { padding: 20px 6px; }
    .dd-home .dd-btn--cta { height: 54px; }
    .dd-home .dd-sec-title { margin: 26px 0 14px; }
    button.dd-empty { padding: 32px 20px; }
    .dd-quick__item { padding: 16px 8px 14px; }
    .dd-quick__item--desc { min-height: 100px; }
}
@media (min-width: 640px) and (min-height: 860px) {
    .dd-hero { padding: 30px 24px; }
    .dd-hero__title { font-size: 26px; }
    .dd-hero__sub { margin-top: 14px; }
    .dd-stats { padding: 26px 6px; }
    .dd-stat__num { font-size: 30px; }
    .dd-home .dd-btn--cta { height: 58px; }
    .dd-home .dd-sec-title { margin: 30px 0 16px; }
    button.dd-empty { padding: 40px 20px; }
    .dd-quick__item { padding: 20px 8px 18px; }
    .dd-quick__item--desc { min-height: 112px; }
}

/* ---------------- 动效降级 ----------------
   尊重系统「减弱动态效果」：主题层已覆盖星空/流星（theme.css），此处兜底
   dudu 与共享层的一切动画/过渡（含顶栏装饰），关闭时长动效。 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}