body{margin:0;padding:0}:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e8e8e8;--text-primary: #1a1a1a;--text-secondary: #666666;--border-color: #d0d0d0;--shadow: rgba(0, 0, 0, .1);--accent: #3b82f6;--accent-hover: #2563eb;--success: #10b981;--warning: #f59e0b;--error: #ef4444}.dark{--bg-primary: #1a1a1a;--bg-secondary: #2a2a2a;--bg-tertiary: #3a3a3a;--text-primary: #f0f0f0;--text-secondary: #a0a0a0;--border-color: #404040;--shadow: rgba(0, 0, 0, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}#root{min-height:100vh;display:flex;flex-direction:column}.app{flex:1;display:flex;flex-direction:column;max-width:1400px;margin:0 auto;width:100%}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.app-header h1{font-size:1.75rem;font-weight:700;color:var(--text-primary)}.theme-toggle{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:.5rem;transition:background-color .2s}.theme-toggle:hover{background-color:var(--bg-tertiary)}.app-content{flex:1;display:flex;overflow:hidden}.sidebar{width:320px;background-color:var(--bg-secondary);border-right:1px solid var(--border-color);padding:1.5rem;overflow-y:auto}.sidebar h2{font-size:1.25rem;margin-bottom:1rem;color:var(--text-primary)}.main-content{flex:1;padding:1.5rem;overflow-y:auto}.page-intro{margin-bottom:1.5rem;padding:1rem;background-color:var(--bg-secondary);border-radius:.5rem;border-left:4px solid var(--accent)}.page-intro p{margin:0;color:var(--text-secondary);font-size:1rem;line-height:1.5}.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.tab{background:none;border:none;padding:.75rem 1.5rem;font-size:1rem;cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;transition:all .2s}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.app-footer{padding:1rem 2rem;background-color:var(--bg-secondary);border-top:1px solid var(--border-color);text-align:center;font-size:.875rem;color:var(--text-secondary)}.app-footer a{color:var(--accent);text-decoration:none}.app-footer a:hover{text-decoration:underline}.model-selector{display:flex;flex-direction:column;gap:1rem}.search-input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:.5rem;background-color:var(--bg-primary);color:var(--text-primary);font-size:.875rem}.search-input:focus{outline:none;border-color:var(--accent)}.vendor-section{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden}.vendor-header{display:flex;align-items:center;padding:.75rem;background-color:var(--bg-secondary);cursor:pointer}.vendor-toggle{background:none;border:none;font-size:.75rem;margin-right:.5rem;cursor:pointer;color:var(--text-secondary)}.vendor-label{display:flex;align-items:center;flex:1;cursor:pointer}.vendor-label input[type=checkbox]{margin-right:.5rem}.vendor-name{font-weight:600;color:var(--text-primary)}.models-list{padding:.5rem}.model-item{display:flex;align-items:center;padding:.5rem;cursor:pointer;border-radius:.25rem;transition:background-color .2s}.model-item:hover{background-color:var(--bg-secondary)}.model-item input[type=checkbox]{margin-right:.75rem}.model-info{display:flex;flex-direction:column;gap:.25rem}.model-name{font-weight:500;color:var(--text-primary)}.model-pricing{font-size:.75rem;color:var(--text-secondary)}.calculator{display:flex;flex-direction:column;gap:2rem}.input-section{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-weight:600;color:var(--text-primary)}.input-group textarea{padding:.75rem;border:1px solid var(--border-color);border-radius:.5rem;background-color:var(--bg-primary);color:var(--text-primary);font-family:inherit;resize:vertical}.input-group textarea:focus{outline:none;border-color:var(--accent)}.token-badge{align-self:flex-start;padding:.25rem .75rem;background-color:var(--bg-tertiary);border-radius:1rem;font-size:.875rem;color:var(--text-secondary)}.results-section h2,.results-section h3{margin-bottom:1rem;color:var(--text-primary)}.cost-table{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden}.table-header{display:grid;grid-template-columns:1fr 1.5fr 1fr 1fr 1fr 1fr;padding:.75rem 1rem;background-color:var(--bg-secondary);font-weight:600;font-size:.875rem;color:var(--text-primary);border-bottom:1px solid var(--border-color)}.table-row{display:grid;grid-template-columns:1fr 1.5fr 1fr 1fr 1fr 1fr;padding:.75rem 1rem;font-size:.875rem;border-bottom:1px solid var(--border-color);transition:background-color .2s}.table-row:last-child{border-bottom:none}.table-row:hover{background-color:var(--bg-secondary)}.total-cost{font-weight:600;color:var(--accent)}.conversation-simulator{display:flex;flex-direction:column;gap:2rem}.conversation-simulator h2,.conversation-simulator h3{color:var(--text-primary)}.turns-container{display:flex;flex-direction:column;gap:1rem}.turn-item{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.5rem;padding:1rem}.turn-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.turn-header h4{color:var(--text-primary)}.remove-turn-btn{background:none;border:none;color:var(--error);font-size:1.25rem;cursor:pointer;padding:.25rem;line-height:1;transition:opacity .2s}.remove-turn-btn:hover{opacity:.7}.turn-inputs{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.add-turn-btn{padding:.75rem 1.5rem;background-color:var(--accent);color:#fff;border:none;border-radius:.5rem;font-size:1rem;cursor:pointer;transition:background-color .2s}.add-turn-btn:hover{background-color:var(--accent-hover)}.conversation-summary{margin-top:2rem}.summary-table{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden}.summary-table .table-header,.summary-table .table-row{grid-template-columns:1fr 1.5fr 1fr 1fr 1fr 1fr}.cost-chart-container{margin-top:2rem;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem;padding:1.5rem}@media (max-width: 1000px){.app-content{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--border-color)}.input-section,.turn-inputs{grid-template-columns:1fr}.table-header,.table-row{font-size:.75rem;padding:.5rem}}@media (max-width: 600px){.app-header{padding:1rem}.app-header h1{font-size:1.25rem}.sidebar,.main-content{padding:1rem}.table-header,.table-row{grid-template-columns:1fr;gap:.5rem}.table-header>*,.table-row>*{display:flex;justify-content:space-between}.table-header>*:before,.table-row>*:before{content:attr(data-label);font-weight:600}}