/* ============================================================
   网页端专用覆盖层（web/home-redesign.css）
   只由网页端 web/index.html 引入；app 端（public/ 打包）不加载本文件。
   1) 默认皮肤（frost）的配色令牌改为开场页风格（纸白 / 墨黑）
   2) 首页按示例 HTML 的结构重排：问候标题、衬线引语、签到大卡、新词/复习、活动条、词书进度
   不改动任何 JS 绑定的 id / class。
   ============================================================ */

/* ---------- 1. 默认皮肤配色 ---------- */
:root {
  --bg: #f3efe6;
  --ambient:
    radial-gradient(52rem 30rem at 88% -8%, rgba(61, 122, 104, .10), transparent 62%),
    radial-gradient(40rem 26rem at -14% 24%, rgba(200, 121, 63, .07), transparent 60%),
    radial-gradient(46rem 30rem at 50% 118%, rgba(168, 203, 189, .12), transparent 62%);
  --card: rgba(255, 252, 245, .72);
  --card-solid: #fbf8f1;
  --card-line: rgba(255, 255, 255, .6);
  --ink: #0d110f;
  --ink-body: #2c332f;
  --ink2: #5d6660;
  --ink3: #b7b3a8;
  --brand: #3d7a68;
  --brand-soft: rgba(61, 122, 104, .12);
  --green: #3d7a68;  --green-soft: rgba(61, 122, 104, .12);
  --amber: #c8793f;  --amber-soft: rgba(200, 121, 63, .12);
  --red: #c0504d;    --red-soft: rgba(192, 80, 77, .11);
  --violet: #6b5b95; --violet-soft: rgba(107, 91, 149, .10);
  --soft: rgba(13, 17, 15, .045);
  --soft2: rgba(13, 17, 15, .08);
  --toast-bg: rgba(13, 17, 15, .92);
  --tabbar-bg: rgba(243, 239, 230, .86);
  --topbar-bg: rgba(243, 239, 230, .8);
  --line: rgba(13, 17, 15, .10);
  --boot-rule: #b7b3a8;
  --boot-dot: #7d7a72;
  --font-disp: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
  --btn-sh: 0 4px 12px -6px rgba(61, 122, 104, .34);
  --btn-sh-hover: 0 6px 16px -6px rgba(61, 122, 104, .40);
}
:root[data-theme="dark"] {
  --bg: #0d110f;
  --ambient:
    radial-gradient(52rem 30rem at 88% -8%, rgba(168, 203, 189, .08), transparent 62%),
    radial-gradient(40rem 26rem at -14% 24%, rgba(61, 122, 104, .12), transparent 60%),
    radial-gradient(46rem 30rem at 50% 118%, rgba(227, 162, 122, .06), transparent 62%);
  --card: rgba(255, 255, 255, .035);
  --card-solid: #141a17;
  --card-line: rgba(243, 239, 230, .10);
  --ink: #f3efe6;
  --ink-body: #d7d3c9;
  --ink2: #b9b5aa;
  --ink3: #5b5f59;
  --brand: #a8cbbd;
  --brand-soft: rgba(168, 203, 189, .14);
  --green: #a8cbbd;  --green-soft: rgba(168, 203, 189, .14);
  --amber: #e3a27a;  --amber-soft: rgba(227, 162, 122, .14);
  --red: #e8786f;    --red-soft: rgba(232, 120, 111, .14);
  --violet: #c4b5e6; --violet-soft: rgba(196, 181, 230, .14);
  --note-bg: rgba(227, 162, 122, .10);
  --note-border: rgba(227, 162, 122, .35);
  --note-ink: #e3a27a;
  --soft: rgba(255, 255, 255, .05);
  --soft2: rgba(255, 255, 255, .10);
  --toast-bg: rgba(40, 46, 42, .96);
  --tabbar-bg: rgba(13, 17, 15, .82);
  --topbar-bg: rgba(13, 17, 15, .76);
  --line: rgba(243, 239, 230, .09);
  --boot-rule: #3f4a44;
  --boot-dot: #7d7a72;
}

/* ---------- 2. 首页外壳：极光背景 + 居中宽栏 ---------- */
#view-home.web-home { position: relative; }
#view-home.web-home::before {
  content: ""; position: absolute; inset: -10% -5% auto -5%; height: 70vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 40vmax at 15% 20%, rgba(61,122,104,.22), transparent 62%),
    radial-gradient(34vmax 34vmax at 85% 30%, rgba(227,162,122,.14), transparent 62%);
  filter: blur(10px);
}
#view-home #homeMain.hm {
  max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px;
}

/* ---------- 3. 问候 / 引语 ---------- */
#view-home .hm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-top: 6px; }
#view-home .hm-head .kicker { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 14px; }
#view-home .hm-head .kicker::before { content: ""; width: 34px; height: 1px; background: var(--brand); }
#view-home .greet {
  font-family: var(--font-disp); font-weight: 500; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(34px, 4.6vw, 56px); color: var(--ink); margin-top: 12px;
}
#view-home .hm-date { font-size: 13px; letter-spacing: .2em; color: var(--ink2); }
#view-home .dq { padding: 0 2px; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
#view-home .dq-en { font-family: var(--font-disp); font-style: italic; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: var(--ink); }
#view-home .dq-by { display: block; margin-top: 6px; font-style: normal; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); }
#view-home .dq-zh { margin-top: 6px; font-size: 14px; color: var(--ink2); }

/* ---------- 4. 签到大卡（深墨绿） + 新词/复习 ---------- */
#view-home .hm-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; align-items: stretch; }
#view-home .checkin-hero {
  position: relative; overflow: hidden; min-height: 300px;
  background: linear-gradient(160deg, #1f3a33, #14201c);
  border: 1px solid rgba(168, 203, 189, .18); border-radius: var(--r-card); color: #f3efe6;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 30px 32px 26px; display: flex; flex-direction: column; gap: 6px;
}
#view-home .checkin-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at 85% 0%, rgba(227,162,122,.14), transparent 55%);
}
#view-home .checkin-hero > * { position: relative; }
#view-home .checkin-hero .ci-date { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #a8cbbd; }
#view-home .checkin-hero .ci-big { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
#view-home .checkin-hero .ci-big b { font-family: var(--font-disp); font-weight: 500; font-size: clamp(72px, 9vw, 104px); line-height: .95; letter-spacing: -.03em; color: #f3efe6; }
#view-home .checkin-hero .ci-big i { font-style: normal; font-size: 15px; color: #b9b5aa; letter-spacing: .06em; }
#view-home .checkin-hero .ci-btn {
  align-self: flex-start; margin-top: 18px; background: #f3efe6; color: #0d110f; border: 0;
  border-radius: 999px; padding: 13px 34px; font-size: 15px; letter-spacing: .04em; box-shadow: none;
}
#view-home .checkin-hero .ci-btn:hover { box-shadow: 0 14px 40px -10px rgba(168,203,189,.45); }
#view-home .checkin-hero .ci-hint { margin-top: 10px; font-size: 13px; color: #b9b5aa; }
#view-home .checkin-hero .ci-days { margin-top: auto; padding-top: 18px; }

#view-home .hm-side { display: flex; flex-direction: column; gap: 14px; }
#view-home .hm-side .task-btn {
  flex: 1; min-height: 0; border-radius: var(--r-card); border: 1px solid var(--card-line);
  background: var(--card); box-shadow: var(--shadow); padding: 22px 26px; text-align: left;
  transition: border-color .6s var(--ease-out), transform .8s var(--ease-out), box-shadow .8s var(--ease-out);
}
#view-home .hm-side .task-btn:hover { border-color: color-mix(in srgb, var(--brand) 40%, transparent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
#view-home .hm-side .tb-count { font-family: var(--font-disp); font-weight: 500; font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
#view-home .hm-side .tb-label { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }
#view-home .hm-side .tb-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ink2); }

/* ---------- 5. 底部：活动条 + 词书进度 ---------- */
#view-home .hm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
#view-home .home-team-card { background: none; box-shadow: none; backdrop-filter: none; border: 1px solid var(--line); border-radius: var(--r-item); }
#view-home .home-foot { border-radius: var(--r-card); padding: 24px 26px; }
#view-home .home-foot .hp-book { font-family: var(--font-disp); font-size: 20px; color: var(--ink); }
#view-home .home-foot .hp-num { font-family: var(--font-disp); font-size: 20px; color: var(--ink2); }

/* ---------- 6. 手机端单列 ---------- */
@media (max-width: 767px) {
  #view-home #homeMain.hm { gap: 16px; }
  #view-home .hm-grid, #view-home .hm-row { grid-template-columns: 1fr; }
  #view-home .hm-side { flex-direction: row; }
  #view-home .checkin-hero { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #view-home .hm-side .task-btn { transition: none; }
}