/* /conta/conta.css -- telas da conta: Apoie o WPG, Convide e Ganhe, Meu perfil e Perfil público
   (mockup aprovado 20/10/2026: docs/mockups/plataforma/telas-da-conta.html).
   Cores próprias (--ct-*): o --or do site muda de cor em algumas áreas. Letra mínima 15px (regra 18); cenário e cortes (regra 11);
   a onda de luz é o span.rk-onda de public/artes/feixe-onda.css (regra 20); cartões alinhados por subgrid (regra 25);
   listas e histórico em gavetas fechadas (regra 30). */
.ct{--ct-950:#090c13;--ct-900:#0c0f16;--ct-850:#0f131c;--ct-800:#141a25;--ct-line:#29313d;--ct-line-hi:#3a4759;
  --ct-hi:#f0f3f7;--ct-mid:#a7b0bd;--ct-low:#7d8898;--ct-or:#ff7a2f;--ct-or-300:#ffb082;--ct-or-wash:rgba(255,122,47,.10);--ct-or-line:rgba(255,122,47,.38);
  --ct-ouro:#e3b341;--ct-ciano:#20d3e0;--ct-ok:#38d6a0;--ct-ruim:#f0736a;
  --ct-display:'Archivo','Inter',system-ui,sans-serif;--ct-mono:'IBM Plex Mono',ui-monospace,monospace;
  display:grid;gap:18px;color:var(--ct-hi);font-size:15px;line-height:1.5}
.ct [hidden]{display:none!important}
.ct button{font:inherit;color:inherit}
.ct button:focus-visible,.ct summary:focus-visible,.ct input:focus-visible,.ct select:focus-visible{outline:2px solid var(--ct-or);outline-offset:2px}
.ct-etiq{font:600 15px var(--ct-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ct-or)}
.ct-chip{font:600 15px var(--ct-mono);border:1px solid var(--ct-line-hi);color:var(--ct-mid);border-radius:999px;padding:2px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ct-chip.ok{border-color:rgba(56,214,160,.5);color:var(--ct-ok)}
.ct-chip.ouro{border-color:color-mix(in srgb,var(--ct-ouro) 55%,transparent);color:var(--ct-ouro)}
.ct-chip.ciano{border-color:color-mix(in srgb,var(--ct-ciano) 55%,transparent);color:var(--ct-ciano)}
.ct-chip.ruim{border-color:color-mix(in srgb,var(--ct-ruim) 55%,transparent);color:var(--ct-ruim)}
.ct-btn{border:1px solid var(--ct-line-hi);background:var(--ct-800);border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer;text-align:center;font-size:15px}
.ct-btn.ct-pri{background:var(--ct-or);border-color:var(--ct-or);color:#1a0b02}
.ct-btn:disabled{opacity:.55;cursor:not-allowed}
.ct-linha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ct-campo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.ct-campo input{width:100%;background:var(--ct-900);border:1px solid var(--ct-line-hi);border-radius:10px;padding:10px 12px;color:var(--ct-hi);font:inherit;font-size:15px}
.ct-msg{margin:0;min-height:1.4em;color:var(--ct-mid)}
.ct-msg.ok{color:var(--ct-ok)}.ct-msg.error{color:var(--ct-ruim)}

/* blocos: faixa no topo, cortes diagonais, onda (span.rk-onda) */
.ct-bloco{position:relative;overflow:hidden;isolation:isolate;background:var(--ct-850);border:1px solid var(--ct-line);border-radius:16px;padding:18px;min-width:0;display:grid;gap:12px;align-content:start}
.ct-bloco::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--ct-faixa,var(--ct-or));z-index:2}
.ct-cortes{position:absolute;right:-30px;top:0;bottom:0;width:180px;z-index:-1;pointer-events:none;overflow:hidden}
.ct-cortes i{position:absolute;top:-20%;bottom:-20%;width:2px;background:var(--ct-sub,var(--ct-or));opacity:.28;transform:rotate(24deg)}
.ct-cortes i:nth-child(1){right:40px}.ct-cortes i:nth-child(2){right:70px;opacity:.18}.ct-cortes i:nth-child(3){right:96px;opacity:.12}
.ct-bloco h2,.ct-bloco h3{margin:0;font:800 21px var(--ct-display);text-wrap:balance}
.ct-bloco h3{font-size:18px}
.ct-bloco p{margin:0;color:var(--ct-mid)}
.ct-kicker{font:600 15px var(--ct-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ct-or)}

/* cabeça com cenário */
.ct-cab{min-height:210px;align-content:end;--ct-faixa:linear-gradient(90deg,#ff7a2f,#e3b341,#20d3e0)}
.ct-fundo{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.ct-cab::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,19,28,.96) 0%,rgba(15,19,28,.82) 46%,rgba(15,19,28,.25) 100%)}
.ct-cab h1{margin:0;font:900 clamp(28px,5vw,42px)/1.05 var(--ct-display);text-wrap:balance}
.ct-cab h1 .hl{color:var(--ct-or)}
.ct-cab p{max-width:62ch}
.ct-balanca{animation:ct-balanca 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
.ct-sobe{animation:ct-sobe 7s linear infinite;opacity:0}
@keyframes ct-balanca{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes ct-sobe{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-140px);opacity:0}}

/* cartões alinhados (regra 25): subgrid */
.ct-grade{display:grid;gap:12px}
.ct-g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ct-g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.ct-kpi{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:2px;background:var(--ct-900);border:1px solid var(--ct-line);border-radius:12px;padding:14px;position:relative;overflow:hidden}
.ct-kpi span{color:var(--ct-mid)}
.ct-num{font:800 30px var(--ct-display);font-variant-numeric:tabular-nums}

/* gavetas (regra 30) */
.ct-gaveta{background:var(--ct-900);border:1px solid var(--ct-line);border-radius:14px;position:relative;overflow:hidden;isolation:isolate}
.ct-gaveta summary{cursor:pointer;list-style:none;padding:14px 16px;font:800 17px var(--ct-display);display:flex;justify-content:space-between;gap:12px}
.ct-gaveta summary::-webkit-details-marker{display:none}
.ct-gaveta summary::after{content:"+";font:600 20px var(--ct-mono);color:var(--ct-mid)}
.ct-gaveta[open] summary::after{content:"−"}
.ct-dentro{padding:0 16px 16px;color:var(--ct-mid);display:grid;gap:10px}
.ct-dentro ul{margin:0;padding-left:20px;display:grid;gap:6px}
.ct-rolar{overflow-x:auto}

.ct-btn.ct-perigo{border-color:color-mix(in srgb,var(--ct-ruim) 60%,transparent);color:var(--ct-ruim)}
.ct-btn.ct-ouro{background:var(--ct-ouro);border-color:var(--ct-ouro);color:#1d1503}

/* Apoie o WPG: planos em cartões alinhados (o botão inteiro assina; data-plan e .vip-plan-price seguem como o JS espera) */
.ct .vip-plans-list.ct-planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.ct .vip-plan-btn{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:6px;align-items:start;justify-content:stretch;width:auto;padding:14px;border-radius:12px;border:1px solid var(--ct-line);background:var(--ct-900);text-align:left;color:var(--ct-hi);font:inherit}
.ct .vip-plan-btn:hover{border-color:var(--ct-or)}
.ct .vip-plan-btn.featured{border-color:var(--ct-or-line);background:linear-gradient(180deg,var(--ct-or-wash),transparent 70%),var(--ct-900)}
.ct .vip-plan-name{font:800 17px var(--ct-display);color:var(--ct-hi)}
.ct .vip-plan-price{font:800 26px var(--ct-display);color:var(--ct-hi);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.ct .vip-plan-price small{font:500 15px var(--ct-mono);color:var(--ct-low)}
.ct .vip-plan-badge{position:static;justify-self:start;font:600 15px var(--ct-mono);border:1px solid rgba(56,214,160,.5);color:var(--ct-ok);background:none;border-radius:999px;padding:2px 10px;min-height:1.6em}
.ct .vip-plan-badge.best{border-color:color-mix(in srgb,var(--ct-ouro) 55%,transparent);color:var(--ct-ouro)}
.ct .vip-plan-badge.ct-vazio{visibility:hidden}
.ct .ct-assinar{align-self:end;border:1px solid var(--ct-or);background:var(--ct-or);color:#1a0b02;border-radius:10px;padding:9px 14px;font-weight:700;text-align:center}
.ct .vip-plan-btn.featured .ct-assinar{background:var(--ct-ouro);border-color:var(--ct-ouro);color:#1d1503}
/* WPG FUND e doação */
.ct .fund-bar{height:12px;border-radius:999px;background:var(--ct-800);border:1px solid var(--ct-line);overflow:hidden;margin:0}
.ct .fund-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ct-ciano),var(--ct-ouro));border-radius:inherit;transition:width .5s ease}
.ct .fund-progress{margin:0;color:var(--ct-mid);font:inherit;font-variant-numeric:tabular-nums}
.ct .fund-detail-block,.ct .fund-detail-why,.ct .fund-detail-total{margin:0}
.ct .donate-amounts{display:flex;gap:8px;flex-wrap:wrap}
.ct .donate-amount-btn{flex:1;min-width:90px;padding:10px 8px;border-radius:10px;border:1px solid var(--ct-line-hi);background:var(--ct-800);color:var(--ct-hi);font:700 15px var(--ct-display);cursor:pointer}
.ct .donate-amount-btn:hover,.ct .donate-amount-btn.active{border-color:var(--ct-ouro);color:var(--ct-ouro);background:rgba(227,179,65,.12)}
.ct input[type=text],.ct input[type=number],.ct select{width:100%;background:var(--ct-900);border:1px solid var(--ct-line-hi);border-radius:10px;padding:10px 12px;color:var(--ct-hi);font:inherit;font-size:15px;box-sizing:border-box}
.ct .check-row{display:flex;gap:10px;align-items:flex-start;color:var(--ct-mid)}
.ct .check-row input{width:20px;height:20px;margin-top:2px;accent-color:var(--ct-or);flex:none}
.ct a{color:var(--ct-or-300)}

/* Meu perfil: abas do perfil (ids perfilTab e perfilPanel do perfil.js), cartões de status e ações no mesmo desenho */
.ct .ct-tabs{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;border:0;border-bottom:1px solid var(--ct-line);border-radius:0;background:none;padding:0 0 10px;position:static}
.ct .ct-tabs .community-env-tab{width:auto;flex:none;background:var(--ct-800);border:1px solid var(--ct-line-hi);border-radius:10px;padding:8px 14px;cursor:pointer;color:var(--ct-mid);font:600 15px var(--ct-display);text-align:center}
.ct .ct-tabs .community-env-tab.active{background:var(--ct-or);border-color:var(--ct-or);color:#1a0b02}
.ct .ct-tabs .community-env-tab.pn-ext{border-style:dashed}
.ct-painel{min-width:0}
.ct-secao{display:grid;gap:12px;min-width:0}
.ct-secao h2{margin:0;font:800 21px var(--ct-display)}
.ct-secao h3{margin:6px 0 0;font:800 18px var(--ct-display)}
.ct-secao p{margin:0;color:var(--ct-mid)}
.ct-dois{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ct-dois label,.ct .field-label{display:block;color:var(--ct-mid);margin-bottom:6px;font-size:15px;font-weight:400}
.ct-pilha{display:grid;gap:8px}
.ct .perfil-status-grid,.ct .perfil-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.ct .perfil-status-item,.ct .perfil-action-card{background:var(--ct-900);border:1px solid var(--ct-line);border-radius:12px;padding:14px;color:var(--ct-hi);font:inherit;text-align:left}
.ct .perfil-status-item.ok{border-color:rgba(56,214,160,.4)}
.ct .perfil-status-item.warn{border-color:var(--ct-or-line)}
.ct .perfil-action-card{cursor:pointer;display:flex;gap:14px;align-items:center}
.ct .perfil-action-card:hover{border-color:var(--ct-or);background:var(--ct-900)}
.ct .perfil-action-card.perigo .perfil-action-title{color:var(--ct-ruim)}
.ct .perfil-action-card[hidden]{display:none!important}
.ct .perfil-action-icon,.ct .perfil-status-icon{font-size:20px}
.ct .perfil-action-title,.ct .perfil-status-text strong{font:800 17px var(--ct-display);color:var(--ct-hi)}
.ct .perfil-action-desc,.ct .perfil-status-text p{font-size:15px;color:var(--ct-mid);line-height:1.5}
.ct .perfil-status-text button{border-radius:8px;padding:6px 12px;font-size:15px}
.ct .perfil-identity-card{background:none;border:0;padding:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.ct .perfil-identity-fields{display:grid;gap:10px;min-width:0}
.ct .perfil-identity-label{font-size:15px;color:var(--ct-mid);font-weight:400}
.ct .perfil-identity-avatar-btn{font-size:15px;border-radius:10px;padding:8px 14px}
.ct .perfil-identity-fields .btn{padding:9px 14px}
.ct .seg-list{display:grid;gap:8px}
.ct .seg-item{background:var(--ct-850);border:1px solid var(--ct-line);border-radius:12px;padding:12px 14px}
.ct .seg-item-info strong{font-size:15px;color:var(--ct-hi)}
.ct .seg-item-info small,.ct .seg-empty{font-size:15px;color:var(--ct-mid)}
.ct .seg-item-tag,.ct .seg-item-revoke{font-size:15px}
.ct .discovery-hint{border:1px dashed var(--ct-line-hi);border-radius:12px;padding:10px 14px;color:var(--ct-mid);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin:0}
/* Perfil público: cabeça com cenário, números em blocos, atividade e publicações */
.ct .public-profile-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:0}
.ct .public-profile-avatar{width:84px;height:84px}
.ct .public-profile-name{font:900 28px var(--ct-display);margin:0;color:var(--ct-hi)}
.ct .public-profile-bio{font-size:15px;color:var(--ct-hi);margin:0}
.ct .public-profile-member-since{font-size:15px;color:var(--ct-mid);margin:0}
.ct .public-profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;border:0;padding:0;margin:0}
.ct .public-profile-stat{flex-direction:column;align-items:flex-start;gap:2px}
.ct .public-profile-stat b{font:800 30px var(--ct-display);color:var(--ct-hi);font-variant-numeric:tabular-nums}
.ct .public-profile-stat span{font-size:15px;color:var(--ct-mid)}
.ct .public-profile-stat .rk-onda{position:absolute}
.ct .public-profile-activity{margin:0}
.ct .public-profile-activity-title,.ct .public-profile-posts-title{font:800 21px var(--ct-display);margin:0;color:var(--ct-hi)}
.ct .public-profile-activity-row{font-size:15px;color:var(--ct-hi);margin:0}
.ct .public-profile-activity-label{font-size:15px;color:var(--ct-mid)}
@media (max-width:700px){.ct .public-profile-header{grid-template-columns:auto minmax(0,1fr)}.ct .public-profile-header .pp-msg-wrap{grid-column:1/-1}}
@media (max-width:640px){.ct .perfil-identity-card{grid-template-columns:minmax(0,1fr)}}

@media (max-width:640px){.ct-campo{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ct-balanca,.ct-sobe{animation:none!important}.ct-sobe{opacity:.6}}
