/* Tema preto texturizado (mesma linguagem da SELOKO): fundo com grão, superfícies neutras e botões em vidro.
   Só estética — o layout é o do app.css. As cores da marca (amarelo, cinza, ✦) continuam as mesmas. */
:root{
  --preto:#0c0c0c;--s1:#131313;--s2:#1a1a1a;--s3:#222222;--s4:#2b2b2b;
  --linha:rgba(255,255,255,.075);--linha2:rgba(255,255,255,.13);
  --mut:#8f8e94;--fra:#5d5c61;
  --grao:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23g)' opacity='.07'/></svg>");
  --vidro:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  --vidroH:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  --vidroB:inset 0 1px 0 rgba(255,255,255,.13),0 10px 24px -14px rgba(0,0,0,.9);
  --amV:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 58%),#FFC401;
  --amB:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(120,80,0,.25),0 12px 26px -12px rgba(255,196,1,.7);
  /* tom de cada nível: página → sub-aba → o que abre por cima */
  --nv1:rgba(255,255,255,.022);--nv2:#141414;
}
body{background:var(--grao),var(--preto)}

/* moldura: tudo transparente em cima do grão */
.side,.top{background:transparent}
.nav>button:hover{background:rgba(255,255,255,.04)}
.nav>button.on{background:var(--vidro);box-shadow:var(--vidroB);border:1px solid var(--linha2);padding:10px 11px}
.side .lock{cursor:pointer}
.side .card .in{background:linear-gradient(0deg,rgba(12,12,12,.95),rgba(12,12,12,.2))}
.me:hover{background:rgba(255,255,255,.04)}

/* sub-aba aberta: a área de conteúdo sobe um tom */
.main{transition:background-color .25s}
body[data-sub]:not([data-sub="0"]) .main{background-color:var(--nv1)}
body[data-sub]:not([data-sub="0"]) .top{border-bottom-color:var(--linha2)}

/* vidro */
.btn{background:var(--vidro);border-color:var(--linha2);box-shadow:var(--vidroB);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-radius:999px}
.btn:hover{background:var(--vidroH)}
.btn.am{background:var(--amV);border-color:rgba(255,255,255,.32);box-shadow:var(--amB);color:var(--preto)}
.btn.am:hover{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 58%),#ffcf2e}
.btn.verde{background:linear-gradient(180deg,rgba(111,212,154,.18),rgba(111,212,154,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ib{background:var(--vidro);border-color:var(--linha2);box-shadow:var(--vidroB);border-radius:50%;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ib:hover{background:var(--vidroH)}
.tabs,.seg{background:var(--vidro);border-color:var(--linha2);box-shadow:var(--vidroB);border-radius:999px}
.tabs button{border-radius:999px}
.tabs button.on{background:var(--amV);box-shadow:var(--amB)}
.seg button.on{background:rgba(255,255,255,.1);color:var(--txt)}
.seg button:first-child{border-radius:999px 0 0 999px}.seg button:last-child{border-radius:0 999px 999px 0}
.srch{background:rgba(255,255,255,.035);border-color:var(--linha2);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* o que abre por cima (ficha, modal): um tom acima da página, com o mesmo grão */
.dim{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drw,.mod{background:var(--grao),var(--nv2);border-color:var(--linha2)}
.mod .pv{background:#0a0a0a}
.mi:hover,.mi:focus-within{background:rgba(255,255,255,.04)}
/* cabeçalho da ficha: sem a arte cortada; luz amarela suave no canto, alinhada à grade do texto */
.drw .hd>img{display:none}
.drw .hd{background:radial-gradient(120% 140% at 0% 0%,rgba(255,196,1,.075),transparent 55%)}
.drw .hd .tit{padding-right:52px}

/* celular e iPad (até 1000px o menu vira gaveta por cima): a gaveta precisa do fundo cheio, senão o conteúdo aparece através dela */
@media (max-width:1000px){
  .side{background:var(--grao),var(--preto);border-right-color:var(--linha2)}
  body.nav-aberta:after{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
}
/* toque (iPhone/iPad): o Safari dá zoom em campo com letra menor que 16px; e o campo de data nativo do iOS estoura a largura */
@media (pointer:coarse){
  input.campo,select.campo,textarea.campo,.srch input{font-size:16px}
}
input[type=date].campo,input[type=time].campo,input[type=datetime-local].campo{-webkit-appearance:none;appearance:none;width:100%;max-width:100%;display:block}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}