.sidebar { height: 100%; display: flex; flex-direction: column; background: var(--bg-elevated); border-right: 1px solid var(--border); padding: var(--sp-4) 0; position: relative; z-index: 3; min-width: 0; } .sidebar__brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); } .sidebar__mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: rgba(13, 15, 20, 0.65); box-shadow: inset 0 0 0 1px rgba(200, 169, 110, 0.2); } .sidebar__logo { width: 100%; height: 100%; display: block; } .sidebar__name { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.16em; color: var(--text); } .sidebar__tag { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 0.04em; margin-top: 2px; } .sidebar__section-label { font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); padding: 0 var(--sp-4) var(--sp-2); } .sidebar__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sidebar__link { position: relative; display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); color: var(--text-muted); text-decoration: none; border: 0; font-size: var(--fs-base); letter-spacing: 0.04em; transition: color var(--transition), background var(--transition); } .sidebar__link:hover { background: rgba(200, 169, 110, 0.04); color: var(--text); } .sidebar__link.active, .sidebar__link[aria-current="page"] { color: var(--text); background: rgba(200, 169, 110, 0.06); } .sidebar__ord { display: none; } .sidebar__label { font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.12em; } @media (max-width: 1200px) { .sidebar__tag, .sidebar__footer { display: none; } } @media (max-width: 900px) { .sidebar { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); height: auto; } .sidebar__brand { border-bottom: 0; margin-bottom: 0; padding: 0; } .sidebar__nav { flex-direction: row; gap: var(--sp-1); } .sidebar__link { grid-template-columns: 18px auto; padding: var(--sp-2) var(--sp-3); } .sidebar__active-bar { top: auto; left: 8px; right: 8px; bottom: 0; width: auto; height: 2px; } } @media (max-width: 640px) { .sidebar__label { display: none; } .sidebar__link { grid-template-columns: 18px; padding: var(--sp-2); } } .sidebar__active-bar { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent); } .sidebar__footer { display: none; } .sidebar__status { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; } .sidebar__dot { width: 6px; height: 6px; background: var(--neutral); border-radius: 50%; box-shadow: 0 0 8px rgba(74, 158, 138, 0.6); } .sidebar__build { font-size: var(--fs-xs); color: var(--text-faint); letter-spacing: 0.06em; }