/* ===================== Material 3 tokens ===================== */
:root {
  --primary:#B4231F; --on-primary:#FFFFFF;
  --primary-container:#FFDAD5; --on-primary-container:#410001;
  --secondary-container:#FFDAD5; --on-secondary-container:#3B0908;
  --bg:#FBF8F7; --surface:#FBF8F7; --on-surface:#201A19;
  --surface-container-low:#F5EFEE; --surface-container:#F0E9E8;
  --surface-container-high:#EAE3E2; --surface-container-highest:#E4DDDC;
  --on-surface-variant:#534341; --outline:#857370; --outline-variant:#D8C2BE;
  --error:#BA1A1A; --on-error:#FFFFFF;
  --success:#2E6B36;
  --scrim:rgba(0,0,0,.45);
  --shadow:0 1px 3px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:0 2px 6px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.10);
  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-full:999px;
  color-scheme:light;
}
:root[data-theme="dark"], :root.dark {
  --primary:#FFB4A9; --on-primary:#680003;
  --primary-container:#930009; --on-primary-container:#FFDAD5;
  --secondary-container:#5C3F3C; --on-secondary-container:#FFDAD5;
  --bg:#1A1110; --surface:#1A1110; --on-surface:#EDE0DE;
  --surface-container-low:#221917; --surface-container:#261D1B;
  --surface-container-high:#312825; --surface-container-highest:#3C322F;
  --on-surface-variant:#D8C2BE; --outline:#A08C89; --outline-variant:#534341;
  --error:#FFB4AB; --on-error:#690005;
  --success:#8BD89A;
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --primary:#FFB4A9; --on-primary:#680003;
    --primary-container:#930009; --on-primary-container:#FFDAD5;
    --secondary-container:#5C3F3C; --on-secondary-container:#FFDAD5;
    --bg:#1A1110; --surface:#1A1110; --on-surface:#EDE0DE;
    --surface-container-low:#221917; --surface-container:#261D1B;
    --surface-container-high:#312825; --surface-container-highest:#3C322F;
    --on-surface-variant:#D8C2BE; --outline:#A08C89; --outline-variant:#534341;
    --error:#FFB4AB; --on-error:#690005; --success:#8BD89A;
    --shadow:0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
    --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Roboto",system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--bg); color:var(--on-surface);
  min-height:100dvh; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.material-symbols-rounded{
  font-family:"Material Symbols Rounded"; font-weight:400; font-style:normal;
  font-size:24px; line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; direction:ltr;
  -webkit-font-feature-settings:"liga"; -webkit-font-smoothing:antialiased;
  font-variation-settings:"opsz" 24;
}
[hidden]{display:none !important}

/* ===================== buttons ===================== */
.btn{
  --bg-btn:var(--primary); --fg-btn:var(--on-primary);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-family:inherit; font-size:.95rem; font-weight:500;
  letter-spacing:.01em; height:44px; padding:0 22px; border-radius:var(--r-full);
  background:var(--bg-btn); color:var(--fg-btn); overflow:hidden;
  transition:box-shadow .2s, filter .2s, transform .06s;
  -webkit-tap-highlight-color:transparent;
}
.btn .material-symbols-rounded{font-size:20px}
.btn::after{content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .15s}
.btn:hover::after{opacity:.08}
.btn:active{transform:scale(.985)}
.btn:active::after{opacity:.12}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent); outline-offset:2px}
.btn:disabled{cursor:not-allowed; background:color-mix(in srgb,var(--on-surface) 12%,transparent); color:color-mix(in srgb,var(--on-surface) 38%,transparent)}
.btn:disabled::after{opacity:0}
.btn-filled{box-shadow:none}
.btn-tonal{--bg-btn:var(--secondary-container); --fg-btn:var(--on-secondary-container)}
.btn-block{width:100%}
.btn-lg{height:52px; font-size:1rem}

.icon-btn{
  position:relative; display:inline-grid; place-items:center; width:44px; height:44px;
  border:none; background:transparent; color:var(--on-surface-variant); cursor:pointer;
  border-radius:var(--r-full); -webkit-tap-highlight-color:transparent;
}
.icon-btn::after{content:""; position:absolute; inset:0; border-radius:inherit; background:currentColor; opacity:0; transition:opacity .15s}
.icon-btn:hover::after{opacity:.08}
.icon-btn:active::after{opacity:.14}
.icon-btn:focus-visible{outline:2px solid var(--primary); outline-offset:0}

/* ===================== fields ===================== */
.field{display:block}
.field-label{display:block; font-size:.78rem; font-weight:500; color:var(--on-surface-variant); margin:0 0 6px 4px}
.field-box{
  display:flex; align-items:center; gap:10px; height:56px; padding:0 12px 0 14px;
  background:var(--surface-container-high); border-radius:var(--r-md);
  border:1px solid transparent; transition:border-color .15s, background .15s;
}
.field-box:focus-within{border-color:var(--primary); background:var(--surface-container)}
.field-icon{color:var(--on-surface-variant); font-size:22px; flex:none}
.field-box input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:inherit; font-size:1rem; color:var(--on-surface);
}
.field-box input::placeholder{color:color-mix(in srgb,var(--on-surface-variant) 75%,transparent)}
.field-trailing{width:34px; height:34px}

/* ===================== segmented ===================== */
.seg-wrap{margin-top:20px}
.seg-caption{display:block; font-size:.78rem; font-weight:500; color:var(--on-surface-variant); margin:0 0 8px 4px}
.segmented{display:flex; border:1px solid var(--outline); border-radius:var(--r-full); overflow:hidden}
.seg-btn{
  flex:1; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; border:none; background:transparent; color:var(--on-surface); cursor:pointer;
  font-family:inherit; font-size:.92rem; font-weight:500; -webkit-tap-highlight-color:transparent;
}
.seg-btn + .seg-btn{border-left:1px solid var(--outline)}
.seg-btn::after{content:""; position:absolute; inset:0; background:var(--on-surface); opacity:0; transition:opacity .15s}
.seg-btn:hover::after{opacity:.06}
.seg-btn .seg-icon{font-size:20px}
.seg-btn .seg-check{font-size:18px; width:0; overflow:hidden; opacity:0; transition:width .18s, opacity .12s}
.seg-btn.is-selected{background:var(--secondary-container); color:var(--on-secondary-container)}
.seg-btn.is-selected .seg-check{width:18px; opacity:1}
.seg-btn.is-selected .seg-icon{display:none}
.format-hint{margin:12px 4px 0; font-size:.82rem; color:var(--on-surface-variant); line-height:1.45}
.format-hint b{color:var(--on-surface); font-weight:600}

/* ===================== layout ===================== */
.view{min-height:100dvh}
.main{max-width:640px; margin:0 auto; padding:20px 18px 60px; display:flex; flex-direction:column; gap:18px}
.card{
  background:var(--surface-container-low); border:1px solid var(--outline-variant);
  border-radius:var(--r-xl); padding:22px; box-shadow:var(--shadow);
}
.appbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; padding-top:max(10px,env(safe-area-inset-top));
  background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb,var(--outline-variant) 60%,transparent);
}
.appbar-lead{display:flex; align-items:center; gap:12px; padding-left:6px}
.appbar-icon{color:var(--primary); font-size:26px; font-variation-settings:"FILL" 1}
.appbar-title{font-weight:600; font-size:1.06rem; letter-spacing:.01em}
.appbar-actions{display:flex; gap:2px}
.authwarn{display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:var(--r-md);
  background:color-mix(in srgb,var(--primary) 12%,var(--surface-container-low)); color:var(--on-surface);
  border:1px solid var(--outline-variant); font-size:.86rem; line-height:1.45}
.authwarn .material-symbols-rounded{font-size:20px; color:var(--primary); flex:none}
.authwarn code{background:var(--surface-container-high); padding:1px 6px; border-radius:6px; font-size:.82em}
.hero{padding:12px 4px 2px; text-align:center}
.hero-title{margin:0; font-size:1.6rem; font-weight:700; letter-spacing:-.01em}
.hero-sub{margin:8px auto 0; max-width:460px; color:var(--on-surface-variant); font-size:.95rem; line-height:1.5}
.footnote{margin:2px 6px; text-align:center; font-size:.8rem; color:var(--on-surface-variant); line-height:1.5}
.footnote b{color:var(--on-surface)}

/* ===================== preview ===================== */
.preview-card{display:flex; gap:16px; align-items:center; padding:16px}
.preview-thumb{position:relative; width:160px; flex:none; aspect-ratio:16/9; border-radius:var(--r-md); overflow:hidden; background:var(--surface-container-highest)}
.preview-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.preview-dur{position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.78); color:#fff; font-size:.72rem; font-weight:500; padding:2px 6px; border-radius:6px}
.preview-meta{min-width:0; flex:1}
.preview-title{margin:0; font-size:1rem; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.preview-uploader{margin:6px 0 0; font-size:.85rem; color:var(--on-surface-variant); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:var(--r-full); font-size:.78rem; font-weight:600; background:var(--surface-container-high); color:var(--on-surface-variant)}
.chip-primary{background:var(--primary-container); color:var(--on-primary-container)}

/* ===================== progress ===================== */
.progress-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.progress-stage{font-weight:600; font-size:.98rem}
.progress-percent{font-weight:700; font-size:.98rem; color:var(--primary); font-variant-numeric:tabular-nums}
.linear{position:relative; height:8px; margin:16px 0 12px; border-radius:var(--r-full); overflow:hidden}
.linear-track{position:absolute; inset:0; background:var(--surface-container-highest)}
.linear-fill{position:absolute; inset:0 100% 0 0; right:auto; width:0%; background:var(--primary); border-radius:var(--r-full); transition:width .3s ease}
.linear-indeterminate{position:absolute; top:0; bottom:0; left:0; width:40%; background:var(--primary); border-radius:var(--r-full); opacity:0; animation:indet 1.4s infinite ease-in-out}
.linear[data-mode="indeterminate"] .linear-fill{display:none}
.linear[data-mode="indeterminate"] .linear-indeterminate{opacity:1}
@keyframes indet{0%{left:-40%}50%{left:40%}100%{left:110%}}
.progress-foot{display:flex; justify-content:space-between; gap:12px; font-size:.82rem; color:var(--on-surface-variant); font-variant-numeric:tabular-nums; min-height:1em}

/* ===================== result ===================== */
.result-card{text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px}
.result-icon{font-size:52px; color:var(--success); font-variation-settings:"FILL" 1}
.result-title{margin:6px 0 0; font-size:1.2rem; font-weight:700}
.result-file{margin:4px 10px 0; font-size:.86rem; color:var(--on-surface-variant); word-break:break-word}
.result-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px}

/* ===================== login ===================== */
.login-view{display:grid; place-items:center; padding:24px}
.login-card{
  width:100%; max-width:400px; background:var(--surface-container-low);
  border:1px solid var(--outline-variant); border-radius:var(--r-xl);
  padding:32px 26px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:16px;
}
.brand{text-align:center; margin-bottom:6px}
.brand-badge{font-size:52px; color:var(--primary); font-variation-settings:"FILL" 1}
.brand-title{margin:10px 0 0; font-size:1.35rem; font-weight:700}
.brand-sub{margin:4px 0 0; color:var(--on-surface-variant); font-size:.9rem}
.login-error{margin:0; padding:10px 14px; border-radius:var(--r-md); background:color-mix(in srgb,var(--error) 14%,transparent); color:var(--error); font-size:.85rem; font-weight:500}
.login-view .btn{margin-top:4px}

/* ===================== snackbar ===================== */
.snackbar{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px);
  max-width:calc(100vw - 32px); background:var(--surface-container-highest); color:var(--on-surface);
  padding:14px 18px; border-radius:var(--r-md); box-shadow:var(--shadow-lg); font-size:.9rem;
  z-index:20; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
  border:1px solid var(--outline-variant);
}
.snackbar.show{opacity:1; transform:translate(-50%,0)}

/* ===================== boot loader ===================== */
.boot{position:fixed; inset:0 0 auto 0; height:3px; background:transparent; z-index:30}
.boot-bar{position:relative; height:100%; background:var(--primary); opacity:1}
.boot.hide{display:none}

/* ===================== responsive ===================== */
@media (max-width:520px){
  .hero-title{font-size:1.4rem}
  .preview-card{flex-direction:column; align-items:stretch}
  .preview-thumb{width:100%}
  .card{padding:18px}
}