/**
 * KINVA Artist OS - UI Framework
 * 
 * Shared CSS with Divi compatibility
 * Includes: Variables, Components, Locked Features, Tabs
 * 
 * @package KINVA_Artist_OS
 * @version 1.0.0
 */

/* ══════════════════════════════════════════════════════════════════════════
   CSS VARIABLES
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand Colors */
  --kinva-primary: #2271b1;
  --kinva-primary-dark: #1a5a8e;
  --kinva-primary-light: #4a90c9;
  
  --kinva-marketing: #2271b1;
  --kinva-studio: #9333ea;
  
  --kinva-success: #059669;
  --kinva-warning: #d97706;
  --kinva-error: #dc2626;
  --kinva-info: #0891b2;
  
  /* Neutrals */
  --kinva-gray-50: #f9fafb;
  --kinva-gray-100: #f3f4f6;
  --kinva-gray-200: #e5e7eb;
  --kinva-gray-300: #d1d5db;
  --kinva-gray-400: #9ca3af;
  --kinva-gray-500: #6b7280;
  --kinva-gray-600: #4b5563;
  --kinva-gray-700: #374151;
  --kinva-gray-800: #1f2937;
  --kinva-gray-900: #111827;
  
  /* Typography */
  --kinva-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --kinva-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  
  /* Spacing */
  --kinva-space-xs: 0.25rem;
  --kinva-space-sm: 0.5rem;
  --kinva-space-md: 1rem;
  --kinva-space-lg: 1.5rem;
  --kinva-space-xl: 2rem;
  --kinva-space-2xl: 3rem;
  
  /* Border Radius */
  --kinva-radius-sm: 4px;
  --kinva-radius-md: 8px;
  --kinva-radius-lg: 12px;
  --kinva-radius-xl: 16px;
  --kinva-radius-full: 9999px;
  
  /* Shadows */
  --kinva-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --kinva-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --kinva-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --kinva-transition-fast: 150ms ease;
  --kinva-transition-base: 200ms ease;
  --kinva-transition-slow: 300ms ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE WRAPPER STYLES
   ══════════════════════════════════════════════════════════════════════════ */

/* Divi Reset - ensure our wrappers don't inherit unwanted Divi styles */
.et_pb_section .kinva-marketing-wrapper,
.et_pb_section .kinva-studio-wrapper,
.et_pb_row .kinva-marketing-wrapper,
.et_pb_row .kinva-studio-wrapper,
.et_pb_column .kinva-marketing-wrapper,
.et_pb_column .kinva-studio-wrapper,
.et_pb_code_inner .kinva-marketing-wrapper,
.et_pb_code_inner .kinva-studio-wrapper,
.kinva-marketing-wrapper,
.kinva-studio-wrapper {
  font-family: var(--kinva-font-sans);
  line-height: 1.5;
  color: var(--kinva-gray-800);
  background: #fff;
  border-radius: var(--kinva-radius-lg);
  box-shadow: var(--kinva-shadow-md);
  padding: var(--kinva-space-lg);
  margin: var(--kinva-space-lg) auto !important;
  
  /* Divi compatibility - force center and full width */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  
  /* Reset any inherited flex properties */
  flex: none !important;
  align-self: stretch !important;
}

.kinva-marketing-wrapper {
  border-top: 4px solid var(--kinva-marketing);
}

.kinva-studio-wrapper {
  border-top: 4px solid var(--kinva-studio);
}

/* Tool Header */
.kinva-tool-header {
  text-align: center;
  margin-bottom: var(--kinva-space-xl);
  padding-bottom: var(--kinva-space-lg);
  border-bottom: 1px solid var(--kinva-gray-200);
}

.kinva-tool-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 var(--kinva-space-sm);
  color: var(--kinva-gray-900);
}

.kinva-tool-subtitle {
  color: var(--kinva-gray-500);
  margin: 0;
}

/* Tool Footer */
.kinva-tool-footer {
  text-align: center;
  margin-top: var(--kinva-space-xl);
  padding-top: var(--kinva-space-lg);
  border-top: 1px solid var(--kinva-gray-200);
  font-size: 0.75rem;
  color: var(--kinva-gray-400);
}

.kinva-footer-note {
  display: block;
  margin-top: var(--kinva-space-sm);
  color: var(--kinva-warning);
}

.kinva-footer-note a {
  color: var(--kinva-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kinva-space-sm);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: var(--kinva-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--kinva-transition-base);
  text-decoration: none;
}

.kinva-btn--primary,
.kinva-btn-primary,
.kinva-grid__upload-btn,
button.kinva-btn--primary,
a.kinva-btn--primary,
.et_pb_section .kinva-btn--primary,
.et_pb_row .kinva-btn--primary,
.et_pb_column .kinva-btn--primary,
.et_pb_code_inner .kinva-btn--primary {
  background: var(--kinva-primary) !important;
  color: #ffffff !important;
}

.kinva-btn--primary:hover,
.kinva-btn-primary:hover,
.kinva-grid__upload-btn:hover,
button.kinva-btn--primary:hover,
a.kinva-btn--primary:hover {
  background: var(--kinva-primary-dark) !important;
  color: #ffffff !important;
}

.kinva-btn--secondary {
  background: var(--kinva-gray-100);
  color: var(--kinva-gray-700);
}

.kinva-btn--secondary:hover {
  background: var(--kinva-gray-200);
}

.kinva-btn--small {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--kinva-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.kinva-badge--marketing {
  background: rgba(34, 113, 177, 0.1);
  color: var(--kinva-marketing);
}

.kinva-badge--studio {
  background: rgba(147, 51, 234, 0.1);
  color: var(--kinva-studio);
}

.kinva-badge--premium {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  color: #fff;
}

.kinva-badge--pro {
  background: var(--kinva-primary);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__tabs {
  display: flex;
  gap: var(--kinva-space-xs);
  margin-bottom: var(--kinva-space-lg);
  border-bottom: 2px solid var(--kinva-gray-200);
  padding-bottom: 0;
}

.kinva-pricing__tab-btn {
  padding: var(--kinva-space-md) var(--kinva-space-lg);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--kinva-gray-500);
  cursor: pointer;
  transition: all var(--kinva-transition-base);
  position: relative;
  margin-bottom: -2px;
}

.kinva-pricing__tab-btn:hover {
  color: var(--kinva-gray-700);
  background: var(--kinva-gray-50);
}

.kinva-pricing__tab-btn.active {
  color: var(--kinva-primary);
  border-bottom-color: var(--kinva-primary);
  font-weight: 600;
}

.kinva-pricing__tab-btn.kinva-tab--locked {
  color: var(--kinva-gray-400);
}

.kinva-pricing__tab-btn .kinva-lock-icon {
  margin-left: var(--kinva-space-xs);
  font-size: 0.75em;
}

.kinva-pricing__tab-panel {
  display: none;
  animation: kinvaFadeIn 0.2s ease;
}

.kinva-pricing__tab-panel.active {
  display: block;
}

@keyframes kinvaFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOCKED FEATURES (FOMO!)
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-locked-feature {
  position: relative;
  border-radius: var(--kinva-radius-md);
  overflow: hidden;
}

.kinva-locked-feature__content {
  transition: filter var(--kinva-transition-base);
}

.kinva-locked-feature__content--blurred {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.kinva-locked-feature__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  padding: var(--kinva-space-xl);
  text-align: center;
}

.kinva-locked-feature__lock-icon {
  font-size: 3rem;
  margin-bottom: var(--kinva-space-md);
  animation: kinvaPulse 2s infinite;
}

@keyframes kinvaPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.kinva-locked-feature__message {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--kinva-gray-700);
  margin: 0 0 var(--kinva-space-lg);
}

.kinva-locked-feature__cta {
  padding: 0.75rem 2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-field {
  margin-bottom: var(--kinva-space-md);
}

.kinva-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kinva-gray-700);
  margin-bottom: var(--kinva-space-xs);
}

.kinva-pricing-wrapper input[type="number"],
.kinva-pricing-wrapper input[type="text"],
.kinva-pricing-wrapper select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  border: 1px solid var(--kinva-gray-300);
  border-radius: var(--kinva-radius-md);
  background: #fff;
  transition: border-color var(--kinva-transition-fast), box-shadow var(--kinva-transition-fast);
}

.kinva-pricing-wrapper input:focus,
.kinva-pricing-wrapper select:focus {
  outline: none;
  border-color: var(--kinva-primary);
  box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.kinva-input--warning {
  border-color: var(--kinva-warning) !important;
  background: rgba(217, 119, 6, 0.05) !important;
}

/* Range Sliders */
.kinva-pricing-wrapper input[type="range"] {
  width: 100%;
  height: 8px;
  background: var(--kinva-gray-200);
  border-radius: var(--kinva-radius-full);
  cursor: pointer;
  -webkit-appearance: none;
}

.kinva-pricing-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--kinva-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--kinva-transition-fast);
}

.kinva-pricing-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__section {
  margin-bottom: var(--kinva-space-xl);
  padding-bottom: var(--kinva-space-lg);
  border-bottom: 1px solid var(--kinva-gray-100);
}

.kinva-pricing__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.kinva-pricing__section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--kinva-gray-800);
  margin: 0 0 var(--kinva-space-md);
}

.kinva-pricing__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kinva-space-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   SMART MODE
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__mode-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--kinva-radius-full);
  margin-top: var(--kinva-space-sm);
}

.kinva-pricing__mode-badge--smart {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #fff;
}

.kinva-pricing__mode-badge--manual {
  background: var(--kinva-gray-200);
  color: var(--kinva-gray-600);
}

.kinva-pricing__smart-banner {
  display: flex;
  align-items: center;
  gap: var(--kinva-space-md);
  padding: var(--kinva-space-md);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
  border-radius: var(--kinva-radius-md);
  border-left: 4px solid var(--kinva-success);
  margin-bottom: var(--kinva-space-lg);
}

.kinva-pricing__smart-banner--prompt {
  background: linear-gradient(135deg, rgba(34, 113, 177, 0.1) 0%, rgba(74, 144, 201, 0.05) 100%);
  border-left-color: var(--kinva-primary);
}

.kinva-pricing__smart-icon {
  font-size: 2rem;
}

.kinva-pricing__smart-info {
  flex: 1;
}

.kinva-pricing__smart-info strong {
  display: block;
  color: var(--kinva-gray-800);
}

.kinva-pricing__smart-info span {
  font-size: 0.875rem;
  color: var(--kinva-gray-500);
}

/* Smart Range Slider */
.kinva-pricing__smart-range {
  padding: var(--kinva-space-md);
  background: var(--kinva-gray-50);
  border-radius: var(--kinva-radius-md);
}

.kinva-pricing__range-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--kinva-space-sm);
  font-size: 0.875rem;
}

.kinva-pricing__range-min,
.kinva-pricing__range-max {
  color: var(--kinva-gray-400);
}

.kinva-pricing__range-current {
  display: flex;
  align-items: center;
  gap: var(--kinva-space-xs);
  font-weight: 600;
}

.kinva-pricing__cm2-input-smart {
  width: 70px;
  text-align: center;
  font-weight: 700;
  font-size: 1.125rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONFIDENCE SLIDER (LEGACY GOLD)
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__confidence-section {
  background: var(--kinva-gray-50);
  padding: var(--kinva-space-md);
  border-radius: var(--kinva-radius-md);
}

.kinva-pricing__confidence-display {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kinva-primary);
  margin-top: var(--kinva-space-sm);
}

.kinva-pricing__confidence-hint {
  text-align: center;
  font-size: 0.875rem;
  color: var(--kinva-gray-500);
  margin-top: var(--kinva-space-xs);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESULTS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__results {
  background: linear-gradient(135deg, var(--kinva-gray-50) 0%, #fff 100%);
  padding: var(--kinva-space-lg);
  border-radius: var(--kinva-radius-lg);
  border: 1px solid var(--kinva-gray-200);
}

.kinva-pricing__result-box {
  padding: var(--kinva-space-md);
  background: #fff;
  border-radius: var(--kinva-radius-md);
  text-align: center;
  border: 1px solid var(--kinva-gray-100);
}

.kinva-pricing__result-box--main {
  background: linear-gradient(135deg, var(--kinva-primary) 0%, var(--kinva-primary-dark) 100%);
  border: none;
  margin-bottom: var(--kinva-space-md);
}

.kinva-pricing__result-box--main .kinva-pricing__result-label {
  color: rgba(255, 255, 255, 0.8);
}

.kinva-pricing__result-box--main .kinva-pricing__result-value {
  color: #fff;
  font-size: 2rem;
}

.kinva-pricing__result-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--kinva-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: var(--kinva-space-xs);
}

.kinva-pricing__result-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--kinva-gray-800);
}

.kinva-pricing__result-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kinva-space-md);
}

.kinva-pricing__result-box--premium {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.05) 0%, rgba(124, 58, 237, 0.1) 100%);
  border-color: rgba(147, 51, 234, 0.2);
}

.kinva-pricing__result-box--premium .kinva-pricing__result-value {
  color: var(--kinva-studio);
}

.kinva-pricing__formula {
  margin-top: var(--kinva-space-md);
  padding: var(--kinva-space-sm) var(--kinva-space-md);
  background: var(--kinva-gray-100);
  border-radius: var(--kinva-radius-sm);
  font-family: var(--kinva-font-mono);
  font-size: 0.8125rem;
  color: var(--kinva-gray-600);
  text-align: center;
}

/* Market Position Gauge in Pricing */
.kinva-pricing__market-gauge {
  margin-top: var(--kinva-space-lg);
  padding: var(--kinva-space-md);
  background: linear-gradient(135deg, #f8f9fa, #fff);
  border: 1px solid var(--kinva-gray-200);
  border-radius: var(--kinva-radius-md);
}

.kinva-pricing__market-gauge h4 {
  margin: 0 0 var(--kinva-space-md) 0;
  font-size: 0.875rem;
  color: var(--kinva-gray-700);
  display: flex;
  align-items: center;
  gap: var(--kinva-space-sm);
}

.kinva-pricing__pankotai-badge {
  font-size: 0.625rem;
  font-weight: 600;
  padding: 2px 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-radius: 10px;
  text-transform: uppercase;
}

.kinva-pricing__gauge-track {
  position: relative;
  display: flex;
  height: 32px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--kinva-gray-100);
}

.kinva-pricing__gauge-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kinva-pricing__gauge-zone--low {
  background: linear-gradient(135deg, #f44336, #e91e63);
}

.kinva-pricing__gauge-zone--avg {
  background: linear-gradient(135deg, #4caf50, #8bc34a);
}

.kinva-pricing__gauge-zone--high {
  background: linear-gradient(135deg, #2196f3, #03a9f4);
}

.kinva-pricing__gauge-marker {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  transition: left 0.5s ease;
  z-index: 10;
}

.kinva-pricing__gauge-dot {
  width: 16px;
  height: 40px;
  background: #333;
  border: 3px solid white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.kinva-pricing__market-info {
  text-align: center;
  margin-top: var(--kinva-space-md);
}

.kinva-pricing__market-percent {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--kinva-gray-800);
  line-height: 1;
}

.kinva-pricing__market-percent.positive { color: #2196f3; }
.kinva-pricing__market-percent.negative { color: #f44336; }
.kinva-pricing__market-percent.neutral { color: #4caf50; }

.kinva-pricing__market-text {
  font-size: 0.75rem;
  color: var(--kinva-gray-500);
}

.kinva-pricing__market-advice {
  margin-top: var(--kinva-space-sm);
  padding: var(--kinva-space-sm) var(--kinva-space-md);
  border-radius: var(--kinva-radius-sm);
  font-size: 0.8125rem;
  text-align: center;
  display: none;
}

.kinva-pricing__market-advice.show {
  display: block;
}

.kinva-pricing__market-advice.premium {
  background: #e3f2fd;
  color: #1565c0;
}

.kinva-pricing__market-advice.warning {
  background: #fff3e0;
  color: #e65100;
}

.kinva-pricing__market-advice.danger {
  background: #ffebee;
  color: #c62828;
}

.kinva-pricing__market-link {
  display: block;
  text-align: center;
  margin-top: var(--kinva-space-sm);
  font-size: 0.75rem;
  color: #667eea;
  text-decoration: none;
}

.kinva-pricing__market-link:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   GALLERY TAB (LEGACY GOLD)
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__gallery-field {
  margin-bottom: var(--kinva-space-lg);
}

.kinva-pricing__gallery-field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--kinva-space-sm);
}

.kinva-pricing__gallery-presets {
  display: flex;
  gap: var(--kinva-space-xs);
  margin-top: var(--kinva-space-sm);
}

.kinva-pricing__gallery-preset {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  background: var(--kinva-gray-100);
  border: 1px solid var(--kinva-gray-200);
  border-radius: var(--kinva-radius-sm);
  cursor: pointer;
  transition: all var(--kinva-transition-fast);
}

.kinva-pricing__gallery-preset:hover {
  background: var(--kinva-gray-200);
}

.kinva-pricing__gallery-preset.active {
  background: var(--kinva-primary);
  color: #fff;
  border-color: var(--kinva-primary);
}

/* Tune Hints */
.kinva-pricing__tune-hint {
  display: inline-block;
  padding: var(--kinva-space-xs) var(--kinva-space-sm);
  border-radius: var(--kinva-radius-sm);
  font-size: 0.875rem;
  margin-top: var(--kinva-space-xs);
}

.kinva-pricing__tune-hint--tune-very-low { background: #fef2f2; color: #dc2626; }
.kinva-pricing__tune-hint--tune-low { background: #fffbeb; color: #d97706; }
.kinva-pricing__tune-hint--tune-normal { background: #ecfdf5; color: #059669; }
.kinva-pricing__tune-hint--tune-high { background: #eff6ff; color: #2563eb; }
.kinva-pricing__tune-hint--tune-premium { background: #faf5ff; color: #9333ea; }

/* Gallery Results */
.kinva-pricing__gallery-results {
  background: var(--kinva-gray-50);
  padding: var(--kinva-space-lg);
  border-radius: var(--kinva-radius-md);
  margin-top: var(--kinva-space-lg);
}

.kinva-pricing__gallery-split {
  display: flex;
  justify-content: space-between;
  margin-top: var(--kinva-space-md);
  padding-top: var(--kinva-space-md);
  border-top: 1px solid var(--kinva-gray-200);
}

.kinva-pricing__vs-target {
  text-align: center;
  font-size: 0.875rem;
  margin-top: var(--kinva-space-sm);
  padding: var(--kinva-space-xs) var(--kinva-space-sm);
  border-radius: var(--kinva-radius-sm);
}

.kinva-pricing__vs-target--positive {
  background: #ecfdf5;
  color: #059669;
}

.kinva-pricing__vs-target--negative {
  background: #fef2f2;
  color: #dc2626;
}

/* Breakdown */
.kinva-pricing__gallery-breakdown-wrapper {
  margin-top: var(--kinva-space-lg);
}

.kinva-pricing__gallery-breakdown-wrapper summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--kinva-primary);
}

.kinva-pricing__gallery-breakdown-detail {
  padding: var(--kinva-space-md);
  background: #fff;
  border-radius: var(--kinva-radius-sm);
  margin-top: var(--kinva-space-sm);
}

.kinva-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: var(--kinva-space-xs) 0;
  border-bottom: 1px solid var(--kinva-gray-100);
}

.kinva-breakdown-row:last-child {
  border-bottom: none;
}

.kinva-breakdown-row--total {
  font-weight: 700;
  padding-top: var(--kinva-space-sm);
  margin-top: var(--kinva-space-sm);
  border-top: 2px solid var(--kinva-gray-200);
  border-bottom: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   HELPERS TAB
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-helpers__section {
  padding: var(--kinva-space-md);
  background: var(--kinva-gray-50);
  border-radius: var(--kinva-radius-md);
  margin-bottom: var(--kinva-space-lg);
}

.kinva-helpers__material-item {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  gap: var(--kinva-space-sm);
  margin-bottom: var(--kinva-space-sm);
}

.kinva-helpers__remove-material {
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid var(--kinva-gray-300);
  border-radius: var(--kinva-radius-sm);
  color: var(--kinva-error);
  font-size: 1.25rem;
  cursor: pointer;
}

.kinva-helpers__add-material {
  margin-top: var(--kinva-space-sm);
}

.kinva-helpers__material-result,
.kinva-helpers__hourly-result {
  margin-top: var(--kinva-space-md);
  padding: var(--kinva-space-md);
  background: #fff;
  border-radius: var(--kinva-radius-sm);
  text-align: center;
  font-size: 1.125rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   LADDER
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-ladder__items {
  display: flex;
  flex-direction: column;
  gap: var(--kinva-space-sm);
}

.kinva-ladder__item {
  display: flex;
  align-items: center;
  gap: var(--kinva-space-md);
  padding: var(--kinva-space-md);
  background: #fff;
  border: 1px solid var(--kinva-gray-200);
  border-radius: var(--kinva-radius-md);
  transition: all var(--kinva-transition-fast);
}

.kinva-ladder__item:hover {
  border-color: var(--kinva-primary);
  box-shadow: var(--kinva-shadow-sm);
}

.kinva-ladder__item--highlight {
  background: linear-gradient(135deg, var(--kinva-primary) 0%, var(--kinva-primary-dark) 100%);
  border-color: var(--kinva-primary);
  color: #fff;
}

.kinva-ladder__item-icon {
  font-size: 1.5rem;
  width: 40px;
  text-align: center;
}

.kinva-ladder__item-content {
  flex: 1;
}

.kinva-ladder__item-label {
  font-weight: 600;
  margin: 0;
  font-size: 0.9375rem;
}

.kinva-ladder__item-desc {
  font-size: 0.8125rem;
  color: var(--kinva-gray-500);
  margin: 0;
}

.kinva-ladder__item--highlight .kinva-ladder__item-desc {
  color: rgba(255, 255, 255, 0.8);
}

.kinva-ladder__item-price {
  font-weight: 700;
  font-size: 1rem;
  min-width: 100px;
  text-align: right;
}

.kinva-ladder__copy-btn {
  background: transparent;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--kinva-transition-fast);
}

.kinva-ladder__copy-btn:hover {
  opacity: 1;
}

.kinva-ladder__empty {
  text-align: center;
  padding: var(--kinva-space-2xl);
}

.kinva-ladder__empty-icon {
  font-size: 3rem;
  margin-bottom: var(--kinva-space-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   COMING SOON
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-coming-soon {
  text-align: center;
  padding: var(--kinva-space-2xl);
}

.kinva-coming-soon__icon {
  font-size: 4rem;
  margin-bottom: var(--kinva-space-md);
}

.kinva-coming-soon h2 {
  margin: 0 0 var(--kinva-space-sm);
}

.kinva-coming-soon p {
  color: var(--kinva-gray-500);
  margin: 0 0 var(--kinva-space-lg);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .kinva-marketing-wrapper,
  .kinva-studio-wrapper {
    padding: var(--kinva-space-md);
    margin: var(--kinva-space-md) 0;
    border-radius: var(--kinva-radius-md);
  }
  
  .kinva-pricing__tabs {
    flex-wrap: wrap;
  }
  
  .kinva-pricing__tab-btn {
    flex: 1;
    min-width: 100px;
    padding: var(--kinva-space-sm) var(--kinva-space-md);
    font-size: 0.8125rem;
  }
  
  .kinva-pricing__row {
    grid-template-columns: 1fr;
  }
  
  .kinva-pricing__result-row {
    grid-template-columns: 1fr;
  }
  
  .kinva-pricing__smart-banner {
    flex-direction: column;
    text-align: center;
  }
  
  .kinva-helpers__material-item {
    grid-template-columns: 1fr;
  }
  
  .kinva-ladder__item {
    flex-wrap: wrap;
  }
  
  .kinva-ladder__item-price {
    width: 100%;
    text-align: left;
    margin-top: var(--kinva-space-sm);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DIVI COMPATIBILITY
   ══════════════════════════════════════════════════════════════════════════ */

/* Reset Divi button styles inside KINVA */
.et_pb_section .kinva-btn,
.et_pb_row .kinva-btn {
  line-height: 1.25 !important;
  padding: 0.625rem 1.25rem !important;
}

/* Reset Divi heading styles */
.et_pb_section .kinva-tool-header h1,
.et_pb_section .kinva-pricing__section h3 {
  padding-bottom: 0 !important;
}

/* Reset Divi form styles */
.et_pb_section .kinva-pricing-wrapper input,
.et_pb_section .kinva-pricing-wrapper select {
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DIVI LAYOUT FIXES
   ══════════════════════════════════════════════════════════════════════════ */

/* Force KINVA wrappers to take full width and center */
.et_pb_code_inner,
.et_pb_text_inner {
  width: 100% !important;
}

/* Ensure Divi Code module doesn't constrain our wrappers */
.et_pb_code .et_pb_code_inner .kinva-marketing-wrapper,
.et_pb_code .et_pb_code_inner .kinva-studio-wrapper,
.et_pb_text .et_pb_text_inner .kinva-marketing-wrapper,
.et_pb_text .et_pb_text_inner .kinva-studio-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* Reset any Divi column flex that might push content */
.et_pb_column .kinva-marketing-wrapper,
.et_pb_column .kinva-studio-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix for Divi row gutter affecting our wrappers */
.et_pb_row .kinva-marketing-wrapper,
.et_pb_row .kinva-studio-wrapper {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure tool-specific wrappers also center */
.et_pb_section .kinva-diagnosis-wrapper,
.et_pb_section .kinva-pricing-wrapper,
.et_pb_section .kinva-grid-wrapper,
.et_pb_section .kinva-ladder-wrapper {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Fix Divi's default text-align that might affect us */
.et_pb_code_inner > div[class*="kinva-"],
.et_pb_text_inner > div[class*="kinva-"] {
  text-align: initial;
}

/* Force center alignment for our tool headers */
.et_pb_section .kinva-tool-header,
.et_pb_row .kinva-tool-header {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   KINVA LABS FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-tool-footer {
  margin-top: var(--kinva-space-xl);
  padding: var(--kinva-space-md);
  text-align: center;
  border-top: 1px solid var(--kinva-gray-200);
}

.kinva-labs-brand {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #667eea;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kinva-labs-brand::before {
  content: "◆";
  font-size: 0.5rem;
}

.kinva-labs-brand::after {
  content: "◆";
  font-size: 0.5rem;
}

.kinva-version-tag {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--kinva-gray-400);
  margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FRAME & VAT SECTION (v1.8.2)
   ══════════════════════════════════════════════════════════════════════════ */

/* Frame Section */
.kinva-pricing__frame-section {
  background: linear-gradient(135deg, #fef3c7, #fef9e7);
  border: 1px solid #f59e0b;
}

.kinva-pricing__frame-row {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.kinva-pricing__frame-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.kinva-pricing__frame-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #f59e0b;
}

.kinva-pricing__frame-input-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

.kinva-pricing__frame-input-wrap input {
  width: 120px;
  padding: 8px 12px;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-align: right;
}

.kinva-pricing__frame-unit {
  font-weight: 600;
  color: #92400e;
}

/* VAT Section */
.kinva-pricing__vat-section {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  border: 1px solid #0ea5e9;
}

.kinva-pricing__vat-toggle {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kinva-pricing__vat-option {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.kinva-pricing__vat-option:has(input:checked) {
  border-color: #0ea5e9;
  background: #f0f9ff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.kinva-pricing__vat-option input {
  accent-color: #0ea5e9;
}

.kinva-pricing__vat-label {
  display: flex;
  flex-direction: column;
}

.kinva-pricing__vat-label strong {
  font-size: 0.9rem;
}

.kinva-pricing__vat-label small {
  font-size: 0.75rem;
  color: #666;
}

/* VAT Results */
.kinva-pricing__vat-breakdown {
  margin: 15px 0;
  padding: 15px;
  background: #f0f9ff;
  border-radius: 10px;
  border: 1px solid #0ea5e9;
}

.kinva-pricing__result-row--small {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #ccc;
}

.kinva-pricing__result-row--small:last-child {
  border-bottom: none;
}

.kinva-pricing__result-row--highlight {
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  color: #0369a1;
  margin: 10px -15px -15px;
  padding: 12px 15px;
  border-radius: 0 0 10px 10px;
}

.kinva-pricing__result-row--highlight .kinva-pricing__result-label,
.kinva-pricing__result-row--highlight .kinva-pricing__result-value {
  font-weight: 700;
}

/* Frame Result */
.kinva-pricing__frame-result {
  margin: 10px 0;
  padding: 10px 15px;
  background: #fef9e7;
  border-radius: 8px;
  border: 1px solid #f59e0b;
}

/* Total Result - LIGHT version */
.kinva-pricing__result-box--total {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  margin-top: 15px;
  border: 2px solid #22c55e;
}

.kinva-pricing__result-box--total .kinva-pricing__result-label {
  font-size: 1rem;
  color: #166534;
}

.kinva-pricing__result-box--total .kinva-pricing__result-value {
  font-size: 1.5rem;
  color: #166534;
}

/* ══════════════════════════════════════════════════════════════════════════
   GALLERY MODE TOGGLE (v1.8.2)
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__gallery-mode-toggle {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.kinva-pricing__mode-option {
  flex: 1;
  min-width: 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.kinva-pricing__mode-option:has(input:checked) {
  border-color: #667eea;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.kinva-pricing__mode-option input {
  accent-color: #667eea;
}

.kinva-pricing__mode-label {
  display: flex;
  flex-direction: column;
}

.kinva-pricing__mode-label strong {
  font-size: 0.9rem;
}

.kinva-pricing__mode-label small {
  font-size: 0.75rem;
  color: #666;
}

.kinva-pricing__mode-hint {
  font-size: 0.8rem;
  color: #666;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  margin-top: 10px;
}

/* Gallery Sale Price Input */
.kinva-pricing__gallery-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kinva-pricing__gallery-input-wrap input {
  flex: 1;
  padding: 10px 15px;
  border: 2px solid #667eea;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: right;
}

.kinva-pricing__input-unit {
  font-weight: 600;
  color: #667eea;
}

/* Gallery Split */
.kinva-pricing__gallery-split {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.kinva-pricing__split-item {
  flex: 1;
  min-width: 150px;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
}

.kinva-pricing__split-item--gallery {
  background: linear-gradient(135deg, #fef3c7, #fef9e7);
  border: 1px solid #f59e0b;
}

.kinva-pricing__split-item--artist {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
  border: 1px solid #10b981;
}

.kinva-pricing__split-label {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 5px;
}

.kinva-pricing__split-item strong {
  display: block;
  font-size: 1.2rem;
}

.kinva-pricing__split-percent {
  font-size: 0.75rem;
  color: #888;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOURLY RATE SECTION (v1.8.3)
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-helpers__hourly-section {
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border: 1px solid #f59e0b;
}

.kinva-field-hint {
  display: block;
  font-size: 0.75rem;
  color: #666;
  margin-top: 4px;
}

.kinva-helpers__hourly-breakdown {
  background: white;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
}

.kinva-helpers__hourly-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #e0e0e0;
}

.kinva-helpers__hourly-row:last-child {
  border-bottom: none;
}

.kinva-helpers__hourly-row--highlight {
  background: linear-gradient(135deg, #fef3c7, #fef9e7);
  margin: 5px -15px;
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid #f59e0b;
}

.kinva-helpers__hourly-row--highlight strong {
  color: #b45309;
  font-size: 1.1rem;
}
/**
 * KINVA Artist OS - Unified Design System
 * 
 * Based on Market Analyzer (Piaci Iránytű) - the most readable module
 * v1.8.4 - Complete UI unification
 * 
 * @package KINVA_Artist_OS
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS - Unified Variables
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --kinva-brand-primary: #2271b1;
  --kinva-brand-primary-light: #e8f4fc;
  --kinva-brand-primary-dark: #1a5a8e;
  
  --kinva-brand-accent: #667eea;
  --kinva-brand-accent-light: #eef2ff;
  
  /* ── Semantic Colors ── */
  --kinva-success: #059669;
  --kinva-success-light: #d1fae5;
  --kinva-success-border: #10b981;
  
  --kinva-warning: #d97706;
  --kinva-warning-light: #fef3c7;
  --kinva-warning-border: #f59e0b;
  
  --kinva-error: #dc2626;
  --kinva-error-light: #fee2e2;
  
  --kinva-info: #0ea5e9;
  --kinva-info-light: #e0f2fe;
  --kinva-info-border: #38bdf8;
  
  /* ── Neutral Palette ── */
  --kinva-white: #ffffff;
  --kinva-bg: #f8fafc;
  --kinva-bg-alt: #f1f5f9;
  --kinva-border: #e2e8f0;
  --kinva-border-dark: #cbd5e1;
  --kinva-text: #334155;
  --kinva-text-light: #64748b;
  --kinva-text-muted: #94a3b8;
  --kinva-text-dark: #1e293b;
  
  /* ── Typography ── */
  --kinva-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --kinva-font-display: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --kinva-font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  
  --kinva-text-xs: 0.75rem;    /* 12px */
  --kinva-text-sm: 0.875rem;   /* 14px */
  --kinva-text-base: 1rem;     /* 16px */
  --kinva-text-lg: 1.125rem;   /* 18px */
  --kinva-text-xl: 1.25rem;    /* 20px */
  --kinva-text-2xl: 1.5rem;    /* 24px */
  --kinva-text-3xl: 1.875rem;  /* 30px */
  
  --kinva-leading-tight: 1.25;
  --kinva-leading-normal: 1.5;
  --kinva-leading-relaxed: 1.75;
  
  /* ── Spacing ── */
  --kinva-space-1: 0.25rem;   /* 4px */
  --kinva-space-2: 0.5rem;    /* 8px */
  --kinva-space-3: 0.75rem;   /* 12px */
  --kinva-space-4: 1rem;      /* 16px */
  --kinva-space-5: 1.25rem;   /* 20px */
  --kinva-space-6: 1.5rem;    /* 24px */
  --kinva-space-8: 2rem;      /* 32px */
  --kinva-space-10: 2.5rem;   /* 40px */
  --kinva-space-12: 3rem;     /* 48px */
  
  /* ── Border Radius ── */
  --kinva-radius-sm: 6px;
  --kinva-radius-md: 10px;
  --kinva-radius-lg: 14px;
  --kinva-radius-xl: 20px;
  --kinva-radius-full: 9999px;
  
  /* ── Shadows ── */
  --kinva-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --kinva-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --kinva-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --kinva-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --kinva-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
  
  /* ── Transitions ── */
  --kinva-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --kinva-duration-fast: 150ms;
  --kinva-duration-base: 200ms;
  --kinva-duration-slow: 300ms;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. BASE TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-marketing-wrapper,
.kinva-studio-wrapper,
.kinva-market-wrapper,
.kinva-pricing-wrapper,
.kinva-ladder-wrapper,
.kinva-diagnosis-wrapper {
  font-family: var(--kinva-font-base) !important;
  font-size: var(--kinva-text-base) !important;
  line-height: var(--kinva-leading-normal) !important;
  color: var(--kinva-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
.kinva-marketing-wrapper h1,
.kinva-marketing-wrapper h2,
.kinva-marketing-wrapper h3,
.kinva-marketing-wrapper h4,
.kinva-studio-wrapper h1,
.kinva-studio-wrapper h2,
.kinva-studio-wrapper h3,
.kinva-studio-wrapper h4 {
  font-family: var(--kinva-font-display) !important;
  font-weight: 600 !important;
  line-height: var(--kinva-leading-tight) !important;
  color: var(--kinva-text-dark) !important;
  margin: 0 0 var(--kinva-space-3) 0 !important;
}

.kinva-marketing-wrapper h1,
.kinva-studio-wrapper h1 {
  font-size: var(--kinva-text-2xl) !important;
}

.kinva-marketing-wrapper h2,
.kinva-studio-wrapper h2 {
  font-size: var(--kinva-text-xl) !important;
}

.kinva-marketing-wrapper h3,
.kinva-studio-wrapper h3 {
  font-size: var(--kinva-text-lg) !important;
  font-weight: 600 !important;
  color: var(--kinva-text-dark) !important;
  margin-bottom: var(--kinva-space-4) !important;
}

.kinva-marketing-wrapper p,
.kinva-studio-wrapper p {
  margin: 0 0 var(--kinva-space-4) 0 !important;
  color: var(--kinva-text) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. WRAPPER & CARD STYLES
   ══════════════════════════════════════════════════════════════════════════ */

/* Main Wrapper */
.kinva-marketing-wrapper,
.kinva-studio-wrapper {
  background: var(--kinva-white) !important;
  border: 1px solid var(--kinva-border) !important;
  border-radius: var(--kinva-radius-lg) !important;
  box-shadow: var(--kinva-shadow-md) !important;
  padding: var(--kinva-space-6) !important;
  max-width: 800px !important;
  margin: var(--kinva-space-6) auto !important;
}

/* Tool Header */
.kinva-tool-header {
  text-align: center !important;
  margin-bottom: var(--kinva-space-6) !important;
  padding-bottom: var(--kinva-space-6) !important;
  border-bottom: 1px solid var(--kinva-border) !important;
}

.kinva-tool-header h1 {
  font-size: var(--kinva-text-2xl) !important;
  font-weight: 700 !important;
  color: var(--kinva-text-dark) !important;
  margin-bottom: var(--kinva-space-2) !important;
}

.kinva-tool-subtitle {
  font-size: var(--kinva-text-base) !important;
  color: var(--kinva-text-light) !important;
  margin-bottom: var(--kinva-space-3) !important;
}

/* Section Cards */
.kinva-pricing__section,
.kinva-market__input-section,
.kinva-market__result-section,
.kinva-helpers__section,
.kinva-diagnosis__section {
  background: var(--kinva-bg) !important;
  border: 1px solid var(--kinva-border) !important;
  border-radius: var(--kinva-radius-md) !important;
  padding: var(--kinva-space-5) !important;
  margin-bottom: var(--kinva-space-4) !important;
}

.kinva-pricing__section h3,
.kinva-market__input-section h3,
.kinva-market__result-section h3,
.kinva-helpers__section h3 {
  font-size: var(--kinva-text-lg) !important;
  font-weight: 600 !important;
  color: var(--kinva-text-dark) !important;
  margin: 0 0 var(--kinva-space-4) 0 !important;
  padding-bottom: var(--kinva-space-3) !important;
  border-bottom: 1px solid var(--kinva-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. FORM ELEMENTS - Unified Input Styles
   ══════════════════════════════════════════════════════════════════════════ */

/* Labels */
.kinva-marketing-wrapper label,
.kinva-studio-wrapper label,
.kinva-field label {
  display: block !important;
  font-size: var(--kinva-text-sm) !important;
  font-weight: 500 !important;
  color: var(--kinva-text) !important;
  margin-bottom: var(--kinva-space-2) !important;
}

/* Inputs */
.kinva-marketing-wrapper input[type="text"],
.kinva-marketing-wrapper input[type="number"],
.kinva-marketing-wrapper input[type="email"],
.kinva-marketing-wrapper textarea,
.kinva-studio-wrapper input[type="text"],
.kinva-studio-wrapper input[type="number"],
.kinva-studio-wrapper textarea,
.kinva-market__input,
.kinva-pricing__input {
  width: 100% !important;
  padding: var(--kinva-space-3) var(--kinva-space-4) !important;
  font-family: var(--kinva-font-base) !important;
  font-size: var(--kinva-text-base) !important;
  color: var(--kinva-text-dark) !important;
  background: var(--kinva-white) !important;
  border: 2px solid var(--kinva-border) !important;
  border-radius: var(--kinva-radius-sm) !important;
  transition: border-color var(--kinva-duration-fast) var(--kinva-ease),
              box-shadow var(--kinva-duration-fast) var(--kinva-ease) !important;
  box-sizing: border-box !important;
}

.kinva-marketing-wrapper input:focus,
.kinva-marketing-wrapper textarea:focus,
.kinva-studio-wrapper input:focus,
.kinva-studio-wrapper textarea:focus,
.kinva-market__input:focus,
.kinva-pricing__input:focus {
  outline: none !important;
  border-color: var(--kinva-brand-primary) !important;
  box-shadow: 0 0 0 3px var(--kinva-brand-primary-light) !important;
}

/* Number inputs - smaller width */
.kinva-marketing-wrapper input[type="number"],
.kinva-studio-wrapper input[type="number"] {
  text-align: right !important;
  font-weight: 500 !important;
}

/* Select */
.kinva-marketing-wrapper select,
.kinva-studio-wrapper select {
  width: 100% !important;
  padding: var(--kinva-space-3) var(--kinva-space-4) !important;
  font-family: var(--kinva-font-base) !important;
  font-size: var(--kinva-text-base) !important;
  color: var(--kinva-text-dark) !important;
  background: var(--kinva-white) !important;
  border: 2px solid var(--kinva-border) !important;
  border-radius: var(--kinva-radius-sm) !important;
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
}

.kinva-marketing-wrapper select:focus,
.kinva-studio-wrapper select:focus {
  outline: none !important;
  border-color: var(--kinva-brand-primary) !important;
  box-shadow: 0 0 0 3px var(--kinva-brand-primary-light) !important;
}

/* Range Sliders */
.kinva-marketing-wrapper input[type="range"],
.kinva-studio-wrapper input[type="range"] {
  width: 100% !important;
  height: 8px !important;
  background: var(--kinva-border) !important;
  border-radius: var(--kinva-radius-full) !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
}

.kinva-marketing-wrapper input[type="range"]::-webkit-slider-thumb,
.kinva-studio-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--kinva-brand-primary) !important;
  border-radius: 50% !important;
  cursor: grab !important;
  box-shadow: var(--kinva-shadow-sm) !important;
}

/* Checkbox & Radio */
.kinva-marketing-wrapper input[type="checkbox"],
.kinva-marketing-wrapper input[type="radio"],
.kinva-studio-wrapper input[type="checkbox"],
.kinva-studio-wrapper input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--kinva-brand-primary) !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-btn,
.kinva-marketing-wrapper button,
.kinva-studio-wrapper button:not(.kinva-tab):not(.kinva-market__tab) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--kinva-space-2) !important;
  padding: var(--kinva-space-3) var(--kinva-space-5) !important;
  font-family: var(--kinva-font-base) !important;
  font-size: var(--kinva-text-sm) !important;
  font-weight: 500 !important;
  color: var(--kinva-white) !important;
  background: var(--kinva-brand-primary) !important;
  border: none !important;
  border-radius: var(--kinva-radius-sm) !important;
  cursor: pointer !important;
  transition: all var(--kinva-duration-fast) var(--kinva-ease) !important;
}

.kinva-btn:hover,
.kinva-marketing-wrapper button:hover,
.kinva-studio-wrapper button:hover {
  background: var(--kinva-brand-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--kinva-shadow-md) !important;
}

.kinva-btn--secondary {
  background: var(--kinva-bg) !important;
  color: var(--kinva-text) !important;
  border: 1px solid var(--kinva-border) !important;
}

.kinva-btn--secondary:hover {
  background: var(--kinva-border) !important;
}

.kinva-btn--success {
  background: var(--kinva-success) !important;
}

.kinva-btn--warning {
  background: var(--kinva-warning) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   6. TAB NAVIGATION - Unified
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-tabs,
.kinva-market__tabs,
.kinva-pricing__tabs {
  display: flex !important;
  gap: var(--kinva-space-2) !important;
  margin-bottom: var(--kinva-space-5) !important;
  padding: var(--kinva-space-1) !important;
  background: var(--kinva-bg) !important;
  border-radius: var(--kinva-radius-md) !important;
  border: 1px solid var(--kinva-border) !important;
}

.kinva-tab,
.kinva-market__tab,
.kinva-pricing__tab {
  flex: 1 !important;
  padding: var(--kinva-space-3) var(--kinva-space-4) !important;
  font-family: var(--kinva-font-base) !important;
  font-size: var(--kinva-text-sm) !important;
  font-weight: 500 !important;
  color: var(--kinva-text-light) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--kinva-radius-sm) !important;
  cursor: pointer !important;
  transition: all var(--kinva-duration-fast) var(--kinva-ease) !important;
}

.kinva-tab:hover,
.kinva-market__tab:hover,
.kinva-pricing__tab:hover {
  color: var(--kinva-text) !important;
  background: var(--kinva-white) !important;
}

.kinva-tab--active,
.kinva-tab.active,
.kinva-market__tab--active,
.kinva-pricing__tab--active,
.kinva-pricing__tab.active {
  color: var(--kinva-brand-primary) !important;
  background: var(--kinva-white) !important;
  box-shadow: var(--kinva-shadow-sm) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. RESULT BOXES - Clean Design
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__results,
.kinva-market__results {
  background: var(--kinva-white) !important;
  border: 1px solid var(--kinva-border) !important;
  border-radius: var(--kinva-radius-md) !important;
  padding: var(--kinva-space-5) !important;
  margin-top: var(--kinva-space-4) !important;
}

.kinva-pricing__result-box,
.kinva-market__result-box {
  background: var(--kinva-bg) !important;
  border: 1px solid var(--kinva-border) !important;
  border-radius: var(--kinva-radius-sm) !important;
  padding: var(--kinva-space-4) !important;
  text-align: center !important;
  margin-bottom: var(--kinva-space-3) !important;
}

.kinva-pricing__result-label,
.kinva-market__result-label {
  display: block !important;
  font-size: var(--kinva-text-sm) !important;
  color: var(--kinva-text-light) !important;
  margin-bottom: var(--kinva-space-1) !important;
}

.kinva-pricing__result-value,
.kinva-market__result-value {
  display: block !important;
  font-size: var(--kinva-text-xl) !important;
  font-weight: 700 !important;
  color: var(--kinva-text-dark) !important;
}

/* Main Result - Highlighted */
.kinva-pricing__result-box--main {
  background: var(--kinva-brand-primary-light) !important;
  border-color: var(--kinva-brand-primary) !important;
}

.kinva-pricing__result-box--main .kinva-pricing__result-value {
  font-size: var(--kinva-text-2xl) !important;
  color: var(--kinva-brand-primary-dark) !important;
}

/* Total Result - Success theme (light) */
.kinva-pricing__result-box--total {
  background: var(--kinva-success-light) !important;
  border: 2px solid var(--kinva-success-border) !important;
}

.kinva-pricing__result-box--total .kinva-pricing__result-label {
  color: var(--kinva-success) !important;
}

.kinva-pricing__result-box--total .kinva-pricing__result-value {
  font-size: var(--kinva-text-2xl) !important;
  color: var(--kinva-success) !important;
}

/* Premium Result */
.kinva-pricing__result-box--premium {
  background: var(--kinva-brand-accent-light) !important;
  border-color: var(--kinva-brand-accent) !important;
}

.kinva-pricing__result-box--premium .kinva-pricing__result-value {
  color: var(--kinva-brand-accent) !important;
}

/* Gallery Result */
.kinva-pricing__result-box--gallery {
  background: var(--kinva-warning-light) !important;
  border-color: var(--kinva-warning-border) !important;
}

.kinva-pricing__result-box--gallery .kinva-pricing__result-value {
  color: var(--kinva-warning) !important;
}

/* Result Row */
.kinva-pricing__result-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--kinva-space-3) !important;
  margin-top: var(--kinva-space-3) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. VAT & FRAME SECTIONS - Light Theme
   ══════════════════════════════════════════════════════════════════════════ */

/* VAT Breakdown */
.kinva-pricing__vat-breakdown {
  background: var(--kinva-info-light) !important;
  border: 1px solid var(--kinva-info-border) !important;
  border-radius: var(--kinva-radius-md) !important;
  padding: var(--kinva-space-4) !important;
  margin: var(--kinva-space-4) 0 !important;
}

.kinva-pricing__result-row--small {
  display: flex !important;
  justify-content: space-between !important;
  padding: var(--kinva-space-2) 0 !important;
  border-bottom: 1px dashed var(--kinva-border) !important;
  font-size: var(--kinva-text-sm) !important;
}

.kinva-pricing__result-row--small:last-child {
  border-bottom: none !important;
}

.kinva-pricing__result-row--highlight {
  background: var(--kinva-info-light) !important;
  color: var(--kinva-info) !important;
  margin: var(--kinva-space-3) calc(-1 * var(--kinva-space-4)) calc(-1 * var(--kinva-space-4)) !important;
  padding: var(--kinva-space-3) var(--kinva-space-4) !important;
  border-radius: 0 0 var(--kinva-radius-md) var(--kinva-radius-md) !important;
  font-weight: 600 !important;
}

/* Frame Result */
.kinva-pricing__frame-result {
  background: var(--kinva-warning-light) !important;
  border: 1px solid var(--kinva-warning-border) !important;
  border-radius: var(--kinva-radius-sm) !important;
  padding: var(--kinva-space-3) var(--kinva-space-4) !important;
  margin: var(--kinva-space-3) 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. BADGES & LABELS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-badge {
  display: inline-block !important;
  padding: var(--kinva-space-1) var(--kinva-space-3) !important;
  font-size: var(--kinva-text-xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: var(--kinva-radius-full) !important;
  background: var(--kinva-bg) !important;
  color: var(--kinva-text-light) !important;
  border: 1px solid var(--kinva-border) !important;
}

.kinva-badge--marketing {
  background: var(--kinva-brand-primary-light) !important;
  color: var(--kinva-brand-primary) !important;
  border-color: var(--kinva-brand-primary) !important;
}

.kinva-badge--studio {
  background: #f3e8ff !important;
  color: #9333ea !important;
  border-color: #9333ea !important;
}

.kinva-badge--success {
  background: var(--kinva-success-light) !important;
  color: var(--kinva-success) !important;
  border-color: var(--kinva-success-border) !important;
}

.kinva-badge--warning {
  background: var(--kinva-warning-light) !important;
  color: var(--kinva-warning) !important;
  border-color: var(--kinva-warning-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   10. GAUGE VISUALIZATION
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-market__gauge,
.kinva-pricing__market-gauge {
  margin-top: var(--kinva-space-5) !important;
  padding: var(--kinva-space-5) !important;
  background: var(--kinva-bg) !important;
  border: 1px solid var(--kinva-border) !important;
  border-radius: var(--kinva-radius-md) !important;
}

.kinva-market__gauge-track,
.kinva-pricing__gauge-track {
  display: flex !important;
  height: 40px !important;
  border-radius: var(--kinva-radius-sm) !important;
  overflow: hidden !important;
  margin: var(--kinva-space-4) 0 !important;
}

.kinva-market__gauge-zone,
.kinva-pricing__gauge-zone {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--kinva-text-xs) !important;
  font-weight: 500 !important;
}

.kinva-market__gauge-zone--low,
.kinva-pricing__gauge-zone--low {
  background: var(--kinva-error-light) !important;
  color: var(--kinva-error) !important;
}

.kinva-market__gauge-zone--avg,
.kinva-pricing__gauge-zone--avg {
  background: var(--kinva-success-light) !important;
  color: var(--kinva-success) !important;
}

.kinva-market__gauge-zone--high,
.kinva-pricing__gauge-zone--high {
  background: var(--kinva-info-light) !important;
  color: var(--kinva-info) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   11. GRID LAYOUTS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__row,
.kinva-market__input-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--kinva-space-4) !important;
  margin-bottom: var(--kinva-space-4) !important;
}

.kinva-field {
  margin-bottom: var(--kinva-space-4) !important;
}

.kinva-field-hint {
  display: block !important;
  font-size: var(--kinva-text-xs) !important;
  color: var(--kinva-text-muted) !important;
  margin-top: var(--kinva-space-1) !important;
}

/* Input with unit */
.kinva-market__input-with-unit,
.kinva-pricing__input-with-unit {
  display: flex !important;
  align-items: center !important;
  gap: var(--kinva-space-2) !important;
}

.kinva-market__input-with-unit input,
.kinva-pricing__input-with-unit input {
  flex: 1 !important;
}

.kinva-market__unit,
.kinva-pricing__unit {
  font-size: var(--kinva-text-sm) !important;
  font-weight: 500 !important;
  color: var(--kinva-text-light) !important;
  min-width: 30px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   12. GALLERY CALCULATOR
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-pricing__gallery-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--kinva-space-4) !important;
  margin: var(--kinva-space-4) 0 !important;
}

.kinva-pricing__split-item {
  padding: var(--kinva-space-4) !important;
  border-radius: var(--kinva-radius-md) !important;
  text-align: center !important;
}

.kinva-pricing__split-item--gallery {
  background: var(--kinva-warning-light) !important;
  border: 1px solid var(--kinva-warning-border) !important;
}

.kinva-pricing__split-item--artist {
  background: var(--kinva-success-light) !important;
  border: 1px solid var(--kinva-success-border) !important;
}

.kinva-pricing__split-label {
  display: block !important;
  font-size: var(--kinva-text-xs) !important;
  color: var(--kinva-text-light) !important;
  margin-bottom: var(--kinva-space-1) !important;
}

.kinva-pricing__split-item strong {
  display: block !important;
  font-size: var(--kinva-text-lg) !important;
  font-weight: 700 !important;
  color: var(--kinva-text-dark) !important;
}

.kinva-pricing__split-percent {
  font-size: var(--kinva-text-xs) !important;
  color: var(--kinva-text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   13. VALUE LADDER
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-ladder__item {
  display: flex !important;
  align-items: center !important;
  gap: var(--kinva-space-4) !important;
  padding: var(--kinva-space-4) !important;
  background: var(--kinva-white) !important;
  border: 1px solid var(--kinva-border) !important;
  border-radius: var(--kinva-radius-sm) !important;
  margin-bottom: var(--kinva-space-2) !important;
  transition: all var(--kinva-duration-fast) var(--kinva-ease) !important;
}

.kinva-ladder__item:hover {
  border-color: var(--kinva-brand-primary) !important;
  box-shadow: var(--kinva-shadow-sm) !important;
}

.kinva-ladder__item--highlight {
  background: var(--kinva-brand-primary-light) !important;
  border-color: var(--kinva-brand-primary) !important;
  border-width: 2px !important;
}

.kinva-ladder__item-icon {
  font-size: var(--kinva-text-xl) !important;
  width: 40px !important;
  text-align: center !important;
}

.kinva-ladder__item-content {
  flex: 1 !important;
}

.kinva-ladder__item-label {
  font-weight: 600 !important;
  color: var(--kinva-text-dark) !important;
  margin: 0 0 var(--kinva-space-1) 0 !important;
}

.kinva-ladder__item-desc {
  font-size: var(--kinva-text-sm) !important;
  color: var(--kinva-text-light) !important;
  margin: 0 !important;
}

.kinva-ladder__item-price {
  font-size: var(--kinva-text-lg) !important;
  font-weight: 700 !important;
  color: var(--kinva-brand-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   14. HOURLY RATE SECTION
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-helpers__hourly-section {
  background: var(--kinva-warning-light) !important;
  border: 1px solid var(--kinva-warning-border) !important;
}

.kinva-helpers__hourly-breakdown {
  background: var(--kinva-white) !important;
  border-radius: var(--kinva-radius-md) !important;
  padding: var(--kinva-space-4) !important;
  margin-top: var(--kinva-space-4) !important;
}

.kinva-helpers__hourly-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: var(--kinva-space-2) 0 !important;
  border-bottom: 1px dashed var(--kinva-border) !important;
  font-size: var(--kinva-text-sm) !important;
}

.kinva-helpers__hourly-row:last-child {
  border-bottom: none !important;
}

.kinva-helpers__hourly-row--highlight {
  background: var(--kinva-warning-light) !important;
  margin: var(--kinva-space-2) calc(-1 * var(--kinva-space-4)) !important;
  padding: var(--kinva-space-3) var(--kinva-space-4) !important;
  border-radius: var(--kinva-radius-sm) !important;
  border: none !important;
}

.kinva-helpers__hourly-row--highlight strong {
  color: var(--kinva-warning) !important;
  font-size: var(--kinva-text-base) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   15. TOOL FOOTER - KINVA LABS
   ══════════════════════════════════════════════════════════════════════════ */

.kinva-tool-footer {
  margin-top: var(--kinva-space-8) !important;
  padding-top: var(--kinva-space-4) !important;
  text-align: center !important;
  border-top: 1px solid var(--kinva-border) !important;
}

.kinva-labs-brand {
  font-size: var(--kinva-text-xs) !important;
  font-weight: 700 !important;
  color: var(--kinva-brand-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

.kinva-labs-brand::before,
.kinva-labs-brand::after {
  content: "◆" !important;
  margin: 0 var(--kinva-space-2) !important;
  font-size: 6px !important;
  vertical-align: middle !important;
}

.kinva-version-tag {
  display: inline-block !important;
  margin-left: var(--kinva-space-2) !important;
  padding: var(--kinva-space-1) var(--kinva-space-2) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--kinva-text-muted) !important;
  background: var(--kinva-bg) !important;
  border-radius: var(--kinva-radius-sm) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE ADJUSTMENTS
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .kinva-marketing-wrapper,
  .kinva-studio-wrapper {
    padding: var(--kinva-space-4) !important;
    margin: var(--kinva-space-3) !important;
    border-radius: var(--kinva-radius-md) !important;
  }
  
  .kinva-pricing__row,
  .kinva-market__input-grid,
  .kinva-pricing__result-row,
  .kinva-pricing__gallery-split {
    grid-template-columns: 1fr !important;
  }
  
  .kinva-tabs,
  .kinva-market__tabs,
  .kinva-pricing__tabs {
    flex-direction: column !important;
  }
  
  .kinva-tool-header h1 {
    font-size: var(--kinva-text-xl) !important;
  }
  
  .kinva-pricing__result-value,
  .kinva-pricing__result-box--total .kinva-pricing__result-value {
    font-size: var(--kinva-text-xl) !important;
  }
}