Blame for src/theme.py

"""品牌主题：藏青 / 红 / 金（取自肆带贰队徽）。

提供注入用的 CSS 字符串与若干小型 HTML 构件（队徽、徽章、统计卡）。
CSS 用普通字符串（非 f-string），避免大括号转义。
"""
from __future__ import annotations

from shiny import ui

from .config import CREST_URL

CSS = """
:root{
  --navy-deep:#0A1730; --navy:#11254A; --navy-2:#16305C; --navy-line:#24417a;
  --red:#C8102E; --red-2:#E2384B;
  --gold:#D4AF37; --gold-2:#EBCB6B; --gold-dim:rgba(212,175,55,.30);
  --blue:#3DA5D9; --green:#1FA971;
  --cream:#F2ECDD; --muted:#9DB0D0; --ink:#0A1325;
}
*{box-sizing:border-box}
html{background:var(--navy-deep)}
body{
  margin:0; color:var(--cream); min-height:100vh;
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  background:
    radial-gradient(1100px 680px at 88% 0%, rgba(200,16,46,.22), transparent 60%),
    radial-gradient(900px 600px at 4% 6%, rgba(61,165,217,.16), transparent 58%),
    linear-gradient(180deg,#0d1b38 0%, var(--navy-deep) 60%, var(--navy-deep) 100%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
}
.sde-shell{max-width:1080px;margin:0 auto;padding:18px 18px 64px}

/* ---------- 顶栏 ---------- */
.sde-topbar{display:flex;align-items:center;gap:14px;padding:10px 4px 18px;flex-wrap:wrap}
.sde-brand{display:flex;align-items:center;gap:14px}
.sde-brand .zh{font-size:26px;font-weight:800;letter-spacing:.14em;line-height:1;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.sde-brand .en{font-size:11px;letter-spacing:.30em;color:var(--muted);margin-top:6px;text-transform:uppercase}
.sde-spacer{flex:1}
.sde-welcome{color:var(--muted);font-size:14px;margin-right:6px}
.sde-welcome b{color:var(--cream)}

/* ---------- 队徽 ---------- */
.sde-crest{border-radius:50%;background:radial-gradient(circle at 50% 38%,#ffffff,#eef2f7);
  border:2px solid var(--gold);box-shadow:0 8px 26px -8px rgba(0,0,0,.7),0 0 0 4px rgba(212,175,55,.12);
  display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.sde-crest img{width:86%;height:86%;object-fit:contain;display:block}

/* ---------- 卡片 ---------- */
.sde-card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--gold-dim);border-radius:18px;padding:18px 20px;margin-bottom:18px;
  box-shadow:0 24px 50px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04)}
.sde-card-h{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.sde-card-h .t{font-size:15px;font-weight:800;letter-spacing:.10em;color:var(--cream)}
.sde-card-h .ic{font-size:18px}
.sde-card-h::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--gold-dim),transparent)}
.sde-sub{color:var(--muted);font-size:12.5px;margin:-6px 0 14px}

/* ---------- 统计卡 ---------- */
.sde-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sde-stats.cols-4{grid-template-columns:repeat(4,1fr)}
.sde-stats.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.sde-stats,.sde-stats.cols-4,.sde-stats.cols-3{grid-template-columns:repeat(2,1fr)}}
.sde-stat{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 12px;text-align:center}
.sde-stat .v{font-size:30px;font-weight:800;line-height:1;color:var(--gold-2)}
.sde-stat .l{font-size:12px;color:var(--muted);margin-top:7px;letter-spacing:.05em}
.sde-stat .s{font-size:11px;color:var(--muted);margin-top:3px;opacity:.85}
.sde-stat.accent-red .v{color:var(--red-2)}
.sde-stat.accent-blue .v{color:var(--blue)}
.sde-stat.accent-green .v{color:var(--green)}
.sde-stat.accent-cream .v{color:var(--cream)}

/* ---------- 表格 ---------- */
.sde-table-wrap{overflow-x:auto}
.sde-table{width:100%;border-collapse:collapse;font-size:14px}
.sde-table th{text-align:left;font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--gold);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--gold-dim);white-space:nowrap}
.sde-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--cream);vertical-align:middle}
.sde-table tbody tr:hover{background:rgba(212,175,55,.06)}
.sde-table tr.is-me{background:rgba(212,175,55,.12)}
.sde-table tr.is-me td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.sde-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.sde-rank{width:42px;text-align:center;font-weight:800;color:var(--muted)}
.sde-jersey{display:inline-block;min-width:30px;padding:1px 7px;margin-right:8px;border-radius:6px;
  background:rgba(61,165,217,.16);border:1px solid rgba(61,165,217,.35);color:#bfe2f6;
  font-size:12px;font-weight:700;text-align:center}
.sde-me-tag{margin-left:8px;font-size:11px;color:var(--ink);background:var(--gold);
  padding:0 7px;border-radius:20px;font-weight:800}
.sde-empty{color:var(--muted);text-align:center;padding:24px;font-size:13px}

/* 结果徽章 */
.badge-res{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;
  border-radius:6px;font-size:12px;font-weight:800;color:#fff}
.badge-W{background:var(--green)} .badge-D{background:#6b7a99} .badge-L{background:var(--red)}
.ha-pill{font-size:11px;padding:1px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.18);color:var(--muted)}
.ha-home{color:var(--gold-2);border-color:var(--gold-dim)}

/* ---------- 表单 / 控件 ---------- */
.form-label{color:var(--cream);font-size:13px;font-weight:600;margin-bottom:5px}
.form-control,.form-select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  color:var(--cream);border-radius:10px}
.form-control:focus,.form-select:focus{background:rgba(255,255,255,.09);border-color:var(--gold);
  box-shadow:0 0 0 .18rem rgba(212,175,55,.22);color:var(--cream)}
.form-control::placeholder{color:#7e90b3}
.form-select option{color:#10203f;background:#eaf0fb}
.form-check-input{background-color:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.form-check-input:checked{background-color:var(--gold);border-color:var(--gold)}
.shiny-input-container{margin-bottom:12px}

/* 按钮 */
.btn{border-radius:10px;font-weight:700;letter-spacing:.02em}
.btn-primary,.btn-default.btn-primary{background:linear-gradient(180deg,var(--gold-2),var(--gold));
  border:none;color:#1a1305}
.btn-primary:hover{filter:brightness(1.07);color:#1a1305}
.btn-danger{background:var(--red);border:none}
.btn-outline-light{border-color:rgba(255,255,255,.35);color:var(--cream)}
.btn-outline-light:hover{background:rgba(255,255,255,.1);color:#fff}

/* 导航 */
.nav-tabs,.nav-pills{border-bottom:1px solid var(--gold-dim);gap:6px;margin-bottom:18px}
.nav-tabs .nav-link,.nav-pills .nav-link{color:var(--muted);border:none;font-weight:700;
  letter-spacing:.04em;padding:9px 16px;border-radius:10px 10px 0 0}
.nav-tabs .nav-link:hover{color:var(--cream);background:rgba(255,255,255,.04)}
.nav-tabs .nav-link.active,.nav-pills .nav-link.active{color:var(--ink);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));border:none}

/* ---------- 登录页 ---------- */
.sde-login-wrap{display:flex;justify-content:center;padding:6vh 16px 40px}
.sde-login{width:100%;max-width:380px;text-align:center}
.sde-login .sde-crest{margin:0 auto 18px}
.sde-login .zh{font-size:34px;font-weight:800;letter-spacing:.18em;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.sde-login .en{font-size:11px;letter-spacing:.34em;color:var(--muted);margin:10px 0 4px;text-transform:uppercase}
.sde-login .city{font-size:12px;color:var(--blue);letter-spacing:.2em;margin-bottom:22px}
.sde-login .sde-card{text-align:left}
.sde-login .btn-primary{width:100%;padding:9px;margin-top:6px}
.sde-login-hint{color:var(--muted);font-size:12px;margin-top:14px;line-height:1.7}
.sde-login-hint code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;color:var(--gold-2)}

/* 通知深色化 */
.shiny-notification{background:var(--navy-2);color:var(--cream);border:1px solid var(--gold-dim)}

/* 我的数据：紧凑表单 */
.sde-form-table .shiny-input-container{margin:0}
.sde-form-table label:empty{display:none}
.sde-form-table .form-control{padding:4px 8px;text-align:center}

/* ---------- 个人趋势图 ---------- */
.sde-trend-wrap{overflow-x:auto}
.sde-legend{display:flex;gap:18px;font-size:12px;color:var(--muted);margin-bottom:10px}
.sde-legend > span{display:inline-flex;align-items:center;gap:6px}
.sde-dot-g,.sde-dot-a{width:11px;height:11px;border-radius:3px;display:inline-block}
.sde-dot-g{background:#EBCB6B}
.sde-dot-a{background:#3DA5D9}

/* ================= 冲击力榜单（Hero 聚光台 + 奖牌行 + 能量条） ================= */
@keyframes sde-row-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sde-sheen{0%,55%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(230%) skewX(-18deg)}}
@keyframes sde-bar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sde-crown-bob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(6deg) translateY(-2px)}}

.sde-board{display:flex;flex-direction:column;gap:8px}
/* --- 榜首 Hero --- */
.sde-hero{position:relative;overflow:hidden;border-radius:14px;padding:16px 16px 14px;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(212,175,55,.28), transparent 55%),
    linear-gradient(135deg, rgba(212,175,55,.16), rgba(17,37,74,.9) 58%);
  border:1px solid rgba(212,175,55,.55);
  box-shadow:0 14px 34px -18px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.08);
  animation:sde-row-in .45s ease both}
.sde-hero::after{content:"";position:absolute;top:0;bottom:0;width:46%;
  background:linear-gradient(105deg,transparent,rgba(255,236,180,.16) 45%,transparent 60%);
  animation:sde-sheen 3.4s ease-in-out infinite;pointer-events:none}
.sde-hero .crown{position:absolute;top:8px;right:12px;font-size:26px;opacity:.9;
  filter:drop-shadow(0 3px 8px rgba(212,175,55,.6));animation:sde-crown-bob 2.6s ease-in-out infinite;transform-origin:60% 90%}
.sde-hero .title{font-size:10.5px;font-weight:800;letter-spacing:.34em;color:var(--gold);
  text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sde-hero .title::after{content:"";flex:0 0 42px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.sde-hero .who{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sde-hero .nm{font-size:21px;font-weight:900;letter-spacing:.02em;color:var(--cream);
  text-shadow:0 2px 14px rgba(212,175,55,.35)}
.sde-hero .big{margin-left:auto;display:flex;align-items:baseline;gap:5px}
.sde-hero .big .n{font-size:42px;font-weight:900;line-height:.9;
  background:linear-gradient(180deg,#fff2c4,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;filter:drop-shadow(0 4px 14px rgba(212,175,55,.45))}
.sde-hero .big .u{font-size:12px;color:var(--gold-2);font-weight:700}
.sde-hero .sub2{margin-top:4px;font-size:12px;color:var(--muted)}
.sde-hero .sde-jersey{transform:translateY(-2px)}
/* --- 2/3 名奖牌行 + 普通行 --- */
.sde-brow{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:11px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);
  animation:sde-row-in .45s ease both;overflow:hidden}
.sde-brow:nth-child(2){animation-delay:.06s}.sde-brow:nth-child(3){animation-delay:.12s}
.sde-brow:nth-child(4){animation-delay:.18s}.sde-brow:nth-child(5){animation-delay:.24s}
.sde-brow:nth-child(6){animation-delay:.30s}.sde-brow:nth-child(7){animation-delay:.36s}
.sde-brow:nth-child(8){animation-delay:.42s}
.sde-brow.r2{background:linear-gradient(90deg,rgba(203,213,235,.10),rgba(255,255,255,.02) 62%);
  border-color:rgba(203,213,235,.30)}
.sde-brow.r3{background:linear-gradient(90deg,rgba(205,127,50,.12),rgba(255,255,255,.02) 62%);
  border-color:rgba(205,127,50,.32)}
.sde-brow.is-me{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
.sde-brow .rk{flex:0 0 26px;text-align:center;font-weight:900;font-size:15px;color:var(--muted)}
.sde-brow.r2 .rk,.sde-brow.r3 .rk{font-size:17px}
.sde-brow .nm{font-weight:700;color:var(--cream);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sde-brow .val{margin-left:auto;font-weight:900;font-size:16px;color:var(--gold-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sde-brow .val .u{font-size:11px;color:var(--muted);font-weight:600;margin-left:3px}
/* 能量条 */
.sde-brow .bar{position:absolute;left:0;bottom:0;height:2.5px;width:var(--w,0%);border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(212,175,55,.15));transform-origin:left;
  animation:sde-bar-grow .8s .25s cubic-bezier(.2,.8,.2,1) both}
.sde-brow.c-blue .bar{background:linear-gradient(90deg,var(--blue),rgba(61,165,217,.15))}
.sde-brow.c-blue .val{color:#8fd4f5}
.sde-brow.c-green .bar{background:linear-gradient(90deg,var(--green),rgba(31,169,113,.15))}
.sde-brow.c-green .val{color:#5fd7a7}
.sde-hero.c-blue{border-color:rgba(61,165,217,.55);
  background:radial-gradient(120% 150% at 100% 0%, rgba(61,165,217,.28), transparent 55%),
    linear-gradient(135deg, rgba(61,165,217,.16), rgba(17,37,74,.9) 58%);
  box-shadow:0 14px 34px -18px rgba(61,165,217,.45), inset 0 1px 0 rgba(255,255,255,.08)}
.sde-hero.c-blue .big .n{background:linear-gradient(180deg,#d9f1ff,var(--blue));-webkit-background-clip:text;background-clip:text}
.sde-hero.c-blue .title{color:var(--blue)}
.sde-hero.c-green{border-color:rgba(31,169,113,.55);
  background:radial-gradient(120% 150% at 100% 0%, rgba(31,169,113,.26), transparent 55%),
    linear-gradient(135deg, rgba(31,169,113,.15), rgba(17,37,74,.9) 58%);
  box-shadow:0 14px 34px -18px rgba(31,169,113,.45), inset 0 1px 0 rgba(255,255,255,.08)}
.sde-hero.c-green .big .n{background:linear-gradient(180deg,#c9f5e2,var(--green));-webkit-background-clip:text;background-clip:text}
.sde-hero.c-green .title{color:var(--green)}
.sde-hero.c-red{border-color:rgba(226,56,75,.55);
  background:radial-gradient(120% 150% at 100% 0%, rgba(200,16,46,.30), transparent 55%),
    linear-gradient(135deg, rgba(200,16,46,.17), rgba(17,37,74,.9) 58%);
  box-shadow:0 14px 34px -18px rgba(200,16,46,.5), inset 0 1px 0 rgba(255,255,255,.08)}
.sde-hero.c-red .big .n{background:linear-gradient(180deg,#ffd2d8,var(--red-2));-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 14px rgba(200,16,46,.5))}
.sde-hero.c-red .title{color:var(--red-2)}
.sde-hero.c-red .crown{filter:drop-shadow(0 3px 8px rgba(200,16,46,.6))}
.sde-brow.c-red .bar{background:linear-gradient(90deg,var(--red-2),rgba(200,16,46,.15))}
.sde-brow.c-red .val{color:#ff9fab}
.sde-brow.c-red.r2,.sde-brow.c-red.r3{border-color:rgba(226,56,75,.30)}
.sde-board .sde-empty{padding:18px}

/* ================= 每场比分 · 战报记分牌 ================= */
.sde-mc-list{display:flex;flex-direction:column;gap:12px}
.sde-scorecard{position:relative;overflow:hidden;border-radius:14px;padding:14px 16px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.09);animation:sde-row-in .45s ease both;
  transition:transform .18s ease, box-shadow .18s ease}
.sde-scorecard:hover{transform:translateY(-2px);box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.sde-scorecard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.sde-scorecard.res-W::before{background:linear-gradient(180deg,var(--green),rgba(31,169,113,.25))}
.sde-scorecard.res-D::before{background:linear-gradient(180deg,#6b7a99,rgba(107,122,153,.25))}
.sde-scorecard.res-L::before{background:linear-gradient(180deg,var(--red),rgba(200,16,46,.25))}
.sde-scorecard.res-W{background:
  radial-gradient(90% 130% at 0% 0%, rgba(31,169,113,.13), transparent 52%),
  linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.sde-scorecard.res-L{background:
  radial-gradient(90% 130% at 0% 0%, rgba(200,16,46,.13), transparent 52%),
  linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.sde-sc-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.sde-sc-meta .d{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sde-sc-meta .note{opacity:.8}
.sde-sc-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:10px 0 4px}
.sde-sc-side{min-width:0}
.sde-sc-side .tn{font-weight:800;font-size:15.5px;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sde-sc-side.us .tn{color:var(--gold-2)}
.sde-sc-side.them{text-align:right}
.sde-sc-score{display:flex;align-items:center;gap:10px}
.sde-sc-score .n{font-size:37px;font-weight:900;line-height:1;color:var(--cream);
  font-variant-numeric:tabular-nums;text-shadow:0 3px 16px rgba(0,0,0,.5)}
.sde-sc-score .sep{font-size:20px;color:var(--muted);font-weight:300;transform:translateY(-2px)}
.sde-scorecard.res-W .sde-sc-score .n.us{color:#6fe3b1;text-shadow:0 0 22px rgba(31,169,113,.55)}
.sde-scorecard.res-L .sde-sc-score .n.them{color:var(--red-2);text-shadow:0 0 22px rgba(200,16,46,.5)}
.sde-sc-badge{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;font-weight:900;font-size:16px;color:#fff}
.sde-sc-badge.W{background:linear-gradient(160deg,#27c584,#128757);box-shadow:0 6px 18px -6px rgba(31,169,113,.8)}
.sde-sc-badge.D{background:linear-gradient(160deg,#8494b5,#5b6b8d);box-shadow:0 6px 18px -6px rgba(107,122,153,.8)}
.sde-sc-badge.L{background:linear-gradient(160deg,#e2384b,#a30d26);box-shadow:0 6px 18px -6px rgba(200,16,46,.8)}
.sde-sc-detail{display:flex;flex-direction:column;gap:7px;margin-top:10px;padding-top:10px;
  border-top:1px dashed rgba(255,255,255,.10)}
/* 分行明细：标签列(固定宽,右对齐) + 该类芯片 */
.sde-detail-row{display:flex;align-items:flex-start;gap:10px}
.sde-dl{flex:0 0 92px;display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;
  font-size:12.5px;font-weight:800;padding-top:3px;letter-spacing:.02em;white-space:nowrap}
.sde-dl .ic{font-size:13px}
.sde-dl.mvp{color:#ffe9a8}
.sde-dl.dmvp{color:#ffc3cb}
.sde-dl.goal{color:var(--gold-2)}
.sde-dl.assist{color:#8fd4f5}
.sde-dr{display:flex;flex-wrap:wrap;gap:6px 7px;min-width:0}
@media(max-width:480px){.sde-dl{flex-basis:84px;font-size:12px}}
.sde-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 11px;
  border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--cream)}
.sde-chip .ic{font-size:12px}
.sde-chip.goal{border-color:rgba(212,175,55,.4);background:rgba(212,175,55,.10)}
.sde-chip.assist{border-color:rgba(61,165,217,.4);background:rgba(61,165,217,.10)}
.sde-chip.mvp{border-color:rgba(212,175,55,.65);background:linear-gradient(90deg,rgba(212,175,55,.22),rgba(212,175,55,.08));
  color:#ffe9a8;font-weight:800;box-shadow:0 0 14px -4px rgba(212,175,55,.7)}
.sde-chip.dmvp{border-color:rgba(226,56,75,.6);background:linear-gradient(90deg,rgba(200,16,46,.24),rgba(200,16,46,.08));
  color:#ffc3cb;font-weight:800;box-shadow:0 0 14px -4px rgba(200,16,46,.7)}

/* 比分折叠:默认展示最近 N 场,其余收进 <details> */
.sde-mc-more{display:block}
.sde-mc-more > summary.sde-more-btn{list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 14px;border-radius:12px;font-size:13px;font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px dashed rgba(212,175,55,.35);
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.sde-mc-more > summary.sde-more-btn::-webkit-details-marker{display:none}
.sde-mc-more > summary.sde-more-btn:hover{color:var(--gold-2);border-color:var(--gold);
  background:rgba(212,175,55,.07)}
.sde-more-btn .arr{transition:transform .2s ease;font-size:12px}
.sde-mc-more[open] > summary .arr{transform:rotate(180deg)}
.sde-more-btn .txt-close{display:none}
.sde-mc-more[open] > summary .txt-open{display:none}
.sde-mc-more[open] > summary .txt-close{display:inline}
.sde-mc-more > .sde-mc-list{margin-top:12px}

/* 榜单折叠：Hero+2/3名常驻，第4名起收进 <details>（复用 sde-more-btn 样式） */
.sde-board-more{display:block}
.sde-board-more > summary.sde-more-btn{margin-top:2px}
.sde-board-more-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}

/* ============ 我的主场 · 球员卡 Hero ============ */
.sde-pcard{position:relative;overflow:hidden;border-radius:18px;padding:22px 22px 18px;margin-bottom:18px;
  background:
    radial-gradient(130% 170% at 100% 0%, rgba(212,175,55,.22), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(61,165,217,.10), transparent 50%),
    linear-gradient(135deg, rgba(212,175,55,.10), rgba(17,37,74,.94) 60%);
  border:1px solid rgba(212,175,55,.5);
  box-shadow:0 20px 48px -24px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.07);
  animation:sde-row-in .5s ease both}
.sde-pcard::after{content:"";position:absolute;top:0;bottom:0;width:44%;
  background:linear-gradient(105deg,transparent,rgba(255,236,180,.10) 45%,transparent 60%);
  animation:sde-sheen 4.2s ease-in-out infinite;pointer-events:none}
.sde-pcard .wm{position:absolute;right:-8px;top:-38px;font-size:170px;font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(212,175,55,.22);pointer-events:none;
  font-variant-numeric:tabular-nums;letter-spacing:-.05em;user-select:none}
.sde-pcard .kicker{font-size:10.5px;font-weight:800;letter-spacing:.34em;color:var(--gold);
  text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.sde-pcard .kicker::after{content:"";flex:0 0 46px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.sde-pcard .nm{font-size:31px;font-weight:900;color:var(--cream);line-height:1.15;
  text-shadow:0 2px 18px rgba(212,175,55,.35)}
.sde-pcard .rl{font-size:12px;color:var(--muted);letter-spacing:.20em;margin-top:3px;text-transform:uppercase}
.sde-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;position:relative;z-index:1}
.sde-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;
  padding:3px 11px;border-radius:20px;border:1px solid rgba(212,175,55,.5);
  background:linear-gradient(90deg,rgba(212,175,55,.20),rgba(212,175,55,.06));color:#ffe9a8}
.sde-badge.b-blue{border-color:rgba(61,165,217,.5);background:linear-gradient(90deg,rgba(61,165,217,.20),rgba(61,165,217,.06));color:#bfe6fb}
.sde-badge.b-red{border-color:rgba(226,56,75,.5);background:linear-gradient(90deg,rgba(200,16,46,.22),rgba(200,16,46,.06));color:#ffc3cb}
.sde-badge.b-green{border-color:rgba(31,169,113,.5);background:linear-gradient(90deg,rgba(31,169,113,.20),rgba(31,169,113,.06));color:#a9ecd0}
.sde-quote{margin-top:15px;padding:11px 15px;border-left:3px solid var(--gold);
  background:rgba(212,175,55,.07);border-radius:0 11px 11px 0;position:relative;z-index:1}
.sde-quote .h{font-weight:900;color:var(--gold-2);font-size:14.5px;letter-spacing:.08em}
.sde-quote .b{color:var(--cream);font-size:13px;margin-top:4px;line-height:1.75;opacity:.92}
.sde-ptiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;position:relative;z-index:1}
@media(max-width:560px){.sde-ptiles{grid-template-columns:repeat(2,1fr)}.sde-pcard .wm{font-size:120px;top:-24px}}
.sde-ptile{background:rgba(10,19,37,.45);border:1px solid rgba(255,255,255,.09);
  border-radius:12px;padding:12px 10px;text-align:center;backdrop-filter:blur(2px)}
.sde-ptile .v{font-size:25px;font-weight:900;color:var(--gold-2);font-variant-numeric:tabular-nums;line-height:1}
.sde-ptile .l{font-size:11.5px;color:var(--muted);margin-top:6px;letter-spacing:.04em}
.sde-ptile .r{font-size:11px;color:var(--gold);margin-top:3px;font-weight:700}
.sde-ptile.t-blue .v{color:#8fd4f5}.sde-ptile.t-blue .r{color:var(--blue)}
.sde-ptile.t-green .v{color:#5fd7a7}.sde-ptile.t-green .r{color:var(--green)}
.sde-ptile.t-red .v{color:#ff9fab}.sde-ptile.t-red .r{color:var(--red-2)}
.sde-ptile.t-cream .v{color:var(--cream)}

/* ============ FIFA UT 式球员卡（华丽版） ============ */
@keyframes sde-fifa-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sde-halo{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.95;transform:translateX(-50%) scale(1.12)}}
.sde-fifa-wrap{display:flex;justify-content:center;margin-bottom:18px;perspective:900px}
.sde-fifa{position:relative;width:300px;padding:28px 26px 24px;text-align:center;
  clip-path:polygon(12% 0,88% 0,100% 7%,100% 86%,50% 100%,0 86%,0 7%);
  animation:sde-fifa-in .55s cubic-bezier(.2,.9,.3,1.2) both;overflow:hidden;
  transition:transform .25s ease}
.sde-fifa:hover{transform:rotateX(4deg) rotateY(-5deg) translateY(-5px) scale(1.02)}
/* 卡底渐变 + 织物噪点 + 中轴几何雕纹 */
.sde-fifa.gold{background:
  repeating-conic-gradient(from 30deg at 50% 42%, rgba(255,255,255,.07) 0 8deg, transparent 8deg 16deg),
  radial-gradient(120% 90% at 50% 0%, #fff6d0 0%, #ffe08a 26%, #f2c247 50%, #d69a2a 78%, #b07d1c 100%);
  box-shadow:0 26px 60px -20px rgba(245,196,71,.85), 0 0 34px -8px rgba(255,224,138,.55),
    inset 0 0 0 1px rgba(255,255,255,.55), inset 0 2px 14px rgba(255,255,255,.4)}
.sde-fifa.silver{background:
  repeating-conic-gradient(from 30deg at 50% 42%, rgba(255,255,255,.09) 0 8deg, transparent 8deg 16deg),
  radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #e6edf6 28%, #bcc9dc 56%, #93a2ba 86%, #7688a1 100%);
  box-shadow:0 26px 60px -20px rgba(147,162,186,.8), 0 0 30px -8px rgba(220,232,248,.6),
    inset 0 0 0 1px rgba(255,255,255,.7), inset 0 2px 14px rgba(255,255,255,.5)}
.sde-fifa.bronze{background:
  repeating-conic-gradient(from 30deg at 50% 42%, rgba(255,255,255,.07) 0 8deg, transparent 8deg 16deg),
  radial-gradient(120% 90% at 50% 0%, #ffe0b8 0%, #f5b578 26%, #e29452 50%, #c1712f 80%, #9c561f 100%);
  box-shadow:0 26px 60px -20px rgba(226,148,82,.8), 0 0 30px -8px rgba(245,181,120,.55),
    inset 0 0 0 1px rgba(255,255,255,.5), inset 0 2px 14px rgba(255,236,220,.45)}
.sde-fifa.legend{background:
  repeating-conic-gradient(from 30deg at 50% 42%, rgba(255,255,255,.09) 0 8deg, transparent 8deg 16deg),
  radial-gradient(120% 90% at 50% 0%, #f6ecff 0%, #d9b8ff 26%, #b483f5 54%, #8a54e0 82%, #6234ac 100%);
  box-shadow:0 26px 66px -18px rgba(154,108,216,.95), 0 0 40px -6px rgba(200,166,242,.7),
    inset 0 0 0 1px rgba(255,255,255,.7), inset 0 2px 16px rgba(255,255,255,.55)}
/* 双层内描边 */
.sde-fifa::before{content:"";position:absolute;inset:7px;pointer-events:none;
  clip-path:polygon(12% 0,88% 0,100% 7%,100% 86%,50% 100%,0 86%,0 7%);
  border:1px solid rgba(70,48,8,.4);box-shadow:inset 0 0 0 3px rgba(255,255,255,.14)}
/* 扫光 */
.sde-fifa::after{content:"";position:absolute;top:0;bottom:0;width:55%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.32) 48%,transparent 62%);
  animation:sde-sheen 3.8s ease-in-out infinite;pointer-events:none}
/* 顶部 tier 光冠 */
.sde-fifa .halo{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:190px;height:70px;
  background:radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,.55), transparent 70%);
  filter:blur(6px);animation:sde-halo 3.2s ease-in-out infinite;pointer-events:none}
.sde-fifa,.sde-fifa *{color:#3d2b06}
.sde-fifa.silver,.sde-fifa.silver *{color:#28303e}
.sde-fifa.bronze,.sde-fifa.bronze *{color:#3c2510}
.sde-fifa.legend,.sde-fifa.legend *{color:#2c1650}
.sde-fifa .top{display:flex;align-items:flex-start;gap:10px;text-align:left}
.sde-fifa .ovr{font-size:56px;font-weight:900;line-height:.88;letter-spacing:-.03em;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 3px 10px rgba(60,40,5,.35)}
.sde-fifa .meta{display:flex;flex-direction:column;gap:2px;padding-top:6px}
.sde-fifa .pos{font-size:17px;font-weight:900;letter-spacing:.1em}
.sde-fifa .jer{font-size:12px;font-weight:800;opacity:.75;letter-spacing:.06em}
.sde-fifa .crest-s{margin-left:auto;width:46px;height:46px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(70,48,8,.45);background:#fff;box-shadow:0 3px 10px rgba(60,40,5,.35)}
.sde-fifa .crest-s img{width:100%;height:100%;object-fit:contain}
.sde-fifa .fname{font-size:23px;font-weight:900;letter-spacing:.06em;margin-top:11px;
  padding-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:2px solid rgba(70,48,8,.4);
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.sde-fifa .grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;margin-top:12px;padding:0 8px}
.sde-fifa .st{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sde-fifa .st .n{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.sde-fifa .st .k{font-size:12px;font-weight:800;letter-spacing:.08em;opacity:.8}
.sde-fifa .club{margin-top:13px;font-size:10px;font-weight:800;letter-spacing:.3em;opacity:.7;text-transform:uppercase}
@media(max-width:400px){.sde-fifa{width:270px}}

/* ---- 主页 · 全队球员卡墙 ---- */
.sde-fifa-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:16px;justify-items:center}
.sde-fifa-wall .sde-fifa{width:228px;padding:20px 18px 16px}
.sde-fifa-wall > :nth-child(2) .sde-fifa{animation-delay:.05s}
.sde-fifa-wall > :nth-child(3) .sde-fifa{animation-delay:.1s}
.sde-fifa-wall > :nth-child(4) .sde-fifa{animation-delay:.15s}
.sde-fifa-wall > :nth-child(n+5) .sde-fifa{animation-delay:.2s}
.sde-fifa-wall .ovr{font-size:42px}
.sde-fifa-wall .fname{font-size:18px;margin-top:8px;padding-bottom:8px}
.sde-fifa-wall .pos{font-size:14px}
.sde-fifa-wall .crest-s{width:36px;height:36px}
.sde-fifa-wall .grid{gap:2px 14px;margin-top:9px;padding:0 4px}
.sde-fifa-wall .st .n{font-size:15px}
.sde-fifa-wall .st .k{font-size:10.5px}
.sde-fifa-wall .club{margin-top:10px;font-size:8.5px}
.sde-fifa-wall .halo{width:140px;height:52px;top:-26px}
.sde-fifa.is-me-card{outline:0}
.sde-fifa.is-me-card .fname::after{content:" ★";font-size:15px}

/* ---- 💎 钻石球星卡（专属皮肤·仅个人页本人可见·纯外观不碰评分） ---- */
@keyframes sde-dia-hue{to{filter:hue-rotate(360deg)}}
@keyframes sde-dia-holo{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes sde-dia-glow{
  0%,100%{box-shadow:0 26px 66px -18px rgba(0,180,220,.7),0 0 40px -6px rgba(60,220,255,.55),
    inset 0 0 0 1px rgba(180,240,255,.35),inset 0 2px 22px rgba(80,200,255,.18)}
  50%{box-shadow:0 26px 74px -14px rgba(0,220,255,.92),0 0 62px -2px rgba(120,240,255,.82),
    inset 0 0 0 1px rgba(200,250,255,.6),inset 0 2px 26px rgba(120,230,255,.32)}}
/* 深黑曜石底 + 冰蓝/四色全息流光 + 几何雕纹 */
.sde-fifa.diamond{
  background:
    repeating-linear-gradient(115deg, rgba(0,245,212,.12) 0px, rgba(51,224,255,.10) 12px,
      rgba(123,97,255,.10) 24px, rgba(255,46,151,.08) 36px, transparent 36px, transparent 72px),
    repeating-conic-gradient(from 30deg at 50% 42%, rgba(180,240,255,.06) 0 8deg, transparent 8deg 16deg),
    radial-gradient(120% 95% at 50% 0%, #16324e 0%, #0e2036 34%, #0a1526 64%, #060b16 100%);
  background-size:220% 220%, auto, auto;
  animation:sde-fifa-in .55s cubic-bezier(.2,.9,.3,1.2) both,
    sde-dia-holo 7s ease-in-out infinite, sde-dia-glow 3.6s ease-in-out infinite}
.sde-fifa.diamond,.sde-fifa.diamond *{color:#eafaff}
/* 流动的四色钻石切面镶边（沿用卡片六边形轮廓） */
.sde-fifa.diamond::before{
  inset:0;padding:2px;border:none;box-shadow:none;
  background:conic-gradient(from 0deg,#00f5d4,#33e0ff,#7b61ff,#ff2e97,#ffd166,#00f5d4);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:sde-dia-hue 6s linear infinite;opacity:.95}
/* 更亮更宽的棱镜白光扫过 */
.sde-fifa.diamond::after{
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 47%,
    rgba(180,240,255,.35) 52%,transparent 66%)}
/* 冰蓝光冠 */
.sde-fifa.diamond .halo{
  background:radial-gradient(50% 100% at 50% 100%, rgba(120,240,255,.7), transparent 72%)}
/* 深底下的描边/分割线/高光改冰蓝 */
.sde-fifa.diamond .fname{border-bottom-color:rgba(130,225,255,.5);
  text-shadow:0 0 10px rgba(0,230,255,.45)}
.sde-fifa.diamond .ovr{text-shadow:0 0 14px rgba(90,230,255,.62)}
.sde-fifa.diamond .st .n{text-shadow:0 0 8px rgba(0,245,212,.45)}
.sde-fifa.diamond .crest-s{border-color:rgba(150,235,255,.65);background:rgba(255,255,255,.92);
  box-shadow:0 0 12px rgba(80,220,255,.5)}
/* 位置角标点亮钻石标识 */
.sde-fifa.diamond .pos::after{content:" 💎";font-size:13px}
/* 背面同款冰蓝配色 */
.sde-fifa.diamond .bname{border-bottom-color:rgba(130,225,255,.5)}
.sde-fifa.diamond .bst{background:rgba(120,220,255,.12);border-color:rgba(150,235,255,.3)}
.sde-fifa.diamond .bquote{background:rgba(120,220,255,.10);border-left-color:rgba(150,235,255,.6)}

/* ---- 球星卡 3D 翻面（checkbox+label,零 JS） ---- */
.sde-flip-box{position:relative;width:100%;display:flex;justify-content:center}
.sde-flip-cb{position:absolute;opacity:0;pointer-events:none}
.sde-flip{display:block;cursor:pointer;perspective:1100px;-webkit-tap-highlight-color:transparent}
.sde-flipper{position:relative;transition:transform .62s cubic-bezier(.35,.9,.3,1.05);
  transform-style:preserve-3d}
.sde-flip-cb:checked + .sde-flip .sde-flipper{transform:rotateY(180deg)}
.sde-flipper .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sde-flipper .face.back{position:absolute;inset:0;transform:rotateY(180deg);
  display:flex;justify-content:center}
.sde-flipper .face.back .sde-fifa{height:100%;display:flex;flex-direction:column}
/* 翻面时停掉正面 hover 倾斜,避免和翻转打架 */
.sde-flip .sde-fifa:hover{transform:none}
.sde-flip:hover .sde-flipper{transform:rotateY(-6deg)}
.sde-flip-cb:checked + .sde-flip:hover .sde-flipper{transform:rotateY(186deg)}
/* 正/背面的翻面提示 */
.sde-fifa .fflip,.sde-fifa .bflip{margin-top:9px;font-size:10px;font-weight:800;
  letter-spacing:.14em;opacity:.55;text-transform:uppercase}
/* ---- 背面内容 ---- */
.sde-fifa-back{text-align:center;justify-content:flex-start}
.sde-fifa-back .bname{font-size:20px;font-weight:900;letter-spacing:.05em;margin-top:2px;
  padding-bottom:8px;border-bottom:2px solid rgba(70,48,8,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.sde-fifa-back .bapps{font-size:11.5px;font-weight:800;opacity:.75;margin-top:7px;letter-spacing:.08em}
.sde-fifa-back .bgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:10px;padding:0 4px}
.sde-fifa-back .bst{display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:rgba(255,255,255,.22);border:1px solid rgba(70,48,8,.25);
  border-radius:9px;padding:6px 9px}
.sde-fifa-back .bk{font-size:11px;font-weight:800;opacity:.85;white-space:nowrap}
.sde-fifa-back .bn{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.sde-fifa-back .bquote{margin-top:10px;padding:8px 11px;text-align:left;
  background:rgba(255,255,255,.20);border-left:3px solid rgba(70,48,8,.45);border-radius:0 9px 9px 0}
.sde-fifa-back .qt{font-size:12.5px;font-weight:900;letter-spacing:.04em}
.sde-fifa-back .qb{font-size:11px;line-height:1.65;margin-top:3px;opacity:.88}
.sde-fifa-back .bflip{margin-top:auto;padding-top:8px}
/* 卡墙内背面字号微调 */
.sde-fifa-wall .sde-fifa-back .bname{font-size:16.5px}
.sde-fifa-wall .sde-fifa-back .bn{font-size:15px}
.sde-fifa-wall .sde-fifa-back .qb{font-size:10.5px}
@media(max-width:560px){
  .sde-sc-score .n{font-size:30px}
  .sde-hero .big .n{font-size:34px}
  .sde-hero .nm{font-size:18px}
}

/* ---------- 赛季筛选条 ---------- */
.sde-season-bar{display:flex;justify-content:flex-end;align-items:flex-end;gap:12px;margin:-2px 0 4px}
.sde-season-bar .shiny-input-container{width:auto;min-width:150px;margin-bottom:8px}
.sde-season-bar label{color:var(--muted);font-size:12px;margin-bottom:3px}
.sde-season-bar .btn{margin-bottom:8px;white-space:nowrap}

/* ---------- 比赛卡片：主页比分明细 + 我的逐场登记（天生响应式，手机不溢出） ---------- */
.sde-mc-list{display:flex;flex-direction:column;gap:10px}
.sde-mc{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:11px 14px}
.sde-mc-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sde-mc-date{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;min-width:74px}
.sde-mc-opp{font-weight:700;color:var(--cream)}
.sde-mc-note{color:var(--muted);font-size:12px;opacity:.8}
.sde-mc-score{font-weight:800;font-size:16px;color:var(--gold-2);
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sde-mc-detail{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:9px;padding-top:9px;
  border-top:1px dashed rgba(255,255,255,.10);font-size:13px}
.sde-mc-detail .lbl-goal{color:var(--gold-2);font-weight:700}
.sde-mc-detail .lbl-assist{color:var(--blue);font-weight:700}
.sde-mc-detail .nm{color:var(--cream)}
/* 逐场登记控件：出勤 / 进球 / 助攻，超窄屏自动换行 */
.sde-ctl-row{display:flex;gap:14px 22px;flex-wrap:wrap;align-items:center;margin-top:11px}
.sde-ctl{display:flex;align-items:center;gap:9px}
.sde-ctl-l{font-size:13px;color:var(--muted);font-weight:600}
.sde-mc-form .shiny-input-container{margin-bottom:0}
.sde-mc-form .form-control{padding:5px 8px;text-align:center}
.sde-foot{color:var(--muted);text-align:center;font-size:12px;margin-top:30px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08)}
"""


def crest(size: int = 52) -> ui.Tag:
    """队徽圆形徽章。"""
    return ui.div(
        ui.img(src=CREST_URL, alt="肆带贰队徽"),
        class_="sde-crest",
        style=f"width:{size}px;height:{size}px",
    )


def result_badge(r: str) -> ui.Tag:
    return ui.span(r, class_=f"badge-res badge-{r}")


def ha_pill(home_away: str) -> ui.Tag:
    is_home = home_away == "home"
    return ui.span("主" if is_home else "客", class_="ha-pill " + ("ha-home" if is_home else ""))


def card(title: str, *body, icon: str = "", sub: str = "") -> ui.Tag:
    head = ui.div(
        (ui.span(icon, class_="ic") if icon else None),
        ui.span(title, class_="t"),
        class_="sde-card-h",
    )
    sub_el = ui.div(sub, class_="sde-sub") if sub else None
    return ui.div(head, sub_el, *body, class_="sde-card")


def stat(value, label: str, sub: str = "", accent: str = "gold") -> ui.Tag:
    return ui.div(
        ui.div(str(value), class_="v"),
        ui.div(label, class_="l"),
        (ui.div(sub, class_="s") if sub else None),
        class_=f"sde-stat accent-{accent}",
    )