:root {
    color-scheme: dark;
    --bg: #0b0f14;
    --bg-soft: #101722;
    --surface: rgba(255, 255, 255, 0.06);
    --text: #f5f7fb;
    --muted: rgba(245, 247, 251, 0.66);
    --border: rgba(255, 255, 255, 0.12);
    --shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.2);
    --ring: 0 0 0 4px rgba(255, 255, 255, 0.06);
    --accent: #cf2e2e;
    --accent-2: #ff6b6b;
    --accent-rgb: 207, 46, 46;
    --header-bg: linear-gradient(to bottom, rgba(8, 12, 18, 0.92), rgba(8, 12, 18, 0.74));
    --hero-glow: radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.22), transparent 28%);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --max-width: 1280px;
    --trans-fast: 160ms ease;
    --trans-med: 220ms ease;
    --discord: #5865f2;
    --discord-rgb: 88, 101, 242
}

html[data-theme="crimson"] {
    --accent: #cf2e2e;
    --accent-2: #ff6b6b;
    --accent-rgb: 207, 46, 46;
    --header-bg: linear-gradient(to bottom, rgba(9, 11, 16, 0.92), rgba(9, 11, 16, 0.74));
    --theme-glow-1: rgba(207, 46, 46, 0.24);
    --theme-glow-2: rgba(255, 107, 107, 0.12)
}

html[data-theme="ocean"] {
    --bg: #08111a;
    --bg-soft: #0d1a26;
    --accent: #1994d1;
    --accent-2: #64d8ff;
    --accent-rgb: 25, 148, 209;
    --header-bg: linear-gradient(to bottom, rgba(6, 15, 22, 0.92), rgba(6, 15, 22, 0.74));
    --theme-glow-1: rgba(25, 148, 209, 0.24);
    --theme-glow-2: rgba(100, 216, 255, 0.12)
}

html[data-theme="forest"] {
    --bg: #0b120d;
    --bg-soft: #111c15;
    --accent: #2b9a56;
    --accent-2: #8ef0b1;
    --accent-rgb: 43, 154, 86;
    --header-bg: linear-gradient(to bottom, rgba(8, 14, 10, 0.92), rgba(8, 14, 10, 0.74));
    --theme-glow-1: rgba(43, 154, 86, 0.24);
    --theme-glow-2: rgba(142, 240, 177, 0.12)
}

html[data-theme="anime"] {
    --bg: #12122c;
    --bg-soft: #1b173f;
    --accent: #ff7bb8;
    --accent-2: #66d9ff;
    --accent-rgb: 255, 123, 184;
    --header-bg: linear-gradient(to bottom, rgba(13, 12, 30, 0.92), rgba(17, 15, 46, 0.86));
    --theme-glow-1: rgba(255, 123, 184, 0.22);
    --theme-glow-2: rgba(102, 217, 255, 0.14);
}

html[data-theme="night"] {
    --bg: #070912;
    --bg-soft: #111827;
    --surface: rgba(255, 255, 255, 0.05);
    --text: #f8fbff;
    --muted: rgba(255, 255, 255, 0.7);
    --border: rgba(255, 255, 255, 0.12);
    --accent: #8ca1ff;
    --accent-2: #5d74ff;
    --accent-rgb: 140, 161, 255;
    --header-bg: linear-gradient(to bottom, rgba(4, 6, 13, 0.96), rgba(7, 11, 22, 0.86));
    --theme-glow-1: rgba(140, 161, 255, 0.25);
    --theme-glow-2: rgba(93, 116, 255, 0.14);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 20% -10%, rgba(255,255,255,.07), transparent 38%),
      radial-gradient(circle at 80% 5%, rgba(106, 210, 255, .1), transparent 30%),
      linear-gradient(180deg, var(--bg), var(--bg-soft));
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .8;
    background-image:
      radial-gradient(circle at 10% 5%, rgba(255, 255, 255, .16), transparent 34%),
      radial-gradient(circle at 70% 20%, rgba(var(--accent-rgb), 0.14), transparent 35%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.05'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='120' height='120' patternUnits='userSpaceOnUse' patternTransform='rotate(15)'%3E%3Crect x='0' y='0' width='120' height='120' fill='rgba(255,255,255,.02)'/%3E%3Cpath d='M0 30 L120 30 M0 60 L120 60 M0 90 L120 90 M30 0 L30 120 M60 0 L60 120 M90 0 L90 120' stroke='rgba(255,255,255,.06)' stroke-width='1'/ %3E%3C/pattern%3E%3C/defs%3E%3Crect width='500' height='500' fill='url(%23p)'/%3E%3Crect width='500' height='500' fill='url(%23a)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      linear-gradient(60deg, rgba(40, 54, 103, 0.2), rgba(33, 31, 58, 0.16)),
      radial-gradient(circle at 30% 15%, rgba(255,255,255,.1), transparent 18%),
      radial-gradient(circle at 80% 70%, rgba(186, 114, 255, .12), transparent 28%);
}

html[data-theme="anime"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .12), transparent 40%),
      radial-gradient(circle at 70% 10%, rgba(102, 217, 255, .18), transparent 36%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0.12'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='200' height='200' patternUnits='userSpaceOnUse' patternTransform='rotate(15)'%3E%3Crect width='200' height='200' fill='rgba(255,255,255,0)'/%3E%3Cpath d='M0 100 H200 M100 0 V200' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='600' height='600' fill='url(%23p)'/%3E%3Crect width='600' height='600' fill='url(%23g)'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    opacity: .7;
}

html[data-theme="anime"] body::after {
    background:
      linear-gradient(120deg, rgba(255, 123, 184, 0.14), rgba(102, 217, 255, 0.1)),
      radial-gradient(circle at 12% 92%, rgba(255, 255, 255, 0.1), transparent 30%),
      radial-gradient(circle at 88% 80%, rgba(100, 64, 255, 0.13), transparent 35%);
}

html[data-theme="night"] body {
    background:
      radial-gradient(circle at 20% -10%, rgba(255,255,255,.05), transparent 34%),
      radial-gradient(circle at 80% 7%, rgba(120, 150, 255, .08), transparent 30%),
      linear-gradient(180deg, #080d1e, #101d34);
}

html[data-theme="night"] body::before {
    background-image:
      radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.2), transparent 40%),
      radial-gradient(circle at 87% 20%, rgba(120, 180, 255, 0.15), transparent 42%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M50 50 L450 450'/ %3E%3Cpath d='M450 50 L50 450'/ %3E%3Cpath d='M250 0 L250 500'/ %3E%3Cpath d='M0 250 L500 250'/ %3E%3C/g%3E%3C/svg%3E");
    mix-blend-mode: normal;
    opacity: .65;
}

html[data-theme="night"] body::after {
    background:
      linear-gradient(120deg, rgba(151, 170, 255, 0.12), rgba(80, 95, 189, 0.1)),
      radial-gradient(circle at 20% 70%, rgba(255,255,255,.08), transparent 35%),
      radial-gradient(circle at 85% 15%, rgba(75, 124, 255, .08), transparent 30%);
}

body.nsfw-locked {
    overflow: hidden
}

img,
video {
    display: block;
    max-width: 100%
}

button,
input,
select {
    font: inherit
}

.app-shell {
    min-height: 100vh;
    position: relative;
    z-index: 1
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 3000;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    overflow: visible
}

.header-inner,
main {
    width: min(var(--max-width), calc(100% - 28px));
    margin: 0 auto
}

.header-inner {
    padding: 12px 0 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    transition: padding 180ms ease, gap 180ms ease;
    overflow: visible
}

.app-header.is-condensed .header-inner {
    padding: 8px 0;
    gap: 8px
}

.topbar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    width: 100%;
    overflow: visible
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .04));
    border: 1px solid rgb(255 255 255 / .1);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    flex: 0 0 auto
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.logo-orb {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 8px rgb(255 255 255 / .05), 0 0 36px rgba(var(--accent-rgb), .45);
    flex: 0 0 auto
}

.brand-mark .logo-orb {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 10px rgb(255 255 255 / .04), 0 0 30px rgba(var(--accent-rgb), .4)
}

.brand-text h1 {
    margin: 0;
    font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -.02em
}

.subinfo {
    margin-top: 3px;
    color: var(--muted);
    font-size: .95rem
}

.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    overflow: visible
}

.theme-switcher {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    flex-wrap: wrap
}

.theme-btn {
    border: 1px solid #fff0;
    background: #fff0;
    color: var(--muted);
    border-radius: 999px;
    padding: 10px 14px;
    cursor: pointer;
    transition: var(--trans-fast)
}

.theme-btn:hover,
.theme-btn.active {
    color: var(--text);
    border-color: rgba(var(--accent-rgb), .4);
    background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .04))
}

.discord-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.discord-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / .1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text);
    transition: var(--trans-fast);
    box-shadow: var(--shadow-soft);
    white-space: nowrap
}

.discord-btn:hover {
    transform: translateY(-1px)
}

.discord-server-btn {
    background: rgba(var(--discord-rgb), .16);
    border-color: rgba(var(--discord-rgb), .34)
}

.discord-server-btn:hover {
    background: rgba(var(--discord-rgb), .24);
    border-color: rgba(var(--discord-rgb), .5)
}

.discord-bot-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: #fff0;
    box-shadow: 0 16px 30px rgba(var(--accent-rgb), .22), 0 10px 22px rgb(0 0 0 / .25)
}

.discord-bot-btn:hover {
    filter: brightness(1.05)
}

.auth-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%
}

.auth-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%
}

.auth-btn,
.auth-pill,
.admin-action-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / .1);
    background: rgb(255 255 255 / .06);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--trans-fast);
    text-decoration: none
}

.auth-btn:hover,
.admin-action-btn:hover,
.auth-pill:hover {
    background: rgb(255 255 255 / .12);
    border-color: rgba(var(--accent-rgb), .45)
}

.auth-role-badge {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff
}

.auth-state {
    color: var(--muted);
    font-size: .84rem
}

.toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    max-height: 520px;
    overflow: visible;
    transition: max-height 220ms ease, opacity 180ms ease, margin 180ms ease
}

.app-header.collapsed .toolbar {
    max-height: 0;
    opacity: 0;
    margin-top: -8px;
    pointer-events: none;
    overflow: hidden
}

.header-toggle {
    position: fixed;
    right: 1vw;
    top: 1vh;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / .12);
    background: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / .06));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1100;
    box-shadow: 0 14px 34px rgb(0 0 0 / .34);
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease
}

.header-toggle:hover {
    background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .08));
    border-color: rgba(var(--accent-rgb), .34);
    box-shadow: 0 18px 38px rgb(0 0 0 / .38);
    transform: translateY(-1px)
}

.header-toggle:focus-visible {
    outline: none;
    border-color: rgba(var(--accent-rgb), .46);
    box-shadow: var(--ring), 0 18px 38px rgb(0 0 0 / .38)
}

.header-toggle-icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    display: inline-block;
    transition: transform 180ms ease
}

.header-toggle-icon::before,
.header-toggle-icon::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 9px;
    height: 2px;
    border-radius: 999px;
    background: currentColor
}

.header-toggle-icon::before {
    left: 0;
    transform: rotate(45deg);
    transform-origin: left center
}

.header-toggle-icon::after {
    right: 0;
    transform: rotate(-45deg);
    transform-origin: right center
}

.app-header.collapsed .header-toggle-icon {
    transform: rotate(180deg)
}

.searchbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 150px 140px;
    gap: 10px;
    align-items: stretch;
    width: 100%
}

.field,
.search-field,
.btn {
    width: 100%
}

.search-field,
.field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .04));
    box-shadow: var(--shadow-soft);
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast), transform var(--trans-fast)
}

.search-field {
    padding: 0 12px;
    min-height: 48px
}

.field {
    padding: 0;
    min-height: 48px;
    overflow: visible
}

.app-header.is-condensed .field,
.app-header.is-condensed .search-field,
.app-header.is-condensed .btn {
    min-height: 42px
}

.search-field:focus-within,
.field:focus-within,
.btn:focus-visible,
.theme-btn:focus-visible,
.tag:focus-visible,
.tag-chip:focus-visible,
#overlay-close:focus-visible,
.auth-btn:focus-visible,
.auth-input:focus-visible,
.auth-tab:focus-visible,
.modal-close:focus-visible,
.discord-btn:focus-visible,
.custom-select-trigger:focus-visible {
    outline: none;
    border-color: rgba(var(--accent-rgb), .68);
    box-shadow: var(--ring), var(--shadow-soft)
}

#tagInput {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background: #fff0;
    color: var(--text)
}

#tagInput::placeholder {
    color: rgb(255 255 255 / .4)
}

.icon {
    color: var(--muted);
    font-size: .92rem;
    user-select: none;
    flex: 0 0 auto;
    width: 16px;
    text-align: center
}

.btn {
    border: none;
    border-radius: 16px;
    padding: 0 18px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 16px 30px rgba(var(--accent-rgb), .22), 0 10px 22px rgb(0 0 0 / .25);
    transition: transform var(--trans-fast), filter var(--trans-fast), box-shadow var(--trans-fast);
    min-height: 48px
}

.btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px)
}

.btn:active {
    transform: translateY(0)
}

.searchbar>*,
.topbar-right>*,
.auth-area>*,
.auth-user>* {
    min-width: 0
}

.suggest-box {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    display: none;
    overflow: auto;
    max-height: 320px;
    z-index: 30;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgb(10 14 20 / .96);
    box-shadow: var(--shadow);
    padding: 8px
}

.sug {
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    transition: var(--trans-fast)
}

.sug:hover {
    background: rgb(255 255 255 / .08)
}

.top-ad {
    display: grid
}

.top-ad,
.in-feed-ad {
    min-height: 280px
}

.auth-area {
    min-width: 180px;
    min-height: 40px
}

.seo-intro {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 12px 0 20px;
}

.seo-copy {
    width: min(900px, 100%);
    background: var(--panel, rgb(255 255 255 / .04));
    border: 1px solid var(--border, rgb(255 255 255 / .08));
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgb(0 0 0 / .12);
}

.seo-copy h1 {
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text, #fff)
}

.seo-copy p {
    color: var(--muted, rgb(255 255 255 / .72));
    max-width: 90ch
}

.seo-copy nav {
    margin-top: 10px;
    line-height: 1.7
}

.seo-copy nav strong {
    color: var(--text, #fff)
}

.seo-copy a {
    color: var(--link, #9ecbff);
    text-decoration: none
}

.seo-copy a:hover {
    text-decoration: underline
}

.card-footer {
  background: linear-gradient(180deg, rgba(10,14,22,.55), rgba(8,11,18,.78));
  border-top: 1px solid rgba(255,255,255,.05);
}

.card-footer h2 {
  font-size: .96rem;
  line-height: 1.35;
}

.card-footer p {
  color: rgba(255,255,255,.62);
  font-size: .88rem;
  line-height: 1.5;
}

.card-footer h2 a {
    color: var(--text, #fff);
    text-decoration: none
}

.card-footer h2 a:hover {
    color: var(--link, #9ecbff)
}
.card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 0;
}

.card-meta-row .meta-chip,
.card-meta-row .booru-pill {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.media-type-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(8,12,20,.78);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.post-link,
.tag-chip,
.quick-tags a,
.footer-nav a,
.topic-chip,
.media-link,
.card-footer a {
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease
}

.post-link:hover,
.card-footer a:hover,
.footer-nav a:hover {
    color: var(--link, #9ecbff)
}

.card {
    min-width: 0
}

.post-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column
}

.media-wrap {
    position: relative
}

.card-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto
}

.pagination,
.discover-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.rail-card h2 {
    font-size: 1.1rem;
    margin: 0 0 10px;
    color: var(--text, #fff)
}

.rail-card p {
    color: var(--muted, rgb(255 255 255 / .72));
    line-height: 1.6
}

.pagination {
    padding: 20px 0 8px;
    align-items: center
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border, rgb(255 255 255 / .1));
    background: var(--panel, rgb(255 255 255 / .04));
    color: var(--text, #fff);
    text-decoration: none;
    font-weight: 600
}

.pagination a:hover {
    background: rgb(255 255 255 / .08);
    border-color: rgb(255 255 255 / .18)
}

.quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.quick-tags .tag,
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border, rgb(255 255 255 / .1));
    background: rgb(255 255 255 / .04);
    color: var(--text, #fff);
    text-decoration: none;
    font-size: .9rem
}

.quick-tags .tag:hover,
.tag-chip:hover {
    background: rgb(255 255 255 / .08);
    border-color: rgb(255 255 255 / .18);
    color: var(--link, #9ecbff)
}

.empty-state {
    width: 100%;
    padding: 24px;
    border-radius: 18px;
    border: 1px solid var(--border, rgb(255 255 255 / .08));
    background: var(--panel, rgb(255 255 255 / .04));
    color: var(--muted, rgb(255 255 255 / .72));
    text-align: center
}

@media (max-width:900px) {
    .seo-copy {
        padding: 16px
    }

    .card-footer {
        padding: 12px
    }

    .pagination {
        gap: 8px
    }

    .pagination a {
        width: 100%
    }
}

.ad-card {
    position: relative;
    overflow: hidden;
    margin: .5vw;
    border-radius: 20px;
    border: 1px solid rgb(255 255 255 / .08);
    background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .025));
    box-shadow: 0 8px 22px rgb(0 0 0 / .18);
    min-height: 104px;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.ad-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .82;
    background-image: var(--ad-art-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    pointer-events: none
}

.ad-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(8 12 18 / .84) 0%, rgb(8 12 18 / .72) 38%, rgb(8 12 18 / .46) 72%, rgb(8 12 18 / .18) 100%);
    z-index: 0;
    pointer-events: none
}

.ad-card::before {
    content: "Anzeige";
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgb(245 247 251 / .56);
    border: 1px solid rgb(255 255 255 / .08);
    background: rgb(255 255 255 / .04);
    border-radius: 999px;
    padding: 5px 8px;
    z-index: 2
}

.ad-card[data-size="banner"] {
    min-height: 128px
}

.ad-inner {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    min-height: inherit
}

.ad-card[data-size="banner"] .ad-inner {
    gap: 12px;
    grid-template-columns: 1.2fr auto;
    padding: 20px 22px
}

.ad-card[data-size="feed"] .ad-inner {
    gap: 12px;
    grid-template-columns: 1.1fr auto;
    padding: 16px 18px
}

.adsense-shell {
    overflow: hidden;
    min-height: 110px
}

.adsense-shell .ad-inner {
    display: block;
    padding: 14px
}

.adsense-top-slot {
    width: 100%;
    min-height: 100px
}

.adsense-feed-slot {
    width: 100%;
    min-height: 160px
}

.adsense-shell ins.adsbygoogle {
    border-radius: 14px;
    overflow: hidden
}

ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important
}

.ad-copy {
    display: grid;
    gap: 6px;
    max-width: 760px
}

.ad-eyebrow {
    color: rgb(245 247 251 / .64);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase
}

.ad-title {
    font-size: clamp(0.98rem, 0.94rem + 0.32vw, 1.18rem);
    font-weight: 750;
    line-height: 1.15;
    color: var(--text)
}

.ad-text {
    color: rgb(245 247 251 / .62);
    font-size: .88rem;
    line-height: 1.4;
    max-width: 52ch
}

.ad-cta {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: rgb(255 255 255 / .08);
    border: 1px solid rgb(255 255 255 / .1);
    transition: var(--trans-fast);
    white-space: nowrap
}

.ad-cta:hover {
    background: rgb(255 255 255 / .12);
    border-color: rgb(255 255 255 / .16);
    transform: translateY(-1px)
}

.in-feed-ad {
    grid-column: 1 / -1
}

main {
    padding: 18px 0 48px
}

.feed-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 22px;
    align-items: start
}

.feed-main {
    display: flex;
    flex-direction: column;
    align-items: center; /* DAS zentriert alles drin */
}

.feed-rail {
    position: sticky;
    top: 98px;
    display: grid;
    gap: 14px;
    align-self: start
}

.rail-card {
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .03));
    box-shadow: var(--shadow-soft);
    padding: 14px
}

.rail-title {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 12px;
    font-weight: 700
}

.rail-actions {
    display: grid;
    gap: 8px
}

.rail-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgb(255 255 255 / .08);
    background: rgb(255 255 255 / .04);
    color: var(--text);
    cursor: pointer;
    transition: var(--trans-fast);
    text-decoration: none
}

.rail-btn:hover,
.rail-btn.active {
    background: rgb(255 255 255 / .09);
    border-color: rgba(var(--accent-rgb), .34);
    transform: translateY(-1px)
}

.feed-head {
    display: grid;
    gap: 16px;
    margin-bottom: 18px
}

.feed-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap
}

.feed-title {
    color: var(--muted);
    font-size: .95rem
}

.meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chip-row {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none
}

.chip-row::-webkit-scrollbar {
    display: none
}

.topic-chip {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / .08);
    background: rgb(255 255 255 / .05);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--trans-fast);
    white-space: nowrap
}

.topic-chip:hover,
.topic-chip.active {
    background: rgb(255 255 255 / .1);
    border-color: rgba(var(--accent-rgb), .34)
}

.quick-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.quick-tags-label {
    color: var(--muted);
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.tag,
.tag-chip,
.meta-chip,
.booru-pill {
    border: 1px solid var(--border);
    background: rgb(255 255 255 / .06);
    color: var(--text);
    border-radius: 999px
}

.tag {
    padding: 9px 13px;
    cursor: pointer;
    transition: var(--trans-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.custom-select-compact {
    min-width: 160px
}

.tag:hover,
.tag-chip:hover {
    background: rgb(255 255 255 / .12);
    border-color: rgba(var(--accent-rgb), .5);
    transform: translateY(-1px)
}

.rail-btn i,
.topic-chip i,
.tag i,
.meta-chip i,
.quick-tags-label i,
.tags-dropdown summary i,
.overlay-caption-icon {
    font-size: .86rem;
    opacity: .92
}

.meta-chip,
.booru-pill {
    padding: 7px 10px;
    font-size: .8rem;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(22, 26, 34, .94), rgba(14, 18, 28, .9));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 16px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    isolation: isolate;
}

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-rgb), .55);
    box-shadow: 0 22px 42px rgba(0,0,0,.52);
}

.media-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(7, 10, 18, .85);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.media-wrap img,
.media-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .22s ease, filter .22s ease;
}

.media-topbar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    pointer-events: none;
    z-index: 6;
}

.media-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: auto;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(7,11,19,.85);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    transition: transform .12s ease, background .12s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

.action-btn:hover {
    transform: translateY(-1px);
    background: rgba(20, 28, 42, .95);
}

.action-btn i {
    font-size: .8rem;
}

.action-btn-report {
    background: linear-gradient(135deg, #ef476f, #ff8fa3);
    border-color: rgba(255,255,255,.3);
}

.action-btn-view {
    background: rgba(25, 34, 54,.95);
    border-color: rgba(255,255,255,.25);
}

.action-btn-admin {
    background: rgba(170, 45, 65,.95);
    border-color: rgba(255,200,200,.3);
}

.media-bottombar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(5,9,17,.86);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.meta-chip {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-size: .75rem;
}

.card-footer {
    padding: 12px;
    background: rgba(5, 9, 18, .92);
    border-top: 1px solid rgba(255,255,255,.08);
}

.card-footer h2 { margin: 0; font-size: .95rem; line-height: 1.3; color: #fff; }
.card-footer p { margin: 6px 0 10px; color: rgba(255,255,255,.72); font-size: .86rem; line-height: 1.35; }

}


.action-btn-admin:hover {
    background: rgb(110 32 32 / .95);
    border-color: rgb(255 120 120 / .38)
}

.booru-pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgb(15 21 33 / .76);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / .1);
    color: #eef4ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 6px 18px rgb(0 0 0 / .2)
}

.media-corner-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgb(10 16 26 / .82);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(255 255 255 / .1);
    color: #f4f7fb;
    font-size: 13px;
    font-weight: 700
}

.media-corner-badge-duration {
    right: 14px;
    bottom: 74px
}

.media-corner-badge-rating {
    left: 14px;
    bottom: 74px;
    color: #ffd6d6
}

.media-bottombar {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgb(28 38 58 / .82), rgb(15 21 33 / .9));
    backdrop-filter: blur(14px);
    border: 1px solid rgb(255 255 255 / .1);
    box-shadow: 0 10px 28px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .04)
}

.media-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgb(255 255 255 / .08);
    color: #f3f7fd;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgb(255 255 255 / .06)
}

.meta-chip i {
    opacity: .9
}

.card-footer {
    padding-top: 2px
}

.media-wrap:hover {
    transform: translateY(-2px);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 24px 48px rgb(0 0 0 / .38), inset 0 1px 0 rgb(255 255 255 / .05)
}

@media (max-width:480px) {
    .media-topbar {
        top: 10px;
        left: 10px;
        right: 10px
    }

    .media-bottombar {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 10px 12px
    }

    .action-btn {
        height: 34px;
        padding: 0 12px;
        font-size: 13px
    }

    .booru-pill,
    .meta-chip,
    .media-corner-badge {
        font-size: 12px
    }

    .media-corner-badge-duration,
    .media-corner-badge-rating {
        bottom: 66px
    }
}

.tags-dropdown {
    border-top: 1px solid rgb(255 255 255 / .08);
    padding-top: 12px;
    display: grid;
    gap: 10px
}

.tags-dropdown summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: rgb(255 255 255 / .92);
    font-weight: 600;
    padding: 12px 14px;
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: 14px;
    background: rgb(255 255 255 / .04);
    transition: var(--trans-fast)
}

.tags-dropdown summary:hover {
    background: rgb(255 255 255 / .08);
    border-color: rgba(var(--accent-rgb), .35)
}

.tags-dropdown[open] summary {
    border-color: rgba(var(--accent-rgb), .45);
    background: linear-gradient(180deg, rgb(255 255 255 / .08), rgb(255 255 255 / .04));
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px
}

.tags-dropdown summary::-webkit-details-marker {
    display: none
}

.chev {
    color: var(--muted);
    transition: transform var(--trans-fast)
}

.tags-dropdown[open] .chev {
    transform: rotate(180deg)
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -2px;
    padding: 2px 2px 0;
    animation: fadeSlideIn 180ms ease
}

.tags-dropdown[open] .tags-list {
    padding: 14px;
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: 16px;
    background: rgb(0 0 0 / .16)
}

.tag-chip {
    padding: 8px 11px;
    font-size: .82rem;
    cursor: pointer;
    transition: var(--trans-fast)
}

.empty-state,
.status-card {
    grid-column: 1 / -1;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / .04);
    color: var(--muted);
    text-align: center;
    padding: 42px 18px
}

#loader {
    margin-top: 20px;
    text-align: center;
    color: var(--muted);
    padding: 12px
}

#overlay,
.app-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(4 6 10 / .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px)
}

#overlay-content {
    position: relative;
    width: min(1180px, 100%);
    max-height: 100%;
    display: grid;
    gap: 14px
}

#overlay-close,
.nav-btn,
.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / .16);
    color: #fff;
    background: rgb(0 0 0 / .46);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: var(--trans-fast)
}

#overlay-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    font-size: 1.3rem
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: 1rem
}

#overlay-close:hover,
.nav-btn:hover,
.modal-close:hover {
    background: rgb(255 255 255 / .14);
    border-color: rgba(var(--accent-rgb), .5)
}

.overlay-stage {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: rgb(255 255 255 / .03);
    border: 1px solid rgb(255 255 255 / .12);
    box-shadow: var(--shadow);
    padding: 18px;
    min-height: 280px
}

#overlay-media img,
#overlay-media video {
    max-width: 100%;
    max-height: 76vh;
    width: 100%;
    object-fit: contain;
    border-radius: 18px;
    margin: 0 auto;
    background: rgb(255 255 255 / .02)
}

.overlay-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 4px
}

#overlay-caption {
    color: rgb(255 255 255 / .92);
    font-size: .96rem
}

.overlay-nav {
    display: flex;
    gap: 10px
}

.nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    font-size: 1rem
}

.modal-card {
    width: min(460px, 100%);
    border-radius: 24px;
    border: 1px solid rgb(255 255 255 / .12);
    background: linear-gradient(180deg, rgb(20 24 32 / .96), rgb(13 16 22 / .96));
    box-shadow: 0 24px 60px rgb(0 0 0 / .42);
    position: relative;
    overflow: hidden;
    padding: 22px
}

.modal-head h2 {
    margin: 0 0 6px;
    font-size: 1.18rem
}

.modal-head p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .92rem
}

.auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px
}

.auth-tab {
    flex: 1;
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgb(255 255 255 / .1);
    background: rgb(255 255 255 / .05);
    color: var(--text);
    cursor: pointer;
    transition: var(--trans-fast)
}

.auth-tab.active,
.auth-tab:hover {
    background: rgb(255 255 255 / .1);
    border-color: rgba(var(--accent-rgb), .45)
}

.auth-form {
    display: grid;
    gap: 12px
}

.auth-input {
    width: 100%;
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid rgb(255 255 255 / .12);
    background: rgb(255 255 255 / .06);
    color: var(--text);
    padding: 0 14px;
    outline: none
}

.auth-input::placeholder {
    color: rgb(255 255 255 / .42)
}

.auth-message {
    min-height: 22px;
    font-size: .9rem;
    color: #ffb6b6;
    margin-bottom: 8px
}

.auth-message.success {
    color: #9af1b7
}

.admin-list {
    display: grid;
    gap: 10px
}

.admin-user {
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: 16px;
    background: rgb(255 255 255 / .05);
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.admin-user small {
    color: var(--muted)
}

.admin-user-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.nsfw-notice {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(4 6 10 / .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.nsfw-notice.show {
    display: flex
}

.nsfw-card {
    width: min(560px, 100%);
    border-radius: 28px;
    border: 1px solid rgb(255 255 255 / .12);
    background: linear-gradient(180deg, rgb(20 24 32 / .98), rgb(13 16 22 / .98));
    box-shadow: 0 28px 70px rgb(0 0 0 / .5);
    padding: 26px
}

.nsfw-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgb(255 255 255 / .06);
    border: 1px solid rgb(255 255 255 / .1);
    color: var(--text);
    margin-bottom: 16px
}

.nsfw-card h2 {
    margin: 0 0 12px;
    font-size: 1.5rem
}

.nsfw-card p {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.65
}

.nsfw-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px
}

.nsfw-leave-btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid rgb(255 255 255 / .1);
    background: rgb(255 255 255 / .06);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--trans-fast)
}

.nsfw-leave-btn:hover {
    background: rgb(255 255 255 / .12);
    border-color: rgba(var(--accent-rgb), .45)
}

.nsfw-check {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .92rem
}

.nsfw-check input {
    accent-color: var(--accent)
}

.site-footer {
    margin-top: 42px;
    border-top: 1px solid rgb(255 255 255 / .08);
    background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(255 255 255 / .02));
    position: sticky;
    bottom: 0;
    z-index: 1
}

.footer-inner {
    width: min(var(--max-width), calc(100% - 28px));
    margin: 0 auto;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 0
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--muted);
    font-size: .92rem
}

.footer-brand strong {
    color: var(--text);
    font-size: .98rem
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.footer-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: .92rem;
    transition: color var(--trans-fast), opacity var(--trans-fast)
}

.footer-nav a:hover {
    color: var(--text)
}

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

.searchbar>*,
.topbar-right>*,
.auth-area>*,
.auth-user>* {
    min-width: 0
}

.custom-select {
    position: relative;
    min-width: 0;
    user-select: none
}

.topbar-right .custom-select {
    width: auto;
    min-width: 160px;
    flex: 0 0 auto
}

.searchbar .custom-select {
    width: 100%
}

.field.custom-select {
    display: block
}

.custom-select-native {
    display: none
}

.custom-select-trigger {
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 0 46px 0 16px;
    border: 0;
    border-radius: 18px;
    background: #fff0;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--trans-fast), transform var(--trans-fast);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

.custom-select-trigger:hover {
    background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .02))
}

.custom-select.open .custom-select-trigger {
    transform: translateY(-1px)
}

.custom-select-value {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .96rem;
    font-weight: 500;
    color: var(--text)
}

.custom-select-placeholder {
    color: rgb(245 247 251 / .52)
}

.custom-select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--muted);
    transition: transform var(--trans-fast), color var(--trans-fast)
}

.custom-select-arrow::before,
.custom-select-arrow::after {
    content: "";
    position: absolute;
    top: 8px;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: currentColor
}

.custom-select-arrow::before {
    left: 2px;
    transform: rotate(45deg);
    transform-origin: left center
}

.custom-select-arrow::after {
    right: 2px;
    transform: rotate(-45deg);
    transform-origin: right center
}

.custom-select.open .custom-select-arrow {
    transform: translateY(-50%) rotate(180deg);
    color: var(--text)
}

.custom-select-menu {
    position: fixed;
    z-index: 10000;
    display: grid;
    gap: 6px;
    padding: 8px;
    max-height: min(320px, calc(100vh - 24px));
    overflow: auto;
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: 20px;
    background: linear-gradient(180deg, rgb(18 24 34 / .98), rgb(10 14 20 / .98));
    box-shadow: 0 24px 60px rgb(0 0 0 / .42), 0 0 0 1px rgb(255 255 255 / .02) inset;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px) scale(.985);
    transform-origin: top center;
    transition: opacity 160ms ease, transform 180ms ease, visibility 180ms ease
}

.custom-select.open .custom-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1)
}

.custom-select-menu::-webkit-scrollbar {
    width: 10px
}

.custom-select-menu::-webkit-scrollbar-track {
    background: #fff0
}

.custom-select-menu::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / .12);
    border-radius: 999px;
    border: 2px solid #fff0;
    background-clip: padding-box
}

.custom-select-menu::-webkit-scrollbar-thumb:hover {
    background: rgb(255 255 255 / .2);
    border: 2px solid #fff0;
    background-clip: padding-box
}

.custom-select-option {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid #fff0;
    background: #fff0;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast), color var(--trans-fast);
    font-size: .95rem;
    line-height: 1.2
}

.custom-select-option:hover {
    background: rgb(255 255 255 / .07);
    border-color: rgba(var(--accent-rgb), .22);
    transform: translateY(-1px)
}

.custom-select-option.is-focused {
    background: rgb(255 255 255 / .08);
    border-color: rgba(var(--accent-rgb), .3)
}

.custom-select-option.is-selected {
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .12));
    border-color: rgba(var(--accent-rgb), .5);
    color: #fff
}

.custom-select-option.is-selected::after {
    content: "✓";
    margin-left: auto;
    font-size: .9rem;
    font-weight: 800;
    color: rgb(255 255 255 / .96)
}

.custom-select.open .custom-select-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .03) inset, 0 0 40px rgba(var(--accent-rgb), .08)
}

.post-card-inner {
    display: flex;
    flex-direction: column;
    gap: 12px
}

@media (max-width:1120px) {
    .feed-shell {
        grid-template-columns: 1fr
    }

    .feed-rail {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:1100px) {
    .topbar {
        grid-template-columns: 1fr
    }

    .topbar-right {
        justify-content: flex-start
    }

    .searchbar {
        grid-template-columns: minmax(0, 1fr) 1fr 1fr
    }

    .searchbar .btn {
        grid-column: 1 / -1
    }
}

@media (max-width:820px) {

    .ad-inner,
    .ad-card[data-size="banner"] .ad-inner,
    .ad-card[data-size="feed"] .ad-inner {
        grid-template-columns: 1fr;
        align-items: start
    }

    .ad-cta {
        justify-self: start
    }
}

@media (max-width:760px) {
    .feed-rail {
        grid-template-columns: 1fr
    }
}

@media (max-width:680px) {
    .header-toggle {
        right: 14px;
        bottom: 14px;
        width: 48px;
        height: 48px
    }

    .header-inner,
    main {
        width: min(var(--max-width), calc(100% - 18px))
    }

    .searchbar {
        grid-template-columns: 1fr
    }

    .searchbar .btn {
        grid-column: auto
    }

    .grid {
        grid-template-columns: 1fr
    }

    .overlay-stage {
        padding: 12px
    }

    #overlay,
    .app-modal {
        padding: 12px
    }

    .overlay-bottom {
        align-items: stretch
    }

    .topbar-right {
        justify-content: flex-start
    }

    .footer-inner {
        width: min(var(--max-width), calc(100% - 18px));
        align-items: flex-start;
        flex-direction: column
    }

    .footer-nav {
        gap: 10px 14px
    }

    .custom-select-trigger {
        min-height: 46px;
        border-radius: 16px
    }

    .custom-select-menu {
        border-radius: 18px;
        max-height: 280px
    }

    .custom-select-option {
        min-height: 42px
    }
}

@media (max-width:680px) {
    .searchbar {
        grid-template-columns: 1fr
    }

    .searchbar .btn {
        grid-column: auto
    }

    .custom-select-trigger {
        min-height: 46px;
        border-radius: 16px
    }

    .custom-select-menu {
        border-radius: 18px;
        max-height: 280px
    }

    .custom-select-option {
        min-height: 42px
    }
}

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .75);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px)
}

.modal-card {
    width: min(520px, 92vw);
    background: #171a21;
    border: 1px solid #2b3140;
    border-radius: 14px;
    padding: 20px;
    color: #fff;
    box-shadow: 0 20px 60px rgb(0 0 0 / .6)
}

.modal-title {
    margin: 0 0 14px 0;
    font-size: 20px
}

.form-group {
    margin-bottom: 14px
}

.form-group label {
    font-size: 14px;
    opacity: .9
}

.form-input {
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #2b3140;
    background: #0f1218;
    color: #fff;
    font-size: 14px
}

textarea.form-input {
    min-height: 110px;
    resize: vertical
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

.btn-primary {
    padding: 10px 16px;
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer
}

.btn-primary:hover {
    background: #2563eb
}

.btn-secondary {
    padding: 10px 16px;
    background: #2b3140;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer
}

.btn-secondary:hover {
    background: #3a4050
}

.admin-body {
    background: radial-gradient(circle at top left, rgb(88 101 242 / .18), transparent 30%), linear-gradient(180deg, #0b1020 0%, #0f1117 100%);
    color: #e8ecf1;
    min-height: 100vh
}

.admin-shell {
    max-width: 1480px;
    margin: 0 auto;
    padding: 32px 20px 48px
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 28px;
    padding: 24px;
    border: 1px solid rgb(255 255 255 / .08);
    background: rgb(17 20 28 / .85);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .25);
    backdrop-filter: blur(8px)
}

.admin-kicker {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #8f9bb3
}

.admin-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.1
}

.admin-subtitle {
    margin: 10px 0 0;
    color: #b7c0d1
}

.admin-topbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.admin-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px
}

.admin-panel {
    background: rgb(17 20 28 / .88);
    border: 1px solid rgb(255 255 255 / .07);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 12px 35px rgb(0 0 0 / .22)
}

.admin-panel-wide {
    grid-column: 1 / -1
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px
}

.panel-header h2 {
    margin: 0;
    font-size: 22px
}

.panel-header p {
    margin: 6px 0 0;
    color: #97a1b3;
    font-size: 14px
}

.panel-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 620px;
    overflow: auto;
    padding-right: 4px
}

.admin-card-item {
    border: 1px solid rgb(255 255 255 / .07);
    background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(255 255 255 / .015));
    border-radius: 16px;
    padding: 16px
}

.item-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px
}

.item-head h3 {
    margin: 0;
    font-size: 18px
}

.item-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #9aa4b6;
    font-size: 13px
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgb(255 255 255 / .08);
    color: #dce3ef;
    font-size: 12px;
    border: 1px solid rgb(255 255 255 / .08)
}

.badge-accent {
    background: rgb(88 101 242 / .22);
    border-color: rgb(88 101 242 / .4);
    color: #d8ddff
}

.badge-warn {
    background: rgb(255 193 7 / .18);
    border-color: rgb(255 193 7 / .3);
    color: #ffe7a3
}

.user-edit-form,
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.user-edit-form label,
.stack-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #b7c0d1
}

.full-span {
    grid-column: 1 / -1
}

.input,
.textarea {
    width: 100%;
    border: 1px solid rgb(255 255 255 / .08);
    background: #0c1018;
    color: #eef2f8;
    border-radius: 12px;
    padding: 11px 12px;
    outline: none;
    box-sizing: border-box
}

.input:focus,
.textarea:focus {
    border-color: rgb(88 101 242 / .8);
    box-shadow: 0 0 0 3px rgb(88 101 242 / .15)
}

.textarea {
    resize: vertical;
    min-height: 90px
}

.item-actions,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px
}

.btn {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease
}

.btn:hover {
    transform: translateY(-1px);
    opacity: .96
}

.btn-primary {
    background: linear-gradient(180deg, #6675ff 0%, #5563e6 100%);
    color: #fff
}

.btn-secondary {
    background: #1a2232;
    color: #e7edf8;
    border: 1px solid rgb(255 255 255 / .08)
}

.btn-danger {
    background: linear-gradient(180deg, #d9534f 0%, #b43f3a 100%);
    color: #fff
}

.item-note {
    margin-top: 10px;
    color: #c4cada;
    line-height: 1.5;
    white-space: pre-wrap
}

.preview-thumb {
    display: block;
    width: 100%;
    max-width: 180px;
    max-height: 180px;
    object-fit: cover;
    border-radius: 14px;
    margin-top: 12px;
    border: 1px solid rgb(255 255 255 / .08)
}

.empty-state {
    border: 1px dashed rgb(255 255 255 / .12);
    border-radius: 14px;
    padding: 18px;
    color: #8f98aa;
    text-align: center
}

@media (max-width:1100px) {
    .admin-layout {
        grid-template-columns: 1fr
    }

    .admin-panel-wide {
        grid-column: auto
    }
}

@media (max-width:720px) {

    .admin-topbar,
    .panel-header,
    .item-head {
        flex-direction: column
    }

    .user-edit-form,
    .form-grid {
        grid-template-columns: 1fr
    }

    .admin-shell {
        padding: 20px 14px 36px
    }
}

/* ===== Modern polish / override layer ===== */

:root {
  --surface-1: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.065);
  --surface-3: rgba(255, 255, 255, 0.085);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text-soft: rgba(245, 247, 251, 0.78);
  --text-faint: rgba(245, 247, 251, 0.56);
  --radius-2xl: 28px;
  --radius-xl: 22px;
  --radius-lg: 16px;
}

/* Mehr Luft und etwas ruhigere Seite */
main {
  padding: 24px 0 56px;
}

.feed-shell {
  gap: 26px;
}

.feed-head {
  gap: 18px;
  margin-bottom: 22px;
}

/* Header etwas cleaner */
.app-header {
  background:
    linear-gradient(to bottom, rgba(8, 12, 18, 0.9), rgba(8, 12, 18, 0.72));
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.header-inner {
  padding: 14px 0 12px;
}

.brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  border-color: var(--border-soft);
}

.brand-text h1 {
  letter-spacing: -0.03em;
}

.subinfo {
  color: var(--text-faint);
}

/* Form Controls moderner und weniger schwer */
.search-field,
.field,
.custom-select-trigger,
.auth-btn,
.auth-pill,
.admin-action-btn,
.rail-btn,
.topic-chip,
.tag,
.tag-chip,
.meta-chip,
.booru-pill {
  border-color: var(--border-soft);
}

.search-field,
.field {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
}

.search-field:focus-within,
.field:focus-within,
.custom-select-trigger:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1), var(--shadow-soft);
}

/* Buttons etwas cleaner */
.btn,
.discord-bot-btn {
  border-radius: 14px;
  box-shadow:
    0 12px 24px rgba(var(--accent-rgb), 0.2),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.btn:hover,
.discord-bot-btn:hover {
  transform: translateY(-2px);
}

/* Sidebar Cards moderner */
.rail-card {
  border-radius: 22px;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.028));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.rail-title {
  color: var(--text-faint);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.rail-btn {
  min-height: 46px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.rail-btn:hover,
.rail-btn.active {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(var(--accent-rgb), 0.26);
}

/* SEO-Box deutlich hochwertiger */
.seo-intro {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 4px 0 22px;
  padding: 0;
}

.seo-copy {
  width: min(980px, 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 24px 24px 22px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.seo-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.seo-copy p {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 72ch;
}

.seo-copy nav {
  margin-top: 14px;
  color: var(--text-faint);
}

.seo-copy nav a {
  color: #b7d6ff;
}

.seo-copy nav a:hover {
  color: #d6e8ff;
  text-decoration: none;
}

/* Feed Meta dezenter */
.feed-title {
  color: var(--text-faint);
  font-size: 0.96rem;
}

.meta-row {
  gap: 10px;
}

.meta-chip {
  min-height: 34px;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  font-weight: 650;
}

/* Topic Chips moderner */
.topic-chip {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.topic-chip:hover,
.topic-chip.active {
  background: rgba(255, 255, 255, 0.095);
  border-color: rgba(var(--accent-rgb), 0.28);
}

/* Cards: dunkler, edler, anime-style */
.card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(10, 14, 22, 0.95), rgba(8, 11, 20, 0.92));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow:
    0 26px 50px rgba(0, 0, 0, 0.38),
    0 0 32px rgba(var(--accent-rgb), 0.12);
}

.media-wrap {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: linear-gradient(180deg, rgba(18, 22, 35, 0.88), rgba(10, 12, 21, 0.92));
}

.card-media {
  aspect-ratio: 16 / 11;
}

.card:hover .media-wrap img,
.card:hover .media-wrap video {
  transform: scale(1.02);
}

/* Floating Overlays im Card-Media ruhiger */
.media-topbar {
  top: 12px;
  left: 12px;
  right: 12px;
}

.media-bottombar {
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 11px 13px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(26, 36, 56, 0.82), rgba(15, 21, 33, 0.9));
}

.action-btn,
.booru-pill,
.media-corner-badge,
.meta-chip {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Card Footer viel ruhiger */
.card-footer {
  padding: 14px 14px 18px;
  gap: 12px;
}

.card-footer h2 {
  font-size: 1rem;
  line-height: 1.38;
  letter-spacing: -0.015em;
}

.card-footer p {
  color: var(--text-faint);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Tags moderner und weniger schwer */
.tags-dropdown {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.tags-dropdown summary {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.tags-dropdown summary:hover {
  background: rgba(255, 255, 255, 0.07);
}

.tags-dropdown[open] .tags-list {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.14);
}

/* Quick tags / chips */
.quick-tags .tag,
.tag-chip {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.quick-tags .tag:hover,
.tag-chip:hover {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(var(--accent-rgb), 0.18);
  transform: translateY(-1px);
}

/* Modal / Overlay cleaner */
.modal-card,
#overlay-content,
.overlay-stage {
  border-radius: 24px;
}

.modal-card {
  border-color: rgba(255, 255, 255, 0.1);
}

#overlay {
  background: rgba(4, 6, 10, 0.9);
}

/* Footer moderner und weniger sticky-lastig */
.site-footer {
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015));
}

.footer-inner {
  min-height: 82px;
}

/* Bessere mobile Luft */
@media (max-width: 1120px) {
  .feed-shell {
    gap: 20px;
  }

  .seo-copy {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .seo-copy {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .seo-copy h1 {
    font-size: 1.7rem;
  }

  .card {
    border-radius: 22px;
  }

  .media-wrap {
    border-radius: 20px;
  }

  .rail-card {
    border-radius: 18px;
  }
}
@media (max-width: 768px) {
  .app-header .toolbar {
    max-height: 0;
    opacity: 0;
    margin-top: -8px;
    pointer-events: none;
    overflow: hidden;
  }

  .app-header.mobile-open .toolbar {
    max-height: 520px;
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
    overflow: visible;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .topbar-right {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
  }

  .menu-toggle:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(var(--accent-rgb), .34);
  }
}
);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.04)
  );
  box-shadow: var(--shadow);
}

.hero-kicker {
  margin: 0 0 10px;
  color: #b79cff;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-card h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero-card p:last-child {
  margin: 0;
  color: var(--soft);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Grid */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.post-card {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.07),
    rgba(255,255,255,0.04)
  );
  box-shadow: var(--shadow);
  transition: transform 180ms ease, border-color 180ms ease;
}

.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
}

.post-image-link {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #11182c;
}

.post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card-content {
  padding: 18px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}

.meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
}

.post-card-title {
  margin: 0 0 10px;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.post-card-title a {
  text-decoration: none;
}

.post-card-title a:hover {
  color: #fff;
}

.post-card-excerpt {
  margin: 0;
  color: var(--soft);
  line-height: 1.7;
}

.post-card-actions {
  margin-top: 16px;
}

.read-more {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #cdb8ff;
  font-weight: 700;
}

.read-more:hover {
  color: #e5dbff;
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.pagination-link {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  font-weight: 700;
  transition: 160ms ease;
}

.pagination-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.pagination-link.active {
  color: #fff;
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
}
.media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.action-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  gap: 5px;
}

.action-btn span {
  white-space: nowrap;
}

.media-wrap {
  position: relative;
  overflow: hidden;
}

.card-drawer {
  margin-top: 0;
}

.card-drawer-summary {
  min-height: 46px;
}

@media (max-width: 420px) {
  .action-btn {
    padding: 0 8px;
    font-size: 11px;
  }

  .action-btn span {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.action-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  gap: 5px;
}

.action-btn span {
  white-space: nowrap;
}
.media-bottombar {
  display: none !important;
}

.post-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.media-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 22px 22px 16px 16px;
  aspect-ratio: 16 / 11;
  background: linear-gradient(180deg, rgba(16,22,34,.92), rgba(9,12,21,.96));
}

.card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-drawer {
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(8,11,18,.72), rgba(7,10,17,.92));
}

.card-drawer summary {
  list-style: none;
}

.card-drawer summary::-webkit-details-marker {
  display: none;
}

.card-drawer-summary {
  min-height: 52px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: rgba(255,255,255,.92);
  user-select: none;
  transition: background .18s ease;
}

.card-drawer-summary:hover {
  background: rgba(255,255,255,.04);
}

.card-drawer-label,
.card-drawer-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card-drawer-meta {
  color: var(--muted);
  font-size: .88rem;
}

.card-drawer .chev {
  transition: transform .18s ease;
}

.card-drawer[open] .chev {
  transform: rotate(180deg);
}

.card-drawer-body {
  padding: 0 14px 14px;
  display: grid;
  gap: 12px;
  animation: fadeSlideIn 180ms ease;
}

.card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.card-footer {
  padding: 0;
  background: transparent;
  border-top: 0;
  display: grid;
  gap: 10px;
}

.card-title {
  margin: 0;
  font-size: .98rem;
  line-height: 1.38;
}

.card-title a {
  color: var(--text);
  text-decoration: none;
}

.card-title a:hover {
  color: #b7d6ff;
}

.card-description {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: .9rem;
  line-height: 1.55;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card:hover .media-wrap img,
.card:hover .media-wrap video {
  transform: scale(1.03);
}
/* Mobile */
@media (max-width: 900px) {
  body.layout-page {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    min-height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-inner {
    height: auto;
  }

  .sidebar-footer {
    display: none;
  }

  .page-shell {
    padding: 22px 14px 40px;
  }

  .hero-card {
    padding: 20px 16px;
    border-radius: 22px;
  }
}

@media (max-width: 640px) {
  .sidebar-nav {
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-item {
    white-space: nowrap;
  }

  .post-grid {
    grid-template-columns: 1fr;
  }
}.home-blog-preview {
  margin: 0 0 26px;
  display: grid;
  gap: 14px;
}

.home-blog-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.home-blog-preview-head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.home-blog-preview-link {
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  transition: var(--trans-fast);
}

.home-blog-preview-link:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(var(--accent-rgb), .3);
}

.home-blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-blog-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(11,15,24,.96), rgba(8,11,19,.94));
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

.home-blog-card-image-link {
  display: block;
}

.home-blog-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.home-blog-card-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.home-blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: .85rem;
}

.home-blog-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.home-blog-card-title a {
  color: var(--text);
  text-decoration: none;
}

.home-blog-card-title a:hover {
  color: #b7d6ff;
}

.home-blog-card-excerpt {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: .92rem;
}

@media (max-width: 980px) {
  .home-blog-preview-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }

  .topbar-right {
    display: flex;
  }
}
@media (max-width: 768px) {
  .app-header .toolbar {
    max-height: 0;
    opacity: 0;
    margin-top: -8px;
    pointer-events: none;
    overflow: hidden;
  }

  .app-header.mobile-open .toolbar {
    max-height: 520px;
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
    overflow: visible;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .topbar-right {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow-soft);
  }

  .menu-toggle:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(var(--accent-rgb), .34);
  }
}
.app-header.collapsed .toolbar {
    max-height: 0;
    opacity: 0;
    margin-top: -8px;
    pointer-events: none;
    overflow: hidden
}

@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }

  .topbar-right {
    display: flex;
  }
}
:root{--max-width:1440px;--rail-w:320px;--grid-min:320px;--header-h:88px;--panel-bg:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028));--panel-stroke:rgba(255,255,255,.09);--card-bg:linear-gradient(180deg,rgba(11,15,24,.96),rgba(8,11,19,.94));--card-hover:rgba(var(--accent-rgb),.16);--chip-bg:rgba(255,255,255,.05);--chip-hover:rgba(255,255,255,.1)}.header-inner,main,.footer-inner{width:min(var(--max-width),calc(100% - 32px))}.app-header{border-bottom:1px solid var(--panel-stroke);box-shadow:0 10px 34px rgba(0,0,0,.2)}.header-inner{padding:12px 0 10px}.topbar{grid-template-columns:minmax(240px,auto) minmax(0,1fr);gap:18px;align-items:center}.brand-mark{width:58px;height:58px;border-radius:18px}.brand-text h1{font-size:clamp(1.12rem,1rem + .55vw,1.42rem)}.subinfo{font-size:.88rem;opacity:.9}.topbar-right{gap:12px}.theme-switcher,.discord-btn,.auth-btn,.auth-pill,.admin-action-btn{min-height:42px}.toolbar{gap:14px}.searchbar{grid-template-columns:minmax(0,1fr) 160px 160px 140px;gap:12px}.search-field,.field,.custom-select-trigger{border-radius:16px}.search-field,.field{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border-color:var(--panel-stroke)}.btn{border-radius:16px;min-height:48px}.feed-shell{grid-template-columns:minmax(0,1fr) var(--rail-w);gap:28px;align-items:start}.feed-main{align-items:stretch}.feed-head{gap:18px;margin-bottom:24px}.feed-topline{align-items:flex-end}.seo-intro{margin:2px 0 24px}.seo-copy{width:min(100%,1040px);padding:26px 26px 22px;border-radius:26px;background:var(--panel-bg);border:1px solid var(--panel-stroke);box-shadow:0 20px 44px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.03)}.seo-copy h1{font-size:clamp(1.9rem,2.3vw,2.7rem);line-height:1.02;margin:0 0 12px}.seo-copy p{max-width:76ch;font-size:.98rem;line-height:1.72}.chip-row{gap:10px;padding-bottom:4px}.topic-chip,.quick-tags .tag,.tag-chip,.meta-chip,.booru-pill{background:var(--chip-bg)}.topic-chip{min-height:42px;padding:0 16px}.topic-chip:hover,.topic-chip.active,.quick-tags .tag:hover,.tag-chip:hover{background:var(--chip-hover)}.feed-rail{top:104px;gap:16px}.rail-card{padding:18px;border-radius:24px;background:var(--panel-bg);border:1px solid var(--panel-stroke);box-shadow:0 16px 34px rgba(0,0,0,.18)}.rail-title{font-size:.76rem;letter-spacing:.1em;margin-bottom:12px}.rail-actions{gap:10px}.rail-btn{min-height:48px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.045)}.grid{grid-template-columns:repeat(auto-fill,minmax(var(--grid-min),1fr));gap:22px}.card{border-radius:24px;border:1px solid rgba(255,255,255,.08);background:var(--card-bg);box-shadow:0 18px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}.card:hover{transform:translateY(-5px);border-color:rgba(var(--accent-rgb),.32);box-shadow:0 28px 54px rgba(0,0,0,.4),0 0 0 1px rgba(var(--accent-rgb),.08),0 0 34px var(--card-hover)}.post-card-inner{gap:0}.media-wrap{border-radius:22px 22px 18px 18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(16,22,34,.92),rgba(9,12,21,.96));box-shadow:0 16px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)}.media-wrap img,.media-wrap video{transition:transform .28s ease,filter .28s ease}.media-topbar{top:12px;left:12px;right:12px;justify-content:space-between}.media-actions{gap:8px}.action-btn{height:36px;padding:0 12px;border-radius:999px;background:rgba(8,12,20,.74);border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 18px rgba(0,0,0,.2)}.action-btn-view{background:rgba(15,25,40,.86)}.action-btn-report{background:linear-gradient(135deg,#f06292,#ff8ba7)}.action-btn:hover{transform:translateY(-1px) scale(1.01)}.booru-pill,.media-corner-badge,.meta-chip{min-height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(10,16,26,.7)}.media-bottombar{left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(22,31,49,.8),rgba(13,19,31,.9));border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 28px rgba(0,0,0,.24)}.media-corner-badge-duration,.media-corner-badge-rating{bottom:70px}.card-footer{padding:15px 15px 17px;background:linear-gradient(180deg,rgba(9,13,21,.76),rgba(7,10,17,.92));border-top:1px solid rgba(255,255,255,.06);gap:12px}.card-footer h2{font-size:1rem;line-height:1.35;margin:0}.card-footer p{margin:0;color:var(--text-faint);font-size:.92rem;line-height:1.58;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.tags-dropdown{margin-top:2px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}.tags-dropdown summary{min-height:42px;padding:0 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.tags-dropdown[open] .tags-list{padding:12px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}.tag-chip{min-height:34px;padding:0 12px;font-size:.8rem}.pagination{padding:24px 0 8px}.pagination a{min-height:42px;padding:0 16px;background:rgba(255,255,255,.04)}.site-footer{margin-top:64px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border-top:1px solid rgba(255,255,255,.06)}.footer-inner{min-height:84px;padding:20px 0}.custom-select-menu{border-radius:18px}.custom-select-option{min-height:42px;border-radius:12px}@media (max-width:1180px){:root{--rail-w:290px;--grid-min:300px}.feed-shell{grid-template-columns:minmax(0,1fr) 290px}}@media (max-width:1080px){.feed-shell{grid-template-columns:1fr}.feed-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.seo-copy{width:100%}}@media (max-width:860px){.topbar{grid-template-columns:1fr;align-items:start}.topbar-right{justify-content:flex-start}.searchbar{grid-template-columns:1fr 1fr}.searchbar .search-field{grid-column:1/-1}.searchbar .btn{grid-column:1/-1}.feed-rail{grid-template-columns:1fr}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (max-width:680px){.header-inner,main,.footer-inner{width:min(var(--max-width),calc(100% - 18px))}.header-inner{padding:10px 0}.brand-mark{width:50px;height:50px;border-radius:16px}.brand-text h1{font-size:1.05rem}.searchbar,.grid{grid-template-columns:1fr}.card{border-radius:20px}.media-wrap{border-radius:18px 18px 16px 16px}.card-footer{padding:14px 13px 16px}.seo-copy{padding:18px 16px;border-radius:20px}.seo-copy h1{font-size:1.65rem}.feed-head{margin-bottom:18px}.media-corner-badge-duration,.media-corner-badge-rating{bottom:66px}}
/* === 2026-03 YouTube-inspired home layout refresh === */
body.yt-shell {
  --yt-bg: #0f0f0f;
  --yt-surface: #181818;
  --yt-surface-2: #212121;
  --yt-line: rgba(255,255,255,.08);
  background: #0f0f0f;
}
body.yt-shell::before,
body.yt-shell::after { display:none; }
body.yt-shell .app-header {
  background: rgba(15,15,15,.94);
  border-bottom: 1px solid var(--yt-line);
  backdrop-filter: blur(14px);
}
body.yt-shell .header-inner,
body.yt-shell main {
  width: min(100%, 1700px);
  padding-left: 16px;
  padding-right: 16px;
}
body.yt-shell .topbar {
  grid-template-columns: 260px minmax(0,1fr);
  align-items: center;
}
body.yt-shell .brand-wrap { gap: 12px; }
body.yt-shell .brand-mark {
  width: 40px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(180deg,#ff3b30,#d90b17);
  border: none;
  padding: 3px;
}
body.yt-shell .brand-logo { object-fit: contain; filter: brightness(0) invert(1); }
body.yt-shell .toolbar {
  display:grid;
  gap:12px;
}
body.yt-shell .topbar-right {
  justify-content: flex-end;
}
body.yt-shell .theme-switcher {
  background: var(--yt-surface);
  border: 1px solid var(--yt-line);
}
body.yt-shell .theme-btn {
  padding: 8px 12px;
  font-size: .82rem;
}
body.yt-shell .searchbar {
  display:grid;
  grid-template-columns: minmax(0,1fr) 180px 160px auto;
  align-items:center;
  gap: 12px;
}
body.yt-shell .search-field,
body.yt-shell .custom-select,
body.yt-shell .searchbar .btn {
  min-height: 44px;
}
body.yt-shell .search-field {
  background: #121212;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
}
body.yt-shell .searchbar .btn {
  border-radius: 999px;
  background: #272727;
  border: 1px solid var(--yt-line);
}
body.yt-shell .feed-shell {
  display:grid;
  grid-template-columns: 256px minmax(0,1fr);
  gap: 24px;
  align-items: start;
}
body.yt-shell .feed-rail {
  order: -1;
  position: sticky;
  top: 88px;
}
body.yt-shell .feed-main { min-width: 0; }
body.yt-shell .rail-card,
body.yt-shell .seo-intro,
body.yt-shell .home-blog-preview,
body.yt-shell .feed-head,
body.yt-shell .card,
body.yt-shell .modal-card,
body.yt-shell .site-footer {
  background: transparent;
  border-color: var(--yt-line);
  box-shadow: none;
}
body.yt-shell .rail-card {
  background: #161616;
  border: 1px solid var(--yt-line);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
}
body.yt-shell .yt-nav-list {
  display:flex;
  flex-direction:column;
  gap: 4px;
}
body.yt-shell .yt-nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--text);
  text-decoration:none;
}
body.yt-shell .yt-nav-item:hover,
body.yt-shell .yt-nav-item.active { background: #272727; }
body.yt-shell .rank-card .rank-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#272727;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  margin-bottom: 10px;
}
body.yt-shell .rank-progress {
  height:8px;
  border-radius:999px;
  background:#2a2a2a;
  overflow:hidden;
  margin-bottom:10px;
}
body.yt-shell .rank-progress span {
  display:block;
  height:100%;
  border-radius:inherit;
  background: linear-gradient(90deg, #ff3b30, #ff8a80);
}
body.yt-shell .rank-copy {
  color: var(--muted);
  font-size:.92rem;
  margin-bottom:12px;
}
body.yt-shell .unlock-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
body.yt-shell .unlock-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:#202020;
  font-size:.84rem;
}
body.yt-shell .feed-hero-banner {
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 20px;
  padding: 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,59,48,.18), transparent 30%),
    linear-gradient(180deg, #1c1c1c, #121212);
  border: 1px solid var(--yt-line);
  margin-bottom: 14px;
}
body.yt-shell .feed-hero-title {
  margin: 8px 0 8px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
}
body.yt-shell .feed-hero-copy {
  margin:0;
  max-width: 70ch;
  color: rgba(255,255,255,.75);
  line-height:1.6;
}
body.yt-shell .feed-hero-stats {
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
body.yt-shell .hero-stat {
  background:#181818;
  border:1px solid var(--yt-line);
  border-radius:18px;
  padding:16px;
}
body.yt-shell .hero-stat strong {
  display:block;
  font-size:1.35rem;
  margin-bottom:4px;
}
body.yt-shell .yt-meta-row,
body.yt-shell .chip-row {
  margin-top: 14px;
}
body.yt-shell .topic-chip,
body.yt-shell .meta-chip {
  border-radius: 999px;
  background:#272727;
  border: 1px solid transparent;
}
body.yt-shell .topic-chip.active,
body.yt-shell .topic-chip:hover { background:#fff; color:#0f0f0f; }
body.yt-shell .home-blog-preview,
body.yt-shell .seo-intro {
  padding: 18px 0;
}
body.yt-shell .grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px 16px;
}
body.yt-shell .card {
  padding: 0;
  border:none;
  overflow: visible;
}
body.yt-shell .post-card-inner {
  display:flex;
  flex-direction:column;
  gap: 10px;
}
body.yt-shell .media-wrap {
  border-radius: 18px;
  overflow:hidden;
  background:#202020;
  aspect-ratio: 16/9;
}
body.yt-shell .card-media {
  width:100%;
  height:100%;
  object-fit: cover;
}
body.yt-shell .media-topbar {
  inset: auto 10px 10px 10px;
  top: auto;
}
body.yt-shell .action-btn {
  border-radius: 999px;
  background: rgba(15,15,15,.78);
  backdrop-filter: blur(8px);
}
body.yt-shell .card-drawer {
  background: transparent;
  border:none;
  padding:0;
}
body.yt-shell .card-drawer-summary {
  display:none;
}
body.yt-shell .card-drawer-body {
  padding: 0;
  border:none;
}
body.yt-shell .card-meta-row {
  margin-bottom: 8px;
}
body.yt-shell .video-meta-row {
  display:flex;
  gap:12px;
  align-items:flex-start;
}
body.yt-shell .channel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background:#2a2a2a;
  font-weight:700;
  flex: 0 0 auto;
}
body.yt-shell .video-meta-copy {
  min-width:0;
}
body.yt-shell .card-title {
  margin:0 0 4px;
  font-size:1rem;
  line-height:1.35;
}
body.yt-shell .card-description {
  margin:0;
  color: rgba(255,255,255,.66);
  font-size: .88rem;
}
body.yt-shell .tags-list {
  margin-top: 10px;
}
body.yt-shell .tag-chip {
  background:#222;
  border: 1px solid var(--yt-line);
  border-radius:999px;
  font-size:.8rem;
}
body.yt-shell .site-footer {
  margin-top: 30px;
  border-top: 1px solid var(--yt-line);
  background: #0f0f0f;
}
@media (max-width: 1180px) {
  body.yt-shell .feed-shell,
  body.yt-shell .topbar,
  body.yt-shell .feed-hero-banner {
    grid-template-columns: 1fr;
  }
  body.yt-shell .feed-rail {
    position: static;
    order: 2;
  }
}
@media (max-width: 900px) {
  body.yt-shell .searchbar {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  body.yt-shell .header-inner,
  body.yt-shell main {
    padding-left: 12px;
    padding-right: 12px;
  }
  body.yt-shell .searchbar,
  body.yt-shell .feed-hero-banner {
    grid-template-columns: 1fr;
  }
  body.yt-shell .grid {
    grid-template-columns: 1fr;
  }
}

html[data-theme="sunset"] {
  --bg: #1a0d10;
  --bg-soft: #261218;
  --accent: #ff845c;
  --accent-2: #ffd15c;
  --accent-rgb: 255, 132, 92;
  --header-bg: linear-gradient(to bottom, rgba(26, 13, 16, 0.95), rgba(38, 18, 24, 0.82));
}

html[data-theme="mono"] {
  --bg: #0e0f11;
  --bg-soft: #15171b;
  --accent: #b9c2cf;
  --accent-2: #eef2f6;
  --accent-rgb: 185, 194, 207;
  --header-bg: linear-gradient(to bottom, rgba(10, 11, 13, 0.95), rgba(18, 20, 23, 0.84));
}

body[data-layout="compact"] .feed-grid,
body[data-layout="compact"] .results-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

body[data-layout="compact"] .feed-hero-banner,
body[data-layout="compact"] .hero-surface {
  padding: 16px;
}

body[data-layout="compact"] .topic-chip {
  padding: 8px 12px;
}

body[data-layout="cinema"] .header-inner,
body[data-layout="cinema"] main {
  width: min(1480px, calc(100% - 28px));
}

body[data-layout="cinema"] .feed-grid,
body[data-layout="cinema"] .results-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

body[data-layout="cinema"] .feed-hero-banner {
  min-height: 240px;
  align-items: end;
}


/* === 2026-03 Showcase + Overlay usability refresh === */
body.showcase-shell {
  --showcase-panel: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  --showcase-panel-strong: linear-gradient(180deg, rgba(14,19,30,.96), rgba(8,12,20,.94));
  --showcase-line: rgba(255,255,255,.10);
  --showcase-soft: rgba(255,255,255,.72);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 5000;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-weight: 700;
  transition: top .18s ease;
}

.skip-link:focus {
  top: 16px;
}

body.showcase-shell .feed-shell {
  gap: 22px;
}

body.showcase-shell .hero-showcase {
  display: grid;
  gap: 18px;
  margin-bottom: 20px;
}

body.showcase-shell .hero-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 18px;
  align-items: stretch;
}

body.showcase-shell .hero-copy,
body.showcase-shell .hero-panel,
body.showcase-shell .spotlight-card,
body.showcase-shell .seo-copy,
body.showcase-shell .home-blog-preview,
body.showcase-shell .rail-card,
body.showcase-shell #overlay-content {
  background: var(--showcase-panel-strong);
  border: 1px solid var(--showcase-line);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

body.showcase-shell .hero-copy,
body.showcase-shell .hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 24px;
}

body.showcase-shell .hero-copy::before,
body.showcase-shell .hero-panel::before,
body.showcase-shell .spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), .22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 60%);
}

body.showcase-shell .hero-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .16);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(var(--accent-rgb), .3);
}

body.showcase-shell .hero-title {
  position: relative;
  z-index: 1;
  margin: 14px 0 10px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: .98;
  letter-spacing: -.05em;
}

body.showcase-shell .hero-text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 58ch;
  color: var(--showcase-soft);
  font-size: 1rem;
  line-height: 1.7;
}

body.showcase-shell .hero-actions,
body.showcase-shell .spotlight-actions,
body.showcase-shell .feed-summary-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.showcase-shell .hero-actions {
  margin-top: 20px;
}

body.showcase-shell .hero-stats {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.showcase-shell .hero-stat,
body.showcase-shell .overview-stat {
  min-height: 82px;
  border-radius: 20px;
  padding: 14px 16px;
  display: grid;
  gap: 4px;
  align-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

body.showcase-shell .hero-stat strong,
body.showcase-shell .overview-stat strong {
  font-size: 1.3rem;
}

body.showcase-shell .hero-stat small,
body.showcase-shell .overview-stat small {
  color: var(--muted);
  font-size: .82rem;
}

body.showcase-shell .feed-topline {
  position: relative;
  z-index: 1;
}

body.showcase-shell .chip-row {
  position: relative;
  z-index: 1;
  margin-top: 16px;
}

body.showcase-shell .topic-chip {
  border-radius: 999px;
  min-height: 42px;
  padding: 0 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
}

body.showcase-shell .topic-chip.active,
body.showcase-shell .topic-chip:hover {
  background: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .32);
}

body.showcase-shell .feed-summary {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

body.showcase-shell .feed-summary-title {
  margin: 0 0 6px;
  font-size: 1.08rem;
}

body.showcase-shell .feed-summary-text {
  margin: 0;
  color: var(--showcase-soft);
  line-height: 1.65;
}

body.showcase-shell .inline-link-btn,
body.showcase-shell .btn-secondary {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

body.showcase-shell .inline-link-btn:hover,
body.showcase-shell .btn-secondary:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.1);
  border-color: rgba(var(--accent-rgb), .28);
}

body.showcase-shell .hero-cta-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}

body.showcase-shell .spotlight-grid {
  display: grid;
  grid-template-columns: 1.25fr .9fr .9fr;
  gap: 18px;
}

body.showcase-shell .spotlight-card {
  position: relative;
  min-height: 280px;
  border-radius: 26px;
  overflow: hidden;
}

body.showcase-shell .spotlight-card-large {
  min-height: 340px;
}

body.showcase-shell .spotlight-media {
  position: absolute;
  inset: 0;
}

body.showcase-shell .spotlight-asset,
body.showcase-shell .spotlight-media img,
body.showcase-shell .spotlight-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.showcase-shell .spotlight-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.68);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .22), rgba(255,255,255,.05));
}

body.showcase-shell .spotlight-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, rgba(3,5,9,0), rgba(3,5,9,.84) 44%, rgba(3,5,9,.96));
}

body.showcase-shell .spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.showcase-shell .spotlight-overlay h2 {
  margin: 0;
  font-size: 1.18rem;
}

body.showcase-shell .spotlight-overlay p {
  margin: 0;
  color: rgba(255,255,255,.76);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.showcase-shell .grid {
  gap: 18px;
}

body.showcase-shell .card {
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}

body.showcase-shell .post-card-inner {
  position: relative;
}

body.showcase-shell .media-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 22px 22px 18px 18px;
  cursor: zoom-in;
  background: rgba(255,255,255,.03);
}

body.showcase-shell .card-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .26s ease, filter .26s ease;
}

body.showcase-shell .card:hover .card-media {
  transform: scale(1.03);
  filter: saturate(1.06);
}

body.showcase-shell .card .card-media {
  pointer-events: none;
}

body.showcase-shell .media-topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

body.showcase-shell .media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.showcase-shell .action-btn {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8,12,20,.76);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.showcase-shell .action-btn-view {
  background: rgba(12, 28, 52, .88);
}

body.showcase-shell .video-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0,0,0,.08), rgba(0,0,0,.24));
  color: white;
  font-size: 1.25rem;
}

body.showcase-shell .card-drawer {
  margin-top: -4px;
}

body.showcase-shell .card-drawer-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  cursor: pointer;
}

body.showcase-shell .card-drawer-summary::-webkit-details-marker {
  display: none;
}

body.showcase-shell .card-drawer-body {
  padding: 0 16px 16px;
}

body.showcase-shell .card-meta-row,
body.showcase-shell .tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.showcase-shell .card-footer {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

body.showcase-shell .card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

body.showcase-shell .card-title a,
body.showcase-shell .post-link {
  color: var(--text);
  text-decoration: none;
}

body.showcase-shell .card-description {
  margin: 0;
  color: var(--showcase-soft);
  line-height: 1.58;
}

body.showcase-shell .tag-chip,
body.showcase-shell .tag {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

body.showcase-shell .rail-card {
  border-radius: 24px;
  padding: 18px;
}

body.showcase-shell .rail-title {
  margin-bottom: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

body.showcase-shell .rail-actions,
body.showcase-shell .quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.showcase-shell .rail-btn {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: var(--text);
}

body.showcase-shell .home-blog-preview {
  margin: 6px 0 22px;
  border-radius: 26px;
  padding: 20px;
}

body.showcase-shell .home-blog-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

body.showcase-shell .home-blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

body.showcase-shell .home-blog-card {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

body.showcase-shell .home-blog-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

body.showcase-shell .home-blog-card-body {
  padding: 14px;
  display: grid;
  gap: 8px;
}

body.showcase-shell .home-blog-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

body.showcase-shell .home-blog-card-title a,
body.showcase-shell .home-blog-preview-link {
  color: var(--text);
  text-decoration: none;
}

body.showcase-shell #overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4,6,10,.82);
  backdrop-filter: blur(14px);
  z-index: 9999;
}

body.showcase-shell #overlay[aria-hidden="false"] {
  display: flex;
}

body.showcase-shell #overlay-content {
  position: relative;
  width: min(1200px, 100%);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
}

body.showcase-shell .overlay-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(0,0,0,.28);
}

body.showcase-shell #overlay-media {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

body.showcase-shell #overlay-media img,
body.showcase-shell #overlay-media video,
body.showcase-shell .overlay-video {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

body.showcase-shell .overlay-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

body.showcase-shell #overlay-caption {
  color: rgba(255,255,255,.9);
  line-height: 1.55;
}

body.showcase-shell .overlay-nav {
  display: flex;
  gap: 10px;
}

body.showcase-shell .nav-btn,
body.showcase-shell #overlay-close {
  min-width: 46px;
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
}

body.showcase-shell #overlay-close {
  position: absolute;
  top: 18px;
  right: 18px;
}

@media (max-width: 1180px) {
  body.showcase-shell .hero-banner {
    grid-template-columns: 1fr;
  }

  body.showcase-shell .spotlight-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  body.showcase-shell .spotlight-card-large {
    grid-column: 1 / -1;
  }

  body.showcase-shell .home-blog-preview-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  body.showcase-shell .hero-copy,
  body.showcase-shell .hero-panel,
  body.showcase-shell .home-blog-preview,
  body.showcase-shell .rail-card {
    padding: 18px;
    border-radius: 22px;
  }

  body.showcase-shell .hero-stats,
  body.showcase-shell .spotlight-grid,
  body.showcase-shell .home-blog-preview-grid,
  body.showcase-shell .feed-summary {
    grid-template-columns: 1fr;
  }

  body.showcase-shell .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  body.showcase-shell #overlay {
    padding: 12px;
  }

  body.showcase-shell #overlay-content {
    padding: 12px;
    border-radius: 22px;
  }

  body.showcase-shell .overlay-bottom {
    flex-direction: column;
    align-items: stretch;
  }
}


/* === Professional redesign overrides === */
:root {
  --page-width: min(1440px, calc(100vw - 40px));
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-3: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.16);
}

body.showcase-shell {
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(255,255,255,0.06), transparent 18%),
    linear-gradient(180deg, #071018 0%, #0b1320 42%, #0d1623 100%);
}

.app-shell,
.feed-shell,
.header-inner,
.topbar,
.searchbar,
.hero-banner,
.feed-summary,
.grid,
.blog-grid {
  width: 100%;
}

.app-shell {
  max-width: 100%;
}

.header-inner,
.feed-shell,
.seo-intro,
.blog-section,
.footer-inner,
.topbar {
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(7, 12, 18, 0.94), rgba(7, 12, 18, 0.76));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 42px rgba(0,0,0,0.22);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 14px;
}

.brand-wrap,
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark,
.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(255,255,255,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 36px rgba(0,0,0,0.2);
}

.brand-text h1 {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.brand-text p,
.brand-subline {
  color: var(--muted);
  font-size: 0.92rem;
}

.searchbar {
  display: grid;
  grid-template-columns: minmax(320px, 1.8fr) repeat(3, minmax(170px, 0.7fr)) auto;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.045));
  box-shadow: 0 24px 60px rgba(0,0,0,0.24);
  backdrop-filter: blur(16px);
}

.search-field,
.field,
.custom-select-trigger,
.search-field input {
  min-height: 58px;
}

.search-field,
.field {
  border-radius: 18px;
  background: rgba(9, 14, 21, 0.78);
  border: 1px solid rgba(255,255,255,0.08);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.search-field input {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 1rem;
}

.search-field input:focus {
  outline: none;
}

.btn-search,
.btn,
.btn-secondary,
.inline-link-btn,
.action-btn {
  border-radius: 16px;
}

.btn-search {
  min-width: 148px;
  min-height: 58px;
  font-weight: 700;
  box-shadow: 0 14px 32px rgba(var(--accent-rgb), 0.28);
}

.search-trustbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.search-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.84);
  font-size: 0.9rem;
}

.feed-shell {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 28px 0 64px;
}

.hero-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.88fr);
  gap: 24px;
  padding: 28px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.14), transparent 32%);
  box-shadow: 0 34px 80px rgba(0,0,0,0.24);
}

.hero-copy,
.hero-panel,
.feed-summary,
.card,
.blog-card,
.seo-card {
  background: rgba(10, 16, 24, 0.58);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 22px 52px rgba(0,0,0,0.18);
}

.hero-copy,
.hero-panel {
  border-radius: 28px;
  padding: 28px;
}

.hero-title {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.02;
  margin-bottom: 16px;
}

.hero-text,
.feed-summary-text,
.card-description {
  color: rgba(245,247,251,0.78);
  line-height: 1.65;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.hero-stat {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.hero-stat strong {
  display: block;
  font-size: 1.45rem;
  margin-bottom: 6px;
}

.feed-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  margin-top: 24px;
  border-radius: 24px;
}

.meta-chip,
.topic-chip,
.tag-chip,
.booru-pill,
.media-corner-badge {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
}

#grid,
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.card {
  border-radius: 24px;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 28px 60px rgba(0,0,0,0.28);
}

.post-card-inner,
.card-drawer-body {
  background: transparent;
}

.media-wrap {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.card-drawer {
  padding: 16px 18px 18px;
}

.card-drawer-summary {
  padding: 4px 0 14px;
}

.tags-list {
  gap: 10px;
}

.tag-chip {
  padding: 8px 12px;
  color: rgba(255,255,255,0.88);
}

.topic-chip.active,
.tag-chip:hover,
.btn:hover,
.inline-link-btn:hover,
.action-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.42);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18);
}

.footer-inner {
  max-width: var(--page-width);
}

@media (max-width: 1180px) {
  .searchbar {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(180px, 1fr));
  }

  .btn-search {
    grid-column: 1 / -1;
  }

  .hero-banner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --page-width: min(100vw - 24px, 100%);
  }

  .topbar,
  .feed-shell,
  .header-inner,
  .seo-intro,
  .blog-section,
  .footer-inner {
    width: var(--page-width);
  }

  .searchbar {
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 22px;
  }

  .hero-copy,
  .hero-panel,
  .feed-summary {
    padding: 20px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  #grid,
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}