/* ==========================================================================
   gdemo — product demonstration panel (PHASE C: animated, one app)
   Every rule is scoped under .gdemo / .gdemo-*. Colours are LOCAL tokens on
   .gdemo so the component looks the same wherever it is embedded (dark or
   light chapter) and never touches the site's design system.

   Compositions (set by gdemo.js on the host as data-mode):
     wide   1280×820  full sidebar
     tablet  900×790  icon rail, fewer table columns
     mobile  390×820  app bar, stacked rows, bottom sheets
   Visible screen = data-attributes on .gdemo-canvas (see STATES in gdemo.js).
   Static mode reads them directly; animated mode drives the same DOM with GSAP
   (inline transforms/opacity win over the defaults below).
   ========================================================================== */

/* ---------------------------------------------------------------- section */
.gdemo-section {
  position: relative;
  background-color: var(--bg-alt);
  padding: clamp(44px, 4.6vw, 64px) 0 clamp(40px, 4.2vw, 56px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.gdemo-intro { max-width: 940px; margin: 0 auto clamp(22px, 2.4vw, 30px); text-align: center; }
/* two lines on desktop (same 54px cap #que-hacemos uses), so the app starts higher */
.gdemo-intro .sec-h2 { font-size: clamp(32px, 4.3vw, 54px); line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
.gdemo-lead {
  margin: 14px auto 0; max-width: 46ch;
  font-size: clamp(16.5px, 1.35vw, 18px); line-height: 1.6;
  color: var(--text-secondary); text-wrap: pretty;
}
.gdemo-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gdemo-label {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0;
  font-size: 13px; letter-spacing: 0.02em; color: var(--text-muted);
}
.gdemo-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--text-muted); }

/* ------------------------------------------------------------------- host */
.gdemo {
  position: relative; width: 100%; max-width: 1144px; margin: 0 auto;

  /* sidebar — the site's dark surfaces, pinned locally */
  --gs-bg: #141414; --gs-card: #1C1C1C; --gs-line: #262626; --gs-line2: #333333;
  --gs-ink: #F5F4F0; --gs-ink2: #A8A6A1; --gs-ink3: #96948F; --gs-mint: #8effd7;

  /* application surfaces */
  --g-bg: #FFFFFF; --g-bg2: #F7F8F8; --g-bg3: #EEF1F0;
  --g-line: #E5E8E7; --g-line2: #D3D8D7;
  --g-ink: #0D1312; --g-ink2: #434D4B; --g-ink3: #5F6967;
  --g-accent: #08704D; --g-accent-hover: #065C3F; --g-accent-soft: #EAF4F0; --g-accent-line: rgba(8, 112, 77, 0.32);

  /* status — measured ≥ 5.2:1 on their own fills */
  --g-ok: #146B3D;   --g-ok-bg: #E7F3EC;
  --g-warn: #8A4A06; --g-warn-bg: #FCF1E0;
  --g-info: #1D4F7C; --g-info-bg: #E8F0F8;
  --g-err: #A12C2C;  --g-err-bg: #FBEBEB;

  --g-shadow-drawer: -24px 0 48px -28px rgba(13, 19, 18, 0.32);
  --g-shadow-pop: 0 24px 56px -20px rgba(13, 19, 18, 0.32), 0 0 0 1px rgba(13, 19, 18, 0.06);
  --g-ff-d: 'Space Grotesk', system-ui, sans-serif;
  --g-ff-b: 'DM Sans', system-ui, sans-serif;
}
/* Approved presentation: the frame is at most 1080px wide and centred. Below
   that it takes the container plus a few px of bleed, never more than the
   viewport allows. Only this outer width changes; the canvas, its scaling and
   the three compositions are untouched. */
.gdemo-section .gdemo {
  max-width: none;
  width: min(1080px, calc(100% + 32px));
  margin: 0 0 0 calc((100% - min(1080px, calc(100% + 32px))) / 2);
}
@media (max-width: 600px) {
  .gdemo-section .gdemo { width: calc(100% + 24px); margin: 0 -12px; }
}
/* Space is reserved before gdemo.js mounts (it then sets the exact height), so
   the section does not grow when the script runs. Ratios follow the three
   compositions; the breakpoints approximate the host-width thresholds in
   CONFIG.modes (host = viewport - 56px + 32px bleed). */
.gdemo:not([data-mode]) { aspect-ratio: 1280 / 820; border-radius: 16px; background: var(--gs-card); box-shadow: 0 0 0 1px var(--gs-line2); }
@media (max-width: 1087px) { .gdemo:not([data-mode]) { aspect-ratio: 900 / 790; } }
@media (max-width: 723px)  { .gdemo:not([data-mode]) { aspect-ratio: 390 / 860; } }
.gdemo-canvas {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden;
  border-radius: 16px; background: var(--gs-card);
  box-shadow: 0 0 0 1px var(--gs-line2), 0 40px 80px -40px rgba(0, 0, 0, 0.6);
  font-family: var(--g-ff-b); font-size: 13.5px; line-height: 1.4; color: var(--g-ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  contain: layout paint; -webkit-font-smoothing: antialiased;
}
.gdemo-canvas *, .gdemo-canvas *::before, .gdemo-canvas *::after { box-sizing: border-box; }
.gdemo-canvas h3, .gdemo-canvas h4, .gdemo-canvas h5, .gdemo-canvas p, .gdemo-canvas dl, .gdemo-canvas dd, .gdemo-canvas ul, .gdemo-canvas ol { margin: 0; padding: 0; }
.gdemo-canvas ul, .gdemo-canvas ol { list-style: none; }
/* The site styles h1–h4 globally (display font, cream ink for dark pages).
   Reset inside the panel at the lowest specificity so component rules win. */
.gdemo-canvas :where(h3, h4, h5) { font-family: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
.gdemo-i { width: 16px; height: 16px; flex: none; display: block; }
.gdemo-num { text-align: right; font-variant-numeric: tabular-nums; }
.gdemo-mute { color: var(--g-ink3) !important; }
.gdemo-mono { font-size: 12.5px; letter-spacing: 0.03em; }
.gdemo-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-ink3);
}
.gdemo-eyebrow .gdemo-i { width: 14px; height: 14px; }
.gdemo-link { display: inline-flex; align-items: center; gap: 4px; color: var(--g-accent); font-weight: 500; }
.gdemo-link .gdemo-i { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- chrome */
.gdemo-chrome {
  position: absolute; left: 0; right: 0; top: 0; height: 36px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--gs-card); border-bottom: 1px solid var(--gs-line2);
}
.gdemo-dots { position: absolute; left: 16px; top: 50%; display: flex; gap: 7px; transform: translateY(-50%); }
.gdemo-dots i { width: 10px; height: 10px; border-radius: 50%; background: #2B2B2B; box-shadow: inset 0 0 0 1px var(--gs-line2); }
.gdemo-addr {
  display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 14px; border-radius: 6px;
  font-size: 11.5px; color: var(--gs-ink3); background: var(--gs-bg);
}
.gdemo-addr .gdemo-i { width: 13px; height: 13px; }

/* --------------------------------------------------------------- sidebar */
.gdemo-side {
  position: absolute; left: 0; top: 36px; bottom: 0; width: 248px;
  display: flex; flex-direction: column; padding: 16px 14px 14px;
  background: var(--gs-bg); border-right: 1px solid var(--gs-line); color: var(--gs-ink2);
}
.gdemo-brand {
  height: 48px; display: flex; align-items: center; padding: 0 16px; margin-bottom: 18px;
  border-radius: 12px; background: var(--gs-card); box-shadow: inset 0 0 0 1px var(--gs-line2);
}
.gdemo-brand img { height: 18px; width: auto; display: block; }
.gdemo-nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.gdemo-nav-group {
  padding: 16px 12px 6px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gs-ink3);
}
.gdemo-nav-item {
  position: relative; display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px;
  border-radius: 9px; font-size: 13px; white-space: nowrap; color: var(--gs-ink2);
}
.gdemo-nav-item .gdemo-i { width: 17px; height: 17px; }
/* The active marker is ONE element that glides between items (positioned by
   gdemo.js); the per-item rules below only set the text/icon colour. */
.gdemo-nav-pill {
  position: absolute; left: 0; right: 0; top: 0; height: 38px; border-radius: 9px; pointer-events: none;
  background: rgba(142, 255, 215, 0.08); box-shadow: inset 0 0 0 1px rgba(142, 255, 215, 0.13);
}
.gdemo-nav-pill::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--gs-mint); }
[data-view="docs"] .gdemo-nav-item[data-nav="docs"],
[data-view="bank"] .gdemo-nav-item[data-nav="bank"] { color: var(--gs-ink); }
[data-view="docs"] .gdemo-nav-item[data-nav="docs"] .gdemo-i,
[data-view="bank"] .gdemo-nav-item[data-nav="bank"] .gdemo-i { color: var(--gs-mint); }
.gdemo-user {
  margin-top: auto; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; row-gap: 12px; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--gs-line);
}
.gdemo-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--g-ff-d); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: #0A0A0A; background: var(--gs-mint);
}
.gdemo-user-txt { display: flex; flex-direction: column; min-width: 0; }
.gdemo-user-txt b { font-weight: 500; font-size: 12.5px; color: var(--gs-ink); }
.gdemo-user-txt small { font-size: 11.5px; color: var(--gs-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdemo-logout {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px;
  border-radius: 8px; font-size: 12.5px; color: var(--gs-ink2); box-shadow: inset 0 0 0 1px var(--gs-line2);
}
.gdemo-logout .gdemo-i { width: 15px; height: 15px; }
.gdemo-appbar { display: none; }

/* ------------------------------------------------------------------ main */
.gdemo-main {
  position: absolute; left: 248px; right: 0; top: 36px; bottom: 0; overflow: hidden;
  background: var(--g-bg); color: var(--g-ink);
}
.gdemo-sw > [data-v] { display: none; }
[data-view="docs"] .gdemo-sw > [data-v="docs"], [data-view="bank"] .gdemo-sw > [data-v="bank"] { display: inline; }

.gdemo-top {
  height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px;
  border-bottom: 1px solid var(--g-line);
}
.gdemo-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g-ink3); }
.gdemo-crumbs .gdemo-i { width: 14px; height: 14px; }
.gdemo-crumbs b { font-weight: 500; color: var(--g-ink); }
.gdemo-top-r { display: flex; align-items: center; gap: 6px; }
.gdemo-company {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 11px; margin-right: 6px;
  border-radius: 8px; font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--g-line2);
}
.gdemo-company .gdemo-i { width: 15px; height: 15px; color: var(--g-ink3); }
.gdemo-iconbtn {
  width: 32px; height: 32px; display: inline-grid; place-items: center; flex: none; border-radius: 8px; color: var(--g-ink2);
}
.gdemo-iconbtn .gdemo-i { width: 17px; height: 17px; }
.gdemo-iconbtn.is-off { color: var(--g-line2); }
.gdemo-pager-btns .gdemo-iconbtn { box-shadow: inset 0 0 0 1px var(--g-line2); width: 30px; height: 30px; }

.gdemo-page { padding: 22px 32px 0; }
.gdemo-mod { display: none; }
[data-view="docs"] .gdemo-mod-docs, [data-view="bank"] .gdemo-mod-bank { display: block; }

/* page header */
.gdemo-phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.gdemo-title { font-family: var(--g-ff-d); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.028em; color: var(--g-ink); }
.gdemo-sub { margin-top: 6px; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--g-ink2); }
.gdemo-actions { display: flex; gap: 8px; flex: none; padding-top: 2px; }

/* buttons, inputs, chips */
.gdemo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
  border-radius: 9px; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  color: var(--g-ink); background: var(--g-bg); box-shadow: inset 0 0 0 1px var(--g-line2), 0 1px 1px rgba(13, 19, 18, 0.04);
}
.gdemo-btn .gdemo-i { width: 16px; height: 16px; }
.gdemo-btn-primary { color: #FFFFFF; background: var(--g-accent); box-shadow: 0 1px 1px rgba(13, 19, 18, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.gdemo-btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.gdemo-btn.is-busy { opacity: 0.72; }
.gdemo-input {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px;
  border-radius: 8px; font-size: 13px; color: var(--g-ink3); background: var(--g-bg);
  box-shadow: inset 0 0 0 1px var(--g-line2);
}
.gdemo-input .gdemo-i { width: 15px; height: 15px; }
.gdemo-search { width: 300px; }
.gdemo-search-sm { width: 240px; }
.gdemo-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 11px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--g-ink2); box-shadow: inset 0 0 0 1px var(--g-line2);
}
.gdemo-chip .gdemo-i { width: 15px; height: 15px; color: var(--g-ink3); }
.gdemo-count { margin-left: auto; font-size: 12.5px; color: var(--g-ink3); white-space: nowrap; }
.gdemo-count .gdemo-odo { color: var(--g-ink); font-weight: 500; }

/* tabs */
.gdemo-tabs { position: relative; display: flex; gap: 26px; margin-top: 16px; border-bottom: 1px solid var(--g-line); }
.gdemo-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px;
  font-size: 13.5px; font-weight: 500; color: var(--g-ink3); white-space: nowrap;
}
.gdemo-tab em {
  font-style: normal; font-size: 11px; font-weight: 500; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px;
  display: inline-grid; place-items: center; color: var(--g-ink2); background: var(--g-bg3);
}
[data-docs-tab="list"] .gdemo-tab[data-tab-docs="list"],
[data-docs-tab="library"] .gdemo-tab[data-tab-docs="library"],
[data-bank-tab="summary"] .gdemo-tab[data-tab-bank="summary"],
[data-bank-tab="invoices"] .gdemo-tab[data-tab-bank="invoices"] { color: var(--g-ink); }
.gdemo-ul { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; border-radius: 2px; background: var(--g-accent); transform-origin: 0 50%; pointer-events: none; }

.gdemo-panel { display: none; margin-top: 18px; }
[data-docs-tab="list"] .gdemo-docs-list,
[data-docs-tab="library"] .gdemo-docs-lib,
[data-bank-tab="summary"] .gdemo-bank-summary,
[data-bank-tab="invoices"] .gdemo-bank-invoices { display: block; }

.gdemo-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* pills */
.gdemo-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1;
}
.gdemo-pill .gdemo-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.gdemo-pill-ok { color: var(--g-ok); background: var(--g-ok-bg); }
.gdemo-pill-warn { color: var(--g-warn); background: var(--g-warn-bg); }
.gdemo-pill-info { color: var(--g-info); background: var(--g-info-bg); }
.gdemo-pill-err { color: var(--g-err); background: var(--g-err-bg); }
.gdemo-pill-neutral, .gdemo-pill-proc { color: var(--g-ink2); background: var(--g-bg3); }
.gdemo-spin {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor; border-right-color: transparent;
  animation: gdemo-spin 0.9s linear infinite;
}
@keyframes gdemo-spin { to { transform: rotate(360deg); } }

/* file badge */
.gdemo-fileico { position: relative; display: inline-block; width: 22px; height: 26px; flex: none; color: var(--g-line2); }
.gdemo-fileico svg { width: 100%; height: 100%; display: block; }
.gdemo-fileico b {
  position: absolute; left: -3px; bottom: 3px; padding: 1px 3px; border-radius: 3px;
  font-family: var(--g-ff-d); font-size: 7px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2;
  color: #FFFFFF; background: #B4402F;
}
.gdemo-fileico-jpg b { background: #2F6CB4; }

/* ----------------------------------------------------------------- tables */
.gdemo-table { border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--g-line); background: var(--g-bg); }
.gdemo-tr {
  position: relative; display: grid; align-items: center; column-gap: 16px; height: 42px; padding: 0 16px;
  border-top: 1px solid var(--g-line); font-size: 13.5px; color: var(--g-ink2);
}
.gdemo-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdemo-th {
  height: 36px; border-top: 0; background: var(--g-bg2);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-ink3);
}
.gdemo-tr[data-hl="hover"] { background: var(--g-bg2); }
.gdemo-tr.is-selected, .gdemo-tr[data-hl="selected"] { background: var(--g-accent-soft); }
.gdemo-tr.is-selected::before, .gdemo-tr[data-hl="selected"]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--g-accent); }
.gdemo-td-sup b { font-weight: 500; font-size: 14px; color: var(--g-ink); }
.gdemo-td-sup small { display: none; }
.gdemo-td-total { font-family: var(--g-ff-d); font-weight: 600; font-size: 14.5px; color: var(--g-ink); }
.gdemo-file { display: inline-flex; align-items: center; gap: 8px; }
.gdemo-file .gdemo-fileico { width: 16px; height: 19px; }
.gdemo-file .gdemo-fileico b { font-size: 5.5px; left: -2px; bottom: 2px; padding: 0 2px; }
.gdemo-tr-pending .gdemo-td-sup b { font-weight: 400; color: var(--g-ink2); }

.gdemo-t-docs { --g-rowh: 46px; }
.gdemo-t-docs .gdemo-tr { grid-template-columns: minmax(208px, 1.6fr) 82px 94px minmax(0, 1fr) 66px 58px 90px 150px; column-gap: 12px; height: var(--g-rowh); }
/* n+1 rows: the first is the one the demo uploads. Before the upload (data-upl=0)
   the list is shifted up one row, hiding it; the animation slides it down. */
.gdemo-tbody-clip { height: calc(var(--g-rowh) * var(--rows)); overflow: hidden; }
[data-upl="0"] .gdemo-tbody { transform: translateY(calc(var(--g-rowh) * -1)); }
/* a cell with two layers that cross-fade in place (before / after) */
.gdemo-sw2 { display: grid; min-width: 0; }
.gdemo-sw2 > * { grid-area: 1 / 1; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
.gdemo-row-new .gdemo-pend { opacity: 0; visibility: hidden; }
.gdemo-flash { position: absolute; inset: 0; background: rgba(8, 112, 77, 0.12); opacity: 0; pointer-events: none; }
.gdemo-odo { display: inline-block; height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.gdemo-odo-track { display: flex; flex-direction: column; }
[data-upl="1"] .gdemo-odo-track { transform: translateY(-50%); }
.gdemo-stack { display: grid; }
.gdemo-stack > * { grid-area: 1 / 1; }
.gdemo-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12.5px; color: var(--g-ink3); }
.gdemo-pager-btns { display: flex; gap: 6px; }

/* ---------------------------------------------------------------- library */
.gdemo-lib-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gdemo-lib-crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--g-ink3); white-space: nowrap; }
.gdemo-lib-crumbs .gdemo-i { width: 14px; height: 14px; }
.gdemo-lib-crumbs > .gdemo-i:first-child { width: 16px; height: 16px; color: var(--g-accent); }
.gdemo-lib-crumbs b { font-weight: 500; color: var(--g-ink); }
.gdemo-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--g-bg3); }
.gdemo-seg > span { height: 26px; padding: 0 12px; display: grid; place-items: center; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--g-ink3); }
.gdemo-seg > .is-on { color: var(--g-ink); background: var(--g-bg); box-shadow: 0 1px 2px rgba(13, 19, 18, 0.1); }
.gdemo-lib { display: grid; grid-template-columns: 292px 1fr; gap: 16px; }
.gdemo-lib-sups { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--g-line); overflow: hidden; height: 466px; position: relative; }
.gdemo-lib-sups::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 56px; border-radius: 0 0 12px 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 85%);
}
.gdemo-lib-h { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; background: var(--g-bg2); border-bottom: 1px solid var(--g-line); }
.gdemo-lib-h b { font-family: var(--g-ff-d); font-weight: 600; font-size: 13.5px; }
.gdemo-lib-h span { font-size: 12px; color: var(--g-ink3); white-space: nowrap; }
.gdemo-lib-list { padding: 6px; }
.gdemo-lib-sup { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 7px; font-size: 13px; color: var(--g-ink2); }
.gdemo-lib-sup .gdemo-i { width: 15px; height: 15px; color: var(--g-ink3); }
.gdemo-lib-sup-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdemo-lib-sup em { font-style: normal; font-size: 12px; color: var(--g-ink3); }
.gdemo-lib-sup.is-on { color: var(--g-ink); font-weight: 500; background: var(--g-accent-soft); }
.gdemo-lib-sup.is-on .gdemo-i, .gdemo-lib-sup.is-on em { color: var(--g-accent); }
.gdemo-lib-detail { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--g-line); padding: 18px 20px; }
.gdemo-lib-dhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--g-line); }
.gdemo-lib-dhead h4 { margin-top: 4px; font-family: var(--g-ff-d); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.gdemo-lib-stats { display: flex; gap: 22px; }
.gdemo-lib-stats span { display: flex; flex-direction: column; gap: 2px; }
.gdemo-lib-stats small { font-size: 11.5px; color: var(--g-ink3); }
.gdemo-lib-stats b { font-family: var(--g-ff-d); font-size: 15px; font-weight: 600; }
.gdemo-months { display: flex; flex-direction: column; margin-top: 8px; }
.gdemo-month { border-bottom: 1px solid var(--g-line); }
.gdemo-month:last-child { border-bottom: 0; }
.gdemo-month-h { display: grid; grid-template-columns: 16px 1fr auto 110px; align-items: center; column-gap: 10px; height: 44px; font-size: 13px; color: var(--g-ink2); }
.gdemo-month-h b { font-weight: 500; color: var(--g-ink); }
.gdemo-month-h .gdemo-num { font-weight: 500; color: var(--g-ink); }
.gdemo-month.is-open .gdemo-month-h > .gdemo-i { color: var(--g-accent); }
.gdemo-month-doc {
  display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; column-gap: 12px;
  margin: 0 0 12px 26px; padding: 12px 14px; border-radius: 10px; background: var(--g-bg2); box-shadow: inset 0 0 0 1px var(--g-line);
}
.gdemo-md-main { display: flex; flex-direction: column; min-width: 0; }
.gdemo-md-main b { font-weight: 500; }
.gdemo-md-main small { font-size: 12px; color: var(--g-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdemo-month-doc .gdemo-num { font-family: var(--g-ff-d); font-weight: 600; }

/* ------------------------------------------------------------- bank: summary */
.gdemo-card { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--g-line); padding: 16px 18px; background: var(--g-bg); }
.gdemo-card-h { display: flex; align-items: center; justify-content: space-between; }
.gdemo-sum-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.gdemo-queue-big { margin-top: 10px; font-family: var(--g-ff-d); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--g-ink); }
.gdemo-queue-big b { font-weight: 600; font-size: 26px; margin-right: 4px; display: inline-block; }
.gdemo-queue-sub { margin-top: 2px; font-size: 12.5px; color: var(--g-ink3); }
.gdemo-qlist { margin-top: 12px; border-top: 1px solid var(--g-line); }
.gdemo-qitem {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto 168px; align-items: center; column-gap: 12px;
  height: 38px; border-bottom: 1px solid var(--g-line); font-size: 12.5px; color: var(--g-ink3);
}
.gdemo-qitem > .gdemo-pill { justify-self: start; }
.gdemo-qtxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdemo-qtxt b { font-weight: 500; color: var(--g-ink); letter-spacing: 0.01em; }
.gdemo-qitem .gdemo-num { color: var(--g-ink); font-weight: 500; }
.gdemo-qdate .gdemo-i { width: 15px; height: 15px; }
.gdemo-qitem-inv .gdemo-qtxt b { letter-spacing: 0; }
.gdemo-qitem-inv { border-bottom: 0; }
.gdemo-qtxt .gdemo-odo { vertical-align: bottom; }
.gdemo-imp-file { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.gdemo-imp-file .gdemo-fileico b { background: #2F7A52; }
.gdemo-imp-file > span { display: flex; flex-direction: column; min-width: 0; }
.gdemo-imp-file b { font-weight: 500; }
.gdemo-imp-file small { font-size: 12px; color: var(--g-ink3); }
.gdemo-imp-n { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
.gdemo-imp-n b { font-family: var(--g-ff-d); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.gdemo-imp-n span { font-size: 13px; color: var(--g-ink2); }
.gdemo-bar { display: flex; gap: 2px; height: 8px; margin-top: 10px; border-radius: 4px; overflow: hidden; }
.gdemo-bar i, .gdemo-legend i { display: block; }
.gdemo-bar-conciliado { background: var(--g-accent); }
.gdemo-bar-revision { background: #D08A2E; }
.gdemo-bar-pago_sin_factura { background: #4E86BD; }
.gdemo-bar-otro { background: #C9CFCE; }
.gdemo-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 14px; }
.gdemo-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--g-ink2); }
.gdemo-legend i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.gdemo-legend b { margin-left: auto; font-weight: 500; color: var(--g-ink); }
.gdemo-groups { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); gap: 20px; margin-top: 20px; }
.gdemo-kgroup, .gdemo-kpi { min-width: 0; }
.gdemo-kgroup + .gdemo-kgroup { border-left: 1px solid var(--g-line); padding-left: 20px; }
.gdemo-kg-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.gdemo-kg-h b { font-family: var(--g-ff-d); font-size: 15px; font-weight: 600; }
.gdemo-kg-h span { font-size: 12.5px; color: var(--g-ink3); }
.gdemo-kpis { display: grid; gap: 12px; }
.gdemo-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.gdemo-kpis-2 { grid-template-columns: repeat(2, 1fr); }
.gdemo-kpi { display: flex; flex-direction: column; border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--g-line); }
.gdemo-kpi-l { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--g-ink2); }
.gdemo-kpi-l i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gdemo-kpi-ok .gdemo-kpi-l i { background: var(--g-accent); }
.gdemo-kpi-warn .gdemo-kpi-l i { background: #D08A2E; }
.gdemo-kpi-info .gdemo-kpi-l i { background: #4E86BD; }
.gdemo-kpi-mute .gdemo-kpi-l i { background: #C9CFCE; }
.gdemo-kpi > b { margin-top: 6px; font-family: var(--g-ff-d); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.gdemo-kpi small { margin-top: 2px; font-size: 12px; color: var(--g-ink3); }

/* --------------------------------------------------------- bank: invoices */
.gdemo-inv-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gdemo-inv-h > div { display: flex; flex-direction: column; }
.gdemo-inv-h b { font-family: var(--g-ff-d); font-size: 15px; font-weight: 600; }
.gdemo-inv-h > div > span { font-size: 12.5px; color: var(--g-ink3); margin-top: 2px; }
.gdemo-subtabs { position: relative; display: inline-flex; gap: 4px; margin: 14px 0 12px; padding: 4px; border-radius: 10px; background: var(--g-bg2); box-shadow: inset 0 0 0 1px var(--g-line); }
.gdemo-subtab {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 7px;
  position: relative; z-index: 1; font-size: 12.5px; font-weight: 500; color: var(--g-ink3); white-space: nowrap;
}
.gdemo-chipbg { position: absolute; left: 0; top: 4px; width: 100px; height: 30px; border-radius: 7px; background: var(--g-bg); box-shadow: 0 1px 2px rgba(13, 19, 18, 0.1), inset 0 0 0 1px var(--g-line); pointer-events: none; }
.gdemo-subtab em { font-style: normal; font-size: 11.5px; color: var(--g-ink3); }
[data-sub="revision"] .gdemo-subtab[data-sub="revision"],
[data-sub="conciliado"] .gdemo-subtab[data-sub="conciliado"] { color: var(--g-ink); }
[data-sub="revision"] .gdemo-subtab[data-sub="revision"] em { color: var(--g-warn); }
[data-sub="conciliado"] .gdemo-subtab[data-sub="conciliado"] em { color: var(--g-ok); }
.gdemo-bank-invoices [data-list], .gdemo-pager-conc { display: none; }
[data-sub="revision"] [data-list="revision"],
[data-sub="conciliado"] [data-list="conciliado"] { display: block; }
[data-sub="conciliado"] .gdemo-pager-conc { display: flex; }
.gdemo-t-rev .gdemo-tr { grid-template-columns: 84px minmax(0, 1.5fr) 96px minmax(0, 1.55fr) 176px 78px; height: 54px; }
.gdemo-t-rev .gdemo-th { height: 36px; }
.gdemo-t-conc .gdemo-tr { grid-template-columns: 84px minmax(0, 1.75fr) 92px minmax(0, 1.1fr) 92px 104px 104px 18px; }
.gdemo-bankc { display: flex; flex-direction: column; }
.gdemo-bankc b { font-weight: 500; font-size: 12.5px; letter-spacing: 0.02em; color: var(--g-ink); overflow: hidden; text-overflow: ellipsis; }
.gdemo-bankc small { display: none; font-size: 12px; color: var(--g-ink3); }
.gdemo-t-rev .gdemo-bankc small { display: block; }
.gdemo-sugg { display: flex; align-items: center; gap: 8px; }
.gdemo-sugg span { color: var(--g-ink2); overflow: hidden; text-overflow: ellipsis; }
.gdemo-sugg em, .gdemo-option em {
  font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; color: var(--g-ink3); box-shadow: inset 0 0 0 1px var(--g-line2); flex: none;
}
.gdemo-td-origin { display: inline-flex; align-items: center; gap: 6px; }
.gdemo-td-origin .gdemo-i { width: 14px; height: 14px; color: var(--g-ink3); }
.gdemo-td-act { display: flex; justify-content: flex-end; color: var(--g-ink3); }
.gdemo-td-act .gdemo-i { width: 15px; height: 15px; }

/* -------------------------------------------------------- scrim + drawers */
.gdemo-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(13, 19, 18, 0.34); opacity: 0; visibility: hidden; }
.gdemo-canvas:not([data-drawer="none"]) .gdemo-scrim,
.gdemo-canvas:not([data-modal="none"]) .gdemo-scrim { opacity: 1; visibility: visible; }

.gdemo-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: 440px;
  display: flex; flex-direction: column; background: var(--g-bg);
  box-shadow: var(--g-shadow-drawer), -1px 0 0 var(--g-line);
  transform: translateX(104%); visibility: hidden;
}
.gdemo-drawer-review { width: 460px; }
.gdemo-drawer-rec { width: 660px; }
[data-drawer="doc"] .gdemo-drawer-doc,
[data-drawer="review"] .gdemo-drawer-review,
[data-drawer="rec"] .gdemo-drawer-rec { transform: none; visibility: visible; }
.gdemo-dr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--g-line); }
.gdemo-dr-head h4 { margin-top: 5px; font-family: var(--g-ff-d); font-size: 21px; color: var(--g-ink); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.gdemo-dr-head h4.gdemo-dr-amount { font-size: 28px; letter-spacing: -0.03em; }
.gdemo-dr-head p { margin-top: 4px; font-size: 12.5px; color: var(--g-ink3); }
.gdemo-dr-body { flex: 1; overflow: hidden; padding: 4px 24px 20px; }
.gdemo-dr-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; font-size: 12.5px; color: var(--g-ink3); border-bottom: 1px solid var(--g-line); }
.gdemo-dr-status b { font-weight: 500; color: var(--g-ink2); }
.gdemo-origin { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--g-ink2); box-shadow: inset 0 0 0 1px var(--g-line2); }
.gdemo-origin .gdemo-i { width: 13px; height: 13px; }
.gdemo-dr-sec { padding: 13px 0; border-bottom: 1px solid var(--g-line); }
.gdemo-dr-sec:last-child { border-bottom: 0; }
.gdemo-dr-sec h5 { margin-bottom: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-ink3); }
.gdemo-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.gdemo-kvs-1 { grid-template-columns: 1fr; gap: 10px; }
.gdemo-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gdemo-kv-wide { grid-column: 1 / -1; }
.gdemo-kv dt { font-size: 12px; color: var(--g-ink3); }
.gdemo-kv dd { font-size: 13.5px; font-weight: 500; color: var(--g-ink); }
.gdemo-amounts > div { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 13px; color: var(--g-ink2); }
.gdemo-amounts b { font-weight: 500; color: var(--g-ink); }
.gdemo-vatline { padding-left: 12px !important; }
.gdemo-vatline span { position: relative; }
.gdemo-vatline span::before { content: ''; position: absolute; left: -12px; top: 0.6em; width: 6px; height: 1px; background: var(--g-line2); }
.gdemo-amt-sub { border-bottom: 1px solid var(--g-line); padding-bottom: 10px !important; }
.gdemo-amt-total { padding-top: 10px !important; }
.gdemo-amt-total span { font-weight: 500; color: var(--g-ink); }
.gdemo-amt-total b { font-family: var(--g-ff-d); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.gdemo-entity, .gdemo-attach { display: flex; align-items: center; gap: 12px; }
.gdemo-entity > .gdemo-i { width: 32px; height: 32px; padding: 7px; border-radius: 9px; color: var(--g-ink2); background: var(--g-bg2); box-shadow: inset 0 0 0 1px var(--g-line); }
.gdemo-entity > span, .gdemo-attach > span:not(.gdemo-btn):not(.gdemo-fileico) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gdemo-entity b, .gdemo-attach b { font-weight: 500; }
.gdemo-entity small, .gdemo-attach small { font-size: 12px; color: var(--g-ink3); }
.gdemo-attach .gdemo-fileico { width: 26px; height: 31px; }

/* review drawer */
.gdemo-dr-status.gdemo-stack { display: grid; }
.gdemo-rv-status > * { justify-self: start; align-self: center; }
.gdemo-drawer-review .gdemo-rv-b, .gdemo-t-rev .gdemo-rev-b { opacity: 0; visibility: hidden; }
[data-review="confirmed"] .gdemo-drawer-review .gdemo-rv-a, [data-review="confirmed"] .gdemo-t-rev [data-row="r01"] .gdemo-rev-a { opacity: 0; visibility: hidden; }
[data-review="confirmed"] .gdemo-drawer-review .gdemo-rv-b, [data-review="confirmed"] .gdemo-t-rev [data-row="r01"] .gdemo-rev-b { opacity: 1; visibility: visible; }
.gdemo-sg-tag > * { justify-self: start; align-self: center; }
.gdemo-sugg .gdemo-rev-b { display: inline-flex; align-items: center; gap: 4px; color: var(--g-ok); box-shadow: inset 0 0 0 1px rgba(20, 107, 61, 0.3); }
.gdemo-sugg .gdemo-rev-b .gdemo-i { width: 11px; height: 11px; stroke-width: 2.6; }
.gdemo-td-st.gdemo-stack > * { justify-self: start; align-self: center; }
.gdemo-callout {
  display: flex; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--g-warn-bg); color: var(--g-warn); font-size: 12.5px; line-height: 1.5;
}
.gdemo-callout .gdemo-i { width: 17px; height: 17px; margin-top: 1px; flex: none; }
.gdemo-callout-info { background: var(--g-info-bg); color: var(--g-info); }
.gdemo-rv-callout { align-items: start; }
.gdemo-callout b { display: block; font-weight: 500; }
.gdemo-option {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--g-line2);
}
.gdemo-option.is-on { background: var(--g-accent-soft); box-shadow: inset 0 0 0 1.5px var(--g-accent); }
.gdemo-option > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gdemo-option b { font-weight: 500; }
.gdemo-option small { font-size: 12px; color: var(--g-ink2); }
.gdemo-option.is-on em { color: var(--g-accent); box-shadow: inset 0 0 0 1px var(--g-accent-line); }
.gdemo-radio { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--g-line2); }
.gdemo-option.is-on .gdemo-radio { box-shadow: inset 0 0 0 4.5px var(--g-accent); }
.gdemo-input-full { width: 100%; margin-top: 10px; }
.gdemo-confirmed { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--g-ok-bg); }
.gdemo-confirmed > .gdemo-i { width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: #FFFFFF; background: var(--g-accent); stroke-width: 2.4; }
.gdemo-confirmed > span:not(.gdemo-link) { display: flex; flex-direction: column; flex: 1; }
.gdemo-confirmed b { font-weight: 500; }
.gdemo-confirmed small { font-size: 12px; color: var(--g-ink2); }
.gdemo-dr-note { display: flex; gap: 8px; margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--g-ink2); }
.gdemo-dr-note .gdemo-i { width: 15px; height: 15px; margin-top: 2px; color: var(--g-info); }
.gdemo-dr-foot { padding: 14px 24px; border-top: 1px solid var(--g-line); background: var(--g-bg); }
.gdemo-dr-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* completed reconciliation drawer */
.gdemo-pair { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: stretch; gap: 0; padding: 16px 0; border-bottom: 1px solid var(--g-line); }
.gdemo-side-card { padding: 14px 16px; border-radius: 12px; background: var(--g-bg2); box-shadow: inset 0 0 0 1px var(--g-line); }
.gdemo-pair-amt { display: block; margin: 8px 0 12px; font-family: var(--g-ff-d); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.gdemo-pair-link { display: grid; place-items: center; color: var(--g-accent); }
.gdemo-pair-link .gdemo-i { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--g-accent-soft); box-sizing: content-box; }
.gdemo-checks li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--g-ink2); }
.gdemo-checks .gdemo-i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: var(--g-ok); background: var(--g-ok-bg); stroke-width: 2.4; }
.gdemo-checks b { margin-left: auto; font-weight: 500; color: var(--g-ink); }
.gdemo-hist li { position: relative; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; column-gap: 10px; padding: 5px 0; font-size: 13px; color: var(--g-ink2); }
.gdemo-hist li i { width: 8px; height: 8px; border-radius: 50%; background: var(--g-line2); justify-self: center; }
.gdemo-hist li:last-child i { background: var(--g-accent); }
.gdemo-hist small { font-size: 12px; color: var(--g-ink3); }

/* ----------------------------------------------------------------- modals */
.gdemo-modal { position: absolute; z-index: 8; visibility: hidden; opacity: 0; }
[data-modal="upload"] .gdemo-upload, [data-modal="viewer"] .gdemo-viewer { visibility: visible; opacity: 1; }
.gdemo-upload {
  left: 50%; top: 96px; width: 540px; margin-left: -270px;
  border-radius: 14px; background: var(--g-bg); box-shadow: var(--g-shadow-pop);
}
.gdemo-mo-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 20px 4px 24px; }
.gdemo-mo-head h4 { color: var(--g-ink); font-family: var(--g-ff-d); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.gdemo-mo-head p { margin-top: 4px; font-size: 12.5px; color: var(--g-ink3); }
.gdemo-mo-body { padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.gdemo-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--g-ink2); }
.gdemo-select { width: 100%; color: var(--g-ink); }
.gdemo-select .gdemo-i:last-child { margin-left: auto; }
.gdemo-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border-radius: 12px;
  border: 1.5px dashed var(--g-line2); background: var(--g-bg2); text-align: center;
}
.gdemo-drop .gdemo-i { width: 30px; height: 30px; color: var(--g-accent); margin-bottom: 6px; }
.gdemo-drop b { font-weight: 500; font-size: 14px; }
.gdemo-drop span { font-size: 12.5px; color: var(--g-ink3); }
.gdemo-drop u { color: var(--g-accent); text-decoration: none; font-weight: 500; }
.gdemo-upfile { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--g-line); }
.gdemo-upfile .gdemo-fileico { width: 24px; height: 29px; }
.gdemo-upfile-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gdemo-upfile-main b { font-weight: 500; }
.gdemo-upfile-main small { font-size: 12px; color: var(--g-ink3); }
.gdemo-upfile-main small > * { white-space: nowrap; }
.gdemo-up-b { opacity: 0; visibility: hidden; }
.gdemo-up-pct { font-weight: 500; color: var(--g-ink2); }
.gdemo-progress { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--g-bg3); overflow: hidden; }
.gdemo-progress i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--g-accent); transform-origin: 0 50%; }
.gdemo-mo-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--g-line); }
.gdemo-mo-foot .gdemo-spin { color: #FFFFFF; }
.gdemo-b-stack { display: inline-grid; }
.gdemo-b-stack > * { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.gdemo-b-idle, .gdemo-b-done { opacity: 0; visibility: hidden; }

.gdemo-viewer { inset: 22px 28px; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; box-shadow: var(--g-shadow-pop); }
.gdemo-vw-bar {
  height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 10px 0 16px;
  background: #1E2423; color: #E7EBEA;
}
.gdemo-vw-bar .gdemo-iconbtn { color: #C9D0CF; width: 30px; height: 30px; }
.gdemo-vw-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gdemo-vw-name b { font-weight: 500; font-size: 13px; }
.gdemo-vw-name small { font-size: 12px; color: #9AA4A2; }
.gdemo-vw-name .gdemo-fileico { width: 16px; height: 19px; color: #5A6462; }
.gdemo-vw-name .gdemo-fileico b { font-size: 5.5px; left: -2px; bottom: 2px; padding: 0 2px; }
.gdemo-vw-zoom { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 8px; background: #2A3130; }
.gdemo-vw-zoom b { font-weight: 500; font-size: 12.5px; min-width: 46px; text-align: center; }
.gdemo-vw-act { display: flex; justify-content: flex-end; gap: 2px; }
.gdemo-vw-stage { flex: 1; overflow: hidden; display: flex; justify-content: center; padding-top: 26px; background: #3B4342; }

/* the fictitious invoice (sized in em so each composition scales it) */
.gdemo-paper {
  font-size: 11px; width: 52em; flex: none; align-self: flex-start;
  padding: 3.4em 3.6em 3em; background: #FFFFFF; color: #1A1F1E;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 20px 40px -12px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}
.gdemo-ip-head { display: flex; justify-content: space-between; gap: 2em; }
.gdemo-ip-from { display: flex; gap: 1.1em; }
.gdemo-ip-logo {
  width: 3.6em; height: 3.6em; flex: none; display: grid; place-items: center; border-radius: 0.6em;
  font-family: var(--g-ff-d); font-weight: 700; font-size: 1em; color: #FFFFFF; background: #36504A;
}
.gdemo-ip-from > div { display: flex; flex-direction: column; gap: 0.2em; }
.gdemo-ip-from b { font-family: var(--g-ff-d); font-size: 1.35em; font-weight: 600; }
.gdemo-ip-from small, .gdemo-ip-to span { font-size: 0.95em; color: #5C6563; }
.gdemo-ip-title { text-align: right; }
.gdemo-ip-title > b { display: block; font-family: var(--g-ff-d); font-size: 2em; font-weight: 700; letter-spacing: 0.08em; }
.gdemo-ip-title dl { display: grid; grid-template-columns: auto auto; gap: 0.25em 1em; margin-top: 0.7em; font-size: 0.95em; }
.gdemo-ip-title dt { color: #5C6563; }
.gdemo-ip-title dd { font-weight: 500; }
.gdemo-ip-to { display: flex; flex-direction: column; gap: 0.15em; margin-top: 2.4em; padding: 1em 1.2em; border-radius: 0.5em; background: #F4F6F5; }
.gdemo-ip-to small { font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase; color: #5C6563; }
.gdemo-ip-to b { font-weight: 600; }
.gdemo-ip-lines { width: 100%; margin-top: 2.2em; border-collapse: collapse; font-size: 1em; }
.gdemo-ip-lines th { padding: 0.6em 0.4em; font-size: 0.85em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; color: #5C6563; border-bottom: 1.5px solid #1A1F1E; }
.gdemo-ip-lines th.gdemo-num { text-align: right; }
.gdemo-ip-lines td { padding: 0.75em 0.4em; border-bottom: 1px solid #E3E7E6; }
.gdemo-ip-totals { width: 22em; margin: 1.6em 0 0 auto; }
.gdemo-ip-totals > div { display: flex; justify-content: space-between; padding: 0.35em 0.4em; }
.gdemo-ip-totals span { color: #5C6563; }
.gdemo-ip-total { margin-top: 0.4em; padding: 0.7em 0.8em !important; border-radius: 0.4em; background: #F4F6F5; }
.gdemo-ip-total span, .gdemo-ip-total b { color: #1A1F1E; font-family: var(--g-ff-d); font-weight: 700; font-size: 1.2em; }
.gdemo-ip-foot { margin-top: 3.4em; padding-top: 1em; border-top: 1px solid #E3E7E6; font-size: 0.9em; color: #5C6563; }

/* ------------------------------------------------------------------ toast */
.gdemo-toast {
  position: absolute; left: 32px; bottom: 24px; z-index: 9; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px 11px 12px; border-radius: 10px; font-size: 13px; color: #F2F5F4; background: #17201E;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden;
}
.gdemo-toast .gdemo-i { width: 20px; height: 20px; padding: 3px; border-radius: 50%; color: #0A0A0A; background: var(--gs-mint); stroke-width: 2.6; }
.gdemo-toast b { font-weight: 500; }
[data-toast="on"] .gdemo-toast { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- cursor */
.gdemo-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 0; height: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.gdemo-arrow { position: absolute; left: -3px; top: -2px; width: 24px; height: 24px; display: block; transform-origin: 3px 2px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.gdemo-ripple { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(8, 112, 77, 0.32); opacity: 0; visibility: hidden; }
.gdemo-touch { display: none; }
.gdemo-navscrim { display: none; }

/* =========================================================== TABLET 900×790 */
.gdemo[data-mode="tablet"] .gdemo-side { width: 72px; padding: 14px 10px; align-items: center; }
.gdemo[data-mode="tablet"] .gdemo-brand { width: 52px; height: 44px; padding: 0; justify-content: center; overflow: hidden; }
.gdemo[data-mode="tablet"] .gdemo-brand img { height: 10px; }
.gdemo[data-mode="tablet"] .gdemo-nav { width: 100%; }
.gdemo[data-mode="tablet"] .gdemo-nav-item { justify-content: center; padding: 0; height: 42px; }
.gdemo[data-mode="tablet"] .gdemo-nav-label, .gdemo[data-mode="tablet"] .gdemo-user-txt,
.gdemo[data-mode="tablet"] .gdemo-logout span { display: none; }
.gdemo[data-mode="tablet"] .gdemo-nav-group { height: 1px; padding: 0; margin: 10px 8px; overflow: hidden; color: transparent; background: var(--gs-line); }
.gdemo[data-mode="tablet"] .gdemo-user { grid-template-columns: 1fr; justify-items: center; width: 100%; }
.gdemo[data-mode="tablet"] .gdemo-logout { width: 40px; }
.gdemo[data-mode="tablet"] .gdemo-main { left: 72px; }
.gdemo[data-mode="tablet"] .gdemo-top { padding: 0 24px; }
.gdemo[data-mode="tablet"] .gdemo-page { padding: 20px 24px 0; }
.gdemo[data-mode="tablet"] .gdemo-title { font-size: 24px; }
.gdemo[data-mode="tablet"] .gdemo-sub { max-width: 440px; }
.gdemo[data-mode="tablet"] .gdemo-search { width: 260px; }
.gdemo[data-mode="tablet"] .gdemo-chip-state { display: none; }
.gdemo[data-mode="tablet"] .gdemo-t-docs { --g-rowh: 50px; }
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-tr { grid-template-columns: minmax(0, 1fr) 90px 100px 160px; }
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-th { height: 36px; }
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-td-ref,
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-td-concept,
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-td-base,
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-td-vat,
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-th > :nth-child(3),
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-th > :nth-child(4),
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-th > :nth-child(5),
.gdemo[data-mode="tablet"] .gdemo-t-docs .gdemo-th > :nth-child(6) { display: none; }
.gdemo[data-mode="tablet"] .gdemo-td-sup { display: flex; flex-direction: column; }
.gdemo[data-mode="tablet"] .gdemo-td-sup .gdemo-sw2 > * { display: flex; flex-direction: column; }
.gdemo[data-mode="tablet"] .gdemo-td-sup small { display: block; font-size: 12px; color: var(--g-ink3); overflow: hidden; text-overflow: ellipsis; }
.gdemo[data-mode="tablet"] .gdemo-lib { grid-template-columns: 236px 1fr; }
.gdemo[data-mode="tablet"] .gdemo-lib-sups { height: 480px; }
.gdemo[data-mode="tablet"] .gdemo-lib-dhead { flex-direction: column; align-items: flex-start; }
.gdemo[data-mode="tablet"] .gdemo-lib-crumbs > :nth-child(2), .gdemo[data-mode="tablet"] .gdemo-lib-crumbs > :nth-child(3) { display: none; }
.gdemo[data-mode="tablet"] .gdemo-sum-grid { grid-template-columns: 1fr 300px; }
.gdemo[data-mode="tablet"] .gdemo-qitem { grid-template-columns: minmax(0, 1fr) auto 166px; }
.gdemo[data-mode="tablet"] .gdemo-qitem-inv .gdemo-qdate { display: block; }
.gdemo[data-mode="tablet"] .gdemo-qitem-inv { grid-template-columns: 22px minmax(0, 1fr) 0 166px; }
.gdemo[data-mode="tablet"] .gdemo-qitem:not(.gdemo-qitem-inv) .gdemo-qdate { display: none; }
.gdemo[data-mode="tablet"] .gdemo-legend { grid-template-columns: 1fr; gap: 6px; }
.gdemo[data-mode="tablet"] .gdemo-groups { gap: 14px; margin-top: 16px; }
.gdemo[data-mode="tablet"] .gdemo-kgroup + .gdemo-kgroup { padding-left: 14px; }
.gdemo[data-mode="tablet"] .gdemo-kg-h span { display: none; }
.gdemo[data-mode="tablet"] .gdemo-kpis { gap: 8px; }
.gdemo[data-mode="tablet"] .gdemo-kpi small { display: none; }
.gdemo[data-mode="tablet"] .gdemo-kpi { padding: 10px 10px 8px; }
.gdemo[data-mode="tablet"] .gdemo-kpi-l { font-size: 12px; align-items: flex-start; line-height: 1.25; }
.gdemo[data-mode="tablet"] .gdemo-kpi-l i { margin-top: 4px; }
.gdemo[data-mode="tablet"] .gdemo-kpi > b { font-size: 24px; }
.gdemo[data-mode="tablet"] .gdemo-inv-h > div > span, .gdemo[data-mode="tablet"] .gdemo-search-sm { display: none; }
.gdemo[data-mode="tablet"] .gdemo-t-rev .gdemo-tr { grid-template-columns: 82px minmax(0, 1fr) 92px 178px 76px; }
.gdemo[data-mode="tablet"] .gdemo-t-rev .gdemo-sugg, .gdemo[data-mode="tablet"] .gdemo-t-rev .gdemo-th > :nth-child(4) { display: none; }
.gdemo[data-mode="tablet"] .gdemo-t-conc .gdemo-tr { grid-template-columns: 82px minmax(0, 1fr) 92px 104px 104px 16px; height: 48px; }
.gdemo[data-mode="tablet"] .gdemo-t-conc .gdemo-th { height: 36px; }
.gdemo[data-mode="tablet"] .gdemo-t-conc .gdemo-td-sup, .gdemo[data-mode="tablet"] .gdemo-t-conc .gdemo-td-ref,
.gdemo[data-mode="tablet"] .gdemo-t-conc .gdemo-th > :nth-child(4), .gdemo[data-mode="tablet"] .gdemo-t-conc .gdemo-th > :nth-child(5) { display: none; }
.gdemo[data-mode="tablet"] .gdemo-t-conc .gdemo-bankc small { display: block; }
.gdemo[data-mode="tablet"] .gdemo-drawer-doc { width: 420px; }
.gdemo[data-mode="tablet"] .gdemo-drawer-review { width: 440px; }
.gdemo[data-mode="tablet"] .gdemo-drawer-rec { width: 580px; }
.gdemo[data-mode="tablet"] .gdemo-hist { display: none; }
.gdemo[data-mode="tablet"] .gdemo-drawer-rec .gdemo-dr-sec:last-child h5 { display: none; }
.gdemo[data-mode="tablet"] .gdemo-viewer { inset: 18px; }
/* Readability at the size it really renders on a ~768px page (canvas ×0.83):
   targeted bumps for statuses, the review warning and bank concepts only. */
.gdemo[data-mode="tablet"] .gdemo-pill { font-size: 13px; height: 26px; }
.gdemo[data-mode="tablet"] .gdemo-td-sup b { font-size: 15px; }
.gdemo[data-mode="tablet"] .gdemo-file .gdemo-fileico b { font-size: 5.5px; }
.gdemo[data-mode="tablet"] .gdemo-bankc b { font-size: 13.5px; }
.gdemo[data-mode="tablet"] .gdemo-callout { font-size: 13.5px; }
.gdemo[data-mode="tablet"] .gdemo-th { font-size: 12px; }
.gdemo[data-mode="tablet"] .gdemo-confirmed small, .gdemo[data-mode="tablet"] .gdemo-option small { font-size: 12.5px; }
.gdemo[data-mode="tablet"] .gdemo-toast { left: 24px; }

/* =========================================================== MOBILE 390×820 */
.gdemo[data-mode="mobile"] .gdemo-canvas { border-radius: 26px; font-size: 14px; box-shadow: 0 0 0 1px var(--gs-line2), 0 0 0 7px #161616, 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.gdemo[data-mode="mobile"] .gdemo-chrome, .gdemo[data-mode="mobile"] .gdemo-top { display: none; }
/* phones: the sidebar becomes a slide-over menu opened from the app bar */
.gdemo[data-mode="mobile"] .gdemo-side { top: 0; z-index: 9; width: 288px; padding-top: 22px; box-shadow: 24px 0 48px -24px rgba(0, 0, 0, 0.6); transform: translateX(-104%); visibility: hidden; }
.gdemo[data-mode="mobile"] .gdemo-navscrim { display: block; position: absolute; inset: 0; z-index: 8; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; }
.gdemo[data-mode="mobile"] .gdemo-appbar {
  position: absolute; left: 0; right: 0; top: 0; height: 58px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 0;
  background: var(--gs-bg); color: var(--gs-ink2); border-bottom: 1px solid var(--gs-line);
}
.gdemo[data-mode="mobile"] .gdemo-appbar .gdemo-i { width: 22px; height: 22px; }
.gdemo[data-mode="mobile"] .gdemo-appbar img { height: 16px; width: auto; }
.gdemo[data-mode="mobile"] .gdemo-appbar .gdemo-avatar { width: 30px; height: 30px; font-size: 11px; }
.gdemo[data-mode="mobile"] .gdemo-main { left: 0; top: 58px; }
.gdemo[data-mode="mobile"] .gdemo-page { padding: 18px 16px 0; }
.gdemo[data-mode="mobile"] .gdemo-phead { position: relative; display: block; padding-right: 48px; }
.gdemo[data-mode="mobile"] .gdemo-title { font-size: 22px; }
.gdemo[data-mode="mobile"] .gdemo-sub { font-size: 13.5px; }
.gdemo[data-mode="mobile"] .gdemo-actions { position: absolute; top: 0; right: 0; padding: 0; }
.gdemo[data-mode="mobile"] .gdemo-actions .gdemo-btn { width: 40px; height: 40px; padding: 0; border-radius: 11px; }
.gdemo[data-mode="mobile"] .gdemo-actions .gdemo-btn > span, .gdemo[data-mode="mobile"] .gdemo-actions .gdemo-btn:not(.gdemo-btn-primary) { display: none; }
.gdemo[data-mode="mobile"] .gdemo-actions .gdemo-i { width: 19px; height: 19px; }
.gdemo[data-mode="mobile"] .gdemo-tabs { gap: 20px; margin-top: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.gdemo[data-mode="mobile"] .gdemo-tab { font-size: 14px; height: 42px; }
.gdemo[data-mode="mobile"] .gdemo-panel { margin-top: 14px; }
.gdemo[data-mode="mobile"] .gdemo-search { width: 100%; height: 40px; font-size: 14px; }
.gdemo[data-mode="mobile"] .gdemo-chip, .gdemo[data-mode="mobile"] .gdemo-count { display: none; }

.gdemo[data-mode="mobile"] .gdemo-table { box-shadow: none; border-radius: 0; overflow: visible; }
.gdemo[data-mode="mobile"] .gdemo-th { display: none; }
.gdemo[data-mode="mobile"] .gdemo-tr {
  height: 64px; padding: 0 12px; margin: 0 -12px; column-gap: 12px; row-gap: 4px; align-content: center; font-size: 14px;
  grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto;
}

.gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-td-date, .gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-td-ref,
.gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-td-concept, .gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-td-base,
.gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-td-vat { display: none; }
.gdemo[data-mode="mobile"] .gdemo-t-docs { --g-rowh: 64px; }
.gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-td-sup { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 2px; }
.gdemo[data-mode="mobile"] .gdemo-td-sup .gdemo-sw2 > * { display: flex; flex-direction: column; gap: 2px; }
.gdemo[data-mode="mobile"] .gdemo-td-sup small { display: block; font-size: 12.5px; color: var(--g-ink3); overflow: hidden; text-overflow: ellipsis; }
.gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-td-total { text-align: right; }
.gdemo[data-mode="mobile"] .gdemo-td-st { justify-self: end; }
.gdemo[data-mode="mobile"] .gdemo-td-st .gdemo-sw2 > * { text-align: right; }
.gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-tr-pending .gdemo-td-total { display: none; }
.gdemo[data-mode="mobile"] .gdemo-t-docs .gdemo-tr-pending .gdemo-td-st { grid-row: 1 / 3; }
.gdemo[data-mode="mobile"] .gdemo-pager { margin-top: 6px; }

.gdemo[data-mode="mobile"] .gdemo-lib-bar { margin-bottom: 10px; }
.gdemo[data-mode="mobile"] .gdemo-lib-crumbs > :nth-child(n+2):nth-child(-n+5) { display: none; }
.gdemo[data-mode="mobile"] .gdemo-seg { display: none; }
.gdemo[data-mode="mobile"] .gdemo-lib { grid-template-columns: 1fr; }
.gdemo[data-mode="mobile"] .gdemo-lib-sups { display: none; }
.gdemo[data-mode="mobile"] .gdemo-lib-detail { padding: 16px; }
.gdemo[data-mode="mobile"] .gdemo-lib-dhead { flex-direction: column; align-items: flex-start; }
.gdemo[data-mode="mobile"] .gdemo-lib-stats { gap: 18px; }
.gdemo[data-mode="mobile"] .gdemo-month-h { grid-template-columns: 16px 1fr auto; }
.gdemo[data-mode="mobile"] .gdemo-month-h > :nth-child(3) { display: none; }
.gdemo[data-mode="mobile"] .gdemo-month-doc { grid-template-columns: 22px 1fr auto; margin-left: 0; row-gap: 6px; }
.gdemo[data-mode="mobile"] .gdemo-month-doc > .gdemo-pill { grid-column: 2 / 4; justify-self: start; }

.gdemo[data-mode="mobile"] .gdemo-sum-grid { grid-template-columns: 1fr; gap: 12px; }
.gdemo[data-mode="mobile"] .gdemo-queue-sub { display: none; }
.gdemo[data-mode="mobile"] .gdemo-import { display: none; }
.gdemo[data-mode="mobile"] .gdemo-queue .gdemo-link { display: none; }
.gdemo[data-mode="mobile"] .gdemo-qitem { grid-template-columns: 10px minmax(0, 1fr) auto; height: 40px; column-gap: 10px; }
.gdemo[data-mode="mobile"] .gdemo-qitem .gdemo-qdate { display: none; }
/* status as a coloured dot (same colours as the category tiles below) */
.gdemo[data-mode="mobile"] .gdemo-qitem > .gdemo-pill { order: -1; padding: 0; height: auto; font-size: 0; gap: 0; background: none; }
.gdemo[data-mode="mobile"] .gdemo-qitem > .gdemo-pill .gdemo-dot { width: 8px; height: 8px; }
.gdemo[data-mode="mobile"] .gdemo-qitem-inv .gdemo-num { display: none; }
.gdemo[data-mode="mobile"] .gdemo-groups { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.gdemo[data-mode="mobile"] .gdemo-kgroup + .gdemo-kgroup { border-left: 0; padding-left: 0; }
.gdemo[data-mode="mobile"] .gdemo-kg-h { margin-bottom: 6px; }
.gdemo[data-mode="mobile"] .gdemo-kpis { grid-template-columns: 1fr; gap: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--g-line); }
.gdemo[data-mode="mobile"] .gdemo-kpi { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 14px; height: 38px; border-radius: 0; box-shadow: none; border-top: 1px solid var(--g-line); }
.gdemo[data-mode="mobile"] .gdemo-kpi:first-child { border-top: 0; }
.gdemo[data-mode="mobile"] .gdemo-kpi > b { margin: 0; font-size: 19px; }
.gdemo[data-mode="mobile"] .gdemo-kpi small { display: none; }
.gdemo[data-mode="mobile"] .gdemo-kpi-l { font-size: 13.5px; }

.gdemo[data-mode="mobile"] .gdemo-inv-h { display: none; }
.gdemo[data-mode="mobile"] .gdemo-subtabs { display: flex; margin-top: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.gdemo[data-mode="mobile"] .gdemo-t-rev .gdemo-td-date, .gdemo[data-mode="mobile"] .gdemo-t-rev .gdemo-sugg, .gdemo[data-mode="mobile"] .gdemo-t-rev .gdemo-td-act,
.gdemo[data-mode="mobile"] .gdemo-t-conc .gdemo-td-date, .gdemo[data-mode="mobile"] .gdemo-t-conc .gdemo-td-sup,
.gdemo[data-mode="mobile"] .gdemo-t-conc .gdemo-td-ref, .gdemo[data-mode="mobile"] .gdemo-t-conc .gdemo-td-origin,
.gdemo[data-mode="mobile"] .gdemo-t-conc .gdemo-td-act { display: none; }
.gdemo[data-mode="mobile"] .gdemo-bankc { grid-row: 1 / 3; }
.gdemo[data-mode="mobile"] .gdemo-bankc small { display: block; }
.gdemo[data-mode="mobile"] .gdemo-t-rev .gdemo-tr, .gdemo[data-mode="mobile"] .gdemo-t-conc .gdemo-tr { height: 66px; }

/* bottom sheets */
.gdemo[data-mode="mobile"] .gdemo-drawer {
  left: 0; right: 0; top: 34px; width: auto !important; border-radius: 18px 18px 0 0;
  transform: translateY(104%); box-shadow: 0 -20px 40px -20px rgba(13, 19, 18, 0.35);
}
.gdemo[data-mode="mobile"] .gdemo-drawer::before { content: ''; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--g-line2); }
.gdemo[data-mode="mobile"] [data-drawer="doc"] .gdemo-drawer-doc,
.gdemo[data-mode="mobile"] [data-drawer="review"] .gdemo-drawer-review,
.gdemo[data-mode="mobile"] [data-drawer="rec"] .gdemo-drawer-rec { transform: none; }
.gdemo[data-mode="mobile"] .gdemo-dr-head { padding: 20px 16px 12px 18px; }
.gdemo[data-mode="mobile"] .gdemo-dr-body { padding: 0 18px 16px; }
.gdemo[data-mode="mobile"] .gdemo-dr-sec { padding: 12px 0; }
.gdemo[data-mode="mobile"] .gdemo-dr-sec h5 { margin-bottom: 8px; }
.gdemo[data-mode="mobile"] .gdemo-dr-status { padding: 10px 0; }
.gdemo[data-mode="mobile"] .gdemo-dr-foot { padding: 12px 18px; }
.gdemo[data-mode="mobile"] .gdemo-dr-btns .gdemo-btn { flex: 1; height: 40px; }
.gdemo[data-mode="mobile"] .gdemo-drawer-doc .gdemo-dr-status > span:last-child { display: none; }
.gdemo[data-mode="mobile"] .gdemo-drawer-doc .gdemo-dr-sec:nth-last-child(2) { display: none; }
.gdemo[data-mode="mobile"] .gdemo-attach { flex-wrap: wrap; }
.gdemo[data-mode="mobile"] .gdemo-attach .gdemo-btn { width: 100%; height: 38px; }
.gdemo[data-mode="mobile"] .gdemo-drawer-review .gdemo-kvs { grid-template-columns: 1fr 1fr; }
.gdemo[data-mode="mobile"] .gdemo-drawer-review .gdemo-kv:nth-child(5) { display: none; }
.gdemo[data-mode="mobile"] .gdemo-callout { margin-top: 12px; }
.gdemo[data-mode="mobile"] .gdemo-pair { grid-template-columns: 1fr; grid-template-rows: auto 28px auto; padding: 12px 0; }
.gdemo[data-mode="mobile"] .gdemo-pair-amt { margin: 4px 0 8px; font-size: 20px; }
.gdemo[data-mode="mobile"] .gdemo-side-card { padding: 12px 14px; }
.gdemo[data-mode="mobile"] .gdemo-side-card .gdemo-kv:nth-child(3) { display: none; }
.gdemo[data-mode="mobile"] .gdemo-drawer-rec .gdemo-dr-sec:last-child { display: none; }
.gdemo[data-mode="mobile"] .gdemo-drawer-rec .gdemo-dr-head h4 { font-size: 16px; }
.gdemo[data-mode="mobile"] .gdemo-drawer-rec .gdemo-dr-status > span:last-child { display: none; }
.gdemo[data-mode="mobile"] .gdemo-kvs-1 { gap: 6px; }
.gdemo[data-mode="mobile"] .gdemo-side-card .gdemo-kv dd { font-size: 13px; }
.gdemo[data-mode="mobile"] .gdemo-checks li { padding: 3px 0; font-size: 13px; }
.gdemo[data-mode="mobile"] .gdemo-checks b { display: none; }
.gdemo[data-mode="mobile"] .gdemo-upload { left: 0; right: 0; top: auto; bottom: 0; width: auto; margin: 0; border-radius: 18px 18px 0 0; }
.gdemo[data-mode="mobile"] .gdemo-mo-foot .gdemo-btn { flex: 1; height: 40px; }
.gdemo[data-mode="mobile"] .gdemo-viewer { inset: 0; border-radius: 0; }
.gdemo[data-mode="mobile"] .gdemo-vw-zoom, .gdemo[data-mode="mobile"] .gdemo-vw-act .gdemo-iconbtn:not(:last-child), .gdemo[data-mode="mobile"] .gdemo-vw-name small { display: none; }
.gdemo[data-mode="mobile"] .gdemo-vw-bar { grid-template-columns: 1fr auto; }
.gdemo[data-mode="mobile"] .gdemo-vw-stage { padding-top: 16px; }
.gdemo[data-mode="mobile"] .gdemo-paper { font-size: 7px; }
.gdemo[data-mode="mobile"] .gdemo-toast { left: 16px; right: 16px; top: 12px; bottom: auto; }

.gdemo[data-mode="mobile"] .gdemo-arrow { display: none; }
.gdemo[data-mode="mobile"] .gdemo-touch {
  display: block; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(16, 18, 16, 0.14); box-shadow: 0 0 0 2px rgba(16, 18, 16, 0.4), 0 4px 12px rgba(0, 0, 0, 0.18);
}
.gdemo[data-mode="mobile"] .gdemo-ripple { left: -20px; top: -20px; width: 40px; height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .gdemo-spin { animation: none; }
}