/* Premium industrial-control finish. Presentation only; loaded after board theme. */
:root {
  --ui-sidebar-width: 222px;
  --premium-ink: #142842;
  --premium-steel: #456382;
  --premium-edge: #d3dfed;
  --premium-shadow: 0 2px 2px rgb(23 44 76 / 3%), 0 8px 18px rgb(23 44 76 / 6%), 0 20px 34px -25px rgb(18 47 83 / 34%);
}
.main-content {
  background: radial-gradient(ellipse at 70% 0, #fff 0, #f0f5fb 46%, #e8eef6 100%);
}
.sidebar {
  position: relative;
  background: linear-gradient(165deg, #1b3554 0%, #142b47 40%, #0e213a 100%);
  color: #d8e4f2;
  border-right: 1px solid #314763;
  box-shadow: inset -1px 0 0 rgb(255 255 255 / 4%), 9px 0 24px -20px #0d213d;
  padding: 25px 17px;
  gap: 8px;
}
.ui-sidebar-brand {
  grid-template-columns: 58px 1fr;
  gap: 3px 11px;
  margin-bottom: 20px;
  padding: 0 0 28px;
  border-bottom: 1px solid rgb(216 231 249 / 12%);
}
.ui-sidebar-brand img {
  width: 58px;
  height: 47px;
  object-fit: contain;
  padding: 4px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 3px rgb(0 0 0 / 14%), 0 7px 15px rgb(0 0 0 / 12%), inset 0 0 0 1px #eaf0f6;
}
.ui-sidebar-brand strong { color: #f8fbff; font-size: 19px; text-shadow: 0 1px 2px rgb(0 0 0 / 22%); }
.ui-sidebar-brand small { color: #8da5c2; letter-spacing: 1.1px; }
.sidebar-item {
  min-height: 51px;
  padding: 13px 14px;
  border-radius: 9px;
  border-color: transparent;
  color: #9fb4ce;
  gap: 14px;
}
.sidebar-item .si-label { font-size: 13px; letter-spacing: .4px; }
.sidebar-item .si-icon { color: #90acca; }
.sidebar-item:hover {
  color: #fff;
  background: linear-gradient(135deg, rgb(98 137 183 / 19%), rgb(58 89 131 / 18%));
  border-color: rgb(174 202 235 / 9%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}
.sidebar-item.active {
  color: #fff;
  background: linear-gradient(130deg, #436b97, #32537e 72%, #2b496d);
  border-color: #597da4;
  box-shadow: inset 0 1px 0 rgb(230 244 255 / 18%), 0 4px 8px rgb(2 13 29 / 17%), 0 13px 24px -16px rgb(0 0 0 / 80%);
}
.sidebar-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #c4dcf7;
  box-shadow: 0 0 9px rgb(165 207 250 / 28%);
}
.sidebar-item.active .si-icon { color: #eff7ff; }
.top-bar {
  min-height: 88px;
  background: linear-gradient(115deg, rgb(255 255 255 / 97%), rgb(248 252 255 / 92%));
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #d5e0ed;
  box-shadow: inset 0 -1px 0 #fff, 0 3px 13px rgb(35 61 91 / 4%);
}
.top-bar-left .logo {
  width: 58px;
  height: 46px;
  padding: 3px;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgb(40 61 86 / 4%), 0 5px 10px rgb(40 61 86 / 4%);
}
.top-bar-left .title { color: #203852; font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.top-bar-center {
  padding: 8px 22px;
  border: 1px solid #e2eaf3;
  border-radius: 9px;
  background: linear-gradient(180deg, #f0f5fa, #f9fcff);
  box-shadow: inset 0 2px 5px rgb(51 81 120 / 5%), 0 1px 0 #fff;
}
.top-bar-center .clock { color: #294a6e; font-size: 24px; letter-spacing: 1.4px; text-shadow: 0 1px 0 #fff; }
.top-bar-center .date { color: #8295ad; }
.fullscreen-hint {
  background: linear-gradient(180deg, #fff, #f1f5fa);
  border-color: #d7e1ec;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgb(28 56 90 / 4%);
}
.fullscreen-hint:hover { background: linear-gradient(180deg, #fff, #eaf1fa); border-color: #b8cae0; box-shadow: 0 4px 9px rgb(28 56 90 / 8%); }
.page-view { padding-top: 30px; }
.dashboard-header { margin-bottom: 25px; }
.dashboard-header .dh-title, .page-view > .section-title:first-child { color: #1b344f; font-size: 25px; font-weight: 750; letter-spacing: -.7px; text-shadow: 0 1px 0 #fff; }
.section-title { color: #263e5a; font-size: 16px; letter-spacing: .25px; }
.section-title > span[id] { border: 1px solid #d5e1ee; background: linear-gradient(180deg, #f4f8fd, #e8eff7); box-shadow: inset 0 1px 0 #fff; }
.scroll-control { padding: 7px 7px 7px 14px; background: linear-gradient(180deg, #fff, #f5f8fc); border-color: #d4e0ed; border-radius: 10px; box-shadow: inset 0 1px 0 #fff, 0 3px 7px rgb(28 56 90 / 5%); }
.scroll-control button { background: linear-gradient(180deg, #426a98, #284b77); border: 1px solid #294b72; border-radius: 6px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 19%), 0 2px 3px rgb(23 50 84 / 17%); }
.scroll-control button:hover { background: linear-gradient(180deg, #537ba8, #355c8a); }
.scroll-control button.paused { background: linear-gradient(180deg, #eef2f7, #e3e9f0); border-color: #d4deea; color: #657b94; box-shadow: inset 0 1px 0 #fff; }
.kpi-grid { gap: 19px; margin-bottom: 32px; }
.kpi-card {
  --kpi-color: #315d8e;
  --kpi-soft: #edf3fa;
  min-height: 167px;
  grid-template-columns: minmax(0, 1fr) 47px;
  padding: 24px 24px 20px;
  row-gap: 7px;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid #d2deeb;
  background: linear-gradient(130deg, #fff 10%, #fbfdff 58%, #eaf1f9 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(255 255 255 / 75%), var(--premium-shadow);
}
.kpi-card.green { --kpi-color: #3b746c; --kpi-soft: #eaf4f1; }
.kpi-card.red { --kpi-color: #a55461; --kpi-soft: #f6edf0; }
.kpi-card.yellow { --kpi-color: #927445; --kpi-soft: #f6f1e9; }
.kpi-card.cyan { --kpi-color: #3f7785; --kpi-soft: #eaf3f6; }
.kpi-card.purple { --kpi-color: #686787; --kpi-soft: #efeff5; }
.kpi-card.orange { --kpi-color: #9a7250; --kpi-soft: #f5efe8; }
.kpi-card.pink { --kpi-color: #95677e; --kpi-soft: #f4edf1; }
.kpi-card::before { left: 0; top: 28px; bottom: 28px; width: 4px; height: auto; border-radius: 0 4px 4px 0; box-shadow: 2px 0 6px rgb(56 88 124 / 10%); }
.kpi-card::after {
  content: "";
  pointer-events: none;
  position: absolute;
  right: -21px;
  bottom: -24px;
  width: 100px;
  height: 100px;
  border: 1px solid rgb(129 162 201 / 13%);
  border-radius: 17px;
  transform: rotate(34deg);
  box-shadow: 0 0 0 15px rgb(196 214 235 / 9%), 0 0 0 30px rgb(196 214 235 / 6%);
}
.kpi-card > * { position: relative; z-index: 1; }
.kpi-card:hover { transform: translateY(-4px); border-color: #aebfd6; box-shadow: inset 0 1px 0 #fff, 0 5px 10px rgb(29 58 94 / 6%), 0 17px 30px -12px rgb(29 58 94 / 21%); }
.kpi-card .kpi-label { color: #667e97; font-size: 12px; font-weight: 600; letter-spacing: .6px; }
.kpi-card .kpi-value { color: #213b59; font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -1.5px; text-shadow: 0 2px 0 #fff; }
.kpi-card .kpi-sub { color: #8b9bb0; font-size: 11px; letter-spacing: .15px; }
.kpi-card .kpi-icon {
  width: 47px;
  height: 47px;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, var(--kpi-soft));
  color: var(--kpi-color);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgb(73 109 147 / 5%), 0 3px 5px rgb(39 68 102 / 5%), 0 9px 15px -12px rgb(22 49 83 / 28%);
}
.daily-card, .chart-panel, .report-chart, body .urgent-card, .pm-card, .warning-card, .stat-card, .sys-section {
  border-color: #d5e0ed;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #fff 62%, #f6f9fd);
  box-shadow: inset 0 1px 0 #fff, var(--premium-shadow);
}
.daily-card { position: relative; border-top-width: 3px; padding: 20px 18px 16px; }
.daily-card.red, .daily-card.green, .daily-card.orange, .daily-card.yellow, .daily-card.blue { box-shadow: inset 0 1px 0 #fff, var(--premium-shadow); }
.daily-card.red { border-top-color: #bc7580; }
.daily-card.orange { border-top-color: #c29a74; }
.daily-card.yellow { border-top-color: #b8a477; }
.daily-card.green { border-top-color: #77a498; }
.daily-card.blue { border-top-color: #6b91bb; }
.daily-card .dc-title { color: #38516c; }
.daily-card .dc-count { font-size: 26px; font-weight: 650; }
.daily-card .dc-list { padding: 5px 7px; border: 1px solid #e4ebf4; border-radius: 7px; background: linear-gradient(180deg, #f4f7fb, #f9fbfe); box-shadow: inset 0 1px 3px rgb(33 62 99 / 4%); }
.daily-card .dc-item { border-bottom-color: #e6edf6; }
.daily-card .dc-item:hover { background: #eaf0f8; }
.chart-panel, .report-chart { padding: 25px 26px; }
.chart-panel .panel-title, .report-chart .rc-title { position: relative; padding-bottom: 17px; margin-bottom: 23px; border-bottom-color: #e5ecf5; color: #314b68; font-size: 14px; }
.chart-panel .panel-title::after, .report-chart .rc-title::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 34px; height: 2px; background: #547ca6; border-radius: 2px; }
.urgent-card.overdue { border-color: #dfbdc5; box-shadow: inset 0 1px 0 #fff, var(--premium-shadow); }
body .urgent-card:hover { transform: translateY(-3px); border-color: #acc0d8; box-shadow: inset 0 1px 0 #fff, 0 6px 12px rgb(29 58 94 / 6%), 0 17px 28px -15px rgb(29 58 94 / 22%); }
.urgent-card .uc-deadline { border-color: #dce6f2; background: linear-gradient(180deg, #f0f5fb, #f7faff); box-shadow: inset 0 1px 3px rgb(44 78 117 / 4%), 0 1px 0 #fff; }
.urgent-card .uc-name, .pm-card .pm-name { color: #31485f; }
.pm-card.red, .pm-card.orange { box-shadow: inset 0 1px 0 #fff, var(--premium-shadow); }
.pm-card .pm-problem { border-top: 1px solid rgb(179 89 100 / 6%); box-shadow: inset 0 1px 3px rgb(98 65 76 / 3%); }
.prog-bar { height: 8px; background: #e6edf5; box-shadow: inset 0 1px 2px rgb(49 77 111 / 12%), 0 1px 0 #fff; }
.prog-fill { box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%); }
.warning-card .wc-header { padding-bottom: 13px; border-bottom: 1px solid #e8edf4; }
.warning-card .wc-count { margin: 18px 0; font-size: 40px; letter-spacing: -1px; }
.warning-card .wc-list { padding: 0 12px; border: 1px solid #e5ecf4; border-radius: 7px; background: #f6f9fd; box-shadow: inset 0 1px 3px rgb(35 64 102 / 4%); }
.filter-bar { padding: 17px; background: linear-gradient(180deg, #fff, #f8fafd); border-color: #d4dfed; border-radius: 11px; box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgb(35 60 93 / 4%); }
.filter-bar input, .filter-bar select, .modal-field input:not([type="checkbox"]), .modal-field select, .modal-step-row select, table.tbl-insert input, table.tbl-insert select {
  background: linear-gradient(180deg, #f4f7fb, #fcfdff) !important;
  border-color: #cedae8 !important;
  box-shadow: inset 0 1px 3px rgb(30 58 94 / 5%), 0 1px 0 #fff;
}
.filter-bar input:focus, .filter-bar select:focus, .modal-field input:focus, .modal-field select:focus, .modal-step-row select:focus { border-color: #799abb !important; box-shadow: 0 0 0 3px rgb(111 149 190 / 12%), inset 0 1px 3px rgb(30 58 94 / 3%) !important; }
#page-projects > div:has(> .proj-table), #page-aftersale > div:has(> .as-table), #page-changelog > div:has(> .as-table) { border-color: #d4dfeb; border-radius: 11px !important; box-shadow: inset 0 1px 0 #fff, var(--premium-shadow); }
.proj-table th, .as-table th, body .step-detail-tbl th, table.tbl-insert th { background: linear-gradient(180deg, #eef3f9, #e8eff7); color: #607a97; border-bottom-color: #d2ddec; box-shadow: inset 0 1px 0 #fff; padding-block: 15px; letter-spacing: .3px; }
.proj-table td, .as-table td { padding-block: 17px; border-bottom-color: #e7eef6; }
.proj-table tbody tr:hover, .as-table tbody tr:hover { background: #f0f5fb; }
.row-action-btn, .expand-btn { background: linear-gradient(180deg, #fff, #edf3fa); border-color: #d0deed; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(31 59 96 / 4%); }
.stat-card { position: relative; overflow: hidden; padding: 27px 22px; }
.stat-card .sc-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 43px; min-height: 43px; border: 1px solid #d9e4f0; border-radius: 10px; background: linear-gradient(145deg, #fff, #edf3fa); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgb(34 64 102 / 6%); }
.stat-card .sc-value { font-size: 37px; letter-spacing: -.8px; }
.sys-section { padding: 27px; }
.sys-section .ss-title { padding-bottom: 16px; border-bottom: 1px solid #e6edf5; color: #324d6b; }
.sys-stat { background: linear-gradient(150deg, #f1f5fa, #f9fbfe); border-color: #dde6f1; box-shadow: inset 0 2px 5px rgb(40 70 110 / 4%), 0 1px 0 #fff; }
.sys-btn { border-radius: 7px; }
.sys-btn-primary { background: linear-gradient(180deg, #426b99, #294b75); border-color: #2c4f79; box-shadow: inset 0 1px 0 rgb(255 255 255 / 23%), 0 2px 3px rgb(28 51 83 / 11%), 0 6px 12px -8px rgb(17 47 85 / 42%); text-shadow: 0 1px 1px rgb(0 0 0 / 13%); }
.sys-btn-primary:hover { background: linear-gradient(180deg, #517ca8, #355c87); border-color: #40658e; box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 3px 7px rgb(28 51 83 / 15%); }
.sys-btn-ghost { background: linear-gradient(180deg, #fff, #f0f4f9); border-color: #d1ddeb; box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgb(28 51 83 / 4%); }
.sys-btn-ghost:hover { background: linear-gradient(180deg, #fff, #e7eff9); border-color: #b0c5df; }
.sys-btn-success { background: linear-gradient(180deg, #3e917c, #28775f); border-color: #2c7864; box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 3px 5px rgb(26 74 59 / 12%); }
.sys-btn-danger { background: linear-gradient(180deg, #c86571, #b04d59); border-color: #af4d5a; box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 3px 5px rgb(90 37 47 / 12%); }
.sys-btn:active, .scroll-control button:active { box-shadow: inset 0 2px 5px rgb(12 35 61 / 16%); transform: translateY(1px); }
.modal-mask { background: rgb(13 31 55 / 42%); backdrop-filter: blur(7px); }
.modal-box { padding: 28px 30px; border-color: #cbd9e9; border-radius: 15px; background: linear-gradient(140deg, #fff, #fff 68%, #f4f8fd); box-shadow: inset 0 1px 0 #fff, 0 8px 15px rgb(10 30 54 / 9%), 0 35px 85px -10px rgb(8 29 55 / 33%); }
.modal-title { color: #233e5c; border-bottom-color: #dfe8f3; font-size: 19px; }
.modal-actions { border-top-color: #dfe8f3; }
.modal-step-row, body .prj-info-grid > div, body .eq-detail-card { background: linear-gradient(145deg, #f1f6fc, #fafcfe); border-color: #dae5f1; box-shadow: inset 0 1px 3px rgb(35 65 103 / 4%), 0 1px 0 #fff; }
body .ed-step { background: linear-gradient(155deg, #fff, #f0f5fa); box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgb(32 63 102 / 4%); }
body .ed-step.done { background: linear-gradient(145deg, #f7fcf9, #eaf3ee); }
#missingDetailModal .modal-content { border-color: #cbd9e9; border-radius: 15px; background: linear-gradient(140deg, #fff, #f8fbff); box-shadow: inset 0 1px 0 #fff, 0 8px 15px rgb(10 30 54 / 9%), 0 35px 85px -10px rgb(8 29 55 / 33%); }
#tvZoomBar, #autoSaveBar { background: linear-gradient(180deg, rgb(255 255 255 / 97%), rgb(237 244 251 / 97%)); border-color: #c9d8e9; border-radius: 9px; box-shadow: inset 0 1px 0 #fff, 0 4px 8px rgb(28 53 84 / 7%), 0 12px 24px -16px rgb(28 53 84 / 25%); backdrop-filter: blur(10px); }
#tvZoomBar .tz-btn { background: linear-gradient(180deg, #fff, #e8f0f9); border-color: #cbdaec; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(34 63 100 / 4%); }

@media (min-width: 1700px) {
  :root { --ui-sidebar-width: 234px; }
  .sidebar { padding-inline: 20px; }
  .kpi-card { min-height: 176px; padding: 26px 27px 22px; }
  .kpi-card .kpi-value { font-size: 47px; }
  .daily-card { padding: 21px; }
}
@media (max-width: 1240px) {
  :root { --ui-sidebar-width: 192px; }
  .sidebar { padding-inline: 12px; }
  .ui-sidebar-brand { grid-template-columns: 49px 1fr; gap: 2px 9px; }
  .ui-sidebar-brand img { width: 49px; height: 42px; }
  .ui-sidebar-brand strong { font-size: 17px; }
  .ui-sidebar-brand small { letter-spacing: .6px; }
  .top-bar-center { padding: 7px 13px; }
  .top-bar-left .title { font-size: 15px; }
  .top-bar-left .logo { width: 47px; height: 39px; }
  .kpi-grid { gap: 15px; }
  .kpi-card { min-height: 154px; grid-template-columns: minmax(0, 1fr) 37px; padding: 21px 19px 18px; }
  .kpi-card .kpi-icon { width: 37px; height: 37px; border-radius: 10px; }
  .kpi-card .kpi-value { font-size: 38px; }
}
@media (max-width: 1024px) {
  :root { --ui-sidebar-width: 176px; }
  .sidebar { padding-inline: 11px; }
  .sidebar-item { gap: 11px; padding-inline: 10px; }
  .ui-sidebar-brand { grid-template-columns: 42px 1fr; gap: 2px 7px; }
  .ui-sidebar-brand img { width: 42px; height: 38px; }
  .ui-sidebar-brand strong { font-size: 16px; }
  .ui-sidebar-brand small { font-size: 9px; letter-spacing: .4px; }
  .top-bar-center .clock { font-size: 21px; }
  .top-bar-left .title { font-size: 15px; }
  .top-bar-right { border-top-color: #e4ebf4; }
  .dashboard-header .dh-title, .page-view > .section-title:first-child { font-size: 23px; }
  .kpi-card { min-height: 151px; grid-template-columns: minmax(0, 1fr) 43px; padding: 22px; }
  .kpi-card .kpi-icon { width: 43px; height: 43px; }
  .kpi-card .kpi-value { font-size: 40px; }
}
@media (max-width: 760px) {
  :root { --ui-sidebar-width: 0px; }
  .sidebar { padding: 9px 12px; height: 74px; min-height: 74px; gap: 7px; border-bottom-color: #314b6b; box-shadow: inset 0 -1px 0 rgb(255 255 255 / 4%), 0 4px 8px rgb(22 43 71 / 10%); }
  .ui-sidebar-brand { grid-template-columns: 42px 1fr; flex-basis: 143px; padding: 0 10px 0 0; margin: 0 5px 0 0; border-bottom: none; border-right-color: #37506c; }
  .ui-sidebar-brand img { width: 42px; height: 36px; padding: 3px; border-radius: 6px; }
  .ui-sidebar-brand strong { font-size: 15px; }
  .sidebar-item { min-height: 51px; padding: 6px; gap: 4px; border-radius: 7px; }
  .sidebar-item .si-label { font-size: 11px; letter-spacing: .3px; }
  .sidebar-item.active::before { left: 15px; right: 15px; bottom: -1px; top: auto; height: 2px; width: auto; border-radius: 2px 2px 0 0; }
  .top-bar { min-height: 0; padding: 13px 17px; }
  .top-bar-left .logo { width: 42px; height: 35px; border-radius: 6px; }
  .top-bar-left .title { font-size: 14px; letter-spacing: .1px; }
  .top-bar-center { padding: 5px 9px; border-radius: 7px; }
  .top-bar-center .clock { font-size: 19px; letter-spacing: .5px; }
  .top-bar-center .date { font-size: 9px; }
  .page-view { padding-top: 23px; }
  .dashboard-header { margin-bottom: 20px; }
  .dashboard-header .dh-title, .page-view > .section-title:first-child { font-size: 22px; }
  .kpi-grid { gap: 13px; margin-bottom: 27px; }
  .kpi-card { min-height: 148px; padding: 19px; grid-template-columns: minmax(0, 1fr) 38px; border-radius: 11px; }
  .kpi-card .kpi-icon { width: 38px; height: 38px; }
  .kpi-card .kpi-value { font-size: 37px; }
  .daily-card { padding: 19px 17px; }
  .chart-panel, .report-chart { padding: 21px; }
  .sys-section { padding: 21px; }
  .modal-box { padding: 23px; border-radius: 12px; }
  .modal-title { font-size: 17px; }
  #missingDetailModal .modal-content { border-radius: 12px; }
}
@media (max-width: 480px) {
  .top-bar { grid-template-columns: minmax(0, 1fr) 106px; padding-inline: 14px; }
  .top-bar-left .logo { width: 35px; height: 31px; }
  .top-bar-left .title { font-size: 13px; }
  .top-bar-center { padding: 5px 7px; }
  .top-bar-center .clock { font-size: 18px; }
  .kpi-grid { gap: 11px; }
  .kpi-card { min-height: 140px; padding: 17px 15px; grid-template-columns: minmax(0, 1fr) 31px; column-gap: 3px; }
  .kpi-card .kpi-icon { width: 31px; height: 33px; border-radius: 8px; }
  .kpi-card .kpi-label { font-size: 11px; letter-spacing: .1px; }
  .kpi-card .kpi-value { font-size: 34px; }
  .kpi-card .kpi-sub { font-size: 10px; }
  .kpi-card::after { width: 80px; height: 80px; }
  .chart-panel, .report-chart { padding: 18px; }
  .modal-box { padding: 19px; }
  .sys-section { padding: 19px; }
  .filter-bar { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .kpi-card:hover, body .urgent-card:hover, .sys-btn:active, .scroll-control button:active { transform: none; }
}