:root{
	--bg:#0f0f12;
	--panel:#1b1b1f;
	--muted:#bfc3c8;
	--accent:#ffcc00;
}
*{box-sizing:border-box;font-family:Segoe UI,Arial,Helvetica,sans-serif}
body{margin:0;background:linear-gradient(180deg,#0b0b0d 0%, #111 100%);color:var(--muted);min-height:100vh;padding:24px}
.container{max-width:920px;margin:0 auto;background:var(--panel);padding:18px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.6)}
h1{margin:0 0 12px;color:#fff;font-size:20px}
.controls{display:grid;gap:10px}
textarea#message{width:100%;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,.06);background:#0c0c0e;color:#fff;font-size:14px}
.char-meta{margin-top:6px;color:var(--muted);font-size:13px;text-align:right}
.char-meta .over{color:#ff6b6b}
.limit-flash{box-shadow:0 0 0 3px rgba(255,107,107,0.06) inset}
.palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.swatch{width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#000;font-weight:700;cursor:pointer;border:2px solid rgba(0,0,0,.25);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.swatch:hover{outline:2px solid rgba(255,255,255,.08)}
.actions{display:flex;gap:8px;margin-top:8px}
button{background:#242428;border:1px solid rgba(255,255,255,.04);color:var(--muted);padding:8px 10px;border-radius:6px;cursor:pointer}
button:hover{background:#2c2c31}
.preview{margin-top:16px}
.preview-box{min-height:60px;padding:10px;border-radius:6px;background:#080808;border:1px solid rgba(255,255,255,.03);color:#fff}
.preview-box{
	white-space:pre-wrap; /* preserve newlines and wrap long lines */
	overflow-wrap:anywhere; /* break long words/strings */
	word-break:break-word;
	max-width:100%;
}
.subheading{margin:12px 0 6px;color:#cfcfcf;font-size:13px}
.gradient-preview{min-height:48px;background:linear-gradient(180deg,#0b0b0d,#060606);border-style:solid;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.raw-output{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.raw-output input{background:#0b0b0d;border:1px solid rgba(255,255,255,.04);color:var(--muted);padding:8px;border-radius:6px}
.note{margin-top:14px;color:#9aa0a6;font-size:13px}

.gradient-maker{margin-top:12px;border-top:1px dashed rgba(255,255,255,.04);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.grad-controls{display:flex;gap:8px;align-items:center}
.grad-controls input[type="color"]{width:40px;height:32px;padding:2px;border-radius:6px;border:1px solid rgba(255,255,255,.04)}
.grad-output{display:flex;gap:8px;align-items:center}
.grad-output input{flex:1}

@media(min-width:700px){
	.controls{grid-template-columns:1fr}
	.raw-output{flex-direction:row}
	.raw-output label{align-self:center;margin-right:6px;color:var(--muted);font-size:13px}
	.raw-output input{flex:1}
}

.code-label{font-size:11px;color:#fff;opacity:.9}

/* Mode toggle styles */
.mode-toggle{display:flex;gap:8px;margin:10px 0}
.toggle-btn{background:#1c1c1f;border:1px solid rgba(255,255,255,.04);color:var(--muted);padding:6px 10px;border-radius:6px;cursor:pointer}
.toggle-btn.active{background:var(--accent);color:#111}
.hidden{display:none}

/* Watermark below the main tool */
.watermark{display:block;text-align:center;color:rgba(255,255,255,0.14);font-size:12px;margin:12px auto 0;user-select:none;pointer-events:none}