/* Values from the Reducto design system tokens (reductoai/product apps/web/src/ui/tokens). */
@font-face { font-family:"Geist"; src:url("fonts/Geist-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Reducto Serif"; src:url("fonts/reducto-serif-regular.woff2") format("woff2"); font-display:swap; }
:root {
  --bg:#ffffff; --bg-secondary:#fafafa; --text:#0a0a0a; --text-secondary:#525252; --text-disabled:#a3a3a3;
  --border:#d4d4d4; --border-hover:#a3a3a3; --line:#e5e5e5; --grey-100:#f5f5f5;
  --plum-50:#f4ebf1; --plum-200:#e3bdd6; --plum-800:#4b163d; --plum-900:#380f2d; --input-active:#6f255b;
  --err:#b33c41; --destructive:#dc2626; --destructive-hover:#b91c1c; --success:#15803d;
  --font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 var(--font-sans); color:var(--text); background:var(--bg-secondary); -webkit-font-smoothing:antialiased; }
main { max-width:860px; margin:48px auto; padding:0 20px; }
main.narrow { max-width:560px; }
h1 { font-size:24px; font-weight:500; letter-spacing:-0.01em; margin:0 0 4px; }
h2 { font-size:16px; font-weight:500; margin:32px 0 12px; }
.brand { font-family:"Reducto Serif", Georgia, serif; font-size:22px; margin:0 0 16px; color:var(--plum-800); }
.muted { color:var(--text-secondary); }
.small { font-size:13px; }
.card { background:var(--bg); border:0.5px solid var(--border); border-radius:10px; padding:20px; margin-top:16px; }
.tabs { display:inline-flex; background:var(--grey-100); border-radius:8px; padding:2px; margin-bottom:16px; }
.tab { border:0; background:none; height:32px; padding:0 14px; border-radius:6px; cursor:pointer; font:inherit; font-size:13px; color:var(--text-secondary); }
.tab.active { background:var(--bg); color:var(--text); box-shadow:0 0 0 0.5px var(--border), 0 1px 2px rgba(0,0,0,.04); }
.drop { display:flex; align-items:center; justify-content:center; min-height:120px; border:1px dashed var(--border); border-radius:8px; color:var(--text-secondary); cursor:pointer; text-align:center; padding:16px; transition:background .15s, border-color .15s; }
.drop:hover { border-color:var(--border-hover); background:var(--bg-secondary); }
.drop.over { border-color:var(--input-active); color:var(--text); background:var(--plum-50); }
.row { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.row > input { flex:1; min-width:200px; }
input, select { font:inherit; height:36px; padding:0 10px; border:0.5px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); }
input::placeholder { color:#737373; }
input:hover, select:hover { border-color:var(--border-hover); }
input:focus, select:focus { outline:2px solid var(--plum-200); outline-offset:2.5px; border-color:var(--input-active); }
button { font:inherit; font-size:13px; height:36px; padding:0 14px; border-radius:8px; cursor:pointer; border:0.5px solid var(--border); background:var(--bg); color:var(--text); transition:background .15s, border-color .15s; }
button:hover { background:var(--bg-secondary); border-color:var(--border-hover); }
button:focus-visible { outline:2px solid var(--plum-200); outline-offset:2px; }
button:disabled { opacity:.5; cursor:default; }
button.primary { background:var(--plum-800); color:var(--plum-50); border-color:transparent; }
button.primary:hover { background:var(--plum-900); }
button.link { border:0; height:auto; padding:0; background:none; color:var(--text-secondary); text-decoration:underline; }
button.danger { color:var(--destructive); }
button.danger:hover { background:#fef2f2; border-color:#fca5a5; }
a { color:var(--plum-800); }
.files { list-style:none; padding:0; margin:12px 0 0; }
.files li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:0.5px solid var(--line); }
.files li:last-child { border-bottom:0; }
.files .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.files .meta { color:var(--text-secondary); white-space:nowrap; font-size:13px; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:8px; }
progress { width:120px; height:6px; accent-color:var(--plum-800); }
.result { margin-top:16px; padding-top:4px; border-top:0.5px solid var(--line); }
.error { color:var(--err); margin:12px 0 0; }
.list .item { background:var(--bg); border:0.5px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:8px; }
.item .top { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.item .title { font-weight:500; }
.item .actions { display:flex; gap:6px; flex-shrink:0; }
.item .actions button { height:28px; padding:0 10px; font-size:12px; }
.badge { font-size:12px; border-radius:999px; padding:1px 8px; margin-left:8px; background:var(--grey-100); color:var(--text-secondary); }
.badge.sent { background:var(--plum-50); color:var(--plum-800); }