@layer {

  .md-typescale-display-small,
  .md-typescale-display-small-prominent {
    font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-small-size, 2.25rem)/var(--md-sys-typescale-display-small-line-height, 2.75rem) var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, Roboto))
  }

  .md-typescale-display-medium,
  .md-typescale-display-medium-prominent {
    font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-medium-size, 2.8125rem)/var(--md-sys-typescale-display-medium-line-height, 3.25rem) var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, Roboto))
  }

  .md-typescale-display-large,
  .md-typescale-display-large-prominent {
    font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-display-large-size, 3.5625rem)/var(--md-sys-typescale-display-large-line-height, 4rem) var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, Roboto))
  }

  .md-typescale-headline-small,
  .md-typescale-headline-small-prominent {
    font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-small-size, 1.5rem)/var(--md-sys-typescale-headline-small-line-height, 2rem) var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto))
  }

  .md-typescale-headline-medium,
  .md-typescale-headline-medium-prominent {
    font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-medium-size, 1.75rem)/var(--md-sys-typescale-headline-medium-line-height, 2.25rem) var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, Roboto))
  }

  .md-typescale-headline-large,
  .md-typescale-headline-large-prominent {
    font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-headline-large-size, 2rem)/var(--md-sys-typescale-headline-large-line-height, 2.5rem) var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, Roboto))
  }

  .md-typescale-title-small,
  .md-typescale-title-small-prominent {
    font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-title-small-size, 0.875rem)/var(--md-sys-typescale-title-small-line-height, 1.25rem) var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, Roboto))
  }

  .md-typescale-title-medium,
  .md-typescale-title-medium-prominent {
    font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-title-medium-size, 1rem)/var(--md-sys-typescale-title-medium-line-height, 1.5rem) var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, Roboto))
  }

  .md-typescale-title-large,
  .md-typescale-title-large-prominent {
    font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-title-large-size, 1.375rem)/var(--md-sys-typescale-title-large-line-height, 1.75rem) var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, Roboto))
  }

  .md-typescale-body-small,
  .md-typescale-body-small-prominent {
    font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-small-size, 0.75rem)/var(--md-sys-typescale-body-small-line-height, 1rem) var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto))
  }

  .md-typescale-body-medium,
  .md-typescale-body-medium-prominent {
    font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-medium-size, 0.875rem)/var(--md-sys-typescale-body-medium-line-height, 1.25rem) var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto))
  }

  .md-typescale-body-large,
  .md-typescale-body-large-prominent {
    font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)) var(--md-sys-typescale-body-large-size, 1rem)/var(--md-sys-typescale-body-large-line-height, 1.5rem) var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto))
  }

  .md-typescale-label-small,
  .md-typescale-label-small-prominent {
    font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-small-size, 0.6875rem)/var(--md-sys-typescale-label-small-line-height, 1rem) var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto))
  }

  .md-typescale-label-medium,
  .md-typescale-label-medium-prominent {
    font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem)/var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))
  }

  .md-typescale-label-medium-prominent {
    font-weight: var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700))
  }

  .md-typescale-label-large,
  .md-typescale-label-large-prominent {
    font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-large-size, 0.875rem)/var(--md-sys-typescale-label-large-line-height, 1.25rem) var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto))
  }

  .md-typescale-label-large-prominent {
    font-weight: var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700))
  }
}



 :root {
  --md-ref-typeface-brand: 'Google Sans', 'Roboto', system-ui;
  --md-ref-typeface-plain: 'Google Sans', 'Roboto', system-ui;
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #E9DDFF;
  --md-sys-color-on-primary-container: #22005D;
  --md-sys-color-surface: #FCF8F8;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-container: #F3EDF7;
  --md-sys-color-surface-container-high: #ECE6F0;
  --md-sys-color-surface-container-highest: #E6E0E9;
  --md-sys-color-outline: #CAC4D0;
  --catalog-shape-xl: 28px;
}

body {
  margin: 0;
  font-family: var(--md-ref-typeface-plain);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

* {
  box-sizing: border-box;
}

.startup-splash {
  position: fixed;
  inset: 0;
  z-index: var(--mb-z-splash);
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(103, 80, 164, 0.22), transparent 34%),
    var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.startup-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.startup-splash-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: min(280px, 100%);
  padding: 28px;
  border-radius: var(--catalog-shape-xl);
  background: var(--md-sys-color-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  text-align: center;
}

.startup-splash-logo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.startup-splash-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.startup-splash-progress {
  width: 180px;
}

@media (prefers-reduced-motion: reduce) {
  .startup-splash {
    transition: none;
  }
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(var(--mb-sidebar-width), 88vw);
  height: 100vh;
  height: 100dvh;
  padding: 16px 12px;
  border-right: 1px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container-high);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: var(--mb-z-sidebar);
  transform: translateX(-100%);
  transition: transform var(--mb-motion-normal) ease;
}

body[data-sidebar-open="true"] .sidebar { transform: translateX(0); }

.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--mb-z-scrim);
  background: rgb(0 0 0 / 0.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--mb-motion-normal) ease, visibility 0s linear var(--mb-motion-normal);
}

body[data-sidebar-open="true"] .sidebar-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--mb-motion-normal) ease, visibility 0s;
}

.brand { display: flex; align-items: center; gap: 10px; margin: 8px 8px 20px; }
.sidebar-section-title { font-size: 1.25rem; margin: 8px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 8px; }
.sidebar-nav md-text-button { width: 100%; justify-content: flex-start; --md-text-button-container-shape: var(--catalog-shape-xl); }
.sidebar-nav md-text-button:hover, .sidebar-nav md-text-button:focus-visible { --md-text-button-container-color: var(--md-sys-color-surface-container-highest); }
.sidebar-nav md-text-button.active { --md-text-button-container-color: var(--md-sys-color-primary-container); --md-text-button-label-text-color: var(--md-sys-color-on-primary-container); font-weight: 500; }
.sidebar-nav md-text-button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.post-author-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.post-author-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.post-author-id { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md-sys-color-on-surface-variant, #49454f); font-size: .72rem; line-height: 1rem; }
.favorite-icon, .save-icon { font-variation-settings: 'FILL' 0; }
.favorite-icon.is-filled, .save-icon.is-filled { font-variation-settings: 'FILL' 1; }
.action-count { display: inline-flex; align-items: center; justify-content: center; background: var(--md-sys-color-surface-container-highest); border-radius: 10px; font-size: .7rem; font-weight: 600; min-width: 18px; height: 18px; padding: 0 4px; margin-left: 4px; line-height: 1; }
[data-nav-item="notifications"] { position: relative; }
.notification-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--md-sys-color-error, #B3261E); color: var(--md-sys-color-on-error, #FFFFFF); font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; z-index: 1; box-shadow: 0 1px 4px rgba(0,0,0,.25); line-height: 1; }
.sidebar-actions { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--md-sys-color-outline); }
#logoutBtn { width: 100%; justify-content: center; }
.content-area { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; }
header { padding: 12px var(--mb-page-padding); background: var(--md-sys-color-surface); border-bottom: 1px solid var(--md-sys-color-outline); position: sticky; top: 0; z-index: var(--mb-z-header); }
.header-inner { display: flex; align-items: center; gap: 12px; }
.menu-btn { display: inline-flex; }
main { max-width: var(--mb-content-max-width); margin: 0 auto; padding: var(--mb-page-padding); width: 100%; min-width: 0; flex: 1; }
footer { padding: 24px var(--mb-page-padding); text-align: center; color: #666; font-size: .85rem; }

@media (min-width: 600px) {
  .app-shell { grid-template-columns: var(--mb-navigation-rail-width) minmax(0, 1fr); }
  .sidebar { position: sticky; inset: auto; top: 0; align-self: start; width: var(--mb-navigation-rail-width); height: 100vh; height: 100dvh; transform: none; padding: 16px 8px; }
  .sidebar-scrim { display: none; }
  .brand { justify-content: center; margin: 8px 0 20px; }
  .brand strong, .sidebar-section-title, .sidebar-nav md-text-button span, #logoutBtn span { display: none; }
  .sidebar-nav md-text-button, #logoutBtn { min-width: var(--mb-touch-target-min); width: 100%; justify-content: center; }
  .sidebar-nav md-text-button md-icon, #logoutBtn md-icon { margin: 0; }
  .sidebar-actions { padding: 12px 0 0; }
  .menu-btn { display: none; }
}

@media (min-width: 1200px) {
  .app-shell { grid-template-columns: var(--mb-sidebar-width) minmax(0, 1fr); }
  .sidebar { width: var(--mb-sidebar-width); padding: 16px 12px; }
  .brand { justify-content: flex-start; margin: 8px 8px 20px; }
  .brand strong, .sidebar-section-title, .sidebar-nav md-text-button span, #logoutBtn span { display: inline; }
  .sidebar-nav md-text-button { justify-content: flex-start; }
  #logoutBtn { justify-content: center; }
  .sidebar-nav md-text-button md-icon, #logoutBtn md-icon { margin-inline-end: 8px; }
  .sidebar-actions { padding: 12px 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-scrim { transition: none; }
}

md-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  display: inline-flex;
  align-content: center;
  align-items: center;
}


/* Phase 1 semantic replacements for former inline styles */
.app-title {
  margin: 0;
  font-weight: 500;
}

.footer-copy {
  margin: 0;
}


/* Phase 1 semantic replacements for former inline styles */
.app-title {
  margin: 0;
  font-weight: 500;
}

.footer-copy {
  margin: 0;
}