:root {
  --bg:#f4f3ee; --surface:#fff; --ink:#22262a; --ink-soft:#6b7280;
  --line:#e2e0d8; --accent:#0f766e; --accent-ink:#fff;
  --amber:#b45309; --red:#b91c1c; --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 "Inter",system-ui,sans-serif; }
h1,h2,h3,.brand { font-family:"Space Grotesk","Inter",sans-serif; }
h2 { font-size:1.35rem; margin:0 0 14px; } h3 { font-size:1.05rem; margin:0 0 12px; }
a { color:var(--accent); text-decoration:none; }
.mono { font-family:var(--mono); } .muted { color:var(--ink-soft); }

.top { display:flex; justify-content:space-between; align-items:center; padding:14px 28px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:1.15rem; color:var(--ink); }
.brand span,.login-card h1 span { color:var(--accent); }
.top nav a { margin-left:20px; font-weight:500; color:var(--ink); }
.top nav a:hover { color:var(--accent); } .top nav a.muted { color:var(--ink-soft); }
main { max-width:1100px; margin:26px auto 60px; padding:0 20px; }

.flash { padding:10px 14px; border-radius:8px; margin-bottom:18px; font-weight:500; }
.flash.ok { background:#e6f4f1; color:var(--accent); } .flash.bad { background:#fdecea; color:var(--red); }
.warn { color:var(--amber); font-size:.85rem; margin:8px 0 0; }
.empty { color:var(--ink-soft); } .empty.small { font-size:.85rem; }
.hint { color:var(--ink-soft); font-size:.83rem; margin:8px 0 0; }

.primary-btn { display:inline-block; text-align:center; font:inherit; font-weight:600; cursor:pointer; background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:10px 18px; }
.primary-btn:hover { filter:brightness(1.08); } .primary-btn:disabled { opacity:.6; cursor:wait; }
.primary-btn.small { padding:7px 14px; font-size:.85rem; }

/* ---- RUN screen ---- */
.run-grid { display:grid; grid-template-columns:300px 1fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; min-height:440px; }
.run-input { padding:18px 20px; border-right:1px solid var(--line); }
.run-output { padding:18px 20px; }
@media (max-width:800px){ .run-grid{ grid-template-columns:1fr; } .run-input{ border-right:0; border-bottom:1px solid var(--line);} }

.dropzone { border:1.5px dashed var(--line); border-radius:12px; padding:16px; text-align:center; cursor:pointer; background:var(--bg); transition:border-color .15s; }
.dropzone:hover,.dropzone.drag { border-color:var(--accent); }
.dz-icon { font-size:26px; color:var(--accent); }
.dropzone p { margin:6px 0 0; font-size:12px; color:var(--ink-soft); }
#dz-preview { width:100%; border-radius:8px; }

.detect-box { margin-top:12px; padding:9px 11px; border-radius:8px; font-size:12.5px; }
.detect-box.loading { background:#f1efe8; color:var(--ink-soft); }
.detect-box.ok { background:#e6f4f1; color:#085041; }
.detect-box.err { background:#fdecea; color:var(--red); }

.fld { display:flex; flex-direction:column; gap:4px; font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-top:12px; }
input,select,textarea { font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); width:100%; }
textarea { font-size:.85rem; line-height:1.5; resize:vertical; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); border-color:transparent; }

.seg { display:flex; gap:6px; margin:4px 0 0; }
.seg button { flex:0; font:inherit; cursor:pointer; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:6px 14px; font-size:.85rem; font-weight:600; }
.seg button.on { border-color:var(--accent); background:#e6f4f1; color:#085041; }
#genbtn { margin-top:16px; width:100%; }

.out-placeholder { height:100%; min-height:380px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--ink-soft); text-align:center; }
.gen-spinner,.detect-box.loading::after { }
.gen-spinner { width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:12px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- cards / products ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; display:block; }
.card.product:hover { border-color:var(--accent); }
.card .code { font-size:.78rem; color:var(--accent); font-weight:700; }
.card .name { font-weight:600; margin:2px 0 6px; color:var(--ink); }
.card .meta { font-size:.8rem; color:var(--ink-soft); }

/* ---- product screen ---- */
.page-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.prod-title { display:flex; align-items:center; gap:10px; }
.code-chip { font-family:var(--mono); font-size:.82rem; background:var(--ink); color:#fff; border-radius:6px; padding:2px 8px; }
.prod-name { font-weight:600; font-size:1.1rem; }
.prod-meta { display:flex; gap:12px; align-items:center; font-size:.82rem; color:var(--ink-soft); }
.pill { border:1px solid var(--line); border-radius:6px; padding:3px 10px; color:var(--ink-soft); }
.pill-on { border-color:var(--accent); background:#e6f4f1; color:#085041; font-weight:500; }

.run-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.run-card-head { display:flex; gap:12px; align-items:flex-start; }
.run-src { width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0; border:1px solid var(--line); }
.run-card-info { flex:1; min-width:0; }
.run-card-top { display:flex; justify-content:space-between; font-size:11px; gap:8px; }
.run-prompt { margin:5px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

.thumb-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:12px; }
@media (max-width:700px){ .thumb-grid{ grid-template-columns:repeat(3,1fr);} }
.thumb { position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; background:#f1efe8; }
.thumb.approved { border:2px solid var(--accent); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-badge { position:absolute; top:4px; right:4px; background:var(--accent); color:#fff; font-size:10px; border-radius:12px; padding:1px 6px; }
.thumb-code { position:absolute; bottom:3px; left:5px; font-size:9px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.thumb-actions { position:absolute; bottom:4px; right:4px; opacity:0; transition:opacity .15s; }
.thumb:hover .thumb-actions { opacity:1; }
.thumb-actions form { display:flex; gap:4px; }
.tmini { font:inherit; cursor:pointer; border:0; border-radius:5px; width:22px; height:22px; font-size:12px; background:rgba(255,255,255,.9); color:var(--ink); }
.tmini.ok { background:var(--accent); color:#fff; }

/* ---- registry ---- */
.reg-tools { display:flex; gap:12px; align-items:center; }
.seg-links { display:flex; gap:4px; }
.seg-links a { font-size:12px; padding:4px 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink-soft); }
.seg-links a.on { border-color:var(--accent); background:#e6f4f1; color:#085041; font-weight:500; }
.reg-table-wrap { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.reg-table { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
.reg-table th { text-align:left; padding:9px 10px; font-weight:500; color:var(--ink-soft); background:var(--bg); }
.reg-table td { padding:7px 10px; border-top:1px solid var(--line); vertical-align:middle; }
.reg-table .mono { font-family:var(--mono); }
.reg-thumb { width:38px; height:46px; border-radius:5px; object-fit:cover; display:block; }
.reg-prompt { color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status { font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; }
.s-draft { background:#eef0f2; color:var(--ink-soft); }
.s-approved { background:#e6f4f1; color:#085041; }
.s-rejected { background:#fdecea; color:var(--red); }

/* ---- prompts / login ---- */
.stack { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.tpl { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin-bottom:10px; }
.tpl summary { cursor:pointer; color:var(--accent); font-weight:500; }
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:36px 32px; width:340px; display:flex; flex-direction:column; gap:14px; }
.login-card h1 { margin:0; font-size:1.5rem; } .login-card .sub { margin:-8px 0 4px; color:var(--ink-soft); font-size:.88rem; }
code { font-family:var(--mono); font-size:.82em; background:#ecebe5; padding:1px 5px; border-radius:4px; }

/* ---- lightbox ---- */
.lightbox{position:fixed;inset:0;background:rgba(20,20,18,.88);display:none;align-items:center;justify-content:center;z-index:100;cursor:zoom-out;padding:32px}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 12px 48px rgba(0,0,0,.4)}
.lb-close{position:fixed;top:18px;right:26px;font-size:38px;line-height:1;color:#fff;cursor:pointer;opacity:.85;font-family:sans-serif}
.lb-close:hover{opacity:1}