:root {
    --font-display: "Space Grotesk", "Segoe UI", Tahoma, sans-serif;
    --font-mono: "IBM Plex Mono", Consolas, monospace;

    --bg-deep: #01070d;
    --bg-mid: #072334;
    --bg-fade: #0b3f56;
    --grid-line: rgba(136, 223, 245, 0.1);
    --glow-a: rgba(21, 198, 229, 0.28);
    --glow-b: rgba(82, 246, 216, 0.2);

    --text-main: #ecfbff;
    --text-soft: #9ec8d4;
    --text-muted: #7eacb8;

    --line: rgba(118, 221, 244, 0.34);
    --line-strong: rgba(130, 245, 255, 0.62);
    --surface: rgba(6, 26, 38, 0.68);
    --surface-strong: rgba(5, 22, 33, 0.82);

    --input-bg: rgba(2, 16, 24, 0.74);
    --input-line: rgba(136, 210, 227, 0.4);
    --input-line-focus: #2ce2f0;

    --primary: #1de2ee;
    --primary-2: #53ffe8;
    --primary-3: #1bcdf7;
    --primary-ink: #04232d;

    --error-bg: rgba(255, 107, 107, 0.14);
    --error-line: rgba(255, 107, 107, 0.52);
    --error-text: #ffd1d1;

    --info-bg: rgba(45, 212, 191, 0.14);
    --info-line: rgba(45, 212, 191, 0.48);
    --info-text: #8ffff0;

    --radius-xl: 22px;
    --radius-lg: 16px;
    --radius-md: 12px;

    --ease: 180ms ease;
}

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

html,
body {
    margin: 0;
    min-height: 100%;
}

a {
    color: inherit;
}

body.auth-page,
body.site-page,
body.app-page:not(.profile-page) {
    position: relative;
    overflow-x: hidden;
    color: var(--text-main);
    font-family: var(--font-display);
    background:
        radial-gradient(circle at 10% 10%, var(--glow-a), transparent 34%),
        radial-gradient(circle at 88% 88%, var(--glow-b), transparent 36%),
        linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-mid) 56%, var(--bg-fade) 100%);
}

body.auth-page::before,
body.site-page::before,
body.app-page:not(.profile-page)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 96%);
}

/* Perspective grid (owner, 2026-09-26): the website (body.site-page) and the
   registration page (body.bg-perspective) replace the flat grid above with a
   floor plane tilted away from the viewer. Lines are wide apart at the bottom
   and converge toward a vanishing point, glow softly, and fade out a little
   above the middle of the screen so text stays clean. Fixed to the viewport;
   the plane is far wider than the screen so no edge ever shows. Must come after
   the flat-grid rule above: same specificity, so order decides. */
/* The registration page takes the website's dark body too (site.css restates
   the same gradient for body.site-page), so the two pages match exactly: no
   pale-teal fade and no corner glow behind the grid. */
body.bg-perspective {
    background: linear-gradient(180deg,
        var(--bg-deep) 0%,
        var(--bg-mid) 40%,
        var(--bg-mid) 60%,
        var(--bg-deep) 100%);
}
body.bg-perspective::after { display: none; }

/* ⭐ Tablet/phone safety (2026-09-26): a fixed 3D layer is rasterised as ONE
   GPU texture. The first version was 280vw x 2400px with a drop-shadow filter
   (which forces a second offscreen copy for the blur) and blew past mobile
   texture limits: on a tablet the layer failed to paint and the page flashed
   white while scrolling, and went fully white in landscape. Keep this layer
   small (200vw x 1800px is enough to hide its edges at this tilt) and NEVER
   put a filter on it; the glow is drawn by the line gradient's halo. The html
   background below is the fallback if a repaint is ever skipped. */
html:has(> body.site-page),
html:has(> body.bg-perspective) {
    background-color: #01070d;
}

body.site-page::before,
body.bg-perspective::before {
    inset: auto -50vw 0 -50vw;
    height: 1800px;
    background-image:
        linear-gradient(to right,
            transparent 29px, rgba(118, 221, 244, 0.08) 31px, rgba(150, 232, 250, 0.34) 34px,
            rgba(150, 232, 250, 0.34) 36px, rgba(118, 221, 244, 0.08) 39px, transparent 41px),
        linear-gradient(to bottom,
            transparent 29px, rgba(118, 221, 244, 0.08) 31px, rgba(150, 232, 250, 0.34) 34px,
            rgba(150, 232, 250, 0.34) 36px, rgba(118, 221, 244, 0.08) 39px, transparent 41px);
    background-size: 70px 70px;
    background-position: center bottom;
    backface-visibility: hidden;
    transform-origin: 50% 100%;
    transform: perspective(900px) rotateX(44deg);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 22%, rgba(0, 0, 0, 0.3) 48%, transparent 70%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 22%, rgba(0, 0, 0, 0.3) 48%, transparent 70%);
}

body.auth-page::after,
body.app-page:not(.profile-page)::after {
    content: "";
    position: fixed;
    top: -130px;
    right: -120px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(22, 206, 236, 0.2);
    filter: blur(62px);
    z-index: 0;
    pointer-events: none;
}

body.auth-page {
    padding: 18px 16px 26px;
}

.auth-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    margin: 0 auto;
    padding-top: clamp(8px, 6vh, 44px);
}

.auth-stage {
    display: grid;
    gap: 12px;
    animation: stage-enter 360ms var(--ease) both;
}

@keyframes stage-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-brand {
    text-align: left;
    margin-bottom: 8px;
}

.brand-logo {
    width: min(100%, 228px);
    margin: 0 0 10px;
    display: block;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.25));
}

.auth-kicker {
    margin: 0;
    color: var(--text-soft);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-family: var(--font-mono);
}

.auth-brand h1 {
    margin: 11px 0 6px;
    font-size: clamp(2rem, 8vw, 2.75rem);
    line-height: 0.98;
    max-width: 12ch;
}

.auth-subtitle {
    margin: 0;
    max-width: 30ch;
    color: var(--text-soft);
    font-size: 0.98rem;
    line-height: 1.5;
}

.auth-footnote {
    margin-top: 7px;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.auth-footnote a {
    color: #b3f5ff;
}

.notice {
    border-radius: var(--radius-md);
    margin: 0;
    padding: 12px 13px;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

.notice-error {
    background: var(--error-bg);
    border-color: var(--error-line);
    color: var(--error-text);
}

.notice-info {
    background: var(--info-bg);
    border-color: var(--info-line);
    color: var(--info-text);
}

.notice-success {
    background: linear-gradient(95deg, rgba(46, 213, 132, 0.32), rgba(46, 213, 132, 0.18));
    border-color: rgba(122, 255, 188, 0.7);
    color: #d8ffe8;
}

.notice-warning {
    background: linear-gradient(95deg, rgba(255, 196, 87, 0.34), rgba(255, 196, 87, 0.18));
    border-color: rgba(255, 220, 130, 0.7);
    color: #ffeac6;
}

.dashboard-flash-banner {
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 0 14px;
    position: relative;
    z-index: 5;
}

.dashboard-flash-banner .notice {
    margin-top: 86px;
    padding: 14px 44px 14px 16px;
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dashboard-flash-message {
    flex: 1;
    line-height: 1.45;
}

.dashboard-flash-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    border-radius: 6px;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.dashboard-flash-close:hover,
.dashboard-flash-close:focus-visible {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.12);
    outline: none;
}

@media (min-width: 760px) {
    .dashboard-flash-banner { padding-left: 20px; padding-right: 20px; }
}

/* When the flash banner is showing, push the home-main padding-top down */
.dashboard-flash-banner + .home-main { padding-top: 24px; }

.auth-form {
    display: grid;
    gap: 10px;
}

.input-label {
    margin-top: 10px;
    font-size: 0.79rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-family: var(--font-mono);
}

.input-field {
    width: 100%;
    min-height: 52px;
    padding: 14px 15px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--input-line);
    /* Dark on the left into colour on the right (owner, 2026-09-27). */
    background:
        linear-gradient(
            270deg,
            rgba(29, 226, 238, 0.24) 0%,
            rgba(29, 226, 238, 0.12) 32%,
            var(--input-bg) 100%
        );
    color: var(--text-main);
    font-size: 1rem;
    font-family: var(--font-display);
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease), transform var(--ease);
}

.input-field::placeholder {
    color: rgba(167, 208, 219, 0.66);
}

.input-field:focus {
    outline: none;
    border-color: var(--input-line-focus);
    background:
        linear-gradient(
            270deg,
            rgba(30, 243, 255, 0.34) 0%,
            rgba(30, 243, 255, 0.2) 38%,
            rgba(4, 22, 33, 0.92) 100%
        );
    box-shadow: 0 0 0 3px rgba(20, 185, 203, 0.24);
    transform: translateY(-1px);
}

.btn {
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    transition: transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease), border-color var(--ease);
}

.btn-primary {
    justify-self: end;
    min-width: 210px;
    max-width: 100%;
    margin-top: 12px;
    border-color: rgba(130, 254, 245, 0.64);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 36%),
        linear-gradient(130deg, var(--primary) 0%, var(--primary-2) 48%, var(--primary-3) 100%);
    color: var(--primary-ink);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 12px 28px rgba(8, 178, 202, 0.33);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(8, 178, 202, 0.38);
}

.btn-primary:active {
    transform: translateY(1px);
}

.auth-meta-link {
    margin: 2px 7px 0 0;
    font-size: 0.96rem;
    line-height: 1.35;
    text-align: right;
}

.auth-meta-link a {
    color: #9fe7f4;
    text-decoration: none;
    border-bottom: 1px solid rgba(159, 231, 244, 0.34);
    padding-bottom: 1px;
    transition: color var(--ease), border-color var(--ease);
}

.auth-meta-link a:hover {
    color: #d4fbff;
    border-bottom-color: rgba(212, 251, 255, 0.78);
}

.validation-hint {
    display: none;
    margin: 0;
    font-size: 0.82rem;
}

.validation-hint-error {
    color: #ffb7b7;
}

body.menu-open,
body.modal-open {
    overflow: hidden;
}

body.app-page {
    padding: 0 0 28px;
}

.ofm-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1200;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.ofm-topbar.is-scrolled {
    background: rgba(3, 16, 24, 0.96);
    border-bottom-color: var(--line);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38);
}

.ofm-topbar-bar {
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ofm-topbar-brand img {
    display: block;
    width: 50px;
    height: auto;
}

.ofm-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ofm-topbar-toggle {
    width: 56px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: linear-gradient(140deg, rgba(9, 46, 62, 0.88), rgba(9, 71, 93, 0.78));
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
}

.ofm-topbar-toggle img {
    width: 23px;
    height: 23px;
    filter: brightness(0) invert(1);
    opacity: 0.94;
}

.ofm-topbar-avatar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ofm-topbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(129, 238, 252, 0.72);
    display: block;
    object-fit: cover;
    background: rgba(4, 28, 39, 0.8);
}

.ofm-topbar-menu {
    position: relative;
    z-index: 1201;
    display: none;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 8px 14px 14px;
    background:
        linear-gradient(180deg, rgba(4, 20, 30, 0.95), rgba(4, 20, 30, 0.78)),
        linear-gradient(90deg, rgba(70, 212, 235, 0.18), rgba(45, 153, 188, 0.08));
    border-top: 1px solid rgba(134, 233, 247, 0.24);
    border-bottom: 1px solid rgba(134, 233, 247, 0.44);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(16px) saturate(125%);
}

.ofm-topbar-menu.is-open {
    display: grid;
    gap: 14px;
    /* The top bar is fixed and the page is locked while the menu is open, so a
       long menu must scroll inside itself (owner, 2026-10-11: items past the
       bottom of a phone screen could not be reached). 64px = the bar above. */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ofm-topbar-section {
    display: grid;
    gap: 7px;
}

/* Solo sections (Home, PRO Wallet) — no group header, slight extra weight on
   the link so they read as anchor items rather than orphans of the section
   above. Spacing keeps them visually separated from the headered groups. */
.ofm-topbar-section--solo {
    margin-block: 2px;
}
.ofm-topbar-section--solo .ofm-topbar-link {
    font-size: 1.04rem;
    font-weight: 700;
}

/* Accordion sections — clickable header + collapsible body. JS toggles
   .is-open on .ofm-topbar-section-body and aria-expanded on the toggle. */
.ofm-topbar-section--accordion {
    gap: 0; /* tighter than default 7px; body provides its own spacing when open */
}
.ofm-topbar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 6px 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    text-align: left;
    font: inherit;
}
.ofm-topbar-section-toggle:hover .ofm-topbar-title,
.ofm-topbar-section-toggle:focus-visible .ofm-topbar-title {
    color: #d8f8ff;
}
.ofm-topbar-section-toggle .ofm-topbar-title {
    margin: 0;
}
.ofm-topbar-section-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(131, 245, 255, 0.7);
    border-bottom: 2px solid rgba(131, 245, 255, 0.7);
    transform: rotate(-45deg);  /* points right when collapsed */
    transition: transform 180ms ease;
    flex-shrink: 0;
    margin-right: 2px;
}
.ofm-topbar-section-toggle[aria-expanded="true"] .ofm-topbar-section-chevron {
    transform: rotate(45deg);   /* points down when expanded */
}
.ofm-topbar-section-body {
    display: none;
    flex-direction: column;
    gap: 7px;
    padding: 6px 0 4px 8px;
}
.ofm-topbar-section-body.is-open {
    display: flex;
}

.ofm-topbar-title {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.ofm-topbar-link {
    border: 0;
    background: none;
    color: #d8f8ff;
    text-decoration: none;
    text-align: left;
    padding: 3px 0;
    font-size: 0.98rem;
    font-weight: 800;
    font-family: var(--font-display);
    cursor: pointer;
}

.ofm-topbar-section-body .ofm-topbar-link {
    color: rgba(216, 248, 255, 0.84);
    font-weight: 750;
}

.ofm-topbar-section--solo .ofm-topbar-link {
    color: #eefcff;
    font-weight: 800;
}

.ofm-topbar-button {
    width: 100%;
    font: inherit;
}

.ofm-topbar-link.is-active {
    color: #ffffff;
}

.ofm-topbar-link.is-active::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin-top: 5px;
    background: rgba(131, 245, 255, 0.92);
}

/* Close-menu footer — pinned bottom-right of the menu so it's reachable
   from anywhere in a long menu and doesn't fight the hamburger at top. */
.ofm-topbar-menu-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(134, 233, 247, 0.18);
}
.ofm-topbar-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 12px;
    background: rgba(2, 18, 26, 0.6);
    border: 1px solid rgba(131, 245, 255, 0.32);
    border-radius: 999px;
    color: #d8f8ff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 100ms ease;
}
.ofm-topbar-close-btn:hover,
.ofm-topbar-close-btn:focus-visible {
    background: rgba(29, 226, 238, 0.16);
    border-color: rgba(29, 226, 238, 0.65);
}
.ofm-topbar-close-btn:active {
    transform: scale(0.97);
}
.ofm-topbar-close-glyph {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
}
.ofm-topbar-close-glyph::before,
.ofm-topbar-close-glyph::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.ofm-topbar-close-glyph::before { transform: translateY(-50%) rotate(45deg); }
.ofm-topbar-close-glyph::after  { transform: translateY(-50%) rotate(-45deg); }

.ofm-topbar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(2, 10, 16, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--ease);
}

.ofm-topbar-backdrop.show {
    opacity: 1;
}

.dashboard-main {
    position: relative;
    z-index: 1;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 94px 14px 30px;
}

.dashboard-hero,
.dashboard-card,
.dashboard-notice {
    border-radius: var(--radius-xl);
    border: 1px solid rgba(133, 237, 251, 0.28);
    background:
        linear-gradient(130deg, rgba(41, 211, 232, 0.14), rgba(7, 30, 43, 0.88));
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px) saturate(122%);
}

.dashboard-hero {
    padding: 18px;
}

.dashboard-title {
    margin: 0;
    font-size: clamp(2rem, 6.4vw, 2.8rem);
    line-height: 1.02;
    color: #e9fbff;
}

.dashboard-subtitle {
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 68ch;
}

.dashboard-meta-row {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.state-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(128, 232, 251, 0.34);
    background: rgba(7, 34, 47, 0.74);
    padding: 6px 10px;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #d8f7ff;
    font-family: var(--font-mono);
}

.state-pill.is-status-active {
    border-color: rgba(128, 241, 194, 0.58);
}

.state-pill.is-status-grace {
    border-color: rgba(255, 212, 128, 0.58);
}

.state-pill.is-status-inactive {
    border-color: rgba(255, 124, 124, 0.58);
}

.dashboard-notice {
    margin-top: 14px;
    padding: 12px 13px;
}

.dashboard-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-card {
    padding: 14px;
}

.card-title {
    margin: 0 0 8px;
    color: #ecfbff;
    font-size: 1.02rem;
}

.dashboard-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.93rem;
    line-height: 1.55;
}

.dashboard-card p + p {
    margin-top: 8px;
}

.profile-upload-form {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.profile-file-input {
    min-height: 48px;
    padding: 11px 12px;
}

.profile-upload-btn {
    justify-self: start;
    margin-top: 6px;
    min-width: 232px;
}

.dashboard-list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #d1f5fd;
    font-size: 0.9rem;
    line-height: 1.5;
}

.dashboard-list code,
.dashboard-card code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    color: #b8f8ff;
}

.col-4 {
    grid-column: span 4;
}

.col-6 {
    grid-column: span 6;
}

.col-8 {
    grid-column: span 8;
}

.col-12 {
    grid-column: span 12;
}

.dashboard-footer-link {
    margin: 14px 0 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.dashboard-inline-link {
    color: #b8f8ff;
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 248, 255, 0.38);
}

.dashboard-inline-link:hover {
    color: #e0fdff;
    border-bottom-color: rgba(224, 253, 255, 0.72);
}

.module-main {
    padding-top: 94px;
}

.select-field {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(202, 247, 255, 0.9) 50%),
        linear-gradient(135deg, rgba(202, 247, 255, 0.9) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.select-field option {
    background-color: #061a26;
    color: #ecfbff;
}

.textarea-field {
    min-height: 120px;
    resize: vertical;
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--text-soft);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

th,
td {
    text-align: left;
    border-bottom: 1px solid rgba(128, 232, 251, 0.26);
    padding: 8px 6px;
    vertical-align: top;
}

th {
    font-family: var(--font-mono);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-size: 0.72rem;
}

.break-cell {
    word-break: break-word;
    max-width: 460px;
}

.inline-form {
    display: inline-flex;
    gap: 6px;
    margin-right: 6px;
}

.btn-ghost,
.btn-danger {
    min-width: 72px;
    padding: 8px 12px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.btn-ghost {
    border-color: rgba(122, 228, 247, 0.48);
    background: rgba(4, 27, 38, 0.74);
    color: #dcf9ff;
}

.btn-danger {
    border-color: rgba(255, 137, 137, 0.56);
    background: rgba(64, 12, 18, 0.72);
    color: #ffd8d8;
}

body.app-page.profile-page {
    --profile-bg: #062b3a;
    --profile-bg-rgb: 6,43,58;
    --profile-btn: #1de2ee;
    --profile-btn-rgb: 29,226,238;
    --profile-text: #d7f7ff;
    --profile-text-rgb: 215,247,255;
    --profile-link: #d7f7ff;
    --profile-text-card: #073042;
    --profile-text-card-rgb: 7,48,66;
    --profile-decoration-a: none;
    --profile-decoration-b: none;
    padding: 0;
    /* Manrope: modern sans-serif chosen for readability on small devices —
       friendlier proportions than Inter, strong at 500/600/700 weights. */
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Legacy parity: body background is a white→bgcolor vertical fade
       pinned to the viewport (attachment: fixed) so every screen of a
       long page shows the bright-top / darker-bottom fade. Without
       attachment:fixed the gradient stretches across the full scroll
       height, making tall pages look washed-out at the top and darker
       toward the bottom. The !important is split across the longhands
       to avoid clobbering `background-attachment`. */
    background-image: linear-gradient(180deg, #ffffff 0%, var(--profile-bg) 100%) !important;
    background-color: var(--profile-bg) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100vh !important;
    background-position: center top !important;
    color: var(--profile-text);
}

/* Decorations live on ::before and ::after like legacy — two separate layers,
   no forced grid overlay on top. When decoration == "none", both resolve to
   `none` and the clean fade shows through. */
body.app-page.profile-page::before,
body.app-page.profile-page::after {
    content: "";
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    filter: none;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
    background-size: auto;
    background-position: center;
    mask-image: none;
    background-repeat: no-repeat;
}

body.app-page.profile-page::before {
    background-image: var(--profile-decoration-a);
}

body.app-page.profile-page::after {
    background-image: var(--profile-decoration-b);
}

body.app-page.profile-page[data-background-decoration="halo"] {
    --profile-decoration-a:
        radial-gradient(circle at 16% 10%, rgba(var(--profile-bg-rgb), 0.22) 0 12%, transparent 12.6%),
        radial-gradient(circle at 84% 10%, rgba(var(--profile-bg-rgb), 0.18) 0 16%, transparent 16.6%),
        radial-gradient(circle at 50% -4%, rgba(var(--profile-bg-rgb), 0.12) 0 30%, transparent 30.6%),
        radial-gradient(circle at 22% 56%, rgba(var(--profile-bg-rgb), 0.16) 0 10%, transparent 10.7%),
        radial-gradient(circle at 78% 68%, rgba(var(--profile-bg-rgb), 0.14) 0 12%, transparent 12.7%),
        radial-gradient(circle at 50% 94%, rgba(var(--profile-bg-rgb), 0.1) 0 16%, transparent 16.7%);
    --profile-decoration-b:
        linear-gradient(180deg, rgba(var(--profile-bg-rgb), 0.18) 0%, rgba(var(--profile-bg-rgb), 0.08) 26%, transparent 46%),
        radial-gradient(circle at 52% 54%, rgba(var(--profile-bg-rgb), 0.08) 0 13%, transparent 13.8%);
}

body.app-page.profile-page[data-background-decoration="orbit"] {
    --profile-decoration-a:
        radial-gradient(circle at 84% 10%, transparent 0 12%, rgba(var(--profile-bg-rgb), 0.24) 12.4% 13.1%, transparent 13.5% 19%, rgba(var(--profile-bg-rgb), 0.14) 19.4% 20.1%, transparent 20.5%),
        radial-gradient(circle at 18% 16%, transparent 0 10%, rgba(var(--profile-bg-rgb), 0.18) 10.5% 11.2%, transparent 11.6% 16%, rgba(var(--profile-bg-rgb), 0.1) 16.4% 17.1%, transparent 17.5%),
        radial-gradient(circle at 18% 72%, transparent 0 12%, rgba(var(--profile-bg-rgb), 0.16) 12.5% 13.2%, transparent 13.7% 19%, rgba(var(--profile-bg-rgb), 0.1) 19.4% 20.1%, transparent 20.5%),
        radial-gradient(circle at 82% 58%, transparent 0 9%, rgba(var(--profile-bg-rgb), 0.14) 9.5% 10.2%, transparent 10.7% 15%, rgba(var(--profile-bg-rgb), 0.08) 15.4% 16.1%, transparent 16.5%),
        radial-gradient(circle at 50% 94%, transparent 0 11%, rgba(var(--profile-bg-rgb), 0.12) 11.5% 12.2%, transparent 12.7% 17%, rgba(var(--profile-bg-rgb), 0.06) 17.4% 18.1%, transparent 18.5%);
    --profile-decoration-b:
        radial-gradient(circle at 50% 0%, rgba(var(--profile-bg-rgb), 0.12) 0 14%, transparent 15%),
        radial-gradient(circle at 50% 38%, rgba(var(--profile-bg-rgb), 0.08) 0 10%, transparent 11%);
}

body.app-page.profile-page[data-background-decoration="arcs"] {
    --profile-decoration-a:
        radial-gradient(circle at 0% 0%, transparent 0 38%, rgba(var(--profile-bg-rgb), 0.22) 38.5% 39.3%, transparent 39.8% 47%, rgba(var(--profile-bg-rgb), 0.12) 47.4% 48.1%, transparent 48.6%),
        radial-gradient(circle at 100% 0%, transparent 0 34%, rgba(var(--profile-bg-rgb), 0.18) 34.5% 35.2%, transparent 35.7% 43%, rgba(var(--profile-bg-rgb), 0.1) 43.4% 44.1%, transparent 44.6%),
        radial-gradient(circle at 0% 82%, transparent 0 30%, rgba(var(--profile-bg-rgb), 0.14) 30.5% 31.2%, transparent 31.7% 37%, rgba(var(--profile-bg-rgb), 0.08) 37.4% 38.1%, transparent 38.6%),
        radial-gradient(circle at 100% 74%, transparent 0 28%, rgba(var(--profile-bg-rgb), 0.12) 28.5% 29.2%, transparent 29.7% 34%, rgba(var(--profile-bg-rgb), 0.07) 34.4% 35.1%, transparent 35.6%),
        radial-gradient(circle at 50% 108%, transparent 0 20%, rgba(var(--profile-bg-rgb), 0.1) 20.5% 21.2%, transparent 21.7% 26%, rgba(var(--profile-bg-rgb), 0.06) 26.4% 27.1%, transparent 27.6%);
    --profile-decoration-b:
        linear-gradient(180deg, rgba(var(--profile-bg-rgb), 0.14) 0%, transparent 34%),
        linear-gradient(0deg, rgba(var(--profile-bg-rgb), 0.08) 0%, transparent 18%);
}

body.app-page.profile-page[data-background-decoration="grid"] {
    --profile-decoration-a:
        repeating-linear-gradient(90deg, rgba(var(--profile-bg-rgb), 0.12) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(180deg, rgba(var(--profile-bg-rgb), 0.12) 0 1px, transparent 1px 56px);
    --profile-decoration-b:
        linear-gradient(180deg, rgba(var(--profile-bg-rgb), 0.14) 0%, transparent 28%);
}

body.app-page.profile-page[data-background-decoration="wave"] {
    --profile-decoration-a:
        repeating-radial-gradient(ellipse at 50% -8%, transparent 0 22px, rgba(var(--profile-bg-rgb), 0.14) 22px 24px, transparent 24px 52px);
    --profile-decoration-b:
        linear-gradient(180deg, rgba(var(--profile-bg-rgb), 0.16) 0%, transparent 36%);
}

body.app-page.profile-page[data-background-decoration="rays"] {
    --profile-decoration-a:
        linear-gradient(74deg, transparent 0 42%, rgba(var(--profile-bg-rgb), 0.16) 42.4% 43.2%, transparent 43.6%),
        linear-gradient(104deg, transparent 0 46%, rgba(var(--profile-bg-rgb), 0.14) 46.4% 47.2%, transparent 47.6%),
        linear-gradient(130deg, transparent 0 52%, rgba(var(--profile-bg-rgb), 0.1) 52.3% 53%, transparent 53.5%);
    --profile-decoration-b:
        radial-gradient(circle at 50% 0%, rgba(var(--profile-bg-rgb), 0.14) 0 16%, transparent 17%);
}

.profile-fixed-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 30;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.profile-fixed-header.scrolled {
    background: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(18px) saturate(180%);
}

.profile-brand {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    text-decoration: none;
}

.profile-brand-logo {
    width: auto;
    height: 11px;
    display: block;
}

.profile-brand-slug {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000000;
}

.profile-fixed-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.84);
    background: rgba(1, 10, 15, 0.85);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 180ms ease, transform 180ms ease;
}

.profile-fixed-avatar.scrolled {
    opacity: 1;
    transform: scale(1);
}

.avatar-circle {
    border-radius: 999px;
}

.avatar-rounded {
    border-radius: 24px;
}

.avatar-square {
    border-radius: 6px;
}

.avatar-banner {
    border-radius: 14px;
}

.profile-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 680px);
    margin: 0 auto;
    padding: 56px 16px 24px;
}

.profile-hero {
    position: relative;
    width: 100%;
    height: 175px;
    border-radius: 22px;
    overflow: hidden;
    margin-top: 10px;
}

/* Soft fade at the bottom of the hero — the photo dissolves into the
   page background instead of cutting hard. Mirrors the legacy treatment. */
.profile-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(var(--profile-bg-rgb, 6,43,58), 1)    0%,
        rgba(var(--profile-bg-rgb, 6,43,58), 0.88) 12%,
        rgba(var(--profile-bg-rgb, 6,43,58), 0.55) 32%,
        rgba(var(--profile-bg-rgb, 6,43,58), 0.20) 60%,
        rgba(var(--profile-bg-rgb, 6,43,58), 0)    100%
    );
}

.profile-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    filter: blur(2px);
    opacity: 0.35;
}

.profile-hero-overlay {
    position: absolute;
    inset: 0;
    background-image:
        var(--profile-hero-overlay-image),
        var(--profile-hero-overlay-image),
        var(--profile-hero-overlay-image),
        radial-gradient(circle at 18% 54%, rgba(28, 58, 72, 0.72) 0 16%, transparent 30%),
        radial-gradient(circle at 50% 52%, rgba(34, 67, 82, 0.66) 0 15%, transparent 30%),
        radial-gradient(65% 24% at 82% 38%, rgba(34, 67, 82, 0.6) 0 28%, transparent 44%),
        radial-gradient(65% 24% at 82% 68%, rgba(34, 67, 82, 0.52) 0 24%, transparent 40%),
        linear-gradient(90deg, rgba(223, 233, 238, 0.86) 0%, rgba(164, 191, 203, 0.68) 18%, rgba(219, 230, 236, 0.82) 50%, rgba(164, 191, 203, 0.68) 82%, rgba(223, 233, 238, 0.86) 100%);
    background-size:
        48% auto,
        46% auto,
        48% auto,
        auto,
        auto,
        auto,
        auto,
        auto;
    background-position:
        18% 52%,
        50% 52%,
        82% 52%,
        center,
        center,
        center,
        center,
        center;
    background-repeat: no-repeat;
    transform: scale(1.06);
    filter: blur(18px) saturate(1.08) brightness(1.02) contrast(1.04);
    opacity: 0.98;
}

.profile-hero-avatar {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    object-fit: cover;
    background: rgba(255,255,255,0.9);
    border: 2px solid rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.profile-hero.is-banner {
    height: min(52vw, 320px);
    min-height: 220px;
    border-radius: 24px;
    margin-top: 10px;
}

.profile-hero.is-banner .profile-hero-bg {
    transform: none;
    filter: none;
    opacity: 1;
    background-position: center 24%;
}

.profile-hero.is-banner .profile-hero-overlay {
    transform: none;
    filter: none;
    opacity: 1;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 36%, var(--profile-bg) 100%);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}

.profile-hero.is-banner .profile-hero-avatar {
    display: none;
}

.profile-hero.is-banner + .profile-header {
    margin-top: 18px;
}

.profile-shell {
    position: relative;
}

.profile-header {
    text-align: center;
    margin: 20px 0 16px;
}

.profile-header {
    color: var(--profile-text);
}

.profile-header h1 {
    margin: 0;
    font-size: clamp(1.9rem, 7vw, 2.4rem);
}

.profile-header p {
    margin: 8px auto 0;
    max-width: 56ch;
    color: var(--profile-text);
    opacity: 0.86;
    line-height: 1.55;
}

.profile-links {
    display: grid;
    gap: 10px;
    /* Tightened 2026-05-16 — the bio now occupies the vertical space below
       the hero, so the links don't need as much top margin. */
    margin-top: 8px;
}

/* Bio — plain centered paragraph between hero and links. Intentionally
   NOT card-styled (no border, no background) — matches the legacy look the
   user wants kept. Colour pulls from the existing --profile-text style
   token (the bio_color picker in the page editor). Fades up on load. */
.profile-bio {
    text-align: center;
    color: var(--profile-text);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 14px auto 4px;
    padding: 0 14px;
    max-width: 680px;
    opacity: 0;
    transform: translateY(10px);
    animation: ofm-profile-fade-up 0.6s ease forwards 0.2s;
}

@keyframes ofm-profile-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-card {
    border: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.32);
    border-radius: 16px;
    padding: 12px;
    background: rgba(var(--profile-bg-rgb, 6,43,58), 0.72);
    color: var(--profile-text);
    backdrop-filter: blur(8px);
}

.profile-card p {
    margin: 0;
    line-height: 1.55;
}

.profile-card.profile-text-block {
    border: none;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    padding: 2px 12px 18px;
    text-align: center;
}

.profile-card.profile-text-block p {
    font-size: 0.91rem;
    font-weight: 400;
    line-height: 1.74;
    letter-spacing: 0.013em;
    opacity: 0.82;
}

.profile-divider {
    border: 0;
    width: min(84%, 560px);
    height: 2px;
    margin: 10px auto;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--profile-btn-rgb, 29,226,238), 0.04) 12%,
        rgba(var(--profile-btn-rgb, 29,226,238), 0.34) 34%,
        rgba(var(--profile-btn-rgb, 29,226,238), 0.5) 50%,
        rgba(var(--profile-btn-rgb, 29,226,238), 0.34) 66%,
        rgba(var(--profile-btn-rgb, 29,226,238), 0.04) 88%,
        transparent 100%
    );
}

.profile-link-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 58px;
    border-radius: var(--profile-radius);
    border: 2px solid var(--profile-btn);
    color: var(--profile-link);
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.22);
    text-decoration: none;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    padding: 12px 16px;
    transition: transform 180ms ease, filter 180ms ease, background 180ms ease;
}

.profile-link-inner {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    min-height: 36px;
}

.profile-link-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: var(--profile-radius);
    grid-column: 1;
    justify-self: start;
    flex: 0 0 auto;
}

.profile-link-label {
    display: block;
    grid-column: 2;
    width: 100%;
    text-align: center;
}

.profile-link-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    border-radius: 0;
    color: currentColor;
}

.profile-link-glyph svg {
    width: 36px;
    height: 36px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-link-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.32);
}

.profile-card.profile-image-card {
    border: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    overflow: hidden;
}

.profile-image-block {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

@media (max-width: 760px) {
    .profile-shell {
        padding: 56px 12px 20px;
    }

    .profile-hero {
        border-radius: 18px;
    }

    .profile-hero-avatar {
        /* Locked at 150x150 at every viewport per product decision. */
        width: 150px;
        height: 150px;
    }

    .profile-brand-slug {
        font-size: 12px;
    }
}

.logout-form {
    margin: 0;
}

.ofm-topbar-link:focus-visible,
.ofm-topbar-toggle:focus-visible,
.ofm-topbar-avatar-link:focus-visible,
.auth-meta-link a:focus-visible,
.input-field:focus-visible,
.btn:focus-visible,
.dashboard-inline-link:focus-visible {
    outline: 2px solid rgba(131, 245, 255, 0.92);
    outline-offset: 2px;
}

.ofm-page-spinner[hidden] {
    display: none !important;
}

.ofm-page-spinner {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: grid;
    place-items: center;
    gap: 12px;
    text-align: center;
    background: rgba(2, 12, 18, 0.76);
    backdrop-filter: blur(6px);
}

.ofm-page-spinner-ring {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 4px solid rgba(217, 251, 255, 0.28);
    border-top-color: #6bf5ff;
    animation: ofm-spin 760ms linear infinite;
}

.ofm-page-spinner-text {
    margin: 0;
    color: #d8f8ff;
    font-size: 0.94rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@keyframes ofm-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .col-4,
    .col-6,
    .col-8 {
        grid-column: span 12;
    }
}

@media (max-width: 560px) {
    body.auth-page {
        padding: 12px 12px 18px;
    }

    .auth-brand h1 {
        font-size: 2.45rem;
    }

    .btn-primary {
        min-width: 182px;
    }

    .dashboard-main {
        padding-top: 86px;
    }

    .module-main {
        padding-top: 86px;
    }

    .ofm-topbar-brand img {
        width: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* Business Page Studio */
:root {
    --links-panel-bg: linear-gradient(180deg, rgba(9, 31, 44, 0.94), rgba(5, 19, 30, 0.9));
    --links-line: rgba(131, 245, 255, 0.16);
    --links-line-strong: rgba(130, 245, 255, 0.36);
    --links-soft: #9bcbd8;
    --links-soft-2: #c8ecf2;
    --links-surface: rgba(8, 28, 40, 0.84);
    --links-surface-2: rgba(7, 22, 32, 0.94);
    --links-danger: #ff8e9d;
}

.links-setup-main {
    width: min(100%, 1100px);
    max-width: 100%;
    /* Belt-and-braces: stop any inner grid/flex child from forcing a wider
       layout than the viewport. A single long unbroken URL in a block body
       was pushing the card off the right edge on narrow screens. */
    overflow-x: hidden;
}

.links-setup-main .links-block-card {
    min-width: 0;
    max-width: 100%;
}

.links-setup-main .links-block-main {
    min-width: 0;
}

.links-setup-main .links-block-card * {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.links-page-hero {
    position: relative;
    padding: 4px 2px 12px;
}

.links-page-hero::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 12px;
    background: linear-gradient(90deg, transparent, rgba(130, 245, 255, 0.38), transparent);
}

.links-top-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(320px, 1.05fr) minmax(300px, 0.95fr);
    margin-top: 12px;
}

.links-style-panel,
.links-preview-panel,
.links-stack-panel {
    border-radius: var(--radius-xl);
}

.links-stack-panel {
    margin-top: 12px;
}

.links-style-form,
.links-modal-form {
    display: grid;
    gap: 18px;
}

.links-control-grid,
.links-segment-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.links-control {
    display: grid;
    gap: 8px;
}

.links-control[hidden],
.links-block-type-display[hidden],
.links-current-icon[hidden] {
    display: none !important;
}

.links-control > span,
.links-radius-head span,
.links-icon-head span {
    color: #dffbff;
    font-size: 0.84rem;
    font-weight: 700;
}

.links-control input[type="text"],
.links-control input[type="url"],
.links-control input[type="file"],
.links-control select,
.links-control textarea {
    width: 100%;
    border: 1px solid rgba(140, 235, 246, 0.2);
    border-radius: 16px;
    background: rgba(3, 16, 26, 0.88);
    color: var(--text-main);
    padding: 13px 14px;
    font: inherit;
    box-sizing: border-box;
}

.links-control input[type="text"]:focus,
.links-control input[type="url"]:focus,
.links-control input[type="file"]:focus,
.links-control select:focus,
.links-control textarea:focus {
    outline: none;
    border-color: rgba(130, 245, 255, 0.48);
    box-shadow: 0 0 0 3px rgba(30, 226, 238, 0.12);
}

.links-control textarea {
    min-height: 120px;
    resize: vertical;
}

.links-control small {
    color: var(--links-soft);
    line-height: 1.5;
}

.links-color-field {
    display: grid;
    gap: 10px;
    grid-template-columns: 56px minmax(0, 1fr);
}

.links-color-field input[type="color"] {
    inline-size: 56px;
    block-size: 52px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(140, 235, 246, 0.2);
    background: rgba(3, 16, 26, 0.88);
    cursor: pointer;
}

.links-shape-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.links-decoration-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.links-decoration-chip span {
    min-width: 92px;
}

.links-segment-chip {
    position: relative;
}

.links-segment-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.links-segment-chip span,
.links-radius-chip,
.links-primary-btn,
.links-secondary-btn,
.links-action-btn,
.links-text-btn,
.links-quick-card {
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.links-segment-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(135, 231, 246, 0.22);
    background: rgba(3, 16, 26, 0.7);
    color: #d9f8ff;
    cursor: pointer;
}

.links-segment-chip input:checked + span {
    border-color: rgba(130, 245, 255, 0.52);
    background: rgba(29, 226, 238, 0.18);
}

.links-radius-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.links-radius-head strong {
    color: #ffffff;
    font-family: var(--ai-font-mono);
    font-size: 0.78rem;
}

#linksButtonRadius {
    width: 100%;
}

.links-radius-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.links-radius-chip {
    min-width: 50px;
    min-height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(135, 231, 246, 0.22);
    background: rgba(3, 16, 26, 0.7);
    color: #d9f8ff;
    cursor: pointer;
}

.links-radius-chip:hover,
.links-quick-card:hover,
.links-action-btn:hover,
.links-primary-btn:hover,
.links-secondary-btn:hover {
    transform: translateY(-1px);
}

.links-style-actions,
.links-preview-actions,
.links-modal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.links-style-actions p {
    margin: 0;
    color: var(--links-soft);
    line-height: 1.5;
    flex: 1 1 260px;
}

.links-primary-btn,
.links-secondary-btn,
.links-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.28);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.links-primary-btn {
    background: linear-gradient(135deg, rgba(36, 188, 215, 0.34), rgba(11, 52, 71, 0.95));
    color: #f3feff;
}

.links-secondary-btn,
.links-action-btn,
.links-text-btn {
    background: rgba(4, 18, 28, 0.82);
    color: #d9f8ff;
}

.links-action-btn[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
}

.links-action-btn.is-danger {
    border-color: rgba(255, 142, 157, 0.35);
    color: #ffd6db;
}

.links-preview-shell {
    --links-preview-decoration-a: none;
    --links-preview-decoration-b: none;
    border-radius: 30px;
    border: 1px solid rgba(130, 245, 255, 0.2);
    padding: 14px;
    background:
        radial-gradient(circle at top, rgba(38, 219, 240, 0.16), transparent 46%),
        rgba(2, 11, 18, 0.88);
}

.links-preview-surface {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 30px;
    padding: 0 18px 26px;
    /* Mirrors the public page: white→bgcolor vertical fade so the top stays
       bright and the bottom settles into the user's chosen background. The
       fade is a fixed background — it scales to the preview surface height. */
    background-image: linear-gradient(180deg, #ffffff 0%, var(--links-preview-bg) 100%);
    background-color: var(--links-preview-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 620px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.links-preview-surface::before,
.links-preview-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
    background-color: transparent;
}

.links-preview-surface::before {
    background-image: var(--links-preview-decoration-a);
}

.links-preview-surface::after {
    background-image: var(--links-preview-decoration-b);
}

.links-preview-surface > * {
    position: relative;
    z-index: 1;
}

.links-preview-profile {
    position: relative;
    width: calc(100% + 36px);
    height: 176px;
    margin: 0 -18px 0;
    border-radius: 22px;
    overflow: hidden;
}

.links-preview-brand {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #101418;
}

.links-preview-brand img {
    width: auto;
    height: 10px;
    display: block;
    transform: translateY(-0.5px);
}

.links-preview-brand span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.links-preview-profile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.34);
    filter: blur(24px) saturate(1.06) brightness(0.9) contrast(1.04);
    opacity: 1;
}

.links-preview-profile-overlay {
    display: none;
}

.links-preview-avatar {
    position: absolute;
    left: 50%;
    top: 86px;
    transform: translate(-50%, -50%);
    width: 82px;
    height: 82px;
    z-index: 4;
    object-fit: cover;
    border: 4px solid rgba(247, 251, 253, 0.95);
    box-shadow: none;
}

.links-preview-shell[data-avatar-shape="circle"] .links-preview-avatar {
    border-radius: 50%;
}

.links-preview-shell[data-avatar-shape="rounded"] .links-preview-avatar {
    border-radius: 28px;
}

.links-preview-shell[data-avatar-shape="square"] .links-preview-avatar {
    border-radius: 16px;
}

.links-preview-shell[data-avatar-shape="banner"] .links-preview-surface {
    padding-top: 0;
}

.links-preview-shell[data-avatar-shape="banner"] .links-preview-profile {
    height: 198px;
    border-radius: 22px;
}

.links-preview-shell[data-avatar-shape="banner"] .links-preview-profile-bg {
    transform: none;
    filter: none;
    opacity: 1;
    background-position: center 24%;
}

.links-preview-shell[data-avatar-shape="banner"] .links-preview-profile-overlay {
    display: none;
}

.links-preview-shell[data-avatar-shape="banner"] .links-preview-avatar {
    display: none;
}

.links-preview-shell[data-background-decoration="halo"] {
    --links-preview-decoration-a:
        radial-gradient(circle at 16% 12%, rgba(var(--links-preview-bg-rgb), 0.24) 0 12%, transparent 12.6%),
        radial-gradient(circle at 84% 11%, rgba(var(--links-preview-bg-rgb), 0.18) 0 16%, transparent 16.6%),
        radial-gradient(circle at 50% -4%, rgba(var(--links-preview-bg-rgb), 0.12) 0 30%, transparent 30.6%),
        radial-gradient(circle at 22% 56%, rgba(var(--links-preview-bg-rgb), 0.16) 0 10%, transparent 10.7%),
        radial-gradient(circle at 78% 68%, rgba(var(--links-preview-bg-rgb), 0.14) 0 12%, transparent 12.7%),
        radial-gradient(circle at 50% 94%, rgba(var(--links-preview-bg-rgb), 0.1) 0 16%, transparent 16.7%);
    --links-preview-decoration-b:
        linear-gradient(180deg, rgba(var(--links-preview-bg-rgb), 0.2) 0%, rgba(var(--links-preview-bg-rgb), 0.08) 26%, transparent 46%),
        radial-gradient(circle at 52% 54%, rgba(var(--links-preview-bg-rgb), 0.08) 0 13%, transparent 13.8%);
}

.links-preview-shell[data-background-decoration="orbit"] {
    --links-preview-decoration-a:
        radial-gradient(circle at 84% 10%, transparent 0 12%, rgba(var(--links-preview-bg-rgb), 0.24) 12.4% 13.1%, transparent 13.5% 19%, rgba(var(--links-preview-bg-rgb), 0.14) 19.4% 20.1%, transparent 20.5%),
        radial-gradient(circle at 18% 16%, transparent 0 10%, rgba(var(--links-preview-bg-rgb), 0.18) 10.5% 11.2%, transparent 11.6% 16%, rgba(var(--links-preview-bg-rgb), 0.1) 16.4% 17.1%, transparent 17.5%),
        radial-gradient(circle at 18% 72%, transparent 0 12%, rgba(var(--links-preview-bg-rgb), 0.16) 12.5% 13.2%, transparent 13.7% 19%, rgba(var(--links-preview-bg-rgb), 0.1) 19.4% 20.1%, transparent 20.5%),
        radial-gradient(circle at 82% 58%, transparent 0 9%, rgba(var(--links-preview-bg-rgb), 0.14) 9.5% 10.2%, transparent 10.7% 15%, rgba(var(--links-preview-bg-rgb), 0.08) 15.4% 16.1%, transparent 16.5%),
        radial-gradient(circle at 50% 94%, transparent 0 11%, rgba(var(--links-preview-bg-rgb), 0.12) 11.5% 12.2%, transparent 12.7% 17%, rgba(var(--links-preview-bg-rgb), 0.06) 17.4% 18.1%, transparent 18.5%);
    --links-preview-decoration-b:
        radial-gradient(circle at 50% 0%, rgba(var(--links-preview-bg-rgb), 0.12) 0 14%, transparent 15%),
        radial-gradient(circle at 50% 38%, rgba(var(--links-preview-bg-rgb), 0.08) 0 10%, transparent 11%);
}

.links-preview-shell[data-background-decoration="arcs"] {
    --links-preview-decoration-a:
        radial-gradient(circle at 0% 0%, transparent 0 38%, rgba(var(--links-preview-bg-rgb), 0.22) 38.5% 39.3%, transparent 39.8% 47%, rgba(var(--links-preview-bg-rgb), 0.12) 47.4% 48.1%, transparent 48.6%),
        radial-gradient(circle at 100% 0%, transparent 0 34%, rgba(var(--links-preview-bg-rgb), 0.18) 34.5% 35.2%, transparent 35.7% 43%, rgba(var(--links-preview-bg-rgb), 0.1) 43.4% 44.1%, transparent 44.6%),
        radial-gradient(circle at 0% 82%, transparent 0 30%, rgba(var(--links-preview-bg-rgb), 0.14) 30.5% 31.2%, transparent 31.7% 37%, rgba(var(--links-preview-bg-rgb), 0.08) 37.4% 38.1%, transparent 38.6%),
        radial-gradient(circle at 100% 74%, transparent 0 28%, rgba(var(--links-preview-bg-rgb), 0.12) 28.5% 29.2%, transparent 29.7% 34%, rgba(var(--links-preview-bg-rgb), 0.07) 34.4% 35.1%, transparent 35.6%),
        radial-gradient(circle at 50% 108%, transparent 0 20%, rgba(var(--links-preview-bg-rgb), 0.1) 20.5% 21.2%, transparent 21.7% 26%, rgba(var(--links-preview-bg-rgb), 0.06) 26.4% 27.1%, transparent 27.6%);
    --links-preview-decoration-b:
        linear-gradient(180deg, rgba(var(--links-preview-bg-rgb), 0.14) 0%, transparent 34%),
        linear-gradient(0deg, rgba(var(--links-preview-bg-rgb), 0.08) 0%, transparent 18%);
}

.links-preview-shell[data-background-decoration="grid"] {
    --links-preview-decoration-a:
        repeating-linear-gradient(90deg, rgba(var(--links-preview-bg-rgb), 0.12) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(180deg, rgba(var(--links-preview-bg-rgb), 0.12) 0 1px, transparent 1px 56px);
    --links-preview-decoration-b:
        linear-gradient(180deg, rgba(var(--links-preview-bg-rgb), 0.14) 0%, transparent 28%);
}

.links-preview-shell[data-background-decoration="wave"] {
    --links-preview-decoration-a:
        repeating-radial-gradient(ellipse at 50% -8%, transparent 0 22px, rgba(var(--links-preview-bg-rgb), 0.14) 22px 24px, transparent 24px 52px);
    --links-preview-decoration-b:
        linear-gradient(180deg, rgba(var(--links-preview-bg-rgb), 0.16) 0%, transparent 36%);
}

.links-preview-shell[data-background-decoration="rays"] {
    --links-preview-decoration-a:
        linear-gradient(74deg, transparent 0 42%, rgba(var(--links-preview-bg-rgb), 0.16) 42.4% 43.2%, transparent 43.6%),
        linear-gradient(104deg, transparent 0 46%, rgba(var(--links-preview-bg-rgb), 0.14) 46.4% 47.2%, transparent 47.6%),
        linear-gradient(130deg, transparent 0 52%, rgba(var(--links-preview-bg-rgb), 0.1) 52.3% 53%, transparent 53.5%);
    --links-preview-decoration-b:
        radial-gradient(circle at 50% 0%, rgba(var(--links-preview-bg-rgb), 0.14) 0 16%, transparent 17%);
}

.links-preview-stack {
    width: 100%;
    display: grid;
    gap: 12px;
}

.links-preview-button,
.links-preview-text,
.links-preview-empty {
    width: 100%;
    border-radius: var(--links-preview-radius);
}

.links-preview-button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
    min-height: 56px;
    padding: 0 18px;
    border: 2px solid var(--links-preview-button);
    background: color-mix(in srgb, var(--links-preview-button) 12%, rgba(2, 23, 34, 0.26));
    color: var(--links-preview-link);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.links-preview-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: var(--links-preview-radius, 12px);
    grid-column: 1;
    justify-self: start;
}

.links-preview-button > span:last-child {
    grid-column: 2;
    text-align: center;
}

.links-preview-text {
    padding: 14px 16px;
    color: var(--links-preview-bio);
    background: var(--links-preview-text-card, #073042);
    text-align: center;
    line-height: 1.55;
}

.links-preview-image {
    width: 100%;
    border-radius: var(--links-preview-radius);
    max-height: 220px;
    object-fit: cover;
}

.links-preview-divider {
    width: 78%;
    height: 2px;
    margin: 10px auto;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.05) 12%,
        rgba(255,255,255,0.46) 34%,
        rgba(255,255,255,0.72) 50%,
        rgba(255,255,255,0.46) 66%,
        rgba(255,255,255,0.05) 88%,
        transparent 100%
    );
}

.links-preview-empty {
    padding: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--links-preview-bio);
    text-align: center;
}

.links-preview-url {
    display: block;
    margin-top: 14px;
    color: #c9f3fc;
    text-decoration: none;
    word-break: break-all;
}

.links-live-fab,
.links-add-fab {
    position: fixed;
    right: 18px;
    z-index: 65;
    display: inline-flex;
    align-items: center;
    width: 152px;
    min-height: 52px;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.34);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    font: inherit;
    justify-content: center;
    text-align: center;
}

.links-live-fab {
    bottom: 84px;
    background: rgba(4, 18, 28, 0.92);
    color: #f1feff;
}

.links-add-fab {
    bottom: 18px;
    background: linear-gradient(135deg, rgba(36, 188, 215, 0.46), rgba(11, 52, 71, 0.98));
    color: #f4feff;
    cursor: pointer;
}

/* When the Upgrade FAB is also on screen (non-Pro users on the builder),
   stack the builder's Preview + Add Block FABs ABOVE the Upgrade FAB so
   nothing overlaps. Upgrade FAB keeps the anchor spot bottom-right since
   it's the persistent cross-page CTA. */
body:has(.floating-lifetime-btn) .links-add-fab,
body:has(.floating-pro-btn) .links-add-fab {
    bottom: 86px;
}

body:has(.floating-lifetime-btn) .links-live-fab,
body:has(.floating-pro-btn) .links-live-fab {
    bottom: 152px;
}

.links-quick-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.links-quick-card {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 156px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(135, 231, 246, 0.18);
    background: linear-gradient(180deg, rgba(6, 22, 33, 0.94), rgba(4, 18, 28, 0.9));
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.links-quick-card strong {
    color: #f4feff;
    font-size: 1rem;
}

.links-quick-card span {
    color: var(--links-soft);
    line-height: 1.55;
}

.links-quick-card.is-contact {
    background: linear-gradient(135deg, rgba(18, 77, 84, 0.46), rgba(4, 18, 28, 0.9));
}

.links-empty-state {
    border-radius: 24px;
    border: 1px dashed rgba(130, 245, 255, 0.28);
    background: rgba(4, 16, 26, 0.7);
    padding: 28px;
    display: grid;
    justify-items: start;
    gap: 14px;
}

.links-empty-state p {
    margin: 0;
    color: var(--links-soft);
}

/* One-click Shop button control. Only rendered when the Shop settings master
   toggle is on, so it is never present-but-disabled. */
.links-shop-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(4, 16, 26, 0.55);
}
.links-shop-cta-copy { display: grid; gap: 4px; min-width: 220px; flex: 1 1 260px; }
.links-shop-cta-copy strong { font-size: 15px; }
.links-shop-cta-copy span { font-size: 13px; line-height: 1.5; color: var(--links-soft); }
.links-shop-cta form { margin: 0; }
.links-shop-cta-done {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.35);
    font-size: 13px;
    font-weight: 700;
    color: var(--links-soft);
    white-space: nowrap;
}

/* Checkbox row inside a .links-control. Overrides the parent grid so the box
   and its label sit on one line instead of stacking. Used by the Information
   Page publish / inherit-style toggles and the template replace confirmation. */
.links-control.links-check-control {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.links-control.links-check-control input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--links-accent, #1de2ee);
    cursor: pointer;
}
.links-control.links-check-control > span {
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
}
.links-control.links-check-control input[type="checkbox"]:disabled,
.links-control.links-check-control:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }

/* Template preview header + pre-apply warning list. */
.links-template-meta {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--links-soft);
}
.links-warning-list {
    margin: 8px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}
.links-warning-list li { line-height: 1.5; }

/* Copy-from-Business-Page picker (Information Page editor). Reuses the block
   card vocabulary rather than inventing one: same radius, same border and
   background tokens as .links-shop-cta above. */
.links-copy-form { margin: 0; }

.links-copy-list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.links-copy-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(4, 16, 26, 0.55);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.links-copy-row:hover { border-color: rgba(130, 245, 255, 0.45); }
.links-copy-row:focus-within { border-color: rgba(130, 245, 255, 0.6); }

.links-copy-row input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--links-accent, #1de2ee);
    cursor: pointer;
}

.links-copy-main {
    display: grid;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}
.links-copy-main .links-type-pill { justify-self: start; }
.links-copy-main strong {
    font-size: 15px;
    overflow-wrap: anywhere;
}
.links-copy-main small {
    font-size: 13px;
    line-height: 1.5;
    color: var(--links-soft);
    overflow-wrap: anywhere;
}

/* A block already copied once. Deliberately still selectable - a member may
   have edited the copy and want the original back - so this is an annotation,
   not a disabled state. */
.links-copy-row.is-copied { border-style: dashed; }
.links-copy-flag {
    align-self: center;
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.3);
    font-size: 12px;
    font-weight: 700;
    color: var(--links-soft);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .links-copy-row { flex-wrap: wrap; }
    .links-copy-flag { align-self: flex-start; }
}

.links-block-list {
    display: grid;
    gap: 14px;
}

.links-insert-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    position: relative;
}

.links-insert-row::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(130, 245, 255, 0.24), transparent);
}

.links-insert-btn {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.34);
    background: rgba(6, 23, 33, 0.92);
    color: #f3feff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.links-block-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    border-radius: 24px;
    border: 1px solid rgba(135, 231, 246, 0.16);
    background: linear-gradient(180deg, rgba(8, 27, 38, 0.94), rgba(4, 17, 27, 0.92));
    padding: 18px;
}

.links-block-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.24);
    background: rgba(9, 36, 48, 0.84);
    color: #f3feff;
    font-family: var(--ai-font-tech);
    font-size: 1.02rem;
}

.links-block-main,
.links-block-copy {
    display: grid;
    gap: 12px;
}

.links-block-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.links-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    width: fit-content;
    border-radius: 999px;
    font-size: 0.7rem;
    font-family: var(--ai-font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.links-type-pill.type-url,
.links-type-pill.type-pdf {
    background: rgba(28, 180, 217, 0.16);
    color: #baf5ff;
}

.links-type-pill.type-text,
.links-type-pill.type-hr {
    background: rgba(163, 188, 195, 0.15);
    color: #dceef3;
}

.links-type-pill.type-image {
    background: rgba(76, 255, 201, 0.12);
    color: #c4ffe9;
}

.links-block-copy h3 {
    margin: 0;
    font-size: 1.12rem;
}

.links-block-copy p {
    margin: 0;
    color: var(--links-soft);
    line-height: 1.6;
}

.links-block-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.links-block-thumb,
.links-block-placeholder {
    width: 72px;
    height: 72px;
    border-radius: var(--links-preview-radius, 20px);
}

.links-block-thumb {
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}

.links-block-image {
    width: 120px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--links-preview-radius, 20px);
}

.links-image-open {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.links-block-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(130, 245, 255, 0.18);
    color: var(--links-soft);
    font-size: 0.78rem;
}

.links-block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.links-modal[hidden] {
    display: none;
}

.links-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.links-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 7, 13, 0.82);
    backdrop-filter: blur(8px);
}

.links-modal-card {
    position: relative;
    z-index: 1;
    width: min(100% - 28px, 760px);
    max-height: calc(100vh - 132px);
    margin: 86px auto 22px;
    overflow: auto;
    border-radius: 28px;
    border: 1px solid rgba(131, 245, 255, 0.16);
    background: linear-gradient(180deg, rgba(9, 31, 44, 0.98), rgba(4, 16, 25, 0.98));
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42);
    padding: 22px;
}

.links-insert-card {
    width: min(100% - 28px, 880px);
}

.links-modal-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.links-block-type-display {
    display: grid;
    gap: 8px;
}

.links-block-type-display span {
    color: #dffbff;
    font-size: 0.84rem;
    font-weight: 700;
}

.links-block-type-display strong {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.24);
    background: rgba(3, 16, 26, 0.88);
    color: #f2feff;
}

.links-modal-head h2 {
    margin: 6px 0 0;
}

.links-modal-close {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.18);
    background: rgba(4, 18, 28, 0.82);
    color: #f4feff;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
}

.links-current-asset {
    border-radius: 18px;
    border: 1px dashed rgba(130, 245, 255, 0.22);
    background: rgba(4, 18, 28, 0.62);
    padding: 14px;
    color: var(--links-soft-2);
    word-break: break-word;
}

.links-block-image-preview {
    display: block;
    max-width: 100%;
    max-height: 180px;
    margin-bottom: 10px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.25);
}

.links-icon-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.links-subcontrol {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.links-text-btn {
    border: 0;
    padding: 0;
    background: transparent;
    color: #a7f7ff;
    cursor: pointer;
    font: inherit;
}

.links-current-icon {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.18);
    background: rgba(4, 18, 28, 0.62);
}

.links-current-icon i,
.links-current-icon-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #ecfbff;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.links-current-icon img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--links-preview-radius, 12px);
    background: rgba(255, 255, 255, 0.06);
}

.links-current-icon span {
    color: var(--links-soft-2);
    font-size: 0.85rem;
}

.links-quick-grid-modal {
    margin-top: 6px;
}

.links-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    min-width: 220px;
    max-width: 360px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(4, 18, 28, 0.94);
    color: #ecfbff;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.links-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.links-toast.is-error {
    border-color: rgba(255, 142, 157, 0.32);
}

.links-image-modal-card {
    width: min(100% - 28px, 980px);
}

.links-image-modal-asset {
    display: block;
    width: 100%;
    max-height: calc(100vh - 180px);
    object-fit: contain;
    border-radius: 22px;
    background: rgba(4, 18, 28, 0.8);
}

.links-preview-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: currentColor;
}

.links-preview-glyph svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.links-block-icon-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 22px;
    border: 1px solid rgba(130, 245, 255, 0.16);
    background: rgba(4, 18, 28, 0.82);
    color: #d9f8ff;
}

.links-block-icon-glyph svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1040px) {
    .links-top-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .links-control-grid,
    .links-segment-grid {
        grid-template-columns: 1fr;
    }

    .links-block-card {
        grid-template-columns: 1fr;
    }

    .links-block-order {
        width: 52px;
        height: 52px;
    }

    .links-block-head {
        grid-template-columns: 1fr;
    }

    .links-style-actions,
    .links-preview-actions,
    .links-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .links-primary-btn,
    .links-secondary-btn,
    .links-action-btn {
        width: 100%;
    }

    .links-live-fab,
    .links-add-fab {
        right: 12px;
    }
}

.links-preview-dot { display:inline-block; width:10px; height:10px; border-radius:999px; background:currentColor; opacity:0.9; }

/* Shared image cropper */
.ofm-cropper[hidden] {
    display: none !important;
}

.ofm-cropper {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
}

.ofm-cropper-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 10, 16, 0.74);
    backdrop-filter: blur(4px);
}

.ofm-cropper-panel {
    position: relative;
    width: min(94vw, 520px);
    border-radius: 22px;
    border: 1px solid rgba(130, 245, 255, 0.32);
    background: linear-gradient(180deg, rgba(7, 29, 42, 0.95), rgba(4, 18, 28, 0.96));
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.42);
    padding: 16px;
    color: #e8fbff;
}

.ofm-cropper-title {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.ofm-cropper-copy {
    margin: 0 0 12px;
    color: #b8e4ee;
    font-size: 0.92rem;
}

.ofm-cropper-stage {
    position: relative;
    width: min(76vw, 360px);
    height: min(76vw, 360px);
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(130, 245, 255, 0.32);
    background: rgba(4, 18, 28, 0.9);
    touch-action: none;
}

.ofm-cropper-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.ofm-cropper-canvas.dragging {
    cursor: grabbing;
}

.ofm-cropper-range-wrap {
    margin: 14px 4px 0;
}

.ofm-cropper-range-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #cbeef5;
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.ofm-cropper-range {
    width: 100%;
}

.ofm-cropper-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.ofm-cropper-btn {
    border-radius: 999px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(130, 245, 255, 0.3);
    font: inherit;
    cursor: pointer;
}

.ofm-cropper-btn.secondary {
    color: #d8f8ff;
    background: rgba(4, 18, 28, 0.86);
}

.ofm-cropper-btn.primary {
    color: #001722;
    background: linear-gradient(135deg, #58e4f0, #27bccf);
    border-color: rgba(255, 255, 255, 0.36);
}

/* ---------- Home (dashboard) — legacy home.php visual parity ---------- */

.ofm-topbar-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 6px;
}

.ofm-topbar-meta-copy { min-width: 0; }

.ofm-topbar-meta-note {
    margin: 4px 0 0;
    color: #c0e8f1;
    font-size: 0.8rem;
    line-height: 1.35;
}

.ofm-home-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.32);
    background: linear-gradient(140deg, rgba(9, 46, 62, 0.88), rgba(9, 71, 93, 0.78));
    color: #ecfbff;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.ofm-home-mode-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 42px;
    height: 24px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(4, 22, 31, 0.8);
    border: 1px solid rgba(130, 245, 255, 0.18);
}

.ofm-home-mode-switch-knob {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #dffcff, #6debd7);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
    transform: translateX(0);
    transition: transform 180ms ease;
}

.ofm-home-mode-switch.is-entrepreneur {
    border-color: rgba(130, 245, 255, 0.58);
}

.ofm-home-mode-switch.is-entrepreneur .ofm-home-mode-switch-knob {
    transform: translateX(18px);
}

.ofm-home-mode-switch-text {
    display: inline-block;
    min-width: 7.5ch;
    text-align: left;
}

/* Locked variant (rendered for trial users). Non-interactive visual that
   reads as "available after upgrade". */
.ofm-home-mode-switch--locked {
    cursor: not-allowed;
    opacity: 0.7;
    filter: grayscale(30%);
}

.ofm-home-mode-switch--locked .ofm-home-mode-switch-track {
    background: rgba(255, 212, 128, 0.18);
    border-color: rgba(255, 212, 128, 0.36);
}

.ofm-home-mode-switch--locked .ofm-home-mode-switch-knob {
    background: rgba(255, 212, 128, 0.55);
}

.ofm-home-mode-switch--locked .ofm-home-mode-switch-text {
    color: rgba(255, 212, 128, 0.9);
    font-style: italic;
}

.ofm-topbar-meta-row--locked .ofm-topbar-meta-note {
    color: rgba(255, 212, 128, 0.82);
}

.home-main {
    position: relative;
    z-index: 1;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: 92px 14px 38px;
}

.home-minimal {
    min-height: calc(100vh - 164px);
    display: grid;
    align-content: start;
    justify-items: stretch;
    gap: 14px;
    padding-top: 2px;
}

.home-title {
    margin: 0 0 8px 10px;
    font-size: clamp(1.7rem, 6.8vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-align: left;
    font-family: "Orbitron", "Space Grotesk", "Segoe UI", sans-serif;
    color: #ecfbff;
}

body[data-home-mode="standard"] [data-home-mode-surface="entrepreneur"] {
    display: none;
}

.home-state-line {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -1px 0 4px;
}

.home-state-line::before,
.home-state-line::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
}

.home-state-line::before {
    background: linear-gradient(to right, rgba(126, 232, 246, 0), rgba(126, 232, 246, 0.46));
}

.home-state-line::after {
    background: linear-gradient(to left, rgba(126, 232, 246, 0), rgba(126, 232, 246, 0.46));
}

.home-state-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-state-row--top {
    justify-content: center;
    margin: 0;
    gap: 6px;
    flex-wrap: nowrap;
}

.home-state-row--top .state-pill {
    padding: 5px 10px;
    font-size: 0.67rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.state-pill-current {
    background: linear-gradient(130deg, rgba(25, 229, 243, 0.22), rgba(100, 255, 232, 0.14));
    border-color: rgba(131, 245, 255, 0.58);
    color: #f0feff;
}

.state-active  { border-color: rgba(128, 241, 194, 0.7); color: #cbffe7; }
.state-grace   { border-color: rgba(255, 212, 128, 0.72); color: #ffe8bf; }
.state-inactive{ border-color: rgba(255, 124, 124, 0.68); color: #ffd6d6; }
.state-neutral { border-color: rgba(141, 233, 247, 0.36); }

.state-pill-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    flex: 0 0 auto;
    background: #8de9f7;
    box-shadow: 0 0 8px rgba(141, 233, 247, 0.68);
}

.state-pill-status.state-active::before {
    background: #80f1c2;
    box-shadow: 0 0 8px rgba(128, 241, 194, 0.72);
}

.state-pill-status.state-grace::before {
    background: #ffd480;
    box-shadow: 0 0 8px rgba(255, 212, 128, 0.72);
}

.state-pill-status.state-inactive::before {
    background: #ff7c7c;
    box-shadow: 0 0 8px rgba(255, 124, 124, 0.72);
}

.home-entrepreneur-pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.home-finance-card {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 88px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(133, 237, 251, 0.32);
    background: linear-gradient(120deg, rgba(41, 211, 232, 0.18), rgba(7, 30, 43, 0.9));
    box-shadow: 0 13px 22px rgba(0, 0, 0, 0.25);
    color: #ebfdff;
    text-decoration: none;
}

.home-finance-card::before {
    content: "";
    position: absolute;
    top: -58px;
    right: -44px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(72, 255, 209, 0.22) 0%, transparent 70%);
}

.home-finance-card--wallet {
    grid-column: span 2;
    container-type: inline-size;
    background:
        linear-gradient(120deg, rgba(41, 211, 232, 0.22), rgba(7, 30, 43, 0.88)) padding-box,
        linear-gradient(135deg, rgba(72, 255, 209, 0.54), rgba(29, 226, 238, 0.3)) border-box;
    border-color: transparent;
}

.home-finance-card--tokens {
    background:
        linear-gradient(120deg, rgba(126, 167, 255, 0.16), rgba(7, 30, 43, 0.9)) padding-box,
        linear-gradient(135deg, rgba(126, 167, 255, 0.5), rgba(29, 226, 238, 0.28)) border-box;
    border-color: transparent;
}

.home-finance-label,
.home-finance-sub,
.home-finance-mini,
.home-finance-value {
    position: relative;
    z-index: 1;
}

.home-finance-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8dbac7;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.home-finance-label::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #48ffd1;
    box-shadow: 0 0 7px rgba(72, 255, 209, 0.7);
}

.home-finance-value {
    color: #f5feff;
    font-size: clamp(1.12rem, 4.2vw, 1.55rem);
    line-height: 1.05;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-wallet-amount {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: clamp(1.35rem, 6.8vw, 2.45rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-wallet-amount.is-wallet-amount-long {
    font-size: clamp(1.22rem, 5.8vw, 2.12rem);
}

.home-wallet-amount.is-wallet-amount-xl {
    font-size: clamp(1.05rem, 4.8vw, 1.78rem);
}

.home-wallet-amount.is-negative {
    background: linear-gradient(135deg, #ff6b8a 0%, #ffaa6b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-wallet-amount.is-zero {
    background: linear-gradient(135deg, #cdd9e1 0%, #8aa1b4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@supports (font-size: 1cqw) {
    .home-wallet-amount {
        font-size: clamp(1.42rem, 12cqw, 2.85rem);
    }

    .home-wallet-amount.is-wallet-amount-long {
        font-size: clamp(1.22rem, 9cqw, 2.22rem);
    }

    .home-wallet-amount.is-wallet-amount-xl {
        font-size: clamp(1.05rem, 7.2cqw, 1.86rem);
    }
}

.home-finance-sub {
    color: rgba(199, 235, 247, 0.74);
    font-size: 0.72rem;
    line-height: 1.25;
}

.home-finance-mini {
    display: grid;
    gap: 2px;
    color: rgba(199, 235, 247, 0.68);
    font-size: 0.62rem;
    line-height: 1.25;
}

.home-finance-meter {
    position: relative;
    z-index: 1;
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(2, 18, 26, 0.82);
    border: 1px solid rgba(130, 245, 255, 0.12);
}

.home-finance-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7ea7ff, #1de2ee, #48ffd1);
}

.home-entrepreneur-pill {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(133, 237, 251, 0.28);
    background: linear-gradient(120deg, rgba(41, 211, 232, 0.14), rgba(7, 30, 43, 0.88));
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.24);
    color: #ebfdff;
    text-decoration: none;
}

.home-entrepreneur-pill-label {
    color: #8dbac7;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.home-entrepreneur-pill-value {
    display: block;
    color: #f5feff;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-entrepreneur-pill.is-status-active   { border-color: rgba(128, 241, 194, 0.54); }
.home-entrepreneur-pill.is-status-grace    { border-color: rgba(255, 212, 128, 0.58); }
.home-entrepreneur-pill.is-status-inactive { border-color: rgba(255, 124, 124, 0.58); }

.trial-insight {
    border-radius: 12px;
    border: 1px solid rgba(132, 236, 250, 0.34);
    background: linear-gradient(90deg, rgba(43, 218, 235, 0.2), rgba(8, 35, 48, 0.7) 52%, rgba(7, 29, 40, 0.85) 100%);
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.2);
    padding: 8px 10px;
}

.trial-insight-title {
    margin: 0 0 6px;
    color: #b9edf7;
    font-family: "Orbitron", "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.trial-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.trial-metric {
    border-radius: 9px;
    border: 1px solid rgba(131, 237, 251, 0.24);
    background: rgba(5, 29, 40, 0.72);
    padding: 6px 7px;
    min-width: 0;
}

.trial-metric-label {
    display: block;
    color: #8dbac7;
    font-size: 0.53rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.trial-metric-value {
    display: block;
    margin-top: 2px;
    color: #ebfdff;
    font-size: 0.82rem;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-business-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(133, 237, 251, 0.34);
    background: linear-gradient(90deg, rgba(41, 211, 232, 0.16), rgba(10, 40, 53, 0.68) 46%, rgba(8, 35, 48, 0.82) 100%);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.26);
}

.home-business-main { min-width: 0; }

.home-business-label {
    margin: 0;
    color: #8ebfcb;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6rem;
    font-family: var(--font-mono);
}

.home-business-url {
    color: #d8f8ff;
    text-decoration: none;
    font-size: clamp(0.94rem, 3.8vw, 1.12rem);
    font-weight: 650;
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
    display: block;
    margin-top: 4px;
}

.home-business-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.home-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(140, 235, 247, 0.44);
    padding: 8px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    color: #dff8ff;
    background: linear-gradient(130deg, rgba(30, 161, 186, 0.42), rgba(88, 241, 218, 0.26));
    box-shadow: 0 8px 14px rgba(8, 37, 49, 0.24);
    text-decoration: none;
    font-family: inherit;
}

.home-action-btn:active { transform: translateY(1px); }

.home-playbook-card {
    border-radius: 16px;
    border: 1px solid rgba(133, 237, 251, 0.28);
    background: linear-gradient(102deg, rgba(41, 211, 232, 0.18), rgba(9, 37, 50, 0.86) 52%, rgba(8, 31, 43, 0.92) 100%);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.home-playbook-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-direction: column;
}

.home-playbook-copy {
    margin: 6px 0 0;
    color: #b7dfe8;
    font-size: 0.88rem;
    line-height: 1.45;
}

.home-playbook-streaks {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-playbook-stat {
    border-radius: 12px;
    border: 1px solid rgba(136, 233, 247, 0.22);
    background: rgba(6, 30, 42, 0.76);
    padding: 10px 11px;
    min-width: 0;
}

.home-playbook-stat-label {
    display: block;
    color: #8dbac7;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.home-playbook-stat strong {
    display: block;
    margin-top: 4px;
    color: #ebfdff;
    font-size: 0.88rem;
    line-height: 1.25;
}

.home-checklist {
    border-radius: 16px;
    border: 1px solid rgba(133, 237, 251, 0.24);
    background: linear-gradient(92deg, rgba(31, 193, 215, 0.14), rgba(8, 31, 44, 0.82) 54%, rgba(7, 27, 39, 0.9) 100%);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.24);
    padding: 12px 12px 10px;
}

.home-checklist-title {
    margin: 0;
    color: #c4eff8;
    font-family: "Orbitron", "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-checklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.home-checklist-toggle {
    border: 1px solid rgba(136, 233, 247, 0.34);
    background: rgba(7, 34, 46, 0.64);
    color: #c6eef7;
    border-radius: 999px;
    min-height: 28px;
    padding: 4px 10px;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.home-checklist-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.home-checklist-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid rgba(136, 233, 247, 0.22);
    background: rgba(6, 30, 42, 0.76);
    padding: 7px 8px;
}

.home-checklist.is-collapsed .home-checklist-list {
    display: none;
}

.check-index {
    color: #8ad3e2;
    font-family: "Orbitron", "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}

.check-link {
    color: #ddfbff;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

.check-link-button {
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
}

.check-progress {
    color: #7fe7d1;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.check-mark {
    color: #7fe7d1;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1;
}

.home-checklist-item.is-done .check-link {
    text-decoration: line-through;
    text-decoration-thickness: 1.6px;
    text-decoration-color: rgba(126, 231, 209, 0.9);
    color: #8fbfca;
}

.inline-profile-upload {
    display: contents;
}

.floating-lifetime-btn,
.floating-pro-btn {
    position: fixed;
    right: 14px;
    bottom: 18px;
    z-index: 1250;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.74rem;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.34);
}

.floating-lifetime-btn {
    color: #2b1200;
    background: linear-gradient(130deg, #ffcc66, #ff8a66);
    border: 1px solid rgba(255, 202, 126, 0.9);
}

.floating-pro-btn {
    color: #022833;
    background: linear-gradient(130deg, #f3ff64, #76ffd5);
    border: 1px solid rgba(233, 255, 157, 0.84);
}

.floating-lifetime-btn:active,
.floating-pro-btn:active { transform: translateY(1px); }

.notification-toast {
    position: fixed;
    right: 12px;
    bottom: 14px;
    z-index: 1200;
    border-radius: 11px;
    padding: 10px 12px;
    border: 1px solid rgba(136, 233, 247, 0.48);
    background: rgba(7, 41, 55, 0.92);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
    color: #d4f8ff;
    font-size: 0.84rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.notification-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.notification-toast.is-error {
    border-color: rgba(255, 122, 122, 0.64);
    color: #ffd3d3;
}

@media (min-width: 760px) {
    .home-main { padding-left: 20px; padding-right: 20px; padding-top: 96px; }
    .home-minimal { padding-top: 12px; }
    .home-business-card { padding: 16px 18px; }
    .home-checklist { padding: 14px 16px 12px; }
    .floating-lifetime-btn,
    .floating-pro-btn { right: 22px; bottom: 22px; }
}

@media (max-width: 640px) {
    .trial-insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .trial-insight { padding: 7px 8px; }
    .trial-metric { padding: 5px 6px; }
    .trial-metric-label { font-size: 0.5rem; }
    .trial-metric-value { font-size: 0.76rem; }
    .home-state-line { gap: 8px; }
    .home-entrepreneur-pills { gap: 8px; }
    .home-finance-card { min-height: 82px; padding: 11px 10px; }
    .home-finance-card--tokens { padding-left: 9px; padding-right: 9px; }
    .home-finance-label { font-size: 0.52rem; gap: 5px; }
    .home-finance-card--tokens .home-finance-value { font-size: 1rem; }
    .home-finance-sub { font-size: 0.66rem; }
    .home-finance-mini { font-size: 0.56rem; }
    .home-playbook-streaks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Profile Picture module (topbar avatar trigger + inline modal + checklist thumb) ---------- */

button.ofm-topbar-avatar-link {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: transform 120ms ease;
}

button.ofm-topbar-avatar-link:hover .ofm-topbar-avatar,
button.ofm-topbar-avatar-link:focus-visible .ofm-topbar-avatar {
    border-color: rgba(131, 245, 255, 0.92);
    box-shadow: 0 0 0 2px rgba(131, 245, 255, 0.18);
}

.check-profile-preview {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    min-width: 0;
}

.check-profile-thumb {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(129, 238, 252, 0.52);
    object-fit: cover;
    background: rgba(4, 28, 39, 0.8);
    flex: 0 0 auto;
}

.check-profile-preview:hover .check-profile-thumb,
.check-profile-preview:focus-visible .check-profile-thumb {
    border-color: rgba(131, 245, 255, 0.92);
    box-shadow: 0 0 0 2px rgba(131, 245, 255, 0.22);
}

.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 18px;
}

.profile-modal[hidden] { display: none; }

.profile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 12, 18, 0.74);
    backdrop-filter: blur(8px);
}

.profile-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    border-radius: 20px;
    border: 1px solid rgba(137, 236, 248, 0.42);
    background: linear-gradient(160deg, rgba(10, 34, 48, 0.98), rgba(4, 18, 29, 0.98));
    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.44);
    padding: 18px 18px 16px;
    display: grid;
    gap: 12px;
    justify-items: stretch;
    text-align: center;
}

.profile-modal-eyebrow {
    margin: 0;
    color: #9bc8d4;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.profile-modal-title {
    margin: 0;
    font-family: "Orbitron", "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 1.1rem;
    color: #ecfbff;
    word-break: break-word;
}

.profile-modal-preview {
    display: grid;
    place-items: center;
    padding: 6px 0 4px;
}

.profile-modal-avatar {
    width: 140px;
    height: 140px;
    border-radius: 999px;
    border: 1px solid rgba(129, 238, 252, 0.62);
    object-fit: cover;
    background: rgba(4, 28, 39, 0.8);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.36);
}

.profile-modal-form { margin: 0; }

.profile-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(140, 235, 247, 0.44);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
}

.profile-modal-btn-primary {
    color: #002833;
    background: linear-gradient(130deg, #58e4f0, #27bccf);
    border-color: rgba(165, 255, 248, 0.84);
}

.profile-modal-btn-danger {
    color: #fff;
    background: rgba(255, 80, 80, 0.22);
    border-color: rgba(255, 124, 124, 0.6);
    width: 100%;
}

.profile-modal-btn-ghost {
    color: #d8f8ff;
    background: rgba(7, 41, 55, 0.8);
}

.profile-modal-btn:active { transform: translateY(1px); }

/* ---------- Upgrade modal (PayFast checkout selector) ---------- */

.upgrade-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 18px;
}

.upgrade-modal[hidden] { display: none; }

.upgrade-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 12, 18, 0.74);
    backdrop-filter: blur(8px);
}

.upgrade-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    border-radius: 20px;
    border: 1px solid rgba(137, 236, 248, 0.42);
    background: linear-gradient(160deg, rgba(10, 34, 48, 0.98), rgba(4, 18, 29, 0.98));
    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.44);
    padding: 20px;
    display: grid;
    gap: 14px;
}

.upgrade-modal-eyebrow {
    margin: 0;
    color: #9bc8d4;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.upgrade-modal-title {
    margin: 0;
    font-family: "Orbitron", "Space Grotesk", "Segoe UI", sans-serif;
    font-size: 1.2rem;
    color: #ecfbff;
}

.upgrade-modal-form { display: grid; gap: 10px; margin: 0; }

.upgrade-options { display: grid; gap: 8px; }

.upgrade-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(133, 237, 251, 0.28);
    background: rgba(6, 30, 42, 0.76);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.upgrade-option:hover { border-color: rgba(131, 245, 255, 0.6); }

.upgrade-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #58e4f0;
    margin: 0;
}

.upgrade-option:has(input:checked) {
    border-color: rgba(131, 245, 255, 0.82);
    background: linear-gradient(130deg, rgba(25, 229, 243, 0.22), rgba(7, 30, 43, 0.88));
    box-shadow: 0 0 0 1px rgba(131, 245, 255, 0.22);
}

.upgrade-option-body { display: grid; gap: 2px; min-width: 0; }

.upgrade-option-label {
    color: #ecfbff;
    font-weight: 700;
    font-size: 0.94rem;
}

.upgrade-option-hint {
    color: #a6cfdb;
    font-size: 0.78rem;
    line-height: 1.35;
}

.upgrade-option-price {
    color: #76ffd5;
    font-weight: 800;
    font-size: 1rem;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.upgrade-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(140, 235, 247, 0.44);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
}

.upgrade-modal-btn-primary {
    color: #002833;
    background: linear-gradient(130deg, #58e4f0, #27bccf);
    border-color: rgba(165, 255, 248, 0.84);
}

.upgrade-modal-btn-ghost {
    color: #d8f8ff;
    background: rgba(7, 41, 55, 0.8);
}

.upgrade-modal-btn:active { transform: translateY(1px); }

/* -------------------------------------------------------------- */
/* Brand Guide (Component 2)                                      */
/* -------------------------------------------------------------- */
body.app-page.brand-guide-page {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.brand-guide-main {
    max-width: 920px;
    margin: 0 auto;
    padding: 84px 22px 48px;
}

.brand-guide-shell {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.brand-guide-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brand-guide-eyebrow {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.62);
}

.brand-guide-eyebrow a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(199, 235, 247, 0.4);
}

.brand-guide-eyebrow a:hover { color: #fff; }

.brand-guide-header h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4.2vw, 2.6rem);
    line-height: 1.15;
    color: #eafaff;
    letter-spacing: -0.01em;
}

.brand-guide-lede {
    margin: 0;
    color: rgba(220, 240, 248, 0.78);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 58ch;
}

.brand-guide-progress-bar {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-top: 8px;
}

.brand-guide-progress-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, #1de2ee 0%, #48ffd1 100%);
    border-radius: 999px;
    transition: width 240ms ease;
}

.brand-guide-progress-label {
    position: absolute;
    right: 0;
    top: -22px;
    font-size: 12px;
    color: rgba(199, 235, 247, 0.76);
}

/* Progress rings (overall + per-section) */
.brand-guide-ring {
    display: block;
    flex-shrink: 0;
}

.brand-guide-ring-track {
    stroke: rgba(199, 235, 247, 0.14);
}

.brand-guide-ring-fill {
    stroke: url(#brand-ring-gradient);
    stroke: #1de2ee;
    stroke-linecap: round;
    transition: stroke-dashoffset 340ms ease;
}

.brand-guide-ring.is-complete .brand-guide-ring-fill {
    stroke: #48ffd1;
}

.brand-guide-ring-label {
    fill: #eafaff;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
}

.brand-guide-ring.is-complete .brand-guide-ring-label {
    fill: #48ffd1;
    font-size: 18px;
}

.brand-guide-header--with-ring {
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.brand-guide-header-ring {
    flex-shrink: 0;
}

.brand-guide-header-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .brand-guide-header--with-ring {
        flex-direction: column;
        align-items: flex-start;
    }
}

.brand-guide-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.brand-guide-section-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: linear-gradient(165deg, rgba(20, 52, 72, 0.78), rgba(7, 22, 32, 0.78));
    color: #eafaff;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
    min-height: 140px;
}

.brand-guide-section-card:hover {
    transform: translateY(-2px);
    border-color: rgba(29, 226, 238, 0.6);
}

.brand-guide-section-card.is-complete {
    border-color: rgba(72, 255, 209, 0.6);
    background: linear-gradient(165deg, rgba(22, 74, 66, 0.78), rgba(7, 28, 28, 0.78));
}

.brand-guide-section-card h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.brand-guide-section-card p {
    margin: 0;
    color: rgba(220, 240, 248, 0.7);
    font-size: 0.92rem;
    line-height: 1.45;
    flex: 1;
}

.brand-guide-section-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-guide-section-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.brand-guide-section-cta {
    margin-top: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #1de2ee;
}

.brand-guide-summary-link {
    align-self: flex-start;
    color: #1de2ee;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(29, 226, 238, 0.4);
    padding-bottom: 2px;
}

.brand-guide-summary-link:hover { border-color: #1de2ee; }

/* Section (step) pages */
.brand-guide-section .brand-guide-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: linear-gradient(165deg, rgba(20, 52, 72, 0.62), rgba(7, 22, 32, 0.78));
    overflow: hidden;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.brand-guide-section .brand-guide-field:focus-within {
    border-color: rgba(29, 226, 238, 0.55);
    box-shadow: 0 0 0 1px rgba(29, 226, 238, 0.28), 0 10px 30px rgba(29, 226, 238, 0.08);
}

.brand-guide-field-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.76);
}

.brand-guide-field-question {
    margin: 0;
    color: #eafaff;
    font-size: 1.02rem;
    line-height: 1.45;
}

.brand-guide-textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(2, 12, 18, 0.6);
    color: #eafaff;
    font: inherit;
    font-size: 1rem;
    line-height: 1.55;
    resize: vertical;
    transition: border-color 160ms ease;
}

.brand-guide-textarea:focus {
    outline: none;
    border-color: rgba(29, 226, 238, 0.7);
}

.brand-guide-field-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.brand-guide-refine-btn,
.brand-guide-apply-to-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 16px 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(29, 226, 238, 0.55);
    background:
        linear-gradient(135deg, rgba(29, 226, 238, 0.35) 0%, rgba(72, 255, 209, 0.2) 100%),
        rgba(2, 12, 18, 0.6);
    color: #eafaff;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(29, 226, 238, 0);
    transition: background 180ms ease, transform 120ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

.brand-guide-refine-btn:hover,
.brand-guide-apply-to-page-btn:hover {
    border-color: rgba(29, 226, 238, 0.9);
    box-shadow: 0 0 18px rgba(29, 226, 238, 0.36);
}
.brand-guide-refine-btn:active,
.brand-guide-apply-to-page-btn:active { transform: translateY(1px); }
.brand-guide-refine-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

.brand-guide-sparkle {
    color: #48ffd1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(72, 255, 209, 0.5));
    animation: brand-guide-sparkle-pulse 3s ease-in-out infinite;
}

@keyframes brand-guide-sparkle-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12) rotate(8deg); }
}

.brand-guide-refine-btn:disabled .brand-guide-sparkle {
    animation: brand-guide-sparkle-spin 0.9s linear infinite;
}

@keyframes brand-guide-sparkle-spin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

.brand-guide-field-status {
    font-size: 0.82rem;
    color: rgba(199, 235, 247, 0.72);
}

.brand-guide-field-status[data-state="error"] { color: #ff8a8a; }
.brand-guide-field-status[data-state="saved"] { color: #48ffd1; }

/* AI card — the "final/published" block reads as distinctly AI-authored.
   Cyan/teal gradient border, animated shimmer while refining, AI chip in
   the top-right corner. */
.brand-guide-suggestion {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 14px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(2, 12, 18, 0.82), rgba(2, 12, 18, 0.82)) padding-box,
        linear-gradient(135deg, rgba(29, 226, 238, 0.55) 0%, rgba(72, 255, 209, 0.35) 45%, rgba(126, 167, 255, 0.35) 100%) border-box;
    overflow: hidden;
}

.brand-guide-suggestion.is-empty {
    opacity: 0.68;
    background:
        linear-gradient(rgba(2, 12, 18, 0.5), rgba(2, 12, 18, 0.5)) padding-box,
        linear-gradient(135deg, rgba(29, 226, 238, 0.22) 0%, rgba(126, 167, 255, 0.18) 100%) border-box;
}

.brand-guide-suggestion.is-fresh {
    box-shadow: 0 0 0 2px rgba(72, 255, 209, 0.4), 0 0 26px rgba(29, 226, 238, 0.26);
    animation: brand-guide-ai-fresh 1.6s ease forwards;
}

@keyframes brand-guide-ai-fresh {
    0%   { box-shadow: 0 0 0 0 rgba(72, 255, 209, 0.0), 0 0 0 rgba(29, 226, 238, 0); }
    20%  { box-shadow: 0 0 0 2px rgba(72, 255, 209, 0.55), 0 0 30px rgba(29, 226, 238, 0.38); }
    100% { box-shadow: 0 0 0 0 rgba(72, 255, 209, 0), 0 0 0 rgba(29, 226, 238, 0); }
}

/* Shimmer band that sweeps across while /refine is in flight. */
.brand-guide-suggestion.is-loading::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 35%;
    background: linear-gradient(100deg, transparent 0%, rgba(72, 255, 209, 0.18) 50%, transparent 100%);
    animation: brand-guide-ai-shimmer 1.1s linear infinite;
    pointer-events: none;
}

@keyframes brand-guide-ai-shimmer {
    from { left: -40%; }
    to { left: 120%; }
}

.brand-guide-ai-chip {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding: 3px 8px;
    border-radius: 999px;
    color: #052029;
    background: linear-gradient(135deg, #48ffd1 0%, #1de2ee 100%);
    box-shadow: 0 0 12px rgba(72, 255, 209, 0.35);
}

.brand-guide-ai-chip .brand-guide-sparkle {
    color: #052029;
    filter: none;
    width: 11px;
    height: 11px;
}

.brand-guide-suggestion-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.72);
    padding-right: 56px;   /* leave room for the chip */
}

.brand-guide-suggestion-input {
    background: rgba(2, 12, 18, 0.68);
    border-color: rgba(130, 245, 255, 0.22);
}

/* Colour pickers */
.brand-guide-field--colours .brand-guide-colour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.brand-guide-colour-picker {
    display: grid;
    grid-template-columns: auto 52px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(130, 245, 255, 0.18);
    background: rgba(2, 12, 18, 0.5);
}

.brand-guide-colour-picker span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.78);
    grid-column: 1 / -1;
}

.brand-guide-colour-picker input[type="color"] {
    width: 52px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(130, 245, 255, 0.3);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.brand-guide-colour-picker input[type="text"] {
    font: inherit;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(2, 12, 18, 0.6);
    color: #eafaff;
}

.brand-guide-colour-hint {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(199, 235, 247, 0.66);
    line-height: 1.5;
}

/* Nav between sections */
.brand-guide-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.brand-guide-nav-btn {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.32);
    color: #eafaff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    background: rgba(7, 22, 32, 0.62);
    transition: background 160ms ease, border-color 160ms ease;
}

.brand-guide-nav-btn:hover { border-color: rgba(29, 226, 238, 0.6); }

.brand-guide-nav-btn--primary {
    background: rgba(29, 226, 238, 0.2);
    border-color: rgba(29, 226, 238, 0.6);
}

.brand-guide-nav-btn--primary:hover {
    background: rgba(29, 226, 238, 0.32);
}

/* Summary cards — cyan-accented, with visual variety so the screen doesn't
   read as a bland grid. Gradient border + subtle inner glow + a tiny
   accent dot next to each heading. */
.brand-guide-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.brand-guide-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgba(20, 52, 72, 0.72), rgba(7, 22, 32, 0.88)) padding-box,
        linear-gradient(135deg, rgba(29, 226, 238, 0.6) 0%, rgba(72, 255, 209, 0.35) 50%, rgba(126, 167, 255, 0.45) 100%) border-box;
    color: #eafaff;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Soft cyan glow in the top-left corner of each card — picks up more on
   hover so the grid breathes as you move across it. */
.brand-guide-card::before {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 226, 238, 0.22) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 200ms ease;
    opacity: 0.75;
}

.brand-guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(29, 226, 238, 0.12), 0 0 0 1px rgba(29, 226, 238, 0.28);
}

.brand-guide-card:hover::before {
    opacity: 1;
}

/* Repeat-index accents so adjacent cards read differently — cycles a few
   subtle variants across the grid via :nth-child */
.brand-guide-card:nth-child(3n+2)::before {
    background: radial-gradient(circle, rgba(72, 255, 209, 0.22) 0%, transparent 70%);
}

.brand-guide-card:nth-child(3n+3)::before {
    background: radial-gradient(circle, rgba(126, 167, 255, 0.22) 0%, transparent 70%);
}

.brand-guide-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
}

.brand-guide-card h3 {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1de2ee;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.brand-guide-card h3::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    box-shadow: 0 0 8px rgba(29, 226, 238, 0.6);
    flex-shrink: 0;
}

.brand-guide-card:nth-child(3n+2) h3 { color: #48ffd1; }
.brand-guide-card:nth-child(3n+2) h3::before {
    background: linear-gradient(135deg, #48ffd1 0%, #1de2ee 100%);
    box-shadow: 0 0 8px rgba(72, 255, 209, 0.6);
}

.brand-guide-card:nth-child(3n+3) h3 { color: #7ea7ff; }
.brand-guide-card:nth-child(3n+3) h3::before {
    background: linear-gradient(135deg, #7ea7ff 0%, #1de2ee 100%);
    box-shadow: 0 0 8px rgba(126, 167, 255, 0.6);
}

.brand-guide-card-edit {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #1de2ee;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(29, 226, 238, 0.4);
    background: rgba(29, 226, 238, 0.1);
    transition: background 160ms ease, border-color 160ms ease;
}

.brand-guide-card-edit:hover {
    background: rgba(29, 226, 238, 0.22);
    border-color: rgba(29, 226, 238, 0.8);
}

.brand-guide-card-body {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: #eafaff;
    white-space: pre-wrap;
    position: relative;
}

.brand-guide-card-empty {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(199, 235, 247, 0.52);
    font-style: italic;
    position: relative;
}

/* Capstone: the bio card spans the full grid width and gets a richer
   accent so it reads as the headline of the Brand Guide. */
.brand-guide-card--bio {
    grid-column: 1 / -1;
    padding: 22px 24px;
    background:
        linear-gradient(165deg, rgba(22, 74, 66, 0.78), rgba(7, 28, 36, 0.92)) padding-box,
        linear-gradient(135deg, #48ffd1 0%, #1de2ee 50%, #7ea7ff 100%) border-box;
    box-shadow: 0 12px 34px rgba(29, 226, 238, 0.14);
}

.brand-guide-card--bio::before {
    top: -70px;
    left: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(72, 255, 209, 0.28) 0%, transparent 70%);
}

.brand-guide-card--bio h3 {
    font-size: 0.92rem;
    color: #48ffd1;
}

.brand-guide-card--bio h3::before {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #48ffd1 0%, #1de2ee 100%);
    box-shadow: 0 0 12px rgba(72, 255, 209, 0.7);
}

.brand-guide-card--bio .brand-guide-card-body {
    font-size: 1.05rem;
    line-height: 1.6;
}

.brand-guide-swatch-row {
    display: flex;
    gap: 8px;
}

.brand-guide-swatch {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-block;
}

/* Bio section — wider textarea + dual AI actions (Refine + Generate) */
.brand-guide-bio-textarea { min-height: 140px; }

.brand-guide-bio-actions {
    align-items: stretch;
}

.brand-guide-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 16px 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(126, 167, 255, 0.55);
    background:
        linear-gradient(135deg, rgba(126, 167, 255, 0.32) 0%, rgba(29, 226, 238, 0.18) 100%),
        rgba(2, 12, 18, 0.6);
    color: #eafaff;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 120ms ease;
}

.brand-guide-generate-btn:hover {
    border-color: rgba(126, 167, 255, 0.9);
    box-shadow: 0 0 18px rgba(126, 167, 255, 0.34);
}

.brand-guide-generate-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

.brand-guide-generate-btn .brand-guide-sparkle { color: #7ea7ff; }

.brand-guide-generate-hint {
    font-size: 0.82rem;
    color: rgba(199, 235, 247, 0.62);
    line-height: 1.5;
}

.brand-guide-generate-hint strong {
    color: rgba(199, 235, 247, 0.82);
    font-weight: 600;
}

.brand-guide-bio-preview-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.brand-guide-bio-preview-actions .brand-guide-nav-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* Apply-to-page diff modal */
.brand-guide-diff-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.brand-guide-diff-modal[hidden] { display: none; }

.brand-guide-diff-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 14, 0.72);
    backdrop-filter: blur(6px);
}

.brand-guide-diff-card {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    padding: 26px 24px;
    border-radius: 20px;
    border: 1px solid rgba(130, 245, 255, 0.26);
    background: linear-gradient(165deg, rgba(20, 52, 72, 0.96), rgba(7, 22, 32, 0.96));
    color: #eafaff;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}

.brand-guide-diff-card h2 {
    margin: 0 0 8px;
    font-size: 1.22rem;
    letter-spacing: -0.01em;
}

.brand-guide-diff-lede {
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(220, 240, 248, 0.78);
}

.brand-guide-diff-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.brand-guide-diff-row {
    display: grid;
    grid-template-columns: 1.2fr 24px 14px 24px auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(2, 12, 18, 0.5);
    border: 1px solid rgba(130, 245, 255, 0.14);
    font-size: 0.88rem;
}

.brand-guide-diff-row.is-changed {
    border-color: rgba(29, 226, 238, 0.5);
    background: rgba(29, 226, 238, 0.08);
}

.brand-guide-diff-label {
    color: rgba(199, 235, 247, 0.78);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.brand-guide-diff-swatch {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    display: inline-block;
}

.brand-guide-diff-arrow {
    color: rgba(199, 235, 247, 0.58);
}

.brand-guide-diff-hex {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    color: rgba(199, 235, 247, 0.68);
    grid-column: 1 / -1;
    padding-top: 4px;
}

.brand-guide-diff-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------- */
/* Dashboard cyan accents + variance                              */
/* Layers on top of the base .home-* rules so the existing glass  */
/* look stays (the translucent fade the user likes). Adds:        */
/*   - corner glow on cards (cycles cyan / teal / periwinkle)     */
/*   - gradient borders via border-image layering                 */
/*   - accent dot before titles                                   */
/*   - nth-child colour variance on entrepreneur pills            */
/* -------------------------------------------------------------- */

.home-title {
    position: relative;
    display: inline-block;
    background: linear-gradient(120deg, #ecfbff 0%, #a8f0ff 55%, #bde4ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Underline streak under the home title — adds a bit of personality. */
.home-minimal > .home-title + .home-state-line { margin-top: 2px; }

.home-title::after {
    content: "";
    display: block;
    margin-top: 6px;
    width: 72px;
    max-width: 30%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #1de2ee 0%, #48ffd1 60%, rgba(72, 255, 209, 0) 100%);
    box-shadow: 0 0 10px rgba(29, 226, 238, 0.45);
}

/* Business page card — gradient border + cyan corner glow, keeping the
   translucent glass background intact. */
.home-business-card {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background:
        linear-gradient(90deg, rgba(41, 211, 232, 0.16), rgba(10, 40, 53, 0.68) 46%, rgba(8, 35, 48, 0.82) 100%) padding-box,
        linear-gradient(135deg, rgba(29, 226, 238, 0.55) 0%, rgba(72, 255, 209, 0.32) 55%, rgba(126, 167, 255, 0.42) 100%) border-box;
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.home-business-card::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 226, 238, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.home-business-card:hover {
    box-shadow: 0 14px 34px rgba(29, 226, 238, 0.14), 0 14px 24px rgba(0, 0, 0, 0.26);
}

.home-business-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.home-business-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    box-shadow: 0 0 8px rgba(29, 226, 238, 0.6);
    flex-shrink: 0;
}

/* Playbook card — periwinkle corner glow so it distinguishes from the
   business-page card next to it. */
.home-playbook-card {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background:
        linear-gradient(102deg, rgba(41, 211, 232, 0.18), rgba(9, 37, 50, 0.86) 52%, rgba(8, 31, 43, 0.92) 100%) padding-box,
        linear-gradient(135deg, rgba(126, 167, 255, 0.5) 0%, rgba(29, 226, 238, 0.35) 60%, rgba(72, 255, 209, 0.32) 100%) border-box;
}

.home-playbook-card::before {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 167, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

/* Checklist card — teal corner glow. */
.home-checklist {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background:
        linear-gradient(92deg, rgba(31, 193, 215, 0.14), rgba(8, 31, 44, 0.82) 54%, rgba(7, 27, 39, 0.9) 100%) padding-box,
        linear-gradient(135deg, rgba(72, 255, 209, 0.48) 0%, rgba(29, 226, 238, 0.32) 50%, rgba(126, 167, 255, 0.3) 100%) border-box;
}

.home-checklist::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 255, 209, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.home-checklist-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-checklist-title::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #48ffd1 0%, #1de2ee 100%);
    box-shadow: 0 0 10px rgba(72, 255, 209, 0.7);
    flex-shrink: 0;
}

/* Checklist items sit on top of the backdrop — kick the z-index so the
   corner glow doesn't fade them out. */
.home-checklist-list { position: relative; z-index: 1; }
.home-checklist-head { position: relative; z-index: 1; }

/* Individual checklist items — light cyan accent on the number when not done. */
.home-checklist-item:not(.is-done) .check-index {
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.home-checklist-item.is-done {
    background: rgba(22, 74, 66, 0.55);
    border-color: rgba(72, 255, 209, 0.38);
}

/* Entrepreneur pills — colour-variance via nth-child so the status/rank/matrix row
   reads as distinct facets rather than identical tiles. Each gets a
   tinted border + matching top-right glow. */
.home-entrepreneur-pills > .home-entrepreneur-pill {
    position: relative;
    overflow: hidden;
}

.home-entrepreneur-pills > .home-entrepreneur-pill::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 200ms ease;
}

.home-entrepreneur-pills > .home-entrepreneur-pill:hover::before { opacity: 1; }

.home-entrepreneur-pills > .home-entrepreneur-pill:nth-child(3)::before {
    background: radial-gradient(circle, rgba(29, 226, 238, 0.26) 0%, transparent 70%);
}
.home-entrepreneur-pills > .home-entrepreneur-pill:nth-child(4)::before {
    background: radial-gradient(circle, rgba(72, 255, 209, 0.26) 0%, transparent 70%);
}
.home-entrepreneur-pills > .home-entrepreneur-pill:nth-child(5)::before {
    background: radial-gradient(circle, rgba(126, 167, 255, 0.26) 0%, transparent 70%);
}

/* Accent dot before each pill label so it picks up the variance too. */
.home-entrepreneur-pill-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.home-entrepreneur-pill-label::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #1de2ee;
    box-shadow: 0 0 6px rgba(29, 226, 238, 0.6);
}

.home-entrepreneur-pills > .home-entrepreneur-pill:nth-child(4) .home-entrepreneur-pill-label::before {
    background: #48ffd1;
    box-shadow: 0 0 6px rgba(72, 255, 209, 0.6);
}

.home-entrepreneur-pills > .home-entrepreneur-pill:nth-child(5) .home-entrepreneur-pill-label::before {
    background: #7ea7ff;
    box-shadow: 0 0 6px rgba(126, 167, 255, 0.6);
}

.home-entrepreneur-pill-value {
    position: relative;
    z-index: 1;
}

/* Trial insight card — cyan accent stripe on the left + title accent dot. */
.trial-insight {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background:
        linear-gradient(90deg, rgba(43, 218, 235, 0.2), rgba(8, 35, 48, 0.7) 52%, rgba(7, 29, 40, 0.85) 100%) padding-box,
        linear-gradient(135deg, rgba(29, 226, 238, 0.5) 0%, rgba(72, 255, 209, 0.3) 100%) border-box;
}

.trial-insight-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.trial-insight-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    box-shadow: 0 0 8px rgba(29, 226, 238, 0.6);
    flex-shrink: 0;
}

/* Top system-status pill row — light up the current pill with a pulse-on-
   hover cue so it reads as the anchor of the row. */
.state-pill-current {
    position: relative;
}

.state-pill-current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #48ffd1, transparent);
    opacity: 0.8;
}

/* Home business action buttons — add a subtle cyan under-glow on hover. */
.home-action-btn {
    transition: transform 140ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

.home-action-btn:hover {
    border-color: rgba(140, 235, 247, 0.82);
    box-shadow: 0 10px 22px rgba(29, 226, 238, 0.22), 0 8px 14px rgba(8, 37, 49, 0.24);
}

/* -------------------------------------------------------------- */
/* PRO feature lock — on buttons that non-Pro users can see but    */
/* can't use. Spec in ~READ-FIRST.md. Modal opens on click.        */
/* -------------------------------------------------------------- */

.brand-guide-refine-btn.is-locked,
.brand-guide-generate-btn.is-locked {
    opacity: 0.72;
    filter: saturate(0.6);
    cursor: pointer;  /* still clickable — click opens the PRO modal */
    position: relative;
}

.brand-guide-refine-btn.is-locked:hover,
.brand-guide-generate-btn.is-locked:hover {
    opacity: 0.88;
    box-shadow: 0 0 14px rgba(255, 212, 128, 0.28);
    border-color: rgba(255, 212, 128, 0.7);
}

.brand-guide-pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 3px 7px;
    margin-left: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd480 0%, #ffb347 100%);
    color: #3a2100;
    box-shadow: 0 0 10px rgba(255, 212, 128, 0.45);
}

/* PRO feature modal */
.pro-feature-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pro-feature-modal[hidden] { display: none; }

.pro-feature-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 14, 0.78);
    backdrop-filter: blur(6px);
}

.pro-feature-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    padding: 30px 28px 24px;
    border-radius: 22px;
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgba(22, 52, 74, 0.98), rgba(7, 22, 32, 0.98)) padding-box,
        linear-gradient(135deg, #ffd480 0%, #1de2ee 55%, #7ea7ff 100%) border-box;
    color: #eafaff;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 212, 128, 0.16);
    overflow: hidden;
}

.pro-feature-modal-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 212, 128, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.pro-feature-modal-eyebrow {
    margin: 0 0 6px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 212, 128, 0.88);
    font-weight: 700;
    position: relative;
}

.pro-feature-modal-title {
    margin: 0 0 10px;
    font-size: 1.42rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    position: relative;
    background: linear-gradient(120deg, #ffffff 0%, #a8f0ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.pro-feature-modal-message {
    margin: 0 0 20px;
    color: rgba(220, 240, 248, 0.86);
    font-size: 1rem;
    line-height: 1.55;
    position: relative;
}

.pro-feature-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
}

.pro-feature-modal-btn {
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.32);
    background: rgba(7, 22, 32, 0.7);
    color: #eafaff;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 220ms ease, transform 120ms ease;
}

.pro-feature-modal-btn:hover { border-color: rgba(29, 226, 238, 0.65); }
.pro-feature-modal-btn:active { transform: translateY(1px); }

.pro-feature-modal-btn--primary {
    background: linear-gradient(135deg, rgba(255, 212, 128, 0.9) 0%, rgba(255, 179, 71, 0.95) 100%);
    color: #3a2100;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(255, 212, 128, 0.3);
}

.pro-feature-modal-btn--primary:hover {
    box-shadow: 0 14px 30px rgba(255, 212, 128, 0.45);
    background: linear-gradient(135deg, rgba(255, 222, 150, 1) 0%, rgba(255, 189, 87, 1) 100%);
}

/* -------------------------------------------------------------- */
/* Content Generator (Component 3)                                */
/* -------------------------------------------------------------- */

.content-shell {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Daily-pick banner at top of /dashboard/content-generator */
.content-daily-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 14px;
    border: 1px solid transparent;
    background:
        linear-gradient(90deg, rgba(29, 226, 238, 0.18), rgba(7, 22, 32, 0.82) 60%) padding-box,
        linear-gradient(135deg, #48ffd1 0%, #1de2ee 50%, #7ea7ff 100%) border-box;
    color: #eafaff;
    text-decoration: none;
    box-shadow: 0 0 24px rgba(29, 226, 238, 0.14);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.content-daily-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 36px rgba(29, 226, 238, 0.28);
}

.content-daily-eyebrow {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #48ffd1;
    flex-shrink: 0;
}

.content-daily-title {
    flex: 1;
    font-size: 1.02rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-daily-cta {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1de2ee;
    flex-shrink: 0;
}

.content-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 820px) {
    .content-layout { grid-template-columns: 1fr; }
}

/* Library (left rail) */
.content-lib {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.content-lib-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.content-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid rgba(130, 245, 255, 0.26);
    background: rgba(7, 22, 32, 0.62);
    color: rgba(220, 240, 248, 0.82);
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.content-chip:hover { border-color: rgba(29, 226, 238, 0.6); color: #eafaff; }

.content-chip.is-active {
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.32), rgba(72, 255, 209, 0.2));
    border-color: rgba(29, 226, 238, 0.7);
    color: #eafaff;
    box-shadow: 0 0 14px rgba(29, 226, 238, 0.26);
}

.content-chip-fav { color: #ffd480; border-color: rgba(255, 212, 128, 0.38); }
.content-chip-fav.is-active {
    background: linear-gradient(135deg, rgba(255, 212, 128, 0.34), rgba(255, 179, 71, 0.22));
    border-color: rgba(255, 212, 128, 0.8);
    color: #ffd480;
    box-shadow: 0 0 14px rgba(255, 212, 128, 0.3);
}

.content-search input[type="search"] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(2, 12, 18, 0.6);
    color: #eafaff;
    font: inherit;
    font-size: 0.95rem;
}
.content-search input[type="search"]:focus { outline: none; border-color: rgba(29, 226, 238, 0.7); }

.content-lib-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 68vh;
    overflow-y: auto;
    padding-right: 4px;
}

.content-lib-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(130, 245, 255, 0.18);
    background: linear-gradient(165deg, rgba(20, 52, 72, 0.58), rgba(7, 22, 32, 0.82));
    color: #eafaff;
    text-decoration: none;
    transition: border-color 160ms ease, transform 140ms ease, background 160ms ease;
}

.content-lib-item:hover { border-color: rgba(29, 226, 238, 0.55); transform: translateY(-1px); }

.content-lib-item.is-active {
    border-color: rgba(29, 226, 238, 0.75);
    background: linear-gradient(165deg, rgba(22, 74, 98, 0.86), rgba(8, 32, 44, 0.92));
    box-shadow: 0 10px 22px rgba(29, 226, 238, 0.18);
}

.content-lib-item-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.66);
    font-weight: 600;
}

.content-lib-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(29, 226, 238, 0.14);
    color: #a8f0ff;
}

.content-lib-cat { color: rgba(199, 235, 247, 0.78); }

.content-lib-featured { color: #48ffd1; font-size: 0.9rem; margin-left: auto; }
.content-lib-fav { color: #ffd480; font-size: 0.9rem; }

.content-lib-item h3 {
    margin: 2px 0 0;
    font-size: 0.98rem;
    line-height: 1.3;
    color: #eafaff;
}

.content-lib-item p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(199, 235, 247, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-empty {
    margin: 0;
    padding: 14px;
    border-radius: 12px;
    border: 1px dashed rgba(130, 245, 255, 0.24);
    color: rgba(199, 235, 247, 0.65);
    font-style: italic;
}

/* Selected prompt pane */
.content-pane { min-width: 0; }

.content-selected-empty {
    padding: 28px 22px;
    border-radius: 16px;
    border: 1px dashed rgba(130, 245, 255, 0.22);
    color: rgba(199, 235, 247, 0.68);
    text-align: center;
}

.content-selected {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.28);
    background: linear-gradient(165deg, rgba(20, 52, 72, 0.7), rgba(7, 22, 32, 0.88));
    color: #eafaff;
}

.content-selected-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.content-selected-cat {
    margin: 0 0 4px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1de2ee;
    font-weight: 700;
}

.content-selected h2 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2;
    color: #eafaff;
}

.content-selected-platforms {
    margin-top: 6px;
    font-size: 0.82rem;
    color: rgba(199, 235, 247, 0.68);
}

.content-selected-summary {
    margin: 0;
    color: rgba(220, 240, 248, 0.8);
    line-height: 1.55;
}

.content-fav-btn {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 212, 128, 0.38);
    background: rgba(7, 22, 32, 0.7);
    color: rgba(255, 212, 128, 0.9);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
    flex-shrink: 0;
}
.content-fav-btn:hover { border-color: rgba(255, 212, 128, 0.8); }
.content-fav-btn.is-favourited {
    background: linear-gradient(135deg, rgba(255, 212, 128, 0.34), rgba(255, 179, 71, 0.22));
    color: #ffd480;
    border-color: rgba(255, 212, 128, 0.8);
    box-shadow: 0 0 14px rgba(255, 212, 128, 0.28);
}

.content-missing {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 212, 128, 0.42);
    background: rgba(56, 38, 12, 0.42);
    color: rgba(255, 222, 170, 0.92);
    font-size: 0.9rem;
    line-height: 1.5;
}
.content-missing ul { margin: 6px 0 0; padding-left: 18px; }
.content-missing a { color: #ffd480; text-decoration: underline; }

.content-rendered-card { margin-top: 4px; }
.content-rendered-textarea {
    min-height: 180px;
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92rem;
    line-height: 1.55;
}

.content-selected-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.content-open-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.32);
    background: rgba(7, 22, 32, 0.7);
    color: #eafaff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 220ms ease;
}
.content-open-btn:hover { border-color: rgba(29, 226, 238, 0.7); box-shadow: 0 0 16px rgba(29, 226, 238, 0.26); }

.content-open-chatgpt:hover { box-shadow: 0 0 16px rgba(72, 255, 209, 0.32); border-color: rgba(72, 255, 209, 0.7); }
.content-open-claude:hover  { box-shadow: 0 0 16px rgba(255, 165, 88, 0.32); border-color: rgba(255, 165, 88, 0.7); }
.content-open-grok:hover    { box-shadow: 0 0 16px rgba(180, 180, 200, 0.28); border-color: rgba(220, 220, 235, 0.7); }

/* Topbar PRO badge (on locked nav entries) */
.ofm-topbar-pro-badge {
    margin-left: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 2px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd480 0%, #ffb347 100%);
    color: #3a2100;
    vertical-align: middle;
}

/* /dashboard "Today's prompt" tile */
.home-daily-prompt-card {
    position: relative;
    display: block;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgba(22, 74, 98, 0.7), rgba(7, 22, 32, 0.88)) padding-box,
        linear-gradient(135deg, #48ffd1 0%, #1de2ee 55%, #7ea7ff 100%) border-box;
    color: #eafaff;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    text-align: left;
    box-shadow: 0 0 22px rgba(29, 226, 238, 0.12);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.home-daily-prompt-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(72, 255, 209, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.home-daily-prompt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 32px rgba(29, 226, 238, 0.24);
}

.home-daily-prompt-card.is-locked {
    background:
        linear-gradient(165deg, rgba(54, 34, 10, 0.7), rgba(22, 14, 4, 0.9)) padding-box,
        linear-gradient(135deg, #ffd480 0%, #1de2ee 70%, #7ea7ff 100%) border-box;
}

.home-daily-prompt-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-daily-prompt-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.home-daily-prompt-eyebrow {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #48ffd1;
}

.home-daily-prompt-cat {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.7);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(29, 226, 238, 0.14);
}

.home-daily-prompt-title {
    margin: 2px 0 0;
    font-size: 1.08rem;
    line-height: 1.3;
    color: #eafaff;
}

.home-daily-prompt-summary {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(199, 235, 247, 0.72);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-daily-prompt-cta {
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1de2ee;
}

.home-daily-prompt-card.is-locked .home-daily-prompt-cta { color: #ffd480; }

.home-daily-prompt-pro {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd480 0%, #ffb347 100%);
    color: #3a2100;
    box-shadow: 0 0 10px rgba(255, 212, 128, 0.45);
}

/* -------------------------------------------------------------- */
/* AI Assistant (Component 4) — owner setup page                 */
/* -------------------------------------------------------------- */
.agent-setup-shell {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.agent-setup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

@media (max-width: 960px) {
    .agent-setup-layout { grid-template-columns: 1fr; }
}

.agent-setup-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-setup-form .brand-guide-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(130, 245, 255, 0.16);
    background: rgba(7, 22, 32, 0.42);
}

.agent-important-note,
.agent-important-field {
    position: relative;
    border: 1px solid rgba(255, 215, 123, 0.28);
    background: linear-gradient(135deg, rgba(255, 215, 123, 0.09), rgba(7, 22, 32, 0.5));
}

.agent-important-note {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 12px;
    padding: 14px 16px;
    color: rgba(241, 249, 252, 0.78);
}

.agent-important-note strong {
    color: #ffd77b;
}

.agent-important-badge {
    align-self: flex-start;
    display: inline-flex;
    width: max-content;
    margin: 0 0 8px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 123, 0.45);
    background: rgba(255, 215, 123, 0.11);
    color: #ffd77b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agent-tone-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-tone-chip {
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.34);
    background: rgba(7, 22, 32, 0.62);
    color: #eafaff;
    cursor: pointer;
}
.agent-tone-chip.is-active {
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.32), rgba(72, 255, 209, 0.2));
    border-color: rgba(29, 226, 238, 0.7);
    box-shadow: 0 0 12px rgba(29, 226, 238, 0.22);
}

.agent-enable-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 6px 0;
}
.agent-enable-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.agent-enable-knob {
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: rgba(7, 22, 32, 0.8);
    border: 1px solid rgba(130, 245, 255, 0.32);
    transition: background 160ms ease, border-color 160ms ease;
}
.agent-enable-knob::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(199, 235, 247, 0.82);
    transition: transform 180ms ease, background 160ms ease;
}
.agent-enable-switch input:checked + .agent-enable-knob {
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.4), rgba(72, 255, 209, 0.28));
    border-color: rgba(29, 226, 238, 0.7);
}
.agent-enable-switch input:checked + .agent-enable-knob::after {
    transform: translateX(22px);
    background: #48ffd1;
    box-shadow: 0 0 10px rgba(72, 255, 209, 0.5);
}
.agent-enable-text { font-weight: 600; font-size: 0.95rem; color: #eafaff; }

.agent-setup-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* Token usage stats strip */
.agent-token-stats {
    border-top: 1px solid rgba(130, 245, 255, 0.14);
    padding-top: 20px;
    margin-top: 4px;
}
.agent-token-stats-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(180, 228, 245, 0.5);
    margin: 0 0 12px;
}
.agent-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.agent-stat-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: rgba(7, 22, 32, 0.6);
    border: 1px solid rgba(130, 245, 255, 0.14);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 120px;
    flex: 1 1 120px;
    max-width: 200px;
}
.agent-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(180, 228, 245, 0.45);
}
.agent-stat-primary {
    font-size: 1.15rem;
    font-weight: 700;
    color: #c9f0ff;
    line-height: 1.2;
}
.agent-stat-sub {
    font-size: 0.75rem;
    color: rgba(180, 228, 245, 0.5);
}
.agent-stat-divider {
    width: 1px;
    background: rgba(130, 245, 255, 0.14);
    align-self: stretch;
    margin: 0 4px;
    flex: 0 0 1px;
}
@media (max-width: 600px) {
    .agent-stat-divider { display: none; }
    .agent-stat-card { max-width: none; }
}

/* Token budget progress bar */
.agent-budget-row {
    margin-bottom: 18px;
}
.agent-budget-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
    gap: 8px;
}
.agent-budget-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(180, 228, 245, 0.45);
}
.agent-budget-pct {
    font-size: 0.73rem;
    font-weight: 600;
    color: rgba(180, 228, 245, 0.7);
}
.agent-budget-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(130, 245, 255, 0.1);
    overflow: hidden;
}
.agent-budget-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width 0.4s ease;
}
.agent-budget-fill.agent-budget-bar--warn {
    background: #f5c842;
}
.agent-budget-fill.agent-budget-bar--danger {
    background: #ff6b6b;
}
.agent-budget-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 0.72rem;
    color: rgba(180, 228, 245, 0.5);
    gap: 8px;
    flex-wrap: wrap;
}
.agent-budget-topup {
    color: var(--primary-2);
    font-weight: 600;
}
.agent-budget-topup-empty {
    color: rgba(180, 228, 245, 0.4);
}
.agent-budget-topup-empty a {
    color: var(--primary);
    text-decoration: none;
}
.agent-budget-topup-empty a:hover {
    text-decoration: underline;
}
.agent-budget-topup-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.agent-budget-topup-label {
    font-size: 0.72rem;
    color: rgba(180, 228, 245, 0.5);
    white-space: nowrap;
}
.agent-budget-topup-select {
    font-size: 0.72rem;
    background: var(--input-bg);
    border: 1px solid var(--input-line);
    border-radius: 6px;
    color: var(--text-main);
    padding: 3px 6px;
    cursor: pointer;
}
.agent-budget-topup-select:focus {
    outline: none;
    border-color: var(--input-line-focus);
}
.agent-budget-topup-btn {
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--primary);
    color: var(--primary-ink);
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: opacity var(--ease);
}
.agent-budget-topup-btn:hover {
    opacity: 0.85;
}
.agent-budget-hint {
    margin: 6px 0 0;
    font-size: 0.7rem;
    color: rgba(180, 228, 245, 0.38);
    line-height: 1.4;
}

.agent-budget-total {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-2);
    margin-top: 6px;
}
.agent-budget-purchase {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.agent-budget-purchase-label {
    font-size: 0.72rem;
    color: rgba(180, 228, 245, 0.5);
}
.agent-budget-purchase-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Token top-up confirmation modal */
.agent-topup-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 10, 16, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agent-topup-modal[hidden] {
    display: none;
}
.agent-topup-modal-box {
    background: var(--surface-strong);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    max-width: 380px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.agent-topup-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}
.agent-topup-modal-body {
    font-size: 0.88rem;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.5;
}
.agent-topup-modal-body strong {
    color: var(--text-main);
}
.agent-topup-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.agent-topup-modal-ok {
    flex: 1;
    background: var(--primary);
    color: var(--primary-ink);
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--ease);
}
.agent-topup-modal-ok:hover { opacity: 0.85; }
.agent-topup-modal-cancel {
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease);
}
.agent-topup-modal-cancel:hover {
    border-color: var(--line-strong);
    color: var(--text-main);
}

/* Preview / Test Station CTA panel (replaces old static mock) */
.agent-preview-mock {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agent-preview-mock--test-prompt {
    justify-content: center;
    min-height: 380px;
}
.agent-preview-test-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.2);
    background: linear-gradient(155deg, rgba(4, 22, 30, 0.7), rgba(2, 12, 18, 0.85));
}
.agent-preview-test-cta-text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(199, 235, 247, 0.82);
}
.agent-preview-test-cta-btn { align-self: flex-start; }

.agent-preview-frame {
    position: relative;
    border-radius: 22px;
    border: 1px solid rgba(130, 245, 255, 0.24);
    background: linear-gradient(165deg, rgba(4, 22, 30, 0.88), rgba(2, 12, 18, 0.95));
    padding: 18px;
    min-height: 420px;
    overflow: hidden;
}

.agent-preview-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 10px;
    opacity: 0.6;
}
.agent-preview-page-hero {
    width: 60px; height: 60px; border-radius: 50%;
    overflow: hidden; border: 1px solid rgba(255,255,255,0.2);
}
.agent-preview-page-hero img { width: 100%; height: 100%; object-fit: cover; }
.agent-preview-page-title { font-size: 0.82rem; letter-spacing: 0.08em; color: rgba(199, 235, 247, 0.7); }
.agent-preview-page-block {
    width: 100%; max-width: 240px;
    height: 36px; border-radius: 10px;
    background: rgba(29, 226, 238, 0.12);
    border: 1px solid rgba(29, 226, 238, 0.22);
}
.agent-preview-page-block--short { max-width: 160px; }

.agent-preview-widget {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 260px;
    border-radius: 16px;
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgba(10, 32, 44, 0.96), rgba(4, 18, 26, 0.98)) padding-box,
        linear-gradient(135deg, rgba(29, 226, 238, 0.6), rgba(72, 255, 209, 0.4)) border-box;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(29, 226, 238, 0.18);
    overflow: hidden;
}
.agent-preview-widget-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(130, 245, 255, 0.14);
}
.agent-preview-widget-avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(255,255,255,0.3);
}
.agent-preview-widget-meta { display: flex; flex-direction: column; gap: 2px; }
.agent-preview-widget-name { font-size: 0.88rem; font-weight: 600; color: #eafaff; }
.agent-preview-widget-status {
    font-size: 0.7rem; color: #48ffd1; display: inline-flex; align-items: center; gap: 5px;
}
.agent-preview-widget-status::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: #48ffd1; box-shadow: 0 0 6px rgba(72, 255, 209, 0.7);
}
.agent-preview-widget-body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px; max-height: 180px; overflow-y: auto;
}
.agent-preview-bubble {
    padding: 8px 12px; border-radius: 14px; font-size: 0.82rem; line-height: 1.4;
    max-width: 80%;
}
.agent-preview-bubble--agent {
    background: rgba(29, 226, 238, 0.14);
    color: #eafaff;
    align-self: flex-start;
    border-top-left-radius: 4px;
}
.agent-preview-bubble--visitor {
    background: rgba(72, 255, 209, 0.22);
    color: #eafaff;
    align-self: flex-end;
    border-top-right-radius: 4px;
}
.agent-preview-bubble--ghost { opacity: 0.55; font-style: italic; }
.agent-preview-widget-input {
    padding: 10px 12px; font-size: 0.82rem;
    color: rgba(199, 235, 247, 0.5);
    border-top: 1px solid rgba(130, 245, 255, 0.14);
}

/* -------------------------------------------------------------- */
/* AI Assistant Test Station (authenticated owner page)          */
/* -------------------------------------------------------------- */
.agent-test-station-section { display: flex; flex-direction: column; flex: 1 1 auto; }
.agent-test-station-header { padding-bottom: 0; }
.agent-test-station-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0 12px;
    flex-wrap: wrap;
}
.agent-test-station-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.agent-test-station-hint {
    font-size: 0.82rem;
    color: rgba(199, 235, 247, 0.5);
}
.agent-test-station-token-counter {
    font-size: 0.82rem;
    color: rgba(199, 235, 247, 0.6);
    white-space: nowrap;
}
.agent-test-station-token-counter strong {
    color: rgba(199, 235, 247, 0.9);
    font-variant-numeric: tabular-nums;
}
.agent-test-station-main { display: flex; flex-direction: column; min-height: calc(100vh - 60px); }
.agent-test-station-frame-wrap {
    flex: 1 1 auto;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(130, 245, 255, 0.2);
    min-height: 600px;
}
.agent-test-station-frame {
    width: 100%;
    height: 100%;
    min-height: 600px;
    border: 0;
    display: block;
    background: #040e16;
}

/* -------------------------------------------------------------- */
/* Public AI Assistant widget (on /{username} pages)             */
/* -------------------------------------------------------------- */
/* Deliberately the SAME paint as .profile-link-btn - 2px solid var(--profile-btn)
   border, rgba(--profile-btn-rgb, .22) fill, var(--profile-link) ink - so it reads
   as one of the member's own buttons that happens to be round and floating.
   It previously used a hardcoded cyan/mint gradient that ignored the page theme. */
.ofm-agent-bubble {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 2px solid var(--profile-btn, #1DE2EE);
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.22);
    color: var(--profile-link, #D7F7FF);
    padding: 0;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(var(--profile-btn-rgb, 29,226,238), 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 180ms ease, filter 180ms ease, background 180ms ease;
}
.ofm-agent-bubble img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofm-agent-bubble-icon { width: 30px; height: 30px; display: block; }
.ofm-agent-bubble:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.32);
}
.ofm-agent-bubble.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.8); }

.ofm-agent-bubble-dot {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #48ffd1;
    border: 2px solid #ffffff;
    box-shadow: 0 0 8px rgba(72, 255, 209, 0.7);
}

.ofm-agent-panel {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 81;
    width: min(360px, calc(100vw - 24px));
    /* 100vh fallback for older browsers; 100dvh (dynamic viewport height)
       on modern browsers shrinks when the mobile soft keyboard opens, so
       the panel resizes inward from the top instead of pushing the panel
       header off the screen. Layout below (header / scrollable body / input)
       handles the shrink gracefully — the messages body has flex:1 +
       overflow-y:auto, so it just gets shorter while header + input stay
       pinned. */
    height: min(560px, calc(100vh - 48px));
    height: min(560px, calc(100dvh - 48px));
    border-radius: 20px;
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgba(6, 24, 34, 0.98), rgba(2, 12, 18, 0.99)) padding-box,
        linear-gradient(135deg, rgba(29, 226, 238, 0.65), rgba(72, 255, 209, 0.42), rgba(126, 167, 255, 0.42)) border-box;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(29, 226, 238, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms ease, opacity 200ms ease;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #eafaff;
}
.ofm-agent-panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.ofm-agent-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(130, 245, 255, 0.14);
}
.ofm-agent-panel-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.3);
}
.ofm-agent-panel-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ofm-agent-panel-name { font-size: 0.96rem; font-weight: 700; }
.ofm-agent-panel-status {
    font-size: 0.72rem; color: #48ffd1;
    display: inline-flex; align-items: center; gap: 6px;
}
.ofm-agent-panel-status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #48ffd1; box-shadow: 0 0 6px rgba(72, 255, 209, 0.7);
}
.ofm-agent-panel-close {
    font: inherit; font-size: 1.5rem; line-height: 1;
    background: transparent; border: 0; color: rgba(199, 235, 247, 0.72);
    cursor: pointer; padding: 4px 8px;
}
.ofm-agent-panel-close:hover { color: #eafaff; }

.ofm-agent-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    overflow-y: auto;
}

.ofm-agent-bubble-msg {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 85%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.ofm-agent-bubble-msg--agent {
    background: rgba(29, 226, 238, 0.14);
    color: #eafaff;
    align-self: flex-start;
    border-top-left-radius: 4px;
    border: 1px solid rgba(29, 226, 238, 0.22);
}
.ofm-agent-bubble-msg--visitor {
    background: linear-gradient(135deg, rgba(72, 255, 209, 0.3), rgba(29, 226, 238, 0.24));
    color: #eafaff;
    align-self: flex-end;
    border-top-right-radius: 4px;
}

.ofm-agent-bubble-msg a {
    color: #48ffd1;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}

.ofm-agent-bubble-msg a:hover { color: #a8ffe6; }

.ofm-agent-bubble-msg--typing {
    display: inline-flex;
    gap: 4px;
    padding: 14px;
    max-width: auto;
}
.ofm-agent-bubble-msg--typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(29, 226, 238, 0.75);
    animation: ofm-agent-typing 1.2s ease-in-out infinite;
}
.ofm-agent-bubble-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.ofm-agent-bubble-msg--typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ofm-agent-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.ofm-agent-panel-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(130, 245, 255, 0.14);
}
.ofm-agent-panel-input textarea {
    flex: 1;
    resize: none;
    min-height: 38px;
    max-height: 120px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(2, 12, 18, 0.7);
    color: #eafaff;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.4;
    overflow-y: auto;
}
.ofm-agent-panel-input textarea:focus {
    outline: none;
    border-color: rgba(29, 226, 238, 0.7);
}
.ofm-agent-panel-input button {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    color: #052029;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(29, 226, 238, 0.28);
}
.ofm-agent-panel-input button:disabled { opacity: 0.5; cursor: default; }

.ofm-agent-lead-banner {
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(72, 255, 209, 0.08);
    color: rgba(220, 240, 248, 0.92);
    font-size: 0.82rem;
}
.ofm-agent-lead-banner p { margin: 0; }

@media (max-width: 480px) {
    .ofm-agent-panel { right: 8px; bottom: 8px; height: min(80vh, 560px); }
    .ofm-agent-bubble { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

/* Lead-capture form inside the public widget — collapsible bottom sheet  */
.ofm-agent-lead-form {
    border-top: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(29, 226, 238, 0.05);
}
.ofm-agent-lead-form[hidden] { display: none; }

/* Bar (always visible while form is in DOM) — click to expand/collapse */
.ofm-agent-lead-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 6px 12px;
}
.ofm-agent-lead-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 6px 4px;
    color: rgba(220, 240, 248, 0.92);
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
}
.ofm-agent-lead-toggle:hover { color: #eafaff; }
.ofm-agent-lead-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ofm-agent-lead-chevron {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: rgba(29, 226, 238, 0.85);
    transition: transform 0.18s ease;
    display: inline-block;
}
.ofm-agent-lead-form[data-state="collapsed"] .ofm-agent-lead-chevron {
    transform: rotate(180deg); /* chevron points down when collapsed = "expand to open" */
}
.ofm-agent-lead-close {
    flex-shrink: 0;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.28);
    background: transparent;
    color: rgba(199, 235, 247, 0.78);
    cursor: pointer;
}
.ofm-agent-lead-close:hover { color: #eafaff; border-color: rgba(29, 226, 238, 0.7); }

/* Fields panel (collapsed by default — only Name + Email visible when open) */
.ofm-agent-lead-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 12px 10px;
}
.ofm-agent-lead-form[data-state="collapsed"] .ofm-agent-lead-fields {
    display: none;
}
.ofm-agent-lead-fields input,
.ofm-agent-lead-fields textarea {
    padding: 7px 11px;
    border-radius: 10px;
    border: 1px solid rgba(130, 245, 255, 0.26);
    background: rgba(2, 12, 18, 0.72);
    color: #eafaff;
    font: inherit;
    font-size: 0.88rem;
}
.ofm-agent-lead-fields input:focus,
.ofm-agent-lead-fields textarea:focus {
    outline: none; border-color: rgba(29, 226, 238, 0.75);
}

/* Progressive disclosure: phone + message hidden until user expands */
.ofm-agent-lead-more {
    margin: 0;
}
.ofm-agent-lead-more > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: rgba(29, 226, 238, 0.85);
    padding: 4px 2px;
    user-select: none;
}
.ofm-agent-lead-more > summary::-webkit-details-marker { display: none; }
.ofm-agent-lead-more > summary:hover { color: #eafaff; }
.ofm-agent-lead-more[open] > summary { color: rgba(199, 235, 247, 0.62); }
.ofm-agent-lead-more[open] > summary::after { content: ' (hide)'; opacity: 0.7; }
.ofm-agent-lead-more-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.ofm-agent-lead-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.ofm-agent-lead-skip {
    font: inherit;
    font-size: 0.8rem;
    background: transparent;
    border: 0;
    color: rgba(199, 235, 247, 0.64);
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ofm-agent-lead-skip:hover { color: #eafaff; }
.ofm-agent-lead-fields button[type="submit"] {
    padding: 8px 14px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    color: #052029;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(29, 226, 238, 0.28);
}
.ofm-agent-lead-fields button[type="submit"]:disabled { opacity: 0.55; }
.ofm-agent-lead-status {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: rgba(199, 235, 247, 0.72);
}

/* -------------------------------------------------------------- */
/* AI Assistant — owner sub-nav + knowledge CRUD + leads inbox    */
/* -------------------------------------------------------------- */
/* Sub-nav visual matches .settings-tabs (locked 2026-05-16) — the
   AI Assistant Setup/Knowledge/Leads strip and the Settings tab
   tray should look identical so users learn the pattern once. */
.agent-subnav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px;
    margin-top: 14px;
    margin-bottom: 16px;
    background: rgba(2, 18, 30, 0.55);
    border: 1px solid rgba(130, 245, 255, 0.14);
    border-radius: 14px;
}
.agent-subnav-link {
    flex: 1 1 auto;
    text-align: center;
    padding: 9px 14px;
    border-radius: 10px;
    color: rgba(199, 235, 247, 0.7);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease;
}
.agent-subnav-link:hover {
    background: rgba(29, 226, 238, 0.08);
    color: #eafaff;
}
.agent-subnav-link.is-active {
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.22) 0%, rgba(72, 255, 209, 0.12) 100%);
    color: #eafaff;
    box-shadow: 0 0 14px rgba(29, 226, 238, 0.18);
}

/* Knowledge CRUD */
.agent-kb-editor {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: linear-gradient(165deg, rgba(20, 52, 72, 0.58), rgba(7, 22, 32, 0.82));
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agent-kb-editor-title {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: #eafaff;
}
.agent-kb-meta-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: start;
}
.agent-kb-meta-row > div { display: flex; flex-direction: column; gap: 6px; }

.agent-kb-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-kb-item {
    position: relative;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgba(20, 52, 72, 0.5), rgba(7, 22, 32, 0.78)) padding-box,
        linear-gradient(135deg, rgba(29, 226, 238, 0.48), rgba(72, 255, 209, 0.3)) border-box;
    color: #eafaff;
    overflow: hidden;
}
.agent-kb-item:has(script[data-kb-payload][data-kb-off="1"]) { opacity: 0.6; }

.agent-kb-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    margin-bottom: 6px;
}
.agent-kb-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.agent-kb-chip--active {
    background: linear-gradient(135deg, #48ffd1 0%, #1de2ee 100%);
    color: #052029;
}
.agent-kb-chip--muted {
    background: rgba(199, 235, 247, 0.14);
    color: rgba(199, 235, 247, 0.76);
}
.agent-kb-priority {
    color: rgba(199, 235, 247, 0.6);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.agent-kb-q {
    margin: 0 0 6px;
    font-size: 1.02rem;
    color: #eafaff;
}

.agent-kb-a {
    margin: 0 0 12px;
    color: rgba(220, 240, 248, 0.82);
    font-size: 0.94rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.agent-kb-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.agent-kb-delete-btn {
    color: #ff8a8a;
    border-color: rgba(255, 138, 138, 0.4);
}
.agent-kb-delete-btn:hover { border-color: rgba(255, 138, 138, 0.8); }

/* Structured Product Knowledge Base */
.agent-product-toolbar,
.agent-kb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 4px;
}
.agent-product-toolbar p,
.agent-kb-toolbar p {
    margin: 0;
    color: rgba(199, 235, 247, 0.72);
}
.agent-product-editor { gap: 16px; }
.agent-product-modal[hidden] { display: none; }
.agent-product-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 20px;
}
.agent-product-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 9, 15, 0.82);
    backdrop-filter: blur(7px);
    cursor: default;
}
.agent-product-modal-card {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}
.agent-product-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.agent-product-modal-head .agent-kb-editor-title { margin: 0; }
.agent-product-modal-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(130, 245, 255, 0.24);
    border-radius: 999px;
    background: rgba(4, 20, 29, 0.88);
    color: #eafcff;
    font: inherit;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}
.agent-product-modal-close:hover { border-color: rgba(130, 245, 255, 0.64); }
.agent-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.agent-product-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(130, 245, 255, 0.16);
    border-radius: 14px;
    background: rgba(3, 18, 28, 0.42);
}
.agent-product-section h3,
.agent-product-section p { margin: 0; }
.agent-product-section p {
    color: rgba(199, 235, 247, 0.66);
    font-size: 0.86rem;
}
.agent-product-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.agent-product-resources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.agent-product-resource,
.agent-product-testimonial {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    border-radius: 12px;
    background: rgba(7, 30, 42, 0.6);
}
.agent-product-resource .brand-guide-textarea,
.agent-product-grid .brand-guide-textarea {
    min-height: auto;
    padding: 10px 12px;
}
.agent-product-resource-head,
.agent-product-testimonial-head,
.agent-product-testimonial-checks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.agent-product-resource-head strong,
.agent-product-testimonial-head strong { margin-right: auto; }
.agent-product-resource-head label,
.agent-product-testimonial-checks label {
    color: rgba(199, 235, 247, 0.72);
    font-size: 0.78rem;
}
#agentProductTestimonials {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agent-product-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agent-product-item.needs-attention {
    border-color: rgba(255, 199, 92, 0.38);
}
.agent-product-card-warning,
.agent-product-card-ready {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 2px 0 14px;
    padding: 11px 13px;
    border-radius: 11px;
    font-size: 0.82rem;
}
.agent-product-card-warning {
    border: 1px solid rgba(255, 199, 92, 0.34);
    background: rgba(255, 199, 92, 0.08);
    color: rgba(241, 249, 252, 0.78);
}
.agent-product-card-warning strong { color: #ffd77b; }
.agent-product-card-ready {
    border: 1px solid rgba(72, 255, 209, 0.3);
    background: rgba(72, 255, 209, 0.07);
    color: #71ffd9;
}

.agent-unanswered-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 16px;
    padding: 16px;
}

.agent-unanswered-head h2 {
    margin: 0 0 5px;
    color: #f2fdff;
    font-size: 1.05rem;
}

.agent-unanswered-head p {
    margin: 0;
    color: rgba(218, 239, 246, 0.72);
}

.agent-unanswered-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-unanswered-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(1, 12, 18, 0.24);
}

.agent-unanswered-item p {
    margin: 0;
    color: #f2fdff;
    font-weight: 700;
}

.agent-unanswered-meta,
.agent-unanswered-item span {
    grid-column: 1 / -1;
    color: rgba(218, 239, 246, 0.68);
    font-size: 0.82rem;
}

.agent-unanswered-excerpt {
    grid-column: 1 / -1;
    display: grid;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(2, 20, 28, 0.38);
    color: rgba(234, 249, 252, 0.78);
    font-size: 0.83rem;
    line-height: 1.45;
}

.agent-unanswered-excerpt strong {
    color: #9cf7ff;
}

.agent-unanswered-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 680px) {
    .agent-unanswered-item {
        grid-template-columns: 1fr;
    }

    .agent-unanswered-actions {
        justify-content: flex-start;
    }
}
.agent-product-chip,
.agent-product-resource-chip {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(29, 226, 238, 0.12);
    color: #9cf7ff;
    font-size: 0.7rem;
    font-weight: 700;
}
.agent-product-kind {
    margin: -2px 0 8px;
    color: rgba(199, 235, 247, 0.58);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.agent-product-resource-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}
@media (max-width: 720px) {
    .agent-product-grid,
    .agent-product-resources { grid-template-columns: 1fr; }
    .agent-product-section-head { flex-direction: column; }
    .agent-product-toolbar,
    .agent-kb-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .agent-product-modal { padding: 8px; }
    .agent-product-modal-card {
        max-height: calc(100vh - 16px);
        padding: 16px;
    }
}

/* Leads inbox */
.agent-leads-filter { margin-bottom: 8px; }

.agent-leads-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 72vh;
    overflow-y: auto;
    padding-right: 4px;
}

.agent-leads-item {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(130, 245, 255, 0.18);
    background: linear-gradient(165deg, rgba(20, 52, 72, 0.58), rgba(7, 22, 32, 0.82));
    color: #eafaff;
    text-decoration: none;
    transition: border-color 160ms ease, transform 140ms ease;
}
.agent-leads-item:hover { border-color: rgba(29, 226, 238, 0.55); transform: translateY(-1px); }
.agent-leads-item.is-active {
    border-color: rgba(29, 226, 238, 0.75);
    background: linear-gradient(165deg, rgba(22, 74, 98, 0.86), rgba(8, 32, 44, 0.92));
    box-shadow: 0 10px 22px rgba(29, 226, 238, 0.18);
}
.agent-leads-item.is-contacted { opacity: 0.72; }

.agent-leads-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.agent-leads-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: #eafaff;
}
.agent-leads-time {
    font-size: 0.72rem;
    color: rgba(199, 235, 247, 0.58);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.agent-leads-preview {
    margin: 0 0 6px;
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(199, 235, 247, 0.7);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agent-leads-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.74rem;
    color: rgba(199, 235, 247, 0.68);
}
.agent-leads-contacted { color: #48ffd1; font-weight: 600; }

.agent-leads-detail .agent-leads-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    font-size: 0.88rem;
}
.agent-leads-detail .agent-leads-contacts a { color: #1de2ee; }

.agent-transcript {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(130, 245, 255, 0.18);
    background: rgba(2, 12, 18, 0.6);
    max-height: 500px;
    overflow-y: auto;
}

.agent-transcript-msg {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 85%;
}
.agent-transcript-msg--visitor { align-self: flex-end; text-align: right; }
.agent-transcript-msg--agent { align-self: flex-start; }
.agent-transcript-who {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.54);
}
.agent-transcript-body {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.4;
}
.agent-transcript-msg--visitor .agent-transcript-body {
    background: linear-gradient(135deg, rgba(72, 255, 209, 0.22), rgba(29, 226, 238, 0.18));
    border-top-right-radius: 4px;
}
.agent-transcript-msg--agent .agent-transcript-body {
    background: rgba(29, 226, 238, 0.12);
    border: 1px solid rgba(29, 226, 238, 0.2);
    border-top-left-radius: 4px;
}

/* -------------------------------------------------------------- */
/* Matrix Visualizer                                               */
/* -------------------------------------------------------------- */
.matrix-main {
    width: min(100%, 1540px);
    margin: 0 auto;
    padding: 92px 14px 92px;
    display: grid;
    gap: 16px;
}

.matrix-hero,
.matrix-board-card,
.matrix-level-card {
    border: 1px solid rgba(130, 245, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(9, 31, 44, 0.95), rgba(5, 19, 30, 0.9)),
        linear-gradient(135deg, rgba(52, 180, 206, 0.08), rgba(110, 255, 232, 0.03));
    box-shadow: 0 24px 60px -34px rgba(29, 226, 238, 0.34);
}

.matrix-hero {
    border-radius: 18px;
    padding: 22px;
    display: grid;
    gap: 16px;
}

.matrix-hero-eyebrow,
.matrix-card-kicker,
.matrix-level-count,
.matrix-node-stat span,
.matrix-node-details span {
    color: #8ecddb;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.matrix-hero-eyebrow {
    margin: 0;
}

.matrix-hero-head,
.matrix-board-head,
.matrix-level-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.matrix-hero h1,
.matrix-board-head h2,
.matrix-level-heading h3 {
    margin: 0;
    color: #f5feff;
}

.matrix-hero h1 {
    font-size: clamp(2rem, 7vw, 3.6rem);
    line-height: 1;
}

.matrix-hero p {
    margin: 8px 0 0;
    max-width: 760px;
    color: rgba(199, 235, 247, 0.74);
    line-height: 1.45;
}

.matrix-depth-controls,
.matrix-actions,
.matrix-node-pills,
.matrix-node-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.matrix-depth-btn,
.matrix-action-btn,
.matrix-node-pill,
.matrix-status-pill,
.matrix-node-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.18);
    background: rgba(5, 26, 37, 0.78);
    color: #ecfbff;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    text-decoration: none;
}

.matrix-depth-btn.is-active,
.matrix-action-btn:hover,
.matrix-node-btn:hover {
    border-color: rgba(72, 255, 209, 0.42);
    background: rgba(29, 226, 238, 0.14);
}

.matrix-hero-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.matrix-hero-stats article {
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(2, 16, 25, 0.58);
    display: grid;
    gap: 6px;
}

.matrix-hero-stats span {
    color: #8ecddb;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.matrix-hero-stats strong {
    color: #f5feff;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: clamp(1.15rem, 3vw, 1.7rem);
    line-height: 1;
    white-space: nowrap;
}

.matrix-board-card {
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 14px;
}

.matrix-board {
    display: grid;
    gap: 12px;
}

.matrix-level-card {
    border-radius: 16px;
    padding: 12px;
    display: grid;
    gap: 12px;
}

.matrix-level-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 229, 246, 0.42) transparent;
}

.matrix-level-track {
    display: grid;
    gap: 7px;
    min-width: fit-content;
    grid-template-columns: repeat(var(--matrix-columns), minmax(var(--matrix-card-min, 140px), 1fr));
}

.matrix-level-track-root {
    max-width: 380px;
}

.matrix-node,
.matrix-node-empty {
    min-height: var(--matrix-card-height, 148px);
    padding: 10px;
    border-radius: 16px;
}

.matrix-node {
    --rank-line: rgba(131, 245, 255, 0.16);
    --rank-wash: rgba(52, 180, 206, 0.06);
    border: 1px solid var(--rank-line);
    background:
        linear-gradient(180deg, rgba(9, 29, 42, 0.96), rgba(4, 19, 30, 0.92)),
        linear-gradient(135deg, var(--rank-wash), rgba(110, 255, 232, 0.02));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    display: grid;
    gap: 8px;
}

.matrix-node.rank-none { --rank-line: rgba(125, 153, 170, 0.2); --rank-wash: rgba(120, 144, 160, 0.06); }
.matrix-node.rank-1 { --rank-line: rgba(92, 207, 255, 0.26); --rank-wash: rgba(92, 207, 255, 0.08); }
.matrix-node.rank-2 { --rank-line: rgba(103, 255, 231, 0.26); --rank-wash: rgba(103, 255, 231, 0.08); }
.matrix-node.rank-3 { --rank-line: rgba(255, 212, 98, 0.28); --rank-wash: rgba(255, 212, 98, 0.08); }
.matrix-node.rank-4 { --rank-line: rgba(255, 163, 111, 0.28); --rank-wash: rgba(255, 163, 111, 0.08); }
.matrix-node.rank-5 { --rank-line: rgba(255, 124, 173, 0.28); --rank-wash: rgba(255, 124, 173, 0.08); }
.matrix-node.rank-6 { --rank-line: rgba(189, 148, 255, 0.3); --rank-wash: rgba(189, 148, 255, 0.08); }
.matrix-node.rank-7 { --rank-line: rgba(255, 122, 122, 0.3); --rank-wash: rgba(255, 122, 122, 0.08); }

.matrix-node-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.matrix-node-avatar {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid rgba(131, 245, 255, 0.2);
    object-fit: cover;
    background: rgba(5, 26, 37, 0.78);
    flex: 0 0 auto;
}

.matrix-node-copy {
    min-width: 0;
}

.matrix-node-name {
    color: #f5feff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.matrix-node-rank {
    margin-top: 3px;
    color: #dcf8ff;
    font-size: 0.74rem;
}

.matrix-status-pill.is-active { border-color: rgba(103, 255, 231, 0.34); }
.matrix-status-pill.is-grace { border-color: rgba(255, 212, 98, 0.34); }
.matrix-status-pill.is-inactive { border-color: rgba(255, 122, 122, 0.3); }
.matrix-status-pill.is-unknown { border-color: rgba(127, 156, 172, 0.3); }
.matrix-node-pill.is-personal { border-color: rgba(130, 245, 255, 0.38); color: #48ffd1; }

.matrix-node-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.matrix-node-stat {
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(131, 245, 255, 0.12);
    background: rgba(5, 23, 34, 0.78);
    display: grid;
    gap: 4px;
}

.matrix-node-stat strong {
    color: #f5feff;
    font-size: 0.92rem;
    white-space: nowrap;
}

.matrix-node-details {
    border-top: 1px solid rgba(131, 245, 255, 0.12);
    padding-top: 6px;
    color: rgba(199, 235, 247, 0.72);
    font-size: 0.76rem;
}

.matrix-node-details summary {
    cursor: pointer;
    color: #8ff9ee;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.matrix-node-details div {
    display: grid;
    gap: 2px;
    margin-top: 6px;
}

.matrix-node-details strong {
    color: #f5feff;
    overflow-wrap: anywhere;
}

.matrix-node-actions {
    margin-top: auto;
}

.matrix-node-actions .matrix-node-btn {
    flex: 1 1 0;
}

.matrix-node-empty {
    border: 1px dashed rgba(131, 245, 255, 0.16);
    background: rgba(6, 23, 34, 0.72);
    color: #9ed2de;
    display: grid;
    place-items: center;
    text-align: center;
}

.matrix-node-empty span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.matrix-node.is-compact {
    padding: 8px;
    gap: 6px;
}

.matrix-node.is-compact .matrix-node-avatar {
    width: 32px;
    height: 32px;
    border-radius: 12px;
}

.matrix-node.is-compact .matrix-node-name { font-size: 0.76rem; }
.matrix-node.is-compact .matrix-node-rank { font-size: 0.66rem; }
.matrix-node.is-compact .matrix-node-stats { grid-template-columns: 1fr; }
.matrix-node.is-compact .matrix-node-stat.secondary { display: none; }

.matrix-node.is-micro {
    padding: 7px;
    gap: 5px;
}

.matrix-node.is-micro .matrix-node-avatar {
    width: 26px;
    height: 26px;
    border-radius: 10px;
}

.matrix-node.is-micro .matrix-node-name { font-size: 0.7rem; }
.matrix-node.is-micro .matrix-node-stats { grid-template-columns: 1fr; }
.matrix-node.is-micro .matrix-node-stat { padding: 6px; }
.matrix-node.is-micro .matrix-node-stat.secondary,
.matrix-node.is-micro .matrix-node-details { display: none; }
.matrix-node.is-micro .matrix-node-stat strong { font-size: 0.8rem; }

@media (max-width: 1100px) {
    .matrix-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .matrix-main {
        padding: 82px 10px 76px;
    }

    .matrix-hero,
    .matrix-board-card {
        padding: 14px;
    }

    .matrix-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .matrix-depth-controls,
    .matrix-actions {
        width: 100%;
    }

    .matrix-depth-btn,
    .matrix-action-btn {
        flex: 1 1 calc(50% - 8px);
    }

    .matrix-level-card {
        padding: 10px;
    }

    .matrix-level-track-root {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .matrix-hero h1 {
        font-size: 2rem;
    }

    .matrix-hero-stats {
        grid-template-columns: 1fr;
    }

    .matrix-depth-btn,
    .matrix-action-btn {
        flex-basis: 100%;
    }

    .matrix-level-track {
        gap: 6px;
    }
}

/* -------------------------------------------------------------- */
/* Rank Progress                                                   */
/* -------------------------------------------------------------- */
.rank-main {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 92px 14px 92px;
    display: grid;
    gap: 16px;
}

.rank-hero,
.rank-panel {
    border: 1px solid rgba(130, 245, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(9, 31, 44, 0.97), rgba(5, 19, 30, 0.94)),
        linear-gradient(135deg, rgba(52, 180, 206, 0.1), rgba(110, 255, 232, 0.04));
    box-shadow: 0 24px 60px -34px rgba(29, 226, 238, 0.34);
}

.rank-hero {
    border-radius: 18px;
    padding: 22px;
    display: grid;
    gap: 16px;
}

.rank-hero-eyebrow,
.rank-card-kicker,
.rank-current-card span,
.rank-hero-stats span,
.rank-ladder-meta,
.rank-person-meta span {
    color: #8ecddb;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.rank-hero-eyebrow {
    margin: 0;
}

.rank-hero-head,
.rank-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.rank-hero h1,
.rank-section-head h2,
.rank-progress-card h3,
.rank-person-card h3 {
    margin: 0;
    color: #f5feff;
}

.rank-hero h1 {
    font-size: clamp(2rem, 7vw, 3.4rem);
    line-height: 1;
}

.rank-hero p,
.rank-section-head p,
.rank-progress-card p {
    margin: 8px 0 0;
    color: rgba(199, 235, 247, 0.74);
    line-height: 1.45;
}

.rank-current-card {
    min-width: 210px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(72, 255, 209, 0.26);
    background: rgba(2, 16, 25, 0.72);
    display: grid;
    gap: 7px;
}

.rank-current-card strong {
    color: #f5feff;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    line-height: 1;
}

.rank-current-card em {
    color: #48ffd1;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rank-plan-note {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 212, 98, 0.22);
    color: #ffe6a6;
    background: rgba(94, 67, 10, 0.22);
    font-size: 0.82rem;
}

.rank-hero-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.rank-hero-stats article {
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(2, 16, 25, 0.68);
    display: grid;
    gap: 6px;
}

.rank-hero-stats strong {
    color: #f5feff;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: clamp(1.02rem, 2.4vw, 1.48rem);
    line-height: 1;
    white-space: nowrap;
}

.rank-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rank-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
    align-items: start;
}

.rank-panel {
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 14px;
}

.rank-next-meter,
.rank-progress-track {
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(4, 20, 30, 0.78);
    overflow: hidden;
}

.rank-next-meter span,
.rank-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1de2ee, #48ffd1);
}

.rank-progress-list,
.rank-ladder-list {
    display: grid;
    gap: 10px;
}

.rank-progress-card,
.rank-ladder-row,
.rank-person-card,
.rank-empty-card {
    border-radius: 15px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(2, 16, 25, 0.68);
}

.rank-progress-card {
    padding: 12px;
    display: grid;
    gap: 9px;
}

.rank-progress-card.is-ready {
    border-color: rgba(72, 255, 209, 0.28);
}

.rank-progress-card.is-working {
    border-color: rgba(255, 212, 98, 0.26);
}

.rank-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.rank-progress-top strong {
    color: #f5feff;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    white-space: nowrap;
}

.rank-mix {
    padding-top: 4px;
    border-top: 1px solid rgba(130, 245, 255, 0.12);
}

.rank-mix > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rank-mix span,
.rank-status-row span,
.rank-counts-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.16);
    background: rgba(5, 26, 37, 0.78);
    color: #ecfbff;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rank-ladder-row {
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.rank-ladder-row.is-current {
    border-color: rgba(72, 255, 209, 0.34);
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.13), rgba(2, 16, 25, 0.72));
}

.rank-ladder-row.is-ready {
    border-color: rgba(255, 212, 98, 0.3);
}

.rank-ladder-badge {
    display: inline-flex;
    color: #f5feff;
    font-weight: 800;
}

.rank-ladder-main p {
    margin: 5px 0 0;
    color: rgba(199, 235, 247, 0.7);
    font-size: 0.82rem;
}

.rank-ladder-meta {
    display: grid;
    gap: 3px;
    text-align: right;
    min-width: 112px;
}

.rank-ladder-meta strong {
    color: #f5feff;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
}

.rank-ladder-meta em {
    color: #48ffd1;
    font-style: normal;
}

.rank-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rank-status-row .is-active { border-color: rgba(103, 255, 231, 0.34); }
.rank-status-row .is-grace { border-color: rgba(255, 212, 98, 0.34); }
.rank-status-row .is-inactive { border-color: rgba(255, 122, 122, 0.3); }

.rank-person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.rank-person-card {
    --rank-line: rgba(131, 245, 255, 0.16);
    --rank-wash: rgba(52, 180, 206, 0.06);
    border-color: var(--rank-line);
    background:
        linear-gradient(180deg, rgba(9, 29, 42, 0.98), rgba(4, 19, 30, 0.95)),
        linear-gradient(135deg, var(--rank-wash), rgba(110, 255, 232, 0.03));
    padding: 12px;
    display: grid;
    gap: 10px;
}

.rank-person-card.rank-none { --rank-line: rgba(125, 153, 170, 0.2); --rank-wash: rgba(120, 144, 160, 0.06); }
.rank-person-card.rank-1 { --rank-line: rgba(92, 207, 255, 0.26); --rank-wash: rgba(92, 207, 255, 0.08); }
.rank-person-card.rank-2 { --rank-line: rgba(103, 255, 231, 0.26); --rank-wash: rgba(103, 255, 231, 0.08); }
.rank-person-card.rank-3 { --rank-line: rgba(255, 212, 98, 0.28); --rank-wash: rgba(255, 212, 98, 0.08); }
.rank-person-card.rank-4 { --rank-line: rgba(255, 163, 111, 0.28); --rank-wash: rgba(255, 163, 111, 0.08); }
.rank-person-card.rank-5 { --rank-line: rgba(255, 124, 173, 0.28); --rank-wash: rgba(255, 124, 173, 0.08); }
.rank-person-card.rank-6 { --rank-line: rgba(189, 148, 255, 0.3); --rank-wash: rgba(189, 148, 255, 0.08); }
.rank-person-card.rank-7 { --rank-line: rgba(255, 122, 122, 0.3); --rank-wash: rgba(255, 122, 122, 0.08); }

.rank-person-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.rank-person-head img {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(131, 245, 255, 0.2);
    object-fit: cover;
}

.rank-person-head div {
    min-width: 0;
}

.rank-person-head h3,
.rank-person-head p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-person-head p {
    margin: 3px 0 0;
    color: #dcf8ff;
    font-size: 0.76rem;
}

.rank-person-pills,
.rank-counts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rank-person-meta {
    display: grid;
    gap: 3px;
}

.rank-person-meta strong {
    color: #f5feff;
    font-size: 0.86rem;
}

.rank-counts-badge {
    border-color: rgba(103, 255, 231, 0.28);
    color: #48ffd1;
}

.rank-counts-badge.is-strong {
    border-color: rgba(255, 212, 98, 0.34);
    color: #ffe6a6;
}

.rank-counts-badge.is-muted {
    border-color: rgba(127, 156, 172, 0.25);
    color: #9ed2de;
}

.rank-person-link {
    display: inline-flex;
    justify-content: center;
    min-height: 32px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.18);
    background: rgba(5, 26, 37, 0.78);
    color: #ecfbff;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rank-person-link:hover {
    border-color: rgba(72, 255, 209, 0.42);
    background: rgba(29, 226, 238, 0.14);
}

.rank-empty-card {
    padding: 18px;
    text-align: center;
}

.rank-empty-card h3 {
    color: #f5feff;
    margin: 0 0 6px;
}

.rank-empty-card p {
    color: rgba(199, 235, 247, 0.72);
    margin: 0;
}

@media (max-width: 1080px) {
    .rank-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rank-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .rank-main {
        padding: 82px 10px 76px;
    }

    .rank-hero,
    .rank-panel {
        padding: 14px;
    }

    .rank-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .rank-current-card {
        width: 100%;
    }

    .rank-actions .matrix-action-btn {
        flex: 1 1 calc(50% - 8px);
    }

    .rank-ladder-row {
        grid-template-columns: 1fr;
    }

    .rank-ladder-meta {
        text-align: left;
        grid-template-columns: repeat(3, max-content);
        align-items: center;
    }
}

@media (max-width: 480px) {
    .rank-hero h1 {
        font-size: 2rem;
    }

    .rank-hero-stats {
        grid-template-columns: 1fr;
    }

    .rank-actions .matrix-action-btn {
        flex-basis: 100%;
    }
}

/* -------------------------------------------------------------- */
/* Income Center                                                   */
/* -------------------------------------------------------------- */
.income-current-card strong.is-positive {
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.income-current-card strong.is-negative {
    background: linear-gradient(135deg, #ff6b8a 0%, #ffaa6b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.income-current-card strong.is-zero {
    background: linear-gradient(135deg, #cdd9e1 0%, #8aa1b4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.income-status-note,
.income-disclaimer-card {
    padding: 11px 12px;
    border-radius: 13px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(2, 16, 25, 0.68);
    color: rgba(199, 235, 247, 0.76);
    line-height: 1.45;
}

.income-status-note.is-warning {
    border-color: rgba(255, 122, 122, 0.28);
    background: rgba(92, 18, 28, 0.22);
    color: #ffd6d6;
}

.income-metric-stack,
.income-metric-grid {
    display: grid;
    gap: 10px;
}

.income-layout {
    grid-template-columns: 1fr;
}

.income-metric-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.income-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.income-metric-stack article,
.income-metric-grid article {
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(2, 16, 25, 0.68);
    display: grid;
    gap: 6px;
}

.income-metric-stack span,
.income-metric-grid span,
.income-person-value span,
.income-cycle-row span {
    color: #8ecddb;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

.income-metric-stack strong,
.income-metric-grid strong,
.income-person-value strong {
    color: #f5feff;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    white-space: nowrap;
}

.income-disclaimer {
    margin: 0;
    color: rgba(199, 235, 247, 0.7);
    line-height: 1.45;
}

.income-level-breakdown {
    display: grid;
    gap: 10px;
}

.income-level-breakdown-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.income-level-breakdown-head span {
    color: rgba(199, 235, 247, 0.68);
    font-size: 0.78rem;
    line-height: 1.35;
}

.income-level-breakdown-head strong {
    color: #48ffd1;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.22rem);
    white-space: nowrap;
}

.income-level-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.income-level-card {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 13px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(2, 16, 25, 0.68);
    display: grid;
    gap: 6px;
}

.income-level-card.is-qualified {
    border-color: rgba(72, 255, 209, 0.28);
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.12), rgba(2, 16, 25, 0.72));
}

.income-level-card.is-locked {
    opacity: 0.52;
    border-color: rgba(127, 156, 172, 0.16);
    background: rgba(2, 16, 25, 0.46);
}

.income-level-card.has-foundation {
    opacity: 1;
    border-color: rgba(255, 212, 98, 0.34);
}

.income-level-line,
.income-level-subline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.income-level-line span,
.income-level-line em,
.income-level-subline span,
.income-level-foundation {
    color: #8ecddb;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-style: normal;
}

.income-level-line strong,
.income-level-line em {
    color: #f5feff;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.income-level-line em {
    color: #48ffd1;
    margin-left: auto;
    text-align: right;
}

.income-level-foundation {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 212, 98, 0.28);
    color: #ffe6a6;
    background: rgba(94, 67, 10, 0.2);
}

.income-person-value {
    display: grid;
    gap: 4px;
}

.income-cycle-list {
    display: grid;
    gap: 10px;
}

.income-cycle-row {
    display: grid;
    grid-template-columns: minmax(86px, 0.7fr) repeat(3, minmax(92px, 1fr)) minmax(132px, 1.15fr);
    align-items: center;
    gap: 9px;
    padding: 12px;
    border-radius: 15px;
    border: 1px solid rgba(130, 245, 255, 0.14);
    background: rgba(2, 16, 25, 0.68);
    overflow: hidden;
}

.income-cycle-row > strong {
    color: #f5feff;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
}

.income-cycle-row span {
    display: grid;
    gap: 3px;
}

.income-cycle-row b,
.income-cycle-row em {
    color: #f5feff;
    font-style: normal;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    overflow-wrap: anywhere;
}

.income-cycle-row em {
    color: #48ffd1;
    text-align: right;
    justify-self: end;
}

.income-disclaimer-card {
    font-size: 0.88rem;
}

@media (max-width: 1080px) {
    .income-cycle-row {
        grid-template-columns: 1fr 1fr;
    }

    .income-cycle-row em {
        text-align: left;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .income-metric-stack,
    .income-metric-grid {
        grid-template-columns: 1fr;
    }

    .income-level-grid {
        grid-template-columns: 1fr;
    }

    .income-cycle-row {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------- */
/* Commission Wallet (Phase 1 — read-only)                        */
/* -------------------------------------------------------------- */
.wallet-main { padding: 92px 24px 80px; max-width: 920px; margin: 0 auto; }

.wallet-hero {
    border-radius: 18px;
    padding: 28px 28px 24px;
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.08) 0%, rgba(72, 255, 209, 0.04) 60%, rgba(180, 144, 255, 0.05) 100%);
    border: 1px solid rgba(130, 245, 255, 0.18);
    box-shadow: 0 24px 60px -28px rgba(29, 226, 238, 0.32);
    text-align: left;
}
.wallet-hero-eyebrow {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(130, 245, 255, 0.78);
}
.wallet-hero-balance {
    margin: 0;
    font-family: 'Orbitron', 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wallet-hero-balance.is-negative {
    background: linear-gradient(135deg, #ff6b8a 0%, #ffaa6b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wallet-hero-balance.is-zero {
    background: linear-gradient(135deg, #cdd9e1 0%, #8aa1b4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wallet-hero-updated {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(199, 235, 247, 0.62);
}
.wallet-hero-held {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: rgba(255, 196, 92, 0.92);
    background: rgba(255, 196, 92, 0.08);
    border: 1px solid rgba(255, 196, 92, 0.28);
    padding: 5px 10px;
    border-radius: 8px;
    display: inline-block;
    width: fit-content;
    line-height: 1.4;
}
.wallet-hero-available {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: rgba(199, 235, 247, 0.72);
}
.wallet-hero-available strong {
    color: #f5feff;
}
.wallet-hero-meta {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.wallet-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(130, 245, 255, 0.25);
    background: rgba(2, 12, 20, 0.55);
    color: rgba(220, 240, 248, 0.86);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.wallet-refresh-btn:hover {
    border-color: rgba(29, 226, 238, 0.7);
    color: #eafaff;
    box-shadow: 0 0 14px rgba(29, 226, 238, 0.22);
}
.wallet-refresh-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}
.wallet-refresh-btn svg {
    transition: transform 0.6s ease;
}
.wallet-refresh-btn.is-spinning svg {
    animation: ofm-wallet-refresh-spin 0.8s linear infinite;
}
@keyframes ofm-wallet-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ----- Settings module ----- */
.settings-page .home-main { padding-top: 92px; }
.settings-main { padding-bottom: 64px; }
.settings-header { margin-bottom: 14px; }
.settings-eyebrow {
    margin: 0 0 4px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(130, 245, 255, 0.72);
}
.settings-title {
    margin: 0;
    font-size: 1.6rem;
    color: #eafaff;
}
.settings-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px;
    background: rgba(2, 18, 30, 0.55);
    border: 1px solid rgba(130, 245, 255, 0.14);
    border-radius: 14px;
    margin-bottom: 16px;
}
.settings-tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 9px 14px;
    border-radius: 10px;
    color: rgba(199, 235, 247, 0.7);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease;
}
.settings-tab:hover {
    background: rgba(29, 226, 238, 0.08);
    color: #eafaff;
}
.settings-tab.is-active {
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.22) 0%, rgba(72, 255, 209, 0.12) 100%);
    color: #eafaff;
    box-shadow: 0 0 14px rgba(29, 226, 238, 0.18);
}
.settings-tab.is-disabled {
    opacity: 0.55;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.settings-tab-soon {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(199, 235, 247, 0.10);
    border: 1px solid rgba(199, 235, 247, 0.22);
    padding: 2px 6px;
    border-radius: 999px;
    color: rgba(199, 235, 247, 0.72);
}
.settings-body {
    background: rgba(8, 16, 24, 0.55);
    border: 1px solid rgba(130, 245, 255, 0.14);
    border-radius: 16px;
    padding: 22px 22px 20px;
}
.settings-section-header { margin-bottom: 12px; }
.settings-section-title {
    margin: 0 0 6px;
    font-size: 1.2rem;
    color: #eafaff;
}
.settings-section-help {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(199, 235, 247, 0.72);
    line-height: 1.5;
}
.settings-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(72, 255, 209, 0.10);
    border: 1px solid rgba(72, 255, 209, 0.32);
    color: #48ffd1;
}
.settings-error {
    margin: 12px 0 8px;
    padding: 10px 12px;
    background: rgba(255, 100, 130, 0.10);
    border: 1px solid rgba(255, 100, 130, 0.4);
    color: #ffc8d2;
    border-radius: 8px;
    font-size: 0.92rem;
}
.settings-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.settings-field { display: flex; flex-direction: column; gap: 6px; }
.settings-field label,
.settings-field-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.7);
    font-weight: 600;
}
.settings-field input[type="text"],
.settings-field input[type="email"],
.settings-field input[type="number"],
.settings-field select {
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(2, 12, 20, 0.62);
    border-radius: 10px;
    padding: 11px 13px;
    color: #eafaff;
    font-size: 0.95rem;
    font-family: inherit;
    color-scheme: dark;
}
.settings-field select {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2382f5ff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
.settings-field input:focus,
.settings-field select:focus {
    outline: none;
    border-color: rgba(29, 226, 238, 0.7);
    box-shadow: 0 0 0 2px rgba(29, 226, 238, 0.18);
}
.settings-field-hint {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(199, 235, 247, 0.55);
}
.settings-section-block {
    border: 1px solid rgba(130, 245, 255, 0.16);
    background: rgba(2, 18, 30, 0.45);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-section-block[hidden] { display: none; }
.settings-section-block legend {
    padding: 0 8px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(130, 245, 255, 0.78);
}
.settings-radio-row { display: flex; gap: 14px; flex-wrap: wrap; }
.settings-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    border-radius: 10px;
    cursor: pointer;
    background: rgba(2, 12, 20, 0.5);
    color: #eafaff;
    font-size: 0.9rem;
}
.settings-radio input { accent-color: #1de2ee; }
.settings-radio:has(input:checked) {
    border-color: rgba(29, 226, 238, 0.85);
    box-shadow: 0 0 16px rgba(29, 226, 238, 0.22);
}
.settings-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    border-radius: 12px;
    background: rgba(2, 12, 20, 0.5);
    color: #eafaff;
    cursor: pointer;
}
.settings-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: #1de2ee;
    cursor: pointer;
    flex-shrink: 0;
}
.settings-toggle-row:has(input:checked) {
    border-color: rgba(29, 226, 238, 0.65);
    box-shadow: 0 0 16px rgba(29, 226, 238, 0.18);
}
.settings-toggle-text { display: flex; flex-direction: column; gap: 4px; }
.settings-toggle-text strong { font-size: 0.95rem; letter-spacing: 0.01em; }
.settings-toggle-text .settings-field-hint { margin: 0; }
.settings-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.settings-submit {
    flex: 1 1 auto;
    border: 1px solid rgba(29, 226, 238, 0.6);
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.32) 0%, rgba(72, 255, 209, 0.18) 100%);
    color: #eafaff;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.04em;
    font-size: 0.96rem;
}
.settings-submit:hover {
    border-color: rgba(29, 226, 238, 0.95);
    box-shadow: 0 0 24px rgba(29, 226, 238, 0.32);
}
.settings-cancel {
    color: rgba(199, 235, 247, 0.7);
    text-decoration: none;
    padding: 10px 8px;
    font-size: 0.9rem;
}
.settings-cancel:hover { color: #eafaff; }

/* ----- Wallet transfer (Phase 3a) ----- */
.wallet-transfer-page .wallet-main { padding-top: 92px; }
.wallet-transfer-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(199, 235, 247, 0.72);
    text-decoration: none;
    font-size: 0.86rem;
    margin-bottom: 14px;
}
.wallet-transfer-back:hover { color: #eafaff; }
.wallet-transfer-shell {
    background: rgba(8, 16, 24, 0.55);
    border: 1px solid rgba(130, 245, 255, 0.16);
    border-radius: 18px;
    padding: 24px 24px 22px;
    width: min(560px, 100%);
    margin: 0 auto;
}
.wallet-transfer-header { margin-bottom: 16px; }
.wallet-transfer-eyebrow {
    margin: 0 0 4px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(130, 245, 255, 0.72);
}
.wallet-transfer-title {
    margin: 0 0 4px;
    font-size: 1.5rem;
    color: #eafaff;
}
.wallet-transfer-spendable {
    margin: 6px 0 0;
    font-size: 0.92rem;
    color: rgba(220, 240, 248, 0.86);
}
.wallet-transfer-spendable strong { color: #48ffd1; }
.wallet-transfer-help {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: rgba(255, 196, 92, 0.85);
    background: rgba(255, 196, 92, 0.08);
    border: 1px solid rgba(255, 196, 92, 0.22);
    padding: 8px 10px;
    border-radius: 8px;
}
.wallet-transfer-error {
    margin: 12px 0 8px;
    padding: 10px 12px;
    background: rgba(255, 100, 130, 0.10);
    border: 1px solid rgba(255, 100, 130, 0.4);
    color: #ffc8d2;
    border-radius: 8px;
    font-size: 0.92rem;
}
.wallet-transfer-form { display: flex; flex-direction: column; gap: 14px; }
.wallet-transfer-field { display: flex; flex-direction: column; gap: 6px; }
.wallet-transfer-field-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.7);
}
.wallet-transfer-field input {
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(2, 12, 20, 0.62);
    border-radius: 10px;
    padding: 11px 13px;
    color: #eafaff;
    font-size: 0.95rem;
    font-family: inherit;
}
.wallet-transfer-field input:focus {
    outline: none;
    border-color: rgba(29, 226, 238, 0.7);
    box-shadow: 0 0 0 2px rgba(29, 226, 238, 0.18);
}
.wallet-transfer-field-hint {
    font-size: 0.78rem;
    color: rgba(199, 235, 247, 0.55);
}
.wallet-transfer-resend {
    color: #82f5ff;
    text-decoration: none;
    border-bottom: 1px dashed rgba(130, 245, 255, 0.45);
    margin-left: 4px;
}
.wallet-transfer-info {
    background: rgba(2, 18, 30, 0.55);
    border: 1px solid rgba(130, 245, 255, 0.14);
    border-radius: 10px;
    padding: 12px 14px;
    color: rgba(220, 240, 248, 0.78);
    font-size: 0.86rem;
    line-height: 1.5;
}
.wallet-transfer-info p { margin: 2px 0; }
.wallet-transfer-info strong { color: #eafaff; }
.wallet-transfer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.wallet-transfer-submit {
    flex: 1 1 auto;
    border: 1px solid rgba(29, 226, 238, 0.6);
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.32) 0%, rgba(72, 255, 209, 0.18) 100%);
    color: #eafaff;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.04em;
    font-size: 0.96rem;
}
.wallet-transfer-submit:hover {
    border-color: rgba(29, 226, 238, 0.95);
    box-shadow: 0 0 24px rgba(29, 226, 238, 0.32);
}
.wallet-transfer-submit:disabled,
.wallet-transfer-submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.wallet-transfer-field input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.wallet-transfer-cancel {
    color: rgba(199, 235, 247, 0.7);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 10px 8px;
    font-size: 0.9rem;
    font-family: inherit;
}
.wallet-transfer-cancel:hover { color: #ff8aa1; }
.wallet-transfer-abort-form { margin: 0; }

.wallet-transfer-recipient-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(2, 18, 30, 0.62);
    border: 1px solid rgba(130, 245, 255, 0.18);
    border-radius: 12px;
    margin: 12px 0 4px;
}
.wallet-transfer-recipient-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(130, 245, 255, 0.28);
    background: #061018;
}
.wallet-transfer-recipient-meta { display: flex; flex-direction: column; gap: 4px; }
.wallet-transfer-recipient-username {
    font-weight: 700;
    color: #eafaff;
    font-size: 1rem;
}
.wallet-transfer-recipient-status {
    display: inline-block;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    width: fit-content;
}
.wallet-transfer-recipient-status.is-active  { background: rgba(72, 255, 209, 0.16); color: #48ffd1; border: 1px solid rgba(72, 255, 209, 0.4); }
.wallet-transfer-recipient-status.is-grace   { background: rgba(255, 196, 92, 0.16); color: #ffd58a; border: 1px solid rgba(255, 196, 92, 0.4); }
.wallet-transfer-recipient-status.is-inactive{ background: rgba(255, 138, 161, 0.16); color: #ff8aa1; border: 1px solid rgba(255, 138, 161, 0.4); }
.wallet-transfer-recipient-status.is-member  { background: rgba(199, 235, 247, 0.10); color: rgba(220, 240, 248, 0.86); border: 1px solid rgba(199, 235, 247, 0.18); }

.wallet-transfer-confirm-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 14px;
}
.wallet-transfer-confirm-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(2, 18, 30, 0.45);
    border-radius: 8px;
}
.wallet-transfer-confirm-row span {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.62);
}
.wallet-transfer-confirm-row strong {
    color: #eafaff;
    font-size: 0.95rem;
    text-align: right;
}

/* Success page */
.wallet-transfer-success { text-align: center; }
.wallet-transfer-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(72, 255, 209, 0.22) 0%, rgba(29, 226, 238, 0.12) 100%);
    color: #48ffd1;
    border: 1px solid rgba(72, 255, 209, 0.45);
    margin-bottom: 18px;
}
.wallet-transfer-success-title {
    margin: 0 0 8px;
    font-size: 1.45rem;
    color: #eafaff;
}
.wallet-transfer-success-sub {
    margin: 0 0 6px;
    color: rgba(199, 235, 247, 0.7);
    font-size: 0.92rem;
}
.wallet-transfer-success-sub code {
    font-family: 'IBM Plex Mono', monospace;
    background: rgba(2, 18, 30, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    color: #82f5ff;
}
.wallet-transfer-success-hold {
    margin: 8px 0 18px;
    color: rgba(199, 235, 247, 0.7);
    font-size: 0.86rem;
}
.wallet-transfer-cancel-window {
    margin: 12px 0 18px;
    padding: 12px 14px;
    background: rgba(255, 196, 92, 0.08);
    border: 1px solid rgba(255, 196, 92, 0.32);
    border-radius: 10px;
}
.wallet-transfer-cancel-copy {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255, 222, 168, 0.92);
}
.wallet-transfer-cancel-btn {
    background: transparent;
    border: 0;
    color: #ffd58a;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0 2px;
}
.wallet-transfer-cancel-btn:hover { color: #ff8aa1; }
.wallet-transfer-success-back {
    display: inline-block;
    margin-top: 6px;
    padding: 10px 20px;
    border: 1px solid rgba(130, 245, 255, 0.32);
    border-radius: 10px;
    color: #eafaff;
    text-decoration: none;
    font-weight: 600;
}
.wallet-transfer-success-back:hover {
    border-color: rgba(29, 226, 238, 0.7);
    box-shadow: 0 0 16px rgba(29, 226, 238, 0.22);
}

/* ----- Admin withdrawal review (email-link landing) ----- */
.admin-review-page {
    margin: 0;
    padding: 0;
    background: #061018;
    color: #eafaff;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
}
.admin-review-shell {
    max-width: 580px;
    margin: 40px auto;
    padding: 24px 22px 22px;
    background: rgba(8, 16, 24, 0.7);
    border: 1px solid rgba(130, 245, 255, 0.16);
    border-radius: 16px;
}
.admin-review-header { margin-bottom: 14px; }
.admin-review-eyebrow {
    margin: 0 0 4px;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(130, 245, 255, 0.72);
}
.admin-review-title {
    margin: 0;
    font-size: 1.4rem;
}
.admin-review-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(2, 18, 30, 0.55);
    border: 1px solid rgba(130, 245, 255, 0.14);
    border-radius: 12px;
    padding: 14px;
    margin: 10px 0 16px;
}
.admin-review-summary div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.admin-review-summary span {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.6);
}
.admin-review-summary strong {
    text-align: right;
    font-size: 0.92rem;
}
.admin-review-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.admin-review-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-review-field span {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.62);
}
.admin-review-field input {
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(2, 12, 20, 0.62);
    border-radius: 10px;
    padding: 10px 12px;
    color: #eafaff;
    font-size: 0.92rem;
    font-family: inherit;
}
.admin-review-confirm {
    border: 0;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    color: #fff;
}
.admin-review-confirm.is-approve {
    background: linear-gradient(135deg, #1f8a6f 0%, #14b88f 100%);
}
.admin-review-confirm.is-reject {
    background: linear-gradient(135deg, #d6394a 0%, #ff6b8a 100%);
}
.admin-review-cancel {
    color: rgba(199, 235, 247, 0.7);
    text-decoration: none;
    font-size: 0.86rem;
    text-align: center;
    padding: 6px;
}
.admin-review-error {
    margin: 12px 0;
    padding: 12px 14px;
    background: rgba(255, 100, 130, 0.10);
    border: 1px solid rgba(255, 100, 130, 0.4);
    color: #ffc8d2;
    border-radius: 10px;
}
.admin-review-back {
    color: rgba(199, 235, 247, 0.65);
    font-size: 0.88rem;
    margin-top: 12px;
}
.admin-review-back a { color: #82f5ff; }

.wallet-actions {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
@media (max-width: 400px) {
    .wallet-actions {
        grid-template-columns: 1fr;
    }
}
.wallet-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(8, 16, 24, 0.55);
    color: rgba(220, 240, 248, 0.78);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
a.wallet-action-btn { text-decoration: none; color: rgba(220, 240, 248, 0.78); }
a.wallet-action-btn:hover { text-decoration: none; }
.wallet-action-btn:not(.is-disabled):hover {
    border-color: rgba(29, 226, 238, 0.6);
    background: rgba(29, 226, 238, 0.08);
}
.wallet-action-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.wallet-action-label { letter-spacing: 0.02em; }
.wallet-action-badge {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 196, 92, 0.18);
    color: #ffd58a;
    border: 1px solid rgba(255, 196, 92, 0.32);
}

.wallet-ledger {
    margin-top: 28px;
    border-radius: 18px;
    padding: 18px 20px 12px;
    background: rgba(8, 16, 24, 0.55);
    border: 1px solid rgba(130, 245, 255, 0.14);
}
.wallet-ledger-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}
.wallet-ledger-header h2 {
    margin: 0;
    font-size: 1.05rem;
    color: #eafaff;
    letter-spacing: 0.04em;
}
.wallet-ledger-count {
    font-size: 0.76rem;
    color: rgba(199, 235, 247, 0.55);
}
.wallet-ledger-empty {
    padding: 28px 14px;
    text-align: center;
    color: rgba(199, 235, 247, 0.6);
    font-size: 0.9rem;
}
.wallet-ledger-list {
    display: flex;
    flex-direction: column;
}
.wallet-ledger-row {
    display: grid;
    grid-template-columns: 78px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 6px;
    border-bottom: 1px solid rgba(130, 245, 255, 0.08);
}
.wallet-ledger-row:last-child { border-bottom: 0; }
.wallet-ledger-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wallet-ledger-date {
    font-size: 0.82rem;
    color: rgba(220, 240, 248, 0.86);
    font-weight: 500;
}
.wallet-ledger-time {
    font-size: 0.7rem;
    color: rgba(199, 235, 247, 0.5);
    font-family: 'IBM Plex Mono', monospace;
}
.wallet-ledger-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wallet-ledger-type {
    font-size: 0.92rem;
    color: #eafaff;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.wallet-ledger-source {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(130, 245, 255, 0.55);
}
.wallet-ledger-amount {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}
.wallet-ledger-row.is-credit .wallet-ledger-amount { color: #48ffd1; }
.wallet-ledger-row.is-debit  .wallet-ledger-amount { color: #ff8aa1; }

/* Wallet ledger filter (date range) */
.wallet-ledger-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(130, 245, 255, 0.08);
    margin-bottom: 4px;
}
.wallet-ledger-filter-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.wallet-ledger-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(199, 235, 247, 0.6);
}
.wallet-ledger-filter-field input {
    border: 1px solid rgba(130, 245, 255, 0.2);
    background: rgba(2, 12, 20, 0.6);
    border-radius: 8px;
    padding: 7px 9px;
    color: #eafaff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    color-scheme: dark;
}
.wallet-ledger-filter-field input:focus {
    outline: none;
    border-color: rgba(29, 226, 238, 0.6);
    box-shadow: 0 0 0 2px rgba(29, 226, 238, 0.15);
}
.wallet-ledger-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.wallet-ledger-filter-apply {
    border: 1px solid rgba(29, 226, 238, 0.5);
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.18) 0%, rgba(72, 255, 209, 0.08) 100%);
    color: #eafaff;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.04em;
}
.wallet-ledger-filter-apply:hover {
    border-color: rgba(29, 226, 238, 0.85);
    box-shadow: 0 0 16px rgba(29, 226, 238, 0.25);
}
.wallet-ledger-filter-clear {
    color: rgba(199, 235, 247, 0.7);
    text-decoration: none;
    font-size: 0.82rem;
    padding: 6px 4px;
    border-bottom: 1px dashed rgba(199, 235, 247, 0.35);
}
.wallet-ledger-filter-clear:hover {
    color: #eafaff;
}

/* Wallet ledger pagination */
.wallet-ledger-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 4px 6px;
    margin-top: 6px;
    border-top: 1px solid rgba(130, 245, 255, 0.08);
}
.wallet-ledger-pagination-summary {
    font-size: 0.78rem;
    color: rgba(199, 235, 247, 0.6);
    letter-spacing: 0.04em;
}
.wallet-ledger-pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wallet-ledger-page-btn {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: rgba(2, 12, 20, 0.55);
    color: #eafaff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wallet-ledger-page-btn:hover {
    border-color: rgba(29, 226, 238, 0.6);
    box-shadow: 0 0 14px rgba(29, 226, 238, 0.2);
}
.wallet-ledger-page-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.wallet-ledger-page-indicator {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: rgba(199, 235, 247, 0.7);
    min-width: 100px;
    text-align: center;
}

@media (max-width: 540px) {
    .wallet-ledger-row {
        grid-template-columns: 64px 1fr auto;
        gap: 10px;
    }
    .wallet-ledger-type { font-size: 0.86rem; }
    .wallet-hero { padding: 22px 20px 18px; }
}

/* Active wallet action (Phase 2 Top-up) gets a cyan accent so it stands out
   from the still-disabled Send / Withdraw buttons. */
.wallet-action-btn:not(.is-disabled) {
    border-color: rgba(29, 226, 238, 0.5);
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.18) 0%, rgba(72, 255, 209, 0.08) 100%);
    color: #eafaff;
    box-shadow: 0 0 18px rgba(29, 226, 238, 0.18);
    justify-content: center;
}
.wallet-action-btn:not(.is-disabled):hover {
    border-color: rgba(29, 226, 238, 0.85);
    box-shadow: 0 0 24px rgba(29, 226, 238, 0.32);
}

/* Wallet top-up modal — pattern mirrors .upgrade-modal */
.wallet-topup-modal {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 1100;
    padding: 20px;
}
.wallet-topup-modal[hidden] { display: none; }
.wallet-topup-backdrop {
    position: absolute; inset: 0;
    background: rgba(2, 12, 20, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wallet-topup-card {
    position: relative;
    width: min(440px, 100%);
    background: linear-gradient(135deg, rgba(8, 18, 28, 0.96) 0%, rgba(2, 18, 30, 0.98) 100%);
    border: 1px solid rgba(130, 245, 255, 0.28);
    border-radius: 18px;
    padding: 24px 24px 20px;
    box-shadow: 0 28px 80px -20px rgba(29, 226, 238, 0.4);
    color: #eafaff;
}
.wallet-topup-eyebrow {
    margin: 0 0 6px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(130, 245, 255, 0.7);
}
.wallet-topup-title {
    margin: 0 0 4px;
    font-size: 1.4rem;
    color: #eafaff;
}
.wallet-topup-sub {
    margin: 0 0 16px;
    font-size: 0.86rem;
    color: rgba(199, 235, 247, 0.7);
}
.wallet-topup-form {
    display: flex; flex-direction: column; gap: 12px;
}
.wallet-topup-presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}
.wallet-topup-preset {
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid rgba(130, 245, 255, 0.25);
    background: rgba(8, 16, 24, 0.55);
    color: rgba(220, 240, 248, 0.85);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.wallet-topup-preset:hover {
    border-color: rgba(29, 226, 238, 0.7);
    background: rgba(29, 226, 238, 0.1);
}
.wallet-topup-preset.is-selected {
    border-color: rgba(72, 255, 209, 0.8);
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.22) 0%, rgba(72, 255, 209, 0.12) 100%);
    color: #eafaff;
    box-shadow: 0 0 14px rgba(29, 226, 238, 0.3);
}
.wallet-topup-custom-label {
    margin-top: 4px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: rgba(199, 235, 247, 0.7);
}
.wallet-topup-custom-input {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(130, 245, 255, 0.26);
    background: rgba(2, 12, 18, 0.72);
    color: #eafaff;
    font: inherit;
    font-size: 0.95rem;
}
.wallet-topup-custom-input:focus {
    outline: none;
    border-color: rgba(29, 226, 238, 0.75);
}
.wallet-topup-summary {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: rgba(220, 240, 248, 0.78);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.wallet-topup-summary strong {
    font-family: 'IBM Plex Mono', monospace;
    color: #48ffd1;
    font-size: 1rem;
}
.wallet-topup-submit {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #1de2ee 0%, #48ffd1 100%);
    color: #052029;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(29, 226, 238, 0.32);
}
.wallet-topup-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.wallet-topup-cancel {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(130, 245, 255, 0.22);
    background: transparent;
    color: rgba(199, 235, 247, 0.78);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}
.wallet-topup-cancel:hover {
    color: #eafaff;
    border-color: rgba(29, 226, 238, 0.55);
}

/* ── Public business page: typography system (Plus Jakarta Sans) ──────── */

/* Scope the premium typeface to the profile page only — the dashboard
   keeps Space Grotesk which is already loaded globally. */
.profile-page {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* Bio — relaxed, editorial */
.profile-page .profile-bio {
    font-size: 0.93rem;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.01em;
}

/* Button labels — confident, slightly tracked */
.profile-page .profile-link-label {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.018em;
}

/* Header username (if ever rendered) */
.profile-page .profile-header h1 {
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Brand slug in the sticky header */
.profile-page .profile-brand-slug {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Footer tagline */
.profile-page .bp-footer-tagline {
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Footer CTA */
.profile-page .bp-footer-cta {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    letter-spacing: 0.02em;
}

/* ── Public business page: social bar ─────────────────────────────────── */
.bp-social-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.bp-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.12);
    border: 1.5px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.28);
    color: var(--profile-btn, #1DE2EE);
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    flex-shrink: 0;
}

.bp-social-btn:hover {
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.25);
    border-color: rgba(var(--profile-btn-rgb, 29,226,238), 0.6);
    transform: translateY(-2px);
}

.bp-social-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* ── Public business page: branded footer ─────────────────────────────── */
.bp-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 20px 36px;
    border-top: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.1);
    margin-top: 24px;
    text-align: center;
}

.bp-footer-brand {
    display: inline-block;
    opacity: 0.55;
    transition: opacity 0.18s;
}

.bp-footer-brand:hover {
    opacity: 0.85;
}

.bp-footer-logo {
    height: 22px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

.bp-footer-tagline {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(var(--profile-text-rgb, 215,247,255), 0.42);
    letter-spacing: 0.02em;
}

.bp-footer-cta {
    display: inline-block;
    margin-top: 6px;
    padding: 8px 22px;
    border-radius: 999px;
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.1);
    border: 1.5px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.28);
    color: var(--profile-btn, #1DE2EE);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background 0.18s, border-color 0.18s;
}

.bp-footer-cta:hover {
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.2);
    border-color: rgba(var(--profile-btn-rgb, 29,226,238), 0.55);
}

/* ── SHOP — seller dashboard ────────────────────────────────────────────
   Only genuinely new pieces live here. Surfaces, buttons, fields and the
   modal all reuse the existing agent-* / brand-guide-* classes so the shop
   inherits the site's look automatically. Everything below is built from
   the same custom properties as the rest of the theme.

   NOTE: do NOT set font-family here. --font-display is "Space Grotesk", which
   is linked on some pages but NOT on this one, so using it silently fell back
   to Segoe UI and made the shop look off next to the rest of the site. The
   existing headings (.brand-guide-header h1 etc.) set no font-family and
   inherit the page font - match that. */

.shop-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Stat strip */
.shop-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.shop-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
}
.shop-stat-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.shop-stat-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-main);
}

.shop-toolbar {
    align-items: center;
}

/* Product rows */
.shop-product-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
}
.shop-product-body {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.shop-product-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.shop-product-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-main);
}
.shop-product-summary {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-soft);
}
.shop-product-net {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}
.shop-product-net strong { color: var(--text-soft); }
/* Shown when a product is Active but has no vault file, so the public shop
   filters it out. Without this the seller sees "Active" and an empty shop. */
.shop-product-warn {
    margin: 6px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 176, 32, 0.35);
    border-radius: 8px;
    background: rgba(255, 176, 32, 0.08);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-soft);
}
.shop-product-flag {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #ffd79a;
}
.shop-product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.shop-inline-form { margin: 0; }

/* Price line */
.shop-price-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.shop-price-now {
    font-size: 19px;
    font-weight: 800;
    color: var(--primary);
}
.shop-price-was {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Status pills */
.shop-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.shop-pill--live {
    background: var(--info-bg);
    border-color: var(--info-line);
    color: var(--info-text);
}
.shop-pill--draft {
    background: rgba(158, 200, 212, 0.12);
    border-color: var(--line);
    color: var(--text-soft);
}
.shop-pill--delisted {
    background: var(--error-bg);
    border-color: var(--error-line);
    color: var(--error-text);
}
.shop-pill--special {
    background: rgba(255, 199, 92, 0.16);
    border-color: rgba(255, 199, 92, 0.5);
    color: #ffd79a;
}

/* Forms */
.shop-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.shop-section-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
}
.shop-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--input-bg);
    font-size: 14px;
    color: var(--text-soft);
    cursor: pointer;
}
.shop-toggle input { accent-color: var(--primary); }
.shop-help {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}
.shop-code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--primary);
    word-break: break-all;
}
.shop-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.shop-settings-card { gap: 12px; }
.shop-modal-card { width: min(720px, 100%); }

@media (max-width: 640px) {
    .shop-product-item { flex-direction: column; }
    .shop-product-actions { width: 100%; }
    .shop-modal-actions { justify-content: stretch; }
    .shop-modal-actions .brand-guide-nav-btn { flex: 1 1 auto; }
}

.shop-product-list { gap: 12px; }

/* Shop form density.
   .brand-guide-textarea carries min-height:110px because it is designed for
   textareas. Applied to the shop's <input> and <select> elements that made
   every field 110px tall. Scoped overrides only - the global rule is untouched
   so other pages keep their existing sizing. */
.shop-shell .brand-guide-textarea {
    padding: 9px 12px;
    font-size: .95rem;
    line-height: 1.45;
    border-radius: 10px;
}
.shop-shell input.brand-guide-textarea,
.shop-shell select.brand-guide-textarea {
    min-height: 0;
}
.shop-shell textarea.brand-guide-textarea {
    min-height: 92px;
}
.shop-shell .brand-guide-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.shop-shell .brand-guide-field-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text-soft);
}
.shop-shell form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shop-shell .shop-inline-form { display: inline-flex; }
.shop-settings-card,
.shop-modal-card {
    padding: 16px 18px;
    gap: 10px;
}
.shop-field-row { gap: 10px; }
.shop-toggle { padding: 8px 12px; }

/* Shop address block - read-only, derived from the username */
.shop-address {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--input-bg);
}
.shop-address .shop-help { margin: 0; }

/* Shop vault — file block on a product card */
.shop-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}
.shop-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.shop-file {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    font-size: 13px;
}
.shop-file-name { color: var(--text-soft); font-weight: 700; }
.shop-file-meta { color: var(--text-muted); font-size: 12px; }
.shop-file-link { color: var(--primary); text-decoration: none; font-weight: 700; }
.shop-file-link:hover { text-decoration: underline; }
.shop-file-remove {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--error-text);
    cursor: pointer;
    text-decoration: underline;
}
.shop-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.shop-upload-input {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 12px;
    color: var(--text-muted);
}
.shop-upload-input::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.shop-upload-btn { flex: 0 0 auto; }

/* ── SHOP — public storefront (buyers, logged out) ───────────────────── */
.shopfront-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--glow-a), transparent 60%),
        linear-gradient(180deg, var(--bg-mid), var(--bg-deep));
    color: var(--text-main);
    font-family: Manrope, "Segoe UI", Tahoma, sans-serif;
}
.shopfront-topbar { padding: 18px 22px; }
.shopfront-logo { display: block; width: 108px; height: auto; }
.shopfront-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 20px 60px;
}
.shopfront-header { margin-bottom: 22px; }
.shopfront-header h1 { margin: 0 0 6px; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15; }
/* THEME RULE: everything below takes its colour from the SELLER's Business Page
   palette (--profile-*), never the site palette (--primary/--text-soft/--line).
   The storefront is an extension of the member's page and must look like it.
   If you add a rule here and reach for --primary, you are about to break that. */
.shopfront-muted { color: var(--profile-text, #D7F7FF); opacity: 0.72; font-size: 14px; line-height: 1.55; margin: 0; }
.shopfront-muted a, .shopfront-seller a { color: var(--profile-btn, #1DE2EE); text-decoration: none; }
.shopfront-muted a:hover, .shopfront-seller a:hover { text-decoration: underline; }

.shopfront-grid {
    display: grid;
    /* auto-FIT, not auto-fill: auto-fill keeps the empty tracks it created, so a
       seller with one product had their card sitting in track 1 on the left with
       dead space beside it. auto-fit collapses the empty tracks.

       The max track is capped rather than 1fr so a single card stays a card
       instead of stretching the full 900px row, and justify-content centres
       whatever tracks survive - one, two or a part-filled final row. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    gap: 14px;
    justify-content: center;
}
.shopfront-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.30);
    /* The seller's own text-card colour at 0.5, so more of their page reads
       through. Was a hardcoded rgba(6,26,38,.5), which only looked right on a
       dark blue theme and was wrong for anyone else. */
    background: rgba(var(--profile-bg-rgb, 6,43,58), 0.5);
    text-decoration: none;
    color: var(--profile-text, #D7F7FF);
    transition: border-color var(--ease), transform var(--ease);
}
.shopfront-card:hover { border-color: var(--profile-btn, #1DE2EE); transform: translateY(-2px); }
.shopfront-card-title { margin: 0; font-size: 17px; font-weight: 800; }
.shopfront-card-summary { margin: 0; font-size: 14px; line-height: 1.5; color: var(--profile-text, #D7F7FF); opacity: 0.86; }
/* A real button in the SELLER's button colour. It was a plain text line under
   the price - the least prominent thing on a card whose whole job is to be
   clicked. Still a <span> inside the card's own <a>, so the entire card stays
   one link and nothing is nested. */
.shopfront-card-cta {
    display: block;
    margin-top: auto;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--profile-btn-rgb, 29, 226, 238), 0.55);
    background: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.16);
    color: var(--profile-btn, #1DE2EE);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    transition: background 180ms ease, border-color 180ms ease;
}

.shopfront-card:hover .shopfront-card-cta {
    background: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.28);
    border-color: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.8);
}

.shopfront-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shopfront-now { font-size: 19px; font-weight: 800; color: var(--profile-btn, #1DE2EE); }
.shopfront-was { font-size: 14px; color: var(--profile-text, #D7F7FF); opacity: 0.6; text-decoration: line-through; }
.shopfront-price--lg .shopfront-now { font-size: 27px; }

/* The back control is a real .profile-link-btn, so it keeps the member's button
   border and fill. Overrides here only shrink it to a right-aligned pill:
   .profile-link-btn is built full-width and 58px tall for the Business Page
   stack, which is far too heavy for a secondary "go back" action. */
.shopfront-crumb {
    margin-bottom: 14px;
    display: flex;
    justify-content: flex-end;
}
.shopfront-crumb .profile-link-btn {
    min-height: 0;
    width: auto;
    flex: 0 0 auto;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 0.875rem;
    /* Label follows the member's TEXT colour (black on this theme) rather than
       --profile-link, which is the pale label colour used inside full-size
       buttons and washed out at pill scale. */
    color: var(--profile-text, #000);
}
/* Collapse the 36px | 1fr | 36px grid the full-size button uses. */
.shopfront-crumb .profile-link-inner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    min-height: 0;
}
.shopfront-crumb .profile-link-icon {
    width: 15px;
    height: 15px;
    border-radius: 0;
}
.shopfront-crumb .profile-link-glyph { width: 15px; height: 15px; }
.shopfront-crumb .profile-link-glyph svg { width: 15px; height: 15px; }
.shopfront-crumb .profile-link-label { width: auto; text-align: left; }

.shopfront-detail {
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.30);
    background: rgba(var(--profile-bg-rgb, 6,43,58), 0.5); /* match .shopfront-card */
    color: var(--profile-text, #D7F7FF);
}
.shopfront-detail h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3.6vw, 2rem); line-height: 1.2; }
.shopfront-lede { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--profile-text, #D7F7FF); opacity: 0.86; }
.shopfront-description { margin: 16px 0; font-size: 15px; line-height: 1.65; color: var(--profile-text, #D7F7FF); }
.shopfront-buybox {
    margin: 20px 0 14px;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.24);
    background: rgba(var(--profile-bg-rgb, 6,43,58), 0.62);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
/* Post-purchase actions. Real .profile-link-btn children, so they inherit the
   seller's button colours; this only lays them out and stops a single button
   stretching the full width. */
.shopfront-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}
.shopfront-actions .profile-link-btn {
    flex: 1 1 220px;
    min-height: 50px;
    justify-content: center;
}
.shopfront-actions .profile-link-inner { justify-content: center; }

/* Order / resend / not-found content. Deliberately NO panel: a coloured block
   floating on the gradient looked heavy-handed. Everything here instead takes
   the member's TEXT colour, which is the one colour guaranteed to read against
   their own page - --profile-link and --profile-btn are pale or pure white on
   many themes and measured 1.06:1 against the near-white top of the gradient. */
.shopfront-empty { text-align: left; }
.shopfront-empty h1,
.shopfront-empty p { color: var(--profile-text, #EAF6FA); }
.shopfront-empty a:not(.profile-link-btn) {
    color: var(--profile-text, #EAF6FA);
    text-decoration: underline;
}
/* Buttons follow the same rule. Border and label both come from the text
   colour, so a button never becomes an invisible outline - which is what a
   white border on a near-white background was. */
.shopfront-empty .profile-link-btn {
    color: var(--profile-text, #EAF6FA);
    border-color: rgba(var(--profile-text-rgb, 234,246,250), 0.55);
    background: transparent;
}
.shopfront-empty .profile-link-btn:hover {
    border-color: var(--profile-text, #EAF6FA);
    background: rgba(var(--profile-text-rgb, 234,246,250), 0.07);
}
/* The download is the primary action, so it carries a light fill of the same
   colour rather than a different hue. */
.shopfront-empty .shopfront-download {
    background: rgba(var(--profile-text-rgb, 234,246,250), 0.10);
    border-color: var(--profile-text, #EAF6FA);
}

/* Test-mode banner. Deliberately amber and NOT theme-coloured - it must stand
   out against whatever palette the seller chose, not blend into it. */
.shopfront-sandbox {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 176, 32, 0.55);
    border-radius: 10px;
    background: rgba(255, 176, 32, 0.12);
    color: #ffd489;
    font-size: 13px;
    line-height: 1.5;
}

/* Guest-checkout fields. Theme-driven like everything else on the storefront. */
.shopfront-field { display: grid; gap: 5px; width: 100%; }
.shopfront-field > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--profile-text, #D7F7FF);
    opacity: 0.82;
}
.shopfront-field > span em { font-style: normal; opacity: 0.7; font-weight: 500; }
.shopfront-field input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.35);
    background: rgba(var(--profile-bg-rgb, 6,43,58), 0.55);
    color: var(--profile-text, #D7F7FF);
    font: inherit;
}
.shopfront-field input:focus-visible {
    outline: 2px solid var(--profile-btn, #1DE2EE);
    outline-offset: 1px;
}
.shopfront-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--profile-text, #D7F7FF);
    opacity: 0.85;
}
.shopfront-consent input { margin-top: 2px; flex: 0 0 auto; }

/* Same paint as a Business Page button, but pill-shaped as the primary action. */
.shopfront-buy {
    padding: 12px 22px;
    border-radius: 999px;
    border: 2px solid var(--profile-btn, #1DE2EE);
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.22);
    color: var(--profile-link, #D7F7FF);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease, background 180ms ease;
}
.shopfront-buy:not(:disabled):hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.32);
}
.shopfront-buy:disabled { opacity: .45; cursor: not-allowed; }
.shopfront-seller { margin: 0; font-size: 13px; color: var(--profile-text, #D7F7FF); opacity: 0.72; }
.shopfront-empty { padding: 40px 0; }
.shopfront-empty h1 { margin: 0 0 10px; }
.shopfront-footer {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--profile-text, #D7F7FF);
    opacity: 0.7;
    border-top: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.20);
}

/* ── SHOP — product media (images + vaulted file) ─────────────────────────
   FIX: `.shop-shell form` sets flex-direction:column and beats `.shop-upload`
   on specificity, so the old upload row stacked - and `flex:1 1 200px` was then
   read as a 200px HEIGHT, leaving a large gap above the button. These rules are
   scoped under .shop-shell so they win, and the basis is auto. */
.shop-media {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}
.shop-media-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.shop-media-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.shop-media-hint { margin: 0; font-size: 12px; color: var(--text-muted); }

.shop-shell .shop-uploader {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}
.shop-uploader-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
    color: var(--text-muted);
}
.shop-uploader-input::file-selector-button {
    margin-right: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-soft);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.shop-uploader-btn { flex: 0 0 auto; }

/* Image strip */
.shop-image-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.shop-image-item {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--input-bg);
}
.shop-image-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-image-cover {
    position: absolute;
    left: 0; bottom: 0; right: 0;
    padding: 2px 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    background: rgba(4, 35, 45, .82);
    color: var(--primary);
}
.shop-image-remove {
    position: absolute;
    top: 3px; right: 3px;
    width: 20px; height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

/* Card thumbnail */
.shop-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--input-bg);
}
.shop-thumb--empty { background: var(--input-bg); }

/* Storefront imagery */
/* Cover art: CONTAIN the product, fill the gap with a blurred copy of itself.
   Sellers upload portrait book covers and 2:1 banners alike. `cover` cropped a
   portrait book to a slice of an inside page; `contain` alone left large dead
   bands on anything that did not match the box. The blurred fill keeps the whole
   product visible AND keeps the card looking full, in the product's own colours.

   Not to be confused with the treatment removed from the Business Page header
   on 2026-09-16: that blurred the member's photo FOUR times behind an avatar at
   18px. This is one soft fill behind a small product image. */
.shopfront-card-media {
    position: relative;
    margin: -18px -18px 4px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.06);
}

.shopfront-card-fill {
    position: absolute;
    /* Inset negatively and scaled so the blur has pixels to sample past every
       edge; without it the blur feathers into transparency at the border. */
    inset: -12%;
    background-size: cover;
    background-position: center;
    filter: blur(16px) saturate(1.15);
    transform: scale(1.08);
}

/* Keeps the foreground legible when the fill is bright, and stops a busy image
   from competing with the title underneath. */
.shopfront-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 22, 30, 0.26);
}

.shopfront-card-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Placeholder. Without it a product with no cover collapses to a title and a
   price and sits noticeably shorter than its neighbours in the grid. */
.shopfront-card-media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.10);
    color: var(--profile-btn, #1DE2EE);
    opacity: 0.55;
}

.shopfront-card-media--empty svg { width: 34px; height: 34px; }
.shopfront-card-media--empty::after { content: none; }
.shopfront-hero-image { margin: 0 0 16px; border-radius: var(--radius-md); overflow: hidden; }
.shopfront-hero-image img { width: 100%; height: auto; display: block; }
/* Only when a thumbnail strip follows: pin the hero to a fixed box so clicking
   between differently-shaped images does not jump the page. contain, not cover,
   because cropping a product image to fit would hide part of what is for sale. */
.shopfront-hero-image:has(+ .shopfront-gallery) img {
    aspect-ratio: 16 / 10;
    height: 100%;
    object-fit: contain;
}
/* Fixed-width tiles, NOT a 1fr grid. With auto-fill/minmax the tiles divide the
   available width, so two images on a phone became half the screen each - nearly
   as large as the hero. A thumbnail should read as a thumbnail at every width. */
.shopfront-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
/* Thumbnails are <button> so they are keyboard-reachable; strip the native
   chrome and let the image be the whole control. */
.shopfront-thumb {
    flex: 0 0 auto;
    width: clamp(56px, 16vw, 92px);
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    transition: border-color var(--ease), opacity var(--ease);
    opacity: 0.7;
}
.shopfront-thumb img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}
.shopfront-thumb:hover { opacity: 1; }
.shopfront-thumb:focus-visible { outline: 2px solid var(--profile-btn, #1DE2EE); outline-offset: 2px; }
.shopfront-thumb.is-active { border-color: var(--profile-btn, #1DE2EE); opacity: 1; }
/* Do NOT override .profile-shell's padding here. Its 56px top clearance is what
   keeps content out from under the fixed header - removing it was what made the
   shop title overlap the header. Widen only. */
.shopfront-shell { width: min(100%, 900px); padding-bottom: 40px; }
/* No hero on the shop, so the avatar is visible from the start rather than
   fading in once you scroll past one. */
.shopfront-shell ~ .profile-fixed-header .profile-fixed-avatar,
.profile-page .profile-fixed-avatar.scrolled { opacity: 1; transform: scale(1); }
.shopfront-header { padding-top: 6px; }
/* Page-switch FAB -> the seller's Business Page. Mirrors .ai-page-fab (46px
   circle, blur, same grid icon) but takes its colours from the seller's theme
   vars instead of hardcoded cyan, so it matches whatever palette they chose.
   Sits at bottom 24px: the AI page uses 106px to clear its bottom controls,
   which the shop does not have. */
.shopfront-fab {
    position: fixed;
    right: 18px;
    bottom: 24px;
    z-index: 50;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: rgba(var(--profile-text-card-rgb, 7,48,66), 0.82);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.25);
    color: rgba(var(--profile-btn-rgb, 29,226,238), 0.72);
    box-shadow: 0 6px 20px rgba(var(--profile-btn-rgb, 29,226,238), 0.10);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.shopfront-fab:hover {
    background: rgba(var(--profile-btn-rgb, 29,226,238), 0.11);
    border-color: rgba(var(--profile-btn-rgb, 29,226,238), 0.45);
    color: var(--profile-btn, #1DE2EE);
    transform: translateY(-2px);
}
.shopfront-fab:focus-visible { outline: 2px solid var(--profile-btn, #1DE2EE); outline-offset: 3px; }
@media (max-width: 560px) { .shopfront-fab { right: 14px; bottom: 18px; } }

/* Refund confirmation table. Plain rows on the member's text colour, matching
   the rest of the order/refund surfaces which carry no panel. */
.shopfront-refund-table {
    width: 100%;
    max-width: 460px;
    margin: 16px 0;
    border-collapse: collapse;
    color: var(--profile-text, #EAF6FA);
    font-size: 14px;
}
.shopfront-refund-table td { padding: 7px 0; }
.shopfront-refund-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.shopfront-refund-total td {
    border-top: 1px solid rgba(var(--profile-text-rgb, 234,246,250), 0.35);
    font-weight: 800;
    padding-top: 10px;
}

/* ── My Shop tabs (plan 8A) ───────────────────────────────────────── */
.shop-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    border-bottom: 1px solid rgba(130, 245, 255, 0.18);
}
.shop-tab {
    padding: 10px 18px;
    border-radius: 12px 12px 0 0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--links-soft);
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
}
.shop-tab:hover { color: var(--text); }
.shop-tab.is-active {
    color: var(--text);
    background: rgba(4, 16, 26, 0.6);
    border-color: rgba(130, 245, 255, 0.22);
}

/* Sales table. Scrolls inside its own container so a narrow screen never
   forces the whole page sideways. */
.shop-sales-wrap { overflow-x: auto; }
.shop-sales-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 13.5px;
}
.shop-sales-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--links-soft);
    border-bottom: 1px solid rgba(130, 245, 255, 0.18);
    white-space: nowrap;
}
.shop-sales-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(130, 245, 255, 0.08);
    vertical-align: middle;
}
.shop-sales-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-sales-table .is-negative { color: #ff9d9d; }
.shop-sales-table tr.is-refunded td { opacity: 0.72; }
.shop-sales-buyer { word-break: break-all; }
.shop-sales-muted { color: var(--links-soft); }
.shop-sales-note {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--links-soft);
}
.shop-stat-hint { display: block; font-size: 11.5px; color: var(--links-soft); margin-top: 2px; }

/* =============================================================================
   BUSINESS PAGE / INFORMATION PAGE HEADER  (2026-09-16)
   -----------------------------------------------------------------------------
   Replaces .profile-hero / .profile-hero-bg / .profile-hero-overlay, which
   painted the member's own profile picture four times behind the avatar and
   blurred the stack. Those rules are kept above ONLY for the classic renderer.

   Four styles, one image, never a smeared copy:
     hdr-clean   avatar on the member's brand colour, one soft shadow
     hdr-ring    as clean, plus a hairline ring offset from the edge
     hdr-panel   flat opaque panel, image fitted whole by default (logos)
     hdr-banner  full-bleed band, opaque, no card, whole image

   Plan: systems-doc/BUSINESS_PAGE_HEADER_PLAN.md
   ========================================================================== */

.profile-header-media {
    --hdr-dim: 132px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 0;
}

.profile-header-media.hdr-size-small  { --hdr-dim: 104px; }
.profile-header-media.hdr-size-medium { --hdr-dim: 132px; }
.profile-header-media.hdr-size-large  { --hdr-dim: 168px; }

.profile-header-img {
    display: block;
    width: var(--hdr-dim);
    height: var(--hdr-dim);
    object-fit: cover;
}

/* Fit = show the whole image. Needs a surface behind it, or a transparent PNG
   and any letterboxing sit on the raw page colour. */
.profile-header-media.hdr-fit-fit .profile-header-img {
    object-fit: contain;
    background: #fff;
}

/* ---- shapes ---- */
.profile-header-media.hdr-shape-circle  .profile-header-img { border-radius: 999px; }
.profile-header-media.hdr-shape-rounded .profile-header-img { border-radius: 22px; }
.profile-header-media.hdr-shape-square  .profile-header-img { border-radius: 6px; }

/* ---- clean ---- */
.profile-header-media.hdr-clean .profile-header-img {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

/* ---- ring ---- */
.profile-header-media.hdr-ring .profile-header-img {
    outline: 1px solid rgba(var(--profile-text-rgb, 215, 247, 255), 0.42);
    outline-offset: 6px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

/* ---- panel ---- */
.profile-header-media.hdr-panel {
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* The panel already supplies the white surface, so the image must not paint a
   second one behind a transparent PNG. */
.profile-header-media.hdr-panel.hdr-fit-fit .profile-header-img {
    background: none;
}

/* ---- banner ----
   Full-bleed: cancels .profile-shell's 16px side padding so the band reaches
   the viewport edges, which is what "no header card" means. Height follows the
   image rather than forcing a 900x900 square into a wide box. */
.profile-header-media.hdr-banner {
    margin: 0 -16px;
    padding: 18px 16px;
    background: #fff;
    border-radius: 0;
}

.profile-header-media.hdr-banner .profile-header-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(var(--hdr-dim) * 1.6);
    object-fit: contain;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 480px) {
    .profile-header-media.hdr-size-large  { --hdr-dim: 140px; }
    .profile-header-media.hdr-panel { padding: 16px; }
}

/* Builder preview — mirrors the new header styles (2026-09-16).
   Keyed on data-header-style because the shape control no longer carries
   'banner'; data-avatar-shape keeps handling geometry only. */
.links-preview-shell[data-header-style="ring"] .links-preview-avatar {
    outline: 1px solid rgba(255, 255, 255, 0.42);
    outline-offset: 4px;
}

.links-preview-shell[data-header-style="panel"] .links-preview-avatar {
    background: #fff;
    padding: 8px;
    border-radius: 14px;
}

.links-preview-shell[data-header-style="banner"] .links-preview-avatar {
    width: 100%;
    height: auto;
    max-height: 96px;
    object-fit: contain;
    background: #fff;
    border-radius: 0;
    padding: 8px 0;
}

.links-preview-shell[data-header-fit="fit"] .links-preview-avatar {
    object-fit: contain;
}

.links-preview-shell[data-header-size="small"] .links-preview-avatar  { width: 54px; height: 54px; }
.links-preview-shell[data-header-size="large"] .links-preview-avatar  { width: 86px; height: 86px; }
.links-preview-shell[data-header-style="banner"][data-header-size="small"] .links-preview-avatar,
.links-preview-shell[data-header-style="banner"][data-header-size="large"] .links-preview-avatar {
    width: 100%;
    height: auto;
}

/* Hint text under a builder control. */
.links-control-hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Template picker (2026-09-16).
   A searchable <select> rather than a card grid: the list is 13 today and will
   keep growing, and cards stop being scannable long before it gets large. */
.links-template-picker .input-field { width: 100%; }
.links-template-picker select.input-field { appearance: auto; }

/* ---------------------------------------------------------------------------
   Native <select> dropdowns in the dark app.

   A browser draws the OPEN option list as native OS UI. It inherits the page's
   light text colour but NOT the page background, so on this theme the open list
   renders as pale text on the browser's default white popup - effectively
   unreadable, with only the highlighted row legible.

   Two fixes, deliberately both:
     - `color-scheme: dark` asks the browser to draw its own native UI dark,
       which is the modern fix and handles the popup chrome as well.
     - Explicit option/optgroup colours cover browsers that ignore color-scheme
       for popups.

   Applied to every select on the authenticated and auth surfaces rather than to
   one component, because this is not specific to the template picker - any
   select added later would inherit the same defect. Deliberately NOT applied to
   public profile pages, which render in the member's own chosen colours.
   Mirrors the existing .select-field / .settings-field treatment.
--------------------------------------------------------------------------- */
.app-page select,
.auth-page select {
    color-scheme: dark;
}

.app-page select option,
.app-page select optgroup,
.auth-page select option,
.auth-page select optgroup {
    background-color: #061a26;
    color: #ecfbff;
}

.app-page select optgroup,
.auth-page select optgroup {
    font-weight: 600;
}

.links-copy-flag-inline {
    display: block;
    margin: 4px 0 10px;
    color: var(--primary-2);
}

}

/* Referral URL form on the templates screen. */
.links-referral-form { margin-top: 16px; }
.links-referral-form .input-field { width: 100%; }

/* Share button on a product page. Sits in the seller's palette like everything
   else on the storefront, but stays secondary to the buy action - it is an
   outline, not a filled button. */
.shopfront-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 2px 0 4px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(var(--profile-btn-rgb, 29, 226, 238), 0.5);
    background: transparent;
    color: var(--profile-btn, #1DE2EE);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

.shopfront-share:hover {
    background: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.14);
    border-color: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.8);
}

.shopfront-share svg { width: 15px; height: 15px; }

/* Confirmation after a copy, for the desktop path with no OS share sheet. */
.shopfront-share.is-done {
    border-color: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.9);
    background: rgba(var(--profile-btn-rgb, 29, 226, 238), 0.2);
}


/* =============================================================================
   Install nudge (PWA)
   -----------------------------------------------------------------------------
   A bottom sheet rather than a centred modal on purpose: this appears on phones,
   unasked, while the member is doing something else. Sliding up from the thumb
   end reads as an offer. A card dropped over the middle of the screen reads as
   an interruption, and gets dismissed on reflex.
   Follows the .upgrade-modal palette so it does not look bolted on.
========================================================================== */

.ofm-install-sheet {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ofm-install-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 12, 18, 0.72);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 200ms ease;
}

.ofm-install-sheet.is-open .ofm-install-backdrop { opacity: 1; }

.ofm-install-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    padding: 26px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    border: 1px solid rgba(137, 236, 248, 0.42);
    border-bottom: 0;
    background: linear-gradient(160deg, rgba(10, 34, 48, 0.99), rgba(4, 18, 29, 0.99));
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5);
    text-align: center;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.ofm-install-sheet.is-open .ofm-install-panel { transform: translateY(0); }

/* Wider screens: the sheet is reachable from anywhere, so centre it. */
@media (min-width: 720px) {
    .ofm-install-sheet { align-items: center; padding: 20px; }
    .ofm-install-panel { border-radius: 22px; border-bottom: 1px solid rgba(137, 236, 248, 0.42); }
}

/* No slide for anyone who has asked the OS for less motion. */
@media (prefers-reduced-motion: reduce) {
    .ofm-install-panel { transition: none; transform: none; }
    .ofm-install-backdrop { transition: none; }
}

.ofm-install-x {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9bc8d4;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.ofm-install-x:hover { color: #ecfbff; background: rgba(137, 236, 248, 0.12); }

.ofm-install-icon {
    width: 62px;
    height: 62px;
    border-radius: 15px;
    margin: 0 auto 14px;
    display: block;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42);
}

.ofm-install-title {
    margin: 0 0 10px;
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ecfbff;
}

.ofm-install-body p {
    margin: 0;
    color: #9ec8d4;
    font-size: 0.93rem;
    line-height: 1.6;
}

.ofm-install-body strong { color: #d8f4fb; font-weight: 600; }

.ofm-install-steps {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
    text-align: left;
}

.ofm-install-steps li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 13px;
    border: 1px solid rgba(137, 236, 248, 0.2);
    background: rgba(137, 236, 248, 0.06);
    color: #c8e6ee;
    font-size: 0.88rem;
    line-height: 1.45;
}

.ofm-install-step-n {
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(29, 226, 238, 0.18);
    color: #7ff1fb;
    font-size: 0.72rem;
    font-weight: 700;
}

.ofm-install-step-t { flex: 1 1 auto; }

.ofm-install-step-i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.ofm-install-step-i svg {
    width: 21px;
    height: 21px;
    fill: #7ff1fb;
}

.ofm-install-actions {
    margin-top: 20px;
    display: grid;
    gap: 9px;
}

.ofm-install-primary {
    font: inherit;
    font-weight: 600;
    font-size: 0.97rem;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid rgba(130, 254, 245, 0.64);
    background: linear-gradient(130deg, #1de2ee, #53ffe8 48%, #1bcdf7);
    color: #04232d;
    cursor: pointer;
}

.ofm-install-secondary {
    font: inherit;
    font-size: 0.9rem;
    padding: 11px 24px;
    border-radius: 999px;
    border: 1px solid rgba(137, 236, 248, 0.24);
    background: transparent;
    color: #9ec8d4;
    cursor: pointer;
}

.ofm-install-primary:active,
.ofm-install-secondary:active { transform: translateY(1px); }

body.ofm-install-open { overflow: hidden; }


/* =============================================================================
   PWA install report (/admin/pwa)
========================================================================== */

.pwa-section { margin-bottom: 14px; }

.pwa-lede {
    margin: 0 0 14px;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.pwa-stats {
    display: grid;
    /* auto-fit, not auto-fill: four stats should fill the row rather than
       leaving phantom empty columns on a wide screen. */
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 10px;
    margin: 4px 0 0;
}

.pwa-stat {
    display: grid;
    gap: 3px;
    padding: 13px 14px;
    border-radius: 13px;
    border: 1px solid rgba(137, 236, 248, 0.2);
    background: rgba(137, 236, 248, 0.06);
}

.pwa-stat-value {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: #7ff1fb;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.pwa-stat-label {
    color: #ecfbff;
    font-size: 0.86rem;
    font-weight: 600;
}

.pwa-stat-note {
    color: var(--text-soft);
    font-size: 0.76rem;
    line-height: 1.4;
}

/* The denominator warning. Deliberately loud: every number above it is a
   sample, not a census, and reading them as a census invents problems. */
.pwa-caveat {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 209, 128, 0.32);
    background: rgba(255, 190, 92, 0.08);
    color: #ffe2b0;
    font-size: 0.84rem;
    line-height: 1.6;
}

.pwa-caveat strong { color: #fff3dc; }

/* A notification we cannot confirm reached the phone. Muted rather than red:
   unconfirmed is not the same as failed - the report is not sure, and the
   colour should not claim more certainty than the data has. */
.pwa-pending { color: var(--text-soft); opacity: 0.72; font-style: italic; }

/* Information Page editor: when the page inherits the Business Page style the
   Style Studio controls are disabled. Make that visible (owner, 2026-10-01:
   "None of the buttons ... are pushable?"), and give the unlock note room. */
.links-style-panel.is-inherited #linksStyleForm { opacity: .45; filter: saturate(.4); }
.links-style-panel.is-inherited #linksStyleForm * { cursor: not-allowed !important; }
.links-style-locked-note { display: grid; gap: 10px; margin: 12px 0 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 210, 120, .45); background: rgba(255, 196, 87, .12); color: #ffeac6; }
.links-style-locked-note p { margin: 0; }
.links-style-locked-note form { margin: 0; }

/* Editors: the Dark/Light switch only matters for the high-tech backgrounds. */
.links-control.is-muted { opacity: .5; }

/* Diginu Claim Coach dashboard card (2026-10-06). Shown only to members with
   Diginu as their company; see lib/claim_coach.php ofm_cc_dashboard_card_html. */
.home-cc-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid transparent;
    background:
        linear-gradient(165deg, rgba(22, 74, 98, 0.7), rgba(7, 22, 32, 0.88)) padding-box,
        linear-gradient(135deg, #ffc36b 0%, #1de2ee 60%, #48ffd1 100%) border-box;
    color: #eafaff;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 0 22px rgba(29, 226, 238, 0.12);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.home-cc-card::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 195, 107, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.home-cc-card:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(29, 226, 238, 0.24); }
.home-cc-card:focus-visible { outline: 2px solid #48ffd1; outline-offset: 3px; }
.home-cc-head { display: flex; align-items: center; gap: 12px; position: relative; }
.home-cc-ico {
    flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(29, 226, 238, 0.14); color: #48ffd1;
}
.home-cc-ico svg { width: 22px; height: 22px; }
.home-cc-label { margin: 0; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em; }
.home-cc-sub { margin: 2px 0 0; font-size: 0.86rem; color: rgba(234, 250, 255, 0.72); }
.home-cc-cta { margin-left: auto; font-size: 0.86rem; font-weight: 600; color: #48ffd1; white-space: nowrap; }
.home-cc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; position: relative; }
.home-cc-stat { background: rgba(1, 7, 13, 0.35); border-radius: 12px; padding: 8px 10px; display: grid; }
.home-cc-stat strong { font-size: 1.2rem; font-weight: 700; color: #f5feff; font-variant-numeric: tabular-nums; }
.home-cc-stat span { font-size: 0.78rem; color: rgba(234, 250, 255, 0.7); }
.home-cc-stat.is-alert strong { color: #ffc36b; }

/* Settings > My Companies (2026-10-06) */
.settings-company-list { display: grid; gap: 8px; margin-top: 12px; }
.settings-company-row { display: grid; gap: 6px; }
.settings-company-link { display: none; gap: 6px; padding: 0 4px 10px 40px; }
.settings-company-row.is-on .settings-company-link { display: grid; }
.settings-company-row[hidden] { display: none !important; }
.home-cc-card.is-locked { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.home-cc-pro { margin-left: auto; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; background: rgba(255, 195, 107, 0.16); color: #ffc36b; }

/* Public AI button as the member's own orb + "Ask {name}" (owner, 2026-10-06).
   The orb is drawn by assets/ai-orb.js (same engine as the AI page). */
.ofm-agent-bubble.ofm-agent-bubble--orb {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}
.ofm-agent-bubble--orb:hover { background: none; }
.ofm-agent-orb-wrap {
    position: relative;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    overflow: hidden;
    background: #04070e;
    border: 1.5px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.55);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(var(--profile-btn-rgb, 29,226,238), 0.35);
}
.ofm-agent-orb { display: block; width: 100%; height: 100%; }
.ofm-agent-orb-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #d7f7ff; }
.ofm-agent-orb[data-ofm-orb-mounted] + .ofm-agent-orb-fallback { display: none; }
.ofm-agent-bubble-label {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #ffffff;
    background: rgba(4, 7, 14, 0.78);
    border: 1px solid rgba(var(--profile-btn-rgb, 29,226,238), 0.45);
    padding: 4px 10px;
    border-radius: 999px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
@media (max-width: 480px) {
    .ofm-agent-bubble.ofm-agent-bubble--orb { width: auto; height: auto; }
    .ofm-agent-orb-wrap { width: 58px; height: 58px; }
}

/* ======================================================================== */
/* App look refresh v4 (2026-10-06)                                          */
/* Plan: systems-doc/APP_LOOK_REFRESH_PLAN_V1_2026-10-06.md                 */
/* Opt-in per page: <body class="... ui-v4">. Theme on <html data-theme>,    */
/* set before paint by ofm_ui_theme_boot_html(). Pages without ui-v4 keep    */
/* the dark look until their phase lands.                                    */
/* ======================================================================== */

body.ui-v4 {
    --app-bg: #072334;
    --app-bg-2: #01070d;
    --app-glow-1: rgba(29, 226, 238, 0.16);
    --app-glow-2: rgba(126, 107, 255, 0.14);
    --app-glow-3: rgba(72, 255, 209, 0.10);
    --app-glow-4: rgba(29, 226, 238, 0.08);
    --app-grid: rgba(126, 232, 246, 0.07);
    --ink: #eafaff;
    --ink-head: #f5feff;
    --ink-muted: #9db7bf;
    --ui-line: rgba(255, 255, 255, 0.10);
    --card-fill: linear-gradient(165deg, rgba(22, 74, 98, 0.72) 0%, rgba(7, 22, 32, 0.88) 100%);
    --card-fill-2: rgba(1, 7, 13, 0.35);
    --card-shine: rgba(255, 255, 255, 0.07);
    --card-lift: 0 20px 40px -14px rgba(0, 0, 0, 0.65), 0 0 22px rgba(29, 226, 238, 0.08);
    --border-default: linear-gradient(135deg, rgba(29, 226, 238, 0.55), rgba(72, 255, 209, 0.3) 55%, rgba(126, 167, 255, 0.45));
    --border-prompt: linear-gradient(135deg, #48ffd1 0%, #1de2ee 55%, #7ea7ff 100%);
    --border-warm: linear-gradient(135deg, #ffc36b 0%, #1de2ee 60%, #48ffd1 100%);
    --border-money: linear-gradient(135deg, #ffd27a 0%, #ffc36b 30%, #1de2ee 75%, #7ea7ff 100%);
    --btn: linear-gradient(90deg, #0aa6b2 0%, #3bbfe6 100%);
    --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 16px -8px rgba(8, 140, 170, 0.8);
    --accent: #48ffd1;
    --tile-bg: linear-gradient(160deg, #16485a, #0c2e3b);
    --tile-ink: #48ffd1;
    --tile-line: rgba(29, 226, 238, 0.3);
    --rule: rgba(126, 232, 246, 0.4);
    --good: #80f1c2;
    --bad: #ff9d9d;
    --pill-ink: #f0feff;
    --pill-line: rgba(131, 245, 255, 0.58);
}

html[data-theme="light"] body.ui-v4 {
    --app-bg: #eef9fb;
    --app-bg-2: #d9eef5;
    --app-glow-1: rgba(40, 200, 220, 0.40);
    --app-glow-2: rgba(110, 170, 255, 0.36);
    --app-glow-3: rgba(110, 235, 200, 0.34);
    --app-glow-4: rgba(190, 150, 255, 0.20);
    --app-grid: rgba(20, 120, 150, 0.07);
    --ink: #143a47;
    --ink-head: #0f3443;
    --ink-muted: #557782;
    --ui-line: rgba(20, 80, 100, 0.12);
    --card-fill: linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.48) 100%);
    --card-fill-2: rgba(255, 255, 255, 0.7);
    --card-shine: rgba(255, 255, 255, 0.95);
    --card-lift: 0 18px 36px -14px rgba(16, 96, 124, 0.34), 0 6px 14px -8px rgba(16, 96, 124, 0.2);
    --accent: #078f9c;
    --tile-bg: linear-gradient(160deg, #ffffff, #d6f4fa);
    --tile-ink: #0a9aa6;
    --tile-line: rgba(255, 255, 255, 0.9);
    --rule: rgba(8, 140, 155, 0.35);
    --good: #138a5a;
    --bad: #c23b3b;
    --pill-ink: #0c5a66;
    --pill-line: rgba(8, 140, 155, 0.55);
    color-scheme: light;
}

/* ---- Page background ---------------------------------------------------- */
body.app-page.ui-v4 {
    color: var(--ink);
    background:
        radial-gradient(300px 300px at 12% 18%, var(--app-glow-1), transparent 70%),
        radial-gradient(340px 320px at 96% 40%, var(--app-glow-2), transparent 70%),
        radial-gradient(320px 300px at 8% 72%, var(--app-glow-3), transparent 70%),
        radial-gradient(300px 280px at 88% 96%, var(--app-glow-4), transparent 70%),
        linear-gradient(180deg, var(--app-bg) 0%, var(--app-bg-2) 100%);
    background-color: var(--app-bg-2);
}
body.app-page.ui-v4::before {
    background-image:
        linear-gradient(to right, var(--app-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--app-grid) 1px, transparent 1px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}

/* ---- Header (kept as the app has it; light variants only) ---------------- */
html[data-theme="light"] body.ui-v4 .ofm-topbar.is-scrolled {
    background: rgba(238, 249, 251, 0.94);
    border-bottom-color: rgba(8, 140, 155, 0.18);
    box-shadow: 0 10px 24px rgba(16, 96, 124, 0.14);
}
html[data-theme="light"] body.ui-v4 .ofm-topbar-brand img { filter: brightness(0) saturate(100%); opacity: 0.85; }
html[data-theme="light"] body.ui-v4 .ofm-topbar-toggle {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(220, 244, 249, 0.8));
    border-color: rgba(8, 160, 175, 0.5);
    box-shadow: 0 6px 14px rgba(16, 96, 124, 0.18), inset 0 1px 0 #fff;
}
html[data-theme="light"] body.ui-v4 .ofm-topbar-toggle img { filter: brightness(0); opacity: 0.72; }
html[data-theme="light"] body.ui-v4 .ofm-topbar-avatar { border-color: rgba(8, 160, 175, 0.6); background: #fff; }

html[data-theme="light"] body.ui-v4 .home-title {
    background: linear-gradient(120deg, #0f3443 0%, #0b5f6c 60%, #1f6f9a 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="light"] body.ui-v4 .home-state-line::before { background: linear-gradient(to right, rgba(8, 140, 155, 0), var(--rule)); }
html[data-theme="light"] body.ui-v4 .home-state-line::after { background: linear-gradient(to left, rgba(8, 140, 155, 0), var(--rule)); }
html[data-theme="light"] body.ui-v4 .state-pill {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--pill-line);
    color: var(--pill-ink);
}
html[data-theme="light"] body.ui-v4 .state-pill-current {
    background: linear-gradient(130deg, rgba(29, 226, 238, 0.16), rgba(72, 255, 209, 0.12));
    color: #0b4f5a;
}
html[data-theme="light"] body.ui-v4 .state-active { border-color: rgba(19, 138, 90, 0.55); color: #0d6b46; }
html[data-theme="light"] body.ui-v4 .state-grace { border-color: rgba(190, 130, 20, 0.6); color: #8a5a06; }
html[data-theme="light"] body.ui-v4 .state-inactive { border-color: rgba(194, 59, 59, 0.55); color: #a02c2c; }
html[data-theme="light"] body.ui-v4 .state-pill-status.state-active::before { background: #1fb987; box-shadow: 0 0 8px rgba(31, 185, 135, 0.6); }

/* ---- Menu ---------------------------------------------------------------- */
html[data-theme="light"] body.ui-v4 .ofm-topbar-menu {
    background: linear-gradient(180deg, rgba(250, 254, 255, 0.97), rgba(236, 248, 251, 0.94));
    border-top-color: rgba(8, 140, 155, 0.18);
    border-bottom-color: rgba(8, 140, 155, 0.3);
    box-shadow: 0 18px 28px rgba(16, 96, 124, 0.18);
}
html[data-theme="light"] body.ui-v4 .ofm-topbar-title { color: #3f6874; }
html[data-theme="light"] body.ui-v4 .ofm-topbar-link,
html[data-theme="light"] body.ui-v4 .ofm-topbar-section--solo .ofm-topbar-link { color: #0f3443; }
html[data-theme="light"] body.ui-v4 .ofm-topbar-section-body .ofm-topbar-link { color: #24505d; }
html[data-theme="light"] body.ui-v4 .ofm-topbar-link.is-active { color: #062a35; }
html[data-theme="light"] body.ui-v4 .ofm-topbar-link.is-active::after { background: #0aa6b2; }
html[data-theme="light"] body.ui-v4 .ofm-topbar-meta-note { color: #557782; }
html[data-theme="light"] body.ui-v4 .ofm-topbar-backdrop { background: rgba(190, 220, 228, 0.55); }
html[data-theme="light"] body.ui-v4 .ofm-topbar-section,
html[data-theme="light"] body.ui-v4 .ofm-topbar-meta-row { border-color: rgba(8, 140, 155, 0.16); }
html[data-theme="light"] body.ui-v4 .ofm-topbar-section-chevron { filter: brightness(0.35); }
html[data-theme="light"] body.ui-v4 .ofm-topbar-close-btn { color: #0f3443; border-color: rgba(8, 140, 155, 0.35); background: rgba(255, 255, 255, 0.8); }
html[data-theme="light"] body.ui-v4 .ofm-home-mode-switch-text { color: #0f3443; }

.ui-seg {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--ui-line, rgba(255, 255, 255, 0.1));
    background: var(--card-fill-2, rgba(1, 7, 13, 0.35));
}
.ui-seg button {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted, #9db7bf);
    cursor: pointer;
}
.ui-seg button[aria-pressed="true"] { background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }

/* ---- Building blocks ----------------------------------------------------- */
.ui-home { gap: 16px; }
.ui-cap {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.ui-ico { width: 18px; height: 18px; flex: none; }
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ui-card {
    position: relative;
    display: block;
    border-radius: 22px;
    border: 1.5px solid transparent;
    color: var(--ink);
    text-decoration: none;
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        var(--card-fill) padding-box,
        var(--border-default) border-box;
    box-shadow: var(--card-lift);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}
.ui-card--prompt { background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box; }
.ui-card--warm { background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-warm) border-box; }
.ui-card--money { background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-money) border-box; }

/* Buttons: one calm fade with a little depth. */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    background: var(--btn);
    box-shadow: var(--btn-shadow);
    transition: transform var(--ease), filter var(--ease);
}
.ui-btn:hover { filter: brightness(1.06); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn--full { width: 100%; }
.ui-btn--sm { min-height: 40px; padding: 8px 14px; font-size: 0.9rem; }
.ui-btn--ghost {
    color: var(--ink);
    background: linear-gradient(90deg, var(--card-fill-2), transparent);
    border: 1px solid var(--ui-line);
    box-shadow: inset 0 1px 0 var(--card-shine);
}
.ui-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-icon-btn {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ui-line);
    background: linear-gradient(135deg, var(--card-fill-2), transparent);
    color: var(--ink);
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--card-shine);
}
.ui-tile {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--tile-ink);
    background: var(--tile-bg);
    border: 1px solid var(--tile-line);
    box-shadow: inset 0 1px 0 var(--card-shine), 0 6px 12px -6px rgba(16, 110, 140, 0.45);
}
.ui-tile .ui-ico { width: 20px; height: 20px; }
.ui-pro-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 8px;
    vertical-align: middle;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #5e3605;
    background: linear-gradient(180deg, #ffe2a8, #f2b54a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 8px -2px rgba(190, 120, 20, 0.45);
    pointer-events: none;
}
.ui-pro-tag svg { width: 10px; height: 10px; }
.ui-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    vertical-align: middle;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #6b3a06;
    background: linear-gradient(180deg, #ffd9a6, #ffb867);
}
.ui-fine { margin: 10px 0 0; font-size: 0.78rem; color: var(--ink-muted); }
.ui-fine a { color: var(--accent); }

/* Sections that open and close (state saved per member). */
.ui-section { display: grid; gap: 10px; }
.ui-section > .ui-section-head {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    cursor: pointer;
}
.ui-section > .ui-section-head::-webkit-details-marker { display: none; }
.ui-section > .ui-section-head::after {
    content: "";
    order: 2;
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--rule), transparent);
}
.ui-section-chev {
    order: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ui-line);
    color: var(--ink-muted);
    transition: transform 0.2s ease;
}
.ui-section[open] > .ui-section-head .ui-section-chev { transform: rotate(180deg); }
.ui-section-body { display: grid; gap: 12px; }

/* Setup steps card */
.ui-setup { padding: 16px; }
.ui-setup-head { display: flex; align-items: center; gap: 12px; color: var(--ink-head); }
.ui-ring { flex: none; font-family: "Orbitron", var(--font-display); }
.ui-setup-title { margin: 4px 0 0; font-size: 1.2rem; line-height: 1.25; color: var(--ink-head); font-family: var(--font-display); }
.ui-setup-desc { margin: 10px 0 12px; color: var(--ink-muted); font-size: 0.95rem; }
.ui-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; font-size: 0.9rem; }
.ui-steps li { display: flex; align-items: center; gap: 9px; color: var(--ink-muted); }
.ui-steps li strong { color: var(--ink); font-weight: 600; }
.ui-steps li.is-done { text-decoration: line-through; text-decoration-color: var(--ui-line); }
.ui-step-dot {
    width: 18px;
    height: 18px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.68rem;
    border: 1.5px solid var(--ui-line);
}
.ui-steps li.is-done .ui-step-dot { background: linear-gradient(135deg, #48ffd1, #1fb987); border-color: transparent; color: #03342a; }
.ui-steps li.is-now .ui-step-dot { border-color: #1de2ee; box-shadow: 0 0 8px rgba(29, 226, 238, 0.6); }

/* Money */
.ui-wallet { padding: 16px; display: grid; gap: 4px; }
.ui-amount {
    justify-self: start;
    margin-top: 4px;
    font-family: "Orbitron", var(--font-display);
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.1;
    text-decoration: none;
    background-image: linear-gradient(90deg, #48ffd1, #1de2ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
html[data-theme="light"] body.ui-v4 .ui-amount { background-image: linear-gradient(90deg, #078f9c, #1f9e78); }
.ui-amount.is-negative { background-image: linear-gradient(90deg, var(--bad), var(--bad)); }
.ui-amount.is-wallet-amount-long { font-size: 1.7rem; }
.ui-amount.is-wallet-amount-xl { font-size: 1.4rem; }
.ui-sub { margin: 0 0 10px; font-size: 0.85rem; color: var(--ink-muted); }
/* "This month" card (GRACE rule, 2026-10-09): what to top up by month end. */
.ui-outlook {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--ui-line);
    border-left: 4px solid var(--good, #48ffd1);
    background: rgba(72, 255, 209, 0.06);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ink);
}
.ui-outlook.is-warn { border-left-color: var(--warn, #ffcf5a); background: rgba(255, 207, 90, 0.08); }
.ui-outlook p { margin: 6px 0 0; }
.ui-outlook-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.ui-outlook-head strong { font-size: 0.98rem; color: var(--ink-head, var(--ink)); }
.ui-outlook-head span { font-size: 0.78rem; color: var(--ink-muted); white-space: nowrap; }
.ui-outlook-note { font-size: 0.76rem; color: var(--ink-muted); }
/* "This month" receipt (owner, 2026-10-09: numbers, not reading) */
.ui-month {
    margin-top: 12px;
    padding: 12px 14px 10px;
    border-radius: 16px;
    border: 1px solid var(--ui-line);
    background: rgba(72, 255, 209, 0.05);
    display: grid;
    gap: 10px;
}
.ui-month.is-warn { background: rgba(255, 207, 90, 0.07); border-color: rgba(255, 190, 70, 0.45); }
.ui-month-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-month-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-weight: 700; font-size: 0.86rem; line-height: 1.2;
}
.ui-month-badge svg { width: 15px; height: 15px; }
.ui-month-badge.is-good { background: rgba(72, 255, 209, 0.16); color: var(--good, #48ffd1); }
.ui-month-badge.is-warn { background: rgba(255, 190, 70, 0.2); color: #b77700; }
html[data-theme="dark"] .ui-month-badge.is-warn { color: #ffd47a; }
.ui-month-days { display: grid; justify-items: center; line-height: 1; font-size: 0.66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.ui-month-days b { font-family: "Orbitron", var(--font-display); font-size: 1.35rem; color: var(--ink-head, var(--ink)); letter-spacing: 0; margin-bottom: 3px; }
.ui-month-receipt { display: grid; font-variant-numeric: tabular-nums; }
.ui-month-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.9rem; }
.ui-month-row span { color: var(--ink-muted); }
.ui-month-row b { font-weight: 600; color: var(--ink); }
.ui-month-row.is-key b { color: #b77700; }
html[data-theme="dark"] .ui-month-row.is-key b { color: #ffd47a; }
.ui-month-row.is-total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--ui-line); font-size: 1rem; }
.ui-month-row.is-total span { color: var(--ink); font-weight: 600; }
.ui-month-row.is-total.is-pos b { color: var(--good, #48ffd1); font-weight: 800; }
.ui-month-row.is-total.is-neg b { color: var(--bad, #ff6b6b); font-weight: 800; }
.ui-month-row sup { font-size: 0.7em; }
.ui-month-cta { justify-self: stretch; justify-content: center; }
.ui-month-info { font-size: 0.78rem; color: var(--ink-muted); }
.ui-month-info summary { cursor: pointer; width: max-content; }
.ui-month-info p { margin: 6px 0 0; }
.income-hero .ui-month { margin: 14px 0 4px; }
.income-hero .ui-month p { font-size: 0.78rem; }

/* Personally sponsored PROs: compact rows (owner, 2026-10-09) */
.team-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.team-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; border: 1px solid var(--ui-line); color: var(--ink); }
.team-chips i, .team-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: 0 0 8px; }
.team-chips .is-active, .team-row.is-active { --c: #1fb987; }
.team-chips .is-grace, .team-row.is-grace { --c: #f0a92a; }
.team-chips .is-inactive, .team-row.is-inactive { --c: #8a9aa3; }
.team-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ui-line); border-radius: 14px; overflow: hidden; }
.team-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; padding: 8px 10px; }
.team-row + .team-row { border-top: 1px solid var(--ui-line); }
.team-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c); }
.team-name { display: grid; min-width: 0; line-height: 1.2; }
.team-name strong { font-size: 0.92rem; color: var(--ink-head, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-name em { font-style: normal; font-size: 0.74rem; color: var(--ink-muted); }
.team-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.team-go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--ink-muted); border: 1px solid var(--ui-line); }
.team-go:hover { color: var(--ink-head, var(--ink)); border-color: var(--c); }
.team-go svg { width: 16px; height: 16px; }

/* Activate PRO with my wallet (2026-10-09) */
.ui-activate { max-width: 560px; margin: 24px auto; gap: 10px; }
.ui-activate-title { margin: 4px 0 6px; font-size: 1.35rem; line-height: 1.3; color: var(--ink-head, var(--ink)); }
.ui-activate-rows { display: grid; gap: 0; border: 1px solid var(--ui-line); border-radius: 14px; overflow: hidden; }
.ui-activate-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.ui-activate-rows div + div { border-top: 1px solid var(--ui-line); }
.ui-activate-rows span { color: var(--ink-muted); }
.ui-activate-rows div:last-child strong { color: var(--good, #48ffd1); }
.income-hero .ui-outlook { margin: 14px 0 4px; }
.income-hero .ui-outlook p.ui-outlook-note { font-size: 0.76rem; }
html[data-theme="light"] body.ui-v4 .ui-amount.is-negative { background-image: linear-gradient(90deg, var(--bad, #c23b3b), var(--bad, #c23b3b)); }
.ui-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
    border-top: 1px solid var(--ui-line);
}
.ui-stat {
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: 12px 4px 2px;
    color: var(--ink-head);
    text-decoration: none;
    text-align: center;
}
.ui-stat + .ui-stat { border-left: 1px solid var(--ui-line); }
.ui-stat span {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.ui-stat strong { font-family: "Orbitron", var(--font-display); font-size: 1rem; overflow-wrap: anywhere; }
.ui-trial { padding: 16px; }

/* Rows (pages to share) */
.ui-list { padding: 4px 0; }
.ui-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
}
.ui-row + .ui-row { border-top: 1px solid var(--ui-line); }
.ui-row--locked { cursor: pointer; }
.ui-row-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ui-row-text strong { color: var(--ink-head); font-size: 0.98rem; }
.ui-row-text small, .ui-row-link {
    color: var(--ink-muted);
    font-size: 0.82rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-row-acts { display: flex; align-items: center; gap: 6px; flex: none; }

/* Tool tiles */
.ui-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ui-tiles > .ui-tool:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ui-tool {
    display: grid;
    gap: 6px;
    align-content: start;
    min-height: 116px;
    padding: 14px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ui-tool strong { color: var(--ink-head); font-size: 0.98rem; line-height: 1.25; }
.ui-tool small { color: var(--ink-muted); font-size: 0.82rem; }
.ui-tool-tag { position: absolute; top: 12px; right: 12px; }
.ui-tool-tag .ui-pro-tag { margin: 0; }

/* Existing dashboard cards, restyled inside the new home */
.ui-home .home-daily-prompt-card {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box;
    box-shadow: var(--card-lift);
    color: var(--ink);
}
.ui-home .home-daily-prompt-title { color: var(--ink-head); }
.ui-home .home-daily-prompt-summary { color: var(--ink-muted); }
.ui-home .home-daily-prompt-eyebrow, .ui-home .home-daily-prompt-cta { color: var(--accent); }
.ui-home .home-daily-prompt-pro { background: none; border: 0; padding: 0; box-shadow: none; }
html[data-theme="light"] body.ui-v4 .home-daily-prompt-cat { color: #0b5f6c; background: rgba(8, 140, 155, 0.1); border-color: rgba(8, 140, 155, 0.25); }
.ui-home .home-cc-card {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-warm) border-box;
    box-shadow: var(--card-lift);
    color: var(--ink);
}
.ui-home .home-cc-label { color: var(--ink-head); }
.ui-home .home-cc-sub { color: var(--ink-muted); }
.ui-home .home-cc-cta { color: var(--accent); }
.ui-home .home-cc-ico { color: var(--tile-ink); background: var(--tile-bg); border: 1px solid var(--tile-line); }
.ui-home .home-cc-stat { background: var(--card-fill-2); border: 1px solid var(--ui-line); color: var(--ink-head); }
.ui-home .home-cc-stat span { color: var(--ink-muted); }

/* Notices and footer on the new home */
html[data-theme="light"] body.ui-v4 .dashboard-footer-link { color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .dashboard-inline-link { color: #078f9c; }
html[data-theme="light"] body.ui-v4 .notice-info { background: rgba(29, 226, 238, 0.12); border-color: rgba(8, 140, 155, 0.35); color: #0b4f5a; }
html[data-theme="light"] body.ui-v4 .notice-error { background: rgba(194, 59, 59, 0.08); border-color: rgba(194, 59, 59, 0.4); color: #8a2323; }

/* Cheaper phones: a lighter blur. Reduced motion: no transitions. */
@media (max-width: 420px) and (max-resolution: 2dppx) {
    .ui-card { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) {
    .ui-btn, .ui-section-chev { transition: none; }
}
.ui-home .home-cc-stat strong { color: var(--ink-head); }
.ui-row { gap: 10px; padding: 12px; }
.ui-row-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-row-acts .ui-btn--sm { padding: 8px 12px; }
html[data-theme="light"] body.ui-v4 .ofm-home-mode-switch {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(220, 244, 249, 0.85));
    border-color: rgba(8, 160, 175, 0.45);
    color: #0f3443;
    box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(16, 96, 124, 0.35);
}
html[data-theme="light"] body.ui-v4 .ofm-home-mode-switch-track { background: rgba(8, 140, 155, 0.16); border-color: rgba(8, 140, 155, 0.3); }
html[data-theme="light"] body.ui-v4 .ofm-home-mode-switch-knob { background: linear-gradient(135deg, #1de2ee, #1fb987); }
html[data-theme="light"] body.ui-v4 .ofm-topbar.is-scrolled {
    background: rgba(240, 250, 252, 0.985);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* ---- Shared page pieces (new look) --------------------------------------- */
.ui-page { display: grid; gap: 16px; align-content: start; }
.ui-empty { margin: 0; padding: 18px 14px; color: var(--ink-muted); font-size: 0.92rem; text-align: center; }
.ui-icon-btn.is-spinning .ui-ico { animation: ui-spin 0.8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-btn.is-disabled { opacity: 0.45; pointer-events: none; }
.ui-field { display: grid; gap: 4px; font-size: 0.78rem; color: var(--ink-muted); }
.ui-field input, .ui-field select, .ui-field textarea {
    font: inherit;
    font-size: 0.95rem;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    color: var(--ink);
    color-scheme: inherit;
}
.ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus { outline: 2px solid #1de2ee; outline-offset: 1px; }
.ui-filter { padding: 0 14px; }
.ui-filter > summary {
    cursor: pointer;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
}
.ui-filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 12px; }
.ui-filter-form .ui-btn-row { grid-column: 1 / -1; }
.ui-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--ui-line);
}
.ui-pager-label { font-size: 0.82rem; color: var(--ink-muted); }

/* ---- Wallet --------------------------------------------------------------- */
.ui-wallet-hero { padding: 18px 16px 16px; display: grid; gap: 4px; }
.ui-wallet-hero-top { display: flex; align-items: center; justify-content: space-between; }
.ui-amount--hero { margin: 2px 0 6px; font-size: 2.6rem; }
.ui-wallet-hero .ui-sub { margin: 0; }
.ui-wallet-hero .ui-sub strong { color: var(--ink-head); }
.ui-wallet-hero .ui-fine { margin: 2px 0 0; }
.ui-wallet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ui-wallet-actions .ui-btn { padding-left: 10px; padding-right: 10px; }

.ui-ledger { padding: 4px 0 0; }
.ui-ledger-head { padding: 10px 14px 0; }
.ui-ledger-head .ui-fine { margin: 0; }
.ui-ledger-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--ui-line);
}
.ui-ledger-sign {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.05rem;
}
.ui-ledger-row.is-credit .ui-ledger-sign { color: var(--good); background: rgba(72, 255, 209, 0.12); border: 1px solid rgba(72, 255, 209, 0.3); }
.ui-ledger-row.is-debit .ui-ledger-sign { color: var(--bad); background: rgba(255, 120, 120, 0.1); border: 1px solid rgba(255, 120, 120, 0.28); }
.ui-ledger-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ui-ledger-text strong { color: var(--ink-head); font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.ui-ledger-text small { color: var(--ink-muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-ledger-amount { flex: none; font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem; }
.ui-ledger-row.is-credit .ui-ledger-amount { color: var(--good); }
.ui-ledger-row.is-debit .ui-ledger-amount { color: var(--bad); }

/* ---- Top up pop-up and message banner in Light ---------------------------- */
html[data-theme="light"] body.ui-v4 .wallet-topup-backdrop { background: rgba(190, 220, 228, 0.6); }
html[data-theme="light"] body.ui-v4 .wallet-topup-card {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, #fff 0%, transparent 40%) padding-box, linear-gradient(165deg, #ffffff, #eef9fb) padding-box, var(--border-money) border-box;
    box-shadow: 0 28px 60px -20px rgba(16, 96, 124, 0.45);
    color: var(--ink);
}
html[data-theme="light"] body.ui-v4 .wallet-topup-eyebrow { color: var(--accent); }
html[data-theme="light"] body.ui-v4 .wallet-topup-title { color: var(--ink-head); }
html[data-theme="light"] body.ui-v4 .wallet-topup-sub,
html[data-theme="light"] body.ui-v4 .wallet-topup-custom-label,
html[data-theme="light"] body.ui-v4 .wallet-topup-summary { color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .wallet-topup-preset {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(8, 140, 155, 0.25);
    color: var(--ink);
}
html[data-theme="light"] body.ui-v4 .wallet-topup-preset.is-selected {
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.18), rgba(72, 255, 209, 0.14));
    border-color: #0aa6b2;
    color: #0b4f5a;
    box-shadow: 0 0 12px rgba(29, 226, 238, 0.25);
}
html[data-theme="light"] body.ui-v4 .wallet-topup-custom-input { background: #fff; border-color: rgba(8, 140, 155, 0.3); color: var(--ink); }
html[data-theme="light"] body.ui-v4 .wallet-topup-summary strong { color: #078f9c; }
html[data-theme="light"] body.ui-v4 .wallet-topup-cancel { color: var(--ink-muted); border-color: rgba(8, 140, 155, 0.3); }
body.ui-v4 .wallet-topup-submit { background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }

html[data-theme="light"] body.ui-v4 .dashboard-flash-banner .notice { box-shadow: 0 14px 30px rgba(16, 96, 124, 0.18); }
html[data-theme="light"] body.ui-v4 .notice-success { background: rgba(31, 185, 135, 0.12); border-color: rgba(19, 138, 90, 0.4); color: #0d5c3d; }
html[data-theme="light"] body.ui-v4 .notice-warning { background: rgba(255, 195, 107, 0.18); border-color: rgba(190, 130, 20, 0.45); color: #7a4f05; }
.ui-wallet-actions .ui-btn { gap: 6px; font-size: 0.9rem; white-space: nowrap; }
.ofm-topbar-meta-row.ui-theme-row { display: none; }
body.ui-v4 .ofm-topbar-meta-row.ui-theme-row { display: flex; }

/* ---- Send to wallet and Withdraw screens (new look, 2026-10-07) ---------- */
.wallet-transfer-link { color: #82f5ff; text-decoration: underline; }
.wallet-transfer-info.is-warn { border-color: rgba(255, 196, 92, 0.4); }

body.ui-v4 .wallet-transfer-back { color: var(--ink-muted); font-weight: 600; }
body.ui-v4 .wallet-transfer-back:hover { color: var(--ink-head); }
body.ui-v4 .wallet-transfer-shell {
    position: relative;
    border-radius: 22px;
    border: 1.5px solid transparent;
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        var(--card-fill) padding-box,
        var(--border-money) border-box;
    box-shadow: var(--card-lift);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    padding: 20px 18px 18px;
    color: var(--ink);
}
body.ui-v4 .wallet-transfer-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--accent);
}
body.ui-v4 .wallet-transfer-title { color: var(--ink-head); font-size: 1.35rem; line-height: 1.25; }
body.ui-v4 .wallet-transfer-spendable { color: var(--ink-muted); }
body.ui-v4 .wallet-transfer-spendable strong { color: var(--ink-head); font-family: var(--font-mono); }
body.ui-v4 .wallet-transfer-field-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--ink-muted);
}
body.ui-v4 .wallet-transfer-field input {
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    color: var(--ink);
    border-radius: 12px;
    font-size: 1rem;
}
body.ui-v4 .wallet-transfer-field input:focus { border-color: #1de2ee; box-shadow: 0 0 0 3px rgba(29, 226, 238, 0.2); }
body.ui-v4 .wallet-transfer-field-hint { color: var(--ink-muted); }
body.ui-v4 .wallet-transfer-resend { color: var(--accent); border-bottom-color: var(--rule); }
body.ui-v4 .wallet-transfer-link { color: var(--accent); }
body.ui-v4 .wallet-transfer-info {
    background: var(--card-fill-2);
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    color: var(--ink-muted);
}
body.ui-v4 .wallet-transfer-info strong { color: var(--ink-head); }
body.ui-v4 .wallet-transfer-info.is-warn { border-color: rgba(255, 180, 70, 0.55); background: rgba(255, 195, 107, 0.12); }
body.ui-v4 .wallet-transfer-submit {
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    background: var(--btn);
    box-shadow: var(--btn-shadow);
    color: #fff;
    letter-spacing: 0.01em;
}
body.ui-v4 .wallet-transfer-submit:hover { filter: brightness(1.06); border: 0; box-shadow: var(--btn-shadow); }
body.ui-v4 .wallet-transfer-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--ui-line);
    background: linear-gradient(90deg, var(--card-fill-2), transparent);
    color: var(--ink);
    font-weight: 600;
}
body.ui-v4 .wallet-transfer-cancel:hover { color: var(--bad); }
body.ui-v4 .wallet-transfer-actions .wallet-transfer-cancel { flex: 0 0 auto; }
body.ui-v4 .wallet-transfer-abort-form { margin-top: 10px; }
body.ui-v4 .wallet-transfer-abort-form .wallet-transfer-cancel { width: 100%; }

body.ui-v4 .wallet-transfer-error {
    border-radius: 12px;
    background: rgba(255, 100, 130, 0.1);
    border-color: rgba(255, 100, 130, 0.45);
    color: var(--ink-head);
}
body.ui-v4 .wallet-transfer-help {
    border-radius: 12px;
    color: var(--ink);
    background: rgba(255, 195, 107, 0.12);
    border-color: rgba(255, 180, 70, 0.5);
}

body.ui-v4 .wallet-transfer-recipient-card,
body.ui-v4 .wallet-transfer-confirm-row {
    background: var(--card-fill-2);
    border: 1px solid var(--ui-line);
    border-radius: 14px;
}
body.ui-v4 .wallet-transfer-recipient-username,
body.ui-v4 .wallet-transfer-confirm-row strong { color: var(--ink-head); }
body.ui-v4 .wallet-transfer-confirm-row span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-muted); align-self: center; }

body.ui-v4 .wallet-transfer-success-title { color: var(--ink-head); }
body.ui-v4 .wallet-transfer-success-sub,
body.ui-v4 .wallet-transfer-success-hold { color: var(--ink-muted); }
body.ui-v4 .wallet-transfer-success-hold strong { color: var(--ink-head); }
body.ui-v4 .wallet-transfer-success-sub code { background: var(--card-fill-2); color: var(--accent); border: 1px solid var(--ui-line); }
body.ui-v4 .wallet-transfer-success-icon { color: var(--good); }
body.ui-v4 .wallet-transfer-success-back {
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    background: var(--btn);
    box-shadow: var(--btn-shadow);
    color: #fff;
}
html[data-theme="light"] body.ui-v4 .wallet-transfer-cancel-window { background: rgba(255, 195, 107, 0.14); border-color: rgba(190, 130, 20, 0.4); }
html[data-theme="light"] body.ui-v4 .wallet-transfer-cancel-copy { color: #6b4504; }
html[data-theme="light"] body.ui-v4 .wallet-transfer-cancel-btn { color: #8a5a06; }
html[data-theme="light"] body.ui-v4 .wallet-transfer-recipient-status.is-active { color: #0d6b46; border-color: rgba(19, 138, 90, 0.45); background: rgba(31, 185, 135, 0.12); }
html[data-theme="light"] body.ui-v4 .wallet-transfer-recipient-status.is-grace { color: #8a5a06; }
html[data-theme="light"] body.ui-v4 .wallet-transfer-recipient-status.is-inactive { color: #a02c2c; }
html[data-theme="light"] body.ui-v4 .wallet-transfer-recipient-status.is-member { color: var(--ink-muted); border-color: var(--ui-line); }

/* ---- Income Center, Rank Progress, Matrix (new look, 2026-10-07) --------- */
/* Same classes as before; colours come from the theme tokens. */
body.ui-v4 .rank-main, body.ui-v4 .matrix-main { gap: 16px; }

/* Hero cards */
body.ui-v4 .rank-hero,
body.ui-v4 .matrix-hero,
body.ui-v4 .matrix-board-card {
    border: 1.5px solid transparent;
    border-radius: 22px;
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        var(--card-fill) padding-box,
        var(--border-default) border-box;
    box-shadow: var(--card-lift);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    padding: 18px 16px;
}
body.ui-v4 .income-hero { background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-money) border-box; }
body.ui-v4 .rank-hero:not(.income-hero) { background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box; }

body.ui-v4 .rank-hero-eyebrow,
body.ui-v4 .matrix-hero-eyebrow,
body.ui-v4 .rank-card-kicker,
body.ui-v4 .matrix-card-kicker {
    color: var(--accent);
    font-weight: 600;
}
body.ui-v4 .rank-hero h1,
body.ui-v4 .matrix-hero h1 { color: var(--ink-head); font-size: 1.9rem; line-height: 1.1; }
body.ui-v4 .rank-hero p,
body.ui-v4 .matrix-hero p,
body.ui-v4 .rank-section-head p,
body.ui-v4 .rank-progress-card p { color: var(--ink-muted); font-size: 0.92rem; }
body.ui-v4 .matrix-hero p strong { color: var(--ink-head); }
body.ui-v4 .rank-section-head h2,
body.ui-v4 .matrix-board-head h2,
body.ui-v4 .matrix-level-heading h3,
body.ui-v4 .rank-progress-card h3,
body.ui-v4 .rank-person-card h3,
body.ui-v4 .rank-empty-card h3 { color: var(--ink-head); }

/* The big figure card (wallet / current rank) */
body.ui-v4 .rank-current-card {
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 var(--card-shine);
}
body.ui-v4 .rank-current-card span { color: var(--ink-muted); }
body.ui-v4 .rank-current-card strong { color: var(--ink-head); }
body.ui-v4 .rank-current-card em { color: var(--good); }
html[data-theme="light"] body.ui-v4 .income-current-card strong.is-positive { background-image: linear-gradient(90deg, #078f9c, #1f9e78); }
html[data-theme="light"] body.ui-v4 .income-current-card strong.is-zero { background-image: linear-gradient(90deg, #557782, #7e9aa3); }

/* Figures: two per row on a phone, three on wider screens */
body.ui-v4 .rank-hero-stats,
body.ui-v4 .matrix-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 761px) {
    body.ui-v4 .rank-hero-stats,
    body.ui-v4 .matrix-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.ui-v4 .rank-hero-stats article,
body.ui-v4 .matrix-hero-stats article,
body.ui-v4 .income-metric-stack article,
body.ui-v4 .income-metric-grid article {
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--card-shine);
}
body.ui-v4 .rank-hero-stats span,
body.ui-v4 .matrix-hero-stats span,
body.ui-v4 .income-metric-stack span,
body.ui-v4 .income-metric-grid span { color: var(--ink-muted); font-size: 0.6rem; }
body.ui-v4 .rank-hero-stats strong,
body.ui-v4 .matrix-hero-stats strong,
body.ui-v4 .income-metric-stack strong,
body.ui-v4 .income-metric-grid strong { color: var(--ink-head); font-size: 1.1rem; }
body.ui-v4 .income-metric-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.ui-v4 .income-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) {
    body.ui-v4 .income-metric-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.ui-v4 .income-metric-stack article:last-child { grid-column: 1 / -1; }
}

/* Links under the hero: a tidy 2 x 2 grid of quiet buttons */
body.ui-v4 .rank-actions,
body.ui-v4 .matrix-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.ui-v4 .matrix-action-btn,
body.ui-v4 .rank-person-link,
body.ui-v4 .matrix-node-btn {
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--ui-line);
    background: linear-gradient(90deg, var(--card-fill-2), transparent);
    box-shadow: inset 0 1px 0 var(--card-shine);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
}
body.ui-v4 .matrix-action-btn:hover,
body.ui-v4 .rank-person-link:hover,
body.ui-v4 .matrix-node-btn:hover { border-color: #1de2ee; background: rgba(29, 226, 238, 0.12); }

/* Matrix depth: one segmented switch */
body.ui-v4 .matrix-depth-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
}
body.ui-v4 .matrix-depth-btn {
    min-height: 38px;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}
body.ui-v4 .matrix-depth-btn.is-active { background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }

/* Panels inside sections: the section heading replaces the old kicker */
body.ui-v4 .ui-section-body > .rank-panel {
    border: 1.5px solid transparent;
    border-radius: 22px;
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        var(--card-fill) padding-box,
        var(--border-default) border-box;
    box-shadow: var(--card-lift);
    padding: 16px;
}

/* Small cards and rows */
body.ui-v4 .rank-progress-card,
body.ui-v4 .rank-ladder-row,
body.ui-v4 .rank-empty-card,
body.ui-v4 .income-level-card,
body.ui-v4 .income-cycle-row,
body.ui-v4 .income-status-note,
body.ui-v4 .income-disclaimer-card,
body.ui-v4 .matrix-level-card,
body.ui-v4 .matrix-node-stat {
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    color: var(--ink-muted);
}
body.ui-v4 .rank-empty-card p,
body.ui-v4 .income-disclaimer,
body.ui-v4 .rank-ladder-main p { color: var(--ink-muted); }
body.ui-v4 .rank-ladder-row.is-current,
body.ui-v4 .income-level-card.is-qualified {
    border-color: rgba(29, 226, 238, 0.55);
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.14), transparent);
}
body.ui-v4 .rank-ladder-badge,
body.ui-v4 .rank-ladder-meta strong,
body.ui-v4 .rank-progress-top strong,
body.ui-v4 .income-level-line strong,
body.ui-v4 .income-cycle-row > strong,
body.ui-v4 .income-cycle-row b,
body.ui-v4 .rank-person-meta strong,
body.ui-v4 .matrix-node-stat strong,
body.ui-v4 .matrix-node-name,
body.ui-v4 .matrix-node-details strong { color: var(--ink-head); }
body.ui-v4 .rank-ladder-meta,
body.ui-v4 .income-level-line span,
body.ui-v4 .income-level-subline span,
body.ui-v4 .income-cycle-row span,
body.ui-v4 .matrix-level-count,
body.ui-v4 .matrix-node-stat span,
body.ui-v4 .matrix-node-details span,
body.ui-v4 .matrix-node-details,
body.ui-v4 .income-level-breakdown-head span { color: var(--ink-muted); }
body.ui-v4 .rank-ladder-meta em,
body.ui-v4 .income-level-line em,
body.ui-v4 .income-cycle-row em,
body.ui-v4 .income-level-breakdown-head strong,
body.ui-v4 .matrix-node-details summary { color: var(--good); }
body.ui-v4 .matrix-node-rank,
body.ui-v4 .rank-person-head p { color: var(--ink-muted); }
body.ui-v4 .rank-next-meter,
body.ui-v4 .rank-progress-track { border-color: var(--ui-line); background: var(--card-fill-2); }
body.ui-v4 .rank-mix { border-top-color: var(--ui-line); }

/* Pills and badges */
body.ui-v4 .rank-mix span,
body.ui-v4 .rank-status-row span,
body.ui-v4 .rank-counts-badge,
body.ui-v4 .matrix-node-pill,
body.ui-v4 .matrix-status-pill {
    border-color: var(--ui-line);
    background: var(--card-fill-2);
    color: var(--ink);
}
html[data-theme="light"] body.ui-v4 .matrix-status-pill.is-active,
html[data-theme="light"] body.ui-v4 .rank-status-row .is-active { border-color: rgba(19, 138, 90, 0.45); color: #0d6b46; }
html[data-theme="light"] body.ui-v4 .matrix-status-pill.is-grace,
html[data-theme="light"] body.ui-v4 .rank-status-row .is-grace { border-color: rgba(190, 130, 20, 0.5); color: #8a5a06; }
html[data-theme="light"] body.ui-v4 .matrix-status-pill.is-inactive,
html[data-theme="light"] body.ui-v4 .rank-status-row .is-inactive { border-color: rgba(194, 59, 59, 0.45); color: #a02c2c; }
html[data-theme="light"] body.ui-v4 .matrix-node-pill.is-personal { color: #078f9c; }
html[data-theme="light"] body.ui-v4 .income-level-foundation { color: #7a4f05; background: rgba(255, 195, 107, 0.2); }
html[data-theme="light"] body.ui-v4 .rank-plan-note { color: #6b4504; background: rgba(255, 195, 107, 0.16); border-color: rgba(190, 130, 20, 0.35); }
html[data-theme="light"] body.ui-v4 .income-status-note.is-warning { color: #8a2323; background: rgba(194, 59, 59, 0.08); border-color: rgba(194, 59, 59, 0.35); }

/* Person cards and matrix nodes keep their rank tint, on the theme surface */
body.ui-v4 .rank-person-card,
body.ui-v4 .matrix-node {
    border-color: var(--rank-line);
    background: linear-gradient(135deg, var(--rank-wash), transparent 70%), var(--card-fill-2);
    box-shadow: inset 0 1px 0 var(--card-shine);
}
html[data-theme="light"] body.ui-v4 .rank-person-card,
html[data-theme="light"] body.ui-v4 .matrix-node { --rank-line-strength: 1; }
html[data-theme="light"] body.ui-v4 .matrix-node.rank-none, html[data-theme="light"] body.ui-v4 .rank-person-card.rank-none { --rank-line: rgba(90, 120, 135, 0.3); }
html[data-theme="light"] body.ui-v4 .matrix-node.rank-1, html[data-theme="light"] body.ui-v4 .rank-person-card.rank-1 { --rank-line: rgba(30, 150, 210, 0.45); --rank-wash: rgba(92, 207, 255, 0.16); }
html[data-theme="light"] body.ui-v4 .matrix-node.rank-2, html[data-theme="light"] body.ui-v4 .rank-person-card.rank-2 { --rank-line: rgba(10, 160, 140, 0.45); --rank-wash: rgba(103, 255, 231, 0.18); }
html[data-theme="light"] body.ui-v4 .matrix-node.rank-3, html[data-theme="light"] body.ui-v4 .rank-person-card.rank-3 { --rank-line: rgba(200, 150, 20, 0.5); --rank-wash: rgba(255, 212, 98, 0.18); }
html[data-theme="light"] body.ui-v4 .matrix-node.rank-4, html[data-theme="light"] body.ui-v4 .rank-person-card.rank-4 { --rank-line: rgba(220, 110, 50, 0.5); --rank-wash: rgba(255, 163, 111, 0.18); }
html[data-theme="light"] body.ui-v4 .matrix-node.rank-5, html[data-theme="light"] body.ui-v4 .rank-person-card.rank-5 { --rank-line: rgba(210, 60, 120, 0.45); --rank-wash: rgba(255, 124, 173, 0.16); }
html[data-theme="light"] body.ui-v4 .matrix-node.rank-6, html[data-theme="light"] body.ui-v4 .rank-person-card.rank-6 { --rank-line: rgba(130, 80, 220, 0.45); --rank-wash: rgba(189, 148, 255, 0.16); }
html[data-theme="light"] body.ui-v4 .matrix-node.rank-7, html[data-theme="light"] body.ui-v4 .rank-person-card.rank-7 { --rank-line: rgba(200, 50, 50, 0.45); --rank-wash: rgba(255, 122, 122, 0.16); }
body.ui-v4 .matrix-node-avatar,
body.ui-v4 .rank-person-head img { border-color: var(--ui-line); background: var(--card-fill-2); }
body.ui-v4 .matrix-node-empty {
    border: 1px dashed var(--rule);
    background: transparent;
    color: var(--ink-muted);
}
body.ui-v4 .matrix-node-details { border-top-color: var(--ui-line); }
body.ui-v4 .matrix-level-scroll { scrollbar-color: var(--rule) transparent; }

/* Level breakdown folds away (remembered as income.levels) */
.ui-subsection > summary { list-style: none; cursor: pointer; }
.ui-subsection > summary::-webkit-details-marker { display: none; }
body.ui-v4 .income-level-breakdown > summary.income-level-breakdown-head { align-items: center; flex-wrap: nowrap; }
body.ui-v4 .income-level-breakdown > summary .ui-section-chev { flex: none; }
body.ui-v4 .income-level-breakdown[open] > summary .ui-section-chev { transform: rotate(180deg); }
body.ui-v4 .income-level-breakdown > .income-level-grid { margin-top: 10px; }

/* Earnings history: one compact block per month */
body.ui-v4 .income-cycle-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 12px 14px;
}
body.ui-v4 .income-cycle-row > strong { grid-column: 1 / 3; grid-row: 1; }
body.ui-v4 .income-cycle-row em { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; }
body.ui-v4 .income-cycle-row span { grid-row: 2; font-size: 0.58rem; }
body.ui-v4 .income-cycle-row b { font-size: 0.85rem; }
body.ui-v4 .rank-actions > :last-child:nth-child(odd),
body.ui-v4 .matrix-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- Brand Guide (new look, 2026-10-07) ----------------------------------- */
body.ui-v4.brand-guide-page { color: var(--ink); }
body.ui-v4 .brand-guide-eyebrow {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--accent);
}
body.ui-v4 .brand-guide-eyebrow a { border-bottom-color: var(--rule); }
body.ui-v4 .brand-guide-eyebrow a:hover { color: var(--ink-head); }
body.ui-v4 .brand-guide-header h1 { color: var(--ink-head); }
body.ui-v4 .brand-guide-lede,
body.ui-v4 .brand-guide-progress-label,
body.ui-v4 .brand-guide-field-label,
body.ui-v4 .brand-guide-field-status,
body.ui-v4 .brand-guide-suggestion-label,
body.ui-v4 .brand-guide-colour-picker span,
body.ui-v4 .brand-guide-colour-hint,
body.ui-v4 .brand-guide-generate-hint,
body.ui-v4 .brand-guide-diff-lede,
body.ui-v4 .brand-guide-diff-label,
body.ui-v4 .brand-guide-diff-hex,
body.ui-v4 .brand-guide-diff-arrow { color: var(--ink-muted); }
body.ui-v4 .brand-guide-generate-hint strong { color: var(--ink); }
body.ui-v4 .brand-guide-progress-bar { background: var(--card-fill-2); border: 1px solid var(--ui-line); }
body.ui-v4 .brand-guide-ring-track { stroke: var(--ui-line); }
body.ui-v4 .brand-guide-ring-label { fill: var(--ink-head); }
html[data-theme="light"] body.ui-v4 .brand-guide-ring.is-complete .brand-guide-ring-fill { stroke: #1fb987; }
html[data-theme="light"] body.ui-v4 .brand-guide-ring.is-complete .brand-guide-ring-label { fill: #138a5a; }

/* Section cards on the overview: glass cards, gradient border */
body.ui-v4 .brand-guide-section-card,
body.ui-v4 .brand-guide-section .brand-guide-field,
body.ui-v4 .brand-guide-card,
body.ui-v4 .brand-guide-diff-card {
    border: 1.5px solid transparent;
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        var(--card-fill) padding-box,
        var(--border-default) border-box;
    box-shadow: var(--card-lift);
    color: var(--ink);
}
body.ui-v4 .brand-guide-section-card.is-complete,
body.ui-v4 .brand-guide-card--bio {
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        var(--card-fill) padding-box,
        var(--border-prompt) border-box;
}
body.ui-v4 .brand-guide-section-card:hover { border-color: transparent; filter: brightness(1.02); }
body.ui-v4 .brand-guide-section-card h3,
body.ui-v4 .brand-guide-field-question,
body.ui-v4 .brand-guide-card-body,
body.ui-v4 .brand-guide-diff-card h2 { color: var(--ink-head); }
body.ui-v4 .brand-guide-section-card p { color: var(--ink-muted); }
body.ui-v4 .brand-guide-section-cta,
body.ui-v4 .brand-guide-summary-link,
body.ui-v4 .brand-guide-card-edit { color: var(--accent); }
body.ui-v4 .brand-guide-summary-link { border-bottom-color: var(--rule); }
body.ui-v4 .brand-guide-card::before { opacity: 0.6; }
body.ui-v4 .brand-guide-card-empty { color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .brand-guide-card h3 { color: #078f9c; }
html[data-theme="light"] body.ui-v4 .brand-guide-card:nth-child(3n+2) h3,
html[data-theme="light"] body.ui-v4 .brand-guide-card--bio h3 { color: #138a5a; }
html[data-theme="light"] body.ui-v4 .brand-guide-card:nth-child(3n+3) h3 { color: #3d5fc4; }
body.ui-v4 .brand-guide-card-edit { border-color: var(--rule); background: var(--card-fill-2); }

/* Fields */
body.ui-v4 .brand-guide-textarea,
body.ui-v4 .brand-guide-suggestion-input,
body.ui-v4 .brand-guide-colour-picker input[type="text"] {
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    color: var(--ink);
}
body.ui-v4 .brand-guide-textarea:focus { border-color: #1de2ee; }
body.ui-v4 .brand-guide-colour-picker { border-color: var(--ui-line); background: var(--card-fill-2); }
body.ui-v4 .brand-guide-suggestion {
    background:
        linear-gradient(var(--card-fill-2), var(--card-fill-2)) padding-box,
        var(--border-prompt) border-box;
    color: var(--ink);
}
html[data-theme="light"] body.ui-v4 .brand-guide-suggestion { background: linear-gradient(#ffffff, #f4fcfd) padding-box, var(--border-prompt) border-box; }
html[data-theme="light"] body.ui-v4 .brand-guide-field-status[data-state="saved"] { color: #138a5a; }
html[data-theme="light"] body.ui-v4 .brand-guide-field-status[data-state="error"] { color: #c23b3b; }
html[data-theme="light"] body.ui-v4 .brand-guide-sparkle { color: #0aa6b2; }

/* Buttons: the calm fade for the main action, quiet outline for the rest */
body.ui-v4 .brand-guide-refine-btn,
body.ui-v4 .brand-guide-apply-to-page-btn,
body.ui-v4 .brand-guide-nav-btn--primary {
    border: 0;
    background: var(--btn);
    box-shadow: var(--btn-shadow);
    color: #fff;
}
body.ui-v4 .brand-guide-refine-btn .brand-guide-sparkle,
body.ui-v4 .brand-guide-apply-to-page-btn .brand-guide-sparkle { color: #fff; }
body.ui-v4 .brand-guide-refine-btn:hover,
body.ui-v4 .brand-guide-apply-to-page-btn:hover,
body.ui-v4 .brand-guide-nav-btn--primary:hover { filter: brightness(1.06); box-shadow: var(--btn-shadow); background: var(--btn); }
body.ui-v4 .brand-guide-nav-btn,
body.ui-v4 .brand-guide-generate-btn {
    border: 1px solid var(--ui-line);
    background: linear-gradient(90deg, var(--card-fill-2), transparent);
    box-shadow: inset 0 1px 0 var(--card-shine);
    color: var(--ink);
}
body.ui-v4 .brand-guide-nav-btn--primary { color: #fff; }
html[data-theme="light"] body.ui-v4 .brand-guide-generate-btn .brand-guide-sparkle { color: #3d5fc4; }

/* Apply-to-page pop-up */
body.ui-v4 .brand-guide-diff-row { background: var(--card-fill-2); border-color: var(--ui-line); }
body.ui-v4 .brand-guide-diff-row.is-changed { border-color: #1de2ee; background: rgba(29, 226, 238, 0.1); }
html[data-theme="light"] body.ui-v4 .brand-guide-diff-backdrop { background: rgba(190, 220, 228, 0.6); }
html[data-theme="light"] body.ui-v4 .brand-guide-diff-card { background: linear-gradient(165deg, #ffffff, #eef9fb) padding-box, var(--border-default) border-box; }
body.ui-v4 .brand-guide-nav-btn.brand-guide-nav-btn--primary { border: 0; background: var(--btn); box-shadow: var(--btn-shadow); color: #fff; }

/* ---- Page-building family: Social Links, Templates, editors (2026-10-07) --- */
/* Everything EXCEPT .links-preview-*: the live preview shows the member's own
   page style and must never take the app theme. */
body.ui-v4.links-setup-page { --links-soft: var(--ink-muted); --links-soft-2: var(--ink-muted); }

body.ui-v4 .auth-kicker,
body.ui-v4 .ai-section-head-copy .auth-kicker {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--accent);
}
body.ui-v4 .dashboard-title { color: var(--ink-head); }
body.ui-v4 .dashboard-subtitle,
body.ui-v4 .dashboard-card p,
body.ui-v4 .card-copy,
body.ui-v4 .links-control small,
body.ui-v4 .links-control-hint,
body.ui-v4 .links-style-actions p,
body.ui-v4 .links-block-copy p,
body.ui-v4 .input-label { color: var(--ink-muted); }
body.ui-v4 .links-control-hint strong,
body.ui-v4 .dashboard-card p strong { color: var(--ink-head); }
body.ui-v4 .card-title,
body.ui-v4 .links-block-copy strong,
body.ui-v4 .links-block-copy h3,
body.ui-v4 .links-radius-head strong { color: var(--ink-head); }
body.ui-v4 .links-page-hero::after { background: linear-gradient(90deg, transparent, var(--rule), transparent); }
html[data-theme="light"] body.ui-v4 .dashboard-meta-row .state-pill {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--pill-line);
    color: var(--pill-ink);
}
body.ui-v4 .dashboard-footer-link { color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .dashboard-inline-link { color: #078f9c; }

/* Cards */
body.ui-v4 .dashboard-card,
body.ui-v4 .dashboard-hero,
body.ui-v4 .links-modal-card {
    border: 1.5px solid transparent;
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        var(--card-fill) padding-box,
        var(--border-default) border-box;
    box-shadow: var(--card-lift);
    color: var(--ink);
}
html[data-theme="light"] body.ui-v4 .links-modal-card { background: linear-gradient(165deg, #ffffff, #eef9fb) padding-box, var(--border-default) border-box; }
html[data-theme="light"] body.ui-v4 .links-modal-backdrop { background: rgba(190, 220, 228, 0.6); }

/* Inner cards: block list, quick cards, copy rows, empty states */
body.ui-v4 .links-block-card,
body.ui-v4 .links-quick-card,
body.ui-v4 .links-copy-row,
body.ui-v4 .links-current-asset,
body.ui-v4 .links-current-icon {
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    box-shadow: inset 0 1px 0 var(--card-shine);
    color: var(--ink);
}
body.ui-v4 .links-quick-card strong { color: var(--ink-head); }
body.ui-v4 .links-quick-card.is-contact { background: linear-gradient(135deg, rgba(29, 226, 238, 0.14), transparent), var(--card-fill-2); }
body.ui-v4 .links-empty-state,
body.ui-v4 .content-empty { border-color: var(--rule); background: transparent; color: var(--ink-muted); }
body.ui-v4 .links-block-order,
body.ui-v4 .links-block-icon-glyph {
    border: 1px solid var(--tile-line);
    background: var(--tile-bg);
    color: var(--tile-ink);
    box-shadow: inset 0 1px 0 var(--card-shine);
}
body.ui-v4 .links-block-placeholder { border-color: var(--rule); color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .links-type-pill.type-url,
html[data-theme="light"] body.ui-v4 .links-type-pill.type-pdf { background: rgba(29, 226, 238, 0.14); color: #0b5f6c; }
html[data-theme="light"] body.ui-v4 .links-type-pill.type-text,
html[data-theme="light"] body.ui-v4 .links-type-pill.type-hr { background: rgba(20, 80, 100, 0.08); color: #3f6874; }
html[data-theme="light"] body.ui-v4 .links-type-pill.type-image { background: rgba(31, 185, 135, 0.14); color: #0d6b46; }
body.ui-v4 .links-insert-row::before { background: linear-gradient(90deg, transparent, var(--rule), transparent); }

/* Fields */
body.ui-v4 .links-control > span,
body.ui-v4 .links-radius-head span,
body.ui-v4 .links-icon-head span,
body.ui-v4 .links-block-type-display span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
body.ui-v4 .input-field,
body.ui-v4 .links-control input[type="text"],
body.ui-v4 .links-control input[type="url"],
body.ui-v4 .links-control input[type="file"],
body.ui-v4 .links-control select,
body.ui-v4 .links-control textarea,
body.ui-v4 .links-color-field input[type="color"],
body.ui-v4 .links-block-type-display strong {
    border: 1px solid var(--ui-line);
    background-color: var(--card-fill-2);
    color: var(--ink);
}
body.ui-v4 .input-field::placeholder,
body.ui-v4 .links-control input::placeholder,
body.ui-v4 .links-control textarea::placeholder { color: var(--ink-muted); opacity: 0.8; }
body.ui-v4 .input-field:focus,
body.ui-v4 .links-control input:focus,
body.ui-v4 .links-control select:focus,
body.ui-v4 .links-control textarea:focus { border-color: #1de2ee; box-shadow: 0 0 0 3px rgba(29, 226, 238, 0.2); }
html[data-theme="light"] body.ui-v4 .select-field option { background-color: #ffffff; color: #143a47; }

/* Chips (segment choices, radius) */
body.ui-v4 .links-segment-chip span,
body.ui-v4 .links-radius-chip {
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    color: var(--ink);
}
body.ui-v4 .links-segment-chip input:checked + span,
body.ui-v4 .links-radius-chip.is-active,
body.ui-v4 .links-radius-chip[aria-pressed="true"] {
    border-color: transparent;
    background: var(--btn);
    color: #fff;
    box-shadow: var(--btn-shadow);
}

/* Buttons */
body.ui-v4 .links-primary-btn,
body.ui-v4 .btn-primary,
body.ui-v4 .links-add-fab {
    border: 0;
    background: var(--btn);
    box-shadow: var(--btn-shadow);
    color: #fff;
}
body.ui-v4 .links-secondary-btn,
body.ui-v4 .links-action-btn,
body.ui-v4 .btn-ghost,
body.ui-v4 .links-insert-btn,
body.ui-v4 .links-modal-close,
body.ui-v4 .links-live-fab {
    border: 1px solid var(--ui-line);
    background: linear-gradient(90deg, var(--card-fill-2), transparent);
    box-shadow: inset 0 1px 0 var(--card-shine);
    color: var(--ink);
}
html[data-theme="light"] body.ui-v4 .links-live-fab { background: rgba(255, 255, 255, 0.92); box-shadow: 0 12px 24px -10px rgba(16, 96, 124, 0.4); }
body.ui-v4 .links-action-btn.is-danger,
body.ui-v4 .btn-danger { color: var(--bad); border-color: rgba(220, 80, 80, 0.4); background: transparent; }
body.ui-v4 .links-text-btn { color: var(--accent); }
body.ui-v4 .links-toast { border-color: var(--ui-line); background: var(--app-bg); color: var(--ink); }

/* Flash banners used by these pages */
body.ui-v4 .dashboard-flash-banner.is-success p,
body.ui-v4 .dashboard-flash-banner.is-error p { color: var(--ink-head); }

/* Templates: the "what you will get" list folds away */
.tpl-preview-fold > .tpl-preview-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: 999px;
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    color: var(--accent);
    font-weight: 700;
}
.tpl-preview-fold[open] > .tpl-preview-summary .ui-section-chev { transform: rotate(180deg); }
.tpl-preview-fold[open] > .tpl-preview-summary { margin-bottom: 12px; }
/* Phones stack the action row in a column, where the note's 260px flex-basis
   became 260px of height (empty space under "Nothing is published..."). */
@media (max-width: 760px) {
    .links-style-actions p { flex: 0 0 auto; }
}
body.ui-v4 .input-field { background-image: none; }
body.ui-v4 .input-field:focus { background-image: none; }

/* ---- Business Page and Information Page editors (new look, 2026-10-07) --- */
/* The section heading now names each panel, so the old kicker is hidden. */
body.ui-v4 .ui-section-body > .dashboard-card > .ai-section-head-copy > .auth-kicker { display: none; }
body.ui-v4 .links-top-grid { align-items: start; }
body.ui-v4 .links-top-grid > .ui-section { min-width: 0; }

/* Block rows: number, type, title, then one compact row of actions */
body.ui-v4 .links-block-card { border-radius: 20px; padding: 12px; }
body.ui-v4 .links-block-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
body.ui-v4 .links-block-actions .links-action-btn {
    width: auto;
    flex: 0 0 auto;
    min-height: 40px;
    margin: 0;
}
body.ui-v4 .links-block-actions .links-action-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    margin-right: auto;
    font-weight: 700;
}
body.ui-v4 .links-block-actions .links-action-icon {
    width: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
body.ui-v4 .links-block-actions .links-action-btn:disabled { opacity: 0.35; }
body.ui-v4 .links-block-actions .ui-ico { width: 18px; height: 18px; }
body.ui-v4 .links-block-head { gap: 10px; }
body.ui-v4 .links-block-copy h3 { margin: 4px 0 2px; font-size: 1rem; }
body.ui-v4 .links-block-copy p { overflow-wrap: anywhere; }

/* "+" between blocks */
body.ui-v4 .links-insert-btn { width: 36px; height: 36px; padding: 0; font-size: 1.2rem; }

/* Floating buttons */
body.ui-v4 .links-live-fab,
body.ui-v4 .links-add-fab { font-weight: 700; }

/* Information Page: style inherited from the Business Page */
body.ui-v4 .links-style-panel.is-inherited { opacity: 0.75; }

/* Range slider */
body.ui-v4 .links-control input[type="range"] { accent-color: #0aa6b2; }
html[data-theme="light"] body.ui-v4 .links-control input[type="checkbox"] { accent-color: #0aa6b2; }
body.ui-v4 .links-shop-cta { border: 1px solid var(--ui-line); background: var(--card-fill-2); box-shadow: inset 0 1px 0 var(--card-shine); }
body.ui-v4 .links-shop-cta-copy strong { color: var(--ink-head); }
body.ui-v4 .links-shop-cta-done { border-color: var(--rule); color: var(--ink-muted); }
/* Blocks without Edit (dividers): keep the round buttons on the right */
body.ui-v4 .links-block-actions .links-action-icon:first-child { margin-left: auto; }
/* Floating buttons step aside while an editor pop-up is open */
body.ui-v4:has(.links-modal:not([hidden])) .links-live-fab,
body.ui-v4:has(.links-modal:not([hidden])) .links-add-fab { display: none; }
body.ui-v4 .links-quick-grid-modal .links-quick-card { min-height: 0; padding: 12px 14px; gap: 4px; }

/* ---- AI Assistant owner pages (new look, 2026-10-07) ---------------------- */
/* Owner-side only. The public chat widget (.ofm-agent-*) and the Test Station
   frame show the member's public page and are not themed. */

/* Tabs */
body.ui-v4 .agent-subnav { background: var(--card-fill-2); border: 1px solid var(--ui-line); box-shadow: inset 0 1px 0 var(--card-shine); }
body.ui-v4 .agent-subnav-link { color: var(--ink-muted); font-weight: 600; }
body.ui-v4 .agent-subnav-link:hover { background: rgba(29, 226, 238, 0.1); color: var(--ink-head); }
body.ui-v4 .agent-subnav-link.is-active { background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }

/* Setup form fields and "Important" notes */
body.ui-v4 .agent-setup-form .brand-guide-field {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-default) border-box;
    box-shadow: var(--card-lift);
}
body.ui-v4 .agent-important-note,
body.ui-v4 .agent-important-field {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-warm) border-box;
}
body.ui-v4 .agent-important-note { color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .agent-important-note strong,
html[data-theme="light"] body.ui-v4 .agent-important-badge,
html[data-theme="light"] body.ui-v4 .agent-product-card-warning strong { color: #8a5a06; }
html[data-theme="light"] body.ui-v4 .agent-important-badge { background: rgba(255, 195, 107, 0.2); border-color: rgba(190, 130, 20, 0.45); }

/* Chips and the on/off switch */
body.ui-v4 .agent-tone-chip { border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); }
body.ui-v4 .agent-tone-chip.is-active { border-color: transparent; background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }
body.ui-v4 .agent-enable-knob { background: var(--card-fill-2); border-color: var(--ui-line); }
html[data-theme="light"] body.ui-v4 .agent-enable-knob::after { background: #9db7bf; }
body.ui-v4 .agent-enable-switch input:checked + .agent-enable-knob { background: var(--btn); border-color: transparent; }
body.ui-v4 .agent-enable-switch input:checked + .agent-enable-knob::after { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
body.ui-v4 select,
body.ui-v4 .agent-budget-topup-select { color-scheme: inherit; }

/* Tokens: usage and stats */
body.ui-v4 .agent-token-stats { border-top-color: var(--ui-line); }
body.ui-v4 .agent-stat-card {
    border: 1px solid var(--ui-line);
    background: var(--card-fill-2);
    box-shadow: inset 0 1px 0 var(--card-shine);
    border-radius: 16px;
}
body.ui-v4 .agent-token-stats-label,
body.ui-v4 .agent-stat-label,
body.ui-v4 .agent-stat-sub,
body.ui-v4 .agent-budget-title,
body.ui-v4 .agent-budget-pct,
body.ui-v4 .agent-budget-footer,
body.ui-v4 .agent-budget-topup-empty,
body.ui-v4 .agent-budget-topup-label,
body.ui-v4 .agent-budget-hint,
body.ui-v4 .agent-budget-purchase-label { color: var(--ink-muted); }
body.ui-v4 .agent-stat-primary { color: var(--ink-head); }
body.ui-v4 .agent-stat-divider { background: var(--ui-line); }
body.ui-v4 .agent-budget-track { background: var(--card-fill-2); border: 1px solid var(--ui-line); }
body.ui-v4 .agent-budget-fill { background: linear-gradient(90deg, #1de2ee, #48ffd1); }
body.ui-v4 .agent-budget-topup,
body.ui-v4 .agent-budget-total { color: var(--accent); }
body.ui-v4 .agent-budget-topup-select { background: var(--card-fill-2); border: 1px solid var(--ui-line); color: var(--ink); border-radius: 10px; }
body.ui-v4 .agent-budget-topup-btn,
body.ui-v4 .agent-topup-modal-ok { background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); border-radius: 999px; }
html[data-theme="light"] body.ui-v4 .agent-topup-modal { background: rgba(190, 220, 228, 0.6); }
body.ui-v4 .agent-topup-modal-box {
    border: 1.5px solid transparent;
    background: linear-gradient(165deg, var(--app-bg), var(--app-bg)) padding-box, var(--border-money) border-box;
    box-shadow: var(--card-lift);
}
body.ui-v4 .agent-topup-modal-title,
body.ui-v4 .agent-topup-modal-body strong { color: var(--ink-head); }
body.ui-v4 .agent-topup-modal-body { color: var(--ink-muted); }
body.ui-v4 .agent-topup-modal-cancel { color: var(--ink); border-color: var(--ui-line); border-radius: 999px; }

/* Test Station call-to-action and preview */
body.ui-v4 .agent-preview-test-cta,
body.ui-v4 .agent-preview-frame {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box;
    box-shadow: var(--card-lift);
}
body.ui-v4 .agent-preview-test-cta-text,
body.ui-v4 .agent-test-station-hint,
body.ui-v4 .agent-test-station-token-counter { color: var(--ink-muted); }
body.ui-v4 .agent-test-station-token-counter strong { color: var(--ink-head); }
body.ui-v4 .agent-preview-bubble--agent,
body.ui-v4 .agent-preview-bubble--visitor { color: var(--ink); }
body.ui-v4 .agent-test-station-frame-wrap { border-color: var(--ui-line); box-shadow: var(--card-lift); }

/* Q&A and products */
body.ui-v4 .agent-kb-editor,
body.ui-v4 .agent-kb-item,
body.ui-v4 .agent-product-item,
body.ui-v4 .agent-unanswered-panel,
body.ui-v4 .agent-leads-item,
body.ui-v4 .agent-product-modal-card {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-default) border-box;
    box-shadow: var(--card-lift);
    color: var(--ink);
}
body.ui-v4 .agent-product-item.needs-attention {
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-warm) border-box;
}
html[data-theme="light"] body.ui-v4 .agent-product-modal-card { background: linear-gradient(165deg, #ffffff, #eef9fb) padding-box, var(--border-default) border-box; }
html[data-theme="light"] body.ui-v4 .agent-product-modal-backdrop { background: rgba(190, 220, 228, 0.6); }
body.ui-v4 .agent-kb-editor-title,
body.ui-v4 .agent-kb-q,
body.ui-v4 .agent-unanswered-head h2,
body.ui-v4 .agent-unanswered-item p,
body.ui-v4 .agent-leads-name { color: var(--ink-head); }
body.ui-v4 .agent-kb-a,
body.ui-v4 .agent-kb-priority,
body.ui-v4 .agent-product-toolbar p,
body.ui-v4 .agent-kb-toolbar p,
body.ui-v4 .agent-product-section p,
body.ui-v4 .agent-product-resource-head label,
body.ui-v4 .agent-product-testimonial-checks label,
body.ui-v4 .agent-unanswered-head p,
body.ui-v4 .agent-unanswered-meta,
body.ui-v4 .agent-unanswered-item span,
body.ui-v4 .agent-product-kind,
body.ui-v4 .agent-leads-time,
body.ui-v4 .agent-leads-preview,
body.ui-v4 .agent-leads-meta,
body.ui-v4 .agent-transcript-who { color: var(--ink-muted); }
body.ui-v4 .agent-kb-chip--muted { background: var(--card-fill-2); color: var(--ink-muted); }
body.ui-v4 .agent-kb-delete-btn { color: var(--bad); border-color: rgba(220, 80, 80, 0.4); }
body.ui-v4 .agent-product-section,
body.ui-v4 .agent-product-resource,
body.ui-v4 .agent-product-testimonial,
body.ui-v4 .agent-unanswered-item,
body.ui-v4 .agent-unanswered-excerpt,
body.ui-v4 .agent-transcript { border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); }
body.ui-v4 .agent-product-modal-close { border-color: var(--ui-line); background: var(--card-fill-2); color: var(--ink); }
html[data-theme="light"] body.ui-v4 .agent-product-chip,
html[data-theme="light"] body.ui-v4 .agent-product-resource-chip,
html[data-theme="light"] body.ui-v4 .agent-unanswered-excerpt strong { color: #0b5f6c; background: rgba(29, 226, 238, 0.14); }
html[data-theme="light"] body.ui-v4 .agent-product-card-warning { background: rgba(255, 195, 107, 0.14); border-color: rgba(190, 130, 20, 0.4); color: var(--ink); }
html[data-theme="light"] body.ui-v4 .agent-product-card-ready { color: #0d6b46; background: rgba(31, 185, 135, 0.1); border-color: rgba(19, 138, 90, 0.35); }

/* Leads */
body.ui-v4 .agent-leads-item.is-active {
    background: linear-gradient(135deg, rgba(29, 226, 238, 0.16), transparent) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box;
}
html[data-theme="light"] body.ui-v4 .agent-leads-contacted { color: #138a5a; }
html[data-theme="light"] body.ui-v4 .agent-leads-detail .agent-leads-contacts a { color: #078f9c; }
body.ui-v4 .agent-transcript-msg--agent .agent-transcript-body { background: rgba(29, 226, 238, 0.12); border-color: rgba(29, 226, 238, 0.25); color: var(--ink); }
body.ui-v4 .agent-transcript-msg--visitor .agent-transcript-body { color: var(--ink); }
/* Chips and empty panel (Content Generator; also used by the Leads inbox) */
body.ui-v4 .content-chip { border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); }
body.ui-v4 .content-chip:hover { border-color: #1de2ee; color: var(--ink-head); }
body.ui-v4 .content-chip.is-active { border-color: transparent; background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }
html[data-theme="light"] body.ui-v4 .content-chip-fav { color: #8a5a06; border-color: rgba(190, 130, 20, 0.45); }
html[data-theme="light"] body.ui-v4 .content-chip-fav.is-active { color: #6b3a06; background: linear-gradient(180deg, #ffe2a8, #f2b54a); }
body.ui-v4 .content-selected-empty { border-color: var(--rule); color: var(--ink-muted); background: transparent; }

/* ---- Content Generator / Today's Prompt (new look, 2026-10-07) ----------- */
body.ui-v4 .content-daily-banner {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box;
    box-shadow: var(--card-lift);
    color: var(--ink-head);
}
body.ui-v4 .content-daily-eyebrow,
body.ui-v4 .content-daily-cta,
body.ui-v4 .content-selected-cat { color: var(--accent); }
body.ui-v4 .content-search input[type="search"] { border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); }
body.ui-v4 .content-search input[type="search"]::placeholder { color: var(--ink-muted); }
body.ui-v4 .content-lib-item,
body.ui-v4 .content-selected {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-default) border-box;
    box-shadow: var(--card-lift);
    color: var(--ink);
}
body.ui-v4 .content-lib-item.is-active,
body.ui-v4 .content-selected {
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box;
}
body.ui-v4 .content-lib-item h3,
body.ui-v4 .content-selected h2 { color: var(--ink-head); }
body.ui-v4 .content-lib-item p,
body.ui-v4 .content-lib-item-head,
body.ui-v4 .content-lib-cat,
body.ui-v4 .content-selected-platforms,
body.ui-v4 .content-selected-summary,
body.ui-v4 .content-empty { color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .content-lib-badge { background: rgba(29, 226, 238, 0.14); color: #0b5f6c; }
html[data-theme="light"] body.ui-v4 .content-lib-featured { color: #138a5a; }
html[data-theme="light"] body.ui-v4 .content-lib-fav,
html[data-theme="light"] body.ui-v4 .content-fav-btn,
html[data-theme="light"] body.ui-v4 .content-fav-btn.is-favourited { color: #8a5a06; }
body.ui-v4 .content-fav-btn { background: var(--card-fill-2); }
html[data-theme="light"] body.ui-v4 .content-fav-btn.is-favourited { background: linear-gradient(180deg, #ffe2a8, #f2b54a); color: #5e3605; }
html[data-theme="light"] body.ui-v4 .content-missing { background: rgba(255, 195, 107, 0.16); border-color: rgba(190, 130, 20, 0.45); color: #6b4504; }
html[data-theme="light"] body.ui-v4 .content-missing a { color: #8a5a06; }
body.ui-v4 .content-open-btn {
    border: 1px solid var(--ui-line);
    background: linear-gradient(90deg, var(--card-fill-2), transparent);
    box-shadow: inset 0 1px 0 var(--card-shine);
    color: var(--ink);
}
/* The "READY" chip is absolutely positioned inside the prompt card; without a
   positioned card it floated to the top of the page behind the avatar. */
.brand-guide-ai-card { position: relative; }
.content-rendered-card > .brand-guide-ai-chip { top: auto; bottom: 10px; }

/* ---- My Shop, seller side (new look, 2026-10-07) -------------------------- */
/* Shop styles read the older shared tokens; inside the shop shell they point
   at the theme. The public storefront is untouched (seller's own palette). */
body.ui-v4 .shop-shell {
    --surface: var(--card-fill-2);
    --line: var(--ui-line);
    --text-main: var(--ink-head);
    --text: var(--ink-head);
    --text-soft: var(--ink);
    --text-muted: var(--ink-muted);
    --input-bg: var(--card-fill-2);
    --primary: var(--accent);
    --links-soft: var(--ink-muted);
}
html[data-theme="light"] body.ui-v4 .shop-shell {
    --info-bg: rgba(31, 185, 135, 0.12);
    --info-line: rgba(19, 138, 90, 0.4);
    --info-text: #0d6b46;
    --error-bg: rgba(194, 59, 59, 0.08);
    --error-line: rgba(194, 59, 59, 0.4);
    --error-text: #a02c2c;
}
body.ui-v4 .shop-stat { border-radius: 16px; box-shadow: inset 0 1px 0 var(--card-shine); }
body.ui-v4 .shop-product-item,
body.ui-v4 .shop-settings-card {
    border: 1.5px solid transparent;
    border-radius: 22px;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-default) border-box;
    box-shadow: var(--card-lift);
}
html[data-theme="light"] body.ui-v4 .shop-pill--special,
html[data-theme="light"] body.ui-v4 .shop-product-flag { color: #8a5a06; border-color: rgba(190, 130, 20, 0.5); background: rgba(255, 195, 107, 0.2); }
html[data-theme="light"] body.ui-v4 .shop-product-warn { background: rgba(255, 195, 107, 0.14); border-color: rgba(190, 130, 20, 0.4); }
body.ui-v4 .shop-tabs { border-bottom-color: var(--ui-line); }
body.ui-v4 .shop-tab.is-active { background: var(--card-fill-2); border-color: var(--ui-line); color: var(--ink-head); }
body.ui-v4 .shop-sales-table th { border-bottom-color: var(--ui-line); }
body.ui-v4 .shop-sales-table td { border-bottom-color: var(--ui-line); color: var(--ink); }
body.ui-v4 .shop-upload-input { color: var(--ink-muted); }
body.ui-v4 .shop-upload-input::file-selector-button { background: var(--card-fill-2); color: var(--ink); border-color: var(--ui-line); }
body.ui-v4 .shop-toggle input { accent-color: #0aa6b2; }

/* ---- Settings (all tabs) and Support (new look, 2026-10-07) -------------- */
body.ui-v4 .settings-eyebrow { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
body.ui-v4 .settings-title,
body.ui-v4 .settings-section-title { color: var(--ink-head); }
body.ui-v4 .settings-section-help,
body.ui-v4 .settings-field label,
body.ui-v4 .settings-field-label,
body.ui-v4 .settings-field-hint,
body.ui-v4 .settings-cancel { color: var(--ink-muted); }
body.ui-v4 .settings-cancel:hover { color: var(--ink-head); }
body.ui-v4 .settings-tabs { background: var(--card-fill-2); border: 1px solid var(--ui-line); box-shadow: inset 0 1px 0 var(--card-shine); }
body.ui-v4 .settings-tab { color: var(--ink-muted); font-weight: 600; }
body.ui-v4 .settings-tab:hover { background: rgba(29, 226, 238, 0.1); color: var(--ink-head); }
body.ui-v4 .settings-tab.is-active { background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }
body.ui-v4 .settings-tab-soon { background: var(--card-fill-2); border-color: var(--ui-line); color: var(--ink-muted); }
body.ui-v4 .settings-body {
    border: 1.5px solid transparent;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-default) border-box;
    box-shadow: var(--card-lift);
    color: var(--ink);
}
body.ui-v4 .settings-section-block { border: 1px solid var(--ui-line); background: var(--card-fill-2); }
body.ui-v4 .settings-section-block legend { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
body.ui-v4 .settings-field input[type="text"],
body.ui-v4 .settings-field input[type="email"],
body.ui-v4 .settings-field input[type="tel"],
body.ui-v4 .settings-field input[type="number"],
body.ui-v4 .settings-field select { border: 1px solid var(--ui-line); background-color: var(--card-fill-2); color: var(--ink); color-scheme: inherit; }
body.ui-v4 .settings-field input:focus,
body.ui-v4 .settings-field select:focus { border-color: #1de2ee; box-shadow: 0 0 0 3px rgba(29, 226, 238, 0.2); }
body.ui-v4 .settings-radio,
body.ui-v4 .settings-toggle-row,
body.ui-v4 .settings-company-row { border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); box-shadow: inset 0 1px 0 var(--card-shine); }
body.ui-v4 .settings-radio:has(input:checked),
body.ui-v4 .settings-toggle-row:has(input:checked) { border-color: #1de2ee; box-shadow: 0 0 0 1px rgba(29, 226, 238, 0.35), inset 0 1px 0 var(--card-shine); }
body.ui-v4 .settings-radio input,
body.ui-v4 .settings-toggle-row input,
body.ui-v4 .settings-company-row input { accent-color: #0aa6b2; }
body.ui-v4 .settings-submit { border: 0; border-radius: 999px; background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }
body.ui-v4 .settings-submit:hover { filter: brightness(1.06); border: 0; box-shadow: var(--btn-shadow); }
html[data-theme="light"] body.ui-v4 .settings-badge { color: #0d6b46; background: rgba(31, 185, 135, 0.12); border-color: rgba(19, 138, 90, 0.4); }
html[data-theme="light"] body.ui-v4 .settings-error { color: #8a2323; background: rgba(194, 59, 59, 0.08); }
html[data-theme="light"] body.ui-v4 .settings-company-link { color: #078f9c; }

/* Support */
body.ui-v4.support-page {
    --text-soft: var(--ink-muted);
    --text-muted: var(--ink-muted);
    --line: var(--ui-line);
    --surface: var(--card-fill-2);
    --primary: #0aa6b2;
    --primary-2: var(--accent);
}
body.ui-v4 .support-hero h1 { color: var(--ink-head); }
body.ui-v4 .support-kicker { color: var(--accent); font-weight: 600; }
body.ui-v4 .support-panel {
    border: 1.5px solid transparent;
    border-radius: 22px;
    background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-default) border-box;
    box-shadow: var(--card-lift);
}
body.ui-v4 .support-primary { background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box; }
body.ui-v4 .support-primary h2,
body.ui-v4 .support-section h2,
body.ui-v4 .support-contact h3 { color: var(--ink-head); }
body.ui-v4 .support-link {
    border: 1px solid var(--ui-line);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--card-fill-2), transparent);
    box-shadow: inset 0 1px 0 var(--card-shine);
    color: var(--ink);
    font-weight: 700;
}
body.ui-v4 .support-primary-actions .support-link:first-child { border: 0; background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }
body.ui-v4 .support-contact,
body.ui-v4 .support-empty { border-radius: 16px; border-color: var(--ui-line); background: var(--card-fill-2); color: var(--ink-muted); }
body.ui-v4 .support-note { color: var(--ink); background: rgba(29, 226, 238, 0.1); }

/* ---- Shared pop-ups: profile photo, upgrade, PRO feature (2026-10-07) ---- */
body.ui-v4 .profile-modal-card,
body.ui-v4 .upgrade-modal-card,
body.ui-v4 .pro-feature-modal-card {
    border: 1.5px solid transparent;
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        linear-gradient(165deg, var(--app-bg), var(--app-bg-2)) padding-box,
        var(--border-default) border-box;
    box-shadow: var(--card-lift), 0 30px 60px -20px rgba(0, 0, 0, 0.35);
    color: var(--ink);
}
body.ui-v4 .pro-feature-modal-card {
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        linear-gradient(165deg, var(--app-bg), var(--app-bg-2)) padding-box,
        var(--border-money) border-box;
}
html[data-theme="light"] body.ui-v4 .profile-modal-backdrop,
html[data-theme="light"] body.ui-v4 .upgrade-modal-backdrop,
html[data-theme="light"] body.ui-v4 .pro-feature-modal-backdrop { background: rgba(190, 220, 228, 0.62); }
body.ui-v4 .profile-modal-eyebrow,
body.ui-v4 .upgrade-modal-eyebrow {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent);
}
html[data-theme="light"] body.ui-v4 .pro-feature-modal-eyebrow { color: #8a5a06; }
body.ui-v4 .profile-modal-title,
body.ui-v4 .upgrade-modal-title { color: var(--ink-head); }
html[data-theme="light"] body.ui-v4 .pro-feature-modal-title { background: linear-gradient(120deg, #0f3443 0%, #0b5f6c 100%); -webkit-background-clip: text; background-clip: text; }
body.ui-v4 .pro-feature-modal-message { color: var(--ink-muted); }
body.ui-v4 .profile-modal-avatar { border: 3px solid #ffffff; background: var(--card-fill-2); box-shadow: 0 0 0 1.5px rgba(29, 226, 238, 0.6), var(--card-lift); }
body.ui-v4 .profile-modal-btn,
body.ui-v4 .upgrade-modal-btn,
body.ui-v4 .pro-feature-modal-btn {
    min-height: 46px;
    border: 1px solid var(--ui-line);
    background: linear-gradient(90deg, var(--card-fill-2), transparent);
    box-shadow: inset 0 1px 0 var(--card-shine);
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
body.ui-v4 .profile-modal-btn-primary,
body.ui-v4 .upgrade-modal-btn-primary {
    border: 0;
    background: var(--btn);
    box-shadow: var(--btn-shadow);
    color: #fff;
}
body.ui-v4 .profile-modal-btn-danger { color: var(--bad); border-color: rgba(220, 80, 80, 0.45); background: transparent; }
body.ui-v4 .pro-feature-modal-btn--primary { border: 0; background: linear-gradient(180deg, #ffe2a8, #f2b54a); color: #5e3605; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 22px -10px rgba(190, 120, 20, 0.6); }

/* ---- Content Generator v2: prompt library and builder (2026-10-07) ------- */
.pl-shell { display: grid; gap: 16px; }
.pl-pro-note { margin: 0; color: var(--ink-muted); font-size: 0.9rem; }
.pl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .pl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pl-tile { display: grid; gap: 4px; padding: 14px; text-decoration: none; }
.pl-tile strong { color: var(--ink-head); font-size: 1rem; }
.pl-tile small { color: var(--ink-muted); font-size: 0.8rem; }
.pl-tile.is-active { background: linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box, var(--card-fill) padding-box, var(--border-prompt) border-box; box-shadow: var(--card-lift), 0 0 0 2px rgba(29, 226, 238, 0.35); }

.pl-filters { display: grid; gap: 8px; }
.pl-search input { width: 100%; font: inherit; font-size: 1rem; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); }
.pl-search input::placeholder { color: var(--ink-muted); }
.pl-selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pl-selects select { width: 100%; font: inherit; font-size: 0.85rem; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); color-scheme: inherit; }

.pl-shelf { display: grid; gap: 10px; }
.pl-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-shelf-head h2 { margin: 0; }
.pl-shelf-head a { color: var(--accent); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.pl-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .pl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; text-decoration: none; }
.pl-thumb { flex: none; width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; color: var(--tile-ink); background: var(--tile-bg); border: 1px solid var(--tile-line); }
.pl-thumb.has-img { background: #fff; }
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-thumb .ui-ico { width: 26px; height: 26px; }
.pl-card-body { display: grid; gap: 3px; min-width: 0; }
.pl-card-body strong { color: var(--ink-head); font-size: 0.98rem; line-height: 1.25; }
.pl-card-body small { color: var(--ink-muted); font-size: 0.82rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-copies { color: var(--ink-muted); font-size: 0.72rem; font-family: var(--font-mono); }
.pl-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pl-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); color: var(--ink-muted); background: var(--card-fill-2); border: 1px solid var(--ui-line); }
.pl-badge--image { color: #fff; background: linear-gradient(90deg, #0aa6b2, #3bbfe6); border-color: transparent; }
.pl-badge--trend { color: #5e3605; background: linear-gradient(180deg, #ffe2a8, #f2b54a); border-color: transparent; }
.pl-badge--new { color: var(--good); border-color: currentColor; }
.pl-badge--draft { color: var(--bad); border-color: currentColor; text-transform: none; letter-spacing: 0; }
.pl-fav { color: #e0a020; font-size: 0.9rem; }

.pl-back { color: var(--accent); font-weight: 600; text-decoration: none; }
.pl-detail-head { display: grid; gap: 14px; padding: 14px; }
@media (min-width: 760px) { .pl-detail-head { grid-template-columns: 260px 1fr; align-items: start; } }
.pl-detail-copy { display: grid; gap: 8px; align-content: start; }
.pl-detail-copy h1 { margin: 0; font-size: 1.4rem; line-height: 1.2; color: var(--ink-head); }
.pl-detail-copy p { margin: 0; color: var(--ink-muted); }
.pl-fav-btn { justify-self: start; }
.pl-fav-btn.is-on { color: #8a5a06; border-color: rgba(190, 130, 20, 0.45); }
.pl-sample { display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: center; color: var(--ink-muted); font: inherit; font-size: 0.75rem; }
.pl-sample img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: var(--card-lift); }
.pl-sample.is-empty { cursor: default; min-height: 140px; place-items: center; align-content: center; border: 1px dashed var(--rule); border-radius: 14px; }
.pl-sample.is-empty .ui-ico { width: 32px; height: 32px; color: var(--accent); }
.pl-zoom { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; }
.pl-zoom[hidden] { display: none; }
.pl-zoom img { max-width: 100%; max-height: 100%; border-radius: 12px; }

.pl-builder { display: grid; gap: 0; padding: 4px 16px 16px; }
.pl-group { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--ui-line); }
.pl-group:last-child { border-bottom: 0; }
.pl-group h2 { margin: 0; }
.pl-remember { margin: -6px 0 0; font-size: 0.78rem; color: var(--ink-muted); }
.pl-field { display: grid; gap: 6px; }
.pl-switch { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; cursor: pointer; }
.pl-switch input { width: 20px; height: 20px; accent-color: #0aa6b2; flex: none; }
.pl-value { margin-left: 30px; font: inherit; font-size: 0.95rem; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); }
.pl-hint { margin: 0 0 0 30px; color: var(--ink-muted); font-size: 0.76rem; }
.pl-hint a { color: var(--accent); }
.pl-more .pl-hint { margin-left: 0; }
.pl-opt { display: grid; gap: 6px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pl-chip span { display: inline-flex; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.pl-chip input:checked + span { border-color: transparent; background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }
.pl-chip input:focus-visible + span { outline: 3px solid #1de2ee; outline-offset: 2px; }
.pl-out { width: 100%; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; padding: 12px; border-radius: 14px; border: 1px solid var(--ui-line); background: var(--card-fill-2); color: var(--ink); resize: vertical; }
.pl-out--small { font-family: inherit; font-size: 0.88rem; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-actions .ui-btn { flex: 1 1 160px; }
.ui-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pl-missing { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(220, 150, 30, 0.5); background: rgba(255, 195, 107, 0.14); color: var(--ink); font-size: 0.86rem; }
.pl-missing ul { margin: 6px 0 0; padding-left: 18px; }
.pl-missing a { color: var(--accent); }
.pl-tip { padding: 10px 12px; border-radius: 12px; background: rgba(29, 226, 238, 0.1); color: var(--ink); font-size: 0.84rem; }
.pl-more > summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.pl-more[open] > summary { margin-bottom: 4px; }
.pl-locked { display: grid; gap: 10px; padding: 16px; }
.pl-locked p { margin: 0; color: var(--ink); }
.pl-selects select { font-size: 0.8rem; padding: 9px 6px; text-overflow: ellipsis; }
.pl-logo { display: flex; align-items: center; gap: 12px; margin-left: 30px; }
.pl-logo img { height: 48px; width: auto; max-width: 140px; object-fit: contain; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--ui-line); }
.pl-attach { padding: 10px 12px; border-radius: 12px; border: 1.5px solid #1de2ee; background: rgba(29, 226, 238, 0.1); color: var(--ink); font-size: 0.86rem; }
.pl-attach ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.pl-kit-canvas { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--ui-line); background: #fff; }
.pl-switch--product { gap: 10px; }
.pl-prod-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--ui-line); padding: 2px; flex: none; }
.pl-howto { padding: 14px 0; border-bottom: 1px solid var(--ui-line); }
.pl-howto > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 700; color: var(--ink-head); }
.pl-howto > summary::-webkit-details-marker { display: none; }
.pl-howto[open] > summary .ui-section-chev { transform: rotate(180deg); }
.pl-steps { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: plstep; display: grid; gap: 8px; }
.pl-steps li { counter-increment: plstep; position: relative; padding-left: 36px; color: var(--ink); font-size: 0.9rem; line-height: 1.45; }
.pl-steps li::before { content: counter(plstep); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: #fff; background: var(--btn); box-shadow: var(--btn-shadow); }
.pl-steps b { color: var(--ink-head); }
.pl-tips { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 195, 107, 0.14); border: 1px solid rgba(220, 150, 30, 0.35); font-size: 0.86rem; color: var(--ink); }
.pl-tips ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }

/* Install panel in the new look (Light theme; Dark keeps the original). */
html[data-theme="light"] body.ui-v4 .ofm-install-backdrop { background: rgba(190, 220, 228, 0.62); }
html[data-theme="light"] body.ui-v4 .ofm-install-panel {
    border: 1.5px solid transparent;
    background: linear-gradient(165deg, #ffffff, #eef9fb) padding-box, var(--border-default) border-box;
    box-shadow: 0 -18px 40px -16px rgba(16, 96, 124, 0.35);
    color: var(--ink);
}
html[data-theme="light"] body.ui-v4 .ofm-install-title { color: var(--ink-head); }
html[data-theme="light"] body.ui-v4 .ofm-install-body p { color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .ofm-install-body strong { color: var(--ink-head); }
html[data-theme="light"] body.ui-v4 .ofm-install-steps li { background: var(--card-fill-2); border-color: var(--ui-line); color: var(--ink); }
html[data-theme="light"] body.ui-v4 .ofm-install-step-n { background: rgba(29, 226, 238, 0.16); color: #0b5f6c; }
html[data-theme="light"] body.ui-v4 .ofm-install-step-i { color: #0a9aa6; }
html[data-theme="light"] body.ui-v4 .ofm-install-x { color: var(--ink-muted); }
html[data-theme="light"] body.ui-v4 .ofm-install-icon { background: #01070d; }
html[data-theme="light"] body.ui-v4 .ofm-install-secondary { color: var(--ink); border-color: var(--ui-line); background: transparent; }
body.ui-v4 .ofm-install-primary { background: var(--btn); color: #fff; box-shadow: var(--btn-shadow); }
.ofm-notify-small { margin-top: 10px; font-size: 0.8rem; opacity: 0.8; }

/* ---- My tools: cards that are there because of the member's company ---- */
/* Owner (2026-10-08): company cards should stand out a little more.
   .is-company: a gold label, a stronger warm edge and glow, and a slow shine. */
.home-company-chip {
    position: relative;
    z-index: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffc36b, #ffdc9a);
    color: #4a2c00;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px -6px rgba(190, 120, 10, 0.7);
}
.home-company-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4a2c00; opacity: 0.55; }
.ui-home .home-cc-card.is-company {
    border-width: 2px;
    background:
        linear-gradient(115deg, var(--card-shine) 0%, transparent 38%) padding-box,
        var(--card-fill) padding-box,
        linear-gradient(135deg, #ffb347 0%, #ffd27a 25%, #1de2ee 70%, #48ffd1 100%) border-box;
    box-shadow: var(--card-lift), 0 0 0 4px rgba(255, 195, 107, 0.14), 0 0 30px rgba(255, 179, 71, 0.28);
}
.ui-home .home-cc-card.is-company::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, var(--company-shine, 0.16)) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: home-company-shine 6s ease-in-out infinite;
    pointer-events: none;
}
html[data-theme="light"] body.ui-v4 .home-cc-card.is-company { --company-shine: 0.55; }
@keyframes home-company-shine {
    0% { transform: translateX(-120%); }
    22%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
    .ui-home .home-cc-card.is-company::after { animation: none; display: none; }
}

/* ---- 3-day PRO trial and the plan page (2026-10-08) ---- */
.ui-trial-countdown { display: grid; gap: 8px; padding: 18px 20px; justify-items: start; }
.ui-trial-time { margin: 0; font-weight: 800; font-size: 1.6rem; line-height: 1.15; color: var(--ink-head); font-variant-numeric: tabular-nums; }
.ui-trial-sub { margin: 0; color: var(--ink-muted); max-width: 60ch; }
.plan-page { min-height: 100vh; }
.plan-wrap { width: min(100% - 32px, 760px); margin: 0 auto; padding: 40px 0 56px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.plan-logo { width: 170px; max-width: 60%; }
html[data-theme="light"] .plan-page .plan-logo { filter: brightness(0) saturate(100%); opacity: 0.85; }
.plan-wrap h1 { margin: 0; color: var(--ink-head); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.1; text-wrap: balance; }
.plan-intro { margin: 0; color: var(--ink-muted); max-width: 56ch; line-height: 1.55; }
.plan-flash { margin: 0; color: var(--bad); font-weight: 700; }
.plan-cards { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; text-align: left; margin-top: 8px; }
.plan-card { position: relative; display: grid; gap: 8px; padding: 22px 20px; align-content: start; }
.plan-card h2 { margin: 0; color: var(--ink-head); font-size: 1.15rem; }
.plan-price { margin: 0; font-weight: 800; font-size: 1.5rem; color: var(--ink-head); }
.plan-hint { margin: 0 0 6px; color: var(--ink-muted); line-height: 1.5; }
.plan-badge { justify-self: start; padding: 3px 10px; border-radius: 999px; background: linear-gradient(90deg, #ffc36b, #ffdc9a); color: #4a2c00; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.plan-foot { margin: 8px 0 0; color: var(--ink-muted); font-size: 0.9rem; }
.plan-foot a { color: var(--accent); }
/* Lifetime members: the floating "Upgrade to PRO" button gets the shine. */
.floating-pro-btn.has-shine { overflow: hidden; }
.floating-pro-btn.has-shine::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%);
    transform: translateX(-120%); animation: home-company-shine 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .floating-pro-btn.has-shine::after { display: none; } }

/* The dashboard wallet card already has a Top up button. */
.ui-wallet .ui-month-cta { display: none; }

/* "Become a distributor?" confirm (Standard / Entrepreneur, 2026-10-10) */
.ofm-mode-modal { position: fixed; inset: 0; z-index: 2400; display: grid; place-items: center; padding: 16px; background: rgba(1, 7, 13, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ofm-mode-modal[hidden] { display: none; }
.ofm-mode-modal-card { width: min(440px, 100%); padding: 22px; border-radius: 18px; background: var(--card-fill, #0d2a38); color: var(--ink, #eafaff); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--ui-line, rgba(255,255,255,.1)); }
html[data-theme="light"] .ofm-mode-modal-card { background: #fff; color: #143a47; }
.ofm-mode-modal-card h2 { margin: 0 0 8px; font-size: 1.2rem; color: var(--ink-head, inherit); }
.ofm-mode-modal-card p { margin: 0 0 16px; color: var(--ink-muted, #9db7bf); line-height: 1.5; }
.ofm-mode-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }