.garage-sheet { display: grid; grid-template-rows: auto 1fr; }
.garage-layout { display: grid; min-height: 0; grid-template-columns: 28% 12% 32% 28%; }
.bike-bay { display: flex; align-items: center; justify-content: center; flex-direction: column; border-right: 1px solid var(--ink); background: #c5bea9; }
.bike-bay > span { margin-top: 22px; padding: 5px 9px; border: 1px solid var(--ink); font: 850 9px ui-monospace, monospace; letter-spacing: .09em; }
.loadout-tools { display: flex; gap: 6px; margin-top: 12px; }
.bike-preview { position: relative; width: 240px; height: 180px; transform: rotate(-2deg); }
.bike-preview::after { content: ""; position: absolute; left: 22px; right: 12px; bottom: 18px; height: 12px; border-radius: 50%; background: rgba(23,34,30,.2); filter: blur(4px); }
.bike-wheel { position: absolute; z-index: 2; bottom: 24px; width: 72px; height: 72px; border: 7px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 2px #b7af9a; }.bike-wheel::before, .bike-wheel::after { content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 54px; background: rgba(23,34,30,.5); transform-origin: 0 27px; }.bike-wheel::after { transform: rotate(90deg); }.bike-wheel.rear { left: 17px; }.bike-wheel.front { right: 12px; }
.bike-frame { position: absolute; z-index: 3; left: 70px; bottom: 60px; width: 84px; height: 58px; border: 8px solid var(--route); transform: skew(-13deg); clip-path: polygon(0 0, 100% 48%, 72% 100%, 4% 100%); }
.bike-frame::after { content: ""; position: absolute; right: -21px; top: -28px; width: 8px; height: 65px; background: var(--ink); transform: skew(13deg) rotate(-12deg); }
.bike-rack { position: absolute; z-index: 4; left: 27px; bottom: 94px; width: 70px; height: 40px; border: 4px solid var(--ink); background: var(--dispatch); box-shadow: inset 0 0 0 4px rgba(255,255,255,.22); }
.garage-categories { display: flex; flex-direction: column; border-right: 1px solid var(--ink); background: var(--paper-dark); }
.garage-category { min-height: 60px; padding: 8px; border-bottom: 1px solid rgba(23,34,30,.28); background: transparent; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.garage-category:hover { background: rgba(255,255,255,.36); }.garage-category.active { color: var(--paper-light); background: var(--ink); }
.parts-list { padding: 15px; overflow-y: auto; border-right: 2px solid var(--ink); }
.part-card { position: relative; width: 100%; min-height: 94px; margin-bottom: 8px; padding: 11px 13px; border: 1px solid var(--ink); background: rgba(255,253,243,.55); text-align: left; }
.part-card:hover { background: var(--paper-light); }.part-card.equipped { color: var(--paper-light); background: var(--green); }.part-card h3 { margin: 0 0 4px; font-size: 14px; }.part-card p { max-width: 78%; margin: 0; color: var(--muted-ink); font-size: 9px; line-height: 1.35; }.part-card.equipped p { color: #d4e3d9; }.part-card .price { position: absolute; right: 10px; bottom: 10px; font-size: 14px; font-weight: 900; }
.bike-stats { padding: 20px; overflow-y: auto; }.bike-stats h3 { margin-bottom: 22px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-size: 14px; text-transform: uppercase; }
.stat-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 8px; margin-bottom: 13px; }.stat-row span { font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }.stat-track { height: 9px; background: rgba(23,34,30,.14); }.stat-track i { display: block; width: 50%; height: 100%; background: var(--ink); transition: width .26s ease; }.stat-row.better .stat-track i { background: var(--green); }.stat-row.worse .stat-track i { background: var(--route); }
.bike-stats > p { margin-top: 26px; padding: 10px; border-left: 4px solid var(--dispatch); background: rgba(255,255,255,.3); color: var(--muted-ink); font-size: 10px; line-height: 1.5; }