/* Shared geometry and colour tokens for Toolbox and Ratingfinder. */
:root {
    color-scheme: light;
    --pd: #8c252a;
    --pd-dark: #6e1d21;
    --brand-fill: #8c252a;
    --on-brand: #fff;
    --pale: #f6eced;
    --text: #262626;
    --muted: #5f5f5f;
    --grey: #707070;
    --line: #dcdcdc;
    --surface: #f3f3f3;
    --paper: #fff;
    --canvas: #f7f6f5;
    --error: #a4161a;
    --error-surface: #fff0f0;
    --font: "Source Sans 3", "Segoe UI", Arial, sans-serif;
    --display: "Montserrat", "Segoe UI", Arial, sans-serif;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --pd: #f1a3aa;
    --pd-dark: #ffc1c6;
    --brand-fill: #9e3541;
    --pale: #38282f;
    --text: #eceef2;
    --muted: #b6bbc6;
    --grey: #b6bbc6;
    --line: #3b404b;
    --surface: #292d35;
    --paper: #21242b;
    --canvas: #17191e;
    --error: #ffaaa6;
    --error-surface: #3d262c;
}
html { scrollbar-gutter: stable; }
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: var(--canvas); }
html::-webkit-scrollbar-thumb { background: var(--muted); border: 2px solid var(--canvas); border-radius: 10px; }
body:is(.toolbox-app, .ratingfinder-app) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--paper); color: var(--text); font: 16px/1.5 var(--font); letter-spacing: .01071em; }
.topbar { flex: 0 0 auto; background: var(--paper); border-bottom: 1px solid var(--line); }
.topbar-inner, .header-nav { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 18px; }
.topbar .brand { display: block; flex: 0 0 auto; min-width: 0; }
.topbar .brand img { display: block; width: auto; height: 52px; max-width: 100%; }
[data-theme="dark"] .topbar .brand img { filter: brightness(1.85) saturate(.65); }
.header-nav { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 2px; overflow-x: auto; }
body:is(.toolbox-app, .ratingfinder-app) .header-nav a { display: block; flex: 0 0 auto; padding: 12px 16px 10px; margin-bottom: 0; border-bottom: 3px solid transparent; color: var(--muted); font: 600 14px/1.5 var(--display); text-decoration: none; white-space: nowrap; }
body:is(.toolbox-app, .ratingfinder-app) .header-nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
body:is(.toolbox-app, .ratingfinder-app) .header-nav a.active { color: var(--pd); border-bottom-color: var(--pd); }
.account-header { display: flex; align-items: center; gap: 18px; min-width: 0; }
.bank-identity { min-width: 0; text-align: right; }
.bank-identity strong { display: block; max-width: 320px; color: var(--text); font: 600 16px/1.35 var(--display); overflow-wrap: anywhere; }
.bank-identity small { display: block; max-width: 320px; margin-top: 4px; color: var(--muted); font: 400 13px/1.4 var(--font); overflow-wrap: anywhere; }
.profile-menu { position: relative; flex: 0 0 auto; }
.profile-menu summary { list-style: none; cursor: pointer; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-fill); color: var(--on-brand); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--line); font: 600 14px/1 var(--display); }
.profile-avatar:hover, .profile-menu[open] > summary { box-shadow: 0 0 0 2px var(--pd); }
.profile-panel { position: absolute; z-index: 100; top: calc(100% + 10px); right: 0; width: 300px; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 12px 36px #0003; }
.profile-summary { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.profile-summary strong { font-weight: 600; }
.profile-summary > span { font-size: 14px; color: var(--muted); }
body:is(.toolbox-app, .ratingfinder-app) .profile-panel a { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 10px 12px; border: 0; border-radius: 6px; background: var(--paper); color: var(--text); font: 400 15px/1.4 var(--font); text-align: left; text-decoration: none; }
body:is(.toolbox-app, .ratingfinder-app) .profile-panel a:hover { background: var(--surface); text-decoration: none; }
body:is(.toolbox-app, .ratingfinder-app) .profile-panel .menu-separated { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; padding-top: 14px; }
.workspace { flex: 1 0 auto; background: var(--canvas); }
.page { width: 100%; max-width: 1180px; min-height: 0; margin: 0 auto; padding: 36px 28px 64px; }
.public-main { flex: 1; }
.site-footer { flex: 0 0 auto; max-width: none; margin: 0 !important; padding: 0; background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); font: 400 14px/1.5 var(--font); }
.site-footer > div { display: flex; flex-wrap: wrap; gap: 10px 24px; max-width: 1180px; margin: auto; padding: 24px 28px 32px; }
.site-footer span { margin-right: auto; }
.site-footer a { color: var(--pd); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.topbar :is(a, summary):focus-visible, .site-footer a:focus-visible { outline: 2px solid var(--pd); outline-offset: 3px; }
.impersonation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 14px max(28px, calc((100vw - 1124px)/2)); background: var(--pale); border-bottom: 1px solid var(--line); }
.impersonation strong, .impersonation span { display: block; }
.impersonation span { margin-top: 3px; font-size: 14px; color: var(--muted); }
@media (max-width: 600px) {
    .topbar-inner { padding: 20px 16px 16px; gap: 16px; }
    .topbar .brand { flex-shrink: 1; }
    .topbar .brand img { height: 40px; width: auto; }
    .bank-identity strong { font-size: 13px; max-width: 145px; }
    .bank-identity small { max-width: 145px; font-size: 11px; }
    .account-header { gap: 10px; }
    .profile-avatar { width: 38px; height: 38px; font-size: 12px; }
    .header-nav { padding: 0 8px; }
    body:is(.toolbox-app, .ratingfinder-app) .header-nav a { padding: 10px 8px; font-size: 11px; }
    .page { padding: 30px 16px 48px; }
    .site-footer > div { padding-left: 16px; padding-right: 16px; }
    .impersonation { padding: 16px; }
}
@media print {
    /* Override theme.js's inline color-scheme too: otherwise Chromium paints
       the page margins dark even though the document content is already light. */
    :root[data-theme] { --pd: #8c252a; --brand-fill: #8c252a; --pale: #f6eced; --text: #262626; --muted: #5f5f5f; --grey: #707070; --line: #dcdcdc; --surface: #f3f3f3; --paper: #fff; --canvas: #fff; color-scheme: light !important; background: #fff; }
    .header-nav, .account-header, .site-footer, .impersonation { display: none !important; }
    .page { max-width: none; padding: 0; }
    .topbar-inner { padding: 0 0 12px; }
    [data-theme] .topbar .brand img { filter: none; }
}