:root {
  color-scheme: light;
  --ink: #1d3341;
  --ink-soft: #36505c;
  --muted: #74868d;
  --muted-light: #a6b2b6;
  --navy: #102533;
  --navy-deep: #0a1925;
  --teal: #16877f;
  --teal-dark: #116c68;
  --mint: #d9f1eb;
  --line: #e6ecee;
  --surface: #ffffff;
  --page: #f3f6f6;
  --gold: #bd9852;
  --danger: #b94f50;
  --shadow: 0 12px 32px rgba(23, 46, 56, .07);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--page); font-size: 12px; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(28, 158, 146, .28); outline-offset: 2px; }
a { color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

/* Desktop workspace */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); background: var(--page); }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; min-height: 620px; flex-direction: column; padding: 20px 13px 13px; overflow: auto; color: #e9f0f1; background: linear-gradient(165deg, #122938 0%, #0d202d 60%, #0b1b27 100%); border-right: 1px solid rgba(255,255,255,.04); scrollbar-width: thin; scrollbar-color: #31505a transparent; z-index: 10; }
.brand { display: flex; align-items: center; gap: 10px; padding: 1px 9px 19px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(108,207,183,.45); border-radius: 12px; background: linear-gradient(145deg, rgba(35,166,147,.24), rgba(28,84,91,.35)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.brand-mark svg { width: 26px; height: 26px; fill: none; stroke: #66d2b6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.brand-copy, .brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { color: #f5faf9; font-size: 17px; font-weight: 700; letter-spacing: -.055em; line-height: 1.05; }
.brand-copy strong span, .welcome-brand strong span { color: #63c9b1; }
.brand-copy small { margin-top: 4px; color: #78949c; font-size: 7px; font-weight: 700; letter-spacing: .17em; }
.environment-pill { display: flex; align-items: center; gap: 8px; margin: 0 5px 19px; padding: 8px 10px; border: 1px solid rgba(137,184,183,.16); border-radius: 8px; color: #a6c6c4; background: rgba(255,255,255,.04); font-size: 8px; font-weight: 650; letter-spacing: .05em; }
.environment-pill i, .pulse-dot, .tiny-dot, .welcome-live-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #4dc6a9; box-shadow: 0 0 0 3px rgba(77,198,169,.12); }
.environment-pill b { margin-left: auto; padding: 3px 5px; border: 1px solid rgba(210,173,102,.28); border-radius: 4px; color: #dcc389; font-size: 7px; letter-spacing: .1em; }
.nav-caption, .nav-section-label { padding: 0 10px; color: #6e8891; font-size: 7px; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.nav-caption { margin: 2px 0 8px; }
.primary-nav { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.nav-section-label { margin: 10px 0 3px; }
.nav-item { position: relative; display: flex; min-height: 35px; align-items: center; gap: 10px; width: 100%; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: #a8b9bd; background: transparent; cursor: pointer; text-align: left; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.nav-item:hover { color: #f4fbf8; background: rgba(255,255,255,.07); }
.nav-item:active { transform: translateY(1px); }
.nav-item.active { border-color: rgba(76,192,169,.18); color: #eafff9; background: linear-gradient(90deg, rgba(34,158,140,.23), rgba(34,158,140,.1)); box-shadow: inset 2px 0 #4bc4aa; }
.nav-item.exchange-nav { color: #d7c28d; }
.nav-item.exchange-nav.active { color: #fff3cf; background: linear-gradient(90deg, rgba(177,143,72,.2), rgba(177,143,72,.08)); box-shadow: inset 2px 0 #ceb16e; }
.nav-icon { display: grid; width: 17px; height: 17px; flex: 0 0 17px; place-items: center; color: inherit; }
.nav-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.nav-label { overflow: hidden; flex: 1; font-size: 10px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { display: inline-grid; min-width: 18px; height: 18px; place-items: center; padding: 0 4px; border: 1px solid rgba(228,181,102,.2); border-radius: 99px; color: #f1d599; background: rgba(181,121,45,.16); font-size: 8px; font-weight: 700; }
.nav-divider { height: 1px; margin: 8px 8px 3px; background: rgba(224,242,241,.09); }
.sidebar-bottom { margin-top: auto; padding-top: 14px; }
.side-control-card { display: flex; align-items: center; gap: 8px; margin: 0 3px 10px; padding: 10px 9px; border: 1px solid rgba(125,176,178,.14); border-radius: 9px; background: rgba(255,255,255,.045); }
.side-control-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #85cec0; background: rgba(38,156,141,.16); font-size: 13px; }
.side-control-card > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.side-control-card strong { color: #d2e1e0; font-size: 8px; font-weight: 650; }
.side-control-card small { color: #789097; font-size: 7px; }
.control-led { width: 5px; height: 5px; border-radius: 50%; background: #58c79c; box-shadow: 0 0 0 3px rgba(88,199,156,.1); }
.operator-profile { display: flex; align-items: center; gap: 8px; padding: 9px 6px 2px; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 50%; color: #e8fffa; font-size: 9px; font-weight: 750; }
.avatar-teal { background: linear-gradient(145deg, #2a9e92, #17685f); }
.operator-meta { display: grid; flex: 1; gap: 3px; min-width: 0; }
.operator-meta strong { overflow: hidden; color: #dce8e8; font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.operator-meta small { overflow: hidden; color: #748e95; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.main-area { display: flex; min-width: 0; min-height: 100vh; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 8; display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 27px; border-bottom: 1px solid #e8edef; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.topbar-left, .topbar-actions, .breadcrumbs, .topbar-context { display: flex; align-items: center; }
.topbar-left { min-width: 0; gap: 13px; }
.breadcrumbs { gap: 8px; color: #96a5a9; font-size: 9px; white-space: nowrap; }
.breadcrumbs b { color: #c6d0d2; font-weight: 400; }
.breadcrumbs strong { max-width: 160px; overflow: hidden; color: #36515d; font-size: 10px; font-weight: 690; text-overflow: ellipsis; }
.topbar-divider { width: 1px; height: 18px; background: #e6ecee; }
.topbar-context { gap: 7px; color: #84949a; font-size: 8px; white-space: nowrap; }
.topbar-context .pulse-dot { width: 5px; height: 5px; flex-basis: 5px; }
.context-sep { color: #c0cbce; }
.background-loop-indicator { max-width: 190px; overflow: hidden; color: #47887c; font-size: 7px; text-overflow: ellipsis; }
.background-loop-indicator.paused { color: #9a7d43; }
.topbar-actions { gap: 9px; }
.global-search { display: flex; width: min(250px, 22vw); height: 32px; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid #e7edef; border-radius: 7px; color: #8b9a9f; background: #fbfcfc; }
.global-search:focus-within { border-color: #a9d5cd; background: #fff; box-shadow: 0 0 0 3px rgba(35,153,138,.08); }
.search-icon { color: #8a9ba0; font-size: 14px; }
.global-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 8px; }
.global-search input::placeholder { color: #a0adb1; }
.global-search kbd { flex: 0 0 auto; padding: 2px 4px; border: 1px solid #e6ebed; border-radius: 4px; color: #9aa7ab; background: #fff; font-size: 7px; }
.icon-button, .top-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; padding: 0; border: 1px solid #e6ecee; border-radius: 8px; color: #61757d; background: #fff; cursor: pointer; transition: .15s ease; }
.icon-button:hover, .top-avatar:hover { border-color: #bfd7d5; color: var(--teal); background: #f7fbfa; }
.icon-button.compact { width: 25px; height: 25px; flex-basis: 25px; border-color: rgba(255,255,255,.08); color: #80979b; background: rgba(255,255,255,.04); }
.icon-button span { font-size: 13px; }
.notifications-button { position: relative; font-size: 14px; }
.notifications-button i { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; background: #e0a45a; }
.language-select { max-width: 95px; height: 31px; padding: 0 22px 0 8px; border: 1px solid #e6ecee; border-radius: 7px; color: #587078; background: #fff; font-size: 8px; cursor: pointer; }
.top-avatar { border-radius: 50%; color: #fff; background: #287e77; font-size: 8px; font-weight: 750; }
.menu-toggle { display: none; }
.main-content { width: 100%; max-width: 1650px; flex: 1; margin: 0 auto; padding: 24px 28px 30px; outline: 0; }
.app-footer { display: flex; min-height: 35px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 28px 10px; color: #71858a; font-size: 8px; }
.app-footer > span { display: inline-flex; align-items: center; gap: 5px; }
.footer-lock { color: #6ea89f; font-size: 9px; }
.footer-sep { color: #aab8bb; }
.screen-watermark { position: fixed; right: 12px; bottom: 42px; z-index: 30; padding: 5px 8px; border: 1px solid rgba(94,121,125,.25); border-radius: 4px; color: #60787d; background: rgba(255,255,255,.94); font-size: 7px; font-weight: 760; letter-spacing: .1em; line-height: 1.1; pointer-events: none; user-select: none; box-shadow: 0 2px 10px rgba(27,54,62,.06); }
.screen-watermark::before { content: none; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.page-title-wrap { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: #82959a; font-size: 7px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.tiny-dot { width: 5px; height: 5px; flex-basis: 5px; }
.page-heading h1 { margin: 6px 0 5px; color: #203846; font-size: clamp(21px, 2vw, 27px); font-weight: 680; letter-spacing: -.045em; line-height: 1.14; }
.page-subtitle { max-width: 790px; margin: 0; color: #87979c; font-size: 9px; line-height: 1.55; }
.page-watermark { display: inline-block; margin-top: 5px; color: #a7b2b5; font-size: 6px; font-weight: 750; letter-spacing: .12em; }
.heading-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.grid { display: grid; gap: 14px; min-width: 0; }
.grid.two-col { grid-template-columns: minmax(0, 1.55fr) minmax(285px, .9fr); }
.grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.settings-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr); }

/* Buttons, panels, forms */
.btn { display: inline-flex; min-height: 31px; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #dfe7e9; border-radius: 7px; color: #526a72; background: #fff; box-shadow: 0 1px 2px rgba(25,55,63,.025); cursor: pointer; font-size: 8px; font-weight: 640; line-height: 1.2; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn:hover:not(:disabled) { border-color: #b8d6d1; color: #176f69; background: #f8fcfb; box-shadow: 0 3px 8px rgba(26,103,95,.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { border-color: #187b74; color: #fff; background: linear-gradient(135deg, #218f84, #176e6b); box-shadow: 0 4px 10px rgba(20,117,108,.15); }
.btn.primary:hover:not(:disabled) { border-color: #105f5c; color: #fff; background: linear-gradient(135deg, #1d8178, #135e5d); }
.btn.soft-teal { border-color: #cfe7e2; color: #237b72; background: #f1faf7; }
.btn.danger { border-color: #f0d7d5; color: #a84d4c; background: #fffafa; }
.btn.danger:hover:not(:disabled) { border-color: #e9b5b1; color: #953e3d; background: #fff3f2; }
.btn.small { min-height: 25px; padding: 0 7px; border-radius: 6px; font-size: 7px; }
.btn-icon { display: inline-flex; width: 13px; height: 13px; align-items: center; justify-content: center; }
.btn-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.btn:disabled, button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.panel { min-width: 0; padding: 14px; border: 1px solid #e7edef; border-radius: 11px; background: var(--surface); box-shadow: 0 3px 12px rgba(25,52,62,.025); }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-title { margin: 0; color: #2a424f; font-size: 11px; font-weight: 680; letter-spacing: -.015em; }
.panel-description { margin: 4px 0 0; color: #97a3a8; font-size: 8px; line-height: 1.45; }
.panel-actions, .panel-actions .btn { display: flex; align-items: center; gap: 6px; }
.panel-link { padding: 0; border: 0; color: #478e84; background: transparent; cursor: pointer; font-size: 8px; font-weight: 650; text-decoration: none; }
.panel-link:hover { color: #155e59; text-decoration: underline; }
.section-label { margin: 0 0 8px; color: #546b73; font-size: 9px; font-weight: 690; }
.light-divider { height: 1px; margin: 12px 0; background: #edf1f2; }

/* Summary cards and dashboards */
.metrics-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin-bottom: 15px; }
.metric-card { position: relative; min-height: 105px; padding: 14px 14px 12px; overflow: hidden; border: 1px solid #e6edef; border-radius: 10px; background: #fff; box-shadow: 0 3px 11px rgba(28,53,63,.03); }
.metric-card::after { position: absolute; right: -19px; bottom: -29px; width: 74px; height: 74px; border: 1px solid rgba(31,140,129,.08); border-radius: 50%; content: ''; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #84969c; font-size: 8px; }
.metric-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: #25887e; background: #eaf7f3; }
.metric-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.metric-value { display: block; margin-top: 9px; color: #27414d; font-size: 21px; font-weight: 690; letter-spacing: -.05em; line-height: 1.05; }
.metric-foot { margin-top: 6px; color: #98a6aa; font-size: 7px; }
.metric-spark { position: absolute; right: 12px; bottom: 10px; width: 55px; height: 20px; opacity: .55; }
.stats-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.stat-tile { min-width: 0; padding: 11px 12px; border: 1px solid #e7edef; border-radius: 9px; background: #fff; }
.stat-tile small { display: block; overflow: hidden; color: #87999e; font-size: 7px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.stat-tile strong { display: block; margin-top: 5px; color: #2b4652; font-size: 16px; font-weight: 690; letter-spacing: -.035em; line-height: 1.12; }
.stat-tile span { display: block; margin-top: 4px; color: #a2adb0; font-size: 7px; line-height: 1.3; }
.balance-total { margin: -1px -1px 10px; padding: 12px; border-radius: 8px; color: #e9f5f4; background: linear-gradient(130deg, #153b45, #195b5b 72%, #247766); }
.balance-total-top { display: flex; justify-content: space-between; gap: 8px; color: #a9d0cb; font-size: 7px; }
.balance-total > strong { display: block; margin: 11px 0 4px; color: #fff; font-size: 22px; font-weight: 690; letter-spacing: -.045em; }
.balance-total > small { color: #a8c9c5; font-size: 7px; }
.balance-chip { padding: 3px 6px; border: 1px solid rgba(197,232,220,.21); border-radius: 99px; color: #dbede7; }
.chart-canvas { min-height: 183px; padding: 2px 0 0; }
.chart-canvas svg { width: 100%; height: 180px; overflow: visible; }
.chart-gridline { stroke: #eef2f3; stroke-dasharray: 3 5; stroke-width: 1; }
.chart-label { fill: #9aa8ac; font-size: 8px; }
.chart-area { fill: url(#chartFill); }
.chart-line, .chart-line-secondary { fill: none; stroke: #2e9c8e; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.chart-line-secondary { stroke: #aecfc9; stroke-dasharray: 4 5; stroke-width: 1.3; }
.chart-last-point { fill: #fff; stroke: #2a9a8b; stroke-width: 3; }
.chart-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #91a0a4; font-size: 7px; }
.lower-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(270px,.85fr); gap: 14px; margin-top: 14px; }
.balance-total + .bank-account-list { margin-top: 4px; }
.branch-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.branch-pill { padding: 5px 7px; border: 1px solid #e7eeef; border-radius: 6px; color: #7c9197; background: #fafcfc; font-size: 7px; }

/* Tables, filters, data detail */
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; padding: 10px 12px; border-bottom: 1px solid #edf1f2; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.filter-search { display: flex; min-width: 180px; height: 29px; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #e5ecee; border-radius: 6px; color: #92a0a4; background: #fff; }
.filter-search svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.filter-search input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 8px; }
.filter-select, .form-control { min-height: 29px; padding: 0 24px 0 8px; border: 1px solid #e4ebed; border-radius: 6px; color: #526a72; background: #fff; font-size: 8px; }
.table-wrap { width: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #cad8da transparent; }
table { width: 100%; border-collapse: separate; border-spacing: 0; color: #50656e; font-size: 8px; }
th, td { padding: 9px 10px; border-bottom: 1px solid #eff2f3; text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; color: #8b9ba0; background: #fbfcfc; font-size: 7px; font-weight: 690; letter-spacing: .035em; white-space: nowrap; }
td { line-height: 1.45; }
tbody tr:hover td { background: #fbfdfd; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: #3a535d; font-weight: 650; }
td small, .sub-cell { display: block; margin-top: 3px; color: #9aa7ab; font-size: 7px; line-height: 1.4; }
.num, .num th, .num td { text-align: right; }
.mono { color: #5b737a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 7.5px; letter-spacing: .01em; }
.muted { color: #a6b1b4; }
.table-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid #edf1f2; color: #9aa7ab; font-size: 7px; }
.pager-actions { display: flex; align-items: center; gap: 5px; }
.pager-actions button { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #e3eaec; border-radius: 5px; color: #6d8288; background: #fff; cursor: pointer; }
.customer-cell { display: flex; align-items: center; gap: 7px; max-width: 220px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.customer-cell > span:last-child { display: grid; min-width: 0; }
.customer-cell strong { overflow: hidden; color: #415b65; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.customer-cell small { margin-top: 3px; color: #98a6aa; font-size: 7px; }
.customer-avatar, .customer-avatar.business { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 1px solid #d9eae5; border-radius: 50%; color: #367c73; background: #edf7f3; font-size: 7px; font-weight: 730; }
.customer-avatar.business { border-color: #eee5d1; color: #947842; background: #faf6eb; border-radius: 7px; }
.badge { display: inline-flex; min-height: 19px; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid #e6ecee; border-radius: 999px; color: #77898f; background: #f8fafb; font-size: 7px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.badge.success { border-color: #d9ece5; color: #397d6c; background: #eff8f3; }
.badge.warning { border-color: #f0e6cd; color: #9a7b3e; background: #fcf8ec; }
.badge.danger { border-color: #f1dada; color: #a75757; background: #fff4f3; }
.badge.info { border-color: #dce9eb; color: #567e85; background: #f2f8f8; }
.badge.neutral { color: #87969a; background: #f7f9fa; }
.empty-state { display: grid; min-height: 74px; place-items: center; padding: 18px; color: #a0adb0; font-size: 8px; text-align: center; }
.activity-list { display: grid; }
.activity-row { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #eff2f3; }
.activity-row:last-child { border-bottom: 0; }
.activity-icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid #dcece6; border-radius: 8px; color: #3b9182; background: #f0f8f5; }
.activity-icon.out { border-color: #f0e7dc; color: #b48652; background: #fcf8f2; }
.activity-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.activity-copy { display: grid; flex: 1; min-width: 0; gap: 3px; }
.activity-copy strong { overflow: hidden; color: #4d646d; font-size: 8px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy small { overflow: hidden; color: #9ba8ac; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.activity-amount { display: grid; justify-items: end; gap: 3px; color: #ac7857; font-size: 8px; font-weight: 680; white-space: nowrap; }
.activity-amount.in, .amount-positive, .print-positive { color: #368671; }
.amount-negative { color: #af7959; }
.customer-summary { display: flex; align-items: center; gap: 12px; }
.customer-summary-copy { display: grid; gap: 4px; }
.customer-summary-copy strong { color: #38505b; font-size: 10px; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.detail-cell { min-width: 0; padding: 9px; border: 1px solid #edf1f2; border-radius: 7px; background: #fbfcfc; }
.detail-cell small { display: block; color: #94a1a5; font-size: 7px; }
.detail-cell strong { display: block; margin-top: 4px; overflow-wrap: anywhere; color: #4e6570; font-size: 8px; font-weight: 650; }

/* Messages and local-only notices */
.notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; border: 1px solid #e6ecee; border-radius: 8px; color: #71838a; background: #f8fafb; font-size: 8px; line-height: 1.55; }
.notice > b { display: grid; width: 15px; height: 15px; flex: 0 0 15px; place-items: center; border-radius: 50%; color: #5c8589; background: #e9f3f3; font-size: 8px; }
.notice.info { border-color: #dcebed; color: #648087; background: #f3f9f9; }
.notice.warn, .notice.warning { border-color: #efe5cc; color: #8f794c; background: #fcf8ed; }
.notice.warn > b, .notice.warning > b { color: #977b43; background: #f6edd7; }
.notice.danger { border-color: #efd8d6; color: #9a6562; background: #fff6f5; }
.notice.danger > b { color: #a85b58; background: #f8e3e1; }
.security-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 8px 9px; border: 1px solid #e5efec; border-radius: 7px; color: #80918f; background: #f8fcfa; font-size: 7px; }
.security-strip strong { color: #508176; font-size: 7px; }
.form-banner { padding: 9px 10px; border: 1px solid #e5edef; border-radius: 7px; color: #75888e; background: #f8fbfb; font-size: 8px; line-height: 1.55; }
.form-banner.warn { border-color: #eee4cb; color: #8b784e; background: #fcf8ec; }
.form-banner.danger { border-color: #efd8d6; color: #9e5d5a; background: #fff5f4; }

/* Forms and overlays */
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.form-field { display: grid; min-width: 0; gap: 5px; color: #687d84; font-size: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field > label { color: #62777e; font-size: 8px; font-weight: 650; }
.form-field input:not([type="checkbox"]), .form-field select, .form-field textarea, .form-control { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid #dfe8ea; border-radius: 6px; outline: 0; color: #3f5962; background: #fff; font-size: 9px; }
.form-field textarea { min-height: 78px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #a5d0c8; box-shadow: 0 0 0 3px rgba(27,139,128,.08); }
.form-field input[readonly], .form-field input:disabled { color: #84959a; background: #f7f9fa; }
.form-field input[type="checkbox"], .form-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: #21887e; }
.form-help { color: #98a6aa; font-size: 7px; line-height: 1.45; }
.form-check { display: flex; align-items: flex-start; gap: 8px; color: #637980; line-height: 1.5; cursor: pointer; }
.form-check input { flex: 0 0 auto; margin: 1px 0 0; }
.form-check span { min-width: 0; }
.checklist-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.checklist-item { padding: 8px; border: 1px solid #e8edef; border-radius: 6px; background: #fbfcfc; }
.modal-scrim, .drawer-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(10,26,36,.47); backdrop-filter: blur(3px); }
.modal-panel { width: min(520px, 100%); max-height: min(90vh, 850px); overflow: auto; border: 1px solid rgba(255,255,255,.75); border-radius: 13px; background: #fff; box-shadow: 0 24px 80px rgba(4,22,30,.26); animation: modal-in .17s ease-out; }
.modal-panel.wide { width: min(760px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header, .drawer-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 17px 12px; border-bottom: 1px solid #edf1f2; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); }
.modal-header h2, .drawer-header h2 { margin: 0; color: #294450; font-size: 14px; font-weight: 690; letter-spacing: -.025em; }
.modal-header p, .drawer-header p { margin: 4px 0 0; color: #8d9b9f; font-size: 8px; line-height: 1.45; }
.modal-close { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid #e7edef; border-radius: 7px; color: #829398; background: #fff; cursor: pointer; }
.modal-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.modal-body { display: grid; gap: 13px; padding: 15px 17px 17px; }
.modal-demo-footer { position: sticky; bottom: 0; z-index: 3; display: block; padding: 8px 17px 9px; border-top: 1px solid #edf1f2; color: #74868a; background: rgba(255,255,255,.97); text-align: right; font-size: 7px; font-weight: 750; letter-spacing: .1em; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.drawer-scrim { display: flex; justify-content: flex-end; padding: 0; background: rgba(10,26,36,.35); }
.drawer { display: flex; width: min(560px, 100%); height: 100%; flex-direction: column; overflow: auto; background: #fff; box-shadow: -20px 0 50px rgba(7,25,34,.16); animation: drawer-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(20px); opacity: .5; } to { transform: translateX(0); opacity: 1; } }
.drawer-header { position: sticky; }
.drawer-body { display: grid; flex: 1; align-content: start; gap: 12px; padding: 15px 17px 30px; }
.drawer .modal-demo-footer { margin-top: auto; flex: 0 0 auto; }
.toast-region { position: fixed; right: 17px; bottom: 27px; z-index: 100; display: grid; width: min(360px, calc(100vw - 34px)); gap: 7px; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid #dcece5; border-radius: 9px; color: #53746a; background: #f5fbf7; box-shadow: 0 8px 28px rgba(17,46,49,.16); font-size: 8px; line-height: 1.45; animation: toast-in .2s ease-out; }
.toast > span:first-child { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border-radius: 50%; color: #fff; background: #4aa27e; font-size: 8px; font-weight: 750; }
.toast.warning { border-color: #eee2c3; color: #887649; background: #fffcf3; }
.toast.warning > span:first-child { background: #b69653; }
.toast.error { border-color: #efd7d4; color: #965b58; background: #fff7f6; }
.toast.error > span:first-child { background: #b65d58; }
@keyframes toast-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Card lifecycle */
.card-banner { position: relative; min-height: 170px; overflow: hidden; padding: 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; color: #e8f8f6; background: radial-gradient(circle at 80% 4%,rgba(67,183,162,.4),transparent 30%),linear-gradient(130deg,#0f293b,#145453 75%,#21786d); box-shadow: 0 9px 20px rgba(12,58,60,.13); }
.card-banner::after { position: absolute; right: -24px; bottom: -64px; width: 158px; height: 158px; border: 1px solid rgba(228,255,248,.1); border-radius: 50%; content: ''; }
.card-banner-label, .card-holder-row { display: flex; justify-content: space-between; gap: 8px; color: #b6d8d4; font-size: 7px; font-weight: 680; letter-spacing: .09em; }
.card-chip { width: 26px; height: 19px; margin-top: 18px; border: 1px solid rgba(242,216,158,.7); border-radius: 5px; background: linear-gradient(135deg,rgba(236,212,160,.8),rgba(159,137,93,.66)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.card-number { margin-top: 14px; color: #f1f8f4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 570; letter-spacing: .13em; }
.card-holder-row { margin-top: 12px; color: #c0deda; font-size: 6px; letter-spacing: .04em; }
.card-brand { position: absolute; right: 15px; bottom: 13px; color: #e7f7f1; font-size: 13px; font-weight: 720; letter-spacing: -.05em; }
.card-brand span { color: #69d0b3; }
.card-table-actions { display: flex; min-width: 195px; flex-wrap: wrap; gap: 4px; }
.card-portal-actions { display: flex !important; flex: 0 0 auto !important; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 285px; }

/* Customer, account, branch, ATM and operations modules */
.bank-account-list { display: grid; }
.bank-account-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eff2f3; }
.bank-account-row:last-child { border-bottom: 0; }
.bank-account-left { display: flex; min-width: 0; align-items: center; gap: 8px; }
.bank-account-icon { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border-radius: 7px; color: #548e83; background: #edf7f3; }
.bank-account-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.bank-account-left > div { display: grid; min-width: 0; gap: 3px; }
.bank-account-left strong { overflow: hidden; color: #4b636b; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.bank-account-left small { overflow-wrap: anywhere; color: #98a6aa; font-size: 7px; }
.bank-account-amount { display: grid; flex: 0 0 auto; justify-items: end; gap: 3px; color: #46606a; font-size: 8px; font-weight: 670; }
.branch-grid, .market-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.branch-card, .market-card { min-width: 0; padding: 13px; border: 1px solid #e5edef; border-radius: 10px; background: #fff; box-shadow: 0 3px 12px rgba(25,52,62,.025); }
.branch-card-top, .market-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.branch-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #488e83; background: #edf7f3; }
.branch-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.branch-card h3, .market-card h3 { margin: 10px 0 4px; color: #304b56; font-size: 10px; font-weight: 680; }
.branch-card > p, .market-card > p { margin: 0; color: #8c9ba0; font-size: 7px; line-height: 1.5; }
.branch-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf1f2; }
.branch-meta > div, .market-detail { display: grid; gap: 3px; }
.branch-meta small, .market-detail small { color: #9aa7ab; font-size: 7px; }
.branch-meta strong, .market-detail strong { color: #526970; font-size: 8px; font-weight: 650; }
.market-flag { font-size: 19px; }
.market-detail { margin-top: 10px; padding-top: 8px; border-top: 1px solid #eff2f3; }
.market-detail .source-link { color: #438b83; font-size: 7px; }
.market-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #eff2f3; color: #9ba7aa; font-size: 7px; }
.atm-card { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 11px; border: 1px solid #e8edef; border-radius: 9px; background: #fff; }
.atm-icon { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 8px; color: #4a8790; background: #eef7f8; }
.atm-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.atm-card-main { display: grid; flex: 1; min-width: 0; gap: 3px; }
.atm-card-main strong { overflow: hidden; color: #435c66; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.atm-card-main small, .atm-card-right small { color: #99a6aa; font-size: 7px; }
.atm-card-right { display: grid; justify-items: end; gap: 4px; color: #506a72; font-size: 8px; }
.cash-stack { display: grid; gap: 9px; }
.cash-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.credit-summary { display: grid; gap: 1px; }
.credit-summary-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eff2f3; color: #829197; font-size: 8px; }
.credit-summary-row strong { color: #4b636c; font-size: 8px; }
.timeline { display: grid; gap: 2px; }
.timeline-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eff2f3; }
.timeline-item:last-child { border-bottom: 0; }
.timeline-dot { width: 7px; height: 7px; flex: 0 0 7px; border: 1px solid #80b8aa; border-radius: 50%; background: #d8eee6; }
.timeline-dot.warn { border-color: #c7a36a; background: #f5e9cf; }
.timeline-text { display: grid; flex: 1; min-width: 0; gap: 3px; }
.timeline-text strong { overflow: hidden; color: #4d656d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.timeline-text small, .timeline-date { color: #98a6aa; font-size: 7px; }
.timeline-date { flex: 0 0 auto; }
.audit-list { display: grid; }
.audit-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; border-bottom: 1px solid #eff2f3; }
.audit-row:last-child { border-bottom: 0; }
.audit-mark { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; color: #6b9389; background: #edf6f2; }
.audit-mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.audit-copy { display: grid; flex: 1; min-width: 0; gap: 3px; }
.audit-copy strong { color: #526a72; font-size: 8px; font-weight: 650; }
.audit-copy small { color: #98a5a9; font-size: 7px; line-height: 1.4; }
.audit-date { flex: 0 0 auto; color: #9aa7aa; font-size: 7px; }
.setting-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f2; }
.setting-row:last-child { border-bottom: 0; }
.setting-row-copy { display: grid; min-width: 0; gap: 4px; }
.setting-row-copy strong { color: #526a71; font-size: 8px; font-weight: 660; }
.setting-row-copy small { color: #99a6aa; font-size: 7px; line-height: 1.5; }
.background-status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 8px 0; }
.background-status-cell { display: grid; gap: 4px; padding: 8px; border: 1px solid #edf1f2; border-radius: 6px; background: #fbfcfc; }
.background-status-cell small { color: #98a5a9; font-size: 7px; }
.background-status-cell strong { color: #526a72; font-size: 8px; }
.background-check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f2; color: #63777d; font-size: 8px; }
.background-check-row label { display: grid; gap: 4px; }
.background-check-row small { color: #98a5a9; font-size: 7px; }
.background-check-row input { width: 14px; height: 14px; accent-color: var(--teal); }
.regulatory-source-list { max-height: 480px; overflow: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #c7d6d8 transparent; }
.regulatory-source-list .setting-row { min-height: 43px; }
.regulatory-source-list .setting-row-copy strong { line-height: 1.45; }
.source-link { color: #4d8c82; font-size: 7px; text-decoration: underline; text-decoration-color: #d5e4e1; text-underline-offset: 2px; }
.role-level-chip { display: inline-grid; width: 23px; height: 23px; place-items: center; border: 1px solid #e2e9eb; border-radius: 6px; color: #71878d; background: #f8fafb; font-size: 7px; font-weight: 700; }
.role-row-active td { background: #f1f8f6; }

/* Exchange and market reference modules */
.exchange-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 16px; border: 1px solid #e5e8df; border-radius: 11px; background: linear-gradient(115deg, #fff, #faf9f3 65%, #f4f4ec); }
.exchange-hero h2 { margin: 5px 0; color: #354949; font-size: 16px; font-weight: 680; letter-spacing: -.03em; }
.exchange-hero p { max-width: 690px; margin: 0; color: #82918e; font-size: 8px; line-height: 1.55; }
.exchange-hero-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.exchange-tabs { display: flex; align-items: center; gap: 5px; padding: 3px; border: 1px solid #e7ece9; border-radius: 8px; background: #f8faf8; }
.exchange-tabs button { min-height: 27px; padding: 0 9px; border: 0; border-radius: 6px; color: #85928b; background: transparent; cursor: pointer; font-size: 8px; }
.exchange-tabs button.active { color: #705d34; background: #fff; box-shadow: 0 1px 4px rgba(40,54,43,.09); }
.rate-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.rate-card { min-width: 0; padding: 10px; border: 1px solid #e8edeb; border-radius: 8px; background: #fff; }
.rate-card-top { display: flex; align-items: center; gap: 7px; color: #5b7174; font-size: 8px; }
.rate-card-top small { color: #9ca9a7; }
.rate-token { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #dcece5; border-radius: 50%; color: #428679; background: #eff8f3; font-size: 7px; font-weight: 720; }
.rate-token.crypto { border-color: #ece4d0; color: #a1854f; background: #faf6e9; }
.rate-card > strong { display: block; margin: 10px 0 4px; color: #435f64; font-size: 11px; font-weight: 690; }
.rate-card > small { color: #9aa7a4; font-size: 7px; }
.quote-box { padding: 11px; border: 1px solid #e3ece9; border-radius: 8px; background: #f8fbf9; }
.quote-box-row, .quote-box-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; color: #7f918e; font-size: 8px; }
.quote-box-row strong, .quote-box-total strong { color: #4b6964; font-size: 8px; }
.quote-box-total { margin-top: 4px; padding-top: 9px; border-top: 1px solid #e5ece8; color: #54756d; font-weight: 670; }
.market-planner { padding: 13px; border: 1px solid #e5edef; border-radius: 10px; background: #fff; }
.market-planner-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.market-planner-header h2 { margin: 0; color: #3a525a; font-size: 10px; }
.market-planner-header p { margin: 4px 0 0; color: #94a2a5; font-size: 7px; }
.optional-market-panel { border-color: #dfe9ed; background: linear-gradient(135deg, #fff, #f9fcfc); }
.optional-market-panel .panel-header { margin-bottom: 9px; }
.market-feed-status { display: flex; align-items: center; gap: 7px; color: #778b92; font-size: 8px; }
.market-feed-status i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #c0a465; }
.market-feed-status i.ready { background: #48a981; box-shadow: 0 0 0 3px rgba(72,169,129,.1); }
.market-feed-result { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; margin-top: 9px; padding: 9px 11px; border: 1px solid #d7ebe4; border-radius: 8px; background: #f4faf7; }
.market-feed-result strong { color: #285e58; font-size: 14px; font-weight: 700; }
.market-feed-result small { color: #78928d; font-size: 7px; }
.market-feed-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.market-feed-controls .source-link { color: #66858c; font-size: 8px; text-decoration: none; }
.market-feed-controls .source-link:hover { color: #167f76; text-decoration: underline; }
.market-feed-notice { margin-top: 10px; font-size: 7px; line-height: 1.55; }

/* Checker, support, AML, complaints and message previews */
.checker-result, .checker-placeholder { margin-top: 11px; padding: 12px; border: 1px solid #e3eceb; border-radius: 8px; background: #f8fbfa; }
.checker-result-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.checker-result-top strong { color: #47645f; font-size: 9px; }
.checker-result p { margin: 8px 0 5px; color: #657d7b; font-size: 8px; line-height: 1.5; }
.checker-result small { color: #9aa7a5; font-size: 7px; line-height: 1.5; }
.checker-placeholder { display: flex; min-height: 108px; flex-direction: column; align-items: center; justify-content: center; color: #9aa9a9; text-align: center; }
.checker-placeholder svg { width: 23px; height: 23px; fill: none; stroke: #8cb4ac; stroke-width: 1.5; }
.checker-placeholder p { max-width: 290px; font-size: 8px; line-height: 1.5; }
.reference-check-form { display: grid; grid-template-columns: minmax(170px,.7fr) minmax(250px,1.3fr) auto; align-items: end; gap: 9px; }
.reference-check-form .btn { min-height: 34px; }
.command-popover { position: fixed; top: 54px; right: 207px; z-index: 45; width: min(370px, calc(100vw - 32px)); overflow: hidden; border: 1px solid #e2e9eb; border-radius: 9px; background: #fff; box-shadow: 0 14px 36px rgba(13,36,45,.16); }
.command-title { padding: 9px 11px; border-bottom: 1px solid #edf1f2; color: #92a0a4; font-size: 7px; }
.command-result { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 11px; border: 0; border-bottom: 1px solid #f0f3f4; color: #557078; background: #fff; cursor: pointer; text-align: left; }
.command-result:hover { background: #f6faf9; }
.command-result > span:last-child { display: grid; gap: 3px; }
.command-result strong { font-size: 8px; }
.command-result small { color: #9ba8ab; font-size: 7px; }
.compliance-mini { display: grid; gap: 8px; }
.compliance-mini-title { color: #73888e; font-size: 8px; font-weight: 650; }
.swift-code { max-height: 340px; overflow: auto; padding: 12px; border: 1px solid #e8edef; border-radius: 7px; color: #54716d; background: #f7f9f8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 8px; line-height: 1.6; white-space: pre-wrap; }
.complaint-status-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.procedure-guide { display: grid; gap: 9px; }
.procedure-step { padding: 10px; border-left: 2px solid #93c7b9; border-radius: 0 6px 6px 0; background: #f7fbf8; }
.procedure-step strong { color: #56776f; font-size: 8px; }
.procedure-step p { margin: 5px 0 0; color: #8c9d9c; font-size: 7px; line-height: 1.5; }

/* Client portal */
.portal-hero { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,.65fr); gap: 16px; margin-bottom: 14px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #eaf6f3; background: radial-gradient(circle at 80% 0%, rgba(89,186,163,.22), transparent 30%), linear-gradient(122deg, #173847, #185b5b 70%, #1f7165); box-shadow: 0 12px 30px rgba(23,75,73,.11); }
.portal-hero-main { display: flex; flex-direction: column; align-items: flex-start; }
.portal-hero .eyebrow { color: #aad1ca; }
.portal-hero .tiny-dot { background: #7ad1ad; }
.portal-hero h2 { margin: 12px 0 5px; color: #fff; font-size: 21px; font-weight: 680; letter-spacing: -.04em; }
.portal-hero p { margin: 0; color: #afcbc8; font-size: 8px; }
.portal-balance { display: grid; gap: 4px; margin-top: 20px; }
.portal-balance small { color: #a6ccc5; font-size: 7px; }
.portal-balance strong { color: #fff; font-size: 28px; font-weight: 690; letter-spacing: -.05em; }
.portal-balance span { color: #b2d0ca; font-size: 7px; }
.portal-profile { display: grid; align-content: start; gap: 8px; padding: 12px; border: 1px solid rgba(223,249,242,.16); border-radius: 9px; background: rgba(7,33,41,.18); }
.portal-profile label { color: #b5d6d0; font-size: 7px; font-weight: 650; }
.portal-profile select { width: 100%; min-height: 33px; padding: 5px 8px; border: 1px solid rgba(217,240,234,.24); border-radius: 6px; color: #eef8f4; background: rgba(11,45,51,.7); font-size: 8px; }
.portal-profile select option { color: #1e3943; background: #fff; }
.portal-profile-note { display: flex; gap: 6px; color: #b5d2cc; font-size: 7px; line-height: 1.5; }
.portal-profile-note svg { width: 13px; height: 13px; flex: 0 0 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.portal-actions .btn { min-height: 29px; }
.portal-mini-row { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 2px; border-bottom: 1px solid #eff2f3; }
.portal-mini-row:last-child { border-bottom: 0; }
.portal-mini-row > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.portal-mini-row strong { overflow: hidden; color: #405560; font-size: 9px; font-weight: 660; text-overflow: ellipsis; white-space: nowrap; }
.portal-mini-row small { color: #96a2a8; font-size: 8px; }
.portal-mini-icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid #e1ecea; border-radius: 8px; color: #438a80; background: #f1f8f5; }
.portal-mini-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.portal-mini-row .badge { flex: 0 0 auto; }

/* Print-ready documents */
#printRoot { display: none; }
.print-document { max-width: 900px; margin: 0 auto; padding: 36px; color: #253e49; background: #fff; font-size: 11px; }
.print-document-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 13px; border-bottom: 2px solid #1c776f; }
.print-brand { color: #28534f; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.print-doc-meta { color: #71848a; font-size: 9px; }
.print-document h1 { margin: 22px 0 8px; color: #253f4a; font-size: 21px; }
.print-document h2 { margin: 19px 0 8px; color: #385861; font-size: 13px; }
.print-lead { color: #74878b; font-size: 10px; }
.print-alert { margin: 14px 0; padding: 10px; border: 1px solid #e9dcb9; border-radius: 5px; color: #7c6940; background: #fcf8ec; font-size: 9px; line-height: 1.5; }
.print-note { color: #87979b; font-size: 9px; line-height: 1.5; }
.print-document table { margin: 10px 0 16px; border-collapse: collapse; font-size: 9px; }
.print-document th, .print-document td { position: static; padding: 7px 8px; border: 1px solid #dfe7e9; color: #405963; background: #fff; font-size: 9px; }
.print-document th { background: #f3f7f7; }
.print-document-footer { display: grid; gap: 4px; margin-top: 28px; padding-top: 10px; border-top: 1px solid #dfe7e9; color: #71858a; font-size: 8px; }
.print-document-footer strong { color: #3e7771; letter-spacing: .08em; }

/* Welcome front door */
.welcome-body { position: relative; min-height: 100vh; overflow-x: hidden; color: #203743; background: radial-gradient(ellipse at 73% 6%, rgba(97,191,165,.13), transparent 34%), linear-gradient(135deg, #f4f8f7 0%, #eef4f3 50%, #f6f5ef 100%); }
.welcome-body::before, .welcome-body::after { position: fixed; z-index: 0; width: 390px; height: 390px; border: 1px solid rgba(56,139,127,.09); border-radius: 50%; content: ''; pointer-events: none; }
.welcome-body::before { top: -210px; right: -110px; box-shadow: 0 0 0 35px rgba(56,139,127,.025), 0 0 0 70px rgba(56,139,127,.02); }
.welcome-body::after { bottom: -260px; left: -180px; width: 470px; height: 470px; border-color: rgba(176,147,83,.1); box-shadow: 0 0 0 42px rgba(176,147,83,.025); }
.welcome-shell { position: relative; z-index: 1; width: min(1100px, calc(100% - 44px)); margin: 0 auto; padding: 22px 0 28px; }
.welcome-topbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid rgba(62,100,103,.11); }
.welcome-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.welcome-brand .brand-mark { width: 40px; height: 40px; border-color: rgba(30,130,117,.26); background: linear-gradient(145deg,#e2f5ed,#f5fbf8); }
.welcome-brand strong { display: block; color: #213e4a; font-size: 18px; font-weight: 720; letter-spacing: -.05em; }
.welcome-brand small { display: block; margin-top: 4px; color: #839499; font-size: 7px; font-weight: 750; letter-spacing: .17em; }
.welcome-language-label { display: flex; align-items: center; gap: 8px; color: #819297; font-size: 8px; font-weight: 620; }
.welcome-language-label select { min-width: 125px; height: 32px; padding: 0 24px 0 9px; border: 1px solid #dce7e6; border-radius: 7px; color: #526970; background: rgba(255,255,255,.8); font-size: 8px; }
.welcome-hero { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr); align-items: center; gap: 42px; padding: 42px 0 34px; }
.welcome-copy { min-width: 0; }
.welcome-eyebrow { display: flex; align-items: center; gap: 8px; color: #658780; font-size: 8px; font-weight: 760; letter-spacing: .12em; }
.welcome-live-dot { width: 6px; height: 6px; flex-basis: 6px; }
.welcome-copy h1 { max-width: 600px; margin: 16px 0 12px; color: #1c3946; font-size: clamp(35px, 4.4vw, 54px); font-weight: 660; letter-spacing: -.06em; line-height: 1.04; }
.welcome-copy h1 em { color: #25847a; font-style: normal; }
.welcome-lead { max-width: 520px; margin: 0; color: #71858b; font-size: 11px; line-height: 1.7; }
.welcome-badges { display: grid; gap: 8px; margin-top: 19px; }
.welcome-badges > span { display: flex; align-items: center; gap: 9px; color: #71858a; font-size: 8px; }
.welcome-badges b { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid #d7e9e3; border-radius: 7px; color: #4c8b7e; background: rgba(255,255,255,.62); font-size: 7px; }
.welcome-visual { position: relative; overflow: hidden; padding: 18px 18px 15px; border: 1px solid rgba(213,236,228,.3); border-radius: 16px; color: #e9f5f1; background: radial-gradient(circle at 88% 7%, rgba(97,191,165,.3), transparent 32%), linear-gradient(145deg, #143544, #155652 72%, #1c7065); box-shadow: 0 19px 45px rgba(25,72,69,.16); }
.welcome-visual::before { position: absolute; right: -100px; bottom: -150px; width: 280px; height: 280px; border: 1px solid rgba(224,248,238,.1); border-radius: 50%; box-shadow: 0 0 0 24px rgba(224,248,238,.025),0 0 0 50px rgba(224,248,238,.02); content: ''; }
.welcome-visual-top { position: relative; display: flex; align-items: center; gap: 9px; }
.mini-brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(150,219,198,.36); border-radius: 9px; color: #8de0c2; background: rgba(255,255,255,.06); font-size: 13px; font-weight: 760; }
.welcome-visual-top > span:nth-child(2) { display: grid; gap: 3px; }
.welcome-visual-top strong { color: #e5f2ef; font-size: 8px; letter-spacing: .12em; }
.welcome-visual-top small { color: #90b6b1; font-size: 6px; letter-spacing: .12em; }
.welcome-status-pill { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 7px; border: 1px solid rgba(157,216,200,.18); border-radius: 99px; color: #b1d8d0; background: rgba(7,39,43,.2); font-size: 6px; font-weight: 670; letter-spacing: .07em; }
.welcome-status-pill i { width: 5px; height: 5px; border-radius: 50%; background: #6fd6a9; box-shadow: 0 0 0 3px rgba(111,214,169,.1); }
.welcome-visual-balance { position: relative; z-index: 1; display: grid; gap: 7px; margin-top: 24px; }
.welcome-visual-balance > small { color: #a5cbc4; font-size: 7px; font-weight: 650; letter-spacing: .1em; }
.welcome-visual-balance > strong { color: #fff; font-size: clamp(23px, 2.7vw, 31px); font-weight: 650; letter-spacing: -.055em; }
.welcome-visual-balance > span { display: flex; align-items: center; gap: 6px; color: #a9cbc4; font-size: 7px; }
.welcome-visual-balance > span i { width: 5px; height: 5px; border-radius: 50%; background: #76cfaa; }
.welcome-visual-chart { position: relative; z-index: 1; height: 93px; margin: 9px -18px 0; overflow: hidden; }
.welcome-visual-chart svg { width: 100%; height: 100%; }
.welcome-visual-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid rgba(222,244,237,.13); }
.welcome-visual-foot > span { display: flex; min-width: 0; align-items: center; gap: 7px; }
.welcome-visual-foot > span > span { display: grid; min-width: 0; gap: 4px; }
.welcome-visual-foot b { color: #dbece7; font-size: 7px; }
.welcome-visual-foot small { color: #9ebdb8; font-size: 6px; line-height: 1.35; }
.visual-token { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 750; }
.token-teal { color: #8bd6bd; background: rgba(73,166,144,.19); }
.token-gold { color: #e1cb8a; background: rgba(178,147,74,.2); }
.welcome-entry-section { padding: 23px 0 18px; border-top: 1px solid rgba(62,100,103,.11); }
.welcome-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.welcome-section-kicker { color: #7b9691; font-size: 7px; font-weight: 760; letter-spacing: .13em; }
.welcome-section-heading h2 { margin: 5px 0 0; color: #294651; font-size: 19px; font-weight: 670; letter-spacing: -.035em; }
.welcome-session-note { display: flex; align-items: center; gap: 7px; color: #899a9d; font-size: 7px; }
.welcome-session-note i { width: 6px; height: 6px; border-radius: 50%; background: #bd9958; }
.welcome-entry-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.welcome-entry-card { position: relative; display: flex; min-height: 98px; align-items: center; gap: 12px; padding: 15px; overflow: hidden; border: 1px solid #e0e9e8; border-radius: 11px; color: inherit; background: rgba(255,255,255,.83); box-shadow: 0 5px 17px rgba(25,54,61,.04); text-decoration: none; transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.welcome-entry-card:hover { transform: translateY(-2px); border-color: #b8d8d1; box-shadow: 0 9px 23px rgba(25,80,73,.09); }
.welcome-entry-card.staff-entry:hover { border-color: #a9d5cb; }
.welcome-entry-card.customer-entry:hover { border-color: #ded1a6; }
.entry-icon { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; border: 1px solid #d8ebe4; border-radius: 12px; color: #388b7d; background: #eff8f4; }
.entry-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.entry-icon-customer { border-color: #ebe4cd; color: #a28a50; background: #faf7ed; }
.entry-copy { display: grid; flex: 1; min-width: 0; gap: 4px; }
.entry-label { color: #8a9d9d; font-size: 6px; font-weight: 760; letter-spacing: .13em; }
.entry-copy strong { color: #34505a; font-size: 12px; font-weight: 680; }
.entry-copy small { max-width: 390px; color: #8b9b9f; font-size: 7px; line-height: 1.5; }
.entry-arrow { align-self: flex-start; color: #93aaa8; font-size: 14px; }
.welcome-access-disclaimer { display: flex; align-items: flex-start; gap: 7px; margin: 11px 0 0; color: #8b999c; font-size: 7px; line-height: 1.5; }
.info-mark { display: grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; border-radius: 50%; color: #6c9189; background: #e6f2ed; font-size: 8px; font-weight: 700; }
.welcome-capabilities { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 17px 0; border-top: 1px solid rgba(62,100,103,.11); }
.welcome-capabilities article { display: grid; grid-template-columns: 24px 1fr; align-content: start; gap: 3px 8px; min-width: 0; padding: 8px; border: 1px solid rgba(221,232,230,.8); border-radius: 8px; background: rgba(255,255,255,.55); }
.capability-icon { display: grid; width: 23px; height: 23px; grid-row: span 2; place-items: center; border: 1px solid #dfede7; border-radius: 7px; color: #498c7f; background: #f1f8f4; font-size: 11px; }
.welcome-capabilities strong { color: #5a7176; font-size: 7px; font-weight: 680; }
.welcome-capabilities small { color: #95a2a5; font-size: 6px; line-height: 1.45; }
.welcome-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 4px; border-top: 1px solid rgba(62,100,103,.11); color: #8b999c; font-size: 7px; line-height: 1.5; }
.welcome-footer a { color: #588b82; text-decoration-color: #bfd7ce; text-underline-offset: 2px; }
.welcome-body .screen-watermark { right: 13px; bottom: 9px; color: rgba(55,89,91,.5); background: rgba(244,249,246,.8); }
[dir="rtl"] .welcome-body { direction: rtl; }
[dir="rtl"] .welcome-copy, [dir="rtl"] .welcome-section-heading, [dir="rtl"] .welcome-entry-card, [dir="rtl"] .welcome-footer { text-align: right; }
[dir="rtl"] .welcome-entry-card { flex-direction: row-reverse; }
[dir="rtl"] .welcome-status-pill { margin-right: auto; margin-left: 0; }
[dir="rtl"] .welcome-visual-foot { direction: rtl; }

/* Responsive layouts */
@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 214px minmax(0,1fr); }
  .main-content { padding-right: 19px; padding-left: 19px; }
  .topbar { padding-right: 18px; padding-left: 18px; }
  .branch-grid, .market-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card-table-actions { min-width: 175px; }
}
@media (max-width: 940px) {
  .app-shell { grid-template-columns: 70px minmax(0,1fr); }
  .sidebar { align-items: center; padding-right: 8px; padding-left: 8px; }
  .brand { padding-right: 0; padding-left: 0; }
  .brand-copy, .environment-pill span, .environment-pill b, .nav-caption, .nav-section-label, .nav-label, .nav-badge, .nav-divider, .side-control-card > div, .control-led, .operator-meta, .operator-profile .icon-button { display: none; }
  .environment-pill { width: 35px; justify-content: center; margin: 0 0 12px; padding: 8px; }
  .primary-nav { width: 100%; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-icon { width: 19px; height: 19px; flex-basis: 19px; }
  .sidebar-bottom { width: 100%; }
  .side-control-card { justify-content: center; padding: 8px 0; }
  .operator-profile { justify-content: center; padding-right: 0; padding-left: 0; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid.two-col, .lower-grid, .grid.settings-grid { grid-template-columns: minmax(0,1fr); }
  .topbar-context { display: none; }
  .global-search { width: min(210px,24vw); }
  .portal-hero { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
  .app-shell { display: block; min-height: 100vh; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; display: flex; width: 248px; height: 100dvh; align-items: stretch; padding: 18px 13px 13px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 14px 0 45px rgba(7,27,37,.2); }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .brand { padding-right: 9px; padding-left: 9px; }
  .brand-copy, .environment-pill span, .environment-pill b, .nav-caption, .nav-section-label, .nav-label, .nav-badge, .nav-divider, .side-control-card > div, .control-led, .operator-meta, .operator-profile .icon-button { display: initial; }
  .brand-copy { display: block; }
  .environment-pill { width: auto; justify-content: flex-start; margin: 0 5px 15px; padding: 8px 10px; }
  .environment-pill span { flex: 1; }
  .nav-caption, .nav-section-label { display: block; }
  .primary-nav { width: auto; }
  .nav-item { justify-content: flex-start; padding: 0 10px; }
  .nav-icon { width: 17px; flex-basis: 17px; }
  .sidebar-bottom { width: auto; }
  .side-control-card { justify-content: flex-start; padding: 10px 9px; }
  .operator-profile { justify-content: flex-start; padding-right: 6px; padding-left: 6px; }
  .main-area { min-height: 100vh; }
  .topbar { position: sticky; min-height: 55px; align-items: center; gap: 8px; padding: 0 11px; }
  .topbar-left { gap: 8px; }
  .menu-toggle { display: grid; width: 29px; height: 29px; flex-basis: 29px; }
  .breadcrumbs { gap: 5px; }
  .breadcrumbs > span, .topbar-divider { display: none; }
  .breadcrumbs strong { max-width: 125px; font-size: 9px; }
  .topbar-actions { gap: 5px; }
  .global-search { width: min(130px,32vw); height: 29px; gap: 4px; padding: 0 6px; }
  .global-search kbd, .notifications-button { display: none; }
  .language-select { max-width: 72px; height: 29px; padding-left: 5px; font-size: 7px; }
  .top-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .main-content { padding: 17px 12px 24px; }
  .app-footer { align-items: flex-start; flex-direction: column; gap: 4px; padding: 6px 12px 16px; font-size: 6px; }
  .screen-watermark { right: 8px; bottom: 64px; font-size: 6px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 13px; }
  .heading-actions { width: 100%; justify-content: flex-start; }
  .page-heading h1 { font-size: 22px; }
  .page-subtitle { font-size: 8px; }
  .stats-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .metrics-grid { gap: 7px; }
  .metric-card { min-height: 92px; padding: 10px; }
  .metric-value { font-size: 18px; }
  .metric-icon { width: 24px; height: 24px; }
  .stat-tile { padding: 9px; }
  .stat-tile strong { font-size: 14px; }
  .panel { padding: 11px; }
  .toolbar { align-items: stretch; padding: 8px; }
  .toolbar-left, .toolbar-right { width: 100%; }
  .filter-search { flex: 1; min-width: 0; }
  .table-wrap { margin-right: -8px; margin-left: -8px; width: calc(100% + 16px); }
  th, td { padding: 8px; }
  .branch-grid, .market-grid, .rate-grid { grid-template-columns: minmax(0,1fr); }
  .reference-check-form { grid-template-columns: minmax(0,1fr); }
  .reference-check-form .btn { width: 100%; }
  .portal-hero { gap: 10px; padding: 14px; }
  .portal-hero h2 { font-size: 18px; }
  .portal-balance strong { font-size: 24px; }
  .portal-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .portal-actions .btn { justify-content: flex-start; min-height: 34px; }
  .portal-mini-row { align-items: flex-start; flex-wrap: wrap; }
  .portal-mini-row > div:not(.card-portal-actions) { flex: 1; }
  .card-portal-actions { flex-basis: 100% !important; max-width: none; justify-content: flex-start; padding-left: 36px; }
  .card-table-actions { min-width: 145px; }
  .form-grid { grid-template-columns: minmax(0,1fr); }
  .form-field.full { grid-column: auto; }
  .checklist-grid { grid-template-columns: minmax(0,1fr); }
  .modal-scrim { padding: 8px; }
  .modal-panel, .modal-panel.wide { width: 100%; max-height: 94vh; border-radius: 11px; }
  .modal-body { padding: 12px; }
  .modal-header { padding: 12px; }
  .drawer { width: min(100%, 520px); }
  .exchange-hero { flex-direction: column; }
  .welcome-shell { width: min(100% - 26px, 620px); padding-top: 13px; }
  .welcome-topbar { padding-bottom: 12px; }
  .welcome-hero { grid-template-columns: minmax(0,1fr); gap: 22px; padding: 27px 0 24px; }
  .welcome-copy h1 { margin-top: 12px; font-size: clamp(32px, 10vw, 46px); }
  .welcome-lead { font-size: 9px; }
  .welcome-visual { max-width: 500px; }
  .welcome-entry-grid { grid-template-columns: minmax(0,1fr); }
  .welcome-capabilities { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .welcome-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 420px) {
  .welcome-shell { width: calc(100% - 22px); }
  .welcome-brand strong { font-size: 16px; }
  .welcome-language-label { gap: 5px; font-size: 7px; }
  .welcome-language-label select { min-width: 95px; }
  .welcome-visual { padding: 14px; }
  .welcome-visual-chart { margin-right: -14px; margin-left: -14px; }
  .welcome-entry-card { gap: 9px; padding: 12px; }
  .entry-copy strong { font-size: 11px; }
  .welcome-capabilities article { grid-template-columns: 20px 1fr; gap: 2px 6px; padding: 7px 5px; }
  .capability-icon { width: 19px; height: 19px; }
  .welcome-capabilities strong { font-size: 6.5px; }
  .welcome-capabilities small { font-size: 5.5px; }
}

/* RTL presentation */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .app-shell { grid-template-columns: minmax(0,1fr) 236px; }
[dir="rtl"] .sidebar { grid-column: 2; grid-row: 1; }
[dir="rtl"] .main-area { grid-column: 1; grid-row: 1; }
[dir="rtl"] .nav-item { text-align: right; }
[dir="rtl"] .nav-item.active { box-shadow: inset -2px 0 #4bc4aa; }
[dir="rtl"] .nav-item.exchange-nav.active { box-shadow: inset -2px 0 #ceb16e; }
[dir="rtl"] .customer-cell, [dir="rtl"] .bank-account-left, [dir="rtl"] .activity-row, [dir="rtl"] .portal-mini-row { direction: rtl; }
[dir="rtl"] .topbar, [dir="rtl"] .toolbar, [dir="rtl"] .page-heading { direction: rtl; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
[dir="rtl"] .num, [dir="rtl"] .num th, [dir="rtl"] .num td { text-align: left; }
[dir="rtl"] .activity-amount { justify-items: start; }
[dir="rtl"] .customer-cell { text-align: right; }
[dir="rtl"] .welcome-body { direction: rtl; }
@media (max-width: 940px) and (min-width: 721px) { [dir="rtl"] .app-shell { grid-template-columns: minmax(0,1fr) 70px; } }
@media (max-width: 720px) { [dir="rtl"] .app-shell { display: block; } [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(105%); } [dir="rtl"] .app-shell.sidebar-open .sidebar { transform: translateX(0); } }

/* Dedicated print and PDF presentation */
@media print {
  @page { size: A4; margin: 13mm 13mm 21mm; }
  html, body { min-width: 0; min-height: 0; background: #fff !important; color: #172f3d !important; }
  body.printing-document > *:not(#printRoot) { display: none !important; }
  #printRoot { display: block !important; position: static; width: 100%; color: #172f3d; background: #fff; }
  .print-document { max-width: none; margin: 0; padding: 0; }
  .print-document::after { content: "DEMO DESKTOP ADRIA BANK · DEMONSTRATION COPY"; position: fixed; right: 0; bottom: -14mm; left: 0; padding-top: 4px; border-top: 1px solid #dfe7e9; color: #62797e; background: #fff; text-align: right; font-size: 7px; font-weight: 750; letter-spacing: .1em; }
  .print-document-header, .print-document-footer, .print-alert, table { break-inside: avoid; }
  .print-document table { width: 100%; }
  .print-document th, .print-document td { padding: 5px 6px; font-size: 8px; }
  .screen-watermark, .app-footer, .modal-scrim, .toast-region { display: none !important; }
  .welcome-body { min-height: 100%; color: #172f3d; background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .welcome-body::before { display: none; }
  .welcome-body::after { position: fixed; z-index: 1000; right: 0; bottom: 6mm; left: 0; display: block; width: auto; height: auto; border: 0; border-radius: 0; color: #596a70; background: #fff; box-shadow: none; text-align: right; font-size: 7px; font-weight: 750; letter-spacing: .1em; content: "DEMO DESKTOP ADRIA BANK · DEMONSTRATION COPY"; }
  .welcome-shell { width: 100%; padding: 0; }
  .welcome-visual, .welcome-entry-card, .welcome-capabilities { break-inside: avoid; }
  .welcome-body .screen-watermark { position: fixed; right: 10mm; bottom: 6mm; color: #596a70; }
}

.headquarters-card .market-card-foot { align-items: flex-start; flex-direction: column; }
.company-location-sources { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #e8eef2; }
.company-location-sources a { color: #487889; font-size: 7px; font-weight: 650; text-decoration-color: #b8cfd4; text-underline-offset: 2px; }
.company-location-sources a:hover { color: #126f73; }

/* Local-only online onboarding rehearsal */
.onboarding-progress { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 0 0 15px; padding: 10px; border: 1px solid #e5efed; border-radius: 9px; background: #f7fbfa; }
.onboarding-progress span { display: flex; align-items: center; gap: 7px; color: #64777b; font-size: 8px; font-weight: 650; transition: color .18s ease; }
.onboarding-progress span.active { color: #176f68; }
.onboarding-progress span.complete { color: #46877e; }
.onboarding-progress b { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; color: #147a73; background: #e1f2ed; font-size: 8px; }
.onboarding-progress span.active b { color: #fff; background: #287f76; box-shadow: 0 0 0 3px rgba(40,127,118,.11); }
.onboarding-progress span.complete b { color: #fff; background: #6aa79b; }
.onboarding-step[hidden], .onboarding-modal-actions [hidden] { display: none !important; }
.onboarding-modal-actions { justify-content: flex-end; }
.onboarding-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 11px; border: 1px solid #e6edef; border-radius: 7px; background: #fbfdfd; }
.onboarding-products .form-check { min-height: 29px; align-items: center; padding: 5px 7px; border: 1px solid #edf1f2; border-radius: 6px; background: white; }
.onboarding-products .form-check input { width: 15px; height: 15px; }
.onboarding-row-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.onboarding-row-actions .btn { min-height: 23px; padding: 3px 6px; font-size: 7px; }
@media (max-width: 600px) { .onboarding-progress { gap: 4px; padding: 7px; } .onboarding-progress span { align-items: flex-start; flex-direction: column; font-size: 7px; } .onboarding-products { grid-template-columns: minmax(0,1fr); } .onboarding-row-actions { min-width: 105px; } }

/* Synthetic-only bank and exchange interoperability workbench */
.interop-tabs { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 4px; margin: -3px 0 13px; padding: 3px; border: 1px solid #e4ebec; border-radius: 9px; background: #f8fbfb; }
.interop-tabs button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; color: #75878d; background: transparent; cursor: pointer; font-size: 8px; font-weight: 650; }
.interop-tabs button.active { color: #246c68; background: #fff; box-shadow: 0 1px 4px rgba(35,72,78,.1); }
.interop-boundary { margin-bottom: 13px; line-height: 1.55; }
.interop-pause-notice { margin-bottom: 12px; }
.interop-connectors { margin-bottom: 14px; align-items: start; }
.interop-connector-grid { display: grid; gap: 8px; }
.interop-connector-card { min-width: 0; padding: 10px; border: 1px solid #e7edef; border-radius: 9px; background: linear-gradient(135deg, #fff, #fbfdfd); }
.interop-connector-top { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.interop-connector-mark { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #e0ece9; border-radius: 8px; color: #47877e; background: #f0f8f5; }
.interop-connector-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.interop-connector-title { display: grid; min-width: 0; gap: 3px; }
.interop-connector-title strong { overflow: hidden; color: #435d65; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.interop-connector-title small, .interop-connector-meta small { color: #98a6aa; font-size: 7px; line-height: 1.4; }
.interop-connector-top .badge { white-space: nowrap; }
.interop-connector-meta { display: grid; gap: 4px; margin: 9px 0; padding: 8px; border-radius: 6px; color: #7f9095; background: #f7fafa; font-size: 7px; }
.interop-connector-meta span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 7px; }
.interop-connector-meta b { color: #60767d; font-weight: 670; }
.interop-connector-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.interop-readonly { color: #819198; font-size: 7px; }
.interop-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.interop-actions .btn svg, .interop-tool-card .btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; vertical-align: -2px; }
.interop-output { align-items: stretch; margin-bottom: 14px; }
.interop-result { padding: 11px; border: 1px solid #e5eeeb; border-radius: 8px; background: linear-gradient(130deg,#f8fbfa,#fff); }
.interop-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.interop-result-head h3 { margin: 5px 0 0; color: #3d5e5e; font-size: 9px; }
.interop-result-head time, .interop-activity-row time { flex: 0 0 auto; color: #98a6a9; font-size: 7px; }
.interop-result > p { margin: 9px 0; color: #647b7b; font-size: 8px; line-height: 1.5; }
.interop-result details { border-top: 1px solid #e5eeeb; padding-top: 7px; color: #71868a; font-size: 7px; }
.interop-result summary { cursor: pointer; font-weight: 650; }
.interop-result pre { max-height: 205px; overflow: auto; margin: 7px 0 0; padding: 8px; border-radius: 6px; color: #4e6668; background: #f2f7f6; font: 7px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.interop-activity-list { display: grid; max-height: 250px; overflow: auto; }
.interop-activity-row { display: flex; align-items: flex-start; gap: 7px; padding: 7px 0; border-bottom: 1px solid #edf1f2; }
.interop-activity-row:last-child { border-bottom: 0; }
.interop-activity-icon { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; border-radius: 50%; color: #638f86; background: #edf6f2; }
.interop-activity-icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.interop-activity-row > div { display: grid; flex: 1; min-width: 0; gap: 3px; }
.interop-activity-row strong { overflow: hidden; color: #566f75; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.interop-activity-row small { color: #93a1a5; font-size: 7px; line-height: 1.4; }
.interop-empty { display: grid; min-height: 90px; place-items: center; align-content: center; gap: 8px; color: #94a4a7; text-align: center; }
.interop-empty svg { width: 22px; height: 22px; fill: none; stroke: #7eaaa0; stroke-width: 1.5; }
.interop-empty p { max-width: 300px; margin: 0; font-size: 8px; line-height: 1.5; }
.interop-intro { max-width: 850px; margin: 0 0 13px; color: #7e9094; font-size: 8px; line-height: 1.55; }
.interop-tool-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.interop-tool-card { display: flex; min-width: 0; min-height: 155px; flex-direction: column; padding: 10px; border: 1px solid #e8edef; border-radius: 8px; background: #fff; }
.interop-tool-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.interop-tool-number, .interop-idea-number { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border: 1px solid #dcece6; border-radius: 7px; color: #498a7f; background: #f0f8f4; font-size: 7px; font-weight: 750; }
.interop-tool-top .badge { max-width: calc(100% - 29px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 6px; }
.interop-tool-card h3 { margin: 10px 0 5px; color: #465f66; font-size: 8px; line-height: 1.35; }
.interop-tool-card p { flex: 1; margin: 0 0 9px; color: #8c9b9f; font-size: 7px; line-height: 1.5; }
.interop-tool-card .btn { align-self: flex-start; min-height: 25px; }
.interop-idea-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.interop-idea-card { display: flex; min-width: 0; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid #e8edef; border-radius: 8px; background: linear-gradient(135deg,#fff,#fbfdfd); }
.interop-idea-copy { flex: 1; min-width: 0; }
.interop-idea-copy h3 { margin: 2px 0 5px; color: #4b6369; font-size: 8px; line-height: 1.4; }
.interop-idea-copy p { margin: 0; color: #8a999e; font-size: 7px; line-height: 1.5; }
.interop-idea-card > .badge { flex: 0 0 auto; font-size: 6px; }
.interop-page .panel-description { line-height: 1.45; }
@media (max-width: 1120px) { .interop-tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 850px) { .interop-tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .interop-idea-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .interop-tool-grid { grid-template-columns: minmax(0,1fr); } .interop-tabs { width: 100%; } .interop-tabs button { flex: 1; padding: 0 6px; } .interop-connector-foot { align-items: flex-start; flex-direction: column; } .interop-connector-grid { grid-template-columns: minmax(0,1fr); } .interop-result-head { flex-direction: column; } }

/* Regional demo context and expanded interop workbench */
.workspace-context-strip {
  display: flex; min-height: 50px; align-items: center; gap: 11px; margin: 0 0 17px; padding: 8px 11px;
  border: 1px solid #dce9e8; border-radius: 10px; color: #e8f7f4;
  background: linear-gradient(105deg, #193945 0%, #235b5c 60%, #2b7066 100%);
  box-shadow: 0 8px 22px rgba(21, 68, 73, .11);
}
.workspace-context-orb { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: rgba(255,255,255,.1); font-size: 16px; }
.workspace-context-copy { display: grid; min-width: 0; gap: 3px; }
.workspace-context-copy small { color: #a9d0cb; font-size: 8px; font-weight: 750; letter-spacing: .12em; }
.workspace-context-copy strong { overflow: hidden; color: #fff; font-size: 12px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.workspace-context-meta { margin-left: 2px; color: #b7d5d1; font-size: 10px; }
.workspace-context-action { display: inline-flex; min-height: 31px; align-items: center; gap: 7px; margin-left: auto; padding: 0 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; color: #e8fffa; background: rgba(255,255,255,.08); cursor: pointer; font-size: 9px; font-weight: 650; transition: background .18s ease, transform .18s ease; }
.workspace-context-action:hover { background: rgba(255,255,255,.17); transform: translateY(-1px); }
.workspace-context-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.interop-tabs { margin: -2px 0 14px; padding: 4px; border-color: #dfe9e9; border-radius: 9px; background: #edf3f3; }
.interop-tabs button { min-height: 34px; padding: 0 16px; border-radius: 6px; color: #63787d; font-size: 10px; }
.interop-tabs button.active { color: #135f5b; background: #fff; box-shadow: 0 2px 7px rgba(33,75,80,.1); }
.interop-boundary { margin-bottom: 15px; padding: 10px 12px; border-radius: 9px; font-size: 10px; }
.interop-systems-shell { position: relative; overflow: hidden; margin: 0 0 15px; padding: 16px; border: 1px solid #dce9e6; border-radius: 14px; background: linear-gradient(130deg, #f3faf7, #fff 55%, #f7faf9); box-shadow: 0 6px 22px rgba(31,73,72,.045); }
.interop-systems-shell::before { position: absolute; top: -55px; right: -38px; width: 180px; height: 180px; border: 1px solid rgba(57,146,127,.08); border-radius: 50%; box-shadow: 0 0 0 22px rgba(57,146,127,.025), 0 0 0 45px rgba(57,146,127,.02); content: ''; pointer-events: none; }
.interop-systems-heading { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.interop-systems-heading h2 { margin: 5px 0 4px; color: #23414a; font-size: 16px; letter-spacing: -.02em; }
.interop-systems-heading p { max-width: 760px; margin: 0; color: #6e8588; font-size: 10px; line-height: 1.55; }
.interop-local-stamp { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #d7e6e1; border-radius: 999px; color: #478176; background: rgba(255,255,255,.75); font-size: 8px; font-weight: 700; }
.interop-system-grid { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.interop-system-card { display: flex; min-width: 0; min-height: 212px; flex-direction: column; padding: 13px; border: 1px solid #e3ebeb; border-radius: 11px; background: rgba(255,255,255,.88); box-shadow: 0 3px 11px rgba(28,60,68,.035); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.interop-system-card:hover { border-color: #9dcfc2; box-shadow: 0 10px 24px rgba(28,95,84,.11); transform: translateY(-2px); }
.interop-system-card.is-active { border-color: #77b7a5; background: linear-gradient(150deg,#fff,#f2faf6); box-shadow: inset 0 0 0 1px rgba(58,147,124,.07), 0 4px 14px rgba(28,95,84,.06); }
.interop-system-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.interop-system-card-top .badge { max-width: calc(100% - 45px); overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.interop-system-flag { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #e7eeee; border-radius: 9px; background: #f8fbfa; font-size: 18px; }
.interop-system-card h3 { margin: 11px 0 3px; color: #2c4650; font-size: 15px; letter-spacing: -.025em; }
.interop-system-location { margin: 0; color: #71868a; font-size: 10px; }
.interop-system-details { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; margin: 12px 0 9px; padding: 9px; border: 1px solid #edf1f1; border-radius: 7px; background: #f9fbfb; }
.interop-system-details span { display: grid; min-width: 0; gap: 4px; }
.interop-system-details small { color: #819396; font-size: 8px; }
.interop-system-details strong { overflow: hidden; color: #466267; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.interop-system-note { min-height: 29px; flex: 1; margin: 0 0 10px; color: #8a999b; font-size: 9px; line-height: 1.45; }
.interop-system-card .btn { align-self: flex-start; min-height: 30px; font-size: 9px; }
.interop-system-card .btn[disabled] { opacity: .76; cursor: default; }
.interop-system-boundary { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; padding: 9px 10px; border: 1px dashed #dbe8e4; border-radius: 8px; color: #708584; background: rgba(255,255,255,.56); font-size: 9px; line-height: 1.5; }
.interop-system-boundary > span { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; border-radius: 50%; color: #35796b; background: #e4f3ec; font-size: 10px; font-weight: 750; }
.interop-stats { margin-bottom: 14px; }
.interop-stats .stat-tile { border-radius: 9px; }
.interop-connectors { gap: 13px; }
.interop-connector-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.interop-connector-card { min-height: 136px; padding: 12px; border-color: #e5eded; border-radius: 10px; transition: border-color .18s ease, box-shadow .18s ease; }
.interop-connector-card:hover { border-color: #bdd9d3; box-shadow: 0 4px 14px rgba(29,78,73,.06); }
.interop-connector-title strong { font-size: 10px; }
.interop-connector-title small, .interop-connector-meta small, .interop-connector-meta, .interop-readonly { font-size: 9px; }
.interop-connector-meta { margin: 10px 0; padding: 9px; }
.interop-connector-foot .btn { min-height: 29px; font-size: 9px; }
.interop-output { gap: 13px; }
.interop-result { min-height: 150px; padding: 14px; border-radius: 10px; }
.interop-result-head h3 { font-size: 13px; }
.interop-result-head time, .interop-activity-row time { font-size: 9px; }
.interop-result > p { font-size: 10px; }
.interop-result details, .interop-result pre { font-size: 9px; }
.interop-activity-list { max-height: 310px; }
.interop-activity-row { gap: 9px; padding: 9px 0; }
.interop-activity-row strong { font-size: 9px; }
.interop-activity-row small { font-size: 8px; }
.interop-empty p { font-size: 10px; }
.interop-category-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 13px; padding-bottom: 11px; border-bottom: 1px solid #edf1f2; }
.interop-category-tabs button { display: inline-flex; min-height: 31px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #e1e9e9; border-radius: 7px; color: #667d81; background: #fbfcfc; cursor: pointer; font-size: 9px; font-weight: 650; transition: all .16s ease; }
.interop-category-tabs button:hover { border-color: #b8d6cf; color: #246f65; }
.interop-category-tabs button.active { border-color: #88bdad; color: #155e57; background: #eaf6f1; box-shadow: inset 0 0 0 1px rgba(75,157,135,.07); }
.interop-category-tabs button span { display: inline-grid; min-width: 19px; height: 19px; place-items: center; padding: 0 5px; border-radius: 99px; color: #60817b; background: rgba(255,255,255,.86); font-size: 8px; }
.interop-category-tag { display: inline-flex; max-width: 100%; align-items: center; overflow: hidden; padding: 4px 7px; border: 1px solid #e5eceb; border-radius: 999px; color: #66817e; background: #f5f9f8; font-size: 8px; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.interop-tool-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.interop-tool-card { position: relative; min-height: 207px; padding: 13px; border-color: #e4ebec; border-radius: 10px; box-shadow: 0 2px 8px rgba(30,64,75,.025); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.interop-tool-card:hover { border-color: #aad1c4; box-shadow: 0 8px 20px rgba(32,91,81,.09); transform: translateY(-2px); }
.interop-tool-number, .interop-idea-number { width: 27px; height: 27px; flex-basis: 27px; border-radius: 8px; font-size: 9px; }
.interop-tool-top { align-items: center; }
.interop-tool-top .interop-category-tag { max-width: calc(100% - 34px); }
.interop-tool-card h3 { margin: 12px 0 6px; color: #304b54; font-size: 12px; line-height: 1.42; }
.interop-tool-card p { margin: 0 0 8px; color: #72878a; font-size: 9px; line-height: 1.55; }
.interop-tool-link { overflow: hidden; margin: auto 0 10px; color: #8a9c9d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.interop-tool-card .btn { min-height: 31px; font-size: 9px; }
.interop-tool-card .btn svg { width: 13px; height: 13px; }
.interop-idea-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.interop-idea-card { min-height: 110px; padding: 13px; border-radius: 10px; transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease; }
.interop-idea-card:hover { border-color: #b8d8cf; box-shadow: 0 6px 16px rgba(32,91,81,.06); transform: translateY(-1px); }
.interop-idea-copy .interop-category-tag { margin-bottom: 6px; }
.interop-idea-copy h3 { color: #334f57; font-size: 11px; line-height: 1.45; }
.interop-idea-copy p { color: #71868a; font-size: 9px; line-height: 1.55; }
.interop-idea-card > .badge { font-size: 8px; }
.interop-library-lede { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px; border: 1px solid #e6eeec; border-radius: 9px; background: linear-gradient(105deg,#f4f9f7,#fff); }
.interop-library-count { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#218a7c,#27656a); font-size: 17px; font-weight: 760; box-shadow: 0 5px 12px rgba(27,118,105,.15); }
.interop-library-lede strong { color: #38565a; font-size: 10px; }
.interop-library-lede p { margin: 4px 0 0; color: #7e9093; font-size: 9px; line-height: 1.5; }
@media (min-width: 1500px) { .interop-tool-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 1120px) { .interop-tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 850px) {
  .interop-system-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interop-system-card:last-child { grid-column: 1 / -1; }
  .interop-tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interop-idea-grid { grid-template-columns: minmax(0,1fr); }
  .interop-connector-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
  .workspace-context-strip { align-items: flex-start; flex-wrap: wrap; gap: 7px 9px; padding: 9px; }
  .workspace-context-orb { width: 29px; height: 29px; flex-basis: 29px; }
  .workspace-context-copy strong { max-width: 210px; font-size: 10px; }
  .workspace-context-meta { align-self: center; font-size: 9px; }
  .workspace-context-action { min-height: 28px; margin-left: auto; font-size: 8px; }
  .interop-systems-shell { padding: 11px; }
  .interop-systems-heading { flex-direction: column; gap: 8px; }
  .interop-systems-heading h2 { font-size: 14px; }
  .interop-system-grid { grid-template-columns: minmax(0,1fr); }
  .interop-system-card:last-child { grid-column: auto; }
  .interop-system-card { min-height: 195px; }
  .interop-tool-grid { grid-template-columns: minmax(0,1fr); }
  .interop-tool-card { min-height: 180px; }
  .interop-idea-grid { grid-template-columns: minmax(0,1fr); }
  .interop-idea-card { gap: 8px; }
  .interop-tabs { width: 100%; }
  .interop-tabs button { flex: 1; padding: 0 6px; }
  .interop-connector-foot { align-items: flex-start; flex-direction: column; }
  .interop-result-head { flex-direction: column; }
  .interop-category-tabs { gap: 5px; }
  .interop-category-tabs button { min-height: 29px; padding: 0 8px; font-size: 8px; }
}
[dir="rtl"] .workspace-context-action { margin-right: auto; margin-left: 0; }
[dir="rtl"] .interop-system-boundary { direction: rtl; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .interop-system-card, .interop-tool-card, .interop-idea-card, .workspace-context-action { transition: none; }
  .interop-system-card:hover, .interop-tool-card:hover, .interop-idea-card:hover, .workspace-context-action:hover { transform: none; }
}