/* BREAKOUT CONSTRAINTS FOR SANDBOXED CODES */
:root {
  /* GLOBAL NAVIGATION SIZES */
  --nav-brand-size: 18px;       /* Top-Left BRAND TEXT size */
  --nav-item-size: 13px;        /* Top-Center MENU LINK text size */
  --nav-account-size: 12px;     /* Top-Right ACCOUNT STATUS text size */
  
  /* CORE INTERFACE GRAPHICS SIZES */
  --card-header-size: 26px;     /* Main view H2 HEADINGS size */
  --card-subheading-size: 12px; /* Small system hash/subheading text size */
  --card-body-size: 14px;       /* Default text streams, inputs, and button size */
  
  /* ADDITIONAL SPECIALTY TEXT SIZES */
  --card-select-size: 14px;
  --card-button-size: 14px;
  --card-input-size: 14px;
   --dropdown-label-size: 10px;  /* Micro-label string headers above select cells */
  --error-title-size: 24px;     /* Red industrial warning title lines */
  --error-body-size: 18px;      /* Error stack text traces and code streams */
  --error-btn-size: 18px;       /* Red 'CLOSE_OVERRIDE_SHELL' dismiss trigger text */
  --error-body-secondary-size: 12px;
  
   /* LASER DIVIDER GEOMETRY CONSTRAINTS */
  --divider-width: 85%;            /* Horizontal expanse spread percentage across the card frame */
  --divider-max-width: 1600px;     /* Maximum absolute pixel width lock for large displays */
  --divider-thickness: 2px;        /* Vertical weight stroke thickness for the dashed line */
  --divider-glow-radius: 5px;      /* Neon localized drop-shadow blur range behind the dash lines */
   --divider-error-thickness: 2px; 
  
  /* GEOMETRIC ASSET SIZE CONSTRAINTS */
  --nav-avatar-size: 36px; 
  --nav-icon-size: 24px;
  --nav-logo-box-size: 32px;  
  --nav-logo-img-scale: 100%;
  --home-logo-max-width: 450px;  
  --home-logo-max-height: 140px;
  
   /* MICRO-COMPONENT SPECIFIC GEOMETRY CONSTRAINTS */
  --checkbox-box-size: 16px;       /* Master width & height for the custom square toggle box */
  --checkbox-text-size: 12px;      /* Typography size for compliance validation terms strings */
  --loading-spinner-size: 40px;    /* Master boundary frame diameter width & height for processing rings */
  
  /* EMERGENCY OVERLAY GEOMETRY CONSTRAINTS */
  --error-box-width: 80%;    /* Master scale footprint width for the failure panel window */
  --error-box-height: 60%;   /* Master scale footprint height for the failure panel window */
  --error-btn-width: 100%;   /* Horizontal spread limits for the red dismiss action trigger button */
  
  /* FORM COMPONENT GEOMETRY CONSTRAINTS */
  --form-element-height: 44px;      /* Master height for inputs, dropdowns, and textareas rows */
  --form-element-padding: 10px 16px; /* Master padding for inside cushion alignments */
  --form-button-padding: 12px 28px;  /* Master action padding for button breathing room */
  --form-element-max-width: 500px;   /* Master horizontal boundary line limit for forms */
  --form-dropdown-row-max-width: 950px;
  
  
  /* Retain your existing global theme parameters */
  --neon-cyan: rgba(105, 235, 255, 0.85);
  --neon-blue: rgba(30, 90, 180, 0.4);
  --glass-bg: rgba(3, 15, 35, 0.4); 
  --glass-border: rgba(105, 235, 255, 0.2);
  --font-cyber: 'Courier New', Courier, monospace;
}




html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  background-color: #030a16 !important; 
  
  /* CHANGED: Allowed the parent page to scroll naturally when elements expand */
  overflow-y: auto !important; 
  overflow-x: hidden !important;
}

/* Match fog canvas base gray so viewport side gutters never flash dark blue */
html:has(body.signin-free),
body.signin-free {
  background-color: #3f464d !important;
}

/* HIGH-PRIORITY VIEWPORT ESCAPE VECTOR */
#tronCanvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 1 !important;
  display: block !important;
}

/* GLOBAL THEME PARAMETERS */
:root {
  --neon-cyan: rgba(105, 235, 255, 0.85);
  --neon-blue: rgba(30, 90, 180, 0.4);
  --glass-bg: rgba(3, 15, 35, 0.4); 
  --glass-border: rgba(105, 235, 255, 0.2);
  --font-cyber: 'Courier New', Courier, monospace;
}

/* NAVIGATION STRUCTURE BLOCK */
.cyber-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 60px;
  z-index: 10;
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 0 40px;
  box-sizing: border-box;
  font-family: var(--font-cyber);
  background: linear-gradient(to bottom, rgba(3, 10, 22, 0.95) 0%, rgba(3, 10, 22, 0.0) 100%);
 box-shadow: 0 4px 20px rgba(105, 235, 255, 0.99); 
  backdrop-filter: blur(2px);
}

/* CLICKABLE BRAND LINK & HOVER MATRIX */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #a0c0e0; /* Starts off unified muted color */
  font-weight: bold;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  z-index: 11;
}

.nav-brand:hover {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan);
}

.nav-brand:hover .logo-text,
.nav-links .nav-item:hover,
.nav-account:hover .account-name {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 10px var(--neon-cyan) !important;
}

/* Forces the brand logo image box border and glow to activate symmetrically on hover */
.nav-brand:hover .nav-logo-graphic {
  
  box-shadow: 0 0 12px var(--neon-cyan) !important;
  filter: drop-shadow(0 0 4px var(--neon-cyan)) !important;
}

.logo-glyph {
  font-size: 16px;
}

/* PERFECTLY CENTERED NAVIGATION MATRIX */
.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
  z-index: 11;
}

.nav-links .nav-item {
  color: #a0c0e0;
  text-decoration: none;
 font-size: var(--nav-item-size) !important;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  position: relative;
  padding: 4px 0;
}

.nav-links .nav-item:hover, .nav-links .nav-item.active {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan);
}

/* RIGHT ALIGNED MINIMAL ACCOUNT IMAGE NODE */
.nav-account {
  text-decoration: none;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: flex-end;
   gap: 12px !important; 
}

.account-avatar {
  width: var(--nav-avatar-size) !important; 
  height: var(--nav-avatar-size) !important; 
  border-radius: 50%;
 
  background: rgba(105, 235, 255, 0.05);
  box-shadow: 0 0 8px rgba(105, 235, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #a0c0e0; /* Starts off unified muted color */
  transition: all 0.3s ease;
}

.account-avatar svg {
  width: var(--nav-icon-size) !important;
  height: var(--nav-icon-size) !important;
}

.account-name {
  font-size: var(--nav-account-size) !important;
  color: #a0c0e0; /* Starts off unified muted color */
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
}

.nav-account:hover .account-name {
  color: var(--neon-cyan); /* Explicitly switches color to match center hover */
  text-shadow: 0 0 10px var(--neon-cyan);
}

/* MATCHES CENTER EMBEDDED TEXT HOVER RESPONSIVENESS */
.nav-account:hover .account-avatar {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 12px var(--neon-cyan);
  filter: drop-shadow(0 0 4px var(--neon-cyan));
}

.nav-account:hover .account-avatar.user-logged-out {
  border-color: var(--neon-cyan) !important;
  color: var(--neon-cyan);
  box-shadow: 0 0 12px var(--neon-cyan) !important;
  filter: drop-shadow(0 0 4px var(--neon-cyan)) !important;
}

.nav-account:hover .account-avatar.user-logged-out svg {
  color: var(--neon-cyan) !important;
}

/* ALIGNMENT AND EXTENDED BOUNDS */
.interface-container {
  position: relative;
  z-index: 3;
  width: 100vw;
  
  /* CHANGED: Removed min-height restrictions to let it expand down with text content */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  background: transparent !important;
  padding-top: 85px; 
  padding-bottom: 40px; /* Gives visual breathing room at the bottom of the page */
}

/* --- CUSTOM LOGO SPECIFICATIONS --- */
.cyber-nav .nav-brand {
  /* Isolate your custom sizing, styles, and font sizes here */
  font-size: var(--nav-brand-size) !important;
  color: #a0c0e0 !important;
  letter-spacing: 3px;
}

/* Isolate your brand-specific neon text glow when hovering */
.cyber-nav .nav-brand:hover {
  color: var(--neon-cyan) !important; 
  text-shadow: 0 0 15px rgba(255, 190, 11, 0.85) !important;
}

.cyber-nav .nav-brand:hover .logo-text {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 10px var(--neon-cyan) !important;
}


/* EXTENDED ACTIVE STATE RETENTION MATRIX */
/* Forces brand, items, and account to stay highlighted when they possess the active class */
.cyber-nav .nav-link.active,
.cyber-nav .nav-link.active .logo-glyph,
.cyber-nav .nav-link.active .logo-text,
.cyber-nav .nav-link.active .account-name {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
}

/* Forces the SVG profile bubble to hold its active state properties */
.cyber-nav .nav-link.active .account-avatar {
  
  color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px var(--neon-cyan) !important;
  filter: drop-shadow(0 0 4px var(--neon-cyan)) !important;
}

/* NAV LOGO IMAGE FRAME WRAPPER */
.nav-logo-img-wrapper {
  width: var(--nav-logo-box-size) !important;
  height: var(--nav-logo-box-size) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(160, 192, 224, 0.25) !important;
  transition: all 0.3s ease-out !important;
}

.nav-logo-graphic {
  width: var(--nav-logo-img-scale) !important;
  height: var(--nav-logo-img-scale) !important;
  object-fit: contain; /* Prevents your brand icon from stretching disproportionately */
  
  background: rgba(105, 235, 255, 0.05);
  box-shadow: 0 0 8px rgba(105, 235, 255, 0.1) !important;
  transition: all 0.3s ease;
}

/* --- ACTIVE & HOVER HIGH-TECH GLOW LINKS --- */
/* Forces the brand logo image border and glow to activate when hovered */
.nav-brand:hover .nav-logo-graphic {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px var(--neon-cyan) !important;
  filter: drop-shadow(0 0 4px var(--neon-cyan)) !important;
}





/* Extended Active Retention Matrix from earlier—now handles the new image selector */
.cyber-nav .nav-link.active .nav-logo-graphic {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 12px var(--neon-cyan) !important;
  filter: drop-shadow(0 0 4px var(--neon-cyan)) !important;
}

/* --- CENTRAL THEME REGISTRY (SOLID HARDWARE PATHS) --- */

/* DEFAULT FALLBACK / STARTUP STATE */
.holo-card {
  --active-cyan: #69ebff;
  --active-blue: #0070f3;
  --active-shadow: #1e5ab4; /* Solid Neon Cyber Blue */
  --active-ambient: rgba(105, 235, 255, 0.12);
   --card-global-text-color: #e0f5ff;

  
  background: var(--glass-bg) !important;
  
}

/* --- ISOLATED AVATAR PICTURE STATES COLOR MAP --- */

/* BASE CIRCLE: LOGGED OUT STATE */
.account-avatar.user-logged-out {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(105, 235, 255, 0.1) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* BASE ICON: LOGGED OUT STATE (Muted Technical Steel Blue) */
.account-avatar.user-logged-out svg {
  color: #728b9e !important;
  transition: color 0.3s ease;
}


/* --- CRITICAL BUGFIX OVERRIDES FOR THE LOGGED IN PICTURE AND CIRCLE --- */

/* FORCES THE INNER ICON TO BE GREEN (Bypasses all global hover and active rules) */
.account-avatar.user-logged-in svg,
.nav-account:hover .account-avatar.user-logged-in svg,
.cyber-nav .nav-link.active .account-avatar.user-logged-in svg {
  color: #39ff14 !important; 
  filter: drop-shadow(0 0 3px #39ff14) !important;
  transition: color 0.3s ease;
  
}

/* FORCES THE OUTER CIRCLE HOUSING TO BE GREEN (Blocks global hover/active cyan locks) */
.account-avatar.user-logged-in,
.nav-account:hover .account-avatar.user-logged-in,
.cyber-nav .nav-link.active .account-avatar.user-logged-in {

  background: rgba(57, 255, 20, 0.08) !important;
  box-shadow: 0 0 15px #39ff14 !important;
  filter: drop-shadow(0 0 4px #39ff14) !important;
}



/* HOME THEME */
.holo-card[data-theme="home"] {
  --active-cyan: #69ebff !important;
  --active-blue: #0070f3 !important;
  --active-shadow: #1F51FF !important; /* Solid Neon Cyber Blue */
  --active-ambient: rgba(105, 235, 255, 0.15) !important;
  
  background: var(--glass-bg) !important;
}

/* GENERATOR THEME */
.holo-card[data-theme="generator"] {
  --active-cyan: #39ff14 !important; 
  --active-blue: #064e16 !important;
  --active-shadow: #19800a !important; /* Solid Neon Toxic Green */
  --active-ambient: rgba(57, 255, 20, 0.15) !important;
  
   background: rgba(3, 22, 10, 0.45) !important;
}

/* TRANSPOSER THEME */
.holo-card[data-theme="transposer"] {
  --active-cyan: #ff2d55 !important; 
  --active-blue: #5a0a14 !important;
  --active-shadow: #b41332 !important; /* Solid Neon Alert Red */
  --active-ambient: rgba(255, 45, 85, 0.12) !important;
  
  background: rgba(20, 3, 7, 0.45) !important;
}

/* RESOURCES THEME */
.holo-card[data-theme="resources"] {
  --active-cyan: #e8ecf1 !important; 
  --active-blue: #4a525d !important;
  --active-shadow: #C5D1E0 !important; /* Solid Neon Amethyst Purple */
  --active-ambient: rgba(232, 236, 241, 0.18) !important;
  
  background: rgba(14, 16, 19, 0.65) !important;
}

/* ACCOUNT THEME */
.holo-card[data-theme="account"] {
  --active-cyan: #ffbe0b !important; 
  --active-blue: #5a3c0a !important;
  --active-shadow: #b48207 !important; /* Solid Neon Warning Amber */
  --active-ambient: rgba(255, 190, 11, 0.12) !important;
  
   background: rgba(22, 15, 3, 0.45) !important;
}

.holo-card[data-theme="error"] {
  --active-cyan: #ff003c !important;    /* Ultra-bright warning scarlet */
  --active-blue: #7a001e !important;    /* Deep arterial red bleed */
  --active-shadow: #b3002d !important;  /* High-energy danger core glow */
  --active-ambient: rgba(255, 0, 60, 0.15) !important; /* Volumetric crimson fog */
  border: none !important;
  outline: none !important;
  
  /* Dedicated distinct card background color for errors */
  background: rgba(18, 2, 6, 0.85) !important;
}

/* Ensure headings inside the error theme adapt to the scarlet warning light */
.holo-card[data-theme="error"] h2 {
  text-shadow: 0 0 15px #ff003c !important;
}

.holo-card {
  /* Initialize theme fallback colors */
  --active-cyan: #69ebff !important;
  --active-blue: #0070f3 !important;
  --active-shadow: #1F51FF !important; /* Solid Neon Cyber Blue */
  --active-ambient: rgba(105, 235, 255, 0.15) !important;

  
  /* Layout and dimensions matching your sandbox specs */
  position: relative;
  width: 97vw; 
  min-height: 82vh; 
  height: auto; 
  max-width: 1920px; 
  background: var(--glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 4px;
  box-sizing: border-box;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-cyber);
  color: #e0f5ff;
  text-align: center !important;

  /* Smooth color morph transitions on nav clicks */
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
  
  /* FORCE EXTRA BOUNDS OUTLINES TO STAY COMPLETELY INVISIBLE */
  border: 1px solid transparent !important; 
  outline: none !important;

  /* --- FIXED GLOW ARRAYS (Removed the solid 1px border shadow ring) --- */
  box-shadow: 
    0 0 25px var(--active-blue),          /* Internal radiant glass bleed */
    0 0 30px 4px var(--active-shadow),         /* High-energy close proximity aurora */
    0 0 70px 15px var(--active-ambient) !important; /* Atmospheric ambient fog field */
}

/* --- 3. RE-BIND THE THEME SPECIFIC BRACKET GLOW COLORS --- */
.corner-bracket {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid transparent;
  transition: border-color 0.4s ease; /* Blends colors smoothly on click */
}

/* Explicitly bind individual corner lines to use the active theme color */
/*.top-left     { top: -1px; left: -1px; border-top-color: var(--active-cyan) !important; border-left-color: var(--active-cyan) !important; }
.top-right    { top: -1px; right: -1px; border-top-color: var(--active-cyan) !important; border-right-color: var(--active-cyan) !important; }
.bottom-left  { bottom: -1px; left: -1px; border-bottom-color: var(--active-cyan) !important; border-left-color: var(--active-cyan) !important; }
.bottom-right { bottom: -1px; right: -1px; border-bottom-color: var(--active-cyan) !important; border-right-color: var(--active-cyan) !important; }*/

.holo-card h2,
.holo-card p,
.data-stream p,
.card-text,
.card-text-muted {
  color: var(--card-global-text-color) !important;
}

.card-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Aligns nested block items to center */
  justify-content: center;
}

/* CONTENT COMPONENT ELEMENT FIELDS */
.holo-card h2 {
  font-size: var(--card-header-size) !important;
  margin: 0 0 5px 0;
  color: #ffffff;
  letter-spacing: 3px;
  transition: text-shadow 0.4s ease;
  text-shadow: 0 0 15px var(--active-cyan);
}

.accent-text {
  transition: color 0.4s ease, text-shadow 0.4s ease;
  color: var(--active-cyan) !important;
  text-shadow: 0 0 10px var(--active-shadow);
}





.system-hash {
  font-size: var(--card-subheading-size) !important;
  font-size: 12px;
  color: var(--card-global-text-color);
  margin: 0;
}

/* UNIFIED BACKGROUND INTERIOR BLOCK */
.card-body {
  flex-grow: 1;
  margin: 25px 0;
  background: transparent !important; 
  border: none !important;             
  padding: 20px 0;                    
  
  /* CHANGED: Stripped out layout constraints to kill inner scrolling entirely */
  overflow-y: visible !important; 
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* CLEAN UNIFIED BULLET COLORS */
.data-stream p {
  font-size: var(--card-body-size) !important;
  margin: 8px 0;
  font-size: 13px;
  color: var(--card-global-text-color); 
  line-height: 1.5;
  text-align: center !important;
}


/* --- DATA PANEL STATE MANAGER --- */
.panel-content {
  width: 100%;
  animation: panelFadeIn 0.4s ease forwards;
}

/* Visibility Toggle Utility Class */
.hidden {
  display: none !important;
}

/* Highlight style for the custom title tracker text */
.accent-text {
  color: #4deeea !important;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(77, 238, 234, 0.4);
}

/* Smooth transition when swapping content windows */
@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- CRITICAL ERROR SYSTEM OVERLAY STYLE MAP --- */
.error-box {
 
  background: rgba(55, 6, 12, 0.01) !important;
  border-radius: 2px;
   padding: 20px 25px 30px 25px;
  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 25px var(--active-blue);
  animation: none;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
 width: var(--error-box-width) !important;
  height: var(--error-box-height) !important;
  box-sizing: border-box;
}

.error-stack-red {
  font-size: var(--error-body-secondary-size) !important;
  color: #ff2d55 !important;
  line-height: 1.5;
  margin: 10px 0 20px 0;
  text-align: left;
}

.error-text-bright-red {
  font-size: var(--error-body-size) !important;
  color: #ff2d55 !important; /* Explicitly forces bright red */
  text-shadow: 0 0 8px rgba(255, 45, 85, 0.4); /* Subtle red neon glow field */
  line-height: 1.5;
  margin: 10px 0 20px 0;
  text-align: center;
  font-family: "Tomorrow", sans-serif;
  padding-top: 20px;
   padding-bottom: 20px;
}

.error-header {
  display: flex;
flex-direction: column; /* 🌟 Stacks the icon on top of the text for a balanced cyber layout */
  align-items: center;    /* 🌟 Centers everything horizontally */
  justify-content: center; /* 🌟 Centers everything vertically */
  gap: 10px;
  margin-bottom: 15px;
  border-bottom: var(--divider-error-thickness) dashed rgba(255, 45, 85, 0.45) !important;
  padding-bottom: 30px;
}

.warning-glyph {
  color: #ff2d55;
  text-shadow: 0 0 10px #ff2d55;
  font-size: 22px;
}

.error-title {
  color: #ff2d55;
  font-weight: bold;
  letter-spacing: 1.5px;
  font-size: var(--error-title-size) !important;
}

.error-hash {
  font-size: 15px;
  color: #8b2535;
  margin-bottom: 10px;
}

.error-footer {
  width: 100%;
  
  padding-bottom: 20px;           /* Guarantees a minimum 20px clearance beneath code readouts */
}

.error-terminal-readout {
  background: rgba(40, 40, 40, 0.85) !important;
  border: 1px solid rgba(255, 45, 85, 0.2);
  padding: 15px;
  max-height: 180px;
  overflow-y: auto;
  font-size: var(--error-body-secondary-size) !important;
  color: #ff8095;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* CYBERPUNK DISMISS ACTION BUTTON BUTTON */
.cyber-btn-alert {
  /* FIXED: Stripped browser styling blocks preventing shadow painting */
  appearance: none !important;
  -webkit-appearance: none !important;
  
  background: rgba(139, 37, 53, 0.2) !important;
  border: none !important;
  outline: none !important;
   min-height: var(--form-element-height) !important;
  color: #ff2d55 !important;
  font-family: var(--font-cyber);
  letter-spacing: 2px;
  padding: var(--form-button-padding) !important;
  cursor: pointer;
  width: var(--error-btn-width) !important;
   font-size: var(--error-btn-size) !important;
  
  /* FIXED: Supplied 0 0 positional offsets so compiler renders layers cleanly */
  box-shadow: 
    inset 0 0 8px rgba(255, 0, 60, 0.75),
    0 0 15px rgba(255, 0, 60, 0.75) !important;
    
  transition: all 0.2s ease;
}

.cyber-btn-alert:hover {
  background: #ff2d55;
 color: #8a0016 !important; 
  box-shadow: 0 0 18px rgba(255, 45, 85, 0.9);
  
}

@keyframes errorPulse {
  0%, 100% { 
    border-color: var(--active-shadow); 
    box-shadow: inset 0 0 15px var(--active-ambient), 0 0 20px var(--active-blue); 
  }
  50% { 
    border-color: var(--active-cyan); 
    box-shadow: inset 0 0 25px var(--active-ambient), 0 0 35px var(--active-cyan); 
  }
}

/* ACCOUNT INTERIOR SUBSECTION MANAGER */
.account-dashboard-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.account-sub-panel {
  width: 100%;
  animation: panelFadeIn 0.3s ease-out forwards;
}

/* FORCE VISIBILITY PROPAGATION ON NESTED SUBSECTIONS */
.account-sub-panel:not(.hidden),
.account-sub-panel:not(.hidden) .signup-form-flow,
.account-sub-panel:not(.hidden) .data-stream {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevents buttons from collapsing vertically inside the action stack wrapper */
.vertical-action-stack, .cyber-btn-group, .form-action-wrapper {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* CYBER BUTTON SELECTION ARRANGEMENT */
.cyber-btn-group {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  justify-content: center;
}

.cyber-btn-interactive {
  background: rgba(105, 235, 255, 0.03);
  padding: var(--form-button-padding) !important;
  color: #a0c0e0;
  font-family: var(--font-cyber);
  font-size: var(--card-button-size) !important;
  letter-spacing: 1.5px;
min-height: var(--form-element-height) !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cyber-btn-interactive:hover {
  background: rgba(255, 190, 11, 0.1);
  border-color: var(--active-cyan);
  color: #ffffff;
  box-shadow: 0 0 15px var(--active-ambient);
}


/* SIGNUP INPUT SPECIFICATION */
.signup-form-flow {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers form boxes, textareas, and labels horizontally */
}


.input-field-wrapper {
  margin: 12px auto 0 auto;
  width: 100%;
  max-width: var(--form-element-max-width) !important;
}

.cyber-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 190, 11, 0.3);
  height: var(--form-element-height) !important;
  padding: var(--form-element-padding) !important;
  font-family: var(--font-cyber);
  font-size: var(--card-input-size) !important;
  color: #ffffff;
  box-sizing: border-box;
  outline: none;
  transition: all 0.3s ease;
  text-align: center;
}

.cyber-input:focus {
  border-color: var(--active-cyan);
  box-shadow: 0 0 10px rgba(255, 190, 11, 0.2);
}

/* COMPLIANT AGREEMENT TERMS SCROLL BOX */
.terms-scroll-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 190, 11, 0.15);
  padding: 15px;
  height: 140px;
  overflow-y: scroll;
  margin: 10px auto 0 auto; /* Added auto margins to center document block */
  text-align: left; 
  font-size: 11px;
  line-height: 1.6;
  color: #a0c0e0;
}

.terms-scroll-box h3 {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: var(--active-cyan);
}

/* CUSTOM HARDWARE CHECKBOX IMPLEMENTATION */
.checkbox-wrapper {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.cyber-checkbox-container {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 12px;
  color: #e0f5ff;
  user-select: none;
  gap: 12px;
}

.cyber-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-checkbox {
  height: 16px;
  width: 16px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 190, 11, 0.4);
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.cyber-checkbox-container:hover input ~ .custom-checkbox {
  border-color: var(--active-cyan);
}

.cyber-checkbox-container input:checked ~ .custom-checkbox {
  background: var(--active-cyan);
  border-color: var(--active-cyan);
  box-shadow: 0 0 8px var(--active-cyan);
}

.custom-checkbox:after {
  content: "";
  position: absolute;
  display: none;
 left: calc(var(--checkbox-box-size) * 0.31) !important; /* Dynamically centers checkmark left-offset */
  top: calc(var(--checkbox-box-size) * 0.12) !important;  /* Dynamically centers checkmark top-offset */
  width: calc(var(--checkbox-box-size) * 0.25) !important;
  height: calc(var(--checkbox-box-size) * 0.50) !important;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.cyber-checkbox-container input:checked ~ .custom-checkbox:after {
  display: block;
}

.form-action-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* SUBMIT BUTTON CONTROL DECK */
.cyber-btn-submit {
  background: rgba(255, 190, 11, 0.05);
  border: 1px solid rgba(255, 190, 11, 0.4);
  color: rgba(255, 190, 11, 0.6);
  font-family: var(--font-cyber);
   font-size: var(--card-button-size) !important;
  letter-spacing: 2px;
   padding: var(--form-button-padding) !important;
  cursor: not-allowed;
  transition: all 0.3s ease;
   min-height: var(--form-element-height) !important;
}

.cyber-btn-submit:not(:disabled) {
  background: rgba(255, 190, 11, 0.15);
  border-color: var(--active-cyan);
  color: #ffffff;
  cursor: pointer;
}

.cyber-btn-submit:not(:disabled):hover {
  background: var(--active-cyan);
  color: #000000;
  box-shadow: 0 0 15px var(--active-cyan);
  font-weight: bold;
}

/* EXTENDED FLOW DISPLAY COMPONENT ELEMENTS */
.flex-centered-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* CYBERPUNK COMPLIANT LOADING STATE INDICATOR */
.cyber-spinner-pulse {
   width: var(--loading-spinner-size) !important;
  height: var(--loading-spinner-size) !important;
  border: 2px solid transparent;
  border-top-color: var(--active-cyan);
  border-bottom-color: var(--active-cyan);
  border-radius: 50%;
  animation: spinMatrixPulse 1.2s infinite linear;
}

@keyframes spinMatrixPulse {
  0% { transform: rotate(0deg); filter: drop-shadow(0 0 2px var(--active-cyan)); }
  50% { filter: drop-shadow(0 0 10px var(--active-cyan)); }
  100% { transform: rotate(360deg); filter: drop-shadow(0 0 2px var(--active-cyan)); }
}

#panel-generator #generator-cooldown-status .cyber-spinner-pulse,
#panel-transposer #transposer-cooldown-status .cyber-spinner-pulse {
  /* Automatically dials the loader down to match your body font size for clean text alignment */
  width: var(--card-body-size) !important;
  height: var(--card-body-size) !important;
}


/* QR VISUAL ARRAY GRAPHIC WRAPPER */
.qr-container-wrapper {
  margin: 20px auto;
  padding: 12px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px dashed var(--active-cyan);
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 15px rgba(255, 190, 11, 0.15);
}

.cyber-qr-graphic {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 5px rgba(255, 190, 11, 0.4));
}

/* OUTBOUND LINK ANCHOR RE-FORMATTER */
.billing-anchor-btn {
  text-decoration: none !important;
  display: inline-block;
  line-height: 1.2;
}

.card-text-muted {
  font-size: 12px;
  color: #648ca8;
  margin: 4px 0;
}

/* FORCES ERROR PANEL AHEAD OF ALL INTERFACE LAYERS */
#panel-error {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(95, 6, 16, 0.8) !important; 
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 9999 !important; /* Highest layer prioritization */
  
  box-shadow: 
    inset 0 0 40px 10px #b30000,           /* Heavy inner scarlet red glass bleed */
    0 0 50px 12px #e60000,                 /* Blinding outer neon crimson light beam core */
    0 0 120px 25px rgba(179, 0, 0, 0.9) !important; /* Volumetric true blood-red ambient glow halo */
  
  /* Centers the error-box grid cleanly inside the floating window frame */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /*justify-content: flex-start !important;*/
  justify-content: center !important;
  box-sizing: border-box;
  padding: 20px;
  
  /* Handle presentation transition arrays smoothly */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Visibility State Rules mapped specifically to overlay masking values */
#panel-error.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#panel-error:not(.hidden) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* RESOURCES STRUCTURAL CONTROLS */
.resources-layout-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* DATA CELL MATRIX FOR PARSING MULTI-LINE STRING MESSAGES */
.cyber-textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(224, 86, 253, 0.3); /* Inherits the resource violet color field bounds */
  padding: var(--form-element-padding) !important;
  min-height: var(--form-element-height) !important;
  font-family: var(--font-cyber);
  font-size: var(--card-input-size) !important;
  color: #ffffff;
  box-sizing: border-box;
  outline: none;
  resize: vertical; /* Permits vertical viewport adjustments solely */
  text-align: center; /* Keeps placeholders and user messages perfectly centered */
  transition: all 0.3s ease;
}

.cyber-textarea:focus {
  border-color: var(--active-cyan);
  box-shadow: 0 0 10px rgba(224, 86, 253, 0.2);
}

/* Ensure inputs inside the resources panel match the active color context variables */


/* VISUAL TREATMENT FOR LOCKING DOWN FORM ARRAYS */
.cyber-input:disabled, 
.cyber-textarea:disabled,
.cyber-btn-interactive:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  border-color: rgba(224, 86, 253, 0.1) !important;
  box-shadow: none !important;
  
}

/* CYBERPUNK HARDWARE DIVISION JUNCTION */
.cyber-divider-junction {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  max-width: 650px;
  margin: 45px auto !important;
  font-family: var(--font-cyber);
  position: relative;
  user-select: none;
}

/* Linear laser glow lines mapping outwards from the center text badge */
.cyber-divider-junction::before,
.cyber-divider-junction::after {
  content: "";
  flex-grow: 1;
  height: 0;
  border-bottom: 1px dashed var(--active-cyan);
  opacity: 0.35;
  filter: drop-shadow(0 0 4px var(--active-cyan));
  transition: border-color 0.4s ease, filter 0.4s ease;
}

/* Center node glyph styling variables */
.junction-glyph {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--active-cyan);
  padding: 0 15px;
  text-shadow: 0 0 8px var(--active-shadow);
  font-weight: bold;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.junction-bracket {
  font-size: 13px;
  color: #648ca8;
  opacity: 0.7;
}
/* BROAD TECHNICAL LASER DIVISION LINE */
.cyber-laser-divider {
  width: var(--divider-width) !important; 
  max-width: var(--divider-max-width) !important;
  margin: 50px auto !important; /* Generates balanced spacing between sections */
  height: 0;
  
  /* Creates a high-utility dashed pattern tracking with your active colors */
  border-bottom: var(--divider-thickness) dashed var(--active-cyan)
  opacity: 0.4;
  
  /* Applies a localized neon glow field that morphs dynamically with the active tab */
   filter: drop-shadow(0 0 var(--divider-glow-radius) var(--active-cyan));
  
  /* Blends out the sharp edges seamlessly at the left and right extremities */
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  
  transition: border-color 0.4s ease, filter 0.4s ease;
}

/* TRANSPOSER ROW STRUCTURES */
.transposer-layout-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* HORIZONTAL ALIGNMENT FIELD GRIDS FOR THE SELECT OPTIONS */
.cyber-dropdown-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 25px;
  width: 100%;
   max-width: var(--form-dropdown-row-max-width) !important;
  margin-top: 25px;
}

.dropdown-cell-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
}

.select-label {
  font-size: var(--dropdown-label-size) !important;
  font-weight: bold;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  color: var(--active-cyan);
}

/* HIGH-TECH Dropdown Menu Elements Styling Parameters */
.cyber-select {
  width: 100%;
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 45, 85, 0.3); /* Default bound uses transposer red */
  padding: 10px 15px;
  font-family: var(--font-cyber);
  font-size: var(--card-select-size) !important;
  color: #e0f5ff
  outline: none;
  cursor: pointer;
  text-align-last: center; /* Centers selected option strings inside select window */
  transition: all 0.3s ease;
}

.cyber-select:focus {
  border-color: var(--active-cyan);
  box-shadow: 0 0 10px rgba(255, 45, 85, 0.2);
}

.cyber-select option {
  background: #030a16 !important; /* Forces dropdown context windows to match theme backgrounds */
  color: #e0f5ff;
}

/* CUSTOM HIGH-DPI FILE UPLOADER STYLING VECTOR */
.cyber-file-upload-label {
  display: block;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(255, 45, 85, 0.4);
  padding: 18px;
  font-family: var(--font-cyber);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #a0c0e0;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.cyber-file-upload-label:hover {
  border-color: var(--active-cyan);
  background: rgba(255, 45, 85, 0.05);
  color: #ffffff;
}

.cyber-file-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

/* GENERATOR COLUMN ARRANGEMENTS */
.generator-layout-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#panel-generator .cyber-select,
#panel-generator .cyber-select option {
  /* 🌟 FIXED: Re-enforces your exact main card text off-white palette */
  color: var(--card-global-text-color) !important; 
  
  /* Keeps your transparent background completely active */
  background: transparent !important; 
}

#panel-generator .cyber-select:hover {
  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
  color: #e0f5ff;
  
  /* 🌟 FIXED: Adds a subtle, high-utility neon green translucent overlay tint on hover */
  background: var(--active-ambient) !important;
}

/* 🌟 UPDATED: Matches the Generator button's baseline state to your thick transparent select fields */
#panel-generator #btn-generator-submit.cyber-btn-interactive {
  background: transparent !important; /* 🌟 Fully transparent glass baseline */
  border: 0 !important; 
  outline: none !important;
  color: #e0f5ff;
  font-weight: bold;
  letter-spacing: 2px;
   box-shadow: 
    inset 0 0 12px var(--active-ambient), 
    0 0 20px 2px var(--active-shadow);
  transition: all 0.3s ease;
}

/* 🌟 UPDATED: Matches the Generator button's hover state precisely to your select fields */
#panel-generator #btn-generator-submit.cyber-btn-interactive:hover:not(:disabled) {
  
  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
 color: #e0f5ff;
  
  /* 🌟 FIXED: Links up identical neon green translucent overlay tint on hover */
  background: var(--active-ambient) !important; 
}

/* Connect select frames inside the generator panel to reflect its active green highlight layout */
#panel-generator .cyber-select {
  
  background: transparent !important;
   box-shadow: 
    inset 0 0 12px var(--active-ambient),  /* Richer inner glass bleed */
    0 0 20px 2px var(--active-shadow);   /* Expanded outer neon green halo field */
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
   border: 0 !important; 
  outline: none !important;
}

#panel-generator .cyber-select:focus {
   box-shadow: 
    inset 0 0 18px var(--active-ambient),
    0 0 35px 5px var(--active-cyan); /* Blinding matrix green core flare */
}

/* HOME PANEL STRUCTURAL CONTROLS */
.home-layout-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* RESPONSIVE CYBER BRAND LOGO IMAGE FRAMING */
.home-logo-container {
  margin: 15px auto 20px auto;
  width: 100%;
  max-width: var(--home-logo-max-width) !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cyber-logo-graphic {
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: contain; /* Keeps your logo from stretching disproportionately */
  border: 1px solid var(--active-cyan);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 15px var(--active-ambient);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* --- ACCOUNT VECTOR VISIBILITY CONTROLS --- */
/* Completely isolate vector visibility mapping states across your navigation bar rules */
.account-avatar.user-logged-out .icon-logged-in,
.account-avatar.user-logged-out .icon-logged-in-unpaid {
  display: none !important;
}
.account-avatar.user-logged-out .icon-logged-out {
  display: block !important;
}

/* Toggle configurations when the validation routine shifts to an active verified user state */
.account-avatar.user-logged-in .icon-logged-out,
.account-avatar.user-logged-in .icon-logged-in-unpaid {
  display: none !important;
}
.account-avatar.user-logged-in .icon-logged-in {
  display: block !important;
}

/* Toggle configurations when the verification stage switches to the unpaid/pending timeline */
.account-avatar.user-logged-in-unpaid .icon-logged-out,
.account-avatar.user-logged-in-unpaid .icon-logged-in {
  display: none !important;
}
.account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid {
  display: block !important;
}

/* Ensure the unpaid state triggers your dynamic amber configuration elements */
.account-avatar.user-logged-in-unpaid {
  color: #ffbe0b !important;
  background: rgba(255, 190, 11, 0.08) !important;
  box-shadow: 0 0 8px rgba(255, 190, 11, 0.28) !important;
  filter: none !important;
}

/* --- CRITICAL BUGFIX OVERRIDES FOR THE UNPAID / UNSUBSCRIBED PICTURE AND CIRCLE --- */
.account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid,
.nav-account:hover .account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid,
.nav-account.nav-account--unsubscribed:hover .account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid,
.cyber-nav .nav-link.active .account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid {
  color: #ffbe0b !important;
  filter: drop-shadow(0 0 2px rgba(255, 190, 11, 0.4)) !important;
  transition: color 0.3s ease, filter 0.3s ease;
}

.account-avatar.user-logged-in-unpaid,
.nav-account:hover .account-avatar.user-logged-in-unpaid,
.nav-account.nav-account--unsubscribed:hover .account-avatar.user-logged-in-unpaid,
.cyber-nav .nav-link.active .account-avatar.user-logged-in-unpaid {
  border-color: rgba(255, 190, 11, 0.55) !important;
  color: #ffbe0b !important;
  background: rgba(255, 190, 11, 0.08) !important;
  box-shadow: 0 0 8px rgba(255, 190, 11, 0.28) !important;
  filter: none !important;
}

.nav-account:hover .account-avatar.user-logged-in-unpaid,
.nav-account.nav-account--unsubscribed:hover .account-avatar.user-logged-in-unpaid {
  border-color: #ffbe0b !important;
  color: #ffd166 !important;
  background: rgba(255, 190, 11, 0.14) !important;
  box-shadow: 0 0 14px rgba(255, 190, 11, 0.55) !important;
  filter: drop-shadow(0 0 3px rgba(255, 190, 11, 0.45)) !important;
}

.nav-account:hover .account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid,
.nav-account.nav-account--unsubscribed:hover .account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid {
  color: #ffd166 !important;
  filter: drop-shadow(0 0 4px rgba(255, 190, 11, 0.65)) !important;
}

.nav-account.nav-account--unsubscribed:hover .account-name,
.nav-account.nav-account--unsubscribed:hover #account-status-label {
  color: #ffe566 !important;
  text-shadow:
    0 0 10px #ffbe0b,
    0 0 20px rgba(255, 190, 11, 0.65) !important;
}

/* --- DYNAMIC COCKPIT STATE COLOR OVERRIDES --- */
/* Forces the avatar ring and vector paths to glow green when the user is logged in */
.account-avatar.user-logged-in {
  border-color: #39ff14 !important;
  color: #39ff14 !important;
  background: rgba(57, 255, 20, 0.08) !important;
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.4) !important;
  filter: drop-shadow(0 0 5px #39ff14) !important;
}

/* Ensure text label echoes the green matrix theme */
.account-avatar.user-logged-in ~ #account-status-label {
  color: #39ff14 !important;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
}

html, body, .cyber-nav, .holo-card, .cyber-input, .cyber-select, .cyber-textarea {
   font-family: "Tomorrow", sans-serif;
}

/* Apply the hyper-modern geometric font to dominant headers and titles */
.logo-text, .nav-item, .account-name, .holo-card h2, .accent-text, .error-title {
  font-family: "Tomorrow", sans-serif;
  
}

/* 🌟 NEW: When error visibility state drops to hidden, dissolve the main card's aesthetics completely */
.holo-card[data-visibility="hidden"] {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 🌟 NEW: Hides all normal card headings and text panels, but ensures the error panel STAYS visible */
.holo-card[data-visibility="hidden"] .card-header,
.holo-card[data-visibility="hidden"] .card-body > div:not(#panel-error) {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease;
}

/* Explicit restore so title/content reappear after error dismiss */
.holo-card[data-visibility="visible"] .card-header,
.holo-card:not([data-visibility="hidden"]) .card-header,
.holo-card[data-visibility="visible"] .card-body > div:not(#panel-error),
.holo-card:not([data-visibility="hidden"]) .card-body > div:not(#panel-error) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* 🌟 NEW: Guarantees the error layer remains cleanly visible over the empty canvas grid */
.holo-card[data-visibility="hidden"] #panel-error,
.holo-card[data-visibility="hidden"] #panel-error * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- 1. THE TRANSPOSER DROPDOWN FIELDS --- */
#panel-transposer .cyber-select,
#panel-transposer .cyber-select option {
  /* Locks up your clean off-white card text color */
  color: var(--card-global-text-color) !important; 
  background: transparent !important; 
}

#panel-transposer .cyber-select option {
  background: var(--active-ambient) !important; /* Fallback for popup choices list stack */
}

#panel-transposer .cyber-select {
  border: 0 !important; /* Force-strips physical border lines universally */
  outline: none !important;
  padding: 10px 15px;
  
  /* Matches identical larger idle shadow metrics, calibrated to your alert red spectrum */
  box-shadow: 
    inset 0 0 12px var(--active-ambient),  /* Rich inner red glass bleed */
    0 0 20px 2px var(--active-shadow);   /* Expanded outer neon red halo field */
    
  transition: all 0.3s ease;
}

/* Transposer Dropdown Hover State */
#panel-transposer .cyber-select:hover {
  background: var(--active-ambient) !important; /* 🌟 FIXED: Smooth 25% opacity red glass tint */
  color: var(--card-global-text-color) !important;
  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

/* Transposer Dropdown Active/Focus State */
#panel-transposer .cyber-select:focus {
  background: var(--active-ambient) !important;
  box-shadow: 
    inset 0 0 18px var(--active-ambient),
    0 0 35px 5px var(--active-cyan); /* Blinding red core flare */
}


/* --- 2. THE CUSTOM FILE UPLOADER COMPONENT --- */
#panel-transposer .cyber-file-upload-label {
  background: transparent !important; 
  border: 0 !important; /* Force-strips the old dashed border lines completely */
  color: var(--card-global-text-color) !important; 
   padding: var(--form-element-padding) !important;
  min-height: var(--form-element-height) !important;
  box-sizing: border-box;
  
  /* Matches the identical large red shadow signature */
  box-shadow: 
    inset 0 0 12px var(--active-ambient), 
    0 0 20px 2px var(--active-shadow);
    
  transition: all 0.3s ease;
}

/* File Upload Hover State */
#panel-transposer .cyber-file-upload-label:hover {
  background: var(--active-ambient) !important; /* 🌟 FIXED: Smooth 25% opacity red glass tint */
  color: var(--card-global-text-color);
  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}


/* --- 3. THE MAIN SIGNAL TRANSPOSITION BUTTON --- */
#panel-transposer #btn-transposer-submit.cyber-btn-interactive {
  background: transparent !important; 
  border: 0 !important; /* Force-strips boundaries */
  outline: none !important;
  color: var(--card-global-text-color) !important; 
  font-weight: bold;
  letter-spacing: 2px;
  padding: 14px 28px;
  
  /* Mirror image layout matching your dropdown fields exactly */
  box-shadow: 
    inset 0 0 12px var(--active-ambient), 
    0 0 20px 2px var(--active-shadow);
    
  transition: all 0.3s ease;
}

/* Transposer Button Hover State */
#panel-transposer #btn-transposer-submit.cyber-btn-interactive:hover:not(:disabled) {
  background: var(--active-ambient) !important; /* 🌟 FIXED: Smooth 25% opacity red glass tint */
  color: var(--card-global-text-color);
  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}


/* ==========================================================================
   RESOURCES & ACCOUNT COMPONENT GLOW OVERRIDES (GENERATOR SYMMETRY)
   ========================================================================== */

/* --- 1. GLOBAL OVERRIDES FOR ACCOUNT & RESOURCES COMPONENTS --- */
#panel-resources .cyber-btn-interactive,
#panel-resources .cyber-input,
#panel-resources .cyber-textarea,
#panel-account .cyber-btn-interactive,
#panel-account .cyber-btn-submit,
#panel-account .cyber-btn-alert,
#panel-account .cyber-input,
#panel-account .terms-scroll-box,
#panel-account .custom-checkbox {
  border: 0 !important; /* Strips old structural border lines completely */
  outline: none !important;
  color: var(--card-global-text-color) !important;
  background: transparent !important; /* Forces uniform dark glass transparency */
  
  /* Matches the heavy, volumetric 3D shadow depth of the generator select boxes */
  box-shadow: 
    inset 0 0 12px var(--active-ambient), 
    0 0 20px 2px var(--active-shadow) !important;
    
  transition: all 0.3s ease;
}

/* --- 2. DYNAMIC HOVER EFFECT MATRIX FOR ACTION CONTROLS & INPUTS --- */
#panel-resources .cyber-btn-interactive:hover:not(:disabled),
#panel-resources .cyber-input:focus,
#panel-resources .cyber-textarea:focus,
#panel-account .cyber-btn-interactive:hover:not(:disabled),
#panel-account .cyber-btn-submit:not(:disabled):hover,
#panel-account .cyber-btn-alert:hover:not(:disabled),
#panel-account .cyber-input:focus {
  color: #ffffff !important;
  background: var(--active-ambient) !important; /* Micro-tint glass canvas overlay */
  
  /* Transitions smoothly to the blinding active theme accent color core flare */
  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

/* --- 3. SUBMIT ACTION BUTTON SPECIFIC HOVER COMPENSATION --- */
#panel-account .cyber-btn-submit:not(:disabled):hover {
  font-weight: bold;
}

/* --- 4. SECURE SCROLL CONTAINER GLOW AMBIENCE --- */
#panel-account .terms-scroll-box {
  background: rgba(0, 0, 0, 0.3) !important; /* Softens ambient text backing readouts */
}

/* --- 5. COMPLIANCE CHECKBOX ALIGNMENT COMPONENT --- */
#panel-account .cyber-checkbox-container input:checked ~ .custom-checkbox {
  background: var(--active-cyan) !important;
}

/* --- 6. VISUAL LOCKDOWN MATRIX COMPONENT FOR DISABLED ACTIONS --- */
#panel-resources .cyber-btn-interactive:disabled,
#panel-resources .cyber-input:disabled,
#panel-resources .cyber-textarea:disabled,
#panel-account .cyber-btn-interactive:disabled,
#panel-account .cyber-btn-submit:disabled,
#panel-account .cyber-input:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  background: transparent !important;
  
  /* Dissolves the high-energy radiant outer halo when the element is locked out */
  box-shadow: 
    inset 0 0 8px rgba(255, 255, 255, 0.02), 
    0 0 8px 1px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   INPUT HOVER UPGRADES & INTEGRATED CHECKBOX FOOTPRINT GLOWS
   ========================================================================== */

/* --- 1. ADD HOVER EFFECTS TO INPUT BOXES & TEXTAREAS --- */
#panel-resources .cyber-input:hover:not(:disabled),
#panel-resources .cyber-textarea:hover:not(:disabled),
#panel-account .cyber-input:hover:not(:disabled) {
  background: var(--active-ambient) !important; /* Micro-tint glass canvas overlay */
  
  /* Radiates the generator-style tactile preview glow when hovering */
  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}


/* --- 2. THE UNIFIED CHECKBOX + TEXT BOX SHADOW DECK --- */
/* Target the parent text/box label container directly to capture the entire asset footprint */
#panel-account .cyber-checkbox-container {
  font-size: var(--checkbox-text-size) !important;
  display: inline-flex !important; /* Retains your exact standard inline line positioning */
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important; /* Cushions the shadow glow edge safely past characters */
  border-radius: 4px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  transition: all 0.3s ease !important;

  /* Applies the baseline theme ambient box shadow around BOTH the checkbox and text */
  box-shadow: 
    inset 0 0 12px var(--active-ambient), 
    0 0 20px 2px var(--active-shadow) !important;
}


/* --- 3. UNIFIED HOVER ACTION VECTOR FOR BOTH SECTIONS --- */
/* Moving the cursor anywhere onto the text or checkbox triggers the active cyan flare */
#panel-account .cyber-checkbox-container:hover {
  background: transparent !important;

  box-shadow: 
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

/* Also triggers the bright focus bloom when the user targets the element via keyboard tab index hooks */
#panel-account .cyber-checkbox-container:has(input:focus-visible) {
  box-shadow: 
    inset 0 0 18px var(--active-ambient),
    0 0 35px 5px var(--active-cyan) !important;
}


/* --- 4. COMPONENT SHADOW DISAMBIGUATION OVERRIDES --- */
/* Strips duplicate standalone shadows from the little square box itself since the wrapper carries it now */
#panel-account .custom-checkbox {
  border: 1px solid transparent !important;
  box-shadow: 0 0 8px 1px rgba(255, 190, 11, 0.45) !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  width: var(--checkbox-box-size) !important;
  height: var(--checkbox-box-size) !important;
}

/* Coordinates check icon fill adjustments when state swaps to validated */
#panel-account .cyber-checkbox-container input:checked ~ .custom-checkbox {
  background: var(--active-cyan) !important;
   border-color: transparent !important;
  box-shadow: 0 0 12px 3px var(--active-cyan) !important; /* Retains a micro-glow core purely for the mark check */
}

/* ==========================================================================
   ERROR OVERLAY DISMISS ACTION CONTROLS REFINEMENTS
   ========================================================================== */

/* --- 1. ERROR CLOSE BUTTON BASELINE SHADOW INTEGRITY --- */
.cyber-btn-alert {
  /* Enforces a smooth hardware transition curve across text weights and glow filters */
  transition: box-shadow 0.2s ease, background-color 0.2s ease, font-weight 0.2s ease !important;
}

/* --- 2. HIGH-ENERGY HOVER GLOW FIELD & COLOR PRESERVATION --- */
.cyber-btn-alert:hover {
  background: rgba(139, 37, 53, 0.4) !important; /* Volumetric crimson tint background overlay */
  
  /* STABLE COLOR LOCK: Locks the text color completely stable to its original scarlet code */
  color: #ff2d55 !important; 
  
  /* TEXT WEIGHT TRANSITION: Forces the character strokes to turn bold on hover */
  font-weight: bold !important;
  
  /* RADIANT GLOW FLARE: Projects a heavy scarlet neon aura outwards from the button shell */
  box-shadow: 
    inset 0 0 15px rgba(255, 0, 60, 0.85),
    0 0 30px 4px #ff003c !important;
}

/* ==========================================================================
   GLOBAL BUTTON HOVER TYPOGRAPHY SYNCHRONIZATION
   ========================================================================== */

/* Forces every single interactive button to cleanly snap to bold text on hover */
.cyber-btn-interactive:hover:not(:disabled),
.cyber-btn-submit:not(:disabled):hover,
.cyber-btn-alert:hover {
  font-weight: bold !important;
  letter-spacing: 2px !important; /* Preserves geometric layout spacing when text thickens */
}

/* ==========================================================================
   GENERATOR & TRANSPOSER HOVER TYPOGRAPHY SYNCHRONIZATION
   ========================================================================== */

/* --- 1. FORCE DROPDOWNS & FILE INPUTS TO TURN BOLD ON HOVER --- */
#panel-generator .cyber-select:hover,
#panel-transposer .cyber-select:hover,
#panel-transposer .cyber-file-upload-label:hover {
  font-weight: bold !important;
  color: #ffffff !important;
}

/* --- 2. FORCE GENERATOR & TRANSPOSER SUBMIT BUTTONS TO TURN BOLD ON HOVER --- */
#panel-generator #btn-generator-submit.cyber-btn-interactive:hover:not(:disabled),
#panel-transposer #btn-transposer-submit.cyber-btn-interactive:hover:not(:disabled) {
  font-weight: bold !important;
  color: #ffffff !important;
}

/* --- 3. ENFORCE STRICT IDLE STATE (STRIP BOLD WHEN NOT HOVERED) --- */
#panel-generator .cyber-select:not(:hover),
#panel-transposer .cyber-select:not(:hover),
#panel-transposer .cyber-file-upload-label:not(:hover),
#panel-generator #btn-generator-submit.cyber-btn-interactive:not(:hover),
#panel-transposer #btn-transposer-submit.cyber-btn-interactive:not(:hover) {
  font-weight: normal !important;
}

/* ==========================================================================
   DROPDOWN LABEL TEXT HOVER REACTIVITY
   ========================================================================== */

/* --- 1. FORCE DROPDOWN LABELS TO TURN BOLD ON HOVER --- */
/* Triggers when hovering directly over the label text itself, or when hovering over its cell wrapper */
.dropdown-cell-wrapper:hover .select-label,
.select-label:hover {
  font-weight: bold !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px var(--active-cyan) !important;
  transition: all 0.3s ease;
}

/* --- 2. ENFORCE CLEAN IDLE STATE FOR LABELS --- */
/* Strips any bold properties when the mouse cursor is completely clear of the cell */
.dropdown-cell-wrapper:not(:hover) .select-label {
  font-weight: normal !important;
  color: var(--active-cyan) !important;
  text-shadow: none !important;
}

/* ==========================================================================
   HOME PANEL LOGO GRAPHIC GLOW REFINEMENTS
   ========================================================================== */

/* --- 1. CONVERT BORDER TO INTENSE BOX SHADOW GLOW --- */
#panel-home .cyber-logo-graphic {
  border: 0 !important; /* Force-strips the solid cyan line completely */
  outline: none !important;
  max-height: var(--home-logo-max-height) !important;
  /* Applies a dual-layer high-utility glass border glow signature */
  box-shadow: 
    inset 0 0 15px var(--active-ambient),                 /* Internal glass canvas bleed */
    0 0 30px 4px var(--active-shadow) !important;         /* Expanded outer neon cyber-blue halo field */
    
  transition: box-shadow 0.4s ease, filter 0.4s ease;
}

/* ==========================================================================
   REGISTRATION ACTION DECK & OVERLAY MASK REFINEMENTS
   ========================================================================== */

/* --- 1. BASELINE REGISTER SUBMIT OVERRIDE --- */
#sub-signup .cyber-btn-submit {
  cursor: pointer !important; /* Button itself remains normal */
  transition: filter 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 320px;
}

/* --- 2. TACTICAL LOCKOUT MASK OVERLAY FRAME --- */
.cyber-btn-lockout-mask {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 5 !important; /* Projects directly over the surface bounds */
  background: rgba(3, 10, 22, 0.25) !important; /* Translucent glass tint shadow */
  
  /* CURSOR CLAMP: Instantly forces the universal browser "not-allowed" circle-slash */
  cursor: not-allowed !important;
  
  /* SMOOTH TRANSITIONS: Handles clean dissolve fades on compliance validation triggers */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* --- 3. HARDWARE ACCELERATED BUTTON BLUR TRIGGER --- */
/* Back-targets the underlying sibling button element specifically when the mask layer is present */
.cyber-btn-lockout-mask ~ .cyber-btn-submit {
  filter: blur(2.5px) !important; /* Smoothly diffuses character string boundaries */
  opacity: 0.65 !important;
}

/* --- 4. OVERLAY MASK DEACTIVATION STATE --- */
/* Dissolves layout visibility and strips the blur filter cleanly off the text string when checked */
.cyber-btn-lockout-mask.deactivated {
  opacity: 0 !important;
  visibility: hidden !important;
}

.cyber-btn-lockout-mask.deactivated ~ .cyber-btn-submit {
  filter: blur(0px) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   FIXED HOVER, OVERLAY, AND HARDWARE ACCELERATED MASK BLUR RULES
   ========================================================================== */

/* --- 1. OVERLAY MASK GEOMETRY ANCHOR --- */
.cyber-btn-lockout-mask {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important; /* Forces layout layer over top of the click path */
  background: rgba(3, 10, 22, 0.4) !important; /* Ambient glass tint overlay */
  border-radius: 4px !important;
  cursor: not-allowed !important; /* Locks browser pointer to the circle-slash */
  
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* --- 2. SIBLING SELECTION CONTROLS FOR INTRINSIC TEXT BLUR --- */
/* Finds the direct sibling submit button below the masking overlay element */
.cyber-btn-lockout-mask ~ .cyber-btn-submit {
  filter: blur(2.5px) !important; /* Smoothly diffuses geometric character text strings */
  opacity: 0.65 !important;
  pointer-events: none !important; /* Extra backup layer preventing click through leaks */
}

/* --- 3. DISMISSIVE DEACTIVATION RULES WHEN CHECKED --- */
/* Dissolves opacity completely and instantly pops underlying characters back into crisp focus lines */
.cyber-btn-lockout-mask.deactivated {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cyber-btn-lockout-mask.deactivated ~ .cyber-btn-submit {
  filter: blur(0px) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   FREE SIGN-IN PAGE: TERMS CTA, MODAL, GOOGLE BUTTON, LOCKOUT
   ========================================================================== */

#panel-account .terms-review-btn {
  width: 100%;
  max-width: 420px;
  margin: 8px auto 0 auto;
  text-transform: none;
  letter-spacing: 1px !important;
  line-height: 1.4;
}

/* Free sign-in page typography + spacing */
.signin-free {
  background:
    linear-gradient(
      145deg,
      #4a6278 0%,
      #6a8296 28%,
      #7c98ac 48%,
      #4a88b0 68%,
      #2a5880 100%
    );

  --checkbox-box-size: 32px;
  --nav-item-size: 26px;
  --nav-brand-size: 36px;
  --nav-account-size: 26px;
  --nav-logo-box-size: 48px;
  --nav-logo-img-scale: 100%;
  --nav-avatar-size: 48px;
  --nav-icon-size: 30px;
  --error-title-size: 36px;
  --error-body-size: 26px;
  --error-btn-size: 28px;
  --error-btn-width: auto;
  --card-global-text-color: #a0a8b0;
  --card-global-text-color-hover: #b8c0c8;
  --card-title-text-color: #aeb6be;
  --neon-cyan: rgba(158, 228, 255, 0.88);
  --signin-glow-warm: rgba(255, 200, 88, 0.20);
  --signin-glow-cyan: rgba(145, 220, 240, 0.52);
  --signin-glow-cyan-soft: rgba(145, 220, 240, 0.42);
  --signin-glow-cyan-nav: rgba(145, 220, 240, 0.58);
}

.signin-free #backgroundCanvas4a,
.signin-free #staffCanvas4a,
.signin-free #lissajousCanvas4a {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  pointer-events: none;
}

.signin-free #backgroundCanvas4a {
  z-index: 0;
  background-color: #3f464d;
}

.signin-free #staffCanvas4a {
  z-index: 1;
}

.signin-free #lissajousCanvas4a {
  z-index: 2;
}

.signin-free .nav-links .nav-item {
  font-size: var(--nav-item-size) !important;
}

.signin-free .account-name {
  font-size: var(--nav-account-size) !important;
}

.signin-free .nav-account.nav-account--unsubscribed:not(.active) .account-name,
.signin-free .nav-account.nav-account--unsubscribed:not(.active) #account-status-label {
  color: #c99200 !important;
  text-shadow: 0 0 4px rgba(255, 190, 11, 0.22) !important;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.signin-free .nav-account.nav-account--unsubscribed:hover .account-name,
.signin-free .nav-account.nav-account--unsubscribed:hover #account-status-label {
  color: #ffe566 !important;
  text-shadow:
    0 0 10px #ffbe0b,
    0 0 20px rgba(255, 190, 11, 0.65) !important;
}

.signin-free .cyber-nav .nav-brand .logo-text {
  font-size: var(--nav-brand-size) !important;
}

.signin-free .nav-logo-img-wrapper {
  width: var(--nav-logo-box-size) !important;
  height: var(--nav-logo-box-size) !important;
}

.signin-free .account-avatar {
  width: var(--nav-avatar-size) !important;
  height: var(--nav-avatar-size) !important;
}

.signin-free .account-avatar svg {
  width: var(--nav-icon-size) !important;
  height: var(--nav-icon-size) !important;
}

/* Error panel refinements (free sign-in) */
.signin-free #panel-error {
  background: rgba(95, 6, 16, 0.94) !important;
}

.signin-free .error-box {
  background: rgba(55, 6, 12, 0.82) !important;
  width: 88% !important;
  height: auto !important;
  min-height: 72% !important;
  max-height: 90% !important;
  box-shadow:
    inset 0 0 40px 10px #b30000,
    0 0 50px 12px #e60000,
    0 0 80px 18px rgba(179, 0, 0, 0.75) !important;
  gap: 18px;
  padding: 32px 36px 40px !important;
}

.signin-free .error-header {
  margin-bottom: 0;
  padding-bottom: 18px;
  border-bottom-width: 2px;
  width: 100%;
}

.signin-free .warning-glyph {
  font-size: inherit !important;
  line-height: 1;
  width: auto;
  height: auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  /* Glow hugs the triangle silhouette instead of a large circular halo */
  filter: drop-shadow(0 0 3px #e60000) drop-shadow(0 0 6px rgba(230, 0, 0, 0.75));
}

.signin-free .warning-glyph-svg {
  display: block;
  width: 56px;
  height: 56px;
}

.signin-free .error-title {
  font-size: var(--error-title-size) !important;
}

.signin-free .error-text-bright-red,
.signin-free #error-stack-trace,
.signin-free #error-stack-trace .error-text-bright-red,
.signin-free .error-support-line {
  font-size: var(--error-body-size) !important;
  font-weight: 700 !important;
  color: #ff2d55 !important;
  text-shadow: 0 0 8px rgba(255, 45, 85, 0.4);
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin: 4px 0 !important;
}

.signin-free .error-support-line {
  margin-top: 0 !important;
}

.signin-free .error-resources-link {
  /* Distinct coral/scarlet vs body #ff2d55 — no idle glow so it stays readable */
  color: #ff6b7a !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  text-shadow: none;
}

.signin-free .error-resources-link:hover {
  color: var(--card-global-text-color, #e0f5ff) !important;
  text-shadow:
    0 0 8px #ff004c,
    0 0 16px rgba(255, 0, 76, 0.85);
}

.signin-free .error-footer {
  width: auto;
  padding-bottom: 0;
  display: flex;
  justify-content: center;
}

.signin-free #panel-error #close-error-btn.cyber-btn-alert,
.signin-free .error-footer .cyber-btn-alert {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 12px 28px !important;
  font-size: var(--error-btn-size) !important;
  font-weight: bold !important;
}

.signin-free .error-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.signin-free .holo-card[data-theme="account"] {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(10, 18, 32, 0.68) 45%,
    rgba(8, 14, 26, 0.72) 100%
  ) !important;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(145, 220, 240, 0.05),
    0 0 25px var(--active-blue),
    0 0 30px 4px var(--active-shadow),
    0 0 70px 15px var(--active-ambient) !important;
}

.signin-free .cyber-nav {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(10, 18, 32, 0.68) 45%,
    rgba(8, 14, 26, 0.72) 100%
  );
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(145, 220, 240, 0.05),
    0 4px 20px rgba(145, 220, 240, 0.88),
    0 2px 16px rgba(255, 200, 88, 0.18);
}

.signin-free .interface-container {
  padding-top: 80px;
}

body.signin-free:has(.site-footer) .interface-container {
  padding-bottom: 80px;
}

.signin-free .holo-card > .btn-error-test {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 30;
  width: auto !important;
  min-width: 0 !important;
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  letter-spacing: 1px;
}

.holo-card[data-visibility="hidden"] > .btn-error-test {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.signin-free .holo-card h2#interface-title {
  font-size: 2.65rem !important;
  letter-spacing: 2px;
}

.signin-free .card-header .system-hash {
  font-size: 1.85rem !important;
  margin: 10px 0 0 0;
  line-height: 1.45;
  max-width: 44rem;
}

.signin-free .card-body {
  margin-top: 10px;
  padding-top: 8px;
  font-size: 1.35rem;
}

/* Match checkbox label weight/color/tracking exactly */
.signin-free #panel-account .terms-review-btn,
.signin-free #panel-account .cyber-checkbox-container,
.signin-free #panel-account .checkbox-label-text {
  font-family: var(--font-cyber) !important;
  font-size: 1.35rem !important;
  font-weight: bold !important;
  letter-spacing: normal !important;
  color: #e0f5ff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.signin-free #panel-account .checkbox-label-text {
  line-height: 1.45 !important;
  white-space: nowrap;
}

.signin-free #panel-account .terms-review-btn {
  width: 100%;
  max-width: 680px;
  margin-top: 2px;
  padding: 16px 26px !important;
  text-transform: none;
  line-height: 1.45 !important;
  white-space: nowrap;
  /* Explicit shared glow with checkbox container */
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
}

.signin-free #panel-account .cyber-btn-interactive:hover:not(:disabled),
.signin-free #panel-account .terms-review-btn:hover {
  font-weight: bold !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

.signin-free #panel-account .cyber-checkbox-container:hover,
.signin-free #panel-account .cyber-checkbox-container:has(input:focus-visible) {
  background: transparent !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

.signin-free #panel-account .cyber-checkbox-container {
  gap: 16px !important;
  width: 100% !important;
  max-width: 680px !important;
  line-height: 1.45 !important;
  padding: 16px 26px !important;
  box-sizing: border-box !important;
  white-space: nowrap;
  justify-content: center !important;
  text-align: center;
  background: transparent !important;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
}

.signin-free #panel-account .custom-checkbox {
  width: var(--checkbox-box-size) !important;
  height: var(--checkbox-box-size) !important;
  flex-shrink: 0;
}

.signin-free #panel-account .checkbox-wrapper {
  margin: 20px 0 8px 0;
  width: 100%;
  max-width: 680px;
  justify-content: center;
}

.signin-free .signin-google-row {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 680px;
  margin-top: 52px;
}

.signin-free .google-signin-container {
  width: 100%;
  max-width: 680px;
}

.signin-free .gsi-material-button {
  width: 100%;
  height: auto;
  min-height: 56px;
  font-family: var(--font-cyber) !important;
  font-size: 1.35rem !important;
  font-weight: bold !important;
  padding: 16px 26px;
  min-width: 0;
  max-width: 680px;
  box-sizing: border-box;
  color: #e0f5ff !important;
  /* Soft translucent Google gray/white face (enabled state) */
  background-color: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(116, 119, 117, 0.55);
  /* Match checkbox container shadow */
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
  transition: box-shadow 0.3s ease, background-color 0.218s, border-color 0.218s;
}

.signin-free .gsi-material-button:not(:disabled):hover {
  background-color: rgba(255, 255, 255, 0.58) !important;
  color: #e0f5ff !important;
  box-shadow:
    inset 0 0 14px rgba(255, 178, 135, 0.14),
    0 0 30px 4px var(--active-cyan) !important;
}

.signin-free .gsi-material-button .gsi-material-button-icon {
  height: 28px;
  width: 28px;
  min-width: 28px;
  margin-right: 16px;
}

.signin-free .gsi-material-button .gsi-material-button-contents {
  font-family: var(--font-cyber) !important;
  font-size: 1.35rem !important;
  font-weight: bold !important;
  color: #e0f5ff !important;
  letter-spacing: normal !important;
}

.signin-free .card-text,
.signin-free .card-text-muted,
.signin-free .accent-text,
.signin-free .data-stream p {
  font-size: 1.35rem !important;
}

.google-signin-container {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
}

/* Lockout blur for Google button (mask sits after the button in DOM) */
.google-signin-container:has(.cyber-btn-lockout-mask:not(.deactivated)) .gsi-material-button {
  filter: blur(2.5px) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}

.google-signin-container:has(.cyber-btn-lockout-mask.deactivated) .gsi-material-button {
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.holo-card[data-theme="account"] .card-body {
  position: relative;
}

/* Transparent shell — shorter than full card-body so page title/subtitle stay clear */
.terms-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 4px 0;
  box-sizing: border-box;
  background: transparent;
  pointer-events: none;
}

.terms-modal.hidden {
  display: none !important;
}

.terms-modal-panel {
  position: relative;
  pointer-events: auto;
  width: 100%;
  height: auto;
  max-height: min(58vh, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 24px 18px;
  box-sizing: border-box;
  background: rgba(3, 10, 22, 0.72) !important;
  border: 0;
  outline: none;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 28px 2px var(--active-shadow),
    0 0 70px 15px var(--active-ambient);
}

.terms-modal-heading {
  margin: -2px 52px 10px 0;
  align-self: stretch;
  font-family: var(--font-cyber);
  font-size: 2.2rem;
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--card-global-text-color) !important;
  text-shadow: none;
}

.terms-modal-close-x {
  position: absolute;
  top: 2px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  outline: none;
  background: transparent;
  color: #a0c0e0;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  /* Idle cyan glow — same color family as prior hover, a bit stronger */
  text-shadow:
    0 0 10px var(--active-cyan),
    0 0 18px rgba(105, 235, 255, 0.55);
  box-shadow: none;
}

.terms-modal-close-x:hover {
  color: #ffffff;
  background: var(--active-ambient);
  text-shadow: none;
  /* Match bottom CLOSE button hover glow */
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

.terms-modal .terms-modal-scroll,
.terms-modal .terms-scroll-box,
#privacy-modal .terms-modal-scroll,
#privacy-modal .terms-scroll-box {
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: min(32vh, 240px);
  margin: 0;
  padding: 15px;
  border: 0 !important;
  outline: none !important;
  overflow-y: scroll;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--card-global-text-color) !important;
  /* Lighter glassmorph — shared by terms + privacy modals */
  background: rgba(3, 10, 22, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    inset 0 0 10px var(--active-ambient),
    0 0 14px 1px var(--active-shadow) !important;
}

#privacy-modal .terms-modal-scroll,
#privacy-modal .terms-scroll-box {
  max-height: min(42vh, 320px);
}

.terms-modal .terms-modal-scroll p,
.terms-modal .terms-scroll-box p,
#privacy-modal .terms-modal-scroll p,
#privacy-modal .terms-scroll-box p {
  font-size: 1.1rem !important;
  line-height: 1.55;
  margin: 0 0 12px 0;
  color: var(--card-global-text-color) !important;
}

/* CLOSE uses glow shadow only (no border), matching account button language */
.terms-modal .cyber-btn-interactive {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--card-global-text-color) !important;
  font-size: 1.5rem !important;
  padding: 18px 40px !important;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
  transition: all 0.3s ease;
}

.terms-modal .cyber-btn-interactive:hover {
  border: 0 !important;
  color: #ffffff !important;
  background: var(--active-ambient) !important;
  font-weight: bold !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

/* Official Google Identity Services material button (visual only) */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}

/* ==========================================================================
   SITE FOOTER (all pages)
   ========================================================================== */

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 60px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 40px;
  box-sizing: border-box;
  font-family: var(--font-cyber);
  white-space: nowrap;
  background: linear-gradient(to top, rgba(3, 10, 22, 0.95) 0%, rgba(3, 10, 22, 0.0) 100%);
  box-shadow: 0 -4px 20px rgba(105, 235, 255, 0.99);
  backdrop-filter: blur(2px);
}

.site-footer-copy {
  margin: 0;
  font-size: 0.8rem;
  color: #a0c0e0;
  letter-spacing: 0.5px;
}

.site-footer-sep {
  color: rgba(100, 140, 168, 0.45);
  user-select: none;
}

.site-footer-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  padding: 4px 6px;
  margin: 0;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: #a0c0e0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.site-footer-link:hover {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(105, 235, 255, 0.45);
}

body:has(.site-footer) .interface-container {
  padding-bottom: 85px;
}

.signin-free .site-footer-copy,
.signin-free .site-footer-link {
  font-size: 1rem;
}

.signin-free .site-footer {
  flex-wrap: wrap;
  height: auto;
  min-height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
  row-gap: 4px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(10, 18, 32, 0.68) 45%,
    rgba(8, 14, 26, 0.72) 100%
  );
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(145, 220, 240, 0.05),
    0 -4px 20px rgba(105, 235, 255, 0.99);
}

.signin-free #bgStatus4a,
.signin-free #bgInterval4a {
  display: none !important;
  visibility: hidden !important;
}

/* Sign-in 1b / 1c — deferred 3a GLSL background + spaced card layout */
.signin-free-1b,
.signin-free-1c {
  background:
    url('/images/InitialBackground1a.png') center / cover no-repeat,
    linear-gradient(
      145deg,
      #1a3f62 0%,
      #2a6a9e 34%,
      #4a9cc8 52%,
      #2f6f9e 78%,
      #1c4a72 100%
    );
}

.signin-free .terms-modal-panel {
  background: rgba(3, 10, 22, 0.9) !important;
}

.signin-free .terms-modal .terms-modal-scroll,
.signin-free .terms-modal .terms-scroll-box {
  background: rgba(3, 10, 22, 0.84) !important;
}

.signin-free-1b #bgStage3a,
.signin-free-1c #bgStage3a {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #2a6a9e;
}

.signin-free-1b #bgCanvasWrap3a,
.signin-free-1c #bgCanvasWrap3a {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}

.signin-free-1b #backgroundCanvas3a,
.signin-free-1c #backgroundCanvas3a {
  display: block;
  width: 100%;
  height: 100%;
}

.signin-free-1b #bgInitial3a,
.signin-free-1c #bgInitial3a {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.signin-free-1b.is-bg-crossfaded #bgInitial3a,
.signin-free-1c.is-bg-crossfaded #bgInitial3a {
  visibility: hidden;
}

.signin-free-1b .interface-container {
  padding: 96px 40px 90px;
  box-sizing: border-box;
}

.signin-free-1a #panel-account .checkbox-label-text {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.82) !important;
}

.signin-free-1a #panel-account .cyber-btn-interactive,
.signin-free-1a #panel-account .terms-review-btn,
.signin-free-1a .holo-card > .btn-error-test {
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.92),
    0 0 3px rgba(0, 0, 0, 0.96) !important;
}

.signin-free-1a #panel-account #btn-google-signin,
.signin-free-1a #panel-account #btn-google-signin .gsi-material-button-contents {
  color: #2b363f !important;
  text-shadow: none !important;
}

.signin-free-1a #panel-account #btn-google-signin:not(:disabled):hover,
.signin-free-1a #panel-account #btn-google-signin:not(:disabled):hover .gsi-material-button-contents {
  color: #2b363f !important;
  text-shadow:
    0 0 12px rgba(145, 220, 240, 0.72),
    0 0 4px rgba(145, 220, 240, 0.48) !important;
}

.signin-free-1a #panel-account .terms-review-btn,
.signin-free-1a #panel-account .cyber-checkbox-container,
.signin-free-1a #panel-account .gsi-material-button,
.signin-free-1a #panel-account .oauth-primary-btn {
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
}

.signin-free-1a #panel-account .cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #panel-account .terms-review-btn:hover,
.signin-free-1a #panel-account .oauth-primary-btn:hover:not(:disabled),
.signin-free-1a #panel-account a.oauth-primary-btn:hover,
.signin-free-1a #panel-account .cyber-checkbox-container:hover,
.signin-free-1a #panel-account .cyber-checkbox-container:has(input:focus-visible) {
  font-weight: bold !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

.signin-free-1a #panel-account .gsi-material-button:not(:disabled):hover {
  background-color: rgba(255, 255, 255, 0.68) !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

.signin-free-1a .holo-card[data-theme="account"] {
  background: linear-gradient(
    155deg,
    rgba(var(--ui-glass-soft), 0.56) 0%,
    rgba(var(--ui-glass-mid), 0.70) 38%,
    rgba(var(--ui-glass-deep), 0.82) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(145, 220, 240, 0.05),
    0 0 25px var(--active-blue),
    0 0 30px 4px var(--active-shadow),
    0 0 70px 15px var(--active-ambient) !important;
}

.signin-free-1a .holo-card .card-header,
.signin-free-1a .holo-card .card-body {
  background: transparent !important;
}

/* Scroll shell — only the card region scrolls; nav/footer always sit over the fog canvas */
.signin-free-1a {
  /* Unified glass gray palette (card, nav, footer, gutters) */
  --ui-glass-deep: 1, 4, 12;
  --ui-glass-mid: 2, 6, 16;
  --ui-glass-soft: 4, 8, 20;
  --ui-title-text-color: #aeb6be;
  --ui-muted-text-color: #a0a8b0;
  display: flex;
  flex-direction: column;
  height: 100vh !important;
  overflow: hidden !important;
}

.signin-free-1a .cyber-nav {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 60px;
  width: 100% !important;
  background: linear-gradient(
    155deg,
    rgba(var(--ui-glass-soft), 0.52) 0%,
    rgba(var(--ui-glass-mid), 0.64) 38%,
    rgba(var(--ui-glass-deep), 0.76) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

.signin-free-1a .site-footer {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 auto;
  width: 100% !important;
  z-index: 3;
  background: linear-gradient(
    155deg,
    rgba(var(--ui-glass-soft), 0.52) 0%,
    rgba(var(--ui-glass-mid), 0.64) 38%,
    rgba(var(--ui-glass-deep), 0.76) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

.signin-free-1a .interface-container {
  position: relative !important;
  flex: 1 1 auto;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-top: 20px !important;
  padding-bottom: 28px !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable;
}

/* Viewport glass gutters — all four bands positioned by GutterGlassOverlays1a.js */
.viewport-glass-gutter {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(6px) brightness(0.50) saturate(0.88);
  -webkit-backdrop-filter: blur(6px) brightness(0.50) saturate(0.88);
}

.viewport-glass-gutter--left {
  background: linear-gradient(
    90deg,
    rgba(var(--ui-glass-deep), 0.90) 0%,
    rgba(var(--ui-glass-mid), 0.70) 58%,
    rgba(var(--ui-glass-mid), 0.32) 86%,
    rgba(var(--ui-glass-mid), 0) 100%
  );
}

.viewport-glass-gutter--right {
  background: linear-gradient(
    270deg,
    rgba(var(--ui-glass-deep), 0.90) 0%,
    rgba(var(--ui-glass-mid), 0.70) 58%,
    rgba(var(--ui-glass-mid), 0.32) 86%,
    rgba(var(--ui-glass-mid), 0) 100%
  );
}

.viewport-glass-gutter--top {
  background: linear-gradient(
    180deg,
    rgba(var(--ui-glass-deep), 0.90) 0%,
    rgba(var(--ui-glass-mid), 0.70) 55%,
    rgba(var(--ui-glass-mid), 0.32) 82%,
    rgba(var(--ui-glass-mid), 0) 100%
  );
}

.viewport-glass-gutter--bottom {
  background: linear-gradient(
    0deg,
    rgba(var(--ui-glass-deep), 0.90) 0%,
    rgba(var(--ui-glass-mid), 0.70) 55%,
    rgba(var(--ui-glass-mid), 0.32) 82%,
    rgba(var(--ui-glass-mid), 0) 100%
  );
}

.signin-free-1b .holo-card {
  width: 100%;
  max-width: 1400px;
  min-height: 74vh;
}

.signin-free-1b .holo-card[data-theme="account"],
.signin-free-1c .holo-card[data-theme="account"] {
  --active-cyan: #ffb494 !important;
  --active-blue: #eb8e62 !important;
  --active-shadow: #f89e6e !important;
  --active-ambient: rgba(255, 178, 135, 0.34) !important;
  background: linear-gradient(
    145deg,
    rgba(255, 228, 210, 0.08) 0%,
    rgba(10, 18, 32, 0.66) 45%,
    rgba(8, 14, 26, 0.70) 100%
  ) !important;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 220, 200, 0.05),
    inset 0 0 16px rgba(255, 178, 135, 0.16),
    0 0 25px rgba(235, 142, 98, 0.70),
    0 0 30px 4px rgba(248, 158, 110, 0.64),
    0 0 70px 15px rgba(255, 178, 135, 0.32) !important;
}

.signin-free-1b #bgStatus3a,
.signin-free-1b #bgInterval3a,
.signin-free-1c #bgStatus3a,
.signin-free-1c #bgInterval3a {
  display: none !important;
  visibility: hidden !important;
}

/* ==========================================================================
   SITE MODALS (privacy, contact — footer-triggered)
   ========================================================================== */

.site-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(3, 10, 22, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-modal.hidden {
  display: none !important;
}

#privacy-modal.site-modal {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

#privacy-modal.site-modal .terms-modal-panel {
  pointer-events: auto;
}

#contact-modal.site-modal {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

#contact-modal.site-modal .terms-modal-panel {
  pointer-events: auto;
}

.site-modal-panel {
  width: min(680px, 100%);
  max-height: min(88vh, 720px);
  margin: 0;
  align-self: center;
}

#privacy-modal .site-modal-panel {
  max-height: min(68vh, 600px);
}

#contact-modal .site-modal-panel {
  max-height: min(92vh, 820px);
}

.site-modal-panel--form {
  max-height: min(92vh, 760px);
}

/* Privacy modal — match in-card terms modal (shadows, type, controls) */
#privacy-modal .terms-modal-panel {
  --active-cyan: #69ebff;
  --active-shadow: #1e5ab4;
  --active-ambient: rgba(105, 235, 255, 0.12);
  --card-global-text-color: #e0f5ff;
  width: min(1100px, 92vw);
  max-width: min(1100px, 92vw);
  max-height: min(68vh, 600px);
  /* Replicate terms panel over account holo-card glass stack */
  background:
    rgba(3, 10, 22, 0.72),
    rgba(22, 15, 3, 0.45) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 28px 2px var(--active-shadow),
    0 0 70px 15px var(--active-ambient);
}

#privacy-modal .terms-modal-heading {
  margin: 10px 0 10px 0;
  align-self: stretch;
  text-align: center;
  font-size: 2.2rem;
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--card-global-text-color) !important;
  text-shadow: none;
}

#privacy-modal .terms-modal-close-x {
  color: #a0c0e0;
  text-shadow:
    0 0 10px var(--active-cyan),
    0 0 18px rgba(105, 235, 255, 0.55);
  box-shadow: none;
}

#privacy-modal .terms-modal-close-x:hover {
  color: #ffffff;
  background: var(--active-ambient);
  text-shadow: none;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

#privacy-modal .cyber-btn-interactive {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--card-global-text-color) !important;
  font-size: 1.5rem !important;
  padding: 18px 40px !important;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
  transition: all 0.3s ease;
}

#privacy-modal .cyber-btn-interactive:hover {
  border: 0 !important;
  color: #ffffff !important;
  background: var(--active-ambient) !important;
  font-weight: bold !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

/* Contact modal — match privacy modal styling */
#contact-modal .terms-modal-panel {
  --active-cyan: #69ebff;
  --active-shadow: #1e5ab4;
  --active-ambient: rgba(105, 235, 255, 0.12);
  --card-global-text-color: #e0f5ff;
  width: min(1100px, 92vw);
  max-width: min(1100px, 92vw);
  max-height: min(92vh, 820px);
  height: auto;
  overflow-y: auto;
  padding-bottom: 24px;
  box-sizing: border-box;
  background:
    rgba(3, 10, 22, 0.72),
    rgba(22, 15, 3, 0.45) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 28px 2px var(--active-shadow),
    0 0 70px 15px var(--active-ambient);
}

#contact-modal .terms-modal-heading,
#contact-modal .site-contact-label {
  align-self: stretch;
  text-align: center;
  font-family: var(--font-cyber);
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--card-global-text-color) !important;
  text-shadow: none;
  text-transform: none;
}

#contact-modal .terms-modal-heading {
  margin: 6px 0 8px 0;
  font-size: 2.2rem;
}

#contact-modal .input-field-wrapper {
  margin: 6px auto 0 auto;
}

#contact-modal .input-field-wrapper:not(:first-child) {
  margin-top: 12px;
}

#contact-modal .site-contact-form > .input-field-wrapper:first-child {
  margin-top: 4px;
}

#contact-modal .site-contact-label {
  margin: 4px auto 4px auto;
  font-size: 1.1rem;
  line-height: 1.55;
}

#contact-modal .site-contact-form > .input-field-wrapper:first-child .site-contact-label {
  margin-top: 0;
}

#contact-modal .terms-modal-close-x {
  z-index: 50;
  color: #a0c0e0;
  text-shadow:
    0 0 10px var(--active-cyan),
    0 0 18px rgba(105, 235, 255, 0.55);
  box-shadow: none;
}

#contact-modal .contact-error-c-btn {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 50;
  width: auto !important;
  min-width: 0 !important;
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  letter-spacing: 1px;
  pointer-events: auto !important;
}

#contact-modal .site-contact-form {
  position: relative;
  z-index: 1;
}

#contact-modal .contact-error-c-btn:hover:not(:disabled) {
  color: #ffffff !important;
}

.signin-free-1a #contact-modal #btn-footer-contact-submit.is-submit-cooldown {
  font-size: 1.05rem !important;
  letter-spacing: 0.5px;
  cursor: not-allowed !important;
  opacity: 0.88;
}

#contact-modal .terms-modal-close-x:hover {
  color: #ffffff;
  background: var(--active-ambient);
  text-shadow: none;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

#contact-modal .cyber-input,
#contact-modal .cyber-textarea {
  border: 0 !important;
  outline: none !important;
  color: var(--card-global-text-color) !important;
  font-size: 1.1rem !important;
  line-height: 1.55;
  background: rgba(3, 10, 22, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    inset 0 0 10px var(--active-ambient),
    0 0 14px 1px var(--active-shadow) !important;
  transition: all 0.3s ease;
}

#contact-modal .cyber-input:hover:not(:disabled),
#contact-modal .cyber-textarea:hover:not(:disabled),
#contact-modal .cyber-input:focus,
#contact-modal .cyber-textarea:focus {
  color: #ffffff !important;
  background: var(--active-ambient) !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

#contact-modal .cyber-btn-interactive {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--card-global-text-color) !important;
  font-size: 1.5rem !important;
  padding: 18px 40px !important;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
  transition: all 0.3s ease;
}

#contact-modal .cyber-btn-interactive:hover:not(:disabled) {
  border: 0 !important;
  color: var(--card-global-text-color-hover, #aeb6be) !important;
  background: var(--active-ambient) !important;
  font-weight: bold !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

.site-contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-bottom: 8px;
  box-sizing: border-box;
}

.site-contact-label {
  display: block;
  width: 100%;
  max-width: var(--form-element-max-width);
  margin: 0 auto 6px auto;
}

.site-contact-message {
  min-height: 120px;
  max-height: 180px;
}

.site-contact-actions {
  margin-top: 12px !important;
  margin-bottom: 4px !important;
  width: 100%;
  max-width: var(--form-element-max-width);
}

#contact-modal .site-contact-actions {
  margin-top: 30px !important;
}

.site-contact-success {
  width: 100%;
  max-width: var(--form-element-max-width);
  margin: 8px 0 0 0;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  color: #39ff14 !important;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
}

.signin-free-1a #contact-modal .site-contact-fields {
  width: 100%;
}

.signin-free-1a #contact-modal .site-contact-actions {
  margin-top: 48px !important;
  display: flex;
  flex-direction: column !important;
  align-items: center;
  gap: 0;
}

.signin-free-1a #contact-modal .site-contact-form.has-contact-validation .site-contact-actions,
.signin-free-1a #contact-modal .site-contact-form.has-contact-processing .site-contact-actions {
  margin-top: 14px !important;
}

.signin-free-1a #contact-modal .site-contact-validation {
  width: 100%;
  max-width: none;
  margin: 0 auto 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: var(--font-cyber);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #ff1a2e !important;
  text-shadow: 0 0 12px rgba(255, 26, 46, 0.65);
}

.signin-free-1a #contact-modal .site-contact-validation:not(.hidden) {
  margin-top: 54px;
  margin-bottom: 12px;
}

.signin-free-1a #contact-modal .site-contact-processing-status {
  width: 100%;
  max-width: none;
  margin: 0 auto 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: var(--font-cyber);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--card-global-text-color, #e0f5ff) !important;
  text-shadow: 0 0 10px rgba(105, 235, 255, 0.45);
}

.signin-free-1a #contact-modal .site-contact-processing-status:not(.hidden) {
  margin-top: 54px;
  margin-bottom: 12px;
}

.signin-free-1a #contact-modal .site-contact-processing-status .site-contact-phase-text,
.signin-free-1a #contact-modal .site-contact-processing-status .site-contact-timer {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.signin-free-1a #contact-modal .site-contact-processing-status .site-contact-timer {
  margin-left: 0.35em;
  color: var(--active-cyan, #69ebff) !important;
  text-shadow: 0 0 10px var(--active-shadow);
}

.signin-free-1a #contact-modal .site-contact-submit-slot {
  position: relative;
  width: 100%;
  min-height: 72px;
}

.signin-free-1a #contact-modal .site-contact-submit-slot #btn-footer-contact-submit {
  width: 100%;
}

.signin-free-1a #contact-modal .site-contact-processing {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow);
}

.signin-free-1a #contact-modal .site-contact-processing.hidden {
  display: none !important;
}

.signin-free-1a #contact-modal #btn-footer-contact-submit,
.signin-free-1a #contact-modal #btn-footer-contact-close {
  width: 100%;
}

.signin-free-1a #contact-modal .site-contact-phase {
  width: 100%;
  max-width: var(--form-element-max-width);
  margin: 12px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.signin-free-1a #contact-modal .site-contact-phase.hidden {
  display: none !important;
}

.signin-free-1a #contact-modal .site-contact-spinner {
  width: 52px !important;
  height: 52px !important;
  border-width: 3px !important;
}

.signin-free-1a #contact-modal .site-contact-phase-text {
  margin: 0;
  font-family: var(--font-cyber);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.45;
  color: var(--card-global-text-color, #e0f5ff);
}

.signin-free-1a #contact-modal .site-contact-timer {
  margin: 0;
  font-family: var(--font-cyber);
  font-size: 1.35rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--active-cyan, #ffbe0b);
  text-shadow: 0 0 10px var(--active-shadow);
}

.signin-free-1a #contact-modal #btn-footer-contact-close {
  width: 100%;
}

/* USE page — error above modals; passthrough keeps contact/privacy clickable when open */
.signin-free-1a #panel-error:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10950 !important;
}

.signin-free-1a #panel-error.error-behind-contact:not(.hidden) {
  z-index: 10800 !important;
}

.signin-free-1a #privacy-modal.site-modal:not(.hidden) {
  z-index: 10600 !important;
}

.signin-free-1a #contact-modal.site-modal:not(.hidden) {
  z-index: 10850 !important;
  pointer-events: auto !important;
}

.signin-free-1a #contact-modal.site-modal.contact-over-error:not(.hidden) {
  z-index: 11000 !important;
  pointer-events: auto !important;
  background: rgba(3, 10, 22, 0.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.signin-free-1a #contact-modal.site-modal:not(.hidden) .terms-modal-panel,
.signin-free-1a #contact-modal.site-modal:not(.hidden) .site-contact-form,
.signin-free-1a #contact-modal.site-modal:not(.hidden) .cyber-btn-interactive,
.signin-free-1a #contact-modal.site-modal:not(.hidden) .contact-error-c-btn {
  pointer-events: auto !important;
}

.signin-free-1a #panel-error.error-overlay-passthrough,
.signin-free-1a #panel-error.error-overlay-passthrough * {
  pointer-events: none !important;
}

.signin-free-1a #panel-error.error-overlay-passthrough #close-error-btn,
.signin-free-1a #panel-error.error-overlay-passthrough #close-error-btn-top,
.signin-free-1a #panel-error.error-overlay-passthrough #error-contact-support-link {
  pointer-events: auto !important;
}

.signin-free-1a #contact-modal .site-contact-validation.hidden {
  display: none !important;
}

.signin-free-1a #contact-modal .site-contact-close-row {
  width: 100%;
  max-width: var(--form-element-max-width);
  margin: 18px auto 0 auto;
  display: block;
}

.signin-free-1a #contact-modal .site-contact-close-row #btn-footer-contact-close {
  width: 100%;
  display: block;
}

.signin-free-1a #contact-modal .site-contact-success {
  display: block;
  width: 100%;
  max-width: var(--form-element-max-width);
  margin: 0 auto 0 auto;
}

.signin-free-1a #contact-modal .site-contact-form.is-contact-success {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: clamp(240px, 36vh, 380px);
}

.signin-free-1a #contact-modal .site-contact-form.is-contact-success .site-contact-actions {
  display: none !important;
}

.signin-free-1a #contact-modal .site-contact-form.is-contact-success #footer-contact-success.site-contact-success:not(.hidden) {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 36px;
  box-sizing: border-box;
  font-size: 1.55rem;
  line-height: 1.5;
  text-align: center;
}

.signin-free-1a #contact-modal .site-contact-form.is-contact-success .site-contact-close-row {
  margin-top: 0;
  padding-bottom: 6px;
}

.signin-free-1a #contact-modal .terms-modal-panel.site-modal-panel--form {
  display: flex;
  flex-direction: column;
}

.signin-free-1a #contact-modal .cyber-input.contact-field-invalid,
.signin-free-1a #contact-modal .cyber-textarea.contact-field-invalid,
.signin-free-1a #contact-modal #footer-contact-email.contact-field-invalid,
.signin-free-1a #contact-modal #footer-contact-subject.contact-field-invalid,
.signin-free-1a #contact-modal #footer-contact-message.contact-field-invalid {
  box-shadow:
    inset 0 0 18px rgba(255, 30, 40, 0.65),
    0 0 28px 5px rgba(255, 20, 35, 1) !important;
}

.signin-free-1a #contact-modal .cyber-input.contact-field-invalid:hover:not(:disabled),
.signin-free-1a #contact-modal .cyber-textarea.contact-field-invalid:hover:not(:disabled),
.signin-free-1a #contact-modal .cyber-input.contact-field-invalid:focus,
.signin-free-1a #contact-modal .cyber-textarea.contact-field-invalid:focus,
.signin-free-1a #contact-modal #footer-contact-email.contact-field-invalid:focus,
.signin-free-1a #contact-modal #footer-contact-subject.contact-field-invalid:focus,
.signin-free-1a #contact-modal #footer-contact-message.contact-field-invalid:focus {
  box-shadow:
    inset 0 0 20px rgba(255, 30, 40, 0.75),
    0 0 34px 6px rgba(255, 20, 35, 1) !important;
}

/* USE contact validation — last in file for cascade priority */
#contact-modal #footer-contact-validation.site-contact-validation:not(.hidden) {
  color: #ff1a2e !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  text-shadow: 0 0 12px rgba(255, 26, 46, 0.65) !important;
}

#contact-modal #footer-contact-email.contact-field-invalid,
#contact-modal #footer-contact-subject.contact-field-invalid,
#contact-modal #footer-contact-message.contact-field-invalid {
  box-shadow:
    inset 0 0 18px rgba(255, 30, 40, 0.65),
    0 0 28px 5px rgba(255, 20, 35, 1) !important;
}

/* Sign-in pages: soften near-white text on main card + modals */
.signin-free .holo-card,
.signin-free #privacy-modal .terms-modal-panel,
.signin-free #contact-modal .terms-modal-panel,
.signin-free .terms-modal-panel {
  --card-global-text-color: #a0a8b0;
  --card-global-text-color-hover: #b8c0c8;
  --card-title-text-color: #aeb6be;
  --neon-cyan: rgba(158, 228, 255, 0.88);
  --signin-glow-warm: rgba(255, 200, 88, 0.20);
  --signin-glow-cyan: rgba(145, 220, 240, 0.52);
  --signin-glow-cyan-soft: rgba(145, 220, 240, 0.42);
  --signin-glow-cyan-nav: rgba(145, 220, 240, 0.58);
}

.signin-free .holo-card h2,
.signin-free .holo-card h2#interface-title,
.signin-free .card-header .system-hash {
  color: var(--card-title-text-color, #aeb6be) !important;
}

.signin-free-1a:not(.practitioner-beacon-1a):not(.arranger-free-1a):not(.composer-free-1a):not(.home-free-1a) .holo-card h2#interface-title {
  color: var(--ui-title-text-color) !important;
}

.signin-free-1a:not(.practitioner-beacon-1a):not(.arranger-free-1a):not(.composer-free-1a):not(.home-free-1a) .holo-card .card-header .system-hash {
  color: var(--ui-muted-text-color) !important;
}

.signin-free #panel-account .terms-review-btn,
.signin-free #panel-account .cyber-checkbox-container,
.signin-free #panel-account .checkbox-label-text,
.signin-free #panel-account .cyber-btn-interactive,
.signin-free .gsi-material-button,
.signin-free .gsi-material-button .gsi-material-button-contents {
  color: var(--card-global-text-color) !important;
}

.signin-free #panel-account .cyber-btn-interactive:hover:not(:disabled),
.signin-free #panel-account .terms-review-btn:hover,
.signin-free-1a #panel-account .cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #panel-account .terms-review-btn:hover,
.signin-free-1a #panel-account .oauth-primary-btn:hover:not(:disabled),
.signin-free-1a #panel-account a.oauth-primary-btn:hover,
.signin-free-1a #panel-account .cyber-checkbox-container:hover,
.signin-free-1a #panel-account .cyber-checkbox-container:has(input:focus-visible),
.signin-free .gsi-material-button:not(:disabled):hover,
.signin-free .gsi-material-button:not(:disabled):hover .gsi-material-button-contents {
  font-weight: bold !important;
}

.signin-free #privacy-modal .cyber-btn-interactive,
.signin-free #contact-modal .cyber-btn-interactive,
.signin-free #contact-modal .cyber-input,
.signin-free #contact-modal .cyber-textarea,
.signin-free #contact-modal .site-contact-processing-status,
.signin-free #contact-modal .site-contact-phase-text {
  color: var(--card-global-text-color) !important;
}

.signin-free #privacy-modal .cyber-btn-interactive:hover,
.signin-free #contact-modal .cyber-btn-interactive:hover:not(:disabled),
.signin-free #contact-modal #btn-footer-contact-submit.cyber-btn-interactive:hover:not(:disabled),
.signin-free #contact-modal #btn-footer-contact-close.cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #contact-modal #btn-footer-contact-submit.cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #contact-modal #btn-footer-contact-close.cyber-btn-interactive:hover:not(:disabled),
.signin-free #contact-modal .cyber-input:hover:not(:disabled),
.signin-free #contact-modal .cyber-textarea:hover:not(:disabled),
.signin-free #contact-modal .cyber-input:focus,
.signin-free #contact-modal .cyber-textarea:focus,
.signin-free #privacy-modal .terms-modal-close-x:hover,
.signin-free #contact-modal .terms-modal-close-x:hover,
.signin-free .terms-modal .cyber-btn-interactive:hover,
.signin-free .terms-modal-close-x:hover {
  color: #aeb6be !important;
}

/* OAuth success page — sign-in verification + subscribe step */
.oauth-success-1a .oauth-success-flow {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.oauth-success-1a .oauth-processing-status {
  width: 100%;
  max-width: var(--form-element-max-width);
  margin: 0 auto 12px auto;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: var(--font-cyber);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--card-global-text-color, #e0f5ff) !important;
  text-shadow:
    0 0 12px var(--active-ambient),
    0 0 20px var(--active-shadow);
}

.oauth-success-1a .oauth-processing-status.hidden {
  display: none !important;
}

.oauth-success-1a .oauth-processing-status .oauth-phase-text,
.oauth-success-1a .oauth-processing-status .oauth-timer {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-shadow: inherit;
}

.oauth-success-1a .oauth-processing-status .oauth-timer {
  margin-left: 0.35em;
  color: var(--active-cyan, #69ebff) !important;
}

.oauth-success-1a .oauth-action-row {
  width: 100%;
  max-width: var(--form-element-max-width);
  margin: 0 auto;
}

.oauth-success-1a .oauth-action-slot {
  position: relative;
  width: 100%;
  min-height: 96px;
}

.oauth-success-1a .oauth-action-slot .oauth-primary-btn {
  width: 100%;
  min-height: 96px;
  padding: 22px 32px !important;
  font-family: var(--font-cyber) !important;
  font-size: 2.25rem !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

.oauth-success-1a .oauth-action-slot .oauth-primary-btn.hidden {
  display: none !important;
}

.oauth-success-1a .oauth-processing {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow);
}

.oauth-success-1a .oauth-processing.hidden {
  display: none !important;
}

.oauth-success-1a .oauth-spinner {
  width: 52px !important;
  height: 52px !important;
  border-width: 3px !important;
}

.oauth-success-1a .oauth-subscribe-success {
  width: 100%;
  min-height: 96px;
  margin: 0;
  padding: 22px 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-cyber);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  color: var(--card-global-text-color, #e0f5ff) !important;
  text-shadow: 0 0 10px rgba(105, 235, 255, 0.45);
}

.oauth-success-1a .oauth-subscribe-success.hidden {
  display: none !important;
}

.oauth-success-1a #panel-error .error-box {
  position: relative;
}

.oauth-success-1a #panel-error .error-close-x {
  position: absolute;
  top: 2px;
  right: 10px;
  z-index: 2;
  color: #ffb3c0;
  text-shadow:
    0 0 10px rgba(255, 45, 85, 0.75),
    0 0 18px rgba(255, 45, 85, 0.45);
}

.oauth-success-1a #panel-error .error-close-x:hover {
  color: #ffffff;
  background: rgba(255, 45, 85, 0.18);
  text-shadow: none;
  box-shadow:
    inset 0 0 15px rgba(255, 45, 85, 0.35),
    0 0 30px 4px rgba(255, 45, 85, 0.55) !important;
}

.signin-free-1a #panel-error.error-overlay-passthrough #close-error-btn-top {
  pointer-events: auto !important;
}

.payment-success-1a .card-header .system-hash,
.payment-success-1a #interface-subtitle {
  white-space: normal;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}

.payment-success-1a .oauth-action-slot .oauth-primary-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
}

.payment-success-1a .oauth-action-slot .oauth-primary-btn {
  white-space: nowrap !important;
  font-size: 2rem !important;
  letter-spacing: 0.5px !important;
}

.full-account-paid-1a .card-header .system-hash,
.full-account-paid-1a #interface-subtitle {
  white-space: normal;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.full-account-paid-1a .nav-account.nav-account--logged-in:not(.active):not(:hover) .account-name,
.full-account-paid-1a .nav-account.nav-account--logged-in:not(.active):not(:hover) #account-status-label {
  color: #2ea610 !important;
  text-shadow: 0 0 4px rgba(57, 255, 20, 0.22) !important;
}

.full-account-paid-1a .nav-account.nav-account--logged-in:hover .account-name,
.full-account-paid-1a .nav-account.nav-account--logged-in:hover #account-status-label {
  color: #7dff6a !important;
  text-shadow:
    0 0 10px #39ff14,
    0 0 20px rgba(57, 255, 20, 0.65) !important;
}

.full-account-paid-1a .oauth-action-slot .oauth-primary-btn {
  white-space: nowrap !important;
  font-size: 2rem !important;
  letter-spacing: 0.5px !important;
}

.logout-use-1a .oauth-action-slot .oauth-primary-btn,
.full-account-paid-1a .oauth-action-slot a.oauth-primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none !important;
  color: var(--card-global-text-color, #c2ced8) !important;
}

.logout-use-1a .oauth-action-slot a.oauth-primary-btn:hover {
  font-weight: bold !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

.logout-use-1a .oauth-action-slot .oauth-primary-btn {
  white-space: nowrap !important;
  font-size: 2rem !important;
  letter-spacing: 0.5px !important;
}

.logout-use-1a .card-header .system-hash,
.logout-use-1a #interface-subtitle {
  white-space: normal;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.signin-free-1a .holo-card .is-main-card-lockout,
.signin-free-1a .holo-card button.is-main-card-lockout:disabled,
.signin-free-1a .holo-card a.is-main-card-lockout {
  pointer-events: auto !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.signin-free-1a .holo-card .gsi-material-button.is-main-card-lockout:disabled {
  cursor: not-allowed !important;
}

.signin-free-1a .holo-card .is-main-card-lockout:hover,
.signin-free-1a .holo-card a.oauth-primary-btn.is-main-card-lockout:hover {
  color: var(--card-global-text-color, #c2ced8) !important;
  box-shadow: none !important;
  filter: none !important;
}

.signin-free-1a .holo-card .cyber-checkbox-container.is-main-card-lockout {
  pointer-events: auto !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.signin-free-1a .holo-card .cyber-checkbox-container.is-main-card-lockout:hover,
.signin-free-1a .holo-card .cyber-checkbox-container.is-main-card-lockout:has(input:focus-visible) {
  background: transparent !important;
  color: var(--card-global-text-color, #c2ced8) !important;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
}

.signin-free-1a .nav-account.nav-account--unsubscribed:not(.active):not(:hover) .account-name,
.signin-free-1a .nav-account.nav-account--unsubscribed:not(.active):not(:hover) #account-status-label {
  color: #c99200 !important;
  text-shadow: 0 0 4px rgba(255, 190, 11, 0.22) !important;
}

.signin-free-1a .nav-account.nav-account--unsubscribed:not(.active):not(:hover) .account-avatar.user-logged-in-unpaid {
  border-color: rgba(255, 190, 11, 0.35) !important;
  color: #ffbe0b !important;
  background: rgba(255, 190, 11, 0.08) !important;
  box-shadow: 0 0 8px rgba(255, 190, 11, 0.28) !important;
  filter: none !important;
}

.signin-free-1a .nav-account.nav-account--unsubscribed:not(.active):not(:hover) .account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid {
  color: #ffbe0b !important;
  filter: drop-shadow(0 0 2px rgba(255, 190, 11, 0.4)) !important;
}

.signin-free-1a .nav-account.nav-account--logged-in:not(.active):not(:hover) .account-name,
.signin-free-1a .nav-account.nav-account--logged-in:not(.active):not(:hover) #account-status-label {
  color: #2ea610 !important;
  text-shadow: 0 0 4px rgba(57, 255, 20, 0.22) !important;
}

.signin-free-1a .nav-account.nav-account--logged-in:not(.active):not(:hover) .account-avatar.user-logged-in {
  background: rgba(57, 255, 20, 0.08) !important;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.35) !important;
  filter: drop-shadow(0 0 2px rgba(57, 255, 20, 0.35)) !important;
}

.signin-free-1a .nav-account.nav-account--logged-in:not(.active):not(:hover) .account-avatar.user-logged-in svg {
  color: #39ff14 !important;
  filter: drop-shadow(0 0 2px rgba(57, 255, 20, 0.35)) !important;
}

/* USE flow nav — active page sits between default and hover intensity */
.signin-free-1a .nav-account.active:not(:hover):not(.nav-account--unsubscribed):not(.nav-account--logged-in) .account-name,
.signin-free-1a .nav-account.active:not(:hover):not(.nav-account--unsubscribed):not(.nav-account--logged-in) #account-status-label {
  color: #9ee8f8 !important;
  text-shadow:
    0 0 10px var(--neon-cyan),
    0 0 18px rgba(105, 235, 255, 0.62) !important;
}

.signin-free-1a .nav-account.active:not(:hover):not(.nav-account--unsubscribed):not(.nav-account--logged-in) .account-avatar.user-logged-out {
  border-color: rgba(105, 235, 255, 0.45) !important;
  box-shadow: 0 0 14px rgba(105, 235, 255, 0.55) !important;
  filter: drop-shadow(0 0 4px rgba(105, 235, 255, 0.45)) !important;
}

.signin-free-1a .nav-account.active:not(:hover):not(.nav-account--unsubscribed):not(.nav-account--logged-in) .account-avatar.user-logged-out svg {
  color: #9ee8f8 !important;
  filter: drop-shadow(0 0 4px rgba(105, 235, 255, 0.45)) !important;
}

.signin-free-1a .nav-account.nav-account--unsubscribed.active:not(:hover) .account-name,
.signin-free-1a .nav-account.nav-account--unsubscribed.active:not(:hover) #account-status-label,
.oauth-success-1a .nav-account.nav-account--unsubscribed.active:not(:hover) .account-name,
.oauth-success-1a .nav-account.nav-account--unsubscribed.active:not(:hover) #account-status-label {
  color: #ffcf52 !important;
  text-shadow:
    0 0 10px rgba(255, 190, 11, 0.85),
    0 0 18px rgba(255, 190, 11, 0.62) !important;
}

.signin-free-1a .nav-account.nav-account--unsubscribed.active:not(:hover) .account-avatar.user-logged-in-unpaid {
  border-color: rgba(255, 190, 11, 0.62) !important;
  color: #ffc94a !important;
  background: rgba(255, 190, 11, 0.11) !important;
  box-shadow: 0 0 14px rgba(255, 190, 11, 0.55) !important;
  filter: drop-shadow(0 0 4px rgba(255, 190, 11, 0.45)) !important;
}

.signin-free-1a .nav-account.nav-account--unsubscribed.active:not(:hover) .account-avatar.user-logged-in-unpaid .icon-logged-in-unpaid {
  color: #ffc94a !important;
  filter: drop-shadow(0 0 4px rgba(255, 190, 11, 0.55)) !important;
}

.signin-free-1a .nav-account.nav-account--logged-in.active:not(:hover) .account-name,
.signin-free-1a .nav-account.nav-account--logged-in.active:not(:hover) #account-status-label,
.full-account-paid-1a .nav-account.nav-account--logged-in.active:not(:hover) .account-name,
.full-account-paid-1a .nav-account.nav-account--logged-in.active:not(:hover) #account-status-label {
  color: #6ef048 !important;
  text-shadow:
    0 0 10px rgba(57, 255, 20, 0.85),
    0 0 18px rgba(57, 255, 20, 0.62) !important;
}

.signin-free-1a .nav-account.nav-account--logged-in.active:not(:hover) .account-avatar.user-logged-in {
  background: rgba(57, 255, 20, 0.12) !important;
  box-shadow: 0 0 14px rgba(57, 255, 20, 0.62) !important;
  filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.55)) !important;
}

.signin-free-1a .nav-account.nav-account--logged-in.active:not(:hover) .account-avatar.user-logged-in svg {
  color: #5ce830 !important;
  filter: drop-shadow(0 0 4px rgba(57, 255, 20, 0.55)) !important;
}

.signin-free-1a .nav-links .nav-item.active:not(:hover) {
  color: #9ee8f8 !important;
  text-shadow:
    0 0 10px var(--neon-cyan),
    0 0 18px var(--signin-glow-cyan-nav),
    0 0 14px var(--signin-glow-warm) !important;
}

.signin-free-1a .cyber-nav .nav-brand,
.signin-free-1a .cyber-nav .nav-brand .logo-text {
  color: #a0c0e0 !important;
}

.signin-free-1a .cyber-nav .nav-brand:hover,
.signin-free-1a .cyber-nav .nav-brand:hover .logo-text {
  color: var(--neon-cyan) !important;
  text-shadow: 0 0 10px var(--neon-cyan) !important;
}

.signin-free-1a .cyber-nav .nav-brand:hover .nav-logo-graphic {
  box-shadow: 0 0 12px var(--neon-cyan) !important;
  filter: drop-shadow(0 0 4px var(--neon-cyan)) !important;
}

.signin-free-1a .cyber-nav .nav-brand.active:not(:hover) {
  color: #9ee8f8 !important;
  text-shadow:
    0 0 10px var(--neon-cyan),
    0 0 18px var(--signin-glow-cyan-nav),
    0 0 14px var(--signin-glow-warm) !important;
}

.signin-free-1a .cyber-nav .nav-brand.active:not(:hover) .logo-text {
  color: #9ee8f8 !important;
  text-shadow:
    0 0 10px var(--neon-cyan),
    0 0 18px var(--signin-glow-cyan-nav),
    0 0 14px var(--signin-glow-warm) !important;
}

.signin-free-1a .cyber-nav .nav-brand.active:not(:hover) .nav-logo-graphic {
  box-shadow: 0 0 14px var(--neon-cyan) !important;
  filter: drop-shadow(0 0 6px var(--neon-cyan)) !important;
}

.practitioner-beacon-1a {
  scrollbar-gutter: stable;
}

.practitioner-beacon-1a .interface-container {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.practitioner-beacon-1a .holo-card[data-theme="resources"] {
  --active-cyan: #c8b0a0 !important;
  --active-blue: #383028 !important;
  --active-shadow: #6e6050 !important;
  --active-ambient: rgba(180, 160, 140, 0.12) !important;
  background: linear-gradient(
    155deg,
    rgba(var(--ui-glass-soft), 0.56) 0%,
    rgba(var(--ui-glass-mid), 0.70) 38%,
    rgba(var(--ui-glass-deep), 0.82) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(180, 160, 140, 0.05),
    0 0 25px var(--active-blue),
    0 0 30px 4px var(--active-shadow),
    0 0 70px 15px var(--active-ambient) !important;
}

.practitioner-beacon-1a .holo-card h2#interface-title {
  color: var(--ui-title-text-color) !important;
}

.practitioner-beacon-1a .holo-card .card-header .system-hash,
.practitioner-beacon-1a #interface-subtitle {
  color: var(--ui-muted-text-color) !important;
  white-space: normal;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.practitioner-beacon-1a #interface-subtitle .practitioner-subtitle-lead {
  display: block;
  white-space: nowrap;
}

.practitioner-beacon-1a #interface-subtitle .practitioner-subtitle-body {
  display: block;
  max-width: 57ch;
  margin: 0.35em auto 0;
}

.practitioner-beacon-1a .holo-card {
  justify-content: flex-start !important;
  width: 97%;
  max-width: 1920px;
  margin-inline: auto;
  overflow: visible;
}

.practitioner-beacon-1a .card-header {
  margin-bottom: 26px;
  flex-shrink: 0;
}

.practitioner-beacon-1a .card-body {
  flex-grow: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: visible;
}

.practitioner-beacon-1a .practitioner-article-shell {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
}

.practitioner-beacon-1a .practitioner-article-switcher {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
  margin: 20px auto 36px;
  padding: 0 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.practitioner-beacon-1a .practitioner-article-tab {
  font-family: var(--font-cyber);
  font-size: 1.32rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 1 auto;
  color: var(--ui-title-text-color, #aeb6be);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 12px 14px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: color 0.25s ease, box-shadow 0.25s ease, text-shadow 0.25s ease, background 0.25s ease;
}

.practitioner-beacon-1a .practitioner-article-tab:hover:not(.active) {
  font-weight: bold;
}

.practitioner-beacon-1a .practitioner-article-tab.active {
  font-weight: bold;
}

.practitioner-beacon-1a .practitioner-article-panels {
  width: 100%;
}

.practitioner-beacon-1a .practitioner-article-panel {
  width: 100%;
  text-align: center;
  animation: panelFadeIn 0.35s ease forwards;
}

.practitioner-beacon-1a .practitioner-article-title {
  margin: 0 0 38px;
  font-size: 1.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ui-title-text-color, #aeb6be);
}

.practitioner-beacon-1a .practitioner-article-body {
  width: 100%;
  max-width: 66ch;
  margin: 0 auto;
  text-align: center;
}

.practitioner-beacon-1a .practitioner-article-text {
  margin: 0 0 22px;
  font-size: 1.2rem;
  line-height: 1.78;
  letter-spacing: 0.02em;
  color: #b0b8c0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(0, 0, 0, 0.12);
}

.practitioner-beacon-1a .practitioner-article-list {
  display: inline-block;
  margin: 0 auto 22px;
  padding-left: 1.35em;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.78;
  letter-spacing: 0.02em;
  color: #b0b8c0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(0, 0, 0, 0.12);
}

.practitioner-beacon-1a .practitioner-article-list li {
  padding-left: 0.15em;
}

.practitioner-beacon-1a .practitioner-article-list li + li {
  margin-top: 0.6em;
}

.practitioner-beacon-1a .practitioner-article-section {
  width: 100%;
  margin: 0 0 20px;
  text-align: center;
}

.practitioner-beacon-1a .practitioner-article-section + .practitioner-article-section {
  margin-top: 42px;
}

.practitioner-beacon-1a .practitioner-article-section-summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-cyber);
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-title-text-color, #aeb6be);
  padding: 12px 18px;
  border-radius: 4px;
  transition: color 0.25s ease, box-shadow 0.25s ease, text-shadow 0.25s ease, background 0.25s ease;
}

.practitioner-beacon-1a .practitioner-article-section-summary::-webkit-details-marker {
  display: none;
}

.practitioner-beacon-1a .practitioner-article-section-summary::after {
  content: " +";
  opacity: 0.75;
}

.practitioner-beacon-1a .practitioner-article-section[open] .practitioner-article-section-summary::after {
  content: " −";
}

.practitioner-beacon-1a .practitioner-article-section-summary:hover,
.practitioner-beacon-1a .practitioner-article-section[open] .practitioner-article-section-summary {
  font-weight: bold;
}

.practitioner-beacon-1a .practitioner-article-section-content {
  margin-top: 20px;
  padding: 16px 24px 8px;
  background: rgba(6, 12, 22, 0.42);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow);
}

/* ==========================================================================
   ARRANGER FREE PAGE — copper-orange theme (distinct from error / amber / peach)
   ========================================================================== */

.holo-card[data-theme="arranger"] {
  --active-cyan: #f29a4a !important;
  --active-blue: #4a2810 !important;
  --active-shadow: #c46224 !important;
  --active-ambient: rgba(242, 154, 74, 0.14) !important;
  background: rgba(18, 10, 5, 0.45) !important;
}

.arranger-free-1a .holo-card[data-theme="arranger"] {
  --active-cyan: #f29a4a !important;
  --active-blue: #4a2810 !important;
  --active-shadow: #c46224 !important;
  --active-ambient: rgba(242, 154, 74, 0.14) !important;
  background: linear-gradient(
    155deg,
    rgba(22, 12, 6, 0.50) 0%,
    rgba(14, 8, 4, 0.62) 38%,
    rgba(8, 4, 2, 0.74) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(242, 154, 74, 0.06),
    0 0 25px var(--active-blue),
    0 0 30px 4px var(--active-shadow),
    0 0 70px 15px var(--active-ambient) !important;
}

.arranger-free-1a .holo-card h2#interface-title {
  color: var(--ui-title-text-color) !important;
}

.arranger-free-1a .holo-card .card-header .system-hash,
.arranger-free-1a #interface-subtitle {
  color: var(--ui-muted-text-color) !important;
  white-space: normal;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.arranger-free-1a .holo-card {
  justify-content: flex-start !important;
}

.arranger-free-1a .arranger-card-header {
  margin-bottom: 0;
  flex-shrink: 0;
}

.arranger-free-1a #interface-subtitle {
  margin-bottom: 18px;
}

.arranger-free-1a.arranger-paid-1a .arranger-free-tier-notice {
  display: none !important;
}

.arranger-free-1a.arranger-paid-1a .arranger-upload-default-label {
  display: none !important;
}

.arranger-free-1a.arranger-paid-1a #panel-arranger .arranger-file-upload-label,
.arranger-free-1a.arranger-paid-1a #panel-arranger .arranger-file-upload-label #upload-label-text {
  font-size: 1.22rem !important;
  letter-spacing: 1.2px !important;
}

.arranger-free-1a.arranger-paid-1a #panel-arranger .arranger-upload-active-label {
  display: block !important;
}

.arranger-free-1a #panel-arranger .arranger-upload-active-label {
  width: 100%;
  margin: 0 0 6px;
  text-align: center;
  white-space: nowrap;
  color: #a89888 !important;
  font-size: 1.22rem !important;
  font-weight: normal !important;
  letter-spacing: 1.2px !important;
  text-shadow: none !important;
}

.arranger-free-1a #panel-arranger .arranger-upload-active-label #arranger-active-file-name {
  color: #c8b8a8 !important;
  font-weight: 600 !important;
}

.arranger-free-1a #panel-arranger .arranger-upload-tooltip-zone:hover .arranger-upload-active-label,
.arranger-free-1a #panel-arranger .arranger-upload-active-label:hover {
  color: #ffd8a8 !important;
  text-shadow:
    0 0 12px rgba(242, 154, 74, 0.9),
    0 0 22px rgba(196, 98, 36, 0.7),
    0 0 34px rgba(242, 154, 74, 0.45) !important;
}

.arranger-free-1a .arranger-free-tier-notice {
  margin: 0 auto;
  max-width: 58ch;
  font-size: calc(1.85rem * 0.96);
  line-height: 1.5;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #e8a86a !important;
  text-shadow:
    0 0 10px #c46224,
    0 0 18px rgba(242, 154, 74, 0.45),
    0 0 28px rgba(242, 154, 74, 0.35) !important;
}

.arranger-free-1a .arranger-free-tier-notice-label {
  color: inherit !important;
  font-weight: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
}

.arranger-free-1a .arranger-free-tier-notice-link {
  color: #ffc078 !important;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-shadow:
    0 0 12px rgba(242, 154, 74, 0.55),
    0 0 22px rgba(196, 98, 36, 0.45) !important;
}

.arranger-free-1a .arranger-free-tier-notice-link:hover {
  color: #ffd8a8 !important;
  text-shadow:
    0 0 14px rgba(242, 154, 74, 0.7),
    0 0 26px rgba(196, 98, 36, 0.55) !important;
}

.free-tier-tooltip,
.arranger-tier-tooltip {
  position: fixed;
  z-index: 120;
  max-width: 16rem;
  padding: 10px 14px;
  font-family: var(--font-cyber);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
  color: #f0e8dc;
  background: rgba(18, 10, 5, 0.94);
  border-radius: 4px;
  box-shadow:
    inset 0 0 12px rgba(242, 154, 74, 0.12),
    0 0 20px 2px rgba(242, 154, 74, 0.35);
  transform: translateX(-50%);
  pointer-events: auto;
}

.free-tier-tooltip[hidden],
.arranger-tier-tooltip[hidden] {
  display: none !important;
}

.free-tier-tooltip--above {
  transform: translate(-50%, calc(-100% - 8px));
}

.free-tier-tooltip--left {
  transform: translate(calc(-100% - 8px), -50%);
}

.free-tier-tooltip-link,
.arranger-tier-tooltip-link {
  color: #f6c896;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  white-space: nowrap;
}

.free-tier-tooltip-link:hover,
.arranger-tier-tooltip-link:hover {
  color: #fff4e8;
}

.composer-free-1a .free-tier-tooltip {
  color: #e4f2e0;
  background: rgba(4, 20, 10, 0.94);
  box-shadow:
    inset 0 0 12px rgba(108, 200, 90, 0.14),
    0 0 20px 2px rgba(108, 200, 90, 0.38);
}

.composer-free-1a .free-tier-tooltip-link {
  color: #a8e89a;
}

.composer-free-1a .free-tier-tooltip-link:hover {
  color: #e8ffe4;
}

.free-tier-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4em;
  vertical-align: middle;
  line-height: 1;
}

.free-tier-lock-icon svg {
  display: block;
  width: 0.92em;
  height: 0.92em;
}

.arranger-free-1a .free-tier-lock-icon {
  color: #c46224;
  filter: drop-shadow(0 0 4px rgba(242, 154, 74, 0.35));
}

.composer-free-1a .free-tier-lock-icon {
  color: #19800a;
  filter: drop-shadow(0 0 4px rgba(108, 200, 90, 0.4));
}

.arranger-free-1a #panel-arranger .arranger-select-option.is-tier-locked {
  color: #8a7a6e !important;
  background: #ddd2c6 !important;
  cursor: not-allowed !important;
  font-weight: 600 !important;
}

.arranger-free-1a #panel-arranger .arranger-select-option.is-tier-locked:hover,
.arranger-free-1a #panel-arranger .arranger-select-option.is-tier-locked:focus {
  color: #8a7a6e !important;
  background: #ddd2c6 !important;
  font-weight: 600 !important;
}

.arranger-free-1a #panel-arranger .arranger-custom-select.is-tier-locked-dropdown .arranger-select-trigger.is-tier-locked {
  color: #a89888 !important;
  background: rgba(12, 8, 4, 0.35) !important;
  cursor: not-allowed !important;
  opacity: 0.92;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.22),
    0 0 16px 2px rgba(90, 70, 56, 0.35) !important;
}

.arranger-free-1a #panel-arranger .arranger-custom-select.is-tier-locked-dropdown .arranger-select-trigger.is-tier-locked:hover,
.arranger-free-1a #panel-arranger .arranger-custom-select.is-tier-locked-dropdown .arranger-select-trigger.is-tier-locked:focus {
  color: #a89888 !important;
  background: rgba(12, 8, 4, 0.35) !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.22),
    0 0 16px 2px rgba(90, 70, 56, 0.35) !important;
}

.arranger-free-1a #panel-arranger .is-tier-locked-cell .select-label.is-tier-locked-label {
  color: #a89888 !important;
  cursor: not-allowed !important;
}

.arranger-free-1a #panel-arranger .is-scale-gated-cell .select-label.is-scale-gated-label {
  color: #a89888 !important;
  cursor: not-allowed !important;
}

.arranger-free-1a #panel-arranger .is-scale-gated-cell:hover .select-label.is-scale-gated-label,
.arranger-free-1a #panel-arranger .is-scale-gated-cell .select-label.is-scale-gated-label:hover {
  font-weight: normal !important;
  font-size: 1.22rem !important;
  color: #ffd8a8 !important;
  text-shadow:
    0 0 12px rgba(242, 154, 74, 0.9),
    0 0 22px rgba(196, 98, 36, 0.7),
    0 0 34px rgba(242, 154, 74, 0.45) !important;
}

.arranger-free-1a #panel-arranger .arranger-custom-select.is-scale-gated-dropdown .arranger-select-trigger.is-scale-gated {
  color: #a89888 !important;
  background: rgba(12, 8, 4, 0.35) !important;
  cursor: not-allowed !important;
  opacity: 0.92;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.22),
    0 0 16px 2px rgba(90, 70, 56, 0.35) !important;
}

.arranger-free-1a #panel-arranger .arranger-custom-select.is-scale-gated-dropdown .arranger-select-trigger.is-scale-gated:hover,
.arranger-free-1a #panel-arranger .arranger-custom-select.is-scale-gated-dropdown .arranger-select-trigger.is-scale-gated:focus {
  color: #a89888 !important;
  background: rgba(12, 8, 4, 0.35) !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.22),
    0 0 16px 2px rgba(90, 70, 56, 0.35) !important;
}

.arranger-free-1a #panel-arranger .arranger-select-group-label {
  padding: 8px 12px 4px;
  font-family: var(--font-cyber);
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c46224 !important;
  text-shadow: 0 0 6px rgba(242, 154, 74, 0.35);
  cursor: default;
  pointer-events: none;
  list-style: none;
}

.arranger-free-1a #panel-arranger .arranger-select-list .arranger-select-group-label + .arranger-select-option {
  margin-top: 2px;
}

.arranger-gate-tooltip {
  max-width: 18rem;
}

.arranger-free-1a .arranger-card-body {
  width: 100%;
  flex-grow: 0 !important;
  margin: 0 !important;
  padding: 0 0 20px !important;
}

.arranger-free-1a .arranger-workspace {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arranger-free-1a .arranger-upload-zone {
  width: 100%;
  max-width: 560px;
  margin: 38px auto 0;
  padding: 0 12px;
  box-sizing: border-box;
}

.arranger-free-1a .arranger-upload-tooltip-zone {
  width: 100%;
}

.arranger-free-1a .arranger-upload-field {
  width: 100%;
}

.arranger-free-1a .arranger-config-sections {
  width: 100%;
  margin-top: 76px;
  padding: 0 12px;
  box-sizing: border-box;
}

.arranger-free-1a .arranger-config-section {
  width: 100%;
  margin: 0;
  text-align: center;
}

.arranger-free-1a .arranger-config-section + .arranger-config-section {
  margin-top: 40px;
}

.arranger-free-1a .arranger-config-section-summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-cyber);
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-title-text-color, #aeb6be);
  padding: 12px 18px;
  border-radius: 4px;
  transition: color 0.25s ease, box-shadow 0.25s ease, text-shadow 0.25s ease, background 0.25s ease;
}

.arranger-free-1a .arranger-config-section-summary::-webkit-details-marker {
  display: none;
}

.arranger-free-1a .arranger-config-section-summary::after {
  content: " +";
  opacity: 0.75;
}

.arranger-free-1a .arranger-config-section[open] .arranger-config-section-summary::after {
  content: " −";
}

.arranger-free-1a .arranger-config-section-summary:hover,
.arranger-free-1a .arranger-config-section[open] .arranger-config-section-summary {
  font-weight: bold;
}

.arranger-free-1a .arranger-config-section-content {
  margin-top: 18px;
  padding: 18px 20px 14px;
  background: rgba(12, 8, 4, 0.42);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(242, 154, 74, 0.22),
    0 0 38px rgba(0, 0, 0, 0.28);
}

.arranger-free-1a .arranger-section-text {
  margin: 0 auto 22px;
  max-width: 66ch;
  font-size: 1.2rem;
  line-height: 1.78;
  letter-spacing: 0.02em;
  color: #b0b8c0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(0, 0, 0, 0.12);
}

.arranger-free-1a .arranger-section-text:last-of-type {
  margin-bottom: 20px;
}

.arranger-free-1a .arranger-dropdown-row {
  margin-top: 8px;
  gap: 16px;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  justify-content: center !important;
}

.arranger-free-1a .arranger-dropdown-row .dropdown-cell-wrapper {
  min-width: 0;
  flex: 0 0 200px;
  width: 200px;
  max-width: 200px;
}

.arranger-free-1a .arranger-dropdown-row--triple .dropdown-cell-wrapper {
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
}

.arranger-free-1a .arranger-dropdown-row:not(.arranger-dropdown-row--triple) .dropdown-cell-wrapper--wide-label {
  flex: 0 0 248px;
  width: 248px;
  max-width: 248px;
}

.arranger-free-1a .arranger-custom-select {
  position: relative;
  width: 100%;
}

.arranger-free-1a #panel-arranger select.cyber-select.arranger-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.arranger-free-1a #panel-arranger .arranger-select-trigger {
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.arranger-free-1a #panel-arranger .arranger-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #f0e6da;
  border-radius: 4px;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.08),
    0 0 20px 2px var(--active-shadow);
  max-height: 220px;
  overflow-y: auto;
}

.arranger-free-1a #panel-arranger .arranger-select-list.hidden {
  display: none !important;
}

.arranger-free-1a #panel-arranger .arranger-select-option {
  padding: 10px 14px;
  font-family: var(--font-cyber);
  font-size: 1.05rem;
  font-weight: 600;
  color: #5a4638;
  background: #f0e6da;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
}

.arranger-free-1a #panel-arranger .arranger-select-option.is-selected {
  background: #e4d2c0;
  color: #6b5344;
}

.arranger-free-1a #panel-arranger .arranger-select-option:hover,
.arranger-free-1a #panel-arranger .arranger-select-option:focus {
  background: #5c2808 !important;
  color: #f2e0d0 !important;
  font-weight: bold !important;
}

.arranger-free-1a #panel-arranger .arranger-custom-select.is-open .arranger-select-trigger {
  font-weight: bold !important;
}

.arranger-free-1a #panel-arranger .cyber-select,
.arranger-free-1a #panel-arranger .arranger-select-trigger.cyber-select {
  width: 100%;
  border: 0 !important;
  outline: none !important;
  padding: 10px 12px;
  font-size: 1.05rem !important;
  color: var(--card-global-text-color) !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

.arranger-free-1a #panel-arranger .arranger-select-trigger.cyber-select:hover,
.arranger-free-1a #panel-arranger .arranger-select-trigger.cyber-select:focus,
.arranger-free-1a #panel-arranger .cyber-select:hover,
.arranger-free-1a #panel-arranger .cyber-select:focus {
  font-weight: bold !important;
}

.arranger-free-1a #panel-arranger .dropdown-cell-wrapper:hover {
  position: relative;
  z-index: 2;
}

.arranger-free-1a #panel-arranger .select-label {
  font-size: 1.22rem !important;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  color: var(--active-cyan) !important;
  text-shadow: 0 0 8px rgba(242, 154, 74, 0.35);
  white-space: nowrap;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.arranger-free-1a #panel-arranger .dropdown-cell-wrapper:hover .select-label,
.arranger-free-1a #panel-arranger .select-label:hover {
  font-weight: normal !important;
  color: #ffd8a8 !important;
  text-shadow:
    0 0 12px rgba(242, 154, 74, 0.9),
    0 0 22px rgba(196, 98, 36, 0.7),
    0 0 34px rgba(242, 154, 74, 0.45) !important;
}

.arranger-free-1a #panel-arranger .arranger-upload-default-label {
  width: 100%;
  margin: 0 0 6px;
  text-align: center;
  white-space: nowrap;
  color: #a89888 !important;
  cursor: not-allowed !important;
  font-size: 1.22rem !important;
  font-weight: normal !important;
  letter-spacing: 1.2px !important;
  text-shadow: none !important;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.arranger-free-1a #panel-arranger .arranger-upload-tooltip-zone:hover .arranger-upload-default-label,
.arranger-free-1a #panel-arranger .arranger-upload-default-label:hover {
  font-weight: normal !important;
  font-size: 1.22rem !important;
  color: #ffd8a8 !important;
  text-shadow:
    0 0 12px rgba(242, 154, 74, 0.9),
    0 0 22px rgba(196, 98, 36, 0.7),
    0 0 34px rgba(242, 154, 74, 0.45) !important;
}

.arranger-free-1a .arranger-submit-row {
  margin-top: 48px !important;
  margin-bottom: 8px !important;
  width: 100%;
  max-width: 420px;
  flex-direction: column;
  align-items: center;
}

.arranger-free-1a #panel-arranger #btn-arranger-submit.cyber-btn-interactive {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: var(--card-global-text-color) !important;
  font-size: 1.35rem !important;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 16px 28px;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow);
  transition: all 0.3s ease;
}

.arranger-free-1a #panel-arranger #btn-arranger-submit.cyber-btn-interactive:hover:not(:disabled) {
  font-weight: bold !important;
}

.arranger-free-1a #panel-arranger #btn-arranger-submit.is-submit-cooldown {
  font-size: 1.2rem !important;
  letter-spacing: 0.5px;
  cursor: not-allowed !important;
  opacity: 0.88;
}

.arranger-free-1a #panel-arranger .arranger-file-upload-label.is-upload-tier-locked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  cursor: not-allowed !important;
  color: #a89888 !important;
  background: rgba(12, 8, 4, 0.35) !important;
  opacity: 0.92;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.22),
    0 0 16px 2px rgba(90, 70, 56, 0.35) !important;
}

.arranger-free-1a #panel-arranger .arranger-file-upload-label.is-upload-tier-locked:hover,
.arranger-free-1a #panel-arranger .arranger-file-upload-label.is-upload-tier-locked:focus {
  font-weight: 600 !important;
  color: #a89888 !important;
  background: rgba(12, 8, 4, 0.35) !important;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.22),
    0 0 16px 2px rgba(90, 70, 56, 0.35) !important;
}

.arranger-free-1a #panel-arranger .arranger-upload-tooltip-zone:hover .arranger-file-upload-label.is-upload-tier-locked #upload-label-text,
.arranger-free-1a #panel-arranger .arranger-file-upload-label.is-upload-tier-locked:hover #upload-label-text,
.arranger-free-1a #panel-arranger .arranger-file-upload-label.is-upload-tier-locked:focus #upload-label-text {
  font-weight: normal !important;
  color: #ffd8a8 !important;
  text-shadow:
    0 0 12px rgba(242, 154, 74, 0.9),
    0 0 22px rgba(196, 98, 36, 0.7),
    0 0 34px rgba(242, 154, 74, 0.45) !important;
}

.arranger-upload-tooltip {
  max-width: 20rem;
}

.arranger-free-1a #panel-arranger .arranger-file-upload-label {
  display: block;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  color: var(--card-global-text-color) !important;
  padding: 18px 22px !important;
  min-height: 58px !important;
  box-sizing: border-box;
  font-family: var(--font-cyber);
  font-size: 1.35rem !important;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-align: center;
  cursor: pointer;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow);
  transition: all 0.3s ease;
}

.arranger-free-1a #panel-arranger .arranger-file-upload-label:not(:hover) #upload-label-text {
  text-shadow: none;
}

.arranger-free-1a #panel-arranger .arranger-file-upload-label:hover {
  font-weight: bold !important;
}

.arranger-free-1a #panel-arranger .arranger-file-upload-label:not(:hover) {
  font-weight: 600 !important;
}

/* ==========================================================================
   COMPOSER FREE PAGE — same layout/shadows as arranger, generator green palette
   ========================================================================== */

.composer-free-1a {
  scrollbar-gutter: stable;
}

.composer-free-1a .interface-container {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.composer-free-1a .holo-card[data-theme="generator"] {
  --active-cyan: #6cc85a !important;
  --active-blue: #064e16 !important;
  --active-shadow: #19800a !important;
  --active-ambient: rgba(108, 200, 90, 0.14) !important;
  background: linear-gradient(
    155deg,
    rgba(4, 20, 10, 0.50) 0%,
    rgba(3, 16, 8, 0.62) 38%,
    rgba(2, 10, 5, 0.74) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(108, 200, 90, 0.06),
    0 0 25px var(--active-blue),
    0 0 30px 4px var(--active-shadow),
    0 0 70px 15px var(--active-ambient) !important;
}

.composer-free-1a .holo-card h2#interface-title {
  color: var(--ui-title-text-color) !important;
}

.composer-free-1a .holo-card .card-header .system-hash,
.composer-free-1a #interface-subtitle {
  color: var(--ui-muted-text-color) !important;
  white-space: normal;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.composer-free-1a .holo-card {
  justify-content: flex-start !important;
}

.composer-free-1a .composer-card-header {
  margin-bottom: 0;
  flex-shrink: 0;
  padding-bottom: 8px;
}

.composer-free-1a #interface-subtitle {
  margin-bottom: 18px;
}

.composer-free-1a .composer-free-tier-notice {
  margin: 0 auto 28px;
  max-width: 58ch;
  font-size: calc(1.85rem * 0.96);
  line-height: 1.5;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #9ed490 !important;
  text-shadow:
    0 0 10px #19800a,
    0 0 18px rgba(108, 200, 90, 0.45),
    0 0 28px rgba(108, 200, 90, 0.35) !important;
}

.composer-free-1a .composer-free-tier-notice-label {
  color: inherit !important;
  font-weight: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
}

.composer-free-1a .composer-free-tier-notice-link {
  color: #b8f0a8 !important;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-shadow:
    0 0 12px rgba(108, 200, 90, 0.55),
    0 0 22px rgba(25, 128, 10, 0.45) !important;
}

.composer-free-1a .composer-free-tier-notice-link:hover {
  color: #c8f8bc !important;
  text-shadow:
    0 0 14px rgba(108, 200, 90, 0.7),
    0 0 26px rgba(25, 128, 10, 0.55) !important;
}

.composer-free-1a .composer-card-body {
  width: 100%;
  flex-grow: 0 !important;
  margin: 0 !important;
  padding: 0 0 20px !important;
}

.composer-free-1a .composer-workspace {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.composer-free-1a .composer-config-sections {
  width: 100%;
  margin-top: 40px;
  padding: 0 12px;
  box-sizing: border-box;
}

.composer-free-1a .composer-config-section {
  width: 100%;
  margin: 0;
  text-align: center;
}

.composer-free-1a .composer-config-section + .composer-config-section {
  margin-top: 40px;
}

.composer-free-1a .composer-config-section-summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-cyber);
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ui-title-text-color, #aeb6be);
  padding: 12px 18px;
  border-radius: 4px;
  transition: color 0.25s ease, box-shadow 0.25s ease, text-shadow 0.25s ease, background 0.25s ease;
}

.composer-free-1a .composer-config-section-summary::-webkit-details-marker {
  display: none;
}

.composer-free-1a .composer-config-section-summary::after {
  content: " +";
  opacity: 0.75;
}

.composer-free-1a .composer-config-section[open] .composer-config-section-summary::after {
  content: " −";
}

.composer-free-1a .composer-config-section-summary:hover,
.composer-free-1a .composer-config-section[open] .composer-config-section-summary {
  font-weight: bold;
}

.composer-free-1a .composer-config-section-content {
  margin-top: 18px;
  padding: 18px 20px 14px;
  background: rgba(4, 12, 6, 0.42);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(108, 200, 90, 0.22),
    0 0 38px rgba(0, 0, 0, 0.28);
}

.composer-free-1a .composer-section-text {
  margin: 0 auto 22px;
  max-width: 66ch;
  font-size: 1.2rem;
  line-height: 1.78;
  letter-spacing: 0.02em;
  color: #b0b8c0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(0, 0, 0, 0.12);
}

.composer-free-1a .composer-section-text:last-of-type {
  margin-bottom: 20px;
}

.composer-free-1a .composer-dropdown-row {
  margin-top: 8px;
  gap: 16px;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  justify-content: center !important;
}

.composer-free-1a .composer-dropdown-row .dropdown-cell-wrapper {
  min-width: 0;
  flex: 0 0 200px;
  width: 200px;
  max-width: 200px;
}

.composer-free-1a .composer-dropdown-row--double .dropdown-cell-wrapper {
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
}

.composer-free-1a .composer-dropdown-row--double .dropdown-cell-wrapper--wide-label {
  flex: 0 0 248px;
  width: 248px;
  max-width: 248px;
}

.composer-free-1a .arranger-custom-select {
  position: relative;
  width: 100%;
}

.composer-free-1a #panel-composer select.cyber-select.arranger-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.composer-free-1a #panel-composer .arranger-select-trigger {
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.composer-free-1a #panel-composer .arranger-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #dcead8;
  border-radius: 4px;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.08),
    0 0 20px 2px var(--active-shadow);
  max-height: 220px;
  overflow-y: auto;
}

.composer-free-1a #panel-composer .arranger-select-list.hidden {
  display: none !important;
}

.composer-free-1a #panel-composer .arranger-select-option {
  padding: 10px 14px;
  font-family: var(--font-cyber);
  font-size: 1.05rem;
  font-weight: 600;
  color: #3a4e38;
  background: #dcead8;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
}

.composer-free-1a #panel-composer .arranger-select-option.is-selected {
  background: #c8dcc4;
  color: #425a40;
}

.composer-free-1a #panel-composer .arranger-select-option:hover,
.composer-free-1a #panel-composer .arranger-select-option:focus {
  background: #124a1e !important;
  color: #e4f2e0 !important;
  font-weight: bold !important;
}

.composer-free-1a #panel-composer .arranger-select-option.is-tier-locked {
  color: #6a8a66 !important;
  background: #c4d4c0 !important;
  cursor: not-allowed !important;
  font-weight: 600 !important;
}

.composer-free-1a #panel-composer .arranger-select-option.is-tier-locked:hover,
.composer-free-1a #panel-composer .arranger-select-option.is-tier-locked:focus {
  color: #6a8a66 !important;
  background: #c4d4c0 !important;
  font-weight: 600 !important;
}

.composer-free-1a #panel-composer .arranger-custom-select.is-tier-locked-dropdown .arranger-select-trigger.is-tier-locked {
  color: #7a9a76 !important;
  background: rgba(4, 16, 8, 0.35) !important;
  cursor: not-allowed !important;
  opacity: 0.92;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.22),
    0 0 16px 2px rgba(56, 90, 70, 0.35) !important;
}

.composer-free-1a #panel-composer .arranger-custom-select.is-tier-locked-dropdown .arranger-select-trigger.is-tier-locked:hover,
.composer-free-1a #panel-composer .arranger-custom-select.is-tier-locked-dropdown .arranger-select-trigger.is-tier-locked:focus {
  color: #7a9a76 !important;
  background: rgba(4, 16, 8, 0.35) !important;
  font-weight: 600 !important;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.22),
    0 0 16px 2px rgba(56, 90, 70, 0.35) !important;
}

.composer-free-1a #panel-composer .is-tier-locked-cell .select-label.is-tier-locked-label {
  color: #7a9a76 !important;
  cursor: not-allowed !important;
}

.composer-free-1a #panel-composer .arranger-custom-select.is-open .arranger-select-trigger {
  font-weight: bold !important;
}

.composer-free-1a #panel-composer .cyber-select,
.composer-free-1a #panel-composer .arranger-select-trigger.cyber-select {
  width: 100%;
  border: 0 !important;
  outline: none !important;
  padding: 10px 12px;
  font-size: 1.05rem !important;
  color: var(--card-global-text-color) !important;
  background: transparent !important;
  transition: all 0.3s ease;
}

.composer-free-1a #panel-composer .arranger-select-trigger.cyber-select:hover,
.composer-free-1a #panel-composer .arranger-select-trigger.cyber-select:focus,
.composer-free-1a #panel-composer .cyber-select:hover,
.composer-free-1a #panel-composer .cyber-select:focus {
  font-weight: bold !important;
}

.composer-free-1a #panel-composer .dropdown-cell-wrapper:hover {
  position: relative;
  z-index: 2;
}

.composer-free-1a #panel-composer .select-label {
  font-size: 1.22rem !important;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  color: var(--active-cyan) !important;
  text-shadow: 0 0 8px rgba(108, 200, 90, 0.35);
  white-space: nowrap;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.composer-free-1a #panel-composer .dropdown-cell-wrapper:hover .select-label,
.composer-free-1a #panel-composer .select-label:hover {
  font-weight: normal !important;
  font-size: 1.22rem !important;
  color: #c8f0b8 !important;
  text-shadow:
    0 0 12px rgba(108, 200, 90, 0.9),
    0 0 22px rgba(72, 140, 58, 0.7),
    0 0 34px rgba(108, 200, 90, 0.45) !important;
}

.composer-free-1a #panel-composer .is-tier-locked-cell:hover .select-label.is-tier-locked-label,
.composer-free-1a #panel-composer .is-tier-locked-cell .select-label.is-tier-locked-label:hover {
  color: #7a9a76 !important;
  text-shadow: none !important;
}

.composer-free-1a .composer-submit-row {
  margin-top: 48px !important;
  margin-bottom: 8px !important;
  width: 100%;
  max-width: 420px;
  flex-direction: column;
  align-items: center;
}

.composer-free-1a #panel-composer #btn-composer-submit.cyber-btn-interactive {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: var(--card-global-text-color) !important;
  font-size: 1.35rem !important;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 16px 28px;
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow);
  transition: all 0.3s ease;
}

.composer-free-1a #panel-composer #btn-composer-submit.cyber-btn-interactive:hover:not(:disabled) {
  font-weight: bold !important;
}

.composer-free-1a #panel-composer #btn-composer-submit.is-submit-cooldown {
  font-size: 1.2rem !important;
  letter-spacing: 0.5px;
  cursor: not-allowed !important;
  opacity: 0.88;
}

/* ==========================================================================
   HOME FREE PAGE — index1a home blue theme (glass card glow)
   ========================================================================== */

.home-free-1a {
  scrollbar-gutter: stable;
}

.home-free-1a .interface-container {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.home-free-1a .holo-card[data-theme="home"] {
  --active-cyan: #69ebff !important;
  --active-blue: #0070f3 !important;
  --active-shadow: #0088e8 !important;
  --active-ambient: rgba(105, 235, 255, 0.15) !important;
  background: linear-gradient(
    155deg,
    rgba(var(--ui-glass-soft), 0.56) 0%,
    rgba(var(--ui-glass-mid), 0.70) 38%,
    rgba(var(--ui-glass-deep), 0.82) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(145, 220, 240, 0.06),
    0 0 25px var(--active-blue),
    0 0 30px 4px var(--active-shadow),
    0 0 70px 15px var(--active-ambient) !important;
}

.home-free-1a .holo-card h2#interface-title {
  color: var(--ui-title-text-color) !important;
}

.home-free-1a .holo-card .card-header .system-hash,
.home-free-1a #interface-subtitle {
  color: var(--ui-muted-text-color) !important;
  white-space: normal;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.home-free-1a .holo-card {
  justify-content: flex-start !important;
}

.home-free-1a .home-card-header {
  margin-bottom: 0;
  flex-shrink: 0;
}

.home-free-1a #interface-subtitle {
  margin-bottom: 18px;
}

.home-free-1a .home-subtitle-promo {
  display: inline-block;
  margin-top: 0.4em;
  font-size: 0.96em;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #8ec8f0 !important;
  text-shadow:
    0 0 10px var(--active-blue),
    0 0 18px var(--active-shadow),
    0 0 28px rgba(0, 136, 232, 0.45) !important;
}

.home-free-1a .home-subtitle-promo-price {
  color: #5ac8ff !important;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-shadow:
    0 0 12px rgba(105, 235, 255, 0.55),
    0 0 22px rgba(0, 136, 232, 0.45) !important;
}

.home-free-1a .home-subtitle-promo-price:hover {
  color: #7ed8ff !important;
  text-shadow:
    0 0 14px rgba(105, 235, 255, 0.7),
    0 0 26px rgba(0, 136, 232, 0.55) !important;
}

.home-free-1a .home-closing-promo {
  width: 100%;
  max-width: 1100px;
  margin: 40px auto 0;
  font-size: 1.85rem;
  line-height: 1.55;
  text-align: center;
}

.home-free-1a .home-closing-promo .home-subtitle-promo {
  margin-top: 0;
  font-size: 0.96em;
}

.home-free-1a .home-card-body {
  width: 100%;
  flex-grow: 0 !important;
  margin: 0 !important;
  padding: 0 20px 28px !important;
  box-sizing: border-box;
}

.home-free-1a .home-composer-showcase {
  width: 100%;
  max-width: 1100px;
  margin: 28px auto 0;
}

.home-free-1a .home-composer-showcase-title {
  margin: 0 0 22px;
  font-family: var(--font-cyber);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #aeb6be !important;
  text-shadow:
    0 0 10px var(--active-blue),
    0 0 20px var(--active-shadow),
    0 0 32px rgba(105, 235, 255, 0.48) !important;
}

.home-free-1a .home-showcase-title-link {
  color: #5ac8ff !important;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-shadow:
    0 0 12px rgba(105, 235, 255, 0.55),
    0 0 22px rgba(0, 136, 232, 0.45) !important;
}

.home-free-1a .home-showcase-title-link:hover {
  color: #7ed8ff !important;
  text-shadow:
    0 0 14px rgba(105, 235, 255, 0.7),
    0 0 26px rgba(0, 136, 232, 0.55) !important;
}

.home-free-1a .home-composer-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: stretch;
}

.home-free-1a .home-composer-showcase-col {
  min-width: 0;
}

.home-free-1a .home-composer-showcase-col--features {
  display: flex;
  flex-direction: column;
}

.home-free-1a .home-composer-feature-list {
  margin: 0;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 20px 22px 20px 36px;
  list-style: disc;
  box-sizing: border-box;
  background: rgba(4, 10, 24, 0.42);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(0, 112, 243, 0.18),
    0 0 38px rgba(0, 0, 0, 0.28);
}

.home-free-1a .home-composer-feature-list li {
  margin-bottom: 0;
  font-size: 1.32rem;
  line-height: 1.58;
  color: #b0b8c0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-free-1a .home-composer-feature-list li:last-child {
  margin-bottom: 0;
}

.home-free-1a .home-composer-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-free-1a .home-composer-step {
  margin: 0;
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(4, 10, 24, 0.32);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.14),
    0 0 14px rgba(0, 112, 243, 0.08);
  opacity: 0.38;
  transition: opacity 0.55s ease, box-shadow 0.55s ease, background 0.55s ease;
}

.home-free-1a .home-composer-step.is-active {
  opacity: 1;
  background: rgba(4, 10, 24, 0.52);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.2),
    0 0 24px rgba(0, 112, 243, 0.28),
    0 0 38px rgba(105, 235, 255, 0.16);
}

.home-free-1a .home-composer-step-label {
  margin: 0 0 6px;
  font-family: var(--font-cyber);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: #aeb6be !important;
  text-shadow: 0 0 10px rgba(105, 235, 255, 0.25);
}

.home-free-1a .home-composer-step-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(105, 235, 255, 0.22);
  box-shadow: 0 0 16px rgba(0, 112, 243, 0.2);
  transition: opacity 0.55s ease, filter 0.55s ease;
}

.home-free-1a .home-composer-step:not(.is-active) .home-composer-step-image {
  opacity: 0.72;
  filter: saturate(0.75);
}

@media (max-width: 860px) {
  .home-free-1a .home-composer-showcase-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .home-free-1a .home-composer-feature-list {
    display: block;
    height: auto;
  }

  .home-free-1a .home-composer-feature-list li {
    margin-bottom: 14px;
  }

  .home-free-1a .home-composer-feature-list li:last-child {
    margin-bottom: 0;
  }

  .home-free-1a .home-composer-step-image {
    max-height: 180px;
  }
}

/* ==========================================================================
   HOME — Inside the Arranger showcase
   ========================================================================== */

.home-free-1a .home-arranger-showcase {
  width: 100%;
  max-width: 1100px;
  margin: 48px auto 0;
}

.home-free-1a .home-arranger-showcase-title {
  margin: 0 0 22px;
  font-family: var(--font-cyber);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #aeb6be !important;
  text-shadow:
    0 0 10px var(--active-blue),
    0 0 20px var(--active-shadow),
    0 0 32px rgba(105, 235, 255, 0.48) !important;
}

.home-free-1a .home-arranger-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: stretch;
}

.home-free-1a .home-arranger-showcase-col {
  min-width: 0;
}

.home-free-1a .home-arranger-showcase-col--features {
  display: flex;
  flex-direction: column;
}

.home-free-1a .home-arranger-feature-list {
  margin: 0;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 20px 22px 20px 36px;
  list-style: disc;
  box-sizing: border-box;
  background: rgba(4, 10, 24, 0.42);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(0, 112, 243, 0.18),
    0 0 38px rgba(0, 0, 0, 0.28);
}

.home-free-1a .home-arranger-feature-list li {
  margin-bottom: 0;
  font-size: 1.32rem;
  line-height: 1.58;
  color: #b0b8c0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-free-1a .home-arranger-compare-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.home-free-1a .home-arranger-compare-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(4, 10, 24, 0.32);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.14),
    0 0 14px rgba(0, 112, 243, 0.08);
  opacity: 0.38;
  transition: opacity 0.55s ease, box-shadow 0.55s ease, background 0.55s ease;
}

.home-free-1a .home-arranger-compare-card.is-active {
  opacity: 1;
  background: rgba(4, 10, 24, 0.52);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.2),
    0 0 24px rgba(0, 112, 243, 0.28),
    0 0 38px rgba(105, 235, 255, 0.16);
}

.home-free-1a .home-arranger-compare-label {
  margin: 0 0 6px;
  font-family: var(--font-cyber);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #aeb6be !important;
  text-shadow: 0 0 10px rgba(105, 235, 255, 0.25);
}

.home-free-1a .home-arranger-compare-text {
  margin: 0 0 10px;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #b0b8c0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-free-1a .home-arranger-compare-image {
  display: block;
  width: 100%;
  height: auto;
  flex: 1;
  min-height: 120px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(105, 235, 255, 0.22);
  box-shadow: 0 0 16px rgba(0, 112, 243, 0.2);
  transition: opacity 0.55s ease, filter 0.55s ease;
}

.home-free-1a .home-arranger-compare-card:not(.is-active) .home-arranger-compare-image {
  opacity: 0.72;
  filter: saturate(0.75);
}

@media (max-width: 860px) {
  .home-free-1a .home-arranger-showcase-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .home-free-1a .home-arranger-feature-list {
    display: block;
    height: auto;
  }

  .home-free-1a .home-arranger-feature-list li {
    margin-bottom: 14px;
  }

  .home-free-1a .home-arranger-feature-list li:last-child {
    margin-bottom: 0;
  }

  .home-free-1a .home-arranger-compare-list {
    height: auto;
  }

  .home-free-1a .home-arranger-compare-card {
    flex: none;
  }

  .home-free-1a .home-arranger-compare-image {
    max-height: 180px;
  }
}

/* ==========================================================================
   HOME — Inside the Practitioner showcase
   ========================================================================== */

.home-free-1a .home-practitioner-showcase {
  width: 100%;
  max-width: 1100px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-free-1a .home-practitioner-showcase-title {
  margin: 0 0 22px;
  font-family: var(--font-cyber);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #aeb6be !important;
  text-shadow:
    0 0 10px var(--active-blue),
    0 0 20px var(--active-shadow),
    0 0 32px rgba(105, 235, 255, 0.48) !important;
}

.home-free-1a .home-practitioner-feature-list {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 2rem;
  list-style: none;
  box-sizing: border-box;
  background: rgba(4, 10, 24, 0.42);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(0, 112, 243, 0.18),
    0 0 38px rgba(0, 0, 0, 0.28);
}

.home-free-1a .home-practitioner-feature-list li {
  position: relative;
  width: 100%;
  max-width: calc(100% - 3rem);
  margin: 0 auto 14px;
  padding-left: 1.35em;
  font-size: 1.32rem;
  line-height: 1.58;
  color: #b0b8c0 !important;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-free-1a .home-practitioner-feature-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: inherit;
}

.home-free-1a .home-practitioner-article-title {
  font-style: italic;
  font-weight: 700;
}

.home-free-1a .home-practitioner-feature-list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .home-free-1a .home-practitioner-feature-list {
    padding: 24px 1.25rem;
  }

  .home-free-1a .home-practitioner-feature-list li {
    max-width: 100%;
  }
}

/* ==========================================================================
   HOME — Free vs Paid tier comparison
   ========================================================================== */

.home-free-1a .home-tier-showcase {
  width: 100%;
  max-width: 1100px;
  margin: 48px auto 0;
}

.home-free-1a .home-tier-showcase-title {
  margin: 0 0 22px;
  font-family: var(--font-cyber);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #aeb6be !important;
  text-shadow:
    0 0 10px var(--active-blue),
    0 0 20px var(--active-shadow),
    0 0 32px rgba(105, 235, 255, 0.48) !important;
}

.home-free-1a .home-tier-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.home-free-1a .home-tier-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 22px 22px 24px;
  border-radius: 6px;
  box-sizing: border-box;
  background: rgba(4, 10, 24, 0.42);
}

.home-free-1a .home-tier-card--free {
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    inset 0 0 14px rgba(105, 235, 255, 0.04),
    0 0 22px rgba(0, 112, 243, 0.22),
    0 0 38px rgba(0, 0, 0, 0.32);
}

.home-free-1a .home-tier-card--paid {
  background: rgba(4, 12, 28, 0.52);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    inset 0 0 22px rgba(105, 235, 255, 0.08),
    0 0 32px rgba(0, 112, 243, 0.38),
    0 0 52px rgba(0, 136, 232, 0.28),
    0 0 72px rgba(105, 235, 255, 0.14);
}

.home-free-1a .home-tier-card-name {
  margin: 0 0 16px;
  font-family: var(--font-cyber);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #aeb6be !important;
  text-shadow: 0 0 12px rgba(105, 235, 255, 0.35);
}

.home-free-1a .home-tier-card-name--paid {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8ee4ff !important;
  text-shadow:
    0 0 10px rgba(105, 235, 255, 1),
    0 0 22px var(--active-blue),
    0 0 38px var(--active-shadow),
    0 0 56px rgba(105, 235, 255, 0.75) !important;
}

.home-free-1a .home-tier-feature-list {
  margin: 0;
  padding: 0 0 0 1.2em;
  list-style: disc;
  flex: 1;
}

.home-free-1a .home-tier-feature-list li {
  margin-bottom: 10px;
  font-size: 1.32rem;
  line-height: 1.58;
  color: #b0b8c0 !important;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-free-1a .home-tier-feature-list li:last-child {
  margin-bottom: 0;
}

.home-free-1a .home-tier-feature-list--paid {
  list-style: none;
  padding-left: 0;
}

.home-free-1a .home-tier-feature-list--paid li {
  position: relative;
  padding-left: 1.35em;
  color: #d8f0ff !important;
  text-shadow:
    0 0 10px rgba(105, 235, 255, 0.9),
    0 0 22px rgba(0, 112, 243, 0.65),
    0 0 36px rgba(0, 136, 232, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.home-free-1a .home-tier-feature-list--paid li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #69ebff;
  text-shadow:
    0 0 8px rgba(105, 235, 255, 0.95),
    0 0 18px rgba(0, 136, 232, 0.7) !important;
}

.home-free-1a .home-tier-free-links {
  margin: 20px 0 0;
  font-family: var(--font-cyber);
  font-size: 1.32rem;
  line-height: 1.58;
  text-align: center;
  color: #b0b8c0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-free-1a .home-tier-free-link {
  color: #5ac8ff !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-shadow:
    0 0 12px rgba(105, 235, 255, 0.55),
    0 0 22px rgba(0, 136, 232, 0.45) !important;
}

.home-free-1a .home-tier-free-link:hover {
  color: #7ed8ff !important;
  text-shadow:
    0 0 14px rgba(105, 235, 255, 0.7),
    0 0 26px rgba(0, 136, 232, 0.55) !important;
}

.home-free-1a .home-tier-unlock-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 18px;
  box-sizing: border-box;
  border: 0;
  border-radius: 3px;
  font-family: var(--font-cyber);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #8ee4ff !important;
  background: rgba(58, 98, 138, 0.68);
  text-shadow:
    0 0 10px rgba(105, 235, 255, 1),
    0 0 22px var(--active-blue),
    0 0 38px var(--active-shadow),
    0 0 56px rgba(105, 235, 255, 0.75) !important;
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.06),
    0 0 24px 3px rgba(0, 136, 232, 0.45),
    0 0 42px 8px rgba(105, 235, 255, 0.18);
  animation: home-tier-unlock-pulse 2.8s ease-in-out infinite;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.home-free-1a .home-tier-unlock-btn:hover {
  background: rgba(72, 118, 162, 0.82);
  color: #8ee4ff !important;
  transform: translateY(-1px);
  text-shadow:
    0 0 10px rgba(105, 235, 255, 1),
    0 0 22px var(--active-blue),
    0 0 38px var(--active-shadow),
    0 0 56px rgba(105, 235, 255, 0.75) !important;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, 0.08),
    0 0 32px 5px rgba(0, 136, 232, 0.62),
    0 0 56px 12px rgba(105, 235, 255, 0.28);
  animation: none;
}

@keyframes home-tier-unlock-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 14px rgba(255, 255, 255, 0.06),
      0 0 24px 3px rgba(0, 136, 232, 0.45),
      0 0 42px 8px rgba(105, 235, 255, 0.18);
  }

  50% {
    box-shadow:
      inset 0 0 16px rgba(255, 255, 255, 0.09),
      0 0 32px 5px rgba(0, 136, 232, 0.58),
      0 0 56px 12px rgba(105, 235, 255, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-free-1a .home-tier-unlock-btn {
    animation: none;
  }
}

@media (max-width: 860px) {
  .home-free-1a .home-tier-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* Sign-in 1a scroll shell — keep after page-specific interface-container rules */
.signin-free-1a .interface-container {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* ==========================================================================
   HOME PAID PAGE — single-column showcase lists
   ========================================================================== */

.home-paid-1a .home-composer-showcase,
.home-paid-1a .home-arranger-showcase {
  width: 100%;
  max-width: 1100px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-paid-1a .home-composer-showcase {
  margin-top: 28px;
}

.home-paid-1a .home-composer-feature-list,
.home-paid-1a .home-arranger-feature-list {
  display: block;
  flex: none;
  height: auto;
  width: 100%;
  max-width: 1100px;
  margin: 0;
  padding: 24px 2rem;
  list-style: none;
  box-sizing: border-box;
  background: rgba(4, 10, 24, 0.42);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    0 0 22px rgba(0, 112, 243, 0.18),
    0 0 38px rgba(0, 0, 0, 0.28);
}

.home-paid-1a .home-composer-feature-list li,
.home-paid-1a .home-arranger-feature-list li {
  position: relative;
  width: 100%;
  max-width: calc(100% - 3rem);
  margin: 0 auto 14px;
  padding-left: 1.35em;
  font-size: 1.32rem;
  line-height: 1.58;
  color: #b0b8c0 !important;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-paid-1a .home-composer-feature-list li::before,
.home-paid-1a .home-arranger-feature-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: inherit;
}

.home-paid-1a .home-composer-feature-list li:last-child,
.home-paid-1a .home-arranger-feature-list li:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .home-paid-1a .home-composer-feature-list,
  .home-paid-1a .home-arranger-feature-list {
    padding: 24px 1.25rem;
  }

  .home-paid-1a .home-composer-feature-list li,
  .home-paid-1a .home-arranger-feature-list li {
    max-width: 100%;
  }
}

/* Paid home SPA — swap main card panels in place */
.home-paid-1a .home-paid-panel.hidden {
  display: none !important;
}

.home-paid-1a .home-practitioner-article-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-style: italic;
  font-weight: 700;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(142, 228, 255, 0.45);
  text-underline-offset: 0.15em;
}

.home-paid-1a .home-practitioner-article-link:hover,
.home-paid-1a .home-practitioner-article-link:focus-visible {
  color: var(--active-cyan, #8ee4ff);
  outline: none;
}

/* Paid home — Account nav hover stays green on all in-page views */
.home-paid-1a .nav-account.nav-account--logged-in:hover .account-name,
.home-paid-1a .nav-account.nav-account--logged-in:hover #account-status-label {
  color: #7dff6a !important;
  text-shadow:
    0 0 10px #39ff14,
    0 0 20px rgba(57, 255, 20, 0.65) !important;
}

.home-paid-1a .nav-account.nav-account--logged-in:hover .account-avatar.user-logged-in {
  background: rgba(57, 255, 20, 0.14) !important;
  box-shadow: 0 0 18px #39ff14 !important;
  filter: drop-shadow(0 0 6px #39ff14) !important;
}

.home-paid-1a .nav-account.nav-account--logged-in:hover .account-avatar.user-logged-in svg {
  color: #7dff6a !important;
  filter: drop-shadow(0 0 6px #39ff14) !important;
}

/* Paid home — embedded account logout button */
.home-paid-1a #home-paid-panel-account .oauth-primary-btn,
.home-paid-1a #home-paid-panel-account a.oauth-primary-btn {
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
}

.home-paid-1a #home-paid-panel-account .oauth-primary-btn:hover:not(:disabled),
.home-paid-1a #home-paid-panel-account a.oauth-primary-btn:hover {
  font-weight: bold !important;
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

/* Sign-in pages — warm yellow tint in theme glows (generic pages only; section pages keep their own palette) */
.signin-free:not(.practitioner-beacon-1a):not(.composer-free-1a):not(.arranger-free-1a):not(.home-free-1a) .holo-card[data-theme="account"] {
  --active-cyan: color-mix(in srgb, #ffbe0b 88%, #ffe08a 12%) !important;
  --active-blue: color-mix(in srgb, #5a3c0a 78%, #2d88a0 22%) !important;
  --active-shadow: color-mix(in srgb, #b48207 74%, #e8b848 26%) !important;
  --active-ambient: color-mix(in srgb, rgba(255, 190, 11, 0.12) 76%, rgba(255, 200, 88, 0.35) 24%) !important;
}

.signin-free:not(.home-free-1a) .holo-card[data-theme="home"] {
  --active-cyan: color-mix(in srgb, #69ebff 86%, #ffe08a 14%) !important;
  --active-blue: color-mix(in srgb, #0070f3 78%, #2d88a0 22%) !important;
  --active-shadow: color-mix(in srgb, #1F51FF 74%, #e8b848 26%) !important;
  --active-ambient: color-mix(in srgb, rgba(105, 235, 255, 0.15) 76%, rgba(255, 200, 88, 0.35) 24%) !important;
}

.signin-free:not(.composer-free-1a) .holo-card[data-theme="generator"] {
  --active-cyan: color-mix(in srgb, #39ff14 86%, #ffe08a 14%) !important;
  --active-blue: color-mix(in srgb, #064e16 78%, #2d88a0 22%) !important;
  --active-shadow: color-mix(in srgb, #19800a 74%, #e8b848 26%) !important;
  --active-ambient: color-mix(in srgb, rgba(57, 255, 20, 0.15) 76%, rgba(255, 200, 88, 0.35) 24%) !important;
}

.signin-free:not(.arranger-free-1a) .holo-card[data-theme="transposer"],
.signin-free:not(.arranger-free-1a) .holo-card[data-theme="arranger"] {
  --active-cyan: color-mix(in srgb, #f29a4a 86%, #ffe08a 14%) !important;
  --active-blue: color-mix(in srgb, #4a2810 78%, #2d88a0 22%) !important;
  --active-shadow: color-mix(in srgb, #c46224 74%, #e8b848 26%) !important;
  --active-ambient: color-mix(in srgb, rgba(242, 154, 74, 0.14) 76%, rgba(255, 200, 88, 0.35) 24%) !important;
}

.signin-free:not(.practitioner-beacon-1a) .holo-card[data-theme="resources"] {
  --active-cyan: color-mix(in srgb, #e8ecf1 86%, #ffe08a 14%) !important;
  --active-blue: color-mix(in srgb, #4a525d 78%, #2d88a0 22%) !important;
  --active-shadow: color-mix(in srgb, #C5D1E0 74%, #e8b848 26%) !important;
  --active-ambient: color-mix(in srgb, rgba(232, 236, 241, 0.18) 76%, rgba(255, 200, 88, 0.35) 24%) !important;
}

/* Sign-in pages — unified title/subtitle shadow (matches home) */
.signin-free-1a .holo-card h2#interface-title,
.signin-free-1a .practitioner-article-title,
.signin-free-1a .holo-card .card-header .system-hash,
.signin-free-1a .holo-card .card-header #interface-subtitle {
  text-shadow:
    0 0 16px var(--active-blue),
    0 0 28px var(--active-shadow),
    0 0 42px var(--signin-glow-cyan),
    0 0 22px var(--signin-glow-warm) !important;
}

.signin-free-1a .practitioner-beacon-1a .holo-card .card-header #interface-subtitle .practitioner-subtitle-body {
  text-shadow:
    0 0 10px var(--active-blue),
    0 0 20px var(--active-shadow),
    0 0 32px var(--signin-glow-cyan-soft),
    0 0 16px var(--signin-glow-warm) !important;
}

/* Sign-in pages — unified box-shadow structure (home layout, each page keeps its theme colors) */
.signin-free-1a .holo-card,
.signin-free-1a .holo-card[data-theme="home"],
.signin-free-1a .holo-card[data-theme="account"],
.signin-free-1a .holo-card[data-theme="resources"],
.signin-free-1a .holo-card[data-theme="generator"],
.signin-free-1a .holo-card[data-theme="arranger"],
.signin-free-1a .holo-card[data-theme="transposer"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 22px rgba(255, 255, 255, 0.03),
    inset 0 0 16px var(--active-ambient),
    0 0 25px var(--active-blue),
    0 0 30px 4px var(--active-shadow),
    0 0 70px 15px var(--active-ambient) !important;
}

.signin-free-1a .holo-card .cyber-btn-interactive:not(.is-main-card-lockout):not(:disabled),
.signin-free-1a .holo-card .terms-review-btn:not(.is-main-card-lockout),
.signin-free-1a .holo-card .cyber-checkbox-container:not(.is-main-card-lockout),
.signin-free-1a .holo-card .oauth-primary-btn:not(.is-main-card-lockout):not(:disabled),
.signin-free-1a .holo-card .gsi-material-button:not(.is-main-card-lockout):not(:disabled),
.signin-free-1a .holo-card .cyber-select,
.signin-free-1a .holo-card .cyber-input,
.signin-free-1a .holo-card .cyber-textarea,
.signin-free-1a .holo-card .terms-scroll-box,
.signin-free-1a #panel-arranger .arranger-file-upload-label:not(.is-upload-tier-locked),
.signin-free-1a .practitioner-article-tab,
.signin-free-1a .practitioner-article-section-summary,
.signin-free-1a .composer-config-section-summary,
.signin-free-1a .arranger-config-section-summary,
.signin-free-1a #panel-arranger .arranger-select-trigger,
.signin-free-1a #panel-composer .arranger-select-trigger,
.signin-free-1a #panel-generator #btn-generator-submit.cyber-btn-interactive,
.signin-free-1a #panel-composer #btn-composer-submit.cyber-btn-interactive,
.signin-free-1a #panel-arranger #btn-arranger-submit.cyber-btn-interactive,
.signin-free-1a #privacy-modal .cyber-btn-interactive,
.signin-free-1a #contact-modal .cyber-btn-interactive,
.signin-free-1a #contact-modal .cyber-input,
.signin-free-1a #contact-modal .cyber-textarea {
  box-shadow:
    inset 0 0 12px var(--active-ambient),
    0 0 20px 2px var(--active-shadow) !important;
}

.signin-free-1a .holo-card .cyber-btn-interactive:hover:not(:disabled):not(.is-main-card-lockout),
.signin-free-1a .holo-card .terms-review-btn:hover:not(.is-main-card-lockout),
.signin-free-1a .holo-card .cyber-checkbox-container:hover:not(.is-main-card-lockout),
.signin-free-1a .holo-card .cyber-checkbox-container:has(input:focus-visible):not(.is-main-card-lockout),
.signin-free-1a .holo-card .oauth-primary-btn:hover:not(:disabled):not(.is-main-card-lockout),
.signin-free-1a .holo-card a.oauth-primary-btn:hover:not(.is-main-card-lockout),
.signin-free-1a .holo-card .gsi-material-button:not(:disabled):hover:not(.is-main-card-lockout),
.signin-free-1a .holo-card .cyber-select:hover,
.signin-free-1a .holo-card .cyber-select:focus,
.signin-free-1a .holo-card .cyber-input:focus,
.signin-free-1a .holo-card .cyber-textarea:focus,
.signin-free-1a .practitioner-article-tab:hover:not(.active),
.signin-free-1a .practitioner-article-tab.active,
.signin-free-1a .practitioner-article-section-summary:hover,
.signin-free-1a .practitioner-article-section[open] .practitioner-article-section-summary,
.signin-free-1a .composer-config-section-summary:hover,
.signin-free-1a .composer-config-section[open] .composer-config-section-summary,
.signin-free-1a .arranger-config-section-summary:hover,
.signin-free-1a .arranger-config-section[open] .arranger-config-section-summary,
.signin-free-1a #panel-arranger .arranger-select-trigger:hover,
.signin-free-1a #panel-arranger .arranger-select-trigger:focus,
.signin-free-1a #panel-arranger .arranger-custom-select.is-open .arranger-select-trigger,
.signin-free-1a #panel-composer .arranger-select-trigger:hover,
.signin-free-1a #panel-composer .arranger-select-trigger:focus,
.signin-free-1a #panel-composer .arranger-custom-select.is-open .arranger-select-trigger,
.signin-free-1a #panel-generator #btn-generator-submit.cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #panel-composer #btn-composer-submit.cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #panel-arranger #btn-arranger-submit.cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #panel-arranger .arranger-file-upload-label:hover:not(.is-upload-tier-locked),
.signin-free-1a #privacy-modal .cyber-btn-interactive:hover,
.signin-free-1a #contact-modal .cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #contact-modal .cyber-input:hover:not(:disabled),
.signin-free-1a #contact-modal .cyber-textarea:hover:not(:disabled),
.signin-free-1a #contact-modal .cyber-input:focus,
.signin-free-1a #contact-modal .cyber-textarea:focus {
  box-shadow:
    inset 0 0 15px var(--active-ambient),
    0 0 30px 4px var(--active-cyan) !important;
}

.signin-free-1a .practitioner-article-section-content,
.signin-free-1a .composer-config-section-content,
.signin-free-1a .arranger-config-section-content,
.signin-free-1a .home-composer-feature-list,
.signin-free-1a .home-practitioner-feature-list,
.signin-free-1a .home-composer-step,
.signin-free-1a .home-tier-card--free {
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    0 0 22px var(--active-ambient),
    0 0 38px rgba(0, 0, 0, 0.28) !important;
}

.signin-free-1a .home-composer-step.is-active,
.signin-free-1a .home-tier-card--paid {
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.18),
    inset 0 0 22px var(--active-ambient),
    0 0 32px var(--active-blue),
    0 0 52px var(--active-shadow),
    0 0 72px var(--active-ambient) !important;
}

.signin-free-1a #panel-arranger .arranger-select-list,
.signin-free-1a #panel-composer .arranger-select-list {
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.08),
    0 0 20px 2px var(--active-shadow) !important;
}

/* Sign-in pages — section switchers, collapsibles, dropdown triggers (idle + hover/active) */
.signin-free-1a .practitioner-article-tab,
.signin-free-1a .practitioner-article-section-summary,
.signin-free-1a .composer-config-section-summary,
.signin-free-1a .arranger-config-section-summary {
  color: var(--ui-title-text-color, #aeb6be) !important;
  text-shadow: none !important;
}

.signin-free-1a #panel-composer .arranger-select-trigger.cyber-select,
.signin-free-1a #panel-arranger .arranger-select-trigger.cyber-select {
  color: var(--ui-muted-text-color, #a0a8b0) !important;
  text-shadow: none !important;
}

.signin-free-1a .practitioner-article-tab:hover:not(.active),
.signin-free-1a .practitioner-article-tab.active,
.signin-free-1a .practitioner-article-section-summary:hover,
.signin-free-1a .practitioner-article-section[open] .practitioner-article-section-summary,
.signin-free-1a .composer-config-section-summary:hover,
.signin-free-1a .composer-config-section[open] .composer-config-section-summary,
.signin-free-1a .arranger-config-section-summary:hover,
.signin-free-1a .arranger-config-section[open] .arranger-config-section-summary {
  color: var(--ui-title-text-color, #aeb6be) !important;
  font-weight: bold !important;
  background: transparent !important;
  text-shadow:
    0 0 16px var(--active-blue),
    0 0 28px var(--active-shadow),
    0 0 42px var(--signin-glow-cyan),
    0 0 22px var(--signin-glow-warm) !important;
}

.signin-free-1a #panel-composer .arranger-select-trigger.cyber-select:hover:not(.is-tier-locked),
.signin-free-1a #panel-composer .arranger-select-trigger.cyber-select:focus:not(.is-tier-locked),
.signin-free-1a #panel-composer .arranger-custom-select.is-open .arranger-select-trigger:not(.is-tier-locked),
.signin-free-1a #panel-arranger .arranger-select-trigger.cyber-select:hover:not(.is-tier-locked),
.signin-free-1a #panel-arranger .arranger-select-trigger.cyber-select:focus:not(.is-tier-locked),
.signin-free-1a #panel-arranger .arranger-custom-select.is-open .arranger-select-trigger:not(.is-tier-locked) {
  color: var(--ui-muted-text-color, #a0a8b0) !important;
  font-weight: bold !important;
  background: transparent !important;
  text-shadow:
    0 0 10px var(--active-blue),
    0 0 20px var(--active-shadow),
    0 0 32px var(--signin-glow-cyan-soft),
    0 0 16px var(--signin-glow-warm) !important;
}

/* Sign-in pages — action buttons/links: subtitle color + glow on hover only */
.signin-free-1a .holo-card .terms-review-btn:not(.is-main-card-lockout),
.signin-free-1a #panel-account .terms-review-btn,
.signin-free-1a #panel-account .cyber-checkbox-container:not(.is-main-card-lockout),
.signin-free-1a #panel-account .cyber-checkbox-container:not(.is-main-card-lockout) .checkbox-label-text,
.signin-free-1a #panel-account .cyber-btn-interactive:not(:disabled),
.signin-free-1a #panel-account .oauth-primary-btn,
.signin-free-1a #panel-account a.oauth-primary-btn,
.signin-free-1a .logout-use-1a .oauth-action-slot a.oauth-primary-btn,
.signin-free-1a .logout-use-1a .oauth-action-slot .oauth-primary-btn,
.signin-free-1a #panel-arranger .arranger-file-upload-label:not(.is-upload-tier-locked),
.signin-free-1a #panel-arranger .arranger-file-upload-label:not(.is-upload-tier-locked) #upload-label-text,
.signin-free-1a #panel-arranger #btn-arranger-submit.cyber-btn-interactive,
.signin-free-1a #panel-composer #btn-composer-submit.cyber-btn-interactive,
.signin-free-1a #home-paid-panel-account .oauth-primary-btn,
.signin-free-1a #home-paid-panel-account a.oauth-primary-btn {
  color: var(--ui-muted-text-color, #a0a8b0) !important;
  text-shadow: none !important;
}

.signin-free-1a .holo-card .terms-review-btn:hover:not(.is-main-card-lockout),
.signin-free-1a #panel-account .terms-review-btn:hover,
.signin-free-1a #panel-account .cyber-checkbox-container:hover:not(.is-main-card-lockout),
.signin-free-1a #panel-account .cyber-checkbox-container:has(input:focus-visible):not(.is-main-card-lockout),
.signin-free-1a #panel-account .cyber-checkbox-container:hover:not(.is-main-card-lockout) .checkbox-label-text,
.signin-free-1a #panel-account .cyber-checkbox-container:has(input:focus-visible):not(.is-main-card-lockout) .checkbox-label-text,
.signin-free-1a #panel-account .cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #panel-account .oauth-primary-btn:hover:not(:disabled),
.signin-free-1a #panel-account a.oauth-primary-btn:hover,
.signin-free-1a .logout-use-1a .oauth-action-slot a.oauth-primary-btn:hover,
.signin-free-1a .logout-use-1a .oauth-action-slot .oauth-primary-btn:hover:not(:disabled),
.signin-free-1a #panel-arranger .arranger-file-upload-label:hover:not(.is-upload-tier-locked),
.signin-free-1a #panel-arranger .arranger-file-upload-label:hover:not(.is-upload-tier-locked) #upload-label-text,
.signin-free-1a #panel-arranger #btn-arranger-submit.cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #panel-composer #btn-composer-submit.cyber-btn-interactive:hover:not(:disabled),
.signin-free-1a #home-paid-panel-account .oauth-primary-btn:hover:not(:disabled),
.signin-free-1a #home-paid-panel-account a.oauth-primary-btn:hover {
  color: var(--ui-muted-text-color, #a0a8b0) !important;
  background: transparent !important;
  font-weight: bold !important;
  text-shadow:
    0 0 10px var(--active-blue),
    0 0 20px var(--active-shadow),
    0 0 32px var(--signin-glow-cyan-soft),
    0 0 16px var(--signin-glow-warm) !important;
}