:root {
    color-scheme: dark;
    --bg: #070812;
    --surface: #0c1020;
    --panel: rgba(11, 12, 28, .78);
    --panel-2: rgba(16, 20, 38, .88);
    --line: rgba(78, 105, 180, .38);
    --text: #f7f8ff;
    --muted: #a7afc6;
    --soft: #d7dcf0;
    --blue: #4d78ff;
    --purple: #833ef3;
    --pink: #ff42a9;
    --cyan: #17d1e8;
    --green: #3edb9f;
    --danger: #ff647c;
    --warning: #ffbf4a;
    --background: 230 35% 7%;
    --foreground: 210 40% 98%;
    --card: 230 30% 10%;
    --primary: 220 90% 64%;
    --secondary: 230 25% 14%;
    --accent: 265 85% 58%;
    --border: 230 25% 18%;
    --radius: .75rem;
    --gradient-primary: linear-gradient(135deg, hsl(220 90% 64%) 0%, hsl(265 85% 58%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(230 30% 11%) 0%, hsl(230 30% 9%) 100%);
    --shadow-card: 0 4px 20px hsl(0 0% 0% / .5);
    --shadow-glow: 0 0 40px hsl(220 90% 64% / .3);
    --topbar: 61px;
    --rail: 64px;
    --shadow: 0 24px 90px rgba(0, 0, 0, .45);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

html,
body {
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 35% 36%, rgba(9, 99, 143, .22), transparent 31rem),
        radial-gradient(circle at 72% 26%, rgba(128, 55, 184, .19), transparent 30rem),
        radial-gradient(circle at 78% 78%, rgba(39, 53, 140, .18), transparent 26rem),
        linear-gradient(180deg, #070812 0%, #070814 54%, #090812 100%);
    color: var(--text);
}

body.community-page {
    height: 100svh;
    overflow: hidden;
}

body.community-page main {
    height: 100svh;
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: var(--topbar) 0 0 var(--rail);
    z-index: -3;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 90%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -4;
    background: #070812;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.scene-bg {
    position: fixed;
    inset: var(--topbar) 0 0 var(--rail);
    z-index: 0;
    pointer-events: none;
}

.scene-bg i {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 18px currentColor;
    opacity: .78;
}

.scene-bg i:nth-child(1) { left: 13%; top: 24%; color: #8d52ff; }
.scene-bg i:nth-child(2) { left: 27%; top: 34%; color: #ff4daf; width: 8px; height: 8px; }
.scene-bg i:nth-child(3) { left: 48%; top: 20%; color: #5a64ff; width: 4px; height: 4px; }
.scene-bg i:nth-child(4) { left: 67%; top: 9%; color: #a758ff; }
.scene-bg i:nth-child(5) { left: 83%; top: 35%; color: #805bff; width: 8px; height: 8px; }
.scene-bg i:nth-child(6) { left: 91%; top: 5%; color: #ff4fa4; }
.scene-bg i:nth-child(7) { left: 58%; top: 61%; color: #18d7e8; width: 8px; height: 8px; }
.scene-bg i:nth-child(8) { left: 23%; top: 82%; color: #934cff; width: 4px; height: 4px; }
.scene-bg i:nth-child(9) { left: 74%; top: 78%; color: #462cff; width: 5px; height: 5px; }
.scene-bg i:nth-child(10) { left: 7%; top: 40%; color: #a24cff; }
.scene-bg i:nth-child(11) { left: 2%; top: 3%; color: #17d1e8; width: 5px; height: 5px; }
.scene-bg i:nth-child(12) { left: 20%; top: 6%; color: #805bff; width: 5px; height: 5px; }
.scene-bg i:nth-child(13) { left: 55%; top: 12%; color: #ff42a9; width: 7px; height: 7px; }
.scene-bg i:nth-child(14) { left: 76%; top: 14%; color: #17d1e8; width: 4px; height: 4px; }
.scene-bg i:nth-child(15) { left: 95%; top: 18%; color: #18d7e8; width: 4px; height: 4px; }
.scene-bg i:nth-child(16) { left: 4%; top: 27%; color: #18d7e8; width: 7px; height: 7px; }
.scene-bg i:nth-child(17) { left: 11%; top: 29%; color: #ff42a9; width: 5px; height: 5px; }
.scene-bg i:nth-child(18) { left: 31%; top: 29%; color: #8d52ff; width: 5px; height: 5px; }
.scene-bg i:nth-child(19) { left: 41%; top: 27%; color: #ff42a9; width: 4px; height: 4px; }
.scene-bg i:nth-child(20) { left: 52%; top: 35%; color: #17d1e8; width: 6px; height: 6px; }
.scene-bg i:nth-child(21) { left: 66%; top: 30%; color: #934cff; width: 8px; height: 8px; }
.scene-bg i:nth-child(22) { left: 73%; top: 33%; color: #a758ff; width: 5px; height: 5px; }
.scene-bg i:nth-child(23) { left: 90%; top: 32%; color: #ff42a9; width: 4px; height: 4px; }
.scene-bg i:nth-child(24) { left: 18%; top: 41%; color: #805bff; width: 4px; height: 4px; }
.scene-bg i:nth-child(25) { left: 37%; top: 43%; color: #17d1e8; width: 4px; height: 4px; }
.scene-bg i:nth-child(26) { left: 48%; top: 48%; color: #934cff; width: 4px; height: 4px; }
.scene-bg i:nth-child(27) { left: 63%; top: 48%; color: #ff42a9; width: 4px; height: 4px; }
.scene-bg i:nth-child(28) { left: 84%; top: 47%; color: #805bff; width: 6px; height: 6px; }
.scene-bg i:nth-child(29) { left: 5%; top: 66%; color: #ff42a9; width: 4px; height: 4px; }
.scene-bg i:nth-child(30) { left: 32%; top: 67%; color: #ff42a9; width: 4px; height: 4px; }
.scene-bg i:nth-child(31) { left: 42%; top: 58%; color: #18d7e8; width: 5px; height: 5px; }
.scene-bg i:nth-child(32) { left: 61%; top: 68%; color: #934cff; width: 4px; height: 4px; }
.scene-bg i:nth-child(33) { left: 78%; top: 62%; color: #17d1e8; width: 8px; height: 8px; }
.scene-bg i:nth-child(34) { left: 92%; top: 62%; color: #8d52ff; width: 5px; height: 5px; }
.scene-bg i:nth-child(35) { left: 6%; top: 84%; color: #17d1e8; width: 6px; height: 6px; }
.scene-bg i:nth-child(36) { left: 24%; top: 88%; color: #ff42a9; width: 4px; height: 4px; }
.scene-bg i:nth-child(37) { left: 36%; top: 83%; color: #805bff; width: 4px; height: 4px; }
.scene-bg i:nth-child(38) { left: 54%; top: 86%; color: #934cff; width: 5px; height: 5px; }
.scene-bg i:nth-child(39) { left: 70%; top: 82%; color: #ff42a9; width: 4px; height: 4px; }
.scene-bg i:nth-child(40) { left: 83%; top: 87%; color: #17d1e8; width: 5px; height: 5px; }
.scene-bg i:nth-child(41) { left: 96%; top: 86%; color: #805bff; width: 4px; height: 4px; }
.scene-bg i:nth-child(42) { left: 88%; top: 72%; color: #ff42a9; width: 4px; height: 4px; }

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-height: var(--topbar);
    padding: .55rem 1.25rem .55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(8, 11, 22, .92);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-right: .65rem;
}

.brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.45rem;
    color: var(--muted);
    font-size: .9rem;
    white-space: nowrap;
}

.nav-right {
    margin-left: auto;
}

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

.side-rail {
    position: fixed;
    left: 0;
    top: var(--topbar);
    bottom: 0;
    z-index: 15;
    width: var(--rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem .65rem;
    border-right: 1px solid rgba(255, 255, 255, .08);
    background: rgba(8, 9, 20, .72);
    backdrop-filter: blur(18px);
}

.side-rail a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--muted);
    font-weight: 800;
}

.side-rail svg {
    display: block;
}

.side-rail a:hover,
.side-rail a.active {
    color: #fff;
    background: linear-gradient(135deg, #4d80ff, #7d42f4);
    box-shadow: 0 12px 28px rgba(77, 120, 255, .24);
}

.page {
    position: relative;
    z-index: 1;
    margin-left: var(--rail);
    min-height: 100vh;
    padding: 0;
}

.hero {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 3rem;
    width: min(100% - 3rem, 1320px);
    margin: 0 auto;
    padding: 8rem 0 7rem;
    min-height: auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border: 1px solid rgba(79, 124, 255, .35);
    border-radius: 999px;
    background: rgba(79, 124, 255, .12);
    color: #75a0ff;
    font-weight: 700;
    font-size: .9rem;
}

.hero-copy {
    display: grid;
    justify-items: start;
    gap: 1.5rem;
    padding-left: 0;
    transform: translateY(-1.35rem);
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.08;
    letter-spacing: 0;
}

.hero h1 {
    margin-top: 0;
    font-size: clamp(1.875rem, 3.15vw, 3.75rem);
    max-width: none;
    text-transform: uppercase;
    font-weight: 800;
}

h1 {
    font-weight: 800;
}

.gradient-text {
    color: transparent;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
}

.lead {
    color: var(--muted);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.55;
    max-width: 36rem;
    margin-top: 0;
}

.actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0;
}

.button,
button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    min-width: 138px;
    padding: .78rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(79, 124, 255, .22);
}

.button.secondary,
button.secondary {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .11);
    box-shadow: none;
}

.button.small {
    min-height: 36px;
    padding: .55rem .9rem;
    font-size: .9rem;
}

.button.danger {
    background: var(--danger);
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem;
    max-width: 560px;
    margin-top: .5rem;
}

.stat strong {
    display: block;
    color: #6585ff;
    font-size: 2.25rem;
    line-height: 1;
}

.stat span {
    color: var(--muted);
}

.panel {
    border: 1px solid rgba(86, 111, 190, .35);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(12, 13, 29, .83), rgba(10, 11, 24, .7)),
        radial-gradient(circle at 60% 88%, rgba(132, 58, 188, .22), transparent 18rem);
    box-shadow: var(--shadow);
    padding: clamp(1rem, 2vw, 1.5rem);
}

.hero-panel {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 1.5rem;
    justify-self: center;
    border-color: rgba(80, 107, 190, .5);
}

.panel-title {
    max-width: 540px;
    margin: 0 auto 1.35rem;
    text-align: center;
}

.panel-title h2 {
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 800;
}

.panel-title p {
    margin: .8rem auto 0;
    line-height: 1.45;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.media-grid img,
.prompt-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    background: #111827;
}

.media-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: #090c18;
}

.media-tile.placeholder {
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, .025);
    background:
        radial-gradient(circle at 36% 36%, rgba(51, 59, 91, .1), transparent 34%),
        linear-gradient(145deg, rgba(25, 30, 48, .66), rgba(18, 22, 36, .88));
}

.media-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 28%),
        radial-gradient(circle at 60% 35%, rgba(23, 209, 232, .22), transparent 35%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.media-tile img {
    transition: transform .24s ease, filter .24s ease;
}

.media-tile:hover img {
    transform: scale(1.04);
    filter: saturate(1.12);
}

.section {
    padding: calc(var(--topbar) + 4rem) 1.5rem 4rem;
}

.home-section {
    margin: 0;
    padding: 5rem 1.5rem;
    border-top: 1px solid hsl(var(--border) / .5);
    background: hsl(var(--secondary) / .2);
}

.section-inner,
.library-inner,
.generator-inner {
    width: min(100%, 1280px);
    margin: 0 auto;
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(13, 17, 32, .82);
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

.card-body {
    padding: 1rem;
}

.prompt-card {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.prompt-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--primary) / .45);
    box-shadow: var(--shadow-card), var(--shadow-glow);
}

.prompt-thumb {
    display: block;
    overflow: hidden;
    background: hsl(230 25% 14% / .65);
}

.prompt-thumb img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: transform .25s ease, filter .25s ease;
}

.prompt-card:hover .prompt-thumb img {
    transform: scale(1.04);
    filter: saturate(1.12);
}

.category-strip {
    padding: 1.5rem 1.5rem 3rem;
    border-block: 1px solid hsl(var(--border) / .5);
    background: hsl(var(--secondary) / .2);
}

.category-tabs,
.pill-tabs {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .25rem;
    border-radius: .75rem;
    background: hsl(var(--secondary) / .5);
}

.category-tabs a,
.pill-tabs span,
.pill-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: .55rem 1.25rem;
    border-radius: .6rem;
    color: var(--muted);
    font-weight: 700;
}

.category-tabs a.active,
.pill-tabs span.active,
.pill-tabs a.active {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.library-hero {
    min-height: 890px;
    padding: calc(var(--topbar) + 1.25rem) 1.5rem 5rem;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.library-inner {
    display: grid;
    justify-items: center;
    gap: 1.1rem;
}

.library-hero h1 {
    font-size: clamp(3.25rem, 4.8vw, 4.8rem);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
}

.library-hero .lead {
    max-width: 42rem;
    margin: 0 auto;
}

.library-search {
    display: grid;
    grid-template-columns: minmax(260px, 595px) 48px;
    gap: .85rem;
    width: min(100%, 655px);
    margin-top: .25rem;
}

.library-inner .pill-tabs {
    margin-top: 1.45rem;
}

.library-search input {
    min-height: 48px;
    padding-left: 3rem;
    background: hsl(var(--background) / .75);
}

.filter-button {
    display: grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: .75rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background) / .75);
    color: var(--muted);
}

.loading-ring {
    width: 4rem;
    height: 4rem;
    margin-top: 4rem;
    border-radius: 999px;
    border: 4px solid hsl(var(--primary) / .2);
    border-top-color: hsl(var(--primary));
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.generator-page {
    padding: calc(var(--topbar) + 2rem) 1.5rem 4rem;
}

.generator-inner {
    max-width: 896px;
}

.generator-title {
    margin-bottom: 2rem;
}

.generator-title h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 900;
    color: transparent;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
}

.generator-card {
    border-radius: .75rem;
    background: var(--gradient-card);
    border-color: hsl(var(--border) / .5);
    box-shadow: var(--shadow-card);
}

.generator-preview {
    margin-top: 1.5rem;
}

.create-pricing-toggle {
    min-height: 4.25rem;
}

.pricing-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 8.2rem;
    min-width: 8.2rem;
    height: 2.35rem;
    padding: .2rem;
    border: 1px solid hsl(var(--border) / .65);
    border-radius: 999px;
    background: hsl(var(--background) / .72);
    color: hsl(var(--muted-foreground));
    box-shadow: none;
}

.pricing-switch-option {
    position: relative;
    z-index: 2;
    display: inline-flex;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    transition: color .18s ease;
}

.pricing-switch-thumb {
    position: absolute;
    top: .2rem;
    bottom: .2rem;
    left: .2rem;
    z-index: 1;
    width: calc(50% - .2rem);
    border-radius: 999px;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    box-shadow: 0 8px 22px hsl(var(--primary) / .25);
    transition: transform .2s ease;
}

.pricing-switch.is-paid .pricing-switch-thumb {
    transform: translateX(100%);
}

.pricing-switch.is-free .pricing-switch-option:first-child,
.pricing-switch.is-paid .pricing-switch-option:nth-child(2) {
    color: hsl(var(--primary-foreground));
}

.pricing-switch:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.form-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.pricing-hero {
    padding: calc(var(--topbar) + 1.25rem) 2.5rem 4rem;
    min-height: 100vh;
    text-align: center;
}

.pricing-inner {
    width: min(100%, 1280px);
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: 1.35rem;
}

.pricing-hero h1 {
    font-size: clamp(3rem, 4.2vw, 4.3rem);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
}

.billing-tabs {
    margin-top: 2.25rem;
}

.billing-tabs b {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-left: .35rem;
    border-radius: 999px;
    background: #22c55e;
    color: white;
    font-size: .7rem;
}

.pricing-hero > .pricing-inner > .loading-ring {
    margin-top: 5.5rem;
    margin-bottom: 4rem;
}

.pricing-hero h2 {
    font-size: clamp(1.75rem, 2vw, 2rem);
    font-weight: 900;
}

.benefit-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.benefit-card {
    min-height: 178px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .8rem;
    padding: 1.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: .75rem;
    background: hsl(var(--card) / .82);
    box-shadow: var(--shadow-card);
}

.benefit-icon {
    color: hsl(var(--primary));
    font-size: 2.85rem;
    line-height: 1;
}

.benefit-card h3 {
    font-size: 1rem;
    font-weight: 900;
}

.benefit-card p {
    max-width: 16rem;
    color: var(--muted);
    line-height: 1.5;
}

.faq-card {
    width: 100%;
    margin-top: 2.6rem;
    padding: 1.5rem;
    text-align: left;
    border: 1px solid hsl(var(--border));
    border-radius: .75rem;
    background: hsl(var(--card) / .82);
}

.faq-card h2 {
    text-align: center;
    margin-bottom: 1.75rem;
}

.faq-card h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.faq-card p {
    color: var(--muted);
}

.auth-body .page {
    margin-left: 0;
}

.auth-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(100%, 448px);
    display: grid;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid rgba(34, 211, 238, .2);
    border-radius: .75rem;
    background: rgba(18, 18, 26, .8);
    box-shadow: 0 0 60px -15px rgba(0, 255, 255, .3);
    backdrop-filter: blur(24px);
    text-align: center;
}

.auth-logo {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, #22d3ee, #7c3aed);
    color: white;
    font-size: 1.875rem;
    font-weight: 900;
    box-shadow: 0 0 30px rgba(0, 255, 255, .5);
}

.auth-card h1 {
    font-size: 1.875rem;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(90deg, #22d3ee, #ffffff, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
}

.auth-card p {
    color: var(--muted);
}

.auth-card input {
    min-height: 48px;
    background: hsl(var(--background) / .72);
}

.sr-label {
    text-align: left;
}

.auth-google {
    width: 100%;
    min-height: 48px;
    margin-top: .5rem;
    background: rgba(255, 255, 255, .9);
    color: #111827;
    box-shadow: 0 0 30px rgba(0, 255, 255, .16);
}

.google-mark {
    font-weight: 900;
    color: #4285f4;
}

.signup-card {
    border-color: rgba(168, 85, 247, .2);
    box-shadow: 0 0 60px -15px rgba(168, 85, 247, .3);
}

.signup-card .auth-logo {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 0 30px rgba(168, 85, 247, .5);
}

.signup-card h1 {
    background: linear-gradient(90deg, #c084fc, #ffffff, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
}

.signup-card .auth-link a {
    color: #c084fc;
}

.auth-link {
    font-size: .95rem;
    margin: .5rem 0 0;
}

.auth-link a {
    color: #22d3ee;
    font-weight: 800;
}

.auth-link.small {
    margin-top: -.25rem;
    font-size: .85rem;
}

.card-meta,
.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}

.card-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.creator-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--muted);
    font-size: .95rem;
}

.creator-row img {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid hsl(var(--border));
}

.prompt-card h3 {
    min-height: 3.5rem;
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.25;
}

.muted {
    color: var(--muted);
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    padding: .25rem .55rem;
    color: var(--muted);
    font-size: .8rem;
}

.badge.ghost {
    background: hsl(var(--secondary) / .7);
}

.price {
    color: var(--green);
    font-weight: 900;
}

.pricing-card {
    min-height: 100%;
}

.pricing-price {
    display: block;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1;
}

.feature-list {
    display: grid;
    gap: .75rem;
    color: var(--muted);
    padding: .5rem 0;
}

.feature-list li {
    position: relative;
    padding-left: 1.5rem;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55rem;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--gradient-primary);
    box-shadow: 0 0 18px hsl(var(--primary) / .35);
}

.searchbar {
    min-width: min(100%, 420px);
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: hsl(230 25% 14% / .75);
    color: hsl(var(--primary));
    font-weight: 900;
}

.mini-item {
    border: 1px solid hsl(var(--border) / .8);
    border-radius: var(--radius);
    background: hsl(var(--secondary) / .45);
    padding: 1rem;
}

form.stack,
.stack {
    display: grid;
    gap: 1rem;
}

label {
    display: grid;
    gap: .4rem;
    color: var(--muted);
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    background: rgba(4, 7, 16, .86);
    color: var(--text);
    padding: .85rem .95rem;
    font: inherit;
}

textarea {
    min-height: 140px;
    resize: vertical;
}

.notice {
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
}

.notice.success {
    background: rgba(62, 219, 159, .12);
    color: #9effd9;
}

.notice.error {
    background: rgba(255, 100, 124, .12);
    color: #ffc2cc;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

th,
td {
    padding: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-align: left;
}

th {
    color: var(--muted);
    font-size: .85rem;
}

.admin-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .admin-layout {
        grid-template-columns: 1fr;
        padding-left: 22rem;
    }

    .admin-sidebar {
        position: fixed;
        left: 0;
        top: calc(var(--topbar) + 0.75rem);
        width: 22rem;
        display: grid;
        gap: 1rem;
        /* ensure scrollable area respects topbar height */
        height: calc(100vh - (var(--topbar) + 1.5rem));
        overflow: auto;
        z-index: 5;
    }
}

@media (max-width: 1023px) {
    .admin-layout {
        grid-template-columns: 1fr;
        padding-left: 0;
    }
}

.admin-sidebar .admin-nav-group {
    display: grid;
    gap: .35rem;
}

.admin-sidebar .admin-nav-group-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: hsl(var(--muted) / .9);
    padding-left: .5rem;
}

.admin-nav {
    display: grid;
    gap: .35rem;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: .75rem;
    border: 1px solid hsl(var(--border) / .25);
    background: hsl(var(--card) / .85);
    color: hsl(var(--foreground));
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.admin-nav a:hover,
.admin-nav .active {
    background: hsl(var(--primary) / .12);
    border-color: hsl(var(--primary) / .3);
    color: hsl(var(--primary-foreground));
}

.admin-nav a svg {
    min-width: 1rem;
}

.admin-dashboard-main {
    max-width: 80rem;
    width: 100%;
}

.admin-panel {
    display: block;
}

.admin-hero-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.admin-overview-grid,
.admin-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.metric-card {
    min-height: 160px;
}

.metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

@media (min-width: 640px) {
    .admin-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-overview-grid,
    .admin-content-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .admin-metrics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-overview-grid {
        grid-template-columns: 1.5fr 1fr;
    }

    .admin-content-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.result-box {
    white-space: pre-wrap;
    min-height: 180px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(4, 7, 16, .72);
    padding: 1rem;
    color: #dbe5ff;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 6, 18, .72);
    backdrop-filter: blur(12px);
}

.modal[hidden] {
    display: none;
}

.modal-panel {
    width: min(100%, 560px);
}

.messenger-float {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #1685ff;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 18px 45px rgba(22, 133, 255, .42);
}

.messenger-float::before {
    content: "Hi there! Need help?";
    position: absolute;
    right: 68px;
    top: 50%;
    width: max-content;
    max-width: 220px;
    transform: translateY(-50%);
    padding: .75rem 1rem;
    border-radius: 8px;
    background: #fff;
    color: #171923;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-left: var(--rail);
    padding: 1.2rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--muted);
}

.footer-links {
    display: flex;
    gap: 1rem;
}

@media (max-width: 860px) {
    :root {
        --rail: 0px;
    }

    .footer,
    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar {
        min-height: 53px;
        padding: 0 1rem;
        flex-direction: row;
    }

    .topbar::before {
        content: "\2630";
        color: hsl(var(--foreground));
        font-size: 1.25rem;
        line-height: 1;
    }

    .topbar .brand,
    .topbar .nav {
        display: none;
    }

    .nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: .25rem;
    }

    .side-rail {
        display: none;
    }

    .scene-bg {
        display: block;
        inset: var(--topbar) 0 0 0;
    }

    body::before {
        inset: var(--topbar) 0 0 0;
    }

    .page {
        margin: 0;
        padding: 0;
    }

    .hero,
    .grid,
    .grid.two,
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
        width: min(100% - 1rem, 760px);
        padding: calc(var(--topbar) + 1.25rem) 0 3rem;
        text-align: center;
    }

    .hero-copy {
        padding-left: 0;
        gap: 1.25rem;
    }

    .hero h1 {
        font-size: clamp(1.875rem, 8vw, 2.25rem);
    }

    .hero-panel {
        min-height: auto;
    }

    .hero-panel .media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .library-hero {
        min-height: auto;
        padding-top: calc(var(--topbar) + 5rem);
    }

    .library-hero h1 {
        font-size: clamp(2.5rem, 13vw, 4rem);
    }

    .library-search,
    .form-grid-two {
        grid-template-columns: 1fr;
    }

    .category-tabs,
    .pill-tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        width: 100%;
    }

    .messenger-float::before {
        display: none;
    }
}

.cyber-grid {
    background-image:
        linear-gradient(rgba(0, 255, 255, .3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, .3) 1px, transparent 1px);
    background-size: 50px 50px;
}

.theme-unstyled {
    min-width: 0;
    min-height: 0;
    border: 0;
    box-shadow: none;
}

button.theme-unstyled {
    background: transparent;
    padding: 0;
}

.theme-unstyled.active,
[data-tab-target].active {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.prompt-sort-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    max-width: 100%;
    padding: .25rem;
    border-radius: calc(var(--radius) + 2px);
    background: hsl(var(--secondary) / .5);
    color: hsl(var(--muted-foreground));
    overflow-x: auto;
}

.prompt-sort-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 2.25rem;
    padding: .375rem .75rem !important;
    border-radius: calc(var(--radius) - 2px);
    white-space: nowrap;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

@media (min-width: 768px) {
    .prompt-sort-tab {
        gap: .5rem;
        padding: .5rem 1rem !important;
        font-size: .875rem;
        line-height: 1.25rem;
    }
}

.theme-home input {
    font: inherit;
}

.theme-home footer input {
    min-height: 2.5rem;
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
    border-radius: calc(var(--radius) - 2px);
    padding: .5rem .75rem;
}

.theme-home footer button.theme-unstyled {
    min-height: 2.5rem;
    border-radius: calc(var(--radius) - 2px);
    background: var(--gradient-primary);
    color: hsl(var(--primary-foreground));
}

.favorite-button {
    color: hsl(var(--foreground));
    transition: color .2s ease, background-color .2s ease, opacity .2s ease;
}

.favorite-button.is-favorited {
    color: hsl(var(--destructive));
}

.favorite-button.is-favorited svg {
    fill: currentColor;
}

.favorite-button:disabled {
    opacity: .65;
    cursor: wait;
}

.site-footer {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    margin-left: 0;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
}

@media (min-width: 1024px) {
    .theme-home .site-footer {
        width: calc(100% - 4rem);
        margin-left: 4rem;
    }

    body.sidebar-expanded.theme-home .site-footer {
        width: calc(100% - 16rem);
        margin-left: 16rem;
    }
}

.community-chat-float {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    padding: .75rem 1rem;
    border: 1px solid hsl(var(--primary) / .35);
    border-radius: 999px;
    background: var(--gradient-primary);
    color: hsl(var(--primary-foreground));
    font-size: .875rem;
    font-weight: 700;
    box-shadow: 0 0 28px hsl(var(--primary) / .45), 0 14px 40px rgba(0, 0, 0, .35);
    animation: community-chat-float 2.8s ease-in-out infinite;
}

.community-chat-float:hover {
    color: hsl(var(--primary-foreground));
    transform: translateY(-2px);
    box-shadow: 0 0 36px hsl(var(--primary) / .6), 0 18px 48px rgba(0, 0, 0, .42);
}

@keyframes community-chat-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 560px) {
    .community-chat-float {
        right: .875rem;
        bottom: .875rem;
        width: 3.25rem;
        min-height: 3.25rem;
        padding: 0;
    }

    .community-chat-float span {
        display: none;
    }
}

.theme-home .messenger-float {
    z-index: 60;
}

@media (min-width: 1024px) {
    body.sidebar-expanded [data-sidebar] {
        width: 16rem;
    }

    body.sidebar-expanded [data-sidebar] .lg\:opacity-0 {
        opacity: 1;
    }

    body.sidebar-expanded [data-sidebar] .lg\:w-0 {
        width: auto;
    }

    body.sidebar-expanded [data-sidebar] .lg\:overflow-hidden {
        overflow: visible;
    }

    body.sidebar-expanded .lg\:ml-16 {
        margin-left: 16rem;
    }

    body.sidebar-expanded .lg\:left-16 {
        left: 16rem;
    }

    body.sidebar-expanded [data-sidebar-expand-toggle] svg {
        transform: rotate(180deg);
    }

    /* Logo swap on desktop expand */
    body.sidebar-expanded [data-sidebar] .sidebar-icon-logo {
        display: none;
    }
    body.sidebar-expanded [data-sidebar] .sidebar-banner-logo {
        display: flex !important;
    }
}

/* Mobile open (w-64 added by JS) */
[data-sidebar].w-64 .sidebar-icon-logo {
    display: none;
}
[data-sidebar].w-64 .sidebar-banner-logo {
    display: flex !important;
}

.community-page .community-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5.75rem;
    padding: .85rem 1.15rem;
    border: 1px solid hsl(var(--border) / .5);
    border-radius: .9rem;
    background:
        radial-gradient(circle at 14% 0%, hsl(var(--primary) / .18), transparent 34%),
        radial-gradient(circle at 92% 100%, rgb(236 72 153 / .18), transparent 42%),
        linear-gradient(120deg, hsl(var(--card) / .86), hsl(var(--secondary) / .32));
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.community-page .community-hero-copy {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.community-page .community-hero-copy .inline-flex {
    flex: 0 0 auto;
}

.community-page .community-hero h1 {
    margin-top: 0 !important;
    font-size: clamp(1.55rem, 2.3vw, 2.35rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.community-page .community-main {
    display: flex;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    padding-top: calc(var(--topbar) + .75rem) !important;
    padding-bottom: .75rem !important;
}

.community-page .community-frame {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .75rem;
    max-width: none;
    margin-inline: 0;
    min-height: 0;
    overflow: hidden;
}

.community-page .community-hero-copy,
.community-page .community-hero-stats {
    position: relative;
    z-index: 1;
}

.community-page .community-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(5rem, 1fr));
    gap: .55rem;
    min-width: min(100%, 24rem);
}

.community-page .community-stat {
    padding: .7rem .9rem;
    border: 1px solid hsl(var(--border) / .45);
    border-radius: .75rem;
    background: hsl(var(--background) / .55);
    backdrop-filter: blur(14px);
    text-align: center;
}

.community-page .community-stat span {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: hsl(var(--primary));
}

.community-page .community-stat small {
    color: hsl(var(--muted-foreground));
    font-size: .72rem;
}

.community-page .community-shell {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    border: 1px solid hsl(var(--border) / .5);
    background:
        radial-gradient(circle at 15% 15%, hsl(var(--primary) / .18), transparent 30%),
        radial-gradient(circle at 85% 30%, rgb(59 130 246 / .13), transparent 34%),
        linear-gradient(135deg, rgb(11 12 18 / .92), rgb(21 18 33 / .82));
    box-shadow: 0 24px 80px rgb(0 0 0 / .32);
    overflow: hidden;
}

.community-page .community-sidebar {
    min-height: 0;
    overflow: auto;
    background: rgb(10 10 14 / .46);
    backdrop-filter: blur(20px);
}

.community-page .community-sidebar a {
    color: rgb(248 250 252);
}

.community-page .community-sidebar a.bg-zinc-200 {
    background: rgb(229 231 235);
    color: rgb(17 24 39);
}

.community-page .community-sidebar a:hover {
    background: rgb(229 231 235);
    color: rgb(17 24 39);
}

.community-page .community-search {
    min-width: 0;
}

.community-page .community-search .input {
    min-width: 0;
    flex: 1 1 auto;
}

.community-page .community-search .btn {
    width: 2.75rem;
    min-width: 2.75rem;
    flex: 0 0 2.75rem;
    padding-inline: 0;
}

.community-page .community-sidebar-block {
    min-height: 0;
}

.community-page .community-contacts {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.community-page .input,
.community-page .btn {
    min-height: 2.5rem;
    border-radius: .5rem;
    border: 1px solid hsl(var(--border));
}

.community-page .input {
    width: 100%;
    background: hsl(var(--background) / .72);
    padding: .6rem .75rem;
    color: hsl(var(--foreground));
}

.community-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .8rem;
    font-size: .875rem;
    font-weight: 600;
    transition: all .2s ease;
}

.community-page .btn-sm {
    min-height: 2.25rem;
    padding: .45rem .75rem;
}

.community-page .divider {
    height: 1px;
    margin: .85rem 0;
    background: hsl(var(--border) / .55);
}

.community-page .community-message-container {
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: rgb(7 8 12 / .22);
}

.community-page .community-mobile-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    color: rgb(255 255 255 / .86);
    border: 1px solid rgb(255 255 255 / .12);
    background: rgb(255 255 255 / .08);
    transition: all .18s ease;
}

.community-page .community-mobile-back:hover {
    color: rgb(255 255 255);
    background: rgb(255 255 255 / .16);
}

.community-page .community-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    overflow-x: hidden;
    padding-block: 1rem;
    scroll-behavior: smooth;
}

.community-page .community-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid hsl(var(--border) / .55);
    background: hsl(var(--muted) / .6);
    color: hsl(var(--foreground));
    font-weight: 700;
}

.community-page .community-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-page .community-avatar-icon {
    border-radius: .85rem;
    color: hsl(var(--primary));
}

.community-page .chat {
    display: flex;
    align-items: flex-end;
    gap: .65rem;
    margin-bottom: 1rem;
    max-width: 86%;
}

.community-page .chat-end {
    flex-direction: row-reverse;
    margin-left: auto;
}

.community-page .chat-content {
    position: relative;
    display: flex;
    min-width: 0;
    max-width: min(34rem, calc(100% - 3.2rem));
    flex-direction: column;
}

.community-page .chat-end .chat-content {
    align-items: flex-end;
}

.community-page .chat-image .w-10 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    font-size: .75rem;
    font-weight: 700;
}

.community-page .chat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-page .chat-header {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .25rem;
    color: hsl(var(--muted-foreground));
    font-size: .72rem;
}

.community-page .chat-end .chat-header {
    justify-content: flex-end;
}

.community-page .chat-bubble {
    max-width: 100%;
    border-radius: 1rem;
    border-bottom-left-radius: .35rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    padding: .65rem .9rem;
    font-size: .9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.community-page .chat-end .chat-bubble {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: .35rem;
}

.community-page .bg-gray-200.text-black {
    background: rgb(229 231 235);
    color: rgb(17 24 39);
}

.community-page .community-reaction-wrap {
    position: absolute;
    top: .35rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    margin: 0;
    max-width: none;
}

.community-page .chat-end .community-reaction-wrap {
    right: calc(100% + .35rem);
    left: auto;
    align-items: flex-end;
}

.community-page .chat-start .community-reaction-wrap {
    left: calc(100% + .35rem);
    right: auto;
    align-items: flex-start;
}

.community-page .community-reaction-actions {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: .3rem;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.community-page .chat-content:hover .community-reaction-actions,
.community-page .chat-content:focus-within .community-reaction-actions,
.community-page .chat.show-reactions .community-reaction-actions {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
}

.community-page .chat-end .community-reaction-actions {
    right: auto;
}

.community-page .community-reaction-trigger,
.community-page .community-reply-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 1px solid hsl(var(--border) / .35);
    border-radius: 999px;
    background: hsl(var(--secondary) / .88);
    color: hsl(var(--foreground));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    pointer-events: auto;
}

.community-page .community-reaction-trigger:hover,
.community-page .community-reply-trigger:hover {
    background: hsl(var(--primary) / .25);
    color: hsl(var(--primary-foreground));
}

.community-page .community-reaction-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + .4rem);
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid hsl(var(--border) / .45);
    border-radius: 999px;
    background: hsl(var(--secondary) / .95);
    box-shadow: 0 14px 42px rgba(0, 0, 0, .42);
    backdrop-filter: blur(14px);
}

.community-page .chat-end .community-reaction-menu {
    right: 0;
    left: auto;
}

.community-page .community-reaction-menu[hidden] {
    display: none;
}

.community-page .community-reaction-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.community-page .community-reaction-chip,
.community-page .community-reaction-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    width: auto;
    min-width: 1.9rem;
    min-height: 1.55rem;
    padding: .15rem .4rem;
    border: 1px solid hsl(var(--border) / .5);
    border-radius: 999px;
    background: hsl(var(--background) / .7);
    color: hsl(var(--foreground));
    font-size: .78rem;
    line-height: 1;
    box-shadow: none;
    opacity: .76;
    transition: opacity .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.community-page .community-reaction-menu-button {
    width: 1.8rem;
    min-width: 1.8rem;
    height: 1.8rem;
    min-height: 1.8rem;
    padding: 0;
    font-size: .9rem;
}

.community-page .community-reaction-chip:hover,
.community-page .community-reaction-chip.is-active,
.community-page .community-reaction-menu-button:hover,
.community-page .community-reaction-menu-button.is-active {
    border-color: hsl(var(--primary) / .65);
    background: hsl(var(--primary) / .15);
    opacity: 1;
    transform: translateY(-1px);
}

.community-page .community-reaction-count {
    min-width: .45rem;
    color: hsl(var(--muted-foreground));
    font-size: .68rem;
    font-weight: 700;
}

.community-page .community-send-form {
    padding: .7rem .9rem .75rem;
    margin: 0;
    border-top: 1px solid hsl(var(--border) / .45);
    background: hsl(var(--background) / .48);
}

.community-page .community-composer-bar {
    display: grid;
    grid-template-columns: 2rem 2rem 2rem 2.35rem minmax(0, 1fr) 2.3rem;
    align-items: center;
    gap: .35rem;
}

.community-page .community-composer-icon,
.community-page .community-composer-gif,
.community-page .community-smile-button,
.community-page .community-like-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1683ff;
    box-shadow: none;
}

.community-page .community-composer-icon:hover,
.community-page .community-composer-gif:hover,
.community-page .community-smile-button:hover,
.community-page .community-like-send:hover {
    background: rgb(255 255 255 / .08);
}

.community-page .community-composer-gif {
    width: 2.35rem;
    min-width: 2.35rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.community-page .community-like-send {
    justify-self: end;
    color: #1683ff;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-radius .18s ease;
}

.community-page .community-like-send .community-send-icon {
    display: none;
}

.community-page .community-send-form.has-message .community-like-send {
    width: 2.35rem;
    min-width: 2.35rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 10px 24px hsl(var(--primary) / .25);
}

.community-page .community-send-form.has-message .community-like-send .community-empty-icon {
    display: none;
}

.community-page .community-send-form.has-message .community-like-send .community-send-icon {
    display: inline-flex;
}

.community-page .community-send-form.is-sending {
    opacity: .78;
    pointer-events: none;
}

.community-page .community-input-pill {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 2.25rem;
    border-radius: 999px;
    background: rgb(55 55 55 / .92);
    border: 1px solid rgb(255 255 255 / .05);
}

.community-page .community-input-pill textarea {
    width: 100%;
    min-width: 0;
    min-height: 2.1rem;
    max-height: 6rem;
    padding: .48rem 2.2rem .48rem .85rem;
    resize: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: hsl(var(--foreground));
    font-size: .92rem;
    line-height: 1.35;
    box-shadow: none;
    overflow: hidden;
}

.community-page .community-input-pill textarea:focus {
    outline: none;
}

.community-page .community-smile-button {
    position: absolute;
    right: .22rem;
    top: 50%;
    transform: translateY(-50%);
}

.community-page .community-emoji-tray {
    position: absolute;
    right: 0;
    bottom: calc(100% + .45rem);
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 2rem);
    gap: .25rem;
    padding: .45rem;
    border: 1px solid hsl(var(--border) / .65);
    border-radius: .85rem;
    background: hsl(var(--popover, var(--card)) / .98);
    box-shadow: 0 18px 45px rgb(0 0 0 / .35);
}

.community-page .community-emoji-tray[hidden] {
    display: none;
}

.community-page .community-emoji-tray button {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
}

.community-page .community-emoji-tray button:hover {
    background: rgb(255 255 255 / .08);
}

.community-page .community-file-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .4rem;
    color: hsl(var(--muted-foreground));
    font-size: .78rem;
}

.community-page [data-community-file-name] {
    min-width: 0;
    max-width: 45%;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-page .community-attachment {
    display: inline-flex;
    max-width: min(20rem, 100%);
    overflow: hidden;
    border: 1px solid hsl(var(--border) / .55);
    border-radius: .85rem;
    background: hsl(var(--background) / .72);
    color: hsl(var(--foreground));
    text-decoration: none;
}

.community-page .community-attachment-image {
    flex-direction: column;
}

.community-page .community-attachment-image img {
    display: block;
    width: min(20rem, 100%);
    max-height: 14rem;
    object-fit: cover;
    background: hsl(var(--muted) / .4);
}

.community-page .community-attachment-image span {
    display: grid;
    gap: .15rem;
    padding: .5rem .65rem;
    color: hsl(var(--muted-foreground));
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-page .community-attachment-image small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-page .community-attachment-file {
    align-items: center;
    gap: .65rem;
    padding: .75rem;
}

.prompt-copy-scroll {
    max-height: min(26rem, 58vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--primary) / .7) hsl(var(--muted) / .35);
}

.prompt-copy-scroll pre {
    margin: 0;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.prompt-copy-scroll::-webkit-scrollbar {
    width: .55rem;
}

.prompt-copy-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background: hsl(var(--muted) / .35);
}

.prompt-copy-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: hsl(var(--primary) / .72);
}

.prompt-copy-scroll::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary));
}

.community-page .community-attachment-file > span {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.community-page .community-attachment-file strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .85rem;
}

.community-page .community-attachment-file small {
    color: hsl(var(--muted-foreground));
    font-size: .72rem;
}

.community-page .community-login-lock {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid hsl(var(--border) / .55);
    border-radius: .85rem;
    background: hsl(var(--background) / .72);
    color: hsl(var(--muted-foreground));
}

.community-page .community-login-lock a {
    margin-left: auto;
    color: hsl(var(--primary));
    font-weight: 700;
}

.community-page .community-empty {
    display: grid;
    min-height: 20rem;
    place-items: center;
    align-content: center;
    gap: .65rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
}

.community-page .community-empty h2 {
    color: hsl(var(--foreground));
    font-size: 1.15rem;
    font-weight: 700;
}

.community-page .community-locked-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid hsl(var(--border) / .55);
    border-radius: 1rem;
    background:
        radial-gradient(circle at top left, hsl(var(--primary) / .15), transparent 34%),
        linear-gradient(135deg, hsl(var(--card) / .88), hsl(var(--secondary) / .34));
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
}

.community-page .community-lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: hsl(var(--primary) / .14);
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / .24);
}

.community-page .community-locked-panel h2 {
    font-size: 1.15rem;
    font-weight: 800;
}

.community-page .community-locked-panel p {
    margin-top: .25rem;
    max-width: 42rem;
    color: hsl(var(--muted-foreground));
    font-size: .92rem;
}

.community-page .community-lock-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .community-page .community-main {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .community-page .community-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .community-page .community-hero-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: .75rem;
    }

    .community-page .community-frame.has-open-conversation .community-hero {
        display: none;
    }

    .community-page .community-shell {
        grid-template-columns: 1fr;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .community-page .community-sidebar {
        max-height: 100%;
        overflow: auto;
        border-right: 0;
        border-bottom: 1px solid hsl(var(--border) / .5);
    }

    .community-page .community-shell.is-room-list-open .community-message-container {
        display: none;
    }

    .community-page .community-shell.is-conversation-open .community-sidebar {
        display: none;
    }

    .community-page .community-shell.is-room-list-open .community-search,
    .community-page .community-shell.is-room-list-open .community-search-divider,
    .community-page .community-shell.is-room-list-open .community-contacts-divider,
    .community-page .community-shell.is-room-list-open .community-contacts,
    .community-page .community-shell.is-room-list-open .community-auth-actions {
        display: none;
    }

    .community-page .community-mobile-back {
        display: inline-flex;
    }

    .community-page .community-contacts {
        display: block;
    }

    .community-page .community-message-container {
        height: 100%;
        min-height: 0;
    }

    .community-page .community-locked-panel {
        grid-template-columns: 1fr;
    }

    .community-page .community-lock-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .community-page .community-main {
        padding-top: calc(var(--topbar) + .6rem) !important;
        padding-bottom: .6rem !important;
    }

    .community-page .community-hero {
        padding: 1rem;
    }

    .community-page .community-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .45rem;
    }

    .community-page .community-stat {
        padding: .6rem .3rem;
    }

    .community-page .community-stat span {
        font-size: 1.05rem;
    }

    .community-page .chat {
        max-width: 100%;
        gap: .45rem;
        align-items: flex-start;
        margin-bottom: 1.25rem;
    }

    .community-page .chat-content {
        max-width: calc(100% - 2.35rem);
    }

    .community-page .chat-image .w-10 {
        width: 2rem;
        height: 2rem;
    }

    .community-page .chat-bubble {
        padding: .6rem .75rem;
        font-size: .86rem;
    }

    .community-page .chat-header {
        max-width: 100%;
        flex-wrap: wrap;
        row-gap: .1rem;
    }

    .community-page .chat-end .chat-header {
        text-align: right;
    }

    .community-page .chat-end .chat-image {
        padding-top: 1.45rem;
    }

    .community-page .chat-start .chat-image {
        padding-top: 1.45rem;
    }

    .community-page .community-reaction-wrap {
        width: 100%;
        max-width: 100%;
        margin-top: .45rem;
    }

    .community-page .community-reaction-actions {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .community-page .chat-end .community-reaction-actions {
        justify-content: flex-end;
    }

    .community-page .community-reaction-trigger,
    .community-page .community-reply-trigger {
        width: 1.8rem;
        min-width: 1.8rem;
        height: 1.8rem;
        min-height: 1.8rem;
    }

    .community-page .community-reaction-menu {
        left: auto;
        right: 0;
        max-width: calc(100vw - 2rem);
        overflow-x: auto;
    }

    .community-page .chat-end .community-reaction-menu {
        right: auto;
        left: 0;
    }

    .community-page .community-reaction-chip,
    .community-page .community-reaction-menu-button {
        width: auto;
        min-width: 1.8rem;
        min-height: 1.45rem;
        padding: .12rem .35rem;
    }

    .community-page .community-avatar {
        width: 2.5rem;
        height: 2.5rem;
        flex-basis: 2.5rem;
    }

    .community-page .community-sidebar {
        padding: .75rem;
    }

    .community-page .community-message-container {
        height: 100%;
        min-height: 0;
    }

    .community-page .community-send-form {
        padding: .65rem .7rem;
    }

    .community-page .community-composer-bar {
        grid-template-columns: 1.7rem 1.7rem 1.7rem 2.05rem minmax(5rem, 1fr) 1.9rem;
        gap: .2rem;
    }

    .community-page .community-composer-icon,
    .community-page .community-composer-gif,
    .community-page .community-smile-button,
    .community-page .community-like-send {
        width: 1.7rem;
        min-width: 1.7rem;
        height: 1.7rem;
        min-height: 1.7rem;
    }

    .community-page .community-composer-gif {
        width: 2.05rem;
        min-width: 2.05rem;
        font-size: .65rem;
    }

    .community-page .community-file-status {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .community-page [data-community-file-name] {
        max-width: 100%;
        text-align: left;
    }

    .community-page .community-attachment,
    .community-page .community-attachment-image img {
        max-width: 100%;
    }
}

.admin-body .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    padding: 0.75rem;
    z-index: 40;
}

.admin-body .admin-layout {
    display: block;
    padding: 1rem 1.5rem 3rem calc(22rem + 1.5rem);
    /* lift above the fixed cyberpunk-background div (z-index:auto) */
    position: relative;
    z-index: 1;
}

.admin-body .admin-layout > .stack,
.admin-body .admin-layout > div:not(.lg\:hidden) {
    max-width: 80rem;
}

.admin-body .admin-dashboard-main {
    display: grid;
    gap: 1.5rem;
}

.admin-body .admin-card {
    background: hsl(var(--card) / .92);
    backdrop-filter: blur(12px);
    border-color: hsl(var(--border) / .7);
    box-shadow: var(--shadow-card);
}

.admin-body .admin-dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: start;
    background: hsl(var(--card) / .92);
    backdrop-filter: blur(12px);
}

.admin-body .admin-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

.admin-body .admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

.admin-body .admin-overview-grid,
.admin-body .admin-content-grid {
    display: grid;
    gap: 1rem;
}

.admin-body .admin-overview-grid > article,
.admin-body .admin-content-grid > article {
    background: hsl(var(--card) / .92);
    backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
    .admin-body .admin-metrics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .admin-body .admin-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-body .admin-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .admin-body .admin-layout {
        padding: 1rem;
    }

    .admin-body .admin-dashboard-header {
        grid-template-columns: 1fr;
    }
}

.admin-body .panel {
    border-color: hsl(var(--border));
    background: hsl(var(--card) / .82);
    backdrop-filter: blur(12px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.admin-body .eyebrow {
    color: hsl(var(--primary));
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.admin-body h1 {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 700;
}

.admin-body table {
    color: hsl(var(--foreground));
}

.admin-body th {
    color: hsl(var(--muted-foreground));
}

@media (max-width: 1023px) {
    .admin-body .admin-layout {
        display: block;
        padding: 1rem;
    }
}

.theme-home .grid {
    display: grid;
}

.theme-home .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.theme-home .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.theme-home .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-home .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.theme-home .gap-1\.5 { gap: .375rem; }
.theme-home .gap-2 { gap: .5rem; }
.theme-home .gap-3 { gap: .75rem; }
.theme-home .gap-4 { gap: 1rem; }
.theme-home .gap-6 { gap: 1.5rem; }
.theme-home .gap-8 { gap: 2rem; }

@media (min-width: 640px) {
    .theme-home .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .theme-home .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .theme-home .sm\:gap-4 {
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .theme-home .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .theme-home .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .theme-home .md\:gap-2 {
        gap: .5rem;
    }

    .theme-home .md\:gap-6 {
        gap: 1.5rem;
    }

    .theme-home .md\:gap-8 {
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .theme-home .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .theme-home .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .theme-home .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .theme-home .lg\:gap-12 {
        gap: 3rem;
    }
}

/* ── Admin Page UI Kit ────────────────────────────────────────────────────── */
.ap-card{border-radius:1.5rem;border:1px solid hsl(var(--border)/.7);background:hsl(var(--card)/.92);backdrop-filter:blur(12px);box-shadow:var(--shadow-card);}
.ap-card-body{padding:1.5rem;}
.ap-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.25rem 1.5rem;margin-bottom:1.25rem;}
.ap-page-title{font-size:1.1rem;font-weight:700;margin:0 0 .2rem;line-height:1.3;}
.ap-page-desc{font-size:.8rem;color:hsl(var(--muted-foreground));margin:0;}
.ap-table{width:100%;font-size:.82rem;border-collapse:collapse;}
.ap-table th{text-align:left;padding:.55rem .75rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border)/.5);font-weight:600;}
.ap-table td{padding:.65rem .75rem;border-bottom:1px solid hsl(var(--border)/.25);vertical-align:middle;}
.ap-table tbody tr:last-child td{border-bottom:none;}
.ap-table tbody tr:hover{background:rgba(255,255,255,.025);}
.ap-badge{display:inline-flex;align-items:center;padding:.15rem .6rem;border-radius:999px;font-size:.68rem;font-weight:600;white-space:nowrap;}
.ap-badge-green{background:hsl(var(--primary)/.15);color:hsl(var(--primary));border:1px solid hsl(var(--primary)/.3);}
.ap-badge-amber{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.25);}
.ap-badge-red{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.25);}
.ap-badge-gray{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));border:1px solid transparent;}
.ap-badge-blue{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.25);}
.ap-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .8rem;border-radius:.4rem;font-size:.78rem;font-weight:500;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:background .12s,opacity .12s;white-space:nowrap;line-height:1.4;}
.ap-btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));}
.ap-btn-primary:hover{opacity:.88;}
.ap-btn-edit{background:hsl(var(--primary)/.12);color:hsl(var(--primary));}
.ap-btn-edit:hover{background:hsl(var(--primary)/.22);}
.ap-btn-danger{background:rgba(239,68,68,.1);color:#f87171;}
.ap-btn-danger:hover{background:rgba(239,68,68,.2);}
.ap-btn-ghost{background:transparent;color:hsl(var(--muted-foreground));border:1px solid hsl(var(--border));}
.ap-btn-ghost:hover{background:hsl(var(--accent));color:hsl(var(--foreground));}
.ap-section{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem 0;border-bottom:1px solid hsl(var(--border)/.4);}
.ap-section:last-child{border-bottom:none;padding-bottom:0;}
.ap-section-head{margin-bottom:.15rem;}
.ap-section-head h3{font-size:.9rem;font-weight:600;margin:0 0 .2rem;display:flex;align-items:center;gap:.4rem;}
.ap-section-head p{font-size:.78rem;color:hsl(var(--muted-foreground));margin:0;}
.ap-section-badge{font-size:.62rem;font-weight:600;padding:.1rem .45rem;border-radius:999px;background:hsl(var(--primary));color:hsl(var(--primary-foreground));vertical-align:middle;}
.ap-tabs{display:flex;gap:.25rem;overflow-x:auto;padding:1rem 0 .75rem;border-bottom:1px solid hsl(var(--border));margin-bottom:1.5rem;scrollbar-width:none;}
.ap-tabs::-webkit-scrollbar{display:none;}
.ap-tab{display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;padding:.42rem .9rem;border-radius:.4rem;font-size:.8rem;font-weight:500;cursor:pointer;background:none;border:1px solid transparent;color:hsl(var(--muted-foreground));transition:background .12s,color .12s;}
.ap-tab:hover{background:hsl(var(--accent));color:hsl(var(--foreground));}
.ap-tab.active{background:hsl(var(--primary));color:hsl(var(--primary-foreground));}
.ap-panel.hidden{display:none;}
.ap-empty{text-align:center;padding:2.5rem 1rem;color:hsl(var(--muted-foreground));font-size:.85rem;}
.ap-filter-bar{display:flex;gap:.625rem;align-items:center;flex-wrap:wrap;margin-bottom:1.25rem;}
.ap-filter-bar input,.ap-filter-bar select{height:2.15rem;padding:0 .7rem;border-radius:.375rem;border:1px solid hsl(var(--border));background:hsl(var(--card));color:inherit;font-size:.8rem;}
.ap-filter-bar input[type=text],.ap-filter-bar input[type=search]{min-width:180px;}
.ap-actions-cell{display:flex;align-items:center;gap:.4rem;}
.ap-grid-two{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;}
.ap-avatar{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;background:hsl(var(--primary)/.15);color:hsl(var(--primary));font-size:.7rem;font-weight:700;flex-shrink:0;}
.ap-row-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:.75rem;border:1px solid hsl(var(--border)/.4);}
.ap-row-item:not(:last-child){margin-bottom:.35rem;}
@media(max-width:640px){.ap-grid-two{grid-template-columns:1fr;}}