/* PAYATE — Browser Extensions hub. Scoped under #ext. */
@font-face{font-family:"PoppinsFB";src:local("Segoe UI Semibold"),local("Segoe UI"),local("Roboto Medium"),local("Roboto"),local("Helvetica Neue"),local("Arial");size-adjust:107%;ascent-override:98%;descent-override:32.7%;line-gap-override:0%}
body{margin:0;background:#f4f7fb;color:#14233c;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
#ext{max-width:900px;margin:0 auto;padding:10px 16px 40px}
#ext *{box-sizing:border-box}
#ext h1,#ext h2{font-family:Poppins,"PoppinsFB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

#ext .ext-banner{display:flex;align-items:center;gap:16px;padding:18px 20px;margin:26px 0 18px;background:#fff;border:1px solid #e6ecf5;border-radius:14px;box-shadow:0 1px 2px rgba(15,27,45,.05)}
#ext .ext-banner-icon{width:52px;height:52px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,#7c5cff,#5a37e0);color:#fff;box-shadow:0 6px 16px rgba(124,92,255,.32)}
#ext .ext-banner-icon svg{width:26px;height:26px;display:block}
#ext .ext-banner-title{margin:0 0 5px;font-weight:700;font-size:22px;line-height:1.22;color:#0f1b2d}
#ext .ext-banner-desc{margin:0;font-weight:500;font-size:14.5px;line-height:1.5;color:#4a5b73}

#ext .ext-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:0 0 18px}
#ext .ext-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:18px;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(15,27,45,.05);transition:border-color .15s,transform .15s,box-shadow .15s}
#ext a.ext-card:hover{border-color:#7c5cff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,27,45,.1)}
#ext .ext-card--soon{opacity:.8}
#ext .ext-ico{flex:0 0 auto}
#ext .ext-ico img{width:64px;height:64px;border-radius:14px;display:block;background:#f1f6fc}
#ext .ext-info{min-width:0}
#ext .ext-name{font-weight:700;font-size:15px;color:#0f1b2d;line-height:1.3}
#ext .ext-tag{display:inline-block;vertical-align:middle;margin-left:6px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#5a37e0;background:#efeaff;border:1px solid #ddd2ff;border-radius:999px;padding:2px 8px}
#ext .ext-desc{margin:6px 0 11px;font-size:13px;line-height:1.55;color:#5a6b83}
#ext .ext-cta{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:#1d9bf0}
#ext .ext-cta--soon{color:#9aa8bd}

#ext .ext-info-sec{background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:20px 22px;margin:0 0 16px;box-shadow:0 1px 2px rgba(15,27,45,.05)}
#ext .ext-info-sec h2{margin:0 0 10px;font-size:18px;color:#0f1b2d}
#ext .ext-info-sec p{margin:0;font-size:14px;line-height:1.7;color:#36465e}

/* ---- one-page list: compact extension squares ---- */
#ext .ext-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:0 0 18px}
#ext .xt{background:#fff;border:1px solid #e6ecf5;border-radius:16px;padding:20px 18px;box-shadow:0 1px 2px rgba(15,27,45,.05);display:flex;flex-direction:column;align-items:center;text-align:center;transition:border-color .15s,transform .15s,box-shadow .15s}
#ext .xt:hover{border-color:#cdbcff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,27,45,.08)}
#ext .xt-ico{width:56px;height:56px;flex:0 0 auto;border-radius:14px;background:#f1f6fc;display:block;margin:0 0 11px}
#ext .xt-name{margin:0 0 7px;font-size:15.5px;line-height:1.25;color:#0f1b2d}
#ext .xt .ext-tag{margin:0 0 9px}
#ext .xt-tagline{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:#5a6b83;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#ext .xt-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 14px;margin:0 0 13px;font-size:11.5px;color:#8494a8}
#ext .xt-meta span{position:relative}
#ext .xt-meta span+span::before{content:"";position:absolute;left:-8px;top:50%;width:3px;height:3px;margin-top:-1px;border-radius:50%;background:#c3cdda}
#ext .ext-actions--v{margin-top:auto;flex-direction:column;gap:8px;width:100%}
#ext .xt .ext-btn--dl{width:100%;justify-content:center;padding:10px 12px;font-size:13px;border-radius:10px;gap:6px}
#ext .ext-stores{display:flex;gap:8px;width:100%}
#ext .ext-sbtn{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 8px;border-radius:9px;font:600 12px/1 Poppins,sans-serif;text-decoration:none;border:1.5px solid #d7deea;color:#2a3b57;background:#fff;white-space:nowrap}
#ext .ext-sbtn svg{flex:none}
#ext a.ext-sbtn--chrome:hover{border-color:#1a73e8;color:#1a73e8}
#ext a.ext-sbtn--firefox:hover{border-color:#e66000;color:#e66000}
#ext .ext-sbtn--soon{color:#9aa8bd;background:#f6f8fb;border-color:#e7ecf3;cursor:default}

/* install: two columns */
#ext .ext-howcols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12px 0 0}
#ext .ext-howcol h3{margin:0 0 6px;font-size:14px;color:#0f1b2d}
#ext .ext-howcol ol{margin:0;padding-left:20px}
#ext .ext-howcol li{margin:5px 0;font-size:13.5px;line-height:1.55;color:#36465e}
#ext .ext-howcol code{background:#eef2f8;border-radius:5px;padding:1px 6px;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}

/* ---- detail view ---- */
#ext .ext-crumbs{margin:22px 0 14px;font-size:13px;color:#7486a0}
#ext .ext-crumbs a{color:#5a37e0;text-decoration:none;font-weight:600}
#ext .ext-crumbs a:hover{text-decoration:underline}
#ext .ext-crumbs span{margin:0 6px;color:#aab6c8}
#ext .ext-hero{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid #e6ecf5;border-radius:16px;padding:24px;margin:0 0 16px;box-shadow:0 1px 2px rgba(15,27,45,.05)}
#ext .ext-hero-ico{width:96px;height:96px;flex:0 0 auto;border-radius:20px;background:#f1f6fc;display:block}
#ext .ext-hero-body{min-width:0;flex:1 1 auto}
#ext .ext-hero-title{margin:0 0 7px;font-size:25px;line-height:1.2;color:#0f1b2d}
#ext .ext-hero-tagline{margin:0 0 16px;font-size:15px;line-height:1.55;color:#4a5b73}
#ext .ext-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
#ext .ext-btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:11px 18px;font:600 14px/1 Poppins,sans-serif;text-decoration:none;cursor:pointer;border:1.5px solid transparent;white-space:nowrap}
#ext .ext-btn svg{flex:none}
#ext .ext-btn--store{background:#1a73e8;color:#fff}
#ext .ext-btn--store:hover{background:#1663c7}
#ext .ext-btn--dl{background:#fff;color:#2a3b57;border-color:#d7deea}
#ext .ext-btn--dl:hover{border-color:#7c5cff;color:#5a37e0}
#ext .ext-btn--soon{background:#f4f6fa;color:#8a98ad;border-color:#e3e8f1;cursor:default}
#ext .ext-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-size:12.5px;color:#7486a0}
#ext .ext-meta span{position:relative}
#ext .ext-meta span+span::before{content:"";position:absolute;left:-9px;top:50%;width:3px;height:3px;margin-top:-1px;border-radius:50%;background:#c3cdda}
#ext .ext-sec{background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:20px 22px;margin:0 0 16px;box-shadow:0 1px 2px rgba(15,27,45,.05)}
#ext .ext-sec h2{margin:0 0 12px;font-size:18px;color:#0f1b2d}
#ext .ext-sec p{margin:0;font-size:14.5px;line-height:1.75;color:#36465e}
#ext .ext-sec p a{color:#5a37e0;font-weight:600}
#ext .ext-feats{margin:0;padding:0;list-style:none}
#ext .ext-feats li{position:relative;padding:7px 0 7px 28px;font-size:14.5px;line-height:1.5;color:#36465e;border-top:1px solid #f0f3f8}
#ext .ext-feats li:first-child{border-top:0}
#ext .ext-feats li::before{content:"";position:absolute;left:3px;top:12px;width:9px;height:9px;border-radius:50%;background:#7c5cff}
#ext .ext-install ol{margin:0;padding-left:20px}
#ext .ext-install li{margin:7px 0;font-size:14.5px;line-height:1.6;color:#36465e}
#ext .ext-install code{background:#eef2f8;border-radius:5px;padding:1px 6px;font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace}
#ext .ext-note{margin:14px 0 0;font-size:13px;color:#6a7a92;background:#f6f4ff;border:1px solid #e9e3ff;border-radius:10px;padding:11px 14px}
#ext .ext-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
#ext .ext-shots img{width:100%;border-radius:10px;border:1px solid #e6ecf5;display:block}

#ext .ext-faq{background:#fff;border:1px solid #e6ecf5;border-radius:14px;padding:20px 22px;margin:0 0 16px;box-shadow:0 1px 2px rgba(15,27,45,.05)}
#ext .ext-faq h2{margin:0 0 10px;font-size:19px;color:#0f1b2d}
#ext .ext-faq details{border-top:1px solid #eef2f8;padding:2px 0}
#ext .ext-faq details:first-of-type{border-top:0}
#ext .ext-faq summary{cursor:pointer;list-style:none;padding:13px 26px 13px 2px;position:relative;font-weight:600;font-size:14.5px;color:#14233c}
#ext .ext-faq summary::-webkit-details-marker{display:none}
#ext .ext-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:18px;color:#7486a0}
#ext .ext-faq details[open] summary::after{content:"\2212"}
#ext .ext-faq details p{margin:0 2px 13px;font-size:13.5px;line-height:1.7;color:#4a5b73}

.pyt-rel{max-width:900px;margin:16px auto;padding:20px 22px;background:#fff;border:1px solid #e6ecf5;border-radius:14px;box-shadow:0 1px 2px rgba(15,27,45,.05);font-family:Poppins,"PoppinsFB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#14233c}
.pyt-rel h2{margin:0 0 12px;font-size:18px;color:#0f1b2d}
.pyt-rel .prg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.pyt-rel a{display:block;text-decoration:none;border:1px solid #e6ecf5;border-radius:10px;padding:12px 14px;background:#fbfcfe;transition:border-color .15s,background .15s}
.pyt-rel a:hover{border-color:#1d64d8;background:#f2f7ff}
.pyt-rel .prt{display:block;font-weight:600;font-size:14px;color:#14233c;margin-bottom:2px}
.pyt-rel .prd{display:block;font-size:12px;line-height:1.4;color:#5a6782}

@media (max-width:640px){#ext .ext-banner{padding:16px}#ext .ext-banner-title{font-size:19px}#ext .ext-grid{grid-template-columns:1fr}
#ext .ext-hero{flex-direction:column;gap:14px;padding:20px}#ext .ext-hero-ico{width:76px;height:76px}#ext .ext-hero-title{font-size:21px}#ext .ext-hero .ext-btn{flex:1 1 100%;justify-content:center}
#ext .ext-howcols{grid-template-columns:1fr}}

/* dark mode */
html[data-theme="dark"] body{background:#0f1620;color:#dbe4f0}
html[data-theme="dark"] #ext .ext-banner,html[data-theme="dark"] #ext .ext-card,html[data-theme="dark"] #ext .xt,html[data-theme="dark"] #ext .ext-info-sec,html[data-theme="dark"] #ext .ext-hero,html[data-theme="dark"] #ext .ext-sec,html[data-theme="dark"] #ext .ext-faq,html[data-theme="dark"] .pyt-rel{background:#172231;border-color:#26344a;box-shadow:none}
html[data-theme="dark"] #ext .xt-ico{background:#0f1620}
html[data-theme="dark"] #ext .xt-name{color:#f1f6fc}
html[data-theme="dark"] #ext .xt-tagline,html[data-theme="dark"] #ext .xt-desc{color:#9aabc2}
html[data-theme="dark"] #ext .xt-desc a{color:#b9a8ff}
html[data-theme="dark"] #ext .ext-sbtn{background:#0f1620;border-color:#33445e;color:#cdd8e8}
html[data-theme="dark"] #ext .ext-sbtn--soon{background:#1b2735;border-color:#2b3b52;color:#7f8ea4}
html[data-theme="dark"] #ext .ext-howcol h3{color:#f1f6fc}
html[data-theme="dark"] #ext .ext-howcol li{color:#9aabc2}
html[data-theme="dark"] #ext .ext-howcol code{background:#0f1620;color:#dbe4f0}
html[data-theme="dark"] #ext a.ext-card:hover{border-color:#7c5cff}
html[data-theme="dark"] #ext .ext-banner-title,html[data-theme="dark"] #ext .ext-name,html[data-theme="dark"] #ext .ext-info-sec h2,html[data-theme="dark"] #ext .ext-hero-title,html[data-theme="dark"] #ext .ext-sec h2,html[data-theme="dark"] #ext .ext-faq h2,html[data-theme="dark"] .pyt-rel h2,html[data-theme="dark"] .pyt-rel .prt{color:#f1f6fc}
html[data-theme="dark"] #ext .ext-banner-desc,html[data-theme="dark"] #ext .ext-desc,html[data-theme="dark"] #ext .ext-info-sec p,html[data-theme="dark"] #ext .ext-hero-tagline,html[data-theme="dark"] #ext .ext-sec p,html[data-theme="dark"] #ext .ext-feats li,html[data-theme="dark"] #ext .ext-install li,html[data-theme="dark"] #ext .ext-faq details p,html[data-theme="dark"] .pyt-rel .prd{color:#93a4bd}
html[data-theme="dark"] #ext .ext-hero-ico,html[data-theme="dark"] #ext .ext-ico img{background:#0f1620}
html[data-theme="dark"] #ext .ext-btn--dl{background:#0f1620;border-color:#33445e;color:#cdd8e8}
html[data-theme="dark"] #ext .ext-btn--soon{background:#1b2735;border-color:#2b3b52;color:#8294ab}
html[data-theme="dark"] #ext .ext-feats li{border-color:#26344a}
html[data-theme="dark"] #ext .ext-install code{background:#0f1620;color:#dbe4f0}
html[data-theme="dark"] #ext .ext-note{background:#1d2440;border-color:#2e2a56;color:#aab6d6}
html[data-theme="dark"] #ext .ext-crumbs a{color:#b9a8ff}
html[data-theme="dark"] #ext .ext-tag{background:#231b45;border-color:#3a2d6b;color:#b9a8ff}
html[data-theme="dark"] #ext .ext-faq details{border-color:#26344a}
html[data-theme="dark"] #ext .ext-faq summary{color:#dbe4f0}
html[data-theme="dark"] .pyt-rel a{background:#1e2b3d;border-color:#2b3b52}
html[data-theme="dark"] .pyt-rel a:hover{background:#243449;border-color:#3a4c68}