/* Romoid post show — product sheet (clean rebuild) */

body.post-show-page {
    --romoid-blue: #1d6fd8;
    --romoid-blue-dark: #1557b0;
    --romoid-blue-soft: #e8f2ff;
    --romoid-sky: #4fc3f7;
    --romoid-ink: #0f172a;
    --romoid-copy: #475569;
    --romoid-muted: #64748b;
    --romoid-line: #e8eef5;
    --romoid-surface: #ffffff;
    --romoid-page: #f7f9fc;
    --romoid-soft: #f1f5f9;
    --romoid-radius: 14px;
    background: var(--romoid-page) !important;
    color: var(--romoid-ink);
}

body.post-show-page .romoid-catalog-container {
    max-width: 980px;
    padding-inline: 16px !important;
}

body.post-show-page .romoid-catalog {
    padding: 12px 0 56px !important;
}

body.post-show-page .romoid-breadcrumb {
    margin: 0 0 12px !important;
    color: var(--romoid-muted);
    font-size: 12px;
}

body.post-show-page .romoid-eyebrow,
body.post-show-page .romoid-live-dot,
body.post-show-page .romoid-thumb-glow,
body.post-show-page .romoid-jump {
    display: none !important;
}

/* Hero */
body.post-show-page .romoid-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.post-show-page .romoid-intro::before {
    display: none !important;
}

body.post-show-page .romoid-game-thumb {
    border: 0 !important;
    border-radius: var(--romoid-radius) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    background: #0f172a !important;
}

body.post-show-page .romoid-intro-copy {
    gap: 10px !important;
}

body.post-show-page .romoid-intro h1,
body.post-show-page .romoid-intro h1#post-title {
    margin: 0 !important;
    color: var(--romoid-ink) !important;
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem) !important;
    font-weight: 750 !important;
    letter-spacing: -0.03em;
    line-height: 1.2 !important;
}

/* Intro Meta: Clean, modern typographic metadata line */
body.post-show-page .romoid-intro-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

body.post-show-page .romoid-intro-meta time,
body.post-show-page .romoid-intro-meta > span {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

body.post-show-page .romoid-intro-meta > * + *::before {
    content: "·" !important;
    margin: 0 8px !important;
    color: #cbd5e1 !important;
    font-weight: 700 !important;
}

/* Codes Link: Natural, clean text link */
body.post-show-page .romoid-intro-meta a {
    color: #0284c7 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color 120ms ease !important;
}

body.post-show-page .romoid-intro-meta a:hover {
    color: #0369a1 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Hero Actions: Refined, elegant buttons that are harmonious and not flashy */
body.post-show-page .romoid-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
}

body.post-show-page .romoid-action-button,
body.post-show-page .romoid-icon-button {
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 120ms ease !important;
}

/* Follow Button: Understated, premium modern aesthetic */
body.post-show-page .romoid-action-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 31px !important;
    padding: 0 13px !important;
    border: 1px solid #0284c7 !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

body.post-show-page .romoid-action-button svg {
    width: 13px !important;
    height: 13px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    fill: none !important;
}

body.post-show-page .romoid-action-button:hover {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
    color: #ffffff !important;
}

body.post-show-page .romoid-action-button.is-active {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: none !important;
}

body.post-show-page .romoid-action-button.is-active svg {
    stroke: #059669 !important;
}

body.post-show-page .romoid-action-button.is-active:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Icon Buttons: Like, Share, Edit */
body.post-show-page .romoid-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

body.post-show-page .romoid-icon-button svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    fill: none !important;
    transition: transform 120ms ease, color 120ms ease, fill 120ms ease !important;
}

body.post-show-page .romoid-icon-button:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05) !important;
}

body.post-show-page .romoid-icon-button.is-liked {
    border-color: #fecaca !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

body.post-show-page .romoid-icon-button.is-liked svg {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

body.post-show-page .romoid-text-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: all 140ms ease !important;
}

body.post-show-page .romoid-text-button svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #0284c7 !important;
    stroke-width: 2.2 !important;
    fill: none !important;
}

body.post-show-page .romoid-text-button:hover {
    border-color: #0284c7 !important;
    background: #f0f9ff !important;
    color: #0284c7 !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.12) !important;
    transform: translateY(-1px) !important;
}

/* Sections */
body.post-show-page .romoid-section {
    padding: 0 0 28px !important;
    border: 0 !important;
}

body.post-show-page .romoid-section + .romoid-section {
    border-top: 0 !important;
}

body.post-show-page .romoid-section-heading {
    margin-bottom: 16px !important;
}

body.post-show-page .romoid-section-heading h2 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

body.post-show-page .romoid-section-heading p {
    margin: 3px 0 0 !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 550 !important;
}

body.post-show-page .romoid-section-heading h2::before {
    content: none !important;
    display: none !important;
}

/* Codes */
body.post-show-page .romoid-codes-layout {
    display: grid !important;
    gap: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.post-show-page .romoid-code-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

body.post-show-page .romoid-code-card,
body.post-show-page .romoid-code-card:hover {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0;
    padding: 8px 12px !important;
    border: 1px solid var(--romoid-line) !important;
    border-radius: 9px !important;
    background: var(--romoid-surface) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    outline: none !important;
    transform: none !important;
}

body.post-show-page .romoid-code-card::before {
    display: none !important;
}

body.post-show-page .romoid-code-card:hover {
    border-color: color-mix(in srgb, var(--romoid-blue) 25%, var(--romoid-line)) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

body.post-show-page .romoid-code-card[data-code-status="expired"] {
    background: #fafbfc !important;
    border-color: #e2e8f0 !important;
    opacity: 0.92 !important;
}

body.post-show-page .romoid-code-card-top {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin: 0 !important;
}

body.post-show-page .romoid-code-status {
    min-height: 18px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    background: var(--romoid-soft) !important;
    color: var(--romoid-muted) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.post-show-page .romoid-code-card[data-code-status="active"] .romoid-code-status {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}

body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-status {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca !important;
}

body.post-show-page .romoid-code-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    color: var(--romoid-muted) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

body.post-show-page .romoid-code-meta > span + span::before {
    left: -4px !important;
    width: 2.5px !important;
    height: 2.5px !important;
    background: #cbd5e1 !important;
}

body.post-show-page .romoid-code-copyline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    outline: none !important;
}

body.post-show-page .romoid-code-value {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
}

body.post-show-page .romoid-code-value a {
    text-decoration: none !important;
    color: inherit !important;
}

body.post-show-page .romoid-code-value code {
    display: inline-block !important;
    padding: 1px 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 5px !important;
    background: #f8fafc !important;
    color: var(--romoid-ink) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: clamp(14px, 2vw, 15.5px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.35 !important;
}

body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-value code {
    color: #475569 !important;
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    text-decoration: line-through !important;
    text-decoration-color: #94a3b8 !important;
}

body.post-show-page .romoid-copy-button {
    min-width: 80px !important;
    min-height: 27px !important;
    padding: 0 10px !important;
    border: 1px solid #0284c7 !important;
    border-radius: 6px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2) !important;
    transition: all 120ms ease !important;
    flex-shrink: 0 !important;
}

body.post-show-page .romoid-copy-button svg {
    width: 12px !important;
    height: 12px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

body.post-show-page .romoid-copy-button:hover:not(:disabled) {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
}

body.post-show-page .romoid-copy-button.is-copied {
    background: #059669 !important;
    border-color: #059669 !important;
}

body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-copy-button,
body.post-show-page .romoid-copy-button:disabled {
    min-width: 66px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 5px !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.8 !important;
}

body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-copy-button svg,
body.post-show-page .romoid-copy-button:disabled svg {
    display: none !important;
}

body.post-show-page .romoid-code-reward {
    margin: 0 !important;
    color: var(--romoid-copy) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-reward {
    color: #64748b !important;
}

body.post-show-page .romoid-code-confirmation-summary {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 1px 0 0 !important;
    padding-top: 3px !important;
    border-top: 1px solid #f1f5f9 !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
}

body.post-show-page .romoid-code-confirmation-summary svg {
    width: 10px !important;
    height: 10px !important;
}

body.post-show-page .romoid-code-confirmation-summary .is-worked {
    color: #059669 !important;
}

body.post-show-page .romoid-code-confirmation-summary .is-expired {
    color: #dc2626 !important;
}

body.post-show-page .romoid-code-confirmations {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 1px 0 0 !important;
    padding-top: 0 !important;
    border: 0 !important;
}

body.post-show-page .romoid-code-confirmations > span {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

body.post-show-page .romoid-code-confirmations button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 20px !important;
    padding: 0 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    gap: 3px !important;
    cursor: pointer !important;
    transition: all 120ms ease !important;
}

body.post-show-page .romoid-code-confirmations button svg {
    width: 9px !important;
    height: 9px !important;
}

body.post-show-page .romoid-code-confirmations button.is-worked {
    border-color: #a7f3d0 !important;
    color: #059669 !important;
    background: #f0fdf4 !important;
}

body.post-show-page .romoid-code-confirmations button.is-worked:hover {
    background: #dcfce7 !important;
    border-color: #6ee7b7 !important;
}

body.post-show-page .romoid-code-confirmations button.is-expired {
    border-color: #fecaca !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

body.post-show-page .romoid-code-confirmations button.is-expired:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

/* Redeem: Unified Step-by-Step Guide Box */
body.post-show-page .romoid-redeem {
    margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

body.post-show-page .romoid-redeem h3 {
    margin: 0 0 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.post-show-page .romoid-redeem ol {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    counter-reset: redeem-step !important;
}

body.post-show-page .romoid-redeem li {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    counter-increment: redeem-step !important;
}

/* Subtle connecting vertical line */
body.post-show-page .romoid-redeem li:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    left: 11.5px !important;
    top: 26px !important;
    bottom: -10px !important;
    width: 1px !important;
    background: #e2e8f0 !important;
}

body.post-show-page .romoid-redeem li::before {
    content: counter(redeem-step) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;
}

body.post-show-page .romoid-redeem li span {
    padding-top: 2px !important;
}

/* Empty State Card - Compact horizontal banner */
body.post-show-page .romoid-empty-state {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 9px 13px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    text-align: left !important;
}

body.post-show-page .romoid-empty-state-copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}

body.post-show-page .romoid-empty-state .romoid-empty-icon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 8px !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.post-show-page .romoid-empty-state .romoid-empty-icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #0284c7 !important;
    stroke-width: 2 !important;
    fill: none !important;
}

body.post-show-page .romoid-empty-state h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

body.post-show-page .romoid-empty-state p {
    margin: 2px 0 0 !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    max-width: 520px !important;
    text-align: left !important;
}

body.post-show-page .romoid-empty-state a.romoid-empty-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 27px !important;
    padding: 0 11px !important;
    border: 1px solid #0284c7 !important;
    border-radius: 6px !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2) !important;
    transition: all 120ms ease !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
}

body.post-show-page .romoid-empty-state a.romoid-empty-cta:hover {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
}

/* Expired codes accordion */
body.post-show-page details.romoid-expired-codes {
    margin-top: 10px !important;
    border-top: 1px solid #e2e8f0 !important;
}

body.post-show-page details.romoid-expired-codes summary {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 30px !important;
    padding: 5px 2px !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    user-select: none !important;
    list-style: none !important;
}

body.post-show-page details.romoid-expired-codes summary::-webkit-details-marker {
    display: none !important;
}

body.post-show-page details.romoid-expired-codes summary:hover {
    color: #0f172a !important;
}

body.post-show-page details.romoid-expired-codes summary span:nth-child(2) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

body.post-show-page details.romoid-expired-codes summary svg {
    width: 13px !important;
    height: 13px !important;
    margin-left: auto !important;
    color: #94a3b8 !important;
    stroke: currentColor !important;
    transition: transform 140ms ease !important;
}

body.post-show-page details.romoid-expired-codes[open] summary svg {
    transform: rotate(180deg) !important;
}

body.post-show-page .romoid-code-list--expired {
    padding: 4px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* About + resources */
body.post-show-page .romoid-about-section .romoid-about-content,
body.post-show-page .romoid-knowledge-section .romoid-tabs {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.post-show-page .romoid-tab-list {
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    padding: 4px !important;
    border: 1px solid var(--romoid-line) !important;
    border-radius: 999px !important;
    background: var(--romoid-surface) !important;
    box-shadow: none !important;
}

body.post-show-page .romoid-tab {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--romoid-muted) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.post-show-page .romoid-tab:hover {
    color: var(--romoid-blue-dark) !important;
    background: var(--romoid-soft) !important;
}

body.post-show-page .romoid-tab[aria-selected="true"],
body.post-show-page .romoid-tab[aria-selected="true"]:hover {
    background: var(--romoid-blue) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.post-show-page .romoid-tab[aria-selected="true"] small {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}

body.post-show-page .romoid-tab-panel {
    padding-top: 14px !important;
}

@media (min-width: 720px) {
    body.post-show-page .romoid-catalog-container {
        padding-inline: 20px !important;
    }

    body.post-show-page .romoid-intro {
        grid-template-columns: 240px minmax(0, 1fr) !important;
        gap: 18px 20px !important;
        align-items: center !important;
    }
}

@media (min-width: 1024px) {
    body.post-show-page .romoid-codes-layout:has(.romoid-codes-main) {
        grid-template-columns: minmax(0, 1fr) 290px !important;
        gap: 18px !important;
        align-items: start !important;
    }

    body.post-show-page .romoid-codes-layout:has(.romoid-codes-main) .romoid-redeem {
        position: sticky !important;
        top: 84px !important;
    }

    body.post-show-page .romoid-codes-layout:has(.romoid-codes-main) .romoid-redeem ol {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    body.post-show-page .romoid-empty-state {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    body.post-show-page .romoid-empty-state a.romoid-empty-cta {
        width: 100% !important;
    }
}

@media (max-width: 540px) {
    body.post-show-page .romoid-catalog-container {
        padding-inline: 14px !important;
    }

    body.post-show-page .romoid-tab-list {
        border-radius: 14px !important;
    }

    body.post-show-page .romoid-tab {
        border-radius: 10px !important;
    }
}

@media (max-width: 720px) {
    body.post-show-page .romoid-section-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    body.post-show-page .romoid-section-heading > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.post-show-page .romoid-section-heading h2 {
        white-space: normal !important;
        word-break: normal !important;
    }

    body.post-show-page .romoid-section-heading p {
        white-space: normal !important;
    }

    body.post-show-page .romoid-section-actions {
        display: flex !important;
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    body.post-show-page .romoid-text-button {
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 10px !important;
        font-size: 11.5px !important;
        border-radius: 7px !important;
    }

    body.post-show-page .romoid-text-button svg {
        width: 13px !important;
        height: 13px !important;
    }
}

@media (min-width: 721px) and (pointer: coarse) {
    body.post-show-page .romoid-action-button,
    body.post-show-page .romoid-icon-button,
    body.post-show-page .romoid-text-button,
    body.post-show-page .romoid-tab {
        min-height: 44px !important;
    }

    body.post-show-page .romoid-icon-button {
        width: 44px !important;
    }
}

/* Dark mode overrides for polished show page */
html.dark body.post-show-page,
body.dark.post-show-page,
html[data-theme="dark"] body.post-show-page {
    --romoid-ink: #e8eef6;
    --romoid-copy: #c5d0de;
    --romoid-muted: #8ea0b5;
    --romoid-line: #223247;
    --romoid-surface: #111c2b;
    --romoid-page: #0b1522;
    --romoid-soft: #16263b;
    --romoid-blue-soft: #142a47;
    color-scheme: dark;
}

html.dark body.post-show-page .romoid-code-card[data-code-status="active"] .romoid-code-status,
body.dark.post-show-page .romoid-code-card[data-code-status="active"] .romoid-code-status {
    background: #0d3826 !important;
    color: #48d597 !important;
}

html.dark body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-status,
body.dark.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-status {
    background: #3f1715 !important;
    color: #fca5a5 !important;
}

html.dark body.post-show-page .romoid-codes-section .romoid-section-heading h2,
body.dark.post-show-page .romoid-codes-section .romoid-section-heading h2 {
    color: #f1f5f9 !important;
}

html.dark body.post-show-page .romoid-codes-section .romoid-section-heading p,
body.dark.post-show-page .romoid-codes-section .romoid-section-heading p {
    color: #94a3b8 !important;
}

html.dark body.post-show-page .romoid-text-button,
body.dark.post-show-page .romoid-text-button {
    border-color: #1e3552 !important;
    background: #111e30 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

html.dark body.post-show-page .romoid-text-button:hover,
body.dark.post-show-page .romoid-text-button:hover {
    border-color: #38bdf8 !important;
    background: #16263d !important;
    color: #38bdf8 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
}

html.dark body.post-show-page .romoid-text-button svg,
body.dark.post-show-page .romoid-text-button svg {
    stroke: #38bdf8 !important;
}

html.dark body.post-show-page .romoid-empty-state,
body.dark.post-show-page .romoid-empty-state {
    background: #111e30 !important;
    border-color: #1e3552 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark body.post-show-page .romoid-empty-state .romoid-empty-icon,
body.dark.post-show-page .romoid-empty-state .romoid-empty-icon {
    background: rgba(56, 189, 248, 0.1) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
    color: #38bdf8 !important;
}

html.dark body.post-show-page .romoid-empty-state .romoid-empty-icon svg,
body.dark.post-show-page .romoid-empty-state .romoid-empty-icon svg {
    stroke: #38bdf8 !important;
}

html.dark body.post-show-page .romoid-empty-state h3,
body.dark.post-show-page .romoid-empty-state h3 {
    color: #f1f5f9 !important;
}

html.dark body.post-show-page .romoid-empty-state p,
body.dark.post-show-page .romoid-empty-state p {
    color: #94a3b8 !important;
}

html.dark body.post-show-page .romoid-redeem,
body.dark.post-show-page .romoid-redeem {
    border-color: #1e3552 !important;
    background: #111e30 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark body.post-show-page .romoid-redeem h3,
body.dark.post-show-page .romoid-redeem h3 {
    color: #f1f5f9 !important;
    border-bottom-color: #1e3552 !important;
}

html.dark body.post-show-page .romoid-redeem li,
body.dark.post-show-page .romoid-redeem li {
    color: #94a3b8 !important;
}

html.dark body.post-show-page .romoid-redeem li::before,
body.dark.post-show-page .romoid-redeem li::before {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
}

html.dark body.post-show-page .romoid-redeem li:not(:last-child)::after,
body.dark.post-show-page .romoid-redeem li:not(:last-child)::after {
    background: #1e3552 !important;
}

html.dark body.post-show-page .romoid-code-card,
body.dark.post-show-page .romoid-code-card {
    background: #111e30 !important;
    border-color: #1e3552 !important;
}

html.dark body.post-show-page .romoid-code-card:hover,
body.dark.post-show-page .romoid-code-card:hover {
    border-color: #38bdf8 !important;
}

html.dark body.post-show-page .romoid-code-card[data-code-status="expired"],
body.dark.post-show-page .romoid-code-card[data-code-status="expired"] {
    background: #0d1726 !important;
    border-color: #1a2c42 !important;
}

html.dark body.post-show-page .romoid-code-value code,
body.dark.post-show-page .romoid-code-value code {
    background: #16263d !important;
    border-color: #1e3552 !important;
    color: #f1f5f9 !important;
}

html.dark body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-value code,
body.dark.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-value code {
    background: #111c2b !important;
    border-color: #1a2c42 !important;
    color: #8ea0b5 !important;
    text-decoration-color: #64748b !important;
}

html.dark body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-copy-button,
html.dark body.post-show-page .romoid-copy-button:disabled,
body.dark.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-copy-button,
body.dark.post-show-page .romoid-copy-button:disabled {
    background: #16263d !important;
    color: #64748b !important;
    border-color: #1e3552 !important;
}

html.dark body.post-show-page .romoid-code-reward,
body.dark.post-show-page .romoid-code-reward {
    color: #cbd5e1 !important;
}

html.dark body.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-reward,
body.dark.post-show-page .romoid-code-card[data-code-status="expired"] .romoid-code-reward {
    color: #8ea0b5 !important;
}

html.dark body.post-show-page .romoid-code-confirmation-summary,
body.dark.post-show-page .romoid-code-confirmation-summary {
    border-top-color: #1a2c42 !important;
    color: #8ea0b5 !important;
}

html.dark body.post-show-page .romoid-code-confirmations button,
body.dark.post-show-page .romoid-code-confirmations button {
    background: #111e30 !important;
    border-color: #1e3552 !important;
}

html.dark body.post-show-page .romoid-code-confirmations button.is-worked,
body.dark.post-show-page .romoid-code-confirmations button.is-worked {
    background: #062817 !important;
    border-color: #0e4b2d !important;
    color: #34d399 !important;
}

html.dark body.post-show-page .romoid-code-confirmations button.is-expired,
body.dark.post-show-page .romoid-code-confirmations button.is-expired {
    background: #2b1111 !important;
    border-color: #521e1e !important;
    color: #f87171 !important;
}

html.dark body.post-show-page details.romoid-expired-codes,
body.dark.post-show-page details.romoid-expired-codes {
    border-top-color: #1e3552 !important;
}

html.dark body.post-show-page details.romoid-expired-codes summary,
body.dark.post-show-page details.romoid-expired-codes summary {
    color: #8ea0b5 !important;
}

html.dark body.post-show-page details.romoid-expired-codes summary:hover,
body.dark.post-show-page details.romoid-expired-codes summary:hover {
    color: #f1f5f9 !important;
}

html.dark body.post-show-page details.romoid-expired-codes summary span:nth-child(2),
body.dark.post-show-page details.romoid-expired-codes summary span:nth-child(2) {
    background: #16263d !important;
    color: #cbd5e1 !important;
}

html.dark body.post-show-page .romoid-intro-meta,
body.dark.post-show-page .romoid-intro-meta {
    color: #8ea0b5 !important;
}

html.dark body.post-show-page .romoid-intro-meta time,
html.dark body.post-show-page .romoid-intro-meta > span,
body.dark.post-show-page .romoid-intro-meta time,
body.dark.post-show-page .romoid-intro-meta > span {
    color: #8ea0b5 !important;
}

html.dark body.post-show-page .romoid-intro-meta > * + *::before,
body.dark.post-show-page .romoid-intro-meta > * + *::before {
    color: #334155 !important;
}

html.dark body.post-show-page .romoid-intro-meta a,
body.dark.post-show-page .romoid-intro-meta a {
    color: #38bdf8 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

html.dark body.post-show-page .romoid-intro-meta a:hover,
body.dark.post-show-page .romoid-intro-meta a:hover {
    color: #7dd3fc !important;
    text-decoration: underline !important;
}

html.dark body.post-show-page .romoid-action-button,
body.dark.post-show-page .romoid-action-button {
    border-color: #0284c7 !important;
    background: #0284c7 !important;
    color: #ffffff !important;
}

html.dark body.post-show-page .romoid-action-button:hover,
body.dark.post-show-page .romoid-action-button:hover {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
}

html.dark body.post-show-page .romoid-action-button.is-active,
body.dark.post-show-page .romoid-action-button.is-active {
    background: #16263d !important;
    border-color: #1e3552 !important;
    color: #cbd5e1 !important;
}

html.dark body.post-show-page .romoid-action-button.is-active:hover,
body.dark.post-show-page .romoid-action-button.is-active:hover {
    background: #1e3552 !important;
    border-color: #38bdf8 !important;
    color: #f1f5f9 !important;
}

html.dark body.post-show-page .romoid-icon-button,
body.dark.post-show-page .romoid-icon-button {
    background: #111e30 !important;
    border-color: #1e3552 !important;
    color: #8ea0b5 !important;
}

html.dark body.post-show-page .romoid-icon-button:hover,
body.dark.post-show-page .romoid-icon-button:hover {
    border-color: #38bdf8 !important;
    background: #16263d !important;
    color: #38bdf8 !important;
}

html.dark body.post-show-page .romoid-icon-button.is-liked,
body.dark.post-show-page .romoid-icon-button.is-liked {
    border-color: #7f1d1d !important;
    background: #2b1111 !important;
    color: #f87171 !important;
}

html.dark body.post-show-page .romoid-icon-button.is-liked svg,
body.dark.post-show-page .romoid-icon-button.is-liked svg {
    fill: #f87171 !important;
    stroke: #f87171 !important;
}

html.dark body.post-show-page .romoid-tab:hover,
body.dark.post-show-page .romoid-tab:hover {
    color: #70b8ff !important;
    background: #192c44 !important;
}
