Template:AccessoryTypeEntryStyles.css

.accessory-type-entry {

   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.25rem;
   padding: 1rem 0.75rem;
   background: #ffffff;
   border: 2px solid #f59e0b;
   border-radius: 0.75rem;
   font-weight: 600;
   font-size: 0.9375rem;
   color: #b45309;
   text-align: center;
   box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.2), 0 2px 4px -2px rgba(245, 158, 11, 0.15);
   cursor: pointer;
   transition: all 0.2s ease;

}

.accessory-type-entry:hover {

   background: #fffbeb;
   border-color: #d97706;
   box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.25), 0 4px 6px -4px rgba(245, 158, 11, 0.2);
   transform: translateY(-3px);

}

.accessory-type-entry:active {

   transform: translateY(0);
   box-shadow: 0 2px 4px -1px rgba(245, 158, 11, 0.15);

}

.accessory-type-entry-link {

   position: absolute;
   inset: 0;
   z-index: 1;

}

.accessory-type-entry-count {

   display: block;
   font-weight: 500;
   font-size: 0.8125rem;
   color: #475569;
   margin-top: 0.125rem;

}

/* ===== DARK MODE - User preference ===== */

html.skin-theme-clientpref-night .accessory-type-entry {

   background: #1e293b;
   border-color: #f59e0b;
   color: #fbbf24;

}

html.skin-theme-clientpref-night .accessory-type-entry:hover {

   background: #78350f;
   border-color: #fbbf24;
   box-shadow: 0 10px 15px -3px rgba(251, 191, 36, 0.3), 0 4px 6px -4px rgba(251, 191, 36, 0.2);

}

html.skin-theme-clientpref-night .accessory-type-entry-count {

   color: #94a3b8;

}

/* ===== DARK MODE - OS preference ===== */

@media (prefers-color-scheme: dark) {

   html.skin-theme-clientpref-os .accessory-type-entry {
       background: #1e293b;
       border-color: #f59e0b;
       color: #fbbf24;
   }

   html.skin-theme-clientpref-os .accessory-type-entry:hover {
       background: #78350f;
       border-color: #fbbf24;
       box-shadow: 0 10px 15px -3px rgba(251, 191, 36, 0.3), 0 4px 6px -4px rgba(251, 191, 36, 0.2);
   }

   html.skin-theme-clientpref-os .accessory-type-entry-count {
       color: #94a3b8;
   }

}