/* Un-ChatGPT — keeps your dark gradient palette */
body{margin:0;font-family:Arial,sans-serif;background:linear-gradient(to right,#0f2027,#203a43,#2c5364);color:#fff;transition:all .3s ease}
nav{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#1f1f1f}
nav a{color:#fff;text-decoration:none;margin-left:1rem;font-weight:600}
header{text-align:center;padding:3rem 1rem;background:linear-gradient(to right,#203a43,#2c5364)}
header h1{font-size:2.5rem;margin-bottom:.5rem}
header p{font-size:1.2rem;margin-top:0}
.hero-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.hero-cta button{padding:.8rem 1.2rem;background:#ff5722;border:none;border-radius:6px;color:#fff;cursor:pointer;font-weight:700}

.section{padding:2rem 1rem;max-width:980px;margin:0 auto}
textarea{width:100%;min-height:150px;padding:1rem;margin-bottom:1rem;border-radius:8px;border:none;font-size:1rem;resize:vertical}

button.tool-btn{padding:.8rem 1.2rem;margin:.3rem;background:#ff5722;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:.2s}
button.tool-btn:hover{background:#e64a19}

.output,.sample-box{background:#1a1a1a;padding:1rem;border-radius:8px;white-space:pre-wrap;word-wrap:break-word;margin-top:1rem}

.toggle{margin-top:1rem;display:flex;align-items:center}
.toggle label{margin-right:.5rem}

.loader{display:none;border:4px solid #f3f3f3;border-top:4px solid #ff5722;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:1rem auto}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

footer{text-align:center;padding:2rem 1rem;background:#1f1f1f;color:#ccc;margin-top:2rem}
#countDisplay{margin-bottom:1rem;font-size:.9rem;color:#ccc}

input#modeSwitch{transform:scale(1.2)}
.controls-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.controls-left{display:flex;align-items:center;gap:.5rem}
.controls-right{display:flex;align-items:center;gap:.5rem}

/* score bars */
.score-wrap{margin:.5rem 0 1rem;display:grid;gap:.4rem}
.score-line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem}
.score-bar{height:8px;background:#0f2027;border-radius:999px;overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.score-bar>div{height:100%;width:0%;background:#2ecc71;transition:width .35s ease}

.muted{color:#cbd5e1}

/* responsive */
@media(max-width:768px){
  header h1{font-size:2rem}
  header p{font-size:1rem}
}