@import url('./tokens.css');
@import url('./settings.css');
@import url('./office-layout.css');

/* Compatibility layer: old business classes consume the same semantic tokens. */
:root {
  --font-body: var(--hz-font); --font-display: var(--hz-font); --font-mono: var(--hz-mono);
  --paper: var(--hz-canvas); --card: var(--hz-surface); --text: var(--hz-label);
  --muted: var(--hz-secondary); --muted-2: var(--hz-secondary);
  --line: var(--hz-separator); --line-soft: var(--hz-separator);
  --brand: var(--hz-accent); --brand-600: var(--hz-accent); --brand-700: var(--hz-accent);
  --brand-50: var(--hz-accent-soft); --brand-100: var(--hz-accent-soft);
  --teal: var(--hz-accent); --teal-ink: var(--hz-accent); --brass: var(--hz-accent); --brass-ink: var(--hz-accent);
  --danger: var(--hz-danger); --warn: var(--hz-warning); --ok: var(--hz-success);
  --radius: var(--hz-radius-card); --radius-sm: var(--hz-radius-control);
  --shadow-sm: var(--hz-shadow-card); --shadow-md: var(--hz-shadow-card); --shadow-xl: var(--hz-shadow-dialog);
  --ct-line: var(--hz-separator); --ct-muted: var(--hz-secondary);
}
html { font-size: 16px; }
body { font-family: var(--hz-font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
body:not([data-hz-surface="graph"]) { background: var(--hz-canvas); color: var(--hz-label); font-size: var(--hz-body-size); }
body:not([data-hz-surface="graph"]) :is(button,input,select,textarea) { font-family: var(--hz-font); font-optical-sizing: auto; }
body:not([data-hz-surface="graph"]) :is(h1,h2,h3,h4) { font-family: var(--hz-font); color: var(--hz-label); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
body:not([data-hz-surface="graph"]) :is(.view-head h2,.dz-head h2,#adminBody>h2) { font-size: clamp(1.4rem,1.2rem + .5vw,1.85rem); }
body:not([data-hz-surface="graph"]) :is(.view-head p,.dz-head p,.card .desc,.crm-card-head small) { color: var(--hz-secondary); font-size: .8125rem; line-height: 1.65; }
body:not([data-hz-surface="graph"]) :is(.view,.body,#adminBody,.ct-body) { color: var(--hz-label); }

/* Quiet, translucent navigation. Content and form surfaces stay opaque. */
body:not([data-hz-surface="login"]):not([data-hz-surface="graph"]) .sidebar {
  width: 15rem; color: var(--hz-label); background: var(--hz-glass);
  border-right: 1px solid var(--hz-separator); padding: 1.25rem .75rem;
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: inset 0 1px 0 var(--hz-highlight);
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
}
.sidebar :is(.nav-item,.nav-more-toggle,.brand .name,.brand .bn,.user-card,.side-foot .who) { color: var(--hz-label); }
.sidebar :is(.nav-label,.nav-group,.brand .bs,.brand .sub,.user-card .role,.side-foot .who span) { color: var(--hz-secondary); font-size: .6875rem; letter-spacing: .03em; }
.sidebar .nav-item { min-height: 2.5rem; padding: .625rem .75rem; border-radius: .625rem; font-size: .8125rem; font-weight: 400; margin: .125rem 0; }
.sidebar :is(.brand,.nav-item,.nav-group,.side-foot,.sidebar-foot) { flex-shrink: 0; }
.sidebar .nav-item:hover { color: var(--hz-label); background: var(--hz-surface-secondary); }
.sidebar .nav-item.active { color: var(--hz-accent); background: var(--hz-accent-soft); box-shadow: none; font-weight: 600; }
.sidebar .nav-item.active::before { display: none; }
.sidebar .nav-item.active .seal { color: var(--hz-accent); background: var(--hz-surface); }
.sidebar .user-card .u-name { color: var(--hz-label); }
.sidebar .user-card .u-role { color: var(--hz-secondary); }
.sidebar :is(.seal,.seal-s,.seal-ink,.seal-teal,.seal-brass) { color: var(--hz-secondary); background: var(--hz-surface-secondary); box-shadow: none; border-radius: .375rem; }
.sidebar .brand :is(.mark,.seal) { background: var(--hz-accent); color: var(--hz-on-accent); box-shadow: none; }
.sidebar :is(.sidebar-foot,.side-foot) { border-color: var(--hz-separator); }
.sidebar .user-card:hover { background: var(--hz-surface-secondary); }
.portal-nav>summary { color: var(--hz-secondary); padding: .625rem .75rem; font-size: .75rem; font-weight: 500; }
.portal-nav>summary:hover { background: var(--hz-surface-secondary); }
.contract-shortcuts { padding: .25rem .375rem .625rem 2rem; }
.contract-shortcuts button { color: var(--hz-secondary); min-height: 2rem; padding: .375rem .5rem; }
.contract-shortcuts button:hover { background: var(--hz-accent-soft); color: var(--hz-accent); }
body:not([data-hz-surface="graph"]) .topbar { min-height: 3.75rem; height: auto; padding-block: .5rem; background: var(--hz-glass); border-color: var(--hz-separator); gap: .625rem; box-shadow: inset 0 1px 0 var(--hz-highlight); }
.topbar .ws-switch { flex: 0 0 auto; white-space: nowrap; min-height: 2.625rem; }
.topbar .topbar-search { flex: 1 1 15rem; min-width: 13rem; max-width: none; margin: 0; }
.topbar .topbar-search input { padding-left: 2rem; }
.topbar .topbar-right { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.topbar-right>* { flex-shrink: 0; white-space: nowrap; }
.topbar-right :is(button,.icon-btn) { padding-inline: .625rem; }
.topbar-right .icon-btn { min-width: 2.25rem; width: 2.25rem; padding: 0; background: var(--hz-surface); color: var(--hz-label); }
#hzUserPill { display: flex; flex-wrap: wrap; gap: .5rem; white-space: nowrap; color: var(--hz-secondary); }
.topbar :is(.pill,.mode-pill,#topModePill) { background: var(--hz-accent-soft); color: var(--hz-accent); border-color: var(--hz-separator); font-size: .75rem; }
body:not([data-hz-surface="graph"]) :is(.card,.crm-card,.dz-card,.stat,.dz-stat,.stat-card,.settings-card,.office-stat,.ct-task,.ct-product) {
  background: var(--hz-surface); color: var(--hz-label); border-color: var(--hz-separator); border-radius: var(--hz-radius-card); box-shadow: var(--hz-shadow-card);
}
body:not([data-hz-surface="graph"]) :is(.sched-chip,.sched-row,.kb-reader-section,.crm-side,.crm-timeline-col,.crm-stat,.out-day,.cal-day,.mileage-preview,.mileage-detail-metrics>div,.mileage-photo-manage>div,.composer,.composer-inner,.chat-message,.bubble,.nt-panel,.nt-settings,.news-card,.office-table-wrap,.wf-card) { background: var(--hz-surface); color: var(--hz-label); border-color: var(--hz-separator); }
.sched-chip span,.sched-chip small,.sched-row .sub { color: var(--hz-secondary); }
.sched-chip:hover,.sched-chip.active { background: var(--hz-accent-soft); color: var(--hz-accent); }
.topbar-right .model-pill { background: var(--hz-surface-secondary) !important; color: var(--hz-success) !important; }
@media (max-width: 1600px) {
  .topbar { flex-wrap: wrap; }
  .topbar .topbar-right { flex-basis: 100%; justify-content: flex-end; }
}
body:not([data-hz-surface="graph"]) :is(.stat .v,.dz-stat .v,.stat-card .value) { color: var(--hz-label); font-weight: 600; font-variant-numeric: tabular-nums; }

/* All native form controls, including legacy dialogs, share geometry. */
body:not([data-hz-surface="graph"]) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]) {
  min-height: var(--hz-control-height); border: 1px solid var(--hz-border); border-radius: var(--hz-radius-control);
  padding: .625rem .75rem; background: var(--hz-field) !important; color: var(--hz-label) !important;
  font-size: .875rem; line-height: 1.4; box-sizing: border-box; margin-bottom: 0; min-width: 0;
}
body:not([data-hz-surface="graph"]) :is(input,textarea)::placeholder { color: var(--hz-placeholder); opacity: 1; }
body:not([data-hz-surface="graph"]) :is(input,select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]) { height: var(--hz-control-height); }
body:not([data-hz-surface="graph"]) textarea { min-height: 6rem; resize: vertical; }
body:not([data-hz-surface="graph"]) input:is([type="checkbox"],[type="radio"]) { width: 1.0625rem; height: 1.0625rem; min-height: 0; flex-shrink: 0; accent-color: var(--hz-accent); margin: 0; }
body:not([data-hz-surface="graph"]) :is(input,select,textarea):focus-visible { outline: 2px solid var(--hz-accent); outline-offset: 2px; box-shadow: var(--hz-focus); }
body:not([data-hz-surface="graph"]) :is(input,select,textarea):disabled { opacity: .7; cursor: not-allowed; }
body:not([data-hz-surface="graph"]) :is(.ct-grid,.dz-form,.crm-form,.form,.admin-routing .ct-grid) { align-items: start; gap: 1.25rem 1.5rem; }
.ct-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ct-grid>:is(label,div):not(.full) { min-width: 0; }
.ct-grid>label { display: grid; grid-template-rows: minmax(1.25rem,auto) auto; align-content: start; align-items: start; gap: .5rem; }
.ct-grid>div>label { display: block; margin: 0 0 .5rem; min-height: 1.25rem; }
body:not([data-hz-surface="graph"]) :is(.ct-grid,.dz-form,.crm-form,.form,.admin-routing) label { color: var(--hz-label); font-size: .8125rem; font-weight: 500; line-height: 1.5; }
.ct-grid>label :is(input,select,textarea) { margin: 0; }
.ct-grid :is(.full,.ct-full) { grid-column: 1/-1; }
.ct-grid>.full>div>button { margin-inline-start: .375rem; }
.ct-grid>.full>button+button { margin-inline-start: .375rem; }
.ct-grid>.full:has(>button[data-term]) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ct-grid>.full:has(>button[data-term]) small { flex-basis: 100%; }
.ct-check label,.dz-check label,.dz-checks label,.ct-modal label:has(>input[type="checkbox"]),.ct-modal label:has(>input[type="radio"]),.admin-routing label:has(>input[type="checkbox"]) {
  display: flex; align-items: center; gap: .625rem; min-height: 2rem; grid-template-rows: none;
}
body:not([data-hz-surface="graph"]) :is(.form,.dz-form,.crm-form)>div>label { margin-bottom: .5rem; }
body:not([data-hz-surface="graph"]) fieldset { border: 1px solid var(--hz-separator); border-radius: var(--hz-radius-card); padding: 1rem 1.25rem; }
body:not([data-hz-surface="graph"]) legend { padding-inline: .375rem; font-weight: 600; font-size: .875rem; }

/* Buttons: primary action blue, secondary action neutral, danger explicit. */
body:not([data-hz-surface="graph"]) :is(button,.btn,.rec-btn,.crm-rowbtn,.office-btn) {
  border-radius: var(--hz-radius-control); min-height: 2.25rem; padding: .5rem .875rem;
  background: var(--hz-surface); color: var(--hz-label); border-color: var(--hz-border);
  font-size: .8125rem; font-weight: 500; line-height: 1.4; box-sizing: border-box;
  white-space: nowrap;
  box-shadow: none; cursor: pointer; transition: background-color 140ms var(--hz-ease),transform 100ms var(--hz-ease);
}
body:not([data-hz-surface="graph"]) button:hover:not(:disabled) { background: var(--hz-surface-secondary); }
body:not([data-hz-surface="graph"]) button:active:not(:disabled) { transform: translateY(1px); }
body:not([data-hz-surface="graph"]) :is(button,.btn):focus-visible { outline: 2px solid var(--hz-accent); outline-offset: 3px; }
body:not([data-hz-surface="graph"]) :is(button.primary,.btn.primary,.rec-btn.start,.office-btn.primary,.crm-btn.primary,.btn-filled) { background: var(--hz-accent); color: var(--hz-on-accent); border-color: var(--hz-accent); }
body:not([data-hz-surface="graph"]) :is(.office-head button,.office-dialog button[type="submit"]) { background: var(--hz-accent); color: var(--hz-on-accent); border-color: var(--hz-accent); }
body:not([data-hz-surface="graph"]) :is(button.danger,.danger.linkbtn,.rec-btn.danger) { color: var(--hz-danger); background: var(--hz-surface); }
body:not([data-hz-surface="graph"]) button:disabled { opacity: .5; cursor: not-allowed; }
body:not([data-hz-surface="graph"]) :is(.crm-rowbtn,.dz-table td button,.office-table td button) { padding: .375rem .625rem; min-height: 2rem; width: auto; }
body:not([data-hz-surface="graph"]) :is(.dz-seg,.ct-queue-nav,.composer-modes,.nt-tabs,.office-tabs) { background: var(--hz-surface-secondary); padding: .25rem; gap: .25rem; border-radius: .75rem; }
body:not([data-hz-surface="graph"]) :is(.dz-seg,.ct-queue-nav,.composer-modes,.nt-tabs,.office-tabs) button { background: transparent; border-color: transparent; color: var(--hz-secondary); }
body:not([data-hz-surface="graph"]) :is(.dz-seg,.ct-queue-nav,.composer-modes,.nt-tabs,.office-tabs) button.active { background: var(--hz-surface); color: var(--hz-label); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* One dialog treatment for native dialogs and existing mask/drawer forms. */
body:not([data-hz-surface="graph"]) :is(.ct-modal,.dz-modal,.crm-modal,.modal,.office-modal,.news-editor,.wf-dialog,.nt-modal,.kb-detail,.dz-drawer) { background: var(--hz-surface); color: var(--hz-label); border-color: var(--hz-separator); border-radius: var(--hz-radius-dialog); box-shadow: var(--hz-shadow-dialog); }
body:not([data-hz-surface="graph"]) :is(.hz-modal,.office-dialog,.wf-modal,.announcement-dialog,.crm-conflict-dialog,.wire-drawer) { background: var(--hz-surface); color: var(--hz-label); border-color: var(--hz-separator); border-radius: var(--hz-radius-dialog); box-shadow: var(--hz-shadow-dialog); }
body:not([data-hz-surface="graph"]) :is(.hz-modal-mask,.announcement-mask,.wire-drawer-mask,.crm-conflict-mask) { background: var(--hz-scrim); }
body:not([data-hz-surface="graph"]) :is(.announcement-ai,.announcement-original,.announcement-section-title,.announcement-dialog footer,.wf-modal-head,.dz-modal-head,.wire-drawer-head) { background: var(--hz-surface); color: var(--hz-label); border-color: var(--hz-separator); }
.announcement-section-title { color: var(--hz-accent); }
.office-dialog header h3,.hz-modal h3 { font-size: 1.125rem; }
.office-form { gap: 1.25rem; }
.office-form label { color: var(--hz-label); font-size: .8125rem; gap: .5rem; }
.office-dialog::backdrop { background: var(--hz-scrim); }
dialog.ct-modal { max-height: min(92dvh,64rem); }
.ct-modal>header { padding: 1rem 1.5rem; background: var(--hz-glass); border-bottom: 1px solid var(--hz-separator); box-shadow: inset 0 1px 0 var(--hz-highlight); gap: .75rem; flex-wrap: wrap; }
.ct-modal>header h2 { font-size: 1.125rem; flex: 1; }
.ct-modal>header [data-close] { order: 3; width: 2.25rem; min-height: 2.25rem; padding: 0; border-radius: 50%; background: var(--hz-surface-secondary); border: 0; font-size: 1.25rem; }
.ct-body { padding: 1.5rem; }
.ct-modal .ct-body>form.ct-grid { gap: 1.25rem 1.5rem; }
.ct-modal footer { padding: 1rem 0; border-color: var(--hz-separator); gap: .75rem; }
.ct-modal .ct-body>footer { position: sticky; bottom: -1.5rem; background: var(--hz-surface); margin-top: 1.5rem; z-index: 2; box-shadow: 0 -8px 16px var(--hz-surface); }
.ct-modal .ct-body>footer [data-submit] { min-width: 9rem; }
.ct-modal::backdrop { background: var(--hz-scrim); }
body:not([data-hz-surface="graph"]) :is(.mask,.dz-mask,.crm-mask,.news-editor-mask,.office-mask,.wf-mask) { background-color: var(--hz-scrim); }
.ct-modal section { padding: 1rem 0; }
body:not([data-hz-surface="graph"]) :is(.ct-notice,.ct-warning,.dz-alert,.office-hint) { background: var(--hz-surface-secondary); color: var(--hz-secondary); border-color: var(--hz-separator); border-radius: .75rem; padding: .875rem 1rem; font-size: .8125rem; line-height: 1.6; }
body:not([data-hz-surface="graph"]) :is(.ct-error,.err,[data-error]) { color: var(--hz-danger); font-size: .8125rem; }
.ct-field-error { min-height: 1.25rem; color: var(--hz-danger) !important; font-size: .75rem !important; }
.ct-modal [data-validation-error] { outline-color: var(--hz-danger); }

/* Financial tables and content are readable, matte surfaces. */
body:not([data-hz-surface="graph"]) :is(table,.ct-workbench table,.ct-modal table) { color: var(--hz-label); font-size: .8125rem; font-variant-numeric: tabular-nums; }
body:not([data-hz-surface="graph"]) :is(th,.ct-workbench th,.ct-modal th,.dz-table th) { background: var(--hz-surface-secondary); color: var(--hz-secondary); font-size: .75rem; font-weight: 600; padding: .75rem 1rem; border-color: var(--hz-separator); }
body:not([data-hz-surface="graph"]) :is(td,.ct-workbench td,.ct-modal td,.dz-table td) { padding: .875rem 1rem; border-color: var(--hz-separator); vertical-align: middle; }
body:not([data-hz-surface="graph"]) tr:hover td { background: var(--hz-surface-secondary); }
.ct-grid>.full table { width: 100%; }
body:not([data-hz-surface="graph"]) :is(.ct-amounts,.ct-detail-head,.ct-kv,.dz-stats) { color: var(--hz-label); }
.ct-amounts { padding: 1.25rem; background: var(--hz-surface-secondary); border-radius: var(--hz-radius-card); gap: 1.5rem; }
.ct-amounts span { font-size: .75rem; color: var(--hz-secondary); }
.ct-amounts b { color: var(--hz-label); margin-top: .375rem; font-size: 1.125rem; font-weight: 600; }
.ct-workbench .ct-list-head { background: var(--hz-surface); color: var(--hz-label); padding: 1.5rem; border: 1px solid var(--hz-separator); border-radius: var(--hz-radius-card); box-shadow: var(--hz-shadow-card); }
.ct-workbench .ct-list-head p { color: var(--hz-secondary); }
.ct-workbench .ct-list-head button { background: var(--hz-surface); color: var(--hz-label); border-color: var(--hz-border); }
.ct-workbench .ct-list-head button.primary { background: var(--hz-accent); color: var(--hz-on-accent); border-color: var(--hz-accent); }
.ct-detail-head { background: var(--hz-surface-secondary); border: 0; border-radius: var(--hz-radius-card); }
.ct-tabs { background: var(--hz-surface); border-color: var(--hz-separator); }
.ct-tabs button.active { color: var(--hz-accent); border-bottom-color: var(--hz-accent); }
.ct-flow { background: var(--hz-surface-secondary); border-color: var(--hz-separator); }
.ct-flow span { background: var(--hz-surface); color: var(--hz-secondary); white-space: normal; font-size: .8125rem; }
.ct-flow span.active { color: var(--hz-accent); background: var(--hz-accent-soft); }
.ct-modal :is(pre,.ct-task,.ct-event) { background: var(--hz-surface-secondary); color: var(--hz-label); }
.ct-modal small,.ct-workbench small { color: var(--hz-secondary); font-size: .75rem; }
.ct-coupon { background: var(--hz-surface); border-color: var(--hz-border); color: var(--hz-label); }
.ct-coupon strong { color: var(--hz-accent); }

/* Fixed routing: aligned information instead of repeated selectors. */
.ct-modal .ct-routing { padding: 1.25rem; border: 1px solid var(--hz-separator); background: var(--hz-surface-secondary); border-radius: var(--hz-radius-card); }
.hz-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.hz-section-heading h3 { margin: 0; }
.hz-status-label { font-size: .6875rem; padding: .25rem .5rem; border-radius: 1rem; background: var(--hz-surface); color: var(--hz-secondary); }
.ct-routing p { font-size: .8125rem; color: var(--hz-secondary); line-height: 1.6; margin: .625rem 0 1rem; }
.hz-routing-chain { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; padding: 0; margin: 0; }
.hz-routing-chain li { display: flex; align-items: center; gap: .75rem; padding: .875rem; background: var(--hz-surface); border-radius: .75rem; min-width: 0; }
.hz-route-number { display: grid; place-items: center; height: 1.75rem; width: 1.75rem; flex-shrink: 0; border-radius: 50%; background: var(--hz-accent-soft); color: var(--hz-accent); font-size: .75rem; font-weight: 600; }
.hz-routing-chain b { display: block; font-size: .875rem; font-weight: 600; margin-top: .25rem; overflow-wrap: anywhere; }
.hz-inline-link { display: inline-flex; margin-top: .875rem; color: var(--hz-accent); font-size: .8125rem; }

/* Admin settings use the same fields and section spacing as employee forms. */
.settings-hub { gap: 1rem; }
.settings-hub button { min-height: 5rem; padding: 1.25rem; border-radius: var(--hz-radius-card); background: var(--hz-surface); border-color: var(--hz-separator); color: var(--hz-label); text-align: left; font-size: .875rem; box-shadow: var(--hz-shadow-card); }
.admin-routing { background: var(--hz-surface); border-color: var(--hz-separator); padding: 1.5rem; gap: 1.5rem; border-radius: var(--hz-radius-card); }
.admin-routing fieldset { gap: 1rem 1.5rem; background: var(--hz-surface-secondary); }
.admin-routing .ct-grid>label { margin: 0; }
.admin-routing p { color: var(--hz-secondary); font-size: .8125rem; }
.admin-routing>p { margin: 0; }
.admin-routing>[type="submit"] { justify-self: end; min-width: 10rem; }
#settingsBody .crm-card { background: var(--hz-surface); border-color: var(--hz-separator); border-radius: var(--hz-radius-card); }
.system-ai,.system-ai header { background: var(--hz-surface); color: var(--hz-label); }
.system-ai header { border-bottom: 1px solid var(--hz-separator); }
.system-ai header small,.system-ai small { color: var(--hz-secondary); }
.ai-messages { background: var(--hz-canvas); }
.ai-answer { background: var(--hz-surface); border-color: var(--hz-separator); }
.ai-user { background: var(--hz-accent-soft); color: var(--hz-label); }
.system-ai-launch,.system-ai [type=submit] { background: var(--hz-accent); color: var(--hz-on-accent); }

/* Login preserves configured festive photography while using shared surfaces. */
body[data-hz-surface="login"] .wrap { border-radius: 1.75rem; box-shadow: var(--hz-shadow-dialog); border: 1px solid var(--hz-highlight); }
body[data-hz-surface="login"] .brand { background: rgba(20,28,40,.78); color: #ffffff; }
body[data-hz-surface="login"] .brand h1 { color: #ffffff; font-size: 1.75rem; }
body[data-hz-surface="login"] .brand :is(ul,.sub,.foot,.festival-welcome) { color: #d9e2ed; }
body[data-hz-surface="login"] .panel { background: var(--hz-surface); color: var(--hz-label); }
body[data-hz-surface="login"] #btn { background: var(--hz-accent); color: var(--hz-on-accent); min-height: 2.75rem; }
body[data-hz-surface="login"] .field label { font-size: .8125rem; color: var(--hz-label); margin-bottom: .5rem; }
body[data-hz-surface="login"] .field input { font-size: 1rem; }

/* Graph controls share typography and control shape; the starfield stays dark. */
body[data-hz-surface="graph"] { --hz-label:#f5f5f7; --hz-secondary:#b6b6bd; --hz-surface:#20232c; --hz-field:#252a35; --hz-border:#515966; --hz-separator:#39414c; --hz-accent:#77b7ff; }
body[data-hz-surface="graph"] :is(button,input,select) { font-family:var(--hz-font); border-radius:var(--hz-radius-control); }

@media (max-width: 1000px) {
  .ct-grid,.hz-routing-chain { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topbar { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  :root { --hz-control-height: 2.75rem; }
  .ct-grid,.hz-routing-chain,.form,.dz-form,.crm-form { grid-template-columns: minmax(0,1fr); }
  .ct-body { padding: 1rem; }
  .ct-modal>header { padding: .875rem 1rem; }
  .ct-modal>header h2 { font-size: 1rem; }
  .ct-modal .ct-body>footer { bottom: -1rem; }
  .ct-modal .ct-body>footer button { flex: 1; }
  body:not([data-hz-surface="graph"]) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { font-size: 1rem; }
  .ct-routing .hz-routing-chain { gap: .625rem; }
  body[data-hz-surface="admin"] .sidebar { width: 11rem; }
  .announcement-main>.announcement-reader { grid-template-columns: minmax(0,1fr); }
  body[data-hz-surface="admin"] .app { flex-direction: column; }
  body[data-hz-surface="admin"] .sidebar { width: auto; max-height: 12rem; display: block; padding: .75rem; }
  body[data-hz-surface="admin"] .sidebar .brand { padding-bottom: .5rem; }
  body[data-hz-surface="admin"] .sidebar .nav-item { display: inline-flex; margin-right: .25rem; }
  body[data-hz-surface="admin"] .sidebar .side-foot { margin-top: .5rem; }
  body[data-hz-surface="admin"] .main { min-height: 0; }
  body[data-hz-surface="admin"] #adminBody { padding: 1rem; }
}
@media (pointer: coarse) {
  body:not([data-hz-surface="graph"]) :is(button,.btn,.nav-item) { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-hz-surface="graph"]) *,body:not([data-hz-surface="graph"]) *::before,body:not([data-hz-surface="graph"]) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  body:not([data-hz-surface="login"]):not([data-hz-surface="graph"]) .sidebar,.ct-modal>header,.topbar { background: var(--hz-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not([data-hz-surface="login"]):not([data-hz-surface="graph"]) .sidebar { background: var(--hz-surface); }
}