:root { --ink:#222; --muted:#6b6b6b; --line:#ddd; --accent:#2a5bd7; --bg:#fafafa; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
.top { padding:12px 24px; border-bottom:1px solid var(--line); background:#fff; }
.top a { font-weight:600; text-decoration:none; color:var(--ink); }
main { max-width:980px; margin:0 auto; padding:24px; }
section { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 20px; margin:16px 0; }
h1 { font-size:1.6rem; margin:0 0 4px; } h2 { font-size:1.15rem; margin:0 0 12px; }
.muted { color:var(--muted); font-size:.9rem; } .warn { color:#8a4b00; background:#fff3d6; padding:8px 12px; border-radius:6px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .wide { grid-column:1 / -1; }
label { display:flex; flex-direction:column; gap:4px; font-size:.9rem; } label.inline { flex-direction:row; align-items:center; gap:6px; }
input[type=text], input:not([type]), textarea, select { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; width:100%; }
textarea { font-family:ui-monospace, Menlo, monospace; font-size:.9rem; }
button { font:inherit; padding:6px 14px; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:6px; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
table { width:100%; border-collapse:collapse; margin-top:12px; } th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
th:nth-child(n+3), td:nth-child(n+3) { text-align:center; }
.thumb img { width:56px; height:56px; object-fit:cover; border-radius:4px; display:block; }
.assets { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px; } .assets figure { margin:0; width:110px; font-size:.75rem; word-break:break-all; } .assets img { width:110px; height:110px; object-fit:cover; border-radius:6px; }
.status { background:#f2f2f2; padding:8px 12px; border-radius:6px; white-space:pre-wrap; min-height:1.5em; margin:8px 0 0; font-size:.85rem; }
details { border:1px solid var(--line); border-radius:6px; padding:8px 12px; margin:8px 0; } summary { cursor:pointer; font-weight:600; }
.badge { background:#ffe8a3; color:#5b4500; font-size:.75rem; padding:1px 8px; border-radius:99px; margin-left:6px; }
.list { list-style:none; padding:0; } .list li { padding:8px 0; border-bottom:1px solid var(--line); }
pre { white-space:pre-wrap; font-size:.85rem; }
@media (max-width:640px){ .grid{grid-template-columns:1fr;} main{padding:12px;} }

.versions { display:grid; gap:14px; margin-top:16px; }
.version-card { display:grid; grid-template-columns:240px 1fr; gap:16px; border:1px solid var(--line); border-radius:8px; padding:12px; align-items:start; }
.version-card h3 { margin:0 0 2px; font-size:1.05rem; }
.version-card .shot img { width:100%; border-radius:6px; border:1px solid var(--line); display:block; }
.version-card .noshot { background:#f2f2f2; color:var(--muted); font-size:.85rem; border-radius:6px; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; }
.version-card .vmeta p { margin:4px 0; } .folder { word-break:break-all; font-size:.75rem; }
a.open { font-weight:600; }
button.take-screenshot { background:#fff; color:var(--accent); }
table.costs { margin-top:8px; font-size:.9rem; } table.costs th, table.costs td { text-align:left; } tr.total td { font-weight:600; }
.add-cost { margin-top:12px; }
@media (max-width:640px){ .version-card{grid-template-columns:1fr;} }

.status-wait { background:#fff3d6; color:#8a4b00; padding:2px 10px; border-radius:99px; font-size:.85rem; }
code { background:#f2f2f2; padding:1px 5px; border-radius:4px; font-size:.85em; word-break:break-all; }

.job { margin:8px 0 0; border-radius:8px; border:1px solid var(--line); background:#f2f2f2; font-size:.9rem; }
.job[hidden] { display:none; }
.job .job-head { display:flex; align-items:center; gap:10px; padding:10px 14px; }
.job .job-icon { flex:none; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:.8rem; }
.job .job-body { padding:0 14px 10px 46px; }
.job ul { margin:0 0 6px; padding-left:18px; }
.job details { border:0; padding:0; margin:4px 0 0; } .job details summary { font-weight:400; color:var(--muted); }
.job pre { margin:6px 0 0; white-space:pre-wrap; font-size:.8rem; }
.job-running { background:#eaf0ff; border-color:#b9c9f5; } .job-running .job-icon { background:var(--accent); animation:job-spin 1s linear infinite; border:3px solid #fff; border-top-color:var(--accent); box-sizing:border-box; background:#fff; color:transparent; }
.job-done { background:#e6f6ea; border-color:#a9d9b5; } .job-done .job-icon { background:#1e8a3c; }
.job-problems { background:#fff3d6; border-color:#e6c36a; } .job-problems .job-icon { background:#b86e00; }
.job-failed { background:#fde8e8; border-color:#e49a9a; border-left:6px solid #c62828; } .job-failed .job-icon { background:#c62828; }
.job-failed .job-head strong { color:#8c1c1c; font-size:1rem; }
@keyframes job-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .job-running .job-icon { animation:none; } }
.ok { color:#1b6b2c; font-weight:600; margin:4px 0; }
.warn ul { margin:4px 0 0 18px; padding:0; }
button.generate-site { background:var(--accent); }

.top { display:flex; justify-content:space-between; align-items:center; }
.logout { display:flex; gap:8px; align-items:center; margin:0; }
button.link { background:none; border:none; color:var(--accent); padding:0; text-decoration:underline; }
form.stack { display:flex; flex-direction:column; gap:12px; max-width:360px; }

.dropzone { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 2.5rem 1rem; border: 2px dashed var(--border, #b8b8b8); border-radius: 8px; text-align: center; cursor: pointer; }
.dropzone.over { border-color: currentColor; background: rgba(127, 127, 127, .1); }
.dropzone input[type=file] { margin-top: .5rem; }
.suggestions { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--border, #b8b8b8); border-radius: 6px; }
.suggestions ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.suggestions li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; padding: .25rem 0; }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:16px 0 0; }
.tabs button { background:none; color:var(--muted); border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; padding:8px 16px; margin-bottom:-1px; }
.tabs button:hover { color:var(--ink); }
.tabs button[aria-selected=true] { background:#fff; color:var(--ink); font-weight:600; border-color:var(--line); }
[role=tabpanel][hidden] { display:none; }

.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .card-head h2 { margin:0; }
.card-actions { display:flex; gap:4px; }
.icon-btn { background:none; color:var(--muted); border:1px solid transparent; padding:2px 10px; font-size:1.1rem; line-height:1.4; }
.icon-btn:hover { color:var(--ink); border-color:var(--line); }
#crm-expand[aria-expanded=true] { transform:rotate(180deg); }
#crm-more { padding:0; } #crm-more[hidden], .edit-only[hidden] { display:none; }
#crm-form input[readonly], #crm-form textarea[readonly] { border-color:transparent; background:transparent; padding-left:0; resize:none; }
#crm-form input[readonly]:focus, #crm-form textarea[readonly]:focus { outline:none; }
table.interactions { font-size:.9rem; margin-top:0; } table.interactions th, table.interactions td { text-align:left; }

.processed-cell { text-align:left; }
.processed-cell label { display:inline-flex; margin-right:8px; font-weight:600; color:#1b6b2c; }

.stepper { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; counter-reset:step; }
.step a { display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-top:4px solid var(--line); border-radius:6px; text-decoration:none; color:var(--ink); height:100%; }
.step .dot { width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; color:#fff; background:#c9c9c9; }
.step .muted { font-size:.8rem; }
.step-done a { border-top-color:#1e8a3c; } .step-done .dot { background:#1e8a3c; }
.step-current a { border-top-color:var(--accent); background:#eaf0ff; } .step-current .dot { background:var(--accent); }
.step-attention a { border-top-color:#b86e00; background:#fff3d6; } .step-attention .dot { background:#b86e00; }
.step-todo { opacity:.75; }
table.flow-versions th, table.flow-versions td { text-align:left; vertical-align:top; }
.review-row { margin:6px 0 0; } .review-note { max-width:220px; font:inherit; padding:4px 8px; border:1px solid var(--line); border-radius:6px; }
.rejected { color:#a12626; font-weight:600; }
button.secondary, .invite-btn { background:#fff; color:var(--accent); }
#invite-dialog { max-width:560px; width:90vw; border:1px solid var(--line); border-radius:8px; }
#invite-dialog textarea { width:100%; } #invite-shot { max-width:100%; border:1px solid var(--line); border-radius:6px; margin:8px 0; }

.flow-shot { width:200px; max-width:100%; border:1px solid var(--line); border-radius:6px; display:block; margin-bottom:6px; }
.rating-line { margin:0 0 6px; } .rate-note { max-width:180px; font:inherit; padding:4px 8px; border:1px solid var(--line); border-radius:6px; } .rate-score { width:auto; }

.page-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; } .page-head h1 { margin:0; } .page-head form { margin:0; }
.badge-btn { background:var(--accent); color:#fff; border:none; border-radius:99px; padding:2px 12px; font-size:.85rem; font-weight:600; }