:root {
  --bg: #061821;
  --panel: rgba(10, 38, 48, 0.9);
  --panel-strong: rgba(11, 48, 59, 0.96);
  --line: rgba(119, 210, 206, 0.16);
  --line-strong: rgba(118, 222, 211, 0.34);
  --text: #eefaf7;
  --muted: #8fb2b4;
  --teal: #5fe2d0;
  --cyan: #4fc7e8;
  --gold: #f6c66b;
  --orange: #ef946c;
  --green: #6bd5a0;
  --red: #f08384;
  --radius: 16px;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

body[data-school-code="cxbx"] {
  --bg: #07170c;
  --panel: rgba(8, 42, 43, 0.92);
  --panel-strong: rgba(10, 55, 53, 0.96);
  --line: rgba(92, 213, 190, 0.18);
  --line-strong: rgba(105, 226, 202, 0.38);
  --teal: #64ddbb;
  --cyan: #69d8e7;
  --gold: #f1bf43;
  --orange: #ef8e64;
  --green: #71d47c;
  background:
    radial-gradient(circle at 50% -20%, rgba(52, 160, 119, 0.3), transparent 48%),
    radial-gradient(circle at 90% 20%, rgba(46, 158, 197, 0.18), transparent 34%),
    linear-gradient(145deg, #04120f 0%, #082b26 52%, #051b20 100%);
}

body[data-school-code="cxbx"] .product-card {
  border-color: rgba(241, 191, 67, 0.44);
  background: linear-gradient(145deg, rgba(28, 91, 78, 0.96), rgba(8, 45, 42, 0.98));
}

body[data-school-code="cxbx"] .product-icon {
  width: 68px;
  height: 68px;
  color: #2f2305;
  background: linear-gradient(145deg, #ffe59a, #e4ad2f);
  box-shadow: 0 8px 24px rgba(228, 173, 47, 0.18);
}

body[data-school-code="cxbx"] .product-card strong { color: #f7fffb; font-size: 16px; }
body[data-school-code="cxbx"] .product-card span { color: #ffd967; font-size: 18px; }

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 1440px;
  min-height: 900px;
  margin: 0;
  overflow: auto;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -20%, rgba(40, 124, 130, 0.26), transparent 48%),
    linear-gradient(145deg, #04141b 0%, #071e28 52%, #04151c 100%);
}

body { position: relative; }

@media (min-width: 1440px) and (min-height: 1000px) {
  html, body { overflow: hidden; }
}

.ambient {
  position: fixed;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.3;
  border-radius: 50%;
}

.ambient-one { width: 360px; height: 360px; left: -140px; top: 22%; background: #0c7f7b; }
.ambient-two { width: 460px; height: 460px; right: -190px; bottom: 2%; background: #0e5277; }

.dashboard {
  width: 100vw;
  min-width: 1440px;
  min-height: 900px;
  height: 100vh;
  padding: 12px 18px 10px;
  display: grid;
  grid-template-rows: 66px 136px minmax(0, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}

.topbar {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line-strong);
  position: relative;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 32%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.brand-mark {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  clip-path: circle(49.5% at 50% 50%);
  justify-self: center;
}

.heading-group { min-width: 0; }
.heading-group h1 { margin: 0; font-size: clamp(28px, 1.95vw, 36px); letter-spacing: 0.045em; font-weight: 700; }

.header-meta {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "status clock" "update clock";
  column-gap: 18px;
  align-items: center;
  text-align: right;
}

.data-status { grid-area: status; color: #b9dad6; font-size: 12px; }
.data-status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.update-line { grid-area: update; color: #9fc1c2; font-size: 12px; margin-top: 4px; }
.update-line strong { color: var(--text); font-weight: 500; }
.clock { grid-area: clock; min-width: 142px; color: var(--teal); font: 650 29px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.05em; }

.kpi-strip {
  display: grid;
  grid-template-columns: 1.18fr 0.68fr 1.14fr;
  gap: 10px;
}

.kpi-group {
  min-width: 0;
  min-height: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--line);
  border-top-color: rgba(113, 221, 209, 0.3);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(15, 53, 64, 0.9), rgba(7, 31, 40, 0.82));
  overflow: hidden;
}
.kpi-group-head { height: 24px; display: flex; align-items: center; border-bottom: 1px solid rgba(119, 210, 206, 0.12); }
.kpi-group-head strong { color: #e4f1ef; font-size: 16px; letter-spacing: 0.08em; }
.kpi-group-grid { height: calc(100% - 22px); padding-top: 6px; display: grid; gap: 6px; }
.flow-group .kpi-group-grid, .campus-group .kpi-group-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.engagement-group .kpi-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kpi-card {
  min-width: 0;
  min-height: 0;
  padding: 8px 8px 5px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent, var(--teal));
  opacity: 0.9;
}

.kpi-label { color: #c5dcda; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { margin-top: 7px; color: var(--text); font: 700 38px/1 "DIN Alternate", "Arial Narrow", sans-serif; letter-spacing: 0.01em; }
.kpi-card.is-emphasis .kpi-value { font-size: 42px; }
.kpi-value small { margin-left: 4px; color: #b3d0d0; font-size: 13px; font-weight: 600; }

.content-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(225px, 0.78fr) 44px minmax(240px, 0.85fr) minmax(294px, 1fr);
  gap: 10px;
}
.grade-context-bar { grid-column: 1 / span 9; grid-row: 2; }
.grade-chart-panel { grid-column: 1 / span 3; grid-row: 3; }
.card-chart-panel { grid-column: 5 / span 5; grid-row: 1; }
.product-panel { grid-column: 10 / span 3; grid-row: 1 / span 3; }
.school-rank-panel { grid-column: 1 / span 4; grid-row: 1; }
.points-panel { grid-column: 4 / span 3; grid-row: 3; }
.grade-rank-panel { grid-column: 7 / span 3; grid-row: 3; }
.class-rank-panel { grid-column: 1 / span 12; grid-row: 4; }

.grade-context-bar {
  min-width: 0;
  padding: 0 12px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(95, 226, 208, 0.3);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(35, 101, 105, 0.22), rgba(18, 67, 77, 0.72), rgba(35, 101, 105, 0.22));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), 0 0 24px rgba(48, 182, 170, 0.07);
}
.grade-context-copy { display: flex; align-items: baseline; gap: 9px; }
.grade-context-copy span { color: var(--teal); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; }
.grade-context-copy b { color: #8aafb1; font-size: 10px; font-weight: 500; }
.grade-context-switcher { display: flex; align-items: center; gap: 12px; }
.grade-context-switcher .nav-button { width: 28px; height: 28px; border-radius: 9px; }
.grade-context-switcher strong { min-width: 108px; color: #f7fffc; text-align: center; font-size: 26px; line-height: 1; letter-spacing: 0.1em; text-shadow: 0 0 14px rgba(95, 226, 208, 0.28); }
.grade-context-status { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.grade-context-status > span { display: flex; align-items: center; gap: 6px; color: #88acae; font-size: 10px; }
.grade-context-status > span i { width: 34px; height: 2px; border-radius: 999px; background: var(--gold); transform-origin: left; animation: countdown 10s linear infinite; }
.grade-context-status > span b { font-weight: 500; }

.panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(13, 47, 58, 0.92), rgba(6, 29, 38, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 12px 40px rgba(0, 8, 12, 0.14);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 82px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.panel-head {
  height: 52px;
  flex: 0 0 52px;
  padding: 10px 14px 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 { margin: 0; font-size: clamp(19px, 1.7vh, 22px); letter-spacing: 0.04em; font-weight: 700; }
.policy-badge, .medal-mark { color: var(--gold); border: 1px solid rgba(246, 198, 107, 0.28); background: rgba(246, 198, 107, 0.07); border-radius: 999px; padding: 5px 9px; font-size: 11px; letter-spacing: 0.08em; }

.switcher { display: flex; align-items: center; gap: 8px; }
.compact-switcher strong { min-width: 70px; text-align: center; color: var(--teal); font-size: 16px; }
.nav-button { width: 27px; height: 27px; padding: 0; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--text); background: rgba(79, 199, 232, 0.07); cursor: pointer; font-size: 19px; }
.nav-button:hover { border-color: var(--teal); color: var(--teal); }
.insight-controls { display: flex; align-items: center; gap: 8px; }
.chart-mode-tabs .tab { min-width: 45px; padding-inline: 7px; }

.chart-stage { flex: 1; min-height: 0; padding: 10px 12px 0; }
.chart-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-grid { stroke: rgba(143, 178, 180, 0.11); stroke-width: 1; }
.chart-axis-label { fill: #abd0d0; font-size: 15px; }
.chart-category { fill: #edf7f5; font-size: 16px; }
.chart-value { fill: #ffffff; font-size: 17px; font-weight: 700; }
.chart-bar { filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2)); transform-origin: bottom; animation: barIn 0.65s ease-out; }
@keyframes barIn { from { transform: scaleY(0.1); opacity: 0.25; } to { transform: scaleY(1); opacity: 1; } }

.chart-stage.card-mode { padding: 4px 13px 2px; }
.card-grade-stage { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(145px, 0.58fr) minmax(280px, 1.42fr); align-items: center; gap: 10px; }
.card-visual { min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.card-visual::before { content: ""; position: absolute; width: 156px; height: 156px; border-radius: 50%; background: var(--card-accent); opacity: 0.1; filter: blur(24px); }
.card-image-shell { width: 118px; height: 118px; display: grid; place-items: center; position: relative; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28)); animation: cardIn 0.55s ease-out; }
.card-image-shell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-image-shell.ginkgo-sheet { overflow: hidden; border-radius: 50%; background: #effbe6; }
.card-image-shell.ginkgo-sheet img { position: absolute; left: -31px; width: 330px; height: auto; max-width: none; object-fit: initial; }
.card-image-shell.ginkgo-1 img { top: -73px; }
.card-image-shell.ginkgo-2 img { top: -200px; }
.card-image-shell.ginkgo-5 img { top: -326px; }
.card-image-shell.is-wide { width: 154px; height: 90px; overflow: hidden; border-radius: 10px; }
.card-image-shell.is-wide img { width: 100%; height: 188px; object-fit: cover; object-position: center top; }
.card-image-shell.cxbx-card { width: 126px; height: 126px; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.94); }
.card-image-shell.cxbx-card img { width: 100%; height: 100%; object-fit: contain; }
.card-name-art { width: 126px; height: 126px; border: 1px solid color-mix(in srgb, var(--card-accent) 75%, white 10%); border-radius: 22px; display: grid; place-content: center; gap: 8px; position: relative; overflow: hidden; color: var(--card-accent); background: linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 18%, #071719), rgba(4, 18, 20, 0.94)); box-shadow: inset 0 0 28px color-mix(in srgb, var(--card-accent) 12%, transparent), 0 12px 24px rgba(0, 0, 0, 0.28); animation: cardIn 0.55s ease-out; }
.card-name-art::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--card-accent) 34%, transparent); border-radius: 16px; }
.card-name-art span { margin: 0; color: var(--card-accent); font-size: 30px; font-weight: 800; letter-spacing: 0.16em; text-indent: 0.16em; text-shadow: 0 0 18px color-mix(in srgb, var(--card-accent) 45%, transparent); z-index: 1; }
.card-name-art strong { margin: 0; color: #d8efec; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; z-index: 1; }
.card-visual strong { margin-top: 1px; color: var(--card-accent); font-size: 13px; letter-spacing: 0.08em; position: relative; }
.card-visual span { margin-top: 3px; color: #aac8c8; font-size: 11px; position: relative; }
@keyframes cardIn { from { transform: translateX(-10px) scale(0.94); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }

.card-grade-bars { height: 100%; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 2px; align-self: center; }
.card-grade-row { min-height: 0; padding: 1px 7px; display: grid; grid-template-columns: 43px minmax(70px, 1fr) 68px; align-items: center; gap: 7px; border-radius: 7px; background: rgba(74, 140, 145, 0.075); }
.card-grade-row > span { color: #edf6f4; font-size: 14px; line-height: 1; }
.card-grade-track { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(112, 181, 181, 0.11); }
.card-grade-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fc7e8, var(--card-accent)); transform-origin: left; animation: barWidthIn 0.65s ease-out; }
.card-grade-row > strong { text-align: right; color: var(--card-accent); font: 700 15px/1 monospace; white-space: nowrap; }
.card-grade-row > strong small { margin-left: 2px; color: #8eb1b3; font-size: 9px; font-weight: 500; }
@keyframes barWidthIn { from { transform: scaleX(0.08); opacity: 0.3; } to { transform: scaleX(1); opacity: 1; } }

.chart-foot { height: 25px; padding: 0 14px 7px; display: flex; justify-content: space-between; align-items: center; color: #87abad; font-size: 10px; }
.chart-auto-hint { display: flex; align-items: center; gap: 5px; }
.chart-auto-hint i { width: 25px; height: 2px; border-radius: 999px; background: var(--gold); transform-origin: left; animation: countdown 10s linear infinite; }
.chart-auto-hint b { font-weight: 400; }
.carousel-dots { display: flex; gap: 5px; }
.carousel-dots button { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: #3c6266; cursor: pointer; }
.carousel-dots button.active { width: 16px; border-radius: 999px; background: var(--gold); }

.ranking { flex: 1; min-height: 0; padding: 6px 12px 8px; display: grid; align-content: stretch; }
.rank-row { min-height: 0; padding: 1px 2px; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid rgba(133, 206, 201, 0.08); }
.rank-row:last-child { border-bottom: 0; }
.rank-no { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #90b4b5; background: rgba(130, 190, 190, 0.08); font: 650 12px/1 monospace; }
.rank-row:nth-child(1) .rank-no { color: #3a2a10; background: linear-gradient(145deg, #ffe3a3, #d6a24d); }
.rank-row:nth-child(2) .rank-no { color: #25323a; background: linear-gradient(145deg, #e6eef0, #94a9b0); }
.rank-row:nth-child(3) .rank-no { color: #3a271c; background: linear-gradient(145deg, #efb58e, #ad7252); }
.rank-person { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.rank-person strong { font-size: 19px; font-weight: 500; white-space: nowrap; }
.rank-person span { color: #aac7c8; font-size: clamp(10px, 0.95vh, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { color: var(--gold); font: 700 clamp(15px, 1.28vh, 17px)/1 "DIN Alternate", sans-serif; white-space: nowrap; }
.rank-score small { margin-left: 2px; color: #8aadaf; font-size: 9px; font-weight: 500; }
.ranking-school { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 10px; }
.ranking-school .rank-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px; }
.ranking-school .rank-person { display: flex; align-items: baseline; gap: 7px; line-height: 1; }
.ranking-school .rank-person strong { flex: 0 0 auto; font-size: 19px; font-weight: 500; }
.ranking-school .rank-person span { min-width: 0; color: #d4e9e7; font-size: 13px; font-weight: 650; }
.ranking-school .rank-score { font-size: 17px; }
.compact-ranking { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; column-gap: 8px; }
.compact-ranking .rank-row { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 5px; }
.compact-ranking .rank-no { width: 20px; height: 20px; font-size: 10px; }
.compact-ranking .rank-person { gap: 5px; }
.compact-ranking .rank-person strong { font-size: 19px; font-weight: 500; }
.compact-ranking .rank-person span { color: #d4e9e7; font-size: 12px; font-weight: 650; }
.compact-ranking .rank-score { font-size: 15px; }

.class-board {
  flex: 1;
  min-height: 0;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(var(--class-count), minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
}
.class-board-card {
  min-width: 0;
  min-height: 0;
  padding: 0 6px 5px;
  border: 1px solid rgba(95, 226, 208, 0.12);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(31, 82, 89, 0.22), rgba(9, 38, 47, 0.18));
  overflow: hidden;
}
.class-board-card.is-odd {
  border-color: rgba(95, 226, 208, 0.48);
  background: linear-gradient(155deg, rgba(25, 116, 99, 0.58), rgba(7, 48, 47, 0.48));
  box-shadow: inset 0 1px 0 rgba(118, 245, 222, 0.14);
}
.class-board-card.is-even {
  border-color: rgba(79, 199, 232, 0.5);
  background: linear-gradient(155deg, rgba(30, 76, 137, 0.6), rgba(8, 38, 67, 0.5));
  box-shadow: inset 0 1px 0 rgba(116, 217, 255, 0.14);
}
.class-board-card.is-even .class-board-title { border-bottom-color: rgba(79, 199, 232, 0.25); }
.class-board-card.is-even .class-board-title strong { border-color: rgba(79, 199, 232, 0.34); color: #86dcf5; background: rgba(79, 199, 232, 0.12); }
.class-board-title {
  height: 34px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border-bottom: 1px solid rgba(95, 226, 208, 0.15);
}
.class-board-title strong { padding: 3px 6px; border: 1px solid rgba(95, 226, 208, 0.22); border-radius: 6px; color: #83f0df; background: rgba(95, 226, 208, 0.08); font-size: clamp(16px, 1.35vh, 18px); font-weight: 800; line-height: 1; white-space: nowrap; }
.class-board-title span { color: #a2c1c2; font-size: clamp(9px, 0.82vh, 11px); white-space: nowrap; }
.class-board-card.is-campus .class-board-title strong {
  padding-inline: 4px;
  font-size: clamp(11px, .95vh, 13px);
  letter-spacing: -.3px;
}
.class-board-card.is-campus .class-board-title span { font-size: clamp(8px, .7vh, 10px); }
.class-board-ranking {
  height: calc(100% - 34px);
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  column-gap: 5px;
}
.class-board-row {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid rgba(133, 206, 201, 0.07);
}
.class-board-row:last-child { border-bottom: 0; }
.class-board-row > span { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; color: #90b4b5; background: rgba(130, 190, 190, 0.08); font: 700 9px/1 monospace; }
.class-board-row > strong { min-width: 0; overflow: hidden; color: #ffffff; font-size: 19px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.class-board-row > em { color: var(--gold); font: 750 clamp(15px, 1.32vh, 17px)/1 "DIN Alternate", sans-serif; text-align: right; font-style: normal; white-space: nowrap; }
.class-board-row:nth-child(1) > span { color: #3a2a10; background: linear-gradient(145deg, #ffe3a3, #d6a24d); }
.class-board-row:nth-child(2) > span { color: #25323a; background: linear-gradient(145deg, #e6eef0, #94a9b0); }
.class-board-row:nth-child(3) > span { color: #3a271c; background: linear-gradient(145deg, #efb58e, #ad7252); }
.class-board-row.is-empty { opacity: 0.45; }

.product-list { flex: 1; min-height: 0; padding: 5px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 5px; overflow: hidden; }
.product-card { min-width: 0; min-height: 0; padding: 4px; border: 1px solid rgba(246, 198, 107, 0.2); border-radius: 10px; background: linear-gradient(145deg, rgba(246, 198, 107, 0.1), rgba(30, 74, 78, 0.15)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; text-align: center; animation: productIn 0.45s ease-out; }
.product-icon { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #48320e; background: linear-gradient(145deg, #ffe1a0, #dca249); font-weight: 800; }
.product-image { width: 118px; height: 118px; max-width: calc(100% - 8px); flex: 0 0 auto; padding: 2px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, 0.92); }
.product-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-copy { width: 100%; min-width: 0; }
.product-card strong { display: block; overflow: hidden; color: #ffffff; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.product-card span { display: block; margin-top: 5px; color: var(--gold); font: 750 16px/1 monospace; }
@keyframes productIn { from { transform: translateY(4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.empty-products { grid-column: 1 / -1; height: 100%; min-height: 0; display: grid; place-items: center; padding: 10px; text-align: center; border: 1px dashed rgba(246, 198, 107, 0.22); border-radius: 13px; background: rgba(246, 198, 107, 0.035); }
.empty-products .empty-icon { width: 76px; height: 76px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 21px; color: var(--gold); background: rgba(246, 198, 107, 0.09); font-size: 32px; }
.empty-products strong { display: block; margin-bottom: 9px; color: #e5f1ef; font-size: 17px; }
.empty-products p { max-width: 190px; margin: 0; color: #8aabad; font-size: 11px; line-height: 1.7; }
.panel-note { flex: 0 0 auto; margin: 6px 13px 11px; padding-top: 7px; border-top: 1px solid var(--line); color: #718f92; font-size: 9px; }
.product-panel .panel-head { padding-inline: 10px; }
.product-panel .panel-head h2 { font-size: 19px; letter-spacing: 0; }
.product-panel .policy-badge { padding-inline: 6px; }
.product-panel .panel-note { margin-inline: 10px; font-size: 8px; }

.tab-group { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: rgba(3, 18, 24, 0.45); }
.tab { min-width: 43px; padding: 4px 8px; border: 0; border-radius: 7px; color: #73999c; background: transparent; cursor: pointer; font-size: 10px; }
.tab.active { color: #173c40; background: var(--teal); font-weight: 700; }
.context-badge { min-width: 58px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--teal); background: rgba(79, 199, 232, 0.06); text-align: center; font-size: 12px; font-weight: 650; }
.points-total { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.points-total span { color: #a9c7c7; font-size: 11px; }
.points-total strong { color: var(--gold); font: 750 22px/1 monospace; }
.points-total small { color: #8eadaf; font-size: 9px; }
.points-overview { flex: 1; min-height: 0; padding: 7px 9px 3px; display: flex; flex-direction: column; }
.points-class-list { flex: 1; min-height: 0; display: grid; grid-auto-rows: minmax(15px, 1fr); gap: 2px; }
.point-row { min-width: 0; min-height: 0; padding: 0 6px; display: grid; grid-template-columns: minmax(70px, 0.9fr) minmax(55px, 1fr) 55px; align-items: center; gap: 6px; border-radius: 6px; background: rgba(70, 132, 137, 0.07); }
.point-row.is-campus { grid-template-columns: minmax(132px, 1.25fr) minmax(42px, .75fr) 55px; }
.point-row.is-campus .point-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.25px;
}
.point-name { min-width: 0; color: #eff8f6; font-size: 14px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.point-bar { height: 5px; border-radius: 999px; background: rgba(99, 170, 171, 0.12); overflow: hidden; }
.point-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--teal)); }
.point-number { text-align: right; color: var(--gold); font: 700 15px/1 monospace; }
.pager { min-height: 20px; padding: 1px 12px 7px; display: flex; justify-content: flex-end; align-items: center; gap: 7px; color: #668b8f; font-size: 9px; }
.pager button { width: 21px; height: 19px; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: #9bc0c0; background: rgba(75, 145, 146, 0.08); cursor: pointer; }
.pager-rotation { margin-right: auto; display: flex; align-items: center; gap: 5px; }
.pager-rotation i { width: 25px; height: 2px; border-radius: 999px; background: var(--gold); transform-origin: left; animation: countdown 10s linear infinite; }

.rotation-hint { position: absolute; right: 11px; bottom: 6px; color: #62888c; font-size: 8px; display: flex; align-items: center; gap: 5px; }
.rotation-hint span { width: 25px; height: 2px; border-radius: 999px; background: var(--gold); transform-origin: left; animation: countdown 10s linear infinite; }
.rotation-hint b { font-weight: 400; }
@keyframes countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.error-screen { position: fixed; inset: 0; z-index: 20; place-items: center; background: #061821; }
.error-screen:not([hidden]) { display: grid; }
.error-card { width: 420px; padding: 34px; border: 1px solid rgba(240, 131, 132, 0.25); border-radius: 18px; background: #0d2e38; text-align: center; }
.error-icon { width: 48px; height: 48px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; color: #230f12; background: var(--red); font-weight: 900; font-size: 24px; }
.error-card h2 { margin: 0 0 9px; }
.error-card p { color: var(--muted); font-size: 13px; }

@media (max-height: 999px) {
  html, body { overflow: auto; }
  .dashboard { height: auto; min-height: 1080px; grid-template-rows: 60px 126px 840px; }
  .kpi-group { padding-top: 6px; padding-bottom: 7px; }
  .kpi-card { padding-top: 3px; }
}