:root {--bg-primary: #0F172A;--bg-secondary: #1E293B;--bg-card: #334155;--text-primary: #FFFFFF;--text-secondary: #94A3B8;--text-muted: #64748B;--accent-cyan: #22D3EE;--accent-blue: #38BDF8;--success-green: #22C55E;--warning-orange: #F59E0B;--error-red: #EF4444;--spacing-xs: 0.25rem;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 2.5rem;--radius-sm: 0.375rem;--radius-md: 0.5rem;--radius-lg: 0.75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-glow: 0 0 20px rgba(34, 211, 238, 0.3);--transition-fast: 0.15s ease-in-out;--transition-normal: 0.2s ease-in-out;--transition-slow: 0.3s ease-in-out} * {margin: 0;padding: 0;box-sizing: border-box} html {scroll-behavior: smooth} body {font-family: var(--font-family);background-color: var(--bg-primary);color: var(--text-primary);line-height: 1.6;font-size: var(--font-size-base);overflow-x: hidden} .container {max-width: 1200px;margin: 0 auto;padding: 0 var(--spacing-md)} @media (min-width: 768px) {.container {padding: 0 var(--spacing-xl)} } h1, h2, h3, h4, h5, h6 {font-weight: 700;line-height: 1.2;margin-bottom: var(--spacing-md)} h1 {font-size: var(--font-size-3xl)} h2 {font-size: var(--font-size-2xl)} h3 {font-size: var(--font-size-xl)} h4 {font-size: var(--font-size-lg)} h5 {font-size: var(--font-size-base)} h6 {font-size: var(--font-size-sm)} p {margin-bottom: var(--spacing-md);color: var(--text-secondary)} a {color: var(--accent-cyan);text-decoration: none;transition: color var(--transition-normal)} a:hover {color: var(--accent-blue)} .header {background-color: var(--bg-secondary);border-bottom: 1px solid rgba(34, 211, 238, 0.1);padding: var(--spacing-lg) 0} .brand {text-align: center} .brand-name {color: var(--text-primary);margin-bottom: var(--spacing-xs);background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .brand-tagline {color: var(--text-muted);font-size: var(--font-size-sm);margin: 0} .main {padding: var(--spacing-2xl) 0;min-height: calc(100vh - 200px)} .hero {text-align: center;margin-bottom: var(--spacing-2xl)} .hero-title {font-size: var(--font-size-4xl);margin-bottom: var(--spacing-lg);background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} .hero-description {font-size: var(--font-size-lg);max-width: 600px;margin: 0 auto;color: var(--text-secondary)} .calculator-section {margin-bottom: var(--spacing-2xl)} .calculator-grid {display: grid;gap: var(--spacing-xl);grid-template-columns: 1fr} @media (min-width: 768px) {.calculator-grid {grid-template-columns: 1fr 1fr} } .input-card, .results-card, .share-card, .info-card {background-color: var(--bg-secondary);border-radius: var(--radius-xl);padding: var(--spacing-xl);box-shadow: var(--shadow-lg);border: 1px solid rgba(34, 211, 238, 0.1);transition: all var(--transition-normal)} .input-card:hover, .results-card:hover, .share-card:hover, .info-card:hover {box-shadow: var(--shadow-glow);border-color: rgba(34, 211, 238, 0.2)} .card-title {color: var(--text-primary);margin-bottom: var(--spacing-lg);font-size: var(--font-size-xl);display: flex;align-items: center;gap: var(--spacing-sm)} .revenue-form {display: flex;flex-direction: column;gap: var(--spacing-lg)} .form-group {display: flex;flex-direction: column;gap: var(--spacing-sm)} .form-label {font-weight: 600;color: var(--text-primary);font-size: var(--font-size-sm)} .form-input, .form-select {background-color: var(--bg-card);border: 1px solid transparent;border-radius: var(--radius-md);padding: var(--spacing-md);font-size: var(--font-size-base);color: var(--text-primary);transition: all var(--transition-normal);font-family: var(--font-family)} .form-input.small {padding: var(--spacing-sm) var(--spacing-md)} .form-input::placeholder {color: var(--text-muted)} .form-input:focus, .form-select:focus {outline: none;border-color: var(--accent-cyan);box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1)} .form-select {cursor: pointer} .form-select option {background-color: var(--bg-card);color: var(--text-primary)} .split-container {display: grid;grid-template-columns: 1fr 1fr;gap: var(--spacing-md)} .split-input {display: flex;flex-direction: column;gap: var(--spacing-sm)} .split-label {font-size: var(--font-size-xs);color: var(--text-secondary);font-weight: 500} .calculate-btn {position: relative;background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));color: var(--bg-primary);border: none;border-radius: var(--radius-lg);padding: var(--spacing-md) var(--spacing-xl);font-size: var(--font-size-base);font-weight: 600;cursor: pointer;transition: all var(--transition-normal);overflow: hidden;margin-top: var(--spacing-md)} .calculate-btn:hover {transform: translateY(-2px);box-shadow: var(--shadow-glow)} .calculate-btn:active {transform: translateY(0)} .btn-glow {position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left var(--transition-slow)} .calculate-btn:hover .btn-glow {left: 100%} .results-content {min-height: 300px;display: flex;align-items: center;justify-content: center} .placeholder-results {text-align: center;color: var(--text-muted)} .placeholder-icon {font-size: var(--font-size-4xl);margin-bottom: var(--spacing-md)} .placeholder-text {font-size: var(--font-size-base);margin: 0} .revenue-display {width: 100%;animation: fadeInUp 0.5s ease-out} .revenue-amounts {display: grid;gap: var(--spacing-lg);margin-bottom: var(--spacing-xl)} .revenue-item {background-color: var(--bg-card);border-radius: var(--radius-lg);padding: var(--spacing-lg);border-left: 4px solid var(--accent-cyan);transition: all var(--transition-normal)} .revenue-item:hover {transform: translateX(4px);box-shadow: var(--shadow-md)} .revenue-item.high {border-left-color: var(--success-green)} .revenue-item.average {border-left-color: var(--accent-blue)} .revenue-item.low {border-left-color: var(--accent-cyan)} .revenue-label {font-size: var(--font-size-sm);color: var(--text-secondary);margin-bottom: var(--spacing-xs);text-transform: uppercase;letter-spacing: 0.5px} .revenue-value {font-size: var(--font-size-2xl);font-weight: 700;color: var(--text-primary)} .revenue-value.high {color: var(--success-green)} .revenue-metrics {display: grid;grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));gap: var(--spacing-md);margin-bottom: var(--spacing-lg)} .metric-item {text-align: center;padding: var(--spacing-md);background-color: var(--bg-card);border-radius: var(--radius-md)} .metric-value {font-size: var(--font-size-lg);font-weight: 600;color: var(--accent-cyan);display: block} .metric-label {font-size: var(--font-size-xs);color: var(--text-secondary);margin-top: var(--spacing-xs)} .share-section {margin-bottom: var(--spacing-2xl)} .share-buttons {display: flex;gap: var(--spacing-md);flex-wrap: wrap} .share-btn {background-color: var(--bg-card);border: 1px solid var(--accent-cyan);color: var(--accent-cyan);border-radius: var(--radius-md);padding: var(--spacing-sm) var(--spacing-lg);cursor: pointer;transition: all var(--transition-normal);font-size: var(--font-size-sm);font-weight: 500} .share-btn:hover {background-color: var(--accent-cyan);color: var(--bg-primary);transform: translateY(-1px)} .info-section {margin-bottom: var(--spacing-2xl)} .info-grid {display: grid;gap: var(--spacing-xl);grid-template-columns: 1fr} @media (min-width: 768px) {.info-grid {grid-template-columns: 1fr 1fr} } .info-title {color: var(--text-primary);margin-bottom: var(--spacing-lg);font-size: var(--font-size-lg)} .info-content {color: var(--text-secondary)} .info-content ul {margin-left: var(--spacing-lg);margin-bottom: var(--spacing-md)} .info-content li {margin-bottom: var(--spacing-sm)} .disclaimer {background-color: var(--bg-card);border-radius: var(--radius-md);padding: var(--spacing-md);border-left: 4px solid var(--warning-orange);margin-top: var(--spacing-md)} .placeholder {color: var(--text-muted);font-style: italic} .faq-section {margin-bottom: var(--spacing-2xl)} .section-title {text-align: center;margin-bottom: var(--spacing-xl);font-size: var(--font-size-2xl);color: var(--text-primary)} .faq-grid {display: grid;gap: var(--spacing-lg);grid-template-columns: 1fr} @media (min-width: 768px) {.faq-grid {grid-template-columns: repeat(2, 1fr)} } .faq-item {background-color: var(--bg-secondary);border-radius: var(--radius-lg);padding: var(--spacing-lg);border: 1px solid rgba(34, 211, 238, 0.1);transition: all var(--transition-normal)} .faq-item:hover {border-color: rgba(34, 211, 238, 0.2);box-shadow: var(--shadow-md)} .faq-question {color: var(--text-primary);margin-bottom: var(--spacing-sm);font-size: var(--font-size-base)} .faq-answer {color: var(--text-secondary);margin: 0;line-height: 1.6} .footer {background-color: var(--bg-secondary);border-top: 1px solid rgba(34, 211, 238, 0.1);padding: var(--spacing-xl) 0} .footer-content {display: flex;flex-direction: column;align-items: center;gap: var(--spacing-md);text-align: center} @media (min-width: 768px) {.footer-content {flex-direction: row;justify-content: space-between} } .footer-text {color: var(--text-muted);margin: 0} .footer-links {display: flex;gap: var(--spacing-lg)} .footer-link {color: var(--text-secondary);font-size: var(--font-size-sm);transition: color var(--transition-normal)} .footer-link:hover {color: var(--accent-cyan)} @keyframes fadeInUp {from {opacity: 0;transform: translateY(20px)} to {opacity: 1;transform: translateY(0)} } @keyframes numberCount {from {transform: scale(0.9)} to {transform: scale(1)} } .animate-number {animation: numberCount 0.3s ease-out} @media (max-width: 767px) {.hero-title {font-size: var(--font-size-2xl)} .hero-description {font-size: var(--font-size-base)} .split-container {grid-template-columns: 1fr} .share-buttons {flex-direction: column} .share-btn {text-align: center} .revenue-metrics {grid-template-columns: repeat(2, 1fr)} .footer-links {flex-direction: column;gap: var(--spacing-sm)} } @media (max-width: 480px) {.container {padding: 0 var(--spacing-sm)} .input-card, .results-card, .share-card, .info-card {padding: var(--spacing-lg)} .revenue-metrics {grid-template-columns: 1fr} } @media print {.header, .share-section, .footer {display: none} .main {padding: 0} .input-card {display: none} .results-card {border: 1px solid #000} }