:root { color-scheme: light; --bg:#fff8ef; --ink:#1c2433; --muted:#697386; --card:#ffffffd9; --line:rgba(28,36,51,.1); --accent:#ff7a1a; --accent2:#16a36b; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left, #ffe1b8, transparent 30rem), linear-gradient(135deg, #fff8ef, #eefbf3); color:var(--ink); }
.shell { width:min(920px, calc(100vw - 32px)); margin:0 auto; padding:46px 0; }
.hero { margin-bottom:24px; }
.eyebrow { margin:0 0 9px; color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:900; }
h1 { margin:0; font-size:clamp(44px, 10vw, 88px); line-height:.9; letter-spacing:-.07em; }
.lede { max-width:680px; color:var(--muted); font-size:18px; line-height:1.6; }
.panel, .result { background:var(--card); border:1px solid var(--line); border-radius:30px; padding:24px; box-shadow:0 22px 70px rgba(76,45,12,.12); backdrop-filter: blur(8px); }
.drop { min-height:240px; border:2px dashed rgba(255,122,26,.35); border-radius:24px; display:grid; place-items:center; text-align:center; padding:32px; cursor:pointer; transition:.18s ease; background:rgba(255,255,255,.55); }
.drop:hover, .drop.drag { border-color:var(--accent); transform:translateY(-2px); background:#fff; }
.drop input { position:absolute; opacity:0; pointer-events:none; }
.dropIcon { font-size:54px; margin-bottom:12px; }
.drop strong { display:block; font-size:24px; }
.drop small { display:block; margin-top:8px; color:var(--muted); }
.previewWrap { margin-top:18px; overflow:hidden; border-radius:22px; border:1px solid var(--line); background:#fff; }
.previewWrap img { display:block; width:100%; max-height:430px; object-fit:contain; }
.status { margin-top:16px; color:var(--muted); font-weight:800; }
.status.busy { color:var(--accent); }
.status.error { color:#c63434; }
.result { margin-top:22px; }
.resultHead { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:18px; }
h2 { margin:0; font-size:34px; letter-spacing:-.04em; }
button { border:0; border-radius:999px; padding:12px 17px; font-weight:900; color:#fff; background:var(--ink); cursor:pointer; }
.desc { font-size:18px; line-height:1.6; }
.total { display:inline-flex; margin:6px 0 18px; padding:14px 18px; border-radius:18px; background:rgba(22,163,107,.12); color:#087146; font-weight:950; font-size:22px; }
.items { display:grid; gap:12px; }
.item { padding:16px; border-radius:18px; background:#fff; border:1px solid var(--line); }
.item strong { display:block; font-size:18px; margin-bottom:5px; }
.item span { color:var(--muted); }
.notes { color:var(--muted); line-height:1.5; }
@media (max-width:640px) { .shell{padding:28px 0}.resultHead{display:block}button{margin-top:14px;width:100%}.drop{min-height:210px} }