/* Identidade viva — uma camada visual compartilhada pelo painel real e demonstrativo. */
:root{
  --identity-accent:var(--brand-accent,var(--green,#147564));
  --identity-ink:#0b2430;
  --identity-muted:#60747a;
  --identity-line:rgba(35,72,77,.13);
  --identity-surface:rgba(255,255,255,.94);
  --identity-glow:color-mix(in srgb,var(--identity-accent) 17%,transparent);
  --identity-shadow:0 18px 46px rgba(9,33,39,.09);
}

/* A marca do lojista conduz a atmosfera sem comprometer contraste. */
.workspace{isolation:isolate}
.workspace:before{
  content:"";position:fixed;z-index:-1;inset:0 0 auto 272px;height:420px;pointer-events:none;
  background:
    radial-gradient(circle at 78% 0,var(--identity-glow),transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--identity-accent) 4%,#f5f7f4),transparent);
}
.brand-hero{
  position:relative;min-height:300px;background-position:center;background-size:cover;
  border:1px solid rgba(255,255,255,.46)!important;
  box-shadow:0 28px 70px rgba(4,25,34,.17)!important;
}
.brand-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,var(--identity-glow),transparent 48%);
}
.brand-hero .hero-overlay{
  position:relative;z-index:1;min-height:inherit;padding:clamp(24px,4vw,44px)!important;
  background:linear-gradient(90deg,rgba(4,20,30,.92),rgba(4,20,30,.58) 56%,rgba(4,20,30,.16))!important;
}
.brand-hero .hero-overlay img{
  width:88px;height:88px;flex:0 0 auto;padding:8px;object-fit:contain;border-radius:24px!important;
  background:rgba(255,255,255,.96)!important;box-shadow:0 16px 38px rgba(0,0,0,.25)!important;
}
.brand-hero .hero-overlay p{
  display:inline-flex!important;align-items:center;gap:7px;margin:0 0 10px!important;
  color:#b7f4e8!important;font-size:10px!important;font-weight:800!important;letter-spacing:.12em;text-transform:uppercase;
}
.brand-hero .hero-overlay p:before{content:"";width:7px;height:7px;border-radius:50%;background:#70ead2;box-shadow:0 0 0 5px rgba(112,234,210,.13)}
.brand-hero .hero-overlay h2{max-width:18ch!important;margin:0 0 9px!important;color:#fff!important;font-size:clamp(31px,4.2vw,54px)!important;line-height:.98!important;letter-spacing:-.045em!important;text-wrap:balance}
.brand-hero .hero-overlay span{display:block;max-width:44ch;color:rgba(240,249,248,.82)!important;font-size:clamp(13px,1.4vw,17px)!important;line-height:1.48!important}

/* A inteligência aparece antes do excesso de indicadores. */
.daily-action,.next-action,.rep-focus-card{
  border-color:color-mix(in srgb,var(--identity-accent) 22%,#dce5e0)!important;
  background:
    radial-gradient(circle at 100% 0,var(--identity-glow),transparent 42%),
    linear-gradient(145deg,#fff,color-mix(in srgb,var(--identity-accent) 5%,#fff))!important;
  box-shadow:var(--identity-shadow)!important;
}
.daily-action{margin-top:18px!important;padding:clamp(20px,3vw,30px)!important}
.daily-copy>p,.next-action>span,.rep-label{letter-spacing:.12em!important}
.daily-copy h2,.next-action h3,.rep-focus-copy h3{color:var(--identity-ink)!important;text-wrap:balance}
.daily-copy>span,.next-action>p,.rep-focus-copy>p{color:var(--identity-muted)!important;line-height:1.58!important}

.metric-grid{margin-top:16px!important}
.metric-grid article{
  min-width:0;min-height:132px;padding:20px!important;border-color:var(--identity-line)!important;
  background:linear-gradient(155deg,var(--identity-surface),color-mix(in srgb,var(--identity-accent) 3%,#fff))!important;
  box-shadow:0 13px 34px rgba(9,33,39,.065)!important;
}
.metric-grid article:before{content:"";position:absolute;left:20px;right:20px;top:0;height:3px;border-radius:0 0 8px 8px;background:var(--identity-accent);opacity:.7}
.metric-grid article>span{color:#667b80!important;font-size:11px!important;font-weight:750!important;line-height:1.35!important}
.metric-grid article>strong{display:block;margin:12px 0 7px!important;color:var(--identity-ink)!important;font-size:clamp(30px,3vw,40px)!important;line-height:1!important}
.metric-grid article>small{display:block;color:#718388!important;line-height:1.42!important}

.panel{border-color:var(--identity-line)!important;box-shadow:var(--identity-shadow)!important}
.panel-head h2,.panel>h2{color:var(--identity-ink);text-wrap:balance}
.panel .muted{color:var(--identity-muted);line-height:1.62}
.eyebrow{color:var(--identity-accent)!important;letter-spacing:.12em!important}
.live-dot,.badge,.pill{border-radius:999px!important}

/* Reputação continua sofisticada e utilizável em telas pequenas. */
.reputation-shell{max-width:1180px;margin-inline:auto}
.rep-focus-card{position:relative;overflow:hidden}
.rep-focus-card:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--identity-accent)}
.rep-kpis-simple .rep-kpi{border-color:var(--identity-line)!important;background:var(--identity-surface)!important}
.reputation-review{overflow:hidden}
.reputation-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.reputation-review-head small{display:block;margin-top:5px;line-height:1.5}
.reputation-actions{display:flex;gap:9px;flex-wrap:wrap}
.reputation-actions button{border-radius:12px!important;font-weight:800!important}

/* Estados discretos: o produto parece vivo sem distrair. */
.state:not([hidden]){position:relative;overflow:hidden;border-radius:18px}
.state:not([hidden]):after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:identityLoading 1.65s ease-in-out infinite}
@keyframes identityLoading{to{transform:translateX(100%)}}

/* Fechamento desktop da demonstração: identidade legível e controles sem colisão. */
@media(min-width:851px){
  body.public-demo .app>aside{padding:22px 14px!important}
  body.public-demo .side-brand{
    display:grid!important;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;
    width:100%;min-width:0;padding:10px!important;border-radius:18px!important;text-decoration:none;
  }
  body.public-demo .side-brand img{width:72px!important;height:72px!important;max-width:none!important;padding:4px;object-fit:contain;border-radius:15px!important}
  body.public-demo .side-brand span{display:block;min-width:0;color:#fff;font-size:13px;line-height:1.3;overflow-wrap:anywhere;text-decoration:none}
  body.public-demo .side-bottom{display:grid!important;gap:5px;margin-top:auto;padding:15px 8px 0!important;border-top:1px solid rgba(255,255,255,.12);font-size:11px;line-height:1.35}
  body.public-demo .side-bottom span{display:block;color:#9db5bd}
  body.public-demo .side-bottom a{display:inline-flex;width:max-content;color:#fff;text-underline-offset:3px}
  body.public-demo aside.demo-assistant{right:18px!important;bottom:18px!important;width:min(280px,calc(100vw - 36px))!important}
  body.public-demo .demo-assistant-launch{max-width:250px;padding:10px 13px!important;border-radius:16px!important}
  body.public-demo .demo-assistant-launch b{font-size:11px;line-height:1.2}
}

@media(max-width:760px){
  .workspace:before{left:0;height:310px}
  .workspace{padding-left:12px!important;padding-right:12px!important}
  .brand-hero{min-height:250px!important;height:250px!important;border-radius:24px!important}
  .brand-hero .hero-overlay{align-items:flex-end!important;gap:14px!important;padding:19px!important}
  .brand-hero .hero-overlay img{width:70px!important;height:70px!important;border-radius:19px!important;padding:6px}
  .brand-hero .hero-overlay>div{min-width:0}
  .brand-hero .hero-overlay p{margin-bottom:7px!important;font-size:8px!important}
  .brand-hero .hero-overlay h2{max-width:15ch!important;font-size:clamp(27px,8vw,38px)!important;line-height:1!important}
  .brand-hero .hero-overlay span{max-width:30ch;font-size:12px!important;line-height:1.38!important}
  .daily-action{grid-template-columns:1fr!important;gap:14px!important;padding:19px!important;border-radius:20px!important}
  .daily-icon{display:none!important}.daily-button{width:100%!important}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .metric-grid article{min-height:122px!important;padding:16px!important;border-radius:18px!important}
  .metric-grid article:before{left:16px;right:16px}
  .metric-grid article>span{font-size:10px!important}
  .metric-grid article>strong{font-size:30px!important;margin:11px 0 6px!important}
  .metric-grid article>small{font-size:9px!important;line-height:1.35!important}
  .panel{border-radius:20px!important}
  .rep-focus-card{padding:18px 17px 18px 21px!important}
  .rep-focus-copy h3{font-size:23px!important;line-height:1.1!important}
  .rep-kpis-simple{grid-template-columns:1fr!important}
  .rep-kpis-simple .rep-kpi{min-height:84px!important;padding:14px 16px!important}
  .reputation-review{padding:15px!important}
  .reputation-review-head{flex-direction:column!important}
  .reputation-draft{padding:14px!important}
  .reputation-actions{display:grid!important;grid-template-columns:1fr!important}
  .reputation-actions button{width:100%!important;min-height:48px!important}
}

@media(max-width:390px){
  .brand-hero .hero-overlay{gap:10px!important;padding:16px!important}
  .brand-hero .hero-overlay img{width:60px!important;height:60px!important}
  .brand-hero .hero-overlay h2{font-size:26px!important}
  .metric-grid{grid-template-columns:1fr!important}
  .metric-grid article{min-height:104px!important}
}

@media(prefers-reduced-motion:reduce){
  .state:not([hidden]):after{animation:none!important}
  .metric-grid article,.panel,.brand-hero{transition:none!important}
}