:root{
  --bg:#f4f7fb; --card:#fff; --ink:#172033; --muted:#657086;
  --line:#dbe3ef; --accent:#2857c5; --soft:#eef3ff;
  --success:#16794b; --error:#9b2525;
}
*{box-sizing:border-box}
.chemistry-tools-iupac-structure-to-name{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45}
.chemistry-tools-iupac-structure-to-name .page{max-width:950px;margin:auto;padding:30px 18px 50px}
h1{margin:0 0 6px;font-size:clamp(28px,4vw,40px)}
.chemistry-tools-iupac-structure-to-name .subtitle{color:var(--muted);margin:0 0 22px}
.chemistry-tools-iupac-structure-to-name .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 4px 18px rgba(30,55,90,.05);margin-bottom:18px}
.chemistry-tools-iupac-structure-to-name .toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.chemistry-tools-iupac-structure-to-name .field{flex:1;min-width:200px}
.chemistry-tools-iupac-structure-to-name label{display:block;font-weight:700;margin-bottom:6px}
.chemistry-tools-iupac-structure-to-name select,input{width:100%;padding:11px 12px;border:1px solid #bcc8da;border-radius:9px;font-size:16px;background:#fff}
.chemistry-tools-iupac-structure-to-name button{padding:12px 18px;border:0;border-radius:9px;background:var(--accent);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.chemistry-tools-iupac-structure-to-name button.secondary{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.chemistry-tools-iupac-structure-to-name button:hover{filter:brightness(.96)}
.chemistry-tools-iupac-structure-to-name .structure-wrap{text-align:center;padding:24px 8px 10px;overflow:auto}
.chemistry-tools-iupac-structure-to-name svg{max-width:100%;height:auto}
.chemistry-tools-iupac-structure-to-name .question{font-size:18px;font-weight:700;margin:8px 0 14px}
.chemistry-tools-iupac-structure-to-name .answer-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.chemistry-tools-iupac-structure-to-name .feedback{margin-top:14px;padding:13px;border-radius:9px;display:none}
.chemistry-tools-iupac-structure-to-name .feedback.good{display:block;background:#eefaf4;border:1px solid #ccebdc;color:var(--success)}
.chemistry-tools-iupac-structure-to-name .feedback.bad{display:block;background:#fff2f2;border:1px solid #efc7c7;color:var(--error)}
.chemistry-tools-iupac-structure-to-name .explanation{margin-top:10px;color:var(--ink)}
.chemistry-tools-iupac-structure-to-name .score{font-weight:700;color:var(--muted)}
@media(max-width:650px){.chemistry-tools-iupac-structure-to-name .answer-row{grid-template-columns:1fr}.answer-row .chemistry-tools-iupac-structure-to-name button{width:100%}}
.chemistry-tools-iupac-structure-to-name .stn-question-field{max-width:170px;min-width:150px}
.chemistry-tools-iupac-structure-to-name .stn-nav-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:end}