:root { --bg:#f7f6f2; --card:#fff; --ink:#1f1f1f; --muted:#6b6b6b; --line:#e4e1da; --accent:#7a1f2b; --accent2:#f1e6e4; --ok:#2f7d4a; --err:#b3261e; }
* { box-sizing:border-box }
body { margin:0; font:15px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg) }
a { color:var(--accent); text-decoration:none } a:hover { text-decoration:underline }
.wrap { max-width:1200px; margin:0 auto; padding:0 16px }
header.top { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5 }
header.top .wrap { display:flex; align-items:center; gap:14px; min-height:52px; flex-wrap:nowrap } @media (max-width:900px) { header.top .wrap { flex-wrap:wrap } }
.brand { font-weight:700; letter-spacing:.06em; color:var(--ink); display:inline-flex; align-items:center; gap:8px } .logo { width:30px; height:30px; border-radius:50% } .logo-big { width:96px; height:96px; border-radius:50%; display:block; margin:0 auto 10px }
header nav { display:flex; gap:12px; flex-wrap:nowrap; white-space:nowrap; font-size:14px } header nav a { color:var(--ink); padding:6px 0; border-bottom:2px solid transparent } header nav a.on { border-color:var(--accent); color:var(--accent) }
.quick { margin-left:auto; display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:14px }
.icon { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:16px; cursor:pointer; color:var(--ink) }
.pill { border:1px solid var(--line); border-radius:16px; padding:4px 10px; color:var(--ink); background:var(--card) } .pill b { background:var(--accent); color:#fff; border-radius:10px; padding:0 6px; font-size:12px; margin-left:3px }
.drop { position:absolute; right:16px; top:52px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; width:340px; box-shadow:0 8px 24px rgba(0,0,0,.08) } .drop div { padding:6px 0; border-bottom:1px solid var(--line); font-size:14px }
main { padding:18px 16px 60px }
h1 { font-size:22px; margin:8px 0 12px } h2 { font-size:17px; margin:22px 0 10px } h3 { font-size:15px; margin:0 0 8px } h2 small, h1 small { font-weight:400; color:var(--muted); font-size:13px }
.head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.right { margin-left:auto }
.muted { color:var(--muted) } .small { font-size:13px } .nowrap { white-space:nowrap }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:12px 0 } .card.narrow { max-width:560px; margin:40px auto } .card.small-pad { padding:8px 10px; margin:6px 0 }
.cards { display:flex; flex-direction:column; gap:8px }
.card-row { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; flex-wrap:wrap } .card-row .txt { flex:1; min-width:240px } .card-row .acts, .acts { display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.ico { margin-right:4px }
.btn { display:inline-block; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:7px 12px; font:inherit; cursor:pointer; line-height:1.2 } .btn:hover { border-color:#bbb; text-decoration:none }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff } .btn.danger { color:var(--err) } .btn.small { padding:4px 8px; font-size:13px } .btn:disabled { opacity:.5; cursor:default }
.link { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; padding:0 } .link.small { font-size:12px }
form.inline { display:inline } .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 } .stack { display:flex; flex-direction:column; gap:10px }
input[type=text], input:not([type]), input[type=number], input[type=time], input[type=file], input[type=color], select, textarea { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#fff; max-width:100% }
textarea { width:100%; resize:vertical } .wide { width:100%; flex:1 } .short { width:200px } .tiny { width:64px; padding:3px 6px }
.flash { padding:10px 14px; border-radius:8px; background:#e8f3ec; border:1px solid #cfe5d6; margin:8px 0 } .flash.err { background:#fbeae9; border-color:#f0c9c6 }
.tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; background:#eee } .tag.queued { background:#e7effa } .tag.in_work,.tag.generating,.tag.step_review,.tag.step_input { background:#fbf1dc } .tag.ready,.tag.ok { background:#e2f2e6 } .tag.published { background:#ddd } .tag.cancelled,.tag.no,.tag.rejected { background:#f6dedc }
table.list { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden } table.list th, table.list td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top } table.list th { font-weight:600; font-size:13px; color:var(--muted); background:#faf9f6 } table.list.small td { padding:4px 6px }
tr.q { background:#fbfaf7 } tr.dragging { opacity:.4 } tr.over td { border-top:2px solid var(--accent) } .handle { cursor:grab; color:var(--muted) } tr.unread { background:#fffaf0 } tr.slot.drop-over { outline:2px dashed var(--accent) }
.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 }
.chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center } .chip { display:inline-flex; gap:4px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:3px 10px; background:var(--card); font-size:13px } .chip.dim { opacity:.55 } .drag-idea { cursor:grab }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px } .grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px } @media (max-width:800px) { .grid2, .grid3 { grid-template-columns:1fr } }
.fcard { display:block; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--card); cursor:pointer } .fcard.dim { opacity:.6 } .fcard:has(input:checked) { border-color:var(--accent); background:var(--accent2) }
.opt { display:block; padding:4px 0 } .mini { width:36px; height:36px; object-fit:cover; border-radius:6px; vertical-align:middle }
.wizard { display:grid; grid-template-columns:230px 1fr; gap:14px; align-items:start } @media (max-width:800px) { .wizard { grid-template-columns:1fr } }
.steps { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px } .steps form { display:block } .step { display:block; width:100%; text-align:left; background:none; border:0; padding:8px; border-radius:8px; font:inherit; cursor:pointer; color:var(--ink) } .step.cur { background:var(--accent2); font-weight:600 } .step.done span { color:var(--ok) } .step small { display:block; font-weight:400 }
.pane { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; min-height:300px }
.progress { padding:30px; text-align:center } .progress:before { content:''; display:block; width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; margin:0 auto 12px; animation:spin 1s linear infinite } @keyframes spin { to { transform:rotate(360deg) } }
.player { max-width:320px; max-height:560px; border-radius:8px; background:#000 }
.thumbs-grid { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 } .th { position:relative; width:110px; border:1px solid var(--line); border-radius:8px; padding:4px; background:#fff; font-size:12px } .th img, .th video { width:100%; height:110px; object-fit:cover; border-radius:6px; display:block } .th .x { position:absolute; top:6px; right:6px; background:#fff; border:1px solid var(--line); border-radius:50%; width:22px; height:22px; cursor:pointer } .th.dragging { opacity:.4 } .thumbs-grid.big .th { width:180px } .thumbs-grid.big .th img { height:180px } .th .ph { display:block; height:110px; text-align:center; line-height:110px; color:var(--muted); background:#f3f1ec; border-radius:6px } .th.add { display:flex; align-items:center; justify-content:center; min-height:120px } .th.small { width:70px } .th.small img { height:70px }
.thumb { display:inline-block; border:1px solid var(--line); border-radius:6px; padding:4px 8px; background:#faf9f6; font-size:13px } .thumbs img { width:40px; height:40px; object-fit:cover; border-radius:4px; margin-right:2px }
.result { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start } @media (max-width:800px) { .result { grid-template-columns:1fr } }
pre.caption, pre.rules, pre.code { white-space:pre-wrap; font:inherit; background:#faf9f6; border:1px solid var(--line); border-radius:8px; padding:10px } pre.code { font-family:monospace; user-select:all }
.tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px } .tabs a { padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink) } .tabs a.on { background:var(--accent); border-color:var(--accent); color:#fff }
ul.plain { list-style:none; padding:0; margin:0 } ul.plain li { padding:4px 0 }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:20 } .modal[hidden] { display:none } .modal .box { background:var(--card); border-radius:12px; padding:18px; width:420px; max-width:92vw } .modal .close { display:block; margin-top:10px }
label.big { font-size:16px; display:block; margin:12px 0 }
details summary { cursor:pointer }
.switch select { padding:4px 6px; max-width:150px; font-size:13px }
.slide-row textarea { width:100%; margin-top:4px }