/* LaunchAmp Analytics: Google-Analytics style, bars style B.
   Light by default; dark only when data-theme="dark" is set on <html> (the theme button in the top bar, remembered by app.js).
   Corners are square (6 px); round shapes are used only for data marks (dots, donut). */
:root {
  --gx-bg: #f8f9fa; --gx-card: #fff; --gx-ink: #202124; --gx-ink-2: #5f6368; --gx-ink-3: #80868b;
  --gx-line: #dadce0; --gx-line-2: #e8eaed; --gx-hover: #f1f3f4;
  --gx-blue: #1a73e8; --gx-blue-soft: #e8f0fe; --gx-on-blue: #fff; --gx-chart: #4285f4;
  --gx-green: #188038; --gx-red: #d93025; --gx-amber: #b06000; --gx-amber-soft: #fef7e0; --gx-amber-ink: #8a4b00;
  --gx-ok-bg: #e6f4ea; --gx-ok-ink: #0d652d; --gx-ok-line: #b7dfc2;
  --gx-bad-bg: #fce8e6; --gx-bad-ink: #a50e0e; --gx-bad-line: #f5c0bb;
  --gx-ai-bg: #e0f7fa; --gx-ai-ink: #00838f; --gx-kpi-on: #fafcff;
  --gx-track: #f1f3f4; --gx-bar-hi: #669df6; --gx-bar-mid: #aecbfa; --gx-bar-lo: #d2e3fc;
  --gx-font: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  --gx-r: 6px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --gx-bg: #202124; --gx-card: #292a2d; --gx-ink: #e8eaed; --gx-ink-2: #bdc1c6; --gx-ink-3: #9aa0a6;
  --gx-line: #3c4043; --gx-line-2: #35363a; --gx-hover: rgba(232, 234, 237, .06);
  --gx-blue: #8ab4f8; --gx-blue-soft: #394457; --gx-on-blue: #202124; --gx-chart: #8ab4f8;
  --gx-green: #81c995; --gx-red: #f28b82; --gx-amber: #fdd663; --gx-amber-soft: #3b3320; --gx-amber-ink: #fdd663;
  --gx-ok-bg: #1e3a2b; --gx-ok-ink: #81c995; --gx-ok-line: #2d5a40;
  --gx-bad-bg: #3c2321; --gx-bad-ink: #f28b82; --gx-bad-line: #5c3330;
  --gx-ai-bg: #1d3a3f; --gx-ai-ink: #78d9ec; --gx-kpi-on: rgba(138, 180, 248, .08);
  --gx-track: #35363a; --gx-bar-hi: #3a68ad; --gx-bar-mid: #2f4f7f; --gx-bar-lo: #2b3a52;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--gx-bg); color: var(--gx-ink); font: 13px/1.35 var(--gx-font); }
a { color: var(--gx-blue); text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, .in:focus-visible { outline: 2px solid var(--gx-blue); outline-offset: 2px; }
[hidden] { display: none !important; }

/* top bar, navigation */
.gx-top { height: 56px; background: var(--gx-card); border-bottom: 1px solid var(--gx-line); display: flex; align-items: center; gap: 14px; padding: 0 16px 0 20px; position: sticky; top: 0; z-index: 5; }
.gx-brand { font-size: 18px; color: var(--gx-ink-2); white-space: nowrap; } .gx-brand b { color: var(--gx-ink); font-weight: 500; }
.gx-prop { display: flex; gap: 4px; margin-left: 8px; min-width: 0; overflow-x: auto; }
.gx-prop a { color: var(--gx-ink-2); padding: 7px 14px; border-radius: var(--gx-r); display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.gx-prop a:hover { background: var(--gx-hover); } .gx-prop a.on { background: var(--gx-blue-soft); color: var(--gx-blue); font-weight: 500; }
.gx-prop i { width: 8px; height: 8px; border-radius: 50%; background: var(--d, var(--gx-blue)); }
.gx-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.gx-logo { width: 28px; height: 28px; border-radius: var(--gx-r); display: grid; place-items: center; flex: none; } .gx-logo svg { width: 28px; height: 28px; display: block; }
:root[data-theme="dark"] .gx-logo { background: #e8eaed; padding: 2px; } :root[data-theme="dark"] .gx-logo svg { width: 24px; height: 24px; }
.gx-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.gx-logout { margin: 0; } .gx-link { background: none; border: 0; color: var(--gx-blue); font: inherit; cursor: pointer; padding: 0; white-space: nowrap; }
.gx-theme { width: 34px; height: 34px; border: 1px solid var(--gx-line); border-radius: var(--gx-r); background: var(--gx-card); color: var(--gx-ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.gx-theme:hover { background: var(--gx-hover); }
.gx-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gx-theme .moon { display: none; } :root[data-theme="dark"] .gx-theme .sun { display: none; } :root[data-theme="dark"] .gx-theme .moon { display: block; }
.gx-demo { margin: 0; border-radius: 0; text-align: center; }
/* App shell (wide layouts): the top bar and the menu stay in place, only the main frame scrolls. Narrow layouts scroll the page as usual. */
.gx-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.gx-nav { background: var(--gx-card); border-right: 1px solid var(--gx-line); padding: 10px 8px; }
.gx-nav h6 { margin: 8px 12px 6px; font-size: 12px; font-weight: 500; color: var(--gx-ink-3); letter-spacing: .02em; }
.gx-nav h6 ~ h6 { margin-top: 20px; }
.gx-nav a { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px; font-size: 13px; border-radius: var(--gx-r); color: var(--gx-ink-2); white-space: nowrap; }
.gx-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gx-nav a:hover { background: var(--gx-hover); } .gx-nav a.on { background: var(--gx-blue-soft); color: var(--gx-blue); font-weight: 500; }
.gx-main { padding: 12px 16px 28px; min-width: 0; container: gxmain / inline-size; }

/* page head, chips (square, never round) */
.gx-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gx-head h1 { font-size: 18px; font-weight: 400; margin: 0; } .gx-head .sp { flex: 1; }
.gx-zeit { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; } .gx-datum { display: inline-flex; gap: 4px; }
.gx-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid var(--gx-line); border-radius: var(--gx-r); background: var(--gx-card); color: var(--gx-ink); font-size: 13px; white-space: nowrap; }
a.gx-chip:hover { background: var(--gx-hover); } .gx-chip.on { background: var(--gx-blue-soft); border-color: transparent; color: var(--gx-blue); }
.gx-chip.pfeil { padding: 0 11px; } .gx-chip.aus { opacity: .4; }
.gx-flash { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--gx-r); background: var(--gx-ok-bg); color: var(--gx-ok-ink); border: 1px solid var(--gx-ok-line); }
.gx-flash.err { background: var(--gx-bad-bg); color: var(--gx-bad-ink); border-color: var(--gx-bad-line); }

/* cards */
.gx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }   /* 3 Boxen je Reihe (je 4 von 12); 2 / 1 weiter unten */
.gx-card { background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: 8px; min-width: 0; display: flex; flex-direction: column; }
.gx-card.s12 { grid-column: 1 / -1; } .gx-card.s8, .gx-card.s6, .gx-card.s4 { grid-column: span 4; }
/* Uebersicht, oberste Reihe: Chart links breit (6), Trichter und erster Kanal-Block schmal (je 3) */
.gx-card.s8:has(+ .gx-card.s4 + .gx-card.s6) { grid-column: span 6; } .gx-card.s8 + .gx-card.s4 + .gx-card.s6 { grid-column: span 3; } .gx-card.s8:has(+ .gx-card.s4 + .gx-card.s6) + .gx-card.s4 { grid-column: span 3; }
.gx-card > h3 { margin: 0; padding: 10px 14px 0; font-size: 13px; font-weight: 500; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gx-card > h3 small { font-weight: 400; color: var(--gx-ink-3); font-size: 12px; }
.gx-body { padding: 6px 14px 4px; flex: 1; min-width: 0; }
.gx-foot { border-top: 1px solid var(--gx-line-2); padding: 6px 14px; font-size: 12px; display: flex; justify-content: space-between; color: var(--gx-ink-3); }
.gx-leer { color: var(--gx-ink-3); margin: 8px 0 12px; }
.gx-mehr summary { cursor: pointer; font-size: 13px; color: var(--gx-blue); padding: 10px 0 6px; }

/* highlights (collapsed on every load; app.js opens them) */
.gx-hlh { cursor: pointer; align-items: center !important; padding-bottom: 14px !important; }
#lax-hl.open .gx-hlh { padding-bottom: 0 !important; }
.gx-chev { flex: none; width: 32px; height: 32px; border-radius: var(--gx-r); border: 0; background: none; color: var(--gx-ink-2); font-size: 18px; line-height: 1; cursor: pointer; transition: transform .15s; }
.gx-chev:hover { background: var(--gx-hover); } #lax-hl.open .gx-chev { transform: rotate(180deg); }
.gx-hl { list-style: none; margin: 0; padding: 4px 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.gx-hl li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--gx-line-2); align-items: flex-start; }
.gx-hl li:nth-last-child(-n+3) { border-bottom: 0; }
.gx-hl .ic { flex: none; width: 28px; height: 28px; border-radius: var(--gx-r); display: grid; place-items: center; font-size: 13px; background: var(--gx-blue-soft); color: var(--gx-blue); }
.gx-hl .ic.up { background: var(--gx-ok-bg); color: var(--gx-green); } .gx-hl .ic.down, .gx-hl .ic.dn { background: var(--gx-bad-bg); color: var(--gx-red); } .gx-hl .ic.ai { background: var(--gx-ai-bg); color: var(--gx-ai-ink); }
.gx-hl p { margin: 0; font-size: 12px; color: var(--gx-ink-2); line-height: 1.45; } .gx-hl p b { color: var(--gx-ink); font-weight: 500; }

/* KPI tiles and chart */
.gx-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--gx-line); }
.gx-kpi { padding: 8px 14px 7px; border-bottom: 3px solid transparent; margin-bottom: -1px; color: inherit; display: block; }
a.gx-kpi:hover { background: var(--gx-hover); } .gx-kpi.on { border-bottom-color: var(--gx-blue); background: var(--gx-kpi-on); }
.gx-kpi .l { font-size: 12px; color: var(--gx-ink-2); display: flex; align-items: center; gap: 6px; } .gx-kpi .l i { width: 8px; height: 8px; border-radius: 50%; background: var(--gx-blue); }
.gx-kpi .v { font-size: 22px; font-weight: 400; letter-spacing: -.01em; margin-top: 0; font-variant-numeric: tabular-nums; }
.gx-d { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-d.up { color: var(--gx-green); } .gx-d.down { color: var(--gx-red); } .gx-d.flat, .gx-d.new { color: var(--gx-ink-3); }
.gx-d.up::before, .gx-d.down::before { content: ""; display: inline-block; border: 4px solid transparent; margin-right: 3px; vertical-align: middle; }
.gx-d.up::before { border-bottom: 6px solid var(--gx-green); border-top: 0; margin-bottom: 2px; }
.gx-d.down::before { border-top: 6px solid var(--gx-red); border-bottom: 0; margin-top: 2px; }
.gx-chart { position: relative; padding: 12px 12px 4px 4px; }
.gx-svg { width: 100%; height: 190px; display: block; overflow: visible; } .gx-svg text { font-size: 11px; fill: var(--gx-ink-3); }
.gx-tip { position: absolute; pointer-events: none; background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: 8px; box-shadow: 0 2px 8px rgba(60, 64, 67, .28); padding: 10px 14px; font-size: 12px; min-width: 160px; opacity: 0; transition: opacity .1s; }
.gx-tip b { display: block; margin-bottom: 6px; font-weight: 500; } .gx-tip div { display: flex; justify-content: space-between; gap: 18px; color: var(--gx-ink-2); } .gx-tip div span:last-child { color: var(--gx-ink); font-weight: 500; }
.gx-legend { display: flex; gap: 14px; padding: 0 14px 8px; font-size: 12px; color: var(--gx-ink-2); flex-wrap: wrap; }
.gx-legend i { display: inline-block; width: 18px; border-top: 2px solid var(--gx-blue); margin-right: 6px; vertical-align: middle; } .gx-legend i.v { border-top: 2px dashed var(--gx-ink-3); }
.gx-legend i.m { width: 0; height: 10px; border-top: 0; border-left: 2px solid var(--gx-amber); }

/* tables */
.gx-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.gx-t th { text-align: left; font-weight: 500; font-size: 11px; color: var(--gx-ink-2); padding: 4px 0; border-bottom: 1px solid var(--gx-line); white-space: nowrap; }
.gx-t td { padding: 0; height: 28px; border-bottom: 1px solid var(--gx-line-2); vertical-align: middle; }
.gx-t tr:last-child td { border-bottom: 0; } .gx-t tbody tr:hover td { background: var(--gx-hover); }
.gx-t :is(th, td).r { text-align: right; padding-left: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-t td:first-child { max-width: 0; width: 100%; }
.gx-nm { display: flex; align-items: center; gap: 10px; min-width: 0; } .gx-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gx-nm i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.gx-t td.bar, .gx-t th.bar { display: none; }                 /* narrow: plain table, no bars */
.gx-spark { width: 84px; height: 24px; display: block; margin-left: auto; } .gx-spark path { fill: none; stroke: var(--gx-blue); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* bars, style B: bar behind the whole row, text inside; hi/mid/lo by length; text never changes colour */
@container gxmain (min-width: 601px) {
  .gx-t.mit-balken tbody tr { position: relative; }
  .gx-t.mit-balken td { border-bottom: 0; position: relative; z-index: 2; }
  .gx-t.mit-balken tbody tr:hover td { background: none; }
  .gx-t.mit-balken :is(th, td):first-child { padding-left: 12px; width: 100%; }
  .gx-t.mit-balken :is(th, td):last-child { padding-right: 12px; }
  .gx-t.mit-balken td.bar { display: table-cell; position: static; z-index: auto; width: 0; padding: 0; }
  .gx-t.mit-balken th.bar { display: table-cell; width: 0; padding: 0; }
  .gx-t.mit-balken td.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; bottom: 1px; background: var(--gx-track); border-radius: 4px; z-index: 0; }
  .gx-t.mit-balken td.bar i { display: block; position: absolute; left: 0; top: 1px; bottom: 1px; width: calc(var(--w) * 1%); min-width: 4px; border-radius: 4px; z-index: 1; background: var(--gx-bar-lo); }
  .gx-t.mit-balken td.bar.mid i { background: var(--gx-bar-mid); } .gx-t.mit-balken td.bar.hi i { background: var(--gx-bar-hi); }
  /* All text keeps the normal ink (readable on bar and track in both themes); change arrows inherit it. */
  .gx-t.mit-balken .gx-d { color: inherit; }
  .gx-t.mit-balken .gx-d::before { border-bottom-color: currentColor; border-top-color: currentColor; }
}

/* ring, funnel */
.gx-ring { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: center; }
.gx-ring .dn { position: relative; } .gx-ringsvg { width: 100%; display: block; transform: rotate(-90deg); }
.gx-ring .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .gx-ring .mid b { font-size: 26px; font-weight: 400; } .gx-ring .mid span { font-size: 11px; color: var(--gx-ink-3); }
.gx-fun { display: grid; gap: 4px; padding-top: 6px; } .gx-fun .t { display: flex; justify-content: space-between; font-size: 12px; color: var(--gx-ink-2); margin-bottom: 3px; } .gx-fun .t b { color: var(--gx-ink); font-weight: 500; }
.gx-fun .b { height: 34px; background: var(--gx-blue-soft); border-radius: 4px; overflow: hidden; } .gx-fun .b i { display: block; height: 100%; background: var(--gx-chart); border-radius: 4px; }
.gx-fun .gap { font-size: 11px; color: var(--gx-red); padding-left: 2px; }

/* forms, setup */
.in { height: 36px; border: 1px solid var(--gx-line); border-radius: var(--gx-r); padding: 0 12px; font: inherit; width: 100%; background: var(--gx-card); color: var(--gx-ink); }
.in.mono, .code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.code { display: block; background: var(--gx-hover); border: 1px solid var(--gx-line); border-radius: var(--gx-r); padding: 12px 14px; overflow: auto; white-space: pre-wrap; word-break: break-all; color: var(--gx-ink-2); }
.code.inline { display: inline; padding: 1px 6px; border-radius: 4px; }
.lax-btn, .btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: var(--gx-r); border: 1px solid var(--gx-line); background: var(--gx-card); color: var(--gx-blue); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.lax-btn.p, .btn.p { background: var(--gx-blue); border-color: var(--gx-blue); color: var(--gx-on-blue); } .btn.d { color: var(--gx-red); }
.stp { max-width: 980px; display: grid; gap: 16px; } .stp .gx-body { padding: 14px 20px 18px; } .stp p { margin: 0 0 10px; color: var(--gx-ink-2); font-size: 13px; line-height: 1.5; }
.row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--gx-line-2); font-size: 13px; } .row:last-child { border-bottom: 0; } .row > label { color: var(--gx-ink-2); }
/* status label (square, not a pill) */
.pill2 { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 4px; background: var(--gx-ok-bg); color: var(--gx-ok-ink); } .pill2.w { background: var(--gx-amber-soft); color: var(--gx-amber-ink); } .pill2.n { background: var(--gx-hover); color: var(--gx-ink-2); }
.pill2 i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.steps { counter-reset: st; list-style: none; padding: 0; margin: 0 0 6px; } .steps li { counter-increment: st; display: flex; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--gx-ink-2); }
.steps li::before { content: counter(st); flex: none; width: 22px; height: 22px; border-radius: 4px; background: var(--gx-blue-soft); color: var(--gx-blue); display: grid; place-items: center; font-size: 12px; font-weight: 500; }
.meter { height: 8px; background: var(--gx-blue-soft); border-radius: 4px; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--gx-chart); }
.lock-note { font-size: 12px; color: var(--gx-ink-3); margin: 6px 0 0; }

/* login */
.lax-login { display: grid; place-items: center; min-height: 100vh; }
.lax-login-box { width: min(380px, 92vw); background: var(--gx-card); border: 1px solid var(--gx-line); border-radius: 8px; padding: 24px; }
.lax-login-box h1 { font-size: 22px; font-weight: 400; margin: 0 0 16px; } .lax-login-box label { display: block; font-size: 13px; color: var(--gx-ink-2); margin: 12px 0 4px; } .lax-login-box input { width: 100%; height: 38px; border: 1px solid var(--gx-line); border-radius: var(--gx-r); padding: 0 12px; font: inherit; background: var(--gx-card); color: var(--gx-ink); }
.lax-login-box .lax-btn { margin-top: 16px; width: 100%; justify-content: center; height: 38px; }
.lax-err { background: var(--gx-bad-bg); color: var(--gx-bad-ink); border: 1px solid var(--gx-bad-line); border-radius: var(--gx-r); padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }

/* paths through the site (flow graphic, built on the server) */
.gx-sk { display: block; width: 100%; height: auto; font-size: 11px; margin-top: 4px; }
.gx-sk text { fill: var(--gx-ink-2); font-variant-numeric: tabular-nums; } .gx-sk text .n { fill: var(--gx-ink-3); }
.gx-sk .sk-n { fill: var(--gx-chart); } .gx-sk .sk-l { fill: var(--gx-chart); fill-opacity: .18; transition: fill-opacity .12s; } .gx-sk .sk-l:hover { fill-opacity: .4; }
.gx-sk-liste { display: none; }
.gx-weiter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 24px; margin-top: 6px; }
.gx-weiter .kopf { display: flex; justify-content: space-between; gap: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 500; color: var(--gx-ink); }
.gx-weiter .kopf small { font-family: var(--gx-font); font-weight: 400; color: var(--gx-ink-3); }
.gx-unter { margin: 14px 0 0; font-size: 12px; font-weight: 500; color: var(--gx-ink-2); }
.gx-scroll { overflow-x: auto; }

@media (max-width: 1180px) { .gx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gx-card.s8, .gx-card.s6, .gx-card.s4, .gx-card.s8 + .gx-card.s4 + .gx-card.s6, .gx-card.s8:has(+ .gx-card.s4 + .gx-card.s6) + .gx-card.s4 { grid-column: span 1; } .gx-card.s8:has(+ .gx-card.s4 + .gx-card.s6) { grid-column: 1 / -1; } .gx-hl { grid-template-columns: 1fr; } .gx-hl li:nth-last-child(-n+3) { border-bottom: 1px solid var(--gx-line-2); } .gx-hl li:last-child { border-bottom: 0; } }
@media (max-width: 1000px) { .gx-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .gx-nav { display: flex; position: relative; align-items: center; align-self: start; overflow-x: auto; overflow-y: hidden; padding: 8px; border-right: 0; border-bottom: 1px solid var(--gx-line); } .gx-nav h6 { display: none; } .gx-nav a { flex: none; } }
@media (min-width: 1001px) {
  html, body { height: 100%; overflow: hidden; }
  body { display: flex; flex-direction: column; }
  .gx-top { position: relative; flex: none; }
  .gx-demo { flex: none; }
  .gx-shell { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .gx-nav { overflow-y: auto; min-height: 0; }
  .gx-main { overflow-y: auto; min-height: 0; height: 100%; outline: none; }
}
@media (max-width: 700px) { .gx-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .gx-main { padding: 16px; } .gx-kpi { padding: 12px 12px 10px; } .gx-kpi .v { font-size: 22px; } .gx-ring { grid-template-columns: 1fr; } .row { grid-template-columns: 1fr; }
  .gx-top { gap: 10px; padding: 0 12px; } .gx-brand { display: none; } .gx-prop a { padding: 7px 10px; font-size: 13px; gap: 6px; } .gx-prop { margin-left: 0; flex: 1 1 0; scrollbar-width: none; } .gx-tools { gap: 10px; }
  .gx-ring .dn { max-width: 190px; width: 100%; margin: 0 auto; }
  .gx-body, .gx-card > h3 { padding-left: 14px; padding-right: 14px; } .gx-foot { padding-left: 14px; padding-right: 14px; }
  .gx-sk { display: none; } .gx-sk-liste { display: block; } .gx-sk-detail { display: none; }
  .gx-head .sp { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gx-chev, .gx-tip { transition: none; } }.gx-t td.ch { padding-left: 12px; color: var(--gx-ink-2); white-space: nowrap; }