/* 1. Sets a crisp, light background on your website body container layer grid */
body {
  background-color: #f6faff !important; /* Forces soft off-white backdrop globally */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================================================
   1. MASTER ARCHITECTURE GRID & SHARED LIGHT THEME HOVER WRAPPERS
   ========================================================================== */
.wh-typography-generator {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 1px 3px 0 rgba(15, 23, 42, 0.03), 
    0 4px 6px -1px rgba(15, 23, 42, 0.05), 
    0 10px 15px -3px rgba(15, 23, 42, 0.07), 
    0 20px 25px -5px rgba(15, 23, 42, 0.03);
  box-sizing: border-box;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.wh-typography-generator:hover {
  border-color: #cbd5e1;
  box-shadow: 
    0 1px 3px 0 rgba(0, 102, 255, 0.02),
    0 4px 12px -1px rgba(0, 102, 255, 0.03),
    0 12px 24px -4px rgba(15, 23, 42, 0.09),
    0 24px 32px -6px rgba(15, 23, 42, 0.04);
}

/* 2. Control Sidebar & Input Element Groups */
.wh-typography-generator .wh-control-sidebar {
  width: 320px;
  flex-shrink: 0;
  background-color: #ffffff;
  border-right: 1px solid #cbd5e1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

.wh-typography-generator .wh-input-card-group {
  display: flex;
  flex-direction: column;
}

.wh-typography-generator .wh-input-card-group label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  margin-bottom: 8px;
}

/* 3. Range Sliders & Metric Badge Logs */
.wh-typography-generator .wh-engine-slider {
  width: 100%;
  accent-color: #0066ff;
  cursor: pointer;
  margin: 8px 0;
}

.wh-typography-generator .wh-metric-badge-indicator {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  color: #0066ff;
  background-color: rgba(0, 102, 255, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
}

.wh-typography-generator .wh-metric-badge-indicator-static {
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  background-color: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
}

/* 4. Custom Dropdown Selector Overrides */
.wh-typography-generator .wh-select-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 8px;
}

.wh-typography-generator .wh-select-wrapper::after {
  content: '▼';
  font-size: 8px;
  color: #64748b;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: color 0.15s ease;
}

.wh-typography-generator select.wh-engine-select {
  width: 100%;
  height: 42px;
  background-color: #ffffff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
  padding: 0 36px 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wh-typography-generator select.wh-engine-select:hover {
  border-color: #94a3b8;
  background-color: #fafafa;
}

.wh-typography-generator select.wh-engine-select:focus {
  border-color: #0066ff;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.wh-typography-generator select.wh-engine-select option {
  background-color: #ffffff;
  color: #1e293b;
  font-size: 14px;
  padding: 12px;
}

/* 5. Main Preview Window Sandbox */
.wh-typography-generator .wh-workspace-viewport-canvas {
  flex-grow: 1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* ==========================================================================
   EXTENDED BLUEPRINT DOT-GRID BACKDROP PATTERN (20PX SEPARATION PROFILE)
   ========================================================================== */

/* 1. Injects the wider dotted background behind the main workspace card */
.wh-typography-generator .wh-preview-canvas {
  background-color: #fafbfc !important;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px) !important;
  background-size: 20px 20px !important; /* FIXED: Increased from 16px to 20px for perfect tracking separation */
}

/* 2. Syncs the exact same wider dotted background inside the pop-up modal viewports */
.wh-typography-generator .wh-text-container,
.wh-typography-generator .wh-resizable-inner-body {
  background-color: #fafbfc !important;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px) !important;
  background-size: 20px 20px !important; /* FIXED: Increased from 16px to 20px for perfect tracking separation */
}


/* ==========================================================================
   6. WORKSPACE HEADER & FLOATING WHITE ACTION BUTTONS
   ========================================================================== */
.wh-typography-generator .wh-workspace-header {
  height: 56px;
  padding: 0 24px;
  background-color: #f1f5f9 !important;
  border-bottom: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Left-aligned compliance validation badge */
.wh-typography-generator .wh-contrast-status-badge {
  background-color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.02);
  margin-right: auto !important; 
}

.wh-typography-generator #contrastIndicatorDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  transition: background-color 0.2s ease;
}

.wh-typography-generator .contrast-pass-dot { 
  background-color: #22c55e !important; 
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); 
}

.wh-typography-generator #contrastIndicatorText {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #15803d;
}

/* Header Simulation Action Buttons */
.wh-typography-generator .wh-modal-trigger-button {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 11px;
  font-weight: 700;
  padding: 0 14px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wh-typography-generator .wh-modal-trigger-button:hover {
  border-color: #0066ff !important;
  color: #0066ff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -1px rgba(15, 23, 42, 0.08);
}

.wh-typography-generator .wh-modal-trigger-button:active {
  transform: translateY(0);
  background-color: #f8fafc !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* ==========================================================================
   7. STABLE INTERACTIVE MODAL OVERLAYS & CUSTOM RESIZE HANDLES
   ========================================================================== */
.wh-typography-generator .wh-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(15, 23, 42, 0.3); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 99999;
}
.wh-typography-generator .wh-modal-overlay.active { opacity: 1; pointer-events: auto; }

.wh-typography-generator .wh-modal-box,
.wh-typography-generator .wh-resize-modal-box {
  background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px;
  width: 100%; max-width: 900px; display: flex; flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
  transform: scale(0.96); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden;
}
.wh-typography-generator .wh-modal-overlay.active .wh-modal-box,
.wh-typography-generator .wh-modal-overlay.active .wh-resize-modal-box { transform: scale(1); }

/* Draggable Shell and High Contrast Handles */
.wh-typography-generator .wh-resizable-drag-shell {
  min-width: 340px; max-width: 900px; width: 650px; height: 52vh;
  resize: both; overflow: hidden; position: relative; margin: 0 auto;
  container-type: inline-size !important;
}
.wh-typography-generator .wh-resizable-drag-shell::-webkit-resizer { display: none !important; }

.wh-typography-generator .wh-ui-handle { position: absolute; background-color: #e2e8f0; transition: all 0.2s ease; pointer-events: none; }
.wh-typography-generator .wh-handle-right { top: 0; right: 0; width: 6px; height: 100%; border-left: 1px solid #cbd5e1; cursor: e-resize; }
.wh-typography-generator .wh-handle-bottom { bottom: 0; left: 0; width: 100%; height: 6px; border-top: 1px solid #cbd5e1; cursor: s-resize; }
.wh-typography-generator .wh-handle-corner { bottom: 4px; right: 4px; width: 14px; height: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 2px; cursor: se-resize; }
.wh-typography-generator .wh-handle-corner span { display: block; background-color: #94a3b8; height: 1.5px; border-radius: 99px; }
.wh-typography-generator .wh-handle-corner span:nth-child(1) { width: 4px; }
.wh-typography-generator .wh-handle-corner span:nth-child(2) { width: 8px; }
.wh-typography-generator .wh-handle-corner span:nth-child(3) { width: 12px; }

.wh-resizable-drag-shell:hover .wh-handle-right, .wh-resizable-drag-shell:active .wh-handle-right { border-left-color: #0066ff; background-color: rgba(0, 102, 255, 0.08); }
.wh-resizable-drag-shell:hover .wh-handle-bottom, .wh-resizable-drag-shell:active .wh-handle-bottom { border-top-color: #0066ff; background-color: rgba(0, 102, 255, 0.08); }
.wh-resizable-drag-shell:hover .wh-handle-corner span, .wh-resizable-drag-shell:active .wh-handle-corner span { background-color: #0066ff; }

/* ==========================================================================
   8. CODE EXPORTER CONSOLE & COMPLEMENTARY COMPONENT CARDS
   ========================================================================== */
.wh-typography-generator .wh-footer-header-bar {
  height: 48px; padding: 0 24px; background-color: #f8fafc;
  border-bottom: 1px solid #cbd5e1; border-top: 1px solid #cbd5e1;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  box-sizing: border-box;
}

.wh-typography-generator .wh-copy-button {
  background-color: #0066ff; color: #ffffff; border: none; font-size: 11px; font-weight: 700;
  padding: 6px 12px; height: 32px; border-radius: 4px; cursor: pointer; text-transform: uppercase;
  letter-spacing: 0.03em; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.wh-typography-generator .wh-copy-button:hover { background-color: #0052cc; }
.wh-typography-generator #copyHtmlBtn { background-color: #ffffff !important; color: #0066ff !important; border: 1px solid #cbd5e1 !important; margin-right: 8px; }
.wh-typography-generator #copyHtmlBtn:hover { background-color: #f8fafc !important; border-color: #94a3b8 !important; }

/* Sandbox Mock Spacing Cards */
.wh-typography-generator .wh-spacing-mock-grid {
  gap: var(--mock-fluid-gap, 24px); padding: var(--mock-fluid-padding, 24px); width: 100%;
}
.wh-typography-generator .wh-spacing-preview-card {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02); display: flex; flex-direction: column;
}
.wh-typography-generator .wh-spacing-card-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0; }
.wh-typography-generator .wh-spacing-card-body { font-size: 0.88rem; color: #475569; line-height: 1.5; margin: 8px 0 0 0; }

.wh-typography-generator .wh-spacing-visual-indicator {
  background-color: rgba(0, 102, 255, 0.05); border: 1px dashed rgba(0, 102, 255, 0.35); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-family: monospace; font-size: 10px;
  font-weight: 700; color: #0066ff; letter-spacing: 0.05em; box-sizing: border-box;
}

/*  Highlighting Box terminal */
.wh-typography-generator .wh-code-display-block { flex-grow: 1; padding: 16px; background-color: #1e1f29 !important; overflow: auto; }

/* ==========================================================================
   WORKSPACE PREVIEW WINDOW OVERRIDES (MATCHES TYPOGRAPHY GENERATOR CANVAS)
   ========================================================================== */

/* Target the central text layout canvas to use identical padding & width transitions */
.wh-typography-generator .wh-article-container {
  /* Controlled dynamically by jQuery engine passes based on math multiplier loops */
  max-width: 100%; 
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.01);
  transition: max-width 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  margin: 0 auto;
}

/* High-visibility dashed guidelines showing active inner padding boundaries */
.wh-typography-generator .wh-spacing-visual-indicator {
  background-color: rgba(0, 102, 255, 0.04);
  border: 1px dashed rgba(0, 102, 255, 0.25);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  color: #0066ff;
  letter-spacing: 0.05em;
  width: 100%;
  box-sizing: border-box;
}
/* ==========================================================================
   DOT-GRID MATRIX SYNC FOR PREVIEW VIEWPORT MODALS
   ========================================================================== */
.wh-typography-generator .wh-text-container,
.wh-typography-generator .wh-resizable-inner-body {
  /* Forces the exact same grid aesthetic down onto device simulators and drag studio frames */
  background-color: #fafbfc !important;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
  padding: 40px !important;
  box-sizing: border-box;
}

/* Enhances the standalone inner drag frame shadow so it floats cleanly on the dots */
.wh-typography-generator #resizeOverlay .wh-article-container {
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.03) !important;
}

/* ==========================================================================
   PRODUCTION GRAPHICS MATCHING LAYER (WEBOSTPEDIA CONSTANTS)
   ========================================================================== */

/* 1. Sync the master wrapper frame to match the active site card border guidelines */
.wh-typography-generator.wh-spacing-studio-wrapper {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #cbd5e1 !important; /* Soft slate boundary line */
  border-radius: 8px !important;    /* Production layout corner radius override */
  overflow: hidden;
}

/* 2. Lock the sidebar panels to inherit matching vertical layout curves */
.wh-typography-generator .wh-control-sidebar {
  border-right-width: 1px !important;
  border-right-style: solid !important;
  border-right-color: #cbd5e1 !important;
  border-radius: 0px !important; /* Resets to let interior edges stack flush */
}

/* 3. Sync the central presentation card board to match workspace frames */
.wh-typography-generator #textContainer.wh-article-container {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #cbd5e1 !important;
  border-radius: 8px !important;  /* Injected crisp card outline boundaries */
  background-color: #ffffff !important;
}

/* 4. Complete un-nested overlay resets for input slider tracking slots */
.wh-typography-generator .wh-engine-select,
.wh-typography-generator select.wh-engine-select {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #cbd5e1 !important;
  border-radius: 6px !important;  /* Smooth select container curves */
}
/* ==========================================================================
   EXACT RANGE SLIDER AND LINE HEIGHT SYNCHRONIZATION WITH TYPOGRAPHY ENGINE
   ========================================================================== */

/* 1. Master Native Input Reset & Spacing Line Height Margin Alignment */
.wh-typography-generator input[type="range"].wh-engine-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  background: transparent !important;
  margin: 14px 0 !important; /* Replicates exact Typography Generator slider card vertical spacing rhythms */
  padding: 0 !important;
  height: auto !important;
  border: none !important;
}

.wh-typography-generator input[type="range"].wh-engine-slider:focus {
  outline: none !important;
}

/* 2. Track Styling: Matches the exact 5px height tracking line rail */
.wh-typography-generator input[type="range"].wh-engine-slider::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 2px !important; /* FIXED: Strict line height matching the active Typography Generator rail thickness */
  cursor: pointer !important;
  background: #e2e8f0 !important; /* Identical slate track color token */
  border-radius: 99px !important;
  border: none !important;
}

.wh-typography-generator input[type="range"].wh-engine-slider::-moz-range-track {
  width: 100% !important;
  height: 2px !important; /* FIXED: Strict line height matching the active Typography Generator rail thickness */
  cursor: pointer !important;
  background: #e2e8f0 !important;
  border-radius: 99px !important;
  border: none !important;
}

/* 3. Thumb Styling: Replicates the identical 14px crisp blue circular handles */
.wh-typography-generator input[type="range"].wh-engine-slider::-webkit-slider-thumb {
  height: 14px !important; /* FIXED: Precise thumb height matching the typography tool handles */
  width: 14px !important;  /* FIXED: Precise thumb width matching the typography tool handles */
  border-radius: 50% !important;
  background: #0066ff !important; /* Core brand blue layout constant anchor */
  cursor: pointer !important;
  -webkit-appearance: none !important;
  margin-top: -4.5px !important; /* Centers the 14px thumb exactly on the 5px tracking line */
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
  transition: background-color 0.1s ease, transform 0.1s ease !important;
}

.wh-typography-generator input[type="range"].wh-engine-slider::-moz-range-thumb {
  height: 14px !important; /* FIXED: Precise thumb height matching the typography tool handles */
  width: 14px !important;  /* FIXED: Precise thumb width matching the typography tool handles */
  border-radius: 50% !important;
  background: #0066ff !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
  transition: background-color 0.1s ease, transform 0.1s ease !important;
}

/* 4. Interactive Hover & Active Drag State Real-Time Transitions */
.wh-typography-generator input[type="range"].wh-engine-slider::-webkit-slider-thumb:hover {
  background: #0052cc !important; /* Deepens to navy-blue exactly like your first workspace canvas deck */
  transform: scale(1.05);
}

.wh-typography-generator input[type="range"].wh-engine-slider::-moz-range-thumb:hover {
  background: #0052cc !important;
  transform: scale(1.05);
}
/* ==========================================================================
   DYNAMIC FILLED RANGE TRACK DESIGN ENGINE 
   ========================================================================== */

/* --- 1. FIREFOX ENGINE NATIVE FILL PROGRESS OVERRIDES --- */
.wh-typography-generator input[type="range"].wh-engine-slider::-moz-range-progress {
  background-color: #0066ff !important; /* Signature primary brand accent layout blue fill */
  height: 5px !important;
  border-radius: 99px !important;
}

/* --- 2. CHROME / BLINK PROGRESS PREPARATION HOOKS --- */
.wh-typography-generator input[type="range"].wh-engine-slider::-webkit-slider-runnable-track {
  /* Generates a dynamic background scale layer updated live by our JavaScript utility below */
  background: linear-gradient(to right, #0066ff 0%, #0066ff 0%, #e2e8f0 0%, #e2e8f0 100%) !important;
  height: 5px !important;
  border-radius: 99px !important;
}
/* ==========================================================================
   CHROME & SAFARI PROGRESS TRACK FILL BACKGROUND OVERRIDES
   ========================================================================== */
.wh-typography-generator input[type="range"].wh-engine-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important; /* Wipes raw static background color sheets */
  background-color: transparent !important;
}

/* Force webkit engine to evaluate our dynamic background gradients as a solid track surface */
.wh-typography-generator input[type="range"].wh-engine-slider::-webkit-slider-runnable-track {
  background: inherit !important; /* Tells Chrome to pull background properties straight from parent input nodes live */
  height: 5px !important;
  border-radius: 99px !important;
}
/* ==========================================================================
   MINIMALIST 2PX SLIDER TRACK FILL ARCHITECTURE
   ========================================================================== */

/* 1. Track Rails: Dropped thickness to 2px for an ultra-clean developer look */
.wh-typography-generator input[type="range"].wh-engine-slider::-webkit-slider-runnable-track {
  background: inherit !important;
  height: 2px !important; /* FIXED: Strict 2px thickness boundary constraint */
  border-radius: 99px !important;
}

.wh-typography-generator input[type="range"].wh-engine-slider::-moz-range-track {
  height: 2px !important; /* FIXED: Strict 2px thickness boundary constraint */
  background: #e2e8f0 !important;
  border-radius: 99px !important;
}

/* 2. Firefox Engine Progress Rail Sync */
.wh-typography-generator input[type="range"].wh-engine-slider::-moz-range-progress {
  height: 2px !important;
  border-radius: 99px !important;
}

/* 3. Thumb Centering: Mathematically centers the 14px handles over the 2px lines */
.wh-typography-generator input[type="range"].wh-engine-slider::-webkit-slider-thumb {
  height: 14px !important;
  width: 14px !important;
  /* (14px thumb height - 2px track height) / 2 = 6px pull upward */
  margin-top: -6px !important; /* FIXED: Centers thumb over thin 2px webkit rails */
}

/* ==========================================================================
   PRODUCTION SIDEBAR BRAND HEADER ALIGNMENT MATCHES 
   ========================================================================== */

/* 1. Structural brand row container alignment mapping */
.wh-typography-generator .wh-sidebar-brand-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 16px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid #f1f5f9 !important; /* Muted inner separation line anchor */
  box-sizing: border-box !important;
  width: 100% !important;
}

/* 2. Text layout title groupings */
.wh-typography-generator .wh-brand-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Flash icon character adjustments */
.wh-typography-generator .wh-brand-icon-flash {
  font-size: 15px !important;
  color: #0066ff !important; /* Signature primary brand accent layout blue */
  display: block !important;
  line-height: 1 !important;
}

/* Authoritative system text token label rules */
.wh-typography-generator .wh-brand-label-text {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1e293b !important; /* Strict high-contrast neutral slate token color */
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

/* 3. Minimalist structural developer version tracking badge */
.wh-typography-generator .wh-brand-version-badge {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #0066ff !important;
  background-color: rgba(0, 102, 255, 0.05) !important; /* Ultra-soft micro halo blue background tint */
  padding: 3px 8px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  display: inline-block !important;
}
/* ==========================================================================
   PRODUCTION REPLICATION: SYNCHRONIZED DARK MODAL HEADER
   ========================================================================== */

/* 1. Header Row Panel Container: Forces the exact WebHostpedia dark slate theme layout */
.wh-typography-generator .wh-modal-header {
  height: 64px !important;
  padding: 0 24px !important;
  background-color: #0f172a !important; /* Strict dark theme background sync */
  border-bottom: 1px solid #1e293b !important; /* Dark slate separation line token */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* 2. Text Layout Titles & Badges Grouping */
.wh-typography-generator .wh-modal-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.wh-typography-generator .wh-modal-title {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important; /* High contrast crisp white written label */
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

.wh-typography-generator .wh-viewport-badge {
  font-family: monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #38bdf8 !important; /* Electric cyan-blue viewport resolution text indicator */
  background-color: rgba(56, 189, 248, 0.1) !important; /* Soft cyan halo background tint */
  padding: 4px 8px !important;
  border-radius: 4px !important;
  line-height: 1 !important;
}

/* 3. Device Breakpoint Toggle Deck Container (Embedded Capsule Track) */
.wh-typography-generator .wh-breakpoint-deck {
  background-color: #1e293b !important; /* Dark midnight inner capsule track backdrop */
  padding: 4px !important;
  border-radius: 8px !important;
  display: flex !important;
  gap: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.wh-typography-generator .wh-breakpoint-deck .wh-breakpoint-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important; /* Muted inactive text links */
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 6px 14px !important;
  height: 28px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.wh-typography-generator .wh-breakpoint-deck .wh-breakpoint-btn:hover {
  color: #ffffff !important;
}

/* Snaps the active slider device filter view straight to brand layout blue */
.wh-typography-generator .wh-breakpoint-deck .wh-breakpoint-btn.active {
  background-color: #0066ff !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3) !important;
}

/* 4. Sleek White-Hot Dismiss Window Close Trigger Icon Button */
.wh-typography-generator .wh-modal-header .wh-modal-close-btn {
  background: transparent !important;
  border: none !important;
  font-size: 26px !important;
  color: #94a3b8 !important; /* Muted slate close character text */
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

.wh-typography-generator .wh-modal-header .wh-modal-close-btn:hover {
  color: #ffffff !important; /* Glows to pure white on cursor interaction loops */
  transform: scale(1.1);
}
/* ==========================================================================
   FIXED: STABLE MODAL BACKDROP DOT-GRID PATTERN MATCHING
   ========================================================================== */

/* 1. Strip the background patterns off the shrinking inner container elements */
.wh-typography-generator .wh-text-container {
  background-image: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* 2. Attach the dotted grid pattern to the modal body wrapper so it stays stable */
.wh-typography-generator .wh-modal-body,
.wh-typography-generator .wh-resizable-inner-body {
  background-color: #fafbfc !important;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px) !important;
  background-size: 20px 20px !important; /* Locks pattern to your typography tool settings */
  
  /* Adds professional, comfortable spacing gutters around the white card */
  padding: 40px !important; 
  box-sizing: border-box !important;
  width: 100% !important;
  overflow-y: auto !important;
}

/* ==========================================================================
   FIXED: ISOLATED RESIZABLE SANDBOX VIEWPORT BACKDROP MATRIX
   ========================================================================== */

/* 1. Strip the background patterns off the master screen-dimmer overlay element */
.wh-typography-generator #resizeOverlay {
  background-image: none !important;
  background-color: rgba(15, 23, 42, 0.4) !important; /* Returns overlay back to standard flat dim mask */
}

/* 2. Anchor the dot matrix exclusively within the boundaries of the resizable preview frame */
.wh-typography-generator #resizeOverlay .wh-resizable-inner-body {
  background-color: #fafbfc !important;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px) !important;
  background-size: 20px 20px !important; /* Perfectly matches your typography tool dimensions */
  
  /* CRITICAL FORCE CORRECTION: Expands the canvas boundary walls to fill the entire draggable frame shell */
  width: 100% !important;
  height: 100% !important;
  padding: 40px !important;
  overflow-y: auto !important; /* Keeps scroll tracking smooth inside the resizer window */
  box-sizing: border-box !important;
}

/* 3. Ensure the active article text layout card floats beautifully over the isolated dot matrix */
.wh-typography-generator #resizeOverlay .wh-article-container {
  background-color: #ffffff !important;
  box-shadow: 
    0 10px 25px -5px rgba(15, 23, 42, 0.06), 
    0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
}
/* ==========================================================================
   FIXED: ABSOLUTE COORDINATE FLUID RESIZE MODAL CORE OVERRIDES
   ========================================================================== */

/* 1. Force the master resizable modal window to open in a stable depth profile */
.wh-typography-generator .wh-resize-modal-box {
  width: 90vw !important;
  max-width: 900px !important;
  height: 80vh !important; /* Locks a premium widescreen aspect container shell */
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* 2. Stretch the dragging container to span the entire modal box area below the header */
.wh-typography-generator #manualDragContainer.wh-resizable-drag-shell {
  position: absolute !important;
  top: 64px !important;     /* Pins layout directly below the 64px dark header bar */
  bottom: 0 !important;       /* Locks container securely to the absolute bottom rim edge */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;     /* Forces full horizontal wall-to-wall expansion */
  max-width: 100% !important;
  height: auto !important;    /* Breaks the old fixed constraints to let flex values breathe */
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  resize: none !important;    /* Disables unstable native browser container resizing overrides */
}

/* 3. Force the inner blueprint dot matrix canvas to cover 100% of the modal space */
.wh-typography-generator #resizeOverlay .wh-resizable-inner-body {
  background-color: #fafbfc !important;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px) !important;
  background-size: 20px 20px !important; /* Perfectly matches your typography spacing rules */
  
  flex-grow: 1 !important;    /* Pulls the dots all the way down to fill empty spaces */
  width: 100% !important;
  height: 100% !important;
  padding: 40px !important;
  overflow-y: auto !important; /* Preserves smooth scroll channels for long article cards */
  box-sizing: border-box !important;
}

/* 4. Ensure your custom UI corner grab handles stay floating on the very top of the dots layer */
.wh-typography-generator .wh-ui-handle {
  z-index: 100 !important;
  pointer-events: auto !important; /* Keeps custom manual drags fully responsive */
}
/* ==========================================================================
   PRODUCTION GRAPHICS MATCHING LAYER (FLAWLESS FLEX RESIZER ENGINE)
   ========================================================================== */

/* 1. Remove conflicting default properties from the modal overlay wrappers */
.wh-typography-generator #resizeOverlay .wh-resize-modal-box {
  display: none !important; /* Wipes any old conflicting internal container structures completely */
}

/* 2. Re-establish the main draggable shell frame to behave exactly like a modal container box */
.wh-typography-generator #manualDragContainer.wh-resizable-drag-shell {
  width: 650px !important;  /* Starting width baseline constant value match */
  height: 480px !important; /* Starting height container depth format match */
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  resize: none !important; /* Managed completely by custom mouse position loop metrics */
}

/* 3. Force the inner blueprint dot background matrix to fill the entire remaining body space */
.wh-typography-generator #resizeOverlay .wh-resizable-inner-body {
  background-color: #fafbfc !important;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px) !important;
  background-size: 20px 20px !important; /* Matches your typography pattern spacing scale */
  flex-grow: 1 !important;
  width: 100% !important;
  height: calc(100% - 64px) !important; /* Subtracts the 64px dark header bar depth perfectly */
  padding: 40px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

/* 4. Position and layer the custom mouse grab handles securely on the outer borders */
.wh-typography-generator .wh-ui-handle {
  position: absolute !important;
  background-color: transparent !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.wh-typography-generator .wh-handle-right {
  top: 0 !important;
  right: 0 !important;
  width: 8px !important;
  height: 100% !important;
  cursor: e-resize !important;
}

.wh-typography-generator .wh-handle-bottom {
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 8px !important;
  cursor: s-resize !important;
}

.wh-typography-generator .wh-handle-corner {
  bottom: 0 !important;
  right: 0 !important;
  width: 16px !important;
  height: 16px !important;
  cursor: se-resize !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  gap: 2px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}

.wh-typography-generator .wh-handle-corner span {
  display: block !important;
  background-color: #94a3b8 !important;
  height: 1.5px !important;
  border-radius: 99px !important;
}
.wh-typography-generator .wh-handle-corner span:nth-child(1) { width: 4px !important; }
.wh-typography-generator .wh-handle-corner span:nth-child(2) { width: 8px !important; }
.wh-typography-generator .wh-handle-corner span:nth-child(3) { width: 12px !important; }

/* Interactive Hover Transitions for handles */
.wh-resizable-drag-shell:hover .wh-handle-corner span { background-color: #0066ff !important; }

/* ==========================================================================
   VARIABLE-DRIVEN STABLE RESIZER OVERRIDES
   ========================================================================== */

/* Tell the resizable shell to read variables, using your 650px x 480px settings as the baseline default layout values */
.wh-typography-generator #manualDragContainer.wh-resizable-drag-shell {
  width: var(--studio-width, 650px) !important;
  max-width: var(--studio-width, 900px) !important;
  height: var(--studio-height, 480px) !important;
  max-height: var(--studio-height, 600px) !important;
  
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  resize: none !important;
}
/* ==========================================================================
   STABLE CONTENT WRAPPING INSIDE THE DRAG-RESIZE SANDBOX
   ========================================================================== */
.wh-typography-generator #resizeOverlay .wh-article-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wh-typography-generator #resizeOverlay .wh-preview-heading,
.wh-typography-generator #resizeOverlay .wh-preview-paragraph {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important; /* Prevents text lines from locking into single long lines */
  text-align: left !important;
}
/* ==========================================================================
   FIXED VISIBILITY LAYER FOR RE-SIZABLE MANUAL STUDIO HANDLES
   ========================================================================== */

/* 1. Reset parent drag shell and make long structural tracks transparent */
.wh-typography-generator #manualDragContainer.wh-resizable-drag-shell {
  overflow: visible !important;
}

.wh-typography-generator .wh-handle-right,
.wh-typography-generator .wh-handle-bottom {
  position: absolute !important;
  background-color: transparent !important; /* Makes long ugly side blocks invisible */
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2. RIGHT RESIZER: Floating vertical drag handle pill */
.wh-typography-generator .wh-handle-right {
  top: 64px !important; /* Starts below the dark title command header bar */
  right: -6px !important; /* Centers the floating handle on the card edge boundary */
  width: 12px !important; /* Broad structural touch target bounding box area */
  height: calc(100% - 64px) !important;
  cursor: e-resize !important;
}

/* Floating internal central indicator pill element layer matching typography tool */
.wh-typography-generator .wh-handle-right::before {
  content: "" !important;
  display: block !important;
  width: 4px !important;
  height: 24px !important; /* Explicit pill height length */
  background-color: #cbd5e1 !important; /* Clean light-gray neutral baseline state fill */
  border: 1px solid #cbd5e1 !important;
  border-radius: 99px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

/* 3. BOTTOM RESIZER: Floating horizontal drag handle pill */
.wh-typography-generator .wh-handle-bottom {
  bottom: -6px !important; /* Centers the floating handle on the bottom edge boundary */
  left: 0 !important;
  width: 100% !important;
  height: 12px !important; /* Broad structural touch target bounding box area */
  cursor: s-resize !important;
}

/* Floating internal central indicator pill element layer matching typography tool */
.wh-typography-generator .wh-handle-bottom::before {
  content: "" !important;
  display: block !important;
  width: 24px !important; /* Explicit pill width length */
  height: 4px !important;
  background-color: #cbd5e1 !important; /* Clean light-gray neutral baseline state fill */
  border: 1px solid #cbd5e1 !important;
  border-radius: 99px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

/* 4. ACTIVE HOVER SHIFTS: Illuminates the floating pill bars to your brand blue on cursor hover or active drags */
.wh-resizable-drag-shell:hover .wh-handle-right::before,
.wh-typography-generator .wh-handle-right:hover::before {
  background-color: #0066ff !important; /* Vibrant primary brand blue */
  border-color: #0066ff !important;
  transform: scaleX(1.2);
}

.wh-resizable-drag-shell:hover .wh-handle-bottom::before,
.wh-typography-generator .wh-handle-bottom:hover::before {
  background-color: #0066ff !important; /* Vibrant primary brand blue */
  border-color: #0066ff !important;
  transform: scaleY(1.2);
}

/* 5. CORNER SE-RESIZER HANDLE: Precise multi-line nested corner slash layout */
.wh-typography-generator .wh-handle-corner {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  width: 16px !important;
  height: 16px !important;
  cursor: se-resize !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  gap: 2.5px !important;
  background-color: transparent !important;
}

.wh-typography-generator .wh-handle-corner span {
  display: block !important;
  background-color: #cbd5e1 !important; /* Soft default slate tone */
  height: 1.5px !important;
  border-radius: 99px !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.wh-typography-generator .wh-handle-corner span:nth-child(1) { width: 4px !important; }
.wh-typography-generator .wh-handle-corner span:nth-child(2) { width: 8px !important; }
.wh-typography-generator .wh-handle-corner span:nth-child(3) { width: 12px !important; }

/* Forces the corner indicator lines to illuminate into brand blue simultaneously on hover or clicks */
.wh-resizable-drag-shell:hover .wh-handle-corner span,
.wh-typography-generator .wh-handle-corner:hover span {
  background-color: #0066ff !important;
  transform: scale(1.1);
}

/* Production CSS Code Styles ********/
.wh-footer-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
}
/* ==========================================================================
   PRODUCTION SCROLL LOCK GUARD (PREVENTS BACKDROP SCROLLING)
   ========================================================================== */

/* Locks the main background body completely frozen when any modal window opens */
body.wh-scroll-locked {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
  
  /* Prevents the layout from shifting slightly to the right when the scrollbar disappears */
  padding-right: var(--scrollbar-compensate, 0px); 
}