/* v239 — V4 level-one page visual refinement
   Scope: 11 V4 first-level pages only.
   Goal: each page has one obvious main action, cleaner first-screen hierarchy,
   and consistent child-friendly visual rhythm on PAD. */

body.v239-level-page{
  --v239-accent:#2563eb;
  --v239-accent-2:#0ea5e9;
  --v239-soft:#eff6ff;
  --v239-soft-2:#ecfeff;
  --v239-warm:#facc15;
}
body.v239-today-page{--v239-accent:#2563eb;--v239-accent-2:#0ea5e9;--v239-soft:#eff6ff;}
body.v239-learning-page{--v239-accent:#2563eb;--v239-accent-2:#38bdf8;--v239-soft:#eff6ff;}
body.v239-reading-page{--v239-accent:#0ea5e9;--v239-accent-2:#14b8a6;--v239-soft:#ecfeff;}
body.v239-thinking-page{--v239-accent:#2563eb;--v239-accent-2:#7c3aed;--v239-soft:#eef2ff;}
body.v239-science-page{--v239-accent:#0891b2;--v239-accent-2:#14b8a6;--v239-soft:#ecfeff;}
body.v239-history-page{--v239-accent:#2563eb;--v239-accent-2:#f59e0b;--v239-soft:#eff6ff;}
body.v239-map-page{--v239-accent:#0f766e;--v239-accent-2:#0ea5e9;--v239-soft:#ecfeff;}
body.v239-manners-page{--v239-accent:#2563eb;--v239-accent-2:#f59e0b;--v239-soft:#eff6ff;}
body.v239-life-page{--v239-accent:#0f766e;--v239-accent-2:#2563eb;--v239-soft:#ecfeff;}
body.v239-badges-page{--v239-accent:#2563eb;--v239-accent-2:#facc15;--v239-soft:#eff6ff;}
body.v239-growth-page{--v239-accent:#0f766e;--v239-accent-2:#0ea5e9;--v239-soft:#ecfeff;}

body.v239-level-page .v4-topbar{
  border:1px solid rgba(37,99,235,.12) !important;
}
body.v239-level-page .v4-brand-icon{
  background:linear-gradient(135deg,var(--v239-soft),#fff7ed) !important;
  color:var(--v239-accent) !important;
}
body.v239-level-page .v4-kicker{
  background:linear-gradient(135deg,var(--v239-soft),#fff) !important;
  color:var(--v239-accent) !important;
  border:1px solid rgba(37,99,235,.10) !important;
}

/* Level page layout: make the left action area clearly heavier than status rail. */
body.v239-level-page .v239-level-grid{
  align-items:stretch !important;
}
body.v239-level-page .v239-hero-panel{
  min-height:420px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  border:1px solid rgba(37,99,235,.14) !important;
  box-shadow:0 20px 46px rgba(37,99,235,.12) !important;
}
body.v239-level-page .v239-hero-panel:before{
  content:"";
  position:absolute;
  inset:auto -70px -96px auto;
  width:220px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle, color-mix(in srgb, var(--v239-accent-2) 24%, transparent), transparent 70%);
  pointer-events:none;
}
body.v239-level-page .v239-hero-panel h1{
  max-width:720px !important;
}
body.v239-level-page .v239-hero-panel p{
  max-width:760px !important;
}

/* One strongest main action per page. */
.v239-hero-action{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  width:min(720px,100%);
  min-height:76px;
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:24px;
  color:#fff !important;
  background:linear-gradient(135deg,var(--v239-accent),var(--v239-accent-2)) !important;
  box-shadow:0 16px 34px rgba(37,99,235,.22) !important;
}
.v239-hero-action b{
  width:52px;
  height:52px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  font-size:28px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.v239-hero-action strong{
  display:block;
  font-size:21px;
  line-height:1.12;
  letter-spacing:-.035em;
}
.v239-hero-action small{
  display:block;
  margin-top:4px;
  color:rgba(255,255,255,.88);
  font-size:13px;
  font-weight:900;
  line-height:1.3;
}
.v239-hero-action em{
  font-style:normal;
  border-radius:999px;
  min-height:42px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--v239-accent);
  font-weight:1000;
  white-space:nowrap;
}

/* Right rail is useful, but it must not compete with the main action. */
body.v239-level-page .v239-status-panel{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(37,99,235,.10) !important;
}
body.v239-level-page .v239-status-panel .v4-kicker{
  background:#f8fbff !important;
}
body.v239-level-page .v239-status-panel .v4-stat{
  min-height:68px !important;
}
body.v239-level-page .v239-status-panel .v4-stat strong{
  color:var(--v239-accent) !important;
}
body.v239-level-page .v239-rail-link{
  background:#f8fbff !important;
  color:#1d4ed8 !important;
  border:1px solid rgba(37,99,235,.12) !important;
  box-shadow:none !important;
}

/* Feature cards: first item becomes the recommended path, remaining items stay secondary. */
body.v239-level-page .v239-feature-list{
  margin-top:14px !important;
}
body.v239-level-page .v239-feature-list .v4-feature{
  position:relative;
  overflow:hidden;
  border-radius:22px !important;
  background:#f8fbff !important;
  transition:transform .16s ease, box-shadow .16s ease;
}
body.v239-level-page .v239-feature-list .v4-feature:active{
  transform:scale(.99);
}
body.v239-level-page .v239-feature-main{
  background:linear-gradient(135deg,#ffffff,var(--v239-soft)) !important;
  border-color:rgba(37,99,235,.22) !important;
  box-shadow:0 12px 26px rgba(37,99,235,.10) !important;
}
body.v239-level-page .v239-feature-main:after{
  content:"推荐先做";
  position:absolute;
  right:10px;
  top:10px;
  border-radius:999px;
  padding:5px 9px;
  background:#fff7ed;
  color:#c2410c;
  font-size:11px;
  font-weight:1000;
}
body.v239-level-page .v239-feature-main strong,
body.v239-level-page .v239-feature-main span{
  max-width:calc(100% - 78px);
}

/* Home task list: first task is visually the first step, not just one row in a list. */
body.v239-today-page .v239-first-task{
  background:linear-gradient(135deg,#ffffff,var(--v239-soft)) !important;
  border-color:rgba(37,99,235,.24) !important;
  box-shadow:0 12px 26px rgba(37,99,235,.10) !important;
}
body.v239-today-page .v239-first-task:after{
  content:"第一步";
  justify-self:end;
  align-self:start;
  border-radius:999px;
  padding:5px 9px;
  background:#fff7ed;
  color:#c2410c;
  font-size:11px;
  font-weight:1000;
}
body.v239-today-page .v239-first-task .v4-task-actions{
  margin-right:0;
}

/* Secondary entry wall on the home page should not steal the first screen. */
body.v239-today-page .v239-secondary-section{
  margin-top:8px;
}
body.v239-today-page .v239-secondary-section .v4-card{
  min-height:132px !important;
}
body.v239-today-page .v239-secondary-section .v4-card b{
  width:44px !important;
  height:44px !important;
  font-size:23px !important;
}

/* Badge and growth pages: empty dynamic areas still need a clear visual frame. */
body.v239-badges-page .v4-badge-grid:empty:before{
  content:"完成今日任务后，徽章会在这里点亮。";
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  padding:18px;
  border-radius:24px;
  background:var(--v239-soft);
  color:#1d4ed8;
  font-weight:1000;
  text-align:center;
}
body.v239-growth-page .v4-task-list:empty:before,
body.v239-growth-page .v4-history-list:empty:before{
  content:"先完成一个小任务，这里就会出现记录。";
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  padding:16px;
  border-radius:22px;
  background:var(--v239-soft);
  color:#1d4ed8;
  font-weight:1000;
  text-align:center;
}

/* iPad landscape: keep the main action visible without forcing dense pages into a tiny height. */
@media (min-width:981px) and (max-height:820px){
  body.v239-level-page .v239-hero-panel{min-height:360px !important;}
  .v239-hero-action{min-height:66px;margin-top:10px;padding:10px 12px;border-radius:22px;}
  .v239-hero-action b{width:46px;height:46px;border-radius:17px;font-size:25px;}
  .v239-hero-action strong{font-size:19px;}
  .v239-hero-action small{font-size:12px;}
  .v239-hero-action em{min-height:38px;font-size:13px;}
  body.v239-level-page .v239-feature-list{margin-top:10px !important;}
  body.v239-level-page .v239-feature-main:after{display:none;}
  body.v239-level-page .v239-feature-main strong,
  body.v239-level-page .v239-feature-main span{max-width:100%;}
}

/* iPad portrait / small screens: action block stays big and clear. */
@media (max-width:980px){
  body.v239-level-page .v239-hero-panel{min-height:0 !important;}
  .v239-hero-action{grid-template-columns:auto minmax(0,1fr);}
  .v239-hero-action em{grid-column:2;justify-self:start;margin-top:2px;}
}
@media (max-width:560px){
  .v239-hero-action{border-radius:22px;gap:12px;}
  .v239-hero-action b{width:46px;height:46px;border-radius:17px;font-size:24px;}
  .v239-hero-action strong{font-size:18px;}
  .v239-hero-action small{font-size:12px;}
}

/* Homepage task buttons are useful controls, not the global strongest action. */
body.v239-today-page .v4-task-actions button,
body.v239-today-page .v4-task-actions .v4-mini-link{
  background:#f8fbff !important;
  color:#1d4ed8 !important;
  border:1px solid rgba(37,99,235,.14) !important;
  box-shadow:none !important;
}
body.v239-today-page .v239-first-task .v4-task-actions .v4-mini-link{
  background:linear-gradient(135deg,var(--v239-accent),var(--v239-accent-2)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 10px 22px rgba(37,99,235,.18) !important;
}