:root{--bg:#0b0b0f;--bg2:#14141c;--line:#262633;--fg:#f2f2f5;--dim:#8b8b9c;
  --acid:#d4ff3f;--hot:#ff2e6a;--cy:#22e3ff;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Zen Kaku Gothic New",system-ui,sans-serif;line-height:1.8}
a{color:var(--cy);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1240px;margin:0 auto;padding:22px 18px 80px}
h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(28px,5vw,50px);margin:0;letter-spacing:.02em}
h1 em{font-style:normal;color:var(--acid)}
.head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.head a{font-size:13px}
.lead{color:var(--dim);font-size:13px;margin:0 0 4px}
.lead b{color:var(--fg)}
.bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}
.stat{border-left:3px solid var(--acid);padding:3px 0 3px 12px;font-size:12px;color:var(--dim)}
.stat b{display:block;font-family:Anton,sans-serif;font-size:24px;color:var(--fg);line-height:1}
.go{margin-left:auto;background:var(--hot);color:#fff;border:0;border-radius:999px;padding:13px 26px;font-weight:700;font-size:14px;cursor:pointer;transition:.2s var(--ease)}
.go:hover{background:var(--acid);color:#0b0b0f;transform:translateY(-2px)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--dim);font-weight:400;font-size:11px;padding:8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.on{background:rgba(212,255,63,.06)}
.nm a{color:var(--fg);display:block}.nm a:hover{color:var(--acid);text-decoration:none}
.nm b{display:block}.nm small{color:var(--dim);font-size:11px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.no{color:#555}
.st{background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:11px;cursor:pointer;margin-right:4px;transition:.2s}
.st:hover{border-color:var(--fg);color:var(--fg)}
.st.cur0{background:#333;color:#fff;border-color:#333}
.st.cur1{background:var(--acid);color:#0b0b0f;border-color:var(--acid);font-weight:700}
.mini{background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:4px 9px;font-size:10px;cursor:pointer;display:inline-block}
.mini:hover{border-color:var(--fg);color:var(--fg);text-decoration:none}
.mini.gen{border-color:var(--hot);color:var(--hot)}
.genbox{display:flex;flex-direction:column;gap:4px;min-width:196px}
.src{color:var(--dim);font-size:10px;font-family:ui-monospace,monospace;background:#0d0d14;
  border:1px dashed var(--line);border-radius:6px;padding:4px 7px;cursor:pointer;user-select:all}
.src:hover{border-color:var(--cy);color:var(--cy)}
.paste{background:#0d0d14;border:1px solid var(--line);border-radius:6px;color:var(--fg);padding:5px 8px;font-size:10px;width:100%}
.paste:focus{outline:none;border-color:var(--acid)}
.hasaff{color:var(--acid);font-family:ui-monospace,monospace;font-size:11px}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:22px 0;font-size:13px}
.pager a,.pager .now,.pager .off{padding:7px 13px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
.pager a{color:var(--fg)}.pager a:hover{border-color:var(--acid);color:var(--acid)}
.pager .now{background:var(--acid);color:#0b0b0f;border-color:var(--acid);font-weight:700}
.pager .off{color:#3a3a46}.pager .cnt{margin-left:auto;color:var(--dim);font-size:11px}
.free{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--cy);
  border-radius:10px;padding:14px 16px;margin:16px 0;font-size:13px;white-space:pre-wrap}
fieldset{border:1px solid var(--line);border-radius:14px;padding:16px 20px 22px;margin:18px 0}
legend{color:var(--acid);font-size:12px;padding:0 8px}
label{display:block;font-size:11px;color:var(--dim);margin:12px 0 5px}
input[type=text],input[type=password]{width:100%;background:#0d0d14;border:1px solid var(--line);
  border-radius:9px;color:var(--fg);padding:10px;font-size:13px}
input:focus{outline:none;border-color:var(--acid)}
.btn{background:var(--acid);color:#0b0b0f;border:0;border-radius:999px;padding:12px 30px;font-weight:700;cursor:pointer;margin-top:18px}
.btn:hover{background:var(--hot);color:#fff}
.bm{display:inline-block;background:var(--hot);color:#fff!important;padding:13px 26px;border-radius:999px;
  font-weight:700;font-size:15px;text-decoration:none!important;cursor:grab}
.bm:hover{background:var(--acid);color:#0b0b0f!important}
.msg{background:rgba(212,255,63,.1);border:1px solid var(--acid);border-radius:10px;padding:12px;font-size:13px;margin:14px 0}
small.note{color:#5c5c70;font-size:11px;display:block;margin-top:5px}
ol{font-size:13px;line-height:2}ol code{background:#0d0d14;border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:12px}

.mini.del{border-color:#5a1a2a;color:#ff8da8}
.mini.del:hover{background:var(--hot);color:#fff;border-color:var(--hot)}

.cp{margin-top:5px;background:transparent;border:1px solid var(--line);border-radius:6px;
  color:var(--dim);font-size:10px;padding:3px 9px;cursor:pointer;font-family:inherit;transition:.2s}
.cp:hover{border-color:var(--cy);color:var(--cy)}
.cp.ok{border-color:var(--acid);color:var(--acid)}

.next{display:flex;align-items:center;gap:18px;margin:18px 0;padding:18px 22px;border-radius:16px;
  background:linear-gradient(100deg,rgba(255,46,106,.14),rgba(212,255,63,.08));border:1px solid var(--line)}
.next .nstep{font-family:Anton,sans-serif;font-size:38px;color:var(--acid);line-height:1;flex:0 0 auto}
.next .nbody{flex:1}
.next .nbody b{display:block;font-size:17px;margin-bottom:3px}
.next .nbody p{margin:0;color:var(--dim);font-size:12px;line-height:1.75}
.next .ngo{flex:0 0 auto;background:var(--hot);color:#fff!important;padding:13px 30px;border-radius:999px;
  font-weight:700;text-decoration:none!important;transition:.2s}
.next .ngo:hover{background:var(--acid);color:#0b0b0f!important;transform:translateY(-2px)}
@media(max-width:700px){.next{flex-direction:column;align-items:flex-start;gap:12px}}
/* 進み具合の帯（⓪〜⑤を全部並べ、済み=✔・今=光る） */
.prog{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 -8px}
.prog span{font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 11px;background:#0a0a10}
.prog span b{margin-right:4px}
.prog span.done{color:var(--acid);border-color:rgba(212,255,63,.35)}
.prog span.now{color:#fff;background:var(--hot);border-color:var(--hot);font-weight:700}

.next .press{margin-top:7px!important;color:var(--fg)!important;font-size:12px!important}
.next .press span{background:var(--hot);color:#fff;padding:2px 9px;border-radius:999px;font-weight:700;
  font-size:11px;white-space:nowrap}

.guide{margin:16px 0 10px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:0 16px}
.guide summary{cursor:pointer;color:var(--cy);font-size:13px;padding:13px 0;list-style:none}
.guide summary::-webkit-details-marker{display:none}
.guide summary::before{content:'▶ ';font-size:10px}
.guide[open] summary::before{content:'▼ '}
.gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;padding:6px 0 14px}
.gl > div{border-left:2px solid var(--line);padding-left:12px}
.gl b{display:block;color:var(--acid);font-size:12px;margin-bottom:3px}
.gl span{color:var(--dim);font-size:11.5px;line-height:1.95}
.gl span b{display:inline;color:var(--fg);font-size:11.5px}
.gn{color:var(--dim);font-size:11px;border-top:1px solid var(--line);padding:11px 0;margin:0;line-height:1.9}

.cp.aff{border-color:var(--acid);color:var(--acid)}
.cp.aff:hover{background:var(--acid);color:#0b0b0f}

/* クリエイター行を開いたときの作品リスト */
.mini.wks{border-color:var(--cy);color:var(--cy)}
.mini.wks:hover{background:var(--cy);color:#06202a}
tr.wkrow2 td{background:#0d0d14;padding:12px 16px}
.wklist{display:flex;flex-direction:column;gap:6px}
.wkitem{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:#101018;text-decoration:none;transition:.2s}
.wkitem:hover{border-color:var(--acid);text-decoration:none;transform:translateX(3px)}
.wkth{flex:0 0 64px;height:36px;border-radius:6px;overflow:hidden;background:#0a0a10;
  display:grid;place-items:center;border:1px solid var(--line)}
.wkth img{width:100%;height:100%;object-fit:cover;display:block}
.wkth i{color:#3a3a4a;font-style:normal;font-size:14px}
.wktx{flex:1;min-width:0;color:var(--fg);font-size:12px;line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkst{flex:0 0 auto;display:flex;gap:5px}
.wkst i{font-style:normal;font-size:9px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.wkst i.g{color:var(--acid);border-color:#2f3a16}
.wkst i.r{color:#5c5c70}
.wkgo{flex:0 0 auto;color:var(--hot);font-size:11px;font-weight:700;white-space:nowrap}
@media(max-width:700px){.wktx{font-size:11px}.wkst{display:none}}

.anav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.anav a{font-size:12px;color:var(--dim);text-decoration:none;padding:7px 13px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.anav a:hover{color:var(--fg);border-color:var(--line);text-decoration:none}
.anav a.on{background:var(--acid);color:#0b0b0f;font-weight:700;border-color:var(--acid)}
.anav a.ext{color:var(--cy)}
.anav a.out{color:#5c5c70;margin-left:6px}
.head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:6px}

i.tag{font-style:normal;font-size:9px;padding:2px 8px;border-radius:999px;border:1px solid #2f3a16;
  color:var(--acid);margin-right:4px;white-space:nowrap}

/* 一覧の「押して→取り込みボタン」系 */
.mini.act{font-size:11px;padding:5px 10px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mini.act i{font-style:normal;font-family:Anton,sans-serif;font-size:11px;line-height:1;background:var(--acid);color:#0b0b0f;border-radius:999px;width:16px;height:16px;display:inline-grid;place-items:center}
.mini.act.gen i{background:var(--hot);color:#fff}
.hint{display:block;font-size:9px;color:#6b6b80;margin-top:3px;line-height:1.5;white-space:nowrap}
.hint b{color:var(--acid);font-weight:700}
.howto{margin:12px 0 8px;font-size:12px;color:var(--dim);line-height:1.8;background:#101018;border:1px solid var(--line);border-left:3px solid var(--acid);border-radius:0 10px 10px 0;padding:10px 14px}
.howto b{color:var(--fg)}
.howto .k{display:inline-flex;gap:3px;margin-right:8px;vertical-align:middle}
.howto .k i{font-style:normal;font-family:Anton,sans-serif;font-size:11px;background:var(--acid);color:#0b0b0f;border-radius:999px;width:16px;height:16px;display:inline-grid;place-items:center}

/* 管理: 絞り込みバー・状態ミニ表示 */
.flt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:16px 0 6px}
.flt a{font-size:11px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--dim);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.flt a b{font-family:Anton,sans-serif;font-weight:400;color:var(--fg);font-size:11px}
.flt a:hover{border-color:var(--fg);color:var(--fg)}
.flt a.cur{background:var(--acid);color:#0b0b0f;border-color:var(--acid);font-weight:700}
.flt a.cur b{color:#0b0b0f}
.flt .fq{display:flex;gap:6px;align-items:center;margin-left:auto}
.flt .fq input[type=search]{background:#0a0a10;border:1px solid var(--line);border-radius:8px;color:var(--fg);padding:6px 10px;font-size:12px;width:220px;font-family:inherit}
.stc{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;justify-content:center}
.stc a{font-size:9px;color:#5c5c70;border:1px solid var(--line);border-radius:6px;padding:1px 6px;text-decoration:none;white-space:nowrap}
.stc a b{font-family:Anton,sans-serif;font-weight:400;font-size:10px}
.stc a.on{color:var(--cy);border-color:rgba(34,227,255,.35)}
.stc a.pub{color:var(--acid);border-color:rgba(212,255,63,.4)}
.stc a:hover{border-color:var(--fg);color:var(--fg)}

/* ── 管理画面のスマホ対応 ── */
html,body{max-width:100%;overflow-x:hidden}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.tscroll table{min-width:1000px}
.ctable .mini,.ctable .cp,.ctable .st,.ctable .stc a,.ctable .hint,.ctable .no{white-space:nowrap}
.ctable td{vertical-align:top}
.ctable .wks{display:inline-block}
.wrap img,.wrap video,.wrap iframe{max-width:100%}
input,textarea,select{max-width:100%}
@media(max-width:700px){
  .wrap{padding:14px 12px 60px}
  h1{font-size:clamp(22px,7vw,34px)}
  .anav a{padding:6px 9px;font-size:12px}
  .bar{flex-wrap:wrap;gap:10px}
  .stat{min-width:0}
  .next .ngo{width:100%;text-align:center}
  .flt{gap:5px}.flt .fq{margin-left:0;width:100%}.flt .fq input[type=search]{flex:1;width:auto;min-width:0}
  .howto{font-size:11px}
  .tscroll table{min-width:900px}
  .c-rate,.c-fol{display:none}
  .ctable th,.ctable td{padding:7px 6px;font-size:11px}
  .stc a{font-size:8px}
  .mini{font-size:10px;padding:4px 7px}
  .pager{flex-wrap:wrap;gap:6px}.pager .cnt{width:100%;text-align:center;margin:4px 0 0}
  .btn{width:100%}
  fieldset{padding:12px}
}

/* クリエイター一覧: 完了/未完了の色分けと未完了ボタンの点滅 */
@keyframes mfblink{0%,100%{box-shadow:0 0 0 0 rgba(255,46,106,.0);background:#2a1420;border-color:var(--hot)}50%{box-shadow:0 0 0 6px rgba(255,46,106,.35);background:#5a1d35;border-color:#fff}}
.ctable tr.row-todo .mini.gen{animation:mfblink 1.1s ease-in-out infinite;color:#fff;font-weight:700}
.ctable tr.row-done td:first-child{box-shadow:inset 4px 0 0 var(--acid)}
.ctable tr.row-todo td:first-child{box-shadow:inset 4px 0 0 var(--hot)}
.ctable tr.row-todo{background:rgba(255,46,106,.06)}
.legend{display:flex;gap:16px;font-size:12px;margin:6px 0 10px}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
