/* /* Pills Navigation Block */ */
/* .pills-nav { */
/*   padding: 0; */
/* } */
/**/
/* .pills-list { */
/*   margin: 0; */
/*   padding: 0; */
/* } */
/**/
/* /* Pill styling */ */
/* .pill { */
/*   display: flex; */
/*   flex-direction: column; */
/*   justify-content: space-between; */
/**/
/*   width: 178px; */
/*   min-height: 104px; */
/**/
/*   padding: var(--space-2xs); */
/**/
/*   border-radius: 16px; */
/**/
/*   color: white; */
/*   text-decoration: none; */
/*   font-weight: 500; */
/**/
/*   position: relative; */
/*   transition: all 0.2s ease; */
/*   overflow: hidden; */
/* } */
/**/
/* .pill:hover { */
/*   transform: translateY(-2px); */
/*   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); */
/* } */
/**/
/* .pill:focus { */
/*   outline: 3px solid rgba(255, 255, 255, 0.6); */
/*   outline-offset: 2px; */
/* } */
/**/
/* /* Pill content positioning */ */
/* .pill__number { */
/*   font-size: 1.5rem; */
/*   font-weight: 700; */
/*   opacity: 0.9; */
/* } */
/**/
/* .pill__label { */
/*   font-size: 1rem; */
/*   font-weight: 600; */
/*   text-transform: uppercase; */
/*   letter-spacing: 0.05em; */
/* } */
/**/
/* /* Section-specific colors */ */
/* .pill--all { */
/*   background-color: var(--color-text-secondary); */
/*   opacity: 0.7; */
/*   font-size: 0.9em; */
/* } */
/**/
/* .pill--all:hover { */
/*   opacity: 1; */
/* } */
/**/
/* .pill--inbox { */
/*   background-color: var(--color-inbox); */
/* } */
/**/
/* .pill--reading-queue { */
/*   background-color: var(--color-reading-queue); */
/* } */
/**/
/* .pill--archive { */
/*   background-color: var(--color-archive); */
/* } */
/**/
/* /* Active state */ */
/* .pill--active { */
/*   transform: translateY(-2px); */
/*   border: 2px solid rgba(255, 255, 255, 0.3); */
/* } */
/**/
/* .pill--active::before { */
/*   content: ""; */
/*   position: absolute; */
/*   top: 0; */
/*   left: 0; */
/*   right: 0; */
/*   bottom: 0; */
/*   background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%); */
/*   pointer-events: none; */
/* } */
/**/
/* .pill--active::after { */
/*   content: ""; */
/*   position: absolute; */
/*   top: 8px; */
/*   right: 8px; */
/*   width: 8px; */
/*   height: 8px; */
/*   background-color: rgba(255, 255, 255, 0.8); */
/*   border-radius: 50%; */
/* } */
/**/
/* /* Simple navigation link */ */
/* .nav-link { */
/*   display: block; */
/*   margin-top: var(--space-xl); */
/*   padding: var(--space-2xs) 0; */
/*   color: var(--color-text-secondary); */
/*   text-decoration: none; */
/*   font-size: var(--step--1); */
/*   font-weight: 400; */
/*   border-bottom: 1px solid transparent; */
/*   transition: all 0.2s ease; */
/* } */
/**/
/* .nav-link:hover { */
/*   color: var(--color-text-primary); */
/*   border-bottom-color: var(--color-text-secondary); */
/* } */
/**/
/* .nav-link:focus { */
/*   outline: 2px solid var(--color-reading-queue); */
/*   outline-offset: 2px; */
/* } */
/**/
/* /* Responsive adjustments */ */
/* @media (max-width: 768px) { */
/*   .pills-list { */
/*     flex-direction: row; */
/*     flex-wrap: wrap; */
/*     gap: var(--space-s, 0.5rem); */
/*   } */
/**/
/*   .pill { */
/*     width: calc(50% - var(--space-xs, 0.25rem)); */
/*     min-height: 80px; */
/*   } */
/**/
/*   .pill__number { */
/*     font-size: 1.25rem; */
/*   } */
/**/
/*   .pill__label { */
/*     font-size: 0.875rem; */
/*   } */
/**/
/*   .pill-action { */
/*     width: 100%; */
/*     margin-top: var(--space-m, 1rem); */
/*   } */
/* } */
/**/
/* @media (max-width: 480px) { */
/*   .pill { */
/*     width: 100%; */
/*     min-height: 70px; */
/*   } */
/**/
/*   .pill__number { */
/*     font-size: 1.125rem; */
/*   } */
/**/
/*   .pill__label { */
/*     font-size: 0.8125rem; */
/*   } */
/* } */