/* Super PWA — front-end app UI. Everything scoped under #spwa-app or .spwa-* so
   it never touches the host theme. Dark/light via [data-spwa-theme] + system. */

#spwa-app { --spwa-bg:#ffffff; --spwa-fg:#0f172a; --spwa-muted:#64748b; --spwa-line:#e5e7eb; --spwa-card:#ffffff; --spwa-shadow:0 10px 40px rgba(2,6,23,.14); --spwa-nav-active:#6366f1; }
#spwa-app[data-spwa-theme="dark"] { --spwa-bg:#0b1120; --spwa-fg:#e5e7eb; --spwa-muted:#94a3b8; --spwa-line:#1f2937; --spwa-card:#111827; --spwa-shadow:0 10px 40px rgba(0,0,0,.5); }

.spwa-nav, .spwa-install, .spwa-ios, .spwa-splash, .spwa-ptr { box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.spwa-nav *, .spwa-install *, .spwa-ios * { box-sizing:border-box; }

/* body gets breathing room so the fixed nav doesn't cover content */
body.spwa-has-bottomnav { padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
body.spwa-has-topnav { padding-top:calc(56px + env(safe-area-inset-top,0px)); }

/* ============ BOTTOM NAVIGATION ============ */
.spwa-nav {
	position:fixed; left:0; right:0; bottom:0; z-index:99990;
	display:flex; align-items:stretch; justify-content:space-around;
	background:var(--spwa-card); color:var(--spwa-fg);
	border-top:1px solid var(--spwa-line);
	padding-bottom:env(safe-area-inset-bottom,0px);
	transition:transform .28s ease;
}
.spwa-nav.is-hidden { transform:translateY(120%); }
.spwa-nav__item {
	flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
	padding:9px 4px; text-decoration:none; color:var(--spwa-muted); font-size:11px; font-weight:600;
	min-height:56px; transition:color .18s ease, transform .18s ease; -webkit-tap-highlight-color:transparent;
}
.spwa-nav__item:hover { color:var(--spwa-fg); }
.spwa-nav__ic { display:flex; align-items:center; justify-content:center; }
.spwa-nav__ic svg { width:23px; height:23px; }
.spwa-nav__lb { line-height:1; letter-spacing:.01em; }
.spwa-nav--nolabels .spwa-nav__item { min-height:52px; }
.spwa-nav__item.is-active { color:var(--spwa-nav-active); }

/* -- style: pill (default) -- active pill behind the icon */
.spwa-nav--pill .spwa-nav__item.is-active .spwa-nav__ic { background:color-mix(in srgb,var(--spwa-nav-active) 16%,transparent); border-radius:999px; padding:5px 16px; }
.spwa-nav--pill .spwa-nav__ic { transition:background .2s ease, padding .2s ease; padding:5px 16px; }

/* -- style: floating -- detached rounded bar */
.spwa-nav--floating { left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); border:1px solid var(--spwa-line); border-radius:22px; box-shadow:var(--spwa-shadow); padding-bottom:0; overflow:hidden; }
body.spwa-has-bottomnav { }
.spwa-nav--floating .spwa-nav__item.is-active { transform:translateY(-1px); }

/* -- style: material -- top active indicator bar + filled active */
.spwa-nav--material .spwa-nav__item { position:relative; }
.spwa-nav--material .spwa-nav__item.is-active::before { content:""; position:absolute; top:0; left:22%; right:22%; height:3px; border-radius:0 0 3px 3px; background:var(--spwa-nav-active); }
.spwa-nav--material .spwa-nav__item.is-active .spwa-nav__ic { transform:translateY(-1px) scale(1.06); }

/* -- style: glass -- frosted translucent */
.spwa-nav--glass { background:color-mix(in srgb,var(--spwa-card) 72%,transparent); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); }

/* -- style: minimal -- no borders, icon only vibe */
.spwa-nav--minimal { border-top:none; box-shadow:0 -6px 24px rgba(2,6,23,.06); }
#spwa-app[data-spwa-theme="dark"] .spwa-nav--minimal { box-shadow:0 -6px 24px rgba(0,0,0,.4); }
.spwa-nav--minimal .spwa-nav__item.is-active .spwa-nav__ic { transform:scale(1.14); }

/* ============ INSTALL PROMPT ============ */
.spwa-btn { border:0; border-radius:11px; padding:10px 16px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:filter .15s ease, transform .1s ease; }
.spwa-btn:active { transform:translateY(1px); }
.spwa-btn--primary { background:var(--spwa-nav-active); color:#fff; }
.spwa-btn--primary:hover { filter:brightness(1.06); }
.spwa-btn--ghost { background:transparent; color:var(--spwa-muted); }
.spwa-btn--ghost:hover { color:var(--spwa-fg); }

.spwa-install { position:fixed; z-index:99992; color:var(--spwa-fg); }
.spwa-install--bottom { bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
.spwa-install--top { top:16px; }
.spwa-install--center { top:50%; }
.spwa-install--center-top { top:28%; }
.spwa-install--center-bottom { top:72%; }
/* banner centred vertically for the center* positions (translateY -50% baked into the transform) */
.spwa-install--banner.spwa-install--center, .spwa-install--banner.spwa-install--center-top, .spwa-install--banner.spwa-install--center-bottom { transform:translate(-50%, calc(-50% + 14px)); }
.spwa-install--banner.spwa-install--center.is-in, .spwa-install--banner.spwa-install--center-top.is-in, .spwa-install--banner.spwa-install--center-bottom.is-in { transform:translate(-50%, -50%); }

/* banner: centered card */
.spwa-install--banner { left:50%; transform:translateX(-50%) translateY(20px); opacity:0; width:min(440px,calc(100% - 24px)); background:var(--spwa-card); border:1px solid var(--spwa-line); border-radius:18px; box-shadow:var(--spwa-shadow); padding:14px; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic tx" "ax ax"; gap:10px 12px; align-items:center; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.spwa-install--banner.is-in { transform:translateX(-50%) translateY(0); opacity:1; }
.spwa-install--banner .spwa-install__ax { grid-area:ax; display:flex; gap:8px; justify-content:flex-end; }

/* bar: full-width strip */
.spwa-install--bar { left:0; right:0; opacity:0; background:var(--spwa-card); border-top:1px solid var(--spwa-line); box-shadow:var(--spwa-shadow); padding:12px 16px; display:flex; align-items:center; gap:12px; transition:transform .3s ease, opacity .3s ease; }
.spwa-install--bar.spwa-install--bottom { transform:translateY(20px); } .spwa-install--bar.spwa-install--top { transform:translateY(-20px); border-top:none; border-bottom:1px solid var(--spwa-line); }
.spwa-install--bar.is-in { transform:translateY(0); opacity:1; }
.spwa-install--bar .spwa-install__tx { flex:1; }
.spwa-install--bar .spwa-install__ax { display:flex; gap:8px; }

/* button: compact pill bottom-right */
.spwa-install--button { right:16px; opacity:0; transform:translateY(16px); display:flex; align-items:center; gap:8px; background:var(--spwa-nav-active); color:#fff; border-radius:999px; padding:12px 18px; box-shadow:var(--spwa-shadow); cursor:pointer; transition:transform .3s ease, opacity .3s ease; }
.spwa-install--button.is-in { transform:translateY(0); opacity:1; }
.spwa-install--button .spwa-install__ax, .spwa-install--button [data-later] { display:none; }
.spwa-install--button .spwa-install__tx { font-weight:700; font-size:14px; }
.spwa-install--button .spwa-install__ic svg { width:20px; height:20px; }

/* badge: floating round icon */
.spwa-install--badge { right:16px; width:52px; height:52px; border-radius:50%; background:var(--spwa-nav-active); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--spwa-shadow); opacity:0; transform:scale(.6); transition:transform .3s cubic-bezier(.2,1.3,.4,1), opacity .3s ease; }
.spwa-install--badge.is-in { opacity:1; transform:scale(1); }
.spwa-install--badge svg { width:24px; height:24px; }

.spwa-install__ic { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; overflow:hidden; background:color-mix(in srgb,var(--spwa-nav-active) 14%,transparent); color:var(--spwa-nav-active); flex:none; }
.spwa-install__ic img { width:100%; height:100%; object-fit:cover; }
.spwa-install__ic svg { width:22px; height:22px; }
.spwa-install__tx { font-size:14px; font-weight:600; line-height:1.35; }

/* ============ iOS add-to-home hint ============ */
.spwa-ios { position:fixed; inset:0; z-index:99995; display:flex; align-items:flex-end; justify-content:center; background:rgba(2,6,23,.5); opacity:0; transition:opacity .3s ease; padding:0 12px 22px; }
.spwa-ios.is-in { opacity:1; }
.spwa-ios__card { position:relative; background:var(--spwa-card); color:var(--spwa-fg); border-radius:20px; box-shadow:var(--spwa-shadow); padding:22px; width:min(420px,100%); transform:translateY(16px); transition:transform .3s ease; }
.spwa-ios.is-in .spwa-ios__card { transform:translateY(0); }
.spwa-ios__x { position:absolute; top:10px; right:12px; background:none; border:0; font-size:26px; line-height:1; color:var(--spwa-muted); cursor:pointer; }
.spwa-ios__logo { width:56px; height:56px; border-radius:14px; margin-bottom:10px; }
.spwa-ios__t { font-size:17px; font-weight:800; margin-bottom:12px; }
.spwa-ios__s { display:flex; align-items:center; gap:9px; padding:9px 0; font-size:14px; color:var(--spwa-fg); border-top:1px solid var(--spwa-line); }
.spwa-ios__s svg { width:20px; height:20px; color:var(--spwa-nav-active); }
.spwa-ios__n { flex:none; width:22px; height:22px; border-radius:50%; background:var(--spwa-nav-active); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.spwa-ios__arrow { position:absolute; bottom:6px; left:50%; width:16px; height:16px; background:var(--spwa-card); transform:translateX(-50%) rotate(45deg); }

/* ============ splash ============ */
.spwa-splash { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; transition:opacity .4s ease; }
.spwa-splash.is-gone { opacity:0; pointer-events:none; }
.spwa-splash__logo { width:120px; height:120px; object-fit:contain; animation:spwa-pulse 1.4s ease-in-out infinite; }
@keyframes spwa-pulse { 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.08); opacity:1 } }

/* ============ pull to refresh ============ */
.spwa-ptr { position:fixed; top:0; left:50%; z-index:99991; width:40px; height:40px; margin-top:6px; border-radius:50%; background:var(--spwa-card); box-shadow:var(--spwa-shadow); color:var(--spwa-nav-active); display:flex; align-items:center; justify-content:center; transform:translateX(-50%); }
.spwa-ptr svg { width:20px; height:20px; transition:color .2s; }
.spwa-ptr.is-ready { color:var(--spwa-nav-active); }

/* ============ page transition ============ */
.spwa-fx { }
html.spwa-leaving body { opacity:0; transition:opacity .16s ease; }

/* ============ TOP NAVIGATION (app bar) ============ */
.spwa-topnav { position:fixed; top:0; left:0; right:0; z-index:99989; display:flex; align-items:center; gap:10px; height:56px; padding:0 12px; padding-top:env(safe-area-inset-top,0px); background:var(--spwa-card); color:var(--spwa-fg); border-bottom:1px solid var(--spwa-line); }
.spwa-topnav--custombg { background:var(--spwa-top-bg); }
/* three-part layout: left side | title | right side */
.spwa-topnav__side { display:flex; align-items:center; gap:4px; flex:none; }
.spwa-topnav__side--right { margin-left:auto; }
.spwa-topnav__title { flex:1; min-width:0; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }
/* hamburger + back buttons */
.spwa-burger, .spwa-topback { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--spwa-fg); cursor:pointer; padding:8px; border-radius:10px; font:inherit; font-weight:700; font-size:14px; -webkit-tap-highlight-color:transparent; }
.spwa-burger:hover, .spwa-topback:hover { background:color-mix(in srgb,var(--spwa-fg) 8%,transparent); }
.spwa-burger svg, .spwa-topback svg { width:23px; height:23px; }
/* back-button designs — circle is the gradient "button" showcase */
.spwa-topback--circle { background:var(--spwa-top-grad); color:#fff; border-radius:999px; box-shadow:0 3px 10px color-mix(in srgb,var(--spwa-top-active) 34%,transparent); }
.spwa-topback--circle svg { color:#fff; }
.spwa-topback--circle:hover { filter:brightness(1.06); background:var(--spwa-top-grad); }
.spwa-topback--chevron svg, .spwa-topback--arrow svg { color:var(--spwa-top-active); }
.spwa-topback--text { color:var(--spwa-top-active); }
.spwa-topback--text span { background:var(--spwa-top-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
/* presets */
.spwa-topnav--centered .spwa-topnav__title { position:absolute; left:50%; transform:translateX(-50%); }
.spwa-topnav--minimal { border-bottom:none; background:transparent; backdrop-filter:none; }
.spwa-topnav--glass { background:color-mix(in srgb,var(--spwa-card) 72%,transparent); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); }
.spwa-topnav--elevated { border-bottom:none; box-shadow:0 2px 16px rgba(2,6,23,.12); }
#spwa-app[data-spwa-theme="dark"] .spwa-topnav--elevated { box-shadow:0 2px 16px rgba(0,0,0,.5); }

/* ============ menu drawer + submenus ============ */
.spwa-scrim { position:fixed; inset:0; z-index:99996; background:rgba(2,6,23,.5); opacity:0; transition:opacity .3s ease; }
.spwa-scrim.is-in { opacity:1; }
.spwa-drawer { position:fixed; top:0; bottom:0; z-index:99997; width:min(300px,82vw); background:var(--spwa-card); color:var(--spwa-fg); box-shadow:var(--spwa-shadow); display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.2,.8,.2,1); overscroll-behavior:contain; }
.spwa-drawer--left { left:0; transform:translateX(-100%); }
.spwa-drawer--right { right:0; transform:translateX(100%); }
.spwa-drawer.is-in { transform:translateX(0); }
.spwa-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--spwa-line); font-size:16px; font-weight:800; }
.spwa-drawer__x { background:none; border:0; font-size:26px; line-height:1; color:var(--spwa-muted); cursor:pointer; }
.spwa-drawer__list { flex:1; overflow-y:auto; padding:8px 0; }
.spwa-drawer__item { display:flex; align-items:center; gap:12px; width:100%; padding:13px 18px; text-decoration:none; color:var(--spwa-fg); font-size:15px; font-weight:600; background:none; border:0; cursor:pointer; text-align:inherit; font-family:inherit; }
.spwa-drawer__item:hover { background:color-mix(in srgb,var(--spwa-top-active) 10%,transparent); }
.spwa-drawer__ic { display:flex; color:var(--spwa-top-active); }
.spwa-drawer__ic svg { width:20px; height:20px; }
.spwa-drawer__t { flex:1; }
.spwa-drawer__caret { display:flex; color:var(--spwa-muted); transition:transform .2s ease; }
.spwa-drawer__caret svg { width:18px; height:18px; }
.spwa-drawer__grp.is-open .spwa-drawer__caret { transform:rotate(90deg); }
.spwa-drawer__sub { max-height:0; overflow:hidden; transition:max-height .28s ease; background:color-mix(in srgb,var(--spwa-fg) 4%,transparent); }
.spwa-drawer__grp.is-open .spwa-drawer__sub { max-height:400px; }
.spwa-drawer__subitem { display:block; padding:11px 18px 11px 50px; text-decoration:none; color:var(--spwa-muted); font-size:14px; }
.spwa-drawer__subitem:hover { color:var(--spwa-fg); }

/* ============ RTL ============ */
#spwa-app.spwa-rtl .spwa-drawer__subitem { padding:11px 50px 11px 18px; }
#spwa-app.spwa-rtl .spwa-nav__item, #spwa-app.spwa-rtl .spwa-drawer__item { text-align:right; }
/* Keep the top bar's physical sides in sync with the physically-pinned drawer + the
   left/right position setting; only the title itself reads RTL. */
#spwa-app.spwa-rtl .spwa-topnav { direction:ltr; }
#spwa-app.spwa-rtl .spwa-topnav__title { direction:rtl; text-align:right; }

@media (prefers-reduced-motion: reduce) {
	.spwa-nav, .spwa-install, .spwa-ios, .spwa-splash, .spwa-splash__logo, .spwa-topnav, .spwa-drawer, .spwa-scrim, html.spwa-leaving body { transition:none !important; animation:none !important; }
}