@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&display=swap");:root{--bg:#C0C0C0;--fg:#000000;--muted:#808080;--accent:#0000FF;--secondary:#FF0000;--border:#000000;--title-bar:#000080;--title-bar-end:#1084D0;--font-body:"MS Sans Serif","Segoe UI",Tahoma,Geneva,Verdana,"Noto Sans SC",sans-serif;--font-heading:"Arial Black",Impact,"Noto Sans SC",sans-serif;--font-mono:"Courier New",Courier,monospace;--shadow-out:inset -1px -1px 0 #404040,inset 1px 1px 0 #dfdfdf;--shadow-in:inset 1px 1px 0 #404040,inset -1px -1px 0 #dfdfdf}*,:after,:before{box-sizing:border-box;margin:0;padding:0;border-radius:0!important}body{font-family:var(--font-body);background-color:var(--bg);background-image:linear-gradient(45deg,#b8b8b8 25%,transparent 0),linear-gradient(-45deg,#b8b8b8 25%,transparent 0),linear-gradient(45deg,transparent 75%,#b8b8b8 0),linear-gradient(-45deg,transparent 75%,#b8b8b8 0);background-size:4px 4px;color:var(--fg);font-size:14px;line-height:1.5;-webkit-font-smoothing:none;min-height:100vh}a{color:var(--accent);text-decoration:underline}a:hover{color:var(--secondary)}::selection{background:var(--title-bar);color:#fff}.container{max-width:800px;margin:0 auto;padding:20px}h1{font-family:var(--font-heading);font-size:1.5rem;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--title-bar),var(--title-bar-end));padding:4px 12px;text-align:left;letter-spacing:1px;margin-bottom:0;text-shadow:1px 1px 0 #000}.subtitle{font-family:var(--font-body);font-size:12px;color:var(--muted);border-color:#808080 #fff #fff #808080;border-style:solid;border-width:2px;padding:4px 12px;margin-bottom:16px}.card,.subtitle{background:var(--bg)}.card{border-color:#dfdfdf #404040 #404040 #dfdfdf;border-style:solid;border-width:2px;box-shadow:1px 1px 0 #000;padding:16px}.upload-zone{border-color:#808080 #fff #fff #808080;border-style:solid;border-width:2px;box-shadow:var(--shadow-in);background:#fff;padding:40px 20px;text-align:center;cursor:pointer;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.upload-zone:hover{background:#f0f0f0}.upload-zone.dragover{background:#FFFFCC;outline:2px dotted var(--accent)}.upload-zone input{display:none}.upload-zone p{font-size:13px;color:var(--fg)}.hint{font-size:11px!important;color:var(--muted)!important}.paste-hint{background:#FFFFCC;border:1px solid #cc9900;padding:6px 12px;margin-top:12px;font-size:12px;text-align:center;color:#663300}.preview-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;margin-top:16px}.preview-box{border-color:#808080 #fff #fff #808080;border-style:solid;border-width:2px;box-shadow:var(--shadow-in);background:#fff;padding:4px;text-align:center;min-height:200px;display:flex;flex-direction:column}.preview-box .label{display:block;background:linear-gradient(90deg,var(--title-bar),var(--title-bar-end));color:#fff;font-size:11px;font-weight:700;padding:2px 8px;text-align:left;text-transform:uppercase;letter-spacing:1px}.preview-box img{max-width:100%;max-height:300px;object-fit:contain;flex:1 1;padding:8px}.placeholder{color:var(--muted);font-size:12px}.loading,.placeholder{flex:1 1;display:flex;align-items:center;justify-content:center}.loading{flex-direction:column;gap:12px;padding:20px}.spinner{width:24px;height:24px;border:3px solid var(--muted);border-top-color:var(--title-bar);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.loading span{font-size:12px;color:var(--muted);font-family:var(--font-mono)}.btn-row{display:flex;gap:8px;margin-top:16px;justify-content:center}.btn{font-family:var(--font-body);font-size:13px;font-weight:700;padding:6px 24px;cursor:pointer;border-color:#dfdfdf #404040 #404040 #dfdfdf;border-style:solid;border-width:2px;box-shadow:1px 1px 0 #000;text-transform:uppercase;letter-spacing:.5px}.btn:active{border-color:#404040 #dfdfdf #dfdfdf #404040;box-shadow:none;padding:7px 23px 5px 25px}.btn:disabled{color:var(--muted);cursor:not-allowed}.btn-primary{background:var(--bg);color:var(--fg)}.btn-primary:hover:not(:disabled){background:#d4d4d4}.btn-secondary{background:#FFFFCC;color:var(--fg)}.btn-secondary:hover{background:#FFFF99}.footer{text-align:center;margin-top:20px;font-size:11px;color:var(--muted);font-family:var(--font-mono)}@media (max-width:600px){.preview-row{grid-template-columns:1fr}h1{font-size:1.2rem}}.mode-tabs{display:flex;gap:0;margin-bottom:0}.mode-tab{font-family:var(--font-body);font-size:13px;font-weight:700;padding:6px 20px;cursor:pointer;border-bottom:2px solid;border-color:#dfdfdf #404040 transparent #dfdfdf;border-style:solid solid none;border-width:2px 2px medium;background:#a0a0a0;color:var(--muted);text-transform:uppercase}.mode-tab.active{background:var(--bg);color:var(--fg);border-color:#dfdfdf #404040 transparent #dfdfdf;position:relative;z-index:1;margin-bottom:-2px;padding-bottom:8px}.mode-tab:first-child{margin-right:-1px}.field{margin-bottom:12px}.field label{display:block;font-weight:700;font-size:12px;margin-bottom:4px;text-transform:uppercase}.field input{width:100%;padding:6px 10px;border-color:#808080 #fff #fff #808080;border-style:solid;border-width:2px;box-shadow:var(--shadow-in);font-family:var(--font-body);font-size:13px;background:#fff}.slots-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:6px;gap:6px;margin:12px 0}.slot{aspect-ratio:1;border-color:#808080 #fff #fff #808080;border-style:solid;border-width:2px;box-shadow:var(--shadow-in);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.slot:hover{background:#f0f0f0}.slot img{width:100%;height:100%;object-fit:cover}.slot-label{font-size:11px;color:var(--muted)}.slot-remove{position:absolute;top:2px;right:2px;width:18px;height:18px;background:#c0c0c0;border-color:#dfdfdf #404040 #404040 #dfdfdf;border-style:solid;border-width:1px;font-size:12px;line-height:16px;text-align:center;cursor:pointer;padding:0}.slot-remove:hover{background:#ff6666;color:#fff}.result-slot{border-color:#008000 #004000 #004000 #008000}.results-title{font-family:var(--font-heading);font-size:14px;text-transform:uppercase;background:linear-gradient(90deg,var(--title-bar),var(--title-bar-end));color:#fff;padding:3px 10px;margin:16px 0 0}@media (max-width:600px){.slots-grid{grid-template-columns:repeat(3,1fr)}}.failed-slot{border-color:#cc0000 #660000 #660000 #cc0000!important}.retry-btn{margin-top:6px;font-family:var(--font-body);font-size:11px;padding:3px 12px;cursor:pointer;border-color:#dfdfdf #404040 #404040 #dfdfdf;border-style:solid;border-width:2px;background:#FFFFCC;color:var(--fg)}.retry-btn:hover{background:#FFFF99}.retry-btn:active{border-color:#404040 #dfdfdf #dfdfdf #404040}