/* =========================================================
   Layout
   ========================================================= */
header{
  padding: 1rem 1.25rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 1rem;
  background:var(--header-bg);
  border-bottom:1px solid var(--border-75);
  box-shadow:none;
  backdrop-filter: blur(10px);
}
body.dark-mode header,
body[data-theme="dark"] header{
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  box-shadow:none;
  backdrop-filter: blur(14px);
}
body.light-mode header,
body[data-theme="light"] header{
  background:var(--surface-3);
  border-bottom:1px solid var(--color-border);
  box-shadow:none;
  backdrop-filter:none;
}
/*
footer{
  background-color: aqua;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 1rem;
  border-bottom:1px solid var(--border-75);
  box-shadow:0 10px 30px var(--shadow-soft);
  backdrop-filter: blur(10px);
}*/
.brand{
  display:flex;
  align-items:center;
  gap: .9rem;
  min-width: 0;
} 
.logo{
  width: 30%;
  flex:0 0 auto;
  filter: none;
  transition: transform var(--transition-base);
}
.logo:hover {
  transform: scale(1.05); /* El logo crece apenas un poquito al pasar el mouse */
  filter: brightness(1.1);
}
.brand-txt{ display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.brand-title{ font-family:var(--font-display); font-weight:700; letter-spacing:.3px; font-size:1.3rem; }
.brand-sub{ color:var(--color-muted-2); font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.hdr-right{
  display:flex;
  align-items:center;
  gap: .6rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  padding: .42rem .7rem;
  border-radius: var(--radius-pill);
  background:var(--pill-bg);
  border:1px solid var(--pill-border);
  color:var(--text-subtle);
  font-size: .82rem;
  white-space:nowrap;
  box-shadow:none;
}
body.dark-mode .pill,
body[data-theme="dark"] .pill{
  background:var(--inverse-04);
  border-color:var(--inverse-08);
  color:var(--text-soft);
  box-shadow:none;
}
body.light-mode .pill,
body[data-theme="light"] .pill{
  background:var(--surface-7);
  border-color: var(--color-border);
  color:var(--color-muted);
  box-shadow:none;
}
.dot{
  width: 0.5rem;height:0.5rem;border-radius:50%;
  background:var(--color-ok);
  box-shadow:none;
}
.dot.warn{ background:var(--color-warn); box-shadow:none; }
.btn{
  border:none;
  border-radius: var(--radius-md);
  padding: .58rem 1rem;
  cursor:pointer;
  font-weight:700;
  font-size: .92rem;
  user-select:none;
  transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .45rem;
  letter-spacing: .1px;
}
.btn:hover{ transform: translateY(-1px); filter:brightness(1.04); }
.btn-primary{
  color:var(--btn-primary-text);
  background:var(--btn-primary-bg);
  box-shadow:var(--shadow-btn);
}
body.dark-mode .btn-primary,
body[data-theme="dark"] .btn-primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border:1px solid var(--btn-primary-border);
  border-radius: var(--radius-pill);
  box-shadow:none;
}
body.dark-mode .btn-primary:active,
body[data-theme="dark"] .btn-primary:active{
  transform:scale(0.98);
}
body.light-mode .btn-primary,
body[data-theme="light"] .btn-primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  box-shadow:var(--shadow-btn);
}
body.light-mode .btn-primary:hover,
body[data-theme="light"] .btn-primary:hover{
  background:var(--btn-primary-hover-bg);
  filter:none;
}
.btn-outline{
  color:var(--color-text);
  background:var(--glass-soft);
  border:1px solid var(--border-90);
  box-shadow:var(--shadow-btn);
}
.btn-outline:hover{ border-color:var(--color-accent); }
.btn-ghost{
  background:var(--glass-faint);
  border:1px solid var(--border-80);
  color:var(--color-text);
}
body.dark-mode .btn-outline,
body[data-theme="dark"] .btn-outline{
  background:transparent;
  border-color:var(--inverse-14);
  box-shadow:none;
}
body.dark-mode .btn-ghost,
body[data-theme="dark"] .btn-ghost{
  background:var(--inverse-04);
  border-color:var(--inverse-10);
}
body.light-mode .btn-outline,
body[data-theme="light"] .btn-outline{
  background:var(--surface-3);
  border-color: var(--color-border);
  box-shadow:var(--shadow-btn);
}
body.light-mode .btn-ghost,
body[data-theme="light"] .btn-ghost{
  background:var(--surface-7);
  border-color: var(--color-border);
}

.shell{ max-width:1180px; margin:1.25rem auto 2rem; padding:0 1rem; }
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 1.15rem;
  align-items:stretch;
}
@media(max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }

.card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow:none;
  padding: 1.2rem;
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(6px);
}
body.dark-mode .card,
body[data-theme="dark"] .card{
  background:var(--card-bg);
  border-color:var(--card-border);
  box-shadow:none;
  backdrop-filter: blur(8px);
}
body.light-mode .card,
body[data-theme="light"] .card{
  background:var(--card-bg);
  border-color:var(--card-border);
  box-shadow:none;
  backdrop-filter:none;
}
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: var(--accent-12);
  pointer-events:none;
  opacity:.55;
}
body.dark-mode .card::before,
body[data-theme="dark"] .card::before{
  opacity:.18;
}
body.light-mode .card::before,
body[data-theme="light"] .card::before{
  opacity:.12;
}
.card > *{ position:relative; z-index:1; }
.card-hero{
  display:flex;
  flex-direction:column;
  gap: .8rem;
  justify-content:space-between;
}
.card-auth{
  display:flex;
  flex-direction:column;
  gap: .75rem;
}
.eyebrow{
  font-size: .82rem;
  letter-spacing: .35px;
  text-transform:uppercase;
  color:var(--muted);
}

.hero-title{
  margin: 0 0 .45rem 0;
  font-size: 1.65rem;
  font-weight:900;
  letter-spacing: .2px;
  line-height: 1.1;
}
body.dark-mode .hero-title,
body[data-theme="dark"] .hero-title{
  font-size: 2.4rem;
  letter-spacing: -0.02em;
}
.hero-sub{
  margin: 0 0 1rem 0;
  color:var(--text-soft);
  font-size: .97rem;
  line-height: 1.45;
  max-width: 58ch;
}
.highlight-row{
  display:flex;
  justify-content:space-between;
  gap: .9rem;
  align-items:flex-start;
  flex-wrap:wrap;
}
.highlight-title{
  font-size: .9rem;
  color:var(--muted);
  letter-spacing: .2px;
}
.highlight-big{
  font-size: 1.2rem;
  font-weight:800;
  margin: .1rem 0;
}
.highlight-sub{
  color:var(--text-soft);
  opacity:.95;
}
.chips-row{
  display:flex;
  gap: .5rem;
  flex-wrap:wrap;
  align-items:center;
}
.chip{
  padding: .35rem .7rem;
  border-radius: var(--radius-pill);
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--color-text);
  font-weight:700;
  font-size: .82rem;
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem;
  margin-top:.4rem;
}
@media(max-width:520px){ .feature-grid{ grid-template-columns:1fr; } }
.feat{
  background:var(--card-bg);
  border:1px solid var(--border-85);
  border-radius: var(--radius-lg);
  padding: .75rem .8rem;
  display:flex;
  gap: .7rem;
  align-items:flex-start;
  box-shadow:none;
}
.feat-ico{
  width: 2.125rem;height:2.125rem;border-radius:var(--radius-md);
  background:var(--accent-bg-strong);
  border:1px solid var(--accent-35);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  color:var(--color-primary-strong);
  flex:0 0 auto;
}
.feat-ico svg{
  width: 1.2rem;
  height: 1.2rem;
}
body.dark-mode .feat-ico,
body[data-theme="dark"] .feat-ico{
  color: var(--color-text);
}
body.dark-mode .feat-ico svg,
body[data-theme="dark"] .feat-ico svg,
body.dark-mode .feat-ico svg *,
body[data-theme="dark"] .feat-ico svg *{
  stroke: currentColor !important;
  fill: none !important;
}
.feat b{ display:block; font-size:.95rem; margin-bottom:.1rem; }
.feat span{ color:var(--muted); font-size:.88rem; line-height:1.35; }
.metric-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap: .65rem;
  margin-top:.2rem;
}
.metric-card{
  background:var(--surface-92);
  border:1px solid var(--border-32);
  border-radius: var(--radius-lg);
  padding: .7rem .75rem;
  box-shadow:none;
}
.metric-label{
  font-size: .82rem;
  color:var(--muted);
}
.metric-value{
  font-size: 1.02rem;
  font-weight:800;
  margin: .12rem 0;
}
.metric-sub{
  color:var(--text-soft);
  font-size: .86rem;
  opacity:.9;
}

    .auth-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap: 1rem;
      margin-bottom:.7rem;
      flex-wrap:wrap;
    }
    .auth-title{ margin:0; font-size:1.05rem; font-weight:900; }
    .auth-sub{ margin:.2rem 0 0 0; color:var(--muted); font-size:.86rem; }

    .segmented{
      display:inline-flex;
      gap: .35rem;
      padding: .35rem;
      border-radius: var(--radius-pill);
      background:var(--primary-08);
      border:1px solid var(--border-85);
    }
    .segmented button{
      border:none;
      background:transparent;
      color:var(--color-text);
      padding: .42rem .75rem;
      border-radius: var(--radius-pill);
      cursor:pointer;
      font-weight:800;
      font-size: .85rem;
    }
    .segmented button.active{
      background:var(--btn-primary-bg);
      color:var(--color-primary-strong);
      border:1px solid var(--accent-55);
    }

    .auth-form{
      display:flex;
      flex-direction:column;
      gap: .65rem;
    }
    .auth-hint-row{
      display:flex;
      gap: .5rem;
      flex-wrap:wrap;
      align-items:center;
    }
    .auth-pill{
      padding: .38rem .65rem;
      border-radius: var(--radius-pill);
      border:1px solid var(--border-80);
      background:var(--glass-faint);
      color:var(--color-text);
      font-weight:700;
      font-size: .82rem;
    }
    .auth-pill.ghost{
      background:var(--glass-soft);
      color:var(--text-soft);
    }

    .form-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap: .75rem;
    }
    @media(max-width:650px){ .form-grid{ grid-template-columns:1fr; } }
    .form-group label{
      display:block;
      margin-bottom:.25rem;
      font-size: .82rem;
      color:var(--text-soft);
      letter-spacing: .08rem;
    }
    input, select{
      width: 100%;
      padding: .62rem .7rem;
      border-radius: var(--radius-md);
      border:1px solid var(--border-90);
      background:var(--surface-9);
      color:var(--color-text);
      outline:none;
      font-size: .92rem;
      margin-top:.12rem;
    }
    input:focus, select:focus{
      border-color:var(--color-accent);
      outline:2px solid var(--accent-25);
      outline-offset:1px;
      box-shadow:none;
    }
    select{
      appearance:none;
      background-image: none;
    }
    .signup-extra{
      margin-top:.25rem;
    }

    .row{
      display:flex;
      gap: .6rem;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      margin-top:.65rem;
    }
    .actions-row{ margin-top:.35rem; }
    .row .left{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
    .small{
      font-size: .82rem;
      color:var(--muted);
      line-height: 1.25;
    }
    .link{
      background:transparent;
      border:none;
      color:var(--color-accent);
      cursor:pointer;
      font-weight:800;
      text-decoration:underline;
      text-underline-offset:3px;
      padding: 0;
    }
    .pwd-wrap{ position:relative; }
    .pwd-toggle{
      position:absolute;
      right: 0.625rem;
      top: 50%;
      transform:translateY(-50%);
      border:1px solid var(--border-90);
      background:var(--glass-soft);
      color:var(--color-text);
      border-radius: var(--radius-pill);
      padding: .18rem .55rem;
      cursor:pointer;
      font-weight:800;
      font-size: .8rem;
    }
    .pwd-toggle:hover{ border-color:var(--accent-85); }

    .notice{
      margin-top:.4rem;
      padding: .7rem .8rem;
      border-radius: var(--radius-lg);
      border:1px dashed var(--border-85);
      background:var(--surface-8);
      color:var(--color-text);
      font-size: .86rem;
      line-height: 1.3;
    }
    .notice strong{ color:var(--color-primary-strong); }
    .footer-note{
      margin-top:.85rem;
      display:flex;
      justify-content:space-between;
      gap: 1rem;
      flex-wrap:wrap;
      color:var(--muted);
      font-size: .82rem;
    }

/* =========================================================
   Plans pages
   ========================================================= */
body.plans-index-page{
  --plan-shadow: none;
  --plan-glass: var(--glass-faint);
  --plan-line: var(--border-40);
  margin: 0;
  min-height: 100%;
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--surface-3);
  color:var(--color-text);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 1.125rem;
}
body.plans-index-page header{
  width: 100%;
  max-width: 87.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--glass-faint);
  border:1px solid var(--plan-line);
  border-radius: 0.875rem;
  box-shadow:none;
}
body.plans-index-page .title{
  display:flex;
  flex-direction:column;
  gap: 2px;
}
body.plans-index-page h1{
  margin: 0;
  font-size: 1.35rem;
  color:var(--color-accent);
  text-shadow:0 0 6px var(--accent-18);
}
body.plans-index-page .sub{
  font-size: 0.92rem;
  color:var(--color-muted-2);
  margin: 0;
}
body.plans-index-page .controls{
  display:flex;
  gap: 0.625rem;
  align-items:center;
  flex-wrap:wrap;
}
body.plans-index-page .input{
  min-width: 20rem;
  background: var(--plan-glass);
  color:var(--color-text);
  border:1px solid var(--border-35);
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  outline:none;
}
body.plans-index-page .btn{
  background: var(--plan-glass);
  color:var(--color-text);
  border:1px solid var(--border-35);
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  cursor:pointer;
  font-weight:700;
  transition: transform .12s, background .12s, border-color .12s;
  user-select:none;
}
body.plans-index-page .btn:hover{
  transform:translateY(-2px);
  background:var(--primary-12);
  border-color:var(--accent-30);
}
body.plans-index-page main{
  width: 100%;
  max-width: 87.5rem;
  margin-top:14px;
}
body.plans-index-page .msg{
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  border:1px solid var(--accent-22);
  background: var(--accent-08);
  box-shadow:none;
  color:var(--color-text);
  display:none;
}
body.plans-index-page .grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}
@media (max-width:900px){
  body.plans-index-page .input{ min-width: 220px; width: 100%; }
  body.plans-index-page header{ flex-direction:column; align-items:stretch; }
  body.plans-index-page .grid{ grid-template-columns:1fr; }
  body.plans-index-page .controls{ justify-content:space-between; }
}
body.plans-index-page .card{
  background: var(--glass-faint);
  border:1px solid var(--border-35);
  border-radius: 1rem;
  padding: 0.875rem 1rem;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 0.75rem;
}
body.plans-index-page .card h2{
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-accent);
  letter-spacing: 0.2px;
}
body.plans-index-page .meta{
  margin-top:6px;
  font-size: 0.9rem;
  color: var(--color-muted-2);
}
body.plans-index-page .pill{
  font-size: 0.8rem;
  padding: 0.375rem 0.625rem;
  border-radius: 62.438rem;
  border:1px solid var(--border-35);
  background: var(--primary-12);
  color: var(--color-text);
}

body.plans-page{
  --plan-shadow: none;
  --plan-glass: var(--glass-faint);
  --plan-line: var(--border-35);
  margin: 0;
  min-height: 100%;
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--page-bg);
  color:var(--color-text);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0.875rem;
  padding: 0.875rem;
}
body.plans-page.plans-embed{
  padding: 0;
  gap: 0;
  align-items:stretch;
}
body.plans-page.plans-embed header,
body.plans-page.plans-embed footer{
  display:none;
}
body.plans-page.plans-embed .grid-wrap,
body.plans-page.plans-embed .msg{
  max-width: 100%;
  width: 100%;
  border-radius: 0;
}
body.plans-page header{
  width: 100%;
  max-width: 100rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: var(--glass-faint);
  border:1px solid var(--plan-line);
  border-radius: 0.875rem;
  box-shadow:none;
}
body.plans-page h1{
  margin: 0;
  font-size: 1.2rem;
  color:var(--color-accent);
  text-shadow:0 0 6px var(--accent-2);
}
body.plans-page .right{
  display:flex;
  gap: 0.625rem;
  align-items:center;
  flex-wrap:wrap;
  width: 17rem;
}
body.plans-page .btn{
  background:var(--plan-glass);
  color:var(--color-text);
  border:1px solid var(--border-35);
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  cursor:pointer;
  font-weight:700;
  transition:transform .12s, background .12s, border-color .12s;
  user-select:none;
}
body.plans-page .btn:hover{
  transform:translateY(-2px);
  background:var(--primary-12);
  border-color:var(--accent-30);
}
body.plans-page select{
  background:var(--primary-18);
  color:var(--color-text);
  border:1px solid var(--border-35);
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  outline:none;
  min-width: 16.25rem;
}
body.plans-page .msg{
  width: 100%;
  max-width: 100rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  border:1px solid var(--accent-22);
  background: var(--accent-08);
  box-shadow:none;
  color:var(--color-text);
  display:none;
}
body.plans-page .grid-wrap{
  width: 100%;
  max-width: 100rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
body.plans-page .cell{
  background: var(--glass-faint);
  border-radius: 0.875rem;
  padding: 0.9rem;
  min-height: 20rem;
  box-shadow:none;
  border:1px solid var(--border-35);
  display:flex;
  flex-direction:column;
}
body.plans-page .cell h2{
  margin: 0 0 .6rem 0;
  color:var(--color-accent);
  font-size: 1rem;
  text-align:center;
  padding-bottom:0.35rem;
  border-bottom:2px solid var(--accent-18);
}
body.plans-page .subjects{
  display:flex;
  flex-direction:column;
  gap: 0.35rem;
  margin-top:0.45rem;
  overflow:auto;
  padding-right:6px;
}
body.plans-page .subject{
  background:var(--plan-glass);
  padding: 0.55rem;
  border-radius: 0.625rem;
  font-weight:700;
  font-size: 0.92rem;
  text-align:center;
  cursor:pointer;
  transition: transform .12s, background .18s, border-color .12s;
  color: var(--color-text);
  user-select:none;
  border:1px solid transparent;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.plans-page .subject:hover{
  transform:translateY(-4px);
  background:var(--primary-12);
  border-color:var(--accent-25);
}
body.plans-page .subject.locked{
  cursor:not-allowed;
  opacity:0.62;
  transform:none;
  background:var(--primary-06);
  color:var(--color-muted-2);
  border-color:transparent;
}
body.light-mode input,
body.light-mode select,
body[data-theme="light"] input,
body[data-theme="light"] select{
  background:var(--surface-6);
  border-color: var(--color-border);
  box-shadow:none;
}
body.light-mode input:focus,
body.light-mode select:focus,
body[data-theme="light"] input:focus,
body[data-theme="light"] select:focus{
  border-color: var(--color-accent);
  outline:2px solid var(--accent-25);
  outline-offset:1px;
  box-shadow:none;
}
body.light-mode .plans-page .cell,
body[data-theme="light"] .plans-page .cell{
  background:var(--surface-3);
  border-color: var(--color-border);
  box-shadow:none;
}
body.light-mode .plans-page .subject,
body[data-theme="light"] .plans-page .subject{
  background:var(--surface-6);
  border-color: var(--color-border);
}
.plan-menu-card{
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-radius: 0.75rem;
  padding: 0.5rem;
  min-width: 11.875rem;
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.plan-menu-item{
  display: block;
  width: 100%;
  margin-bottom: 8px;
  text-align: left;
}
.plan-menu-item-last{
  margin-bottom: 0;
}
body.plans-page .promocionada{ background:var(--color-ok) !important; color:var(--color-primary-strong); }
body.plans-page .regular{ background:var(--color-warn) !important; color:var(--color-primary-strong) !important; }
body.plans-page .libre{ background:var(--color-danger) !important; color:var(--color-text-contrast); }
body.plans-page .en_curso{ background:var(--color-accent) !important; color:var(--color-primary-strong) !important; }

body.plans-page .subject.subject-approved{
  border-color: var(--color-ok) !important;
  box-shadow: inset 0 0 0 1px var(--color-ok);
  position: relative;
}
body.plans-page .subject.subject-approved::after{
  content: "✓";
  position: absolute;
  top: 0.22rem;
  right: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.85;
}
body.plans-page .subjects::-webkit-scrollbar{ width:8px; }
body.plans-page .subjects::-webkit-scrollbar-thumb{
  background:var(--primary-20);
  border-radius: 0.5rem;
}
body.plans-page .stats{
  display:flex;
  flex-direction:column;
  gap: 0.8rem;
}
body.plans-page .stats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.plans-page .stats-meta{
  display:flex;
  flex-direction:column;
  gap: 0.7rem;
}
body.plans-page .stat-card{
  background: var(--plan-glass);
  padding: 0.6rem;
  border-radius: 0.625rem;
  flex:1;
  text-align:center;
  border:1px solid var(--border-35);
}
body.plans-page .stat-card strong{
  display:block;
  font-size: 1.05rem;
  color:var(--color-text);
}
body.plans-page .stat-label{
  color:var(--color-muted-2);
  font-size: 0.85rem;
  margin-top:0.3rem;
}
body.plans-page .progress-wrap{
  background: var(--plan-glass);
  border-radius: 0.75rem;
  padding: 0.5rem;
  border:1px solid var(--border-35);
}
body.plans-page .progress{
  height: 1.125rem;
  background:var(--primary-12);
  border-radius: 0.75rem;
  overflow:hidden;
}
body.plans-page .progress > .fill{
  height: 100%;
  width: 0%;
  background: var(--color-ok);
  border-radius: 0.75rem;
  transition: width .6s ease-in-out;
}
body.plans-page .progress-caption{
  display:flex;
  justify-content:space-between;
  font-size: 0.85rem;
  color:var(--color-muted-2);
  margin-top:0.35rem;
}
body.status-modal-open{
  overflow:hidden;
}
body.plans-page .status-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
body.plans-page .status-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(7, 10, 18, 0.5);
}
body.plans-page .status-modal-content{
  position:fixed;
  z-index:1;
  width:min(40rem, 100%);
  border-radius:0.95rem;
  border:1px solid var(--border-35);
  background:var(--card-bg);
  box-shadow:0 16px 36px rgba(0, 0, 0, 0.24);
  padding:0.95rem;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
body.plans-page .status-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem;
  margin-bottom:0.8rem;
}
body.plans-page .status-modal-header h3{
  margin:0;
  font-size:1.05rem;
  color:var(--color-text);
}
body.plans-page .status-modal-header p{
  margin:0.2rem 0 0;
  font-size:0.86rem;
  color:var(--color-muted-2);
}
body.plans-page .status-modal-close{
  min-width:auto;
  padding:0.25rem 0.6rem;
}
body.plans-page .status-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.plans-page .status-option{
  margin:0;
}
body.plans-page .status-option-remove{
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--border-35));
  color:var(--color-danger);
  background:transparent;
}
body.plans-page .status-option.is-selected{
  transform:scale(0.98);
  box-shadow:0 0 0 2px var(--accent-25);
}
body.plans-page footer{
  width: 100%;
  max-width: 100rem;
  display:flex;
  justify-content:space-between;
  gap: 0.8rem;
  color:var(--color-muted-2);
  font-size: 0.85rem;
}
@media (max-width:1200px){
  body.plans-page .grid-wrap{ grid-template-columns: repeat(2, 1fr); }
  body.plans-page .cell{ min-height:260px; }
}
@media (max-width:900px){
  body.plans-page header{ flex-direction:column; align-items:stretch; }
  body.plans-page .right{ justify-content:space-between; }
  body.plans-page select{ min-width: 100%; }
  body.plans-page .grid-wrap{ grid-template-columns:1fr; width:100%; }
  body.plans-page .cell{ min-height:auto; padding:0.7rem; }
  body.plans-page .stats-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  body.plans-page .status-modal-content{
    width:min(40rem, calc(100% - 1.5rem));
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
  }
}