/* =============================================================================
   Medium Clone — Main stylesheet
   Implements the Medium look using CSS variables, with dark-mode support.
   ============================================================================= */

/* ----- Theme tokens (light) ----- */
:root {
    --color-bg-primary:      #ffffff;
    --color-bg-secondary:    #fafafa;
    --color-bg-tertiary:     #f2f2f2;
    --color-bg-quaternary:   #f9f9f9;
    --color-bg-hover:        #f5f5f5;

    --color-fg-primary:      #242424;
    --color-fg-secondary:    #6b6b6b;
    --color-fg-tertiary:     #8a8a8a;
    --color-fg-inverse:      #ffffff;

    --color-brand-primary:   #191919;
    --color-brand-hover:     #080808;

    --color-accent-primary:  #1a8917;
    --color-accent-hover:    #156d12;
    --color-accent-bg:       #e8f3e8;
    --color-accent-bg-hover: #d2e7d1;

    --color-error:           #c94a4a;
    --color-error-hover:     #b63636;
    --color-warning:         #ffbf00;

    --color-border-primary:  #f2f2f2;
    --color-border-secondary:#e5e5e5;
    --color-border-tertiary: #d2d2d2;

    --color-link:            #1a8917;

    /* Layout */
    --topnav-h: 57px;
    --sidebar-w: 240px;
    --right-rail-w: 368px;
    --max-content-w: 1192px;
    --max-post-w: 728px;

    /* Typography */
    --font-serif: 'Source Serif Pro', 'Charter', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Menlo, monospace;

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* Radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;
}

/* ----- Dark theme overrides ----- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg-primary:      #0a0a0a;
        --color-bg-secondary:    #121212;
        --color-bg-tertiary:     #1a1a1a;
        --color-bg-quaternary:   #242424;
        --color-bg-hover:        #1f1f1f;

        --color-fg-primary:      #f5f5f5;
        --color-fg-secondary:    #a0a0a0;
        --color-fg-tertiary:     #7a7a7a;
        --color-fg-inverse:      #0a0a0a;

        --color-brand-primary:   #ffffff;
        --color-brand-hover:     #f0f0f0;

        --color-accent-bg:       #1a2d1a;
        --color-accent-bg-hover: #234023;

        --color-border-primary:  #242424;
        --color-border-secondary:#333333;
        --color-border-tertiary: #404040;
    }
}

/* When user explicitly picks dark via toggle */
[data-theme="dark"] {
    --color-bg-primary:      #0a0a0a;
    --color-bg-secondary:    #121212;
    --color-bg-tertiary:     #1a1a1a;
    --color-bg-quaternary:   #242424;
    --color-bg-hover:        #1f1f1f;

    --color-fg-primary:      #f5f5f5;
    --color-fg-secondary:    #a0a0a0;
    --color-fg-tertiary:     #7a7a7a;
    --color-fg-inverse:      #0a0a0a;

    --color-brand-primary:   #ffffff;
    --color-brand-hover:     #f0f0f0;

    --color-accent-bg:       #1a2d1a;
    --color-accent-bg-hover: #234023;

    --color-border-primary:  #242424;
    --color-border-secondary:#333333;
    --color-border-tertiary: #404040;
}

/* When user explicitly picks light (override the dark preference) */
[data-theme="light"] {
    --color-bg-primary:      #ffffff;
    --color-bg-secondary:    #fafafa;
    --color-bg-tertiary:     #f2f2f2;
    --color-bg-quaternary:   #f9f9f9;
    --color-bg-hover:        #f5f5f5;

    --color-fg-primary:      #242424;
    --color-fg-secondary:    #6b6b6b;
    --color-fg-tertiary:     #8a8a8a;
    --color-fg-inverse:      #ffffff;

    --color-brand-primary:   #191919;
    --color-brand-hover:     #080808;
}

/* =============================================================================
   1. Reset & base
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--color-bg-primary);
    color: var(--color-fg-primary);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.15s ease, color 0.15s ease;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-fg-primary); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* =============================================================================
   2. Top navigation bar
   ============================================================================= */
.topnav {
    height: var(--topnav-h);
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border-primary);
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
}
.topnav__left { display: flex; align-items: center; gap: 16px; flex: 1; }
.topnav__right { display: flex; align-items: center; gap: 12px; }
.brand {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.04em;
    color: var(--color-fg-primary);
}
.menu-toggle { display: none; }
.search {
    display: flex; align-items: center;
    background: var(--color-bg-tertiary);
    border: 0; border-radius: var(--r-pill);
    padding: 0 12px;
    width: 240px;
    height: 38px;
    color: var(--color-fg-secondary);
}
.search input {
    background: transparent; border: 0; outline: 0;
    width: 100%; padding: 0 0 0 8px;
    color: var(--color-fg-primary); font-size: 14px;
}
.search svg { color: var(--color-fg-secondary); flex-shrink: 0; }
.nav-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 14px; color: var(--color-fg-secondary);
    padding: 8px 12px;
}
.nav-link:hover { color: var(--color-fg-primary); }
.nav-link--write {
    color: var(--color-fg-primary);
}
.icon-btn {
    background: transparent; border: 0; padding: 8px;
    color: var(--color-fg-secondary); display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer;
    border-radius: var(--r-pill);
    transition: background-color 0.1s;
}
.icon-btn:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }

/* =============================================================================
   3. Avatars
   ============================================================================= */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-bg-tertiary);
    color: var(--color-fg-secondary);
    border-radius: 50%;
    overflow: hidden;
    font-weight: 600;
    flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: 24px; height: 24px; font-size: 11px; }
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.avatar--md { width: 48px; height: 48px; font-size: 18px; }
.avatar--xl { width: 80px; height: 80px; font-size: 32px; }

/* =============================================================================
   4. Buttons
   ============================================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--r-pill);
    border: 1px solid var(--color-brand-primary);
    font-weight: 600; font-size: 14px;
    cursor: pointer;
    transition: background-color 0.1s, border-color 0.1s, color 0.1s;
    text-decoration: none;
    background: transparent; color: var(--color-brand-primary);
}
.btn--primary { background: var(--color-brand-primary); color: var(--color-fg-inverse); }
.btn--primary:hover { background: var(--color-brand-hover); color: var(--color-fg-inverse); }
.btn--ghost { border: 0; }
.btn--ghost:hover { background: var(--color-bg-hover); }
.btn--outline { border-color: var(--color-border-secondary); }
.btn--outline:hover { background: var(--color-bg-hover); }
.btn--sm { padding: 6px 14px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--accent { background: var(--color-accent-primary); color: var(--color-fg-inverse); border-color: var(--color-accent-primary); }
.btn--accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* =============================================================================
   5. Sidebar (left navigation rail)
   ============================================================================= */
.sidebar {
    position: fixed;
    top: var(--topnav-h);
    left: 0; bottom: 0;
    width: var(--sidebar-w);
    padding: 24px 16px;
    border-right: 1px solid var(--color-border-primary);
    background: var(--color-bg-primary);
    overflow-y: auto;
}
.side-item {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 12px;
    color: var(--color-fg-secondary);
    font-size: 14px;
    border-radius: var(--r-sm);
    margin-bottom: 2px;
    position: relative;
    transition: color 0.1s;
}
.side-item:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.side-item.is-active { color: var(--color-fg-primary); font-weight: 600; }
.side-item.is-active::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--color-fg-primary); border-radius: 0 2px 2px 0;
}
.side-item span { line-height: 1; }
.side-footer {
    margin-top: 32px;
    padding: 16px 12px;
    font-size: 13px; color: var(--color-fg-secondary);
    line-height: 1.4;
}
.side-footer a { color: var(--color-fg-primary); text-decoration: underline; }
.sidebar hr { border: 0; border-top: 1px solid var(--color-border-primary); margin: 16px 0; }

/* =============================================================================
   6. Main content area
   ============================================================================= */
.main {
    margin-left: var(--sidebar-w);
    padding: 0 32px 64px;
    max-width: var(--max-content-w);
    min-height: calc(100vh - var(--topnav-h));
}
body:not(.has-sidebar) .main {
    margin-left: 0; padding: 0 24px;
    max-width: 768px; margin: 0 auto;
}

/* =============================================================================
   7. Homepage layout
   ============================================================================= */
.home-layout {
    display: grid;
    grid-template-columns: 1fr var(--right-rail-w);
    gap: 64px;
    padding-top: 32px;
}
.feed-tabs {
    display: flex; gap: 24px;
    border-bottom: 1px solid var(--color-border-primary);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.feed-tab {
    font-size: 14px; color: var(--color-fg-secondary);
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
}
.feed-tab.is-active {
    color: var(--color-fg-primary);
    border-bottom-color: var(--color-fg-primary);
    font-weight: 600;
}
.feed-tab:hover { color: var(--color-fg-primary); }

.right-rail { padding-top: 32px; }
.rail-card {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-primary);
    margin-bottom: 16px;
}
.rail-title {
    font-size: 16px; font-weight: 600; margin: 0 0 12px;
}
.rail-link {
    display: inline-block; margin-top: 12px;
    color: var(--color-accent-primary);
    font-size: 13px;
    text-decoration: underline;
}

.staff-pick {
    display: block; padding: 8px 0;
    color: var(--color-fg-primary);
}
.staff-pick__meta { font-size: 13px; color: var(--color-fg-secondary); }
.staff-pick__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 16px;
    margin: 4px 0;
    line-height: 1.25;
}
.staff-pick__date {
    font-size: 13px; color: var(--color-fg-secondary);
    display: flex; align-items: center; gap: 4px;
}
.staff-pick__date svg { fill: var(--color-fg-tertiary); }

.topic-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-pill {
    padding: 8px 12px;
    background: var(--color-bg-tertiary);
    border-radius: var(--r-pill);
    font-size: 13px;
    color: var(--color-fg-secondary);
    display: inline-flex; gap: 4px; align-items: center;
}
.topic-pill:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.topic-pill span { color: var(--color-fg-tertiary); }

/* =============================================================================
   8. Story card
   ============================================================================= */
.story-card {
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 40px;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border-primary);
}
.story-card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.story-card__meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--color-fg-secondary);
}
.meta-text strong { font-weight: 500; }
.meta-dot { color: var(--color-fg-tertiary); }
.meta-date { color: var(--color-fg-secondary); }
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge--premium { background: var(--color-accent-bg); color: var(--color-accent-primary); }
.badge--muted { background: var(--color-bg-tertiary); color: var(--color-fg-secondary); }
.story-card__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    margin: 4px 0;
    color: var(--color-fg-primary);
}
.story-card__subtitle {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--color-fg-secondary);
    line-height: 1.4;
    margin: 0;
}
.story-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
    font-size: 13px; color: var(--color-fg-secondary);
}
.footer-stats { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.stat { display: inline-flex; align-items: center; gap: 4px; }
.stat svg { color: var(--color-fg-tertiary); }
.tag {
    padding: 2px 8px;
    background: var(--color-bg-tertiary);
    border-radius: var(--r-pill);
    font-size: 11px; color: var(--color-fg-secondary);
}
.footer-actions { display: flex; gap: 4px; }
.story-card__thumb {
    width: 100px; height: 100px;
    border-radius: var(--r-md);
    overflow: hidden;
    flex-shrink: 0;
}
.story-card__thumb img {
    width: 100%; height: 100%; object-fit: cover;
}

/* =============================================================================
   9. Single post page
   ============================================================================= */
.post {
    max-width: var(--max-post-w);
    margin: 0 auto;
    padding: 32px 0;
}
.post__header { margin-bottom: 32px; }
.post__author {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.post__author-info { flex: 1; min-width: 0; }
.author-name {
    font-weight: 600; font-size: 15px;
    color: var(--color-fg-primary);
}
.author-meta {
    font-size: 13px; color: var(--color-fg-secondary);
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.post__title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.post__subtitle {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--color-fg-secondary);
    margin: 0 0 24px;
    line-height: 1.3;
}
.post__cover {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--r-md);
    margin-bottom: 24px;
}
.post__content {
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.58;
    color: var(--color-fg-primary);
}
.post__content p { margin: 0 0 1.4em; }
.post__content h2 {
    font-size: 28px; font-weight: 700;
    margin: 1.5em 0 0.5em;
    line-height: 1.2;
}
.post__content h3 {
    font-size: 22px; font-weight: 700;
    margin: 1.4em 0 0.5em;
    line-height: 1.25;
}
.post__content blockquote {
    border-left: 3px solid var(--color-fg-primary);
    padding-left: 24px;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--color-fg-secondary);
}
.post__content pre {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    padding: 16px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-fg-primary);
}
.post__content code {
    font-family: var(--font-mono);
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.post__content pre code { background: transparent; padding: 0; }
.post__content img {
    border-radius: var(--r-md);
    margin: 1.5em auto;
}
.post__content a {
    color: var(--color-fg-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-accent-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.post__content ul, .post__content ol {
    padding-left: 24px; margin: 0 0 1.4em;
}
.post__content--blurred { filter: blur(6px); user-select: none; pointer-events: none; }

.post__tags {
    margin-top: 32px; padding-top: 24px;
    border-top: 1px solid var(--color-border-primary);
    display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-pill {
    padding: 6px 14px;
    background: var(--color-bg-tertiary);
    border-radius: var(--r-pill);
    font-size: 13px; color: var(--color-fg-secondary);
}
.tag-pill:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }

.post__engagement {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 0;
    border-top: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-primary);
    margin: 24px 0 48px;
}
.engagement-left, .engagement-right { display: flex; align-items: center; gap: 16px; }
.clap-btn {
    background: transparent; border: 0;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-fg-secondary);
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    padding: 8px;
}
.clap-btn:hover, .clap-btn.is-clapped { color: var(--color-accent-primary); }
.clap-btn svg { fill: currentColor; }
.engagement-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-fg-secondary); font-size: 14px;
}
.engagement-link:hover { color: var(--color-fg-primary); }

/* =============================================================================
   10. Comments
   ============================================================================= */
.comments { margin-top: 48px; }
.comments-title { font-size: 24px; font-weight: 700; margin: 0 0 24px; }
.comment-form {
    margin: 16px 0 32px;
    padding: 16px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-md);
}
.comment-input-wrap {
    display: flex; gap: 12px; align-items: flex-start;
}
.comment-input-wrap textarea,
.comment-form textarea {
    flex: 1;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-bg-primary);
    color: var(--color-fg-primary);
    padding: 10px;
    border-radius: var(--r-md);
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
}
.comment-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.comment {
    display: flex; gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-primary);
}
.comment__body { flex: 1; min-width: 0; }
.comment__head {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--color-fg-secondary);
    margin-bottom: 4px;
}
.comment__author { font-weight: 600; color: var(--color-fg-primary); }
.comment__text {
    color: var(--color-fg-primary);
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
}
.comment__actions {
    display: flex; gap: 16px;
    margin-top: 8px;
}
.icon-link {
    background: transparent; border: 0;
    color: var(--color-fg-secondary); font-size: 13px;
    cursor: pointer; padding: 4px 0;
}
.icon-link:hover { color: var(--color-fg-primary); }
.comment__replies {
    margin-top: 12px; padding-left: 12px;
    border-left: 2px solid var(--color-border-primary);
}
.comment--reply { padding: 8px 0; border: 0; }
.reply-form {
    margin-top: 8px;
    background: var(--color-bg-primary);
    padding: 8px;
}

/* =============================================================================
   11. Related posts
   ============================================================================= */
.related {
    max-width: var(--max-post-w);
    margin: 32px auto 64px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border-primary);
}
.related__title { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.related__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-item {
    display: block;
    padding: 16px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-md);
}
.related-item__meta { font-size: 12px; color: var(--color-fg-secondary); margin-bottom: 4px; }
.related-item__title {
    font-family: var(--font-serif);
    font-weight: 700; font-size: 16px;
    margin-bottom: 6px; line-height: 1.2;
}
.related-item__stat { font-size: 12px; color: var(--color-fg-tertiary); }

/* =============================================================================
   12. Paywall
   ============================================================================= */
.paywall {
    background: var(--color-accent-bg);
    padding: 32px;
    border-radius: var(--r-md);
    text-align: center;
    margin: 24px 0;
}
.paywall h2 {
    font-family: var(--font-serif);
    font-size: 24px; margin: 0 0 8px;
    color: var(--color-accent-primary);
}
.paywall p { color: var(--color-fg-secondary); margin: 0 0 16px; }
.paywall__actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* =============================================================================
   13. Auth pages
   ============================================================================= */
.auth-page {
    min-height: calc(100vh - var(--topnav-h));
    display: flex; align-items: center; justify-content: center;
    padding: 32px 24px;
}
.auth-card {
    width: 100%; max-width: 400px;
    background: var(--color-bg-primary);
    padding: 32px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--r-md);
}
.auth-title {
    font-family: var(--font-serif);
    font-size: 28px; font-weight: 700;
    margin: 0 0 4px;
}
.auth-subtitle { color: var(--color-fg-secondary); margin: 0 0 24px; font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form label {
    font-size: 13px; font-weight: 600; color: var(--color-fg-secondary);
    margin-top: 12px;
}
.auth-form input {
    padding: 10px 12px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    background: var(--color-bg-primary); color: var(--color-fg-primary);
    font-size: 14px;
    margin-bottom: 4px;
}
.auth-form input:focus { outline: 2px solid var(--color-accent-primary); outline-offset: -1px; border-color: var(--color-accent-primary); }
.auth-foot { text-align: center; margin-top: 16px; font-size: 13px; color: var(--color-fg-secondary); }
.auth-foot a { color: var(--color-fg-primary); text-decoration: underline; }
.checkbox {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--color-fg-secondary);
    margin-top: 12px;
}
.checkbox input { width: auto; }

/* =============================================================================
   14. Profile page
   ============================================================================= */
.profile { padding: 32px 0; }
.profile__header {
    display: flex; gap: 32px; align-items: flex-start;
    margin-bottom: 24px;
}
.profile__info { flex: 1; }
.profile__name {
    font-family: var(--font-serif);
    font-size: 36px; font-weight: 700;
    margin: 0;
}
.profile__username { color: var(--color-fg-secondary); font-size: 14px; }
.profile__bio {
    color: var(--color-fg-primary);
    margin: 12px 0;
    line-height: 1.5;
    font-family: var(--font-serif);
    font-size: 16px;
}
.profile__meta {
    display: flex; gap: 16px;
    color: var(--color-fg-secondary);
    font-size: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.profile__meta strong { color: var(--color-fg-primary); }
.profile__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.edit-profile {
    background: var(--color-bg-quaternary);
    padding: 24px;
    border-radius: var(--r-md);
    margin: 24px 0;
}
.edit-profile h2 { margin: 0 0 16px; font-size: 18px; }
.form-row { margin-bottom: 12px; }
.form-row label {
    display: block;
    font-size: 13px; font-weight: 600; color: var(--color-fg-secondary);
    margin-bottom: 4px;
}
.form-row input, .form-row textarea, .form-row select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    background: var(--color-bg-primary);
    color: var(--color-fg-primary);
    font-size: 14px;
}
.divider { border: 0; border-top: 1px solid var(--color-border-primary); margin: 24px 0; }

.follow-btn.is-following {
    background: transparent;
    color: var(--color-fg-secondary);
    border-color: var(--color-border-secondary);
}

/* =============================================================================
   15. Stats page
   ============================================================================= */
.stats-page { padding: 32px 0; }
.page-title {
    font-family: var(--font-serif);
    font-size: 42px; font-weight: 700;
    margin: 0 0 16px;
}
.page-sub { color: var(--color-fg-secondary); font-size: 16px; margin-top: -8px; margin-bottom: 24px; }
.stats-tabs {
    display: flex; gap: 32px;
    border-bottom: 1px solid var(--color-border-primary);
    padding-bottom: 12px;
    margin-bottom: 24px;
}
.stats-tab {
    font-size: 14px; color: var(--color-fg-secondary);
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
}
.stats-tab.is-active {
    color: var(--color-fg-primary); font-weight: 600;
    border-bottom-color: var(--color-fg-primary);
}
.stats-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.stats-period { font-size: 24px; font-weight: 700; margin: 0; font-family: var(--font-serif); }
.stats-range { font-size: 13px; color: var(--color-fg-secondary); margin-top: 4px; }
.stats-period-form select {
    padding: 6px 12px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    background: var(--color-bg-primary); color: var(--color-fg-primary);
    font-size: 14px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.stat-box {
    padding: 16px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-md);
}
.stat-box__num {
    font-size: 32px; font-weight: 700;
    font-family: var(--font-serif);
    color: var(--color-fg-primary);
}
.stat-box__label {
    font-size: 13px; color: var(--color-fg-secondary);
    margin-top: 4px;
}
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.stats-table th, .stats-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
    font-size: 14px;
}
.stats-table th { color: var(--color-fg-secondary); font-weight: 600; }
.stats-table td a { color: var(--color-fg-primary); text-decoration: underline; }
.stats-earnings {
    margin-top: 32px;
    padding: 24px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-md);
}
.earnings-card {
    font-size: 32px; font-weight: 700;
    color: var(--color-accent-primary);
    font-family: var(--font-serif);
    margin: 8px 0;
}

.section-title {
    font-size: 18px; font-weight: 700;
    margin: 24px 0 12px;
    font-family: var(--font-serif);
}
.empty-state {
    text-align: center; padding: 64px 24px;
    color: var(--color-fg-secondary);
}
.empty-state h2 { font-family: var(--font-serif); font-size: 24px; margin: 0 0 8px; }
.empty-state a, .empty-state p a { color: var(--color-accent-primary); }

/* =============================================================================
   16. Stories page
   ============================================================================= */
.stories-page { padding: 32px 0; }
.stories-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.stories-tabs {
    display: flex; gap: 24px;
    border-bottom: 1px solid var(--color-border-primary);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.story-tab {
    font-size: 14px; color: var(--color-fg-secondary);
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
}
.story-tab.is-active {
    color: var(--color-fg-primary); font-weight: 600;
    border-bottom-color: var(--color-fg-primary);
}
.stories-table {
    width: 100%; border-collapse: collapse;
}
.stories-table th, .stories-table td {
    padding: 12px; text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
    font-size: 14px; vertical-align: middle;
}
.stories-table th { color: var(--color-fg-secondary); font-weight: 600; }
.story-title-cell {
    font-weight: 500;
    color: var(--color-fg-primary);
    display: inline-flex; gap: 6px; align-items: center;
}
.actions-cell {
    white-space: nowrap;
    display: flex; gap: 6px;
}

/* =============================================================================
   17. Lists page
   ============================================================================= */
.lists-page { padding: 32px 0; }
.lists-head { margin-bottom: 16px; }
.list-create-form {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 16px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-md);
    margin-bottom: 24px;
    align-items: center;
}
.list-create-form input[type="text"] {
    flex: 1; min-width: 200px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    background: var(--color-bg-primary); color: var(--color-fg-primary);
    font-size: 14px;
}
.list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.list-card {
    display: block;
    padding: 16px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-md);
    border: 1px solid var(--color-border-primary);
    transition: border-color 0.1s;
}
.list-card:hover { border-color: var(--color-fg-secondary); }
.list-card h3 {
    font-family: var(--font-serif);
    font-size: 18px; margin: 0 0 4px;
    font-weight: 700;
}
.list-view { padding: 32px 0; }
.back-link {
    display: inline-block;
    color: var(--color-fg-secondary);
    font-size: 14px;
    margin-bottom: 16px;
}
.back-link:hover { color: var(--color-fg-primary); }

/* =============================================================================
   18. Following page
   ============================================================================= */
.following-page { padding: 32px 0; }
.follow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.follow-card {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-md);
    border: 1px solid var(--color-border-primary);
}
.follow-card__name { font-weight: 600; }
.follow-card__user { color: var(--color-fg-secondary); font-size: 13px; }

/* =============================================================================
   19. Subscription page
   ============================================================================= */
.sub-page { padding: 32px 0; }
.plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 32px 0;
}
.plan-card {
    padding: 32px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border-primary);
    position: relative;
}
.plan-card--featured {
    border-color: var(--color-accent-primary);
}
.plan-badge {
    position: absolute; top: -12px; right: 16px;
    background: var(--color-accent-primary);
    color: var(--color-fg-inverse);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    font-size: 12px; font-weight: 600;
}
.plan-card h3 { font-size: 20px; margin: 0 0 8px; font-family: var(--font-serif); }
.plan-price {
    font-size: 36px; font-weight: 700;
    margin-bottom: 16px;
    font-family: var(--font-serif);
}
.plan-price span { font-size: 16px; color: var(--color-fg-secondary); font-weight: 400; }
.plan-features {
    list-style: none; padding: 0;
    margin: 0 0 24px;
}
.plan-features li {
    padding: 6px 0;
    color: var(--color-fg-secondary);
    font-size: 14px;
}

/* =============================================================================
   20. Withdrawal page
   ============================================================================= */
.wd-page { padding: 32px 0; max-width: 720px; }
.balance-card {
    display: flex; justify-content: space-between; align-items: center;
    padding: 24px;
    background: var(--color-accent-bg);
    border-radius: var(--r-md);
    margin: 16px 0 32px;
}
.balance-card strong {
    font-size: 28px;
    color: var(--color-accent-primary);
    font-family: var(--font-serif);
}
.wd-form {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 32px;
}
.wd-form label {
    font-size: 13px; font-weight: 600; color: var(--color-fg-secondary);
    margin-top: 12px;
}
.wd-form input, .wd-form select {
    padding: 10px 12px;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--r-md);
    background: var(--color-bg-primary); color: var(--color-fg-primary);
    font-size: 14px;
}

/* =============================================================================
   21. Search page
   ============================================================================= */
.search-page { padding: 32px 0; }
.search-section { margin-bottom: 32px; }
.author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.author-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: var(--color-bg-quaternary);
    border-radius: var(--r-md);
}
.author-card__name { font-weight: 600; }
.author-card__username { color: var(--color-fg-secondary); font-size: 13px; }
.author-card__bio { color: var(--color-fg-secondary); font-size: 12px; margin-top: 4px; line-height: 1.4; }

/* =============================================================================
   22. Library page
   ============================================================================= */
.library { padding: 32px 0; }
.lib-section { margin-bottom: 48px; }

/* =============================================================================
   23. Footer
   ============================================================================= */
.footer {
    border-top: 1px solid var(--color-border-primary);
    padding: 24px 32px;
    margin-left: var(--sidebar-w);
    background: var(--color-bg-primary);
}
.footer__inner {
    max-width: var(--max-content-w);
    margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: var(--color-fg-secondary);
}
.footer__inner nav { display: flex; gap: 16px; }
.footer__inner nav a:hover { color: var(--color-fg-primary); }
.theme-toggle {
    background: transparent; border: 1px solid var(--color-border-secondary);
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-fg-secondary);
    cursor: pointer;
}
.theme-toggle:hover { color: var(--color-fg-primary); border-color: var(--color-fg-primary); }
[data-theme="dark"] .icon-sun, [data-theme="light"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon-sun { display: none; }
    :root:not([data-theme="light"]) .icon-moon { display: block; }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .icon-sun { display: block; }
    :root:not([data-theme="dark"]) .icon-moon { display: none; }
}

/* =============================================================================
   24. Alerts
   ============================================================================= */
.alert {
    padding: 12px 16px;
    border-radius: var(--r-md);
    margin-bottom: 16px;
    font-size: 14px;
}
.alert--success {
    background: var(--color-accent-bg);
    color: var(--color-accent-primary);
    border: 1px solid var(--color-accent-bg-hover);
}
.alert--error {
    background: rgba(201, 74, 74, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(201, 74, 74, 0.3);
}

/* =============================================================================
   25. Helpers
   ============================================================================= */
.muted { color: var(--color-fg-secondary); }
.small { font-size: 12px; }
hr { border: 0; border-top: 1px solid var(--color-border-primary); }

.ad-slot { margin: 16px 0; }
.ad-inline { padding: 8px 0; }

/* =============================================================================
   26. Responsive
   ============================================================================= */
@media (max-width: 1024px) {
    .home-layout { grid-template-columns: 1fr; gap: 32px; }
    .right-rail { padding-top: 0; }
    .related__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    :root { --sidebar-w: 0; }
    .sidebar {
        position: fixed; z-index: 90;
        left: -240px; transition: left 0.2s;
        width: 240px;
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
    }
    body.sidebar-open .sidebar { left: 0; }
    .main, .footer { margin-left: 0; }
    .menu-toggle { display: inline-flex; }
    .search { width: 100%; max-width: 240px; }
    .nav-link--write span { display: none; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .plans { grid-template-columns: 1fr; }
    .related__list { grid-template-columns: 1fr; }
    .story-card { grid-template-columns: 1fr; }
    .story-card__thumb { width: 100%; height: 180px; }
    .profile__header { flex-direction: column; gap: 16px; }
    .post__title { font-size: 28px; }
    .post__content { font-size: 18px; }
}