.app{padding:5px 20px;max-width:100vw;min-height:100vh;text-align:center}.app h1{font-family:Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:2px}.simulator-container{max-width:1200px;margin:0 auto;padding:5px}.token-plate{position:relative;border:2px solid #ccc;border-radius:12px;min-height:200px;margin:5px 0;padding:0;background:#f8f8f8;overflow:hidden}.section-title{margin:0;padding:8px 20px;font-size:1.1rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,#2c3e50,#34495e);border-radius:10px 10px 0 0;text-align:center}.token-plate-content{padding:10px}.subsection-title{margin:5px 0;font-size:.9rem;color:#666;text-align:left}.system-section{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px}.user-response-section{min-height:100px}.content-area{display:flex;flex-wrap:wrap;gap:1px;margin-right:10px;align-items:flex-start}.token-brick{height:20px;border-radius:3px;transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#000;font-size:.6rem;font-weight:700;flex-shrink:0}.token-brick.system{background:#4a90e2}.token-brick.user{background:#2ad736}.token-brick.response{background:#d72ac4}.meter-segment.system{background:#4a90e2}.meter-segment.user{background:#2ad736}.meter-segment.response{background:#d72ac4}.token-counts{margin:5px 0;font-size:14px;color:#666}.billing-section{margin:10px 0;display:flex;flex-direction:column;gap:5px}.cost-display{font-size:14px;font-weight:700;padding:6px 12px;border-radius:4px;border:1px solid #ddd}.cost-display.current-request{background:#e8f5e8;color:#2d5a2d;border-color:#2ad736}.cost-display.session-total{background:#f0f8ff;color:#1a4aa0;border-color:#4a90e2}.cost-display.tokens-processed{background:#fdf0ff;color:#8b2a8b;border-color:#d72ac4}.controls{display:flex;gap:10px;flex-wrap:wrap;margin:5px 0;align-items:center}.price-input{padding:8px 12px;border-radius:4px;border:1px solid #ccc;background:#fff;width:120px;font-size:14px}.auto-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:14px}.auto-toggle input[type=checkbox]{cursor:pointer}.legend{display:flex;justify-content:center;gap:20px;margin:10px 0;font-size:14px}.legend-item{display:flex;align-items:center;gap:5px}.legend-color{width:16px;height:16px;border-radius:3px}.legend-color.system{background:#4a90e2}.legend-color.user{background:#2ad736}.legend-color.response{background:#d72ac4}button,select{padding:8px 16px;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}button:disabled{background:#f0f0f0;color:#999;cursor:not-allowed}@media (max-width: 768px){.token-brick{height:15px}.controls{flex-direction:column;align-items:stretch}.price-input{width:100%}.legend{flex-direction:column;gap:10px}.billing-section{gap:3px}.cost-display{font-size:12px;padding:4px 8px}}.token-brick.sending-flash{outline:2px solid yellow;transition:outline .1s ease-in-out}.token-meter{position:relative;overflow:hidden}.meter-bar{width:100%;transition:transform .3s ease-out,opacity .3s ease-out;transform:translate(0);opacity:1}.meter-bar.slide-out{transform:translateY(30px);opacity:0}.sent-to-llm-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease-in-out .1s;font-weight:700;color:#333;pointer-events:none;white-space:nowrap}.sent-to-llm-text.visible{opacity:1}@keyframes pulseAnimation{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:.7}}.sent-to-llm-text.pulsing{animation:pulseAnimation 1.5s infinite ease-in-out;opacity:.7}