/* Dashboard 2026 — red learning workspace.
   Presentation-only overrides: routes, data bindings and learning actions remain unchanged. */

:root {
  --dashboard-red: #bd1530;
  --dashboard-red-dark: #760f23;
  --dashboard-red-deep: #3d0b15;
  --dashboard-red-soft: #fff1f3;
  --dashboard-canvas: #f7f3f2;
  --dashboard-line: #eadeda;
}

.app-member {
  --red: var(--dashboard-red);
  --red-dark: #981128;
  --red-soft: var(--dashboard-red-soft);
  --gray-bg: var(--dashboard-canvas);
  --line: var(--dashboard-line);
  background: var(--dashboard-canvas);
}

/* Shell */
.app-member .sidebar {
  background:
    radial-gradient(circle at 5% 100%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, #390a13 0%, #4c0c18 58%, #350810 100%);
  border-right: 0;
  color: #fff;
  box-shadow: 12px 0 34px rgba(57, 7, 17, .12);
}

.app-member .brand { border-bottom-color: rgba(255,255,255,.12); }
.app-member .brand-mark {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
  box-shadow: 0 4px 12px rgba(216,35,42,.35);
}
.app-member .nav .nav-group { color: rgba(255,255,255,.48); }
.app-member .nav a { color: rgba(255,255,255,.72); }
.app-member .nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.app-member .nav a.active {
  background: linear-gradient(90deg, #aa142d, #c31b38);
  border-left-color: #fff;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.app-member .nav a.active svg { color: #fff; }
.app-member .streak-mini,
.app-member .user-mini .logout-btn,
.app-member #pinyinToggleDesktop {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
}

.app-member .workspace-bar {
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(255,255,255,.94);
  border-bottom-color: #eee5e2;
  box-shadow: 0 8px 28px rgba(72, 24, 31, .045);
}
.app-member .workspace-search {
  border-color: #eadfdd;
  border-radius: 12px;
  background: #faf7f6;
}
.app-member .workspace-search:focus-within {
  border-color: var(--dashboard-red);
  box-shadow: 0 0 0 3px rgba(189,21,48,.1);
}
.app-member .workspace-avatar { background: linear-gradient(135deg, #d22a45, #8f1024); }

.app-member .view.view-dashboard {
  width: 100%;
  max-width: 1500px;
  padding: 20px 24px 56px;
}

/* Shared dashboard surfaces */
.view-dashboard .dash { gap: 16px; }
.view-dashboard .dash .card {
  border-color: #eadfdd;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(69, 23, 30, .055);
}
.view-dashboard .dash .dash-card-head { margin-bottom: 13px; }
.view-dashboard .dash .dash-card-head h2 { font-size: 18px; letter-spacing: -.02em; }
.view-dashboard .dash .dash-card-head h3 { font-size: 14px; }
.view-dashboard .dash-eyebrow { color: #a11b31; font-size: 10px; letter-spacing: .1em; }

/* Primary learning summary */
.view-dashboard .dash-hero {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(320px,1.35fr) auto minmax(300px,.9fr);
  gap: 26px;
  min-height: 214px;
  padding: 28px 30px;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.15), transparent 20%),
    linear-gradient(125deg, #781024 0%, #ae1530 54%, #d22b45 100%);
  color: #fff;
  box-shadow: 0 18px 42px rgba(131, 16, 37, .2);
}
.view-dashboard .dash-hero::after {
  content: "学";
  position: absolute;
  z-index: -1;
  right: 24px;
  bottom: -58px;
  color: rgba(255,255,255,.07);
  font-family: var(--han);
  font-size: 220px;
  font-weight: 800;
  line-height: 1;
}
.view-dashboard .dash-hero h1 { margin-bottom: 8px; color: #fff; font-size: 30px; letter-spacing: -.035em; }
.view-dashboard .dash-hero-sub,
.view-dashboard .dash-hero-sub .muted { color: rgba(255,255,255,.78); }
.view-dashboard .dash-hero-sub b { color: #fff; }
.view-dashboard .dash-hero-chips .chip {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.view-dashboard .dash-hero-ring .ring {
  width: 112px;
  height: 112px;
  background: conic-gradient(#fff calc(var(--p)*1%), rgba(255,255,255,.18) 0);
}
.view-dashboard .dash-hero-ring .ring::before { background: #a7142c; }
.view-dashboard .dash-hero-ring .ring-in,
.view-dashboard .dash-hero-ring .ring-in span,
.view-dashboard .dash-hero-goal,
.view-dashboard .dash-hero-goal .muted { color: #fff; }
.view-dashboard .dash-hero-goal .muted { opacity: .7; }
.view-dashboard .dash-streak {
  background: rgba(255,255,255,.13);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}
.view-dashboard .dash-hero-actions .btn {
  min-height: 38px;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  color: #fff;
  backdrop-filter: blur(5px);
}
.view-dashboard .dash-hero-actions .btn:hover { background: rgba(255,255,255,.18); }
.view-dashboard .dash-hero-actions .btn-primary {
  border-color: #fff;
  background: #fff;
  color: var(--dashboard-red-dark);
  box-shadow: 0 9px 20px rgba(54,0,10,.16);
}

/* Conditional notices */
.view-dashboard .dash-callout {
  border-radius: 14px;
  box-shadow: none;
}
.view-dashboard .dash-callout-ai { border-left: 4px solid var(--dashboard-red); }

/* Compact weekly community ranking */
.view-dashboard .dash-leaderboard {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  overflow: hidden;
  background: linear-gradient(120deg, #fff 0%, #fff 72%, #fff1f3 100%);
}
.view-dashboard .dash-lb-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  gap: 0 12px;
}
.view-dashboard .dash-lb-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  grid-row: 1 / span 2;
  border-radius: 13px;
  background: #fff0f2;
  color: var(--dashboard-red);
}
.view-dashboard .dash-lb-icon svg { width: 21px; height: 21px; }
.view-dashboard .dash-lb-copy h2 { margin: 2px 0 5px; font-size: 20px; }
.view-dashboard .dash-lb-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.view-dashboard .dash-lb-all {
  grid-column: 2;
  width: max-content;
  margin-top: 11px;
  color: var(--dashboard-red);
  font-size: 12px;
  font-weight: 800;
}
.view-dashboard .dash-lb-all svg { width: 13px; height: 13px; vertical-align: -2px; }
.view-dashboard .dash-lb-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.view-dashboard .dash-lb-self {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 15px;
  border: 1px solid #f2cfd5;
  border-radius: 14px;
  background: #fff5f6;
}
.view-dashboard .dash-lb-self > span { color: #8b6670; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.view-dashboard .dash-lb-self > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.view-dashboard .dash-lb-self strong { color: var(--dashboard-red); font-size: 28px; line-height: 1; }
.view-dashboard .dash-lb-self b { font-size: 12px; }
.view-dashboard .dash-lb-self .btn { width: 100%; min-height: 34px; font-size: 11px; }
.view-dashboard .dash-lb-top { display: grid; gap: 7px; min-width: 0; }
.view-dashboard .dash-lb-row {
  display: grid;
  grid-template-columns: 28px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #eee4e2;
  border-radius: 12px;
  background: rgba(255,255,255,.88);
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.view-dashboard .dash-lb-row:hover { transform: translateX(2px); border-color: #e5abb5; }
.view-dashboard .dash-lb-rank { text-align: center; font-size: 17px; }
.view-dashboard .dash-lb-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #d92d49, #8d1026);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.view-dashboard .dash-lb-person { min-width: 0; }
.view-dashboard .dash-lb-person b,
.view-dashboard .dash-lb-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-dashboard .dash-lb-person b { font-size: 12px; }
.view-dashboard .dash-lb-person small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.view-dashboard .dash-lb-row > strong { color: var(--dashboard-red); font-size: 12px; white-space: nowrap; }
.view-dashboard .dash-lb-row > strong small { font-size: 8px; }
.view-dashboard .dash-lb-empty { margin: auto; }

/* Situational learning entry — backed by the existing speaking/dialogue flow */
.view-dashboard .dash-situations {
  display: grid;
  grid-template-columns: 285px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  overflow: hidden;
  background: linear-gradient(120deg, #fff 0%, #fff 72%, #fff4f5 100%);
}
.view-dashboard .dash-situation-head { display: flex; flex-direction: column; align-items: flex-start; }
.view-dashboard .dash-situation-head h2 { margin: 3px 0 5px; font-size: 20px; }
.view-dashboard .dash-situation-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.view-dashboard .dash-situation-all { margin-top: auto; padding-top: 12px; color: var(--dashboard-red); font-size: 12px; font-weight: 800; }
.view-dashboard .dash-situation-all svg { width: 13px; height: 13px; vertical-align: -2px; }
.view-dashboard .dash-situation-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; min-width: 0; }
.view-dashboard .dash-situation-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 126px;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  overflow: hidden;
  border: 1px solid #efdadd;
  border-radius: 14px;
  background: #fff9f9;
  color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.view-dashboard .dash-situation-card:hover { transform: translateY(-2px); border-color: #df9eaa; box-shadow: 0 10px 22px rgba(102,19,33,.08); }
.view-dashboard .dash-situation-no { color: #a97982; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.view-dashboard .dash-situation-han { position: absolute; top: 23px; right: 7px; color: #f6dfe3; font-size: 38px; font-weight: 800; line-height: 1; }
.view-dashboard .dash-situation-card > span:nth-child(3) { position: relative; z-index: 1; }
.view-dashboard .dash-situation-card b,
.view-dashboard .dash-situation-card small { display: block; }
.view-dashboard .dash-situation-card b { color: #6f1020; font-size: 13px; }
.view-dashboard .dash-situation-card small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.view-dashboard .dash-situation-card > i { align-self: flex-end; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f7e4e7; color: var(--dashboard-red); }
.view-dashboard .dash-situation-card > i svg { width: 12px; height: 12px; }

/* Balanced main area */
.view-dashboard .dash-grid {
  grid-template-columns: minmax(0, 2.35fr) minmax(300px, .82fr);
  gap: 16px;
}
.view-dashboard .dash-main,
.view-dashboard .dash-rail { gap: 16px; }
.view-dashboard .dash-rail { position: sticky; top: 86px; }

.view-dashboard .dash-today {
  padding: 22px;
  background: linear-gradient(135deg, #fff 0%, #fff 68%, #fff4f5 100%);
}
.view-dashboard .dash-lesson-art {
  width: 104px;
  height: 104px;
  border-radius: 18px;
  background: linear-gradient(145deg, #d62845, #7d0e22);
  box-shadow: 0 12px 24px rgba(166,18,43,.19);
}
.view-dashboard .dash-example { font-size: 22px; }
.view-dashboard .bar { background: #f0e7e5; }
.view-dashboard .bar > i { background: linear-gradient(90deg, #9d1129, #e3425b); }

.view-dashboard .dash-metrics { gap: 12px; }
.view-dashboard .dash-metric { min-height: 200px; padding: 17px; }
.view-dashboard .dash-metric:first-child { background: linear-gradient(150deg, #fff 55%, #fff3f4); }
.view-dashboard .dash-metric-big b { color: var(--dashboard-red); }
.view-dashboard .dash-metric-ring .ring { background: conic-gradient(var(--dashboard-red) calc(var(--p)*1%), #f1e6e4 0); }

.view-dashboard .dash-path { overflow: hidden; }
.view-dashboard .dash-hsk-path a { border-radius: 12px; background: #fcfaf9; }
.view-dashboard .dash-hsk-path a.active {
  border-color: var(--dashboard-red);
  background: #fff0f2;
  box-shadow: 0 7px 16px rgba(189,21,48,.08);
}

.view-dashboard .dash-week-chart { height: 132px; }
.view-dashboard .dash-week-track { background: #f2e9e7; }
.view-dashboard .dash-week-track i { background: linear-gradient(180deg, #e54b63, #a8102a); }

.view-dashboard .dash-actions { gap: 10px; }
.view-dashboard .dash-action {
  min-height: 78px;
  border-radius: 15px;
  box-shadow: none;
}
.view-dashboard .dash-action:hover { box-shadow: 0 10px 22px rgba(83,25,34,.08); }

/* Personal rail */
.view-dashboard .dash-rail .card { padding: 17px; box-shadow: 0 8px 24px rgba(69,23,30,.045); }
.view-dashboard .dash-ai {
  border: 0;
  background: linear-gradient(145deg, #4b0c17, #9c132a);
  color: #fff;
}
.view-dashboard .dash-ai .dash-eyebrow,
.view-dashboard .dash-ai .muted,
.view-dashboard .dash-ai p,
.view-dashboard .dash-ai-score span { color: rgba(255,255,255,.72); }
.view-dashboard .dash-ai .dash-card-head a { color: #fff; }
.view-dashboard .dash-ai .btn {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.view-dashboard .dash-ai-score strong { color: #fff; }
.view-dashboard .dash-activity li a { padding: 8px; }
.view-dashboard .dash-badge-row { flex-wrap: wrap; }
.view-dashboard .dash-badge-row span.got { background: #fff0f2; color: var(--dashboard-red); }
.view-dashboard .dash-cal-days button.active { background: linear-gradient(145deg, #d32945, #951128); }

html[data-theme="dark"] .app-member {
  --dashboard-canvas: #120f11;
  --dashboard-line: #38282c;
}
html[data-theme="dark"] .view-dashboard .dash .card { border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .view-dashboard .dash-today { background: linear-gradient(135deg, #1d191b, #24191d); }
html[data-theme="dark"] .view-dashboard .dash-hsk-path a { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .view-dashboard .dash-hsk-path a.active { background: rgba(216,35,42,.14); }

@media (max-width: 1240px) {
  .view-dashboard .dash-hero { grid-template-columns: minmax(300px,1fr) auto; }
  .view-dashboard .dash-hero-side { grid-column: 1 / -1; align-items: flex-start; }
  .view-dashboard .dash-hero-actions { justify-content: flex-start; }
  .view-dashboard .dash-grid { grid-template-columns: minmax(0,1fr); }
  .view-dashboard .dash-leaderboard { grid-template-columns: 240px minmax(0,1fr); }
  .view-dashboard .dash-situations { grid-template-columns: 240px minmax(0,1fr); }
  .view-dashboard .dash-situation-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .view-dashboard .dash-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 900px) {
  .app-member .view.view-dashboard { padding: 16px 14px 48px; }
  .view-dashboard .dash-hero { grid-template-columns: 1fr; min-height: 0; padding: 22px; }
  .view-dashboard .dash-hero h1 { font-size: 26px; }
  .view-dashboard .dash-hero-ring { justify-content: flex-start; }
  .view-dashboard .dash-hero-side { grid-column: auto; }
  .view-dashboard .dash-metrics { grid-template-columns: 1fr; }
  .view-dashboard .dash-leaderboard { grid-template-columns: 1fr; }
  .view-dashboard .dash-situations { grid-template-columns: 1fr; }
  .view-dashboard .dash-situation-head { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .view-dashboard .dash-situation-head p { grid-column: 1 / -1; }
  .view-dashboard .dash-situation-all { grid-column: 2; grid-row: 1; padding-top: 0; align-self: center; }
  .view-dashboard .dash-lb-heading { grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; }
  .view-dashboard .dash-lb-all { grid-column: 3; grid-row: 1; margin-top: 0; }
}

@media (max-width: 640px) {
  .view-dashboard .dash { gap: 12px; }
  .view-dashboard .dash .card { border-radius: 15px; }
  .view-dashboard .dash-hero { padding: 20px 17px; }
  .view-dashboard .dash-hero::after { right: -18px; font-size: 160px; }
  .view-dashboard .dash-hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .view-dashboard .dash-hero-actions .btn { width: 100%; }
  .view-dashboard .dash-hero-actions .btn-primary { grid-column: 1 / -1; }
  .view-dashboard .dash-rail { grid-template-columns: 1fr; }
  .view-dashboard .dash-today { padding: 17px; }
  .view-dashboard .dash-actions { grid-template-columns: 1fr; }
  .view-dashboard .dash-hsk-path { grid-template-columns: repeat(3,1fr); }
  .view-dashboard .dash-leaderboard { padding: 16px; }
  .view-dashboard .dash-situations { padding: 16px; }
  .view-dashboard .dash-situation-head { display: block; }
  .view-dashboard .dash-situation-head p { display: none; }
  .view-dashboard .dash-situation-all { display: inline-block; margin-top: 5px; }
  .view-dashboard .dash-situation-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .view-dashboard .dash-situation-card { min-height: 108px; }
  .view-dashboard .dash-lb-heading { grid-template-columns: 40px minmax(0,1fr); }
  .view-dashboard .dash-lb-icon { width: 40px; height: 40px; }
  .view-dashboard .dash-lb-copy p { display: none; }
  .view-dashboard .dash-lb-all { grid-column: 2; grid-row: auto; margin-top: 5px; }
  .view-dashboard .dash-lb-body { grid-template-columns: 1fr; }
  .view-dashboard .dash-lb-self { padding: 13px; }
}