:root {
    --light-blue: #add8e6;
    --title-card-bg: #2e160a;
    --meta-card-bg: #add8e6;
    --meta-text: black;
    --meta-link: #0066cc;
    --content-card-bg: white;
    --content-text: black;
}
html[data-mode="dark"] {
    --title-card-bg: #150c05;
    --meta-card-bg: #2a1f14;
    --meta-text: #d4c4a8;
    --meta-link: #d4956a;
    --content-card-bg: #1c1410;
    --content-text: #e8d5b7;
}
.article-card {
    margin-bottom: 1.5rem;
}
.title-card {
    background: var(--title-card-bg) !important;
    padding: 1.5rem !important;
    border-radius: 8px 8px 0 0 !important;
    margin-bottom: 0 !important;
}
.title-card h2 {
    color: white !important;
    margin: 0 !important;
    word-break: break-word;
    overflow-wrap: break-word;
}
.meta-card {
    background: var(--meta-card-bg) !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}
.meta-card,
.meta-card li {
    color: var(--meta-text) !important;
}
.meta-card a {
    color: var(--meta-link) !important;
}
.meta-card a.instapaper-btn,
a.instapaper-btn {
    color: #fff !important;
}
html[data-mode="dark"] .meta-card * {
    color: var(--meta-text) !important;
}
html[data-mode="dark"] .meta-card a {
    color: var(--meta-link) !important;
}
html[data-mode="dark"] .meta-card a.instapaper-btn {
    color: #fff !important;
}
.content-card {
    background: var(--content-card-bg) !important;
    padding: 1.5rem !important;
    border-radius: 0 !important;
    margin-bottom: 1.5rem !important;
    color: var(--content-text) !important;
}
.content-card * {
    color: var(--content-text) !important;
}
.content-card mark.user-highlight {
    background-color: #fef08a !important;
    color: #1a1a1a !important;
    padding: 1px 0;
    border-radius: 2px;
}
.content-card h3 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1.5em 0 0.75em 0;
}
.content-card ul {
    list-style-type: disc;
    margin-left: 2em;
    margin-bottom: 1em;
    padding-left: 0;
}
.content-card ol {
    list-style-type: decimal;
    margin-left: 2em;
    margin-bottom: 1em;
    padding-left: 0;
}
.content-card li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}
.content-card p {
    margin-bottom: 1em;
    line-height: 1.6;
}
.copy-icon {
    cursor: pointer;
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    transition: opacity 0.2s;
}
.copy-icon:hover {
    opacity: 0.7;
}
.copy-icon svg {
    width: 100%;
    height: 100%;
}
.mobile-share-icons { display: none; }
@media (max-width: 640px) {
    .desktop-share-icons { display: none; }
    .mobile-share-icons { display: inline; }
}
