/* =========================================================
   /resources/extension-architecture/ — Architecture Guide
   Scoped to .arch-main so other pages stay unchanged
   ========================================================= */
.arch-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);
}
.arch-main .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

/* Center headings and labels per your requirement */
.arch-main .section-label,
.arch-main .section-lead,
.arch-main h1,.arch-main h2,.arch-main h3{ text-align:center; }

/* Typography */
.arch-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}
.arch-main h2{color:var(--heading);font-weight:800;
  font-size:clamp(1.5rem,1.1rem + 1vw,2rem);margin:0 0 12px}
.arch-main h3{color:var(--heading);font-weight:700;
  font-size:clamp(1.05rem,.95rem + .6vw,1.25rem);margin:0 0 8px}
.arch-main p{color:var(--text)}
.arch-main .muted{color:var(--muted)}
.arch-main a{color:var(--accent-2);text-decoration:none}
.arch-main a:hover{color:#d7d1ff}
.arch-main .section-lead{margin:2px 0 10px}

/* Buttons */
.arch-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}
.arch-main .btn-primary{color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)}
.arch-main .btn-primary:hover{transform:translateY(-1px)}
.arch-main .btn-ghost{color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.arch-main .btn-ghost:hover{background:rgba(255,255,255,.11)}
.arch-main .cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* Hero */
.arch-main .arch-hero{padding:clamp(28px,4vw,40px) 0 clamp(22px,4vw,36px)}
.arch-main .arch-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)
}
.arch-main .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.arch-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 */
.arch-main section.panel{padding-block:clamp(18px,3vw,28px)}
.arch-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)
}

/* Lists and pills */
.arch-main .pill-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.arch-main .pill-list li{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10)}

/* Cards + grids */
.arch-main .grid{display:grid;gap:16px}
.arch-main .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.arch-main .grid.two{grid-template-columns:1fr}}
.arch-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 bits */
.arch-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-architecture/modularization-best-practices/
   Page-specific styles (scoped)
   ========================================================= */
.modularization-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);
}
.modularization-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

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

/* Page links: remove underline; keep theme colors */
.modularization-page a{ text-decoration:none; color:var(--accent-2) }
.modularization-page a:hover{ color:#d7d1ff }

/* Hero */
.modularization-page .hero{ padding:clamp(28px,4vw,40px) 0 }
.modularization-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)
}
.modularization-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.modularization-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}
.modularization-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.modularization-page .panel{ padding-block:clamp(18px,3vw,28px) }
.modularization-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)
}
.modularization-page h2{color:#fff;margin:0 0 8px}

/* Bullet & checklist lists */
.modularization-page .bullets,
.modularization-page .checklist{list-style:none;padding:0;margin:12px auto 0;max-width:860px}
.modularization-page .bullets li,
.modularization-page .checklist 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)
}
/* Neutral dot for bullets */
.modularization-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)
}
/* Check icon for positive checklist */
.modularization-page .checklist.okay li::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(180deg,#26c266,#1f8b4d);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>') center/60% no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>') center/60% no-repeat;
  box-shadow:var(--shadow-2)
}

/* CTAs */
.modularization-page .quick-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px
}
.modularization-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
}
.modularization-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.modularization-page .btn-primary:hover{ transform:translateY(-1px) }
.modularization-page .btn-ghost{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.modularization-page .btn-ghost:hover{ background:rgba(255,255,255,.11) }



/* =========================================================
   /resources/extension-architecture/content-script-messaging/
   Page-specific styles (scoped)
   ========================================================= */
.csm-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);
}
.csm-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

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

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

/* Hero */
.csm-page .hero{ padding:clamp(28px,4vw,40px) 0 }
.csm-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)
}
.csm-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.csm-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}
.csm-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.csm-page .panel{ padding-block:clamp(18px,3vw,28px) }
.csm-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)
}
.csm-page h2{color:#fff;margin:0 0 8px}

/* Lists */
.csm-page .bullets,
.csm-page .checklist{list-style:none;padding:0;margin:12px auto 0;max-width:860px}
.csm-page .bullets li,
.csm-page .checklist 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)
}
/* Neutral dot for bullets */
.csm-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)
}
/* Check icon for “okay” checklist */
.csm-page .checklist.okay li::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(180deg,#26c266,#1f8b4d);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>') center/60% no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>') center/60% no-repeat;
  box-shadow:var(--shadow-2)
}

/* CTAs */
.csm-page .quick-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px
}
.csm-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
}
.csm-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.csm-page .btn-primary:hover{ transform:translateY(-1px) }
.csm-page .btn-ghost{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.csm-page .btn-ghost:hover{ background:rgba(255,255,255,.11) }


/* =========================================================
   /resources/extension-architecture/auth-flows/
   Page-specific styles (scoped)
   ========================================================= */
.authflows-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);
}
.authflows-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

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

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

/* Hero */
.authflows-page .hero{ padding:clamp(28px,4vw,40px) 0 }
.authflows-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)
}
.authflows-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.authflows-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}
.authflows-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.authflows-page .panel{ padding-block:clamp(18px,3vw,28px) }
.authflows-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)
}
.authflows-page h2{color:#fff;margin:0 0 8px}

/* Lists */
.authflows-page .bullets{list-style:none;padding:0;margin:12px auto 0;max-width:860px}
.authflows-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)
}
.authflows-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 */
.authflows-page .quick-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px
}
.authflows-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
}
.authflows-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.authflows-page .btn-primary:hover{ transform:translateY(-1px) }
.authflows-page .btn-ghost{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.authflows-page .btn-ghost:hover{ background:rgba(255,255,255,.11) }


/* =========================================================
   /resources/extension-architecture/rate-limiting-queues/
   Page-specific styles (scoped)
   ========================================================= */
.rlq-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);
}
.rlq-page .wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}

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

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

/* Hero */
.rlq-page .hero{ padding:clamp(28px,4vw,40px) 0 }
.rlq-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)
}
.rlq-page .section-label{font-weight:800;letter-spacing:.06em;color:#d7d1ff;margin:0 0 6px}
.rlq-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}
.rlq-page .lead{max-width:860px;margin:0 auto;color:var(--text)}

/* Panels */
.rlq-page .panel{ padding-block:clamp(18px,3vw,28px) }
.rlq-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)
}
.rlq-page h2{color:#fff;margin:0 0 8px}

/* Lists */
.rlq-page .bullets{list-style:none;padding:0;margin:12px auto 0;max-width:860px}
.rlq-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)
}
.rlq-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 */
.rlq-page .quick-cta{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px
}
.rlq-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
}
.rlq-page .btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent-3));
  border-color:rgba(255,255,255,.08)
}
.rlq-page .btn-primary:hover{ transform:translateY(-1px) }
.rlq-page .btn-ghost{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.rlq-page .btn-ghost:hover{ background:rgba(255,255,255,.11) }