Something went wrong. Try again.
A container registry that uses the AT Protocol for manifest storage and S3 for blob storage.
Something went wrong. Try again.
42 kB · 2320 lines
CSS
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321:root { --primary: #0066cc; --button-primary: #0066cc; --primary-dark: #0052a3; --secondary: #6c757d; --success: #28a745; --success-bg: #d4edda; --warning: #ffc107; --warning-bg: #fff3cd; --danger: #dc3545; --danger-bg: #f8d7da; --bg: #ffffff; --fg: #1a1a1a; --border-dark: #666; --border: #e0e0e0; --code-bg: #f5f5f5; --hover-bg: #f9f9f9; --star: #fbbf24;
/* Navbar colors - stay consistent in dark mode */ --navbar-bg: #1a1a1a; --navbar-fg: #ffffff;
/* Button text color */ --btn-text: #ffffff;
/* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
/* Metadata badge */ --metadata-badge-bg: #f0f0f0; --metadata-badge-text: var(--fg);
/* Version badge */ --version-badge-bg: #f3e5f5; --version-badge-text: #7b1fa2; --version-badge-border: #ba68c8;
/* Hero section colors */ --hero-bg-start: #f8f9fa; --hero-bg-end: #e9ecef;
/* Terminal colors */ --terminal-bg: var(--fg); --terminal-header-bg: #2d2d2d; --terminal-text: var(--border); --terminal-prompt: #4ec9b0; --terminal-comment: #6a9955;}
[data-theme="dark"] { --primary: #60a5fa; --button-primary: #1d4ed8; --primary-dark: #1e40af; --secondary: #9ca3af; --success: #34d399; --success-bg: #064e3b; --warning: #fbbf24; --warning-bg: #422006; --danger: #dc3545; --danger-bg: #7f1d1d; --bg: #2a2a2a; --fg: #e0e0e0; --border-dark: #9ca3af; --border: #404040; --code-bg: #1e1e1e; --hover-bg: #333333; --star: #fbbf24;
/* Navbar colors - stay consistent (always black) */ --navbar-bg: #1a1a1a; --navbar-fg: #ffffff;
/* Button text color */ --btn-text: #ffffff;
/* Shadows - lighter for dark backgrounds */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
/* Metadata badge - darker in dark mode */ --metadata-badge-bg: #1e1e1e; --metadata-badge-text: #ffffff;
/* Version badge - swapped colors with softer purple background */ --version-badge-bg: #9b59b6; --version-badge-text: #ffffff; --version-badge-border: #ba68c8;
/* Hero section colors */ --hero-bg-start: #2d2d2d; --hero-bg-end: #1a1a1a;
/* Terminal colors - keep similar since already dark */ --terminal-bg: #0d0d0d; --terminal-header-bg: #1a1a1a; --terminal-text: #d0d0d0; --terminal-prompt: #4ec9b0; --terminal-comment: #6a9955;}
* { margin: 0; padding: 0; box-sizing: border-box;}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6;}
.container { max-width: 1920px; margin: 0 auto; padding: 20px;}
/* Navigation */.navbar { background: var(--navbar-bg); color: var(--navbar-fg); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-md);}
.nav-brand a { color: var(--navbar-fg); text-decoration: none; font-size: 1.5rem; font-weight: bold;}
.nav-brand .at-protocol { color: var(--primary);}
.nav-search { flex: 1; max-width: 400px; margin: 0 2rem;}
.nav-search input { width: 100%; padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 0.95rem;}
.nav-links { display: flex; gap: 1rem; align-items: center;}
.nav-links a { color: var(--navbar-fg); text-decoration: none; padding: 0.5rem 1rem;}
.nav-links a:hover { background:var(--secondary); border-radius: 4px;}
/* User dropdown */.user-dropdown { position: relative;}
.user-menu-btn { display: flex; align-items: center; gap: 0.5rem; background: transparent; color: var(--navbar-fg); border: none; padding: 0.5rem; cursor: pointer; border-radius: 4px; transition: background 0.2s;}
.user-menu-btn:hover { background:var(--secondary);}
.user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover;}
.user-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: var(--button-primary); display: flex; align-items: center; justify-content: center; font-weight: bold; text-transform: uppercase;}
/* Profile page avatars */.profile-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover;}
.profile-avatar-placeholder { width: 80px; height: 80px; border-radius: 50%; background: var(--button-primary); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 2rem; text-transform: uppercase; color: var(--btn-text);}
.user-profile { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;}
.user-profile h1 { font-size: 1.8rem; margin: 0;}
.user-handle { color: var(--navbar-fg); font-size: 0.95rem;}
.dropdown-arrow { transition: transform 0.2s;}
.user-menu-btn[aria-expanded="true"] .dropdown-arrow { transform: rotate(180deg);}
.dropdown-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; background:var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); min-width: 200px; overflow: hidden; z-index: 1000;}
.dropdown-menu[hidden] { display: none;}
.dropdown-menu .dropdown-item { display: block; width: 100%; padding: 0.75rem 1rem; text-align: left; color: var(--fg); text-decoration: none; border: none; background:var(--bg); cursor: pointer; transition: background 0.2s; font-size: 0.95rem;}
.dropdown-menu .dropdown-item:hover { background: var(--hover-bg);}
.dropdown-divider { margin: 0; border: none; border-top: 1px solid var(--border);}
.dropdown-menu .logout-btn { color: var(--danger); font-weight: 500;}
/* Buttons */button, .btn, .btn-primary, .btn-secondary { padding: 0.5rem 1rem; background: var(--button-primary); color: var(--btn-text); border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 0.95rem; transition: opacity 0.2s;}
button:hover, .btn:hover, .btn-primary:hover, .btn-secondary:hover { opacity: 0.9;}
/* Override nav-links color for primary button */.nav-links .btn-primary { color: var(--btn-text);}
.btn-secondary { background: var(--secondary);}
.btn-link { background: transparent; color: var(--navbar-fg); text-decoration: none;}
.theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center;}
.theme-toggle-btn .theme-icon { width: 1.25rem; height: 1.25rem;}
.delete-btn { background: transparent; border: none; color: var(--danger); padding: 0.25rem 0.5rem; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center;}
.delete-btn:hover { color: var(--danger);}
.delete-btn:hover .lucide { transform: scale(1.2);}
.copy-btn { padding: 0.25rem 0.5rem; background: transparent; color: var(--secondary); border: none; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center;}
.copy-btn:hover { color: var(--primary);}
.copy-btn:hover .lucide { transform: scale(1.2);}
/* Cards */.push-card, .repository-card { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; background:var(--bg); box-shadow: var(--shadow-sm);}
.push-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.75rem;}
.push-user { color: var(--primary); text-decoration: none; font-weight: 500;}
.push-user:hover { text-decoration: underline;}
.push-separator { color: var(--border-dark); margin: 0 0.25rem;}
.push-repo { font-weight: 500; color: var(--primary); text-decoration: none;}
.push-repo:hover { color: var(--primary); text-decoration: underline;}
.push-tag { color: var(--secondary);}
.push-details { display: flex; align-items: center; gap: 1rem; color: var(--border-dark); font-size: 0.9rem; margin-bottom: 0.75rem;}
.digest { font-family: 'Monaco', 'Courier New', monospace; font-size: 0.85rem; background: var(--code-bg); padding: 0.1rem 0.3rem; border-radius: 3px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; position: relative;}
/* Digest with copy button container */.digest-container { display: inline-flex; align-items: center; gap: 0.5rem;}
/* Docker command component */.docker-command { display: inline-flex; position: relative; align-items: center; gap: 0.5rem; background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; margin: 0.5rem 0; max-width: 100%;}
.docker-command-icon { width: 1.25rem; height: 1.25rem; color: var(--secondary); flex-shrink: 0;}
.docker-command-text { font-family: 'Monaco', 'Courier New', monospace; font-size: 0.85rem; color: var(--fg); flex: 0 1 auto; word-break: break-all;}
.docker-command .copy-btn { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: linear-gradient(to right, transparent, var(--code-bg) 30%); padding: 0.5rem; padding-left: 1.5rem; border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;}
.docker-command:hover .copy-btn { opacity: 1; visibility: visible;}
/* Digest tooltip on hover - using title attribute for native browser tooltip */.digest { cursor: default;}
/* Digest copy button */.digest-copy-btn { background: transparent; border: none; color: var(--secondary); padding: 0.1rem 0.4rem; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center;}
.digest-copy-btn:hover { color: var(--primary);}
.digest-copy-btn:hover .lucide { transform: scale(1.2);}
.digest-copy-btn .lucide { width: 0.875rem; height: 0.875rem; transition: transform 0.2s ease;}
.delete-btn .lucide { width: 1rem; height: 1rem; transition: transform 0.2s ease;}
.copy-btn .lucide { width: 1rem; height: 1rem; transition: transform 0.2s ease;}
.separator { color: var(--border);}
/* Push card icon and layout */.push-icon { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0;}
.push-icon-placeholder { width: 48px; height: 48px; border-radius: 8px; background: var(--button-primary); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; text-transform: uppercase; color: var(--btn-text); flex-shrink: 0;}
.push-info { flex: 1; min-width: 0;}
.push-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.25rem;}
.push-title { font-size: 1.1rem; flex: 1;}
.push-description { color: var(--border-dark); font-size: 0.9rem; line-height: 1.4; margin: 0.25rem 0 0 0;}
/* Push stats */.push-stats { display: flex; gap: 1rem; align-items: center; flex-shrink: 0;}
.push-stat { display: flex; align-items: center; gap: 0.35rem; color: var(--border-dark); font-size: 0.9rem;}
.push-stat .star-icon { color: var(--star); font-size: 1rem; width: 1rem; height: 1rem; stroke: var(--star); fill: none;}
.push-stat .star-icon.star-filled { fill: var(--star);}
.push-stat .pull-icon { color: var(--primary); font-size: 1rem; width: 1rem; height: 1rem; stroke: var(--primary);}
.push-stat .stat-count { font-weight: 600; color: var(--fg);}
/* Repository Cards */.repo-header { padding: 1rem; cursor: pointer; display: flex; gap: 1rem; align-items: flex-start; background: var(--hover-bg); border-radius: 8px 8px 0 0; margin: -1rem -1rem 0 -1rem;}
.repo-header:hover { background: var(--hover-bg);}
.repo-icon { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0;}
.repo-info { flex: 1; min-width: 0;}
.repo-title-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem;}
.repo-header h2 { font-size: 1.3rem; margin: 0;}
.repo-title-link { color: var(--fg); text-decoration: none;}
.repo-title-link:hover { color: var(--primary); text-decoration: underline;}
.repo-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 500; border-radius: 12px; white-space: nowrap;}
.license-badge { background: var(--code-bg); color: var(--primary); border: 1px solid #90caf9;}
/* Clickable license badges */a.license-badge { text-decoration: none; cursor: pointer; transition: all 0.2s ease;}
a.license-badge:hover { background: var(--button-primary); color: var(--btn-text); border-color: var(--button-primary); transform: translateY(-1px); box-shadow: var(--shadow-md);}
.version-badge { background: var(--version-badge-bg); color: var(--version-badge-text); border: 1px solid var(--version-badge-border);}
.repo-description { color: var(--border-dark); font-size: 0.95rem; margin: 0.25rem 0 0.5rem 0; line-height: 1.4;}
.repo-stats { color:var(--border-dark); font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;}
.repo-link { color: var(--primary); text-decoration: none; font-weight: 500;}
.repo-link:hover { text-decoration: underline;}
.expand-btn { background: transparent; color: var(--fg); padding: 0.25rem 0.5rem; font-size: 1.2rem;}
.repo-details { padding-top: 1rem;}
.tags-section, .manifests-section { margin-bottom: 1.5rem;}
.tags-section h3, .manifests-section h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--secondary);}
.tag-row, .manifest-row { display: flex; gap: 1rem; align-items: center; padding: 0.5rem; border-bottom: 1px solid var(--border);}
.tag-row:last-child, .manifest-row:last-child { border-bottom: none;}
.tag-name { font-weight: 500; min-width: 100px;}
.tag-arrow { color: var(--border-dark);}
/* Note: .tag-digest and .manifest-digest styling now handled by .digest class above */
/* Settings Page */.settings-page { max-width: 800px; margin: 0 auto;}
.settings-section { background:var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm);}
.settings-section h2 { font-size: 1.3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);}
.form-group { margin-bottom: 1rem;}
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--secondary);}
.form-group input,.form-group select { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;}
.form-group small { display: block; margin-top: 0.25rem; color: var(--border-dark); font-size: 0.85rem;}
.info-row { margin-bottom: 0.75rem;}
.info-row strong { display: inline-block; min-width: 150px; color: var(--secondary);}
/* Modal */.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000;}
.modal-content { background: var(--bg); padding: 2rem; border-radius: 8px; max-width: 800px; max-height: 80vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg);}
.modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--secondary);}
.modal-close:hover { color: var(--fg);}
.manifest-json { background: var(--code-bg); padding: 1rem; border-radius: 4px; overflow-x: auto; font-family: 'Monaco', 'Courier New', monospace; font-size: 0.85rem; border: 1px solid var(--border);}
/* Loading and Empty States */.loading { text-align: center; padding: 2rem; color: var(--border-dark);}
.empty-state { text-align: center; padding: 3rem 2rem; background: var(--hover-bg); border-radius: 8px; border: 1px solid var(--border);}
.empty-state p { margin-bottom: 1rem; font-size: 1.1rem; color: var(--secondary);}
.empty-state pre { background: var(--code-bg); padding: 1rem; border-radius: 4px; display: inline-block;}
.empty-message { color: var(--border-dark); font-style: italic; padding: 1rem;}
/* Status Messages / Callouts */.note { background: var(--warning-bg); border-left: 4px solid var(--warning); padding: 1rem; margin: 1rem 0;}
.note a { color: var(--warning); text-decoration: underline; font-weight: 500;}
.note a:hover { color: var(--primary);}
.note a:visited { color: var(--warning);}
.success { background: var(--success-bg); border-left: 4px solid var(--success); padding: 1rem; margin: 1rem 0; display: flex; align-items: center; gap: 0.5rem;}
.success .lucide { width: 1.25rem; height: 1.25rem; color: var(--success); stroke: var(--success); flex-shrink: 0;}
.error { background: var(--danger-bg); border-left: 4px solid var(--danger); padding: 1rem; margin: 1rem 0;}
/* Load More Button */.load-more { width: 100%; margin-top: 1rem; background: var(--secondary);}
/* Login Page */.login-page { max-width: 450px; margin: 4rem auto; padding: 2rem;}
.login-page h1 { font-size: 2rem; margin-bottom: 0.5rem; text-align: center;}
.login-page > p { text-align: center; color: var(--secondary); margin-bottom: 2rem;}
.login-form { background:var(--bg); padding: 2rem; border-radius: 8px; border: 1px solid var(--border); box-shadow: var(--shadow-sm);}
.login-form .form-group { margin-bottom: 1.5rem;}
.login-form label { display: block; margin-bottom: 0.5rem; font-weight: 500;}
.login-form input[type="text"] { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;}
.login-form input[type="text"]:focus { outline: none; border-color: var(--primary);}
.btn-large { width: 100%; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500;}
.login-help { text-align: center; margin-top: 2rem; color: var(--secondary);}
.login-help a { color: var(--primary); text-decoration: none;}
.login-help a:hover { text-decoration: underline;}
/* Login Typeahead */.login-form .form-group { position: relative;}
.typeahead-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 4px 4px; box-shadow: var(--shadow-md); max-height: 300px; overflow-y: auto; z-index: 1000; margin-top: -1px;}
.typeahead-header { padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--secondary); border-bottom: 1px solid var(--border);}
.typeahead-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; cursor: pointer; transition: background-color 0.15s ease; border-bottom: 1px solid var(--border);}
.typeahead-item:last-child { border-bottom: none;}
.typeahead-item:hover,.typeahead-item.typeahead-focused { background: var(--hover-bg); border-left: 3px solid var(--primary); padding-left: calc(0.75rem - 3px);}
.typeahead-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.typeahead-text { flex: 1; min-width: 0;}
.typeahead-displayname { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.typeahead-handle { font-size: 0.875rem; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.typeahead-recent .typeahead-handle { font-size: 1rem; color: var(--text);}
.typeahead-loading { padding: 0.75rem; text-align: center; color: var(--secondary); font-size: 0.875rem;}
/* Repository Page */.repository-page { /* Let container's max-width (1200px) control page width */ margin: 0 auto;}
.repository-header { background:var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm);}
.repo-hero { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem;}
.repo-hero-icon { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; flex-shrink: 0;}
.repo-hero-icon-placeholder { width: 80px; height: 80px; border-radius: 12px; background: var(--button-primary); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 2.5rem; text-transform: uppercase; color: var(--btn-text); flex-shrink: 0;}
.repo-hero-info { flex: 1;}
.repo-hero-info h1 { font-size: 2rem; margin: 0 0 0.5rem 0;}
.owner-link { color: var(--primary); text-decoration: none;}
.owner-link:hover { text-decoration: underline;}
.repo-separator { color: var(--border-dark); margin: 0 0.25rem;}
.repo-name { color: var(--fg);}
.repo-hero-description { color: var(--border-dark); font-size: 1.1rem; line-height: 1.5; margin: 0.5rem 0 0 0;}
.repo-info-row { display: flex; gap: 2rem; align-items: center; margin-top: 1.5rem;}
.repo-actions { flex: 0 0 auto;}
.star-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--bg); border: 2px solid var(--border); border-radius: 6px; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; color: var(--fg);}
.star-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--hover-bg);}
.star-btn:disabled { opacity: 0.6; cursor: not-allowed;}
.star-btn.starred { border-color:var(--star); background: var(--code-bg);}
.star-btn.starred:hover:not(:disabled) { background: var(--hover-bg);}
/* Lucide icon base styles */.lucide { display: inline-block; width: 1em; height: 1em; vertical-align: middle; stroke-width: 2; transition: transform 0.2s ease;}
/* Star icon styles */.star-icon { font-size: 1.25rem; line-height: 1; transition: transform 0.2s ease; color: var(--star); width: 1.25rem; height: 1.25rem; stroke: var(--star); fill: none;}
.star-icon.star-filled { fill: var(--star);}
.star-btn:hover:not(:disabled) .star-icon { transform: scale(1.1);}
.star-count { font-weight: 600; color: var(--fg);}
.repo-metadata { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; flex: 1; justify-content: flex-end;}
.metadata-badge { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; font-size: 0.85rem; font-weight: 500; border-radius: 16px; white-space: nowrap;}
.metadata-link { color: var(--primary); text-decoration: none; font-weight: 500;}
.metadata-link:hover { text-decoration: underline;}
.pull-command-section { padding-top: 1rem; border-top: 1px solid var(--border);}
.pull-command-section h3 { font-size: 1rem; margin-bottom: 0.75rem; color: var(--secondary);}
.repo-section { background:var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm);}
.repo-section h2 { font-size: 1.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);}
.tags-list, .manifests-list { display: flex; flex-direction: column; gap: 1rem;}
.tag-item, .manifest-item { border: 1px solid var(--border); border-radius: 6px; padding: 1rem; background: var(--hover-bg);}
.tag-item-header, .manifest-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;}
.tag-name-large { font-size: 1.2rem; font-weight: 600; color: var(--fg);}
.tag-timestamp { color: var(--border-dark); font-size: 0.9rem;}
.tag-item-details { margin-bottom: 0.75rem;}
.manifest-item-details { display: flex; gap: 0.5rem; align-items: center; color: var(--border-dark); font-size: 0.9rem; margin-top: 0.5rem;}
/* Offline manifest badge */.offline-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning); border-radius: 4px; font-size: 0.85rem; font-weight: 600; margin-left: 0.5rem;}
.offline-badge .lucide { width: 0.875rem; height: 0.875rem;}
/* Checking manifest badge (health check in progress) */.checking-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; background: #e3f2fd; color: #1976d2; border: 1px solid #1976d2; border-radius: 4px; font-size: 0.85rem; font-weight: 600; margin-left: 0.5rem;}
.checking-badge .lucide { width: 0.875rem; height: 0.875rem;}
/* Hide offline manifests by default */.manifest-item[data-reachable="false"] { display: none;}
/* Show offline manifests when toggle is checked */.manifests-list.show-offline .manifest-item[data-reachable="false"] { display: block; opacity: 0.6;}
/* Show offline images toggle styling */.show-offline-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none;}
.show-offline-toggle input[type="checkbox"] { cursor: pointer;}
.show-offline-toggle span { font-size: 0.9rem; color: var(--border-dark);}
.manifest-detail-label { font-weight: 500; color: var(--secondary);}
/* Multi-architecture badges */.badge-multi { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 600; border-radius: 12px; background: var(--button-primary); color: var(--btn-text); white-space: nowrap; margin-left: 0.5rem;}
.platform-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 4px; background: var(--code-bg); color: var(--fg); border: 1px solid var(--border); white-space: nowrap; font-family: 'Monaco', 'Courier New', monospace;}
.platforms-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;}
.manifest-type { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 500; color: var(--secondary);}
.manifest-type .lucide { width: 0.95rem; height: 0.95rem;}
.platform-count { color: var(--border-dark); font-size: 0.85rem; font-style: italic;}
.text-muted { color: var(--border-dark); font-style: italic;}
.badge-attestation { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; background: #f3e8ff; color: #7c3aed; border: 1px solid #c4b5fd; border-radius: 4px; font-size: 0.85rem; font-weight: 600; margin-left: 0.5rem;}
.badge-attestation .lucide { width: 0.9rem; height: 0.9rem;}
/* Featured Repositories Section */.featured-section { margin-bottom: 3rem;}
.featured-section h1 { font-size: 1.8rem; margin-bottom: 1.5rem;}
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem;}
.featured-card { border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; background: var(--bg); box-shadow: var(--shadow-sm); transition: all 0.2s ease; text-decoration: none; color: var(--fg); display: flex; flex-direction: column; justify-content: space-between; min-height: 180px;}
.featured-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-2px);}
.featured-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem;}
.featured-icon { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0;}
.featured-icon-placeholder { width: 48px; height: 48px; border-radius: 8px; background: var(--button-primary); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.5rem; text-transform: uppercase; color: var(--btn-text); flex-shrink: 0;}
.featured-info { flex: 1; min-width: 0;}
.featured-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3;}
.featured-owner { color: var(--primary);}
.featured-separator { color: var(--border-dark); margin: 0 0.25rem;}
.featured-name { color: var(--fg);}
.featured-description { color: var(--border-dark); font-size: 0.9rem; line-height: 1.4; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;}
.featured-stats { display: flex; gap: 1.5rem; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border);}
.featured-stat { display: flex; align-items: center; gap: 0.5rem; color: var(--border-dark); font-size: 0.95rem;}
.featured-stat .star-icon { color: var(--star); font-size: 1.1rem; width: 1.1rem; height: 1.1rem; stroke: var(--star); fill: none;}
.featured-stat .star-icon.star-filled { fill: var(--star);}
.featured-stat .pull-icon { color: var(--primary); font-size: 1.1rem; width: 1.1rem; height: 1.1rem; stroke: var(--primary);}
.featured-stat .stat-count { font-weight: 600; color: var(--fg);}
/* Hero Section */.hero-section { background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%); padding: 4rem 2rem; border-bottom: 1px solid var(--border);}
.hero-content { max-width: 900px; margin: 0 auto; text-align: center;}
.hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--fg); line-height: 1.2;}
.hero-subtitle { font-size: 1.2rem; color: var(--border-dark); margin-bottom: 3rem; line-height: 1.6;}
.hero-terminal { max-width: 600px; margin: 0 auto 2.5rem; background: var(--terminal-bg); border-radius: 8px; box-shadow: var(--shadow-lg); overflow: hidden;}
.terminal-header { background: var(--terminal-header-bg); padding: 0.75rem 1rem; display: flex; gap: 0.5rem; align-items: center;}
.terminal-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border-dark);}
.terminal-dot:nth-child(1) { background: #ff5f56;}
.terminal-dot:nth-child(2) { background: #ffbd2e;}
.terminal-dot:nth-child(3) { background: #27c93f;}
.terminal-content { padding: 1.5rem; margin: 0; font-family: 'Monaco', 'Courier New', monospace; font-size: 0.95rem; line-height: 1.8; color: var(--terminal-text); overflow-x: auto;}
.terminal-prompt { color: var(--terminal-prompt); font-weight: bold;}
.terminal-comment { color: var(--terminal-comment); font-style: italic;}
.hero-actions { display: flex; gap: 1rem; justify-content: center; margin-bottom: 4rem;}
.btn-hero-primary,.btn-hero-secondary { padding: 0.9rem 2rem; font-size: 1.1rem; font-weight: 600; border-radius: 6px; text-decoration: none; transition: all 0.2s ease; display: inline-block;}
.btn-hero-primary { background: var(--button-primary); color: var(--btn-text); border: 2px solid var(--button-primary);}
.btn-hero-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);}
.btn-hero-secondary { background: transparent; color: var(--primary); border: 2px solid var(--button-primary);}
.btn-hero-secondary:hover { background: var(--button-primary); color: var(--btn-text); transform: translateY(-2px);}
.hero-benefits { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;}
.benefit-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2rem 1.5rem; text-align: center; transition: all 0.2s ease;}
.benefit-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-4px);}
.benefit-icon { font-size: 3rem; margin-bottom: 1rem; line-height: 1;}
.benefit-icon .lucide { width: 3rem; height: 3rem; stroke-width: 1.5; color: var(--primary); stroke: var(--primary);}
.benefit-card h3 { font-size: 1.2rem; margin-bottom: 0.75rem; color: var(--fg);}
.benefit-card p { color: var(--border-dark); font-size: 0.95rem; line-height: 1.5; margin: 0;}
/* Install Page */.install-page { max-width: 800px; margin: 0 auto; padding: 2rem 1rem;}
.install-section { margin: 2rem 0;}
.install-section h2 { margin-bottom: 1rem; color: var(--fg);}
.install-section h3 { margin: 1.5rem 0 0.5rem; color: var(--border-dark); font-size: 1.1rem;}
.install-section a { color: var(--primary); text-decoration: underline; font-weight: 500;}
.install-section a:hover { color: var(--primary-dark);}
.install-section a:visited { color: var(--primary);}
.code-block { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 1rem; margin: 0.5rem 0 1rem; overflow-x: auto;}
.code-block code { font-family: 'Monaco', 'Menlo', monospace; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap;}
.platform-tabs { display: flex; gap: 0.5rem; border-bottom: 2px solid var(--border); margin-bottom: 1rem;}
.platform-tab { padding: 0.5rem 1rem; cursor: pointer; border: none; background: none; font-size: 1rem; color: var(--border-dark); transition: all 0.2s;}
.platform-tab:hover { color: var(--fg);}
.platform-tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); margin-bottom: -2px;}
.platform-content { display: none;}
.platform-content.active { display: block;}
/* Responsive */@media (max-width: 768px) { .navbar { flex-direction: column; gap: 1rem; }
.nav-search { max-width: 100%; margin: 0; }
.push-details { flex-wrap: wrap; }
.tag-row, .manifest-row { flex-wrap: wrap; }
.login-page { margin: 2rem auto; padding: 1rem; }
.repo-hero { flex-direction: column; }
.repo-hero-info h1 { font-size: 1.5rem; }
.tag-item-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.manifest-item-details { flex-direction: column; align-items: flex-start; }
.featured-grid { grid-template-columns: 1fr; gap: 1rem; }
.featured-card { min-height: auto; }
.hero-section { padding: 3rem 1.5rem; }
.hero-title { font-size: 2rem; }
.hero-subtitle { font-size: 1rem; margin-bottom: 2rem; }
.hero-terminal { margin-bottom: 2rem; }
.terminal-content { font-size: 0.85rem; padding: 1rem; }
.hero-actions { flex-direction: column; margin-bottom: 3rem; }
.btn-hero-primary, .btn-hero-secondary { width: 100%; text-align: center; }
.hero-benefits { grid-template-columns: 1fr; gap: 1.5rem; }}
@media (max-width: 1024px) and (min-width: 769px) { .featured-grid { grid-template-columns: repeat(2, 1fr); }
.hero-benefits { grid-template-columns: repeat(3, 1fr); }}
/* README and Repository Layout */.repo-content-layout { display: grid; grid-template-columns: 7fr 3fr; gap: 2rem; margin-top: 2rem;}
.readme-section { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; min-width: 0; box-sizing: border-box;}
.readme-section h2 { margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);}
.readme-content { overflow-wrap: break-word; max-width: 100%; box-sizing: border-box;}
.repo-sidebar { display: flex; flex-direction: column; gap: 1.5rem;}
/* Markdown Styling */.markdown-body { font-size: 1rem; line-height: 1.6; word-wrap: break-word;}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6 { margin-top: 1.5rem; margin-bottom: 1rem; font-weight: 600; line-height: 1.25;}
.markdown-body h1 { font-size: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem;}
.markdown-body h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem;}
.markdown-body h3 { font-size: 1.25rem;}
.markdown-body h4 { font-size: 1rem;}
.markdown-body h5 { font-size: 0.875rem;}
.markdown-body h6 { font-size: 0.85rem; color: var(--secondary);}
.markdown-body p { margin-bottom: 1rem;}
.markdown-body ul,.markdown-body ol { margin-bottom: 1rem; padding-left: 2rem;}
.markdown-body li { margin-bottom: 0.25rem;}
.markdown-body li > p { margin-bottom: 0.5rem;}
.markdown-body a { color: var(--primary); text-decoration: none;}
.markdown-body a:hover { text-decoration: underline;}
.markdown-body code { background: var(--code-bg); padding: 0.2rem 0.4rem; border-radius: 3px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.9em;}
.markdown-body pre { background: var(--code-bg); padding: 1rem; border-radius: 6px; overflow-x: auto; margin-bottom: 1rem; max-width: 100%; box-sizing: border-box;}
.markdown-body pre code { background: none; padding: 0; font-size: 0.875rem;}
.markdown-body blockquote { padding: 0 1rem; margin-bottom: 1rem; color: var(--secondary); border-left: 4px solid var(--border);}
.markdown-body table { border-collapse: collapse; width: 100%; margin-bottom: 1rem;}
.markdown-body table th,.markdown-body table td { padding: 0.5rem 1rem; border: 1px solid var(--border); text-align: left;}
.markdown-body table th { background: var(--code-bg); font-weight: 600;}
.markdown-body table tr:nth-child(even) { background: var(--hover-bg);}
.markdown-body img { max-width: 100%; height: auto; margin: 1rem 0;}
.markdown-body hr { height: 0.25rem; margin: 1.5rem 0; background: var(--border); border: 0;}
/* Task lists */.markdown-body input[type="checkbox"] { margin-right: 0.5rem;}
.markdown-body .task-list-item { list-style-type: none;}
.markdown-body .task-list-item input { margin: 0 0.2rem 0.25rem -1.6rem; vertical-align: middle;}
/* Responsive Layout */@media (max-width: 1024px) { .repo-content-layout { grid-template-columns: 1fr; }
.repo-sidebar { order: -1; /* Show sidebar first on mobile */ }}
@media (max-width: 768px) { .readme-section { padding: 1rem; }
.markdown-body h1 { font-size: 1.5rem; }
.markdown-body h2 { font-size: 1.25rem; }
.markdown-body pre { padding: 0.75rem; }}