/* ===== Home: slim one-row status bar on top, quote centered below ===== */
.home-intro { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 24px; }

.home-page .home-quote { margin: 0; flex: 1; justify-content: center; }

:root[data-theme="dark"] 

.usage-label { display: block; color: #8c94a6; font-size: 10.5px; font-weight: 650; letter-spacing: .12em; }
.usage-value { display: block; margin-top: 5px; color: #f2f3f8; font-size: 20px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }

.usage-sub { display: block; margin-top: 4px; color: #7f8798; font-size: 10px; }
.usage-req { display: block; margin-top: 1px; color: #7f8798; font-size: 10px; }

/* Single-screen: lock viewport, quote centers in the remaining space. */
html.home-mode, html.home-mode body { height: 100%; overflow: hidden; }
html.home-mode .main-content { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; }
html.home-mode .page-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
html.home-mode .home-page { flex: 1; min-height: 0; display: flex; }
html.home-mode .home-intro { flex: 1; min-height: 0; padding: 12px 0 16px; }
html.home-mode .home-page .home-quote { flex: 1; min-height: 0; }

@media (max-width: 1024px) {
  
  
  
}
@media (max-width: 767px) {
  .home-intro { padding: 16px 0 24px; }
  
  
  
  
  
  .usage-value { font-size: 20px; }
}