@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Quicksand:wght@300;400;500;600;700&display=swap');

/* =====================================================================
   MS SCRIPTS · Brand layer (estilo MS: blanco sobre negro, hairlines,
   LEDs, micro-glow y animación al 100%). Carga DESPUES de style.css /
   dashboard.css para sobrescribir el tema morado anterior.
   ===================================================================== */

:root {
  --ms-accent: #ffffff;
  --ms-accent-rgb: 255, 255, 255;
  --ms-soft: #c9ccd1;
  --ms-muted: #8a8f98;
  --ms-bg: #09090b;
  --ms-bg-2: #0d0d0f;
  --ms-line: rgba(255, 255, 255, 0.10);
  --ms-line-dim: rgba(255, 255, 255, 0.06);
  --ms-font: 'Quicksand', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ms-display: 'Bebas Neue', 'Quicksand', sans-serif;
  --ms-soft-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ms-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  /* Redefine las variables heredadas del tema viejo */
  --accent-primary: #ffffff;
  --accent-secondary: #c9ccd1;
}

/* ---------------------------------------------------------------- keyframes */
@keyframes msRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes msCardIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes msPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } to { transform: scale(1); } }
@keyframes msShimmer { 0% { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes msGlint { 0%, 55% { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } }
@keyframes msBlink { 50% { opacity: 0.3; } }
@keyframes msOrbit { to { transform: rotate(360deg); } }
@keyframes msSkeleton { 0% { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes msLedPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px #fff, 0 0 12px rgba(255,255,255,0.5); } 50% { opacity: 0.55; box-shadow: 0 0 3px #fff; } }

/* ---------------------------------------------------------------- tipografía base */
body,
.search-bar input,
.card-title, .card-description, .card-meta,
.nav-item, .btn-discord, .btn-legend, .btn-info, .btn-logout,
.upload-btn, .download-btn, .decrypt-btn, .fixer-btn,
.btn-primary, .btn-secondary, .toggle-btn,
.form-group input, .form-group textarea, .form-group select,
.panel-header h3, .notif-content, .user-item-name,
.login-subtitle, .login-title, .feature span, .discord-btn, .local-preview {
  font-family: var(--ms-font) !important;
}

/* html en negro: evita el flash blanco entre cargas — "que se recargue pero que no se mire" */
html { background: var(--ms-bg) !important; }
body {
  background: var(--ms-bg) !important;
  color: #f4f5f7;
  letter-spacing: 0.01em;
}

/* Cabecera del sidebar: SOLO el logo MS, sin el texto "MS SCRITPS" */
.sidebar-logo { font-size: 0 !important; justify-content: center !important; gap: 0 !important; }
.brand-logo { height: 56px !important; width: auto; vertical-align: middle; margin: 0 !important; }
.logo-icon-box { width: 160px !important; height: 160px !important; background: transparent !important; box-shadow: none !important; }
.logo-icon-box img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0 !important; }

/* Títulos y marca en Bebas Neue */
.section-title, .sidebar-logo, .logo, .modal-header h2,
.vip-modal-header h2, .no-scripts h3, .panel-header h3,
.login-title {
  font-family: var(--ms-display) !important;
  letter-spacing: 0.06em;
  font-weight: 400 !important;
}

/* ====================================================================
   FONDO: neutraliza el nebulosa/estrellas morado, deja negro técnico
   ==================================================================== */
.stellar-comets::after { display: none !important; }        /* glow ambiental morado fuera */
.stellar-comets::before { opacity: 0.5 !important; }         /* estrellas (ya blancas) más tenues */
.grid-overlay {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
  opacity: 0.06 !important;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(255,255,255,0.03), transparent 70%);
}

/* ====================================================================
   SIDEBAR
   ==================================================================== */
.sidebar {
  background: rgba(8, 8, 9, 0.94) !important;
  border-right: 1px solid var(--ms-line-dim) !important;
}
.sidebar-header {
  position: relative;
  border-bottom: none !important;
}
/* hairline punteada bajo la cabecera */
.sidebar-header::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 1px;
  background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.4) 0 6px, transparent 6px 12px);
}
.sidebar-logo {
  color: #fff !important;
  font-size: 0 !important;            /* oculta el texto "MS SCRITPS": solo el logo */
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 0 !important;
  animation: msRise 0.6s var(--ms-soft-ease) both;
}
.brand-logo {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
  animation: msPop 0.7s var(--ms-spring) 0.15s both;
}

.sidebar-nav { padding-top: 1.1rem; }
.nav-item {
  position: relative;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  animation: msRise 0.45s var(--ms-soft-ease) both;
}
.sidebar-nav .nav-item:nth-child(1) { animation-delay: .03s; }
.sidebar-nav .nav-item:nth-child(2) { animation-delay: .06s; }
.sidebar-nav .nav-item:nth-child(3) { animation-delay: .09s; }
.sidebar-nav .nav-item:nth-child(4) { animation-delay: .12s; }
.sidebar-nav .nav-item:nth-child(5) { animation-delay: .15s; }
.sidebar-nav .nav-item:nth-child(6) { animation-delay: .18s; }
.sidebar-nav .nav-item:nth-child(7) { animation-delay: .21s; }
.sidebar-nav .nav-item:nth-child(8) { animation-delay: .24s; }
.nav-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border-color: var(--ms-line);
  transform: translateX(3px);
}
.nav-item.active {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
  border-left: 2px solid #fff !important;
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.06) !important;
}
/* LED en el ítem activo */
.nav-item.active::after {
  content: ""; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: msLedPulse 1.8s ease-in-out infinite;
}

.sidebar-footer { border-top: none !important; position: relative; }
.sidebar-footer::before {
  content: ""; position: absolute; left: 0.875rem; right: 0.875rem; top: 0; height: 1px;
  background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.35) 0 6px, transparent 6px 12px);
}
/* botones del footer: feel técnico .key con barrido glint */
.btn-discord, .btn-legend, .btn-info, .btn-logout {
  position: relative; overflow: hidden;
  border-bottom-width: 2px !important;
}
.btn-discord {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid var(--ms-line) !important;
}
.btn-discord:hover {
  background: rgba(255,255,255,0.12) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;
}
/* Info/Download Portal: quita el azul, deja cromo monocromo (gana a estilos inline) */
.btn-info {
  background: rgba(255,255,255,0.04) !important;
  color: var(--ms-soft) !important;
  border: 1px solid var(--ms-line) !important;
}
.btn-info:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.btn-discord::after, .btn-legend::after, .btn-info::after, .btn-logout::after,
.upload-btn::after, .download-btn::after {
  content: ""; position: absolute; top: 0; left: 0; width: 55%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.btn-discord:hover::after, .btn-legend:hover::after, .btn-info:hover::after,
.btn-logout:hover::after, .upload-btn:hover::after, .download-btn:hover::after {
  animation: msGlint 0.9s var(--ms-soft-ease);
}

/* ====================================================================
   HEADER (barra superior) + buscador
   ==================================================================== */
.content-header {
  background: rgba(9, 9, 11, 0.72) !important;
  border-bottom: 1px solid var(--ms-line-dim) !important;
}
.search-bar {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--ms-line) !important;
}
.search-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

/* Upload: botón sólido blanco (acento de marca) */
.upload-btn {
  position: relative; overflow: hidden;
  background: #fff !important;
  color: #0a0a0a !important;
  border: 1px solid #fff !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.14) !important;
  letter-spacing: 0.02em;
}
.upload-btn:hover {
  background: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255, 255, 255, 0.32) !important;
}
/* FXAP Decrypt / 3D Fixer: botones de contorno (no se tocan sus páginas, solo el chip) */
.decrypt-btn, .fixer-btn {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.1rem; border-radius: 8px;
  font-size: 0.875rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--ms-line); color: var(--ms-soft);
  background: rgba(255,255,255,0.03);
  transition: all 0.2s var(--ms-soft-ease);
}
.decrypt-btn:hover, .fixer-btn:hover {
  color: #fff; border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08); transform: translateY(-1px);
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.user-avatar { border-color: rgba(255, 255, 255, 0.5) !important; }
.user-avatar:hover { border-color: #fff !important; }
.notif-count, .notif-badge {
  background: #fff !important; color: #0a0a0a !important;
}

/* ====================================================================
   SECTION TITLE con LED + hairline
   ==================================================================== */
.section-title {
  position: relative;
  font-size: 2.4rem !important;
  display: flex; align-items: center; gap: 0.7rem;
  padding-bottom: 0.6rem;
  animation: msRise 0.5s var(--ms-soft-ease) both;
}
.section-title::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px #fff; animation: msLedPulse 2s ease-in-out infinite;
}
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.25) 0 6px, transparent 6px 14px);
}

/* ====================================================================
   SCRIPT CARDS
   ==================================================================== */
.scripts-grid { gap: 1.35rem; }
.script-card {
  background: linear-gradient(160deg, rgba(23,23,25,0.9), rgba(13,13,15,0.92)) !important;
  border: 1px solid var(--ms-line) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  animation: msCardIn 0.5s var(--ms-spring) both;
}
.scripts-grid .script-card:nth-child(1) { animation-delay: .02s; }
.scripts-grid .script-card:nth-child(2) { animation-delay: .06s; }
.scripts-grid .script-card:nth-child(3) { animation-delay: .10s; }
.scripts-grid .script-card:nth-child(4) { animation-delay: .14s; }
.scripts-grid .script-card:nth-child(5) { animation-delay: .18s; }
.scripts-grid .script-card:nth-child(6) { animation-delay: .22s; }
.scripts-grid .script-card:nth-child(7) { animation-delay: .26s; }
.scripts-grid .script-card:nth-child(8) { animation-delay: .30s; }
.script-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.6), 0 0 24px rgba(255,255,255,0.07) !important;
}
/* barrido glint al pasar el ratón */
.script-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; z-index: 5;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
  transform: translateX(-140%) skewX(-18deg); pointer-events: none;
}
.script-card:hover::before { animation: msGlint 0.95s var(--ms-soft-ease); }

.card-badge { letter-spacing: 0.08em; backdrop-filter: blur(6px); }
.card-badge.category {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f4f5f7 !important;
}
.card-title { font-weight: 600 !important; }
.download-btn {
  position: relative; overflow: hidden;
  letter-spacing: 0.04em;
}

/* No scripts: estado vacío técnico */
.no-scripts { animation: msRise 0.5s var(--ms-soft-ease) both; }
.no-scripts i { opacity: 0.18 !important; }
.no-scripts h3 {
  font-size: 1.9rem !important; letter-spacing: 0.08em; color: #fff !important;
  margin-bottom: 0.4rem;
}

/* ====================================================================
   RIGHT PANELS / modales base (coherencia; detalle fino en fase 2)
   ==================================================================== */
.right-panel { background: rgba(9, 9, 11, 0.96) !important; border-left: 1px solid var(--ms-line-dim) !important; }
.modal-content { background: #0c0c0e !important; border: 1px solid var(--ms-line) !important; }
.toggle-btn.active, .btn-primary {
  background: #fff !important; color: #0a0a0a !important; border-color: #fff !important;
}
.btn-primary:hover { background: #fff !important; box-shadow: 0 8px 26px rgba(255,255,255,0.3) !important; }
.notification-item:hover { background: rgba(255,255,255,0.05) !important; border-color: var(--ms-line) !important; }
.unread-dot { background: #fff !important; }

/* ====================================================================
   SKELETON de carga (clase .ms-skeleton opcional usada al cargar grid)
   ==================================================================== */
.ms-skeleton {
  background: linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 70%);
  background-size: 200% 100%;
  animation: msSkeleton 1.3s linear infinite;
  border-radius: var(--radius-md, 12px);
}

/* ====================================================================
   LOGIN (index.php) en estilo MS — bonus, afina en fase 2
   ==================================================================== */
.login-card {
  border: 1px solid var(--ms-line) !important;
  box-shadow: 0 24px 90px rgba(0,0,0,0.6), 0 0 60px rgba(255,255,255,0.04) !important;
  background: linear-gradient(160deg, rgba(20,20,22,0.9), rgba(10,10,12,0.95)) !important;
}
.logo { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.logo-underline { background: #fff !important; box-shadow: 0 0 10px rgba(255,255,255,0.5) !important; }
.discord-btn {
  position: relative; overflow: hidden;
  background: #fff !important; color: #0a0a0a !important;
}
.discord-btn:hover { background: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,255,255,0.3) !important; }
.local-preview { color: var(--ms-soft) !important; }
.feature i { color: #fff !important; }
a:hover { color: #fff !important; }

/* ====================================================================
   MODALES VIP / BOOSTER (fase 2) — fuera rojo/rosa, oro para VIP, cromo booster
   ==================================================================== */
.vip-modal-content {
  border: 1px solid var(--ms-line) !important;
  box-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 40px rgba(255,255,255,0.05) !important;
  background: linear-gradient(160deg, rgba(20,20,22,0.96), rgba(10,10,12,0.98)) !important;
}
/* Corona VIP en oro (semántico, igual que el botón VIP Space) */
.crown-icon-wrapper {
  background: linear-gradient(135deg, #f5c542 0%, #c9971a 100%) !important;
  box-shadow: 0 0 30px rgba(245, 197, 66, 0.3) !important;
}
.crown-icon-wrapper i { color: #141414 !important; }
.vip-modal-header h2 { color: #fff !important; }
.btn-vip-connect {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #f5c542 0%, #e0a92a 100%) !important;
  color: #141414 !important;
}
.btn-vip-connect:hover { box-shadow: 0 10px 24px rgba(245,197,66,0.35) !important; transform: translateY(-2px); }
.btn-vip-recover { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--ms-line) !important; color: #fff !important; }
.btn-vip-recover:hover { background: rgba(255,255,255,0.1) !important; }
.vip-requirements h3 { color: #fff !important; letter-spacing: 0.12em; }
.vip-requirements li i { color: #39b46a !important; }

/* Booster: cromo monocromo */
.booster-icon-wrapper {
  background: linear-gradient(135deg, #e8eaed 0%, #9aa0a8 100%) !important;
  box-shadow: 0 0 30px rgba(255,255,255,0.18) !important;
}
.booster-icon-wrapper i { color: #141414 !important; }
.booster-modal-header h2 {
  background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important;
}
.btn-booster-connect { background: #fff !important; color: #141414 !important; }
.btn-booster-connect:hover { box-shadow: 0 10px 24px rgba(255,255,255,0.3) !important; transform: translateY(-2px); }

/* Report modal + modal de detalle: acentos a blanco */
.btn-submit-report { background: #fff !important; color: #141414 !important; }
.report-option input:checked + .radio-custom { border-color: #fff !important; }
.sm-btn-download { background: #fff !important; color: #141414 !important; }
.sm-comment-submit { background: #fff !important; color: #141414 !important; }

/* ====================================================================
   PAGINA DE DETALLE (script.php) — correcciones
   ==================================================================== */
/* CTA de descarga: era blanco con texto blanco (invisible) -> texto oscuro */
.btn-download-main {
  position: relative; overflow: hidden;
  background: #fff !important;
  color: #141414 !important;
  box-shadow: 0 4px 18px rgba(255,255,255,0.16) !important;
}
.btn-download-main:hover { background: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(255,255,255,0.3) !important; }
.btn-download-main * { color: #141414 !important; }
/* Save: fuera el oro, cromo monocromo (Report se queda rojo = semántico) */
.btn-save {
  background: rgba(255,255,255,0.05) !important;
  color: var(--ms-soft) !important;
  border-color: var(--ms-line) !important;
}
.btn-save:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; border-color: rgba(255,255,255,0.4) !important; }

/* ====================================================================
   PANEL DE ADMIN (admin.php / admin.css) — coherencia MS
   ==================================================================== */
.stat-icon {
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.stat-icon i, .stat-icon svg { color: #fff !important; }
/* número grande de cada tarjeta en Bebas */
.stat-value, .stat-number { font-family: var(--ms-display) !important; letter-spacing: 0.04em; }
/* logo del admin solo-icono-y-texto: texto en Bebas blanco */
.admin-logo, .admin-brand h1, .admin-panel-title { font-family: var(--ms-display) !important; color: #fff !important; }
/* tarjetas y bordes activos del admin a blanco */
.admin-nav-item.active, .nav-link.active { color: #fff !important; }
.stat-card:hover { border-color: rgba(255,255,255,0.22) !important; }

/* Logo ampliado del menú lateral */
.sidebar-header .brand-logo { height: 112px !important; width: 112px !important; object-fit: contain; }
.sidebar-header { padding-top: 12px !important; padding-bottom: 12px !important; }

/* Fondo continuo y cabecera alineada con el menú */
.dashboard .main-content { padding: 0 !important; min-width: 0; }
.dashboard .content-header { margin-bottom: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Contraste de la etiqueta ADMIN sobre fondo blanco */
.role-badge.role-admin, .role-badge.role-admin i { color: #111113 !important; -webkit-text-fill-color: #111113 !important; }

/* Idiomas y contraste del aviso legal */
.ms-language-switch{display:inline-flex;align-items:center;gap:3px;padding:4px;background:#ffffff06;border:1px solid #ffffff20;border-radius:10px;flex-shrink:0}.ms-language-switch button{border:0;background:transparent;color:#aeb0b8;padding:7px 10px;border-radius:7px;font:600 12px var(--ms-font);cursor:pointer;transition:background .15s,color .15s}.ms-language-switch button.is-active{background:#fff;color:#111!important}.ms-language-switch button:focus-visible{outline:2px solid #fff;outline-offset:3px}.ms-legal-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.legal-page .back-btn,.legal-page .back-btn:hover,.legal-page .back-btn:visited,.legal-page .back-btn i{color:#111!important;-webkit-text-fill-color:#111!important}.legal-page .back-btn{background:#fff!important}.legal-section a{color:#fff;text-decoration:underline;text-underline-offset:3px}.login-card>.ms-language-switch{margin-bottom:20px}.admin-header>.ms-language-switch{margin-left:auto}@media(max-width:600px){.ms-language-switch button{padding:7px 8px}.ms-legal-toolbar{flex-wrap:wrap}}

/* Keep the Discord action readable in every link state. */
.login-card a.discord-btn,
.login-card a.discord-btn:is(:link, :visited, :hover, :focus, :focus-visible, :active),
.login-card a.discord-btn i {
  color: #111113 !important;
  -webkit-text-fill-color: #111113 !important;
}
.login-card a.discord-btn:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.login-card .logo-icon-box { width: 240px !important; height: 240px !important; max-width: 100%; margin-bottom: 0; }
.login-card .logo-container { margin-bottom: 12px; }
@media (max-width: 480px) { .login-card .logo-icon-box { width: 210px !important; height: 210px !important; } }