/* CRM do Reino · tela "Meu site" (#/meusite). Prefixo .ms- ; usa as variáveis de estilo.css e as peças de crm.css. */
.ms-aviso{display:flex;align-items:center;gap:10px;background:#fff7e3;border:1px solid #ecd59a;border-radius:12px;padding:12px 16px;margin:0 0 16px;color:var(--marinho)}
.ms-plano{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;background:linear-gradient(135deg,#0b1f44,#163266);color:#e6ebf5;border:1px solid rgba(201,153,58,.6);border-radius:16px;padding:16px 20px;margin:0 0 18px}
.ms-plano>div{flex:1 1 320px}
.ms-plano p{margin:0}
.ms-plano .crm-cab__selo{color:#f1d48a;margin-bottom:4px}
.ms-plano b{color:#f6e5b4}
.ms-plano__coroa{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(201,153,58,.15);color:#f1d48a;flex:none}
.ms-plano__coroa .ico{width:28px;height:28px}

.ms-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.ms-editor{min-width:0}
.ms-editor h2,.ms-previa h2{font-family:var(--serif);font-size:1.2rem;color:var(--marinho);margin:0 0 4px}

/* modelos */
.ms-modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.ms-modelo{position:relative;display:grid;gap:4px;padding:8px;border:1.5px solid var(--linha);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.ms-modelo:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,31,68,.1)}
.ms-modelo input{position:absolute;opacity:0;pointer-events:none}
.ms-modelo.ativo{border-color:var(--ouro);box-shadow:0 0 0 3px rgba(201,153,58,.25)}
.ms-modelo:focus-within{outline:3px solid var(--ouro);outline-offset:2px}
.ms-modelo__img{position:relative;display:block;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#eef1f6}
.ms-modelo__img img{width:100%;height:100%;object-fit:cover;object-position:top}
.ms-modelo__trava{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(11,31,68,.88);color:#f1d48a}
.ms-modelo__trava .ico{width:16px;height:16px}
.ms-modelo b{font-family:var(--serif);color:var(--marinho);font-size:.98rem;line-height:1.2}
.ms-modelo small{color:#5b6680;font-size:.78rem;line-height:1.35}
.ms-modelo.ativo b::after{content:" ✓";color:var(--ouro)}

/* cores */
.ms-cores{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ms-cor{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border:1.5px solid var(--linha);border-radius:999px;background:#fff;cursor:pointer;font-weight:600;color:var(--marinho)}
.ms-cor input{position:absolute;opacity:0;pointer-events:none}
.ms-cor span{width:28px;height:28px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.ms-cor.ativo{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.ms-cor:focus-within{outline:3px solid var(--ouro);outline-offset:2px}

/* foto */
.ms-foto{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.ms-foto__atual{width:110px;height:110px;border-radius:50%;padding:4px;background:conic-gradient(#f6dc93,#b07f22,#f1d48a,#8f6519,#f6dc93);flex:none}
.ms-foto__atual img,.ms-foto__atual span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#24447f,#0b1f44 70%);color:#f1d48a;font:700 2.2rem var(--serif)}
.ms-foto__acoes{flex:1 1 220px;display:grid;gap:6px;justify-items:start}
.ms-foto__acoes .crm-dica{margin:0}
.ms-arquivo{position:relative;overflow:hidden;width:auto}
.ms-arquivo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ms-recorte{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin-top:14px;padding:14px;border:1px dashed var(--ouro);border-radius:12px;background:#fffdf7}
.ms-recorte[hidden]{display:none}
.ms-recorte__janela{position:relative;width:min(260px,100%);aspect-ratio:1;overflow:hidden;border-radius:12px;background:#0b1f44;cursor:grab;touch-action:none;flex:none}
.ms-recorte__janela:active{cursor:grabbing}
.ms-recorte__janela::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(11,31,68,.45);pointer-events:none}
.ms-recorte__janela img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
.ms-recorte__ctl{flex:1 1 200px;display:grid;gap:8px}
.ms-recorte__ctl label{display:grid;gap:4px;font-weight:600;color:var(--marinho)}
.ms-bio{display:grid;gap:6px;margin-top:16px;font-weight:600;color:var(--marinho)}
.ms-bio span{display:flex;justify-content:space-between}
.ms-bio small{font-weight:400;color:#5b6680}
.ms-bio textarea{border:1px solid var(--linha);border-radius:8px;padding:10px;font:inherit;font-weight:400;color:var(--texto);resize:vertical;min-height:110px}
.ms-bio textarea:focus{outline:0;border-color:var(--ouro);box-shadow:0 0 0 3px rgba(201,153,58,.2)}

/* seções */
.ms-secoes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ms-secoes li{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--linha);border-radius:12px;background:#fff;transition:opacity .2s}
.ms-secoes li.desligada{opacity:.6;background:#f7f5ef}
.ms-secoes__n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--marinho);color:#f1d48a;font:700 .9rem var(--serif)}
.ms-secoes b{display:block;color:var(--marinho)}
.ms-secoes small{color:#5b6680;font-size:.82rem}
.ms-pro{font-style:normal;color:#9a6f1f;font-weight:700;white-space:nowrap}
.ms-pro .ico{width:.95em;height:.95em}
.ms-secoes__mover{display:flex;gap:4px}
.ms-mover{width:34px;height:34px;border-radius:8px;border:1px solid var(--linha);background:#fff;color:var(--marinho);font-weight:700;cursor:pointer}
.ms-mover:hover:not(:disabled){border-color:var(--ouro);background:#fffaf0}
.ms-mover:disabled{opacity:.35;cursor:default}

/* serviços */
.ms-servicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:12px}
.ms-servico{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--linha);border-radius:12px;background:#fff;cursor:pointer}
.ms-servico:has(input:checked){border-color:var(--ouro);background:#fffaf0}
.ms-servico input{width:18px;height:18px;margin-top:3px;accent-color:#0b1f44;flex:none}
.ms-servico b{display:block;color:var(--marinho);font-size:.94rem}
.ms-servico small{display:block;color:#5b6680;font-size:.8rem;line-height:1.35}

/* prévia */
.ms-previa{position:sticky;top:14px;background:#fff;border:1px solid var(--linha);border-radius:16px;padding:14px;box-shadow:var(--sombra);min-width:0}
.ms-previa__cab{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ms-previa__moldura{margin:0 auto;border:1px solid #d9dfe9;border-radius:12px;overflow:hidden;background:#0b1f44;transition:width .3s}
.ms-previa__moldura iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.ms-previa--computador{width:100%;height:min(72vh,720px)}
.ms-previa--computador iframe{width:200%;height:200%;transform:scale(.5);transform-origin:0 0}
.ms-previa--celular{width:min(390px,100%);height:min(74vh,760px);border-radius:28px;border:8px solid #0b1f44}
.ms-previa .crm-dica{margin:10px 0 0}

/* barra de salvar */
.ms-barra{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:6px;padding:10px 14px;background:rgba(255,255,255,.96);border:1px solid var(--linha);border-radius:14px 14px 0 0;box-shadow:0 -8px 24px rgba(11,31,68,.08)}
.ms-barra span{color:#1a7a3c;font-weight:600;font-size:.9rem}
.ms-barra.sujo span{color:#9a6f1f}

@media (max-width:1180px){
  .ms-grade{grid-template-columns:1fr}
  .ms-previa{position:static}
}
@media (max-width:640px){
  .ms-modelos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms-secoes li{grid-template-columns:30px minmax(0,1fr) auto;row-gap:6px}
  .ms-secoes__mover{grid-column:2}
  .ms-secoes .crm-interruptor{grid-column:3;grid-row:1}
  .ms-previa--computador{height:60vh}
  .ms-previa--computador iframe{width:300%;height:300%;transform:scale(.3333)}
  .ms-barra{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .ms-modelo,.ms-previa__moldura{transition:none}
}
/* opção "Banner com minha foto" */
.ms-banner{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;background:#fbf8f1}
.ms-banner b{display:block;color:var(--marinho)}
.ms-banner small{display:block;color:#5b6680;font-size:.86rem;margin-top:2px}