*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #0a0a12;--bg-card: #1a1a2e;--bg-input: #16213e;--purple: #6c3fa0;--purple-glow: #9d4edd;--gold: #ffd700;--red: #e63946;--text: #e0e0e0;--text-dim: #8888aa;--border: #2a2a4a}body{font-family:"Press Start 2P",monospace;background:var(--bg-dark);color:var(--text);height:100vh;overflow:hidden;font-size:10px;image-rendering:pixelated}.login-container{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-dark);background-image:radial-gradient(ellipse at 50% 80%,rgba(108,63,160,.15) 0%,transparent 60%)}.login-box{background:var(--bg-card);border:3px solid var(--purple);box-shadow:0 0 20px #9d4edd4d,inset 0 0 20px #00000080;padding:40px;text-align:center;max-width:400px;width:90%}.login-box h1{color:var(--gold);font-size:18px;margin-bottom:24px;text-shadow:0 0 10px rgba(255,215,0,.5)}.login-box .subtitle{color:var(--text-dim);font-size:11px}.login-box input{display:block;width:100%;padding:12px;margin-bottom:12px;background:var(--bg-input);border:2px solid var(--border);color:var(--text);font-family:inherit;font-size:12px}.login-box input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 8px #9d4edd66}.login-box button{width:100%;padding:12px;background:var(--purple);border:2px solid var(--purple-glow);color:var(--gold);font-family:inherit;font-size:14px;cursor:pointer;transition:all .2s}.login-box button:hover{background:var(--purple-glow);box-shadow:0 0 15px #9d4edd99}.error{color:var(--red);font-size:10px;margin-bottom:8px}.chat-container{display:flex;flex-direction:column;height:100vh}header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-card);border-bottom:3px solid var(--purple);box-shadow:0 4px 12px #00000080}header h1{color:var(--gold);font-size:16px;text-shadow:0 0 8px rgba(255,215,0,.4)}header select{background:var(--bg-input);border:2px solid var(--border);color:var(--purple-glow);font-family:inherit;font-size:12px;padding:6px 10px;cursor:pointer}header select:focus{outline:none;border-color:var(--purple)}.messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.msg{display:flex;gap:10px;align-items:flex-start;max-width:85%;animation:fadeIn .3s ease}.msg.user{align-self:flex-end;flex-direction:row-reverse}.msg .role{font-size:16px;flex-shrink:0}.msg p{background:var(--bg-card);border:2px solid var(--border);padding:10px 14px;line-height:1.8;font-size:10px;white-space:pre-wrap;word-break:break-word}.msg .msg-content{background:var(--bg-card);border:2px solid var(--border);padding:10px 14px;line-height:1.8;font-size:10px;word-break:break-word}.msg .msg-content h1,.msg .msg-content h2,.msg .msg-content h3{color:var(--gold);margin:8px 0 4px}.msg .msg-content code{background:var(--bg-dark);padding:2px 6px;font-size:12px}.msg .msg-content pre{background:var(--bg-dark);padding:10px;overflow-x:auto;margin:8px 0}.msg .msg-content ul,.msg .msg-content ol{padding-left:20px;margin:4px 0}.msg .msg-content p{margin:4px 0;background:none;border:none;padding:0}.msg.user p{background:var(--bg-input);border-color:var(--purple)}.metrics{display:flex;gap:14px;margin-top:6px;padding-top:6px;border-top:1px solid var(--border);font-size:8px}.metrics span{display:flex;align-items:center;gap:4px}.metrics span svg{font-size:14px}.metric-latency{color:#4ecdc4}.metric-input{color:#45b7d1}.metric-output{color:#f7b731}.metric-cost{color:#fc5c65}.header-controls{display:flex;gap:8px}.lang-selector{display:flex;gap:6px;margin-top:16px;justify-content:center}.lang-selector button{background:var(--bg-input);border:2px solid var(--border);color:var(--text-dim);font-family:inherit;font-size:9px;padding:6px 10px;cursor:pointer}.lang-selector button.active{border-color:var(--purple-glow);color:var(--gold)}.mode-btn{background:var(--bg-input);border:2px solid var(--border);color:var(--text-dim);font-family:inherit;font-size:9px;padding:6px 10px;cursor:pointer}.mode-btn.active{border-color:var(--purple-glow);color:var(--gold)}.compare-container{flex:1;overflow-y:auto;padding:16px}.compare-loader{display:flex;justify-content:center;padding:40px}.compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.compare-prompt{display:flex;align-items:center;gap:10px;background:var(--bg-input);border:2px solid var(--purple);padding:10px 14px;margin-bottom:12px;font-size:10px}.compare-card{background:var(--bg-card);border:2px solid var(--border);padding:12px;overflow-y:auto;max-height:70vh}.compare-card h3{color:var(--gold);font-size:9px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}.compare-body{font-size:9px;line-height:1.7;word-break:break-word}.compare-body p{margin:4px 0}.compare-body code{background:var(--bg-dark);padding:2px 4px;font-size:8px}.compare-body pre{background:var(--bg-dark);padding:8px;overflow-x:auto;margin:6px 0}.msg.assistant p{border-color:var(--border);color:var(--text)}.loader{display:flex;gap:6px;padding:12px}.loader span{width:8px;height:8px;background:var(--purple-glow);animation:blink 1s infinite}.loader span:nth-child(2){animation-delay:.2s}.loader span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,to{opacity:.2}50%{opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.input-bar{display:flex;gap:8px;padding:12px 16px;background:var(--bg-card);border-top:3px solid var(--purple)}.input-bar input{flex:1;padding:10px 14px;background:var(--bg-input);border:2px solid var(--border);color:var(--text);font-family:inherit;font-size:13px}.input-bar input:focus{outline:none;border-color:var(--purple-glow);box-shadow:0 0 8px #9d4edd4d}.input-bar button{padding:10px 16px;background:var(--purple);border:2px solid var(--purple-glow);color:var(--gold);font-size:14px;cursor:pointer;transition:all .2s}.input-bar button:hover:not(:disabled){background:var(--purple-glow);box-shadow:0 0 12px #9d4edd80}.input-bar button:disabled{opacity:.5;cursor:not-allowed}.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-track{background:var(--bg-dark)}.messages::-webkit-scrollbar-thumb{background:var(--purple)}.eval-container{flex:1;overflow-y:auto;padding:16px}.eval-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.eval-run-btn{background:var(--purple);border:2px solid var(--purple-glow);color:var(--gold);font-family:inherit;font-size:10px;padding:8px 16px;cursor:pointer}.eval-run-btn:hover:not(:disabled){background:var(--purple-glow)}.eval-run-btn:disabled{opacity:.7;cursor:wait}.eval-info{color:var(--text-dim);font-size:8px}.eval-summary,.eval-details{margin-bottom:16px}.eval-summary h3,.eval-details h3{color:var(--gold);font-size:10px;margin-bottom:8px}.eval-container table{width:100%;border-collapse:collapse;font-size:8px}.eval-container th{background:var(--bg-input);color:var(--purple-glow);padding:6px 8px;text-align:left;border:1px solid var(--border)}.eval-container td{padding:6px 8px;border:1px solid var(--border);vertical-align:top}.eval-container .score{text-align:center;font-weight:700;color:var(--gold)}.eval-container .cell-prompt{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eval-container .cell-response{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}