/* Geologica files and metrics from the supplied cabinet prototype. */
@font-face {
  font-family:'Geologica';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(assets/fonts/geologica-cyrillic-ext.woff2) format('woff2');
  ascent-override:93%;
  descent-override:32%;
  line-gap-override:0%;
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family:'Geologica';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(assets/fonts/geologica-cyrillic.woff2) format('woff2');
  ascent-override:93%;
  descent-override:32%;
  line-gap-override:0%;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family:'Geologica';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(assets/fonts/geologica-latin-ext.woff2) format('woff2');
  ascent-override:93%;
  descent-override:32%;
  line-gap-override:0%;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:'Geologica';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(assets/fonts/geologica-latin.woff2) format('woff2');
  ascent-override:93%;
  descent-override:32%;
  line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The shared cabinet palette and layout from merchant-lk.html and admin-panel-strict.html. */
:root:has(#app:is([data-realm="merchant"], [data-realm="service"], [data-realm="cashier"], [data-realm="master"])) {
  --page: light-dark(#f6f6f8, #212125);
  --side-bg: light-dark(#f0f0f3, #1b1b1f);
  --surface: light-dark(#fdfdfe, #26262b);
  --subtle: light-dark(#efeff2, #2e2e34);
  --control: light-dark(#f2f2f5, #1e1e22);
  --line: light-dark(#e8e8ec, #303036);
  --line-strong: light-dark(#dedee3, #3a3a41);
  --ink: light-dark(#24242a, #e6e6eb);
  --title: light-dark(#1c1c22, #f1f1f4);
  --muted: light-dark(#7d7d87, #8a8a94);
  --ink-soft: light-dark(#50505a, #b0b0b9);
  --accent: light-dark(#5444ee, #5141ea);
  --accent-hi: light-dark(#6a5bec, #6858e6);
  --accent-ink: light-dark(#4336d2, #bdb6fa);
  --active: light-dark(#efedff, rgb(104 88 230 / 16%));
  --focus: light-dark(#1c1c22, #a9a6ff);
  --focus-ring: light-dark(rgb(110 107 240 / 14%), rgb(140 135 255 / 16%));
  --button: var(--accent);
  --button-ink: #fff;
  --error: light-dark(#d5333a, #f26b6f);
  --error-bg: light-dark(#fdecec, rgb(242 107 111 / 15%));
  --success: light-dark(#0b8a49, #3ccb82);
  --success-bg: light-dark(#e3f6ec, rgb(60 203 130 / 15%));
  --warning: light-dark(#b96f00, #f2a541);
  --warning-bg: light-dark(#fdf2e1, rgb(242 165 65 / 13%));
  --info: light-dark(#4460e0, #8ea2ff);
  --info-bg: light-dark(#e8ecfd, rgb(142 162 255 / 14%));
  --overlay: light-dark(rgb(15 15 25 / 45%), rgb(0 0 0 / 60%));
  --panel-shadow: 0 18px 50px -12px light-dark(rgb(16 24 40 / 28%), rgb(0 0 0 / 65%));
  font: 14px/1.5 Geologica, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
:where(.quiet, .primary, .theme, .field, .control-field) {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease,
    color .15s ease, filter .15s ease, transform .12s ease;
}
.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 0 0 1px color-mix(in srgb, var(--accent) 80%, #000),
    0 6px 20px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
:where(.primary):hover:not(:disabled) { filter: brightness(1.08); }
:where(.quiet, .primary, .theme):disabled { cursor: default; opacity: .5; }
:where(#app, dialog) button:not(:disabled):active { transform: scale(.985); }

.field, .control-field {
  border: 0; background: var(--control);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
:where(.field, .control-field):hover:not(:disabled, [readonly]) { box-shadow: inset 0 0 0 1px var(--muted); }
:where(.field, .control-field):is(:focus, :focus-within, [aria-expanded="true"]):not([readonly]) {
  outline: none; box-shadow: inset 0 0 0 1.5px var(--focus), 0 0 0 4px var(--focus-ring);
}
.field[aria-invalid="true"], .control-field:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--error); }
.field[aria-invalid="true"]:focus, .control-field:focus-within:has([aria-invalid="true"]) {
  box-shadow: inset 0 0 0 1.5px var(--error), 0 0 0 4px var(--error-bg);
}
.field[readonly] { background: var(--subtle); color: var(--ink-soft); }
.field:disabled { opacity: .55; cursor: default; }
.field::placeholder { color: var(--muted); }

@supports (appearance: base-select) {
  select.field:where(:not([multiple], [size])), select.field:where(:not([multiple], [size]))::picker(select) {
    appearance: base-select;
  }
  select.field:where(:not([multiple], [size])) {
    align-items: center; gap: 8px; min-width: 0; max-width: 100%; text-overflow: ellipsis;
  }
  select.field::picker-icon { color: var(--muted); flex: none; transition: rotate .15s ease; }
  select.field:open::picker-icon { rotate: 180deg; }
  select.field:open:not([aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--focus), 0 0 0 4px var(--focus-ring); }
  select.field::picker(select) {
    color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px;
    box-shadow: var(--panel-shadow); margin-block: 6px; padding: 6px; font: inherit; font-size: 14px;
    min-inline-size: min(200px, calc(100dvw - 20px)); max-inline-size: calc(100dvw - 20px);
    max-block-size: min(400px, 65dvh); overflow: auto; animation: cabinet-popover-in .16s ease-out;
  }
  select.field option { align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
  select.field option:is(:hover, :focus-visible, :checked) { background: var(--subtle); color: var(--title); }
  select.field option:disabled { opacity: .45; cursor: default; }
  select.field option::checkmark { order: 1; margin-inline-start: auto; color: var(--title); }
  @media (prefers-reduced-motion: reduce) {
    select.field::picker(select) { animation: none; }
    select.field::picker-icon { transition: none; }
  }
}
#app .surface { border-radius: 20px; }
#app h1 { font-size: 34px; line-height: 1.15; letter-spacing: -.03em; }
#app h2 { color: var(--title); font-weight: 560; }

.cabinet-preferences { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--control); }
#app .cabinet-preferences :is(.language, .theme-toggle) { min-height: 28px; height: 28px; padding: 0 8px; border: 0;
  display: inline-grid; place-items: center; line-height: 1; border-radius: 999px; color: var(--ink-soft); background: none; }
#app .cabinet-preferences .language { min-width: 34px; font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }
#app .cabinet-preferences .language[aria-pressed="true"] { color: var(--title); background: rgb(127 127 150 / 16%); }
#app .cabinet-preferences :is(.language, .theme-toggle):hover { color: var(--title); }
.preferences-separator { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
#app .theme-toggle { display: grid; place-items: center; width: 36px; padding: 0; }
#app .cabinet-preferences .theme-toggle { width: 28px; padding: 0; }
.theme-toggle span, .theme-toggle svg { display: block; }
.theme-toggle .theme-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .theme-toggle .theme-light { display: none; }
  :root[data-theme="system"] .theme-toggle .theme-dark { display: block; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

#app .shell { --sidebar-width: 260px; grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  transition: grid-template-columns .28s cubic-bezier(.2,.8,.2,1); }
#app .shell[data-cabinet="merchant"] { transition: grid-template-columns .22s cubic-bezier(.2,.7,.2,1); }
#app .sidebar { padding: 0 16px 16px; background: var(--side-bg); }
#app .side-brand { height: 76px; min-height: 76px; padding: 0 2px; margin-bottom: 10px; }
#app .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 560; color: var(--title); letter-spacing: -.01em; }
.brand-mark, #app .avatar { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; border-radius: 9px;
  flex: none; background: linear-gradient(140deg, #6e62f7, #3a2bd8); }
#app .collapse { display: grid; width: 30px; height: 30px; min-height: 30px; padding: 0; place-items: center;
  border: 1.5px solid var(--line-strong); border-radius: 8px; color: var(--muted); background: none; }
#app .collapse:hover { color: var(--ink); background: var(--subtle); }
#app .merchant-tenant { margin: 4px 0 10px; padding: 11px 12px; gap: 11px; border-radius: 16px;
  background: var(--control); box-shadow: inset 0 0 0 1px var(--line-strong); }
#app .merchant-tenant .avatar { width: 40px; height: 40px; border-radius: 50%; font-size: 15px; font-weight: 560; }
.merchant-tenant .nav-caption { min-width: 0; }
.merchant-tenant :is(strong, small) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchant-tenant strong { color: var(--title); font-size: 14.5px; font-weight: 500; letter-spacing: -.015em; }
.merchant-tenant small { margin-top: 1px; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.side-preferences { display: none; }
#app .nav-group { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 4px 0; }
#app .nav-group + .nav-group { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
#app .nav-heading { font-size: 13px; font-weight: 500; letter-spacing: .01em; text-transform: uppercase; padding: 0 0 6px; }
#app .nav-item { position: relative; gap: 12px; padding: 0 12px 0 13px; min-height: 40px;
  border-radius: 11px; color: var(--muted); font-size: 14.5px; transition: color .15s, background .15s; }
#app .nav-icon { display: grid; place-items: center; }
#app .sidebar .nav-item:hover { color: var(--ink); }
#app .sidebar .nav-item[aria-current="page"] { color: var(--title); font-weight: 500;
  background: linear-gradient(90deg, var(--subtle) 0%, var(--subtle) 38%, color-mix(in srgb, var(--accent-hi) 26%, var(--subtle)) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent); }
#app .sidebar .nav-item[aria-current="page"]::after { content: ""; position: absolute; right: 4px; top: 10px; bottom: 10px;
  width: 4px; border-radius: 4px; background: var(--accent-hi); box-shadow: 0 0 9px color-mix(in srgb, var(--accent-hi) 70%, transparent); }
#app .side-foot { border: 0; padding-top: 12px; }
.cabinet-rates { display: grid; gap: 10px; min-width: 0; padding: 12px 14px;
  border-radius: 16px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cabinet-rate { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cabinet-rate > :is(img, svg) { flex: none; display: block; }
.cabinet-rate-details { display: grid; min-width: 0; line-height: 1.25; }
.cabinet-rate-details strong, .cabinet-rate-compact { color: var(--title); font-size: 14.5px; font-weight: 560; font-variant-numeric: tabular-nums; }
.cabinet-rate-details > span { color: var(--muted); font-size: 11.5px; }
.cabinet-rate-details time { white-space: nowrap; }
.cabinet-rate-compact { display: none; }
:is(.refund-nav-count, .merchant-project-count, .staff-queue-count, .owner-filter-count, .service-count):where(:not([hidden])) {
  display: inline-grid; place-items: center; vertical-align: middle; flex: none; min-width: 20px; min-height: 20px;
  padding-inline: 6px; border-radius: 999px; font-size: 12px; font-weight: 560; line-height: 1; font-variant-numeric: tabular-nums;
}
.permission-mark { display: inline-grid; place-items: center; vertical-align: middle; flex: none; width: 24px; height: 24px;
  border-radius: 50%; background: var(--success-bg); color: var(--success); }
.nav-item :is(.refund-nav-count, .merchant-project-count) { margin-inline-start: auto; }
#app .sidebar .nav-item :is(.refund-nav-count, .merchant-project-count) { margin-inline-end: 6px; }
.refund-nav-count { background: var(--warning-bg); color: var(--warning); }
.merchant-project-count { color: var(--muted); }
#app .topbar { position: sticky; top: 0; z-index: 3; height: 68px; padding: 0 32px; gap: 12px;
  border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--page) 90%, transparent); backdrop-filter: blur(10px); }
#app .top-title { display: none; }
.top-spacer { flex: 1; }
.merchant-new-payment { display: inline-flex; align-items: center; gap: 8px; height: 40px; flex: none;
  border-radius: 12px; white-space: nowrap; }
#app .cabinet-search { display: inline-flex; align-items: center; gap: 9px; height: 38px;
  padding: 0 11px; min-width: 0; width: min(320px, 36vw); border-radius: 11px; color: var(--muted); text-align: start; }
.cabinet-search svg { flex: none; }
.cabinet-search input { min-width: 0; width: 100%; background: transparent; border: 0; color: var(--ink); }
.cabinet-search input:focus-visible { outline: none; }
.cabinet-search kbd { margin-left: auto; padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 4px; white-space: nowrap; }
.cabinet-profile { position: relative; }
#app .cabinet-profile summary.avatar { width: 36px; height: 36px; border-radius: 11px; cursor: pointer; }
.cabinet-profile summary::-webkit-details-marker { display: none; }
#app[data-realm="service"] .cabinet-profile summary { border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); background: linear-gradient(135deg, var(--subtle), var(--control)); font-size: 12px; font-weight: 560; }
.cabinet-profile-details { display: grid; gap: 3px; overflow-wrap: anywhere; }
.staff-search-entry { flex: 0 1 350px; min-width: 0; }
.staff-quick-search { position: relative; }
#app .staff-quick-search > .cabinet-search { width: 100%; }
.staff-quick-input { width: 100%; min-width: 0; outline: none; border: 0; background: transparent; color: var(--ink); }
.staff-quick-search .staff-quick-results { position: absolute; z-index: 9; inset: calc(100% + 7px) auto auto 0;
  width: min(440px, calc(100vw - 40px)); border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--surface); box-shadow: var(--panel-shadow); animation: cabinet-popover-in .16s ease-out; }
.staff-quick-results { padding: 6px; max-height: min(400px, 52vh); overflow: auto; overscroll-behavior: contain; }
.staff-quick-group { padding: 8px 10px 4px; color: var(--muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .035em; }
.staff-quick-item { display: flex; align-items: center; width: 100%; gap: 10px; min-height: 36px; padding: 7px 10px;
  border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--ink); }
.staff-quick-item:is(:hover, [data-selected="true"]) { background: var(--subtle); }
.staff-quick-item > svg { flex: none; color: var(--muted); }
.staff-quick-name, .staff-quick-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-quick-detail { font-size: 12px; }
.staff-quick-amount { margin-inline-start: auto; flex: none; font-variant-numeric: tabular-nums; }
.staff-quick-empty { padding: 18px 12px; text-align: center; }
.search-initials { display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--control); color: var(--muted); font-size: 10.5px; }
#app .staff-search-launch { display: none; }
.staff-quick-dialog { position: fixed; inset: 14vh 0 auto; width: min(560px, calc(100% - 32px)); margin: 0 auto;
  padding: 0; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink);
  box-shadow: var(--panel-shadow); animation: cabinet-popover-in .18s ease-out; }
.staff-quick-dialog::backdrop { background: var(--overlay); }
.staff-quick-dialog > .staff-quick-input { height: 54px; padding: 0 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.staff-quick-dialog > .staff-quick-input:focus-visible { outline: none; }
.staff-quick-dialog > .staff-quick-results { max-height: 52vh; }
.cabinet-profile-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 220px; padding: 12px;
  display: grid; gap: 8px; box-shadow: var(--panel-shadow); }
.cabinet-profile-menu button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.sidebar-profile-trigger { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 16px; cursor: pointer; }
.sidebar-profile-trigger .avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; }
.sidebar-profile-trigger > svg { flex: none; color: var(--muted); }
.sidebar-profile-label { display: grid; flex: 1; min-width: 0; }
.sidebar-profile-label > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile-label > span { font-size: 12.5px; }
.sidebar-profile .cabinet-profile-menu { inset: auto auto calc(100% + 8px) 0; z-index: 2; width: min(220px, calc(var(--sidebar-width) - 32px)); }
#app .content, #app .content.operations { max-width: none; padding: 24px 32px 110px; }
#app .shell[data-cabinet="merchant"] { --cabinet-content-width: 1320px; --cabinet-operations-width: 1520px; }
#app .shell[data-cabinet="merchant"] :is(.topbar, .content) { padding-inline: max(28px, calc((100% - var(--cabinet-content-width)) / 2)); }
@media (min-width: 901px) {
  #app .shell[data-cabinet="merchant"] :is(.topbar.wide, .content.operations) {
    padding-inline: max(20px, calc((100% - var(--cabinet-operations-width)) / 2)); }
}
@media (min-width: 2200px) {
  #app .shell[data-cabinet="merchant"] { --cabinet-content-width: 1640px; --cabinet-operations-width: 1980px; }
}

#app .login { min-height: 100dvh; display: grid; grid-template-rows: 1fr; place-items: center; padding: 72px 16px 56px; }
#app .login-chrome { position: absolute; inset: 18px 24px auto; justify-content: flex-end; padding: 0; border: 0; background: none; }
#app .login-stack { display: grid; justify-items: center; gap: 18px; width: min(100%, 420px); }
#app .login-brand .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
#app .login-foot { position: absolute; inset: auto 0 16px; }
#app .auth-card { width: 100%; border-radius: 20px; margin: 0; padding: 30px 28px 28px;
  box-shadow: 0 22px 56px -28px light-dark(rgb(30 30 40 / 18%), rgb(0 0 0 / 60%)); }
#app:is([data-realm="merchant"], [data-realm="service"]) .login { padding-block: 64px; }
#app:is([data-realm="merchant"], [data-realm="service"]) .auth-card {
  font-size: 16px; box-shadow: inset 0 0 0 1px var(--line), 0 22px 56px -28px light-dark(rgb(30 30 40 / 18%), rgb(0 0 0 / 60%)); }
#app[data-realm="merchant"] .auth-card { border: 0; }
#app[data-realm="merchant"] .auth-card .auth-subtitle { font-size: 15px; }
#app:is([data-realm="merchant"], [data-realm="service"]) .credential-form .form-row { font-size: 13.5px; font-weight: 400; gap: 7px; }
#app[data-realm="merchant"] .auth-card .field { font-size: 15px; }
#app[data-realm="merchant"] .auth-card .primary { border-radius: 11px; }
#app[data-realm="service"] .auth-card .field { font-size: 14.5px; background: light-dark(#fdfdfe, #2e2e34); }
#app[data-realm="service"] .auth-card .primary { border-radius: 13px; font-size: 15px; min-height: 48px; }
#app[data-realm="service"] .auth-card h1 { font-size: 24px; font-weight: 560; line-height: 1.25; letter-spacing: -.01em; }
@media (max-width: 520px) {
  #app:is([data-realm="merchant"], [data-realm="service"]) .login { padding: 64px 12px 48px; }
  #app[data-realm="merchant"] .auth-card h1 { font-size: 23px; }
  #app[data-realm="merchant"] .auth-card .auth-subtitle { font-size: 14.5px; }
  #app[data-realm="service"] .auth-card h1 { font-size: 22px; }
}
#app .auth-card h1 { font-size: 26px; font-weight: 650; letter-spacing: -.025em; }
#app .auth-card :is(.field, .primary) { min-height: 52px; font-size: 16px; }
#app[data-realm="service"] .auth-card .field { min-height: 46px; }
.auth-password { position: relative; }
#app .auth-password input { padding-right: 44px; }
#app .auth-password-toggle { position: absolute; right: 5px; top: 50%; translate: 0 -50%; min-height: 32px;
  display: grid; place-items: center; width: 34px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
#app .auth-password-toggle:hover { color: var(--ink); }
#app .auth-card #auth-code { text-align: center; font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: .35em; }
#app .auth-field-error { color: var(--error); font-size: 12.5px; }
#app .auth-subtitle { margin-top: -6px; }
#app .auth-link { padding: 0; border: 0; min-height: 0; color: var(--accent-ink); background: none; cursor: pointer; }
#app .auth-link:hover { text-decoration: underline; }
#app .auth-forgot { justify-self: end; margin-top: -5px; font-size: 13px; }
#app .auth-factor-help { justify-self: center; text-align: center; font-size: 13px; }
#app .auth-complete { display: grid; gap: 16px; text-align: center; }
#app .auth-complete .auth-subtitle { margin-bottom: 8px; }
#app .auth-status-icon { display: grid; place-items: center; justify-self: center; width: 64px; height: 64px;
  border-radius: 50%; background: var(--success-bg); color: var(--success); }
#app .auth-status-icon.muted { background: var(--control); color: var(--muted); }
#app .auth-mail-link { display: grid; place-items: center; text-decoration: none; }
#app .auth-requirements { display: grid; gap: 6px; margin: 0; padding: 13px 14px; background: var(--control);
  border: 1px solid var(--line); border-radius: 12px; list-style: none; }
#app .auth-requirements li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
#app .auth-requirements li[data-met="true"] { color: var(--success); }
#app .auth-factor-setup { gap: 10px; text-align: center; }
#app .auth-factor-setup > p { font-size: 13px; }
#app .auth-setup-key { width: 100%; text-align: start; }
#app .auth-setup-key > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#app .auth-setup-key > span { font-family: Geologica, system-ui, sans-serif; font-size: 12px; }
#app .auth-key-copy { display: grid; place-items: center; min-height: 30px; padding: 5px; }
#app .auth-key-status:empty { display: none; }
#app .auth-qr-loading { width: 176px; height: 176px; background: var(--control); }
#app .auth-back { display: inline-flex; align-items: center; justify-self: start; gap: 6px; min-height: 0;
  padding: 0; border: 0; background: none; color: var(--accent-ink); }
#app :is(.auth-card, .operation-page, .owner-overview) { animation: cabinet-enter .3s cubic-bezier(.2,.7,.2,1); }
@keyframes cabinet-enter { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  #app :is(.auth-qr-loading, .auth-card .credential-form[aria-busy="true"] .primary) { position: relative; }
  #app :is(.auth-qr-loading, .auth-card .credential-form[aria-busy="true"] .primary)::after { content: ""; position: absolute;
    top: 50%; inset-inline-end: 12px; width: 15px; height: 15px; margin-top: -8px; border: 2px solid currentColor;
    border-inline-end-color: transparent; border-radius: 50%; animation: auth-spin .65s linear infinite; }
  #app .auth-qr-loading::after { inset-inline-end: calc(50% - 10px); width: 20px; height: 20px; color: var(--accent-ink); }
  @keyframes auth-spin { to { transform: rotate(360deg); } }
}

@media (min-width: 1101px) {
  .shell[data-mini="true"] .sidebar-profile-trigger { justify-content: center; padding: 4px 0; background: none; box-shadow: none; }
  .shell[data-mini="true"] .sidebar-profile-trigger > :is(.sidebar-profile-label, svg) { display: none; }
  #app .shell[data-mini="true"] .sidebar:has(.sidebar-profile[open]) { overflow: visible; z-index: 3; }
  .shell[data-mini="true"] .sidebar-profile .cabinet-profile-menu { inset: auto auto 0 calc(100% + 10px); width: 220px; }
  #app .shell[data-mini="true"] { --sidebar-width: 76px; }
  #app .sidebar { min-width: 0; overflow: hidden; }
  #app .shell[data-mini="true"] .sidebar { padding-inline: 12px; }
  #app .shell[data-mini="true"] .sidebar .nav-item { justify-content: center; padding: 0; }
  #app .shell[data-mini="true"] .merchant-tenant { height: 52px; padding: 0; justify-content: center; background: none; box-shadow: none; }
  .shell[data-mini="true"] .cabinet-rates { justify-items: center; padding: 8px 0; background: none; box-shadow: none; }
  .shell[data-mini="true"] .cabinet-rate { flex-direction: column; gap: 5px; }
  .shell[data-mini="true"] .cabinet-rate > :is(img, svg) { width: 24px; height: 24px; }
  .shell[data-mini="true"] .cabinet-rate-details { display: none; }
  .shell[data-mini="true"] .cabinet-rate-compact { display: block; width: 100%; font-size: 11.5px; line-height: 1;
    overflow: hidden; text-overflow: ellipsis; text-align: center; }
  #app .shell[data-mini="true"] .sidebar .merchant-project-count { display: none; }
  #app .shell[data-mini="true"] .sidebar .refund-nav-count:not([hidden]) { inset-inline-end: 6px; margin: 0; }
  #app .shell[data-mini="true"] .sidebar .nav-group + .nav-group { margin-top: 0; padding-top: 4px; }
  #app .shell[data-mini="true"] .side-brand { position: relative; justify-content: center; }
  .shell[data-mini="true"] .side-brand .brand { transition: opacity .15s ease; }
  .shell[data-mini="true"] .side-brand .brand-label { display: none; }
  .shell[data-mini="true"] .side-brand .merchant-brand { width: 30px; }
  .shell[data-mini="true"] .side-brand .merchant-brand img { width: 194px; height: 30px; }
  #app .shell[data-mini="true"] .collapse { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
    opacity: 0; pointer-events: none; transition: opacity .15s ease, background-color .15s ease; }
  #app .shell[data-cabinet="merchant"][data-mini="true"] .collapse { width: 40px; min-height: 40px; border-radius: 11px; }
  .shell[data-mini="true"] .collapse svg { transform: scaleX(-1); }
  #app .shell[data-mini="true"] :is(.sidebar:hover .collapse, .collapse:focus-visible) { opacity: 1; pointer-events: auto; }
  .shell[data-mini="true"] .sidebar:is(:hover, :has(.collapse:focus-visible)) .side-brand .brand { opacity: 0; }
  @media (hover: none) {
    #app .shell[data-mini="true"] .collapse { opacity: 1; pointer-events: auto; }
    .shell[data-mini="true"] .side-brand .brand { opacity: 0; }
  }
}
@media (max-width: 1100px) {
  #app .shell, #app .shell[data-mini="true"] { display: block; }
  #app .sidebar { position: fixed; z-index: 8; inset: 0 auto 0 0; width: min(300px, 86vw);
    visibility: hidden; transform: translateX(-105%); transition: transform .25s cubic-bezier(.2,.7,.2,1), visibility .25s; }
  #app[data-realm="service"] .sidebar { width: min(280px, 86vw);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s; }
  #app .shell[data-drawer="true"] .sidebar { visibility: visible; transform: none; box-shadow: var(--panel-shadow); }
  #app .shell .scrim { display: block; position: fixed; inset: 0; z-index: 7; border: 0; background: var(--overlay);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
  #app .shell[data-drawer="true"] .scrim { opacity: 1; visibility: visible; }
  #app .collapse { display: none; }
  #app .burger { display: inline-grid; place-items: center; padding: 0; width: 36px; }
  #app .topbar { background: color-mix(in srgb, var(--side-bg) 92%, transparent); }
  #app .top-title { display: block; flex: 0 1 auto; font-size: 14px; }
  #app .shell[data-mini="true"] .sidebar :is(.nav-heading,.nav-caption) { display: revert; }
}
@media (max-width: 900px) {
  #app .topbar .service-bell { position: static; }
  #app .topbar .service-bell .operation-popover { position: absolute; inset: calc(100% + 7px) 12px auto 12px; width: auto; max-width: 365px; margin-inline-start: auto; }
  #app :is(.content, .content.operations, .shell[data-cabinet="merchant"] .content) { padding: 16px 16px calc(105px + env(safe-area-inset-bottom)); }
  #app :is(.topbar, .shell[data-cabinet="merchant"] .topbar) { height: 60px; padding: 0 12px; gap: 8px; border-bottom-color: var(--line); }
  #app .topbar .top-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app .topbar .cabinet-search { order: 2; width: 36px; flex: none; display: grid; place-items: center; padding: 0; }
  #app .topbar .cabinet-search :is(span,kbd,input) { display: none; }
  #app .topbar :is(.cabinet-preferences, .merchant-new-payment) { display: none; }
  .side-preferences { display: block; }
  .side-preferences .cabinet-preferences { padding: 3px; }
  #app .side-preferences :is(.language, .theme-toggle) { min-height: 26px; height: 26px; }
  #app .side-preferences .language { min-width: 30px; padding: 0 7px; }
  #app .side-preferences .theme-toggle { width: 26px; }
  #app .topbar form.cabinet-search { display: none; }
  .staff-search-entry { order: 2; flex: none; }
  .staff-quick-search { display: none; }
  #app .staff-search-launch { display: grid; place-items: center; width: 36px; padding: 0; }
  #app[data-realm="service"] .topbar .theme-toggle { width: 34px; }
  #app h1 { font-size: 26px; }
  #app .mobile-nav { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  #app .mobile-nav .nav-item { flex: 1; padding: 4px 0; min-height: 46px; gap: 3px; font-size: 11px; border-radius: 12px; }
  #app .mobile-nav .nav-item[aria-current="page"] { color: var(--accent-ink); background: none; font-weight: 500; }
  #app .shell[data-cabinet="merchant"] .mobile-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; }
  #app .mobile-nav .merchant-new-payment-mobile { display: grid; place-items: center; width: 46px; height: 46px;
    justify-self: center; padding: 0; border-radius: 15px; }
  #app .mobile-nav .refund-nav-count:not([hidden]) { inset-inline-start: calc(50% + 6px); }
}
@media (min-width: 1101px), (max-width: 900px) {
  #app :is(.shell[data-mini="true"] .sidebar, .mobile-nav) .refund-nav-count:not([hidden]) {
    position: absolute; top: 4px; min-width: 17px; min-height: 17px; padding-inline: 4px; font-size: 10.5px;
  }
}
@media (max-width: 480px) {
  #app .login-chrome { inset-inline: 14px; }
  #app .auth-card { padding: 26px 20px 22px; }
  #app .auth-card h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#app, dialog), :is(#app, dialog) *, :is(#app, dialog) *::before, :is(#app, dialog) *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}



/* Payments and transactions use the prototype's page header, toolbar and row hierarchy. */
.operation-results { min-width: 0; }
#app .operation-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
#app .operation-heading h1 { margin: 0; }
#app .operation-heading p { margin-top: 4px; font-size: 14.5px; }
.operation-crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; margin-bottom: -8px; }
.operation-crumbs a { color: inherit; text-decoration: none; }
.operation-crumbs a:hover { color: var(--ink); }
.operation-actions, .operation-toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.operation-toolbar-right { margin-inline-start: auto; }
#app .operation-chip:not(.primary), #app .operation-heading .quiet { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 12px; border-radius: 11px; font-size: 13.5px; }
.operation-actions .primary, .primary.operation-chip { display: inline-flex; align-items: center; gap: 8px; }
.operation-back { color: var(--ink); text-decoration: none; }
#app .staff-crumbs .operation-back { min-height: 32px; }
.operation-panel { min-width: 0; }
.operation-panel :is(.operation-results, .owner-results) { border-radius: inherit; }
.operation-panel :is(.operation-table-wrap, .operation-mobile, .operation-totals, .operation-pager, .operation-empty):last-child,
.operation-panel .operation-table-wrap:has(+ .operation-mobile:last-child) {
  border-end-start-radius: inherit; border-end-end-radius: inherit;
}
.operation-mobile-row:last-child { border-end-start-radius: inherit; border-end-end-radius: inherit; }
.operation-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line); }
.owner-operations .operation-toolbar-right { flex: 1 1 350px; justify-content: flex-end; }
.owner-operations .operation-toolbar-right .operation-search { flex-basis: 270px; }
.owner-operations .operation-table-wrap { container-type: inline-size; }
#app .owner-operations .operation-table td { padding-block: 12px; }
@container (max-width: 1240px) {
  .merchant-adaptive-table [data-column="rate"] { display: none; }
}
@container (max-width: 1060px) {
  .merchant-adaptive-table :is([data-column="source"], [data-column="fee"]) { display: none; }
}
@container (max-width: 820px) {
  .merchant-adaptive-table :is([data-column="site"], [data-column="payer"], [data-column="net"]) { display: none; }
}
#app .operation-toolbar select { width: auto; min-height: 38px; padding: 0 11px 0 12px; border-radius: 11px; font-size: 13.5px; font-weight: 500; }
.operation-search { display: inline-flex; flex: 0 1 340px; align-items: center; gap: 8px; height: 38px; min-width: 180px;
  border-radius: 11px; padding: 0 12px; color: var(--muted); }
.operation-search svg { flex: none; }
#app .operation-search input { flex: 1; min-width: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#app .operation-search input:focus-visible { outline: none; }
.operation-menu { position: relative; min-width: 0; }
.operation-menu summary { cursor: pointer; list-style: none; }
.operation-menu summary::-webkit-details-marker { display: none; }
#app .operation-menu[open] > summary { color: var(--accent-ink); background: var(--active); }
.operation-popover { position: absolute; z-index: 4; top: calc(100% + 7px); left: 0; width: min(300px, calc(100vw - 40px));
  padding: 12px; display: grid; gap: 8px; max-height: min(400px, 60vh); overflow: auto; box-shadow: var(--panel-shadow);
  animation: cabinet-popover-in .16s ease-out; }
@keyframes cabinet-popover-in { from { opacity: 0; transform: translateY(-4px); } }
.operation-actions .operation-popover, .operation-columns .operation-popover { left: auto; right: 0; }
.operation-popover .field { width: 100%; min-width: 0; }
.operation-popover .check-row { padding: 5px 3px; cursor: pointer; }
.operation-popover input[type="checkbox"] { accent-color: var(--accent); }
.payment-filter-control { position: relative; }
#app .payment-filter-control:has(.payment-filter-clear) summary { padding-inline-end: 34px; color: var(--accent-ink); border-color: var(--accent-hi); }
.payment-filter-value { max-width: 106px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .payment-filter-clear { position: absolute; inset: 5px 5px auto auto; display: grid; place-items: center;
  min-height: 28px; width: 26px; padding: 0; border: 0; color: var(--muted); }
.payment-filter-items { max-height: 250px; overflow: auto; }
.payment-filter-items .check-row { align-items: flex-start; }
.payment-filter-actions { display: flex; justify-content: space-between; gap: 8px; }
.staff-payment-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.staff-payment-filter-group .payment-filter-control:nth-child(n+5) .operation-popover { left: auto; right: 0; }
#app .payment-filters-reset { padding-inline: 6px; border-color: transparent; background: transparent; color: var(--muted); }
.operation-amount-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.operation-period { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.operation-segment { display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; min-width: 0;
  overflow-x: auto; scrollbar-width: none; border-radius: 12px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line-strong); }
.operation-segment > button { flex: none; white-space: nowrap; }
#app .operation-segment > .quiet { min-height: 34px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 500; }
#app .operation-segment > .quiet:hover:not(:disabled) { color: var(--ink); }
#app .operation-segment > .quiet[aria-pressed="true"] {
  color: var(--title); background: var(--subtle); box-shadow: inset 0 0 0 1px var(--line-strong);
}
#app .operation-panel .owner-results { display: block; }
.operation-table-wrap { width: 100%; overflow-x: auto; }
#app .operation-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.operation-table :is(th, td) { text-align: start; }
#app .operation-table th { padding: 12px; font-size: 12.5px; font-weight: 500; color: var(--muted);
  background: transparent; border-bottom: 1px solid var(--line); white-space: nowrap; }
#app .operation-table td { padding: 13px 12px; border-bottom: 0; border-top: 1px solid var(--line); vertical-align: middle; }
#app .operation-table tbody tr:first-child td { border-top: 0; }
#app .operation-table :is(th, td):first-child { padding-left: 20px; }
#app .operation-table :is(th, td):last-child { padding-right: 20px; }
#app .operation-table .operation-num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
#app .operation-table td.operation-num { font-weight: 560; }
#app .operation-table td:is([data-column="description"],[data-column="site"],[data-column="payer"]) {
  min-width: 140px; max-width: 260px; overflow-wrap: anywhere;
}
.operation-row { cursor: pointer; transition: background-color .12s ease; }
.operation-row .operation-link, button.operation-mobile-row { user-select: text; }
.operation-row:hover, .operation-row:focus-within { background: var(--subtle); }
.operation-link { padding: 0; border: 0; background: none; text-align: start; color: inherit; cursor: pointer; }
.operation-link:hover { color: var(--accent-ink); }
.operation-sub { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 1px; }
.operation-date { display: block; color: var(--muted); white-space: nowrap; }
.operation-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: -.01em; }
.payment-pill { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; min-height: 24px; padding: 2px 9px 2px 8px;
  border-radius: 999px; background: var(--subtle); color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.payment-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.payment-pill[data-status="paid"] { color: var(--success); background: var(--success-bg); }
.payment-pill[data-status="pending"] { color: var(--warning); background: var(--warning-bg); }
.payment-pill[data-status="failed"] { color: var(--error); background: var(--error-bg); }
.payment-pill[data-status="dispute"] { color: var(--warning); background: var(--warning-bg); }
.payment-pill[data-status="chargeback"] { color: var(--error); background: var(--error-bg); }
.dispute-due { color: var(--error); font-weight: 550; }
.dispute-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.payment-pill:is([data-status="partially_refunded"],[data-status="refunded"]) { color: var(--info); background: var(--info-bg); }
.operation-empty { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 156px; padding: 22px;
  text-align: center; color: var(--muted); }
.operation-empty strong { color: var(--title); }
.operation-mobile { display: none; }
.operation-mobile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 13px 15px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: start; }
.operation-mobile-row:last-child { border-bottom: 0; }
.operation-mobile-main, .operation-mobile-value { display: grid; gap: 4px; min-width: 0; }
.operation-mobile-main { overflow-wrap: anywhere; }
.operation-mobile-value { justify-items: end; white-space: nowrap; }
.operation-mobile-row strong { font-weight: 560; }
.operation-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.operation-pager-buttons { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
#app .operation-arrow { display: grid; place-items: center; width: 34px; min-height: 34px; padding: 0; }
#app .operation-arrow:disabled { opacity: .42; cursor: default; }
#app .operation-pager .owner-page-size { width: 62px; min-height: 34px; padding: 3px 6px; }
.operation-kpis { gap: 16px; }
.developer-guide { display: grid; gap: 16px; min-width: 0; }
.developer-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.developer-guide-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.developer-guide-section { display: grid; gap: 6px; min-width: 0; }
#app .developer-guide h2, #app .developer-guide h3, #app .developer-guide p, #app .developer-guide pre { margin: 0; }
#app .developer-guide h3 { font-size: 14px; font-weight: 600; }
#app .developer-guide .developer-code { background: light-dark(#171829, #14151d); color: #e7e9f3; padding: 14px;
  font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-wrap: normal; }
.developer-guide-statuses { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.developer-guide-statuses .developer-status { padding: 8px 12px; }
#app .api-reference-host { padding: 0; background: none; border: 0; }
.api-reference, .api-reference-content { display: grid; gap: 18px; min-width: 0; }
.api-reference-back { display: inline-flex; align-items: center; gap: 8px; justify-self: start; color: var(--accent-ink); }
.api-reference-back:hover { text-decoration: underline; }
.api-reference-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding: clamp(17px, 3vw, 28px); background: linear-gradient(115deg, var(--active), transparent 70%), var(--surface); }
#app .api-reference :is(h1,h2,h4,p,pre,dl,dd) { margin: 0; }
#app .api-reference-hero h1 { font-size: clamp(22px, 2.5vw, 34px); color: var(--title); line-height: 1.2; }
#app .api-reference-hero p { margin-top: 7px; color: var(--ink-soft); }
.api-reference-format { padding-left: 8px; border-left: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.api-reference-layout { display: grid; grid-template-columns: minmax(150px, 185px) minmax(0, 1fr); align-items: start; gap: 18px; }
.api-reference-toc { min-width: 0; position: sticky; top: 83px; padding: 13px; }
.api-reference-toc summary, .api-reference-fields-more summary { display: flex; align-items: center; gap: 8px;
  justify-content: space-between; cursor: pointer; font-weight: 600; color: var(--title); }
.api-reference-toc summary::-webkit-details-marker { display: none; }
.api-reference-toc[open] summary svg { rotate: 180deg; }
.api-reference-links { display: grid; gap: 3px; margin-top: 9px; }
#app .api-reference-links p { color: var(--ink-soft); font-size: 11px; font-weight: 600; padding: 7px 6px 2px; }
.api-reference-links a { display: flex; align-items: start; gap: 6px; padding: 6px; border-radius: 6px;
  font-size: 12px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.api-reference-links a:hover { background: var(--subtle); }
.api-reference-links a[aria-current="location"] { color: var(--accent-ink); background: var(--active); }
.api-reference-section { display: grid; gap: 12px; padding: clamp(16px, 2vw, 25px); min-width: 0; scroll-margin-top: 84px; }
.api-reference-section > p { color: var(--ink-soft); overflow-wrap: anywhere; }
#app .api-reference-section h2 { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.25; color: var(--title); }
.api-reference-route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0;
  padding: 8px 10px; background: var(--control); border: 1px solid var(--line); border-radius: 9px; }
.api-reference-method { padding: 3px 6px; line-height: 1.15; border-radius: 5px; font: 700 11px/1.15 ui-monospace, monospace;
  color: var(--info); background: var(--info-bg); }
.api-reference-method[data-method="post"] { color: var(--success); background: var(--success-bg); }
.api-reference-route code { overflow-wrap: anywhere; color: var(--title); }
.api-reference-endpoint { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.api-reference-samples { display: grid; gap: 7px; min-width: 0; color: var(--ink-soft); font-size: 12px; }
.api-reference-samples a { color: var(--accent-ink); }
.api-reference-details { display: grid; gap: 15px; min-width: 0; }
.api-reference-fields, .api-reference-errors { display: grid; gap: 6px; min-width: 0; }
.api-reference-fields :is(dt,dd), .api-reference-errors :is(dt,dd) { overflow-wrap: anywhere; min-width: 0; }
.api-reference-fields dl > div, .api-reference-errors dl > div { border-top: 1px solid var(--line); padding: 7px 0; }
.api-reference-fields dt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px; color: var(--title); }
.api-reference-fields dd, .api-reference-errors dd { display: grid; gap: 3px; color: var(--ink-soft); font-size: 12px; }
.api-reference-type { color: var(--accent-ink); font: 12px/1.5 ui-monospace, monospace; }
.api-reference-required { font-size: 10px; color: var(--ink-soft); }
.api-reference-fields-more { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.api-reference-fields-more summary { display: list-item; font-size: 12px; }
.api-reference-fields-more[open] > :not(summary) { margin-top: 9px; }
.api-reference-errors dl > div { display: grid; grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr); gap: 7px; }
.api-reference-errors dt { color: var(--error); font: 650 12px/1.5 ui-monospace, monospace; }
.api-reference-error-codes { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.api-reference-error-codes code { color: var(--title); }
.api-reference-examples { min-width: 0; position: relative; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--control); color: var(--ink); }
.api-reference-example-tabs { display: flex; gap: 3px; flex-wrap: wrap; padding: 6px 8px 0; border-bottom: 1px solid var(--line-strong); }
#app .api-reference-example-tab { padding: 7px 9px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--ink-soft); font-size: 12px; }
#app .api-reference-example-tab:hover { background: var(--subtle); }
#app .api-reference-example-tab[aria-pressed="true"] { color: var(--accent-ink); border-bottom-color: var(--accent-hi); }
.api-reference-code-bar { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 6px 8px;
  border-bottom: 1px solid var(--line); }
.api-reference-code-label { flex: 1; min-width: 0; padding-inline-start: 4px; color: var(--ink-soft); font-size: 12px; }
.api-reference-format-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
#app .api-reference-format-tabs .api-reference-example-tab { padding: 4px 5px; }
#app .api-reference-code-label .field { width: min(100%, 270px); min-width: 0; min-height: 31px; padding: 4px 22px 4px 8px; font-size: 12px; }
#app .api-reference-copy { min-height: 31px; padding: 4px 7px; white-space: nowrap; font-size: 11px; }
#app .api-reference-code-content pre { min-width: 0; max-height: 34rem; overflow: auto; overscroll-behavior-inline: contain;
  padding: 12px; font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.api-reference-token { color: light-dark(#17613e, #9bdfb7); }
.api-reference-signing, .api-reference-signing-example { display: grid; gap: 8px; min-width: 0; }
.api-reference-signing > p, .api-reference-signing-example > p { color: var(--ink-soft); overflow-wrap: anywhere; }
.api-reference-signing-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: start; gap: 14px; }
.api-reference-signing-result { display: grid; gap: 3px; font-size: 12px; }
.api-reference-signing-result code:last-child { color: var(--accent-ink); }
.api-reference-copy-feedback:not(:empty) { display: block; padding: 0 12px 8px; color: var(--accent-ink); font-size: 11px; }
@media (min-width: 1051px) {
  .api-reference-samples { position: sticky; top: 84px; }
}
@media (max-width: 1050px) {
  .api-reference-layout, .api-reference-endpoint { grid-template-columns: minmax(0, 1fr); }
  .api-reference-toc { position: static; }
  .api-reference-samples { grid-row: 1; }
}
.api-reference-host:has(.operation-empty) { min-height: 12rem; }
.developer-tabs { width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.developer-tabs .quiet { white-space: nowrap; }
.developer-toolbar { flex-wrap: wrap; }
.developer-panel-heading { gap: 12px; margin-bottom: 12px; }
.developer-panel-heading h2 { margin: 0; font-size: 16px; }
.developer-panel-heading p { margin-top: 4px; font-size: 13px; }
.developer-panel-heading .primary, .developer-inline-action { display: inline-flex; align-items: center; gap: 7px; }
.developer-table strong { font-weight: 560; }
.developer-table code, .developer-static-row code { overflow-wrap: anywhere; }
.developer-table td:last-child, .developer-table th:last-child { text-align: end; }
.developer-table td:last-child > .owner-filter-control { display: inline-block; }
#app .developer-menu { display: grid; place-items: center; width: 34px; min-height: 34px; padding: 0; border-color: transparent; }
.owner-filter-popup.developer-actions { width: min(268px, calc(100vw - 20px)); padding: 6px; }
.developer-actions:popover-open { display: grid; gap: 2px; }
#app .developer-actions .quiet { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 7px 9px;
  border: 0; background: none; text-align: start; }
#app .developer-actions .quiet:hover { background: var(--subtle); }
#app .developer-actions [data-danger="true"] { color: var(--error); }
.developer-actions svg { flex: none; }
.developer-more { display: flex; justify-content: center; padding: 12px 0 0; border-top: 1px solid var(--line); }
.developer-history-tabs button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.developer-delivery-row { padding-inline: 0; }
.developer-static-row { cursor: default; padding-inline: 0; }
.developer-static-row > div:first-child { min-width: 0; }
.staff-dialog.developer-dialog { width: min(520px, calc(100% - 24px)); border-radius: 20px; }
.staff-dialog.developer-compact-dialog { width: min(440px, calc(100% - 24px)); }
.developer-dialog .developer-controls { display: grid; gap: 12px; }
.developer-dialog .developer-danger { background: #c12c36; border-color: #c12c36; color: #fff; }
.developer-dialog .developer-danger:hover { background: #aa2029; }
.developer-events { display: grid; gap: 5px; }
.developer-choice { align-items: flex-start; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.developer-choice:hover { background: var(--subtle); }
.developer-choice input { margin: 4px 0 0; accent-color: var(--accent); }
.developer-secret { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--control); overflow-wrap: anywhere; }
.developer-secret .owner-payment-close { flex: none; }
.developer-secret-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px; border-radius: 10px;
  background: var(--warning-bg); color: var(--warning); }
.developer-secret-warning svg { flex: none; margin-top: 2px; }
.staff-dialog.developer-webhook-drawer { position: fixed; inset: 0 0 0 auto; width: min(560px, 100vw); height: 100dvh; max-height: 100dvh;
  max-width: 100%; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.developer-webhook-drawer[open] { box-shadow: -16px 0 60px rgb(15 15 25 / 18%); }
.developer-webhook-drawer::backdrop { background: var(--overlay); }
.developer-webhook-drawer > .owner-payment-heading { position: sticky; top: 0; z-index: 1; padding: 14px 20px; background: var(--surface);
  border-bottom: 1px solid var(--line); }
.developer-webhook-drawer h2 { margin: 0; }
.developer-delivery-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.developer-webhook-drawer .operation-link { display: inline-flex; align-items: center; gap: 4px; }
.owner-refund-payment { max-width: 100%; text-align: start; overflow-wrap: anywhere; }
.owner-refund-status-count { margin-inline-start: auto; }
@media (max-width: 700px) {
  .owner-filter-popup.developer-actions { width: 100%; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .developer-webhook-drawer > .owner-payment-heading { padding-inline: 16px; }
}
@media (max-width: 600px) {
  .owner-refunds .overview-cards.refund-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-refunds .refund-cards > :first-child { grid-column: 1 / -1; }
}
#app .operation-kpis .overview-metric { padding: 18px 20px; }
#app .operation-kpis .overview-metric h2 { color: var(--muted); font-size: 13.5px; font-weight: 400; }
#app .operation-kpis .overview-amount { font-weight: 560; letter-spacing: -.025em; }
.staff-integration { display: grid; gap: 16px; min-width: 0; }
.staff-merchant-finance-actions { justify-content: flex-end; }
.staff-merchant-finance-section, .staff-merchant-audit { min-width: 0; }
.staff-integration-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.staff-integration-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
#app .staff-integration-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
.staff-integration-scroll { overflow-x: auto; }
.staff-integration-networks { padding: 16px 20px; }
.integration-network-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.staff-integration-network-fields { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.staff-integration-network-fields .field { width: min(280px, 100%); }
.integration-network-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.integration-network-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 2px 9px;
  background: var(--subtle); border: 1px solid var(--line); border-radius: 7px; }
.integration-network-chip code { min-width: 0; overflow-wrap: anywhere; }
#app .integration-network-chip button { padding: 0 4px; min-height: 24px; border: 0; }
#app .staff-integration-error, #app .staff-integration-danger { color: var(--error); }
#app .staff-integration-notice { color: var(--success); }
@media (max-width: 540px) { .staff-integration-kpis { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .integration-network-grid { grid-template-columns: 1fr; } }
.staff-document-card, .staff-document-rows { min-width: 0; }
.staff-document-card .staff-integration-heading h2, .staff-document-upload { display: inline-flex; align-items: center; gap: 8px; }
.staff-document-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 14px; }
.staff-document-row + .staff-document-row { border-top: 1px solid var(--line); }
.staff-document-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface); }
.staff-document-name { flex: 1; min-width: 0; }
.staff-document-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.staff-document-meta { flex: none; justify-content: flex-end; }
.staff-document-action { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; flex: none;
  color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s; }
.staff-document-action:hover, .staff-document-action:focus-visible { background: var(--subtle); color: var(--ink); }
.staff-document-menu .operation-popover { display: grid; gap: 2px; width: 170px; padding: 5px; }
#app .staff-document-menu .quiet { display: flex; align-items: center; justify-content: flex-start; gap: 8px; border: 0; }
#app .staff-document-remove, .staff-document-status { color: var(--error); }
.staff-document-status { margin: 0; font-size: 13px; }
.staff-document-success { margin: 0 0 8px; color: var(--success); }
.staff-document-drop { position: relative; display: grid; place-items: center; gap: 6px; padding: 22px; text-align: center;
  color: var(--muted); border: 1.5px dashed var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.staff-document-drop strong { color: var(--ink); font-weight: 500; }
.staff-document-drop:is(:hover, :focus-within, .over) { border-color: var(--accent); background: var(--active); }
.staff-document-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.staff-document-queue { display: grid; gap: 6px; }
.staff-document-queue:empty { display: none; }
.staff-document-queued { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(130px, 190px) auto;
  align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; background: var(--subtle); font-size: 13px; }
.staff-document-queued .field { min-width: 0; width: 100%; min-height: 34px; }
.staff-dialog .staff-document-danger { background: #c12c36; border-color: #c12c36; color: #fff; }
.staff-dialog .staff-document-danger:hover { background: #aa2029; }
@media (max-width: 540px) {
  .staff-document-row { flex-wrap: wrap; }
  .staff-document-row .staff-document-name { flex-basis: calc(100% - 42px); }
  .staff-document-meta { flex-basis: 100%; }
  .staff-document-queued { grid-template-columns: auto minmax(0, 1fr) auto; }
  .staff-document-queued .field { grid-column: 2; grid-row: 2; }
  .staff-document-queued .staff-document-action { grid-column: 3; grid-row: 1; }
}
.operation-totals { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid var(--line); }
.operation-totals strong { font-size: 15px; font-weight: 560; }
.operation-totals > div:nth-child(3) strong { color: var(--success); }
#app .service-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-export { width: min(440px, calc(100vw - 32px)); padding: 24px; border-radius: 20px; color: var(--ink); box-shadow: var(--panel-shadow); }
.service-export::backdrop { background: var(--overlay); }
.staff-export-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.service-export .staff-export-heading h2 { margin: 0; }
.export-field { display: grid; gap: 6px; }
.export-field summary { display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--control); }
.export-field .payment-filter-value { max-width: none; }
.export-field .payment-filter .operation-popover { width: 100%; }
.service-export fieldset { padding: 0; border: 0; min-width: 0; }
.service-export legend { margin-bottom: 8px; }
.service-export .operation-actions { justify-content: flex-end; }
.service-export .form-error { color: var(--error); }
.export-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.export-choice { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 11px; cursor: pointer; }
.export-choice:has(input:checked) { border-color: var(--accent-hi); background: var(--active); }
.export-choice input { accent-color: var(--accent); }
.service-period-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.service-period-more span { max-width: 19ch; overflow: hidden; text-overflow: ellipsis; }
.cabinet-popover.service-period-popup { width: min(220px, calc(100vw - 20px)); padding: 6px; }
.cabinet-popover.service-period-popup:has(.service-calendar-pane), .cabinet-popover.service-date-popover {
  width: min(308px, calc(100vw - 20px)); padding: 12px;
}
.cabinet-popover:popover-open { display: grid; gap: 8px; }
.service-period-choices { display: grid; gap: 2px; }
.service-period-choices hr { width: 100%; margin: 3px 0; border: 0; border-top: 1px solid var(--line); }
.service-period-choices .quiet { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; }
.service-period-choices .quiet:hover, .service-period-choices .quiet[aria-pressed="true"] { background: var(--subtle); }
.service-period-choices .quiet[aria-pressed="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--accent-ink); }
.service-presets { display: grid; gap: 2px; padding-right: 10px; border-right: 1px solid var(--line); }
#app .service-presets .quiet { border: 0; text-align: start; background: transparent; min-height: 30px; }
#app .service-presets .quiet[aria-pressed="true"] { background: var(--active); color: var(--accent-ink); }
.service-calendar-pane { display: grid; align-content: start; gap: 8px; }
.service-calendar-heading, .service-calendar-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.service-calendar-heading strong { text-transform: capitalize; }
.service-calendar-foot .primary { flex: none; min-height: 34px; padding-inline: 12px; font-size: 13.5px; }
.service-calendar-foot { padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; }
.service-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.service-calendar > .muted { padding-block: 4px; font-size: 11px; }
.service-day { height: 36px; border: 0; border-radius: 9px; background: none;
  font-size: 13px; font-variant-numeric: tabular-nums; transition: background-color .12s ease; }
.service-day[data-outside="true"] { color: var(--muted); }
.service-day:hover:not(:disabled) { background: var(--subtle); }
.service-day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--line-strong); }
.service-day[aria-pressed="true"] { border-radius: 0; background: var(--active); color: var(--accent-ink); }
.service-day[data-endpoint="true"] { border-radius: 9px; background: var(--accent); color: #fff; }
.service-day:disabled { opacity: .3; cursor: default; }
.service-kpi-link { text-decoration: none; color: inherit; transition: border-color .15s; }
.service-kpi-link:hover { border-color: var(--accent-hi); }
.service-bell .operation-popover { left: auto; right: 0; width: min(365px, calc(100vw - 32px)); }
.service-bell-icon { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; }
.service-bell-icon[data-pending="true"]::after { content: ""; width: 7px; height: 7px; position: absolute; right: 7px; top: 6px;
  background: var(--error); border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
#app .merchant-bell .service-bell-icon { width: 40px; height: 40px; border: 0; border-radius: 11px;
  background: var(--control); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
#app .merchant-bell .service-bell-icon:hover, #app .merchant-bell[open] .service-bell-icon {
  color: var(--ink); background: var(--subtle); }
.service-bell .service-attention-popover { width: min(380px, calc(100vw - 24px)); padding: 6px; }
.service-attention-popover-heading, .service-attention-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.service-attention-popover-heading { padding: 8px 10px 6px; font-size: 15px; }
.service-attention-popover-heading strong { font-weight: 560; }
.service-attention-popover-heading > .muted { font-size: 12px; }
.service-attention.overview-recent { padding: 0; overflow: hidden; align-self: start; }
.service-attention-heading { min-height: 58px; padding: 12px 20px; }
.service-attention-heading h2 { margin: 0; }
.service-attention-badge { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 7px;
  border-radius: 999px; background: var(--subtle); color: var(--ink-soft); font-size: 12px; font-weight: 560; }
.service-attention-list { display: grid; }
.service-attention-full { max-height: min(440px, 65dvh); overflow-y: auto; overscroll-behavior: contain; }
.service-attention-empty { padding: 24px 20px; text-align: center; color: var(--ink-soft); }
.service-attention-empty svg { display: block; margin: 0 auto 8px; color: var(--muted); }
.service-attention-empty strong { font-weight: 500; }
.service-attention-item { --attention-tone: var(--muted); --attention-fill: var(--subtle);
  display: grid; align-items: start; color: var(--ink); text-decoration: none; transition: background .12s; }
.service-attention-item:is(:hover, :focus-visible), .service-attention-more:is(:hover, :focus-visible) { background: var(--subtle); }
.service-attention-item[data-tone="urgent"] { --attention-tone: var(--error); --attention-fill: var(--error-bg); }
.service-attention-item[data-tone="warning"] { --attention-tone: var(--warning); --attention-fill: var(--warning-bg); }
.service-attention-item[data-tone="info"] { --attention-tone: var(--info); --attention-fill: var(--info-bg); }
.service-attention-full .service-attention-item { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 11px; padding: 10px; border-radius: 11px; }
.service-attention-preview .service-attention-item { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); }
.service-attention-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  color: var(--attention-tone); background: var(--attention-fill); }
.service-attention-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--attention-tone); }
.service-attention-title strong { display: block; font-weight: 500; }
.service-attention-title .operation-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-attention-value { font-weight: 560; font-variant-numeric: tabular-nums; }
.service-attention-more { display: inline-flex; justify-content: center; align-items: center; gap: 4px; padding: 10px 20px;
  border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 13.5px; font-weight: 500; }
.service-count { border-radius: 6px; background: var(--subtle); }
.merchant-bell .operation-popover { width: min(380px, calc(100vw - 24px)); padding: 6px; }
.merchant-notice-heading, .merchant-notice-pages { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.merchant-notice-heading strong { font-size: 15px; font-weight: 560; }
.merchant-notice-heading .operation-link, .merchant-notice-pages .operation-link { color: var(--accent-ink); font-size: 12.5px; }
.merchant-notice-items { max-height: min(440px, 55dvh); overflow-y: auto; overscroll-behavior: contain; }
.merchant-notice-items .merchant-notice { display: grid; grid-template-columns: 34px minmax(0, 1fr); width: 100%; align-items: start;
  gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: none;
  text-align: start; cursor: pointer; overflow-wrap: anywhere; }
.merchant-notice-items .merchant-notice:hover { background: var(--subtle); }
.merchant-notice-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  color: var(--accent-ink); background: var(--active); }
.merchant-notice-icon[data-tone="ok"] { color: var(--success); background: var(--success-bg); }
.merchant-notice-icon[data-tone="warn"] { color: var(--warning); background: var(--warning-bg); }
.merchant-notice strong { display: block; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.35; }
.merchant-notice[data-unread="true"] strong::after { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-inline-start: 7px; border-radius: 50%; background: var(--error); vertical-align: middle; }
.merchant-notice-description, .merchant-notice-time { display: block; }
.merchant-notice-description { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.merchant-notice-time { margin-top: 3px; color: var(--muted); font-size: 12px; }
.directory-person { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.directory-person strong { font-weight: 560; overflow-wrap: anywhere; }
.directory-person .service-count { margin-inline-start: 6px; }
.directory-menu .operation-popover { left: auto; right: 0; width: 210px; }
.directory-menu .operation-chip { min-height: 34px; min-width: 34px; padding: 0; }
.directory-matrix { min-width: 0; }
.directory-matrix h2 { padding: 16px 20px; }
.directory-matrix-scroll { overflow-x: auto; }
.directory-matrix :is(th,td):not(:first-child) { text-align: center; }
.directory-matrix tbody td { vertical-align: middle; }
.staff-employee-menu { max-height: calc(100dvh - 16px); overflow-y: auto; }
.staff-employee-menu-label { padding: 6px 10px 2px; font-size: 12px; }
.staff-employee-menu hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.staff-dialog.staff-employee-dialog, .staff-audit-export { width: min(540px, calc(100% - 24px)); border-radius: 22px; box-shadow: var(--panel-shadow); }
.staff-dialog.staff-employee-password { width: min(440px, calc(100% - 24px)); }
.staff-employee-dialog .staff-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.staff-employee-dialog .staff-dialog-header p { margin: 4px 0 0; overflow-wrap: anywhere; }
.staff-employee-dialog::backdrop, .staff-audit-export::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
.staff-approval-queue { padding: 16px 20px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.staff-approval-queue h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.staff-approval-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; }
.staff-approval-row + .staff-approval-row { border-top: 1px solid var(--line); margin-top: 12px; }
.staff-approval-row > div { min-width: 0; flex: 1 1 200px; overflow-wrap: anywhere; }
.staff-approval-reason { margin: 4px 0; overflow-wrap: anywhere; }
.staff-offboarding { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.staff-offboarding h3 { margin: 0; font-size: 14px; }
.staff-offboarding ul { display: grid; gap: 6px; margin: 8px 0 0; padding-inline-start: 20px; }
.staff-offboarding .operation-link { text-align: start; white-space: normal; }
.staff-audit-subject { display: block; overflow-wrap: anywhere; }
.service-security-notices { border-top: 1px solid var(--line); }
.service-security-notices .service-attention-item { grid-template-columns: auto minmax(0,1fr); }
.service-security-notices .service-attention-popover-heading button { font-size: 12px; }
#app .staff-audit-toolbar .staff-audit-merchant { width: 140px; min-height: 38px; }
.staff-audit-row-link { text-decoration: none; color: inherit; }
.audit-action { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
.audit-table { table-layout: fixed; }
.audit-table :is(th, td):nth-child(1) { width: 17%; }
.audit-table :is(th, td):nth-child(2) { width: 25%; }
.audit-table :is(th, td):nth-child(3) { width: 22%; }
.audit-table td { overflow-wrap: anywhere; }
.audit-table .directory-person > :last-child { min-width: 0; }
.gateway-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gateway-card { display: flex; flex-direction: column; min-width: 0; }
.gateway-card header, .gateway-card footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 16px 18px; }
.gateway-card footer { margin-top: auto; padding-block: 12px; border-top: 1px solid var(--line); }
.gateway-card footer button { min-height: 34px; }
.gateway-avatar { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px;
  font-weight: 650; color: light-dark(#3d55c9,#aebbff); background: light-dark(#e8ecfd,#3b4062); }
.gateway-avatar[data-tone="1"] { color: light-dark(#0b7a41,#6fdda3); background: light-dark(#e3f6ec,#2d4840); }
.gateway-avatar[data-tone="2"] { color: light-dark(#9a5b00,#f5bc6e); background: light-dark(#fdf2e1,#514132); }
.gateway-avatar[data-tone="3"] { color: light-dark(#a3306a,#f49ac4); background: light-dark(#fbe7f1,#51374a); }
.gateway-avatar[data-tone="4"] { color: light-dark(#1d6f86,#8bd3ea); background: light-dark(#e6f4f8,#334854); }
.gateway-probe-note { display: flex; align-items: start; gap: 8px; margin: 0 18px 12px; padding: 10px 12px;
  border-radius: 11px; color: var(--warning); background: var(--warning-bg); }
.gateway-probe-note svg { flex: none; margin-top: 2px; }
.gateway-probe-note[data-recovered="true"] { color: var(--success); background: var(--success-bg); }
.gateway-probe-note strong, .gateway-probe-note .operation-sub { display: block; }
.gateway-facts { display: grid; grid-template-columns: minmax(0,1fr) auto; margin: 0; padding: 0 18px 16px; }
.gateway-facts > * { padding-block: 7px; border-bottom: 1px solid var(--line); }
.gateway-facts > :nth-last-child(-n+2) { border-bottom: 0; }
.gateway-facts dt { color: var(--muted); }
.gateway-facts dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; font-weight: 500; }
.staff-gateway-tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.staff-gateway-tabs a { display: flex; align-items: center; gap: 7px; padding: 0 12px 13px; text-decoration: none;
  white-space: nowrap; color: var(--muted); transition: color .15s; }
.staff-gateway-tabs a:first-child { padding-inline-start: 2px; }
.staff-gateway-tabs a:is(:hover,[aria-current="page"]) { color: var(--title); }
.staff-gateway-tabs a[aria-current="page"] { font-weight: 560; }
.staff-gateway-tab-line { position: absolute; inset: auto auto 0 0; width: 0; height: 2px; border-radius: 2px;
  background: var(--accent-hi); box-shadow: 0 0 9px color-mix(in srgb,var(--accent-hi) 55%,transparent);
  transition: width .25s cubic-bezier(.3,.7,.3,1), transform .25s cubic-bezier(.3,.7,.3,1); }
.staff-terminal-table .payment-pill[data-status="shared"] { color: var(--accent-ink); background: var(--active); }
.staff-energy-observation { display: grid; justify-items: start; gap: 6px; }
.staff-energy-observation p, .staff-energy-order dl, .staff-energy-order dd { margin: 0; }
.staff-energy-history { display: grid; gap: 10px; min-width: 0; }
.staff-energy-history ul { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.staff-energy-order { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.staff-energy-order dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 6px 12px; }
.staff-energy-order dt { font-size: .85em; }
.staff-terminal-table .staff-terminal-projects { max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.staff-terminal-actions { display: flex; justify-content: end; }
.staff-terminal-action { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent;
  border-radius: 9px; background: transparent; color: var(--muted); }
.staff-terminal-action:is(:hover,[aria-expanded="true"]) { color: var(--ink); background: var(--subtle); border-color: var(--line); }
.staff-terminal-action:disabled { opacity: .45; cursor: wait; }
.staff-terminal-menu { position: fixed; inset: auto; width: min(240px, calc(100vw - 16px)); margin: 0; padding: 6px;
  color: var(--ink); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--panel-shadow); }
.staff-terminal-menu:popover-open { display: grid; animation: staff-channel-open .16s ease-out; }
.staff-terminal-menu button { display: flex; align-items: center; gap: 8px; justify-content: start; min-height: 38px; padding: 7px 10px;
  border: 0; border-radius: 8px; background: none; }
.staff-terminal-menu button:hover { background: var(--subtle); }
.staff-terminal-dialog { width: min(540px, calc(100% - 24px)); border-radius: 22px; box-shadow: var(--panel-shadow); }
.staff-terminal-dialog .staff-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.staff-terminal-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
.staff-terminal-ownership:has(> [hidden]) { grid-template-columns: minmax(0,1fr); }
@media (prefers-reduced-motion: reduce) {
  .staff-gateway-tab-line { transition: none; }
  .staff-terminal-menu:popover-open { animation: none; }
}
.finance-total { background: var(--subtle); }
#app .operation-table .finance-total th { text-align: start; font-size: inherit; color: var(--ink); font-weight: 560; }
.staff-finance-negative { color: var(--error); }
.staff-finance-action { text-align: end; }
.staff-finance-action button { white-space: nowrap; }
.staff-payout-parts .staff-payout-total > * { font-weight: 650; color: var(--title); }
.staff-dialog:is(.staff-payout-form, .staff-payout-confirm) { border-radius: 22px; box-shadow: var(--panel-shadow); }
.staff-dialog.staff-payout-confirm { width: min(540px, calc(100% - 24px)); }
:is(.staff-payout-form, .staff-payout-confirm)::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
:is(.staff-payout-form, .staff-payout-confirm) .staff-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
:is(.staff-payout-form, .staff-payout-confirm) .staff-dialog-header p { margin: 4px 0 0; overflow-wrap: anywhere; }
.staff-payout-split { min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.staff-payout-split:empty { display: none; }
.staff-payout-split-row { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3,minmax(0,1fr)); align-items: start;
  gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.staff-payout-split-row > * { min-width: 0; overflow-wrap: anywhere; }
.staff-payout-split-row > :first-child, .staff-payout-free { align-self: center; }
.staff-payout-split-row .field { width: 100%; min-width: 0; min-height: 36px; padding-inline: 8px; text-align: end; font-variant-numeric: tabular-nums; }
.staff-payout-split-head, .staff-payout-split-total { background: var(--subtle); }
.staff-payout-split-head { color: var(--muted); font-size: 12px; }
.staff-payout-split-head > :not(:first-child), .staff-payout-free { text-align: end; }
.staff-payout-split-total { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; font-weight: 650; }
.staff-payout-mobile-label, .staff-payout-form .operation-sub:empty { display: none; }
.staff-payout-coverage { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle); }
.staff-payout-coverage :is(h3, dl, dd, p) { margin: 0; }
.staff-payout-coverage dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 12px; margin-bottom: 5px; }
.staff-payout-coverage dt { color: var(--muted); }
.staff-payout-coverage dd { text-align: end; overflow-wrap: anywhere; }
@media (max-width: 540px) {
  .staff-payout-split-head { display: none; }
  .staff-payout-split-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .staff-payout-mobile-label { display: block; color: var(--muted); font-size: 12px; }
}
.project-name-cell { display: inline-flex; align-items: center; gap: 10px; }
.project-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: var(--active); color: var(--accent-ink); }
.project-resource { display: flex; align-items: center; gap: 8px; max-width: 380px; }
.project-resource .operation-mono { white-space: normal; overflow-wrap: anywhere; cursor: text; }
.project-copy { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0;
  border-radius: 7px; padding: 0; background: transparent; color: var(--muted); }
.project-copy:hover, .project-copy:focus-visible { color: var(--ink); background: var(--control); }
.project-copy-feedback { margin: 0; padding: 0 16px 12px; color: var(--muted); font-size: 13px; }
.project-copy-feedback:empty { position: absolute; padding: 0; }
.merchant-project-mobile:not(:last-child) .operation-mobile-row { border-bottom: 1px solid var(--line); }
.merchant-project-mobile:has(.merchant-checkout-display-button) .operation-mobile-row { border-bottom: 0; }
.merchant-hint { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--subtle); color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.merchant-hint svg { flex: none; margin-top: 1px; color: var(--muted); }


dialog.staff-dialog.owner-search { inset: 0; width: min(620px, calc(100% - 32px)); max-width: 100%; max-height: calc(90dvh - 16px);
  margin: calc(10dvh + 16px) auto auto; padding: 0; border-radius: 20px; overflow: hidden; font-size: 16px; }
.owner-search-head { display: flex; align-items: center; gap: 10px; min-height: 54px; padding-inline: 18px; border-bottom: 1px solid var(--line); }
.owner-search-head > svg { flex: none; color: var(--muted); }
.owner-search-input { width: 100%; min-width: 0; height: 52px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; }
.owner-search-input:focus { outline: none; }
.owner-search-head:focus-within { border-bottom-color: var(--accent-hi); }
.owner-search-results { max-height: min(420px, calc(80dvh - 110px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.owner-search-results:empty { padding: 0; }
.owner-search-group { padding: 10px 12px 4px; margin: 0; color: var(--muted); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; }
.owner-search-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: start; font: inherit; }
.owner-search-item:hover, .owner-search-item[data-selected="true"] { background: var(--control); }
.owner-search-payment, .owner-search-total { display: grid; gap: 4px; min-width: 0; }
.owner-search-payment { overflow-wrap: anywhere; }
.owner-search-payment > .muted { font-size: 12px; }
.owner-search-total { justify-items: end; text-align: end; }
.owner-search-total .payment-pill { white-space: normal; }
.owner-search-message { margin: 0; padding: 15px 18px; }
.owner-search-footer { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .owner-search-footer { display: none; } }
@media (max-width: 600px) {
  dialog.staff-dialog.owner-search { position: fixed; inset: auto 0 0; width: 100%; margin: 0; max-height: 92dvh;
    border-radius: 20px; padding-bottom: env(safe-area-inset-bottom); --dialog-rest: translateY(24px); }
  .owner-search-results { max-height: min(420px, calc(100dvh - 76px)); }
  .owner-search-input { font-size: 16px; }
}

.merchant-brand { width: 148px; overflow: hidden; }
.merchant-brand img { width: 148px; height: auto; flex: none; }
.merchant-brand .merchant-brand-dark { display: none; }
:root[data-theme="dark"] .merchant-brand .merchant-brand-light { display: none; }
:root[data-theme="dark"] .merchant-brand .merchant-brand-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .merchant-brand .merchant-brand-light { display: none; }
  :root[data-theme="system"] .merchant-brand .merchant-brand-dark { display: block; }
}
#app .merchant-contact-toggle { display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer; }
#app .merchant-contact-toggle svg { color: var(--accent-hi); flex: none; }
#app .merchant-contact-floating { position: fixed; right: 20px; bottom: 20px; z-index: 4; padding: 0 18px 0 16px; height: 46px;
  background: var(--surface); color: var(--ink); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 12px 30px -12px rgb(0 0 0 / 45%); }
#app .merchant-contact-mobile { display: none; }
#app .merchant-contacts { position: fixed; inset: auto 20px 74px auto; margin: 0; width: min(320px, calc(100vw - 32px));
  max-height: calc(100dvh - 90px); padding: 8px; overflow: auto; box-shadow: var(--panel-shadow); color: var(--ink); }
.merchant-contacts > strong { display: block; padding: 7px 10px 4px; font-size: 15px; font-weight: 560; }
.merchant-contact-caption { display: block; padding: 6px 10px 4px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.merchant-contact-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.merchant-contact-link:hover { background: var(--subtle); }
.merchant-contact-link img { width: 30px; height: 30px; border-radius: 50%; }
.merchant-contact-link > span { display: grid; flex: 1; }
.merchant-contact-link strong { font-weight: 500; }

:is(.owner-filter-popup, .cabinet-popover) { position: fixed; inset: auto; margin: 0; padding: 12px; width: min(452px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px); overflow: auto; box-shadow: var(--panel-shadow); color: var(--ink); }
.cabinet-popover:popover-open { animation: cabinet-popover-in .16s ease-out; }
.owner-period-popup:popover-open { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
.owner-project-popup { width: min(320px, calc(100vw - 20px)); }
.owner-filter-control { min-width: 0; }
#app .owner-project-trigger { max-width: 100%; overflow-wrap: anywhere; text-align: start; }
.owner-project-trigger .project-mark { width: 24px; height: 24px; border-radius: 7px; }
.merchant-period-narrow { display: none; }
.merchant-period-segment { overflow: visible; flex-wrap: wrap; align-items: center; }
#app .merchant-period-segment .owner-period-trigger { min-height: 34px; border: 0; border-radius: 9px; color: var(--muted);
  background: transparent; font-weight: 500; }
#app .merchant-period-segment .owner-period-trigger:is([aria-expanded="true"],[aria-pressed="true"]) {
  color: var(--title); background: var(--subtle); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.owner-calendar-only { width: min(308px, calc(100vw - 20px)); }
.owner-calendar-only:popover-open { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .merchant-period-narrow { display: block; }
}
.owner-project-choices { display: grid; gap: 3px; max-height: 48dvh; overflow: auto; }
.owner-project-choices .check-row { padding: 7px 6px; gap: 8px; overflow-wrap: anywhere; }
.owner-project-choices .check-row:hover { background: var(--subtle); border-radius: 8px; }
.owner-project-choices .operation-sub { overflow-wrap: anywhere; }
#app .owner-project-choices .project-mark { width: 24px; height: 24px; border-radius: 7px; }
.project-mark { font-size: 12px; font-weight: 560; color: var(--project-color, var(--accent-ink)); background: color-mix(in srgb, var(--project-color, var(--accent)) 11%, var(--surface)); }

.merchant-page-heading { margin-block-end: 5px; }
#app .merchant-page-heading h1 { font-weight: 650; }
#app .merchant-page-heading p { margin-top: 2px; }
.merchant-kpis { gap: 16px; }
#app .merchant-kpis .overview-metric { padding: 18px 20px; container-type: inline-size; }
#app .merchant-kpis .overview-metric h2 { color: var(--muted); font-size: 13.5px; font-weight: 400; line-height: 1.5; }
#app .merchant-kpis .overview-amount { margin: 6px 0 5px; font-size: clamp(19px, 14.5cqi, 28px); font-weight: 560;
  letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.merchant-kpis .overview-metric > p:last-child:not(.overview-amount) { font-size: 13px; line-height: 1.35; }
.merchant-kpis .overview-metric.current { color: #fff; background: radial-gradient(280px 160px at 92% 0%,
  rgb(130 120 255 / 45%), transparent 72%), radial-gradient(230px 160px at 0% 100%, rgb(90 160 255 / 25%), transparent 70%), #1d1d25; }
#app .merchant-kpis .overview-metric.current h2 { color: inherit; }
@media (max-width: 900px) {
  .merchant-page-heading { margin-block-end: 0; }
  .merchant-kpis { gap: 10px; }
  #app .merchant-kpis .overview-metric { padding: 14px; }
  #app .merchant-kpis .overview-amount { font-size: clamp(19px, 14.5cqi, 21px); }
}
.overview-metric.current :is(h2, .overview-amount, .muted) { color: inherit; }
.overview-metric.current :is(h2, .muted), .owner-amount-cents { opacity: .7; }
.owner-amount-cents { font-size: .72em; }
.owner-change-up { color: var(--success); }
.owner-change-down { color: var(--error); }
.owner-panel-heading { margin-bottom: 10px; }
.owner-panel-heading h2 { margin: 0; font-size: 16px; }
.owner-panel-heading .operation-link { display: inline-flex; align-items: center; gap: 6px; }
.owner-onboarding-step { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 12px; background: var(--control); }
.owner-onboarding-step h3 { margin: 0; font-size: 14px; }
.owner-onboarding-step p { margin: 3px 0; }
.owner-onboarding-step .quiet { margin-top: 6px; }
.owner-steps-v1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.owner-step-marker { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--active); color: var(--accent-ink); font-weight: 600; }
.owner-onboarding-step[data-complete="true"] .owner-step-marker { background: var(--success-bg); color: var(--success); }
.owner-recent-payments { padding: 0; }
.owner-recent-payments .owner-panel-heading { padding: 16px 20px 0; }
.owner-recent-payments .staff-table { min-width: 0; }
#app .owner-recent-payments .operation-table td { padding-block: 10px; }
#app .recent-compact .operation-table tbody tr:first-child td { border-top: 1px solid var(--line); }

.owner-operation-filter-popup { width: min(300px, calc(100vw - 20px)); }
.owner-column-popup { width: min(240px, calc(100vw - 20px)); }
.owner-column-popup > strong { display: block; padding: 4px 6px 7px; }
.owner-operation-filter-form { display: grid; gap: 10px; }
.owner-operation-filter-form fieldset, .owner-report-format { min-width: 0; margin: 0; padding: 3px 0 8px; border: 0; }
.owner-operation-filter-form fieldset:not(:last-of-type) { border-bottom: 1px solid var(--line); }
.owner-operation-filter-form legend, .owner-report-format legend { padding: 0; font-size: 13px; font-weight: 560; }
.owner-operation-filter-form .check-row, .owner-column-popup .check-row { gap: 8px; padding: 5px 6px; overflow-wrap: anywhere; border-radius: 8px; }
.owner-operation-filter-form .check-row:hover, .owner-column-popup .check-row:hover { background: var(--subtle); }
.owner-filter-popup .check-row input, .owner-report-format input { margin: 0; accent-color: var(--accent); flex: none; }
.owner-operation-filter-form .operation-amount-range { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; }
.owner-operation-filter-form .field { min-width: 0; }
.owner-operation-filter-form .operation-actions { justify-content: space-between; }
#app .owner-operation-filter:is([aria-expanded="true"],[data-active="true"]) { color: var(--accent-ink); background: var(--active); }
.owner-filter-count { min-width: 18px; min-height: 18px; padding-inline: 4px; border-radius: 6px;
  background: var(--accent); color: #fff; font-size: 11px; }
.owner-operation-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 16px 0; }
.owner-operation-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; padding: 6px 9px 6px 12px;
  border-radius: 9px; color: var(--accent-ink); background: var(--active); cursor: pointer; text-align: start; overflow-wrap: anywhere; }
.owner-operation-chip svg { flex: none; }
.owner-page-info, .owner-page-info label { display: flex; align-items: center; gap: 8px; }
.owner-page-info { gap: 14px; }
.operation-site, .operation-description { display: block; max-width: 155px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.operation-site { color: var(--ink-soft); font-size: 12px; }
.operation-project-name { display: inline-flex; align-items: center; gap: 6px; }
.operation-project-name .project-mark { width: 23px; height: 23px; border-radius: 7px; }
.operation-page .operation-totals { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 0;
  padding: 14px 20px 16px; background: var(--surface); }
.operation-page .operation-totals > div { min-width: 0; padding-inline: 17px; border-inline-end: 1px solid var(--line); }
.operation-page .operation-totals > div:first-child { padding-inline-start: 0; }
.operation-page .operation-totals > div:last-child { border-inline-end: 0; }
.operation-page .operation-totals strong { font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.owner-report-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(190px,100%),1fr)); gap: 12px; }
.owner-report-card { display: grid; align-content: start; justify-items: start; gap: 4px; padding: 18px 20px; text-align: start;
  color: var(--ink); cursor: pointer; transition: background .15s, box-shadow .15s; }
.owner-report-card:hover { background: var(--active); box-shadow: inset 0 0 0 1px var(--line-strong); }
.owner-report-card svg { color: var(--muted); margin-bottom: 4px; }
.owner-report-card strong { font-size: 15px; font-weight: 560; }
.owner-report-card .muted { font-size: 13px; }
.owner-report-list > h2 { padding: 16px 20px 12px; font-size: 16px; }
.owner-report-table strong { font-weight: 560; }
.owner-report-download { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.owner-report-mobile { align-items: flex-start; }
.owner-report-mobile .operation-mobile-value { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: end; }
.owner-report-mobile .operation-mobile-main { flex: 1 1 0; }
.owner-report-mobile .owner-report-download { max-width: 100%; white-space: normal; text-align: start; overflow-wrap: anywhere; }
.owner-report-mobile .owner-report-download svg { flex: none; }
.owner-report-mobile .operation-sub { overflow-wrap: anywhere; }
.owner-report-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line-strong);
  border-inline-end-color: var(--accent-hi); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .owner-report-spinner { animation: auth-spin .7s linear infinite; } }
.staff-dialog.owner-report-dialog { width: min(440px,calc(100% - 24px)); border-radius: 20px; }
.owner-report-dialog .staff-export-heading { margin: 0; }
.owner-report-dialog .staff-export-heading h2 { margin: 0; }
.owner-report-format { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-block: 6px 0; }
.report-format-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px; cursor: pointer;
  background: var(--control); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .15s ease, box-shadow .15s ease; }
.report-format-option:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.report-format-option:has(:checked) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-hi), 0 0 0 3px var(--focus-ring); }
.owner-report-dialog .owner-filter-control > .operation-chip { display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; width: 100%; min-height: 40px; text-align: start; }
.owner-report-dialog .owner-filter-control > .operation-chip svg:last-child { margin-inline-start: auto; }
.owner-report-dialog .service-presets .quiet { min-height: 30px; text-align: start; }
.owner-report-dialog .service-presets .quiet[aria-pressed="true"] { background: var(--active); color: var(--accent-ink); }
@media (max-width: 1200px) { .owner-report-table .owner-report-author { display: none; } }
@media (max-width: 1024px) { .owner-report-table .owner-report-projects { display: none; } }

@media (max-width: 900px) {
  #app .merchant-contact-floating { display: none; }
  #app .merchant-contact-mobile { display: flex; width: 100%; padding: 8px 10px; margin-bottom: 6px; border-radius: 9px;
    background: var(--subtle); color: var(--ink); }
  #app .merchant-contacts { inset: auto auto 18px 12px; }
  .owner-report-card { padding: 14px; }
  #app .owner-refunds .operation-toolbar .operation-chip { min-height: 36px; padding-inline: 8px; gap: 6px; }
  #app .owner-operations .operation-toolbar-right { flex: 0 0 100%; }
  #app .owner-operations .operation-toolbar-right .operation-search { flex-basis: 100%; }
  .operation-page .operation-totals { grid-template-columns: repeat(2,minmax(0,1fr)); justify-content: normal; gap: 10px; padding: 12px 16px 14px; }
  .operation-page .operation-totals > div { padding: 0; border: 0; }
}
@media (max-width: 700px) {
  .owner-filter-popup { inset: auto 0 0 !important; width: 100%; max-width: none; max-height: 85dvh;
    border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
  .owner-period-popup:popover-open { grid-template-columns: minmax(0, 1fr); }
  .owner-filter-popup::backdrop { background: var(--overlay); }
  .owner-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .merchant-contacts:popover-open { animation: cabinet-enter .18s cubic-bezier(.2,.7,.2,1); }
}
@media (max-width: 1180px) { .gateway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .gateway-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) { #app .staff-directory .operation-table-wrap { overflow: visible; } }
.operation-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.operation-drawer-summary { display: grid; justify-items: start; gap: 7px; }
dialog.owner-payment-card[open] { box-shadow: -16px 0 60px rgb(15 15 25 / 18%); }
dialog.owner-payment-card::backdrop { background: var(--overlay); }
dialog.owner-payment-card { padding: 0; border-left: 1px solid var(--line); }
.owner-payment-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.owner-payment-card > .owner-payment-heading { position: sticky; top: 0; z-index: 1; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.owner-payment-heading h2 { margin: 0; font-size: 17px; }
.owner-payment-close { display: grid; place-items: center; width: 34px; min-height: 34px; padding: 0; }
.owner-payment-body { padding: 20px; gap: 16px; }
.owner-payment-summary .overview-amount { margin: 8px 0 4px; font-size: 34px; line-height: 1.1; font-weight: 560; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.owner-payment-summary p { overflow-wrap: anywhere; }
.owner-payment-section { padding-top: 14px; border-top: 1px solid var(--line); }
.owner-payment-section h3 { margin: 0 0 10px; font-size: 14px; font-weight: 560; }
.owner-payment-section > p { margin-top: 6px; font-size: 12px; }
.owner-payment-facts { gap: 0 10px; }
.owner-payment-facts :is(dt, dd) { padding: 7px 0; min-height: 34px; border-bottom: 1px solid var(--line); }
.owner-payment-facts :is(dt, dd):nth-last-child(-n+2) { border-bottom: 0; }
.owner-payment-facts dd { font-variant-numeric: tabular-nums; }
.owner-payment-facts .treasury-value { min-height: 0; padding: 0; border: 0; background: transparent; text-align: start; }
.owner-payment-facts .owner-payment-site-row .owner-copy-value { flex: none; justify-content: center; width: 26px; min-height: 26px; border-radius: 7px; color: var(--muted); }
.owner-payment-facts .owner-payment-site-row .owner-copy-value:hover { color: var(--ink); background: var(--control); }
.owner-copy-value { display: inline-flex; align-items: center; gap: 6px; }
.owner-copy-value span { min-width: 0; overflow-wrap: anywhere; }
.owner-copy-value svg { flex: none; }
:is(.owner-copy-value, .staff-payment-copy)[data-copied="true"] svg { color: var(--success); }
.owner-timezone { display: inline-block; margin-inline-start: 7px; font-size: 11px; }
.owner-money-refunded { color: var(--info); }
.owner-money-review { color: var(--warning); }
.owner-checkout-link { gap: 8px; }
.owner-checkout-link :is(.primary, .quiet) { font-variant-numeric: tabular-nums; }
.owner-checkout-dialog { width: min(420px, calc(100% - 28px)); }
.owner-checkout-dialog .qr-container { padding: 10px 0; }
.owner-checkout-dialog .qr-wrap canvas { width: 184px; max-width: 100%; height: auto; }
.owner-timeline { gap: 0; margin-top: 8px; padding: 0; list-style: none; }
.owner-timeline li { position: relative; padding: 0 0 16px 25px; }
.owner-timeline li:last-child { padding-bottom: 0; }
.owner-timeline li::before { content: ""; position: absolute; top: 3px; left: 0; z-index: 1; width: 13px; height: 13px;
  border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.owner-timeline li[data-tone]:not([data-tone=""])::before { box-shadow: none; }
.owner-timeline li:not(:last-child)::after { content: ""; position: absolute; top: 16px; bottom: -2px; left: 6px; border-left: 1.5px solid var(--line); }
.owner-timeline li[data-tone="success"]::before { background: var(--success); }
.owner-timeline li[data-tone="info"]::before { background: var(--info); }
.owner-timeline li[data-tone="error"]::before { background: var(--error); }
.owner-timeline li > p:first-child { font-size: 14px; font-weight: 500; }
.owner-timeline li > .muted { margin-top: 1px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.owner-timeline-action { display: grid; justify-items: start; gap: 5px; margin-top: 7px; }
.owner-timeline-action .quiet, .owner-payment-refund { display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
dialog.owner-payment-card:not(.staff-operation-drawer) > .owner-payment-heading { min-height: 64px; padding: 0 18px 0 24px; }
.owner-payment-card > .owner-payment-body { padding: 22px 24px 28px; gap: 22px; }
.owner-payment-card .owner-payment-section { padding-top: 0; border-top: 0; }
.owner-payment-card .owner-payment-section h3 { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.owner-payment-card .owner-payment-section > p { font-size: 12.5px; line-height: 1.45; }
.owner-payment-facts { align-items: center; }
.owner-payment-facts :is(dt, dd) { min-height: 34px; border-bottom: 0; }
.owner-payment-facts dd { text-align: end; font-size: 14.5px; font-weight: 500; }
.owner-payment-site-row { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.owner-payment-site { min-width: 0; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); border-bottom: 1px solid var(--line-strong); text-decoration: none; }
.owner-payment-site:hover { border-color: var(--muted); }
.owner-checkout-link > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.owner-refund-options { display: grid; gap: 7px; }
.owner-refund-options label { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); }
.owner-refund-options label:has(:checked) { border-color: var(--accent-hi); background: var(--active); }
.owner-refund-options input { margin: 0; accent-color: var(--accent); }
.owner-refund-options small { display: block; margin-top: 2px; }
.owner-refund-amount { position: relative; }
.owner-refund-amount input { padding-inline-end: 34px; }
.owner-refund-amount span { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.owner-refund-code { text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .28em; }
@media (max-width: 700px) {
  .owner-payment-body, .owner-payment-card > .owner-payment-body,
  dialog.owner-payment-card:not(.staff-operation-drawer) > .owner-payment-heading { padding-inline: 16px; }
  .owner-payment-summary .overview-amount { font-size: 30px; }
}
dialog.staff-operation-drawer { width: min(600px, 100vw); padding: 0; overflow: hidden; box-shadow: -20px 0 60px -20px rgb(0 0 0 / 30%); }
dialog.staff-operation-drawer[open] { display: flex; flex-direction: column; animation: staff-payment-in .3s cubic-bezier(.2,.8,.2,1); }
dialog.staff-operation-drawer[open].closing { animation: staff-payment-out .2s ease forwards; pointer-events: none; }
dialog.staff-operation-drawer::backdrop { backdrop-filter: blur(6px); animation: staff-payment-overlay .2s ease; }
dialog.staff-operation-drawer.closing::backdrop { animation: staff-payment-overlay .2s ease reverse forwards; }
@keyframes staff-payment-in { from { transform: translateX(30px); opacity: 0; } }
@keyframes staff-payment-out { to { transform: translateX(30px); opacity: 0; } }
@keyframes staff-payment-overlay { from { opacity: 0; } to { opacity: 1; } }
.staff-operation-drawer .operation-drawer-head { flex: none; min-height: 64px; padding: 12px 18px 12px 24px; }
.staff-operation-drawer .operation-drawer-head h2 { margin: 0; color: var(--title); font-size: 18px; font-weight: 560; letter-spacing: -.01em; }
.staff-payment-close, .staff-payment-copy { display: inline-grid; place-items: center; flex: none; border: 0; cursor: pointer; }
.staff-payment-close { width: 34px; height: 34px; border-radius: 10px; color: var(--ink-soft); background: var(--subtle); }
.staff-payment-close:hover { color: var(--ink); }
.staff-payment-copy { width: 26px; height: 26px; border-radius: 7px; color: var(--muted); background: none; }
.staff-payment-copy:hover { color: var(--ink); background: var(--subtle); }
.staff-payment-content { flex: 1; min-height: 0; padding: 22px 24px 28px; overflow-y: auto; overscroll-behavior: contain; }
.staff-payment-amount { margin: 8px 0 0; color: var(--title); font-size: 38px; font-weight: 560; line-height: 1.15;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.staff-payment-description { margin: 4px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.staff-payment-warning { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 13px;
  border-radius: 12px; color: var(--error); background: var(--error-bg); }
.staff-payment-warning svg { flex: none; }
.staff-payment-section { margin-top: 24px; }
.staff-payment-section h3 { margin: 0 0 2px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.staff-payment-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; margin: 0; }
.staff-payment-facts > div { display: contents; }
.staff-payment-facts dt, .staff-payment-facts dd { display: flex; align-items: center; min-width: 0; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.staff-payment-facts > div:first-child > * { border-top: 0; }
.staff-payment-facts dt { color: var(--muted); font-size: 13.5px; }
.staff-payment-facts dd { justify-content: flex-end; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.staff-payment-facts .operation-link { text-align: right; color: var(--accent-ink); }
.staff-payment-id { display: inline-flex; align-items: center; justify-content: end; gap: 4px; min-width: 0; margin-block: -3px; }
.payment-instrument { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
.payment-instrument :is(img, svg) { flex: none; }
.gateway-method { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; }
.instrument-field { position: relative; min-width: 0; }
.instrument-field > :is(img, svg) { position: absolute; inset: 50% auto auto 13px; transform: translateY(-50%); pointer-events: none; }
.instrument-field > .field { padding-inline-start: 40px; }
.staff-payment-timeline { list-style: none; padding: 0; margin: 10px 0 0; }
.staff-payment-timeline li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; overflow-wrap: anywhere; }
.staff-payment-timeline li:last-child { padding-bottom: 0; }
.staff-payment-timeline li:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: -2px; width: 1.5px; background: var(--line); }
.staff-payment-event-dot { position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 3px; flex: none;
  border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--muted); }
.staff-payment-timeline [data-tone="ok"] .staff-payment-event-dot { background: var(--success); box-shadow: none; }
.staff-payment-timeline [data-tone="bad"] .staff-payment-event-dot { background: var(--error); box-shadow: none; }
.staff-payment-timeline [data-tone="warn"] .staff-payment-event-dot { background: var(--warning); box-shadow: none; }
.staff-payment-timeline [data-tone="info"] .staff-payment-event-dot { background: var(--info); box-shadow: none; }
.staff-payment-timeline strong { font-weight: 500; }
.staff-payment-timeline time { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.staff-payment-footer { display: flex; flex: none; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); }
.staff-payment-footer:empty, .staff-payment-feedback:empty { display: none; }
.staff-payment-footer button { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 120px; min-height: 46px; border-radius: 13px; font-size: 15px; }
.staff-payment-feedback { flex-basis: 100%; margin: 0; text-align: end; }
.staff-operation-drawer .staff-cabinet-notice { position: absolute; inset: auto auto 86px 50%; width: max-content; max-width: calc(100% - 32px); }
.staff-webhook-history { margin-top: 8px; }
.staff-webhook-delivery { border-bottom: 1px solid var(--line); }
.staff-webhook-delivery > summary { display: flex; align-items: center; gap: 9px; padding: 9px 0; cursor: pointer; list-style: none; }
.staff-webhook-delivery > summary::-webkit-details-marker { display: none; }
.staff-webhook-delivery > summary > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.staff-webhook-delivery[open] > summary > svg { transform: rotate(180deg); }
.staff-webhook-diagnostics { display: grid; gap: 10px; padding-bottom: 12px; }
.staff-webhook-diagnostics button { justify-self: start; display: inline-flex; align-items: center; gap: 7px; }
.staff-webhook-attempts { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.staff-webhook-attempts li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; }
.staff-webhook-value { margin: 4px 0 0; padding: 10px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--control); border-radius: 8px; }
.staff-webhook-history ~ button { margin-top: 10px; }
.staff-queue-count { margin-inline-start: 6px; background: var(--active); color: var(--accent-ink); }
:is(.staff-refund-table, .staff-dispute-table) td:nth-child(6) { max-width: 240px; white-space: normal; overflow-wrap: anywhere; }
.staff-payment-footer :is(.staff-refund-reject, .staff-danger-action) { border-color: var(--error-bg); color: var(--error); }
.staff-payment-footer :is(.staff-refund-reject, .staff-danger-action):hover { background: var(--error-bg); }
.staff-dialog:is(.staff-refund-dialog, .staff-dispute-dialog) { width: min(540px, calc(100% - 24px)); border-radius: 22px; box-shadow: var(--panel-shadow); }
.staff-dialog.staff-dispute-decision { width: min(440px, calc(100% - 24px)); }
.staff-dispute-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
:is(.staff-refund-dialog, .staff-dispute-dialog) .staff-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
:is(.staff-refund-dialog, .staff-dispute-dialog) .staff-dialog-header p { margin: 4px 0 0; }
:is(.staff-refund-dialog, .staff-dispute-dialog) textarea { resize: vertical; min-height: 76px; }
:is(.staff-refund-dialog, .staff-dispute-dialog) .form-row small:empty { display: none; }
:is(.staff-refund-choices, .staff-reserve-options, .staff-terminal-types) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
:is(.staff-refund-choice, .staff-reserve-option, .staff-terminal-type) { display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; }
:is(.staff-refund-choice, .staff-reserve-option, .staff-terminal-type):has(:checked) { border-color: var(--accent); background: var(--active); }
:is(.staff-refund-choice, .staff-reserve-option, .staff-terminal-type) input { margin: 0; accent-color: var(--accent); flex: none; }
.staff-amount-input { position: relative; display: block; }
.staff-amount-input .field { width: 100%; padding-right: 34px; }
.staff-amount-input .muted { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); pointer-events: none; }
.service-date { min-width: 0; }
.service-date-trigger { display: flex; align-items: center; gap: 10px; padding-inline: 14px; text-align: start; }
.service-date-trigger svg { flex: none; color: var(--muted); }
@media (max-width: 700px) {
  .staff-operation-drawer .operation-drawer-head { padding: 10px 14px 10px 18px; }
  .staff-payment-content { padding: 18px 18px 24px; }
  .staff-payment-amount { font-size: 32px; }
  .staff-payment-facts { column-gap: 12px; }
  .staff-payment-footer { padding: 12px 18px; }
  .staff-refund-choice { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.staff-operation-drawer[open], dialog.staff-operation-drawer::backdrop { animation: none; }
}

/* Cashier's new payment and history share the same controls as the prototype. */
#app .cashier-new { width: min(100%, 624px); margin-inline: auto; }
#app .cashier-new > .operation-heading { margin-bottom: 4px; }
#app :is(.cashier-form, .cashier-qr) { max-width: none; padding: 28px; }
#app .cashier-form .form-row { margin: 0; }
#app .cashier-form .form-row:has(textarea) { margin-top: 24px; }
.cashier-amount-box { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; padding-bottom: 8px;
  border-bottom: 1.5px solid var(--line-strong); transition: border-color .15s; }
.cashier-amount-box:focus-within { border-color: var(--accent-hi); }
#app .cashier-amount-box input { width: min(100%, 9ch); padding: 0; border: 0; background: none;
  color: var(--title); font-size: 44px; line-height: 1.15; font-weight: 560; font-variant-numeric: tabular-nums; }
#app .cashier-amount-box input:focus-visible { outline: none; }
.cashier-amount-box span { color: var(--muted); font-size: 32px; }
.cashier-description { position: relative; }
#app .cashier-description textarea { padding-right: 66px; resize: vertical; }
.cashier-description .operation-sub { position: absolute; top: 10px; right: 14px; pointer-events: none; }
.cashier-form-actions { margin-top: 26px; }
#app .cashier-form-actions button, #app .cashier-qr-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.cashier-qr-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.cashier-time-pill, .cashier-waiting { display: inline-flex; align-items: center; gap: 8px; }
.cashier-time-pill { border-radius: 999px; padding: 5px 10px; background: var(--subtle); white-space: nowrap; }
.cashier-qr-area { display: grid; justify-items: center; gap: 16px; margin-top: 16px; padding: 20px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--control); text-align: center; }
.cashier-qr-side { display: grid; justify-items: center; gap: 10px; }
#app .cashier-qr canvas { width: min(200px, 56vw); height: auto; }
#app .cashier-qr .qr-wrap { padding: 10px; border-radius: 16px; }
.cashier-ring { width: 14px; height: 14px; border: 2px solid var(--line-strong); border-top-color: var(--accent-hi);
  border-radius: 50%; animation: cashier-wait .8s linear infinite; }
@keyframes cashier-wait { to { transform: rotate(360deg); } }
.cashier-qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.cashier-qr-result, .cashier-qr-facts { display: grid; gap: 7px; justify-items: center; text-align: center; }
.cashier-qr-facts { margin-top: 10px; }
.cashier-history .operation-actions { flex-wrap: wrap-reverse; }
.cashier-history .operation-search { flex: 0 1 280px; }
#app .cashier-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#app .cashier-metrics .overview-metric:first-child { background: linear-gradient(135deg, #5d4cee, #4532d7); color: #fff; }
#app .cashier-metrics .overview-metric:first-child h2 { color: inherit; }
#app .cashier-history .operation-mobile-day { padding: 9px 15px; background: var(--control); }

#app .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.dashboard-grid > * { min-width: 0; }
.staff-overview-period, .staff-overview-heading { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
.staff-overview-heading { min-height: 34px; }
.staff-overview-heading h2 { margin: 0; font-size: 16px; }
.staff-overview-heading a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font-size: 12.5px; }
.staff-overview-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr)); gap: 16px; }
.staff-overview-meta > .staff-block, .staff-merchant-overview .dashboard-grid > .staff-block { align-content: start; }
.staff-overview-facts { width: 100%; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 12px; font-size: 13px; }
.staff-overview-facts dt, .staff-overview-facts dd { min-width: 0; margin: 0; padding-block: 7px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.staff-overview-facts dt { color: var(--muted); }
.staff-overview-facts dd { text-align: right; }
.staff-overview-facts dd a { color: var(--accent-ink); }
.staff-overview-facts [data-negative="true"], .staff-overview-change[data-down="true"] { color: var(--error); }
.staff-overview-change { color: var(--success); font-size: 12px; }
.staff-overview-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-overview-terms, .staff-merchant-overview .operation-table-wrap { width: 100%; }
.staff-overview-terms { display: block; }
.staff-overview-terms th { white-space: nowrap; }
.staff-merchant-heading > .operation-actions { margin-inline-start: auto; }
.staff-merchant-identity { min-width: 0; }
.staff-merchant-identity > div, .staff-merchant-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.staff-merchant-identity h1 { margin: 0; overflow-wrap: anywhere; }
#app .staff-merchant-copy { min-height: 28px; padding: 5px; }
#app .staff-merchant-heading [data-danger="true"], .staff-merchant-pause { color: var(--error); }
.staff-merchant-pause { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; overflow-wrap: anywhere; }
.staff-crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.staff-card-header { display: grid; gap: 14px; min-width: 0; }
.staff-card-content { min-width: 0; }
.dialog-grid.staff-profile-three { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.staff-merchants .operation-toolbar { justify-content: flex-start; }
.staff-merchants .operation-toolbar .operation-search { flex: 0 1 320px; }
.staff-merchant-filters { flex-wrap: wrap; }
.staff-merchant-filters button { display: inline-flex; align-items: center; gap: 6px; }
.staff-merchant-row-name { display: flex; align-items: center; gap: 10px; }
.staff-merchant-row-name .avatar { width: 32px; height: 32px; font-size: 11px; flex: none; }
.staff-merchants .operation-table td:last-child { white-space: nowrap; }
.staff-merchant-page { padding: 12px 16px; justify-content: flex-end; }
.staff-dialog.staff-wide-dialog { width: min(720px, calc(100% - 24px)); }
.staff-dialog.staff-channel-dialog { padding: 22px 24px; border-radius: 20px; box-shadow: var(--panel-shadow); }
@keyframes staff-channel-open { from { opacity: 0; transform: translateY(6px) scale(.98); } }
:is(.staff-channel-dialog, .staff-cashier-dialog, .staff-project-dialog) .staff-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
:is(.staff-channel-dialog, .staff-cashier-dialog, .staff-project-dialog) h2 { margin: 0; font-size: 19px; font-weight: 560; line-height: 1.3; letter-spacing: -.01em; }
:is(.staff-channel-dialog, .staff-cashier-dialog, .staff-project-dialog) .staff-dialog-header p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.staff-channel-dialog .dialog-form { gap: 0; }
.staff-channel-dialog .dialog-actions { gap: 10px; margin-top: 16px; }
:is(.staff-channel-dialog, .staff-cashier-dialog, .staff-project-dialog) .dialog-actions button { min-width: 120px; min-height: 46px; border-radius: 13px; }
.staff-channel-dialog .staff-document-status { margin-top: 8px; }
.staff-channel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.staff-channel-heading h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.staff-channel-modes { display: grid; grid-template-columns: 1fr 1fr; position: relative; gap: 2px; padding: 3px; border-radius: 12px;
  background: var(--control, var(--subtle)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.staff-channel-modes[hidden] { display: none; }
.staff-channel-modes button { z-index: 1; min-height: 28px; padding: 0 11px; border: 0; background: transparent; color: var(--muted);
  border-radius: 9px; font-size: 13px; font-weight: 500; transition: color .2s; }
.staff-channel-modes button:hover, .staff-channel-modes button[aria-pressed="true"] { color: var(--title); }
.staff-channel-thumb { position: absolute; inset: 3px auto 3px 3px; width: calc((100% - 8px) / 2); border-radius: 9px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform .25s cubic-bezier(.3,.7,.3,1); }
.staff-channel-modes[data-routing="2"] .staff-channel-thumb { transform: translateX(calc(100% + 2px)); }
.staff-channel-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--subtle); font-size: 13px; }
.staff-channel-name { display: grid; gap: 3px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.staff-channel-name strong { font-weight: 500; }
.staff-channel-order { display: grid; flex: none; }
.staff-channel-index { flex: 0 0 16px; font-variant-numeric: tabular-nums; }
.staff-channel-order button, .staff-channel-icon { display: grid; place-items: center; padding: 0; border: 0;
  color: var(--muted); background: transparent; }
.staff-channel-order button { height: 15px; width: 16px; }
.staff-channel-order button:disabled { opacity: .35; }
.staff-channel-icon { flex: none; width: 32px; height: 32px; min-height: 32px; border-radius: 8px; }
.staff-channel-order button:hover, .staff-channel-icon:hover { color: var(--ink); }
.staff-channel-icon:hover { background: var(--surface); }
.staff-channel-weight { position: relative; flex: 0 0 84px; }
.staff-channel-weight input { width: 100%; min-height: 32px; padding: 3px 26px 3px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.staff-channel-weight span { position: absolute; inset: 50% 9px auto auto; transform: translateY(-50%); pointer-events: none; }
.staff-channel-total { margin: 4px 0 8px; font-size: 13px; }
.staff-channel-add { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.staff-channel-add select { min-width: 0; flex: 1 1 180px; max-width: 360px; }
.staff-channel-add-button { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 480px) {
  .staff-dialog.staff-channel-dialog { padding: 16px; }
  .staff-channel-row { gap: 6px; padding: 8px; }
  .staff-channel-weight { flex-basis: 52px; }
  .staff-channel-weight input { padding-right: 18px; }
  .staff-channel-weight span { right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .staff-channel-thumb, .staff-channel-dialog .staff-settings-switch, .staff-channel-dialog .staff-settings-switch::after { transition: none; }
}
.staff-cashier-admin { display: grid; gap: 12px; min-width: 0; }
.staff-merchant-users { display: grid; gap: 12px; min-width: 0; }
.staff-merchant-user-pager { justify-content: flex-end; }
#app .staff-merchant-user-table .avatar { flex: 0 0 28px; width: 28px; height: 28px; font-size: 10.5px; }
.staff-merchant-user-table td:last-child { text-align: end; }
.staff-cashier-toolbar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.staff-cashier-card, .staff-cashier-table { min-width: 0; }
#app .staff-cashier-table .avatar { flex: 0 0 28px; width: 28px; height: 28px; font-size: 10.5px; }
.staff-cashier-table td:last-child { text-align: end; }
.staff-cashier-login { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.staff-cashier-menu .operation-popover { display: grid; gap: 2px; width: 242px; padding: 6px; text-align: start; }
.staff-cashier-menu .operation-popover button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 0; text-align: start; }
.staff-cashier-menu .operation-popover button[data-danger="true"], .staff-cashier-feedback { color: var(--error); }
.staff-cashier-feedback:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.staff-cashier-mobile details + details { border-top: 1px solid var(--line); }
.staff-cashier-mobile summary::-webkit-details-marker { display: none; }
.staff-cashier-mobile summary { cursor: pointer; }
.staff-dialog:is(.staff-cashier-dialog, .staff-project-dialog) { width: min(540px, calc(100% - 24px)); padding: 22px 24px; border-radius: 20px;
  box-shadow: var(--panel-shadow); }
.staff-dialog.staff-cashier-dialog[open] { animation: staff-channel-open .25s cubic-bezier(.2,.8,.2,1); }
.staff-dialog.staff-cashier-credential { width: min(440px, calc(100% - 24px)); }
.staff-cashier-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.staff-cashier-optional summary { color: var(--muted); cursor: pointer; font-size: 13px; }
.staff-cashier-optional input { width: 100%; margin-top: 6px; }
.staff-cashier-credential-login { display: flex; justify-content: space-between; gap: 8px; }
.staff-cashier-secret { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px;
  border: 1px solid var(--line); background: var(--subtle); border-radius: 12px; }
.staff-cashier-credential-login code, .staff-cashier-secret code { min-width: 0; overflow-wrap: anywhere; }
.staff-cashier-credential .operation-link { justify-self: start; }
@media (min-width: 901px) { .staff-cashier-card .operation-table-wrap { overflow: visible; } }
@media (max-width: 480px) {
  .staff-dialog:is(.staff-cashier-dialog, .staff-project-dialog) { padding: 16px; }
  .staff-cashier-form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .staff-dialog.staff-cashier-dialog[open] { animation: none; } }
.staff-dialog.staff-merchant-created { width: min(440px, calc(100% - 24px)); }
.staff-merchant-credentials, .staff-merchant-secret { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.staff-merchant-secret { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); }
.staff-merchant-secret .temporary-password { padding: 0; overflow-wrap: anywhere; }
.staff-projects { display: grid; gap: 16px; min-width: 0; }
.staff-project-actions { justify-content: flex-end; }
.staff-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.staff-project-card { display: flex; flex-direction: column; min-width: 0; }
.staff-project-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.staff-project-card h2 { font-size: 16px; overflow-wrap: anywhere; }
.staff-project-avatar { color: var(--project-accent, var(--accent-ink)); background: color-mix(in srgb, currentColor 12%, var(--surface)); }
.staff-project-card .staff-project-facts { flex: 1; padding: 8px 16px 14px; }
.staff-project-card footer { padding: 12px 16px; border-top: 1px solid var(--line); }
.staff-project-resource { display: inline-block; max-width: 100%; padding: 2px 6px; border-radius: 6px; background: var(--subtle); overflow-wrap: anywhere; }
.staff-project-channel { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding-block: 3px; }
.staff-project-channel[data-active="false"] { color: var(--muted); }
.staff-project-channel > span { flex: none; font-size: 12px; }
#app .staff-project-remove { color: var(--error); margin-inline-start: auto; }
.staff-project-archive { padding: 12px 16px 16px; min-width: 0; }
.staff-project-archive-scroll { overflow-x: auto; }
.staff-project-archive .operation-table { min-width: 420px; }
.staff-merchant-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 22px; min-width: 0; }
.staff-settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 90px; }
#app .staff-settings-tab { display: flex; justify-content: flex-start; align-items: center; gap: 10px; min-width: 0; text-align: left; }
#app .staff-settings-tab[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--title); }
.staff-settings-content { min-width: 0; }
.staff-settings-card { min-width: 0; margin: 0; padding: 0; }
.staff-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 14px 18px; }
.staff-settings-heading h2 { font-size: 16px; }
.staff-system-settings { width: min(100%, 680px); }
.staff-system-setting { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  padding: 13px 18px; border-top: 1px solid var(--line); }
.staff-system-setting code { max-width: 100%; overflow-wrap: anywhere; }
.staff-settings-fields { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.staff-settings-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 18px;
  border-top: 1px solid var(--line); }
.staff-settings-row > * { min-width: 0; }
.staff-settings-row .muted { margin: 3px 0 0; overflow-wrap: anywhere; }
.staff-settings-row [data-danger="true"] { color: var(--error); }
.staff-settings-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.staff-settings-field { width: min(110px, 100%); }
.staff-unit-input { position: relative; }
.staff-unit-input input { width: 100%; padding-inline-end: 42px; }
.staff-unit-input > span { position: absolute; inset: 50% 12px auto auto; translate: 0 -50%; pointer-events: none; }
.staff-settings-row .staff-unit-input > span { margin: 0; }
.staff-field-error { display: block; margin-top: 4px; color: var(--error); font-size: 12px; line-height: 1.35; }
.staff-limit-scroll { overflow-x: auto; margin-inline: 16px; border: 1px solid var(--line); border-radius: 12px; }
.staff-limit-table th { white-space: nowrap; }
.staff-limit-table .field { width: 100%; min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.staff-settings-feedback, .staff-settings-hint { padding: 8px 18px 14px; }
.staff-settings-feedback { color: var(--error); }
.staff-settings-feedback button { margin-inline-start: 8px; }
#app .staff-settings-switch, .staff-channel-dialog .staff-settings-switch { position: relative; flex: none; width: 42px; height: 24px; min-height: 24px; padding: 0;
  border-radius: 999px; border: 0; background: var(--line-strong); transition: background .2s; }
#app .staff-settings-switch[aria-checked="true"], .staff-channel-dialog .staff-settings-switch[aria-checked="true"] { background: var(--accent-hi); }
.staff-settings-switch::after { content: ""; position: absolute; inset: 3px auto auto 3px; width: 18px; height: 18px;
  border-radius: 50%; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform .22s cubic-bezier(.3,.7,.3,1.3); }
.staff-settings-switch[aria-checked="true"]::after { transform: translateX(18px); }
.staff-project-type { justify-self: start; }
.staff-project-resources[hidden] { display: none; }
.staff-project-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.staff-project-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.staff-project-choice:has(input:checked) { border-color: var(--accent-hi); background: var(--active); }
.staff-project-choice input { accent-color: var(--accent-hi); }
.staff-project-exact summary { cursor: pointer; color: var(--muted); }
.staff-project-exact .form-row { margin-top: 8px; }
.staff-dialog .form-row[hidden] { display: none; }
@media (max-width: 900px) {
  .staff-merchants .operation-toolbar .operation-search { flex: 1 1 100%; }
  .staff-merchants .operation-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-project-grid { grid-template-columns: minmax(0, 1fr); }
  .staff-merchant-settings { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .staff-settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .staff-settings-row { flex-wrap: wrap; }
}
.dashboard-chart-heading, .dashboard-legend, .dashboard-method > div { display: flex; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap; gap: 10px; }
.dashboard-legend { justify-content: flex-start; margin-top: 5px; font-size: 12.5px; }
.dashboard-legend span { display: inline-flex; gap: 6px; align-items: center; }
.dashboard-legend span::before { content: ""; width: 12px; border-top: 2px solid var(--accent-hi); }
.dashboard-legend span + span::before { border-top: 2px dashed var(--muted); }
.trend-chart { position: relative; height: 260px; margin-top: 10px; --trend-line: light-dark(#5b57e8, #a9a6ff); }
.trend-chart.service-trend { height: 280px; margin-top: 2px; }
.trend-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.trend-axis { font: 11.5px Geologica, system-ui, sans-serif; fill: var(--muted); }
.trend-grid { stroke: var(--line); stroke-width: 1; }
.trend-current, .trend-previous { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trend-current { stroke: var(--trend-line); stroke-width: 2; }
.trend-previous { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.trend-single.trend-current, .trend-dot { fill: var(--trend-line); }
.trend-single.trend-previous { fill: var(--muted); }
.trend-dot { stroke: var(--surface); stroke-width: 2; }
.trend-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.trend-empty { display: grid; height: 100%; place-items: center; text-align: center; }
.trend-tooltip { position: absolute; z-index: 2; pointer-events: none; display: grid; max-width: calc(100% - 8px);
  padding: 8px 10px; border-radius: 10px; color: #fff; background: #5b57e8; font-size: 12.5px; line-height: 1.45;
  transform: translate(-50%, -100%); margin-top: -12px; opacity: 0; transition: opacity .1s; }
.trend-tooltip.is-visible { opacity: 1; }
.trend-tooltip strong { font-weight: 560; font-variant-numeric: tabular-nums; }
.trend-comparison { opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .trend-grow { animation: trend-grow .9s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes trend-grow { from { transform: scaleY(0); } }
.dashboard-method { display: grid; gap: 7px; margin-block: 8px; }
.dashboard-method progress { width: 100%; height: 8px; accent-color: var(--accent-hi); }
.dashboard-balance { display: grid; gap: 5px; padding: 14px 16px; color: #fff; border-radius: 16px;
  background: linear-gradient(135deg, #5d4cee, #4532d7); }
#app .dashboard-balance .quiet { display: flex; align-items: center; justify-content: space-between; justify-self: start; gap: 6px;
  min-height: 34px; background: rgb(255 255 255 / 16%); color: inherit; border-color: transparent; }

@media (max-width: 900px) {
  #app .operation-segment.service-period > .quiet { padding-inline: 8px; font-size: 13px; }
  .service-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  #app .service-presets .quiet { text-align: center; padding-inline: 3px; }
  #app .service-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .service-kpis > :first-child { grid-column: 1 / -1; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .trend-chart, .trend-chart.service-trend { height: 220px; }
  #app .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .dashboard-kpis > :first-child { grid-column: 1 / -1; }
  #app .cashier-new > .operation-heading { display: none; }
  #app :is(.cashier-form, .cashier-qr) { padding: 22px 20px; }
  .cashier-history :is(.operation-actions, .operation-segment) { width: 100%; }
  .cashier-history .operation-search { flex: 1 1 100%; }
  #app .cashier-history .operation-segment button { flex: 1 1 auto; padding-inline: 6px; }
  #app .cashier-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .cashier-metrics .overview-metric:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  #app .cashier-amount-box input { font-size: 40px; }
  .cashier-qr-actions { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .operation-crumbs { display: none; }
  .operation-toolbar { padding: 12px; gap: 8px; }
  .operation-toolbar-right { order: -1; width: 100%; }
  .operation-toolbar .operation-search { flex: 1 1 100%; min-width: 0; }
  .staff-payment-filter-group { flex-basis: 100%; }
  .merchant-period-segment, .operation-columns { display: none; }
  #app .operation-popover { position: fixed; inset: auto 12px calc(72px + env(safe-area-inset-bottom)) 12px; width: auto; }
  .operation-table-wrap, #app .overview-table.operation-table-wrap { display: none; }
  .operation-mobile { display: block; }
  .operation-kpis { gap: 10px; }
  #app .operation-kpis .overview-metric { padding: 14px; }
  .operation-totals { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .operation-pager { padding: 12px 16px; }
}

.merchant-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.merchant-settings-nav { position: sticky; top: 84px; display: grid; gap: 2px; }
.merchant-settings-nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px;
  border-radius: 11px; color: var(--muted); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.merchant-settings-nav a svg { flex: none; }
.merchant-settings-nav a:hover, .merchant-settings-nav a[aria-current="page"] { background: var(--surface); color: var(--title); }
.merchant-settings-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(16 24 40 / 6%); }
.merchant-settings > * { min-width: 0; }
.merchant-mail { padding: 20px 22px; }
.merchant-mail h2 { margin: 0; font-size: 16px; font-weight: 560; color: var(--ink); }
.merchant-mail-intro { max-width: 640px; margin: 3px 0 6px; color: var(--muted); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.merchant-mail-intro strong { color: var(--ink); font-weight: 500; }
.merchant-mail-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.merchant-mail-row:has(+ .merchant-mail-feedback) { padding-bottom: 2px; border: 0; }
.merchant-mail-row strong { color: var(--ink); font-size: 14.5px; font-weight: 500; }
.merchant-mail-row p { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.merchant-mail-switch { position: relative; flex: none; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px;
  background: var(--line-strong); cursor: pointer; transition: background .15s; }
.merchant-mail-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); transition: transform .15s; }
.merchant-mail-switch[aria-checked="true"] { background: var(--success); }
.merchant-mail-switch[aria-checked="true"]::after { transform: translateX(18px); }
.merchant-mail-switch:disabled { opacity: .5; cursor: default; }
.merchant-audit-feedback:empty { display: none; }

.merchant-audit-toolbar { justify-content: space-between; }
.audit-category-chips { flex: 1 1 680px; }
#app .audit-category-select { display: none; }
.merchant-audit-table :is(th, td):nth-child(3) { width: 39%; }
.merchant-audit-mobile-row > svg { flex: none; color: var(--muted); }
.merchant-audit [data-denied="true"], .merchant-audit-drawer [data-denied="true"], .merchant-audit-feedback { color: var(--error); }
.merchant-audit-drawer { padding: 0; }
.merchant-audit-drawer .owner-payment-heading { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.merchant-audit-drawer h2 { margin: 0; font-size: 17px; }
.merchant-audit-drawer-body { padding: 20px; }
.merchant-audit-drawer-body h3 { margin: 0; color: var(--title); font-size: 20px; font-weight: 560; line-height: 1.3; }
.merchant-audit-subject { margin: 4px 0 0; }
.merchant-audit-drawer dl { margin: 16px 0 0; border-block: 1px solid var(--line); }
.merchant-audit-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; }
.merchant-audit-detail-row + .merchant-audit-detail-row { border-top: 1px solid var(--line); }
.merchant-audit-detail-row dt { flex: none; color: var(--muted); }
.merchant-audit-detail-row dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.merchant-audit-detail-row button { display: inline-flex; align-items: center; gap: 4px; }
.merchant-audit-changes { margin-top: 16px; overflow-wrap: anywhere; }
.merchant-audit-changes h4 { margin: 0 0 8px; }
.merchant-audit-changes table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: start; }
.merchant-audit-changes th, .merchant-audit-changes td { padding: 8px; border-bottom: 1px solid var(--line); text-align: start; }
.merchant-audit-changes :is(th, td):first-child { padding-inline-start: 0; }
.merchant-audit-changes :is(th, td):last-child { padding-inline-end: 0; }

@media (max-width: 900px) {
  .audit-category-chips { display: none; }
  #app .audit-category-select { display: revert; }
  #app .merchant-audit-toolbar select { flex: 1 1 145px; min-width: 0; }
}
@media (max-width: 720px) {
  .merchant-settings { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .merchant-settings-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px;
    margin-inline: -16px; padding-inline: 16px; }
  .merchant-settings-nav a { flex: none; min-height: 36px; font-size: 14px; background: var(--surface); }
  .merchant-mail { padding: 16px; }
  #app .topbar .merchant-bell .operation-popover { width: min(380px, calc(100vw - 24px)); }
  .merchant-audit-drawer .owner-payment-heading, .merchant-audit-drawer-body { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .merchant-mail-switch, .merchant-mail-switch::after { transition: none; }
}

.merchant-balance-totals { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.merchant-balance-hero, .merchant-reserve { padding: 22px 24px; border-radius: 20px; }
.merchant-balance-hero {
  color: var(--button-ink);
  background: radial-gradient(300px 200px at 90% 0%, rgb(130 120 255 / 45%), transparent 70%),
    radial-gradient(260px 200px at 0% 100%, rgb(90 160 255 / 25%), transparent 70%), var(--button);
}
.merchant-balance-hero h2, .merchant-reserve h2 { margin: 0; font-size: 13.5px; font-weight: 500; }
.merchant-balance-hero h2 { color: inherit; opacity: .78; }
.merchant-reserve h2 { color: var(--muted); }
.merchant-balance-amount { margin: 6px 0 0; color: var(--title); font-size: 28px; font-weight: 560; line-height: 1.15;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.merchant-balance-hero .merchant-balance-amount { color: inherit; font-size: 34px; }
#app .merchant-balance-hero .merchant-payout-request {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; padding: 0 18px;
  border: 0; border-radius: 12px; background: var(--button-ink); color: var(--button); font-size: 14.5px; font-weight: 500;
}
#app .merchant-balance-hero .merchant-payout-request:hover { opacity: .9; }
.merchant-balance-note { margin: 10px 0 0; opacity: .78; font-size: 12.5px; line-height: 1.45; }
.merchant-reserve p.muted { margin: 8px 0 0; }
.merchant-reserve .operation-link, .merchant-balance-panel-heading .operation-link,
.merchant-payout-hash { display: inline-flex; align-items: center; gap: 5px; }
.merchant-reserve .operation-link { margin-top: 8px; }
.merchant-balance-panel { min-width: 0; overflow: hidden; border-radius: 18px; }
.merchant-balance-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px 12px; }
.merchant-balance-panel-heading h2 { margin: 0; font-size: 16px; font-weight: 560; }
.merchant-balance-project { display: inline-flex; align-items: center; gap: 9px; }
.merchant-balance-project svg { flex: none; color: var(--accent-ink); }
.merchant-balance-total { background: var(--subtle); font-weight: 560; }
.merchant-balance-interactive { cursor: pointer; }
.merchant-balance-interactive:hover { background: var(--subtle); }
.merchant-payout-projects { overflow-wrap: anywhere; }
.merchant-balance-table td[data-positive="true"], .merchant-balance-mobile [data-positive="true"] { color: var(--success); }
.merchant-balance-empty { text-align: center; }
.merchant-balance-empty p { margin: 4px 0 0; }
.merchant-balance-history-gap { margin: 0; padding: 8px 20px; font-size: 13px; }
.merchant-balance-more { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--line); }
.merchant-balance-mobile, .merchant-limits-mobile { display: none; }

.staff-dialog.merchant-balance-dialog { width: min(460px, calc(100vw - 24px)); border-radius: 20px; }
.merchant-balance-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.merchant-balance-dialog-heading h2 { margin: 0; color: var(--title); font-size: 18px; font-weight: 560; }
.merchant-balance-dialog > .dialog-fields { margin-top: 14px; }
.merchant-balance-dialog-close { margin-top: 16px; }
.merchant-payout-copy { overflow-wrap: anywhere; }
.merchant-payout-drawer { padding: 0; }
.merchant-payout-drawer .merchant-balance-dialog-heading { position: sticky; top: 0; z-index: 1; padding: 14px 20px;
  background: var(--surface); border-bottom: 1px solid var(--line); }
.merchant-payout-drawer-body { padding: 20px; }
.merchant-payout-drawer-body .merchant-balance-amount { margin-top: 12px; }
.merchant-payout-drawer-body h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 560; }
.merchant-balance-facts { margin: 0; }
.merchant-balance-facts > div { display: flex; align-items: start; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line); }
.merchant-balance-facts dt { color: var(--muted); }
.merchant-balance-facts dd { min-width: 0; margin: 0; text-align: end; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.merchant-balance-facts dd button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

.merchant-requisites { display: grid; gap: 16px; min-width: 0; }
.merchant-wallet-hint, .merchant-wallet-warning { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px;
  border-radius: 12px; color: var(--accent-ink); background: var(--active); font-size: 13.5px; line-height: 1.45; }
.merchant-wallet-hint svg, .merchant-wallet-warning svg { flex: none; margin-top: 2px; }
.merchant-wallet-warning { color: var(--warning); background: var(--warning-bg); }
.merchant-wallet-warning[data-rejected="true"] { color: var(--error); background: var(--error-bg); }
.merchant-wallet-warning strong, .merchant-wallet-hint strong { font-weight: 560; }
.merchant-wallet-warning p { margin: 3px 0 0; overflow-wrap: anywhere; }
.merchant-wallet-panel, .merchant-limits { min-width: 0; padding: 20px 22px; }
.merchant-wallet-panel > header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.merchant-wallet-panel h2, .merchant-limits h2 { margin: 0; font-size: 16px; font-weight: 560; }
.merchant-wallet-panel header p { margin: 4px 0 0; font-size: 13.5px; }
.merchant-wallet-address { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--control); overflow-wrap: anywhere; }
.merchant-wallet-address > span { min-width: 0; }
.merchant-wallet-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 13px; }
.merchant-wallet-panel .merchant-wallet-warning { margin-top: 14px; }
.merchant-wallet-form .form-row { gap: 5px; }
.merchant-wallet-form .auth-field-error { margin: 0; }
.merchant-wallet-factor { min-width: 0; margin: 0; padding: 0; border: 0; }
.merchant-wallet-factor legend { margin-bottom: 6px; padding: 0; }
.merchant-wallet-digits { display: grid; grid-template-columns: repeat(6, minmax(0, 42px)); gap: 6px; }
.merchant-wallet-digits .field { width: 100%; min-width: 0; padding: 0; text-align: center; font-size: 18px; }
.merchant-wallet-factor .auth-field-error { margin-top: 5px; }
.merchant-limits h2 { margin-bottom: 12px; }
#app .merchant-limits-table :is(th, td):first-child { padding-inline-start: 0; }
#app .merchant-limits-table :is(th, td):last-child { padding-inline-end: 0; }

@media (max-width: 1050px) {
  .merchant-balance-payouts :is(th:nth-last-child(2), .merchant-payout-proof) { display: none; }
}
@media (max-width: 900px) {
  .merchant-balance-totals { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .merchant-balance-payouts :is(th:nth-last-child(3), .merchant-payout-destination) { display: none; }
}
@media (max-width: 720px) {
  .merchant-balance-hero, .merchant-reserve, .merchant-wallet-panel, .merchant-limits { padding: 16px; }
  .merchant-balance-panel-heading { padding: 14px 16px 8px; }

  #app :is(.merchant-balance-table, .merchant-limits-table) { display: none; }
  .merchant-balance-mobile, .merchant-limits-mobile { display: block; }
  .merchant-balance-mobile .operation-mobile-row { color: var(--ink); }
  .merchant-balance-mobile .operation-mobile-value { white-space: normal; text-align: end; }
  .merchant-limits-mobile > div { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-top: 1px solid var(--line); padding: 9px 0; }
  .merchant-limits-mobile > div > span:last-child { display: grid; gap: 3px; text-align: end; }
  .merchant-payout-drawer .merchant-balance-dialog-heading, .merchant-payout-drawer-body { padding-inline: 16px; }
}

.merchant-profile-panel { min-width: 0; padding: 20px 22px; }
.merchant-profile-panel h2 { margin: 0; font-size: 16px; font-weight: 560; }
.merchant-profile-panel .muted { overflow-wrap: anywhere; }
.merchant-profile-hint { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; }
.merchant-profile-facts { display: grid; margin: 10px 0 14px; }
.merchant-profile-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 34px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.merchant-profile-facts dt { color: var(--muted); font-size: 13.5px; }
.merchant-profile-facts dd { min-width: 0; margin: 0; font-size: 14.5px; text-align: end; overflow-wrap: anywhere; }
.merchant-profile-copy { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.merchant-profile-copy .quiet { min-height: 28px; padding: 3px 6px; }
.merchant-profile-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.merchant-profile-options .form-row { min-width: 0; align-content: start; gap: 5px; }
.merchant-profile-options .field { min-width: 0; width: 100%; }
.merchant-profile-options .muted { font-size: 12.5px; }
.merchant-profile-form > button { margin-top: 18px; }
.merchant-security-feedback:empty { display: none; }

.merchant-profile-heading, .merchant-security-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.merchant-security-line + .merchant-security-line { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.merchant-security-line > div, .merchant-session-details { min-width: 0; }
.merchant-security-line .muted { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.merchant-security-line > button, .merchant-profile-heading > button { flex: none; }
.merchant-factor-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.merchant-profile-badge[data-status=""] { color: var(--accent-ink); background: var(--active); }
.merchant-session-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.merchant-session-row:last-child { padding-bottom: 0; border-bottom: 0; }
.merchant-session-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px;
  color: var(--accent-ink); background: var(--active); }
.merchant-session-details { flex: 1; overflow-wrap: anywhere; }
.merchant-session-details > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.merchant-session-details strong { font-size: 14.5px; font-weight: 500; }
.merchant-session-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px;
  margin-top: 3px; color: var(--muted); font-size: 13px; }
#app .merchant-session-end { flex: none; border: 0; color: var(--error); }
.merchant-login-history { margin-top: 10px; }
#app .merchant-login-history :is(th, td):first-child { padding-inline-start: 0; }
#app .merchant-login-history :is(th, td):last-child { padding-inline-end: 0; }
.merchant-login-history-mobile { display: none; }

.staff-dialog.merchant-security-dialog { width: min(440px, calc(100vw - 24px)); border-radius: 20px; }
.merchant-security-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.merchant-security-dialog > header h2 { margin: 0; font-size: 18px; font-weight: 560; }
.merchant-security-dialog > header p, .merchant-security-step { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; }
.merchant-security-step { margin: 0 0 14px; }
.merchant-security-form { display: grid; gap: 12px; }
.merchant-security-form .form-row { gap: 5px; }
.merchant-security-form .auth-password { position: relative; }
.merchant-security-form .auth-password .field { width: 100%; padding-inline-end: 44px; }
.merchant-security-form .auth-password-toggle {
  position: absolute; top: 50%; inset-inline-end: 4px; transform: translateY(-50%); display: grid;
  place-items: center; width: 36px; min-height: 34px; padding: 0; border: 0; color: var(--muted);
}
.merchant-security-form .auth-requirements { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12.5px; }
.merchant-security-form .auth-requirements li { display: flex; align-items: center; gap: 6px; }
.merchant-security-form .auth-requirements li[data-met="true"] { color: var(--success); }
.merchant-security-form .auth-field-error { margin: 0; }
.merchant-security-factor { min-width: 0; margin: 0; padding: 0; border: 0; }
.merchant-security-factor legend { margin-bottom: 6px; padding: 0; font-size: 13.5px; }
.merchant-security-factor .auth-field-error { margin-top: 5px; }
.merchant-security-form > button { justify-self: end; }
.merchant-security-dialog-body > button { display: block; margin-inline-start: auto; }
.merchant-checkout-display fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.merchant-checkout-display legend { margin-bottom: 12px; font-weight: 560; }
.merchant-checkout-display fieldset label { display: flex; align-items: center; gap: 8px; }
.merchant-checkout-display .dialog-fields > p { margin: 0; }
.merchant-checkout-display-button { display: inline-flex; align-items: center; gap: 6px; }
.merchant-project-mobile:has(.merchant-checkout-display-button) { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.merchant-project-mobile .merchant-checkout-display-button { margin-inline: 12px; }
.merchant-security-enrollment { display: grid; justify-items: center; gap: 8px; margin-bottom: 14px; }
.merchant-security-enrollment .qr-wrap { margin: 0; }
.merchant-security-enrollment canvas { width: 172px; height: 172px; }
.merchant-security-key { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
  width: 100%; padding: 7px; border-radius: 10px; background: var(--control); overflow-wrap: anywhere; text-align: center; }
.merchant-security-enrollment p { margin: 0; font-size: 12.5px; text-align: center; }

@media (max-width: 720px) {
  .merchant-profile-panel { padding: 16px; }
  .merchant-profile-facts, .merchant-profile-options { grid-template-columns: minmax(0, 1fr); }
  .merchant-profile-heading, .merchant-security-line { align-items: flex-start; flex-wrap: wrap; gap: 9px; }
  #app .merchant-login-history { display: none; }
  .merchant-login-history-mobile { display: grid; margin-top: 8px; }
  .merchant-login-history-mobile .operation-mobile-row { padding-inline: 0; }
}

.merchant-team-panel { min-width: 0; border-radius: 18px; }
.merchant-team-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; padding: 17px 20px 12px; }
.merchant-team-heading h2 { margin: 0; font-size: 16px; font-weight: 560; }
.merchant-team-heading button, .merchant-team-dialog .dialog-actions button { display: inline-flex; align-items: center; gap: 6px; }
.merchant-team-table td { overflow-wrap: anywhere; }
.merchant-team-table td strong, .merchant-team-mobile-row strong { font-weight: 500; }
.merchant-team-table .operation-sub, .merchant-team-mobile-row .operation-sub { display: block; }
.merchant-team-owner { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px;
  background: var(--active); color: var(--accent-ink); font-size: 12px; }
.merchant-team-factor { display: inline-flex; align-items: center; gap: 4px; color: var(--success); white-space: nowrap; }
.merchant-team-actions { width: 1%; }
.merchant-team-menu .operation-popover { width: min(290px, calc(100vw - 24px)); padding: 6px; }
.merchant-team-menu .operation-popover button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px;
  padding: 8px 10px; border: 0; text-align: start; }
.merchant-team-menu .operation-popover button svg { flex: none; }
.merchant-team-menu [data-danger="true"] { color: var(--error); }
.merchant-team-menu-divider { margin: 5px 4px; border-top: 1px solid var(--line); }
.merchant-team-mobile { display: none; }
.merchant-team-matrix-scroll { overflow-x: auto; padding-inline: 20px; }
.merchant-team-matrix { width: 100%; min-width: 560px; border-collapse: collapse; }
.merchant-team-matrix :is(th, td) { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: center;
  vertical-align: middle; font-size: 13px; }
.merchant-team-matrix th { color: var(--muted); font-weight: 500; }
.merchant-team-matrix tr > th:first-child { position: sticky; left: 0; z-index: 1; min-width: 145px;
  padding-inline: 0 12px; color: var(--ink); text-align: start; background: var(--surface); }
.merchant-team-matrix tbody tr:last-child :is(th, td) { border-bottom: 0; }
.staff-dialog.merchant-team-dialog { width: min(520px, calc(100vw - 24px)); border-radius: 20px; }
.staff-dialog.merchant-team-confirm { width: min(440px, calc(100vw - 24px)); }
.merchant-team-dialog .staff-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.merchant-team-dialog .staff-dialog-header h2 { margin: 0; font-size: 18px; }
.merchant-team-dialog .staff-dialog-header p { margin: 5px 0 14px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.merchant-team-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.merchant-team-fieldset legend { margin-bottom: 6px; padding: 0; font-size: 13.5px; font-weight: 500; }
.merchant-team-role-options, .merchant-team-project-choices { display: grid; gap: 6px; }
.merchant-team-role-option { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; }
.merchant-team-role-option:has(:checked) { background: var(--active); box-shadow: inset 0 0 0 1px var(--accent); }
.merchant-team-dialog input:is([type="radio"], [type="checkbox"]) { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.merchant-team-role-option strong { font-size: 14px; font-weight: 500; }
.merchant-team-scope-options { display: flex; flex-wrap: wrap; gap: 9px 18px; }
.merchant-team-project-choices { margin-top: 10px; }
.merchant-team-dialog .staff-field-error { margin: 0; }
.merchant-team-credential { min-width: 0; }
.merchant-team-credential p { margin: 0 0 4px; font-size: 13px; }
.merchant-team-credential > div { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border-radius: 10px; background: var(--control); }
.merchant-team-credential code { min-width: 0; overflow-wrap: anywhere; }
.merchant-team-credential-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  border-radius: 12px; color: var(--warning); background: var(--warning-bg); }
.merchant-team-credential-note svg { flex: none; }
.merchant-team-credential-note p { margin: 4px 0 0; }
.merchant-team-copy-feedback:empty { display: none; }
@media (max-width: 1100px) {
  #app .merchant-team-table :is(td, th):nth-child(4) { display: none; }
}
@media (max-width: 720px) {
  #app .merchant-team-table { display: none; }
  .merchant-team-heading { padding: 14px 16px 10px; }
  .merchant-team-mobile { display: grid; }
  .merchant-team-mobile-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px; align-items: center; padding: 11px 16px; overflow-wrap: anywhere; }
  .merchant-team-mobile-row + .merchant-team-mobile-row { border-top: 1px solid var(--line); }
  .merchant-team-mobile-row .payment-pill { white-space: normal; }
  .merchant-team-matrix-scroll { padding-inline: 16px; }
}

/* Native dialogs and popovers keep their top-layer position until the exit transition ends. */
:root:has(#app:is([data-realm="merchant"], [data-realm="service"])):has(dialog:modal) { overflow: hidden; }
:where(:root:has(#app:is([data-realm="merchant"], [data-realm="service"]))) dialog:is(.staff-dialog, .service-export):not(.developer-webhook-drawer, .staff-cashier-dialog) {
  border-radius: 20px;
  box-shadow: var(--panel-shadow);
  --dialog-rest: translateY(8px) scale(.98);
  --dialog-enter: var(--dialog-rest);
  --dialog-in: .2s;
  --dialog-out: .2s;
  --dialog-ease: ease;
}
:where(:root:has(#app[data-realm="merchant"])) dialog.staff-dialog:not(.developer-webhook-drawer, .staff-wide-dialog, .owner-search) {
  max-width: min(520px, 100%); }
:where(:root:has(#app[data-realm="service"])) dialog:is(.staff-dialog, .service-export):not(.staff-wide-dialog, .staff-cashier-dialog) {
  max-width: min(540px, 100%);
  --dialog-rest: translateY(2dvh) scale(.98);
  --dialog-enter: translateY(3dvh) scale(.98);
  --dialog-in: .25s;
  --dialog-out: .16s;
  --dialog-ease: cubic-bezier(.2,.8,.2,1);
}
:where(:root:has(#app[data-realm="merchant"])) dialog:is(.owner-payment-card:not(.staff-operation-drawer), .developer-webhook-drawer) {
  width: min(480px, 100vw);
  --drawer-motion: .25s cubic-bezier(.2,.7,.2,1);
}
:where(:root:has(#app:is([data-realm="merchant"], [data-realm="service"]))) dialog:is(.staff-dialog, .service-export):not(.developer-webhook-drawer, .staff-cashier-dialog)::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(6px);
}
@media (max-width: 600px) {
  :where(:root:has(#app[data-realm="merchant"])) dialog.staff-dialog:not(.developer-webhook-drawer, .staff-cashier-dialog, .owner-search) {
    position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 92dvh;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    --dialog-rest: translateY(24px);
  }
  :where(:root:has(#app[data-realm="merchant"])) dialog.staff-dialog:not(.developer-webhook-drawer) .dialog-actions button { flex: 1; min-width: 0; }
  :where(:root:has(#app[data-realm="merchant"])) dialog:is(.owner-payment-card:not(.staff-operation-drawer), .developer-webhook-drawer) { width: 100vw; }
}
@media (min-width: 601px) and (max-width: 900px) {
  :where(:root:has(#app[data-realm="merchant"])) dialog.staff-dialog:not(.developer-webhook-drawer) { max-height: calc(100dvh - 48px); }
}
@media (prefers-reduced-motion: no-preference) {
  dialog:not([open]), dialog:not([open])::backdrop,
  .owner-filter-popup:not(:popover-open), .owner-filter-popup:not(:popover-open)::backdrop { pointer-events: none; }
  :where(:root:has(#app:is([data-realm="merchant"], [data-realm="service"]))) dialog:is(.staff-dialog, .service-export):not(.developer-webhook-drawer, .staff-cashier-dialog) {
    opacity: 0;
    transform: var(--dialog-rest);
    transition: transform var(--dialog-out) ease, opacity var(--dialog-out) ease,
      display var(--dialog-out) allow-discrete, overlay var(--dialog-out) allow-discrete;
  }
  :where(:root:has(#app:is([data-realm="merchant"], [data-realm="service"]))) dialog:is(.staff-dialog, .service-export):not(.developer-webhook-drawer, .staff-cashier-dialog)[open] {
    opacity: 1;
    transform: none;
    transition-duration: var(--dialog-in);
    transition-timing-function: var(--dialog-ease);
  }
  :where(:root:has(#app[data-realm="merchant"])) dialog:is(.owner-payment-card:not(.staff-operation-drawer), .developer-webhook-drawer) {
    transform: translateX(100%);
    transition: transform var(--drawer-motion), display .25s allow-discrete, overlay .25s allow-discrete;
  }
  :where(:root:has(#app[data-realm="merchant"])) dialog:is(.owner-payment-card:not(.staff-operation-drawer), .developer-webhook-drawer)[open] { transform: none; }
  :where(:root:has(#app[data-realm="merchant"])) dialog:is(.owner-payment-card, .staff-dialog)::backdrop,
  :where(:root:has(#app[data-realm="service"])) dialog:is(.staff-dialog:not(.staff-cashier-dialog), .service-export)::backdrop,
  .owner-filter-popup::backdrop {
    opacity: 0;
    transition: opacity .2s ease, display .2s allow-discrete, overlay .2s allow-discrete;
  }
  :where(:root:has(#app[data-realm="merchant"])) dialog:is(.owner-payment-card, .staff-dialog)[open]::backdrop,
  :where(:root:has(#app[data-realm="service"])) dialog:is(.staff-dialog:not(.staff-cashier-dialog), .service-export)[open]::backdrop,
  .owner-filter-popup:popover-open::backdrop { opacity: 1; }
  .owner-filter-popup {
    --filter-offset: -4px;
    opacity: 0;
    transform: translateY(var(--filter-offset));
    transition: opacity .16s ease, transform .16s ease, display .16s allow-discrete, overlay .16s allow-discrete;
  }
  .owner-filter-popup:popover-open { opacity: 1; transform: none; }
  @media (max-width: 700px) { .owner-filter-popup { --filter-offset: 24px; } }
  @starting-style {
    :where(:root:has(#app:is([data-realm="merchant"], [data-realm="service"]))) dialog:is(.staff-dialog, .service-export):not(.developer-webhook-drawer, .staff-cashier-dialog)[open] {
      opacity: 0;
      transform: var(--dialog-enter);
    }
    :where(:root:has(#app[data-realm="merchant"])) dialog:is(.owner-payment-card:not(.staff-operation-drawer), .developer-webhook-drawer)[open] { transform: translateX(100%); }
    :where(:root:has(#app[data-realm="merchant"])) dialog:is(.owner-payment-card, .staff-dialog)[open]::backdrop,
    :where(:root:has(#app[data-realm="service"])) dialog:is(.staff-dialog:not(.staff-cashier-dialog), .service-export)[open]::backdrop,
    .owner-filter-popup:popover-open::backdrop { opacity: 0; }
    .owner-filter-popup:popover-open { opacity: 0; transform: translateY(var(--filter-offset)); }
  }
}

.staff-cabinet-notice { position: fixed; inset: auto auto 80px 50%; z-index: 30; width: max-content;
  max-width: calc(100vw - 32px); padding: 11px 16px; border: 0; border-radius: 12px; font-size: 14px;
  color: white; background: var(--accent); box-shadow: var(--panel-shadow); pointer-events: none;
  display: flex; align-items: center; gap: 9px; overflow-wrap: anywhere; transform: translateX(-50%); }
.staff-cabinet-notice svg { flex: none; }
.staff-cabinet-notice[data-error="true"] { background: #a91e35; }
:where(:root:has(#app[data-realm="merchant"])) .staff-cabinet-notice { bottom: 72px; }
@media (max-width: 900px) {
  :where(:root:has(#app[data-realm="merchant"])) .staff-cabinet-notice { bottom: calc(190px + env(safe-area-inset-bottom)); }
  :where(:root:has(#app[data-realm="service"])) .staff-cabinet-notice { bottom: calc(130px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .staff-cabinet-notice { --toast-in: .3s cubic-bezier(.2,.8,.2,1); --toast-exit: 6px;
    opacity: 1; transition: opacity .2s ease, transform .2s ease, display .2s allow-discrete; }
  :where(:root:has(#app[data-realm="merchant"])) .staff-cabinet-notice { --toast-in: .2s ease; --toast-exit: 10px; }
  .staff-cabinet-notice:not([hidden]) { transition: opacity var(--toast-in), transform var(--toast-in); }
  .staff-cabinet-notice[hidden] { opacity: 0; transform: translate(-50%, var(--toast-exit)); }
  @starting-style {
    .staff-cabinet-notice:not([hidden]) { opacity: 0; transform: translate(-50%, 10px); }
  }
}