:root{--bg:#0f1115;--panel:#171923;--muted:#8b8fa3;--text:#e6e8ef;--accent:#7aa2f7;--border:#2a2f3a;--ok:#3fb950;--warn:#f2cc60;--danger:#ff6b6b}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--text);line-height:1.45}
.app{max-width:1200px;margin:0 auto;padding:24px}.app__header h1{margin:0 0 6px 0;font-size:28px}.app__header p{margin:0 0 14px 0;color:var(--muted)}
.notice{padding:10px 12px;border:1px solid var(--border);background:#1f2330;border-radius:10px;color:var(--warn)}.hidden{display:none}
.tutorial{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:14px;background:#151826}.tutorial h2{margin:0 0 10px 0;font-size:18px}.tutorial ol{margin:0 0 8px 18px}.tutorial .tip{color:var(--muted);margin:0}
.controls{margin-top:18px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.field{display:flex;flex-direction:column;gap:8px}.field .label{font-weight:600}.field small{color:var(--muted)}
input[type=file],input[type=number],input[type=range]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0f1320;color:var(--text);outline:none}input[type=range]{padding:0;height:36px}
.checkbox{margin-top:8px}.checkbox input{margin-right:8px}.radio{display:block;margin-top:10px}
.dropzone{margin-top:12px;padding:22px;border:2px dashed var(--border);border-radius:14px;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.dropzone.dragover{border-color:var(--accent);background:#12162a;color:var(--text)}
.grid{margin-top:16px;display:grid;gap:16px;grid-template-columns:1fr}
.resize{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.size-modes{border:1px dashed var(--border);border-radius:12px;padding:12px}
@media (max-width:800px){.resize{grid-template-columns:1fr}}
.actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
button,.secondary{appearance:none;border:none;padding:10px 14px;background:var(--accent);color:#0b0e17;border-radius:10px;font-weight:700;cursor:pointer}
.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}button:disabled,.secondary:disabled{opacity:.6;cursor:not-allowed}
.summary{color:var(--muted)}
.list{margin-top:20px}.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
table.files{width:100%;border-collapse:separate;border-spacing:0}
table.files th,table.files td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
table.files thead th{position:sticky;top:0;background:#1c2030;z-index:1}table.files tr:last-child td{border-bottom:none}
.cell-preview{width:110px}.cell-preview img{width:96px;height:auto;border-radius:8px;display:block}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px}
.badge.ok{color:#0b1;border-color:#093}.badge.warn{color:#aa0;border-color:#aa0}.badge.err{color:#c44;border-color:#c44}
a.btnlink{display:inline-block;padding:8px 10px;border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none}
a.btnlink[aria-disabled=true]{opacity:.6;pointer-events:none}.actions-row{display:flex;gap:8px;flex-wrap:wrap}