#webpApp{
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#dbe3ee;
    --primary:#59b8c2;
    --primary2:#278c9a;
    --danger:#dc2626;
    --ok:#16a34a;
    --shadow:0 14px 40px rgba(15,23,42,.10);
    --radius:18px;
  }
#webpApp *{box-sizing:border-box}
#webpApp{
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:linear-gradient(180deg,#eef4ff 0,#f8fafc 46%,#f4f7fb 100%);
    color:var(--text);
    min-height:100vh;
  }
#webpApp .wrap{max-width:980px;margin:auto;padding:22px 14px 44px}
#webpApp .hero{text-align:center;padding:18px 10px 20px}
#webpApp .hero h1{margin:0;font-size:clamp(26px,5vw,42px);letter-spacing:-.03em}
#webpApp .hero p{margin:10px auto 0;color:var(--muted);max-width:680px;line-height:1.5}
#webpApp .card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:18px;margin-bottom:16px;
  }
#webpApp .drop{
    border:2px dashed #93b4f5;border-radius:16px;padding:30px 16px;text-align:center;
    background:#f8fbff;transition:.18s;cursor:pointer;
  }
#webpApp .drop.drag{background:#eaf2ff;border-color:var(--primary);transform:scale(1.005)}
#webpApp .drop .ico{font-size:48px;line-height:1}
#webpApp .drop strong{display:block;font-size:18px;margin-top:10px}
#webpApp .drop small{display:block;color:var(--muted);margin-top:6px}
#webpApp input[type=file]{display:none}
#webpApp button,#webpApp .button{
    appearance:none;border:0;border-radius:12px;padding:12px 16px;font-weight:700;
    cursor:pointer;font-size:15px;transition:.15s;
  }
#webpApp .primary{background:var(--primary);color:#fff}
#webpApp .primary:hover{background:var(--primary2)}
#webpApp .secondary{background:#e8eef8;color:#14213d}
#webpApp .danger{background:#fee2e2;color:#991b1b}
#webpApp button:disabled{opacity:.5;cursor:not-allowed}
#webpApp .settings{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
#webpApp label{font-size:13px;font-weight:700;color:#334155;display:block;margin-bottom:7px}
#webpApp .field{
    width:100%;border:1px solid var(--border);border-radius:11px;padding:11px 12px;
    background:#fff;color:var(--text);font-size:15px;
  }
#webpApp input[type=range]{width:100%}
#webpApp .qualityRow{display:flex;gap:10px;align-items:center}
#webpApp .qualityVal{
    min-width:48px;text-align:center;padding:8px;border-radius:10px;background:#eef2ff;
    font-weight:800;color:#1e40af
  }
#webpApp .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
#webpApp .toolbar .left,#webpApp .toolbar .right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#webpApp .count{color:var(--muted);font-size:14px}
#webpApp .list{display:grid;gap:12px}
#webpApp .item{
    display:grid;grid-template-columns:86px 1fr auto;gap:14px;align-items:center;
    border:1px solid var(--border);border-radius:14px;padding:10px;
  }
#webpApp .thumb{
    width:86px;height:86px;object-fit:cover;border-radius:11px;background:#eef2f7;border:1px solid var(--border)
  }
#webpApp .name{font-weight:800;word-break:break-word}
#webpApp .meta{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45}
#webpApp .status{font-size:13px;margin-top:6px;font-weight:700}
#webpApp .status.ok{color:var(--ok)}
#webpApp .status.err{color:var(--danger)}
#webpApp .actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
#webpApp .empty{text-align:center;color:var(--muted);padding:24px 10px}
#webpApp .notice{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px}
#webpApp .progress{height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden;margin-top:12px;display:none}
#webpApp .bar{height:100%;width:0;background:var(--primary);transition:width .2s}
@media(max-width:720px){#webpApp .settings{grid-template-columns:1fr 1fr}
#webpApp .settings .wide{grid-column:1/-1}
#webpApp .item{grid-template-columns:72px 1fr}
#webpApp .thumb{width:72px;height:72px}
#webpApp .actions{grid-column:1/-1;justify-content:stretch}
#webpApp .actions button{flex:1}
}
@media(max-width:480px){#webpApp .wrap{padding:12px 10px 28px}
#webpApp .card{padding:13px;border-radius:15px}
#webpApp .drop{padding:24px 10px}
#webpApp .settings{grid-template-columns:1fr}
#webpApp .settings .wide{grid-column:auto}
#webpApp .toolbar,#webpApp .toolbar .left,#webpApp .toolbar .right{width:100%}
#webpApp .toolbar button{flex:1}
}

#webpApp{width:min(900px,calc(100% - 24px));min-height:0;margin:0 auto;padding:0;background:transparent}#webpApp .wrap{width:100%;max-width:none;margin:0 auto;padding-top:10px}#webpApp .drop{border-color:#92ced5}#webpApp .hero{background:none;border:0;box-shadow:none;display:block}#webpApp .hero h1{font-size:clamp(26px,5vw,42px)}