.pchip.bad { color: var(--bad); font-weight: 600; }
.cards-view .pchip.bad { background: var(--badbg); }
.ga4-checks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.ga4-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14px; align-items: baseline; }
.ga4-checks li small { display: block; color: var(--muted); font-size: 13px; }
.ga4-checks li.ok .m { color: var(--good); font-weight: 700; } .ga4-checks li.bad .m { color: var(--bad); font-weight: 700; }

:root {
  color-scheme: light;
  --bg: #001a33;
  --canvas-bg:
    radial-gradient(ellipse at 95% 4%, #234d74 0%, rgba(35, 77, 116, 0) 60%),
    radial-gradient(ellipse at 2% 95%, #0a304c 0%, rgba(10, 48, 76, 0) 55%),
    linear-gradient(125deg, #071829 8%, #001a33 100%);
  --canvas-ink: #f7faff;
  --canvas-sub: #dbe7f2;
  --canvas-muted: #c5d8e9;
  --canvas-line: rgba(219, 231, 242, .24);
  --chrome: rgba(255, 255, 255, .96);
  --surface: #f0f1f4;
  --card: #ffffff;
  --ink: #17191d;
  --ink2: #353c45;
  --muted: #505964;
  --grid: #edf0ef;
  --axis: #d6dcdf;
  --line: #dcdfe4;
  --soft: #eceff3;
  --soft2: #e0e6ed;
  --accent: #1a5276;
  --accent-hover: #143a59;
  --accent-soft: #edf2f7;
  --btn: #001a33;
  --btnink: #ffffff;
  --s1: #457bb4;
  --s2: #a9854e;
  --good: #176043;
  --goodbg: #edf5ef;
  --bad: #a1322b;
  --badbg: #faf0ed;
  --warn: #765019;
  --warnbg: #faf5e9;
  --connect: #d9742a;
  --connect-bg: #fdf1e6;
  --connect-ink: #8a4410;
  --connect-line: #f0c9a3;
  --meta: #617d9d;
  --google: #568b69;
  --ga4: #b18a46;
  --tiktok: #916b78;
  --note: #faf6eb;
  --good-strong: #0A8A3A;
  --good-strong-bg: #C6F2D3;
  --shadow: 0 8px 28px rgba(0, 12, 27, .15);
  --radius: 18px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111922;
  --canvas-bg:
    radial-gradient(ellipse at 95% 4%, #203850 0%, rgba(32, 56, 80, 0) 57%),
    radial-gradient(ellipse at 2% 95%, #172b3a 0%, rgba(23, 43, 58, 0) 53%),
    linear-gradient(125deg, #111922 8%, #142131 100%);
  --chrome: rgba(27, 37, 48, .94);
  --surface: #18212b;
  --card: #1b2530;
  --ink: #f5f5f7;
  --ink2: #d3dce5;
  --muted: #b4c2d0;
  --grid: #2b3744;
  --axis: #3e4e60;
  --line: #303e4d;
  --soft: #273544;
  --soft2: #34475b;
  --accent: #8db4dc;
  --accent-hover: #a8c8e8;
  --accent-soft: #273d53;
  --btn: #8db4dc;
  --btnink: #102238;
  --s1: #86afd7;
  --s2: #c2a471;
  --good: #96c5a8;
  --goodbg: #2b3e31;
  --bad: #d6a097;
  --badbg: #44302c;
  --warn: #d4b979;
  --warnbg: #403927;
  --connect: #f0a14e;
  --connect-bg: #4a3320;
  --connect-ink: #ffd3a3;
  --connect-line: #7a5230;
  --meta: #8aa6c2;
  --google: #8eb59a;
  --ga4: #c9ad72;
  --tiktok: #b697a1;
  --note: #393525;
  --good-strong: #9ad4ae;
  --good-strong-bg: #27423a;
  --shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background-color: var(--bg); background-image: var(--canvas-bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 3px; }
button, .btn, a, input, select, textarea { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, .btn:disabled { cursor: not-allowed; opacity: .5; }
button:not(:disabled):active, .btn:active { transform: translateY(1px); }
svg.icon { display: block; width: 18px; height: 18px; flex: none; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { letter-spacing: -.025em; }
h2 { font-size: 30px; font-weight: 650; }
b, strong, .b { font-weight: 600; }
.sub, .muted { color: var(--ink2); font-size: 16px; }
p.sub, p.muted { line-height: 1.7; }
.lbl { display: block; font-size: 15px; font-weight: 500; color: var(--ink2); margin-bottom: 5px; }
.skip-link { position: fixed; z-index: 40; top: 12px; left: 12px; transform: translateY(-180%); background: var(--card); color: var(--accent); border: 1px solid var(--accent); padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip-link:focus { transform: none; }
/* Top navigation: all destinations stay visible, including on small screens. */
.app-top { position: sticky; top: 0; z-index: 25; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
/* Opaque data surfaces preserve text contrast over the soft ambient canvas. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-top { background: var(--chrome); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
}
.topbar { max-width: 1760px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 15px 28px; }
.workspace-clientbar { max-width:1760px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding:14px 28px 18px; border-top:1px solid var(--line); }
.client-switcher { display:flex; align-items:center; gap:14px; flex:1 1 320px; max-width:650px; min-width:0; margin:0; }
.client-switcher-icon { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex:none; border-radius:13px; color:var(--accent); background:var(--accent-soft); }
.client-switcher-icon .icon { width:24px; height:24px; }
.client-switcher label { display:block; flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--ink2); }
.client-switcher select { display:block; width:100%; min-width:0; max-width:100%; margin-top:5px; font-size:19px; font-weight:600; color:var(--ink); padding:10px 38px 10px 13px; }
.workspace-platforms { color:var(--ink2); font-size:16px; font-weight:550; }
.workspace-platforms > span { color:var(--accent); margin:0 9px; }
@media(max-width:580px) { .workspace-clientbar { padding:12px 14px 16px; gap:10px; } .client-switcher { gap:10px; flex-basis:100%; } .client-switcher select { font-size:18px; } .workspace-platforms { font-size:14px; padding-left:56px; } .workspace-platforms > span { margin:0 4px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: var(--ink); font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.brand-logo { display: block; width: 42px; height: 54px; object-fit: contain; flex: none; }
.brand small { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink2); margin-top: 5px; }
.primary-nav { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; }
.primary-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 8px; min-height: 44px; border-radius: 0; text-decoration: none; color: var(--ink); font-size: 16px; font-weight: 550; white-space: nowrap; position: relative; }
.primary-nav a:hover { color: var(--accent); background: var(--surface); }
.primary-nav a.on { color: var(--accent); background: transparent; font-weight: 600; }
.primary-nav a.on::after { content: ""; position: absolute; bottom: 0; left: 8px; right: 8px; height: 2px; background: currentColor; }
.primary-nav a.on .pill { background: var(--card); color: var(--bad); }
.primary-nav .icon { display: none; }
.nav-more { position: relative; }
.nav-more summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 11px 8px; min-height: 44px; font-size: 16px; font-weight: 550; color: var(--ink); cursor: pointer; white-space: nowrap; user-select: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: ""; width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .16s ease; }
.nav-more[open] summary::after { transform: translateY(1px) rotate(225deg); }
.nav-more summary:hover { color: var(--accent); background: var(--surface); }
.nav-more summary.on { color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; }
.nav-more-list { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 230px; padding: 6px; display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.nav-more-list a { justify-content: flex-start; border-radius: 8px; }
.nav-more-list a.on::after { display: none; }
.nav-more-list a.on { background: var(--accent-soft); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; cursor: pointer; }
.data-note { font-size: 13px; }
.page-note { margin: -12px 2px 14px; color: var(--canvas-sub); }
.data-note a { color: inherit; }
.pill { display: inline-flex; justify-content: center; align-items: center; min-width: 22px; height: 22px; padding: 0 5px; background: var(--badbg); color: var(--bad); border-radius: 5px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.theme { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink2); background: var(--card); }
.theme:hover { background: var(--soft); color: var(--ink); }
.theme svg { width: 20px; height: 20px; }
.app-main { min-height: calc(100dvh - 81px); display: flex; flex-direction: column; }
.contextbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: -3px 0 24px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink2); min-width: 0; }
.breadcrumb strong { color: var(--ink); font-weight: 500; }
.account-control { min-width: 0; max-width: 100%; }
.account-control select { max-width: 360px; min-width: 0; width: 100%; font-size: 15px; }
.wrap { width: 100%; max-width: 1760px; margin: 0 auto; padding: 38px 40px 40px; }
.app-main .wrap { flex: 1; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; padding: 17px 36px; border-top: 1px solid var(--line); margin-top: 20px; }
.foot a { color: var(--ink2); }
/* Page titles and controls */
.hero { margin: 4px 0 30px; }
.hero h1 { font-size: 44px; line-height: 1.12; font-weight: 650; letter-spacing: -.04em; margin: 6px 0 8px; }
.hero .sub { font-size: 18px; max-width: 62ch; margin: 0; line-height: 1.6; }
.eyebrow { color: var(--accent); font-size: 14px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.crumb { font-size: 14px; color: var(--ink2); margin-bottom: 8px; }
.crumb a { text-decoration: none; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; border: 1px solid var(--btn); border-radius: 24px; padding: 10px 19px; color: var(--btnink); background: var(--btn); text-decoration: none; font-size: 16px; line-height: 1.3; font-weight: 550; cursor: pointer; white-space: nowrap; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--axis); }
.btn.ghost:hover { color: var(--ink); background: var(--surface); border-color: var(--muted); }
.btn.grey { background: var(--soft2); color: var(--ink2); border-color: var(--axis); }
.badge { display: inline-block; font-size: 13px; color: var(--warn); background: var(--warnbg); border-radius: 4px; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row label, .filt-more label, .rng-field label { display: flex; flex-direction: column; font-size: 14px; color: var(--ink2); gap: 6px; }
input, select { min-width: 120px; min-height: 35px; max-width: 100%; border: 1px solid var(--axis); border-radius: 7px; padding: 7px 10px; background: var(--card); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { min-width: 0; min-height: 0; accent-color: var(--accent); }
input[type=file] { padding: 5px 7px; font-size: 14px; }
input::file-selector-button { border: 0; background: var(--soft); color: var(--ink2); padding: 5px 7px; border-radius: 4px; margin-right: 7px; }
textarea { width: 100%; min-height: 180px; padding: 12px; font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--axis); border-radius: 7px; background: var(--card); color: var(--ink); }
.tabs { display: flex; gap: 17px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 10px 1px 12px; border-bottom: 2px solid transparent; color: var(--ink2); text-decoration: none; font-size: 15px; }
.tabs a .dot { width: 6px; height: 6px; border-radius: 50%; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 6px; margin: 0 6px 6px 0; font-size: 15px; text-decoration: none; background: var(--card); }
.chip:hover { background: var(--surface); }
.chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
/* Shared cards, data and status */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 18px 0; box-shadow: var(--shadow); min-width: 0; }
.card.soft { padding: 22px 24px; }
.card h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.015em; }
.card .desc { color: var(--ink2); font-size: 14px; margin-bottom: 16px; line-height: 1.6; }
.card > .b { font-size: 17px; margin-bottom: 12px; }
.card p.muted { max-width: 90ch; }
.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15px; }
th, td { padding: 12px 10px; text-align: right; vertical-align: top; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th { color: var(--ink2); background: var(--surface); font-weight: 600; font-size: 14px; }
td { font-variant-numeric: tabular-nums; }
td.l, th.l { text-align: left; white-space: normal; }
tbody tr:hover td { background: var(--surface); }
tr:last-child td { border-bottom: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; margin-top: 4px; }
.kpi { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 11px; background: var(--card); min-width: 0; }
.kpi .k { font-size: 15px; color: var(--ink2); font-weight: 500; }
.kpi .v { font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kpi .d, .dl { font-size: 13px; color: var(--ink2); line-height: 1.5; margin-top: 3px; }
.kpi .d { display: flex; align-items: center; gap: 4px; }
.up-good, .down-good, .kpi .d.up-good, .kpi .d.down-good, .dl.up-good, .dl.down-good { color: var(--good); }
.up-bad, .down-bad, .kpi .d.up-bad, .kpi .d.down-bad, .dl.up-bad, .dl.down-bad { color: var(--bad); }
.kpi svg { width: 100%; height: 28px; margin-top: 8px; opacity: .8; }
.bigrow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.big { padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.big b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -.04em; line-height: 1.3; font-variant-numeric: tabular-nums; margin: 6px 0; }
.sig { border: 1px solid var(--line); border-left: 3px solid var(--axis); border-radius: 7px; padding: 14px 15px; margin: 10px 0; background: var(--card); }
.sig.olvasott { background: var(--surface); }
.sig.piros { border-left-color: var(--bad); }
.sig.sarga { border-left-color: var(--warn); }
.sig.zold { border-left-color: var(--good); }
.sigd { font-size: 13px; color: var(--ink2); white-space: nowrap; text-align: right; }
.sigd b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.note { background: var(--note); border-radius: 6px; padding: 10px 12px; }
code { background: var(--soft); padding: 2px 5px; border-radius: 4px; font-size: 14px; overflow-wrap: anywhere; }
.copy { cursor: pointer; color: var(--accent); font-size: 13px; text-decoration: underline; }
.roas { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 5px; font-weight: 600; font-size: 14px; }
.roas.good { color: var(--good); background: var(--goodbg); }
.roas.bad { color: var(--bad); background: var(--badbg); }
.roas.none { color: var(--ink2); }
.type { display: inline-block; font-size: 13px; padding: 2px 5px; border-radius: 4px; background: var(--soft); color: var(--ink2); margin-right: 6px; font-weight: 500; }
.strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.strip .st { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); font-size: 14px; }
.strip .st b { font-size: 20px; font-weight: 600; }
.strip svg { width: 16px; height: 16px; }
/* Period selection */
.filt { padding: 20px 24px; box-shadow: none; margin: 24px 0; }
.filt-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.segs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--soft); border-radius: 12px; }
.seg { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--ink2); background: transparent; text-decoration: none; font-size: 16px; font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.seg:hover { background: var(--soft2); }
.seg.on { color: var(--ink); background: var(--card); border-color: var(--line); box-shadow: 0 1px 2px rgba(19, 40, 60, .04); font-weight: 600; }
.range-now { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.6; }
.range-now .sub { font-size: 14px; }
.range-now b { font-size: 18px; font-weight: 600; }
.rng { display: none; margin-top: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.rng.open { display: block; }
.rng-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rng-field input { min-width: 160px; }
.arrow { margin-top: 18px; color: var(--muted); }
.rng-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.qks { display: flex; flex-wrap: wrap; gap: 6px; }
.qk { padding: 5px 9px; font-size: 13px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); text-decoration: none; }
.qk:hover { color: var(--accent); border-color: var(--accent); }
.filt-more { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--grid); }
.filt-more input, .filt-more select { padding: 7px 10px; }
/* Charts and account panels */
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart svg text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.legend { display: flex; gap: 17px; font-size: 14px; color: var(--ink2); margin: 4px 0 12px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.legend i.ln { height: 2px; vertical-align: 3px; }
.tip { position: absolute; pointer-events: none; z-index: 5; display: none; min-width: 170px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: 0 6px 20px rgba(19, 40, 60, .1); font-size: 14px; }
.tip b { display: block; margin-bottom: 6px; }
.tip div { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
.tip span.k { color: var(--ink2); }
details.tv { overflow-x: auto; }
details.tv summary { cursor: pointer; color: var(--ink2); font-size: 14px; margin-top: 12px; }
.hbar { display: grid; grid-template-columns: 150px 1fr 100px 50px 115px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--grid); font-size: 15px; }
.hbar > * { min-width: 0; }
.hbar .track { height: 9px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--s1); border-radius: 3px; }
.hbar .num { text-align: right; font-variant-numeric: tabular-nums; }
.share { height: 3px; min-width: 60px; margin-top: 7px; border-radius: 2px; background: var(--soft); overflow: hidden; }
.share > span { display: block; height: 100%; background: var(--s1); border-radius: 2px; }
.pgrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 18px 0; }
.pgrid > .card { margin: 0; }
.ppanel { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 21px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ppanel.empty { justify-content: center; }
.ph { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; }
.ph i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; }
.ph .more { margin-left: auto; color: var(--ink2); font-size: 14px; font-weight: 500; text-decoration: none; }
.ph .more:hover { color: var(--accent); }
.pnums { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 20px; }
.pnums b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ppanel svg { width: 100%; height: 32px; }
.tlist { border-top: 1px solid var(--grid); padding-top: 12px; }
.trow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; }
.trow .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tv { color: var(--ink2); font-variant-numeric: tabular-nums; }
.sline { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--grid); font-size: 15px; }
.sline:last-child { border: 0; }
.si, .si svg { width: 17px; height: 17px; flex: none; }
/* Client directory */
.directory-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 6px 0 30px; }
.directory-hero h1 { font-size: clamp(36px, 3.4vw, 46px); margin: 9px 0 12px; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.directory-hero > .btn { flex: none; margin-top: 12px; }
.client-count { display: flex; flex-direction: column; align-items: flex-start; flex: none; padding: 18px 26px 16px; border-radius: 22px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--canvas-ink); min-width: 230px; }
.client-count b { font-size: 46px; line-height: 1; font-weight: 650; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.client-count > span { font-size: 13px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--canvas-sub); margin-top: 6px; }
.client-count small { font-size: 14px; color: var(--canvas-sub); margin-top: 7px; line-height: 1.4; }
.client-count small + small { margin-top: 3px; }
.client-count em { font-style: normal; font-weight: 650; color: #f3b572; }
.directory-hero .sub { max-width: 90ch; }
.portfolio-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 20px; box-shadow: var(--shadow); }
.portfolio-stat { display: flex; flex-direction: column; padding: 23px 28px; gap: 6px; min-width: 0; position: relative; }
.portfolio-stat + .portfolio-stat::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--line); }
.stat-label { font-size: 16px; color: var(--ink2); font-weight: 550; }
.portfolio-stat strong { display: block; font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1.35; font-variant-numeric: tabular-nums; }
.stat-detail { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 14px; font-weight: 450; }
.stat-unit { color: var(--ink2); font-size: 16px; font-weight: 500; letter-spacing: 0; margin-left: 8px; }
.stat-detail .icon { width: 11px; height: 11px; }
.client-directory { margin-top: 25px; }
.directory-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.filter-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.filter-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px; color: var(--ink2); background: transparent; font-size: 15px; font-weight: 500; white-space: nowrap; min-height: 33px; }
.filter-tab span { font-size: 13px; min-width: 16px; }
.filter-tab:hover { background: var(--soft); color: var(--ink); }
.filter-tab.on { color: var(--btnink); background: var(--btn); border-color: var(--btn); font-weight: 600; }
.filter-tab.on span { color: inherit; }
.client-search { display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 13px; color: var(--ink2); }
.client-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.client-search svg { width: 15px; height: 15px; flex: none; }
.client-search input { width: 100%; min-width: 0; border: 0; padding: 8px 0; background: transparent; font-size: 15px; min-height: 44px; outline: 0; box-shadow: none; }
.client-search input:focus { box-shadow: none; }
.directory-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; color: var(--ink2); font-size: 14px; min-height: 34px; }
#client-results { margin-right: auto; }
.sort-label { display: flex; align-items: center; gap: 6px; }
.sort-label select { min-width: 0; min-height: 29px; padding: 4px 21px 4px 7px; font-size: 14px; font-weight: 500; border-color: transparent; background-color: transparent; color: var(--ink); }
.sort-label select:hover { border-color: var(--line); }
.view-switch { display: flex; align-items: center; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.view-switch button { display: grid; place-items: center; width: 34px; height: 34px; padding: 5px; color: var(--muted); background: transparent; border: 0; border-radius: 4px; }
.view-switch button svg { width: 14px; height: 14px; }
.view-switch button.on { color: var(--accent); background: var(--accent-soft); }
.view-switch button:hover { color: var(--ink); background: var(--soft); }
.cgrid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
/* Csoportfejléc: webshopok, szolgáltatók, saját bolt. */
.cgroup { display: flex; align-items: center; gap: 10px; padding: 13px 22px 11px; font-size: 13px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); background: var(--soft); border-top: 1px solid var(--line); }
.cgroup:first-child { border-top: 0; }
.cgroup b { font-size: 12px; font-weight: 650; color: var(--ink2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; letter-spacing: 0; }
.cgroup + .ccard-slot { border-top: 0; }
.ccard-slot { min-width: 0; }
.ccard-slot + .ccard-slot { border-top: 1px solid var(--grid); }
.ccard { display: grid; grid-template-columns: minmax(230px,1fr) 560px auto; gap: 28px; align-items: center; min-height: 112px; padding: 22px 24px; background: var(--card); text-decoration: none; min-width: 0; }
/* Nem bekötött (kézi adatos) sor: narancs jelzés, a sor nem link, csak a Kösd be gomb. */
.ccard.manual { box-shadow: inset 5px 0 0 var(--connect); }
.connect-cta { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--connect-line); background: var(--connect-bg); color: var(--connect-ink); font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap; justify-self: end; transition: background-color .16s ease, transform .16s ease; }
.connect-cta svg { width: 14px; height: 14px; }
.connect-cta:hover { background: var(--connect); color: #fff; border-color: var(--connect); transform: translateX(2px); }
.ccard.manual > .connect-cta { grid-column: 3; grid-row: 1; }
.connect-status { color: var(--connect-ink) !important; font-weight: 550; }
.pchip.connect-chip { color: var(--muted); }
.filter-tab.connect-tab.on { background: var(--connect); border-color: var(--connect); color: #fff; }
.filter-tab.connect-tab:not(.on) span { color: var(--connect); font-weight: 650; }
a.ccard:hover { background: var(--accent-soft); }
a.ccard:focus-visible { outline-offset: -3px; }
.client-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.client-identity > div { min-width: 0; }
.client-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--soft); color: var(--accent); font-size: 14px; font-weight: 650; letter-spacing: -.03em; border: 1px solid var(--line); }
.client-logo { display: flex; align-items: center; justify-content: center; flex: none; width: 150px; height: 60px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,26,51,.06); }
.client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 640px) { .client-logo { width: 96px; height: 42px; } }
.ccard-slot:nth-child(3n+2) .client-avatar { background: var(--warnbg); color: var(--warn); }
.pchip.pending { color: var(--warn); line-height: 1.5; }
.ccard-slot:nth-child(3n+3) .client-avatar { background: var(--accent-soft); color: var(--accent); }
.cname { font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.client-status { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; }
.cplats { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; }
.pchip { display: inline-flex; align-items: center; gap: 4px; color: var(--ink2); font-size: 14px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pchip i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; }
.cnums { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; min-width: 0; }
.cnums .metric { text-align: right; min-width: 0; }
.cnums b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ccard .cnums .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.ccard .dl { font-size: 14px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roas-value { display: inline-flex !important; align-items: center; padding: 3px 6px; line-height: 1.25; border-radius: 4px; }
.roas-value.good { color: var(--good-strong); background: var(--good-strong-bg); }
.roas-value.bad { color: var(--bad); background: var(--badbg); }
.roas-value.warn { color: var(--warn); background: var(--warnbg); }
.ccard[data-state="warn"] .client-status { color: var(--warn); }
.roas-value.none { color: var(--muted); background: var(--soft); }
.client-open { display: grid; place-items: center; color: var(--muted); transition: color .16s ease, transform .16s ease; }
.client-open svg { width: 14px; height: 14px; }
a.ccard:hover .client-open { color: var(--accent); transform: translateX(2px); }
/* Generous client cards keep the same reading order as the reference. */
.ccard > .client-platforms { grid-column: 1; grid-row: 2; margin-top: -10px; }
.ccard > .client-open { grid-column: 3; grid-row: 1; }
.cgrid.cards-view { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.cards-view .ccard-slot { border: 0; }
.cards-view .cgroup { grid-column: 1/-1; background: transparent; border: 0; padding: 10px 4px 0; color: var(--canvas-sub); }
.cards-view .cgroup b { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: var(--canvas-ink); }
.cards-view .ccard.manual { box-shadow: inset 5px 0 0 var(--connect), 0 1px 2px rgba(0,26,51,.04); }
.cards-view .ccard.manual > .connect-cta { grid-column: 2; grid-row: 1; align-self: center; }
.cards-view .ccard { display: grid; grid-template-columns: minmax(0,1fr) 16px; grid-template-rows: minmax(34px,auto) auto 1fr; align-items: start; gap: 22px 10px; padding: 26px; min-height: 252px; height: 100%; border: 1px solid var(--line); border-radius: 22px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cards-view a.ccard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(19, 40, 60, .08); }
.cards-view .client-identity { grid-column: 1; grid-row: 1; align-self: center; }
.cards-view .client-avatar { display: none; }
.cards-view .cname { font-size: 23px; line-height: 1.35; }
.cards-view .cnums { width: 100%; grid-column: 1/-1; grid-row: 2; grid-template-columns: minmax(0,1fr) minmax(0,1.18fr) minmax(0,.72fr); gap: 14px; }
.cards-view .metric { text-align: left; }
.cards-view .cnums b { font-size: 24px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.cards-view .ccard .cnums .lbl { display: block; font-size: 15px; margin-bottom: 7px; }
.cards-view .ccard .dl { white-space: normal; overflow: visible; font-size: 14px; line-height: 1.5; }
.cards-view .client-status { font-size: 13px; line-height: 1.5; }
.cards-view .roas-value { padding: 2px 6px; }
.cards-view .client-open { grid-column: 2; grid-row: 1; align-self: center; margin-top: 3px; }
.cards-view .client-platforms { grid-column: 1/-1; grid-row: 3; align-self: end; gap: 8px; margin-top: 0; }
.cards-view .pchip { max-width: 100%; padding: 6px 11px; gap: 7px; border-radius: 999px; background: var(--soft); line-height: 1.4; overflow-wrap: anywhere; }
.cards-view .pchip i { width: 8px; height: 8px; flex: none; }
.cards-view .skel .cnums .skeleton-line { margin-left: 0; }
.ccard.skel { pointer-events: none; }
.skeleton-line { display: block; width: 70%; height: 8px; border-radius: 3px; background: var(--soft); animation: skeleton-pulse 1.8s ease-in-out infinite; }
.skeleton-line.short { width: 45%; }
.skel .cnums .skeleton-line { margin-left: auto; }
.skel .client-avatar { background: var(--soft); color: transparent; }
@keyframes skeleton-pulse { 50% { opacity: .45; } }
.empty-state { padding: 48px 24px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink2); }
.empty-state svg { width: 30px; height: 30px; color: var(--muted); margin-bottom: 8px; }
.empty-state h3 { font-size: 17px; color: var(--ink); font-weight: 600; margin: 6px 0; }
.empty-state p { font-size: 15px; max-width: 42ch; margin: 0 auto; }
.empty-state .btn { margin-top: 16px; }
.directory-note { display: flex; gap: 7px; align-items: flex-start; color: var(--muted); font-size: 13px; line-height: 1.7; margin: 16px 2px 0; }
.directory-note svg { flex: none; width: 13px; height: 13px; margin-top: 2px; }
details.inactive { margin: 12px 0 24px; }
details.inactive summary { padding: 7px 2px; cursor: pointer; color: var(--ink2); font-size: 15px; }
/* Creative gallery */
.viewtog { display: inline-flex; gap: 2px; padding: 3px; background: var(--soft); border-radius: 7px; }
.viewtog a { padding: 6px 10px; border-radius: 5px; text-decoration: none; color: var(--ink2); font-size: 14px; }
.viewtog a.on { background: var(--card); color: var(--ink); font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 14px; }
.gcard { display: flex; flex-direction: column; position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.gcard .img { aspect-ratio: 1/1; background: var(--soft); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.gcard .img img { width: 100%; height: 100%; object-fit: cover; }
.gcard .body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.gcard .nm { font-size: 15px; font-weight: 600; line-height: 1.4; max-height: 2.8em; overflow: hidden; }
.gcard .mt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; color: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.gcard .mt b { display: block; color: var(--ink); font-size: 15px; }
.gcard .rank { position: absolute; margin: 9px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); font-size: 13px; font-weight: 600; }
/* Deep NorthScale canvas with independently colored, opaque data surfaces. */
.app-main { color: var(--canvas-ink); }
.card, .kpi, .big, .sig, .ppanel, .portfolio-stats, .ccard, .gcard,
.empty-state, .strip .st, .chip, .viewtog, .note {
  color: var(--ink);
}
.hero .sub, .hero .crumb, .hero .eyebrow,
.wrap > .sub:not(.note), .wrap > .muted:not(.note),
.wrap > details > summary, .wrap > div:not([class]) > .muted,
.breadcrumb, .breadcrumb strong, .directory-controls, .sort-label select,
.tabs a, .filter-tab, details.inactive summary { color: var(--canvas-sub); }
.contextbar, .tabs { border-color: var(--canvas-line); }
.tabs a:hover, .tabs a.on { color: var(--canvas-ink); }
.tabs a.on { border-bottom-color: var(--canvas-ink); }
.directory-note, .foot, .foot a { color: var(--canvas-muted); }
.foot { border-color: var(--canvas-line); }
.hero > .btn { background: #fff; border-color: #fff; color: #001a33; box-shadow: var(--shadow); }
.hero > .btn:hover { background: #e7f0f9; border-color: #e7f0f9; }
.filter-tab:hover { color: var(--canvas-ink); background: rgba(255, 255, 255, .12); }
.filter-tab.on { color: #001a33; background: #fff; border-color: #fff; }
.sort-label select:hover { border-color: var(--canvas-line); }
.sort-label select option { color: var(--ink); background: var(--card); }
@media (max-width: 1250px) {
  .topbar { flex-wrap: wrap; gap: 10px 20px; padding: 12px 26px 10px; }
  .theme { margin-left: auto; }
  .primary-nav { flex: 1 1 100%; order: 3; justify-content: flex-start; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
  .primary-nav a { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .app-top { position: static; }
  .topbar { padding: 12px 18px 10px; gap: 10px 14px; }
  .primary-nav { gap: 3px; }
  .primary-nav a { padding: 10px 11px; }
  .brand { font-size: 19px; }
  .contextbar { align-items: flex-start; }
  .account-control { width: 100%; }
  .account-control select { max-width: none; }
}
@media (max-width: 540px) {
  .topbar { padding: 10px 14px; }
  .brand-logo { width: 38px; height: 49px; }
  .brand small { font-size: 13px; }
  .primary-nav a { font-size: 15px; padding: 10px 8px; }
  .breadcrumb { flex-wrap: wrap; }
}
@media (min-width: 1440px) {
  .cgrid.cards-view { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1180px) {
  .wrap { padding: 25px 26px 32px; }
  .foot { padding: 17px 26px; }
  .ccard { grid-template-columns: minmax(170px,1fr) 440px auto; gap: 16px; padding: 18px 18px; }
  .client-logo { width: 128px; height: 52px; }
  .cname { font-size: 19px; }
  .cnums b { font-size: 21px; }
  .cnums { gap: 15px; }
  .client-identity { gap: 9px; }
  .client-avatar { width: 32px; height: 32px; }
  .big { padding: 17px; }
  .big b { font-size: 30px; }
}
@media (max-width: 980px) {
  .directory-toolbar { flex-wrap: wrap; gap: 12px; }
  .client-search { width: 100%; }
  .cgrid { border-radius: 12px; }
  .ccard { display: grid; grid-template-columns: 1fr auto; gap: 18px 10px; padding: 19px; }
  .ccard.manual { grid-template-columns: 1fr; }
  .ccard.manual > .connect-cta { grid-column: 1; grid-row: auto; justify-self: start; }
  .ccard.manual .client-identity { grid-column: 1 / -1; }
  .directory-hero { flex-wrap: wrap; }
  .client-count { min-width: 0; padding: 14px 20px 12px; }
  .client-count b { font-size: 38px; }
  .client-identity { grid-column: 1; }
  .client-open { grid-column: 2; grid-row: 1; }
  .cnums { grid-column: 1/-1; width: 100%; gap: 12px; }
  .cnums .metric { text-align: left; }
  .ccard .cnums .lbl { display: block; font-size: 14px; margin-bottom: 5px; }
  .ccard > .client-platforms { grid-column: 1/-1; grid-row: 3; margin-top: 0; }
  .ccard > .client-open { grid-column: 2; }
  .cards-view .ccard { padding: 24px; }
  .pgrid { grid-template-columns: 1fr; }
  .portfolio-stat { padding: 22px 18px; }
  .portfolio-stat strong { font-size: 36px; }
  .hbar { grid-template-columns: 120px 1fr 88px 40px 90px; gap: 8px; font-size: 14px; }
}
@media (max-width: 899px) {
  .cgrid.cards-view { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .wrap { padding: 25px 20px 30px; }
  .foot { padding: 16px 20px; line-height: 1.7; }
  .hero h1 { font-size: 38px; }
  .directory-hero { gap: 16px; align-items: flex-start; }
  .directory-hero > .btn { margin-top: 16px; }
  .directory-hero .sub { max-width: 48ch; font-size: 17px; }
  .portfolio-stats { margin-bottom: 18px; }
  .portfolio-stat { padding: 16px; gap: 5px; }
  .portfolio-stat strong { font-size: 36px; }
  .stat-label { font-size: 15px; }
  .stat-detail { font-size: 14px; }
  .directory-toolbar { flex-wrap: nowrap; }
  .client-search { width: 200px; }
  .bigrow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card { padding: 17px; }
  .card.soft { padding: 19px; }
  .filt { padding: 12px; }
  .filt-top { gap: 12px; }
  .kpi .v { font-size: 30px; }
  .hbar { grid-template-columns: 1fr auto; row-gap: 7px; }
  .hbar.hd { display: none; }
  .hbar .track { grid-column: 1/-1; order: 3; }
  .hbar .pc { display: none; }
  .legend { flex-wrap: wrap; gap: 8px 14px; }
  .sig { flex-wrap: wrap; }
  .sigd { text-align: left; }
}
@media (max-width: 540px) {
  .wrap { padding: 22px 16px 28px; }
  .breadcrumb { font-size: 14px; }
  .directory-hero { display: block; margin-bottom: 22px; }
  .directory-hero > .btn { margin-top: 16px; }
  .hero h1 { font-size: 36px; }
  .portfolio-stats { grid-template-columns: minmax(0,1fr); }
  .portfolio-stat { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
  .portfolio-stat strong { grid-column: 2; grid-row: 1 / 3; }
  .portfolio-stat .stat-detail { grid-column: 1; }
  .portfolio-stat + .portfolio-stat { border-top: 1px solid var(--line); }
  .portfolio-stat + .portfolio-stat::before { display: none; }
  .portfolio-stat { padding: 18px 15px; gap: 6px; }
  .portfolio-stat strong { font-size: 32px; letter-spacing: -.045em; }
  .stat-label { font-size: 15px; line-height: 1.4; }
  .stat-detail { font-size: 14px; line-height: 1.4; }
  .portfolio-stat + .portfolio-stat::before { top: 15px; bottom: 15px; }
  .directory-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .filter-tabs { gap: 3px; }
  .filter-tab { padding: 9px 8px; flex: 1; justify-content: center; font-size: 14px; }
  .client-search { width: 100%; }
  .directory-controls { gap: 8px; }
  .sort-label { font-size: 0; gap: 0; }
  .sort-label select { max-width: 155px; font-size: 13px; padding-right: 16px; }
  .ccard { padding: 17px 15px; min-height: 150px; gap: 19px 10px; }
  .cname { font-size: 18px; }
  .client-avatar { width: 34px; height: 34px; }
  .cnums { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }
  .cnums .metric:last-child { grid-column: 1 / -1; }
  .cnums b { font-size: 20px; }
  .ccard .dl { font-size: 13px; }
  .cgrid.cards-view { grid-template-columns: minmax(0,1fr); }
  .cards-view .ccard { min-height: 252px; padding: 24px 20px; gap: 22px 10px; }
  .cards-view .cname { font-size: 22px; }
  .cards-view .cnums { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
  .cards-view .cnums b { font-size: 23px; }
  .directory-note { font-size: 13px; }
  .filt-top { align-items: stretch; flex-direction: column; }
  .range-now { align-items: flex-start; }
  .segs { display: flex; width: 100%; }
  .seg { flex: 1 1 45%; padding: 9px 7px; justify-content: center; font-size: 14px; }
  .filt-more label { flex: 1 1 42%; min-width: 0; }
  .filt-more label[style] { flex: 1 1 100% !important; }
  .filt-more input, .filt-more select { min-width: 0; width: 100%; }
  .rng-field { gap: 9px; }
  .rng-field label { flex: 1; min-width: 0; }
  .rng-field input { width: 100%; min-width: 0; font-size: 14px; padding: 7px; }
  .arrow { display: none; }
  .kpis { gap: 9px; }
  .kpi { padding: 14px 12px 9px; }
  .kpi .v { font-size: 27px; }
  .big { padding: 15px; }
  .big b { font-size: 28px; }
  .pnums { gap: 15px; }
  .pnums[style] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .pnums b { font-size: 27px; }
  .ppanel { padding: 18px; }
  .strip .st { flex: 1 1 28%; gap: 5px; padding: 8px; font-size: 13px; }
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .gcard .body { padding: 10px; }
  .gcard .mt { grid-template-columns: 1fr; }
  .row label { max-width: 100%; }
  .foot { padding: 15px 16px; font-size: 13px; }
}
/* Telefon: egy soros, vízszintesen görgethető menü (minden cél elérhető, de nem öt sorban), kompakt ügyfélsáv, olcsóbb rajzolás. */
@media (max-width: 760px) {
  body { background-attachment: scroll; }
  .app-top { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card); box-shadow: none; }
  .topbar { padding: 10px 18px 0; gap: 8px 12px; }
  .primary-nav { flex: 1 1 100%; order: 3; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; margin: 4px -18px 0; padding: 4px 44px 0 18px; border-top: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav a { flex: none; scroll-snap-align: start; padding: 10px 9px; font-size: 15px; }
  .brand { font-size: 18px; }
  .brand small { font-size: 12px; margin-top: 3px; }
  .theme { width: 38px; height: 38px; padding: 8px; }
}
@media (max-width: 580px) {
  .workspace-clientbar { padding: 8px 14px 10px; gap: 8px; }
  .workspace-platforms { display: none; }
  .client-switcher-icon { width: 38px; height: 38px; border-radius: 10px; }
  .client-switcher-icon .icon { width: 20px; height: 20px; }
  .client-switcher label { font-size: 13px; }
  .client-switcher select { font-size: 16px; padding: 8px 34px 8px 11px; margin-top: 3px; }
}
@media (max-width: 760px) {
  .nav-more { display: flex; flex: none; }
  .nav-more summary { display: none; }
  .nav-more-list { position: static; display: flex; gap: 2px; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .nav-more-list a { border-radius: 0; }
  .nav-more-list a.on { background: transparent; }
  .nav-more-list a.on::after { display: block; }
  .ads-table table, .ads-table tbody { display: block; width: 100%; }
  .ads-table tr:first-child { display: none; }
  .ads-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 2px; border-bottom: 1px solid var(--grid); }
  .ads-table td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; font-size: 14px; min-width: 0; }
  .ads-table td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted); margin-bottom: 1px; }
  .ads-table td[data-l=""]::before, .ads-table td[data-l="#"]::before { content: none; }
  .ads-table td[data-l=""], .ads-table td[data-l="#"] { grid-column: span 1; align-self: center; color: var(--muted); }
  .ads-table td.l { grid-column: 1 / -1; }
  .ads-table td.l img { float: none; margin-bottom: 6px; }
  .ads-table .share { display: none; }
  .ads-table tbody tr:hover td { background: transparent; }
}
@media (max-width: 540px) {
  .topbar { padding: 8px 14px 0; }
  .primary-nav { margin-left: -14px; margin-right: -14px; padding-left: 14px; }
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .big b { font-size: 24px; letter-spacing: -.04em; }
  .row > form { max-width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.connection-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.connection-actions form { margin:0; }
.connection-summary { display:flex; flex-wrap:wrap; gap:12px 28px; margin:20px 0; color:var(--canvas-sub); }
.connection-summary strong { color:var(--canvas-ink); font-size:24px; margin-right:6px; }
.connection-matrix { display:grid; gap:14px; }
.connection-row { display:grid; grid-template-columns:minmax(190px,1.15fr) repeat(3,minmax(150px,1fr)) auto; gap:20px; align-items:center; margin:0; }
.connection-row h3 { font-size:19px; margin:0 0 5px; }
.connection-cell { display:flex; flex-direction:column; gap:6px; min-width:0; }
.connection-cell strong { font-size:16px; }
.connection-cell span, .connection-cell small { font-size:14px; }
.connection-tag { display:inline-flex; align-items:center; align-self:flex-start; gap:6px; border-radius:7px; padding:4px 8px; font-weight:550; }
.connection-tag.ready { color:var(--good); background:var(--goodbg); }
.connection-tag.pending { color:var(--warn); background:var(--warnbg); }
.connection-tag.unknown { color:var(--ink2); background:var(--soft); }
.connection-grid, .platform-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:20px 0; }
.connection-grid > .card, .platform-overview > .ppanel { margin:0; }
.connection-grid label { display:block; margin:16px 0; font-size:15px; font-weight:550; }
.connection-grid select, .connection-grid input { display:block; width:100%; margin-top:6px; min-width:0; }
.connection-grid .btn { max-width:100%; white-space:normal; text-align:left; }
.connection-grid p, .connection-grid li { font-size:15px; line-height:1.65; color:var(--ink2); }
.connection-grid ol { padding-left:20px; }
.connection-id { font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; color:var(--ink2); }
.connection-email { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.connection-email code { overflow-wrap:anywhere; }
.connection-goals { display:flex; flex-wrap:wrap; gap:18px; }
.connection-goals label { display:flex; flex-direction:column; gap:6px; font-size:15px; flex:1 1 150px; }
.connection-goals input { width:100%; min-width:0; }
.connection-detail-note { color:var(--canvas-sub); font-size:15px; line-height:1.7; }
.connection-help { margin-top:14px; }
.connection-help summary { color:var(--ink2); cursor:pointer; font-size:15px; }
.client-goals { color:var(--canvas-sub); font-size:16px; margin:12px 0; }
.client-freshness { font-size:13px; color:var(--muted); margin-top:8px; }
.platform-overview .ppanel { gap:14px; }
.platform-overview .pnums { gap:18px 12px; }
.platform-overview .pnums b { font-size:27px; }
.platform-overview .ph { flex-wrap:wrap; }
.platform-overview .ph .more { margin-left:0; width:100%; font-size:14px; }
.platform-overview .connection-actions { margin-top:auto; }
@media(max-width:1200px) { .connection-row { grid-template-columns:repeat(3,minmax(0,1fr)); } .connection-row > :first-child { grid-column:1/-1; } .connection-row > .btn { justify-self:start; } }
@media(max-width:1050px) { .connection-grid, .platform-overview { grid-template-columns:1fr; } }
@media(max-width:580px) { .connection-row { grid-template-columns:1fr; } .connection-row > :first-child { grid-column:auto; } .connection-cell { padding-top:10px; border-top:1px solid var(--line); } }

.floating-client { position:fixed; right:24px; bottom:22px; z-index:35; max-width:min(420px,calc(100% - 32px)); border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); box-shadow:0 10px 38px rgba(0,20,45,.24); }
.floating-client > a { display:flex; gap:12px; align-items:center; padding:13px 18px; color:inherit; text-decoration:none; }
.floating-client-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border-radius:12px; background:var(--accent-soft); color:var(--accent); }
.floating-client-icon .icon { width:24px; height:24px; }
.floating-client-name { min-width:0; }
.floating-client-name > span { display:block; font-size:13px; color:var(--ink2); margin-bottom:3px; }
.floating-client-name strong { display:block; font-size:17px; line-height:1.35; overflow-wrap:anywhere; }
.app-main { padding-bottom:105px; }
.notification-context { min-width:0; margin:0 0 12px; }
.notification-trigger { display:flex; flex-wrap:wrap; align-items:center; gap:7px; max-width:100%; padding:0; border:0; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; border-radius:9px; }
.source-chip { display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:100%; border:1px solid var(--line); background:var(--soft); color:var(--ink2); border-radius:9px; padding:6px 9px; font-size:15px; line-height:1.35; }
.source-client { color:var(--ink); font-weight:650; }
.source-client > span { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.source-platform { background:var(--card); font-size:14px; font-weight:600; }
.source-campaign > span { max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.source-info { color:var(--accent); padding:4px; }
.notification-trigger:hover .source-chip, .notification-trigger[aria-expanded=true] .source-chip { border-color:var(--accent); }
.notification-trigger:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.notification-popover { position:fixed; z-index:60; width:440px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--ink); box-shadow:0 18px 65px rgba(0,20,45,.25),0 3px 10px rgba(0,20,45,.12); }
.notification-popover[hidden] { display:none; }
.source-heading { display:flex; align-items:flex-start; gap:12px; padding-bottom:17px; border-bottom:1px solid var(--line); }
.source-heading > div { flex:1; min-width:0; }
.source-avatar { display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; background:var(--accent-soft); color:var(--accent); border-radius:12px; }
.source-avatar .icon { width:22px; height:22px; }
.source-eyebrow { color:var(--ink2); font-size:14px; }
.source-heading h3 { font-size:21px; line-height:1.3; margin:5px 0 0; overflow-wrap:anywhere; }
.source-close { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; padding:6px; border:0; border-radius:8px; color:var(--ink2); background:var(--soft); cursor:pointer; }
.notification-popover dl { display:grid; gap:14px; margin:18px 0; }
.notification-popover dt { color:var(--ink2); font-size:14px; margin-bottom:4px; }
.notification-popover dd { margin:0; font-size:16px; font-weight:550; line-height:1.5; overflow-wrap:anywhere; }
.source-links { display:flex; flex-wrap:wrap; gap:12px 20px; border-top:1px solid var(--line); padding-top:16px; }
.source-links a { color:var(--accent); font-size:15px; font-weight:600; }
.sig .signal-title { font-size:19px; font-weight:650; margin:0 0 6px; }
.sig .signal-description { color:var(--ink2); font-size:16px; line-height:1.6; }
.sig { padding:20px 22px; border-radius:15px; }
.sline .signal-content { min-width:0; flex:1; }
.sline .notification-context { margin:0 0 10px; }
.signal-client-heading { display:flex; align-items:center; gap:12px; }
.signal-client-heading > .icon { width:32px; height:32px; }
.ccard.lead-client .cnums .lbl { display:block; }
@media(max-width:980px) {
 .sig { flex-wrap:wrap; }
 .sig > div:first-child { flex-basis:100% !important; }
 .sig .sigd { text-align:left; flex:1; }
}
@media(max-width:580px) {
 .floating-client { display:none; }
 .floating-client > a { padding:11px 14px; }
 .source-client > span, .source-campaign > span { max-width:100%; }
 .source-campaign { flex-basis:100%; max-width:100%; }
 .source-campaign > span { flex:1; min-width:0; }
 .notification-popover { padding:18px; }
 .sig { padding:18px; }
 .sig .sigd { white-space:normal; }
}

.ecom-verdict { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: start; }
.ecom-verdict .ecom-word { font-size: 40px; font-weight: 650; letter-spacing: -.04em; line-height: 1.1; margin: 4px 0 8px; }
.ecom-verdict.zold .ecom-word { color: var(--good); } .ecom-verdict.piros .ecom-word { color: var(--bad); } .ecom-verdict.sarga .ecom-word { color: var(--warn); }
.ecom-score { font-size: 14px; color: var(--ink2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; white-space: nowrap; }
.ecom-inputs { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.ecom-inputs li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
.ecom-inputs .m { font-weight: 700; text-align: center; } .ecom-inputs .m.p { color: var(--good); } .ecom-inputs .m.n { color: var(--bad); } .ecom-inputs .m.z { color: var(--muted); }
.ecom-inputs small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.ecom-cal { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ecom-cal li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ecom-cal li:last-child { border-bottom: 0; } .ecom-cal time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 128px; }
.ecom-cal .k { font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.ecom-cal .k.holiday, .ecom-cal .k.rest { color: var(--bad); border-color: var(--badbg); background: var(--badbg); }
.ecom-cal .k.commerce { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.ecom-src { font-size: 14px; color: var(--ink2); line-height: 1.6; } .ecom-src li { margin: 4px 0; }
.ecom-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 20px; align-items: center; }
.ecom-strip .ecom-word { font-size: 24px; margin: 0; } .ecom-strip p { margin: 0; font-size: 15px; color: var(--ink2); }
.ecom-stale { font-size: 14px; }
.kpi .d { flex-wrap: wrap; }
.ecom-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ecom-tbl th, .ecom-tbl td { white-space: nowrap; }
.ecom-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 28px; }
.ecom-two h4 { margin: 0 0 6px; font-size: 15px; } .ecom-two .ecom-tbl td:first-child, .ecom-two .ecom-tbl th:first-child { white-space: normal; }
.ecom-next { font-size: 14px; color: var(--ink2); margin: 10px 0 0; }
.ecom-reasons { margin: 8px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--ink); } .ecom-reasons li { margin: 4px 0; }
.ecom-rules { margin-top: 10px; } .ecom-rules summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.ecom-cal .k.ksh { color: var(--warn); border-color: var(--warnbg); background: var(--warnbg); }
@media (max-width: 720px) { .ecom-verdict, .ecom-strip { grid-template-columns: 1fr; } .ecom-score { white-space: normal; } }

.lk-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 36px; align-items: center; }
.lk-big { font-size: 64px; font-weight: 700; letter-spacing: -.05em; line-height: 1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.lk-big small { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-left: 6px; color: var(--ink2); }
.lk-hero .sub { margin: 0 0 12px; }
.lk-verdict { font-size: 17px; line-height: 1.55; margin: 0; }
.lk-funnel { display: grid; gap: 8px; }
.lk-funnel .row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: 15px; }
.lk-funnel .row b { font-variant-numeric: tabular-nums; text-align: right; font-size: 17px; }
.lk-funnel .bar { height: 30px; border-radius: 7px; background: var(--accent-soft); overflow: hidden; }
.lk-funnel .bar i { display: block; height: 100%; border-radius: 7px; background: var(--accent); min-width: 3px; }
.lk-funnel .row.good .bar i { background: var(--good); }
.lk-funnel .row .k { color: var(--ink2); }
.lk-rounds { display: grid; gap: 10px; margin-top: 8px; }
.lk-round { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lk-round:last-child { border-bottom: 0; }
.lk-round .nm { font-size: 16px; font-weight: 600; min-width: 0; } .lk-round .nm small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; margin-top: 2px; }
.lk-round .trk { height: 14px; border-radius: 999px; background: var(--soft); overflow: hidden; position: relative; }
.lk-round .trk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--muted); }
.lk-round.good .trk i { background: var(--good); } .lk-round.warn .trk i { background: var(--warn); }
.lk-round .pct { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; letter-spacing: -.02em; }
.lk-round.good .pct { color: var(--good); } .lk-round.warn .pct { color: var(--warn); } .lk-round.zero .pct { color: var(--muted); }
.lk-round .chips { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.lk-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; white-space: nowrap; }
.lk-tag.igen { color: var(--good); background: var(--goodbg); border-color: var(--goodbg); }
.lk-tag.nem { color: var(--bad); background: var(--badbg); border-color: var(--badbg); }
.lk-tag.semleges { color: var(--warn); background: var(--warnbg); border-color: var(--warnbg); }
.lk-tag.ping { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); }
.lk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 10px; }
.lk-col h4 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.lk-col summary { list-style: none; cursor: pointer; } .lk-col summary::-webkit-details-marker { display: none; }
.lk-col summary h4::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); color: var(--muted); }
.lk-col[open] summary h4::after { transform: rotate(45deg); }
.lk-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lk-col li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5; }
.lk-col li b { display: block; font-size: 15px; } .lk-col li .who { color: var(--ink2); font-size: 13px; }
.lk-col li .sn { color: var(--ink2); margin-top: 4px; display: block; } .lk-col li .mj { display: block; color: var(--accent); font-size: 13px; margin-top: 3px; }
.lk-col.igen li { border-left: 4px solid var(--good); } .lk-col.semleges li { border-left: 4px solid var(--warn); } .lk-col.nem li { border-left: 4px solid var(--bad); }
.lk-tabu { border: 2px solid var(--bad); }
.lk-tabu .eyebrow { color: var(--bad); }
.lk-tabu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; }
.lk-partner { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.lk-partner b { display: block; font-size: 16px; margin-bottom: 6px; } .lk-partner ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.lk-partner small { color: var(--muted); }
.lk-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; padding: 8px 14px; border-radius: 999px; margin: 8px 0; }
.lk-status.ok { color: var(--good); background: var(--goodbg); } .lk-status.bad { color: var(--bad); background: var(--badbg); }
.lk-check textarea { width: 100%; min-height: 96px; border: 1px solid var(--axis); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; background: var(--card); color: var(--ink); resize: vertical; }
.lk-check .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
#lk-result { margin-top: 10px; } #lk-result ul { margin: 6px 0 0; padding-left: 18px; font-size: 15px; } #lk-result li { margin: 3px 0; }
.lk-hits li { font-size: 14px; } .lk-hits { margin: 6px 0 0; padding-left: 18px; }
.lk-note { font-size: 14px; color: var(--muted); margin: 10px 0 0; line-height: 1.55; }
.lk-lev { display: block; margin-top: 6px; font-size: 13px; color: var(--ink2); }
.lk-audit-btn { margin-top: 8px; font: inherit; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 6px 12px; border: 1.5px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.lk-audit-btn[disabled] { opacity: .45; cursor: default; } .lk-audit-btn:hover:not([disabled]) { background: var(--accent-hover); }
.lk-audit-allapot { display: block; margin-top: 6px; font-size: 13px; color: var(--ink2); white-space: pre-line; } .lk-audit-allapot[hidden] { display: none; }
.lk-audit-allapot a { color: var(--accent); font-weight: 650; }
.lk-bounces { font-size: 14px; color: var(--ink2); margin: 6px 0 0; padding-left: 18px; line-height: 1.55; }
@media (max-width: 820px) { .lk-hero { grid-template-columns: 1fr; } .lk-big { font-size: 52px; } .lk-round { grid-template-columns: 1fr; gap: 6px; } .lk-round .pct { text-align: left; } .lk-funnel .row { grid-template-columns: 110px minmax(0, 1fr) 56px; } }

.at-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 10px 0; }
.at-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .at-link code { font-size: 14px; }
.at-szunet { margin-top: 14px; } .at-szunet label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14.5px; line-height: 1.45; } .at-szunet input { margin-top: 4px; } .at-szunet small { color: var(--muted); font-size: 12.5px; }
.at-tbl { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 10px; } .at-tbl th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 8px 8px; border-bottom: 1px solid var(--line); }
.at-tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; } .at-tbl tr:last-child td { border-bottom: 0; }
.at-st { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 650; white-space: nowrap; border: 1px solid var(--line); }
.at-st.uj { color: var(--accent); background: var(--accent-soft); } .at-st.szamlazva { color: var(--warn); background: var(--warnbg); } .at-st.fizetve, .at-st.kesz { color: var(--good); background: var(--goodbg); }
.at-st.fut { color: var(--accent); } .at-st.atadva { color: var(--muted); } .at-st.elutasitva { color: var(--bad); background: var(--badbg); }
.at-det { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 12px 0; } .at-det summary { cursor: pointer; font-weight: 650; font-size: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.at-det summary small { color: var(--muted); font-weight: 500; }
.at-kv { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 12px; font-size: 14.5px; margin: 10px 0; } .at-kv b { color: var(--ink2); font-weight: 600; }
.at-naplo { font-size: 13.5px; color: var(--ink2); margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.at-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; } .at-act form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.at-act select, .at-act input[type=text] { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--axis); border-radius: 8px; background: var(--card); color: var(--ink); }
.at-btn { font: inherit; font-size: 13.5px; font-weight: 700; border-radius: 999px; padding: 7px 14px; border: 1.5px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.at-btn.ghost { background: transparent; color: var(--accent); } .at-btn[disabled] { opacity: .45; cursor: default; }
.at-allapot { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink2); white-space: pre-line; } .at-allapot[hidden] { display: none; } .at-allapot a { color: var(--accent); font-weight: 650; }
.at-level { width: 100%; min-height: 220px; font: inherit; font-size: 14px; border: 1px solid var(--axis); border-radius: 10px; padding: 10px 12px; background: var(--card); color: var(--ink); }
.at-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; } .at-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; font-weight: 600; }
.at-form input, .at-form textarea { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--card); color: var(--ink); }
.at-form .wide { grid-column: 1 / -1; } .at-note { font-size: 14px; color: var(--muted); margin: 8px 0 0; line-height: 1.55; }
@media (max-width: 820px) { .at-tbl thead { display: none; } .at-tbl, .at-tbl tbody { display: block; } .at-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .at-tbl td { border: 0; padding: 2px 0; min-width: 0; overflow-wrap: anywhere; } .at-tbl td:first-child { grid-column: 1 / -1; } .at-kv { grid-template-columns: 1fr; } .at-kv b { margin-top: 6px; } .at-det summary { font-size: 15px; } }

.td-strip { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 }
.td-strip .st { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:7px; background:var(--card); font-size:14px }
.td-strip .st b { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums }
.td-strip .st, .td-item { color:var(--ink) }  /* a lap háttere sötét (canvas), a kártyákon a normál tinta kell */
.td-client h3 { color:var(--canvas-ink) }
.td-client .td-head .sub, .td-client > details > summary.sub, .td-empty, .td-actions .sub { color:var(--canvas-sub) }
.td-strip .st i { width:10px; height:10px; border-radius:50%; display:inline-block }
.td-elteres { --tdc: var(--bad) } .td-figyelmeztetes { --tdc: var(--warn) } .td-adathiany { --tdc: var(--muted) }
.td-client { margin:18px 0 }
.td-client .td-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px }
.td-client .td-head h3 { margin:0 }
.td-item { border:1px solid var(--line); border-left:4px solid var(--tdc); border-radius:10px; background:var(--card); margin:8px 0; padding:0 }
.td-item summary { list-style:none; cursor:pointer; padding:12px 14px; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:center }
.td-item summary::-webkit-details-marker { display:none }
.td-item .td-tag { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tdc); white-space:nowrap }
.td-item .td-cim { font-weight:600; font-size:16px; min-width:0 }
.td-item .td-meta { grid-column:1 / -1; color:var(--ink2); font-size:14px; display:flex; gap:10px; flex-wrap:wrap }
.td-item .td-meta b { color:var(--ink); font-variant-numeric:tabular-nums }
.td-body { padding:0 14px 14px; display:grid; gap:10px; font-size:15px }
.td-body .td-row { display:grid; grid-template-columns:minmax(70px,110px) 1fr; gap:8px }
.td-body .td-row span:first-child { color:var(--ink2); font-size:13px; text-transform:uppercase; letter-spacing:.04em; padding-top:3px }
.td-body pre { margin:0; font-size:12px; white-space:pre-wrap; word-break:break-word; background:var(--surface); border-radius:8px; padding:10px; max-height:220px; overflow:auto; color:var(--ink2) }
.td-actions { display:flex; gap:8px; flex-wrap:wrap }
.td-actions form { margin:0 }
.td-ack { color:var(--ink2); font-size:14px }
.td-done { opacity:.6 }
.td-empty { color:var(--ink2); padding:14px; border:1px dashed var(--line); border-radius:10px }
@media (max-width:640px){ .td-body .td-row { grid-template-columns:1fr } .td-item summary { grid-template-columns:1fr } }

.jv-list { display:grid; gap:10px }
.jv-item { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:14px 16px; display:grid; gap:8px; color:var(--ink) }
.jv-item .jv-top { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline }
.jv-item .jv-cim { font-weight:600; font-size:16px }
.jv-item .jv-st { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--surface); color:var(--ink2) }
.jv-st.ellenorizve { background:var(--warnbg); color:var(--warn) } .jv-st.jovahagyva, .jv-st.vegrehajtva { background:var(--goodbg); color:var(--good) }
.jv-st.igazolva { background:var(--good-strong-bg); color:var(--good-strong) } .jv-st.dryrun_hiba, .jv-st.sikertelen, .jv-st.nem_igazolt { background:var(--badbg); color:var(--bad) }
.jv-item .jv-row { display:grid; grid-template-columns:minmax(80px,120px) 1fr; gap:8px; font-size:15px }
.jv-item .jv-row span:first-child { color:var(--ink2); font-size:13px; text-transform:uppercase; letter-spacing:.04em; padding-top:3px }
.jv-item pre { margin:0; font-size:12px; white-space:pre-wrap; word-break:break-word; background:var(--surface); border-radius:8px; padding:10px; max-height:200px; overflow:auto; color:var(--ink2) }
.jv-actions { display:flex; gap:8px; flex-wrap:wrap } .jv-actions form { margin:0 }
.jv-kock { font-size:14px } .jv-kock.kozepes { color:var(--warn) } .jv-kock.magas { color:var(--bad) }
.jv-form { display:grid; gap:10px; max-width:640px } .jv-form label { display:grid; gap:4px; font-size:14px; color:var(--ink2) }
.jv-form input, .jv-form select, .jv-form textarea { font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink) }
.jv-naplo { font-size:13px; color:var(--ink2) }
@media (max-width:640px){ .jv-item .jv-row { grid-template-columns:1fr } }