:root { color-scheme: light dark; --bg:#f5f7fb; --card:#fff; --text:#172033; --muted:#596579; --line:#dce3ed; --accent:#2257d6; --soft:#edf2ff; --ok:#167349; --warn:#956000; --bad:#ba3030; }
@media(prefers-color-scheme:dark) { :root { --bg:#111722; --card:#1a2230; --text:#e7edf7; --muted:#aab6c9; --line:#334053; --accent:#89acff; --soft:#222f49; --ok:#80dfb0; --warn:#f3cb7b; --bad:#ffacac; } }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font:15px/1.65 system-ui,sans-serif; }
header { border-bottom:1px solid var(--line); background:var(--card); } .header-inner { max-width:1040px; margin:auto; padding:17px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
header strong { font-size:16px; } main { max-width:1040px; padding:32px 24px 48px; margin:auto; } h1 { font-size:30px; line-height:1.3; margin:0 0 10px; letter-spacing:-.04em; } h2 { font-size:18px; margin:0 0 14px; } h3 { font-size:15px; margin:0 0 8px; } p { margin:8px 0; }
.intro { margin-bottom:24px; } .muted { color:var(--muted); } .small { font-size:13px; } .columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:20px; align-items:start; } .stack { display:grid; gap:20px; }
.card { padding:24px; border:1px solid var(--line); background:var(--card); border-radius:14px; min-width:0; } .row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .between { justify-content:space-between; } .badge { border:1px solid var(--line); border-radius:99px; padding:3px 10px; font-size:12px; white-space:nowrap; }
.notice { border:1px solid var(--line); background:var(--soft); padding:12px 14px; border-radius:8px; margin:12px 0; overflow-wrap:anywhere; } .ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); } .hidden { display:none!important; }
label { display:block; margin:14px 0; font-size:13px; color:var(--muted); } input,textarea { display:block; width:100%; border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:7px; padding:10px 12px; font:inherit; margin-top:5px; } textarea { resize:vertical; min-height:100px; }
button { border:1px solid var(--line); border-radius:7px; padding:9px 13px; font:inherit; font-size:13px; color:var(--text); background:var(--card); cursor:pointer; } button.primary { background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; } button:disabled { opacity:.5; cursor:not-allowed; } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
details { margin-top:14px; } summary { cursor:pointer; font-size:13px; color:var(--muted); } dl { margin:0; } dt { color:var(--muted); font-size:12px; margin-top:14px; } dd { margin:3px 0 0; overflow-wrap:anywhere; } code,pre { font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; } pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--bg); margin:8px 0; }
.copy-row { display:flex; gap:8px; align-items:center; } .copy-row input { min-width:0; flex:1; margin:0; font-family:ui-monospace,monospace; font-size:12px; } .copy-row button { flex:none; }
#chatLog { min-height:210px; max-height:530px; overflow:auto; border:1px solid var(--line); background:var(--bg); border-radius:9px; padding:14px; scrollbar-gutter:stable; } .message { margin-bottom:18px; } .message:last-child { margin-bottom:0; } .message-label { font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; } .message-body,.reasoning { white-space:pre-wrap; overflow-wrap:anywhere; } .message.user .message-body { background:var(--soft); padding:9px 12px; border-radius:8px; } .message details { margin:5px 0 10px; } .reasoning { font-size:13px; color:var(--muted); border-left:2px solid var(--line); padding-left:10px; margin-top:8px; }
#chatStatus { min-height:24px; } #globalStatus { min-height:24px; } .footer { margin-top:20px; font-size:12px; color:var(--muted); }
@media(max-width:760px) { .columns { grid-template-columns:1fr; } main { padding:24px 16px; } .header-inner { padding:14px 16px; } .card { padding:20px; } h1 { font-size:26px; } #chatLog { max-height:440px; } }
.model-card { margin-bottom:20px; }