:root {
    color-scheme: light;
    --page: #f5f7fb;
    --paper: #ffffff;
    --ink: #111113;
    --muted: #667085;
    --hairline: #d9dee8;
    --black: #09090b;
    --blue: #0a84ff;
    --green: #14a46c;
    --amber: #b17a32;
    --red: #c94b4b;
    --violet: #6750a4;
    /*
     * Typography contract:
     * UI: Inter/system for body text, controls, tables, and navigation.
     * Display: Switzer/Inter for page titles and section headings.
     * Numbers: UI stack with tabular figures for balances, money, and metrics.
     * Code: system monospace stack for API snippets, keys, IDs, and code
     *       (no mono webfont is downloaded — see portal-wprovider.css tokens).
     */
    --portal-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --portal-font-display: "Switzer", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --portal-font-number: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --portal-font-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --portal-heading-font: var(--portal-font-display);
    --portal-page-title-size: clamp(30px, 2.4vw, 42px);
    --portal-page-title-weight: 800;
    --portal-page-title-line-height: 1.08;
    --portal-page-subtitle-size: 16px;
    --portal-page-subtitle-weight: 500;
    --portal-page-subtitle-line-height: 1.4;
}
* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--portal-font-ui);
    font-size: 14px;
    letter-spacing: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a {
    color: inherit;
    text-decoration: none;
}
.app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--hairline);
    background: rgba(255,255,255,.92);
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    gap: 24px;
}
.brand {
    align-items: center;
    display: flex;
    gap: 12px;
    min-height: 44px;
}
.brand-mark {
    align-items: center;
    background: var(--black);
    border-radius: 8px;
    color: #fff;
    display: grid;
    font-size: 11px;
    font-weight: 800;
    height: 42px;
    justify-items: center;
    letter-spacing: .08em;
    width: 42px;
}
.brand strong, .brand small {
    display: block;
}
.brand strong {
    font-size: 15px;
}
.brand small {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}
nav {
    display: grid;
    gap: 6px;
}
nav a {
    align-items: center;
    border-radius: 8px;
    color: #333741;
    display: flex;
    font-weight: 700;
    min-height: 42px;
    padding: 10px 12px;
}
nav a.active, nav a:hover {
    background: #111113;
    color: #fff;
}
.identity {
    border-top: 1px solid var(--hairline);
    margin-top: auto;
    padding-top: 16px;
}
.identity span, .identity strong {
    display: block;
}
.identity span {
    color: var(--muted);
    font-size: 12px;
}
main {
    display: grid;
    gap: 18px;
    max-width: 1480px;
    padding: 28px;
    width: 100%;
}
.hero {
    align-items: end;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8fafc 56%, #eef4ff 100%);
    border-bottom: 1px solid var(--hairline);
    border-top: 1px solid var(--hairline);
    display: flex;
    justify-content: space-between;
    margin: 0 -28px;
    min-height: 190px;
    padding: 32px 28px;
    gap: 20px;
}
.eyebrow {
    color: var(--blue);
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}
h1 {
    font-size: 42px;
    line-height: 1;
    margin: 0;
    max-width: 760px;
}
.hero p {
    color: var(--muted);
    margin: 12px 0 0;
    font-size: 15px;
}
.workspace-switch {
    min-width: 260px;
}
label {
    color: var(--muted);
    display: grid;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    text-transform: uppercase;
}
input, select {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    min-height: 44px;
    padding: 0 11px;
    text-transform: none;
    width: 100%;
}
button {
    background: var(--black);
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    min-height: 44px;
    padding: 0 14px;
    touch-action: manipulation;
    white-space: nowrap;
}
.flash {
    border-radius: 12px;
    font-weight: 600;
    font-size: 13.5px;
    padding: 11px 15px;
    border: 1px solid transparent;
}
.flash.success {
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
    border-color: color-mix(in srgb, var(--portal-accent) 28%, transparent);
}
.flash.danger {
    background: rgba(220, 38, 38, .10);
    color: var(--portal-danger);
    border-color: rgba(220, 38, 38, .32);
}
html.dark .flash.danger { color: var(--portal-danger); }
.wip-page {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    text-align: center;
    /* Centre the TITLE on the viewport: the box starts ~89px down (top bar + MAIN
       padding), so a symmetric box needs ~2×89px removed, plus ~40px more to lift
       the title (which sits a touch below the icon+text group's centre). */
    min-height: calc(100vh - 218px);
    margin-bottom: -72px;
    padding: 32px 20px;
}
@media (max-width: 620px) {
    /* Fill the area between the top bar (~81px) and the bottom nav (~88px) so the
       message lands at the centre of the visible content region, not above it. */
    .wip-page { min-height: calc(100vh - 168px); margin-bottom: 0; }
}
.wip-page-icon { width: 60px; height: 60px; color: var(--portal-muted); opacity: .65; }
.wip-page h1 { color: var(--portal-text); font-size: clamp(24px, 3vw, 34px); margin: 0; font-weight: 700; }
.wip-page p { color: var(--portal-muted); font-size: 14px; line-height: 1.5; margin: 0; max-width: 420px; }
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.metric, .person, .mini-tile, .notice {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    min-height: 98px;
    padding: 16px;
}
.metric {
    display: grid;
    gap: 18px;
}
.metric span, .person span, .mini-tile span, .notice span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.metric strong {
    font-size: 26px;
    line-height: 1;
}
.metric.blue strong { color: var(--blue); }
.metric.green strong { color: var(--green); }
.metric.amber strong { color: var(--amber); }
.metric.red strong { color: var(--red); }
.surface {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    border-top: 1px solid var(--hairline);
    margin: 0 -28px;
    padding: 0 28px 20px;
}
.section-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 58px;
}
h2 {
    font-size: 16px;
    margin: 0;
}
.table-wrap {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}
th, td {
    border-bottom: 1px solid var(--hairline);
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
}
th {
    background: #fbfcff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
td {
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
}
tr:last-child td { border-bottom: 0; }
.empty {
    color: var(--muted);
    height: 56px;
    text-align: center;
}
.pill {
    border: 1px solid var(--hairline);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    min-height: 26px;
    padding: 5px 9px;
}
.pill.good { background: #e9f8f1; color: #086043; }
.pill.live { background: #edf6ff; color: #0a5db8; }
.pill.warn { background: #fff8e5; color: #8a5a00; }
.pill.bad { background: #fff1f0; color: #ad221f; }
.mini-grid, .team-grid, .notice-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mini-tile, .person, .notice {
    display: grid;
    gap: 9px;
}
.person small {
    color: var(--muted);
}
.action-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.action-form {
    align-content: start;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 16px;
}
.notice p {
    color: #333741;
    margin: 0;
}
.notice.read {
    opacity: .62;
}
.empty-panel {
    align-items: center;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    color: var(--muted);
    display: grid;
    min-height: 92px;
    padding: 16px;
    text-align: center;
}
@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
    .sidebar {
        height: auto;
        padding: 18px;
        position: static;
    }
    nav {
        display: flex;
        flex-wrap: wrap;
    }
    main {
        padding: 18px;
    }
    .hero, .surface {
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }
    .hero {
        align-items: stretch;
        flex-direction: column;
    }
    h1 {
        font-size: 32px;
    }
    .workspace-switch {
        min-width: 0;
        width: 100%;
    }
}
@media (max-width: 760px) {
    .sidebar {
        gap: 14px;
    }
    nav {
        display: grid;
        grid-auto-columns: max-content;
        grid-auto-flow: column;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    nav::-webkit-scrollbar {
        display: none;
    }
    nav a {
        justify-content: center;
        min-width: 112px;
    }
    .identity {
        align-items: center;
        display: flex;
        gap: 12px;
        justify-content: space-between;
    }
    main {
        gap: 14px;
    }
    .hero {
        min-height: 0;
        padding-bottom: 24px;
        padding-top: 24px;
    }
    h1 {
        font-size: 30px;
        line-height: 1.05;
    }
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .metric, .person, .mini-tile, .notice {
        min-height: 88px;
        padding: 14px;
    }
    .metric strong {
        font-size: 24px;
        overflow-wrap: anywhere;
    }
    .action-grid, .mini-grid, .team-grid, .notice-grid {
        grid-template-columns: 1fr;
    }
    .table-wrap {
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    table, thead, tbody, tr, th, td {
        display: block;
    }
    table {
        min-width: 0;
    }
    thead {
        display: none;
    }
    tbody {
        display: grid;
        gap: 10px;
    }
    tr {
        background: #fff;
        border: 1px solid var(--hairline);
        border-radius: 8px;
        overflow: hidden;
    }
    td {
        align-items: start;
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(94px, 36%) minmax(0, 1fr);
        max-width: none;
        min-height: 44px;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-break: break-word;
    }
    td::before {
        color: var(--muted);
        content: attr(data-label);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }
    .empty {
        display: grid;
        grid-template-columns: 1fr;
        text-align: left;
    }
    .empty::before {
        content: "";
        display: none;
    }
    button {
        width: 100%;
    }
}
@media (max-width: 520px) {
    .sidebar {
        padding: 14px;
    }
    .brand {
        min-height: 40px;
    }
    .brand-mark {
        height: 38px;
        width: 38px;
    }
    main {
        padding: 12px;
    }
    .hero, .surface {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    h1 {
        font-size: 26px;
    }
    .hero p {
        font-size: 14px;
    }
    .metrics {
        gap: 10px;
    }
    .metric {
        gap: 12px;
    }
    .metric strong {
        font-size: 22px;
    }
    input, select {
        font-size: 16px;
    }
    .action-form {
        padding: 14px;
    }
    td {
        gap: 6px;
        grid-template-columns: 1fr;
    }
}
@media (hover: none) and (pointer: coarse) {
    nav a:hover:not(.active) {
        background: transparent;
        color: #333741;
    }
    input, select, button, nav a {
        min-height: 46px;
    }
    .pill {
        min-height: 28px;
    }
}
body {
    background:
        linear-gradient(132deg, rgba(36,180,126,.13) 0%, rgba(245,165,36,.08) 34%, rgba(255,255,255,0) 64%),
        linear-gradient(180deg, #f9fbf7 0%, #eef6f1 48%, #f8fafc 100%);
    color: #182321;
}
.app-shell {
    grid-template-columns: 1fr;
}
.topbar {
    align-items: center;
    background: rgba(255,255,255,.86);
    border-bottom: 1px solid rgba(24,35,33,.10);
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    min-height: 74px;
    padding: 14px max(24px, calc((100vw - 1220px) / 2));
    position: sticky;
    top: 0;
    z-index: 20;
}
.home-mark {
    align-items: center;
    background: #111;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(24,35,33,.18);
    display: grid;
    height: 42px;
    justify-items: center;
    width: 42px;
}
.home-mark span {
    background:
        linear-gradient(90deg, #24b47e 0 36%, transparent 36% 48%, #f5a524 48% 72%, transparent 72%),
        linear-gradient(180deg, #fff 0 100%);
    border-radius: 3px;
    display: block;
    height: 18px;
    width: 18px;
}
.brand-mark {
    background: linear-gradient(135deg, #182321 0%, #111113 100%);
    box-shadow: 0 10px 30px rgba(24,35,33,.20);
}
.brand strong {
    color: #182321;
    font-size: 16px;
}
.brand small {
    color: #6b7c93;
}
nav {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    min-width: 0;
}
nav a {
    color: #425466;
    min-height: 40px;
    padding: 10px 14px;
}
nav a.active {
    background: #182321;
    box-shadow: 0 12px 24px rgba(24,35,33,.18);
    color: #fff;
}
nav a:hover:not(.active) {
    background: rgba(24,35,33,.07);
    color: #182321;
}
.identity {
    border: 1px solid rgba(24,35,33,.10);
    border-radius: 8px;
    margin: 0;
    min-width: 168px;
    padding: 9px 12px;
    text-align: right;
}
.identity span {
    color: #6b7c93;
}
.identity strong {
    color: #182321;
}
main {
    gap: 20px;
    margin: 0 auto;
    max-width: 1220px;
    padding: 34px 24px 72px;
}
.overview {
    display: grid;
    gap: 14px;
}
.overview-main {
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.88)),
        linear-gradient(135deg, rgba(36,180,126,.14), rgba(245,165,36,.10));
    border: 1px solid rgba(24,35,33,.10);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(24,35,33,.08);
    display: grid;
    gap: 18px;
    padding: 18px;
}
.greeting-row {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
}
.greeting-row h1 {
    color: #182321;
    font-size: 30px;
    line-height: 1.1;
    margin: 0;
}
.greeting-row p {
    color: #5c6b66;
    font-size: 15px;
    margin: 8px 0 0;
}
.workspace-line {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 360px);
}
.compact-pills {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.soft-pill {
    align-items: center;
    background: rgba(24,35,33,.07);
    border: 1px solid rgba(24,35,33,.10);
    border-radius: 999px;
    color: #182321;
    display: inline-flex;
    font-weight: 900;
    min-height: 30px;
    padding: 6px 11px;
}
.overview-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(0, 1fr));
}
.summary-card, .balance-tile, .pulse-tile, .digital-card {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(24,35,33,.10);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(24,35,33,.07);
    display: grid;
    gap: 10px;
    min-height: 128px;
    padding: 16px;
}
.summary-card.balance, .balance-tile {
    background: linear-gradient(135deg, #182321, #214c31);
    color: #fff;
}
.summary-card span, .balance-tile span, .pulse-tile span, .digital-card span {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    opacity: .72;
    text-transform: uppercase;
}
.summary-card strong {
    color: #182321;
    font-size: 28px;
    line-height: 1;
    overflow-wrap: anywhere;
}
.summary-card.balance strong, .balance-tile strong {
    color: #fff;
    font-size: 34px;
}
.summary-card small {
    color: #5c6b66;
    font-weight: 800;
}
.summary-card.balance small, .balance-tile small {
    color: rgba(255,255,255,.72);
}
.summary-card.account strong {
    font-size: 23px;
}
.pulse-tile strong {
    color: #182321;
    font-size: 26px;
    line-height: 1;
    overflow-wrap: anywhere;
}
.pulse-tile small, .pulse-tile a {
    color: #5c6b66;
    font-weight: 800;
}
.pulse-tile a {
    color: #0f7f57;
}
.overview-status {
    border-top: 1px solid rgba(24,35,33,.10);
    color: #5c6b66;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
}
.overview-status b {
    color: #182321;
}
.digital-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(300px, 1.1fr) minmax(300px, 1.1fr) minmax(240px, .8fr);
}
.digital-card.primary {
    background:
        linear-gradient(135deg, rgba(15,127,87,.10), rgba(255,255,255,.95));
}
.digital-card.concierge {
    background:
        linear-gradient(135deg, rgba(245,165,36,.13), rgba(255,255,255,.95));
    align-content: start;
}
.digital-card strong {
    color: #182321;
    font-size: 22px;
    line-height: 1.1;
}
.digital-card p {
    color: #5c6b66;
    line-height: 1.5;
    margin: 0;
}
.mini-form {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}
.mini-form textarea {
    min-height: 92px;
}
.login-body {
    min-height: 100vh;
    min-height: 100dvh;
}
.login-shell {
    align-items: center;
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    place-items: center;
}
.login-panel {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(24,35,33,.10);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(24,35,33,.14);
    display: grid;
    gap: 16px;
    max-width: 430px;
    padding: 24px;
    width: 100%;
}
.login-panel h1 {
    color: #182321;
    font-size: 28px;
    line-height: 1.1;
    margin: 6px 0 0;
}
.login-panel p {
    color: #5c6b66;
    margin: 0;
}
.login-form {
    display: grid;
    gap: 12px;
}
.hero {
    align-items: stretch;
    background:
        linear-gradient(117deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 36%),
        linear-gradient(135deg, #182321 0%, #214c31 54%, #2c5a3c 100%);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    box-shadow: 0 28px 60px rgba(24,35,33,.22);
    color: #fff;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    margin: 0;
    min-height: 310px;
    overflow: hidden;
    padding: 42px;
    position: relative;
}
.hero::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(0,163,255,.38), rgba(36,180,126,.18));
    content: "";
    height: 160px;
    position: absolute;
    right: -80px;
    top: -30px;
    transform: rotate(-14deg);
    width: 520px;
}
.hero-copy, .hero-panel {
    position: relative;
    z-index: 1;
}
.hero-copy {
    align-content: end;
    display: grid;
}
.eyebrow {
    color: #78d7ff;
    letter-spacing: .10em;
}
h1 {
    color: inherit;
    font-size: 56px;
    letter-spacing: 0;
    line-height: .96;
    max-width: 760px;
}
.hero p {
    color: rgba(255,255,255,.74);
    font-size: 17px;
    line-height: 1.55;
    margin-top: 18px;
    max-width: 620px;
}
.hero-controls {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.hero-pill {
    align-items: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    min-height: 32px;
    padding: 6px 12px;
}
.hero .pill {
    background: rgba(36,180,126,.16);
    border-color: rgba(96,221,166,.28);
    color: #8cf0bd;
}
.workspace-switch {
    min-width: 270px;
}
.hero .workspace-switch label {
    color: rgba(255,255,255,.68);
}
.hero .workspace-switch select {
    background: rgba(255,255,255,.94);
    border-color: rgba(255,255,255,.32);
    color: #182321;
}
.hero-panel {
    align-self: stretch;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 8px;
    display: grid;
    gap: 24px;
    min-height: 220px;
    padding: 24px;
}
.hero-panel span {
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.hero-panel strong {
    align-self: end;
    color: #fff;
    font-size: 42px;
    line-height: 1;
    overflow-wrap: anywhere;
}
.hero-panel-grid {
    border-top: 1px solid rgba(255,255,255,.16);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 18px;
}
.hero-panel-grid div {
    display: grid;
    gap: 6px;
}
.hero-panel-grid small {
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.hero-panel-grid b {
    color: #fff;
    font-size: 24px;
}
.metrics {
    gap: 14px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.metric, .person, .mini-tile, .notice, .action-form, .table-wrap, .empty-panel {
    border: 1px solid rgba(24,35,33,.10);
    box-shadow: 0 14px 36px rgba(24,35,33,.08);
}
.metric {
    background: rgba(255,255,255,.92);
    min-height: 118px;
    overflow: hidden;
    position: relative;
}
.metric::before {
    background: var(--portal-accent);
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.metric.green::before { background: #24b47e; }
.metric.amber::before { background: #f5a524; }
.metric.red::before { background: #e5484d; }
.metric span, .person span, .mini-tile span, .notice span {
    color: #6b7c93;
    letter-spacing: .02em;
}
.metric strong {
    color: #182321;
    font-size: 28px;
    overflow-wrap: anywhere;
}
.surface {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 8px 0 0;
}
.section-head {
    min-height: 54px;
    gap: 12px;
}
h2 {
    color: #182321;
    font-size: 18px;
    letter-spacing: 0;
}
h3 {
    color: #182321;
    font-size: 15px;
    margin: 0;
}
.connect-form h3 {
    color: #fff;
}
.section-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.table-search {
    min-height: 38px;
    width: min(240px, 100%);
}
.tool-link {
    align-items: center;
    background: #182321;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(24,35,33,.16);
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    min-height: 38px;
    padding: 8px 12px;
}
.table-wrap {
    background: rgba(255,255,255,.94);
}
th {
    background: #f6f9fc;
    color: #6b7c93;
}
td {
    color: #182321;
}
.action-grid {
    gap: 14px;
}
.action-form {
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
input, select {
    border-color: rgba(24,35,33,.16);
    color: #182321;
}
input:focus, select:focus {
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px var(--portal-accent-ring);
    outline: 0;
}
button {
    background: linear-gradient(135deg, #182321 0%, #111113 100%);
    box-shadow: 0 12px 24px rgba(24,35,33,.20);
}
button:hover {
}
.mini-tile, .person, .notice {
    background: rgba(255,255,255,.94);
}
.pill {
    border-radius: 999px;
}
.language-switch {
    align-items: center;
    background: rgba(24,35,33,.06);
    border: 1px solid rgba(24,35,33,.08);
    border-radius: 999px;
    display: flex;
    gap: 4px;
    min-height: 38px;
    padding: 4px;
}
.language-switch a {
    align-items: center;
    border-radius: 999px;
    color: #425466;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-height: 30px;
    min-width: 38px;
}
.language-switch a.active {
    background: #182321;
    color: #fff;
}
textarea {
    background: #fff;
    border: 1px solid rgba(24,35,33,.16);
    border-radius: 8px;
    color: #182321;
    font: inherit;
    min-height: 132px;
    padding: 11px;
    resize: vertical;
    width: 100%;
}
textarea:focus {
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px var(--portal-accent-ring);
    outline: 0;
}
.stats-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.status-card, .account-control-card, .plan-card, .feature-card, .manager-card {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(24,35,33,.10);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(24,35,33,.08);
    display: grid;
    gap: 12px;
    padding: 16px;
}
.stats-grid .status-card {
    grid-column: span 2;
}
.status-card span, .account-control-card span, .plan-card span, .feature-card span, .manager-card span {
    color: #6b7c93;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
.status-card p, .plan-card p, .feature-card p {
    color: #425466;
    line-height: 1.45;
    margin: 0;
}
.feature-card small {
    color: var(--portal-accent-soft-ink);
    font-size: 15px;
    font-weight: 900;
}
.stat-bar {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr auto;
    position: relative;
}
.stat-bar i {
    background: linear-gradient(90deg, var(--portal-accent), #24b47e);
    border-radius: 999px;
    bottom: -5px;
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
}
.account-control-grid, .plan-grid, .feature-grid, .manager-grid {
    display: grid;
    gap: 14px;
}
.account-control-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.account-control-card {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}
.account-control-card form {
    grid-column: 1 / -1;
}
.account-control-card strong, .plan-card strong, .feature-card strong, .manager-card strong {
    color: #182321;
    font-size: 20px;
}
.account-control-card small, .manager-card small {
    color: #6b7c93;
}
.connect-form {
    background: linear-gradient(135deg, #182321 0%, #214c31 100%);
    color: #fff;
}
.connect-form label {
    color: rgba(255,255,255,.75);
}
.plan-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.plan-card.active {
    border-color: rgba(33, 76, 49,.38);
    box-shadow: 0 18px 42px rgba(33, 76, 49,.14);
}
.plan-current {
    align-items: center;
    background: #e9f8f1;
    border-radius: 999px;
    color: #086043;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
}
.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 14px;
}
.manager-grid {
    grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr);
}
@media (max-width: 1120px) {
    .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .summary-card.balance, .balance-tile {
        grid-column: span 2;
    }
    .digital-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .digital-card.concierge {
        grid-column: span 2;
    }
    .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .stats-grid, .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stats-grid .status-card {
        grid-column: span 1;
    }
}
@media (max-width: 920px) {
    .topbar {
        grid-template-columns: 1fr auto;
        padding: 14px 18px;
    }
    .home-mark {
        grid-column: 1;
        grid-row: 1;
    }
    nav {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    nav::-webkit-scrollbar {
        display: none;
    }
    .identity {
        align-items: center;
        display: flex;
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: space-between;
        text-align: left;
    }
    .language-switch {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    main {
        padding: 22px 18px 54px;
    }
    .hero {
        grid-template-columns: 1fr;
        margin: 0;
        padding: 32px;
    }
    h1 {
        font-size: 42px;
    }
    .workspace-switch {
        min-width: 0;
        width: 100%;
    }
    .workspace-line, .overview-grid, .digital-grid, .stats-grid, .feature-grid, .manager-grid {
        grid-template-columns: 1fr;
    }
    .summary-card.balance, .balance-tile, .digital-card.concierge {
        grid-column: auto;
    }
    .compact-pills {
        justify-content: flex-start;
    }
    .greeting-row {
        grid-template-columns: 1fr;
    }
    .section-head {
        align-items: stretch;
        flex-direction: column;
    }
    .section-tools {
        justify-content: flex-start;
    }
    .table-search {
        width: 100%;
    }
}
@media (max-width: 760px) {
    .topbar {
        gap: 12px;
        padding: 12px;
    }
    nav a {
        justify-content: center;
        min-width: 112px;
    }
    main {
        gap: 14px;
        padding: 14px 12px 42px;
    }
    .hero {
        min-height: 0;
        padding: 24px;
    }
    h1 {
        font-size: 34px;
    }
    .hero p {
        font-size: 15px;
    }
    .hero-panel strong {
        font-size: 34px;
    }
    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .overview-main, .summary-card, .balance-tile, .pulse-tile, .digital-card {
        padding: 14px;
    }
    .summary-card.balance strong, .balance-tile strong {
        font-size: 28px;
    }
    .summary-card strong {
        font-size: 22px;
    }
    .pulse-tile strong, .digital-card strong {
        font-size: 20px;
    }
    .table-wrap {
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    table, thead, tbody, tr, th, td {
        display: block;
    }
    table {
        min-width: 0;
    }
    thead {
        display: none;
    }
    tbody {
        display: grid;
        gap: 10px;
    }
    tr {
        background: #fff;
        border: 1px solid rgba(24,35,33,.10);
        border-radius: 8px;
        box-shadow: 0 12px 28px rgba(24,35,33,.08);
        overflow: hidden;
    }
    td {
        align-items: start;
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(94px, 36%) minmax(0, 1fr);
        max-width: none;
        min-height: 44px;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-break: break-word;
    }
    td::before {
        color: #6b7c93;
        content: attr(data-label);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }
}
@media (max-width: 520px) {
    .brand strong {
        font-size: 15px;
    }
    .brand small {
        font-size: 11px;
    }
    nav a {
        min-width: 104px;
    }
    .hero {
        padding: 20px;
    }
    h1 {
        font-size: 30px;
    }
    .hero-panel {
        padding: 18px;
    }
    .hero-panel-grid {
        grid-template-columns: 1fr;
    }
    .metrics {
        gap: 10px;
    }
    .metric {
        min-height: 106px;
        padding: 14px;
    }
    .metric strong {
        font-size: 22px;
    }
    .action-form {
        padding: 14px;
    }
    td {
        gap: 6px;
        grid-template-columns: 1fr;
    }
}
body {
    background: #f4f6f1;
    color: #171717;
}
.app-shell {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
}
.topbar {
    align-items: center;
    background: rgba(250,251,247,.94);
    border-bottom: 1px solid #dfe4d8;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(360px, 1fr) auto auto auto;
    min-height: 68px;
    padding: 10px max(20px, calc((100vw - 1180px) / 2));
    position: sticky;
    top: 0;
    z-index: 30;
}
.home-mark {
    background: #151515;
    border-radius: 8px;
    box-shadow: none;
    height: 40px;
    width: 40px;
}
.home-mark span {
    background:
        linear-gradient(90deg, #f7f7f2 0 42%, transparent 42% 54%, #2dbf83 54% 100%);
    border-radius: 2px;
    height: 16px;
    width: 18px;
}
.topbar nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.topbar nav::-webkit-scrollbar {
    display: none;
}
.topbar nav a {
    border-radius: 8px;
    color: #4e554d;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
    min-height: 36px;
    padding: 8px 10px;
}
.topbar nav a.active,
.topbar nav a:hover {
    background: #151515;
    box-shadow: none;
    color: #fff;
}
.identity {
    background: #fff;
    border: 1px solid #dfe4d8;
    border-radius: 8px;
    margin: 0;
    min-width: 150px;
    padding: 8px 10px;
    text-align: left;
}
.identity span {
    color: #6b7168;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.identity strong {
    color: #171717;
    font-size: 13px;
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.logout-form {
    margin: 0;
}
.logout-form button {
    background: #fff;
    border: 1px solid #dfe4d8;
    box-shadow: none;
    color: #171717;
    min-height: 38px;
    padding: 0 12px;
}
.language-switch {
    background: #ecefe6;
    border: 1px solid #dfe4d8;
    border-radius: 8px;
    min-height: 38px;
}
.language-switch a {
    border-radius: 6px;
    color: #50584f;
    min-height: 30px;
    min-width: 36px;
}
.language-switch a.active {
    background: #151515;
    color: #fff;
}
main {
    display: grid;
    gap: 16px;
    margin: 0 auto;
    max-width: 1180px;
    padding: 22px 20px 64px;
    width: 100%;
}
.overview {
    display: block;
}
.overview-main {
    background: #fff;
    border: 1px solid #dfe4d8;
    border-radius: 8px;
    box-shadow: none;
    display: grid;
    gap: 16px;
    padding: 18px;
}
.greeting-row {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
}
.greeting-row h1 {
    color: #171717;
    font-size: 25px;
    line-height: 1.14;
}
.greeting-row p {
    color: #666f63;
    font-size: 14px;
}
.compact-pills {
    gap: 6px;
}
.soft-pill,
.pill {
    border-radius: 8px;
}
.soft-pill {
    background: #f0f3eb;
    border: 1px solid #dfe4d8;
    color: #171717;
    min-height: 30px;
}
.overview-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.summary-card,
.metric,
.person,
.mini-tile,
.notice,
.action-form,
.status-card,
.account-control-card,
.plan-card,
.feature-card,
.manager-card,
.digital-card,
.empty-panel {
    background: #fff;
    border: 1px solid #dfe4d8;
    border-radius: 8px;
    box-shadow: none;
}
.summary-card {
    display: grid;
    gap: 9px;
    min-height: 122px;
    padding: 15px;
}
.summary-card.balance {
    background: #151515;
    color: #fff;
}
.summary-card span,
.metric span,
.person span,
.mini-tile span,
.notice span,
.status-card span,
.account-control-card span,
.plan-card span,
.feature-card span,
.manager-card span,
.digital-card span {
    color: #697168;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.summary-card.balance span {
    color: rgba(255,255,255,.68);
}
.summary-card strong {
    color: #171717;
    font-size: 25px;
    line-height: 1;
    overflow-wrap: anywhere;
}
.summary-card.balance strong {
    color: #fff;
    font-size: 30px;
}
.summary-card small {
    color: #677064;
    font-weight: 800;
}
.summary-card.balance small {
    color: rgba(255,255,255,.66);
}
.overview-status {
    background: #f7f8f2;
    border: 1px solid #e4e8dc;
    border-radius: 8px;
    color: #5f675d;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
}
.overview-status b {
    color: #171717;
}
.metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.metric {
    display: grid;
    gap: 14px;
    min-height: 96px;
    padding: 14px;
    position: static;
}
.metric::before {
    display: none;
}
.metric strong {
    color: #171717;
    font-size: 23px;
}
.metric.blue strong { color: #0a5db8; }
.metric.green strong { color: #0f7f57; }
.metric.amber strong { color: #9a6408; }
.metric.red strong { color: #ad221f; }
.surface {
    background: #fff;
    border: 1px solid #dfe4d8;
    border-radius: 8px;
    box-shadow: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.section-head {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e6eadf;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 16px;
}
h2 {
    color: #171717;
    font-size: 16px;
}
h3 {
    color: #171717;
}
.digital-grid,
.stats-grid,
.action-grid,
.account-control-grid,
.plan-grid,
.feature-grid,
.manager-grid,
.team-grid,
.notice-grid {
    display: grid;
    gap: 12px;
    padding: 16px;
}
.feature-grid {
    padding-top: 0;
}
.digital-grid {
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) minmax(220px, .8fr);
}
.digital-card {
    min-height: 0;
    padding: 16px;
}
.digital-card.primary {
    background: #f2fbf5;
    border-color: #cce7d3;
}
.digital-card.concierge {
    background: #fff9ec;
    border-color: #eadcb8;
}
.digital-card strong {
    color: #171717;
    font-size: 20px;
}
.digital-card p,
.status-card p,
.plan-card p,
.feature-card p,
.notice p {
    color: #535d51;
}
.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stats-grid .status-card {
    grid-column: span 2;
}
.action-grid,
.account-control-grid,
.plan-grid,
.feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.manager-grid {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
}
.action-form,
.status-card,
.account-control-card,
.plan-card,
.feature-card,
.manager-card {
    padding: 15px;
}
.connect-form {
    background: #151515;
    color: #fff;
}
.connect-form h3 {
    color: #fff;
}
.connect-form label {
    color: rgba(255,255,255,.72);
}
.tool-link,
button {
    background: #151515;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    color: #fff;
}
button:hover,
.tool-link:hover {
    transform: none;
}
input,
select,
textarea {
    border-color: #d7ddd0;
    border-radius: 8px;
}
input:focus,
select:focus,
textarea:focus {
    border-color: #0f7f57;
    box-shadow: 0 0 0 3px rgba(15,127,87,.14);
}
.table-wrap {
    background: #fff;
    border: 1px solid #dfe4d8;
    border-radius: 8px;
    box-shadow: none;
    margin: 16px;
}
th {
    background: #f7f8f2;
    color: #697168;
}
td {
    color: #1f241d;
}
.statement-tools {
    padding: 0;
}
.statement-tools .section-head {
    border-bottom: 0;
}
.section-tools {
    gap: 8px;
}
.table-search {
    min-height: 36px;
}
.login-body {
    background: #f4f6f1;
}
.login-panel {
    border: 1px solid #dfe4d8;
    box-shadow: none;
}
@media (max-width: 1120px) {
    .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }
    .topbar nav {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .language-switch {
        grid-column: 4;
        grid-row: 1;
    }
    .overview-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .summary-card.balance,
    .stats-grid .status-card {
        grid-column: auto;
    }
    .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .digital-grid,
    .manager-grid,
    .profile-security-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .topbar {
        grid-template-columns: auto 1fr auto;
        padding: 10px 12px;
    }
    .topbar nav {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .identity {
        display: none;
    }
    .logout-form {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .logout-form button {
        min-height: 36px;
        width: auto;
    }
    .language-switch {
        grid-column: 3;
        grid-row: 1;
    }
    main {
        gap: 12px;
        padding: 14px 12px 42px;
    }
    .overview-main {
        padding: 12px;
    }
    .overview-grid,
    .metrics,
    .stats-grid,
    .digital-grid,
    .manager-grid {
        grid-template-columns: 1fr;
    }
    .greeting-row {
        grid-template-columns: 1fr;
    }
    .compact-pills {
        justify-content: flex-start;
    }
    .section-head {
        align-items: stretch;
        flex-direction: column;
        justify-content: center;
        padding: 12px;
    }
    .digital-grid,
    .stats-grid,
    .action-grid,
    .account-control-grid,
    .plan-grid,
    .feature-grid,
    .manager-grid,
    .team-grid,
    .notice-grid {
        padding: 12px;
    }
    .table-wrap {
        margin: 12px;
    }
}
@media (max-width: 520px) {
    .topbar nav a {
        min-width: 100px;
    }
    .language-switch a {
        min-width: 32px;
    }
    .greeting-row h1 {
        font-size: 22px;
    }
    .summary-card.balance strong {
        font-size: 26px;
    }
    .summary-card strong,
    .metric strong {
        font-size: 21px;
    }
}
:root {
    --wp-page: #ffffff;
    --wp-surface: #ffffff;
    --wp-surface-soft: #f9fafb;
    --wp-card-hover: #f9fafb;
    --wp-text: #111827;
    --wp-muted: #6b7280;
    --wp-soft-muted: #9ca3af;
    --wp-border: #e5e7eb;
    --wp-border-soft: #f3f4f6;
    --wp-blue: var(--portal-accent);
    --wp-blue-soft: var(--portal-accent-soft);
    --wp-blue-ring: var(--portal-accent-ring);
    --wp-green: #3f8a5b;
    --wp-amber: #b17a32;
    --wp-red: var(--portal-danger);
    --wp-shadow: 0 2px 5px 0 rgba(50,50,93,.10), 0 1px 2px 0 rgba(0,0,0,.07);
    --wp-shadow-lg: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.30);
}
html.dark {
    color-scheme: dark;
    --wp-page: #080f1a;
    --wp-surface: #1f2937;
    --wp-surface-soft: #111827;
    --wp-card-hover: #374151;
    --wp-text: #ffffff;
    --wp-muted: #9ca3af;
    --wp-soft-muted: #6b7280;
    --wp-border: #374151;
    --wp-border-soft: #1f2937;
    --wp-blue: #60a5fa;
    --wp-blue-soft: rgba(30,64,175,.32);
    --wp-blue-ring: rgba(96,165,250,.25);
    --wp-shadow: none;
    --wp-shadow-lg: 0 20px 40px rgba(0,0,0,.35);
}
body,
.login-body {
    background: var(--wp-page);
    color: var(--wp-text);
}
.app-shell {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
}
.topbar {
    align-items: center;
    background: var(--wp-surface);
    border-bottom: 1px solid var(--wp-border-soft);
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    min-height: 56px;
    padding: 0 max(16px, calc((100vw - 1280px) / 2));
    position: sticky;
    top: 0;
    z-index: 50;
}
.brand-logo {
    color: var(--wp-blue);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    padding-right: 10px;
    white-space: nowrap;
}
.topbar nav {
    align-items: center;
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.topbar nav::-webkit-scrollbar {
    display: none;
}
.topbar nav a {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--wp-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.topbar nav a:hover {
    background: var(--wp-surface-soft);
    color: var(--wp-text);
}
.topbar nav a.active {
    background: #111827;
    box-shadow: var(--wp-shadow);
    color: #ffffff;
}
html.dark .topbar nav a.active {
    background: #ffffff;
    color: #111827;
}
.theme-toggle,
.language-button,
.user-menu-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    color: var(--wp-muted);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    transition: background-color .15s ease, color .15s ease;
    width: auto;
}
.theme-toggle:hover,
.language-button:hover,
.user-menu-button:hover,
[data-dropdown].open > .language-button,
[data-dropdown].open > .user-menu-button {
    background: var(--wp-surface-soft);
    color: var(--wp-text);
}
.theme-icon {
    height: 18px;
    width: 18px;
}
.theme-icon-sun {
    display: none;
}
html.dark .theme-icon-moon {
    display: none;
}
html.dark .theme-icon-sun {
    display: block;
}
.chevron {
    height: 14px;
    transition: transform .15s ease;
    width: 14px;
}
[data-dropdown].open .chevron {
    transform: rotate(180deg);
}
.language-switch,
.user-menu {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: initial;
}
.dropdown-menu {
    animation: wpDropdown .15s ease both;
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: 8px;
    box-shadow: var(--wp-shadow-lg);
    display: none;
    min-width: 168px;
    padding: 6px 0;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 80;
}
[data-dropdown].open > .dropdown-menu {
    display: block;
}
.language-menu a,
.user-dropdown a,
.user-dropdown button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--wp-muted);
    display: grid;
    font-size: 13px;
    font-weight: 600;
    gap: 2px 8px;
    grid-template-columns: 22px minmax(0, 1fr);
    justify-content: start;
    min-height: 38px;
    padding: 8px 12px;
    text-align: left;
    transition: background-color .15s ease, color .15s ease;
    width: 100%;
}
.language-menu a strong {
    color: inherit;
    font-size: 13px;
}
.language-menu a small {
    color: var(--wp-soft-muted);
    grid-column: 2;
    line-height: 1.1;
}
.language-menu a:hover,
.user-dropdown a:hover,
.user-dropdown button:hover {
    background: var(--wp-surface-soft);
    color: var(--wp-text);
}
.language-menu a.active {
    background: var(--wp-blue-soft);
    color: var(--wp-blue);
    font-weight: 700;
}
.avatar-initial {
    align-items: center;
    background: linear-gradient(135deg, var(--portal-accent), var(--portal-accent-dark));
    border-radius: 999px;
    color: #fff;
    display: inline-grid;
    font-size: 13px;
    font-weight: 800;
    height: 32px;
    justify-items: center;
    width: 32px;
}
.user-menu-copy {
    display: grid;
    gap: 1px;
    line-height: 1.1;
    max-width: 160px;
    text-align: left;
}
.user-menu-copy small {
    color: var(--wp-soft-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.user-menu-copy strong {
    color: var(--wp-text);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown-user {
    border-bottom: 1px solid var(--wp-border);
    display: grid;
    gap: 2px;
    margin-bottom: 4px;
    padding: 8px 12px 10px;
}
.dropdown-user strong {
    color: var(--wp-text);
    font-size: 14px;
}
.dropdown-user span {
    color: var(--wp-muted);
    font-size: 12px;
}
.logout-form {
    border-top: 1px solid var(--wp-border);
    margin: 4px 0 0;
    padding-top: 4px;
}
.user-dropdown .logout-form button {
    color: #ea580c;
}
main {
    display: grid;
    gap: 24px;
    margin: 0 auto;
    max-width: 1024px;
    padding: 32px 16px 72px;
    width: 100%;
}
.flash {
    animation: wpFadeInUp .35s ease both;
    border-radius: 12px;
}
.workspace-switch select {
    background: var(--wp-surface);
    border-color: var(--wp-border);
    color: var(--wp-text);
    min-height: 40px;
}
.overview,
.metrics,
.surface {
    animation: wpFadeInUp .55s ease both;
}
.overview-main,
.summary-card,
.metric,
.person,
.mini-tile,
.notice,
.action-form,
.status-card,
.account-control-card,
.plan-card,
.feature-card,
.manager-card,
.digital-card,
.empty-panel,
.surface,
.login-panel {
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: 12px;
    box-shadow: none;
    color: var(--wp-text);
}
.overview-main {
    display: grid;
    gap: 20px;
    padding: 20px;
}
.greeting-row {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}
.greeting-row h1,
h1 {
    color: var(--wp-text);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.12;
    margin: 0;
}
.greeting-row p {
    color: var(--wp-muted);
    margin-top: 6px;
}
.soft-pill,
.pill,
.plan-current {
    border-radius: 999px;
}
.soft-pill {
    background: var(--wp-surface-soft);
    border: 1px solid var(--wp-border);
    color: var(--wp-text);
}
.pill.good,
.plan-current {
    background: #dcfce7;
    color: #15803d;
}
html.dark .pill.good,
html.dark .plan-current {
    background: rgba(22,163,74,.18);
    color: #4ade80;
}
.pill.live {
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
}
html.dark .pill.live {
    background: rgba(37,99,235,.22);
    color: #93c5fd;
}
.pill.warn {
    background: #fef3c7;
    color: #b45309;
}
html.dark .pill.warn {
    background: rgba(217,119,6,.20);
    color: #fbbf24;
}
.pill.bad {
    background: #fee2e2;
    color: var(--portal-danger);
}
html.dark .pill.bad {
    background: rgba(220,38,38,.20);
    color: var(--portal-danger);
}
.overview-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.summary-card {
    min-height: 112px;
    padding: 16px;
}
.summary-card.balance {
    background: var(--wp-surface);
    color: var(--wp-text);
}
.summary-card span,
.metric span,
.person span,
.mini-tile span,
.notice span,
.status-card span,
.account-control-card span,
.plan-card span,
.feature-card span,
.manager-card span,
.digital-card span {
    color: var(--wp-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.summary-card strong,
.summary-card.balance strong,
.metric strong {
    color: var(--wp-text);
    font-size: 24px;
    font-weight: 800;
}
.summary-card.balance strong,
.metric.blue strong,
.metric.green strong {
    color: var(--wp-blue);
}
.metric.amber strong {
    color: var(--wp-amber);
}
.metric.red strong {
    color: var(--wp-red);
}
.summary-card small,
.summary-card.balance small {
    color: var(--wp-muted);
}
.overview-status {
    background: var(--wp-surface-soft);
    border: 1px solid var(--wp-border);
    border-radius: 12px;
    color: var(--wp-muted);
    padding: 12px 14px;
}
.overview-status b {
    color: var(--wp-text);
}
.metrics {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.metric {
    min-height: 104px;
    padding: 16px;
}
.surface {
    overflow: hidden;
    padding: 0;
}
.section-head {
    align-items: center;
    background: var(--wp-surface);
    border-bottom: 1px solid var(--wp-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 60px;
    padding: 0 20px;
}
h2,
h3,
.digital-card strong,
.account-control-card strong,
.plan-card strong,
.feature-card strong,
.manager-card strong {
    color: var(--wp-text);
}
h2 {
    font-size: 18px;
    font-weight: 700;
}
.digital-grid,
.stats-grid,
.action-grid,
.account-control-grid,
.plan-grid,
.feature-grid,
.manager-grid,
.team-grid,
.notice-grid {
    display: grid;
    gap: 16px;
    padding: 20px;
}
.digital-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) minmax(220px, .8fr);
}
.digital-card,
.status-card,
.action-form,
.account-control-card,
.plan-card,
.feature-card,
.manager-card,
.person,
.mini-tile,
.notice {
    padding: 20px;
    transition: background-color .15s ease, border-color .15s ease;
}
.digital-card.primary {
    background: var(--wp-blue-soft);
    border-color: rgba(37,99,235,.25);
}
.digital-card.concierge {
    background: var(--wp-surface);
    border-color: var(--wp-border);
}
.digital-card p,
.status-card p,
.plan-card p,
.feature-card p,
.notice p,
.manager-card small,
.account-control-card small {
    color: var(--wp-muted);
}
.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stats-grid .status-card {
    grid-column: span 2;
}
.stat-bar span,
.stat-bar strong {
    color: var(--wp-text);
}
.stat-bar i {
    background: linear-gradient(90deg, var(--portal-accent), var(--portal-accent-dark));
}
.action-grid,
.account-control-grid,
.plan-grid,
.feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.manager-grid {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
}
.connect-form {
    background: var(--wp-surface);
    color: var(--wp-text);
}
.connect-form h3 {
    color: var(--wp-text);
}
.connect-form label {
    color: var(--wp-muted);
}
label {
    color: var(--wp-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}
input,
select,
textarea {
    background: var(--wp-surface);
    border: 1px solid var(--wp-border);
    border-radius: 8px;
    color: var(--wp-text);
    min-height: 42px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px var(--wp-blue-ring);
    outline: 0;
}
button,
.tool-link {
    align-items: center;
    background: var(--portal-accent);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
    color: #fff;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    transition: background-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
button:hover,
.tool-link:hover {
    background: var(--portal-accent-dark);
    transform: none;
}
html.dark button,
html.dark .tool-link {
    background: var(--portal-accent);
}
@media (hover: hover) {
    html.dark button:hover,
    html.dark .tool-link:hover {
        background: var(--portal-accent-dark);
    }
}
.section-tools .tool-link,
.statement-tools .tool-link,
.plan-current {
    min-height: 36px;
}
.table-wrap {
    background: var(--wp-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow-x: auto;
}
table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}
th,
td {
    border-bottom: 1px solid var(--wp-border);
    color: var(--wp-text);
    padding: 14px 16px;
}
th {
    background: var(--wp-surface-soft);
    color: var(--wp-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}
/* Row hover is a POINTER affordance only: iOS Safari latches :hover onto the row
   left under the finger after a tap/scroll, so an un-guarded rule paints a
   "selected" row nobody clicked (catalog leaf opened with a row already lit). */
@media (hover: hover) and (pointer: fine) {
    tr:hover td {
        background: var(--wp-card-hover);
    }
}
.statement-tools .section-head {
    border-bottom: 0;
}
.login-shell {
    padding: 24px;
}
.login-panel {
    max-width: 430px;
    padding: 24px;
}
.login-panel h1 {
    color: var(--wp-text);
    font-size: 28px;
}
.login-panel p {
    color: var(--wp-muted);
}
.login-panel .home-mark {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: var(--wp-blue);
    display: block;
    height: auto;
    width: auto;
}
.login-panel .home-mark::after {
    content: "";
    color: var(--wp-blue);
    font-size: 20px;
    font-weight: 800;
}
.login-panel .home-mark span {
    display: none;
}
.login-controls {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.login-controls .language-switch {
    margin-left: auto;
}
@keyframes wpDropdown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes wpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes wpFadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes wpGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (max-width: 1120px) {
    .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        padding: 8px 16px;
    }
    .topbar nav {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .theme-toggle {
        grid-column: 3;
        grid-row: 1;
    }
    .language-switch {
        grid-column: 4;
        grid-row: 1;
    }
    .user-menu {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .overview-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .digital-grid,
    .manager-grid {
        grid-template-columns: 1fr;
    }
    .stats-grid .status-card {
        grid-column: span 1;
    }
}
@media (max-width: 760px) {
    .topbar {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        padding: 8px 12px;
    }
    .brand-logo {
        font-size: 19px;
    }
    .topbar nav {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .theme-toggle span[data-theme-label],
    .user-menu-copy {
        display: none;
    }
    .identity.user-menu .user-menu-copy {
        display: none !important;
    }
    .identity.user-menu {
        display: block;
    }
    .theme-toggle,
    .language-button,
    .user-menu-button {
        min-height: 34px;
        padding: 6px 8px;
    }
    .avatar-initial {
        height: 30px;
        width: 30px;
    }
    main {
        gap: 16px;
        padding: 20px 12px 48px;
    }
    .overview-grid,
    .metrics,
    .stats-grid,
    .digital-grid,
    .manager-grid {
        grid-template-columns: 1fr;
    }
    .greeting-row h1,
    h1 {
        font-size: 24px;
    }
    .section-head {
        align-items: stretch;
        flex-direction: column;
        justify-content: center;
        padding: 14px 16px;
    }
    .digital-grid,
    .stats-grid,
    .action-grid,
    .account-control-grid,
    .plan-grid,
    .feature-grid,
    .manager-grid,
    .team-grid,
    .notice-grid {
        padding: 16px;
    }
}
@media (max-width: 520px) {
    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }
    .summary-card strong,
    .summary-card.balance strong,
    .metric strong {
        font-size: 22px;
    }
    td {
        background: var(--wp-surface);
    }
    /* Narrow-window hover reset. Pointer-guarded like every other tr:hover rule
       so a touch device never has a row's background repainted by a stuck
       :hover — here it would put --wp-surface over whatever the skin paints. */
    @media (hover: hover) and (pointer: fine) {
        tr:hover td {
            background: var(--wp-surface);
        }
    }
}
:root {
    --cabinet-bg: #f6f8fa;
    --cabinet-panel: #ffffff;
    --cabinet-text: #101828;
    --cabinet-muted: #66758f;
    --cabinet-soft: var(--portal-accent-soft);
    --cabinet-border: #dbe3ef;
    --cabinet-border-soft: #e7edf6;
    --cabinet-primary: var(--portal-accent);
    --cabinet-primary-dark: var(--portal-accent-dark);
    --cabinet-card-shadow: 0 12px 28px rgba(31, 44, 71, .045);
    --cabinet-sidebar: 300px;
}
html.dark {
    --cabinet-bg: #101827;
    --cabinet-panel: #182233;
    --cabinet-text: #f8fbff;
    --cabinet-muted: #9ba8bd;
    --cabinet-soft: rgba(63, 199, 127, .18);
    --cabinet-border: #29374d;
    --cabinet-border-soft: #223047;
    --cabinet-card-shadow: 0 18px 38px rgba(0,0,0,.22);
}
body {
    background: var(--cabinet-bg);
    color: var(--cabinet-text);
}
.app-shell {
    background: var(--cabinet-bg);
    display: grid;
    grid-template-columns: var(--cabinet-sidebar) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
.sidebar {
    background: var(--cabinet-panel);
    border-right: 1px solid var(--cabinet-border);
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: 26px 16px 22px;
    position: sticky;
    top: 0;
    z-index: 40;
}
.sidebar-group {
    display: grid;
    gap: 10px;
}
.sidebar-group-title {
    color: var(--cabinet-muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    padding: 0 12px;
    text-transform: uppercase;
}
.sidebar-nav {
    display: grid;
    gap: 4px;
}
.sidebar-link {
    align-items: center;
    background: transparent;
    border-radius: 12px;
    color: var(--cabinet-text);
    display: grid;
    font-size: 15px;
    font-weight: 780;
    gap: 12px;
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 44px;
    padding: 0 14px;
    transition: background-color .16s ease, color .16s ease;
}
.sidebar-link:hover {
    background: var(--cabinet-soft);
    color: var(--cabinet-primary);
}
.sidebar-link.active {
    background: var(--cabinet-soft);
    color: var(--cabinet-primary);
}
.nav-icon {
    height: 21px;
    width: 21px;
}
.portal-workspace {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
}
.topbar {
    align-items: center;
    background: var(--cabinet-panel);
    border-bottom: 1px solid var(--cabinet-border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 72px;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 35;
}
.breadcrumbs {
    align-items: center;
    color: var(--cabinet-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    gap: 10px;
    min-width: 0;
}
.breadcrumbs b {
    color: #94a3b8;
    font-weight: 750;
}
.breadcrumbs strong {
    color: inherit;
    font-weight: 500;
}
.topbar-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}
.balance-chip {
    align-items: center;
    background: var(--cabinet-soft);
    border-radius: 999px;
    color: var(--cabinet-primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 850;
    gap: 12px;
    min-height: 42px;
    padding: 0 16px;
    white-space: nowrap;
}
.balance-chip span,
.balance-chip strong {
    color: inherit;
    font-size: inherit;
}
.language-button,
.theme-toggle {
    background: var(--cabinet-panel);
    border: 1px solid var(--cabinet-border);
    border-radius: 9px;
    box-shadow: none;
    color: var(--cabinet-text);
    font-size: 14px;
    font-weight: 760;
    min-height: 42px;
    padding: 0 11px;
}
.theme-toggle {
    min-width: 46px;
}
.theme-toggle span[data-theme-label] {
    display: none;
}
.theme-icon {
    height: 21px;
    width: 21px;
}
.language-button .chevron {
    display: none;
}
.language-button > span {
    display: none;
}
.user-menu-button {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: 48px;
    padding: 0;
}
.avatar-initial {
    background: var(--cabinet-primary);
    border-radius: 999px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    height: 48px;
    width: 48px;
}
.dropdown-menu {
    border-color: var(--cabinet-border);
    box-shadow: 0 20px 50px rgba(15,23,42,.14);
}
main {
    background: var(--cabinet-bg);
    display: grid;
    gap: 22px;
    margin: 0;
    max-width: none;
    padding: 40px 36px 70px;
    width: 100%;
}
.overview {
    animation: wpFadeInUp .45s ease both;
}
.overview-main {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 28px;
    padding: 0;
}
.greeting-row {
    display: block;
}
.greeting-row h1 {
    color: var(--cabinet-text);
    font-size: clamp(30px, 2.4vw, 42px);
    font-weight: 900;
    line-height: 1.04;
    margin: 0;
}
.greeting-row p {
    color: var(--cabinet-muted);
    font-size: 18px;
    line-height: 1.35;
    margin: 14px 0 0;
}
.compact-pills,
.overview-status {
    display: none;
}
.overview-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    max-width: 1180px;
}
.summary-card {
    background: var(--cabinet-panel);
    border: 1px solid var(--cabinet-border);
    border-radius: 18px;
    box-shadow: var(--cabinet-card-shadow);
    display: grid;
    gap: 18px;
    min-height: 146px;
    padding: 24px;
}
.summary-card.balance {
    background: var(--cabinet-panel);
}
.summary-card.account {
    grid-column: 1;
}
.summary-card span,
.summary-card.balance span {
    color: var(--cabinet-muted);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.summary-card strong,
.summary-card.balance strong {
    color: var(--cabinet-text);
    font-size: 34px;
    font-weight: 950;
    letter-spacing: 0;
    line-height: .95;
}
.summary-card.account strong {
    font-size: 26px;
}
.summary-card small,
.summary-card.balance small {
    color: var(--cabinet-muted);
    font-size: 15px;
    font-weight: 650;
}
.metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 1180px;
}
.metric,
.surface,
.digital-card,
.status-card,
.action-form,
.account-control-card,
.plan-card,
.feature-card,
.manager-card,
.person,
.mini-tile,
.notice,
.empty-panel {
    background: var(--cabinet-panel);
    border-color: var(--cabinet-border);
    border-radius: 18px;
    box-shadow: var(--cabinet-card-shadow);
}
.surface {
    max-width: 1180px;
}
.section-head {
    border-bottom-color: var(--cabinet-border);
    min-height: 58px;
}
.api-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1180px;
}
@media (max-width: 1280px) {
    :root {
        --cabinet-sidebar: 260px;
    }
    .sidebar-link {
        font-size: 14px;
        gap: 10px;
        min-height: 42px;
    }
    .overview-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
    .metrics,
    .api-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}
@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
    .sidebar {
        border-bottom: 1px solid var(--cabinet-border);
        border-right: 0;
        height: auto;
        overflow: visible;
        padding: 18px 14px;
        position: static;
    }
    .sidebar-group {
        gap: 8px;
    }
    .sidebar-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    .sidebar-link {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 14px;
    }
    .nav-icon {
        height: 22px;
        width: 22px;
    }
    .topbar {
        min-height: 72px;
        padding: 0 16px;
    }
    .breadcrumbs {
        display: none;
    }
    .topbar-actions {
        gap: 8px;
        justify-content: flex-end;
        width: 100%;
    }
    .balance-chip {
        min-height: 44px;
        padding: 0 14px;
    }
    main {
        padding: 34px 16px 54px;
    }
    .greeting-row h1 {
        font-size: 34px;
    }
    .greeting-row p {
        font-size: 19px;
    }
    .overview-grid,
    .metrics {
        grid-template-columns: 1fr;
    }
    .summary-card {
        min-height: 0;
    }
}
@media (max-width: 560px) {
    .sidebar-group-title {
        font-size: 12px;
    }
    .sidebar-link span {
        white-space: nowrap;
    }
    .balance-chip span {
        display: none;
    }
    .language-button {
        min-width: 52px;
    }
    .summary-card {
        padding: 24px;
    }
    .summary-card strong,
    .summary-card.balance strong {
        font-size: 36px;
    }
}
/* Final portal polish layer: compact scale, unified accent, no legacy blue UI. */
:root {
    --portal-bg: #f3f4f8;
    --portal-surface: #ffffff;
    --portal-surface-soft: #ebecf3;
    --portal-hover: #dfece3;
    --portal-text: #17181d;
    --portal-muted: #676872;
    --portal-border: #d4d5df;
    --portal-border-soft: #e4e5ed;
    --portal-accent: #1c5637;
    --portal-accent-dark: #143d27;
    --portal-accent-soft: #dce9e1;
    --portal-accent-ring: rgba(28, 86, 55, .70);
    --portal-good: #1d7941;
    --portal-warn: #ab4f00;
    --portal-danger: #b94241;
    --portal-shadow: 0 8px 22px rgba(31,44,71,.045);
    --portal-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --portal-font-display: "Switzer", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --portal-font-number: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --portal-font-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --portal-heading-font: var(--portal-font-display);
    --portal-page-title-size: clamp(30px, 2.4vw, 42px);
    --portal-page-title-weight: 800;
    --portal-page-title-line-height: 1.08;
    --portal-page-subtitle-size: 16px;
    --portal-page-subtitle-weight: 500;
    --portal-page-subtitle-line-height: 1.4;
    --portal-financial-text: #17181d;
    --portal-display-title-size: clamp(36px, 3.55vw, 50px);
    --portal-display-title-weight: 800;
    --portal-display-subtitle-size: clamp(17px, 1.45vw, 20px);
    --portal-section-title-size: clamp(21px, 1.75vw, 26px);
    --portal-section-title-weight: 760;
    --portal-supporting-size: 14px;
    --portal-supporting-weight: 500;
    --wp-blue: var(--portal-accent);
    --wp-blue-soft: var(--portal-accent-soft);
    --wp-blue-ring: var(--portal-accent-ring);
    --blue: var(--portal-accent);
    --cabinet-primary: var(--portal-accent);
    --cabinet-primary-dark: var(--portal-accent-dark);
    --cabinet-soft: var(--portal-accent-soft);
    --cabinet-sidebar: 224px;
}
html.dark {
    --portal-bg: #0b0f15;
    --portal-surface: #1e242f;
    --portal-surface-soft: #272e3b;
    --portal-hover: #313949;
    --portal-text: #f0f2f6;
    --portal-muted: #aab4c6;
    --portal-border: #2f3745;
    --portal-border-soft: #222834;
    --portal-accent: #35ce85;
    --portal-accent-dark: #24a868;
    --portal-accent-soft: rgba(53, 206, 133, .20);
    --portal-accent-ring: rgba(53, 206, 133, .85);
    --portal-financial-text: #f0f2f6;
}
body,
.app-shell,
.portal-workspace,
main {
    background: var(--portal-bg);
    color: var(--portal-text);
    font-family: var(--portal-font-ui);
}
button,
input,
select,
textarea {
    font-family: var(--portal-font-ui);
}
h1,
h2,
h3 {
    font-family: var(--portal-heading-font);
}
code,
pre,
kbd,
samp {
    font-family: var(--portal-font-code);
}
.app-shell {
    grid-template-columns: var(--cabinet-sidebar) minmax(0, 1fr);
}
.sidebar {
    background: var(--portal-surface);
    border-right: 1px solid var(--portal-border);
    gap: 18px;
    justify-content: stretch;
    min-width: 0;
    padding: 16px 12px;
}
.sidebar * {
    min-width: 0;
}
.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 0;
}
.sidebar-group:last-child {
    flex: 0 0 auto;
}
.sidebar-group-title {
    color: var(--portal-muted);
    font-size: 10px;
    letter-spacing: .12em;
    padding: 0 8px;
}
.sidebar-nav {
    align-items: start;
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    grid-auto-rows: minmax(44px, auto);
    justify-content: stretch;
    justify-items: stretch;
}
.sidebar-group:first-child .sidebar-nav {
    flex: 0 0 auto;
    grid-auto-rows: minmax(44px, auto);
}
.sidebar-link {
    border-radius: 12px;
    color: var(--portal-text);
    font-size: 13px;
    gap: 10px;
    grid-template-columns: 19px minmax(0, 1fr);
    justify-self: stretch;
    min-height: 44px;
    padding: 0 12px;
    position: relative;
    width: 100%;
}
.sidebar-link span {
    line-height: 1.12;
    min-width: 0;
    overflow-wrap: anywhere;
}
.sidebar-link:hover {
    background: var(--portal-hover);
    color: var(--portal-text);
}
.sidebar-link.active {
    background: transparent;
    color: var(--portal-accent-soft-ink);
}
.sidebar-link.active:hover {
    background: var(--portal-hover);
    color: var(--portal-accent-soft-ink);
}
.sidebar-link.active::before {
    background: var(--portal-accent);
    border-radius: 999px;
    content: "";
    height: 20px;
    left: 2px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
}
.nav-icon {
    height: 18px;
    width: 18px;
}
.topbar {
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--portal-border);
    gap: 14px;
    min-height: 54px;
    padding: 0 22px;
}
html.dark .topbar {
    background: rgba(16,20,19,.85);
}
.breadcrumbs {
    color: var(--portal-muted);
    font-size: 13px;
    gap: 8px;
}
.breadcrumbs strong {
    color: inherit;
    font-weight: 500;
}
.topbar-actions {
    gap: 8px;
}
.balance-chip {
    background: var(--portal-accent-soft);
    border: 1px solid rgba(33, 76, 49,.14);
    border-radius: 10px;
    color: var(--portal-text);
    font-size: 13px;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
}
.language-button,
.theme-toggle {
    background: transparent;
    border: 1px solid var(--portal-border);
    border-radius: 11px;
    color: var(--portal-muted);
    font-size: 12px;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px;
}
/* The language flag is the whole control now — make it clearly visible. */
.language-button > span {
    font-size: 21px;
    line-height: 1;
}
.theme-toggle .theme-icon {
    width: 20px;
    height: 20px;
}
.user-menu-button {
    background: transparent;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: var(--portal-muted);
    min-height: 40px;
    padding: 0;
    width: 40px;
}
.language-button:hover,
.theme-toggle:hover,
[data-dropdown].open > .language-button {
    background: var(--portal-surface-soft);
    color: var(--portal-text);
}
.user-menu-button:hover,
[data-dropdown].open > .user-menu-button {
    background: transparent;
    color: var(--portal-text);
    box-shadow: none;
}
.language-button > span,
.language-button .chevron {
    display: inline-block;
}
.language-switch {
    position: relative;
}
.language-menu {
    border-radius: 14px;
    min-width: 250px;
    overflow: hidden;
    padding: 6px;
    right: 0;
    width: 250px;
}
.language-menu a {
    align-items: center;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
}
.language-menu a span {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    font-size: 20px;
    width: 26px;
    flex: none;
}
.language-menu a strong {
    align-self: center;
    font-size: 15px;
    line-height: 1.1;
}
.language-menu a small {
    align-self: center;
    color: var(--portal-muted);
    line-height: 1.15;
}
.chevron {
    height: 13px;
    width: 13px;
}
.theme-icon {
    height: 18px;
    width: 18px;
}
.avatar-initial {
    align-items: center;
    background: var(--portal-accent);
    border: 1px solid color-mix(in srgb, var(--portal-accent) 62%, #ffffff);
    border-radius: 999px;
    color: #ffffff;
    box-shadow: none;
    display: inline-grid;
    font-size: 14px;
    font-weight: 900;
    height: 34px;
    justify-items: center;
    line-height: 1;
    text-transform: uppercase;
    width: 34px;
}
.dropdown-menu {
    background: var(--portal-surface);
    border-color: var(--portal-border);
    box-shadow: 0 16px 34px rgba(31,44,71,.13);
}
.language-menu a.active {
    background: var(--portal-hover);
    color: var(--portal-accent-soft-ink);
}
main {
    align-content: start;
    gap: 14px;
    margin: 0 auto;
    max-width: 1160px;
    padding: 18px 18px 46px 42px;
}
.overview-main {
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 12px;
    padding: 0;
}
.greeting-row {
    align-items: end;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}
.greeting-row h1 {
    font-size: clamp(32px, 3.1vw, 46px);
    letter-spacing: 0;
    line-height: 1.08;
}
.greeting-row p {
    color: var(--portal-muted);
    font-size: 17px;
    margin: 6px 0 0;
}
.compact-pills {
    display: flex;
    gap: 8px;
}
.overview-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
}
.summary-card {
    align-items: center;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    box-shadow: none;
    column-gap: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 92px;
    padding: 15px 20px;
}
.summary-card.balance {
    background: var(--portal-surface);
}
.summary-card.account {
    grid-column: auto;
}
.summary-card span,
.summary-card.balance span {
    color: var(--portal-muted);
    font-size: 12px;
    grid-column: 1;
    letter-spacing: .08em;
}
.summary-card strong,
.summary-card.balance strong {
    color: var(--portal-financial-text);
    font-family: var(--portal-font-number);
    font-size: 26px;
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.summary-card.balance strong {
    color: var(--portal-financial-text);
}
.summary-card.account strong {
    font-size: 24px;
}
.summary-card small,
.summary-card.balance small {
    color: var(--portal-muted);
    font-size: 15px;
    grid-column: 1;
    white-space: nowrap;
}
.overview-status {
    background: transparent;
    border: 0;
    color: var(--portal-muted);
    display: flex;
    gap: 10px;
    padding: 0;
}
.overview-status b {
    color: var(--portal-text);
}
.surface,
.metric,
.digital-card,
.status-card,
.action-form,
.account-control-card,
.plan-card,
.feature-card,
.manager-card,
.person,
.mini-tile,
.notice,
.empty-panel,
.login-panel {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    box-shadow: none;
    color: var(--portal-text);
}
.surface {
    max-width: none;
    overflow: hidden;
    padding: 0;
}
.section-head {
    border-bottom: 1px solid var(--portal-border);
    min-height: 50px;
    padding: 0 16px;
}
h2 {
    color: var(--portal-text);
    font-family: var(--portal-heading-font);
    font-size: var(--portal-section-title-size);
    font-weight: var(--portal-section-title-weight);
    letter-spacing: 0;
    line-height: 1.12;
}
h3,
.digital-card strong,
.account-control-card strong,
.plan-card strong,
.feature-card strong,
.manager-card strong {
    color: var(--portal-text);
    font-size: 17px;
}
.metrics,
.digital-grid,
.stats-grid,
.action-grid,
.account-control-grid,
.plan-grid,
.feature-grid,
.manager-grid,
.team-grid,
.notice-grid,
.api-grid {
    gap: 12px;
}
.digital-grid,
.stats-grid,
.action-grid,
.account-control-grid,
.plan-grid,
.feature-grid,
.manager-grid,
.team-grid,
.notice-grid {
    padding: 16px;
}
.metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: none;
}
.metric {
    min-height: 76px;
    padding: 12px;
}
.metric strong,
.metric.blue strong,
.metric.green strong {
    color: var(--portal-accent-soft-ink);
    font-family: var(--portal-font-number);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}
.metric.amber strong {
    color: var(--portal-warn);
}
.metric.red strong {
    color: var(--portal-danger);
}
.metric.money strong {
    color: var(--portal-financial-text);
}
.metric span,
.person span,
.mini-tile span,
.notice span,
.status-card span,
.account-control-card span,
.plan-card span,
.feature-card span,
.manager-card span,
.digital-card span {
    color: var(--portal-muted);
    font-size: 11px;
    letter-spacing: .04em;
}
.digital-grid {
    grid-template-columns: minmax(230px, 1fr) minmax(230px, 1fr) minmax(210px, .8fr);
}
.digital-card,
.status-card,
.action-form,
.account-control-card,
.plan-card,
.feature-card,
.manager-card,
.person,
.mini-tile,
.notice {
    padding: 14px;
}
.digital-card.primary,
.connect-form {
    background: var(--portal-surface);
    border-color: var(--portal-border);
    color: var(--portal-text);
}
.digital-card p,
.status-card p,
.plan-card p,
.feature-card p,
.notice p,
.manager-card small,
.account-control-card small {
    color: var(--portal-muted);
    font-size: 13px;
    line-height: 1.38;
}
.action-grid,
.account-control-grid,
.plan-grid,
.feature-grid {
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.digital-grid,
.stats-grid,
.manager-grid {
    align-items: start;
}
.action-form {
    gap: 8px;
    min-height: 0;
}
.mini-form {
    gap: 7px;
}
label {
    color: var(--portal-muted);
    font-size: 11px;
    gap: 6px;
    text-transform: none;
}
input,
select,
textarea {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    color: var(--portal-text);
    font-size: 13px;
    min-height: 32px;
    padding: 0 9px;
}
textarea {
    min-height: 68px;
    padding: 8px 9px;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px var(--portal-accent-ring);
    outline: 0;
}
button,
.tool-link {
    background: var(--portal-accent);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 7px 15px rgba(33, 76, 49,.18);
    color: #fff;
    font-size: 13px;
    min-height: 34px;
    padding: 7px 12px;
}
button:hover,
.tool-link:hover {
    background: var(--portal-accent-dark);
    transform: none;
}
.section-tools .tool-link,
.statement-tools .tool-link,
.plan-current {
    min-height: 32px;
}
.stat-bar i {
    background: var(--portal-accent);
}
.plan-card.active {
    border-color: rgba(33, 76, 49,.36);
    box-shadow: 0 0 0 3px var(--portal-accent-ring);
}
.plan-current,
.pill.good {
    background: #dff3ea;
    color: var(--portal-good);
}
.pill.live {
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
}
.pill.warn {
    background: #fbefd8;
    color: var(--portal-warn);
}
.pill.bad {
    background: #fbe7e5;
    color: var(--portal-danger);
}
html.dark .plan-current,
html.dark .pill.good {
    background: rgba(35,132,91,.18);
}
html.dark .pill.warn {
    background: rgba(155,100,36,.18);
}
html.dark .pill.bad {
    background: rgba(179,66,58,.18);
}
.table-wrap {
    background: var(--portal-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
table {
    min-width: 720px;
}
th,
td {
    border-bottom: 1px solid var(--portal-border-soft);
    color: var(--portal-text);
    font-size: 13px;
    padding: 10px 14px;
}
th {
    background: var(--portal-surface-soft);
    color: var(--portal-muted);
    font-size: 11px;
    text-transform: none;
}
/* Pointer-only (see the note above the first tr:hover rule) — on touch this is
   what left a catalog row stuck highlighted. */
@media (hover: hover) and (pointer: fine) {
    tr:hover td {
        background: var(--portal-hover);
    }
}
.table-search {
    min-height: 34px;
    width: min(220px, 100%);
}
.login-shell {
    align-content: center;
    justify-content: center;
    justify-items: stretch;
    max-width: none;
    min-height: 100dvh;
    padding: clamp(18px, 4vw, 40px);
    width: 100%;
}
.login-panel {
    border-radius: 8px;
    gap: 18px;
    max-width: none;
    padding: 28px;
    width: min(420px, calc(100vw - 36px));
}
.login-panel h1 {
    font-size: 26px;
    line-height: 1.12;
}
.login-panel .home-mark {
    background: transparent;
    box-shadow: none;
    height: auto;
    width: auto;
}
.login-panel .home-mark span {
    display: none;
}
.login-panel .home-mark::after {
    color: var(--portal-accent-soft-ink);
    content: "";
    font-size: 19px;
    font-weight: 900;
}
.login-form label {
    color: var(--portal-muted);
    display: grid;
    font-size: 12px;
    font-weight: 750;
    gap: 7px;
    text-transform: uppercase;
}
.login-form input {
    min-height: 44px;
}
.login-form button {
    min-height: 44px;
    width: 100%;
}
.banking-hero {
    display: block;
    padding: 14px 0 28px;
}
.banking-greeting {
    display: grid;
    gap: 12px;
}
.banking-greeting > span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.banking-greeting h1 {
    align-items: baseline;
    color: var(--portal-text);
    display: block;
    font-family: var(--portal-heading-font);
    font-size: clamp(28px, 2.3vw, 38px);
    font-weight: 560;
    line-height: 1.16;
    margin: 0;
}
.banking-greeting h1 em {
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
}
.banking-greeting h1 strong {
    color: var(--portal-text);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
}
.banking-greeting p {
    color: var(--portal-muted);
    font-size: var(--portal-display-subtitle-size);
    font-weight: 430;
    line-height: 1.22;
    margin: 0;
}
.banking-balance-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.total-balance-card,
.wallet-card,
.home-feed-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    box-shadow: var(--portal-shadow);
    color: var(--portal-text);
}
.total-balance-card {
    align-content: space-between;
    background: linear-gradient(135deg, var(--portal-accent-soft) 0%, var(--portal-surface) 72%);
    display: grid;
    gap: 22px;
    min-height: 144px;
    padding: 22px 24px;
}
.total-balance-card span,
.wallet-card span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}
.total-balance-card strong {
    color: var(--portal-financial-text);
    font-family: var(--portal-font-number);
    font-size: clamp(34px, 3.1vw, 46px);
    font-weight: 780;
    letter-spacing: 0;
    line-height: .95;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.total-balance-card small,
.wallet-card small {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 700;
}
.wallet-card {
    display: grid;
    align-content: space-between;
    gap: 22px;
    min-height: 144px;
    padding: 22px 24px;
}
.wallet-card.primary {
    background: linear-gradient(135deg, var(--portal-accent-soft) 0%, var(--portal-surface) 72%);
    border-color: var(--portal-accent);
}
.wallet-card strong {
    color: var(--portal-financial-text);
    font-family: var(--portal-font-number);
    font-size: clamp(24px, 2.2vw, 36px);
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.04;
    overflow-wrap: normal;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wallet-card.primary strong {
    color: var(--portal-financial-text);
}
.home-activity-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-feed-card {
    padding: 20px 24px;
}
.home-feed-head {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
}
.home-feed-head h2,
.home-feed-head h3 {
    color: var(--portal-text);
    font-family: var(--portal-heading-font);
    font-size: calc(var(--portal-section-title-size) - 4px);
    font-weight: var(--portal-section-title-weight);
    letter-spacing: 0;
    margin: 0;
}
.home-feed-head a {
    color: var(--portal-accent-soft-ink);
    font-size: var(--portal-supporting-size);
    font-weight: var(--portal-section-title-weight);
    text-decoration: none;
    white-space: nowrap;
}
.home-feed-list {
    display: grid;
}
.home-feed-row {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 52px minmax(0, 1fr) max-content;
    min-height: 82px;
    padding: 14px 0;
}
.home-feed-row + .home-feed-row {
    border-top: 1px solid var(--portal-border-soft);
}
.home-feed-icon {
    align-items: center;
    background: #dceee3;
    border: 0;
    border-radius: 13px;
    box-shadow: none;
    display: grid;
    height: 52px;
    justify-items: center;
    position: relative;
    width: 52px;
}
.home-feed-icon::after {
    display: none;
}
.home-feed-icon svg {
    height: 23px;
    stroke-width: 2;
    width: 23px;
}
.home-feed-icon.order {
    background: #dceee3;
    color: var(--portal-accent-soft-ink);
}
.home-feed-icon.order::after {
    background: var(--portal-accent);
}
.home-feed-icon.movement {
    background: #fee2e2;
    color: var(--portal-danger);
}
.home-feed-icon.movement::after {
    background: var(--portal-accent);
}
.home-feed-icon.movement.negative {
    background: #fee2e2;
    color: var(--portal-danger);
}
.home-feed-icon.movement.negative::after {
    background: var(--portal-danger);
}
.home-feed-icon.movement.positive {
    background: #dceee3;
    color: var(--portal-good);
}
.home-feed-icon.movement.positive::after {
    background: var(--portal-good);
}
.home-feed-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.home-feed-copy strong {
    color: var(--portal-text);
    font-size: 16px;
    font-weight: 760;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-feed-copy small {
    color: var(--portal-muted);
    font-size: 13px;
    font-weight: 520;
}
.amount {
    font-family: var(--portal-font-ui);
    font-size: 19px;
    font-feature-settings: "tnum" 1, "kern" 1;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}
.account-overview-card strong {
    font-family: var(--portal-heading-font);
    font-size: clamp(18px, 1.5vw, 24px);
    font-variant-numeric: normal;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.1;
}
.amount.negative {
    color: var(--portal-danger);
}
.amount.positive {
    color: var(--portal-good);
}
.amount.neutral {
    color: var(--portal-muted);
}
.home-feed-empty {
    color: var(--portal-muted);
    font-weight: 800;
    padding: 24px 0;
}
html.dark .total-balance-card {
    background: linear-gradient(135deg, var(--portal-accent-soft) 0%, var(--portal-surface) 72%);
}
html.dark .wallet-card {
    background: var(--portal-surface);
}
html.dark .wallet-card.primary {
    background: linear-gradient(135deg, var(--portal-accent-soft) 0%, var(--portal-surface) 72%);
    border-color: var(--portal-accent);
}
html.dark .home-feed-icon.order {
    background: rgba(63, 199, 127,.18);
    color: var(--portal-accent-soft-ink);
}
html.dark .home-feed-icon.movement {
    background: rgba(248,113,113,.16);
    color: var(--portal-danger);
}
html.dark .home-feed-icon.movement.negative {
    background: rgba(248,113,113,.16);
    color: var(--portal-danger);
}
html.dark .home-feed-icon.movement.positive {
    background: rgba(63, 199, 127,.18);
    color: var(--portal-accent-soft-ink);
}

/* Home financial feeds (orders + balance movements) — refined banking/exchange
   styling: circular badges, lighter type weights, tabular amounts. Scoped to
   .home-financials so marketplace feeds reusing .home-feed-row stay untouched. */
.home-financials .home-feed-row {
    gap: 14px;
    grid-template-columns: 44px minmax(0, 1fr) max-content;
    min-height: 60px;
    padding: 12px 0;
}
.home-financials .home-feed-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.home-financials .home-feed-icon svg {
    width: 17px;
    height: 17px;
}
.home-financials .home-feed-copy {
    gap: 3px;
}
.home-financials .home-feed-copy strong {
    font-size: 15px;
    font-weight: 560;
    letter-spacing: -0.01em;
}
.home-financials .home-feed-copy small {
    font-size: 12.5px;
    font-weight: 450;
    letter-spacing: 0.01em;
}
.home-financials .amount {
    font-size: 16px;
    font-weight: 600;
}
.home-financials .home-feed-empty {
    font-weight: 500;
    padding: 20px 0;
}
/* Balance-movement rows are links into the transactions section — make the
   affordance clear without disturbing the row grid. */
.home-financials .home-feed-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    margin-inline: -12px;
    padding-inline: 12px;
    border-radius: 12px;
    transition: background-color .15s ease;
}
.home-financials .home-feed-link:hover {
    background: var(--portal-surface-soft);
}
.catalog-showcase {
    display: grid;
    gap: 22px;
}
.catalog-heading {
    display: grid;
    gap: 10px;
}
.catalog-heading h1 {
    color: var(--portal-text);
    font-size: clamp(34px, 3vw, 48px);
    line-height: 1.05;
    margin: 0;
}
.catalog-heading p {
    color: var(--portal-muted);
    font-size: 19px;
    margin: 0;
}
.catalog-search {
    align-items: center;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    box-shadow: var(--portal-shadow);
    display: grid;
    gap: 14px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    min-height: 64px;
    padding: 0 20px;
}
.catalog-search span,
.catalog-search strong {
    color: var(--portal-muted);
}
.catalog-search svg {
    height: 24px;
    width: 24px;
}
.catalog-search input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 18px;
    min-height: 48px;
    padding: 0;
}
.catalog-search input:focus {
    box-shadow: none;
}
.catalog-search strong {
    font-size: 14px;
    white-space: nowrap;
}
.catalog-category-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.catalog-category-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 18px;
    box-shadow: var(--portal-shadow);
    color: var(--portal-text);
    display: grid;
    min-height: 420px;
    overflow: hidden;
    text-decoration: none;
}
.catalog-art {
    align-items: center;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.72), transparent 30%),
        linear-gradient(145deg, #eef4ff 0%, #f8f7ff 100%);
    display: grid;
    min-height: 300px;
    padding: 28px;
    place-items: center;
    position: relative;
}
.catalog-art-symbol {
    align-items: center;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 28px;
    color: var(--portal-accent-soft-ink);
    display: grid;
    height: 116px;
    justify-items: center;
    width: 116px;
    z-index: 1;
}
.catalog-art-symbol svg {
    height: 58px;
    width: 58px;
}
.catalog-art > strong {
    bottom: 24px;
    color: rgba(17,24,39,.08);
    font-size: 100px;
    font-weight: 900;
    line-height: .8;
    position: absolute;
    right: 24px;
}
.catalog-card-copy {
    background: var(--portal-surface);
    border-top: 1px solid var(--portal-border-soft);
    display: grid;
    gap: 8px;
    padding: 22px;
}
.catalog-card-copy strong {
    color: var(--portal-text);
    font-size: 23px;
    line-height: 1.08;
}
.catalog-card-copy small {
    color: var(--portal-muted);
    font-size: 15px;
}
.catalog-category-card.telegram .catalog-art {
    background: linear-gradient(145deg, #dff5f1 0%, #eef6ff 100%);
}
.catalog-category-card.gifts .catalog-art {
    background: linear-gradient(145deg, #f2effb 0%, #edf7f4 100%);
}
.catalog-category-card.topup .catalog-art {
    background: linear-gradient(145deg, #e8f7ed 0%, #f7fbf4 100%);
}
.catalog-category-card.software .catalog-art {
    background: linear-gradient(145deg, #eff4fb 0%, #f6f7fb 100%);
}
.catalog-category-card.ads .catalog-art {
    background: linear-gradient(145deg, #fbf1dc 0%, #f8fbf6 100%);
}
.catalog-category-card.manager .catalog-art {
    background: linear-gradient(145deg, #e8f2f1 0%, #f8fafc 100%);
}
.profile-management {
    display: grid;
    gap: 14px;
}
.profile-management-head {
    display: grid;
    gap: 8px;
    padding: 4px 0 2px;
}
.profile-management-head span,
.security-card-head span,
.security-form span,
.inline-security-form span,
.totp-setup span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.profile-management-head h2 {
    color: var(--portal-text);
    font-size: 24px;
    margin: 0;
}
.profile-management-head p,
.security-card p {
    color: var(--portal-muted);
    line-height: 1.5;
    margin: 0;
}
.profile-security-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.security-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    display: grid;
    gap: 14px;
    padding: 16px;
}
.security-card-head {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}
.security-card-head strong {
    color: var(--portal-text);
    display: block;
    font-size: 18px;
    margin-top: 4px;
}
.security-form,
.inline-security-form,
.totp-setup {
    display: grid;
    gap: 10px;
}
.authenticator-open-button {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,250,249,.9)),
        var(--portal-surface-soft);
    border: 1px solid var(--portal-accent-ring);
    border-radius: 12px;
    box-shadow:
        0 12px 28px rgba(31,44,71,.08),
        inset 0 0 0 1px rgba(255,255,255,.7);
    color: var(--portal-text);
    display: grid;
    gap: 4px;
    min-height: 74px;
    overflow: hidden;
    padding: 14px;
    position: relative;
    text-decoration: none;
}
.authenticator-open-button::before {
    background: var(--portal-accent);
    border-radius: 999px;
    content: "";
    height: 10px;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 10px;
}
.authenticator-open-button:hover {
    border-color: var(--portal-accent);
    box-shadow:
        0 16px 32px rgba(31,44,71,.11),
        0 0 0 4px var(--portal-accent-ring);
}
.authenticator-open-button strong {
    color: var(--portal-text);
    font-size: 16px;
    font-weight: 860;
    line-height: 1.2;
}
.totp-setup-note {
    color: var(--portal-muted);
    font-size: 13px;
    line-height: 1.45;
}
.security-form label,
.inline-security-form label,
.totp-setup label {
    display: grid;
    gap: 6px;
}
.totp-setup code {
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    color: var(--portal-text);
    display: block;
    font-family: var(--portal-font-code);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    padding: 10px;
}
.session-list {
    display: grid;
    gap: 8px;
}
.session-row {
    align-items: center;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 68px;
    padding: 10px 12px;
}
.session-row strong,
.session-row span {
    display: block;
}
.session-row strong {
    color: var(--portal-text);
}
.session-row span,
.session-current {
    color: var(--portal-muted);
    font-size: 12px;
}
.ghost-danger {
    background: rgba(179,66,58,.08);
    color: var(--portal-danger);
    border: 1px solid rgba(179,66,58,.32);
    border-radius: 10px;
}
.ghost-danger:hover {
    background: rgba(179,66,58,.15);
    border-color: var(--portal-danger);
    color: var(--portal-danger);
}
.user-dropdown {
    border-radius: 14px;
    min-width: 240px;
    overflow: hidden;
    padding: 8px;
    width: 240px;
}
.dropdown-user {
    border-bottom: 1px solid var(--portal-border);
    gap: 3px;
    margin: 0 0 6px;
    padding: 10px 10px 12px;
}
.dropdown-user strong {
    color: var(--portal-text);
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdown-user span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.user-dropdown a,
.user-dropdown .logout-form button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    color: var(--portal-muted);
    display: flex;
    font-size: 14px;
    font-weight: 700;
    justify-content: flex-start;
    min-height: 38px;
    padding: 0 10px;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
.user-dropdown a:hover,
.user-dropdown .logout-form button:hover {
    background: var(--portal-hover);
    color: var(--portal-text);
}
.logout-form {
    border-top: 1px solid var(--portal-border);
    margin: 6px 0 0;
    padding: 6px 0 0;
}
.user-dropdown .logout-form button {
    color: var(--portal-danger);
}
.user-dropdown .logout-form button:hover {
    background: rgba(179,66,58,.10);
    color: var(--portal-danger);
}
/* No focus ring anywhere — buttons/rows/cards stay static; the press animation
   is the only feedback. (Removed the ring entirely; an override lost in Safari.)
   Flat controls: drop outline + the border/box-shadow that turned accent. */
button:focus,
button:focus-visible,
.settings-list .settings-row:focus,
.settings-list .settings-row:focus-visible,
.language-button:focus,
.language-button:focus-visible,
.theme-toggle:focus,
.theme-toggle:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: var(--portal-border);
}
.sidebar-link:focus,
.sidebar-link:focus-visible {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}
/* Cards/links keep their resting shadow — just kill the outline. */
a:focus,
a:focus-visible,
.user-menu-button:focus,
.user-menu-button:focus-visible,
.catalog-category-card:focus,
.catalog-category-card:focus-visible,
.tool-link:focus,
.tool-link:focus-visible,
.quick-action-card:focus,
.quick-action-card:focus-visible {
    outline: none;
}
.user-dropdown .logout-form button:focus-visible {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(179,66,58,.18);
}
/* Page-enter (wprovider-rise on <main>) stays disabled site-wide: the owner has
   deliberately moved away from entrance animations (login entrance + PJAX were
   dropped). This blanket guard keeps that intent; ambient/lifecycle loops opt
   back in with their own `!important`. */
.app-shell *,
.login-shell * {
    animation: none !important;
}
html.dark button,
html.dark .tool-link {
    background: var(--portal-accent);
    color: var(--portal-accent-ink);
}
@media (hover: hover) {
    html.dark button:hover,
    html.dark .tool-link:hover {
        background: var(--portal-accent-dark);
        color: var(--portal-accent-ink);
    }
}
html.dark .ghost-danger {
    background: rgba(248,113,113,.12);
    color: var(--portal-danger);
    border: 1px solid rgba(248,113,113,.34);
}
html.dark .ghost-danger:hover {
    background: rgba(248,113,113,.22);
    border-color: var(--portal-danger);
    color: var(--portal-danger);
}
html.dark .language-button,
html.dark .theme-toggle {
    background: transparent;
    border-color: var(--portal-border);
    color: var(--portal-muted);
}
html.dark .user-menu-button {
    background: transparent;
    border: 0;
    color: var(--portal-muted);
}
html.dark .language-button:hover,
html.dark .theme-toggle:hover,
html.dark [data-dropdown].open > .language-button {
    background: var(--portal-hover);
    color: var(--portal-text);
}
html.dark .user-menu-button:hover,
html.dark [data-dropdown].open > .user-menu-button {
    background: transparent;
    color: var(--portal-text);
    box-shadow: none;
}
html.dark .avatar-initial {
    background: var(--portal-accent);
    border-color: color-mix(in srgb, var(--portal-accent) 58%, #0f172a);
    color: #ffffff;
}
html.dark .balance-chip {
    background: var(--portal-accent-soft);
    border-color: rgba(63, 199, 127,.22);
    color: var(--portal-text);
}
html.dark .sidebar-link {
    color: var(--portal-text);
}
html.dark .sidebar-link:hover {
    background: rgba(148,163,184,.10);
    color: var(--portal-text);
}
html.dark .sidebar-link.active {
    background: transparent;
    color: var(--portal-accent-soft-ink);
}
html.dark .sidebar-link.active:hover {
    background: rgba(148,163,184,.10);
    color: var(--portal-accent-soft-ink);
}
html.dark .dropdown-menu {
    background: var(--portal-surface);
    border-color: var(--portal-border);
}
html.dark .catalog-art {
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(145deg, #152431 0%, #111a24 100%);
}
html.dark .catalog-art-symbol {
    background: rgba(63, 199, 127,.12);
    border-color: rgba(63, 199, 127,.20);
}
html.dark .catalog-art > strong {
    color: rgba(255,255,255,.06);
}
html.dark .catalog-card-copy {
    background: var(--portal-surface);
}
@media (max-width: 1280px) {
    :root {
        --cabinet-sidebar: 196px;
    }
    main {
        max-width: 1100px;
    }
}
@media (max-width: 1040px) {
    .banking-balance-grid,
    .home-activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .total-balance-card {
        grid-template-columns: 1fr;
    }
    .catalog-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .digital-grid,
    .manager-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
    .sidebar {
        border-bottom: 1px solid var(--portal-border);
        border-right: 0;
        gap: 12px;
        padding: 14px;
        position: static;
    }
    .sidebar-group,
    .sidebar-group:last-child {
        flex: 0 0 auto;
    }
    .sidebar-nav {
        display: flex;
        gap: 6px;
        margin: 0 -14px;
        overflow-x: auto;
        padding: 0 14px 4px;
        scroll-padding: 14px;
        scrollbar-width: none;
    }
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    .sidebar-link {
        flex: 0 0 auto;
        min-height: 44px;
        width: auto;
    }
    .sidebar-link span {
        overflow-wrap: normal;
        white-space: nowrap;
    }
    .topbar {
        min-height: 54px;
        padding: 0 14px;
    }
    .breadcrumbs {
        display: none;
    }
    .topbar-actions {
        justify-content: flex-end;
        width: 100%;
    }
    main {
        max-width: none;
        padding: 18px 14px 44px;
    }
    .greeting-row {
        align-items: start;
    }
}
@media (max-width: 640px) {
    :root {
        --portal-display-title-size: 32px;
        --portal-display-subtitle-size: 18px;
        --portal-section-title-size: 22px;
        --portal-page-title-size: 30px;
        --portal-page-subtitle-size: 15px;
        --portal-supporting-size: 14px;
    }
    .sidebar {
        gap: 9px;
        padding: 12px 10px;
    }
    .sidebar-group {
        gap: 5px;
    }
    .sidebar-group-title {
        font-size: 10px;
        padding: 0 6px;
    }
    .sidebar-nav {
        gap: 4px;
        margin: 0 -10px;
        padding: 0 10px 3px;
        scroll-padding: 10px;
    }
    .sidebar-link {
        font-size: 12px;
        gap: 6px;
        min-height: 40px;
        padding: 0 8px;
    }
    .nav-icon {
        height: 16px;
        width: 16px;
    }
    .catalog-category-grid,
    .banking-balance-grid {
        grid-template-columns: 1fr;
    }
    .session-row {
        align-items: stretch;
        flex-direction: column;
    }
    .banking-hero {
        align-items: start;
        grid-template-columns: 1fr;
    }
    .membership-card {
        justify-items: start;
        min-width: 0;
        text-align: left;
    }
    .total-balance-card,
    .wallet-card,
    .home-feed-card {
        border-radius: 14px;
    }
    .total-balance-card {
        grid-template-columns: 1fr;
    }
    .wallet-card strong {
        white-space: normal;
    }
    .home-feed-card {
        padding: 16px;
    }
    .home-feed-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }
    .home-feed-row .amount {
        grid-column: 2;
        justify-self: start;
    }
    .home-feed-icon {
        height: 42px;
        width: 42px;
    }
    .home-feed-icon svg {
        height: 18px;
        width: 18px;
    }
    .catalog-heading h1 {
        font-size: 34px;
    }
    .catalog-heading p {
        font-size: 16px;
    }
    .catalog-search {
        grid-template-columns: 22px minmax(0, 1fr);
        min-height: 54px;
        padding: 0 14px;
    }
    .catalog-search strong {
        display: none;
    }
    .catalog-search input {
        font-size: 15px;
    }
    .catalog-category-card {
        min-height: 320px;
    }
    .catalog-art {
        min-height: 220px;
    }
    .catalog-art-symbol {
        border-radius: 22px;
        height: 90px;
        width: 90px;
    }
    .catalog-art-symbol svg {
        height: 44px;
        width: 44px;
    }
    .catalog-art > strong {
        font-size: 72px;
    }
    .catalog-card-copy strong {
        font-size: 20px;
    }
    .summary-card {
        min-height: 0;
    }
    .balance-chip span {
        display: none;
    }
    .action-grid,
    .account-control-grid,
    .plan-grid,
    .feature-grid,
    .team-grid,
    .notice-grid {
        grid-template-columns: 1fr;
    }
    table {
        min-width: 0;
    }
    table,
    thead,
    tbody,
    tr,
    th,
    td {
        display: block;
    }
    /* In the stacked card layout the fixed desktop min-width would force a
       horizontal scroll and clip values — let cards fill the viewport. The
       wrapper selector outranks the base `.ns-data-table { min-width: 860px }`
       that is declared later in the file. */
    .ns-table-wrap .ns-data-table {
        min-width: 0;
    }
    thead {
        display: none;
    }
    tbody {
        display: grid;
        gap: 8px;
        padding: 10px;
    }
    tr {
        background: var(--portal-surface);
        border: 1px solid var(--portal-border);
        border-radius: 10px;
        overflow: hidden;
    }
    td {
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(86px, 34%) minmax(0, 1fr);
        white-space: normal;
    }
    td::before {
        color: var(--portal-muted);
        content: attr(data-label);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }
}

/* Client cabinet layer. */
:root {
    --portal-bg: #f3f4f8;
    --portal-surface: #ffffff;
    --portal-surface-soft: #ebecf3;
    --portal-hover: #dfece3;
    --portal-text: #17181d;
    --portal-muted: #676872;
    --portal-border: #d4d5df;
    --portal-border-soft: #e4e5ed;
    --portal-accent: #1c5637;
    --portal-accent-dark: #143d27;
    --portal-accent-soft: #dce9e1;
    --portal-accent-ring: rgba(28, 86, 55, .70);
    --portal-good: #1d7941;
    --portal-warn: #ab4f00;
    --portal-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px -10px rgba(15,23,42,.18);
    --cabinet-sidebar: 264px;
}
html.dark {
    --portal-bg: #0b0f15;
    --portal-surface: #1e242f;
    --portal-surface-soft: #272e3b;
    --portal-hover: #313949;
    --portal-text: #f0f2f6;
    --portal-muted: #aab4c6;
    --portal-border: #2f3745;
    --portal-border-soft: #222834;
    --portal-accent: #35ce85;
    --portal-accent-dark: #24a868;
    --portal-accent-soft: rgba(53, 206, 133, .20);
    --portal-accent-ring: rgba(53, 206, 133, .85);
}
body {
    background: var(--portal-bg);
}
.app-shell {
    grid-template-columns: var(--cabinet-sidebar) minmax(0, 1fr);
}
.sidebar {
    padding: 22px 14px;
}
.sidebar-link {
    border-radius: 10px;
    color: var(--portal-text);
}
.sidebar-link.active {
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
}
.sidebar-link.active::before {
    display: none;
}
.nav-icon {
    stroke-width: 1.9;
}
.topbar {
    background: rgba(255,255,255,.86);
    min-height: 61px;
    padding: 0 24px;
}
html.dark .topbar {
    background: rgba(16,20,19,.85);
}
.balance-chip {
    background: var(--portal-accent-soft);
    border: 0;
    border-radius: 999px;
    color: var(--portal-accent-soft-ink);
    min-height: 34px;
}
.language-button,
.theme-toggle {
    border-radius: 8px;
}
.avatar-initial {
    background: var(--portal-accent);
    border-color: var(--portal-accent);
    color: #ffffff;
}
.identity .avatar-initial,
.user-menu-button .avatar-initial {
    align-items: center;
    color: #ffffff;
    display: inline-grid;
    font-size: 14px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    line-height: 1;
    width: 34px;
}
main {
    max-width: 1280px;
    padding: 28px 28px 70px;
}
.surface,
.total-balance-card,
.wallet-card,
.home-feed-card,
.catalog-search,
.catalog-category-card,
.empty-panel,
.security-card {
    border-color: var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
}
.section-head {
    background: var(--portal-surface);
    min-height: 60px;
    padding: 0 20px;
}
.section-head p {
    color: var(--portal-muted);
    font-size: 13px;
    line-height: 1.45;
    margin: 6px 0 0;
}
button:disabled,
input:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: .58;
}
button:disabled,
button:disabled:hover,
.api-endpoint-card button:disabled,
.service-form-card button:disabled,
.service-offer-card button:disabled,
.deposit-requisite button:disabled {
    background: #eef2f7;
    border-color: #d9e2ef;
    box-shadow: none;
    color: #708098;
    transform: none;
}
.catalog-showcase {
    gap: 16px;
}
.catalog-heading h1 {
    font-size: clamp(30px, 2.4vw, 42px);
}
.catalog-heading p {
    font-size: 16px;
}
.catalog-search {
    border-radius: 12px;
    min-height: 50px;
    padding: 0 16px;
}
.catalog-search input {
    font-size: 15px;
    min-height: 46px;
}
.catalog-search strong {
    font-size: 12px;
}
.catalog-category-grid {
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.catalog-category-card {
    appearance: none;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    color: var(--portal-text);
    cursor: pointer;
    display: grid;
    font: inherit;
    min-height: 318px;
    overflow: hidden;
    padding: 0;
    text-align: left;
    text-decoration: none;
    width: 100%;
}
.catalog-category-card.active {
    border-color: rgba(33, 76, 49,.42);
    box-shadow: 0 0 0 3px var(--portal-accent-ring), var(--portal-shadow);
}
.catalog-category-card:hover {
    background: var(--portal-surface);
    color: var(--portal-text);
    transform: none;
}
.catalog-art {
    min-height: 242px;
    overflow: hidden;
    width: 100%;
}
.catalog-region-badge {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 8px;
    color: var(--portal-text);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    left: 16px;
    min-height: 28px;
    padding: 0 9px;
    position: absolute;
    top: 16px;
    z-index: 2;
}
.catalog-art-symbol {
    background: rgba(255,255,255,.72);
    border-radius: 24px;
    height: 96px;
    width: 96px;
}
.catalog-art-symbol svg {
    height: 46px;
    width: 46px;
}
.catalog-art > strong {
    font-size: 78px;
}
.catalog-card-copy {
    gap: 5px;
    padding: 16px;
}
.catalog-card-copy strong {
    font-size: 16px;
}
.catalog-card-copy small {
    font-size: 13px;
}
.catalog-category-card.apple .catalog-art { background: linear-gradient(145deg, #f2f4ff 0%, #ffffff 100%); }
.catalog-category-card.steam .catalog-art { background: linear-gradient(145deg, #dbeafe 0%, #eef2ff 100%); }
.catalog-category-card.telegram .catalog-art { background: linear-gradient(145deg, #dff7ff 0%, #eef2ff 100%); }
.catalog-category-card.playstation .catalog-art { background: linear-gradient(145deg, #dbeafe 0%, #f8fafc 100%); }
.catalog-category-card.xbox .catalog-art { background: linear-gradient(145deg, #dcfce7 0%, #f8fafc 100%); }
.catalog-category-card.google .catalog-art { background: linear-gradient(145deg, #fef3c7 0%, #eef2ff 100%); }
.catalog-category-card.roblox .catalog-art { background: linear-gradient(145deg, #fee2e2 0%, #f8fafc 100%); }
.catalog-category-card.mobile .catalog-art { background: linear-gradient(145deg, #fde68a 0%, #dbeafe 100%); }
.catalog-category-card.social .catalog-art { background: linear-gradient(145deg, #f5d0fe 0%, #eef2ff 100%); }
.catalog-category-card.ads .catalog-art { background: linear-gradient(145deg, #ffedd5 0%, #f8fafc 100%); }
.catalog-category-card.software .catalog-art { background: linear-gradient(145deg, #e0f2fe 0%, #f8fafc 100%); }
.catalog-category-card.manager .catalog-art { background: linear-gradient(145deg, #ccfbf1 0%, #eef2ff 100%); }
.catalog-category-card {
    cursor: default;
}
.catalog-art {
    background: #f8fafc;
    display: block;
    min-height: 232px;
}
.catalog-art img {
    display: block;
    height: 100%;
    min-height: 232px;
    object-fit: cover;
    width: 100%;
}
html.dark .catalog-art {
    background: #111827;
}
.service-operation-grid,
.service-offer-grid,
.mini-market-grid,
.deposit-method-grid,
.marketplace-blueprint-grid,
.api-endpoint-grid {
    box-sizing: border-box;
    display: grid;
    gap: 16px;
    padding: 20px;
}
.ns-service-page .service-operation-grid,
.ns-api-page .api-endpoint-grid {
    padding: 0;
}
.ns-service-page .service-operation-grid {
    grid-template-columns: minmax(280px, .86fr) minmax(0, 1fr);
}
.direct-topup-request-grid {
    grid-template-columns: minmax(320px, .92fr) minmax(260px, .58fr);
    padding: 0;
}
.steam-gift-builder {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .74fr);
}
.steam-gift-results {
    display: grid;
    gap: 14px;
    min-width: 0;
}
.steam-gift-section-head {
    align-items: end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.steam-gift-section-head span,
.steam-gift-order-card > span,
.steam-gift-price-list span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.steam-gift-section-head strong,
.steam-gift-order-card > strong {
    color: var(--portal-text);
    display: block;
    font-size: 20px;
    margin-top: 4px;
}
.steam-gift-section-head small,
.steam-gift-order-card small,
.steam-gift-order-card p {
    color: var(--portal-muted);
    line-height: 1.45;
}
.steam-gift-result-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.steam-gift-app-card,
.steam-gift-order-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
}
.steam-gift-app-card {
    align-content: start;
    display: grid;
    gap: 8px;
    min-height: 150px;
    padding: 16px;
}
.steam-gift-app-card.active {
    border-color: rgba(33, 76, 49,.38);
    box-shadow: 0 0 0 3px var(--portal-accent-ring), var(--portal-shadow);
}
.steam-gift-app-card span {
    align-items: center;
    background: var(--portal-accent-soft);
    border-radius: 10px;
    color: var(--portal-accent-soft-ink);
    display: inline-flex;
    font-family: var(--portal-font-number);
    font-size: 12px;
    font-weight: 850;
    height: 32px;
    justify-content: center;
    width: 58px;
}
.steam-gift-app-card strong {
    color: var(--portal-text);
    font-size: 16px;
    line-height: 1.2;
}
.steam-gift-app-card small {
    color: var(--portal-muted);
    line-height: 1.35;
}
.steam-gift-app-card b {
    color: var(--portal-financial-text);
    font-family: var(--portal-font-number);
    font-size: 20px;
    margin-top: auto;
}
.steam-gift-order-card {
    display: grid;
    gap: 14px;
    padding: 20px;
}
.steam-region-control {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.steam-gift-field-grid {
    display: grid;
    gap: 12px;
}
.steam-gift-price-list {
    align-items: center;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    display: grid;
    gap: 5px 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
}
.steam-gift-price-list strong {
    color: var(--portal-financial-text);
    font-family: var(--portal-font-number);
    font-size: 28px;
    grid-column: 2;
    grid-row: 1 / 3;
}
.steam-gift-price-list small {
    grid-column: 1;
}
.steam-gift-order-card button {
    justify-self: start;
}
.steam-gift-table-wrap .ns-data-table {
    min-width: 720px;
}
.ns-service-page .service-form-card,
.ns-service-page .service-rate-card {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}
.service-operation-grid {
    grid-template-columns: minmax(260px, .72fr) minmax(260px, 1fr);
}
.service-form-card,
.service-rate-card,
.service-offer-card,
.mini-market-card,
.deposit-balance-card,
.deposit-method-card,
.marketplace-blueprint-card,
.api-endpoint-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    display: grid;
    gap: 12px;
    padding: 18px;
}
.service-form-card {
    align-content: start;
}
.digital-services-panel {
    min-width: 0;
}
.digital-services-panel .service-operation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
}
.service-catalog-search {
    position: sticky;
    top: 10px;
    z-index: 5;
}
.service-category-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
}
.service-category-strip::-webkit-scrollbar {
    display: none;
}
.service-category-chip {
    align-items: center;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 999px;
    color: var(--portal-text);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    text-decoration: none;
}
.service-category-chip span {
    color: var(--portal-muted);
    font-family: var(--portal-font-number);
    font-size: 11px;
}
.service-form-head {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}
.service-form-head div {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.service-form-head small {
    color: var(--portal-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.service-form-head strong {
    color: var(--portal-text);
    display: block;
    font-size: 15px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.service-form-card > small {
    color: var(--portal-muted);
    line-height: 1.45;
}
.service-form-card label {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.service-form-card label span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.service-form-card input,
.service-form-card select,
.service-form-card textarea {
    width: 100%;
}
.service-form-card textarea {
    resize: vertical;
}
.service-form-card button[type="submit"] {
    min-height: 42px;
    justify-self: start;
    margin-top: 2px;
}
.ns-home-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.quick-actions-panel,
.steam-gifts-page,
.marketplaces-page,
.ns-balance-page {
    display: grid;
    gap: 18px;
}
.quick-actions-panel h2,
.ns-page-heading h1 {
    color: var(--portal-text);
    font-size: clamp(28px, 2vw, 34px);
    line-height: 1.08;
    margin: 0;
}
.quick-action-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.quick-action-card {
    align-content: start;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    color: var(--portal-text);
    display: grid;
    gap: 11px;
    min-height: 136px;
    padding: 18px 20px;
    text-decoration: none;
}
.quick-action-card span {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        linear-gradient(150deg, var(--portal-accent) 0%, var(--portal-accent-dark) 100%);
    border: 1px solid var(--portal-accent);
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--portal-accent) 30%, transparent);
    display: grid;
    height: 46px;
    justify-items: center;
    width: 46px;
}
.quick-action-card svg {
    height: 23px;
    stroke-width: 1.9;
    width: 23px;
}
.quick-action-card strong {
    color: var(--portal-text);
    font-size: 17px;
}
.quick-action-card small,
.ns-page-heading p,
.ns-muted-line {
    color: var(--portal-muted);
    line-height: 1.45;
}
.ns-page-heading {
    display: grid;
    gap: 8px;
}
.banking-greeting h1,
.catalog-heading h1,
.ns-page-heading h1,
.ns-api-docs-hero h1 {
    color: var(--portal-text);
    font-family: var(--portal-heading-font);
    font-size: var(--portal-page-title-size);
    font-weight: var(--portal-page-title-weight);
    letter-spacing: 0;
    line-height: var(--portal-page-title-line-height);
    margin: 0;
}
.banking-greeting h1 em,
.banking-greeting h1 strong {
    color: inherit;
    font: inherit;
    letter-spacing: 0;
}
.banking-greeting p,
.catalog-heading p,
.ns-page-heading p,
.ns-api-docs-hero h2 {
    color: var(--portal-muted);
    font-family: var(--portal-font-ui);
    font-size: var(--portal-page-subtitle-size);
    font-weight: var(--portal-page-subtitle-weight);
    line-height: var(--portal-page-subtitle-line-height);
    margin: 0;
}
.ns-available-card {
    align-items: center;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    min-height: 112px;
    padding: 26px;
}
.ns-available-card span {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ns-available-card strong {
    color: var(--portal-financial-text);
    display: block;
    font-family: var(--portal-font-number);
    font-size: clamp(36px, 3vw, 48px);
    line-height: 1.05;
}
.ns-available-card small {
    color: var(--portal-muted);
}
.ns-deposit-tabs {
    background: var(--portal-surface-soft);
    border-radius: 10px;
    display: inline-grid;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    justify-self: start;
    padding: 4px;
}
.ns-deposit-tabs button {
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--portal-muted);
    display: grid;
    gap: 2px;
    min-height: auto;
    padding: 12px 16px;
    text-align: left;
}
.ns-deposit-tabs button.active {
    background: var(--portal-surface);
    box-shadow: var(--portal-shadow);
    color: var(--portal-accent-soft-ink);
}
.ns-deposit-tabs b {
    color: inherit;
}
.ns-deposit-tabs small {
    color: var(--portal-muted);
}
.ns-deposit-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    display: grid;
    gap: 18px;
    padding: 26px;
}
.ns-deposit-card h2 {
    color: var(--portal-text);
    font-size: 22px;
    margin: 0;
}
.ns-deposit-card p {
    color: var(--portal-muted);
    line-height: 1.45;
    margin: 0;
}
.ns-deposit-step {
    border-top: 1px solid var(--portal-border);
    display: grid;
    gap: 14px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding-top: 18px;
}
.ns-deposit-step > span {
    align-items: center;
    background: var(--portal-accent-soft);
    border-radius: 999px;
    color: var(--portal-accent-soft-ink);
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    height: 24px;
    justify-content: center;
    width: 24px;
}
.ns-deposit-step strong {
    color: var(--portal-text);
}
.ns-inline-field {
    align-items: center;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 12px;
    padding: 8px;
}
.ns-inline-field input {
    background: transparent;
    border: 0;
    box-shadow: none;
}
.ns-readonly-value strong {
    color: var(--portal-text);
    font-family: var(--portal-font-code);
    font-size: 15px;
    letter-spacing: 0;
}
.ns-operator-uid {
    margin-top: 12px;
}
.ns-deposit-note {
    margin-top: 12px !important;
}
.ns-marketplace-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ns-marketplace-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    display: grid;
    gap: 16px;
    min-height: 128px;
    padding: 22px;
}
.ns-marketplace-head {
    align-items: start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.ns-marketplace-head strong {
    color: var(--portal-text);
    font-size: 20px;
}
.ns-marketplace-head span,
.ns-marketplace-card p {
    color: var(--portal-muted);
}

.marketplace-center-metrics article,
.marketplace-channel-card,
.marketplace-inbox-panel,
.digital-contract-panel,
.digital-contract-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    box-shadow: var(--portal-shadow);
}

.marketplace-center-metrics span,
.marketplace-channel-stats dt,
.marketplace-contract-strip,
.marketplace-inbox-meta,
.digital-contract-card span,
.digital-contract-card small,
.digital-contract-card p {
    color: var(--portal-muted);
}

.marketplace-channel-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Each card sizes to its own content — opening one card's collapsibles must
       not inflate the shorter sibling in the same row (default stretch did). */
    align-items: start;
}
.marketplace-channel-card {
    align-content: start;
    display: grid;
    gap: 14px;
    min-height: 238px;
    padding: 18px;
}
.marketplace-channel-card.ok { border-top: 3px solid var(--portal-accent); }
.marketplace-channel-card.warn { border-top: 3px solid var(--portal-warn); }
.marketplace-channel-card.danger { border-top: 3px solid var(--portal-danger); }
.marketplace-channel-card.muted { border-top: 3px solid var(--portal-border-strong); }
.marketplace-channel-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}
.marketplace-channel-stats div {
    background: var(--portal-soft);
    border-radius: 10px;
    display: grid;
    gap: 4px;
    min-height: 62px;
    padding: 10px;
}
.marketplace-channel-stats dd {
    color: var(--portal-text);
    font-family: var(--portal-font-number);
    font-weight: 760;
    margin: 0;
}
.marketplace-contract-strip {
    display: grid;
    gap: 6px;
    font-size: 12px;
    line-height: 1.45;
}
.marketplace-validation {
    font-weight: 720;
}
.marketplace-validation.ok { color: var(--portal-accent-soft-ink); }
.marketplace-validation.warn { color: var(--portal-warn); }
.marketplace-validation.danger { color: var(--portal-danger); }
.marketplace-connect-panel {
    display: grid;
    gap: 14px;
}
.marketplace-connect-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.marketplace-connect-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    display: grid;
    gap: 12px;
    padding: 18px;
    align-content: start;
}
.marketplace-connect-head {
    align-items: start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.marketplace-connect-head span,
.marketplace-connect-card label span {
    color: var(--portal-muted);
}
.marketplace-connect-card label {
    color: var(--portal-muted);
    display: grid;
    gap: 6px;
    font-size: 12px;
}
.marketplace-connect-card input {
    background: var(--portal-soft);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    color: var(--portal-text);
    min-height: 38px;
    padding: 8px 10px;
}
.marketplace-connect-card button {
    justify-self: start;
    align-self: start;
    min-width: 140px;
    border-radius: 10px;
}
.marketplace-inbox-panel,
.digital-contract-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
}
.ns-page-heading.compact {
    margin: 0;
}
.ns-page-heading.compact h2 {
    color: var(--portal-text);
    font-size: 22px;
    margin: 0 0 6px;
}
.marketplace-inbox-list {
    display: grid;
    gap: 10px;
}
.marketplace-inbox-row {
    align-items: center;
    background: var(--portal-soft);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 1fr) minmax(150px, .45fr);
    min-height: 96px;
    padding: 14px;
}
.marketplace-inbox-row.empty {
    grid-template-columns: minmax(0, 1fr);
}
.marketplace-inbox-main {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.marketplace-source {
    background: var(--portal-accent-soft);
    border-radius: 999px;
    color: var(--portal-accent-strong);
    display: inline-flex;
    font-size: 11px;
    font-weight: 850;
    justify-self: start;
    min-height: 24px;
    padding: 4px 8px;
    text-transform: uppercase;
}
.marketplace-inbox-main strong,
.digital-contract-card strong {
    color: var(--portal-text);
}
.marketplace-inbox-main p,
.marketplace-inbox-meta time {
    color: var(--portal-muted);
    margin: 0;
}
.marketplace-buyer-context {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.marketplace-buyer-context span {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 999px;
    color: var(--portal-text);
    font-size: 12px;
    min-height: 26px;
    padding: 5px 8px;
}
.marketplace-inbox-meta {
    display: grid;
    font-size: 12px;
    gap: 6px;
    justify-items: end;
}
.digital-contract-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.digital-contract-card {
    align-content: start;
    display: grid;
    gap: 8px;
    min-height: 134px;
    padding: 14px;
}
.digital-contract-card span {
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}
.digital-contract-card p {
    margin: 0;
}
.profile-page {
    display: grid;
    gap: 18px;
}
.ns-profile-management {
    gap: 18px;
}
.ns-profile-action-page {
    display: grid;
    gap: 18px;
    max-width: 760px;
}
.ns-profile-card {
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    padding: 22px;
}
.ns-profile-card .pill {
    align-self: start;
}
.ns-profile-card button:disabled {
    opacity: .6;
}
.ns-profile-card .security-form,
.ns-profile-card .inline-security-form {
    margin-top: 2px;
}
.ns-profile-card .security-form button,
.ns-profile-card .inline-security-form button,
.session-revoke-form button {
    justify-self: start;
}
.ns-profile-card code {
    color: var(--portal-muted);
    font-family: var(--portal-font-code);
    font-size: 12px;
}
.profile-security-link,
.profile-back-link {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 850;
    justify-content: center;
    min-height: 38px;
    text-decoration: none;
}
.profile-security-link {
    background: var(--portal-accent);
    border: 0;
    color: #ffffff;
    cursor: pointer;
    justify-self: start;
    padding: 0 16px;
}
.profile-security-link:hover {
    background: var(--portal-accent-dark);
}
.profile-back-link {
    color: var(--portal-accent-soft-ink);
    justify-self: start;
}
.modal-open {
    overflow: hidden;
}
.portal-modal[hidden] {
    display: none;
}
.portal-modal {
    align-items: center;
    display: grid;
    inset: 0;
    justify-items: center;
    padding: 24px;
    position: fixed;
    z-index: 80;
}
.portal-modal-backdrop {
    background: rgba(17, 18, 20, .48);
    inset: 0;
    position: absolute;
}
html.dark .portal-modal-backdrop {
    background: rgba(0, 0, 0, .66);
}
.portal-modal-panel {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    box-shadow: 0 26px 80px rgba(15, 23, 42, .24);
    color: var(--portal-text);
    display: grid;
    gap: 18px;
    max-height: min(760px, calc(100vh - 48px));
    max-width: 720px;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    width: min(720px, calc(100vw - 48px));
    z-index: 1;
}
.portal-modal-close {
    align-items: center;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 999px;
    color: var(--portal-muted);
    display: inline-flex;
    flex: none;
    height: 34px;
    width: 34px;
    justify-content: center;
    line-height: 0;
    padding: 0;
    position: absolute;
    right: 18px;
    top: 18px;
}
.portal-modal-close svg { width: 15px; height: 15px; display: block; }
.portal-modal-close:hover {
    color: var(--portal-text);
    border-color: var(--portal-accent);
}
/* Neutral close button in dark (defeat the global dark button accent fill) */
html.dark .portal-modal-close { background: var(--portal-surface-soft); color: var(--portal-muted); }
html.dark .portal-modal-close:hover { background: var(--portal-surface-soft); color: var(--portal-text); border-color: var(--portal-accent); }

/* Minimalist security modals (password / 2FA): focused narrow card.
   Extra top padding so the first field clears the absolute close button. */
#profile-password-modal .portal-modal-panel {
    max-width: 440px;
    width: min(440px, calc(100vw - 48px));
    gap: 16px;
}
#profile-2fa-modal .portal-modal-panel {
    max-width: 460px;
    width: min(460px, calc(100vw - 48px));
    gap: 16px;
}
#profile-2fa-modal .totp-setup-page { grid-template-columns: 1fr; }
/* Minimal 2FA setup: centered QR + tappable key, no boxes */
.totp-setup-min {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}
.totp-setup-min .totp-qr { display: inline-flex; }
.totp-setup-min .totp-qr-image {
    width: 220px;
    height: 220px;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: block;
}
.totp-setup-min .totp-key {
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--portal-text);
    cursor: pointer;
    font-family: var(--portal-font-mono, ui-monospace, monospace);
    font-size: 15px;
    letter-spacing: .06em;
    font-weight: 600;
    word-break: break-all;
    line-height: 1.4;
    padding: 6px 8px;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}
.totp-setup-min .totp-key:hover { color: var(--portal-accent-soft-ink); background: var(--portal-accent-soft); }
.totp-setup-min .totp-key-hint { color: var(--portal-muted); font-size: 12px; }
#profile-password-modal .portal-modal-head h2,
#profile-2fa-modal .portal-modal-head h2 { font-size: 22px; }
.portal-modal-head {
    display: grid;
    gap: 6px;
    padding-right: 44px;
}
.portal-modal-head span,
.modal-security-status > span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.portal-modal-head h2 {
    color: var(--portal-text);
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.1;
    margin: 0;
}
.portal-modal-panel > p,
.modal-security-status p {
    color: var(--portal-muted);
    line-height: 1.45;
    margin: 0;
}
.modal-security-status {
    align-items: start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}
.profile-action-card {
    display: grid;
    gap: 18px;
}
.security-form-note,
.totp-setup-note {
    color: var(--portal-muted);
    line-height: 1.45;
    margin: 0;
}
.totp-setup-page {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
}
.totp-setup-launcher {
    grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr);
}
.totp-setup-intro {
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    display: grid;
    gap: 8px;
    padding: 14px;
}
.totp-setup-intro strong {
    color: var(--portal-text);
    font-size: 16px;
}
.totp-setup-intro p {
    color: var(--portal-muted);
    line-height: 1.45;
    margin: 0;
}
.totp-qr-card {
    align-content: start;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    display: grid;
    gap: 12px;
    padding: 14px;
}
.totp-qr-card > span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.totp-qr-image {
    background: #ffffff;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    display: block;
    height: auto;
    max-width: 208px;
    padding: 10px;
    width: 100%;
}
.totp-qr-placeholder {
    align-content: center;
    background:
        linear-gradient(90deg, rgba(33, 76, 49,.12) 25%, transparent 25% 50%, rgba(33, 76, 49,.12) 50% 75%, transparent 75%),
        linear-gradient(0deg, rgba(15,23,42,.08) 25%, transparent 25% 50%, rgba(15,23,42,.08) 50% 75%, transparent 75%),
        var(--portal-surface);
    background-size: 28px 28px;
    border: 1px dashed rgba(33, 76, 49,.38);
    border-radius: 10px;
    display: grid;
    gap: 8px;
    min-height: 188px;
    padding: 16px;
}
.totp-qr-placeholder strong {
    color: var(--portal-text);
}
.totp-qr-placeholder small {
    color: var(--portal-muted);
    line-height: 1.45;
}
.totp-setup {
    display: grid;
    gap: 12px;
}
.totp-setup label {
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    display: grid;
    gap: 8px;
    padding: 12px;
}
.totp-setup label span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.totp-setup code {
    color: var(--portal-text);
    font-size: 14px;
    overflow-wrap: anywhere;
}
.authenticator-open-button {
    appearance: none;
    background: var(--portal-accent-soft);
    border: 1px solid rgba(33, 76, 49,.22);
    border-radius: 12px;
    color: var(--portal-accent-soft-ink);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 4px;
    min-height: 78px;
    padding: 14px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}
.authenticator-open-button span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.authenticator-open-button strong {
    color: var(--portal-accent-soft-ink);
}
.authenticator-open-button:hover,
.authenticator-open-button:focus-visible {
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 4px var(--portal-accent-ring);
    outline: none;
}
.authenticator-popup-open {
    overflow: hidden;
}
.authenticator-popup[hidden] {
    display: none;
}
.authenticator-popup {
    align-items: center;
    display: grid;
    inset: 0;
    justify-items: center;
    padding: 24px;
    position: fixed;
    z-index: 140;
}
.authenticator-popup-scrim {
    background: rgba(15, 23, 42, .48);
    inset: 0;
    position: absolute;
}
html.dark .authenticator-popup-scrim {
    background: rgba(2, 6, 23, .68);
}
.authenticator-popup-panel {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    box-shadow: 0 28px 86px rgba(15, 23, 42, .28);
    display: grid;
    gap: 18px;
    max-height: min(720px, calc(100vh - 48px));
    max-width: 720px;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    width: min(720px, calc(100vw - 48px));
    z-index: 1;
}
.authenticator-popup-close {
    align-items: center;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 999px;
    color: var(--portal-muted);
    cursor: pointer;
    display: inline-grid;
    font-size: 22px;
    height: 34px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 18px;
    top: 18px;
    width: 34px;
}
.authenticator-popup-close:hover,
.authenticator-popup-close:focus-visible {
    color: var(--portal-text);
    outline: none;
}
.authenticator-popup-head {
    display: grid;
    gap: 6px;
    padding-right: 44px;
}
.authenticator-popup-head span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.authenticator-popup-head h3 {
    color: var(--portal-text);
    font-size: 24px;
    line-height: 1.15;
    margin: 0;
}
.authenticator-popup-head p {
    color: var(--portal-muted);
    line-height: 1.45;
    margin: 0;
}
.authenticator-popup-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr);
}
.authenticator-popup-grid .totp-qr-card,
.authenticator-popup-grid .totp-setup label {
    box-shadow: none;
}
.authenticator-app-button,
.security-copy-button {
    appearance: none;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
}
.authenticator-app-button {
    background: var(--portal-accent);
    border: 0;
    color: #ffffff;
    display: grid;
    gap: 4px;
    min-height: 70px;
    padding: 14px;
    text-align: left;
}
.authenticator-app-button span {
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.authenticator-app-button strong {
    color: #ffffff;
    font-size: 16px;
}
.authenticator-app-button:hover,
.authenticator-app-button:focus-visible {
    background: var(--portal-accent-dark);
    outline: none;
}
.security-copy-button {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    color: var(--portal-text);
    font-weight: 850;
    justify-self: start;
    min-height: 36px;
    padding: 0 14px;
}
.security-copy-button:hover,
.security-copy-button:focus-visible {
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px var(--portal-accent-ring);
    outline: none;
}
.sidebar-collapse {
    align-items: center;
    background: transparent;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    color: var(--portal-muted);
    display: grid;
    gap: 10px;
    grid-template-columns: 20px minmax(0, 1fr);
    justify-items: start;
    margin: auto 4px 0;
    min-height: 38px;
    padding: 0 12px;
}
.sidebar-collapse strong {
    color: inherit;
    font-size: 12px;
}
.ns-list-page {
    display: grid;
    gap: 18px;
}
.ns-filter-grid {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    display: grid;
    gap: 14px;
    padding: 18px;
}
.ns-orders-filter {
    grid-template-columns: 160px minmax(0, 1fr) 170px 170px;
}
.ns-transactions-filter {
    grid-template-columns: 160px minmax(0, 1fr) 170px 170px;
}
.ns-filter-grid label {
    color: var(--portal-muted);
    display: grid;
    gap: 8px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
}
.ns-filter-grid input,
.ns-filter-grid select {
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    color: var(--portal-text);
    min-height: 40px;
    padding: 0 12px;
    /* Inputs inherit `font: inherit` from the global rule, which pulls the
       label's heavy 850 weight + .08em tracking — reset to the normal UI font
       so the field value/placeholder reads like body text, not a label. */
    font-family: var(--portal-font-ui);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
}
.ns-table-wrap {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    overflow-x: auto;
}
.ns-data-table {
    border-collapse: collapse;
    color: var(--portal-text);
    min-width: 860px;
    width: 100%;
}
.ns-data-table th,
.ns-data-table td {
    border-bottom: 1px solid var(--portal-border-soft);
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
}
.ns-data-table th {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .04em;
}
.ns-data-table td {
    font-size: 13px;
}
/* The shared .amount glyph is sized for the home feed (16px+); inside a dense
   table cell that overflows, so scale it down to the row's type size. */
.ns-data-table .amount {
    font-size: 14px;
    font-weight: 640;
}
/* Transactions AMOUNT cell renders exactly like its BALANCE neighbour (plain
   cell text) — only the sign and the tone colour set it apart. */
.txn-amount.positive {
    color: var(--portal-good);
}
.txn-amount.negative {
    color: var(--portal-danger);
}
.txn-amount.neutral {
    color: var(--portal-muted);
}
/* Clickable list rows (a transaction / order opens its detail page). */
.ns-data-table tbody tr.ns-row-link {
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .ns-data-table tbody tr.ns-row-link:hover {
        background: var(--portal-surface-soft);
    }
}

/* Detail ("static") page for a single transaction or order:
   back link → big title → card with a two-column field grid → raw data JSON. */
.detail-page {
    display: grid;
    gap: 14px;
    align-content: start;
}
.detail-back {
    width: max-content;
    color: var(--portal-accent-soft-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.detail-back:hover { text-decoration: underline; }
.detail-title {
    margin: 0 0 4px;
    color: var(--portal-text);
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 760;
    letter-spacing: -0.01em;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.detail-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    box-shadow: var(--portal-shadow);
    overflow: hidden;
}
.detail-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
    padding: 26px 28px;
}
.detail-field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.detail-field-label {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.detail-field-value {
    color: var(--portal-text);
    font-size: 16px;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.detail-field-value code { font-family: var(--portal-font-ui); }
.detail-field-value .txn-amount { font-size: 16px; font-weight: 600; }
/* Status reads as a plain value like every other field — just tinted by tone,
   so it lines up under its label exactly like Тип / Сумма / Баланс. */
.detail-status { font-weight: 500; }
.detail-status.ok { color: var(--portal-good); }
.detail-status.danger { color: var(--portal-danger); }
.detail-status.muted { color: var(--portal-muted); }
.detail-link { color: var(--portal-accent-soft-ink); text-decoration: none; }
.detail-link code { color: inherit; }
.detail-link:hover { text-decoration: underline; }
.detail-section { display: grid; gap: 10px; margin-top: 4px; }
.detail-section-label {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.detail-json pre {
    margin: 0;
    padding: 20px 24px;
    font-family: var(--portal-font-code);
    font-size: 13px;
    line-height: 1.6;
    color: var(--portal-text);
    white-space: pre;
    overflow-x: auto;
}
html.dark .detail-status.ok { color: var(--portal-accent-soft-ink); }
html.dark .detail-status.danger { color: var(--portal-danger); }
@media (max-width: 640px) {
    .detail-fields { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
}
.ns-data-table strong {
    color: var(--portal-text);
}
.ns-data-table code {
    color: var(--portal-muted);
    font-family: var(--portal-font-ui);
    white-space: normal;
    word-break: break-word;
}
/* The NEUTRAL status tone — a settled row, which is most of them. It reads in the
   normal text colour, not the brand: a label that appears on every single row
   carries no information by being coloured, and a whole column of it was the
   loudest block of green left on the finances table. Colour is for the tones that
   differ: .is-ok / .is-danger / .is-muted (see portal-wprovider.css). This also
   makes the component match `_finances_status_pill`'s own contract in portal.py,
   which already calls this tone "neutral". */
.ns-status {
    color: var(--portal-text);
    font-weight: 760;
}
.ns-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}
/* JS-free pager: real links; the counter sits between the two ends. */
.ns-page-link {
    appearance: none;
    display: inline-flex;
    align-items: center;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    box-shadow: none;
    border-radius: 10px;
    color: var(--portal-text);
    min-height: 40px;
    padding: 0 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .15s ease;
}
a.ns-page-link:hover {
    border-color: var(--portal-accent);
    color: var(--portal-accent-soft-ink);
    background: var(--portal-surface);
}
a.ns-page-link:active { transform: var(--mo-press); }
.ns-page-link.is-disabled {
    color: var(--portal-muted);
    opacity: .5;
    cursor: default;
    pointer-events: none;
}
.ns-page-count {
    color: var(--portal-muted);
    font-size: .9em;
    font-variant-numeric: tabular-nums;
}
/* Defeat the global html.dark button accent fill on pagination */
html.dark .ns-page-link {
    background: var(--portal-surface);
    color: var(--portal-text);
}
html.dark a.ns-page-link:hover {
    background: var(--portal-surface);
    color: var(--portal-accent-soft-ink);
    border-color: var(--portal-accent);
}
html.dark .ns-page-link.is-disabled {
    background: var(--portal-surface);
    color: var(--portal-muted);
}
.segmented-control {
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 4px;
}
.segmented-control span {
    border-radius: 8px;
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 850;
    padding: 8px 6px;
    text-align: center;
}
.segmented-control span.active {
    background: var(--portal-surface);
    color: var(--portal-accent-soft-ink);
    box-shadow: var(--portal-shadow);
}
.service-rate-card span,
.service-offer-card span,
.mini-market-card span,
.deposit-balance-card span,
.deposit-method-card span,
.marketplace-blueprint-card span,
.api-endpoint-card span {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.service-rate-card strong {
    color: var(--portal-financial-text);
    font-family: var(--portal-font-number);
    font-size: 26px;
}
.ns-rate-table {
    border-collapse: collapse;
    color: var(--portal-text);
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}
.ns-rate-table th,
.ns-rate-table td {
    border-bottom: 1px solid var(--portal-border-soft);
    font-family: var(--portal-font-number);
    padding: 14px 10px;
    text-align: center;
}
.ns-rate-table th {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
}
.ns-rate-table td {
    color: var(--portal-financial-text);
    font-size: 28px;
    font-weight: 850;
}
.service-rate-card small,
.service-offer-card small,
.mini-market-card small,
.deposit-method-card p,
.marketplace-blueprint-card small,
.api-endpoint-card p {
    color: var(--portal-muted);
    line-height: 1.45;
}
.service-offer-grid,
.mini-market-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-offer-card strong,
.mini-market-card strong,
.marketplace-blueprint-card strong {
    color: var(--portal-text);
    font-size: 19px;
}
.mini-market-card span {
    align-items: center;
    background: var(--portal-accent-soft);
    border-radius: 12px;
    color: var(--portal-accent-soft-ink);
    display: grid;
    height: 54px;
    justify-items: center;
    letter-spacing: 0;
    width: 54px;
}
.deposit-method-grid {
    grid-template-columns: minmax(240px, .7fr) minmax(320px, 1.3fr) minmax(240px, .8fr);
}
.deposit-balance-card {
    align-content: space-between;
    background:
        radial-gradient(circle at 90% 12%, rgba(33, 76, 49,.26), transparent 34%),
        linear-gradient(135deg, rgba(33, 76, 49,.10), rgba(255,255,255,.98));
}
html.dark .deposit-balance-card {
    background:
        radial-gradient(circle at 90% 12%, rgba(63, 199, 127,.10), transparent 34%),
        var(--portal-surface);
}
.deposit-balance-card strong {
    color: var(--portal-financial-text);
    font-family: var(--portal-font-number);
    font-size: clamp(30px, 2.4vw, 42px);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.deposit-method-card.active {
    border-color: rgba(33, 76, 49,.32);
}
.deposit-method-tab {
    align-items: start;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.deposit-method-tab strong {
    color: var(--portal-text);
    font-size: 20px;
}
.deposit-method-card ol {
    color: var(--portal-muted);
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 20px;
}
.deposit-requisite {
    align-items: center;
    background: var(--portal-accent-soft);
    border: 1px solid rgba(33, 76, 49,.18);
    border-radius: 12px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px;
}
.deposit-requisite span,
.deposit-requisite strong {
    grid-column: 1;
}
.deposit-requisite strong {
    color: var(--portal-text);
}
.deposit-requisite button {
    grid-column: 2;
    grid-row: 1 / 3;
}

.api-endpoint-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.api-endpoint-card {
    align-content: start;
}
.api-endpoint-head {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}
.api-endpoint-head strong {
    color: var(--portal-text);
    font-family: var(--portal-font-code);
    font-size: 14px;
    overflow-wrap: anywhere;
}
.api-method {
    border-radius: 8px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    min-height: 26px;
    padding: 5px 8px;
}
.api-method.get {
    background: #dcfce7;
    color: #15803d;
}
.api-method.post {
    background: #dbeafe;
    color: #1d4ed8;
}
.api-endpoint-card textarea {
    font-family: var(--portal-font-code);
    min-height: 92px;
    resize: vertical;
}
.ns-api-page,
.ns-api-docs-page,
.ns-service-page {
    display: grid;
    gap: 18px;
}
.ns-api-page .ns-page-heading a {
    color: var(--portal-accent-soft-ink);
    font-weight: 800;
    text-decoration: none;
}
.ns-api-note,
.ns-doc-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
}
.ns-api-note {
    display: grid;
    gap: 12px;
    padding: 20px 22px;
}
.ns-api-note strong,
.ns-api-endpoint-card h3,
.ns-doc-card h2 {
    color: var(--portal-text);
}
.ns-api-note ul {
    color: var(--portal-muted);
    display: grid;
    gap: 8px;
    line-height: 1.45;
    margin: 0;
    padding-left: 20px;
}
.ns-api-endpoint-card h3 {
    font-size: 16px;
    margin: 0;
}
.ns-api-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ns-api-docs-hero {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}
.ns-api-docs-hero h1,
.ns-api-docs-hero h2 {
    color: var(--portal-text);
    line-height: 1.1;
    margin: 0;
}
.ns-api-docs-hero h1 {
    font-size: clamp(28px, 2vw, 34px);
}
.ns-api-docs-hero h2 {
    color: var(--portal-muted);
    font-size: 18px;
    margin-top: 6px;
}
.ns-doc-lang-tabs {
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    display: flex;
    gap: 4px;
    padding: 4px;
}
.ns-doc-lang-tabs span {
    border-radius: 8px;
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 850;
    padding: 8px 12px;
}
.ns-doc-lang-tabs span.active {
    background: var(--portal-surface);
    box-shadow: var(--portal-shadow);
    color: var(--portal-accent-soft-ink);
}
.ns-api-docs-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: 220px minmax(0, 1fr);
}
.ns-api-docs-nav {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    display: grid;
    gap: 4px;
    padding: 12px;
    position: sticky;
    top: 82px;
}
.ns-api-docs-nav a {
    border-radius: 8px;
    color: var(--portal-text);
    display: grid;
    font-size: 13px;
    font-weight: 820;
    gap: 2px;
    padding: 10px;
    text-decoration: none;
}
.ns-api-docs-nav a:hover {
    background: var(--portal-hover);
}
.ns-api-docs-nav small,
.ns-doc-card h2 span,
.ns-doc-card p span {
    color: var(--portal-muted);
}
.ns-api-docs-content {
    display: grid;
    gap: 16px;
    min-width: 0;
}
.ns-doc-card {
    display: grid;
    gap: 14px;
    padding: 22px;
}
.ns-doc-card h2 {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: 22px;
    gap: 8px;
    margin: 0;
}
.ns-doc-card p {
    color: var(--portal-muted);
    line-height: 1.5;
    margin: 0;
}
.ns-doc-card pre {
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    color: var(--portal-text);
    margin: 0;
    overflow-x: auto;
    padding: 14px;
}
.ns-doc-card code {
    font-family: var(--portal-font-code);
    font-size: 12px;
    line-height: 1.55;
}
.ns-doc-card button {
    justify-self: start;
}
.ns-doc-table {
    border-collapse: collapse;
    color: var(--portal-text);
    overflow: hidden;
    width: 100%;
}
.ns-doc-table th,
.ns-doc-table td {
    border-bottom: 1px solid var(--portal-border-soft);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}
.ns-doc-table th {
    color: var(--portal-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html.dark .api-method.get {
    background: rgba(34,197,94,.16);
    color: #86efac;
}
html.dark .api-method.post {
    background: rgba(96,165,250,.16);
    color: #bfdbfe;
}
@media (max-width: 1180px) {
    .catalog-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .deposit-method-grid {
        grid-template-columns: 1fr;
    }
    .ns-home-summary,
    .quick-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ns-orders-filter,
    .ns-transactions-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1040px) {
    .catalog-category-grid,
    .service-offer-grid,
    .steam-gift-result-grid,
    .mini-market-grid,
    .marketplace-blueprint-grid,
    .api-endpoint-grid,
    .service-operation-grid,
    .marketplace-channel-grid,
    .marketplace-connect-grid,
    .digital-contract-grid,
    .steam-gift-builder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .digital-services-panel .service-operation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .marketplace-inbox-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .marketplace-inbox-meta {
        justify-items: start;
    }
    .ns-marketplace-grid {
        grid-template-columns: 1fr;
    }
    .ns-api-docs-layout {
        grid-template-columns: 1fr;
    }
    .ns-api-docs-nav {
        position: static;
    }
}
@media (max-width: 640px) {
    :root {
        --cabinet-sidebar: 100%;
    }
    .catalog-category-grid,
    .service-offer-grid,
    .steam-gift-result-grid,
    .mini-market-grid,
    .marketplace-blueprint-grid,
    .api-endpoint-grid,
    .service-operation-grid,
    .marketplace-channel-grid,
    .marketplace-connect-grid,
    .marketplace-center-metrics,
    .digital-contract-grid,
    .steam-gift-builder {
        grid-template-columns: 1fr;
    }
    .catalog-category-card {
        min-height: 292px;
    }
    .catalog-art {
        min-height: 200px;
    }
    .ns-home-summary,
    .quick-action-grid,
    .ns-deposit-tabs,
    .totp-setup-page,
    .ns-orders-filter,
    .ns-transactions-filter {
        grid-template-columns: 1fr;
    }
    .ns-available-card,
    .ns-marketplace-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .ns-deposit-card,
    .ns-available-card {
        padding: 18px;
    }
    .digital-services-panel .service-operation-grid {
        grid-template-columns: 1fr;
    }
    .service-catalog-search {
        position: static;
    }
    .service-form-head {
        align-items: stretch;
        grid-template-columns: 1fr;
    }
    .service-form-card button[type="submit"] {
        justify-self: stretch;
        width: 100%;
    }
    .ns-inline-field {
        grid-template-columns: 1fr;
    }
    .portal-modal {
        align-items: end;
        padding: 12px;
    }
    .portal-modal-panel {
        border-radius: 14px;
        max-height: calc(100vh - 24px);
        padding: 20px;
        width: calc(100vw - 24px);
    }
    .authenticator-popup {
        align-items: end;
        padding: 12px;
    }
    .authenticator-popup-panel {
        border-radius: 14px;
        max-height: calc(100vh - 24px);
        padding: 20px;
        width: calc(100vw - 24px);
    }
    .authenticator-popup-grid {
        grid-template-columns: 1fr;
    }
    .modal-security-status {
        flex-direction: column;
    }
    .ns-pagination {
        justify-content: space-between;
        gap: 8px;
    }
    .ns-page-link {
        padding: 0 12px;
    }
    .ns-page-count {
        text-align: center;
        flex: 1 1 auto;
    }
}

/* Mobile shell correction for the NS portal layer. */
@media (max-width: 920px) {
    :root {
        --cabinet-sidebar: 100%;
    }
    .app-shell {
        grid-template-columns: minmax(0, 1fr);
        overflow-x: clip;
    }
    .portal-workspace {
        min-width: 0;
        width: 100%;
    }
    .sidebar {
        border-bottom: 1px solid var(--portal-border);
        border-right: 0;
        flex-direction: column;
        gap: 8px;
        height: auto;
        max-width: 100%;
        overflow: hidden;
        padding: 10px 12px 12px;
        position: static;
        width: 100%;
    }
    .sidebar-collapse {
        display: none;
    }
    .sidebar-group {
        gap: 6px;
        min-width: 0;
    }
    .sidebar-group-title {
        padding: 0 4px;
    }
    .sidebar-nav {
        display: flex;
        gap: 6px;
        margin: 0 -12px;
        overflow-x: auto;
        padding: 0 12px 4px;
        scroll-padding: 12px;
        scrollbar-width: none;
    }
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    .sidebar-link {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 10px;
        width: auto;
    }
    .sidebar-link span {
        overflow-wrap: normal;
        white-space: nowrap;
    }
    .topbar {
        gap: 8px;
        min-width: 0;
        padding: 0 12px;
    }
    .topbar-actions {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .topbar-actions::-webkit-scrollbar {
        display: none;
    }
    main {
        max-width: none;
        min-width: 0;
        padding: 18px 12px 44px;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .topbar {
        min-height: 50px;
    }
    .balance-chip {
        min-height: 32px;
        padding: 0 10px;
    }
    .language-button,
    .theme-toggle {
        min-height: 32px;
        padding: 0 8px;
    }
    .user-menu-button,
    .avatar-initial {
        min-height: 34px;
        height: 34px;
        width: 34px;
    }
}

/* ===== Unified marketplace messenger ===== */
/* Fill the viewport with equal top/bottom gaps. MAIN's padding is asymmetric
   (small top, large bottom reserved for the mobile nav); cancel most of the
   bottom on desktop so the panel uses the space evenly. */
.messenger-page { display: flex; flex-direction: column; margin-bottom: -72px; }

/* One cohesive app surface: list rail | hairline divider | conversation/empty */
.messenger-layout {
    display: grid;
    /* list | chat | info-aside. The aside is kept narrow so the chat keeps the
       most room; the chat is minmax(0,1fr) so messages never blow out the track. */
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) clamp(196px, 16vw, 248px);
    height: calc(100vh - 117px);
    min-height: 440px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 16px;
    box-shadow: var(--portal-shadow);
    overflow: hidden;
}
/* No open conversation -> no aside is rendered -> only 2 grid children
   (list + empty state). Drop the phantom 3rd track so the empty state
   isn't squeezed. (.has-active is added only when a conversation is open.) */
.messenger-layout:not(.has-active) {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}
.messenger-list-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--portal-border);
    background: var(--portal-surface);
}
.messenger-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--portal-surface);
    border-bottom: 1px solid var(--portal-border);
}
.messenger-search { position: relative; }
.messenger-search-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--portal-muted);
    pointer-events: none;
}
.messenger-search-icon svg { width: 100%; height: 100%; }
.messenger-search input {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: var(--portal-surface-soft);
    color: var(--portal-text);
    font-family: var(--portal-font-ui);
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.messenger-search input::placeholder { color: var(--portal-muted); }
.messenger-search input:focus {
    outline: none;
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px var(--portal-accent-ring);
    background: var(--portal-surface);
}
.messenger-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.messenger-filters .portal-select .portal-select-button {
    min-height: 36px;
    background: var(--portal-surface-soft);
}
/* Unread filter as a clean toggle chip: the native checkbox is hidden (it stays
   in the form for serialization) and the whole pill reflects the on/off state —
   no separate native box to jitter/stretch. Filters auto-apply on toggle. */
.messenger-unread-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--portal-border);
    border-radius: 999px;
    background: var(--portal-surface-soft);
    color: var(--portal-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.messenger-unread-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.messenger-unread-toggle:hover { border-color: var(--portal-accent); }
.messenger-unread-toggle:has(input:checked) {
    background: var(--portal-accent-soft);
    border-color: var(--portal-accent);
    color: var(--portal-accent-soft-ink);
    font-weight: 600;
}
.messenger-unread-toggle:focus-within { border-color: var(--portal-accent); box-shadow: 0 0 0 3px var(--portal-accent-ring); }
.messenger-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}
/* Flat, continuous conversation list (chat-app style): no per-row card —
   rows separated by a hairline + a hover highlight. */
.messenger-thread {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--portal-border);
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    color: var(--portal-text);
    transition: background .15s ease;
}
/* Search-hidden rows must actually collapse: the `hidden` attribute alone loses
   to `.messenger-thread { display: flex }` (an author rule beats the UA
   `[hidden]{display:none}`), so without this the filtered row stays visible. */
.messenger-thread[hidden] { display: none !important; }
.messenger-thread:last-child { border-bottom: 0; }
.messenger-thread:hover { background: var(--portal-hover); }
.messenger-thread.active {
    background: var(--portal-accent-soft);
    box-shadow: inset 3px 0 0 var(--portal-accent);
}
.messenger-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
    font-family: var(--portal-heading-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    user-select: none;
}
/* Real FunPay photo fills the circle (the monogram is the fallback). */
.messenger-avatar.has-photo {
    background-color: var(--portal-surface-soft);
    background-size: cover;
    background-position: center;
    color: transparent;
}
/* Smaller avatar in the conversation header, left of the name. */
.messenger-head-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    font-size: 14px;
}
.messenger-thread-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.messenger-thread-line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.messenger-source {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--portal-muted);
    background: var(--portal-surface-soft);
    border-radius: 999px;
    padding: 2px 8px;
}
.messenger-unread {
    flex: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--portal-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.messenger-thread-buyer {
    flex: 1;
    min-width: 0;
    font-family: var(--portal-heading-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--portal-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.messenger-thread-time {
    flex: none;
    font-size: 11px;
    color: var(--portal-muted);
    font-variant-numeric: tabular-nums;
}
.messenger-thread-sub {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--portal-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.messenger-thread-mkt { color: var(--portal-muted); opacity: .7; text-transform: lowercase; }
.messenger-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--portal-muted);
}
.messenger-dot.pattern-new { background: var(--portal-accent); }
.messenger-dot.pattern-first { background: var(--portal-good); }
.messenger-dot.pattern-repeat { background: var(--portal-accent); }
.messenger-dot.pattern-vip { background: var(--portal-warn); }
.messenger-dot.pattern-attention { background: var(--portal-danger); }
.messenger-pattern {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--portal-surface-soft);
    color: var(--portal-text);
}
.messenger-pattern.pattern-new { background: var(--portal-accent-soft); color: var(--portal-accent-soft-ink); }
.messenger-pattern.pattern-first { background: #e9f8f1; color: #086043; }
.messenger-pattern.pattern-repeat { background: #efeafc; color: #5b3fb0; }
.messenger-pattern.pattern-vip { background: #fff5da; color: #8a5a00; }
.messenger-pattern.pattern-attention { background: #fff1f0; color: #ad221f; }
.messenger-conversation {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--portal-surface);
}
/* Slim header: name + last-seen status on the left, marketplace tag pinned right. */
.messenger-conversation-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--portal-border);
}
/* Desktop: the list is always visible, so the back link is mobile-only. */
.messenger-back {
    flex: none;
    color: var(--portal-accent-soft-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: none;
}
/* Stacked identity: name over status. .messenger-head-main IS the stack now —
   the old .messenger-head-id row and the · separator are gone. Symmetry is
   structural, not eyeballed: both lines share line-height 1.25 (equal leading
   above/below each glyph row) joined by a single 2px gap, so the room above the
   name == the seam between lines == the room below the status. The ~37px block
   (15*1.25 + 2 + 13*1.25) ≈ the 34px avatar, so justify-content:center parks it
   with sub-pixel residual. */
.messenger-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.messenger-head-name {
    min-width: 0;
    font-family: var(--portal-heading-font);
    /* Calmer than the old 17/600/full-ink — smaller, medium weight, softened
       ink — yet still the primary line (larger + darker than the 13px status).
       Rendered as <span> (not <strong>) so the 500 weight isn't fought by UA bold. */
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    color: color-mix(in srgb, var(--portal-text) 82%, var(--portal-muted));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status — the quiet second line directly under the name. Same 1.25 line-height
   is what keeps the stack symmetric. Ellipsizes so a long "не в сети уже 5 мин"
   truncates instead of growing the bounded header. */
.messenger-presence {
    margin: 0;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.messenger-presence.is-online .messenger-presence-text { color: var(--portal-accent-soft-ink); font-weight: 500; }
.messenger-presence.is-offline .messenger-presence-text { color: var(--portal-muted); font-weight: 400; }

/* Back-compat: a not-yet-restarted portal process may still emit the OLD header
   markup (the .messenger-head-id wrapper + a · separator span). Hide the dot and
   make that wrapper stack exactly like the new flat markup, so the live portal
   renders correctly off the fresh CSS alone — no process restart needed. Once
   the server restarts and stops emitting these, both rules simply match nothing. */
.messenger-head-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.messenger-head-sep { display: none; }

/* Mobile-only compact facts strip (the aside owns these on desktop). */
.messenger-facts-strip { display: none; }

/* Info-aside: a calm CRM sidebar, sibling grid track of the chat. */
.messenger-info {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--portal-border);
    background: var(--portal-surface-soft);
    overflow-y: auto;
}
.messenger-info-inner { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.messenger-info-title {
    margin: 0;
    font-family: var(--portal-heading-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--portal-muted);
}
/* Buyer details as a vertical, hairline-separated fact list. */
.messenger-buyer-card { display: flex; flex-direction: column; gap: 0; margin: 0; }
.messenger-buyer-card > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--portal-border);
}
.messenger-buyer-card > div:first-child { padding-top: 0; }
.messenger-buyer-card > div:last-child { border-bottom: 0; padding-bottom: 0; }
.messenger-buyer-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--portal-muted); }
.messenger-buyer-card dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
    color: var(--portal-text);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* Dark parity (tokens flip; restate the recessed surfaces explicitly). */
html.dark .messenger-info { background: var(--portal-surface-soft); border-left-color: var(--portal-border); }
html.dark .messenger-presence.is-online .messenger-presence-text { color: var(--portal-accent-soft-ink); }
.messenger-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* Slim, rounded, self-effacing scrollbar for the messenger scroll areas
   (replaces the chunky default track) — Firefox + WebKit. */
.messenger-messages,
.messenger-info,
.messenger-list {
    scrollbar-width: thin;
    scrollbar-color: var(--portal-border) transparent;
}
.messenger-messages::-webkit-scrollbar,
.messenger-info::-webkit-scrollbar,
.messenger-list::-webkit-scrollbar { width: 10px; height: 10px; }
.messenger-messages::-webkit-scrollbar-track,
.messenger-info::-webkit-scrollbar-track,
.messenger-list::-webkit-scrollbar-track { background: transparent; }
.messenger-messages::-webkit-scrollbar-thumb,
.messenger-info::-webkit-scrollbar-thumb,
.messenger-list::-webkit-scrollbar-thumb {
    background: var(--portal-border);
    border: 3px solid transparent;       /* padding → a thin ~4px floating pill */
    background-clip: padding-box;
    border-radius: 999px;
}
.messenger-messages::-webkit-scrollbar-thumb:hover,
.messenger-info::-webkit-scrollbar-thumb:hover,
.messenger-list::-webkit-scrollbar-thumb:hover {
    background: var(--portal-muted);
    background-clip: padding-box;
}
.messenger-bubble { max-width: 78%; padding: 9px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.messenger-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.messenger-bubble time { display: block; margin-top: 4px; font-size: 11px; color: var(--portal-muted); }
.messenger-bubble.in { align-self: flex-start; background: var(--portal-surface-soft); color: var(--portal-text); border-bottom-left-radius: 6px; }
.messenger-bubble.out { align-self: flex-end; background: var(--portal-accent-soft); color: var(--portal-text); border-bottom-right-radius: 6px; }
.messenger-bubble.out time { color: var(--portal-accent-soft-ink); }
.messenger-bubble.system { align-self: center; background: transparent; color: var(--portal-muted); font-size: 12px; text-align: center; }
/* New message entrance — a quick slide-up + fade, like native messengers. */
@keyframes messenger-bubble-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
/* `!important` overrides the global `.app-shell * { animation: none !important }`
   policy for just these two messenger affordances. */
.messenger-bubble.is-entering { animation: messenger-bubble-in .24s cubic-bezier(.22, .61, .36, 1) !important; }

/* Jump-to-message: a brief accent ring when a content-search result opens the
   chat scrolled to the matched message. !important beats the global animation
   policy (same as the entrance above). */
@keyframes messenger-jump-flash {
    0%, 65% { box-shadow: 0 0 0 2px var(--portal-accent); }
    100%    { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
.messenger-bubble.is-jump-target { animation: messenger-jump-flash 2s ease !important; }

/* The matched substring highlighted inside a search-result snippet. */
.messenger-hit {
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 600;
}

/* Sending state: no whole-bubble dim — a small spinner sits in the time slot and
   is swapped for the real timestamp on delivery (the familiar messenger clock). */
.messenger-sending {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .7;
    animation: messenger-spin .7s linear infinite !important;
}
@keyframes messenger-spin { to { transform: rotate(360deg); } }
/* While sending, the spinner sits OUTSIDE the bubble, to its left, perfectly
   centred on the bubble's vertical axis (the time slot holds the spinner and is
   absolutely positioned; it reverts to the normal timestamp on delivery). */
.messenger-bubble.is-pending { position: relative; }
.messenger-bubble.is-pending > time {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 9px 0 0;
    display: grid;
    place-items: center;
    line-height: 0;
}

.messenger-bubble.is-failed { outline: 1px solid var(--portal-danger); }
.messenger-bubble.is-failed time { color: var(--portal-danger); }

@media (prefers-reduced-motion: reduce) {
    .messenger-bubble.is-entering { animation: none !important; }
    .messenger-bubble.is-jump-target { animation: none !important; }
    .messenger-sending { animation-duration: 1.5s !important; }
}
/* ============================================================
   Messenger composer — unified field shell + native-disabled send.
   One rounded .messenger-field owns the border + focus ring (focus-within);
   the textarea is transparent inside it and the round send button nests
   flush at the bottom-right. Quiet/ghost when empty, armed (accent) when
   there is real content. Keyboard: Ctrl/⌘+↵ sends, Ctrl/⌘+Shift+↵ newline.
   ============================================================ */
.messenger-reply {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--portal-border);
    align-items: flex-end;
}

/* The single focusable object: the shell carries border + surface + ring. */
.messenger-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 4px;
    border-radius: 22px;
    border: 1px solid var(--portal-border);
    background: var(--portal-surface-soft);
    transition:
        border-color var(--mo-fast) var(--mo-ease),
        box-shadow var(--mo-fast) var(--mo-ease),
        background-color var(--mo-fast) var(--mo-ease);
}
.messenger-reply:focus-within .messenger-field {
    border-color: var(--portal-accent);
    box-shadow: var(--portal-shadow-sm);
}

/* Textarea is transparent inside the shell — no own border/ring/fill. */
.messenger-reply textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    min-height: 36px;             /* one-line content height; JS autosizes up */
    max-height: 140px;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--portal-text);
    font-family: var(--portal-font-ui);
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 4px;
    transition: none;
}
.messenger-reply textarea:focus { outline: none; box-shadow: none; }
.messenger-reply textarea::placeholder { color: var(--portal-muted); }

/* Round send button, nested flush at the shell's bottom-right.
   GHOST by default (disabled). Pinned to the bottom so multi-line growth
   pushes the text up while the button stays put — native messenger feel. */
.messenger-reply .messenger-send {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 1px 1px 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--portal-muted);
    cursor: default;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.messenger-reply .messenger-send svg {
    width: 18px;
    height: 18px;
    transition: transform .15s ease;
}

/* ARMED — there is real (trimmed) content; native :enabled drives it. */
.messenger-reply .messenger-send:enabled {
    background: var(--portal-accent);
    color: var(--portal-accent-ink);               /* text-on-accent flips per theme */
    cursor: pointer;
}
@media (hover: hover) {
    .messenger-reply .messenger-send:enabled:hover { background: var(--portal-accent-dark); }
    .messenger-reply .messenger-send:enabled:hover svg { }
}
.messenger-reply .messenger-send:enabled:active { transform: var(--mo-press); }
.messenger-reply .messenger-send:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 2px; }

/* Attach (paperclip) — a ghost icon button NESTED in the field's bottom-left,
   mirroring the send button on the right (symmetric: [clip] text [send]). */
.messenger-reply .messenger-attach {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 0 1px 1px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--portal-muted);
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}
.messenger-reply .messenger-attach svg { width: 18px; height: 18px; }
@media (hover: hover) {
    .messenger-reply .messenger-attach:hover { color: var(--portal-text); }
}
.messenger-reply .messenger-attach:active { transform: var(--mo-press); }
.messenger-reply .messenger-attach:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 2px; }
/* Defeat the global html.dark button accent fill — the clip stays a ghost. */
html.dark .messenger-reply .messenger-attach { background: transparent; color: var(--portal-muted); }
@media (hover: hover) {
    html.dark .messenger-reply .messenger-attach:hover { background: transparent; color: var(--portal-text); }
}

/* Image message bubbles. */
.messenger-bubble.has-img { padding: 4px; }
.messenger-bubble-img { display: block; line-height: 0; }
.messenger-bubble-img img {
    display: block;
    max-width: 240px;
    max-height: 300px;
    width: auto;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
}
.messenger-bubble.has-img > p { margin: 4px 8px 0; }
.messenger-bubble.has-img time { padding: 2px 8px 4px; }

/* Disabled marketplace notice — keep the existing seam + rhythm. */
.messenger-reply-disabled { margin: 0; padding: 14px 16px; border-top: 1px solid var(--portal-border); color: var(--portal-muted); font-size: 13px; }

/* ---------- Dark theme ----------
   Parent-scoped to defeat the global `html.dark button { background: accent }`
   (and its :hover -> accent-dark): the DISABLED ghost must stay transparent
   with muted ink; only the armed :enabled button fills accent. */
html.dark .messenger-reply .messenger-send {
    background: transparent;
    color: var(--portal-muted);
}
html.dark .messenger-reply .messenger-send:enabled {
    background: var(--portal-accent);
    color: var(--portal-accent-ink);
}
@media (hover: hover) {
    html.dark .messenger-reply .messenger-send:enabled:hover {
        background: var(--portal-accent-dark);
        color: var(--portal-accent-ink);
    }
    /* Neutralize the global html.dark button:hover -> accent-dark on the ghost. */
    html.dark .messenger-reply .messenger-send:disabled:hover { background: transparent; }
}

/* ---------- Composer on the narrow rail ---------- */
@media (max-width: 860px) {
    .messenger-reply .messenger-send,
    .messenger-reply .messenger-attach { width: 34px; height: 34px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .messenger-field,
    .messenger-reply .messenger-send,
    .messenger-reply .messenger-send svg { transition: none; }
    .messenger-reply .messenger-send:enabled:active { transform: none; }
    .messenger-reply .messenger-send:enabled:hover svg { transform: none; }
}
.messenger-empty { color: var(--portal-muted); padding: 24px; text-align: center; font-size: 14px; }
.messenger-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 32px;
    margin: auto;
    max-width: 300px;
    color: var(--portal-muted);
}
.messenger-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--portal-accent-soft); color: var(--portal-accent-soft-ink);
    margin-bottom: 4px;
}
.messenger-empty-icon svg { width: 26px; height: 26px; }
.messenger-empty-title { margin: 0; font-family: var(--portal-heading-font); font-size: 15px; font-weight: 600; color: var(--portal-text); }
.messenger-empty-sub { margin: 0; font-size: 13px; line-height: 1.5; color: var(--portal-muted); }

@media (max-width: 860px) {
    .messenger-page { margin-bottom: 0; }  /* keep MAIN's bottom padding for the mobile nav */
    /* Single column on BOTH states (the desktop :not(.has-active) rule has higher
       specificity, so it must be overridden here too). */
    .messenger-layout,
    .messenger-layout:not(.has-active) {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
    .messenger-info { display: none; }        /* the aside collapses entirely on the rail */
    .messenger-list-pane { border-right: 0; }
    .messenger-list { max-height: 70vh; }
    .messenger-conversation { height: min(80vh, calc(100vh - 140px)); }
    .messenger-layout.has-active .messenger-list-pane { display: none; }
    .messenger-bubble { max-width: 88%; }
    /* Filter toolbar: let the unread chip grow so the row reflows cleanly. */
    .messenger-unread-toggle { flex: 1 1 auto; justify-content: center; }
    /* Tighten the composer's outer padding on the narrow rail. */
    .messenger-reply { padding: 10px 12px; }
    /* Header reflows; the back link returns as a full-width top row. */
    .messenger-conversation-head { flex-wrap: wrap; row-gap: 6px; }
    .messenger-back { display: inline-flex; order: -1; flex-basis: 100%; }
    .messenger-head-main { flex: 1 1 auto; }
    /* Surface the 3 highest-signal facts as a compact strip under the header
       (the full aside is gone on mobile). Each cell truncates so the header
       height stays bounded. */
    .messenger-facts-strip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 12px;
        flex-basis: 100%;
        margin: 2px 0 0;
        padding-top: 8px;
        border-top: 1px solid var(--portal-border);
    }
    .messenger-facts-strip > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .messenger-facts-strip dt {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--portal-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .messenger-facts-strip dd {
        margin: 0;
        font-size: 13px;
        color: var(--portal-text);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   Brand — deep forest green accent + green-black dark theme.
   This block is intentionally last so it wins the cascade and
   consolidates the accent + dark surfaces.

   This sheet is render-blocking and warm-cached while the skin
   (portal-wprovider.css) is re-fetched on nearly every deploy, so
   the base must already paint the brand — otherwise the first
   frame flashes the previous palette. See the test lock in
   tests/test_portal_routes.py.
   ============================================================ */
:root {
    /* The accent is a dark FILL in both themes, so it cannot double as an ink:
       accent-coloured TEXT reads --portal-accent-soft-ink. */
    --portal-accent-soft-ink: #1c5637;
    --portal-good-soft: #dcefe4;
    --portal-warn-soft: #fbe9de;
    --portal-danger-soft: #fbeae8;
    --portal-accent-ink: #ffffff;
    --portal-chrome: #ffffff;
    --portal-glass-thin: rgba(255, 255, 255, .72);
    --portal-accent-gradient: linear-gradient(135deg, #143d27 0%, #1c5637 100%);
    --portal-canvas-gradient: linear-gradient(180deg, #f3f4f8 0%, #e7e8f0 100%);
    /* Functional palette — state and taxonomy hues. See portal-wprovider.css §1. */
    --portal-good-line: rgba(29, 121, 65, .40);
    --portal-warn-line: rgba(171, 79, 0, .40);
    --portal-danger-line: rgba(185, 66, 65, .40);
    --portal-progress: #007199;
    --portal-progress-soft: #e0f4ff;
    --portal-progress-line: rgba(0, 113, 153, .40);
    --portal-reversed: #8d3e73;
    --portal-reversed-soft: #ffe9f6;
    --portal-reversed-line: rgba(141, 62, 115, .40);
    --portal-idle: #676872;
    --portal-idle-soft: #e9eaf1;
    --portal-idle-line: rgba(103, 104, 114, .40);
    --portal-hue-sapphire: #32529b;
    --portal-hue-sapphire-soft: #e9f0ff;
    --portal-hue-verdigris: #1e766e;
    --portal-hue-verdigris-soft: #d9f5f1;
    --portal-hue-iris: #624391;
    --portal-hue-iris-soft: #f2edff;
    --accent: var(--portal-accent);
    --accent-strong: var(--portal-accent-dark);
    --accent-soft: var(--portal-accent-soft);
    --accent-ring: var(--portal-accent-ring);
    /* Legacy aliases collapse onto the brand accent */
    --blue: var(--portal-accent);
    --wp-blue: var(--portal-accent);
    --wp-blue-soft: var(--portal-accent-soft);
    --wp-blue-ring: var(--portal-accent-ring);
    /* Legacy neutral aliases -> theme-aware portal tokens (fixes dark mode) */
    --page: var(--portal-surface-soft);
    --paper: var(--portal-surface);
    --ink: var(--portal-text);
    --muted: var(--portal-muted);
    --hairline: var(--portal-border);
    --red: var(--portal-danger, #d0433f);
    /* The two earlier legacy palettes (--wp-* around line 2030, --cabinet-* around
       2893) still carry ~100 references between them and were left on their own
       off-brand greys. Collapse them onto the portal tokens here instead of
       re-tinting each hex, so they can never drift from the brand again. The dark
       block below repeats the --cabinet-* half: `html.dark` at line 2905 outranks
       `:root` no matter the order. */
    --wp-page: var(--portal-bg);
    --wp-surface: var(--portal-surface);
    --wp-surface-soft: var(--portal-surface-soft);
    --wp-card-hover: var(--portal-hover);
    --wp-text: var(--portal-text);
    --wp-muted: var(--portal-muted);
    --wp-border: var(--portal-border);
    --wp-border-soft: var(--portal-border-soft);
    --wp-green: var(--portal-good);
    --wp-amber: var(--portal-warn);
    --wp-red: var(--portal-danger);
    --cabinet-bg: var(--portal-bg);
    --cabinet-panel: var(--portal-surface);
    --cabinet-text: var(--portal-text);
    --cabinet-muted: var(--portal-muted);
    --cabinet-border: var(--portal-border);
    --cabinet-border-soft: var(--portal-border-soft);
}
html.dark {
    /* Green-black surfaces — no navy/blue tint */
    --portal-accent-soft-ink: #35ce85;
    --portal-good-soft: #1a3e27;
    --portal-warn-soft: #4d2c16;
    --portal-danger-soft: #5d1d18;
    /* The dark accent is LIGHT, so the ink on it flips back to dark. */
    --portal-accent-ink: #0b0f11;
    --portal-chrome: #0e131a;
    --portal-glass-thin: rgba(14, 19, 26, .62);
    --portal-accent-gradient: linear-gradient(180deg, #3fdc90 0%, #2bb974 58%, #24a868 100%);
    --portal-canvas-gradient: linear-gradient(180deg, #0b0f15 0%, #141b26 100%);
    --portal-good-line: rgba(106, 218, 148, .40);
    --portal-warn-line: rgba(250, 142, 68, .40);
    --portal-danger-line: rgba(252, 127, 113, .40);
    --portal-progress: #65cdff;
    --portal-progress-soft: #193a4a;
    --portal-progress-line: rgba(101, 205, 255, .40);
    --portal-reversed: #e688c4;
    --portal-reversed-soft: #561c44;
    --portal-reversed-line: rgba(230, 136, 196, .40);
    --portal-idle: #a9aab4;
    --portal-idle-soft: #34353d;
    --portal-idle-line: rgba(169, 170, 180, .40);
    --portal-hue-sapphire: #91b5ff;
    --portal-hue-sapphire-soft: #112e75;
    --portal-hue-verdigris: #28dbcc;
    --portal-hue-verdigris-soft: #1a3c38;
    --portal-hue-iris: #c3a1ff;
    --portal-hue-iris-soft: #40206a;
    --portal-bg: #0b0f15;
    --portal-surface: #1e242f;
    --portal-surface-soft: #272e3b;
    --portal-hover: #313949;
    --portal-border: #2f3745;
    --portal-border-soft: #222834;
    --portal-text: #f0f2f6;
    --portal-muted: #aab4c6;
    /* Brighter teal accent for legibility on dark */
    --portal-accent: #35ce85;
    --portal-accent-dark: #24a868;
    --portal-accent-soft: rgba(53, 206, 133, .20);
    --portal-accent-ring: rgba(53, 206, 133, .85);
    /* Old --wp-* palette neutralized to match */
    --wp-page: var(--portal-bg);
    --wp-surface: var(--portal-surface);
    --wp-surface-soft: var(--portal-surface-soft);
    --wp-card-hover: var(--portal-hover);
    --wp-text: var(--portal-text);
    --wp-muted: var(--portal-muted);
    --wp-soft-muted: #6f7a76;
    --wp-border: var(--portal-border);
    --wp-border-soft: var(--portal-border-soft);
    --wp-blue: var(--portal-accent);
    --wp-blue-soft: var(--portal-accent-soft);
    --wp-blue-ring: var(--portal-accent-ring);
    --cabinet-bg: var(--portal-bg);
    --cabinet-panel: var(--portal-surface);
    --cabinet-text: var(--portal-text);
    --cabinet-muted: var(--portal-muted);
    --cabinet-border: var(--portal-border);
    --cabinet-border-soft: var(--portal-border-soft);
}

/* ===== Collapsible sidebar (icon rail) — clean instant toggle =====
   A width-based transition reflows the whole content grid every frame and
   stutters, so the collapse is instant; only the cheap arrow rotation eases. */
.sidebar-collapse { cursor: pointer; overflow: hidden; }
.sidebar-collapse-icon { transition: transform .25s cubic-bezier(.4, 0, .2, 1); display: inline-block; }
.sidebar-link { overflow: hidden; }
.sidebar-link span,
.sidebar-collapse strong,
.sidebar-group-title { white-space: nowrap; }
.app-shell.collapsed { --cabinet-sidebar: 76px; }
.app-shell.collapsed .sidebar-group { gap: 6px; }
.app-shell.collapsed .sidebar-group-title { display: none; }
.app-shell.collapsed .sidebar-link {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-left: 0;
    padding-right: 0;
}
.app-shell.collapsed .sidebar-link span { display: none; }
.app-shell.collapsed .sidebar-collapse {
    grid-template-columns: 1fr;
    justify-items: center;
}
.app-shell.collapsed .sidebar-collapse strong { display: none; }
.app-shell.collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
/* Collapsed rail = icons only: hide the legal/company footer (it wrapped into the
   narrow rail and looked broken). The labels already hide via .sidebar-link span. */
.app-shell.collapsed .sidebar-legal { display: none; }

/* ===== Dashboard + quick-action cards: symmetric, animated gradient ===== */
.metric-card,
.quick-action-card {
    position: relative;
}
/* Top metric cards are informational only — no hover motion. */
/* Quick-action cards are interactive — lift on hover. */
.quick-action-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.quick-action-card:hover {
    border-color: var(--portal-accent);
    box-shadow: 0 14px 30px rgba(15,30,25,.10);
}
html.dark .quick-action-card:hover {
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion: reduce) {
    .metric-card,
    .quick-action-card { animation: none; }
}

/* Animated teal gradient surfaces — uniform across ALL metric cards (light) */
.wallet-card,
.total-balance-card {
    background: linear-gradient(135deg, rgba(33, 76, 49,.14) 0%, var(--portal-surface) 58%, rgba(33, 76, 49,.06) 100%);
    border-color: var(--portal-border);
}
.quick-action-card {
    background: linear-gradient(120deg, rgba(33, 76, 49,.06) 0%, var(--portal-surface-soft) 45%, var(--portal-surface) 70%, rgba(33, 76, 49,.05) 100%);
}
/* Animated teal gradient surfaces — uniform across ALL metric cards (dark) */
html.dark .wallet-card,
html.dark .total-balance-card {
    background: var(--portal-surface);
    border-color: var(--portal-border);
}
html.dark .quick-action-card {
    background: var(--portal-surface);
}

/* Balance value matches the other metric cards (same size/weight/wrap) */
.total-balance-card strong {
    font-size: clamp(24px, 2.2vw, 36px);
    font-weight: 760;
    line-height: 1.04;
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Collapse button stays readable on hover (esp. light theme) */
.sidebar-collapse:hover {
    background: var(--portal-accent-soft);
    border-color: var(--portal-accent);
    color: var(--portal-accent-soft-ink);
}

/* ===== Active session rows: device icon + layout ===== */
.session-device-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    color: var(--portal-accent-soft-ink);
    flex: none;
}
.session-icon-svg { display: block; }
.session-meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.session-location { color: var(--portal-muted); font-size: 12px; }
.session-location::before { content: "\1F4CD\00a0"; }
.session-revoke-all-form { margin: 0; }
.session-revoke-all-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

/* ===== Refined dropdown menus (language + user) — match site styling ===== */
.dropdown-menu {
    border-radius: 14px;
    border: 1px solid var(--portal-border);
    box-shadow: 0 12px 30px rgba(15,30,25,.10);
    padding: 6px;
    top: calc(100% + 8px);
}
html.dark .dropdown-menu {
    box-shadow: 0 16px 34px rgba(0,0,0,.42);
}
/* Language menu */
.language-menu {
    min-width: 206px;
    width: 206px;
    padding: 6px;
}
.language-menu a {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 0 10px;
    min-height: 0;
    padding: 7px 10px;
    border-radius: 10px;
}
.language-menu a span {
    font-size: 15px;
}
.language-menu a strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
}
.language-menu a small {
    font-size: 11px;
    line-height: 1.1;
}
.language-menu a.active {
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
}
/* User menu */
.user-dropdown {
    min-width: 208px;
    width: 208px;
    padding: 6px;
}
.dropdown-user {
    padding: 8px 10px 9px;
    margin: 0 0 4px;
}
.dropdown-user strong { font-size: 13.5px; }
.dropdown-user span { font-size: 9.5px; }
.user-dropdown a,
.user-dropdown .logout-form button {
    font-size: 13px;
    font-weight: 600;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 9px;
}
.user-dropdown .logout-form { margin-top: 4px; padding-top: 5px; }

/* Minimalist active-sessions list: flat rows with hairline dividers */
.sessions-card .session-list {
    gap: 0;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    overflow: hidden;
}
.sessions-card .session-row {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--portal-border);
    border-radius: 0;
    min-height: 0;
    padding: 13px 16px;
}
.sessions-card .session-row:last-child { border-bottom: none; }
.session-device-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--portal-muted);
}
html.dark .session-device-icon { background: transparent; }
.session-device-icon .session-icon-svg { width: 22px; height: 22px; }
.session-row code {
    color: var(--portal-muted);
    opacity: .6;
    font-size: 11px;
}
.session-row .session-current {
    font-weight: 600;
    white-space: nowrap;
}

/* Seamless (PJAX) navigation: subtle progress cue while fetching */
body.pjax-loading { cursor: progress; }

/* A submitted control shows it is working immediately (and can't be double-fired). */
.is-busy, button.is-busy, .cat-buy-btn.is-busy, .dep1-continue.is-busy {
    opacity: .62;
    cursor: progress;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
}

/* Site-styled select dropdowns (replace native <select>) */
.portal-select { position: relative; min-width: 0; width: 100%; }
.messenger-filters .portal-select { flex: 1 1 130px; width: auto; min-width: 0; }
.ns-filter-grid .portal-select { width: 100%; }
.portal-select .portal-select-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    color: var(--portal-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease;
}
.portal-select .portal-select-button:hover { border-color: var(--portal-accent); }
.portal-select .portal-select-button .chevron {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--portal-muted);
    transition: transform .2s ease;
}
.portal-select[data-dropdown].open .portal-select-button .chevron { transform: rotate(180deg); }
/* The select toggle is a NEUTRAL control, not an accent button: defeat the
   global `html.dark button(:hover) { background: accent; color: #07130f }` so
   the label never goes dark-on-dark (invisible) when hovered in dark theme. */
html.dark .portal-select .portal-select-button,
html.dark .portal-select .portal-select-button:hover {
    background: var(--portal-surface);
    color: var(--portal-text);
}
html.dark .messenger-filters .portal-select .portal-select-button,
html.dark .messenger-filters .portal-select .portal-select-button:hover {
    background: var(--portal-surface-soft);
    color: var(--portal-text);
}
.portal-select-menu {
    right: auto;
    left: 0;
    min-width: 100%;
}
.dropdown-menu .dropdown-option {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 10px;
    padding: 8px 10px;
    color: var(--portal-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.dropdown-menu .dropdown-option:hover { background: var(--portal-hover); color: var(--portal-text); }
.dropdown-menu .dropdown-option.active {
    background: var(--portal-accent-soft);
    /* Full text colour (not accent) — accent-on-accent-soft was too low-contrast
       in dark; the soft background + bold weight already signal "selected". */
    color: var(--portal-text);
    font-weight: 600;
}
/* Hovering the already-selected option must stay readable (accent text on
   accent-soft was too low-contrast in dark). */
.dropdown-menu .dropdown-option.active:hover { background: var(--portal-hover); color: var(--portal-text); }

/* Home greeting with a glowing time-of-day badge */
.home-greet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.home-greet-copy { min-width: 0; }
.home-greet-badge {
    position: relative;
    flex: none;
    width: 66px;
    height: 66px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
}
.home-greet-badge::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(33, 76, 49, .38), transparent 70%);
    z-index: -1;
    animation: greetPulse 3.6s ease-in-out infinite;
}
html.dark .home-greet-badge::before { background: radial-gradient(circle, rgba(63, 199, 127, .30), transparent 70%); }
@keyframes greetPulse {
    0%, 100% { transform: scale(1); opacity: .45; }
    50% { transform: scale(1.14); opacity: .8; }
}
.home-greet-icon { width: 32px; height: 32px; }
@media (prefers-reduced-motion: reduce) { .home-greet-badge::before { animation: none; } }

/* Home hero: identity + primary CTA (replaces the plain greeting) */
.home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.home-hero-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.home-hero-avatar {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--portal-accent);
    color: #ffffff;
    font-family: var(--portal-heading-font);
    font-weight: 800;
    font-size: 22px;
    flex: none;
}
html.dark .home-hero-avatar { color: var(--portal-accent-ink); }
.home-hero-meta { display: grid; gap: 2px; min-width: 0; }
.home-hero-eyebrow { color: var(--portal-muted); font-size: 13px; }
.home-hero-meta strong {
    font-family: var(--portal-heading-font);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.1;
    color: var(--portal-text);
    overflow-wrap: anywhere;
}
.home-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--portal-accent);
    color: #ffffff;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
html.dark .home-hero-cta { color: var(--portal-accent-ink); }
.home-hero-cta:hover { box-shadow: 0 12px 26px rgba(33, 76, 49, .28); }
.home-hero-cta:active { transform: var(--mo-press); }
.home-hero-cta-icon { width: 18px; height: 18px; flex: none; }

/* Site-styled date field + custom calendar popup */
.portal-date { position: relative; min-width: 0; width: 100%; }
.portal-date .portal-date-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    color: var(--portal-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease;
}
.portal-date .portal-date-button:hover {
    border-color: var(--portal-accent);
    background: var(--portal-surface-soft);
    color: var(--portal-text);
}
.portal-date .portal-date-button .portal-date-placeholder { color: var(--portal-muted); font-weight: 500; }
.portal-date-icon { width: 16px; height: 16px; flex: none; color: var(--portal-muted); }
/* Right-align the calendar so it never overflows the viewport edge */
.portal-date-menu { right: 0; left: auto; min-width: 264px; padding: 12px; }
.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cal-title { font-weight: 700; font-size: 14px; color: var(--portal-text); }
.portal-date-menu .cal-nav {
    appearance: none;
    background: transparent;
    border: 1px solid var(--portal-border);
    box-shadow: none;
    color: var(--portal-text);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.portal-date-menu .cal-nav:hover { border-color: var(--portal-accent); color: var(--portal-accent-soft-ink); background: transparent; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--portal-muted); padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-empty { height: 34px; }
.portal-date-menu .cal-day {
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    height: 34px;
    border-radius: 8px;
    color: var(--portal-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .14s ease, color .14s ease;
}
.portal-date-menu .cal-day:hover { background: var(--portal-hover); color: var(--portal-text); }
.portal-date-menu .cal-day.today { box-shadow: inset 0 0 0 1px var(--portal-border); }
.portal-date-menu .cal-day.selected { background: var(--portal-accent); color: #ffffff; }
html.dark .portal-date-menu .cal-day.selected { color: var(--portal-accent-ink); }

/* Roomier dropdown menus: spacing between items so the hover highlight
   never touches the neighbouring rows or the menu edge. */
[data-dropdown].open > .dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dropdown-menu { padding: 8px; }

/* Multi-step security modals (password / 2FA) */
.modal-step { display: grid; gap: 14px; }
.modal-step[hidden] { display: none; }
.security-step-actions { display: flex; gap: 12px; }
.security-step-actions button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 12px;
}
.ghost-button {
    appearance: none;
    background: transparent;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    color: var(--portal-text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    min-height: 42px;
    padding: 0 16px;
}
.ghost-button:hover { border-color: var(--portal-accent); color: var(--portal-accent-soft-ink); background: transparent; }
/* Defeat the global dark button accent fill so the ghost/cancel stays an outline */
html.dark .ghost-button { background: transparent; color: var(--portal-text); }
html.dark .ghost-button:hover { background: transparent; border-color: var(--portal-accent); color: var(--portal-accent-soft-ink); }

/* Quiet placeholder dash for empty metric values */
.metric-empty {
    color: var(--portal-muted);
    font-weight: 500;
    font-size: .62em;
    vertical-align: middle;
}

/* Smooth, calm interaction shared by the sidebar and the settings plaques.
   No ripple / spring / icon jump — just a soft hover wash and a gentle press. */
.sidebar-link,
.sidebar-collapse,
.settings-list .settings-row {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease,
                transform .2s ease, box-shadow .2s ease;
}
/* Hover for the settings plaques = same as the sidebar: soft background wash
   (matching the sidebar's exact tints) + the sidebar's signature glide, here on
   the chevron, easing to the accent colour. No lift / spring. */
html:not(.dark) .settings-list .settings-row:hover {
    transform: none;
    border-color: var(--portal-border);
    box-shadow: var(--portal-shadow);
    background: var(--portal-hover);
}
html.dark .settings-list .settings-row:hover {
    transform: none;
    border-color: var(--portal-border);
    box-shadow: var(--portal-shadow);
    background: rgba(148, 163, 184, .10);
    color: var(--portal-text);
}
html.dark .settings-list .settings-row:hover .settings-row-label { color: var(--portal-text); }
.settings-list .settings-row .settings-row-chevron {
    transition: transform .28s cubic-bezier(.25, .8, .35, 1), color .24s ease;
}
.settings-list .settings-row:hover .settings-row-chevron {
    color: var(--portal-accent-soft-ink);
}
/* Settings plaques: canonical press — scale(.97) + opaque press fill. */
.settings-list .settings-row:active {
    transform: var(--mo-press);
    background: var(--portal-press);
}
html.dark .settings-list .settings-row:active { color: var(--portal-text); }

/* Sidebar press: canonical press — scale(.97) + opaque press fill. */
.sidebar-link:active,
.sidebar-collapse:active {
    transform: var(--mo-press);
    background: var(--portal-press);
}
@media (prefers-reduced-motion: reduce) {
    .settings-list .settings-row:active,
    .sidebar-link:active,
    .sidebar-collapse:active { transform: none; }
}

/* Restrained section labels (e.g. "Быстрые действия", "Финансовые операции") */
.quick-actions-panel > h2,
.profile-section > h2 {
    font-family: var(--portal-font-ui);
    font-size: clamp(16px, 1.15vw, 19px);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--portal-muted);
    margin: 0;
}

/* Settings list rows (security) */
.settings-list {
    display: grid;
    gap: 10px;
}
/* Each row is its own card (spaced apart). High specificity so the global
   html.dark button accent fill never leaks in. */
.settings-list .settings-row {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    color: var(--portal-text);
    cursor: pointer;
    font: inherit;
    padding: 16px 18px;
    text-align: left;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.settings-list .settings-row:hover {
    background: var(--portal-surface);
    border-color: var(--portal-accent);
}
.settings-list .settings-row:active { transform: var(--mo-press); }
.settings-row-label { font-weight: 600; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.settings-row-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--portal-muted);
    flex: none;
    white-space: nowrap;
}
.settings-row-mask { letter-spacing: 2px; }
.settings-row-chevron { width: 18px; height: 18px; color: var(--portal-muted); flex: none; }

/* Profile sections + minimalist security action buttons */
/* minmax(0,1fr) stops a long no-wrap row label (e.g. "Двухфакторная
   аутентификация") from blowing the single grid column past the viewport,
   which clipped the cards on the right. */
.profile-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.security-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.security-action {
    appearance: none;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    color: var(--portal-text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    min-height: 60px;
    padding: 16px 18px;
    text-align: left;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.security-action:hover {
    border-color: var(--portal-accent);
    box-shadow: 0 14px 30px rgba(15,30,25,.10);
}
html.dark .security-action:hover { box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.security-action:active { transform: var(--mo-press); }
@media (max-width: 720px) {
    .security-actions { grid-template-columns: 1fr; }
}

/* ===== Light theme: standard white cards + teal accents ===== */
html:not(.dark) {
    --portal-bg: #f3f4f8;            /* light page so white cards stand out */
    --portal-accent-soft: #dce9e1;
}
/* Soft accent fill on the active navigation item */
html:not(.dark) .sidebar-link.active {
    background: var(--portal-accent-soft);
}
/* Accent the balance chip in the top bar */
html:not(.dark) .balance-chip {
    border-color: rgba(33, 76, 49,.26);
}
html:not(.dark) .balance-chip strong {
    color: var(--portal-financial-text);
}
/* Faint animated green sheen on cards (отблеск) — like dark theme, lighter shade */
html:not(.dark) .wallet-card,
html:not(.dark) .total-balance-card {
    background: linear-gradient(120deg, rgba(33, 76, 49,.07) 0%, var(--portal-surface) 42%, var(--portal-surface) 60%, rgba(33, 76, 49,.06) 100%);
    border-color: var(--portal-border);
}
html:not(.dark) .quick-action-card {
    background: linear-gradient(120deg, rgba(33, 76, 49,.06) 0%, var(--portal-surface-soft) 50%, var(--portal-surface) 100%);
    border-color: var(--portal-border);
}
/* Balance amount in black (not accent) */
html:not(.dark) .total-balance-card strong {
    color: var(--portal-financial-text);
}
/* Soft green hover glow on interactive cards/rows */
html:not(.dark) .quick-action-card:hover,
html:not(.dark) .security-action:hover,
html:not(.dark) .settings-list .settings-row:hover {
    box-shadow: 0 14px 30px rgba(33, 76, 49,.16);
    border-color: var(--portal-accent);
}
html:not(.dark) .session-device-icon { color: var(--portal-text); }

/* =========================================================================
   Standardized plaque hover — ONE interaction animation across the system.
   Lift + accent border everywhere; in dark it pops via an accent ring + soft
   green glow so the hover is clearly visible.
   ========================================================================= */
.quick-action-card,
.security-action,
.settings-list .settings-row,
.marketplace-channel-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* Light theme */
html:not(.dark) .quick-action-card:hover,
html:not(.dark) .security-action:hover,
html:not(.dark) .settings-list .settings-row:hover,
html:not(.dark) .marketplace-channel-card:hover {
    border-color: var(--portal-accent);
    box-shadow: 0 12px 28px rgba(33, 76, 49,.18);
}
/* Dark theme — clearly visible: lift + accent ring + soft teal glow + depth */
html.dark .quick-action-card:hover,
html.dark .security-action:hover,
html.dark .settings-list .settings-row:hover,
html.dark .marketplace-channel-card:hover {
    border-color: var(--portal-accent);
    box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 0 1px var(--portal-accent), 0 0 22px rgba(63, 199, 127, .20);
}
/* Button-based plaques keep their surface AND readable text on hover
   (defeat the global html.dark button:hover accent fill + dark text). */
html.dark .security-action:hover,
html.dark .settings-list .settings-row:hover {
    background: var(--portal-surface);
    color: var(--portal-text);
}
html.dark .settings-list .settings-row:hover .settings-row-label {
    color: var(--portal-text);
}
/* Unified press feedback */
.quick-action-card:active,
.security-action:active,
.settings-list .settings-row:active,
.marketplace-channel-card:active {
    transform: var(--mo-press);
}

/* =========================================================================
   Mobile layout — fixed bottom tab-bar nav (scrollable) + compact top bar.
   Authoritative block at EOF: overrides the older tablet/mobile rules.
   ========================================================================= */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 860px) {
    .nav-toggle, .nav-backdrop { display: none !important; }

    .app-shell { display: block !important; grid-template-columns: none !important; }

    /* Sidebar -> fixed bottom tab bar (swipe horizontally through items) */
    .sidebar {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        transform: none !important;
        z-index: 200;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        gap: 2px !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* Safe-area: max() instead of 6px+inset — the doubled padding painted a
           tall dead band under the tab labels on iPhones (the "dark space").
           -10px still clears the home indicator; labels may sit within its
           upper margin. */
        padding: 6px 8px max(6px, calc(env(safe-area-inset-bottom) - 10px)) !important;
        background: var(--portal-surface);
        border-top: 1px solid var(--portal-border);
        border-right: none !important;
        /* The second (surface) shadow paints a solid block below the bar so the
           Chrome dynamic-toolbar scroll gap is filled, not see-through. */
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .18), 0 160px 0 160px var(--portal-surface);
        scrollbar-width: none;
    }
    .sidebar::-webkit-scrollbar { display: none; }
    .sidebar-collapse { display: none !important; }

    /* Flatten groups into a single scrollable row of tab items */
    .sidebar-group { display: contents !important; }
    .sidebar-group-title { display: none !important; }
    /* display:contents flattens the nav so every tab is a direct flex child of
       the bar — lets CSS `order` push the wide-label tabs to the end. */
    .sidebar-nav {
        display: contents !important;
    }
    /* Mobile bottom bar = five core client tabs (Home / Catalog / Orders /
       Transactions / Settings) that fill the width evenly — no horizontal
       scroll, nothing cut off. Steam top-up, Balance and the locked/secondary
       items (Profile, Messages, Marketplaces) are dropped for a cleaner bar;
       Balance stays one tap away via the top-bar balance chip, the rest via
       quick actions. */
    .sidebar-link[data-nav="steam"],
    .sidebar-link[data-nav="balance"],
    .sidebar-link[data-nav="profile"],
    .sidebar-link[data-nav="inbox"],
    .sidebar-link[data-nav="marketplaces"] {
        display: none !important;
    }
    .sidebar {
        overflow-x: hidden !important;
        justify-content: space-between;
        gap: 0 !important;
    }
    .sidebar-link {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 58px;
        padding: 6px 4px !important;
        grid-template-columns: none !important;
        border-radius: 12px;
        text-align: center;
        overflow: visible !important;
    }
    .sidebar-link span {
        display: block !important;
        opacity: 1 !important;
        font-size: 11px !important;
        line-height: 1.05;
        white-space: nowrap;
    }
    .sidebar-link .nav-icon { width: 23px; height: 23px; }
    .sidebar-link.active::before { display: none !important; }
    .sidebar-link.active { background: var(--portal-accent-soft); color: var(--portal-accent-soft-ink); }

    /* Top bar: page + theme + language + profile, single row.
       NOT sticky on mobile: sticky/backdrop-filter create a stacking context
       that traps the dropdowns behind the content. A plain relative bar lets
       the language/profile menus float above everything. */
    .topbar {
        flex-wrap: nowrap !important;
        gap: 8px;
        padding: 12px 14px !important;
        position: relative !important;
        z-index: auto !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .topbar-actions .dropdown-menu { z-index: 400 !important; }
    /* Tap-to-switch language on mobile: no menu, so drop the chevron and
       enlarge the flag (it inherits the tiny 12px button font otherwise). */
    .language-button .chevron { display: none !important; }
    .language-menu { display: none !important; }
    .language-button {
        min-height: 40px !important;
        padding: 0 12px !important;
    }
    .language-button > span {
        font-size: 22px !important;
        line-height: 1;
    }
    /* Keep the theme toggle the same height as the language button */
    .theme-toggle { min-height: 40px !important; }
    /* Hide breadcrumbs on mobile — the bottom tab bar already shows the section,
       which frees the top bar for the balance + controls. */
    .breadcrumbs { display: none !important; }
    /* overflow:visible is essential — otherwise the action bar clips the open
       language/profile dropdown to its own height. */
    .topbar-actions { gap: 8px; flex: 1 1 auto; justify-content: flex-end; overflow: visible !important; }
    /* Balance shown on the left (full "Баланс: $0.00" like desktop),
       controls pushed to the right */
    .balance-chip {
        display: inline-flex !important;
        margin-right: auto;
        flex: none;
        min-width: 0;
        white-space: nowrap;
        gap: 8px;
        padding: 0 12px;
    }
    .balance-chip span { display: inline !important; }

    /* Content: leave room for the bottom bar */
    main { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)) !important; }
    .portal-workspace { min-width: 0; }

    /* Dropdowns stay inside the screen */
    .topbar-actions .dropdown-menu { right: 0; left: auto; max-width: calc(100vw - 28px); }

    /* Modals + calendar fit the small screen. Center the panel (an older rule
       pinned it to the bottom, which read as a shifted/offset window). */
    .portal-modal {
        padding: 14px !important;
        align-items: center !important;
    }
    .portal-modal-panel { align-items: stretch !important; }
    .authenticator-popup { align-items: center !important; }
    .portal-date-menu { min-width: 0; width: min(92vw, 300px); }

    /* 2FA setup key: wrap instead of overflowing the panel (was a sideways
       scroll / off-centre window). */
    .totp-setup-min { max-width: 100%; }
    .totp-setup-min .totp-key {
        white-space: normal !important;
        word-break: break-all;
        max-width: 100%;
        letter-spacing: .03em;
        font-size: 14px;
    }
    .totp-setup-min .totp-qr-image { max-width: 100%; }

    /* No focus "selected" ring on touch — it only appears on accidental taps
       and reads as an unwanted highlight. Kill the outline AND the custom ring,
       restoring each element's resting look. */
    a:focus, a:focus-visible,
    button:focus, button:focus-visible,
    [role="button"]:focus, [role="button"]:focus-visible,
    [data-dropdown-toggle]:focus, [data-dropdown-toggle]:focus-visible,
    [tabindex]:focus, [tabindex]:focus-visible,
    .quick-action-card:focus, .quick-action-card:focus-visible,
    .settings-row:focus, .settings-row:focus-visible,
    .sidebar-link:focus, .sidebar-link:focus-visible,
    .marketplace-channel-card:focus, .messenger-thread:focus,
    .home-feed-row:focus, .session-row:focus {
        outline: none !important;
    }
    .quick-action-card:focus, .quick-action-card:focus-visible,
    .catalog-category-card:focus, .catalog-category-card:focus-visible,
    .tool-link:focus, .tool-link:focus-visible {
        border-color: var(--portal-border) !important;
        box-shadow: var(--portal-shadow) !important;
    }
    .language-button:focus, .language-button:focus-visible,
    .theme-toggle:focus, .theme-toggle:focus-visible {
        border-color: var(--portal-border) !important;
        box-shadow: none !important;
    }
    .sidebar-link:focus, .sidebar-link:focus-visible {
        border-color: transparent !important;
        box-shadow: none !important;
    }
    .user-menu-button:focus, .user-menu-button:focus-visible,
    .balance-chip:focus, .balance-chip:focus-visible {
        box-shadow: none !important;
    }
    .settings-list .settings-row:focus,
    .settings-list .settings-row:focus-visible {
        border-color: var(--portal-border) !important;
        box-shadow: none !important;
    }
    button:focus, button:focus-visible {
        border-color: var(--portal-border) !important;
        box-shadow: none !important;
    }

    /* Prevent iOS Safari from zooming in on focus: inputs must be >= 16px */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Financial-operations cards: stack full-width so titles fit on one line
       instead of being squeezed into two cramped columns. */
    .home-activity-grid { grid-template-columns: 1fr !important; }
    .home-feed-card { padding: 16px 18px !important; }
    .home-feed-head { margin-bottom: 10px; }
    .home-feed-head h2,
    .home-feed-head h3 { font-size: 18px; }
    .home-feed-empty { padding: 14px 0 !important; }

    /* Tap feedback — ONE standard across the whole app: a soft, smooth dip
       (no spring/bounce). !important so per-section :active rules (pagination,
       cards, threads, …) all settle into the same feel. */
    .sidebar-link,
    .language-button,
    .theme-toggle,
    .user-menu-button,
    .balance-chip,
    .quick-action-card,
    .settings-row,
    .security-action,
    .home-feed-head a,
    .home-feed-row,
    .session-row,
    .marketplace-channel-card,
    .messenger-thread,
    .catalog-category-card,
    .tool-link,
    .home-hero-cta,
    .ns-pagination button,
    button {
        transition:
            transform .17s ease,
            opacity .17s ease,
            background-color .17s ease,
            color .17s ease,
            border-color .17s ease,
            box-shadow .17s ease !important;
    }
    .sidebar-link:active,
    .language-button:active,
    .theme-toggle:active,
    .user-menu-button:active,
    .balance-chip:active {
        transform: var(--mo-press) !important;
        opacity: 1 !important;
    }
    /* Generic buttons (modal/form): no scale "spring" — just a subtle dim that
       works on filled buttons too (a bg highlight would hide white text). */
    button:active,
    a:active {
        transform: none !important;
        opacity: .8 !important;
    }
    /* Tiles, rows, dropdown options and pagination use a background highlight
       instead of a scale (no "jump") — same feel as the cards. */
    .quick-action-card:active,
    .settings-row:active,
    .settings-list .settings-row:active,
    .security-action:active,
    .home-feed-row:active,
    .session-row:active,
    .marketplace-channel-card:active,
    .messenger-thread:active,
    .catalog-category-card:active,
    .tool-link:active,
    .home-hero-cta:active,
    .dropdown-option:active,
    .dropdown-menu .dropdown-option:active,
    .portal-select-button:active,
    .portal-date-button:active,
    .ns-pagination button:active:not(:disabled) {
        transform: none !important;
        opacity: 1 !important;
        background: var(--portal-press) !important;
    }
    .home-feed-head a:active {
        opacity: .6 !important;
    }

    /* Quick-action tiles: horizontal layout (icon left, text right) so the wide
       empty space beside the icon is used. */
    .quick-action-card {
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: "icon title" "icon body" !important;
        align-items: center;
        align-content: center;
        column-gap: 14px !important;
        row-gap: 3px !important;
        min-height: 0 !important;
        padding: 14px 16px !important;
    }
    .quick-action-card > span { grid-area: icon; align-self: center; }
    .quick-action-card > strong { grid-area: title; align-self: end; }
    .quick-action-card > small { grid-area: body; align-self: start; }

    /* Summary metric cards: two per row and compact (was one tall card per row
       with lots of empty space). */
    .banking-balance-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .total-balance-card,
    .wallet-card {
        min-height: 0 !important;
        padding: 14px !important;
        gap: 6px !important;
        align-content: start !important;
        border-radius: 14px !important;
    }
    .total-balance-card span,
    .wallet-card span { font-size: 10px !important; }
    .total-balance-card strong { font-size: 30px !important; }
    .wallet-card strong {
        font-size: 19px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.15;
    }
    .total-balance-card small,
    .wallet-card small { font-size: 11px !important; }
}

/* Mobile login: align to top so the keyboard never covers the submit button,
   and make taps snappy/reliable on touch devices. */
button,
a,
input,
label,
.sidebar-link,
.settings-row,
.quick-action-card,
.security-action { touch-action: manipulation; }

@media (max-width: 860px) {
    .login-shell {
        align-content: center !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 24px 14px !important;
        min-height: 100dvh;
        overflow-y: auto;
    }
    .login-panel {
        width: min(440px, calc(100vw - 28px)) !important;
        margin: auto !important;
        position: relative;
        z-index: 1;
    }
    .login-form button { min-height: 50px; }
}

/* =========================================================================
   Card/row tap targets press like plain buttons — never a focus "ring".
   Global (any device) + iOS tap-highlight off, so this can't be missed.
   ========================================================================= */
a,
button,
[role="button"],
[data-dropdown-toggle],
.quick-action-card,
.settings-list .settings-row,
.sidebar-link,
.marketplace-channel-card,
.messenger-thread,
.catalog-category-card,
.tool-link,
.home-feed-row {
    -webkit-tap-highlight-color: transparent;
}
.quick-action-card:focus,
.quick-action-card:focus-visible,
.settings-list .settings-row:focus,
.settings-list .settings-row:focus-visible,
.marketplace-channel-card:focus,
.marketplace-channel-card:focus-visible,
.messenger-thread:focus,
.messenger-thread:focus-visible,
.catalog-category-card:focus,
.catalog-category-card:focus-visible,
.tool-link:focus,
.tool-link:focus-visible,
.home-feed-row:focus,
.home-feed-row:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* The focus "ring" is the row/card BORDER turning accent — neutralise the
   border colour too (the outline/box-shadow rule above wasn't enough on its
   own). Global, every device/state. */
.settings-list .settings-row:focus,
.settings-list .settings-row:focus-visible,
.quick-action-card:focus,
.quick-action-card:focus-visible,
button:focus,
button:focus-visible,
a:focus,
a:focus-visible,
[data-dropdown-toggle]:focus,
[data-dropdown-toggle]:focus-visible {
    outline: none !important;
    border-color: var(--portal-border) !important;
}

/* =========================================================================
   ROOT CAUSE of the "stuck teal outline": on touch (iOS/WebKit) a tap sticks
   the :hover state until you tap elsewhere, and these elements turn their
   border accent on :hover. Disable hover effects on touch devices — only the
   :active press animation provides feedback. (Desktop hover is unaffected.)
   ========================================================================= */
@media (hover: none) {
    /* Reset the colour/glow part of :hover ALWAYS (kills the teal border).
       NB: do NOT reset transform here — that would also cancel the press
       animation, because on iOS a tap is :hover + :active at the same time. */
    /* Always reset the teal border, glow and lift (flat on touch). Background
       is reset only when NOT pressing, so the press highlight can show. */
    .settings-list .settings-row:hover,
    .quick-action-card:hover,
    .marketplace-channel-card:hover,
    .messenger-thread:hover,
    .catalog-category-card:hover,
    .security-action:hover,
    .tool-link:hover,
    .home-feed-row:hover {
        border-color: var(--portal-border) !important;
        box-shadow: var(--portal-shadow) !important;
        transform: none !important;
    }
    .sidebar-link:hover {
        border-color: transparent !important;
        transform: none !important;
    }
    .settings-list .settings-row:hover .settings-row-chevron {
        transform: none !important;
        color: var(--portal-muted) !important;
    }
    .settings-list .settings-row:hover:not(.is-pressing),
    .quick-action-card:hover:not(.is-pressing),
    .marketplace-channel-card:hover:not(.is-pressing),
    .messenger-thread:hover:not(.is-pressing),
    .catalog-category-card:hover:not(.is-pressing),
    .security-action:hover:not(.is-pressing),
    .tool-link:hover:not(.is-pressing),
    .home-feed-row:hover:not(.is-pressing) {
        background: var(--portal-surface) !important;
    }
    .sidebar-link:hover:not(.is-pressing),
    .language-button:hover:not(.is-pressing),
    .theme-toggle:hover:not(.is-pressing),
    .user-menu-button:hover:not(.is-pressing) {
        background: transparent !important;
    }
}

/* Press feedback (JS adds .is-pressing on a real tap). Default = a subtle dim
   (no scale "spring"). Small controls keep a gentle scale dip; ROWS and cards
   highlight their background only (rules below) — see the press system in
   portal-wprovider.css §2 for why a scale never goes on a row.
   Press-in rides --mo-press-in; the release curve lives on the resting rule in
   the skin sheet, so nothing here declares the way back out. */
.is-pressing {
    transform: var(--mo-press) !important;
    opacity: 1 !important;
    transition: transform var(--mo-press-in) var(--mo-ease-press-in), background-color var(--mo-press-in) var(--mo-ease-press-in) !important;
}
.language-button.is-pressing,
.theme-toggle.is-pressing,
.user-menu-button.is-pressing,
.balance-chip.is-pressing {
    transform: var(--mo-press) !important;
    opacity: 1 !important;
}
/* .sidebar-link moved OUT of the scale list above and into the row list below:
   it is a 240x44 plate, and scaling it narrowed the plate and resampled the
   label instead of reading as a press. */
html .sidebar-link.is-pressing,
html .settings-list .settings-row.is-pressing,
html .quick-action-card.is-pressing,
html .marketplace-channel-card.is-pressing,
html .messenger-thread.is-pressing,
html .catalog-category-card.is-pressing,
html .security-action.is-pressing,
html .tool-link.is-pressing,
html .home-feed-row.is-pressing,
html .session-row.is-pressing,
html .dropdown-option.is-pressing,
html .dropdown-menu .dropdown-option.is-pressing,
html .portal-select-button.is-pressing,
html .portal-date-button.is-pressing,
html .messenger-unread-toggle.is-pressing,
html .ns-pagination button.is-pressing {
    transform: none !important;
    opacity: 1 !important;
    background: var(--portal-press-row) !important;
    transition: background-color var(--mo-press-in) var(--mo-ease-press-in) !important;
}
/* …except the current nav item, which is already on the soft accent: the neutral
   row tint would make it blink grey. It deepens its own accent instead. */
html .sidebar-link.active.is-pressing {
    background: var(--portal-accent-press) !important;
}

/* The language flag is a direct toggle (click = switch language), no dropdown,
   on desktop and mobile alike — hide the chevron and the menu everywhere. */
.language-button .chevron { display: none !important; }
.language-menu { display: none !important; }

/* =========================================================================
   GLOBAL touch fix: on touch devices :hover sticks after a tap (iOS/WebKit),
   and many elements lift/scale on :hover (e.g. `button:hover { translateY }`).
   That sticky transform is the "jumping" feedback the user sees. Neutralise
   ALL hover transforms on touch — but NOT while actually pressing
   (:active / .is-pressing), so the deliberate press animation still shows.
   ========================================================================= */
@media (hover: none) {
    button:hover:not(:active):not(.is-pressing),
    a:hover:not(:active):not(.is-pressing),
    [role="button"]:hover:not(:active):not(.is-pressing),
    [tabindex]:hover:not(:active):not(.is-pressing),
    [data-dropdown-toggle]:hover:not(:active):not(.is-pressing),
    .dropdown-option:hover:not(:active):not(.is-pressing),
    .ns-pagination button:hover:not(:active):not(.is-pressing),
    .sidebar-link:hover:not(:active):not(.is-pressing),
    .quick-action-card:hover:not(:active):not(.is-pressing),
    .settings-list .settings-row:hover:not(:active):not(.is-pressing),
    .marketplace-channel-card:hover:not(:active):not(.is-pressing),
    .messenger-thread:hover:not(:active):not(.is-pressing),
    .catalog-category-card:hover:not(:active):not(.is-pressing),
    .tool-link:hover:not(:active):not(.is-pressing),
    .security-action:hover:not(:active):not(.is-pressing),
    .home-hero-cta:hover:not(:active):not(.is-pressing),
    .authenticator-open-button:hover:not(:active):not(.is-pressing) {
        transform: none !important;
    }
    /* Table-row hover lift never makes sense on touch. */
    tr:hover td {
        transform: none !important;
    }
}

/* Avatar opens the account menu — show a small chevron next to it so it's
   obvious the avatar is a tappable menu (rotates when the menu is open). */
.identity.user-menu .user-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: auto;
    min-width: 0;
    padding: 0 3px 0 0;
    border-radius: 999px;
}
.user-menu-chevron {
    width: 14px;
    height: 14px;
    color: var(--portal-muted);
    flex: none;
    transition: transform .2s ease, color .2s ease;
}
.user-menu[data-dropdown].open .user-menu-chevron {
    transform: rotate(180deg);
    color: var(--portal-text);
}

/* =========================================================================
   Press/hover ported 1:1 from the .portal-select ("Все") control.
   On the desktop (pointer) site the home quick-action plaques and the settings
   security rows (change password / two-factor) must interact EXACTLY like the
   "Все" dropdown button: flat at rest AND when pressed, with only the border
   easing to the accent on hover — no lift, no scale "spring", no shadow glow,
   no background wash. Held at resting values in both themes via !important so
   the scattered themed lift/glow/scale rules above are all defeated.
   Scoped to (hover: hover) so the touch press standard (accent-soft highlight)
   is left untouched on phones/tablets.
   ========================================================================= */
@media (hover: hover) {
    .quick-action-card,
    .settings-list .settings-row {
        transition: border-color var(--mo-fast) var(--mo-ease) !important;
    }
    /* Hover = border-color only, exactly like "Все". */
    .quick-action-card:hover,
    html:not(.dark) .quick-action-card:hover,
    html.dark .quick-action-card:hover {
        transform: none !important;
        box-shadow: var(--portal-shadow) !important;
        border-color: var(--portal-accent) !important;
    }
    .settings-list .settings-row:hover,
    html:not(.dark) .settings-list .settings-row:hover,
    html.dark .settings-list .settings-row:hover {
        transform: none !important;
        box-shadow: var(--portal-shadow) !important;
        background: var(--portal-surface) !important;
        border-color: var(--portal-accent) !important;
        color: var(--portal-text) !important;
    }
    /* Press = identical to hover: no movement, no scale (matches "Все"). */
    .quick-action-card:active {
        transform: none !important;
        box-shadow: var(--portal-shadow) !important;
        border-color: var(--portal-accent) !important;
    }
    .settings-list .settings-row:active {
        transform: none !important;
        box-shadow: var(--portal-shadow) !important;
        background: var(--portal-surface) !important;
        border-color: var(--portal-accent) !important;
        color: var(--portal-text) !important;
    }
}

/* =========================================================================
   Marketplace center — minimalist account cards (matches the home cards:
   calm surface, hairline border, per-account rows with nick / balance /
   validation, and a quiet "validate" action).
   ========================================================================= */
.mp-card {
    display: grid;
    gap: 14px;
    align-content: start;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    box-shadow: var(--portal-shadow);
    padding: 18px 18px 14px;
}
.mp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mp-card-title { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.mp-card-title strong { color: var(--portal-text); font-size: 18px; font-weight: 700; }
.mp-card-code { color: var(--portal-muted); font-size: 12px; }
.mp-status {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--portal-border);
    color: var(--portal-muted);
    background: var(--portal-soft);
    white-space: nowrap;
}
.mp-status.ok { color: var(--portal-good); border-color: color-mix(in srgb, var(--portal-good) 40%, transparent); background: var(--portal-good-soft); }
.mp-status.warn { color: var(--portal-warn); border-color: rgba(238,181,82,.45); background: rgba(238,181,82,.12); }
.mp-status.danger { color: var(--portal-danger); border-color: rgba(220,38,38,.4); background: rgba(220,38,38,.10); }
html.dark .mp-status.warn { color: var(--portal-warn); }

.mp-card-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    color: var(--portal-muted);
    font-size: 12.5px;
}
/* Numbers carry a slightly darker color, not bold weight (override <b>'s default). */
.mp-card-counts b { color: var(--portal-text); font-family: var(--portal-font-number); font-weight: 500; }

.mp-accounts { display: grid; gap: 8px; }
.mp-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--portal-border);
    border-radius: 11px;
    background: var(--portal-soft);
}
.mp-account-trailing { display: flex; align-items: center; gap: 14px; }
.mp-account-main { min-width: 0; display: grid; gap: 3px; }
.mp-account-main strong { color: var(--portal-text); font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-account-key {
    color: var(--portal-muted);
    font-family: var(--portal-font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    display: inline-flex;
    gap: 8px;
}
.mp-account-fpid { color: var(--portal-muted); opacity: .8; }
.mp-account-balance { color: var(--portal-financial-text); font-family: var(--portal-font-number); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
/* Status is a calm signal: muted word + a single tone-colored dot. */
.mp-account-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--portal-muted); white-space: nowrap; }
.mp-state-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; color: var(--portal-muted); flex: none; }
.mp-account-state.ok .mp-state-dot { color: var(--portal-accent-soft-ink); }
.mp-account-state.warn .mp-state-dot { color: var(--portal-warn); }
.mp-account-state.danger .mp-state-dot { color: var(--portal-danger); }
.mp-account-state.muted .mp-state-dot { color: var(--portal-muted); }
html.dark .mp-account-state.warn .mp-state-dot { color: var(--portal-warn); }
/* No row-level opacity: it bleeds into the absolutely-positioned dropdown menu
   (a DOM descendant) and makes it translucent. Offline is conveyed by the muted
   state dot + label instead. */

/* Per-row actions behind one "⋯" kebab — reuses the portal data-dropdown
   wrapper + .dropdown-menu (toggle/close handled by portal.js, no new JS). */
.mp-account-menu { position: relative; flex: none; }
/* Parent-scoped so it outweighs the global `html.dark button` accent fill. */
.mp-account-menu .mp-account-kebab {
    appearance: none;
    width: 32px;
    height: 32px;
    min-height: 0;
    /* Zero the global button padding (7px 12px) — it shrank the content box
       below the icon and pushed the dots 1px off-center. */
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--portal-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
/* SVG dots (not a text glyph) so the icon is perfectly centered both axes. */
.mp-account-menu .mp-kebab-icon { width: 18px; height: 18px; display: block; }
[data-dropdown].open > .mp-account-kebab { background: var(--portal-hover); color: var(--portal-text); }
.mp-account-kebab:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 2px; }
@media (hover: hover) {
    .mp-account-kebab:hover { background: var(--portal-hover); color: var(--portal-text); }
}
.mp-account-actions-menu { min-width: 168px; background: var(--portal-surface); }
.mp-account-actions-menu form { margin: 0; }
/* Parent-scoped so it outweighs the global `html.dark button` accent fill —
   these read as flat menu rows, not filled buttons, in both themes. */
.mp-account-actions-menu .mp-action-item {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 10px;
    padding: 8px 10px;
    color: var(--portal-text);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    min-height: 0;
}
.mp-action-item.danger { color: var(--portal-danger); }
/* Defeat the global dark-theme button accent fill on press/focus. */
.mp-action-item:focus,
.mp-action-item:active { background: var(--portal-hover); outline: none; }
.mp-action-item.danger:focus,
.mp-action-item.danger:active { background: rgba(220,38,38,.10); }
@media (hover: hover) {
    .mp-action-item:hover { background: var(--portal-hover); }
    .mp-action-item.danger:hover { background: rgba(220,38,38,.10); }
}
.mp-account-empty { color: var(--portal-muted); font-size: 13px; padding: 12px 13px; border: 1px dashed var(--portal-border); border-radius: 11px; text-align: center; }

/* Connection metadata is developer chrome — collapsed by default, reachable. */
/* padding-top offsets the card's 14px grid gap below so the toggle reads as
   vertically centered between its top hairline and the next line. */
.mp-card-meta { border-top: 1px solid var(--portal-border); padding-top: 13px; }
.mp-card-meta > summary {
    list-style: none;
    cursor: pointer;
    font-size: 11.5px;
    color: var(--portal-muted);
    padding: 4px 0;
    user-select: none;
}
.mp-card-meta > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .mp-card-meta > summary:hover { color: var(--portal-accent-soft-ink); } }
.mp-card-meta-body { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 6px; color: var(--portal-muted); font-size: 11.5px; }

/* Connect-account form embedded in each marketplace card (collapsible). */
.mp-connect { border-top: 1px solid var(--portal-border); padding-top: 13px; }
.mp-connect > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--portal-muted);
    padding: 6px 0;
    user-select: none;
    transition: color .15s ease;
}
.mp-connect > summary::-webkit-details-marker { display: none; }
.mp-connect > summary::before {
    content: "+";
    font-size: 15px;
    line-height: 1;
    /* Inherit the summary's color so the marker matches the label text
       (muted at rest, accent on hover) instead of always glowing green. */
    color: inherit;
    font-weight: 700;
}
.mp-connect[open] > summary::before { content: "\2013"; }
@media (hover: hover) { .mp-connect > summary:hover { color: var(--portal-accent-soft-ink); } }
.mp-connect-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 12px;
}
.mp-connect-form label {
    display: grid;
    gap: 7px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--portal-muted);
}
.mp-connect-form input {
    width: 100%;
    box-sizing: border-box;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    color: var(--portal-text);
    min-height: 40px;
    padding: 9px 12px;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mp-connect-form input::placeholder { color: var(--portal-muted); }
.mp-connect-form input:focus {
    outline: none;
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px var(--portal-accent-ring);
}
/* Full-width, flush with the input above it, calm accent fill.
   Parent-scoped (.mp-card .mp-connect-submit) so it outweighs the global
   `html.dark button { background: var(--portal-accent); color: #07130f }`
   rule the same way the card's kebab/menu rows do (lines 9092, 9119). We
   also restate the loud base-button defaults (min-height:44px / padding /
   font-weight:800 from line 190) so it stops reading as an oversized slab. */
.mp-card .mp-connect-submit {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin-top: 0;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--portal-accent);
    color: var(--portal-accent-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, filter .15s ease;
}
@media (hover: hover) {
    .mp-card .mp-connect-submit:hover { background: var(--portal-accent-dark); }
}
.mp-card .mp-connect-submit:active { filter: brightness(.97); }
.mp-card .mp-connect-submit:focus-visible {
    outline: 2px solid var(--portal-accent);
    outline-offset: 2px;
}

@media (max-width: 620px) {
    /* Stack the account so balance/status drop below the nick + key instead of
       colliding with the long golden_key string. */
    .mp-account { grid-template-columns: 1fr; gap: 9px; }
    .mp-account-trailing { gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
}

/* =========================================================================
   Marketplaces — calm, home-page-style layout. Reuses the home cards
   (.metric-card/.wallet-card) and feeds (.home-feed-card/.home-feed-row);
   only the tab bar, marketplace rows, header, refresh button and the quiet
   meta block are bespoke. Built on defined --portal-* tokens (light/dark free).
   ========================================================================= */
.mp-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-self: start;
    max-width: 100%;
    padding: 4px;
    background: var(--portal-surface-soft);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    overflow-x: auto;
}
.mp-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9px;
    color: var(--portal-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.mp-tab:hover { color: var(--portal-text); }
.mp-tab.active {
    background: var(--portal-accent);
    box-shadow: none;
    color: #ffffff;
}
.mp-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--portal-muted); flex: none; }
.mp-tab-dot.ok { background: var(--portal-good); }
.mp-tab-dot.warn { background: var(--portal-warn); }
.mp-tab-dot.danger { background: var(--portal-danger); }
.mp-tab-dot.muted { background: var(--portal-muted); opacity: .55; }
/* On the active (accent-filled) tab the status dot must read on the accent. */
.mp-tab.active .mp-tab-dot { background: #ffffff; opacity: 1; }
.mp-section-nav {
    display: flex;
    max-width: 100%;
    gap: 5px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    background: var(--portal-surface-soft);
}
.mp-section-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 9px;
    color: var(--portal-muted);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.mp-section-link:hover {
    color: var(--portal-text);
    background: var(--portal-hover);
}
.mp-section-link span {
    display: inline-grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--portal-surface);
    color: var(--portal-text);
    font-family: var(--portal-font-number);
    font-size: 12px;
    font-weight: 700;
}
.mp-anchor-target {
    scroll-margin-top: 96px;
}
.mp-update-icon.ok { color: var(--portal-accent-soft-ink); background: rgba(30, 137, 109, .12); }
.mp-update-icon.warn { color: var(--portal-warn); background: rgba(238,181,82,.16); }
.mp-update-icon.danger { color: var(--portal-danger); background: rgba(220,38,38,.12); }
.mp-update-icon.muted { color: var(--portal-muted); background: var(--portal-hover); }
html.dark .mp-update-icon.warn { color: var(--portal-warn); }
.mp-event-row {
    align-items: center;
    text-decoration: none;
}
.mp-event-row .home-feed-copy strong {
    max-width: 100%;
    white-space: normal;
}
.mp-event-type {
    font-weight: 800;
    letter-spacing: 0;
}
.mp-event-meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    margin-left: auto;
    color: var(--portal-muted);
    font-size: 11.5px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}
.mp-event-severity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--portal-surface-soft);
    color: var(--portal-muted);
}
.mp-event-severity.ok { color: var(--portal-accent-soft-ink); background: rgba(30, 137, 109, .12); }
.mp-event-severity.warn { color: var(--portal-warn); background: rgba(238,181,82,.16); }
.mp-event-severity.danger { color: var(--portal-danger); background: rgba(220,38,38,.12); }
html.dark .mp-event-severity.warn { color: var(--portal-warn); }

@media (max-width: 720px) {
    .mp-event-meta {
        align-items: flex-start;
        margin-left: 0;
        text-align: left;
        white-space: normal;
    }
    
}

/* KPI cards render exactly like the home page's balance cards (same surface,
   size and number font); we only let a long currency value ("184,500.00 RUB")
   wrap instead of clipping. */
.mp-metric strong {
    white-space: normal;
    overflow-wrap: anywhere;
}

.mp-overview-pulse-card {
    margin-top: -2px;
}
.mp-pulse-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    background: var(--portal-border);
}
.mp-pulse-cell {
    display: grid;
    min-height: 92px;
    align-content: center;
    gap: 6px;
    padding: 14px 16px;
    background: var(--portal-surface);
}
.mp-pulse-cell > span {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 800;
}
.mp-pulse-cell > strong {
    min-width: 0;
    color: var(--portal-text);
    font-family: var(--portal-font-number);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.12;
    overflow-wrap: anywhere;
}
.mp-pulse-cell > strong .mp-status {
    font-family: var(--portal-font);
    vertical-align: middle;
}
.mp-pulse-cell > small {
    min-width: 0;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 980px) {
    .mp-pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .mp-pulse-grid { grid-template-columns: 1fr; }
    .mp-pulse-cell { min-height: 78px; }
}

/* Centred empty state so a feed card with no rows still looks finished. */
.mp-empty-state {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    min-height: 150px;
    color: var(--portal-muted);
    text-align: center;
}
.mp-empty-state .mp-empty-icon { width: 26px; height: 26px; opacity: .45; }
.mp-empty-state span { font-size: 13.5px; font-weight: 600; }

/* Clickable marketplace line on the overview — extends .home-feed-row. */
.mp-row { color: inherit; text-decoration: none; border-radius: 12px; padding-left: 12px; padding-right: 12px; }
.mp-row:hover { background: var(--portal-hover); }
.mp-row-end { display: grid; justify-items: end; gap: 6px; text-align: right; }
.mp-row-end .mp-dash { color: var(--portal-muted); font-weight: 700; }
.mp-action-row { color: inherit; text-decoration: none; }
.mp-action-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--portal-surface-soft);
    color: var(--portal-text);
    font-size: 12px;
    font-weight: 800;
}

/* Letter avatar reusing the 52px .home-feed-icon box, tinted by status. */
.mp-glyph { font-family: var(--portal-heading-font); font-size: 19px; font-weight: 800; color: var(--portal-accent-soft-ink); }
.mp-glyph.muted { background: var(--portal-hover); color: var(--portal-muted); }
.mp-glyph.warn { background: rgba(238,181,82,.16); color: var(--portal-warn); }
.mp-glyph.danger { background: rgba(220,38,38,.12); color: var(--portal-danger); }
html.dark .mp-glyph.warn { color: var(--portal-warn); }

/* Detail header — light, no box: avatar + name/status, refresh on the right. */
.mp-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.mp-head-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mp-head-copy { display: grid; gap: 3px; min-width: 0; }
.mp-head-copy strong {
    color: var(--portal-text);
    font-family: var(--portal-heading-font);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}
.mp-head-copy small { color: var(--portal-muted); font-size: 13.5px; }

/* Live "Refresh from FunPay" button. */
.mp-refresh-form { margin: 0; flex: none; }
.mp-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--portal-accent);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        linear-gradient(150deg, var(--portal-accent) 0%, var(--portal-accent-dark) 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.mp-refresh-btn:hover { filter: brightness(1.06); }
.mp-refresh-btn:active { filter: brightness(.92); }
.mp-refresh-icon { width: 17px; height: 17px; }

/* Unread badge on a dialog feed row. */
.mp-feed-badge {
    flex: none;
    min-width: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--portal-accent);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.mp-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 14px;
}
.mp-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--portal-border);
    border-radius: 999px;
    background: var(--portal-surface-soft);
    color: var(--portal-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.mp-status-tab span {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--portal-surface);
    color: var(--portal-text);
    text-align: center;
}
.mp-status-tab.active {
    border-color: color-mix(in srgb, var(--portal-accent) 38%, transparent);
    background: var(--portal-accent-soft);
    color: var(--portal-accent-soft-ink);
}
.mp-sales-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 16px;
}
.mp-sales-card .mp-metric {
    box-shadow: none;
}
.mp-sales-table-wrap {
    margin-top: 0;
}
.mp-sales-table td code {
    display: block;
    max-width: 150px;
    overflow: hidden;
    color: var(--portal-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-sales-table td small {
    display: block;
    max-width: 150px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-product-performance-wrap {
    margin-top: 0;
}
.mp-product-performance-table td {
    white-space: nowrap;
}
.mp-product-performance-table .amount {
    white-space: normal;
    overflow-wrap: anywhere;
}
.mp-chat-table td strong,
.mp-listing-table td strong,
.mp-command-table td strong,
.mp-sales-trend-table td strong,
.mp-account-performance-table td strong,
.mp-product-performance-table td strong,
.mp-customer-performance-table td strong,
.mp-account-health-table td strong,
.mp-automation-table td strong {
    display: block;
    max-width: 240px;
    overflow: hidden;
    color: var(--portal-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-chat-table td small,
.mp-listing-table td small,
.mp-command-table td small,
.mp-sales-trend-table td small,
.mp-account-performance-table td small,
.mp-product-performance-table td small,
.mp-customer-performance-table td small,
.mp-account-health-table td small,
.mp-automation-table td small {
    display: block;
    max-width: 240px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-account-health-wrap {
    margin-top: 0;
}
.mp-chat-unread {
    display: inline-flex;
    min-width: 28px;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--portal-surface-soft);
    color: var(--portal-text);
    font-weight: 800;
}
.mp-table-link {
    color: var(--portal-accent-soft-ink);
    font-weight: 800;
    text-decoration: none;
}
.mp-table-link:hover { text-decoration: underline; }
.mp-automation-wrap {
    margin-top: 0;
}
.mp-automation-table td {
    vertical-align: middle;
}
.mp-automation-table td:first-child small,
.mp-automation-table td:last-child small {
    max-width: 180px;
}
.mp-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 180px;
}
.mp-feature-list .mp-chip {
    margin: 0;
}

.mp-presence {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--portal-muted);
    font-size: 12.5px;
    font-weight: 800;
}
.mp-presence i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--portal-muted);
    opacity: .65;
}
.mp-presence.ok { color: var(--portal-good); }
.mp-presence.ok i { background: var(--portal-good); opacity: 1; }
.mp-chat-table td[data-label="PRESENCE"] small,
.mp-chat-table td[data-label="PRESENCE"] a {
    display: block;
    max-width: 190px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--portal-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-chat-table td[data-label="PRESENCE"] a {
    color: var(--portal-accent-soft-ink);
    text-decoration: none;
}
.mp-ops-card .home-feed-head span {
    color: var(--portal-muted);
    font-size: 13px;
    font-weight: 700;
}
.mp-command-block {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
.mp-command-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mp-command-head strong {
    color: var(--portal-text);
    font-size: 14px;
    font-weight: 800;
}
.mp-command-table-wrap {
    margin-top: 0;
}
.mp-command-attempts {
    display: inline-flex;
    min-width: 36px;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--portal-surface-soft);
    color: var(--portal-text);
    font-size: 12px;
    font-weight: 800;
}
.mp-command-error {
    display: block;
    max-width: 260px;
    overflow: hidden;
    color: var(--portal-danger);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .mp-command-error { color: var(--portal-danger); }
.mp-insight-card .mp-sales-summary {
    margin-bottom: 12px;
}

.mp-status-breakdown {
    display: grid;
    gap: 10px;
}
.mp-status-share {
    display: grid;
    grid-template-columns: minmax(130px, 220px) 1fr;
    align-items: center;
    gap: 14px;
}
.mp-status-share span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}
.mp-status-share b {
    overflow: hidden;
    color: var(--portal-text);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-status-share small {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 800;
}
.mp-status-share i {
    position: relative;
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--portal-surface-soft);
}
.mp-status-share i::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--mp-share);
    border-radius: inherit;
    background: var(--portal-accent);
}
.mp-ops-error {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--portal-danger) 22%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--portal-danger) 8%, transparent);
    color: var(--portal-danger);
    font-size: 13px;
    font-weight: 700;
}
html.dark .mp-ops-error { color: var(--portal-danger); }

.mp-connect-placeholder {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border: 1px dashed var(--portal-border);
    border-radius: 14px;
    background: var(--portal-surface-soft);
    color: var(--portal-muted);
}
.mp-connect-placeholder strong {
    color: var(--portal-text);
    font-family: var(--portal-heading-font);
    font-size: 15px;
    font-weight: 800;
}
.mp-connect-placeholder span {
    font-size: 13.5px;
    line-height: 1.45;
}

/* Quiet collapsible: connection + automation. */
.mp-meta { background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 18px; box-shadow: var(--portal-shadow); padding: 18px 24px; }
.mp-meta > summary { cursor: pointer; color: var(--portal-muted); font-size: 14px; font-weight: 700; list-style: none; }
.mp-meta > summary::-webkit-details-marker { display: none; }
.mp-meta[open] > summary { margin-bottom: 14px; }
.mp-meta-body { display: grid; gap: 10px; }
.mp-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--portal-muted); }
.mp-meta-row b { color: var(--portal-text); font-weight: 600; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.mp-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--portal-border);
    background: var(--portal-surface-soft);
    color: var(--portal-muted);
    font-size: 11.5px;
    font-weight: 600;
}
.mp-chip.ok { color: var(--portal-good); border-color: color-mix(in srgb, var(--portal-good) 40%, transparent); background: var(--portal-good-soft); }
.mp-meta-notes {
    display: grid;
    gap: 6px;
    margin: 4px 0 0;
    padding-left: 18px;
    color: var(--portal-muted);
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .mp-sales-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    
    .mp-status-share { grid-template-columns: 1fr; gap: 6px; }
}