:root { --brand:#6d3bbf; --brand-dark:#552d96; --ink:#1f2330; --muted:#6b7280; --line:#e5e7eb; --bg:#f6f5fb; --ok:#16a34a; --bad:#dc2626; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
.top { display:flex; gap:1rem; align-items:baseline; padding:1rem 1.5rem; background:#fff; border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--brand); font-size:1.15rem; }
.muted { color:var(--muted); font-size:.92rem; }
.layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.25rem; max-width:1100px; margin:1.5rem auto; padding:0 1rem; }
@media (max-width:860px){ .layout{ grid-template-columns:1fr; } }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.5rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card.narrow { max-width:520px; margin:12vh auto; text-align:center; }
h1,h2 { margin:.2rem 0 1rem; } h2{ font-size:1.15rem; }
.steps { display:flex; gap:.4rem; list-style:none; padding:0; margin:0 0 1.5rem; flex-wrap:wrap; }
.steps li { flex:1; min-width:70px; text-align:center; font-size:.8rem; padding:.45rem .3rem; border-radius:8px; background:var(--bg); color:var(--muted); }
.steps li.on { background:var(--brand); color:#fff; font-weight:600; }
.steps li.done { background:#ede9fe; color:var(--brand-dark); }
label.field { display:block; margin:0 0 1rem; font-weight:600; font-size:.92rem; }
label.field small { display:block; font-weight:400; color:var(--muted); }
input, select { width:100%; margin-top:.3rem; padding:.65rem .75rem; border:1px solid #cbd5e1; border-radius:8px; font:inherit; background:#fff; }
input:focus, select:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.err { color:var(--bad); font-size:.85rem; font-weight:500; min-height:1.1em; display:block; }
.hint-ok { color:var(--ok); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media (max-width:560px){ .row{ grid-template-columns:1fr; } }
.actions { display:flex; justify-content:space-between; gap:.75rem; margin-top:1.25rem; }
button { padding:.7rem 1.3rem; border:0; border-radius:9px; font:inherit; font-weight:600; cursor:pointer; background:var(--brand); color:#fff; }
button.secondary { background:#fff; color:var(--brand-dark); border:1px solid #cbd5e1; }
button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible { outline:3px solid #c4b5fd; outline-offset:2px; }
.alert { background:#fef2f2; color:#991b1b; padding:.75rem 1rem; border-radius:8px; }
.notice { background:#f5f3ff; color:#4c1d95; padding:.75rem 1rem; border-radius:8px; }
.summary { width:100%; border-collapse:collapse; margin:.5rem 0 1rem; } .summary th { text-align:left; width:38%; color:var(--muted); font-weight:500; } .summary th,.summary td{ padding:.45rem .2rem; border-bottom:1px solid var(--line); vertical-align:top; }
.logo-preview { max-height:90px; max-width:260px; margin-top:.6rem; display:block; }
.chat { display:flex; flex-direction:column; max-height:75vh; }
.log { flex:1; overflow:auto; display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0 .8rem; min-height:140px; }
.msg { padding:.55rem .8rem; border-radius:12px; max-width:92%; font-size:.93rem; white-space:pre-wrap; }
.msg.user { align-self:flex-end; background:var(--brand); color:#fff; } .msg.bot { align-self:flex-start; background:var(--bg); }
#chat-form { display:flex; gap:.5rem; } #chat-form input { margin:0; }
.file { display:block; margin-top:.8rem; font-size:.88rem; color:var(--brand-dark); cursor:pointer; text-decoration:underline; } .file input { display:none; }
.progress { list-style:none; padding:0; margin:1rem 0; } .progress li { display:flex; gap:.7rem; padding:.55rem 0; border-bottom:1px solid var(--line); color:var(--muted); }
.progress li.done { color:var(--ink); } .progress li.running { color:var(--brand-dark); font-weight:600; } .progress li.failed { color:var(--bad); }
.bar { height:8px; border-radius:99px; background:var(--line); overflow:hidden; } .bar > i { display:block; height:100%; background:var(--brand); transition:width .6s; }
.done-card { text-align:center; padding:1rem 0; } .done-card a.btn { display:inline-block; margin-top:1rem; padding:.8rem 1.5rem; border-radius:9px; background:var(--brand); color:#fff; text-decoration:none; font-weight:600; }