/* 投稿页沿用素材库页的颜色与字体，单独成文件，不加载素材库的整套样式。 */
:root{
  color-scheme:light;
  --bg:#fff; --ink:#181818; --text:#5f5f5b; --light:#6b6b66;
  --border:#e6e6e2; --border-bold:#c9c9c3; --gray-bg:#f7f7f4;
  --accent:#1e7a44; --accent-soft:#e9f2ec; --danger:#a3341f;
  --sans:Arial,Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:.9375rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
[hidden]{display:none!important}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.bar{padding:.375rem 1.375rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;color:var(--light)}
.bar a{min-height:2.75rem;display:inline-flex;align-items:center;padding:0 .25rem;text-decoration:none;transition:color .12s}
.bar a:hover{color:var(--ink)}

main{max-width:42rem;margin:0 auto;padding:2.5rem 1.375rem 6rem}
.to{font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;color:var(--light);margin-bottom:.5rem}
h1{font-size:2rem;line-height:1.2;letter-spacing:-.02em}
.lead{margin-top:.75rem;color:var(--text)}
form{margin-top:2.25rem}

.composer{border:1px solid var(--border-bold);transition:border-color .12s,background .12s}
.composer:focus-within{border-color:var(--ink)}
.composer.dragging{border-color:var(--accent);border-style:dashed;background:var(--accent-soft)}
.composer textarea{display:block;width:100%;min-height:9rem;border:0;resize:vertical;padding:1rem;font:inherit;line-height:1.7;color:inherit;background:transparent;outline:none}
.composer textarea::placeholder{color:var(--light)}
.composer textarea:disabled{color:var(--text)}
.files{list-style:none;border-top:1px solid var(--border)}
.files li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1rem;min-height:2.75rem;padding:.375rem .5rem .375rem 1rem;border-bottom:1px solid var(--border)}
.files li:last-child{border-bottom:0}
.f-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-meta{font-family:var(--mono);font-size:.6875rem;color:var(--light);white-space:nowrap}
.f-done .f-meta{color:var(--accent)}
.f-missing .f-meta,.f-failed .f-meta{color:var(--danger)}
.f-remove{min-width:2.75rem;min-height:2.25rem;border:0;background:none;color:var(--light);font-size:.8125rem}
.f-remove:hover{color:var(--ink)}
.f-bar{position:absolute;left:0;bottom:0;height:2px;width:calc(var(--p,0) * 100%);background:var(--accent);transition:width .2s}
.composer-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.5rem;border-top:1px solid var(--border);background:var(--gray-bg)}
.pick{min-height:2.75rem;display:inline-flex;align-items:center;padding:0 1rem;border:1px solid var(--border-bold);background:var(--bg);font-size:.875rem;cursor:pointer;flex:none}
.pick:hover{border-color:var(--ink)}
.pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.pick.disabled{opacity:.45;cursor:default;pointer-events:none}
#detected{min-width:0;padding-right:.5rem;font-size:.8125rem;color:var(--text);text-align:right;overflow-wrap:anywhere}
.hint{margin-top:.5rem;font-size:.75rem;color:var(--light)}

.field{display:block;margin-top:2rem;font-size:.875rem}
.opt{margin-left:.5rem;font-size:.75rem;color:var(--light)}
.opt.required{color:var(--ink)}
.field input{display:block;width:100%;margin-top:.25rem;padding:.5rem 0;border:0;border-bottom:1px solid var(--border-bold);border-radius:0;background:transparent;font:inherit;font-size:.9375rem;color:inherit}
.field input:focus{outline:none;border-bottom-color:var(--ink)}
.field input::placeholder{color:var(--light)}

fieldset{border:0;margin-top:2.5rem;min-width:0}
legend{font-size:.875rem;margin-bottom:.75rem}
.licenses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.license{position:relative;display:flex;flex-direction:column;gap:.125rem;padding:.75rem .875rem;border:1px solid var(--border);cursor:pointer;transition:border-color .12s}
.license:hover{border-color:var(--border-bold)}
.license input{position:absolute;opacity:0;pointer-events:none}
.license:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.license:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.license:has(input:disabled){cursor:default}
.l-name{font-size:.875rem;font-weight:600}
.l-tag{font-size:.8125rem;color:var(--text)}
.license-note{margin-top:.75rem;font-size:.8125rem;color:var(--text)}
.license-note a{margin-left:.375rem;color:var(--light);text-underline-offset:3px}
.consent{display:flex;align-items:flex-start;gap:.625rem;margin-top:1.75rem;font-size:.875rem;cursor:pointer}
.consent input{flex:none;width:1rem;height:1rem;margin-top:.25rem;accent-color:var(--ink)}
.note{margin-top:2rem;padding:.75rem 1rem;background:var(--gray-bg);font-size:.8125rem;color:var(--text)}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:2.5rem}
.primary{min-height:2.75rem;padding:0 1.75rem;border:1px solid var(--ink);background:var(--ink);color:#fff}
.primary:disabled{opacity:.4;cursor:default}
.secondary{min-height:2.75rem;padding:0 1.25rem;border:1px solid var(--border-bold);background:var(--bg)}
.secondary:hover{border-color:var(--ink)}
.quiet{min-height:2.75rem;display:inline-flex;align-items:center;padding:0 .25rem;border:0;background:none;color:var(--light);font-size:.875rem;text-decoration:underline;text-underline-offset:3px}
.quiet:hover{color:var(--ink)}
#status{margin-top:1rem;min-height:1.6em;font-size:.875rem;color:var(--text)}
#status.error{color:var(--danger)}

#done{margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--border);outline:none}
#done h2{font-size:1.5rem;line-height:1.3}
#done p{margin-top:.5rem;color:var(--text)}

@media (max-width:560px){
  main{padding:1.5rem 1rem 4rem}
  h1{font-size:1.625rem}
  .licenses{grid-template-columns:1fr}
  .composer-bar{flex-wrap:wrap}
  #detected{text-align:left;padding:0 .25rem}
}