/* Safely imports ultra-lightweight font weights for advanced design previews */
@import url('https://googleapis.com');

/* ==========================================================================
   1. SYSTEM COMPONENT BOUNDS & LIGHT LAYOUT ROOT (PRIMARY: #0066ff)
   ========================================================================== */
.wh-typography-generator {
  display: flex;
  flex-direction: row;
  min-height: 720px;
  height: 90vh;
  background-color: #f8fafc;     /* Soft off-white layout page background */
  color: #1e293b;                /* High contrast slate text dark tokens */
  font-family: system-ui, -apple-system, sans-serif;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #cbd5e1;     /* Distinct structural border lines */
  box-sizing: border-box;
  position: relative;
}
.wh-typography-generator *, 
.wh-typography-generator *::before, 
.wh-typography-generator *::after { 
  box-sizing: border-box; 
}

/* ==========================================================================
   2. CONTROL PANEL LIGHT SIDEBAR INTERFACES
   ========================================================================== */
.wh-typography-generator .wh-sidebar {
  width: 380px;
  background-color: #ffffff;    /* Pure white sidebar layer cards */
  border-right: 1px solid #e2e8f0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}
.wh-typography-generator .wh-sidebar::-webkit-scrollbar { width: 5px; }
.wh-typography-generator .wh-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

.wh-brand-header { margin-bottom: 24px; }
.wh-badge { 
  display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 700; 
  background-color: rgba(0, 102, 255, 0.08); color: #0066ff; 
  border-radius: 4px; border: 1px solid rgba(0, 102, 255, 0.15); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; 
}
.wh-title { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0 0 6px 0; letter-spacing: -0.03em; }
.wh-subtitle { font-size: 12px; color: #64748b; margin: 0; line-height: 1.5; }

/* ==========================================================================
   3. SETTINGS CARD ELEMENTS & COMPONENT TOGGLES
   ========================================================================== */
.wh-control-stack { display: flex; flex-direction: column; gap: 16px; }
.wh-control-card { background-color: #f1f5f9; border: 1px solid #e2e8f0; padding: 18px; border-radius: 6px; }
.wh-card-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #475569; }
.wh-slider-group { margin-bottom: 14px; }
.wh-slider-label-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #475569; margin-bottom: 6px; }
.wh-indicator { font-size: 12px; color: #0f172a; font-family: monospace; font-weight: 600; }
.wh-accent { color: #0066ff; }
.wh-card-helper { font-size: 11px; color: #64748b; margin: 8px 0 0 0; line-height: 1.4; }

.wh-toggle-container { display: flex; background-color: #ffffff; padding: 4px; border-radius: 4px; border: 1px solid #cbd5e1; gap: 4px; }
.wh-toggle-btn, .wh-preset-btn, .wh-align-btn { 
  flex: 1; background: none; border: none; color: #64748b; font-size: 10px; font-weight: 700; padding: 8px 2px; cursor: pointer; border-radius: 3px; transition: all 0.15s ease; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; 
}
.wh-toggle-btn:hover, .wh-preset-btn:hover, .wh-align-btn:hover { color: #0f172a; }
.wh-toggle-btn.active, .wh-preset-btn.active, .wh-align-btn.active { background-color: #0066ff; color: #ffffff; }

.wh-select-wrapper { position: relative; }
.wh-select-wrapper::after { content: '▼'; font-size: 8px; color: #64748b; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.wh-engine-select { width: 100%; background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 10px 14px; color: #1e293b; font-size: 13px; appearance: none; cursor: pointer; }

/* HAIRLINE PROGRESS SLIDER SYSTEM */
input[type="range"].wh-engine-slider {
  width: 100%; height: 2px; background: #cbd5e1; border-radius: 9999px; appearance: none; -webkit-appearance: none; cursor: pointer; margin: 14px 0; outline: none; border: none; transition: background-color 0.2s ease;
}
input[type="range"].wh-engine-slider:hover { background: #94a3b8; }

input[type="range"].wh-engine-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; 
  background: #0066ff; border: 3px solid #ffffff; box-shadow: 0 0 0 1px #0066ff, 0 2px 4px rgba(0,0,0,0.1); 
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease;
}
input[type="range"].wh-engine-slider::-webkit-slider-thumb:hover { transform: scale(1.2); background: #0052cc; }
input[type="range"].wh-engine-slider:active::-webkit-slider-thumb { transform: scale(1.1); background: #0066ff; box-shadow: 0 0 12px rgba(0, 102, 255, 0.4); }

/* ==========================================================================
   4. DECOUPLED FLATTENED PLAYGROUND LIGHT CANVAS CANVAS
   ========================================================================== */
.wh-workspace { flex: 1; display: flex; flex-direction: column; background-color: #f8fafc; overflow: hidden; position: relative; }
.wh-workspace-header { height: 52px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background-color: #ffffff; flex-shrink: 0; }
.wh-header-tip { font-size: 12px; color: #64748b; font-weight: 500; }

.wh-preview-canvas {
  flex: 1; padding: 48px; display: flex; align-items: center; justify-content: center; 
  background-color: #ffffff; background-image: radial-gradient(#e2e8f0 1.5px, transparent 1px); background-size: 20px 20px; overflow-y: auto;
}
.wh-text-container { width: 100%; }
.wh-preview-heading { color: #0f172a; margin: 0 0 18px 0; letter-spacing: -0.02em; }
.wh-preview-paragraph { color: #334155; font-size: 16px; line-height: 1.7; }

.wh-modal-trigger-button {
  background-color: #f1f5f9; color: #0066ff; border: 1px solid #cbd5e1; font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.15s ease;
}
.wh-modal-trigger-button:hover { background-color: #0066ff; color: #ffffff; border-color: #0066ff; }

/* ==========================================================================
   5. STYLESHEET COMPILER LIGHT DECK FOOTER
   ========================================================================== */
.wh-code-footer { background-color: #ffffff; border-top: 1px solid #e2e8f0; padding: 16px 20px; flex-shrink: 0; height: 210px; display: flex; flex-direction: column; overflow: hidden; }
.wh-footer-action-row { display: flex; align-items: center; margin-bottom: 10px; width: 100%; }
.wh-footer-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; }

.wh-copy-button { 
  background-color: #0066ff; color: #ffffff; border: none; font-weight: 700; padding: 8px 16px; border-radius: 4px; cursor: pointer; text-transform: uppercase; margin-left: auto; 
}
.wh-copy-button:hover { background-color: #0052cc; }

.wh-code-display-block { background-color: #0f172a; padding: 12px; border: 1px solid #1e293b; border-radius: 4px; overflow-x: auto; flex: 1; margin: 0; }
#cssOutput { color: #38bdf8; font-family: monospace; font-size: 12px; white-space: pre; }
/* ==========================================================================
   6. INTERACTIVE LIGHT SPLIT HEIGHT RESIZER BAR
   ========================================================================== */
.wh-typography-generator .wh-resizer-bar {
  height: 8px; background-color: #e2e8f0; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; cursor: row-resize; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.15s ease; z-index: 10;
}
.wh-typography-generator .wh-resizer-bar:hover,
.wh-typography-generator .wh-resizer-bar.active {
  background-color: #0066ff; 
}
.wh-typography-generator .wh-resizer-knob-lines { width: 24px; height: 2px; background-color: #94a3b8; border-radius: 1px; position: relative; }
.wh-typography-generator .wh-resizer-bar:hover .wh-resizer-knob-lines,
.wh-typography-generator .wh-resizer-bar.active .wh-resizer-knob-lines { background-color: #ffffff; }

/* ==========================================================================
   7. GLOBAL FOCUS OVERLAY SCHEMATICS (FIXED FOR HIGH TEXT VISIBILITY)
   ========================================================================== */
.wh-typography-generator .wh-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(15, 23, 42, 0.45); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 999999; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 30px;
}
.wh-typography-generator .wh-modal-overlay.active { opacity: 1; pointer-events: auto; }

.wh-modal-box {
  background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; width: 100%; max-width: 900px; max-height: 85vh; 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-modal-overlay.active .wh-modal-box { transform: scale(1); }

.wh-modal-header {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid #e2e8f0; background-color: #f8fafc; flex-shrink: 0;
}
.wh-modal-title-group { display: flex; align-items: center; gap: 12px; }
.wh-modal-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #475569; letter-spacing: 0.05em; }
.wh-viewport-badge { background-color: rgba(0, 102, 255, 0.08); color: #0066ff; font-family: monospace; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(0, 102, 255, 0.15); }

.wh-breakpoint-deck { padding: 2px; background-color: #ffffff; border-radius: 4px; border: 1px solid #cbd5e1; }
.wh-breakpoint-btn { background: none; border: none; color: #64748b; font-size: 10px; font-weight: 700; padding: 4px 10px; cursor: pointer; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.02em; transition: all 0.15s ease; }
.wh-breakpoint-btn:hover { color: #0f172a; }
.wh-breakpoint-btn.active { background-color: #0066ff; color: #ffffff; }

.wh-modal-close-btn { background: none; border: none; color: #64748b; font-size: 24px; cursor: pointer; line-height: 1; transition: color 0.1s; }
.wh-modal-close-btn:hover { color: #0f172a; }

/* MODAL CANVAS LAYER (FIXED INTERIOR CONTRAST GRAPHICS) */
.wh-modal-body { 
  padding: 60px 48px; overflow-y: auto; flex: 1; background-color: #ffffff;
  background-image: radial-gradient(#e2e8f0 1.5px, transparent 1px); background-size: 24px 24px; 
}

/* Explicit text overrides enforcing high visibility contrast inside the active modal */
.wh-modal-body .wh-preview-heading {
  color: #0f172a !important;   /* Hard contrast rich dark slate heading */
}
.wh-modal-body .previewParagraph {
  color: #334155 !important;   /* Solid readability dark gray body text */
}

/* Background Freeze Lock */
body.wh-scroll-locked { overflow: hidden !important; }

/* ==========================================================================
   8. RESPONSIVE MEDIA BREAKPOINTS
   ========================================================================== */
@media (max-width: 850px) {
  .wh-typography-generator { flex-direction: column; height: auto; }
  .wh-sidebar { width: 100% !important; height: 520px; border-right: none; border-bottom: 1px solid #e2e8f0; }
  .wh-modal-box { max-height: 95vh; }
  .wh-modal-body { padding: 30px 20px; }
  .wh-resizer-bar { display: none; } 
  .wh-code-footer { height: auto !important; }
}

/* ==========================================================================
   FIXED: ARTICLE LAYOUT SNIPPET TRACKER BUTTON STYLES
   ========================================================================== */

/* Applies the modern clean styling to the short snippet and deep read button selectors */
.wh-typography-generator .wh-text-btn {
  flex: 1;
  background: none;
  border: none;
  color: #64748b;                 /* Standard subtle gray icon text */
  font-size: 10px;
  font-weight: 700;
  padding: 8px 2px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Hover tracking states */
.wh-typography-generator .wh-text-btn:hover {
  color: #0f172a;                 /* Dark slate contrast hover shift */
}

/* Active background selection highlight state matching primary blue (#0066ff) */
.wh-typography-generator .wh-text-btn.active {
  background-color: #0066ff;
  color: #ffffff;
}
/* ==========================================================================
   FIXED: PERFECT STRUCTURAL HORIZONTAL CENTERING FOR THE TEXT PREVIEW CONTAINER
   ========================================================================== */

/* 1. Target the immediate parent container div holding the preview content block */
.wh-typography-generator .wh-modal-body {
  padding: 60px 48px;
  overflow-y: auto;
  flex: 1;
  background-color: #ffffff;
  background-image: radial-gradient(#e2e8f0 1.5px, transparent 1px);
  background-size: 24px 24px;
  
  /* CRITICAL CORRECTION: Forces the nested text element block to always center horizontally */
  display: flex !important;
  flex-direction: column;
  align-items: center;    /* Anchors child layout elements directly to the horizontal center axis */
}

/* 2. Target the text bounding element parent itself */
.wh-typography-generator #modalTextContainer {
  width: 100%;            /* Fluidly fills structural boundaries up to its dynamic clamp limits */
  margin-left: auto !important;
  margin-right: auto !important; /* Secondary margin anchor safeguard ensuring it stays pinned center */
}

/* Establish a strict layout container context on your workspace and modal body panels */
.wh-typography-generator .wh-preview-canvas,
.wh-typography-generator .wh-modal-body {
  container-type: inline-size !important; /* Registers the parent block layout for internal query tracking */
}
/* FIXED: Registers the manual dragging shell wrapper as an active inline size tracking container */
.wh-typography-generator .wh-resizable-drag-shell {
  container-type: inline-size !important;
}


/* ==========================================================================
   INTERACTIVE RESIZABLE BOX STUDIO MODAL WINDOW MODULE
   ========================================================================== */
.wh-typography-generator .wh-resizable-box-wrapper {
  max-width: 950px; /* Limits maximum frame expansion limits */
  width: auto;
}

/* ACTIVATES NATIVE HORIZONTAL WINDOW ELEMENT DRAGGING TRACK GRIPS */
.wh-typography-generator .wh-resizable-drag-shell {
  min-width: 320px;          /* Matches target mobile viewport floor barriers */
  max-width: 900px;          /* Restricts stretching beyond desktop canvas zones */
  width: 650px;              /* Starting initial workspace sandbox scale block width */
  height: 50vh;
  resize: horizontal;        /* FIXED: Instructs browser to attach mouse scaling handles */
  overflow: auto;            /* Required by specifications to keep resize tracks active */
  background-color: #ffffff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  position: relative;
  margin: 0 auto;            /* Keeps card shell centered inside full overlay views */
}

.wh-typography-generator .wh-resizable-inner-body {
  height: 100%;
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 40px !important;
}

/* Highlight the native dragging icon tracking thumb overlay visually */
.wh-typography-generator .wh-resizable-drag-shell::-webkit-resizer {
  background-color: #0066ff;
  border: 3px solid #ffffff;
  border-radius: 4px;
}
/* ==========================================================================
   FIXED: ISOLATED TRACK ARCHITECTURE FOR MANUAL DRAG MODAL (RESOLVES DETACH BUGS)
   ========================================================================== */
/* ==========================================================================
   UPDATED MODERN VISUAL CONTROLS FOR DRAG RESIZER
   ========================================================================== */
.wh-typography-generator .wh-resize-modal-box {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  width: auto;
  max-width: 950px;
  max-height: 85vh;
  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-resize-modal-box {
  transform: scale(1);
}

/* THE DRAGGABLE SHELL CONTAINER */
.wh-typography-generator .wh-resizable-drag-shell {
  min-width: 340px;
  max-width: 900px;
  width: 650px;
  height: 52vh;
  resize: both;               /* Activated in both directions for fluid testing */
  overflow: hidden;           /* Overrides default browser auto scroll scrollbars */
  background-color: #ffffff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  position: relative;
  margin: 0 auto;
  container-type: inline-size !important;
}

/* HIDES THE NATIVE UGLY DEFAULT CHROME RESIZER ICON CORNER COMPLETELY */
.wh-typography-generator .wh-resizable-drag-shell::-webkit-resizer {
  display: none !important;
  appearance: none !important;
}

.wh-typography-generator .wh-resizable-inner-body {
  height: 100%;
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 50px 40px !important;
  overflow-y: auto;
}

.wh-typography-generator #resizeTextContainer .wh-preview-heading { color: #0f172a !important; }
.wh-typography-generator #resizeTextContainer .previewParagraph { color: #334155 !important; }

/* SHARED VISUAL UI HANDLES BASE */
.wh-typography-generator .wh-ui-handle {
  position: absolute;
  background-color: #e2e8f0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  pointer-events: none;       /* Let mouse clicks click through directly onto browser's underlying resizing track */
}

/* RIGHT EDGE DRAG BAR HANDLE */
.wh-typography-generator .wh-handle-right {
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  border-left: 1px solid #cbd5e1;
  cursor: e-resize;
}

/* BOTTOM EDGE DRAG BAR HANDLE */
.wh-typography-generator .wh-handle-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border-top: 1px solid #cbd5e1;
  cursor: s-resize;
}

/* BOTTOM RIGHT CORNER ACCENT GRIP */
.wh-typography-generator .wh-handle-corner {
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 2px;
  cursor: se-resize;
}

/* Traction grip lines inside the corner block */
.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; }

/* HOVER / ACTIVE COMPONENT HIGHLIGHTING ENHANCEMENTS MATCHING PRIMARY COLOR (#0066ff) */
.wh-resizable-drag-shell:hover .wh-ui-handle,
.wh-resizable-drag-shell:active .wh-ui-handle {
  background-color: #cbd5e1;
}

.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.1);
}

.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.1);
}

.wh-resizable-drag-shell:hover .wh-handle-corner span,
.wh-resizable-drag-shell:active .wh-handle-corner span {
  background-color: #0066ff;
}
/* ==========================================================================
   CLEAN MODERN TYPEFACE DROP-DOWN SELECTOR STYLES
   ========================================================================== */

/* 1. Style the relative outer layout positioning wrapper box */
.wh-typography-generator .wh-select-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* Custom interactive drop-down chevron arrow indicator overlay */
.wh-typography-generator .wh-select-wrapper::after {
  content: '▼';
  font-size: 8px;
  color: #64748b;                 /* Clean subtle slate color token */
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;           /* Allows mouse clicks to safely pass straight through directly onto select option dropdown nodes */
  transition: color 0.15s ease, transform 0.15s ease;
}

/* Hover tracking interaction adjustments for arrow icon tags */
.wh-typography-generator .wh-select-wrapper:hover::after {
  color: #0f172a;                 /* Dark contrast transition */
}

/* 2. Target the core HTML native dropdown field node directly */
.wh-typography-generator select.wh-engine-select {
  width: 100%;
  height: 42px;                  /* Elevated layout thickness for comfortable touch clicks */
  background-color: #ffffff;      /* Pure clean interior background cards */
  color: #1e293b;                 /* High contrast slate text dark tokens */
  font-size: 13px;
  font-weight: 500;
  padding: 0 36px 0 14px;         /* Generous right padding blocks text from running into the chevron icon */
  border: 1px solid #cbd5e1;      /* Light structural line divider */
  border-radius: 6px;             /* Crisp smooth unified container curves */
  appearance: none;               /* Reset native browser engine wrapper layers completely */
  -webkit-appearance: none;       /* Chrome, Safari, and newer browser engines mask wipe */
  -moz-appearance: none;          /* Firefox design reset script validation */
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Modern micro bottom depth shadow */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Drop-down selector hover state framework */
.wh-typography-generator select.wh-engine-select:hover {
  border-color: #94a3b8;          /* Brightens slightly to alert cursor locations */
  background-color: #fafafa;
}

/* Drop-down selector active focus state matching primary blue (#0066ff) */
.wh-typography-generator select.wh-engine-select:focus {
  border-color: #0066ff;          /* High contrast primary layout blue anchor */
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); /* Modern soft halo glow feedback */
  background-color: #ffffff;
}

/* 3. Style the underlying drop-down options menu popup blocks cleanly */
.wh-typography-generator select.wh-engine-select option {
  background-color: #ffffff;
  color: #1e293b;
  font-size: 14px;
  padding: 12px;                  /* Comfortable padding spacing grid inside options list views */
}

/* ==========================================================================
   FIXED: SLIM AND COMPACT ACTION BUTTONS FOR THE CODE GENERATOR HEADER
   ========================================================================== */

/* Target the layout copy triggers inside the footer action row simultaneously */
.wh-typography-generator .wh-copy-button {
  background-color: #0066ff;
  color: #ffffff;
  border: none;
  font-size: 11px;               /* Reduced font size for a cleaner look */
  font-weight: 700;
  padding: 6px 12px;              /* Shrunk padding parameters to make buttons visibly smaller */
  height: 32px;                  /* Hardcoded clean, slim uniform height alignment */
  border-radius: 4px;             /* Sharp modern corners */
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

/* Hover tracking states for the primary CSS button */
.wh-typography-generator .wh-copy-button:hover {
  background-color: #0052cc;
}

/* Specific structural spacing correction override for the HTML template button */
.wh-typography-generator #copyHtmlBtn {
  background-color: #ffffff !important;
  color: #0066ff !important;
  border: 1px solid #cbd5e1 !important;
  margin-right: 8px !important;   /* Tightened right gap spacing metric */
  margin-left: auto !important;   /* Retains the flex tool anchor pushing it to the right edge */
}

/* Hover tracking states for the secondary white HTML button */
.wh-typography-generator #copyHtmlBtn:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0052cc !important;
}
/* ==========================================================================
   GLOBAL PAGE BACKDROP AND MASTER HOVER CONTAINER FRAME EXTRA DEPTH DECK
   ========================================================================== */

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

/* 2. Target the parent wrapper frame container div holding the entire typography engine tool */
.wh-typography-generator {
  /* CLEAN MODERN BOX SHADOW: Multi-layered smooth shadow framework (Ambience Depth Style) */
  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);
    
  background-color: #ffffff;  /* Pure white baseline anchor backdrop card */
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  border-color: #e2e8f0;      /* Softened border line blending into page backdrops cleanly */
}

/* Subtle mouse hover effect to elevate component depth values dynamically */
.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);
}
/* ==========================================================================
   FIXED: STRONGER CONTRAST BACKDROP OVERRIDE FOR THE WORKSPACE HEADER BAR
   ========================================================================== */
.wh-typography-generator .wh-workspace-header {
  /* FIXED: Slightly increased from pure white (#ffffff) to a crisp, defined slate gray shade */
  background-color: #fdfdfd !important; 
  
  border-bottom: 1px solid #cbd5e1;       /* Tightened bottom line accent to lock header panels into place */
  box-shadow: inset 0 -1px 0 0 #ffffff;    /* Modern clean interior hair-line highlight accent safeguard */
}
/* ==========================================================================
   MODERN WHITE HOVER BUTTON CARD DESIGNS FOR WORKSPACE HEADERS
   ========================================================================== */

/* 1. Add extra structural clearance spacing onto the header row box wrapper */
.wh-typography-generator .wh-workspace-header {
  height: 56px;                   /* Slightly increased height to make button target grids comfortable */
  padding: 0 24px;
  background-color: #fdfeff !important;
  border-bottom: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* 2. Style both trigger action buttons simultaneously */
.wh-typography-generator .wh-modal-trigger-button {
  background-color: #ffffff !important; /* Forces a crisp, clean white background card layer */
  color: #1e293b !important;            /* High-contrast dark slate written text */
  border: 1px solid #cbd5e1 !important;  /* Elegant, thin border definition line */
  font-size: 11px;
  font-weight: 700;
  padding: 0 14px;                      /* Perfectly balanced horizontal spacing */
  height: 32px;                         /* Compact, low-profile uniform height metric */
  border-radius: 6px;                   /* Unified smooth corner container curves */
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  
  /* MICRO SMOOTH SHADOW LAYER: Multi-stage crisp depth anchoring ambient style */
  box-shadow: 
    0 1px 2px 0 rgba(15, 23, 42, 0.04),
    0 1px 3px -1px rgba(15, 23, 42, 0.08);
  
  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;
}

/* 3. Space buttons cleanly right next to each other along the header row path */
.wh-typography-generator #openModalBtn {
  margin-left: auto;              /* Flex tool pushing the first button rightward */
}

.wh-typography-generator #openResizeModalBtn {
  margin-left: 8px !important;    /* Tightened horizontal gap spacing link */
}

/* ==========================================================================
   INTERACTIVE BUTTON INTERACTIONS (HOVER & CLICK STATES)
   ========================================================================== */

/* Elevates the white card depth profiles and expands borders on mouse hover */
.wh-typography-generator .wh-modal-trigger-button:hover {
  border-color: #0066ff !important;     /* Brightens outline track to primary brand blue */
  color: #0066ff !important;            /* text shifts to primary brand blue accent */
  transform: translateY(-1px);          /* Smooth programmatic elevation snap upward */
  
  box-shadow: 
    0 2px 4px 0 rgba(0, 102, 255, 0.04),
    0 4px 8px -1px rgba(15, 23, 42, 0.08);
}

/* Snaps back tightly when actively pressed by a mouse click grab */
.wh-typography-generator .wh-modal-trigger-button:active {
  transform: translateY(0);             /* Deflates layout elevation instantly */
  background-color: #f8fafc !important; /* Soft micro-shading backdrop transition */
  
  box-shadow: 
    0 1px 1px 0 rgba(15, 23, 42, 0.05),
    inset 0 1px 2px 0 rgba(15, 23, 42, 0.05);
}
/* ==========================================================================
   CODEPEN THEME SYNTAX COLOR OVERRIDES FOR THE STYLESHEET BOX
   ========================================================================== */

/* 1. Target the outer wrapping code snippet content container card */
.wh-typography-generator .wh-code-display-block {
  background-color: #1e1f29 !important; /* CodePen classic deep charcoal-black canvas */
  border: 1px solid #2a2c3d !important;  /* High-contrast dark midnight border lines */
  border-radius: 6px;
  padding: 16px !important;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25); /* Interior shadow depth simulation */
}

/* 2. Target the core raw code line string values element node directly */
.wh-typography-generator #cssOutput {
  font-family: 'Fira Code', 'Courier New', Courier, monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  
  /* FIXED: Set global baseline code text color to CodePen crisp pure off-white */
  color: #ffffff !important; 
  white-space: pre;
}

/* 3. Inject explicit colorizations parsing standard CSS layout variables */
/* Re-colors the header comments to CodePen rich editor moss green */
.wh-typography-generator #cssOutput::first-line,
.wh-typography-generator #cssOutput:contains("/*") {
  color: #7a9c60 !important; 
  font-style: italic;
}

/* Custom adjustment targeting code container values dynamically if markup tokens are present */
.wh-typography-generator #cssOutput {
  /* Emulates the CodePen neon accent pop using high-contrast text shadowing fallback rules */
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.05);
}
/* ==========================================================================
   UPDATED: WCAG STATUS INDICATOR ACCENT BADGE STYLES
   ========================================================================== */
.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),
    0 1px 3px -1px rgba(15, 23, 42, 0.05);
}

/* Base status tracking dots layout specs */
.wh-typography-generator #contrastIndicatorDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Live validation indicator text logs specs */
.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; /* Safe baseline green text */
}

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

.wh-typography-generator .contrast-warn-dot { 
  background-color: #eab308 !important; 
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.5); 
}