*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
--bg:#f0f2f7;
--white:#ffffff;
--text:#0f1117;
--text2:#6b7280;
--text3:#9ca3af;
--accent:#2563eb;
--accent-light:rgba(37,99,235,0.08);
--accent-mid:rgba(37,99,235,0.2);
--border:rgba(0,0,0,0.07);
--border2:rgba(0,0,0,0.12);
--glass:rgba(255,255,255,0.65);
--glass2:rgba(255,255,255,0.45);
--glass-border:rgba(255,255,255,0.8);
--bubble-ai:rgba(255,255,255,0.75);
--bubble-user:#2563eb;
--hint-bg:rgba(254,252,232,0.9);
--hint-border:rgba(253,230,138,0.8);
--hint-text:#78350f;
--success:#059669;
--danger:#dc2626;
--shadow:0 2px 16px rgba(0,0,0,0.06);
--shadow2:0 16px 48px rgba(0,0,0,0.14);
--r:18px;--r2:12px;--r3:8px;
}

[data-theme="dark"]{
--bg:#0d0f18;
--white:#161922;
--text:#e8eaf0;
--text2:#8892a0;
--text3:#505868;
--border:rgba(255,255,255,0.06);
--border2:rgba(255,255,255,0.1);
--glass:rgba(22,25,34,0.72);
--glass2:rgba(22,25,34,0.55);
--glass-border:rgba(255,255,255,0.08);
--bubble-ai:rgba(255,255,255,0.05);
--accent-light:rgba(37,99,235,0.12);
--accent-mid:rgba(37,99,235,0.25);
--shadow:0 2px 16px rgba(0,0,0,0.3);
--shadow2:0 16px 48px rgba(0,0,0,0.5);
}

html,body{height:100%}

body{
background:var(--bg);
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
padding:20px 14px 24px;
transition:background 0.3s,color 0.3s;
}

.topbar{
width:100%;
max-width:960px;
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:4px;
}

.brand{
font-size:18px;
font-weight:800;
color:var(--text);
letter-spacing:2px;
}

.brand span{
color:var(--accent);
}

.theme-btn{
width:42px;height:42px;
border-radius:50%;
background:var(--glass);
border:1px solid var(--glass-border);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.2s;
box-shadow:var(--shadow);
color:var(--text2);
font-size:15px;
}

.theme-btn:hover{
background:var(--glass2);
color:var(--text);
}

.sub-line{
width:100%;
max-width:960px;
font-size:12px;
color:var(--text3);
margin-bottom:16px;
letter-spacing:0.3px;
}

.wrap{
width:100%;
max-width:960px;
display:flex;
flex-direction:column;
gap:16px;
}

.layout{
display:flex;
gap:16px;
align-items:flex-start;
}

.sidebar{
width:206px;
flex-shrink:0;
display:flex;
flex-direction:column;
gap:12px;
}

.glass-card{
background:var(--glass);
border:1px solid var(--glass-border);
border-radius:var(--r);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:var(--shadow);
transition:background 0.3s,border 0.3s;
}

.score-card{padding:20px 16px;text-align:center}

.score-label{
font-size:10px;
letter-spacing:2px;
color:var(--text3);
text-transform:uppercase;
margin-bottom:8px;
}

.score-num{
font-size:52px;
font-weight:900;
line-height:1;
color:var(--accent);
font-variant-numeric:tabular-nums;
}

.score-unit{font-size:12px;color:var(--text3);margin-top:4px}

.divider{height:1px;background:var(--border2);margin:12px 0}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.stat{
background:rgba(0,0,0,0.03);
border-radius:var(--r3);
padding:10px 6px;
text-align:center;
}

[data-theme="dark"] .stat{background:rgba(255,255,255,0.04)}

.stat-n{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.stat-t{font-size:10px;color:var(--text3);margin-top:3px}

.btn-group{padding:12px;display:flex;flex-direction:column;gap:8px}

button{cursor:pointer;border:none;outline:none;font-family:inherit;transition:all 0.15s ease}
button:active{transform:scale(0.97)}

.btn{width:100%;padding:11px 14px;border-radius:var(--r3);font-size:13px;font-weight:600}

.btn-primary{
background:var(--accent);
color:#fff;
box-shadow:0 2px 12px rgba(37,99,235,0.28);
}
.btn-primary:hover{background:#1d4ed8;box-shadow:0 4px 18px rgba(37,99,235,0.4)}

.btn-secondary{
background:rgba(0,0,0,0.04);
color:var(--text);
border:1px solid var(--border2);
}
[data-theme="dark"] .btn-secondary{background:rgba(255,255,255,0.06)}
.btn-secondary:hover{background:rgba(0,0,0,0.07)}
[data-theme="dark"] .btn-secondary:hover{background:rgba(255,255,255,0.09)}

.btn-ghost{
background:transparent;
color:var(--text3);
border:1px solid var(--border);
font-weight:400;
}
.btn-ghost:hover{color:var(--text2);border-color:var(--border2)}

.chat-area{flex:1;min-width:0}

.chat-box{
height:66vh;
min-height:340px;
display:flex;
flex-direction:column;
overflow:hidden;
}

.messages{
flex:1;
overflow-y:auto;
padding:16px;
display:flex;
flex-direction:column;
gap:12px;
scroll-behavior:smooth;
}

.messages::-webkit-scrollbar{width:4px}
.messages::-webkit-scrollbar-thumb{background:var(--border2);border-radius:10px}

.msg{display:flex;gap:8px;animation:msgIn 0.2s ease-out both}

@keyframes msgIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}

.msg.ai{align-self:flex-start;max-width:88%}
.msg.user{align-self:flex-end;max-width:88%;flex-direction:row-reverse}

.avatar{
width:28px;height:28px;
border-radius:50%;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
font-weight:700;
margin-top:2px;
}

.msg.ai .avatar{
background:var(--accent-light);
color:var(--accent);
border:1px solid var(--accent-mid);
}

.msg.user .avatar{
background:rgba(0,0,0,0.15);
color:var(--text);
border:1px solid var(--border2);
}

[data-theme="dark"] .msg.user .avatar{
background:rgba(255,255,255,0.1);
}

.bubble{
padding:10px 14px;
border-radius:var(--r2);
font-size:14px;
line-height:1.7;
word-break:break-word;
}

.msg.ai .bubble{
background:var(--bubble-ai);
color:var(--text);
border:1px solid var(--glass-border);
border-top-left-radius:4px;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}

.msg.user .bubble{
background:var(--bubble-user);
color:#fff;
border-top-right-radius:4px;
}

.bubble.hint{
background:var(--hint-bg);
border-color:var(--hint-border);
color:var(--hint-text);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}

.chat-footer{
padding:12px 14px;
border-top:1px solid var(--border2);
display:flex;
flex-direction:column;
gap:8px;
background:var(--glass2);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-radius:0 0 var(--r) var(--r);
}

.tags{display:flex;flex-wrap:wrap;gap:6px}

.tag-btn{
background:rgba(0,0,0,0.04);
border:1px solid var(--border2);
color:var(--text2);
padding:4px 11px;
border-radius:100px;
font-size:12px;
font-weight:500;
}

[data-theme="dark"] .tag-btn{background:rgba(255,255,255,0.05)}

.tag-btn:hover{
background:var(--accent-light);
color:var(--accent);
border-color:var(--accent-mid);
}

.input-row{display:flex;gap:8px}

input[type=text]{
flex:1;
background:rgba(0,0,0,0.04);
border:1px solid var(--border2);
border-radius:var(--r3);
padding:10px 14px;
font-size:14px;
font-family:inherit;
color:var(--text);
outline:none;
transition:border-color 0.15s,background 0.15s;
min-width:0;
}

[data-theme="dark"] input[type=text]{background:rgba(255,255,255,0.05)}

input[type=text]:focus{
border-color:var(--accent);
background:rgba(37,99,235,0.04);
}

input[type=text]::placeholder{color:var(--text3)}

.send-btn{
padding:10px 18px;
background:var(--accent);
color:#fff;
border-radius:var(--r3);
font-size:13px;
font-weight:600;
flex-shrink:0;
white-space:nowrap;
box-shadow:0 2px 10px rgba(37,99,235,0.25);
}
.send-btn:hover{background:#1d4ed8}

footer{text-align:center;font-size:11px;color:var(--text3)}
footer a{color:var(--text3);text-decoration:none}
footer a:hover{color:var(--text2)}

.modal-bg{
position:fixed;inset:0;
background:rgba(0,0,0,0.35);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
display:none;
justify-content:center;
align-items:center;
z-index:100;
padding:16px;
}
.modal-bg.active{display:flex}

.modal{
background:var(--glass);
border:1px solid var(--glass-border);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
width:100%;
max-width:340px;
border-radius:20px;
padding:28px 24px;
display:flex;
flex-direction:column;
gap:16px;
box-shadow:var(--shadow2);
animation:popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes popIn{
from{transform:scale(0.9) translateY(14px);opacity:0}
to{transform:scale(1) translateY(0);opacity:1}
}

.modal-title{font-size:20px;font-weight:800;text-align:center}

.modal-body{
background:rgba(0,0,0,0.04);
border:1px solid var(--border);
border-radius:var(--r2);
padding:16px;
font-size:14px;
line-height:1.9;
}

[data-theme="dark"] .modal-body{background:rgba(255,255,255,0.04)}

.loader{
position:fixed;inset:0;
background:rgba(255,255,255,0.6);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:999;
}

[data-theme="dark"] .loader{background:rgba(13,15,24,0.7)}
.loader.active{display:flex}

.spin{
width:30px;height:30px;
border:2px solid var(--border2);
border-top-color:var(--accent);
border-radius:50%;
animation:spin 0.75s linear infinite;
margin-bottom:12px;
}

@keyframes spin{to{transform:rotate(360deg)}}
.loader-t{font-size:13px;color:var(--text2)}

@media(max-width:680px){
body{padding:14px 10px 20px}
.layout{flex-direction:column;gap:12px}
.sidebar{width:100%;flex-direction:row;flex-wrap:wrap;gap:10px}
.score-card{flex:1;min-width:150px;padding:14px 12px}
.score-num{font-size:40px}
.btn-group{flex:1;min-width:140px}
.chat-box{height:52vh;min-height:280px}
.divider{margin:10px 0}
}

@media(max-width:420px){
.sidebar{flex-direction:column}
.score-card,.btn-group{width:100%;min-width:unset}
.btn-group{flex-direction:row;flex-wrap:wrap}
.btn-group .btn{flex:1;min-width:70px;padding:10px 4px;font-size:12px}
.input-row{flex-direction:column}
.send-btn{width:100%;padding:10px}
.tags{display:none}
.chat-box{height:48vh}
}