/*
 * Merchant account area, version 2 (templates/layouts/account.html.twig, oauth/layout.html.twig).
 * Static on purpose: served by nginx from /assistant/, no build step, nothing from /assets/,
 * and it works without scripts (the Content-Security-Policy of these pages allows none).
 *
 * Look: the eCommerceLAB style of ecommercelab.pl (the logo, Inter and Space Grotesk,
 * deep navy, blue-violet-magenta gradient accents) in a dark and a light theme. The theme
 * follows the system (prefers-color-scheme) unless <html data-theme="light|dark"> says
 * otherwise; <html data-text="large"> is the A++ mode for merchants who want everything
 * bigger. Both come from cookies (DisplayController).
 *
 * Scale: compact by default (15px base, tight spacing) so a phone and a desktop show more
 * at once; every size is in rem, so the A++ mode scales the whole page from one variable.
 *
 * Navigation of a signed-in merchant (body.account--app): a sidebar menu from 900px, the
 * same menu as a bottom sheet on phones (the :target of #menu, opened by "Więcej" in the
 * bottom bar, which shows the first entries). A visitor's pages keep one top bar.
 */

/* ===== Fonts (self-hosted, the same files as the landing) ===== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/inter-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(fonts/inter-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url(fonts/space-grotesk-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url(fonts/space-grotesk-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Scale and shape ===== */

:root {
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

    /* Compact by default; the A++ mode raises --fs and everything follows. */
    --fs: 15px;
    --radius: 14px;
    --radius-sm: 10px;
    --pill: 999px;
    --space: 0.9rem;
    --control: 2.5rem;
    --maxw: 1120px;
    --tabbar: 3.6rem;
    --sidebar: 15.5rem;
}

:root[data-text="large"] {
    --fs: 18px;
    --radius: 18px;
    --radius-sm: 13px;
    --space: 1rem;
    --control: 2.75rem;
    --tabbar: 4rem;
    --sidebar: 16.5rem;
}

/* ===== Tokens: light theme (default), then dark ===== */

:root {
    --bg: #f4f5fb;
    --bg-soft: #eceef8;
    --surface: #ffffff;
    --surface-2: #f6f7fc;
    --input: #ffffff;
    --ink: #0f1222;
    --ink-soft: #343a58;
    --muted: #5f6684;
    --border: rgba(15, 18, 34, 0.1);
    --border-strong: rgba(15, 18, 34, 0.2);

    --blue: #1f6fe5;
    --violet: #5250f0;
    --magenta: #a24fe8;
    --cyan: #0a9bbf;
    --peach: #f3b58f;
    --ok: #157f46;
    --warn: #a35d08;
    --danger: #b42323;
    --danger-hover: #8a1a1a;
    --link: #1a5fd0;
    --link-hover: #123f8f;
    --on-primary: #ffffff;
    --focus: #2f8bff;

    --grad: linear-gradient(110deg, #0a9bbf 0%, #5250f0 34%, #a24fe8 66%, #f3b58f 100%);
    --grad-btn: linear-gradient(120deg, #1f6fe5, #5250f0 55%, #a24fe8);
    --glow: rgba(82, 80, 240, 0.2);
    --aurora-1: rgba(82, 80, 240, 0.11);
    --aurora-2: rgba(31, 111, 229, 0.09);
    --aurora-3: rgba(162, 79, 232, 0.07);

    --info-bg: rgba(31, 111, 229, 0.08);
    --info-border: rgba(31, 111, 229, 0.3);
    --success-bg: rgba(21, 127, 70, 0.09);
    --success-border: rgba(21, 127, 70, 0.35);
    --warning-bg: rgba(163, 93, 8, 0.09);
    --warning-border: rgba(163, 93, 8, 0.35);
    --error-bg: rgba(180, 35, 35, 0.08);
    --error-border: rgba(180, 35, 35, 0.35);

    --shadow-card: 0 1px 2px rgba(15, 18, 34, 0.04), 0 8px 24px rgba(15, 18, 34, 0.05);
    --shadow-float: 0 -1px 0 rgba(15, 18, 34, 0.06), 0 -8px 24px rgba(15, 18, 34, 0.08);
    --header-bg: rgba(244, 245, 251, 0.85);
    --backdrop: rgba(15, 18, 34, 0.45);
    /* The logo is a white wordmark; on light it turns near-black. */
    --logo-filter: brightness(0) invert(0.08);

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #05060f;
        --bg-soft: #090b1a;
        --surface: #11162b;
        --surface-2: #161c35;
        --input: #0c1024;
        --ink: #f1f3fb;
        --ink-soft: #c6ccdf;
        --muted: #8a92ab;
        --border: rgba(255, 255, 255, 0.08);
        --border-strong: rgba(255, 255, 255, 0.17);

        --blue: #2f8bff;
        --violet: #6563ff;
        --magenta: #c46bff;
        --cyan: #38e1ff;
        --peach: #fed0b5;
        --ok: #34d399;
        --warn: #fbbf24;
        --danger: #f87171;
        --danger-hover: #fca5a5;
        --link: #7db6ff;
        --link-hover: #a9cfff;
        --on-primary: #ffffff;
        --focus: #38e1ff;

        --grad: linear-gradient(110deg, #38e1ff 0%, #6563ff 34%, #c46bff 66%, #fed0b5 100%);
        --grad-btn: linear-gradient(120deg, #2f8bff, #6563ff 55%, #c46bff);
        --glow: rgba(101, 99, 255, 0.35);
        --aurora-1: rgba(101, 99, 255, 0.26);
        --aurora-2: rgba(47, 139, 255, 0.18);
        --aurora-3: rgba(196, 107, 255, 0.14);

        --info-bg: rgba(47, 139, 255, 0.12);
        --info-border: rgba(47, 139, 255, 0.35);
        --success-bg: rgba(52, 211, 153, 0.1);
        --success-border: rgba(52, 211, 153, 0.35);
        --warning-bg: rgba(251, 191, 36, 0.1);
        --warning-border: rgba(251, 191, 36, 0.35);
        --error-bg: rgba(248, 113, 113, 0.1);
        --error-border: rgba(248, 113, 113, 0.4);

        --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 40px rgba(0, 0, 0, 0.35);
        --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 -8px 24px rgba(0, 0, 0, 0.4);
        --header-bg: rgba(5, 6, 15, 0.75);
        --backdrop: rgba(0, 0, 0, 0.6);
        --logo-filter: none;

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #05060f;
    --bg-soft: #090b1a;
    --surface: #11162b;
    --surface-2: #161c35;
    --input: #0c1024;
    --ink: #f1f3fb;
    --ink-soft: #c6ccdf;
    --muted: #8a92ab;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.17);

    --blue: #2f8bff;
    --violet: #6563ff;
    --magenta: #c46bff;
    --cyan: #38e1ff;
    --peach: #fed0b5;
    --ok: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;
    --danger-hover: #fca5a5;
    --link: #7db6ff;
    --link-hover: #a9cfff;
    --on-primary: #ffffff;
    --focus: #38e1ff;

    --grad: linear-gradient(110deg, #38e1ff 0%, #6563ff 34%, #c46bff 66%, #fed0b5 100%);
    --grad-btn: linear-gradient(120deg, #2f8bff, #6563ff 55%, #c46bff);
    --glow: rgba(101, 99, 255, 0.35);
    --aurora-1: rgba(101, 99, 255, 0.26);
    --aurora-2: rgba(47, 139, 255, 0.18);
    --aurora-3: rgba(196, 107, 255, 0.14);

    --info-bg: rgba(47, 139, 255, 0.12);
    --info-border: rgba(47, 139, 255, 0.35);
    --success-bg: rgba(52, 211, 153, 0.1);
    --success-border: rgba(52, 211, 153, 0.35);
    --warning-bg: rgba(251, 191, 36, 0.1);
    --warning-border: rgba(251, 191, 36, 0.35);
    --error-bg: rgba(248, 113, 113, 0.1);
    --error-border: rgba(248, 113, 113, 0.4);

    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 40px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 -8px 24px rgba(0, 0, 0, 0.4);
    --header-bg: rgba(5, 6, 15, 0.75);
    --backdrop: rgba(0, 0, 0, 0.6);
    --logo-filter: none;

    color-scheme: dark;
}

/* ===== Base ===== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--fs);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.account {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Aurora background: three soft blobs on a plain surface, fixed, no animation. */
body.account::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 8% -10%, var(--aurora-1), transparent 70%),
        radial-gradient(45% 45% at 100% 10%, var(--aurora-2), transparent 70%),
        radial-gradient(40% 40% at 60% 110%, var(--aurora-3), transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}

a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--link-hover);
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 6px;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.6rem;
    color: var(--ink);
}

h1 {
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.7rem);
}

h2 {
    font-size: 1.1rem;
}

h3 {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

p {
    margin: 0 0 var(--space);
}

p:last-child {
    margin-bottom: 0;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.08em 0.35em;
    border-radius: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow-wrap: anywhere;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.5rem 1rem;
    background: var(--surface);
    color: var(--link);
    z-index: 100;
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Top bar (a visitor's pages everywhere; a signed-in merchant's on phones) ===== */

.account-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.account-header__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 0.9rem;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    color: var(--ink);
    text-decoration: none;
}

.brand__logo {
    display: block;
    height: 1.5rem;
    width: auto;
    filter: var(--logo-filter);
}

.account-header__tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ===== Display controls (DisplayController): the A++ toggle and the theme button ===== */

.display-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.display-controls button {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--pill);
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.display-controls button:hover {
    color: var(--ink);
    border-color: var(--border-strong);
}

.display-controls button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--violet);
    border-color: var(--violet);
}

.display-controls svg {
    width: 1rem;
    height: 1rem;
}

/* In the menu the same buttons become rows with labels. */
.display-controls--labels {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
}

.display-controls--labels button {
    width: auto;
    height: auto;
    display: flex;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    border-color: transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
}

.display-controls--labels button:hover {
    background: var(--surface-2);
    border-color: transparent;
    color: var(--ink);
}

.display-controls--labels button[aria-pressed="true"] {
    background: var(--surface-2);
    border-color: transparent;
    color: var(--violet);
}

.display-controls--labels svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
}

/* ===== Menu of a signed-in merchant: a sheet on phones, a sidebar from 900px ===== */

.account-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.account-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-menu-wrap {
    position: fixed;
    inset: 0;
    z-index: 60;
    visibility: hidden;
    pointer-events: none;
}

.account-menu-wrap:target {
    visibility: visible;
    pointer-events: auto;
}

.account-menu__backdrop {
    position: absolute;
    inset: 0;
    background: var(--backdrop);
    opacity: 0;
    transition: opacity 0.2s;
}

.account-menu-wrap:target .account-menu__backdrop {
    opacity: 1;
}

.account-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86vh;
    max-height: 86dvh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-float);
    padding: 0.9rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.22s ease;
}

.account-menu-wrap:target .account-menu {
    transform: none;
}

.account-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.1rem 0.2rem 0.4rem;
}

.account-menu__close {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--border);
    border-radius: var(--pill);
    background: var(--surface-2);
    color: var(--muted);
    text-decoration: none;
}

.account-menu__close:hover {
    color: var(--ink);
    border-color: var(--border-strong);
}

.account-menu__close svg {
    width: 1rem;
    height: 1rem;
}

.account-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.account-nav a:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.account-nav a[aria-current="page"] {
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--violet);
}

.account-nav svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    color: var(--muted);
}

.account-nav a[aria-current="page"] svg {
    color: var(--violet);
}

.account-menu__foot {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.account-logout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin: 0;
}

.account-logout__email {
    color: var(--muted);
    font-size: 0.82rem;
    padding: 0 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-logout .button--quiet {
    justify-content: center;
    gap: 0.4rem;
}

.account-logout svg {
    width: 1rem;
    height: 1rem;
}

.account-menu__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin: 0;
    padding: 0 0.7rem;
    font-size: 0.8rem;
}

.account-menu__links a {
    color: var(--muted);
}

.account-menu__links a:hover {
    color: var(--ink);
}

/* ===== Bottom bar (phones): the first entries and "Więcej" ===== */

.account-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-float);
    padding-bottom: env(safe-area-inset-bottom);
}

.account-tabbar ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 30rem;
    display: flex;
    min-height: var(--tabbar);
}

.account-tabbar li {
    flex: 1 1 0;
    min-width: 0;
}

.account-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: var(--tabbar);
    padding: 0.3rem 0.25rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-align: center;
    line-height: 1.1;
    position: relative;
}

.account-tabbar a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-tabbar svg {
    width: 1.3rem;
    height: 1.3rem;
}

.account-tabbar a[aria-current="page"] {
    color: var(--ink);
}

.account-tabbar a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--grad);
}

.account-tabbar a[aria-current="page"] svg {
    color: var(--violet);
}

/* ===== Page ===== */

.account-main {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.9rem 0.9rem 2rem;
    flex: 1;
}

.account--app .account-main {
    padding-bottom: calc(var(--tabbar) + 1.5rem + env(safe-area-inset-bottom));
}

.account-main:focus {
    outline: none;
}

.account-main > .notice {
    margin-bottom: var(--space);
}

.account-footer {
    padding: 0.9rem 0.9rem 1.2rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.78rem;
}

.account--app .account-footer {
    padding-bottom: calc(var(--tabbar) + 0.75rem + env(safe-area-inset-bottom));
}

.account-footer p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 0.8rem;
}

.account-footer a {
    color: var(--muted);
}

.account-footer a:hover {
    color: var(--ink);
}

.page-title {
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.stack {
    display: grid;
    gap: var(--space);
}

.stack--narrow {
    max-width: 28rem;
    margin: 0 auto;
}

.stack > .card {
    margin-bottom: 0;
}

/* The home: panels on the left, workspace and sign-in on the right on wide screens. */
.home {
    display: grid;
    gap: var(--space);
    align-items: start;
}

.home__main,
.home__side {
    display: grid;
    gap: var(--space);
    min-width: 0;
}

.home .card {
    margin-bottom: 0;
}

.home--single .home__main {
    display: none;
}

/* ===== Cards ===== */

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem;
    margin-bottom: var(--space);
    box-shadow: var(--shadow-card);
}

.card > :last-child {
    margin-bottom: 0;
}

/* The assistant card: a gradient frame and a glow. */
.card--hero {
    border-color: transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--grad) border-box;
    box-shadow: 0 14px 40px var(--glow);
}

.card--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(70% 60% at 100% 0%, var(--aurora-1), transparent 70%);
}

.card--hero > * {
    position: relative;
    z-index: 1;
}

.card--hero h2 {
    font-size: 1.3rem;
}

.card--hero h3 {
    margin-top: 1.1rem;
}

.card--step {
    border-left: 3px solid var(--violet);
}

.eyebrow {
    margin-bottom: 0.25rem;
    color: var(--blue);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hint {
    color: var(--muted);
    font-size: 0.82rem;
}

.lead {
    color: var(--ink-soft);
    max-width: 44rem;
    font-size: 0.95rem;
}

.badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.5rem;
    border: 1px solid var(--warning-border);
    border-radius: var(--pill);
    background: var(--warning-bg);
    color: var(--warn);
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Status line with a dot: connected or not. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.65rem 0.22rem 0.5rem;
    border-radius: var(--pill);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 0.7rem;
}