/* =============================
   CRIE DESIGN SYSTEM
   PRIVATE CORE
============================= */

/* CORES (alinhadas público/privado) */

:root{

  --cr-blue:#1976d2;
  --cr-green:#2e7d32;

  --cr-text:#0f172a;
  --cr-muted:#64748b;

  --cr-bg:#f8fafc;

  --cr-radius:18px;

  --cr-shadow-sm:
    0 6px 18px rgba(15,23,42,.06);

  --cr-shadow-md:
    0 18px 48px rgba(15,23,42,.10);

}

/* BODY PRIVATE */

body{
  background:var(--cr-bg);
  color:var(--cr-text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
}

/* HEADER PRO */

.cr-header-pro{
  position:sticky;
  top:0;
  z-index:1000;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  background:
    radial-gradient(900px 240px at 18% 0%, rgba(25,118,210,.10), transparent 60%),
    radial-gradient(900px 240px at 80% 10%, rgba(46,125,50,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));

  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
}



.cr-header-inner{

  max-width:1200px;
  margin:auto;
  padding:14px 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Marca */

/* Brand com logo (igual público) */
.cr-brand{ display:flex; align-items:center; text-decoration:none; }
.cr-brand-logo{
  height: 38px;
  width: auto;
  display:block;
}

.cr-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.85);
  white-space:nowrap;
}


.cr-brand-dot{

  width:10px;
  height:10px;
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--cr-green),
      var(--cr-blue)
    );
}

/* NAV */

.cr-nav{

  display:flex;
  gap:18px;
}

.cr-nav a{

  text-decoration:none;
  font-weight:800;
  font-size:14px;

  color:rgba(15,23,42,.7);

  transition:.15s;
}

.cr-nav a:hover{

  color:var(--cr-blue);
}

/* Avatar */

.cr-avatar{

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  background:white;
  border:1px solid rgba(15,23,42,.12);

  box-shadow:var(--cr-shadow-sm);

  text-decoration:none;
}

/* ======================================
   Dropdown (header PRO) – sem Bootstrap
====================================== */

.cr-header-pro .dropdown{ position: relative; }

.cr-header-pro .dropdown-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;

  display: none;              /* <<<<<< importante */
  padding: 8px;
  border-radius: 14px;

  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: var(--cr-shadow-md);

  z-index: 2000;
}

.cr-header-pro .dropdown.is-open .dropdown-menu{ display:block; }

.cr-header-pro .dropdown-item{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 9px 10px;
  border-radius: 12px;
  text-decoration:none;

  color: rgba(15,23,42,.84);
  font-weight: 900;
  font-size: 13px;
}

.cr-header-pro .dropdown-item:hover{
  background: rgba(25,118,210,.08);
  color: rgba(15,23,42,.92);
}

.cr-header-pro .dropdown-item .material-icons{
  font-size: 18px;
  opacity: .9;
}

/* Responsivo: some nav no mobile, fica só logo + avatar */
@media (max-width: 820px){
  .cr-nav{ display:none; }
  .cr-header-inner{ padding: 10px 14px; }
  .cr-brand-logo{ height: 34px; }
}

.material-icons{
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Base */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.62rem 1rem;
  border-radius:14px;
  font-weight:900;
  font-size:14px;
  line-height:1;
  border:1px solid transparent;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  user-select:none;
  white-space:nowrap;
}

.btn:active{ transform:translateY(1px); }
.btn:hover{ box-shadow:0 10px 22px rgba(2,6,23,.10); }

/* Azul (principal) */

:root{
  /* Marca (você já tem) */
  --cr-blue:#1976d2;
  --cr-green:#2e7d32;

  /* ===== Crie Button System ===== */

  /* Texto */
  --cr-btn-text: rgba(15,23,42,.92);
  --cr-btn-text-on: #ffffff;

  /* Superfícies */
  --cr-btn-surface: rgba(255,255,255,.92);
  --cr-btn-border: rgba(15,23,42,.14);

  /* Acentos “tech” (mais sofisticados que “azul vivo”) */
  --cr-accent: var(--cr-blue);
  --cr-accent-2: #5b7cfa;      /* azul violeta leve (inovação) */
  --cr-success: var(--cr-green);

  /* Sombras */
  --cr-btn-shadow: 0 10px 26px rgba(2,6,23,.08);
  --cr-btn-shadow-soft: 0 8px 18px rgba(2,6,23,.06);

  /* Foco (acessibilidade) */
  --cr-focus: 0 0 0 4px rgba(25,118,210,.18);

  /* Raio */
  --cr-btn-radius: 16px;
}

/* =============================
   CRIE BUTTON SYSTEM
============================= */

.btn-crie{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--cr-btn-radius);
  padding: .72rem 1.05rem;
  font-weight: 950;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -.2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  text-decoration: none;
  user-select: none;
  white-space: nowrap;

  transition:
    transform .12s ease,
    box-shadow .14s ease,
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    opacity .14s ease;
}

/* Ícone dentro do botão (emoji ou material icon) */
.btn-crie .material-icons{
  font-size: 18px;
  line-height: 1;
}

/* Hover/active */
.btn-crie:hover{ box-shadow: var(--cr-btn-shadow-soft); }
.btn-crie:active{ transform: translateY(1px); }

/* Focus acessível */
.btn-crie:focus{ outline: none; }
.btn-crie:focus-visible{ box-shadow: var(--cr-btn-shadow-soft), var(--cr-focus); }

/* Disabled */
.btn-crie.is-disabled,
.btn-crie[aria-disabled="true"],
.btn-crie:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Tamanhos */
.btn-crie--sm{ padding: .55rem .85rem; font-size: 13px; border-radius: 14px; }
.btn-crie--md{ padding: .72rem 1.05rem; font-size: 14px; border-radius: 16px; }
.btn-crie--lg{ padding: .88rem 1.20rem; font-size: 15px; border-radius: 18px; }


/* Primário Tech (CTA) */
.btn-crie--primary{
  color: var(--cr-btn-text-on);
  border-color: rgba(25,118,210,.30);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(25,118,210,.92), rgba(20,90,168,.96));
  box-shadow: 0 14px 34px rgba(25,118,210,.18);
}

.btn-crie--primary:hover{
  box-shadow: 0 18px 44px rgba(25,118,210,.22);
  border-color: rgba(25,118,210,.38);
  opacity: .98;
}

.btn-crie--secondary{
  background: var(--cr-btn-surface);
  color: var(--cr-btn-text);
  border-color: var(--cr-btn-border);
}

.btn-crie--secondary:hover{
  background: #fff;
  border-color: rgba(15,23,42,.20);
}

.btn-crie--soft{
  background: rgba(25,118,210,.10);
  color: rgba(15,23,42,.92);
  border-color: rgba(25,118,210,.18);
}

.btn-crie--soft:hover{
  background: rgba(25,118,210,.14);
  border-color: rgba(25,118,210,.26);
}

.cr-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:18px;
  align-items:start;
}

@media(max-width:1000px){
  .cr-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   MY POSTS — PAINEL (Tech Eco / Cyberpunk sofisticado)
   (page-scope: .my-posts)
========================================================= */

:root{
  /* acentos “cyber” discretos (não neon gritante) */
  --cr-cyber: rgba(91,124,250,.95);     /* azul-violeta */
  --cr-eco: rgba(46,125,50,.95);        /* verde */
  --cr-glow: 0 0 0 4px rgba(91,124,250,.14), 0 18px 50px rgba(46,125,50,.08);
  --cr-surface: rgba(255,255,255,.86);
  --cr-surface-2: rgba(255,255,255,.72);
  --cr-border: rgba(15,23,42,.10);
}

/* Page wrap */
.my-posts{
  padding: 14px 0 26px;
}

/* Hero (topo do painel) */
.my-posts-hero{
  position: relative;
  border-radius: calc(var(--cr-radius) + 6px);
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(1200px 280px at 12% -10%, rgba(91,124,250,.14), transparent 60%),
    radial-gradient(1000px 280px at 88% 0%, rgba(46,125,50,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: var(--cr-shadow-md);
  overflow: hidden;
  padding: 16px 16px;
}

.my-posts-hero__row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.my-posts-hero__title{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.2px;
}

.my-posts-hero__subtitle{
  margin: 6px 0 0;
  color: rgba(15,23,42,.70);
  font-weight: 700;
  font-size: 13px;
  max-width: 64ch;
}

.my-posts-hero__actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Cards base */
.cr-card{
  border-radius: var(--cr-radius);
  border: 1px solid var(--cr-border);
  background: var(--cr-surface);
  box-shadow: var(--cr-shadow-sm);
  overflow:hidden;
}

.cr-card--soft{
  background: var(--cr-surface-2);
}

.cr-card__head{
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.cr-card__title{
  margin:0;
  font-weight: 950;
  letter-spacing: -.2px;
  font-size: 13px;
}

.cr-card__meta{
  margin:0;
  color: rgba(15,23,42,.68);
  font-weight: 700;
  font-size: 12px;
}

.cr-card__body{
  padding: 12px 14px 14px;
}

/* Chips (botões filtro) */
.cr-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.cr-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.88);
  color: rgba(15,23,42,.86);
  font-weight: 900;
  font-size: 13px;
  text-decoration:none;
  transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
}

.cr-chip:hover{
  box-shadow: var(--cr-shadow-sm);
  border-color: rgba(91,124,250,.22);
}

.cr-chip.is-active{
  border-color: rgba(91,124,250,.34);
  background:
    radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(91,124,250,.18), rgba(46,125,50,.10));
  box-shadow: var(--cr-glow);
}

/* badge count dentro do chip */
.cr-chip__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 24px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 950;
  font-size: 12px;
}

/* KPIs rápidos */
.cr-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px){
  .cr-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .cr-kpis{ grid-template-columns: 1fr; }
}

.cr-kpi{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  padding: 10px 12px;
  box-shadow: var(--cr-shadow-sm);
}

.cr-kpi__label{
  margin:0;
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,.66);
}

.cr-kpi__value{
  margin: 6px 0 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.3px;
}

.cr-kpi__hint{
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.62);
}

/* Lista de posts “painel” */
.posts-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.post-row{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  padding: 12px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  box-shadow: var(--cr-shadow-sm);
}

.post-row__main{ min-width: 0; }
.post-row__title{
  margin:0;
  font-weight: 950;
  font-size: 14px;
  letter-spacing: -.2px;
  color: rgba(15,23,42,.92);
}

.post-row__meta{
  margin: 6px 0 0;
  color: rgba(15,23,42,.64);
  font-weight: 800;
  font-size: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.post-row__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Sidebar blocks */
.side-stack{ display:flex; flex-direction:column; gap:10px; }

/* “Eco-cyber” divisor */
.cr-divider{
  height:1px;
  background: linear-gradient(90deg, rgba(91,124,250,.0), rgba(91,124,250,.30), rgba(46,125,50,.30), rgba(46,125,50,.0));
  margin: 12px 0;
}

/* =========================================================
   Tech Eco Cyber — micro-polish (sem neon)
   (não quebra nada, só dá “assinatura”)
========================================================= */

/* hero com textura sutil (scanline suave) */
.my-posts-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(15,23,42,.00) 0px,
      rgba(15,23,42,.00) 7px,
      rgba(15,23,42,.035) 8px
    );
  mix-blend-mode: multiply;
}

/* cards com “borda viva” no hover */
.cr-card{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.cr-card:hover{
  border-color: rgba(91,124,250,.22);
  box-shadow: var(--cr-shadow-md);
}

/* foco/seleção mais “tech” sem estourar */
.cr-chip:focus-visible,
.btn-crie:focus-visible{
  outline: none;
  box-shadow: var(--cr-btn-shadow-soft), var(--cr-focus);
}

/* rows com hover de precisão */
.post-row{
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.post-row:hover{
  border-color: rgba(46,125,50,.20);
  box-shadow: var(--cr-shadow-md);
  transform: translateY(-1px);
}

/* =========================================================
   ACCOUNT — personal.php (premium / unicorn)
   Escopo: .acc-wrap
========================================================= */

:root{
  --acc-surface: rgba(255,255,255,.86);
  --acc-surface-2: rgba(255,255,255,.74);
  --acc-border: rgba(15,23,42,.10);
  --acc-ink: rgba(15,23,42,.92);
  --acc-muted: rgba(15,23,42,.62);
  --acc-focus: 0 0 0 4px rgba(25,118,210,.16);
}

/* container geral */
.acc-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px 28px;
}

/* HERO */
.acc-hero{
  border-radius: calc(var(--cr-radius) + 6px);
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(1200px 280px at 12% -10%, rgba(91,124,250,.14), transparent 60%),
    radial-gradient(1000px 280px at 88% 0%, rgba(46,125,50,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  box-shadow: var(--cr-shadow-md);
  overflow:hidden;
  padding: 14px 14px;
  margin-bottom: 14px;
  position: relative;
}

.acc-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(15,23,42,.00) 0px,
      rgba(15,23,42,.00) 7px,
      rgba(15,23,42,.035) 8px
    );
  mix-blend-mode: multiply;
}

.acc-hero__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.acc-hero__title{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.2px;
  color: var(--acc-ink);
}

.acc-hero__sub{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.68);
  max-width: 68ch;
}

.acc-hero__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.acc-hero__hint{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* GRID */
.acc-grid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
  align-items:start;
}

@media (max-width: 980px){
  .acc-grid{ grid-template-columns: 1fr; }
}

/* CARD */
.acc-card{
  border-radius: var(--cr-radius);
  border: 1px solid var(--acc-border);
  background: var(--acc-surface);
  box-shadow: var(--cr-shadow-sm);
  overflow:hidden;
}

.acc-card__head{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.acc-card__title{
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.2px;
  color: var(--acc-ink);
}

.acc-card__sub{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.62);
  max-width: 62ch;
}

/* borda “viva” no hover */
.acc-card{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.acc-card:hover{
  border-color: rgba(91,124,250,.22);
  box-shadow: var(--cr-shadow-md);
}

/* sticky avatar no desktop */
@media (min-width: 981px){
  .acc-card--sticky{ position: sticky; top: calc(var(--cr-topbar-h, 72px) + 14px); }
}

/* Badge */
.acc-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.05);
  font-size: 11px;
  font-weight: 950;
  color: rgba(15,23,42,.84);
  white-space:nowrap;
}
.acc-dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--cr-green), var(--cr-blue));
}

/* Avatar */
.acc-avatar{
  padding: 14px;
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items:start;
}

@media (max-width: 520px){
  .acc-avatar{ grid-template-columns: 1fr; }
}

.acc-avatar__preview{
  width: 140px;
  height: 140px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.88);
  box-shadow: var(--cr-shadow-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.acc-avatar__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acc-avatar__placeholder{
  display:flex;
  flex-direction:column;
  gap: 6px;
  align-items:center;
  justify-content:center;
  color: rgba(15,23,42,.62);
  font-weight: 900;
  font-size: 12px;
}
.acc-avatar__placeholder .material-icons{
  font-size: 30px;
  opacity:.85;
}

.acc-avatar__uploader{
  min-width: 0;
}

.acc-minihelp{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* Fields */
.acc-fields{
  padding: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .acc-fields{ grid-template-columns: 1fr; }
}

.acc-field--full{ grid-column: 1 / -1; }

.acc-label{
  display:block;
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,.78);
  margin-bottom: 6px;
}

.acc-req{
  color: rgba(220,38,38,.92);
  font-weight: 950;
}

.acc-input,
.acc-textarea{
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(2,6,23,.04);
  padding: 12px 12px;
  font-weight: 850;
  color: rgba(15,23,42,.92);
  outline: none;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}

.acc-textarea{ padding: 12px 12px; resize: vertical; }

.acc-input:focus,
.acc-textarea:focus{
  border-color: rgba(25,118,210,.28);
  box-shadow: 0 10px 26px rgba(2,6,23,.06), var(--acc-focus);
}

.acc-hint{
  margin-top: 7px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

.acc-divider{
  height: 1px;
  background: linear-gradient(90deg, rgba(91,124,250,.0), rgba(91,124,250,.30), rgba(46,125,50,.30), rgba(46,125,50,.0));
  margin: 10px 0;
}

/* Roles (pills) */
.acc-checkgrid{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}

.acc-check{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 26px rgba(2,6,23,.04);
  cursor: pointer;
  user-select:none;
  font-weight: 900;
  color: rgba(15,23,42,.86);
  transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
}

.acc-check:hover{
  border-color: rgba(91,124,250,.22);
  box-shadow: var(--cr-shadow-sm);
  transform: translateY(-1px);
}

.acc-check input{
  width: 18px;
  height: 18px;
  accent-color: var(--cr-blue);
}

.acc-check--row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 26px rgba(2,6,23,.04);
}

/* Actions */
.acc-actions{
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.acc-muted{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* =========================================================
   ACCOUNT UPDATE (update.php) — premium
========================================================= */

.cr-account{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 14px 28px;
}

.cr-account-shell{
  margin-top: 14px;
  overflow: hidden;
}

/* Hero premium */
.cr-account-hero{
  border-bottom: 1px solid rgba(15,23,42,.08);
  padding: 14px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;

  background:
    radial-gradient(1200px 260px at 14% -10%, rgba(25,118,210,.14), transparent 60%),
    radial-gradient(1000px 260px at 86% 0%, rgba(46,125,50,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
}

.cr-account-hero__title{
  margin:0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.2px;
  color: rgba(15,23,42,.92);
}

.cr-account-hero__sub{
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.70);
  max-width: 76ch;
}

.cr-account-hero__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.cr-account-hero__hint{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* Ethics block */
.cr-account-ethics{
  margin: 12px 14px 0;
  border-radius: calc(var(--cr-radius) - 2px);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--cr-shadow-sm);
  overflow:hidden;
}

.cr-account-ethics__head{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.cr-account-ethics__title{
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.2px;
  color: rgba(15,23,42,.92);
}

.cr-account-ethics__body{
  padding: 12px 12px 12px;
  color: rgba(15,23,42,.78);
  font-size: 13px;
  font-weight: 750;
  display:grid;
  gap: 10px;
}

.cr-account-ethics__list{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap: 6px;
}

/* Tabs */
.cr-account-tabs{
  margin: 12px 14px 0;
}

.acc-tabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.acc-tab{
  appearance: none;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.84);
  color: rgba(15,23,42,.84);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  font-size: 13px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
}

.acc-tab:hover{
  box-shadow: var(--cr-shadow-sm);
  border-color: rgba(25,118,210,.20);
  transform: translateY(-1px);
}

.acc-tab.is-active{
  border-color: rgba(25,118,210,.28);
  background:
    radial-gradient(120% 180% at 12% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(25,118,210,.16), rgba(46,125,50,.10));
  box-shadow:
    0 0 0 4px rgba(25,118,210,.10),
    0 18px 50px rgba(46,125,50,.08);
}

.cr-account-panes{
  padding: 12px 14px 14px;
}

/* Notes */
.cr-account-note{
  margin-top: 12px;
  border-radius: var(--cr-radius);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  box-shadow: var(--cr-shadow-sm);
  padding: 12px 12px;
}

.cr-account-note__title{
  font-size: 13px;
  font-weight: 950;
  color: rgba(15,23,42,.92);
}

.cr-account-note__sub{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.64);
}

/* =========================================================
   ACCOUNT VALIDATION (JS) — premium
   classes: .is-invalid, .acc-invalid
========================================================= */

.acc-field{ position: relative; }

/* input inválido */
.acc-input.is-invalid,
.acc-textarea.is-invalid,
input.is-invalid,
textarea.is-invalid{
  border-color: rgba(220,38,38,.38) !important;
  box-shadow:
    0 10px 26px rgba(2,6,23,.06),
    0 0 0 4px rgba(220,38,38,.12) !important;
}

/* foco em inválido */
.acc-input.is-invalid:focus,
.acc-textarea.is-invalid:focus,
input.is-invalid:focus,
textarea.is-invalid:focus{
  outline: none;
}

/* mensagem de erro */
.acc-invalid{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(220,38,38,.20);
  background: rgba(220,38,38,.08);

  color: rgba(127,29,29,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -.1px;

  display:flex;
  align-items:flex-start;
  gap: 10px;
}

/* ícone leve sem depender de libs */
.acc-invalid::before{
  content: "error";
  font-family: 'Material Icons';
  font-size: 18px;
  line-height: 1;
  opacity: .95;
  margin-top: 1px;
}

/* hint neutro (quando existir) */
.acc-hint{
  margin-top: 7px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* botão salvar quando travado */
#btnSaveActiveTab.is-disabled{
  opacity: .72;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ACC BUTTONS (password.php / address.php)
   Mantém compatibilidade com forms que usam .acc-btn
========================================================= */

.acc-btn{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 16px;
  padding: .70rem 1.00rem;
  font-weight: 950;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -.2px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  text-decoration: none;
  user-select: none;
  white-space: nowrap;

  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.92);

  transition:
    transform .12s ease,
    box-shadow .14s ease,
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    opacity .14s ease;
}

.acc-btn:hover{
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  border-color: rgba(15,23,42,.20);
}

.acc-btn:active{ transform: translateY(1px); }

.acc-btn:focus{ outline: none; }
.acc-btn:focus-visible{
  box-shadow: 0 10px 22px rgba(2,6,23,.10), 0 0 0 4px rgba(25,118,210,.18);
}

.acc-btn--primary{
  color: #fff;
  border-color: rgba(25,118,210,.30);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(25,118,210,.92), rgba(20,90,168,.96));
  box-shadow: 0 14px 34px rgba(25,118,210,.18);
}

.acc-btn--primary:hover{
  box-shadow: 0 18px 44px rgba(25,118,210,.22);
  border-color: rgba(25,118,210,.38);
  opacity: .98;
}

.btn-crie{
	border-radius:18px;
	font-weight:900;
	letter-spacing:.2px;
	box-shadow: var(--cr-shadow-sm);
	transition: all .14s ease;
}

.btn-crie:hover{
	transform: translateY(-1px);
	box-shadow: var(--cr-shadow-md);
}

.form-control{
	border-radius:14px;
	border:1px solid rgba(15,23,42,.08);
	box-shadow: 0 4px 12px rgba(15,23,42,.04);
}

/* ======================================
   LOGIN / ACCESS REFINEMENT
====================================== */

.form-control{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}

.form-control:focus{
  border-color: rgba(25,118,210,.24);
  box-shadow:
    0 8px 24px rgba(15,23,42,.06),
    0 0 0 4px rgba(25,118,210,.10);
}

.btn-crie{
  border-radius:18px;
  font-weight:950;
  letter-spacing:.1px;
  box-shadow: var(--cr-shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.btn-crie:hover{
  transform: translateY(-1px);
  box-shadow: var(--cr-shadow-md);
}

.custom-control-label{
  font-weight: 800;
  color: rgba(15,23,42,.74);
}

.card-footer a{
  font-weight: 800;
}