:root{
  --bg:#0b1220; --panel:#0f172a; --muted:#94a3b8; --text:#e5e7eb; --accent:#2563eb; --accent-2:#1d4ed8; --ring:#60a5fa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text); background:linear-gradient(180deg,#0b1220 0%, #0b1220 60%, #0d1530 100%);
}
.hidden{ display:none !important }
.app-bar{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:rgba(15,23,42,.8); backdrop-filter: blur(10px); border-bottom:1px solid #1f2a44;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.logo{font-size:20px}
.title{letter-spacing:.3px}
.actions{display:flex; gap:8px}
.btn{
  border:none; border-radius:999px; padding:10px 14px; background:var(--accent); color:white; font-weight:600; cursor:pointer;
  transition:transform .05s ease, background .2s ease; box-shadow:0 6px 20px rgba(37,99,235,.25);
}
.btn:active{ transform:translateY(1px) }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid #23304f; box-shadow:none }
.btn.ghost:hover{ background:#18223a }
.grid{
  display:grid; grid-template-columns:1fr; gap:14px; padding:14px; max-width:980px; margin:0 auto;
}
@media(min-width:860px){ .grid{ grid-template-columns:1fr 1fr } }
.panel{
  background:var(--panel); border:1px solid #1f2a44; border-radius:18px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.panel-title{ display:block; font-size:14px; color:var(--muted); margin-bottom:8px }
.editor{
  min-height:40vh; max-height:52vh; overflow:auto; padding:12px; line-height:1.6; border-radius:12px;
  border:1px solid #223152; outline:none; background:#0c1428;
}
.editor:focus{ border-color:var(--ring); box-shadow:0 0 0 4px rgba(96,165,250,.15) }
.helper{ margin-top:8px; color:var(--muted); font-size:12px }
.preview{
  min-height:40vh; max-height:52vh; overflow:auto; border:1px dashed #223152; border-radius:12px; padding:12px; background:#0b1426;
}
.preview .token{
  display:inline-block; margin:0 8px 12px 0; padding:6px 10px; border-radius:10px; background:#101b36; border:1px solid #1e2a4b;
}
.preview .thword{
  font-size: calc(16px + 4pt);
  text-decoration: none;
  color: #e5e7eb;
  display:inline-block;
}
.preview .thword:hover{ text-decoration: underline; }
.status{ margin-top:8px; font-size:12px; color:var(--muted) }
.footer{ text-align:center; padding:20px; color:#7b8ab5 }
dialog{ border:none; border-radius:16px; padding:0; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5) }
.settings{ background:#0f172a; color:var(--text); padding:16px; width:min(92vw,520px) }
.settings h2{ margin:0 0 10px }
.settings label{ display:block; font-size:14px; margin:10px 0 6px }
.settings input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #223152; background:#0c1428; color:var(--text) }
.settings menu{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px }
.hint{ color:var(--muted); font-size:12px }