/* =====================================================================
   Tema do workspace Plano Milionário (só vale com <html data-ws="plano-milionario">).
   A Youth não usa nada deste arquivo.
   Linguagem: moldura de 15px, barra lateral laranja flutuante com pontilhado (halftone),
   seleção em liquid glass, painel principal preto com brilho laranja, cartões de vidro escuro.
   ===================================================================== */
[data-ws="plano-milionario"]{
  --bg:#050404; --s1:rgba(20,15,14,.78); --s2:rgba(255,255,255,.05); --s3:rgba(255,255,255,.09); --line:rgba(255,255,255,.075);
  --tx:#FFFFFF; --mut:#BABABA; --dim:#7E7470;
  --ac:#FF6D29; --ac-soft:rgba(255,109,41,.15); --ac-line:rgba(255,109,41,.5);
  --r:20px; --disp:'Inter Tight','Inter',system-ui,sans-serif; --ui:'Inter Tight','Inter',system-ui,sans-serif;
  --laranja:linear-gradient(165deg,#FF7A3A 0%,#FF6D29 38%,#F2581A 72%,#E04B12 100%);
  --pontos:radial-gradient(rgba(255,255,255,.16) .9px, transparent 1.3px);
  --vidro:linear-gradient(180deg,rgba(40,29,25,.46),rgba(14,11,11,.82));
  --raio:28px;
}
[data-ws="plano-milionario"] body{background:#050404;letter-spacing:-.1px}

/* ---------- moldura: container pai com 15px por dentro ---------- */
[data-ws="plano-milionario"] .app{padding:15px;gap:15px;grid-template-columns:268px 1fr;min-height:100vh}

/* ---------- barra lateral laranja com pontilhado ---------- */
[data-ws="plano-milionario"] .side{
  position:sticky;top:15px;height:calc(100vh - 30px);margin:0;padding:22px 16px 16px;border:0;border-radius:var(--raio);
  background:var(--pontos) 0 0/7px 7px,var(--laranja);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08),0 24px 60px -18px rgba(255,90,20,.45);
  z-index:25;isolation:isolate;color:#fff}
[data-ws="plano-milionario"] .side::after{ /* halftone mais forte subindo do pé da barra */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(rgba(120,22,0,.42) 1.5px,transparent 1.9px) 0 0/5px 5px;
  -webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.55) 22%,transparent 48%);mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.55) 22%,transparent 48%)}
[data-ws="plano-milionario"] .side::before{ /* brilho suave no topo */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(420px 260px at 20% -10%,rgba(255,255,255,.22),transparent 60%)}

[data-ws="plano-milionario"] .logo,[data-ws="plano-milionario"] .ws-btn{font:700 25px/1.02 var(--disp);letter-spacing:-.9px;color:#fff}
[data-ws="plano-milionario"] .logo span{color:#fff;opacity:.9;margin-left:2px}
[data-ws="plano-milionario"] .ws-btn small{color:rgba(255,255,255,.72);letter-spacing:.2px;text-transform:none;font:500 12px var(--ui);margin-top:7px}
[data-ws="plano-milionario"] .ws-btn:hover small{color:#fff}

/* pílula do modo (simulação / real) */
[data-ws="plano-milionario"] .modo{border-radius:999px;text-transform:none;letter-spacing:.1px;font:600 12.5px var(--ui);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
[data-ws="plano-milionario"] .modo .dot{background:#fff}
[data-ws="plano-milionario"] .modo.ok,[data-ws="plano-milionario"] .modo.warn{color:#fff;border-color:rgba(255,255,255,.4)}
[data-ws="plano-milionario"] .modo.ok .dot{background:#3DFF9E;box-shadow:0 0 0 3px rgba(61,255,158,.25)}
[data-ws="plano-milionario"] .modo.warn .dot{background:#FFE08A}

/* menu */
[data-ws="plano-milionario"] .nav-i,[data-ws="plano-milionario"] .nav-s{color:rgba(255,255,255,.88);border-radius:16px;font-weight:600;position:relative;border:1px solid transparent}
[data-ws="plano-milionario"] .nav-i{padding:11px 13px;font-size:15px}
[data-ws="plano-milionario"] .nav-i .ic{color:rgba(255,255,255,.9)}
[data-ws="plano-milionario"] .nav-i:hover,[data-ws="plano-milionario"] .nav-s:hover{background:rgba(255,255,255,.10);color:#fff}
[data-ws="plano-milionario"] .nav-i:hover .ic,[data-ws="plano-milionario"] .nav-i.act .ic{color:#fff}
[data-ws="plano-milionario"] .nav-i.act{color:#fff}
[data-ws="plano-milionario"] .sub-in{border-left-color:rgba(255,255,255,.22)}
[data-ws="plano-milionario"] .nav-s{border-radius:12px;font-size:14px;color:rgba(255,255,255,.78)}
[data-ws="plano-milionario"] .nav-s.mais{color:rgba(255,255,255,.62)}
[data-ws="plano-milionario"] .nav-s.mais:hover{color:#fff}

/* seleção em liquid glass */
[data-ws="plano-milionario"] .nav-i.on,[data-ws="plano-milionario"] .nav-s.on{
  color:#fff;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.14) 42%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.46);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -12px 20px rgba(150,35,0,.20),inset 0 0 0 1px rgba(255,255,255,.06),0 12px 26px -8px rgba(105,22,0,.6);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%)}
[data-ws="plano-milionario"] .nav-i.on::before,[data-ws="plano-milionario"] .nav-s.on::before{ /* reflexo diagonal do vidro */
  content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.34) 34%,rgba(255,255,255,0) 50%);mix-blend-mode:screen}
[data-ws="plano-milionario"] .nav-i.on .ic{color:#fff}
[data-ws="plano-milionario"] .side .badge{background:#fff;color:#E04B12}
[data-ws="plano-milionario"] .side .badge.soft{background:rgba(255,255,255,.22);color:#fff}

/* perfil no pé da barra */
[data-ws="plano-milionario"] .pf-btn{border-radius:20px;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.40);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 14px 30px -10px rgba(105,22,0,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[data-ws="plano-milionario"] .pf-btn span,[data-ws="plano-milionario"] .pf-btn .chev{color:rgba(255,255,255,.85)}
[data-ws="plano-milionario"] .pf-btn .av{background:#fff;color:#E04B12}
[data-ws="plano-milionario"] .pf-pop,[data-ws="plano-milionario"] .ws-pop{z-index:60;border-radius:20px;color:var(--tx);
  background:linear-gradient(180deg,#1E1614,#0E0B0B);border:1px solid rgba(255,255,255,.10);box-shadow:0 26px 60px rgba(0,0,0,.6)}
[data-ws="plano-milionario"] .ws-i{border-radius:12px}
[data-ws="plano-milionario"] .ws-i.on{background:var(--ac-soft);box-shadow:inset 0 0 0 1px rgba(255,109,41,.35)}

/* ---------- painel principal: preto com brilho laranja ---------- */
[data-ws="plano-milionario"] main{
  border-radius:var(--raio);padding:34px 38px 64px;min-height:calc(100vh - 30px);position:relative;
  background:
    radial-gradient(640px 520px at -6% 38%,rgba(255,109,41,.26),transparent 70%),
    radial-gradient(520px 420px at 104% 102%,rgba(255,109,41,.12),transparent 70%),
    radial-gradient(380px 260px at 92% -4%,rgba(255,140,80,.07),transparent 70%),
    #0B0909;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
[data-ws="plano-milionario"] .ph h1{font:700 38px/1.04 var(--disp);letter-spacing:-1.3px;text-transform:none}
[data-ws="plano-milionario"] .ph p{color:var(--mut)}
[data-ws="plano-milionario"] h2{font:600 15px var(--ui);letter-spacing:-.2px;text-transform:none;color:#fff}
[data-ws="plano-milionario"] .mbox h3{font:700 26px var(--disp);letter-spacing:-.8px;text-transform:none}

/* cartões de vidro escuro (todas as seções no mesmo padrão) */
[data-ws="plano-milionario"] .card,[data-ws="plano-milionario"] .kpi,[data-ws="plano-milionario"] .statusbar,[data-ws="plano-milionario"] .col{
  background:var(--vidro);border:1px solid var(--line);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 44px -18px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
[data-ws="plano-milionario"] .kpi{border-radius:20px}
[data-ws="plano-milionario"] .tc{border-radius:16px;background:rgba(255,255,255,.035);border-color:var(--line)}
[data-ws="plano-milionario"] .li{border-top-color:var(--line)}
[data-ws="plano-milionario"] .col-h{border-bottom-color:var(--line)}
[data-ws="plano-milionario"] .tabs{border-bottom-color:var(--line)}
[data-ws="plano-milionario"] .tab.on{color:#fff;border-bottom-color:var(--ac)}

/* botões */
[data-ws="plano-milionario"] .btn{border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
[data-ws="plano-milionario"] .btn:hover{background:rgba(255,255,255,.11)}
[data-ws="plano-milionario"] .btn.ghost{background:none;border-color:transparent;box-shadow:none}
[data-ws="plano-milionario"] .btn.primary{position:relative;overflow:hidden;color:#fff;border:1px solid rgba(255,255,255,.35);
  background:var(--laranja);box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 10px 26px -8px rgba(255,90,20,.6)}
[data-ws="plano-milionario"] .btn.primary::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 22%,rgba(255,255,255,.32) 38%,transparent 54%)}
[data-ws="plano-milionario"] .btn.ok{background:rgba(61,214,140,.16);border-color:rgba(61,214,140,.45);color:#7CF2BC}

/* campos, chips, janelas */
[data-ws="plano-milionario"] .inp,[data-ws="plano-milionario"] select.inp,[data-ws="plano-milionario"] textarea.inp{border-radius:14px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10)}
[data-ws="plano-milionario"] .chip{background:rgba(255,255,255,.08);color:#ECE6E3}
[data-ws="plano-milionario"] .drawer{background:linear-gradient(180deg,#171211,#0B0909);border-left:1px solid var(--line);border-radius:var(--raio) 0 0 var(--raio)}
[data-ws="plano-milionario"] .mbox{border-radius:26px;background:linear-gradient(180deg,#1C1513,#0D0A0A);border-color:rgba(255,255,255,.09)}
[data-ws="plano-milionario"] .modal{background:rgba(5,4,4,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[data-ws="plano-milionario"] .toast{border-radius:999px}

/* ---------- splash: cortina laranja que vira a barra lateral ---------- */
.splash-pm{position:fixed;z-index:200;left:0;top:0;width:100vw;height:100vh;border-radius:0;display:grid;place-items:center;
  background:var(--pontos) 0 0/7px 7px,var(--laranja);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);will-change:left,top,width,height,border-radius}
.splash-pm .sp-logo{font:700 clamp(34px,5vw,64px)/1 var(--disp);letter-spacing:-2px;color:#fff;display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(10px) scale(.98);animation:sp-in .7s cubic-bezier(.2,.7,.2,1) .1s forwards}
.splash-pm .sp-logo i{width:12px;height:12px;border-radius:50%;background:#fff;display:inline-block;animation:sp-pulse 1s ease-in-out infinite}
.splash-pm .sp-sub{display:block;font:500 14px var(--ui);letter-spacing:.2px;color:rgba(255,255,255,.75);margin-top:12px;text-align:center}
@keyframes sp-in{to{opacity:1;transform:none}}
@keyframes sp-pulse{50%{transform:scale(.6);opacity:.6}}
[data-ws="plano-milionario"].carregando .side>*{opacity:0}
[data-ws="plano-milionario"].carregando main{opacity:0;transform:translateY(10px)}
[data-ws="plano-milionario"] .side>*{transition:opacity .45s ease .15s}
[data-ws="plano-milionario"] main{transition:opacity .6s ease .2s,transform .6s cubic-bezier(.2,.7,.2,1) .2s}

@media (max-width:900px){
  [data-ws="plano-milionario"] .app{grid-template-columns:1fr}
  [data-ws="plano-milionario"] .side{position:relative;top:0;height:auto}
  [data-ws="plano-milionario"] main{min-height:0;padding:24px 18px 48px}
}
@media (prefers-reduced-motion:reduce){.splash-pm{display:none}}

/* =====================================================================
   Barra lateral PRETA em glassmorphism (pedido de 03/11): substitui a versão laranja acima.
   ===================================================================== */
[data-ws="plano-milionario"]{
  --lateral:linear-gradient(170deg,rgba(38,27,23,.62) 0%,rgba(16,12,12,.70) 45%,rgba(10,8,8,.78) 100%);
  --pontos-esc:radial-gradient(rgba(255,255,255,.07) .9px, transparent 1.3px);
}
/* brilho laranja atrás da barra, para o vidro ter o que desfocar */
[data-ws="plano-milionario"] body{background:
  radial-gradient(360px 420px at 6% 22%,rgba(255,109,41,.38),transparent 70%),
  radial-gradient(300px 360px at 14% 92%,rgba(255,109,41,.22),transparent 70%),
  #050404}
[data-ws="plano-milionario"] .side{
  background:var(--pontos-esc) 0 0/7px 7px,var(--lateral);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.02),0 30px 70px -20px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%)}
[data-ws="plano-milionario"] .side::after{background:radial-gradient(rgba(255,109,41,.30) 1.4px,transparent 1.8px) 0 0/5px 5px;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,.35) 20%,transparent 42%);mask-image:linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,.35) 20%,transparent 42%)}
[data-ws="plano-milionario"] .side::before{background:radial-gradient(380px 240px at 18% -8%,rgba(255,140,80,.20),transparent 62%)}
[data-ws="plano-milionario"] .logo span{color:var(--ac);opacity:1}
[data-ws="plano-milionario"] .ws-btn small{color:var(--mut)}

[data-ws="plano-milionario"] .modo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
[data-ws="plano-milionario"] .modo .dot{background:var(--mut)}
[data-ws="plano-milionario"] .modo.warn .dot{background:var(--warn)}

[data-ws="plano-milionario"] .nav-i,[data-ws="plano-milionario"] .nav-s{color:rgba(255,255,255,.72)}
[data-ws="plano-milionario"] .nav-i .ic{color:rgba(255,255,255,.55)}
[data-ws="plano-milionario"] .nav-i:hover,[data-ws="plano-milionario"] .nav-s:hover{background:rgba(255,255,255,.06)}
[data-ws="plano-milionario"] .nav-i:hover .ic,[data-ws="plano-milionario"] .nav-i.act .ic{color:var(--ac)}
[data-ws="plano-milionario"] .sub-in{border-left-color:rgba(255,255,255,.10)}
[data-ws="plano-milionario"] .nav-s.mais{color:rgba(255,255,255,.45)}

/* liquid glass no escuro: vidro claro com brilho laranja embaixo */
[data-ws="plano-milionario"] .nav-i.on,[data-ws="plano-milionario"] .nav-s.on{
  background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 45%,rgba(255,109,41,.10) 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -14px 22px rgba(255,109,41,.16),0 12px 28px -10px rgba(255,109,41,.45),0 2px 10px rgba(0,0,0,.4)}
[data-ws="plano-milionario"] .nav-i.on::before,[data-ws="plano-milionario"] .nav-s.on::before{background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.18) 34%,rgba(255,255,255,0) 50%)}
[data-ws="plano-milionario"] .nav-i.on .ic{color:var(--ac)}
[data-ws="plano-milionario"] .side .badge{background:var(--ac);color:#fff}
[data-ws="plano-milionario"] .side .badge.soft{background:rgba(255,255,255,.12);color:#fff}

[data-ws="plano-milionario"] .pf-btn{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 14px 30px -12px rgba(0,0,0,.8)}
[data-ws="plano-milionario"] .pf-btn .av{background:var(--laranja);color:#fff}

/* splash: cortina preta de vidro com brilho laranja, que encolhe até a barra */
.splash-pm{background:
  radial-gradient(520px 420px at 50% 46%,rgba(255,109,41,.28),transparent 70%),
  var(--pontos-esc) 0 0/7px 7px,
  linear-gradient(170deg,#1A1311 0%,#0C0909 55%,#070505 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.splash-pm .sp-logo i{background:var(--ac)}
.splash-pm .sp-sub{color:var(--mut)}