/* =========================================================================
   app.css  —  App chrome + Banner rendering
   ========================================================================= */
:root{
  --ink:#15161c; --muted:#6b7280; --line:#e6e7ec; --soft:#f4f5f8;
  --brand:#4f46e5; --brand-2:#6d5dfb; --danger:#e0455e; --ok:#16a34a;
  --radius:12px; --shadow:0 6px 24px rgba(20,22,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:#fbfbfd;
}
a{color:var(--brand);text-decoration:none}
hr{border:none;border-top:1px solid var(--line);margin:14px 0}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:12px 22px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.topbar .brand{font-weight:800;letter-spacing:-.3px;font-size:18px;display:flex;align-items:center;gap:8px}
.topbar .brand .dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:inline-block}
.topbar .spacer{flex:1}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:9px 16px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.15s;font-family:inherit;
}
.btn:hover{border-color:#c9cbd6;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:none;color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.32)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 12px;font-size:13px}

/* ---------- dashboard ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:34px 22px 80px}
.h1{font-size:30px;font-weight:800;letter-spacing:-.6px;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 30px}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin:34px 0 14px}

.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.tpl-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;transition:.18s;display:flex;flex-direction:column;
}
.tpl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d7d9e6}
.tpl-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px;letter-spacing:.5px;text-align:center;padding:12px;position:relative}
.tpl-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.18))}
.tpl-body{padding:14px 15px}
.tpl-name{font-weight:700;margin:0 0 5px}
.tpl-desc{font-size:12.5px;color:var(--muted);line-height:1.45;margin:0}
.tpl-engine{display:inline-block;margin-top:9px;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;background:var(--soft);color:var(--muted);padding:3px 8px;border-radius:20px;font-weight:700}

/* saved banners */
.saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.saved-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s}
.saved-card:hover{box-shadow:var(--shadow)}
.saved-thumb{height:150px;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.saved-thumb img{width:100%;height:100%;object-fit:cover}
.saved-thumb .ph{color:#b9bcc9;font-size:30px}
.saved-body{padding:13px 15px}
.saved-name{font-weight:700;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-meta{font-size:12px;color:var(--muted);margin:0 0 12px}
.saved-actions{display:flex;gap:8px}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:46px;text-align:center;color:var(--muted)}

/* ---------- editor layout ---------- */
.editor{display:grid;grid-template-columns:392px 1fr;height:calc(100vh - 61px)}
.panel{border-right:1px solid var(--line);background:#fff;overflow-y:auto;padding:16px}
.canvas{background:#eceef3;overflow:auto;padding:34px;display:flex;justify-content:center}
.canvas-inner{box-shadow:0 10px 40px rgba(20,22,40,.18)}

/* accordions */
.sec{border:1px solid var(--line);border-radius:10px;margin-bottom:11px;overflow:hidden;background:#fff}
.sec>summary{list-style:none;cursor:pointer;padding:13px 14px;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:space-between;background:#fafafe}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::after{content:"⌄";color:var(--muted);font-size:18px;transition:.2s}
.sec[open]>summary::after{transform:rotate(180deg)}
.sec-body{padding:14px}

.f{margin-bottom:12px}
.f-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.f input[type=text],.f select,.row-item input[type=text]{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink)
}
.f input[type=text]:focus,.f select:focus,.row-item input:focus{outline:none;border-color:var(--brand)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}

/* color input */
.color-wrap{display:flex;align-items:center;gap:8px}
.color-wrap input[type=color]{width:42px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.color-wrap code{font-size:11px;color:var(--muted)}

/* toggle */
.tog{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:12px;user-select:none}
.tog input{display:none}
.tog span{width:38px;height:22px;border-radius:20px;background:#d4d6e0;position:relative;transition:.2s}
.tog span::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tog input:checked+span{background:var(--brand)}
.tog input:checked+span::after{left:18px}

/* mini buttons */
.mini{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.mini:hover{background:var(--soft)}
.mini.add{color:var(--brand);border-color:#d6d3ff;background:#f6f5ff;width:100%;margin:6px 0 4px}
.mini.add.big{margin-top:12px;padding:9px}
.mini.danger{color:var(--danger);border-color:#f3d4da;padding:5px 9px}
.mini.danger:hover{background:#fff0f2}

/* card edit blocks */
.card-edit{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;background:#fcfcfe}
.card-edit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sub-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;margin:11px 0 6px}
.row-item{display:flex;gap:7px;align-items:center;margin-bottom:7px}
.row-item input[type=text]{flex:1;min-width:0;padding:7px 9px}
.row-code{flex-wrap:nowrap}

/* image field */
.img-field{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.img-thumb{width:42px;height:42px;border-radius:8px;object-fit:cover;border:1px solid var(--line);background:var(--soft)}
.img-thumb--empty{display:flex;align-items:center;justify-content:center;font-size:9px;color:#b9bcc9;text-align:center}

/* toast */
.bb-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#15161c;color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:200}
.bb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* =========================================================================
   BANNER RENDERING  (.bb-page + children) — theme vars driven
   ========================================================================= */
.bb-page{
  width:794px;min-height:1123px;background:var(--bg);color:var(--text);
  font-family:var(--body-font),sans-serif;display:flex;flex-direction:column;
  position:relative;
}
.bb-header{
  background:var(--hdr);color:var(--hdr-text);padding:18px 26px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.bb-hdr-logo img{max-height:46px}
.bb-hdr-logo .bb-logo-ph{font-size:11px;border:1px dashed rgba(255,255,255,.6);padding:8px 18px;border-radius:8px;opacity:.85}
.bb-title{font-family:var(--title-font),sans-serif;font-size:42px;line-height:1.02;letter-spacing:.5px;font-weight:400}
.bb-subtitle{font-size:14px;opacity:.92;letter-spacing:.5px}

/* hero */
.bb-hero{position:relative;height:240px;overflow:hidden;background:var(--soft)}
.bb-hero img{width:100%;height:100%;object-fit:cover;display:block}
.bb-hero-ph{height:100%;display:flex;align-items:center;justify-content:center;color:#aeb2c4;border:2px dashed #d2d5e2;font-weight:600}
.bb-hero-badge{position:absolute;left:22px;bottom:22px;background:var(--accent);color:#fff;font-weight:800;font-size:15px;letter-spacing:1px;padding:12px 16px;line-height:1.15;text-transform:uppercase;max-width:140px}

/* grid */
.bb-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:16px;padding:22px}
.bb-card{padding:8px;display:flex;flex-direction:column;gap:8px;border-radius:14px}
.bb-card--framed{border:2px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.05);padding:14px}

.bb-products{display:flex;justify-content:center;align-items:flex-end;gap:10px}
.bb-products--v{align-items:stretch}
.bb-product{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
.bb-product--v{flex-direction:row;align-items:center;gap:4px}

.bb-img{width:100%;display:flex;align-items:center;justify-content:center}
.bb-img img{max-width:100%;max-height:210px;object-fit:contain;display:block}
.bb-product-img{min-height:130px}
.bb-img--empty{min-height:130px;border:2px dashed var(--border);border-radius:10px;color:#b4b7c6;font-size:12px;font-weight:600}
.bb-product--v .bb-img--empty{min-height:160px}

.bb-label{font-size:13px;font-weight:700;letter-spacing:.5px;text-align:center;color:var(--text)}
.bb-label--b{margin-top:2px}
.bb-label--v{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:14px}

.bb-codes{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.bb-code{display:flex;flex-direction:column;align-items:center;gap:2px}
.bb-size{font-size:12px;font-weight:600;letter-spacing:.5px}
.bb-sku{font-size:11px;color:var(--text);opacity:.85}
.bb-code .bb-bc{max-width:130px;height:auto;display:block}

/* footer */
.bb-footer{margin-top:auto;border-top:2px solid var(--border);padding:14px 26px;display:flex;align-items:center;justify-content:center;gap:12px}
.bb-foot-logo{max-height:40px}
.bb-foot-text{font-weight:800;font-size:16px;color:var(--accent);font-family:var(--title-font),sans-serif}

/* ---- spec engine ---- */
.bb-spec-block{display:flex;gap:24px;padding:26px;align-items:center}
.bb-spec-block--rev{flex-direction:row}
.bb-spec-img{flex:0 0 44%}
.bb-spec-img img{max-height:330px;width:100%;object-fit:contain}
.bb-spec-img.bb-img--empty{min-height:260px;flex:0 0 44%}
.bb-spec-info{flex:1}
.bb-spec-title{font-family:var(--title-font),sans-serif;font-size:40px;color:var(--accent);margin:0 0 14px;line-height:1}
.bb-spec-row{font-size:18px;font-weight:700;margin:6px 0}
.bb-spec-label{color:var(--text)}
.bb-spec-val{color:var(--accent)}
.bb-spec-dim{margin-top:14px;font-size:18px}
.bb-spec-dim b{font-size:22px}
.bb-features{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:10px 26px 26px}
.bb-feature{border:2px solid var(--accent);color:var(--text);border-radius:30px;padding:9px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}

@media (max-width:900px){
  .editor{grid-template-columns:1fr;height:auto}
  .panel{max-height:none;border-right:none;border-bottom:1px solid var(--line)}
  .canvas{padding:16px}
  .bb-page{transform:scale(.46);transform-origin:top center;margin-bottom:-580px}
}

/* ===================== Dashboard: Media Library ===================== */
.sub2{ color:#6b7280; font-size:13px; margin:-6px 0 14px; max-width:680px; }

.dropzone{
  border:2px dashed #c7ccd9; border-radius:14px; background:#fafbff;
  padding:26px 20px; text-align:center; cursor:pointer; transition:.15s;
  outline:none;
}
.dropzone:hover, .dropzone:focus{ border-color:#5b6bb5; background:#f4f6ff; }
.dropzone.drag{ border-color:#5b6bb5; background:#eef1ff; transform:translateY(-1px); }
.dz-ico{ font-size:26px; display:block; margin-bottom:6px; color:#5b6bb5; }
.dz-main{ margin:2px 0; font-size:14px; color:#374151; }
.dz-main b{ color:#3a4a8c; }
.dz-hint{ margin:4px 0 0; font-size:12px; color:#9aa1b2; }

.media-status{ min-height:0; }
.media-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px; margin-top:16px;
}
.media-loading,.media-empty{ color:#9aa1b2; font-size:13px; padding:8px 2px; grid-column:1/-1; }
.media-card{
  background:#fff; border:1px solid #e6e8f0; border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(20,25,60,.04);
}
.media-thumb{
  aspect-ratio:1/1; background:#f3f4f8 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect width="20" height="20" fill="%23eef0f6"/></svg>');
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-meta{ font-size:11px; color:#9aa1b2; padding:6px 10px 0; }
.media-row{ display:flex; gap:6px; padding:8px 10px 10px; }
.media-row .copy{ flex:1; }

/* ===================== Toast (dashboard) ===================== */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:#11152b; color:#fff; padding:11px 18px; border-radius:10px; font-size:14px;
  box-shadow:0 8px 26px rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:.2s; z-index:9999;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }