/* Bride Era R14.7.158 — acabamento visual do painel.
   Inspirado na referência enviada: menu com item ativo em pílula escura, rótulos de seção
   espaçados, cartões claros com contorno suave, números em serifa e tudo bem encaixado.
   No celular, grades de cartões viram faixas horizontais com rolagem. Camada isolada. */
:root{--be158-ink:#2f2624;--be158-wine:#7d4f50;--be158-cream:#fffaf6;--be158-sand:#f4e6da;--be158-line:rgba(125,79,80,.14);--be158-dash:rgba(125,79,80,.24);--be158-soft:#6f6260}

/* ---------- menu lateral ---------- */
.app-sidebar .sb-group-title{font-size:.66rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;font-weight:600!important;color:var(--be158-soft)!important;opacity:.9}
.app-sidebar .sb-link{border-radius:14px!important;transition:background .18s ease,color .18s ease,transform .18s ease}
.app-sidebar .sb-link:hover{background:rgba(125,79,80,.07)!important}
.app-sidebar .sb-link.active{background:var(--be158-ink)!important;color:#fff!important;font-weight:600!important;box-shadow:0 8px 20px rgba(47,38,36,.18)}
.app-sidebar .sb-link.active .sb-count{background:rgba(255,255,255,.16)!important;color:#fff!important}

/* ---------- cartões e números ---------- */
.kpi{border-radius:18px!important;border:1px dashed var(--be158-dash)!important;background:#fff!important;box-shadow:none!important;transition:transform .2s ease,box-shadow .2s ease}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(47,38,36,.08)!important}
.kpi.accent{background:linear-gradient(160deg,#f3dcb8,#ecd09f)!important;border:1px solid rgba(47,38,36,.85)!important;box-shadow:4px 4px 0 var(--be158-ink)!important}
.kpi b,.kpi strong,.kpi .kpi-num,.kpi .v{font-family:var(--font-display,'Cormorant Garamond',Georgia,serif)!important;letter-spacing:0}
.card,.panel{border-radius:20px}
.app-main h1,.app-main .page-title,.view-title{font-family:var(--font-display,'Cormorant Garamond',Georgia,serif);letter-spacing:-.01em}

/* ---------- entrada suave ---------- */
@keyframes be158-fade{from{opacity:0}to{opacity:1}}
@keyframes be158-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* cartões genéricos sem animação de entrada: várias telas re-renderizam e isso deixaria o conteúdo piscando */
.be156-week,.be156-ai-card,.be158-gift{animation:be158-in .42s cubic-bezier(.2,.8,.2,1) both}
.app-main .grid>*:nth-child(2){animation-delay:.04s}.app-main .grid>*:nth-child(3){animation-delay:.08s}.app-main .grid>*:nth-child(4){animation-delay:.12s}
.modal-card,.ui-modal .modal-body{animation:be158-fade .24s ease both}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important;box-shadow:0 0 0 3px rgba(192,138,125,.28)!important;border-color:#c08a7d!important;transition:box-shadow .18s ease}
.btn{transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:scale(.97)}

/* ---------- pétalas ---------- */
.be158-petal{position:fixed;z-index:2147480000;pointer-events:none;border-radius:60% 40% 60% 40%/70% 50% 50% 30%;opacity:.95;animation:be158-burst 1s cubic-bezier(.15,.7,.3,1) forwards}
.be158-petal.is-fall{opacity:.55;animation-name:be158-fall;animation-timing-function:linear}
@keyframes be158-burst{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
@keyframes be158-fall{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* ---------- presente pós-casamento ---------- */
.be158-gift{display:flex;gap:14px;align-items:center;margin:0 0 14px;padding:16px 18px;border-radius:20px;background:linear-gradient(135deg,#fff4ea,#f3dfd6);border:1px solid rgba(201,161,90,.45)}
.be158-gift-ico{font-size:2rem}
.be158-gift h3{margin:0 0 4px;font:500 1.3rem/1.2 var(--font-display,Georgia,serif);color:var(--be158-ink)}
.be158-gift p{margin:0;font-size:.84rem;line-height:1.45;color:var(--be158-soft)}
.be158-gift .btn{flex:0 0 auto}

/* ---------- celular: menos vertical, mais horizontal ---------- */
@media (max-width:640px){
  .grid.g4,.grid.g3{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;margin-left:-4px;margin-right:-4px;padding:2px 4px 8px;scrollbar-width:none}
  .grid.g4::-webkit-scrollbar,.grid.g3::-webkit-scrollbar{display:none}
  .grid.g4>*,.grid.g3>*{flex:0 0 72%!important;max-width:72%;scroll-snap-align:start;min-width:0}
  .grid.g4>.kpi,.grid.g3>.kpi{flex-basis:46%!important;max-width:46%}
  .tabs,.chips,.filter-row,.seg,.segmented{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar,.chips::-webkit-scrollbar,.filter-row::-webkit-scrollbar{display:none}
  .tabs>*,.chips>*,.filter-row>*{flex:0 0 auto}
  .be158-gift{flex-wrap:wrap}.be158-gift .btn{width:100%}
  .kpi{padding:14px!important}
}

/* ---------- modo escuro: contraste e harmonia ---------- */
html[data-panel-theme="dark"] .kpi{background:#2a2221!important;border-color:rgba(255,255,255,.14)!important;color:#f4ece9}
html[data-panel-theme="dark"] .kpi.accent{background:linear-gradient(160deg,#6b5134,#574027)!important;border-color:#e8c99a!important;box-shadow:4px 4px 0 #120d0c!important;color:#fff6ea}
html[data-panel-theme="dark"] .kpi *{color:inherit}
html[data-panel-theme="dark"] .app-sidebar .sb-link.active{background:#f4e6da!important;color:#2f2624!important}
html[data-panel-theme="dark"] .app-sidebar .sb-link.active .sb-count{background:rgba(47,38,36,.12)!important;color:#2f2624!important}
html[data-panel-theme="dark"] .app-sidebar .sb-group-title{color:#bfb0ab!important}
html[data-panel-theme="dark"] .be158-gift{background:linear-gradient(135deg,#3a2e2a,#2c2321);border-color:rgba(232,201,154,.35)}
html[data-panel-theme="dark"] .be158-gift h3{color:#f4ece9}html[data-panel-theme="dark"] .be158-gift p{color:#cbbdb9}
html[data-panel-theme="dark"] .muted,html[data-panel-theme="dark"] .small.muted,html[data-panel-theme="dark"] .text-muted{color:#c3b4af!important}
html[data-panel-theme="dark"] input,html[data-panel-theme="dark"] select,html[data-panel-theme="dark"] textarea{color:#f4ece9;background-color:#2a2221;border-color:rgba(255,255,255,.16)}
html[data-panel-theme="dark"] input::placeholder,html[data-panel-theme="dark"] textarea::placeholder{color:#9d8f8a}
html[data-panel-theme="dark"] .btn-ghost{color:#f1ddd6;border-color:rgba(255,255,255,.2)}
html[data-panel-theme="dark"] .badge,html[data-panel-theme="dark"] .chip{color:#f4ece9}

@media (prefers-reduced-motion:reduce){
  .be156-week,.be156-ai-card,.be158-gift,.modal-card,.ui-modal .modal-body{animation:none!important}
  .be158-petal{display:none}
}