:root{
  --wine:#6b1423; --wine-d:#4a0d18; --wine-l:#8a1f33;
  --gold:#b8893b; --gold-l:#d9b46a; --champ:#f6ead9; --cream:#fbf4ea; --paper:#fffaf3;
  --ink:#3a1a1f; --muted:#7a6460; --line:#e6d3b8; --ok:#2e8b57; --warn:#c98a1b;
  --serif:Georgia,'Times New Roman',serif; --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--cream)}
button,input,select{font:inherit}
a{color:var(--wine)}

/* ---------- logo ---------- */
.logo{text-align:center;color:var(--gold)}
.logo svg{width:84px;height:auto}
.logo .word{font-family:var(--serif);font-size:30px;letter-spacing:2px;line-height:1;color:var(--gold)}
.logo .sub{font-family:var(--serif);font-size:14px;letter-spacing:12px;padding-left:12px;color:var(--gold)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:10px 18px;
  border:1px solid var(--gold);background:var(--paper);color:var(--wine-d);cursor:pointer;font-family:var(--serif)}
.btn:hover{background:var(--champ)}
.btn.primary{background:linear-gradient(180deg,var(--wine-l),var(--wine-d));color:var(--champ);border-color:var(--wine-d);box-shadow:0 2px 8px #4a0d1855}
.btn.primary:hover{filter:brightness(1.1)}
.btn.small{padding:6px 12px;font-size:14px}
.btn:disabled{opacity:.6;cursor:default}

/* ---------- login ---------- */
.login-page{min-height:100%;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 50% 0,#fffaf3,var(--cream) 60%,#f2e2cc)}
.login-page::before,.login-page::after{content:"";position:absolute;width:42vw;height:42vw;max-width:520px;max-height:520px;
  background:linear-gradient(135deg,var(--wine-l),var(--wine-d));border:3px solid var(--gold);border-radius:50%}
.login-page::before{top:-22vw;left:-18vw}
.login-page::after{bottom:-24vw;right:-18vw}
.card{position:relative;z-index:1;width:100%;max-width:520px;background:#fff9f0ee;border:1.5px solid var(--gold);
  border-radius:36px;padding:32px 36px 28px;box-shadow:0 20px 60px #4a0d1822}
.card h1{font-family:var(--serif);color:var(--wine-d);text-align:center;font-size:30px;margin:14px 0 4px}
.card .lead{text-align:center;color:var(--muted);margin:0 0 20px}
.field{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 14px;margin-bottom:12px}
.field svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.6;flex:none}
.field input{flex:1;border:0;background:transparent;padding:14px 0;outline:none;color:var(--ink)}
.field:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px #b8893b33}
.field .eye{background:none;border:0;cursor:pointer;padding:0;display:flex}
.row{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 16px;font-size:14px}
.row label{display:flex;gap:8px;align-items:center;cursor:pointer}
.card .btn{width:100%;padding:14px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);margin:14px 0;font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.msg{min-height:20px;text-align:center;font-size:14px;margin:0 0 10px;color:var(--wine)}
.foot{text-align:center;margin-top:16px;color:var(--muted);font-size:14px}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100%}
.shell.collapsed{grid-template-columns:72px 1fr}
.side{background:linear-gradient(180deg,var(--wine),var(--wine-d));color:var(--champ);padding:16px 12px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:auto;border-right:2px solid var(--gold)}
.side .logo svg{width:56px}.side .logo .word{font-size:20px;color:var(--gold-l)}.side .logo .sub{font-size:10px;letter-spacing:8px;color:var(--gold-l)}
.side nav{margin-top:18px;display:flex;flex-direction:column;gap:2px;flex:1}
.nav{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--champ);background:none;border:0;
  text-align:left;cursor:pointer;white-space:nowrap}
.nav:hover{background:#ffffff14}
.nav.active{background:#00000030;box-shadow:inset 3px 0 0 var(--gold-l)}
.nav .ic{width:20px;text-align:center;color:var(--gold-l);flex:none}
.shell.collapsed .nav .tx,.shell.collapsed .logo .word,.shell.collapsed .logo .sub,.shell.collapsed .powered{display:none}
.powered{font-size:12px;opacity:.7;text-align:center;margin-top:8px}

.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:14px 24px;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top h2{font-family:var(--serif);color:var(--wine-d);margin:0;font-size:22px;flex:1}
.iconbtn{background:none;border:1px solid var(--line);border-radius:10px;width:40px;height:40px;cursor:pointer;color:var(--wine);font-size:18px}
.content{padding:24px;max-width:1200px;width:100%}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:24px}
.stat{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:14px;padding:16px}
.stat b{display:block;font-family:var(--serif);font-size:34px;color:var(--wine-d)}
.stat span{color:var(--muted);font-size:14px}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:20px}
.panel h3{font-family:var(--serif);color:var(--wine-d);margin:0 0 12px}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.quick button{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;text-align:left;color:var(--wine-d)}
.quick button:hover{border-color:var(--gold);background:var(--champ)}

.plist{display:flex;flex-direction:column;gap:10px}
.proj{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.proj .thumb{width:52px;height:52px;border-radius:10px;background:linear-gradient(135deg,var(--wine),var(--wine-d));color:var(--gold-l);
  display:grid;place-items:center;font-family:var(--serif);font-size:20px;flex:none}
.proj .info{flex:1;min-width:0}
.proj .info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj .info small{color:var(--muted)}
.badge{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid}
.badge.draft{color:#9a6a0f;background:#fbefcf;border-color:#ecd28c}
.badge.published{color:#1f6b42;background:#dff3e6;border-color:#9fd5b3}
.badge.unpublished{color:#6a5a57;background:#eee;border-color:#d4d4d4}
.toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select,.form input,.form select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;outline:none}
.toolbar input{flex:1;min-width:160px}
.empty{color:var(--muted);text-align:center;padding:28px}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.form .full{grid-column:1/-1}
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.type{border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;background:#fff;text-align:left}
.type b{display:block;color:var(--wine-d);font-family:var(--serif)}
.type small{color:var(--muted)}
.type.sel{border-color:var(--gold);background:var(--champ);box-shadow:0 0 0 3px #b8893b33}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--wine-d);color:var(--champ);padding:12px 20px;border-radius:999px;
  border:1px solid var(--gold);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}

@media (max-width:820px){
  .shell,.shell.collapsed{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:250px;transform:translateX(-100%);transition:transform .2s;z-index:20}
  .shell.open .side{transform:none}
  .shell.collapsed .nav .tx,.shell.collapsed .logo .word,.shell.collapsed .logo .sub,.shell.collapsed .powered{display:revert}
  .card{padding:24px 20px;border-radius:28px}
  .content{padding:16px}
}

/* ---------- editor (Fase 2) ---------- */
.content.wide{max-width:1500px}
.ed-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ed-name{flex:1;min-width:180px;font-family:var(--serif);font-size:20px;color:var(--wine-d);border:1px solid transparent;background:transparent;border-radius:10px;padding:8px 10px}
.ed-name:focus{border-color:var(--gold);background:#fff;outline:none}
.chip{font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid}
.chip.ok{color:#1f6b42;background:#dff3e6;border-color:#9fd5b3}
.chip.warn{color:#9a6a0f;background:#fbefcf;border-color:#ecd28c}
.chip.err{color:#8a1f33;background:#fbe0e0;border-color:#e6a5a5}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.seg button{border:0;background:none;padding:8px 12px;cursor:pointer;font-size:16px}
.seg button.sel{background:var(--champ);box-shadow:inset 0 -2px 0 var(--gold)}
.tools{display:flex;gap:8px;overflow:auto;margin-bottom:14px;padding-bottom:4px}
.tool{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;white-space:nowrap;color:var(--wine-d)}
.tool.sel{background:linear-gradient(180deg,var(--wine-l),var(--wine-d));color:var(--champ);border-color:var(--wine-d)}
.tool:disabled{opacity:.45}
.ed{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;grid-template-areas:"list center set";gap:16px;align-items:start}
.ed .panel{margin:0}
.ed-list{grid-area:list}.ed-center{grid-area:center}.ed-set{grid-area:set}
.ed .center{display:flex;justify-content:center;align-items:flex-start;padding:24px 12px;background:linear-gradient(180deg,var(--champ),#f0dfc6);
  position:sticky;top:84px;z-index:4}
.upbar{margin:10px 0;font-size:13px;color:var(--muted)}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.plist2{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:62vh;overflow:auto}
.plitem{display:flex;align-items:center;gap:10px;padding:8px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.plitem.sel{border-color:var(--gold);background:var(--champ);box-shadow:0 0 0 3px #b8893b33}
.pthumb{width:44px;height:58px;border-radius:8px;overflow:hidden;background:var(--wine-d);flex:none;display:grid;place-items:center;color:var(--gold-l)}
.pthumb img{width:100%;height:100%;object-fit:cover}
.pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pname b{color:var(--gold)}
.pact{display:flex;flex-direction:column;gap:2px}
.pact button{border:1px solid var(--line);background:#fff;border-radius:6px;width:30px;height:24px;cursor:pointer;font-size:11px;color:var(--wine)}
.pact button:disabled{opacity:.3}
.frame{background:#1b0a0e;box-shadow:0 12px 40px #4a0d1855;border:3px solid var(--gold);overflow:hidden;max-width:100%}
.frame.phone{--r:.54;height:auto;aspect-ratio:var(--r);width:min(300px,calc((100vh - 220px) * var(--r)));border-radius:38px;border-width:10px;border-color:#1b0a0e;outline:2px solid var(--gold)}
.frame.tablet{--r:.76;height:auto;aspect-ratio:var(--r);width:min(440px,100%,calc((100vh - 220px) * var(--r)));border-radius:24px}
.frame.desktop{--r:1.6;height:auto;aspect-ratio:var(--r);width:min(640px,100%,calc((100vh - 220px) * var(--r)));border-radius:12px}
#edPlayer,.ep{width:100%;height:100%}
.ep{position:relative;background:#000;overflow:hidden}
.ep-stage{position:absolute;inset:0;overflow:hidden}
.ep-layer{position:absolute;inset:0;display:grid;place-items:center;will-change:transform,opacity}
.ep-media{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ep-empty{height:100%;display:grid;place-items:center;color:var(--gold-l);text-align:center;padding:20px;font-family:var(--serif)}
.ep-nav{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;align-items:center;gap:10px;z-index:10;pointer-events:none}
.ep-nav>*{pointer-events:auto}
.ep-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);background:#4a0d18cc;color:var(--champ);font-size:20px;line-height:1;cursor:pointer}
.ep-nav button:disabled{opacity:.3}
.ep-count{font-size:12px;color:var(--champ);background:#4a0d18cc;border-radius:99px;padding:4px 10px}
#edSet h3{font-family:var(--serif);color:var(--wine-d);margin:0 0 10px}
#edSet h4{margin:16px 0 8px;color:var(--wine-d);font-family:var(--serif)}
.fl{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);margin-bottom:10px}
.fl input[type=text],.fl input:not([type]){border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.tbtn{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 4px;font-size:11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--wine-d)}
.tbtn span{font-size:18px;color:var(--gold)}
.tbtn.sel{border-color:var(--gold);background:var(--champ);box-shadow:0 0 0 2px #b8893b44}
.muted{color:var(--muted)}.small{font-size:13px}
/* iPad / telas médias: lista de páginas vira faixa no topo; celular no meio (fixo) + configurações ao lado */
@media (max-width:1180px){
  .ed{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"list list" "center set"}
  .ed-list .plist2{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
  .ed-list .plitem{min-width:190px;flex:none}
  #edSet .tgrid{grid-template-columns:repeat(3,1fr)}
}
/* celular em pé: celular fixo no topo, configurações rolam embaixo */
@media (max-width:760px){
  .ed{grid-template-columns:1fr;grid-template-areas:"center" "set" "list"}
  .ed .center{top:72px;padding:10px}
  .frame.phone{width:min(220px,calc(40vh * var(--r)))}
  .frame.tablet,.frame.desktop{width:min(100%,calc(40vh * var(--r)))}
}

.pthumb.empty{background:var(--champ);border:1.5px dashed var(--gold);color:var(--gold);font-size:22px}
.ep-empty small{opacity:.7;font-family:var(--sans)}

.frame{position:relative}
.frame #edPlayer{position:absolute;inset:0;width:100%;height:100%}
.ep-nav[hidden]{display:none}

.ep-scroll{position:absolute;inset:0;overflow:hidden}
.ep-layer.tall .ep-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ep-layer.tall .ep-scroll::-webkit-scrollbar{display:none}
.ep-layer.tall .ep-media{height:auto;object-fit:initial;display:block}
.ep-sbar{position:absolute;right:3px;top:0;width:5px;border-radius:99px;background:linear-gradient(180deg,var(--gold-l),var(--gold));opacity:.9;pointer-events:none;display:none;box-shadow:0 0 0 1px #4a0d1855}