:root{--navy:#063469;--blue:#1769aa;--green:#16834a;--red:#c9212b;--yellow:#f2c230;--muted:#65758a}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#102d54;background:#fff}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}.top{background:#fff}.brandrow{height:82px;display:flex;align-items:center}.brandrow img{height:62px}.colors{height:4px;display:grid;grid-template-columns:repeat(4,1fr)}.colors i:nth-child(1){background:var(--green)}.colors i:nth-child(2){background:var(--red)}.colors i:nth-child(3){background:var(--yellow)}.colors i:nth-child(4){background:var(--blue)}.hero{padding:38px 0 30px;border-bottom:1px solid #e5eaf0;text-align:center}.hero h1{margin:0;color:var(--navy);font-size:clamp(44px,5vw,72px);line-height:.95}.lead{font-size:clamp(24px,2.3vw,34px);color:#14539b;margin:14px 0}.lead em{font-family:Georgia,serif;font-size:1.18em}.hero>div>p:not(.lead){font-size:18px;color:#33465f}.trust{display:flex;gap:28px;flex-wrap:wrap;margin-top:24px;font-size:12px;color:#26486f;justify-content:center}.trust span{padding-right:22px;border-right:1px solid #dfe5ec}.trust span:last-child{border:0}.work{background:#f6f8fb;padding:22px 0 28px}.grid{display:grid;grid-template-columns:.8fr .95fr 1.45fr;gap:14px;align-items:start}.card{background:#fff;border:1px solid #e0e6ee;border-radius:14px;padding:18px;box-shadow:0 8px 24px #0634690c}.title{display:flex;align-items:center;gap:10px;margin-bottom:16px}.title b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0c5ca4;color:#fff}.title h2{font-size:15px;margin:0}.drop{height:290px;border:1.5px dashed #69a4dd;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer}.drop input{display:none}.drop.drag{background:#eef7ff}.up{font-size:50px}.drop strong{font-size:16px}.drop small,.privacy,.hint,.format small{color:var(--muted);font-size:11px;line-height:1.4}.privacy{margin:16px 2px 0}.formats{display:grid;gap:10px}.format{background:#fff;border:1px solid #d8e0ea;border-radius:10px;padding:13px;display:flex;gap:13px;align-items:center;text-align:left;cursor:pointer;color:#17385f}.format.active{border:2px solid #1769aa;background:#f5faff}.format span:last-child{display:grid;gap:4px}.format small{display:block}.sq,.ci,.st{border:2px solid #0d4380;display:block;flex:none}.sq{width:31px;height:31px}.ci{width:31px;height:31px;border-radius:50%}.st{width:17px;height:34px;border-radius:3px}.tip{display:flex;gap:8px;margin-top:14px;padding:12px;background:#fff7e3;border-radius:9px;font-size:11px}.hint{margin:-7px 0 10px}.canvas-shell{position:relative;margin:auto;width:min(100%,500px);aspect-ratio:1/1;background:#eef2f6;overflow:hidden;border-radius:9px;display:grid;place-items:center;touch-action:none;transition:max-width .2s ease}.canvas-shell.story{aspect-ratio:9/16;max-width:310px}.canvas-shell canvas{width:100%;height:100%;display:block;cursor:grab}.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:#eef3f8;color:#6b7b8f;font-weight:700}.zoom{display:grid;grid-template-columns:20px 1fr 20px;align-items:center;gap:8px;margin:10px 0}.zoom input{width:100%;accent-color:#1769aa}.actions{display:grid;grid-template-columns:1fr 1.15fr;gap:8px}.actions button{border-radius:8px;padding:12px 8px;font-weight:900;cursor:pointer}.actions button:disabled{opacity:.45}.outline{background:#fff;border:1.5px solid #1769aa;color:#0d4f91}.primary{border:0;background:#0d62ad;color:#fff}.secondary{grid-column:1/-1;border:1px solid #c6dbef;background:#eef5fb;color:#0d4f91}.join{margin-top:16px;display:flex;justify-content:flex-end}.join a{background:var(--yellow);color:#082f61;text-decoration:none;border-radius:10px;padding:14px 18px;display:flex;gap:16px;align-items:center;font-size:12px}.join span{font-size:11px}footer{background:#fff}.foot{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#6b788a;font-size:11px}.foot img{width:125px}@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}.preview{grid-column:1/-1}.canvas-shell{max-width:520px}}@media(max-width:620px){.brandrow{justify-content:center;height:70px}.brandrow img{height:52px}.hero{padding:28px 0 24px}.hero h1{font-size:42px}.hero>div>p:not(.lead){font-size:15px}.trust{display:grid;gap:10px}.trust span{border:0}.grid{grid-template-columns:1fr}.preview{grid-column:auto}.drop{height:240px}.canvas-shell.story{max-width:290px}.actions{grid-template-columns:1fr}.secondary{grid-column:auto}.join{justify-content:stretch}.join a{width:100%;justify-content:space-between}.foot{flex-direction:column;justify-content:center;text-align:center;padding:15px 0}}

.status{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.35;text-align:center}
.status.show{display:block}
.status.ok{background:#edf8f1;color:#11683a;border:1px solid #bfe2cc}
.status.info{background:#eef5fd;color:#0b4f8f;border:1px solid #c8dbf2}
.status.error{background:#fff0f1;color:#9f1d2a;border:1px solid #f2c1c6}

/* V8 — cabeçalho e rodapé simplificados */
.top{background:#fff}
.foot{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#6b788a;
  font-size:11px;
}
.foot span{width:100%;text-align:center}

/* V9 — layout alinhado ao mockup aprovado */
:root{
  --blue:#0b4f8f;
  --blue2:#1769aa;
  --green:#16834a;
  --red:#c9212b;
  --yellow:#f2c230;
  --bg:#f4f7fb;
  --text:#0d2f57;
}
body{background:var(--bg);color:var(--text)}
.app-main{min-height:calc(100vh - 90px)}
.hero{
  background:#fff;
  border-bottom:1px solid #dce4ee;
  padding:28px 20px 24px;
}
.hero-inner{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}
.hero h1{
  margin:0;
  font-size:56px;
  line-height:1;
  color:#0d3e78;
  letter-spacing:.3px;
  font-weight:800;
}
.hero h2{
  margin:12px 0 10px;
  font-size:28px;
  font-weight:400;
  color:#0f5ca7;
}
.hero h2 em{
  font-family:Georgia,serif;
  font-weight:400;
  color:#0d3e78;
}
.hero p{
  margin:0 0 18px;
  font-size:16px;
  color:#2b3e55;
}
.trust-row{
  display:flex;
  justify-content:center;
  gap:42px;
  flex-wrap:wrap;
  font-size:12px;
  color:#26384f;
}
.trust-row span{display:flex;align-items:center;gap:8px}
.workspace{
  max-width:1360px;
  margin:18px auto 16px;
  display:grid;
  grid-template-columns:280px 310px minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.panel{
  background:#fff;
  border:1px solid #d8e0e9;
  border-radius:14px;
  box-shadow:0 2px 12px rgba(22,49,84,.06);
  padding:16px;
}
.panel-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  color:#0d3e78;
}
.step{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:#1769aa;color:#fff;font-weight:800;
}
.dropzone{
  min-height:280px;
  border:1.5px dashed #78aee3;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:#fff;
}
.upload-icon{font-size:42px;color:#0d3e78;line-height:1}
.upload-title{font-size:17px;font-weight:700;margin-top:12px}
.upload-sub{font-size:12px;color:#68798d;margin-top:6px}
.privacy-note{font-size:12px;line-height:1.45;margin-top:16px;color:#38506c}
.panel-format{display:flex;flex-direction:column}
.format{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:36px 1fr 20px;
  gap:10px;
  align-items:center;
  text-align:left;
  background:#fff;
  border:1px solid #d8e0e9;
  border-radius:10px;
  padding:14px 12px;
  margin-bottom:10px;
  color:#16324f;
}
.format.active{border:2px solid #1769aa;background:#f7fbff}
.format strong{display:block;font-size:14px}
.format small{display:block;font-size:11px;color:#6d7d90;line-height:1.35;margin-top:4px}
.shape{display:block;border:2px solid #0d4f94}
.shape.square{width:24px;height:24px}
.shape.story-shape{width:13px;height:28px;border-radius:3px}
.shape.circle-shape{width:26px;height:26px;border-radius:50%}
.radio-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid #8ba4bf}
.format.active .radio-dot{border:4px solid #1769aa}
.tip{
  margin-top:auto;
  background:#fff8e8;
  border-radius:9px;
  padding:12px;
  font-size:12px;
  color:#4b5f73;
}
.panel-preview{padding:16px 18px}
.preview-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 235px;
  gap:22px;
  align-items:center;
}
.preview-help{
  margin:0 0 10px;
  font-size:12px;
  color:#52657b;
}
.canvas-shell{
  position:relative;
  width:min(100%,520px);
  margin:0 auto;
  aspect-ratio:1/1;
  border-radius:8px;
  overflow:hidden;
  background:#eef3f8;
}
.canvas-shell.story{aspect-ratio:9/16;max-width:290px}
#canvas{display:block;width:100%;height:100%;touch-action:none}
.empty-preview{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#8391a1;font-size:13px;
  pointer-events:none;
}
.zoom-row{
  width:min(100%,520px);
  margin:10px auto 0;
  display:grid;
  grid-template-columns:18px 1fr 18px;
  gap:8px;
  align-items:center;
}
.zoom-row input{width:100%}
.action-side{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.action-side button{
  min-height:48px;
  border-radius:8px;
  font-weight:800;
  font-size:14px;
}
.outline{background:#fff;border:1.5px solid #1769aa;color:#0d4f94}
.primary{background:#1769aa;border:1px solid #1769aa;color:#fff}
.secondary{background:#eef5fd;border:1px solid #c9dcef;color:#0d4f94}
.action-side button:disabled{opacity:.5;cursor:not-allowed}
.join-wrap{
  max-width:1360px;
  margin:0 auto 18px;
  display:flex;
  justify-content:center;
}
.join-btn{
  width:min(680px,calc(100% - 40px));
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:14px 22px;
  background:#f7b914;
  color:#0f2f52;
  border-radius:10px;
  text-decoration:none;
  font-size:13px;
}
.join-btn strong{font-size:14px}
.join-btn span{font-size:12px}
footer{background:#fff}
.foot{min-height:62px;font-size:12px}
@media(max-width:1100px){
  .workspace{grid-template-columns:1fr 1fr}
  .panel-preview{grid-column:1/-1}
}
@media(max-width:760px){
  .hero h1{font-size:38px}
  .hero h2{font-size:22px}
  .trust-row{gap:14px;flex-direction:column;align-items:center}
  .workspace{grid-template-columns:1fr}
  .panel-preview{grid-column:auto}
  .preview-row{grid-template-columns:1fr}
  .action-side{width:100%}
  .join-btn{flex-direction:column;text-align:center;gap:4px}
}