/* ===========================================================
   [DG-PRODUÇÕES] BASE STYLES - Shared across all pages
   Este arquivo contém todos os estilos compartilhados entre
   index.html, admin.html, downloads.html e reset.html
  =========================================================== */

:root{
  --bg:#0b0f14;
  --panelSolid1:rgba(9, 9, 11, 0.5);
  --panelSolid2:rgba(24, 24, 27, 0.8);

  --text:#e7ebf3;
  --muted:#9aa6b2;
  --muted-foreground: var(--muted);
  --foreground: var(--text);

  --blue:#3aa0ff;
  --blue2:#2f7cff;

  --border: #3f3f46;
  --shadow: rgba(0,0,0,.55);

  --yellow:#ffe39a;
  --good:#19ff9a;
  --bad:#ff5c7a;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

/* =========================================================
  [1] FUNDO - NOTAS/Acordes (fica sempre em todas telas)
========================================================== */
#bgNotes{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 55%, transparent 85%);
  mask-image: radial-gradient(circle at 50% 35%, #000 55%, transparent 85%);
}
.bg-note{
  position:absolute;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(190,230,255,0.32);
  text-shadow: 0 0 14px rgba(58,160,255,0.22);
  user-select:none;
  animation: bgFloat var(--dur) ease-in-out infinite;
  transform: translateZ(0);
}
@keyframes bgFloat{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}

/* =========================================================
  [2] LOADER - OVERLAY
========================================================== */
#preload{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(900px 500px at 50% 40%, rgba(58,160,255,.14), transparent 65%),
    radial-gradient(700px 400px at 70% 20%, rgba(47,124,255,.10), transparent 60%),
    var(--bg);
  transition: opacity .45s ease, transform .45s ease;
}
#preload.hide{
  opacity:0;
  transform: scale(1.01);
  pointer-events:none;
}

.pre-card{
  width:min(760px, 92vw);
  border:1px solid #3f3f46;
  background: linear-gradient(to bottom right, rgba(9, 9, 11, 0.5), rgba(24, 24, 27, 0.8));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px var(--shadow);
  border-radius:16px;
  padding:24px 22px 18px;
  position:relative;
  overflow:hidden;
}
.pre-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(63, 63, 70, .08) 0px,
      rgba(63, 63, 70, .08) 1px,
      transparent 1px,
      transparent 22px
    );
  opacity:.18;
  transform: rotate(-8deg);
  pointer-events:none;
}
.pre-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
}
.pre-title{
  font-weight:900;
  letter-spacing:.6px;
  font-size: 22px;
  margin:0 0 6px;
}
.pre-sub{
  color:var(--muted);
  margin:0 0 14px;
  font-size:14px;
}
.pre-meta{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.bar{
  flex:1;
  height:10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.bar > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(58,160,255,.9), rgba(47,124,255,.9));
  box-shadow: 0 0 18px rgba(58,160,255,.35);
  border-radius:999px;
  transition: width .05s linear;
}
.pct{
  min-width:52px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  color:#d7e7ff;
  font-weight:800;
}
.tip{
  color: rgba(154,166,178,.85);
  font-size:12px;
  margin-top:10px;
}
.kbstage{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:8px;
}
.kb-float{
  width:74px;
  height:auto;
  border-radius:16px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    0 0 18px rgba(58,160,255,.22);
  filter: drop-shadow(0 0 12px rgba(58,160,255,.22));
  opacity:.96;
  user-select:none;
  pointer-events:none;
  transform: translateZ(0);
}
.kb-1{ animation: floatLine 2.7s ease-in-out infinite; }
.kb-2{ animation: floatLine 3.0s ease-in-out infinite; animation-delay:.15s; }
.kb-3{ animation: floatLine 3.3s ease-in-out infinite; animation-delay:.3s; }
@keyframes floatLine{
  0%,100%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-10px) scale(1.02); }
}

/* =========================================================
  [3] APP
========================================================== */
#app{ opacity:0; transition: opacity .35s ease; position:relative; z-index:2; }
#app.ready{ opacity:1; }

/* =========================================================
  [4] TOPBAR
========================================================== */
.topbar{
  position: sticky;
  top:0;
  z-index: 20;
  background: rgba(11,15,20,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.topbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  font-weight:900;
  letter-spacing:.6px;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1;
  white-space:nowrap;
}
.brand .dg{
  color:#5bb6ff;
  font-size:26px;
  text-shadow:
    0 0 8px rgba(91,182,255,.95),
    0 0 18px rgba(58,160,255,.75),
    0 0 34px rgba(58,160,255,.45);
  animation: dgGlow 2.2s ease-in-out infinite;
  display:inline-block;
  transform: translateY(1px);
}
.brand .rest{ display:inline-block; transform: translateY(1px); }
@keyframes dgGlow{
  0%,100%{ filter: brightness(1.05); }
  50%{ filter: brightness(1.55); }
}

.nav{
  display:flex;
  gap:8px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px;
}
.nav button{
  appearance:none;
  border:0;
  background:transparent;
  color:#cfe6ff;
  padding:8px 14px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  opacity:.78;
}
.nav button.active{
  background: rgba(58,160,255,.22);
  opacity:1;
}
.nav button.locked{
  opacity:.35;
  cursor:not-allowed;
}

.rightbox{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}
.helloName{
  font-weight:900;
  color: var(--yellow);
  text-shadow: 0 0 14px rgba(255,227,154,.22);
  display:none;
}

.btn-login{
  appearance:none;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(58,160,255,.40), rgba(47,124,255,.24));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

/* =========================================================
  [5] PÁGINAS
========================================================== */
.page{
  display:none;
  max-width:1100px;
  margin:38px auto;
  padding:0 18px;
}
.page.active{ display:block; }
/* Admin page: full width, no box constraint */
#admin.page{
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
}

/* =========================================================
  [6] CARD (OPACIDADE 100%)
========================================================== */
  .panel-card{
  border-radius:16px;
  border:1px solid #3f3f46;
  background: linear-gradient(to bottom right, rgba(9, 9, 11, 0.5), rgba(24, 24, 27, 0.8));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px var(--shadow);
  padding:24px;
  position:relative;
  overflow:hidden;
  }
  .panel-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
  repeating-linear-gradient(
  135deg,
  rgba(63, 63, 70, .08) 0px,
  rgba(63, 63, 70, .08) 1px,
  transparent 1px,
  transparent 22px
  );
  opacity:.18;
  transform: rotate(-8deg);
  pointer-events:none;
  }
.panel-card > *{ position:relative; }

h1,h2{ margin:0 0 10px; }
p{ margin:0; color: var(--muted); line-height:1.55; }

/* =========================================================
  [7] MODAL AUTH
========================================================== */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index: 50;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.modal-backdrop.show{ display:flex; }

.modal{
  width:min(720px, 96vw);
  border-radius:20px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #111722, #0b0f14);
  box-shadow: 0 22px 80px rgba(0,0,0,.7);
  position:relative;
  overflow:hidden;
}
.modal::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(58,160,255,.14) 0px,
      rgba(58,160,255,.14) 1px,
      transparent 1px,
      transparent 22px
    );
  opacity:.33;
  transform: rotate(-8deg);
  pointer-events:none;
}
.modal-inner{ position:relative; padding:18px 18px 16px; }

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.modal-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.4px;
  font-size:18px;
}
.modal-title .dg{
  color:#5bb6ff;
  text-shadow: 0 0 10px rgba(58,160,255,.75);
  font-size:20px;
}
.modal-close{
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:#cfe6ff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.mode-tabs{
  display:flex;
  gap:10px;
  margin:12px 0 14px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:8px;
  border-radius:999px;
}
.mode-tabs button{
  flex:1;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:transparent;
  color:#cfe6ff;
  padding:10px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  opacity:.75;
}
.mode-tabs button.active{
  background: rgba(58,160,255,.22);
  opacity:1;
}

.form{
  display:grid;
  gap:10px;
  margin-top:6px;
}
.field label{
  display:block;
  font-size:12px;
  color: rgba(154,166,178,.92);
  margin:8px 0 6px;
  font-weight:800;
  letter-spacing:.3px;
}
.field input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(58,160,255,.22);
  background: rgba(255,255,255,.03);
  color:#e7ebf3;
  outline:none;
}
.field input:focus{
  border-color: rgba(58,160,255,.45);
  box-shadow: 0 0 0 4px rgba(58,160,255,.12);
}

.modal-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.btn-primary{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(58,160,255,.28);
  background: linear-gradient(180deg, rgba(58,160,255,.34), rgba(47,124,255,.20));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.btn-secondary{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(58,160,255,.22);
  background: rgba(255,255,255,.03);
  color:#cfe6ff;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.googleMark{ width:18px;height:18px; display:inline-block; }

.modal-note{
  margin-top:10px;
  font-size:12px;
  color: rgba(154,166,178,.92);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.link{
  color:#7cc6ff;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
}
.msg{
  margin-top:10px;
  font-size:12px;
  font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(58,160,255,.18);
  background: rgba(255,255,255,.03);
  color:#cfe6ff;
  display:none;
}
.msg.show{ display:block; }
.msg.ok{ border-color: rgba(25,255,154,.22); color: rgba(180,255,224,.98); }
.msg.bad{ border-color: rgba(255,92,122,.26); color: rgba(255,202,212,.98); }

#fpMsg.msg.bad{
  display:block;
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 10px;
  text-align: center;
  color: rgba(255,92,122,1);
  font-size: 12.5px;
  font-weight: 900;
}

/* =========================================================
  [8] PERFIL
========================================================== */
.profile-wrap{ display:grid; gap:16px; }
.dvdBanner{
  height:150px;
  border-radius:18px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #0e1522, #090d12);
  overflow:hidden;
  position:relative;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.dvdText{
  position:absolute;
  left:20px; top:20px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  font-weight:1000;
  letter-spacing:.8px;
  text-transform:uppercase;
  user-select:none;
  will-change: transform;
}

.pf-card-inner {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background-color: var(--panelSolid1);
}
.pf-card-content {
  position: relative;
  padding: 2rem 1.5rem 1.5rem;
}
.pf-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pf-avatar-btn {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  background: none;
  padding: 0;
  outline: none;
}
.pf-avatar-btn:focus-visible {
  box-shadow: 0 0 0 2px #10b981;
}
.pf-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 4px var(--panelSolid1);
}
.pf-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.pf-avatar-btn:hover .pf-avatar-overlay {
  background-color: rgba(0,0,0,0.4);
}
.pf-avatar-overlay svg {
  width: 20px; height: 20px;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pf-avatar-btn:hover .pf-avatar-overlay svg {
  opacity: 1;
}
.pf-avatar-status {
  position: absolute;
  bottom: 0; right: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 0 2px var(--panelSolid1);
}
.pf-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.pf-info { flex: 1; min-width: 0; }
.pf-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f4f4f5;
  line-height: 1.4;
}
.pf-role {
  color: #a1a1aa;
  font-size: 0.95rem;
  line-height: 1.5;
}
.pf-divider {
  height: 1px;
  background-color: var(--border);
  margin: 1.5rem 0;
}
.pf-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pf-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
  text-decoration: none;
  color: inherit;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}
.pf-menu-item:hover {
  background-color: rgba(39,39,42,0.5);
}
.pf-menu-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pf-menu-left svg {
  width: 16px; height: 16px;
  color: #a1a1aa;
}
.pf-menu-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #f4f4f5;
}
.pf-menu-right {
  display: flex;
  align-items: center;
}
.pf-menu-value {
  font-size: 0.875rem;
  color: #71717a;
  margin-right: 0.5rem;
}
.pf-menu-right svg {
  width: 16px; height: 16px;
  color: #a1a1aa;
}
.pf-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pf-dot--gray  { background-color: #71717a; }
.pf-dot--green  { background-color: #22c55e; }
.pf-dot--yellow { background-color: #eab308; }
.pf-dot--red    { background-color: #ef4444; }
.pf-msg {
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* ====== RESPONSIVE: TABLET ====== */
@media (max-width: 760px){
  .kb-float{ width:70px; }
  .kbstage{ gap:14px; }
  .pre-card{ padding:20px 18px 16px; }
  .brand .dg{ font-size:24px; }
  .grid2{ grid-template-columns: 1fr; }
  .page{ padding:0 12px; margin:24px auto; }
  .panel-card{ padding:18px 16px; }
}

/* ====== RESPONSIVE: MOBILE ====== */
@media (max-width: 640px){
  /* Topbar: stack brand + nav + right */
  .topbar-inner{
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }
  .brand{ font-size:14px; gap:6px; }
  .brand .dg{ font-size:20px; }
  .brand .rest{ font-size:12px; }

  /* Nav pills: scroll horizontal */
  .menu-nav{
    order: 3;
    width: 100%;
    padding: 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .menu-nav::-webkit-scrollbar{ display:none; }
  .menu-nav .menu-list{
    gap: 0.15rem;
    flex-wrap: nowrap;
  }
  .menu-nav .menu-link{
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .menu-nav .menu-link span.label{ display:none; }
  .menu-nav .menu-link .menu-icon{ width:1.1rem; height:1.1rem; }

  /* Rightbox: bell + name */
  .rightbox{ gap:6px; }
  .helloName{ font-size:12px; max-width:100px; overflow:hidden; text-overflow:ellipsis; }
  .btn-login{ padding:6px 12px; font-size:12px; }

  /* Pages */
  .page{ padding:0 10px; margin:18px auto; }
  .panel-card{ padding:16px 12px; border-radius:12px; }

  /* Hero slider */
  .hero-slider-card{ padding:12px; margin-top:14px; margin-bottom:14px; }
  .hero-slider-card .hero-slider{ height: clamp(250px, 50vh, 400px); }
  .hero-slider-card .slide-content{ padding:1rem; gap:1rem; }
  .hero-slider-card .slide-text{ max-width:100%; }

  /* Modals */
  .modal-backdrop{ padding:10px; }
  .modal{ width:min(96vw, 720px); border-radius:14px; }
  .modal-inner{ padding:14px 12px; }
  .mode-tabs{ gap:4px; padding:6px; }
  .mode-tabs button{ padding:8px 6px; font-size:12px; }

  /* Profile */
  .dvdBanner{ height:100px; }
  .pf-avatar-img{ width:56px; height:56px; }
  .pf-name{ font-size:1.05rem; }
  .pf-card-content{ padding:1.2rem 1rem 1rem; }

  /* Generic flex-wrap fix for tight areas */
  .panel-card [style*="display:flex"]{ flex-wrap:wrap; }
}

/* ====== RESPONSIVE: SMALL PHONE ====== */
@media (max-width: 420px){
  .topbar-inner{ padding:8px 8px; gap:6px; }
  .brand .dg{ font-size:18px; }
  .brand .rest{ font-size:11px; }
  .menu-nav .menu-link{ padding:0.35rem 0.5rem; }
  .helloName{ max-width:70px; font-size:11px; }
  .btn-login{ padding:5px 10px; font-size:11px; }
  .hero-slider-card .hero-slider{ height:clamp(200px,40vh,300px); }
  .panel-card{ padding:12px 10px; }
  .page{ padding:0 6px; margin:12px auto; }
  .modal-inner{ padding:10px 8px; }
  .field input{ padding:10px 12px; font-size:14px; }

  /* Downloads tab buttons */
  #dlTab1, #dlTab2{ padding:5px 10px !important; font-size:.75rem !important; }
}