/* OmniFi design system. One entry point; each component owns its defaults.
   Product domains live in the top bar; tasks live in the contextual sidebar. */
@layer tokens, base, shell, components, pages, responsive;

@layer tokens {
  :root {
    color-scheme: light;
    --brand-600: #2868f0;
    --brand-500: #4387ff;
    --brand-700: #2056ca;
    --brand-cyan: #4bbaff;
    --accent-violet: #8279e6;
    --ink-900: #203f6d;
    --text-700: #425d7e;
    --text-muted: #566f8f;
    --surface-page: #f1f6fd;
    --surface-card: rgba(255,255,255,.92);
    --surface-solid: #fff;
    --surface-glass: rgba(255,255,255,.76);
    --surface-subtle: #f4f8fe;
    --line-soft: #d6e4f4;
    --line-control: #7f95b0;
    --success: #117960;
    --warning: #89600c;
    --danger: #b33142;
    --radius-card: 16px;
    --radius-control: 10px;
    --shadow-card: 0 7px 24px rgba(43,83,139,.035);
    --shadow-float: 0 20px 64px rgba(43,83,139,.14);
    --sidebar-width: 216px;
    --identity-height: 51.2px;
    --product-height: 56px;
    --shell-height: calc(var(--identity-height) + var(--product-height));
    --shell-gutter: 24px;
    --workbench-width: calc(50% + 800px);
    --workbench-gutter: clamp(20px,2.75vw,52px);
    --space-section: 24px;
    --panel-padding: 24px;
    --panel-radius: 16px;
    --control-height: 42px;
    --button-padding: 10px 16px;
    /* Compatibility aliases for the retained business screens. */
    --blue: var(--brand-600);
    --blue-light: #eaf1ff;
    --cyan: var(--brand-cyan);
    --violet: var(--accent-violet);
    --ink: var(--ink-900);
    --text: var(--text-700);
    --muted: var(--text-muted);
    --bg: var(--surface-page);
    --line: var(--line-soft);
    --glass: var(--surface-glass);
    --green: var(--success);
    --amber: var(--warning);
    --red: var(--danger);
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; scroll-padding-top: calc(var(--shell-height) + 24px); }
  body { margin: 0; background: var(--surface-page); color: var(--ink); font: 14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing: antialiased; }
  button, input, select, textarea { font: inherit; }
  button, a, select, summary { cursor: pointer; }
  button { border: 0; background: none; color: inherit; }
  button:disabled, [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
  a { color: inherit; text-decoration: none; }
  img, svg, canvas { max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, p { overflow-wrap: break-word; }
  h1 { font-size: 29px; font-weight: 650; letter-spacing: -.7px; line-height: 1.35; margin: 0 0 8px; }
  h2 { font-size: 18px; font-weight: 650; line-height: 1.45; margin: 0; }
  h3 { font-size: 15px; font-weight: 600; line-height: 1.5; margin: 0; }
  p { margin: 0; }
  small { font-size: 12px; }
  :focus-visible { outline: 3px solid #2868f0; outline-offset: 3px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 2px; }
  [hidden], .hidden { display: none !important; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; left: 16px; top: -100px; background: var(--ink); color: white; padding: 12px 20px; border-radius: 8px; z-index: 100; }
  .skip-link:focus { top: 12px; }
  .icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  i[data-i] { display: inline-flex; align-items: center; }
  .amount, .balance-total, .metric strong, .stat b, .exchange-result { font-variant-numeric: tabular-nums; }
}

@layer shell {
  /* Two full-width rows: identity/tools above, stable product navigation below. */
  #header { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--shell-height); min-width: 0; background: var(--surface-solid); }
  .identity-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--identity-height); padding: 0 var(--shell-gutter); color: #fff; background: var(--brand-600); }
  .shell-brand { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
  .brand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 44px; gap: 6.4px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .brand-mark { display: block; width: 39.2px; height: 28.8px; object-fit: contain; }
  .brand-word { font-size: 24px; line-height: 1; font-weight: 740; letter-spacing: -.72px; color: #fff; }
  .brand-word > span { color: inherit; }
  .product-bar { height: var(--product-height); padding: 0; background: var(--surface-solid); border-bottom: 1px solid var(--line); }
  .global-nav { display: flex; align-items: stretch; width: 100%; max-width: var(--workbench-width); margin-inline: auto; padding-inline: var(--workbench-gutter); height: 100%; min-width: 0; gap: 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #bdcff0 transparent; scroll-padding-inline: 8px; }
  .global-nav::-webkit-scrollbar { height: 3px; }
  .global-nav::-webkit-scrollbar-thumb { border-radius: 3px; background: #bdcff0; }
  .global-nav-item { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; position: relative; gap: 8px; padding: 0 24px 0 var(--nav-leading,24px); min-width: 44px; min-height: 44px; color: #000; font-size: 15px; font-weight: 500; white-space: nowrap; border-radius: 0; }
  .global-nav-item:first-child { --nav-leading: 0px; --nav-underline-left: 0px; }
  .global-nav-item .icon { width: 18px; height: 18px; color: #607d9e; }
  .global-nav-item:hover { background: #f5f8fd; color: #000; }
  .global-nav-item.active { background: linear-gradient(0deg,#edf4ff,transparent); color: #000; font-weight: 650; }
  .global-nav-item.active .icon { color: var(--blue); }
  .global-nav-item.active::after { content: ""; position: absolute; bottom: 0; height: 3px; left: var(--nav-underline-left,18px); right: 18px; background: var(--blue); border-radius: 3px 3px 0 0; }
  .global-nav-item:focus-visible { outline: 3px solid var(--brand-700); outline-offset: -5px; }
  .top-actions { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; gap: 8px; }
  .header-search { --search-width-base: clamp(184px,20vw,280px); --search-width: calc(var(--search-width-base) * 2 / 3); display: flex; align-items: center; justify-content: flex-start; flex: 0 1 auto; position: relative; isolation: isolate; width: max(44px,var(--search-width)); min-height: 44px; min-width: 44px; padding: 0 12px; color: #fff; border: 0; border-radius: 8px; background: transparent; }
  .header-search::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(100%,var(--search-width)); height: 35.2px; box-sizing: border-box; border: 1px solid #ffffff66; border-radius: 8px; background: #ffffff16; pointer-events: none; }
  .identity-bar .icon { width: 16px; height: 16px; }
  .header-search .icon { width: 18px; height: 18px; stroke-width: 1.7; }
  .utility-help .icon { width: 22px; height: 22px; stroke-width: 1.7; }
  .header-search:hover::before { background: #ffffff20; }
  .header-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; position: relative; width: 44px; height: 44px; border-radius: 10px; color: #fff; }
  .header-icon:hover { background: #ffffff20; }
  .header-icon .dot { position: absolute; top: 8px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: #ffbe84; box-shadow: 0 0 0 2px var(--brand-600); }
  .user-chip { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 10px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 500; }
  .user-chip:hover { background: #ffffff20; }
  .user-chip > div { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-chip small { display: block; color: #fff; font-size: 12px; font-weight: 400; }
  .avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #cfe0f9; border-radius: 50%; background: linear-gradient(140deg,#fff,#dceaff); color: var(--brand-700); font-weight: 600; }
  .role-tag { padding: 4px 9px; border-radius: 6px; border: 1px solid #ffffff59; color: #fff; font-size: 12px; white-space: nowrap; background: #ffffff12; }
  .role-tag.admin { color: #fff; background: #ffffff20; border-color: #ffffff80; }
  .role-switch { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #ffffff70; border-radius: 9px; color: #fff; font-size: 12px; line-height: 1.4; white-space: nowrap; }
  .role-switch:hover { background: #ffffff20; }
  .identity-bar :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  #sidebar { position: fixed; top: var(--shell-height); left: 0; bottom: 0; width: var(--sidebar-width); z-index: 25; display: flex; flex-direction: column; background: rgba(255,255,255,.94); border-right: 1px solid var(--line); }
  .nav-context { display: flex; align-items: center; gap: 10px; padding: 20px 22px 8px; }
  .context-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--brand-700); background: linear-gradient(140deg,#fff,#e0edff); border: 1px solid #dce8f9; border-radius: 9px; }
  .context-icon .icon { width: 18px; height: 18px; }
  .nav-context strong { color: var(--ink); font-size: 14px; font-weight: 650; }
  .nav-context small { display: block; color: var(--muted); font-size: 12px; }
  .nav-scroll { flex: 1; overflow-y: auto; padding: 0 10px 18px; scrollbar-width: thin; scrollbar-color: #c8d7ea transparent; }
  .nav-caption { padding: 18px 13px 7px; color: var(--muted); font-size: 12px; font-weight: 500; }
  .nav-item { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; margin: 3px 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--text); font-size: 14px; text-align: left; }
  .nav-item .icon { width: 18px; height: 18px; color: #607b9c; }
  .nav-item:hover { background: #f1f6fd; }
  .nav-item.active { background: #eaf2ff; border-color: #d7e6fc; color: var(--brand-700); font-weight: 600; }
  .nav-item.active .icon { color: var(--blue); }
  .nav-indicator { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--blue); }
  .sidebar-common { border-top: 1px solid var(--line); margin-top: 20px; }
  .nav-foot { padding: 14px 17px; border-top: 1px solid var(--line); }
  .nav-foot a { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text); font-size: 12px; border-radius: 7px; }
  .nav-foot a:hover { color: var(--blue); }
  .nav-foot a .icon { width: 17px; height: 17px; }
  .nav-foot a .icon:last-child { margin-left: auto; }
  .nav-foot p { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .layout { min-width: 0; min-height: 100vh; margin-left: 0; padding-top: var(--shell-height); }
  .has-sidebar .layout { margin-left: var(--sidebar-width); }
  main { min-width: 0; max-width: 1600px; margin: auto; padding: 25px var(--page-gutter,28px) 28px; }
  main.workbench-content { --page-gutter: var(--workbench-gutter); max-width: var(--workbench-width); }
  .page-title, .page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
  .page-title p, .subtitle { font-size: 14px; color: var(--muted); line-height: 1.8; }
  .overview-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 16px; }
  .overview-toolbar p { flex: 1 1 280px; min-width: 0; font-size: 14px; color: var(--muted); line-height: 1.8; }
  .overview-toolbar > .actions { flex: 0 0 auto; }
  .eyebrow { color: var(--brand-700); font-size: 12px; letter-spacing: 2px; margin-bottom: 8px; }
  main.workbench-content + footer { --footer-gutter: var(--workbench-gutter); max-width: var(--workbench-width); }
  footer { max-width: 1600px; margin: auto; padding: 0 var(--footer-gutter,28px) 26px; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 12px; }
  .mobile-menu, .context-menu-toggle, .nav-scrim { display: none; }
}

@layer components {
  /* Surfaces, typography and shared interactions. */
  .tool-return { margin-bottom: 16px; }
  .page-search-results { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; margin-top: 16px; }
  .page-search-result { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 52px; padding: 10px 14px; border-radius: 9px; text-align: left; background: var(--surface-subtle); }
  .page-search-result:hover, .page-search-result:focus-visible { background: var(--blue-light); }
  .page-search-result span { color: var(--muted); font-size: 13px; }

  .panel { min-width: 0; padding: var(--panel-padding); border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--surface-card); box-shadow: var(--shadow-card); }
  .glass { border: 1px solid rgba(255,255,255,.96); border-radius: var(--radius-card); background: var(--surface-glass); box-shadow: 0 0 0 1px #dbe6f46b, var(--shadow-card); backdrop-filter: blur(14px); }
  .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
  .panel-head h2 { color: var(--ink); }
  .section { margin-top: var(--space-section); }
  .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-height); padding: var(--button-padding); border: 1px solid var(--line-control); border-radius: var(--radius-control); background: #fff; color: var(--text); font-size: 14px; font-weight: 550; line-height: 1.4; white-space: nowrap; transition: background .16s,border-color .16s,box-shadow .16s; }
  .button:hover:not(:disabled) { border-color: #81a4dc; background: #f6f9ff; box-shadow: 0 3px 9px #2868f00b; }
  .button.primary { color: #fff; border-color: var(--brand-600); background: linear-gradient(135deg,#2868f0,#245fde); box-shadow: 0 4px 12px #2868f024,inset 0 1px #ffffff26; }
  .button.primary:hover:not(:disabled) { background: var(--brand-700); border-color: var(--brand-700); }
  .button.soft { background: #eaf2ff; border-color: #cee0fc; color: var(--brand-700); }
  .button.danger { background: #fff4f5; border-color: #ebc5cc; color: var(--danger); }
  .button.small, .button.mini { min-height: 36px; padding: 7px 11px; font-size: 13px; }
  .button.full, .full { width: 100%; }
  .button[aria-busy="true"] { cursor: wait; opacity: .7; }
  .button:active:not(:disabled) { transform: translateY(1px); }
  .text-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--brand-700); font-size: 13px; font-weight: 550; min-height: 36px; padding: 4px 0; }
  .text-link:hover { color: #143e99; text-decoration: underline; text-underline-offset: 4px; }
  .text-link .icon { width: 17px; height: 17px; }
  .subtext, .note, .tiny { color: var(--muted); font-size: 12px; line-height: 1.8; }
  .subtext { margin-top: 7px; }
  .note { margin-top: 15px; }
  .muted { color: var(--muted); }
  .tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #dce5f1; border-radius: 6px; background: #f0f4f9; color: #536b88; font-size: 12px; font-weight: 450; line-height: 1.4; white-space: nowrap; }
  .tag.green { color: #116e54; background: #e6f5ee; border-color: #cee9db; }
  .tag.amber { color: #865706; background: #fff4de; border-color: #efdfb9; }
  .tag.blue { color: #285cae; background: #eaf2ff; border-color: #d5e5fc; }
  .tag.red { color: #ac3341; background: #fff0f2; border-color: #efd4d9; }
  .tag.purple { color: #65509a; background: #f0edfb; border-color: #e0d9f6; }
  .icon-box { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid #dbe8fb; border-radius: 11px; color: var(--brand-700); background: linear-gradient(145deg,#f7fbff,#d9eaff); box-shadow: inset 0 1px #fff; }
  .icon-box.green { color: #1c7962; background: #e4f5ee; border-color: #d5ede2; }
  .icon-box.amber { color: #92640d; background: #fff2d9; border-color: #f1e0ba; }
  .icon-box.purple { color: #6b56a6; background: #eee9fb; border-color: #e3dcf5; }
  .info, .admin-banner { padding: 13px 15px; border: 1px solid #cfdef5; border-radius: 10px; background: #edf4ff; color: #3f6392; font-size: 13px; line-height: 1.8; }
  .admin-banner { margin-bottom: 22px; }
  .admin-banner b { color: var(--ink); }
  .error { min-height: 18px; margin: 10px 0; color: var(--danger); font-size: 13px; line-height: 1.6; }
  .error:empty { display: none; }
  .error:not(:empty) { padding: 10px 12px; background: #fff1f3; border-radius: 8px; border: 1px solid #efcbd1; }
  [aria-invalid="true"] { border-color: var(--danger); background: #fff8f9; }
  /* Solid tables protect scanability; horizontal scrolling is contained here. */
  .table-wrap { min-width: 0; max-width: 100%; width: 100%; overflow: auto; border-radius: 9px; background: #fff; overscroll-behavior-x: contain; }
  table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; font-size: 13px; }
  th { padding: 13px 15px; background: #f2f6fc; border-bottom: 1px solid var(--line); color: #4f6888; font-weight: 550; }
  td { padding: 16px 15px; border-bottom: 1px solid #e5edf7; color: var(--text); }
  tbody tr:hover { background: #f7faff; }
  tbody tr:last-child td { border-bottom: 0; }
  .cell-title { color: var(--ink); font-weight: 550; }
  .cell-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
  .amount { color: var(--ink); font-weight: 600; white-space: nowrap; }
  .amount.positive { color: var(--success); }
  .table-action { display: inline-flex; gap: 15px; }
  .table-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 5px; padding-top: 17px; border-top: 1px solid #e4ecf6; color: var(--muted); font-size: 12px; }
  .empty { padding: 44px 20px; text-align: center; color: var(--muted); font-size: 14px; }
  .empty .icon-box { margin: 0 auto 14px; }
  /* Forms and filter controls. */
  .filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 22px; }
  .filters label, .field, .region-picker, .card-selector { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--text); font-size: 13px; }
  .filters label { flex: 1; min-width: 145px; }
  .filters .search { min-width: 230px; flex: 1.6; }
  .field { margin-bottom: 18px; }
  .region-picker { margin: 14px 0; }
  .filters input, .filters select, .field input, .field select, .field textarea, .region-picker input, .region-picker select, .intent-input input, .intent-input textarea, .card-selector select, .map-select, .bank-filter select, .pill-select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-control); border-radius: 9px; color: var(--ink); background: #fff; font-size: 14px; line-height: 1.5; }
  input::placeholder, textarea::placeholder { color: #657d9b; }
  input:disabled, select:disabled, textarea:disabled { background: #eef2f8; color: var(--muted); cursor: not-allowed; }
  .field textarea { resize: vertical; min-height: 100px; }
  .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; }
  .form-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; gap: 24px; }
  .form-summary { position: sticky; top: calc(var(--shell-height) + 22px); background: #fff; }
  .form-note { padding: 13px; margin: 16px 0; border: 1px solid #ecdbb0; border-radius: 9px; background: #fff6e4; color: #805a11; font-size: 13px; line-height: 1.8; }
  .check { display: flex; align-items: start; gap: 10px; margin: 18px 0; color: var(--text); font-size: 13px; line-height: 1.75; }
  .check input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--blue); }
  .tabs { display: flex; gap: 25px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
  .tabs button { min-height: 44px; padding: 10px 3px; color: var(--muted); font-size: 14px; white-space: nowrap; border-bottom: 3px solid transparent; }
  .tabs button.active { color: var(--brand-700); font-weight: 600; border-bottom-color: var(--blue); }
  .segmented { display: inline-flex; align-items: stretch; gap: 4px; border: 1px solid #dbe6f5; border-radius: 10px; padding: 4px; background: #edf3fc; }
  .segmented button { border: 1px solid transparent; min-height: 36px; padding: 7px 13px; border-radius: 7px; color: var(--text); font-size: 13px; }
  .segmented button.active, .segmented button[aria-selected="true"] { background: #fff; color: var(--brand-700); box-shadow: 0 2px 5px #335f9012; font-weight: 600; }
  .kv { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin: 14px 0; color: var(--muted); font-size: 13px; }
  .kv b { color: var(--ink); font-weight: 550; text-align: right; }
  .progress { height: 6px; overflow: hidden; margin: 12px 0; border-radius: 4px; background: #e5edf8; }
  .progress span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
  /* Modal surfaces stay opaque. Focus/inert management is handled in JS. */
  .overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: #142e5066; backdrop-filter: blur(7px); }
  .dialog { position: relative; width: 570px; max-width: 100%; max-height: min(90vh,1000px); overflow: auto; overscroll-behavior: contain; padding: 32px; border: 1px solid #fff; border-radius: 20px; background: #fbfdff; box-shadow: 0 30px 100px #132b4b38; }
  .dialog.wide { width: 820px; }
  .dialog h2 { padding-right: 36px; margin-bottom: 14px; font-size: 23px; }
  .dialog p { color: var(--text); font-size: 14px; line-height: 1.8; }
  .dialog .close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text); font-size: 27px; }
  .dialog .close:hover { background: #eaf2ff; }
  .dialog .button { margin-top: 10px; }
  .detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 22px 0; }
  .detail-grid > div { padding: 14px; border: 1px solid #deE8f5; border-radius: 9px; background: #f2f7fe; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
  .detail-grid b { display: block; margin-top: 7px; color: var(--ink); font-size: 14px; font-weight: 500; }
  .success-mark { display: grid; place-items: center; width: 60px; height: 60px; margin: 10px 0 20px; border-radius: 50%; background: #e0f3e9; color: var(--success); font-size: 30px; }
  #toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; width: max-content; max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 11px; background: #203f6d; color: white; box-shadow: 0 5px 24px #17365b30; font-size: 14px; opacity: 0; transform: translate(-50%,20px); transition: opacity .2s,transform .2s; pointer-events: none; }
  #toast.show { opacity: 1; transform: translate(-50%,0); }
}

@layer pages {
  /* Independent Upper V2 workbench components. */
  .wb-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; color: var(--text); font-size: 13px; }
  .wb-welcome p { margin: 0; }
  .wb-welcome > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .wb-overview-grid { display: grid; grid-template-columns: minmax(0,2.06fr) minmax(330px,1fr); align-items: stretch; gap: 16px; }
  .wb-funds { position: relative; isolation: isolate; display: flex; align-items: center; padding: 0; overflow: hidden; min-height: 322px; border-color: white; }
  .wb-fund-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(106deg,#fff 0%,#fff 49%,#e7f3ff 79%,#d1eaff 100%); }
  .wb-fund-content { position: relative; z-index: 2; width: 68%; padding: 22px 0 21px 25px; }
  .wb-fund-detail { position: absolute; z-index: 3; top: 15px; right: 23px; }
  .wb-fund-detail .text-link { font-size: 14px; }
  .wb-title-row { display: flex; align-items: center; gap: 10px; min-height: 32px; }
  .wb-title-row h2 { font-size: 21px; font-weight: 650; color: var(--ink); }
  .wb-eye { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 8px; color: #52749f; }
  .wb-eye:hover { color: var(--blue); background: #eaf3ff; }
  .wb-eye .icon { width: 21px; height: 21px; }
  .wb-eye[aria-pressed="true"]::after { content: ''; position: absolute; width: 23px; height: 2px; background: currentColor; transform: rotate(45deg); box-shadow: 0 1px #fff; }
  .wb-fund-subtitle { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
  .wb-balance { display: flex; align-items: baseline; gap: 15px; color: #122b55; line-height: 1.35; margin-top: 8px; }
  .wb-balance strong { font-size: clamp(35px,3.2vw,49px); font-weight: 720; letter-spacing: -1.3px; font-variant-numeric: tabular-nums; }
  .wb-balance > span { font-size: 18px; font-weight: 600; }
  .wb-fund-metrics { display: grid; grid-template-columns: 1.17fr 1fr 1fr; gap: 0; margin: 15px 0 0; }
  .wb-fund-metrics > div { min-width: 0; padding-left: 17px; border-left: 1px solid #d5e3f7; }
  .wb-fund-metrics > div:first-child { padding-left: 0; border-left: 0; }
  .wb-fund-metrics dt { font-size: 14px; color: var(--muted); }
  .wb-fund-metrics dd { margin: 2px 0 0; font-size: clamp(18px,1.55vw,23px); font-weight: 650; letter-spacing: -.3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .wb-fund-note { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--muted); font-size: 12px; }
  .wb-fund-note .icon { width: 14px; height: 14px; }
  .wb-fund-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px; }
  .wb-fund-actions .button { min-height: 44px; padding: 8px 12px; font-size: 14px; gap: 7px; background: #ffffffda; border-color: #c4d8f5; }
  .wb-fund-actions .button.primary { color: #fff; border-color: var(--brand-600); background: linear-gradient(135deg,#2868f0,#245fde); }
  .wb-fund-actions .button .icon { width: 17px; height: 17px; }
  .wb-currencies { display: flex; flex-wrap: wrap; gap: 5px 15px; margin-top: 12px; color: var(--muted); font-size: 12px; }
  .wb-currencies b { color: var(--text); font-weight: 550; margin-left: 5px; font-variant-numeric: tabular-nums; }
  /* Transparent PNG artwork stays fully contained; financial text retains its own column. */
  .wb-fund-art { position: absolute; z-index: 0; right: 0; top: 60px; bottom: 26px; width: 34%; overflow: hidden; pointer-events: none; opacity: .93; }
  .client-art.wb-fund-art img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 0; }
  .wb-rail { display: grid; align-self: start; gap: 12px; min-width: 0; }
  .wb-quick { padding: 14px 18px 16px; }
  .wb-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 29px; }
  .wb-section-head h2 { font-size: 20px; font-weight: 650; }
  .wb-section-head > span { color: var(--muted); font-size: 12px; }
  .wb-section-head .text-link { font-size: 14px; min-height: 44px; }
  .wb-quick-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 9px; }
  .wb-quick-item { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 44px; padding: 8px 5px; border: 1px solid #e0eafb; border-radius: 10px; background: linear-gradient(120deg,#fbfdff,#f1f6ff); color: #294b77; font-size: 14px; white-space: nowrap; }
  .wb-quick-item .icon { width: 18px; height: 18px; color: var(--blue); }
  .wb-quick-item:hover { border-color: #adcaf4; color: var(--brand-700); background: #eaf3ff; }
  .wb-todo { padding: 0 18px; min-width: 0; }
  .wb-todo > h2 { margin: 0; font-size: 17px; }
  .wb-todo-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 49px; padding: 8px 0; text-align: left; }
  .wb-todo-toggle:disabled { opacity: 1; cursor: default; }
  .wb-todo-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
  .wb-todo-label > i { color: var(--blue); }
  .wb-todo-label .icon { width: 19px; height: 19px; }
  .wb-count { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; padding: 0 8px; border-radius: 20px; background: #fff1dc; color: #946012; font-size: 13px; }
  .wb-todo-state { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 400; font-size: 12px; white-space: nowrap; }
  .wb-chevron { display: inline-block; line-height: 1; font-size: 18px; color: var(--brand-700); }
  .wb-todo-toggle[aria-expanded="true"] .wb-chevron { transform: rotate(180deg); }
  .wb-todo-body { border-top: 1px solid #e9eff8; }
  .wb-task-list { max-height: 212px; overflow-y: auto; overscroll-behavior: contain; }
  .wb-task { display: flex; align-items: center; gap: 9px; padding: 10px 0; min-height: 61px; }
  .wb-task + .wb-task { border-top: 1px solid #edf2f9; }
  .wb-task-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; color: var(--blue); background: #eaf4ff; }
  .wb-task-icon .icon { width: 17px; height: 17px; }
  .wb-task-icon.amber { color: #a9761c; background: #fff5e5; }
  .wb-task-icon.red { color: #b33142; background: #fff0f2; }
  .wb-task-copy { flex: 1; min-width: 0; }
  .wb-task-copy h3 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
  .wb-task-copy p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
  .wb-task > .text-link { flex-shrink: 0; font-size: 14px; min-height: 44px; gap: 3px; }
  .wb-task > .text-link .icon { width: 14px; height: 14px; }
  .wb-todo-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 33px; padding: 3px 0; border-top: 1px solid #e9eff8; }
  .wb-todo-footer > span { color: var(--muted); font-size: 12px; }
  .wb-todo-footer > .text-link { font-size: 14px; min-height: 44px; }
  .wb-services { margin-top: 22px; }
  .wb-services > .wb-section-head { padding: 0 3px; margin-bottom: 9px; }
  .wb-services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .wb-service { position: relative; isolation: isolate; overflow: hidden; min-height: 184px; background: linear-gradient(105deg,#fff 20%,#fff 65%,#ebf6ff 100%); border: 1px solid #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
  .wb-service-copy { position: relative; z-index: 2; padding: 19px 21px 16px; }
  .wb-service-title { display: flex; align-items: center; gap: 8px; }
  .wb-service-title > i { color: var(--blue); }
  .wb-service-title .icon { width: 22px; height: 22px; }
  .wb-service-title h3 { margin: 0; color: #17355f; font-size: 18px; font-weight: 650; white-space: nowrap; }
  .wb-service-status { color: #267254; background: #eaf7f0; border-radius: 6px; padding: 2px 6px; font-size: 12px; white-space: nowrap; }
  .wb-service-chain .wb-service-status { color: #376695; background: #eaf3ff; }
  .wb-service-metric { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; }
  .wb-service-metric strong { font-size: 31px; line-height: 1.3; color: #17355f; font-weight: 700; font-variant-numeric: tabular-nums; }
  .wb-service-metric > span { font-size: 13px; color: var(--text); }
  .wb-service-keyword { margin: 10px 0 0; font-size: 24px; line-height: 1.5; font-weight: 650; color: #17355f; }
  .wb-service-description { max-width: 67%; margin: 4px 0 2px; color: var(--text); font-size: 12px; line-height: 1.6; }
  .wb-service-copy > .text-link { min-height: 44px; margin-top: 3px; font-size: 14px; }
  .wb-service-art { position: absolute; z-index: 0; right: 0; bottom: 0; width: 39%; height: 135px; overflow: hidden; pointer-events: none; }
  .client-art.wb-service-art img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 0; }
  .wb-recent { margin-top: 22px; padding: 21px 23px 9px; }
  .wb-recent > .wb-section-head { margin-bottom: 15px; }
  .wb-recent .table-footer { padding-bottom: 9px; }
  @media (min-width: 1700px) {
    .wb-funds { min-height: 338px; }
    .wb-fund-content { padding-top: 26px; padding-bottom: 25px; }
    .wb-fund-actions { margin-top: 19px; }
    .wb-task { min-height: 67px; }
  }
  @media (max-width: 1350px) {
    .wb-overview-grid { grid-template-columns: minmax(0,1.85fr) minmax(320px,1fr); }
    .wb-fund-content { width: 74%; padding-left: 21px; }
    .wb-fund-art { width: 30%; opacity: .8; }
    .wb-fund-metrics > div { padding-left: 12px; }
    .wb-service-copy { padding-left: 17px; }
    .wb-service-title { gap: 6px; }
    .wb-service-title h3 { font-size: 17px; }
    .wb-service-status { font-size: 12px; padding: 2px 5px; }
    .wb-service-description { max-width: 72%; }
  }
  @media (max-width: 1100px) {
    .wb-overview-grid { grid-template-columns: minmax(0,1fr); }
    .wb-fund-content { width: 68%; }
    .wb-fund-art { width: 34%; opacity: .95; }
    .wb-quick-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
    .wb-services-grid { gap: 12px; }
    .wb-service-title h3 { font-size: 16px; }
    .wb-service-status { display: none; }
    .wb-service-keyword { font-size: 21px; }
    .wb-service-art { width: 37%; height: 122px; }
  }
  @media (max-width: 820px) {
    .wb-quick-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .wb-services-grid { grid-template-columns: minmax(0,1fr); }
    .wb-services > .wb-section-head > span { display: none; }
    .wb-service { min-height: 166px; }
    .wb-service-title h3 { font-size: 18px; }
    .wb-service-status { display: inline-flex; }
    .wb-service-art { width: 37%; max-width: 235px; height: 155px; }
    .wb-service-keyword { font-size: 24px; }
    .wb-service-description { max-width: 67%; }
    .wb-welcome { align-items: flex-start; gap: 8px; }
  }
  @media (max-width: 600px) {
    .wb-welcome { flex-direction: column; margin-bottom: 14px; font-size: 12px; gap: 3px; }
    .wb-welcome > span { font-size: 12px; }
    .wb-funds { min-height: 0; }
    .wb-fund-art { display: none; }
    .wb-fund-content { width: 100%; padding: 18px; }
    .wb-fund-detail { right: 18px; top: 17px; }
    .wb-fund-detail .text-link { font-size: 14px; }
    .wb-title-row h2 { font-size: 19px; }
    .wb-fund-subtitle { font-size: 12px; margin-top: 5px; }
    .wb-balance { gap: 10px; margin-top: 9px; }
    .wb-balance strong { font-size: clamp(32px,8.4vw,42px); letter-spacing: -1px; }
    .wb-balance > span { font-size: 15px; }
    .wb-fund-metrics { margin-top: 17px; }
    .wb-fund-metrics > div { padding-left: 10px; }
    .wb-fund-metrics dt { font-size: 14px; }
    .wb-fund-metrics dd { font-size: clamp(15px,4vw,20px); margin-top: 4px; }
    .wb-fund-note { font-size: 12px; align-items: flex-start; gap: 4px; margin-top: 15px; }
    .wb-fund-note > i { margin-top: 2px; }
    .wb-fund-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .wb-fund-actions .button { min-height: 44px; padding: 8px; font-size: 14px; }
    .wb-fund-actions .button:last-child { grid-column: 1/-1; }
    .wb-quick { padding: 14px 17px 17px; }
    .wb-todo { padding: 0 17px; }
    .wb-quick-item { min-height: 47px; font-size: 14px; gap: 5px; }
    .wb-section-head h2 { font-size: 18px; }
    .wb-task-copy p { font-size: 12px; }
    .wb-services { margin-top: 18px; }
    .wb-service-copy { padding: 18px 18px 13px; }
    .wb-service-art { width: 42%; }
    .wb-recent { padding: 17px 16px 8px; margin-top: 18px; }
  }
  @media (max-width: 370px) {
    .wb-fund-content { padding: 17px 14px; }
    .wb-fund-metrics dd { font-size: 14px; }
    .wb-fund-metrics > div { padding-left: 8px; }
    .wb-quick-item { flex-direction: column; gap: 4px; font-size: 14px; }
    .wb-task { gap: 7px; }
    .wb-task-icon { flex-basis: 28px; width: 28px; height: 28px; }
    .wb-task > .text-link { font-size: 14px; }
  }

  /* Business layouts and original local visuals. No duplicate document shell. */
  .two-col { display: grid; grid-template-columns: minmax(0,1fr) 345px; gap: 22px; }
  .two-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .tasks { display: flex; flex-direction: column; gap: 10px; }
  .task-row { display: flex; align-items: center; gap: 13px; background: #f4f7fc; border: 1px solid #e9eef6; padding: 14px 15px; border-radius: 8px; }
  .task-row h3 { font-size: 14px; font-weight: 550; }
  .task-row p { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
  .task-row .text-link { margin-left: auto; white-space: nowrap; }
  .task-count { font-size: 12px; color: #3670c3; background: #eaf2ff; padding: 4px 8px; border-radius: 5px; margin-left: 8px; }
  .quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 23px 9px; }
  .quick-grid button { display: flex; align-items: center; flex-direction: column; gap: 10px; min-height: 44px; padding: 7px 0; font-size: 13px; white-space: nowrap; }
  .quick-grid button:hover { color: var(--blue); }
  .quick-grid .icon-box { width: 45px; height: 45px; border-radius: 12px; background: linear-gradient(135deg,#c1dcff,#e8f3ff); box-shadow: inset 0 1px white; }
  .quick-grid .icon { width: 25px; height: 25px; }
  .balance-heading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
  .balance-total { font-size: 32px; font-weight: 650; letter-spacing: -.8px; margin-top: 8px; color: var(--ink); }
  .balance-total small { font-size: 13px; letter-spacing: 0; color: #536b8b; margin-left: 8px; font-weight: 400; }
  .balance-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 20px; }
  .balance-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
  .balance-card { background: #f0f5fc; border: 1px solid #e0e9f5; border-radius: 8px; padding: 17px; }
  .balance-card .icon-box { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 13px; }
  .balance-card .icon { width: 18px; height: 18px; }
  .balance-card p { font-size: 12px; margin: 0 0 6px; color: #526b8b; }
  .balance-card strong { font-size: 23px; font-weight: 600; letter-spacing: -.5px; }
  .balance-card small { display: block; font-size: 12px; margin-top: 5px; color: var(--text-muted); }
  .currency-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 17px; }
  .currency-row { display: flex; align-items: center; gap: 9px; padding: 12px 14px; background: #f7f9fc; border: 1px solid #edf0f5; border-radius: 7px; font-size: 12px; }
  .currency-row strong { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
  .flag { font-size: 19px; }
  .callout { padding: 22px; background: linear-gradient(125deg,#d6e8ff,#f3f7ff); border: 1px solid #c4d9f7; border-radius: 11px; }
  .callout h2 { font-size: 17px; line-height: 1.6; }
  .callout p { font-size: 12px; color: #587497; line-height: 1.7; margin: 8px 0 16px; }
  .notice-list { display: flex; flex-direction: column; gap: 16px; }
  .notice-item { display: flex; align-items: start; gap: 10px; font-size: 12px; color: #4c617e; }
  .notice-item:before { content: ''; width: 6px; height: 6px; background: #5081c3; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
  .notice-item small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 5px; }
  .metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 22px; }
  .metric { padding: 20px 21px; position: relative; }
  .metric-title { font-size: 13px; color: #596f8c; display: flex; align-items: center; justify-content: space-between; }
  .metric-title .icon-box { width: 33px; height: 33px; border-radius: 9px; }
  .metric strong { display: block; font-size: 28px; font-weight: 650; margin: 10px 0 8px; letter-spacing: -.6px; line-height: 1.2; }
  .metric small { font-size: 12px; color: var(--text-muted); }
  .metric .button { margin-top: 15px; }
  .metrics.three { grid-template-columns: repeat(3,1fr); }
  .step-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
  .step-heading>span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--blue); color: white; font-size: 13px; flex-shrink: 0; }
  .step-heading h2 { font-size: 17px; }
  .step-heading p { font-size: 12px; margin: 4px 0 0; color: var(--muted); }
  .network-group { border: 1px solid #d4dff0; border-radius: 9px; overflow: hidden; margin-top: 16px; }
  .network-head { background: #f0f5fc; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; }
  .network-head .tag { font-size: 12px; }
  .master-symbol { display: inline-flex; position: relative; width: 38px; height: 24px; vertical-align: middle; margin-right: 8px; }
  .master-symbol:before,.master-symbol:after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #ee5962; }
  .master-symbol:after { right: 0; background: #f4b93d; opacity: .85; }
  .visa-symbol { font-weight: 750; color: #2860bf; font-style: italic; letter-spacing: .5px; font-size: 19px; margin-right: 8px; }
  .bin-options { display: grid; grid-template-columns: repeat(2,1fr); padding: 15px; gap: 12px; }
  .bin { display: flex; align-items: center; gap: 10px; border: 1px solid #d3ddec; border-radius: 8px; padding: 14px; background: white; text-align: left; font-weight: 600; color: #405b7c; }
  .bin.active { border-color: #377bf0; background: #ecf3ff; box-shadow: 0 0 0 2px #e3edff; }
  .bin .radio { width: 17px; height: 17px; border: 2px solid #c3cfe0; border-radius: 50%; position: relative; flex-shrink: 0; }
  .bin.active .radio { border-color: #367bef; }
  .bin.active .radio:after { content: ''; position: absolute; inset: 3px; background: #367bef; border-radius: 50%; }
  .bin small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-muted); }
  .stepper { display: inline-flex; border: 1px solid #cfdced; border-radius: 8px; overflow: hidden; background: white; }
  .stepper button { width: 39px; height: 41px; font-size: 19px; color: #51729b; }
  .stepper input { border: 0; border-left: 1px solid #d7e0ec; border-right: 1px solid #d7e0ec; width: 60px; text-align: center; font-size: 15px; color: #294667; }
  .quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
  .quantity-row small { font-size: 12px; color: var(--muted); }
  .summary-bin { display: flex; align-items: center; gap: 10px; background: #f0f4fa; border-radius: 8px; padding: 15px; font-size: 20px; font-weight: 650; letter-spacing: 1px; margin: 18px 0; }
  .summary-total { border-top: 1px solid #dce5f1; margin-top: 22px; padding-top: 19px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
  .summary-total strong { font-size: 24px; font-weight: 650; }
  .summary-remaining { background: #f2f6fb; border-radius: 7px; padding: 13px; margin: 20px 0; font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 12px; }
  .summary-remaining b { display: block; color: #385a82; font-size: 13px; margin-top: 5px; }
  .bank-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .bank-product { padding: 22px; }
  .bank-product-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; }
  .bank-logo { height: 32px; width: 95px; object-fit: contain; object-position: left center; }
  .bank-product h3 { font-size: 16px; margin: 15px 0 7px; }
  .bank-product p { font-size: 12px; color: var(--text-muted); margin: 7px 0 18px; }
  .bank-product .button { margin-top: 12px; width: 100%; }
  .bank-type { display: flex; gap: 7px; flex-wrap: wrap; }
  .account-card { position: relative; overflow: hidden; }
  .account-card .bank-product-top { margin-bottom: 20px; }
  .masked { font-size: 16px; letter-spacing: 1.4px; color: #4b688b; font-variant-numeric: tabular-nums; }
  .account-card .account-bottom { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid #e3eaf5; padding-top: 17px; margin-top: 20px; }
  .account-card .account-bottom small { color: var(--muted); font-size: 12px; }
  .account-card .account-bottom b { font-size: 21px; font-weight: 600; display: block; margin-top: 7px; }
  .status-timeline { display: flex; gap: 0; align-items: start; margin: 23px 0 28px; }
  .timeline-step { flex: 1; position: relative; text-align: center; padding: 0 6px; font-size: 12px; color: var(--text-muted); }
  .timeline-step:before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: #dfe7f3; }
  .timeline-step:first-child:before { left: 50%; }
  .timeline-step:last-child:before { right: 50%; }
  .timeline-step>span { position: relative; display: grid; place-items: center; background: #e8edf5; width: 27px; height: 27px; border-radius: 50%; margin: 0 auto 10px; color: var(--text-muted); }
  .timeline-step.done>span { background: #2b70df; color: white; }
  .timeline-step.done { color: #3e6fa9; }
  .chart-area { height: 160px; position: relative; margin-top: 15px; background: repeating-linear-gradient(to bottom,transparent 0,transparent 39px,#edf1f7 39px,#edf1f7 40px); }
  .chart-area svg { width: 100%; height: 100%; overflow: visible; }
  .chart-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 8px; }
  .chart-legend { display: flex; gap: 20px; font-size: 12px; color: var(--text-muted); margin-top: 14px; }
  .chart-legend span:before { content: ''; width: 8px; height: 8px; background: #3c78d9; display: inline-block; margin-right: 7px; border-radius: 2px; }
  .chart-legend span:last-child:before { background: #86c9ba; }
  .swap-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 22px; }
  .exchange-box { background: #f1f5fb; border: 1px solid #dbe4f0; border-radius: 9px; padding: 17px; margin: 16px 0; }
  .exchange-box>label { font-size: 12px; color: var(--text-muted); }
  .exchange-input { display: flex; align-items: center; gap: 15px; margin-top: 12px; }
  .exchange-input input { background: transparent; border: 0; color: #253f63; width: 100%; min-width: 0; font-size: 28px; min-height: 42px; }
  .exchange-input select { border: 1px solid var(--line-control); background: white; border-radius: 6px; padding: 8px; color: #315980; font-size: 13px; min-height: 42px; flex-shrink: 0; }
  .exchange-result { font-size: 28px; font-weight: 600; color: #2e527c; padding: 10px 0; }
  .swap-arrow { text-align: center; color: var(--text-muted); font-size: 21px; }
  .swap-flow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0; padding: 15px 0; }
  .flow-node { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); flex: 1; }
  .flow-node .icon-box { height: 62px; width: 62px; border-radius: 18px; }
  .flow-node .icon { width: 30px; height: 30px; }
  .flow-arrow { color: var(--text-muted); font-size: 23px; }
  .log-line { display: flex; align-items: start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e8eef6; font-size: 12px; color: #597494; }
  .log-line time { font-size: 12px; color: var(--text-muted); min-width: 58px; }
  .role-permissions { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .permission-card { padding: 23px; }
  .permission-card ul { padding: 0; list-style: none; margin: 18px 0 0; }
  .permission-card li { font-size: 12px; color: var(--text-muted); margin: 10px 0; }
  .permission-card li:before { content: '✓'; margin-right: 9px; color: #21856c; }
  .mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
  .mini-tile { padding: 18px; background: #f4f7fc; border: 1px solid #e1e9f5; border-radius: 9px; }
  .mini-tile h3 { font-size: 13px; }
  .mini-tile p { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin: 7px 0 0; }
  .status-count { font-weight: 600; }
  .admin-audit { font-family: inherit; }
  .responsive-chart { height: 190px; }
  .calendar-mini { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; text-align: center; font-size: 12px; }
  .calendar-mini>span { padding: 5px 0; color: var(--text-muted); }
  .calendar-mini button { min-height: 36px; padding: 5px 0; border-radius: 6px; font-size: 13px; }
  .calendar-mini button.selected { background: #2363df; color: white; }
  .calendar-note { font-size: 12px; color: var(--text-muted); line-height: 1.8; border-top: 1px solid #e1e9f4; padding-top: 12px; margin-top: 12px; }
  .fund-highlight { background: #eff5ff; border: 1px solid #cfe0fb; padding: 18px; border-radius: 9px; }
  .fund-highlight strong { font-size: 25px; display: block; margin: 7px 0; color: #2c5fa8; }
  .amount-hint { font-size: 12px; color: var(--text-muted); }
  .overflow-ellipsis { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status-switch { display: inline-flex; width: 34px; height: 20px; border-radius: 15px; background: #c5d2e4; padding: 3px; vertical-align: middle; }
  .status-switch:before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #37506b22; }
  .status-switch.on { background: #3d79dd; }
  .status-switch.on:before { transform: translateX(14px); }
  .hero-art { position: absolute; right: 20px; top: 0; width: 350px; height: 100%; perspective: 750px; pointer-events: none; z-index: 1; }
  .ice-orb { width: 110px; height: 110px; border-radius: 50%; position: absolute; left: 34px; top: 20px; border: 1px solid #ffffffe0; background: radial-gradient(circle at 31% 26%,#ffffffea,#d5eeffab 26%,#9cc8f47a 62%,#f1fbffce 96%); box-shadow: inset 8px 7px 16px #fff9,inset -5px -5px 16px #648fc536,0 14px 18px #406da92d; transform: rotate(-15deg); overflow: hidden; }
  .ice-orb:before,.ice-orb:after { content: ''; position: absolute; inset: 8px 27px; border: 1px solid #8cb9df88; border-radius: 50%; box-shadow: 0 0 1px #fff; }
  .ice-orb:after { inset: 27px 3px; transform: rotate(15deg); border-color: #ffffffce; }
  .orb-ring { position: absolute; width: 161px; height: 54px; left: 11px; top: 53px; border: 2px solid #ffffffb7; border-radius: 50%; transform: rotate(-30deg); box-shadow: 0 2px 2px #5586b72c; }
  .hero-credit { position: absolute; right: 18px; top: 33px; width: 177px; height: 112px; border: 1px solid white; border-radius: 11px; background: linear-gradient(120deg,#ffffffb8,#b2d3f18a 35%,#e4f7ffb7 63%,#91bce38f); box-shadow: inset 1px 1px 3px #fff,inset -1px -1px 3px #456e993d,8px 13px 20px #527dab36; transform: rotateY(-24deg) rotateX(13deg) rotateZ(-15deg); backdrop-filter: blur(8px); padding: 15px 16px; }
  .hero-credit>strong { font-size: 13px; letter-spacing: -.5px; color: #3e709c; font-weight: 600; text-shadow: 0 1px white; }
  .hero-credit .preview-chip { margin: 11px 0 9px; width: 22px; height: 16px; border-radius: 4px; }
  .hero-credit .preview-mask { font-size: 12px; letter-spacing: 1.6px; color: var(--text-muted); }
  .crystal-cube { width: 32px; height: 32px; background: linear-gradient(135deg,#ffffffdf,#9ecaff91); position: absolute; right: 12px; bottom: 19px; border: 1px solid white; border-radius: 9px; transform: rotate(24deg); box-shadow: 3px 5px 8px #416e9d24; }
  .hero-credit-back { transform: rotateY(-24deg) rotateX(13deg) rotateZ(4deg); right: 29px; top: 25px; opacity: .42; background: #c9e4ffa1; }
  .card-preview-stage { position: relative; height: 215px; perspective: 900px; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 60%,#c3dcf39c,transparent 65%),linear-gradient(140deg,#edf7ff,#dceafb); border: 1px solid white; border-radius: 12px; box-shadow: inset 0 1px white,0 0 0 1px #c7dced66; margin: 0 0 21px; }
  .card-preview-stage.compact { height: 178px; margin-bottom: 20px; }
  .card-preview-stage:after { content: ''; position: absolute; left: 22%; right: 15%; bottom: 14px; height: 17px; background: #5f8aba25; filter: blur(9px); border-radius: 50%; z-index: -1; }
  .preview-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotateY(-13deg) rotateX(8deg) rotate(-7deg); width: 250px; height: 151px; padding: 18px 20px; border: 1.5px solid #fff; border-radius: 12px; background: linear-gradient(118deg,#ffffffd4,#bdd8f19e 40%,#f2fcffe0 65%,#9fc6eea8); box-shadow: inset 1px 1px 4px white,inset -1px -1px 3px #366aa530,10px 16px 24px #3c689431; backdrop-filter: blur(9px); overflow: hidden; }
  .preview-card:after { content: ''; position: absolute; inset: -80%; transform: rotate(-20deg); background: linear-gradient(110deg,transparent 47%,#ffffff7d 50%,transparent 56%); pointer-events: none; }
  .preview-card-back { transform: translate(-47%,-58%) rotateY(-13deg) rotateX(8deg) rotate(6deg); opacity: .42; background: #b8d6f6; padding: 0; }
  .preview-brand { display: flex; align-items: center; justify-content: space-between; font-size: 18px; letter-spacing: -.6px; color: #285e92; font-weight: 600; text-shadow: 0 1px #ffffffaa; }
  .preview-brand small { font-size: 12px; letter-spacing: 0; color: #496f9a; font-weight: 400; }
  .preview-chip { width: 27px; height: 20px; background: linear-gradient(140deg,#f7efcf,#d9c793); border: 1px solid #c7b27e; border-radius: 4px; position: relative; margin: 15px 0 11px; }
  .preview-chip:before { content: ''; position: absolute; inset: -1px 8px; border-left: 1px solid #bda96f; border-right: 1px solid #bda96f; }
  .preview-chip:after { content: ''; position: absolute; left: 0; right: 0; top: 9px; border-top: 1px solid #bda96f; }
  .preview-mask { font-size: 13px; letter-spacing: 2px; color: #315b81; }
  .preview-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 12px; color: #4c749c; align-items: center; }
  .compact .preview-card { width: 226px; height: 139px; padding: 14px 18px; }
  .compact .preview-brand { font-size: 16px; }
  .compact .preview-chip { margin: 13px 0 9px; }
  .compact .preview-mask { font-size: 12px; }
  .compact .preview-footer { margin-top: 10px; }
  .card-showcase { display: grid; grid-template-columns: 1fr 330px; gap: 24px; align-items: center; margin-bottom: 22px; padding: 22px 27px; }
  .card-showcase .card-preview-stage { margin: 0; height: 195px; }
  .showcase-copy h2 { font-size: 21px; line-height: 1.65; color: #244f7a; }
  .showcase-copy p { font-size: 13px; color: var(--text-muted); line-height: 1.9; margin: 10px 0 15px; }
  .showcase-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .showcase-chips span { font-size: 12px; padding: 5px 10px; color: #4b7099; border: 1px solid #bdd6ef; border-radius: 20px; background: #edf6ff9e; }
  .network-teaser { display: flex; align-items: center; gap: 21px; padding: 22px 26px; margin-bottom: 22px; background: radial-gradient(ellipse at 100% 0,#cee9ff99,transparent 50%),linear-gradient(140deg,#f9fdff,#e7f1fc); position: relative; overflow: hidden; }
  .teaser-orb-wrap { position: relative; width: 94px; height: 90px; flex-shrink: 0; }
  .teaser-orb-wrap .ice-orb { width: 73px; height: 73px; left: 7px; top: 6px; box-shadow: inset 4px 4px 10px #fff9,inset -4px -4px 10px #688db936,0 10px 13px #406da929; }
  .teaser-orb-wrap .orb-ring { width: 98px; height: 33px; left: -6px; top: 27px; border-width: 1.5px; }
  .teaser-copy { flex: 1; min-width: 0; }
  .teaser-copy h2 { font-size: 18px; color: #2e587f; }
  .teaser-copy p { font-size: 12px; color: #567898; line-height: 1.8; margin: 7px 0 10px; }
  .bank-mini-strip { display: flex; gap: 14px; align-items: center; }
  .bank-mini-strip img { width: 49px; height: 20px; object-fit: contain; background: #fff; border: 1px solid #dce7f2; border-radius: 4px; padding: 3px; }
  .network-teaser .button { flex-shrink: 0; }
  .network-explorer { display: grid; grid-template-columns: minmax(0,1fr) 275px; gap: 20px; }
  .network-globe { position: relative; height: 380px; border: 1px solid white; border-radius: 13px; background: radial-gradient(ellipse,#d5eafd,#e8f2fc); overflow: hidden; }
  .globe-stage { position: absolute; inset: 0; cursor: grab; touch-action: none; }
  .globe-stage canvas { display: block; width: 100%; height: 100%; }
  .node-layer { position: absolute; inset: 0; pointer-events: none; }
  .globe-node { position: absolute; transform: translate(-50%,-50%); background: #ffffffee; border: 1px solid #fff; border-radius: 18px; padding: 6px 10px; box-shadow: 0 4px 12px #527ba42b; font-size: 12px; color: #315b83; white-space: nowrap; pointer-events: auto; display: flex; align-items: center; gap: 7px; }
  .globe-node i { width: 6px; height: 6px; background: #448ce0; border-radius: 50%; box-shadow: 0 0 0 3px #3e87df14; }
  .globe-node.connected i { background: #269c7b; }
  .globe-node.selected { color: #fff; background: #2868f0; }
  .globe-node.selected i { background: #fff; }
  .map-hint { position: absolute; bottom: 14px; left: 15px; right: 15px; font-size: 12px; color: #567a9b; display: flex; justify-content: space-between; pointer-events: none; }
  .map-details { padding: 18px; background: #f8fbff; border: 1px solid #d3e1f1; border-radius: 12px; }
  .map-details h3 { font-size: 18px; margin-top: 13px; }
  .map-details .bank-logo { width: 95px; height: 35px; }
  .map-details .kv { font-size: 12px; }
  .map-details p { font-size: 12px; }
  .map-motion { position: absolute; right: 12px; top: 12px; border: 1px solid #c3d8ee; background: #ffffffc9; border-radius: 7px; padding: 6px 9px; font-size: 12px; color: #476f96; z-index: 3; min-height: 36px; }
  .preview-card-name { display: block; max-width: 145px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  .preview-footer>span:last-child { flex-shrink: 0; font-size: 12px; }
  .card-preview-stage .preview-brand small { font-size: 12px; }
  .channel-details { min-height: 295px; padding: 8px 0; }
  .country-title { display: flex; align-items: center; gap: 12px; margin: 15px 0 22px; }
  .flag-round { width: 41px; height: 41px; display: grid; place-items: center; background: #fff; border-radius: 50%; font-size: 24px; box-shadow: 0 3px 12px #738cb715; }
  .country-title h2 { font-size: 19px; }
  .country-title p { font-size: 12px; color: var(--text-muted); margin: 5px 0 0; }
  .bank-ref { display: flex; align-items: center; gap: 10px; background: #ffffffa1; border: 1px solid #e6edf8; border-radius: 9px; padding: 12px; margin-bottom: 15px; }
  .bank-ref .tiny { font-size: 12px; }
  .bank-ref strong { font-size: 12px; font-weight: 500; display: block; margin-bottom: 3px; }
  .channel-details .button { margin-top: 10px; }
  .channel-status { font-size: 12px; color: var(--text-muted); margin-top: 12px; min-height: 16px; }
  .channel-progress { height: 3px; background: #e4edf8; overflow: hidden; border-radius: 4px; margin-top: 12px; }
  .channel-progress span { display: block; height: 100%; background: linear-gradient(90deg,#3b87f8,#67ded6); width: 0; transition: width .6s; box-shadow: 0 0 10px #4cafff; }
  .identity-mini { margin-top: 17px; display: flex; gap: 12px; align-items: center; padding: 19px; }
  .crystal-icon { width: 45px; height: 45px; border: 1px solid white; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg,#ffffffc4,#c8e1ff8c); box-shadow: inset 0 0 10px #fff,0 5px 10px #9fbcde22; transform: rotate(-5deg); color: var(--text-muted); }
  .crystal-icon .icon { width: 25px; height: 25px; }
  .identity-mini h3 { font-size: 12px; }
  .identity-mini .tiny { font-size: 12px; margin-top: 5px; }
  .forge-layout { display: grid; grid-template-columns: minmax(0,1.23fr) minmax(290px,.77fr); gap: 22px; }
  .forge-stage { height: 404px; position: relative; overflow: hidden; perspective: 1100px; background: radial-gradient(ellipse at 55% 62%,#d1e3ff98,transparent 68%),#ffffff3a; }
  .forge-stage .stage-label { position: absolute; left: 25px; top: 24px; z-index: 2; }
  .stage-label b { font-size: 12px; font-weight: 500; }
  .stage-label .tiny { margin-top: 5px; }
  .stage-grid { position: absolute; left: -20%; right: -20%; height: 200px; bottom: -72px; background-image: linear-gradient(#b8ceee30 1px,transparent 1px),linear-gradient(90deg,#b8ceee30 1px,transparent 1px); background-size: 35px 35px; transform: rotateX(65deg); mask-image: radial-gradient(ellipse,black,transparent 68%); }
  .floating-card { line-height: 1.2; position: absolute; left: 50%; top: 50%; width: 310px; height: 193px; border-radius: 16px; border: 1.5px solid #ffffffec; background: linear-gradient(115deg,#ffffffc4 0%,#bad6ff96 40%,#effcffab 62%,#8ab9f894 100%); box-shadow: inset 2px 2px 4px #fff, inset -2px -2px 8px #457fc944,15px 24px 34px #4671ae26; backdrop-filter: blur(15px); transform: translate(-50%,-40%) rotateY(-18deg) rotateX(15deg) rotateZ(-10deg); padding: 23px 25px; z-index: 3; overflow: hidden; animation: float 6s ease-in-out infinite; }
  .floating-card:after { content: ''; position: absolute; inset: -60%; background: linear-gradient(110deg,transparent 40%,#ffffff88 48%,transparent 56%); transform: translateX(-30%); animation: sheen 7s ease-in-out infinite; pointer-events: none; }
  .floating-card .wordmark { font-size: 19px; font-weight: 600; letter-spacing: -.8px; }
  .floating-card .wordmark span { color: var(--brand-700); }
  .card-type { font-size: 12px; letter-spacing: 2px; margin-top: 5px; color: var(--text-muted); }
  .card-upper { display: flex; justify-content: space-between; }
  .contactless { font-size: 27px; color: var(--text-muted); transform: rotate(90deg); }
  .chip { width: 31px; height: 24px; margin: 16px 0 11px; border: 1px solid #e4ce91; border-radius: 5px; background: linear-gradient(135deg,#fff3c9,#d9caa0); position: relative; box-shadow: 1px 2px 4px #7891b322; }
  .chip:after { content: ''; position: absolute; inset: 6px -1px; border: 1px solid #b9ad86; border-left: 0; border-right: 0; }
  .chip:before { content: ''; position: absolute; inset: -1px 9px; border: 1px solid #b9ad86; border-top: 0; border-bottom: 0; }
  .card-numbers { font-size: 15px; letter-spacing: 3px; color: var(--text-muted); }
  .card-bottom { line-height: 1.3; gap: 12px; display: flex; justify-content: space-between; margin-top: 17px; font-size: 12px; letter-spacing: 1px; color: var(--text-muted); }
  .card-bottom strong { font-size: 13px; letter-spacing: 0; color: #3b6ca5; font-weight: 500; flex-shrink: 0; }
  .back-card { transform: translate(-44%,-49%) rotateY(-18deg) rotateX(15deg) rotateZ(10deg); z-index: 1; background: linear-gradient(130deg,#b5cfff9c,#e6faff7c); opacity: .55; animation: none; }
  .mid-card { transform: translate(-48%,-44%) rotateY(-18deg) rotateX(15deg) rotateZ(0deg); z-index: 2; opacity: .65; animation: none; }
  .orbit-ring { position: absolute; width: 405px; height: 104px; border: 1px solid #99bff466; border-radius: 50%; left: 50%; top: 67%; transform: translateX(-50%) rotate(-15deg); box-shadow: 0 1px 1px white; }
  .orbit-ring:after { content: ''; position: absolute; right: 25%; top: 0; width: 10px; height: 10px; background: linear-gradient(135deg,white,#70b6ff); border: 1px solid white; border-radius: 50%; box-shadow: 0 3px 7px #79a5e75e; }
  .forge-caption { position: absolute; bottom: 23px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: 1.6px; color: var(--text-muted); }
  .forge-stage.forging .floating-card { animation: forge 1.2s ease-in-out infinite; }
  .intent-box { padding: 25px; }
  .intent-box h2 { font-size: 17px; }
  .intent-input { position: relative; margin: 23px 0 13px; }
  .intent-input textarea:focus { border-color: #7dabee; }
  .intent-examples { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
  .intent-examples button { font-size: 12px; padding: 5px 8px; border-radius: 5px; border: 1px solid #dce7f6; color: var(--text-muted); background: #ffffff66; }
  .rule-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
  .rule-tag { border: 1px solid white; border-radius: 6px; background: #ecf3ff; padding: 7px 9px; color: var(--text-muted); font-size: 12px; }
  .draft-card { margin-top: 17px; padding: 17px; border: 1px dashed #a9c9f3; border-radius: 10px; background: #f5f9ff; }
  .draft-card h3 { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
  .draft-card .kv { font-size: 12px; margin: 10px 0; }
  .settings-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 20px; }
  .setting-card { padding: 19px; }
  .setting-card .setting-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .setting-card h3 { font-size: 12px; }
  .setting-card p { font-size: 12px; color: var(--text-muted); line-height: 1.8; margin: 8px 0; }
  .setting-card .icon { color: var(--text-muted); }
  .cards-shelf { display: flex; gap: 12px; overflow: auto; margin-top: 20px; }
  .saved-card { min-width: 215px; padding: 17px; display: flex; align-items: center; gap: 12px; }
  .saved-card .mini-credit { width: 43px; height: 29px; background: linear-gradient(130deg,#f8fcff,#82aef2); border: 1px solid white; border-radius: 5px; box-shadow: 0 3px 6px #5b80b721; }
  .saved-card b { font-size: 12px; font-weight: 500; }
  .saved-card small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 5px; }
  .river-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; }
  .river-stage { height: 355px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 30% 50%,#d3f1ffad,transparent 55%),radial-gradient(ellipse at 90% 50%,#e3e4ffb3,transparent 55%),#ffffff52; }
  .river-stage .panel-head { position: absolute; left: 24px; right: 24px; top: 23px; z-index: 2; }
  .river-vis { position: absolute; inset: 60px 0 35px; }
  .river-vis svg { width: 100%; height: 100%; overflow: visible; }
  .river-source,.river-target { position: absolute; top: 44%; z-index: 2; display: flex; align-items: center; flex-direction: column; font-size: 12px; gap: 10px; color: var(--text-muted); }
  .river-source { left: 7%; }
  .river-target { right: 7%; }
  .coin { width: 60px; height: 60px; border: 2px solid #ffffffdd; border-radius: 50%; background: linear-gradient(135deg,#ffffffee,#acd5ff9e); box-shadow: inset -3px -3px 5px #99bdea55,inset 3px 3px 5px white,0 9px 18px #91b6e733; display: grid; place-items: center; color: var(--text-muted); font-size: 27px; font-weight: 500; text-shadow: 0 1px white; }
  .river-engine { position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%) rotate(45deg); width: 90px; height: 90px; border: 2px solid white; border-radius: 20px; background: linear-gradient(130deg,#fff9,#bdd7ff99); backdrop-filter: blur(9px); box-shadow: 0 10px 40px #6096e61c,inset 0 0 20px white; display: grid; place-items: center; }
  .river-engine>div { transform: rotate(-45deg); text-align: center; }
  .river-engine strong { font-size: 20px; color: var(--text-muted); display: block; }
  .river-engine small { font-size: 12px; color: var(--text-muted); letter-spacing: 1px; }
  .engine-label { position: absolute; left: 0; right: 0; text-align: center; top: 78%; font-size: 12px; letter-spacing: 1px; color: var(--text-muted); }
  .river-svg-path { stroke-dasharray: 5 8; animation: river 14s linear infinite; }
  .swap-pulse .river-engine { animation: pulse 1s ease-in-out infinite; }
  .route-card { padding: 19px; margin-top: 17px; }
  .route-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin: 14px 0; color: var(--text-muted); }
  .route-row .route-symbol { width: 26px; height: 26px; border-radius: 8px; background: #edf3fd; display: grid; place-items: center; margin-right: 9px; color: var(--text-muted); }
  .route-row>div { display: flex; align-items: center; }
  .route-row b { font-weight: 500; color: var(--text-muted); font-size: 12px; }
  .route-row small { display: block; font-size: 12px; color: var(--text-muted); }
  .event-console { margin-top: 20px; padding: 20px; }
  .console-line { display: flex; align-items: start; gap: 14px; font-size: 12px; line-height: 1.9; color: var(--text-muted); border-top: 1px solid #e2ebf7; padding: 12px 0; }
  .console-line time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
  .console-dot { width: 5px; height: 5px; background: #8cb9f6; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
  .console-line:first-of-type { border: 0; }
  .console-line b { color: var(--text-muted); font-weight: 500; }
  @keyframes float { 0%,100%{margin-top:0}50%{margin-top:-10px} }
  @keyframes sheen { 0%,25%{transform:translateX(-50%) rotate(5deg)}70%,100%{transform:translateX(60%) rotate(5deg)} }
  @keyframes forge { 50%{filter:brightness(1.2);box-shadow:0 0 70px #5ba6ff77} }
  @keyframes river { to{stroke-dashoffset:-260} }
  @keyframes pulse { 50%{box-shadow:0 0 55px #7db4ff99} }
  .workspace-page { min-width: 0; }
  .account-intro { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(270px,.8fr); gap: 40px; padding: 29px 34px; margin-bottom: 24px; background: radial-gradient(ellipse at 100% 0,#dceaff88,transparent 55%),linear-gradient(130deg,#fff,#f5f9ff); }
  .account-intro h2 { font-size: 29px; line-height: 1.4; margin: 8px 0 12px; font-weight: 600; }
  .account-intro p { color: var(--text); }
  .account-intro .actions { margin-top: 23px; }
  .intro-steps { display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; align-content: center; }
  .intro-steps li { display: flex; align-items: center; gap: 14px; min-height: 53px; }
  .intro-steps li > span { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #c8dcf8; border-radius: 12px; color: var(--brand-700); background: linear-gradient(135deg,#fff,#e7f0ff); font-size: 13px; font-weight: 600; }
  .intro-steps b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
  .intro-steps small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
  .network-section > .panel-head { align-items: start; }
  .network-section .panel-head .note { margin-top: 5px; }
  .network-controls { display: grid; grid-template-columns: 190px minmax(0,1fr) auto; align-items: end; gap: 12px; padding: 17px 0 20px; }
  .network-controls .field { margin: 0; }
  .catalog-count { margin-bottom: 15px; color: var(--muted); font-size: 12px; }
  .account-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .account-list .bank-product { padding: 20px; box-shadow: none; background: #fbfdff; }
  .account-list .bank-product h3 { margin-top: 9px; font-size: 17px; }
  .account-list .bank-product p { margin: 6px 0 14px; color: var(--text); }
  .account-list .bank-product-top { margin-bottom: 14px; gap: 7px; }
  .account-list .bank-logo { width: 90px; max-width: 50%; height: 32px; }
  .account-list .actions { gap: 10px; }
  .account-list .button { margin: 0; width: auto; }
  .network-map-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .globe-panel { min-width: 0; min-height: 390px; position: relative; overflow: hidden; border: 1px solid #dbe8f9; border-radius: 13px; background: radial-gradient(ellipse at 50% 45%,#d5e9ff,#f0f7ff 72%); }
  .globe-panel .globe-stage { inset: 0 0 54px; }
  .globe-panel > .note { position: absolute; left: 17px; right: 17px; bottom: 15px; margin: 0; padding-right: 0; }
  .globe-control { position: absolute; right: 16px; top: 14px; display: flex; gap: 6px; z-index: 5; }
  .globe-control button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #b9d1ef; border-radius: 9px; background: #ffffffeb; color: #2b5b9b; font-size: 18px; }
  .globe-control button:hover { background: #e9f2ff; }
  .channel-details .panel-head { align-items: start; }
  .channel-details .panel-head h2 { font-size: 17px; }
  .channel-details .country-title { margin: 14px 0; }
  .bank-ref .bank-logo { width: 75px; flex-shrink: 0; }
  .card-workspace { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(310px,.85fr); gap: 24px; align-items: stretch; }
  .selected-card-stage { display: grid; place-items: center; height: 285px; margin: 0 0 16px; padding: 12px; border-radius: 12px; background: radial-gradient(ellipse at 50% 62%,#e2efff,transparent 70%),#f6faff; overflow: hidden; }
  .selected-card-art { display: block; width: 100%; height: 100%; min-height: 0; }
  .client-art.selected-card-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .card-overview .card-selector { margin-bottom: 12px; }
  .active-card-details { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px; }
  .active-card-details p { color: var(--muted); font-size: 13px; margin-top: 4px; }
  .active-card-details > .kv { grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 14px; margin: 0; }
  .active-card-details > .actions { grid-column: 1/-1; }
  .quick-card-form .subtext { margin-bottom: 24px; font-size: 13px; }
  .quick-card-form > .button { margin-top: 19px; }
  .asset-banner { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: center; gap: 34px; padding: 0 36px 0 0; overflow: hidden; background: #fff; }
  .asset-banner picture { display: block; width: 100%; min-width: 0; }
  .asset-banner picture img { display: block; width: 100%; height: auto; object-fit: contain; }
  .asset-banner h2 { font-size: 24px; margin: 8px 0 12px; }
  .asset-banner p { max-width: 500px; color: var(--text); font-size: 14px; line-height: 1.9; }
  .asset-banner .text-link { margin-top: 13px; }
  .quote-notice { margin-bottom: 24px; }
  .quote-validity { margin-top: 10px; font-size: 12px; color: var(--muted); }
  .quote-summary { margin: 22px 0; padding: 0; font-size: 14px; }
  .quote-summary > div { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid #e0e9f5; }
  .quote-summary dt { color: var(--text-muted); }
  .quote-summary dd { margin: 0; color: var(--ink); font-weight: 550; text-align: right; font-variant-numeric: tabular-nums; }
  .quote-summary .quote-total { align-items: center; margin: 8px 0; padding: 16px; border: 1px solid #cbddf7; border-radius: 11px; background: #eaf2ff; }
  .quote-total dt { color: var(--ink); font-weight: 600; }
  .quote-total dd { color: var(--brand-700); font-size: 24px; line-height: 1.3; }
  .record-id { padding: 12px 14px; margin-top: 16px; border: 1px solid var(--line); border-radius: 9px; background: #f1f6fd; color: var(--ink); font: 13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; }

  .exchange-page .river-layout { grid-template-columns: minmax(0,1fr) 365px; align-items: start; }
  .exchange-page .river-stage { height: 280px; }
  .exchange-page .river-vis { inset: 46px 0 29px; }
  .exchange-page .river-engine { width: 70px; height: 70px; border-radius: 17px; }
  .exchange-page .coin { width: 49px; height: 49px; font-size: 24px; }
  .exchange-page .river-source, .exchange-page .river-target { gap: 6px; font-size: 12px; top: 35%; }
  .exchange-page .river-source { left: 6%; }
  .exchange-page .river-target { right: 6%; }
  .globe-footer { position: absolute; bottom: 17px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
  .exchange-page .engine-label { top: 86%; font-size: 12px; letter-spacing: 0; }
  .exchange-page .route-card { margin-top: 24px; padding: 24px; }
  .exchange-page .intro-steps { gap: 13px; }
  .exchange-page .exchange-input select { width: 92px; min-height: 42px; flex-shrink: 0; }
  .exchange-page .exchange-result { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
  .exchange-page .swap-form > .button { margin-top: 12px; }
  .exchange-page .swap-form .kv { font-size: 13px; }
  .network-dialog { width: 980px; }
  .hero-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; min-height: 156px; padding: 26px 30px; margin-bottom: 24px; border: 1px solid #d5e4f7; border-radius: 16px; color: var(--ink); overflow: hidden; background: radial-gradient(ellipse at 90% 0,#cde5ff,transparent 55%),linear-gradient(115deg,#fcfeff,#e8f2ff); }
  .hero-strip h2 { font-size: 23px; position: relative; z-index: 1; }
  .hero-strip p { margin-top: 9px; color: var(--text); font-size: 14px; }
  .hero-strip.has-art { min-height: 195px; padding-bottom: 72px; }
  .hero-strip.has-art > div:first-child { max-width: 65%; }
  .hero-strip.has-art > .button { position: absolute; left: 30px; bottom: 23px; z-index: 2; }
  .card-bottom > div { min-width: 0; max-width: calc(100% - 54px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pill-select { width: auto; min-height: 38px; }

  /* Supplied artwork uses original proportions and stays outside operational fields. */
  .transaction-query-row { display: grid; grid-template-columns: minmax(0,1fr) 112px; align-items: center; gap: 20px; margin-bottom: 22px; }
  .transaction-query-row .filters { margin-bottom: 0; }
  .transaction-art { width: 112px; height: 100px; pointer-events: none; }
  .client-art.transaction-art img { width: 100%; height: 100%; object-fit: contain; }
  .client-art { display: block; min-width: 0; }
  .client-art img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 12px; }
  .account-intro { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); overflow: hidden; }
  .account-opening-art { max-width: 480px; justify-self: end; width: 100%; }
  .connection-art { width: 130px; margin: 0 auto 14px; }
  .application-art { width: 145px; margin: 0 auto 20px; }
  .route-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
  .chain-operation-art { display: block; width: min(100%,220px); height: 160px; margin: 20px auto 0; pointer-events: none; }
  .chain-operation-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .profile-verification-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .profile-shield-art { width: 160px; flex: 0 0 160px; }
  .asset-review-page { max-width: 1050px; margin: 0 auto; padding: 36px 24px; }
  .asset-review-page > .panel { margin-top: 24px; }
  .asset-review-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 32px; }
  .asset-review-grid picture { display: block; }
  .asset-review-grid img { display: block; width: 100%; height: auto; border-radius: 12px; }
  .asset-review-grid h2 { margin-bottom: 16px; }
  .asset-review-grid p + p { margin-top: 16px; }
}



@layer responsive {
  @media (max-width: 1279px) {
    .metric { padding: 19px 17px; }
    .metric strong { font-size: 25px; }
    .metrics { gap: 12px; }
    .metric-title { font-size: 13px; }
    .metric-title .icon-box { width: 30px; height: 30px; }
    .two-col { grid-template-columns: minmax(0,1fr) 290px; gap: 20px; }
    .bank-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .form-layout { grid-template-columns: minmax(0,1fr) 295px; gap: 20px; }
    .exchange-page .river-layout { grid-template-columns: minmax(0,1fr) 340px; }
    .card-workspace { grid-template-columns: minmax(0,1fr) minmax(300px,.9fr); gap: 20px; }
    .asset-banner { gap: 24px; padding-right: 26px; }
    .asset-banner h2 { font-size: 22px; }
  }
  @media (max-width: 1100px) {
    .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .metrics.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .two-col, .two-equal, .form-layout, .swap-layout { grid-template-columns: minmax(0,1fr); }
    .form-summary { position: static; }
    .form-summary .summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
    .side-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
    .side-panels > .section { margin-top: 0; }
    .card-workspace { grid-template-columns: minmax(0,1fr); }
    .selected-card-stage { height: 295px; }
        .network-map-layout { grid-template-columns: minmax(0,1fr) 265px; gap: 18px; }
    .network-map-layout .globe-panel { min-height: 410px; }
    .exchange-page .river-layout { grid-template-columns: minmax(0,1fr); }
    .exchange-page .river-stage { height: 260px; }
    .exchange-page .route-card .intro-steps { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
    .exchange-page .route-card .intro-steps li { align-items: start; flex-direction: column; gap: 10px; }
    .role-permissions { grid-template-columns: minmax(0,1fr); }
    .network-explorer { grid-template-columns: minmax(0,1fr); }
    .network-globe { height: 330px; }
    .card-showcase { grid-template-columns: minmax(0,1fr); }
  }
  @media (max-width: 1024px) {
    :root { --sidebar-width: 200px; --shell-gutter: 20px; }
    main { padding: 24px var(--page-gutter,22px); }
    .nav-context { padding-left: 19px; }
    .account-intro { padding: 26px; gap: 25px; grid-template-columns: minmax(0,1.1fr) minmax(220px,.9fr); }
    .account-intro h2 { font-size: 26px; }
    .asset-banner { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
    .asset-banner h2 { font-size: 20px; }
  }
  @media (max-width: 960px) {
    .header-search { --search-width-base: 180px; }
    .header-search span, .header-search kbd { display: none; }
    :root { --identity-height: 48px; --product-height: 52px; --sidebar-width: 244px; --workbench-gutter: 16px; }
    .global-nav { gap: 0; }
    .global-nav-item { padding: 0 16px 0 var(--nav-leading,16px); }
    .global-nav-item.active::after { left: var(--nav-underline-left,14px); right: 14px; }
    #sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .2s,visibility .2s; box-shadow: 12px 0 35px #18375d16; }
    .nav-open #sidebar { transform: none; visibility: visible; }
    .has-sidebar .layout { margin-left: 0; padding-top: calc(var(--shell-height) + 52px); }
    .has-sidebar .context-menu-toggle { position: fixed; top: calc(var(--shell-height) + 8px); right: var(--shell-gutter); z-index: 26; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-control); border-radius: 10px; color: var(--brand-700); background: #fff; box-shadow: var(--shadow-card); }
    .context-menu-toggle > span { display: none; }
    .context-menu-toggle:hover { background: #edf4ff; }
    .nav-open .nav-scrim { display: block; position: fixed; inset: var(--shell-height) 0 0; z-index: 24; background: #203f6d42; backdrop-filter: blur(2px); }
    .metrics.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .card-workspace { grid-template-columns: minmax(0,1fr) minmax(295px,.85fr); }
    .network-map-layout { grid-template-columns: minmax(0,1fr) 270px; }
  }
  @media (max-width: 767px) {
    .top-actions { flex: 1 1 auto; justify-content: flex-end; }
    .user-chip .avatar { display: none; }
    .top-actions > .role-switch { width: 44px; flex: 0 0 44px; padding: 0; }
    .top-actions > .role-switch > span { display: none; }
    .user-chip { min-width: 44px; }
    .user-chip > div { display: block; }
    .top-actions { gap: 8px; }
    .page-title, .page-head { align-items: start; gap: 16px; }
    .page-title h1 { font-size: 25px; }
    .page-title p { font-size: 13px; }
    .account-intro { grid-template-columns: minmax(0,1fr); gap: 24px; }
    .account-intro .intro-steps { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
    .account-intro .intro-steps li { align-items: start; flex-direction: column; gap: 10px; }
    .card-workspace, .network-map-layout { grid-template-columns: minmax(0,1fr); }
    .network-map-layout .globe-panel { min-height: 350px; }
    .channel-details { padding: 5px; }
    .selected-card-stage { height: 285px; }
    .asset-banner { gap: 20px; }
    .asset-banner h2 { font-size: 19px; }
    .asset-banner p { font-size: 13px; }
    .network-controls { grid-template-columns: 155px minmax(0,1fr); }
    .network-controls > .button { grid-column: 1/-1; justify-self: start; }
    .mini-grid { grid-template-columns: minmax(0,1fr); }
    .balance-card { padding: 16px 12px; }
    .balance-card strong { font-size: 20px; }
    .metrics.three { grid-template-columns: minmax(0,1fr); }
    .network-section > .panel-head { flex-wrap: wrap; }
    .network-section > .panel-head .segmented { margin-top: 4px; }
    .network-teaser { flex-wrap: wrap; }
    .network-teaser > .button { margin-left: 110px; }
  }
  @media (max-width: 600px) {
    :root { --workbench-gutter: 10px; }
    .account-intro { grid-template-columns: minmax(0,1fr); }
    .account-opening-art { max-width: 360px; width: 85%; justify-self: center; }
    .route-intro { gap: 12px; }
    .profile-verification-head { gap: 12px; }
    .profile-shield-art { width: 100px; flex-basis: 100px; }
    .asset-review-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
    .asset-review-page { padding: 24px 16px; }

    body { --space-section: 20px; --panel-padding: 19px; --panel-radius: 14px; --control-height: 44px; --button-padding: 11px 14px; }
    :root { --shell-gutter: 12px; }
    .identity-bar { gap: 10px; }
    .brand { padding: 0; }
    .brand-mark { width: 28.8px; height: 24px; }
    .brand-word { font-size: 19.2px; }
    .user-chip .avatar { display: none; }
    .user-chip { padding: 0 4px; }
    .header-search { --search-width-base: clamp(60px,20vw,88px); padding: 0 10px; }
    .header-search span, .header-search kbd, .utility-help, .top-actions > .role-switch { display: none; }
    .top-actions { gap: 4px; }
    .top-actions > .role-tag { display: none; }
    .role-switch { width: 44px; padding: 0; }
    .role-switch > span { display: none; }
    .global-nav-item { padding: 0 14px 0 var(--nav-leading,14px); gap: 7px; }
    main { padding: 20px var(--page-gutter,16px) 24px; }
    .page-title { flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
    .page-title h1 { font-size: 25px; margin-bottom: 6px; }
    .page-title > .actions { width: 100%; }
    .page-title > .actions:empty { display: none; }
    .page-title p { font-size: 14px; }
    .button.small, .button.mini { min-height: 38px; font-size: 13px; padding: 8px 11px; }
    .panel-head { margin-bottom: 17px; gap: 10px; }
    .panel-head h2 { font-size: 17px; }
    .panel-head .tag { font-size: 12px; }
    .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
    .metric { padding: 16px 13px; }
    .metric-title { font-size: 13px; gap: 5px; align-items: start; }
    .metric-title .icon-box { display: none; }
    .metric strong { font-size: 22px; margin: 10px 0; letter-spacing: -.7px; }
    .metric strong small { font-size: 12px; font-weight: 400; letter-spacing: 0; }
    .metric small { display: block; line-height: 1.65; font-size: 12px; }
    .metric strong small { display: inline; }
    .metric > .text-link { font-size: 12px; margin-top: 8px; }
    .task-row { display: grid; grid-template-columns: 33px minmax(0,1fr); gap: 10px; padding: 13px; }
    .task-row .icon-box { width: 33px; height: 33px; border-radius: 9px; }
    .task-row h3 { font-size: 14px; }
    .task-row p { font-size: 12px; margin-top: 5px; }
    .task-row .text-link { grid-column: 2; margin-left: 0; justify-self: start; }
    .task-count { font-size: 12px; padding: 3px 7px; margin-left: 4px; }
    .side-panels, .two-equal, .balance-cards, .form-grid, .form-summary .summary-grid { grid-template-columns: minmax(0,1fr); }
    .balance-top { align-items: start; flex-direction: column; gap: 12px; }
    .balance-total { font-size: 28px; }
    .balance-card { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 0 12px; padding: 16px; }
    .balance-card .icon-box { grid-row: 1/4; margin: 0; }
    .balance-card strong { font-size: 23px; }
    .balance-card small { margin-top: 3px; font-size: 12px; }
    .currency-grid { grid-template-columns: minmax(0,1fr); }
    .currency-row { padding: 12px; font-size: 13px; }
    input, select, textarea { font-size: 16px; }
    .transaction-query-row { grid-template-columns: minmax(0,1fr); }
    .transaction-art { display: none; }
    .filters .search { min-width: 100%; }
    .filters label { min-width: 130px; }
    .filters > .button { flex: 1; }
    .account-intro { padding: 23px; }
    .account-intro h2 { font-size: 27px; }
    .account-intro .intro-steps { grid-template-columns: minmax(0,1fr); gap: 13px; }
    .account-intro .intro-steps li { align-items: center; flex-direction: row; gap: 13px; }
    .network-controls { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .network-controls > .button { grid-column: auto; }
    .account-list, .bank-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .account-list .bank-product { padding: 19px; }
    .network-map-layout .globe-panel { min-height: 330px; }
    .globe-control { right: 10px; top: 10px; }
    .globe-control button { width: 36px; height: 36px; }
    .globe-node { padding: 7px 9px; font-size: 12px; }
    .selected-card-stage { height: 260px; padding: 10px; }
          .card-overview .card-bottom strong { font-size: 12px; }
          .quick-card-form .panel-head { flex-wrap: wrap; }
    .active-card-details { gap: 12px 6px; }
    .active-card-details h3 { font-size: 15px; }
    .asset-banner { grid-template-columns: minmax(0,1fr); gap: 0; padding: 0; }
    .asset-banner > div { padding: 8px 23px 23px; }
    .asset-banner picture { max-height: none; }
    .asset-banner h2 { font-size: 22px; }
    .asset-banner p { font-size: 14px; }
    .exchange-page .river-stage { height: 255px; }
    .exchange-page .river-stage .panel-head { left: 17px; right: 17px; top: 18px; align-items: start; }
    .exchange-page .river-stage .panel-head h2 { font-size: 16px; }
    .exchange-page .river-stage .tag { font-size: 12px; }
    .exchange-page .river-engine { width: 57px; height: 57px; border-radius: 13px; }
    .exchange-page .river-engine small { font-size: 12px; letter-spacing: 0; }
    .exchange-page .coin { width: 42px; height: 42px; font-size: 22px; }
    .exchange-page .river-source { left: 5%; }
    .exchange-page .river-target { right: 5%; }
    .exchange-page .river-source, .exchange-page .river-target { font-size: 12px; }
    .exchange-page .river-source .tag, .exchange-page .river-target .tag { padding: 3px 5px; font-size: 12px; }
    .exchange-page .engine-label { font-size: 12px; top: 89%; }
    .globe-footer { left: 17px; right: 17px; bottom: 12px; font-size: 12px; }
    .exchange-page .route-card .intro-steps { grid-template-columns: minmax(0,1fr); gap: 14px; }
    .exchange-page .route-card .intro-steps li { flex-direction: row; align-items: center; }
    .exchange-page .route-card { padding: 19px; }
    .exchange-box { padding: 15px; }
    .exchange-input { gap: 10px; }
    .exchange-input input, .exchange-result { font-size: 26px; }
    .exchange-page .swap-form .kv { gap: 12px; font-size: 12px; }
    .table-footer { align-items: start; flex-wrap: wrap; font-size: 12px; }
    th, td { padding: 13px 12px; }
    .table-footer .actions { gap: 9px; }
    .bin-options { grid-template-columns: minmax(0,1fr); }
    .quantity-row { flex-wrap: wrap; }
    .network-explorer { gap: 16px; }
    .network-globe { height: 300px; }
    .dialog { padding: 28px 20px; border-radius: 16px; max-height: 90dvh; }
    .dialog h2 { font-size: 21px; }
    .overlay { padding: 12px; }
    .detail-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
    .hero-strip { padding: 23px; flex-direction: column; align-items: start; }
    .hero-strip h2 { font-size: 21px; }
    .hero-strip.has-art > div:first-child { max-width: 100%; }
    .hero-strip.has-art > .button { left: 23px; }
    .hero-strip .hero-art { display: none; }
    .network-teaser { padding: 20px; gap: 14px; }
    .teaser-orb-wrap { width: 75px; }
    .network-teaser > .button { margin-left: 0; }
    .bank-mini-strip { flex-wrap: wrap; gap: 9px; }
    .card-showcase { padding: 20px; }
    .card-preview-stage .preview-card { width: 248px; height: 162px; }
    .preview-footer { font-size: 12px; margin-top: 10px; }
    .status-timeline { overflow-x: auto; }
    .timeline-step { min-width: 76px; }
    footer { padding: 0 var(--footer-gutter,16px) 24px; flex-direction: column; gap: 4px; font-size: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}