* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: radial-gradient(circle at top left, #3e444b 0%, #000000 35%, #000000 100%);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
}

.navbar {
  width: 84%;
  margin: 24px auto;
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(24px);
  position: sticky;
  top: 18px;
  z-index: 100;
  box-shadow: 0 0 60px rgba(255,255,255,0.04);
}

.logo {
  font-size: 14px;
  letter-spacing: 4px;
  font-weight: bold;
}

nav {
  display: flex;
  gap: 32px;
}

nav a {
  color: #aaa;
  text-decoration: none;
  font-size: 15px;
}

nav a:hover {
  color: white;
}

.btn-nav,
.btn-primary,
.btn-secondary {
  text-decoration: none;
  border-radius: 30px;
  padding: 14px 24px;
  font-weight: bold;
}

.btn-nav,
.btn-primary {
  background: white;
  color: black;
}

.btn-secondary {
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
}

.hero {
  width: 84%;
  margin: 100px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.badge {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 30px;
  color: #bbb;
  margin-bottom: 28px;
  font-size: 14px;
}

.hero h1 {
  font-size: 82px;
  line-height: 0.95;
  letter-spacing: -4px;
  margin-bottom: 28px;
}

.hero h1 span {
  color: #bfc3c7;
}

.hero p {
  color: #aaa;
  max-width: 620px;
  font-size: 21px;
  line-height: 1.6;
  margin-bottom: 34px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

.dashboard-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 34px;
  padding: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  box-shadow: 0 0 80px rgba(255,255,255,0.06);
}

.small-title {
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 13px;
  margin-bottom: 10px;
}

.dashboard-card h3 {
  font-size: 26px;
  margin-bottom: 28px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.stats div {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 18px;
}

.stats span {
  color: #888;
  display: block;
  margin-bottom: 8px;
}

.stats strong {
  font-size: 24px;
}

.chart {
  height: 160px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  margin-bottom: 22px;
  background: linear-gradient(to top, rgba(255,255,255,0.18), transparent);
}

.progress-box {
  display: flex;
  justify-content: space-between;
  color: #ddd;
  margin-bottom: 10px;
}

.progress {
  height: 9px;
  background: #222;
  border-radius: 20px;
  overflow: hidden;
}

.progress div {
  height: 100%;
  width: 68%;
  background: white;
  border-radius: 20px;
}

@media (max-width: 900px) {
  .navbar {
    width: 92%;
  }

  nav {
    display: none;
  }

  .hero {
    width: 92%;
    grid-template-columns: 1fr;
    margin-top: 60px;
  }

  .hero h1 {
    font-size: 54px;
  }

  .hero p {
    font-size: 17px;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}
.intro-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, #111 0%, #000 60%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease, visibility 1s ease;
}

.intro-screen.hide {
  opacity: 0;
  visibility: hidden;
}

.intro-logo {
  font-size: 46px;
  letter-spacing: 10px;
  font-weight: 700;
  animation: logoReveal 2s ease forwards;
  text-shadow: 0 0 30px rgba(255,255,255,0.45);
}

.intro-screen p {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 8px;
  color: #aaa;
  animation: fadeUp 2.4s ease forwards;
}

.cursor-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 65%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: 0.08s linear;
}

@keyframes logoReveal {
  from {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.section {
  width: 84%;
  margin: 140px auto;
  position: relative;
  z-index: 2;
}

.section-label {
  color: #aaa;
  letter-spacing: 8px;
  font-size: 13px;
  display: block;
  margin-bottom: 22px;
}

.section h2 {
  font-size: 58px;
  line-height: 1;
  letter-spacing: -2px;
  max-width: 900px;
  margin-bottom: 24px;
}

.section-text {
  color: #aaa;
  font-size: 20px;
  line-height: 1.6;
  max-width: 760px;
  margin-bottom: 54px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.info-card {
  min-height: 230px;
  padding: 34px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  transition: 0.35s ease;
}

.info-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 60px rgba(255,255,255,0.08);
}

.info-card h3 {
  font-size: 24px;
  margin-bottom: 18px;
}

.info-card p {
  color: #aaa;
  line-height: 1.6;
  font-size: 17px;
}

@media (max-width: 900px) {
  .section {
    width: 92%;
    margin: 90px auto;
  }

  .section h2 {
    font-size: 40px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.plan-card {
  padding: 36px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  min-height: 440px;
  position: relative;
  transition: 0.35s ease;
}

.plan-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 70px rgba(255,255,255,0.08);
}

.plan-card.featured {
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 80px rgba(255,255,255,0.08);
}

.popular {
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 14px;
  border-radius: 30px;
  background: white;
  color: black;
  font-size: 13px;
  font-weight: bold;
}

.plan-card h3 {
  font-size: 32px;
  margin-bottom: 14px;
}

.plan-card p {
  color: #aaa;
  line-height: 1.5;
  margin-bottom: 26px;
}

.plan-card ul {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-bottom: 34px;
}

.plan-card li {
  color: #cfcfcf;
}

.plan-card li::before {
  content: "✓";
  margin-right: 10px;
  color: white;
}

.plan-card a {
  position: absolute;
  bottom: 30px;
  left: 36px;
  right: 36px;
  text-align: center;
  text-decoration: none;
  background: white;
  color: black;
  padding: 14px;
  border-radius: 30px;
  font-weight: bold;
}

@media (max-width: 900px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }
}
.background-grid{
  position:fixed;
  inset:0;

  background-color:#000;

  background-image:
  linear-gradient(
  rgba(255,255,255,.04) 1px,
  transparent 1px
  ),
  linear-gradient(
  90deg,
  rgba(255,255,255,.04) 1px,
  transparent 1px
  );

  background-size:40px 40px;

  z-index:-5;
}

.background-blur {
    position: fixed;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -2;
    animation: floatGlow 15s infinite ease-in-out;
}

.blur-1 {
    width: 500px;
    height: 500px;
    background: rgba(255,255,255,0.06);

    top: -100px;
    left: -100px;
}

.blur-2 {
    width: 600px;
    height: 600px;
    background: rgba(62,68,75,0.3);

    right: -200px;
    bottom: -200px;
}

@keyframes floatGlow {

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(60px,-40px);
    }

    100%{
        transform:translate(0,0);
    }

}
.contact-card {

    padding:40px;

    border-radius:30px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.01)
    );

    border:1px solid rgba(255,255,255,.1);

}

.contact-card h3{

    font-size:32px;
    margin-bottom:15px;

}

.contact-card p{

    color:#aaa;
    margin-bottom:25px;

}

.contact-card a{

    display:inline-block;

    padding:15px 25px;

    border-radius:30px;

    background:white;

    color:black;

    text-decoration:none;

    font-weight:bold;

}

.footer{

    width:90%;

    margin:auto;

    padding:60px 0;

    display:flex;

    justify-content:space-between;

    border-top:1px solid rgba(255,255,255,.08);

    color:#777;

}
.contact-form {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: white;
  outline: none;
  font-size: 15px;
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #777;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 30px rgba(255,255,255,0.05);
}

.contact-form button {
  border: none;
  padding: 16px;
  border-radius: 30px;
  background: white;
  color: black;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}

.contact-form button:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 40px rgba(255,255,255,0.12);
}
.section,
.info-card,
.plan-card,
.testimonial-card,
.contact-card,
.social-grid a,
}

.section.show,
.info-card.show,
.plan-card.show,
.testimonial-card.show,
.contact-card.show,
.social-grid a.show,
}
.testimonial-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.testimonial-card {
  padding: 28px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
  transition: 0.35s ease;
}

.testimonial-card p {
  color: #ddd;
  line-height: 1.6;
  margin-bottom: 20px;
}

.testimonial-card span {
  color: #888;
  font-size: 14px;
}

.social-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.social-grid a {
  text-decoration: none;
  color: white;
  padding: 26px;
  border-radius: 24px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
  transition: 0.3s ease;
}

.social-grid a:hover {
  background: white;
  color: black;
  transform: translateY(-8px);
}

@media (max-width: 900px) {
  .testimonial-grid,
  .social-grid {
    grid-template-columns: 1fr;
  }
}
.logo img {
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.25));
}

.bg-logo {
  position: fixed;
  width: 760px;
  max-width: 90vw;
  top: 18%;
  right: 4%;
  opacity: 0.05;
  filter: blur(1px);
  z-index: -1;
  pointer-events: none;
  animation: bgLogoFloat 12s ease-in-out infinite;
}

@keyframes bgLogoFloat {
  0% {
    transform: translateY(0) rotate(-4deg) scale(1);
  }

  50% {
    transform: translateY(-24px) rotate(-2deg) scale(1.04);
  }

  100% {
    transform: translateY(0) rotate(-4deg) scale(1);
  }
}

.intro-logo {
  background-image: url("assets/logo-full.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 420px;
  height: 130px;
  font-size: 0;
}

@media (max-width: 900px) {
  .logo img {
    height: 26px;
  }

  .bg-logo {
    width: 420px;
    top: 20%;
    right: -120px;
    opacity: 0.04;
  }

  .intro-logo {
    width: 280px;
    height: 90px;
  }
}
.intro-screen{
    position:fixed;
    inset:0;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    overflow:hidden;
}

.intro-logo-container{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.intro-symbol{
    width:120px;
    opacity:0;
    animation:
    symbolAppear 1.2s forwards,
    vortexSpin 1.8s 2.5s forwards;
}

.intro-full{
    width:420px;
    opacity:0;
    animation:logoAppear 1.2s 1s forwards;
}

@keyframes symbolAppear{

    from{
        opacity:0;
        transform:scale(.5);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes logoAppear{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes vortexSpin{

    0%{
        transform:scale(1) rotate(0deg);
        opacity:1;
    }

    50%{
        transform:scale(1.6) rotate(360deg);
    }

    100%{
        transform:scale(12) rotate(1080deg);
        opacity:0;
    }
}
.intro-title{
    color:white;
    font-size:72px;
    font-weight:700;
    letter-spacing:10px;
    opacity:0;
    animation:logoAppear 1s 0.8s forwards;
}

.intro-subtitle{
    color:rgba(255,255,255,.7);
    letter-spacing:12px;
    font-size:18px;
    opacity:0;
    animation:logoAppear 1s 1.2s forwards;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 50px;
}

.step-card {
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
  transition: 0.35s ease;
}

.step-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 70px rgba(255,255,255,0.08);
}

.step-card span {
  display: block;
  color: #777;
  letter-spacing: 4px;
  margin-bottom: 28px;
}

.step-card h3 {
  font-size: 24px;
  margin-bottom: 14px;
}

.step-card p {
  color: #aaa;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
.price-box {
  margin: 22px 0 26px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
}

.price-box strong {
  font-size: 34px;
  display: block;
}

.price-box span {
  color: white;
  font-size: 14px;
}

.price-box small {
  display: block;
  margin-top: 8px;
  color: #999;
}
.lobby-screen {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.back-link {
  color: #aaa;
  text-decoration: none;
  margin-bottom: 60px;
}

.lobby-header {
  text-align: center;
  margin-bottom: 60px;
}

.lobby-header img {
  width: 90px;
  margin-bottom: 30px;
}

.lobby-header h2 {
  font-size: 52px;
  margin-bottom: 14px;
}

.lobby-header p {
  color: #aaa;
  font-size: 20px;
}

.lobby-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.lobby-option {
  text-decoration: none;
  color: white;
  padding: 42px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
  transition: 0.35s ease;
}

.lobby-option:hover {
  transform: translateY(-10px);
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 80px rgba(255,255,255,0.08);
}

.lobby-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 34px;
}

.lobby-option h3 {
  font-size: 26px;
  margin-bottom: 14px;
}

.lobby-option p {
  color: #aaa;
  margin-bottom: 34px;
}

.lobby-option span {
  color: white;
}

@media (max-width: 900px) {
  .lobby-options {
    grid-template-columns: 1fr;
  }

  .lobby-header h2 {
    font-size: 38px;
  }
}
.enter-btn {
  margin-top: 28px;
  padding: 14px 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: white;
  font-size: 13px;
  letter-spacing: 4px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: .3s ease;
}

.enter-btn:hover {
  background: white;
  color: black;
  transform: translateY(-3px);
}
.login-page {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-card {
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}
.login-back {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 20;
  color: #aaa;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s ease;
}

.login-back:hover {
  color: white;
  transform: translateX(-4px);
}

.login-page .lobby-header {
  text-align: center;
  margin-bottom: 42px;
}

.login-page .lobby-header h2 {
  text-align: center;
}

.login-page .lobby-header p {
  text-align: center;
}

.login-card {
  max-width: 560px;
  margin: 0 auto;
}
.login-body {
  min-height: 100vh;
  overflow: hidden;
}

.login-bg-logo {
  position: fixed;
  width: 720px;
  max-width: 90vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  opacity: 0.075;
  filter: blur(0.5px);
  z-index: -1;
  pointer-events: none;
}

.login-wrapper {
  min-height: 100vh;
  width: min(680px, 92%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.login-brand img {
  width: 220px;
  margin-bottom: 34px;
  filter: drop-shadow(0 0 28px rgba(255,255,255,0.28));
}

.login-brand h1 {
  font-size: clamp(42px, 6vw, 66px);
  line-height: 1;
  margin-bottom: 18px;
}

.login-brand p {
  color: #b7b7b7;
  font-size: 19px;
}

.login-panel {
  width: 100%;
  padding: 42px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018));
  box-shadow: 0 0 90px rgba(255,255,255,0.06);
  backdrop-filter: blur(22px);
}

.input-group {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 0 22px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.045);
}

.input-group span {
  color: white;
  opacity: 0.85;
  font-size: 22px;
}

.input-group input {
  width: 100%;
  padding: 20px 0;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 17px;
}

.input-group input::placeholder {
  color: #999;
}

.login-panel button {
  width: 100%;
  margin-top: 12px;
  padding: 20px;
  border-radius: 20px;
  border: none;
  background: white;
  color: black;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: 0.3s ease;
}

.login-panel button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 50px rgba(255,255,255,0.18);
}

.login-safe {
  color: #b8b8b8;
  font-size: 16px;
}

.login-back {
  position: fixed;
  top: 34px;
  left: 38px;
  z-index: 10;
  color: white;
  text-decoration: none;
  font-size: 18px;
  opacity: 0.85;
  transition: 0.3s ease;
}

.login-back:hover {
  opacity: 1;
  transform: translateX(-5px);
}

@media (max-width: 700px) {
  .login-panel {
    padding: 28px;
  }

  .login-brand img {
    width: 160px;
  }

  .login-back {
    top: 22px;
    left: 22px;
    font-size: 15px;
  }
}
.profile-wrapper {
  min-height: 100vh;
  width: min(900px, 92%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card {
  width: 100%;
  padding: 52px;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018));
  box-shadow: 0 0 90px rgba(255,255,255,0.06);
  backdrop-filter: blur(22px);
}

.profile-card img {
  width: 150px;
  margin-bottom: 36px;
  filter: drop-shadow(0 0 22px rgba(255,255,255,0.22));
}

.profile-card h1 {
  font-size: clamp(40px, 5vw, 64px);
  margin: 14px 0;
}

.profile-card p {
  color: #aaa;
  font-size: 18px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 42px 0;
}

.profile-grid div {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.profile-grid span {
  display: block;
  color: #999;
  font-size: 14px;
  margin-bottom: 10px;
}

.profile-grid strong {
  font-size: 24px;
}

.profile-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-actions a,
.profile-actions button {
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: white;
  color: black;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}

.profile-actions button {
  background: transparent;
  color: white;
}

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

  .profile-card {
    padding: 32px;
  }
}
.profile-top {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 36px;
}

.profile-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 34px 0;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.035);
}

.tab-btn {
  border: none;
  padding: 13px 22px;
  border-radius: 999px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-weight: 700;
}

.tab-btn.active {
  background: white;
  color: black;
}

.logout-tab {
  margin-left: auto;
  color: #ffb4b4;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.config-box {
  display: grid;
  gap: 14px;
}

.config-box label {
  color: #aaa;
  font-size: 14px;
}

.config-box input {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: white;
  outline: none;
}

.config-box button {
  margin-top: 10px;
  padding: 16px;
  border-radius: 999px;
  border: none;
  background: white;
  color: black;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 700px) {
  .profile-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .logout-tab {
    margin-left: 0;
  }
}
.plan-page{
max-width:1200px;
margin:auto;
padding:120px 30px;
text-align:center;
}

.plan-badge{
display:inline-block;
padding:10px 20px;
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
margin-bottom:25px;
color:#d4af37;
}

.plan-hero h1{
font-size:72px;
margin-bottom:20px;
}

.plan-hero p{
max-width:700px;
margin:auto;
color:#aaa;
}

.plan-prices{
display:flex;
justify-content:center;
gap:30px;
margin-top:50px;
flex-wrap:wrap;
}

.price-card{
padding:30px;
width:220px;
border-radius:30px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.1);
}

.price-card strong{
display:block;
font-size:48px;
}

.featured-price{
border:1px solid #d4af37;
box-shadow:0 0 30px rgba(212,175,55,.2);
}

.plan-features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:80px;
}

.feature-card{
padding:25px;
border-radius:20px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}

.plan-cta{
margin-top:80px;
}

.premium-button{
padding:20px 50px;
border:none;
border-radius:999px;
font-size:18px;
font-weight:700;
cursor:pointer;
background:#d4af37;
color:black;
}
/* ========================= */
/* DASHBOARD ONIX */
/* ========================= */

.dashboard-body{
    background:#050505;
    color:white;
    min-height:100vh;
}

.dashboard-layout{
    display:flex;
    min-height:100vh;
}

.dashboard-sidebar{
    width:280px;
    border-right:1px solid rgba(255,255,255,.08);
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    backdrop-filter: blur(20px);
}

.dashboard-logo{
    width:140px;
    margin-bottom:40px;
}

.dashboard-menu{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.dash-link{
    background:none;
    border:none;
    color:#bdbdbd;
    text-align:left;
    padding:14px 18px;
    border-radius:14px;
    cursor:pointer;
    transition:.3s;
    font-size:15px;
}

.dash-link:hover{
    background:rgba(255,255,255,.05);
    color:white;
}

.dash-link.active{
    background:white;
    color:black;
    font-weight:600;
}

.sidebar-plan{
    padding:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:rgba(255,255,255,.02);
}

.sidebar-plan span{
    color:#8e8e8e;
    font-size:13px;
}

.sidebar-plan strong{
    display:block;
    margin-top:8px;
    font-size:22px;
}

.dashboard-main{
    flex:1;
    padding:50px;
}

.dash-section{
    display:none;
}

.dash-section.active{
    display:block;
}

.dash-section h1{
    font-size:52px;
    margin-bottom:10px;
}

.dash-subtitle{
    color:#8e8e8e;
    margin-bottom:40px;
}

.dash-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.dash-card{
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
    backdrop-filter:blur(20px);
    border-radius:28px;
    padding:30px;
    transition:.3s;
}

.dash-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,255,255,.18);
}

.dash-card span{
    color:#8e8e8e;
    font-size:13px;
}

.dash-card h3{
    font-size:34px;
    margin:15px 0;
}

.dash-logout{
    margin-top:25px;
    background:white;
    color:black;
    border:none;
    padding:14px 25px;
    border-radius:14px;
    cursor:pointer;
    font-weight:600;
}
.big-card {
  grid-column: span 2;
}

.onix-path {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.path-step {
  padding: 14px;
  border-radius: 16px;
  text-align: center;
  font-size: 13px;
  color: #888;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}

.path-step.active {
  background: white;
  color: black;
  font-weight: 700;
}

.dash-progress {
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 18px;
}

.dash-progress div {
  height: 100%;
  background: white;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .big-card {
    grid-column: span 1;
  }

  .onix-path {
    grid-template-columns: 1fr;
  }
}
.goals-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
}

.goal-card {
  padding: 32px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(20px);
}

.main-goal {
  grid-row: span 2;
}

.goal-card span {
  color: #8e8e8e;
  font-size: 13px;
}

.goal-card h3 {
  font-size: 38px;
  margin: 16px 0;
}

.goal-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0;
}

.goal-amounts div {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.goal-amounts small {
  display: block;
  color: #888;
  margin-bottom: 8px;
}

.goal-amounts strong {
  font-size: 24px;
}

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

  .main-goal {
    grid-row: auto;
  }
}

.goal-modal-content input[type="date"],
.goal-modal-content input[type="time"] {
  color-scheme: dark;
  cursor: pointer;
}

.goal-modal-content input[type="date"]::-webkit-calendar-picker-indicator,
.goal-modal-content input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 1;
  cursor: pointer;
}
.calendar-box {
  margin-top: 18px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.calendar-header button {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: white;
  cursor: pointer;
}

.calendar-header h3 {
  font-size: 18px;
  margin: 0;
}

.calendar-days,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-days span {
  color: #888;
  font-size: 12px;
  text-align: center;
  margin-bottom: 8px;
}

.calendar-day {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: white;
  cursor: pointer;
}

.calendar-day:hover {
  border-color: rgba(255,255,255,.35);
}

.calendar-day.disabled {
  opacity: .25;
  cursor: not-allowed;
  text-decoration: line-through;
}

.calendar-day.selected {
  background: white;
  color: black;
  font-weight: 800;
}

.time-title {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 18px;
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 18px;
}

.time-slot {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: white;
  cursor: pointer;
}

.time-slot.selected {
  background: white;
  color: black;
  font-weight: 800;
}
#sessionModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

#sessionModal .goal-modal-content {
  width: 520px;
  max-width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  background: #090909;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  padding: 32px;
}

#sessionModal .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#sessionModal .calendar-days,
#sessionModal .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

#sessionModal .calendar-day,
#sessionModal .time-slot {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: white;
  cursor: pointer;
}

#sessionModal .calendar-day.disabled {
  opacity: .25;
  cursor: not-allowed;
}

#sessionModal .calendar-day.selected,
#sessionModal .time-slot.selected {
  background: white;
  color: black;
  font-weight: 800;
}

#sessionModal .time-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0;
}

#saveSessionBtn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  background: white;
  color: black;
  font-weight: 800;
}
/* ========================= */
/* RESPONSIVE ONIX */
/* ========================= */

@media (max-width: 900px) {

  .navbar {
    width: 92%;
    padding: 12px 16px;
  }

  .navbar nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 80px 24px;
    gap: 50px;
  }

  .hero-text h1 {
    font-size: 46px;
  }

  .dashboard-card {
    width: 100%;
  }

  .cards-grid,
  .plans-grid,
  .testimonial-grid,
  .social-grid {
    grid-template-columns: 1fr !important;
  }

  .section {
    padding: 80px 24px;
  }

  .section h2 {
    font-size: 38px;
  }

  .dashboard-layout {
    flex-direction: column;
  }

  .dashboard-sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 18px;
    gap: 14px;
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(0,0,0,.85);
  }

  .dashboard-logo {
    width: 90px;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .dashboard-menu {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
  }

  .dash-link {
    white-space: nowrap;
    font-size: 13px;
    padding: 12px 14px;
  }

  .sidebar-plan {
    display: none;
  }

  .dashboard-main {
    padding: 28px 18px 90px;
  }

  .dash-section h1 {
    font-size: 36px;
  }

  .dash-grid,
  .goals-grid {
    grid-template-columns: 1fr;
  }

  .big-card {
    grid-column: span 1;
  }

  .onix-path {
    grid-template-columns: 1fr;
  }

  .profile-grid {
    grid-template-columns: 1fr 1fr;
  }

  #sessionModal .goal-modal-content,
  .goal-modal-content {
    width: 92%;
    max-height: 88vh;
    overflow-y: auto;
  }

  #sessionModal .time-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {

  .dashboard-sidebar {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    height: 72px;
    padding: 8px 10px;
    z-index: 999;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(20px);
  }

  .dashboard-logo,
  .sidebar-plan {
    display: none;
  }

  .dashboard-menu {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }

  .dash-link {
    font-size: 0;
    padding: 8px 4px;
    border-radius: 16px;
    text-align: center;
  }

  .dash-link::first-letter {
    font-size: 20px;
  }

  .dash-link.active {
    background: rgba(255,255,255,.12);
    color: white;
  }

  .dashboard-main {
    padding: 34px 22px 110px;
  }

  .dash-section h1 {
    font-size: 42px;
  }

  .goal-card,
  .dash-card {
    padding: 28px;
  }
}
.education-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    margin-top:30px;
}

.level-card{
    background:#0d0d0d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:24px;
    transition:.3s;
}

.level-card h3{
    margin-top:10px;
    margin-bottom:10px;
}

.level-card.unlocked{
    border-color:#ffffff;
}

.level-card.locked{
    opacity:.55;
}

.level-card:hover{
    transform:translateY(-4px);
}
.education-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.level-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  padding: 26px;
  transition: .35s ease;
  cursor: pointer;
}

.level-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 40%);
  opacity: 0;
  transition: .35s ease;
}

.level-card:hover::before {
  opacity: 1;
}

.level-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 45px rgba(255,255,255,.08);
}

.level-card span,
.level-card h3,
.level-card p {
  position: relative;
  z-index: 2;
}

.level-card span {
  color: #aaa;
  font-size: 13px;
  letter-spacing: 1px;
}

.level-card h3 {
  font-size: 22px;
  margin: 14px 0 12px;
}

.level-card p {
  color: #888;
  font-size: 14px;
}

.level-card.unlocked {
  border-color: rgba(255,255,255,.35);
}

.level-card.unlocked p {
  color: white;
}

.level-card.locked {
  opacity: .5;
}

.level-card.locked::after {
  content: "🔒";
  position: absolute;
  top: 22px;
  right: 22px;
  opacity: .7;
}
#goalModal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.82) !important;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

#goalModal .goal-modal-content {
  width: 460px;
  max-width: 92%;
  background: #090909;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 32px;
}

#goalModal .goal-modal-content input {
  width: 100%;
  display: block;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: white;
}

#goalModal .goal-modal-content button {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  border: none;
  background: white;
  color: black;
  font-weight: 800;
}
.goal-modal{
    display:none;
    position:fixed;
    inset:0;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.82);
    z-index:99999;
}
.goal-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.goal-modal.active{
  display: flex;
}
.goal-modal {
  display: none;
  position: fixed;
  inset: 0;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.82);
  z-index: 99999;
}

.goal-modal.active {
  display: flex;
}
#goalModal.active{
  display:flex !important;
}

#sessionModal.active{
  display:flex !important;
}
.diagnostic-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(18px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.diagnostic-popup.active {
  display: flex;
}

.diagnostic-card {
  width: 520px;
  max-width: 90%;
  padding: 42px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 90px rgba(255,255,255,.08);
  animation: diagnosticBounce .55s ease;
}

@keyframes diagnosticBounce {
  0% { transform: scale(.88) translateY(30px); opacity: 0; }
  70% { transform: scale(1.03) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}

.diagnostic-badge {
  color: #aaa;
  font-size: 12px;
  letter-spacing: 4px;
}

.diagnostic-card h2 {
  font-size: 38px;
  margin: 18px 0;
}

.diagnostic-card p {
  color: #aaa;
  line-height: 1.6;
  margin-bottom: 30px;
}

.diagnostic-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.diagnostic-primary,
.diagnostic-secondary {
  padding: 15px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.diagnostic-primary {
  background: white;
  color: black;
}

.diagnostic-secondary {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,.16);
}
.diagnostic-wrapper {
  min-height: 100vh;
  width: min(900px, 92%);
  margin: 0 auto;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.diagnostic-header {
  text-align: center;
  margin-bottom: 36px;
}

.diagnostic-header span,
.question-count {
  color: #aaa;
  font-size: 12px;
  letter-spacing: 4px;
}

.diagnostic-header h1 {
  font-size: clamp(42px, 6vw, 68px);
  margin: 18px 0;
}

.diagnostic-header p {
  color: #aaa;
  font-size: 18px;
}

.diagnostic-progress {
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 34px;
}

#diagnosticProgressBar {
  height: 100%;
  width: 0%;
  background: white;
  transition: .4s ease;
}

.diagnostic-question-card {
  padding: 42px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 80px rgba(255,255,255,.06);
}

.question-animate {
  animation: questionPop .35s ease;
}

@keyframes questionPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.diagnostic-question-card h2 {
  font-size: 38px;
  margin: 18px 0 28px;
}

.diagnostic-options {
  display: grid;
  gap: 14px;
}

.diagnostic-option,
.diagnostic-next,
.diagnostic-back-btn {
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: white;
  cursor: pointer;
  font-weight: 700;
  transition: .25s ease;
}

.diagnostic-option:hover,
.diagnostic-next:hover {
  background: white;
  color: black;
  transform: translateY(-3px);
}

.diagnostic-input {
  width: 100%;
  padding: 17px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: white;
  margin-bottom: 18px;
}

.diagnostic-next {
  width: 100%;
  background: white;
  color: black;
}

.diagnostic-back-btn {
  margin-top: 18px;
  background: transparent;
  color: #aaa;
}

.diagnostic-result-text {
  color: #aaa;
  line-height: 1.6;
  margin-bottom: 24px;
}

.diagnostic-summary {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 24px;
}

.diagnostic-summary p {
  margin-bottom: 10px;
}
.services-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 54px;
}

.service-premium-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 34px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  transition: .35s ease;
}

.service-premium-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 42%);
  opacity: 0;
  transition: .35s ease;
}

.service-premium-card:hover::before {
  opacity: 1;
}

.service-premium-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 70px rgba(255,255,255,.07);
}

.service-premium-card > * {
  position: relative;
  z-index: 2;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  font-size: 22px;
}

.service-premium-card h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.service-premium-card ul {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.service-premium-card li {
  color: #aaa;
}

.service-premium-card li::before {
  content: "✓";
  margin-right: 10px;
  color: white;
}

.service-premium-card a {
  color: #ddd;
  text-decoration: none;
  font-weight: 600;
}

.service-premium-card a:hover {
  color: white;
}

@media (max-width: 900px) {
  .services-premium-grid {
    grid-template-columns: 1fr;
  }
}
.process-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: center;
  margin-top: 60px;
}

.process-steps {
  display: grid;
  gap: 28px;
}

.process-step {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #ddd;
  font-size: 18px;
}

.process-step span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.process-dashboard {
  padding: 30px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.018));
  box-shadow: 0 0 80px rgba(255,255,255,.06);
  overflow: hidden;
}

.process-top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #aaa;
  margin-bottom: 26px;
}

.live-dot {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255,255,255,.8);
  animation: pulseDot 1.6s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.mini-stats div {
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
}

.mini-stats span {
  color: #888;
  font-size: 12px;
}

.mini-stats strong {
  display: block;
  font-size: 24px;
  margin: 10px 0;
}

.mini-stats small {
  color: #aaa;
}

.mini-chart {
  height: 180px;
  margin: 24px 0;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(to top, rgba(255,255,255,.08), transparent),
    repeating-linear-gradient(to right, transparent 0 70px, rgba(255,255,255,.035) 71px);
  position: relative;
  overflow: hidden;
}

.chart-line {
  position: absolute;
  left: -20%;
  bottom: 45%;
  width: 140%;
  height: 3px;
  background: white;
  border-radius: 999px;
  animation: chartMove 3s ease-in-out infinite;
  box-shadow: 0 0 24px rgba(255,255,255,.35);
}

@keyframes chartMove {
  0% { transform: translateX(0) rotate(-4deg); }
  50% { transform: translateX(30px) rotate(3deg); }
  100% { transform: translateX(0) rotate(-4deg); }
}

.mini-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

.mini-bottom h4 {
  margin-bottom: 8px;
}

.mini-bottom p {
  color: #aaa;
}

.mini-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-dots span {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  opacity: .25;
  animation: dotFill 2s infinite;
}

.mini-dots span:nth-child(2) { animation-delay: .3s; }
.mini-dots span:nth-child(3) { animation-delay: .6s; }
.mini-dots span:nth-child(4) { animation-delay: .9s; }

@keyframes dotFill {
  0%, 100% { opacity: .2; }
  50% { opacity: 1; }
}

@media (max-width: 900px) {
  .process-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mini-stats {
    grid-template-columns: 1fr;
  }

  .mini-bottom {
    flex-direction: column;
  }
}
.process-dashboard {
  animation: dashboardFloat 5s ease-in-out infinite;
}

@keyframes dashboardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.mini-stats div {
  animation: statPulse 3s ease-in-out infinite;
}

.mini-stats div:nth-child(2) {
  animation-delay: .4s;
}

.mini-stats div:nth-child(3) {
  animation-delay: .8s;
}

@keyframes statPulse {
  0%, 100% {
    transform: translateY(0);
    border-color: rgba(255,255,255,.1);
  }

  50% {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 0 35px rgba(255,255,255,.08);
  }
}

.mini-stats strong {
  animation: numberGlow 2.4s ease-in-out infinite;
}

@keyframes numberGlow {
  0%, 100% {
    text-shadow: none;
    opacity: .85;
  }

  50% {
    text-shadow: 0 0 18px rgba(255,255,255,.45);
    opacity: 1;
  }
}

.mini-chart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  transform: translateX(-100%);
  animation: scanLine 3.8s ease-in-out infinite;
}

@keyframes scanLine {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.chart-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -5px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(255,255,255,.8);
}

.process-step {
  animation: stepReveal 4s ease-in-out infinite;
}

.process-step:nth-child(2) { animation-delay: .3s; }
.process-step:nth-child(3) { animation-delay: .6s; }
.process-step:nth-child(4) { animation-delay: .9s; }
.process-step:nth-child(5) { animation-delay: 1.2s; }

@keyframes stepReveal {
  0%, 100% {
    opacity: .65;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(8px);
  }
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:50px;
}

.testimonial-card{
  padding:30px;
  border-radius:28px;
  background:linear-gradient(
  145deg,
  rgba(255,255,255,.06),
  rgba(255,255,255,.02)
  );

  border:1px solid rgba(255,255,255,.08);

  transition:.35s ease;
  position:relative;
  overflow:hidden;
}

.testimonial-card::before{
  content:"";
  position:absolute;
  inset:0;

  background:radial-gradient(
  circle at top left,
  rgba(255,255,255,.15),
  transparent 45%
  );

  opacity:0;
  transition:.35s;
}

.testimonial-card:hover::before{
  opacity:1;
}

.testimonial-card:hover{
  transform:translateY(-10px);

  border-color:
  rgba(255,255,255,.18);

  box-shadow:
  0 0 60px rgba(255,255,255,.06);
}

.testimonial-stars{
  color:white;
  letter-spacing:3px;
  margin-bottom:20px;
}

.testimonial-user{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.testimonial-avatar{
  width:52px;
  height:52px;

  border-radius:50%;

  background:
  rgba(255,255,255,.1);

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

  font-weight:700;

  transition:.3s;
}

.testimonial-card:hover
.testimonial-avatar{
  transform:scale(1.08);
}

.testimonial-user h4{
  margin:0;
}

.testimonial-user span{
  color:#888;
  font-size:14px;
}

.testimonial-card p{
  color:#cfcfcf;
  line-height:1.7;
}

@media(max-width:900px){

.testimonial-grid{
grid-template-columns:1fr;
}

}
.contact-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.contact-info h2{
  font-size:56px;
  margin:20px 0;
}

.contact-info p{
  color:#aaa;
  line-height:1.8;
  margin-bottom:30px;
}

.contact-features{
  display:grid;
  gap:16px;
}

.contact-feature{
  padding:18px 22px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.contact-card{
  padding:34px;
  border-radius:30px;

  background:
  linear-gradient(
  145deg,
  rgba(255,255,255,.06),
  rgba(255,255,255,.02)
  );

  border:
  1px solid rgba(255,255,255,.1);

  box-shadow:
  0 0 70px rgba(255,255,255,.05);
}

.contact-form{
  display:grid;
  gap:18px;
}

.contact-form input,
.contact-form textarea{

  padding:18px;

  border-radius:16px;

  border:
  1px solid rgba(255,255,255,.08);

  background:
  rgba(255,255,255,.03);

  color:white;
}

.contact-form textarea{
  min-height:140px;
  resize:none;
}

.contact-form button{

  height:58px;

  border:none;

  border-radius:16px;

  background:white;

  color:black;

  font-weight:700;

  cursor:pointer;

  transition:.3s;
}

.contact-form button:hover{
  transform:translateY(-3px);
}

@media(max-width:900px){

.contact-layout{
grid-template-columns:1fr;
}

.contact-info h2{
font-size:42px;
}

}
.contact-premium-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:40px;
  margin-top:55px;
}

.contact-left{
  display:grid;
  gap:16px;
  align-content:start;
}

.contact-pill,
.contact-socials a{
  text-decoration:none;
  color:white;
  padding:18px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  transition:.3s;
}

.contact-pill:hover,
.contact-socials a:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.25);
  box-shadow:0 0 45px rgba(255,255,255,.06);
}

.contact-socials{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.contact-premium-form{
  padding:36px;
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  display:grid;
  gap:14px;
}

.contact-premium-form label,
.contact-premium-form small{
  color:#888;
  font-size:13px;
}

.contact-premium-form input,
.contact-premium-form textarea{
  width:100%;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  color:white;
  outline:none;
}

.contact-premium-form textarea{
  min-height:150px;
  resize:vertical;
}

.contact-premium-form input:focus,
.contact-premium-form textarea:focus{
  border-color:rgba(255,255,255,.3);
  box-shadow:0 0 35px rgba(255,255,255,.05);
}

.contact-premium-form button{
  margin-top:8px;
  height:58px;
  border:none;
  border-radius:999px;
  background:white;
  color:black;
  font-weight:800;
  cursor:pointer;
  transition:.3s;
}

.contact-premium-form button:hover{
  transform:translateY(-3px);
}

@media(max-width:900px){
  .contact-premium-layout{
    grid-template-columns:1fr;
  }

  .contact-socials{
    grid-template-columns:1fr;
  }
}
.hero-preview-card{
  position:relative;
  overflow:hidden;
  padding:38px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:0 0 90px rgba(255,255,255,.06);
  animation:heroCardFloat 5s ease-in-out infinite;
}

@keyframes heroCardFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-10px) rotate(.4deg);}
}

.preview-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px;
}

.preview-header span{
  color:#aaa;
  letter-spacing:6px;
  font-size:14px;
  font-weight:700;
}

.preview-dots{
  display:flex;
  gap:8px;
}

.preview-dots i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  animation:dotBlink 2s infinite;
}

.preview-dots i:nth-child(2){animation-delay:.3s;}
.preview-dots i:nth-child(3){animation-delay:.6s;}

@keyframes dotBlink{
  50%{background:white;box-shadow:0 0 18px rgba(255,255,255,.7);}
}

.hero-preview-card h3{
  font-size:27px;
  margin-bottom:28px;
}

.preview-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:26px;
}

.preview-stats div{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  animation:statMove 3s ease-in-out infinite;
}

.preview-stats div:nth-child(2){animation-delay:.3s;}
.preview-stats div:nth-child(3){animation-delay:.6s;}

@keyframes statMove{
  50%{
    transform:translateY(-5px);
    border-color:rgba(255,255,255,.28);
  }
}

.preview-stats span{
  display:block;
  color:#888;
  margin-bottom:8px;
}

.preview-stats strong{
  font-size:22px;
}

.preview-chart{
  position:relative;
  height:160px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(to top,rgba(255,255,255,.18),transparent);
  overflow:hidden;
  margin-bottom:24px;
}

.preview-wave{
  position:absolute;
  left:-20%;
  bottom:45%;
  width:140%;
  height:3px;
  background:white;
  border-radius:999px;
  box-shadow:0 0 22px rgba(255,255,255,.5);
  animation:waveMove 3.5s ease-in-out infinite;
}

@keyframes waveMove{
  0%,100%{transform:translateX(0) rotate(-4deg);}
  50%{transform:translateX(45px) rotate(4deg);}
}

.preview-chart::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:translateX(-100%);
  animation:scanPreview 3s infinite;
}

@keyframes scanPreview{
  60%,100%{transform:translateX(100%);}
}

.preview-logo-mark{
  position:absolute;
  right:40px;
  top:10px;
  font-size:170px;
  opacity:.08;
  font-weight:700;
}

.preview-progress-text{
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
  color:#ddd;
  font-size:14px;
}

.preview-progress{
  height:9px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}

.preview-progress div{
  height:100%;
  width:68%;
  background:white;
  border-radius:999px;
  animation:progressGlow 2.5s ease-in-out infinite;
}

@keyframes progressGlow{
  50%{box-shadow:0 0 24px rgba(255,255,255,.7);}
}

@media(max-width:900px){
  .preview-stats{
    grid-template-columns:1fr;
  }
}
.diagnostic-back{
  position:fixed;
  top:30px;
  left:30px;

  padding:12px 18px;

  border-radius:999px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.1);

  color:white;

  text-decoration:none;

  font-size:14px;

  transition:.3s;

  z-index:9999;
}

.diagnostic-back:hover{
  transform:translateY(-2px);

  border-color:rgba(255,255,255,.25);

  box-shadow:0 0 25px rgba(255,255,255,.08);
}
.checkout-body {
  background: #000;
  min-height: 100vh;
}

.checkout-wrapper {
  width: min(900px, 92%);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0;
}

.checkout-header {
  text-align: center;
  margin-bottom: 38px;
}

.checkout-header img {
  width: 170px;
  margin-bottom: 26px;
}

.checkout-header span {
  color: #aaa;
  letter-spacing: 5px;
  font-size: 12px;
}

.checkout-header h1 {
  font-size: clamp(42px, 6vw, 66px);
  margin: 18px 0;
}

.checkout-header p {
  color: #aaa;
  font-size: 18px;
}

.checkout-card {
  padding: 40px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: 0 0 90px rgba(255,255,255,.06);
}

.checkout-plan {
  margin-bottom: 30px;
}

.checkout-plan span {
  color: #999;
  font-size: 13px;
}

.checkout-plan h2 {
  font-size: 42px;
  margin: 12px 0;
}

.checkout-plan p {
  color: #aaa;
}

.payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.payment-option {
  text-decoration: none;
  color: white;
  padding: 28px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  transition: .3s;
}

.payment-option:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 0 50px rgba(255,255,255,.08);
}

.payment-option span {
  color: #aaa;
}

.payment-option strong {
  display: block;
  font-size: 38px;
  margin: 14px 0;
}

.payment-option small {
  color: #999;
}

.featured-payment {
  border-color: rgba(255,255,255,.28);
}

.checkout-note {
  margin-top: 26px;
  color: #aaa;
  line-height: 1.6;
}

@media(max-width:900px) {
  .payment-options {
    grid-template-columns: 1fr;
  }
}
.buy-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  width:240px;
  height:70px;

  margin:60px auto 0;

  border:none;
  border-radius:999px;

  background:#d4af37;
  color:#000;

  font-size:1.1rem;
  font-weight:700;
  letter-spacing:.5px;

  cursor:pointer;

  transition:.3s ease;
}

.buy-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 25px rgba(212,175,55,.4);
}
.profile-premium{
  margin-top:35px;
}

.profile-main-card{
  display:flex;
  align-items:center;
  gap:24px;
  padding:34px;
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  margin-bottom:30px;
}

.profile-avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#fff;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  font-weight:900;
}

.profile-main-card h2{
  font-size:34px;
  margin-bottom:6px;
}

.profile-main-card p{
  color:#aaa;
}

.profile-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.profile-option-card{
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  transition:.3s ease;
  cursor:pointer;
}

.profile-option-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 0 50px rgba(255,255,255,.06);
}

.profile-option-card span{
  font-size:28px;
}

.profile-option-card h3{
  margin:18px 0 8px;
  font-size:22px;
}

.profile-option-card p{
  color:#aaa;
  line-height:1.5;
}

.logout-card:hover{
  border-color:rgba(255,80,80,.35);
  box-shadow:0 0 50px rgba(255,0,0,.08);
}

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

  .profile-main-card{
    flex-direction:column;
    text-align:center;
  }
}
.dashboard-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:38px;
  position:relative;
}

.topbar-label{
  color:#888;
  font-size:12px;
  letter-spacing:4px;
}

.dashboard-topbar h2{
  font-size:30px;
  margin-top:8px;
}

.topbar-profile{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:.3s;
}

.topbar-profile:hover{
  border-color:rgba(255,255,255,.25);
  box-shadow:0 0 35px rgba(255,255,255,.06);
}

.topbar-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:white;
  color:black;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.topbar-profile small{
  display:block;
  color:#888;
  font-size:12px;
}

.profile-dropdown{
  position:absolute;
  top:76px;
  right:0;
  width:240px;
  padding:12px;
  border-radius:22px;
  background:#090909;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 70px rgba(255,255,255,.08);
  display:none;
  z-index:999;
}

.profile-dropdown.active{
  display:grid;
  gap:8px;
  animation:dropdownPop .25s ease;
}

@keyframes dropdownPop{
  from{opacity:0; transform:translateY(-10px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.profile-dropdown button{
  width:100%;
  text-align:left;
  padding:13px 14px;
  border:none;
  border-radius:14px;
  background:transparent;
  color:#ddd;
  cursor:pointer;
}

.profile-dropdown button:hover{
  background:rgba(255,255,255,.07);
  color:white;
}

@media(max-width:900px){
  .dashboard-topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .profile-dropdown{
    left:0;
    right:auto;
  }
}
/*=============================
CONFIGURACIÓN
==============================*/

.modal-overlay{

position:fixed;

inset:0;

background:rgba(0,0,0,.75);

backdrop-filter:blur(12px);

display:none;

justify-content:center;

align-items:center;

z-index:5000;

}

.modal-overlay.active{

display:flex;

animation:fadeModal .25s;

}

@keyframes fadeModal{

from{

opacity:0;

}

to{

opacity:1;

}

}

.settings-modal{

width:640px;

background:#090909;

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

padding:34px;

box-shadow:0 0 70px rgba(255,255,255,.06);

}

.settings-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.settings-header span{

font-size:12px;

letter-spacing:4px;

color:#888;

}

.settings-header h2{

margin-top:8px;

font-size:34px;

}

.settings-header button{

background:none;

border:none;

color:white;

font-size:24px;

cursor:pointer;

}

.profile-preview{

display:flex;

align-items:center;

gap:25px;

margin-bottom:35px;

}

.profile-avatar-large{

width:95px;

height:95px;

border-radius:50%;

background:white;

color:black;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

font-weight:700;

}

.settings-form{

display:grid;

gap:16px;

}

.settings-form label{

font-size:14px;

color:#bbb;

}

.settings-form input{

height:55px;

background:#111;

border:1px solid rgba(255,255,255,.08);

border-radius:14px;

padding:0 18px;

color:white;

font-size:16px;

}

.settings-form input:focus{

outline:none;

border-color:white;

}

.save-profile-btn{

margin-top:28px;

width:100%;

height:58px;

border:none;

border-radius:16px;

background:white;

color:black;

font-weight:700;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.save-profile-btn:hover{

transform:translateY(-2px);

box-shadow:0 0 35px rgba(255,255,255,.25);

}
/* =========================
   TEMAS ONIX COMPLETOS
========================= */

.dashboard-body{
  --accent:#ffffff;
  --accent-rgb:255,255,255;
  --bg-main:#000;
  --panel-bg:rgba(255,255,255,.035);
  --panel-border:rgba(255,255,255,.12);
  --text-main:#fff;
  --text-soft:#aaa;

  background:#000;
  color:var(--text-main);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* OLA GENERAL */
.dashboard-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;

  background:
    radial-gradient(circle at 20% 10%, rgba(var(--accent-rgb),.16), transparent 28%),
    radial-gradient(circle at 85% 85%, rgba(var(--accent-rgb),.12), transparent 30%),
    linear-gradient(135deg, var(--bg-main), #000);
}

.dashboard-body::after{

    content:"";

    position:fixed;

    top:-5%;

    left:-30%;

    width:170%;

    height:120%;

    pointer-events:none;

    z-index:-1;

    opacity:.95;

    background-repeat:no-repeat;

    background-size:140% 100%;

    animation:waveMove 22s linear infinite;

}

/* DORADO PREMIUM */
.dashboard-body.theme-gold{
  --accent:#d4af37;
  --accent-rgb:212,175,55;
  --bg-main:#070500;
  --panel-bg:rgba(212,175,55,.055);
  --panel-border:rgba(212,175,55,.28);
  --text-main:#fff7da;
  --text-soft:#cbb976;
}

/* BLANCO ELEGANTE */
.theme-white{

--accent:#222;

--accent-rgb:30,30,30;

--bg-main:#f4f4f4;

--panel-bg:rgba(255,255,255,.82);

--panel-border:rgba(0,0,0,.08);

--text-main:#111111;

--text-soft:#555555;

background:#f4f4f4;

}

.theme-white h1,
.theme-white h2,
.theme-white h3,
.theme-white h4,
.theme-white strong,
.theme-white span,
.theme-white label{

color:#111 !important;

}

.theme-white p,
.theme-white small,
.theme-white li{

color:#555 !important;

}

.theme-white::after{

background:

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='700'%3E%3Cpath d='M0 420 C180 260 360 580 560 420 C760 260 980 560 1180 390 C1380 220 1600 560 1800 360' fill='none' stroke='%23d8d8d8' stroke-width='2'/%3E%3Cpath d='M0 500 C200 340 420 620 620 470 C820 320 1040 610 1260 450 C1480 290 1680 560 1800 430' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");

filter:blur(.4px);

}

/* NEGRO PREDETERMINADO */
.dashboard-body.theme-default{
  --accent:#d9d9d9;
  --accent-rgb:217,217,217;
  --bg-main:#000;
  --panel-bg:rgba(255,255,255,.04);
  --panel-border:rgba(255,255,255,.12);
  --text-main:#fff;
  --text-soft:#aaa;
}

/* BLUECOLD */
.dashboard-body.theme-blue{
  --accent:#00aaff;
  --accent-rgb:0,170,255;
  --bg-main:#000814;
  --panel-bg:rgba(0,170,255,.055);
  --panel-border:rgba(0,170,255,.3);
  --text-main:#e9f8ff;
  --text-soft:#8edcff;
}

/* APLICACIÓN GLOBAL */
.dashboard-main,
.dashboard-sidebar{
  color:var(--text-main);
}

.dashboard-sidebar{
  background:rgba(0,0,0,.72);
  border-right:1px solid var(--panel-border);
}

.theme-white .dashboard-sidebar{
  background:rgba(255,255,255,.65);
}

.dash-card,
.goal-card,
.profile-main-card,
.profile-option-card,
.sidebar-plan,
.settings-modal,
.profile-dropdown,
.topbar-profile{
  background:var(--panel-bg) !important;
  border:1px solid var(--panel-border) !important;
  color:var(--text-main);
  box-shadow:0 0 45px rgba(var(--accent-rgb),.04);
}

.dash-card:hover,
.goal-card:hover,
.profile-option-card:hover,
.topbar-profile:hover{
  border-color:var(--accent) !important;
  box-shadow:0 0 45px rgba(var(--accent-rgb),.22);
  transform:translateY(-3px);
}

.dashboard-menu .dash-link{
  color:var(--text-soft);
}

.dashboard-menu .dash-link.active{
  background:rgba(var(--accent-rgb),.12);
  color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.45);
  box-shadow:0 0 28px rgba(var(--accent-rgb),.18);
}

.topbar-label,
#sidePlan,
#dashPlan,
#profilePlan,
.dash-card h3,
.goal-card h3,
.profile-option-card:hover h3{
  color:var(--accent) !important;
}

.dash-subtitle,
.dash-card p,
.goal-card p,
.profile-option-card p,
.topbar-profile small{
  color:var(--text-soft);
}

.dash-progress{
  background:rgba(var(--accent-rgb),.14);
}

.dash-progress div{
  background:linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),.35));
  box-shadow:0 0 20px rgba(var(--accent-rgb),.35);
}

.profile-avatar,
.topbar-avatar,
.profile-avatar-large{
  background:var(--accent);
  color:#000;
  box-shadow:0 0 35px rgba(var(--accent-rgb),.35);
}

.theme-white .profile-avatar,
.theme-white .topbar-avatar,
.theme-white .profile-avatar-large{
  background:#111;
  color:white;
}

/* OLAS POR TEMA */
.theme-gold::after{
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='700'%3E%3Cpath d='M0 420 C180 260 360 580 560 420 C760 260 980 560 1180 390 C1380 220 1600 560 1800 360' fill='none' stroke='%23d4af37' stroke-width='2'/%3E%3Cpath d='M0 500 C200 340 420 620 620 470 C820 320 1040 610 1260 450 C1480 290 1680 560 1800 430' fill='none' stroke='%23f5d66f' stroke-width='1.4' opacity='.7'/%3E%3C/svg%3E");
  filter:blur(.4px);
}

.theme-white::after{
  background:
    linear-gradient(120deg, transparent 10%, rgba(255,255,255,.95), transparent 45%, rgba(180,180,180,.25), transparent 80%);
  filter:blur(22px);
  opacity:.9;
}

.theme-default::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='700'%3E%3Cpath d='M0 420 C180 260 360 580 560 420 C760 260 980 560 1180 390 C1380 220 1600 560 1800 360' fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='2'/%3E%3Cpath d='M0 500 C200 340 420 620 620 470 C820 320 1040 610 1260 450 C1480 290 1680 560 1800 430' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.5'/%3E%3C/svg%3E");
    filter:blur(.4px);
}

.theme-blue::after{
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1800' height='700'%3E%3Cpath d='M0 420 C180 260 360 580 560 420 C760 260 980 560 1180 390 C1380 220 1600 560 1800 360' fill='none' stroke='%2300aaff' stroke-width='2'/%3E%3Cpath d='M0 500 C200 340 420 620 620 470 C820 320 1040 610 1260 450 C1480 290 1680 560 1800 430' fill='none' stroke='%2368cfff' stroke-width='1.5' opacity='.7'/%3E%3C/svg%3E");
  filter:blur(.4px);
}

/* MODAL APARIENCIA */
.appearance-modal{
  max-width:860px;
}

.theme-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.theme-card{
  text-align:left;
  border-radius:22px;
  padding:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:white;
  cursor:pointer;
  transition:.3s;
}

.theme-white .theme-card{
  color:#111;
  background:rgba(255,255,255,.75);
  border-color:rgba(0,0,0,.12);
}

.theme-card:hover,
.theme-card.active{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 0 35px rgba(var(--accent-rgb),.28);
}

.theme-preview{
  height:120px;
  border-radius:16px;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.14);
  position:relative;
  overflow:hidden;
}

.theme-preview::after{
  content:"";
  position:absolute;
  inset:35% -20% auto -20%;
  height:70px;
  border-radius:50%;
  filter:blur(12px);
}

.gold-preview{
  background:linear-gradient(135deg,#000,#201600);
}

.gold-preview::after{
  background:rgba(212,175,55,.8);
}

.white-preview{
  background:linear-gradient(135deg,#fff,#dcdcdc);
}

.white-preview::after{
  background:rgba(255,255,255,.95);
}

.dark-preview{
  background:linear-gradient(135deg,#000,#161616);
}

.dark-preview::after{
  background:rgba(255,255,255,.22);
}

.blue-preview{
  background:linear-gradient(135deg,#000,#001c38);
}

.blue-preview::after{
  background:rgba(0,170,255,.85);
}

.theme-card p{
  color:var(--text-soft);
}

@media(max-width:900px){
  .theme-grid{
    grid-template-columns:1fr;
  }
}
/*=========================
      ONIX WAVES
==========================*/

@keyframes waveMove{

0%{

transform:
translateX(0px)
translateY(0px)
scale(1);

}

25%{

transform:
translateX(-90px)
translateY(8px)
scale(1.02);

}

50%{

transform:
translateX(-180px)
translateY(-6px)
scale(1.04);

}

75%{

transform:
translateX(-90px)
translateY(8px)
scale(1.02);

}

100%{

transform:
translateX(0px)
translateY(0px)
scale(1);

}

}
/* =========================
   ARREGLO OLAS VISIBLES + ANIMADAS
========================= */

.dashboard-body::after{
  content:"";
  position:fixed;
  top:0;
  left:-25%;
  width:160%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.85;
  background-repeat:repeat-x;
  background-size:1200px 420px;
  animation:onixWaveSlide 18s linear infinite;
}

.dashboard-layout,
.dashboard-main,
.dashboard-sidebar{
  position:relative;
  z-index:2;
}

@keyframes onixWaveSlide{
  0%{
    background-position:0 18%, 0 78%;
  }
  100%{
    background-position:1200px 18%, -1200px 78%;
  }
}

/* Blanco elegante */
.theme-white::after{
  background-image:
    url("data:image/svg+xml,%3Csvg width='1200' height='420' viewBox='0 0 1200 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='.95'%3E%3Cpath d='M0 130 C180 40 300 230 500 120 C720 0 840 250 1200 100'/%3E%3Cpath d='M0 165 C220 70 340 260 540 155 C760 45 900 290 1200 140' opacity='.75'/%3E%3Cpath d='M0 200 C210 110 360 300 590 190 C800 90 930 310 1200 180' opacity='.55'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='1200' height='420' viewBox='0 0 1200 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d8d8d8' stroke-width='2' opacity='.65'%3E%3Cpath d='M0 250 C180 160 300 350 500 240 C720 120 840 370 1200 220'/%3E%3Cpath d='M0 285 C220 190 340 380 540 275 C760 165 900 410 1200 260' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
  filter:none;
}

/* Dorado */
.theme-gold::after{
  background-image:
    url("data:image/svg+xml,%3Csvg width='1200' height='420' viewBox='0 0 1200 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='2' opacity='.8'%3E%3Cpath d='M0 130 C180 40 300 230 500 120 C720 0 840 250 1200 100'/%3E%3Cpath d='M0 165 C220 70 340 260 540 155 C760 45 900 290 1200 140' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}

/* Negro */
.theme-default::after{
  background-image:
    url("data:image/svg+xml,%3Csvg width='1200' height='420' viewBox='0 0 1200 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='.22'%3E%3Cpath d='M0 130 C180 40 300 230 500 120 C720 0 840 250 1200 100'/%3E%3Cpath d='M0 165 C220 70 340 260 540 155 C760 45 900 290 1200 140' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* BlueCold */
.theme-blue::after{
  background-image:
    url("data:image/svg+xml,%3Csvg width='1200' height='420' viewBox='0 0 1200 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2300aaff' stroke-width='2' opacity='.8'%3E%3Cpath d='M0 130 C180 40 300 230 500 120 C720 0 840 250 1200 100'/%3E%3Cpath d='M0 165 C220 70 340 260 540 155 C760 45 900 290 1200 140' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}
.security-modal{

width:560px;

}

.security-section{

margin:30px 0;

}

.security-section h4{

margin-bottom:12px;

color:var(--text-soft);

}

.security-box{

padding:22px;

border-radius:18px;

background:rgba(var(--accent-rgb),.05);

border:1px solid var(--panel-border);

}

.security-box strong{

display:block;

font-size:20px;

margin-bottom:8px;

color:var(--accent);

}

.security-box p{

color:var(--text-soft);

}



.security-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

margin-bottom:14px;

border-radius:18px;

border:1px solid var(--panel-border);

background:rgba(var(--accent-rgb),.04);

transition:.3s;

}

.security-item:hover{

transform:translateY(-2px);

border-color:var(--accent);

}

.security-item h3{

margin-bottom:6px;

}

.security-item p{

color:var(--text-soft);

}

.security-status{

padding:8px 16px;

border-radius:999px;

background:#1fbf63;

color:white;

font-weight:600;

}
/* =========================
   SEGURIDAD MODAL PRO FIX
========================= */

#securityModal .security-modal{
  width:620px !important;
  max-width:90vw !important;
  padding:34px !important;
  border-radius:28px !important;
}

#securityModal .settings-header{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  margin-bottom:28px !important;
}

#securityModal .settings-header span{
  display:block !important;
  font-size:12px !important;
  letter-spacing:4px !important;
  color:var(--text-soft) !important;
  margin-bottom:8px !important;
}

#securityModal .settings-header h2{
  font-size:34px !important;
  line-height:1.1 !important;
}

#securityModal .settings-header button{
  background:transparent !important;
  border:none !important;
  color:var(--text-main) !important;
  font-size:24px !important;
  cursor:pointer !important;
}

#securityModal .security-section{
  margin-bottom:22px !important;
}

#securityModal .security-section h4{
  font-size:14px !important;
  color:var(--text-soft) !important;
  margin-bottom:10px !important;
}

#securityModal .security-box{
  padding:22px !important;
  border-radius:20px !important;
  background:rgba(var(--accent-rgb),.06) !important;
  border:1px solid var(--panel-border) !important;
}

#securityModal .security-box strong{
  display:block !important;
  font-size:20px !important;
  color:var(--accent) !important;
  margin-bottom:8px !important;
  word-break:break-word !important;
}

#securityModal .security-box p{
  color:var(--text-soft) !important;
  line-height:1.5 !important;
}

#securityModal .security-item{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:24px !important;
  padding:20px !important;
  margin-bottom:14px !important;
  border-radius:20px !important;
  background:rgba(var(--accent-rgb),.05) !important;
  border:1px solid var(--panel-border) !important;
}

#securityModal .security-item h3{
  font-size:18px !important;
  margin-bottom:6px !important;
  color:var(--text-main) !important;
}

#securityModal .security-item p{
  color:var(--text-soft) !important;
  line-height:1.5 !important;
}

#securityModal .security-item span{
  white-space:nowrap !important;
  font-weight:700 !important;
  color:var(--accent) !important;
}

#securityModal .security-status{
  padding:8px 16px !important;
  border-radius:999px !important;
  background:#1fbf63 !important;
  color:white !important;
}

#securityModal #securityLogout{
  margin-top:20px !important;
}
/* =========================
   SUSCRIPCIÓN MODAL PRO FIX
========================= */

#subscriptionModal .subscription-modal{
  width:650px !important;
  max-width:90vw !important;
  padding:34px !important;
  border-radius:28px !important;
}

#subscriptionModal .subscription-header{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:24px !important;
  border-radius:22px !important;
  background:rgba(var(--accent-rgb),.06) !important;
  border:1px solid var(--panel-border) !important;
  margin:26px 0 !important;
}

#subscriptionModal .subscription-header h3{
  font-size:30px !important;
  color:var(--accent) !important;
  margin-bottom:8px !important;
}

#subscriptionModal .subscription-header p{
  color:var(--text-soft) !important;
}

#subscriptionModal .subscription-badge{
  padding:10px 20px !important;
  border-radius:999px !important;
  background:#1fbf63 !important;
  color:white !important;
  font-weight:800 !important;
}

#subscriptionModal .subscription-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:16px !important;
  margin:24px 0 !important;
}

#subscriptionModal .subscription-card{
  padding:22px !important;
  border-radius:20px !important;
  border:1px solid var(--panel-border) !important;
  background:rgba(var(--accent-rgb),.05) !important;
}

#subscriptionModal .subscription-card span{
  display:block !important;
  color:var(--text-soft) !important;
  margin-bottom:8px !important;
}

#subscriptionModal .subscription-card strong{
  display:block !important;
  font-size:20px !important;
  color:var(--accent) !important;
}

#subscriptionModal .subscription-buttons{
  display:flex !important;
  gap:16px !important;
  margin-top:24px !important;
}

#subscriptionModal .subscription-buttons button{
  flex:1 !important;
  height:56px !important;
  border-radius:16px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

#changePlanBtn{
  background:var(--accent) !important;
  color:black !important;
  border:none !important;
}

#cancelPlanBtn{
  background:transparent !important;
  color:var(--text-main) !important;
  border:1px solid var(--panel-border) !important;
}
/* =========================================
   ONIX DASHBOARD V2 — DESIGN SYSTEM
   SOLO AFECTA DASHBOARD
========================================= */
/* =========================================
   DASHBOARD V2 BASE
========================================= */

.dashboard-body{
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.dashboard-body .dashboard-layout{
  min-height:100vh;
}

.dashboard-body .dashboard-main{
  padding:64px;
  max-width:1800px;
}

.dashboard-body .dashboard-sidebar{
  width:300px;
  padding:32px 26px;
  border-right:1px solid var(--panel-border);
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(26px);
}

.dashboard-body.theme-white .dashboard-sidebar{
  background:rgba(255,255,255,.72);
}

.dashboard-body .dashboard-logo{
  width:145px;
  margin-bottom:70px;
}

.dashboard-body .dashboard-menu{
  gap:14px;
}

.dashboard-body .dash-link{
  height:54px;
  padding:0 20px;
  border-radius:18px;
  font-size:15px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid transparent;
}

.dashboard-body .dash-link.active{
  background:rgba(var(--accent-rgb),.12) !important;
  color:var(--accent) !important;
  border:1px solid rgba(var(--accent-rgb),.45) !important;
  box-shadow:0 0 35px rgba(var(--accent-rgb),.16);
}

.dashboard-body .sidebar-plan{
  padding:28px;
  border-radius:26px;
  background:rgba(var(--accent-rgb),.06) !important;
  border:1px solid var(--panel-border) !important;
}
/* =========================================
   DASHBOARD V2 — TOPBAR Y CARDS
========================================= */

.dashboard-body .dashboard-topbar{
  min-height:92px;
  padding:26px 30px;
  margin-bottom:42px;
  border-radius:34px;
  background:rgba(var(--accent-rgb),.045);
  border:1px solid var(--panel-border);
  box-shadow:0 0 60px rgba(var(--accent-rgb),.06);
  backdrop-filter:blur(24px);
}

.dashboard-body .topbar-label{
  color:var(--accent) !important;
  font-weight:800;
}

.dashboard-body .dashboard-topbar h2{
  font-size:34px;
  letter-spacing:-1px;
}

.dashboard-body .topbar-profile{
  padding:14px 18px;
  border-radius:999px;
  background:rgba(var(--accent-rgb),.07) !important;
}

.dashboard-body .dash-grid{
  grid-template-columns:1.4fr 1fr;
  gap:28px;
}

.dashboard-body .dash-card,
.dashboard-body .goal-card,
.dashboard-body .profile-main-card,
.dashboard-body .profile-option-card{
  border-radius:34px !important;
  padding:34px !important;
  background:rgba(var(--accent-rgb),.045) !important;
  border:1px solid var(--panel-border) !important;
  box-shadow:
    0 0 55px rgba(var(--accent-rgb),.045),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(26px);
}

.dashboard-body .dash-card:hover,
.dashboard-body .goal-card:hover,
.dashboard-body .profile-option-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 0 70px rgba(var(--accent-rgb),.16),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.dashboard-body .dash-card span,
.dashboard-body .goal-card span{
  display:block;
  margin-bottom:14px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:800;
}

.dashboard-body .dash-card h3,
.dashboard-body .goal-card h3{
  font-size:clamp(28px,3vw,42px);
  letter-spacing:-1.5px;
}

.dashboard-body .big-card{
  min-height:300px;
}
/* =========================================
   DASHBOARD V2 — BOTONES
========================================= */

.dashboard-body .dash-logout,
.dashboard-body #saveSessionBtn,
.dashboard-body #saveGoalBtn,
.dashboard-body .save-profile-btn,
.dashboard-body #changePlanBtn{
  height:58px !important;
  padding:0 24px !important;
  border-radius:18px !important;
  border:none !important;
  background:var(--accent) !important;
  color:#000 !important;
  font-weight:900 !important;
  letter-spacing:.2px;
  cursor:pointer;
  transition:.28s ease !important;
  box-shadow:0 0 32px rgba(var(--accent-rgb),.18);
}

.dashboard-body .dash-logout:hover,
.dashboard-body #saveSessionBtn:hover,
.dashboard-body #saveGoalBtn:hover,
.dashboard-body .save-profile-btn:hover,
.dashboard-body #changePlanBtn:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 0 55px rgba(var(--accent-rgb),.32);
}

.dashboard-body #cancelPlanBtn,
.dashboard-body .diagnostic-back-btn{
  height:58px !important;
  padding:0 24px !important;
  border-radius:18px !important;
  background:rgba(var(--accent-rgb),.04) !important;
  border:1px solid var(--panel-border) !important;
  color:var(--text-main) !important;
  font-weight:800 !important;
  cursor:pointer;
  transition:.28s ease !important;
}

.dashboard-body #cancelPlanBtn:hover,
.dashboard-body .diagnostic-back-btn:hover{
  transform:translateY(-3px);
  border-color:var(--accent) !important;
  box-shadow:0 0 45px rgba(var(--accent-rgb),.18);
}
/* =========================================
   DASHBOARD V2 — INPUTS Y MODALES
========================================= */

.dashboard-body .modal-overlay{
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(22px) !important;
}

.dashboard-body .settings-modal,
.dashboard-body .goal-modal-content{
  border-radius:34px !important;
  padding:38px !important;
  background:rgba(10,10,10,.88) !important;
  border:1px solid var(--panel-border) !important;
  box-shadow:
    0 0 90px rgba(var(--accent-rgb),.12),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(28px) !important;
}

.dashboard-body.theme-white .settings-modal,
.dashboard-body.theme-white .goal-modal-content{
  background:rgba(255,255,255,.86) !important;
}

.dashboard-body .settings-header h2{
  font-size:38px !important;
  letter-spacing:-1.4px;
}

.dashboard-body .settings-header span{
  color:var(--accent) !important;
  font-weight:900;
}

.dashboard-body .settings-form input,
.dashboard-body #goalModal input{
  height:58px !important;
  border-radius:18px !important;
  background:rgba(var(--accent-rgb),.055) !important;
  border:1px solid var(--panel-border) !important;
  color:var(--text-main) !important;
  font-weight:700;
}

.dashboard-body .settings-form input:focus,
.dashboard-body #goalModal input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 36px rgba(var(--accent-rgb),.18);
}

.dashboard-body .profile-dropdown{
  border-radius:26px !important;
  background:rgba(10,10,10,.9) !important;
  backdrop-filter:blur(28px);
}

.dashboard-body.theme-white .profile-dropdown{
  background:rgba(255,255,255,.9) !important;
}

.dashboard-body .profile-dropdown button{
  border-radius:16px !important;
  height:48px;
  font-weight:800;
}
/* =========================================
   DASHBOARD V2 — INPUTS Y MODALES
========================================= */

.dashboard-body .modal-overlay{
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(22px) !important;
}

.dashboard-body .settings-modal,
.dashboard-body .goal-modal-content{
  border-radius:34px !important;
  padding:38px !important;
  background:rgba(10,10,10,.88) !important;
  border:1px solid var(--panel-border) !important;
  box-shadow:
    0 0 90px rgba(var(--accent-rgb),.12),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(28px) !important;
}

.dashboard-body.theme-white .settings-modal,
.dashboard-body.theme-white .goal-modal-content{
  background:rgba(255,255,255,.86) !important;
}

.dashboard-body .settings-header h2{
  font-size:38px !important;
  letter-spacing:-1.4px;
}

.dashboard-body .settings-header span{
  color:var(--accent) !important;
  font-weight:900;
}

.dashboard-body .settings-form input,
.dashboard-body #goalModal input{
  height:58px !important;
  border-radius:18px !important;
  background:rgba(var(--accent-rgb),.055) !important;
  border:1px solid var(--panel-border) !important;
  color:var(--text-main) !important;
  font-weight:700;
}

.dashboard-body .settings-form input:focus,
.dashboard-body #goalModal input:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 36px rgba(var(--accent-rgb),.18);
}

.dashboard-body .profile-dropdown{
  border-radius:26px !important;
  background:rgba(10,10,10,.9) !important;
  backdrop-filter:blur(28px);
}

.dashboard-body.theme-white .profile-dropdown{
  background:rgba(255,255,255,.9) !important;
}

.dashboard-body .profile-dropdown button{
  border-radius:16px !important;
  height:48px;
  font-weight:800;
}
/* =========================================
   SIDEBAR V2 — PREMIUM
========================================= */

.dashboard-body .dashboard-sidebar{
  width:330px !important;
  padding:34px 28px !important;
  border-right:1px solid rgba(var(--accent-rgb),.24) !important;
  background:
    radial-gradient(circle at top, rgba(var(--accent-rgb),.09), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.86)) !important;
  box-shadow:inset -1px 0 0 rgba(var(--accent-rgb),.12);
}

.dashboard-body .dashboard-logo{
  width:190px !important;
  padding:22px !important;
  margin:0 auto 70px !important;
  border-radius:28px;
  background:rgba(0,0,0,.65);
  box-shadow:0 0 45px rgba(var(--accent-rgb),.10);
}

.dashboard-body .dashboard-menu{
  gap:24px !important;
}

.dashboard-body .dash-link{
  height:76px !important;
  padding:0 28px !important;
  border-radius:24px !important;
  font-size:20px !important;
  font-weight:800 !important;
  color:rgba(255,255,255,.72) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  position:relative;
}

.dashboard-body .dash-link:hover{
  color:white !important;
  background:rgba(var(--accent-rgb),.06) !important;
  border-color:rgba(var(--accent-rgb),.18) !important;
  transform:translateX(6px);
}

.dashboard-body .dash-link.active{
  color:white !important;
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.04)) !important;
  border:1px solid rgba(var(--accent-rgb),.45) !important;
  box-shadow:0 0 45px rgba(var(--accent-rgb),.18);
}

.dashboard-body .dash-link.active::before{
  content:"";
  position:absolute;
  left:-2px;
  top:14px;
  width:5px;
  height:48px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 22px rgba(var(--accent-rgb),.75);
}

.dashboard-body .sidebar-plan{
  padding:32px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb),.18), transparent 40%),
    rgba(var(--accent-rgb),.055) !important;
  border:1px solid rgba(var(--accent-rgb),.45) !important;
  box-shadow:0 0 55px rgba(var(--accent-rgb),.14);
}

.dashboard-body .sidebar-plan span{
  font-size:15px !important;
  color:var(--text-soft) !important;
}

.dashboard-body .sidebar-plan strong{
  font-size:34px !important;
  color:var(--accent) !important;
  margin:12px 0 !important;
}

.dashboard-body .sidebar-plan p{
  font-size:18px !important;
  line-height:1.5;
  color:var(--text-main) !important;
}

.dashboard-body .sidebar-plan::after{
  content:"✓  Activo";
  display:block;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid rgba(var(--accent-rgb),.22);
  color:var(--accent);
  font-size:18px;
  font-weight:800;
}

/* Blanco elegante */
.dashboard-body.theme-white .dashboard-sidebar{
  background:
    radial-gradient(circle at top, rgba(255,255,255,.8), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,245,245,.88)) !important;
}

.dashboard-body.theme-white .dash-link{
  color:#333 !important;
}

.dashboard-body.theme-white .dash-link.active{
  color:#111 !important;
}

/* Responsive no se rompe */
@media(max-width:900px){
  .dashboard-body .dashboard-sidebar{
    width:100% !important;
    height:76px !important;
    padding:8px 12px !important;
  }

  .dashboard-body .dash-link{
    height:54px !important;
    font-size:0 !important;
    padding:0 !important;
  }

  .dashboard-body .dash-link.active::before{
    display:none;
  }
}
/* =========================================
   HEADER INTELIGENTE ONIX
========================================= */

.dashboard-body .smart-header h2{
  font-size:42px;
  letter-spacing:-1.6px;
  margin:8px 0;
}

.dashboard-body .smart-header p{
  color:var(--text-soft);
  margin-bottom:12px;
  text-transform:capitalize;
}

.dashboard-body .smart-header strong{
  display:block;
  color:var(--accent);
  font-size:17px;
  font-weight:800;
}  
/* =========================================
   ONIX TODAY + AI
========================================= */

.dashboard-body .onix-today-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  margin-bottom:34px;
}

.dashboard-body .onix-today-card,
.dashboard-body .onix-ai-card{
  padding:34px;
  border-radius:34px;
  background:rgba(var(--accent-rgb),.045);
  border:1px solid var(--panel-border);
  box-shadow:0 0 60px rgba(var(--accent-rgb),.08);
  backdrop-filter:blur(26px);
}

.dashboard-body .onix-today-card span,
.dashboard-body .onix-ai-card span{
  color:var(--accent);
  letter-spacing:5px;
  font-size:12px;
  font-weight:900;
}

.dashboard-body .onix-today-card h3,
.dashboard-body .onix-ai-card h3{
  font-size:32px;
  margin:16px 0 22px;
}

.dashboard-body .today-actions{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.dashboard-body .today-actions div{
  padding:18px;
  border-radius:20px;
  background:rgba(var(--accent-rgb),.055);
  border:1px solid var(--panel-border);
  font-weight:800;
}

.dashboard-body .onix-ai-card p{
  color:var(--text-soft);
  line-height:1.6;
  margin-bottom:24px;
}

.dashboard-body .onix-ai-card button{
  width:100%;
  height:54px;
  border-radius:18px;
  border:1px solid var(--panel-border);
  background:rgba(var(--accent-rgb),.08);
  color:var(--accent);
  font-weight:900;
  cursor:pointer;
  transition:.3s;
}

.dashboard-body .onix-ai-card button:hover{
  transform:translateY(-3px);
  box-shadow:0 0 40px rgba(var(--accent-rgb),.2);
}

@media(max-width:900px){
  .dashboard-body .onix-today-grid{
    grid-template-columns:1fr;
  }

  .dashboard-body .today-actions{
    grid-template-columns:1fr;
  }
}
/* =========================
   NOTIFICACIONES ONIX
========================= */

.notification-btn{
  width:58px;
  height:58px;
  border-radius:20px;
  border:1px solid var(--panel-border);
  background:rgba(var(--accent-rgb),.06);
  color:var(--text-main);
  font-size:22px;
  cursor:pointer;
  position:relative;
  transition:.3s;
}

.notification-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 40px rgba(var(--accent-rgb),.2);
}

.notification-btn span{
  position:absolute;
  top:-8px;
  right:-8px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--accent);
  color:#000;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}

.notifications-panel{
  position:fixed;
  top:0;
  right:-460px;
  width:430px;
  max-width:92vw;
  height:100vh;
  z-index:999999;
  padding:30px;
  background:rgba(10,10,10,.92);
  border-left:1px solid var(--panel-border);
  backdrop-filter:blur(30px);
  box-shadow:-30px 0 90px rgba(0,0,0,.45);
  transition:.4s ease;
}

.notifications-panel.active{
  right:0;
}

.notifications-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:30px;
}

.notifications-header span{
  color:var(--accent);
  font-size:12px;
  letter-spacing:4px;
  font-weight:900;
}

.notifications-header h2{
  font-size:34px;
  margin-top:8px;
}

.notifications-header button{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--panel-border);
  background:rgba(var(--accent-rgb),.06);
  color:var(--text-main);
  cursor:pointer;
}

.notification-list{
  display:grid;
  gap:14px;
}

.notification-item{
  display:flex;
  gap:16px;
  padding:18px;
  border-radius:22px;
  background:rgba(var(--accent-rgb),.045);
  border:1px solid var(--panel-border);
}

.notification-item.unread{
  border-color:var(--accent);
  box-shadow:0 0 35px rgba(var(--accent-rgb),.12);
}

.notification-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--accent-rgb),.10);
}

.notification-item h4{
  margin-bottom:6px;
}

.notification-item p{
  color:var(--text-soft);
  line-height:1.4;
  margin-bottom:8px;
}

.notification-item small{
  color:var(--accent);
  font-weight:800;
}

.theme-white .notifications-panel{
  background:rgba(255,255,255,.92);
}
/* =========================
   PROGRESO RECIENTE ONIX
========================= */

.activity-card{
  margin-top:34px;
  padding:34px;
  border-radius:34px;
  background:rgba(var(--accent-rgb),.045);
  border:1px solid var(--panel-border);
  box-shadow:0 0 60px rgba(var(--accent-rgb),.08);
  backdrop-filter:blur(26px);
}

.activity-card span{
  color:var(--accent);
  letter-spacing:5px;
  font-size:12px;
  font-weight:900;
}

.activity-card h3{
  font-size:28px;
  margin:14px 0 22px;
}

.activity-list{
  display:grid;
  gap:12px;
}

.activity-list div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(var(--accent-rgb),.05);
  border:1px solid var(--panel-border);
  font-weight:800;
}

.activity-list small{
  color:var(--text-soft);
  font-weight:700;
}
/* =========================
   ONIX RESPONSIVE GLOBAL FINAL
========================= */

/* TABLET */
@media(max-width:1100px){

  .navbar,
  .hero,
  .section{
    width:92% !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    gap:48px !important;
    margin:70px auto !important;
  }

  .hero h1{
    font-size:clamp(48px,8vw,72px) !important;
  }

  .cards-grid,
  .plans-grid,
  .services-premium-grid,
  .testimonial-grid,
  .contact-layout,
  .contact-premium-layout,
  .process-layout{
    grid-template-columns:1fr !important;
  }

  .dashboard-layout{
    flex-direction:column !important;
  }

  .dashboard-sidebar{
    position:fixed !important;
    bottom:0 !important;
    top:auto !important;
    left:0 !important;
    width:100% !important;
    height:82px !important;
    padding:10px 14px !important;
    z-index:9999 !important;
    border-right:none !important;
    border-top:1px solid var(--panel-border) !important;
  }

  .dashboard-logo,
  .sidebar-plan{
    display:none !important;
  }

  .dashboard-menu{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:8px !important;
  }

  .dash-link{
    height:58px !important;
    font-size:0 !important;
    justify-content:center !important;
    padding:0 !important;
  }

  .dash-link::first-letter{
    font-size:24px !important;
  }

  .dashboard-main{
    padding:26px 18px 110px !important;
  }

  .dashboard-topbar{
    flex-wrap:wrap !important;
    gap:16px !important;
  }

  .smart-header{
    width:100% !important;
  }

  .dash-grid,
  .onix-today-grid,
  .goals-grid,
  .profile-grid{
    grid-template-columns:1fr !important;
  }

  .big-card{
    grid-column:auto !important;
  }
}

/* TELÉFONO */
@media(max-width:600px){

  .navbar{
    width:92% !important;
    padding:12px 16px !important;
  }

  .navbar nav{
    display:none !important;
  }

  .hero{
    margin:55px auto !important;
  }

  .hero h1{
    font-size:46px !important;
    letter-spacing:-2px !important;
  }

  .hero p,
  .section-text{
    font-size:16px !important;
  }

  .section{
    margin:80px auto !important;
  }

  .section h2{
    font-size:36px !important;
  }

  .login-wrapper,
  .checkout-wrapper{
    width:92% !important;
  }

  .login-panel,
  .checkout-card{
    padding:26px !important;
    border-radius:28px !important;
  }

  .dashboard-topbar{
    padding:22px !important;
    border-radius:28px !important;
  }

  .smart-header h2{
    font-size:30px !important;
  }

  .topbar-profile{
    width:calc(100% - 74px) !important;
  }

  .notification-btn{
    width:58px !important;
    height:58px !important;
  }

  .dash-card,
  .goal-card,
  .profile-main-card,
  .profile-option-card,
  .onix-today-card,
  .onix-ai-card,
  .activity-card{
    padding:26px !important;
    border-radius:28px !important;
  }

  .today-actions{
    grid-template-columns:1fr !important;
  }

  .onix-path{
    grid-template-columns:1fr !important;
  }

  .notifications-panel{
    width:100% !important;
    max-width:100% !important;
  }

  .settings-modal,
  .goal-modal-content{
    width:92vw !important;
    max-height:88vh !important;
    overflow-y:auto !important;
  }

  .payment-options,
  .theme-grid,
  .subscription-grid{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:600px){

  .dashboard-main{
    padding:18px 14px 105px !important;
  }

  .dashboard-topbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    padding:22px !important;
    gap:18px !important;
  }

  .smart-header h2{
    font-size:30px !important;
    line-height:1.1 !important;
  }

  .smart-header p{
    font-size:14px !important;
  }

  .smart-header strong{
    font-size:18px !important;
    line-height:1.4 !important;
  }

  .notification-btn{
    position:absolute !important;
    top:22px !important;
    right:22px !important;
    width:54px !important;
    height:54px !important;
  }

  .topbar-profile{
    width:100% !important;
    max-width:260px !important;
    margin-top:10px !important;
  }

  .dashboard-sidebar{
    height:76px !important;
  }

  .dashboard-menu{
    grid-template-columns:repeat(5,1fr) !important;
  }

  .dash-link{
    height:58px !important;
    border-radius:20px !important;
  }
}
.goal-modal-content textarea{
  width:100%;
  resize:none;
  border-radius:18px;
  padding:18px;
  background:rgba(var(--accent-rgb),.05);
  border:1px solid var(--panel-border);
  color:var(--text-main);
  font-weight:700;
  outline:none;
  margin-bottom:18px;
}

.goal-modal-content textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 30px rgba(var(--accent-rgb),.18);
}
#goalModal{
    position:fixed !important;
    inset:0 !important;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.8);
    z-index:999999999;
}

#goalModal.active{
    display:flex !important;
}

#goalModal .goal-modal-content{
    width:500px;
    max-width:92%;
    background:#0b0b0b;
    padding:35px;
    border-radius:25px;
    border:1px solid rgba(255,255,255,.12);
}
.diagnostic-mini-table{
  display:grid;
  gap:12px;
  margin-top:20px;
}

.diagnostic-row,
.diagnostic-empty{
  padding:16px;
  border-radius:18px;
  background:rgba(var(--accent-rgb),.055);
  border:1px solid var(--panel-border);
}

.diagnostic-row strong{
  color:var(--accent);
  display:block;
  margin-bottom:6px;
}

.diagnostic-row p{
  color:var(--text-soft);
  line-height:1.45;
  margin-bottom:10px;
}

.diagnostic-row span{
  display:inline-block;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(var(--accent-rgb),.12);
  color:var(--accent);
  font-size:12px;
  font-weight:900;
}

.diagnostic-empty{
  color:var(--text-soft);
}
/* =========================
   REPORTE ONIX PREMIUM
========================= */

.report-wrapper{
  width:min(1180px,92%);
  margin:0 auto;
  padding:60px 0 90px;
}

.report-back{
  display:inline-block;
  margin-bottom:50px;
  color:var(--text-soft);
  text-decoration:none;
  font-weight:800;
}

.report-hero{
  padding:48px;
  border-radius:38px;
  background:rgba(var(--accent-rgb),.045);
  border:1px solid var(--panel-border);
  box-shadow:0 0 80px rgba(var(--accent-rgb),.08);
  margin-bottom:34px;
}

.report-hero span,
.report-card span{
  color:var(--accent);
  letter-spacing:5px;
  font-size:12px;
  font-weight:900;
}

.report-hero h1{
  font-size:clamp(42px,6vw,76px);
  line-height:1;
  margin:18px 0;
}

.report-hero p,
.report-card p{
  color:var(--text-soft);
  line-height:1.6;
}

.report-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.report-card{
  padding:34px;
  border-radius:34px;
  background:rgba(var(--accent-rgb),.045);
  border:1px solid var(--panel-border);
  box-shadow:0 0 60px rgba(var(--accent-rgb),.06);
  backdrop-filter:blur(26px);
}

.big-report-card{
  grid-column:span 2;
}

.report-card h2{
  font-size:42px;
  margin:16px 0;
  color:var(--accent);
}

.report-progress{
  height:12px;
  background:rgba(var(--accent-rgb),.12);
  border-radius:999px;
  overflow:hidden;
  margin-top:24px;
}

.report-progress div{
  height:100%;
  width:0%;
  background:var(--accent);
  border-radius:999px;
  box-shadow:0 0 30px rgba(var(--accent-rgb),.4);
}

.report-list{
  display:grid;
  gap:12px;
  margin-top:20px;
}

.report-list div{
  padding:16px;
  border-radius:18px;
  background:rgba(var(--accent-rgb),.05);
  border:1px solid var(--panel-border);
  font-weight:800;
}

.priority-list{
  display:grid;
  gap:14px;
  margin-top:22px;
}

.priority-list div{
  display:flex;
  gap:18px;
  align-items:center;
  padding:18px;
  border-radius:20px;
  background:rgba(var(--accent-rgb),.05);
  border:1px solid var(--panel-border);
}

.priority-list strong{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--accent);
  color:black;
  display:flex;
  align-items:center;
  justify-content:center;
}

.report-main-btn{
  margin-top:34px;
  width:100%;
  height:64px;
  border:none;
  border-radius:22px;
  background:var(--accent);
  color:black;
  font-weight:900;
  cursor:pointer;
}

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

  .big-report-card{
    grid-column:auto;
  }
}
/* =========================
   SESIONES COMPLETAS ONIX
========================= */
.session-management-card {
  padding: 30px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 26px;
  background: rgba(255,255,255,.035);
}
.session-card-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}
.session-card-head span,
.session-modal-heading span {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--accent, #fff);
  font-weight: 900;
}
.session-card-head h3 { margin: 10px 0 6px; font-size: 28px; }
.session-card-head p { margin: 0; opacity: .72; }
.session-status {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.12);
}
.session-status.confirmed { background: rgba(77, 224, 151, .12); color: #85f0b9; border-color: rgba(77, 224, 151, .25); }
.session-status.pending { background: rgba(255,255,255,.06); color: #aaa; }
.session-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.session-actions button { min-height: 46px; padding: 0 18px; border-radius: 13px; cursor: pointer; font-weight: 800; }
.session-secondary { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.13); }
.session-danger { background: rgba(255, 84, 84, .08); color: #ff8e8e; border: 1px solid rgba(255, 84, 84, .22); }
.session-help { margin-top: 18px; font-size: 13px; opacity: .58; }
.session-modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.session-modal-heading h2 { margin: 8px 0 0; }
.session-modal-heading button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; cursor: pointer; }
.session-selection-summary { min-height: 22px; margin: 8px 0 18px; opacity: .72; font-size: 14px; }
#sessionModal .calendar-day:disabled,
#sessionModal .time-slot:disabled { opacity: .25; cursor: not-allowed; text-decoration: line-through; }
#prevMonth:disabled { opacity: .25; cursor: not-allowed; }
#saveSessionBtn:disabled,
.session-actions button:disabled { opacity: .5; cursor: wait; }
[hidden] { display: none !important; }

@media (max-width: 680px) {
  .session-management-card { padding: 22px; }
  .session-card-head { flex-direction: column; }
  .session-card-head h3 { font-size: 23px; }
  .session-actions { display: grid; grid-template-columns: 1fr; }
  .session-actions button { width: 100%; }
  #sessionModal .goal-modal-content { padding: 22px; max-height: 92vh; }
  #sessionModal .calendar-days,
  #sessionModal .calendar-grid { gap: 4px; }
  #sessionModal .calendar-day { padding: 8px 3px; }
  #sessionModal .time-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ===== ONIX v1.3 · Iconos Lucide y estados de correo ===== */
[data-lucide] {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  flex: 0 0 auto;
}
.dashboard-menu .dash-link,
.profile-dropdown button,
.today-action,
.contact-pill,
.activity-list > div,
#activityList > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dashboard-menu .dash-link [data-lucide] { width: 19px; height: 19px; }
.notification-btn [data-lucide] { width: 21px; height: 21px; }
.notification-icon [data-lucide] { width: 20px; height: 20px; }
.dash-card small [data-lucide] { width: 14px; height: 14px; vertical-align: -2px; }
.input-group [data-lucide] { width: 18px; height: 18px; }
.contact-pill [data-lucide] { width: 17px; height: 17px; }
.onix-form-status {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  font-size: .92rem;
  line-height: 1.45;
}
.onix-form-status.success { border-color: rgba(80, 200, 140, .35); }
.onix-form-status.error { border-color: rgba(255, 100, 100, .4); }

/* ==========================================================
   ONIX DESIGN SYSTEM v1.4
   CSS design tokens + responsive shell. Framework-free by
   design: stable for the current HTML/CSS/JS architecture.
========================================================== */

.dashboard-body {
  --onix-bg: #050506;
  --onix-bg-soft: #0a0a0c;
  --onix-surface: rgba(18, 18, 21, .88);
  --onix-surface-strong: #111114;
  --onix-surface-muted: rgba(255, 255, 255, .045);
  --onix-border: rgba(255, 255, 255, .10);
  --onix-border-strong: rgba(255, 255, 255, .22);
  --onix-text: #f7f7f8;
  --onix-muted: #9a9aa3;
  --onix-accent: #f3f3f4;
  --onix-accent-2: #a5a7ad;
  --onix-on-accent: #09090a;
  --onix-danger: #ff6b73;
  --onix-success: #61d99b;
  --onix-glow: rgba(255, 255, 255, .12);
  --onix-sidebar: rgba(7, 7, 9, .92);
  --onix-shadow: 0 24px 80px rgba(0, 0, 0, .34);
  --onix-radius: 24px;
  background:
    radial-gradient(circle at 78% 5%, var(--onix-glow), transparent 27rem),
    var(--onix-bg);
  color: var(--onix-text);
  min-height: 100vh;
  transition: background-color .25s ease, color .25s ease;
}

.dashboard-body.theme-onyx { color-scheme: dark; }
.dashboard-body.theme-pearl {
  color-scheme: light;
  --onix-bg: #f4f5f7;
  --onix-bg-soft: #eaecf0;
  --onix-surface: rgba(255, 255, 255, .9);
  --onix-surface-strong: #ffffff;
  --onix-surface-muted: rgba(16, 24, 40, .045);
  --onix-border: rgba(16, 24, 40, .11);
  --onix-border-strong: rgba(16, 24, 40, .24);
  --onix-text: #14161a;
  --onix-muted: #667085;
  --onix-accent: #181b20;
  --onix-accent-2: #667085;
  --onix-on-accent: #ffffff;
  --onix-glow: rgba(77, 91, 115, .13);
  --onix-sidebar: rgba(255, 255, 255, .9);
  --onix-shadow: 0 24px 70px rgba(36, 44, 58, .12);
}
.dashboard-body.theme-sapphire {
  color-scheme: dark;
  --onix-bg: #030711;
  --onix-bg-soft: #071020;
  --onix-surface: rgba(8, 19, 39, .88);
  --onix-surface-strong: #0a162b;
  --onix-surface-muted: rgba(84, 151, 255, .08);
  --onix-border: rgba(102, 162, 255, .17);
  --onix-border-strong: rgba(111, 170, 255, .38);
  --onix-text: #f4f8ff;
  --onix-muted: #9eb0ca;
  --onix-accent: #6ea8ff;
  --onix-accent-2: #397ce1;
  --onix-on-accent: #041022;
  --onix-glow: rgba(61, 132, 255, .22);
  --onix-sidebar: rgba(3, 9, 20, .92);
}
.dashboard-body.theme-emerald {
  color-scheme: dark;
  --onix-bg: #03100c;
  --onix-bg-soft: #061812;
  --onix-surface: rgba(8, 29, 22, .88);
  --onix-surface-strong: #0a2119;
  --onix-surface-muted: rgba(80, 218, 160, .075);
  --onix-border: rgba(96, 224, 171, .16);
  --onix-border-strong: rgba(96, 224, 171, .36);
  --onix-text: #effff8;
  --onix-muted: #9bc5b4;
  --onix-accent: #66dda9;
  --onix-accent-2: #31a979;
  --onix-on-accent: #04120d;
  --onix-glow: rgba(48, 196, 134, .2);
  --onix-sidebar: rgba(3, 15, 11, .92);
}
.dashboard-body.theme-amethyst {
  color-scheme: dark;
  --onix-bg: #0b0612;
  --onix-bg-soft: #140a21;
  --onix-surface: rgba(29, 14, 46, .87);
  --onix-surface-strong: #201031;
  --onix-surface-muted: rgba(190, 123, 255, .08);
  --onix-border: rgba(194, 133, 255, .17);
  --onix-border-strong: rgba(194, 133, 255, .38);
  --onix-text: #fbf6ff;
  --onix-muted: #c2a8d4;
  --onix-accent: #c88cff;
  --onix-accent-2: #8d4fc4;
  --onix-on-accent: #160921;
  --onix-glow: rgba(174, 93, 247, .22);
  --onix-sidebar: rgba(12, 5, 20, .92);
}
.dashboard-body.theme-gold {
  color-scheme: dark;
  --onix-bg: #090805;
  --onix-bg-soft: #151108;
  --onix-surface: rgba(28, 23, 12, .87);
  --onix-surface-strong: #201a0d;
  --onix-surface-muted: rgba(224, 183, 73, .08);
  --onix-border: rgba(224, 183, 73, .17);
  --onix-border-strong: rgba(231, 193, 93, .39);
  --onix-text: #fffaf0;
  --onix-muted: #c8b98e;
  --onix-accent: #e2bd5b;
  --onix-accent-2: #a77a1b;
  --onix-on-accent: #171103;
  --onix-glow: rgba(218, 174, 60, .21);
  --onix-sidebar: rgba(12, 10, 5, .93);
}

/* Token application */
.dashboard-body .dashboard-sidebar { background: var(--onix-sidebar); border-color: var(--onix-border); }
.dashboard-body .dashboard-main,
.dashboard-body .dash-section,
.dashboard-body .dashboard-topbar { color: var(--onix-text); }
.dashboard-body :is(h1,h2,h3,h4,strong,label,.topbar-label) { color: var(--onix-text); }
.dashboard-body :is(p,small,.dash-subtitle,.session-help,.calendar-days span) { color: var(--onix-muted); }
.dashboard-body :is(.dash-card,.goal-card,.activity-card,.onix-today-card,.onix-ai-card,.profile-main-card,.profile-option-card,.session-management-card,.level-card,.settings-modal,.goal-modal-content,.notifications-panel,.profile-dropdown,.subscription-card,.security-box,.security-item) {
  background: linear-gradient(145deg, var(--onix-surface), var(--onix-surface-muted));
  border-color: var(--onix-border);
  box-shadow: var(--onix-shadow);
  color: var(--onix-text);
}
.dashboard-body :is(.dash-link,.profile-dropdown button,.today-action) { color: var(--onix-muted); }
.dashboard-body :is(.dash-link:hover,.dash-link.active,.profile-dropdown button:hover,.today-action:hover) {
  color: var(--onix-text);
  background: var(--onix-surface-muted);
}
.dashboard-body .dash-link.active { box-shadow: inset 3px 0 0 var(--onix-accent); }
.dashboard-body :is(button,input,textarea,select) { font: inherit; }
.dashboard-body :is(input,textarea,select) {
  background: var(--onix-bg-soft);
  color: var(--onix-text);
  border-color: var(--onix-border);
}
.dashboard-body :is(input,textarea,select):focus {
  outline: 2px solid color-mix(in srgb, var(--onix-accent) 55%, transparent);
  outline-offset: 2px;
  border-color: var(--onix-border-strong);
}
.dashboard-body :is(#saveSessionBtn,#saveGoalBtn,.save-profile-btn,.onix-ai-card button,.calendar-day.selected,.time-slot.selected) {
  background: var(--onix-accent);
  color: var(--onix-on-accent);
}
.dashboard-body :is(.dash-progress > div,.summary-card .dash-progress > div) {
  background: linear-gradient(90deg, var(--onix-accent-2), var(--onix-accent));
}
.dashboard-body :is(.notification-btn,.topbar-avatar,.profile-avatar,.profile-avatar-large) {
  border-color: var(--onix-border-strong);
}
.dashboard-body .notification-btn svg,
.dashboard-body .dash-link svg,
.dashboard-body .profile-option-card svg,
.dashboard-body .summary-item svg,
.dashboard-body .today-action svg { stroke: currentColor; }
.dashboard-body .session-status.confirmed,
.dashboard-body .subscription-active { color: var(--onix-success); }
.dashboard-body .session-danger { color: var(--onix-danger); border-color: color-mix(in srgb, var(--onix-danger) 35%, transparent); }

/* Theme selector */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.theme-card {
  position: relative;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--onix-border);
  background: var(--onix-surface-muted);
  color: var(--onix-text);
  border-radius: 20px;
  padding: 12px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.theme-card:hover { transform: translateY(-3px); border-color: var(--onix-border-strong); }
.theme-card.active {
  border-color: var(--onix-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--onix-accent) 18%, transparent), 0 14px 35px var(--onix-glow);
}
.theme-card.active::after {
  content: "✓";
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--onix-accent);
  color: var(--onix-on-accent);
  font-weight: 900;
}
.theme-card h3 { margin: 12px 4px 5px; font-size: 15px; }
.theme-card p { margin: 0 4px 4px; font-size: 12px; line-height: 1.45; }
.theme-preview {
  height: 92px;
  border-radius: 14px;
  padding: 15px;
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-template-rows: 18px 1fr;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.theme-preview span { display: block; border-radius: 7px; opacity: .94; }
.theme-preview span:first-child { grid-row: 1 / 3; }
.theme-preview span:nth-child(2) { width: 65%; }
.onyx-preview { background: #050506; }
.onyx-preview span { background: #2a2a2e; } .onyx-preview span:nth-child(2) { background: #f1f1f2; }
.pearl-preview { background: #f2f4f7; border-color: rgba(16,24,40,.15); }
.pearl-preview span { background: #d0d5dd; } .pearl-preview span:nth-child(2) { background: #20242b; }
.sapphire-preview { background: #061127; } .sapphire-preview span { background: #163a74; } .sapphire-preview span:nth-child(2) { background: #6ea8ff; }
.emerald-preview { background: #071a13; } .emerald-preview span { background: #155c42; } .emerald-preview span:nth-child(2) { background: #66dda9; }
.amethyst-preview { background: #170b25; } .amethyst-preview span { background: #5e2d83; } .amethyst-preview span:nth-child(2) { background: #c88cff; }
.gold-preview { background: #151106; } .gold-preview span { background: #5b4717; } .gold-preview span:nth-child(2) { background: #e2bd5b; }
.theme-system-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 2px 0;
  font-size: 12px;
}
.theme-system-note svg { width: 16px; height: 16px; color: var(--onix-accent); }

/* Dashboard desktop shell */
.dashboard-layout { min-height: 100vh; }
.dashboard-sidebar {
  width: clamp(218px, 17vw, 260px);
  padding: 28px 20px;
}
.dashboard-main {
  width: calc(100% - clamp(218px, 17vw, 260px));
  max-width: 1600px;
  padding: 30px clamp(24px, 4vw, 68px) 70px;
}
.dashboard-topbar {
  position: sticky;
  top: 12px;
  z-index: 40;
  border: 1px solid var(--onix-border);
  background: color-mix(in srgb, var(--onix-bg) 72%, transparent);
  backdrop-filter: blur(22px);
  border-radius: 22px;
  padding: 14px 16px 14px 20px;
  margin-bottom: 28px;
}
.dash-section { max-width: 1320px; margin-inline: auto; }
.dash-grid,.goals-grid { align-items: stretch; }
.dashboard-body svg { width: 19px; height: 19px; flex: 0 0 auto; }
.profile-option-card > span { display: inline-grid; place-items: center; }
.profile-option-card > span svg { width: 24px; height: 24px; }

/* Tablet */
@media (max-width: 1100px) {
  .dashboard-sidebar { width: 92px; padding-inline: 14px; }
  .dashboard-logo { width: 62px; object-fit: contain; }
  .dash-link { justify-content: center; padding: 14px; }
  .dash-link span,.sidebar-plan { display: none; }
  .dashboard-main { width: calc(100% - 92px); padding: 24px 26px 70px; }
  .onix-today-grid,.dash-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Phones: app-style bottom navigation */
@media (max-width: 760px) {
  .dashboard-body { overflow-x: hidden; }
  .dashboard-layout { display: block; }
  .dashboard-sidebar {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    height: calc(70px + env(safe-area-inset-bottom));
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--onix-border);
    border-radius: 22px 22px 0 0;
    z-index: 1000;
  }
  .dashboard-menu { display: grid; grid-template-columns: repeat(5,1fr); width: 100%; gap: 3px; }
  .dash-link {
    min-width: 0;
    min-height: 53px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 3px;
    border-radius: 15px;
    font-size: 10px;
  }
  .dash-link span { display: block; font-size: 10px; }
  .dash-link svg { width: 20px; height: 20px; }
  .dash-link.active { box-shadow: inset 0 2px 0 var(--onix-accent); }
  .dashboard-logo,.sidebar-plan { display: none; }
  .dashboard-main { width: 100%; padding: 14px 14px calc(98px + env(safe-area-inset-bottom)); }
  .dashboard-topbar {
    top: 8px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
  }
  .smart-header .topbar-label,.smart-header strong { display: none; }
  .smart-header h2 { font-size: clamp(16px,5vw,21px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .smart-header p { font-size: 11px; }
  .topbar-profile > div:not(.topbar-avatar),.topbar-profile > span { display: none; }
  .topbar-profile { padding: 0; }
  .topbar-avatar,.notification-btn { width: 42px; height: 42px; }
  .profile-dropdown { position: fixed; top: 76px; right: 14px; left: 14px; width: auto; }
  .dash-section h1 { font-size: clamp(30px,9vw,42px); }
  .dash-subtitle { font-size: 14px; }
  .onix-today-grid,.dash-grid,.goals-grid,.profile-grid,.education-grid,.summary-grid { grid-template-columns: 1fr !important; }
  :is(.dash-card,.goal-card,.activity-card,.onix-today-card,.onix-ai-card,.profile-main-card,.profile-option-card,.session-management-card,.level-card) { border-radius: 20px; padding: 21px; }
  .onix-path { grid-template-columns: 1fr; }
  .session-card-head { align-items: flex-start; gap: 14px; }
  .session-actions { display: grid; grid-template-columns: 1fr; }
  .session-actions button { width: 100%; }
  .settings-modal,.appearance-modal,.security-modal,.subscription-modal {
    width: calc(100% - 22px) !important;
    max-height: calc(100dvh - 22px);
    overflow-y: auto;
    padding: 22px !important;
    border-radius: 22px !important;
  }
  .theme-grid { grid-template-columns: 1fr; }
  #sessionModal { align-items: flex-end; padding: 0; }
  #sessionModal .goal-modal-content {
    width: 100%; max-width: 100%; max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    padding: 20px 15px calc(20px + env(safe-area-inset-bottom));
  }
  #sessionModal .calendar-days,#sessionModal .calendar-grid { gap: 4px; }
  #sessionModal .calendar-day { min-width: 0; padding: 10px 2px; }
  #sessionModal .time-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 160px; }
  .notifications-panel { width: 100%; max-width: 100%; }
}

@media (max-width: 390px) {
  .dashboard-main { padding-inline: 10px; }
  .dashboard-topbar { grid-template-columns: minmax(0,1fr) 38px 38px; padding: 10px; }
  .topbar-avatar,.notification-btn { width: 38px; height: 38px; }
  #sessionModal .time-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Public pages — resilient fluid layout */
@media (max-width: 760px) {
  body:not(.dashboard-body) { overflow-x: hidden; }
  body:not(.dashboard-body) .navbar { width: calc(100% - 24px); margin-inline: 12px; }
  body:not(.dashboard-body) :is(.hero,.section,.contact-section,.footer) { padding-left: 18px; padding-right: 18px; }
  body:not(.dashboard-body) .hero { min-height: auto; padding-top: 110px; }
  body:not(.dashboard-body) .hero-text h1 { font-size: clamp(40px,12vw,60px); line-height: .98; }
  body:not(.dashboard-body) :is(.login-card,.register-card,.checkout-card,.diagnostic-card,.report-card) { width: min(100%, 560px); margin-inline: auto; }
  body:not(.dashboard-body) input,
  body:not(.dashboard-body) textarea,
  body:not(.dashboard-body) select,
  body:not(.dashboard-body) button { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================
   ONIX v1.5 · RESPONSIVE REFINADO
   Desktop espacioso + móvil tipo aplicación. Estas reglas
   neutralizan estilos antiguos con !important que comprimían
   la interfaz en pantallas pequeñas.
========================================================== */

.mobile-appbar-brand { display: none; }

/* Escritorio: lienzo amplio, contenido centrado y controles estables */
@media (min-width: 1101px) {
  .dashboard-layout {
    display: grid !important;
    grid-template-columns: 244px minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: 100vh !important;
  }
  .dashboard-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 244px !important;
    height: 100vh !important;
    padding: 30px 24px !important;
    overflow-y: auto !important;
  }
  .dashboard-logo {
    width: 132px !important;
    margin: 0 auto 42px !important;
  }
  .dashboard-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 42px clamp(42px, 5vw, 88px) 90px !important;
  }
  .dashboard-topbar,
  .dash-section {
    width: min(100%, 1440px) !important;
    margin-inline: auto !important;
  }
  .dashboard-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px auto !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 25px 28px !important;
    margin-bottom: 40px !important;
    border-radius: 28px !important;
  }
  .smart-header { min-width: 0 !important; }
  .smart-header h2 {
    font-size: clamp(30px, 2.25vw, 42px) !important;
    line-height: 1.06 !important;
  }
  .topbar-profile {
    width: auto !important;
    min-width: 154px !important;
    flex: 0 0 auto !important;
  }
  .onix-today-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .85fr) !important;
    gap: 30px !important;
    margin-bottom: 32px !important;
  }
  .onix-today-card,
  .onix-ai-card,
  .dash-card,
  .activity-card,
  .goal-card,
  .profile-main-card,
  .profile-option-card,
  .session-management-card {
    min-width: 0 !important;
  }
  .onix-today-card,
  .onix-ai-card {
    padding: 34px !important;
  }
  .today-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .today-action {
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 15px 18px !important;
    overflow: hidden !important;
  }
  .today-action span {
    min-width: 0 !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  .dash-grid { gap: 30px !important; }
  .big-card { grid-column: 1 / -1 !important; }
  .summary-grid { gap: 16px !important; }
}

/* Laptop y tableta: espacio real, sin botones cortados */
@media (min-width: 761px) and (max-width: 1100px) {
  .dashboard-layout {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }
  .dashboard-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 86px !important;
    height: 100vh !important;
    padding: 24px 12px !important;
  }
  .dashboard-main {
    width: 100% !important;
    min-width: 0 !important;
    padding: 30px clamp(24px, 4vw, 48px) 76px !important;
  }
  .dashboard-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px 48px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px !important;
    border-radius: 24px !important;
  }
  .topbar-profile {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .topbar-profile > div:not(.topbar-avatar),
  .topbar-profile > span { display: none !important; }
  .onix-today-grid,
  .dash-grid { grid-template-columns: 1fr !important; }
  .today-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .big-card { grid-column: auto !important; }
}

/* Teléfono: encabezado tipo app, tarjetas compactas y flujo vertical */
@media (max-width: 760px) {
  html, body.dashboard-body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .dashboard-layout { display: block !important; }
  .dashboard-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px 14px calc(94px + env(safe-area-inset-bottom)) !important;
  }
  .dashboard-topbar {
    position: relative !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 0 0 !important;
    margin: 0 0 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .mobile-appbar-brand {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .mobile-appbar-brand img {
    display: block !important;
    width: 112px !important;
    max-height: 38px !important;
    object-fit: contain !important;
  }
  .notification-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
  }
  .topbar-profile { display: none !important; }
  .smart-header {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px !important;
    margin-top: 8px !important;
    border: 1px solid var(--onix-border) !important;
    border-radius: 20px !important;
    background: var(--onix-surface) !important;
    box-shadow: var(--onix-shadow) !important;
  }
  .smart-header .topbar-label { display: none !important; }
  .smart-header h2 {
    margin: 0 0 7px !important;
    font-size: clamp(22px, 6.5vw, 29px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.7px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .smart-header p {
    margin: 0 0 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .smart-header strong {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  .dash-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .dash-section h1 {
    margin: 0 0 8px !important;
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }
  .dash-subtitle {
    margin-bottom: 24px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .onix-today-grid,
  .dash-grid,
  .goals-grid,
  .profile-grid,
  .education-grid,
  .summary-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .onix-today-grid { margin-bottom: 16px !important; }
  .onix-today-card,
  .onix-ai-card,
  .dash-card,
  .goal-card,
  .activity-card,
  .profile-main-card,
  .profile-option-card,
  .session-management-card,
  .level-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 20px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .onix-today-card h3,
  .onix-ai-card h3,
  .dash-card h3,
  .activity-card h3 {
    font-size: clamp(23px, 7vw, 30px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
  }
  .today-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .today-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 13px 15px !important;
    border-radius: 15px !important;
  }
  .today-action span {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }
  .onix-ai-card button,
  .session-actions button,
  .dash-logout,
  .save-profile-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
  }
  .big-card { grid-column: auto !important; }
  .onix-path {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .summary-item,
  .activity-list > div,
  #activityList > div {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  .activity-card { margin-top: 16px !important; }
  .activity-list > div,
  #activityList > div {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  .profile-premium { margin-top: 24px !important; }
  .profile-main-card {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }
  .profile-avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    font-size: 28px !important;
  }
  .profile-main-card h2 {
    margin: 0 0 5px !important;
    font-size: 23px !important;
    line-height: 1.1 !important;
  }
  .profile-main-card p {
    font-size: 13px !important;
    overflow-wrap: anywhere !important;
  }
  .profile-option-card h3 { font-size: 20px !important; }
  .dashboard-sidebar {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: calc(72px + env(safe-area-inset-bottom)) !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .dashboard-menu {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
  .dash-link {
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 6px 2px !important;
    border-radius: 14px !important;
    font-size: 10px !important;
    justify-content: center !important;
  }
  .dash-link span {
    display: block !important;
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .dash-link svg { width: 20px !important; height: 20px !important; }
  .profile-dropdown {
    position: fixed !important;
    top: 70px !important;
    right: 14px !important;
    left: 14px !important;
    width: auto !important;
  }
}

@media (max-width: 390px) {
  .dashboard-main { padding-inline: 10px !important; }
  .smart-header { padding: 17px !important; }
  .smart-header h2 { font-size: 21px !important; }
  .mobile-appbar-brand img { width: 96px !important; }
  .onix-today-card,
  .onix-ai-card,
  .dash-card,
  .goal-card,
  .activity-card,
  .profile-main-card,
  .profile-option-card,
  .session-management-card,
  .level-card { padding: 17px !important; }
}

/* ===== ONIX ACADEMY v2.0 ===== */
.academy-app{width:100%;max-width:1500px;margin:0 auto;padding:12px 4px 48px}
.academy-head{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;margin-bottom:28px}.academy-head.compact{align-items:center}
.academy-head h1{margin:5px 0 8px;font-size:clamp(2rem,3vw,3.2rem);line-height:1.05}.academy-head p{max-width:760px;color:var(--muted,#9ca3af);font-size:1rem}
.academy-kicker{font-size:.74rem;letter-spacing:.18em;font-weight:800;color:var(--accent,#fff)}
.academy-stat{min-width:150px;padding:18px 22px;border:1px solid var(--border,#2a2a2a);border-radius:20px;background:var(--surface,#131313);display:flex;flex-direction:column;align-items:center}.academy-stat strong{font-size:2rem}.academy-stat span{color:var(--muted,#9ca3af);font-size:.82rem}
.academy-level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.academy-level-card{appearance:none;text-align:left;padding:22px;border-radius:22px;border:1px solid var(--border,#2b2b2b);background:var(--surface,#121212);color:var(--text,#fff);min-height:190px;display:flex;flex-direction:column;cursor:pointer;transition:.22s ease}.academy-level-card:hover:not(:disabled){transform:translateY(-4px);border-color:var(--accent,#fff);box-shadow:0 18px 55px rgba(0,0,0,.28)}.academy-level-card:disabled{cursor:not-allowed;opacity:.48}.academy-level-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted,#aaa);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}.academy-level-card h3{font-size:1.15rem;margin:28px 0 8px}.academy-level-card p{color:var(--muted,#999);margin:0 0 22px}.academy-progress{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:auto}.academy-progress span{display:block;height:100%;background:var(--accent,#fff);border-radius:inherit}
.academy-overlay-card{max-width:1080px;margin:20px auto;padding:34px;border:1px solid var(--accent,#fff);border-radius:28px;background:linear-gradient(180deg,var(--surface,#151515),var(--bg,#090909));box-shadow:0 25px 90px rgba(0,0,0,.38)}.academy-warning-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent,#fff) 14%,transparent);margin-bottom:18px}.academy-warning-icon svg{width:30px;height:30px}.academy-overlay-card h2{font-size:clamp(1.8rem,3vw,2.8rem);margin:6px 0 24px}.academy-rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.academy-rules-grid>div{padding:22px;border:1px solid var(--border,#2b2b2b);border-radius:20px;background:rgba(255,255,255,.025)}.academy-rules-grid h3{margin-top:0}.academy-rules-grid ul{padding-left:20px;color:var(--muted,#aaa);line-height:1.7}.academy-integrity{display:flex;gap:14px;align-items:flex-start;margin:24px 0;padding:16px 18px;border-radius:16px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3)}.academy-integrity p{margin:0}.academy-check{display:flex;gap:10px;align-items:center;font-weight:700}.academy-check input{width:20px;height:20px}.academy-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.academy-btn{border:0;border-radius:14px;padding:13px 20px;background:var(--accent,#fff);color:var(--accent-contrast,#000);font-weight:800;cursor:pointer}.academy-btn:disabled{opacity:.4;cursor:not-allowed}.academy-btn.ghost{background:transparent;color:var(--text,#fff);border:1px solid var(--border,#333)}
.academy-breadcrumb{display:flex;gap:16px;align-items:center;margin-bottom:24px;color:var(--muted,#999)}.academy-breadcrumb button{display:flex;gap:8px;align-items:center;background:transparent;border:0;color:var(--text,#fff);cursor:pointer;font-weight:700}.academy-topic-list{display:grid;gap:14px}.academy-topic-card{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:center;width:100%;text-align:left;border-radius:20px;padding:18px 22px;border:1px solid var(--border,#2a2a2a);background:var(--surface,#131313);color:var(--text,#fff);cursor:pointer}.academy-topic-card:disabled{opacity:.48;cursor:not-allowed}.academy-topic-card:hover:not(:disabled){border-color:var(--accent,#fff)}.topic-number{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-weight:900}.academy-topic-card h3{margin:3px 0}.academy-topic-card p,.academy-topic-card span{margin:0;color:var(--muted,#999);font-size:.84rem}.academy-topic-card.is-complete{border-color:rgba(34,197,94,.45)}
.academy-course-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:24px;align-items:start}.academy-concept-nav{position:sticky;top:22px;max-height:calc(100vh - 44px);overflow:auto;padding:14px;border-radius:22px;border:1px solid var(--border,#2a2a2a);background:var(--surface,#121212)}.academy-concept-nav>div{display:flex;justify-content:space-between;padding:10px 8px 16px;color:var(--muted,#999)}.academy-concept-nav button{width:100%;display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:11px 9px;border:0;border-radius:12px;background:transparent;color:var(--text,#fff);text-align:left;font-size:.8rem;cursor:pointer}.academy-concept-nav button:hover:not(:disabled),.academy-concept-nav button.active{background:rgba(255,255,255,.07)}.academy-concept-nav button:disabled{opacity:.38}.academy-concept-nav button span{width:25px;height:25px;border-radius:8px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-weight:800}.academy-concept-nav .done{color:#86efac}.academy-exam-entry{margin-top:12px!important;background:color-mix(in srgb,var(--accent,#fff) 12%,transparent)!important;font-weight:800}
.academy-lesson{padding:clamp(22px,4vw,48px);border:1px solid var(--border,#2a2a2a);border-radius:28px;background:var(--surface,#121212)}.academy-lesson-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted,#999);font-size:.82rem}.academy-lesson-meta span{display:flex;align-items:center;gap:6px}.academy-lesson h1{font-size:clamp(2rem,4vw,3.6rem);margin:18px 0 30px}.academy-lesson section{padding:22px 0;border-top:1px solid var(--border,#2a2a2a)}.academy-lesson section h3{margin:0 0 10px}.academy-lesson section p{color:var(--muted,#bbb);font-size:1rem;line-height:1.75}.academy-example,.academy-tip,.academy-mistake{padding:20px!important;border:1px solid var(--border,#2a2a2a)!important;border-radius:18px;margin:14px 0}.academy-activity textarea{width:100%;min-height:150px;margin-top:12px;padding:16px;border-radius:14px;border:1px solid var(--border,#333);background:var(--bg,#090909);color:var(--text,#fff);resize:vertical}.academy-activity small{display:block;color:var(--muted,#999);margin-top:12px}
.academy-exam{max-width:920px;margin:20px auto;padding:30px;border:1px solid var(--border,#2a2a2a);border-radius:28px;background:var(--surface,#121212)}.academy-exam-head{display:flex;justify-content:space-between;gap:20px;align-items:center}.academy-exam-head>div:last-child{display:flex;gap:16px;font-size:1.1rem}.academy-exam-progress{height:7px;border-radius:99px;background:rgba(255,255,255,.08);margin:22px 0 34px;overflow:hidden}.academy-exam-progress span{display:block;height:100%;background:var(--accent,#fff)}.academy-question h3{font-size:clamp(1.4rem,3vw,2.2rem);margin-bottom:22px}.academy-question button{width:100%;padding:17px 18px;border-radius:15px;border:1px solid var(--border,#333);background:transparent;color:var(--text,#fff);text-align:left;margin:8px 0;cursor:pointer}.academy-question button:hover{border-color:var(--accent,#fff);background:rgba(255,255,255,.04)}.academy-exam-note{text-align:center;color:var(--muted,#999);font-size:.82rem;margin-top:24px}.academy-result,.academy-empty{max-width:700px;margin:40px auto;text-align:center;padding:48px 30px;border:1px solid var(--border,#2a2a2a);border-radius:28px;background:var(--surface,#121212)}.academy-result svg,.academy-empty svg{width:58px;height:58px;margin-bottom:14px}.academy-result h2{font-size:4rem;margin:8px}.academy-result p,.academy-empty p{color:var(--muted,#aaa);line-height:1.6}.academy-result.pass{border-color:rgba(34,197,94,.45)}.academy-result.fail{border-color:rgba(239,68,68,.4)}.academy-toast{position:fixed;right:24px;bottom:24px;z-index:9999;padding:14px 18px;border-radius:14px;background:#111;color:#fff;border:1px solid #333;opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s}.academy-toast.show{opacity:1;transform:none}
@media(max-width:900px){.academy-course-layout{grid-template-columns:1fr}.academy-concept-nav{position:static;max-height:310px}.academy-rules-grid{grid-template-columns:1fr}.academy-head{align-items:flex-start;flex-direction:column}.academy-stat{align-self:stretch}.academy-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.academy-app{padding-bottom:95px}.academy-level-grid{grid-template-columns:1fr}.academy-overlay-card,.academy-exam,.academy-lesson{padding:20px;border-radius:20px}.academy-actions{flex-direction:column-reverse}.academy-actions button{width:100%}.academy-topic-card{grid-template-columns:44px 1fr auto;padding:15px}.academy-lesson-meta{flex-direction:column}.academy-exam-head{align-items:flex-start}.academy-result h2{font-size:3rem}}

/* =====================================================
   SPRINT 6 · MI ESPACIO ONIX + AMBIENTE LIGERO
   Sin dependencias externas. Respeta prefers-reduced-motion.
===================================================== */
.onix-ambient-canvas,
.onix-ambient-vignette{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.onix-ambient-canvas{z-index:0;opacity:.72}
.onix-ambient-vignette{
  z-index:1;
  background:
    radial-gradient(circle at 76% 12%,rgba(var(--accent-rgb),.09),transparent 25%),
    radial-gradient(circle at 22% 88%,rgba(var(--accent-rgb),.065),transparent 28%),
    linear-gradient(180deg,transparent 35%,rgba(0,0,0,.16));
  mix-blend-mode:screen;
}
.dashboard-layout{position:relative;z-index:2}
.dashboard-body.theme-pearl .onix-ambient-vignette{mix-blend-mode:multiply;opacity:.5}

.profile-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:26px;
}
.profile-eyebrow,.profile-member-label{
  display:block;
  margin-bottom:8px;
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
}
.profile-status-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 15px;
  border:1px solid rgba(var(--accent-rgb),.26);
  border-radius:999px;
  background:rgba(var(--accent-rgb),.07);
  color:var(--text-main);
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
}
.profile-status-pill svg{width:17px;height:17px;color:var(--accent)}
.profile-identity-card{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  overflow:hidden;
  min-height:180px;
  padding:30px;
}
.profile-identity-card::before{
  content:"";
  position:absolute;
  inset:auto -8% -75% 34%;
  height:210px;
  border-radius:50%;
  background:rgba(var(--accent-rgb),.12);
  filter:blur(46px);
}
.profile-identity-card>*{position:relative;z-index:1}
.profile-identity-copy h2{font-size:clamp(1.55rem,3vw,2.35rem);margin:0 0 5px}
.profile-inline-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.profile-inline-meta span{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 11px;border-radius:999px;
  background:rgba(var(--accent-rgb),.07);
  border:1px solid rgba(var(--accent-rgb),.16);
  color:var(--text-soft);font-size:.78rem;
}
.profile-inline-meta svg{width:15px;height:15px;color:var(--accent)}
.profile-brand-mark{width:92px;height:92px;opacity:.2;filter:drop-shadow(0 0 24px rgba(var(--accent-rgb),.25))}
.profile-brand-mark img{width:100%;height:100%;object-fit:contain}
.profile-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.profile-tools-grid .profile-option-card{
  position:relative;
  width:100%;
  min-height:142px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:22px;
  text-align:left;
  font:inherit;
}
.profile-tools-grid .profile-option-card>span{
  display:grid;place-items:center;
  width:50px;height:50px;border-radius:16px;
  background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.2);
}
.profile-tools-grid .profile-option-card>span svg{width:22px;height:22px;color:var(--accent)}
.profile-tools-grid .profile-option-card h3{margin:0 0 7px}
.profile-tools-grid .profile-option-card p{margin:0;line-height:1.5}
.profile-card-arrow{width:18px;height:18px;color:var(--text-soft);transition:transform .25s,color .25s}
.profile-tools-grid .profile-option-card:hover .profile-card-arrow{transform:translate(3px,-3px);color:var(--accent)}
.profile-tools-grid .logout-card{grid-column:1/-1;min-height:104px}
.profile-tools-grid .logout-card:hover .profile-card-arrow{transform:translateX(4px)}

@media(max-width:760px){
  .profile-section-heading{align-items:flex-start;flex-direction:column;margin-bottom:18px}
  .profile-status-pill{min-height:38px}
  .profile-identity-card{grid-template-columns:auto 1fr;padding:22px;min-height:150px}
  .profile-brand-mark{display:none}
  .profile-inline-meta{gap:7px}
  .profile-tools-grid{grid-template-columns:1fr}
  .profile-tools-grid .logout-card{grid-column:auto}
}
@media(max-width:480px){
  .profile-identity-card{grid-template-columns:1fr;text-align:center}
  .profile-identity-card .profile-avatar{margin:auto}
  .profile-inline-meta{justify-content:center}
  .profile-tools-grid .profile-option-card{min-height:124px;padding:18px;grid-template-columns:auto 1fr}
  .profile-tools-grid .profile-card-arrow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .onix-ambient-canvas{display:none}
  .dashboard-body::after{animation:none!important}
  .profile-option-card,.theme-card{transition:none!important}
}

/* =========================================================
   ONIX v2.2 — SPRINT 6.5 MI ESPACIO PREMIUM
========================================================= */
body.modal-open { overflow: hidden; }

.profile-identity-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.profile-identity-card::before {
  content: "";
  position: absolute;
  inset: -35% auto auto 45%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .17), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}
.profile-avatar,
.profile-avatar-large,
.topbar-avatar {
  overflow: hidden;
  display: grid;
  place-items: center;
}
.profile-avatar img,
.profile-avatar-large img,
.topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-avatar.has-image,
.profile-avatar-large.has-image,
.topbar-avatar.has-image { padding: 0; }
.profile-option-card {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.profile-option-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 15%, rgba(var(--accent-rgb), .08), transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.profile-option-card:hover::after { transform: translateX(120%); }
.profile-option-card:hover { transform: translateY(-3px); }

.settings-modal {
  max-height: min(90vh, 860px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.premium-profile-modal { width: min(920px, calc(100vw - 28px)); }
.premium-profile-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.avatar-editor-card {
  border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: 26px;
  padding: 28px 22px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .08), rgba(255,255,255,.018));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.avatar-editor-ring {
  width: 142px;
  height: 142px;
  padding: 5px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(var(--accent-rgb), .25), rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), .2));
  box-shadow: 0 0 40px rgba(var(--accent-rgb), .18);
  margin-bottom: 18px;
}
.avatar-editor-ring .profile-avatar-large {
  width: 100%;
  height: 100%;
  border: 5px solid var(--surface, #111);
  font-size: 48px;
}
.avatar-editor-card h3 { margin: 4px 0 6px; font-size: 1.25rem; }
.avatar-editor-card p { margin: 0 0 18px; opacity: .7; word-break: break-word; }
.avatar-editor-card small { opacity: .55; margin-top: 12px; line-height: 1.5; }
.secondary-action,
.text-action,
.danger-button,
.icon-close {
  border: 0;
  cursor: pointer;
  font: inherit;
}
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  color: var(--text-primary, #fff);
  background: rgba(var(--accent-rgb), .1);
  border: 1px solid rgba(var(--accent-rgb), .18);
}
.secondary-action:hover { background: rgba(var(--accent-rgb), .16); }
.text-action { background: transparent; color: var(--text-secondary, #aaa); padding: 9px 12px; }
.text-action:hover { color: var(--text-primary, #fff); }
.icon-close {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--text-primary, #fff);
  background: rgba(var(--accent-rgb), .08);
  border: 1px solid rgba(var(--accent-rgb), .12);
}
.icon-close:hover { transform: rotate(4deg) scale(1.03); }
.premium-form { display: flex; flex-direction: column; gap: 16px; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-group label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.field-group input {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), .14);
  background: rgba(255,255,255,.035);
  color: var(--text-primary, #fff);
  padding: 0 15px;
  outline: none;
}
.field-group input:focus { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .08); }
.field-group small { opacity: .55; }
.locked-input { position: relative; }
.locked-input input { padding-right: 44px; opacity: .72; }
.locked-input svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 17px; opacity: .55; }
.account-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin: 4px 0;
}
.account-meta-grid > div {
  min-height: 76px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), .1);
  padding: 14px;
  background: rgba(var(--accent-rgb), .04);
}
.account-meta-grid span { display: block; font-size: .72rem; opacity: .55; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .06em; }
.account-meta-grid strong { font-size: .92rem; word-break: break-word; }
.positive-text { color: #55d78b; }
.uid-meta { position: relative; grid-column: 1 / -1; padding-right: 50px !important; }
.uid-meta button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer; color: inherit; background: rgba(var(--accent-rgb), .1); }
.premium-primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; }

.premium-security-modal,
.premium-subscription-modal { width: min(780px, calc(100vw - 28px)); }
.security-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(74, 222, 128, .2);
  background: linear-gradient(135deg, rgba(74,222,128,.09), rgba(var(--accent-rgb), .04));
  margin-bottom: 18px;
}
.security-orb {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #61dc91;
  background: rgba(74,222,128,.1);
  box-shadow: 0 0 30px rgba(74,222,128,.13);
}
.security-orb svg { width: 31px; height: 31px; }
.security-health { font-size: .7rem; letter-spacing: .12em; font-weight: 800; color: #61dc91; }
.security-hero h3 { margin: 5px 0 6px; font-size: 1.1rem; }
.security-hero p { margin: 0; opacity: .65; }
.security-details-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.security-details-grid article {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(var(--accent-rgb), .1);
  background: rgba(var(--accent-rgb), .035);
  border-radius: 16px;
  padding: 15px;
  min-width: 0;
}
.security-details-grid article > svg { flex: 0 0 auto; opacity: .75; }
.security-details-grid span { display: block; opacity: .55; font-size: .74rem; margin-bottom: 5px; }
.security-details-grid strong { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.security-actions-list { display: flex; flex-direction: column; gap: 9px; }
.security-actions-list > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), .1);
  color: inherit;
  background: rgba(var(--accent-rgb), .025);
  padding: 15px;
  cursor: pointer;
}
.security-actions-list > button:hover { background: rgba(var(--accent-rgb), .07); transform: translateX(2px); }
.security-actions-list > button > span { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.security-actions-list > button > span > svg { grid-row: 1 / 3; }
.security-actions-list b { display: block; }
.security-actions-list small { display: block; opacity: .55; margin-top: 3px; }
.security-actions-list .danger-row { border-color: rgba(255,90,90,.15); }
.security-actions-list .danger-row:hover { background: rgba(255,90,90,.07); }
.email-change-panel {
  border: 1px solid rgba(var(--accent-rgb), .13);
  background: rgba(var(--accent-rgb), .04);
  border-radius: 16px;
  padding: 15px;
}
.email-change-panel label { display:block; font-size:.76rem; opacity:.65; margin-bottom:8px; }
.email-change-panel > div { display:flex; gap:8px; }
.email-change-panel input { flex:1; min-width:0; border-radius:12px; border:1px solid rgba(var(--accent-rgb),.14); background:rgba(255,255,255,.04); color:inherit; padding:0 12px; }
.email-change-panel button { border:0; border-radius:12px; padding:11px 14px; cursor:pointer; font-weight:700; }
.future-note { display:flex; gap:9px; align-items:flex-start; margin:16px 0 0; opacity:.6; font-size:.82rem; line-height:1.55; }
.future-note svg { flex:0 0 auto; width:16px; margin-top:2px; }

.subscription-premium-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 25px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .15), rgba(var(--accent-rgb), .035));
  border: 1px solid rgba(var(--accent-rgb), .18);
}
.subscription-premium-hero::after { content:""; position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 70%); }
.plan-kicker { font-size:.7rem; letter-spacing:.12em; font-weight:800; opacity:.65; }
.subscription-premium-hero h3 { margin:7px 0 5px; font-size:2rem; }
.subscription-premium-hero p { margin:0; opacity:.65; }
.subscription-badge { display:inline-flex; align-items:center; gap:7px; z-index:1; }
.plan-benefits { margin:20px 0; }
.plan-benefits h4 { margin:0 0 12px; }
.benefits-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.benefits-grid span { display:flex; gap:9px; align-items:center; border:1px solid rgba(var(--accent-rgb),.1); border-radius:14px; padding:13px; background:rgba(var(--accent-rgb),.03); }
.benefits-grid svg { width:18px; opacity:.75; }
.premium-subscription-grid { margin-bottom:16px; }
.subscription-buttons button { display:inline-flex; justify-content:center; align-items:center; gap:8px; }

.theme-card { position:relative; }
.theme-selected-label {
  position:absolute;
  top:12px;
  right:12px;
  display:none;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
  background:rgba(var(--accent-rgb),.92);
  color:var(--theme-button-text,#000);
}
.theme-selected-label svg { width:13px; height:13px; }
.theme-card.active .theme-selected-label { display:flex; }
.theme-card.active { box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45), 0 20px 55px rgba(var(--accent-rgb),.12); }

.logout-confirm-modal { width:min(430px,calc(100vw - 28px)); text-align:center; padding:34px; }
.logout-confirm-icon { width:70px; height:70px; border-radius:22px; display:grid; place-items:center; margin:0 auto 18px; background:rgba(255,84,84,.09); color:#ff7373; }
.logout-confirm-icon svg { width:31px; height:31px; }
.logout-confirm-modal h2 { margin:0 0 9px; }
.logout-confirm-modal p { margin:0 auto 24px; max-width:340px; opacity:.65; line-height:1.55; }
.logout-confirm-modal > div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.danger-button { border-radius:14px; background:#d94b4b; color:#fff; font-weight:800; padding:12px 16px; }
.danger-button:hover { background:#e55656; }

.onix-toast-host { position:fixed; top:22px; right:22px; z-index:99999; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.onix-toast {
  width:min(380px,calc(100vw - 30px));
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  border-radius:16px;
  color:#fff;
  background:rgba(18,20,24,.92);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(-12px) scale(.98);
  transition:.24s ease;
}
.onix-toast.show { opacity:1; transform:translateY(0) scale(1); }
.onix-toast.success svg { color:#5ee394; }
.onix-toast.error svg { color:#ff7272; }
.onix-toast.info svg { color:#72b6ff; }
.onix-toast svg { flex:0 0 auto; }
.onix-spinner { width:17px; height:17px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:onixSpin .7s linear infinite; display:inline-block; }
@keyframes onixSpin { to { transform:rotate(360deg); } }

@media (max-width: 760px) {
  .premium-profile-layout { grid-template-columns:1fr; }
  .avatar-editor-card { padding:22px 18px; }
  .avatar-editor-ring { width:118px; height:118px; }
  .security-details-grid,
  .benefits-grid { grid-template-columns:1fr; }
  .subscription-premium-hero { align-items:flex-start; }
  .subscription-premium-hero h3 { font-size:1.55rem; }
  .email-change-panel > div { flex-direction:column; }
  .email-change-panel input { min-height:46px; }
  .onix-toast-host { top:14px; right:15px; left:15px; }
  .onix-toast { width:100%; }
}

@media (max-width: 520px) {
  .settings-modal { border-radius:24px 24px 0 0; max-height:92vh; width:100% !important; margin-top:auto; }
  .modal-overlay { align-items:flex-end; padding:0; }
  .premium-profile-layout { gap:16px; }
  .avatar-editor-card { border-radius:20px; }
  .account-meta-grid { grid-template-columns:1fr; }
  .uid-meta { grid-column:auto; }
  .security-hero { grid-template-columns:1fr; text-align:center; }
  .security-orb { margin:0 auto; }
  .subscription-premium-hero { flex-direction:column; }
  .subscription-buttons { display:grid; grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-option-card,
  .profile-option-card::after,
  .onix-toast,
  .icon-close { transition:none !important; }
}

/* =========================================================
   ONIX v2.3 — PUBLIC LANDING PREMIUM
   Scoped to .public-index-v23 to preserve dashboard modules.
   ========================================================= */
.public-index-v23{--p-bg:#05070a;--p-panel:rgba(15,18,24,.78);--p-panel-strong:#10141b;--p-line:rgba(255,255,255,.1);--p-text:#f5f7fa;--p-muted:#9aa4b2;--p-accent:#e4e9ef;--p-soft:#202733;min-height:100%;margin:0;background:var(--p-bg);color:var(--p-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}.public-index-v23 *{box-sizing:border-box}.public-index-v23 a{color:inherit;text-decoration:none}.public-index-v23 button,.public-index-v23 input,.public-index-v23 textarea{font:inherit}.public-index-v23 .skip-link{position:fixed;left:16px;top:-100px;z-index:10000;background:#fff;color:#000;padding:10px 14px;border-radius:10px}.public-index-v23 .skip-link:focus{top:16px}.public-ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.public-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 80%)}.public-orb{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(120px);opacity:.16}.public-orb-one{top:-180px;right:-100px;background:#93a4bd}.public-orb-two{left:-250px;top:45%;background:#3b5069}.public-index-v23 main,.public-header,.public-footer{position:relative;z-index:2}.public-index-v23 .intro-screen{position:fixed;inset:0;z-index:9999;display:grid;place-content:center;justify-items:center;text-align:center;background:radial-gradient(circle at 50% 45%,#1a2029 0,#090b0f 40%,#030405 100%);transition:opacity .65s ease,visibility .65s ease}.public-index-v23 .intro-screen[hidden]{display:none}.public-index-v23 .intro-screen.is-leaving{opacity:0;visibility:hidden}.public-index-v23 .intro-symbol{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 28px rgba(255,255,255,.18));animation:pFloat 3s ease-in-out infinite}.public-index-v23 .intro-kicker{margin:22px 0 7px;letter-spacing:.35em;color:#aeb7c4;font-size:.72rem}.public-index-v23 .intro-title{margin:0;font-size:clamp(2.4rem,6vw,5.7rem);line-height:.93;letter-spacing:-.06em}.public-index-v23 .enter-btn{margin-top:30px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:13px 28px;cursor:pointer;transition:.25s}.public-index-v23 .enter-btn:hover{background:#fff;color:#05070a;transform:translateY(-2px)}@keyframes pFloat{50%{transform:translateY(-9px)}}.public-header{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;width:min(1440px,calc(100% - 40px));margin:18px auto 0;padding:12px 14px 12px 18px;border:1px solid var(--p-line);border-radius:18px;background:rgba(5,7,10,.78);backdrop-filter:blur(18px);box-shadow:0 16px 60px rgba(0,0,0,.28)}.public-brand{display:flex;align-items:center;gap:10px;min-width:max-content}.public-brand img{width:34px;height:34px;object-fit:contain}.public-brand span{display:grid;line-height:1}.public-brand strong{font-size:.95rem;letter-spacing:.12em}.public-brand small{font-size:.52rem;letter-spacing:.27em;color:var(--p-muted);margin-top:5px}.public-nav{display:flex;justify-content:center;gap:clamp(14px,2vw,30px)}.public-nav a{font-size:.85rem;color:#b4bcc7;transition:.2s}.public-nav a:hover{color:#fff}.public-header-actions{display:flex;gap:9px}.public-menu-button{display:none;border:1px solid var(--p-line);background:transparent;color:#fff;border-radius:11px;width:42px;height:42px;place-items:center}.public-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;padding:11px 17px;font-weight:700;font-size:.86rem;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}.public-btn:hover{transform:translateY(-2px)}.public-btn svg{width:17px;height:17px}.public-btn-primary{background:linear-gradient(135deg,#fff,#bdc6d2);color:#05070a;box-shadow:0 12px 30px rgba(255,255,255,.09)}.public-btn-primary:hover{box-shadow:0 15px 40px rgba(255,255,255,.17)}.public-btn-ghost{border-color:var(--p-line);background:rgba(255,255,255,.035);color:#eef2f7}.public-btn-ghost:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.07)}.public-btn-large{padding:14px 20px;border-radius:14px}.public-hero{width:min(1360px,calc(100% - 40px));min-height:calc(100vh - 110px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(480px,.97fr);align-items:center;gap:clamp(48px,7vw,110px);padding:88px 0 72px}.public-hero-copy h1{max-width:760px;margin:20px 0 24px;font-size:clamp(3rem,6.3vw,7rem);line-height:.92;letter-spacing:-.065em}.public-hero-copy h1 span{color:#aab4c2}.public-hero-copy>p{max-width:690px;color:var(--p-muted);font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.75}.public-eyebrow,.public-section-label{display:inline-flex;align-items:center;gap:8px;color:#cbd2dc;font-size:.72rem;letter-spacing:.16em;font-weight:800}.public-eyebrow{padding:8px 11px;border:1px solid var(--p-line);border-radius:999px;background:rgba(255,255,255,.035)}.public-eyebrow svg{width:14px}.public-hero-actions{display:flex;gap:12px;margin-top:32px}.public-proof-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px;color:#8893a0;font-size:.78rem}.public-proof-row span{display:flex;align-items:center;gap:7px}.public-proof-row svg{width:15px;color:#d9e0e8}.public-dashboard-preview{position:relative;padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:linear-gradient(145deg,rgba(22,27,35,.9),rgba(8,10,14,.88));box-shadow:0 45px 100px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.05);transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)}.public-dashboard-preview:before{content:"";position:absolute;inset:-1px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 25%,transparent 70%,rgba(255,255,255,.06));pointer-events:none}.public-preview-top{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--p-line)}.public-preview-top>div{display:grid;gap:6px}.public-preview-top small{color:#7f8997;font-size:.64rem;letter-spacing:.18em}.public-preview-top strong{font-size:1rem}.public-status{display:flex;align-items:center;gap:8px;color:#aab5c2;font-size:.72rem}.public-status i{width:7px;height:7px;border-radius:50%;background:#9fe1b4;box-shadow:0 0 14px #9fe1b4}.public-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.public-preview-grid article{display:grid;gap:8px;padding:16px;border:1px solid var(--p-line);border-radius:16px;background:rgba(255,255,255,.025)}.public-preview-grid svg{width:18px;color:#c6ced9}.public-preview-grid span,.public-preview-grid small{color:#7f8997;font-size:.66rem}.public-preview-grid strong{font-size:.96rem}.public-preview-focus{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:12px;padding:20px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));border:1px solid var(--p-line)}.public-preview-focus-copy span{color:#7e8996;font-size:.67rem;text-transform:uppercase;letter-spacing:.12em}.public-preview-focus-copy h3{margin:8px 0 6px;font-size:1rem}.public-preview-focus-copy p{margin:0;color:#87919e;font-size:.73rem;line-height:1.5}.public-progress-ring{flex:0 0 72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#dce3ec 72%,rgba(255,255,255,.08) 0);position:relative}.public-progress-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#11151c}.public-progress-ring span{position:relative;z-index:1;font-weight:800;font-size:.82rem}.public-preview-assistant{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px 16px;border:1px solid var(--p-line);border-radius:16px;background:rgba(255,255,255,.025)}.public-preview-assistant svg{width:20px}.public-preview-assistant p{margin:0;color:#929ca9;font-size:.72rem;line-height:1.5}.public-preview-assistant strong{color:#eef2f7}.public-trust-strip{position:relative;z-index:2;width:min(1360px,calc(100% - 40px));margin:0 auto;padding:24px 8px;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line);display:flex;align-items:center;justify-content:space-between;gap:16px;color:#6f7986;font-size:.67rem;letter-spacing:.15em}.public-trust-strip i{width:4px;height:4px;border-radius:50%;background:#4c5664}.public-section{width:min(1220px,calc(100% - 40px));margin:0 auto;padding:110px 0;scroll-margin-top:100px}.public-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}.public-section h2{margin:14px 0 0;font-size:clamp(2.2rem,4.4vw,4.8rem);line-height:1;letter-spacing:-.05em}.public-section-copy p,.public-section-heading p{color:var(--p-muted);line-height:1.75;font-size:1rem}.public-section-copy a{display:inline-flex;gap:8px;align-items:center;margin-top:16px;font-weight:800}.public-section-copy svg{width:17px}.public-section-heading{max-width:760px;margin-bottom:44px}.public-section-heading h2{margin-bottom:18px}.public-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.public-feature-grid article{min-height:245px;padding:26px;border:1px solid var(--p-line);border-radius:20px;background:var(--p-panel);transition:.25s}.public-feature-grid article:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);background:rgba(22,27,35,.9)}.public-feature-grid article>span{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;border:1px solid var(--p-line);background:rgba(255,255,255,.05)}.public-feature-grid svg{width:21px}.public-feature-grid h3{margin:38px 0 10px;font-size:1.08rem}.public-feature-grid p{margin:0;color:var(--p-muted);line-height:1.65;font-size:.88rem}.public-process{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.public-process-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--p-line)}.public-process-list li{display:grid;grid-template-columns:70px 1fr;gap:18px;padding:25px 4px;border-bottom:1px solid var(--p-line)}.public-process-list>li>span{color:#687482;font-weight:800;font-size:.78rem}.public-process-list h3{margin:0 0 7px;font-size:1rem}.public-process-list p{margin:0;color:var(--p-muted);font-size:.86rem}.public-diagnostic-card{display:flex;align-items:flex-end;justify-content:space-between;gap:50px;padding:clamp(30px,5vw,64px);border:1px solid rgba(255,255,255,.14);border-radius:28px;background:radial-gradient(circle at 85% 10%,rgba(146,164,188,.16),transparent 38%),linear-gradient(145deg,#171c24,#090b0f);box-shadow:0 32px 90px rgba(0,0,0,.35)}.public-diagnostic-card>div{max-width:760px}.public-diagnostic-card h2{margin-bottom:20px}.public-diagnostic-card p{color:var(--p-muted);line-height:1.75}.public-diagnostic-card ul{display:flex;flex-wrap:wrap;gap:18px;list-style:none;padding:0;margin:28px 0 0}.public-diagnostic-card li{display:flex;align-items:center;gap:7px;color:#b3bdc9;font-size:.82rem}.public-diagnostic-card li svg{width:17px}.public-plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;align-items:stretch}.public-plan-card{position:relative;display:flex;flex-direction:column;padding:28px;border:1px solid var(--p-line);border-radius:22px;background:var(--p-panel)}.public-plan-featured{background:linear-gradient(160deg,rgba(41,49,61,.92),rgba(12,15,20,.95));border-color:rgba(255,255,255,.22);transform:translateY(-12px);box-shadow:0 30px 70px rgba(0,0,0,.35)}.public-popular{position:absolute;right:20px;top:18px;padding:6px 9px;border-radius:999px;background:#eef2f7;color:#0a0c10;font-size:.57rem;letter-spacing:.12em;font-weight:900}.public-plan-head{display:flex;justify-content:space-between;align-items:center;color:#aab4c1;font-size:.7rem;letter-spacing:.14em;font-weight:800}.public-plan-head svg{width:22px}.public-plan-card h3{margin:32px 0 8px;font-size:2.5rem;letter-spacing:-.05em}.public-plan-card h3 small{font-size:.72rem;color:#7f8996;letter-spacing:0}.public-plan-card>p{color:var(--p-muted);min-height:48px}.public-plan-card ul{list-style:none;padding:20px 0;margin:16px 0 26px;border-top:1px solid var(--p-line);display:grid;gap:12px}.public-plan-card li{font-size:.84rem;color:#c2cad4}.public-plan-card li:before{content:"✓";margin-right:9px;color:#fff}.public-plan-card .public-btn{margin-top:auto}.public-payment-note{display:flex;justify-content:center;align-items:center;gap:8px;color:#737e8b;font-size:.76rem;margin:28px auto 0;text-align:center}.public-payment-note svg{width:15px}.public-os-section{display:grid;grid-template-columns:1fr .65fr;align-items:center;gap:90px;padding-left:clamp(30px,6vw,80px);padding-right:clamp(30px,6vw,80px);border:1px solid var(--p-line);border-radius:32px;background:radial-gradient(circle at 80% 20%,rgba(124,143,168,.18),transparent 35%),linear-gradient(145deg,rgba(20,24,31,.95),rgba(6,8,11,.95));overflow:hidden}.public-os-copy h2{margin-bottom:22px}.public-os-copy p{max-width:650px;color:var(--p-muted);line-height:1.75}.public-os-pills{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0}.public-os-pills span{padding:7px 10px;border:1px solid var(--p-line);border-radius:999px;color:#aeb8c4;font-size:.7rem}.public-os-device{justify-self:center;width:min(330px,100%);min-height:540px;padding:38px 28px;border:1px solid rgba(255,255,255,.17);border-radius:42px;background:linear-gradient(160deg,#171c24,#080a0d);box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06);text-align:center;position:relative}.public-os-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:82px;height:20px;border-radius:999px;background:#020304}.public-os-logo{margin:55px auto 18px;width:74px;height:74px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);border-radius:22px;font-size:2rem;box-shadow:0 0 35px rgba(255,255,255,.08)}.public-os-device>span{font-size:.7rem;letter-spacing:.25em;color:#96a1ae}.public-os-device h3{font-size:1.55rem;line-height:1.2;margin:18px 0 36px}.public-os-bars{display:grid;gap:9px}.public-os-bars i{display:block;height:48px;border-radius:13px;border:1px solid var(--p-line);background:rgba(255,255,255,.035)}.public-os-bars i:nth-child(2){width:82%}.public-os-bars i:nth-child(3){width:92%}.public-os-device small{display:block;margin-top:34px;color:#6e7885;letter-spacing:.18em;font-size:.58rem}.public-testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.public-testimonial-grid blockquote{margin:0;padding:28px;border:1px solid var(--p-line);border-radius:20px;background:var(--p-panel)}.public-stars{color:#d6dde6;letter-spacing:.16em;font-size:.7rem}.public-testimonial-grid blockquote>p{min-height:110px;margin:28px 0;color:#c5ccd5;line-height:1.7}.public-testimonial-grid footer{display:grid;gap:4px}.public-testimonial-grid footer strong{font-size:.82rem}.public-testimonial-grid footer span{color:#75808d;font-size:.72rem}.public-contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}.public-contact-info>p{color:var(--p-muted);line-height:1.7}.public-contact-links{display:grid;gap:12px;margin-top:30px}.public-contact-links a{display:flex;align-items:center;gap:10px;color:#c5cdd7;font-size:.86rem}.public-contact-links svg{width:18px}.public-contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:30px;border:1px solid var(--p-line);border-radius:24px;background:var(--p-panel)}.public-contact-form label{display:grid;gap:8px;color:#aeb7c3;font-size:.76rem;font-weight:700}.public-contact-form label:nth-child(3),.public-contact-form button,.public-form-status{grid-column:1/-1}.public-contact-form input,.public-contact-form textarea{width:100%;border:1px solid var(--p-line);border-radius:12px;background:rgba(0,0,0,.22);color:#fff;padding:13px 14px;outline:none;transition:.2s}.public-contact-form input:focus,.public-contact-form textarea:focus{border-color:rgba(255,255,255,.3);box-shadow:0 0 0 3px rgba(255,255,255,.045)}.public-contact-form textarea{resize:vertical}.public-contact-form button:disabled{opacity:.55;cursor:wait}.public-form-status{margin:0;min-height:20px;font-size:.78rem}.public-form-status.is-success{color:#a8e2bc}.public-form-status.is-error{color:#f1aaaa}.public-footer{width:min(1360px,calc(100% - 40px));margin:0 auto;padding:34px 0 42px;border-top:1px solid var(--p-line);display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;color:#707b88}.public-footer>p{text-align:center;font-size:.82rem}.public-footer>div{display:flex;gap:18px;font-size:.76rem}.public-footer>small{grid-column:1/-1;text-align:center;font-size:.67rem}.public-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.public-reveal.is-visible{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.public-index-v23 *{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.public-reveal{opacity:1;transform:none}}@media(max-width:1100px){.public-header{grid-template-columns:auto auto 1fr}.public-menu-button{display:grid}.public-nav{position:absolute;top:calc(100% + 10px);left:0;right:0;display:none;flex-direction:column;align-items:stretch;padding:14px;border:1px solid var(--p-line);border-radius:16px;background:#0a0d12;box-shadow:0 30px 70px rgba(0,0,0,.5)}.public-nav a{padding:11px;border-radius:9px}.public-nav a:hover{background:rgba(255,255,255,.05)}.public-menu-open .public-nav{display:flex}.public-header-actions{justify-self:end}.public-hero{grid-template-columns:1fr;padding-top:90px}.public-hero-copy{max-width:860px}.public-dashboard-preview{max-width:760px;transform:none}.public-feature-grid{grid-template-columns:repeat(2,1fr)}.public-os-section{grid-template-columns:1fr 1fr;gap:45px}.public-contact{gap:45px}}@media(max-width:760px){.public-header{width:calc(100% - 24px);margin-top:10px;padding:10px 11px}.public-header-actions .public-btn-ghost{display:none}.public-header-actions .public-btn{padding:10px 12px}.public-brand span{display:none}.public-hero,.public-trust-strip,.public-section,.public-footer{width:calc(100% - 28px)}.public-hero{min-height:auto;padding:76px 0 58px;gap:48px}.public-hero-copy h1{font-size:clamp(2.75rem,14vw,4.8rem)}.public-hero-actions{flex-direction:column;align-items:stretch}.public-proof-row{display:grid}.public-dashboard-preview{padding:16px;border-radius:22px}.public-preview-grid{grid-template-columns:1fr}.public-preview-focus{align-items:flex-start}.public-trust-strip{overflow:auto;justify-content:flex-start;white-space:nowrap}.public-section{padding:76px 0}.public-split,.public-process,.public-contact,.public-os-section{grid-template-columns:1fr;gap:35px}.public-section h2{font-size:clamp(2.1rem,11vw,3.5rem)}.public-feature-grid,.public-plans-grid,.public-testimonial-grid{grid-template-columns:1fr}.public-feature-grid article{min-height:210px}.public-diagnostic-card{align-items:stretch;flex-direction:column;padding:28px}.public-diagnostic-card .public-btn{width:100%}.public-diagnostic-card ul{display:grid}.public-plan-featured{transform:none}.public-os-section{padding:48px 24px}.public-os-device{min-height:470px}.public-contact-form{grid-template-columns:1fr;padding:22px}.public-contact-form label{grid-column:1/-1}.public-footer{grid-template-columns:1fr;text-align:center}.public-footer .public-brand{justify-content:center}.public-footer .public-brand span{display:grid}.public-footer>div{justify-content:center;flex-wrap:wrap}.public-footer>p,.public-footer>small{grid-column:1}}

/* =========================================================
   ONIX v2.4 — Navegación progresiva / cuenta sin suscripción
   ========================================================= */
.public-user-menu{position:relative;display:flex;align-items:center;gap:10px}.public-preview-link{display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border-radius:12px;color:#dfe5ec;font-size:.86rem;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}.public-preview-link:hover{background:rgba(255,255,255,.08)}.public-user-trigger{display:flex;align-items:center;gap:10px;padding:6px 9px 6px 7px;border:1px solid rgba(255,255,255,.12);background:rgba(9,12,17,.82);color:#fff;border-radius:16px;cursor:pointer}.public-user-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#414a54,#11151a);border:1px solid rgba(255,255,255,.15)}.public-user-avatar img{width:100%;height:100%;object-fit:cover}.public-user-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;min-width:105px}.public-user-copy small{font-size:.62rem;color:#98a2ae;text-transform:uppercase;letter-spacing:.08em}.public-user-copy strong{font-size:.82rem;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.public-user-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:215px;padding:8px;border-radius:16px;border:1px solid rgba(255,255,255,.11);background:rgba(7,9,13,.97);box-shadow:0 22px 60px rgba(0,0,0,.48);z-index:80}.public-user-dropdown a,.public-user-dropdown button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:#dfe5ec;text-decoration:none;font:inherit;font-size:.86rem;cursor:pointer}.public-user-dropdown a:hover,.public-user-dropdown button:hover{background:rgba(255,255,255,.07);color:#fff}
.member-preview-section{padding-top:72px}.member-preview-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:28px}.member-preview-heading h2{max-width:760px;margin:.5rem 0 .75rem;font-size:clamp(2rem,4vw,3.7rem);line-height:1.05}.member-preview-heading p{max-width:720px;color:#aab3be}.member-demo-shell{display:grid;grid-template-columns:220px 1fr;min-height:620px;border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;background:linear-gradient(145deg,rgba(13,17,23,.96),rgba(5,7,10,.98));box-shadow:0 35px 90px rgba(0,0,0,.42)}.member-demo-sidebar{padding:22px 14px;border-right:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.018);display:flex;flex-direction:column;gap:7px}.member-demo-brand{display:flex;align-items:center;gap:10px;padding:5px 9px 22px;font-weight:800;letter-spacing:.16em}.member-demo-brand img{width:28px}.member-demo-sidebar button{display:grid;grid-template-columns:22px 1fr 18px;align-items:center;text-align:left;gap:8px;border:0;border-radius:11px;padding:12px 10px;background:transparent;color:#8f99a6;cursor:pointer}.member-demo-sidebar button.is-active{color:#fff;background:rgba(255,255,255,.08)}.member-demo-sidebar button:hover{color:#fff;background:rgba(255,255,255,.055)}.member-demo-main{padding:28px}.member-demo-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.member-demo-topbar small{font-size:.68rem;letter-spacing:.15em;color:#8994a0}.member-demo-topbar h3{font-size:1.65rem;margin:4px 0}.member-demo-plan{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:8px 12px;color:#bbc3cc;font-size:.76rem}.member-demo-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.member-demo-metrics article{position:relative;display:flex;flex-direction:column;min-height:132px;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(255,255,255,.035)}.member-demo-metrics span{font-size:.76rem;color:#8f99a5}.member-demo-metrics strong{font-size:1.15rem;margin:12px 0 auto}.member-demo-metrics a{font-size:.76rem;color:#fff;text-decoration:underline;text-underline-offset:4px}.member-demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.member-demo-grid>article{min-height:205px;padding:20px;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.028)}.member-card-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.member-card-title span{display:flex;align-items:center;gap:8px;font-weight:700}.member-card-title small{color:#99a3af}.member-demo-live label{display:flex;align-items:center;gap:10px;margin:13px 0;color:#dbe1e8;font-size:.88rem}.member-demo-live label.is-locked{color:#747e89}.member-demo-live input{accent-color:#fff}.member-demo-locked{position:relative;overflow:hidden;cursor:pointer}.member-demo-locked:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.025));pointer-events:none}.member-demo-locked:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}.member-demo-locked>span{display:block;color:#8e98a4;font-size:.68rem;letter-spacing:.13em;margin-bottom:10px}.member-demo-locked h3{font-size:1.15rem;margin:0 0 10px;max-width:340px}.member-demo-locked p{font-size:.85rem;color:#89939f;max-width:390px}.member-lock-badge{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.07);margin-bottom:18px}.member-unlock-strip{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 20px;border:1px solid rgba(255,255,255,.1);border-radius:17px;background:rgba(255,255,255,.035)}.member-unlock-strip>div{display:flex;align-items:center;gap:12px;color:#b8c1ca;font-size:.86rem}.member-unlock-strip a{display:flex;align-items:center;gap:8px;color:#fff;white-space:nowrap}.member-lock-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}.member-lock-modal[hidden]{display:none}.member-lock-modal-card{position:relative;width:min(480px,100%);padding:34px;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:linear-gradient(145deg,#10141a,#07090d);box-shadow:0 35px 100px rgba(0,0,0,.7);text-align:center}.member-modal-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer}.member-modal-icon{width:58px;height:58px;margin:0 auto 18px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.07)}.member-lock-modal-card>span{font-size:.68rem;letter-spacing:.16em;color:#909aa6}.member-lock-modal-card h2{font-size:1.8rem;margin:10px 0}.member-lock-modal-card p{color:#9da7b2}.member-modal-actions{display:flex;justify-content:center;gap:10px;margin-top:25px}
@media(max-width:1050px){.public-preview-link{display:none}.public-user-copy{display:none}.public-user-trigger{padding:6px}.member-demo-shell{grid-template-columns:78px 1fr}.member-demo-sidebar{padding:20px 10px}.member-demo-brand span,.member-demo-sidebar button:not(.is-active){font-size:0}.member-demo-sidebar button{display:flex;justify-content:center}.member-demo-sidebar button svg:last-child{display:none}.member-demo-brand{justify-content:center;padding-inline:0}.member-demo-brand img{width:30px}}
@media(max-width:760px){.member-preview-heading{align-items:flex-start;flex-direction:column}.member-demo-shell{grid-template-columns:1fr;min-height:auto}.member-demo-sidebar{display:none}.member-demo-main{padding:18px}.member-demo-metrics,.member-demo-grid{grid-template-columns:1fr}.member-demo-topbar{align-items:flex-start;gap:12px}.member-demo-plan{font-size:.65rem}.member-unlock-strip{align-items:flex-start;flex-direction:column}.member-modal-actions{flex-direction:column}.public-user-dropdown{position:fixed;right:16px;top:76px}.public-user-trigger>svg{display:none}}

/* v2.5 — plataforma unificada y control de acceso */
.dashboard-home-link{display:flex;text-decoration:none}.payment-option{font:inherit;text-align:left;border:1px solid rgba(255,255,255,.12);cursor:pointer;color:inherit;width:100%}.payment-option:disabled{opacity:.55;cursor:wait}.renewal-card{max-width:820px;margin:auto}.onix-os-page .public-header{position:fixed;inset:0 0 auto}.checkout-note svg{width:18px;vertical-align:middle;margin-right:8px}.public-nav[data-state="premium"] a{white-space:nowrap}


/* =========================================================
   ONIX v2.6 — Assistant operativo + Demo Dashboard
========================================================= */
.onix-assistant-card{min-height:290px;display:flex;flex-direction:column;gap:14px}.assistant-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.assistant-card-head h3{margin:6px 0 0}.assistant-live-badge{display:inline-flex!important;align-items:center;gap:6px;padding:7px 10px;border:1px solid rgba(255,255,255,.13);border-radius:999px;font-size:10px!important;color:#dce2e8!important;background:rgba(255,255,255,.04)}.assistant-live-badge svg{width:13px}.assistant-daily-summary{line-height:1.65!important;flex:1}.assistant-quick-actions{display:flex;flex-wrap:wrap;gap:8px}.assistant-quick-actions button,.assistant-panel-shortcuts button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#eef1f4;border-radius:999px;padding:8px 11px;cursor:pointer;font-size:11px;transition:.2s}.assistant-quick-actions button:hover,.assistant-panel-shortcuts button:hover{border-color:rgba(255,255,255,.32);transform:translateY(-1px)}.assistant-open-button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}.assistant-open-button svg{width:16px}
.onix-assistant-panel{position:fixed;z-index:10030;right:18px;top:18px;bottom:18px;width:min(430px,calc(100vw - 36px));display:flex;flex-direction:column;padding:20px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:rgba(9,11,14,.96);box-shadow:0 30px 90px rgba(0,0,0,.55);backdrop-filter:blur(26px);transform:translateX(calc(100% + 42px));opacity:0;pointer-events:none;transition:.32s ease}.onix-assistant-panel.active{transform:translateX(0);opacity:1;pointer-events:auto}.assistant-panel-backdrop{position:fixed;inset:0;z-index:10020;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}.assistant-panel-head{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:15px}.assistant-panel-head span{font-size:10px;letter-spacing:.16em;color:#9ea7b0}.assistant-panel-head h2{font-size:21px;margin:5px 0}.assistant-panel-head p{font-size:12px;color:#9da5ad;margin:0}.assistant-panel-head>button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;cursor:pointer}.assistant-chat{flex:1;overflow:auto;padding:18px 2px;display:flex;flex-direction:column;gap:12px}.assistant-message{max-width:88%;padding:11px 13px;border-radius:16px}.assistant-message span{display:block;font-size:9px;letter-spacing:.12em;margin-bottom:5px;color:#929ba5}.assistant-message p{margin:0;font-size:13px;line-height:1.55}.assistant-message.assistant{align-self:flex-start;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.08)}.assistant-message.user{align-self:flex-end;background:#f3f5f7;color:#090b0e}.assistant-message.user span{color:#4b535c}.assistant-panel-shortcuts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.assistant-input-row{display:flex;gap:8px}.assistant-input-row input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:#fff;border-radius:15px;padding:13px 14px;outline:none}.assistant-input-row input:focus{border-color:rgba(255,255,255,.35)}.assistant-input-row button{width:46px;border:0;border-radius:14px;cursor:pointer}.assistant-input-row svg{width:17px}.assistant-scope-note{color:#747e88;font-size:10px;line-height:1.4;margin-top:10px}.assistant-inline-link{display:inline;border:0;background:none;color:#fff;text-decoration:underline;text-underline-offset:3px;padding:0;cursor:pointer;font:inherit}.assistant-inline-anchor{color:#fff;text-decoration:underline;text-underline-offset:3px}
.demo-data-notice{display:flex;align-items:center;gap:6px!important;font-size:11px!important;color:#9ea6af!important;margin:7px 0 0!important}.demo-data-notice svg{width:14px}.member-demo-metrics article span small{display:block;margin-top:4px;font-size:8px;letter-spacing:.12em;color:#858e98;text-transform:uppercase}.member-demo-metrics article em{font-style:normal;font-size:10px;color:#919aa4}.member-demo-assistant{padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));display:flex;flex-direction:column;gap:14px}.demo-assistant-chat{min-height:90px;border-radius:15px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.07);padding:13px}.demo-assistant-chat p{margin:0 0 8px;font-size:12px;line-height:1.55;color:#c8ced5}.demo-assistant-chat p:last-child{margin-bottom:0}.demo-assistant-buttons{display:flex;flex-wrap:wrap;gap:7px}.demo-assistant-buttons button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#fff;border-radius:999px;padding:8px 10px;font-size:10px;cursor:pointer}.demo-full-assistant{display:flex;justify-content:center!important;align-items:center;gap:7px;width:100%;padding:10px!important;border-radius:12px!important}.demo-full-assistant svg{width:14px}.demo-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.demo-benefits-grid article{display:flex;flex-direction:column;gap:8px;padding:17px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.025)}.demo-benefits-grid svg{width:20px;color:#dce1e7}.demo-benefits-grid strong{font-size:12px}.demo-benefits-grid span{font-size:10px;line-height:1.5;color:#8f98a2}
@media(max-width:980px){.demo-benefits-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.assistant-card-head{flex-direction:column}.assistant-live-badge{align-self:flex-start}.onix-assistant-panel{right:8px;top:8px;bottom:8px;width:calc(100vw - 16px);border-radius:20px}.demo-benefits-grid{grid-template-columns:1fr}.member-demo-metrics{grid-template-columns:1fr!important}}

/* ===== SPRINT 7 · ONIX OS, TOUR Y NOTIFICACIONES ===== */
.onix-os-page{background:#050607;color:#fff}.onix-os-header{position:fixed;z-index:50}.os-hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;padding:150px max(6vw,32px) 80px;overflow:hidden;background:radial-gradient(circle at 75% 35%,rgba(118,128,145,.2),transparent 32%),linear-gradient(180deg,#050607,#0b0d10)}.os-hero-copy h1{font-size:clamp(64px,10vw,150px);line-height:.86;margin:25px 0}.os-hero-copy h1 em{font-style:normal;color:#9fa8b6}.os-hero-copy>p{font-size:clamp(18px,2vw,25px);line-height:1.55;color:#c9ced6;max-width:760px}.os-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.os-development-note{display:flex;align-items:center;gap:8px;color:#aeb5c0;margin-top:18px}.os-device-stage{position:relative;min-height:620px;display:grid;place-items:center}.os-phone{position:absolute;width:300px;height:600px;border-radius:46px;border:1px solid rgba(255,255,255,.25);background:linear-gradient(145deg,#161a20,#050607);box-shadow:0 45px 100px rgba(0,0,0,.6);padding:38px 24px}.os-phone-back{transform:translate(-95px,25px) rotate(-10deg);opacity:.65}.os-phone-front{transform:translate(90px,-10px) rotate(7deg);z-index:2}.os-phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:105px;height:24px;background:#000;border-radius:20px}.os-phone-brand{font-size:44px;margin:35px 0 46px}.os-phone h3{font-size:29px;margin:8px 0 25px}.os-mobile-stat,.os-mobile-assistant{padding:18px;border:1px solid #303640;background:#11151a;border-radius:20px;margin:15px 0;display:flex;justify-content:space-between}.os-mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.os-mobile-grid i,.os-phone-card{height:92px;background:linear-gradient(135deg,#242a33,#11151a);border-radius:18px;border:1px solid #303640}.os-phone-card{margin:20px 0}.os-phone-card.short{height:150px}.os-section{padding:110px max(6vw,32px);background:#080a0d;border-top:1px solid rgba(255,255,255,.07)}.os-section-head{max-width:860px;margin-bottom:45px}.os-section-head>span{letter-spacing:.2em;color:#9da6b3;font-size:12px}.os-section-head h2{font-size:clamp(38px,5vw,72px);margin:12px 0}.os-section-head p{font-size:19px;color:#aeb5c0;line-height:1.7}.os-feature-grid,.os-prototype-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.os-feature-grid article,.os-prototype-grid article,.os-version-list article{padding:28px;border:1px solid #252a32;background:linear-gradient(145deg,#111419,#090b0e);border-radius:24px}.os-feature-grid svg{width:28px;height:28px;margin-bottom:35px}.os-feature-grid p{color:#9da6b3;line-height:1.6}.os-shot{height:350px;border-radius:28px;background:#050607;border:1px solid #2e343d;padding:30px;display:flex;flex-direction:column;gap:18px;box-shadow:inset 0 0 80px rgba(255,255,255,.03)}.os-shot>b{font-size:24px}.os-shot>i{height:55px;border-radius:14px;background:#171b20}.os-shot-progress{height:10px;background:#222832;border-radius:10px;overflow:hidden}.os-shot-progress i{display:block;width:70%;height:100%;background:#d5d9df}.shot-assistant p{background:#15191f;padding:20px;border-radius:18px;line-height:1.5}.shot-assistant button{margin-top:auto;padding:15px;border:0;border-radius:15px}.os-timeline{display:grid;gap:12px}.os-timeline article{display:grid;grid-template-columns:80px 1fr;gap:20px;padding:25px;border:1px solid #252b34;border-radius:22px;background:#0d1014}.os-timeline article>span{font-size:40px;color:#59616d}.os-timeline article.active{border-color:#98a2b0}.os-timeline article.done small{color:#78d89b}.os-timeline article.active small{color:#f3c56c}.os-version-list{display:grid;gap:12px}.os-version-list article{display:grid;grid-template-columns:180px 1fr auto;align-items:center}.os-version-list em{font-style:normal;color:#9da6b3}.os-early-access{display:flex;justify-content:space-between;align-items:center;gap:30px;background:radial-gradient(circle at 10% 0,rgba(255,255,255,.12),transparent 35%),#0d1014}.os-faq details{border-bottom:1px solid #252b34;padding:24px 0}.os-faq summary{font-size:20px;cursor:pointer}.os-faq details p{color:#aeb5c0;line-height:1.7}.onix-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(14px);z-index:1000;display:grid;place-items:center;padding:20px}.onix-modal-backdrop[hidden]{display:none}.onix-info-modal{position:relative;max-width:500px;text-align:center;padding:42px;border-radius:28px;background:#101318;border:1px solid #323944}.onix-info-modal>button:first-child{position:absolute;right:18px;top:18px;background:none;border:0;color:#fff}.onix-modal-icon{width:72px;height:72px;border-radius:22px;background:#242a32;display:grid;place-items:center;margin:0 auto 20px}.onix-tour-overlay{position:fixed;inset:0;z-index:2000;pointer-events:none;background:rgba(0,0,0,.72)}.onix-tour-overlay[hidden]{display:none}.onix-tour-focus{position:fixed;border:2px solid #fff;border-radius:18px;box-shadow:0 0 0 9999px rgba(0,0,0,.72),0 0 38px rgba(255,255,255,.32);transition:.35s;z-index:1}.onix-tour-card{position:fixed;width:min(360px,calc(100vw - 32px));padding:24px;border-radius:22px;background:#11151a;border:1px solid #39414c;z-index:2;pointer-events:auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}.onix-tour-top,.onix-tour-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.onix-tour-top span{font-size:11px;letter-spacing:.16em}.onix-tour-top button{background:none;border:0;color:#fff}.onix-tour-progress{height:5px;background:#2a3038;border-radius:9px;margin:18px 0 12px;overflow:hidden}.onix-tour-progress i{display:block;height:100%;background:#fff}.onix-tour-card p{color:#b6bdc8;line-height:1.6}.onix-tour-card label{display:block;font-size:12px;color:#9da6b3;margin:20px 0}.onix-tour-actions button{padding:10px 13px;border-radius:10px;border:1px solid #343c47;background:#171b21;color:#fff}.onix-tour-actions button:last-child{background:#fff;color:#050607}.tour-replay-btn,.demo-tour-button{display:inline-flex;align-items:center;gap:8px;border:1px solid #343b45;background:#111419;color:#fff;border-radius:12px;padding:10px 14px}.demo-tour-button{margin:0 0 18px auto}.notification-item{padding:18px;border-bottom:1px solid #292f37;cursor:pointer}.notification-item.unread{background:rgba(255,255,255,.045)}.notification-item span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#99a3af}.notification-item h4{margin:6px 0}.notification-item p,.notification-item small{color:#9ca5b1}.notification-empty{text-align:center;padding:50px 20px;color:#89929e}
@media(max-width:900px){.os-hero{grid-template-columns:1fr;padding-top:125px}.os-device-stage{min-height:560px}.os-feature-grid,.os-prototype-grid{grid-template-columns:1fr}.os-version-list article{grid-template-columns:1fr;gap:8px}.os-early-access{flex-direction:column;align-items:flex-start}.tour-replay-btn span{display:none}}@media(max-width:560px){.os-phone{width:235px;height:490px}.os-phone-front{transform:translate(45px) rotate(5deg)}.os-phone-back{transform:translate(-55px,20px) rotate(-9deg)}.os-device-stage{min-height:500px}.os-section{padding:75px 20px}.onix-tour-card{left:16px!important;bottom:16px!important;top:auto!important}.onix-tour-focus{display:none}.onix-tour-overlay{background:rgba(0,0,0,.82)}}

/* =====================================================
   ONIX v3.0 — Release Candidate / Launch readiness
   ===================================================== */
.dashboard-topbar{position:sticky;top:0;z-index:35;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.dashboard-main{min-width:0}
.dashboard-launch-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.quick-command-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.045);color:inherit;cursor:pointer;transition:.2s ease}
.quick-command-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.quick-command-btn kbd{font:600 10px/1 system-ui;padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--muted,#9ca3af)}
.launch-health-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.launch-health-item{padding:14px 16px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.035)}
.launch-health-item small{display:block;color:var(--muted,#9ca3af);margin-bottom:5px}
.launch-health-item strong{display:flex;align-items:center;gap:7px;font-size:14px}
.health-dot{width:8px;height:8px;border-radius:50%;background:#65d69b;box-shadow:0 0 12px rgba(101,214,155,.65)}
.onix-system-status{position:fixed;right:20px;bottom:20px;z-index:10000;display:flex;align-items:center;gap:10px;max-width:min(460px,calc(100vw - 32px));padding:13px 14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(10,12,16,.92);color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(18px);transform:translateY(24px);opacity:0;pointer-events:none;transition:.25s ease}
.onix-system-status.show{transform:none;opacity:1;pointer-events:auto}
.onix-system-status .status-dot{width:9px;height:9px;border-radius:50%;background:#65d69b;flex:0 0 auto}
.onix-system-status[data-type="warning"] .status-dot{background:#f4bf62}
.onix-system-status[data-type="error"] .status-dot{background:#ff6b74}
.onix-system-status .status-copy{font-size:13px;line-height:1.4}
.onix-system-status .status-close{margin-left:auto;border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer;opacity:.65}
.quick-command-dialog{width:min(560px,calc(100vw - 28px));padding:0;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:#101319;color:#fff;box-shadow:0 35px 100px rgba(0,0,0,.55)}
.quick-command-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(7px)}
.quick-command-head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.quick-command-head input{flex:1;border:0;outline:0;background:transparent;color:#fff;font:500 15px system-ui}
.quick-command-head button{border:0;background:transparent;color:#fff;cursor:pointer;font-size:22px}
.quick-command-list{display:grid;gap:7px;padding:12px;max-height:55vh;overflow:auto}
.quick-command-list button{display:flex;align-items:center;gap:11px;width:100%;padding:13px 14px;border:1px solid transparent;border-radius:12px;background:transparent;color:#fff;text-align:left;cursor:pointer}
.quick-command-list button:hover,.quick-command-list button:focus-visible{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.09);outline:0}
.is-offline .health-dot{background:#f4bf62;box-shadow:none}
:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:3px}
@media(max-width:900px){.quick-command-btn span,.quick-command-btn kbd{display:none}.launch-health-card{grid-template-columns:1fr}.dashboard-launch-actions{margin-left:0}.dashboard-topbar{gap:8px}}
@media(max-width:620px){.launch-health-card{margin:12px 0}.launch-health-item{padding:12px}.onix-system-status{right:16px;bottom:16px}.tour-replay-btn span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* =====================================================
   ONIX v3.7 — Intro independiente y logo animado
   ===================================================== */
body.public-index-v23.intro-active{
  overflow:hidden!important;
  height:100vh;
}
body.public-index-v23.intro-active > .public-header,
body.public-index-v23.intro-active > main,
body.public-index-v23.intro-active > .public-footer,
body.public-index-v23.intro-active > .public-ambient,
body.public-index-v23.intro-active > .ove-stage{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.public-index-v23.intro-complete > .public-header,
body.public-index-v23.intro-complete > main,
body.public-index-v23.intro-complete > .public-footer,
body.public-index-v23.intro-complete > .public-ambient,
body.public-index-v23.intro-complete > .ove-stage{
  animation:onixPageReveal .9s cubic-bezier(.2,.8,.2,1) both;
}
.public-index-v23 .intro-screen{
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  text-align:center!important;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(520px 320px at 50% 42%,rgba(116,130,151,.14),transparent 70%),
    linear-gradient(155deg,#020304 0%,#07090d 52%,#010101 100%)!important;
  opacity:1;
  visibility:visible;
  transform:scale(1);
  transition:opacity .85s ease,visibility .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)!important;
}
.public-index-v23 .intro-screen::before{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:-2;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.035) 0 1px,transparent 2px),
    radial-gradient(circle at 80% 65%,rgba(255,255,255,.028) 0 1px,transparent 2px);
  background-size:130px 130px,170px 170px;
  animation:introDust 14s linear infinite;
}
.public-index-v23 .intro-screen::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(520px,82vw);
  aspect-ratio:1;
  z-index:-1;
  transform:translate(-50%,-52%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(204,220,241,.08),transparent 68%);
  filter:blur(18px);
  animation:introGlow 3.8s ease-in-out infinite;
}
.public-index-v23 .intro-screen.is-leaving{
  opacity:0!important;
  visibility:hidden!important;
  transform:scale(1.045)!important;
}
.public-index-v23 .intro-screen[hidden]{display:none!important}
.public-index-v23 .intro-symbol{
  width:clamp(82px,9vw,122px)!important;
  height:auto!important;
  object-fit:contain;
  opacity:0;
  transform:translateY(22px) scale(.72) rotate(-8deg);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(225,235,248,.17));
  animation:introLogoReveal 1.15s cubic-bezier(.16,1,.3,1) .12s forwards,
            introLogoFloat 4s ease-in-out 1.35s infinite;
}
.public-index-v23 .intro-kicker,
.public-index-v23 .intro-title,
.public-index-v23 .enter-btn{
  opacity:0;
  transform:translateY(18px);
  animation:introContentReveal .72s cubic-bezier(.2,.8,.2,1) forwards;
}
.public-index-v23 .intro-kicker{animation-delay:.82s!important}
.public-index-v23 .intro-title{animation-delay:.98s!important}
.public-index-v23 .enter-btn{animation-delay:1.18s!important}
.public-index-v23 .enter-btn:disabled{pointer-events:none;opacity:.65}
@keyframes introLogoReveal{
  0%{opacity:0;transform:translateY(22px) scale(.72) rotate(-8deg);filter:blur(10px) drop-shadow(0 0 0 transparent)}
  65%{opacity:1;transform:translateY(-4px) scale(1.045) rotate(1deg);filter:blur(0) drop-shadow(0 0 34px rgba(230,240,255,.2))}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0) drop-shadow(0 18px 30px rgba(0,0,0,.45)) drop-shadow(0 0 28px rgba(225,235,248,.17))}
}
@keyframes introLogoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.012)}}
@keyframes introContentReveal{to{opacity:1;transform:translateY(0)}}
@keyframes introGlow{0%,100%{opacity:.55;transform:translate(-50%,-52%) scale(.94)}50%{opacity:1;transform:translate(-50%,-52%) scale(1.04)}}
@keyframes introDust{to{transform:translate3d(70px,-45px,0)}}
@keyframes onixPageReveal{0%{opacity:0;transform:scale(1.015);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@media(max-width:640px){
  .public-index-v23 .intro-title{font-size:clamp(2.5rem,14vw,4rem)!important}
  .public-index-v23 .intro-symbol{width:88px!important}
}
@media(prefers-reduced-motion:reduce){
  .public-index-v23 .intro-symbol,
  .public-index-v23 .intro-kicker,
  .public-index-v23 .intro-title,
  .public-index-v23 .enter-btn{opacity:1!important;transform:none!important;animation:none!important}
}

/* ==========================================================
   ONIX v3.9 · DASHBOARD FIT & POSITIONING HOTFIX
   Compacta la interfaz de escritorio, corrige el topbar,
   evita paneles flotantes fuera de lugar y elimina scroll
   interno innecesario en la barra lateral.
========================================================== */
@media (min-width: 1101px) {
  .dashboard-layout {
    grid-template-columns: 188px minmax(0, 1fr) !important;
  }

  .dashboard-sidebar {
    width: 188px !important;
    height: 100vh !important;
    padding: 22px 14px 18px !important;
    overflow: hidden !important;
  }

  .dashboard-logo {
    width: 102px !important;
    max-height: 66px !important;
    margin: 0 auto 24px !important;
  }

  .dashboard-menu {
    gap: 8px !important;
  }

  .dash-link {
    min-height: 48px !important;
    padding: 11px 13px !important;
    border-radius: 16px !important;
    gap: 11px !important;
    font-size: 14px !important;
  }

  .dash-link svg {
    width: 18px !important;
    height: 18px !important;
  }

  .sidebar-plan {
    margin-top: auto !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .dashboard-main {
    width: 100% !important;
    max-width: none !important;
    padding: 20px clamp(22px, 2.6vw, 46px) 58px !important;
  }

  .dashboard-topbar,
  .dash-section {
    width: 100% !important;
    max-width: 1540px !important;
  }

  .dashboard-topbar {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 150px !important;
    padding: 20px 22px !important;
    margin: 0 auto 24px !important;
    border-radius: 24px !important;
  }

  .smart-header {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .smart-header h2 {
    font-size: clamp(27px, 2vw, 36px) !important;
    margin: 5px 0 6px !important;
  }

  .smart-header p,
  .smart-header strong {
    font-size: 14px !important;
  }

  .tour-replay-btn,
  .quick-command-btn,
  .notification-btn,
  .topbar-profile {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    transform: none !important;
  }

  .tour-replay-btn,
  .quick-command-btn {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    white-space: nowrap !important;
  }

  .tour-replay-btn span,
  .quick-command-btn span {
    display: inline !important;
    font-size: 13px !important;
  }

  .quick-command-btn kbd {
    font-size: 10px !important;
  }

  .notification-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
  }

  .topbar-profile {
    min-width: 142px !important;
    height: 54px !important;
    padding: 7px 10px !important;
    border-radius: 18px !important;
  }

  .topbar-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .onix-today-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(310px, .78fr) !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
  }

  .onix-today-card,
  .onix-ai-card {
    padding: 26px !important;
    border-radius: 24px !important;
  }

  .onix-today-card h3,
  .onix-ai-card h3 {
    font-size: clamp(25px, 2vw, 34px) !important;
  }

  .today-actions {
    gap: 10px !important;
  }

  .today-action {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  .assistant-quick-actions button {
    min-height: 42px !important;
    padding: 10px 12px !important;
  }

  .dash-grid,
  .summary-grid,
  .goals-grid,
  .profile-grid {
    gap: 18px !important;
  }

  :is(.dash-card,.goal-card,.activity-card,.profile-main-card,.profile-option-card,.session-management-card,.level-card) {
    padding: 24px !important;
    border-radius: 22px !important;
  }
}

/* El centro de notificaciones solo aparece al abrirlo. */
.notifications-panel {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(430px, 94vw) !important;
  height: 100dvh !important;
  margin: 0 !important;
  transform: translate3d(110%,0,0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
  transition: transform .36s ease, opacity .24s ease, visibility .36s !important;
}
.notifications-panel.active {
  transform: translate3d(0,0,0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Evita que el fondo visual altere la posición del panel. */
body.onix-visual-engine > .notifications-panel {
  position: fixed !important;
  z-index: 999999 !important;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .dashboard-topbar {
    position: relative !important;
    top: auto !important;
    grid-template-columns: minmax(0,1fr) auto auto auto !important;
  }
  .tour-replay-btn span,
  .quick-command-btn span { display: none !important; }
  .dashboard-sidebar { overflow: hidden !important; }
}

/* ==========================================================
   ONIX v4.0 · DASHBOARD + LOGIN FINAL FIT
   Corrige escala, sidebar, cards estiradas y login fuera de vista.
========================================================== */
@media (min-width: 1101px) {
  .dashboard-layout {
    grid-template-columns: 210px minmax(0, 1fr) !important;
  }

  .dashboard-sidebar {
    width: 210px !important;
    min-width: 210px !important;
    padding: 20px 14px 16px !important;
    overflow: hidden !important;
  }

  .dashboard-logo {
    width: 126px !important;
    height: 54px !important;
    max-height: 54px !important;
    object-fit: contain !important;
    margin: 0 auto 18px !important;
  }

  .dashboard-menu {
    gap: 6px !important;
  }

  .dash-link {
    min-height: 44px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .dash-link span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sidebar-plan {
    padding: 12px !important;
    font-size: 12px !important;
  }

  .dashboard-main {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 16px 24px 38px !important;
  }

  .dashboard-topbar,
  .dash-section {
    width: 100% !important;
    max-width: none !important;
  }

  .dashboard-topbar {
    min-height: 112px !important;
    padding: 15px 18px !important;
    margin: 0 0 18px !important;
    border-radius: 20px !important;
    gap: 8px !important;
  }

  .smart-header h2 {
    font-size: clamp(24px, 1.8vw, 31px) !important;
    margin: 3px 0 4px !important;
  }

  .smart-header p,
  .smart-header strong {
    font-size: 12px !important;
  }

  .tour-replay-btn,
  .quick-command-btn {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .notification-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .topbar-profile {
    min-width: 132px !important;
    height: 48px !important;
    padding: 5px 8px !important;
  }

  .topbar-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .onix-today-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr) !important;
    align-items: start !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }

  .onix-today-card,
  .onix-ai-card,
  .onix-assistant-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .onix-today-card h3,
  .onix-ai-card h3 {
    font-size: clamp(23px, 1.7vw, 29px) !important;
    margin: 10px 0 14px !important;
  }

  .today-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .today-action {
    min-height: 42px !important;
    padding: 9px 11px !important;
    font-size: 11px !important;
    border-radius: 13px !important;
  }

  .assistant-card-head {
    gap: 10px !important;
  }

  .assistant-live-badge {
    padding: 5px 8px !important;
    font-size: 9px !important;
  }

  .assistant-daily-summary {
    margin: 6px 0 10px !important;
    line-height: 1.45 !important;
    font-size: 13px !important;
  }

  .assistant-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .assistant-quick-actions button {
    min-height: 36px !important;
    padding: 7px 9px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
  }

  .assistant-open-button {
    min-height: 38px !important;
    height: 38px !important;
    margin-top: 8px !important;
    border-radius: 13px !important;
  }

  .launch-health-card {
    gap: 8px !important;
    margin: 12px 0 16px !important;
  }

  .launch-health-item {
    padding: 10px 12px !important;
    border-radius: 13px !important;
  }

  .dash-grid,
  .summary-grid,
  .goals-grid,
  .profile-grid {
    gap: 14px !important;
  }

  :is(.dash-card,.goal-card,.activity-card,.profile-main-card,.profile-option-card,.session-management-card,.level-card) {
    min-height: 0 !important;
    padding: 19px !important;
    border-radius: 18px !important;
  }

  .activity-card {
    margin-bottom: 0 !important;
  }

  .activity-list {
    gap: 8px !important;
  }
}

/* Login: centrado real, sin zoom excesivo y visible completo en laptop. */
body.onix-premium-page.login-body {
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.onix-premium-page .login-wrapper {
  width: min(1120px, calc(100% - 48px)) !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding: 64px 0 34px !important;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(390px, .78fr) !important;
  align-items: center !important;
  gap: clamp(34px, 5vw, 68px) !important;
}

body.onix-premium-page .login-brand img {
  width: 150px !important;
  max-height: 62px !important;
  margin-bottom: 20px !important;
}

body.onix-premium-page .login-brand h1 {
  font-size: clamp(3rem, 4.7vw, 4.8rem) !important;
  line-height: .95 !important;
  margin-bottom: 12px !important;
}

body.onix-premium-page .login-brand p {
  font-size: 1rem !important;
}

body.onix-premium-page .login-panel {
  width: min(470px, 100%) !important;
  justify-self: end !important;
  padding: 26px !important;
  border-radius: 24px !important;
}

body.onix-premium-page .input-group {
  height: 56px !important;
  grid-template-columns: 50px 1fr !important;
  border-radius: 15px !important;
  margin-bottom: 11px !important;
}

body.onix-premium-page .login-panel button {
  min-height: 54px !important;
  border-radius: 15px !important;
}

body.onix-premium-page .onix-form-note {
  margin: 8px 0 14px !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body.onix-premium-page .login-safe {
  grid-column: 1 / -1 !important;
  margin: -8px 0 0 !important;
  font-size: 12px !important;
}

body.onix-premium-page .login-bg-logo {
  width: min(32vw, 390px) !important;
  opacity: .018 !important;
  filter: blur(3px) !important;
}

@media (min-width: 1101px) and (max-height: 820px) {
  body.onix-premium-page .login-wrapper {
    padding-top: 50px !important;
    padding-bottom: 22px !important;
  }
  body.onix-premium-page .login-brand img {
    width: 130px !important;
    margin-bottom: 14px !important;
  }
  body.onix-premium-page .login-brand h1 {
    font-size: clamp(2.7rem, 4vw, 4rem) !important;
  }
  body.onix-premium-page .login-panel {
    padding: 22px !important;
  }
  body.onix-premium-page .input-group {
    height: 52px !important;
  }
}

@media (max-width: 1100px) {
  body.onix-premium-page .login-wrapper {
    width: min(760px, calc(100% - 32px)) !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 82px 0 38px !important;
    text-align: center !important;
  }
  body.onix-premium-page .login-brand img {
    margin-inline: auto !important;
  }
  body.onix-premium-page .login-panel {
    justify-self: center !important;
  }
}