/* SecureVault Lab Group Width + Color v1
   Target group only: 2FA, Recovery, Privacy, Email, Device, Backup, Browser,
   Cloud, QR/Link, Wi‑Fi, Identity, Social, Leak Response, Code Inspector.
   This file is linked after each page's inline <style>, so it wins without
   touching Password Center or /tools/ homepage.
*/

:root{
  --svlg-wide: min(1720px, calc(100vw - 64px));
  --svlg-soft: min(1600px, calc(100vw - 64px));
  --svlg-cyan:#00e5ff;
  --svlg-cyan2:#7cf4ff;
  --svlg-blue:#2f8cff;
  --svlg-purple:#8b5cf6;
  --svlg-pink:#ff4fa3;
  --svlg-green:#20e7bd;
  --svlg-gold:#fbbf24;
  --svlg-red:#ff4b6e;
  --svlg-panel:rgba(6,16,34,.86);
  --svlg-panel2:rgba(7,11,27,.94);
}

/* Outer page roots */
html body .sv-tools-shell > main.lab-page,
html body main.lab-page{
  width:var(--svlg-wide) !important;
  max-width:var(--svlg-wide) !important;
  margin-left:calc(50% - 50vw + max(32px, calc(50vw - 860px))) !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
}

/* Listed problematic wrappers */
html body :is(
  .tfa-wrap,
  .rp-wrap,
  .pc-wrap,
  .ci-wrap,
  .lr-wrap,
  .sv7-wrap,
  .sv8-wrap,
  .sv9-wrap
){
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Hero / main grid blocks that were locked to 1360px */
html body :is(
  .tfa-hero,
  .rp-hero,
  .rp-grid,
  .pc-hero,
  .pc-grid,
  .ci-hero,
  .ci-grid,
  .lr-hero,
  .lr-grid,
  .sv7-hero,
  .sv7-test,
  .sv8-hero,
  .sv8-test,
  .sv9-hero,
  .sv9-test
){
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Make upper paired cards use available width without becoming weird ultra-wide single cards */
@media(min-width:1280px){
  html body :is(
    .tfa-hero,
    .rp-hero,
    .pc-hero,
    .lr-hero,
    .sv7-hero,
    .sv8-hero,
    .sv9-hero
  ){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px !important;
  }

  html body :is(
    .rp-grid,
    .pc-grid,
    .lr-grid,
    .sv7-test,
    .sv8-test,
    .sv9-test
  ){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px !important;
  }

  html body .ci-hero{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr) !important;
    gap:20px !important;
  }
}

/* Wider lower info grids */
@media(min-width:1280px){
  html body :is(
    .tfa-info-grid,
    .rp-info-grid,
    .pc-info-grid,
    .ci-info-grid,
    .lr-info-grid,
    .sv7-next-grid,
    .sv8-next-grid,
    .sv9-next-grid,
    .lab-info-grid,
    .lab-grid
  ){
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr)) !important;
    gap:18px !important;
  }
}

/* Restore richer colors, but keep SecureVault dark/cyan as base */
html body :is(
  .tfa-card,
  .tfa-panel,
  .rp-card,
  .rp-panel,
  .pc-card,
  .pc-panel,
  .ci-card,
  .ci-panel,
  .lr-card,
  .lr-panel,
  .sv7-card,
  .sv7-panel,
  .sv7-box,
  .sv7-next,
  .sv8-card,
  .sv8-panel,
  .sv8-box,
  .sv8-next,
  .sv9-card,
  .sv9-panel,
  .sv9-box,
  .sv9-next,
  .lab-card,
  .lab-mini,
  .lab-section,
  .lab-result
){
  border-radius:28px !important;
  border-color:rgba(0,229,255,.18) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(0,229,255,.13), transparent 35%),
    radial-gradient(circle at 92% 5%, rgba(139,92,246,.14), transparent 38%),
    linear-gradient(145deg, var(--svlg-panel), var(--svlg-panel2)) !important;
  box-shadow:
    0 24px 76px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* Alternating accents per card so pages are not flat */
html body :is(.tfa-card,.rp-card,.pc-card,.ci-card,.lr-card,.sv7-card,.sv8-card,.sv9-card,.lab-card,.lab-mini):nth-child(6n+1){
  border-color:rgba(0,229,255,.36) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(0,229,255,.19), transparent 35%),
    linear-gradient(145deg, rgba(4,22,43,.88), rgba(7,11,27,.94)) !important;
}
html body :is(.tfa-card,.rp-card,.pc-card,.ci-card,.lr-card,.sv7-card,.sv8-card,.sv9-card,.lab-card,.lab-mini):nth-child(6n+2){
  border-color:rgba(139,92,246,.36) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(139,92,246,.23), transparent 35%),
    linear-gradient(145deg, rgba(18,12,42,.88), rgba(7,11,27,.94)) !important;
}
html body :is(.tfa-card,.rp-card,.pc-card,.ci-card,.lr-card,.sv7-card,.sv8-card,.sv9-card,.lab-card,.lab-mini):nth-child(6n+3){
  border-color:rgba(32,231,189,.34) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(32,231,189,.18), transparent 35%),
    linear-gradient(145deg, rgba(4,34,31,.88), rgba(7,11,27,.94)) !important;
}
html body :is(.tfa-card,.rp-card,.pc-card,.ci-card,.lr-card,.sv7-card,.sv8-card,.sv9-card,.lab-card,.lab-mini):nth-child(6n+4){
  border-color:rgba(251,191,36,.34) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(251,191,36,.20), transparent 35%),
    linear-gradient(145deg, rgba(42,28,8,.88), rgba(7,11,27,.94)) !important;
}
html body :is(.tfa-card,.rp-card,.pc-card,.ci-card,.lr-card,.sv7-card,.sv8-card,.sv9-card,.lab-card,.lab-mini):nth-child(6n+5){
  border-color:rgba(255,79,163,.32) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,79,163,.17), transparent 35%),
    linear-gradient(145deg, rgba(42,12,34,.88), rgba(7,11,27,.94)) !important;
}

/* Score/result panels keep strong cyan/purple but do not flatten */
html body :is(
  .tfa-result,
  .rp-result,
  .pc-result,
  .ci-result,
  .lr-result,
  .sv7-result,
  .sv8-result,
  .sv9-result,
  .lab-result
){
  border-color:rgba(0,229,255,.24) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(0,229,255,.15), transparent 35%),
    radial-gradient(circle at 92% 8%, rgba(139,92,246,.18), transparent 38%),
    linear-gradient(145deg, rgba(5,18,39,.90), rgba(8,11,27,.95)) !important;
}

/* Text and small labels */
html body main.lab-page :is(p,li){
  color:rgba(226,239,255,.82) !important;
  line-height:1.70 !important;
}
html body main.lab-page :is(h1,h2,h3,strong,b){
  color:#f8fbff !important;
}
html body main.lab-page :is(
  .lab-kicker,
  .tfa-kicker,
  .rp-kicker,
  .pc-kicker,
  .ci-kicker,
  .lr-kicker,
  .sv7-kicker,
  .sv8-kicker,
  .sv9-kicker
){
  color:var(--svlg-cyan2) !important;
  text-shadow:0 0 20px rgba(0,229,255,.45) !important;
}

/* Buttons restore gradients */
html body main.lab-page :is(button,.lab-btn,.tfa-btn,.rp-btn,.pc-btn,.ci-btn,.lr-btn,.sv7-btn,.sv8-btn,.sv9-btn){
  border-color:rgba(0,229,255,.24) !important;
  color:#f8fdff !important;
}
html body main.lab-page :is(button[type="submit"],.primary,.is-primary,.lab-primary){
  background:linear-gradient(135deg, rgba(0,229,255,.92), rgba(47,140,255,.78), rgba(139,92,246,.55)) !important;
  color:#06111d !important;
  border-color:transparent !important;
  box-shadow:0 14px 34px rgba(0,229,255,.16) !important;
}

/* Inputs/check rows */
html body main.lab-page :is(input,textarea,select){
  background:rgba(1,7,18,.78) !important;
  border-color:rgba(0,229,255,.18) !important;
  color:#f7fbff !important;
}
html body main.lab-page :is(input,textarea,select):focus{
  border-color:rgba(0,229,255,.58) !important;
  box-shadow:0 0 0 3px rgba(0,229,255,.10) !important;
}

/* Responsive */
@media(max-width:1884px){
  html body .sv-tools-shell > main.lab-page,
  html body main.lab-page{
    width:calc(100vw - 64px) !important;
    max-width:calc(100vw - 64px) !important;
    margin-left:calc(50% - 50vw + 32px) !important;
  }
}
@media(max-width:1180px){
  html body .sv-tools-shell > main.lab-page,
  html body main.lab-page{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    margin-left:calc(50% - 50vw + 14px) !important;
  }
}
@media(max-width:760px){
  html body .sv-tools-shell > main.lab-page,
  html body main.lab-page{
    width:calc(100vw - 22px) !important;
    max-width:calc(100vw - 22px) !important;
    margin-left:calc(50% - 50vw + 11px) !important;
  }

  html body :is(
    .tfa-hero,
    .rp-hero,
    .pc-hero,
    .lr-hero,
    .sv7-hero,
    .sv8-hero,
    .sv9-hero,
    .rp-grid,
    .pc-grid,
    .lr-grid,
    .sv7-test,
    .sv8-test,
    .sv9-test
  ){
    grid-template-columns:1fr !important;
  }
}