body {
    margin: 0;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f6f7f9;
    color: #f4f0e8;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-wrap { flex-wrap: wrap; }
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.shrink-0 { flex-shrink: 0; }
.max-w-md { max-width: 28rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-6xl { max-width: 72rem; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.rounded { border-radius: .25rem; }
.rounded-lg { border-radius: .5rem; }
.border { border: 1px solid #27272a; }
.border-b { border-bottom: 1px solid #27272a; }
.border-zinc-700 { border-color: #3f3f46; }
.border-zinc-800 { border-color: #27272a; }
.border-amber-400 { border-color: #fbbf24; }
.border-amber-500\/40 { border-color: rgba(245, 158, 11, .4); }
.bg-zinc-950 { background: #09090b; }
.bg-zinc-900 { background: #18181b; }
.bg-zinc-800 { background: #27272a; }
.bg-amber-400 { background: #fbbf24; }
.bg-emerald-950 { background: #022c22; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: 0; }
.tracking-wide { letter-spacing: .025em; }
.text-white { color: #fff; }
.text-zinc-100 { color: #f4f4f5; }
.text-zinc-200 { color: #e4e4e7; }
.text-zinc-300 { color: #d4d4d8; }
.text-zinc-400 { color: #a1a1aa; }
.text-zinc-500 { color: #71717a; }
.text-zinc-950 { color: #09090b; }
.text-amber-300 { color: #fcd34d; }
.text-red-300 { color: #fca5a5; }
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-100 { color: #d1fae5; }
.whitespace-pre-line { white-space: pre-line; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

input,
textarea,
select {
    box-sizing: border-box;
    color: #fff;
}

button {
    border: 0;
    cursor: pointer;
}

article,
section,
aside,
form {
    box-sizing: border-box;
}

.app-shell {
    min-height: 100vh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(244, 183, 64, .16);
    background: rgba(9, 10, 13, .88);
    backdrop-filter: blur(18px);
}

.brand-mark {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark::before {
    content: "";
    width: .75rem;
    height: 2rem;
    border-radius: 999px;
    background: #e85d75;
    box-shadow: 0 .35rem .9rem rgba(232, 93, 117, .18);
}

.page-frame {
    max-width: 1180px;
}

.hero-board,
.show-panel,
.post-card,
.comment-card,
.sidebar-panel,
.universe-tile,
.event-tile {
    border: 1px solid rgba(244, 240, 232, .10);
    background: rgba(19, 22, 28, .86);
    box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, .28);
}

.hero-board {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    padding: 1.5rem;
}

.hero-board::after {
    content: "";
    position: absolute;
    inset: auto 1.5rem 0;
    height: 3px;
    background: #e85d75;
}

.episode-label {
    color: #f4b740;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.headline {
    margin: .35rem 0 0;
    max-width: 52rem;
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: .95;
    letter-spacing: 0;
}

.lede {
    max-width: 44rem;
    color: #b8b2a8;
    line-height: 1.7;
}

.dashboard-grid {
    display: grid;
    gap: 1.25rem;
}

.dashboard-main {
    min-width: 0;
}

.dashboard-sidebar {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.show-panel,
.sidebar-panel,
.universe-tile,
.event-tile {
    border-radius: .75rem;
}

.panel-title {
    margin: 0 0 .85rem;
    color: #f7efe2;
    font-size: .95rem;
    font-weight: 800;
}

.active-event {
    border-color: rgba(240, 93, 94, .42);
    background: rgba(19, 22, 28, .92);
}

.post-card {
    border-radius: .75rem;
    padding: 1rem;
}

.post-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.identity {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.avatar {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    border: 1px solid rgba(244, 183, 64, .24);
    border-radius: 999px;
    background: #334155;
    color: #f4b740;
    font-size: .78rem;
    font-weight: 900;
}

.character-name {
    color: #fffaf1;
    font-weight: 800;
}

.meta-line {
    color: #8f887f;
    font-size: .8rem;
}

.episode-badge,
.heat-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(244, 183, 64, .22);
    background: rgba(244, 183, 64, .10);
    color: #f4b740;
    font-size: .72rem;
    font-weight: 800;
    padding: .25rem .55rem;
    text-transform: uppercase;
}

.post-body {
    color: #f4f0e8;
    font-size: 1rem;
    line-height: 1.7;
}

.reaction-bar {
    margin-top: 1rem;
    position: relative;
    display: inline-flex;
}

.reaction-summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.2rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #667085;
    padding: .3rem .7rem .3rem .35rem;
    font-size: .82rem;
    font-weight: 900;
}

.reaction-summary-icons {
    display: inline-flex;
    align-items: center;
}

.reaction-summary-icon {
    margin-left: -.35rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff;
}

.reaction-summary-icon:first-child {
    margin-left: 0;
}

.reaction-picker {
    position: absolute;
    left: 0;
    bottom: calc(100% + .15rem);
    z-index: 10;
    display: flex;
    gap: .35rem;
    max-width: min(92vw, 31rem);
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 .9rem 2.5rem rgba(31, 41, 55, .16);
    opacity: 0;
    padding: .4rem;
    pointer-events: none;
    transform: translateY(.35rem) scale(.98);
    transform-origin: bottom left;
    transition: opacity .14s ease, transform .14s ease;
}

.reaction-picker::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.55rem;
    height: .65rem;
}

.reaction-bar:hover .reaction-picker,
.reaction-bar:focus-within .reaction-picker {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.reaction-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border: 1px solid rgba(244, 240, 232, .12);
    border-radius: 999px;
    background: rgba(9, 10, 13, .74);
    color: #b8b2a8;
    min-width: 3.35rem;
    padding: .35rem .48rem;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
}

.reaction-button.is-active,
.reaction-button:hover {
    border-color: rgba(244, 183, 64, .75);
    background: #f4b740;
    color: #111318;
}

.reaction-icon {
    display: block;
    width: 1.45rem;
    height: 1.45rem;
    flex: 0 0 auto;
}

.comments-panel {
    margin-top: 1rem;
    border-top: 1px solid rgba(244, 240, 232, .10);
    padding-top: 1rem;
}

.comment-form {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}

.comment-input {
    min-width: 0;
    flex: 1;
    border: 1px solid rgba(244, 240, 232, .14);
    border-radius: 999px;
    background: rgba(9, 10, 13, .82);
    color: #fffaf1;
    padding: .7rem .9rem;
}

.comment-submit,
.primary-button {
    border-radius: 999px;
    background: #f4b740;
    color: #101217;
    font-weight: 800;
    padding: .7rem 1rem;
}

.comments-list {
    display: grid;
    gap: .7rem;
}

.comment-card {
    border-radius: .75rem;
    padding: .8rem;
    background: rgba(9, 10, 13, .42);
    box-shadow: none;
}

.poll-option,
.cast-card,
.hashtag-pill {
    border: 1px solid rgba(244, 240, 232, .10);
    border-radius: .65rem;
    background: rgba(9, 10, 13, .38);
}

.cast-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
}

.hashtag-pill {
    color: #52d6b7;
    padding: .45rem .65rem;
}

.hover-lift {
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    border-color: rgba(244, 183, 64, .45);
}

@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .dashboard-sidebar {
        position: sticky;
        top: 6rem;
    }
}

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

@media (min-width: 1024px) {
    .lg\:grid-cols-\[1\.2fr_\.8fr\] { grid-template-columns: 1.2fr .8fr; }
    .lg\:grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; }
}

/* Light entertainment feed skin. The product should feel like a familiar social app,
   while the show/episode language gives it reality-TV energy. */
body {
    background: #f6f7f9;
    color: #1f2937;
}

.app-shell {
    background: transparent;
}

.topbar {
    border-bottom: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 .75rem 2rem rgba(31, 41, 55, .06);
}

.brand-mark {
    color: #111827;
}

.brand-mark::before {
    width: 2rem;
    height: 2rem;
    background: #e85d75;
    box-shadow: 0 .35rem .9rem rgba(232, 93, 117, .18);
}

.hero-board,
.show-panel,
.post-card,
.comment-card,
.sidebar-panel,
.universe-tile,
.event-tile {
    border: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 .75rem 2.25rem rgba(31, 41, 55, .08);
}

.hero-board {
    background: #fff;
}

.hero-board::after {
    background: #e85d75;
}

.episode-label {
    color: #be445b;
}

.headline,
.text-white {
    color: #111827;
}

.lede,
.text-zinc-300,
.text-zinc-400,
.meta-line {
    color: #667085;
}

.text-zinc-500 {
    color: #98a2b3;
}

.text-zinc-100,
.text-zinc-200,
.post-body {
    color: #1f2937;
}

.text-amber-300 {
    color: #be445b;
}

.panel-title {
    color: #111827;
    font-size: 1rem;
}

.active-event {
    border-color: #f0c5ce;
    background: #fff7f8;
}

.post-card {
    border-radius: .9rem;
}

.avatar {
    border: 2px solid #fff;
    background: #334155;
    box-shadow: 0 .35rem 1rem rgba(51, 65, 85, .14);
    color: #fff;
}

.character-name {
    color: #111827;
}

.episode-badge,
.heat-badge,
.status-badge {
    border: 1px solid #f0c5ce;
    background: #fff7f8;
    color: #be445b;
}

.reaction-button {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #667085;
}

.reaction-button.is-active,
.reaction-button:hover {
    border-color: #f0c5ce;
    background: #fff7f8;
    color: #be445b;
}

.comments-panel {
    border-top: 1px solid #edf0f4;
}

.comment-input {
    border-color: #e5e7eb;
    background: #f9fafb;
    color: #111827;
}

.comment-input::placeholder {
    color: #98a2b3;
}

.comment-submit,
.primary-button,
.bg-amber-400 {
    background: #e85d75;
    color: #fff;
    box-shadow: 0 .4rem .9rem rgba(232, 93, 117, .16);
}

.comment-card {
    border-color: #edf0f4;
    background: #f9fafb;
}

.comment-reply-toggle {
    margin-top: .45rem;
    background: transparent;
    color: #667085;
    font-size: .78rem;
    font-weight: 800;
    padding: 0;
}

.comment-reply-toggle:hover {
    color: #be445b;
}

.comment-reply-form {
    margin-top: .75rem;
}

.comment-replies {
    display: grid;
    gap: .6rem;
    margin-top: .75rem;
    padding-left: 1rem;
    border-left: 2px solid #edf0f4;
}

.comment-reply-card {
    background: #fff;
}

.poll-option,
.cast-card,
.hashtag-pill {
    border-color: #edf0f4;
    background: #fff;
}

.cast-card:hover,
.universe-tile:hover,
.event-tile:hover {
    border-color: #f0c5ce;
}

.hashtag-pill {
    color: #2563eb;
    background: #eff6ff;
}

.stats-strip {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.stat-tile {
    border: 1px solid #edf0f4;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .74);
    padding: .9rem;
}

.stat-value {
    display: block;
    color: #111827;
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
}

.stat-label {
    display: block;
    margin-top: .3rem;
    color: #667085;
    font-size: .78rem;
    font-weight: 700;
}

.storyline-grid {
    display: grid;
    gap: 1rem;
}

.storyline-card {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: .95rem;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 .75rem 2.25rem rgba(31, 41, 55, .08);
}

.storyline-title {
    margin: 0;
    color: #111827;
    font-size: 1.2rem;
    line-height: 1.25;
}

.storyline-copy {
    margin: .55rem 0 0;
    color: #667085;
    font-size: .92rem;
    line-height: 1.55;
}

.mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
    color: #667085;
    font-size: .78rem;
    font-weight: 700;
}

.mini-stats span {
    border-radius: 999px;
    background: #f2f4f7;
    padding: .35rem .55rem;
}

.show-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    border: 1px solid #edf0f4;
    border-radius: .85rem;
    background: #fff;
    padding: .8rem;
}

.show-row-title {
    margin: 0;
    color: #111827;
    font-size: .95rem;
}

.show-row-stats {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    color: #667085;
    font-size: .74rem;
    font-weight: 700;
}

.watch-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.border-zinc-800,
.border-zinc-700,
.border {
    border-color: #e5e7eb;
}

.bg-zinc-950,
.bg-zinc-900,
.bg-zinc-800 {
    background: #fff;
}

.text-zinc-950 {
    color: #fff;
}

input,
textarea,
select {
    color: #111827;
}

nav .text-zinc-300,
nav a,
nav span,
nav button {
    color: #475467;
}

nav a:hover,
nav button:hover {
    color: #111827;
}

.post-card {
    overflow: visible;
    padding: 1.15rem;
}

.post-card-header {
    margin-bottom: .65rem;
}

.comments-panel {
    margin-top: .85rem;
    padding-top: .7rem;
}

.comment-social-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .65rem;
}

.comments-toggle,
.comments-thread-link {
    background: transparent;
    color: #667085;
    font-size: .82rem;
    font-weight: 800;
    padding: 0;
}

.comments-toggle:hover,
.comments-thread-link:hover {
    color: #be445b;
}

.comments-toggle-count {
    margin-left: .2rem;
    color: #98a2b3;
}

.comment-form-compact {
    margin-bottom: 0;
}

.comments-list-wrap {
    margin-top: .75rem;
}

.comments-list {
    gap: .55rem;
}

.comment-card {
    border: 0;
    border-radius: 1.1rem;
    background: #f2f4f7;
    padding: .7rem .85rem;
}

.comment-reply-card {
    background: #fff;
}

.comment-replying-to {
    margin: -.15rem 0 .35rem;
    color: #8a6f60;
    font-size: .72rem;
    font-weight: 800;
}

.comment-card .reaction-bar {
    margin-top: .45rem;
}

.comment-replies {
    margin-top: .6rem;
    padding-left: .75rem;
}

.social-post-card {
    position: relative;
    border: 1px solid #e3e7ed;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 .4rem 1rem rgba(31, 41, 55, .05);
    padding: 0;
}

.social-post-card::before {
    content: "";
    display: block;
    height: .28rem;
    border-radius: 1.25rem 1.25rem 0 0;
    background: #e85d75;
}

.social-post-card .post-card-header {
    margin: 0;
    padding: 1rem 1rem .65rem;
}

.social-post-card .identity {
    align-items: center;
}

.avatar-ring {
    width: 3rem;
    height: 3rem;
    outline: 3px solid #f8dce2;
    outline-offset: 2px;
}

.post-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem;
}

.post-handle {
    color: #98a2b3;
    font-size: .8rem;
    font-weight: 700;
}

.post-target-pill {
    border-radius: 999px;
    background: #fff4d8;
    color: #71521a;
    padding: .18rem .48rem;
    font-size: .72rem;
    font-weight: 800;
}

.post-menu-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #98a2b3;
    font-weight: 900;
    letter-spacing: 0;
}

.post-menu-dot:hover {
    background: #f2f4f7;
    color: #475467;
}

.post-storyline-strip {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 1rem .8rem;
    border-radius: .85rem;
    background: #fff7f8;
    color: #be445b;
    padding: .6rem .75rem;
    font-size: .85rem;
    font-weight: 850;
}

.post-storyline-label {
    border-radius: 999px;
    background: #fff;
    color: #8f3446;
    padding: .22rem .48rem;
    font-size: .68rem;
    text-transform: uppercase;
}

.post-content {
    margin: 0 1rem;
    border-radius: 1rem;
    background: #f8fafc;
    padding: .95rem 1rem;
}

.social-post-card .post-body {
    margin: 0;
    color: #111827;
    font-size: 1.03rem;
    line-height: 1.6;
}

.post-engagement-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: .8rem 1rem 0;
}

.post-engagement-row .reaction-bar {
    margin-top: 0;
}

.post-comment-count {
    color: #667085;
    font-size: .82rem;
    font-weight: 800;
}

.social-post-card .comments-panel {
    margin: .75rem 1rem 1rem;
    padding-top: .75rem;
}

/* Playful social-feed polish inspired by soft editorial charts and reality recap apps. */
body {
    background-color: #f8f1ea;
    background-image:
        linear-gradient(rgba(48, 67, 85, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48, 67, 85, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    color: #27313c;
    text-rendering: geometricPrecision;
}

.topbar {
    border-bottom: 1px solid #eadfd5;
    background: rgba(255, 252, 248, .9);
    box-shadow: 0 .45rem 1.25rem rgba(94, 74, 57, .07);
}

.brand-mark {
    color: #2f3944;
    font-size: 1.05rem;
    text-transform: uppercase;
}

.brand-mark::before {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .65rem;
    background:
        linear-gradient(90deg, #c5d7c2 0 50%, #95c2c8 50% 100%),
        #e85d75;
    box-shadow: 0 .4rem .9rem rgba(74, 90, 103, .14);
}

.page-frame {
    max-width: 1120px;
}

.panel-title {
    color: #2f3944;
    font-size: .92rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.hero-board,
.show-panel,
.sidebar-panel,
.universe-tile,
.event-tile,
.storyline-card,
.stat-tile {
    border-color: #eadfd5;
    background: #fffaf6;
    box-shadow: 0 .7rem 1.4rem rgba(94, 74, 57, .08);
}

.hero-board {
    border-radius: 1.2rem;
}

.active-event {
    border-color: #e8c1ad;
    background: #fff0e7;
}

.stats-strip {
    gap: 1rem;
}

.stat-tile {
    position: relative;
    overflow: hidden;
    border-radius: 1.1rem;
    padding: 1rem 1rem 1rem 1.15rem;
}

.stat-tile::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: .45rem;
    background: #c5d7c2;
}

.stat-tile:nth-child(2)::before {
    background: #95c2c8;
}

.stat-tile:nth-child(3)::before {
    background: #d7d5e6;
}

.stat-tile:nth-child(4)::before {
    background: #f0b29a;
}

.stat-tile:nth-child(5)::before {
    background: #f3d08b;
}

.stat-value {
    color: #2f3944;
    font-size: 2rem;
    letter-spacing: 0;
}

.stat-label,
.meta-line,
.post-handle,
.post-comment-count,
.comments-toggle,
.comments-thread-link {
    color: #6f7780;
}

.storyline-card,
.show-row,
.event-tile,
.cast-card {
    border-color: #eadfd5;
    background: #fffaf6;
}

.storyline-card {
    border-radius: 1.15rem;
}

.storyline-card:nth-child(4n + 1) {
    border-top: .45rem solid #c5d7c2;
}

.storyline-card:nth-child(4n + 2) {
    border-top: .45rem solid #95c2c8;
}

.storyline-card:nth-child(4n + 3) {
    border-top: .45rem solid #d7d5e6;
}

.storyline-card:nth-child(4n + 4) {
    border-top: .45rem solid #f0b29a;
}

.storyline-title,
.show-row-title,
.character-name {
    color: #2f3944;
}

.episode-badge,
.heat-badge,
.status-badge,
.mini-stats span,
.hashtag-pill {
    border: 0;
    background: #eef3ec;
    color: #51634d;
}

.heat-badge {
    background: #fde8dc;
    color: #9b4f35;
}

.hashtag-pill:nth-child(2n) {
    background: #e8f3f5;
    color: #456b70;
}

.hashtag-pill:nth-child(3n) {
    background: #eeedf7;
    color: #625d82;
}

.social-post-card {
    border-color: #eadfd5;
    border-radius: 1.35rem;
    background: #fffaf6;
    box-shadow: 0 .75rem 1.35rem rgba(94, 74, 57, .08);
}

.social-post-card::before {
    height: .48rem;
    background: var(--storyline-accent, #c5d7c2);
}

.avatar {
    background: #304355;
    box-shadow: 0 .35rem .8rem rgba(48, 67, 85, .16);
}

.avatar-ring {
    outline-color: #f4e2d4;
}

.post-name-row {
    gap: .45rem;
}

.social-post-card .post-card-header {
    padding: 1.05rem 1.1rem .75rem;
}

.post-storyline-strip {
    background: var(--storyline-bg, #eef3ec);
    color: var(--storyline-text, #2f4630);
    box-shadow: inset 0 0 0 2px var(--storyline-accent, #c5d7c2);
}

.post-storyline-label {
    color: inherit;
}

.post-content {
    background: #fff;
    box-shadow: inset 0 0 0 1px #f0e6dc;
}

.social-post-card .post-body {
    color: #26313b;
    font-size: 1.06rem;
    font-weight: 400;
}

.reaction-summary,
.reaction-picker,
.reaction-button,
.comment-input,
.comment-card {
    border-color: #eadfd5;
}

.reaction-button:hover,
.reaction-button.is-active,
.comments-toggle:hover,
.comments-thread-link:hover,
.comment-reply-toggle:hover {
    color: #9b4f35;
}

.reaction-button:hover,
.reaction-button.is-active {
    background: #fde8dc;
}

.comment-submit,
.primary-button,
.bg-amber-400 {
    background: #304355;
    box-shadow: 0 .4rem .8rem rgba(48, 67, 85, .14);
}

.comment-input,
.comment-card {
    background: #fff;
}

.comment-card {
    box-shadow: inset 0 0 0 1px #f0e6dc;
}

.drama-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem 1rem;
}

.drama-starter-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #e8f3f5;
    color: #244d53;
    padding: .45rem .7rem;
    font-size: .82rem;
    font-weight: 850;
}

.drama-target-pill {
    background: #eeedf7;
    color: #4a4668;
}

.drama-severity-control {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .65rem;
    color: #6f7780;
    font-size: .85rem;
    font-weight: 800;
}

.drama-severity-control input {
    accent-color: #304355;
}

.drama-event-summary-input {
    border-radius: 1rem;
    resize: vertical;
}

.modal-is-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(39, 49, 60, .42);
    padding: 1rem;
}

.modal-backdrop.hidden {
    display: none;
}

.modal-panel {
    width: min(100%, 34rem);
    max-height: min(90vh, 44rem);
    overflow: auto;
    border: 1px solid #eadfd5;
    border-radius: 1.35rem;
    background: #fffaf6;
    box-shadow: 0 1.5rem 4rem rgba(39, 49, 60, .22);
    padding: 1.15rem;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal-title {
    margin: .15rem 0 0;
    color: #2f3944;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.1;
}

.modal-close {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: #f4e2d4;
    color: #6f4a36;
    font-size: 1.45rem;
    line-height: 1;
}

.modal-close:hover {
    background: #fde8dc;
}

.modal-form {
    display: grid;
    gap: .75rem;
}

.modal-two-column {
    display: grid;
    gap: .75rem;
}

.auth-tab-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
    border-radius: 999px;
    background: #f4e2d4;
    padding: .35rem;
    margin-bottom: .85rem;
}

.auth-tab-button {
    border-radius: 999px;
    background: transparent;
    color: #6f7780;
    font-weight: 850;
    padding: .6rem .8rem;
}

.auth-tab-button.is-active {
    background: #fffaf6;
    color: #2f3944;
    box-shadow: 0 .25rem .6rem rgba(94, 74, 57, .10);
}

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