:root{
  --bg:#f6f8fb;
  --card:#fff;
  --accent:#1f6feb;
  --muted:#666;
  --radius:10px;
  font-family:Inter, Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:#111;
}
.topbar{
  padding:18px;
  text-align:center;
  background:linear-gradient(90deg,#ffffff00,#ffffff00);
  border-bottom:1px solid #eee;
}
.topbar h1{margin:0;font-size:26px}
.tag{margin:6px 0 0;color:var(--muted)}

.container{max-width:900px;margin:18px auto;padding:12px}
.card{
  background:var(--card);
  padding:16px;
  border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(16,22,37,0.04);
  margin-bottom:14px;
  border:1px solid #eee;
}
.levels{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.level-btn{
  padding:10px 14px;
  border-radius:8px;
  border:1px solid #d6dff6;
  background:#fff;
  cursor:pointer;
  transition:all 0.2s;
}
.level-btn:hover{background:#f3f6ff}
.level-btn.active{
  background:var(--accent);
  color:#fff;
  border:none;
}

.controls{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
button{
  cursor:pointer;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #dcdcdc;
  background:#fff;
  transition:all 0.2s;
}
button:hover{background:#f3f3f3}
button.primary{
  background:var(--accent);
  color:#fff;
  border:none;
}
button.primary:hover{background:#1455c9}

textarea,input{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:8px;
  margin-top:8px;
  font-size:15px;
}

.feedback{
  background:#fbfdff;
  padding:10px;
  border-radius:8px;
  border:1px solid #e6f0ff;
  margin-top:10px;
}

#analysisResult{
  margin-top:12px;
  padding:12px;
  border-radius:8px;
  background:#f9fcff;
  border:1px solid #d6e8ff;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);
}
#analysisResult p{margin:6px 0}
#analysisResult strong{color:#1f3f95}

.small{font-size:13px;color:var(--muted)}
.samples{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sample-btn{
  padding:8px;
  border-radius:8px;
  border:1px dashed #d6dff6;
  background:#fff;
  text-align:left;
  cursor:pointer;
  transition:all 0.2s;
}
.sample-btn:hover{background:#f6f9ff}
#historyList{max-height:200px;overflow:auto;padding:6px}
.msg{
  padding:6px;
  border-radius:8px;
  margin:6px 0;
  background:#f1f5ff;
  border:1px solid #e2e9ff;
}
.foot{margin:10px 0;text-align:center;color:var(--muted)}

@media (max-width:600px){
  .controls{flex-direction:column}
}