/* ==========================================================================
   Docker Hub recreation — design system.
   Tokens follow the current hub.docker.com MUI theme (dark-first), with a
   full light theme derived from the same palette family.
   ========================================================================== */

/* ---- fonts ---- */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/roboto-400.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/roboto-500.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/roboto-700.woff2') format('woff2')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/robotomono-400.woff2') format('woff2')}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/robotomono-500.woff2') format('woff2')}

/* ---- tokens ---- */
:root{
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:4px; --radius-lg:8px;
  --container:1536px; --gutter:24px;
  --header-h:56px;
  --transition:.2s cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#10151B; --bg-secondary:#080B0E; --bg-elev:#161D26;
  --paper:#10151B; --paper-alt:#141B24;
  --divider:rgba(255,255,255,.08); --outline:rgba(255,255,255,.14);
  --text:#FFFFFF; --text-2:#7794AB; --text-3:rgba(255,255,255,.5);
  --primary:#2986FF; --primary-hover:#4DA6FF; --primary-contrast:#051B50;
  --primary-dim:rgba(41,134,255,.12); --primary-focus:rgba(41,134,255,.24);
  --brand-blue:#1D63ED;
  --success:#00A58C; --warning:#DB7512; --error:#E65264; --premium:#A371FC;
  --chip-bg:rgba(41,134,255,.16); --chip-text:#4DA6FF;
  --skeleton-1:#1A222D; --skeleton-2:#232E3B;
  --code-bg:#080B0E; --table-hover:rgba(255,255,255,.03);
  --overlay:rgba(4,7,10,.7); --shadow:0 8px 28px rgba(0,0,0,.55);
  --sponsored:#7794AB;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F7FA; --bg-secondary:#EEF1F5; --bg-elev:#FFFFFF;
  --paper:#FFFFFF; --paper-alt:#FFFFFF;
  --divider:rgba(16,21,27,.1); --outline:rgba(16,21,27,.16);
  --text:#10151B; --text-2:#4E6A81; --text-3:rgba(16,21,27,.55);
  --primary:#1D63ED; --primary-hover:#1554CE; --primary-contrast:#FFFFFF;
  --primary-dim:rgba(29,99,237,.08); --primary-focus:rgba(29,99,237,.22);
  --brand-blue:#1D63ED;
  --success:#008471; --warning:#B75A00; --error:#D1334C; --premium:#7C4DFF;
  --chip-bg:rgba(29,99,237,.08); --chip-text:#1D63ED;
  --skeleton-1:#E9EDF2; --skeleton-2:#DDE3EA;
  --code-bg:#F0F3F7; --table-hover:rgba(16,21,27,.025);
  --overlay:rgba(16,21,27,.45); --shadow:0 8px 28px rgba(16,21,27,.18);
  --sponsored:#4E6A81;
}

/* ---- base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500}
p{margin:0}
button{font-family:inherit}
::selection{background:var(--primary-dim)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
code,pre,.mono{font-family:var(--mono)}

/* ---- layout ---- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.app-main{min-height:calc(100vh - var(--header-h) - 320px)}
.page{padding:24px 0 72px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}
.spread{display:flex;align-items:center;justify-content:space-between}
.wrap{flex-wrap:wrap}
.muted{color:var(--text-2)}
.small{font-size:.875rem}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.hide-mobile{display:initial}
@media (max-width:768px){.hide-mobile{display:none}}
.show-mobile{display:none}
@media (max-width:768px){.show-mobile{display:initial}}
@media (max-width:860px){
  .bar-inner .search-launch{min-width:0;padding:0 12px}
  .search-launch .lbl{display:none}
  #suite-btn,#help-btn{display:none}
  .container{padding:0 16px}
}
@media (max-width:520px){
  .header-actions .btn-outlined{display:none}
  .home-title{font-size:1.75rem}
}

/* ---- header ---- */
.app-bar{position:sticky;top:0;z-index:120;background:var(--bg);border-bottom:1px solid var(--divider)}
.app-bar .bar-inner{height:var(--header-h);display:flex;align-items:center;gap:16px}
.logo-link{display:inline-flex;color:var(--text)}
.logo-link:hover{text-decoration:none;opacity:.85}
.logo-mark{height:21px;width:auto;display:block}
.search-launch{display:flex;align-items:center;gap:10px;background:var(--primary-dim);border:none;color:var(--text);
  border-radius:var(--radius);padding:0 14px 0 12px;height:38px;min-width:230px;cursor:pointer;font-size:.9375rem;
  transition:background var(--transition)}
.search-launch:hover{background:var(--primary-focus)}
.search-launch .kbd{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:var(--text-2);border:1px solid var(--outline);
  border-radius:4px;padding:1px 6px;background:var(--bg-secondary)}
.search-launch .glass{color:var(--primary)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:transparent;
  color:var(--text-2);border-radius:var(--radius);cursor:pointer;transition:background var(--transition),color var(--transition)}
.icon-btn:hover{background:var(--primary-dim);color:var(--text)}
.icon-btn.active{color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);font-weight:500;
  font-size:.875rem;padding:8px 16px;cursor:pointer;border:none;text-decoration:none;line-height:20px;transition:all var(--transition)}
.btn:hover{text-decoration:none}
.btn-contained{background:var(--primary);color:var(--primary-contrast)}
.btn-contained:hover{background:var(--primary-hover);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.btn-outlined{background:transparent;color:var(--primary);border:1px solid var(--primary);padding:7px 15px}
.btn-outlined:hover{background:var(--primary-dim)}
.btn-text{background:transparent;color:var(--primary);padding:8px 10px}
.btn-text:hover{background:var(--primary-dim)}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--outline)}
.btn-ghost:hover{color:var(--text);border-color:var(--text-2)}
.btn-danger{background:var(--error);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-sm{padding:4px 10px;font-size:.8125rem}
.avatar-btn{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;background:var(--primary);color:var(--primary-contrast);
  font-weight:700;font-size:.8125rem;display:inline-flex;align-items:center;justify-content:center}
.avatar{border-radius:var(--radius-lg);display:inline-flex;align-items:center;justify-content:center;background:var(--bg-elev);
  border:1px solid var(--divider);color:var(--text-2);flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* menus / popovers */
.menu{position:absolute;z-index:200;min-width:210px;background:var(--bg-elev);border:1px solid var(--divider);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:6px 0;animation:pop .14s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 16px;background:none;border:none;color:var(--text);
  font-size:.875rem;cursor:pointer;text-align:left;text-decoration:none}
.menu-item:hover,.menu-item:focus-visible{text-decoration:none;background:var(--primary-dim)}
.menu-item svg{color:var(--text-2);flex:none}
.menu-item .sub{font-size:.75rem;color:var(--text-2)}
.menu-label{padding:8px 16px 4px;font-size:.75rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.menu-sep{height:1px;background:var(--divider);margin:6px 0}

/* promo banner */
.promo{background:linear-gradient(90deg,rgba(163,113,252,.18),rgba(41,134,255,.14));border-bottom:1px solid var(--divider)}
.promo .promo-inner{display:flex;align-items:center;gap:16px;padding:10px 0;flex-wrap:wrap}
.promo .promo-close{margin-left:4px}
.promo-title{font-weight:700;font-size:.875rem}
.promo-title .new{color:var(--premium);margin-right:6px;text-transform:uppercase;font-size:.6875rem;letter-spacing:.08em;border:1px solid var(--premium);border-radius:3px;padding:1px 5px;vertical-align:1px}
.promo-text{font-size:.8125rem;color:var(--text-2);flex:1;min-width:220px}

/* ---- search palette ---- */
.palette-overlay{position:fixed;inset:0;background:var(--overlay);z-index:300;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;animation:fade .12s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.palette{width:min(680px,100%);background:var(--bg-elev);border:1px solid var(--divider);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;animation:pop .16s ease-out}
.palette-input-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--divider)}
.palette-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:1.0625rem;font-family:inherit}
.palette-input::placeholder{color:var(--text-3)}
.palette-list{max-height:min(430px,54vh);overflow-y:auto;padding:6px 0}
.palette-group{padding:10px 18px 4px;font-size:.75rem;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.palette-item{display:flex;align-items:center;gap:12px;padding:9px 18px;cursor:pointer;border:none;background:none;width:100%;text-align:left;color:var(--text)}
.palette-item:hover,.palette-item.sel{background:var(--primary-dim)}
.palette-item .pi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.palette-item .pi-name{display:block;font-size:.9375rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-item .pi-desc{display:block;font-size:.8125rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.palette-item .pi-meta{font-size:.75rem;color:var(--text-2);flex:none}
.palette-foot{display:flex;gap:18px;padding:9px 18px;border-top:1px solid var(--divider);font-size:.75rem;color:var(--text-2)}
.palette-foot .kbd{font-family:var(--mono);border:1px solid var(--outline);border-radius:3px;padding:0 5px;margin-right:4px}
.palette-empty{padding:28px 18px;text-align:center;color:var(--text-2);font-size:.9375rem}

/* ---- cards / grids ---- */
.card{background:var(--paper);border:1px solid var(--divider);border-radius:var(--radius-lg)}
.card:hover{border-color:var(--outline)}
a.card{text-decoration:none;color:inherit;display:block}
a.card:hover{text-decoration:none}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1279px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.card-grid{grid-template-columns:1fr}}
.repo-card{padding:16px;display:flex;flex-direction:column;gap:10px;height:100%;position:relative;transition:border-color var(--transition),transform var(--transition);cursor:pointer}
.repo-card:hover{border-color:var(--primary);transform:translateY(-1px)}
.repo-card .rc-thumb{display:block;width:44px;height:44px;text-decoration:none}
.repo-card .rc-thumb:hover{text-decoration:none}
.repo-card a.rc-name{color:var(--text);text-decoration:none}
.repo-card a.rc-name:hover{color:var(--primary)}
.repo-card .rc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.repo-card .rc-type{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--chip-text);background:var(--chip-bg);
  border-radius:3px;padding:2px 6px;font-weight:500;white-space:nowrap;display:inline-flex;gap:4px}
.repo-card .rc-name{font-size:1.125rem;font-weight:500;line-height:1.3;color:var(--text);word-break:break-all}
.repo-card .rc-owner{font-size:.8125rem;color:var(--text-2)}
.repo-card .rc-owner:hover{color:var(--primary)}
.repo-card .rc-desc{font-size:.8125rem;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.repo-card .rc-stats{display:flex;align-items:center;gap:14px;font-size:.8125rem;color:var(--text-2);flex-wrap:wrap}
.repo-card .rc-stats .stat{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.repo-card .rc-stats svg{opacity:.75}
.type-dot{position:absolute;bottom:8px;right:8px}
.avatar-44{width:44px;height:44px}
.avatar-40{width:40px;height:40px}
.avatar-72{width:72px;height:72px}
.initials{font-weight:700;font-size:1.125rem;color:var(--primary);background:var(--primary-dim);width:100%;height:100%;display:flex;align-items:center;justify-content:center}

/* ---- sections (home) ---- */
.home-hero{display:flex;flex-direction:column;gap:18px;padding:34px 0 8px}
.home-title{font-size:2.375rem;font-weight:700;letter-spacing:-.01em}
.chip-row{display:flex;flex-direction:column;gap:10px}
.chip-row .chip-label{font-size:.875rem;font-weight:500;color:var(--text-2);min-width:150px}
.chip-scroll{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:16px;border:1px solid var(--outline);background:transparent;
  color:var(--text);font-size:.8125rem;padding:5px 13px;cursor:pointer;text-decoration:none;transition:all var(--transition);font-family:inherit}
.chip:hover{text-decoration:none;border-color:var(--primary);background:var(--primary-dim)}
.chip.selected{background:var(--primary);border-color:var(--primary);color:var(--primary-contrast)}
.chip .cnt{color:var(--text-3);font-size:.75rem}
.chip.selected .cnt{color:var(--primary-contrast);opacity:.8}
.section{margin-top:44px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.section-title{font-size:1.375rem;font-weight:600}
.view-all{font-size:.875rem;font-weight:500}
.spotlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1000px){.spotlight-grid{grid-template-columns:1fr}}
.spot-card{padding:20px;display:flex;flex-direction:column;gap:12px}
.spot-tag{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--primary)}
.spot-title{font-size:1.0625rem;font-weight:600;color:var(--text)}
.spot-desc{font-size:.875rem;color:var(--text-2)}
.cta-band{margin-top:56px;border:1px solid var(--divider);border-radius:var(--radius-lg);padding:36px;display:grid;grid-template-columns:1.1fr 1fr;gap:36px}
@media (max-width:900px){.cta-band{grid-template-columns:1fr;padding:24px}}
.cta-band h3{font-size:1.5rem;font-weight:600;margin-bottom:8px}
.cta-band .feat{display:flex;gap:12px;margin-top:16px}
.cta-band .feat svg{color:var(--primary);flex:none;margin-top:2px}
.publisher-band{margin-top:20px;border:1px dashed var(--outline);border-radius:var(--radius-lg);padding:24px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.publisher-band .pub-copy{flex:1;min-width:240px}
.publisher-band h4{font-size:1.125rem;font-weight:600;margin-bottom:4px}
.publisher-band p{font-size:.875rem;color:var(--text-2)}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:500;color:var(--primary);background:var(--primary-dim);
  border-radius:var(--radius);padding:3px 10px}
.badge svg{flex:none}
.badge.verified{color:var(--success);background:rgba(0,165,140,.12)}
.badge.sponsored{color:var(--text-2);background:var(--bg-secondary);border:1px solid var(--divider)}
.badge.hardened{color:var(--premium);background:rgba(163,113,252,.14)}

/* ---- search page ---- */
.search-layout{display:grid;grid-template-columns:290px 1fr;gap:32px;align-items:start}
@media (max-width:1000px){.search-layout{grid-template-columns:1fr}}
.filters{position:sticky;top:calc(var(--header-h) + 16px);max-height:calc(100vh - var(--header-h) - 40px);overflow-y:auto;padding-right:4px}
@media (max-width:1000px){.filters{position:static;max-height:none}}
.filters h4{font-size:1.125rem;font-weight:600;margin-bottom:14px}
.filter-group{border-bottom:1px solid var(--divider);padding:4px 0}
.filter-group:last-child{border-bottom:none}
.filter-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:var(--text);
  font-size:.9375rem;font-weight:500;padding:10px 0;cursor:pointer;font-family:inherit}
.filter-head .chev{transition:transform var(--transition);color:var(--text-2)}
.filter-group.closed .chev{transform:rotate(-90deg)}
.filter-group .items{padding:2px 0 12px;display:flex;flex-direction:column}
.filter-group.closed .items{display:none}
.check-row{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;font-size:.875rem;color:var(--text);user-select:none}
.check-row input{appearance:none;width:18px;height:18px;border:1px solid var(--outline);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex:none;margin:0}
.check-row input:checked{background:var(--primary);border-color:var(--primary)}
.check-row input:checked::after{content:'';position:absolute;left:5px;top:1.5px;width:5px;height:10px;border:solid var(--primary-contrast);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check-row .count{margin-left:auto;color:var(--text-3);font-size:.75rem}
.check-row:hover{color:var(--primary)}
.show-more-btn{background:none;border:none;color:var(--primary);font-size:.8125rem;padding:4px 0;cursor:pointer;text-align:left;font-family:inherit}
.show-more-btn:hover{text-decoration:underline}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.results-count{font-size:1rem}
.results-count b{font-weight:600}
.sort-control{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--text-2)}
.select{appearance:none;background:var(--bg-secondary);border:1px solid var(--outline);color:var(--text);border-radius:var(--radius);
  font-size:.875rem;font-family:inherit;padding:7px 30px 7px 12px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237794AB' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.results-list{display:flex;flex-direction:column;gap:12px}
.result-row{display:flex;gap:16px;padding:16px;align-items:flex-start}
.result-row .rr-main{flex:1;min-width:0}
.result-row .rr-name-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.result-row .rr-name{font-size:1.0625rem;font-weight:600;color:var(--text)}
.result-row .rr-desc{font-size:.875rem;color:var(--text-2);margin:2px 0 8px;max-width:70ch}
.result-row .rr-stats{display:flex;gap:14px;font-size:.8125rem;color:var(--text-2);flex-wrap:wrap}
.result-row .rr-stats .stat{display:inline-flex;align-items:center;gap:5px}
.promo-row{display:flex;gap:16px;padding:16px;border:1px solid var(--premium);background:rgba(163,113,252,.07);border-radius:var(--radius-lg);align-items:flex-start}
.promo-row .pr-tag{font-size:.6875rem;font-weight:700;letter-spacing:.08em;color:var(--premium);text-transform:uppercase}
.promo-row .rec{font-size:.6875rem;font-weight:500;color:var(--success);border:1px solid var(--success);border-radius:3px;padding:1px 6px;text-transform:uppercase;letter-spacing:.05em}
.promo-row .pr-name{font-size:1.0625rem;font-weight:600;margin:2px 0}
.promo-row .pr-desc{font-size:.875rem;color:var(--text-2);max-width:70ch}
.empty-state{text-align:center;padding:72px 24px;border:1px dashed var(--outline);border-radius:var(--radius-lg)}
.empty-state .big{font-size:2.4rem;margin-bottom:10px}
.empty-state h3{font-size:1.25rem;font-weight:600;margin-bottom:6px}
.empty-state p{color:var(--text-2);font-size:.9375rem}

/* ---- pagination ---- */
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;font-size:.875rem;color:var(--text-2)}
.page-btn{width:34px;height:34px;border-radius:var(--radius);border:1px solid var(--outline);background:transparent;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition)}
.page-btn:hover:not([disabled]){border-color:var(--primary);color:var(--primary)}
.page-btn[disabled]{opacity:.35;cursor:default}
.page-of b{color:var(--text);font-weight:500}

/* ---- repo page ---- */
.breadcrumbs{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--text-2);flex-wrap:wrap;padding:18px 0 14px}
.breadcrumbs a{color:var(--text-2)}
.breadcrumbs a:hover{color:var(--primary)}
.breadcrumbs .sep{opacity:.6}
.repo-header{padding-bottom:18px;border-bottom:1px solid var(--divider)}
.repo-title-row{display:flex;gap:16px;align-items:flex-start}
.repo-title-row .titles{flex:1;min-width:0}
.repo-title-row h2{font-size:1.9rem;font-weight:600;line-height:1.2;word-break:break-all}
.repo-meta{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap;font-size:.9375rem;color:var(--text-2)}
.repo-meta .dot{opacity:.5}
.repo-meta .stat{display:inline-flex;align-items:center;gap:6px}
.repo-desc{margin-top:8px;font-size:1rem;color:var(--text-2);max-width:80ch}
.repo-cats{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.repo-cats .chip{font-size:.75rem;padding:3px 10px;border-radius:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--divider);margin-bottom:28px}
.tab{padding:12px 16px;font-size:.9375rem;font-weight:500;color:var(--text-2);text-decoration:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color var(--transition)}
.tab:hover{color:var(--text);text-decoration:none}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.repo-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
@media (max-width:1000px){.repo-layout{grid-template-columns:minmax(0,1fr)}}
.readme{padding:28px 32px;overflow-wrap:break-word}
@media (max-width:768px){.readme{padding:20px 18px}}
.readme h1{font-size:1.75rem;font-weight:600;margin-bottom:6px}
.readme .overline-tag{font-size:.75rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-bottom:18px}
.readme h2{font-size:1.375rem;font-weight:600;margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--divider)}
.readme h3{font-size:1.0625rem;font-weight:600;margin:22px 0 8px}
.readme p{margin:10px 0;font-size:.9375rem;color:var(--text);max-width:78ch}
.readme ul,.readme ol{margin:10px 0;padding-left:24px;font-size:.9375rem}
.readme li{margin:4px 0}
.readme code{background:var(--code-bg);border:1px solid var(--divider);border-radius:4px;padding:1px 5px;font-size:.83em;color:var(--text)}
.readme hr{border:none;border-top:1px solid var(--divider);margin:26px 0}
.readme table{border-collapse:collapse;margin:14px 0;font-size:.875rem;max-width:100%;display:block;overflow-x:auto}
.readme td{border-bottom:1px solid var(--divider);padding:9px 14px 9px 0;vertical-align:top;color:var(--text-2)}
.readme td:first-child{color:var(--text);white-space:nowrap;font-weight:500}
.code-block{position:relative;margin:14px 0;background:var(--code-bg);border:1px solid var(--divider);border-radius:var(--radius)}
.code-block pre{margin:0;padding:14px 16px;overflow-x:auto;font-size:.8125rem;line-height:1.55;color:var(--text)}
.code-block .copy-btn{position:absolute;top:8px;right:8px;background:var(--bg-elev);border:1px solid var(--outline);color:var(--text-2);
  border-radius:var(--radius);padding:3px 8px;font-size:.75rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px;opacity:0;transition:opacity var(--transition)}
.code-block:hover .copy-btn,.code-block .copy-btn:focus-visible{opacity:1}
.code-block .copy-btn:hover{color:var(--primary);border-color:var(--primary)}
.sidebar{display:flex;flex-direction:column;gap:16px}
.side-card{padding:18px}
.side-card h4{font-size:1rem;font-weight:600;margin-bottom:12px}
.side-card .kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.875rem;border-bottom:1px solid var(--divider)}
.side-card .kv:last-child{border-bottom:none}
.side-card .kv .k{color:var(--text-2)}
.side-card .kv .v{text-align:right;word-break:break-all}
.pull-box{margin-top:14px;background:var(--code-bg);border:1px solid var(--divider);border-radius:var(--radius);padding:10px 12px;
  display:flex;align-items:center;gap:8px}
.pull-box code{font-size:.8125rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{background:none;border:none;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:.75rem;padding:3px 6px;border-radius:4px}
.copy-btn:hover{color:var(--primary)}
.copy-btn.copied{color:var(--success)}
.spark{width:100%;height:64px;display:block}
.mini-select{width:100%}
.about-card p{font-size:.875rem;color:var(--text-2);margin-bottom:10px}

/* ---- tags page ---- */
.tags-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.tags-head h2{font-size:1.5rem;font-weight:600}
.tags-head .muted{font-weight:400}
.tag-list{display:flex;flex-direction:column;gap:14px}
.tag-card{overflow:hidden}
.tag-card .tg-head{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap;border-bottom:1px solid var(--divider)}
.tag-card .tg-name{font-family:var(--mono);font-weight:500;font-size:1rem;color:var(--primary)}
.tag-card .tg-pushed{font-size:.8125rem;color:var(--text-2)}
.tag-card .tg-pull{display:inline-flex;align-items:center;gap:6px;background:var(--code-bg);border:1px solid var(--divider);border-radius:var(--radius);
  padding:4px 6px 4px 10px;font-size:.8125rem;margin-left:auto}
.tag-card .tg-pull code{font-size:.8125rem}
.tag-card .table-scroll{overflow-x:auto}
.tag-card table{width:100%;border-collapse:collapse;font-size:.843rem}
.tag-card th{text-align:left;font-weight:500;color:var(--text-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  padding:10px 18px;border-bottom:1px solid var(--divider)}
.tag-card td{padding:9px 18px;border-bottom:1px solid var(--divider);color:var(--text)}
.tag-card tr:last-child td{border-bottom:none}
.tag-card tr:hover td{background:var(--table-hover)}
.tag-card tr.hidden-manifest{display:none}
.tag-card td.digest{font-family:var(--mono);font-size:.812rem;color:var(--text-2)}
.tag-card td.osarch{font-family:var(--mono);font-size:.812rem}
.tag-card td.size{white-space:nowrap}
.more-manifests{width:100%;background:none;border:none;color:var(--primary);font-size:.8125rem;padding:9px 18px;cursor:pointer;text-align:left;font-family:inherit}
.more-manifests:hover{text-decoration:underline}

/* ---- org page ---- */
.org-banner{display:flex;gap:24px;padding:30px 0;align-items:flex-start;flex-wrap:wrap}
.org-banner .org-info{flex:1;min-width:260px}
.org-banner h1{font-size:1.75rem;font-weight:600}
.org-details{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:.875rem;color:var(--text-2)}
.org-details .d{display:inline-flex;align-items:center;gap:6px}
.org-banner .org-cta{display:flex;gap:10px;align-items:center}
.org-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 18px;flex-wrap:wrap}
.org-toolbar .search-box{display:flex;align-items:center;gap:8px;background:var(--bg-secondary);border:1px solid var(--outline);border-radius:var(--radius);padding:0 12px;height:40px;min-width:280px}
.org-toolbar input{background:none;border:none;outline:none;color:var(--text);font-size:.875rem;flex:1;font-family:inherit}
.org-toolbar input::placeholder{color:var(--text-3)}
.org-toolbar .muted{font-size:.875rem}
.org-ads{border:1px solid var(--divider);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px}

/* ---- auth ---- */
.auth-wrap{max-width:440px;margin:48px auto;padding:0 16px}
.auth-card{padding:32px}
.auth-card h1{font-size:1.5rem;font-weight:600;margin-bottom:4px}
.auth-card .sub{color:var(--text-2);font-size:.9375rem;margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:.875rem;font-weight:500}
.field input{background:var(--bg-secondary);border:1px solid var(--outline);border-radius:var(--radius);color:var(--text);
  font-size:.9375rem;padding:11px 14px;font-family:inherit;outline:none;transition:border var(--transition)}
.field input:focus{border-color:var(--primary)}
.field input.invalid{border-color:var(--error)}
.field .err{display:none;font-size:.75rem;color:var(--error);align-items:center;gap:5px}
.field.invalid .err{display:flex}
.field .hint{font-size:.75rem;color:var(--text-2)}
.field .pw-row{display:flex;justify-content:space-between;align-items:baseline}
.field .pw-row a{font-size:.75rem}
.auth-alt{text-align:center;font-size:.875rem;color:var(--text-2);margin-top:18px}
.divider{display:flex;align-items:center;gap:14px;color:var(--text-3);font-size:.75rem;margin:20px 0;text-transform:uppercase;letter-spacing:.08em}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--divider)}
.auth-alert{display:flex;gap:10px;background:rgba(230,82,100,.1);border:1px solid rgba(230,82,100,.4);color:var(--error);
  border-radius:var(--radius);padding:10px 14px;font-size:.8125rem;margin-bottom:18px}
.form-error{color:var(--error);font-size:.8125rem;margin-bottom:12px;display:none}
.form-error.show{display:block}
.checkbox-row{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;color:var(--text-2);margin-bottom:18px}
.checkbox-row input{margin-top:2px}

/* ---- account ---- */
.account-grid{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:start}
@media (max-width:800px){.account-grid{grid-template-columns:1fr}}
.account-nav a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);color:var(--text-2);font-size:.875rem;text-decoration:none}
.account-nav a:hover{background:var(--primary-dim);color:var(--text);text-decoration:none}
.account-nav a.active{background:var(--primary-dim);color:var(--primary);font-weight:500}
.star-toggle{background:none;border:1px solid var(--outline);border-radius:var(--radius);color:var(--text-2);width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition)}
.star-toggle:hover{border-color:var(--warning);color:var(--warning)}
.star-toggle.on{border-color:var(--warning);color:var(--warning);background:rgba(219,117,18,.1)}

/* ---- skeletons ---- */
.skeleton{background:linear-gradient(90deg,var(--skeleton-1) 25%,var(--skeleton-2) 50%,var(--skeleton-1) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-card{height:172px}
.sk-row{height:96px}
.sk-line{height:14px;margin:8px 0}

/* ---- toasts ---- */
.toast-slot{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{display:flex;align-items:center;gap:10px;background:var(--bg-elev);color:var(--text);border:1px solid var(--divider);
  border-radius:var(--radius);padding:10px 18px;font-size:.875rem;box-shadow:var(--shadow);animation:toast-in .18s ease-out}
.toast svg{color:var(--success)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast.hide{opacity:0;transform:translateY(6px);transition:all .25s ease-in}

/* ---- modal ---- */
.modal-overlay{position:fixed;inset:0;background:var(--overlay);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .12s ease-out}
.modal{width:min(520px,100%);background:var(--bg-elev);border:1px solid var(--divider);border-radius:var(--radius-lg);box-shadow:var(--shadow);animation:pop .16s ease-out}
.modal .m-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--divider)}
.modal .m-head h3{font-size:1.125rem;font-weight:600}
.modal .m-body{padding:22px;font-size:.875rem;color:var(--text-2)}
.modal .m-body p{margin-bottom:12px}
.modal .m-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--divider)}

/* ---- drawer (mobile filters) ---- */
.drawer-overlay{position:fixed;inset:0;background:var(--overlay);z-index:250;animation:fade .15s ease-out}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:var(--bg-elev);z-index:260;padding:20px;overflow-y:auto;
  animation:slide-in .2s ease-out}
@keyframes slide-in{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.drawer h4{font-size:1.125rem;font-weight:600;margin-bottom:12px}
.mobile-filter-btn{display:none}
@media (max-width:1000px){.mobile-filter-btn{display:inline-flex}.filters-desktop{display:none}}

/* ---- footer ---- */
.app-footer{border-top:1px solid var(--divider);background:var(--bg-secondary);margin-top:40px}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px;padding:44px 0 28px}
@media (max-width:1000px){.footer-inner{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-inner{grid-template-columns:1fr}}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-brand p{font-size:.875rem;color:var(--text-2);max-width:34ch}
.footer-col h5{font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;color:var(--text)}
.footer-col a{display:block;font-size:.843rem;color:var(--text-2);padding:4px 0;text-decoration:none}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid var(--divider);padding:18px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.812rem;color:var(--text-2)}
.footer-bottom .sep{opacity:.5}
.footer-bottom button{background:none;border:none;color:var(--text-2);font-size:.812rem;cursor:pointer;font-family:inherit;padding:0}
.footer-bottom button:hover{color:var(--primary)}

/* not found */
.nf-wrap{max-width:560px;margin:64px auto;text-align:center;padding:0 16px}
.nf-wrap .art{font-size:3rem;margin-bottom:16px}
.nf-wrap h1{font-size:1.75rem;font-weight:600;margin-bottom:8px}
.nf-wrap p{color:var(--text-2);margin-bottom:24px}
.whale-blue{color:var(--primary)}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fade .25s ease-out}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}