@howssatoshi/quantumcss 1.7.5 → 1.8.0

package/src/styles/starlight.css

@@ -1,44 +1,60 @@
-/* Starlight UI - Premium Components */
+/*!
+ * QuantumCSS Theme Layer
+ * Theme: Starlight UI (Premium)
+ * 
+ * ROLE: 
+ * 1. Injects brand-specific aesthetics.
+ * 2. Maps brand tokens to semantic core layer.
+ * 3. Defines theme-specific layout extensions.
+ */
+
+/* 1. Starlight Theme Layer (Brand Mapping) */
+:root {
+  --q-color-primary: var(--q-color-starlight-blue);
+  --q-color-primary-hover: var(--q-color-starlight-peach);
+  --q-color-link: var(--q-color-starlight-blue);
+  --q-color-link-hover: var(--q-color-starlight-peach);
+  --q-gradient-primary: linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%);
+  --q-color-text-inverse: #000;
+}
+
+html[data-theme="light"] {
+  --q-color-text-inverse: #fff;
+}
 
 /* Links */
 a {
-  color: var(--q-color-starlight-blue);
+  color: var(--q-color-link);
   text-decoration: none;
-  transition: all var(--q-transition-base);
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
   position: relative;
 }
 
 a:hover {
-  color: var(--q-color-starlight-peach);
-  text-shadow: 0 0 8px rgb(255 179 138 / 40%);
+  color: var(--q-color-link-hover);
+  text-shadow: 0 0 8px color-mix(in srgb, var(--q-color-link-hover), transparent 60%);
 }
 
 a:active {
   transform: scale(0.98);
 }
 
-html[data-theme="light"] a {
-  color: var(--q-color-starlight-blue);
-}
-
-html[data-theme="light"] a:hover {
-  color: var(--q-color-starlight-peach);
-}
-
-/* 1. Starlight Card */
+/* 2. Starlight Components Refactored to Semantic Tokens */
 .starlight-card {
-  background: var(--q-glass-bg);
-  border: 1px solid var(--q-glass-border);
+  background: var(--q-color-surface);
+  border: 1px solid var(--q-color-border);
   border-radius: var(--q-radius-2xl);
   padding: var(--q-space-10);
   backdrop-filter: var(--q-glass-blur);
   -webkit-backdrop-filter: var(--q-glass-blur);
   position: relative;
-  transition: border-color var(--q-transition-base), transform var(--q-transition-base), background-color var(--q-transition-base);
+  transition: border-color var(--q-duration-base) var(--q-ease-in-out), 
+              transform var(--q-duration-base) var(--q-ease-in-out), 
+              background-color var(--q-duration-base) var(--q-ease-in-out);
 }
 
 .starlight-card:hover {
-  background-color: rgba(255, 255, 255, 0.04);
+  background-color: var(--q-color-surface-elevated);
 }
 
 /* ... existing code ... */
@@ -71,7 +87,7 @@ html[data-theme="light"] .starlight-card {
   border: 1px solid rgb(255 255 255 / 20%);
   border-radius: 0.375rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -126,7 +142,7 @@ html[data-theme="light"] .radio-starlight {
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
   z-index: 800;
   box-shadow: 0 4px 15px rgb(0 0 0 / 40%);
 }
@@ -249,7 +265,7 @@ html[data-theme="light"] .starlight-dialog {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
   padding: 0;
 }
 
@@ -301,7 +317,7 @@ html[data-theme="light"] .dialog-content {
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--q-duration-slow) var(--q-ease-in-out);
   pointer-events: none;
   will-change: backdrop-filter, transform, opacity;
 }
@@ -322,7 +338,7 @@ html[data-theme="light"] .dialog-content {
   padding: 0.625rem 1rem;
   border-radius: 0.5rem;
   color: var(--q-text-primary, rgba(255, 255, 255, 0.7));
-  transition: all 0.2s ease;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
   text-align: left;
   background: transparent;
   border: none;
@@ -444,15 +460,15 @@ html[data-theme="light"] .code-window-title {
 }
 
 .accordion-starlight.accordion-item:hover {
-  border-color: rgb(0 212 255 / 30%);
+  border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
   background: rgb(255 255 255 / 4%);
-  box-shadow: 0 0 20px rgb(0 212 255 / 5%);
+  box-shadow: 0 0 20px color-mix(in srgb, var(--q-color-starlight-blue), transparent 95%);
 }
 
 .accordion-starlight.accordion-item.active {
   border-color: var(--q-color-starlight-blue);
-  background: rgb(0 212 255 / 3%);
-  box-shadow: 0 0 30px rgb(0 212 255 / 10%), inset 0 0 20px rgb(0 212 255 / 5%);
+  background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 97%);
+  box-shadow: 0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%), inset 0 0 20px color-mix(in srgb, var(--q-color-starlight-blue), transparent 95%);
 }
 
 .accordion-starlight .accordion-header {
@@ -465,8 +481,8 @@ html[data-theme="light"] .code-window-title {
 }
 
 .accordion-starlight.active .accordion-header {
-  background: linear-gradient(to right, rgb(255 179 138 / 15%), rgb(0 212 255 / 15%)) !important;
-  border-bottom: 1px solid rgb(0 212 255 / 20%);
+  background: linear-gradient(to right, color-mix(in srgb, var(--q-color-starlight-peach), transparent 55%), color-mix(in srgb, var(--q-color-starlight-blue), transparent 55%)) !important;
+  border-bottom: 1px solid color-mix(in srgb, var(--q-color-starlight-blue), transparent 80%);
 }
 
 .accordion-starlight .accordion-content {
@@ -575,7 +591,7 @@ html[data-theme="light"] .search-icon {
   align-items: flex-end;
   padding: 1rem;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity var(--q-duration-slow) var(--q-ease-in-out);
 }
 
 .gallery-item:hover .gallery-overlay {
@@ -680,7 +696,7 @@ html[data-theme="light"] .nav-glass {
   font-size: 0.875rem;
   font-weight: 500;
   color: rgb(255 255 255 / 70%);
-  transition: all 0.3s;
+  transition: all var(--q-duration-slow) var(--q-ease-in-out);
   position: relative;
   padding: 0.5rem 0;
   display: inline-flex;
@@ -711,7 +727,7 @@ html[data-theme="light"] .nav-glass {
   width: 0;
   height: 2px;
   background: var(--q-color-starlight-blue);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--q-duration-slow) var(--q-ease-in-out);
   box-shadow: 0 0 10px var(--q-color-starlight-glow);
   transform: translateX(-50%);
 }
@@ -742,7 +758,7 @@ html[data-theme="light"] .nav-link:hover {
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 0.5rem;
   padding: 0.5rem;
-  transition: all 0.3s;
+  transition: all var(--q-duration-slow) var(--q-ease-in-out);
 }
 
 html[data-theme="light"] .hamburger {
@@ -764,7 +780,7 @@ html[data-theme="light"] .hamburger:hover {
   height: 2px;
   background: white;
   border-radius: 2px;
-  transition: all 0.3s;
+  transition: all var(--q-duration-slow) var(--q-ease-in-out);
   transform-origin: center;
 }
 
@@ -790,7 +806,7 @@ html[data-theme="light"] .hamburger span {
   padding: 0 2rem;
   max-height: 0;
   overflow: hidden;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all var(--q-duration-slow) var(--q-ease-in-out);
   opacity: 0;
   pointer-events: none;
 }
@@ -932,7 +948,7 @@ html[data-theme="light"] .range-starlight {
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 0 10px var(--q-color-starlight-glow);
-  transition: all 0.2s;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
 }
 
 .range-starlight:-webkit-slider-thumb:hover {
@@ -974,11 +990,11 @@ html[data-theme="light"] .btn-starlight:hover,
 html[data-theme="light"] .hover\:btn-starlight:hover,
 html[data-theme="light"] .btn-primary,
 html[data-theme="light"] .btn-primary:hover {
-  background: linear-gradient(135deg, #ffb38a 40%, #00d4ff 100%) !important;
+  background: linear-gradient(135deg, var(--q-color-starlight-peach) 40%, var(--q-color-starlight-blue) 100%) !important;
 }
 
 html[data-theme="light"] .text-gradient-starlight {
-  background: linear-gradient(135deg, #ffb38a 40%, #00d4ff 100%) !important;
+  background: linear-gradient(135deg, var(--q-color-starlight-peach) 40%, var(--q-color-starlight-blue) 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
 }
@@ -993,7 +1009,7 @@ html[data-theme="light"] .dialog-content .bg-black_40 {
 
 /* 18. Semantic Typography Utilities */
 .text-glow {
-  text-shadow: 0 0 10px rgb(0 212 255 / 50%), 0 0 20px rgb(0 212 255 / 20%);
+  text-shadow: 0 0 10px rgb(0 212 255 / 50%), 0 0 20px rgb(0 212 255 / 60%);
 }
 
 .text-glass {
@@ -1054,12 +1070,12 @@ html[data-theme="light"] .starlight-loading {
   background: rgb(255 255 255 / 10%);
   border: 1px solid rgb(255 255 255 / 5%);
   border-radius: 10px;
-  transition: all 0.3s;
+  transition: all var(--q-duration-slow) var(--q-ease-in-out);
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: rgb(0 212 255 / 30%);
-  box-shadow: 0 0 10px rgb(0 212 255 / 20%);
+  box-shadow: 0 0 10px rgb(0 212 255 / 60%);
 }
 
 html[data-theme="light"] ::-webkit-scrollbar-track {
@@ -1103,8 +1119,8 @@ html[data-theme="light"] * {
   }
   
   .btn-starlight {
-    background: linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%);
-    color: #000;
+    background: var(--q-gradient-primary);
+    color: var(--q-color-text-inverse);
     font-weight: 700;
     border: none;
     border-radius: 0.5rem;
@@ -1112,8 +1128,8 @@ html[data-theme="light"] * {
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: 0 0 20px rgb(0 212 255 / 30%);
+    transition: all var(--q-duration-base) var(--q-ease-in-out);
+    box-shadow: 0 0 20px color-mix(in srgb, var(--q-color-primary), transparent 70%);
     text-decoration: none;
   }
   
@@ -1136,3 +1152,622 @@ html[data-theme="light"] * {
   html[data-theme="light"] .btn-starlight:focus-visible {
     outline-color: var(--q-color-starlight-blue);
   }}
+
+/* ============================================
+   LAYOUT PRESETS - Composable, Flexible
+   ============================================ */
+
+/* Email 3-column layout */
+.email-nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(0 0 0 / 40%);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-right: 1px solid rgb(255 255 255 / 10%);
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.email-feed {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(255 255 255 / 5%);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-right: 1px solid rgb(255 255 255 / 10%);
+  overflow-y: auto;
+}
+
+.email-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Music 2-column + footer layout */
+.music-nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(0 0 0 / 40%);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-right: 1px solid rgb(255 255 255 / 10%);
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.music-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.music-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background: rgb(0 0 0 / 40%);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-top: 1px solid rgb(255 255 255 / 10%);
+}
+
+/* Chat 2-column layout */
+.chat-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(0 0 0 / 40%);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-right: 1px solid rgb(255 255 255 / 10%);
+  overflow: hidden;
+}
+
+.chat-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Admin 2-column layout */
+.admin-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(0 0 0 / 40%);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-right: 1px solid rgb(255 255 255 / 10%);
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.admin-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Analytics 2-column layout */
+.analytics-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: rgb(0 0 0 / 40%);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-right: 1px solid rgb(255 255 255 / 10%);
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+.analytics-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Layout container classes (use in parent grid) */
+.layout-email-3col {
+  display: grid;
+  height: 100vh;
+  grid-template-columns: 280px 320px 1fr;
+  overflow: hidden;
+}
+
+.layout-music-2col {
+  display: grid;
+  height: 100vh;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+}
+
+.layout-music-row {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  overflow: hidden;
+}
+
+.layout-chat-2col {
+  display: grid;
+  height: 100vh;
+  grid-template-columns: 320px 1fr;
+  overflow: hidden;
+}
+
+.layout-admin-2col {
+  display: grid;
+  height: 100vh;
+  grid-template-columns: 260px 1fr;
+  overflow: hidden;
+}
+
+.layout-analytics-2col {
+  display: grid;
+  height: 100vh;
+  grid-template-columns: 240px 1fr;
+  overflow: hidden;
+}
+
+/* ============================================
+   UI COMPONENT PRESETS - Reusable Elements
+   ============================================ */
+
+/* Stat Card - for dashboard metrics */
+.starlight-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1.25rem;
+  background: rgb(255 255 255 / 3%);
+  border: 1px solid rgb(255 255 255 / 8%);
+  border-radius: var(--q-radius-xl);
+  transition: all 0.3s ease;
+}
+
+.starlight-stat:hover {
+  background: rgb(255 255 255 / 5%);
+  border-color: rgb(255 255 255 / 12%);
+}
+
+.starlight-stat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.starlight-stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--q-radius-lg);
+  background: color-mix(in srgb, var(--q-color-primary) 15%, transparent);
+  color: var(--q-color-primary);
+}
+
+.starlight-stat-icon-green { background: rgb(16 185 129 / 15%); color: #10b981; }
+.starlight-stat-icon-orange { background: rgb(245 158 11 / 15%); color: #f59e0b; }
+.starlight-stat-icon-purple { background: rgb(139 92 246 / 15%); color: #8b5cf6; }
+.starlight-stat-icon-pink { background: rgb(236 72 153 / 15%); color: #ec4899; }
+
+.starlight-stat-trend {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.starlight-stat-trend-up { color: #10b981; }
+.starlight-stat-trend-down { color: #ef4444; }
+
+.starlight-stat-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--q-color-primary);
+}
+
+.starlight-stat-label {
+  font-size: 0.875rem;
+  color: rgb(255 255 255 / 60%);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Avatar - user/channel images */
+.starlight-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-weight: 600;
+  color: white;
+  background: linear-gradient(135deg, var(--q-color-starlight-blue), #3b82f6);
+  flex-shrink: 0;
+}
+
+.starlight-avatar-sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.625rem;
+}
+
+.starlight-avatar-md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 0.75rem;
+}
+
+.starlight-avatar-lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 0.875rem;
+}
+
+.starlight-avatar-xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.125rem;
+}
+
+.starlight-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.starlight-avatar-online::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #10b981;
+  border: 2px solid var(--q-color-starlight-deep);
+  border-radius: 50%;
+}
+
+/* Theme Toggle */
+.starlight-theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 5%);
+  border: 1px solid rgb(255 255 255 / 10%);
+  color: inherit;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.starlight-theme-toggle:hover {
+  background: rgb(255 255 255 / 10%);
+  transform: scale(1.05);
+}
+
+.starlight-theme-toggle svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Notification Bell */
+.starlight-notification {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
+}
+
+.starlight-notification:hover {
+  color: var(--q-color-starlight-blue);
+}
+
+.starlight-notification-dot {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  background: #ef4444;
+  border-radius: 50%;
+  animation: starlight-pulse 2s infinite;
+}
+
+@keyframes starlight-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Data Table */
+.starlight-table-container {
+  background: rgb(255 255 255 / 3%);
+  border: 1px solid rgb(255 255 255 / 8%);
+  border-radius: var(--q-radius-xl);
+  overflow: hidden;
+}
+
+.starlight-table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+}
+
+.starlight-table-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.starlight-table-filters {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.starlight-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.starlight-table th,
+.starlight-table td {
+  padding: 0.875rem 1.25rem;
+  text-align: left;
+  border-bottom: 1px solid rgb(255 255 255 / 5%);
+}
+
+.starlight-table th {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgb(255 255 255 / 60%);
+  background: rgb(255 255 255 / 2%);
+}
+
+.starlight-table tr:hover td {
+  background: rgb(255 255 255 / 3%);
+}
+
+.starlight-table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1.25rem;
+  border-top: 1px solid rgb(255 255 255 / 8%);
+  font-size: 0.875rem;
+  color: rgb(255 255 255 / 60%);
+}
+
+/* Chart Card */
+.starlight-chart {
+  background: rgb(255 255 255 / 3%);
+  border: 1px solid rgb(255 255 255 / 8%);
+  border-radius: var(--q-radius-xl);
+  overflow: hidden;
+}
+
+.starlight-chart-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid rgb(255 255 255 / 5%);
+}
+
+.starlight-chart-title {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.starlight-chart-tabs {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.starlight-chart-tab {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  border-radius: var(--q-radius-md);
+  color: rgb(255 255 255 / 60%);
+  cursor: pointer;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
+}
+
+.starlight-chart-tab:hover {
+  color: inherit;
+}
+
+.starlight-chart-tab.active {
+  background: rgb(0 212 255 / 15%);
+  color: var(--q-color-starlight-blue);
+}
+
+.starlight-chart-container {
+  padding: 1.25rem;
+}
+
+/* Breadcrumb */
+.starlight-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.starlight-breadcrumb-item {
+  color: rgb(255 255 255 / 60%);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.starlight-breadcrumb-item:hover {
+  color: var(--q-color-starlight-blue);
+}
+
+.starlight-breadcrumb-separator {
+  color: rgb(255 255 255 / 40%);
+}
+
+.starlight-breadcrumb-current {
+  color: inherit;
+  font-weight: 500;
+}
+
+/* Gallery (enhanced) */
+.starlight-gallery-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.starlight-gallery-item {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--q-radius-lg);
+  overflow: hidden;
+}
+
+.starlight-gallery-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform var(--q-duration-slower) var(--q-ease-in-out);
+}
+
+.starlight-gallery-item:hover img {
+  transform: scale(1.05);
+}
+
+.starlight-gallery-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  padding: 1rem;
+  background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent);
+  opacity: 0;
+  transition: opacity var(--q-duration-slow) var(--q-ease-in-out);
+}
+
+.starlight-gallery-item:hover .starlight-gallery-overlay {
+  opacity: 1;
+}
+
+/* Progress Bar */
+.starlight-progress {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.starlight-progress-bar {
+  flex: 1;
+  height: 0.5rem;
+  background: rgb(255 255 255 / 10%);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.starlight-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--q-color-starlight-blue), var(--q-color-starlight-peach));
+  border-radius: 9999px;
+  transition: width var(--q-duration-slower) var(--q-ease-in-out);
+}
+
+.starlight-progress-value {
+  font-size: 0.875rem;
+  font-weight: 600;
+  min-width: 3rem;
+  text-align: right;
+}
+
+/* Player Controls */
+.starlight-player-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.starlight-player-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  transition: all var(--q-duration-base) var(--q-ease-in-out);
+}
+
+.starlight-player-btn:hover {
+  color: var(--q-color-starlight-blue);
+  transform: scale(1.1);
+}
+
+.starlight-player-btn-primary {
+  width: 3rem;
+  height: 3rem;
+  background: var(--q-color-starlight-blue);
+  border-radius: 50%;
+  color: #000;
+}
+
+.starlight-player-btn-primary:hover {
+  background: var(--q-color-starlight-peach);
+}
+
+/* Page Header */
+.starlight-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+}
+
+.starlight-page-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+}
+
+.starlight-page-subtitle {
+  font-size: 0.875rem;
+  color: rgb(255 255 255 / 60%);
+  margin-top: 0.25rem;
+}
+
+.starlight-page-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}