/* ==================================================================
ARIA HOME SHIELD DESIGN SYSTEM (hs-ds.css) -- the Aria Shop look, shared.
Sister brand of Aria Shop (#443, Danny 2026-11-08): same navy bands with the blue
glow, same blue mosaic, same gold pills with navy text, same white cards, Manrope
for everything and the Rajdhani wordmark. Premium bar: 4/8 spacing, one type
scale, one SVG icon set (hs-icons.svg), 150-250ms motion, 44px targets,
safe-area insets, skeletons instead of blank waits, AA contrast in both themes.
Load on every Home Shield page, after its own stylesheet:
(theme before first paint)
Colour comes from tokens. Homeowner pages define them in hs.css (:root, .hs-navy,
.hs-mosaic, [data-theme=dark]); the desks get them from html.hs-desk below. These
components use only the role names (--surface*, --text*, --gold*, --line*, --link,
--navy*, --on-navy*), never the desks' --ink, so they render the same on both sides.
Shop values reused 1:1 (index.html): navy #0A1F44 / #0D2A5C band gradient, gold
#F4C463 pills (48px, navy text, 800), kicker 11.5px/800/.18em, wordmark Rajdhani
.12em clamp(16px,4.4vw,22px) with the second word in #B8860B, Entrar pill 36px navy,
search pill 40px #F3F5F9 / #D9E0EB, white cards radius 24 shadow 0 10px 30px
rgba(10,31,68,.06), outline pills on navy #3E5FB8 / #DCE6FF.
================================================================== */
:root{
/* spacing (4/8) */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
/* type scale (Manrope) */
--fs-xs:12px;--fs-sm:13.5px;--fs-md:15px;--fs-base:16px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px;--fs-3xl:36px;--fs-4xl:48px;
/* radii and elevation */
--rad-xs:8px;--rad-sm:12px;--rad-md:16px;--rad-lg:20px;--rad-xl:24px;--rad-pill:999px;
--sh-1:0 1px 2px rgba(10,31,68,.06),0 2px 8px rgba(10,31,68,.05);
--sh-2:0 10px 30px rgba(10,31,68,.08);
--sh-3:0 22px 50px -18px rgba(10,31,68,.32);
/* motion */
--t-fast:150ms;--t:200ms;--t-slow:250ms;--ease:cubic-bezier(.2,.7,.2,1);
--tap:44px;
--wm-ink:#0A1F44;--wm-gold:#B8860B;
}
[data-theme="dark"]{--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 12px 32px rgba(0,0,0,.38);--sh-3:0 24px 56px -18px rgba(0,0,0,.7);--wm-ink:#F4F6FB;--wm-gold:#F4C463}
/* ---- desk tokens (pro desk, partner desks, admin): ----
The desks' own names (--bg, --card, --ink = text ...) plus the role names above. */
html.hs-desk{
--bg:#CEDAE8;--bg-2:#F3F5F9;--card:#FFFFFF;--card-2:#EAF0FF;--line:#D9E0EB;--line-2:#7D8BA6;
--ink:#0A1F44;--ink-2:#2C3D5F;--ink-3:#33415F;
--gold:#C9A227;--gold-2:#5A420B;--gold-hi:#F4C463;--gold-lo:#E8B64A;--gold-ink:#0A1F44;--gold-soft:rgba(201,162,39,.14);
--ok:#0A7A42;--ok-soft:rgba(10,122,66,.1);--warn:#8A5300;--warn-soft:rgba(196,122,18,.12);
--bad:#B3261E;--bad-soft:rgba(179,38,30,.08);
--st-wind:#8A5300;--st-hail:#1E3FAE;--st-tornado:#B3261E;
--storm-wind:var(--st-wind);--storm-hail:var(--st-hail);--storm-tornado:var(--st-tornado);
--surface:#FFFFFF;--surface-2:#F3F5F9;--surface-3:#EAF0FF;--text:#0A1F44;--text-2:#2C3D5F;--text-3:#33415F;
--line-strong:#7D8BA6;--field-line:#7D8BA6;--link:#1E3FAE;--btn-gold:#F4C463;--btn-gold-hover:#F7D07C;--shadow:rgba(10,31,68,.14);
--navy:#0A1F44;--navy-2:#0D2A5C;--on-navy:#ffffff;--on-navy-2:#DCE6FF;--on-navy-3:#B9C6E8;--gold-on-navy:#F4C463;--navy-pill-line:#3E5FB8;
--top-bg:rgba(255,255,255,.92);--mosaic-grout:#CEDAE8;--mosaic-veil:rgba(255,255,255,0);
--band-navy:radial-gradient(70% 55% at 85% 0%,rgba(47,95,238,.34),rgba(47,95,238,0) 70%),linear-gradient(160deg,#0A1F44 0%,#0D2A5C 55%,#0A1F44 100%);
--radius:20px;--serif:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
color-scheme:light}
html.hs-desk[data-theme="dark"]{
--bg:#070F22;--bg-2:#0B1731;--card:#0F1E3D;--card-2:#152A52;--line:#22375F;--line-2:#7D8BA6;
--ink:#F4F6FB;--ink-2:#C9D3EA;--ink-3:#B9C6E8;
--gold:#E8B64A;--gold-2:#F4C463;--gold-hi:#F4C463;--gold-lo:#E8B64A;--gold-ink:#0A1F44;--gold-soft:rgba(244,196,99,.14);
--ok:#6EE7A8;--ok-soft:rgba(110,231,168,.12);--warn:#F2B45C;--warn-soft:rgba(242,180,92,.14);
--bad:#FF9C94;--bad-soft:rgba(255,156,148,.1);
--st-wind:#F2B45C;--st-hail:#9CC2FF;--st-tornado:#FF9C94;
--surface:#0F1E3D;--surface-2:#0B1731;--surface-3:#152A52;--text:#F4F6FB;--text-2:#C9D3EA;--text-3:#B9C6E8;
--line-strong:#7D8BA6;--field-line:#7D8BA6;--link:#9CC2FF;--shadow:rgba(0,0,0,.45);
--top-bg:rgba(7,15,34,.9);--mosaic-veil:rgba(7,15,34,.9);
--band-navy:radial-gradient(70% 55% at 85% 0%,rgba(47,95,238,.26),rgba(47,95,238,0) 70%),linear-gradient(160deg,#081631 0%,#0B1E44 55%,#081631 100%);
color-scheme:dark}
html.hs-desk body{background-color:var(--mosaic-grout);background-image:linear-gradient(var(--mosaic-veil),var(--mosaic-veil)),var(--aria-mosaic);background-size:auto,130px 130px,170px 170px,100px 100px;background-attachment:scroll}
/* The desks' top bar is the navy band (the shop's navy bars), wordmark in white and gold. */
html.hs-desk body>header{background:var(--band-navy);border-bottom:1px solid rgba(244,196,99,.3);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
--ink:#ffffff;--ink-2:#DCE6FF;--ink-3:#B9C6E8;--line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.42);--gold-2:#F4C463;
--text:#ffffff;--text-2:#DCE6FF;--text-3:#B9C6E8;--surface-3:rgba(255,255,255,.1);--wm-ink:#ffffff;--wm-gold:#F4C463}
html.hs-desk body>header .hs-wordmark{font-size:16px;letter-spacing:.1em;gap:.3em}
html.hs-desk body>header .hs-wm-tag{background:#F4C463;color:#0A1F44}
html.hs-desk body>header .hs-icon-btn{width:40px;height:40px}
@media (max-width:400px){html.hs-desk body>header .hs-wordmark{font-size:14.5px;letter-spacing:.08em}html.hs-desk body>header .hs-wm-tag{font-size:9.5px;padding:3px 5px}}
/* The everyday pro desk (pro/intros, hs.css tokens): the same navy top bar. */
body.hsm-desk>header.top{position:sticky;top:0;z-index:30;background:var(--band-navy);border-bottom:1px solid rgba(244,196,99,.3)}
body.hsm-desk>header.top .wrap{display:flex;align-items:center;gap:10px;min-height:60px}
body.hsm-desk>header.top .sp{flex:1}
body.hsm-desk>header.top .hs-wordmark{font-size:16px;letter-spacing:.1em;gap:.3em}
body.hsm-desk>header.top .hs-wm-tag{background:#F4C463;color:#0A1F44}
body.hsm-desk>header.top .pill{display:inline-flex;border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:2px}
body.hsm-desk>header.top .pill button{border:0;background:none;padding:5px 10px;border-radius:999px;font:700 13px/1 var(--sans);color:#DCE6FF;cursor:pointer;min-height:32px}
body.hsm-desk>header.top .pill button[aria-pressed="true"]{background:#F4C463;color:#0A1F44}
@media (max-width:400px){body.hsm-desk>header.top .wrap{gap:6px}body.hsm-desk>header.top .hs-wordmark{font-size:14.5px;letter-spacing:.08em}body.hsm-desk>header.top .hs-wm-tag{font-size:9.5px;padding:3px 5px}body.hsm-desk>header.top .hs-icon-btn{width:40px;height:40px}}
/* ---- base ---- */
html{font-family:var(--sans)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
::selection{background:#2F5FEE;color:#fff}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
.hs-navy :focus-visible{outline-color:var(--gold-on-navy)}
.hs-ic{width:22px;height:22px;flex:0 0 auto;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor}
.hs-ic-sm{width:18px;height:18px}.hs-ic-lg{width:28px;height:28px}
/* ---- wordmark: ARIA in navy, HOME SHIELD in gold (the shop's ARIA SHOP) ---- */
.hs-wordmark{display:inline-flex;align-items:center;gap:.36em;text-decoration:none;font:700 clamp(16px,4.4vw,22px)/1 var(--display,"Rajdhani"),"Rajdhani",sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--wm-ink);border-radius:8px;min-height:var(--tap)}
.hs-wordmark .hs-wm-a{color:var(--wm-ink)}
.hs-wordmark em,.hs-wordmark .hs-wm-b{font-style:normal;color:var(--wm-gold)}
.hs-wordmark .hs-wm-tag{align-self:center;margin-left:.2em;font:800 10.5px/1 var(--sans);letter-spacing:.14em;padding:4px 7px;border-radius:6px;background:var(--navy);color:var(--gold-on-navy)}
[data-theme="dark"] .hs-wordmark .hs-wm-tag{background:var(--gold-on-navy);color:var(--navy)}
.hs-navy .hs-wordmark{--wm-ink:#fff;--wm-gold:#F4C463}
/* ---- the navy utility bar above the top bar (the shop's "Como funciona . Por que Aria") ---- */
.hs-utility{background:linear-gradient(160deg,#0A1F44 0%,#0D2A5C 55%,#0A1F44 100%);border-bottom:1px solid rgba(255,255,255,.1);color:#DCE6FF;font:600 12.5px/1 var(--sans)}
[data-theme="dark"] .hs-utility{background:#060E20}
.hs-utility-in{max-width:1240px;margin:0 auto;padding:0 var(--gut,16px);height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;overflow:hidden}
.hs-utility nav{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.hs-utility a{color:#DCE6FF;text-decoration:none;padding:6px 2px;border-radius:4px}
.hs-utility a:hover{color:#fff}
.hs-utility .hs-dot{color:rgba(220,230,255,.38)}
.hs-utility .hs-utility-gold{display:inline-flex;align-items:center;gap:6px;color:#F4C463;font-weight:800;flex:0 0 auto}
.hs-utility .hs-utility-gold .hs-ic{width:14px;height:14px}
/* ---- top bar (white, sticky, blur; no jitter: fixed height) ---- */
.hs-topbar{position:sticky;top:0;z-index:30;background:var(--top-bg);-webkit-backdrop-filter:saturate(1.2) blur(12px);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
.hs-topbar-in{max-width:1240px;margin:0 auto;height:64px;padding:0 var(--gut,16px);display:flex;align-items:center;gap:10px}
.hs-topbar .hs-sp{flex:1 1 auto}
.hs-searchpill{flex:1 1 auto;min-width:40px;max-width:420px;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid #D9E0EB;border-radius:999px;background:#F3F5F9;color:#5B6475;font:600 14px/1 var(--sans);text-decoration:none}
[data-theme="dark"] .hs-searchpill{background:var(--surface-3);border-color:var(--line);color:var(--text-3)}
/* ---- buttons ---- */
.hs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:800 15px/1.2 var(--sans);letter-spacing:-.01em;text-decoration:none;text-align:center;cursor:pointer;transition:transform var(--t-fast) var(--ease),background-color var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),filter var(--t) var(--ease)}
.hs-btn:active{transform:scale(.97)}
.hs-btn .hs-ic{width:20px;height:20px}
.hs-btn-gold{background:var(--btn-gold);color:var(--gold-ink);box-shadow:0 10px 26px -14px rgba(201,162,39,.75)}
.hs-btn-gold:hover{background:var(--btn-gold-hover)}
.hs-btn-navy{background:var(--navy);color:#fff}
.hs-btn-navy:hover{filter:brightness(1.12)}
[data-theme="dark"] .hs-btn-navy{background:#1C3566;border-color:rgba(255,255,255,.14)}
.hs-btn-ghost,.hs-btn-line{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.hs-btn-ghost:hover,.hs-btn-line:hover{border-color:var(--gold);background:var(--surface-3)}
/* Outline pills on navy (the shop's "Prueba con" chips, grown to a 48px button). */
.hs-navy .hs-btn-ghost,.hs-navy .hs-btn-line,.hs-btn-onnavy{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hs-navy .hs-btn-ghost:hover,.hs-navy .hs-btn-line:hover,.hs-btn-onnavy:hover{background:rgba(255,255,255,.12);border-color:#F4C463}
.hs-btn-text{background:none;border-color:transparent;color:var(--link);padding:0 8px;min-height:var(--tap);font-weight:700}
.hs-btn-sm{min-height:36px;padding:0 16px;font-size:13px}
.hs-btn-block{display:flex;width:100%}
.hs-btn[disabled],.hs-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
/* The shop's header pill (Entrar): 36px navy, white 13px/800. */
.hs-pill-navy{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:var(--navy);color:#fff;font:700 13px/1 var(--sans);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:filter var(--t) var(--ease)}
.hs-pill-navy:hover{filter:brightness(1.12)}
[data-theme="dark"] .hs-pill-navy{background:#F4C463;color:#0A1F44}
/* Icon button: always a 44px target. */
.hs-icon-btn{flex:0 0 auto;width:44px;height:44px;display:inline-grid;place-items:center;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.hs-icon-btn:hover{background:var(--surface-3)}
.hs-icon-btn:active{transform:scale(.94)}
.hs-icon-btn svg{width:22px;height:22px}
.hs-icon-btn-line{border-color:var(--line)}
.hs-navy .hs-icon-btn{color:#fff}
.hs-navy .hs-icon-btn:hover{background:rgba(255,255,255,.1)}
/* Theme toggle: a moon in Light, a sun in Dark. */
.hs-theme-btn .hs-i-sun{display:none}
[data-theme="dark"] .hs-theme-btn .hs-i-sun{display:inline-block}
[data-theme="dark"] .hs-theme-btn .hs-i-moon{display:none}
/* ---- section types ---- */
.hs-band{position:relative}
.hs-navy.hs-band,.hs-bg-navy{background:var(--band-navy);color:var(--text)}
.hs-navy.hs-band::before,.hs-bg-navy::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(244,196,99,.65),transparent);pointer-events:none}
.hs-mosaic.hs-band,.hs-bg-mosaic{background-color:var(--mosaic-grout);background-image:linear-gradient(var(--mosaic-veil),var(--mosaic-veil)),var(--aria-mosaic);background-size:auto,130px 130px,170px 170px,100px 100px}
.hs-white.hs-band,.hs-bg-white{background:var(--surface)}
.hs-kicker{margin:0 0 12px;font:800 11.5px/1.25 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2)}
/* ---- cards ---- */
.hs-box{background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:var(--rad-xl);box-shadow:var(--sh-2);padding:var(--sp-6)}
.hs-box-navy{background:rgba(255,255,255,.05);border:1px solid rgba(244,196,99,.22);border-radius:var(--rad-xl);padding:var(--sp-6);color:#fff}
.hs-box-navy h3,.hs-box-navy .hs-h3{color:#F4C463}
.hs-box-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;margin-bottom:var(--sp-4);background:rgba(244,196,99,.2);border:1px solid rgba(184,134,11,.38);color:var(--gold-2)}
.hs-navy .hs-box-icon,.hs-box-navy .hs-box-icon{background:rgba(244,196,99,.14);border-color:rgba(244,196,99,.35);color:#F4C463}
.hs-lift{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
@media (hover:hover){.hs-lift:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}}
/* ---- avatars (initials fallback, ring, verified badge) ---- */
.hs-avatar{--av:44px;position:relative;display:inline-grid;place-items:center;width:var(--av);height:var(--av);flex:0 0 auto;border-radius:50%;isolation:isolate}
.hs-avatar-sm{--av:32px}.hs-avatar-lg{--av:64px}.hs-avatar-xl{--av:96px}
.hs-avatar-in{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font:800 calc(var(--av) * .38)/1 var(--sans);letter-spacing:.02em;color:#fff;background:linear-gradient(150deg,#16346E,#0A1F44)}
.hs-avatar-in[data-tone="1"]{background:linear-gradient(150deg,#2F5FEE,#1E46C4)}
.hs-avatar-in[data-tone="2"]{background:linear-gradient(150deg,#3E5FB8,#0D2A5C)}
.hs-avatar-in[data-tone="3"]{background:linear-gradient(150deg,#F4C463,#E8B64A);color:#0A1F44}
.hs-avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;z-index:1}
.hs-avatar-ring{box-shadow:0 0 0 2px var(--surface),0 0 0 4px #F4C463}
.hs-avatar-badge{position:absolute;right:-2px;bottom:-2px;z-index:2;width:calc(var(--av) * .36);height:calc(var(--av) * .36);min-width:16px;min-height:16px;border-radius:50%;display:grid;place-items:center;background:#2F5FEE;color:#fff;box-shadow:0 0 0 2px var(--surface)}
.hs-avatar-badge .hs-ic{width:70%;height:70%;stroke-width:3}
.hs-verified{display:inline-flex;align-items:center;gap:4px;color:var(--link);font:700 13px/1 var(--sans)}
.hs-verified .hs-ic{width:16px;height:16px;color:#2F5FEE}
.hs-navy .hs-verified{color:#9CC2FF}.hs-navy .hs-verified .hs-ic{color:#9CC2FF}
/* ---- chips and status pills ---- */
.hs-pchip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:700 13.5px/1.15 var(--sans);white-space:nowrap;cursor:pointer;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.hs-pchip[aria-pressed="true"],.hs-pchip[aria-checked="true"],.hs-pchip[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
[data-theme="dark"] .hs-pchip[aria-pressed="true"],[data-theme="dark"] .hs-pchip[aria-checked="true"],[data-theme="dark"] .hs-pchip[aria-selected="true"]{background:#F4C463;border-color:#F4C463;color:#0A1F44}
.hs-navy .hs-pchip{background:transparent;border-color:var(--navy-pill-line);color:#DCE6FF}
.hs-navy .hs-pchip[aria-pressed="true"],.hs-navy .hs-pchip[aria-checked="true"],.hs-navy .hs-pchip[aria-selected="true"]{background:#F4C463;border-color:#F4C463;color:#0A1F44}
.hs-status{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font:800 12px/1 var(--sans);letter-spacing:.03em;white-space:nowrap;background:var(--surface-3);color:var(--text-2)}
.hs-status-gold{background:#F4C463;color:#0A1F44}
.hs-status-navy{background:var(--navy);color:#fff}
.hs-status-ok{background:rgba(10,122,66,.1);color:var(--ok)}
.hs-status .hs-ic{width:14px;height:14px}
/* ---- tabs: underline with a smooth indicator ---- */
.hs-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
.hs-tabs::-webkit-scrollbar{display:none}
.hs-tab{position:relative;flex:0 0 auto;min-height:var(--tap);padding:0 14px;border:0;background:none;color:var(--text-3);font:700 14px/1 var(--sans);cursor:pointer;transition:color var(--t) var(--ease)}
.hs-tab::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--gold);transform:scaleX(0);transition:transform var(--t-slow) var(--ease)}
.hs-tab[aria-selected="true"],.hs-tab[aria-current="page"]{color:var(--text)}
.hs-tab[aria-selected="true"]::after,.hs-tab[aria-current="page"]::after{transform:scaleX(1)}
/* ---- bottom tab bar (mobile app shell; iPhone safe area) ---- */
.hs-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(var(--tabs,5),1fr);padding:4px max(6px,env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));background:var(--top-bg);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);border-top:1px solid var(--line)}
.hs-tabbar a,.hs-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border:0;background:none;border-radius:12px;color:var(--text-3);font:700 11px/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.hs-tabbar a:active,.hs-tabbar button:active{transform:scale(.94)}
.hs-tabbar .hs-ic{width:24px;height:24px}
.hs-tabbar [aria-current="page"]{color:var(--text)}
.hs-tabbar [aria-current="page"] .hs-ic{color:var(--gold-3,#B8860B);stroke-width:2.1}
@media (min-width:980px){.hs-tabbar{display:none}}
/* ---- skeleton loader ---- */
.hs-skel{position:relative;overflow:hidden;background:var(--surface-3);border-radius:var(--rad-sm);color:transparent!important;min-height:1em}
.hs-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:hsShimmer 1.3s ease-in-out infinite}
[data-theme="dark"] .hs-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.hs-skel-line{height:12px;margin:8px 0}.hs-skel-title{height:20px;width:60%}.hs-skel-circle{border-radius:50%}
.hs-skel-card{height:180px;border-radius:var(--rad-xl)}
@keyframes hsShimmer{to{transform:translateX(100%)}}
/* ---- toast ---- */
.hs-toasts{position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px;pointer-events:none}
.hs-toast{pointer-events:auto;max-width:420px;padding:12px 18px;border-radius:14px;background:var(--navy);color:#fff;font:600 14px/1.4 var(--sans);box-shadow:var(--sh-3);animation:hsToastIn var(--t-slow) var(--ease)}
[data-theme="dark"] .hs-toast{background:#F4F6FB;color:#0A1F44}
.hs-toast.is-out{opacity:0;transform:translateY(8px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
@keyframes hsToastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---- empty state ---- */
.hs-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:var(--sp-10) var(--sp-5)}
.hs-empty-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;background:var(--surface-3);color:var(--gold-2);box-shadow:0 0 0 8px rgba(244,196,99,.12)}
.hs-empty-ic .hs-ic{width:32px;height:32px}
.hs-empty h3{margin:0;font:800 18px/1.3 var(--sans);color:var(--text)}
.hs-empty p{margin:0;max-width:30em;color:var(--text-3);font-size:15px}
/* ---- form fields ---- */
.hs-input{width:100%;min-height:48px;padding:0 16px;border-radius:var(--rad-sm);border:1px solid var(--field-line);background:var(--surface);color:var(--text);font:500 16px/1.3 var(--sans);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.hs-input:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 3px rgba(47,95,238,.2)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.hs-skel::after{display:none}
}
/* The Aria Shop blue mosaic (same bytes as the shop), for every mosaic band and page field. */
/* aria-mosaic:start -- written by scripts/build-mosaic.mjs; do not edit by hand */
:root{--aria-mosaic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cdefs%3E%3Crect id='t' width='9' height='9' rx='1.35'/%3E%3C/defs%3E%3Cg fill='%23D8C08A'%3E%3Cuse href='%23t' x='120' y='10'/%3E%3Cuse href='%23t' x='50' y='30'/%3E%3Cuse href='%23t' x='100' y='50'/%3E%3Cuse href='%23t' x='0' y='60'/%3E%3Cuse href='%23t' x='70' y='70'/%3E%3Cuse href='%23t' x='40' y='90'/%3E%3Cuse href='%23t' x='110' y='110'/%3E%3Cuse href='%23t' x='80' y='120'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cdefs%3E%3Crect id='t' width='9' height='9' rx='1.35'/%3E%3C/defs%3E%3Cg fill='%23D2E0F0'%3E%3Cuse href='%23t' x='50' y='0'/%3E%3Cuse href='%23t' x='60' y='0'/%3E%3Cuse href='%23t' x='30' y='40'/%3E%3Cuse href='%23t' x='60' y='90'/%3E%3Cuse href='%23t' x='150' y='90'/%3E%3Cuse href='%23t' x='100' y='100'/%3E%3Cuse href='%23t' x='150' y='110'/%3E%3Cuse href='%23t' x='60' y='120'/%3E%3C/g%3E%3Cg fill='%23A8BEDC'%3E%3Cuse href='%23t' x='70' y='0'/%3E%3Cuse href='%23t' x='90' y='0'/%3E%3Cuse href='%23t' x='20' y='10'/%3E%3Cuse href='%23t' x='60' y='60'/%3E%3Cuse href='%23t' x='90' y='120'/%3E%3C/g%3E%3Cg fill='%23C4D4E6'%3E%3Cuse href='%23t' x='100' y='0'/%3E%3Cuse href='%23t' x='120' y='0'/%3E%3Cuse href='%23t' x='120' y='150'/%3E%3C/g%3E%3Cg fill='%23B2C6E0'%3E%3Cuse href='%23t' x='60' y='10'/%3E%3Cuse href='%23t' x='110' y='60'/%3E%3Cuse href='%23t' x='130' y='70'/%3E%3Cuse href='%23t' x='150' y='80'/%3E%3Cuse href='%23t' x='120' y='140'/%3E%3C/g%3E%3Cg fill='%23E9F0F8'%3E%3Cuse href='%23t' x='150' y='40'/%3E%3Cuse href='%23t' x='150' y='50'/%3E%3Cuse href='%23t' x='160' y='50'/%3E%3Cuse href='%23t' x='120' y='60'/%3E%3Cuse href='%23t' x='30' y='70'/%3E%3Cuse href='%23t' x='70' y='100'/%3E%3Cuse href='%23t' x='50' y='140'/%3E%3C/g%3E%3Cg fill='%23BCCEE8'%3E%3Cuse href='%23t' x='70' y='50'/%3E%3Cuse href='%23t' x='150' y='150'/%3E%3Cuse href='%23t' x='130' y='160'/%3E%3C/g%3E%3Cg fill='%23C8D6EA'%3E%3Cuse href='%23t' x='140' y='120'/%3E%3Cuse href='%23t' x='20' y='160'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cdefs%3E%3Crect id='t' width='9' height='9' rx='1.35'/%3E%3C/defs%3E%3Crect width='100' height='100' fill='%23CEDAE8'/%3E%3Cg fill='%23DEE9F6'%3E%3Cuse href='%23t' x='0' y='0'/%3E%3Cuse href='%23t' x='60' y='0'/%3E%3Cuse href='%23t' x='80' y='10'/%3E%3Cuse href='%23t' x='30' y='20'/%3E%3Cuse href='%23t' x='60' y='20'/%3E%3Cuse href='%23t' x='0' y='30'/%3E%3Cuse href='%23t' x='80' y='30'/%3E%3Cuse href='%23t' x='60' y='40'/%3E%3Cuse href='%23t' x='30' y='50'/%3E%3Cuse href='%23t' x='80' y='50'/%3E%3Cuse href='%23t' x='40' y='60'/%3E%3Cuse href='%23t' x='60' y='60'/%3E%3Cuse href='%23t' x='90' y='70'/%3E%3Cuse href='%23t' x='30' y='80'/%3E%3Cuse href='%23t' x='70' y='80'/%3E%3Cuse href='%23t' x='0' y='90'/%3E%3Cuse href='%23t' x='80' y='90'/%3E%3C/g%3E%3Cg fill='%23D2E0F0'%3E%3Cuse href='%23t' x='10' y='0'/%3E%3Cuse href='%23t' x='30' y='10'/%3E%3Cuse href='%23t' x='40' y='20'/%3E%3Cuse href='%23t' x='20' y='30'/%3E%3Cuse href='%23t' x='70' y='30'/%3E%3Cuse href='%23t' x='10' y='40'/%3E%3Cuse href='%23t' x='30' y='40'/%3E%3Cuse href='%23t' x='20' y='50'/%3E%3Cuse href='%23t' x='30' y='60'/%3E%3Cuse href='%23t' x='70' y='60'/%3E%3Cuse href='%23t' x='40' y='80'/%3E%3C/g%3E%3Cg fill='%23C4D4E6'%3E%3Cuse href='%23t' x='20' y='0'/%3E%3Cuse href='%23t' x='80' y='0'/%3E%3Cuse href='%23t' x='0' y='10'/%3E%3Cuse href='%23t' x='60' y='10'/%3E%3Cuse href='%23t' x='10' y='20'/%3E%3Cuse href='%23t' x='70' y='20'/%3E%3Cuse href='%23t' x='60' y='30'/%3E%3Cuse href='%23t' x='0' y='40'/%3E%3Cuse href='%23t' x='70' y='50'/%3E%3Cuse href='%23t' x='90' y='50'/%3E%3Cuse href='%23t' x='20' y='60'/%3E%3Cuse href='%23t' x='80' y='60'/%3E%3Cuse href='%23t' x='10' y='70'/%3E%3Cuse href='%23t' x='30' y='70'/%3E%3Cuse href='%23t' x='50' y='70'/%3E%3Cuse href='%23t' x='30' y='90'/%3E%3Cuse href='%23t' x='50' y='90'/%3E%3Cuse href='%23t' x='90' y='90'/%3E%3C/g%3E%3Cg fill='%23A8BEDC'%3E%3Cuse href='%23t' x='30' y='0'/%3E%3Cuse href='%23t' x='70' y='10'/%3E%3Cuse href='%23t' x='90' y='10'/%3E%3Cuse href='%23t' x='50' y='20'/%3E%3Cuse href='%23t' x='10' y='30'/%3E%3Cuse href='%23t' x='20' y='40'/%3E%3Cuse href='%23t' x='60' y='50'/%3E%3Cuse href='%23t' x='10' y='60'/%3E%3Cuse href='%23t' x='50' y='60'/%3E%3Cuse href='%23t' x='90' y='60'/%3E%3Cuse href='%23t' x='10' y='90'/%3E%3Cuse href='%23t' x='70' y='90'/%3E%3C/g%3E%3Cg fill='%23E9F0F8'%3E%3Cuse href='%23t' x='40' y='0'/%3E%3Cuse href='%23t' x='70' y='0'/%3E%3Cuse href='%23t' x='90' y='0'/%3E%3Cuse href='%23t' x='0' y='20'/%3E%3Cuse href='%23t' x='40' y='30'/%3E%3Cuse href='%23t' x='80' y='40'/%3E%3Cuse href='%23t' x='40' y='50'/%3E%3Cuse href='%23t' x='40' y='70'/%3E%3Cuse href='%23t' x='80' y='70'/%3E%3Cuse href='%23t' x='40' y='90'/%3E%3C/g%3E%3Cg fill='%23B2C6E0'%3E%3Cuse href='%23t' x='50' y='0'/%3E%3Cuse href='%23t' x='10' y='10'/%3E%3Cuse href='%23t' x='80' y='20'/%3E%3Cuse href='%23t' x='90' y='30'/%3E%3Cuse href='%23t' x='70' y='40'/%3E%3Cuse href='%23t' x='0' y='50'/%3E%3Cuse href='%23t' x='50' y='50'/%3E%3Cuse href='%23t' x='60' y='70'/%3E%3Cuse href='%23t' x='0' y='80'/%3E%3Cuse href='%23t' x='80' y='80'/%3E%3Cuse href='%23t' x='20' y='90'/%3E%3C/g%3E%3Cg fill='%23BCCEE8'%3E%3Cuse href='%23t' x='20' y='10'/%3E%3Cuse href='%23t' x='50' y='10'/%3E%3Cuse href='%23t' x='30' y='30'/%3E%3Cuse href='%23t' x='50' y='40'/%3E%3Cuse href='%23t' x='0' y='70'/%3E%3Cuse href='%23t' x='20' y='80'/%3E%3Cuse href='%23t' x='60' y='80'/%3E%3Cuse href='%23t' x='90' y='80'/%3E%3C/g%3E%3Cg fill='%23C8D6EA'%3E%3Cuse href='%23t' x='40' y='10'/%3E%3Cuse href='%23t' x='20' y='20'/%3E%3Cuse href='%23t' x='90' y='20'/%3E%3Cuse href='%23t' x='50' y='30'/%3E%3Cuse href='%23t' x='40' y='40'/%3E%3Cuse href='%23t' x='90' y='40'/%3E%3Cuse href='%23t' x='10' y='50'/%3E%3Cuse href='%23t' x='0' y='60'/%3E%3Cuse href='%23t' x='20' y='70'/%3E%3Cuse href='%23t' x='70' y='70'/%3E%3Cuse href='%23t' x='10' y='80'/%3E%3Cuse href='%23t' x='50' y='80'/%3E%3Cuse href='%23t' x='60' y='90'/%3E%3C/g%3E%3C/svg%3E")}
.ariaMosaic{background-color:#CEDAE8 !important;background-image:var(--aria-mosaic) !important;background-repeat:repeat !important;background-size:130px 130px,170px 170px,100px 100px !important;background-position:0 0 !important}
/* aria-mosaic:end */