:root {
    --bg: #faf7f2;
    --text: #2b2b2b;
    --muted: #767676;
    --accent: #b5651d;
    --card-bg: #ffffff;
    --border: #e5ddd0;
}
[data-theme="dark"] {
    --bg: #1a1a1a;
    --text: #e8e3d8;
    --muted: #9a9a9a;
    --accent: #d9a066;
    --card-bg: #242424;
    --border: #3a3a3a;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Georgia, 'Times New Roman', serif;
    transition: background 0.2s ease, color 2s ease; 
}
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 2px solid var(--border);
}
.topbar h1 { font-size: 3rem; margin: 0; }
.theme-toggle {
    background: none; 
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.3rem 0.3rem;
    cursor: pointer; 
    font-size: 0.8rem;
    color: var(--text);
}
.container { max-width: 2000px;margin: 5rem auto; padding: 0rem 10rem 0rem 10rem;  }
.url-form { display: flex; gap: 0.5rem; margin-bottom: 2rem; } 
.url-form input {
    flex: 1;
    padding: 0.7rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--card-bg);
    color: var(--text);
}
.url-form button {
    padding: 0.7rem 1.2rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
}
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: 3rem 0rem 0rem 0rem;
    gap: 1.5rem;
    align-items: stretch;
}
.article-grid h1 { grid-column: 1 / -1; text-align: center; color: var(--muted); text-align: center; margin-top: 15rem ;font-size: 1.5rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
.article-card {
    background: var(--card-bg);
    border: 3px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.article-card img { width: 100%; height: 140px; object-fit: cover; }
.no-image {
    width: 100%;
    height: 140px;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 1rem;
} 
.card-body { padding: 1rem;display:flex;flex-direction:column;flex: 1;align-items: flex-start; }
.card-body h2 { font-size: 1.5rem; margin: 0 0 auto 0; line-height: 1; } 
.meta { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--muted); font-size: 0.7rem;margin-top: 2rem ;margin-bottom: -0.5rem; }
.reader-meta {margin:5rem 5rem 3rem 0; ;font-family:Arial, Helvetica, sans-serif}
.reader-time { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--muted); font-size: 0.7rem;text-align: right }
.reader { max-width: 1000px; margin: 0 auto; padding: 2rem; }
.reader h1 { font-size: 5rem; line-height: 1; margin-bottom: 0.5rem; }
.reader-image { width: 100%; border-radius: 8px; margin: 1.5rem 0; }
.reader-text p { font-size: 1.5rem; line-height: 1.5; margin-bottom: 1.3rem;font-family:Georgia, 'Times New Roman', Times, serif }
.back-link { color: var(--text);font-size: 3rem ;text-decoration: none; }