@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap');

:root { --ink:#1e2140; --muted:#777990; --paper:#fffdf8; --line:#e7e4dd; --orange:#ff6049; --yellow:#ffcf4a; --violet:#7666ee; --blue:#dce7ff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:#f5f1e9; font-family:'Noto Sans SC',system-ui,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:38px 0 24px; }
.hero { min-height:234px; position:relative; padding:0 3px; }
.brand { font-weight:900; letter-spacing:-.04em; font-size:19px; display:flex; gap:8px; align-items:center; }
.brand-mark { display:grid; place-items:center; width:25px; height:25px; background:var(--orange); color:#fff; border-radius:8px; font-size:20px; line-height:1; transform:rotate(-7deg); }
.hero-copy { max-width:610px; padding-top:32px; }
.eyebrow { margin:0 0 8px; color:var(--orange); font:500 11px 'DM Mono',monospace; letter-spacing:.13em; }
h1 { margin:0; font-size:clamp(42px,6vw,70px); letter-spacing:-.09em; line-height:1.08; font-weight:900; }
h1 em { color:var(--orange); font-style:normal; }
.hero-copy > p:last-child { margin:18px 0 0; color:var(--muted); font-size:15px; line-height:1.8; max-width:500px; }
.privacy-note { position:absolute; right:2px; bottom:19px; background:#ecf3ed; color:#47735c; padding:10px 14px; font-size:12px; border-radius:100px; }
.privacy-note span { color:#55b67c; margin-right:5px; }
.workspace { background:var(--paper); box-shadow:0 18px 50px #39352a12; border:1px solid #ece8e0; border-radius:22px; overflow:hidden; }
.drop-zone { margin:26px 26px 0; min-height:207px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed #c9c4bb; border-radius:14px; background:#f9f7f2; transition:.2s; outline:none; }
.drop-zone:hover,.drop-zone:focus,.drop-zone.dragging { border-color:var(--orange); background:#fff7ee; }
.upload-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--yellow); font-size:27px; font-weight:400; line-height:1; margin-bottom:9px; }
.drop-zone h2 { margin:0; font-size:16px; letter-spacing:-.04em; }.drop-zone p { margin:5px 0; font-size:13px; color:var(--muted); }.drop-zone p button { color:var(--violet); background:none; border:0; padding:0; text-decoration:underline; }.drop-zone small { color:#a19f9b; font-size:11px; }
.controls-grid { display:grid; grid-template-columns:1.55fr 1fr; border-top:1px solid var(--line); margin-top:26px; }.panel { padding:28px 26px; }.package-panel { border-left:1px solid var(--line); background:#fffbf2; }.panel-heading,.preview-header { display:flex; align-items:center; gap:10px; }.panel-heading h2,.preview-header h2 { margin:0; font-size:15px; letter-spacing:-.04em; }.step { color:var(--orange); font:500 11px 'DM Mono',monospace; }.field-row { display:grid; gap:14px; margin-top:22px; }.two-cols { grid-template-columns:1fr 1fr; } label { color:#686a7c; font-size:12px; display:grid; gap:7px; } input,select { width:100%; border:1px solid #e4e1db; border-radius:8px; background:#fff; color:var(--ink); padding:10px 11px; font-size:13px; outline-color:var(--violet); }.package-panel > label { margin-top:22px; }.package-summary { display:flex; align-items:center; gap:10px; margin:22px 0 18px; }.package-summary span { font:700 36px 'DM Mono',monospace; letter-spacing:-.1em; }.package-summary p { margin:0; font-size:12px; line-height:1.45; }.package-summary small { color:var(--muted); }.download-button { border:0; border-radius:9px; width:100%; padding:13px; color:white; background:var(--ink); font-size:13px; font-weight:700; transition:.2s; }.download-button span { margin-left:10px; font-size:16px; }.download-button:hover:not(:disabled) { transform:translateY(-1px); background:var(--violet); }.download-button:disabled { background:#d8d6d0; cursor:not-allowed; }
.preview-panel { border-top:1px solid var(--line); padding:23px 26px 26px; }.preview-header { justify-content:space-between; }.preview-header > div { display:flex; align-items:center; gap:10px; }.clear-button { border:0; background:none; color:#9a4a41; font-size:12px; text-decoration:underline; }.empty-state { padding:28px 0 3px; color:#aaa8a2; font-size:13px; }.file-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }.file-item { display:flex; align-items:center; min-width:0; gap:11px; padding:9px 11px; border:1px solid #ede9e1; border-radius:9px; background:#fff; }.thumb { flex:0 0 33px; height:33px; object-fit:cover; border-radius:5px; background:var(--blue); }.file-names { min-width:0; display:grid; gap:2px; }.old-name,.new-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.old-name { color:#a4a2a0; font-size:10px; }.new-name { color:var(--ink); font:500 11px 'DM Mono',monospace; }.remove-one { margin-left:auto; border:0; background:none; color:#bebbb7; font-size:18px; line-height:1; }.remove-one:hover { color:var(--orange); } footer { color:#929087; text-align:center; font-size:11px; padding:20px 0 0; }
@media (max-width:700px) { .app-shell{width:min(100% - 22px,1120px);padding-top:20px}.hero{min-height:250px}.privacy-note{left:0;right:auto;bottom:18px}.drop-zone{margin:14px 14px 0}.controls-grid{grid-template-columns:1fr}.package-panel{border-left:0;border-top:1px solid var(--line)}.panel,.preview-panel{padding:22px 14px}.file-list{grid-template-columns:1fr}.two-cols{grid-template-columns:1fr 1fr} }