.input-area{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.input-group{margin-bottom:var(--spacing-md)}.input-group:last-child{margin-bottom:0}.input-label{display:block;font-weight:600;font-size:.875rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.text-input{width:100%;min-height:120px;padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.875rem;line-height:1.6;resize:vertical;transition:border-color var(--transition-normal),box-shadow var(--transition-normal);background:var(--color-bg-white);color:var(--color-text-primary)}.text-input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.text-input:disabled{background:var(--color-bg);cursor:not-allowed;color:var(--color-text-light)}.input-hint{margin:var(--spacing-xs) 0 0;font-size:.75rem;color:var(--color-text-light)}.options-row{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:flex-end;margin-bottom:var(--spacing-md)}.options-row .input-group{flex:1;min-width:200px;margin-bottom:0}.select-input{width:100%;padding:.625rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;background:var(--color-bg-white);color:var(--color-text-primary);cursor:pointer;transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.select-input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.select-input:hover:not(:disabled){border-color:var(--color-border-hover)}.select-input:disabled{background:var(--color-bg);cursor:not-allowed;color:var(--color-text-light)}.checkbox-group{flex-shrink:0}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer;font-size:.875rem;color:var(--color-text-secondary)}.checkbox-input{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}.checkbox-input:disabled{cursor:not-allowed;opacity:.5}.checkbox-text{-webkit-user-select:none;user-select:none}.calculate-btn{width:100%;padding:.875rem var(--spacing-lg);background:var(--color-primary);color:var(--color-bg-white);border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;transition:background-color var(--transition-normal),transform var(--transition-fast)}.calculate-btn:hover:not(:disabled){background:var(--color-primary-hover)}.calculate-btn:active:not(:disabled){transform:scale(.98)}.calculate-btn:disabled{background:var(--color-text-light);cursor:not-allowed}@media (max-width: 480px){.options-row{flex-direction:column;align-items:stretch}.options-row .input-group{min-width:0}}.model-selector{margin-bottom:var(--spacing-md)}.selector-label{display:block;font-weight:600;font-size:.875rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-xs)}.selector-input{width:100%;max-width:400px;padding:.625rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;background:var(--color-bg-white);color:var(--color-text-primary);cursor:pointer;transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.selector-input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}.selector-input:hover:not(:disabled){border-color:var(--color-border-hover)}.selector-input:disabled{background:var(--color-bg);cursor:not-allowed;color:var(--color-text-light)}.status-badge{display:inline-block;padding:var(--spacing-xs) .625rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;text-transform:capitalize}.status-badge.ok{background:var(--color-success-bg);color:var(--color-success-text)}.status-badge.caution{background:var(--color-caution-bg);color:var(--color-caution-text)}.status-badge.warning{background:var(--color-warning-bg);color:var(--color-warning-text)}.status-badge.error{background:var(--color-error-bg);color:var(--color-error-text)}.progress-bar{height:8px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-slow),background-color var(--transition-normal);background:var(--color-success)}.progress-fill.caution{background:var(--color-caution)}.progress-fill.warning{background:var(--color-warning)}.progress-fill.error{background:var(--color-error)}.results-table-container{overflow-x:auto;margin-bottom:var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-white)}.results-table{width:100%;border-collapse:collapse;font-size:.875rem}.results-table th,.results-table td{padding:var(--spacing-md);text-align:left;border-bottom:1px solid var(--color-border)}.results-table th{background:var(--color-bg);font-weight:600;color:var(--color-text-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.results-table tbody tr:last-child td{border-bottom:none}.results-table tbody tr:hover{background:var(--color-bg)}.results-table tbody tr.over-limit{background:#fef2f2}.results-table tbody tr.over-limit:hover{background:#fee2e2}.model-name{display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:180px}.vision-badge{display:inline-block;padding:var(--spacing-xs) .375rem;border-radius:var(--radius-full);font-size:.5625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:#e0e7ff;color:#3730a3;width:fit-content}.model-category{color:var(--color-text-muted);font-size:.8125rem;text-transform:capitalize}.tokens-used{font-family:var(--font-mono);font-weight:600;color:var(--color-text-primary)}.percentage{min-width:180px;display:flex;align-items:center;gap:var(--spacing-sm)}.tokens-remaining{font-family:var(--font-mono);font-weight:500;color:var(--color-text-secondary)}.negative-indicator{color:var(--color-error);font-weight:600}.status-cell{white-space:nowrap}@media (max-width: 768px){.results-table-container{display:none}}.result-card{background:var(--color-bg-white);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-lg);transition:box-shadow var(--transition-normal),border-color var(--transition-normal);width:100%}.result-card:hover{box-shadow:var(--shadow-md)}.result-card.over-limit{border-color:#fecaca;background:#fef2f2}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);margin-bottom:var(--spacing-md);flex-wrap:wrap}.card-model-info{flex:1;min-width:0}.card-model-name{margin:0 0 var(--spacing-xs);font-size:1.125rem;font-weight:600;color:var(--color-text-primary)}.card-badges{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.model-badge{display:inline-block;padding:var(--spacing-xs) .5rem;border-radius:var(--radius-full);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;width:fit-content}.model-badge.free{background:var(--color-success-bg);color:var(--color-success-text)}.model-badge.paid{background:var(--color-caution-bg);color:var(--color-caution-text)}.category-badge{padding:var(--spacing-xs) .5rem;border-radius:var(--radius-full);font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:var(--color-border);color:var(--color-text-muted)}.vision-badge{padding:var(--spacing-xs) .5rem;border-radius:var(--radius-full);font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:#e0e7ff;color:#3730a3}.card-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.metric{display:flex;flex-direction:column;gap:var(--spacing-xs)}.metric-label{font-size:.75rem;color:var(--color-text-light);text-transform:uppercase;letter-spacing:.05em}.metric-value{font-size:1rem;font-weight:600;color:var(--color-text-primary);font-family:var(--font-mono)}.metric-progress{display:flex;align-items:center;gap:var(--spacing-sm)}.metric-progress .progress-bar{flex:1;height:6px}.percentage-text{font-size:.75rem;color:var(--color-text-muted);font-family:var(--font-mono);white-space:nowrap}.metric-value.tokens-remaining.negative{color:var(--color-error)}@media (max-width: 480px){.card-metrics{grid-template-columns:1fr}}.token-calculator{max-width:1200px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-md)}.calculator-header{text-align:center;margin-bottom:var(--spacing-xl)}.calculator-header h1{font-size:1.75rem;font-weight:700;color:var(--color-text-primary);margin:0 0 var(--spacing-xs)}.subtitle{color:var(--color-text-muted);font-size:1rem;margin:0}.calculator-results{animation:fadeIn var(--transition-normal) ease-out;margin-top:var(--spacing-xl)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.calculator-footer{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border);text-align:center;font-size:.8125rem;color:var(--color-text-muted);line-height:1.6}.calculator-footer strong{color:var(--color-text-secondary)}.disclaimer{margin-top:var(--spacing-xs);font-size:.75rem;color:var(--color-text-light)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 480px){.token-calculator{padding:var(--spacing-md) var(--spacing-sm)}.calculator-header h1{font-size:1.5rem}}:root{--color-primary: #3b82f6;--color-primary-hover: #2563eb;--color-primary-light: rgba(59, 130, 246, .15);--color-success: #22c55e;--color-success-bg: #dcfce7;--color-success-text: #166534;--color-caution: #f59e0b;--color-caution-bg: #fef3c7;--color-caution-text: #92400e;--color-warning: #f97316;--color-warning-bg: #ffedd5;--color-warning-text: #9a3412;--color-error: #ef4444;--color-error-bg: #fee2e2;--color-error-text: #991b1b;--color-bg: #f8fafc;--color-bg-white: #ffffff;--color-border: #e2e8f0;--color-border-hover: #cbd5e1;--color-text-primary: #1e293b;--color-text-secondary: #334155;--color-text-muted: #64748b;--color-text-light: #94a3b8;--font-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-focus: 0 0 0 3px var(--color-primary-light);--transition-fast: .1s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;font-family:var(--font-sans);line-height:1.5;color:var(--color-text-primary)}#root{min-height:100dvh}