/* =========================================================================
 * HelpFinance · css/style.css
 * Design system: the professional shell/layout of HelpFreelance with the
 * exact HelpFinance Pro palette — dark navy radial shell, pure white cards,
 * electric indigo #4C6FFF, teal #12C6A7, coral #FF5C5C, amber #FFA726.
 * 100% responsive (mobile / tablet / desktop), touch targets ≥ 44px,
 * safe-area aware, RTL-ready (Arabic), reduced-motion friendly.
 * ========================================================================= */

:root{
  /* --- HelpFinance Pro palette (identical) --- */
  --bg-dark:#0B1020;
  --bg-grad-start:#243B8C;
  --primary:#4C6FFF;
  --primary-soft:#6C8CFF;
  --secondary:#12C6A7;
  --accent:#FF5C5C;
  --warning:#FFA726;
  --card:#ffffff;
  --card-soft:#F5F7FB;
  --text-main:#141824;
  --text-soft:#A1AEC6;
  --text-slate:#627293;
  --line-light:#E2E7F5;
  --line-input:#d0d7f2;
  --row-even:#F8F9FC;
  --delta-pos:#0B9E84;
  --delta-neg:#D83B5B;
  --mint-bg:#E3FBF6;
  /* --- PWA / splash layer --- */
  --pwa-bg:#05152f;
  --pwa-cyan:#00e7f0;
  /* --- shell tokens --- */
  --side-bg:rgba(5,7,15,0.62);
  --side-line:rgba(255,255,255,0.06);
  --nav-idle:#d9e1ff;
  --brand-gold:#F5B841;      /* the gold of the HelpFinance logo */
  --brand-gold-soft:#FFCE63;
  --r-lg:16px;
  --r-sm:9px;
  --shadow-card:0 10px 22px rgba(5,10,30,0.32);
  --shadow-btn:0 6px 14px rgba(32,87,255,0.35);
  --grad-brand:linear-gradient(135deg,var(--primary),var(--secondary));
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100vh;min-height:100dvh;
  background:radial-gradient(circle at top left,var(--bg-grad-start),var(--bg-dark) 55%);
  background-attachment:fixed;
  color:#fff;font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{background:none;border:0;color:inherit;cursor:pointer;font:inherit}
input,select,textarea{font:inherit}
img{max-width:100%}
.hidden{display:none !important}
.ic{width:20px;height:20px;flex:0 0 auto;color:currentColor}
.num{font-variant-numeric:tabular-nums}
a{color:var(--primary-soft)}
::selection{background:rgba(76,111,255,.35)}

@media (display-mode:standalone){ body{background-color:var(--pwa-bg)} }

/* ------------------------------------------------------------ splash --- */
.pwa-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 24%, rgba(0, 231, 240, 0.20), rgba(0, 231, 240, 0.00) 34%),
    linear-gradient(145deg, #05152f 0%, #061a3b 48%, #020a19 100%);
  color: var(--pwa-white);
  opacity: 1;
  visibility: visible;
  transition: opacity 480ms ease, visibility 480ms ease;
}

.pwa-loader__halo {
  position: absolute;
  width: min(72vw, 520px);
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(0, 231, 240, 0.20);
  box-shadow: 0 0 80px rgba(0, 231, 240, 0.16), inset 0 0 60px rgba(255, 255, 255, 0.04);
  animation: pwaHalo 5s cubic-bezier(.2,.8,.2,1) forwards;
}

.pwa-loader__panel {
  position: relative;
  display: flex;
  width: min(88vw, 380px);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  box-shadow: 0 28px 80px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: pwaPanel 620ms ease both;
}

.pwa-loader__logo {
  width: 148px;
  height: 148px;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35));
}

.pwa-loader__brand {
  margin-top: 4px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.pwa-loader__title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.pwa-loader__subtitle {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.pwa-loader__progress {
  position: relative;
  width: 100%;
  height: 5px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.pwa-loader__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: inherit;
  background: linear-gradient(90deg, #ffffff, #39fbff);
  box-shadow: 0 0 22px rgba(57, 251, 255, 0.55);
  animation: pwaProgress 5s linear forwards;
}

body:not(.pwa-loading) .pwa-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes pwaProgress {
  to { transform: scaleX(1); }
}

@keyframes pwaPanel {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pwaHalo {
  0% { transform: scale(0.92); opacity: 0.28; }
  45% { opacity: 0.75; }
  100% { transform: scale(1.06); opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-loader,
  .pwa-loader__halo,
  .pwa-loader__panel,
  .pwa-loader__progress span {
    animation-duration: 1ms;
    transition-duration: 1ms;
  }
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  body {
    min-height: 100svh;
  }

  .main,
  .sidebar {
    height: 100svh;
  }

  .pwa-loader__panel {
    border-radius: 24px;
    padding: 30px 24px 26px;
  }

  .pwa-loader__logo {
    width: 132px;
    height: 132px;
  }
}


/* Previous brand-loader requirement: logo only, no text/progress, light panel, slow pulse. */
.pwa-loader {
  background: #05152f !important;
}
.pwa-loader__halo,
.pwa-loader__brand,
.pwa-loader__title,
.pwa-loader__subtitle,
.pwa-loader__progress {
  display: none !important;
}
.pwa-loader__panel {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}
.pwa-loader__logo {
  width: min(48vw, 230px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  animation: helpcoreLogoHeartbeat 3s ease-in-out infinite !important;
  will-change: transform, opacity;
  box-shadow: none !important;
  filter: none !important;
  border: 0 !important;
  background: transparent !important;
}
@keyframes helpcoreLogoHeartbeat {
  0% { transform: translateZ(0) scale(1); opacity: 0.94; }
  18% { transform: translateZ(0) scale(1.055); opacity: 1; }
  32% { transform: translateZ(0) scale(1); opacity: 0.96; }
  46% { transform: translateZ(0) scale(1.035); opacity: 1; }
  64%, 100% { transform: translateZ(0) scale(1); opacity: 0.94; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-loader__logo {
    animation: none !important;
  }
}

/* ---------------------------------------------------- language overlay --- */
.overlay{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;
  background:rgba(4,7,18,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.sheet{
  width:100%;max-width:560px;margin:auto;background:var(--card);color:var(--text-main);
  border-radius:24px;padding:clamp(24px,4vw,38px);text-align:center;box-shadow:var(--shadow-card);
}
.appLogo{
  display:block;
  object-fit:contain;
  image-rendering:auto;
  max-width:none;
}
.sheetLogo{width:72px;height:72px;border-radius:14px;margin:0 auto 14px}
.sheet h3{font-weight:800;font-size:clamp(22px,4vw,28px);letter-spacing:-.02em;margin-bottom:8px}
.sheet p{color:var(--text-slate);font-size:14px;margin-bottom:22px}
.langs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}
@media(min-width:460px){.langs{grid-template-columns:repeat(3,1fr)}}
.langs button{
  min-height:56px;font-weight:600;font-size:15px;background:var(--card-soft);color:var(--text-main);
  border:1px solid var(--line-input);border-radius:14px;padding:10px;transition:.16s;
  display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
}
.langs button:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 22px rgba(76,111,255,.22)}
.langs button.sel{border-color:var(--secondary);box-shadow:0 0 0 1px var(--secondary)}
.langs button small{font-size:11px;color:var(--text-slate);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.ovCur{text-align:start;margin-bottom:22px}
.ovCur label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}
.ovCur small{display:block;color:var(--text-slate);font-size:12px;margin-top:8px}
.sheet .selWrap{width:100%}
.sheet .selWrap select{width:100%;background:var(--card-soft);color:var(--text-main);border:1px solid var(--line-input)}
.sheet .selWrap option{background:#fff;color:var(--text-main)}

/* -------------------------------------------------------------- gate --- */
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.gateInner{width:min(100%,700px);max-width:700px;min-width:0;margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.gateLogo{width:96px;height:96px;border-radius:22px;box-shadow:0 20px 60px rgba(76,111,255,.35)}
.gateBrand{font-weight:800;font-size:22px;letter-spacing:-.01em}
.gateBrand span{color:var(--brand-gold)}
/* Brand: "Help" stays white, "Finance" is the signature gold of the logo. */
.brandAccent,
.gateBrand .brandAccent,
.brandName .brandAccent{color:var(--brand-gold)}
/* Login title: exactly the two lines authored in the dictionary. white-space
   "pre" honours the "\n" AND forbids any re-wrap, so the title is always two
   lines; HF.fitGateTitle() scales the size down to fit. Both lines centred,
   in every language and in RTL. */
.gateTitleWrap{white-space:pre;text-align:center;width:100%;max-width:100%}
@media (max-width:420px){ .gate{padding:24px 14px} }
.gateSubOneLine{white-space:normal}
@media (min-width:600px){ .gateSubOneLine{white-space:nowrap} }
.gate h1{font-weight:800;letter-spacing:-.025em;line-height:1.06;font-size:clamp(30px,6vw,46px)}
.gateSub{color:var(--text-soft);max-width:46ch;font-size:15px;text-align:center}
.gateSub.gateSubOneLine{width:100%;max-width:100%}
/* Login/Auth: the whole column is centred — logo, brand, title, subtitle,
   field labels, field content, messages, buttons and the language pill. */
.authForm{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;margin-top:8px;text-align:center;align-items:stretch}
.authField{display:flex;flex-direction:column;gap:6px;text-align:center}
.authField span{font-size:13px;font-weight:600;color:var(--nav-idle);text-align:center}
.authField input{
  min-height:48px;border-radius:13px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#fff;padding:10px 15px;font-size:15px;transition:.16s;
  text-align:center;
}
.authField input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(76,111,255,.25)}
.authError{color:#ffb3c0;background:rgba(255,92,92,.12);border:1px solid rgba(255,92,92,.35);border-radius:12px;padding:10px 14px;font-size:13.5px;text-align:center}
.gateLang{margin-top:10px}

/* dialog: set / reset password */
.credDialog{border:0;padding:0;background:transparent;max-width:min(92vw,440px);width:100%}
.credDialog::backdrop{background:rgba(4,7,18,.8);backdrop-filter:blur(8px)}
.credCard{
  background:var(--card);color:var(--text-main);border-radius:22px;
  padding:clamp(22px,4vw,32px);display:flex;flex-direction:column;gap:12px;text-align:center;box-shadow:var(--shadow-card);
}
.credLogo{width:56px;height:56px;border-radius:12px;margin:0 auto}
.credCard h3{font-weight:800;font-size:21px}
.credCard p{color:var(--text-slate);font-size:13.5px}
.credCard .authField{text-align:center}
.credCard .authField span{color:var(--text-slate)}
.credCard .authField input{background:var(--card-soft);color:var(--text-main);border-color:var(--line-input)}

/* ------------------------------------------------------------- topbar --- */
.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:calc(10px + env(safe-area-inset-top)) clamp(14px,2.6vw,26px) 10px;
  border-bottom:1px solid var(--side-line);
  background:rgba(5,9,22,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  position:sticky;top:0;z-index:60;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brandLogo{width:40px;height:40px;border-radius:10px;flex:0 0 auto}
.brandName{font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.brandName span{color:var(--brand-gold)}
.brandName small{display:block;color:var(--text-soft);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.topCtrls{display:flex;align-items:center;gap:9px}

.langBtn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:14px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 15px;color:#fff;
  background:rgba(255,255,255,.05);transition:.16s;
}
.langBtn:hover{border-color:var(--primary)}
.langBtn .ic{width:17px;height:17px;color:var(--primary-soft)}

.selWrap{position:relative;display:inline-flex;align-items:center}
.selWrap select{
  appearance:none;-webkit-appearance:none;min-height:44px;font-weight:600;font-size:14px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 34px 8px 15px;color:#fff;
  background:rgba(255,255,255,.05);cursor:pointer;transition:.16s;
}
[dir="rtl"] .selWrap select{padding:8px 15px 8px 34px}
.selWrap select:hover{border-color:var(--primary)}
.selWrap .ic{position:absolute;inset-inline-end:12px;width:15px;height:15px;color:var(--primary-soft);pointer-events:none}
.selWrap option{background:#101736;color:#fff}

.creditsBadge{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 15px;border-radius:999px;
  border:1px solid rgba(18,198,167,.4);background:rgba(18,198,167,.1);color:var(--secondary);
  font-weight:700;font-size:14px;transition:.16s;
}
.creditsBadge:hover{box-shadow:0 0 0 3px rgba(18,198,167,.18)}
.creditsBadge.lowCredits{border-color:rgba(255,167,38,.5);background:rgba(255,167,38,.1);color:var(--warning)}
.creditsBadge .ic{width:17px;height:17px}

.userMenu{position:relative}
.userChip{
  width:44px;height:44px;border-radius:50%;background:var(--grad-brand);
  border:1px solid rgba(255,255,255,.16);font-weight:800;font-size:16px;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.16s;
}
.userChip:hover{box-shadow:0 0 0 3px rgba(76,111,255,.3)}
.userDrop{
  position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:#0f1631;
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:10px;min-width:230px;z-index:70;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.userEmail{font-size:13px;color:var(--text-soft);word-break:break-all}

/* -------------------------------------------------------------- shell --- */
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);flex:1;min-height:0}
.sidenav{
  display:flex;flex-direction:column;gap:3px;padding:18px 12px 26px;
  border-inline-end:1px solid var(--side-line);background:var(--side-bg);
  overflow-y:auto;max-height:calc(100dvh - 65px);position:sticky;top:65px;
}
.navSection{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);
  padding:16px 14px 6px;display:flex;align-items:center;gap:7px;
}
.navSection:first-child{padding-top:2px}
.navSection .navLock{width:13px;height:13px;color:var(--warning)}
.navItem{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 14px;border-radius:11px;
  color:var(--nav-idle);font-weight:500;font-size:14px;transition:.16s;text-align:start;width:100%;
}
.navItem:hover{color:#fff;background:rgba(76,111,255,.12)}
.navItem.active{
  color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-soft));
  box-shadow:0 6px 14px rgba(24,67,255,.45);font-weight:600;
}
.navItem .ic{color:var(--primary-soft);width:18px;height:18px}
.navItem.active .ic{color:#fff}
.navItem.locked{opacity:.55}
.navItem.locked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--warning);margin-inline-start:auto}
.sideFoot{margin-top:auto;padding:18px 14px 4px;font-size:11px;color:#dbe5ff;opacity:.75;line-height:1.6}

.main{padding:clamp(14px,2.6vw,30px);max-width:1280px;width:100%;margin:0 auto;min-width:0;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.view{display:none;animation:fadeUp .28s ease}
.view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .view{animation:none} }

/* -------------------------------------------------------------- tabbar --- */
.tabbar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:rgba(5,9,22,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--side-line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  overflow-x:auto;scrollbar-width:none;gap:2px;
}
.tabbar::-webkit-scrollbar{display:none}
.tabItem{
  flex:1 0 auto;min-width:60px;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:52px;padding:6px;border-radius:10px;color:var(--text-soft);
  font-size:10px;font-weight:600;letter-spacing:.02em;transition:.16s;
}
.tabItem .ic{width:21px;height:21px}
.tabItem.active{color:var(--primary-soft)}
.tabItem span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ----------------------------------------------------------- page head --- */
.pageHead{margin-bottom:clamp(16px,2.6vw,24px);display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pageHead h1{font-weight:800;letter-spacing:-.02em;font-size:clamp(23px,4.2vw,32px);line-height:1.1}
.pageHead .sub{color:var(--text-soft);font-size:14px;margin-top:6px;max-width:64ch}
.pageActions{display:flex;gap:9px;flex-wrap:wrap}

/* -------------------------------------------------------------- panels --- */
.panel{
  background:var(--card);color:var(--text-main);border-radius:var(--r-lg);
  padding:clamp(15px,2.4vw,24px);margin-bottom:clamp(13px,2vw,20px);box-shadow:var(--shadow-card);
}
.panel h2{
  font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-slate);
  display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap;
}
.panel h2 i{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px rgba(76,111,255,.5);font-style:normal;flex:0 0 auto}
.panel h2 .spacer{flex:1}
.panelGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(13px,2vw,20px);align-items:start}
.panelGrid .panel{margin-bottom:0}
.panelGrid.sectionGapAfter{margin-bottom:clamp(20px,3vw,28px)}
.panelGrid2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(13px,2vw,20px);align-items:stretch;margin-bottom:clamp(13px,2vw,20px)}
.panelGrid2 .panel{margin-bottom:0}
@media (max-width:1100px){ .panelGrid2{grid-template-columns:1fr} }

.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:rgba(76,111,255,.09);color:var(--primary);white-space:nowrap;
}
.pillIn{background:rgba(18,198,167,.1);color:var(--delta-pos)}
.pillOut{background:rgba(255,92,92,.1);color:var(--delta-neg)}
.pillWarn{background:rgba(255,167,38,.12);color:#b7791f}

/* gradient hero tile (HelpFinance Pro "quick-main") */
.quickMain{
  background:var(--grad-brand);border-radius:var(--r-lg);padding:14px 16px;color:#fff;
  box-shadow:0 10px 20px rgba(12,28,90,.55);margin-bottom:10px;
}
.quickMainLabel{font-size:11px;text-transform:uppercase;letter-spacing:.09em;opacity:.92;font-weight:700}
.quickMainValue{font-size:clamp(20px,3vw,27px);font-weight:800;margin:4px 0;letter-spacing:-.01em}
.quickMainSub{font-size:12px;opacity:.85}
.quickMint{
  background:var(--mint-bg);border:1px solid rgba(18,198,167,.35);border-radius:var(--r-lg);
  padding:13px 16px;color:var(--text-main);margin-bottom:10px;
}
.quickMint .quickMainLabel{color:var(--delta-pos);opacity:1}
.quickMint .quickMainValue{color:var(--text-main)}
.quickMint .quickMainSub{color:var(--text-slate);opacity:1}

/* delta badges (identical semantics to HelpFinance Pro) */
.delta-positive{color:var(--delta-pos)}
.delta-negative{color:var(--delta-neg)}
.delta-neutral{color:var(--text-soft)}
.deltaLabel{font-size:12.5px;font-weight:700;margin:2px 0 8px;display:block}

/* timeframe pills: Mese / Anno / Totale */
.tfRow{display:flex;gap:6px;margin:4px 0 10px;flex-wrap:wrap}
.tfBtn{
  font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;min-height:32px;
  background:var(--card-soft);border:1px solid var(--line-input);color:var(--text-slate);transition:.16s;
}
.tfBtn:hover{border-color:var(--primary)}
.tfBtn.active{background:var(--grad-brand);color:#fff;border-color:transparent;font-weight:700;box-shadow:var(--shadow-btn)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px;margin-bottom:clamp(13px,2vw,20px)}
.kpi{
  background:var(--card-soft);border:1px solid var(--line-input);border-radius:var(--r-lg);
  padding:12px 14px;color:var(--text-main);
}
.kpiLbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-slate)}
.kpiVal{font-size:clamp(17px,2.2vw,21px);font-weight:800;margin-top:3px;letter-spacing:-.01em}
.kpiSub{font-size:11.5px;color:var(--text-slate);margin-top:2px}
.kpi.pos .kpiVal{color:var(--delta-pos)}
.kpi.neg .kpiVal{color:var(--delta-neg)}
.kpi.warn .kpiVal{color:#b7791f}

/* KPI staircase (income-per-time, HelpFinance Pro signature) */
.kpiStairs{display:flex;flex-direction:column;gap:8px}
.kpiStairs .kpi{position:relative}
.kpiStairs .kpi:nth-child(1){width:100%;border-color:#b5c4ff;box-shadow:0 6px 16px rgba(12,28,90,.3)}
.kpiStairs .kpi:nth-child(2){width:92%;border-color:#c5cff5;opacity:.97}
.kpiStairs .kpi:nth-child(3){width:84%;border-color:#d5ddf7;opacity:.93}
.kpiStairs .kpi:nth-child(4){width:76%;border-color:#e3e7fb;opacity:.89}
.kpiStairs .kpi:nth-child(5){width:68%;border-color:#edf0fe;opacity:.85}
@media (max-width:640px){ .kpiStairs .kpi{width:100% !important} }

/* centred KPI tiles (Debt dashboard) */
.kpisCenter .kpi{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px}
.kpisCenter .kpiSub{line-height:1.5}
.kpisCenter .kpiSub .num{font-weight:700;color:var(--text-main)}

/* DTI card: the title row stays at the TOP like every other card; the
   figures breathe in the space below it. */
.dtiCard{display:flex;flex-direction:column;padding:clamp(20px,2.8vw,28px)}
.dtiCard > h2{margin-bottom:0}
.dtiBody{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(10px,2vw,20px) 0 4px}
.dtiCard .bigPct{margin:0}
.dtiCard .statusInd{margin-top:0}
.dtiCard p{margin:0}

/* Settings: ordered two-column layout */
.setGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);align-items:start}
.setCol{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);min-width:0}
.setCol .panel{margin-bottom:0}
.setGrid .setWide{grid-column:1/-1}
@media (max-width:900px){ .setGrid{grid-template-columns:1fr} }
.panelDanger{border:1px solid rgba(255,92,92,.4)}
.panelDanger h2 i{background:var(--accent);box-shadow:0 0 10px rgba(255,92,92,.5)}

/* status indicator (DTI, debt profile — HelpRate AI style) */
.statusInd{
  padding:14px;border-radius:12px;text-align:center;font-weight:800;margin-top:12px;
  font-size:1.05rem;border:2px solid transparent;transition:all .3s ease;
}
.statusSafe{background:rgba(18,198,167,.1);color:var(--secondary);border-color:var(--secondary)}
.statusWarn{background:rgba(255,167,38,.1);color:var(--warning);border-color:var(--warning)}
.statusDanger{background:rgba(255,92,92,.1);color:var(--accent);border-color:var(--accent)}
.bigPct{font-size:clamp(44px,7vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1;text-align:center;margin:10px 0 2px}
.bigPctSub{text-align:center;color:var(--text-slate);font-size:13px}

/* ------------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;
  background:var(--card-soft);color:var(--text-main);border:1px solid var(--line-input);
  transition:.16s;white-space:nowrap;
}
.btn:hover{border-color:var(--primary)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btnPrimary{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--shadow-btn)}
.btnPrimary:hover{filter:brightness(1.06);border-color:transparent}
.btnDanger{background:linear-gradient(135deg,#FF5C5C,#FF2D55);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(255,45,85,.3)}
.btnGhost{background:transparent;border-color:rgba(160,175,220,.35);color:inherit}
.btnGhost:hover{border-color:var(--primary)}
.btnSm{min-height:36px;padding:7px 13px;font-size:13px}
.btnLg{min-height:52px;padding:13px 26px;font-size:15.5px;font-weight:700}
.btnIcon{width:44px;padding:10px;flex:0 0 auto}
.btnIcon.btnSm{width:36px;padding:7px}
.btnRow{display:flex;gap:9px;flex-wrap:wrap}
.panel .btnGhost{color:var(--text-slate);border-color:var(--line-input)}
.panel .btnGhost:hover{border-color:var(--primary);color:var(--primary)}

/* --------------------------------------------------------------- forms --- */
.input,.selectInput,textarea.input{
  min-height:44px;border-radius:12px;border:1px solid var(--line-input);background:var(--card-soft);
  color:var(--text-main);padding:10px 14px;font-size:14.5px;transition:.16s;width:100%;
}
.input:focus,.selectInput:focus,textarea.input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(76,111,255,.15)}
textarea.input{min-height:96px;resize:vertical;line-height:1.5}
.selectInput{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23627293' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-inline-end:36px}
[dir="rtl"] .selectInput{background-position:left 12px center}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-size:12.5px;font-weight:600;color:var(--text-slate)}
.formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:12px;margin-bottom:14px}
.formGrid .wide{grid-column:1/-1}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mutedNote{font-size:12px;color:var(--text-slate)}

/* --------------------------------------------------------------- tables --- */
.tableWrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line-light)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.tbl th{
  background:var(--line-light);color:var(--text-slate);font-weight:700;text-transform:uppercase;
  font-size:11px;letter-spacing:.06em;padding:10px 10px;text-align:center;position:sticky;top:0;z-index:1;
}
/* Universal rule: EVERY table/list cell is centre-aligned (rows & columns). */
.tbl td{padding:10px;border-bottom:1px solid #edf0fe;color:var(--text-main);vertical-align:middle;text-align:center}
.tbl tbody tr:nth-child(even){background:var(--row-even)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .tRight{text-align:center}
.tbl .tCenter{text-align:center}
.rowActions{display:flex;gap:6px;justify-content:center}
.tbl .progWrap{margin-inline:auto}
.rowBtn{
  width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card-soft);border:1px solid var(--line-input);color:var(--text-slate);transition:.15s;
}
.rowBtn:hover{border-color:var(--primary);color:var(--primary)}
.rowBtn.danger:hover{border-color:var(--delta-neg);color:var(--delta-neg)}
.rowBtn .ic{width:15px;height:15px}
.amtPos{color:var(--delta-pos);font-weight:700}
.amtNeg{color:var(--delta-neg);font-weight:700}

/* rows list (credits history & co.) */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line-light)}
.row:last-child{border-bottom:0}
.rIcon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rIcon.in{background:rgba(18,198,167,.12);color:var(--delta-pos)}
.rIcon.out{background:rgba(76,111,255,.1);color:var(--primary)}
.rIcon .ic{width:16px;height:16px}
.rBody{flex:1;min-width:0}
.rTitle{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rSub{font-size:12px;color:var(--text-slate)}
.rAmount{font-weight:800;font-size:14px}
.rAmount.in{color:var(--delta-pos)}
.rAmount.out{color:var(--text-slate)}

/* internal scroll for data-heavy cards (top+bottom fades) */
.rowsScroll{overflow-y:auto;overscroll-behavior:contain;position:relative;scrollbar-width:thin}
.rowsScroll.scrollable{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
.rowsScroll.scrollable.atTop{
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 18px),transparent 100%);
}
.rowsScroll.scrollable.atEnd{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 100%);
}
.rowsScroll.scrollable.atTop.atEnd{-webkit-mask-image:none;mask-image:none}

/* --------------------------------------------------------------- charts --- */
.chartBox{position:relative;width:100%}
.chartBox canvas{display:block;width:100%}
/* Chart-filling cards: the card is a flex column and the chart box absorbs
   ALL the free space left under the chart (no empty area in the card). */
.panelFlex{display:flex;flex-direction:column}
.panelFlex .chartBox{flex:1 1 auto;min-height:250px;margin-top:4px}
.panelFlex .chartBox canvas{position:absolute;inset:0;width:100%}
/* Taller summary cards (Yearly summary page) */
.annTall{min-height:clamp(500px,62vh,660px)}
.chartLegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--text-slate)}
.chartLegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px;font-style:normal}

/* SVG pie (asset allocation) */
.pieWrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.pieSvg{width:100%;max-width:520px;height:auto;overflow:visible}
.pieSlice{stroke:#fff;stroke-width:2}
.pieLabelLine{stroke:rgba(20,24,36,.28);stroke-width:1.5;fill:none}
.pieLabel{font-size:34px;font-weight:800;fill:var(--text-main)}
.pieLabelDetail{font-size:28px;font-weight:700;fill:#5b6a86}
.pieInside{fill:#fff;stroke:rgba(20,24,36,.34);stroke-width:6px;paint-order:stroke;font-size:36px;font-weight:800}
/* stacked card column with generous spacing (Dashboard right column) */
.colStack{display:flex;flex-direction:column;gap:28px}
.colStack .panel{margin-bottom:0}
.pieEmpty{color:var(--text-slate);font-size:13.5px;text-align:center;padding:26px 10px}

/* Planning: HelpFinance Pro category groups */
.planRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px}
.planRow + .planRow{border-top:1px solid var(--line-light)}
.planRowText{min-width:0}
.planRowLabel{font-weight:700;font-size:14px}
.planRowSub{font-size:12px;color:var(--text-slate)}
.planRowInput{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.planRowInput .input{width:130px;text-align:end}
.planCur{color:var(--text-slate);font-weight:700;font-size:13.5px}
.planBudgetRow{background:var(--card-soft);border-radius:12px;margin-bottom:14px;padding:12px}
.planBudgetRow + .planGroup{margin-top:0}
.planGroup{background:var(--card-soft);border-radius:12px;padding:4px 0;margin-bottom:12px}
.planGroupHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 6px;border-bottom:1px solid var(--line-light)}
.planGroupLabel{font-weight:800;font-size:13.5px;letter-spacing:.02em}
@media (max-width:520px){
  .planRow{flex-direction:column;align-items:stretch}
  .planRowInput .input{width:100%}
}

/* progress bars */
.progWrap{background:var(--line-light);border-radius:999px;height:9px;overflow:hidden;margin-top:6px}
.progFill{height:100%;border-radius:999px;background:var(--grad-brand);transition:width .4s ease;min-width:0}
.progFill.over{background:linear-gradient(135deg,#FF5C5C,#FF2D55)}

/* ------------------------------------------------------------- AI panel --- */
.aiPanel{
  background:#141824;color:#fff;border-radius:var(--r-lg);padding:clamp(15px,2.4vw,22px);
  margin-bottom:clamp(13px,2vw,20px);box-shadow:var(--shadow-card);
}
.aiPanel h2{
  color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
}
.aiPanel h2 .ic{width:16px;height:16px;color:var(--pwa-cyan)}
.aiBody{font-size:13.5px;line-height:1.65;color:#e8ecfa}
.aiBody h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pwa-cyan);margin:14px 0 6px}
.aiBody h4:first-child{margin-top:0}
.aiBody ul{padding-inline-start:18px;display:flex;flex-direction:column;gap:5px}
.aiBody .aiSection{border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:12px}
.aiBody .aiSection:first-child{border-top:0;padding-top:0;margin-top:0}
.aiFoot{margin-top:14px;font-size:11.5px;color:var(--text-soft);line-height:1.5}
.aiActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;align-items:center}
.aiCost{font-size:12px;color:var(--text-soft)}
.aiBtn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;
  font-weight:700;font-size:14px;color:#04263a;border:0;
  background:linear-gradient(135deg,#39fbff,var(--pwa-cyan) 55%,#12C6A7);
  box-shadow:0 8px 20px rgba(0,231,240,.28);transition:.16s;
}
.aiBtn:hover{filter:brightness(1.07)}
.aiBtn:disabled{opacity:.55;cursor:not-allowed}
.aiBtn .ic{width:16px;height:16px}
.aiThinking{display:flex;align-items:center;gap:10px;color:var(--pwa-cyan);font-size:13.5px;font-weight:600}
.aiElapsed{margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.aiDot{width:8px;height:8px;border-radius:50%;background:var(--pwa-cyan);animation:aiPulse 1s ease-in-out infinite}
.aiDot:nth-child(2){animation-delay:.18s}
.aiDot:nth-child(3){animation-delay:.36s}
@keyframes aiPulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

/* --------------------------------------------------------------- modals --- */
.modal{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:18px;overflow-y:auto;background:rgba(4,7,18,.7);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
.modalCard{
  width:100%;max-width:560px;margin:auto;background:var(--card);color:var(--text-main);
  border-radius:20px;padding:clamp(18px,3.4vw,28px);box-shadow:var(--shadow-card);
  animation:fadeUp .22s ease;
}
.modalCard.wide{max-width:760px}
.modalHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.modalHead h3{font-weight:800;font-size:19px;letter-spacing:-.01em}
.modalFoot{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;flex-wrap:wrap}
.modalCard .muted{color:var(--text-slate)}

/* --------------------------------------------------------------- toasts --- */
.toasts{
  position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:9px;z-index:200;width:min(94vw,440px);pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:10px;background:#0f1631;color:#fff;border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:12px 16px;font-size:13.5px;font-weight:600;box-shadow:0 18px 46px rgba(0,0,0,.5);
  animation:fadeUp .25s ease;pointer-events:auto;
}
.toast .ic{width:17px;height:17px;color:var(--secondary)}
.toast.err .ic{color:var(--accent)}

/* ---------------------------------------------------------- credit packs --- */
.heroCard{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,32px);
  background:linear-gradient(120deg,#101a3e 0%,#0c1430 55%,#0a1128 100%);
  border:1px solid rgba(108,140,255,.28);border-radius:22px;padding:clamp(20px,3.4vw,34px);
  margin-bottom:clamp(14px,2.2vw,22px);overflow:hidden;color:#fff;
}
.heroCard::after{
  content:"";position:absolute;width:330px;height:330px;right:-165px;bottom:-195px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,111,255,.35),transparent 68%);pointer-events:none;
}
.heroText{position:relative;z-index:1;max-width:640px;display:flex;flex-direction:column;gap:8px}
.heroEyebrow{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--primary-soft)}
.heroText h2{font-weight:800;letter-spacing:-.02em;line-height:1.04;font-size:clamp(24px,3.6vw,36px)}
.heroText p{color:var(--text-soft);font-size:14.5px;max-width:52ch;margin:0;line-height:1.5}
.heroChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.heroChip{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-soft);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:999px;padding:5px 12px;
}
.heroChip b{font-weight:800}
.heroChip.in b{color:var(--secondary)}
.heroChip.out b{color:var(--accent)}
.heroOrb{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(140px,17vw,180px);height:clamp(140px,17vw,180px);border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 50% 42%,rgba(18,198,167,.2),rgba(76,111,255,.08) 62%,transparent 74%);
  border:1px solid rgba(18,198,167,.4);
}
.heroOrb .heroVal{font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(34px,5vw,46px)}
.heroOrb .heroLbl{margin-top:8px;color:var(--secondary);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.heroOrb.neg{border-color:rgba(255,92,92,.45);background:radial-gradient(circle at 50% 42%,rgba(255,92,92,.18),rgba(76,111,255,.05) 62%,transparent 72%)}
.heroOrb.neg .heroLbl{color:var(--accent)}
@media (max-width:820px){ .heroCard{flex-direction:column;text-align:center} .heroText{align-items:center} .heroChips{justify-content:center} }

.packGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:11px}
.packCard{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--card-soft);border:1px solid var(--line-input);border-radius:16px;
  padding:20px 10px 15px;transition:.16s;min-height:44px;
}
.packCard:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 12px 26px rgba(76,111,255,.2)}
.packCard:disabled{opacity:.55;transform:none}
.packBadge{
  position:absolute;top:-9px;inset-inline-start:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#FFB347,#FF8C42);color:#3a2102;font-size:10px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:999px;white-space:nowrap;
}
[dir="rtl"] .packBadge{transform:translateX(50%)}
.packBadge.alt{background:var(--grad-brand);color:#fff}
.packQty{font-size:26px;font-weight:800;letter-spacing:-.02em}
.packLbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-slate)}
.packPrice{font-size:16.5px;font-weight:800;margin-top:5px;color:var(--primary)}
.packUnit{font-size:11px;color:var(--text-slate)}

/* ---------------------------------------------------------- module lock --- */
.lockPanel{
  position:relative;background:linear-gradient(120deg,#101a3e 0%,#0c1430 55%,#0a1128 100%);
  border:1px solid rgba(108,140,255,.28);border-radius:22px;padding:clamp(24px,4vw,44px);
  color:#fff;text-align:center;overflow:hidden;
}
.lockPanel::after{
  content:"";position:absolute;width:380px;height:380px;right:-190px;top:-230px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,111,255,.3),transparent 66%);pointer-events:none;
}
.lockInner{position:relative;z-index:1;max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.lockBadgeIcon{
  width:74px;height:74px;border-radius:22px;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 44px rgba(76,111,255,.4);
}
.lockBadgeIcon .ic{width:34px;height:34px;color:#fff}
.lockPanel h2{font-size:clamp(23px,3.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.lockPanel .lockSub{color:var(--text-soft);font-size:14.5px;max-width:54ch;line-height:1.55}
.lockFeatures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:8px;width:100%;margin:10px 0;text-align:start}
.lockFeat{display:flex;gap:9px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 13px;font-size:13px}
.lockFeat .ic{width:15px;height:15px;color:var(--secondary);margin-top:2px}
.lockPrice{font-size:clamp(30px,4.6vw,40px);font-weight:800;letter-spacing:-.02em}
.lockPrice small{font-size:13px;font-weight:600;color:var(--text-soft);letter-spacing:0}
.lockNote{font-size:12px;color:var(--text-soft)}

/* -------------------------------------------------- legal / info blocks --- */
.legalDisclaimer{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.legalDisclaimer h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-slate);font-weight:800;margin-bottom:4px}
.legalDisclaimer p{font-size:12.5px;color:var(--text-slate);line-height:1.6}

/* helpers */
.muted{color:var(--text-slate)}
.muted2{color:var(--text-soft)}
.small{font-size:12.5px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}
.center{text-align:center}
.divider{border:0;border-top:1px solid var(--line-light);margin:16px 0}
.emptyState{
  text-align:center;color:var(--text-slate);font-size:13.5px;padding:26px 12px;
  background:#F8FAFF;border:1px dashed var(--line-input);border-radius:12px;
}

/* --------------------------------------------------------- breakpoints --- */
@media (max-width:1024px){
  .shell{grid-template-columns:216px minmax(0,1fr)}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidenav{display:none}
  .tabbar{display:flex}
  .main{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
  .brandName small{display:none}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .topCtrls .curSel{display:none}
  .pageHead{flex-direction:column;align-items:flex-start}
  .panelGrid{grid-template-columns:1fr}
  .modalFoot{justify-content:stretch}
  .modalFoot .btn{flex:1}
}
@media (min-width:1500px){
  .main{max-width:1360px}
}

/* print: keep it clean if the user prints a page */
@media print{
  body{background:#fff;color:#000}
  .topbar,.sidenav,.tabbar,.toasts,.aiActions,.pageActions,.btn{display:none !important}
  .panel{box-shadow:none;border:1px solid #ddd}
}

/* neutral cover while a non-owner is taken to the module's sales page */
.lockDots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.lockDots span{width:8px;height:8px;border-radius:50%;background:var(--primary-soft);opacity:.35;animation:lockDot 1.05s infinite ease-in-out}
.lockDots span:nth-child(2){animation-delay:.16s}
.lockDots span:nth-child(3){animation-delay:.32s}
@keyframes lockDot{0%,80%,100%{opacity:.3;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}