*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080a0c;color:#f3f0e8}
body{
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.shell{width:min(860px,100%);margin:0 auto;padding:18px max(16px,env(safe-area-inset-left)) 28px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:4px 0 16px}
h1{margin:0;font-size:24px;line-height:1.1}
.back{color:#9fd2ff;text-decoration:none}
.panel{border:1px solid rgba(255,255,255,.12);background:#15191d;border-radius:8px;padding:16px}
.grid,.optional{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.optional{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
label{display:grid;gap:6px;color:#cfd5da}
span{font-size:13px;color:#9aa5ad}
input,select,textarea,button{
  width:100%;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.14);
  background:#0d1114;
  color:#f5f1e9;
  font:inherit;
}
input,select{height:42px;padding:0 12px}
input[type=file]{height:auto;padding:10px}
.file-row,.lyrics{margin-top:14px}
textarea{min-height:44vh;padding:12px;resize:vertical;line-height:1.65}
.actions{display:flex;align-items:center;gap:14px;margin-top:14px}
button{
  width:auto;
  min-width:132px;
  height:44px;
  padding:0 18px;
  background:#f2c46d;
  border-color:#f2c46d;
  color:#15110a;
  font-weight:800;
  cursor:pointer;
}
button:disabled{opacity:.6;cursor:wait}
button.secondary{background:#20262b;border-color:rgba(255,255,255,.14);color:#f5f1e9}
output{color:#b8c2ca}
output a{color:#9fd2ff}
.preview-panel{margin-top:16px}
.preview-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
h2{margin:0;font-size:20px}
.preview-head span{font-size:13px;color:#f2c46d}
.preview-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
.preview-meta span{display:grid;gap:4px;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px;color:#f5f1e9}
.preview-meta b{font-size:12px;color:#9aa5ad}
.preview-editor textarea{min-height:50vh;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang TC",monospace}
.warnings{margin-top:10px;color:#cfd5da}
.warnings p{margin:6px 0}
.warnings a{color:#9fd2ff}
@media (max-width:720px){
  .shell{padding-top:14px}
  .top{align-items:flex-start;flex-direction:column}
  .grid,.optional,.preview-meta{grid-template-columns:1fr}
  .actions{align-items:stretch;flex-direction:column}
  button{width:100%}
}