* { box-sizing: border-box; }
body { font-family: -apple-system, Segoe UI, Arial, sans-serif; margin: 0; background: #f2f2f2; color: #1a1a1a; }
header { background: #fff; border-bottom: 4px solid #111; padding: 14px 24px; }
.brand { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo { height: 56px; width: auto; display: block; }
.titles { border-left: 1px solid #ccc; padding-left: 20px; }
header h1 { margin: 0; font-size: 18px; color: #111; letter-spacing: 0.2px; }
.ver { font-size: 12px; color: #777; font-weight: normal; }
footer { max-width: 900px; margin: 10px auto 30px; padding: 0 16px; font-size: 12px; color: #888; display: flex; align-items: center; gap: 8px; }
.footIcon { height: 18px; width: 18px; opacity: 0.7; }
@media (max-width: 560px) { .titles { border-left: none; padding-left: 0; } .logo { height: 44px; } }
main { max-width: 900px; margin: 20px auto; padding: 0 16px; }
.panel { background: white; border-radius: 8px; padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.panel h2 { margin-top: 0; font-size: 15px; color: #111; border-left: 4px solid #111; padding-left: 10px; }
.status { color: #777; font-size: 13px; }
.hint { color: #999; font-size: 12px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.row label { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
input[type=text] { padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
select { padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
button { padding: 8px 14px; border: none; border-radius: 5px; background: #95a5a6; color: white; cursor: pointer; font-size: 13px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button { transition: background 0.15s; }
button:hover:not(:disabled) { background: #6c7a7b; }
button.primary { background: #111; font-weight: bold; padding: 10px 18px; }
button.primary:hover:not(:disabled) { background: #333; }
.buttonLink { display: inline-block; text-decoration: none; text-align: center; margin-top: 10px; padding: 8px 14px; border-radius: 5px; background: #333; color: white; font-size: 13px; }
.canvasWrap { background: #1a1a2e; border-radius: 6px; overflow: hidden; }
#imgCanvas { display: block; width: 100%; max-height: 520px; cursor: crosshair; }
.navRow { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.navRow span { font-size: 13px; color: #555; }
.progressWrap { background: #eee; border-radius: 4px; height: 8px; margin: 10px 0; overflow: hidden; }
.progressBar { background: #27ae60; height: 100%; width: 0%; transition: width 0.2s; }
.log { background: #1a1a2e; color: #b8f5b8; font-family: 'Courier New', monospace; font-size: 12px; padding: 10px; border-radius: 6px; max-height: 260px; overflow-y: auto; white-space: pre-wrap; }
.subpanel { border: 1px solid #eee; border-radius: 6px; padding: 12px; margin-bottom: 14px; background: #fafafa; }
.subpanel h3 { margin: 0 0 8px 0; font-size: 13px; color: #111; }
.log:empty { display: none; }