:root{
  --blue:#15366D; --blue-d:#0F2855; --cyan:#4FB3D9; --cyan-l:#BFE3F0;
  --red:#E63946; --ink:#1A2230; --muted:#5A6678; --line:#E3E8EF;
  --bg:#F4F6FA; --card:#FFFFFF; --ok:#1f9d57;
  --shadow:0 1px 3px rgba(16,40,85,.08), 0 6px 20px rgba(16,40,85,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Barlow','Inter',-apple-system,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45;
  display:flex; flex-direction:column;
}
em{font-style:normal}
button{font-family:inherit; cursor:pointer}

/* ---------- TOPBAR ---------- */
.topbar{
  background:var(--blue); color:#fff; display:flex; align-items:center;
  gap:24px; padding:10px 20px; box-shadow:var(--shadow); z-index:5;
}
.brand{display:flex; align-items:center; gap:9px}
.brand-leaf{
  width:20px;height:20px;background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 10 Q20 30 15 60 Q15 75 35 80 Q30 60 45 50 Q60 60 55 80 Q75 75 75 60 Q70 30 50 10 Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 10 Q20 30 15 60 Q15 75 35 80 Q30 60 45 50 Q60 60 55 80 Q75 75 75 60 Q70 30 50 10 Z'/></svg>") center/contain no-repeat;
}
.brand-name{font-family:'Barlow Condensed';font-weight:800;font-size:22px;letter-spacing:.5px}
.brand-sub{font-size:12px;opacity:.8;border-left:1px solid rgba(255,255,255,.3);padding-left:10px}
.brand-sub em{background:var(--red);padding:1px 6px;border-radius:4px;font-size:10px;font-weight:700;margin-left:4px}
.topbar-options{display:flex; align-items:flex-end; gap:14px; flex:1}
.topbar-options label{display:flex; flex-direction:column; font-size:11px; opacity:.85; gap:3px}
.topbar-options label.grow{flex:1; max-width:360px}
.topbar-options select,.topbar-options input{
  font-family:inherit; font-size:13px; padding:6px 9px; border:none; border-radius:6px;
  background:rgba(255,255,255,.95); color:var(--ink);
}

/* ---------- LAYOUT ---------- */
.layout{flex:1; display:grid; grid-template-columns:1fr 360px; gap:0; min-height:0}
.browser{display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line)}
.staging{display:flex; flex-direction:column; min-height:0; background:#fff}

/* ---------- BROWSER ---------- */
.browser-toolbar{padding:12px 16px; display:flex; gap:14px; align-items:center; border-bottom:1px solid var(--line); background:#fff}
#search{flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit}
#search:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-l)}
.toggles{display:flex; gap:14px; font-size:12px; color:var(--muted); white-space:nowrap}
.toggles label{display:flex; align-items:center; gap:5px; cursor:pointer}

.browser-body{flex:1; display:grid; grid-template-columns:210px 1fr; min-height:0}
.cat-rail{border-right:1px solid var(--line); overflow-y:auto; padding:8px; background:#fbfcfe}
.cat-item{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:7px 10px; border-radius:7px; font-size:13px; cursor:pointer; color:var(--ink);
}
.cat-item:hover{background:#eef2f8}
.cat-item.active{background:var(--blue); color:#fff}
.cat-item .c-count{font-size:11px; opacity:.7; background:rgba(0,0,0,.06); padding:1px 7px; border-radius:10px}
.cat-item.active .c-count{background:rgba(255,255,255,.2)}

.cards-wrap{display:flex; flex-direction:column; min-height:0}
.cards-head{display:flex; justify-content:space-between; align-items:center; padding:8px 14px; font-size:12px; color:var(--muted)}
.cards{flex:1; overflow-y:auto; padding:0 14px 18px; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); grid-auto-rows:max-content; gap:12px; align-content:start}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  cursor:pointer; transition:.12s; position:relative; display:block;
}
.card:hover{border-color:var(--cyan); box-shadow:var(--shadow); transform:translateY(-1px)}
.card.selected{border-color:var(--ok); box-shadow:0 0 0 2px rgba(31,157,87,.25)}
.card-thumb{height:120px; background:#f3f5f9 center/contain no-repeat; display:flex; align-items:center; justify-content:center}
.card-thumb img{max-width:100%; max-height:100%; object-fit:contain}
.card-thumb.no-img{background:repeating-linear-gradient(45deg,#f4f6f9,#f4f6f9 6px,#eef1f5 6px,#eef1f5 12px); color:#b6bfce; font-size:11px}
.card-body{padding:8px 10px}
.card-name{font-weight:600; font-size:13px; line-height:1.25; margin-bottom:6px}
.card-meta{display:flex; gap:5px; flex-wrap:wrap}
.tag{font-size:10px; padding:2px 7px; border-radius:10px; background:#eef2f8; color:var(--muted)}
.tag.tech{background:var(--cyan-l); color:var(--blue-d); font-weight:600}
.card-check{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.9); border:1px solid var(--line); display:flex; align-items:center;
  justify-content:center; font-size:13px; color:transparent;
}
.card.selected .card-check{background:var(--ok); border-color:var(--ok); color:#fff}

/* ---------- STAGING ---------- */
.staging-head{display:flex; justify-content:space-between; align-items:center; padding:14px 16px 6px}
.staging-head h2{font-size:16px; display:flex; align-items:center; gap:8px}
.pill{background:var(--blue); color:#fff; font-size:12px; min-width:24px; text-align:center; padding:2px 8px; border-radius:12px}
.staging-hint{font-size:11px; color:var(--muted); padding:0 16px 10px}
.staging-list{flex:1; overflow-y:auto; padding:0 12px 12px; min-height:0}
.empty-state{color:var(--muted); text-align:center; font-size:13px; padding:40px 20px; line-height:1.6}

.stage-cat{font-family:'Barlow Condensed'; font-weight:700; font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--blue); margin:12px 4px 5px; display:flex; align-items:center; gap:6px}
.stage-cat::after{content:""; flex:1; height:1px; background:var(--line)}
.stage-item{
  display:flex; align-items:center; gap:9px; padding:7px 9px; background:#fff; border:1px solid var(--line);
  border-radius:8px; margin-bottom:6px; font-size:13px;
}
.stage-item.dragging{opacity:.4}
.stage-item.drop-target{border-color:var(--cyan); box-shadow:0 -2px 0 var(--cyan)}
.stage-grip{color:#c2cad6; cursor:grab; font-size:14px; user-select:none}
.stage-thumb{width:34px; height:34px; border-radius:5px; background:#f3f5f9; flex-shrink:0; border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center}
.stage-thumb img{width:100%; height:100%; object-fit:contain}
.stage-name{flex:1; line-height:1.2}
.stage-name small{display:block; color:var(--muted); font-size:10px}
.stage-remove{border:none; background:none; color:#c2cad6; font-size:16px; padding:2px 4px; border-radius:4px}
.stage-remove:hover{color:var(--red); background:#fdecee}

.staging-actions{padding:12px 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.staging-actions .row{display:flex; gap:8px}
.staging-actions .row .btn{flex:1}

/* ---------- BUTTONS ---------- */
.btn{
  padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
  font-size:14px; font-weight:600; transition:.12s;
}
.btn:hover{border-color:var(--cyan)}
.btn.primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn.primary:hover{background:var(--blue-d)}
.btn.ghost{background:#f6f8fb; font-weight:500}
.btn.small{padding:7px 12px; font-size:13px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.link-btn{border:none; background:none; color:var(--cyan); font-size:12px; font-weight:600}
.link-btn:hover{text-decoration:underline}
.link-btn.danger{color:var(--red)}

/* ---------- MODAIS ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(16,32,60,.55); display:flex; align-items:center; justify-content:center; z-index:20; padding:24px}
.modal-overlay[hidden]{display:none}
.modal{background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.3); width:440px; max-width:100%; display:flex; flex-direction:column; max-height:90vh}
.modal-wide{width:min(960px,95vw); height:90vh}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px}
.modal-head-actions{display:flex; align-items:center; gap:10px}
.modal-body{padding:18px; overflow-y:auto}
.modal-foot{padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px}
.icon-btn{border:none; background:none; font-size:16px; color:var(--muted); padding:4px 8px; border-radius:6px}
.icon-btn:hover{background:#f0f2f6; color:var(--ink)}
#preview-frame{flex:1; border:none; width:100%; background:#525659}
.field{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600}
.field input{padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit}
.muted{color:var(--muted); font-size:12px; margin-top:8px}

.saved-list{display:flex; flex-direction:column; gap:8px}
.saved-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px}
.saved-item .s-main{flex:1}
.saved-item .s-name{font-weight:600}
.saved-item .s-meta{font-size:11px; color:var(--muted)}
.saved-empty{color:var(--muted); text-align:center; padding:24px}

/* ---------- TOAST ---------- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:11px 18px; border-radius:8px; font-size:13px; z-index:50; box-shadow:var(--shadow); max-width:90vw}
.toast.err{background:var(--red)}
.toast.ok{background:var(--ok)}

/* ---------- LOADING ---------- */
.spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .staging{border-top:1px solid var(--line)}
  .browser-body{grid-template-columns:1fr}
  .cat-rail{display:none}
}

/* ======================================================================
   WIZARD — 3 etapas (Seleção · Curadoria · Exportação)
   ====================================================================== */
#wizard{flex:1; display:flex; flex-direction:column; min-height:0}
.step{display:none}
.step.step-active{flex:1; min-height:0}
.step[data-step="1"].step-active,
.step[data-step="3"].step-active{display:block; overflow-y:auto}
.step[data-step="2"].step-active{display:flex; flex-direction:column}

/* ---------- STEPPER ---------- */
.stepper{
  display:flex; align-items:center; justify-content:center; gap:0;
  padding:12px 20px; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:4;
}
.step-dot{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; padding:0 6px; color:var(--muted);
}
.step-dot .num{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-family:'Barlow Condensed'; font-size:15px; background:#fff; transition:.15s;
}
.step-dot .lbl{font-family:'Barlow Condensed'; font-weight:700; font-size:12px; letter-spacing:.4px; text-transform:uppercase}
.step-dot.active{color:var(--ink)}
.step-dot.active .num{background:var(--blue); border-color:var(--blue); color:#fff}
.step-dot.done{color:var(--cyan)}
.step-dot.done .num{background:var(--cyan); border-color:var(--cyan); color:#fff}
.step-dot.done .num::after{content:"✓"}
.step-dot.done .num{font-size:0}
.step-dot.done .num::after{font-size:15px}
.step-dot:disabled{cursor:default}
.step-dot:not(:disabled):not(.active){cursor:pointer}
.step-dot:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}
.step-line{flex:0 0 56px; height:2px; background:var(--line); margin:0 2px; align-self:flex-start; margin-top:26px}
.step-line.done{background:var(--cyan)}

/* ---------- CENA 1: ENTRADA ---------- */
.entry{max-width:900px; margin:0 auto; padding:44px 24px 60px}
.entry-title{font-family:'Barlow Condensed'; font-weight:800; font-size:30px; color:var(--blue); text-align:center; letter-spacing:.3px}
.entry-sub{text-align:center; color:var(--muted); margin:8px 0 30px; font-size:15px}
.entry-grid{display:flex; gap:22px; max-width:760px; margin:0 auto}
.entry-card{
  flex:1; position:relative; background:#fff; border:2px solid var(--line); border-radius:16px;
  padding:30px 26px; text-align:center; transition:.14s; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.entry-card:hover{border-color:var(--cyan); box-shadow:var(--shadow); transform:translateY(-2px)}
.entry-badge{position:absolute; top:14px; right:14px; background:var(--cyan-l); color:var(--blue-d); font-size:10px; font-weight:700; padding:3px 9px; border-radius:10px; text-transform:uppercase; letter-spacing:.4px}
.entry-ico{width:52px; height:52px; color:var(--cyan); display:flex; align-items:center; justify-content:center}
.entry-ico svg{width:46px; height:46px}
.entry-h{font-family:'Barlow Condensed'; font-weight:700; font-size:19px; color:var(--ink)}
.entry-p{font-size:13px; color:var(--muted); line-height:1.5}
.link-btn.back{display:inline-block; margin-bottom:14px; color:var(--muted)}
.link-btn.back:hover{color:var(--blue)}

/* ---------- CHAT (caminho A) ---------- */
.chat-wrap{max-width:660px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.chat-header{display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--line); background:#fbfcfe}
.chat-avatar{width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed'; font-weight:800; font-size:14px}
.chat-header strong{display:block; font-size:14px}
.chat-header small{color:var(--muted); font-size:12px}
.chat-box{height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:18px}
.chat-msg{max-width:82%; padding:10px 13px; border-radius:13px; font-size:13.5px; line-height:1.45; animation:fadeIn .25s ease}
.chat-msg.user{align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:4px}
.chat-msg.ai{align-self:flex-start; background:var(--cyan-l); color:var(--ink); border-bottom-left-radius:4px}
.chat-msg .caret{border-right:2px solid var(--blue); animation:blinkCaret .7s step-end infinite}
.typing{display:inline-flex; gap:4px; align-items:center; padding:3px 0}
.typing span{width:6px; height:6px; border-radius:50%; background:var(--blue); opacity:.5; animation:typing 1s infinite}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
@keyframes blinkCaret{50%{border-color:transparent}}
.chat-suggest{display:flex; flex-wrap:wrap; gap:7px; padding:0 18px 12px}
.chat-suggest .chip,.chat-summary .chip{
  font-size:12px; padding:6px 11px; border-radius:14px; border:1px solid var(--line);
  background:#f6f8fb; color:var(--ink); cursor:pointer; transition:.12s;
}
.chat-suggest .chip:hover{border-color:var(--cyan); background:var(--cyan-l)}
.chat-input{display:flex; gap:8px; padding:0 18px 16px}
.chat-input input{flex:1; padding:10px 13px; border:1px solid var(--line); border-radius:9px; font-size:14px; font-family:inherit}
.chat-input input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-l)}
.chat-summary{display:flex; flex-wrap:wrap; gap:7px; padding:4px 18px 14px}
.chat-summary .label{width:100%; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-weight:700; margin-bottom:2px}
.chat-summary .chip{background:#fff; cursor:default; opacity:0; animation:fadeIn .3s forwards}
.chat-summary .chip b{color:var(--blue)}
.chat-summary .chip small{color:var(--muted)}
.chat-continue{padding:0 18px 18px; opacity:0}
.chat-continue.show{opacity:1; animation:popIn .3s ease}
.chat-continue .btn{width:100%}

/* ---------- PICKER DE CATEGORIAS (caminho B) ---------- */
.cats-wrap{max-width:840px; margin:0 auto}
.cats-head h2{font-family:'Barlow Condensed'; font-weight:800; font-size:24px; color:var(--blue)}
.cats-head .muted{margin:4px 0 14px}
.cats-actions{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px}
.cats-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.cat-pick{
  position:relative; border:2px solid var(--line); border-radius:11px; padding:14px 15px; cursor:pointer;
  background:#fff; transition:.12s; text-align:left;
}
.cat-pick:hover{border-color:var(--cyan)}
.cat-pick.sel{background:var(--blue); border-color:var(--blue); color:#fff}
.cat-pick .cp-name{font-weight:600; font-size:14px; line-height:1.25; padding-right:22px}
.cat-pick .cp-count{font-size:12px; color:var(--muted); margin-top:3px}
.cat-pick.sel .cp-count{color:rgba(255,255,255,.8)}
.cat-pick .cp-note{font-size:11px; color:var(--red); margin-top:5px}
.cat-pick.sel .cp-note{color:#ffd5d9}
.cat-pick .cp-check{
  position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:transparent; display:flex; align-items:center; justify-content:center; font-size:12px;
}
.cat-pick.sel .cp-check{background:#fff; border-color:#fff; color:var(--blue)}
.cats-foot{
  max-width:840px; margin:22px auto 0; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:16px; border-top:1px solid var(--line);
}

/* ---------- CENA 2: FAIXA DE CURADORIA ---------- */
.curation-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 18px; background:#fbfcfe; border-bottom:1px solid var(--line);
}
.curation-summary{font-size:13px; color:var(--muted); line-height:1.4}
.curation-summary b{color:var(--ink)}
.curation-bar .btn{white-space:nowrap}

/* ---------- CENA 3: EXPORTAÇÃO (IA organizando o layout) ---------- */
.export{max-width:560px; margin:0 auto; padding:34px 24px 56px; text-align:center}
.export-title{font-family:'Barlow Condensed'; font-weight:800; font-size:26px; color:var(--blue)}
.export-meta{color:var(--muted); font-size:14px; margin-top:5px}
.export-stage{margin:26px auto 6px}
.export-page{
  width:280px; aspect-ratio:1/1.414; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:7px; position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.export-page .blk{
  position:absolute; background:#eef2f8; border-radius:3px; opacity:0;
  transition:all .65s cubic-bezier(.4,0,.2,1);
}
.export-page .blk.show{opacity:1}
.export-page .blk.tbl{background:#fff; border:1.5px solid var(--cyan)}
.export-page .blk.tbl::after{
  content:""; position:absolute; inset:5px 5px auto 5px; height:0;
  border-top:1px dashed var(--cyan-l); box-shadow:0 6px 0 -5px var(--cyan-l),0 12px 0 -5px var(--cyan-l),0 18px 0 -5px var(--cyan-l);
}
.export-page .blk.cover{background:var(--blue)}
.export-page .stage-done{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(31,157,87,.12); opacity:0; animation:fadeIn .4s forwards;
}
.export-page .stage-done span{width:54px; height:54px; border-radius:50%; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 6px 18px rgba(31,157,87,.4)}
.export-log{min-height:96px; max-width:460px; margin:18px auto 12px; text-align:left}
.export-log .export-intro{color:var(--muted); font-size:13.5px; text-align:center}
.export-log .line{font-size:13.5px; color:var(--ink); padding:3px 0; opacity:0; animation:fadeIn .3s forwards; display:flex; align-items:center; gap:8px}
.export-log .line::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--cyan); flex:0 0 auto}
.export-log .line.pending{color:var(--muted)}
.export-log .line.pending::before{animation:pulseDot 1s infinite}
.export-log .line.ok{color:var(--ok); font-weight:600}
.export-log .line.ok::before{background:var(--ok)}
.export-log .line.err{color:var(--red)}
.export-log .line.err::before{background:var(--red)}
@keyframes pulseDot{50%{opacity:.3}}
.export-bar{height:6px; background:var(--line); border-radius:3px; max-width:460px; margin:0 auto}
.export-fill{height:100%; width:0; background:var(--cyan); border-radius:3px; transition:width .5s ease}
.export-fill.ok{background:var(--ok)}
.export-fill.err{background:var(--red)}
.export-actions{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px}

@keyframes fadeIn{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
@keyframes popIn{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}

@media (max-width:760px){
  .entry-grid{flex-direction:column}
  .cats-grid{grid-template-columns:1fr 1fr}
  .stepper .step-dot .lbl{display:none}
}