/* Refined operations: warm porcelain, charcoal ink and the Anlin orange.
   A visual replacement above the legacy utility layer; business selectors stay intact. */
@font-face { font-family: "Anlin Sans"; src: url("../fonts/anlin-sans-ui.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Anlin Numbers"; src: url("../fonts/manrope-latin.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }
:root {
  --ops-font: "Anlin Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ops-numeric: "Anlin Numbers", var(--ops-font);
  --refined-accent: #b94813;
  --refined-accent-hover: #9c3b0e;
  --refined-soft: #fceee4;
  --refined-paper: #f5f3ef;
  --refined-ink: #292e33;
  --refined-muted: #62686b;
  --refined-line: #e8e5df;
  --refined-shadow: 0 6px 24px #36301d06, 0 1px 4px #36301d05;
}
.admin-page {
  --nav-width: 252px;
  --ops-blue: var(--refined-accent);
  --ops-ink: var(--refined-ink);
  --ops-muted: var(--refined-muted);
  --ops-line: var(--refined-line);
  --ops-surface: #fff;
  --ops-radius: 16px;
  --ui-bg: var(--refined-paper);
  --ui-text: var(--refined-ink);
  --ui-muted: var(--refined-muted);
  --ui-border: var(--refined-line);
  --ui-border-strong: #cbc9c2;
  --ui-navy: #323a3b;
  --ui-orange: var(--refined-accent);
  --ui-orange-dark: var(--refined-accent-hover);
  --ui-orange-soft: var(--refined-soft);
  --ui-font: var(--ops-font);
  --chart-grid: #ebe8e2;
  --chart-label: #68716d;
  background: var(--refined-paper) !important;
  font-family: var(--ops-font) !important;
}
.admin-page > aside {
  top: 14px !important; bottom: 14px !important; left: 14px !important; height: calc(100dvh - 28px) !important;
  width: 224px !important; padding: 24px 12px 14px !important; border: 0 !important; border-radius: 18px;
  background: #fff !important; box-shadow: var(--refined-shadow) !important;
  scrollbar-width: thin; scrollbar-color: #d4d3cd transparent;
}
.admin-page > aside .ops-brand { display: flex; gap: 12px; align-items: center; margin: 0 10px 25px; padding: 0 !important; }
.admin-page > aside .ops-brand img { width: 42px !important; height: 42px !important; border-radius: 11px !important; padding: 0; margin: 0 !important; background: transparent; }
.admin-page > aside .ops-brand h1 { color: var(--refined-ink) !important; font-size: 20px !important; line-height: 1.5 !important; letter-spacing: -.02em; }
.admin-page > aside .ops-brand p { color: var(--refined-muted) !important; font-size: 12px !important; line-height: 1.8 !important; opacity: 1 !important; }
.ops-nav-section { margin: 0 0 14px; }
.ops-nav-section-label { display: block; color: #62695b; font-size: 12px; padding: 4px 14px 8px; }
.admin-page .sidebar-nav-item, .admin-page #logout-btn { position: relative; color: #59615e !important; padding: 10px 14px !important; gap: 12px; border: 0 !important; border-radius: 9px !important; margin: 0 0 3px; min-height: 44px; }
.admin-page .sidebar-nav-item .material-symbols-outlined, .admin-page .sidebar-nav-item > svg { font-size: 21px; width: 21px; height: 21px; flex-shrink: 0; }
.admin-page .sidebar-nav-item > span:last-child { font-size: 13px !important; font-weight: 500; }
.admin-page .sidebar-nav-item:hover, .admin-page #logout-btn:hover { background: #f7f6f2 !important; color: var(--refined-ink) !important; }
.admin-page .sidebar-nav-item.bg-secondary-container { background: var(--refined-soft) !important; color: var(--refined-accent) !important; }
.admin-page .sidebar-nav-item.bg-secondary-container > span:last-child { font-weight: 650; }
.admin-page .sidebar-nav-item.bg-secondary-container::after { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.admin-page > aside #sb-avatar { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: #e9eeea !important; color: #476251 !important; border: 0 !important; font-family: var(--ops-font); }
.admin-page > aside #sb-user { color: var(--refined-ink) !important; font-size: 12px !important; line-height: 1.6 !important; }
.admin-page > aside #sb-role { color: #646c5e !important; font-size: 12px !important; letter-spacing: 0; }
.admin-page > aside .ops-profile { border-top: 1px solid var(--refined-line); padding: 16px 8px 12px !important; gap: 10px; margin: 12px 0 0; }
.admin-page > aside :where(a,button):focus-visible { outline-color: var(--refined-accent) !important; }
.admin-page > header { background: var(--refined-paper) !important; padding: 0 40px !important; height: 76px !important; border: 0 !important; box-shadow: none !important; }
.refined-breadcrumb { display: flex; align-items: center; gap: 12px; min-width: 0; }
.refined-breadcrumb > span:first-child { color: #646b5f; font-size: 12px; white-space: nowrap; }
.refined-breadcrumb > svg { color: #afb4ad; flex-shrink: 0; }
.admin-page #page-title { font-size: 13px !important; color: #39433b !important; font-weight: 550 !important; white-space: nowrap; }
.ops-header-tools { font-size: 12px; gap: 22px; font-family: var(--ops-numeric); }
.ops-header-tools .ops-state { font-family: var(--ops-font); font-size: 12px; padding: 7px 11px; background: #e7eee8; border-radius: 7px; }
.ops-header-tools .ops-state:not([data-state=healthy]) { background: #eee9df; }
.admin-page > main { padding: 14px 40px 36px !important; }
.admin-page > main > #ops-page-container { max-width: 1440px !important; }
.ops-heading { align-items: flex-start; margin-bottom: 28px; gap: 22px; }
.ops-heading h2, .oa-heading h2 { color: var(--refined-ink); font-family: var(--ops-font); font-size: 30px !important; font-weight: 600 !important; letter-spacing: -.035em; line-height: 1.5; text-wrap: balance; }
.ops-heading p { font-size: 13px; margin-top: 8px; color: #5c6559; line-height: 1.8; }
.ops-actions { padding-top: 8px; gap: 10px; }
.admin-page .ops-button, .admin-page .ops-management-page button, .admin-page label[class*="cursor-pointer"], .admin-page .oa-button { border-radius: 9px !important; min-height: 44px; font-size: 12px !important; font-weight: 550 !important; }
.admin-page .ops-button.primary, .admin-page button.bg-primary, .admin-page label.bg-primary, .admin-page .ops-management-page button.bg-primary, .admin-page #page-finance .oa-button.oa-primary, .admin-page .oa-button.oa-primary { background: var(--refined-accent) !important; color: #fff !important; border-color: var(--refined-accent) !important; box-shadow: none !important; }
.admin-page .ops-button.primary:hover, .admin-page button.bg-primary:hover, .admin-page .ops-management-page button.bg-primary:hover, .admin-page .oa-button.oa-primary:hover { background: var(--refined-accent-hover) !important; border-color: var(--refined-accent-hover) !important; }
.admin-page .ops-button.secondary, .admin-page button.bg-secondary, .admin-page .ops-management-page button.bg-secondary, .admin-page #page-finance .oa-button { background: #fff !important; color: #455149 !important; border: 1px solid #d9dcd5 !important; }
.admin-page .ops-button.secondary:hover, .admin-page button.bg-secondary:hover, .admin-page .ops-management-page button.bg-secondary:hover, .admin-page #page-finance .oa-button:hover { background: #eeefe9 !important; border-color: #c6ccc0 !important; }
.admin-page :is(.ops-button,button.bg-primary,button.bg-secondary,.oa-button):disabled, .admin-page :is(.ops-button,button.bg-primary,button.bg-secondary,.oa-button):disabled:hover { background: #e6e7e1 !important; color: #656b62 !important; border-color: #d5d8ce !important; opacity: 1 !important; box-shadow: none !important; cursor: not-allowed; }
.admin-page .ops-text-button { color: var(--refined-accent); font-weight: 500 !important; border-radius: 7px !important; }
.admin-page .ops-text-button:hover { background: var(--refined-soft); }
.admin-page :where(a,button,input,select,textarea):focus-visible { outline-color: var(--refined-accent) !important; }
.admin-page ::selection { background: #f8d4bd; color: #64321b; }
.admin-page :is(input,textarea) { caret-color: var(--refined-accent); }
.admin-page :is(input,select,textarea):not([type=checkbox]):not([type=radio]) { background: #fafaf7 !important; border-color: #d9dcd2 !important; box-shadow: none !important; border-radius: 8px !important; font-size: 13px !important; }
.admin-page :is(input,textarea)::placeholder { color: #5f6959; }
.admin-page :is(input,select,textarea):focus { border-color: var(--refined-accent) !important; outline: 2px solid #b9481350 !important; outline-offset: 1px; box-shadow: none !important; }
.admin-page :is(input[type=checkbox],input[type=radio]) { accent-color: var(--refined-accent); }
.admin-page .ops-kpis { border: 0; box-shadow: var(--refined-shadow); grid-template-columns: 1.18fr 1fr 1fr 1fr; gap: 0; padding: 6px; background: #fff; border-radius: 16px; }
.admin-page .ops-kpis > * { border-right-color: #eeece5; padding: 20px 28px; position: relative; }
.admin-page .ops-kpis > :first-child { background: #344b43; border: 0; border-radius: 11px !important; color: #fff; }
.admin-page .ops-kpis > :first-child:hover { background: #3d584e; }
.admin-page .ops-kpis > :first-child :is(span,strong,small) { color: #fff; }
.admin-page .ops-kpis > :first-child small { color: #ccd9d0; }
.refined-kpi-symbol { position: absolute; top: 22px; right: 24px; color: #c8d6cc; }
.admin-page .ops-kpis strong { font-size: 43px; font-weight: 600; line-height: 1.25; margin: 14px 0 10px; }
.admin-page .ops-kpis small { font-size: 12px; }
.admin-page .ops-kpis > :nth-child(2) strong { color: #287353; }
.admin-page .ops-kpis > :nth-child(3) strong { color: #ae6b28; }
.admin-page .ops-kpis > button:not(:first-child):hover { background: #f6f7f1; }
.ops-main-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 24px; }
.admin-page .ops-panel, .admin-page .glass-card, .admin-page .ops-management-page .glass-card { border: 0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: var(--refined-shadow) !important; }
.admin-page .ops-panel { padding: 26px; }
.admin-page .ops-table-panel { padding: 0; }
.ops-panel-heading { margin-bottom: 20px; }
.ops-panel-heading h3 { font-size: 16px; font-weight: 600; }
.ops-panel-heading p { font-size: 12px; line-height: 1.8; }
.ops-chart-total { color: #566b58; background: #eff3ec; border-radius: 8px; padding: 5px 10px; font-size: 12px; }
.ops-chart-total b { color: #365444; font-size: 22px; font-weight: 650; margin: 0 3px; }
.ops-controls-panel .ops-chart { height: 192px; }
.admin-page .control-bar { fill: #bb6e43; }
.admin-page .control-bar:hover { fill: var(--refined-accent); }
.ops-today-grid { gap: 12px; padding-top: 18px; margin-top: 16px; border-color: var(--refined-line); }
.ops-today-grid span { font-size: 12px; }
.ops-today-grid b { font-size: 20px; color: #3d5148; font-weight: 600; }
.ops-footnote { font-size: 12px; color: #646d5d; line-height: 1.8; }
.refined-host-resources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding-top: 5px; }
.refined-host-resources .ops-resource-row { margin: 0; }
.refined-host-resources .ops-resource-row > div:first-child { flex-direction: column; align-items: flex-start; gap: 10px; }
.refined-host-resources .ops-resource-row span { font-size: 12px; }
.refined-host-resources .ops-resource-row strong { font-size: 24px; font-weight: 600; color: #344a41; }
.admin-page .ops-meter { background: #eff1e9; height: 5px; }
.admin-page .ops-meter i { background: #6a8b75; }
.admin-page .ops-meter i[data-level=warning] { background: #ae6b28; }
.ops-host-summary { padding: 12px 14px; background: #f2f5ee; border-radius: 9px; margin-bottom: 22px; }
.ops-host-summary small { font-size: 12px; }
.ops-host-footer { margin-top: 20px; }
.ops-host-footer b { color: #415b49; }
.admin-page .ops-services { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 20px; padding-top: 18px; border-color: var(--refined-line); }
.admin-page .ops-service-row { display: grid; grid-template-columns: 6px minmax(0,1fr); gap: 7px; align-content: start; padding: 0; font-size: 12px; }
.admin-page .ops-service-row .state-dot { margin-top: 7px; }
.admin-page .ops-service-row strong { grid-column: 2; font-size: 12px; margin: 0; font-weight: 500; line-height: 1.7; }
.admin-page .ops-events { position: relative; }
.admin-page .ops-event { grid-template-columns: 65px minmax(0,1fr) auto; padding: 12px 0; border-color: #efede7; gap: 12px; }
.admin-page .ops-event time { font-family: var(--ops-numeric); font-size: 12px; }
.admin-page .ops-event-device { color: #4d584f; }
.admin-page .ops-event strong { font-size: 12px; background: #f0f3ec; border-radius: 5px; padding: 3px 7px; }
.admin-page .ops-event strong[data-state=warning] { background: #fff0df; }
.admin-page .ops-event strong[data-state=error] { background: #faece6; }
.admin-page .glass-card > .p-6.border-b, .admin-page .ops-management-page .glass-card > .p-6.border-b { background: #fff !important; padding: 24px 26px !important; border-color: #f0eee8 !important; }
.admin-page .ops-management-page .glass-card > .p-6.border-b h2 { font-size: 16px !important; font-weight: 600 !important; }
.admin-page table, .admin-page .ops-table { font-size: 13px; }
.admin-page table thead tr, .admin-page table th, .admin-page .ops-management-page table th { background: #f7f8f3 !important; color: #5d6758 !important; font-weight: 500 !important; font-size: 12px !important; border-color: #efeee8; }
.admin-page table td, .admin-page .ops-management-page table td { border-color: #f0eee8 !important; color: #4f5a51; font-size: 12px !important; padding-top: 16px !important; padding-bottom: 16px !important; }
.admin-page table tbody tr:hover { background: #faf6ef !important; }
.admin-page table .bg-primary-container, .admin-page .ops-management-page .bg-primary-container { background: #fff3e9 !important; color: #864829 !important; }
.admin-page .ops-management-page .bg-surface-container-highest, .admin-page .bg-surface-container-high { background: #eef1e9 !important; }
.admin-page .ops-management-page .text-secondary { color: var(--refined-accent) !important; }
.ops-channel-feedback { font-size: 12px; padding: 12px 26px; background: #fff; border-color: #f0eee8; }
.ops-page-tabs { border-radius: 10px; background: #eaece4; padding: 5px; gap: 4px; }
.admin-page .ops-page-tabs button { border-radius: 7px !important; font-size: 12px !important; }
.admin-page .ops-page-tabs button.bg-primary { background: #fff !important; color: #365443 !important; box-shadow: 0 2px 4px #303d2310 !important; }
.admin-page .ops-finance-controls { background: #f4f6ef; border-radius: 11px; }
.admin-page .ops-finance-panel { padding: 26px; }
.ops-management-note, .ops-management-status, .ops-management-message { font-size: 12px; }
.admin-page .ops-device-summary { border: 0; box-shadow: var(--refined-shadow); border-radius: 16px; background: #fff; }
.ops-device-summary strong { font-size: 36px; font-weight: 600; color: #344c40; }
.ops-device-summary > :nth-child(3) strong { color: #ae6b28; }
.admin-page .ops-device-summary > * { border-color: var(--refined-line); }
.admin-page .ops-device-summary > button:hover { background: #f4f6ee; }
.ops-device-scope { background: #eaf0e6; border: 0; padding: 20px 24px; border-radius: 12px; }
.ops-device-scope strong { font-size: 13px; font-weight: 550; color: #425b43; }
.ops-device-scope p { font-size: 12px; color: #53654d; }
.admin-page .ops-device-list { border: 0; background: #fff; border-radius: 16px; box-shadow: var(--refined-shadow); }
.ops-device-list-heading { padding: 24px 26px; }
.ops-device-list-heading h2 { font-size: 16px; font-weight: 600; }
.ops-device-list-heading p, .ops-device-feedback, .ops-device-filter-help { font-size: 12px; }
.ops-device-filters { border-color: var(--refined-line); }
.admin-page .ops-device-action { background: #f5f6f0; color: #445d49; border-color: transparent; border-radius: 7px !important; }
.admin-page .ops-device-action:hover { background: #e6ede0; }
.admin-page .ops-device-action.danger { color: #a1412e; background: #fff4ef; }
.admin-page .ops-device-action.danger:hover { background: #f9e6de; }
.admin-page #devices-table-wrap tr.bg-primary-container { background: #fff3e9 !important; }
.admin-page .ops-device-pagination { border-color: #f0eee8; }
.admin-page #page-production > .grid:first-of-type { border-radius: 16px; background: #fff; box-shadow: var(--refined-shadow); gap: 0; overflow: hidden; }
.admin-page #page-production > .grid:first-of-type > .glass-card { box-shadow: none !important; border-radius: 0 !important; border-right: 1px solid #efeee8 !important; }
.admin-page #page-production > .grid:first-of-type .text-headline-lg { font-family: var(--ops-numeric) !important; font-size: 34px !important; font-weight: 600; }
.admin-page .oa-heading { margin-bottom: 28px; }
.admin-page .oa-heading p, .admin-page .oa-muted { color: var(--refined-muted); font-size: 13px; }
.admin-page .oa-notice { border: 0; background: #eaf0e6; color: #435d46; }
.admin-page .oa-card, .admin-page .oa-history { border: 0; background: #fff; box-shadow: var(--refined-shadow); border-radius: 16px; }
.admin-page .oa-button { border-color: #d9dcd5; color: #455149; }
.admin-page .oa-button:hover { background: #eeefe9; }
.admin-page .oa-meta { color: var(--refined-muted); }
.admin-page #modal-content { border-radius: 18px !important; box-shadow: 0 24px 80px #252c2a38 !important; }
.admin-page #modal-overlay { background: #2630276b !important; }
.admin-page .ops-modal-header { padding: 20px 26px; border-color: var(--refined-line); }
.admin-page .ops-modal-actions { background: #fafaf7; border-color: var(--refined-line); padding: 18px 26px; }
.admin-page .ops-modal-close { background: #f3f4ed; border: 0; color: #63705e; }
.admin-page .ops-modal-close:hover { background: #e6e9df; }
.admin-page > footer { background: transparent !important; border: 0 !important; padding: 16px 40px 24px !important; color: #686f61; }
.admin-page .custom-scrollbar::-webkit-scrollbar-thumb { background: #d4d6cc; border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
/* Dark wall: the live percentage remains the sole source of the arc length. */
.ops-screen { --ops-night: #101e1d; --ops-cyan: #d8b898; --ops-green: #8ac5a0; --ops-amber: #e3b881; --wall-ink: #edf2eb; --wall-muted: #a7bcb0; --wall-line: #2d4540; --chart-grid: #2d4540; --chart-label: #a7bcb0; background: #101e1d; padding-inline: calc(28px * var(--s)); }
.screen-header { min-height: calc(92px * var(--s)); border-color: #2c423c; margin-bottom: calc(22px * var(--s)); }
.screen-brand strong { font-size: calc(22px * var(--s)); font-weight: 600; }
.screen-brand img { background: transparent; padding: 0; }
.screen-header-center .ops-state { padding: calc(7px * var(--s)) calc(10px * var(--s)); border-radius: 7px; background: #1b3029; font-size: calc(12px * var(--s)); }
.screen-actions > * { border-color: #40534a; background: #1b3029; color: #e0eadd; border-radius: 8px; }
.screen-actions > *:hover { background: #30493c; }
.screen-layout { gap: calc(20px * var(--s)); }
.screen-host, .screen-activity, .screen-connection, .screen-trend { background: #172b26; border: 0; border-radius: calc(14px * var(--s)); padding: calc(22px * var(--s)); }
.screen-connection { background: #1d332c; }
.screen-section-heading h2 { font-size: calc(17px * var(--s)); font-weight: 550; }
.screen-host-spec { border-color: #30483f; }
.screen-resource strong { font-size: calc(34px * var(--s)); font-weight: 550; }
.ops-screen .ops-meter { background: #314a40; height: calc(5px * var(--s)); }
.ops-screen .ops-meter i { background: #9cbea0; }
.ops-screen .ops-services { border-color: #30483f; }
.connection-heading h1 { font-size: calc(26px * var(--s)); font-weight: 550; }
.connection-heading p { color: #a7bcb0; font-size: calc(13px * var(--s)); }
.connection-ring { width: calc(306px * var(--s)); height: calc(306px * var(--s)); }
.ring-track { stroke: #3f594b; stroke-width: 2; }
.ring-value { stroke: #e5c19b; stroke-width: 5; }
.refined-ring-ticks { stroke: #6b8372; stroke-width: 1; stroke-dasharray: 1 7; opacity: .7; }
.ring-label strong { font-size: calc(68px * var(--s)); font-weight: 550; }
.screen-device-counts strong { font-size: calc(40px * var(--s)); font-weight: 550; }
.screen-business, .screen-notifications { border-color: #30483f; }
.screen-business strong { color: #d7e4d3; font-size: calc(23px * var(--s)); }
.screen-business span { font-size: calc(12px * var(--s)); }
.screen-activity .ops-event { border-color: #30483f; padding-block: calc(12px * var(--s)); }
.screen-activity .ops-event strong { font-weight: 500; }
.ops-screen .control-bar { fill: #b8926c; }
.screen-trend .screen-section-heading h2 { font-size: calc(15px * var(--s)); }
.screen-trend .screen-section-heading > span { font-size: calc(12px * var(--s)); }
.screen-trend .ops-chart { min-height: calc(100px * var(--s)); }
.screen-footer { border: 0; margin-top: calc(12px * var(--s)); padding-top: calc(8px * var(--s)); }
/* Login uses the same porcelain and ink, with the original authentication forms. */
.login-page { --ui-font: var(--ops-font); background: var(--refined-paper) !important; font-family: var(--ops-font); }
.login-page::before { display: none; }
.login-page .glass-card { width: 440px; background: #fff; border: 0; box-shadow: 0 18px 70px #39372112; border-radius: 20px; padding: 42px; backdrop-filter: none; }
.login-page .logo { width: 56px; height: 56px; margin-bottom: 22px; box-shadow: none; }
.login-page h1 { font-family: var(--ops-font); font-size: 24px; font-weight: 600; color: var(--refined-ink); }
.login-page .sub { color: var(--refined-muted); font-size: 12px; margin-top: 9px; }
.login-page .field-label { font-weight: 500; color: #525f54; }
.login-page .input-wrap input { font-family: var(--ops-font); background: #f8f9f4; color: var(--refined-ink); border-color: #d9ddd2; box-shadow: none; height: 48px; }
.login-page .input-wrap input::placeholder { color: #5f6959; }
.login-page .input-wrap input:focus { border-color: var(--refined-accent); box-shadow: none; outline: 2px solid #b9481350; outline-offset: 1px; }
.login-page .btn { background: var(--refined-accent); font-family: var(--ops-font); border-radius: 9px; min-height: 48px; box-shadow: none; border: 0; }
.login-page .btn:hover { background: var(--refined-accent-hover); box-shadow: none; transform: none; }
.login-page #password-form > p:first-child { color: var(--refined-ink) !important; }
.login-page #password-form > p:nth-child(2) { color: var(--refined-muted) !important; }
.login-page .err.ok { color: #287353; }
.login-page :focus-visible { outline-color: var(--refined-accent) !important; }
@media (min-width:1200px) and (min-height:800px) { .screen-layout { grid-template-rows: minmax(min-content,1fr) calc(204px * var(--s)); } }
@media (max-width:1200px) {
  .admin-page { --nav-width: 238px; }
  .admin-page > aside { width: 210px !important; }
  .admin-page > header { padding-inline: 28px !important; }
  .admin-page > main { padding: 14px 28px 30px !important; }
  .admin-page .ops-kpis > * { padding: 20px; }
  .refined-kpi-symbol { right: 15px; }
  .ops-main-grid { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 18px; }
  .refined-host-resources { gap: 10px; }
  .refined-host-resources .ops-resource-row strong { font-size: 21px; }
  .admin-page .ops-panel { padding: 22px; }
  .admin-page .ops-table-panel { padding: 0; }
}
@media (max-width:1000px) {
  .ops-main-grid { grid-template-columns: 1fr; }
  .admin-page .ops-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-page .ops-kpis > :first-child { border-radius: 10px !important; }
  .admin-page .ops-kpis > :nth-child(-n+2) { border-bottom: 0; }
  .admin-page .ops-kpis > :nth-child(3), .admin-page .ops-kpis > :nth-child(4) { border-top: 1px solid var(--refined-line); }
  .screen-host, .screen-activity, .screen-connection, .screen-trend { padding: 20px; }
  .screen-activity { row-gap: 0; }
}
@media (max-width:860px) {
  .admin-page { --nav-width: 0px; }
  .admin-page > aside { top: 0 !important; bottom: 0 !important; left: 0 !important; height: 100dvh !important; width: 258px !important; border-radius: 0 16px 16px 0; padding-top: 22px !important; transform: translateX(-100%); }
  .admin-page.ops-nav-open > aside { transform: none; }
  .admin-page > aside .ops-brand { margin-bottom: 24px; }
  .admin-page .ops-nav-close { top: 24px; right: 8px; color: #66735f; border: 0; background: #f3f4ed; }
  .admin-page > header { padding: 0 18px !important; height: 68px !important; gap: 12px; }
  .refined-breadcrumb > span:first-child, .refined-breadcrumb > svg { display: none; }
  .ops-header-tools { margin-left: auto; }
  .ops-header-tools .ops-state { font-size: 12px; padding: 7px 8px; }
  .admin-page > main { padding: 14px 18px 28px !important; }
  .ops-heading { gap: 14px; margin-bottom: 22px; }
  .ops-heading h2, .oa-heading h2 { font-size: 27px !important; }
  .ops-heading p { font-size: 12px; }
  .ops-actions { padding-top: 0; }
  .admin-page .ops-kpis > * { padding: 18px; }
  .admin-page .ops-kpis strong { font-size: 36px; }
  .admin-page .ops-kpis span { font-size: 12px; }
  .admin-page .ops-kpis small { font-size: 12px; }
  .admin-page .ops-panel { padding: 20px; }
  .admin-page .ops-table-panel { padding: 0; }
  .admin-page .ops-management-page .glass-card > .p-6.border-b { padding: 20px !important; }
  .admin-page :is(input,select,textarea):not([type=checkbox]):not([type=radio]), .admin-page .ops-management-page input:not([type=checkbox]), .admin-page #modal-content :is(input,select,textarea) { font-size: 16px !important; }
  .ops-channel-feedback { padding: 12px 20px; }
  .admin-page .ops-finance-panel { padding: 20px; }
  .admin-page > footer { padding: 16px 18px !important; }
  .screen-header-center { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .screen-header-center .ops-state { padding: 7px 9px; }
  .screen-trend .ops-chart { min-height: 150px; }
  .screen-activity .ops-event strong { padding: 2px 0; }
  .screen-host, .screen-activity, .screen-connection, .screen-trend { border-radius: 12px; }
  .screen-header { min-height: 0; }
  .login-page .glass-card { padding: 32px 24px; }
  .login-page .input-wrap input { font-size: 16px; }
}
@media (max-width:700px) {
  .admin-page .ops-device-list { box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
  .ops-device-list-heading { padding: 4px 0 20px; }
  .admin-page #devices-table-wrap .ops-device-row { border: 0; box-shadow: var(--refined-shadow); border-radius: 12px; padding: 14px; }
  .ops-device-row td:first-child { left: 14px; }
  .ops-device-scope { padding: 18px; }
  .admin-page .ops-device-summary strong { font-size: 30px; }
  .refined-host-resources { gap: 12px; }
  .refined-host-resources .ops-resource-row strong { font-size: 22px; }
}
@media (max-width:360px) {
  .ops-header-tools .ops-state { max-width: 120px; white-space: normal; }
  .admin-page .ops-kpis > * { padding: 14px; }
  .refined-kpi-symbol { display: none; }
  .ops-today-grid { gap: 14px; }
  .admin-page .ops-services { gap: 9px; }
}
@media (prefers-reduced-motion:reduce) { .ops-screen .ring-value { transition: none; } }
@media (forced-colors:active) {
  .admin-page .ops-panel, .admin-page .glass-card, .admin-page .ops-kpis, .admin-page .ops-device-list, .admin-page #devices-table-wrap .ops-device-row { border: 1px solid CanvasText !important; }
  .admin-page .sidebar-nav-item[aria-current=page] { outline: 1px solid Highlight; }
}

/* Finish review: explicit pairs protect selected, primary and disabled hover states. */
.admin-page .ops-page-tabs button.bg-primary:hover { background: #fff !important; color: #365443 !important; }
.admin-page #page-finance .oa-button.oa-primary:hover { background: var(--refined-accent-hover) !important; border-color: var(--refined-accent-hover) !important; color: #fff !important; }
.admin-page #page-finance .oa-button:disabled, .admin-page #page-finance .oa-button:disabled:hover { background: #e6e7e1 !important; color: #656b62 !important; border-color: #d5d8ce !important; }
.admin-page .ops-management-page button.material-symbols-outlined { font-size: 20px !important; }
.admin-page .oa-button .material-symbols-outlined { font-size: 18px; }
.admin-page .ops-host-banner { background: #eaf0e6; border: 0; border-radius: 14px; }
.admin-page .ops-host-banner h3, .admin-page .ops-host-banner b { color: #345440; }
.admin-page .ops-management-page .overflow-x-auto::before { background: #f4f6ee; color: #5d6758; }
.admin-page #oa-notify-help[data-error=true], .admin-page .oa-message[data-error=true] { color: #94412c; background: #fff0e8; border-radius: 9px; padding: 14px 18px; }
.admin-page #oa-notify-help:empty, .admin-page .oa-message:empty { display: none; }
@media (max-width:767px) {
  .admin-page #page-production > .grid:first-of-type { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-page #page-production > .grid:first-of-type > .glass-card { padding: 18px !important; }
  .admin-page #page-production > .grid:first-of-type > .glass-card:nth-child(even) { border-right: 0 !important; }
  .admin-page #page-production > .grid:first-of-type > .glass-card:nth-child(-n+2) { border-bottom: 1px solid var(--refined-line) !important; }
}