/* =========================================================
   /resources/extension-security/ — Security Guide
   Scoped to .sec-main so other pages stay unchanged
   ========================================================= */
.sec-main{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --panel-top:#1b2140; --panel-bot:#10152c;
  --panel-ring:rgba(255,255,255,.07); --panel-glow:rgba(121,108,255,.20);
  --radius-lg:28px; --radius-md:16px;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  color:var(--text);
}
.sec-main .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center section labels and headings (as requested) */
.sec-main .section-label,
.sec-main .section-lead,
.sec-main h1,.sec-main h2,.sec-main h3{ text-align:center; }

/* Typography */
.sec-main h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.2rem,2.6rem + 1vw,3rem);margin:0 0 10px}
.sec-main h2{color:var(--heading);font-weight:800;
  font-size:clamp(1.5rem,1.1rem + 1vw,2rem);margin:0 0 12px}
.sec-main h3{color:var(--heading);font-weight:700;
  font-size:clamp(1.05rem,.95rem + .6vw,1.25rem);margin:0 0 8px}
.sec-main p{color:var(--text)}
.sec-main .muted{color:var(--muted)}
.sec-main a{color:var(--accent-2);text-decoration:none}
.sec-main a:hover{color:#d7d1ff}
.sec-main .section-lead{margin:2px 0 10px}

/* Buttons */
.sec-main .btn{display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;font-weight:700;border-radius:14px;padding:12px 18px;
  border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2);cursor:pointer}
.sec-main .btn-primary{color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)}
.sec-main .btn-primary:hover{transform:translateY(-1px)}
.sec-main .btn-ghost{color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.sec-main .btn-ghost:hover{background:rgba(255,255,255,.11)}
.sec-main .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* Hero */
.sec-main .sec-hero{padding:clamp(28px,4vw,40px) 0 clamp(22px,4vw,36px)}
.sec-main .sec-hero .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--panel-ring);border-radius:30px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-1)
}
.sec-main .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;opacity:.9;margin:0 0 6px}

/* Chips */
.sec-main .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.sec-main .chip{background:rgba(123,108,255,.12);border:1px solid rgba(255,255,255,.10);
  color:#dddfff;padding:6px 10px;border-radius:999px;font-size:.9rem;font-weight:700}

/* Panels */
.sec-main section.panel{padding-block:clamp(18px,3vw,28px)}
.sec-main section.panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--panel-glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--panel-ring);border-radius:var(--radius-lg);
  padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow-1)
}

/* Cards + grids */
.sec-main .grid{display:grid;gap:16px}
.sec-main .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.sec-main .grid.two{grid-template-columns:1fr}}
.sec-main .card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-md);padding:16px 16px 18px}

/* Code and emphasis */
.sec-main code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.95em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  padding:.1em .4em;border-radius:8px}



/* =========================================================
   /resources/extension-security/permission-minimization/
   Page-specific styles (scoped)
   ========================================================= */
.permmin-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.permmin-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center the section label & headings on this page only */
.permmin-page .section-label,
.permmin-page h1,
.permmin-page h2,
.permmin-page .lead{ text-align:center; }

/* Page links: remove underline, themed color */
.permmin-page a{ text-decoration:none; color:var(--accent-2) }
.permmin-page a:hover{ color:#d7d1ff }

/* Hero */
.permmin-page .hero{ padding:clamp(28px,4vw,40px) 0 }
.permmin-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring); border-radius:30px;
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-1)
}
.permmin-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.permmin-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.permmin-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.permmin-page .panel{ padding-block:clamp(18px,3vw,28px) }
.permmin-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring); border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px); box-shadow:var(--shadow-1)
}
.permmin-page h2{color:#fff;margin:0 0 8px}

/* Lists */
.permmin-page .bullets{list-style:none;padding:0;margin:12px auto 0;max-width:860px}
.permmin-page .bullets li{
  position:relative; padding:14px 16px 14px 56px; margin:8px 0;
  background:#0d1124; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; color:#e8eaff; box-shadow:var(--shadow-2)
}
.permmin-page .bullets li::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:#bfc6ff; box-shadow:0 0 0 8px rgba(191,198,255,.12)
}

/* CTAs */
.permmin-page .quick-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px
}
.permmin-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; border-radius:14px; padding:12px 18px; border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2); cursor:pointer; color:#fff; text-decoration:none
}
.permmin-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.permmin-page .btn-primary:hover{ transform:translateY(-1px) }
.permmin-page .btn-ghost{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.permmin-page .btn-ghost:hover{ background:rgba(255,255,255,.11) }


/* =========================================================
   /resources/extension-security/content-security-policy/
   Page-specific styles (scoped)
   ========================================================= */
.csp-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.csp-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center the section label & headings on this page only */
.csp-page .section-label,
.csp-page h1,
.csp-page h2,
.csp-page .lead{ text-align:center; }

/* Remove underline on links on this page; themed color */
.csp-page a{ text-decoration:none; color:var(--accent-2) }
.csp-page a:hover{ color:#d7d1ff }

/* Hero */
.csp-page .hero{ padding:clamp(28px,4vw,40px) 0 }
.csp-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring); border-radius:30px;
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-1)
}
.csp-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.csp-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.csp-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.csp-page .panel{ padding-block:clamp(18px,3vw,28px) }
.csp-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring); border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px); box-shadow:var(--shadow-1)
}
.csp-page h2{color:#fff;margin:0 0 8px}

/* Lists */
.csp-page .bullets{list-style:none;padding:0;margin:12px auto 0;max-width:860px}
.csp-page .bullets li{
  position:relative; padding:14px 16px 14px 56px; margin:8px 0;
  background:#0d1124; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; color:#e8eaff; box-shadow:var(--shadow-2)
}
.csp-page .bullets li::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:#bfc6ff; box-shadow:0 0 0 8px rgba(191,198,255,.12)
}

/* CTAs */
.csp-page .quick-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px
}
.csp-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; border-radius:14px; padding:12px 18px; border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2); cursor:pointer; color:#fff; text-decoration:none
}
.csp-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.csp-page .btn-primary:hover{ transform:translateY(-1px) }
.csp-page .btn-ghost{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.csp-page .btn-ghost:hover{ background:rgba(255,255,255,.11) }



/* =========================================================
   /resources/extension-security/secret-management/
   Page-specific styles (scoped)
   ========================================================= */
.secret-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.secret-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center the section label & headings on this page only */
.secret-page .section-label,
.secret-page h1,
.secret-page h2,
.secret-page .lead{ text-align:center; }

/* Links: remove underline; keep theme color (page-only) */
.secret-page a{ text-decoration:none; color:var(--accent-2) }
.secret-page a:hover{ color:#d7d1ff }

/* Hero */
.secret-page .hero{ padding:clamp(28px,4vw,40px) 0 }
.secret-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring); border-radius:30px;
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-1)
}
.secret-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.secret-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.secret-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.secret-page .panel{ padding-block:clamp(18px,3vw,28px) }
.secret-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring); border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px); box-shadow:var(--shadow-1)
}
.secret-page h2{color:#fff;margin:0 0 8px}

/* Lists */
.secret-page .bullets{list-style:none;padding:0;margin:12px auto 0;max-width:860px}
.secret-page .bullets li{
  position:relative; padding:14px 16px 14px 56px; margin:8px 0;
  background:#0d1124; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; color:#e8eaff; box-shadow:var(--shadow-2)
}
.secret-page .bullets li::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:#bfc6ff; box-shadow:0 0 0 8px rgba(191,198,255,.12)
}

/* CTAs */
.secret-page .quick-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px
}
.secret-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; border-radius:14px; padding:12px 18px; border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2); cursor:pointer; color:#fff; text-decoration:none
}
.secret-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.secret-page .btn-primary:hover{ transform:translateY(-1px) }
.secret-page .btn-ghost{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.secret-page .btn-ghost:hover{ background:rgba(255,255,255,.11) }


/* =========================================================
   /resources/extension-security/oauth-best-practices/
   Page-specific styles (scoped)
   ========================================================= */
.oauth-page{
  --text:#e9ecff; --muted:#a9b0d6; --heading:#ffffff;
  --accent:#7b6cff; --accent-2:#9a8cff; --accent-3:#594fe0;
  --ring:rgba(255,255,255,.10); --glow:rgba(121,108,255,.22);
  --panel-top:#1b2140; --panel-bot:#10152c;
  --shadow-1:0 14px 40px rgba(0,0,0,.35); --shadow-2:0 10px 26px rgba(0,0,0,.28);
  --radius:28px;
  color:var(--text);
}
.oauth-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center label & headings on this page only */
.oauth-page .section-label,
.oauth-page h1,
.oauth-page h2,
.oauth-page .lead{ text-align:center; }

/* Links: no underline; themed color (page-only) */
.oauth-page a{ text-decoration:none; color:var(--accent-2) }
.oauth-page a:hover{ color:#d7d1ff }

/* Hero */
.oauth-page .hero{ padding:clamp(28px,4vw,40px) 0 }
.oauth-page .hero-card{
  background:
    radial-gradient(80% 110% at 86% 12%, rgba(121,108,255,.20) 0%, rgba(121,108,255,0) 45%),
    linear-gradient(180deg,#1c2144 0%, #131731 100%);
  border:1px solid var(--ring); border-radius:30px;
  padding:clamp(26px,4vw,44px); box-shadow:var(--shadow-1)
}
.oauth-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.oauth-page h1{color:var(--heading);font-weight:800;line-height:1.12;
  font-size:clamp(2.05rem,2.3rem + 1vw,3rem);margin:0 0 8px}
.oauth-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.oauth-page .panel{ padding-block:clamp(18px,3vw,28px) }
.oauth-page .panel .wrap{
  background:
    radial-gradient(80% 120% at 85% 0%, var(--glow) 0%, rgba(89,79,224,0) 45%),
    linear-gradient(180deg,var(--panel-top) 0%, var(--panel-bot) 100%);
  border:1px solid var(--ring); border-radius:var(--radius);
  padding:clamp(20px,3.5vw,36px); box-shadow:var(--shadow-1)
}
.oauth-page h2{color:#fff;margin:0 0 8px}

/* Lists */
.oauth-page .bullets{list-style:none;padding:0;margin:12px auto 0;max-width:860px}
.oauth-page .bullets li{
  position:relative; padding:14px 16px 14px 56px; margin:8px 0;
  background:#0d1124; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; color:#e8eaff; box-shadow:var(--shadow-2)
}
.oauth-page .bullets li::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%; background:#bfc6ff; box-shadow:0 0 0 8px rgba(191,198,255,.12)
}

/* CTAs */
.oauth-page .quick-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px
}
.oauth-page .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; border-radius:14px; padding:12px 18px; border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
  box-shadow:var(--shadow-2); cursor:pointer; color:#fff; text-decoration:none
}
.oauth-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.oauth-page .btn-primary:hover{ transform:translateY(-1px) }
.oauth-page .btn-ghost{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.oauth-page .btn-ghost:hover{ background:rgba(255,255,255,.11) }