/* Product skin. Reference: streamvid_design/web/src/styles.css, then newsbot's
   bulldog-theme.css. Existing selectors, routes and lifecycle remain intact.
   UI UX Pro Max: contrast/touch/state checks. Impeccable: restrained product UI. */
:root {
  color-scheme: light;
  --control-height: 2.375rem;
  --space-field: .75rem;
  --space-group: 1rem;
  --space-section: 1.25rem;
  --dialog-inset: 1rem;
}
[hidden] { display: none !important; }

/* Form dialogs share one body scroll region. Fields and actions keep their own roles. */
.modal .modal-card.admin-form-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(48rem, calc(100vw - 3rem));
  max-height: calc(100dvh - 3rem);
  padding: 0;
  overflow: hidden;
}
.modal .modal-card.admin-form-dialog.arithmetic-modal-card-wide { width: min(64rem, calc(100vw - 3rem)); }
.admin-form-dialog > .modal-head { margin: 0; padding: var(--dialog-inset); border-bottom: 1px solid var(--border); background: var(--panel); }
.admin-form-dialog > .modal-head h3 { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.admin-form-dialog .ui-dialog-form { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; margin: 0; }
.admin-form-dialog .ui-dialog-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: var(--space-field); min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--dialog-inset); }
.admin-form-dialog .modal-head small[id$="ModeLabel"] { display: none; }
.admin-form-dialog .ui-dialog-footer { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; padding: 1rem var(--dialog-inset); border-top: 1px solid var(--border); background: var(--panel); margin: 0; }
.admin-form-dialog .ui-dialog-footer .btn { min-height: 2.75rem; width: auto; flex: 0 1 auto; min-width: 0; }
.admin-form-dialog .ui-dialog-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .modal .modal-card.admin-form-dialog,
  .modal .modal-card.admin-form-dialog.arithmetic-modal-card-wide { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .admin-form-dialog { --dialog-inset: 1rem; }
  .admin-form-dialog .ui-dialog-body { grid-template-columns: minmax(0,1fr); }
  .admin-form-dialog .ui-dialog-footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}
body { font-size: .875rem; }
button, input, select, textarea { font-family: var(--sans); }
button, summary { touch-action: manipulation; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: var(--control-height); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.btn:focus-visible, .icon-btn:focus-visible, .notification-trigger:focus-visible,
.u360-tab:focus-visible, .u360-toggle:focus-visible, .logs-nop-page button.icon-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none;
}
button:disabled { cursor: not-allowed; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: var(--z-toast); padding: .75rem 1rem; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }
.eyebrow, .um-eyebrow, .card-sub, .kpi .lab, .table th, .chip,
.users-stat-label, .user-traffic-summary-label, .ra-control-label {
  font-family: var(--sans); letter-spacing: 0; text-transform: none;
}
.eyebrow { font-size: .8125rem; line-height: 1.5; }
.app { --sidebar-width: 15rem; min-height: 100dvh; }
.sidebar {
  --text: #f4f7f8; --text-soft: #bdc6ca; --text-muted: #aeb8bd;
  --border: #394248; --border-light: #657179; --panel: #11171b;
  --panel-soft: #1b2429; --panel-3: #273037;
  color: var(--text); background: var(--sidebar); border-right: 0;
  padding: 1.25rem .875rem 1rem;
}
.logo { min-height: 2.75rem; padding: 0 .375rem; gap: .625rem; border: 0; margin-bottom: 1rem; }
.logo .logo-mark { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: 50%; background: #fff; overflow: hidden; }
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { display: block; font-weight: 650; font-size: 1rem; letter-spacing: -.02em; white-space: nowrap; }
.brand-caption { display: block; margin-top: .125rem; color: #bdc6ca; font-size: .6875rem; }
.nav { gap: .25rem; }
.nav-sec { font-family: var(--sans); font-size: .6875rem; text-transform: none; letter-spacing: .02em; color: #aeb8bd; padding: .625rem .75rem .25rem; }
.nav-link { min-height: 2.5rem; padding: .5rem .75rem; gap: .75rem; font-size: .8125rem; border-radius: .5625rem; }
.nav-link.active { color: #fff; background: #273037; }
.nav-link.active::before { display: none; }
.nav-link.active .nav-icon { color: #98d4ac; }
.nav-link:hover { background: #1b2429; }
.sidebar-footer { min-height: 3.5rem; padding-top: .75rem; margin-top: 1rem; }
.sidebar-footer .avatar { border: 1px solid #788188; border-radius: 50%; background: transparent; width: 2.625rem; height: 2.625rem; color: #f4f7f8; }
.sidebar-logout { color: #bdc6ca; }
.sidebar .breadcrumbs { font-family: var(--sans); color: #aeb8bd; font-size: .6875rem; }
.topbar { min-height: 3.75rem; height: auto; padding: .625rem 1.25rem; gap: .75rem; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar-left { min-width: 0; }
.page-title { font-size: 1.375rem; letter-spacing: -.025em; font-weight: 650; }
.breadcrumbs { font-family: var(--sans); font-size: .75rem; line-height: 1.5; margin-top: .25rem; }
.topbar-search { height: var(--control-height); min-height: var(--control-height); padding: 0 .75rem; width: 18rem; max-width: 36vw; background: var(--panel); border-color: var(--border-light); border-radius: var(--radius-sm); }
.topbar-search:focus-within { border-color: var(--accent); }
.topbar-search input { height: 100%; min-height: 0; min-width: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent; font-size: .8125rem; }
.topbar-search input:focus-visible { outline: none; box-shadow: none; }
.topbar-live { min-height: var(--control-height); font-family: var(--sans); font-size: .6875rem; }
.top-actions { flex: 0 0 auto; margin-left: 0; gap: .75rem; }
.topbar-live .dot { animation: none; }
.sidebar-toggle, .notification-trigger, .icon-btn { color: var(--text-soft); border-color: var(--border-light); background: var(--panel); border-radius: var(--radius-sm); }
.topbar :is(.sidebar-toggle, .notification-trigger) { width: var(--control-height); height: var(--control-height); min-width: var(--control-height); min-height: var(--control-height); }
.sidebar-toggle:hover, .notification-trigger:hover, .icon-btn:hover { background: var(--panel-soft); color: var(--text); }
.page { padding: 1rem 1.25rem 2rem; }
.page-body { gap: .75rem; }
.page-body > .servers-head { margin-bottom: 0; }
.card-h { margin-bottom: .75rem; }
.refresh-selector { min-height: var(--control-height); padding: 0; border: 0; background: transparent; }
.refresh-selector select { min-height: var(--control-height); height: var(--control-height); }
.btn { min-height: var(--control-height); padding: .4375rem .75rem; border-radius: var(--radius-sm); background: var(--panel); border-color: var(--border-light); font-size: .8125rem; font-weight: 550; box-shadow: none; }
.btn:hover, .btn-ghost:hover { color: var(--text); background: var(--panel-soft); border-color: var(--border-strong); }
.btn:active { transform: none; background: var(--panel-3); }
.btn-primary, .btn-primary:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--danger); border-color: #dfa7a7; }
.btn-danger:hover { color: var(--danger-hover); background: #fff1f0; border-color: var(--danger); }
.btn-sm { min-height: var(--control-height); padding: .375rem .625rem; font-size: .75rem; }
.badge { font-size: .75rem; border-radius: .375rem; background: var(--panel-3); }
.badge-success { background: var(--accent-soft); color: var(--success); }
.badge-danger { background: #fff1f0; color: var(--danger); }
.badge-warning { background: #fff8e8; color: var(--warning); }
.badge-net { background: #edf5fb; color: var(--net); }
.card, .form-card, .kpi { box-shadow: none; background: var(--panel); }
.card { border-radius: var(--radius); padding: 1rem; }
.card-t, .card-header h3 { font-size: 1rem; letter-spacing: -.015em; }
.card-sub { font-size: .75rem; }
.card .card, .ra-detail-grid section { box-shadow: none; border-radius: 0; border-width: 1px 0 0; }
.kpi.focus, .users-stat-card, .ra-kpi-focus { background: var(--panel); border-color: var(--border); }
.kpi .lab { font-size: .8125rem; }
.kpi .val { font-size: 1.5rem; margin-top: .25rem; }
.users-stat-label, .user-traffic-summary-label { font-size: .8125rem; }
.table-wrapper { border-width: 1px 0; border-radius: 0; }
.table th { background: var(--bg); font-size: .75rem; font-weight: 550; padding: .625rem .75rem; }
.table td { padding: .625rem .75rem; }
.table tbody tr:hover { background: var(--panel-soft); }
.users-table-wrapper thead th { background: var(--bg); }
.row-act { opacity: 1; }
.users-controls-panel { border: 0; padding: 0; background: var(--bg); }
.users-head, .servers-head { margin-bottom: .875rem; }
.users-tabs .btn-ghost { border-color: transparent; }
.user-traffic-summary-card { background: var(--panel); border-radius: 0; border-width: 0 0 1px; padding: .875rem 0; }
.chip { font-size: .75rem; background: var(--panel-soft); }
.user-traffic-overview-primary { font-family: var(--sans); font-size: .875rem; }
.user-traffic-overview-secondary, .user-traffic-overview-total { font-size: .75rem; }
.gauge { background: var(--panel-3); }
.gauge > span { background: var(--accent); }
.nodes .card { border-radius: var(--radius-sm); }
.node-h { flex-wrap: wrap; gap: .75rem; }
.node-actions { flex-wrap: wrap; }
.notification-panel, .page-change-stage { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: none; }
.notification-feed-heading, .notification-panel-state, .notification-reason { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: .75rem; }
.notification-item-copy small { font-size: .8125rem; }
.notification-trigger-count { font-family: var(--sans); font-size: .75rem; min-width: 1rem; line-height: 1.25; }
.notification-item { grid-template-columns: 20px minmax(0,1fr); gap: .5rem .75rem; }
.notification-item-copy strong { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.notification-item-copy small { line-height: 1.5; overflow-wrap: anywhere; }
.notification-item-badge { grid-column: 2; padding: 0; font-family: var(--sans); font-size: .75rem; line-height: 1.5; white-space: normal; }
.notification-item-reasons { grid-template-columns: minmax(0,1fr); gap: .375rem; }
.notification-reason { font-size: .8125rem; line-height: 1.5; }
.notification-item.is-viewed { opacity: 1; }
.notification-item.is-viewed .notification-item-copy strong { font-weight: 400; }
.notification-reason.is-critical { color: var(--danger); }
.notification-reason.is-warning { color: var(--warning); }
.notification-panel-foot { font-size: .75rem; }
.modal { z-index: var(--z-modal); background: rgba(9,14,17,.48); }
#addDaysModal, #overrideModal { z-index: var(--z-modal-nested); }
#toast, #adminGlobalToast { z-index: var(--z-toast) !important; }
.modal-card, .broadcast-modal-card { background: var(--panel); border-color: var(--border); box-shadow: var(--shadow); }
.modal-head { align-items: center; }
.modal-head h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.025em; }
.modal-close-btn { min-width: 2.75rem; min-height: 2.75rem; border-radius: var(--radius-sm); background: var(--panel); }
.modal-close-btn:hover { background: var(--panel-soft); }
/* The existing client card becomes a spacious sheet, not another page. */
#userSettingsModal { place-items: stretch end; padding: 0; }
#userSettingsModal .modal-card, #userSettingsModal .modal-card:has([data-user360]) {
  width: min(64rem, 100vw) !important; max-width: 100vw !important;
  height: 100dvh; max-height: 100dvh; padding: 0; border-radius: 0;
  border: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
  animation: bulldog-sheet-in .18s var(--ease);
}
#userSettingsModal .modal-head { margin: 0; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
#userSettingsModal .modal-head h3 { font-size: 1.5rem; }
#userSettingsModal .modal-head h3 { min-width: 0; overflow-wrap: anywhere; }
#userSettingsBody { overflow: auto; overscroll-behavior: contain; padding: 1.25rem 1rem 2rem; }
@keyframes bulldog-sheet-in { from { opacity: .75; transform: translateX(1.25rem); } to { opacity: 1; transform: translateX(0); } }
.um-sub { gap: .75rem 1rem; padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.um-sub > .mono { flex-basis: 100%; font-family: var(--sans); font-size: .875rem; }
.um-chip { padding: .375rem 0; border: 0; border-radius: 0; background: transparent; font-size: .8125rem; }
.um-chip + .um-chip { padding-left: .875rem; border-left: 1px solid var(--border); }
.um-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.um-primary, .um-account { min-width: 0; }
body.user-card-open { overflow: hidden; }
.um-account { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.um-account h4 { margin: 0 0 .75rem; font-size: .875rem; }
.um-eyebrow { font-size: .875rem; font-weight: 600; margin: 0 0 .75rem; color: var(--text); }
.um-row { display: grid; grid-template-columns: minmax(0, 1fr); padding: .75rem 0; gap: .25rem; }
.um-row-k { font-size: .75rem; color: var(--text-muted); }
.um-row-v { max-width: 100%; font-size: .8125rem; white-space: normal; overflow-wrap: anywhere; }
.um-acts { gap: .5rem; }
.um-card-actions { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.um-acts .btn { min-height: 2.75rem; }
.um-slot { background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: .875rem 0; border-radius: 0; }
.um-slots { gap: 0; }
.um-slot-name { font-size: .875rem; }
.um-slot-presence { font-family: var(--sans); font-size: .75rem; white-space: normal; }
.um-slot-presence-online { color: var(--success); }
.um-slot-presence-online::before { box-shadow: none; }
.um-slot-ic { width: 2.75rem; height: 2.75rem; background: var(--panel); border-radius: var(--radius-sm); }
.um-chart-svg { height: 7.5rem; }
.um-chart-head { flex-wrap: wrap; gap: .75rem; }
.um-trange .btn { min-height: 2.5rem; padding: .5rem .625rem; }
.um-tlab { font-family: var(--sans); font-size: .75rem; }
.um-ttip, .chart-tip { box-shadow: var(--shadow); background: var(--panel); }
.um-tdot { box-shadow: none; }
/* 360 is one disclosure header; statuses are a list, networks compare side by side. */
.u360, .u360.is-collapsed { width: 100%; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 1.75rem; }
.u360:has(.u360-toggle:hover) { border-color: var(--accent); }
.u360-toggle { min-height: 3.25rem; padding: .875rem 1rem; gap: .75rem; }
.u360-toggle:hover { background: var(--panel-soft); }
.u360-toggle-title { font-size: .9375rem; letter-spacing: -.015em; }
.u360-toggle-fresh { font-family: var(--sans); font-size: .75rem; white-space: normal; text-align: right; }
.u360-toggle-chevron { color: var(--accent); }
.u360-toggle[aria-expanded="true"] .u360-toggle-chevron { color: var(--accent); }
.u360-tabs { display: flex; flex-wrap: wrap; padding: .25rem 1rem 0; gap: .25rem .875rem; border-bottom: 1px solid var(--border); }
.u360-tab { flex: 1; min-height: 2.875rem; font-size: .8125rem; padding: .5rem .25rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; }
.u360-tab.is-active { background: transparent; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.u360-tab:hover { background: var(--panel-soft); }
.u360-panel { border: 0; background: var(--panel); padding: 1rem; }
.u360-stage-grid { display: flex; flex-direction: column; gap: 0; }
.u360-stage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .375rem .875rem; align-items: start; padding: .875rem 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; border-radius: 0; }
.u360-stage-label, .u360-fact span, .u360-network-metric span { font-family: var(--sans); font-size: .75rem; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.u360-stage-value { font-size: .8125rem; line-height: 1.5; margin: 0; align-items: baseline; font-weight: 500; }
.u360-stage small { grid-column: 2; font-size: .75rem; margin: 0; }
.u360-fact-grid { border: 0; border-radius: 0; background: transparent; gap: 0 1.25rem; margin-top: 1rem; grid-template-columns: minmax(0, 1fr); }
.u360-fact { padding: .75rem 0; background: transparent; border-bottom: 1px solid var(--border); gap: .25rem; }
.u360-fact b { font-size: .8125rem; line-height: 1.5; font-weight: 500; color: var(--text); }
.u360-network-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.u360-network { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--panel); padding: 1rem; gap: 1rem; border-radius: var(--radius-sm); border-color: var(--border); }
.u360-network.u360-tone-warn { border-color: #d8b86e; }
.u360-network.u360-tone-down { border-color: #dfa7a7; }
.u360-network-main { grid-column: 1 / -1; padding-bottom: .75rem; border-bottom: 1px solid var(--border); gap: .375rem; }
.u360-network-name { font-size: .9375rem; }
.u360-network-env { font-family: var(--sans); font-size: .75rem; }
.u360-network-address { font-size: .8125rem; white-space: normal; overflow-wrap: anywhere; }
.u360-network-metric b { font-family: var(--sans); font-size: .8125rem; font-weight: 500; line-height: 1.5; }
.u360-resource-tools { flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.u360-resource-search { min-height: 2.75rem; background: var(--panel); margin: 0; }
.u360-resource-search input { font-size: .875rem; }
.u360-resource-count { max-width: 100%; font-family: var(--sans); font-size: .75rem; white-space: normal; }
.u360-resource-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.u360-resource { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: .75rem 0; }
.u360-resource-icon { background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); }
.u360-resource-copy b { font-size: .875rem; }
.u360-resource-copy small { font-family: var(--sans); font-size: .75rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.u360-resource-pagination { display: flex; justify-content: space-between; gap: .75rem; }
.u360-resource-pagination:has([data-u360-resource-prev][hidden]):has([data-u360-resource-more][hidden]) { display: none; }
.u360-event { grid-template-columns: 5.5rem .5rem minmax(0, 1fr); padding: 1rem 0; gap: .75rem; }
.u360-event time { font-family: var(--sans); font-size: .75rem; }
.u360-event-copy b { font-size: .8125rem; line-height: 1.5; }
.u360-event-copy small { font-family: var(--sans); font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.u360-list-signal-main { font-size: .75rem; }
.u360-list-signal-tag { font-family: var(--sans); text-transform: none; font-size: .6875rem; letter-spacing: 0; }
.users-head > .eyebrow, .servers-head > .eyebrow { font-size: .875rem; }
.online-status, .online-badge, .u-online-on { color: var(--success); }
.arithmetic-tab-btn:hover, .arithmetic-server-tab-btn:hover, .arithmetic-income-tab-btn:hover { background: var(--panel-soft); }
.arithmetic-tab-btn.is-active, .arithmetic-server-tab-btn.is-active, .arithmetic-income-tab-btn.is-active, .arithmetic-chip.is-active, .chart-dd.open .chart-dd-btn { border-color: var(--accent); }
.arithmetic-tab-btn.is-active { color: var(--accent); background: var(--accent-soft); }
.settings-danger-zone { background: var(--panel); border-color: #dfa7a7; }
.u360-resource-search:focus-within, .logs-nop-search:focus-within { border-color: var(--accent); }
.key-cell { background: var(--panel-soft); color: var(--text); border-color: var(--border); }
.slot-warning-inline, .slot-warning { color: var(--warning); }
.slot-state-badge { background: var(--panel-soft); }
.slot-state-badge-warning { color: var(--warning); background: #fff8e8; }
.metric-trend-up, .user-traffic-overview-trend-up, .proxy-flash-success { color: var(--success); }
.metric-trend-down, .user-traffic-overview-trend-down { color: var(--warning); }
.proxy-flash-error { color: var(--danger); }
.details-panel dd { color: var(--text-soft); }
.arithmetic-segment-badge.is-db { color: var(--success); background: var(--accent-soft); }
.arithmetic-segment-badge.is-manual { color: var(--warning); background: #fff8e8; }
/* Shared data surfaces: no dark-only hover, neon text or decorative gradients. */
.ra-context { flex-wrap: wrap; align-items: flex-start; padding: 0 0 1rem; background: var(--panel); border: 0; border-radius: 0; }
.ra-context > div:first-child { flex: 1 1 24rem; min-width: 0; }
.ra-collector-state { flex: 0 1 auto; width: fit-content; max-width: 100%; }
.ra-context .eyebrow, .ra-catalog-head .eyebrow { display: none; }
.ra-context h2 { font-size: 1.25rem; }
.ra-catalog { border-width: 1px 0; border-radius: 0; }
.ra-kpi span, .ra-control-label, .ra-list-columns { font-size: .75rem; letter-spacing: 0; text-transform: none; font-family: var(--sans); }
.ra-kpi strong { font-family: var(--sans); font-size: 1.75rem; }
.ra-resource-toggle:hover { background: var(--panel-soft); }
.ra-resource-detail { background: var(--panel-soft); }
.ra-resource-stats b, .ra-resource-stats small, .ra-endpoint small, .ra-placement-facts small { font-family: var(--sans); font-size: .75rem; }
.ra-detail-kpis { border-radius: 0; background: transparent; }
.referrals-ops-workbench { border-radius: 0; box-shadow: none; }
.referrals-ops-table tbody tr.is-selected { box-shadow: none; background: var(--accent-soft); }
.referrals-ops-summary, .referrals-ops-context { background: var(--panel); }
.referrals-ops-summary span, .referrals-ops-details dt, .referrals-ops-details dd, .referrals-ops-identity-sub { font-size: .75rem; font-family: var(--sans); }
.referrals-ops-table th { font-size: .75rem; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.logs-nop-journal { border-radius: var(--radius-sm); }
.logs-nop-filterbar, .logs-nop-settings-body { background: var(--panel-soft); }
.log-entry:hover { background: var(--panel-soft); }
.log-entry.is-warn { background: #fffdf7; }
.log-entry.is-error { background: #fff8f7; }
.log-raw { background: var(--panel-soft); }
.logs-nop-status-label, .logs-nop-settings-summary { text-transform: none; font-family: var(--sans); font-size: .75rem; }
.broadcasts-summary { font-size: .875rem; }
.broadcast-details-panel, .broadcast-compose-grid { background: var(--panel); }
.broadcast-preview-pane { background: var(--panel-soft); }
.broadcast-compose-grid textarea { min-height: 10rem; }
.auth-wrapper { background: var(--panel-soft); }
.auth-card { background: var(--panel); border-color: var(--border); box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: .875rem; font-weight: 650; font-size: 1.0625rem; margin-bottom: 2rem; }
.auth-brand img { object-fit: contain; border-radius: 50%; }
.auth-alert { color: var(--danger); border-color: #dfa7a7; background: #fff1f0; }
.auth-card .btn-primary { color: #fff; }
.auth-card h1 { font-size: 1.75rem; letter-spacing: -.03em; }
.settings-danger-action-card, .settings-maintenance-card { background: var(--panel-soft); }
.mobile-navigation { background: var(--sidebar); color: #f4f7f8; --text: #f4f7f8; --text-soft: #bdc6ca; --text-muted: #aeb8bd; --panel: #11171b; --panel-soft: #1b2429; --panel-3: #273037; --border: #394248; }
.mobile-navigation .mobile-nav-card, .mobile-navigation .mobile-nav-row { background: transparent; color: #bdc6ca; }
.mobile-navigation .active { background: #273037; color: #fff; border-color: #657179; }
.mobile-navigation .active > i:first-child { color: #98d4ac; }
.mobile-navigation .mobile-nav-close { color: #f4f7f8; background: #273037; }
@media (min-width: 768px) {
  .u360-network-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u360-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #userSettingsBody { padding: 1.5rem 2rem 3rem; }
  .um-workspace { grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 1fr); }
  .um-account { padding: 0 0 0 1.5rem; border-top: 0; border-left: 1px solid var(--border); }
}
@media (min-width: 901px) {
  .topbar { padding-inline: 1.5rem; }
  .page { padding: 1rem 1.5rem 2.5rem; }
  .topbar-search { max-width: 20rem; }
  .nodes { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}
@media (max-width: 900px) {
  :root { --control-height: 2.75rem; }
  .topbar { min-height: var(--mobile-topbar); padding: max(.5rem, env(safe-area-inset-top)) 1rem .5rem; background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .page-title { font-size: 1.125rem; letter-spacing: -.025em; white-space: normal; overflow: visible; text-overflow: clip; }
  .breadcrumbs { font-size: .6875rem; }
  .top-actions { margin-left: auto; }
  .mobile-navigation { border-color: #394248; box-shadow: none; backdrop-filter: none; }
  .users-table-wrapper { border: 0; }
  .users-table-wrapper .table tbody tr { background: var(--panel); border-color: var(--border); box-shadow: none; }
  .btn, .btn-sm, .um-trange .btn, .icon-btn, .um-slot-ic, .log-copy-button, .logs-nop-page button.icon-btn { min-height: 2.75rem; }
  .icon-btn, .um-slot-ic, .log-copy-button, .logs-nop-page button.icon-btn { min-width: 2.75rem; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 1rem; }
  #userSettingsModal .modal-head { padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem; }
  #userSettingsBody { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
  .um-slot { flex-wrap: wrap; }
  .um-slot-copy { flex: 1; }
  .um-slot-acts { flex-basis: 100%; justify-content: flex-end; }
  .u360-tab { min-width: 4.5rem; }
  .u360-stage { grid-template-columns: minmax(0, 1fr); }
  .u360-stage small { grid-column: 1; }
  .u360-resource-tools { align-items: stretch; flex-direction: column; }
  .u360-resource-count { flex: auto; }
  .u360-network-list { grid-template-columns: minmax(0, 1fr); }
  .u360-resource-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  :root { --control-height: 2.75rem; }
  .nav-link { min-height: 2.75rem; }
}
@media (max-width: 767px) {
  .u360-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  #userSettingsModal .modal-card { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}