.browse-page{background:#0b0d12; min-height:100vh;}
.browse-nav{max-width:none; padding-inline:28px;}
.browse-nav__links [aria-current="page"]{color:var(--text);}
.browse-nav__meta{font:11px var(--font-mono); color:var(--text-muted);}

.browser-shell{display:grid; grid-template-columns:250px minmax(0,1fr); max-width:1600px; margin:0 auto; min-height:calc(100vh - 65px);}
.browser-sidebar{position:sticky; top:65px; align-self:start; height:calc(100vh - 65px); padding:34px 20px 24px; border-right:1px solid var(--line); background:rgba(11,13,18,.72); backdrop-filter:blur(14px);}
.browser-sidebar__head{display:flex; align-items:center; justify-content:space-between; margin:0 8px 18px;}
.browser-sidebar__label{font:500 10px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:#687185;}
.browser-sidebar__count{display:grid; place-items:center; min-width:25px; height:21px; padding-inline:6px; border:1px solid var(--line); border-radius:999px; font:10px var(--font-mono); color:var(--lime);}
.category-list{display:flex; flex-direction:column; gap:5px;}
.category-item{display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:8px; width:100%; padding:11px 12px; border:1px solid transparent; border-radius:10px; color:var(--text-muted); background:transparent; text-align:left; transition:.16s ease;}
.category-item>span{font:18px var(--font-mono); color:#778095; text-align:center;}
.category-item b{font-size:13px; font-weight:500;}
.category-item small{font:10px var(--font-mono); color:#596175;}
.category-item:hover{color:var(--text); background:rgba(255,255,255,.025);}
.category-item.active{color:var(--text); border-color:rgba(198,255,61,.17); background:linear-gradient(90deg,rgba(198,255,61,.1),rgba(198,255,61,.035));}
.category-item.active>span,.category-item.active small{color:var(--lime);}
.sidebar-note{position:absolute; left:28px; right:28px; bottom:26px; display:flex; gap:10px; align-items:flex-start; padding-top:18px; border-top:1px solid var(--line);}
.sidebar-note .dot{flex:0 0 auto; margin-top:6px;}
.sidebar-note p{font-size:11px; line-height:1.55; color:#697286;}

.browser-content{min-width:0; padding:46px 34px 80px;}
.mobile-category{display:none;}
.browser-heading{display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px;}
.browser-heading__eyebrow{display:block; margin-bottom:8px; color:var(--lime); font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.12em;}
.browser-heading h1{font:700 clamp(36px,5vw,62px)/1 var(--font-display); letter-spacing:-.045em; margin-bottom:13px;}
.browser-heading p{font-size:15px; color:var(--text-muted);}
.browser-heading__result{flex:0 0 auto; padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--text-muted); font:11px var(--font-mono);}

.browser-toolbar{position:sticky; top:65px; z-index:10; display:grid; grid-template-columns:minmax(260px,1fr) auto auto; gap:12px; align-items:center; padding:10px; margin-bottom:20px; border:1px solid var(--line); border-radius:12px; background:#10131a;}
.catalog-search{display:flex; align-items:center; gap:10px; min-width:0; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:var(--ink); color:#687185; transition:border-color .16s;}
.catalog-search:focus-within{border-color:rgba(198,255,61,.48);}
.catalog-search input{min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--text); font-size:13px;}
.catalog-search input::placeholder{color:#646d80;}
.catalog-search kbd{padding:3px 6px; border:1px solid var(--line); border-radius:5px; color:#687185; background:var(--surface); font:9px var(--font-mono);}
.toolbar-filter{display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--ink);}
.filter-pill{border:0; border-radius:7px; padding:8px 10px; color:#747d91; background:transparent; font-size:11px; font-weight:600;}
.filter-pill:hover{color:var(--text);}
.filter-pill.active{color:var(--ink); background:var(--lime);}
.sort-select{height:42px; display:flex; align-items:center; gap:6px; padding:0 10px 0 12px; border:1px solid var(--line); border-radius:10px; background:var(--ink);}
.sort-select span{font:9px var(--font-mono); text-transform:uppercase; color:#687185;}
.sort-select select{border:0; outline:0; color:var(--text); background:transparent; font-size:11px; cursor:pointer;}

.component-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
.component-card{min-width:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); cursor:pointer; transition:border-color .16s ease,background .16s ease;}
.component-card:hover,.component-card:focus-visible{border-color:rgba(198,255,61,.42); background:#181d27; outline:none;}
.component-card[hidden]{display:none;}
.component-card__preview{min-height:205px; display:grid; place-items:center; padding:26px; overflow:hidden; border-bottom:1px solid var(--line); pointer-events:none;}
.component-card__meta{display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 15px 15px;}
.component-card__meta h2{font:600 14px var(--font-display); letter-spacing:-.01em; margin-bottom:3px;}
.component-card__meta p{font:9px var(--font-mono); text-transform:uppercase; color:#6f788c; letter-spacing:.05em;}
.tech-tag{flex:0 0 auto; padding:4px 7px; border:1px solid rgba(198,255,61,.19); border-radius:6px; background:rgba(198,255,61,.05); color:var(--lime); font:9px var(--font-mono);}
.preview--lime{background:radial-gradient(circle at 50% 50%,rgba(198,255,61,.12),transparent 58%),#11151c;}
.preview--dark{background:linear-gradient(145deg,#10131a,#090b10);}
.preview--soft{background:linear-gradient(145deg,#1c222d,#141821);}
.preview--blue{background:radial-gradient(circle at 70% 20%,rgba(76,141,255,.2),transparent 42%),#11151d;}
.preview--violet{background:radial-gradient(circle at 35% 20%,rgba(145,91,255,.2),transparent 50%),#12121b;}
.preview--aurora{background:radial-gradient(circle at 20% 20%,rgba(76,141,255,.28),transparent 42%),radial-gradient(circle at 80% 80%,rgba(198,255,61,.17),transparent 40%),#10141b;}

.sample-launch,.sample-aurora,.sample-ghost{border:0; border-radius:999px; font-weight:600;}
.sample-launch{display:flex; align-items:center; gap:18px; padding:13px 16px 13px 21px; background:var(--lime); color:var(--ink); box-shadow:0 12px 30px rgba(198,255,61,.14);}
.sample-launch span{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(11,13,18,.12);}
.sample-aurora{padding:14px 25px; color:white; background:linear-gradient(110deg,#6b5cff,#3c8dff,#70d99b); box-shadow:0 12px 28px rgba(76,141,255,.25);}
.sample-split{display:flex; overflow:hidden; border:1px solid #333b49; border-radius:10px; background:#141820; color:var(--text); font-size:13px;}
.sample-split span{padding:12px 20px;}
.sample-split b{padding:12px 14px; border-left:1px solid #333b49; color:var(--lime);}
.sample-ghost{display:flex; align-items:center; gap:9px; padding:12px 20px; color:var(--text); background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.15);}
.sample-ghost i{width:7px; height:7px; border-radius:50%; background:#4c8dff; box-shadow:0 0 12px #4c8dff;}
.sample-field{position:relative; width:min(100%,230px); padding:20px 14px 8px; border:1px solid #3a4251; border-radius:9px; background:#11151c;}
.sample-field span{position:absolute; top:6px; color:var(--lime); font-size:8px; text-transform:uppercase; letter-spacing:.08em;}
.sample-field input{width:100%; border:0; outline:0; color:#cbd0da; background:transparent; font:11px var(--font-mono);}
.sample-command{display:flex; align-items:center; gap:10px; width:min(100%,240px); padding:12px; border:1px solid #2a303c; border-radius:10px; background:#151922; color:#727c90; font-size:11px;}
.sample-command i{flex:1; font-style:normal;}.sample-command kbd{padding:3px 5px; border:1px solid #323a48; border-radius:4px; font:8px var(--font-mono);}
.sample-password{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:min(100%,220px); padding:15px; border:1px solid rgba(145,91,255,.28); border-radius:10px; background:#12131b;}
.sample-password span{grid-column:1/-1; margin-bottom:9px; color:#bbb4d4; letter-spacing:.18em;}.sample-password i{height:4px; border-radius:9px; background:#7e67ff;}.sample-password i:last-child{background:#2a2d3a;}
.sample-toggle{width:62px; height:34px; padding:4px; border-radius:99px; background:rgba(198,255,61,.16); border:1px solid rgba(198,255,61,.44);}.sample-toggle i{display:block; width:24px; height:24px; margin-left:28px; border-radius:50%; background:var(--lime); box-shadow:0 0 18px rgba(198,255,61,.5);}
.sample-segment{display:flex; padding:4px; border:1px solid #343c49; border-radius:10px; background:#11151b; color:#798296; font-size:11px;}.sample-segment span,.sample-segment b{padding:9px 15px;}.sample-segment b{border-radius:7px; color:var(--ink); background:var(--lime);}
.sample-check{display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid rgba(76,141,255,.28); border-radius:11px; background:rgba(10,15,24,.8);}.sample-check>span{display:grid; place-items:center; width:24px; height:24px; border-radius:7px; color:#09101a; background:#7fa8ff;}.sample-check p{display:flex; flex-direction:column;}.sample-check b{font-size:11px;}.sample-check small{color:#798296; font-size:8px; margin-top:3px;}
.sample-metric{width:min(100%,210px); padding:20px; border:1px solid rgba(255,255,255,.1); border-radius:15px; background:rgba(17,22,30,.58); backdrop-filter:blur(10px);}.sample-metric small{display:block; color:#8992a5; font-size:9px;}.sample-metric strong{display:block; margin:6px 0; font:700 30px var(--font-display);}.sample-metric span{color:var(--lime); font:9px var(--font-mono);}
.sample-profile{display:flex; align-items:center; gap:10px; width:min(100%,245px); padding:13px; border:1px solid #353d4c; border-radius:12px; background:#12161d;}.sample-profile>span{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--lime); background:#242b37; font:10px var(--font-mono);}.sample-profile p{display:flex; flex:1; flex-direction:column;}.sample-profile b{font-size:11px;}.sample-profile small{color:#737d91;font-size:8px;}.sample-profile i{padding:6px 8px; border:1px solid #3b4454; border-radius:6px; color:#cdd2dc; font:normal 8px var(--font-mono);}
.sample-price{display:flex; flex-direction:column; width:min(100%,190px); padding:20px; border:1px solid #2c3441; border-radius:14px; background:#12161d;}.sample-price small{color:var(--lime); font:8px var(--font-mono); letter-spacing:.1em;}.sample-price strong{font:700 31px var(--font-display); margin:7px 0 14px;}.sample-price strong span{font-size:10px;color:#758095;}.sample-price i{padding:9px; border-radius:7px; color:var(--ink); background:var(--lime); text-align:center; font:normal 9px var(--font-mono);}
.sample-orbit{position:relative; width:58px; height:58px; border:1px solid rgba(198,255,61,.18); border-radius:50%; animation:spin 6s linear infinite;}.sample-orbit i{position:absolute; width:9px; height:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px rgba(198,255,61,.5);}.sample-orbit i:nth-child(1){top:-5px;left:24px}.sample-orbit i:nth-child(2){right:-3px;bottom:8px;transform:scale(.7)}.sample-orbit i:nth-child(3){left:1px;bottom:4px;transform:scale(.45)}
.sample-skeleton{display:grid; grid-template-columns:38px 1fr; gap:8px 11px; width:min(100%,220px);}.sample-skeleton i{grid-row:span 2; height:38px; border-radius:9px; background:#29303b;}.sample-skeleton span{height:8px; border-radius:6px; background:linear-gradient(90deg,#252c37,#343c49,#252c37);}.sample-skeleton span:nth-child(3),.sample-skeleton span:last-child{width:66%;}
.sample-upload{display:flex; flex-direction:column; align-items:center; width:min(100%,220px);}.sample-upload strong{font:700 28px var(--font-display);}.sample-upload>span{width:100%; height:6px; margin:12px 0 9px; overflow:hidden; border-radius:99px; background:#202a3a;}.sample-upload i{display:block; width:72%; height:100%; background:linear-gradient(90deg,#4c8dff,#9cc1ff);}.sample-upload small{color:#8190a7;font-size:8px;}
.sample-dock{display:flex; align-items:center; gap:7px; padding:7px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(12,16,23,.72); box-shadow:0 16px 32px rgba(0,0,0,.24);}.sample-dock span,.sample-dock b{display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:#8994a8; font-size:12px;}.sample-dock b{color:#0b0d12;background:var(--lime);font-size:16px;}
.sample-crumb{display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid #303846; border-radius:9px; background:#12161d; font:9px var(--font-mono);}.sample-crumb span{color:#737d90}.sample-crumb i{color:#4e5667;font-style:normal}.sample-crumb b{color:var(--lime);font-weight:500}
.sample-toast{display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; width:min(100%,250px); padding:12px; border:1px solid #2e3743; border-radius:11px; background:#151a22; box-shadow:0 15px 35px rgba(0,0,0,.28);}.sample-toast>span{display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:#0b0d12;background:var(--lime);}.sample-toast p{display:flex;flex-direction:column}.sample-toast b{font-size:10px}.sample-toast small{color:#727c8e;font-size:8px}.sample-toast>i{color:#687184;font-style:normal}
.sample-tip{position:relative}.sample-tip>span{display:grid;place-items:center;width:39px;height:39px;border:1px solid rgba(145,91,255,.45);border-radius:50%;color:#b9a6ff;background:#171523}.sample-tip i{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);white-space:nowrap;padding:7px 10px;border-radius:6px;color:#17131f;background:#d5ccff;font:normal 8px var(--font-mono)}.sample-tip i::after{content:"";position:absolute;top:100%;left:50%;border:5px solid transparent;border-top-color:#d5ccff;transform:translateX(-50%)}

.empty-state{padding:80px 20px; text-align:center; border:1px dashed var(--line); border-radius:15px; color:var(--text-muted);}.empty-state span{font-size:30px;color:var(--lime)}.empty-state h2{font:600 20px var(--font-display);color:var(--text);margin:10px 0 5px}.empty-state p{font-size:12px;margin-bottom:18px}

@media (max-width:1150px){.component-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.browser-toolbar{grid-template-columns:1fr auto}.sort-select{display:none}}
@media (max-width:820px){.browse-nav__links,.browse-nav__meta{display:none}.browser-shell{display:block}.browser-sidebar{display:none}.browser-content{padding:28px 18px 70px}.mobile-category{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#10131a}.mobile-category span{font:9px var(--font-mono);text-transform:uppercase;color:#6f788c}.mobile-category select{flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:12px;text-align:right}.browser-toolbar{top:65px}.browser-heading{align-items:start}.browser-heading__result{margin-top:8px}}
@media (max-width:620px){.browse-nav{padding-inline:16px}.browse-nav .btn{padding:8px 11px;font-size:11px}.logo__text{font-size:15px}.browser-heading{display:block}.browser-heading__result{display:inline-block;margin-top:15px}.browser-heading h1{font-size:38px}.browser-heading p{font-size:13px;line-height:1.6}.browser-toolbar{grid-template-columns:1fr;position:relative;top:auto}.toolbar-filter{justify-content:space-between}.filter-pill{flex:1}.component-grid{grid-template-columns:1fr}.component-card__preview{min-height:210px}}

/* 2026 catalog: compact category rail, live previews and social proof */
.browser-shell{display:block;max-width:1500px;padding:0 28px}
.browser-sidebar{position:static;width:100%;height:auto;margin:28px 0 0;padding:8px;border:1px solid var(--line);border-radius:14px;background:#0e1013;backdrop-filter:none}
.browser-sidebar__head,.sidebar-note{display:none}
.category-list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.category-item{display:flex;justify-content:center;gap:8px;padding:12px 9px;border-radius:9px;text-align:center}
.category-item>span{font-size:15px}.category-item b{font-size:13px}.category-item small{display:none}
.browser-content{padding:45px 0 90px}.browser-heading p{font-size:17px;line-height:1.6}
.filter-pill{display:flex;align-items:center;gap:7px;font-size:12px}.filter-pill svg{width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:1.2}
.component-card{position:relative}.component-card__preview{position:relative;pointer-events:auto;min-height:235px}
.component-card__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:17px}.component-card__meta h2{font-size:17px}.component-card__meta p{font-size:11px}.tech-tag{font-size:10px}
.card-metrics{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding-top:11px;border-top:1px solid var(--line);color:#858c98;font-size:12px}
.card-vote{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #34383e;border-radius:7px;color:#b9bec6;background:#14171b;font:600 11px Inter}.card-vote span{color:var(--lime)}.card-vote[aria-pressed=true]{border-color:var(--lime);color:#090a0c;background:var(--lime)}.card-vote[aria-pressed=true] span{color:#090a0c}
.get-code{position:absolute;right:14px;bottom:14px;padding:8px 11px;border:1px solid rgba(198,255,61,.4);border-radius:8px;color:#0a0c0e;background:var(--lime);font:700 11px Inter;opacity:0;transform:translateY(6px);transition:.18s;pointer-events:none}.component-card:hover .get-code,.component-card:focus-within .get-code{opacity:1;transform:none}
.sample-toggle,.sample-segment,.sample-check,.sample-dock,.sample-tip{cursor:pointer}.sample-toggle i{transition:.22s}.sample-toggle.is-off i{margin-left:0;background:#737a84;box-shadow:none}.sample-segment.is-light b{background:transparent;color:#798296}.sample-segment.is-light span{border-radius:7px;color:#0b0d12;background:var(--lime)}.sample-check.is-checked>span{background:#737a84;color:transparent}
@media(max-width:900px){.browser-shell{padding:0 18px}.browser-sidebar{display:none}.browser-content{padding-top:28px}.mobile-category{display:flex}.category-list{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.browser-shell{padding:0 14px}.component-card__meta h2{font-size:18px}.component-card__meta p,.card-metrics{font-size:12px}.filter-pill{justify-content:center;padding-inline:7px}.filter-pill svg{width:16px}.get-code{opacity:1;transform:none}.component-card__preview{min-height:230px}}

/* Sidebar catalog and reference-style cards */
.browser-shell{display:grid;grid-template-columns:245px minmax(0,1fr);max-width:1500px;padding:0}.browser-sidebar{position:sticky;top:66px;display:block;height:calc(100vh - 66px);margin:0;padding:28px 14px;border:0;border-right:1px solid #24272b;border-radius:0;background:#000}.browser-sidebar__head{display:flex;margin:0 10px 12px}.category-list{display:flex;flex-direction:column;gap:2px}.category-item{display:grid;grid-template-columns:28px 1fr auto;justify-content:initial;padding:10px 11px;text-align:left}.category-item b{font-size:15px}.category-item small{display:block;font-size:11px}.browser-content{padding:40px 0 90px 28px}.browser-toolbar{grid-template-columns:1fr auto;justify-content:space-between;background:#090a0b}.component-grid{gap:22px 16px}.component-card{border:0;border-radius:12px;background:#000;overflow:visible}.component-card:hover,.component-card:focus-visible{background:#000}.component-card__preview{border:1px solid #272a2f;border-radius:12px;min-height:250px}.component-card__meta{display:block;padding:12px 7px}.component-card__meta>div:first-child,.component-card__meta>.tech-tag{display:none}.card-metrics{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:0;border:0;font-size:13px}.card-user{color:#edf0f3;font-weight:700}.card-views{color:#8f96a1}.card-vote{padding:0;border:0;background:transparent;font-size:13px}.card-vote:hover{color:var(--lime)}
@media(max-width:900px){.browser-shell{display:block;padding:0 18px}.browser-sidebar{display:none}.browser-content{padding-left:0}.mobile-category{display:flex}}
.browser-heading{margin-bottom:22px}.browser-heading h1{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;margin-bottom:8px}.browser-heading p{font-size:14px}.browser-content{padding-top:28px}
.browse-page .nav__inner,.browse-page .footer__top,.browse-page .footer__bottom{width:calc(100% - 48px)!important;max-width:none!important}.browser-shell{width:100%;max-width:none}.browser-content{padding-right:28px}.component-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:1900px){.component-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1350px){.component-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.browse-page .nav__inner,.browse-page .footer__top,.browse-page .footer__bottom{width:calc(100% - 32px)!important}.browser-content{padding-right:0}}
@media(max-width:620px){.component-grid{grid-template-columns:1fr}.browse-page .nav__inner,.browse-page .footer__top,.browse-page .footer__bottom{width:calc(100% - 24px)!important}}
.browser-heading{margin-bottom:18px}.browser-heading h1{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.025em;margin-bottom:7px}.browser-heading p{font-size:15px}.browser-content{padding-top:24px}
@media(max-width:620px){
  .browser-shell{width:100%;padding:0 12px}.browser-content{width:100%;min-width:0;padding:20px 0 60px}
  .mobile-category{width:100%;margin-bottom:18px}.mobile-category select{min-width:0;max-width:68%}
  .browser-heading{margin-bottom:18px}.browser-heading h1{font-size:27px}.browser-heading p{font-size:14px}
  .browser-toolbar{width:100%;padding:8px;gap:8px}.catalog-search{width:100%}.catalog-search kbd{display:none}
  .toolbar-filter{width:100%;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.toolbar-filter::-webkit-scrollbar{display:none}.filter-pill{flex:0 0 auto;min-width:82px}
  .component-grid{width:100%;grid-template-columns:minmax(0,1fr);gap:20px}.component-card{min-width:0;width:100%}.component-card__preview{min-width:0;padding:18px}
  .card-metrics{grid-template-columns:minmax(0,1fr) auto auto;gap:9px;font-size:11px}.card-user{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.component-card__link{position:absolute;z-index:1;inset:0;border-radius:12px}.component-card__preview iframe{width:100%;height:250px;border:0;border-radius:inherit;background:transparent;pointer-events:none}.component-card__meta,.component-card__preview{position:relative;z-index:2}.component-card__meta{pointer-events:none}.card-vote{pointer-events:auto}.catalog-search{position:relative}.catalog-search>button{padding:7px 10px;border:0;border-radius:7px;color:#0b0d12;background:var(--lime);font-size:11px;font-weight:700}.search-suggestions{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 7px);padding:6px;border:1px solid #30343a;border-radius:10px;background:#111418;box-shadow:0 20px 55px rgba(0,0,0,.65)}.search-suggestions a{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:9px;border-radius:7px;color:#daddE2}.search-suggestions a:hover{background:#1c2025}.search-suggestions span{color:var(--lime)}.search-suggestions small{color:#747c87;font-size:10px}.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px}.pagination a,.pagination span{padding:10px 13px;border:1px solid #30343a;border-radius:8px;color:#b9bec7;background:#111418;font-size:12px}.pagination a{color:var(--lime)}
@media(max-width:620px){.component-card__preview iframe{height:230px}.catalog-search>button{padding-inline:8px}.pagination{gap:7px}.pagination a,.pagination span{padding:9px 8px;font-size:10px}}

codepeek-preview{display:grid;width:100%;height:100%;min-height:250px;overflow:hidden;border-radius:inherit}
.component-card__preview{height:300px;min-height:0;padding:0!important;overflow:hidden}
.component-card__preview iframe{display:none!important}
.component-card__preview .get-code{z-index:5;pointer-events:auto}
.component-card__meta{pointer-events:auto}
.component-card{cursor:default}
.component-card__meta,.card-user{cursor:pointer}
.card-vote{position:relative;z-index:6;cursor:pointer}
.component-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px}
.pagination{display:grid;grid-template-columns:1fr auto 1fr;width:100%;margin-top:48px}
.pagination__edge:first-child{justify-self:start}.pagination__edge:last-child{justify-self:end}
.pagination__pages{display:flex;gap:7px}
.pagination__status{justify-self:center;white-space:nowrap;color:#7f8793!important;background:transparent!important}
.pagination__pages a{display:grid;place-items:center;min-width:38px}
.pagination a.active{border-color:var(--lime);color:#090b0c;background:var(--lime)}
.pagination a.disabled{opacity:.35;pointer-events:none}
@media(max-width:1400px){.component-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.component-grid{grid-template-columns:1fr}.component-card__preview{height:270px}.pagination{grid-template-columns:auto 1fr auto;gap:8px}.pagination__pages{justify-content:center}.pagination a{font-size:11px}}

/* Keep the search magnifier inside its own 20px SVG viewport. */
.catalog-search>svg{
  display:block!important;
  flex:0 0 20px!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  min-height:20px!important;
  max-height:20px!important;
  overflow:visible!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.catalog-search>svg circle{cx:11px!important;cy:11px!important;r:7px!important;transform:none!important;transform-origin:center;vector-effect:non-scaling-stroke}

/* Stable catalog layout: prevents sticky/full-page capture clipping and overflow. */
.browse-page{overflow-x:hidden}
.browse-page *{min-width:0}
.browser-shell{
  width:100%;
  max-width:1920px;
  margin-inline:auto;
  grid-template-columns:240px minmax(0,1fr);
  overflow:visible;
}
.browser-sidebar{
  position:relative;
  top:auto;
  width:auto;
  min-width:0;
  height:auto;
  min-height:calc(100vh - 66px);
}
.browser-content{
  width:100%;
  max-width:100%;
  min-width:0;
  padding:28px 28px 90px;
  overflow:visible;
}
.browser-heading,.browser-toolbar,.component-grid,.empty-state{width:100%;max-width:100%}
.browser-heading>div{min-width:0;overflow:hidden}
.browser-heading h1,.browser-heading p{max-width:100%;overflow-wrap:anywhere}
.browser-toolbar{
  position:relative;
  top:auto;
  grid-template-columns:minmax(260px,1fr) auto auto;
  overflow:visible;
}
.catalog-search,.toolbar-filter,.sort-select{max-width:100%}
.empty-state{min-height:340px;display:grid;place-content:center;padding:56px 20px}

@media(max-width:1200px){
  .browser-toolbar{grid-template-columns:minmax(220px,1fr) auto}
  .sort-select{grid-column:1/-1;justify-self:end}
}
@media(max-width:900px){
  .browser-shell{display:block;padding:0 18px}
  .browser-sidebar{display:none}
  .browser-content{padding:24px 0 70px}
  .browser-toolbar{grid-template-columns:minmax(0,1fr)}
  .sort-select{grid-column:auto;justify-self:stretch}
}
@media(max-width:620px){
  .browser-shell{padding:0 12px}
  .browser-content{padding-top:20px}
  .browser-heading{overflow:hidden}
  .browser-toolbar{display:grid;width:100%}
  .catalog-search{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
  .empty-state{min-height:280px;padding-inline:16px}
}

/* Final browse layout — isolated, interactive previews without iframe scrollbars. */
.browser-toolbar--filters{display:flex;align-items:center;justify-content:space-between;gap:12px}
.browser-toolbar--filters .toolbar-filter{flex:0 1 auto}
.browser-toolbar--filters .sort-select{margin-left:auto}
.filter-pill svg{display:block;flex:0 0 18px;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.filter-pill[href*="tailwind"] svg{fill:currentColor;stroke:none}
.browse-page{overflow-x:clip;background:#000}
.browser-shell{display:grid;width:100%;max-width:none;margin:0;grid-template-columns:240px minmax(0,1fr);overflow:visible}
.browser-content{width:100%;max-width:none;padding:28px 28px 90px;overflow:visible}
.component-grid{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px}
.component-card{position:relative;width:100%;min-width:0;overflow:visible;border:0;border-radius:12px;background:#000;cursor:pointer}
.component-card__preview{position:relative;z-index:1;display:block;width:100%;height:300px;min-height:0;padding:0!important;overflow:hidden;border:1px solid #272a2f;border-radius:12px;background:#11151c;pointer-events:auto}
codepeek-preview{display:block;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:inherit;isolation:isolate}
.component-card__preview iframe{display:none!important}
.component-card__meta{position:relative;z-index:2;display:block;padding:12px 7px;pointer-events:auto}
.component-card__meta>div:first-child,.component-card__meta>.tech-tag{display:none}
.card-metrics{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:0;border:0;font-size:13px}
.card-user{min-width:0;overflow:hidden;color:#edf0f3;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.card-views{color:#8f96a1;white-space:nowrap}
.card-vote{position:relative;z-index:6;pointer-events:auto;cursor:pointer}
.get-code{z-index:7;pointer-events:auto}
.pagination{display:grid;width:100%;grid-template-columns:1fr 1fr;align-items:center;margin-top:48px}
.pagination__edge:first-child{justify-self:start}.pagination__edge:last-child{justify-self:end}
.pagination__pages{display:flex;gap:7px}

@media(max-width:1400px){.component-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.browser-shell{display:block;padding:0 18px}.browser-content{padding:24px 0 70px}}
@media(max-width:620px){
  .browser-shell{padding:0 12px}
  .browser-toolbar--filters{flex-direction:column;align-items:stretch}
  .browser-toolbar--filters .toolbar-filter{width:100%}
  .browser-toolbar--filters .sort-select{width:100%;margin-left:0}
  .component-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .component-card__preview{height:280px}
  .card-metrics{gap:9px;font-size:12px}
  .pagination{grid-template-columns:1fr 1fr;gap:8px}
  .pagination__edge:first-child{justify-self:start}.pagination__edge:last-child{justify-self:end}
  .pagination__status{font-size:10px}
}