/* site original copycores.com.br */
body{
  font-family: "Inter", sans-serif;
}
    [x-cloak]{ display:none !important; }

    /* =========================
       Paleta NEUTRA (sem azul)
       Light: fundo cinza claro, conteúdo branco
       Dark : cinza escuro, conteúdo cinza
       ========================= */
:root{
  color-scheme: light;

  /* 🔥 FUNDO MAIS BRANCO */
  --bg: #f5f5f5;

  /* 🔥 PARTES DE DESTAQUE MAIS ESCURAS */
  --hdr: #dcdcdc;        /* topo mais presente */
  --surface: #ffffff;
  --surface2: #ececec;   /* hover suave */
  --border: #d4d4d4;

  --text: #181818;
  --muted: #525252;
  --muted2:#707070;

  --input:#ffffff;
  --focus:#7a7a7a;
}
    .dark{
      color-scheme: dark;

      --bg: #171a1f;
      --hdr: #1b1f26;
      --surface: #1f242c;
      --surface2:#262c36;
      --border:#363e4a;

      --text:#f1f5f9;
      --muted:#c1c7d0;
      --muted2:#9aa3ad;

      --input:#171a1f;
      --focus:#b7bec8;

      --shadow-sm: 0 1px 0 rgba(255,255,255,.03);
      --shadow-md: 0 16px 54px rgba(0,0,0,.40);
      --shadow-lg: 0 20px 70px rgba(0,0,0,.55);
    }

    html{ font-size: 17px; }
    @media (max-width: 640px){ html{ font-size: 16px; } }

    body{ background: var(--bg); color: var(--text); }
    .dark body{ background: var(--bg); color: var(--text); }

    /* Brushes sutis no dark (bem leve) */
    .dark body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      background:
        radial-gradient(1100px 620px at 18% 18%, rgba(255,255,255,.045), transparent 55%),
        radial-gradient(900px 520px at 82% 72%, rgba(255,255,255,.030), transparent 55%);
    }
   body > *{
  position: relative;
}

    /* Header neutro + minimalista */
   .hdr{
  background: rgba(77, 77, 77, 0.92);
      border-bottom: 1px solid rgba(0,0,0,.08);
      backdrop-filter: blur(10px);
    }
    .dark .hdr{
      background: rgba(27,31,38,.92);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
.hover-soft{
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.hover-soft:hover{
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
}

.dark .hover-soft:hover{
  background: color-mix(in srgb, #ffffff 6%, transparent);
}
    /* Superfícies (cards/caixas) com SOMBRA no light */
    .surface{
      background: var(--surface);
      border: 1px solid color-mix(in srgb, var(--border) 95%, transparent);
      box-shadow: var(--shadow-md);
    }
    .dark .surface{
      background: var(--surface);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow-sm);
    }

    /* Hover neutro e elegante */
    .surface:hover{
      box-shadow: var(--shadow-lg);
      transition: box-shadow .18s ease, transform .18s ease;
    }

    /* Foco visível (sem azul) */
    :focus-visible{
      outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent);
      outline-offset: 3px;
      border-radius: 10px;
    }
/* Оригинальный сайт: copycores.com.br */
    /* Inputs (bem melhores) */
    .field{
      width:100%;
      border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
      border-radius: 10px; /* mais quadradinho */
      padding: 14px 14px;
      background: var(--input);
      color: var(--text);
      font-size: 1rem;
      box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
      transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }
    .dark .field{
      border-color: rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .field::placeholder{ color: color-mix(in srgb, var(--muted2) 88%, transparent); }
    .field:hover{ border-color: color-mix(in srgb, var(--focus) 55%, var(--border)); }
.field:focus{
  outline:none;
  border-color: var(--focus);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus) 18%, transparent);
  background: color-mix(in srgb, var(--surface2) 85%, #ffffff);
}

/* foco no tema dark (NUNCA mistura com branco) */
.dark .field:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus) 22%, transparent);
  background: var(--surface2); /* ou var(--surface) se quiser mais “chapado” */
}

    /* Select arrow neutro */
    select.field{
      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;
      padding-right:44px;
      background-image:
        linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--muted2) 90%, transparent) 50%),
        linear-gradient(135deg, color-mix(in srgb, var(--muted2) 90%, transparent) 50%, transparent 50%);
      background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
      background-size: 6px 6px, 6px 6px;
      background-repeat:no-repeat;
    }
    select.field option{ background: var(--surface); color: var(--text); }
    .dark select.field option{ background: var(--bg); color: var(--text); }

    /* Acessibilidade: reduz movimento */
    @media (prefers-reduced-motion: reduce){
      .anim-safe{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
      .animate-ping{ animation:none !important; }
    }

    /* Carrossel */
    .no-scrollbar::-webkit-scrollbar{ display:none; }
    .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
    .snap-x{ scroll-snap-type:x mandatory; }
    .snap-item{ scroll-snap-align:start; }

/* =========================
   Destaques (estilo Instagram)
   ========================= */

.cc-highlight{
  width: 86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  padding: 4px 2px;
  transition: transform .15s ease, opacity .15s ease;
}

.cc-highlight:hover{ opacity:.95; transform: translateY(-1px); }
.cc-highlight:active{ transform: translateY(0); }

/* anel (ring) neutro (sem cor forte) */
.cc-ring{
  display:block;
  padding: 2px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(90,90,90,.95),
    rgba(160,160,160,.75),
    rgba(110,110,110,.85)
  );
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}

.dark .cc-ring{
  background: linear-gradient(135deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,.10),
    rgba(255,255,255,.18)
  );
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.cc-inner{
  display:block;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.dark .cc-inner{
  background: color-mix(in srgb, var(--surface2) 85%, #000000);
  border: 1px solid rgba(255,255,255,.10);
}

.cc-avatar{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  display:block;
}

/* texto embaixo igual “Stories” */
.cc-label{
  max-width: 86px;
  font-size: .75rem;
  line-height: 1rem;
  text-align:center;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .cc-label{
  color: color-mix(in srgb, var(--muted) 95%, transparent);
}

/* foco bonito (acessível) */
.cc-highlight:focus-visible .cc-ring{
  outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent);
  outline-offset: 3px;
}
.cc-highlight{
  text-decoration: none;
  color: inherit;
}
.low-ram-device .backdrop-blur,
.low-ram-device .backdrop-blur-xl {
  backdrop-filter:none !important;
  background: rgba(255,255,255,0.95) !important;
}

.dark.low-ram-device .backdrop-blur,
.dark.low-ram-device .backdrop-blur-xl{
  background: rgba(20,20,20,0.95) !important;
}