/* ─── SlyBot — Auth pages & Minha Conta ───────────────────────────── */
/* Auth premium (login estilo WP) ────────────────────────────────── */
.slybot-login-wrap {
min-height: calc(100vh - 200px);
display: flex; align-items: center; justify-content: center;
padding: 60px 20px;
background: #080C16;
position: relative;
}
.slybot-login-wrap::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(96,165,250,0.10) 0%, transparent 55%),
radial-gradient(ellipse at 50% 100%, rgba(96,165,250,0.04) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.slybot-login-box {
position: relative; z-index: 1;
width: 100%; max-width: 440px;
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 44px 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.slybot-login-logo {
text-align: center;
margin-bottom: 28px;
}
.slybot-login-logo img {
width: 132px; height: auto;
display: inline-block;
}
.slybot-login-title {
font-size: 1.6rem; font-weight: 800;
color: #fff; text-align: center;
letter-spacing: -0.01em;
margin: 0 0 8px; line-height: 1.2;
}
.slybot-login-sub {
text-align: center;
font-size: 0.92rem; color: rgba(255,255,255,0.55);
margin: 0 0 28px; line-height: 1.5;
}
.slybot-login-error {
display: flex; align-items: center; gap: 10px;
background: rgba(248,113,113,0.10);
border: 1px solid rgba(248,113,113,0.28);
color: #FCA5A5;
font-size: 0.85rem;
padding: 12px 14px;
border-radius: 10px;
margin-bottom: 16px;
}
.slybot-login-error svg { flex-shrink: 0; }
.slybot-login-form {
display: flex; flex-direction: column; gap: 14px;
}
.slybot-field { display: flex; flex-direction: column; gap: 6px; }
.slybot-field label {
font-size: 0.72rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: rgba(255,255,255,0.5);
}
.slybot-field input[type="text"],
.slybot-field input[type="email"],
.slybot-field input[type="password"] {
width: 100%;
padding: 14px 18px;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 10px;
font: inherit; color: #fff; font-size: 0.92rem;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
line-height: 1.4; box-sizing: border-box;
}
.slybot-field input::placeholder { color: rgba(255,255,255,0.25); }
.slybot-field input:focus {
border-color: #F9460C;
background: rgba(255,255,255,0.07);
box-shadow: 0 0 0 3px rgba(249,70,12,0.15);
}
.slybot-input-with-eye { position: relative; }
.slybot-input-with-eye input { padding-right: 48px; }
.slybot-eye {
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
color: rgba(255,255,255,0.4);
cursor: pointer;
border-radius: 8px;
transition: color 0.15s, background 0.15s;
}
.slybot-eye:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); }
.slybot-eye.is-on { color: #F9460C; }
.slybot-login-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
margin-top: 4px;
font-size: 0.82rem;
}
.slybot-remember {
display: inline-flex; align-items: center; gap: 8px;
color: rgba(255,255,255,0.6);
cursor: pointer; user-select: none;
}
.slybot-remember input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px; height: 16px;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: 4px;
cursor: pointer;
position: relative;
transition: background 0.15s, border-color 0.15s;
margin: 0; flex-shrink: 0;
}
.slybot-remember input[type="checkbox"]:checked {
background: #F9460C;
border-color: #F9460C;
}
.slybot-remember input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px; top: 1px;
width: 5px; height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.slybot-lost {
color: rgba(255,255,255,0.55);
text-decoration: none;
transition: color 0.2s;
}
.slybot-lost:hover { color: #FF6A00; }
.slybot-btn-primary {
margin-top: 10px;
width: 100%;
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 15px 24px;
background: #F9460C;
color: #fff;
font: inherit;
font-size: 0.95rem; font-weight: 700;
letter-spacing: 0.02em;
border: none; border-radius: 10px;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 20px rgba(249,70,12,0.35);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.slybot-btn-primary:hover {
background: #E03D0A;
transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(249,70,12,0.5);
color: #fff;
}
.slybot-btn-primary:active { transform: translateY(0); }
.slybot-btn-primary svg { transition: transform .2s ease; }
.slybot-btn-primary:hover svg { transform: translateX(2px); }
.slybot-login-foot {
text-align: center;
margin: 22px 0 0;
font-size: 0.85rem;
color: rgba(255,255,255,0.5);
}
.slybot-login-foot a {
color: #FF6A00;
text-decoration: none;
font-weight: 600;
}
.slybot-login-foot a:hover { text-decoration: underline; }
@media (max-width: 480px) {
.slybot-login-wrap { padding: 32px 16px; min-height: calc(100vh - 140px); }
.slybot-login-box { padding: 32px 24px; border-radius: 16px; }
.slybot-login-title { font-size: 1.35rem; }
}
/* Auth legado (cadastro, recuperar-senha) ─────────────────────── */
.auth-page {
min-height: calc(100vh - 72px);
display: flex; align-items: center; justify-content: center;
padding: 80px 24px 60px;
background: var(--bg-dark);
}
.auth-box {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 44px 44px 36px;
width: 100%; max-width: 480px;
}
.auth-box h1 {
font-size: 1.7rem; font-weight: 800; color: #fff;
margin-bottom: 8px;
}
.auth-sub {
font-size: 0.9rem; color: rgba(255,255,255,0.55);
margin-bottom: 24px; line-height: 1.6;
}
.auth-sub a { color: var(--orange); font-weight: 600; text-decoration: none; }
.auth-sub a:hover { text-decoration: underline; }
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form label {
display: block;
font-size: 0.72rem; font-weight: 600;
color: rgba(255,255,255,0.6);
text-transform: uppercase; letter-spacing: 0.08em;
margin: 12px 0 6px;
}
.auth-form label .opt { color: rgba(255,255,255,0.3); text-transform: none; letter-spacing: 0; font-weight: 400; }
.auth-form label .req { color: #F87171; margin-left: 2px; }
.auth-form input {
width: 100%;
padding: 13px 16px;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 10px;
font: inherit; color: #fff; font-size: 0.92rem;
outline: none;
transition: border-color 0.18s, box-shadow 0.18s;
}
.auth-form input::placeholder { color: rgba(255,255,255,0.3); }
.auth-form input:focus {
border-color: var(--orange);
box-shadow: 0 0 0 3px rgba(255,106,0,0.15);
}
.auth-form input[disabled] {
opacity: 0.5; cursor: not-allowed;
}
.auth-form input.is-invalid {
border-color: rgba(248,113,113,0.6) !important;
background: rgba(248,113,113,0.06) !important;
box-shadow: 0 0 0 3px rgba(248,113,113,0.12) !important;
}
.field-msg {
display: block;
font-size: 0.78rem;
margin: -10px 0 14px 4px;
color: rgba(255,255,255,0.55);
}
.field-msg[hidden] { display: none !important; }
.field-msg--err { color: #F87171; }
.field-msg--err::before {
content: "✕ ";
font-weight: 800;
margin-right: 2px;
}
/* Modal de instruções pra instalar PWA (iOS / sem prompt nativo) ── */
.pwa-howto-modal {
position: fixed; inset: 0;
z-index: 9999;
display: flex;
align-items: center; justify-content: center;
padding: 24px;
}
.pwa-howto-modal[hidden] { display: none; }
.pwa-howto-modal__backdrop {
position: absolute; inset: 0;
background: rgba(2,6,23,0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity .22s ease;
}
.pwa-howto-modal.is-open .pwa-howto-modal__backdrop { opacity: 1; }
.pwa-howto-modal__box {
position: relative;
width: 100%; max-width: 460px;
background: #0F172A;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
box-shadow: 0 30px 80px rgba(0,0,0,0.6);
display: flex; flex-direction: column;
overflow: hidden;
transform: translateY(20px) scale(0.97);
opacity: 0;
transition: transform .26s cubic-bezier(.32,.72,0,1), opacity .22s ease;
}
.pwa-howto-modal.is-open .pwa-howto-modal__box {
transform: translateY(0) scale(1);
opacity: 1;
}
.pwa-howto-modal__head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pwa-howto-modal__head h3 {
font-size: 1.05rem; font-weight: 800;
color: #fff; margin: 0;
}
.pwa-howto-modal__x {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
width: 32px; height: 32px;
border-radius: 8px;
font-size: 1.2rem; line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease;
}
.pwa-howto-modal__x:hover { background: rgba(255,255,255,0.1); color: #fff; }
.pwa-howto-modal__body { padding: 18px 22px 22px; }
.pwa-howto-modal__intro {
color: rgba(255,255,255,0.78);
font-size: 0.92rem;
margin: 0 0 14px;
line-height: 1.55;
}
.pwa-howto-modal__steps {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex; flex-direction: column;
gap: 10px;
}
.pwa-howto-modal__steps li {
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
color: rgba(255,255,255,0.85);
font-size: 0.9rem;
line-height: 1.5;
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.pwa-howto-modal__steps strong:first-child {
color: #FF8A3D;
font-weight: 800;
margin-right: 2px;
}
.pwa-howto-modal__icon {
display: inline-block;
vertical-align: middle;
color: #93C5FD;
margin: 0 2px;
}
.pwa-howto-modal__note {
font-size: 0.82rem;
color: rgba(255,255,255,0.55);
margin: 0;
padding: 12px 14px;
background: rgba(255,106,0,0.06);
border: 1px dashed rgba(255,106,0,0.22);
border-radius: 10px;
line-height: 1.5;
}
/* Upgrade card — banner em /minha-conta/meus-robos ──────────────── */
.upgrade-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
margin-bottom: 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-left: 2px solid rgba(255,106,0,0.5);
border-radius: 8px;
color: #fff;
text-decoration: none;
transition: background .15s ease, border-color .15s ease;
}
.upgrade-card:hover {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.14);
border-left-color: rgba(255,106,0,0.85);
}
.upgrade-card::before { content: none; }
.upgrade-card__icon {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,106,0,0.14);
color: #FF8A3D;
display: inline-flex; align-items: center; justify-content: center;
}
.upgrade-card__icon svg { width: 16px; height: 16px; }
.upgrade-card__body {
flex: 1;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
}
.upgrade-card__tag { display: none; }
.upgrade-card__body strong:not(.upgrade-card__diff) {
font-size: 0.9rem;
font-weight: 600;
color: #fff;
}
.upgrade-card__body p { display: none; }
.upgrade-card__calc {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: 0.74rem;
color: rgba(255,255,255,0.5);
font-variant-numeric: tabular-nums;
}
.upgrade-card__sep { color: rgba(255,255,255,0.25); }
.upgrade-card__diff {
font-weight: 700;
color: #FF8A3D !important;
font-size: 0.82rem;
padding-left: 2px;
}
.upgrade-card__cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 12px;
background: transparent;
color: #FF8A3D;
font-weight: 600;
font-size: 0.78rem;
border: 1px solid rgba(255,106,0,0.35);
border-radius: 6px;
white-space: nowrap;
}
.upgrade-card:hover .upgrade-card__cta {
background: rgba(255,106,0,0.10);
border-color: rgba(255,106,0,0.55);
}
.upgrade-card__cta svg { width: 12px; height: 12px; }
@media (max-width: 720px) {
.upgrade-card {
flex-wrap: wrap;
padding: 11px 14px;
gap: 10px;
}
.upgrade-card__body { width: 100%; flex: 1 1 100%; }
.upgrade-card__cta { margin-left: auto; }
}
/* Upgrade pra Vitalício (checkout) ─────────────────────────────── */
.upgrade-notice {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
margin: 20px 0 24px;
background: linear-gradient(135deg, rgba(255,106,0,0.10) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,106,0,0.35);
border-radius: 14px;
}
.upgrade-notice__icon {
flex-shrink: 0;
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, #FF6A00 0%, #F9460C 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(249,70,12,0.45);
}
.upgrade-notice__body { flex: 1; min-width: 0; }
.upgrade-notice__body strong {
display: block;
color: #fff;
font-size: 1rem;
font-weight: 800;
margin-bottom: 4px;
}
.upgrade-notice__body p {
color: rgba(255,255,255,0.75);
font-size: 0.9rem;
line-height: 1.5;
margin: 0 0 12px;
}
.upgrade-notice__calc {
list-style: none;
padding: 0;
margin: 0;
display: flex; flex-direction: column;
gap: 4px;
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 10px;
}
.upgrade-notice__calc li {
display: flex; justify-content: space-between;
font-size: 0.86rem;
color: rgba(255,255,255,0.7);
padding: 4px 0;
font-variant-numeric: tabular-nums;
}
.upgrade-notice__calc li.is-total {
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.08);
color: #fff;
font-weight: 800;
font-size: 1rem;
}
.upgrade-notice__calc li.is-total span:last-child { color: #FF8A3D; }
/* Termo de aceite (checkout) ───────────────────────────────────── */
.term-box {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 0;
margin: 24px 0 14px;
overflow: hidden;
transition: border-color .15s ease;
}
.term-box[open] { border-color: rgba(255,255,255,0.18); }
.term-box summary {
list-style: none;
cursor: pointer;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.85);
font-size: 0.88rem;
transition: background .12s ease;
-webkit-tap-highlight-color: transparent;
}
.term-box summary::-webkit-details-marker { display: none; }
.term-box summary::marker { display: none; }
.term-box summary:hover { background: rgba(255,255,255,0.03); }
.term-box summary svg { flex-shrink: 0; color: rgba(255,255,255,0.5); }
.term-box summary strong { flex: 1; color: #fff; font-weight: 700; }
.term-box__chev { transition: transform .22s ease; }
.term-box[open] .term-box__chev { transform: rotate(180deg); }
.term-box__body {
padding: 4px 22px 20px 22px;
color: rgba(255,255,255,0.78);
font-size: 0.86rem;
line-height: 1.6;
border-top: 1px solid rgba(255,255,255,0.05);
}
.term-box__body p { margin: 12px 0; }
.term-box__body ul {
list-style: none;
padding: 0;
margin: 8px 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.term-box__body ul li {
padding: 8px 12px 8px 28px;
position: relative;
background: rgba(255,255,255,0.02);
border-radius: 8px;
font-size: 0.82rem;
}
.term-box__body ul li::before {
content: "→";
position: absolute;
left: 10px; top: 8px;
color: #FF8A3D;
font-weight: 800;
}
.term-box__body strong { color: #fff; font-weight: 700; }
.term-box__warn {
color: #FCA5A5;
background: rgba(248,113,113,0.08);
border: 1px solid rgba(248,113,113,0.22);
border-radius: 8px;
padding: 10px 12px;
font-weight: 600;
font-size: 0.84rem;
}
.term-box__cta {
margin-top: 16px !important;
font-size: 0.84rem;
}
.term-box__cta a {
color: #FF6A00;
text-decoration: none;
font-weight: 700;
}
.term-box__cta a:hover { text-decoration: underline; }
/* Checkbox aceite */
.term-check {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 12px;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
margin-bottom: 6px;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.term-check:hover { background: rgba(255,255,255,0.05); }
.term-check.is-invalid {
border-color: rgba(248,113,113,0.6);
background: rgba(248,113,113,0.05);
}
.term-check input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.term-check__box {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 6px;
background: rgba(255,255,255,0.04);
border: 1.5px solid rgba(255,255,255,0.25);
display: inline-flex;
align-items: center; justify-content: center;
color: transparent;
transition: background .12s ease, border-color .12s ease, color .12s ease;
margin-top: 1px;
}
.term-check input[type="checkbox"]:checked + .term-check__box {
background: #FF6A00;
border-color: #FF6A00;
color: #fff;
}
.term-check input[type="checkbox"]:focus-visible + .term-check__box {
outline: 2px solid #60A5FA;
outline-offset: 2px;
}
.term-check__txt {
flex: 1;
color: rgba(255,255,255,0.85);
font-size: 0.88rem;
line-height: 1.5;
}
.term-check__txt a {
color: #FF6A00;
text-decoration: none;
font-weight: 700;
}
.term-check__txt a:hover { text-decoration: underline; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-submit {
margin-top: 22px;
background: var(--orange); color: #fff;
font-size: 0.95rem; font-weight: 700;
border: none; border-radius: 10px;
padding: 14px 22px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
width: 100%;
}
.auth-submit:hover { background: #e55c00; }
.auth-submit:active { transform: translateY(1px); }
.auth-foot {
font-size: 0.78rem; color: rgba(255,255,255,0.4);
margin-top: 14px; line-height: 1.6; text-align: center;
}
.auth-foot a { color: var(--orange); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }
.auth-ok, .auth-err {
padding: 12px 16px;
border-radius: 10px;
font-size: 0.85rem; font-weight: 500;
margin-bottom: 14px;
}
.auth-ok { background: rgba(34,197,94,0.12); color: #4ADE80; border: 1px solid rgba(34,197,94,0.25); }
.auth-err { background: rgba(248,113,113,0.12); color: #F87171; border: 1px solid rgba(248,113,113,0.2); }
/* Minha Conta — layout (full-width igual WP) ────────────────────── */
.acc-page {
display: grid;
grid-template-columns: 260px 1fr;
gap: 32px;
width: 100%;
max-width: 100%;
margin: 0;
padding: 110px 40px 60px;
min-height: calc(100vh - 72px);
box-sizing: border-box;
}
.acc-sidebar {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 22px 0;
align-self: start;
position: sticky; top: 90px;
}
.acc-sidebar__user {
display: flex; align-items: center; gap: 12px;
padding: 0 22px 18px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 14px;
}
.acc-sidebar__avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, #FF6A00 0%, #F9460C 100%);
color: #fff;
font-weight: 800;
font-size: 18px;
letter-spacing: 0;
text-indent: 0;
text-align: center;
line-height: 42px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(249,70,12,0.45), inset 0 -1px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
text-shadow: 0 1px 1px rgba(0,0,0,0.18);
user-select: none;
}
.acc-sidebar__user strong {
display: block; color: #fff; font-size: 0.92rem;
font-weight: 600; max-width: 160px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-sidebar__user span {
display: block; color: rgba(255,255,255,0.45);
font-size: 0.75rem; max-width: 160px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-nav { display: flex; flex-direction: column; }
.acc-nav__item {
display: flex; align-items: center; gap: 12px;
padding: 11px 22px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 0.92rem;
transition: background 0.15s, color 0.15s;
}
.acc-nav__item:hover { background: rgba(255,255,255,0.04); color: #fff; }
.acc-nav__item.is-active {
background: rgba(255,106,0,0.10);
color: var(--orange);
border-left: 2px solid var(--orange);
padding-left: 20px;
}
.acc-nav__item--logout {
color: rgba(255,255,255,0.5);
margin-top: 12px;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 16px;
}
/* Conteúdo da Minha Conta ──────────────────────────────────────── */
.acc-main { min-width: 0; }
.acc-page-head { margin-bottom: 26px; }
.acc-page-head h1 {
font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1.2;
}
.acc-page-head p {
color: rgba(255,255,255,0.55);
font-size: 0.95rem; margin-top: 4px;
}
.acc-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 26px;
}
.acc-stat {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 16px 18px;
}
.acc-stat__lbl {
display: block;
font-size: 0.72rem; color: rgba(255,255,255,0.55);
font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.acc-stat__val {
display: block;
color: #fff; font-size: 1.8rem; font-weight: 800;
margin-top: 6px;
}
.acc-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.acc-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 22px 24px;
text-decoration: none;
color: #fff;
transition: transform 0.15s, background 0.15s, border-color 0.15s;
display: block;
}
a.acc-card:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.06);
border-color: rgba(255,106,0,0.32);
}
.acc-card strong {
display: block; font-size: 1rem; font-weight: 700;
color: #fff; margin: 12px 0 6px;
}
.acc-card p {
color: rgba(255,255,255,0.55); font-size: 0.85rem; line-height: 1.5;
}
.acc-card__icon { font-size: 22px; }
.acc-card--cta {
background: linear-gradient(135deg, rgba(255,106,0,0.10), rgba(255,106,0,0.04));
border-color: rgba(255,106,0,0.3);
margin-bottom: 24px;
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.acc-card--cta h3 { color: #fff; font-size: 1.1rem; margin: 0; }
.acc-card--cta p { color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.acc-card--cta .btn { margin-top: 4px; }
.acc-empty {
background: rgba(255,255,255,0.03);
border: 1px dashed rgba(255,255,255,0.12);
border-radius: 14px;
padding: 38px 28px;
text-align: center;
color: rgba(255,255,255,0.7);
}
.acc-empty p { margin-bottom: 12px; line-height: 1.6; }
.acc-empty .btn { margin-top: 12px; }
.acc-empty code {
background: rgba(255,255,255,0.06);
padding: 2px 8px; border-radius: 5px;
font-family: 'SF Mono', Menlo, monospace; font-size: 0.85em;
}
.acc-hint {
font-size: 0.82rem; color: rgba(255,255,255,0.4);
line-height: 1.55; margin-top: 14px;
}
/* Lista de licenças (Meus Robôs) ───────────────────────────────── */
.acc-list { display: flex; flex-direction: column; gap: 12px; }
.acc-license {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 18px 22px;
}
.acc-license__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px;
}
.acc-license__head strong { color: #fff; font-size: 1rem; }
.acc-license__status {
font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 3px 10px; border-radius: 100px;
}
.acc-license__status--active { background: rgba(74,222,128,0.15); color: #4ADE80; border: 1px solid rgba(74,222,128,0.3); }
.acc-license__body { display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.86rem; color: rgba(255,255,255,0.7); }
.acc-license__body strong { color: rgba(255,255,255,0.5); font-weight: 600; }
.acc-license__body code {
background: rgba(0,0,0,0.3);
padding: 2px 7px; border-radius: 4px;
font-family: 'SF Mono', Menlo, monospace; font-size: 0.85em;
color: #FFD580;
}
/* Contas MT5 (dentro de uma licença) ────────────────────────────── */
.acc-mt5 {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
}
.acc-mt5 h4 {
font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.55);
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 10px;
}
.acc-mt5-empty {
font-size: 0.82rem; color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.03);
border: 1px dashed rgba(255,255,255,0.10);
border-radius: 8px;
padding: 12px 14px; line-height: 1.5;
}
.acc-mt5-empty strong { color: rgba(255,255,255,0.7); }
.acc-mt5-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acc-mt5-list li {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
padding: 10px 14px;
}
.acc-mt5-list li > div { display: flex; flex-direction: column; gap: 2px; }
.acc-mt5-list li strong { font-size: 0.92rem; color: #fff; font-family: 'SF Mono', Menlo, monospace; }
.acc-mt5-list li span { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.acc-mt5-rm {
background: rgba(248,113,113,0.10);
color: #F87171;
border: 1px solid rgba(248,113,113,0.25);
padding: 5px 11px; border-radius: 7px;
font-size: 0.78rem; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.acc-mt5-rm:hover { background: rgba(248,113,113,0.18); }
/* How-to (instruções de uso) — usado em Meus Robôs ─────────────── */
.acc-howto {
background: linear-gradient(135deg, rgba(96,165,250,0.07) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(96,165,250,0.22);
border-radius: 14px;
padding: 0;
margin: 0 0 24px;
overflow: hidden;
transition: border-color .2s ease, background .2s ease;
}
.acc-howto[open] {
background: linear-gradient(135deg, rgba(96,165,250,0.10) 0%, rgba(255,255,255,0.02) 100%);
border-color: rgba(96,165,250,0.35);
}
.acc-howto summary {
list-style: none;
cursor: pointer;
padding: 16px 18px;
display: flex;
align-items: center;
gap: 12px;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
transition: background .15s ease;
-webkit-tap-highlight-color: transparent;
}
.acc-howto summary::-webkit-details-marker { display: none; }
.acc-howto summary::marker { display: none; }
.acc-howto summary:hover { background: rgba(255,255,255,0.03); }
.acc-howto__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(96,165,250,0.20);
color: #93C5FD;
flex-shrink: 0;
}
.acc-howto__title { flex: 1; letter-spacing: 0.01em; }
.acc-howto__chev {
color: rgba(255,255,255,0.5);
transition: transform .25s ease;
flex-shrink: 0;
}
.acc-howto[open] .acc-howto__chev { transform: rotate(180deg); color: #93C5FD; }
.acc-howto__body {
padding: 4px 22px 22px 62px;
color: rgba(255,255,255,0.8);
font-size: 0.92rem;
line-height: 1.6;
}
.acc-howto__body p { margin: 0 0 12px; }
.acc-howto__body ol {
margin: 0 0 14px;
padding-left: 18px;
display: flex; flex-direction: column; gap: 10px;
}
.acc-howto__body ol li::marker {
color: #93C5FD;
font-weight: 800;
}
.acc-howto__body strong { color: #fff; font-weight: 700; }
.acc-howto__body code {
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.08);
padding: 2px 6px;
border-radius: 5px;
font-size: 0.82rem;
color: #93C5FD;
}
.acc-howto__kbd {
display: inline-block;
padding: 2px 9px;
border-radius: 6px;
background: rgba(248,113,113,0.12);
color: #FCA5A5;
border: 1px solid rgba(248,113,113,0.28);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.acc-howto__note {
margin: 16px 0 0 !important;
padding: 12px 14px;
background: rgba(255,106,0,0.07);
border: 1px solid rgba(255,106,0,0.22);
border-radius: 10px;
font-size: 0.86rem;
color: rgba(255,255,255,0.78);
}
.acc-howto__note strong { color: #FF8A3D; }
@media (max-width: 640px) {
.acc-howto summary { padding: 14px 14px; font-size: 0.88rem; }
.acc-howto__icon { width: 28px; height: 28px; }
.acc-howto__body { padding: 4px 18px 18px 54px; font-size: 0.86rem; }
.acc-howto__body ol { padding-left: 14px; }
}
/* Downloads de robôs (.ex5) ─────────────────────────────────────── */
.acc-robos-dl {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.acc-robos-dl h4 {
font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.55);
text-transform: uppercase; letter-spacing: 0.08em;
margin: 0 0 10px;
}
.acc-robos-dl__hint {
font-size: 0.78rem; color: rgba(255,255,255,0.45);
margin-bottom: 10px;
}
.acc-robos-dl__list {
list-style: none; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.acc-robos-dl__list li {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
background: rgba(74,222,128,0.06);
border: 1px solid rgba(74,222,128,0.20);
border-radius: 8px;
padding: 10px 14px;
}
.acc-robos-dl__info {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.acc-robos-dl__info strong { font-size: 0.92rem; color: #fff; }
.acc-robos-dl__info span {
font-size: 0.74rem; color: rgba(255,255,255,0.5);
font-family: 'SF Mono', Menlo, monospace;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-robos-dl__btn {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(74,222,128,0.15);
color: #4ADE80;
border: 1px solid rgba(74,222,128,0.4);
border-radius: 8px;
padding: 8px 14px;
font-size: 0.85rem; font-weight: 700;
text-decoration: none;
transition: background .12s ease;
flex-shrink: 0;
}
.acc-robos-dl__btn:hover {
background: rgba(74,222,128,0.25);
color: #fff;
}
.acc-robos-dl__btn.is-disabled {
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.4);
border-color: rgba(255,255,255,0.08);
cursor: not-allowed;
}
@media (max-width: 640px) {
.acc-robos-dl__list li { flex-direction: column; align-items: stretch; }
.acc-robos-dl__btn { justify-content: center; }
}
/* Trades page ───────────────────────────────────────────────────── */
.trd-toolbar {
display: flex; flex-wrap: wrap; gap: 12px;
margin-bottom: 22px;
}
.trd-flt label {
display: block; font-size: 0.7rem; font-weight: 600;
color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 5px;
}
.trd-flt select {
background-color: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
color: #fff; padding: 8px 28px 8px 14px; border-radius: 8px; font: inherit; font-size: 0.85rem;
cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
}
.trd-flt select option { background: #0F172A; color: #fff; }
/* Garante fundo dark + texto claro em qualquer select dentro de páginas da conta/admin */
.acc-page select option,
select option { background-color: #0F172A; color: #fff; }
.trd-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; margin-bottom: 18px;
}
.trd-stat {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 14px 16px;
}
.trd-stat-lbl { display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); }
.trd-stat-val { display: block; font-size: 1.4rem; font-weight: 800; color: #fff; margin-top: 4px; letter-spacing: -0.3px; }
.trd-stat-val.is-pos { color: #4ADE80; }
.trd-stat-val.is-neg { color: #F87171; }
.trd-stat-sub { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 4px; }
.trd-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 14px;
}
.trd-card-head { margin-bottom: 14px; }
.trd-card-head h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.trd-card-head p { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.trd-chart-wrap { position: relative; height: 260px; }
/* Tabela compacta */
.trd-tbl { display: flex; flex-direction: column; }
.trd-tbl-head, .trd-tbl-row {
display: grid;
grid-template-columns: 60px 1fr 60px 1fr 1fr 110px;
gap: 10px; align-items: center;
padding: 9px 4px;
font-size: 0.82rem;
}
.trd-tbl-daily .trd-tbl-head, .trd-tbl-daily .trd-tbl-row {
grid-template-columns: 60px 1fr 80px 70px 1fr 110px;
}
.trd-tbl-head {
font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.5);
text-transform: uppercase; letter-spacing: 0.06em;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.trd-tbl-row + .trd-tbl-row { border-top: 1px solid rgba(255,255,255,0.04); }
.trd-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.trd-tbl-date { display: block; font-size: 0.82rem; font-weight: 600; color: #fff; }
.trd-tbl-time { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.45); }
.trd-side {
display: inline-block; width: 18px; height: 18px; border-radius: 4px;
font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
margin-right: 6px;
}
.trd-side-buy { background: rgba(74,222,128,0.18); color: #4ADE80; }
.trd-side-sell { background: rgba(248,113,113,0.18); color: #F87171; }
.trd-symbol { font-weight: 600; color: #fff; }
.trd-prices { color: rgba(255,255,255,0.7); font-size: 0.82rem; display: flex; gap: 6px; align-items: center; }
.trd-net.is-pos { color: #4ADE80; font-weight: 700; }
.trd-net.is-neg { color: #F87171; font-weight: 700; }
@media (max-width: 768px) {
.trd-tbl-head, .trd-tbl-row {
grid-template-columns: 50px 1fr 80px;
}
.trd-tbl-head > :nth-child(n+4), .trd-tbl-row > :nth-child(n+4):not(:last-child) { display: none; }
}
/* Calendário (heatmap mensal) ──────────────────────────── */
.cal-card { padding: 20px 22px; }
.cal-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; margin-bottom: 16px;
}
.cal-head h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.cal-head p { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav-btn {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px; color: #fff; text-decoration: none;
font-size: 18px; font-weight: 600; line-height: 1;
transition: background 0.15s;
}
.cal-nav-btn:hover { background: rgba(255,255,255,0.1); }
.cal-mstats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px; margin-bottom: 14px;
}
.cal-mstat {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 10px 14px;
}
.cal-mstat-lbl { display: block; font-size: 0.66rem; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; }
.cal-mstat-val { display: block; font-size: 1.1rem; font-weight: 800; color: #fff; margin-top: 3px; }
.cal-mstat-val.is-pos { color: #4ADE80; }
.cal-mstat-val.is-neg { color: #F87171; }
.cal-mstat-sub { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
.cal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 0.85fr);
gap: 4px;
background: rgba(255,255,255,0.02);
border-radius: 8px;
padding: 4px;
overflow: hidden;
}
.cal-cell, .cal-week { min-width: 0; }
.cal-day-val, .cal-day-meta, .cal-week-val, .cal-week-sub, .cal-week-lbl {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-dayhead {
text-align: center;
font-size: 0.68rem; font-weight: 700;
color: rgba(255,255,255,0.4);
text-transform: uppercase; letter-spacing: 0.06em;
padding: 6px 0;
}
.cal-dayhead.is-week { color: rgba(255,255,255,0.45); }
.cal-cell {
aspect-ratio: 1 / 0.85;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 6px;
padding: 6px 8px;
display: flex; flex-direction: column; gap: 2px;
position: relative;
min-height: 64px;
}
.cal-cell.is-out { opacity: 0.25; }
.cal-cell.is-pos {
background: rgba(74,222,128,0.10);
border-color: rgba(74,222,128,0.35);
}
.cal-cell.is-neg {
background: rgba(248,113,113,0.10);
border-color: rgba(248,113,113,0.35);
}
.cal-cell.is-zero {
background: rgba(255,255,255,0.06);
}
.cal-day-num {
font-size: 0.78rem; font-weight: 600;
color: rgba(255,255,255,0.55);
}
.cal-cell.is-pos .cal-day-num,
.cal-cell.is-neg .cal-day-num { color: #fff; }
.cal-day-val {
font-size: 0.82rem; font-weight: 700; color: #fff;
margin-top: auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-cell.is-pos .cal-day-val { color: #4ADE80; }
.cal-cell.is-neg .cal-day-val { color: #F87171; }
.cal-day-meta {
font-size: 0.66rem; color: rgba(255,255,255,0.5);
}
.cal-week {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 6px 8px;
display: flex; flex-direction: column; gap: 2px;
min-height: 64px;
}
.cal-week.is-pos {
background: rgba(74,222,128,0.10);
border-color: rgba(74,222,128,0.3);
}
.cal-week.is-neg {
background: rgba(248,113,113,0.10);
border-color: rgba(248,113,113,0.3);
}
.cal-week-lbl {
font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.55);
text-transform: uppercase; letter-spacing: 0.04em;
}
.cal-week-val { font-size: 0.85rem; font-weight: 800; color: #fff; margin-top: auto; }
.cal-week.is-pos .cal-week-val { color: #4ADE80; }
.cal-week.is-neg .cal-week-val { color: #F87171; }
.cal-week-val.is-flat { opacity: 0.35; }
.cal-week-sub { font-size: 0.65rem; color: rgba(255,255,255,0.4); }
@media (max-width: 768px) {
.cal-card { padding: 14px 14px; }
/* Mobile: 5 colunas (seg-sex). Dom e Sáb escondem (mercado fechado).
Coluna "Semana" passa pra linha própria abaixo dos 5 dias. */
.cal-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px; padding: 4px;
}
/* Sequência por linha lógica = 8 cells (Dom Seg Ter Qua Qui Sex Sáb Semana).
Esconde Dom (8n+1) e Sáb (8n+7). */
.cal-grid > :nth-child(8n+1),
.cal-grid > :nth-child(8n+7) { display: none; }
/* Header "Semana" desktop esconde; cada bloco de semana vira linha cheia */
.cal-grid > .cal-dayhead.is-week { display: none; }
.cal-grid > .cal-week {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
min-height: auto;
gap: 10px;
}
.cal-week-lbl { font-size: 0.72rem; }
.cal-week-val { font-size: 0.86rem; }
.cal-week-sub { font-size: 0.66rem; }
.cal-cell {
aspect-ratio: auto;
min-height: 56px; max-height: 80px;
padding: 4px 5px;
overflow: hidden;
}
.cal-day-num { font-size: 0.72rem; }
.cal-day-val { font-size: 0.66rem; line-height: 1.1; }
.cal-day-meta { display: none; }
.cal-mstats { gap: 8px; }
.cal-mstat { padding: 8px 10px; }
.cal-mstat-val { font-size: 0.92rem; }
}
/* ── Card de vencimentos B3 (dashboard) ────────────────────── */
.acc-venc {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 22px;
}
.acc-venc__head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
gap: 10px;
flex-wrap: wrap;
}
.acc-venc__head strong { color: #fff; font-size: 0.95rem; }
.acc-venc__head span { color: rgba(255,255,255,0.45); font-size: 0.78rem; }
.acc-venc__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.acc-venc__item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
}
.acc-venc__head-row {
display: flex;
align-items: center;
gap: 10px;
}
.acc-venc__code {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255,106,0,0.12);
color: #FF8A3D;
border: 1px solid rgba(255,106,0,0.25);
}
.acc-venc__label {
font-size: 0.78rem;
color: rgba(255,255,255,0.55);
}
.acc-venc__codes {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-family: 'Inter', monospace;
font-size: 0.9rem;
}
.acc-venc__cur { color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.acc-venc__nxt { color: #4ADE80; font-weight: 700; letter-spacing: 0.02em; }
.acc-venc__switch {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-left: 3px solid rgba(255,255,255,0.25);
border-radius: 8px;
padding: 8px 10px;
font-size: 0.76rem;
color: rgba(255,255,255,0.7);
line-height: 1.4;
}
.acc-venc__switch-lbl { color: rgba(255,255,255,0.5); display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.acc-venc__switch-val strong { color: #fff; font-weight: 700; }
.acc-venc__switch-val em { font-style: normal; color: rgba(255,255,255,0.55); }
.acc-venc__switch.is-warn {
background: rgba(250,204,21,0.08);
border-color: rgba(250,204,21,0.18);
border-left-color: #FACC15;
color: rgba(250,204,21,0.95);
}
.acc-venc__switch.is-warn .acc-venc__switch-lbl,
.acc-venc__switch.is-warn .acc-venc__switch-val strong { color: #FACC15; }
.acc-venc__switch.is-now {
background: rgba(248,113,113,0.1);
border-color: rgba(248,113,113,0.25);
border-left-color: #F87171;
color: #FCA5A5;
}
.acc-venc__switch.is-now .acc-venc__switch-lbl,
.acc-venc__switch.is-now .acc-venc__switch-val strong,
.acc-venc__switch.is-now .acc-venc__switch-val em { color: #F87171; }
.acc-venc__exp {
font-size: 0.7rem;
color: rgba(255,255,255,0.4);
}
@media (max-width: 720px) {
.acc-venc__list { grid-template-columns: 1fr; }
}
/* Calendar — clickable cells (button reset) ────────────────────── */
button.cal-cell {
font: inherit; color: inherit; text-align: left;
cursor: pointer; appearance: none;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
button.cal-cell:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.25);
background: rgba(255,255,255,0.06);
}
button.cal-cell.is-pos:hover { border-color: rgba(74,222,128,0.6); background: rgba(74,222,128,0.16); }
button.cal-cell.is-neg:hover { border-color: rgba(248,113,113,0.6); background: rgba(248,113,113,0.16); }
button.cal-cell:focus-visible { outline: 2px solid #60A5FA; outline-offset: 2px; }
/* Calendar — modal trades do dia ─────────────────────────────── */
.cal-modal {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.cal-modal[hidden] { display: none; }
.cal-modal-backdrop {
position: absolute; inset: 0;
background: rgba(2,6,23,0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.cal-modal-box {
position: relative;
width: 100%; max-width: 720px; max-height: 88vh;
background: #0F172A;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
box-shadow: 0 30px 80px rgba(0,0,0,0.6);
display: flex; flex-direction: column;
overflow: hidden;
animation: calModalIn .18s ease-out;
}
@keyframes calModalIn {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cal-modal-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px;
padding: 18px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cal-modal-head h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.cal-modal-head p { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin: 2px 0 0; }
.cal-modal-x {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.7);
width: 32px; height: 32px; border-radius: 8px;
font-size: 1.2rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .12s ease, color .12s ease;
}
.cal-modal-x:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cal-modal-summary {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cal-modal-summary > div {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.cal-modal-summary span {
font-size: 0.66rem; color: rgba(255,255,255,0.5);
text-transform: uppercase; letter-spacing: 0.05em;
}
.cal-modal-summary strong {
font-size: 1rem; font-weight: 800; color: #fff;
}
.cal-modal-summary strong.is-pos { color: #4ADE80; }
.cal-modal-summary strong.is-neg { color: #F87171; }
.cal-modal-list {
flex: 1; overflow-y: auto;
padding: 8px 12px 16px;
display: flex; flex-direction: column; gap: 6px;
}
.cal-trade {
display: grid;
grid-template-columns: 50px 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"time sym net"
"time strat prc";
gap: 2px 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
align-items: center;
}
.cal-trade.is-pos { border-color: rgba(74,222,128,0.25); }
.cal-trade.is-neg { border-color: rgba(248,113,113,0.25); }
.cal-trade-time {
grid-area: time;
font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.85);
}
.cal-trade-sym {
grid-area: sym;
display: flex; align-items: center; gap: 8px;
font-size: 0.88rem; font-weight: 600; color: #fff;
}
.cal-trade-strat {
grid-area: strat;
font-size: 0.72rem; color: rgba(255,255,255,0.45);
}
.cal-trade-prc {
grid-area: prc;
display: flex; align-items: center; gap: 6px;
font-size: 0.75rem; color: rgba(255,255,255,0.6);
justify-self: end;
}
.cal-trade-arrow { opacity: 0.4; }
.cal-trade-vol { color: rgba(255,255,255,0.4); }
.cal-trade-net {
grid-area: net;
font-size: 0.95rem; font-weight: 800;
justify-self: end;
}
.cal-trade-net.is-pos { color: #4ADE80; }
.cal-trade-net.is-neg { color: #F87171; }
/* Tag/badges para GRID (fechamento diário) ──────────────────────── */
.trd-tag-grid {
display: inline-block;
background: rgba(96,165,250,0.18);
color: #93C5FD;
font-size: 0.6rem; font-weight: 800;
padding: 2px 7px; border-radius: 999px;
text-transform: uppercase; letter-spacing: 0.06em;
vertical-align: 1px;
margin-left: 6px;
border: 1px solid rgba(96,165,250,0.35);
}
.trd-side-grid {
background: rgba(96,165,250,0.18);
color: #93C5FD;
border-color: rgba(96,165,250,0.4);
}
.cal-trade.is-daily {
border-left: 3px solid rgba(96,165,250,0.55);
}
@media (max-width: 640px) {
.cal-modal { padding: 0; align-items: flex-end; }
.cal-modal-box { max-height: 92vh; border-radius: 16px 16px 0 0; }
.cal-modal-summary { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
.cal-modal-summary > div { padding: 8px; }
.cal-modal-summary strong { font-size: 0.85rem; }
.cal-trade {
grid-template-columns: 46px 1fr auto;
grid-template-areas:
"time sym net"
"time prc prc"
"time strat strat";
padding: 8px 10px;
}
.cal-trade-prc { justify-self: start; }
.cal-trade-net { font-size: 0.85rem; }
}
/* Form cards ────────────────────────────────────────────────────── */
.acc-form-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 28px 30px;
margin-bottom: 22px;
}
.acc-form-card h2 {
font-size: 1.1rem; font-weight: 700; color: #fff;
margin-bottom: 14px;
}
.acc-form-card h3 {
font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.6);
text-transform: uppercase; letter-spacing: 0.08em;
margin: 20px 0 6px;
}
/* Header logado/deslogado ──────────────────────────────────────── */
.lp-nav__user {
display: flex; align-items: center; gap: 8px;
color: rgba(255,255,255,0.85);
text-decoration: none;
background: rgba(255,255,255,0.06);
padding: 7px 14px 7px 7px;
border-radius: 100px;
font-size: 0.82rem;
border: 1px solid rgba(255,255,255,0.1);
transition: background 0.15s;
}
.lp-nav__user:hover { background: rgba(255,255,255,0.1); }
.lp-nav__user-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--orange); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px;
}
/* Banner de impersonate (admin visualizando cliente) ─────────── */
.adm-impersonate {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg, rgba(255,106,0,0.14), rgba(255,106,0,0.06));
border: 1px solid rgba(255,106,0,0.35);
border-radius: 12px;
padding: 12px 18px;
margin-bottom: 20px;
color: #fff;
font-size: 0.86rem;
}
.adm-impersonate svg { color: var(--orange); flex-shrink: 0; }
.adm-impersonate strong { font-weight: 700; }
.adm-impersonate__back {
margin-left: auto;
color: var(--orange);
text-decoration: none;
font-weight: 600;
white-space: nowrap;
}
.adm-impersonate__back:hover { text-decoration: underline; }
/* Checkout ──────────────────────────────────────────────────────── */
.checkout-page {
max-width: 1280px;
margin: 0 auto;
padding: 110px 32px 60px;
}
.checkout-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 32px;
align-items: start;
}
.checkout-form {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 36px 38px;
}
.checkout-form h1 {
font-size: 1.7rem; font-weight: 800; color: #fff; margin-bottom: 6px;
}
.checkout-form h2 {
font-size: 0.92rem; font-weight: 700; color: #fff;
text-transform: uppercase; letter-spacing: 0.06em;
margin: 18px 0 6px;
}
.checkout-sub {
font-size: 0.92rem; color: rgba(255,255,255,0.55);
margin-bottom: 22px;
}
.checkout-sub a { color: var(--orange); }
.checkout-pay {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-top: 8px;
}
.checkout-pay-opt {
display: block;
background: rgba(255,255,255,0.04);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 16px 18px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.checkout-pay-opt span { display: block; font-weight: 700; color: #fff; font-size: 0.95rem; margin: 6px 0 4px; }
.checkout-pay-opt small { color: rgba(255,255,255,0.5); font-size: 0.78rem; }
.checkout-pay-opt input[type=radio]:checked + span,
.checkout-pay-opt:has(input[type=radio]:checked) {
border-color: var(--orange);
background: rgba(255,106,0,0.08);
}
/* Destaque "Até 3x sem juros" no cartão */
.checkout-pay-opt span {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.checkout-pay-badge {
font-style: normal;
font-size: 0.7rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
background: rgba(74,222,128,0.14);
color: #4ADE80;
border: 1px solid rgba(74,222,128,0.3);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.checkout-summary {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 28px 28px 32px;
position: sticky; top: 90px;
}
.checkout-summary h3 {
font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.55);
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 14px;
}
.checkout-plan strong { display: block; font-size: 1.05rem; color: #fff; }
.checkout-plan p { color: rgba(255,255,255,0.6); font-size: 0.88rem; margin: 6px 0 12px; line-height: 1.5; }
.checkout-plan ul { list-style: none; padding: 0; }
.checkout-plan li {
color: rgba(255,255,255,0.7); font-size: 0.85rem;
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.checkout-promo {
margin-top: 14px; padding: 11px 14px;
background: rgba(255,106,0,0.10);
border: 1px solid rgba(255,106,0,0.25);
border-radius: 10px;
font-size: 0.82rem; color: var(--orange);
}
.checkout-total {
margin-top: 18px; padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex; flex-direction: column;
}
.checkout-total__from { color: rgba(255,255,255,0.4); font-size: 0.85rem; text-decoration: line-through; }
.checkout-total__lbl { color: rgba(255,255,255,0.55); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.checkout-total__val { color: var(--orange); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
/* Card visual no checkout ──────────────────────────────────────── */
.cc-block { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.cc-block[hidden] { display: none !important; }
/* Dropdown de parcelas custom ────────────────────────────────── */
.install-wrap { position: relative; }
.install-trigger {
width: 100%;
display: flex; align-items: center; justify-content: space-between;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 12px 16px;
font: inherit; color: #fff;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.install-trigger:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,106,0,0.4); }
.install-trigger[aria-expanded="true"] { border-color: var(--orange); background: rgba(255,106,0,0.06); }
.install-trigger__main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.install-trigger__main strong { font-size: 0.95rem; font-weight: 700; color: #fff; }
.install-trigger__main span { font-size: 0.76rem; color: rgba(255,255,255,0.5); }
.install-trigger__chev { color: rgba(255,255,255,0.6); transition: transform .15s; }
.install-trigger[aria-expanded="true"] .install-trigger__chev { transform: rotate(180deg); color: var(--orange); }
.install-popover {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #0F172A;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 8px;
box-shadow: 0 18px 40px rgba(0,0,0,0.6);
z-index: 50;
max-height: 320px; overflow-y: auto;
}
.install-popover__head {
font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.45);
text-transform: uppercase; letter-spacing: 0.06em;
padding: 8px 12px 6px;
}
.install-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.install-item {
position: relative;
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
transition: background .12s;
}
.install-item:hover { background: rgba(255,255,255,0.06); }
.install-item.is-active { background: rgba(255,106,0,0.13); }
.install-item.is-free::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: #4ADE80;
border-radius: 2px 0 0 2px;
}
.install-item__free {
color: #4ADE80 !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.install-item__n {
flex-shrink: 0;
width: 38px; height: 38px;
background: rgba(255,255,255,0.06);
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.86rem; font-weight: 700; color: #fff;
}
.install-item.is-active .install-item__n {
background: var(--orange); color: #fff;
}
.install-item__per { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.install-item__per strong { color: #fff; font-size: 0.92rem; font-weight: 700; }
.install-item__per small { color: rgba(255,255,255,0.5); font-size: 0.72rem; }
.install-item__check { color: var(--orange); opacity: 0; transition: opacity .12s; }
.install-item.is-active .install-item__check { opacity: 1; }
/* Cupom de desconto ─────────────────────────────────────────── */
.cupom-box {
margin-top: 16px; padding-top: 16px;
border-top: 1px dashed rgba(255,255,255,0.08);
}
.cupom-lbl {
display: block;
font-size: 0.7rem; font-weight: 700;
color: rgba(255,255,255,0.5);
text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 8px;
}
.cupom-row { display: flex; gap: 6px; }
.cupom-row input {
flex: 1;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.1);
color: #fff;
padding: 10px 12px;
border-radius: 8px;
font: inherit; font-size: 0.85rem;
text-transform: uppercase; letter-spacing: 0.5px;
}
.cupom-row input:focus { border-color: var(--orange); outline: none; }
.cupom-row input:disabled { opacity: 0.6; cursor: not-allowed; }
.cupom-btn {
background: var(--orange); color: #fff;
border: none; border-radius: 8px;
padding: 10px 16px;
font: inherit; font-size: 0.85rem; font-weight: 700;
cursor: pointer;
transition: background 0.15s;
}
.cupom-btn:hover { background: #e55c00; }
.cupom-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.cupom-msg {
display: block;
font-size: 0.78rem; min-height: 16px;
margin-top: 6px; color: rgba(255,255,255,0.55);
}
.cupom-msg.is-ok { color: #4ADE80; }
.cupom-msg.is-err { color: #F87171; }
.checkout-total__discount {
display: block;
font-size: 0.78rem; font-weight: 600;
color: #4ADE80;
margin-top: 4px;
}
/* Status do CEP ─────────────────────────────────────────────── */
.cep-status {
display: inline-block;
font-size: 0.72rem;
margin-top: 4px;
min-height: 14px;
color: rgba(255,255,255,0.5);
}
.cep-status.is-ok { color: #4ADE80; }
.cep-status.is-err { color: #F87171; }
.cep-status.is-loading { color: var(--orange); }
.cc-visual {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
border-radius: 14px;
padding: 22px 22px 18px;
color: #fff;
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
max-width: 340px;
margin: 0 auto;
aspect-ratio: 16 / 10;
display: flex; flex-direction: column;
}
.cc-visual::before {
content: ''; position: absolute;
top: -60px; right: -60px;
width: 200px; height: 200px;
border-radius: 50%;
background: rgba(255,106,0,0.18);
pointer-events: none;
}
.cc-chip { position: relative; z-index: 1; }
.cc-brand {
position: absolute; top: 22px; right: 22px;
font-size: 14px; font-weight: 800;
color: rgba(255,255,255,0.9);
letter-spacing: 1px; text-transform: uppercase; font-style: italic;
text-shadow: 0 1px 4px rgba(0,0,0,.4); z-index: 1;
}
.cc-number {
font-family: 'Courier New', monospace;
font-size: 1.05rem; font-weight: 600;
letter-spacing: 3px;
color: #fff;
text-align: center;
margin: auto 0;
position: relative; z-index: 1;
}
.cc-foot {
display: flex; justify-content: space-between; align-items: flex-end;
position: relative; z-index: 1;
}
.cc-lbl {
font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.8px;
color: rgba(255,255,255,0.5); margin-bottom: 3px;
}
.cc-val {
font-size: 0.78rem; font-weight: 600; color: #fff;
letter-spacing: 0.6px;
}
.cc-foot > div:last-child .cc-val { font-family: 'Courier New', monospace; }
.cc-note {
display: flex; gap: 12px; align-items: flex-start;
background: rgba(255,106,0,0.08);
border: 1px solid rgba(255,106,0,0.25);
border-radius: 10px;
padding: 12px 14px;
color: var(--orange);
font-size: 0.82rem;
line-height: 1.5;
}
.cc-note svg { flex-shrink: 0; margin-top: 2px; }
.cc-note strong { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; }
.cc-note span { color: rgba(255,255,255,0.7); }
/* Responsive ────────────────────────────────────────────────────── */
/* Botão flutuante "Instalar app" ────────────────────────────── */
.pwa-install {
position: fixed; bottom: 18px; right: 18px;
z-index: 95;
display: inline-flex; align-items: center; gap: 8px;
background: var(--orange); color: #fff;
border: none; border-radius: 100px;
padding: 12px 18px;
font: inherit; font-size: 0.88rem; font-weight: 700;
box-shadow: 0 8px 24px rgba(255,106,0,0.4);
cursor: pointer;
transition: transform .15s, background .15s;
}
.pwa-install:hover { background: #e55c00; transform: translateY(-1px); }
/* Mobile toggle + backdrop ──────────────────────────────────── */
.acc-mobile-toggle {
display: none;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: #fff;
padding: 9px 13px;
border-radius: 10px;
align-items: center; gap: 7px;
font: inherit; font-size: 0.85rem; font-weight: 600;
margin-bottom: 14px;
cursor: pointer;
}
.acc-mobile-toggle svg { display: block; }
.acc-backdrop {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
z-index: 80;
backdrop-filter: blur(2px);
}
.acc-backdrop.is-on { display: block; }
@media (max-width: 900px) {
.acc-page { grid-template-columns: 1fr; padding-top: 90px; padding-left: 18px; padding-right: 18px; }
.acc-mobile-toggle { display: inline-flex; }
.acc-sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 280px;
height: 100vh;
z-index: 90;
transform: translateX(-100%);
transition: transform .25s ease;
overflow-y: auto;
border-radius: 0;
}
.acc-sidebar.is-open { transform: translateX(0); }
.auth-row { grid-template-columns: 1fr; gap: 0; }
.auth-box { padding: 28px 24px; }
.checkout-grid { grid-template-columns: 1fr; }
.checkout-summary { position: relative; top: 0; }
.checkout-pay { grid-template-columns: 1fr; }
.checkout-form { padding: 28px 24px; }
}
/* Bottom nav (app-style) — só no mobile ─────────────────────────── */
.acc-bnav { display: none; }
.acc-bnav-drawer { display: none; }
@media (max-width: 900px) {
.acc-bnav {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 95;
background: rgba(8,12,22,0.92);
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border-top: 1px solid rgba(255,255,255,0.08);
padding-bottom: env(safe-area-inset-bottom, 0);
box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
}
.acc-bnav__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px 2px 6px;
text-decoration: none;
color: rgba(255,255,255,0.55);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.01em;
transition: color .15s ease, transform .15s ease;
position: relative;
background: none;
border: 0;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.acc-bnav__item svg {
width: 22px;
height: 22px;
stroke-width: 2;
transition: transform .18s ease, stroke-width .18s ease;
}
.acc-bnav__item span {
line-height: 1;
white-space: nowrap;
}
.acc-bnav__item:active {
transform: scale(0.94);
}
.acc-bnav__item.is-active {
color: #FF6A00;
}
.acc-bnav__item.is-active svg {
stroke-width: 2.4;
}
.acc-bnav__item.is-active::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 3px;
background: #FF6A00;
border-radius: 0 0 3px 3px;
box-shadow: 0 0 12px rgba(255,106,0,0.5);
}
/* Esconde o hamburger top-left — agora temos bottom nav + "Mais" */
.acc-mobile-toggle { display: none !important; }
/* Garante padding inferior pro conteúdo não esconder atrás do bottom nav */
.acc-page {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)) !important;
}
/* Mobile: esconde o botão flutuante — o item vai pro drawer "Mais" */
.pwa-install { display: none !important; }
/* ── Drawer "Mais" ───────────────────────────────────────── */
.acc-bnav-drawer {
display: block;
position: fixed; inset: 0;
z-index: 100;
}
.acc-bnav-drawer[hidden] { display: none; }
.acc-bnav-drawer__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.55);
opacity: 0;
transition: opacity .22s ease;
backdrop-filter: blur(2px);
}
.acc-bnav-drawer__sheet {
position: absolute;
left: 0; right: 0; bottom: 0;
background: #0F172A;
border-top: 1px solid rgba(255,255,255,0.08);
border-radius: 22px 22px 0 0;
padding: 12px 18px calc(22px + env(safe-area-inset-bottom, 0));
box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
transform: translateY(100%);
transition: transform .26s cubic-bezier(.32,.72,0,1);
max-height: 80vh;
overflow-y: auto;
}
.acc-bnav-drawer.is-open .acc-bnav-drawer__backdrop { opacity: 1; }
.acc-bnav-drawer.is-open .acc-bnav-drawer__sheet { transform: translateY(0); }
.acc-bnav-drawer__handle {
width: 36px; height: 4px;
background: rgba(255,255,255,0.18);
border-radius: 2px;
margin: 4px auto 14px;
}
.acc-bnav-drawer__head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 0 4px 14px;
margin-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.acc-bnav-drawer__user {
display: flex; align-items: center; gap: 12px;
flex: 1; min-width: 0;
}
.acc-bnav-drawer__user strong {
display: block;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc-bnav-drawer__user span {
display: block;
color: rgba(255,255,255,0.5);
font-size: 0.75rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc-bnav-drawer__avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, #FF6A00 0%, #F9460C 100%);
color: #fff;
font-weight: 800;
font-size: 18px;
letter-spacing: 0;
text-indent: 0;
text-align: center;
line-height: 42px;
padding: 0;
display: inline-flex;
align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(249,70,12,0.45), inset 0 -1px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
text-shadow: 0 1px 1px rgba(0,0,0,0.18);
user-select: none;
}
.acc-bnav-drawer__close {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
width: 32px; height: 32px;
border-radius: 8px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.acc-bnav-drawer__close:active { transform: scale(0.94); }
.acc-bnav-drawer__list {
list-style: none;
padding: 8px 0 0;
margin: 0;
}
.acc-bnav-drawer__list li + li { margin-top: 4px; }
.acc-bnav-drawer__list a {
display: flex; align-items: center; gap: 14px;
padding: 14px 8px;
color: #fff;
text-decoration: none;
border-radius: 10px;
font-size: 0.92rem;
font-weight: 500;
transition: background .15s ease;
-webkit-tap-highlight-color: transparent;
}
.acc-bnav-drawer__list a:active { background: rgba(255,255,255,0.05); }
.acc-bnav-drawer__list a.is-active { background: rgba(255,106,0,0.10); color: #FF6A00; }
.acc-bnav-drawer__list a.is-danger { color: #F87171; }
.acc-bnav-drawer__icon {
width: 36px; height: 36px;
border-radius: 9px;
background: rgba(255,255,255,0.04);
display: inline-flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.7);
flex-shrink: 0;
}
.acc-bnav-drawer__list a.is-active .acc-bnav-drawer__icon {
background: rgba(255,106,0,0.15);
color: #FF6A00;
}
.acc-bnav-drawer__list a.is-danger .acc-bnav-drawer__icon {
background: rgba(248,113,113,0.10);
color: #F87171;
}
.acc-bnav-drawer__list a > span:not(.acc-bnav-drawer__icon) {
flex: 1;
}
.acc-bnav-drawer__arrow {
color: rgba(255,255,255,0.3);
flex-shrink: 0;
}
/* Item especial: Instalar app (botão PWA dentro do drawer) */
.acc-bnav-drawer__item-pwa {
width: 100%;
background: linear-gradient(135deg, rgba(255,106,0,0.12) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,106,0,0.25);
cursor: pointer;
font: inherit;
color: #fff;
text-decoration: none;
padding: 14px 8px;
border-radius: 10px;
display: flex; align-items: center; gap: 14px;
text-align: left;
transition: background .15s ease, transform .12s ease;
-webkit-tap-highlight-color: transparent;
}
.acc-bnav-drawer__item-pwa[hidden] { display: none; }
.acc-bnav-drawer__item-pwa:active {
transform: scale(0.98);
background: linear-gradient(135deg, rgba(255,106,0,0.20) 0%, rgba(255,255,255,0.04) 100%);
}
.acc-bnav-drawer__item-text {
flex: 1;
display: flex; flex-direction: column; gap: 2px;
}
.acc-bnav-drawer__item-text strong {
color: #fff;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.2;
}
.acc-bnav-drawer__item-text small {
color: rgba(255,255,255,0.55);
font-size: 0.74rem;
}
}
/* ─── Curso (player + índice) ─────────────────────────────────────── */
.curso-layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 24px;
align-items: start;
}
.curso-aside {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 6px;
position: sticky;
top: 24px;
max-height: calc(100vh - 48px);
overflow-y: auto;
}
.curso-aside__head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 14px 10px;
border-bottom: 1px solid rgba(255,255,255,0.06);
margin-bottom: 6px;
}
.curso-aside__lbl {
font-size: 0.7rem; font-weight: 700;
color: rgba(255,255,255,0.55);
text-transform: uppercase; letter-spacing: 0.08em;
}
.curso-aside__count {
font-size: 0.7rem; font-weight: 600;
color: rgba(255,255,255,0.4);
}
.curso-section { padding: 4px 0; }
.curso-section + .curso-section {
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.curso-section__title {
font-size: 0.68rem; font-weight: 700;
color: rgba(255,255,255,0.45);
text-transform: uppercase; letter-spacing: 0.08em;
padding: 8px 14px 6px;
}
.curso-lesson {
display: flex; align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
text-decoration: none;
color: rgba(255,255,255,0.75);
font-size: 0.84rem;
transition: background .15s ease, color .15s ease;
margin: 2px 4px;
}
.curso-lesson:hover {
background: rgba(255,255,255,0.04);
color: #fff;
}
.curso-lesson.is-active {
background: rgba(255,106,0,0.14);
color: #fff;
}
.curso-lesson.is-active .curso-lesson__num {
background: #FF6A00;
color: #fff;
}
.curso-lesson__num {
display: inline-flex;
align-items: center; justify-content: center;
width: 26px; height: 26px;
border-radius: 7px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
font-size: 0.7rem;
font-weight: 700;
color: rgba(255,255,255,0.6);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.curso-lesson__title {
flex: 1;
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.curso-lesson.is-active .curso-lesson__title { font-weight: 600; }
.curso-lesson__dur {
font-size: 0.7rem;
color: rgba(255,255,255,0.4);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.curso-content {
min-width: 0;
}
.curso-content__head { margin-bottom: 18px; }
.curso-content__head h2 {
font-size: 1.45rem; font-weight: 800;
color: #fff; margin: 0 0 6px;
line-height: 1.25;
}
.curso-content__head p {
color: rgba(255,255,255,0.6);
font-size: 0.92rem;
margin: 0;
}
.curso-player {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 14px;
overflow: hidden;
background: #000;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.curso-player iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.curso-noplayer {
aspect-ratio: 16 / 9;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.5);
font-size: 0.9rem;
}
.curso-nav {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-top: 22px;
}
.curso-nav__btn {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
color: #fff;
text-decoration: none;
transition: background .15s ease, transform .12s ease;
min-width: 0;
}
.curso-nav__btn:hover {
background: rgba(255,255,255,0.06);
transform: translateY(-1px);
}
.curso-nav__btn--next {
justify-content: flex-end;
text-align: right;
}
.curso-nav__btn > div {
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.curso-nav__hint {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.45);
font-weight: 700;
}
.curso-nav__title {
font-size: 0.92rem;
font-weight: 600;
color: rgba(255,255,255,0.92);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.curso-nav__btn svg { flex-shrink: 0; color: rgba(255,255,255,0.6); }
/* Locked screen */
.curso-locked {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 48px 40px;
max-width: 720px;
margin: 0 auto;
text-align: left;
}
.curso-locked__icon {
width: 64px; height: 64px;
background: rgba(255,106,0,0.12);
color: #FF6A00;
border-radius: 16px;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 22px;
}
.curso-locked h2 {
font-size: 1.6rem; font-weight: 800;
color: #fff; margin: 0 0 12px;
}
.curso-locked p {
color: rgba(255,255,255,0.65);
font-size: 0.94rem;
line-height: 1.6;
margin: 0 0 8px;
}
.curso-locked__cta {
display: inline-block;
margin-top: 22px;
padding: 14px 28px;
background: #FF6A00;
color: #fff;
border-radius: 10px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: background .15s, transform .12s;
box-shadow: 0 6px 20px rgba(255,106,0,0.35);
}
.curso-locked__cta:hover {
background: #E55E00;
transform: translateY(-1px);
}
@media (max-width: 900px) {
.curso-layout {
grid-template-columns: 1fr;
gap: 18px;
}
.curso-aside {
position: static;
max-height: none;
}
.curso-content__head h2 { font-size: 1.2rem; }
.curso-nav { grid-template-columns: 1fr; }
.curso-nav__btn--next { justify-content: flex-start; text-align: left; }
.curso-locked { padding: 32px 24px; }
}
/* ─── Estratégias: parâmetros (grade chave/valor) ─────────────────── */
.bt-params {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.bt-param {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.bt-param__lbl {
font-size: 0.7rem; font-weight: 700;
color: rgba(255,255,255,0.5);
text-transform: uppercase; letter-spacing: 0.06em;
}
.bt-param__val {
font-size: 0.95rem; font-weight: 600;
color: #fff;
font-variant-numeric: tabular-nums;
word-break: break-word;
}
/* ─── Estratégias: filtros + cards premium + modal ───────────────── */
.strat-toolbar {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
margin-bottom: 22px;
padding: 16px 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
}
.strat-flt { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.strat-flt label {
font-size: 0.7rem; font-weight: 700;
color: rgba(255,255,255,0.55);
text-transform: uppercase; letter-spacing: 0.06em;
}
.strat-flt select {
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 10px 36px 10px 14px;
color: #fff; font: inherit; font-size: 0.9rem;
cursor: pointer;
outline: none;
transition: border-color .15s ease;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
}
.strat-flt select:focus { border-color: #FF6A00; }
.strat-flt select option { background: #0F172A; color: #fff; }
.strat-flt-count {
margin-left: auto;
color: rgba(255,255,255,0.5);
font-size: 0.86rem;
font-weight: 600;
padding-bottom: 10px;
}
.strat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 18px;
}
.strat-empty {
padding: 40px;
text-align: center;
background: rgba(255,255,255,0.03);
border: 1px dashed rgba(255,255,255,0.1);
border-radius: 14px;
color: rgba(255,255,255,0.5);
}
.strat-card {
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 22px;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 18px;
-webkit-tap-highlight-color: transparent;
}
/* Filtro de robô/ativo: o JS seta hidden=true; o display:flex acima estava
sobrescrevendo o display:none default do [hidden] do navegador */
.strat-card[hidden] { display: none !important; }
.strat-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, #FF6A00 0%, #F9460C 100%);
opacity: 0;
transition: opacity .18s ease;
}
.strat-card:hover {
transform: translateY(-2px);
border-color: rgba(255,106,0,0.4);
background: linear-gradient(135deg, rgba(255,106,0,0.05) 0%, rgba(255,255,255,0.02) 100%);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.strat-card:hover::before { opacity: 1; }
.strat-card:active { transform: translateY(0); }
.strat-card__head { display: flex; flex-direction: column; gap: 8px; }
.strat-card__badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.strat-card__badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid;
}
.strat-card__badge--robot {
background: rgba(255,106,0,0.12);
color: #FF8A3D;
border-color: rgba(255,106,0,0.3);
}
.strat-card__badge--ativo {
background: rgba(96,165,250,0.12);
color: #93C5FD;
border-color: rgba(96,165,250,0.3);
}
.strat-card__head h3 {
font-size: 1.18rem;
font-weight: 800;
color: #fff;
margin: 0;
line-height: 1.25;
}
.strat-card__period {
font-size: 0.78rem;
color: rgba(255,255,255,0.5);
font-variant-numeric: tabular-nums;
}
.strat-card__metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.strat-card__metric {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border-radius: 9px;
}
.strat-card__metric-lbl {
font-size: 0.66rem;
font-weight: 700;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.strat-card__metric-val {
font-size: 1rem;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
}
.strat-card__metric-val.is-pos { color: #4ADE80; }
.strat-card__metric-val.is-neg { color: #F87171; }
.strat-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.strat-card__chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.strat-card__chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
font-size: 0.7rem;
color: rgba(255,255,255,0.7);
font-weight: 600;
}
.strat-card__chip svg { opacity: 0.75; }
.strat-card__open {
display: inline-flex;
align-items: center;
gap: 6px;
color: #FF6A00;
font-size: 0.82rem;
font-weight: 700;
transition: gap .15s ease;
}
.strat-card:hover .strat-card__open { gap: 10px; }
/* Modal */
.strat-modal {
position: fixed; inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.strat-modal[hidden] { display: none; }
.strat-modal__backdrop {
position: absolute; inset: 0;
background: rgba(2,6,23,0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity .22s ease;
}
.strat-modal.is-open .strat-modal__backdrop { opacity: 1; }
.strat-modal__box {
position: relative;
width: 100%;
max-width: 920px;
max-height: 92vh;
background: #0F172A;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
box-shadow: 0 40px 100px rgba(0,0,0,0.7);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(20px) scale(0.97);
opacity: 0;
transition: transform .26s cubic-bezier(.32,.72,0,1), opacity .22s ease;
}
.strat-modal.is-open .strat-modal__box { transform: translateY(0) scale(1); opacity: 1; }
.strat-modal__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px;
padding: 22px 26px 18px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.strat-modal__head h2 {
font-size: 1.4rem; font-weight: 800;
color: #fff;
margin: 4px 0 2px;
line-height: 1.2;
}
.strat-modal__head p {
font-size: 0.84rem;
color: rgba(255,255,255,0.5);
margin: 0;
}
.strat-modal__badges {
display: flex; gap: 6px;
margin-bottom: 4px;
}
.strat-modal__x {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
width: 36px; height: 36px;
border-radius: 10px;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .15s ease, color .15s ease;
}
.strat-modal__x:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.strat-modal__body {
padding: 22px 26px 26px;
overflow-y: auto;
}
@media (max-width: 720px) {
.strat-toolbar { padding: 14px; }
.strat-flt { min-width: 140px; flex: 1; }
.strat-flt-count { width: 100%; margin-left: 0; padding-bottom: 0; }
.strat-grid { grid-template-columns: 1fr; }
.strat-modal { padding: 0; align-items: flex-end; }
.strat-modal__box {
max-height: 94vh;
border-radius: 18px 18px 0 0;
transform: translateY(100%);
}
.strat-modal.is-open .strat-modal__box { transform: translateY(0); }
.strat-modal__head { padding: 16px 18px 14px; }
.strat-modal__head h2 { font-size: 1.15rem; }
.strat-modal__body { padding: 16px 18px 22px; }
}
/* ── Botão de tema (dark/light) ────────────────────────────────── */
.acc-theme-btn {
margin-left: auto;
margin-right: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: #fff;
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: background .15s, border-color .15s, color .15s;
}
.acc-theme-btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); }
.acc-theme-btn svg { position: absolute; transition: opacity .2s, transform .25s; }
.acc-theme-btn__sun { opacity: 0; transform: rotate(-20deg) scale(0.85); }
.acc-theme-btn__moon { opacity: 1; }
html[data-theme="light"] body.is-account .acc-theme-btn__sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] body.is-account .acc-theme-btn__moon { opacity: 0; transform: rotate(20deg) scale(0.85); }
/* ── Sino de notificações no header (área do cliente) ─────────────── */
.acc-notif {
position: relative;
margin-right: 6px;
}
.acc-notif__btn {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: #fff;
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: background .15s, border-color .15s;
}
.acc-notif__btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); }
.acc-notif__badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #F9460C;
color: #fff;
font-size: 10px;
font-weight: 700;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #11141d;
line-height: 1;
}
.acc-notif__panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 360px;
max-width: calc(100vw - 24px);
background: #1a1d27;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.55);
display: none;
z-index: 1000;
overflow: hidden;
}
.acc-notif.is-open .acc-notif__panel { display: block; }
.acc-notif.is-open .acc-notif__btn { background: rgba(255,255,255,0.10); }
.acc-notif__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
color: #fff;
font-size: 0.95rem;
}
.acc-notif__markall {
font-size: 0.78rem;
color: #FF6A00;
text-decoration: none;
font-weight: 600;
}
.acc-notif__markall:hover { color: #ff8c3a; }
.acc-notif__list {
max-height: 440px;
overflow-y: auto;
}
.acc-notif__empty {
padding: 28px 16px;
text-align: center;
color: rgba(255,255,255,0.45);
font-size: 0.88rem;
}
.acc-notif__item {
display: block;
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,0.04);
color: #fff;
text-decoration: none;
position: relative;
transition: background .12s;
}
.acc-notif__item:hover { background: rgba(255,255,255,0.04); }
.acc-notif__item:last-child { border-bottom: none; }
.acc-notif__item.is-unread {
background: rgba(249,70,12,0.06);
}
.acc-notif__item.is-unread::before {
content: '';
position: absolute;
left: 6px;
top: 18px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #F9460C;
}
.acc-notif__item.is-unread { padding-left: 22px; }
.acc-notif__title {
color: #fff;
font-weight: 600;
font-size: 0.88rem;
margin-bottom: 4px;
}
.acc-notif__body {
color: rgba(255,255,255,0.6);
font-size: 0.78rem;
line-height: 1.45;
margin-bottom: 6px;
}
.acc-notif__time {
color: rgba(255,255,255,0.4);
font-size: 0.7rem;
}
@media (max-width: 640px) {
.acc-notif__panel {
position: fixed;
top: 60px;
right: 12px;
left: 12px;
width: auto;
max-height: calc(100vh - 80px);
}
.acc-notif__list { max-height: calc(100vh - 160px); }
}
/* ── Light mode (data-theme="light" no ) ─────────────────────
Foco no painel da área do cliente: bg, cards, texto e bordas
principais. Cores de acento (laranja, vermelho/verde dos trades)
permanecem. */
html[data-theme="light"] body.is-account {
background: #f3f5f9;
color: #1a1d27;
}
html[data-theme="light"] body.is-account .acc-main,
html[data-theme="light"] body.is-account main.account-shell { background: #f3f5f9; }
html[data-theme="light"] body.is-account .lp-nav,
html[data-theme="light"] body.is-account .lp-nav.scrolled {
background: rgba(255,255,255,0.92);
border-bottom-color: rgba(0,0,0,0.06);
box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
html[data-theme="light"] body.is-account .acc-theme-btn,
html[data-theme="light"] body.is-account .acc-notif__btn {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.08);
color: #1a1d27;
}
html[data-theme="light"] body.is-account .acc-theme-btn:hover,
html[data-theme="light"] body.is-account .acc-notif__btn:hover {
background: rgba(0,0,0,0.07);
border-color: rgba(0,0,0,0.14);
}
html[data-theme="light"] body.is-account .acc-notif__badge { border-color: #fff; }
html[data-theme="light"] body.is-account .acc-notif__panel {
background: #fff;
border-color: rgba(0,0,0,0.08);
box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
html[data-theme="light"] body.is-account .acc-notif__head { color: #1a1d27; border-bottom-color: rgba(0,0,0,0.06); }
html[data-theme="light"] body.is-account .acc-notif__empty { color: rgba(0,0,0,0.5); }
html[data-theme="light"] body.is-account .acc-notif__item { color: #1a1d27; border-bottom-color: rgba(0,0,0,0.05); }
html[data-theme="light"] body.is-account .acc-notif__item:hover { background: rgba(0,0,0,0.03); }
html[data-theme="light"] body.is-account .acc-notif__title { color: #1a1d27; }
html[data-theme="light"] body.is-account .acc-notif__body { color: rgba(0,0,0,0.6); }
html[data-theme="light"] body.is-account .acc-notif__time { color: rgba(0,0,0,0.4); }
/* Cards do painel (formulários, painéis) */
html[data-theme="light"] body.is-account .acc-form-card,
html[data-theme="light"] body.is-account .acc-card,
html[data-theme="light"] body.is-account .acc-howto,
html[data-theme="light"] body.is-account .strat-modal__box,
html[data-theme="light"] body.is-account [class*="acc-"][class*="card"] {
background: #fff !important;
border-color: rgba(0,0,0,0.08) !important;
color: #1a1d27;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
html[data-theme="light"] body.is-account h1,
html[data-theme="light"] body.is-account h2,
html[data-theme="light"] body.is-account h3,
html[data-theme="light"] body.is-account h4 { color: #1a1d27; }
html[data-theme="light"] body.is-account p,
html[data-theme="light"] body.is-account label,
html[data-theme="light"] body.is-account small { color: rgba(0,0,0,0.65); }
/* Sidebar / nav do painel */
html[data-theme="light"] body.is-account .acc-sidebar,
html[data-theme="light"] body.is-account .acc-bottomnav {
background: rgba(255,255,255,0.96);
border-color: rgba(0,0,0,0.06);
}
html[data-theme="light"] body.is-account .acc-nav__item,
html[data-theme="light"] body.is-account .acc-bottomnav a { color: rgba(0,0,0,0.65); }
html[data-theme="light"] body.is-account .acc-nav__item:hover { background: rgba(0,0,0,0.04); color: #1a1d27; }
html[data-theme="light"] body.is-account .acc-nav__item.is-active,
html[data-theme="light"] body.is-account .acc-bottomnav a.is-active { color: #F9460C; background: rgba(249,70,12,0.08); }
/* Inputs */
html[data-theme="light"] body.is-account input[type="text"],
html[data-theme="light"] body.is-account input[type="email"],
html[data-theme="light"] body.is-account input[type="password"],
html[data-theme="light"] body.is-account input[type="number"],
html[data-theme="light"] body.is-account input[type="tel"],
html[data-theme="light"] body.is-account select,
html[data-theme="light"] body.is-account textarea {
background: #fff;
border-color: rgba(0,0,0,0.14);
color: #1a1d27;
}
html[data-theme="light"] body.is-account input::placeholder,
html[data-theme="light"] body.is-account textarea::placeholder { color: rgba(0,0,0,0.4); }
/* Tabelas */
html[data-theme="light"] body.is-account table { color: #1a1d27; }
html[data-theme="light"] body.is-account th { color: rgba(0,0,0,0.55); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] body.is-account td { border-color: rgba(0,0,0,0.06); }
/* Bloco de upgrade */
html[data-theme="light"] body.is-account .upgrade-card {
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.08);
color: #1a1d27;
}
html[data-theme="light"] body.is-account .upgrade-card:hover { background: rgba(0,0,0,0.04); }
html[data-theme="light"] body.is-account .upgrade-card__body strong:not(.upgrade-card__diff) { color: #1a1d27; }
html[data-theme="light"] body.is-account .upgrade-card__calc { color: rgba(0,0,0,0.55); }
/* ── BLANKET: força texto escuro em tudo no painel em light mode,
com exceções pros elementos que TÊM bg colorido (CTAs, badges,
células coloridas do calendário, valores +/-, etc.). */
html[data-theme="light"] body.is-account,
html[data-theme="light"] body.is-account h1,
html[data-theme="light"] body.is-account h2,
html[data-theme="light"] body.is-account h3,
html[data-theme="light"] body.is-account h4,
html[data-theme="light"] body.is-account h5,
html[data-theme="light"] body.is-account h6,
html[data-theme="light"] body.is-account p,
html[data-theme="light"] body.is-account span,
html[data-theme="light"] body.is-account strong,
html[data-theme="light"] body.is-account b,
html[data-theme="light"] body.is-account small,
html[data-theme="light"] body.is-account label,
html[data-theme="light"] body.is-account li,
html[data-theme="light"] body.is-account td,
html[data-theme="light"] body.is-account th,
html[data-theme="light"] body.is-account dt,
html[data-theme="light"] body.is-account dd,
html[data-theme="light"] body.is-account time,
html[data-theme="light"] body.is-account a {
color: #1a1d27;
}
/* Texto secundário fica cinza */
html[data-theme="light"] body.is-account small,
html[data-theme="light"] body.is-account .acc-howto p,
html[data-theme="light"] body.is-account .acc-howto__note,
html[data-theme="light"] body.is-account [class*="-lbl"],
html[data-theme="light"] body.is-account [class*="-sub"],
html[data-theme="light"] body.is-account [class*="-hint"],
html[data-theme="light"] body.is-account [class*="-mut"],
html[data-theme="light"] body.is-account [class*="-secondary"] { color: rgba(0,0,0,0.55); }
/* Exceções — elementos com bg laranja sólido que mantêm texto branco */
html[data-theme="light"] body.is-account .auth-submit,
html[data-theme="light"] body.is-account .btn-primary,
html[data-theme="light"] body.is-account .btn-orange,
html[data-theme="light"] body.is-account .acc-notif__badge,
html[data-theme="light"] body.is-account .upgrade-card__cta {
color: #fff;
}
/* Calendário em light: bg pastel + texto saturado escuro pra legibilidade */
html[data-theme="light"] body.is-account .cal-cell.is-pos { background: rgba(74,222,128,0.18) !important; border-color: rgba(22,163,74,0.30) !important; }
html[data-theme="light"] body.is-account .cal-cell.is-neg { background: rgba(248,113,113,0.18) !important; border-color: rgba(220,38,38,0.30) !important; }
html[data-theme="light"] body.is-account button.cal-cell.is-pos:hover { background: rgba(74,222,128,0.28) !important; border-color: rgba(22,163,74,0.50) !important; }
html[data-theme="light"] body.is-account button.cal-cell.is-neg:hover { background: rgba(248,113,113,0.28) !important; border-color: rgba(220,38,38,0.50) !important; }
html[data-theme="light"] body.is-account .cal-cell.is-pos .cal-day-num { color: #166534; }
html[data-theme="light"] body.is-account .cal-cell.is-neg .cal-day-num { color: #991b1b; }
html[data-theme="light"] body.is-account .cal-cell.is-pos .cal-day-val { color: #15803d !important; }
html[data-theme="light"] body.is-account .cal-cell.is-neg .cal-day-val { color: #b91c1c !important; }
html[data-theme="light"] body.is-account .cal-cell.is-pos .cal-day-meta,
html[data-theme="light"] body.is-account .cal-cell.is-neg .cal-day-meta { color: rgba(0,0,0,0.55); }
html[data-theme="light"] body.is-account .cal-cell .cal-day-num { color: rgba(0,0,0,0.55); }
html[data-theme="light"] body.is-account .cal-cell .cal-day-val { color: #1a1d27; }
html[data-theme="light"] body.is-account .cal-cell .cal-day-meta { color: rgba(0,0,0,0.5); }
html[data-theme="light"] body.is-account .cal-dayhead { color: rgba(0,0,0,0.55); }
/* Coluna semanal (SEM 1, SEM 2 etc.) — mesma lógica do calendário */
html[data-theme="light"] body.is-account .cal-week.is-pos { background: rgba(74,222,128,0.18) !important; border-color: rgba(22,163,74,0.30) !important; }
html[data-theme="light"] body.is-account .cal-week.is-neg { background: rgba(248,113,113,0.18) !important; border-color: rgba(220,38,38,0.30) !important; }
html[data-theme="light"] body.is-account .cal-week.is-pos .cal-week-val { color: #15803d !important; }
html[data-theme="light"] body.is-account .cal-week.is-neg .cal-week-val { color: #b91c1c !important; }
html[data-theme="light"] body.is-account .cal-week-lbl { color: rgba(0,0,0,0.55); }
html[data-theme="light"] body.is-account .cal-week-sub { color: rgba(0,0,0,0.55); }
html[data-theme="light"] body.is-account .cal-week-val { color: #1a1d27; }
/* ── Cards de estratégia ────────────────────────────────────────── */
html[data-theme="light"] body.is-account .strat-card {
background: #fff !important;
border-color: rgba(0,0,0,0.10) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
color: #1a1d27 !important;
}
html[data-theme="light"] body.is-account .strat-card:hover {
background: #fff !important;
border-color: rgba(255,106,0,0.45) !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
html[data-theme="light"] body.is-account .strat-card__badge { background: rgba(0,0,0,0.06); color: #1a1d27; }
html[data-theme="light"] body.is-account .strat-card__badge--robot { background: rgba(255,106,0,0.12); color: #c2410c; }
html[data-theme="light"] body.is-account .strat-card__badge--ativo { background: rgba(59,130,246,0.12); color: #1e40af; }
/* Estatísticas dentro do strat-card */
html[data-theme="light"] body.is-account .strat-card [class*="-stat"],
html[data-theme="light"] body.is-account .strat-card [class*="-metric"],
html[data-theme="light"] body.is-account .strat-card [class*="-num"],
html[data-theme="light"] body.is-account .strat-card [class*="-val"] { color: #1a1d27; }
html[data-theme="light"] body.is-account .strat-card [class*="-lbl"],
html[data-theme="light"] body.is-account .strat-card [class*="-label"] { color: rgba(0,0,0,0.55); }
/* Filtros / toolbar de estratégias */
html[data-theme="light"] body.is-account .strat-toolbar,
html[data-theme="light"] body.is-account .strat-flt {
background: transparent;
color: #1a1d27;
}
html[data-theme="light"] body.is-account .strat-flt label,
html[data-theme="light"] body.is-account .strat-flt-count { color: rgba(0,0,0,0.6); }
/* ── Curso ──────────────────────────────────────────────────────── */
html[data-theme="light"] body.is-account .curso-aside,
html[data-theme="light"] body.is-account .curso-content,
html[data-theme="light"] body.is-account .curso-locked {
background: #fff !important;
border-color: rgba(0,0,0,0.08) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
html[data-theme="light"] body.is-account .curso-aside__head { border-bottom-color: rgba(0,0,0,0.08); }
html[data-theme="light"] body.is-account .curso-aside__lbl { color: rgba(0,0,0,0.6); }
html[data-theme="light"] body.is-account .curso-aside__count { color: rgba(0,0,0,0.45); }
html[data-theme="light"] body.is-account .curso-section + .curso-section { border-top-color: rgba(0,0,0,0.08); }
html[data-theme="light"] body.is-account .curso-section__title { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .curso-lesson { color: #1a1d27; }
html[data-theme="light"] body.is-account .curso-lesson:hover { background: rgba(0,0,0,0.04); }
html[data-theme="light"] body.is-account .curso-lesson.is-active {
background: rgba(249,70,12,0.08);
color: #F9460C !important;
}
html[data-theme="light"] body.is-account .curso-lesson__num { color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.05); }
html[data-theme="light"] body.is-account .curso-lesson.is-active .curso-lesson__num { color: #F9460C; background: rgba(249,70,12,0.12); }
html[data-theme="light"] body.is-account .curso-lesson__title { color: inherit !important; }
html[data-theme="light"] body.is-account .curso-lesson__dur { color: rgba(0,0,0,0.45); }
html[data-theme="light"] body.is-account .curso-content__head h2 { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .curso-content__head p { color: rgba(0,0,0,0.6); }
html[data-theme="light"] body.is-account .curso-noplayer { background: rgba(0,0,0,0.03); color: rgba(0,0,0,0.55); }
html[data-theme="light"] body.is-account .curso-nav__btn {
background: #fff !important;
border-color: rgba(0,0,0,0.08) !important;
color: #1a1d27 !important;
}
html[data-theme="light"] body.is-account .curso-nav__btn:hover { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.16) !important; }
html[data-theme="light"] body.is-account .curso-nav__hint { color: rgba(0,0,0,0.5); }
html[data-theme="light"] body.is-account .curso-nav__title { color: #1a1d27; }
html[data-theme="light"] body.is-account .curso-nav__btn svg { color: rgba(0,0,0,0.5) !important; }
html[data-theme="light"] body.is-account .curso-locked h2 { color: #1a1d27; }
html[data-theme="light"] body.is-account .curso-locked p { color: rgba(0,0,0,0.65); }
/* ── Notificações em /minha-conta/detalhes (push-state) ──────────── */
html[data-theme="light"] body.is-account #push-status { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account #push-help { color: rgba(0,0,0,0.6) !important; }
html[data-theme="light"] body.is-account #push-state strong,
html[data-theme="light"] body.is-account #push-state small { color: inherit !important; }
html[data-theme="light"] body.is-account #push-state strong { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account #push-state small { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account #push-toggle { color: #fff !important; }
/* ── Tom-sobre-tom: blocos internos com cinza leve sobre os cards brancos
pra dar hierarquia visual (igual o "branco-sobre-preto" do dark) ── */
html[data-theme="light"] body.is-account .acc-form-card [class*="-card"]:not(.acc-form-card),
html[data-theme="light"] body.is-account .acc-form-card [class*="-box"],
html[data-theme="light"] body.is-account .acc-form-card .acc-mt5-list li,
html[data-theme="light"] body.is-account .acc-form-card .acc-license,
html[data-theme="light"] body.is-account .acc-form-card .acc-venc,
html[data-theme="light"] body.is-account .acc-form-card .install-item,
html[data-theme="light"] body.is-account .acc-form-card .install-trigger,
html[data-theme="light"] body.is-account .acc-card [class*="-card"]:not(.acc-card),
html[data-theme="light"] body.is-account .acc-card [class*="-box"],
html[data-theme="light"] body.is-account .acc-card .acc-mt5-list li,
html[data-theme="light"] body.is-account .acc-card .acc-license,
html[data-theme="light"] body.is-account .acc-card .acc-venc,
html[data-theme="light"] body.is-account .strat-card [class*="-stat"],
html[data-theme="light"] body.is-account .strat-card [class*="-metric"],
html[data-theme="light"] body.is-account .strat-card .strat-card__stats > *,
html[data-theme="light"] body.is-account .curso-content [class*="-box"],
html[data-theme="light"] body.is-account .curso-content [class*="inner-card"],
html[data-theme="light"] body.is-account .acc-howto__body,
html[data-theme="light"] body.is-account #push-state {
background: rgba(0,0,0,0.025) !important;
border-color: rgba(0,0,0,0.06) !important;
}
/* Botões neutros (não laranja/CTA) — bg cinza-claro, texto escuro */
html[data-theme="light"] body.is-account button:not(.auth-submit):not(.btn-primary):not(.btn-orange):not(.upgrade-card__cta):not(.acc-theme-btn):not(.acc-notif__btn):not(.curso-locked__cta):not(#push-toggle):not([class*="cta"]):not([class*="primary"]) {
background: rgba(0,0,0,0.04);
color: #1a1d27;
border-color: rgba(0,0,0,0.10);
}
html[data-theme="light"] body.is-account button:not(.auth-submit):not(.btn-primary):not(.btn-orange):not(.upgrade-card__cta):not(.acc-theme-btn):not(.acc-notif__btn):not(.curso-locked__cta):not(#push-toggle):not([class*="cta"]):not([class*="primary"]):hover {
background: rgba(0,0,0,0.07);
border-color: rgba(0,0,0,0.16);
color: #1a1d27;
}
/* SVGs — currentColor herda do parent escuro; força quando vier #fff explícito */
html[data-theme="light"] body.is-account svg { color: inherit; }
html[data-theme="light"] body.is-account [class*="acc-"] svg:not([fill]),
html[data-theme="light"] body.is-account [class*="curso-"] svg:not([fill]),
html[data-theme="light"] body.is-account [class*="strat-"] svg:not([fill]),
html[data-theme="light"] body.is-account [class*="install-"] svg:not([fill]),
html[data-theme="light"] body.is-account [class*="cal-"] svg:not([fill]) {
color: currentColor;
stroke: currentColor;
}
/* Botões-ícone padrão (X de fechar, prev/next, etc) */
html[data-theme="light"] body.is-account .cal-modal-x,
html[data-theme="light"] body.is-account .strat-modal__close,
html[data-theme="light"] body.is-account [class*="__close"],
html[data-theme="light"] body.is-account [class*="-nav"][class*="btn"]:not(.curso-nav__btn) {
background: rgba(0,0,0,0.04) !important;
color: #1a1d27 !important;
border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] body.is-account .cal-modal-x:hover,
html[data-theme="light"] body.is-account .strat-modal__close:hover,
html[data-theme="light"] body.is-account [class*="__close"]:hover {
background: rgba(0,0,0,0.08) !important;
color: #1a1d27 !important;
}
/* Setas (calendário prev/next, curso anterior/próximo dentro de botão neutro) */
html[data-theme="light"] body.is-account .cal-head__nav button,
html[data-theme="light"] body.is-account .cal-nav button,
html[data-theme="light"] body.is-account [class*="-arrow"]:not([class*="cta"]) {
background: rgba(0,0,0,0.04) !important;
color: #1a1d27 !important;
border-color: rgba(0,0,0,0.10) !important;
}
/* Inputs file/checkbox/radio — não invertir, deixar nativos do browser */
html[data-theme="light"] body.is-account input[type="checkbox"],
html[data-theme="light"] body.is-account input[type="radio"] { accent-color: #F9460C; }
/* ── Toggle R$ / Pontos / % do calendário ─────────────────────── */
.cal-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-mode-toggle {
display: inline-flex;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.cal-mode-btn {
background: transparent;
border: none;
color: rgba(255,255,255,0.55);
padding: 6px 12px;
border-radius: 7px;
cursor: pointer;
font: inherit;
font-size: 0.78rem;
font-weight: 600;
transition: background .15s, color .15s;
}
.cal-mode-btn:hover { color: #fff; }
.cal-mode-btn.is-active {
background: rgba(255,106,0,0.16);
color: #FF8A3D;
}
html[data-theme="light"] body.is-account .cal-mode-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); }
html[data-theme="light"] body.is-account .cal-mode-btn { color: rgba(0,0,0,0.55); }
html[data-theme="light"] body.is-account .cal-mode-btn:hover { color: #1a1d27; }
html[data-theme="light"] body.is-account .cal-mode-btn.is-active { background: rgba(249,70,12,0.12); color: #F9460C; }
/* ── Tom-sobre-tom dos stats internos ────────────────────────────
Card de estratégia: 4 mini-stats (Lucro, %, Trades, DD) sobre o
card branco → cinza-claro + borda sutil. */
html[data-theme="light"] body.is-account .strat-card__metric {
background: rgba(0,0,0,0.03) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
border-radius: 10px;
}
html[data-theme="light"] body.is-account .strat-card__metric-lbl { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .strat-card__metric-val { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .strat-card__metric-val.is-pos { color: #15803d !important; }
html[data-theme="light"] body.is-account .strat-card__metric-val.is-neg { color: #b91c1c !important; }
/* Página Meus Trades: stats top (Lucro Líquido, % Acerto, etc.)
ficavam soltos no fundo cinza-claro. Agora viram cards brancos
delimitados, igual o dark mode. */
html[data-theme="light"] body.is-account .trd-stat {
background: #fff !important;
border: 1px solid rgba(0,0,0,0.08) !important;
border-radius: 12px;
padding: 14px 18px;
box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
html[data-theme="light"] body.is-account .trd-stat-lbl { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .trd-stat-val { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .trd-stat-val.is-pos { color: #15803d !important; }
html[data-theme="light"] body.is-account .trd-stat-val.is-neg { color: #b91c1c !important; }
html[data-theme="light"] body.is-account .trd-stat-sub { color: rgba(0,0,0,0.5) !important; }
/* Cards menores no header do calendário (Resultado do mês,
Trades, Dias positivos) → tom-sobre-tom dentro do card branco */
html[data-theme="light"] body.is-account .cal-mstat {
background: rgba(0,0,0,0.03) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] body.is-account .cal-mstat-lbl { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .cal-mstat-val { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .cal-mstat-val.is-pos { color: #15803d !important; }
html[data-theme="light"] body.is-account .cal-mstat-val.is-neg { color: #b91c1c !important; }
/* ── Header sempre com bg no light (desktop + mobile, com ou sem scroll) */
html[data-theme="light"] body.is-account .lp-nav,
html[data-theme="light"] body.is-account .lp-nav.scrolled {
background: rgba(255,255,255,0.92) !important;
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border-bottom-color: rgba(0,0,0,0.06) !important;
box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-theme="light"] body.is-account .lp-nav { background: rgba(255,255,255,0.97) !important; }
}
/* ── Menu mobile (bottom nav + drawer "Mais") em light ─────────── */
html[data-theme="light"] body.is-account .acc-bottomnav {
background: rgba(255,255,255,0.96) !important;
border-top: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: 0 -4px 18px rgba(0,0,0,0.05);
}
html[data-theme="light"] body.is-account .acc-bottomnav a { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .acc-bottomnav a:hover { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-bottomnav a.is-active { color: #F9460C !important; background: transparent !important; }
html[data-theme="light"] body.is-account .acc-bottomnav a svg { color: currentColor !important; }
/* Drawer "Mais" — bottom sheet */
html[data-theme="light"] body.is-account .acc-bnav-drawer__backdrop { background: rgba(0,0,0,0.35) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__sheet {
background: #fff !important;
color: #1a1d27 !important;
border-top: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
}
html[data-theme="light"] body.is-account .acc-bnav-drawer__handle { background: rgba(0,0,0,0.15) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__head { border-bottom-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__user strong { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__user span { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__avatar { background: rgba(0,0,0,0.06) !important; color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__close {
background: rgba(0,0,0,0.05) !important;
color: #1a1d27 !important;
border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] body.is-account .acc-bnav-drawer__close:hover { background: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a { color: #1a1d27 !important; background: transparent !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a:hover,
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a:active { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a.is-active { background: rgba(249,70,12,0.10) !important; color: #F9460C !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a svg { color: currentColor !important; }
/* Sidebar mobile lateral (hamburger) */
html[data-theme="light"] body.is-account .acc-sidebar {
background: #fff !important;
border-right: 1px solid rgba(0,0,0,0.08);
box-shadow: 4px 0 18px rgba(0,0,0,0.08);
}
html[data-theme="light"] body.is-account .acc-sidebar__user strong { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-sidebar__user span { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .acc-nav__item { color: rgba(0,0,0,0.65) !important; }
html[data-theme="light"] body.is-account .acc-nav__item:hover { background: rgba(0,0,0,0.04) !important; color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-nav__item.is-active { background: rgba(249,70,12,0.10) !important; color: #F9460C !important; }
html[data-theme="light"] body.is-account .acc-nav__item svg { color: currentColor !important; }
html[data-theme="light"] body.is-account .acc-backdrop { background: rgba(0,0,0,0.35) !important; }
/* ── Header sempre com bg no light (desktop + mobile, com ou sem scroll) */
html[data-theme="light"] body.is-account .lp-nav,
html[data-theme="light"] body.is-account .lp-nav.scrolled {
background: rgba(255,255,255,0.92) !important;
backdrop-filter: blur(18px) saturate(180%);
-webkit-backdrop-filter: blur(18px) saturate(180%);
border-bottom-color: rgba(0,0,0,0.06) !important;
box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-theme="light"] body.is-account .lp-nav { background: rgba(255,255,255,0.97) !important; }
}
/* ── Menu mobile (bottom nav + drawer "Mais") em light ─────────── */
html[data-theme="light"] body.is-account .acc-bottomnav {
background: rgba(255,255,255,0.96) !important;
border-top: 1px solid rgba(0,0,0,0.06) !important;
box-shadow: 0 -4px 18px rgba(0,0,0,0.05);
}
html[data-theme="light"] body.is-account .acc-bottomnav a {
color: rgba(0,0,0,0.55) !important;
}
html[data-theme="light"] body.is-account .acc-bottomnav a:hover { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-bottomnav a.is-active {
color: #F9460C !important;
background: transparent !important;
}
html[data-theme="light"] body.is-account .acc-bottomnav a svg { color: currentColor !important; }
/* Drawer "Mais" — bottom sheet que abre por cima */
html[data-theme="light"] body.is-account .acc-bnav-drawer__backdrop { background: rgba(0,0,0,0.35) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__sheet {
background: #fff !important;
color: #1a1d27 !important;
border-top: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
}
html[data-theme="light"] body.is-account .acc-bnav-drawer__handle { background: rgba(0,0,0,0.15) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__head { border-bottom-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__user strong { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__user span { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__avatar {
background: rgba(0,0,0,0.06) !important;
color: #1a1d27 !important;
}
html[data-theme="light"] body.is-account .acc-bnav-drawer__close {
background: rgba(0,0,0,0.05) !important;
color: #1a1d27 !important;
border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] body.is-account .acc-bnav-drawer__close:hover { background: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a {
color: #1a1d27 !important;
background: transparent !important;
}
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a:hover,
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a:active {
background: rgba(0,0,0,0.04) !important;
}
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a.is-active {
background: rgba(249,70,12,0.10) !important;
color: #F9460C !important;
}
html[data-theme="light"] body.is-account .acc-bnav-drawer__list a svg { color: currentColor !important; }
/* Sidebar mobile (hamburger) — caso a página use a sidebar deslizante */
html[data-theme="light"] body.is-account .acc-sidebar {
background: #fff !important;
border-right: 1px solid rgba(0,0,0,0.08);
box-shadow: 4px 0 18px rgba(0,0,0,0.08);
}
html[data-theme="light"] body.is-account .acc-sidebar__user strong { color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-sidebar__user span { color: rgba(0,0,0,0.55) !important; }
html[data-theme="light"] body.is-account .acc-nav__item { color: rgba(0,0,0,0.65) !important; }
html[data-theme="light"] body.is-account .acc-nav__item:hover { background: rgba(0,0,0,0.04) !important; color: #1a1d27 !important; }
html[data-theme="light"] body.is-account .acc-nav__item.is-active { background: rgba(249,70,12,0.10) !important; color: #F9460C !important; }
html[data-theme="light"] body.is-account .acc-nav__item svg { color: currentColor !important; }
html[data-theme="light"] body.is-account .acc-backdrop { background: rgba(0,0,0,0.35) !important; }
/* Cores de acento (PnL +/-) ficam visíveis em qualquer fundo */
html[data-theme="light"] body.is-account .pnl-pos,
html[data-theme="light"] body.is-account [class*="positive"],
html[data-theme="light"] body.is-account [class*="-pos"]:not(.cal-cell):not([class*="-cell"]) { color: #16a34a; }
html[data-theme="light"] body.is-account .pnl-neg,
html[data-theme="light"] body.is-account [class*="negative"],
html[data-theme="light"] body.is-account [class*="-neg"]:not(.cal-cell):not([class*="-cell"]) { color: #dc2626; }
/* Links que devem ter cor de acento */
html[data-theme="light"] body.is-account a.acc-notif__markall,
html[data-theme="light"] body.is-account a[class*="cta"],
html[data-theme="light"] body.is-account a[class*="primary"] { color: #F9460C; }
/* ── BLANKET de containers: força bg branco/cinza-claro + bordas cinza
em TODOS os blocos comuns do painel. Resolve a maioria das classes
sem precisar listar cada uma. */
html[data-theme="light"] body.is-account [class*="-card"],
html[data-theme="light"] body.is-account [class*="card-"],
html[data-theme="light"] body.is-account [class*="-box"],
html[data-theme="light"] body.is-account [class*="-panel"],
html[data-theme="light"] body.is-account [class*="-wrap"],
html[data-theme="light"] body.is-account [class*="-container"],
html[data-theme="light"] body.is-account .acc-howto,
html[data-theme="light"] body.is-account .acc-howto__body,
html[data-theme="light"] body.is-account .acc-license,
html[data-theme="light"] body.is-account .acc-license__head,
html[data-theme="light"] body.is-account .acc-venc,
html[data-theme="light"] body.is-account .acc-venc__head,
html[data-theme="light"] body.is-account .acc-mt5-list,
html[data-theme="light"] body.is-account .acc-mt5-list li,
html[data-theme="light"] body.is-account .acc-robos-dl,
html[data-theme="light"] body.is-account .acc-robos-dl__info,
html[data-theme="light"] body.is-account .checkout-form,
html[data-theme="light"] body.is-account .checkout-plan,
html[data-theme="light"] body.is-account .checkout-pay-opt,
html[data-theme="light"] body.is-account .cc-note,
html[data-theme="light"] body.is-account .install-item,
html[data-theme="light"] body.is-account .install-trigger,
html[data-theme="light"] body.is-account .strat-modal__box,
html[data-theme="light"] body.is-account .strat-modal__body,
html[data-theme="light"] body.is-account .cal-modal,
html[data-theme="light"] body.is-account .cal-modal-head,
html[data-theme="light"] body.is-account .cal-grid,
html[data-theme="light"] body.is-account .cal-mstat,
html[data-theme="light"] body.is-account .cal-head,
html[data-theme="light"] body.is-account .auth-box,
html[data-theme="light"] body.is-account details,
html[data-theme="light"] body.is-account summary {
background: #fff !important;
border-color: rgba(0,0,0,0.08) !important;
}
/* Células neutras do calendário (sem PnL) — bg branco com border cinza */
html[data-theme="light"] body.is-account .cal-cell:not(.is-pos):not(.is-neg):not(.is-empty):not(.is-other) {
background: #fff !important;
border-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] body.is-account .cal-cell.is-empty,
html[data-theme="light"] body.is-account .cal-cell.is-other {
background: rgba(0,0,0,0.02) !important;
border-color: rgba(0,0,0,0.05) !important;
}
/* Hover/focus states que usam bg branco translúcido → invertem */
html[data-theme="light"] body.is-account .acc-nav__item:hover,
html[data-theme="light"] body.is-account .install-item:hover,
html[data-theme="light"] body.is-account .acc-mt5-list li:hover,
html[data-theme="light"] body.is-account .cal-cell:hover { background: rgba(0,0,0,0.04) !important; }
/* Divisores horizontais */
html[data-theme="light"] body.is-account hr,
html[data-theme="light"] body.is-account [class*="divider"],
html[data-theme="light"] body.is-account [class*="-sep"]:not(.upgrade-card__sep) { border-color: rgba(0,0,0,0.08) !important; background: rgba(0,0,0,0.08); }
/* Bordas em geral (sublinhados, etc.) — pega qualquer border-color rgba branco */
html[data-theme="light"] body.is-account [class*="acc-"],
html[data-theme="light"] body.is-account [class*="cal-"]:not([class*="cell"]),
html[data-theme="light"] body.is-account [class*="checkout-"],
html[data-theme="light"] body.is-account [class*="install-"],
html[data-theme="light"] body.is-account [class*="strat-"] { border-color: rgba(0,0,0,0.08); }
/* Avatar no header (letra do nome) */
html[data-theme="light"] body.is-account .lp-nav__user-avatar,
html[data-theme="light"] body.is-account .acc-sidebar__user-avatar {
background: rgba(0,0,0,0.06) !important;
color: #1a1d27 !important;
}
/* Code / pre / monospace blocks */
html[data-theme="light"] body.is-account code,
html[data-theme="light"] body.is-account pre,
html[data-theme="light"] body.is-account kbd {
background: rgba(0,0,0,0.05) !important;
color: #1a1d27 !important;
border-color: rgba(0,0,0,0.08);
}