/* ========================================
   HUGE ASTROLOGY DESIGN SYSTEM
   Standardized components and utilities
   ======================================== */

html, body, button, input, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === BASE BUTTON STYLES === */
.btn {
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all 0.2s;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary Button - Main CTAs */
.btn-primary {
    font-weight: 600;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #4f46e5;
    color: #ffffff;
    transition: all 0.2s;
}
.btn-primary:hover {
    background-color: #4338ca;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Secondary Button - Alternative actions */
.btn-secondary {
    font-weight: 600;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #f1f5f9;
    color: #334155;
    transition: all 0.2s;
}
.dark .btn-secondary,
html.dark .btn-secondary {
    background-color: #1e293b;
    color: #cbd5e1;
}
.btn-secondary:hover {
    background-color: #e2e8f0;
}
.dark .btn-secondary:hover,
html.dark .btn-secondary:hover {
    background-color: #334155;
}

/* Outline Button - Tertiary actions */
.btn-outline {
    font-weight: 600;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid #4f46e5;
    color: #4f46e5;
    background-color: transparent;
    transition: all 0.2s;
}
.dark .btn-outline,
html.dark .btn-outline {
    border-color: #6366f1;
    color: #818cf8;
}
.btn-outline:hover {
    background-color: #eef2ff;
}
.dark .btn-outline:hover,
html.dark .btn-outline:hover {
    background-color: rgba(49, 46, 129, 0.2);
}

/* Danger Button - Destructive actions */
.btn-danger {
    font-weight: 600;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #dc2626;
    color: #ffffff;
    transition: all 0.2s;
}
.btn-danger:hover {
    background-color: #b91c1c;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Ghost Button - Minimal style */
.btn-ghost {
    font-weight: 600;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: transparent;
    color: #334155;
    transition: all 0.2s;
}
.dark .btn-ghost,
html.dark .btn-ghost {
    color: #cbd5e1;
}
.btn-ghost:hover {
    background-color: #f1f5f9;
}
.dark .btn-ghost:hover,
html.dark .btn-ghost:hover {
    background-color: #1e293b;
}

/* Button Sizes */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-md {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Icon-only buttons */
.btn-icon {
    padding: 0.5rem;
    border-radius: 0.5rem;
}

/* === CARD COMPONENTS === */
.card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.2s;
}
.dark .card,
html.dark .card {
    background-color: #0f172a;
    border-color: #1e293b;
}

.card-hover:hover {
    border-color: #c7d2fe;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.dark .card-hover:hover,
html.dark .card-hover:hover {
    border-color: rgba(49, 46, 129, 0.5);
}

.card-interactive {
    cursor: pointer;
}
.card-interactive:active {
    transform: scale(0.98);
}

/* Post card styles in light and dark mode: modern Reddit stream with rounded hover */
.post-card-item {
    background-color: #ffffff;
    border: none;
    border-radius: 16px;
    padding: 12px 16px;
    margin: 4px 0;
    transition: background-color 0.15s ease;
}
.post-card-item:hover {
    background-color: #F6F8F9;
}
.dark .post-card-item {
    background-color: #0e1113;
}
.dark .post-card-item:hover {
    background-color: rgba(30, 41, 59, 0.6) !important;
}

.post-item-wrapper {
    border-bottom: 1px solid #EDEFF1;
}
.dark .post-item-wrapper,
html.dark .post-item-wrapper {
    border-bottom: 1px solid rgba(51, 65, 85, 0.8);
}

/* Post Body Typography: text-base (16px), leading-normal (1.5), proper mb-3 paragraph rhythm */
.post-body p,
.ql-editor p,
.post-body ol,
.post-body ul,
.post-body li,
.ql-editor ol,
.ql-editor ul,
.ql-editor li {
    font-size: 1rem !important; /* text-base: 16px */
    line-height: 1.5 !important; /* leading-normal */
    color: #0f172a !important; /* text-slate-900 */
}
.post-body p,
.ql-editor p {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* strict mb-3: 12px */
}
.post-body ol,
.ql-editor ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}
.post-body ul,
.ql-editor ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}
.post-body li,
.ql-editor li {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}
.dark .post-body p,
.dark .ql-editor p,
.dark .post-body ol,
.dark .post-body ul,
.dark .post-body li,
.dark .ql-editor ol,
.dark .ql-editor ul,
.dark .ql-editor li,
html.dark .post-body p,
html.dark .ql-editor p,
html.dark .post-body ol,
html.dark .post-body ul,
html.dark .post-body li,
html.dark .ql-editor ol,
html.dark .ql-editor ul,
html.dark .ql-editor li {
    color: #f1f5f9 !important; /* dark:text-slate-100 */
}
.post-body p:last-child,
.ql-editor p:last-child {
    margin-bottom: 0 !important;
}

/* Remove empty paragraphs and excessive breaks in post bodies */
.post-body p:empty,
.ql-editor p:empty,
.post-body p:has(> br:only-child),
.ql-editor p:has(> br:only-child) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.post-body br + br,
.ql-editor br + br {
    display: none !important;
}

/* Post media container: full width radial gradient backdrop without image clipping */
.post-media-container {
    width: 100%;
    background: radial-gradient(circle, #333a3e 0%, #181c1f 100%);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 512px;
    margin: 10px 0;
}
.post-media-container img {
    max-height: 512px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.card-header {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0f172a;
}
.dark .card-header, html.dark .card-header {
    color: #ffffff;
}

.card-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: #0f172a;
}
.dark .card-title, html.dark .card-title {
    color: #ffffff;
}

/* Standardized Reddit-Style Titles */
.post-title-main, .rule-title-main, .article-title-main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 28px !important;
    color: rgb(15, 26, 28);
}
.dark .post-title-main, .dark .rule-title-main, .dark .article-title-main {
    color: rgb(241, 245, 249) !important;
}

.card-body {
    color: #475569;
    line-height: 1.625;
}
.dark .card-body, html.dark .card-body {
    color: #cbd5e1;
}

.card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dark .card-footer, html.dark .card-footer {
    border-color: #334155;
}

/* === BADGE COMPONENTS === */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: background-color 0.2s, color 0.2s;
}

.badge-primary {
    background-color: #e0e7ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.dark .badge-primary, html.dark .badge-primary {
    background-color: rgba(49, 46, 129, 0.3);
    color: #818cf8;
    border-color: #3730a3;
}

.badge-secondary {
    background-color: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}
.dark .badge-secondary, html.dark .badge-secondary {
    background-color: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}

.badge-success {
    background-color: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.dark .badge-success, html.dark .badge-success {
    background-color: rgba(20, 83, 45, 0.3);
    color: #4ade80;
    border-color: #166534;
}

.badge-warning {
    background-color: #fef9c3;
    color: #a16207;
    border: 1px solid #fef08a;
}
.dark .badge-warning, html.dark .badge-warning {
    background-color: rgba(113, 63, 18, 0.3);
    color: #facc15;
    border-color: #854d0e;
}

.badge-danger {
    background-color: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.dark .badge-danger, html.dark .badge-danger {
    background-color: rgba(127, 29, 29, 0.3);
    color: #f87171;
    border-color: #991b1b;
}

.badge-info {
    background-color: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.dark .badge-info, html.dark .badge-info {
    background-color: rgba(30, 58, 138, 0.3);
    color: #60a5fa;
    border-color: #1e40af;
}

/* === INPUT COMPONENTS === */
.input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.dark .input, html.dark .input {
    border-color: #334155;
    background-color: #1e293b;
    color: #ffffff;
}
.input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.input-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.input-lg {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
}

.input-error {
    border-color: #ef4444 !important;
}

.input-success {
    border-color: #22c55e !important;
}

/* Textarea */
.textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select */
.select {
    appearance: none;
    cursor: pointer;
}

select {
    color-scheme: light dark;
}

select option,
select optgroup {
    background-color: #ffffff;
    color: #0f172a;
}

.dark select option,
html.dark select option,
.dark select optgroup,
html.dark select optgroup {
    background-color: #0f172a;
    color: #f8fafc;
}

/* === ICON SIZES === */
.icon-xs { width: 1rem; height: 1rem; }
.icon-sm { width: 1.25rem; height: 1.25rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3rem; height: 3rem; }
.icon-2xl { width: 4rem; height: 4rem; }

/* === SPACING UTILITIES === */
.section-spacing > * + * { margin-top: 3rem; }
.card-spacing > * + * { margin-top: 1.5rem; }
.item-spacing > * + * { margin-top: 1rem; }
.tight-spacing > * + * { margin-top: 0.5rem; }

/* === TYPOGRAPHY === */
.heading-1 { font-size: 2.25rem; font-weight: 900; line-height: 1.25; color: #0f172a; } .dark .heading-1, html.dark .heading-1 { color: #ffffff; }

.heading-2 { font-size: 1.875rem; font-weight: 700; line-height: 1.25; color: #0f172a; } .dark .heading-2, html.dark .heading-2 { color: #ffffff; }

.heading-3 { font-size: 1.5rem; font-weight: 700; line-height: 1.375; color: #0f172a; } .dark .heading-3, html.dark .heading-3 { color: #ffffff; }

.heading-4 { font-size: 1.25rem; font-weight: 600; line-height: 1.375; color: #0f172a; } .dark .heading-4, html.dark .heading-4 { color: #ffffff; }

.heading-5 { font-size: 1.125rem; font-weight: 600; color: #0f172a; } .dark .heading-5, html.dark .heading-5 { color: #ffffff; }

.body-large { font-size: 1.125rem; color: #475569; line-height: 1.625; } .dark .body-large, html.dark .body-large { color: #cbd5e1; }

.body-text { font-size: 1rem; color: #475569; line-height: 1.625; } .dark .body-text, html.dark .body-text { color: #cbd5e1; }

.body-small { font-size: 0.875rem; color: #64748b; line-height: 1.5; } .dark .body-small, html.dark .body-small { color: #94a3b8; }

.caption { font-size: 0.75rem; color: #64748b; } .dark .caption, html.dark .caption { color: #94a3b8; }

/* === LINK STYLES === */
.link { color: #4f46e5; text-decoration: none; transition: color 0.2s; } .link:hover { text-decoration: underline; color: #4338ca; } .dark .link, html.dark .link { color: #818cf8; } .dark .link:hover, html.dark .link:hover { color: #a5b4fc; }

.link-muted { color: #475569; transition: color 0.2s; } .link-muted:hover { color: #4f46e5; } .dark .link-muted, html.dark .link-muted { color: #94a3b8; } .dark .link-muted:hover, html.dark .link-muted:hover { color: #818cf8; }

/* === ALERT COMPONENTS === */
.alert { padding: 1rem; border-radius: 0.5rem; border: 1px solid transparent; display: flex; align-items: flex-start; gap: 0.75rem; }

.alert-info { background-color: #eff6ff; border-color: #bfdbfe; color: #1e40af; } .dark .alert-info, html.dark .alert-info { background-color: rgba(30, 58, 138, 0.2); border-color: #1e40af; color: #93c5fd; }

.alert-success { background-color: #f0fdf4; border-color: #bbf7d0; color: #166534; } .dark .alert-success, html.dark .alert-success { background-color: rgba(20, 83, 45, 0.2); border-color: #166534; color: #86efac; }

.alert-warning { background-color: #fefce8; border-color: #fef08a; color: #854d0e; } .dark .alert-warning, html.dark .alert-warning { background-color: rgba(113, 63, 18, 0.2); border-color: #854d0e; color: #fde047; }

.alert-danger { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; } .dark .alert-danger, html.dark .alert-danger { background-color: rgba(127, 29, 29, 0.2); border-color: #991b1b; color: #fca5a5; }

/* === AVATAR COMPONENTS === */
.avatar { border-radius: 9999px; object-fit: cover; border: 2px solid #e2e8f0; } .dark .avatar, html.dark .avatar { border-color: #334155; }

.avatar-xs { width: 1.5rem; height: 1.5rem; }
.avatar-sm { width: 2rem; height: 2rem; }
.avatar-md { width: 2.5rem; height: 2.5rem; }
.avatar-lg { width: 3rem; height: 3rem; }
.avatar-xl { width: 4rem; height: 4rem; }
.avatar-2xl { width: 6rem; height: 6rem; }

/* === DIVIDER === */
.divider { border-top: 1px solid #e2e8f0; margin: 1.5rem 0; } .dark .divider, html.dark .divider { border-color: #334155; }

.divider-vertical { border-left: 1px solid #e2e8f0; margin: 0 1rem; } .dark .divider-vertical, html.dark .divider-vertical { border-color: #334155; }

/* === SKELETON LOADERS === */
.skeleton { background-color: #e2e8f0; border-radius: 0.5rem; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .dark .skeleton, html.dark .skeleton { background-color: #334155; }

.skeleton-text { height: 1rem; width: 100%; }

.skeleton-title { height: 1.5rem; width: 75%; }

.skeleton-avatar { border-radius: 9999px; }

/* === UTILITY CLASSES === */
.glass { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); } .dark .glass, html.dark .glass { background-color: rgba(15, 23, 42, 0.8); }

.gradient-primary { background-image: linear-gradient(to right, #4f46e5, #9333ea); }

.gradient-secondary { background-image: linear-gradient(to right, #475569, #1e293b); }

.shadow-soft { box-shadow: 0 10px 15px -3px rgba(226, 232, 240, 0.5); } .dark .shadow-soft, html.dark .shadow-soft { box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.5); }

.border-standard { border: 1px solid #e2e8f0; } .dark .border-standard, html.dark .border-standard { border-color: #1e293b; }

/* === ANIMATION UTILITIES === */
.transition-standard { transition: all 0.2s ease-in-out; }

.hover-lift { transition: transform 0.2s; } .hover-lift:hover { transform: translateY(-0.25rem); }

.hover-scale { transition: transform 0.2s; } .hover-scale:hover { transform: scale(1.05); }

/* === RESPONSIVE CONTAINERS === */
.container-narrow { max-width: 56rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

.container-standard { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

.container-wide { max-width: 96rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }

/* === FOCUS STATES === */
.focus-ring:focus { outline: none; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1; }

.focus-ring-inset:focus { outline: none; box-shadow: inset 0 0 0 2px #6366f1; }

/* === STAR ICON UTILITIES === */
.star-icon-unstarred {
    fill: none !important;
    stroke: currentColor !important;
}

.star-icon-starred {
    fill: currentColor !important;
    stroke: none !important;
}

/* === REDDIT-STYLE RESPONSIVE RIGHT LAYOUT PADDING === */
.site-main-layout {
    padding-right: 1rem !important;
    transition: padding 0.2s ease-out;
}
@media (min-width: 768px) {
    .site-main-layout {
        padding-right: 1.5rem !important;
    }
}

/* === DARK MODE CORE CANVAS & SHELL === */
html.dark,
html.dark body,
html.dark main,
html.dark .site-main-layout,
html.dark .main-canvas-area,
html.dark #main-content,
html.dark aside#desktop-sidebar {
    background-color: #0e1113 !important;
    color: #f1f5f9 !important;
}

html.dark aside#desktop-sidebar {
    border-color: rgba(51, 65, 85, 0.6) !important;
}

/* Right Sidebar & Widgets in Dark Mode */
html.dark .reddit-right-sidebar,
html.dark .community-right-sidebar {
    background-color: transparent !important;
}

html.dark .todays-transit-widget,
html.dark [x-data*="isFlipped"],
html.dark [x-data*="chartStyle"] {
    background-color: #131f23 !important;
    border-color: #273740 !important;
}

html.dark .recent-posts-widget,
html.dark [x-data*="recentPosts"] {
    background-color: #131f23 !important;
    border-color: #273740 !important;
}

html.dark .recent-posts-widget a,
html.dark [x-data*="recentPosts"] a {
    color: #f1f5f9 !important;
}

html.dark .community-sidebar-widget,
html.dark .community-details-card {
    background-color: #131f23 !important;
    border-color: #273740 !important;
}

/* === REDDIT-STYLE TWO-COLUMN GRID LAYOUT === */
.reddit-two-col-grid {
    max-width: 1058px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 726px) 308px !important;
    gap: 24px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* === REDDIT LEFT NAVIGATION SIDEBAR (Strictly 272px, matches Reddit specs) === */
aside#desktop-sidebar:not(.sidebar-collapsed) {
    width: 272px !important;
    min-width: 272px !important;
    max-width: 272px !important;
    flex: 0 0 272px !important;
}

@media (min-width: 1024px) {
    .reddit-two-col-grid {
        max-width: 1076px !important;
        padding-left: 18px !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 1024px) {
    .reddit-two-col-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 0 16px !important;
        gap: 16px !important;
    }
}

/* === REDDIT RIGHT SIDEBAR (Strictly 308px, never shrinks or stretches) === */
.reddit-right-sidebar {
    width: 308px !important;
    min-width: 308px !important;
    max-width: 308px !important;
    flex: 0 0 308px !important;
    box-sizing: border-box !important;
    display: block !important;
    position: sticky !important;
    top: 3.5rem !important;
    max-height: calc(100vh - 4.5rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: transparent transparent !important;
    transition: scrollbar-color 0.2s ease-in-out;
}
.reddit-right-sidebar:hover {
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent !important;
}
.dark .reddit-right-sidebar:hover {
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent !important;
}
.reddit-right-sidebar::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
.reddit-right-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}
.reddit-right-sidebar::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 9999px !important;
    transition: background-color 0.2s ease-in-out !important;
}
.reddit-right-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5) !important;
}
.dark .reddit-right-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4) !important;
}

/* === REDDIT PILL BUTTONS (Tactile #EAEDEF -> #D2D6D9 Hover States) === */
.reddit-action-pill {
    background-color: #EAEDEF !important;
    color: #0F1A1C !important;
    border: none !important;
    outline: none !important;
    border-radius: 9999px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    cursor: pointer !important;
}
.reddit-action-pill:hover {
    background-color: #D2D6D9 !important;
    outline: none !important;
}
.reddit-action-pill:focus,
.reddit-action-pill:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.dark .reddit-action-pill {
    background-color: #1A282D !important;
    color: #E2E8F0 !important;
}
.dark .reddit-action-pill:hover {
    background-color: #223237 !important;
}

/* Reddit Vote Pill */
.reddit-vote-pill {
    background-color: #EAEDEF !important;
    color: #0F1A1C !important;
    border: none !important;
    outline: none !important;
    border-radius: 9999px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}
.reddit-vote-pill:hover {
    background-color: #D2D6D9 !important;
    outline: none !important;
}
.reddit-vote-pill button {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: inherit;
    transition: color 0.15s ease !important;
    cursor: pointer !important;
}
.reddit-vote-pill button:focus,
.reddit-vote-pill button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Upvote Hover: Upvote arrow & score turn #FF4500 */
.reddit-vote-pill:has(.upvote-btn:hover) .upvote-btn,
.reddit-vote-pill .upvote-btn:hover,
.reddit-vote-pill:has(.upvote-btn:hover) .upvote-btn svg,
.reddit-vote-pill .upvote-btn:hover svg {
    color: #FF4500 !important;
    stroke: #FF4500 !important;
}
.reddit-vote-pill:has(.upvote-btn:hover) .vote-score {
    color: #FF4500 !important;
}

/* Downvote Hover: Downvote arrow & score turn #7193FF */
.reddit-vote-pill:has(.downvote-btn:hover) .downvote-btn,
.reddit-vote-pill .downvote-btn:hover,
.reddit-vote-pill:has(.downvote-btn:hover) .downvote-btn svg,
.reddit-vote-pill .downvote-btn:hover svg {
    color: #7193FF !important;
    stroke: #7193FF !important;
}
.reddit-vote-pill:has(.downvote-btn:hover) .vote-score {
    color: #7193FF !important;
}

/* Active Upvoted State: Permanently #FF4500 */
.reddit-vote-pill.is-upvoted {
    background-color: #EAEDEF !important;
}
.reddit-vote-pill.is-upvoted:hover {
    background-color: #D2D6D9 !important;
}
.reddit-vote-pill.is-upvoted .upvote-btn,
.reddit-vote-pill.is-upvoted .upvote-btn svg {
    color: #FF4500 !important;
    fill: #FF4500 !important;
    stroke: #FF4500 !important;
}
.reddit-vote-pill.is-upvoted .vote-score {
    color: #FF4500 !important;
}

/* Active Downvoted State */
.reddit-vote-pill.is-downvoted {
    background-color: #EAEDEF !important;
}
.reddit-vote-pill.is-downvoted:hover {
    background-color: #D2D6D9 !important;
}
.reddit-vote-pill.is-downvoted .downvote-btn,
.reddit-vote-pill.is-downvoted .downvote-btn svg {
    color: #7193FF !important;
    fill: #7193FF !important;
    stroke: #7193FF !important;
}
.reddit-vote-pill.is-downvoted .vote-score {
    color: #7193FF !important;
}

/* Dark Mode for Vote Pill */
.dark .reddit-vote-pill {
    background-color: #1A282D !important;
    color: #E2E8F0 !important;
}
.dark .reddit-vote-pill:hover {
    background-color: #223237 !important;
}
.dark .reddit-vote-pill.is-upvoted {
    background-color: #1A282D !important;
}
.dark .reddit-vote-pill.is-upvoted:hover {
    background-color: #223237 !important;
}
.dark .reddit-vote-pill.is-downvoted {
    background-color: #1A282D !important;
}
.dark .reddit-vote-pill.is-downvoted:hover {
    background-color: #223237 !important;
}

@media (max-width: 1023px) {
    .reddit-right-sidebar {
        display: none !important;
    }
    .reddit-two-col-grid > aside,
    .reddit-two-col-grid > .community-right-sidebar,
    .reddit-two-col-grid > .reddit-right-sidebar {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .reddit-right-sidebar {
        display: block !important;
    }
    .lg\:block {
        display: block !important;
    }
    .lg\:flex {
        display: flex !important;
    }
    .lg\:hidden {
        display: none !important;
    }
    .lg\:grid {
        display: grid !important;
    }
}

/* === REDDIT-STYLE POST CARD MEDIA SCALING (Full image scaled, never cropped) === */
.post-card-media-img {
    max-height: 540px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.post-media-container {
    width: 100% !important;
    background: radial-gradient(circle, #333a3e 0%, #181c1f 100%) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-height: 540px !important;
    margin: 10px 0 !important;
}

/* === UPGRADE CENTER POST BODY TYPOGRAPHY === */
.post-card-item .post-body,
.post-card-item [class*="line-clamp"],
#main-content .post-body,
#main-content article p,
#main-content .ql-editor p,
#main-content .post-body ol,
#main-content .post-body ul,
#main-content .post-body li,
#main-content .ql-editor ol,
#main-content .ql-editor ul,
#main-content .ql-editor li {
    font-size: 1rem !important; /* text-base: 16px */
    line-height: 1.5 !important; /* leading-normal */
    color: #0f172a;
}
.post-card-item .post-body,
#main-content article p,
#main-content .ql-editor p {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* strict mb-3 */
}

.dark .post-card-item .post-body,
.dark .post-card-item [class*="line-clamp"],
.dark #main-content .post-body,
.dark #main-content article p,
.dark #main-content .ql-editor p,
.dark #main-content .post-body ol,
.dark #main-content .post-body ul,
.dark #main-content .post-body li,
.dark #main-content .ql-editor ol,
.dark #main-content .ql-editor ul,
.dark #main-content .ql-editor li,
html.dark #main-content .post-body,
html.dark #main-content article p,
html.dark #main-content .ql-editor p,
html.dark #main-content .post-body ol,
html.dark #main-content .post-body ul,
html.dark #main-content .post-body li,
html.dark #main-content .ql-editor ol,
html.dark #main-content .ql-editor ul,
html.dark #main-content .ql-editor li {
    color: #f1f5f9;
}

#main-content .post-body p:empty,
#main-content .ql-editor p:empty,
#main-content .post-body p:has(> br:only-child),
#main-content .ql-editor p:has(> br:only-child) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#main-content .post-body br + br,
#main-content .ql-editor br + br {
    display: none !important;
}

/* === UPGRADE SIDEBAR WIDGET TYPOGRAPHY === */
.reddit-right-sidebar .community-sidebar-widget p,
.community-right-sidebar .community-sidebar-widget p,
.reddit-right-sidebar p,
.community-right-sidebar p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px;
}

.reddit-right-sidebar .community-sidebar-widget p:last-child,
.community-right-sidebar .community-sidebar-widget p:last-child,
.reddit-right-sidebar p:last-child,
.community-right-sidebar p:last-child {
    margin-bottom: 0;
}