/* /Layout/DisclaimerDialog.razor.rz.scp.css */
/* CR V7 — the disclaimer pop-up. Moved out of IntroFlow.razor.css (CR V6 .intro-modal) so every
   page can open it; the look is unchanged. Sits above the simulation's own modals and the
   intro's fixed screens. */
.disc-backdrop[b-1yof2fc6o8] {
    position: fixed; inset: 0; z-index: 1400; background: rgba(10,14,34,.62);
    display: flex; align-items: center; justify-content: center;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
/* Two or three paragraphs: on a 390 px phone it scrolls inside the card (CR V6). */
.disc-modal[b-1yof2fc6o8] {
    width: 100%; max-width: 440px; max-height: calc(100dvh - 40px); overflow-y: auto;
    background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
    padding: 24px 20px 18px; text-align: left;
}
.disc-icon[b-1yof2fc6o8] {
    width: 48px; height: 48px; border-radius: 14px; background: #EAF1FF;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.disc-icon .material-symbols-outlined[b-1yof2fc6o8] { font-size: 26px; color: #1B2558; }
.disc-title[b-1yof2fc6o8] { font-size: 19px; font-weight: 800; color: #14264F; line-height: 1.3; }
.disc-text[b-1yof2fc6o8] { font-size: 14.5px; color: #344054; line-height: 1.6; margin: 10px 0 0; text-wrap: pretty; }
/* The links are built in code (Linked), so they carry no scope attribute: ::deep reaches them. */
.disc-text[b-1yof2fc6o8]  .disc-a { color: #1D4ED8; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.disc-text[b-1yof2fc6o8]  .disc-a:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; border-radius: 2px; }
.disc-ok[b-1yof2fc6o8] {
    display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 20px;
    background: #F59F00; color: #1B2558; border: none; border-radius: 999px;
    padding: 13px 24px; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.disc-ok:focus-visible[b-1yof2fc6o8] { outline: 2px solid #1B2558; outline-offset: 3px; }
/* /Layout/DisclaimerLink.razor.rz.scp.css */
/* CR V7 item 11 — the Disclaimer link. Deliberately quiet: it must be findable on every screen
   without competing with the study's own controls. */
.disc-footer[b-ypqfs4s4h0] {
    display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
}
/* CR V9 item 4 */
.disc-copyright[b-ypqfs4s4h0] {
    font-family: 'Inter', sans-serif; font-size: 11px; line-height: 1.5;
    color: #8A93A3; text-align: center;
}
.disc-copyright.dark[b-ypqfs4s4h0] { color: rgba(255,255,255,.55); }
.disc-link[b-ypqfs4s4h0] {
    background: none; border: none; padding: 4px 2px; cursor: pointer;
    font-family: 'Inter', 'Noto Sans SC', sans-serif; font-size: 12.5px; font-weight: 600;
    color: #6B7280; text-decoration: underline; text-underline-offset: 2px;
}
.disc-link:hover[b-ypqfs4s4h0] { color: #1B2558; }
.disc-link.dark[b-ypqfs4s4h0] { color: rgba(255,255,255,.72); }
.disc-link.dark:hover[b-ypqfs4s4h0] { color: #fff; }
.disc-link:focus-visible[b-ypqfs4s4h0] { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
/* /Layout/LanguageSwitcher.razor.rz.scp.css */
/* CR #35 — light-background counterpart to the simulation top bar's toggle. */
.lang-switch[b-nm98caozvs] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F4F5F7;
    border: 1px solid #E4E7EC;
    color: #1B2558;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

.lang-switch:hover[b-nm98caozvs] {
    background: #EEF1FA;
    border-color: #C7D0E8;
}

.lang-switch .material-symbols-outlined[b-nm98caozvs] {
    font-size: 15px;
    color: #6B7280;
}

/* CR V6 W6 — on the PIDM-blue intro and setup screens. */
.lang-switch-dark[b-nm98caozvs] {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
.lang-switch-dark:hover[b-nm98caozvs] {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .45);
}
.lang-switch-dark .material-symbols-outlined[b-nm98caozvs] { color: #DCE3F5; }
/* /Layout/MainLayout.razor.rz.scp.css */
/* No sidebar layout — BankRun MY uses full-page views */
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-66lspzcswl] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-66lspzcswl] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-66lspzcswl] {
    font-size: 1.1rem;
}

.bi[b-66lspzcswl] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-66lspzcswl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-66lspzcswl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-66lspzcswl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-66lspzcswl] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-66lspzcswl] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-66lspzcswl] {
        padding-bottom: 1rem;
    }

    .nav-item[b-66lspzcswl]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-66lspzcswl]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-66lspzcswl]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-66lspzcswl] {
        display: none;
    }

    .collapse[b-66lspzcswl] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-66lspzcswl] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Layout/StudyProgress.razor.rz.scp.css */
.study-progress[b-62mqlvm8b9] {
    height: 8px;
    border-radius: 999px;
    background: #EDE9FE;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.study-progress-fill[b-62mqlvm8b9] {
    height: 100%;
    border-radius: 999px;
    background: #7C3AED;
    transition: width .35s ease;
}
/* /Pages/BankDemo.razor.rz.scp.css */
/* CR V7 item 4 — the Bank Alpha app demo on How to Play step B. A scaled-down copy of the
   simulation's .bank-modal-app (Simulation.razor.css): same purple header, balance card, lilac
   tiles and option cards, so the participant meets the same app on Day 1. That stylesheet is
   scoped to Simulation.razor and cannot be shared, so the few rules needed are restated here.

   Timeline: a 12 s loop, one 3 s slot per action. Everything in slot k carries data-k="k", and
   the rules at the bottom shift its animations by k × 3 s. Within a slot (percentages of the
   whole 12 s loop): the tile is pressed at 3–6 %, the screen is up from 8 % to 21 %, its own
   movement (pick, slide, type) lands at 10–16 %, and it is gone by 23.5 %. */

.demo-app[b-fmp5h84sp4] {
    border-radius: 14px; overflow: hidden; background: #FCFAFF;
    box-shadow: 0 0 0 3px var(--ring), 0 0 0 7px rgba(255,255,255,.5), 0 10px 24px rgba(124,58,237,.18);
}

.demo-head[b-fmp5h84sp4] {
    display: flex; align-items: center; gap: 8px; padding: 10px 11px;
    background: linear-gradient(160deg, #5B21B6 0%, #6D28D9 60%, #7C3AED 100%);
}
.demo-mark[b-fmp5h84sp4] {
    width: 28px; height: 28px; border-radius: 9px; background: #fff; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.demo-mark img[b-fmp5h84sp4] { width: 18px; height: 18px; object-fit: contain; display: block; }
.demo-id[b-fmp5h84sp4] { min-width: 0; }
.demo-name[b-fmp5h84sp4] { font-size: 12.5px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.demo-sub[b-fmp5h84sp4] { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.82); }

/* The screens are laid over the home view, so the home view sets the height. */
.demo-stage[b-fmp5h84sp4] { position: relative; padding: 10px; min-height: 196px; }

.demo-balance[b-fmp5h84sp4] {
    position: relative; overflow: hidden; border-radius: 12px; padding: 10px 11px;
    background: linear-gradient(140deg, #5B21B6, #7C3AED);
}
.demo-balance[b-fmp5h84sp4]::after {
    content: ""; position: absolute; right: -18px; top: -22px;
    width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.10);
}
.demo-balance-label[b-fmp5h84sp4] { font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.72); }
.demo-balance-amount[b-fmp5h84sp4] { font-size: 17px; font-weight: 800; color: #fff; margin-top: 2px; }
.demo-chip[b-fmp5h84sp4] {
    display: inline-flex; margin-top: 6px; padding: 2px 7px; border-radius: 999px;
    background: rgba(255,255,255,.18); color: #fff; font-size: 8.5px; font-weight: 600;
}

/* 2×2, as in the app (CR V3 #9): a row of four leaves no room for the limit sub-line. */
.demo-grid[b-fmp5h84sp4] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin-top: 8px; }
.demo-tile[b-fmp5h84sp4] {
    background: #F7F2FE; border: 1px solid #EDE4FB; border-radius: 10px;
    padding: 7px 4px; text-align: center; line-height: 1.2;
    animation: demoTile-b-fmp5h84sp4 12s linear infinite both;
}
.demo-tile .material-symbols-outlined[b-fmp5h84sp4] { font-size: 16px; color: #6D28D9; }
.demo-tile div[b-fmp5h84sp4] { font-size: 9px; font-weight: 700; color: #322C4A; margin-top: 2px; }
.demo-tile .demo-tile-sub[b-fmp5h84sp4] { font-size: 8px; font-weight: 600; color: #7C6FA0; margin-top: 1px; }

.demo-screen[b-fmp5h84sp4] {
    position: absolute; inset: 0; padding: 10px; overflow: hidden; background: #FCFAFF;
    opacity: 0; animation: demoScreen-b-fmp5h84sp4 12s ease-in-out infinite both;
}
.demo-title[b-fmp5h84sp4] { font-size: 12px; font-weight: 800; color: #1E1B3A; margin-bottom: 8px; }

/* Limit screen */
.demo-limit[b-fmp5h84sp4] { text-align: center; margin: 6px 0 10px; }
.demo-limit-amount[b-fmp5h84sp4] { position: relative; height: 22px; font-size: 18px; font-weight: 800; color: #6D28D9; }
.demo-from[b-fmp5h84sp4], .demo-to[b-fmp5h84sp4] { position: absolute; left: 0; right: 0; }
.demo-from[b-fmp5h84sp4] { animation: demoFrom-b-fmp5h84sp4 12s linear infinite both; }
.demo-to[b-fmp5h84sp4] { opacity: 0; animation: demoTo-b-fmp5h84sp4 12s linear infinite both; }
.demo-limit-sub[b-fmp5h84sp4] { font-size: 9px; color: #6B6480; margin-top: 2px; }
.demo-track[b-fmp5h84sp4] { position: relative; height: 5px; border-radius: 3px; background: #E9DEFB; margin: 0 4px; }
.demo-fill[b-fmp5h84sp4] { position: absolute; left: 0; top: 0; bottom: 0; width: 10%; border-radius: 3px; background: #7C3AED; animation: demoFill-b-fmp5h84sp4 12s ease-in-out infinite both; }
.demo-thumb[b-fmp5h84sp4] {
    position: absolute; top: 50%; left: 10%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
    border-radius: 50%; background: #7C3AED; box-shadow: 0 1px 4px rgba(45,10,90,.35);
    animation: demoThumb-b-fmp5h84sp4 12s ease-in-out infinite both;
}
.demo-range[b-fmp5h84sp4] { display: flex; justify-content: space-between; font-size: 8.5px; color: #8A80A8; margin-top: 6px; }

/* Option cards (transfer and deposit) */
.demo-opt[b-fmp5h84sp4] { border: 1.5px solid #EDE4FB; background: #FCFAFF; border-radius: 10px; padding: 7px 9px; margin-bottom: 6px; }
.demo-opt-label[b-fmp5h84sp4] { font-size: 10.5px; font-weight: 700; color: #1E1B3A; }
.demo-opt-sub[b-fmp5h84sp4] { font-size: 9px; color: #6B6480; margin-top: 1px; line-height: 1.3; }
.demo-opt.demo-off[b-fmp5h84sp4] { opacity: .45; }
.demo-pick[b-fmp5h84sp4] { animation: demoPick-b-fmp5h84sp4 12s linear infinite both; }

/* Withdraw screen */
.demo-note[b-fmp5h84sp4] {
    display: flex; gap: 5px; align-items: flex-start; padding: 6px 8px; border-radius: 9px;
    background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 9px; line-height: 1.35;
}
.demo-note .material-symbols-outlined[b-fmp5h84sp4] { font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.demo-field[b-fmp5h84sp4] {
    display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 10px;
    border: 1px solid #7C3AED; background: #fff; border-radius: 10px;
}
.demo-prefix[b-fmp5h84sp4] { font-size: 10.5px; font-weight: 800; color: #6D28D9; }
/* The amount is "typed": its box widens a character at a time, then a caret blinks after it. */
.demo-typed[b-fmp5h84sp4] {
    display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
    max-width: 0; font-size: 11px; font-weight: 700; color: #1E1B3A;
    border-right: 1.5px solid #7C3AED; padding-right: 1px;
    animation: demoType-b-fmp5h84sp4 12s steps(5, end) infinite both;
}

/* ── Keyframes (percent of the 12 s loop; each slot is 25 %) ── */
@keyframes demoTile-b-fmp5h84sp4 {
    0%, 2%   { transform: none; background: #F7F2FE; border-color: #EDE4FB; box-shadow: none; }
    3%, 6%   { transform: scale(.94); background: #EDE4FB; border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,.25); }
    8%, 100% { transform: none; background: #F7F2FE; border-color: #EDE4FB; box-shadow: none; }
}
@keyframes demoScreen-b-fmp5h84sp4 {
    0%, 6%      { opacity: 0; transform: translateX(18px); }
    8%, 21%     { opacity: 1; transform: none; }
    23.5%, 100% { opacity: 0; transform: translateX(-12px); }
}
@keyframes demoPick-b-fmp5h84sp4 {
    0%, 11%   { border-color: #EDE4FB; background: #FCFAFF; }
    13%, 100% { border-color: #7C3AED; background: #F4EEFE; }
}
@keyframes demoFill-b-fmp5h84sp4  { 0%, 10% { width: 10%; } 16%, 100% { width: 50%; } }
@keyframes demoThumb-b-fmp5h84sp4 { 0%, 10% { left: 10%; } 16%, 100% { left: 50%; } }
@keyframes demoFrom-b-fmp5h84sp4  { 0%, 12.5% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes demoTo-b-fmp5h84sp4    { 0%, 12.5% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes demoType-b-fmp5h84sp4  { 0%, 10% { max-width: 0; } 16%, 100% { max-width: 5ch; } }

/* Slot k starts k × 3 s into the loop. Applied to the slot's own elements and everything in them,
   so a screen and the movement inside it stay in step. */
[data-k="1"][b-fmp5h84sp4], [data-k="1"] *[b-fmp5h84sp4] { animation-delay: 3s; }
[data-k="2"][b-fmp5h84sp4], [data-k="2"] *[b-fmp5h84sp4] { animation-delay: 6s; }
[data-k="3"][b-fmp5h84sp4], [data-k="3"] *[b-fmp5h84sp4] { animation-delay: 9s; }

/* Reduced motion: the app's home view, still. Nothing moves and no screen opens. */
@media (prefers-reduced-motion: reduce) {
    .demo-screen[b-fmp5h84sp4] { display: none; }
    .demo-tile[b-fmp5h84sp4] { animation: none; }
}
/* /Pages/Demographics.razor.rz.scp.css */
/* CR #28 / #39 — the boxed treatment for the longer questions: income, the savings/investment
   split and emergency savings. */
.demo-box[b-0g8ag5dpev] {
    border: 1px solid #E4E7EC;
    border-radius: 12px;
    padding: 16px;
    background: #FAFBFC;
}

.demo-box-label[b-0g8ag5dpev] {
    font-size: 13.5px;
    font-weight: 700;
    color: #1B2558;
    line-height: 1.45;
    margin-bottom: 10px;
}

.demo-box-range[b-0g8ag5dpev] {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: #9CA3AF;
}

/* CR V8 item 4 — the savings/investment split as eleven tap boxes (round 4 row 9 screenshot):
   two large figures over their names, then the boxes with a % under each, then a caption.
   Filled #7C3AED, empty #E9D5FF, as in the screenshot. */
.wealth-split[b-0g8ag5dpev] { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin: 6px 0 14px; }
.wealth-pct[b-0g8ag5dpev] { font-size: 30px; font-weight: 800; color: #1B2558; line-height: 1.15; }
.wealth-name[b-0g8ag5dpev] { font-size: 14px; font-weight: 600; color: #4B5563; margin-top: 4px; }
.wealth-boxes[b-0g8ag5dpev] { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.wealth-cell[b-0g8ag5dpev] { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.wealth-box[b-0g8ag5dpev] {
    width: 100%; height: 44px; border: none; border-radius: 8px; padding: 0; cursor: pointer;
    background: #E9D5FF; transition: background .12s ease;
}
.wealth-box:hover[b-0g8ag5dpev] { background: #DDC2FC; }
.wealth-box-on[b-0g8ag5dpev], .wealth-box-on:hover[b-0g8ag5dpev] { background: #7C3AED; }
.wealth-box:focus[b-0g8ag5dpev] { outline: none; }
.wealth-box:focus-visible[b-0g8ag5dpev] { outline: 2px solid #1B2558; outline-offset: 2px; }
.wealth-tick[b-0g8ag5dpev] { font-size: 10.5px; color: #6B7280; white-space: nowrap; }
.wealth-tick-on[b-0g8ag5dpev] { font-weight: 800; color: #1B2558; }
.wealth-caption[b-0g8ag5dpev] { text-align: center; font-size: 12.5px; color: #6B7280; margin-top: 10px; line-height: 1.4; }
@media (max-width: 480px) {
    .wealth-boxes[b-0g8ag5dpev] { gap: 3px; }
    .wealth-box[b-0g8ag5dpev] { height: 38px; border-radius: 6px; }
    .wealth-tick[b-0g8ag5dpev] { font-size: 9px; letter-spacing: -.02em; }
}
@media (prefers-reduced-motion: reduce) { .wealth-box[b-0g8ag5dpev] { transition: none; } }

/* Enhancements #4 — income slider + typed box, matching the tutorial's savings question. */
.demo-slide-label[b-0g8ag5dpev] { font-size: 12px; color: #7C3AED; font-weight: 600; }
.demo-range-input[b-0g8ag5dpev] { width: 100%; margin-top: 8px; accent-color: #5B21B6; }
.demo-amount[b-0g8ag5dpev] {
    display: flex; align-items: stretch; margin-top: 14px;
    border: 1px solid #DDD6F3; border-radius: 10px; overflow: hidden; background: #fff;
}
.demo-currency[b-0g8ag5dpev] {
    display: flex; align-items: center; padding: 0 14px; flex-shrink: 0;
    border-right: 1px solid #DDD6F3; font-size: 14px; font-weight: 800; color: #1B2558;
}
.demo-amount-input[b-0g8ag5dpev] {
    width: 100%; border: none; outline: none; background: #fff;
    padding: 12px 14px; font-size: 14px; color: #1B2558;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.demo-amount:focus-within[b-0g8ag5dpev] { border-color: #7C3AED; }

/* CR V7 follow-up — the question above its field, wrapping freely, so a long question is always
   fully visible on a phone. */
.demo-field[b-0g8ag5dpev] { display: flex; flex-direction: column; gap: 6px; }
.demo-q[b-0g8ag5dpev] { font-size: 13.5px; font-weight: 700; color: #1B2558; line-height: 1.45; }
.demo-missing[b-0g8ag5dpev] { font-size: 12px; color: #B45309; text-align: right; margin-top: 8px; }
/* /Pages/IntroFlow.razor.rz.scp.css */
/* CR V6 — Welcome / Your Role / How to Play. Visual reference: docs/UI_V8.zip (layout, colour,
   motion only — the copy is the pptx's). PIDM blue throughout, per pptx slide 1. Fonts are the
   self-hosted Inter / Noto Sans SC: V8 loads Google Fonts, which the 'self'-only CSP and COEP
   would block (CLAUDE.md, Security Headers). */

.intro-screen[b-pzddsyxgmd] {
    position: fixed; inset: 0; overflow-y: auto;
    background: rgb(39, 52, 114);
    display: flex; flex-direction: column; align-items: center;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* Above the disclaimer backdrop (DisclaimerDialog, z-index 1400): the legal text is exactly what
   someone may want to read in another language, and the mute must work while the music plays
   behind it. */
.intro-corner[b-pzddsyxgmd] {
    position: fixed; top: 14px; right: 14px; z-index: 1401;
    display: flex; align-items: center; gap: 8px;
}
.intro-sound[b-pzddsyxgmd] {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
    padding: 5px; cursor: pointer;
}
.intro-sound .material-symbols-outlined[b-pzddsyxgmd] { font-size: 16px; }

.intro-col[b-pzddsyxgmd] {
    width: 100%; max-width: 1040px; flex: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: clamp(56px, 7vh, 64px) 18px 24px;
}
.intro-col-narrow[b-pzddsyxgmd] { max-width: 520px; text-align: center; }

/* ── Welcome ── */
.intro-lockup[b-pzddsyxgmd] { width: 100%; max-width: 330px; height: auto; display: block; }
.intro-welcome-body[b-pzddsyxgmd] {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: clamp(28px, 6vh, 56px) 0;
}

.intro-chip[b-pzddsyxgmd] {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #FFC21A; background: rgba(245,183,0,.12); border: 1px solid rgba(245,183,0,.35);
    padding: 6px 12px; border-radius: 999px;
}
.intro-chip .material-symbols-outlined[b-pzddsyxgmd] { font-size: 15px; flex-shrink: 0; }

.intro-title[b-pzddsyxgmd] {
    color: #fff; font-size: clamp(28px, 6vw, 36px); font-weight: 800; line-height: 1.15;
    letter-spacing: -.02em; margin: 12px 0 0; text-align: center; text-wrap: balance;
}
.intro-title-xl[b-pzddsyxgmd] { font-size: clamp(30px, 7vw, 40px); margin-top: 14px; }
/* App.razor's FocusOnNavigate moves focus to the first h1; it is not interactive, so no ring. */
.intro-title:focus[b-pzddsyxgmd], .intro-title:focus-visible[b-pzddsyxgmd] { outline: none; }

.intro-rule[b-pzddsyxgmd] { width: 48px; height: 3px; border-radius: 2px; background: #F5B700; margin: 18px 0; }
.intro-rule-tight[b-pzddsyxgmd] { margin: 14px 0 0; }

.intro-lines[b-pzddsyxgmd] { display: flex; flex-direction: column; gap: 4px; color: #DCE3F5; font-size: 16.5px; line-height: 1.55; }
.intro-line-strong[b-pzddsyxgmd] { color: #fff; font-weight: 600; }

/* ── buttons ── */
.intro-btn-primary[b-pzddsyxgmd], .intro-btn-ghost[b-pzddsyxgmd] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 15px; font-weight: 800; border-radius: 999px; cursor: pointer;
}
.intro-btn-primary[b-pzddsyxgmd] {
    background: #F59F00; color: #1B2558; border: none; padding: 14px 30px;
    box-shadow: 0 10px 24px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease;
}
.intro-btn-primary:hover:not(:disabled)[b-pzddsyxgmd] { transform: translateY(-2px); }
.intro-btn-primary:disabled[b-pzddsyxgmd] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.intro-btn-primary .material-symbols-outlined[b-pzddsyxgmd], .intro-btn-ghost .material-symbols-outlined[b-pzddsyxgmd] { font-size: 19px; }
.intro-btn-lg[b-pzddsyxgmd] { font-size: 16px; padding: 15px 34px; margin-top: 30px; }
.intro-btn-ghost[b-pzddsyxgmd] {
    background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55);
    padding: 13px 24px; font-weight: 700; transition: background .15s ease;
}
.intro-btn-ghost:hover[b-pzddsyxgmd] { background: rgba(255,255,255,.1); }
.intro-btn-primary:focus-visible[b-pzddsyxgmd], .intro-btn-ghost:focus-visible[b-pzddsyxgmd] { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .intro-btn-primary[b-pzddsyxgmd], .intro-btn-primary:hover[b-pzddsyxgmd] { transition: none; transform: none; }
}
/* CR V8 item 10 — the same amber halo as Simulation's .proceed-btn-blink (round 4, additional
   comment 3), with the button's own drop shadow kept underneath, so it can't share that rule's
   keyframes. Reduced motion gets a static ring instead, as Proceed does. */
.intro-btn-pulse[b-pzddsyxgmd] { animation: intro-pulse-b-pzddsyxgmd 1.4s ease-in-out infinite; }
@keyframes intro-pulse-b-pzddsyxgmd {
    0%, 100% { box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 0 rgba(245,159,0,.55); }
    50%      { box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 8px rgba(245,159,0,0); }
}
@media (prefers-reduced-motion: reduce) {
    .intro-btn-pulse[b-pzddsyxgmd] { animation: none; outline: 3px solid rgba(245,159,0,.9); outline-offset: 3px; }
}

.intro-nav[b-pzddsyxgmd] { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ── disclaimer pop-up (CR V6 decision 7) ── */
/* CR V7 — the disclaimer pop-up moved to Layout/DisclaimerDialog.razor(.css). */

/* CR V7 item 11 — the Disclaimer link sits at the foot of every intro screen. */
.intro-foot[b-pzddsyxgmd] { width: 100%; margin-top: auto; }

/* ── Your Role ── */
.role-track[b-pzddsyxgmd] { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: clamp(24px, 4vh, 36px); }
.role-endcap[b-pzddsyxgmd] { display: flex; align-items: center; justify-content: flex-start; padding-left: 64px; }
.role-cap[b-pzddsyxgmd] {
    background: #F5B700; color: #14264F; font-size: 11.5px; font-weight: 800;
    letter-spacing: .08em; padding: 5px 11px; border-radius: 6px;
}
.role-steps[b-pzddsyxgmd] { position: relative; display: flex; flex-direction: column; gap: 22px; padding-left: 4px; }
.role-steps[b-pzddsyxgmd]::before {
    content: ''; position: absolute; left: 82px; top: 26px; bottom: 26px;
    border-left: 3px dashed rgba(205,235,250,.55);
}
.role-step[b-pzddsyxgmd] { display: flex; align-items: center; gap: 16px; }
.role-node[b-pzddsyxgmd] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.role-icon[b-pzddsyxgmd] {
    width: 52px; height: 52px; border-radius: 14px; background: #EAF1FF;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.role-icon .material-symbols-outlined[b-pzddsyxgmd] { font-size: 27px; color: #2F6FE4; }
.role-num[b-pzddsyxgmd] {
    width: 38px; height: 38px; border-radius: 50%; background: #1F2B5E; border: 2.5px solid #fff;
    color: #fff; font-size: 16px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.role-text[b-pzddsyxgmd] { min-width: 0; }
.role-step-title[b-pzddsyxgmd] { color: #FFC21A; font-size: 16px; font-weight: 700; line-height: 1.3; }
.role-step-body[b-pzddsyxgmd] { color: #DCE3F5; font-size: 14.5px; line-height: 1.5; margin-top: 4px; text-wrap: pretty; }

.role-notes[b-pzddsyxgmd] {
    width: 100%; max-width: 760px; margin-top: clamp(24px, 4vh, 36px);
    background: rgba(255,255,255,.07); border: 1px solid rgba(245,183,0,.45); border-radius: 14px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.role-note[b-pzddsyxgmd] { display: flex; align-items: flex-start; gap: 11px; color: #F1F4FB; font-size: 15px; line-height: 1.5; }
.role-note .material-symbols-outlined[b-pzddsyxgmd] { font-size: 21px; color: #FFC21A; flex-shrink: 0; }

@media (min-width: 860px) {
    .role-track[b-pzddsyxgmd] { flex-direction: row; align-items: flex-start; gap: 0; }
    .role-endcap[b-pzddsyxgmd] { padding: 87px 0 0; flex-shrink: 0; }
    .role-steps[b-pzddsyxgmd] { flex-direction: row; flex: 1; gap: 0; padding: 0; }
    .role-steps[b-pzddsyxgmd]::before { left: 4%; right: 4%; top: 96px; bottom: auto; border-left: 0; border-top: 3px dashed rgba(205,235,250,.55); }
    .role-step[b-pzddsyxgmd] { flex: 1; flex-direction: column; text-align: center; gap: 14px; padding: 0 10px; }
    .role-node[b-pzddsyxgmd] { flex-direction: column; gap: 14px; }
}

/* ── How to Play ── */
.htp-dots[b-pzddsyxgmd] { display: flex; gap: 6px; margin-top: 14px; }
.htp-dot[b-pzddsyxgmd] { width: 8px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); transition: width .2s ease, background .2s ease; }
.htp-dot.done[b-pzddsyxgmd] { background: rgba(255,255,255,.7); }
.htp-dot.on[b-pzddsyxgmd] { width: 22px; }

.htp-body[b-pzddsyxgmd] { display: flex; flex-direction: column; gap: 22px; width: 100%; margin-top: clamp(20px, 3.5vh, 32px); }
@media (min-width: 900px) {
    .htp-body[b-pzddsyxgmd] { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: center; gap: 32px; }
    .htp-body .htp-callout[b-pzddsyxgmd] { order: 2; }
    .htp-body.htp-stack[b-pzddsyxgmd] { display: flex; flex-direction: column; align-items: center; }
    .htp-body.htp-stack .htp-callout[b-pzddsyxgmd] { order: 0; }
}

.htp-callout[b-pzddsyxgmd] { display: flex; gap: 14px; align-items: flex-start; }
.htp-letter[b-pzddsyxgmd] {
    width: 52px; height: 52px; border-radius: 50%; color: #fff; font-size: 26px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.htp-copy[b-pzddsyxgmd] { min-width: 0; padding-top: 4px; }
.htp-lead[b-pzddsyxgmd] { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.5; margin-bottom: 8px; text-wrap: pretty; }
.htp-lines[b-pzddsyxgmd] { display: flex; flex-direction: column; gap: 8px; }
.htp-line[b-pzddsyxgmd] { display: flex; gap: 10px; align-items: baseline; color: #F1F4FB; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.htp-num[b-pzddsyxgmd] {
    width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.14); color: #FFC21A;
    font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; transform: translateY(-1px);
}

/* The static app picture for A–C. Not interactive: aria-hidden, no pointer events. */
.htp-mock[b-pzddsyxgmd] {
    border-radius: 16px; overflow: hidden; background: #F4F5F7; pointer-events: none;
    box-shadow: 0 18px 44px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
}
.htp-mock-bar[b-pzddsyxgmd] { background: #1B2558; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; }
.htp-mock-brand[b-pzddsyxgmd] { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 12.5px; font-weight: 800; }
/* CR V8 item 11 — the lab's flask, styled as the DDL chip: gold on a gold-tinted plate. */
.htp-mock-mark[b-pzddsyxgmd] { width: 20px; height: 20px; border-radius: 6px; background: rgba(245,183,0,.12); border: 1px solid rgba(245,183,0,.35); display: inline-flex; align-items: center; justify-content: center; }
.htp-mock-mark .material-symbols-outlined[b-pzddsyxgmd] { font-size: 14px; color: #FFC21A; }
.htp-mock-day[b-pzddsyxgmd] { color: #fff; font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,.14); padding: 3px 8px; border-radius: 999px; }
.htp-mock-grid[b-pzddsyxgmd] { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 10px; padding: 10px; }
.htp-mock-h[b-pzddsyxgmd] { font-size: 12px; font-weight: 800; color: #1A1A2E; }

.htp-feedcol[b-pzddsyxgmd], .htp-bankcol[b-pzddsyxgmd] { border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 7px; transition: opacity .2s ease; }
.htp-feedcol[b-pzddsyxgmd] { background: #EDEFF3; }
.htp-bankcol[b-pzddsyxgmd] { background: #fff; gap: 8px; }
.htp-feedcol.dim[b-pzddsyxgmd], .htp-bankcol.dim[b-pzddsyxgmd] { opacity: .32; }

.htp-item[b-pzddsyxgmd] {
    display: flex; gap: 8px; align-items: flex-start; background: #fff; border-radius: 10px;
    padding: 9px 10px; border-left: 3px solid; box-shadow: 0 1px 4px rgba(15,17,35,.06);
}
.htp-item.rest[b-pzddsyxgmd] { opacity: .45; }
.htp-item-icon[b-pzddsyxgmd] { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.htp-item-icon .material-symbols-outlined[b-pzddsyxgmd] { font-size: 14px; }
.htp-item-main[b-pzddsyxgmd] { min-width: 0; flex: 1; }
.htp-item-meta[b-pzddsyxgmd] { display: flex; justify-content: space-between; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.htp-new[b-pzddsyxgmd] { font-size: 8.5px; color: #1D4ED8; background: #DBEAFE; padding: 1px 5px; border-radius: 4px; letter-spacing: 0; }
.htp-item-title[b-pzddsyxgmd] {
    font-size: 11.5px; font-weight: 700; color: #1A1A2E; line-height: 1.35; margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.htp-bankcard[b-pzddsyxgmd] {
    background: linear-gradient(135deg, #F5F0FF, #EDE5FF); border: 1px solid #E2D6FB; border-radius: 12px;
    padding: 10px; display: flex; align-items: center; gap: 9px; color: #6D28D9;
}
.htp-bankcard > .material-symbols-outlined:first-child[b-pzddsyxgmd] { font-size: 22px; }
.htp-bankcard > .material-symbols-outlined:last-child[b-pzddsyxgmd] { font-size: 16px; }
.htp-bankcard-main[b-pzddsyxgmd] { flex: 1; min-width: 0; }
.htp-bankcard-badge[b-pzddsyxgmd] { font-size: 8.5px; font-weight: 800; }
.htp-bankcard-name[b-pzddsyxgmd] { font-size: 13px; font-weight: 800; color: #2E1065; }
.htp-bankcard-cta[b-pzddsyxgmd] { font-size: 10px; color: #5B21B6; }
.htp-bars[b-pzddsyxgmd] { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.htp-bars > div[b-pzddsyxgmd] { height: 6px; border-radius: 3px; background: #EDEFF3; }
.htp-bars span[b-pzddsyxgmd] { display: block; height: 100%; border-radius: 3px; }

.htp-mock-foot[b-pzddsyxgmd] { background: #fff; border-top: 1px solid #E4E7EC; padding: 9px 12px; display: flex; justify-content: flex-end; }
.htp-proceed[b-pzddsyxgmd] {
    display: inline-flex; align-items: center; gap: 5px; background: #F59F00; color: #1B2558;
    font-size: 11.5px; font-weight: 800; padding: 8px 14px; border-radius: 999px;
}
.htp-proceed .material-symbols-outlined[b-pzddsyxgmd] { font-size: 13px; }
.htp-proceed.dim[b-pzddsyxgmd] { opacity: .32; }

/* The highlight, in the current step's colour (--ring). */
.htp-item.ring[b-pzddsyxgmd], .htp-bankcard.ring[b-pzddsyxgmd], .htp-proceed.ring[b-pzddsyxgmd] { box-shadow: 0 0 0 3px var(--ring), 0 0 0 7px rgba(255,255,255,.5); }

/* CR V7 item 1 (UI_V9) — the simulation's Live Feed / My Bank switcher, and B's tip about it.
   Hidden on wide screens, where the app shows both panels side by side. */
.htp-mock-tabband[b-pzddsyxgmd] { display: none; background: #1B2558; padding: 0 12px 10px; }
.htp-mock-tabs[b-pzddsyxgmd] { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.1); }
.htp-mock-tab[b-pzddsyxgmd] {
    flex: 1; text-align: center; padding: 7px 0; border-radius: 999px;
    font-size: 12px; font-weight: 700; color: #fff;
}
.htp-mock-tab.on[b-pzddsyxgmd] { background: #fff; color: #1B2558; }
.htp-mock-tab.ring[b-pzddsyxgmd] { box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px rgba(255,255,255,.5); }
.htp-tab-hint[b-pzddsyxgmd] {
    display: none; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 11px 12px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(245,183,0,.45); border-radius: 12px;
    color: #F1F4FB; font-size: 15px; line-height: 1.5;
}
.htp-tab-hint .material-symbols-outlined[b-pzddsyxgmd] { font-size: 20px; color: #FFC21A; flex-shrink: 0; }

/* Step B on wide screens: the opened bank app needs more room than the dimmed feed. */
@media (min-width: 900px) {
    .htp-mock[data-focus="bank"] .htp-mock-grid[b-pzddsyxgmd] { grid-template-columns: minmax(0,.8fr) minmax(0,1.25fr); }
}

/* Phones and small tablets: the app splits into tabs below 900 px (Simulation.razor.css), so the
   mock does too, showing only the half the step is about. CR V7 item 1 — was 599 px, which left
   600–899 px showing a two-column mock and then a tabbed app. */
@media (max-width: 899px) {
    .htp-mock[data-focus="feed"] .htp-bankcol[b-pzddsyxgmd], .htp-mock[data-focus="proceed"] .htp-bankcol[b-pzddsyxgmd] { display: none; }
    .htp-mock[data-focus="bank"] .htp-feedcol[b-pzddsyxgmd] { display: none; }
    .htp-mock-grid[b-pzddsyxgmd] { grid-template-columns: minmax(0,1fr); }
    .htp-mock-tabband[b-pzddsyxgmd] { display: block; }
    .htp-tab-hint[b-pzddsyxgmd] { display: flex; }
}

/* D — the report card, blurred, with a question mark over it (pptx slide 6). */
.htp-mystery-wrap[b-pzddsyxgmd] { display: flex; justify-content: center; }
.htp-mystery[b-pzddsyxgmd] { position: relative; width: 100%; max-width: 280px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.htp-mystery-blur[b-pzddsyxgmd] { filter: blur(5px); padding: 14px; }
.htp-mystery-art[b-pzddsyxgmd] { height: 150px; border-radius: 12px; background: linear-gradient(180deg, #FFE7D6, #FFF7F1); display: flex; align-items: center; justify-content: center; }
.htp-mystery-art .material-symbols-outlined[b-pzddsyxgmd] { font-size: 72px; color: #C2410C; }
.htp-mystery-name[b-pzddsyxgmd] { height: 14px; width: 60%; background: #D0D5DD; border-radius: 4px; margin: 14px auto 10px; }
.htp-mystery-lines[b-pzddsyxgmd] { display: flex; flex-direction: column; gap: 7px; }
.htp-mystery-lines div[b-pzddsyxgmd] { height: 8px; background: #EAECF0; border-radius: 4px; }
.htp-mystery-lines div:nth-child(2)[b-pzddsyxgmd] { width: 92%; }
.htp-mystery-lines div:nth-child(3)[b-pzddsyxgmd] { width: 80%; }
.htp-mystery-lines div:nth-child(4)[b-pzddsyxgmd] { width: 86%; }
.htp-mystery-q[b-pzddsyxgmd] {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(39,52,114,.18);
    font-size: 150px; font-weight: 800; line-height: 1; color: #1B2558; text-shadow: 0 6px 18px rgba(255,255,255,.6);
}

/* E — Start. */
.htp-start[b-pzddsyxgmd] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px 0; }
.htp-play[b-pzddsyxgmd] {
    width: 96px; height: 96px; border-radius: 50%; background: #F59F00; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 8px rgba(245,159,0,.18), 0 12px 28px rgba(0,0,0,.3); transition: transform .15s ease;
}
.htp-play:hover[b-pzddsyxgmd] { transform: scale(1.05); }
.htp-play:focus-visible[b-pzddsyxgmd] { outline: 2px solid #fff; outline-offset: 4px; }
.htp-play-tri[b-pzddsyxgmd] { width: 0; height: 0; border-top: 19px solid transparent; border-bottom: 19px solid transparent; border-left: 31px solid #1B2558; margin-left: 7px; }
.htp-start-label[b-pzddsyxgmd] {
    background: none; border: none; cursor: pointer; font-family: inherit;
    color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .08em;
}
@media (prefers-reduced-motion: reduce) {
    .htp-play[b-pzddsyxgmd], .htp-play:hover[b-pzddsyxgmd] { transition: none; transform: none; }
}
/* /Pages/Report.razor.rz.scp.css */
/* Bank Alpha MY v3 — behavioural profile, card-deck variant.
   Layout and palette from redesign handoff v4 ("card", not the editorial variant — decision D1);
   scoring and copy rules from docs/CHANGE_REQUESTS_V3.md Part 3.

   --accent is set inline per card from the TRAIT, so every accented rule reads from it and the
   five traits need no per-trait CSS. It is keyed on the trait rather than the character because
   the shared Neutral figure can appear on up to four cards in one report — the accent is what
   keeps those cards distinguishable. */

.profile-page[b-56fjyiy33d] {
    position: fixed; inset: 0; z-index: 200; background: #F7F9FC;
    overflow-y: auto; font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* ── navy page header ── */
.page-header[b-56fjyiy33d] {
    background: linear-gradient(165deg, #0F2050 0%, #16306B 100%);
    padding: 26px 20px 30px; text-align: center; position: relative;
    border-radius: 0 0 34px 34px;
}
.header-brand[b-56fjyiy33d] {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
    color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
/* CR V8 item 11 — the lab's flask, styled as the intro's DDL chip. */
.header-brand .material-symbols-outlined[b-56fjyiy33d] {
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; letter-spacing: 0; text-transform: none; color: #FFC21A;
    background: rgba(245,183,0,.12); border: 1px solid rgba(245,183,0,.35); border-radius: 6px;
}
.header-title[b-56fjyiy33d] { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.header-sub[b-56fjyiy33d] { color: rgba(255,255,255,.68); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
/* CR #35 — language control tucked into the top-right */
.lang-corner[b-56fjyiy33d] { position: absolute; top: 16px; right: 16px; z-index: 2; }

.result-wrap[b-56fjyiy33d] {
    max-width: 480px; margin: 0 auto; padding: 20px 16px 40px;
    display: flex; flex-direction: column; gap: 14px;
}

/* ── waiting / unavailable ── */
.report-wait[b-56fjyiy33d] {
    position: fixed; inset: 0; z-index: 200; background: #1B2558;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px; font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.wait-text[b-56fjyiy33d] { color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.65; max-width: 320px; margin-top: 18px; }
.wait-icon[b-56fjyiy33d] { color: #F59F00; font-size: 40px; }
.spinner[b-56fjyiy33d] {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.2); border-top-color: #F59F00;
    animation: spin-b-56fjyiy33d .8s linear infinite;
}
@keyframes spin-b-56fjyiy33d { to { transform: rotate(360deg); } }

/* ── completion pill ── */
.done-pill[b-56fjyiy33d] {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    font-size: 12.5px; font-weight: 600; color: #6EE7A8;
    background: rgba(110,231,168,.1); border: 1px solid rgba(110,231,168,.32);
    padding: 8px 18px; border-radius: 999px;
}
.done-pill .material-symbols-outlined[b-56fjyiy33d] { font-size: 16px; }

.deck-intro[b-56fjyiy33d] { font-size: 12.5px; color: #6B7A94; text-align: center; line-height: 1.55; }

/* ── the hero card (CR V4 item 12) ──
   One card, centred. It was a snap carousel of three to five — the focus groups read that as
   several competing verdicts rather than one result. */
.hero-wrap[b-56fjyiy33d] { display: flex; justify-content: center; }
.hero-wrap > .rcard[b-56fjyiy33d] { width: 100%; max-width: 320px; }

/* ── the traits that did not win the card ──
   Named and described, never scored: the score is what made the deck read as a grade. */
.others-title[b-56fjyiy33d] {
    font-size: 13px; font-weight: 800; color: #14264F; margin: 6px 0 -4px;
}
.others-grid[b-56fjyiy33d] { display: grid; grid-template-columns: 1fr; gap: 10px; }
.other-card[b-56fjyiy33d] {
    background: #fff; border: 1px solid #E6ECF5; border-left: 3px solid var(--accent);
    border-radius: 12px; padding: 13px 15px;
}
.other-trait[b-56fjyiy33d] {
    display: flex; align-items: center; gap: 6px;
    /* Enhancements #8 — the label is now a question, so sentence case at reading size (UI_V7);
       uppercase tracking made a full sentence hard to read. */
    font-size: 14px; font-weight: 800; color: #14264F; line-height: 1.3; letter-spacing: -.01em;
}
.other-trait .material-symbols-outlined[b-56fjyiy33d] { color: var(--accent); }
.other-trait .material-symbols-outlined[b-56fjyiy33d] { font-size: 14px; flex-shrink: 0; }
.other-desc[b-56fjyiy33d] { font-size: 12.5px; color: #4A5A76; line-height: 1.65; margin-top: 7px; }

/* ── character gallery (CR V4 item 12.4) ── */
.gallery-block[b-56fjyiy33d] { padding: 0; overflow: hidden; }
.gallery-toggle[b-56fjyiy33d] {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: none; border: none; padding: 15px 18px; cursor: pointer;
    font-family: inherit; text-align: left;
}
.gallery-toggle > .material-symbols-outlined[b-56fjyiy33d] { font-size: 24px; color: #667085; flex-shrink: 0; }
.gallery-toggle-text[b-56fjyiy33d] { flex: 1; min-width: 0; }
.gallery-toggle-title[b-56fjyiy33d] { display: block; font-size: 13.5px; font-weight: 800; color: #14264F; }
.gallery-toggle-sub[b-56fjyiy33d] { display: block; font-size: 12px; color: #6B7A94; margin-top: 2px; }
.gallery-toggle-cta[b-56fjyiy33d] { font-size: 11.5px; font-weight: 700; color: #1D4ED8; flex-shrink: 0; }

.gallery-grid[b-56fjyiy33d] {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px;
    border-top: 1px solid #EEF2F8; padding: 14px;
}
.gallery-item[b-56fjyiy33d] {
    position: relative; display: flex; flex-direction: column; align-items: center;
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    border: 1px solid #EEF2F8; border-radius: 11px; padding: 11px 9px 12px; text-align: center;
    font-family: inherit; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.gallery-item:hover[b-56fjyiy33d] { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,38,79,.1); }
.gallery-item:focus-visible[b-56fjyiy33d] { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-item.yours[b-56fjyiy33d] { border-color: var(--accent); }
/* Enhancements #10 — the tile is now a button; the corner icon says so. */
.gallery-info[b-56fjyiy33d] { position: absolute; top: 7px; right: 7px; font-size: 16px; color: #667085; }
.gallery-art[b-56fjyiy33d] { width: 100%; height: 62px; display: flex; align-items: flex-end; justify-content: center; }
.gallery-art picture[b-56fjyiy33d] { display: block; height: 100%; }
.gallery-art img[b-56fjyiy33d] { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.gallery-name[b-56fjyiy33d] { font-size: 11.5px; font-weight: 700; color: #14264F; line-height: 1.25; margin-top: 7px; }
.gallery-yours[b-56fjyiy33d] {
    display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: #fff; background: var(--accent);
    padding: 2px 7px; border-radius: 999px; margin-top: 6px;
}

.rcard[b-56fjyiy33d] {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #E6ECF5; border-top: 3px solid var(--accent);
    border-radius: 14px;
    animation: riseIn-b-56fjyiy33d .45s ease both;
}
/* Accent wash behind the artwork only — pointer-events off so it never intercepts a tap. */
.rcard-tint[b-56fjyiy33d] {
    position: absolute; left: 0; right: 0; top: 0; height: 230px; pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, #fff) 0%, #fff 100%);
}

.rcard-trait[b-56fjyiy33d] {
    position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 16px 0;
    /* Enhancements #8 — a question now, so sentence case (UI_V7: 12.5px / 800). */
    font-size: 12.5px; font-weight: 800; color: var(--accent); line-height: 1.3;
}
.rcard-trait .material-symbols-outlined[b-56fjyiy33d] { font-size: 19px; }

.rcard-art[b-56fjyiy33d] {
    position: relative; height: 176px; display: flex; align-items: flex-end; justify-content: center;
    padding: 8px 14px 0;
}
.rcard-art picture[b-56fjyiy33d] { display: block; height: 100%; }
.rcard-art img[b-56fjyiy33d] { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }

.rcard-name[b-56fjyiy33d] {
    position: relative; padding: 14px 18px 0; text-align: center;
    font-size: 20px; font-weight: 800; color: #14264F; line-height: 1.2; letter-spacing: -.01em;
}
.rcard-rule[b-56fjyiy33d] { position: relative; height: 1px; background: #E9EEF6; margin: 15px 18px 0; }

.rcard-desc[b-56fjyiy33d] {
    position: relative; padding: 14px 18px 20px;
    font-size: 13px; color: #4A5A76; line-height: 1.72;
}

/* ── closing note ── */
.block[b-56fjyiy33d] { background: #fff; border: 1px solid #E6ECF5; border-radius: 14px; padding: 16px 18px; }
.closing-block[b-56fjyiy33d] { display: flex; align-items: flex-start; gap: 14px; }
.closing-icon[b-56fjyiy33d] { font-size: 26px; color: #9AA9C4; flex-shrink: 0; }
/* CR V9 item 9 — the lead lines are gone, so the paragraph no longer needs a divider above it. */
.closing-shared[b-56fjyiy33d] { font-size: 12.5px; color: #6B7A94; line-height: 1.65; }

/* Desktop: the carousel becomes a centred wrapping grid. The per-count max-widths stop four
   cards stringing out into a single thin row — 4 wraps as 2×2, 5 as 3+2. */
@media (min-width: 760px) {
    .result-wrap[b-56fjyiy33d] { max-width: 760px; }
    .others-grid[b-56fjyiy33d] { grid-template-columns: 1fr 1fr; }
    .gallery-grid[b-56fjyiy33d] { grid-template-columns: repeat(4, 1fr); }
}

/* ── character sheet (Enhancements #10, per UI_V7) ──
   A bottom sheet on phones, a centred dialog from 620px. */
.char-sheet-wrap[b-56fjyiy33d] {
    position: fixed; inset: 0; z-index: 240; background: rgba(15,17,35,.55);
    display: flex; justify-content: center; align-items: flex-end; padding: 0;
}
.char-sheet[b-56fjyiy33d] {
    width: 100%; max-width: 440px; max-height: 88dvh; overflow-y: auto; background: #fff;
    border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(12,16,38,.25);
    animation: sheetUp-b-56fjyiy33d .22s ease-out;
}
@media (min-width: 620px) {
    .char-sheet-wrap[b-56fjyiy33d] { align-items: center; padding: 20px; }
    .char-sheet[b-56fjyiy33d] { border-radius: 22px; max-height: 86vh; }
}
@keyframes sheetUp-b-56fjyiy33d {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .char-sheet[b-56fjyiy33d] { animation: none; } }

.char-sheet-head[b-56fjyiy33d] {
    position: relative; padding: 10px 18px 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, #fff) 0%, #fff 100%);
}
.char-sheet-grip[b-56fjyiy33d] { width: 40px; height: 4px; border-radius: 2px; background: #D0D5DD; margin: 0 auto 6px; }
.char-sheet-close[b-56fjyiy33d] {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid #E6ECF5; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.char-sheet-close .material-symbols-outlined[b-56fjyiy33d] { font-size: 19px; color: #344054; }
.char-sheet-art[b-56fjyiy33d] { height: 168px; display: flex; align-items: flex-end; justify-content: center; padding-top: 14px; }
.char-sheet-art picture[b-56fjyiy33d] { display: block; height: 100%; }
.char-sheet-art img[b-56fjyiy33d] { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }

.char-sheet-title[b-56fjyiy33d] { padding: 16px 22px 8px; text-align: center; }
.char-sheet-yours[b-56fjyiy33d] {
    display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: #fff; background: var(--accent);
    padding: 4px 10px; border-radius: 999px; margin-bottom: 8px;
}
.char-sheet-name[b-56fjyiy33d] { font-size: 24px; font-weight: 800; color: #14264F; line-height: 1.2; letter-spacing: -.015em; }

.char-sheet-body[b-56fjyiy33d] { margin: 10px 22px 6px; border-top: 1px solid #EEF2F8; padding-top: 14px; }
.char-sheet-label[b-56fjyiy33d] {
    display: flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent);
}
.char-sheet-label .material-symbols-outlined[b-56fjyiy33d] { font-size: 17px; }
.char-sheet-about[b-56fjyiy33d] { font-size: 15.5px; color: #1D2939; line-height: 1.65; margin-top: 7px; text-wrap: pretty; }

.char-sheet-nav[b-56fjyiy33d] {
    position: sticky; bottom: 0; background: #fff; border-top: 1px solid #EEF2F8;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 10px; margin-top: 12px;
}
.char-sheet-step[b-56fjyiy33d] {
    width: 48px; height: 48px; border-radius: 12px; border: 1px solid #D0D5DD; background: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.char-sheet-step .material-symbols-outlined[b-56fjyiy33d] { font-size: 22px; color: #344054; }
.char-sheet-pos[b-56fjyiy33d] { flex: 1; text-align: center; font-size: 13px; font-weight: 700; color: #475467; }

.btn-trace[b-56fjyiy33d] {
    align-self: center; display: inline-flex; align-items: center; gap: 7px;
    background: #fff; border: 1px solid #DFE6F1; border-radius: 10px;
    padding: 11px 18px; font-size: 12.5px; font-weight: 700; color: #14264F;
    font-family: inherit; cursor: pointer;
}
.btn-trace .material-symbols-outlined[b-56fjyiy33d] { font-size: 16px; }

.trace-error[b-56fjyiy33d] { text-align: center; font-size: 12px; color: #B91C1C; }

.btn-vodus-return[b-56fjyiy33d] {
    align-self: center; display: inline-flex; align-items: center; gap: 7px;
    background: #1B2558; color: #fff; border-radius: 999px;
    padding: 12px 22px; font-size: 13px; font-weight: 700; text-decoration: none;
}
.btn-vodus-return .material-symbols-outlined[b-56fjyiy33d] { font-size: 16px; }


@keyframes riseIn-b-56fjyiy33d {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rcard[b-56fjyiy33d] { animation: none; }
    .spinner[b-56fjyiy33d] { animation: none; }
}
/* /Pages/Simulation.razor.rz.scp.css */
/* BankRun MY v2 — simulation screen, per Claude Design handoff
   "BankRun Simulation Redesign.dc.html" */

.sim-root[b-9n8cny5kx4] {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #F4F5F7;
    overflow: hidden;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* ── Top bar ── */
.top-bar[b-9n8cny5kx4] {
    background: #1B2558;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* CR #33 — contains the sun/moon/stars layer; children sit above it */
    position: relative;
    overflow: hidden;
    transition: background 1s linear;
}
.top-bar > .brand[b-9n8cny5kx4],
.top-bar > div:not(.sky-sun):not(.sky-moon):not(.sky-stars)[b-9n8cny5kx4] { position: relative; z-index: 1; }
.brand[b-9n8cny5kx4] { display: flex; align-items: center; gap: 8px; }
/* CR V8 item 11 — the lab's flask, styled as the intro's DDL chip: gold on a gold-tinted plate. */
.brand-icon[b-9n8cny5kx4] {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    background: rgba(245,183,0,.12); border: 1px solid rgba(245,183,0,.35);
    display: flex; align-items: center; justify-content: center;
}
.brand-icon .material-symbols-outlined[b-9n8cny5kx4] { font-size: 20px; color: #FFC21A; }
.brand-name[b-9n8cny5kx4] { color: #fff; font-weight: 800; font-size: 15px; }
/* CR V8 item 11 — "Depositor Decision Lab" is twice the length of "Bank Alpha". At phone width
   it shares the bar with the language, sound, clock and day chips and wraps a word per line; at
   15px that pushed the bar 3px past 390px. Smaller and tighter, the bar keeps its old height
   (the BM day chip already set it at three lines). Below 380px the bar's padding and the icon
   give up the 16px a 360px phone still lacked. Keep the brand's default min-width: with
   min-width 0 the name is squeezed under its longest word and "Decision" overprints the
   language chip. At 320px the bar overflows, as it did with "Bank Alpha". */
@media (max-width: 599px) {
    .brand[b-9n8cny5kx4] { gap: 6px; }
    .brand-icon[b-9n8cny5kx4] { width: 26px; height: 26px; }
    .brand-icon .material-symbols-outlined[b-9n8cny5kx4] { font-size: 18px; }
    .brand-name[b-9n8cny5kx4] { font-size: 12.5px; line-height: 1.15; }
}
@media (max-width: 379px) {
    .top-bar[b-9n8cny5kx4] { padding-left: 10px; padding-right: 10px; }
    .brand[b-9n8cny5kx4] { gap: 5px; }
    .brand-icon[b-9n8cny5kx4] { width: 22px; height: 22px; border-radius: 6px; }
    .brand-icon .material-symbols-outlined[b-9n8cny5kx4] { font-size: 15px; }
}
.brand-name span[b-9n8cny5kx4] { color: #F59F00; }
.day-chip[b-9n8cny5kx4] {
    background: rgba(255,255,255,.12); color: #fff; padding: 6px 12px;
    border-radius: 20px; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.day-chip .material-symbols-outlined[b-9n8cny5kx4] { font-size: 15px; }

/* ── CR #33: sky + in-world clock in the top bar ── */
.sky-sun[b-9n8cny5kx4], .sky-moon[b-9n8cny5kx4] {
    position: absolute; border-radius: 50%; transform: translate(-50%, -50%);
    pointer-events: none;
    transition: left 1s linear, top 1s linear, opacity 1s linear;
}
.sky-sun[b-9n8cny5kx4] {
    width: 26px; height: 26px;
    background: radial-gradient(circle at 35% 35%, #FFE9A8, #F59F00);
    box-shadow: 0 0 22px 6px rgba(245,159,0,.45);
}
.sky-moon[b-9n8cny5kx4] {
    width: 20px; height: 20px;
    background: radial-gradient(circle at 32% 32%, #F8FAFC, #CBD5E1);
    box-shadow: 0 0 18px 5px rgba(203,213,225,.35);
}
.sky-stars[b-9n8cny5kx4] {
    position: absolute; inset: 0; pointer-events: none;
    transition: opacity 1s linear;
}
.sky-stars span[b-9n8cny5kx4] { position: absolute; border-radius: 50%; background: #fff; }

.clock-chip[b-9n8cny5kx4] {
    background: rgba(255,255,255,.12); color: #fff; padding: 6px 10px;
    border-radius: 20px; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; gap: 6px;
}
.clock-face[b-9n8cny5kx4] {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.85);
    position: relative; flex-shrink: 0;
}
.clock-hand-hour[b-9n8cny5kx4], .clock-hand-min[b-9n8cny5kx4] {
    position: absolute; left: 50%; top: 50%; width: 1.5px; border-radius: 1px;
    transform-origin: 50% 100%; transition: transform .4s ease;
}
.clock-hand-hour[b-9n8cny5kx4] { height: 4.5px; background: #fff; }
.clock-hand-min[b-9n8cny5kx4]  { height: 6px;   background: #F59F00; }

/* ── Mobile tab switcher ── */
.tab-switcher[b-9n8cny5kx4] { display: flex; background: #1B2558; padding: 0 16px 12px; }
.tab-track[b-9n8cny5kx4] {
    display: flex; background: rgba(255,255,255,.1); border-radius: 999px;
    padding: 3px; width: 100%; gap: 2px;
}
.tab-btn[b-9n8cny5kx4] {
    flex: 1; text-align: center; padding: 8px 0; border-radius: 999px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    background: transparent; color: rgba(255,255,255,.65);
}
.tab-btn.active[b-9n8cny5kx4] { background: #fff; color: #1B2558; }

/* ── Panels ── */
.panels-grid[b-9n8cny5kx4] {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    gap: 12px; padding: 0 12px 12px; margin-top: 12px;
}
.news-panel[b-9n8cny5kx4], .banks-panel[b-9n8cny5kx4] { display: none; min-height: 0; }
.panels-grid[data-tab="feed"] .news-panel[b-9n8cny5kx4] { display: flex; }
.panels-grid[data-tab="banks"] .banks-panel[b-9n8cny5kx4] { display: flex; }

@media (min-width: 900px) {
    .panels-grid[b-9n8cny5kx4] {
        display: grid; grid-template-columns: 1fr 360px;
        gap: 0; padding: 20px;
        width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto;
    }
    .news-panel[b-9n8cny5kx4], .banks-panel[b-9n8cny5kx4] { display: flex !important; }
    .tab-switcher[b-9n8cny5kx4] { display: none; }

    /* Joined-card look: the two panels read as one dashboard card
       sharing a single divider instead of two boxes with a gap */
    .news-panel[b-9n8cny5kx4] { border-radius: 16px 0 0 16px; border-right: none; }
    .banks-panel[b-9n8cny5kx4] { border-radius: 0 16px 16px 0; border-left: 1px solid #E4E7EC; }
}

.panel[b-9n8cny5kx4] {
    flex-direction: column; background: #fff; border-radius: 16px;
    overflow: hidden; border: 1px solid #E4E7EC;
}
.panel-header[b-9n8cny5kx4] { padding: 16px; border-bottom: 1px solid #E4E7EC; flex-shrink: 0; }
.panel-title[b-9n8cny5kx4] { font-size: 15px; font-weight: 800; color: #1A1A2E; }
.panel-sub[b-9n8cny5kx4] { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
.panel-body[b-9n8cny5kx4] { flex: 1; overflow-y: auto; }

/* Tinted feed body so the white notification cards read as separate items
   rather than rows in a list. Header stays white to anchor the panel. */
.news-panel[b-9n8cny5kx4] { background: #EDEFF3; }
.news-panel .panel-header[b-9n8cny5kx4] { background: #fff; }
.news-panel .panel-body[b-9n8cny5kx4] { padding: 10px 10px 4px; }

/* ── Feed items ──
   CR: cards on a tinted panel rather than a flat divided list, with a channel
   accent down the left edge. Read state is carried by .read / .unread. */
.feed-item[b-9n8cny5kx4] {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px; margin-bottom: 8px;
    border-radius: 14px; cursor: pointer;
    border-left: 3px solid transparent;      /* colour set inline per channel */
    box-shadow: 0 2px 10px rgba(15,17,35,.08);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.feed-item:hover[b-9n8cny5kx4] {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 18px rgba(15,17,35,.14);
    background: #fff;
}
.feed-item.unread[b-9n8cny5kx4] { background: rgba(255,255,255,.96); }
.feed-item.read[b-9n8cny5kx4]   { background: rgba(255,255,255,.6); }
.feed-item.read .feed-title[b-9n8cny5kx4] { font-weight: 500; color: #6B7280; }

/* New-item entrance: slide down + fade, then an amber highlight that washes out.
   Plays once on DOM insertion — items are @key-ed so re-renders don't replay it. */
@keyframes feed-enter-b-9n8cny5kx4 {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes feed-flash-b-9n8cny5kx4 {
    0%   { background: #FEF3C7; }
    60%  { background: #FEF3C7; }
    100% { background: transparent; }
}
.feed-item-enter[b-9n8cny5kx4] {
    animation: feed-enter-b-9n8cny5kx4 .3s ease-out, feed-flash-b-9n8cny5kx4 1.6s ease-out;
}
.feed-icon[b-9n8cny5kx4] {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feed-icon .material-symbols-outlined[b-9n8cny5kx4] { font-size: 20px; }
.feed-main[b-9n8cny5kx4] { flex: 1; min-width: 0; }
.feed-meta[b-9n8cny5kx4] { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.feed-meta-right[b-9n8cny5kx4] { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.feed-source[b-9n8cny5kx4] {
    font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    /* CR #31 made the longest label "WHATSUP FAMILY GROUPCHAT". Truncate rather than
       wrap, so a narrow screen never pushes the New badge and timestamp onto a second row. */
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed-time[b-9n8cny5kx4] { font-size: 10.5px; color: #9CA3AF; flex-shrink: 0; }
.feed-title[b-9n8cny5kx4] {
    font-size: 13.5px; font-weight: 700; color: #1A1A2E;
    line-height: 1.4; margin-top: 3px;
}

/* CR #11 — unread markers */
.feed-new-badge[b-9n8cny5kx4] {
    font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #2563EB; background: #DBEAFE; padding: 2px 6px; border-radius: 5px;
}
.feed-unread-chip[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    font-size: 11px; font-weight: 700;
    color: #2563EB; background: #DBEAFE; padding: 4px 9px; border-radius: 6px;
}
/* CR V7 item 2 — on phones the Live Feed header was a three-line box above the first update
   (round 3 row 3). Below 900 px, where the feed has its own tab, it becomes one row: title and
   unread chip side by side, without the "Select to read updates" line. */
@media (max-width: 899px) {
    .news-panel .panel-header[b-9n8cny5kx4] {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 10px 14px;
    }
    .news-panel .panel-sub[b-9n8cny5kx4] { display: none; }
    .news-panel .feed-unread-chip[b-9n8cny5kx4] { margin-top: 0; }
}
.feed-chevron[b-9n8cny5kx4] { color: #C4C8D0; font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.feed-empty[b-9n8cny5kx4] { padding: 24px 16px; font-size: 12.5px; color: #9CA3AF; text-align: center; }

/* ── Bank card ── */
/* The card previously used #FAFBFC + 1px #E4E7EC + 14px radius — byte-identical to the
   .portfolio-card sitting directly beneath it. With no press state and only a #C4C8D0
   chevron, it read as a heading for the dashboard rather than a control, and participants
   were not realising it opened anything. Four affordances now, not one: it lifts off the
   panel, it has a navy rail, it responds to touch, and it says what it does. */
/* CR V3 #8 / #17 — purple Bank Alpha treatment, per the v4 design bundle. The navy rail is
   gone: the card is now the only purple surface on the panel, which does the same
   distinguishing job with more brand weight. */
.bank-card[b-9n8cny5kx4] {
    /* button reset — this is a real <button> now, for focus and screen-reader access */
    appearance: none; -webkit-appearance: none; box-sizing: border-box;
    width: calc(100% - 32px); font-family: inherit; text-align: left;

    position: relative; overflow: hidden;
    background: linear-gradient(115deg, #FCFAFF 0%, #F7F1FE 48%, #EFE4FD 100%);
    border: 1px solid #EDE4FB;
    border-radius: 20px; padding: 14px 16px; margin: 16px;
    cursor: pointer; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 2px 6px rgba(124,58,237,.08);
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;   /* replaced by our own :active state */
}
.bank-card:hover[b-9n8cny5kx4] { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(124,58,237,.16); }
/* The press state matters most on mobile: without it a tap produces no feedback at all
   until the modal appears, which is what made the card feel inert. */
.bank-card:active[b-9n8cny5kx4] {
    transform: scale(.985);
    box-shadow: 0 1px 3px rgba(124,58,237,.14);
}
/* Orange focus ring kept deliberately: it is the strongest contrast against the lilac
   surface, and it stays consistent with every other focusable control on the screen. */
.bank-card:focus-visible[b-9n8cny5kx4] { outline: 3px solid #F59F00; outline-offset: 2px; }

/* Decorative sheen — the soft light bloom to the right of the card. */
.bank-card-glow[b-9n8cny5kx4] {
    position: absolute; right: -18%; top: -30%; width: 78%; height: 190%;
    border-radius: 50%; pointer-events: none;
    background: linear-gradient(150deg, rgba(255,255,255,.85), rgba(233,222,253,.55));
}
/* Slow sweep across the face. Continuous by design: it is what makes the tile read as the
   live thing on the panel, so it must stay subtle enough not to compete with the feed. */
.bank-card-shimmer[b-9n8cny5kx4] {
    position: absolute; top: 0; bottom: 0; left: 0; width: 20%; z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%);
    animation: bankShimmer-b-9n8cny5kx4 2.8s ease-in-out infinite;
}
@keyframes bankShimmer-b-9n8cny5kx4 {
    0%        { transform: translateX(-150%) skewX(-18deg); }
    55%, 100% { transform: translateX(560%) skewX(-18deg); }
}

.bank-card-icon[b-9n8cny5kx4] {
    position: relative; z-index: 2;
    width: 52px; height: 52px; border-radius: 16px;
    background: linear-gradient(150deg, #F6EFFE, #E6D6FC);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 4px 12px rgba(124,58,237,.16);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bank-card-icon img[b-9n8cny5kx4] { width: 34px; height: 34px; object-fit: contain; display: block; }

.bank-card-main[b-9n8cny5kx4] { position: relative; z-index: 2; flex: 1; min-width: 0; }
.bank-card-badge[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; color: #6D28D9;
    background: #EDE2FD; padding: 4px 9px; border-radius: 999px;
    white-space: nowrap;
}
.bank-card-badge .material-symbols-outlined[b-9n8cny5kx4] { font-size: 12px; }
.bank-card-name[b-9n8cny5kx4] {
    font-size: 19px; font-weight: 800; color: #1E1B3A;
    letter-spacing: -.02em; line-height: 1.1; margin-top: 6px;
}
.bank-card-cta[b-9n8cny5kx4] {
    display: flex; align-items: center; gap: 2px;
    font-size: 12px; font-weight: 600; color: #52525B; margin-top: 4px;
}
.bank-card-cta .material-symbols-outlined[b-9n8cny5kx4] { font-size: 14px; color: #7C3AED; }

.bank-card-chevron[b-9n8cny5kx4] {
    position: relative; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%; background: #fff;
    box-shadow: 0 3px 10px rgba(124,58,237,.22);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bank-card-chevron .material-symbols-outlined[b-9n8cny5kx4] { color: #7C3AED; font-size: 18px; }

/* First-visit nudge. Retired permanently the moment the account is opened in the live run,
   so it guides without nagging — and it is a halo rather than movement, to avoid the card
   competing with the news feed for attention. */
/* Recoloured to purple with the card: an orange halo around a lilac surface read as a
   warning rather than an invitation. */
.bank-card-nudge[b-9n8cny5kx4] { animation: bankNudge-b-9n8cny5kx4 2.4s ease-in-out infinite; }
@keyframes bankNudge-b-9n8cny5kx4 {
    0%, 100% { box-shadow: 0 2px 6px rgba(124,58,237,.08); }
    50%      { box-shadow: 0 2px 6px rgba(124,58,237,.08), 0 0 0 6px rgba(124,58,237,.16); }
}
@media (prefers-reduced-motion: reduce) {
    .bank-card-nudge[b-9n8cny5kx4] { animation: none; }
    .bank-card[b-9n8cny5kx4] { transition: none; }
    /* The shimmer is decorative, so it stops entirely rather than slowing down. */
    .bank-card-shimmer[b-9n8cny5kx4] { animation: none; opacity: 0; }
}
/* CR #15 — .pidm-chip removed entirely: the bank panel no longer carries any PIDM
   wording. The statement now appears only inside the account modal (.bank-app-sub). */

/* ── Bottom bar ── */
.bottom-bar[b-9n8cny5kx4] {
    background: #fff; border-top: 1px solid #E4E7EC; padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.release-status[b-9n8cny5kx4] { font-size: 11.5px; color: #9CA3AF; }
/* CR V7 item 11 — the Disclaimer link sits above the release status on the left. */
.bottom-left[b-9n8cny5kx4] { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.proceed-btn[b-9n8cny5kx4] {
    background: #F59F00; color: #1B2558; font-weight: 700; font-size: 13.5px;
    padding: 12px 24px; border-radius: 999px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; border: none;
}
.proceed-btn:disabled[b-9n8cny5kx4] { opacity: .45; cursor: not-allowed; }
/* CR V4 item 6.2 — after the day-end prompt, the way forward pulses. A halo rather than
   movement: a moving control is harder to hit, and this is the button we want pressed. */
.proceed-btn-blink[b-9n8cny5kx4] { animation: proceed-pulse-b-9n8cny5kx4 1.4s ease-in-out infinite; }
@keyframes proceed-pulse-b-9n8cny5kx4 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,159,0,.55); }
    50%      { box-shadow: 0 0 0 8px rgba(245,159,0,0); }
}
@media (prefers-reduced-motion: reduce) {
    .proceed-btn-blink[b-9n8cny5kx4] { animation: none; outline: 3px solid rgba(245,159,0,.9); outline-offset: 3px; }
}
.proceed-btn .material-symbols-outlined[b-9n8cny5kx4] { font-size: 16px; }

@media (min-width: 900px) {
    /* Align bottom-bar contents with the centered card edges */
    .bottom-bar[b-9n8cny5kx4] { padding-left: max(16px, calc((100% - 1280px) / 2 + 20px)); padding-right: max(16px, calc((100% - 1280px) / 2 + 20px)); }
}

/* ── Modal scaffolding ── */
.modal-overlay[b-9n8cny5kx4] {
    position: fixed; inset: 0; background: rgba(15,17,35,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 90; padding: 16px;
}
.modal-shell[b-9n8cny5kx4] { position: relative; width: 100%; max-width: 420px; max-height: 88vh; overflow: auto; border-radius: 20px; }
.modal-close[b-9n8cny5kx4] {
    position: absolute; top: 10px; right: 10px; z-index: 5; width: 30px; height: 30px;
    border-radius: 50%; background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.modal-close .material-symbols-outlined[b-9n8cny5kx4] { color: #fff; font-size: 17px; }

@keyframes pulse-b-9n8cny5kx4 { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── TV modal ── */
.tv-modal[b-9n8cny5kx4] {
    background: #0B0E1A; color: #fff; padding: 26px 20px 0; border-radius: 20px;
    min-height: 320px; display: flex; flex-direction: column; justify-content: space-between;
}
.tv-live[b-9n8cny5kx4] { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.tv-live-dot[b-9n8cny5kx4] { width: 8px; height: 8px; border-radius: 50%; background: #DC2626; animation: pulse-b-9n8cny5kx4 1.5s infinite; }
.tv-live-label[b-9n8cny5kx4] { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; }
.tv-headline[b-9n8cny5kx4] { font-size: 21px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; }
.tv-body[b-9n8cny5kx4] { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.65; }
.tv-ticker[b-9n8cny5kx4] {
    margin-top: 22px; background: #DC2626; padding: 9px 0; overflow: hidden;
    white-space: nowrap; border-radius: 0 0 20px 20px;
}
/* Continuous right-to-left crawl like a real TV ticker — content is duplicated
   in markup, so -50% lands exactly on the seam for a seamless loop */
@keyframes ticker-scroll-b-9n8cny5kx4 {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.tv-ticker div[b-9n8cny5kx4] {
    display: inline-block; font-size: 11.5px; font-weight: 700; padding-left: 20px;
    animation: ticker-scroll-b-9n8cny5kx4 14s linear infinite;
}

/* ── Newspaper modal ── */
.paper-modal[b-9n8cny5kx4] { background: #fff; padding: 24px; border-radius: 20px; min-height: 320px; }
.paper-masthead[b-9n8cny5kx4] { text-align: center; border-bottom: 3px solid #1A1A2E; padding-bottom: 10px; margin-bottom: 16px; }
.paper-name[b-9n8cny5kx4] { font-size: 19px; font-weight: 800; letter-spacing: .02em; color: #1A1A2E; }
.paper-byline[b-9n8cny5kx4] { font-size: 10px; color: #9CA3AF; margin-top: 3px; letter-spacing: .06em; text-transform: uppercase; }
.paper-headline[b-9n8cny5kx4] { font-size: 19px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; color: #1A1A2E; }
.paper-body[b-9n8cny5kx4] { font-size: 13.5px; color: #374151; line-height: 1.75; }

/* ── Radio modal ── */
.radio-modal[b-9n8cny5kx4] {
    background: linear-gradient(160deg,#7C3AED,#4C1D95); color: #fff;
    padding: 30px 24px; border-radius: 20px; min-height: 320px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.radio-icon[b-9n8cny5kx4] {
    width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.radio-icon .material-symbols-outlined[b-9n8cny5kx4] { font-size: 28px; }
.radio-station[b-9n8cny5kx4] { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.radio-wave[b-9n8cny5kx4] { display: flex; gap: 4px; align-items: center; height: 40px; margin: 18px 0; }
/* Bars animate on scaleY rather than height — it's GPU-composited, so twelve of them
   cost nothing, and each keeps the base height set inline. */
.radio-wave div[b-9n8cny5kx4] {
    width: 4px; background: rgba(255,255,255,.85); border-radius: 2px;
    transform-origin: center;
    animation-name: radio-eq-b-9n8cny5kx4;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes radio-eq-b-9n8cny5kx4 {
    0%, 100% { transform: scaleY(.28); }
    50%      { transform: scaleY(1); }
}
/* Static bars for anyone who asked their OS for less motion */
@media (prefers-reduced-motion: reduce) {
    .radio-wave div[b-9n8cny5kx4] { animation: none; }
}
/* CR #34 — the headline used to sit inline with the body; give it its own line and weight */
.radio-headline[b-9n8cny5kx4] {
    font-size: 15px; font-weight: 800; line-height: 1.4;
    margin-bottom: 10px; color: #fff;
}
.radio-body[b-9n8cny5kx4] { font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.6; }
/* Continuation paragraph on the social modals, where the "headline" is just the first line */
.body-spaced[b-9n8cny5kx4] { margin-top: 8px; }

/* ── X (Twidder) modal ── */
.x-modal[b-9n8cny5kx4] {
    background: #000; padding: 16px; border-radius: 20px; min-height: 260px;
    font-family: -apple-system, Helvetica, Arial, sans-serif;
}
.x-logo[b-9n8cny5kx4] { color: #fff; font-size: 22px; font-weight: 900; margin-bottom: 14px; }
.x-row[b-9n8cny5kx4] { display: flex; gap: 10px; }
.x-avatar[b-9n8cny5kx4] {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg,#334155,#0f172a); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.x-main[b-9n8cny5kx4] { flex: 1; min-width: 0; }
.x-header[b-9n8cny5kx4] { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.x-name[b-9n8cny5kx4] { font-size: 14.5px; font-weight: 700; color: #fff; }
.x-header .material-symbols-outlined[b-9n8cny5kx4] { font-size: 15px; color: #1D9BF0; }
.x-handle[b-9n8cny5kx4] { font-size: 13.5px; color: #71767B; }
.x-body[b-9n8cny5kx4] { font-size: 15px; color: #fff; line-height: 1.4; margin-top: 4px; }
.x-stats[b-9n8cny5kx4] {
    display: flex; justify-content: space-between; color: #71767B;
    font-size: 12.5px; margin-top: 14px; max-width: 320px;
}
.x-stats span[b-9n8cny5kx4] { display: flex; align-items: center; gap: 5px; }
.x-stats .material-symbols-outlined[b-9n8cny5kx4] { font-size: 17px; }

/* ── TickTock modal ── */
.tt-modal[b-9n8cny5kx4] {
    background: linear-gradient(160deg,#1a1a1a,#000); color: #fff; border-radius: 20px;
    min-height: 420px; position: relative; overflow: hidden; display: flex; align-items: flex-end;
}
.tt-tabs[b-9n8cny5kx4] {
    position: absolute; top: 16px; left: 0; right: 0; text-align: center;
    font-size: 14px; font-weight: 700; display: flex; justify-content: center; gap: 16px;
}
.tt-tabs .inactive[b-9n8cny5kx4] { opacity: .55; }
.tt-tabs .active[b-9n8cny5kx4] { border-bottom: 2px solid #fff; padding-bottom: 4px; }
/* CR #32 — the clip fills the card; the TickTock chrome sits on top of it.
   The static play-button placeholder is gone now that real footage plays. */
.tt-video[b-9n8cny5kx4] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; background: #000;
}
.tt-tabs[b-9n8cny5kx4] { z-index: 2; }
/* Above the caption (z-index 2), which is full-width and otherwise covers the rail's share button
   now that the rail is clickable (UI_V8.1 has it at 3 for the same reason). */
.tt-rail[b-9n8cny5kx4] {
    position: absolute; right: 10px; bottom: 90px; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.tt-avatar[b-9n8cny5kx4] {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg,#F59F00,#DC2626);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.tt-stat[b-9n8cny5kx4] { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tt-stat .material-symbols-outlined[b-9n8cny5kx4] { font-size: 28px; }
.tt-stat span:last-child[b-9n8cny5kx4] { font-size: 11px; font-weight: 600; }
.tt-caption-area[b-9n8cny5kx4] {
    padding: 20px 70px 26px 18px; position: relative; z-index: 2; width: 100%;
    /* CR #32 — scrim so the caption stays legible over moving footage */
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.55) 60%, transparent);
}
.tt-handle[b-9n8cny5kx4] { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.tt-caption[b-9n8cny5kx4] { font-size: 15px; font-weight: 600; line-height: 1.4; }
.tt-sound[b-9n8cny5kx4] {
    display: flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 12.5px; color: rgba(255,255,255,.8);
}
.tt-sound .material-symbols-outlined[b-9n8cny5kx4] { font-size: 15px; }

/* ── WhatsUp modal ── */
.wa-modal[b-9n8cny5kx4] { background: #EDEDE8; padding: 20px; border-radius: 20px; min-height: 260px; }
.wa-header[b-9n8cny5kx4] { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.wa-header .material-symbols-outlined[b-9n8cny5kx4] { color: #16A34A; font-size: 20px; }
.wa-group[b-9n8cny5kx4] { font-size: 13.5px; font-weight: 700; color: #1A1A2E; }
.wa-bubble[b-9n8cny5kx4] { background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.wa-sender[b-9n8cny5kx4] { font-size: 12.5px; font-weight: 700; color: #16A34A; margin-bottom: 4px; }
.wa-forwarded[b-9n8cny5kx4] { font-size: 11.5px; color: #9CA3AF; font-style: italic; margin-bottom: 6px; }
.wa-body[b-9n8cny5kx4] { font-size: 13.5px; color: #1A1A2E; line-height: 1.55; }
.wa-time[b-9n8cny5kx4] { font-size: 10.5px; color: #9CA3AF; text-align: right; margin-top: 6px; }

/* ── PIDM modal ── */
.pidm-modal[b-9n8cny5kx4] { background: #1B2558; color: #fff; padding: 28px 24px; border-radius: 20px; min-height: 260px; }
.pidm-shield[b-9n8cny5kx4] {
    width: 46px; height: 46px; border-radius: 50%; background: #F59F00;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pidm-shield .material-symbols-outlined[b-9n8cny5kx4] { color: #1B2558; font-size: 24px; }
.pidm-label[b-9n8cny5kx4] {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #F59F00;
    text-transform: uppercase; margin-bottom: 8px;
}
.pidm-headline[b-9n8cny5kx4] { font-size: 17px; font-weight: 800; line-height: 1.4; margin-bottom: 10px; }
.pidm-body[b-9n8cny5kx4] { font-size: 13.5px; color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 14px; white-space: pre-line; }
.pidm-sig[b-9n8cny5kx4] { font-size: 12px; color: #F59F00; font-weight: 600; }

/* ── CR #13: lunch / dinner divider cards (Grub Food, Weza) ──
   Fictionalised delivery / navigation apps, styled like the real thing so they
   read as an ordinary interruption rather than more crisis content. */
.grub-modal[b-9n8cny5kx4], .weza-modal[b-9n8cny5kx4] {
    background: #fff; border-radius: 20px; min-height: 240px; overflow: hidden;
}
.grub-header[b-9n8cny5kx4], .weza-header[b-9n8cny5kx4] {
    padding: 20px; display: flex; align-items: center; gap: 10px;
}
.grub-header[b-9n8cny5kx4] { background: #00B14F; }
.weza-header[b-9n8cny5kx4] { background: linear-gradient(160deg, #0A7CFF, #0554B8); }
.grub-logo-icon[b-9n8cny5kx4], .weza-logo-icon[b-9n8cny5kx4] {
    width: 34px; height: 34px; background: rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.grub-logo-icon[b-9n8cny5kx4] { border-radius: 9px; }
.weza-logo-icon[b-9n8cny5kx4] { border-radius: 50%; }
.grub-logo-icon .material-symbols-outlined[b-9n8cny5kx4],
.weza-logo-icon .material-symbols-outlined[b-9n8cny5kx4] { color: #fff; font-size: 19px; }
.grub-wordmark[b-9n8cny5kx4], .weza-wordmark[b-9n8cny5kx4] {
    color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.01em;
}
.divider-body-wrap[b-9n8cny5kx4] { padding: 20px; }
.divider-headline[b-9n8cny5kx4] {
    font-size: 17px; font-weight: 800; color: #1A1A2E; line-height: 1.35; margin-bottom: 10px;
}
.divider-body[b-9n8cny5kx4] {
    font-size: 13.5px; color: #4B5563; line-height: 1.7; margin-bottom: 18px; white-space: pre-line;
}
.grub-cta[b-9n8cny5kx4], .weza-cta[b-9n8cny5kx4] {
    color: #fff; text-align: center; padding: 13px; border-radius: 10px;
    font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.grub-cta[b-9n8cny5kx4] { background: #00B14F; }
/* CR V4 item 7.2 — the claim variant. Reads as an action rather than a dismissal, because that
   is the behaviour being measured. */
.grub-cta-offer[b-9n8cny5kx4] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.grub-cta-offer .material-symbols-outlined[b-9n8cny5kx4] { font-size: 17px; }
.weza-cta[b-9n8cny5kx4] { background: #0A7CFF; }
.weza-alert[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; color: #B45309; background: #FEF3C7;
    padding: 4px 9px; border-radius: 6px; margin-bottom: 12px;
}
.weza-alert .material-symbols-outlined[b-9n8cny5kx4] { font-size: 14px; }

/* ── Bank modal ── */
/* Shared with the pre-questions modal, which still wants the plain white sheet. Everything the
   v4 bank app changes is scoped to .bank-modal-app below. */
.bank-modal[b-9n8cny5kx4] {
    background: #fff; border-radius: 20px; width: 100%; max-width: 380px;
    max-height: 88vh; overflow: auto; padding: 24px; position: relative;
}

/* ══ v4 bundle — Bank Alpha app ══════════════════════════════════════════════
   The tile that opens this screen is lilac with a purple mark; the screen behind it was navy
   with a Material glyph, so the hand-off looked like two different products. The whole app now
   carries the brand.
   Padding moves off the shell and onto .bank-app-body so the purple header can run full-bleed
   to the rounded corners, and overflow moves with it so the header stays pinned while a long
   action form scrolls under it. */
.bank-modal-app[b-9n8cny5kx4] {
    background: #FCFAFF; border-radius: 26px; max-width: 372px; max-height: 90vh;
    padding: 0; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(124,58,237,.26);
}
.bank-app-header[b-9n8cny5kx4] {
    position: relative; flex-shrink: 0; overflow: hidden;
    padding: 15px 18px 20px;
    background: linear-gradient(160deg, #5B21B6 0%, #6D28D9 60%, #7C3AED 100%);
}
/* Two soft white discs bled into the gradient. Purely decorative, and on its own element rather
   than a pseudo-element so it can be marked aria-hidden. */
.bank-app-glow[b-9n8cny5kx4] {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 88% 4%, rgba(255,255,255,.14) 0 34px, transparent 35px),
        radial-gradient(circle at 10% 96%, rgba(255,255,255,.09) 0 46px, transparent 47px);
}
.bank-app-bar[b-9n8cny5kx4] {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 22px;
}
.bank-app-back[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    color: #fff; font-size: 12.5px; font-weight: 600;
}
.bank-app-back .material-symbols-outlined[b-9n8cny5kx4] { font-size: 17px; }
/* Reassurance chip. Deliberately low-contrast: it should register as ambient chrome, not as a
   claim competing with the balance for attention. */
/* CR V4 item 5.1 — the secure chip and the new close button share the right-hand end of
   the bar, so Back stays alone on the left and the two meanings do not blur together. */
.bank-app-bar-right[b-9n8cny5kx4] { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bank-app-secure[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    background: rgba(255,255,255,.16); color: #fff;
    font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
}
/* Always closes the panel outright, including from inside an action, where Back only
   abandons the action. Sized to the 44px touch target rather than the glyph. */
.bank-app-close[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    background: rgba(255,255,255,.16); border: none; color: #fff; cursor: pointer;
}
.bank-app-close:hover[b-9n8cny5kx4] { background: rgba(255,255,255,.28); }
.bank-app-close .material-symbols-outlined[b-9n8cny5kx4] { font-size: 18px; }
.bank-app-secure .material-symbols-outlined[b-9n8cny5kx4] { font-size: 12px; }
.bank-app-id[b-9n8cny5kx4] {
    position: relative; display: flex; align-items: center; gap: 11px; margin-top: 15px;
}
.bank-app-mark[b-9n8cny5kx4] {
    width: 46px; height: 46px; border-radius: 14px; background: #fff; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(45,10,90,.22);
}
.bank-app-mark img[b-9n8cny5kx4] { width: 30px; height: 30px; object-fit: contain; display: block; }
.bank-app-name[b-9n8cny5kx4] { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.bank-app-sub[b-9n8cny5kx4] { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.82); margin-top: 1px; }
/* min-height:0 is load-bearing: a column flex item defaults to min-height:auto, which refuses to
   shrink below its content, so without it the body never scrolls and the shell grows past
   max-height instead — taking the header off-screen with it. */
.bank-app-body[b-9n8cny5kx4] { padding: 20px 18px 22px; overflow: auto; flex: 1 1 auto; min-height: 0; }

.text-input[b-9n8cny5kx4] {
    border: 1px solid #E4E7EC; border-radius: 10px; padding: 12px 14px;
    font-size: 13.5px; outline: none; width: 100%; font-family: 'Inter', 'Noto Sans SC', sans-serif;
}

/* iOS Safari zooms the viewport whenever a focused input's font-size is under 16px —
   and it does NOT zoom back out on blur, leaving the participant pinching to recover.
   Raising the size on touch devices removes the trigger at source.
   Deliberately NOT fixed with `maximum-scale=1 / user-scalable=no`: that disables
   pinch-zoom entirely, which fails WCAG 1.4.4 and matters for a study whose
   participants include older adults. */
@media (pointer: coarse), (max-width: 900px) {
    .text-input[b-9n8cny5kx4], .amount-input[b-9n8cny5kx4] { font-size: 16px; }
}
.primary-btn[b-9n8cny5kx4] {
    background: #1B2558; color: #fff; text-align: center; padding: 13px;
    border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer;
    margin-top: 6px; border: none; width: 100%;
}

.balance-box[b-9n8cny5kx4] { background: #F4F5F7; border-radius: 14px; padding: 18px; text-align: center; margin-bottom: 16px; }
.balance-label[b-9n8cny5kx4] { font-size: 11px; color: #9CA3AF; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.balance-amount[b-9n8cny5kx4] { font-size: 26px; font-weight: 800; color: #1B2558; margin-top: 4px; }
.balance-limit[b-9n8cny5kx4] { font-size: 10.5px; color: #9CA3AF; margin-top: 4px; }

/* v4 bundle — the balance becomes the one saturated surface in the app. Left-aligned, because a
   30px figure centred in a 336px card reads as a headline rather than as an account balance. */
.bank-modal-app .balance-box[b-9n8cny5kx4] {
    background: linear-gradient(140deg, #5B21B6, #7C3AED);
    border-radius: 18px; text-align: left; position: relative; overflow: hidden;
    box-shadow: 0 10px 24px rgba(91,33,182,.22);
}
.bank-modal-app .balance-box[b-9n8cny5kx4]::after {
    content: ""; position: absolute; right: -26px; top: -30px;
    width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.10);
}
.bank-modal-app .balance-label[b-9n8cny5kx4] { color: rgba(255,255,255,.72); }
.bank-modal-app .balance-amount[b-9n8cny5kx4] { font-size: 30px; color: #fff; margin-top: 6px; }
/* CR V3 #14 removed the ATM limit that occupied this slot in the bundle; cash on hand takes the
   chip instead, which is the other figure a participant is deciding against. */
.bank-modal-app .balance-limit[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; margin-top: 12px;
    background: rgba(255,255,255,.18); color: #fff;
    font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
}

.action-grid[b-9n8cny5kx4] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
/* CR V3 #9 — four actions, 2×2. A single row of four was tried first and lost: at phone width
   the labels wrapped to three lines and "Change Transfer Limit" had nowhere to put its
   current-limit subtitle. */
.action-grid-4[b-9n8cny5kx4] { grid-template-columns: repeat(2, 1fr); }
.action-tile[b-9n8cny5kx4] {
    background: #FAFBFC; border: 1px solid #E4E7EC; border-radius: 12px;
    padding: 14px 8px; text-align: center; cursor: pointer;
}
.action-tile .material-symbols-outlined[b-9n8cny5kx4] { color: #1B2558; font-size: 20px; }
.action-tile div[b-9n8cny5kx4] { font-size: 11px; font-weight: 700; color: #1A1A2E; margin-top: 4px; }
/* v4 bundle. The bundle sets these four across; the labels here are the CR V3 #9 wordings
   ("Change Transfer Limit", not "Limits"), which wrap to three lines at a quarter width, so the
   2×2 grid above stands and only the surface changes. */
.bank-modal-app .action-tile[b-9n8cny5kx4] {
    background: #F7F2FE; border-color: #EDE4FB; border-radius: 14px;
}
.bank-modal-app .action-tile:active[b-9n8cny5kx4] { background: #EDE4FB; }
.bank-modal-app .action-tile .material-symbols-outlined[b-9n8cny5kx4] { color: #6D28D9; font-size: 21px; }

.bank-modal-app .action-tile div[b-9n8cny5kx4] { color: #322C4A; }
.bank-modal-app .action-tile .action-tile-sub[b-9n8cny5kx4] { color: #7C6FA0; }
/* The live limit under "Change Transfer Limit". Lighter and smaller than the label so the tile
   still reads as one control rather than two lines of equal weight. */
.action-tile .action-tile-sub[b-9n8cny5kx4] {
    font-size: 10px; font-weight: 600; color: #6B7280; margin-top: 2px;
}

/* ── Plan A §A2: financial dashboard ── */
.portfolio-card[b-9n8cny5kx4] {
    margin-top: 16px; background: #FAFBFC; border: 1px solid #E4E7EC;
    border-radius: 14px; padding: 16px;
}
.portfolio-title[b-9n8cny5kx4] { font-size: 12.5px; font-weight: 800; color: #1A1A2E; margin-bottom: 2px; }
.portfolio-sub[b-9n8cny5kx4] { font-size: 11px; color: #9CA3AF; margin-bottom: 14px; }
.portfolio-row[b-9n8cny5kx4] { margin-bottom: 12px; }
.portfolio-row-head[b-9n8cny5kx4] {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11.5px; margin-bottom: 5px; gap: 8px;
}
.portfolio-label[b-9n8cny5kx4] { font-weight: 700; color: #1A1A2E; display: flex; align-items: center; gap: 6px; }
.portfolio-swatch[b-9n8cny5kx4] { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.portfolio-value[b-9n8cny5kx4] { font-weight: 800; color: #1B2558; white-space: nowrap; }
.portfolio-track[b-9n8cny5kx4] { height: 8px; background: #EDEFF3; border-radius: 4px; overflow: hidden; }
/* CR V3 #8 — replaces the bar on the Bank Alpha row. Full row width, because the sentence does not
   fit the value slot; sized down slightly from the row head so it reads as a note rather than a
   second label. */
.portfolio-locked[b-9n8cny5kx4] {
    font-size: 11px; color: #6B7280; line-height: 1.45;
    background: #F4F5F7; border-radius: 6px; padding: 6px 8px;
}
.portfolio-fill[b-9n8cny5kx4] { height: 100%; border-radius: 4px; transition: width .4s ease; }
/* CR V3 #8 — .portfolio-total / .portfolio-total-value removed with the Total Assets row. */

/* Pending rows — amber so in-flight money reads as distinct from settled buckets.
   CR V5 item 11 — they sit directly under the Bank Alpha card now, outside the dashboard. */
.pending-stack[b-9n8cny5kx4] { margin-top: 12px; }
.pending-stack .pending-row:last-child[b-9n8cny5kx4] { margin-bottom: 0; }
.pending-row[b-9n8cny5kx4] {
    background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; position: relative;
}
.pending-label[b-9n8cny5kx4] {
    font-weight: 700; color: #92400E; display: flex; align-items: center; gap: 5px;
}
.pending-label .material-symbols-outlined[b-9n8cny5kx4] { font-size: 14px; }
.pending-eta[b-9n8cny5kx4] { font-size: 10.5px; color: #B45309; white-space: nowrap; }
.pending-track[b-9n8cny5kx4] { height: 6px; background: #FDE68A; border-radius: 3px; overflow: hidden; }
.pending-fill[b-9n8cny5kx4] { height: 100%; background: #F59F00; border-radius: 3px; transition: width 1s linear; }
.pending-cancel[b-9n8cny5kx4] {
    margin-top: 8px; border: 1px solid #FDBA74; background: #fff; color: #92400E;
    border-radius: 8px; padding: 5px 12px; font-size: 11px; font-weight: 700;
    cursor: pointer; font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.pending-cancel:disabled[b-9n8cny5kx4] { opacity: .5; cursor: default; }

/* Mobile: the dashboard lives behind this tab, so flag in-flight money on it */
.tab-badge[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px;
    border-radius: 999px; background: #F59F00; color: #1B2558;
    font-size: 10px; font-weight: 800; vertical-align: middle;
}

/* CR #15 — yellow highlight removed; the note stays but reads neutrally */
.pidm-banner[b-9n8cny5kx4] {
    display: flex; gap: 8px; background: #F4F5F7; border: 1px solid #E4E7EC;
    border-radius: 10px; padding: 10px 12px; font-size: 11.5px;
    color: #6B7280; line-height: 1.5;
}
.pidm-banner .material-symbols-outlined[b-9n8cny5kx4] { font-size: 17px; flex-shrink: 0; color: #9CA3AF; }

/* ── Action forms ── */
.action-title[b-9n8cny5kx4] { font-size: 13.5px; font-weight: 700; color: #1A1A2E; margin-bottom: 2px; }
.action-step[b-9n8cny5kx4] { font-size: 11px; color: #9CA3AF; margin-bottom: 12px; }
/* v4 bundle — the form title now carries the weight the header used to, since the header above it
   is branding rather than a page title. The step counter goes purple: it is progress, and grey
   read as a disabled caption. */
.bank-modal-app .action-title[b-9n8cny5kx4] { font-size: 16px; font-weight: 800; color: #1E1B3A; }
.bank-modal-app .action-step[b-9n8cny5kx4] { font-size: 11px; font-weight: 600; color: #7C3AED; }
.opt-list[b-9n8cny5kx4] { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.opt-card[b-9n8cny5kx4] { border: 1.5px solid #E4E7EC; background: #FAFBFC; border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.opt-card.selected[b-9n8cny5kx4] { border-color: #1B2558; background: #EEF1FA; }
/* v4 bundle. Selection is the one state that has to survive CR V3 #12's auto-advance being read
   at a glance, so it keeps a full-strength purple border against the near-white unselected card. */
.bank-modal-app .opt-card[b-9n8cny5kx4] { border-color: #EDE4FB; background: #FCFAFF; border-radius: 13px; }
.bank-modal-app .opt-card.selected[b-9n8cny5kx4] { border-color: #7C3AED; background: #F4EEFE; }
.bank-modal-app .opt-label[b-9n8cny5kx4] { color: #1E1B3A; }
.bank-modal-app .opt-sub[b-9n8cny5kx4] { color: #6B6480; }
/* An empty bucket can't be a deposit source — visibly inert rather than hidden,
   so participants can see the bucket exists and is simply empty. */
.opt-card.disabled[b-9n8cny5kx4] { opacity: .45; cursor: not-allowed; }
.opt-head[b-9n8cny5kx4] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opt-label[b-9n8cny5kx4] { font-size: 13px; font-weight: 700; color: #1A1A2E; }
.opt-sub[b-9n8cny5kx4] { font-size: 11.5px; color: #6B7280; margin-top: 2px; }

/* Timing flag on each money-movement channel. Green → amber → deep amber reads as a
   scale of "how long you wait", so the cost of the slower channels is legible at a glance. */
.opt-flag[b-9n8cny5kx4] {
    font-size: 10px; font-weight: 800; letter-spacing: .03em;
    padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.opt-flag.instant[b-9n8cny5kx4] { color: #15803D; background: #DCFCE7; }
.opt-flag.short[b-9n8cny5kx4]   { color: #B45309; background: #FEF3C7; }
.opt-flag.long[b-9n8cny5kx4]    { color: #9A3412; background: #FFEDD5; }
/* Grey, not red — the branch being shut is a normal condition, not an error */
.opt-flag.closed[b-9n8cny5kx4]  { color: #6B7280; background: #E5E7EB; }

/* Plan A §A3 — warns that cash will not be usable straight away */
.pending-warning[b-9n8cny5kx4] {
    display: flex; align-items: flex-start; gap: 6px;
    background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A;
}
.pending-warning .material-symbols-outlined[b-9n8cny5kx4] { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.limit-display[b-9n8cny5kx4] { text-align: center; margin: 14px 0 12px; }
.limit-amount[b-9n8cny5kx4] { font-size: 26px; font-weight: 800; color: #1B2558; }
.limit-sub[b-9n8cny5kx4] { font-size: 11.5px; color: #9CA3AF; margin-top: 2px; }
.limit-slider[b-9n8cny5kx4] { width: 100%; margin-bottom: 6px; }
.limit-range[b-9n8cny5kx4] { display: flex; justify-content: space-between; font-size: 10.5px; color: #9CA3AF; margin-bottom: 14px; }
/* v4 bundle — the figure the slider is driving sits on its own tinted plate, so it stays legible
   as a value while the thumb moves under it. */
.bank-modal-app .limit-display[b-9n8cny5kx4] {
    background: #F7F2FE; border: 1px solid #EDE4FB; border-radius: 16px; padding: 14px;
}
.bank-modal-app .limit-amount[b-9n8cny5kx4] { font-size: 28px; color: #6D28D9; }
.bank-modal-app .limit-sub[b-9n8cny5kx4] { color: #6B6480; }
.bank-modal-app .limit-slider[b-9n8cny5kx4] { accent-color: #7C3AED; }
.bank-modal-app .limit-range[b-9n8cny5kx4] { color: #8A80A8; }

/* ── "Ready to Begin?" (CR V4 item 4) ──
   One question, slider above the box (4.2), no thousands unit (4.1). Its own card rather than
   the bank modal's: this is not part of the banking app and should not look like it.
   CR V6 W5 — an opaque PIDM-blue page, continuing the intro screens, rather than a modal over
   the simulation. */
.setup-screen[b-9n8cny5kx4] {
    position: fixed; inset: 0; z-index: 96; overflow-y: auto;
    background: rgb(39, 52, 114);
    /* CR V7 item 11 — a column, so the Disclaimer link sits under the card. */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 16px 24px;
}
.setup-corner[b-9n8cny5kx4] {
    position: absolute; top: 14px; right: 14px;
    display: flex; align-items: center; gap: 8px;
}
.setup-sound[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
    padding: 5px; cursor: pointer;
}
.setup-sound .material-symbols-outlined[b-9n8cny5kx4] { font-size: 16px; }
.setup-card[b-9n8cny5kx4] {
    background: #fff; border-radius: 18px;
    padding: 28px 24px 26px; width: 100%; max-width: 420px;
    box-shadow: 0 18px 44px rgba(10,14,34,.35);
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.setup-question[b-9n8cny5kx4] {
    font-size: 17.5px; font-weight: 700; color: #1B2558;
    line-height: 1.38; text-wrap: pretty;
}
.setup-note[b-9n8cny5kx4] { font-size: 13.5px; color: #6B6480; line-height: 1.5; margin-top: 10px; text-wrap: pretty; }

/* 4.2 — the slider leads and is labelled. It went unnoticed sitting under a filled-in box. */
.setup-slide-label[b-9n8cny5kx4] { font-size: 12px; color: #7C3AED; font-weight: 600; margin-top: 24px; }
/* CR V8 item 1 — drawn by hand rather than with accent-color, because a native handle cannot be
   hidden: until the participant answers, .setup-slider-empty shows the track alone. Sized and
   coloured as the native control was. */
.setup-slider[b-9n8cny5kx4] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; margin: 14px 0 8px; border-radius: 999px; cursor: pointer;
    background: linear-gradient(to right, #5B21B6 0 var(--fill), #E4DBFA var(--fill) 100%);
}
.setup-slider:focus[b-9n8cny5kx4] { outline: none; }
.setup-slider:focus-visible[b-9n8cny5kx4] { outline: 2px solid #7C3AED; outline-offset: 6px; }
.setup-slider[b-9n8cny5kx4]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%; background: #5B21B6;
    box-shadow: 0 1px 4px rgba(91,33,182,.35);
}
.setup-slider[b-9n8cny5kx4]::-moz-range-thumb {
    width: 18px; height: 18px; border: none; border-radius: 50%; background: #5B21B6;
    box-shadow: 0 1px 4px rgba(91,33,182,.35);
}
.setup-slider[b-9n8cny5kx4]::-moz-range-track { background: transparent; }
.setup-slider-empty[b-9n8cny5kx4]::-webkit-slider-thumb { opacity: 0; }
.setup-slider-empty[b-9n8cny5kx4]::-moz-range-thumb { opacity: 0; }
.setup-range[b-9n8cny5kx4] {
    display: flex; justify-content: space-between;
    font-size: 12px; color: #6B6480; margin-top: 4px;
}

.setup-amount[b-9n8cny5kx4] {
    display: flex; align-items: stretch; margin-top: 20px;
    border: 1px solid #DDD6F3; border-radius: 10px; overflow: hidden;
}
.setup-currency[b-9n8cny5kx4] {
    display: flex; align-items: center; padding: 0 16px; flex-shrink: 0;
    background: #fff; border-right: 1px solid #DDD6F3;
    font-size: 14px; font-weight: 800; color: #1B2558;
}
.setup-input[b-9n8cny5kx4] {
    width: 100%; border: none; outline: none; background: #fff;
    padding: 14px 16px; font-size: 14px; color: #1B2558;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.setup-amount:focus-within[b-9n8cny5kx4] { border-color: #7C3AED; }

.setup-actions[b-9n8cny5kx4] { display: flex; gap: 12px; margin-top: 22px; }
.setup-back[b-9n8cny5kx4], .setup-go[b-9n8cny5kx4] {
    flex: 1; text-align: center; padding: 13px 10px; border-radius: 8px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.setup-back[b-9n8cny5kx4] { border: 1.5px solid #1B2558; background: #fff; color: #1B2558; }
.setup-go[b-9n8cny5kx4] { border: none; background: #F59F00; color: #1B2558; }
.setup-back:disabled[b-9n8cny5kx4] { opacity: .45; cursor: not-allowed; }
/* 4.6 — no amount, no start. */
.setup-go:disabled[b-9n8cny5kx4] { opacity: .45; cursor: not-allowed; }

.note-box[b-9n8cny5kx4] {
    font-size: 11px; color: #6B7280; background: #F4F5F7;
    border-radius: 8px; padding: 8px 10px; margin-bottom: 14px;
}
.subject-note[b-9n8cny5kx4] {
    font-size: 11.5px; color: #6B7280; background: #F4F5F7;
    border-radius: 8px; padding: 8px 10px; margin: 10px 0;
}
/* v4 bundle. .pending-warning keeps its amber: it is a consequence the participant has to notice,
   and tinting it purple with everything else would bury it. */
.bank-modal-app .note-box[b-9n8cny5kx4],
.bank-modal-app .subject-note[b-9n8cny5kx4] {
    background: #F4EEFE; border: 1px solid #E4D7FA; color: #4C3D7A; border-radius: 13px;
}
/* CR V9 item 13 — .badge (the green "PIDM protection" one) removed; .protection-note replaces it. */
.protection-note[b-9n8cny5kx4] { margin: -4px 0 14px; font-size: 12.5px; line-height: 1.45; color: #64748B; }
.amount-input[b-9n8cny5kx4] { margin: 10px 0 14px; }
/* v4 bundle — RM sits inside the field so it survives the first keystroke, unlike a placeholder.
   The prefix is padding-compensated rather than absolutely positioned, so a long amount cannot
   run under it. */
.bank-modal-app .text-input[b-9n8cny5kx4] {
    border-color: #E9DEFB; background: #F7F2FE; border-radius: 13px;
}
.bank-modal-app .text-input:focus[b-9n8cny5kx4] { border-color: #7C3AED; background: #fff; }
.amount-field[b-9n8cny5kx4] {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 14px;
    border: 1px solid #E9DEFB; background: #F7F2FE; border-radius: 13px; padding: 0 14px;
}
.amount-field:focus-within[b-9n8cny5kx4] { border-color: #7C3AED; background: #fff; }
.amount-prefix[b-9n8cny5kx4] { font-size: 13.5px; font-weight: 800; color: #6D28D9; flex-shrink: 0; }
/* The wrapper is the field now, so the input inside it gives up its own chrome. Must stay after
   the .bank-modal-app .text-input rule above — same specificity, so source order decides. */
.bank-modal-app .amount-field .amount-input[b-9n8cny5kx4] {
    margin: 0; border: none; background: transparent; padding: 12px 0; border-radius: 0;
}
.error-text[b-9n8cny5kx4] { font-size: 11.5px; color: #DC2626; margin-bottom: 10px; }

.form-actions[b-9n8cny5kx4] { display: flex; gap: 8px; }
.btn-secondary[b-9n8cny5kx4] {
    flex: 1; border: 1px solid #E4E7EC; background: #fff; text-align: center; padding: 11px;
    border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #6B7280; cursor: pointer;
}
.btn-primary[b-9n8cny5kx4] {
    flex: 1; background: #1B2558; border: none; text-align: center; padding: 11px;
    border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #fff; cursor: pointer;
}
.btn-primary:disabled[b-9n8cny5kx4] { opacity: .45; cursor: not-allowed; }
/* v4 bundle */
.bank-modal-app .btn-primary[b-9n8cny5kx4] {
    background: linear-gradient(135deg, #6D28D9, #7C3AED);
    border-radius: 13px; padding: 12px; box-shadow: 0 8px 18px rgba(109,40,217,.28);
}
.bank-modal-app .btn-primary:disabled[b-9n8cny5kx4] { box-shadow: none; }
.bank-modal-app .btn-secondary[b-9n8cny5kx4] {
    border-color: #E4D7FA; color: #6B6480; border-radius: 13px; padding: 12px;
}

/* ── Top-bar language toggle ── */
.lang-toggle[b-9n8cny5kx4] {
    display: flex; gap: 3px; background: rgba(255,255,255,.1); border-radius: 999px; padding: 3px;
    position: relative;
}
.lang-toggle button[b-9n8cny5kx4] {
    border: none; background: transparent; color: rgba(255,255,255,.65);
    font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
    cursor: pointer; font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.lang-toggle button.active[b-9n8cny5kx4] { background: #fff; color: #1B2558; }

/* CR #35 — the toggle is now present during the live simulation too, where it shares
   the bar with the clock and day chips. Below 560px those three don't fit, so the
   three-button toggle is swapped for a single button that cycles EN → BM → ZH. */
.lang-toggle-compact[b-9n8cny5kx4] {
    display: none; align-items: center; gap: 4px;
    background: rgba(255,255,255,.12); color: #fff; border: none;
    border-radius: 999px; padding: 6px 10px;
    font-size: 11px; font-weight: 700; cursor: pointer;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    position: relative;
}
.lang-toggle-compact .material-symbols-outlined[b-9n8cny5kx4] { font-size: 15px; }

/* CR #18 — mute control. Icon-only; it sits beside the language toggle in the top bar. */
.sound-toggle[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); color: #fff; border: none;
    border-radius: 999px; padding: 6px; cursor: pointer;
    position: relative;
}
.sound-toggle .material-symbols-outlined[b-9n8cny5kx4] { font-size: 16px; }

@media (max-width: 560px) {
    .lang-toggle-full[b-9n8cny5kx4] { display: none; }
    .lang-toggle-compact[b-9n8cny5kx4] { display: inline-flex; }
    /* buy back a little more room for the three chips */
    .day-chip[b-9n8cny5kx4], .clock-chip[b-9n8cny5kx4] { padding: 6px 9px; font-size: 11.5px; }
}

/* CR V6 W3 — the tutorial overlay, its frame and the report preview were removed with the
   interactive tutorial. */

/* ── Day conclusion modal ── */
.conclusion-modal[b-9n8cny5kx4] {
    background: #1B2558; color: #fff; border-radius: 20px; width: 100%;
    max-width: 360px; padding: 28px 24px; text-align: center;
}
.conclusion-modal > .material-symbols-outlined[b-9n8cny5kx4] { font-size: 32px; color: #F59F00; }
.conclusion-title[b-9n8cny5kx4] { font-size: 16px; font-weight: 800; margin-top: 10px; }
.conclusion-body[b-9n8cny5kx4] { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.6; margin: 10px 0 20px; }
.conclusion-actions[b-9n8cny5kx4] { display: flex; flex-direction: column; gap: 8px; }
/* CR V4 item 6 — three equal options rather than a highlighted "confirm no action".
   Weighting one of them would be a nudge, and this prompt now shows to everyone. */
.conclusion-btn[b-9n8cny5kx4] {
    background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff;
    text-align: center; padding: 13px; border-radius: 10px;
    font-weight: 700; font-size: 13.5px; cursor: pointer;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.conclusion-btn:hover:not(:disabled)[b-9n8cny5kx4] { background: rgba(255,255,255,.08); }
.conclusion-btn:disabled[b-9n8cny5kx4] { opacity: .5; cursor: not-allowed; }

/* ── CR V5 item 5 / UI_V8.1 — social controls (Twidder, TickTock, WhatsUp only) ── */
/* The heart is injected markup, which carries no scope attribute, so it is reached through ::deep. */
[b-9n8cny5kx4] .soc-heart { display: block; flex-shrink: 0; }
button.x-act[b-9n8cny5kx4], button.tt-act[b-9n8cny5kx4], button.wa-act[b-9n8cny5kx4] { font-family: inherit; cursor: pointer; border: none; }

/* Twidder: X's own colours — pink like, green repost. */
button.x-act[b-9n8cny5kx4] {
    display: flex; align-items: center; gap: 5px; background: none; color: inherit; font-size: 12.5px;
    padding: 6px 4px; margin: -6px -4px; border-radius: 999px; transition: color .15s ease, transform .1s ease;
}
button.x-act:active[b-9n8cny5kx4] { transform: scale(.92); }
button.x-act.x-liked[b-9n8cny5kx4] { color: #F91880; }
button.x-act.x-reposted[b-9n8cny5kx4] { color: #00BA7C; }
button.x-act.x-share:hover[b-9n8cny5kx4] { color: #1D9BF0; }

/* TickTock: red heart when liked, yellow share once shared. */
button.tt-act[b-9n8cny5kx4] { background: none; color: #fff; padding: 0; transition: transform .1s ease; }
button.tt-act:active[b-9n8cny5kx4] { transform: scale(.88); }
button.tt-act.tt-liked[b-9n8cny5kx4]  .soc-heart { color: #FE2C55; }
button.tt-act.tt-shared .tt-share-icon[b-9n8cny5kx4] { color: #FACC15; }
.tt-share-icon[b-9n8cny5kx4] { transform: scaleX(-1); }

/* WhatsUp: a heart chip on the bubble, and two pill buttons under it. */
.wa-reaction[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; gap: 3px; position: relative;
    background: #fff; border: 1px solid #E4E7EC; border-radius: 999px; padding: 2px 8px; margin: -8px 0 0 12px;
    font-size: 12px; font-weight: 700; color: #344054; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.wa-reaction[b-9n8cny5kx4]  .soc-heart { color: #E11D48; }
.wa-actions[b-9n8cny5kx4] { display: flex; gap: 8px; margin-top: 12px; }
button.wa-act[b-9n8cny5kx4] {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
    background: #fff; border-radius: 999px; font-size: 13px; font-weight: 700; color: #344054;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
button.wa-act:active[b-9n8cny5kx4] { transform: scale(.97); }
button.wa-act.wa-reacted[b-9n8cny5kx4] { color: #E11D48; }
button.wa-act.wa-act-forwarded[b-9n8cny5kx4] { color: #15803D; }
.wa-fwd-icon[b-9n8cny5kx4] { font-size: 18px; transform: scaleX(-1); }

/* The share / forward confirmation, pinned to the top of the open card. */
.soc-toast-wrap[b-9n8cny5kx4] {
    position: sticky; top: 12px; z-index: 6; height: 0;
    display: flex; justify-content: center; pointer-events: none;
}
.soc-toast[b-9n8cny5kx4] {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
    background: #fff; color: #161823; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.soc-toast .material-symbols-outlined[b-9n8cny5kx4] { font-size: 16px; color: #15803D; }