.percentage-calculator{max-width:600px;margin:0 auto}.percentage-controls{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.mode-tabs{display:flex;margin-bottom:var(--space-xl);border-bottom:1px solid var(--border)}.mode-tab{background:none;border:none;padding:var(--space-md) var(--space-lg);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);border-bottom:2px solid transparent;font-weight:500;flex:1;text-align:center}.mode-tab:hover{color:var(--text-primary);background:var(--glass)}.mode-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.percentage-inputs{margin-bottom:var(--space-xl)}.input-row{display:flex;align-items:end;gap:var(--space-md);flex-wrap:wrap}.input-row .input-wrapper{flex:1;min-width:120px}.input-symbol{font-size:1.25rem;font-weight:600;color:var(--accent);padding-bottom:var(--space-sm)}.input-text{font-size:.875rem;color:var(--text-muted);padding-bottom:var(--space-sm);white-space:nowrap}.percentage-buttons{display:flex;gap:var(--space-md)}.percentage-result{text-align:center}.result-value{margin-bottom:var(--space-md)}.result-number{font-size:2.5rem;font-weight:700;color:var(--accent);font-family:var(--font-mono)}.result-formula{font-size:.875rem;color:var(--text-muted);background:var(--bg-secondary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border);font-family:var(--font-mono)}@media(max-width:768px){.mode-tabs{flex-direction:column}.mode-tab{border-bottom:1px solid var(--border);border-right:none}.mode-tab.active{border-bottom-color:var(--accent);border-left:3px solid var(--accent)}.input-row{flex-direction:column;align-items:stretch;gap:var(--space-sm)}.input-symbol,.input-text{text-align:center;padding-bottom:var(--space-xs)}.percentage-buttons{flex-direction:column}.result-number{font-size:2rem}}