*{margin:0;padding:0;box-sizing:border-box}
body{background:#ebe7dc;color:#141414;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh;padding:40px}
.wrap{max-width:1280px;margin:0 auto}
h1{font-size:56px;font-weight:900;letter-spacing:-2px}
h1 em{color:#c8371d;font-style:italic}
.tag{font-size:11px;letter-spacing:3px;color:#8a8578;text-transform:uppercase;margin:8px 0 24px;padding-bottom:20px;border-bottom:2px solid #141414}
.privacy-note{margin:-10px 0 22px;color:#6f6a60;font-size:12px;letter-spacing:1px}
.grid{display:grid;grid-template-columns:340px 1fr;gap:24px}
.panel,.preview{background:#fff;border:1px solid #141414;box-shadow:6px 6px 0 #141414;padding:22px}
.panel h2{font-size:11px;letter-spacing:2px;color:#c8371d;text-transform:uppercase;margin:6px 0 12px}
.file-mini{display:block;padding:10px;border:1px dashed #141414;cursor:pointer;font-size:11px;background:#faf8f3;text-align:center;margin-bottom:8px}
.file-mini input{display:none}
.file-mini.loaded{background:#141414;color:#ebe7dc;border-color:#141414}
input[type=file]#file{display:block;width:100%;padding:22px;border:2px dashed #141414;cursor:pointer;font-size:12px;background:#faf8f3}
.batch-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;margin-top:8px}
.batch-toggle input{width:auto}
label.fl{display:block;font-size:10px;letter-spacing:2px;color:#8a8578;text-transform:uppercase;margin:12px 0 5px}
input[type=text]{width:100%;padding:9px;border:1px solid #d4d0c4;background:#faf8f3;font-size:12px;font-family:Menlo,monospace}
input[type=text]:focus{outline:none;border-color:#c8371d;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
button{width:100%;padding:16px;background:#141414;color:#ebe7dc;border:none;font-size:14px;letter-spacing:6px;cursor:pointer;margin-top:20px;font-weight:700}
button:hover{background:#c8371d;letter-spacing:10px;transition:.2s}
.preview{min-height:560px;display:flex;align-items:center;justify-content:center}
.preview canvas{max-width:100%;max-height:78vh;cursor:pointer}
.empty{color:#8a8578;font-size:11px;letter-spacing:3px;text-transform:uppercase}
.gear-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.theme-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.theme-btn{padding:8px 0;background:#faf8f3;border:1px solid #d4d0c4;font-size:11px;cursor:pointer;letter-spacing:1px}
.theme-btn:hover{border-color:#c8371d}
.theme-btn.active{background:#141414;color:#ebe7dc;border-color:#141414}

@media (max-width:768px){
*{box-sizing:border-box}
body{padding:16px}
.wrap{max-width:100%}
h1{font-size:32px;letter-spacing:-1px}
h1 em{font-style:italic}
.tag{font-size:10px;margin:6px 0 16px;padding-bottom:12px}
.privacy-note{margin:-6px 0 14px;font-size:11px;line-height:1.5}
.grid{display:block;gap:0}
.panel,.preview{width:100%;margin-bottom:16px;padding:16px;box-shadow:4px 4px 0 #141414}
.panel h2{font-size:10px;margin:4px 0 8px}
input[type=file]#file{padding:14px;font-size:11px}
input[type=text]{padding:8px;font-size:11px}
.row{display:block}
.row>div{margin-bottom:0}
.fl{font-size:9px;margin:8px 0 4px}
button{padding:14px;font-size:13px;letter-spacing:4px;margin-top:14px}
button:hover{letter-spacing:6px}
.preview{min-height:300px}
.preview canvas{max-height:50vh}
.gear-row{grid-template-columns:1fr 1fr;gap:6px}
.theme-row{grid-template-columns:repeat(2,1fr);gap:4px}
.theme-btn{padding:10px 0;font-size:10px}
.gear-mini{font-size:10px;padding:8px}
}

@media (max-width:375px){
body{padding:12px}
h1{font-size:26px}
.panel,.preview{padding:12px;box-shadow:3px 3px 0 #141414}
.theme-row{grid-template-columns:repeat(2,1fr);gap:3px}
.theme-btn{padding:8px 0;font-size:9px}
button{padding:12px;font-size:12px}
}