/* ═══════════════════════════════════════════════════════════
   NOIRLY – layout.css  (v3 – clean redesign)
   Mobile:  top-header + bottom-tabbar
   Tablet:  horizontal top-navbar (kein Sidebar-Chaos)
   Desktop: schmale Sidebar 240px + zentrierter Feed
   ═══════════════════════════════════════════════════════════ */

:root {
  --top-h:    52px;
  --tab-h:    58px;
  --nav-h:    56px;   /* Tablet top-nav */
  --sb:       240px;  /* Desktop Sidebar */
  --feed-max: 600px;
  --rail-w:   280px;
  --bg-nav:   rgba(9,9,11,.95);
  --border-nav: rgba(255,255,255,.07);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── alle Nav-Elemente standardmäßig versteckt ─────────── */
.l-topbar   { display: none; }
.l-tabbar   { display: none; }
.mobile-menu-drawer { display: none; }
.l-sidebar  { display: none; }
.l-topnav   { display: none; }
.l-rail     { display: none; }


/* ═══════════════════════════════════════════════════════════
   MOBILE  (< 680px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 679px) {

  /* ── Top Header ── */
  .l-topbar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    min-height: var(--top-h);
    height: calc(var(--top-h) + env(safe-area-inset-top, 0));
    padding-top: env(safe-area-inset-top, 0);
    z-index: 500;
    align-items: center;
    justify-content: space-between;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    background: var(--bg-nav);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-nav);
  }
  .l-topbar-brand {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.05em;
    color: #fff;
    font-style: italic;
    text-decoration: none;
  }
  .l-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .l-topbar-btn {
    position: relative;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: #a1a1aa;
    background: none; border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s;
    border-radius: 50%;
  }
  .l-topbar-btn:hover { color: #fff; }
  .l-topbar-btn svg { width: 22px; height: 22px; }
  .l-topbar-btn { min-width: 44px; min-height: 44px; }
  .l-topbar-menu-btn { margin-left: -0.25rem; }

  /* Mobile Menu Drawer */
  .mobile-menu-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: visibility .25s ease;
  }
  .mobile-menu-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
  }
  .mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .25s ease;
  }
  .mobile-menu-drawer.is-open .mobile-menu-backdrop { opacity: 1; }
  .mobile-menu-sheet {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: min(85vw, 300px);
    max-width: 300px;
    background: var(--bg-nav);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  .mobile-menu-drawer.is-open .mobile-menu-sheet { transform: translateX(0); }
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mobile-menu-title { font-weight: 700; font-size: 1.1rem; color: var(--text); }
  .mobile-menu-close {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 8px;
  }
  .mobile-menu-close:hover { color: var(--text); background: var(--bg-hover); }
  .mobile-menu-user-block {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .mobile-menu-user-block a { text-decoration: none; font-size: .9rem; }
  .mobile-menu-user-block .mobile-menu-link { color: var(--accent); }
  .mobile-menu-balance { font-weight: 700; color: var(--text); }
  .mobile-menu-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu-link {
    display: block;
    padding: 0.85rem 1.25rem;
    color: var(--text);
    text-decoration: none;
    font-size: 1rem;
    transition: background .15s;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .mobile-menu-link:hover { background: var(--bg-hover); }
  .mobile-menu-link.is-active { font-weight: 600; color: var(--accent); }
  .mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 1.25rem;
  }
  .mobile-menu-footer {
    padding: 0.75rem 1.25rem 1.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .mobile-menu-footer .mobile-menu-link { background: none; border: none; width: 100%; text-align: left; font: inherit; cursor: pointer; }

  .l-topbar-dot {
    position: absolute;
    top: 9px; right: 9px;
    width: 7px; height: 7px;
    background: #e8195b;
    border-radius: 50%;
    border: 2px solid #09090b;
  }

  /* ── Bottom Tab Bar ── */
  .l-tabbar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    min-height: var(--tab-h);
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0));
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 500;
    background: var(--bg-nav);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-nav);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  .l-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: #52525b;
    text-decoration: none;
    background: none; border: none;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s;
  }
  .l-tab span { display: none; }
  .l-tab svg { width: 24px; height: 24px; stroke-width: 1.75; }
  .l-tab.is-active { color: #fff; }
  .l-tab.is-active svg { stroke-width: 2.5; }

  /* Create-Button: Eckige Box */
  .l-tab-create .l-tab-icon {
    width: 32px; height: 32px;
    background: #fff;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
  }
  .l-tab-create .l-tab-icon svg { color: #000; width: 17px; height: 17px; stroke-width: 2.5; }
  .l-tab-create.disabled { opacity: .2; pointer-events: none; }

  /* Badge */
  .l-tab-badge {
    position: absolute;
    top: 7px;
    left: calc(50% + 5px);
    min-width: 14px; height: 14px;
    background: #e8195b;
    color: #fff;
    border-radius: 99px;
    font-size: .5rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 1.5px solid #09090b;
  }

  /* ── Content Layout ── */
  .l-main {
    padding-top: calc(var(--top-h) + env(safe-area-inset-top, 0));
    padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0));
    min-height: 100dvh;
  }
  .l-main--plain { padding: 0; min-height: 100dvh; }
  .l-content { width: 100%; }

  /* Container: Safe Area auf Mobil */
  .l-main .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  /* Post-Actions: größere Touch-Ziele auf Mobil */
  .post-actions {
    padding: 0.65rem 1rem 0.8rem;
  }
  .post-actions .btn-action {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Sidebar + Rail bleiben versteckt */
  .l-sidebar, .l-rail { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   TABLET  (680px – 1023px)
   Horizontale Top-Navbar — keine Sidebar
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 680px) and (max-width: 1023px) {

  .l-topbar, .l-tabbar { display: none; }
  .l-sidebar { display: none; }

  .l-topnav {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 400;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    background: var(--bg-nav);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-nav);
  }

  /* Logo links */
  .l-topnav-brand {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: -.05em;
    color: #fff;
    font-style: italic;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: .5rem;
  }

  /* Nav-Links in der Mitte */
  .l-topnav-links {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex: 1;
  }
  .l-topnav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    color: #71717a;
    text-decoration: none;
    background: none; border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s;
    position: relative;
  }
  .l-topnav-link svg { width: 22px; height: 22px; stroke-width: 1.75; }
  .l-topnav-link:hover { background: rgba(255,255,255,.07); color: #e4e4e7; }
  .l-topnav-link.is-active { color: #fff; }
  .l-topnav-link.is-active svg { stroke-width: 2.25; }

  /* Badge auf topnav-link */
  .l-topnav-badge {
    position: absolute;
    top: 5px; right: 5px;
    width: 7px; height: 7px;
    background: #e8195b;
    border-radius: 50%;
    border: 1.5px solid #09090b;
  }

  /* Rechte Seite: Suche + Avatar */
  .l-topnav-right {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    margin-left: auto;
  }
  .l-topnav-search {
    display: flex;
    align-items: center;
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 10px;
    padding: .35rem .75rem;
    gap: .45rem;
    color: #52525b;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .12s;
  }
  .l-topnav-search:hover { border-color: #3f3f46; color: #a1a1aa; }
  .l-topnav-search svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* Avatar-Button */
  .l-topnav-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #27272a;
    text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    background: #27272a;
    color: #71717a;
    font-size: .8rem; font-weight: 700;
    transition: border-color .12s;
  }
  .l-topnav-avatar:hover { border-color: #71717a; }
  .l-topnav-avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* Create-Button */
  .l-topnav-create {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: .4rem .85rem;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
    flex-shrink: 0;
  }
  .l-topnav-create:hover { background: #e8e8e8; }
  .l-topnav-create svg { width: 14px; height: 14px; stroke-width: 2.5; }

  /* ── Content Layout ── */
  .l-main {
    padding-top: var(--nav-h);
    padding-bottom: 0;
    min-height: 100dvh;
  }
  .l-main--plain { padding: 0; min-height: 100dvh; }
  .l-content {
    width: 100%;
    max-width: var(--feed-max);
    margin: 0 auto;
  }
}


/* ═══════════════════════════════════════════════════════════
   DESKTOP  (≥ 1024px)
   Sidebar 240px + Feed zentriert
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  .l-topbar, .l-tabbar, .l-topnav { display: none; }

  /* ── Sidebar ── */
  .l-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--sb);
    z-index: 400;
    background: #09090b;
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 0;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .l-sidebar::-webkit-scrollbar { display: none; }

  /* Logo */
  .l-sidebar-logo { display: none; }
  .l-sidebar-wordmark {
    display: block;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -.05em;
    font-style: italic;
    color: #fff;
    padding: 1.35rem 1.25rem .9rem;
    line-height: 1;
    flex-shrink: 0;
    text-decoration: none;
  }

  /* Konto-Block: Avatar + Username, Guthaben */
  .l-sidebar-account {
    padding: 0 1.25rem 1.25rem;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
  }
  .l-sidebar-account-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    border-radius: 8px;
    transition: opacity .15s;
  }
  .l-sidebar-account-row:hover { opacity: .9; color: #fff; }
  .l-sidebar-account-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #27272a;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .l-sidebar-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .l-sidebar-account-initial {
    font-size: .9rem;
    color: #a1a1aa;
    font-weight: 700;
  }
  .l-sidebar-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .l-sidebar-account-balance {
    display: block;
    font-size: .8rem;
    color: #71717a;
    text-decoration: none;
    padding: .25rem 0;
    transition: color .12s;
  }
  .l-sidebar-account-balance:hover { color: #a1a1aa; }
  .l-sidebar-mini-avatar {
    width: 20px; height: 20px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #27272a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 700;
    color: #a1a1aa;
  }
  .l-sidebar-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .l-sidebar-footer-link {
    font-size: .8rem;
    color: #71717a;
    text-decoration: none;
  }
  .l-sidebar-footer-link:hover { color: #a1a1aa; }

  /* Nav-Bereich: etwas Abstand nach Konto */
  .l-sidebar .l-nav-link:first-of-type {
    margin-top: .25rem;
  }

  /* Nav-Links */
  .l-nav-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 1.25rem;
    color: #71717a;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 400;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -.01em;
    transition: color .12s;
    width: 100%;
    border-radius: 0;
  }
  .l-nav-link svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.75; }
  .l-nav-link span { display: inline; }
  .l-nav-link::after { display: none; }
  .l-nav-link:hover { color: #fff; }
  .l-nav-link.is-active { color: #fff; font-weight: 600; }
  .l-nav-link.is-active svg { stroke-width: 2.25; }

  /* Badge */
  .l-nav-badge {
    margin-left: auto;
    min-width: 18px; height: 17px;
    padding: 0 4px;
    background: #e8195b;
    color: #fff;
    border-radius: 99px;
    font-size: .58rem;
    font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    border: none;
    position: static;
  }

  /* Mehr (einklappbar) */
  .l-nav-more { margin: 0; }
  .l-nav-more-trigger {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0;
  }
  .l-nav-more-trigger .l-nav-more-chevron {
    transition: transform .2s ease;
  }
  .l-nav-more.is-open .l-nav-more-trigger .l-nav-more-chevron {
    transform: rotate(90deg);
  }
  .l-nav-more-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .l-nav-more.is-open .l-nav-more-list {
    max-height: 400px;
  }
  .l-nav-more-list .l-nav-link {
    padding-left: 2.5rem;
    font-size: .9em;
  }

  /* Sidebar-Divider */
  .l-sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,.06);
    margin: .75rem 1.25rem;
  }

  /* Vorgeschlagene Creator (unter Mehr) */
  .l-sidebar-suggested {
    padding: 0 1.25rem 1rem;
    flex-shrink: 0;
  }
  .l-sidebar-suggested-title {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #71717a;
    margin-bottom: .6rem;
  }
  .l-sidebar-suggested-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 0;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background .12s;
  }
  .l-sidebar-suggested-item:hover {
    background: rgba(255,255,255,.04);
    color: inherit;
  }
  .l-sidebar-suggested-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #27272a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 700;
    color: #71717a;
  }
  .l-sidebar-suggested-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .l-sidebar-suggested-info { flex: 1; min-width: 0; }
  .l-sidebar-suggested-name {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: #fff;
  }
  .l-sidebar-suggested-meta {
    font-size: .65rem;
    color: #71717a;
  }

  /* Create-Button */
  .l-sidebar-create { padding: .75rem 1.25rem .5rem; }
  .l-sidebar-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 38px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s;
  }
  .l-sidebar-create-btn:hover { background: #e8e8e8; }
  .l-sidebar-create-btn svg { width: 15px; height: 15px; stroke-width: 2.5; }
  .l-sidebar-create-btn span { display: inline; }

  /* Footer */
  .l-sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: .75rem;
  }
  .l-sidebar-footer-btn {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 1.25rem;
    color: #3f3f46;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 400;
    text-decoration: none;
    transition: color .12s;
    width: 100%;
    border-radius: 0;
  }
  .l-sidebar-footer-btn:hover { color: #71717a; }
  .l-sidebar-footer-btn svg { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.75; }
  .l-sidebar-footer-btn span { display: inline; }
  .l-sidebar-footer-btn::after { display: none; }

  /* ── Content Layout ── */
  .l-main {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--sb);
    min-height: 100dvh;
  }
  .l-main--plain { padding-left: 0; min-height: 100dvh; }
  .l-content {
    width: 100%;
    max-width: var(--feed-max);
    margin: 0 auto;
  }
}


/* ═══════════════════════════════════════════════════════════
   WIDE  (≥ 1280px)
   Feed + Right Rail
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .l-content:has(.l-feed-col) {
    display: grid;
    grid-template-columns: var(--feed-max) var(--rail-w);
    gap: 2rem;
    max-width: calc(var(--feed-max) + 2rem + var(--rail-w));
    margin: 0 auto;
  }
  .l-feed-col { min-width: 0; }
  .l-feed-col .feed { max-width: none !important; }

  .l-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: none;
    padding-top: .75rem;
    align-self: start;
  }
  .l-rail::-webkit-scrollbar { display: none; }
}


/* ═══════════════════════════════════════════════════════════
   RAIL WIDGETS
   ═══════════════════════════════════════════════════════════ */
.l-widget {
  background: #111113;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 1rem;
}
.l-widget-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #52525b;
  margin-bottom: .75rem;
}
.l-widget-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 0;
}
.l-widget-user + .l-widget-user { border-top: 1px solid rgba(255,255,255,.05); }
.l-widget-user-ava {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #27272a;
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; color: #71717a;
}
.l-widget-user-ava img { width: 100%; height: 100%; object-fit: cover; }
.l-widget-user-info { flex: 1; min-width: 0; }
.l-widget-user-name { font-size: .82rem; font-weight: 600; color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-widget-user-meta { font-size: .7rem; color: #52525b; }
.l-widget-follow {
  font-size: .72rem; font-weight: 700;
  padding: .22rem .65rem;
  border-radius: 99px;
  background: #fff;
  color: #09090b;
  border: none;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .12s;
}
.l-widget-follow:hover { background: #e8e8e8; color: #09090b; }
.l-widget-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.l-widget-tag {
  padding: .22rem .55rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px;
  font-size: .7rem;
  color: #71717a;
  text-decoration: none;
  transition: color .12s, border-color .12s;
}
.l-widget-tag:hover { color: #e8195b; border-color: rgba(232,25,91,.4); }
.l-rail-footer { font-size: .62rem; color: #27272a; line-height: 2; }
.l-rail-footer a { color: #3f3f46; }
.l-rail-footer a:hover { color: #71717a; }


/* ═══════════════════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════════════════ */
html.light {
  --bg-nav: rgba(255,255,255,.95);
  --border-nav: rgba(0,0,0,.08);
}
html.light .l-topbar-brand,
html.light .l-topnav-brand,
html.light .l-sidebar-wordmark { color: #09090b; }
html.light .l-topbar-btn { color: #52525b; }
html.light .l-topbar-btn:hover { color: #09090b; }
html.light .l-topbar-dot { border-color: #fff; }
html.light .l-tab { color: #a1a1aa; }
html.light .l-tab.is-active { color: #09090b; }
html.light .l-tab-create .l-tab-icon { background: #09090b; }
html.light .l-tab-create .l-tab-icon svg { color: #fff; }
html.light .l-tab-badge { border-color: #fff; }
html.light .l-topnav-link { color: #71717a; }
html.light .l-topnav-link:hover { background: rgba(0,0,0,.05); color: #09090b; }
html.light .l-topnav-link.is-active { color: #09090b; }
html.light .l-topnav-search { background: #f4f4f5; border-color: #e4e4e7; color: #71717a; }
html.light .l-topnav-search:hover { border-color: #a1a1aa; color: #09090b; }
html.light .l-topnav-avatar { border-color: #e4e4e7; background: #f4f4f5; color: #a1a1aa; }
html.light .l-topnav-create { background: #09090b; color: #fff; }
html.light .l-topnav-create:hover { background: #27272a; }
html.light .l-sidebar { background: #fafafa; border-color: #e4e4e7; }
html.light .l-sidebar-account { border-color: #e4e4e7; }
html.light .l-sidebar-account-row { color: #09090b; }
html.light .l-sidebar-account-row:hover { color: #09090b; }
html.light .l-sidebar-account-avatar { background: #e4e4e7; }
html.light .l-sidebar-account-initial { color: #52525b; }
html.light .l-sidebar-account-balance { color: #71717a; }
html.light .l-sidebar-account-balance:hover { color: #52525b; }
html.light .l-sidebar-mini-avatar { background: #e4e4e7; color: #52525b; }
html.light .l-sidebar-suggested-title { color: #71717a; }
html.light .l-sidebar-suggested-item:hover { background: rgba(0,0,0,.04); }
html.light .l-sidebar-suggested-avatar { background: #e4e4e7; color: #52525b; }
html.light .l-sidebar-suggested-name { color: #09090b; }
html.light .l-sidebar-suggested-meta { color: #71717a; }
html.light .l-sidebar-footer { border-color: #e4e4e7; }
html.light .l-sidebar-divider { background: #e4e4e7; }
html.light .l-nav-link { color: #71717a; }
html.light .l-nav-link:hover { color: #09090b; }
html.light .l-nav-link.is-active { color: #09090b; }
html.light .l-sidebar-create-btn { background: #09090b; color: #fff; }
html.light .l-sidebar-create-btn:hover { background: #27272a; }
html.light .l-sidebar-footer-btn { color: #a1a1aa; }
html.light .l-sidebar-footer-btn:hover { color: #52525b; }
html.light .l-widget { background: #fff; border-color: #e4e4e7; }
html.light .l-widget-user + .l-widget-user { border-color: #f4f4f5; }
html.light .l-widget-user-name { color: #09090b; }
html.light .l-widget-follow { background: #09090b; color: #fff; }
html.light .l-widget-follow:hover { background: #27272a; }
html.light .l-widget-tag { background: #f4f4f5; border-color: #e4e4e7; color: #52525b; }