/* Fast SEO Tools - Professional Studio Design System */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Valley+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary: #0F172A;
  --primary-light: #1E293B;
  --accent: #FF4D26;
  --accent-hover: #E03E1A;
  --accent-subtle: rgba(255, 77, 38, 0.08);
  --accent-border: rgba(255, 77, 38, 0.25);
  --danger: #EF4444;
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --border: #E2E8F0;
  --border-focus: #FF4D26;
  --bg-primary: #FFFFFF;
  --bg-surface: #F8FAFC;
  --card-bg: #FFFFFF;
  --glow-shadow: 0 4px 20px rgba(255, 77, 38, 0.12);
}

html.dark {
  --primary: #F8FAFC;
  --primary-light: #E2E8F0;
  --accent: #FF552E;
  --accent-hover: #FF6E4D;
  --accent-subtle: rgba(255, 85, 46, 0.12);
  --accent-border: rgba(255, 85, 46, 0.3);
  --danger: #F87171;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --border: #1E293B;
  --border-focus: #FF552E;
  --bg-primary: #080C14;
  --bg-surface: #0E1524;
  --card-bg: #0F1626;
  --glow-shadow: 0 4px 25px rgba(255, 85, 46, 0.18);
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM: Valley Sans for body/everything, Montserrat for Headings
   ========================================================================== */
*, *::before, *::after {
  font-family: 'Valley Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  box-sizing: border-box;
}

body {
  font-family: 'Valley Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
  line-height: 1.5;
}

/* Montserrat for all headings and titles */
h1, h2, h3, h4, h5, h6,
.font-heading,
.title,
.tool-title,
.site-title,
[class*="text-xl"],
[class*="text-2xl"],
[class*="text-3xl"],
[class*="text-4xl"],
[class*="text-5xl"],
[class*="text-6xl"] {
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Complete Monospace Removal: Code, badges, inputs and kbd all use Valley Sans */
code, kbd, samp, pre, .font-mono, [class*="font-mono"], textarea, input, select {
  font-family: 'Valley Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Zero Gradients: Aurora and gradient orbs hidden */
.aurora-mesh,
.aurora-orb {
  display: none !important;
}

/* Scroll-Driven Smooth Reveal Engine */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Static Red-Orange Headline Accent (Zero Gradients) */
.text-gradient-electric {
  color: #FF4D26 !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}
html.dark .text-gradient-electric {
  color: #FF552E !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

/* Clean Tech Grid (Zero Gradients) */
.bg-cyber-grid {
  background-color: transparent !important;
  background-image: none !important;
}
html.dark .bg-cyber-grid {
  background-color: transparent !important;
  background-image: none !important;
}

/* Status Indicator Beacon Pulse */
.beacon-pulse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.beacon-pulse::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: currentColor;
  opacity: 0.75;
  animation: beacon-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes beacon-ping {
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ==========================================================================
   SELECTIVE FULLY ROUNDED ELEMENTS (Pill Geometry)
   Only buttons, single-line inputs, icon circles, and chips are fully rounded.
   ========================================================================== */

/* Primary Action Button - Fully Rounded Pill */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--accent) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  padding: 0.625rem 1.35rem;
  border-radius: 9999px !important;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(255, 77, 38, 0.25);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover {
  background-color: var(--accent-hover) !important;
  box-shadow: 0 4px 14px rgba(255, 77, 38, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}

/* Secondary Button - Fully Rounded Pill */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px !important;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-secondary:hover {
  background-color: #E2E8F0;
  border-color: #CBD5E1;
}
html.dark .btn-secondary:hover {
  background-color: #1E293B;
  border-color: #334155;
}

/* Quick Action Toolbars for Workspaces - Fully Rounded Pill */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px !important;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.action-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background-color: var(--accent-subtle);
}
.action-btn-primary {
  background-color: var(--accent);
  color: #FFFFFF !important;
  border-color: var(--accent);
}
.action-btn-primary:hover {
  background-color: var(--accent-hover);
}

/* Favorite Star & Share Circular Buttons - Fully Rounded */
.fav-star-btn,
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px !important;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background-color: var(--card-bg);
  transition: all 0.15s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.fav-star-btn svg,
.fav-star-btn i,
.theme-toggle-btn svg,
.theme-toggle-btn i,
.action-btn svg,
.action-btn i {
  pointer-events: none;
}
.fav-star-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-subtle);
}
.fav-star-btn.is-fav {
  color: var(--accent);
  border-color: var(--accent);
}
.share-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-subtle);
}

/* Labelled Share Tool Button - Fully Rounded Pill */
.share-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px !important;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all 0.15s ease;
  cursor: pointer;
}
.share-tool-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-subtle);
}

/* Icon Wrappers - Fully Rounded Circles */
.icon-circle,
.icon-wrapper-circle {
  border-radius: 9999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chips, Filter Tags & Badges - Fully Rounded Pills */
.home-cat-chip,
.cat-pill,
.tech-chip,
.badge-pill,
.status-pill {
  border-radius: 9999px !important;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Valley Sans', sans-serif !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px !important;
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.tech-chip-accent {
  background-color: var(--accent-subtle);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* Single-Line Form Inputs - Fully Rounded Pills */
.form-input,
.search-bar-pill,
input[type="text"]:not(#home-search-input):not(#palette-input):not(.border-0),
input[type="search"]:not(#home-search-input):not(#palette-input):not(.border-0),
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"] {
  border-radius: 9999px !important;
  border: 1px solid var(--border);
  background-color: var(--card-bg);
  color: var(--text-primary);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus,
.search-bar-pill:focus,
input[type="text"]:not(#home-search-input):not(#palette-input):not(.border-0):focus,
input[type="search"]:not(#home-search-input):not(#palette-input):not(.border-0):focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}

/* Seamless Inner Search Inputs - Remove Nested Borders & Background */
#home-search-input,
#palette-input,
.search-bar-glow input,
.search-bar-inner input,
.search-input-seamless {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

#home-search-input:focus,
#palette-input:focus,
.search-bar-glow input:focus,
.search-bar-inner input:focus,
.search-input-seamless:focus {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   BALANCED, PROFESSIONAL STRUCTURAL ROUNDNESS
   Cards, panels, and textareas use clean, proportional 12px-16px curves.
   ========================================================================== */

/* Workspace Panel - Professional Workbench Container */
.workspace-panel {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1rem; /* 16px */
  padding: 1.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Seamless Toolbar Integration - Zero Top Border & Zero Top Radius */
.workspace-panel.rounded-t-none,
.workspace-panel[class*="rounded-t-none"],
.rounded-t-none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  border-top-width: 0 !important;
}

/* Inner Panels & Sub-sections inside workspace */
.workspace-panel .workspace-panel,
.workspace-panel [class*="workspace-panel"],
.inner-panel,
.result-panel,
.result-box,
.output-box,
.code-output,
.result-display {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important; /* 12px */
  padding: 1rem 1.25rem !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  box-shadow: none !important;
}

html.dark .workspace-panel .workspace-panel,
html.dark .workspace-panel [class*="workspace-panel"],
html.dark .inner-panel,
html.dark .result-panel,
html.dark .result-box,
html.dark .output-box,
html.dark .code-output,
html.dark .result-display {
  background-color: #0E1524 !important;
  border-color: #1E293B !important;
}

/* Multiline Textareas - Clean 12px Corners for Comfortable Typing */
.form-textarea,
textarea {
  width: 100%;
  border-radius: 0.75rem !important; /* 12px */
  border: 1px solid var(--border);
  background-color: var(--card-bg);
  color: var(--text-primary);
  padding: 0.875rem 1rem !important;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-textarea:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
}

/* Interactive Tool Cards & Category Cards - Clean 14px Corners */
.spotlight-card,
.tool-card,
.bento-card,
.feature-card,
.category-card {
  position: relative;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 0.875rem !important; /* 14px */
  padding: 1.25rem;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.spotlight-card:hover,
.tool-card:hover,
.bento-card:hover,
.feature-card:hover,
.category-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 0 16px var(--accent-subtle) !important;
  transform: translateY(-2px);
}

html.dark .spotlight-card:hover,
html.dark .tool-card:hover,
html.dark .bento-card:hover,
html.dark .feature-card:hover,
html.dark .category-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-subtle) !important;
}

/* Zero Gradients: Mouse pseudo-elements eliminated */
.spotlight-card::before, .tool-card::before,
.spotlight-card::after, .tool-card::after {
  display: none !important;
}

/* Operator Console Tabs - Refined Segmented Control */
.operator-tabs-container {
  border-radius: 0.875rem !important; /* 14px */
  overflow: hidden;
  border: 1px solid var(--border);
  background-color: var(--card-bg);
}
.operator-tab-bar {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.operator-tab-bar::-webkit-scrollbar {
  display: none;
}
.operator-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 9999px !important;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: transparent;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .operator-tab-btn {
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}
.operator-tab-btn:hover {
  color: var(--text-primary);
  background-color: var(--accent-subtle);
}
.operator-tab-btn.active {
  color: var(--accent) !important;
  background-color: var(--card-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.operator-tab-content {
  padding: 1rem;
  background-color: var(--card-bg);
}
@media (min-width: 640px) {
  .operator-tab-content {
    padding: 1.5rem;
  }
}
.operator-tab-pane {
  display: none;
}
.operator-tab-pane.active {
  display: block;
}

/* Expandable FAQ details elements */
details {
  border-radius: 0.75rem !important; /* 12px */
  border: 1px solid var(--border);
  transition: all 0.15s ease;
}

/* Modals & Dialogs */
#command-palette-modal > div,
#search-modal-backdrop > div {
  border-radius: 1rem !important; /* 16px */
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background-color: #0F172A;
  color: #F8FAFC;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 20px -2px rgba(0, 0, 0, 0.25);
  animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast.toast-success {
  border-left: 3px solid var(--accent);
}
.toast.toast-error {
  border-left: 3px solid var(--danger);
}
.toast.toast-info {
  border-left: 3px solid var(--accent);
}
.toast.toast-warning {
  border-left: 3px solid #F59E0B;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(1rem) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(0.75rem) scale(0.95); }
}

/* Custom Clean Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

/* ==========================================================================
   COMPREHENSIVE DARK MODE ENGINE (Clean Slate & Orange, Zero Blue)
   ========================================================================== */
html.dark body {
  background-color: #080C14 !important;
  color: #F8FAFC !important;
}

html.dark header {
  background-color: rgba(8, 12, 20, 0.95) !important;
  border-color: #1E293B !important;
}

html.dark footer {
  background-color: #080C14 !important;
  border-color: #1E293B !important;
}

html.dark .tool-card,
html.dark .bento-card,
html.dark .spotlight-card,
html.dark .feature-card,
html.dark .category-card {
  background-color: #0F1626 !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
}

html.dark .workspace-panel {
  background-color: #0F1626 !important;
  border-color: #1E293B !important;
}

html.dark .operator-tab-bar {
  background-color: #0B0F17 !important;
  border-color: #1E293B !important;
}
html.dark .operator-tab-btn {
  color: #94A3B8 !important;
}
html.dark .operator-tab-btn:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}
html.dark .operator-tab-btn.active {
  color: var(--accent) !important;
  background-color: #0F1626 !important;
}
html.dark .operator-tab-content {
  background-color: #0F1626 !important;
  border-color: #1E293B !important;
}

html.dark .fav-star-btn,
html.dark .share-btn,
html.dark .share-tool-btn,
html.dark .action-btn {
  background-color: #0F1626 !important;
  border-color: #1E293B !important;
  color: #CBD5E1 !important;
}
html.dark .fav-star-btn:hover,
html.dark .share-btn:hover,
html.dark .share-tool-btn:hover,
html.dark .action-btn:hover {
  background-color: #1E293B !important;
  border-color: var(--accent) !important;
  color: #FFFFFF !important;
}

html.dark .form-input,
html.dark .form-textarea,
html.dark .form-select,
html.dark select,
html.dark input[type="text"]:not(#home-search-input):not(#palette-input):not(.border-0),
html.dark input[type="search"]:not(#home-search-input):not(#palette-input):not(.border-0),
html.dark input[type="number"],
html.dark textarea {
  background-color: #080C14 !important;
  border-color: #1E293B !important;
  color: #F8FAFC !important;
}

html.dark #home-search-input,
html.dark #palette-input,
html.dark .search-bar-glow input,
html.dark .search-bar-inner input,
html.dark .search-input-seamless {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

html.dark .tech-chip {
  background-color: #0F1626 !important;
  border-color: #1E293B !important;
  color: #94A3B8 !important;
}

/* Clean Dark Mode Text & Border Overrides */
html.dark .dark\:text-white { color: #FFFFFF !important; }
html.dark .dark\:text-slate-100 { color: #F1F5F9 !important; }
html.dark .dark\:text-slate-200 { color: #E2E8F0 !important; }
html.dark .dark\:text-slate-300 { color: #CBD5E1 !important; }
html.dark .dark\:text-slate-400 { color: #94A3B8 !important; }
html.dark .dark\:text-slate-700 { color: #334155 !important; }

html.dark .dark\:border-slate-800 { border-color: #1E293B !important; }
html.dark .dark\:border-slate-700 { border-color: #334155 !important; }

html.dark .dark\:bg-slate-800 { background-color: #1E293B !important; }
html.dark .dark\:bg-slate-900 { background-color: #0F1626 !important; }
html.dark .dark\:bg-slate-950 { background-color: #080C14 !important; }

html.dark .dark\:hover\:bg-slate-800:hover { background-color: #1E293B !important; }

/* Micro-interaction & Lift Utilities */
.hover-lift {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-2px);
}
.group:hover .group-hover-bounce {
  transform: scale(1.08);
}

/* Safeguards against long strings breaking container layout */
.break-all, [id$="-output"], [id$="-val"], [id$="-result"], .form-textarea, .form-input, .code-output {
  word-break: break-word;
  overflow-wrap: anywhere;
}

pre, code, kbd, samp {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-word;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Universal Viewport & Overflow Safety */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .form-input, .form-textarea, .form-select, input[type="text"], input[type="search"], textarea, select {
    font-size: 16px !important;
  }
  .workspace-panel {
    padding: 1.15rem 1rem !important;
  }
}

/* Standardized 1200px Desktop Content Alignment */
@media (min-width: 1200px) {
  .max-w-\[1200px\] {
    max-width: 1200px !important;
  }
}