/* ============================================================================
 * Performance Property — shared brand CSS
 *
 * Loaded on every page. Contains:
 *  - Brand tokens (:root variables), fonts, reset
 *  - Login screen, welcome overlay
 *  - Hub landing page (#mainPage)
 *  - Back button (shared across tool pages)
 *  - Logout button
 *  - Tier switcher (dev-only, hub-only)
 *
 * Tool-specific CSS lives inside each tool page (tools/*.html).
 * ============================================================================ */

/* ═══ RESET + ROOT + BODY DEFAULTS ═══ */
/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ═══ ROOT & BODY ═══ */
:root{--bg:#1f283f;--panel:#1f283f;--panel2:#263148;--border:rgba(255,255,255,0.1);--accent:#00b6cb;--text:#ffffff;--muted:rgba(255,255,255,0.55);--smooth:#000080;--workforce:#e57373}
body{font-family:'Montserrat',sans-serif;font-weight:500;background:var(--bg);color:var(--text);min-height:100vh;margin:0;padding:0}

/* ═══ FUTURISTIC ANIMATED PALETTE — DATA × AI ═══
   The login + hub bg shifts through three deep-tech "phases" over a
   long cycle (40-50s) and the orbs shift complementary hues in sync,
   so a violet-leaning bg gets cyan/pink orbs, a teal-leaning bg gets
   violet/pink orbs, etc. The result is a slowly evolving "scene" that
   reads as smart + futuristic without distracting from the content.

   @property registers each var as an actual <color> so keyframes
   interpolate smoothly instead of snapping at boundaries (the default
   for unregistered vars). inherits:true lets the orb pseudo-elements
   pick up the parent's animated value via cascade, so a single
   animation on #loginScreen / #mainPage drives bg + both orbs at
   once. Chrome 85+, Safari 16.4+, Firefox 128+. */
@property --pp-bg-1  { syntax: '<color>'; inherits: true; initial-value: #1a2236; }
@property --pp-bg-2  { syntax: '<color>'; inherits: true; initial-value: #0f1726; }
@property --pp-bg-3  { syntax: '<color>'; inherits: true; initial-value: #162032; }
@property --pp-orb-1 { syntax: '<color>'; inherits: true; initial-value: #00b6cb; }
@property --pp-orb-2 { syntax: '<color>'; inherits: true; initial-value: #64b5f6; }

/* Dark-mode cycle. Phase 1: navy / indigo / sky ("deep tech").
   Phase 2: indigo / violet / teal ("AI"). Phase 3: teal / sky /
   blue ("data"). Orbs flip cyan→fuchsia→violet so they always
   contrast the dominant bg hue. */
@keyframes pp-cycle-dark {
  0%, 100% {
    --pp-bg-1: #0f172a; --pp-bg-2: #1e1b4b; --pp-bg-3: #082f49;
    --pp-orb-1: #22d3ee; --pp-orb-2: #60a5fa;
  }
  33% {
    --pp-bg-1: #1e1b4b; --pp-bg-2: #3b0764; --pp-bg-3: #134e4a;
    --pp-orb-1: #e879f9; --pp-orb-2: #22d3ee;
  }
  66% {
    --pp-bg-1: #042f2e; --pp-bg-2: #0c4a6e; --pp-bg-3: #1e3a8a;
    --pp-orb-1: #a78bfa; --pp-orb-2: #f472b6;
  }
}

/* Light-mode cycle. Same hue rotation but pastel base + saturated
   orb tints so the canvas stays bright while the orbs still pop. */
@keyframes pp-cycle-light {
  0%, 100% {
    --pp-bg-1: #f0f9ff; --pp-bg-2: #e0e7ff; --pp-bg-3: #cffafe;
    --pp-orb-1: #06b6d4; --pp-orb-2: #3b82f6;
  }
  33% {
    --pp-bg-1: #ede9fe; --pp-bg-2: #fae8ff; --pp-bg-3: #ccfbf1;
    --pp-orb-1: #d946ef; --pp-orb-2: #06b6d4;
  }
  66% {
    --pp-bg-1: #ccfbf1; --pp-bg-2: #dbeafe; --pp-bg-3: #e9d5ff;
    --pp-orb-1: #8b5cf6; --pp-orb-2: #ec4899;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced-motion users get the phase-1 palette frozen. */
  @keyframes pp-cycle-dark { 0%, 100% { --pp-bg-1: #0f172a; --pp-bg-2: #1e1b4b; --pp-bg-3: #082f49; --pp-orb-1: #22d3ee; --pp-orb-2: #60a5fa; } }
  @keyframes pp-cycle-light { 0%, 100% { --pp-bg-1: #f0f9ff; --pp-bg-2: #e0e7ff; --pp-bg-3: #cffafe; --pp-orb-1: #06b6d4; --pp-orb-2: #3b82f6; } }
}



/* ═══ LOGIN SCREEN + TIER SWITCHER (visible only where used) ═══ */
/* ═══ LOGIN ═══ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#1f283f;--panel:#1f283f;--panel2:#263148;--border:rgba(255,255,255,0.1);--accent:#00b6cb;--text:#ffffff;--muted:rgba(255,255,255,0.55);--smooth:#000080;--workforce:#e57373}

/* OTP / MULTI-STEP LOGIN */
#otpScreen{display:none}
.login-step{display:flex;flex-direction:column;gap:16px;width:100%}
.login-step.hidden{display:none!important}
.otp-inputs{display:flex;gap:8px;justify-content:center}
.otp-inputs input{width:44px;height:52px;text-align:center;font-size:1.4rem;font-weight:700;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:#fff;border-radius:8px;outline:none;transition:border-color .18s;font-family:'Roboto',sans-serif}
.otp-inputs input:focus{border-color:var(--accent);background:rgba(0,182,203,0.07)}
.otp-info{font-size:.72rem;color:var(--muted);text-align:center;line-height:1.5}
.otp-info span{color:var(--accent);font-weight:600}
.otp-spam-hint{font-size:.66rem;color:var(--muted);opacity:.65;text-align:center;margin-top:6px;font-style:italic}
.resend-btn{background:none;border:none;color:var(--accent);font-family:'Roboto',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;text-decoration:underline;padding:0;opacity:0.8}
.resend-btn:hover{opacity:1}
.resend-btn:disabled{opacity:0.35;cursor:not-allowed;text-decoration:none}
.sending-indicator{font-size:.72rem;color:var(--muted);text-align:center}

/* ═══ TIER SWITCHER (Tier 0 / dev only) ═══ */
#tier-switcher{position:fixed;bottom:18px;right:18px;z-index:2147483647;font-family:'Montserrat',sans-serif;display:none;pointer-events:auto}
/* Visibility is controlled entirely by JS setting inline style on the element.
   z-index is maxed to guarantee it's on top. pointer-events:auto in case any
   parent disables them. */
.ts-toggle{display:flex;align-items:center;gap:8px;background:#1f283f;color:#fff;border:1.5px solid #00b6cb;padding:9px 16px;border-radius:22px;font-size:10.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35);transition:all .18s}
.ts-toggle:hover{background:#2a3452;transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,.45)}
.ts-toggle .ts-eye{font-size:13px;line-height:1}
#ts-menu{position:absolute;bottom:calc(100% + 10px);right:0;background:#fff;border-radius:10px;box-shadow:0 14px 48px rgba(0,0,0,.28);min-width:230px;overflow:hidden;border:1px solid #e0e3ec;display:none}
#ts-menu.open{display:block}
.ts-menu-header{padding:10px 14px;background:#f7f8fb;border-bottom:1px solid #e6e8ef;font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#666}
#ts-menu button{display:block;width:100%;text-align:left;padding:11px 14px;border:none;background:#fff;font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;color:#1f283f;cursor:pointer;border-bottom:1px solid #f0f2f6;transition:background .12s;letter-spacing:.3px}
#ts-menu button:last-child{border-bottom:none}
#ts-menu button:hover{background:#eef7f9}
#ts-menu button.active{background:#00b6cb;color:#fff}
#ts-menu button .ts-sub{display:block;font-size:9.5px;font-weight:600;opacity:.7;margin-top:2px;letter-spacing:.5px}
#ts-menu button.active .ts-sub{opacity:.85}

/* LOGIN */
#loginScreen{
  position:fixed;inset:0;
  background:linear-gradient(135deg, var(--pp-bg-1) 0%, var(--pp-bg-2) 50%, var(--pp-bg-3) 100%);
  display:flex;align-items:center;justify-content:center;z-index:1000;flex-direction:column;overflow:hidden;
  animation: pp-cycle-dark 42s ease-in-out infinite;
}

/* Drifting blurred orbs behind the login card. Two soft radial blobs
   in the cyan + complementary blue brand accents, each slowly looping
   on its own timing so the bg never feels static. ::before + ::after
   on #loginScreen so we don't need any extra DOM. The login-box gets
   position:relative + z-index:1 below so it sits above the orbs.
   prefers-reduced-motion stops the drift but keeps the orbs static. */
#loginScreen::before,
#loginScreen::after{
  content:'';position:absolute;border-radius:50%;
  filter:blur(60px);pointer-events:none;z-index:0;
  will-change:transform;
  contain:paint;
}
/* Orbs use the parent's animated --pp-orb-1 / --pp-orb-2 vars, so
   their colour shifts together with the bg. opacity (not rgba)
   because the inherited value is a solid color — the alpha lives on
   the element itself. */
#loginScreen::before{
  width:560px;height:560px;
  background: var(--pp-orb-1);
  opacity: 0.42;
  top:-140px;left:-140px;
  animation:pp-login-orb-a 16s ease-in-out infinite;
}
#loginScreen::after{
  width:460px;height:460px;
  background: var(--pp-orb-2);
  opacity: 0.40;
  bottom:-120px;right:-120px;
  animation:pp-login-orb-b 19s ease-in-out infinite;
}
/* 4-point loops give a more obviously circular drift than the
   previous 2-point oscillation. Translate amounts bumped from
   60-80px → 180-260px so the movement reads through the 80px blur. */
@keyframes pp-login-orb-a{
  0%   {transform:translate(0,0) scale(1)}
  25%  {transform:translate(220px,80px) scale(1.10)}
  50%  {transform:translate(180px,260px) scale(0.95)}
  75%  {transform:translate(-60px,180px) scale(1.05)}
  100% {transform:translate(0,0) scale(1)}
}
@keyframes pp-login-orb-b{
  0%   {transform:translate(0,0) scale(1)}
  25%  {transform:translate(-180px,-100px) scale(0.92)}
  50%  {transform:translate(-240px,-220px) scale(1.08)}
  75%  {transform:translate(40px,-160px) scale(0.96)}
  100% {transform:translate(0,0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  #loginScreen::before,#loginScreen::after{animation:none}
}

.login-box{position:relative;z-index:1;background:rgba(255,255,255,0.05);backdrop-filter:blur(12px);border:1px solid rgba(0,182,203,0.3);border-radius:16px;padding:48px 52px;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:26px;box-shadow:0 32px 80px rgba(0,0,0,.5)}
.login-logo-wrap{display:flex;align-items:center;justify-content:center;margin-bottom:-8px}
.login-logo{font-family:'Roboto Condensed',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.8}
.login-title{font-family:'Roboto Condensed',sans-serif;font-size:2.1rem;font-weight:800;letter-spacing:.04em;text-align:center;line-height:1.1;color:#fff}
.login-title em{color:var(--accent);font-style:normal}
.login-sub{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center}
.login-divider{width:40px;height:2px;background:var(--accent);opacity:.5;border-radius:2px}
.login-field{width:100%;display:flex;flex-direction:column;gap:6px}
.login-field label{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.login-field input{width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:#fff;font-family:'Roboto',sans-serif;font-size:.95rem;padding:12px 16px;border-radius:8px;outline:none;transition:border-color .18s}
.login-field input:focus{border-color:var(--accent);background:rgba(0,182,203,0.07)}
.login-field input::placeholder{color:rgba(255,255,255,.3)}
.login-btn{width:100%;padding:13px;background:var(--accent);color:#1f283f;font-family:'Roboto',sans-serif;font-size:.9rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:8px;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.login-btn:hover{background:#00cee8;transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,182,203,.35)}
.login-btn:disabled,
.login-btn.is-pending{cursor:wait;opacity:.85}
.login-btn:disabled:hover,
.login-btn.is-pending:hover{transform:none;box-shadow:none;background:var(--accent)}
/* Spinner sits before the button text — only renders when the button
   has the .is-pending class (set by tryLogin at the moment of click).
   Gives the user immediate "got your click" feedback even before any
   network request fires. */
.login-btn.is-pending::before{
  content:'';width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(31,40,63,.25);border-top-color:#1f283f;
  animation:loginBtnSpin .65s linear infinite;
  display:inline-block;flex:0 0 auto;
}
@keyframes loginBtnSpin{
  to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
  .login-btn.is-pending::before{animation-duration:1.5s}
}
.login-error{font-size:.78rem;color:#e57373;text-align:center;min-height:18px;font-weight:500}

/* Cross-step status banner — used by showLoginNotice() to surface
   "Your account is being verified" and similar after registration.
   Lives at the top of step 1 so the user sees it as soon as they
   land on the sign-in form. */
.login-notice{
  width:100%;padding:12px 14px;border-radius:8px;
  background:rgba(0,182,203,.10);border:1px solid rgba(0,182,203,.32);
  color:rgba(255,255,255,.92);font-size:.82rem;font-weight:500;
  line-height:1.45;letter-spacing:.01em;text-align:center;
}
.login-notice[hidden]{display:none}
.login-notice-text{display:block}
/* Variant for warnings (e.g. "still being verified" on retry login). */
.login-notice.is-warn{
  background:rgba(255,184,0,.10);border-color:rgba(255,184,0,.42);
}

/* "I'm registering as a Client" tickbox on step 3. Custom-styled to
   match the dark login aesthetic — native checkbox is hidden, a
   pseudo-checkmark renders inside the bordered square. */
.login-check{
  display:flex;align-items:flex-start;gap:11px;width:100%;
  padding:11px 13px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);
  transition:border-color .18s,background .18s;
}
.login-check:hover{border-color:rgba(0,182,203,.45);background:rgba(0,182,203,.06)}
.login-check input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;width:18px;height:18px;margin:1px 0 0 0;
  border:1.5px solid rgba(255,255,255,.32);border-radius:4px;
  background:transparent;cursor:pointer;position:relative;
  transition:all .15s;
}
.login-check input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent);
}
.login-check input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:5px;top:1px;
  width:5px;height:10px;
  border:solid #1f283f;border-width:0 2.2px 2.2px 0;
  transform:rotate(45deg);
}
.login-check-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.login-check-title{
  font-size:.82rem;font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.2;
}
.login-check-sub{
  font-size:.7rem;font-weight:400;color:rgba(255,255,255,.55);
  line-height:1.45;letter-spacing:.01em;
}

/* ═══ HUB LANDING PAGE ═══ */
/* ═══ MAIN PAGE (HUB) ═══ */
#mainPage{
  display:flex;flex-direction:column;
  min-height:100vh;width:100%;
  background: linear-gradient(160deg, var(--pp-bg-1) 0%, var(--pp-bg-2) 45%, var(--pp-bg-3) 100%);
  position:relative;overflow:hidden;
  font-family:'Montserrat',sans-serif;
  /* Slower cycle than login (50s vs 42s) since the hub is the
     "stay here" landing — drift should feel ambient, not urgent. */
  animation: pp-cycle-dark 50s ease-in-out infinite;
}

/* Drifting blurred orbs behind the hub content. blur reduced from
   110px → 80px and `contain: paint` added so the GPU only repaints
   the orb's own box on each frame instead of invalidating its
   surroundings — measurable perf win on slower devices, no visible
   difference (the orbs are huge and soft regardless). */
#mainPage::before,
#mainPage::after{
  content:'';position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;z-index:0;
  will-change:transform;
  contain:paint;
}
/* Hub orbs ride the same animated --pp-orb-* vars as the login. */
#mainPage::before{
  width:680px;height:680px;
  background: var(--pp-orb-1);
  opacity: 0.32;
  top:-200px;left:-180px;
  animation:pp-hub-orb-a 24s ease-in-out infinite;
}
#mainPage::after{
  width:540px;height:540px;
  background: var(--pp-orb-2);
  opacity: 0.28;
  bottom:-180px;right:-150px;
  animation:pp-hub-orb-b 28s ease-in-out infinite;
}
@keyframes pp-hub-orb-a{
  0%   {transform:translate(0,0) scale(1)}
  25%  {transform:translate(280px,120px) scale(1.08)}
  50%  {transform:translate(220px,320px) scale(0.96)}
  75%  {transform:translate(-80px,220px) scale(1.05)}
  100% {transform:translate(0,0) scale(1)}
}
@keyframes pp-hub-orb-b{
  0%   {transform:translate(0,0) scale(1)}
  25%  {transform:translate(-220px,-130px) scale(0.94)}
  50%  {transform:translate(-300px,-280px) scale(1.10)}
  75%  {transform:translate(60px,-200px) scale(0.98)}
  100% {transform:translate(0,0) scale(1)}
}
@media (prefers-reduced-motion: reduce){
  #mainPage::before,#mainPage::after{animation:none}
}
/* Hub content (topbar, hero, tools grid, stats, footer) needs to
   sit above the orbs. .hub-* containers all flex-render inside
   #mainPage; pushing them above z-index:0 keeps interactivity
   unaffected by the decorative blobs. */
.hub-topbar,.hub-hero,.hub-tools,.hub-stats-wrap,.hub-footer{
  position:relative;z-index:1;
}

/* Top bar */
.hub-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;
  border-bottom:1px solid rgba(0,182,203,.10);
  background:rgba(10,16,28,.35);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:20;
}
.hub-brand{display:flex;align-items:center;gap:14px}
.hub-brand img{height:42px;width:210px;display:block;filter:drop-shadow(0 2px 12px rgba(0,182,203,.2))}
.hub-nav-meta{display:flex;align-items:center;gap:14px}
.hub-identity-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  background:rgba(0,182,203,.08);border:1px solid rgba(0,182,203,.22);
  font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.hub-identity-dot{
  width:7px;height:7px;border-radius:50%;background:#00d4b8;
  box-shadow:0 0 0 3px rgba(0,212,184,.18);
}
.hub-identity-tier{color:var(--accent);font-weight:800}

/* ═══ Pending Approvals pill + modal (Tier 0/1) ═══
   The pill sits next to the identity pill in the topbar. Visible
   only when the cache reports ≥1 pending user (toggled in JS).
   Uses an amber accent so it reads as a notification rather than
   another "you are X" identity badge. */
.hub-pending-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px 7px 14px;border-radius:999px;
  background:rgba(255,184,0,.10);border:1px solid rgba(255,184,0,.40);
  color:rgba(255,235,200,.95);
  font-family:'Montserrat',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:1.8px;text-transform:uppercase;cursor:pointer;
  transition:all .18s ease;
}
.hub-pending-pill:hover{
  background:rgba(255,184,0,.18);border-color:rgba(255,184,0,.65);
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,184,0,.18);
}
.hub-pending-pill[hidden]{display:none}
.hub-pending-dot{
  width:7px;height:7px;border-radius:50%;background:#ffb800;
  box-shadow:0 0 0 3px rgba(255,184,0,.22);
  animation:hubPendingPulse 2s ease-in-out infinite;
}
@keyframes hubPendingPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,184,0,.22)}
  50%   {box-shadow:0 0 0 5px rgba(255,184,0,.10)}
}
.hub-pending-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;border-radius:9px;
  background:#ffb800;color:#1f283f;
  font-size:10px;font-weight:900;letter-spacing:0;
  margin-left:2px;
}
@media (prefers-reduced-motion: reduce){
  .hub-pending-dot{animation:none}
}

/* Modal — same backdrop / inner-card vocabulary as the cluster
   picker so the hub aesthetic stays consistent. */
.pending-modal{
  display:none;position:fixed;inset:0;
  background:rgba(5,12,18,.72);backdrop-filter:blur(8px);
  z-index:9200;align-items:center;justify-content:center;
  padding:24px;opacity:0;transition:opacity .22s ease;
}
.pending-modal.show{display:flex;opacity:1}
.pending-modal-inner{
  position:relative;width:min(720px,96vw);max-height:88vh;overflow-y:auto;
  background:linear-gradient(135deg,rgba(20,35,50,.98) 0%,rgba(15,25,38,.99) 100%);
  border:1.5px solid rgba(0,182,203,.28);border-radius:18px;
  padding:32px 36px 28px;color:#fff;font-family:'Montserrat',sans-serif;
  box-shadow:0 20px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  transform:translateY(14px) scale(.97);opacity:0;
  transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1);
}
.pending-modal.show .pending-modal-inner{transform:translateY(0) scale(1);opacity:1}
.pending-modal-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;background:transparent;
  border:1px solid rgba(255,255,255,.12);border-radius:50%;
  color:rgba(255,255,255,.7);font-size:20px;line-height:1;cursor:pointer;
  transition:all .16s;
}
.pending-modal-close:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(0,182,203,.5)}
.pending-modal-eyebrow{
  font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);opacity:.85;margin-bottom:8px;
}
.pending-modal-title{
  font-weight:900;font-size:clamp(20px,2.2vw,26px);letter-spacing:1.6px;
  text-transform:uppercase;color:#fff;margin:0 0 8px;line-height:1.2;
}
.pending-modal-sub{
  font-size:12.5px;font-weight:500;line-height:1.55;
  color:rgba(255,255,255,.55);margin:0 0 22px;max-width:540px;
}
.pending-modal-list{display:flex;flex-direction:column;gap:10px}
.pending-row{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.pending-row-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.pending-row-name{
  font-size:14px;font-weight:700;color:#fff;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pending-row-meta{
  font-size:11px;font-weight:500;color:rgba(255,255,255,.55);
  letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pending-row-btn{
  padding:8px 16px;border-radius:6px;font-family:inherit;
  font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;transition:all .16s;
}
.pending-row-approve{background:var(--accent);color:#1f283f}
.pending-row-approve:hover{background:#00cee8;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,182,203,.32)}
.pending-row-reject{
  background:transparent;color:rgba(255,180,180,.85);
  border-color:rgba(229,115,115,.45);
}
.pending-row-reject:hover{background:rgba(229,115,115,.12);color:#fff;border-color:rgba(229,115,115,.7)}
.pending-row-btn:disabled{opacity:.5;cursor:wait}

.pending-modal-empty{
  padding:38px 20px;text-align:center;
}
.pending-modal-empty-icon{
  font-size:32px;color:var(--accent);margin-bottom:10px;
  width:60px;height:60px;border-radius:50%;
  background:rgba(0,182,203,.12);border:1px solid rgba(0,182,203,.32);
  display:inline-flex;align-items:center;justify-content:center;
}
.pending-modal-empty-text{
  font-size:13px;font-weight:600;color:rgba(255,255,255,.65);
  letter-spacing:.3px;
}
.pending-modal-footer{
  margin-top:22px;display:flex;justify-content:flex-end;
  border-top:1px solid rgba(255,255,255,.06);padding-top:16px;
}
.pending-modal-refresh{
  background:transparent;border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);font-family:inherit;font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;padding:8px 16px;border-radius:6px;
  cursor:pointer;transition:all .16s;
}
.pending-modal-refresh:hover{background:rgba(0,182,203,.12);color:#fff;border-color:rgba(0,182,203,.5)}

/* Hero */
.hub-hero{
  text-align:center;
  padding:56px 32px 30px;
  max-width:960px;margin:0 auto;width:100%;
}
.hub-hero-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
  color:var(--accent);opacity:.75;margin-bottom:14px;
}
.hub-hero-title{
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(28px,4.5vw,52px);letter-spacing:3px;text-transform:uppercase;
  color:#fff;margin:0 0 12px;line-height:1.05;
}
.hub-hero-title em{color:var(--accent);font-style:normal}
.hub-hero-subtitle{
  font-size:13px;font-weight:500;letter-spacing:1.5px;
  color:rgba(255,255,255,.55);max-width:560px;margin:0 auto;
}

/* Main tool cards — auto-packing grid (3-4 per row at standard widths,
   collapses gracefully). minmax(260px, 1fr) gives 4 columns on
   1240px+ viewports, 3 on ~960px, 2 on tablets, 1 on phones — no
   media queries needed for the column count. Smaller card padding
   + icon + min-height keeps the page scannable when more tools land. */
.hub-tools{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:18px;
  max-width:1240px;margin:0 auto;padding:14px 40px 32px;width:100%;
}
.hub-tool-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:22px 22px 20px;gap:12px;
  background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.015) 100%);
  border:1.5px solid rgba(0,182,203,.22);border-radius:18px;
  cursor:pointer;text-align:left;
  transition:all .24s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
  font-family:inherit;color:inherit;
  min-height:210px;
}
.hub-tool-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,182,203,.14) 0%,transparent 55%);
  opacity:0;transition:opacity .24s;
}
.hub-tool-card::after{
  content:'';position:absolute;top:-40%;right:-20%;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,182,203,.14) 0%,transparent 60%);
  opacity:0;transition:opacity .24s;pointer-events:none;
}
.hub-tool-card:hover{
  border-color:rgba(0,182,203,.7);
  transform:translateY(-3px);
  box-shadow:0 16px 44px rgba(0,182,203,.18),inset 0 1px 0 rgba(255,255,255,.08);
}
.hub-tool-card:hover::before,.hub-tool-card:hover::after{opacity:1}
.hub-tool-card:active{transform:translateY(-1px)}

.hub-tool-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:11px;
  background:linear-gradient(135deg,rgba(0,182,203,.18) 0%,rgba(0,182,203,.05) 100%);
  border:1px solid rgba(0,182,203,.28);
  font-size:21px;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.hub-tool-badge{
  display:inline-block;
  font-size:8.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);opacity:.85;
  padding:3px 8px;border-radius:4px;
  background:rgba(0,182,203,.10);border:1px solid rgba(0,182,203,.25);
  margin-bottom:0;
}
.hub-tool-title{
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(15px,1.4vw,18px);letter-spacing:1.4px;text-transform:uppercase;
  color:#fff;margin:0;line-height:1.18;
}
.hub-tool-desc{
  font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.2px;
  color:rgba(255,255,255,.6);margin:0;
  /* Cap to ~3 lines so cards stay roughly the same height even
     with longer descriptions; the rest is hinted with an ellipsis. */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hub-tool-cta{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);padding-top:6px;
}
.hub-tool-cta span{transition:transform .22s;font-size:14px}
.hub-tool-card:hover .hub-tool-cta span{transform:translateX(4px)}

/* Stats strip — moved ABOVE the tool grid so it stays in view on
   first paint instead of disappearing below the fold. Compact
   horizontal row, tighter than before so it reads as a status
   line under the hero rather than a standalone section. */
.hub-stats-wrap{
  max-width:1240px;margin:0 auto;padding:0 40px 12px;width:100%;
}
.hub-stats-title{
  font-size:9.5px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:8px;padding-left:2px;
}
.hub-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.hub-stat{
  padding:12px 14px;
  background:linear-gradient(135deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.01) 100%);
  border:1px solid rgba(0,182,203,.14);border-radius:11px;
  display:flex;flex-direction:column;gap:3px;
  transition:border-color .2s;
}
.hub-stat:hover{border-color:rgba(0,182,203,.32)}
.hub-stat-value{
  font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(16px,1.7vw,20px);
  color:#fff;letter-spacing:.6px;line-height:1;
}
.hub-stat-label{
  font-size:9px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}

/* Footer */
.hub-footer{
  margin-top:auto;
  padding:22px 40px;
  border-top:1px solid rgba(0,182,203,.08);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.28);
}
.hub-footer-right{display:flex;align-items:center;gap:18px}

/* Responsive */
@media (max-width:900px){
  .hub-topbar{padding:14px 20px}
  .hub-brand img{height:34px;width:170px}
  .hub-hero{padding:40px 20px 20px}
  /* auto-fill handles the column count down to phones — just shrink
     the gutters / minmax floor on smaller viewports. */
  .hub-tools{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));padding:14px 20px 24px;gap:14px}
  .hub-tool-card{padding:20px 20px 18px;min-height:200px}
  .hub-stats-wrap{padding:0 20px 12px}
  .hub-stats{grid-template-columns:repeat(2,1fr)}
  .hub-footer{flex-direction:column;text-align:center;gap:6px;padding:18px 20px}
}
@media (max-width:480px){
  /* Single column on tiny phones; minmax floor would otherwise leave
     awkward dead-space on a 360px viewport. */
  .hub-tools{grid-template-columns:1fr}
  .hub-stats{grid-template-columns:1fr}
  .hub-identity-pill{display:none}
}

/* ═══ BACK BUTTON (tool pages) ═══ */
/* ═══ BACK BUTTON ═══ */
.back-btn-wrap{
  width:100%;background:#0f1624;border-bottom:1px solid rgba(0,182,203,.15);
  padding:10px 20px;display:flex;align-items:center;flex-shrink:0;
}
.back-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:2px;text-transform:uppercase;color:var(--accent);
  background:none;border:1.5px solid rgba(0,182,203,.3);border-radius:20px;
  padding:0 20px;cursor:pointer;transition:all .18s;
  white-space:nowrap;line-height:1;height:36px;
}
.back-btn:hover{background:rgba(0,182,203,.08);border-color:var(--accent)}
.back-btn svg{width:13px;height:13px;flex-shrink:0;display:block}

/* ═══ LOGOUT BUTTON + WELCOME OVERLAY ═══ */
/* ═══ OVERRIDES ═══ */
#clockView .page{max-width:1700px;width:100%}

/* ═══ LOGOUT BUTTON ═══ */
.logout-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);
  background:none;border:1.5px solid rgba(255,255,255,.12);border-radius:20px;
  padding:0 14px;cursor:pointer;transition:all .18s;height:36px;white-space:nowrap;
  margin-left:auto;
}
.logout-btn:hover{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.35);}
.logout-btn svg{width:12px;height:12px;flex-shrink:0;}
.logout-hub{
  /* Sits inside the hub topbar flex row — no absolute positioning needed */
  position:static;
  font-size:9px;letter-spacing:1.5px;padding:0 14px;height:32px;
  border-width:1px;margin-left:0;
}
.logout-hub svg{width:10px;height:10px;}

/* ═══ WELCOME OVERLAY ═══ */
#welcomeOverlay{
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(0,182,203,.09) 0%,transparent 70%),
             linear-gradient(135deg,#1a2236 0%,#0f1726 40%,#162032 100%);
}
#welcomeMsg{
  text-shadow:0 4px 40px rgba(0,182,203,.3);
  letter-spacing:3px;
}

/* ═══ THEME TOGGLE — CIRCULAR REVEAL ANIMATION ═══
   Uses the View Transitions API (Chrome 111+, Safari 18+). When
   theme.js calls document.startViewTransition(), the browser snaps
   the current state, applies the theme inside the callback, then
   animates the new state in. We override the default cross-fade
   with a circular clip-path that expands from where the user
   clicked the toggle (theme.js sets --ppt-x/--ppt-y/--ppt-r on
   <html> just before kicking the transition off).

   Browsers without View Transitions support fall back to the
   `pp-theme-transitioning` class path below — a simple cross-
   property transition. Reduced-motion users always get the
   fallback (theme.js skips startViewTransition for them). */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) {
    z-index: 2;
    animation: pp-theme-circle-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  @keyframes pp-theme-circle-reveal {
    from { clip-path: circle(0px           at var(--ppt-x, 50%) var(--ppt-y, 50%)); }
    to   { clip-path: circle(var(--ppt-r, 150vmax) at var(--ppt-x, 50%) var(--ppt-y, 50%)); }
  }
}

/* Fallback cross-fade for browsers without View Transitions support
   (older Firefox, older Safari) and for reduced-motion users.
   theme.js adds `pp-theme-transitioning` to <html> for ~350ms when
   the View Transitions API isn't available. Within that window
   every element gets a soft cross-property transition. */
.pp-theme-transitioning,
.pp-theme-transitioning *,
.pp-theme-transitioning *::before,
.pp-theme-transitioning *::after{
  transition:
    background-color 700ms cubic-bezier(0.22, 1, 0.36, 1),
    background       700ms cubic-bezier(0.22, 1, 0.36, 1),
    color            700ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color     700ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow       700ms cubic-bezier(0.22, 1, 0.36, 1),
    fill             700ms cubic-bezier(0.22, 1, 0.36, 1),
    stroke           700ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@media (prefers-reduced-motion: reduce){
  .pp-theme-transitioning,
  .pp-theme-transitioning *,
  .pp-theme-transitioning *::before,
  .pp-theme-transitioning *::after{ transition: none !important; }
}

/* ═══ LOGO SWAP (dark vs light theme) ═══
   The site logo on the hub topbar / welcome overlay / tool headers
   has two variants: a white-on-dark version (assets/logo.png, used in
   dark mode) and a black-on-light version (assets/Reports/logo-color-
   black.png, used in light mode). Pages render BOTH <img> tags side
   by side and the right one is shown via display rules below.

   `!important` is required because:
     • .hub-brand img { display: block } in this same file is more
       specific than .pp-logo-* (single class).
     • Property Clock's <img> carries inline style="display:block".
   Using !important on a binary visibility flag is the cleanest fix. */
.pp-logo-dark{display:block !important}
.pp-logo-light{display:none !important}
[data-theme="light"] .pp-logo-dark{display:none !important}
[data-theme="light"] .pp-logo-light{display:block !important}
/* Both logos render inside a fixed 5:1 box (same as the white PNG's
   native aspect). object-fit:contain scales the wider black PNG
   (6.2:1) down to fit, with vertical padding either side, while
   the white PNG fills the box exactly. Result: identical layout
   boxes across both themes — no flex-sibling shift on toggle. */
.pp-logo-dark, .pp-logo-light{ object-fit:contain }

/* ═══ ROTATE-TO-LANDSCAPE NOTICE ═══
   Property Clock + Runway v Demand are wide-aspect tools (1700px /
   1120px max-width charts) that don't fit a phone in portrait. The
   .rotate-notice is a fixed overlay that appears only when the
   viewport is narrow AND in portrait orientation; rotating the
   phone hides it via the @media query so the tool is immediately
   usable. Each tool drops `<div class="rotate-notice">…</div>`
   into its body markup. */
.rotate-notice{
  display:none;position:fixed;inset:0;z-index:99999;
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#082f49 100%);
  align-items:center;justify-content:center;
  padding:32px;text-align:center;
  color:#fff;font-family:'Montserrat',sans-serif;
}
[data-theme="light"] .rotate-notice{
  background:linear-gradient(135deg,#f0f9ff 0%,#e0e7ff 50%,#cffafe 100%);
  color:#1a2236;
}
.rotate-notice-inner{max-width:320px}
.rotate-notice svg{
  width:88px;height:88px;
  color:var(--accent,#00b6cb);
  margin:0 auto 22px;display:block;
  /* Animate the phone icon — rotates 90° forward and back so the
     user immediately reads it as "do this with your device". */
  animation:rotate-notice-hint 2.6s cubic-bezier(0.65,0,0.35,1) infinite;
  transform-origin:center;
}
@keyframes rotate-notice-hint{
  0%,15%,100%{transform:rotate(0deg)}
  50%,65%    {transform:rotate(-90deg)}
}
@media (prefers-reduced-motion: reduce){
  .rotate-notice svg{animation:none;transform:rotate(-90deg)}
}
.rotate-notice h2{
  font-size:16px;font-weight:800;
  letter-spacing:2.5px;text-transform:uppercase;
  margin:0 0 10px;line-height:1.25;
}
.rotate-notice h2 em{color:var(--accent,#00b6cb);font-style:normal}
.rotate-notice p{
  font-size:13px;line-height:1.55;
  opacity:0.72;margin:0;font-weight:500;
}

/* Show only on narrow viewports AND in portrait. The width gate
   stops the notice from appearing on iPad portrait or odd small-
   landscape windows. */
@media (max-width: 900px) and (orientation: portrait){
  .rotate-notice{display:flex}
}

/* ═══ THEME TOGGLE BUTTON ═══
   Round 36px (28px in hub topbar) icon button. Shows the icon of the
   mode you'd switch TO so the icon doubles as a hint:
     dark mode active → sun icon visible (click to go light)
     light mode active → moon icon visible (click to go dark)
   Lives in the hub topbar and in every tool's back-button area. */
.pp-theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:transparent;border:1.5px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72);cursor:pointer;
  transition:all .18s ease;flex-shrink:0;padding:0;
  font-family:inherit;
}
.pp-theme-toggle:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(0,182,203,.08);
  transform:translateY(-1px);
}
.pp-theme-toggle svg{width:16px;height:16px;display:block}
.pp-theme-toggle .pp-sun{display:block}
.pp-theme-toggle .pp-moon{display:none}
.pp-theme-toggle.is-hub{width:32px;height:32px;border-width:1px}
.pp-theme-toggle.is-hub svg{width:14px;height:14px}

/* Login-screen variant — floating top-right button so first-time
   visitors can flip the theme before signing in. z-index:2 sits
   above the drifting orbs (z-index:0) and the login box's
   stacking context. Slightly stronger backdrop-blur + bg so the
   button reads on either the dark or the cyan-orb-tinted light bg. */
.pp-theme-toggle.pp-theme-toggle-login{
  position:absolute;top:20px;right:20px;z-index:2;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
[data-theme="light"] .pp-theme-toggle.pp-theme-toggle-login{
  background:rgba(255,255,255,0.55);
  border-color:rgba(31,40,63,.20);
}
[data-theme="light"] .pp-theme-toggle.pp-theme-toggle-login:hover{
  background:rgba(255,255,255,0.85);
}

/* ═══ LIGHT-MODE OVERRIDES ═══
   Toggled via [data-theme="light"] on the <html> element by
   shared/theme.js. The brand accent (--accent #00b6cb) is intentionally
   identical across modes — the cyan reads well on both backgrounds.
   Charts and report pages that are already light-on-light (Property
   Clock pages, Online Reports .page surfaces, Runway chart wrap) are
   not touched here; only the surrounding "chrome" surfaces. */
[data-theme="light"]{
  --bg:#f4f6fa;
  --panel:#ffffff;
  --panel2:#eef1f7;
  /* Bumped from .12 → .18 so borders / chart cards / control outlines
     don't dissolve into the light canvas. Dark mode keeps its rgba-
     white .10 border which already reads on the dark surfaces. */
  --border:rgba(31,40,63,0.18);
  --text:#1a2236;
  --muted:rgba(31,40,63,0.58);
}

/* Login screen — switch to the light keyframe set. The bg + orbs
   now ride the pastel/saturated palette through the same 3-phase
   cycle (sky → fuchsia → teal). Bg gradient definition stays the
   same; only the keyframe target changes. */
[data-theme="light"] #loginScreen{
  animation: pp-cycle-light 42s ease-in-out infinite;
}
/* Bump orb opacity in light mode so the saturated orb tints read
   on the pale bg without being washed out. */
[data-theme="light"] #loginScreen::before{ opacity: 0.55; }
[data-theme="light"] #loginScreen::after { opacity: 0.50; }
/* Iridescent glass login box — replaces flat-white. The triple-stop
   gradient (white → soft cyan → soft violet) mirrors the bg's cyan/
   violet/pink orb cycle, so the box reads as the "lens" the orbs
   are passing through. backdrop-filter blur+saturate lets the
   orb hues bleed through subtly. Layered shadows + inset rim
   highlights give it depth — top edge picks up bright white,
   inner ring catches a cyan glow. */
[data-theme="light"] .login-box{
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.86) 0%,
      rgba(224,237,250,0.78) 45%,
      rgba(232,224,250,0.80) 100%);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border:1px solid rgba(0,182,203,0.42);
  box-shadow:
    0 24px 60px rgba(31,40,63,0.18),
    0 6px 18px rgba(31,40,63,0.08),
    0 0 0 1px rgba(0,182,203,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,182,203,0.12);
}
[data-theme="light"] .login-title{color:#1a2236}
[data-theme="light"] .login-field input,
[data-theme="light"] .otp-inputs input{
  background:rgba(31,40,63,.04);
  border-color:rgba(31,40,63,.14);
  color:#1a2236;
}
[data-theme="light"] .login-field input:focus,
[data-theme="light"] .otp-inputs input:focus{
  background:rgba(0,182,203,.06);
  border-color:var(--accent);
}
[data-theme="light"] .login-field input::placeholder{color:rgba(31,40,63,.35)}
[data-theme="light"] .login-check{
  background:rgba(31,40,63,.04);
  border-color:rgba(31,40,63,.10);
}
[data-theme="light"] .login-check:hover{
  background:rgba(0,182,203,.06);
  border-color:rgba(0,182,203,.45);
}
[data-theme="light"] .login-check input[type="checkbox"]{border-color:rgba(31,40,63,.32)}
[data-theme="light"] .login-check-title{color:#1a2236}
[data-theme="light"] .login-check-sub{color:rgba(31,40,63,.55)}
[data-theme="light"] .login-notice{color:rgba(31,40,63,.85)}

/* Welcome overlay — !important needed because the markup carries
   inline `style="background: linear-gradient(...)"` and inline rules
   beat normal stylesheet rules. */
[data-theme="light"] #welcomeOverlay{
  background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(0,182,203,.12) 0%,transparent 70%),
             linear-gradient(135deg,#f4f6fa 0%,#e3e9f3 50%,#dde6f1 100%) !important;
}
[data-theme="light"] #welcomeMsg{
  color:#1a2236 !important;
  text-shadow:0 4px 32px rgba(0,182,203,.25);
}

/* Hub — switch to the light keyframe set; bg gradient definition
   already references --pp-bg-* vars so it just picks up the new
   palette. */
[data-theme="light"] #mainPage{
  animation: pp-cycle-light 50s ease-in-out infinite;
}
[data-theme="light"] #mainPage::before{ opacity: 0.42; }
[data-theme="light"] #mainPage::after { opacity: 0.38; }
[data-theme="light"] .hub-topbar{
  background:rgba(255,255,255,.65);
  border-bottom-color:rgba(0,182,203,.18);
}
[data-theme="light"] .hub-brand img{filter:drop-shadow(0 2px 12px rgba(0,182,203,.18))}
[data-theme="light"] .hub-identity-pill{
  background:rgba(0,182,203,.08);
  border-color:rgba(0,182,203,.32);
  color:rgba(31,40,63,.75);
}
[data-theme="light"] .hub-hero-title{color:#1a2236}
[data-theme="light"] .hub-hero-subtitle{color:rgba(31,40,63,.62)}
/* Translucent + backdrop-blur so the drifting orbs behind the hub
   bleed their tint into the card. Matches the dark-mode behaviour
   where rgba(255,255,255,0.04) lets the orbs glow through. saturate
   on the backdrop boosts the cyan/fuchsia/violet hues as they pass
   so the colour shift reads even on the muted card surface. */
[data-theme="light"] .hub-tool-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.62) 0%,rgba(250,251,253,0.50) 100%);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-color:rgba(0,182,203,.30);
  box-shadow:0 8px 22px rgba(31,40,63,.10),0 2px 6px rgba(31,40,63,.05),inset 0 1px 0 rgba(255,255,255,.7);
}
[data-theme="light"] .hub-tool-card:hover{
  background:linear-gradient(135deg,rgba(255,255,255,0.72) 0%,rgba(250,251,253,0.60) 100%);
  border-color:rgba(0,182,203,.7);
  box-shadow:0 18px 50px rgba(0,182,203,.18),0 4px 12px rgba(31,40,63,.08),inset 0 1px 0 rgba(255,255,255,.85);
}
[data-theme="light"] .hub-tool-icon{
  background:linear-gradient(135deg,rgba(0,182,203,.16) 0%,rgba(0,182,203,.05) 100%);
  border-color:rgba(0,182,203,.30);
}
[data-theme="light"] .hub-tool-title{color:#1a2236}
[data-theme="light"] .hub-tool-desc{color:rgba(31,40,63,.65)}
[data-theme="light"] .hub-stats-title{color:rgba(31,40,63,.45)}
/* Stat tiles — solid translucent bg, no backdrop-filter. The
   bigger tool cards keep backdrop-filter (where the orb tint really
   reads); these smaller tiles don't justify the GPU cost. */
[data-theme="light"] .hub-stat{
  background:linear-gradient(135deg,rgba(255,255,255,0.78) 0%,rgba(250,251,253,0.72) 100%);
  border-color:rgba(0,182,203,.24);
  box-shadow:0 4px 12px rgba(31,40,63,.05);
}
[data-theme="light"] .hub-stat:hover{
  background:linear-gradient(135deg,rgba(255,255,255,0.88) 0%,rgba(250,251,253,0.82) 100%);
  border-color:rgba(0,182,203,.45);
  box-shadow:0 8px 18px rgba(31,40,63,.08);
}
[data-theme="light"] .hub-stat-value{color:#1a2236}
[data-theme="light"] .hub-stat-label{color:rgba(31,40,63,.50)}
[data-theme="light"] .hub-footer{
  border-top-color:rgba(0,182,203,.14);
  color:rgba(31,40,63,.45);
}

/* Pending modal */
[data-theme="light"] .pending-modal{background:rgba(31,40,63,.45)}
[data-theme="light"] .pending-modal-inner{
  background:linear-gradient(135deg,#ffffff 0%,#f8fafd 100%);
  border-color:rgba(0,182,203,.30);
  color:#1a2236;
  box-shadow:0 20px 80px rgba(31,40,63,.20),inset 0 1px 0 rgba(255,255,255,.6);
}
[data-theme="light"] .pending-modal-close{
  border-color:rgba(31,40,63,.14);
  color:rgba(31,40,63,.65);
}
[data-theme="light"] .pending-modal-close:hover{
  background:rgba(31,40,63,.06);color:#1a2236;
  border-color:rgba(0,182,203,.5);
}
[data-theme="light"] .pending-modal-title{color:#1a2236}
[data-theme="light"] .pending-modal-sub{color:rgba(31,40,63,.55)}
[data-theme="light"] .pending-row{
  background:rgba(31,40,63,.03);
  border-color:rgba(31,40,63,.08);
}
[data-theme="light"] .pending-row-name{color:#1a2236}
[data-theme="light"] .pending-row-meta{color:rgba(31,40,63,.55)}
[data-theme="light"] .pending-modal-empty-text{color:rgba(31,40,63,.65)}
[data-theme="light"] .pending-modal-footer{border-top-color:rgba(31,40,63,.06)}
[data-theme="light"] .pending-modal-refresh{
  border-color:rgba(31,40,63,.16);
  color:rgba(31,40,63,.72);
}
[data-theme="light"] .pending-modal-refresh:hover{
  background:rgba(0,182,203,.10);color:#1a2236;
  border-color:rgba(0,182,203,.5);
}
[data-theme="light"] .hub-pending-pill{
  color:#7a5400;
  background:rgba(255,184,0,.14);
  border-color:rgba(255,184,0,.50);
}

/* Tier switcher */
[data-theme="light"] .ts-toggle{
  background:#ffffff;color:#1a2236;border-color:#00b6cb;
  box-shadow:0 6px 24px rgba(31,40,63,.15);
}
[data-theme="light"] .ts-toggle:hover{
  background:#f0f8fa;
  box-shadow:0 8px 28px rgba(31,40,63,.20);
}

/* Back button + back btn wrap */
[data-theme="light"] .back-btn-wrap{
  background:#ffffff;
  border-bottom-color:rgba(0,182,203,.20);
  box-shadow:0 1px 0 rgba(31,40,63,.04);
}
[data-theme="light"] .back-btn:hover{background:rgba(0,182,203,.10)}

/* Logout button */
[data-theme="light"] .logout-btn{
  color:rgba(31,40,63,.55);
  border-color:rgba(31,40,63,.14);
}
[data-theme="light"] .logout-btn:hover{
  color:rgba(31,40,63,.85);
  border-color:rgba(31,40,63,.40);
}

/* Theme toggle in light mode */
[data-theme="light"] .pp-theme-toggle{
  border-color:rgba(31,40,63,.18);
  color:rgba(31,40,63,.62);
}
[data-theme="light"] .pp-theme-toggle:hover{
  border-color:var(--accent);color:var(--accent);
  background:rgba(0,182,203,.10);
}
[data-theme="light"] .pp-theme-toggle .pp-sun{display:none}
[data-theme="light"] .pp-theme-toggle .pp-moon{display:block}