/*
    Settings > Partner Sharing (psh-*): the couples hero with the bond, the permissions chain, the institution rail, the
    share cards, the "what your partner sees" stack, the partner's side, the income and split studio, the save dock.
    Colors are the mobile theme keys (the Partner Sharing violet family, the couple accents: user blue, partner amber,
    the settings cards' light-blue fade; #AARRGGBB converted to rgba), light and dark; dark follows the site's
    data-bs-theme="dark" on <html>. The hero follows the design system's recipe (strongest top-left, settling to the
    page color, 1px hue hairline, glass tiles) with the two couple glows layered on top. Nothing animated carries a
    drop shadow.
*/

:root {
    --psh-violet: var(--set-ink);
    --psh-violet-soft: var(--set-icon-bg);
    --psh-violet-line: var(--set-card-border);
    --psh-accent: var(--set-accent);
    --psh-brand: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --psh-user: #2563EB;
    --psh-user-soft: #DBEAFE;
    --psh-partner: #D97706;
    --psh-partner-soft: #FEF3C7;
    --psh-text: var(--set-text);
    --psh-muted: var(--set-muted);
    --psh-light: var(--set-light);
    --psh-card: var(--set-card);
    --psh-card-border: var(--set-card-border);
    --psh-section-bg: var(--set-section-bg);
    --psh-section-border: var(--set-section-border);
    --psh-section-icon: var(--set-icon-bg);
    --psh-glass: rgba(255, 255, 255, .72);
    --psh-glass-border: rgba(255, 255, 255, .9);
    --psh-glass-strong: rgba(255, 255, 255, .92);
    --psh-positive: #16A34A;
    --psh-caution: #B45309;
    --psh-critical: #DC2626;
    --psh-positive-soft: #DCFCE7;
    --psh-caution-soft: #FEF3C7;
    --psh-critical-soft: #FEE2E2;
    --psh-neutral-soft: #EEF0F6;
    --psh-cash: #0D9488;
    --psh-debt: #EF4444;
    --psh-invest: #16A34A;
    --psh-manual: #5A6479;
    --psh-hero-bg: var(--set-hero-bg);
    --psh-hero-border: var(--set-hero-border);
    --psh-rail-bg: var(--set-section-bg);
    --psh-panel-bg: #FFFFFF;
    --psh-shadow: 0 18px 44px -26px rgba(31, 36, 64, .35);
    --psh-focus: var(--set-focus);
    --psh-glow-user: var(--set-glow-user);
    --psh-glow-partner: var(--set-glow-partner);
}

[data-bs-theme="dark"] {
    --psh-brand: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --psh-user: #60A5FA;
    --psh-user-soft: #1E3354;
    --psh-partner: #FBBF24;
    --psh-partner-soft: #45331A;
    --psh-glass: rgba(255, 255, 255, .08);
    --psh-glass-border: rgba(255, 255, 255, .12);
    --psh-glass-strong: rgba(255, 255, 255, .14);
    --psh-positive: #22C55E;
    --psh-caution: #FBBF24;
    --psh-critical: #F87171;
    --psh-positive-soft: rgba(34, 197, 94, .16);
    --psh-caution-soft: rgba(251, 191, 36, .18);
    --psh-critical-soft: rgba(248, 113, 113, .18);
    --psh-neutral-soft: rgba(255, 255, 255, .12);
    --psh-cash: #2DD4BF;
    --psh-debt: #F87171;
    --psh-invest: #34D399;
    --psh-manual: #9AA3B8;
    --psh-panel-bg: #121620;
    --psh-shadow: 0 18px 44px -26px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------------ Page frame */

.psh-page { color: var(--psh-text); }
.psh-page * { box-sizing: border-box; }
.psh-page.has-dock { padding-bottom: 6.5rem; }

.psh-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.psh-head-titles { min-width: 0; max-width: 46rem; }
.psh-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.psh-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.psh-section-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .95rem; font-weight: 700; }
.psh-section-title > i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--set-icon-bg); color: var(--set-icon); font-size: .8rem; }
.psh-section-hint { color: var(--psh-light); font-size: .78rem; }
.psh-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--psh-violet-soft);
    color: var(--psh-violet);
    font-size: .72rem;
    font-weight: 800;
}

.psh-kicker { margin: 0 0 .55rem; color: var(--psh-light); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.psh-hint { margin: .4rem 0 0; color: var(--psh-muted); font-size: .8rem; }
.psh-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--psh-violet);
    font-weight: 600;
    font-size: .84rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.psh-error, .psh-inline-warn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--psh-card-border);
    border-left: 4px solid var(--psh-critical);
    background: linear-gradient(135deg, var(--psh-critical-soft) 0%, var(--psh-card) 70%);
    color: var(--psh-text);
    font-size: .86rem;
}

.psh-error i { color: var(--psh-critical); }
.psh-inline-warn { margin: .9rem 0 0; border-left-color: var(--psh-caution); background: linear-gradient(135deg, var(--psh-caution-soft) 0%, var(--psh-card) 70%); }
.psh-inline-warn i { color: var(--psh-caution); }
.psh-inline-warn.is-info { border-left-color: var(--psh-user); background: linear-gradient(135deg, var(--psh-user-soft) 0%, var(--psh-card) 70%); }
.psh-inline-warn.is-info i { color: var(--psh-user); }

/* ------------------------------------------------------------------ Buttons and switches */

.psh-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
    white-space: nowrap;
}

.psh-btn:focus-visible { outline: none; box-shadow: var(--psh-focus); }
.psh-btn:disabled { opacity: .55; cursor: not-allowed; }
.psh-btn:not(:disabled):hover { transform: translateY(-1px); }
.psh-btn i { font-size: .9em; }

.psh-btn-primary {
    color: #fff;
    background: var(--psh-accent);
    box-shadow: 0 10px 22px -14px hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .7);
}

.psh-btn-primary:not(:disabled):hover { filter: saturate(1.1) brightness(1.04); color: #fff; }
.psh-btn-glass { color: var(--psh-text); background: var(--psh-glass); border-color: var(--psh-card-border); backdrop-filter: blur(10px); }
.psh-btn-glass:not(:disabled):hover { background: var(--psh-glass-strong); color: var(--psh-text); }
.psh-spin { animation: psh-spin 1s linear infinite; }
@keyframes psh-spin { to { transform: rotate(360deg); } }

.psh-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-card);
    color: var(--psh-muted);
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.psh-chip-btn i { font-size: .7rem; }
.psh-chip-btn:not(:disabled):hover { color: var(--psh-violet); border-color: var(--psh-violet); transform: translateY(-1px); }
.psh-chip-btn:disabled { opacity: .5; cursor: not-allowed; }
.psh-chip-btn.is-active { background: var(--psh-violet); border-color: var(--psh-violet); color: var(--set-card); }
.psh-chip-btn.is-quiet { border-style: dashed; }
.psh-chip-btn.is-accent { color: var(--psh-violet); border-color: color-mix(in srgb, var(--psh-violet) 45%, var(--psh-card-border)); }
.psh-chip-btn.is-accent.is-active { background: var(--psh-violet); border-color: var(--psh-violet); color: var(--set-card); }
.psh-chip-btn:focus-visible { outline: none; box-shadow: var(--psh-focus); }

/* The switch (a sized, keyboard-friendly checkbox) */
.psh-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 44px; height: 26px; }
.psh-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.psh-switch input:disabled { cursor: not-allowed; }
.psh-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--psh-neutral-soft);
    border: 1px solid var(--psh-card-border);
    transition: background-color .2s ease, border-color .2s ease;
}

.psh-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.psh-switch input:checked + .psh-switch-track { background: var(--psh-accent); border-color: var(--psh-accent); }
.psh-switch input:checked + .psh-switch-track .psh-switch-thumb { transform: translateX(18px); }
.psh-switch input:focus-visible + .psh-switch-track { box-shadow: var(--psh-focus); }
.psh-switch input:disabled + .psh-switch-track { opacity: .5; }

/* ------------------------------------------------------------------ Hero */

.psh-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1.6rem 1.6rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--psh-hero-border);
    border-radius: 20px;
    background: var(--psh-hero-bg);
    box-shadow: var(--psh-shadow);
}

.psh-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.psh-glow { position: absolute; inset: 0; }
.psh-glow-user { background: var(--psh-glow-user); }
.psh-glow-partner { background: var(--psh-glow-partner); }
.psh-blob {
    position: absolute;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    animation: psh-drift 28s ease-in-out infinite alternate;
}

.psh-blob-a { top: -22rem; left: 20%; background: radial-gradient(circle, rgba(148, 163, 184, .35), transparent 62%); }
.psh-blob-b { bottom: -26rem; right: -10rem; background: radial-gradient(circle, rgba(96, 165, 250, .3), transparent 62%); animation-delay: -12s; animation-duration: 34s; }
[data-bs-theme="dark"] .psh-blob { opacity: .35; }
@keyframes psh-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-5rem, 3rem, 0) scale(1.1); } }

.psh-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(91, 100, 117, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(91, 100, 117, .07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
}

[data-bs-theme="dark"] .psh-grid { background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px); }

.psh-hero-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .95fr); gap: 1.5rem; align-items: center; }

.psh-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--psh-glass);
    border: 1px solid var(--psh-glass-border);
    color: var(--set-icon);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.psh-hero-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .8rem 0 .35rem;
    font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.psh-hero-dot {
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--psh-light);
    color: var(--psh-light);
    animation: psh-pulse 2.4s ease-in-out infinite;
}

.psh-hero-dot.is-positive { background: var(--psh-positive); color: var(--psh-positive); }
.psh-hero-dot.is-caution { background: var(--psh-caution); color: var(--psh-caution); }
@keyframes psh-pulse {
    0%, 100% { box-shadow: 0 0 0 .25rem color-mix(in srgb, currentColor 18%, transparent); }
    50% { box-shadow: 0 0 0 .55rem color-mix(in srgb, currentColor 6%, transparent); }
}

.psh-hero-sub { margin: 0 0 .9rem; color: var(--psh-muted); font-size: .92rem; max-width: 42rem; }
.psh-hero-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }

.psh-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--psh-glass-border);
    background: var(--psh-glass);
    color: var(--psh-muted);
    font-size: .76rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

.psh-pill.is-on, .psh-pill.is-positive { color: var(--psh-positive); }
.psh-pill.is-off { color: var(--psh-light); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--psh-light) 50%, transparent); }
.psh-pill.is-caution { color: var(--psh-caution); }
.psh-pill.is-partner { color: var(--psh-partner); }

.psh-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.psh-hero-note { color: var(--psh-light); font-size: .78rem; }
.psh-hero-note i { margin-right: .3rem; color: var(--psh-violet); }

/* The master switch: a glass card with a big track */
.psh-master {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0;
    padding: .7rem .95rem .7rem .8rem;
    border-radius: 16px;
    border: 1px solid var(--psh-glass-border);
    background: var(--psh-glass);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.psh-master:hover { border-color: color-mix(in srgb, var(--psh-violet) 50%, var(--psh-glass-border)); }
.psh-master input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.psh-master-track {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 32px;
    border-radius: 999px;
    background: var(--psh-neutral-soft);
    border: 1px solid var(--psh-card-border);
    transition: background-color .25s ease, border-color .25s ease;
}

.psh-master-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.psh-master.is-on .psh-master-track { background: linear-gradient(90deg, #2563EB, #D97706); border-color: transparent; }
.psh-master.is-on .psh-master-thumb { transform: translateX(26px); }
.psh-master input:focus-visible ~ .psh-master-track { box-shadow: var(--psh-focus); }
.psh-master-text { display: grid; gap: .1rem; min-width: 0; }
.psh-master-text strong { font-size: .95rem; }
.psh-master-text span { color: var(--psh-muted); font-size: .78rem; }

/* The bond: still avatars at the arc ends, bank coins travelling between them. Everything is laid out in the SVG's
   440x260 box (the avatars at 11.82% / 88.18%, 50%) and sized off the container width, so it scales as one piece. */
.psh-bond {
    --psh-bond-av: clamp(44px, 16cqi, 74px);
    position: relative;
    width: min(100%, 460px);
    aspect-ratio: 440 / 260;
    margin: 0 auto;
    justify-self: end;
    container-type: inline-size;
}

.psh-bond-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.psh-arc { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 7; opacity: .35; transition: opacity .3s ease; }
.psh-arc.is-out { stroke: url(#psh-arc-out); }
.psh-arc.is-in { stroke: url(#psh-arc-in); }
.psh-arc.is-active { opacity: .55; stroke-dasharray: 2 6; }

.psh-coin { opacity: 0; }
.psh-coin-ring { fill: #fff; stroke: var(--psh-user); stroke-width: 2.5; filter: drop-shadow(0 3px 5px rgba(37, 99, 235, .35)); }
.psh-coin.is-in .psh-coin-ring { stroke: var(--psh-partner); filter: drop-shadow(0 3px 5px rgba(217, 119, 6, .35)); }
.psh-coin-initials { fill: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }

.psh-bond-side { position: absolute; top: 50%; z-index: 1; display: block; width: var(--psh-bond-av); height: var(--psh-bond-av); transform: translate(-50%, -50%); }
.psh-bond-side.is-user { left: 11.82%; }
.psh-bond-side.is-partner { left: 88.18%; }
.psh-bond .psh-bond-avatar { --psh-av: var(--psh-bond-av) !important; }
.psh-bond-name {
    position: absolute;
    top: calc(100% + .55rem);
    left: 50%;
    max-width: 6.5rem;
    transform: translateX(-50%);
    color: var(--psh-muted);
    font-size: .74rem;
    font-weight: 700;
    text-align: center;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--psh-glass-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psh-bond-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--psh-glass-strong);
    border: 1px solid var(--psh-glass-border);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    backdrop-filter: blur(8px);
}

.psh-bond-label.is-out { top: 0; color: var(--psh-user); }
.psh-bond-label.is-in { bottom: 0; color: var(--psh-partner); }

@container (max-width: 340px) {
    .psh-bond-label { padding: .18rem .5rem; font-size: .64rem; }
    .psh-bond-name { top: calc(100% + .4rem); font-size: .68rem; max-width: 5rem; }
}

/* Avatars */
.psh-avatar {
    --psh-av: 64px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--psh-av);
    height: var(--psh-av);
    border-radius: 50%;
    overflow: hidden;
    background: var(--psh-card);
    color: var(--psh-user);
    font-weight: 800;
    font-size: calc(var(--psh-av) * .36);
    box-shadow: 0 0 0 3px var(--psh-card), 0 0 0 5px var(--psh-user);
}

.psh-avatar.is-partner { color: var(--psh-partner); box-shadow: 0 0 0 3px var(--psh-card), 0 0 0 5px var(--psh-partner); }
.psh-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psh-avatar .psh-avatar-initials { background: linear-gradient(135deg, var(--psh-user-soft), var(--psh-card)); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.psh-avatar.is-partner .psh-avatar-initials { background: linear-gradient(135deg, var(--psh-partner-soft), var(--psh-card)); }
.psh-avatar > i { font-size: calc(var(--psh-av) * .4); color: var(--psh-light); }
.psh-bond-avatar { box-shadow: 0 0 0 4px var(--psh-card), 0 0 0 7px var(--psh-user), 0 18px 30px -16px rgba(37, 99, 235, .6); }
.psh-bond-avatar.is-partner { box-shadow: 0 0 0 4px var(--psh-card), 0 0 0 7px var(--psh-partner), 0 18px 30px -16px rgba(217, 119, 6, .6); }

/* The six numbers */
.psh-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; margin-top: 1.3rem; }
.psh-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .8rem .9rem;
    border-radius: 14px;
    background: var(--psh-glass);
    border: 1px solid var(--psh-glass-border);
    backdrop-filter: blur(10px);
    animation: psh-rise .5s cubic-bezier(.2, .8, .2, 1) both;
}

.psh-stat:nth-child(2) { animation-delay: .05s; }
.psh-stat:nth-child(3) { animation-delay: .1s; }
.psh-stat:nth-child(4) { animation-delay: .15s; }
.psh-stat:nth-child(5) { animation-delay: .2s; }
.psh-stat:nth-child(6) { animation-delay: .25s; }
@keyframes psh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.psh-stat-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: .3rem;
    border-radius: 10px;
    background: var(--psh-violet-soft);
    color: var(--psh-violet);
    font-size: .85rem;
}

.psh-stat.is-positive .psh-stat-glyph { background: var(--psh-positive-soft); color: var(--psh-positive); }
.psh-stat.is-caution .psh-stat-glyph { background: var(--psh-caution-soft); color: var(--psh-caution); }
.psh-stat.is-cash .psh-stat-glyph { background: color-mix(in srgb, var(--psh-cash) 18%, transparent); color: var(--psh-cash); }
.psh-stat.is-debt .psh-stat-glyph { background: color-mix(in srgb, var(--psh-debt) 18%, transparent); color: var(--psh-debt); }
.psh-stat.is-partner .psh-stat-glyph { background: var(--psh-partner-soft); color: var(--psh-partner); }
.psh-stat-label { color: var(--psh-light); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.psh-stat-value { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.psh-stat-caption { color: var(--psh-muted); font-size: .74rem; }

.psh-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1rem 0 0; padding: .9rem 0 0; list-style: none; border-top: 1px solid var(--psh-glass-border); }
.psh-facts li { display: flex; gap: .5rem; align-items: center; color: var(--psh-muted); font-size: .78rem; }
.psh-facts li i { color: var(--psh-violet); }
.psh-facts strong { color: var(--psh-text); margin-right: .25rem; }

/* ------------------------------------------------------------------ The permissions chain */

.psh-perms {
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: 20px;
    border: 1px solid var(--psh-section-border);
    background: var(--psh-section-bg);
}

.psh-perm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.25fr); align-items: stretch; }
.psh-perm-pair { display: grid; grid-template-rows: 1fr 1fr; gap: .6rem; }
.psh-perm {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-card);
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease, opacity .2s ease;
}

.psh-perm:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--psh-violet) 30%, var(--psh-card-border)); }
.psh-perm.is-locked { opacity: .72; }
.psh-perm.is-locked .psh-perm-glyph { background: var(--psh-neutral-soft); color: var(--psh-light); }
.psh-perm.is-leaf { flex-direction: row; align-items: center; gap: .85rem; padding: .85rem 1rem; }
.psh-perm-body { display: grid; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.psh-perm-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.psh-perm-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--set-icon-bg);
    color: var(--set-icon);
    font-size: 1rem;
    transition: background-color .2s ease, color .2s ease;
}

.psh-perm.is-on .psh-perm-glyph { background: var(--set-ink); color: var(--set-card); }
.psh-perm-title { font-size: 1rem; font-weight: 700; }
.psh-perm.is-root .psh-perm-title { margin-top: .3rem; }
.psh-perm.is-leaf .psh-perm-title { font-size: .94rem; }
.psh-perm-desc { color: var(--psh-muted); font-size: .8rem; line-height: 1.4; }
.psh-perm.is-leaf .psh-perm-desc { font-size: .76rem; }
.psh-perm-count { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .5rem; color: var(--psh-light); font-size: .76rem; font-weight: 700; }
.psh-perm.is-leaf .psh-perm-count { padding-top: .2rem; }
.psh-perm.is-on .psh-perm-count { color: var(--psh-positive); }
.psh-perm.is-locked .psh-perm-count { color: var(--psh-caution); }

/* The fork: one line out of Accounts, branching to both equals (a bracket, not a sequence). */
.psh-fork { position: relative; display: block; }
.psh-fork::before, .psh-fork::after { content: ""; position: absolute; border-color: var(--psh-card-border); border-style: solid; transition: border-color .25s ease; }
.psh-fork::before { left: 0; top: 50%; width: 50%; border-width: 2px 0 0 0; }
.psh-fork::after { left: 50%; right: 0; top: 25%; bottom: 25%; border-width: 2px 0 2px 2px; border-radius: 10px 0 0 10px; }
.psh-fork.is-live::before, .psh-fork.is-live::after { border-color: color-mix(in srgb, var(--psh-user) 55%, var(--psh-card-border)); }
.psh-fork-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .05rem .35rem; border-radius: 999px; background: var(--set-icon-bg); color: var(--set-icon); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; z-index: 1; }

/* ------------------------------------------------------------------ Institution rail */

.psh-rail-wrap { position: relative; margin-bottom: 1.25rem; padding: 1rem 0 .4rem; border-radius: 20px; background: var(--psh-rail-bg); }
.psh-rail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: 0 1.1rem .4rem; }
.psh-quick { display: flex; flex-wrap: wrap; gap: .4rem; }
.psh-rail-locked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: .4rem 1.1rem 0;
    padding: .7rem .9rem;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--psh-caution) 55%, var(--psh-card-border));
    background: var(--psh-caution-soft);
    color: var(--psh-text);
    font-size: .82rem;
}

.psh-rail-locked i { color: var(--psh-caution); }

.psh-rail {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.4rem 1.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1.4rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--psh-violet) 40%, transparent) transparent;
    perspective: 1400px;
    outline: none;
}

.psh-rail.is-locked .psh-card:not(.psh-card-add) { filter: saturate(.5); }
.psh-rail:focus-visible .psh-card.is-selected { box-shadow: var(--psh-focus), 0 24px 44px -24px rgba(31, 36, 64, .5); }

.psh-card {
    --psh-pos: 0;
    --psh-dist: 0;
    position: relative;
    flex: 0 0 238px;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-height: 204px;
    padding: 1rem 1.05rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-card);
    color: var(--psh-text);
    text-align: left;
    text-decoration: none;
    scroll-snap-align: center;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transform: translateY(8px) rotateY(calc(var(--psh-pos) * -9deg)) scale(calc(1 - var(--psh-dist, 0) * .035));
    opacity: calc(1 - var(--psh-dist, 0) * .12);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, border-color .2s ease, box-shadow .35s ease;
}

.psh-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(158deg, color-mix(in srgb, var(--psh-brand, var(--psh-violet)) 16%, transparent) 0%, transparent 55%);
}

.psh-card:hover { transform: translateY(2px) rotateY(calc(var(--psh-pos) * -6deg)) scale(calc(1 - var(--psh-dist, 0) * .02)); opacity: 1; color: var(--psh-text); }
.psh-card.is-selected {
    transform: translateY(-6px) rotateY(0) scale(1.02);
    opacity: 1;
    border-color: color-mix(in srgb, var(--psh-brand, var(--psh-violet)) 55%, var(--psh-card-border));
    box-shadow: 0 24px 44px -24px rgba(31, 36, 64, .5), 0 0 0 1px color-mix(in srgb, var(--psh-brand, var(--psh-violet)) 35%, transparent);
}

.psh-card.is-sharing::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--psh-user) 40%, transparent);
    pointer-events: none;
}

.psh-card-sheen {
    position: absolute;
    inset: -40% auto auto -60%;
    width: 60%;
    height: 180%;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: rotate(10deg) translateX(-120%);
    pointer-events: none;
    z-index: 0;
}

.psh-card.is-selected .psh-card-sheen { animation: psh-sheen 1.1s ease-out .15s both; }
[data-bs-theme="dark"] .psh-card-sheen { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%); }
@keyframes psh-sheen { to { transform: rotate(10deg) translateX(420%); } }

.psh-card-watermark { position: absolute; right: -12px; bottom: -18px; z-index: -1; font-size: 6.5rem; color: var(--psh-brand, var(--psh-violet)); opacity: .06; transform: rotate(-12deg); pointer-events: none; }
[data-bs-theme="dark"] .psh-card-watermark { opacity: .1; }

.psh-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.psh-card-name { margin-top: .4rem; font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.psh-card-meta { display: flex; align-items: center; gap: .35rem; color: var(--psh-muted); font-size: .76rem; }
.psh-card-sep { color: var(--psh-light); }
.psh-card-health.is-caution { color: var(--psh-caution); font-weight: 700; }
.psh-card-health.is-critical { color: var(--psh-critical); font-weight: 700; }

.psh-card-figures { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .5rem; }
.psh-figure { display: flex; flex-direction: column; font-size: .98rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.psh-figure small { color: var(--psh-light); font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.psh-figure.is-cash { color: var(--psh-cash); }
.psh-figure.is-debt { color: var(--psh-debt); }
.psh-figure.is-invest { color: var(--psh-invest); }
.psh-figure.is-muted { color: var(--psh-light); }

.psh-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--psh-card-border); }
.psh-card-state { display: inline-flex; align-items: center; gap: .4rem; color: var(--psh-light); font-size: .74rem; font-weight: 700; }
.psh-card-state.is-on { color: var(--psh-user); }
.psh-card-toggle {
    padding: .3rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-card);
    color: var(--psh-muted);
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.psh-card-toggle:not(:disabled):hover { color: var(--psh-violet); border-color: var(--psh-violet); }
.psh-card-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* The share ring: fills as the institution's accounts are shared */
.psh-ring { position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.psh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.psh-ring-track { fill: none; stroke: var(--psh-neutral-soft); stroke-width: 4; }
.psh-ring-fill { fill: none; stroke: var(--psh-user); stroke-width: 4; stroke-linecap: round; stroke-dasharray: calc(var(--psh-ratio, 0) * 100) 100; transition: stroke-dasharray .5s cubic-bezier(.2, .8, .2, 1); }
.psh-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.psh-ring-text small { color: var(--psh-light); font-size: .58rem; font-weight: 700; }

.psh-card-add { align-items: center; justify-content: center; text-align: center; border-style: dashed; border-color: color-mix(in srgb, var(--psh-violet) 45%, var(--psh-card-border)); background: color-mix(in srgb, var(--psh-violet) 5%, var(--psh-card)); }
.psh-card-add::before { background: none; }
.psh-card-add-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: .4rem;
    border-radius: 18px;
    background: var(--set-icon-bg);
    color: var(--set-icon);
    font-size: 1.3rem;
}

.psh-logo-manual i { font-size: .9rem; }

/* ------------------------------------------------------------------ The institution panel (share cards) */

.psh-panel {
    margin-bottom: 1.25rem;
    border-radius: 20px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-panel-bg);
    overflow: hidden;
    animation: psh-rise .4s cubic-bezier(.2, .8, .2, 1) both;
}

.psh-panel-head { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--psh-card-border); background: var(--psh-section-bg); }
.psh-panel-titles { min-width: 0; flex: 1 1 auto; }
.psh-panel-title { margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 700; }
.psh-panel-sub { display: flex; flex-wrap: wrap; gap: .3rem; color: var(--psh-muted); font-size: .8rem; }
.psh-panel-sync { color: var(--psh-light); }
.psh-panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }

.psh-panel-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1.2rem 0; }
.psh-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.psh-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-card);
    color: var(--psh-muted);
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}

.psh-chip.is-active { background: var(--psh-violet-soft); border-color: color-mix(in srgb, var(--psh-violet) 45%, transparent); color: var(--psh-violet); }
.psh-chip-count { padding: 0 .35rem; border-radius: 999px; background: var(--psh-neutral-soft); font-size: .66rem; }
.psh-search { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--psh-card-border); background: var(--psh-card); color: var(--psh-light); }
.psh-search input { width: 12rem; border: 0; background: transparent; color: var(--psh-text); font-size: .84rem; outline: none; }

.psh-acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: .7rem; padding: .9rem 1.2rem 1.2rem; }
.psh-acct {
    --psh-hue: var(--psh-light);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0;
    padding: .95rem 1rem .85rem 1.15rem;
    border-radius: 16px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-card);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
    animation: psh-rise .35s cubic-bezier(.2, .8, .2, 1) both;
}

.psh-acct.is-cash { --psh-hue: var(--psh-cash); }
.psh-acct.is-debt { --psh-hue: var(--psh-debt); }
.psh-acct.is-invest { --psh-hue: var(--psh-invest); }
.psh-acct.is-manual { --psh-hue: var(--psh-manual); }
.psh-acct:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--psh-hue) 45%, var(--psh-card-border)); }
.psh-acct.is-on { border-color: color-mix(in srgb, var(--psh-user) 45%, var(--psh-card-border)); box-shadow: 0 14px 28px -22px rgba(37, 99, 235, .5); background: linear-gradient(158deg, color-mix(in srgb, var(--psh-user) 7%, var(--psh-card)) 0%, var(--psh-card) 60%); }
.psh-acct.is-locked { cursor: not-allowed; opacity: .65; }
.psh-acct-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--psh-hue); }
.psh-acct.is-on .psh-acct-stripe { background: linear-gradient(180deg, var(--psh-user), var(--psh-hue)); }
.psh-acct-head { display: flex; align-items: center; gap: .6rem; }
.psh-acct-glyph { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--psh-hue) 16%, transparent); color: var(--psh-hue); font-size: .85rem; }
.psh-acct-id { display: grid; min-width: 0; flex: 1 1 auto; }
.psh-acct-name { font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-acct-meta { color: var(--psh-light); font-size: .74rem; }
.psh-acct-amount { display: flex; align-items: baseline; gap: .45rem; }
.psh-acct-value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--psh-hue); }
.psh-acct.is-other .psh-acct-value { color: var(--psh-text); }
.psh-acct-caption { color: var(--psh-light); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.psh-acct-facts { display: flex; flex-wrap: wrap; gap: .35rem .7rem; }
.psh-fact { display: inline-flex; align-items: center; gap: .3rem; color: var(--psh-light); font-size: .72rem; font-weight: 600; }
.psh-fact i { font-size: .68rem; }
.psh-fact.is-live { color: var(--psh-user); }
.psh-fact.is-positive { color: var(--psh-positive); }
.psh-fact.is-caution { color: var(--psh-caution); }
.psh-fact.is-critical { color: var(--psh-critical); }
.psh-fresh-dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.psh-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.psh-badge.is-hidden { background: var(--psh-caution-soft); color: var(--psh-caution); }
.psh-acct-state { display: inline-flex; align-items: center; gap: .4rem; padding-top: .45rem; border-top: 1px solid var(--psh-card-border); color: var(--psh-light); font-size: .74rem; font-weight: 700; }
.psh-acct.is-on .psh-acct-state { color: var(--psh-user); }


/* ------------------------------------------------------------------ The studio: steps on the left, the live preview on the side */

.psh-step-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .8rem; }
.psh-step-head > div { display: grid; gap: .15rem; min-width: 0; }
.psh-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--psh-violet), color-mix(in srgb, var(--psh-violet) 60%, var(--psh-user)));
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    box-shadow: 0 6px 14px -8px var(--psh-violet);
}

.psh-step-head .psh-section-hint { font-size: .78rem; }
.psh-rail-head .psh-step-head { margin-bottom: 0; }
.psh-panel-step { padding: 1rem 1.2rem 0; margin-bottom: .6rem; }

.psh-studio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; margin-bottom: 1.5rem; }
.psh-studio-main { min-width: 0; }
.psh-studio-main .psh-rail-wrap { margin-bottom: 1rem; }
.psh-studio-main .psh-panel { margin-bottom: 0; }
.psh-studio-side { position: sticky; top: 1rem; min-width: 0; }

.psh-live {
    position: relative;
    display: grid;
    gap: .75rem;
    padding: 1rem 1rem 1rem;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--psh-violet) 28%, var(--psh-section-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--psh-violet) 7%, var(--psh-section-bg)), var(--psh-section-bg) 38%);
    box-shadow: 0 24px 48px -36px rgba(31, 36, 64, .5);
    overflow: hidden;
}

.psh-live-head { display: flex; align-items: center; gap: .6rem; }
.psh-live-titles { display: grid; gap: .05rem; min-width: 0; flex: 1 1 auto; }
.psh-live-pulse { position: relative; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--psh-positive); }
.psh-live-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--psh-positive); opacity: 0; animation: psh-live-ring 2.4s ease-out infinite; }
@keyframes psh-live-ring { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.psh-live-count { padding: .2rem .55rem; border-radius: 999px; background: var(--psh-neutral-soft); color: var(--psh-muted); font-size: .86rem; font-weight: 800; font-variant-numeric: tabular-nums; animation: psh-pop .4s cubic-bezier(.2, .8, .2, 1) both; }
.psh-live-count small { font-size: .68rem; font-weight: 700; opacity: .7; }
.psh-live-count.is-on { background: var(--psh-user-soft); color: var(--psh-user); }
@keyframes psh-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: none; } }

/* The stage the bond lands on. Before the hero first scrolls away it holds a faint placeholder; after that the bond
   stays here as a live view for the rest of the visit (is-bond-live is latched by the page, never cleared by a pick or
   a save). is-bond-docked only dims the hero copy while it is off screen. */
.psh-live-stage { position: relative; min-height: 120px; border-radius: 16px; background: color-mix(in srgb, var(--psh-violet) 5%, var(--psh-card)); border: 1px dashed color-mix(in srgb, var(--psh-violet) 25%, var(--psh-card-border)); }
.psh-live-stage::before { content: "Scroll on; the bond follows you here"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--psh-light); font-size: .74rem; font-weight: 700; text-align: center; padding: 0 1rem; transition: opacity .25s ease; }
.psh-live-bond { opacity: 0; transform: translateY(-28px) scale(.72); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .25, 1.15); }
.is-bond-live .psh-live-stage::before { opacity: 0; }
.is-bond-live .psh-live-stage { border-style: solid; }
.is-bond-live .psh-live-bond { opacity: 1; transform: none; }
.is-bond-docked .psh-hero-bond { opacity: .55; transform: scale(.96); }
.psh-hero-bond { transition: opacity .3s ease, transform .4s ease; }

.psh-bond.is-compact { --psh-bond-av: clamp(36px, 15cqi, 52px); width: min(100%, 340px); margin: 0 auto; padding: .35rem 0; }
.psh-bond.is-compact .psh-bond-avatar { box-shadow: 0 0 0 3px var(--psh-card), 0 0 0 5px var(--psh-user); }
.psh-bond.is-compact .psh-bond-avatar.is-partner { box-shadow: 0 0 0 3px var(--psh-card), 0 0 0 5px var(--psh-partner); }
.psh-bond.is-compact .psh-bond-label { padding: .14rem .45rem; font-size: .62rem; }
.psh-bond.is-compact .psh-bond-name { top: calc(100% + .3rem); font-size: .64rem; max-width: 4.5rem; padding: 0 .35rem; }
.psh-bond.is-compact .psh-coin-ring { stroke-width: 3; }

.psh-live-empty { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .85rem; border-radius: 12px; background: var(--psh-card); border: 1px solid var(--psh-card-border); color: var(--psh-muted); font-size: .8rem; }
.psh-live-empty i { margin-top: .15rem; color: var(--psh-violet); }
.psh-live-empty strong { color: var(--psh-text); }

/* The list scrolls; each bank is a block that never shrinks, so its accounts always sit fully expanded under it.
   (A grid here let the rows squash to fit the max-height, clipping the accounts into each other.) */
.psh-live-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    max-height: min(52vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    padding: .1rem .2rem .1rem 0;
}
.psh-live-bank { flex: 0 0 auto; border-radius: 14px; border: 1px solid var(--psh-card-border); background: var(--psh-card); transition: border-color .2s ease, box-shadow .2s ease, outline-color .9s ease; }
.psh-live-bank.is-open { border-color: color-mix(in srgb, var(--psh-violet) 45%, var(--psh-card-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--psh-violet) 18%, transparent); }
.psh-live-bank-head { border-radius: 13px 13px 0 0; }
/* Brief ring on whatever a tap just brought to the top (outline, so the rows' landing animation doesn't replay). */
.psh-live-bank, .psh-live-acct { outline: 2px solid transparent; outline-offset: 1px; }
.psh-live-acct { flex: 0 0 auto; transition: outline-color .9s ease, background-color .2s ease; }
.psh-live-bank.is-focus, .psh-live-acct.is-focus { outline-color: color-mix(in srgb, var(--psh-violet) 60%, transparent); transition-duration: .1s; }
.psh-live-bank-head { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .65rem; border: 0; background: transparent; color: var(--psh-text); text-align: left; cursor: pointer; }
.psh-live-bank-head:hover { background: var(--psh-violet-soft); }
.psh-live-bank-name { flex: 1 1 auto; min-width: 0; font-size: .82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-live-bank-count { color: var(--psh-user); font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.psh-live-bank-count small { color: var(--psh-light); font-weight: 700; }
.psh-live-accts { margin: 0; padding: .1rem .4rem .45rem; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.psh-live-acct.is-tappable { cursor: pointer; }
.psh-live-acct.is-tappable:hover { background: color-mix(in srgb, var(--psh-violet) 6%, var(--psh-section-bg)); }
.psh-live-acct.is-tappable:focus-visible { outline: 2px solid var(--psh-violet); outline-offset: 1px; }
.psh-live-acct {
    --psh-hue: var(--psh-light);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem .4rem .6rem;
    border-radius: 10px;
    background: var(--psh-section-bg);
    animation: psh-land .45s cubic-bezier(.2, .8, .2, 1) both;
}

.psh-live-acct::before { content: ""; position: absolute; inset: 6px auto 6px 0; width: 3px; border-radius: 3px; background: var(--psh-hue); }
.psh-live-acct.is-cash { --psh-hue: var(--psh-cash); }
.psh-live-acct.is-debt { --psh-hue: var(--psh-debt); }
.psh-live-acct.is-invest { --psh-hue: var(--psh-invest); }
.psh-live-acct.is-manual { --psh-hue: var(--psh-manual); }
.psh-live-acct.is-new { background: color-mix(in srgb, var(--psh-user) 9%, var(--psh-section-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--psh-user) 40%, transparent); }
.psh-live-acct.is-leaving { --psh-hue: var(--psh-caution); background: var(--psh-caution-soft); grid-template-columns: auto minmax(0, 1fr) auto; }
.psh-live-acct.is-leaving .psh-live-acct-name { text-decoration: line-through; color: var(--psh-muted); }
@keyframes psh-land { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.psh-live-acct-glyph { color: var(--psh-hue); font-size: .78rem; width: 16px; text-align: center; }
.psh-live-acct-id { display: grid; min-width: 0; }
.psh-live-acct-name { font-size: .78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-live-acct-meta { color: var(--psh-light); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-live-acct-value { color: var(--psh-hue); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.psh-live-tag { position: absolute; top: -6px; right: 26px; padding: .05rem .4rem; border-radius: 999px; background: var(--psh-user); color: #fff; font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.psh-live-remove, .psh-live-undo { border: 0; background: transparent; color: var(--psh-light); cursor: pointer; }
.psh-live-remove { width: 22px; height: 22px; border-radius: 50%; font-size: .7rem; }
.psh-live-remove:hover { background: var(--psh-debt-soft, var(--psh-neutral-soft)); color: var(--psh-debt); }
.psh-live-undo { padding: .15rem .5rem; border-radius: 999px; background: var(--psh-card); color: var(--psh-caution); font-size: .7rem; font-weight: 800; }

.psh-live-travel { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.psh-live-travel li { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--psh-card-border); background: var(--psh-card); color: var(--psh-muted); font-size: .68rem; font-weight: 700; }
.psh-live-travel li.is-on { border-color: color-mix(in srgb, var(--psh-user) 40%, transparent); color: var(--psh-user); }
.psh-live-travel li.is-off { opacity: .6; }
.psh-live-travel li.is-off i { text-decoration: line-through; }
.psh-live-travel em { font-style: normal; opacity: .7; }

.psh-live-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .6rem; border-top: 1px solid var(--psh-card-border); font-size: .76rem; color: var(--psh-muted); }
.psh-live-foot.is-saved { justify-content: flex-start; }
.psh-live-foot.is-saved i { color: var(--psh-positive); }
.psh-live-delta { display: inline-flex; align-items: center; gap: .35rem; }
.psh-live-delta b { padding: .05rem .4rem; border-radius: 999px; font-size: .72rem; }
.psh-live-delta b.is-add { background: var(--psh-user-soft); color: var(--psh-user); }
.psh-live-delta b.is-remove { background: var(--psh-caution-soft); color: var(--psh-caution); }
.psh-btn-sm { padding: .4rem .75rem; font-size: .78rem; }
.psh-live.is-dirty { border-color: color-mix(in srgb, var(--psh-user) 45%, var(--psh-section-border)); }

/* ------------------------------------------------------------------ What the partner sees, and what comes back */

.psh-two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.psh-seen, .psh-inbound {
    position: relative;
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: 20px;
    border: 1px solid var(--psh-section-border);
    background: var(--psh-section-bg);
    overflow: hidden;
}

.psh-inbound { border-color: color-mix(in srgb, var(--psh-partner) 25%, var(--psh-section-border)); }
.psh-seen-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.psh-seen-titles { display: grid; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.psh-seen-eye { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--psh-neutral-soft); color: var(--psh-light); font-size: .95rem; }
.psh-seen-eye.is-on { background: var(--set-icon-bg); color: var(--set-ink); animation: psh-blink-eye 6s ease-in-out infinite; }
@keyframes psh-blink-eye { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }

.psh-seen-empty { display: grid; justify-items: center; gap: .3rem; padding: 1.4rem 1rem; text-align: center; color: var(--psh-muted); font-size: .84rem; }
.psh-seen-empty strong { color: var(--psh-text); }
.psh-seen-empty-art { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: .4rem; border-radius: 18px; background: var(--psh-violet-soft); color: var(--psh-violet); font-size: 1.3rem; }
.psh-seen-empty-art.is-partner { background: var(--psh-partner-soft); color: var(--psh-partner); }

/* The fanned stack: each mini card slides in from the left, one after another */
.psh-stack { display: flex; gap: .7rem; padding: .25rem .25rem .75rem; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.psh-mini {
    --psh-hue: var(--psh-light);
    position: relative;
    flex: 0 0 176px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .8rem .85rem .7rem;
    border-radius: 16px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-card);
    scroll-snap-align: start;
    animation: psh-slide-in .45s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--psh-i, 0) * 60ms);
}

.psh-mini.is-cash { --psh-hue: var(--psh-cash); }
.psh-mini.is-debt { --psh-hue: var(--psh-debt); }
.psh-mini.is-invest { --psh-hue: var(--psh-invest); }
.psh-mini.is-manual { --psh-hue: var(--psh-manual); }
.psh-mini::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 16px 0 0 16px; background: var(--psh-hue); }
@keyframes psh-slide-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.psh-mini-top { display: flex; align-items: center; justify-content: space-between; }
.psh-mini-glyph { color: var(--psh-hue); font-size: .8rem; }
.psh-mini-name { margin-top: .35rem; font-weight: 700; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-mini-meta { color: var(--psh-light); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-mini-value { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--psh-hue); }
.psh-mini-travel { display: flex; gap: .5rem; margin-top: .2rem; color: var(--psh-light); font-size: .7rem; }
.psh-mini-travel i { opacity: .4; }
.psh-mini-travel i.is-live { opacity: 1; color: var(--psh-user); }
.psh-mini-remove {
    position: absolute;
    top: .45rem;
    right: .45rem;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--psh-neutral-soft);
    color: var(--psh-muted);
    font-size: .7rem;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}

.psh-mini:hover .psh-mini-remove, .psh-mini-remove:focus-visible { opacity: 1; }
.psh-mini-remove:hover { background: var(--psh-critical-soft); color: var(--psh-critical); }

.psh-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .9rem; margin: .9rem 0 0; padding: .9rem 0 0; list-style: none; border-top: 1px solid var(--psh-section-border); }
.psh-ledger li { display: flex; align-items: flex-start; gap: .5rem; font-size: .78rem; }
.psh-ledger li i { margin-top: .15rem; }
.psh-ledger li.is-on i { color: var(--psh-positive); }
.psh-ledger li.is-off i { color: var(--psh-light); }
.psh-ledger li span { display: grid; }
.psh-ledger li strong { color: var(--psh-text); font-weight: 600; }
.psh-ledger li.is-off strong { color: var(--psh-muted); }
.psh-ledger li small { color: var(--psh-light); font-size: .7rem; }

.psh-inbound-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.psh-inbound-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.psh-inbound-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 14px; border: 1px solid var(--psh-card-border); background: var(--psh-card); animation: psh-rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.psh-inbound-id { display: grid; min-width: 0; flex: 1 1 auto; }
.psh-inbound-name { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-inbound-meta { color: var(--psh-light); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-inbound-value { display: grid; justify-items: end; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--psh-cash); }
.psh-inbound-row.is-debt .psh-inbound-value { color: var(--psh-debt); }
.psh-inbound-value small { color: var(--psh-light); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.psh-inbound-foot { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; }

/* ------------------------------------------------------------------ Income and the default split */

.psh-split-wrap { margin-bottom: 1.25rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 20px; border: 1px solid var(--psh-section-border); background: var(--psh-section-bg); }
.psh-split-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 1rem; }
.psh-split-card, .psh-income, .psh-example { padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid var(--psh-card-border); background: var(--psh-card); }
.psh-split-side { display: grid; gap: 1rem; align-content: start; }

.psh-mode { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.75rem; }
.psh-mode-btn {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .85rem;
    border-radius: 14px;
    border: 1px solid var(--psh-card-border);
    background: var(--psh-card);
    color: var(--psh-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.psh-mode-btn i { color: var(--psh-light); font-size: 1rem; }
.psh-mode-btn span { display: grid; gap: .05rem; min-width: 0; }
.psh-mode-btn strong { font-size: .86rem; }
.psh-mode-btn small { color: var(--psh-muted); font-size: .72rem; }
.psh-mode-btn.is-active { border-color: transparent; background: var(--set-surface); }
.psh-mode-btn.is-active i { color: var(--set-ink); }
.psh-mode-btn:focus-visible { outline: none; box-shadow: var(--psh-focus); }

.psh-bar-wrap { display: flex; align-items: flex-start; gap: .8rem; }
.psh-bar-wrap .psh-bar-av { margin-top: -11px; }
.psh-bar-av { flex: 0 0 auto; }
.psh-bar-col { display: grid; gap: .5rem; flex: 1 1 auto; min-width: 0; }
.psh-bar {
    --psh-share: 50;
    position: relative;
    height: 22px;
    border-radius: 999px;
    /* You (blue) and your partner (amber) meet in the Snapshot seam blend (couple-share-bar.css tokens). */
    background: linear-gradient(90deg,
        var(--ci-couple-user, #2563EB) 0%,
        var(--ci-couple-user, #2563EB) calc(var(--psh-share) * 1% - var(--ci-couple-blend, 40px) * .5),
        var(--ci-couple-user-tint, #60A5FA) calc(var(--psh-share) * 1% - var(--ci-couple-blend, 40px) * .08),
        var(--ci-couple-partner-tint, #FBBF24) calc(var(--psh-share) * 1% + var(--ci-couple-blend, 40px) * .08),
        var(--ci-couple-partner, #D97706) calc(var(--psh-share) * 1% + var(--ci-couple-blend, 40px) * .5),
        var(--ci-couple-partner, #D97706) 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
    transition: background .35s ease;
}

.psh-bar.is-user-only { background: var(--ci-couple-user, #2563EB); }
.psh-bar.is-partner-only { background: var(--ci-couple-partner, #D97706); }

.psh-bar-handle {
    position: absolute;
    top: 50%;
    left: calc(var(--psh-share) * 1%);
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--set-card-border);
    background: #FFFFFF;
    color: #5B6475;
    font-size: .65rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .28);
    pointer-events: none;
    transition: left .35s cubic-bezier(.2, .8, .2, 1);
}

.psh-bar-wrap.is-income .psh-bar-handle { width: 22px; height: 22px; color: transparent; }
.psh-bar-range { position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; width: 100%; height: calc(100% + 20px); margin: 0; opacity: 0; cursor: grab; -webkit-appearance: none; appearance: none; }
.psh-bar-range:active { cursor: grabbing; }
.psh-bar-range:disabled { cursor: default; }
.psh-bar-range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 42px; }
.psh-bar-range::-moz-range-thumb { width: 32px; height: 42px; border: 0; }
.psh-bar:has(.psh-bar-range:focus-visible) .psh-bar-handle { box-shadow: var(--psh-focus), 0 2px 8px rgba(15, 23, 42, .28); }
.psh-bar-legend { display: flex; justify-content: space-between; gap: 1rem; white-space: nowrap; font-size: .8rem; font-weight: 600; color: var(--psh-muted); }
.psh-bar-legend strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.psh-bar-legend .is-user strong { color: #2563EB; }
.psh-bar-legend .is-partner strong { color: #D97706; }
[data-bs-theme="dark"] .psh-bar-legend .is-user strong { color: #60A5FA; }
[data-bs-theme="dark"] .psh-bar-legend .is-partner strong { color: #FBBF24; }

.psh-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.psh-split-sentence { margin: 1rem 0 0; font-size: .95rem; font-weight: 600; }
.psh-split-fair { display: flex; gap: .45rem; align-items: flex-start; margin: .4rem 0 0; color: var(--psh-muted); font-size: .8rem; }
.psh-split-fair i { margin-top: .2rem; color: var(--set-icon); }

.psh-field { display: grid; gap: .3rem; margin: 0 0 .9rem; }
.psh-field-label { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: var(--psh-muted); }
.psh-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--psh-user); }
.psh-dot.is-partner { background: var(--psh-partner); }
.psh-field-value { padding: .55rem .8rem; border-radius: 12px; border: 1px dashed var(--psh-card-border); background: var(--psh-neutral-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.psh-field-hint { color: var(--psh-light); font-size: .72rem; }
.psh-numeric.e-input-group, .psh-numeric .e-input-group { border-radius: 12px !important; }
/* Light theme only: the up/down spin buttons sit on a tinted well with a divider and darker chevrons so they read against the white field. */
:root:not([data-bs-theme="dark"]) .psh-numeric.e-input-group .e-input-group-icon.e-spin-down,
:root:not([data-bs-theme="dark"]) .psh-numeric.e-input-group .e-input-group-icon.e-spin-up,
:root:not([data-bs-theme="dark"]) .psh-numeric .e-input-group .e-input-group-icon.e-spin-down,
:root:not([data-bs-theme="dark"]) .psh-numeric .e-input-group .e-input-group-icon.e-spin-up {
    background: #EEF0F8;
    color: #3F4566;
    border-left: 1px solid #C9CDE0;
}

:root:not([data-bs-theme="dark"]) .psh-numeric.e-input-group .e-input-group-icon.e-spin-down:hover,
:root:not([data-bs-theme="dark"]) .psh-numeric.e-input-group .e-input-group-icon.e-spin-up:hover,
:root:not([data-bs-theme="dark"]) .psh-numeric .e-input-group .e-input-group-icon.e-spin-down:hover,
:root:not([data-bs-theme="dark"]) .psh-numeric .e-input-group .e-input-group-icon.e-spin-up:hover {
    background: #E1E4F4;
    color: var(--psh-user, hsl(calc(243.4deg + var(--ci-accent-shift, 0deg)) 75.36% 58.63%));
}
.psh-household { display: grid; gap: .35rem; margin-top: .2rem; }
.psh-household-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; }
.psh-household-text { color: var(--psh-muted); font-size: .78rem; }
.psh-household-text strong { color: var(--psh-text); }

.psh-example-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.psh-example-table th, .psh-example-table td { padding: .45rem 0; border-bottom: 1px solid var(--psh-card-border); text-align: right; font-variant-numeric: tabular-nums; }
.psh-example-table th[scope="row"] { text-align: left; font-weight: 600; }
.psh-example-table th[scope="row"] small { display: block; color: var(--psh-light); font-size: .7rem; font-weight: 600; }
.psh-example-table thead th { color: var(--psh-light); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.psh-example-table thead th:first-child { text-align: left; }
.psh-example-table tbody tr:last-child th, .psh-example-table tbody tr:last-child td { border-bottom: 0; }
.psh-example-table .is-user { color: var(--psh-user); font-weight: 700; }
.psh-example-table .is-partner { color: var(--psh-partner); font-weight: 700; }

/* ------------------------------------------------------------------ No partner yet */

.psh-empty { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-bottom: 1.25rem; padding: 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--psh-section-border); background: var(--psh-section-bg); }
.psh-empty-art { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.psh-empty-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--set-icon) 45%, transparent); animation: psh-rotate 60s linear infinite; }
.psh-empty-ring.is-2 { inset: 34px; animation-direction: reverse; animation-duration: 45s; }
@keyframes psh-rotate { to { transform: rotate(360deg); } }
.psh-empty-me { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); }
.psh-empty-them { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); border: 2px dashed var(--psh-partner); box-shadow: none; }
.psh-empty-title { margin: 0 0 .35rem; font-size: 1.25rem; font-weight: 700; }
.psh-empty-sub { margin: 0 0 .9rem; color: var(--psh-muted); font-size: .9rem; }
.psh-steps { display: grid; gap: .5rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.psh-steps li { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--psh-muted); }
.psh-steps strong { color: var(--psh-text); }
.psh-step-n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px; background: var(--psh-violet); color: var(--set-card); font-size: .78rem; font-weight: 800; }
.psh-trust { display: grid; gap: .5rem; margin: 0 0 1rem; padding: .8rem 0 0; list-style: none; border-top: 1px solid var(--psh-section-border); }
.psh-trust li { display: flex; gap: .55rem; align-items: flex-start; color: var(--psh-muted); font-size: .8rem; }
.psh-trust li i { flex: 0 0 auto; margin-top: .15rem; color: var(--psh-violet); }
.psh-trust strong { color: var(--psh-text); }
.psh-empty-cta { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ------------------------------------------------------------------ The save dock and the toast */

.psh-dock {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    z-index: 11000;
    width: min(760px, calc(100vw - 2rem));
    transform: translate(-50%, 140%);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}

.psh-dock.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.psh-dock-inner {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem .8rem .9rem;
    border-radius: 18px;
    border: 1px solid var(--psh-violet-line);
    background: var(--psh-glass-strong);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 50px -22px rgba(31, 36, 64, .55);
}

[data-bs-theme="dark"] .psh-dock-inner { background: rgba(23, 28, 40, .92); }
.psh-dock-glyph { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #2563EB, #D97706); color: #fff; }
.psh-dock-text { display: grid; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.psh-dock-text strong { font-size: .9rem; }
.psh-dock-text span { color: var(--psh-muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psh-dock-actions { display: flex; gap: .5rem; flex: 0 0 auto; }

.psh-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 12000;
    max-width: min(520px, calc(100vw - 2rem));
    padding: .7rem 1rem;
    border-radius: 12px;
    background: #1F2233;
    color: #F3F6FF;
    font-size: .86rem;
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .5);
    transform: translate(-50%, 1rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}

.psh-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.psh-toast.is-positive { border-left: 4px solid #22C55E; }
.psh-toast.is-caution { border-left: 4px solid #FBBF24; }
.psh-toast.is-critical { border-left: 4px solid #F87171; }
[data-bs-theme="dark"] .psh-toast { background: #2A2F45; }

/* ------------------------------------------------------------------ Skeleton */

/* Bones in the grey Settings tone; every block is the real component's class so the sizes match the loaded page. */
.psh-skeleton { --dsh-bone: rgba(91, 100, 117, .1); --dsh-wave: rgba(255, 255, 255, .85); }
[data-bs-theme="dark"] .psh-skeleton { --dsh-bone: rgba(170, 178, 194, .12); --dsh-wave: rgba(255, 255, 255, .12); }
.psh-bone-tabs { width: min(100%, 420px); height: 44px; margin-bottom: 1.25rem; border-radius: 14px; }
.psh-skeleton .psh-hero-copy { display: flex; flex-direction: column; gap: .6rem; }
.psh-bone-title { width: 60%; height: 28px; }
.psh-bone-master { width: min(100%, 22rem); height: 62px; border-radius: 16px; }
.psh-bone-av { position: absolute; top: 50%; width: var(--psh-bond-av, 74px); height: var(--psh-bond-av, 74px); border-radius: 50%; transform: translate(-50%, -50%); }
.psh-bone-arc { position: absolute; left: 22%; right: 22%; top: 50%; height: 56px; border-radius: 999px; transform: translateY(-50%); }
.psh-bone-glyph { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
.psh-bone-switch { width: 44px; height: 24px; border-radius: 999px; flex: 0 0 auto; }
.psh-bone-btn { width: 7rem; height: 36px; border-radius: 12px; }
.psh-bone-stack { display: grid; gap: .45rem; min-width: 0; }
.psh-bone-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
.psh-bone-mini { height: 92px; border-radius: 14px; }
.psh-skeleton .psh-stat.is-skeleton { gap: .5rem; }
.psh-skeleton .psh-perm.is-skeleton { cursor: default; }
.psh-skeleton .psh-perm.is-root.is-skeleton { gap: .5rem; }
.psh-skeleton .psh-card.is-skeleton { cursor: default; gap: .5rem; }
.psh-skeleton .psh-acct.is-skeleton { cursor: default; animation: none; }
.psh-skeleton .psh-acct.is-skeleton:hover { transform: none; }
.psh-skeleton .psh-panel { animation: none; }
.psh-skeleton .psh-hero, .psh-skeleton .psh-perms { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ Responsive */

@media (max-width: 1199.98px) {
    .psh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .psh-studio { grid-template-columns: minmax(0, 1fr) 300px; }
    .psh-two { grid-template-columns: minmax(0, 1fr); }
    .psh-split-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    .psh-hero-main { grid-template-columns: minmax(0, 1fr); }
    .psh-studio { grid-template-columns: minmax(0, 1fr); }
    .psh-studio-side { position: static; }
    .psh-live-stage::before { display: none; }
    .psh-live-bond { opacity: 1; transform: none; }
    .psh-live-stage { border-style: solid; }
    .is-bond-docked .psh-hero-bond { opacity: 1; transform: none; }
    .psh-live-list { max-height: none; }
    .psh-bond { width: min(100%, 440px); justify-self: center; }
    .psh-card { transform: none; opacity: 1; }
    .psh-card:hover { transform: none; }
    .psh-card.is-selected { transform: translateY(-4px); }
    .psh-perm-layout { grid-template-columns: minmax(0, 1fr); }
    .psh-perm-pair { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .psh-fork { height: 34px; }
    .psh-fork::before { left: 50%; top: 0; width: 0; height: 50%; border-width: 0 0 0 2px; }
    .psh-fork::after { left: 25%; right: 25%; top: 50%; bottom: 0; border-width: 2px 2px 0 2px; border-radius: 10px 10px 0 0; }
    .psh-empty { grid-template-columns: minmax(0, 1fr); }
    .psh-ledger { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .psh-hero { padding: 1.2rem 1rem 1rem; border-radius: 16px; }
    .psh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .psh-stat { padding: .65rem .7rem; }
    .psh-stat-value { font-size: 1.05rem; }
    .psh-rail { padding: .8rem 1rem 1.1rem; gap: .7rem; scroll-snap-type: x mandatory; }
    .psh-card { flex-basis: 246px; min-height: 220px; }
    .psh-panel-head { flex-wrap: wrap; padding: 1rem; }
    .psh-panel-actions { width: 100%; justify-content: flex-start; }
    .psh-panel-tools, .psh-acct-grid { padding-left: 1rem; padding-right: 1rem; }
    .psh-acct-grid { grid-template-columns: minmax(0, 1fr); }
    .psh-search input { width: 8rem; }
    .psh-head-actions .psh-btn span { display: none; }
    .psh-head-actions .psh-btn { padding: .6rem .75rem; }
    .psh-mode { grid-template-columns: minmax(0, 1fr); }
    .psh-dock { bottom: .75rem; }
    .psh-dock-inner { flex-wrap: wrap; }
    .psh-dock-actions { width: 100%; }
    .psh-dock-actions .psh-btn { flex: 1 1 auto; justify-content: center; }
    .psh-page.has-dock { padding-bottom: 9rem; }
}

@media (max-width: 575.98px) {
    .psh-perm-pair { grid-template-columns: minmax(0, 1fr); }
    .psh-fork::after { left: 50%; right: auto; width: 0; border-width: 0 0 0 2px; border-radius: 0; }
    .psh-hero-title { font-size: 1.3rem; }
    .psh-master { width: 100%; }
    .psh-bar-wrap { gap: .5rem; }
    .psh-bar-av { --psh-av: 36px !important; }
    .psh-bar-wrap .psh-bar-av { margin-top: -7px; }
}

@media (prefers-reduced-motion: reduce) {
    .psh-blob, .psh-hero-dot, .psh-bond-side, .psh-arc, .psh-card-sheen, .psh-stat, .psh-acct, .psh-panel, .psh-mini, .psh-inbound-row, .psh-seen-eye, .psh-empty-ring, .psh-spin {
        animation: none !important;
    }

    .psh-card, .psh-acct, .psh-btn, .psh-chip-btn, .psh-bar-handle, .psh-bar, .psh-dock, .psh-toast, .psh-switch-thumb, .psh-master-thumb { transition: none !important; }
    .psh-card { transform: none; opacity: 1; }
    .psh-coin { display: none; }
    .psh-live-bond, .psh-hero-bond, .psh-live-acct, .psh-live-count, .psh-live-pulse::after { animation: none !important; transition: none !important; }
}

[data-a11y-reduce-motion="on"] .psh-blob, [data-a11y-reduce-motion="on"] .psh-bond-side,
[data-a11y-reduce-motion="on"] .psh-arc, [data-a11y-reduce-motion="on"] .psh-card-sheen, [data-a11y-reduce-motion="on"] [data-a11y-reduce-motion="on"] .psh-seen-eye,
[data-a11y-reduce-motion="on"] .psh-empty-ring { animation: none !important; }
[data-a11y-reduce-motion="on"] .psh-coin { display: none; }