@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";body{margin:0;padding:0}:root{--color-bg-primary: #000000;--color-bg-secondary: #0f1612;--color-bg-card: #1f1f1f;--color-bg-card-hover: #262626;--color-bg-input: #1a1a1a;--color-border: #333333;--color-border-focus: #10b981;--color-text-primary: #f3f4f6;--color-text-secondary: #9ca3af;--color-text-muted: #6b7280;--color-primary: #10b981;--color-primary-hover: #059669;--color-primary-light: #34d399;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--transition: all .2s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(51,51,51,.5);padding:var(--spacing-lg) 0;position:sticky;top:0;z-index:100}.header-content{max-width:1400px;margin:0 auto;padding:0 var(--spacing-xl);display:flex;align-items:center;gap:var(--spacing-xl)}.logo{display:flex;align-items:center;gap:8px}.logo-icon{width:24px;height:24px;display:block}.logo-bar-1{fill:#22c55d}.logo-bar-2{fill:#20783e}.logo-bar-3{fill:#174324}.logo-text{font-family:Space Grotesk,sans-serif;font-size:1.25rem;font-weight:400;color:var(--color-text-primary)}.header-title{color:var(--color-text-secondary);font-size:1rem;font-weight:400}.app-main{flex:1;max-width:1400px;margin:0 auto;padding:var(--spacing-2xl) var(--spacing-xl);width:100%}.calculator-container{background-color:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-2xl);border:1px solid var(--color-border)}.calculator-header{margin-bottom:var(--spacing-xl)}.calculator-header h1{font-family:Space Grotesk,sans-serif;font-size:2rem;font-weight:600;margin-bottom:var(--spacing-xs);background:linear-gradient(135deg,var(--color-text-primary),var(--color-primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--color-text-secondary);font-size:1rem}.mode-toggle{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);background-color:var(--color-bg-input);padding:var(--spacing-xs);border-radius:var(--radius-md);border:1px solid var(--color-border)}.mode-button{flex:1;padding:var(--spacing-sm) var(--spacing-lg);background-color:transparent;color:var(--color-text-secondary);border:none;border-radius:var(--radius-sm);font-family:Space Grotesk,sans-serif;font-size:.9375rem;font-weight:500;cursor:pointer;transition:var(--transition)}.mode-button:hover{color:var(--color-text-primary)}.mode-button.active{background-color:var(--color-primary);color:#fff}.calculator-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xl)}.input-section{display:flex;flex-direction:column;gap:var(--spacing-lg)}.input-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.input-group label{font-family:Space Grotesk,sans-serif;color:var(--color-text-primary);font-weight:500;font-size:.9375rem;display:flex;align-items:center;gap:var(--spacing-xs)}.tooltip-trigger{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background-color:var(--color-primary);color:#fff;border-radius:50%;font-size:.75rem;font-weight:600;cursor:help;font-style:normal}.input-wrapper{position:relative;display:flex;align-items:center}.input-wrapper input{flex:1}.currency-symbol,.percentage-symbol{position:absolute;color:var(--color-text-muted);font-weight:500}.currency-symbol{left:var(--spacing-md)}.percentage-symbol{right:var(--spacing-md)}.input-wrapper input{padding-left:calc(var(--spacing-md) + 1rem)}input[type=number]+.percentage-symbol{pointer-events:none}input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-input);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;transition:var(--transition)}input:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 3px #10b9811a}input::placeholder{color:var(--color-text-muted)}select,.account-type-select{width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-input);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;cursor:pointer;transition:var(--transition);appearance:none;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='%239ca3af' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-md) center;padding-right:calc(var(--spacing-md) + 24px)}select:focus,.account-type-select:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 3px #10b9811a}select option,select optgroup{background-color:var(--color-bg-secondary);color:var(--color-text-primary)}textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg-input);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;resize:vertical;transition:var(--transition)}textarea:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 3px #10b9811a}.input-hint{color:var(--color-text-muted);font-size:.875rem}.supply-section{margin-top:var(--spacing-sm)}.supply-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs)}.supply-header label{color:var(--color-text-primary);font-weight:500;font-size:.9375rem}.btn-add{padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-bg-input);color:var(--color-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:Space Grotesk,sans-serif;font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--transition)}.btn-add:hover{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.supply-list{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.supply-item{display:grid;grid-template-columns:2fr 80px 120px 100px auto;gap:var(--spacing-sm);align-items:center}.supply-description{flex:1}.supply-quantity{width:80px;text-align:center}.supply-cost-wrapper{position:relative;display:flex;align-items:center;width:120px}.supply-cost{width:100%;padding-left:calc(var(--spacing-md) + 1rem)}.supply-total{width:100px;text-align:right;color:var(--color-text-primary);font-weight:600;font-size:1rem;padding-right:var(--spacing-sm)}.btn-remove{width:36px;height:36px;background-color:var(--color-bg-input);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:1.5rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;line-height:1}.btn-remove:hover{background-color:var(--color-error);color:#fff;border-color:var(--color-error)}.supply-empty{padding:var(--spacing-lg);background-color:var(--color-bg-input);border:1px dashed var(--color-border);border-radius:var(--radius-md);text-align:center;margin-top:var(--spacing-sm)}.supply-empty p{color:var(--color-text-muted);font-size:.875rem}.button-group{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.btn-primary,.btn-secondary{flex:1;padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-family:Space Grotesk,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition)}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background-color:var(--color-bg-input);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-bg-secondary);border-color:var(--color-text-muted)}.results-section{display:flex;flex-direction:column}.results-breakdown{background-color:var(--color-bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-xl);border:1px solid var(--color-border)}.results-breakdown h2{font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:600;margin-bottom:var(--spacing-lg);color:var(--color-text-primary)}.result-cards{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.result-card{background-color:var(--color-bg-card);padding:var(--spacing-lg);border-radius:var(--radius-md);border:1px solid var(--color-border);transition:var(--transition)}.result-card:hover{background-color:var(--color-bg-card-hover)}.result-card.primary{border-color:#10b9814d}.result-card.success{border-color:#10b98166}.result-label{font-family:Space Grotesk,sans-serif;color:var(--color-text-secondary);font-size:.875rem;font-weight:500;margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em}.result-value{font-family:Space Grotesk,sans-serif;font-size:1.75rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.result-value.commission{color:var(--color-primary-light)}.result-value.success{color:var(--color-success)}.result-description{color:var(--color-text-muted);font-size:.875rem}.calculation-formula{background-color:var(--color-bg-card);padding:0;border-radius:var(--radius-md);border:1px solid var(--color-border);overflow:hidden;transition:var(--transition)}.calculation-formula:hover{border-color:#10b9814d}.formula-header{display:flex;justify-content:space-between;align-items:center;background:#10b9810d;border-bottom:1px solid var(--color-border)}.expand-button{flex:1;display:flex;justify-content:space-between;align-items:center;background:transparent;border:none;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;color:var(--color-text-primary);transition:all .2s ease}.expand-button:hover{background:#10b98114}.expand-button h3{font-family:Space Grotesk,sans-serif;font-size:.9375rem;font-weight:600;margin:0;letter-spacing:.01em}.expand-icon{transition:transform .3s ease;color:var(--color-primary);opacity:.8}.expand-button:hover .expand-icon{opacity:1}.expand-icon.expanded{transform:rotate(180deg)}.calculation-formula h3{font-size:1rem;margin:0;color:var(--color-text-primary)}.copy-button{background:none;border:none;padding:var(--spacing-xs);margin-right:var(--spacing-sm);cursor:pointer;color:var(--color-text-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:var(--transition)}.copy-button:hover{background-color:var(--color-bg-hover);color:var(--color-text-primary)}.copy-button.copied{color:var(--color-success)}.formula{padding:var(--spacing-lg)}.formula p{color:var(--color-text-secondary);font-size:.9375rem;margin-bottom:var(--spacing-xs);line-height:1.8}.formula strong{color:var(--color-text-primary)}.formula .highlight{color:var(--color-primary-light);font-weight:600}.formula .step-divider{margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs);padding-top:var(--spacing-sm);border-top:1px dashed var(--color-border)}.formula .final-summary{margin-top:var(--spacing-lg);padding:var(--spacing-md);background-color:#10b98114;border-radius:var(--radius-sm);border:1px solid rgba(16,185,129,.2)}.formula .final-summary p{margin-bottom:var(--spacing-xs)}.formula .final-summary p:last-child{margin-bottom:0}.history-container{background-color:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);border:1px solid var(--color-border)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.history-header h2{font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:600;color:var(--color-text-primary)}.btn-refresh{padding:var(--spacing-xs) var(--spacing-md);background-color:var(--color-bg-input);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:Space Grotesk,sans-serif;font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--transition)}.btn-refresh:hover{background-color:var(--color-bg-secondary);color:var(--color-primary);border-color:var(--color-primary)}.history-empty{padding:var(--spacing-2xl);text-align:center;color:var(--color-text-muted);background-color:var(--color-bg-input);border:1px dashed var(--color-border);border-radius:var(--radius-md)}.history-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.history-item{background-color:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border);overflow:hidden;transition:var(--transition)}.history-item:hover{border-color:#10b98180;background-color:var(--color-bg-card-hover)}.history-item-header{padding:var(--spacing-lg);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-lg)}.history-item-main{flex:1}.history-item-title{font-family:Space Grotesk,sans-serif;font-size:1.125rem;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.history-item-meta{display:flex;gap:var(--spacing-md);font-size:.875rem;color:var(--color-text-muted);flex-wrap:wrap}.history-account-type{padding:2px var(--spacing-xs);background-color:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-weight:500}.history-mode{padding:2px var(--spacing-xs);background-color:var(--color-bg-input);border-radius:var(--radius-sm)}.history-rate{color:var(--color-primary-light)}.history-payment-method{padding:2px var(--spacing-xs);background-color:var(--color-warning);color:#fff;border-radius:var(--radius-sm);font-weight:500}.history-item-summary{display:flex;align-items:center;gap:var(--spacing-lg)}.summary-item{display:flex;flex-direction:column;gap:2px}.summary-label{font-size:.75rem;color:var(--color-text-muted)}.summary-value{font-size:1rem;font-weight:600;color:var(--color-text-primary)}.summary-value.success{color:var(--color-success)}.history-item-actions{display:flex;gap:var(--spacing-xs)}.delete-btn{width:32px;height:32px;background-color:var(--color-bg-input);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:1.5rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;line-height:1}.delete-btn:hover{background-color:var(--color-error);color:#fff;border-color:var(--color-error)}.delete-btn:disabled{opacity:.5;cursor:not-allowed}.expand-btn{width:32px;height:32px;background-color:var(--color-bg-input);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:1.25rem;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}.expand-btn:hover{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.history-item-details{padding:0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);border-top:1px solid var(--color-border);padding-top:var(--spacing-lg)}.details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.details-grid .detail-item:first-child{grid-column:1 / -1}.detail-item{display:flex;justify-content:space-between;padding:var(--spacing-sm);background-color:var(--color-bg-input);border-radius:var(--radius-sm)}.detail-label{color:var(--color-text-secondary);font-size:.875rem}.detail-value{color:var(--color-text-primary);font-weight:600;font-size:.875rem}.detail-value.commission{color:var(--color-primary-light)}.detail-value.success{color:var(--color-success)}.supplies-breakdown{margin-bottom:var(--spacing-lg)}.supplies-breakdown h4{color:var(--color-text-primary);font-size:.9375rem;margin-bottom:var(--spacing-sm)}.supplies-breakdown ul{list-style:none;display:flex;flex-direction:column;gap:var(--spacing-xs)}.supplies-breakdown li{display:flex;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-bg-input);border-radius:var(--radius-sm);font-size:.875rem}.supplies-breakdown li span:first-child{color:var(--color-text-secondary)}.supplies-breakdown li span:last-child{color:var(--color-text-primary);font-weight:500}.supplies-breakdown li .supply-detail{color:var(--color-text-primary);font-weight:500}.calculation-notes{background-color:var(--color-bg-input);padding:var(--spacing-md);border-radius:var(--radius-sm);border:1px solid var(--color-border)}.calculation-notes h4{color:var(--color-text-primary);font-size:.9375rem;margin-bottom:var(--spacing-xs)}.calculation-notes p{color:var(--color-text-secondary);font-size:.875rem;line-height:1.6}.notification{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);background-color:var(--color-primary);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:0 10px 30px #0000004d;animation:slideIn .3s ease;z-index:1000}@keyframes slideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:1024px){.calculator-content,.details-grid{grid-template-columns:1fr}.history-item-header{flex-direction:column;align-items:flex-start}.history-item-summary{width:100%;justify-content:space-between}}@media(max-width:768px){.app-main{padding:var(--spacing-lg) var(--spacing-md)}.calculator-container,.history-container{padding:var(--spacing-lg)}.mode-toggle{flex-direction:column}.supply-item{grid-template-columns:1fr}.supply-cost-wrapper{width:100%}.result-cards{grid-template-columns:1fr}}