:root{
  --bg:#FBFBF9; --surface:#FFFFFF; --border:#E7E4DB; --text:#23251D;
  --muted:#6C6F61; --accent:#0F6E56; --accent-soft:#E2F4EE; --accent-line:#0F6E56;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  padding:20px 16px 48px;
}
.wrap{max-width:680px;margin:0 auto}

/* header */
.top h1{font-size:25px;font-weight:600;letter-spacing:-0.01em}
.top .sub{color:var(--muted);margin-top:6px;font-size:15px}

/* tool card */
.tool{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:22px;margin-top:22px;
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field > span{font-size:13px;color:var(--muted)}
.field .hintq{font-size:11px;color:var(--accent);font-weight:500}
input,select,textarea{
  font-size:16px;padding:12px 14px;border:1px solid var(--border);
  border-radius:10px;width:100%;background:#fff;color:var(--text);
  font-family:inherit;
}
textarea{resize:vertical;min-height:84px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}

.gen{
  margin-top:4px;padding:13px 18px;border:none;border-radius:10px;
  background:var(--accent);color:#fff;font-size:15px;cursor:pointer;width:100%;font-weight:600;
}
.gen:active{transform:translateY(1px)}

/* result */
.result{margin-top:18px}
.hint{color:var(--muted);font-size:14px}
.prompt-box{
  margin-top:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;white-space:pre-wrap;font-size:14px;color:#33352B;word-break:break-word;
}
.copy{
  margin-top:12px;padding:11px 18px;border:none;border-radius:10px;
  background:var(--accent);color:#fff;font-size:15px;cursor:pointer;width:100%;
}
.copy:active{transform:translateY(1px)}

/* scorer */
.score{margin-top:16px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:14px 16px}
.score h3{font-size:14px;color:var(--accent);margin-bottom:8px}
.score .bar{height:8px;background:#cfe9e1;border-radius:999px;overflow:hidden;margin-bottom:8px}
.score .bar > i{display:block;height:100%;background:var(--accent);border-radius:999px}
.score ul{list-style:none;display:grid;gap:5px}
.score li{font-size:13px;color:#2c463d;display:flex;gap:7px;align-items:flex-start}
.score li::before{content:"✓";color:var(--accent);font-weight:700}
.score li.miss::before{content:"!";color:#b06a00}

/* body content */
.content{margin-top:34px}
.content h2{font-size:19px;font-weight:600;margin:26px 0 10px}
.content p{font-size:15px;color:#33352B;margin-bottom:10px}
.content code{background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:5px;font-size:13px}
.content ol,.content ul{margin:0 0 10px 20px;font-size:15px;color:#33352B}
.content details{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--surface)}
.content summary{cursor:pointer;font-size:15px;font-weight:500}
.content details p{margin-top:8px;margin-bottom:0}

.foot{color:var(--muted);font-size:12px;margin-top:32px;text-align:center}
.hidden{display:none}

/* mobile */
@media (max-width:480px){
  body{padding:16px 12px 40px}
  .top h1{font-size:22px}
  .tool{padding:18px}
}