/* BLISS Finserve - redesigned UI (2026)
 * Colours come from CSS variables printed per agent by theme_vars() in includes/ui.php:
 * --brand --brand-ink --brand-soft --brand-soft2 --brand-line --accent --page
 * Everything is prefixed fx- so it can sit next to Bootstrap 3 / main.css on legacy pages.
 */
@font-face{font-family:"PJS";src:url(fonts/pjs-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PJS";src:url(fonts/pjs-600.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"PJS";src:url(fonts/pjs-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"PJS";src:url(fonts/pjs-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --brand:#047e82;--brand-ink:#035254;--brand-soft:#e1f0f0;--brand-soft2:#f0f7f7;--brand-line:#9bcbcd;--accent:#53b8bb;--page:#f4f6f6;
  --ink:#10201f;--ink-2:#33413f;--muted:#5b6968;--faint:#6b7877;--line:#e3e9e8;--line-2:#eef2f2;--card:#fff;
  --ok:#11632f;--ok-bg:#e3f5ea;--warn:#8a4b08;--warn-bg:#fdf0dd;--bad:#9f1d14;--bad-bg:#fde7e5;--info:#1a438f;--info-bg:#e6eefb;
  --wa:#11733f;--wa-bg:#e3f5ea;
  --r-sm:10px;--r:14px;--r-lg:20px;--r-xl:24px;
  --shadow:0 8px 24px rgba(16,32,31,.08);
  --font:"PJS","Noto Sans Devanagari","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --top-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

body.fx{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-variant-numeric:tabular-nums;padding-bottom:var(--safe-b)}
.fx *,.fx *::before,.fx *::after{box-sizing:border-box}
:where(.fx) img{max-width:100%;height:auto}
:where(.fx) a{color:inherit;text-decoration:none}
.fx a:focus-visible,.fx button:focus-visible,.fx input:focus-visible,.fx select:focus-visible{outline:3px solid var(--brand-line);outline-offset:2px}
:where(.fx) :is(h1,h2,h3,h4){font-family:var(--font);color:inherit;margin:0;line-height:1.25;letter-spacing:-.01em}
:where(.fx) p{margin:0}
:where(.fx) button{font:inherit;color:inherit;cursor:pointer}
.ico{flex:none;display:block}
.fx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- layout ---------- */
.fx-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.fx-col{width:100%;max-width:600px;margin:0 auto;padding:0 16px}
.fx-stack{display:flex;flex-direction:column;gap:12px}
.fx-sec{margin-top:28px}
.fx-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.fx-sec__head h2{font-size:18px;font-weight:800}
.fx-sec__head a{font-size:13px;font-weight:700;color:var(--brand)}
.fx-muted{color:var(--muted)}
.fx-small{font-size:13px}

/* ---------- top bar ---------- */
.fx-top{position:sticky;top:0;z-index:50;background:var(--brand);color:#fff;padding-top:env(safe-area-inset-top,0px)}
.fx-top__in{height:var(--top-h);max-width:1120px;margin:0 auto;padding:0 8px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.fx-top__side{display:flex;align-items:center;gap:4px;min-width:0}
.fx-top__side--end{justify-content:flex-end}
.fx-top__title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw;text-align:center}
.fx-iconbtn{width:44px;height:44px;border-radius:12px;border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;justify-content:center}
.fx-iconbtn:hover,.fx-iconbtn:active{background:rgba(255,255,255,.14)}
.fx-mark{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-left:8px}
.fx-top--solid{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.fx-top--solid .fx-iconbtn{background:var(--line-2)}
.fx-top--solid .fx-iconbtn:hover{background:var(--line)}

/* ---------- buttons & fields ---------- */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r);border:0;font-weight:700;font-size:15px;text-align:center;line-height:1.2;transition:filter .15s}
.fx-btn:hover{filter:brightness(.96)}
.fx-btn--primary{background:var(--brand);color:#fff}
.fx-btn--dark{background:var(--ink);color:#fff}
.fx-btn--ghost{background:var(--line-2);color:var(--ink)}
.fx-btn--light{background:#fff;color:var(--ink)}
.fx-btn--wa{background:var(--wa-bg);color:var(--wa)}
.fx-btn--block{display:flex;width:100%}
.fx-btn--sm{min-height:40px;font-size:14px;padding:0 14px;border-radius:12px}
.fx-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.fx-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.fx-input{height:52px;width:100%;border-radius:var(--r);border:1px solid #c9d3d2;background:#fff;padding:0 14px;font:inherit;font-size:16px;font-weight:600;color:var(--ink)}
.fx-input[type=password]:not(:placeholder-shown){letter-spacing:.3em}
.fx-input:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px var(--brand-soft)}
.fx-input-group{display:flex;align-items:stretch;height:52px;border-radius:var(--r);border:1px solid #c9d3d2;background:#fff;overflow:hidden}
.fx-input-group:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fx-input-group span{display:flex;align-items:center;padding:0 12px;color:var(--muted);font-weight:700;border-right:1px solid var(--line);font-size:15px}
.fx-input-group input{flex:1;min-width:0;border:0;padding:0 12px;font:inherit;font-size:16px;font-weight:600;outline:0;letter-spacing:.02em;background:transparent;color:var(--ink)}
.fx-pin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fx-pin input{height:58px;border-radius:var(--r);border:1px solid #c9d3d2;text-align:center;font:inherit;font-size:24px;font-weight:800;background:#fff;color:var(--ink);width:100%;-moz-appearance:textfield}
.fx-pin input:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px var(--brand-soft)}
.fx-pin input::-webkit-outer-spin-button,.fx-pin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fx-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.fx-check input{width:20px;height:20px;accent-color:var(--brand)}
.fx-error{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:flex-start}

/* ---------- cards ---------- */
.fx-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.fx-card--pad-lg{padding:20px}
.fx-card--float{border:0;box-shadow:var(--shadow)}
.fx-card--flush{padding:0;overflow:hidden}

/* ---------- badges & chips ---------- */
.fx-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.fx-badge--ok{background:var(--ok-bg);color:var(--ok)}
.fx-badge--bad{background:var(--bad-bg);color:var(--bad)}
.fx-badge--warn{background:var(--warn-bg);color:var(--warn)}
.fx-badge--info{background:var(--info-bg);color:var(--info)}
.fx-badge--muted{background:var(--line-2);color:var(--muted)}
.fx-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 4px;margin:0 -16px;scrollbar-width:none}
.fx-chips::-webkit-scrollbar{display:none}
.fx-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;border:1px solid #d5dddc;background:#fff;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.fx-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.fx-chip small{font-weight:600;opacity:.7}

/* ---------- profile hero ---------- */
.fx-hero{background:var(--brand);color:#fff;border-radius:0 0 28px 28px;padding:8px 20px 68px;text-align:center;position:relative;overflow:hidden}
.fx-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16}
.fx-hero__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:1120px;margin:0 auto}
.fx-avatar{width:120px;height:120px;border-radius:50%;border:4px solid rgba(255,255,255,.92);background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:800;overflow:hidden;margin-bottom:10px;flex:none}
.fx-avatar img{width:100%;height:100%;object-fit:cover}
.fx-hero h1{font-size:26px;font-weight:800}
.fx-hero__sub{font-size:14px;opacity:.92}
.fx-hero__slogan{font-size:15px;opacity:.95;margin-top:6px;max-width:520px;line-height:1.5}
.fx-verified{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:700}

.fx-actions{margin:-44px 16px 0;position:relative;background:#fff;border-radius:var(--r-lg);padding:14px 6px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.fx-action{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0;font-size:12px;font-weight:700;color:var(--ink);background:none;border:0}
.fx-action__ic{width:50px;height:50px;border-radius:16px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center}
.fx-action--wa .fx-action__ic{background:var(--wa-bg);color:var(--wa)}

.fx-cta{display:flex;align-items:center;gap:14px;padding:18px;border-radius:var(--r-lg);background:var(--ink);color:#fff}
.fx-cta__ic{width:50px;height:50px;flex:none;border-radius:14px;background:var(--brand);display:flex;align-items:center;justify-content:center}
.fx-cta__txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.fx-cta__txt b{font-size:16px}
.fx-cta__txt span{font-size:13px;opacity:.78}

/* ---------- tiles ---------- */
.fx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fx-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 6px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:12px;font-weight:700;line-height:1.3;color:var(--ink);transition:border-color .15s,transform .15s}
.fx-tile:hover{border-color:var(--brand-line)}
.fx-tile:active{transform:scale(.98)}
.fx-tile__ic{width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fx-tile__ic img{width:30px;height:30px;object-fit:contain}
.fx-tile--feature{background:var(--brand-soft2);border-color:var(--brand-line)}

/* ---------- media cards ---------- */
.fx-scroller{display:flex;gap:12px;overflow-x:auto;padding:0 16px 4px;margin:0 -16px;scroll-snap-type:x mandatory;scrollbar-width:none}
.fx-scroller::-webkit-scrollbar{display:none}
.fx-media{flex:none;width:260px;scroll-snap-align:start;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.fx-media__img{aspect-ratio:16/9;background:var(--brand-soft);position:relative;display:block;overflow:hidden}
.fx-media__img img{width:100%;height:100%;object-fit:cover;display:block}
.fx-media__img iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fx-media__play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;border:0}
.fx-media__body{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.fx-media__body b{font-size:14px}
.fx-media__body span{font-size:12px;color:var(--muted)}

/* ---------- lists ---------- */
.fx-list{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.fx-list>a,.fx-list>div{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:54px;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:600}
.fx-list>a:last-child,.fx-list>div:last-child{border-bottom:0}
.fx-list>a:hover{background:var(--brand-soft2)}
.fx-list__ic{width:36px;height:36px;border-radius:10px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;flex:none}
.fx-list__txt{flex:1;min-width:0}
.fx-list .ico:last-child{color:var(--muted)}
.fx-kv{display:flex;justify-content:space-between;gap:16px;align-items:center}
.fx-kv>span:first-child{color:var(--muted);font-weight:500}
.fx-kv>span:last-child{font-weight:700;text-align:right}

/* ---------- contact ---------- */
.fx-contact{display:flex;flex-direction:column;gap:12px}
.fx-contact__row{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2);line-height:1.5}
.fx-contact__row .ico{margin-top:2px;color:var(--muted)}
.fx-social{display:flex;flex-wrap:wrap;gap:10px}
.fx-social a{width:44px;height:44px;border-radius:12px;background:var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.fx-foot{text-align:center;font-size:12px;color:var(--faint);padding:28px 16px 32px}
.fx-foot a{text-decoration:underline}

/* ---------- portal ---------- */
.fx-greet{padding-top:20px}
.fx-greet small{display:block;font-size:14px;color:var(--muted)}
.fx-greet h1{font-size:24px;font-weight:800}
.fx-summary{background:var(--brand);color:#fff;border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:16px}
.fx-summary__label{font-size:13px;opacity:.88;font-weight:600}
.fx-summary__big{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.fx-summary__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fx-summary__grid div{background:rgba(255,255,255,.14);border-radius:14px;padding:12px}
.fx-summary__grid small{display:block;font-size:12px;opacity:.88}
.fx-summary__grid b{font-size:19px;font-weight:800}

.fx-due{background:#fff;border:1px solid #f1d9b5;border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px}
.fx-due--overdue{border-color:#f3c2bd}
.fx-due__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fx-due__main{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fx-due__main b{font-size:16px}
.fx-due__amt{font-size:21px;font-weight:800;white-space:nowrap}

.fx-alerts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fx-alert{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px}
.fx-alert__top{display:flex;justify-content:space-between;align-items:center}
.fx-alert__dot{width:10px;height:10px;border-radius:50%}
.fx-alert__n{font-size:24px;font-weight:800;line-height:1}
.fx-alert span{font-size:13px;font-weight:600;color:var(--ink-2)}
.fx-alert.is-zero{opacity:.62}

.fx-bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px}
.fx-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.fx-bar i{display:block;width:100%;background:var(--brand-soft);border-radius:6px 6px 2px 2px;min-height:3px}
.fx-bar.is-max i{background:var(--brand)}
.fx-bar span{font-size:10px;color:var(--faint)}
.fx-bar b{font-size:10px;font-weight:700;color:var(--ink-2);white-space:nowrap}

.fx-advisor{display:flex;align-items:center;gap:12px}
.fx-advisor__ph{width:52px;height:52px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden;flex:none}
.fx-advisor__ph img{width:100%;height:100%;object-fit:cover}
.fx-advisor__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.fx-advisor__txt small{font-size:12px;color:var(--muted)}
.fx-advisor__txt b{font-size:15px}
.fx-sqbtn{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;flex:none}
.fx-sqbtn--wa{background:var(--wa-bg);color:var(--wa)}

/* policies list */
.fx-toolbar{background:#fff;border-bottom:1px solid var(--line);padding:10px 0 12px}
.fx-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:14px;background:var(--line-2);color:var(--muted)}
.fx-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;outline:0;color:var(--ink)}
.fx-totals{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.fx-totals b{color:var(--ink)}
.fx-select{height:38px;border-radius:10px;border:1px solid #d5dddc;background:#fff;font:inherit;font-size:13px;font-weight:600;padding:0 8px;color:var(--ink)}
.fx-pol{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;transition:border-color .15s}
.fx-pol:hover{border-color:var(--brand-line)}
.fx-pol__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fx-pol__head b{font-size:16px;font-weight:800;display:block}
.fx-pol__head small{font-size:13px;color:var(--muted)}
.fx-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fx-fig small{display:block;font-size:11px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fx-fig b{font-size:15px;font-weight:700}
.fx-fig--warn b{color:var(--warn)}
.fx-fig--bad b{color:var(--bad)}
.fx-pol__pay{display:flex;gap:8px;flex-wrap:wrap}
.fx-empty{text-align:center;padding:40px 16px;color:var(--muted)}
.fx-empty .ico{margin:0 auto 10px;color:var(--brand-line)}

/* policy detail */
.fx-dhero{background:var(--brand);color:#fff;border-radius:0 0 28px 28px;padding:12px 20px 28px}
.fx-dhero .fx-badge{background:rgba(255,255,255,.18);color:#fff}
.fx-dhero h1{font-size:26px;font-weight:800;margin-top:8px}
.fx-dhero p{opacity:.92;font-size:14px}
.fx-banner{border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--warn-bg)}
.fx-banner--bad{background:var(--bad-bg)}
.fx-banner__row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fx-banner small{font-size:12px;font-weight:800;letter-spacing:.03em;color:var(--warn)}
.fx-banner--bad small{color:var(--bad)}
.fx-banner__amt{font-size:22px;font-weight:800}
.fx-banner__split{font-size:12px;color:var(--ink-2);text-align:right}
.fx-progress{height:10px;border-radius:999px;background:#e9eeee;overflow:hidden}
.fx-progress i{display:block;height:100%;background:var(--brand);border-radius:999px}
.fx-steps{display:flex;flex-direction:column}
.fx-step{display:flex;gap:14px}
.fx-step__rail{display:flex;flex-direction:column;align-items:center;width:16px;flex:none}
.fx-step__dot{width:14px;height:14px;border-radius:50%;border:3px solid #c9d3d2;background:#fff}
.fx-step.is-done .fx-step__dot{border-color:var(--brand);background:var(--brand)}
.fx-step.is-now .fx-step__dot{border-color:#c26a0a}
.fx-step__line{flex:1;width:2px;background:#e1e7e7;min-height:26px}
.fx-step:last-child .fx-step__line{display:none}
.fx-step__txt{padding-bottom:16px;margin-top:-3px;display:flex;flex-direction:column}
.fx-step__txt b{font-size:14px}
.fx-step__txt span{font-size:13px;color:var(--muted)}

/* bottom tabs */
.fx-tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.fx-tabs__in{max-width:600px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 4px 8px}
.fx-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11px;font-weight:700;color:var(--muted)}
.fx-tab.is-on{color:var(--brand)}
body.has-tabs{padding-bottom:calc(84px + var(--safe-b))}

/* modal */
.fx-modal{position:fixed;inset:0;z-index:100;background:rgba(16,32,31,.5);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.fx-modal__box{background:#fff;border-radius:22px;max-width:480px;width:100%;max-height:86vh;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.fx-modal__box img{border-radius:14px;width:100%}
.fx-modal__body{font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (min-width:600px){.fx-modal{align-items:center}}

/* toast */
.fx-toast{position:fixed;left:16px;right:16px;bottom:calc(96px + var(--safe-b));z-index:120;max-width:420px;margin:0 auto;background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--shadow)}

/* install hint (browser only) */
.fx-install{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--brand-line);border-radius:16px;padding:12px 14px}
.fx-install .fx-btn{margin-left:auto}
.is-app .fx-web-only{display:none!important}

/* ---------- splash ---------- */
.fx-splash{min-height:100vh;min-height:100dvh;background:var(--brand);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:24px;position:relative;overflow:hidden}
.fx-splash .fx-avatar{width:132px;height:132px;animation:fx-pop .5s ease-out both}
.fx-splash h1{font-size:26px;font-weight:800;animation:fx-up .5s .08s ease-out both}
.fx-splash p{opacity:.9;animation:fx-up .5s .14s ease-out both}
.fx-splash__dots{display:flex;gap:6px;margin-top:22px}
.fx-splash__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.7);animation:fx-blink 1s infinite}
.fx-splash__dots i:nth-child(2){animation-delay:.15s}
.fx-splash__dots i:nth-child(3){animation-delay:.3s}
@keyframes fx-pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-up{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes fx-blink{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.fx *{animation:none!important;transition:none!important}}

/* ---------- auth / gate pages ---------- */
.fx-authhead{background:var(--brand);color:#fff;padding:8px 20px 64px;border-radius:0 0 28px 28px}
.fx-authhead__in{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.fx-authhead h1{font-size:27px;font-weight:800;line-height:1.2}
.fx-authhead p{font-size:15px;opacity:.92}
.fx-authcard{margin:-40px auto 0;max-width:568px;position:relative;background:#fff;border-radius:22px;padding:22px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
@media (max-width:599px){.fx-authcard{margin-left:16px;margin-right:16px}}

/* ---------- legacy pages inside the new shell ---------- */
.fx-legacy .main-content>.inner>br:first-child,.fx-legacy .main-content>.inner>br:nth-child(-n+3){display:none}
.fx-legacy .top-section{display:none}

/* ---------- wider screens ---------- */
@media (min-width:600px){
  .fx-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fx-actions{max-width:568px;margin-left:auto;margin-right:auto}
}
@media (min-width:960px){
  body.page-profile .fx-hero{padding:40px 32px 88px;text-align:left;border-radius:0 0 36px 36px}
  body.page-profile .fx-hero__in{flex-direction:row;align-items:center;gap:32px}
  body.page-profile .fx-hero .fx-avatar{width:168px;height:168px;margin:0}
  body.page-profile .fx-hero__txt{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
  body.page-profile .fx-hero h1{font-size:40px}
  body.page-profile .fx-hero__sub{font-size:17px}
  body.page-profile .fx-hero__slogan{font-size:17px}
  body.page-profile .fx-actions{max-width:1088px;margin:-48px auto 0;grid-template-columns:repeat(4,minmax(0,1fr));padding:16px}
  body.page-profile .fx-action{flex-direction:row;justify-content:center;font-size:14px;gap:12px}
  body.page-profile .fx-profile-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px;align-items:start}
  body.page-profile .fx-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.page-profile .fx-side{position:sticky;top:84px}
  body.page-profile .fx-scroller{overflow:visible;flex-wrap:wrap;margin:0;padding:0}
  body.page-profile .fx-media{width:calc(50% - 6px)}
}
@media (min-width:1200px){
  body.page-profile .fx-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* portal pages: keep the top bar aligned with the centred column on wide screens */
.page-portal .fx-top__in,.page-login .fx-top__in{max-width:632px}

/* ---------- content pages ---------- */
.fx-pagehead{background:var(--brand);color:#fff;border-radius:0 0 28px 28px;padding:4px 0 26px}
.fx-pagehead__in{max-width:600px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:6px}
.fx-pagehead--wide .fx-pagehead__in{max-width:1120px}
.fx-pagehead h1{font-size:24px;font-weight:800}
.fx-pagehead p{font-size:14px;opacity:.9}
.fx-pagehead .fx-avatar{width:64px;height:64px;font-size:20px;border-width:3px;margin:0 0 6px}
.fx-prose{font-size:15px;line-height:1.65;color:var(--ink-2);overflow-wrap:anywhere}
.fx-prose p{margin:0 0 12px}
.fx-prose h2,.fx-prose h3,.fx-prose h4{margin:18px 0 8px;color:var(--ink);font-size:17px}
.fx-prose ul,.fx-prose ol{padding-left:20px;margin:0 0 12px}
.fx-prose li{margin-bottom:6px}
.fx-prose img{border-radius:12px;max-width:100%;height:auto}
.fx-prose a{color:var(--brand);text-decoration:underline}
.fx-prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.fx-prose td,.fx-prose th{border:1px solid var(--line);padding:8px}
.fx-article{display:flex;flex-direction:column;gap:12px}
.fx-article h2{font-size:18px;font-weight:800}
.fx-article__img{border-radius:14px;overflow:hidden;background:var(--brand-soft2)}
.fx-article__img img{display:block;width:100%;height:auto}
.fx-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#1b2b2a}
.fx-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.fx-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.fx-textarea{min-height:110px;width:100%;border-radius:var(--r);border:1px solid #c9d3d2;background:#fff;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);resize:vertical}
.fx-textarea:focus,.fx-sel:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px var(--brand-soft)}
.fx-sel{height:52px;width:100%;border-radius:var(--r);border:1px solid #c9d3d2;background:#fff;padding:0 12px;font:inherit;font-size:16px;font-weight:600;color:var(--ink)}
.fx-form{display:flex;flex-direction:column;gap:14px}
.fx-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:480px){.fx-form__row{grid-template-columns:1fr}}
.fx-ok{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:flex-start}

/* accordion */
.fx-acc{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fx-acc+.fx-acc{margin-top:10px}
.fx-acc>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px;cursor:pointer;font-weight:700;font-size:15px}
.fx-acc>summary::-webkit-details-marker{display:none}
.fx-acc>summary .fx-acc__n{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--line-2);border-radius:999px;padding:2px 9px}
.fx-acc>summary>.ico:last-child{transition:transform .2s;color:var(--muted)}
.fx-acc[open]>summary>.ico:last-child{transform:rotate(90deg)}
.fx-acc__body{border-top:1px solid var(--line-2)}
.fx-acc__body>a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:600}
.fx-acc__body>a:last-child{border-bottom:0}
.fx-acc__body>a:hover{background:var(--brand-soft2)}
.fx-acc__body .fx-list__ic{width:32px;height:32px;border-radius:9px}

/* gallery */
.fx-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.fx-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fx-gallery a{display:block;border-radius:14px;overflow:hidden;background:var(--brand-soft2);border:1px solid var(--line);aspect-ratio:1/1}
.fx-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.fx-gallery--doc a{aspect-ratio:3/4;position:relative}
.fx-gallery__cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(16,32,31,.82));color:#fff;padding:22px 10px 8px;font-size:12px;font-weight:700;line-height:1.3}
.fx-gallery__pdf{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--bad);font-weight:800;font-size:13px}

/* data tables */
.fx-tablebox{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:auto;max-height:70vh;-webkit-overflow-scrolling:touch}
.fx-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;white-space:nowrap}
.fx-table th{position:sticky;top:0;background:var(--ink);color:#fff;font-weight:700;text-align:right;padding:10px 12px;z-index:2}
.fx-table td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:right}
.fx-table th:first-child,.fx-table td:first-child{text-align:left;position:sticky;left:0;z-index:1;background:inherit}
.fx-table th:first-child{z-index:3;background:var(--ink)}
.fx-table tbody tr{background:#fff}
.fx-table tbody tr:nth-child(even){background:#fafbfb}
.fx-table tr.is-group td{background:var(--brand-soft2);font-weight:800;color:var(--brand-ink);text-align:left}
.fx-table tr.is-total td{font-weight:800;background:var(--line-2)}
.fx-table td.is-zero{color:#b7c1c0}
.fx-table td.is-neg{color:var(--bad)}
.fx-table td.is-pos{color:var(--ok)}
.fx-table a{color:var(--brand);font-weight:700}

/* year groups (cashflow) */
.fx-year{display:flex;flex-direction:column;gap:8px}
.fx-year__head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}
.fx-year__head b{font-size:17px;font-weight:800}
.fx-year__head span{font-size:14px;font-weight:800;color:var(--ok)}
.fx-flow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.fx-flow__ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--info-bg);color:var(--info)}
.fx-flow__ic--mat{background:var(--ok-bg);color:var(--ok)}
.fx-flow__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.fx-flow__txt b{font-size:14px}
.fx-flow__txt small{font-size:12px;color:var(--muted)}
.fx-flow__amt{font-weight:800;font-size:15px;white-space:nowrap}

/* tabs/segmented */
.fx-seg{display:flex;background:var(--line-2);border-radius:12px;padding:4px;gap:4px}
.fx-seg a,.fx-seg button{flex:1;text-align:center;border:0;background:transparent;border-radius:9px;min-height:38px;font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center}
.fx-seg .is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,32,31,.12)}

/* result tiles */
.fx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fx-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.fx-kpi small{display:block;font-size:11px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fx-kpi b{font-size:16px;font-weight:800;display:block;margin-top:2px;overflow-wrap:anywhere}
.fx-kpi--brand{background:var(--brand);border-color:var(--brand);color:#fff}
.fx-kpi--brand small{color:rgba(255,255,255,.8)}
@media (max-width:420px){.fx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-kpis .fx-kpi--brand{grid-column:1/-1}}