*{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0f766e;--teal-d:#0d665f;--teal-l:#14b8a6;
  --ink:#102a43;--muted:#5c6b75;--line:#cbdde3;--bg:#f5fafb;--card:#fff;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
header{display:flex;align-items:center;gap:14px;padding:14px 20px;background:#fff;border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:18px;text-decoration:none;color:var(--ink)}
.brand span{color:var(--teal)}
header b{color:var(--muted);font-weight:600;font-size:14px}

.hero{text-align:center;padding:30px 20px 10px}
.hero small{color:var(--teal);font-weight:700;letter-spacing:.5px;font-size:12px}
.hero h2{font-size:28px;margin:8px 0 6px}
.hero p{color:var(--muted);max-width:560px;margin:0 auto}

.tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:18px 16px;max-width:900px;margin:0 auto}
.tools button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;transition:.15s}
.tools button span{font-size:15px}
.tools button:hover{border-color:var(--teal-l);color:var(--teal)}
.tools button.active{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(15,118,110,.22)}

.app{max-width:900px;margin:0 auto;padding:10px 16px 30px}

.dropzone{border:2px dashed #79a7b1;border-radius:14px;background:#f0f9fa;padding:44px 20px;text-align:center;cursor:pointer;transition:.15s}
.dropzone.drag{background:#e2f4f6;border-color:var(--teal)}
.dz-icon{font-size:48px}
.dz-inner h3{margin:10px 0 4px;font-size:20px}
.dz-inner p{color:var(--muted);margin-bottom:16px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 10px 30px rgba(16,38,51,.06)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.file-meta{display:flex;flex-direction:column}
#file-name{font-weight:700}
#file-info{color:var(--muted);font-size:13px}

.options{display:grid;gap:14px;margin-bottom:16px}
.opt-row{display:flex;flex-direction:column;gap:6px}
.opt-row label{font-weight:600;font-size:14px}
.opt-row input[type=text],.opt-row input[type=number],.opt-row select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;max-width:320px}
.opt-help{color:var(--muted);font-size:13px}
.opt-inline{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:14px;background:#fff}
.chip input{margin:0}

.panel-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.btn{border:none;border-radius:8px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.btn.primary{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(15,118,110,.22)}
.btn.primary:hover{background:var(--teal-d);transform:translateY(-1px)}
.btn.primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.big{padding:13px 26px;font-size:15px}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--muted)}
.btn.ghost:hover{border-color:var(--teal-l);color:var(--teal)}
.btn.secondary{background:#eef5f7;color:var(--teal);border:1px solid var(--line)}
.status{color:var(--muted);font-size:14px}
.status.err{color:#b3261e}
.status.ok{color:#0a7d33}

.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-top:6px}
.thumb{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;cursor:grab}
.thumb.dragging{opacity:.4}
.thumb.selected{outline:3px solid var(--teal)}
.thumb canvas,.thumb img{width:100%;display:block}
.thumb .pg{position:absolute;bottom:0;left:0;right:0;background:rgba(16,42,67,.75);color:#fff;font-size:11px;text-align:center;padding:2px}
.thumb .rm{position:absolute;top:4px;right:4px;background:#b3261e;color:#fff;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:13px;line-height:1}
.thumb .rot{position:absolute;top:4px;left:4px;background:rgba(16,42,67,.8);color:#fff;border:none;border-radius:6px;padding:2px 6px;cursor:pointer;font-size:12px}

.result{margin-top:16px;padding:18px;border-radius:10px;background:#edf9f1;border:1px solid #b6e3c4;text-align:center}
.result h3{margin-bottom:10px;color:#0a7d33}
.result .btn{margin:4px}

.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:760px;margin:10px auto 0;padding:20px 16px}
.benefits div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center}
.benefits b{display:block;color:var(--ink)}
.benefits span{color:var(--muted);font-size:13px}

footer{text-align:center;color:var(--muted);font-size:13px;padding:24px 16px}

@media(max-width:600px){
  .benefits{grid-template-columns:1fr}
  .hero h2{font-size:24px}
  .tools button{font-size:13px;padding:8px 11px}
}