@layer zcod-flat {
/* Flat changes paint only. Navigation retains the approved nav-calm/nav-groups styling. */
html[data-skin="flat"], html[data-skin="flat"] body:not(#_):not(#_) {
  --n-page: #f0f2f5 !important; --n-base: #ffffff !important; --n-raise: #ffffff !important; --n-well: #e9edf2 !important;
  --n-text: #18202c !important; --n-muted: #3d4858 !important; --n-faint: #505d6e !important; --n-hair: #768292 !important;
  --n-glass: #ffffff !important; --n-glass-solid: #ffffff !important; --n-glass-edge: #768292 !important;
  --n-glass-blur: none !important; --n-tone: #edf0f4 !important; --n-tone-line: #768292 !important;
  --g-gray-bg: #edf0f4 !important; --g-gray-bg-h: #e1e7ee !important; --g-gray-img: none !important; --g-pop-img: none !important;
  --btn-gray: #edf0f4 !important; --btn-gray-hover: #e1e7ee !important;
  --sh-xs: none !important; --sh-sm: none !important; --sh-sm-up: none !important; --sh-md: none !important; --sh-md-up: none !important;
  --sh-in: none !important; --sh-in-sm: none !important; --sh-btn: none !important; --sh-btn-up: none !important; --sh-btn-in: none !important; --sh-glass: none !important;
}
html[data-skin="flat"][data-theme="dark"], html[data-skin="flat"][data-theme="dark"] body:not(#_):not(#_) {
  --n-page: #10141b !important; --n-base: #1c232e !important; --n-raise: #252e3b !important; --n-well: #121821 !important;
  --n-text: #f5f7fb !important; --n-muted: #cbd4e2 !important; --n-faint: #aebbd0 !important; --n-hair: #8290a3 !important;
  --n-glass: #1c232e !important; --n-glass-solid: #1c232e !important; --n-glass-edge: #8290a3 !important;
  --n-tone: #252e3b !important; --n-tone-line: #8290a3 !important;
  --g-gray-bg: #252e3b !important; --g-gray-bg-h: #354256 !important; --btn-gray: #252e3b !important; --btn-gray-hover: #354256 !important;
}
html[data-skin="flat"]:not(#_):not(#_) { background: var(--n-page) !important; }
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::before, html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_)::after { background-image: none !important; }
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) :is(button,input,select,textarea,.notch,.detail-panel,.legal-panel,.auth-panel,.modal-card,.gate-card,.home-card,.app-card,.ac-card,.ac-panel,.native-panel,.native-context,.zl-card,.login-card,.pr-order,.pr-empty,.card,.tile,.panel):not(.nav-item):not(.nav-group-toggle):not(.module):not(.catalog-tab) {
  box-shadow: none !important; background-image: none !important; backdrop-filter: none !important;
  border-color: var(--n-hair) !important;
}
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) :is(.notch,.detail-panel,.legal-panel,.auth-panel,.modal-card,.gate-card,.home-card,.app-card,.ac-card,.ac-panel,.native-panel,.native-context,.zl-card,.login-card,.pr-order,.card,.tile,.panel) { background-color: var(--n-base) !important; }

html[data-skin="flat"] body :is(.pr-tabs button[aria-selected="true"],.ac-seg button.on,.ac-seg button[aria-pressed="true"],.native-login-modes button[aria-pressed="true"],.zc-seg button[aria-pressed="true"],.zl-seg button[aria-pressed="true"]) { background: var(--f-blue) !important; color: #fff !important; }
html[data-skin="flat"] body :is(.zl-hero,.zl-flow li,.zl-perks li) { background: var(--n-base) !important; box-shadow: none !important; background-image: none !important; }
html[data-skin="flat"] body :is(.zl-hero,.zl-copy,.zl-tag,.zl-sub,.zl-flow,.zl-perks,.zl-brand,.zl-back),html[data-skin="flat"] body :is(.zl-hero,.zl-brand) * { color: var(--n-text) !important; }

html[data-skin="flat"] body :is(.zl-hero,.zl-brand) * { -webkit-text-fill-color: currentColor !important; text-shadow: none !important; filter: none !important; }
html[data-skin="flat"] body .zl-flow b { color: #fff !important; }

/* Pair the selected foreground with its fill across every admin panel tab family. */
html[data-skin="flat"] body :is(.pipeline-step-tabs,.settings-section-tabs,.panel-tabs) [role="tab"][aria-selected="true"] { background: var(--f-blue) !important; color: #fff !important; }

/* ---- Pure flat (2026-10-16, user decision): no outlines, no shadows; areas differ only by tone ----
   page (lightest) -> surfaces/cards (white) -> wells: inputs, secondary buttons, table zebra (slightly darker).
   Line/shadow removal lives in the zcodUiCorrections block at the end of this file. */
html[data-skin="flat"], html[data-skin="flat"] body:not(#_):not(#_) {
  --n-page: #eef1f5 !important; --n-base: #ffffff !important; --n-raise: #ffffff !important; --n-well: #dfe5ec !important;
  --n-tone: #dfe5ec !important; --g-gray-bg: #dfe5ec !important; --g-gray-bg-h: #d2d9e2 !important;
  --btn-gray: #dfe5ec !important; --btn-gray-hover: #d2d9e2 !important;
  --n-hair: transparent !important; --n-tone-line: transparent !important; --n-glass-edge: transparent !important;
}
html[data-skin="flat"][data-theme="dark"], html[data-skin="flat"][data-theme="dark"] body:not(#_):not(#_) {
  --n-page: #0e1218 !important; --n-base: #1a212b !important; --n-raise: #1a212b !important; --n-well: #262f3c !important;
  --n-tone: #262f3c !important; --g-gray-bg: #262f3c !important; --g-gray-bg-h: #323d4d !important;
  --btn-gray: #262f3c !important; --btn-gray-hover: #323d4d !important;
  --n-hair: transparent !important; --n-tone-line: transparent !important; --n-glass-edge: transparent !important;
}
/* Inputs and selects: a filled well instead of an outline */
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  background-color: var(--n-well) !important;
}
/* Tables: alternate row tone instead of divider lines */
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) tbody tr:nth-child(even) > :is(td, th) {
  background-color: color-mix(in srgb, var(--n-well) 55%, transparent) !important;
}

}

/* Pure flat, line removal. zcodUiCorrections is the first-declared layer, so its !important control edges
   outrank every later layer; joining that layer with higher specificity lets flat win while neo stays untouched.
   Borders keep their width but turn transparent, so nothing moves when switching styles.
   Kept: the keyboard focus ring (outline on :focus-visible) and native checkbox/radio boxes. */
@layer zcodUiCorrections {
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) *:not(input[type="checkbox"]):not(input[type="radio"]) {
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) *:not(:focus-visible) { outline: none !important; }
/* Input rows drew focus with border + inner shadow; flat shows the same blue ring as other controls. */
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) :is(.zc-row, .zl-in):focus-within {
  outline: 2px solid var(--h-blue) !important;
  outline-offset: 2px !important;
}
/* Secondary buttons whose only edge was a line get the well tone, so they still read as buttons. */
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) :is(.ac-ghost, .ac-mini, .zl-links > button) { background-color: var(--n-well) !important; }
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) :is(.ac-ghost, .ac-mini, .zl-links > button):hover { background-color: var(--g-gray-bg-h) !important; }
/* Floating style/theme chips sit on the page itself: a white chip reads there; the well would vanish. */
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .skin-theme-fab:not(:hover) { background-color: var(--n-base) !important; }
/* Not-yet-available actions ("敬请期待"): one calm well tone with readable grey text, never brand colour + grey text. */
html[data-skin="flat"] body:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) :is(.cta, .solid-btn, .button, .biz-btn, .ac-btn, .uc-btn, .zc-primary, .zl-go, .app-corner-btn, .app-download-corner):is(:disabled, [aria-disabled="true"], .is-pending) {
  background: var(--n-well) !important;
  color: var(--n-faint) !important;
  opacity: 1 !important;
  filter: none !important;
}
}