:root{
  --bg:#f6f7f9; --card:#ffffff; --ink:#1d2230; --muted:#7b8190;
  --line:#e6e8ee; --brand:#e91e63; --brand-ink:#fff; --brand-soft:#fdeef3;
  --ok:#1faa59; --warn:#d98a00; --err:#e0483d;
  --radius:12px;
  --shadow:0 1px 3px rgba(20,24,40,.06),0 8px 24px rgba(20,24,40,.05);
  --shadow-lift:0 6px 20px rgba(20,24,40,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Plus Jakarta Sans","Be Vietnam Pro",sans-serif;
  -webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.err{color:var(--err);font-size:13px;margin-top:8px;min-height:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:8px 14px;border-radius:9px;font-weight:600;cursor:pointer;transition:.12s;font-size:13px;line-height:1;white-space:nowrap}
.btn:hover{border-color:#cfd3df;background:#fafbfc}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 1px 2px rgba(233,30,99,.25)}
.btn.primary:hover{filter:brightness(1.06);background:var(--brand)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--brand-soft);border-color:transparent;color:var(--brand)}
.btn.danger{color:var(--err);border-color:#f3c7c3;background:#fff}
.btn.danger:hover{background:#fdecea;border-color:#eab2ac}
.btn.mini{padding:5px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* inputs */
input,select,textarea{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);font:inherit;font-size:13px;transition:.12s}
input:hover,select:hover,textarea:hover{border-color:#cfd3df}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(233,30,99,.14)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%237b8190' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;display:block;margin:12px 0 5px}

/* pills / badges */
.tag{font-size:10px;background:var(--brand-soft);color:var(--brand);padding:2px 8px;border-radius:999px;font-weight:700;vertical-align:middle}
.count-badge{font-size:12px;font-weight:700;background:var(--brand);color:#fff;padding:3px 11px;border-radius:999px;line-height:1.4}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}
.badge.ok{background:#e3f6ec;color:var(--ok)} .badge.off{background:var(--brand-soft);color:var(--muted)}
.badge.err{background:#fde8e6;color:var(--err)}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,#ffe3ee 0%,var(--bg) 55%)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 30px;width:352px;box-shadow:0 20px 50px rgba(20,24,40,.10)}
.logo{font-size:22px;font-weight:800;color:var(--brand);text-align:center;letter-spacing:-.01em}
.login-card .sub{color:var(--muted);margin:8px 0 22px;text-align:center;font-size:13px}
.login-card input{margin-bottom:12px;padding:11px 12px}
.login-card .primary{width:100%;justify-content:center;padding:12px;font-size:14px;margin-top:2px}

/* header / topbar */
header{display:flex;align-items:center;gap:16px;padding:11px 22px;background:var(--card);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;flex-wrap:wrap;box-shadow:0 1px 0 rgba(20,24,40,.02)}
.brand{font-weight:800;color:var(--ink);font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.brand .tag{margin-left:2px}
header nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.tab{border:1px solid transparent;background:transparent;color:var(--muted);padding:7px 13px;border-radius:9px;
  font-weight:600;cursor:pointer;transition:.12s;font-size:13px}
.tab:hover{background:#f3f4f8;color:var(--ink)}
.tab.active{background:var(--brand-soft);color:var(--brand)}
.who{display:flex;align-items:center;gap:10px}
.health{font-size:15px;color:#c4c8d2;line-height:1}
.health.ok{color:var(--ok)} .health.bad{color:var(--err)}

/* main + toolbars */
main{max-width:1120px;margin:0 auto;padding:24px 22px}
.bar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.bar b{font-size:15px}
h3{margin:20px 0 10px;font-size:14px;display:flex;align-items:center;gap:8px}

/* cards + list rows */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
.list{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;
  display:flex;align-items:center;gap:12px;transition:.12s}
.row:hover{border-color:#dde0e9;box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.row.inactive{opacity:.5}
.row .thumb{width:52px;height:52px;border-radius:9px;object-fit:cover;background:var(--brand-soft);flex-shrink:0;display:block}
.row .main{flex:1;min-width:0}
.row .name{font-weight:700;display:flex;align-items:center;gap:7px}
.row .meta{color:var(--muted);font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}

/* grid (pricing / template fields) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.cell{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 12px 13px;box-shadow:var(--shadow);transition:.12s}
.cell:hover{border-color:#dde0e9;box-shadow:var(--shadow-lift)}
.cell label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px}

/* modal */
.modal-wrap{position:fixed;inset:0;background:rgba(20,24,40,.45);display:flex;align-items:center;justify-content:center;z-index:20;padding:20px;backdrop-filter:blur(2px)}
.modal{background:#fff;border-radius:16px;padding:0 22px;width:460px;max-width:92vw;
  max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(20,24,40,.28)}
/* Sticky so a tall modal can never scroll its own title or its Upload button out of view —
   that is exactly what happened once the art modal grew to five upload slots. */
.modal-head{position:sticky;top:0;z-index:2;background:#fff;padding:20px 0 12px}
.modal .actions{position:sticky;bottom:0;z-index:2;background:#fff;padding:14px 0 20px;margin-top:18px}
/* Wide variant: the art modal lays its slots out side by side instead of in one tall column. */
.modal.wide{width:min(1040px,95vw)}
.art-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;align-items:start}
.art-grid .art-field{margin:0;padding:14px;border:1px solid var(--line);border-radius:11px;background:#fcfcfd}
.art-grid .art-field.span2{grid-column:span 2}
@media(max-width:760px){ .art-grid .art-field.span2{grid-column:span 1} }
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:800;font-size:16px}
.modal .actions{display:flex;gap:8px;margin-top:18px}
.modal .actions .btn{flex:1;justify-content:center}
.modal .art-field{margin-bottom:10px}
.modal .art-field label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;display:block;margin-bottom:5px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:11px 20px;border-radius:11px;font-size:13px;font-weight:600;z-index:30;box-shadow:0 10px 30px rgba(20,24,40,.3)}

/* art upload modal — per-field "where it shows in the app" help */
.modal .art-field{margin-bottom:16px}
.modal .art-field.dim{opacity:.62}
.art-help{margin:4px 0 7px;font-size:12px;line-height:1.5;color:var(--muted)}
.art-have{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--ok);text-decoration:none}
.art-have:hover{text-decoration:underline}
.art-missing{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--err)}
.req{font-size:10px;font-weight:700;background:#fde8e6;color:var(--err);padding:2px 7px;border-radius:999px;margin-left:6px;text-transform:none;letter-spacing:0}
.opt{font-size:10px;font-weight:700;background:#eef0f5;color:var(--muted);padding:2px 7px;border-radius:999px;margin-left:6px;text-transform:none;letter-spacing:0}

/* AI studio preview strip */
/* Columns follow the item count — a video preview shows 2 panes, an image pair 3 — so a
   fixed repeat(3) would leave the video strip with a dead third column. */
.ai-art{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;margin-top:12px}
.ai-art figure{margin:0;display:flex;flex-direction:column;gap:6px;align-items:center}
.ai-art img,.ai-art video{width:100%;border-radius:10px;border:1px solid var(--line);display:block;background:#eef0f4}
.ai-art figcaption{font-size:11px;color:var(--muted);text-align:center}
@media(max-width:700px){ .ai-art{grid-auto-flow:row;grid-auto-columns:auto} }

/* file preview — the picked image itself, not just its name */
.file-preview{margin-top:9px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.file-preview img,.file-preview video{max-width:100%;max-height:230px;border-radius:9px;
  border:1px solid var(--line);display:block;background:#f2f3f7}
.file-meta{font-size:11px;color:var(--muted);word-break:break-all}

/* before/after upload pair */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair-lbl{display:block;font-size:11px;font-weight:700;color:var(--ink);margin-bottom:5px}
@media(max-width:520px){ .pair{grid-template-columns:1fr} }

/* warning box (prompt override safety note) */
.warn-box{background:#fff8ec;border:1px solid #f3d9a3;color:#8a5a00;border-radius:9px;
  padding:10px 12px;font-size:12px;line-height:1.5;margin-bottom:10px}
.warn-box b{color:#a35d00}

/* category reorder arrows */
.order-btns{display:flex;flex-direction:column;gap:2px}
.order-btns .btn.mini{padding:2px 7px;font-size:11px;line-height:1.2}

@media(max-width:720px){
  header{gap:10px;padding:10px 14px}
  header nav{order:3;width:100%}
  main{padding:18px 14px}
}