* { box-sizing: border-box; }
:root { --ink:#172033; --muted:#6b7280; --primary:#5b4bdb; --primary-dark:#4636c5; --line:#e6e8f0; --surface:#fff; --bg:#f6f7fb; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
.site-header { height:72px; padding:0 max(24px, calc((100% - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:7px; align-items:center; text-decoration:none; color:var(--ink); font-weight:850; font-size:20px; letter-spacing:-.7px; }
.brand span:not(.brand-icon) { color:var(--muted); font-weight:500; }
.brand-icon { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fff; background:var(--primary); font-size:22px; }
.header-note { color:var(--muted); font-size:13px; }
.container { width:min(900px, calc(100% - 32px)); margin:0 auto; }
.intro { text-align:center; padding:54px 0 30px; }
.eyebrow { display:inline-block; padding:7px 11px; border-radius:30px; color:var(--primary); background:#eeecff; font-size:11px; font-weight:800; letter-spacing:1.2px; }
h1 { margin:16px 0 12px; font-size:clamp(32px, 5vw, 46px); line-height:1.12; letter-spacing:-1.8px; }
h1 span { color:var(--primary); }
.intro p { color:var(--muted); margin:0; font-size:16px; line-height:1.6; }
.tool-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 12px 35px rgba(28,35,75,.05); }
.drop-zone { min-height:250px; border:2px dashed #c9c8f4; border-radius:15px; background:#fafaff; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; text-align:center; padding:24px; cursor:pointer; transition:.2s ease; }
.drop-zone:hover, .drop-zone.drag-over { background:#f0efff; border-color:var(--primary); }
.upload-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:#e9e7ff; color:var(--primary); font-size:32px; font-weight:600; }
.drop-zone strong { font-size:18px; }
.muted, .preview-heading p, .privacy-note { color:var(--muted); font-size:13px; }
.choose-button { margin-top:4px; background:var(--primary); color:#fff; padding:11px 18px; border-radius:9px; font-weight:700; font-size:14px; }
.choose-button:hover { background:var(--primary-dark); }
.preview-section { padding-top:26px; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.preview-heading h2, .steps h2 { margin:0; font-size:21px; letter-spacing:-.5px; }
.preview-heading p { margin:6px 0 0; }
.text-button { border:0; background:transparent; color:#c24155; cursor:pointer; font-weight:700; padding:8px; }
.preview-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(135px, 1fr)); gap:14px; }
.image-card { min-width:0; position:relative; border:1px solid var(--line); border-radius:12px; padding:8px; background:#fff; cursor:grab; }
.image-card.dragging { opacity:.45; }
.image-card img { width:100%; height:120px; display:block; object-fit:contain; background:#f6f7fb; border-radius:7px; }
.image-meta { display:flex; justify-content:space-between; gap:6px; align-items:center; margin-top:8px; font-size:12px; }
.image-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.image-number { flex:0 0 auto; color:var(--primary); font-weight:800; }
.remove-image { position:absolute; top:13px; right:13px; width:25px; height:25px; border:0; border-radius:50%; background:#fff; color:#b42336; box-shadow:0 1px 6px #0002; font-size:17px; cursor:pointer; }
.convert-button { width:100%; margin-top:22px; padding:15px 20px; border:0; border-radius:11px; background:var(--primary); color:#fff; font-size:16px; font-weight:800; cursor:pointer; }
.convert-button:hover { background:var(--primary-dark); }
.convert-button:disabled { opacity:.65; cursor:wait; }
.privacy-note { text-align:center; line-height:1.5; margin:13px 0 0; }
.error-message { background:#fff0f0; border:1px solid #ffcaca; color:#a61b1b; border-radius:10px; padding:12px 14px; margin-bottom:18px; font-size:14px; }
.steps { padding:42px 0 52px; }
.steps h2 { text-align:center; margin-bottom:22px; }
.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step-grid article { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; }
.step-grid article > span { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:var(--primary); background:#eeecff; font-weight:850; }
.step-grid h3 { margin:14px 0 6px; font-size:15px; }
.step-grid p { color:var(--muted); font-size:13px; line-height:1.55; margin:0; }
footer { text-align:center; padding:20px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); background:#fff; }
@media (max-width:600px) { .site-header { height:62px; padding:0 16px; } .header-note { font-size:11px; } .intro { padding:38px 0 24px; } .tool-card { padding:14px; border-radius:15px; } .drop-zone { min-height:225px; } .step-grid { grid-template-columns:1fr; gap:10px; } .step-grid article { padding:16px; } .preview-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } .preview-heading h2 { font-size:19px; } }