/* /modus — estilos próprios (o padrão visual está em src/styles/brand.css; seções r2 e motions .mv-* em sysmock.css). */
.md-k{font-size:12.5px;font-weight:500;color:var(--sx-ink3)}

/* Canais: plataformas conectadas → uma lista */
.md-ch{display:flex;flex-direction:column;gap:12px}
.md-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.md-tile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;min-height:148px;min-width:0;background:#fff;border:1px solid var(--sx-line);border-radius:16px;transition:border-color .25s,box-shadow .25s}
.md-tile b{font-family:var(--f-brand);font-size:15px;font-weight:500}
.md-tile .sx-btn{margin-top:auto}
.md-tile.is-hi{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.12)}
.md-tile .sx-ic{transition:background .25s,color .25s}
.md-ch .md-k{margin-top:4px}
.md-sales{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:0 16px}
.md-sales li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--sx-line)}
.md-sales li:first-child{border-top:0}
.md-v{font-family:var(--f-brand);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}

/* Produto e ofertas: árvore */
.md-tree{position:relative;height:360px;background:#fff;border:1px solid var(--sx-line);border-radius:18px}
.md-tl{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.md-tl path{fill:none;stroke:var(--sx-line2);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .4s,stroke .3s}
.md-tree.is-lines .md-tl path{opacity:1}
.md-tl path.on{stroke:var(--sx-blue);stroke-width:2}
.md-prod{position:absolute;left:4%;top:50%;width:36%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;background:var(--paper);border-radius:16px;z-index:1}
.md-prod .sx-ic{margin-bottom:6px}
.md-prod > b{font-family:var(--f-brand);font-weight:500;font-size:16px;line-height:1.3}
.md-prod > span:not(.sx-ic){font-size:12.5px;color:var(--sx-ink3)}
.md-hit{margin-top:8px}
.md-offs li{position:absolute;left:55%;right:4%;top:var(--y);transform:translateY(-50%);display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;z-index:1;transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease),border-color .25s,box-shadow .25s}
.md-offs .sx-ic{width:28px;height:28px;border-radius:8px}
.sx.is-armed .md-offs li:not(.in){opacity:0;transform:translateY(calc(-50% + 8px))}
.md-offs li.on{border-color:rgba(0,122,255,.5);box-shadow:0 0 0 3px rgba(0,122,255,.12)}
.md-offs li.on .sx-ic{background:var(--sx-blue-b);color:var(--sx-blue-t)}

/* Acessos: passe do comprador */
.md-acc{display:flex;flex-direction:column;gap:8px}
.md-al{display:flex;flex-direction:column;gap:8px}
.md-al li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px}
.md-pass{margin-top:6px;background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -40px rgba(10,20,60,.4);transition:border-color .25s,box-shadow .25s}
.md-pass.is-hi{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.12)}
.md-pass-h{display:flex;gap:14px;align-items:center}
.md-pass-h .mv-tt b{font-size:17px}
.md-lock{position:relative;width:48px;height:48px;border-radius:14px;background:var(--sx-al-b);color:var(--sx-al-t);flex:none;transition:background .3s,color .3s}
.md-lock i{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .3s,transform .3s var(--sx-ease)}
.md-lock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.md-lock .b{opacity:0;transform:translateY(6px)}
.md-pass.is-open .md-lock{background:var(--sx-ok-b);color:var(--sx-ok-t)}
.md-pass.is-open .md-lock .a{opacity:0;transform:translateY(-6px)}
.md-pass.is-open .md-lock .b{opacity:1;transform:none}
.md-pass-k{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px 0;border-block:1px solid var(--sx-line)}
.md-pass-k dt{font-size:12px;color:var(--sx-ink3)}
.md-pass-k dd{margin:2px 0 0;font-size:13.5px;font-weight:500;transition:color .25s}
.md-em{color:var(--sx-al-t)}
.md-em.ok{color:var(--sx-ok-t)}
.md-pass-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;min-height:36px}
.md-pass-f .sx-btn{height:36px}

/* Assinatura: régua de tentativas */
.md-sub{background:#fff;border-radius:18px;padding:18px 20px;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.md-sub-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--sx-line)}
.md-sub-h .mv-tt b{font-size:15px}
.md-rg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:22px}
.md-rg::before{content:"";position:absolute;left:7px;right:calc((100% - 28px) / 3 - 7px);top:28px;height:2px;background:var(--sx-line2)}
.md-rg li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-top:26px;min-width:0;transition:opacity .3s}
.sx.is-armed .md-rg li:not(.on){opacity:.5}
.md-dt{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #AAAAAA;transition:box-shadow .25s}
.md-rg li.on .md-dt{box-shadow:inset 0 0 0 4px var(--sx-blue)}
.md-rg time{font-size:12.5px;color:var(--sx-ink3);font-variant-numeric:tabular-nums}
.md-rg b{font-family:var(--f-brand);font-weight:500;font-size:14.5px}
.md-rg span:not(.sx-badge){font-size:12.5px;color:var(--sx-ink3)}
.md-rg .sx-badge{margin-top:8px}
.md-sub-f{display:flex;gap:10px;align-items:center;margin-top:20px;padding:10px 12px;border-radius:12px;background:var(--sx-ok-b);color:var(--sx-ok-t);font-size:13px}
.md-sub-f .sx-ic{width:26px;height:26px;border-radius:50%;background:var(--sx-ok);color:#fff}
.md-sub-f .sx-ic svg{width:13px;height:13px}

/* Comissões: a venda se divide */
.md-cm{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:20px 22px}
.md-bar{position:relative;height:16px;border-radius:999px;background:var(--sx-wash);margin:16px 0 14px;overflow:hidden}
.md-bar i{position:absolute;top:0;bottom:0;left:calc(var(--l) * 100%);width:calc(var(--w) * 100% - 3px);transform-origin:left;transition:transform .6s var(--sx-ease)}
.md-bar i.c3{width:calc(var(--w) * 100%)}
.sx.is-armed .md-bar i:not(.in){transform:scaleX(0)}
.md-cm .c1{background:var(--sx-blue)}
.md-cm .c2{background:rgba(0,122,255,.35)}
.md-cm .c3{background:var(--sx-ok)}
.md-leg li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 104px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--sx-line)}
.md-leg li > i{width:12px;height:12px;border-radius:4px}
.md-leg .sx-badge{justify-self:end}
.md-lv{font-family:var(--f-brand);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .md-tiles{grid-template-columns:minmax(0,1fr)}
  .md-tile{flex-direction:row;align-items:center;flex-wrap:wrap;min-height:62px;padding:12px 14px}
  .md-tile b{flex:1}
  .md-tile .sx-btn{margin-top:0}
  .md-sales{padding:0 14px}
  .md-sales li{grid-template-columns:minmax(0,1fr) auto}
  .md-sales li .sx-badge.dot{display:none}
  .md-tree{height:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
  .md-tl{display:none}
  .md-prod{position:static;transform:none;width:auto;margin-bottom:4px}
  .md-offs{display:flex;flex-direction:column;gap:8px;padding-left:16px;border-left:2px solid var(--sx-line2);margin-left:12px}
  .md-offs li{position:static;transform:none}
  .sx.is-armed .md-offs li:not(.in){transform:translateY(8px)}
  .md-al li{padding:10px 12px}
  .md-pass{padding:16px}
  .md-sub{padding:16px}
  .md-sub-h{grid-template-columns:auto minmax(0,1fr)}
  .md-sub-h .sx-badge{grid-column:2;justify-self:start}
  .md-rg{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:16px}
  .md-rg::before{left:6px;right:auto;top:24px;bottom:40px;width:2px;height:auto}
  .md-rg li{padding:0 0 0 30px}
  .md-dt{top:2px}
  .md-rg .sx-badge{margin-top:6px}
  .md-cm{padding:16px}
  .md-leg li{grid-template-columns:12px minmax(0,1fr) auto}
  .md-leg .sx-badge{grid-column:2;grid-row:2;justify-self:start}
}