/* ==========================================================================
   復健科診所物語 — UI extras (S-D). Builds on css/style.css tokens & classes.
   ========================================================================== */

:root { --u-title-h: 46px; --u-good-bg: #d6f0da; --u-bad-bg: #f8d9dd; }

/* ---------- panel shell -------------------------------------------------- */
@media (min-width: 1101px) {
  #stage[data-panel="operate"] #panel,
  #stage[data-panel="overview"] #panel,
  #stage[data-panel="clinic"] #panel { width: min(620px, 92vw, calc(100% - var(--sidebar-w) - 40px)); }
}
/* build panel stays slim so the lot remains visible while placing */
@media (min-width: 1101px) {
  #stage[data-panel="build"] #panel { width: min(440px, 92vw, calc(100% - var(--sidebar-w) - 40px)); }
  #stage[data-panel="build"] .u-buildgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* toasts sit above the speed bar on the right so they never cover the open panel */
#toast-layer { left: auto; right: 12px; bottom: 68px; transform: none; align-items: flex-end; width: min(420px, calc(100% - 32px)); }
/* narrow stage: keep part of the map visible while a panel is open (placing buildings needs it) */
@media (max-width: 1100px) {
  #stage #panel { width: min(440px, 46%, calc(100% - var(--sidebar-w) - 150px)); }
}

.u-panelbody { min-height: 120px; }
.u-tabbed > .tabs {
  position: sticky; top: var(--u-title-h); z-index: 1;
  margin-top: -4px; padding-top: 6px; background: var(--cream);
}
.u-tabbody { min-width: 0; }
.tabs.u-subtabs { position: static; margin: 0 0 10px; padding-top: 0; }
.tabs.u-subtabs .tab { font-size: 13px; padding: 4px 10px 6px; }
.tabs.u-subtabs .tab.active { padding-bottom: 9px; }
.u-p { margin: 6px 0 10px; line-height: 1.6; }
.u-small { font-size: 12px; line-height: 1.5; }
.u-grow { flex: 1 1 0; min-width: 0; }
.u-row2 { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.u-between { justify-content: space-between; }
.u-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.u-list2 { display: flex; flex-direction: column; gap: 8px; margin: 4px 2px 12px; }
.u-section { margin-bottom: 14px; }
.u-sec {
  margin: 14px 0 6px; padding: 0 0 3px; font-weight: 900; font-size: 14px;
  border-bottom: 2px solid var(--ink);
}
.u-section:first-child .u-sec { margin-top: 2px; }
.u-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag.u-chip.good { background: var(--u-good-bg); color: #1d5c2a; box-shadow: 0 0 0 2px #1d5c2a; font-weight: 700; }
.tag.u-chip.bad { background: var(--u-bad-bg); color: #8f2a38; box-shadow: 0 0 0 2px #8f2a38; font-weight: 700; }
.u-tag2 { margin-left: 6px; }
.u-sico { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.u-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 12px; margin: 6px 0; }
.u-cmp { display: flex; flex-direction: column; font-size: 13px; }
.u-check { display: flex; align-items: center; gap: 8px; padding: 3px 6px; font-size: 13px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.u-check.good, .u-check.bad { font-weight: 700; }
.u-input, .u-ta {
  border: 0; border-radius: 0; background: #fff; padding: 6px 8px; min-width: 0;
  box-shadow: 0 0 0 2px var(--ink), inset 0 2px 0 0 var(--shade);
}
.u-input { flex: 1 1 140px; }
.u-ta { width: 100%; margin: 6px 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; resize: vertical; }
.u-setting, .u-check2 { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-weight: 700; cursor: pointer; }
.u-check2 { margin: 0; }
.u-setting input[type="checkbox"], .u-check2 input { width: 18px; height: 18px; accent-color: var(--teal); }
.u-bigtitle { font-size: 20px; font-weight: 900; margin: 4px 0 8px; }

/* ---------- build panel --------------------------------------------------- */
.u-toolbar { margin: 0 0 10px; }
.u-toolbar .btn.small { margin-bottom: 4px; }
.u-toolstatus { padding: 4px 8px; margin: 2px 0 4px; font-size: 13px; font-weight: 700; background: #fff1cf; box-shadow: inset 0 0 0 2px var(--wood); }
.u-hint2 { font-size: 12px; }
.u-buildgrid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; padding: 4px 2px 8px; }
.u-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 8px 6px 8px; }
.u-item .u-glyph {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: 0 0 0 2px var(--ink), inset 0 -4px 0 0 rgba(0, 0, 0, 0.22); margin-bottom: 4px;
}
.u-item .u-iname { font-weight: 900; font-size: 14px; line-height: 1.25; }
.u-item .u-cost { font-weight: 700; font-size: 13px; color: var(--teal-dark); }
.u-item .u-cost.bad { color: var(--bad); }
.u-item .u-sub { font-size: 11px; line-height: 1.3; }
.u-item .u-req { font-size: 11px; color: var(--bad); font-weight: 700; line-height: 1.3; }
.u-item .u-req[hidden] { display: none; }

/* ---------- operate -------------------------------------------------------- */
.u-curres { margin-bottom: 8px; background: #e3f3ee; }
.u-curres .bar { margin-top: 6px; }
.u-pts { margin: 6px 0 4px; }
.u-node { padding: 8px 10px; }
.u-node.u-done { opacity: 0.72; }
.u-effs { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.u-eff { color: var(--teal-dark); font-weight: 700; }
.u-pcost { font-weight: 900; font-size: 15px; white-space: nowrap; }
.badge.u-b-done { background: #b7e1c0; }
.badge.u-b-cur { background: var(--teal); color: #fff; }
.badge.u-b-lock { background: #cfc6b3; color: #6b6354; }
/* ---- 持續精進 (upgrade lines) ---- */
:root { --u-tabs-h: 38px; }
.u-pts-sticky {
  position: sticky; top: calc(var(--u-title-h) + var(--u-tabs-h)); z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 0 6px; background: var(--cream);
}
.u-pts-sticky .u-ptchip { font-size: 13px; padding: 1px 8px; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--pc, var(--ink)); }
.u-pts-sticky .u-ptchip b { font-variant-numeric: tabular-nums; }
.u-upg-jump { display: block; width: 100%; margin: 0 0 6px; white-space: normal; text-align: center; }
.u-upg-jump[hidden], .u-upg[hidden] { display: none; }
.u-upg-jump.btn { min-height: 34px; }
.u-tree { min-width: 0; }
.u-upg { margin-top: 6px; scroll-margin-top: calc(var(--u-title-h) + var(--u-tabs-h) + 48px); }
.u-upg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.u-upg-head .u-upg-sum { margin-left: auto; font-size: 12px; }
.u-upg-intro { margin: 0 0 6px; }
.u-upg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 4px 2px 12px; }
.u-upg-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; min-width: 0; overflow: hidden; }
.u-upg-card.locked { opacity: 0.62; }
.u-upg-card.u-done { box-shadow: 0 0 0 2px var(--gold, #e8b83a); }
.u-upg-ico { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.u-upg-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.u-upg-dom { font-size: 11px; padding: 0 6px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px var(--pc, var(--ink)); }
.u-upg-info { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: help; font-size: 15px; margin: -4px -6px 0 0; }
.u-upg-lvrow { display: flex; align-items: center; gap: 8px; }
.u-upg-lvrow .bar { flex: 1 1 auto; height: 10px; }
.u-upg-lv { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }
.u-upg-eff { font-size: 13px; line-height: 1.5; font-weight: 700; }
.u-upg-now { color: var(--ink); }
.u-upg-next { color: var(--teal-dark); }
.u-upg-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.tag.u-upg-cost { font-size: 14px; font-weight: 900; padding: 1px 10px; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--pc, var(--ink)); }
.tag.u-upg-cost.lack { color: var(--bad); background: #fdf0f1; }
.tag.u-upg-cost.done { color: var(--muted); }
.u-upg-why { color: var(--bad); font-weight: 700; }
.u-upg-why[hidden] { display: none; }
.u-upg-flash { animation: u-upg-pop 0.8s ease-out 1; }
@keyframes u-upg-pop { 0% { transform: scale(1); } 20% { transform: scale(1.025); background: #fff6cf; } 100% { transform: scale(1); } }
.u-upg-spark { position: absolute; right: 12px; top: 8px; font-size: 20px; pointer-events: none; animation: u-upg-spark 0.9s ease-out 1 forwards; }
@keyframes u-upg-spark { 0% { opacity: 0; transform: translateY(6px) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(1.3) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .u-upg-flash, .u-upg-spark { animation: none; } }
html.style-concept .u-pts-sticky { background: var(--cream); }
html.style-concept .u-pts-sticky .u-ptchip { box-shadow: 0 0 0 1.5px var(--pc, var(--c-navy)); background: #fff; color: var(--c-ink); }
html.style-concept .u-upg-dom, html.style-concept .tag.u-upg-cost { box-shadow: 0 0 0 1.5px var(--pc, var(--c-navy)); }
html.style-concept .tag.u-upg-cost.lack { background: #fbe0e5; color: #8f2a38; }
html.style-concept .u-upg-card.u-done { box-shadow: 0 0 0 2px #e0a92a; }

.u-price .u-slide { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.u-price .u-slide input[type="range"] { flex: 1 1 auto; min-width: 80px; }
.u-price .u-slide b { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.u-price .stat .bar { height: 12px; margin-top: 4px; }

/* ---------- overview ------------------------------------------------------- */
.u-prow, .u-srow2 { padding: 8px 10px; }
.u-prow .u-bars3, .u-srow2 .u-bars3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
.u-bl { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); font-weight: 700; min-width: 0; }
.u-bl .bar { flex: 1 1 auto; height: 8px; min-width: 24px; }
.u-num { font-style: normal; font-weight: 900; color: var(--ink); min-width: 1.2em; text-align: right; }
.u-efrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.u-steps { display: flex; flex-wrap: wrap; gap: 3px; }
.u-step { padding: 0 5px; font-size: 11px; background: #efe4c9; color: var(--muted); font-weight: 700; box-shadow: 0 0 0 1px var(--line); }
.u-step.done { background: #cfe9d4; color: #2f6b3c; }
.u-step.cur { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.u-eq td { padding: 4px 6px; font-size: 13px; }
.u-eq .u-wearcell { width: 84px; }
.u-eq .bar { height: 9px; }
.u-eq tbody tr { cursor: pointer; }
.u-eq tbody tr.u-sel { background: #ffe9b8 !important; }
.u-need { font-size: 12px; }
.u-need::before { content: attr(data-mark) " "; font-weight: 900; }
.u-need.have { background: var(--u-good-bg); color: #1d5c2a; box-shadow: 0 0 0 2px #1d5c2a; }
.u-need.lack { background: #ece4d0; color: var(--muted); box-shadow: 0 0 0 2px var(--wood); }
.u-syn { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }

/* ---------- map ------------------------------------------------------------- */
.u-canvaswrap { margin: 6px 0; line-height: 0; }
.u-minimap { width: auto; max-width: 100%; margin: 0 auto; }
.u-minimap, .u-chart { display: block; width: 100%; max-height: 44vh; height: auto; box-shadow: 0 0 0 2px var(--ink); background: #8a9296; image-rendering: pixelated; }
.u-chart { height: 240px; max-height: none; background: var(--paper); image-rendering: auto; }
.u-mapinfo { min-height: 18px; margin: 4px 0 8px; }
.u-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; margin-left: auto; color: var(--muted); }
.u-legend i { width: 60px; height: 8px; background: linear-gradient(90deg, rgba(231,60,40,0.1), rgba(231,60,40,0.9)); box-shadow: 0 0 0 1px var(--ink); }
.u-hotgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 2px 8px; }
.u-hot { padding: 6px 10px; font-size: 13px; }
.u-hot .bar { margin: 4px 0; height: 12px; }

/* ---------- selection card + hint ------------------------------------------ */
.u-selcard {
  position: absolute; right: 12px; bottom: 70px; width: 252px; max-width: calc(100% - 24px); z-index: 6;
  padding: 10px 12px; background: var(--paper); color: var(--ink); font-size: 13px;
  box-shadow: var(--outline), 0 calc(4 * var(--px)) 0 0 rgba(0, 0, 0, 0.25);
}
.u-selcard[hidden] { display: none; }
.u-selclose {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--muted); font-size: 14px; font-weight: 900; cursor: pointer;
}
.u-selclose:hover { color: var(--bad); }
.u-selbody { display: flex; flex-direction: column; gap: 5px; }
.u-shead { display: flex; align-items: center; gap: 8px; padding-right: 18px; }
.u-stitle { display: flex; flex-direction: column; flex: 1 1 auto; line-height: 1.25; min-width: 0; }
.u-srow { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 6px; font-size: 12px; }
.u-srow .bar { height: 10px; }
.u-bubble { padding: 4px 8px; background: #fff; box-shadow: 0 0 0 2px var(--ink); font-size: 12px; font-weight: 700; }
.u-bubble[hidden] { display: none; }

.u-hint {
  position: absolute; top: 8px; right: 12px; max-width: min(440px, 38%); z-index: 4;
  padding: 3px 10px; font-size: 12px; line-height: 1.45; color: var(--text-light);
  background: rgba(20, 36, 41, 0.72); pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.u-hint:empty { display: none; }
.u-hint[hidden] { display: none; }

.tb-item.u-neg .tb-val { color: #ff9aa5; }
.tb-item.u-bad .tb-val { color: #ff9aa5; }
.tb-clinic .tb-val { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1500px) { .tb-clinic { display: none; } }

/* ---------- modals ------------------------------------------------------------ */
.modal.u-wide { width: min(640px, 100%); }
.u-report { display: flex; flex-direction: column; gap: 10px; }
.u-stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; padding: 6px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.u-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.u-two .u-sec { margin-top: 0; }
.u-kvrow { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.u-kvrow.u-total { margin-top: 4px; padding-top: 4px; border-top: 2px solid var(--ink); font-weight: 900; }
.u-note { padding: 8px 12px; background: #e3f3ee; box-shadow: inset 0 0 0 2px var(--teal); font-size: 13px; line-height: 1.6; }
.u-note p { margin: 4px 0; }
.u-note.bad-note { background: #fbe6e8; box-shadow: inset 0 0 0 2px var(--bad); }
.u-verdict { font-size: 22px; font-weight: 900; margin: 0 0 10px; }
.u-list { margin: 4px 0 0; padding-left: 20px; line-height: 1.7; }
.u-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.btn.u-choice { justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.4; padding: 9px 12px; }
.u-intro-head { font-weight: 900; color: var(--teal-dark); margin-bottom: 6px; }
.u-intro-text { font-size: 16px; min-height: 5.5em; }
.u-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.u-dots i { width: 10px; height: 10px; background: #d9cfbb; box-shadow: 0 0 0 2px var(--ink); }
.u-dots i.on { background: var(--accent); }
.u-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.u-keyrow { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.u-keyrow .kbd { min-width: 4.4em; }

/* ---------- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .tb-clinic .tb-val { max-width: 90px; }
  .u-two { gap: 10px; }
}
@media (max-width: 1000px) {
  #speedbar .speed-btn { min-width: 38px; padding: 0 7px; }
  .u-skip-lbl { display: none; }
}
@media (max-width: 900px) {
  .u-hint { display: none; }
  .tb-clinic { display: none; }
}
@media (max-height: 600px) {
  :root { --u-title-h: 40px; }
  .u-art[data-art="off"] > .u-art-fb.u-art-glyphfb { width: 32px; height: 32px; font-size: 18px; }
  .u-item .u-art { --aw: 44px !important; --ah: 38px !important; }
  .u-selcard { bottom: 58px; padding: 8px 10px; width: 232px; }
  .u-item { padding: 5px 4px; }
  .u-item .u-glyph { width: 32px; height: 32px; font-size: 18px; margin-bottom: 2px; }
  .u-buildgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .u-minimap { max-height: 44vh; }
  .u-chart { height: 190px; }
  .u-intro-text { min-height: 4.5em; font-size: 15px; }
  .u-stats3 { padding: 3px; }
}
@media (max-width: 640px) {
  .u-two { grid-template-columns: 1fr; }
  .u-keys { grid-template-columns: 1fr; }
}

/* ---------- achievements: 稱號與徽章 (診所 panel) + topbar title ---------- */
.tb-title .tb-val { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tb-item[hidden] { display: none; }
@media (max-width: 1100px) { .tb-title .tb-val { max-width: 130px; } }
.u-repdet { margin-top: 6px; }
.u-repdet summary { cursor: pointer; padding: 2px 0; }
.u-repdet .u-list2 { margin-top: 6px; }
.u-achsum { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 8px; font-size: 14px; }
.u-achcount { font-size: 17px; }
.u-signicons { font-size: 17px; letter-spacing: 2px; }
.u-achnote { padding: 4px 8px; margin-bottom: 6px; background: #fff1cf; box-shadow: inset 0 0 0 2px var(--wood); font-weight: 700; }
.u-achnote[hidden] { display: none; }
.tabs.u-achtabs { gap: 3px; }
.tabs.u-achtabs .tab { font-size: 12px; padding: 4px 8px 6px; }
.tabs.u-achtabs .tab.active { padding-bottom: 9px; }
.u-achlist { display: flex; flex-direction: column; gap: 8px; margin: 2px 2px 12px; }
.u-ach { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; }
.u-ach[hidden] { display: none; }
.u-achico {
  flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; background: #fff; box-shadow: 0 0 0 2px var(--ink), inset 0 -4px 0 0 rgba(0, 0, 0, 0.14);
}
.u-ach.u-locked .u-achico { filter: grayscale(1); opacity: 0.55; background: #e4dcc8; }
.u-ach.u-locked .u-achname { color: var(--muted); }
.u-ach.u-masked .u-achico { opacity: 0.8; }
.u-achmain { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.u-achhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.u-achname { font-size: 14px; }
.u-achdesc { line-height: 1.45; }
.u-achprog { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.u-achprog[hidden], .u-achwhen[hidden], .u-achbtns .btn[hidden] { display: none; }
.u-achprog .bar { flex: 1 1 auto; height: 9px; min-width: 40px; }
.u-achptxt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-achbtns { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.u-achbtns:empty { display: none; }
.u-achbtns .btn { white-space: nowrap; }
.u-achbtns .btn.u-dim { opacity: 0.55; }
.tag.u-tier1 { background: #efd3b4; color: #6b3f16; box-shadow: 0 0 0 2px #8a5a2b; }
.tag.u-tier2 { background: #e6eaee; color: #3d4852; box-shadow: 0 0 0 2px #7d8892; }
.tag.u-tier3 { background: #ffe9a6; color: #6b4f00; box-shadow: 0 0 0 2px #c79a1a; }
.tag.u-titlechip { background: #e8e0f7; color: #4b3a7a; box-shadow: 0 0 0 2px #7a66b0; }
.tag.u-titlechip[hidden] { display: none; }
@media (max-height: 600px) {
  .u-ach { padding: 6px 8px; gap: 8px; }
  .u-achico { width: 32px; height: 32px; font-size: 18px; }
}
@media (max-width: 520px) {
  .u-ach { flex-wrap: wrap; }
  .u-achbtns { flex-direction: row; width: 100%; }
}
.u-curtitle { margin: 0 0 6px; }
.u-curtitle + .bar { height: 10px; }
.u-achsum { margin-top: 8px; }
.tb-item.tb-title { min-width: 0; flex: 0 1 auto; }
.tb-item.tb-title .tb-val { max-width: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 600px) {
  .u-curtitle { font-size: 16px; margin-bottom: 4px; }
  .u-repdet { display: none; }
  .u-achsum { margin: 4px 0 6px; gap: 2px; }
}

/* ---------- events ext: choice notes, 營運狀態列, 設備維護 (wear / repair / contract), 士氣 ----------------------- */
.btn.u-choice { flex-wrap: wrap; }
.u-choice-main { flex: 1 1 0; min-width: 0; }
.u-choice-note { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 4px; padding-left: 28px; }
.tag.u-odds { background: #e8e0f7; color: #4b3a7a; box-shadow: 0 0 0 2px #7a66b0; }
.tag.u-costnote { background: #efe4c9; color: var(--ink); box-shadow: 0 0 0 2px var(--wood); }
.tag.u-costnote.lack { background: var(--u-bad-bg); color: #8f2a38; box-shadow: 0 0 0 2px #8f2a38; }
.btn.u-choice.u-poor, .btn.u-choice[disabled] { opacity: .6; }
.u-status { padding: 6px 10px; margin-bottom: 8px; }
.u-st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.u-st-title { font-weight: 800; }
.u-st-risk { gap: 5px; }
.u-st-risk .bar { width: 56px; flex: 0 0 56px; height: 8px; }
.tag.u-st-review.good { background: var(--u-good-bg); color: #1d5c2a; }
.tag.u-st-review.bad { background: var(--u-bad-bg); color: #8f2a38; }
.u-st-eff { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 5px; }
.u-st-eff[hidden] { display: none; }
.u-st-lab { font-size: 11px; color: var(--muted); font-weight: 700; }
.u-srow2 .u-bars3.u-bars4 { grid-template-columns: repeat(2, 1fr); }
.tag.u-mood { background: var(--u-bad-bg); color: #8f2a38; box-shadow: 0 0 0 2px #8f2a38; }
.tag.u-mood[hidden] { display: none; }
.u-eqsum { margin: 4px 0; font-size: 13px; }
.warn-text { color: #8a5a00; }
.u-contract { padding: 8px 10px; margin: 6px 0; }
.u-contract-btns { margin-top: 6px; gap: 6px; flex-wrap: nowrap; }
.u-contract-btns .btn { margin: 0; flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.lay-mobile .u-contract { padding: 6px 8px; margin: 4px 0; }
.lay-mobile .u-contract .u-sico { display: none; }
.u-eqname { font-weight: 700; }
.u-eqbadges { display: inline-flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; vertical-align: middle; }
.tag.u-eqb.bad { background: var(--u-bad-bg); color: #8f2a38; box-shadow: 0 0 0 2px #8f2a38; }
.tag.u-eqb.warn { background: #fff0c4; color: #7a5200; box-shadow: 0 0 0 2px #b88a1a; }
.tag.u-eqb.good { background: var(--u-good-bg); color: #1d5c2a; box-shadow: 0 0 0 2px #1d5c2a; }
.u-eq .u-wearcell { width: 96px; }
.u-wearin { display: flex; align-items: center; gap: 4px; }
.u-wearin .bar { flex: 1 1 auto; min-width: 36px; }
.u-wearin[hidden] { display: none; }
.u-eq tbody tr.u-broken { background: #fbe6e8; }
.u-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.u-acts .btn { margin: 0; }
.u-acts .btn[hidden] { display: none; }
@media (max-width: 520px) { .u-eq .u-poscol, .u-eq .u-upcol { display: none; } }
.lay-mobile .u-eq .u-poscol, .lay-mobile .u-eq .u-upcol { display: none; }
.lay-mobile .u-eq .u-wearcell { width: 74px; }
.lay-mobile .u-acts { flex-wrap: nowrap; gap: 3px; }
.lay-mobile .u-acts .btn { padding-left: 7px; padding-right: 7px; white-space: nowrap; }
.lay-mobile .u-eqbadges { display: flex; margin: 2px 0 0; }

/* ---------- concept-art sprites (js/ui/artdom.js) ---------------------------------------------------------------- */
/* .u-art: fixed --aw x --ah box (reserved even while the atlas loads); the <i> is the sprite fitted inside it,
   all scaling done with calc() on the sprite's atlas rect (--sx --sy --sw --sh) so media queries can resize the box. */
.u-art { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; vertical-align: middle;
  width: var(--aw, 32px); height: var(--ah, 32px); position: relative; line-height: 1; }
.u-art[hidden] { display: none; }
.u-art > i {
  --iw: min(var(--aw), calc(var(--ah) * var(--sw, 1) / var(--sh, 1)));
  --ih: min(var(--ah), calc(var(--aw) * var(--sh, 1) / var(--sw, 1)));
  display: block; width: var(--iw); height: var(--ih);
  background-image: var(--art-url); background-repeat: no-repeat;
  background-size: calc(var(--iw) * var(--AW, 1024) / var(--sw, 1)) calc(var(--ih) * var(--AH, 1024) / var(--sh, 1));
  background-position: calc(var(--iw) * var(--sx, 0) / var(--sw, 1) * -1) calc(var(--ih) * var(--sy, 0) / var(--sh, 1) * -1);
  image-rendering: auto; pointer-events: none;
}
.u-art[data-art="wait"] > i, .u-art[data-art="off"] > i, .u-art[data-art="none"] > i { display: none; }
.u-art[data-art="wait"] { visibility: hidden; }
.u-art > .u-art-fb { display: none; font-weight: inherit; font-size: var(--fbs, calc(var(--ah) * 0.58)); }
.u-art[data-art="off"] > .u-art-fb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.u-art.u-art-tile > i { border-radius: 8px; }
.u-art.u-art-ring { box-shadow: 0 0 0 2px var(--ink); background: #dcebfb; }
.u-art.u-art-ring[data-art="off"] { background: var(--paper); box-shadow: none; }
.u-art.u-art-ico > i { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25)); }
.u-art.u-art-inline { margin: 0 4px 0 0; vertical-align: -0.35em; }
.u-art[data-art="off"] > .u-art-fb.u-art-glyphfb { width: 40px; height: 40px; font-size: 22px; box-shadow: 0 0 0 2px var(--ink), inset 0 -4px 0 0 rgba(0, 0, 0, 0.22); }
.u-eqart { display: inline-flex; align-items: center; gap: 6px; }
.u-art-pair { display: inline-flex; align-items: flex-end; gap: 4px; flex: 0 0 auto; }

.u-banner { display: block; width: min(100%, calc(var(--bn-vh, 36dvh) * var(--bw, 401) / var(--bh, 194))); aspect-ratio: calc(var(--bw, 401) / var(--bh, 194));
  margin: 0 auto 10px; background-image: var(--art-url); background-repeat: no-repeat; border-radius: 10px; box-shadow: 0 0 0 2px var(--ink);
  image-rendering: auto; }
.u-banner[hidden] { display: none; }
.u-banner[data-art="wait"] { background-image: none; background: var(--shade, #e8dcc3); visibility: hidden; }
.u-banner.u-banner-sm { --bn-vh: 18dvh; margin-bottom: 8px; }

/* decision modal: portrait.doctor beside the narrative */
.u-speaker { display: flex; align-items: flex-start; gap: 12px; }
.u-speaker > .u-art { margin-top: 2px; }
.u-speaker > .u-p { margin: 0; flex: 1 1 0; min-width: 0; }
.u-modal-ico { margin-right: 6px; vertical-align: -0.28em; }

/* selection card */
.u-shead .u-art-pair { margin-right: 2px; }
.u-seltask { display: inline-flex; align-items: center; gap: 4px; }

/* lists */
.u-row2 > .u-art, .u-row2 > .u-art-pair { margin-top: 1px; }
.u-chip-art { display: inline-flex; align-items: center; gap: 2px; }
.u-artswitch { gap: 8px; }
.u-artswitch .btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.3; }
.modal .u-banner:not(.u-banner-sm) { max-width: 380px; }
.lay-portrait .modal .u-banner:not(.u-banner-sm) { --bn-vh: 17dvh; }
.lay-compact .modal .u-banner:not(.u-banner-sm) { --bn-vh: 30dvh; }

/* ==========================================================================
   CONCEPT STYLE — ui extras (html.style-concept only; classic rules above are untouched). See css/style.css §22.
   ========================================================================== */
html.style-concept .u-sec { color: var(--c-navy); border-bottom: 2px solid var(--band); font-weight: 900; }
html.style-concept .u-sico { filter: none; }
html.style-concept .u-input, html.style-concept .u-ta { border-radius: 8px; background: #fff; box-shadow: 0 0 0 2px var(--c-line-2), inset 0 2px 0 0 rgba(30, 54, 90, 0.08); }
html.style-concept .u-input:focus, html.style-concept .u-ta:focus { outline: none; box-shadow: 0 0 0 2px var(--c-blue-hi), 0 0 0 5px rgba(42, 126, 246, 0.25); }
html.style-concept .u-setting input[type="checkbox"], html.style-concept .u-check2 input { accent-color: var(--c-blue); }
html.style-concept .u-check { border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--c-line); }
html.style-concept .tag.u-chip.good { background: #d7f0e0; color: #14553a; box-shadow: 0 0 0 1.5px #3aa56a; }
html.style-concept .tag.u-chip.bad { background: #fbe0e5; color: #8f2a38; box-shadow: 0 0 0 1.5px #d24e66; }
html.style-concept .tag.u-odds, html.style-concept .tag.u-titlechip { background: #e6e4f7; color: #3d3a78; box-shadow: 0 0 0 1.5px #9a7fc6; }
html.style-concept .tag.u-costnote { background: #e8eef5; color: var(--c-navy); box-shadow: 0 0 0 1.5px var(--c-line-2); }
html.style-concept .tag.u-costnote.lack { background: #fbe0e5; color: #8f2a38; box-shadow: 0 0 0 1.5px #d24e66; }
html.style-concept .tag.u-eqb.bad { background: #fbe0e5; color: #8f2a38; box-shadow: 0 0 0 1.5px #d24e66; }
html.style-concept .tag.u-eqb.warn { background: #fff0c4; color: #6b4a00; box-shadow: 0 0 0 1.5px #d9a21a; }
html.style-concept .tag.u-eqb.good { background: #d7f0e0; color: #14553a; box-shadow: 0 0 0 1.5px #3aa56a; }
html.style-concept .tag.u-mood { background: #fbe0e5; color: #8f2a38; box-shadow: 0 0 0 1.5px #d24e66; }
html.style-concept .tag.u-st-review.good { background: #d7f0e0; color: #14553a; }
html.style-concept .tag.u-st-review.bad { background: #fbe0e5; color: #8f2a38; }
/* achievement tiers: 銅 / 銀 / 金 as metal-coloured pills */
html.style-concept .tag.u-tier1 { background: linear-gradient(#f0c9a0, #d99a5e); color: #4a2a0c; box-shadow: 0 0 0 1.5px #8a5a2b; }
html.style-concept .tag.u-tier2 { background: linear-gradient(#f2f5f9, #c4ccd8); color: #2c3644; box-shadow: 0 0 0 1.5px #7e8aba; }
html.style-concept .tag.u-tier3 { background: linear-gradient(#ffeaa0, #f6c64e); color: #5a4200; box-shadow: 0 0 0 1.5px #c98a14; }
html.style-concept .badge.u-b-done { background: #bfe8cc; }
html.style-concept .badge.u-b-lock { background: #dbe3ec; color: #4a5870; }
html.style-concept .u-toolstatus, html.style-concept .u-achnote { border-radius: 10px; background: #e6f2ff; color: var(--c-navy); box-shadow: inset 0 0 0 2px var(--c-blue-hl); }
html.style-concept .u-curres { background: #dff0f7; }
html.style-concept .u-step { border-radius: 999px; background: #e3edf7; color: var(--muted); box-shadow: 0 0 0 1px var(--c-line); }
html.style-concept .u-step.done { background: #d7f0e0; color: #14553a; }
html.style-concept .u-step.cur { background: #f6c64e; color: var(--c-ink); box-shadow: 0 0 0 1.5px var(--c-navy); }
html.style-concept .u-need { border-radius: 999px; }
html.style-concept .u-need.have { background: #d7f0e0; color: #14553a; box-shadow: 0 0 0 1.5px #3aa56a; }
html.style-concept .u-need.lack { background: #e8eef5; color: var(--muted); box-shadow: 0 0 0 1.5px var(--c-line-2); }
html.style-concept .u-note { border-radius: 10px; background: #e1f1f7; box-shadow: inset 0 0 0 2px var(--c-teal); }
html.style-concept .u-note.bad-note { background: #fbe6ea; box-shadow: inset 0 0 0 2px var(--c-red); }
html.style-concept .u-stats3 { border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px var(--c-line); }
html.style-concept .u-kvrow.u-total { border-top-color: var(--c-navy); }
html.style-concept .u-dots i { border-radius: 50%; background: var(--c-line); box-shadow: 0 0 0 2px var(--c-navy); }
html.style-concept .u-dots i.on { background: var(--c-blue-hi); }
html.style-concept .u-intro-head { color: var(--c-teal); }
html.style-concept .u-legend i { border-radius: 999px; box-shadow: 0 0 0 1px var(--c-navy); }
html.style-concept .u-minimap, html.style-concept .u-chart { border-radius: 10px; box-shadow: 0 0 0 2px var(--c-navy); }
html.style-concept .u-eq tbody tr.u-sel { background: #dcebfb !important; }
html.style-concept .u-eq tbody tr.u-broken { background: #fbe6ea; }

/* build cards / glyph tiles */
html.style-concept .u-item .u-glyph { border-radius: 10px; box-shadow: 0 0 0 2px var(--c-navy), inset 0 -4px 0 0 rgba(20, 17, 27, 0.2); }
html.style-concept .u-item .u-cost { color: #176985; }
html.style-concept .u-item .u-cost.bad { color: var(--bad); }
html.style-concept .u-tray-glyph { border-radius: 10px; box-shadow: 0 0 0 2px var(--c-navy), inset 0 -4px 0 0 rgba(20, 17, 27, 0.2); }
html.style-concept .u-tray-btn.on { background: #f6c64e; color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-navy), inset 0 3px 0 rgba(20, 17, 27, 0.18); }
html.style-concept .u-chip-build { border-radius: 999px; background: var(--c-blue); color: #fff; text-shadow: none; box-shadow: 0 0 0 2px var(--c-navy), 0 4px 0 0 var(--c-blue-lo), 0 5px 0 1px var(--c-navy), inset 0 2px 0 rgba(255, 255, 255, 0.35); }

/* achievements */
html.style-concept .u-achico { border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px var(--c-navy), inset 0 -4px 0 0 rgba(30, 54, 90, 0.12); }
html.style-concept .u-ach.u-locked .u-achico { background: #e4eaf1; }

/* sprite frames */
html.style-concept .u-art.u-art-ring { box-shadow: 0 0 0 2px var(--c-navy); background: #dcebfb; border-radius: 10px; }
html.style-concept .u-art.u-art-ring[data-art="off"] { background: #fff; box-shadow: none; }
html.style-concept .u-art[data-art="off"] > .u-art-fb.u-art-glyphfb { border-radius: 10px; box-shadow: 0 0 0 2px var(--c-navy), inset 0 -4px 0 0 rgba(20, 17, 27, 0.2); }
html.style-concept .u-banner { border-radius: 12px; box-shadow: 0 0 0 2px var(--c-navy); }

/* selection card, speech bubble, hint */
html.style-concept .u-selcard { border-radius: 14px; background: #fff; box-shadow: 0 0 0 2px var(--c-navy), 0 10px 24px rgba(20, 17, 27, 0.3); }
html.style-concept .u-selclose { border-radius: 50%; color: var(--c-navy); }
html.style-concept .u-selclose:hover { background: #fbe0e5; color: var(--c-red); }
html.style-concept .u-bubble { border-radius: 10px; background: #f1f8ff; box-shadow: 0 0 0 1.5px var(--c-line-2); }
html.style-concept .u-hint { border-radius: 10px; background: rgba(30, 54, 90, 0.9); color: #fff; }
html.style-concept .tb-item.u-neg .tb-val, html.style-concept .tb-item.u-bad .tb-val { color: #ffb3bd; }

/* modals */
html.style-concept .btn.u-choice { text-align: left; }
html.style-concept .u-modal-ico { filter: none; }
html.style-concept .u-speaker > .u-art { border-radius: 12px; }

/* ---------- concept-style object thumbnails (js/ui/artdom.js thumbEl) ------------------------------------------------------ */
/* classic / no concept drawing: the wrapper is transparent to layout (display: contents) and the canvas never shows */
.u-thumb { display: contents; }
.u-thumb > canvas { display: none; }
html.style-concept .u-thumb[data-ct="1"] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--tw, 52px); height: var(--th, 44px); }
html.style-concept .u-thumb[data-ct="1"] > :not(canvas) { display: none; }
html.style-concept .u-thumb[data-ct="1"] > canvas { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 1px 0 rgba(20, 17, 27, 0.18)); }
html.style-concept .u-item .u-thumb[data-ct="1"] { margin-bottom: 4px; }
html.style-concept .u-eqname:has(> .u-thumb[data-ct="1"]) { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
@media (max-height: 600px) {
  html.style-concept .u-item .u-thumb[data-ct="1"] { --tw: 44px !important; --th: 38px !important; margin-bottom: 2px; }
}
html.style-concept.lay-compact #stage[data-bmode="strip"] .u-tray-item .u-thumb[data-ct="1"] { --tw: 34px !important; --th: 32px !important; }
html.style-concept.lay-compact #stage[data-bmode="strip"] .u-item .u-thumb[data-ct="1"] { --tw: 30px !important; --th: 28px !important; margin-bottom: 0; }
html.style-concept.lay-compact .u-shead .u-thumb[data-ct="1"] { --tw: 34px !important; --th: 34px !important; }

/* ================= 效能診斷 HUD (js/ui/perfhud.js) ================= */
.perf-hud {
  position: absolute; z-index: 17; left: calc(6px + var(--sal, 0px)); top: 6px; max-width: calc(100% - 12px - var(--sal, 0px) - var(--sar, 0px));
  padding: 4px 7px; margin: 0; box-sizing: border-box; pointer-events: none; user-select: none; -webkit-user-select: none;
  background: rgba(20, 28, 34, 0.74); color: #e8f4f2; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  font: 11px/1.38 ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans TC", "PingFang TC", monospace; font-variant-numeric: tabular-nums;
  white-space: pre; overflow: hidden; contain: content;
}
.perf-hud[hidden] { display: none; }
.perf-hud .ph-row { overflow: hidden; text-overflow: clip; }
html.style-concept .perf-hud { background: rgba(30, 54, 90, 0.82); border-radius: 8px; box-shadow: 0 0 0 1.5px #9cc8f8; color: #fff; }
@media (max-width: 420px) { .perf-hud { font-size: 10.5px; padding: 3px 6px; } }
html.lay-portrait .perf-hud { top: 4px; }
html.lay-desktop .perf-hud { left: 100px; }      /* clear of the floating sidebar */
html.lay-compact .perf-hud { left: calc(64px + var(--sal, 0px)); }
.toast.u-update { pointer-events: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; animation: none; }
.toast.u-update .btn { flex: 0 0 auto; }
html.style-concept .toast.u-update { padding-left: 46px; }

/* ---------- mood faces (js/ui/moods.js, artdom.js staffBust / patient mood label) ---------------------------------------- */
.u-moodlbl, .u-moodhint { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.u-moodlbl[hidden], .u-moodhint[hidden] { display: none; }
.u-moodlbl { margin-left: 4px; }
.u-moodlbl[data-key="angry"], .u-moodlbl[data-key="pain"], .u-moodhint[data-mood="tired"] { color: #b3304a; }
.u-moodlbl[data-key="content"], .u-moodhint[data-mood="happy"] { color: #1d7a42; }
.u-moodlbl[data-key="delighted"] { color: #a8561a; }
.u-srow2 .u-bars3.u-bars4 > .u-moodhint { grid-column: 1 / -1; }
.u-bl.u-morale .u-moodhint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.u-resbody > .u-resmain { flex: 1 1 0; min-width: 0; }
.u-resmain > .u-p:first-child { margin-top: 0; }
.u-artonly { display: none; }
html.style-concept .u-artonly { display: flex; }
.u-rephead { align-items: center; margin-bottom: 8px; }
.u-rephead > .u-p { margin: 0; flex: 1 1 0; min-width: 0; font-weight: 700; }
.u-rephead > .u-p[data-mood="happy"] { color: #1d7a42; }
.u-rephead > .u-p[data-mood="tired"] { color: #b3304a; }
html.style-concept .u-bust[data-art="on"] { background: #e4f0fb; border-radius: 12px; box-shadow: 0 0 0 2px var(--c-navy, #1e365a); }
html.style-concept .u-bust[data-art="on"] > i { margin-top: 2px; }
html.style-concept .u-bust.u-bust-card { border-radius: 14px; }
html.style-concept.lay-compact .u-selbody > .u-shead > .u-art.u-bust { --aw: 36px !important; --ah: 40px !important; }

/* ==========================================================================
   目標 / 年度總結 / 生涯結局 (js/ui/career.js, panels/clinic.js 🎯 目標, modals.js year review + ending)
   ========================================================================== */
.sidebar-btn { position: relative; }
.u-dot {
  position: absolute; top: 5px; right: 16%; width: 12px; height: 12px; border-radius: 50%; pointer-events: none;
  background: #e23a3a; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ink); animation: u-dot-pulse 1.8s ease-in-out infinite;
}
.u-dot[hidden] { display: none; }
.u-dot.u-dot-tab { position: static; display: inline-block; width: 9px; height: 9px; margin-left: 5px; vertical-align: top; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--ink); animation: none; }
@keyframes u-dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .u-dot { animation: none; } .u-grade-pop { animation: none !important; } }
.lay-compact .u-dot { right: 10px; top: 4px; }

/* grade colours shared by pills / badges */
.u-g-S { --g: #f6c64e; --gt: #14111b; }
.u-g-A { --g: #3aa56a; --gt: #fff; }
.u-g-B { --g: #2a7ef6; --gt: #fff; }
.u-g-C { --g: #ea9a3e; --gt: #14111b; }
.u-g-D { --g: #d24e66; --gt: #fff; }
.u-g-none { --g: #dfe6ee; --gt: #5b687c; }
.u-grade {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; font-weight: 900; font-size: 17px; line-height: 1;
  background: var(--g); color: var(--gt); box-shadow: 0 0 0 2px var(--ink), inset 0 -3px 0 rgba(20, 17, 27, 0.2); text-shadow: none;
}
.u-grade.u-grade-sm { width: 24px; height: 24px; font-size: 14px; }
.u-grade.u-grade-xl { width: 72px; height: 72px; font-size: 46px; }
.u-grade-pop { animation: u-grade-pop 0.55s cubic-bezier(.2, 1.4, .4, 1) 1; }
@keyframes u-grade-pop { 0% { transform: scale(0.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: none; } }

.u-career { min-width: 0; }
.u-career-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.u-career-right { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.u-career-right .btn { margin: 0; }
.u-empty { padding: 6px 4px; }
/* 新手任務 */
.u-ob-count { font-size: 14px; font-variant-numeric: tabular-nums; }
.u-ob-list { margin: 0 0 8px; gap: 6px; }
.u-obtask { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; }
.u-ob-mark {
  flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-top: 1px;
  font-weight: 900; font-size: 14px; background: #fff; color: var(--muted); box-shadow: 0 0 0 2px var(--ink);
}
.u-obtask.u-done .u-ob-mark { background: var(--good); color: #fff; }
.u-obtask.u-done { opacity: 0.82; }
.u-ob-main { display: flex; flex-direction: column; gap: 1px; }
.u-ob-head { display: flex; align-items: center; gap: 2px 8px; }
.u-ob-name { font-size: 14px; line-height: 1.35; }
.u-ob-desc { line-height: 1.4; }
.u-ob-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.u-ob-foot .u-ob-hint { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-ob-foot .u-ob-rew { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.u-ob-hint[hidden], .u-ob-prog[hidden], .u-ob-rew[hidden] { display: none; }
.u-ob-prog { display: flex; align-items: center; gap: 8px; }
.u-ob-prog .bar { flex: 1 1 auto; height: 9px; min-width: 40px; }
.u-ob-ptxt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-ob-donebox { margin: 0 0 6px; }
.u-ob-donebox summary { cursor: pointer; padding: 3px 0; }
.u-ob-donebox[hidden], .u-ob-alldone[hidden] { display: none; }
.u-ob-alldone { padding: 4px 2px; font-weight: 800; }
.u-ob-show { margin: 2px 0 6px; }
/* 本年目標 */
.u-goals { margin-top: 0; gap: 8px; }
.u-goal { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.u-goal.core { box-shadow: 0 0 0 2px var(--gold), 0 0 0 1px var(--line); background: #fff8e8; }
.u-ghead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.u-gname { font-size: 15px; }
.u-gstat { margin-left: auto; }
.tag.u-gstat.u-ok { background: var(--u-good-bg); color: #1d5c2a; box-shadow: 0 0 0 2px #1d5c2a; }
.tag.u-gkind { background: #e8f1f4; color: var(--teal-dark); box-shadow: 0 0 0 2px var(--teal); }
.u-goal.core .tag.u-gkind { background: #ffe9a6; color: #6b4f00; box-shadow: 0 0 0 2px #c79a1a; }
.u-gprog { display: flex; align-items: center; gap: 8px; }
.u-gprog .bar { flex: 1 1 auto; height: 11px; min-width: 40px; }
.u-gptxt { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 4.5em; text-align: right; }
.u-conds { display: flex; flex-direction: column; gap: 3px; }
.u-conds[hidden] { display: none; }
.u-cond { display: flex; align-items: baseline; gap: 6px; padding: 2px 6px; font-size: 12.5px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.u-cond.ok { color: #1d5c2a; font-weight: 700; }
.u-cond.no { color: var(--muted); }
.u-cmark { flex: 0 0 1.1em; font-weight: 900; }
.u-cond.no .u-cmark { color: var(--bad); }
.u-cval { flex: 0 0 auto; font-variant-numeric: tabular-nums; text-align: right; }
.u-grew[hidden] { display: none; }
.u-grew { color: var(--teal-dark); font-weight: 700; }
.u-grew.u-got { color: var(--muted); }
.u-goal.u-done:not(.core) { opacity: 0.9; }
/* 生涯進度 */
.u-cs { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.u-cs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.u-cs-year { font-size: 16px; }
.u-cs-row .tag[hidden] { display: none; }
.u-cs-end { font-size: 13px; font-weight: 700; }
.u-tlbox { min-height: 46px; }
.u-tl { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.u-tl-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 46px; padding: 3px 0; border: 0; font: inherit; cursor: default;
  background: var(--g, #dfe6ee); color: var(--gt, #5b687c); box-shadow: 0 0 0 2px var(--ink); text-shadow: none;
}
button.u-tl-pill { cursor: pointer; }
.u-tl-pill small { font-size: 12px; line-height: 1; opacity: 0.85; }
.u-tl-pill b { font-size: 17px; line-height: 1.15; }
.u-tl-pill.empty { background: transparent; color: var(--muted); box-shadow: 0 0 0 2px var(--line); }
.u-tl-pill.cur { box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(42, 126, 246, 0.25); color: var(--accent); }
/* 歷年總結 */
.u-revlist { margin: 0; gap: 6px; }
.u-rev { padding: 0; }
.u-rev-sum { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; min-width: 0; }
.u-rev-sum::-webkit-details-marker { display: none; }
.u-rev-y { font-weight: 900; white-space: nowrap; }
.u-rev-score { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.u-rev-line { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-rev[open] .u-rev-sum { border-bottom: 1px solid var(--line); }
.u-rv-detailbody { padding: 4px 10px 10px; }
/* review pieces */
.u-sec.u-sec-sm { margin: 12px 0 5px; font-size: 13px; }
.u-dims { display: flex; flex-direction: column; gap: 3px; }
.u-dim { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 2.1em 3.4em; align-items: center; gap: 6px; padding: 3px 6px; font-size: 13px; }
.u-dim.best { background: #e5f6ea; box-shadow: inset 0 0 0 1.5px #3aa56a; }
.u-dim.worst { background: #fff0d9; box-shadow: inset 0 0 0 1.5px #ea9a3e; }
.u-dim-lab { font-weight: 800; white-space: nowrap; }
.u-dim-emo { margin-right: 3px; }
.u-dim .bar { height: 10px; min-width: 30px; }
.u-dim-num { text-align: right; font-variant-numeric: tabular-nums; }
.u-dl { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.u-dl-up { color: #1d7a42; }
.u-dl-dn { color: #b3304a; }
.u-dl-eq { color: var(--muted); }
.u-dl-none { display: inline-block; min-width: 1px; }
.u-dl-lg { font-size: 14px; }
.u-dim-note { margin-top: 3px; }
.u-warn { color: #a8561a; font-weight: 700; }
.u-rv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 560px) { .u-rv-stats { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }
.u-rv-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 8px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); font-variant-numeric: tabular-nums; }
.u-rv-stat b { font-size: 15px; overflow-wrap: anywhere; }
.u-rv-stat .u-dl { text-align: left; font-size: 11px; }
.u-rv-sl { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.u-rv-goals { display: flex; flex-direction: column; gap: 4px; }
.u-rv-goals .u-check.muted { color: var(--muted); }
.u-quote { margin: 8px 0; padding: 8px 12px; background: #fff8e8; box-shadow: inset 4px 0 0 var(--gold); line-height: 1.7; font-size: 13.5px; }
.u-quote-h { font-size: 12px; font-weight: 900; color: var(--muted); margin-bottom: 2px; }
.u-quote-t { white-space: pre-line; }
.u-quote-w { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* year-review / ending modals */
.u-review .u-banner, .u-ending .u-banner { margin-bottom: 8px; }
.u-rv-hero, .u-end-hero { display: flex; align-items: center; gap: 12px; margin: 2px 0 8px; min-width: 0; }
.u-rv-bust:has(> .u-art[hidden]) { display: none !important; }
.u-rv-fb { font-size: 38px; }
.u-rv-heroT, .u-end-titles { flex: 1 1 0; min-width: 0; }
.u-rv-year { font-size: 16px; font-weight: 900; line-height: 1.3; }
.u-rv-score { font-size: 14px; font-weight: 700; }
.u-rv-score b { font-size: 26px; font-variant-numeric: tabular-nums; }
.u-end-emoji { font-size: 46px; line-height: 1; flex: 0 0 auto; }
.u-end-kicker { font-size: 12px; font-weight: 800; color: var(--muted); }
.u-end-title { font-size: 21px; font-weight: 900; line-height: 1.25; }
.u-end-grade { margin: 4px 0 8px; }
.u-end-desc { line-height: 1.5; margin-top: 2px; }
.u-end-reason { margin: 4px 0; font-weight: 700; color: var(--bad); }
.u-end-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.u-end-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 8px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); font-variant-numeric: tabular-nums; }
.u-end-stat b { font-size: 15px; overflow-wrap: anywhere; }
.u-end-note { margin-top: 10px; }
.u-end-note p { margin: 2px 0 0; }
.u-endcard:empty { display: none; }
.u-endcard-ta { min-height: 96px; }
.u-endmodal .modal-actions .btn, .u-rvmodal .modal-actions .btn { flex: 1 1 auto; }
.u-intro-goal { margin: 0 0 6px; font-weight: 800; color: var(--teal-dark); visibility: hidden; }
.u-intro-goal.on { visibility: visible; }
@media (max-width: 420px) {
  .u-dim { grid-template-columns: 5em minmax(0, 1fr) 1.9em 3em; gap: 5px; padding: 3px 4px; }
  .u-rv-stat { padding: 5px 6px; }
  .u-rv-stat b { font-size: 13.5px; }
  .u-grade.u-grade-xl { width: 60px; height: 60px; font-size: 38px; }
  .u-tl { gap: 2px; }
  .u-tl-pill b { font-size: 15px; }
  .u-end-emoji { font-size: 38px; }
  .u-end-title { font-size: 18px; }
}
@media (max-height: 520px) { .u-review .u-banner, .u-ending .u-banner { display: none; } }
@media (max-height: 600px) {
  .u-rv-hero, .u-end-hero { margin-top: 0; }
  .u-grade.u-grade-xl { width: 54px; height: 54px; font-size: 34px; }
  .u-intro-goal { margin-bottom: 2px; }
}

/* ---- concept style ---- */
html.style-concept .u-dot { background: #e23a3a; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--c-navy), 0 2px 4px rgba(20, 17, 27, 0.35); top: 4px; }
html.style-concept .u-dot.u-dot-tab { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--c-navy); }
html.style-concept .u-grade { border-radius: 12px; box-shadow: 0 0 0 2px var(--c-navy), inset 0 -4px 0 rgba(20, 17, 27, 0.2), inset 0 3px 0 rgba(255, 255, 255, 0.4); }
html.style-concept .u-grade.u-grade-sm { border-radius: 8px; }
html.style-concept .u-grade.u-grade-xl { border-radius: 18px; }
html.style-concept .u-ob-mark { border-radius: 50%; box-shadow: 0 0 0 2px var(--c-line-2); background: #fff; }
html.style-concept .u-obtask.u-done .u-ob-mark { background: #3aa56a; box-shadow: 0 0 0 2px var(--c-navy); }
html.style-concept .u-obtask { background: #fff; }
html.style-concept .u-goal.core { background: linear-gradient(#fffaf0, #fff4d8); box-shadow: 0 0 0 2px #e0a92c, 0 3px 8px rgba(224, 169, 44, 0.25); }
html.style-concept .tag.u-gkind { background: #dcebfb; color: var(--c-navy); box-shadow: 0 0 0 1.5px var(--c-blue-hl); }
html.style-concept .u-goal.core .tag.u-gkind { background: #ffe9a6; color: #5a4200; box-shadow: 0 0 0 1.5px #c98a14; }
html.style-concept .tag.u-gstat.u-ok { background: #d7f0e0; color: #14553a; box-shadow: 0 0 0 1.5px #3aa56a; }
html.style-concept .u-cond { border-radius: 8px; background: #f1f7fc; box-shadow: inset 0 0 0 1px var(--c-line); }
html.style-concept .u-cond.ok { background: #e5f6ea; box-shadow: inset 0 0 0 1px #9ad4b0; color: #14553a; }
html.style-concept .u-grew { color: #176985; }
html.style-concept .u-grew.u-got { color: var(--muted); }
html.style-concept .u-tl-pill { border-radius: 10px; box-shadow: 0 0 0 2px var(--c-navy), inset 0 -3px 0 rgba(20, 17, 27, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
html.style-concept .u-tl-pill.empty { background: #fff; box-shadow: 0 0 0 2px var(--c-line-2); color: var(--muted); }
html.style-concept .u-tl-pill.cur { background: #fff; color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-blue-hi), 0 0 0 5px rgba(42, 126, 246, 0.22); }
html.style-concept .u-rev { overflow: hidden; }
html.style-concept .u-rev[open] .u-rev-sum { border-bottom-color: var(--c-line); }
html.style-concept .u-dim { border-radius: 10px; }
html.style-concept .u-dim.best { background: #e5f6ea; box-shadow: inset 0 0 0 1.5px #3aa56a; }
html.style-concept .u-dim.worst { background: #fff3df; box-shadow: inset 0 0 0 1.5px #ea9a3e; }
html.style-concept .u-dim .bar { height: 10px; }
html.style-concept .u-dim.best .bar > i { background: linear-gradient(90deg, #3aa56a, #6cc88c); }
html.style-concept .u-rv-stat, html.style-concept .u-end-stat { border-radius: 10px; background: #f1f7fc; box-shadow: inset 0 0 0 1.5px var(--c-line); }
html.style-concept .u-quote { border-radius: 10px; background: #f1f8ff; box-shadow: inset 4px 0 0 var(--c-blue-hi), inset 0 0 0 1px var(--c-line); }
html.style-concept .u-quote-h { color: var(--c-teal); }
html.style-concept .u-end-reason { color: var(--c-red); }
html.style-concept .u-dl-up { color: #1d7a42; }
html.style-concept .u-warn { color: #a8561a; }
html.style-concept .u-rvmodal .modal-title, html.style-concept .u-endmodal .modal-title { background: var(--c-navy); }
html.style-concept .u-review[data-grade="S"] .u-rv-year, html.style-concept .u-review[data-grade="A"] .u-rv-year { color: #14553a; }
html.style-concept .u-review[data-grade="D"] .u-rv-year, html.style-concept .u-review[data-grade="C"] .u-rv-year { color: #8f2a38; }
html.style-concept .u-intro-goal { color: var(--c-teal); }

/* ---------- 專區組合辭典 (overview → ✨ 專區辭典) -------------------------------- */
.u-synhead { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; flex-wrap: wrap; }
.u-synhead .bar { flex: 1 1 80px; height: 10px; min-width: 60px; }
.u-synnote { margin: 0 0 6px; line-height: 1.5; }
.u-fchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.u-fchip {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 8px; min-height: 28px;
  background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--wood);
}
.u-fchip.on { background: var(--gold); box-shadow: 0 0 0 2px var(--ink); }
.u-synlist { margin-top: 6px; }
.u-syn { gap: 5px; margin-bottom: 0; }
.u-synh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.u-synname { font-size: 15px; }
.u-syntier, .u-syngrp { font-size: 12px; padding: 0 6px; }
.u-syntier[data-tier="advanced"] { background: #d9e6f7; }
.u-syntier[data-tier="master"] { background: #f6e0a0; }
.u-synbadge { margin-left: auto; }
.u-synbadge[data-st="off"] { background: #ece4d0; color: var(--muted); }
.u-synbadge[data-st="lock"] { background: #dcdce6; color: #4a4a66; }
.u-syn .u-efrow { align-items: flex-start; gap: 6px; }
.u-syn .u-efrow > .muted { flex: 0 0 auto; padding-top: 2px; }
.u-synreq { gap: 4px; }
.u-need.lock { background: #dcdce6; color: #4a4a66; box-shadow: 0 0 0 2px #7a7a99; }
.u-need { max-width: 100%; white-space: normal; line-height: 1.35; }
.u-synstat.good { color: #1d5c2a; font-weight: 700; }
.u-synhint { line-height: 1.45; }
.u-synact { display: flex; justify-content: flex-end; margin-top: 2px; }
.u-synlock { opacity: 0.88; }
.u-syn[hidden] { display: none; }
html.style-concept .u-fchip { border-radius: 999px; background: #fff; color: var(--c-navy); box-shadow: 0 0 0 1.5px var(--c-line-2); }
html.style-concept .u-fchip.on { background: var(--c-blue); color: #fff; box-shadow: 0 0 0 1.5px var(--c-navy); }
html.style-concept .u-syntier[data-tier="advanced"] { background: #d3e5fb; color: var(--c-navy); }
html.style-concept .u-syntier[data-tier="master"] { background: #ffe9a6; color: #5a4200; box-shadow: 0 0 0 1.5px #c98a14; }
html.style-concept .u-syngrp { background: #e8eef5; color: var(--muted); box-shadow: 0 0 0 1.5px var(--c-line-2); }
html.style-concept .u-synbadge[data-st="off"] { background: #e8eef5; color: var(--muted); box-shadow: 0 0 0 1.5px var(--c-line-2); }
html.style-concept .u-synbadge[data-st="lock"] { background: #e3e3f1; color: #4a4a78; box-shadow: 0 0 0 1.5px #9a9ac6; }
html.style-concept .u-need.lock { background: #e3e3f1; color: #4a4a78; box-shadow: 0 0 0 1.5px #9a9ac6; border-radius: 999px; }
html.style-concept .u-synstat.good { color: #14553a; }
html.style-concept .u-syn.selected { box-shadow: 0 0 0 2px #3aa56a, 0 3px 8px rgba(58, 165, 106, 0.2); }

/* dictionary header: compact on phones (status chips wrap, group chips become one swipeable row) */
.lay-mobile .u-fchips { gap: 3px; margin-bottom: 4px; }
.lay-mobile .u-fchip { font-size: 12px; padding: 1px 9px; min-height: 40px; }
.lay-mobile .u-fchips.u-hscroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lay-mobile .u-fchips.u-hscroll::-webkit-scrollbar { display: none; }
.lay-mobile .u-fchips.u-hscroll .u-fchip { flex: 0 0 auto; white-space: nowrap; }
.lay-mobile .u-synnote { display: none; }
.lay-mobile .u-synact .btn { min-height: 40px; }
.lay-mobile .u-synhead { margin-bottom: 4px; }

/* ---------- 設施人員資格 (js/ui/roles.js, sim/qualify.js): role chips, 缺人 badge ------------------------------------ */
.u-roles { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; font-size: 12px; line-height: 1.3; }
.u-roles-l { font-size: 12px; font-weight: 700; color: var(--ink-soft, #6b5a3a); }
.tag.u-role { font-size: 12px; padding: 0 5px; white-space: nowrap; }
.tag.u-role.ok { background: var(--u-good-bg); color: #1d5c2a; box-shadow: 0 0 0 1.5px #1d5c2a; }
.tag.u-role.lack { background: #fff0c4; color: #7a5200; box-shadow: 0 0 0 1.5px #b88a1a; }
.u-roles.lack .u-roles-l { color: #8a5a00; }
.u-tray-role { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 700; color: #1d5c2a; line-height: 1.3; }
.u-tray-role.lack { color: #8a5a00; }
.u-tray-role[hidden] { display: none; }
.u-tip-role { margin-top: 3px; font-weight: 700; color: #1d5c2a; }
.u-tip-role.lack { color: #8a5a00; }
.u-eqreq { margin-top: 1px; font-weight: 400; }
.u-eqreq[hidden] { display: none; }
.u-eq tbody tr.u-unstaffed:not(.u-broken) { background: #fff6dc; }
.tag.u-eqmiss { white-space: nowrap; }
.tag.u-need { background: #fff0c4; color: #7a5200; box-shadow: 0 0 0 1.5px #b88a1a; white-space: nowrap; }
.tag.u-need[hidden] { display: none; }
.lay-compact #stage[data-bmode="strip"] .u-roles-l, .lay-compact #stage[data-bmode="strip"] .u-roles .u-role.ok { display: none; }
.lay-compact #stage[data-bmode="strip"] .u-item .u-roles { font-size: 12px; }
html.style-concept .tag.u-role.ok { background: #d7f0e0; color: #14553a; box-shadow: 0 0 0 1.5px #3aa56a; }
html.style-concept .tag.u-role.lack, html.style-concept .tag.u-need { background: #fff0c4; color: #6b4a00; box-shadow: 0 0 0 1.5px #d9a21a; }
html.style-concept .u-eq tbody tr.u-unstaffed:not(.u-broken) { background: #fff6dc; }
.u-srow > * { min-width: 0; }
.u-srow .u-roles { justify-content: flex-start; }
.u-srow .u-roles .u-roles-l { display: none; }
.u-sstat { font-weight: 700; }
.u-sstat.bad { color: #8a5a00; }
.lay-mobile .u-selbody > .u-srow-wide { grid-column: 1 / -1; }
.u-srow .tag.u-role { white-space: nowrap; }

/* ================= 封面 (js/ui/cover.js) ================= */
.cover { position: fixed; inset: 0; z-index: 90;   /* under .modal-backdrop (100): the support page and tutorial open above it */
  display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(#cfe6f5, #eaf6f6 60%, #ead2ae); overflow: auto; }
.cover-card { width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: auto; }
.cover-title { font-size: 30px; font-weight: 900; color: var(--ink, #1f2d33); letter-spacing: 2px; }
.cover-sub { font-size: 14px; color: var(--muted, #6b7a80); margin-top: -6px; }
.cover .u-banner { margin: 4px auto; }
.cover-go { min-height: 48px; min-width: 200px; font-size: 18px; padding: 8px 28px; }
.cover-save { font-size: 12px; }
.cover-install { width: 100%; padding: 8px 10px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1.5px var(--line, #c6d4e4); text-align: left; }
.cover-install .row { justify-content: center; }
html.style-concept .cover { background: linear-gradient(#cfe6f5, #eaf6f6 60%, #ead2ae); }
html.style-concept .cover-title { color: var(--c-navy, #1e365a); }
html.style-concept .cover-install { border-radius: 10px; box-shadow: 0 0 0 2px var(--c-navy, #1e365a); }

.cover-support { margin-top: -2px; }
.support-page { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: left; }
.support-lead { font-weight: 700; margin: 4px 0 0; }
.support-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.support-thanks { margin: 0; font-weight: 700; text-align: center; }
.support-go { min-height: 44px; font-size: 16px; align-self: center; padding: 6px 22px; }
.support-note { text-align: center; margin: 0; }