/* ═══ tinydabba v5 · Material 3 Expressive · core (rev 2, 2026-10-29 night) ═══
   Owner's revision: thinner type (M3 weights: display/headline 400, title 500, label 500, body 400), lighter surfaces, the
   brand Deep Sea kept for the one filled action, everything else on tonal containers (primary / secondary / tertiary and
   six extra accent palettes), more M3E motion (springs as linear(), scroll-driven reveals, shape morphs, press morphs,
   condensing app bar, chip pop), [hidden] always wins. Shared by home-v5.php and the v5 dashboard. */
:root{
  --md-primary:#02404F;--md-on-primary:#FFFFFF;--md-primary-container:#C6EBF7;--md-on-primary-container:#0B3340;
  --md-secondary:#4E6168;--md-on-secondary:#FFFFFF;--md-secondary-container:#DCE9EF;--md-on-secondary-container:#1A2A30;
  --md-tertiary:#056B5C;--md-on-tertiary:#FFFFFF;--md-tertiary-container:#B4F2E3;--md-on-tertiary-container:#00332A;
  --md-error:#BA1A1A;--md-on-error:#FFFFFF;--md-error-container:#FFDAD6;--md-on-error-container:#410002;
  --md-warn-container:#FFE4BD;--md-on-warn-container:#3A2400;
  --md-surface:#FDFDFD;--md-on-surface:#1C2124;--md-on-surface-variant:#4A565B;
  --md-surface-container-lowest:#FFFFFF;--md-surface-container-low:#F5F8FA;--md-surface-container:#EFF3F5;--md-surface-container-high:#E9EEF0;--md-surface-container-highest:#E1E7EA;
  --md-outline:#73808A;--md-outline-variant:#C7D0D5;--md-inverse-surface:#2D3134;--md-inverse-on-surface:#EEF1F3;--md-inverse-primary:#90D0E4;
  --td-signal:#03BFA6;--td-deep:#02404F;--td-on-deep:#FFFFFF;--td-on-deep-2:#BFE7F1;--td-deep-2:#0A5566;
  /* extra expressive palettes (containers + on-colours), used instead of more Deep Sea */
  --acc-sun:#E0A100;--acc-sun-c:#FFE9A8;--on-acc-sun-c:#3D2F00;
  --acc-berry:#B4246A;--acc-berry-c:#FFD9E6;--on-acc-berry-c:#5A1232;
  --acc-indigo:#4A5AC4;--acc-indigo-c:#E0E3FF;--on-acc-indigo-c:#232E72;
  --acc-leaf:#2E7D32;--acc-leaf-c:#CDF2C6;--on-acc-leaf-c:#0D3A12;
  --acc-lav:#6750A4;--acc-lav-c:#EADDFF;--on-acc-lav-c:#2B1A5C;
  --acc-coral:#C2410C;--acc-coral-c:#FFDCCF;--on-acc-coral-c:#3E1200;
  --tier-bronze:#F1D2B3;--on-tier-bronze:#4A2A10;--tier-silver:#DCE3E8;--on-tier-silver:#2A3338;--tier-gold:#F6DE8D;--on-tier-gold:#3D2F00;--tier-platinum:#CDEFF7;--on-tier-platinum:#02404F;
  --shadow-1:0 1px 2px rgba(0,30,40,.14),0 1px 3px 1px rgba(0,30,40,.06);--shadow-2:0 8px 20px -10px rgba(0,30,40,.35);--shadow-3:0 10px 24px -10px rgba(0,30,40,.4);
  --m3-bouncy:linear(0,0.027,0.098,0.198,0.314,0.436,0.556,0.669,0.77,0.857,0.93,0.987,1.031,1.062,1.081,1.092,1.095,1.092,1.085,1.076,1.065,1.053,1.042,1.031,1.022,1.013,1.007,1.001,0.997,0.994,0.992,0.991,0.991,0.991,0.992,0.993,0.994,0.995,0.996,0.997,1);
  --m3-spring:linear(0,0.018,0.065,0.131,0.209,0.292,0.377,0.46,0.538,0.611,0.678,0.737,0.789,0.834,0.872,0.904,0.931,0.952,0.97,0.983,0.994,1.002,1.007,1.011,1.013,1.015,1.015,1.015,1.014,1.013,1.012,1.011,1.01,1.008,1.007,1.006,1.005,1.004,1.003,1.003,1);
  --m3-calm:linear(0,0.01,0.035,0.073,0.119,0.171,0.226,0.283,0.34,0.396,0.45,0.502,0.552,0.598,0.641,0.681,0.717,0.751,0.781,0.808,0.833,0.855,0.875,0.892,0.908,0.921,0.933,0.944,0.953,0.961,0.967,0.973,0.978,0.982,0.986,0.989,0.992,0.994,0.995,0.997,1);
  --m3-effects:linear(0,0.037,0.123,0.23,0.34,0.446,0.541,0.624,0.695,0.755,0.804,0.844,0.877,0.903,0.924,0.94,0.954,0.964,0.972,0.978,0.983,0.987,0.99,0.992,0.994,0.996,0.997,0.997,1);
  --e-fast:var(--m3-bouncy);--d-fast:348ms;--e-def:var(--m3-spring);--d-def:412ms;--e-slow:var(--m3-spring);--d-slow:567ms;--e-fx:var(--m3-effects);--d-fx-fast:137ms;--d-fx:212ms;--d-fx-slow:299ms;
  --font:"Google Sans Flex","Google Sans",Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  --w-display:400;--w-title:500;--w-label:500;--w-body:400;
  --wrap:1280px;--gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --md-primary:#90D0E4;--md-on-primary:#003641;--md-primary-container:#0E4A5B;--md-on-primary-container:#C6EBF7;
  --md-secondary:#B6CAD1;--md-on-secondary:#213339;--md-secondary-container:#374A50;--md-on-secondary-container:#DCE9EF;
  --md-tertiary:#84D6C3;--md-on-tertiary:#00382F;--md-tertiary-container:#0B5447;--md-on-tertiary-container:#B4F2E3;
  --md-error:#FFB4AB;--md-on-error:#690005;--md-error-container:#93000A;--md-on-error-container:#FFDAD6;
  --md-warn-container:#5E4300;--md-on-warn-container:#FFE4BD;
  --md-surface:#111517;--md-on-surface:#E0E5E8;--md-on-surface-variant:#BFC9CE;
  --md-surface-container-lowest:#0B1012;--md-surface-container-low:#191E21;--md-surface-container:#1D2326;--md-surface-container-high:#272D30;--md-surface-container-highest:#32383B;
  --md-outline:#899397;--md-outline-variant:#3F4A4F;--md-inverse-surface:#E0E5E8;--md-inverse-on-surface:#2D3134;--md-inverse-primary:#02404F;
  --acc-sun:#F3C64A;--acc-sun-c:#5E4B00;--on-acc-sun-c:#FFE9A8;
  --acc-berry:#FFB0CA;--acc-berry-c:#6F334A;--on-acc-berry-c:#FFD9E6;
  --acc-indigo:#BAC3FF;--acc-indigo-c:#334086;--on-acc-indigo-c:#E0E3FF;
  --acc-leaf:#A0D39A;--acc-leaf-c:#235024;--on-acc-leaf-c:#CDF2C6;
  --acc-lav:#D0BCFF;--acc-lav-c:#4F378B;--on-acc-lav-c:#EADDFF;
  --acc-coral:#FFB59B;--acc-coral-c:#7A2E0A;--on-acc-coral-c:#FFDCCF;
  --tier-bronze:#6B4423;--on-tier-bronze:#FFE0C7;--tier-silver:#3D474D;--on-tier-silver:#E2E9EE;--tier-gold:#5E4B00;--on-tier-gold:#FFE38A;--tier-platinum:#0E4A5B;--on-tier-platinum:#CDEFF7;
  --shadow-1:0 1px 2px rgba(0,0,0,.5),0 1px 3px 1px rgba(0,0,0,.3);--shadow-2:0 8px 20px -10px rgba(0,0,0,.7);--shadow-3:0 10px 24px -10px rgba(0,0,0,.8);
  color-scheme:dark;
}
:root[data-motion="standard"]{--e-fast:var(--m3-calm);--d-fast:155ms;--e-def:var(--m3-calm);--d-def:219ms;--e-slow:var(--m3-calm);--d-slow:335ms}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--md-surface);scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--font);font-optical-sizing:auto;font-size:16px;line-height:1.5;font-weight:var(--w-body);background:var(--md-surface);color:var(--md-on-surface);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:clip;interpolate-size:allow-keywords;transition:background-color var(--d-fx-slow) var(--e-fx),color var(--d-fx-slow) var(--e-fx)}
a{color:inherit}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--md-tertiary);outline-offset:3px}
img{max-width:100%}
[hidden]{display:none !important}
.ic{width:24px;height:24px;fill:currentColor;flex:none;display:block}
.shp{display:block;overflow:visible}
.shp path{transition:d var(--d-slow) var(--e-def),fill var(--d-fx-slow) var(--e-fx)}
.morph .shp{transition:rotate var(--d-slow) var(--e-fast),scale var(--d-slow) var(--e-fast)}
.morph:hover .shp{rotate:40deg;scale:1.06}
.spin{animation:td-rot 60s linear infinite}
.spin-r{animation:td-rot 40s linear infinite reverse}
@keyframes td-rot{to{rotate:360deg}}

/* ── layout + type (M3 scale, regular weights; ROND gives the personality instead of weight) ── */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:clamp(48px,6vw,96px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(20px,3vw,36px)}
.sec-head>div{display:flex;flex-direction:column;gap:10px;max-width:760px}
.sec-head>.bg{flex-direction:row;max-width:none}
.over{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--md-tertiary)}
.over.sun{color:var(--acc-sun)}.over.berry{color:var(--acc-berry)}.over.indigo{color:var(--acc-indigo)}.over.lav{color:var(--acc-lav)}.over.leaf{color:var(--acc-leaf)}.over.coral{color:var(--acc-coral)}
.disp{margin:0;font-size:clamp(38px,4.4vw,64px);line-height:1.06;font-weight:var(--w-display);letter-spacing:-.02em;font-variation-settings:"ROND" 100}
.h2{margin:0;font-size:clamp(28px,3.2vw,46px);line-height:1.1;font-weight:var(--w-display);letter-spacing:-.015em;font-variation-settings:"ROND" 100;text-wrap:balance}
.h3{margin:0;font-size:clamp(20px,1.6vw,24px);line-height:1.25;font-weight:var(--w-title);letter-spacing:-.005em;font-variation-settings:"ROND" 70;text-wrap:balance}
.lead{margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:var(--md-on-surface-variant);text-wrap:pretty}
.body{margin:0;font-size:16px;line-height:1.55;text-wrap:pretty}
.lbl{font-size:12px;font-weight:var(--w-label);letter-spacing:.05em;text-transform:uppercase;color:var(--md-on-surface-variant)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* ── state layers (hover 8% / pressed 12%) ── */
.btn::before,.ibtn::before,.chip::before,.cg button::before,.step::before,.fabitem::before,.fab::before,.navi::before,.tile.act::before,.ri::before,.nb-i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;z-index:-1;transition:opacity var(--d-fx) var(--e-fx)}
.btn:hover::before,.ibtn:hover::before,.chip:hover::before,.cg button:hover::before,.step:hover::before,.fabitem:hover::before,.fab:hover::before,.navi:hover::before,.tile.act:hover::before,.ri:hover::before,.nb-i:hover::before{opacity:.08}
.btn:active::before,.ibtn:active::before,.chip:active::before,.cg button:active::before,.step:active::before,.fabitem:active::before,.fab:active::before,.navi:active::before,.tile.act:active::before,.ri:active::before,.nb-i:active::before{opacity:.12}

/* ── buttons: 40 / 48 / 56 / 72, round → square on press (shape morph) ── */
.btn{--h:48px;--r:24px;--rp:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 22px;border:0;border-radius:var(--r);font:inherit;font-size:15px;font-weight:var(--w-title);line-height:1;text-decoration:none;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-radius var(--d-fast) var(--e-fast),background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx),box-shadow var(--d-fx) var(--e-fx),flex-grow var(--d-fast) var(--e-fast),scale var(--d-fast) var(--e-fast)}
.btn:active{border-radius:var(--rp);scale:.97}
.btn .ic{width:20px;height:20px}
.btn .material-symbols-outlined{font-size:20px}
.btn-s{--h:40px;--r:20px;--rp:8px;padding:0 16px;font-size:14px}
.btn-m{--h:56px;--r:28px;--rp:12px;padding:0 26px;font-size:16px}
.btn-m .ic{width:22px;height:22px}
.btn-m .material-symbols-outlined{font-size:22px}
.btn-l{--h:72px;--r:36px;--rp:16px;padding:0 34px;font-size:20px;gap:12px}
.btn-l .ic{width:26px;height:26px}
.filled{background:var(--md-primary);color:var(--md-on-primary)}
.tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.tonal-t{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.tonal-lav{background:var(--acc-lav-c);color:var(--on-acc-lav-c)}
.tonal-sun{background:var(--acc-sun-c);color:var(--on-acc-sun-c)}
.outlined{background:transparent;color:var(--md-on-surface-variant);box-shadow:inset 0 0 0 1px var(--md-outline-variant)}
.textb{background:transparent;color:var(--md-primary);padding:0 14px}
.danger{background:var(--md-error);color:var(--md-on-error)}
.btn:disabled{opacity:.5;cursor:default}
.ibtn{width:48px;height:48px;border-radius:24px;border:0;padding:0;display:inline-grid;place-items:center;background:transparent;color:var(--md-on-surface-variant);cursor:pointer;position:relative;isolation:isolate;overflow:hidden;flex:none;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-radius var(--d-fast) var(--e-fast),width var(--d-fast) var(--e-fast),background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx)}
.ibtn:active{border-radius:14px}
.ibtn.tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.ibtn.filled{background:var(--md-primary);color:var(--md-on-primary)}
.ibtn[aria-pressed="true"]{border-radius:16px;background:var(--md-primary);color:var(--md-on-primary)}
.ibtn .material-symbols-outlined{font-size:24px}
.flip{rotate:180deg}
.bg{display:flex;align-items:center;gap:4px}
.bg .ibtn:active{width:60px}
.bg:has(.ibtn:active) .ibtn:not(:active){width:42px}

/* ── chips (filter: 32dp label + check; assist: 44dp) with a spring pop on select ── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:4px;margin:-4px}
.chips.scroll::-webkit-scrollbar{display:none}
.chip{height:40px;padding:0 16px 0 12px;border-radius:12px;border:0;box-shadow:inset 0 0 0 1px var(--md-outline-variant);background:transparent;color:var(--md-on-surface-variant);display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:var(--w-label);cursor:pointer;position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;flex:none;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-radius var(--d-fast) var(--e-fast),background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx),box-shadow var(--d-fx) var(--e-fx)}
.chip .ic{width:18px;height:18px}
.chip .material-symbols-outlined{font-size:18px}
.chip:active{border-radius:20px}
.chip[aria-pressed="true"],.chip.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:inset 0 0 0 0 transparent;border-radius:20px;animation:chipPop var(--d-fast) var(--e-fast)}
@keyframes chipPop{0%{scale:.9}100%{scale:1}}
.chip b{font-weight:400;opacity:.75}
.chip .d{width:8px;height:8px;border-radius:50%;background:var(--h,var(--md-primary));flex:none}

/* ── connected button group ── */
.cg{display:flex;gap:2px;width:100%}
.cg button,.cg a{flex:1 1 0;min-width:0;height:48px;border:0;padding:0 12px;background:var(--md-surface-container-highest);color:var(--md-on-surface);border-radius:8px;font:inherit;font-size:15px;font-weight:var(--w-label);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative;isolation:isolate;overflow:hidden;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-radius var(--d-fast) var(--e-fast),background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx),flex-grow var(--d-fast) var(--e-fast)}
.cg>:first-child{border-radius:24px 8px 8px 24px}
.cg>:last-child{border-radius:8px 24px 24px 8px}
.cg button[aria-pressed="true"]{border-radius:24px;background:var(--md-primary);color:var(--md-on-primary)}
.cg button:active{flex-grow:1.3}
.cg:has(button:active) button:not(:active){flex-grow:.88}

/* ── glow / glass / orbs ── */
@property --td-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.glow{position:relative;z-index:6;display:inline-flex;border-radius:32px;isolation:isolate}
.glow::before,.glow::after{content:"";position:absolute;inset:-3px;border-radius:32px;background:conic-gradient(from var(--td-a),var(--td-signal),var(--acc-lav) 22%,var(--acc-sun) 40%,transparent 50%,transparent 60%,var(--acc-berry) 78%,var(--td-signal));animation:td-spin 6s linear infinite;pointer-events:none;z-index:-1}
.glow::before{padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.glow::after{inset:-1px;background:none;animation:none;box-shadow:0 0 18px 4px rgba(3,191,166,.28),0 0 36px 10px rgba(196,181,253,.22);opacity:.8;transition:opacity var(--d-fx-slow) var(--e-fx)}
.glow:hover::after,.glow:focus-within::after{opacity:1}
@keyframes td-spin{to{--td-a:360deg}}
.glass{background:color-mix(in srgb,var(--md-surface) 72%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
.orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.45;pointer-events:none;animation:td-drift 12s ease-in-out infinite alternate}
@keyframes td-drift{to{translate:30px -24px;scale:1.12}}
:root[data-fx="off"] .glass{background:var(--md-surface-container-high);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-fx="off"] .glow::before,:root[data-fx="off"] .glow::after,:root[data-fx="off"] .orb{display:none}

/* ── filled text field ── */
.tf{position:relative;display:block;background:var(--md-surface-container-highest);border-radius:16px 16px 4px 4px;box-shadow:inset 0 -1px 0 var(--md-on-surface-variant);transition:box-shadow var(--d-fx) var(--e-fx),border-radius var(--d-fast) var(--e-fast)}
.tf:focus-within{box-shadow:inset 0 -2px 0 var(--md-primary);border-radius:16px}
.tf>span{position:absolute;left:16px;top:9px;font-size:12px;font-weight:var(--w-label);color:var(--md-on-surface-variant);pointer-events:none}
.tf:focus-within>span{color:var(--md-primary)}
.tf input{display:block;width:100%;height:60px;padding:24px 16px 6px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--md-on-surface);outline:none}
.tf input::placeholder{color:var(--md-on-surface-variant);opacity:.7}
.ctl-l{font-size:14px;font-weight:var(--w-label);color:var(--md-on-surface-variant);margin-bottom:10px}

/* ── floating pill navigation bar (Google-Store style), shared by home + dashboard; condenses on scroll ── */
.pbar{position:sticky;top:0;z-index:30;padding:10px var(--gutter) 6px;pointer-events:none}
.pill{pointer-events:auto;max-width:var(--wrap);margin:0 auto;height:64px;display:flex;align-items:center;gap:4px;padding:0 10px 0 20px;border-radius:32px;background:color-mix(in srgb,var(--md-surface-container-lowest) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--shadow-1),0 0 0 1px color-mix(in srgb,var(--md-outline-variant) 35%,transparent);transition:height var(--d-def) var(--e-def),box-shadow var(--d-fx) var(--e-fx)}
.pbar.scrolled .pill{height:56px;box-shadow:var(--shadow-2),0 0 0 1px color-mix(in srgb,var(--md-outline-variant) 35%,transparent)}
.logo{display:inline-flex;align-items:flex-start;text-decoration:none;color:var(--md-on-surface);font-size:24px;letter-spacing:-.02em;line-height:1;flex:none;padding:6px 6px 6px 0;border-radius:12px;font-variation-settings:"ROND" 40}
.logo .t{font-weight:300}
.logo .d{font-weight:600}
.logo svg{width:18px;height:18px;margin:-7px 0 0 1px}
.pnav{display:flex;gap:2px;margin-left:14px}
.pnav a{display:inline-flex;align-items:center;height:40px;padding:0 10px;border-radius:20px;text-decoration:none;font-size:15px;font-weight:var(--w-label);white-space:nowrap;color:var(--md-on-surface);transition:background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx),border-radius var(--d-fast) var(--e-fast)}
.pnav a:hover{background:var(--md-surface-container-high)}
.pnav a:active{border-radius:10px}
.pnav a.is-here{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.spacer{flex:1 1 0;min-width:8px}
.pill .ibtn{width:44px;height:44px;color:var(--md-on-surface)}
.pill .av{width:36px;height:36px;font-size:14px}
.badge{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--md-error);color:var(--md-on-error);font-size:11px;font-weight:600;line-height:17px;text-align:center;pointer-events:none;animation:td-pop var(--d-fast) var(--e-fast) both}
@keyframes td-pop{from{scale:.3}to{scale:1}}
.only-sm{display:none}
.av{position:relative;width:40px;height:40px;border-radius:20px;display:grid;place-items:center;background:var(--acc-lav-c);color:var(--on-acc-lav-c);font-weight:500;font-size:15px;overflow:hidden;flex:none;text-decoration:none;border:0;cursor:pointer;padding:0}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1279px){.pnav{display:none}.only-sm{display:inline-grid}}
/* phones: the logo keeps its size, so the bar drops Help + Search (both in the menu sheet) and, under 360px, the Activate icon too */
@media (max-width:599px){.pill #barSearch,.pill a.ibtn[aria-label="Help centre"]{display:none}}
@media (max-width:359px){.pill .act{display:none}}
@media (max-width:759px){.pill #themeBtn{display:none}}
@media (max-width:599px){.pill .textb,.pill .tb-wide{display:none}.act-lbl{display:none}.pill .act{padding:0 12px}.logo{font-size:22px}.pill{gap:0;padding:0 6px 0 16px;height:60px}.pbar{padding:8px 12px 4px}}
/* ── modal navigation sheet (home, phones/tablets): overlay, never pushes the page ── */
.mnav{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end}
.mnav-scrim{position:absolute;inset:0;background:rgba(0,0,0,.32);border:0;padding:0;cursor:default;animation:fadeIn var(--d-fx) var(--e-fx)}
.mnav-panel{position:relative;width:min(340px,88vw);height:100%;overflow:auto;background:var(--md-surface-container-low);border-radius:28px 0 0 28px;padding:12px 12px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-3);animation:slideL var(--d-def) var(--e-def)}
.mnav-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 8px 12px}
.mnav-t{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--md-on-surface-variant);padding:20px 20px 8px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideL{from{translate:40px 0;opacity:0}to{translate:0 0;opacity:1}}
.navi{flex:none;display:flex;align-items:center;gap:16px;height:56px;padding:0 20px;border-radius:28px;text-decoration:none;font-size:17px;font-weight:var(--w-label);color:var(--md-on-surface);position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;border:0;background:transparent;font-family:inherit;cursor:pointer;text-align:left;width:100%;transition:background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx),border-radius var(--d-fast) var(--e-fast)}
.navi .ic,.navi .material-symbols-outlined{color:var(--md-on-surface-variant);fill:var(--md-on-surface-variant);font-size:26px;width:26px;height:26px}
.mnav-panel>*{flex-shrink:0}
.mnav-panel{width:min(360px,90vw)}
.navi:active{border-radius:14px}
.navi.is-here{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.navi.is-here .material-symbols-outlined{color:var(--md-on-secondary-container);font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 24}

/* ── user menu (popover) ── */
.umenu-wrap{position:relative}
.umenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:260px;display:flex;flex-direction:column;gap:2px;background:var(--md-surface-container);border-radius:20px;padding:6px;box-shadow:var(--shadow-2);transform-origin:top right;opacity:0;scale:.9;translate:0 -8px;visibility:hidden;transition:opacity var(--d-fx) var(--e-fx),scale var(--d-def) var(--e-fast),translate var(--d-def) var(--e-fast),visibility 0s linear var(--d-def)}
.umenu[data-open="true"]{opacity:1;scale:1;translate:0 0;visibility:visible;transition-delay:0s}
.umenu-head{padding:12px 14px 10px}
.umenu-head b{display:block;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umenu-head span{display:block;font-size:13px;color:var(--md-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umenu a{display:flex;align-items:center;gap:14px;height:48px;padding:0 14px;border-radius:12px;text-decoration:none;color:var(--md-on-surface);font-weight:var(--w-label);font-size:15px;transition:background-color var(--d-fx) var(--e-fx),border-radius var(--d-fast) var(--e-fast)}
.umenu a:hover{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:24px}
.umenu .material-symbols-outlined,.umenu .ic{color:var(--md-on-surface-variant);fill:var(--md-on-surface-variant);font-size:22px}

/* ── FAB speed-dial ── */
.fabw{position:fixed;right:clamp(16px,2.5vw,32px);bottom:calc(clamp(16px,2.5vw,32px) + env(safe-area-inset-bottom,0px));z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fabm{display:flex;flex-direction:column;align-items:flex-end;gap:8px;visibility:hidden;transition:visibility 0s linear var(--d-def)}
.fabw[data-open="true"] .fabm{visibility:visible;transition-delay:0s}
.fabitem{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 18px;border-radius:28px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);text-decoration:none;font-weight:var(--w-label);font-size:16px;position:relative;isolation:isolate;overflow:hidden;box-shadow:var(--shadow-2);opacity:0;translate:0 18px;scale:.85;transform-origin:right center;border:0;cursor:pointer;font-family:inherit;transition:translate var(--d-fast) var(--e-fast),scale var(--d-fast) var(--e-fast),opacity var(--d-fx) var(--e-fx),border-radius var(--d-fast) var(--e-fast)}
.fabitem:active{border-radius:14px}
.fabitem .material-symbols-outlined{font-size:22px}
.fabw[data-open="true"] .fabitem{opacity:1;translate:0 0;scale:1}
.fabw[data-open="true"] .fabitem:nth-child(4){transition-delay:0ms}
.fabw[data-open="true"] .fabitem:nth-child(3){transition-delay:35ms}
.fabw[data-open="true"] .fabitem:nth-child(2){transition-delay:70ms}
.fabw[data-open="true"] .fabitem:nth-child(1){transition-delay:105ms}
.fab{width:60px;height:60px;border:0;padding:0;border-radius:18px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);display:grid;place-items:center;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;box-shadow:var(--shadow-3);-webkit-tap-highlight-color:transparent;transition:border-radius var(--d-fast) var(--e-fast),background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx)}
.fab .ic,.fab .material-symbols-outlined{grid-area:1/1;width:26px;height:26px;font-size:26px;transition:rotate var(--d-fast) var(--e-fast),opacity var(--d-fx) var(--e-fx),scale var(--d-fast) var(--e-fast)}
.fab .x{opacity:0;rotate:-90deg;scale:.6}
.fabw[data-open="true"] .fab{border-radius:30px;background:var(--md-tertiary);color:var(--md-on-tertiary)}
.fabw[data-open="true"] .fab .o{opacity:0;rotate:90deg;scale:.6}
.fabw[data-open="true"] .fab .x{opacity:1;rotate:0deg;scale:1}

/* ── snackbar ── */
.snack{position:fixed;left:50%;bottom:calc(clamp(16px,2.5vw,32px) + env(safe-area-inset-bottom,0px));translate:-50% 160%;opacity:0;z-index:45;display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 6px 6px 18px;border-radius:16px;background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);font-size:15px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);pointer-events:none;transition:translate var(--d-def) var(--e-fast),opacity var(--d-fx) var(--e-fx)}
.snack[data-show="true"]{translate:-50% 0;opacity:1;pointer-events:auto}
.snack a{color:var(--md-inverse-primary);font-weight:500;text-decoration:none;height:40px;display:inline-flex;align-items:center;padding:0 12px;border-radius:20px}
@media (max-width:640px){.snack{left:16px;translate:0 160%;max-width:calc(100vw - 112px)}.snack[data-show="true"]{translate:0 0}}

/* ── bento tiles: icon in flow (never over the title), tonal containers, lift + corner morph on hover ── */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{position:relative;overflow:hidden;border-radius:28px;padding:24px;min-height:240px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;color:inherit;isolation:isolate;transition:translate var(--d-def) var(--e-fast),border-radius var(--d-def) var(--e-fast),scale var(--d-fast) var(--e-fast)}
a.tile:hover,.tile.act:hover{translate:0 -4px;border-radius:40px}
a.tile:active{scale:.985;border-radius:20px}
.tile .tic{position:relative;width:72px;height:72px;display:grid;place-items:center;margin-bottom:auto;flex:none}
.tile .tic .shp{position:absolute;inset:0;width:100%;height:100%}
.tile .tic .ic,.tile .tic .material-symbols-outlined{position:relative;width:32px;height:32px;font-size:32px}
.tile .h3{margin-top:16px}
.tile p{margin:0;font-size:15px;line-height:1.5;max-width:460px;opacity:.9}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:var(--w-title);font-size:15px;margin-top:6px}
.tlink .ic{width:20px;height:20px;transition:translate var(--d-fast) var(--e-fast)}
a.tile:hover .tlink .ic{translate:6px 0}

/* ── tonal band (was Deep Sea) ── */
.band{background:var(--acc-lav-c);color:var(--on-acc-lav-c);border-radius:40px;padding:clamp(24px,4.5vw,56px);position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;isolation:isolate}
.band .bshape{position:absolute;right:-140px;bottom:-180px;width:480px;height:480px;z-index:-1;opacity:.6}
.band .bshape path{fill:#FFFFFF}
.band-copy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:12px}
.band-copy .over{color:var(--acc-lav)}
.band-copy .lead{color:var(--on-acc-lav-c);opacity:.85}
.band .h2,.band .h3{color:var(--on-acc-lav-c)}
:root[data-theme="dark"] .band .bshape{opacity:.12}

/* ── motion: scroll-driven reveal (sections) + staggered entrance (hero) + shape morphs ── */
.reveal{animation:v5reveal linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
@keyframes v5reveal{from{opacity:.15;translate:0 28px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
.enter>*{animation:v5enter var(--d-def) var(--e-def) both}
.enter>*:nth-child(2){animation-delay:60ms}.enter>*:nth-child(3){animation-delay:120ms}.enter>*:nth-child(4){animation-delay:180ms}.enter>*:nth-child(5){animation-delay:240ms}
@keyframes v5enter{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.enter>*{animation:none!important;opacity:1!important;translate:0 0!important}
}
/* ── rev 5 (30 Oct): real logo, Ask Tiny AI chip + floating badge, dashboard sub-navigation, page title row, menu extras ── */
.lg{display:block;height:30px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.lg-d{display:none}
:root[data-theme="dark"] .lg-l{display:none}:root[data-theme="dark"] .lg-d{display:block}
.pill .logo{padding:4px 8px 4px 0;flex:0 0 auto}.pill .lg{max-width:none}.pill>*{flex-shrink:0}.pill .pnav{flex:0 1 auto;min-width:0;overflow:hidden}
.aichip{gap:6px}
.aichip .ic{width:18px;height:18px}
.mnav-head{padding:8px 8px 8px 14px}
.mnav-user{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:4px 0 8px;border-radius:20px;background:var(--md-surface-container);text-decoration:none;color:inherit;flex:none}
.mnav-user .av{width:44px;height:44px;font-size:17px}
.mnav-user>span{min-width:0}
.mnav-user b{display:block;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnav-user small{display:block;font-size:13px;color:var(--md-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.askw{position:fixed;right:clamp(16px,2.5vw,28px);bottom:calc(clamp(16px,2.5vw,28px) + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:28px;background:var(--md-surface-container-lowest);color:var(--md-on-surface);text-decoration:none;font-size:15px;font-weight:500;box-shadow:var(--shadow-3),0 0 0 1px color-mix(in srgb,var(--md-outline-variant) 60%,transparent);transition:border-radius var(--d-fast) var(--e-fast),translate var(--d-fast) var(--e-fast)}
.askw:hover{translate:0 -3px;border-radius:16px}
.askw-spark{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--td-deep),var(--td-signal));color:#fff;display:grid;place-items:center;flex:none}
.askw-spark .ic{width:22px;height:22px}
.askw.dash{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
@media (min-width:1100px){.askw.dash{bottom:clamp(16px,2.5vw,28px)}}
@media (max-width:599px){.askw{padding:0;width:56px;height:56px;justify-content:center;border-radius:28px}.askw-label{display:none}.askw-spark{width:44px;height:44px}}
.subnav-w{padding:4px var(--gutter) 0}
.subnav{max-width:var(--wrap);margin:0 auto;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 0;align-items:center}
.subnav::-webkit-scrollbar{display:none}
.subnav .chip{height:38px;padding:0 16px}
.subnav .umenu-wrap{flex:none}
.subnav .umenu{right:auto;left:0;transform-origin:top left}
@media (max-width:599px){.subnav-w{display:none}}
.v5-ph{padding:14px var(--gutter) 0}
.v5-ph .v5-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:8px}
.v5-pt{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:400;letter-spacing:-.01em;font-variation-settings:"ROND" 100}
.umenu-wide{min-width:min(560px,calc(100vw - 32px));display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;padding:10px}
.umenu-t{grid-column:1/-1;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--md-on-surface-variant);padding:12px 14px 4px}
.umenu-wide a{height:44px}
/* ── 30 Oct: narrow desktops (1100–1300px) — the pill keeps every destination by tightening the links and dropping the Activate label ── */
@media (max-width:1380px){.pnav a{padding:0 8px}.pnav{margin-left:8px}.pill .act .act-lbl{display:none}.pill .act{padding:0 12px}.pill #themeBtn{display:none}}
/* ── 30 Oct: phones — no element may push the page sideways; text inputs never under 16px (iOS zooms on focus below that) ── */
@media (max-width:360px){body:has(.navbar) .pill #barSearch{display:none}}
@media (max-width:599px){:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select,textarea){font-size:16px}}
@media (max-width:599px){.pill .umenu-wrap{display:none}}   /* 30 Oct: one menu on phones — the overlay sheet carries the account */

/* ── v5 footer (30 Oct 2026, app/views/v5/_footer.php) — one footer everywhere ── */
.v5foot{background:var(--md-surface-container-high);color:var(--md-on-surface);border-radius:40px 40px 0 0;margin:56px var(--gutter) 0;padding:52px 40px 28px}
.v5foot-in{max-width:var(--wrap);margin:0 auto}
.v5foot-top{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px 28px}
.v5foot-brand p{margin:14px 0 0;max-width:320px;font-size:14.5px;line-height:1.5;color:var(--md-on-surface-variant)}
.v5foot-brand .logo{padding:0}
.v5foot-cta{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.v5foot-social{display:flex;gap:8px}
.v5foot-social a{width:40px;height:40px;border-radius:20px;background:var(--md-surface-container-lowest);color:var(--md-on-surface);display:grid;place-items:center;transition:background-color var(--d-fx) var(--e-fx),color var(--d-fx) var(--e-fx),border-radius var(--d-fast) var(--e-fast)}
.v5foot-social a:hover{background:var(--md-primary);color:var(--md-on-primary);border-radius:14px}
.v5foot-col h4{margin:4px 0 12px;font-size:14px;font-weight:var(--w-title);color:var(--md-on-surface)}
.v5foot-col a{display:block;padding:5px 0;font-size:14.5px;line-height:1.35;color:var(--md-on-surface-variant);text-decoration:none;transition:color var(--d-fx) var(--e-fx)}
.v5foot-col a:hover{color:var(--md-primary)}
.v5foot-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;margin-top:36px;padding-top:18px;border-top:1px solid var(--md-outline-variant);font-size:13px;color:var(--md-on-surface-variant)}
.v5foot-pay{display:inline-flex;align-items:center;gap:6px}
.v5foot-pay .ic{width:18px;height:18px;color:var(--md-tertiary)}
@media (max-width:1023px){.v5foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}.v5foot-brand{grid-column:1 / -1}.v5foot{padding:44px 28px 24px}}
@media (max-width:640px){.v5foot{margin:40px 0 0;border-radius:28px 28px 0 0;padding:36px 20px 20px}.v5foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.v5foot-col a{padding:6px 0}}
@media (max-width:1099px){body:has(.navbar) .v5foot{padding-bottom:100px}}