/*
 * nox-panel.css: the shared component kit for every panel page (admin, merchant, customer), on top of KTUI + nox-ui.css.
 * Production subset of the merchant prototype's designs/merchant-panel/_shared/panel.css (the approved "Polished Pro" kit):
 * every component real pages need, unchanged. Dropped (prototype only): the demo-states note (.nx-demo*), the page map
 * (.nx-map-*) and the "Being designed" placeholder (.nx-wip*). Live examples with copy-ready markup: designs/merchant-panel/_components/.
 * Only KTUI tokens (--primary, --border, --muted, --mono, --card ...) and the finish's --nx-* tokens, so light and dark come for free.
 *
 *  1 shell (state-aware nav, header user menu)    9  modals (sizes, confirm, preview)
 *  2 page header + breadcrumb                      10 stepper
 *  3 filter bar                                    11 alerts / notices / callouts
 *  4 table card, ids, status, pager                12 rich text: display (.nx-prose) + editor
 *  5 phone table layout (.nx-table-stack)          13 copy field, quantity stepper, choice rows
 *  6 forms (label-left, help, errors, password)    14 amounts, tool tiles, misc
 *  7 detail header, key/value list, stats          15 auth + error layouts
 *  8 tabs (link tabs, in-page tabs)               17 shell extras: contact support, drawer, account menu
 *                                                 18 runtime pieces for public/js/nox-ui.js (toasts, dialogs, errors)
 *
 * Plain CSS, no build step. Load order: styles-*.css (KTUI build) -> nox-ui.css -> nox-panel.css -> nox-<panel>.css -> page CSS.
 */

/* ============ 1. shell ============ */
/* nav items carry data-nx-nav="active|draft|pending|onboarding"; <html data-nx-state> decides what shows */
html[data-nx-state="active"] [data-nx-nav~="draft"],
html[data-nx-state="active"] [data-nx-nav~="pending"],
html[data-nx-state="active"] [data-nx-nav~="onboarding"],
html[data-nx-state="draft"] [data-nx-nav~="active"],
html[data-nx-state="draft"] [data-nx-nav~="pending"],
html[data-nx-state="pending"] [data-nx-nav~="active"],
html[data-nx-state="pending"] [data-nx-nav~="draft"] { display: none !important; }
#sidebar .kt-badge-warning.nx-badge-alert { background: color-mix(in oklab, #f59e0b 16%, var(--card)) !important; }
#sidebar_primary_menu .kt-menu-accordion .kt-menu-item.active > .kt-menu-link .kt-menu-title { color: var(--mono) !important; font-weight: 600; }
/* native controls (date pickers, scrollbars, selects) follow the theme (L2) */
:root { color-scheme: light; }
html.dark { color-scheme: dark; }
/* one link colour per theme: primary in light, a lighter blue in dark (primary itself is 3.9:1 on dark cards) */
:root { --nx-link: var(--primary); --nx-warn-text: #a16207; }
.dark { --nx-link: #6ea8fe; --nx-warn-text: #fbbf24; }
/* the sidebar's section rules (above Logout, above the account block; build.py's shell) match its header rule (nox-ui.css "Lines") */
#sidebar_secondary_menu > .border-t, #sidebar_footer > .border-t { border-color: var(--nx-line-strong); }
.nx-skip { position: absolute; left: -999px; top: .5rem; z-index: 100; }
.nx-skip:focus { left: .75rem; padding: .5rem .75rem; border-radius: 8px; background: var(--card); border: 1px solid var(--border); color: var(--mono); }
/* header: domain chip + user menu */
.nx-domain { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 500; color: var(--secondary-foreground); white-space: nowrap; }
.nx-user-btn { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .375rem 0 .25rem; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--foreground); }
.nx-user-btn:hover, [data-kt-dropdown-initialized].open > .nx-user-btn { background: var(--muted); }
.nx-user-btn .nx-avatar { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; border-radius: 999px; font-size: .75rem; }
.nx-user-btn > i { font-size: .625rem; color: var(--muted-foreground); }
.nx-menu { min-width: 15rem; padding: .375rem; border: 1px solid var(--nx-line-strong); border-radius: 10px; background: var(--popover); color: var(--popover-foreground); box-shadow: var(--nx-shadow-lg); z-index: 60; }
.nx-menu-head { display: flex; align-items: center; gap: .625rem; padding: .5rem .5rem .625rem; margin-bottom: .25rem; border-bottom: 1px solid var(--border); }
.nx-menu-link { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .5rem; border-radius: 6px; font-size: .8125rem; color: var(--foreground); background: transparent; border: 0; text-align: start; cursor: pointer; }
.nx-menu-link i { font-size: 1rem; color: var(--muted-foreground); width: 1.125rem; }
.nx-menu-link:hover { background: var(--muted); color: var(--mono); }
.nx-menu-link:hover i { color: var(--primary); }
.nx-menu-sep { height: 1px; margin: .25rem -.375rem; background: var(--border); }
.nx-menu .kt-switch { margin-inline-start: auto; }

/* ============ 2. page header ============ */
.nx-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.25rem; padding-bottom: 1.5rem; }
.nx-page-head-main { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.nx-page-title { font-size: 1.25rem; font-weight: 600; line-height: 1.15; color: var(--mono); letter-spacing: -.01em; display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.nx-page-sub { font-size: .875rem; color: var(--secondary-foreground); }
.nx-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.nx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--muted-foreground); min-width: 0; }
.nx-crumbs a { color: var(--secondary-foreground); }
.nx-crumbs a:hover { color: var(--primary); }
.nx-crumbs i { font-size: .5625rem; color: var(--muted-foreground); }
.nx-crumbs [aria-current] { color: var(--mono); font-weight: 500; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 39.98rem) {
  .nx-page-head { padding-bottom: 1.125rem; }
  .nx-page-actions { width: 100%; }
  .nx-page-actions > .kt-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============ 3. filter bar ============ */
/* The panel's one filter pattern (M2: every control has a visible label). It sits right under the table card's header:
   <div class="nx-filters" role="search" aria-label="Filter orders">
     <div class="nx-filter nx-filter-search"><label for="x_search">Search</label><label class="kt-input nx-search">…<input id="x_search"></label></div>
     <div class="nx-filter"><label for="x_type">Type</label><select id="x_type" class="kt-select">…</select></div>
     <div class="nx-filter nx-filter-dates"><span class="nx-filter-label" id="x_dates">From – to</span><div class="nx-daterange" role="group" aria-labelledby="x_dates">…</div></div>
     <div class="nx-filter-actions"><button class="kt-btn kt-btn-sm kt-btn-ghost" x-show="t.dirty">Reset</button></div>
   </div>  Filters apply as you type; Reset appears once anything is set. */
.nx-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: .875rem 1.125rem 1rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 35%, var(--card)); min-width: 0; }
.nx-filter { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.nx-filter > label:not(.kt-input), .nx-filter > .nx-filter-label { font-size: .75rem; font-weight: 500; color: var(--secondary-foreground); white-space: nowrap; }
.nx-filters .kt-input, .nx-filters .kt-select { height: 2.125rem; font-size: .8125rem; background-color: var(--card); }
.nx-filters .nx-search { width: 15rem; flex: none; }
.nx-filters .kt-select { width: 9.25rem; min-width: 0; }
.nx-filters .nx-date { width: 9rem; }
.nx-filter-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; min-height: 2.125rem; }
.nx-filter-actions .kt-btn { height: 2.125rem; }
.nx-filter-note { flex-basis: 100%; font-size: .75rem; color: var(--secondary-foreground); }
@container (max-width: 640px) {
  .nx-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: .875rem 1rem 1rem; gap: .625rem; }
  .nx-filter-search, .nx-filter-dates, .nx-filter-wide, .nx-filter-actions, .nx-filter-note { grid-column: 1 / -1; }
  .nx-filters .nx-search, .nx-filters .kt-select, .nx-filters .nx-date { width: 100%; }
  .nx-filter-dates .nx-daterange { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nx-filter-actions { margin: 0; min-height: 0; }
  .nx-filter-actions:not(:has(> :not([style*="display: none"]))) { display: none; }
  .nx-filter-actions > .kt-btn { flex: 1 1 0; justify-content: center; }
}
/* a box too narrow for the two date fields side by side (each needs ~127 px: a 320 px phone ran 20 px past the card): From over To,
   each the full width; "to" goes, the "From – to" label above says it (task 795). From 310 px inside the card (a 360 px phone) as before. */
@container (max-width: 309.98px) {
  .nx-filter-dates .nx-daterange { grid-template-columns: minmax(0, 1fr); row-gap: .375rem; }
  .nx-filter-dates .nx-daterange > span { display: none; }
}
.nx-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.nx-filterbar .kt-input, .nx-filterbar .kt-select { height: 2.125rem; font-size: .8125rem; }
.nx-search { width: 16rem; max-width: 100%; }
.nx-search input { min-width: 0; }
.nx-filterbar .kt-select { width: auto; min-width: 9rem; }
.nx-daterange { display: inline-flex; align-items: center; gap: .375rem; }
.nx-daterange > span { font-size: .75rem; color: var(--muted-foreground); }
.nx-filterbar .nx-date { width: 9.5rem; }
.nx-filter-label { font-size: .75rem; color: var(--muted-foreground); }
.nx-active-filters { display: flex; flex-wrap: wrap; gap: .375rem; }
.nx-filter-chip { display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .25rem 0 .5rem; border-radius: 999px; font-size: .75rem; background: color-mix(in oklab, var(--primary) 8%, var(--card)); color: var(--mono); border: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border)); }
.nx-filter-chip button { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.nx-filter-chip button:hover { color: var(--mono); background: var(--muted); }
@media (max-width: 39.98rem) {
  .nx-filterbar { width: 100%; }
  .nx-filterbar .nx-search { width: 100%; flex: 1 1 100%; }
  .nx-filterbar .kt-select { flex: 1 1 8rem; }
  .nx-daterange { flex: 1 1 100%; display: grid; grid-template-columns: 1fr auto 1fr; }
  .nx-filterbar .nx-date { width: 100%; }
}

/* ============ 4. table card ============ */
.nx-table-card { container-type: inline-size; }
.nx-table-card > .kt-card-header { flex-wrap: wrap; gap: .75rem; padding-block: .75rem; }
.nx-table-card .kt-card-title { display: inline-flex; align-items: center; gap: .5rem; }
.nx-table td.nx-num, .nx-table th.nx-num { text-align: end; }
:where(.nx-table) .nx-cell-sub { display: block; margin-top: .125rem; font-size: .75rem; color: var(--secondary-foreground); white-space: nowrap; }
.nx-table .nx-cell-title { font-weight: 500; color: var(--mono); }
.nx-table a.nx-cell-title:hover, .nx-table a.nx-row-link:hover { color: var(--primary); }
.nx-table th.nx-sortable { cursor: pointer; user-select: none; }
.nx-table th.nx-sortable:hover { color: var(--mono); }
/* sortable column: <th class="nx-sortable" :aria-sort="t.ariaSort('amount')"><button type="button" class="nx-sort" @click="t.sortBy('amount')">Total <i class="ki-filled" :class="t.sortIcon('amount')" aria-hidden="true"></i></button></th> */
.nx-table th .nx-sort { display: inline-flex; align-items: center; gap: .25rem; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; border-radius: 4px; }
.nx-table th .nx-sort:hover { color: var(--mono); }
.nx-table th .nx-sort:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; }
.nx-table th.nx-num .nx-sort { justify-content: flex-end; }
.nx-table th .nx-sort i { font-size: .625rem; opacity: .45; }
.nx-table th[aria-sort] .nx-sort i { opacity: 1; color: var(--primary); }
.nx-table tr.is-selected { background: color-mix(in oklab, var(--primary) 6%, var(--card)); }
/* amount with a line under it (method, margin, months), right-aligned */
.nx-amt { display: inline-flex; flex-direction: column; align-items: flex-end; }
.nx-amt .nx-cell-sub { margin-top: .125rem; }
/* money that was never charged (rejected orders): struck through, muted */
.nx-void { color: var(--muted-foreground) !important; text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
.nx-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .375rem; flex-wrap: nowrap; }
.nx-table td.nx-empty-cell { padding: 0 !important; }
.nx-table td.nx-empty-cell .nx-empty { padding: 2.5rem 1rem; }
.nx-empty .nx-empty-title { font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-empty .nx-empty-text { font-size: .75rem; color: var(--secondary-foreground); max-width: 22rem; }
.nx-empty .kt-btn { margin-top: .5rem; }
/* status: kt-badge kt-badge-outline nx-pill-badge kt-badge-<tone> + .nx-dot-sm (see panel.js statusTone) */
.kt-badge-outline.kt-badge-secondary.nx-pill-badge { color: var(--secondary-foreground); background: var(--muted); }
.kt-badge-outline.kt-badge-info { background: color-mix(in oklab, #7c3aed 9%, var(--card)); border-color: color-mix(in oklab, #7c3aed 24%, transparent); color: #6d28d9; }
.dark .kt-badge-outline.kt-badge-info { color: #c4b5fd; }
/* pager footer */
.nx-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.nx-pager-info { font-size: .8125rem; color: var(--secondary-foreground); }
.nx-pager-info b { font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; }
.nx-pager-nav { display: flex; align-items: center; gap: .375rem; }
.nx-pager-nav .nx-page-no { min-width: 2rem; justify-content: center; font-variant-numeric: tabular-nums; }
.nx-pager-nav .nx-page-no.is-current { background: var(--card); border-color: color-mix(in oklab, var(--primary) 45%, var(--nx-line-strong)); color: var(--mono); font-weight: 600; }
.nx-pager .kt-select { height: 2rem; width: auto; font-size: .8125rem; }
@container (max-width: 640px) { .nx-pager-nav .nx-page-no { display: none; } .nx-pager { justify-content: center; } }

/* medium cards (641-960 px): drop secondary columns marked nx-col-hide-md (th) / nx-td-hide-md (td) */
@container (max-width: 960px) { .nx-table .nx-col-hide-md, .nx-table .nx-td-hide-md { display: none; } }
/* ============ 5. phone table layout: rows become cards; primary + actions always visible ============ */
@container (max-width: 640px) {
  .nx-table-stack thead { display: none; }
  .nx-table-stack, .nx-table-stack tbody { display: block; width: 100%; }
  .nx-table-stack tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; padding: .875rem 1.125rem; border-top: 1px solid var(--border); border-bottom: 0; }
  .nx-table-stack tbody tr:first-of-type { border-top: 0; }   /* first-of-type: the tbody's first child is the Alpine <template> */
  .nx-table-stack tbody td { display: flex; align-items: center; gap: .5rem; padding: 0 !important; border: 0 !important; min-width: 0; }
  .nx-table-stack tbody td[data-label]::before { content: attr(data-label); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); min-width: 5.5rem; text-align: start; }
  .nx-table-stack tbody td[data-label] { flex: 1 1 100%; justify-content: space-between; text-align: end; }
  .nx-table-stack tbody td.nx-td-primary { flex: 1 1 0; order: -2; justify-content: flex-start; text-align: start; }
  .nx-table-stack tbody td.nx-td-primary::before { display: none; }
  .nx-table-stack tbody td.nx-td-aside { flex: 0 0 auto; order: -1; margin-inline-start: auto; text-align: end; }
  .nx-table-stack tbody td.nx-td-aside::before { display: none; }
  .nx-table-stack tbody td.nx-td-actions { flex: 1 1 100%; order: 10; justify-content: stretch; padding-top: .375rem !important; }
  .nx-table-stack tbody td.nx-td-actions::before { display: none; }
  .nx-table-stack tbody td.nx-td-actions .nx-row-actions { width: 100%; justify-content: stretch; }
  .nx-table-stack tbody td.nx-td-actions .nx-row-actions > .kt-btn { flex: 1 1 0; justify-content: center; }
  .nx-table-stack tbody td.nx-td-hide-sm { display: none; }
  .nx-table-stack tbody td.nx-empty-cell { flex: 1 1 100%; justify-content: center; }
  .nx-table-stack tbody td.nx-empty-cell::before { display: none; }
  .nx-table-stack .nx-cell-sub { white-space: normal; }
}

/* ============ 6. forms ============ */
.nx-form { container-type: inline-size; display: flex; flex-direction: column; gap: 1.25rem; }
.nx-field { display: grid; gap: .5rem; min-width: 0; }
.nx-field-label { font-size: .8125rem; font-weight: 500; color: var(--mono); line-height: 1.3; }
.nx-req { color: var(--nx-bad); }
.nx-field-label .nx-req { margin-inline-start: .125rem; }
.nx-field-label .nx-opt { font-weight: 400; color: var(--muted-foreground); }
.nx-field-hint { display: block; margin-top: .25rem; font-size: .75rem; font-weight: 400; color: var(--muted-foreground); }
.nx-field-control { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.nx-help { font-size: .75rem; line-height: 1.45; color: var(--secondary-foreground); }
.nx-error { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--nx-bad); }   /* --nx-bad: 4.8:1 light, 6:1 dark (--destructive is 3.9:1 on dark cards) */
.nx-error::before { content: ""; width: .375rem; height: .375rem; border-radius: 999px; background: currentColor; flex: 0 0 .375rem; }
.nx-counter { font-size: .6875rem; color: var(--muted-foreground); font-family: var(--nx-mono); align-self: flex-end; white-space: nowrap; flex-shrink: 0; }
.nx-counter.is-warn { color: var(--nx-warn-text); }
.nx-counter.is-over { color: var(--nx-bad); }
.nx-help-warn { color: var(--nx-warn-text); }
.kt-input-group.nx-invalid { border-radius: 8px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 12%, transparent); }
.kt-input-group.nx-invalid > .kt-input { border-color: color-mix(in oklab, var(--destructive) 70%, var(--input)) !important; }
/* footer status next to Save: "Unsaved changes" (amber dot), nx-saved, or an error count */
/* one-tap reasons above a reason textarea (reject order, refund, ban): tap fills the field */
.nx-quick { display: flex; flex-wrap: wrap; gap: .375rem; }
.nx-quick button { height: 1.625rem; padding: 0 .625rem; border-radius: 999px; border: 1px solid var(--nx-line-strong); background: var(--card); color: var(--secondary-foreground); font-size: .75rem; cursor: pointer; transition: border-color .12s, background-color .12s; }
.nx-quick button:hover { border-color: var(--input); color: var(--mono); background: var(--muted); }
.nx-quick button.is-picked { border-color: color-mix(in oklab, var(--primary) 45%, var(--nx-line-strong)); background: color-mix(in oklab, var(--primary) 8%, var(--card)); color: var(--mono); }
.nx-quick button:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; }
.nx-unsaved { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--secondary-foreground); }
.nx-unsaved::before { content: ""; width: .375rem; height: .375rem; border-radius: 999px; background: #f59e0b; }
.kt-input.nx-invalid, .kt-textarea.nx-invalid, .kt-select.nx-invalid, .nx-invalid > .kt-input, [aria-invalid="true"].kt-input, [aria-invalid="true"].kt-textarea { border-color: color-mix(in oklab, var(--destructive) 70%, var(--input)) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 12%, transparent) !important; }
.kt-textarea { border-radius: 8px; background: var(--card); padding: .5rem .75rem; font-size: .8125rem; line-height: 1.5; }
.kt-textarea:focus { outline: none; border-color: color-mix(in oklab, var(--primary) 60%, var(--input)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 16%, transparent); }
.kt-select { border-radius: 8px; background-color: var(--card); color-scheme: light; }   /* field line + focus ring: nox-ui.css "Lines" */
.dark .kt-select, .dark .kt-textarea { color-scheme: dark; }
.nx-form-section { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.nx-form-section:first-child { padding-top: 0; border-top: 0; }
.nx-form-section-title { font-size: .8125rem; font-weight: 600; color: var(--mono); }
.nx-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
@container (min-width: 620px) {
  .nx-form:not(.nx-form-stacked) .nx-field { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .nx-form:not(.nx-form-stacked) .nx-field > .nx-field-label { padding-top: .5rem; }
}
.nx-saved { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--nx-ok-text); }
/* password with show/hide (Alpine: x-data="{ show: false }") */
.nx-password { position: relative; }
.nx-password > .kt-input { padding-inline-end: 2.5rem; }
.nx-password > button { position: absolute; inset-block: 0; inset-inline-end: .25rem; margin: auto; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.nx-password > button:hover { color: var(--mono); background: var(--muted); }
.nx-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.nx-strength i { height: .25rem; border-radius: 999px; background: var(--border); }
.nx-strength[data-score="1"] i:nth-child(-n+1) { background: var(--nx-bad); }
.nx-strength[data-score="2"] i:nth-child(-n+2) { background: #f59e0b; }
.nx-strength[data-score="3"] i:nth-child(-n+3) { background: var(--primary); }
.nx-strength[data-score="4"] i { background: var(--nx-ok); }
/* strength word + live rules under a new-password field (register, reset, settings/password) */
.nx-pw-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.nx-pw-strength-label { margin-inline-start: auto; font-size: .6875rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.nx-rules { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
.nx-rules li { display: inline-flex; align-items: center; gap: .3125rem; font-size: .75rem; color: var(--muted-foreground); }
.nx-rules li i { font-size: .875rem; }
.nx-rules li.is-ok { color: var(--nx-ok-text); }

/* ============ 7. detail header, key/value, stats ============ */
.nx-detail { overflow: hidden; container-type: inline-size; }
.nx-detail-main { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.125rem; }
.nx-detail-id { display: flex; flex-direction: column; gap: .375rem; min-width: 0; flex: 1 1 16rem; }
.nx-detail-name { font-size: 1.0625rem; font-weight: 600; color: var(--mono); line-height: 1.2; overflow-wrap: anywhere; }
.nx-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .8125rem; color: var(--secondary-foreground); }
.nx-detail-meta > span { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; overflow-wrap: anywhere; }
.nx-detail-meta i { font-size: .875rem; color: var(--muted-foreground); }
.nx-detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.nx-avatar-lg { width: 3.5rem; height: 3.5rem; flex: 0 0 3.5rem; font-size: 1.125rem; border-radius: 12px; }
/* facts: 2 columns, 3 from a 520px card, one row from 900px; every row after the first gets a divider */
.nx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 35%, var(--card)); }
.nx-fact { display: flex; flex-direction: column; gap: .25rem; padding: .75rem 1.125rem; border-inline-start: 1px solid var(--border); border-top: 1px solid var(--border); min-width: 0; }
.nx-fact:nth-child(odd) { border-inline-start: 0; }
.nx-fact:nth-child(-n+2) { border-top: 0; }
@container (min-width: 520px) {
  .nx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-fact:nth-child(odd) { border-inline-start: 1px solid var(--border); }
  .nx-fact:nth-child(3n+1) { border-inline-start: 0; }
  .nx-fact:nth-child(-n+3) { border-top: 0; }
}
@container (min-width: 900px) {
  .nx-facts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .nx-fact, .nx-fact:nth-child(odd), .nx-fact:nth-child(3n+1) { border-top: 0; border-inline-start: 1px solid var(--border); }
  .nx-fact:first-child { border-inline-start: 0; }
}
.nx-fact b { font-size: .9375rem; font-weight: 600; color: var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nx-fact small { font-size: .75rem; color: var(--secondary-foreground); }
@media (max-width: 39.98rem) {
  .nx-detail-actions { width: 100%; }
  .nx-detail-actions > .kt-btn { flex: 1 1 calc(50% - .25rem); justify-content: center; }
}
.nx-kv { display: flex; flex-direction: column; margin: 0; }
.nx-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .625rem 0; border-top: 1px solid var(--border); font-size: .8125rem; }
.nx-kv > div:first-child, .nx-kv > template:first-child + div { border-top: 0; }
.nx-kv dt { color: var(--secondary-foreground); flex-shrink: 0; }
.nx-kv dd { margin: 0; font-weight: 500; color: var(--mono); text-align: end; min-width: 0; overflow-wrap: anywhere; }
.nx-kv.nx-kv-stack > div { flex-direction: column; align-items: stretch; gap: .25rem; }
.nx-kv.nx-kv-stack dd { text-align: start; font-weight: 400; color: var(--foreground); line-height: 1.5; }
.nx-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 40rem) { .nx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .nx-stats.nx-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .nx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nx-stats.nx-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nx-stat { display: flex; flex-direction: column; gap: .625rem; padding: 1rem 1.125rem; }
.nx-stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.nx-stat-value { font-size: 1.375rem; font-weight: 600; color: var(--mono); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nx-stat-sub { font-size: .75rem; color: var(--secondary-foreground); }
.nx-stat-sub b { font-weight: 600; color: var(--mono); }

/* ============ 8. tabs ============ */
/* link tabs between sibling pages: <nav class="kt-tabs kt-tabs-line nx-underline nx-tabs nx-linktabs"> */
.nx-linktabs { border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; gap: 1.5rem; contain: inline-size; }
/* scrolling tab rows (.nx-tabs): the shell (panel.js fitTabs) keeps the active tab whole and fades only the side with more tabs */
.nx-tabs.nx-fade-end { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.nx-tabs.nx-fade-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem); mask-image: linear-gradient(90deg, transparent, #000 1.5rem); }
.nx-tabs.nx-fade-start.nx-fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 85%, transparent); }
.nx-linktabs .kt-tab-toggle { height: 2.75rem; gap: .375rem; }
.nx-linktabs .kt-tab-toggle i { font-size: 1rem; color: var(--muted-foreground); }
.nx-linktabs .kt-tab-toggle.active i { color: var(--primary); }
.nx-tabpanel[hidden] { display: none !important; }
/* in-page tabs: segmented (.nx-seg, from the finish) or underline inside a card header */

/* ============ 9. modals ============ */
.kt-modal-content.nx-modal { width: 100%; display: flex; flex-direction: column; max-height: calc(100dvh - 8vh - 2rem); top: 8vh; }
/* KTModal fades its backdrop out and removes it ~1.3 s later; until then it would swallow the next click */
[data-kt-modal-backdrop][style*="opacity: 0"] { pointer-events: none; }
.nx-modal-sm { max-width: 440px; }
.nx-modal-md { max-width: 560px; }
.nx-modal-lg { max-width: 820px; }
.nx-modal .kt-modal-header { flex-shrink: 0; }
.nx-modal .kt-modal-body { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.125rem; }
.nx-modal .kt-modal-footer { flex-shrink: 0; gap: .5rem; flex-wrap: wrap; }
.nx-modal .kt-modal-title { font-size: .9375rem; font-weight: 600; color: var(--mono); }
.nx-modal-lead { display: flex; gap: .875rem; align-items: flex-start; }
.nx-modal-lead p { font-size: .8125rem; line-height: 1.5; color: var(--secondary-foreground); }
.nx-modal-summary { border: 1px solid var(--nx-line-strong); border-radius: 10px; padding: .25rem .875rem; background: color-mix(in oklab, var(--muted) 40%, var(--card)); }
@media (max-width: 39.98rem) {
  .kt-modal-content.nx-modal { top: 1rem; max-height: calc(100dvh - 3rem); }
  .nx-modal .kt-modal-footer > .kt-btn { flex: 1 1 0; justify-content: center; }
}
/* image preview (payment proof): image + context side panel; never taller than the screen */
.nx-preview, .nx-modal .kt-modal-body.nx-preview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 !important; }
.nx-preview-stage { display: grid; place-items: center; min-height: 14rem; max-height: 62vh; overflow: auto; padding: 1rem;
  background-color: var(--muted); background-image: radial-gradient(color-mix(in oklab, var(--foreground) 10%, transparent) 1px, transparent 1px); background-size: 14px 14px; }
.nx-preview-stage img { max-width: 100%; max-height: calc(62vh - 2rem); object-fit: contain; border-radius: 8px; box-shadow: var(--nx-shadow-lg); cursor: zoom-in; }
.nx-preview-stage.is-zoomed { place-items: start; }
.nx-preview-stage.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.nx-preview-side { display: flex; flex-direction: column; gap: .875rem; padding: 1rem 1.125rem; border-top: 1px solid var(--border); }
@media (min-width: 48rem) {
  .nx-preview, .nx-modal .kt-modal-body.nx-preview { grid-template-columns: minmax(0, 1fr) 17rem; }
  .nx-preview-stage { min-height: min(26rem, calc(100dvh - 8vh - 10.5rem)); max-height: min(70vh, calc(100dvh - 8vh - 10.5rem)); }
  .nx-preview-stage img { max-height: calc(min(70vh, 100dvh - 8vh - 10.5rem) - 2rem); }
  .nx-preview-side { border-top: 0; border-inline-start: 1px solid var(--border); }
}

/* ============ 10. stepper ============ */
.nx-stepper { display: flex; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: nx-step; }
.nx-stepper-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; min-width: 0; }
.nx-stepper-step:not(:last-child)::after { content: ""; position: absolute; top: 1rem; inset-inline-start: calc(50% + 1.375rem); inset-inline-end: calc(-50% + 1.375rem); height: 2px; border-radius: 2px; background: var(--border); }
.nx-stepper-step.is-done:not(:last-child)::after { background: color-mix(in oklab, var(--nx-ok) 55%, var(--border)); }
.nx-stepper-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; font-family: var(--nx-mono);
  border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); }
.nx-stepper-dot i { font-size: 1rem; }
.nx-stepper-step.is-done .nx-stepper-dot { background: color-mix(in oklab, var(--nx-ok) 12%, var(--card)); border-color: color-mix(in oklab, var(--nx-ok) 40%, transparent); color: var(--nx-ok-text); }
.nx-stepper-step.is-current .nx-stepper-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 16%, transparent); }
.nx-stepper-text { display: flex; flex-direction: column; gap: .125rem; font-size: .8125rem; }
.nx-stepper-text b { font-weight: 600; color: var(--secondary-foreground); }
.nx-stepper-step.is-current .nx-stepper-text b, .nx-stepper-step.is-done .nx-stepper-text b { color: var(--mono); }
.nx-stepper-text small { font-size: .75rem; color: var(--muted-foreground); }
@media (max-width: 39.98rem) {
  .nx-stepper-text small { display: none; }
  .nx-stepper-text b { font-size: .75rem; }
}

/* ============ 11. alerts, notices, callouts ============ */
/* use: kt-alert kt-alert-light kt-alert-{primary|success|warning|destructive|info} */
.kt-alert { border-radius: 10px; line-height: 1.5; }
.kt-alert > i.kt-alert-icon, .kt-alert > .kt-alert-icon > i { font-size: 1.125rem; line-height: 1.25rem; }
.kt-alert-light { background: color-mix(in oklab, var(--muted) 60%, var(--card)); }
.kt-alert-light.kt-alert-primary > i.kt-alert-icon { color: var(--primary); }
.dark .kt-alert-light.kt-alert-primary > i.kt-alert-icon { color: var(--nx-link); }
.kt-alert-light.kt-alert-success > i.kt-alert-icon { color: var(--nx-ok-text); }
.kt-alert-light.kt-alert-warning > i.kt-alert-icon { color: #b45309; }
.dark .kt-alert-light.kt-alert-warning > i.kt-alert-icon { color: var(--nx-warn-text); }
.kt-alert-light.kt-alert-destructive > i.kt-alert-icon { color: var(--nx-bad); }
.kt-alert-light.kt-alert-info > i.kt-alert-icon { color: #7c3aed; }
.dark .kt-alert-light.kt-alert-info > i.kt-alert-icon { color: #c4b5fd; }
.kt-alert-light.kt-alert-primary { border-color: color-mix(in oklab, var(--primary) 22%, var(--border)); background: color-mix(in oklab, var(--primary) 5%, var(--card)); }
.kt-alert-light.kt-alert-destructive { border-color: color-mix(in oklab, var(--nx-bad) 26%, var(--border)); background: color-mix(in oklab, var(--nx-bad) 5%, var(--card)); }
.kt-alert-light.kt-alert-success { border-color: color-mix(in oklab, var(--nx-ok) 28%, var(--border)); background: color-mix(in oklab, var(--nx-ok) 6%, var(--card)); }
.kt-alert-light.kt-alert-warning { border-color: color-mix(in oklab, #f59e0b 30%, var(--border)); background: color-mix(in oklab, #f59e0b 6%, var(--card)); }
.kt-alert-light.kt-alert-info { border-color: color-mix(in oklab, #7c3aed 22%, var(--border)); background: color-mix(in oklab, #7c3aed 5%, var(--card)); }
.kt-alert .kt-alert-title { font-weight: 600; color: var(--mono); font-size: .8125rem; }
.kt-alert .kt-alert-description, .kt-alert .kt-alert-content > p { font-size: .8125rem; color: var(--secondary-foreground); }
.kt-alert .kt-alert-actions { margin-top: .5rem; flex-wrap: wrap; }
/* quoted text inside an alert or card (rejection / ban / decline reasons) */
.nx-quote { margin-top: .375rem; padding: .5rem .75rem; border-inline-start: 3px solid var(--border); border-radius: 0 6px 6px 0; background: color-mix(in oklab, var(--muted) 45%, var(--card)); font-size: .8125rem; color: var(--foreground); overflow-wrap: anywhere; }
.nx-callout { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: 10px; border: 1px dashed var(--border); background: color-mix(in oklab, var(--muted) 45%, var(--card)); font-size: .8125rem; color: var(--secondary-foreground); }

/* ============ 12. rich text ============ */
.nx-prose { font-size: .875rem; line-height: 1.65; color: var(--foreground); max-width: 72ch; overflow-wrap: anywhere; }
.nx-prose > * + * { margin-top: .75em; }
.nx-prose h2, .nx-prose h3, .nx-prose h4 { color: var(--mono); font-weight: 600; line-height: 1.3; margin-top: 1.25em; }
.nx-prose h2 { font-size: 1.0625rem; } .nx-prose h3 { font-size: .9375rem; } .nx-prose h4 { font-size: .875rem; }
.nx-prose ul, .nx-prose ol { padding-inline-start: 1.25rem; }
.nx-prose ul { list-style: disc; } .nx-prose ol { list-style: decimal; }
.nx-prose li + li { margin-top: .25em; }
.nx-prose li::marker { color: var(--muted-foreground); }
.nx-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.dark .nx-prose a { color: var(--nx-link); }
.nx-prose a[target="_blank"]::after { content: " ↗" / " (opens in a new tab)"; font-size: .85em; }
.nx-prose strong { font-weight: 600; color: var(--mono); }
.nx-prose code { font-family: var(--nx-mono); font-size: .8125em; padding: .1em .35em; border-radius: 5px; background: var(--muted); }
.nx-prose blockquote { border-inline-start: 3px solid var(--border); padding-inline-start: .875rem; color: var(--secondary-foreground); }
.nx-prose-sm { font-size: .8125rem; }
/* static editor (Jodit-like): toolbar + contenteditable area */
.nx-editor { border: 1px solid var(--nx-line-input); border-radius: 10px; background: var(--card); box-shadow: var(--nx-shadow); overflow: hidden; }
.nx-editor:focus-within { border-color: color-mix(in oklab, var(--primary) 60%, var(--input)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 16%, transparent); }
.nx-editor-toolbar { display: flex; align-items: center; gap: .125rem; padding: .3125rem; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--muted) 55%, var(--card)); overflow-x: auto; scrollbar-width: none; }
.nx-editor-toolbar::-webkit-scrollbar { display: none; }
.nx-editor-btn { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 2rem; height: 2rem; padding: 0 .375rem; border: 0; border-radius: 6px; background: transparent; color: var(--secondary-foreground); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.nx-editor-btn i { font-size: 1.0625rem; }
.nx-editor-btn:hover { background: var(--card); color: var(--mono); box-shadow: inset 0 0 0 1px var(--border); }
.nx-editor-btn.is-active { background: color-mix(in oklab, var(--primary) 12%, var(--card)); color: var(--primary); }
.nx-editor-sep { flex: 0 0 1px; width: 1px; height: 1.25rem; margin: 0 .25rem; background: var(--border); }
.nx-editor-content { min-height: 10rem; max-height: 26rem; overflow-y: auto; padding: .875rem 1rem; outline: none; max-width: none; }
.nx-editor-content:empty::before { content: attr(data-placeholder); color: var(--muted-foreground); }
.nx-editor-foot { display: flex; justify-content: space-between; gap: .75rem; padding: .375rem .75rem; border-top: 1px solid var(--border); font-size: .6875rem; color: var(--muted-foreground); }
.nx-editor.nx-invalid { border-color: color-mix(in oklab, var(--destructive) 70%, var(--input)); }

/* ============ 13. copy field, quantity stepper, choice rows ============ */
.nx-copyfield { display: flex; align-items: stretch; gap: .5rem; min-width: 0; }
.nx-copyfield .kt-input { flex: 1 1 auto; min-width: 0; font-family: var(--nx-mono); font-size: .75rem; color: var(--mono); background: color-mix(in oklab, var(--muted) 50%, var(--card)); }
.nx-copyfield .kt-input input { min-width: 0; text-overflow: ellipsis; }
.nx-copyfield > .kt-btn { flex-shrink: 0; }
.nx-qty { display: inline-flex; align-items: center; border: 1px solid var(--nx-line-input); border-radius: 8px; background: var(--card); overflow: hidden; }
.nx-qty button { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--secondary-foreground); cursor: pointer; font-size: 1rem; }
.nx-qty button:hover:not(:disabled) { background: var(--muted); color: var(--mono); }
.nx-qty button:disabled { opacity: .4; cursor: not-allowed; }
.nx-qty input { width: 2.5rem; height: 2rem; border: 0; border-inline: 1px solid var(--border); background: transparent; text-align: center; font: 500 .8125rem/1 var(--nx-mono); color: var(--mono); -moz-appearance: textfield; }
.nx-qty input::-webkit-outer-spin-button, .nx-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nx-choice { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border: 1px solid var(--nx-line-strong); border-radius: 10px; background: var(--card); cursor: pointer; transition: border-color .12s, background-color .12s; min-width: 0; }
.nx-choice:hover { border-color: var(--input); }
.nx-choice.is-selected, .nx-choice:has(input:checked) { border-color: color-mix(in oklab, var(--primary) 55%, var(--nx-line-strong)); background: color-mix(in oklab, var(--primary) 5%, var(--card)); }
.nx-choice-list { display: flex; flex-direction: column; gap: .5rem; max-height: 20rem; overflow-y: auto; padding: 1px; }

/* ============ 14. amounts, tool tiles, buttons, misc ============ */
/* destructive trigger (Ban, Delete): red outline; the final confirm uses kt-btn-destructive */
.kt-btn.nx-btn-danger { background: var(--card); color: var(--nx-bad); border: 1px solid color-mix(in oklab, var(--nx-bad) 35%, var(--nx-line-strong)); box-shadow: var(--nx-shadow); }
.kt-btn.nx-btn-danger:hover { background: color-mix(in oklab, var(--nx-bad) 7%, var(--card)); border-color: color-mix(in oklab, var(--nx-bad) 55%, var(--nx-line-strong)); }
.dark .kt-btn.nx-btn-danger { color: #fca5a5; }
.kt-btn-destructive { border: 1px solid color-mix(in oklab, var(--destructive) 80%, black); box-shadow: 0 1px 2px rgba(9, 9, 11, .14), inset 0 1px 0 rgba(255, 255, 255, .14); }
.nx-amount-in { color: var(--nx-ok-text) !important; }
.nx-amount-out { color: var(--nx-bad) !important; }
.dark .nx-amount-out { color: #fca5a5 !important; }
.nx-tool-icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; border-radius: 8px; font-size: .75rem; font-weight: 700;
  color: color-mix(in oklab, var(--tool) 58%, black); background: color-mix(in oklab, var(--tool) 14%, var(--card)); border: 1px solid color-mix(in oklab, var(--tool) 28%, transparent); }
.dark .nx-tool-icon { color: color-mix(in oklab, var(--tool) 55%, white); background: color-mix(in oklab, var(--tool) 18%, var(--card)); }
.nx-tool-icon.nx-tool-icon-sm { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; border-radius: 6px; font-size: .625rem; }
.nx-tool-icon.nx-tool-icon-lg { width: 3.5rem; height: 3.5rem; flex-basis: 3.5rem; border-radius: 12px; font-size: 1.0625rem; }
/* a tool with an uploaded logo: the logo fills the tile on a white plate (brand icons are drawn for a light background). This form
   shows a broken image if the file fails to load; every panel / customer-area tile uses the laid-over form below (this one stays on
   nox.com's own public pages: the landing's example, /prices) */
.nx-tool-icon.nx-tool-icon-logo { overflow: hidden; background: #fff; border-color: var(--border); }
.nx-tool-icon.nx-tool-icon-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the same plate with the logo LAID OVER the initials (tasks 790 + 795; markup: the partial nx/tool-tile.blade.php,
   <span class="nx-tool-icon"><span>initials</span><img class="nx-tool-logo" … x-on:error="$el.remove()"></span>): a logo that fails
   to load removes itself and the initials tile is back, no broken-image icon, same size (as the nx-tool chips). The logo and the
   (hidden) initials share the tile's one grid cell: an absolutely placed logo left a light hairline inside the rounded corners in
   dark mode (task 795; drawn this way the tile is the pixels of the plain logo tile above) */
.nx-tool-icon:has(> .nx-tool-logo), .dark .nx-tool-icon:has(> .nx-tool-logo) { grid-template: 100% / 100%; overflow: hidden; background: #fff; border-color: var(--border); }
.nx-tool-icon:has(> .nx-tool-logo) > * { grid-area: 1 / 1; }
.nx-tool-icon:has(> .nx-tool-logo) > span { visibility: hidden; }
.nx-tool-icon > .nx-tool-logo { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
/* dashboard pending approvals: receipt link under the actions (M7) */
.nx-approval-proof { align-self: flex-start; display: inline-flex; align-items: center; gap: .3125rem; margin-inline-start: 3rem; font-size: .75rem; }
.nx-approval-proof i { font-size: .875rem; }
.nx-section-title { font-size: .9375rem; font-weight: 600; color: var(--mono); }
.nx-muted { color: var(--muted-foreground); }
/* inline text link (inside sentences, table sub-lines, x-html descriptions); also on <button> */
.nx-inline-link { color: var(--nx-link); font-weight: 500; background: none; border: 0; padding: 0; font-size: inherit; cursor: pointer; text-underline-offset: 3px; }
.nx-inline-link:hover { text-decoration: underline; }
.nx-inline-link:disabled { color: var(--muted-foreground); cursor: default; text-decoration: none; font-variant-numeric: tabular-nums; }
.nx-inline-link:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; border-radius: 3px; }
.nx-mono-link { font-family: var(--nx-mono); font-size: .75rem; color: var(--mono); text-underline-offset: 3px; }
.nx-mono-link:hover { color: var(--nx-link); text-decoration: underline; }
.nx-link-quiet { color: inherit; }
.nx-link-quiet:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.nx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nx-stack { display: grid; gap: 1.25rem; }
@media (min-width: 64rem) { .nx-stack { gap: 1.5rem; } }
.nx-split { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 80rem) { .nx-split { grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; } }
.nx-narrow { max-width: 46rem; }
.nx-channel { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border: 1px solid var(--nx-line-strong); border-radius: 10px; background: var(--card); color: var(--mono); font-size: .8125rem; font-weight: 500; }
.nx-channel:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--nx-line-strong)); }
.nx-channel > .ki-arrow-up-right { margin-inline-start: auto; color: var(--muted-foreground); }
.nx-channel small { display: block; font-family: var(--nx-mono); font-size: .6875rem; font-weight: 400; color: var(--secondary-foreground); overflow-wrap: anywhere; }
/* boxed + / = operator of the pricing model (base price + your markup = customer price) */
.nx-op { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-inline-end: .25rem; border: 1px solid var(--border); border-radius: 4px; background: var(--card); font: 600 .6875rem/1 var(--nx-mono); color: var(--secondary-foreground); }

/* ============ 15. auth + error layouts ============ */
.nx-auth { min-height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; gap: 1.5rem;
  background-image: radial-gradient(color-mix(in oklab, var(--foreground) 7%, transparent) 1px, transparent 1px); background-size: 18px 18px; }
.nx-auth-top { width: 100%; max-width: 64rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nx-brand { display: inline-flex; align-items: center; gap: .625rem; font-size: .9375rem; font-weight: 600; color: var(--mono); }
.nx-brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--mono); color: var(--background); font-size: .875rem; font-weight: 700; }
/* the panels' brand lockups (both panels since task 890, the brand from PlatformBrand; moved here from nox-admin.css): the sidebar's
   "[N] nox.com / Admin panel | Merchant panel", the phone header's "[N] nox.com …" and the smaller tile they use */
.nx-sb-brand { display: inline-flex; align-items: center; gap: .625rem; min-width: 0; color: var(--mono); }
.nx-sb-brand b { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.nx-sb-brand small { display: block; font-size: .6875rem; font-weight: 500; color: var(--muted-foreground); letter-spacing: .02em; }
.nx-brand-mark.nx-brand-mark-sm { width: 1.875rem; height: 1.875rem; border-radius: 8px; font-size: .8125rem; }
.nx-hbrand { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; color: var(--mono); }
.nx-auth-main { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.nx-auth-card { width: 100%; max-width: 400px; }
.nx-auth-card.nx-auth-card-wide { max-width: 460px; }
.nx-auth-card > .kt-card-content { padding: 2rem; display: flex; flex-direction: column; gap: 1.125rem; }
.nx-auth-foot { font-size: .75rem; color: var(--muted-foreground); text-align: center; }
@media (max-width: 39.98rem) { .nx-auth-card > .kt-card-content { padding: 1.5rem 1.25rem; } }
.nx-auth-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.nx-auth-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .375rem; }
.nx-auth-head > .nx-icon { margin-bottom: .375rem; }
.nx-auth-title { font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--mono); }
.nx-auth-title[tabindex="-1"]:focus { outline: none; }
.nx-auth-sub { font-size: .8125rem; line-height: 1.5; color: var(--secondary-foreground); text-wrap: balance; }
.nx-auth-sub b { font-weight: 600; color: var(--mono); overflow-wrap: anywhere; }
.nx-auth-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.nx-auth-labelrow .nx-inline-link { font-size: .8125rem; }
.nx-auth-check { font-size: .8125rem; font-weight: 400; color: var(--foreground); cursor: pointer; }
.nx-auth-submit { width: 100%; justify-content: center; height: 2.5rem; }
.nx-auth-alt { font-size: .8125rem; color: var(--secondary-foreground); text-align: center; }
.nx-auth-card > .kt-card-footer { justify-content: center; background: color-mix(in oklab, var(--muted) 35%, var(--card)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.nx-auth-card .kt-alert .kt-alert-actions { margin-top: .625rem; display: flex; gap: .5rem; }
.nx-auth-captcha { margin-top: -.25rem; font-size: .6875rem; line-height: 1.5; color: var(--muted-foreground); text-align: center; text-wrap: balance; }
.nx-auth-captcha i { font-size: .875rem; vertical-align: -.1875rem; margin-inline-end: .25rem; }
.nx-auth-captcha a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.nx-auth-captcha a:hover { color: var(--mono); text-decoration-color: currentColor; }
.nx-auth-view { display: flex; flex-direction: column; gap: 1.125rem; }
.nx-auth-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.nx-auth-actions > .kt-btn { flex: 1 1 9rem; justify-content: center; }
.nx-auth-back { display: inline-flex; align-items: center; gap: .375rem; }
.nx-auth-back i { font-size: .875rem; }
.nx-auth-fine { font-size: .75rem; line-height: 1.5; color: var(--muted-foreground); text-align: center; text-wrap: pretty; }
.nx-error-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 2rem 1rem; }
.dark .nx-error-code { color: var(--nx-link); }
.nx-error-code { font: 600 .75rem/1 var(--nx-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); padding: .375rem .625rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--primary) 26%, var(--border)); background: color-mix(in oklab, var(--primary) 6%, var(--card)); }
@media (max-width: 63.98rem) { .nx-user-btn > i { display: none; } .nx-user-btn { padding: 0 .25rem; } }
.nx-page-actions > .kt-btn.kt-btn-icon { flex: 0 0 auto; }


/* ============ 17. shell extras ============ */
/* Contact Support (live: partials.contact_support under every page): one compact, left-aligned row above the footer line */
.nx-support { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem; padding: .75rem 1rem; border: 1px solid var(--nx-line-strong); border-radius: 10px; background: var(--card); box-shadow: var(--nx-shadow); }
.nx-support-text { display: flex; flex-direction: column; gap: .0625rem; min-width: 0; flex: 1 1 18rem; }
.nx-support-text b { font-size: .8125rem; font-weight: 600; color: var(--mono); }
.nx-support-text span { font-size: .75rem; line-height: 1.45; color: var(--secondary-foreground); }
.nx-support-links { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 39.98rem) { .nx-support-links { width: 100%; } .nx-support-links > .kt-btn { flex: 1 1 0; justify-content: center; } }
/* bell: unread count (number + shape, not colour alone) */
.nx-bell-count { position: absolute; top: .125rem; inset-inline-end: .0625rem; min-width: 1rem; height: 1rem; padding: 0 .25rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--nx-bad); color: #fff; font: 600 .625rem/1 var(--nx-mono); box-shadow: 0 0 0 2px var(--background); }
/* announcements drawer (M8): ~420 px, full messages with their paragraphs, Read more, links to the notice */
#announcements_drawer { width: 420px; max-width: calc(100vw - 2.5rem); }   /* end-5 (20px) on the right, so 20px on the left too */
.nx-ann { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.nx-ann:first-of-type { border-top: 0; }
.nx-ann.is-unread { background: color-mix(in oklab, var(--primary) 4%, var(--popover)); }
.nx-ann.is-unread::before { content: ""; position: absolute; inset-block: .875rem; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.nx-ann-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; font-size: .75rem; color: var(--muted-foreground); }
.nx-ann-meta time { font-family: var(--nx-mono); }
.nx-ann-new { display: inline-flex; align-items: center; height: 1.125rem; padding: 0 .375rem; border-radius: 4px; font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-foreground); background: var(--primary); }
.nx-ann-title { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--mono); }
.nx-ann-title a:hover { color: var(--nx-link); text-decoration: underline; text-underline-offset: 3px; }
.nx-ann-body.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-ann-actions { display: flex; align-items: center; gap: 1rem; font-size: .8125rem; }
/* sidebar account block opens the account menu (L12) */
.nx-account-btn { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .625rem; min-width: 0; border-radius: 8px; border: 1px solid transparent; background: transparent; text-align: start; cursor: pointer; color: var(--foreground); }
.nx-account-btn:hover, [data-kt-dropdown-initialized].open > .nx-account-btn { background: var(--muted); }
.nx-account-btn:focus-visible, .nx-user-btn:focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent); outline-offset: 2px; }
.nx-account-btn > .ki-up-down, .nx-account-btn > i { margin-inline-start: auto; font-size: .75rem; color: var(--muted-foreground); }
.nx-menu-link[aria-checked] .kt-switch { pointer-events: none; }

/* ============ 18. runtime pieces (public/js/nox-ui.js) + shell safety ============ */
/* the content column may shrink below its content: one wide table then scrolls inside its own .kt-scrollable-x-auto box instead of
   widening the whole page on phones (the wrapper and its row are flex items, so their automatic minimum width was their widest descendant) */
.kt-wrapper, :has(> .kt-wrapper) { min-width: 0; }
/* toasts: a warning tone, an action link ("Sign in", "Reload") and long messages that wrap */
.nx-toast-warning i { color: var(--nx-warn-text); }
.nx-toast .nx-toast-msg { min-width: 0; overflow-wrap: anywhere; }
.nx-toast .nx-toast-action { flex-shrink: 0; white-space: nowrap; font-size: .8125rem; }
/* NX.confirm / NX.prompt / NX.alert and the ⌘K palette are our own dialogs (they stack above KTUI modals): a short entrance */
.nx-dialog.open > .kt-modal-content { animation: nx-pop .14s ease-out; }
.nx-backdrop { animation: nx-fade .14s ease-out; }
@keyframes nx-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes nx-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nx-dialog.open > .kt-modal-content, .nx-backdrop { animation: none; } }
.nx-dialog .kt-btn.is-busy { cursor: progress; }
/* field errors placed by NX.fieldErrors under any control */
.nx-error[hidden] { display: none; }
[aria-invalid="true"].kt-select { border-color: color-mix(in oklab, var(--destructive) 70%, var(--input)) !important; box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 12%, transparent) !important; }
/* [data-nx-copy] buttons confirm the copy for 1.6 s */
.kt-btn.is-copied { border-color: color-mix(in oklab, var(--nx-ok) 45%, var(--nx-line-strong)); }
.kt-btn.is-copied i { color: var(--nx-ok-text); }