:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f3f1eb; color: #172017; }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 560px); background: #fff; border-radius: 22px; padding: 28px; box-shadow: 0 18px 60px rgba(22,34,24,.12); }
.brand-row { display: flex; align-items: center; gap: 16px; }
.mark { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #243c2a; color: #fff; font-size: 25px; }
.eyebrow { margin: 0 0 4px; font-size: 12px; letter-spacing: .14em; color: #6c756d; }
h1 { margin: 0; font-size: clamp(26px, 7vw, 38px); }
.intro { line-height: 1.5; color: #4d584f; }
.status { margin: 18px 0; padding: 13px 15px; border-radius: 12px; background: #eef2ee; font-weight: 650; }
.status[data-state="error"] { background: #fae9e7; color: #8a251f; }
.status[data-state="completed"] { background: #e5f4e8; color: #1f6b32; }
.file-picker { display: flex; justify-content: center; padding: 20px; border: 2px dashed #a8b1a9; border-radius: 14px; cursor: pointer; font-weight: 700; }
.file-picker input { position: absolute; opacity: 0; pointer-events: none; }
.file-meta { min-height: 26px; margin: 12px 0; font-size: 14px; color: #4d584f; }
button { width: 100%; border: 0; border-radius: 12px; padding: 15px 18px; background: #243c2a; color: #fff; font-weight: 750; font-size: 16px; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.progress-wrap { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
progress { width: 100%; }
.channels { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.channels span { padding: 6px 9px; background: #eef2ee; border-radius: 999px; font-size: 12px; }
.privacy { margin: 22px 0 0; color: #6c756d; font-size: 12px; line-height: 1.5; }