:root{
  --bg:#0a0a14; --card:rgba(255,255,255,.04); --border:rgba(255,255,255,.10);
  --text:#eef0ff; --muted:#9aa0c7; --violet:#A78BFA; --violet2:#6d5cff; --cyan:#4dd6ff;
  --good:#4ade80; --bad:#fb7185;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:radial-gradient(1200px 800px at 70% -10%,#1b1b3d 0%,var(--bg) 55%) fixed;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 80% 20%,#cfe,transparent),radial-gradient(1px 1px at 50% 70%,#fff,transparent),radial-gradient(1px 1px at 35% 85%,#bcf,transparent);}
.app{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:40px 20px 64px;}
.hero{text-align:center;margin-bottom:28px;}
.logo{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:600;margin-bottom:14px;}
.hero h1{font-size:clamp(24px,4.5vw,34px);line-height:1.15;margin:0 0 12px;
  background:linear-gradient(120deg,#fff,var(--violet) 60%,var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.sub{color:var(--muted);font-size:15px;line-height:1.6;margin:0 auto;max-width:520px;}
.sub strong{color:var(--text);}

.editor{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px;backdrop-filter:blur(6px);}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
@media (max-width:640px){.meta-grid{grid-template-columns:1fr;}}
.meta-grid label,.ms-label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);}
.meta-grid input,.meta-grid select{
  background:rgba(0,0,0,.28);border:1px solid var(--border);border-radius:10px;color:var(--text);
  padding:10px 12px;font-size:14px;font-family:inherit;}
.meta-grid input:focus,.meta-grid select:focus,textarea:focus{outline:none;border-color:var(--violet);}
.ms-label{margin-bottom:6px;}
.ms-label .hint{color:var(--muted);font-weight:400;}
.ms-label code{background:rgba(0,0,0,.3);padding:1px 5px;border-radius:5px;font-size:12px;}
textarea{width:100%;height:300px;resize:vertical;background:rgba(0,0,0,.3);color:#dfe;
  border:1px solid var(--border);border-radius:12px;padding:14px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;}
.actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;}
.btn{border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);
  padding:11px 20px;border-radius:11px;font-size:14.5px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .08s,background .15s;}
.btn:hover{background:rgba(255,255,255,.10);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.5;cursor:default;}
.btn-primary{background:linear-gradient(120deg,var(--violet),var(--violet2));border-color:transparent;color:#fff;}
.btn-primary:hover{background:linear-gradient(120deg,#9a8bff,#7d6cff);}
.btn-ghost{background:transparent;}
.btn-lg{padding:13px 26px;font-size:15px;}
.cover-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.btn-cover{padding:8px 14px;font-size:13px;}
.cover-name{font-size:12.5px;color:var(--violet);}
.status{font-size:13px;color:var(--muted);}
.status.ok{color:var(--good);}
.status.err{color:var(--bad);}

.preview-wrap{margin-top:22px;}
.preview{width:100%;height:640px;border:1px solid var(--border);border-radius:14px;background:#fff;}
.footer{margin-top:40px;text-align:center;color:var(--muted);font-size:12.5px;}
.dot{opacity:.5;margin:0 6px;}