/* ============================================================
   各畫面專屬樣式。依賴 tokens.css + app.css。
   ============================================================ */

/* ============================================================
   首頁 hero
   ============================================================ */

.hero {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.hero-top {
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  padding: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.hero-meta { flex: 1; min-width: 0; }
.hero-countdown {
  font-family: var(--font-serif);
  font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--accent);
}
.hero-countdown small { font-size: 14px; font-weight: 600; color: var(--ink-mid); margin-left: 4px; }
.hero-date { font-size: 13px; color: var(--ink-mid); font-weight: 600; margin-top: 4px; }
.hero-venue { font-size: 12px; color: var(--ink-light); margin-top: 2px; }
.hero-theme {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: var(--sp-2);
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--orange-border);
  border-radius: var(--r-full); padding: 4px 12px;
  font-size: 12.5px; font-weight: 700;
}
.hero-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }

/* 沒有進行中開伙時的召喚卡 */
.hero-idle { text-align: center; padding: var(--sp-6) var(--sp-5); }
.hero-idle .big-emoji { font-size: 48px; line-height: 1; margin-bottom: var(--sp-3); }

/* 橫向捲動的近期開伙 */
.scroll-row {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3); margin-inline: calc(var(--sp-4) * -1);
  padding-inline: var(--sp-4);
  scrollbar-width: none;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { scroll-snap-align: start; flex: 0 0 auto; }

.mini-card {
  width: 190px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: all var(--dur-fast) var(--ease);
}
.mini-card:hover { border-color: var(--accent); box-shadow: var(--sh-2); }
.mini-card .mc-head { padding: var(--sp-3); border-bottom: 1px solid var(--border-soft); background: var(--surface-2); }
.mini-card .mc-date { font-family: var(--font-serif); font-weight: 700; font-size: 14px; }
.mini-card .mc-sub { font-size: 11px; color: var(--ink-light); }
.mini-card .mc-body { padding: var(--sp-3); display: flex; flex-wrap: wrap; gap: 4px; }

/* ============================================================
   食譜牆
   ============================================================ */

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 600px) {
  .dish-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
}

.dish-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dish-card:hover { transform: translateY(-2px); box-shadow: var(--sh-3); border-color: var(--border); }

.dish-thumb {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  font-size: 40px; line-height: 1;
  position: relative;
  background: var(--surface-3);
}
.dish-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish-thumb .badge-todo {
  position: absolute; top: 7px; left: 7px;
  background: var(--yellow-soft); color: var(--yellow);
  border: 1px solid var(--yellow-border);
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-full);
}
.dish-thumb .badge-count {
  position: absolute; bottom: 7px; right: 7px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-full);
  backdrop-filter: blur(4px);
}

.dish-info { padding: var(--sp-3); display: flex; flex-direction: column; gap: 5px; flex: 1; }
.dish-name { font-weight: 700; font-size: 14px; line-height: 1.35; }
.dish-line { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-light); margin-top: auto; }
.dish-line .sep { opacity: .4; }

.diff-dots { display: inline-flex; gap: 2px; }
.diff-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--surface-3); display: block; }
.diff-dots i.on { background: var(--accent); }

/* ============================================================
   食譜詳情
   ============================================================ */

.recipe-hero {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-4);
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  font-size: 68px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
}
.recipe-hero img { width: 100%; height: 100%; object-fit: cover; }

.scale-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  position: sticky; top: 56px; z-index: var(--z-stuck);
  box-shadow: var(--sh-1);
}
.scale-bar .lbl { font-size: 12px; font-weight: 700; color: var(--ink-light); }
.scale-hint { font-size: 11px; color: var(--ink-light); }

.ing-list { list-style: none; }
.ing-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-2);
  border-bottom: 1px dashed var(--border-soft);
  cursor: pointer; user-select: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.ing-row:last-child { border-bottom: none; }
.ing-row input { width: 20px; height: 20px; accent-color: var(--green); flex-shrink: 0; }
.ing-row.done { opacity: .45; }
.ing-row.done .ing-name { text-decoration: line-through; }
.ing-name { flex: 1; font-size: 14.5px; font-weight: 500; }
.ing-note { font-size: 11px; color: var(--ink-light); font-weight: 400; margin-left: 6px; }
.ing-qty {
  font-family: var(--font-serif); font-weight: 700; font-size: 15px;
  white-space: nowrap; color: var(--accent);
}

.step-card {
  display: flex; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.step-card.done { opacity: .5; border-color: var(--green-border); }
.step-card.done .step-text { text-decoration: line-through; }
.step-no {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
  font-family: var(--font-serif);
  cursor: pointer;
}
.step-card.done .step-no { background: var(--green-soft); color: var(--green); }
.step-main { flex: 1; min-width: 0; }
.step-text { font-size: 14px; line-height: 1.7; }

.timer {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-2);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-full); padding: 4px 12px;
  font-size: 12px; font-weight: 700; color: var(--ink-mid);
  cursor: pointer; font-family: var(--font-serif);
  transition: all var(--dur-fast) var(--ease);
}
.timer:hover { border-color: var(--accent); color: var(--accent); }
.timer.running { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.timer.done { background: var(--green-soft); border-color: var(--green); color: var(--green); animation: ring-pulse 1s ease-in-out infinite; }
@keyframes ring-pulse { 50% { transform: scale(1.05); } }

.timeline { list-style: none; padding-left: var(--sp-4); border-left: 2px solid var(--border-soft); }
.timeline li { position: relative; padding: 0 0 var(--sp-4) var(--sp-3); font-size: 13px; }
.timeline li::before {
  content: ""; position: absolute; left: calc(var(--sp-4) * -1 - 5px); top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--bg);
}
.timeline li.ok::before   { background: var(--green); }
.timeline li.warn::before { background: var(--yellow); }
.timeline li.bad::before  { background: var(--red); }
.timeline .tl-date { font-family: var(--font-serif); font-weight: 700; font-size: 13px; }
.timeline .tl-note { color: var(--ink-mid); font-size: 12.5px; line-height: 1.6; }

/* ============================================================
   採買模式
   ============================================================ */

.shop-sticky {
  position: sticky; top: 56px; z-index: var(--z-stuck);
  background: var(--bg);
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
}
.shop-sticky .flex-between { font-size: 13px; font-weight: 700; }

.aisle-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-serif); font-size: 14px; font-weight: 700;
  color: var(--ink-mid);
  margin: var(--sp-4) 0 var(--sp-2);
  cursor: pointer; user-select: none;
}
.aisle-head .caret { transition: transform var(--dur) var(--ease); font-size: 11px; opacity: .6; }
.aisle-head.collapsed .caret { transform: rotate(-90deg); }
.aisle-head .count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ink-light); }

.channel-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-serif); font-size: 17px; font-weight: 700;
  padding: var(--sp-3) 0 var(--sp-1);
  border-bottom: 2px solid var(--border);
  margin-top: var(--sp-5);
}

.shop-row {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 13px var(--sp-4); margin-bottom: 7px;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
  cursor: pointer; user-select: none;
}
.shop-row:hover { border-color: var(--border); }
.shop-row input[type=checkbox] {
  width: 26px; height: 26px; accent-color: var(--green); flex-shrink: 0; cursor: pointer;
}
.shop-row.checked { opacity: .5; background: var(--green-soft); }
.shop-row.checked .shop-name { text-decoration: line-through; }
.shop-main { flex: 1; min-width: 0; }
.shop-name { font-weight: 700; font-size: 15.5px; }
.shop-meta { font-size: 11.5px; color: var(--ink-light); margin-top: 1px; }
.shop-qty {
  text-align: right; white-space: nowrap;
  font-family: var(--font-serif); font-weight: 700; font-size: 15px;
  color: var(--accent);
}
.shop-row.checked .shop-qty { color: var(--ink-light); }

/* 全部買齊時的慶祝 */
.confetti-wrap { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); overflow: hidden; }
.confetti {
  position: absolute; width: 9px; height: 14px; top: -20px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ============================================================
   開煮模式
   ============================================================ */

.cook-deck {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4);
  padding-bottom: var(--sp-3);
  scrollbar-width: none;
}
.cook-deck::-webkit-scrollbar { display: none; }
.cook-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
}
@media (min-width: 700px) { .cook-card { flex-basis: 78%; } }

.cook-dots { display: flex; justify-content: center; gap: 6px; margin: var(--sp-3) 0 var(--sp-4); }
.cook-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: var(--surface-3); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.cook-dots button.active { background: var(--accent); width: 22px; border-radius: var(--r-full); }

.cook-title { font-family: var(--font-serif); font-size: 20px; font-weight: 700; }
.wake-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-full); padding: 4px 11px; color: var(--ink-light);
  cursor: pointer; font-family: inherit;
}
.wake-pill.on { background: var(--green-soft); border-color: var(--green-border); color: var(--green); }

/* ============================================================
   回顧
   ============================================================ */

.verdict-row { display: flex; gap: var(--sp-2); }
.verdict {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface-2); border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md); padding: 10px 6px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-mid);
  cursor: pointer; user-select: none;
  transition: all var(--dur-fast) var(--ease);
}
.verdict .face { font-size: 22px; line-height: 1; }
.verdict input { display: none; }
.verdict:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.verdict:has(input:checked).v-ok  { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.verdict:has(input:checked).v-bad { border-color: var(--red); background: var(--red-soft); color: var(--red); }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.photo-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--border-soft);
}
.photo-drop {
  display: grid; place-items: center; gap: 4px;
  aspect-ratio: 1; border: 1.5px dashed var(--border);
  border-radius: var(--r-md); color: var(--ink-light);
  font-size: 11px; cursor: pointer; text-align: center;
  transition: all var(--dur-fast) var(--ease);
}
.photo-drop:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.photo-drop .ic { font-size: 22px; }
.photo-drop input { display: none; }

/* ============================================================
   歷史 / 主題 / 心得
   ============================================================ */

.history-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-4);
  box-shadow: var(--sh-1);
}
.history-header {
  background: var(--surface-2); padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: baseline; gap: var(--sp-3);
  border-bottom: 1px solid var(--border-soft); flex-wrap: wrap;
}
.history-header a { text-decoration: none; color: inherit; }
.history-date { font-family: var(--font-serif); font-weight: 700; font-size: 1rem; }
.history-venue { font-size: 12px; color: var(--ink-light); }
.history-theme {
  margin-left: auto; font-size: 12px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--orange-border);
  padding: 3px 11px; border-radius: var(--r-full);
}
.history-body { padding: var(--sp-4); }
.dish-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--sp-2); }
.dish-tag {
  font-size: 12px; background: var(--surface-3); color: var(--ink-mid);
  padding: 3px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-soft);
  text-decoration: none;
}
a.dish-tag:hover { border-color: var(--accent); color: var(--accent); }
.result-row { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--ink-mid); margin-top: 5px; line-height: 1.6; }
.result-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.dot-ok { background: var(--green); }
.dot-warn { background: var(--yellow); }
.dot-bad { background: var(--red); }

.themes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.theme-card {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 11px var(--sp-4);
  font-size: 13px; font-weight: 500; color: var(--ink-mid);
  display: flex; align-items: center; gap: 6px;
}
.theme-card.used { background: var(--surface); border-color: var(--green-border); color: var(--green); text-decoration: line-through; opacity: .6; }

.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: var(--sp-3); }
.tip-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: var(--sp-4);
  box-shadow: var(--sh-1);
}
.tip-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tip-body { font-size: 12.5px; color: var(--ink-mid); line-height: 1.75; }

/* ============================================================
   AI 區塊
   ============================================================ */

.agent-box {
  background: var(--yellow-soft);
  border: 1px dashed var(--yellow-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: 13.5px; line-height: 1.85;
  color: var(--ink-mid);
  margin: var(--sp-3) 0;
}
.agent-box p { margin-bottom: .6em; }
.agent-box p:last-child { margin-bottom: 0; }
.agent-box ul, .agent-box ol { margin: .4em 0 .6em 1.3em; }
.agent-box li { margin-bottom: .25em; }
.agent-box strong { color: var(--ink); }
.agent-box code {
  background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-sm);
  font-size: .92em;
}
.agent-label {
  font-size: 10.5px; font-weight: 700; color: var(--yellow);
  letter-spacing: .12em; margin-bottom: 6px;
}

/* ============================================================
   聊天助手
   ============================================================ */

.chat-fab {
  position: fixed; right: 16px;
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  border: none; font-size: 24px; cursor: pointer;
  box-shadow: var(--sh-3);
  transition: transform var(--dur) var(--ease);
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab:active { transform: scale(.94); }
@media (min-width: 900px) { .chat-fab { bottom: 18px; right: 18px; } }

.chat-drawer {
  position: fixed; right: 12px;
  bottom: calc(var(--tabbar-h) + 76px + env(safe-area-inset-bottom));
  z-index: var(--z-sheet);
  width: min(400px, calc(100vw - 24px));
  height: min(560px, calc(100dvh - 200px));
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 900px) { .chat-drawer { bottom: 84px; right: 18px; height: min(600px, calc(100dvh - 140px)); } }

.chat-head {
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
  padding: 10px var(--sp-3); display: flex; align-items: center; gap: var(--sp-2);
}
.chat-head strong { font-size: 14px; }
.chat-head .muted { flex: 1; }
.chat-msgs { flex: 1; overflow-y: auto; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.chat-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: var(--r-lg);
  font-size: 13.5px; line-height: 1.7; word-break: break-word;
}
.chat-bubble.user {
  align-self: flex-end; background: var(--accent-soft); color: var(--ink);
  border: 1px solid var(--orange-border); border-bottom-right-radius: var(--sp-1);
}
.chat-bubble.bot {
  align-self: flex-start; background: var(--surface);
  border: 1px solid var(--border-soft); color: var(--ink-mid);
  border-bottom-left-radius: var(--sp-1);
}
.chat-bubble p { margin-bottom: .55em; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble ul, .chat-bubble ol { margin: .3em 0 .5em 1.2em; }
.chat-bubble.thinking { color: var(--ink-light); font-style: italic; animation: chat-pulse 1.2s ease-in-out infinite; }
@keyframes chat-pulse { 50% { opacity: .45; } }
.chat-input-row {
  display: flex; gap: var(--sp-2); padding: 10px;
  border-top: 1px solid var(--border-soft); background: var(--surface-2);
}
.chat-input-row input { flex: 1; font-size: 15px; }

/* ============================================================
   登入
   ============================================================ */

.login-wrap { max-width: 430px; margin: 7vh auto; padding: 0 var(--sp-4); text-align: center; }
.login-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; margin-bottom: var(--sp-1); }
.login-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.login-name {
  background: var(--surface); border: 1.5px solid var(--border-soft);
  border-radius: var(--r-lg); padding: 17px 10px;
  font-size: 16px; font-weight: 700; color: var(--ink-mid);
  cursor: pointer; font-family: inherit;
  transition: all var(--dur-fast) var(--ease);
}
.login-name:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-2); }

/* ============================================================
   QR 連線
   ============================================================ */

.qr-box { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); display: inline-block; }
.qr-box svg { width: 220px; height: 220px; display: block; }

/* ============================================================
   統計圖表（inline SVG，不用圖表庫）
   ============================================================ */

.chart { width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: var(--accent); transition: fill var(--dur-fast) var(--ease); }
.chart .bar:hover { fill: var(--green); }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .lbl { fill: var(--ink-light); font-size: 10px; font-family: var(--font-sans); }
.chart .val { fill: var(--ink-mid); font-size: 10px; font-weight: 700; font-family: var(--font-serif); }

.rank-row { display: flex; align-items: center; gap: var(--sp-3); padding: 7px 0; }
.rank-no {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); color: var(--ink-mid);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.rank-row:nth-child(1) .rank-no { background: var(--accent); color: var(--on-accent); }
.rank-name { flex: 1; font-size: 13.5px; font-weight: 500; }
.rank-bar { height: 7px; border-radius: var(--r-full); background: var(--accent-soft); overflow: hidden; flex: 1.4; }
.rank-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-full); }
.rank-val { font-family: var(--font-serif); font-weight: 700; font-size: 13px; width: 34px; text-align: right; }