/* ==========================================================================
   LEITA — base stylesheet
   Brand: ink on paper, accent gray structure, electric violet and bright
   cyan reserved for small points of colour (the "orbital language").
   Light is the primary usage; dark is the reversed usage and follows the
   visitor's system setting.
   ========================================================================== */

:root {
  /* Brand palette (brand asset sheet) */
  --ink: #000000;
  --paper: #FFFFFF;
  --gray: #D9D9D9;
  --violet: #7C3AED;
  --cyan: #00E5FF;

  /* Surfaces */
  --bg: #F7F7F7;
  --card: #FFFFFF;
  --chip: rgba(0, 0, 0, 0.035);
  --border: #E4E4E4;
  --border-strong: #C9C9C9;
  --line: var(--gray);

  /* Text */
  --fg: #000000;
  --muted: #5C5C5C;

  /* Accent roles used across the templates. --brand is the violet that
     text, bars and focus rings use; --accent is a cyan dark enough to be
     read on paper. Pure cyan is only ever a decorative point. */
  --brand: #7C3AED;
  --brand-hover: #6D28D9;
  --brand-soft: rgba(124, 58, 237, 0.07);
  --accent: #00838F;
  --accent-hover: #006C75;
  --accent-soft: rgba(0, 229, 255, 0.1);

  /* Buttons */
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);

  /* Status */
  --success: #13804A;
  --success-soft: rgba(19, 128, 74, 0.07);
  --success-border: rgba(19, 128, 74, 0.28);
  --danger: #C62828;
  --danger-soft: rgba(198, 40, 40, 0.06);
  --danger-border: rgba(198, 40, 40, 0.28);
  --warning: #9A5B00;
  --warning-soft: rgba(230, 150, 20, 0.09);
  --warning-border: rgba(200, 130, 10, 0.32);

  /* Effects */
  --ring: rgba(124, 58, 237, 0.55);
  --shadow: none;
  --glow: none;
  --nav-height: 68px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --radius: 14px;

  --font: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #0D0D0D;
    --chip: rgba(255, 255, 255, 0.05);
    --border: #232323;
    --border-strong: #3A3A3A;
    --line: #2E2E2E;

    --fg: #FFFFFF;
    --muted: #A6A6A6;

    --brand: #9B6BFF;
    --brand-hover: #B08CFF;
    --brand-soft: rgba(124, 58, 237, 0.16);
    --accent: #00E5FF;
    --accent-hover: #5CEFFF;
    --accent-soft: rgba(0, 229, 255, 0.1);

    --btn-bg: var(--paper);
    --btn-fg: var(--ink);

    --success: #3DDC84;
    --success-soft: rgba(61, 220, 132, 0.08);
    --success-border: rgba(61, 220, 132, 0.28);
    --danger: #FF6B6B;
    --danger-soft: rgba(255, 107, 107, 0.08);
    --danger-border: rgba(255, 107, 107, 0.28);
    --warning: #FFB547;
    --warning-soft: rgba(255, 181, 71, 0.08);
    --warning-border: rgba(255, 181, 71, 0.3);

    --ring: rgba(155, 107, 255, 0.65);
  }
}

/* Reset & Core */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography — light, wide display weights echo the wordmark. */
h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem 0; font-weight: 500; letter-spacing: -0.005em; line-height: 1.15; color: var(--fg); }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 300; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 400; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
p { margin: 0 0 1.5rem 0; line-height: 1.65; color: var(--muted); }
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease), opacity 0.2s var(--ease); }
strong { font-weight: 600; }

/* The brand's one typographic signature: wide-tracked capitals, used only
   for the tagline — never as a generic label style. */
.tracked {
  text-transform: uppercase; letter-spacing: 0.42em; font-weight: 500; font-size: 12px;
}

/* Accessibility ---------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 5000;
  padding: 12px 20px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.loading {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid var(--border); border-top-color: var(--brand);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
.fade-in { animation: fadeIn 0.4s ease-out; }

/* Buttons ---------------------------------------------------------------- */

.btn, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg); font-weight: 500; font-size: 15px; font-family: inherit;
  letter-spacing: 0.02em;
  border: 1px solid var(--btn-bg); cursor: pointer; text-align: center;
  min-height: 46px;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover, .btn-primary:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.btn:disabled, .btn-primary:disabled,
.btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover, .btn-primary:disabled:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; min-height: 46px;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--fg); font-weight: 500; font-size: 15px; font-family: inherit;
  letter-spacing: 0.02em; cursor: pointer; text-align: center;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.btn-secondary:hover { border-color: var(--fg); background: var(--chip); }
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-danger, .btn.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-small { padding: 9px 18px; font-size: 14px; min-height: 40px; }

/* Forms ------------------------------------------------------------------ */

input[type="text"], input[type="number"], input[type="email"], input[type="search"],
textarea, select {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--card);
  color: var(--fg); font-size: 16px; font-family: inherit;
  min-height: 46px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.75; }

label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 15px; color: var(--fg); }

/* The track carries the brand's violet-to-cyan orbit line. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; padding: 0; min-height: 0;
  border: none; border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--violet), var(--cyan));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); cursor: pointer;
  border: 2px solid var(--fg);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); cursor: pointer;
  border: 2px solid var(--fg);
}

/* Layout ----------------------------------------------------------------- */

.app-container {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 40px 24px 56px;
  flex: 1;
}

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 44px;
  transition: border-color 0.3s var(--ease);
}

/* Header & Nav ----------------------------------------------------------- */

.site-header {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1000;
}

.header-inner {
  max-width: 1400px; margin: 0 auto; min-height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; gap: 16px;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0; color: var(--fg);
}
.brand .wordmark { height: 15px; width: auto; }

.nav-menu { display: flex; gap: 2px; align-items: center; margin: 0 auto; }

.nav-tab {
  position: relative;
  font-size: 15px; font-weight: 400; color: var(--muted);
  padding: 10px 14px; border-radius: 10px;
  display: inline-flex; align-items: center;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav-tab:hover { color: var(--fg); }
/* The active tab is marked by a single violet point, like a planet on its orbit. */
.nav-tab[aria-current="page"] { color: var(--fg); font-weight: 500; }
.nav-tab[aria-current="page"]::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--violet);
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Support is gold with a slow sheen so it's easy to spot without shouting.
   The sheen is the only looping motion in the chrome; reduced-motion users
   get a still gold button (the global rule stops the animation). */
.donate-btn {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  color: #3B2A00;
  background: linear-gradient(135deg, #FBE7A1 0%, #EBC04A 38%, #D4A021 62%, #F3D77A 100%);
  border: 1px solid #C8961E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 10px rgba(212, 160, 33, 0.35);
  display: inline-flex; align-items: center; min-height: 40px;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.donate-btn::after {
  content: ''; position: absolute; z-index: -1; top: -10%; bottom: -10%; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: skewX(-20deg);
  animation: donate-sheen 5.5s ease-in-out infinite;
}
@keyframes donate-sheen { 0%, 68% { left: -60%; } 100% { left: 130%; } }
.donate-btn:hover { color: #2A1E00; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 16px rgba(212, 160, 33, 0.5); }

.settings-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--muted); border: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.settings-btn .ui-icon { width: 20px; height: 20px; stroke-width: 1.7; transition: transform 0.4s var(--ease); }
.settings-btn:hover { color: var(--fg); border-color: var(--border-strong); }
.settings-btn:hover .ui-icon { transform: rotate(45deg); }
.settings-btn[aria-current="page"] { color: var(--fg); border-color: var(--fg); }

/* Split nav items: the label is a link, the chevron opens a menu. */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group .nav-tab { padding-right: 4px; }
.nav-group.is-active .nav-tab { color: var(--fg); font-weight: 500; }
.nav-caret {
  display: inline-grid; place-items: center; width: 26px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.nav-caret:hover, .nav-caret[aria-expanded="true"] { color: var(--fg); background: var(--chip); }
.nav-caret .ui-icon { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.nav-caret[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; z-index: 1100; top: calc(100% + 8px); left: 0; min-width: 210px;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.nav-dropdown a { display: block; padding: 10px 12px; border-radius: 9px; font-size: 15px; color: var(--fg); }
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: var(--chip); }
.nav-dropdown li:last-child a { color: var(--muted); }
.nav-support-mobile { display: none; }

.auth-btn {
  padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 500;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  display: inline-flex; align-items: center; min-height: 40px;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.auth-btn:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.auth-btn.is-quiet { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.auth-btn.is-quiet:hover { border-color: var(--fg); background: transparent; color: var(--fg); }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 999px; color: var(--fg); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--fg); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 1040px) {
  .header-inner { flex-wrap: wrap; padding: 0 16px; }
  .nav-toggle { display: inline-flex; order: 3; }
  .header-actions { order: 2; margin-left: auto; }
  .nav-menu {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0 0 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .nav-menu.is-open { display: flex; }
  .nav-tab { padding: 14px 12px; font-size: 16px; }
  /* In the phone menu, section highlights are listed under their section. */
  .nav-group { display: block; }
  .nav-group .nav-tab { display: flex; }
  .nav-caret { display: none; }
  .nav-dropdown, .nav-dropdown[hidden] {
    display: block; position: static; min-width: 0; margin: 0 0 6px 14px; padding: 0 0 0 10px;
    background: none; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none;
  }
  .nav-dropdown a { padding: 10px 12px; font-size: 15px; color: var(--muted); }
  .nav-support-mobile { display: flex; color: #B8860B; font-weight: 600; }
  .nav-tab[aria-current="page"]::after { left: auto; right: 14px; top: 50%; bottom: auto; margin: -2.5px 0 0; }
}

@media (max-width: 480px) {
  .header-inner { gap: 10px; }
  .header-actions { gap: 4px; }
  .donate-btn { display: none; }
  .brand { gap: 9px; }
  .brand .wordmark { height: 11px; }
  .navbar-logo { width: 24px; height: 24px; }
  .auth-btn { padding: 8px 14px; font-size: 13px; min-height: 38px; }
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 36px; margin-top: auto;
  background: var(--bg);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  text-align: center; color: var(--muted); font-size: 14px;
}
.footer-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; color: var(--fg); margin-bottom: 28px; }
.footer-brand .wordmark { height: 13px; width: auto; }
.footer-brand .tracked { font-size: 10px; letter-spacing: 0.5em; margin-right: -0.5em; }
.footer-links {
  margin-bottom: 24px; display: flex; justify-content: center;
  gap: 24px; flex-wrap: wrap;
}
.footer-links a { font-weight: 400; padding: 6px 2px; }
.footer-links a:hover { color: var(--fg); }
.footer-inner p { margin: 0; font-size: 13px; }

/* Utilities -------------------------------------------------------------- */

.text-center { text-align: center; }
/* Formerly a gradient fill; brand headlines are plain ink. */
.text-gradient { color: var(--fg); }
.mt-1 { margin-top: 8px; }   .mb-1 { margin-bottom: 8px; }
.mt-2 { margin-top: 16px; }  .mb-2 { margin-bottom: 16px; }
.mt-3 { margin-top: 24px; }  .mb-3 { margin-bottom: 24px; }
.mt-4 { margin-top: 32px; }  .mb-4 { margin-bottom: 32px; }

.chip {
  background: var(--chip); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--muted);
}

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Page heroes ------------------------------------------------------------
   No boxed gradient: a light headline on the paper, with a single orbit
   line and point drawn behind it on the right. */

.section-hero, .page-hero {
  position: relative; overflow: hidden;
  text-align: left; margin-bottom: 36px;
  padding: 36px 0 32px;
  border-bottom: 1px solid var(--border);
}
.section-hero::before, .page-hero::before {
  content: ''; position: absolute; right: -80px; top: 50%;
  width: 520px; height: 180px; margin-top: -90px;
  border: 1px solid var(--line); border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}
/* Sits on the orbit's far-left point: the 520x180 ellipse is centred 180px
   in from the right edge and turned -12deg, which moves that point 254px
   left and 54px down of centre. */
.section-hero::after, .page-hero::after {
  content: ''; position: absolute; right: 430px; top: 50%;
  width: 9px; height: 9px; margin-top: 50px; border-radius: 50%;
  background: var(--violet);
  pointer-events: none;
}
.section-hero > *, .page-hero > * { position: relative; }
.section-hero h1, .page-hero h1 { margin-bottom: 12px; }
.section-hero p, .page-hero p { margin: 0; max-width: 640px; font-size: 17px; }
.page-hero .stat-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; }
.page-hero .stat { font-size: 14px; color: var(--muted); }
.page-hero .stat strong { color: var(--fg); }
@media (max-width: 720px) {
  .section-hero::before, .page-hero::before { right: -260px; }
  .section-hero::after, .page-hero::after { display: none; }
}

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 14px; font-weight: 400;
  padding: 8px 2px; min-height: 44px;
}
.back-link:hover { color: var(--fg); }

/* Section tabs: pages that share one nav tab (Analyze: stats, history). */
.section-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 22px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card);
}
.section-tabs a { padding: 8px 16px; border-radius: 999px; font-size: 15px; color: var(--muted); }
.section-tabs a:hover { color: var(--fg); }
.section-tabs a[aria-current="page"] { background: var(--btn-bg); color: var(--btn-fg); }

/* Hub cards -------------------------------------------------------------- */

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.hub-card {
  position: relative;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px;
  display: flex; flex-direction: column; color: inherit;
  transition: border-color 0.25s var(--ease);
}
.hub-card:hover,
.hub-card:focus-within { border-color: var(--fg); }

.hub-card-link { color: inherit; }
.hub-card-link::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
}
.hub-card-link:focus-visible { outline: none; }
.hub-card-link:focus-visible::after { outline: 2px solid var(--ring); outline-offset: 2px; }
.hub-card .hub-links { position: relative; z-index: 2; }

/* Icons sit inside a thin ring that echoes the compass mark. On hover a
   violet point settles onto the ring. */
.hub-icon {
  position: relative;
  width: 52px; height: 52px; margin-bottom: 20px;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--fg);
  border: 1px solid var(--border-strong);
  transition: border-color 0.25s var(--ease);
}
.hub-icon::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet);
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.hub-card:hover .hub-icon, .hub-card:focus-within .hub-icon { border-color: var(--fg); }
.hub-card:hover .hub-icon::after, .hub-card:focus-within .hub-icon::after { opacity: 1; transform: scale(1); }
.hub-icon svg { width: 22px; height: 22px; margin: 0; stroke: currentColor; stroke-width: 1.6; }

.hub-title { margin: 0 0 8px; font-size: 20px; font-weight: 500; letter-spacing: 0; }
.hub-desc { font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.hub-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.hub-tag {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--muted); font-size: 12px; font-weight: 400;
}
.hub-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hub-links .chip-link { flex: 0 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hub-card .hub-desc { flex: 1 0 auto; }
.hub-cta { margin-top: auto; padding-top: 16px; color: var(--fg); font-weight: 500; font-size: 14px; }

.hub-panel {
  background: var(--chip); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
}

.chip-link {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; font-weight: 400; min-height: 34px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip-link:hover { color: var(--fg); border-color: var(--fg); }

/* Auth / status messaging ------------------------------------------------- */

.auth-banner {
  margin: 24px 0; padding: 22px 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.auth-banner p { margin: 0; font-size: 15px; color: var(--fg); flex: 1 1 280px; }

.auth-gate-disabled { opacity: 0.45; pointer-events: none; user-select: none; }

.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 12px; margin-bottom: 20px;
  border: 1px solid var(--border); background: var(--chip);
  font-size: 15px; line-height: 1.6; color: var(--fg);
}
.notice p { margin: 0; color: inherit; }
.notice strong { display: block; margin-bottom: 4px; }
.notice-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.notice-info { border-color: var(--border-strong); background: var(--card); }
.notice-info .notice-icon { color: var(--brand); }
.notice-warning { border-color: var(--warning-border); background: var(--warning-soft); }
.notice-warning .notice-icon { color: var(--warning); }
.notice-success { border-color: var(--success-border); background: var(--success-soft); }
.notice-success .notice-icon { color: var(--success); }
.notice-danger { border-color: var(--danger-border); background: var(--danger-soft); }
.notice-danger .notice-icon { color: var(--danger); }

/* Icons ------------------------------------------------------------------ */

.logo-icon { width: 80px; height: 80px; color: var(--fg); }
.navbar-logo { width: 28px; height: 28px; color: var(--fg); flex-shrink: 0; }
.logo-container { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.feature-icon-svg { width: 44px; height: 44px; stroke: var(--fg); stroke-width: 1.6; }
.error-icon-svg { width: 56px; height: 56px; stroke: var(--fg); stroke-width: 1.4; margin-bottom: 16px; }
.ui-icon { width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }

.btn .ui-icon, .btn-secondary .ui-icon, .chip-link .ui-icon { margin-right: 2px; }

/* Media grids ------------------------------------------------------------ */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
@media (max-width: 520px) {
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
}

.empty-state {
  grid-column: 1 / -1; text-align: center; padding: 64px 24px; color: var(--muted);
}
.empty-state svg { width: 44px; height: 44px; margin-bottom: 16px; stroke: var(--muted); }

/* Community feed panels -------------------------------------------------- */

.feed-panel {
  margin-top: 32px; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; background: var(--card);
}
.feed-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feed-box { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--bg); }
.feed-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.feed-rank { color: var(--brand); font-weight: 500; }
.feed-artist { color: var(--muted); font-size: 13px; }
.feed-score { color: var(--accent); font-size: 13px; margin-left: 6px; }
.feed-mini { margin-bottom: 24px; border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--card); }
.feed-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feed-mini ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 900px) {
  .feed-grid, .feed-mini-grid { grid-template-columns: 1fr; }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 768px) {
  .app-container { padding: 24px 16px 40px; }
  .card { padding: 26px 20px; border-radius: 14px; }
  .footer-links { gap: 14px; }
  .hub-grid { grid-template-columns: 1fr; gap: 12px; }
  .hub-card { padding: 22px; }
}