body { -webkit-tap-highlight-color: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
        *, *::before, *::after { box-sizing: border-box; }
        
        @media (max-width: 767px) {
            .app-header-inner {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                    "brand"
                    "actions"
                    "month";
                gap: 8px;
                height: auto !important;
                padding-top: 8px !important;
                padding-bottom: 8px !important;
            }

            .app-header-brand {
                grid-area: brand;
                min-width: 0 !important;
            }

            .app-header-brand h1 {
                font-size: 1rem !important;
                line-height: 1.2 !important;
            }

            .app-header-brand p {
                font-size: 10px !important;
                line-height: 1.2 !important;
            }

            .app-header-controls {
                grid-area: actions;
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: 6px;
                width: 100%;
                min-width: 0 !important;
            }

            .app-header-controls > button,
            .app-header-controls > label {
                display: inline-flex !important;
                width: 100%;
                min-width: 0;
                justify-content: center;
                padding: 7px 8px !important;
                font-size: 11px !important;
                white-space: nowrap;
            }

            .app-header-controls > button i,
            .app-header-controls > label i {
                width: 14px !important;
                height: 14px !important;
                flex: 0 0 auto;
            }

            .app-header-month,
            #monthSelect {
                grid-area: month;
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
            }

            .main-container { padding-left: 12px !important; padding-right: 12px !important; }
            .status-mobile-safe { min-width: 0; overflow: hidden; }
            .status-mobile-safe > * { min-width: 0; }
        }
/* Session checks hide data even when a navigation control changes a view. */
body.auth-locked #app-content,
body.auth-locked #status-panel,
body.auth-locked #monthSelect,
body.auth-locked #qr-confirm-modal { display: none !important; }
/* Three-month allowance outlook, with textual warnings as well as colour. */
.forecast-panel { background: white; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.25rem; }
.forecast-panel h2 { font-size: 1.1rem; font-weight: 750; color: #0f172a; }
.forecast-intro, .forecast-note { font-size: .75rem; line-height: 1.6; color: #64748b; margin-top: .5rem; }
.forecast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.forecast-card { min-width: 0; border: 1px solid #e2e8f0; border-radius: .85rem; padding: 1rem; background: #f8fafc; }
.forecast-card h3 { font-weight: 750; color: #1e293b; }
.forecast-summary { font-size: .8rem; line-height: 1.5; margin: .5rem 0; color: #475569; }
.forecast-danger { border-color: #fda4af; background: #fff1f2; }
.forecast-danger .forecast-summary, .forecast-negative { color: #be123c; }
.forecast-row { display: flex; justify-content: space-between; gap: .75rem; padding: .8rem 0; border-top: 1px solid #e2e8f0; font-size: .8rem; }
.forecast-row small { display: block; font-size: .7rem; margin-top: .2rem; }
.forecast-value { text-align: right; max-width: 55%; }
.forecast-value strong { white-space: nowrap; font-size: 1rem; }
@media (max-width: 640px) { .forecast-grid { grid-template-columns: 1fr; } .forecast-panel { padding: 1rem; } }
.forecast-month { margin-top: .75rem; border: 1px solid #e2e8f0; border-radius: .65rem; padding: .65rem; background: white; }
.forecast-month summary { cursor: pointer; display: flex; gap: .75rem; justify-content: space-between; align-items: start; font-size: .8rem; }
.forecast-month summary small { display: block; margin-top: .2rem; font-size: .7rem; }
.forecast-month summary:focus-visible { outline: 2px solid #4f46e5; outline-offset: 4px; }
.forecast-values { margin-top: .6rem; font-size: .75rem; }
.forecast-values > div { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .4rem 0; border-top: 1px solid #e2e8f0; }
.forecast-values dd { text-align: right; font-weight: 600; }
.forecast-after { font-weight: 700; color: #312e81; }
.forecast-low { color: #92400e; }
.forecast-month.forecast-low { background: #fffbeb; border-color: #fcd34d; }
.forecast-month.forecast-negative { background: #fff1f2; border-color: #fda4af; }
.forecast-distributions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap: 1rem; }
.forecast-distributions[hidden] { display: none; }
.forecast-allocation { border: 1px solid #c7d2fe; border-radius: .85rem; padding: 1rem; background: #eef2ff; }
.forecast-allocation h3 { font-size: .9rem; font-weight: 700; margin-bottom: .5rem; }
.forecast-inconsistent { background: #fff1f2; border-color: #fda4af; color: #9f1239; }
.forecast-inconsistent small { display: block; overflow-wrap: anywhere; margin-top: .5rem; font-size: .65rem; }
.forecast-unavailable { max-width: 55%; font-size: .75rem; text-align: right; color: #92400e; }
.forecast-tile { min-width: 0; padding: 1rem; border: 1px solid #f1f5f9; border-radius: 1rem; background: white; text-align: left; box-shadow: 0 1px 2px #0000000d; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; cursor: pointer; }
.forecast-tile:focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }
.forecast-tile:hover { border-color: #a5b4fc; }
.forecast-tile-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; color: #64748b; font-size: .75rem; font-weight: 600; }
.forecast-signal { width: .8rem; height: .8rem; border-radius: 50%; flex: 0 0 auto; background: #64748b; }
.forecast-tile[data-signal="green"] .forecast-signal { background: #059669; box-shadow: 0 0 0 4px #ecfdf5; }
.forecast-tile[data-signal="yellow"] .forecast-signal { background: #d97706; box-shadow: 0 0 0 4px #fffbeb; }
.forecast-tile[data-signal="red"] .forecast-signal { background: #e11d48; box-shadow: 0 0 0 4px #fff1f2; }
.forecast-tile-status { font-size: 1.15rem; line-height: 1.3; color: #0f172a; }
.forecast-tile-caption { font-size: .65rem; color: #64748b; }
.forecast-tile[data-signal="red"] .forecast-tile-status { color: #be123c; }
.forecast-tile[data-signal="yellow"] .forecast-tile-status { color: #92400e; }
.forecast-tile[data-signal="green"] .forecast-tile-status { color: #047857; }
.forecast-panel[hidden], .forecast-card[hidden] { display: none !important; }
#dashboard-kpis { grid-auto-rows: 1fr; }
.forecast-tile-status { font-size: .9rem; }
.forecast-tile { gap: .3rem; }
@media (max-width: 640px) {
    .forecast-tile { padding: .8rem; }
    .forecast-tile-status { font-size: .8rem; }
    .forecast-tile-amounts { font-size: .85rem; }
}
.forecast-tile-month { font-size: .75rem; font-weight: 650; color: #334155; }
.forecast-tile-amounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem; font-size: .95rem; font-weight: 750; color: #312e81; font-variant-numeric: tabular-nums; }
.forecast-tile-amounts > span { white-space: nowrap; }
.withdrawal-actions { display: grid; gap: .65rem; margin-top: .75rem; }
.forecast-distributions { align-items: start; }
.withdrawal-action { border-top: 1px solid #c7d2fe; padding-top: .65rem; display: flex; flex-direction: column; align-items: stretch; gap: .45rem; font-size: .75rem; }
.withdrawal-action .forecast-unavailable { max-width: none; text-align: left; }
.withdrawal-qr { min-height: 44px; background: #4338ca; color: white; font-weight: 650; border-radius: .5rem; padding: .6rem .8rem; }
.withdrawal-qr:hover { background: #3730a3; }
.withdrawal-qr:focus-visible { outline: 2px solid #4338ca; outline-offset: 3px; }
.qr-direction { font-weight: 750; color: #3730a3; }
.qr-confirm-text { max-width: 65%; text-align: right; overflow-wrap: anywhere; }
#qr-confirm-modal { overflow-y: auto; }
#qr-confirm-modal > div { max-height: calc(100dvh - 2rem); overflow-y: auto; }
/* Keep chart canvases inside their container while ResizeObserver catches up. */
.tab-content canvas { max-width: 100%; }