/* SubaMeta Experience: identidade consistente, planos e colaboração familiar. */
:root {--smx-green:#0e9879;--smx-ink:#123a43;--smx-soft:#eaf8f2;--smx-border:#d7e8e3}
/* Fotos sempre circulares, inclusive a prévia do perfil. */
.avatar,.avatar .sm-avatar-image,.sm-photo-large,.sm-profile-photo,.sm-avatar-trigger,.sm-avatar-trigger img,.mini-user .avatar {border-radius:50%!important}
.avatar,.sm-photo-large {overflow:hidden;aspect-ratio:1;flex-shrink:0}
.avatar{width:43px;height:43px;box-shadow:0 0 0 3px #e9f7f1}
.avatar img,.sm-photo-large img {height:100%!important;width:100%!important;object-fit:cover;object-position:center}
.sm-photo-large{height:120px;width:120px;box-shadow:0 0 0 5px #e7f7f0,0 16px 30px #122e3018}
.smx-install-nudge{display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:18px;background:linear-gradient(105deg,#113e3b,#145a4a);color:#fff;box-shadow:0 14px 40px #064b3b25;margin-bottom:21px;position:relative;animation:smx-welcome .45s ease 3s backwards}
.smx-install-nudge>img{border-radius:13px;flex-shrink:0}.smx-install-nudge>div{flex:1;min-width:0}.smx-install-nudge strong{font-size:15px;font-weight:850}.smx-install-nudge p{font-size:12px;color:#cfebdc;line-height:1.55;margin:4px 0 0}.smx-install-nudge .btn{background:#e4fff0!important;color:#12533c!important;white-space:nowrap;border:none!important}
.smx-nudge-close{display:grid;place-items:center;background:#fff2;border:0;color:#fff;border-radius:50%;width:29px;height:29px;cursor:pointer;position:relative;flex-shrink:0}
@keyframes smx-welcome{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.topbar{gap:20px}.topbar>div:first-child{min-width:0}.top-right{display:flex;align-items:center;justify-content:flex-end;gap:16px!important;min-width:0;flex-wrap:nowrap}
.top-right .sm-avatar-trigger{margin-left:3px;flex-shrink:0}.top-right .top-plan{flex-shrink:0}
.topbar .smn-holder{order:3;flex-shrink:0;margin:0 2px 0 2px}.top-right .sm-avatar-trigger{order:4}
.top-right .theme-toggle{order:0}.top-right .today{order:1}.top-right .top-plan{order:2}
.top-right .smn-bell{width:44px;height:44px;border-radius:14px;box-shadow:0 4px 14px #0a5b4b0b}
.top-right .smn-popover{right:-60px}
.smx-pricing-intro{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:20px}
.smx-pricing-intro span{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;background:var(--white);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:750;border-radius:99px}
.smx-pricing-intro svg{color:#0d9a79}
.smx-pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;align-items:stretch}
.smx-plan{background:var(--white);border:1px solid var(--line);border-radius:23px;position:relative;padding:27px 24px 24px;display:flex;flex-direction:column;gap:0;box-shadow:0 14px 34px #092b2b0d;transition:transform .2s,box-shadow .2s}
.smx-plan:hover{transform:translateY(-3px);box-shadow:0 17px 43px #0a544d16}
.smx-featured{border:2px solid #12ad87;box-shadow:0 19px 50px #16af8520;background:linear-gradient(163deg,#f8fffc,var(--white) 55%)}
.smx-family{background:linear-gradient(158deg,#122c43,#0b4842);color:#ecfff7;border-color:#1b685a}
.smx-plan-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;gap:12px}
.smx-plan-badge{font-weight:850;font-size:10px;letter-spacing:.12em;color:#178b73}
.smx-plan-symbol{display:grid;place-items:center;width:42px;height:42px;color:#168969;background:#eaf9f2;border-radius:14px}
.smx-plan h2{margin:0;font-size:27px;letter-spacing:-1.2px;color:var(--ink)}
.smx-plan-desc{margin:9px 0 20px;line-height:1.6;min-height:62px;color:var(--muted);font-size:12px}
.smx-plan-price{font-size:clamp(25px,2.3vw,35px);font-weight:900;letter-spacing:-1.4px;white-space:nowrap;color:var(--ink);line-height:1.2}
.smx-plan-price small{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:0;margin-left:4px}
.smx-plan-divider{height:1px;background:var(--line);margin:23px 0 18px}
.smx-plan-caption{color:var(--ink);font-size:12px;font-weight:850;margin-bottom:17px}
.smx-features{list-style:none!important;padding:0!important;margin:0 0 28px!important;display:flex;flex-direction:column;gap:14px;flex:1}
.smx-features li{font-size:12px;color:var(--muted);line-height:1.6;display:flex;gap:11px;align-items:flex-start}
.smx-features svg{color:#17a982;flex-shrink:0;margin-top:1px}
.smx-features .smx-limited svg{color:#cd7880}
.smx-features .smx-limited{color:#a6aeb6}
.smx-plan .btn{min-height:48px;border-radius:12px;justify-content:center;gap:9px}
.smx-family .smx-plan-badge{color:#86e6c6}.smx-family .smx-plan-symbol{background:#ffffff1c;color:#abf6df}
.smx-family h2,.smx-family .smx-plan-price,.smx-family .smx-plan-caption{color:#f1fff9}
.smx-family .smx-plan-desc,.smx-family .smx-features li,.smx-family .smx-plan-price small{color:#c5d9d8}
.smx-family .smx-plan-divider{background:#ffffff25}.smx-family .smx-features svg{color:#6bebc4}
.smx-family .btn{background:#aaf4ce!important;color:#134437!important;border:none!important}
.smx-pricing-foot{margin-top:19px;padding:16px 19px;background:var(--white);border-radius:14px;border:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--muted)}
.smx-pricing-foot strong{color:var(--ink)}
/* Família */
.smx-family-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:20px 0}
.smx-family-stats>div{background:var(--white);border:1px solid var(--line);border-radius:17px;padding:21px}
.smx-family-stats small{font-size:12px;color:var(--muted);display:block;margin-bottom:12px}
.smx-family-stats strong{font-size:clamp(17px,2vw,26px);font-weight:850;color:var(--ink);letter-spacing:-.8px;overflow-wrap:anywhere}
.smx-family-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-bottom:17px}
.smx-family-card{padding:25px;margin-bottom:17px}
.smx-family-card h2{font-size:19px;color:var(--ink);letter-spacing:-.5px;margin:0 0 7px}
.smx-family-card h3{font-size:14px;color:var(--ink);margin:16px 0}
.smx-family-card>p{font-size:12px;line-height:1.65;color:var(--muted);margin:0 0 20px}
.smx-family-divider{height:1px;background:var(--line);margin:23px 0}
.smx-family-row{display:flex;gap:14px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:15px 0}
.smx-family-row:last-child{border-bottom:0}
.smx-family-row>div:first-child{min-width:0}
.smx-family-row strong{display:block;font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.smx-family-row small{font-size:11px;color:var(--muted);display:block;margin-top:5px;line-height:1.5;overflow-wrap:anywhere}
.smx-inline-actions{display:flex;gap:7px;flex-wrap:wrap}
.smx-tag{font-size:9px;color:#08745b;background:#dffaf0;padding:4px 7px;border-radius:30px;vertical-align:middle;margin-left:4px}
.smx-family-form{display:flex;gap:11px;align-items:flex-end;flex-wrap:wrap;margin:15px 0}
.smx-family-form label{flex:1 1 140px;min-width:0;font-size:12px;color:var(--muted)}
.smx-family-form input{display:block;margin-top:6px;width:100%;min-height:42px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--white);color:var(--ink)}
.smx-family-form button{min-height:42px;flex-shrink:0}
.smx-shared-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.smx-shared-goal{padding:20px;background:var(--bg);border:1px solid var(--line);border-radius:17px;min-width:0}
.smx-shared-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:baseline}.smx-shared-top strong{font-size:14px;color:var(--ink)}.smx-shared-top span{font-size:11px;color:var(--muted)}
.smx-shared-value{margin:15px 0 9px;font-size:21px;font-weight:850;color:var(--ink)}.smx-shared-value small{font-size:12px;font-weight:500;color:var(--muted)}
.smx-progress{height:9px;background:#d5e7e0;border-radius:99px;overflow:hidden}.smx-progress i{height:100%;display:block;background:linear-gradient(90deg,#13b98f,#69e6b9);border-radius:99px}
.smx-shared-goal>small{color:var(--muted);font-size:11px;display:block;margin-top:13px}
.smx-empty{padding:24px;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}
:root[data-theme="dark"] .smx-featured{background:linear-gradient(158deg,#152e40,#183b39);border-color:#48cea0}
:root[data-theme="dark"] .smx-family{background:linear-gradient(148deg,#092b39,#164d43);border-color:#2d8772}
:root[data-theme="dark"] .smx-plan-symbol{background:#205347;color:#9cf5d3}
:root[data-theme="dark"] .smx-plan-badge,:root[data-theme="dark"] .smx-pricing-intro svg{color:#65e0b6}
:root[data-theme="dark"] .avatar{box-shadow:0 0 0 3px #2f5e4b}
:root[data-theme="dark"] .smx-pricing-intro span{background:#173443}
:root[data-theme="dark"] .smx-progress{background:#254d4a}
@media(max-width:1100px){.smx-pricing-grid{gap:11px}.smx-plan{padding:21px 17px}.top-right .today{display:none}}
@media(max-width:900px){.smx-pricing-grid{grid-template-columns:1fr}.smx-plan-desc{min-height:auto}.smx-family-layout,.smx-shared-list{grid-template-columns:1fr}}
@media(max-width:680px){
 .topbar{padding:0 15px;height:72px;gap:8px}.top-right{gap:11px!important}
 .top-right .top-plan{display:none}.top-right .theme-toggle{width:37px;height:37px}
 .top-right .smn-bell{width:40px;height:40px;min-width:40px;min-height:40px}
 .top-right .sm-avatar-trigger .avatar{height:41px;width:41px}
 .breadcrumb{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
 .smn-popover{right:-54px!important}
 .smx-install-nudge{flex-wrap:wrap;padding:16px 14px;gap:10px}.smx-install-nudge>div{flex-basis:calc(100% - 60px)}.smx-install-nudge .btn{margin-left:56px}
 .smx-nudge-close{position:absolute;right:9px;top:8px;background:transparent}
 .smx-plan{padding:25px}.smx-family-stats{gap:8px}.smx-family-stats>div{padding:15px 12px}.smx-family-stats small{font-size:10px}.smx-family-stats strong{font-size:17px}
 .smx-family-card{padding:20px}.smx-family-row{align-items:flex-start;flex-wrap:wrap}.smx-family-row .btn{margin-left:auto}
 .smx-family-form{display:grid}.smx-family-form label{width:100%}
}
@media(prefers-reduced-motion:reduce){.smx-install-nudge{animation:none}.smx-plan{transition:none}}
/* Menus acessíveis mesmo em celulares de baixa altura. */
.sidebar{overflow-y:auto;overscroll-behavior:contain}
.sidebar-bottom{flex-shrink:0}

/* QR Code Pix: acessível e centralizado no modal, inclusive no celular. */
.sm-pix-qr{display:block;width:min(230px,76vw);height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:16px;padding:10px;margin:0 auto 16px;box-shadow:0 9px 30px #001d2518}

/* Checkout de pagamento direto: estados de carregamento e erro. */
.smx-checkout-modal .smx-pix-loading { min-height: 180px; display:flex; flex-direction:column; align-items:center;justify-content:center;gap:12px; text-align:center; }
.smx-checkout-modal .smx-pix-loading .spinner { width:35px; height:35px; border:3px solid #bdddd3; border-top-color:#14a47d; border-radius:50%; animation:smxPixSpin .8s linear infinite; }
@keyframes smxPixSpin {to {transform:rotate(360deg)}}
.smx-checkout-modal .smx-payment-error{ display:flex;align-items:flex-start;gap:10px;line-height:1.6;margin-bottom:18px;white-space:normal; }
.smx-checkout-modal .smx-payment-error svg{flex-shrink:0;margin-top:1px}
@media(prefers-reduced-motion:reduce){.smx-checkout-modal .smx-pix-loading .spinner{animation:none}}