/* Jera AI Daily Reports — "liquid glass" on a light theme. No external resources.
   Everything is sized in rem so TV mode (html.tv) scales the whole UI. */

:root {
  /* colour */
  --accent: #1f4e8c;
  --accent-600: #1a4279;
  --accent-2: #3f6fd8;
  --page: #eef2f8;
  --text: #0f172a;
  --text-2: #3f4b5e;
  --text-3: #4d5a6e;
  --line: rgba(31, 45, 80, 0.10);
  --line-strong: rgba(31, 45, 80, 0.18);
  --track: rgba(31, 45, 80, 0.09);
  --idle: #c3cddb;

  /* glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-dense: rgba(255, 255, 255, 0.78);
  --glass-solid: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: 22px;
  --glass-filter: blur(var(--glass-blur)) saturate(180%);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  --elev: 0 8px 32px rgba(31, 45, 80, 0.10), 0 2px 6px rgba(31, 45, 80, 0.06);
  --elev-hover: 0 10px 42px rgba(31, 45, 80, 0.13), 0 3px 8px rgba(31, 45, 80, 0.08);
  --elev-lg: 0 24px 64px rgba(31, 45, 80, 0.22), 0 4px 12px rgba(31, 45, 80, 0.10);

  /* Pastel gradient families: the ONE place with colour values (colors.js maps statuses to families,
     ui.js builds the SVG <linearGradient> defs from the gs-* classes below).
       -a start   -b end   -fg text/dot on a tinted chip (end colour darkened to pass WCAG AA)
       -tint chip background (start colour at 70%)   -faint row tint   -glow soft shadow (end colour at 25%) */
  --g-green-a: #c6f3dc;  --g-green-b: #5fcf9a;  --g-green-fg: #2b6649;  --g-green-tint: rgba(198, 243, 220, 0.7);  --g-green-faint: rgba(198, 243, 220, 0.28);  --g-green-glow: rgba(95, 207, 154, 0.25);
  --g-blue-a: #cfe0ff;   --g-blue-b: #6f9ff5;   --g-blue-fg: #3b5687;   --g-blue-tint: rgba(207, 224, 255, 0.7);   --g-blue-faint: rgba(207, 224, 255, 0.3);    --g-blue-glow: rgba(111, 159, 245, 0.25);
  --g-orange-a: #ffe3c4; --g-orange-b: #f7a65c; --g-orange-fg: #7a512b; --g-orange-tint: rgba(255, 227, 196, 0.7); --g-orange-faint: rgba(255, 227, 196, 0.3);  --g-orange-glow: rgba(247, 166, 92, 0.25);
  --g-purple-a: #e6ddff; --g-purple-b: #a18cf0; --g-purple-fg: #5c4f8c; --g-purple-tint: rgba(230, 221, 255, 0.7); --g-purple-faint: rgba(230, 221, 255, 0.3);  --g-purple-glow: rgba(161, 140, 240, 0.25);
  --g-pink-a: #ffd9ea;   --g-pink-b: #ec8fb8;   --g-pink-fg: #7d4a60;   --g-pink-tint: rgba(255, 217, 234, 0.7);   --g-pink-faint: rgba(255, 217, 234, 0.3);    --g-pink-glow: rgba(236, 143, 184, 0.25);
  --g-red-a: #ffd0d0;    --g-red-b: #f07a7a;    --g-red-fg: #864141;    --g-red-tint: rgba(255, 208, 208, 0.7);    --g-red-faint: rgba(255, 208, 208, 0.3);     --g-red-glow: rgba(240, 122, 122, 0.25);
  --g-teal-a: #c9f1f1;   --g-teal-b: #4fbfc4;   --g-teal-fg: #276366;   --g-teal-tint: rgba(201, 241, 241, 0.7);   --g-teal-faint: rgba(201, 241, 241, 0.3);    --g-teal-glow: rgba(79, 191, 196, 0.25);
  --g-grey-a: #e8ecf2;   --g-grey-b: #b7c0cf;   --g-grey-fg: #565b64;   --g-grey-tint: rgba(232, 236, 242, 0.7);   --g-grey-faint: rgba(232, 236, 242, 0.34);   --g-grey-glow: rgba(148, 163, 184, 0.22);
  --bar-ink: #1b2433;   /* dark text on a gradient bar */
  --track-pale: rgba(148, 163, 184, 0.15);

  /* saturated colours: only for small text, dots, icons and focus rings */
  --ok: #16a34a;      --ok-fg: #14602f;
  --warn: #f59e0b;    --warn-fg: #8a3c0b;
  --error: #dc2626;   --error-fg: #951919;
  --info: #2563eb;    --info-fg: #1c3d9e;
  --neutral: #94a3b8; --neutral-fg: #414d60;

  /* spacing (8px scale) */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;

  /* radii */
  --r-card: 1.25rem; --r-inner: 0.875rem; --r-sm: 0.5rem; --r-pill: 999px;

  --drawer-w: 16.5rem;
  --topbar-h: 3.75rem;
  /* Self-hosted fonts (assets/fonts/fonts.css): Inter for Latin and numbers, Pretendard for Korean,
     Noto Sans SC (= Source Han Sans) for Chinese. In 中文 mode and on lang="zh-CN" fragments Noto Sans SC comes first. */
  --font: "Inter", "Pretendard Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-zh: "Inter", "Noto Sans SC", "Pretendard Variable", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  /* every font-size is multiplied by this one token (+5 %) */
  --fs-scale: 1.05;
}

/* Colour family of an element: sets --fa / --fb (gradient), --ffg (text), --ftint / --ffaint (backgrounds), --fglow.
   .tone-* are the status names used by chips, badges, KPI cards and notices. */
.fam-green, .tone-ok { --fa: var(--g-green-a); --fb: var(--g-green-b); --ffg: var(--g-green-fg); --ftint: var(--g-green-tint); --ffaint: var(--g-green-faint); --fglow: var(--g-green-glow); }
.fam-blue, .tone-info { --fa: var(--g-blue-a); --fb: var(--g-blue-b); --ffg: var(--g-blue-fg); --ftint: var(--g-blue-tint); --ffaint: var(--g-blue-faint); --fglow: var(--g-blue-glow); }
.fam-orange, .tone-warn, .tone-orange { --fa: var(--g-orange-a); --fb: var(--g-orange-b); --ffg: var(--g-orange-fg); --ftint: var(--g-orange-tint); --ffaint: var(--g-orange-faint); --fglow: var(--g-orange-glow); }
.fam-purple, .tone-purple { --fa: var(--g-purple-a); --fb: var(--g-purple-b); --ffg: var(--g-purple-fg); --ftint: var(--g-purple-tint); --ffaint: var(--g-purple-faint); --fglow: var(--g-purple-glow); }
.fam-pink, .tone-pink { --fa: var(--g-pink-a); --fb: var(--g-pink-b); --ffg: var(--g-pink-fg); --ftint: var(--g-pink-tint); --ffaint: var(--g-pink-faint); --fglow: var(--g-pink-glow); }
.fam-red, .tone-error { --fa: var(--g-red-a); --fb: var(--g-red-b); --ffg: var(--g-red-fg); --ftint: var(--g-red-tint); --ffaint: var(--g-red-faint); --fglow: var(--g-red-glow); }
.fam-teal, .tone-teal { --fa: var(--g-teal-a); --fb: var(--g-teal-b); --ffg: var(--g-teal-fg); --ftint: var(--g-teal-tint); --ffaint: var(--g-teal-faint); --fglow: var(--g-teal-glow); }
.fam-grey, .tone-neutral { --fa: var(--g-grey-a); --fb: var(--g-grey-b); --ffg: var(--g-grey-fg); --ftint: var(--g-grey-tint); --ffaint: var(--g-grey-faint); --fglow: var(--g-grey-glow); }
[class*="tone-"] { --tone: var(--fb); --tone-bg: var(--ftint); --tone-fg: var(--ffg); }

/* SVG gradient stops (see ui.js ensureDefs) */
.defs-host { position: absolute; width: 0; height: 0; overflow: hidden; }
.gs-green-a { stop-color: var(--g-green-a); } .gs-green-b { stop-color: var(--g-green-b); }
.gs-blue-a { stop-color: var(--g-blue-a); } .gs-blue-b { stop-color: var(--g-blue-b); }
.gs-orange-a { stop-color: var(--g-orange-a); } .gs-orange-b { stop-color: var(--g-orange-b); }
.gs-purple-a { stop-color: var(--g-purple-a); } .gs-purple-b { stop-color: var(--g-purple-b); }
.gs-pink-a { stop-color: var(--g-pink-a); } .gs-pink-b { stop-color: var(--g-pink-b); }
.gs-red-a { stop-color: var(--g-red-a); } .gs-red-b { stop-color: var(--g-red-b); }
.gs-teal-a { stop-color: var(--g-teal-a); } .gs-teal-b { stop-color: var(--g-teal-b); }
.gs-grey-a { stop-color: var(--g-grey-a); } .gs-grey-b { stop-color: var(--g-grey-b); }

/* Gradient fill for HTML bars, pills and swatches: left -> right, with a 1px inner top highlight. */
.gfill { background: linear-gradient(90deg, var(--fa), var(--fb)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); border-radius: var(--r-pill); }
.gtrack { height: 0.625rem; border-radius: var(--r-pill); background: var(--track-pale); overflow: hidden; }
.gtrack > .gfill { display: block; height: 100%; transform-origin: left; }
.anim .gtrack > .gfill { animation: grow-x 0.6s ease-out; }
.bar-track { fill: var(--track-pale); }
.bar-sheen { pointer-events: none; }
.glow { filter: drop-shadow(0 4px 10px var(--fglow)); }
.fdot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--fa), var(--fb)); box-shadow: inset 0 0 0 1px rgba(31, 45, 80, 0.10); }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; background: var(--page); }
html.tv { font-size: 150%; }
body {
  margin: 0; color: var(--text); font-family: var(--font);
  font-size: calc(0.875rem * var(--fs-scale)); line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
body.has-overlay, body.has-modal { overflow: hidden; }
[hidden] { display: none !important; }
a { color: var(--accent); }
h1, h2, h3, p, figure { margin: 0; }
button, input, select { font: inherit; color: inherit; }
.muted { color: var(--text-3); }
.small { font-size: calc(0.8125rem * var(--fs-scale)); }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }

/* ---------- A1: pastel mesh background ---------- */
.mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--page); pointer-events: none; }
.blob { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: 0.8; will-change: transform; animation: drift-a 60s ease-in-out infinite; }
.blob.b1 { left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, rgba(158, 197, 255, 0.9), rgba(158, 197, 255, 0)); }
.blob.b2 { right: -20vmax; top: -12vmax; background: radial-gradient(closest-side, rgba(201, 184, 255, 0.8), rgba(201, 184, 255, 0)); animation-name: drift-b; }
.blob.b3 { left: 8vmax; bottom: -30vmax; background: radial-gradient(closest-side, rgba(168, 234, 209, 0.8), rgba(168, 234, 209, 0)); animation-name: drift-c; }
.blob.b4 { right: -8vmax; bottom: -26vmax; background: radial-gradient(closest-side, rgba(255, 210, 184, 0.8), rgba(255, 210, 184, 0)); animation-name: drift-d; }
@keyframes drift-a { 50% { transform: translate3d(7vmax, 5vmax, 0) scale(1.06); } }
@keyframes drift-b { 50% { transform: translate3d(-6vmax, 7vmax, 0) scale(0.95); } }
@keyframes drift-c { 50% { transform: translate3d(8vmax, -6vmax, 0) scale(1.05); } }
@keyframes drift-d { 50% { transform: translate3d(-7vmax, -5vmax, 0) scale(1.08); } }
/* TV screens rotate and auto-scroll all day: keep the background still so the glass is not re-blurred every frame */
html.tv .blob { animation: none; }

/* thin, quiet scrollbars inside glass panels */
.table-scroll, .plist-scroll, .issue-list, .drawer, .panel-body, .seg, .code { scrollbar-width: thin; scrollbar-color: rgba(31, 45, 80, 0.28) transparent; }

/* ---------- A2: glass surfaces ---------- */
:where(.glass) { position: relative; }
.glass {
  isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); border-radius: var(--r-card);
  box-shadow: var(--glass-inset), var(--elev);
}
/* liquid highlight: a specular sheen from the top-left corner */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 40%);
  transition: opacity 0.18s ease;
  opacity: 0.85;
}
.hoverable { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.hoverable:hover { transform: translateY(-2px); box-shadow: var(--glass-inset), var(--elev-hover); }
.hoverable:hover::before { opacity: 1; background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 46%); }
.glass-pill {
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border); border-radius: var(--r-pill); box-shadow: var(--glass-inset), 0 2px 8px rgba(31, 45, 80, 0.08);
}
/* A3: dense data sits on a more opaque layer */
.dense { background: var(--glass-dense); border-radius: var(--r-inner); }

/* A4: fallbacks and performance */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: var(--glass-solid); --glass-dense: rgba(255, 255, 255, 0.96); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--glass-solid); --glass-dense: #fff; --glass-filter: none; }
}
@media (max-width: 599px) { :root { --glass-blur: 12px; } }
html.tv { --glass-blur: 12px; }

/* ---------- shell ---------- */
.drawer {
  position: fixed; inset: var(--s3) auto var(--s3) var(--s3); width: calc(var(--drawer-w) - var(--s3)); z-index: 40;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(calc(-100% - var(--s4))); transition: transform 0.22s ease; visibility: hidden;
}
body.nav-open .drawer { transform: none; visibility: visible; box-shadow: var(--glass-inset), var(--elev-lg); }
.drawer-head { height: 3.5rem; display: flex; align-items: center; padding: 0 var(--s4); flex: none; }
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--text); font-weight: 700; letter-spacing: 0.01em; }
.brand-mark {
  width: 1.875rem; height: 1.875rem; border-radius: 0.625rem;
  background: linear-gradient(135deg, var(--g-blue-a), var(--g-blue-b)); color: #132c55; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px var(--g-blue-glow);
  display: inline-flex; align-items: center; justify-content: center; font-size: calc(0.95rem * var(--fs-scale)); font-weight: 800;
}
.nav-list { list-style: none; margin: 0; padding: var(--s2) var(--s3) var(--s5); display: flex; flex-direction: column; gap: 0.25rem; }
.nav-item {
  display: flex; align-items: center; gap: var(--s3); padding: 0.55rem var(--s3); border-radius: var(--r-inner);
  color: var(--text-2); text-decoration: none; min-height: 2.875rem; border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.5); color: var(--text); }
.nav-item.active { background: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.9); color: var(--accent); box-shadow: 0 2px 10px rgba(31, 45, 80, 0.08); }
.nav-item.active .nav-label { font-weight: 700; }
.nav-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nav-label { font-size: calc(0.9375rem * var(--fs-scale)); font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; word-break: keep-all; }
.nav-fresh { font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); }
.nav-fresh.is-error { color: var(--g-red-fg); }
.nav-divider { height: 1px; background: var(--line); margin: var(--s3) var(--s2); }
.nav-section { padding: 0 var(--s3) var(--s1); }
.nav-section-link { font-size: calc(0.75rem * var(--fs-scale)); font-weight: 700; letter-spacing: 0.04em; color: var(--text-3); text-decoration: none; }
.nav-section-link:hover, .nav-section-link.active { color: var(--accent); }
.nav-empty { padding: var(--s1) var(--s3); font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-3); }

.backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(31, 45, 80, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
body.nav-open .backdrop { opacity: 1; pointer-events: auto; }

.main { min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.22s ease; }
.topbar {
  position: sticky; top: var(--s3); z-index: 20; height: var(--topbar-h); flex: none; margin: var(--s3) var(--s3) 0;
  display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4);
}
.topbar-title { font-weight: 700; font-size: calc(1rem * var(--fs-scale)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.clock { font-weight: 700; color: var(--text-2); white-space: nowrap; }
.icon-btn {
  width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.6);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); flex: none;
  box-shadow: var(--glass-inset); transition: background 0.18s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.9); color: var(--text); }
.view { width: 100%; max-width: 104rem; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); flex: 1; }

@media (min-width: 1200px) {
  body.nav-open .drawer { box-shadow: var(--glass-inset), var(--elev); }
  body.nav-open .backdrop { display: none; }
  body.nav-open .main { margin-left: var(--drawer-w); }
}
body.is-login .drawer, body.is-login .backdrop, body.is-login #menu-btn, body.is-login .topbar-title { display: none; }
body.is-login .main { margin-left: 0; }
html.tv .drawer, html.tv .backdrop, html.tv #menu-btn, html.tv .lang { display: none; }
html.tv .main { margin-left: 0 !important; }
html.tv .view { max-width: none; }

/* ---------- page head ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s5); }
.page-title { font-size: calc(1.75rem * var(--fs-scale)); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.page-sub { margin-top: var(--s1); color: var(--text-2); font-size: calc(0.9375rem * var(--fs-scale)); }
.page-hint { margin: calc(var(--s3) * -1) 0 var(--s4); color: var(--text-2); font-size: calc(0.8125rem * var(--fs-scale)); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.section-title { font-size: calc(1.0625rem * var(--fs-scale)); font-weight: 650; margin: var(--s6) 0 var(--s3); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s6) 0 var(--s3); }
.toolbar .section-title { margin: 0; }

.fresh-pill {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.25rem; padding: 0.25rem var(--s3);
  color: var(--ok-fg); font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; white-space: nowrap;
}
.fresh-pill > span + span::before { content: "·"; margin-right: var(--s2); opacity: 0.6; }
.fresh-pill > .live-dot + span::before, .fresh-pill > .icon + span::before { content: none; }
.fresh-pill .icon { width: 1rem; height: 1rem; }
.fresh-pill { color: var(--g-green-fg); }
.fresh-pill.is-frozen { color: var(--g-blue-fg); }
.fresh-pill.is-warn { color: var(--g-orange-fg); }
.fresh-pill.is-error { color: var(--g-red-fg); }
.live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--g-green-b); flex: none; box-shadow: 0 0 0 0 rgba(95, 207, 154, 0.6); animation: pulse 2s ease-out infinite; }
.is-warn .live-dot { background: var(--g-orange-b); animation: none; }
.live-dot.is-off { background: var(--g-grey-b); animation: none; }

/* ---------- layout grids ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.kpi-row.kpi-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-row.kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-row.kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--s5); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4); align-items: start; margin-top: var(--s2); }
/* both cards as tall as the row; their bodies stretch so no card ends early */
.grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.card-fill { display: flex; flex-direction: column; }
.card-fill > .card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
.card-fill > .card-body.flush { justify-content: flex-start; }
.card-fill .donut { justify-content: center; }
.card-fill .issue-list { max-height: 17rem; }
.check-none { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); margin: 0 var(--s2); border-radius: var(--r-inner); background: linear-gradient(135deg, var(--g-green-faint), var(--g-green-tint)), var(--glass-dense); color: var(--g-green-fg); font-weight: 650; }
.check-extra { margin-top: auto; padding: var(--s3) var(--s4) var(--s2); }
.check-extra-title { font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 700; color: var(--text-2); margin-bottom: var(--s3); }
.check-extra .hbars { gap: 0.6rem; }
@media (min-width: 1500px) { .card-fill .donut-chart { width: 13rem; height: 13rem; } .card-fill .donut-center { font-size: calc(1.75rem * var(--fs-scale)); } }
.grid-half { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; margin-bottom: var(--s4); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--s4); }
.card-wide { margin-bottom: var(--s4); }
@media (max-width: 1500px) { .kpi-row.kpi-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .kpi-row.kpi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid-2, .grid-half, .grid-even { grid-template-columns: minmax(0, 1fr); } }

/* ---------- card ---------- */
.card { min-width: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s4) var(--s5) 0; }
.card-title { font-size: calc(1.0625rem * var(--fs-scale)); font-weight: 650; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.card-title-alt { font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 550; color: var(--text-3); }
.card-title-alt::before { content: "· "; }
.card-sub { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-3); margin-top: 2px; }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.card-body { padding: var(--s4) var(--s5) var(--s5); }
.card-body.flush { padding: var(--s3) var(--s2) var(--s2); }
.card-attention { box-shadow: var(--glass-inset), var(--elev), 0 0 0 2px rgba(247, 166, 92, 0.32); }
.view > .card { margin-bottom: var(--s4); }

/* ---------- KPI ---------- */
.kpi { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); min-width: 0; overflow: hidden; }
.kpi[class*="tone-"] { box-shadow: var(--glass-inset), var(--elev), 0 10px 28px -6px var(--fglow); }
.kpi[class*="tone-"]::after { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--fa), var(--fb)); }
.kpi-main { flex: 1; min-width: 0; }
.kpi-label { font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; color: var(--text-2); display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.kpi-label-alt { font-weight: 500; color: var(--text-3); }
.kpi-value { margin-top: var(--s1); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s1); }
.kpi-num { font-size: calc(2rem * var(--fs-scale)); line-height: 1.15; font-weight: 750; letter-spacing: -0.02em; }
.kpi-unit { font-size: calc(0.875rem * var(--fs-scale)); color: var(--text-3); font-weight: 600; }
.kpi-sub { margin-top: var(--s1); font-size: calc(0.8125rem * var(--fs-scale)); line-height: 1.35; color: var(--text-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.kpi.tone-error .kpi-num, .kpi.tone-warn .kpi-num { color: var(--ffg); }
/* gradient text only on the primary KPI */
.kpi-primary { background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(219, 232, 255, 0.6)); }
.kpi-primary .kpi-num {
  background: linear-gradient(115deg, #16356b 0%, #2f62cf 55%, #6b5ce7 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #1f4e8c;
}
.kpi-small { padding: var(--s3) var(--s5); }
.kpi-small .kpi-num { font-size: calc(1.5rem * var(--fs-scale)); }
.ring { width: 4.75rem; height: 4.75rem; flex: none; }
.ring-track { stroke: var(--track-pale); }

/* ---------- badge / chip ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border-radius: var(--r-pill);
  background: var(--tone-bg); color: var(--tone-fg); font-size: calc(0.75rem * var(--fs-scale)); font-weight: 650; line-height: 1.5;
  white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.badge-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--tone-fg); flex: none; }
.badge.solid { background: linear-gradient(0deg, var(--tone-bg), var(--tone-bg)), rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(31, 45, 80, 0.16); }

.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
  background: var(--tone-bg); color: var(--tone-fg); font-size: calc(0.8125rem * var(--fs-scale)); line-height: 1.4; max-width: 100%;
}
.chip-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--tone-fg); flex: none; }
.chip-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-time { font-size: calc(0.75rem * var(--fs-scale)); white-space: nowrap; }
.chip.tone-ok { background: rgba(255, 255, 255, 0.7); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.chip.tone-ok .chip-time { color: var(--g-green-fg); }
button.chip { border: 0; font: inherit; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
button.chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 3px 10px rgba(31, 45, 80, 0.12); }

.ftag { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; font-weight: 650; white-space: nowrap; }
.ftag-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--fa), var(--fb)); box-shadow: inset 0 0 0 1px rgba(31, 45, 80, 0.10); }
.ftag-name { overflow: hidden; text-overflow: ellipsis; }

/* ---------- A6: controls are glass pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 2.25rem; padding: 0 var(--s4);
  border: 1px solid var(--glass-border); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.62); color: var(--text);
  font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; cursor: pointer; white-space: nowrap;
  box-shadow: var(--glass-inset), 0 2px 8px rgba(31, 45, 80, 0.08); transition: background 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.92); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn .icon { width: 1rem; height: 1rem; }
.btn-icon { width: 2.25rem; padding: 0; }
.btn-primary { background: linear-gradient(135deg, var(--g-blue-a), var(--g-blue-b)); border-color: rgba(255, 255, 255, 0.7); color: #132c55; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px var(--g-blue-glow); }
.btn-primary:hover { background: linear-gradient(135deg, #dbe8ff, #86aef7); }
.btn.is-busy .icon { animation: spin 0.9s linear infinite; }

.input, .select {
  height: 2.25rem; padding: 0 var(--s3); border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.72); font-size: calc(0.8125rem * var(--fs-scale)); max-width: 100%; box-shadow: var(--glass-inset), 0 2px 8px rgba(31, 45, 80, 0.06);
}
.select { padding-right: var(--s2); cursor: pointer; }
.search:focus-within { outline: 2px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }
.search {
  display: inline-flex; align-items: center; gap: var(--s2); height: 2.25rem; padding: 0 var(--s3); min-width: 12rem; flex: 1 1 14rem; max-width: 20rem;
  border: 1px solid var(--glass-border); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.72); color: var(--text-3);
  box-shadow: var(--glass-inset), 0 2px 8px rgba(31, 45, 80, 0.06);
}
.search .icon { width: 1rem; height: 1rem; }
.search input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text); }

.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.5); border: 1px solid var(--glass-border); max-width: 100%; overflow-x: auto; box-shadow: var(--glass-inset); }
.seg-btn {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 var(--s3); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; cursor: pointer; white-space: nowrap;
}
.seg-btn.active { background: #fff; color: var(--accent); box-shadow: 0 2px 8px rgba(31, 45, 80, 0.12); }
.seg-count { color: var(--text-3); font-weight: 600; }
/* the vehicle filter has five options: on narrow screens they wrap instead of scrolling sideways */
@media (max-width: 760px) { .toolbar-wrap .seg { flex-wrap: wrap; overflow: visible; border-radius: 1.1rem; } }
.lang .seg-btn { height: 1.75rem; padding: 0 0.7rem; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s3); }
.chipset { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.fchip {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.7rem; border-radius: var(--r-pill);
  border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.55); color: var(--text-2);
  font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; cursor: pointer; white-space: nowrap; box-shadow: var(--glass-inset);
  transition: background 0.18s ease;
}
.fchip:hover { background: rgba(255, 255, 255, 0.9); }
.fchip.active { background: linear-gradient(135deg, var(--g-blue-a), var(--g-blue-b)); border-color: rgba(255, 255, 255, 0.8); color: #132c55; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px var(--g-blue-glow); }
.fchip-count { font-weight: 600; opacity: 0.8; }

.date-nav { display: inline-flex; align-items: center; gap: var(--s1); }
.history { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); }

/* ---------- progress ---------- */
.progress { height: 0.5rem; border-radius: var(--r-pill); background: var(--track-pale); overflow: hidden; min-width: 3rem; flex: 1; }
.progress-fill { display: block; height: 100%; border-radius: var(--r-pill); transform-origin: left; }
.anim .progress-fill { animation: grow-x 0.6s ease-out; }
.step-cell { display: flex; align-items: center; gap: var(--s2); min-width: 7.5rem; }
.step-pct { font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; color: var(--text-2); min-width: 2.9rem; text-align: right; }
/* cell-wide fill by PI band with the percentage on top (like the sheet) */
.pcell { position: relative; height: 1.75rem; min-width: 4.5rem; border-radius: var(--r-pill); overflow: hidden; background: var(--ffaint); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); flex: 1; }
.pcell-fill { position: absolute; inset: 0 auto 0 0; min-width: 0.6rem; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--fa), var(--fb)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); transform-origin: left; }
.anim .pcell-fill { animation: grow-x 0.6s ease-out; }
.pcell-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 700; color: var(--bar-ink); }

/* ---------- states ---------- */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s7) var(--s4); color: var(--text-2); }
.card-body > .state, .issue-list + .state { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card-body > .state::before { content: none; }
.state-icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.75); color: var(--text-3); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s2); box-shadow: var(--glass-inset), 0 2px 8px rgba(31, 45, 80, 0.08); }
.state-title { font-weight: 650; color: var(--text); font-size: calc(1rem * var(--fs-scale)); }
.state-text { font-size: calc(0.875rem * var(--fs-scale)); max-width: 30rem; }
.state-code { font-family: Consolas, "Courier New", monospace; font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); }
.state-error .state-icon { background: var(--g-red-tint); color: var(--g-red-fg); }
.state .btn { margin-top: var(--s3); }

.skeleton { border-radius: var(--r-card); background: linear-gradient(90deg, rgba(255, 255, 255, 0.45) 25%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.45) 55%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.sk-kpi { height: 6.5rem; } .sk-card { height: 12rem; } .sk-row { height: 2.75rem; margin-bottom: var(--s2); border-radius: var(--r-inner); } .sk-tile { height: 7.5rem; margin-top: var(--s4); }

.notice {
  display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  border-radius: var(--r-inner); background: linear-gradient(135deg, var(--ffaint), var(--ftint)), var(--glass-dense);
  color: var(--tone-fg); font-size: calc(0.9375rem * var(--fs-scale)); font-weight: 600;
}
.notice .icon { margin-top: 1px; color: var(--tone-fg); }
.notice-text { flex: 1; min-width: 0; }
.notice-link { font-weight: 700; color: inherit; white-space: nowrap; }

/* ---------- table (dense layer) ---------- */
.table-scroll { overflow: auto; max-height: 72vh; -webkit-overflow-scrolling: touch; border-radius: var(--r-inner); background: var(--glass-dense); }
html.tv .table-scroll { max-height: none; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(0.8125rem * var(--fs-scale)); }
.table th, .table td { padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th, .ptable th {
  position: sticky; top: 0; z-index: 2; background: rgba(244, 247, 252, 0.97); color: var(--text-2); font-size: calc(0.75rem * var(--fs-scale)); font-weight: 700;
  white-space: nowrap; border-bottom: 1px solid var(--line-strong);
}
.th-main { display: block; }
.th-alt { display: block; font-weight: 500; color: var(--text-3); font-size: calc(0.6875rem * var(--fs-scale)); }
.table td { overflow-wrap: anywhere; }
.table td.num, .table th.num, .ptable td.num, .ptable th.num { text-align: right; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.7); }
.th-sort { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
th.num .th-sort { flex-direction: row-reverse; }
.th-arrow { font-size: calc(0.75rem * var(--fs-scale)); color: var(--idle); }
.th-sort:hover .th-arrow { color: var(--text-3); }
.th-sort.active, .th-sort.active .th-arrow { color: var(--accent); }
.cell-main { font-weight: 600; }
.cell-sub { font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); }
.col-mo { font-weight: 750; white-space: nowrap; }
.due { white-space: nowrap; }
.is-overdue { color: var(--g-red-fg); font-weight: 700; }
td.zero { color: var(--text-3); font-weight: 400; }
.sum-table .sum-avg { min-width: 10rem; }
.sum-table tr.sum-total td { background: rgba(31, 78, 140, 0.10); font-weight: 750; border-top: 1px solid var(--line-strong); }
.sum-table tr.sum-total:hover td { background: rgba(31, 78, 140, 0.10); }
.sum-table tr.sum-total td.zero { color: var(--text-3); }

/* ---------- thumbnails ---------- */
.thumb {
  position: relative; display: block; width: 4.5rem; height: 4.5rem; padding: 0; border: 1px solid var(--line); border-radius: 0.75rem;
  overflow: hidden; background: #fff; flex: none;
}
button.thumb:not(:disabled) { cursor: zoom-in; transition: transform 0.18s ease, box-shadow 0.18s ease; }
button.thumb:not(:disabled):hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(31, 45, 80, 0.18); }
.thumb-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--idle); background: rgba(240, 244, 250, 0.9); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; transition: opacity 0.2s; }
.thumb.has-img img { opacity: 1; }
.thumb-lg { width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 22rem; border-radius: var(--r-inner); }
.thumb-lg .thumb-empty .icon { width: 3rem; height: 3rem; }

/* ---------- charts ---------- */
.donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }
.donut-chart { position: relative; width: 11rem; height: 11rem; flex: none; margin: 0 auto; }
.donut-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.donut-track { stroke: var(--track-pale); }
.donut-arc { transition: stroke-width 0.18s ease, opacity 0.18s ease; }
.donut-svg:hover .donut-arc { opacity: 0.55; }
.donut-svg .donut-arc:hover { opacity: 1; stroke-width: 15.5; }
.anim .donut-arc { animation: donut-in 0.7s ease-out; }
/* centre text on a frosted disc */
.donut-disc {
  position: absolute; inset: 21%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 14px rgba(31, 45, 80, 0.08); pointer-events: none;
}
.donut-center { font-size: calc(1.5rem * var(--fs-scale)); line-height: 1.15; font-weight: 750; color: var(--text); letter-spacing: -0.02em; }
.donut-center-label { font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-2); font-weight: 650; padding: 0 0.4rem; line-height: 1.25; }
.ring .donut-arc:hover { stroke-width: 9; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 12rem; display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.legend-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 2.9rem; align-items: center; gap: var(--s2); font-size: calc(0.8125rem * var(--fs-scale));
  padding: 0.3rem 0.65rem; border-radius: var(--r-pill); background: linear-gradient(0deg, var(--ffaint), var(--ffaint)), rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.75);
}
.legend-item.zero { color: var(--text-3); background: rgba(255, 255, 255, 0.32); }
.legend-item.zero .legend-label, .legend-item.zero .legend-value { font-weight: 500; }
.legend-item.zero .legend-swatch { filter: grayscale(1); opacity: 0.5; }
.legend-swatch { display: inline-block; width: 1.25rem; height: 0.5rem; flex: none; }
.legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.legend-value { font-weight: 750; text-align: right; }
.legend-pct { color: var(--text-3); text-align: right; font-size: calc(0.75rem * var(--fs-scale)); }
.legend-item.zero .legend-pct { color: inherit; }
.chip-legend { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: var(--s4); }
.chip-legend-item { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); background: linear-gradient(0deg, var(--ffaint), var(--ffaint)), rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.75); font-size: calc(0.75rem * var(--fs-scale)); font-weight: 600; color: var(--text-2); }

.hbars { display: flex; flex-direction: column; gap: 0.875rem; }
.hbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.375rem var(--s3); font-size: calc(0.8125rem * var(--fs-scale)); }
.hbar-label { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-value { font-weight: 700; text-align: right; white-space: nowrap; }
.hbar-note { font-weight: 500; font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); margin-right: var(--s2); }
.hbar-track { grid-column: 1 / -1; min-width: 0; }
.ebar-svg { display: block; overflow: visible; }
.bar-grow { transform-box: fill-box; transform-origin: left; }
.anim .bar-grow { animation: grow-x 0.6s ease-out; }
.chart-bar { transition: opacity 0.18s ease; }
.chart-bar:hover { opacity: 0.78; }
.stack { min-width: 0; border-radius: var(--r-pill); background: var(--track-pale); }
.stack-inner { display: flex; gap: 2px; transform-origin: left; min-width: 0.5rem; }
.stack-seg { flex: 1 1 0; min-width: 5px; height: 0.75rem; }
.stack.thin .stack-seg { height: 0.5rem; }
.anim .stack-inner { animation: grow-x 0.6s ease-out; }
.ebars { display: flex; flex-direction: column; gap: 0.75rem; }
.ebar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--s3); font-size: calc(0.8125rem * var(--fs-scale)); }
.ebar-label { min-width: 0; overflow: hidden; }
.ebar-text { font-size: calc(0.75rem * var(--fs-scale)); font-weight: 750; fill: var(--text); }
.ebar-cell { min-width: 0; }
.ebar-sub { font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); margin-top: 1px; }
.ebar-text.inside { fill: var(--bar-ink); }

.timeline, .weekstrip { display: block; overflow: visible; }
.tl-lane { stroke: var(--line-strong); stroke-width: 1; }
.tl-tick { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.tl-text { font-size: calc(0.6875rem * var(--fs-scale)); fill: var(--text-3); }
.tl-lane-text { font-size: calc(0.6875rem * var(--fs-scale)); fill: var(--text-2); font-weight: 700; }
.tl-dot { stroke: #fff; stroke-width: 2; }
.tl-today { stroke: var(--g-blue-b); stroke-width: 2; stroke-linecap: round; }
.ws-current { fill: var(--g-blue-faint); }
.ws-bar { transform-box: fill-box; transform-origin: bottom; }
.anim .ws-bar { animation: grow-y 0.6s ease-out; }
.ws-value { font-size: calc(0.6875rem * var(--fs-scale)); fill: var(--text-2); font-weight: 750; }
.ws-now { fill: var(--accent); font-weight: 700; }

/* ---------- attendance ---------- */
.issue-list { list-style: none; margin: 0; padding: 0; max-height: 23rem; overflow-y: auto; }
.issue { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: var(--s3); padding: 0.55rem var(--s4); border-top: 1px solid var(--line); font-size: calc(0.8125rem * var(--fs-scale)); }
.issue:first-child { border-top: 0; }
.issue-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); min-width: 0; }
.issue-name { font-weight: 700; font-size: calc(0.875rem * var(--fs-scale)); }
.name-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: rgba(111, 159, 245, 0.55); text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 4px; }
.name-link:hover { color: var(--accent); text-decoration-color: var(--g-blue-b); }
.issue-alt { color: var(--text-3); }
.issue-team { color: var(--text-3); font-size: calc(0.75rem * var(--fs-scale)); width: 100%; }
.issue-detail { color: var(--text-2); overflow-wrap: anywhere; }
.team-card { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.team-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.team-name { font-size: calc(1rem * var(--fs-scale)); font-weight: 650; }
.team-count { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-3); white-space: nowrap; }
.team-count strong { font-size: calc(1.125rem * var(--fs-scale)); color: var(--text); }

/* ---------- vehicles ---------- */
.vgrid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.vcard { overflow: hidden; display: flex; flex-direction: column; }
.vcard[role="button"] { cursor: pointer; }
.vcard.flash { animation: flash 2s ease-out; }
.vphoto { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(226, 232, 240, 0.7)); overflow: hidden; border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0; }
.vphoto-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #a9b6c8; }
.vphoto-empty .icon { width: 3rem; height: 3rem; stroke-width: 1.2; }
.vphoto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.vphoto.has-img > img { opacity: 1; }
.vphoto-tags { position: absolute; top: var(--s3); left: var(--s3); right: var(--s3); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.vphoto-tags-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); }
.vbody { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
.vplate { font-size: calc(1.25rem * var(--fs-scale)); font-weight: 750; letter-spacing: 0.01em; line-height: 1.2; }
.vtype { color: var(--text-2); font-size: calc(0.8125rem * var(--fs-scale)); }
.vline { display: flex; align-items: center; gap: var(--s2); color: var(--text-2); font-size: calc(0.8125rem * var(--fs-scale)); }
.vline .icon { width: 1rem; height: 1rem; color: var(--text-3); }
.vuse { padding: var(--s3); border-radius: var(--r-inner); background: linear-gradient(135deg, var(--g-blue-faint), var(--g-blue-tint)), var(--glass-dense); display: flex; flex-direction: column; gap: var(--s2); font-size: calc(0.8125rem * var(--fs-scale)); }
.vuse.is-long { background: linear-gradient(135deg, var(--g-orange-faint), var(--g-orange-tint)), var(--glass-dense); }
.vuse-who { display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.vuse-who span { color: var(--text-2); }
.vuse-since { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--text-2); }
.vuse-since .badge { background: rgba(255, 255, 255, 0.85); }
.vuse-warn { font-weight: 650; color: var(--g-orange-fg); }
.vexp { display: flex; flex-direction: column; gap: 0.375rem; margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.vexp-row { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--s2); font-size: calc(0.8125rem * var(--fs-scale)); }
.vexp-label { color: var(--text-3); font-weight: 650; }
.vexp-date { color: var(--text-2); }
.vfault { display: flex; gap: var(--s2); padding: var(--s3); border-radius: var(--r-inner); background: linear-gradient(135deg, var(--g-red-faint), var(--g-red-tint)), var(--glass-dense); color: var(--g-red-fg); font-size: calc(0.8125rem * var(--fs-scale)); }
.vfault .icon { width: 1rem; height: 1rem; margin-top: 2px; }
.vfault-text { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vfault-date { font-size: calc(0.75rem * var(--fs-scale)); }
.event-list { list-style: none; margin: var(--s3) 0 0; padding: var(--s2) var(--s3); display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: var(--s1) var(--s4); background: var(--glass-dense); border-radius: var(--r-inner); }
.event { display: flex; align-items: center; gap: var(--s2); font-size: calc(0.8125rem * var(--fs-scale)); padding: 0.25rem 0; min-width: 0; }
.event-date { color: var(--text-2); white-space: nowrap; }
.event > .badge { flex: none; }
.event-plate { white-space: nowrap; }
.event-kind { white-space: nowrap; }
.event-kind { color: var(--text-3); }

/* ---------- production: hero ---------- */
.hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6);
  padding: var(--s5) var(--s6); margin-bottom: var(--s4);
  background: linear-gradient(120deg, rgba(31, 78, 140, 0.20), rgba(99, 143, 249, 0.14) 55%, rgba(201, 184, 255, 0.18)), rgba(255, 255, 255, 0.5);
}
.hero-text { min-width: 0; flex: 1 1 20rem; }
/* Korean breaks between words, not inside them */
.hero-title, .hero-sub, .page-title, .page-sub, .page-hint, .kpi-sub, .kpi-label, .card-title, .tile-label, .state-text, .notice-text { word-break: keep-all; }
.hero-title { font-size: calc(1.75rem * var(--fs-scale)); line-height: 1.25; font-weight: 750; letter-spacing: -0.015em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); color: #132c55; }
.hero-title-alt::before { content: "· "; }
.hero-sub { margin-top: var(--s2); color: var(--text-2); font-size: calc(0.875rem * var(--fs-scale)); display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.hero-sep { color: var(--text-3); }
.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.hero-chip { display: inline-flex; align-items: baseline; gap: var(--s2); padding: 0.4rem var(--s4); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.82); border: 1px solid #fff; box-shadow: 0 2px 10px rgba(31, 45, 80, 0.10); white-space: nowrap; }
.hero-chip-label { font-size: calc(0.75rem * var(--fs-scale)); font-weight: 650; color: var(--text-2); }
.hero-chip-time { font-size: calc(1rem * var(--fs-scale)); font-weight: 750; color: #132c55; }
.hero-fresh { display: inline-flex; align-items: center; gap: var(--s2); font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 600; color: var(--text-2); }

/* ---------- production: item list ---------- */
.card-list .card-body.flush { padding: var(--s2); }
.plist-scroll { overflow: auto; max-height: 78vh; -webkit-overflow-scrolling: touch; }
html.tv .plist-scroll { max-height: none; overflow: visible; }
.plist { min-width: 67.25rem; }
.ptable { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: calc(0.8125rem * var(--fs-scale)); }
.ptable-head { position: sticky; top: 0; z-index: 3; }
html.tv .ptable-head { position: static; }
.ptable th { padding: 0.45rem 0.4rem; text-align: left; white-space: nowrap; line-height: 1.3; font-size: calc(0.6875rem * var(--fs-scale)); }
.ptable .th-alt { font-size: calc(0.65rem * var(--fs-scale)); }
.ptable td { padding: 0.4rem 0.4rem; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tr.clickable { cursor: pointer; transition: background 0.18s ease; }
.ptable tr.clickable:hover td { background: rgba(255, 255, 255, 0.75); }
.ptable tr.clickable:focus-visible { outline-offset: -2px; }
.ptable th:first-child, .ptable td:first-child { padding-left: 0.6rem; }
/* fixed columns add up to 58.5rem; the note column takes the rest (at least 8.75rem) */
col.pc-thumb { width: 5.625rem; } col.pc-mo { width: 4.5rem; } col.pc-item { width: 7rem; } col.pc-factory { width: 5.5rem; }
col.pc-status { width: 6.125rem; } col.pc-step { width: 2.5rem; } col.pc-progress { width: 5rem; }
col.pc-qty, col.pc-sewn, col.pc-packed { width: 3.75rem; } col.pc-due { width: 5.25rem; } col.pc-dstatus { width: 5.75rem; }
.ptable .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ptable .badge > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.pgroup-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); width: 100%; padding: 0.55rem var(--s3); margin: 0; text-align: left;
  border: 0; border-left: 5px solid var(--fb); border-top: 1px solid var(--line);
  background: linear-gradient(90deg, var(--ftint), rgba(255, 255, 255, 0.4)), rgba(255, 255, 255, 0.86);
  font-size: calc(0.875rem * var(--fs-scale)); color: var(--text); position: sticky; left: 0;
}
button.pgroup-head { cursor: pointer; }
button.pgroup-head:hover { background: linear-gradient(90deg, var(--fa), rgba(255, 255, 255, 0.6)), #fff; }
.pgroup-caret { font-size: calc(0.6875rem * var(--fs-scale)); color: var(--text-2); width: 0.9rem; }
.pgroup-name { font-size: calc(0.9375rem * var(--fs-scale)); font-weight: 750; }
.pgroup-meta { font-weight: 650; color: var(--text-2); }
.pgroup-avg { margin-left: auto; font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); }
/* off-screen groups are not laid out or painted until they scroll into view */
.pgroup-body { content-visibility: auto; contain-intrinsic-size: auto 40rem; }
/* TV auto-scroll needs a stable page height */
html.tv .pgroup-body { content-visibility: visible; }
.note { min-width: 0; font-size: calc(0.8125rem * var(--fs-scale)); line-height: 1.4; }
.note-zh { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.note-ko { color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* original + translation: one line each, so a note never takes more than two lines until it is opened */
.note-two .note-zh, .note-two .note-ko { -webkit-line-clamp: 1; }
.note-more { display: inline-block; margin-top: 2px; padding: 0 0.45rem; border: 0; border-radius: var(--r-pill); background: var(--g-blue-tint); color: var(--g-blue-fg); font-size: calc(0.6875rem * var(--fs-scale)); font-weight: 700; line-height: 1.5; cursor: pointer; }
.note-more:hover { background: var(--g-blue-a); }
.note-none { color: var(--text-3); font-style: italic; }
.note.note-full .note-zh, .note.note-full .note-ko { display: block; -webkit-line-clamp: none; white-space: pre-wrap; overflow-wrap: anywhere; }

.pcards { display: flex; flex-direction: column; border-radius: var(--r-inner); overflow: hidden; }
.pcards .pgroup-head { position: static; }
.pcard {
  display: flex; gap: var(--s3); padding: var(--s3); margin: var(--s2) 0; text-align: left; cursor: pointer;
  background: var(--glass-dense); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--r-inner); box-shadow: 0 2px 10px rgba(31, 45, 80, 0.06);
}
.pcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.pcard-mo { font-weight: 750; font-size: calc(0.9375rem * var(--fs-scale)); }
.pcard-style { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-progress { display: flex; align-items: center; gap: var(--s2); }
.pcard-progress .pcell { height: 1.5rem; }
.pcard-step { font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; color: var(--text-2); }
.pcard-meta, .pcard-due { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem var(--s3); font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-2); }
.pcard-k { color: var(--text-3); }

.verify { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3) var(--s5); margin-top: var(--s4); font-size: calc(0.8125rem * var(--fs-scale)); border-radius: var(--r-inner); }
.verify.is-ok { background: linear-gradient(135deg, var(--g-green-faint), var(--g-green-tint)), var(--glass-dense); color: var(--g-green-fg); }
.verify.is-warn { background: linear-gradient(135deg, var(--g-orange-faint), var(--g-orange-tint)), var(--glass-dense); color: var(--g-orange-fg); }
.verify .icon { margin-top: 1px; }
.verify-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem var(--s2); font-weight: 600; min-width: 0; }
.verify-label { font-weight: 750; }
.verify-sep { opacity: 0.45; }
.verify-seg.is-bad { font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- side panel, lightbox ---------- */
.panel-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(31, 45, 80, 0.28); }
.panel-backdrop.enter { animation: fade-in 0.15s ease-out; }
.panel {
  position: fixed; inset: var(--s3) var(--s3) var(--s3) auto; z-index: 51; width: min(28rem, calc(100vw - 1.5rem));
  background: rgba(255, 255, 255, 0.72); box-shadow: var(--glass-inset), var(--elev-lg); display: flex; flex-direction: column;
}
.panel.enter { animation: slide-in 0.22s ease-out; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.panel-title { font-size: calc(1.5rem * var(--fs-scale)); font-weight: 750; overflow-wrap: anywhere; }
.panel-body { padding: var(--s5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4); }
.panel-status { display: flex; flex-wrap: wrap; gap: var(--s2); }
.panel-progress-label { font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; margin-bottom: var(--s2); color: var(--text-2); }
.panel-label { font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 700; color: var(--text-2); margin-bottom: calc(var(--s2) * -1); display: flex; gap: var(--s2); }
.panel-log { padding: var(--s3); }
.kv { display: grid; grid-template-columns: minmax(6rem, 2fr) 3fr; margin: 0; overflow: hidden; font-size: calc(0.8125rem * var(--fs-scale)); }
.kv dt, .kv dd { margin: 0; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; min-width: 0; }
.kv dt { color: var(--text-2); font-weight: 650; display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.kv-alt { color: var(--text-3); font-weight: 500; }
.kv dd.num { text-align: right; }
.kv dt:nth-last-child(2), .kv dd:last-child { border-bottom: 0; }

.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--s5); background: rgba(31, 45, 80, 0.36); animation: fade-in 0.15s ease-out; cursor: zoom-out; }
.lightbox-frame { cursor: default; max-width: min(46rem, 100%); max-height: 100%; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); background: rgba(255, 255, 255, 0.72); box-shadow: var(--glass-inset), var(--elev-lg); }
.lightbox-frame img { display: block; max-width: 100%; max-height: 70vh; min-width: 12rem; min-height: 12rem; object-fit: contain; background: #fff; border-radius: var(--r-inner); margin: 0 auto; }
.lightbox-close { position: absolute; top: var(--s3); right: var(--s3); z-index: 1; }
.lightbox-cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: calc(0.875rem * var(--fs-scale)); color: var(--text-2); padding-right: 2.5rem; }
.lightbox-cap strong { font-size: calc(1.0625rem * var(--fs-scale)); color: var(--text); }

/* ---------- overview tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 1100px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); min-width: 0; color: inherit; text-decoration: none; }
.tile-head { display: flex; align-items: center; gap: var(--s3); }
.tile-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(219, 232, 255, 0.8)); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--glass-inset), 0 4px 12px rgba(31, 78, 140, 0.14); }
.tile-title { font-size: calc(1.125rem * var(--fs-scale)); font-weight: 700; }
.tile-fresh { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-3); min-height: 1.2rem; }
.tile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.tile-stat { position: relative; padding-left: var(--s3); min-width: 0; }
.tile-stat::before { content: ""; position: absolute; left: 0; top: 0.15rem; bottom: 0.15rem; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--fa, var(--g-grey-a)), var(--fb, var(--g-grey-b))); }
.tile-value { font-size: calc(1.875rem * var(--fs-scale)); font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap; }
.tile-unit { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-3); font-weight: 600; margin-left: 0.2rem; letter-spacing: 0; }
.tile-label { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere; }
.tile-legend { display: flex; flex-wrap: wrap; gap: 0.25rem var(--s3); margin-top: calc(var(--s2) * -1); font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); }
.tile-legend-item { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.tile-empty { padding: var(--s5) 0; color: var(--text-3); }
.tile-empty.is-error { color: var(--g-red-fg); }
.tile-foot { margin-top: auto; display: flex; align-items: center; gap: var(--s1); font-size: calc(0.875rem * var(--fs-scale)); font-weight: 700; color: var(--accent); }
.tile-foot .icon { width: 1rem; height: 1rem; }
.tile > .badge { position: absolute; top: var(--s5); right: var(--s5); }

/* ---------- other reports ---------- */
.report-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s5); color: inherit; text-decoration: none; }
.report-card.is-old { color: var(--text-2); }
.report-card-top { display: flex; gap: var(--s2); }
.report-card-title { font-size: calc(1.0625rem * var(--fs-scale)); font-weight: 650; overflow-wrap: anywhere; }
.report-card-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s3); font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-3); }
.back-link { display: inline-flex; align-items: center; gap: var(--s1); margin-bottom: var(--s3); padding: 0.3rem var(--s3) 0.3rem var(--s2); font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; text-decoration: none; }
.back-link .icon { width: 1rem; height: 1rem; }
.report-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.summary { margin-bottom: var(--s4); padding: var(--s3) var(--s5); border-left: 4px solid var(--fb); border-radius: var(--r-inner); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--glass-dense); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bullets { margin: 0; padding-left: 1.25rem; }
.bullets li { margin: 0.25rem 0; overflow-wrap: anywhere; }

.help { margin-top: var(--s6); border-radius: var(--r-inner); }
.help summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); cursor: pointer; font-weight: 650; color: var(--text-2); list-style: none; border-radius: inherit; }
.help summary::-webkit-details-marker { display: none; }
.help-body { padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); }
.code { margin: 0; padding: var(--s3); overflow-x: auto; font-family: Consolas, "Courier New", monospace; font-size: calc(0.75rem * var(--fs-scale)); line-height: 1.6; white-space: pre; color: var(--text); }

/* ---------- login ---------- */
.login-wrap { min-height: calc(100vh - var(--topbar-h) - 7rem); display: flex; align-items: center; justify-content: center; }
.login { width: 100%; max-width: 23rem; padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.login-mark { width: 3rem; height: 3rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(219, 232, 255, 0.8)); color: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--glass-inset), 0 4px 12px rgba(31, 78, 140, 0.14); }
.login-title { font-size: calc(1.375rem * var(--fs-scale)); font-weight: 750; }
.login-hint { color: var(--text-2); font-size: calc(0.875rem * var(--fs-scale)); margin-bottom: var(--s2); }
.login .input, .login .btn { width: 100%; height: 2.75rem; font-size: calc(0.9375rem * var(--fs-scale)); }
.login-msg { color: var(--g-red-fg); min-height: 1.4em; font-size: calc(0.875rem * var(--fs-scale)); font-weight: 600; }

/* ---------- animation ---------- */
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes donut-in { from { stroke-dasharray: 0 100; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 207, 154, 0.6); } 70%, 100% { box-shadow: 0 0 0 0.5rem rgba(95, 207, 154, 0); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(105%); } }
@keyframes flash { 0%, 30% { box-shadow: var(--glass-inset), 0 0 0 4px rgba(111, 159, 245, 0.75), 0 12px 40px rgba(111, 159, 245, 0.35); } 100% { box-shadow: var(--glass-inset), var(--elev); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- small screens (down to 360px) ---------- */
@media (max-width: 900px) {
  .view { padding: var(--s4) var(--s3) var(--s6); }
  .page-title, .hero-title { font-size: calc(1.625rem * var(--fs-scale)); }
  .page-head { margin-bottom: var(--s4); }
  .kpi-row, .kpi-row.kpi-6, .kpi-row.kpi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .kpi-row.kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .kpi { padding: var(--s3) var(--s4); }
  .kpi-num { font-size: calc(1.875rem * var(--fs-scale)); }
  .ring { width: 3.25rem; height: 3.25rem; }
  .grid-cards, .vgrid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .tiles { gap: var(--s4); }
  .tile { padding: var(--s4); }
  .hero { padding: var(--s4); }
  .hero-side { align-items: flex-start; }
  .card-head { padding: var(--s4) var(--s4) 0; }
  .card-body { padding: var(--s3) var(--s4) var(--s4); }
  .issue { grid-template-columns: auto minmax(0, 1fr); }
  .issue-detail { grid-column: 1 / -1; }
  .search { max-width: none; flex-basis: 100%; }
  .donut-chart { width: 9.5rem; height: 9.5rem; }
  .donut-center { font-size: calc(1.25rem * var(--fs-scale)); }
  .pgroup-avg { margin-left: 0; }
}
@media (max-width: 599px) {
  .kpi-row.kpi-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-cards, .vgrid { grid-template-columns: minmax(0, 1fr); }
  .ebar-row { grid-template-columns: 6rem minmax(0, 1fr); }
  .topbar { padding: 0 var(--s3); }
  .verify { padding: var(--s3) var(--s4); }
  .panel { inset: var(--s2); width: auto; }
}
@media (max-width: 420px) {
  .date-nav { width: 100%; }
  .date-nav .date-input { flex: 1; min-width: 0; }
  .page-actions { width: 100%; }
  .kpi-row, .kpi-row.kpi-6, .kpi-row.kpi-4 { gap: var(--s2); }
  .kpi { padding: var(--s3); }
  .ring { display: none; }
}

/* ---------- v4: detail modals ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--s5); background: rgba(31, 45, 80, 0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.15s ease-out; }
.modal {
  width: min(56rem, 100%); max-height: min(92vh, 60rem); display: flex; flex-direction: column; outline: none;
  background: rgba(255, 255, 255, 0.74); box-shadow: var(--glass-inset), var(--elev-lg); animation: modal-in 0.2s ease-out;
}
.modal-person { width: min(74rem, 100%); }
.modal-person.is-locked { width: min(26rem, 100%); }
.modal-grip { display: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); flex: none; }
.modal-title { min-width: 0; flex: 1; }
.modal-body { padding: var(--s4) var(--s5) var(--s5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s4); scrollbar-width: thin; scrollbar-color: rgba(31, 45, 80, 0.4) rgba(31, 45, 80, 0.06); scrollbar-gutter: stable; }
.modal-body > * { flex: none; }
.modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); }
.msec { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.msec-title { font-size: calc(0.9375rem * var(--fs-scale)); font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.msec-alt { font-size: calc(0.75rem * var(--fs-scale)); font-weight: 550; color: var(--text-3); }
.msec-note { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); }
.msec-empty { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-3); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.mkv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font-size: calc(0.8125rem * var(--fs-scale)); padding: 0.2rem 0; }
.mkv-k { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.mkv-v { font-weight: 650; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.vm-card { padding: var(--s3) var(--s4); border-radius: var(--r-inner); background: var(--glass-dense); border: 1px solid rgba(255, 255, 255, 0.8); min-width: 0; }
.vm-card[class*="tone-"] { background: linear-gradient(135deg, var(--ffaint), var(--ftint)), var(--glass-dense); }
.vm-card-title { font-size: calc(0.75rem * var(--fs-scale)); font-weight: 700; color: var(--text-2); margin-bottom: var(--s1); display: flex; gap: var(--s2); align-items: baseline; }

.vm-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); }
.vm-plate { font-size: calc(1.5rem * var(--fs-scale)); font-weight: 750; letter-spacing: 0.01em; }
.vm-type { color: var(--text-2); font-size: calc(0.9375rem * var(--fs-scale)); }
.vm-hero { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s4); align-items: center; }
.vm-photo { border-radius: var(--r-inner); aspect-ratio: 16 / 10; }
.vm-info { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.vm-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); }
.vm-idle { font-weight: 650; color: var(--g-green-fg); font-size: calc(0.875rem * var(--fs-scale)); }
.vrec-list { list-style: none; margin: 0; padding: var(--s1) var(--s3); max-height: 19rem; overflow-y: auto; scrollbar-width: thin; }
.vrec { padding: 0.5rem 0; border-top: 1px solid var(--line); font-size: calc(0.8125rem * var(--fs-scale)); display: flex; flex-direction: column; gap: 0.15rem; }
.vrec:first-child { border-top: 0; }
.vrec-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.vrec-purpose { color: var(--text-2); }
.vrec-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); color: var(--text-2); }
.vrec-dur { color: var(--text-3); margin-left: auto; white-space: nowrap; }
.vrec-extra { color: var(--text-3); font-size: calc(0.75rem * var(--fs-scale)); overflow-wrap: anywhere; }
.vm-table { max-height: 16rem; }
.vm-care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.vm-care-date { font-size: calc(1rem * var(--fs-scale)); font-weight: 700; }
.vm-care-note { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); overflow-wrap: anywhere; }
.vm-care-upd { font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); margin-top: 2px; }
.vm-exp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s1); }
.vm-fault-text { font-weight: 650; color: var(--g-red-fg); overflow-wrap: anywhere; }
.vm-loading { display: flex; flex-direction: column; gap: 0; }

/* PIN pad */
.pm-title { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.pm-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #132c55; background: linear-gradient(135deg, var(--g-blue-a), var(--g-blue-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px var(--g-blue-glow); }
.pm-who { min-width: 0; }
.pm-name { font-size: calc(1.25rem * var(--fs-scale)); font-weight: 750; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.pm-name-alt { font-size: calc(0.9375rem * var(--fs-scale)); font-weight: 550; color: var(--text-2); }
.pm-team { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); }
.pin-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s2) 0 var(--s3); text-align: center; }
.pin-lock { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--g-purple-fg); background: linear-gradient(135deg, var(--g-purple-a), var(--g-purple-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px var(--g-purple-glow); }
.pin-title { font-size: calc(1.0625rem * var(--fs-scale)); font-weight: 700; }
.pin-hint { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-2); max-width: 20rem; word-break: keep-all; }
.pin-field { position: relative; display: block; padding: var(--s2) var(--s4); cursor: text; }
.pin-dots { display: flex; gap: var(--s3); }
.pin-dot { width: 1rem; height: 1rem; border-radius: 50%; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 2px rgba(31, 45, 80, 0.45); transition: background 0.12s ease, transform 0.12s ease; }
.pin-dot.on { background: linear-gradient(135deg, var(--g-blue-a), var(--g-blue-b)); box-shadow: inset 0 0 0 1.5px rgba(59, 86, 135, 0.55); transform: scale(1.12); }
/* the real (masked) input sits on top of the dots, invisible but focusable and typeable */
.pin-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: calc(1rem * var(--fs-scale)); }
.pin-field:focus-within .pin-dots { outline: 2px solid rgba(37, 99, 235, 0.4); outline-offset: 8px; border-radius: var(--r-pill); }
.pin-dots.shake { animation: shake 0.35s ease-in-out; }
.pin-msg { min-height: 1.3rem; font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 650; color: var(--g-red-fg); }
.is-waiting .pin-msg { color: var(--g-orange-fg); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 4.25rem); gap: var(--s3); }
.pin-key {
  height: 3.5rem; border-radius: var(--r-inner); border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.7); font-size: calc(1.375rem * var(--fs-scale)); font-weight: 650; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--glass-inset), 0 2px 8px rgba(31, 45, 80, 0.08); transition: background 0.12s ease, transform 0.12s ease;
}
.pin-key:hover { background: #fff; }
.pin-key:active { transform: scale(0.96); background: var(--g-blue-tint); }
.pin-key:disabled { opacity: 0.45; cursor: default; }
.pin-del { color: var(--text-2); font-size: calc(1.25rem * var(--fs-scale)); }

/* unlocked person view */
.pm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--s4); align-items: stretch; }
.pm-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.pm-weekbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.pm-week-label { font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 700; min-width: 6.5rem; text-align: center; }
.pm-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s2); }
.pm-days.is-loading { opacity: 0.6; }
.pm-day { padding: var(--s2); border-radius: var(--r-inner); background: var(--glass-dense); border: 1px solid rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; min-height: 9.5rem; }
.pm-day.is-weekend, .pm-day.is-holiday { background: rgba(255, 255, 255, 0.4); color: var(--text-3); }
.pm-day.is-today { box-shadow: 0 0 0 2px var(--g-blue-b); }
.pm-day-sk { height: 9.5rem; border-radius: var(--r-inner); }
.pm-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.pm-day-wd { font-weight: 750; font-size: calc(0.875rem * var(--fs-scale)); }
.pm-day-date { font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); }
.pm-day-holiday { font-size: calc(0.6875rem * var(--fs-scale)); font-weight: 650; color: var(--g-pink-fg); overflow-wrap: anywhere; }
.pm-day-none { color: var(--text-3); text-align: center; margin: auto 0; }
.pm-day-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pm-day .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pm-day-times .mkv { padding: 0.05rem 0; font-size: calc(0.75rem * var(--fs-scale)); gap: var(--s1); }
.pm-day-times .mkv-v { white-space: nowrap; }
.pm-day-reason b { font-weight: 700; color: var(--text); }
.pm-day-reason { font-size: calc(0.6875rem * var(--fs-scale)); color: var(--text-2); overflow-wrap: anywhere; line-height: 1.35; }
.pm-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); padding: var(--s3); }
.pm-sum-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.pm-sum-k { font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-2); }
.pm-sum-v { font-size: calc(1.0625rem * var(--fs-scale)); font-weight: 750; }
.pm-leave { display: flex; flex-direction: column; gap: var(--s3); background: linear-gradient(160deg, var(--g-blue-faint), rgba(255, 255, 255, 0)), var(--glass-dense); }
.pm-leave-top { display: flex; align-items: center; gap: var(--s3); }
.pm-ring { position: relative; width: 5.5rem; height: 5.5rem; flex: none; }
.pm-ring .ring { width: 100%; height: 100%; }
.pm-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.pm-ring-text strong { font-size: calc(1.375rem * var(--fs-scale)); font-weight: 750; }
.pm-ring-text span { font-size: calc(0.6875rem * var(--fs-scale)); color: var(--text-2); }
.pm-leave-facts { flex: 1; min-width: 0; }
.pm-leave-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pm-leave-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: baseline; padding: 0.35rem 0; border-top: 1px solid var(--line); font-size: calc(0.8125rem * var(--fs-scale)); }
.pm-leave-date { font-weight: 650; }
.pm-leave-type { color: var(--text-2); }
.pm-leave-days { font-weight: 700; white-space: nowrap; }

/* ---------- v4: weekly attendance table ---------- */
.card-week { margin-top: var(--s5); }
.wk-label { padding: 0.3rem 0.9rem; font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 700; white-space: nowrap; }
.fchip-toggle { margin-left: auto; }
.wk-scroll { overflow: auto; max-height: 72vh; border-radius: var(--r-inner); background: var(--glass-dense); scrollbar-width: thin; scrollbar-color: rgba(31, 45, 80, 0.28) transparent; }
html.tv .wk-scroll { max-height: none; overflow: visible; }
.wk-table { width: 100%; min-width: 56rem; border-collapse: separate; border-spacing: 0; font-size: calc(0.8125rem * var(--fs-scale)); table-layout: fixed; }
.wk-table th, .wk-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
.wk-table td.wk-cell, .wk-table th.wk-col-day { border-left: 1px solid rgba(31, 45, 80, 0.05); }
.wk-table thead th { position: sticky; top: 0; z-index: 3; background: rgba(244, 247, 252, 0.98); border-bottom: 1px solid var(--line-strong); font-size: calc(0.75rem * var(--fs-scale)); }
html.tv .wk-table thead th { position: static; }
.wk-col-name { position: sticky; left: 0; z-index: 2; width: 9.5rem; background: rgba(250, 252, 255, 0.98); font-weight: 600; }
.wk-table thead .wk-col-name { z-index: 4; }
.wk-col-sum { width: 12.5rem; }
.wk-wd { display: block; font-weight: 750; color: var(--text); font-size: calc(0.8125rem * var(--fs-scale)); }
.wk-date { display: block; font-weight: 550; color: var(--text-3); }
.wk-table thead th.wk-col-day.is-today { background: linear-gradient(180deg, var(--g-blue-a), #dfeaff); box-shadow: inset 0 3px 0 var(--g-blue-b), inset 2px 0 0 var(--g-blue-b), inset -2px 0 0 var(--g-blue-b); }
.wk-col-day.is-today .wk-wd { color: #132c55; }
.wk-col-day.is-today .wk-date { color: var(--g-blue-fg); font-weight: 700; }
.wk-col-day.is-holiday .wk-wd, .wk-col-day.is-holiday .wk-date { color: var(--text-3); }
.wk-holiday { display: block; font-size: calc(0.6875rem * var(--fs-scale)); font-weight: 650; color: var(--g-pink-fg); }
td.wk-cell.is-today { background: rgba(207, 224, 255, 0.5); box-shadow: inset 2px 0 0 var(--g-blue-b), inset -2px 0 0 var(--g-blue-b); }
td.wk-cell.is-holiday { background: rgba(232, 236, 242, 0.35); }
.wk-cell .wk-chips { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.wk-time { display: block; margin-top: 2px; font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-2); white-space: nowrap; }
.wk-none { color: var(--g-grey-b); font-weight: 700; }
.wk-team-row th, .wk-team-row td { background: linear-gradient(90deg, var(--g-blue-faint), rgba(255, 255, 255, 0)), rgba(244, 247, 252, 0.96); border-top: 1px solid var(--line-strong); }
.wk-team { font-weight: 750; font-size: calc(0.875rem * var(--fs-scale)); margin-right: var(--s2); }
.wk-team-n, .wk-team-sum { font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-2); font-weight: 600; }
.wk-name { font-size: calc(0.875rem * var(--fs-scale)); }
.wk-name-alt { display: block; font-size: calc(0.75rem * var(--fs-scale)); color: var(--text-3); font-weight: 500; }
.wk-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
.wk-counts .badge { justify-content: center; padding-left: 0.3rem; padding-right: 0.3rem; }
.wk-card .wk-counts { display: flex; }
.badge.is-zero { background: rgba(232, 236, 242, 0.45); color: var(--text-3); font-weight: 500; }
.wk-table tbody tr:hover td.wk-cell, .wk-table tbody tr:hover td.wk-col-sum { background-color: rgba(255, 255, 255, 0.85); }
.wk-cards { display: flex; flex-direction: column; gap: var(--s2); padding: 0 var(--s1) var(--s2); }
.wk-team-head { margin-top: var(--s2); padding: 0.4rem var(--s3); border-radius: var(--r-pill); background: linear-gradient(90deg, var(--g-blue-tint), rgba(255, 255, 255, 0.5)); font-weight: 750; font-size: calc(0.8125rem * var(--fs-scale)); }
.wk-card { padding: var(--s3); border: 1px solid rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; gap: var(--s2); }
.wk-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.wk-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.wk-mini-col { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.3rem 0.2rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.55); min-width: 0; align-items: center; text-align: center; }
.wk-mini-col.is-today { background: var(--g-blue-tint); }
.wk-mini-wd { font-size: calc(0.6875rem * var(--fs-scale)); font-weight: 700; color: var(--text-2); white-space: nowrap; }
.wk-mini .wk-chips { justify-content: center; }
.wk-mini .badge { padding: 0.05rem 0.3rem; font-size: calc(0.625rem * var(--fs-scale)); max-width: 100%; overflow: hidden; }
.wk-mini .badge-dot { display: none; }
.wk-mini .wk-time { font-size: calc(0.625rem * var(--fs-scale)); white-space: normal; line-height: 1.25; }

@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

@media (max-width: 900px) {
  .pm-layout { grid-template-columns: minmax(0, 1fr); }
  .pm-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pm-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fchip-toggle { margin-left: 0; }
}
/* phones: the modal is a bottom sheet */
@media (max-width: 599px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal, .modal-person, .modal-person.is-locked { width: 100%; max-height: 92vh; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0; animation: sheet-in 0.24s ease-out; }
  .modal-grip { display: block; width: 2.5rem; height: 0.25rem; border-radius: var(--r-pill); background: rgba(31, 45, 80, 0.22); margin: 0.5rem auto 0; flex: none; }
  .modal-head { padding: var(--s3) var(--s4); }
  .modal-body { padding: var(--s3) var(--s4) var(--s5); }
  .vm-hero { grid-template-columns: minmax(0, 1fr); }
  .vm-care { grid-template-columns: minmax(0, 1fr); }
  .pm-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-day { min-height: 0; }
  .pin-pad { grid-template-columns: repeat(3, minmax(4.25rem, 5.5rem)); }
}

/* ---------- v5: fonts per language ---------- */
html[lang="zh-CN"] body, :lang(zh-CN) { font-family: var(--font-zh); }
html[lang="ko"] :lang(zh-CN) { font-family: var(--font-zh); }
input, button, select, textarea { font-family: inherit; }

/* ---------- v5: app name ---------- */
.brand-text { font-size: calc(0.9375rem * var(--fs-scale)); line-height: 1.2; letter-spacing: -0.01em; }
.topbar-brand { display: none; }
html.tv .topbar-brand { display: block; font-weight: 750; font-size: calc(1rem * var(--fs-scale)); color: var(--text-2); white-space: nowrap; padding-right: var(--s3); margin-right: var(--s1); border-right: 1px solid var(--line-strong); }
.login-brand { font-size: calc(0.875rem * var(--fs-scale)); font-weight: 750; letter-spacing: 0.01em; color: var(--g-blue-fg); }

/* ---------- v5: clickable KPI cards and filters ---------- */
.kpi { position: relative; }
.kpi-click { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.kpi-click:hover { transform: translateY(-2px); box-shadow: var(--glass-inset), var(--elev), 0 12px 30px -8px rgba(31, 45, 80, 0.22); }
.kpi-click:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.4); outline-offset: 2px; }
.kpi.is-active { box-shadow: var(--glass-inset), var(--elev), 0 0 0 2px #fff, 0 0 0 4.5px var(--fb, var(--g-blue-b)), 0 10px 28px -6px var(--fglow, var(--g-blue-glow)); }
.kpi.is-active:not([class*="tone-"]) { --fb: var(--g-blue-b); --fglow: var(--g-blue-glow); }
.kpi-tag { position: absolute; top: 0.45rem; right: 0.55rem; padding: 0 0.5rem; border-radius: var(--r-pill); font-size: calc(0.6875rem * var(--fs-scale)); font-weight: 700; line-height: 1.6;
  background: linear-gradient(135deg, var(--g-blue-a), var(--g-blue-b)); color: #132c55; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.kpi-subbtn { border: 0; background: none; padding: 0; font: inherit; font-size: calc(0.8125rem * var(--fs-scale)); color: var(--g-red-fg); text-decoration: underline; text-decoration-color: rgba(240, 122, 122, 0.5); text-underline-offset: 3px; cursor: pointer; text-align: left; }
.kpi-subbtn.is-active { font-weight: 750; text-decoration-thickness: 2px; }
.filter-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.card-body .filter-pill-row { margin: var(--s2) var(--s3) var(--s3); }
.filter-pill-label { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem; border-radius: var(--r-pill); background: var(--g-blue-tint); color: var(--g-blue-fg); font-weight: 650; font-size: calc(0.8125rem * var(--fs-scale)); }
.filter-pill-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--g-blue-fg); }
.filter-pill { padding: 0.2rem 0.75rem; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.85); color: var(--text); font: inherit; font-size: calc(0.8125rem * var(--fs-scale)); font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(31, 45, 80, 0.10); }
.filter-pill:hover { background: #fff; }
.toolbar-wrap { scroll-margin-top: calc(var(--topbar-h) + var(--s3)); }
.toolbar-wrap .toolbar { margin-bottom: var(--s2); }
#att-teams, #prod-list, #prod-summary { scroll-margin-top: calc(var(--topbar-h) + var(--s3)); }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s6) 0 var(--s3); }
.section-head .section-title { margin: 0; }
.section-head .filter-pill-row { margin: 0; }
.legend-item.is-click { cursor: pointer; transition: transform 0.15s ease; }
.legend-item.is-click:hover { transform: translateX(2px); }
.legend-item.is-active { box-shadow: 0 0 0 2px var(--fb); font-weight: 750; }
.donut-arc.is-click { cursor: pointer; }
.donut-arc.is-active { stroke-width: 16; }
.sum-table tr.is-click { cursor: pointer; }
.sum-table tr.is-click:hover td { background: rgba(255, 255, 255, 0.7); }
.sum-table tr.is-active td { background: var(--g-blue-faint); }
.sum-table tr.is-active td:first-child { box-shadow: inset 3px 0 0 var(--g-blue-b); }
/* weekly table: people outside the KPI filter are dimmed */
.wk-table tr.is-dim > * { opacity: 0.32; }
.wk-table tr.is-mark .wk-col-name { box-shadow: inset 3px 0 0 var(--g-blue-b); }
.wk-card.is-dim { opacity: 0.35; }

/* ---------- v5: 팀별 현황 grid with a compact corner card ---------- */
.team-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.team-layout.has-compact { grid-template-columns: minmax(0, 1fr) minmax(150px, 170px); align-items: stretch; }
.team-compact { align-self: end; padding: var(--s3); gap: var(--s2); }
.team-compact .team-head { flex-wrap: nowrap; gap: var(--s2); }
.team-compact .team-name { font-size: calc(0.875rem * var(--fs-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-compact .team-count { font-size: calc(0.75rem * var(--fs-scale)); }
.team-compact .team-count strong { font-size: calc(0.9375rem * var(--fs-scale)); }
.team-rows { list-style: none; margin: 0; padding: var(--s1) var(--s2); display: flex; flex-direction: column; gap: 0.3rem; border-radius: var(--r-inner); }
.team-row { display: flex; align-items: center; gap: 0.4rem; font-size: calc(0.75rem * var(--fs-scale)); min-width: 0; }
.team-row .chip-dot { background: var(--tone-fg); }
.team-row-name { font-weight: 650; font-size: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.team-row-time { color: var(--tone-fg); font-weight: 650; white-space: nowrap; }
.team-row .badge { font-size: calc(0.6875rem * var(--fs-scale)); padding: 0 0.35rem; }
.team-card.is-empty { gap: var(--s1); opacity: 0.8; }
/* with a filter the cards shrink to their content (a team without matches is one line) */
.team-layout.is-filtered .team-grid { align-items: start; }
.team-none { font-size: calc(0.8125rem * var(--fs-scale)); color: var(--text-3); }
.team-card .chips { flex-wrap: wrap; }
@media (max-width: 1199px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-layout.has-compact { grid-template-columns: minmax(0, 1fr); }
  .team-compact { justify-self: end; width: 170px; }
}
@media (max-width: 759px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .team-compact { justify-self: start; width: auto; min-width: 170px; max-width: 100%; }
}

/* ---------- v5: current driver's selfie ---------- */
.selfie { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 0; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--g-blue-a), var(--g-blue-b)); color: #132c55; font: inherit; font-weight: 750; }
.selfie > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.selfie.has-img > img { opacity: 1; }
.selfie-initial { line-height: 1; }
button.selfie { cursor: zoom-in; }
.selfie-card { width: 44px; height: 44px; box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(31, 45, 80, 0.28); font-size: calc(1rem * var(--fs-scale)); }
.selfie-sm { width: 26px; height: 26px; box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgba(31, 45, 80, 0.2); font-size: calc(0.75rem * var(--fs-scale)); }
.selfie-lg { width: 160px; height: 160px; border-radius: 16px; box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(31, 45, 80, 0.18); font-size: calc(2.5rem * var(--fs-scale)); }
html.tv .selfie-card { width: 3rem; height: 3rem; }
.vdriver .selfie-card { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(31, 45, 80, 0.12), 0 4px 14px rgba(31, 45, 80, 0.28); }
.vdriver { position: absolute; left: var(--s3); bottom: var(--s3); right: var(--s3); display: flex; align-items: center; gap: var(--s2); pointer-events: none; }
.vdriver .selfie { pointer-events: auto; }
.vdriver-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.15rem 0.6rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9); color: var(--text); font-size: calc(0.75rem * var(--fs-scale)); font-weight: 700; box-shadow: 0 2px 8px rgba(31, 45, 80, 0.16); }
.vm-now { display: flex; align-items: center; gap: var(--s4); }
.vm-now-facts { flex: 1; min-width: 0; }
.tile-users { list-style: none; margin: 0; padding: var(--s2) 0 0; display: flex; flex-direction: column; gap: 0.35rem; border-top: 1px solid var(--line); }
.tile-user { display: flex; align-items: center; gap: var(--s2); font-size: calc(0.8125rem * var(--fs-scale)); min-width: 0; }
.tile-user-plate { white-space: nowrap; }
.tile-user-name { color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tile-user-time { color: var(--g-blue-fg); font-weight: 650; white-space: nowrap; }
.selfie-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--s5); background: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; animation: fade-in 0.15s ease-out; }
.selfie-figure { margin: 0; padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); align-items: center; max-width: min(92vw, 34rem); }
.selfie-figure img { display: block; max-width: 100%; max-height: 74vh; border-radius: var(--r-inner); object-fit: contain; }
.selfie-figure figcaption { font-weight: 700; font-size: calc(0.875rem * var(--fs-scale)); }
.selfie-close { position: absolute; top: var(--s4); right: var(--s4); }
@media (max-width: 599px) {
  .vm-now { flex-direction: column; align-items: stretch; }
  .vm-now .selfie-lg { align-self: center; }
}