/* FeedBro page styles — every <style> block the views used to carry inline,
   in source order (layout first, page blocks, then the reading panel, which the
   layout includes last). Loaded AFTER style.css so each page's rules keep
   winning over the base stylesheet exactly as the inline blocks did.
   Extracted 2026-09-10; see git history of the named views for provenance. */

/* ══ was inline in resources/views/layout/master.blade.php ══ */
        /* Slim top progress bar for every background AJAX request app-wide
           (see the ajaxStart/ajaxStop hook near the closing body tag) —
           only becomes visible if a request runs long enough to be worth
           signalling, so quick actions don't flicker it on and off. */
        #globalAjaxBar {
            position: fixed; top: 0; left: 0; height: 3px; width: 0%;
            background: linear-gradient(90deg, #4532FF, #7c6bff);
            z-index: 10100; opacity: 0; pointer-events: none;
            transition: width 0.4s ease, opacity 0.2s ease;
        }
        #globalAjaxBar.active { opacity: 1; width: 80%; }
        #globalAjaxBar.done { width: 100%; opacity: 0; transition: width 0.2s ease, opacity 0.4s ease 0.2s; }
    

/* ══ was inline in resources/views/layout/header.blade.php ══ */
    .fb_app_search { position: relative; align-items: center; flex: 1; max-width: 420px; margin: 0 24px; }
    .fb_app_search i { position: absolute; left: 14px; color: #8a8f98; }
    .fb_app_search input { width: 100%; border: 1px solid #e9ecef; border-radius: 999px; padding: 9px 16px 9px 38px; font-size: .9rem; background: #f7f8fb; }
    .fb_app_search input:focus { outline: none; border-color: #3d5afe; background: #fff; }
    .fb_user_avatar { width: 38px; height: 38px; border-radius: 50%; background: #3d5afe; color: #fff; border: none; font-weight: 700; }
    html { scroll-behavior: smooth; }

/* ── Utilities ─────────────────────────────────────────────────────────
   One class per former inline style="" attribute (111 of them across 44
   views, 2026-09-10). Named by intent where the value was one, by value
   where it was just a number. No !important: several are toggled by
   JavaScript, which must still be able to override them. ─────────────── */
.u-fs-12{font-size:12px}.u-fs-14{font-size:14px}.u-fs-50{font-size:.5rem}.u-fs-75{font-size:.75rem}.u-fs-80{font-size:.8rem}.u-fs-110{font-size:1.1rem}.u-fs-120{font-size:1.2rem}.u-fs-200{font-size:2rem}
.u-fw-700{font-weight:700}.u-lh-1{line-height:1}.u-lead{font-size:1.05rem;line-height:1.8}.u-tracking-wide{letter-spacing:.15em}
.u-link-quiet{font-size:13px;font-weight:500;color:#4c42e9;text-decoration:none}.u-link-brand{color:#4532FF;text-decoration:none}
.u-text-blue{color:blue}.u-text-black{color:black}.u-text-muted{color:#8a8f98}.u-text-amber{color:#b8720a}.u-text-brown{color:#5b4632}.u-underline{text-decoration:underline}
.u-hidden{display:none}.u-inline-block{display:inline-block}.u-block{display:block}.u-inert{pointer-events:none}.u-opacity-60{opacity:.6}.u-opacity-30{opacity:.3}
.u-input-eye{position:absolute;top:50%;right:15px;transform:translateY(-50%);cursor:pointer}
.u-favicon-18{width:18px;height:18px;border-radius:4px}.u-favicon-24{width:24px;height:24px;border-radius:4px}.u-icon-24{width:24px;height:24px}.u-object-cover{object-fit:cover}
.u-w-36{width:36px}.u-w-70{width:70px}.u-w-130{width:130px}.u-w-auto{width:auto}.u-h-8{height:8px}.u-h-32{height:32px}.u-maxh-36{max-height:36px}.u-maxh-40{max-height:40px}
.u-minw-0{min-width:0}.u-minw-160{min-width:160px}.u-minw-220{min-width:220px}.u-minh-200{min-height:200px}.u-minh-300{min-height:300px}
.u-maxw-none{max-width:none}.u-maxw-70ch{max-width:70ch}.u-maxw-150{max-width:150px}.u-maxw-180{max-width:180px}.u-maxw-220{max-width:220px}.u-maxw-280{max-width:280px}.u-maxw-320{max-width:320px}.u-maxw-420{max-width:420px}.u-maxw-480{max-width:480px}.u-maxw-520{max-width:520px}.u-maxw-560{max-width:560px}.u-maxw-720{max-width:720px}.u-maxw-760{max-width:760px}.u-maxw-820{max-width:820px}.u-maxw-920{max-width:920px}.u-maxw-980{max-width:980px}
.u-mx-auto{margin-left:auto;margin-right:auto}.u-mt-2{margin-top:.5rem}.u-mt-20{margin-top:20px}.u-mt-n15{margin-top:-15px}.u-ml-0{margin-left:0}.u-lead-pull{margin:-1rem auto 2.5rem}
.u-border-top{border-top:1px solid #f0f1f4}.u-border-top-light{border-top:1px solid #eef0f5}
.u-note-warm{background:#fff8ef;border:1px solid #f3e4cc}.u-chip-grey{background:#f4f5f8;color:#495057}.u-mark{background:#FFF3B0;padding:0 .1em}
.interest-pick-badge{align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#eef1ff;color:#3d5afe;font-weight:700;font-size:.8rem}
/* ══ was inline in resources/views/auth/login.blade.php ══ */
        .social-btn[disabled] {
            opacity: .5;
            cursor: not-allowed;
        }
        /* Hide Microsoft Edge's built-in password reveal eye icon */
        input[type="password"]::-ms-reveal,
        input[type="password"]::-ms-clear {
            display: none !important;
        }
        
        /* Hide Chrome / Safari's credentials reveal icon */
        input::-webkit-credentials-auto-fill-button {
            visibility: hidden;
            position: absolute;
            right: 0;
        }

        /* Additional custom adjustment for login password toggle compatibility */
        .password-toggle.togglePassword {
            background: transparent;
            border: 0;
            padding: 0;
        }
    

/* ══ was inline in resources/views/auth/profile.blade.php ══ */
.profile-shell { background:#f5f7fb; min-height:calc(100vh - 80px); padding:2.5rem 0; }
.profile-card { background:#fff; border-radius:12px; padding:1.6rem; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:1.2rem; }
.profile-card h6 { font-weight:700; margin-bottom:1.2rem; color:#111827; }
.profile-card h6 .bi { color:#635BFF; margin-right:.4rem; }

.profile-avatar-wrap { position:relative; width:120px; height:120px; margin:0 auto 1rem; }
.profile-avatar-wrap img { width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid #F7F5FF; }
.profile-avatar-edit { position:absolute; bottom:2px; right:2px; width:34px; height:34px; border-radius:50%; background:linear-gradient(90deg,#4532FF,#7159FF); display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid #fff; }
.profile-avatar-edit i { color:#fff; font-size:14px; }
.profile-avatar-edit input { position:absolute; inset:0; opacity:0; cursor:pointer; }

.profile-summary-name { font-weight:700; font-size:1.1rem; margin-bottom:.15rem; }
.profile-summary-email { color:#6c757d; font-size:.88rem; word-break:break-all; }

.verified-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; margin-top:.5rem; }
.verified-badge.yes { background:#f0fdf4; color:#15803d; border:1px solid #dcfce7; }
.verified-badge.no { background:#fff8ef; color:#b8720a; border:1px solid #f3e4cc; }

.profile-meta-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid #f0f1f4; font-size:.88rem; }
.profile-meta-row:last-child { border-bottom:none; }
.profile-meta-row .label { color:#6c757d; }

.profile-form-label { font-weight:600; font-size:.85rem; color:#374151; margin-bottom:.35rem; display:block; }
.profile-section + .profile-section { margin-top:1.8rem; padding-top:1.8rem; border-top:1px solid #f0f1f4; }

.btn-brand { background:linear-gradient(90deg,#4532FF,#7159FF); color:#fff; border:none; font-weight:600; }
.btn-brand:hover { color:#fff; opacity:.92; }

/* ══ was inline in resources/views/auth/register.blade.php ══ */
        .social-btn[disabled] {
            opacity: .5;
            cursor: not-allowed;
        }
        /* Hide Microsoft Edge's built-in password reveal eye icon */
        input[type="password"]::-ms-reveal,
        input[type="password"]::-ms-clear {
            display: none !important;
        }
        
        /* Hide Chrome / Safari's autofill / credentials reveal icon if any interference occurs */
        input::-webkit-credentials-auto-fill-button {
            visibility: hidden;
            position: absolute;
            right: 0;
        }
    

/* ══ was inline in resources/views/auth/reset-password.blade.php ══ */
        /* Hide Microsoft Edge's built-in password reveal eye icon */
        input[type="password"]::-ms-reveal,
        input[type="password"]::-ms-clear {
            display: none !important;
        }

        /* Hide Chrome / Safari's credentials reveal icon */
        input::-webkit-credentials-auto-fill-button {
            visibility: hidden;
            position: absolute;
            right: 0;
        }

        .password-toggle.togglePassword {
            background: transparent;
            border: 0;
            padding: 0;
        }
    

/* ══ was inline in resources/views/blog/category.blade.php ══ */
    .fb-blog-card {
        background: #fff; border: 1px solid #eef0f5; border-radius: 14px; overflow: hidden;
        height: 100%; display: flex; flex-direction: column; transition: box-shadow .15s ease, transform .15s ease;
    }
    .fb-blog-card:hover { box-shadow: 0 12px 30px rgba(20,20,50,.08); transform: translateY(-2px); }
    .fb-blog-card-image { aspect-ratio: 16/9; background: #eef1ff; overflow: hidden; }
    .fb-blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .fb-blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
    .fb-blog-card-meta { font-size: .82rem; color: #8a8f98; margin-bottom: .5rem; }
    .fb-blog-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
    .fb-blog-card h3 a { color: #171923; text-decoration: none; }
    .fb-blog-card h3 a:hover { color: #4532FF; }
    .fb-blog-card p { color: #6c757d; font-size: .92rem; flex: 1; }

/* ══ was inline in resources/views/blog/index.blade.php ══ */
    .fb-blog-card {
        background: #fff;
        border: 1px solid #eef0f5;
        border-radius: 14px;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: box-shadow .15s ease, transform .15s ease;
    }
    .fb-blog-card:hover { box-shadow: 0 12px 30px rgba(20,20,50,.08); transform: translateY(-2px); }
    .fb-blog-card-image { aspect-ratio: 16/9; background: #eef1ff; overflow: hidden; }
    .fb-blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .fb-blog-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
    .fb-blog-card-meta { font-size: .82rem; color: #8a8f98; margin-bottom: .5rem; }
    .fb-blog-card-category {
        display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
        color: #4532FF; background: #eef1ff; border-radius: 999px; padding: .2rem .7rem; margin-bottom: .6rem;
        text-decoration: none;
    }
    .fb-blog-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
    .fb-blog-card h3 a { color: #171923; text-decoration: none; }
    .fb-blog-card h3 a:hover { color: #4532FF; }
    .fb-blog-card p { color: #6c757d; font-size: .92rem; flex: 1; }

/* ══ was inline in resources/views/blog/show.blade.php ══ */
    .fb-article { max-width: 760px; margin: 0 auto; }
    .fb-article-breadcrumb { font-size: .85rem; color: #8a8f98; margin-bottom: 1.25rem; }
    .fb-article-breadcrumb a { color: #8a8f98; }
    .fb-article-category {
        display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
        color: #4532FF; background: #eef1ff; border-radius: 999px; padding: .25rem .8rem; margin-bottom: 1rem;
        text-decoration: none;
    }
    .fb-article h1 { font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: .75rem; }
    .fb-article-meta { color: #8a8f98; font-size: .92rem; margin-bottom: 1.75rem; }
    .fb-article-image { width: 100%; border-radius: 14px; margin-bottom: 2rem; }
    .fb-article-body { font-size: 1.05rem; line-height: 1.8; color: #262a35; }
    .fb-article-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1rem; }
    .fb-article-body h3 { font-size: 1.25rem; font-weight: 700; margin: 1.75rem 0 .75rem; }
    .fb-article-body p { margin-bottom: 1.25rem; }
    .fb-article-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.5rem 0; }
    .fb-article-body blockquote { border-left: 3px solid #4532FF; padding-left: 1.25rem; color: #495057; font-style: italic; margin: 1.5rem 0; }
    .fb-article-body pre { background: #f6f7fb; padding: 1rem; border-radius: 8px; overflow-x: auto; }
    .fb-article-body a { color: #4532FF; }
    .fb-article-tags { margin-top: 2rem; }
    .fb-article-tags a {
        display: inline-block; font-size: .8rem; color: #495057; background: #f4f5f8;
        border-radius: 999px; padding: .3rem .9rem; margin: 0 .4rem .4rem 0; text-decoration: none;
    }
    .fb-related-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
    .fb-related-card h4 a { color: #171923; text-decoration: none; }
    .fb-related-card h4 a:hover { color: #4532FF; }

/* ══ was inline in resources/views/user/Recommended-Feeds.blade.php ══ */
/* Search is always-visible and primary now, not a fallback — the
   "Can't find..." row below the recommendations is a pointer back up
   to it, not a second search implementation. */
.onboarding-search-top {
    position: relative;
    margin-bottom: 1.5rem;
}
.onboarding-search-top i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #8a8f98; font-size: 14px; pointer-events: none;
}
.onboarding-search-top input {
    width: 100%; border: 1px solid #edf1f6; border-radius: 8px;
    padding: 11px 14px 11px 38px; font-size: 14px;
}
.onboarding-search-top input:focus { outline: none; border-color: #5B5DF0; }

.recommended-section-heading {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .75rem;
}
.recommended-section-heading > span:first-child { font-weight: 600; font-size: .95rem; color: #30333d; }
.recommended-badge {
    font-size: .75rem; color: #5B5DF0; background: #eef1ff;
    border-radius: 999px; padding: .2rem .6rem; font-weight: 600;
}

.onboarding-cant-find {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; border-top: 1px solid #f0f1f4; text-align: left;
    padding: 1rem 0 .25rem; cursor: pointer;
}
.onboarding-cant-find strong { display: block; font-size: .9rem; color: #30333d; }
.onboarding-cant-find small { display: block; font-size: .8rem; color: #8a8f98; margin-top: .15rem; }
.onboarding-cant-find i { color: #8a8f98; font-size: .9rem; flex-shrink: 0; margin-left: .75rem; }

.onboarding-fallback { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid #f0f1f4; }
.onboarding-fallback-label { font-size: .9rem; font-weight: 600; color: #30333d; margin-bottom: .2rem; }
.onboarding-fallback-hint { font-size: .8rem; color: #8a8f98; margin-bottom: .6rem; }
.onboarding-fallback input[type=url] {
    width: 100%; border: 1px solid #edf1f6; border-radius: 6px; padding: 9px 12px; font-size: 14px;
}
.onboarding-fallback input[type=url]:focus { outline: none; border-color: #5B5DF0; }
.onboarding-rss-row { display: flex; gap: .5rem; }
.onboarding-rss-row input { flex: 1; min-width: 0; }

.onboarding-opml-steps {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: .5rem; margin-bottom: 1rem;
}
.opml-step { flex: 1; text-align: center; }
.opml-step-num {
    display: block; width: 22px; height: 22px; line-height: 22px; margin: 0 auto .5rem;
    background: #5B5DF0; color: #fff; border-radius: 50%; font-size: .7rem; font-weight: 700;
}
.opml-step i { display: block; font-size: 1.1rem; color: #5B5DF0; margin-bottom: .4rem; }
.opml-step span:last-child { font-size: .75rem; color: #6c757d; line-height: 1.3; }
.opml-arrow { color: #c7cbd4; font-size: .9rem; margin-top: 22px; flex-shrink: 0; }
.onboarding-opml-btn {
    display: block; width: 100%; background: none; border: 1px solid #edf1f6; border-radius: 6px;
    padding: 9px 14px; font-size: 14px; color: #495057; cursor: pointer;
}
.onboarding-opml-btn:hover { border-color: #5B5DF0; color: #5B5DF0; }

.onboarding-tip {
    display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.5rem;
    background: #f6f5ff; border-radius: 8px; padding: .85rem 1rem; font-size: .82rem; color: #5B5DF0;
}
.onboarding-tip i { margin-top: .1rem; flex-shrink: 0; }
.onboarding-tip strong { color: #4532FF; }

.onboarding-lock-note {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    margin-top: 1rem; font-size: .8rem; color: #8a8f98; text-align: center;
}

.onboarding-continue-btn {
    display: none; width: 100%; margin-top: 1rem; background: #5B5DF0; color: #fff;
    border: none; border-radius: 8px; padding: .8rem 1rem; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.onboarding-continue-btn:hover { background: #4532FF; }
.onboarding-continue-btn.is-visible { display: block; }

body.onboarding_recommendedfeeds .onboarding-step-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.5rem; }
.onboarding-step-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: #e3e5ea; }
.onboarding-step-dots .dot.active { background: #5B5DF0; }

/* ══ was inline in resources/views/user/article-show.blade.php ══ */
.reading-shell { background:#f5f7fb; min-height:calc(100vh - 80px); padding:2rem 0; }
.reading-card { background:#fff; border-radius:14px; box-shadow:0 1px 6px rgba(0,0,0,.06); padding:2.5rem; max-width:760px; margin:0 auto; }
.reading-back { color:#6c757d; text-decoration:none; font-size:.9rem; display:block; max-width:760px; margin:0 auto 1rem; }
@media (max-width: 576px) {
    .reading-shell { padding: 1rem 0; }
    .reading-card { padding: 1.3rem; border-radius: 10px; }
    .reading-back { padding: 0 1rem; }
}

/* ══ was inline in resources/views/user/billing-page.blade.php ══ */
.billing-shell { background:#f5f7fb; min-height:calc(100vh - 80px); padding:2.5rem 0; }
.billing-card { background:#fff; border-radius:12px; padding:1.6rem; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:1.2rem; }
.billing-card h6 { font-weight:700; margin-bottom:1rem; }
.plan-badge { display:inline-block; padding:.35rem .8rem; border-radius:999px; font-weight:700; font-size:.85rem; }
.plan-badge.coffee { background:#fff8ef; color:#b8720a; border:1px solid #f3e4cc; }
.plan-badge.free { background:#f5f7fb; color:#6c757d; border:1px solid #e9ecef; }
.status-row { display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid #f0f1f4; font-size:.92rem; }
.status-row:last-child { border-bottom:none; }
.status-row .label { color:#6c757d; }

/* ══ was inline in resources/views/user/collections.blade.php ══ */
.collections-shell { background:#f5f7fb; min-height:calc(100vh - 80px); padding:2rem 0; }
.collection-card { background:#fff; border-radius:12px; padding:1.2rem; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:1rem; }
.feed-toggle-row { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #f0f1f4; }
.feed-toggle-row:last-child { border-bottom:none; }

/* ══ was inline in resources/views/user/contact-us.blade.php ══ */
.contact-form-card textarea.form-control-custom {
    width: 100%;
    min-height: 140px;
    border: 1px solid #d1d4da;
    border-radius: 6px;
    padding: 10px 13px;
    font-family: inherit;
    font-size: 15px;
    color: #30333d;
    resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form-card textarea.form-control-custom::placeholder { color: #a3a7b1; }
.contact-form-card textarea.form-control-custom:focus {
    outline: none;
    border-color: #4c46ed;
    box-shadow: 0 0 0 2px rgba(76, 70, 237, 0.08);
}
.contact-info-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 1.1rem 0;
    border-bottom: 1px solid #f0f1f4;
}
.contact-info-card:last-child { border-bottom: none; }
.contact-info-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: #eef1ff; color: #3d5afe;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}

/* ══ was inline in resources/views/user/dashboard/wrapper.blade.php ══ */
.reader-shell { background:#f5f7fb; min-height:calc(100vh - 80px); }
.reader-col { background:#fff; border-right:1px solid #e9ecef; height:calc(100vh - 80px); overflow-y:auto; }
.nav-link-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; border-radius:8px; color:#333; text-decoration:none; }
.nav-link-item:hover, .nav-link-item.active { background:#eef1ff; color:#3d5afe; }
.nav-link-item .badge { margin-left:auto; }
.sidebar-heading { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#8a8f98; margin:1rem .9rem .3rem; }
.article-row { padding:1rem 1.1rem; border-bottom:1px solid #f0f1f4; cursor:pointer; text-decoration:none; color:inherit; display:flex; gap:1rem; align-items:flex-start; transition:background .12s ease; }
.article-row:hover { background:#f7f8ff; }
.article-row-main { flex:1; min-width:0; }
.article-row-top { display:flex; align-items:center; gap:.4rem; margin-bottom:.35rem; }
.unread-dot { width:7px; height:7px; border-radius:50%; background:#3d5afe; flex-shrink:0; }
.article-row.is-read .unread-dot { display:none; }
.article-feed-icon { width:16px; height:16px; border-radius:3px; object-fit:cover; }
.article-feed-name { font-size:.76rem; font-weight:600; color:#6c757d; text-transform:uppercase; letter-spacing:.02em; }
.article-time { font-size:.76rem; color:#a3a7b1; margin-left:auto; flex-shrink:0; }
.article-row.is-read .article-title { color:#8a8f98; font-weight:500; }
.article-title { font-weight:700; font-size:1rem; line-height:1.35; margin-bottom:.3rem; color:#1a1d29; }
.article-summary { font-size:.85rem; color:#6c757d; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.article-row-thumb { width:88px; height:88px; border-radius:10px; overflow:hidden; flex-shrink:0; background:#f0f1f4; }
.article-row-thumb img { width:100%; height:100%; object-fit:cover; }
.article-list-divider { padding:.6rem 1.1rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#a3a7b1; background:#fafbfc; border-bottom:1px solid #f0f1f4; }
.article-row.rule-highlighted { border-left:3px solid #4532FF; }
.article-rule-tag { font-size:.68rem; font-weight:700; padding:.1rem .5rem; border-radius:999px; background:#F7F5FF; color:#4532FF; flex-shrink:0; }
.quick-remove-btn { flex-shrink:0; width:22px; height:22px; margin-left:.3rem; border:none; border-radius:50%; background:transparent; color:#a3a7b1; display:flex; align-items:center; justify-content:center; font-size:.7rem; transition:background .12s ease, color .12s ease; }
.quick-remove-btn:hover { background:#fdecec; color:#e6483f; }
.article-list-sentinel { display:flex; justify-content:center; padding:1.5rem; }
.empty-state { text-align:center; color:#8a8f98; padding:3rem 1.5rem; }
.stat-card { background:#fff; border-radius:10px; padding:.9rem; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.stat-value { font-size:1.4rem; font-weight:700; }
.stat-label { font-size:.72rem; color:#8a8f98; }
.trending-item { display:flex; align-items:flex-start; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #f0f1f4; font-size:.85rem; }
.trending-rank { font-weight:700; color:#3d5afe; width:1.2rem; flex-shrink:0; }
.trending-title { flex:1; min-width:0; }
.trending-views { font-size:.72rem; color:#a3a7b1; white-space:nowrap; display:flex; align-items:center; gap:.25rem; flex-shrink:0; margin-top:.1rem; }
.feed-status-icon { color:#c3c7d1; flex-shrink:0; width:26px; display:flex; align-items:center; justify-content:center; }
.feed-refresh-btn:hover { color:#3d5afe !important; }
.feed-refresh-btn i.spin { display:inline-block; animation:feed-refresh-spin .7s linear infinite; }
@keyframes feed-refresh-spin { to { transform:rotate(360deg); } }
.collections-empty, .feeds-empty { padding:.9rem; margin:0 .3rem .5rem; border:1px dashed #e2e5ec; border-radius:10px; background:#fafbfc; }
.collections-empty p, .feeds-empty p { font-size:.8rem; color:#6c757d; margin:0 0 .5rem; line-height:1.4; }
.collections-empty i, .feeds-empty i { color:#a3a7b1; }

@media (max-width: 991.98px) {
    .reader-shell { min-height: 0; }
    .reader-col { height: auto; overflow-y: visible; border-right: none; }
    #navSidebar.offcanvas-lg { width: min(300px, 85vw); }
    .article-row-thumb { width: 68px; height: 68px; }
}

/* ══ was inline in resources/views/user/delete-account-confirm.blade.php ══ */
.delete-confirm-card {
    max-width: 480px; margin: 3.5rem auto; background: #fff; border-radius: 12px;
    padding: 2.25rem 2rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); text-align: center;
}
.delete-confirm-icon {
    width: 56px; height: 56px; border-radius: 50%; background: #fdecea; color: #dc3545;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 1.5rem;
}
.delete-confirm-card h1 { font-size: 1.35rem; font-weight: 700; margin-bottom: .6rem; }
.delete-confirm-card p { color: #6c757d; font-size: .92rem; line-height: 1.5; }
.delete-confirm-list { text-align: left; background: #f8f9fb; border-radius: 8px; padding: 1rem 1.25rem; margin: 1.25rem 0; font-size: .85rem; color: #495057; }
.delete-confirm-list li { margin-bottom: .35rem; }
.delete-confirm-btn {
    display: block; width: 100%; background: #dc3545; color: #fff; border: none; border-radius: 8px;
    padding: .8rem 1rem; font-size: .95rem; font-weight: 600; cursor: pointer; margin-top: 1.5rem;
}
.delete-confirm-btn:hover { background: #bb2d3b; }
.delete-confirm-cancel { display: block; text-align: center; margin-top: 1rem; font-size: .85rem; color: #8a8f98; text-decoration: underline; }

/* ══ was inline in resources/views/user/discover.blade.php ══ */
.discover-shell { background:#f5f7fb; min-height:calc(100vh - 80px); padding:2rem 0; }
.discover-tabs .nav-link { color:#6c757d; cursor:pointer; }
.discover-tabs .nav-link.active { color:#3d5afe; font-weight:600; border-bottom:2px solid #3d5afe; }
.source-card { background:#fff; border-radius:12px; padding:1.2rem; box-shadow:0 1px 4px rgba(0,0,0,.06); height:100%; }
.source-logo { width:44px; height:44px; border-radius:10px; background:#eef1ff; display:flex; align-items:center; justify-content:center; font-weight:700; color:#3d5afe; margin-bottom:.7rem; }
.topic-pill { display:inline-block; padding:.35rem .9rem; border-radius:999px; border:1px solid #e9ecef; margin:0 .4rem .4rem 0; text-decoration:none; color:#333; font-size:.85rem; cursor:pointer; }
.topic-pill.active { background:#3d5afe; color:#fff; border-color:#3d5afe; }
.add-own-feed-cta { margin-top:2rem; padding:1.2rem 1.5rem; border:1px dashed #d7dbe3; border-radius:12px; background:#fff; text-align:center; }
.add-own-feed-cta p { color:#4a4f5c; font-size:.9rem; }
.my-feed-row { background:#fff; border-radius:10px; padding:.9rem 1.1rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.8rem; }
.my-feed-row .source-logo { margin-bottom:0; flex-shrink:0; width:38px; height:38px; }
.my-feed-info { flex:1; min-width:0; }
.my-feed-title-row { display:flex; align-items:center; gap:.4rem; }
.my-feed-title { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.my-feed-title-input { font-weight:600; border:1px solid #cdd3e0; border-radius:6px; padding:.15rem .5rem; font-size:.95rem; max-width:320px; }
.my-feed-edit-btn { border:none; background:none; color:#a3a7b1; padding:0; line-height:1; flex-shrink:0; }
.my-feed-edit-btn:hover { color:#3d5afe; }
.my-feed-meta { font-size:.78rem; color:#8a8f98; margin-top:.15rem; }
.custom-feed-badge { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.68rem; font-weight:700; background:#FFF3E0; color:#B8720A; margin-left:.4rem; text-transform:uppercase; letter-spacing:.02em; }

/* ══ was inline in resources/views/user/privacy-policy.blade.php ══ */
    .welcome-hide {

        display: none;

    }



    body.user_privacypolicy .welcome_show {

        margin-right: 0px !important;

    }

/* ══ was inline in resources/views/user/rules.blade.php ══ */
.rules-shell { background:#f5f7fb; min-height:calc(100vh - 80px); padding:2rem 0; }
.rule-card { background:#fff; border-radius:12px; padding:1.2rem 1.4rem; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:1rem; }
.rule-card.disabled { opacity:.55; }
.rule-meta { font-size:.82rem; color:#6c757d; }
.rule-badge { display:inline-block; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-weight:600; background:#F7F5FF; color:#4532FF; margin-right:.35rem; }
.condition-row { display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; }
.condition-row select, .condition-row input { flex:1; }
.action-check { display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem; }
.btn-brand { background:linear-gradient(90deg,#4532FF,#7159FF); color:#fff; border:none; font-weight:600; }
.btn-brand:hover { color:#fff; opacity:.92; }
/* .modal-dialog-scrollable relies on .modal-header/.modal-body/.modal-footer
   being direct flex children of .modal-content — #ruleForm wraps the body
   and footer in a plain block-level <form>, which breaks that height
   chain and let the dialog just grow past the viewport with no internal
   scrollbar. display:contents removes the form from layout entirely
   (its children become the real flex participants) while keeping it
   fully functional for the actual submit. */
#ruleModal form { display: contents; }
.rules-header, .push-status-banner { display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.rule-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.rule-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; row-gap:.3rem; }
.rule-badge { margin-right:0; }
.rule-card-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
@media (max-width: 575.98px) {
    .rules-header, .push-status-banner, .rule-card-header { flex-direction:column; align-items:stretch; }
    .rules-header .btn, .push-status-banner .btn { width:100%; }
    .rule-card-actions { justify-content:flex-end; }
}

/* ══ was inline in resources/views/user/search.blade.php ══ */
.search-shell { background:#f5f7fb; min-height:calc(100vh - 80px); padding:2rem 0; }
.search-tabs .nav-link { color:#6c757d; cursor:pointer; }
.search-tabs .nav-link.active { color:#3d5afe; font-weight:600; border-bottom:2px solid #3d5afe; }
.result-card { background:#fff; border-radius:10px; padding:1rem 1.2rem; margin-bottom:.7rem; box-shadow:0 1px 3px rgba(0,0,0,.05); }

/* ══ was inline in resources/views/user/settings.blade.php ══ */
.settings-shell { background:#f5f7fb; min-height:calc(100vh - 80px); padding:2rem 0; }
.settings-card { background:#fff; border-radius:12px; padding:1.4rem; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:1.2rem; }
.settings-card h6 { font-weight:700; }
.settings-card.disabled { opacity:.55; }
/* Email digest controls: frequency / time / count sit side by side on a
   desktop and stack on a phone, where three selects in a row would each be
   too narrow to read a time in. */
.digest-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; max-width:520px; }
@media (max-width: 575.98px) { .digest-grid { grid-template-columns:1fr; } }
.digest-timezone-note { font-size:.78rem; margin-top:.5rem; }
.digest-include .form-check { margin-bottom:.35rem; }
.digest-include .form-check:last-child { margin-bottom:0; }

.feed-row { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #f0f1f4; }
.feed-row:last-child { border-bottom:none; }
/* Connected devices: the last-used IPv6 address is one unbreakable token, and a
   flex item will not shrink below its content, so on a phone it pushed the
   Disconnect button clean out of the card. Let the text column shrink and wrap
   anywhere; keep the button its natural width. */
.device-row-meta { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; padding-right:.75rem; }
.device-row .extension-revoke-btn { flex:0 0 auto; }
.settings-card.extension-highlight { box-shadow:0 0 0 3px rgba(69,50,255,.35), 0 1px 4px rgba(0,0,0,.06); animation: extension-pulse 1.6s ease-in-out 2; }
@keyframes extension-pulse { 0%, 100% { box-shadow:0 0 0 3px rgba(69,50,255,.35), 0 1px 4px rgba(0,0,0,.06); } 50% { box-shadow:0 0 0 6px rgba(69,50,255,.15), 0 1px 4px rgba(0,0,0,.06); } }

/* ══ was inline in resources/views/user/terms-conditions.blade.php ══ */
    .welcome-hide {

        display: none;

    }



    body.user_termsconditions .welcome_show {

        margin-right: 0px !important;

    }

/* ══ was inline in resources/views/user/welcome-to-Feedbro.blade.php ══ */
        .onboarding-summary { text-align: left; margin: 1.5rem 0; }
        .onboarding-summary-section {
            border: 1px solid #edf1f6; border-radius: 10px; padding: .9rem 1rem; margin-bottom: .75rem;
        }
        .onboarding-summary-heading {
            display: flex; align-items: center; justify-content: space-between;
            font-weight: 600; font-size: .85rem; color: #30333d; margin-bottom: .6rem;
        }
        .onboarding-summary-count {
            font-size: .72rem; font-weight: 700; color: #1a9c66; background: #e7f8ef;
            border-radius: 999px; padding: .1rem .55rem;
        }
        .onboarding-summary-item {
            display: flex; align-items: center; gap: .65rem; padding: .4rem 0;
        }
        .onboarding-summary-item .feed-logo { width: 32px; height: 32px; flex: 0 0 32px; font-size: .8rem; }
        .onboarding-summary-item-info { flex: 1; min-width: 0; text-align: left; }
        .onboarding-summary-item-info strong { display: block; font-size: .85rem; color: #30333d; }
        .onboarding-summary-item-info small { display: block; font-size: .72rem; color: #8a8f98; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .onboarding-summary-check { color: #1a9c66; font-size: 1rem; flex-shrink: 0; }
        .onboarding-add-more-note { font-size: .8rem; color: #8a8f98; text-align: center; margin-top: .75rem; }
        body.onboarding_welcome .onboarding-step-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.25rem; }
        .onboarding-step-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: #e3e5ea; }
        .onboarding-step-dots .dot.active { background: #5B5DF0; }

        .extension-nudge-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(20, 20, 35, 0.55);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .extension-nudge-overlay.show {
            display: flex;
        }
        .extension-nudge-card {
            position: relative;
            background: #fff;
            border-radius: 16px;
            max-width: 420px;
            width: 100%;
            padding: 2.25rem 2rem 2rem;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        }
        .extension-nudge-close {
            position: absolute;
            top: 12px;
            right: 14px;
            background: none;
            border: none;
            font-size: 1.5rem;
            line-height: 1;
            color: #a3a7b1;
            cursor: pointer;
        }
        .extension-nudge-close:hover {
            color: #30333d;
        }
        .extension-nudge-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: #eef1ff;
            color: #4532FF;
            font-size: 1.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.25rem;
        }
        .extension-nudge-card h2 {
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 0.6rem;
        }
        .extension-nudge-card p {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }
        .extension-nudge-install {
            display: block;
            width: 100%;
            background: #4532FF;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            font-weight: 600;
            text-decoration: none;
            margin-bottom: 0.75rem;
        }
        .extension-nudge-install:hover {
            background: #3826d9;
            color: #fff;
        }
        .extension-nudge-skip {
            background: none;
            border: none;
            color: #6c757d;
            font-size: 0.9rem;
            cursor: pointer;
            text-decoration: underline;
        }
        .extension-nudge-skip:hover {
            color: #30333d;
        }
    

/* ══ was inline in resources/views/welcome.blade.php ══ */
.welcome-hide {
    display: none;
}

body.user_home .welcome_show {
    display: block;
}

.cb_top_header_section {
    display: none;
}

.cb_top_header_section {
    opacity: 0;
    height: 0px;
}

/* ══ was inline in resources/views/user/article-panel-content.blade.php ══ */
    .reading-body { overflow-wrap: break-word; }
    /* Long URLs and tokens have no break opportunity of their own. */
    .reading-body a, .reading-body code { overflow-wrap: anywhere; }
    /* Nothing inside an article may be wider than the column. */
    .reading-body > *, .reading-body img, .reading-body svg, .reading-body video,
    .reading-body iframe, .reading-body embed, .reading-body object { max-width: 100%; }
    .reading-body img, .reading-body video { height: auto; }
    .reading-body figure { margin-left: 0; margin-right: 0; }
    /* Wide-by-nature blocks scroll within themselves instead of stretching
       the article: clipped-and-unreadable is worse than a scrollbar. */
    .reading-body pre { white-space: pre-wrap; word-break: break-word; }
    .reading-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
        .reading-video-embed { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden; }
        .reading-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
    

/* ══ was inline in resources/views/partials/reading-panel.blade.php ══ */
    .reading-panel-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 17, 23, .35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: 10050;
    }

    .reading-panel-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .reading-panel {
        /* The site header (.fb_header) sits at z-index:9999, above this panel's
       old z-index:1060 — its close button was rendering fully clickable in
       CSS terms but the header was hit-testing on top of it, so a tap there
       hit the header underneath instead of ever reaching the button. */
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 560px;
        max-width: 92vw;
        background: #fff;
        box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 10060;
        display: flex;
        flex-direction: column;
        overscroll-behavior: contain;
    }

    .reading-panel.open {
        transform: translateX(0);
    }

    .reading-panel-header {
        padding: .9rem 1.1rem;
        border-bottom: 1px solid #f0f1f4;
        display: flex;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    .reading-panel-close {
        border: none;
        background: #f5f7fb;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: #333;
        transition: background .15s ease;
    }

    .reading-panel-close:hover {
        background: #eef1ff;
        color: #3d5afe;
    }

    .reading-panel-drag-handle {
        display: none;
    }

    .reading-panel-body {
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 2rem 2.5rem 4rem;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .reading-panel-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4rem 0;
    }

    .reading-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        margin-bottom: 1.4rem;
    }

    /* A feed's title has no length limit — without this, a long one (e.g.
   "Apartment Therapy| Saving the World, One Room at a Time") forces this
   badge past its share of the row instead of truncating, dragging the
   whole panel into horizontal overflow on narrow screens. min-width:0
   is what lets a flex child actually shrink below its own content size. */
    .reading-top .badge {
        font-size: .74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        padding: .4rem .7rem;
        border-radius: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        max-width: 60%;
    }

    .reading-actions {
        flex-shrink: 0;
    }

    .reading-actions button {
        border: 1px solid #e9ecef;
        background: #fff;
        border-radius: 999px;
        width: 38px;
        height: 38px;
        margin-left: .4rem;
        transition: all .15s ease;
        color: #6c757d;
    }

    .reading-actions button:hover {
        border-color: #3d5afe;
        color: #3d5afe;
        transform: translateY(-1px);
    }

    .reading-actions button.active {
        background: #3d5afe;
        border-color: #3d5afe;
        color: #fff;
    }

    .reading-title {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 1.85rem;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.01em;
        margin-bottom: 1rem;
        color: #14161f;
    }

    .reading-meta {
        color: #8a8f98;
        font-size: .85rem;
        margin-bottom: 1.6rem;
        padding-bottom: 1.4rem;
        border-bottom: 1px solid #f0f1f4;
    }

    .reading-meta a {
        color: #3d5afe;
        font-weight: 600;
        text-decoration: none;
    }

    .reading-meta a:hover {
        text-decoration: underline;
    }

    .reading-hero {
        width: 100%;
        border-radius: 12px;
        margin-bottom: 1.8rem;
        max-height: 340px;
        object-fit: cover;
    }

    .quick-summary-block {
        margin-bottom: 1.6rem;
    }

    .panel-summary-btn {
        border-radius: 999px;
    }

    .panel-summary-btn:disabled {
        opacity: .65;
    }

    .quick-summary-box {
        background: #f5f7fb;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 1rem 1.2rem;
    }

    .quick-summary-label {
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #3d5afe;
        margin-bottom: .5rem;
    }

    .quick-summary-label .text-muted {
        font-size: .78rem;
        text-transform: none;
        letter-spacing: normal;
    }

    .quick-summary-text {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 1rem;
        line-height: 1.7;
        color: #262a35;
        margin: 0;
    }

    .quick-summary-upsell {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .5rem 1rem;
        border-radius: 999px;
        background: #F7F5FF;
        border: 1px solid #E5E7EB;
        color: #4532FF;
        font-size: .88rem;
        font-weight: 600;
        text-decoration: none;
    }

    .article-rule-tag {
        font-size: .68rem;
        font-weight: 700;
        padding: .15rem .6rem;
        border-radius: 999px;
        background: #F7F5FF;
        color: #4532FF;
        cursor: default;
    }

    .quick-summary-upsell:hover {
        background: #efeaff;
        color: #4532FF;
    }

    .quick-summary-upsell .text-muted {
        font-size: .82rem;
        font-weight: 400;
    }

    .reading-body {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 1.14rem;
        line-height: 1.85;
        color: #262a35;
    }

    .reading-body p {
        margin: 0 0 1.35rem;
    }

    .reading-body h1,
    .reading-body h2,
    .reading-body h3 {
        font-family: inherit;
        font-weight: 700;
        line-height: 1.3;
        margin: 2rem 0 1rem;
        color: #14161f;
    }

    .reading-body h1 {
        font-size: 1.5rem;
    }

    .reading-body h2 {
        font-size: 1.3rem;
    }

    .reading-body h3 {
        font-size: 1.12rem;
    }

    .reading-body a {
        color: #3d5afe;
        text-decoration-color: rgba(61, 90, 255, .35);
    }

    .reading-body img {
        max-width: 100%;
        border-radius: 10px;
        margin: .5rem 0 1.5rem;
    }

    .reading-body blockquote {
        margin: 1.5rem 0;
        padding: .2rem 0 .2rem 1.2rem;
        border-left: 3px solid #3d5afe;
        color: #4a4f5c;
        font-style: italic;
    }

    .reading-body ul,
    .reading-body ol {
        margin: 0 0 1.35rem;
        padding-left: 1.4rem;
    }

    .reading-body li {
        margin-bottom: .5rem;
    }

    .reading-body code {
        background: #f5f7fb;
        padding: .15rem .4rem;
        border-radius: 4px;
        font-size: .9em;
    }

    .reading-body pre {
        background: #14161f;
        color: #eef1ff;
        padding: 1rem 1.2rem;
        border-radius: 10px;
        overflow-x: auto;
        margin: 0 0 1.5rem;
    }

    .reading-body pre code {
        background: none;
        padding: 0;
        color: inherit;
    }

    .related-section {
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e9ecef;
    }

    .related-section h6 {
        font-family: inherit;
        text-transform: uppercase;
        font-size: .74rem;
        letter-spacing: .04em;
        color: #8a8f98;
    }

    .related-item {
        display: block;
        padding: .8rem 0;
        border-bottom: 1px solid #f0f1f4;
        text-decoration: none;
        color: inherit;
        transition: padding-left .15s ease;
    }

    .related-item:hover {
        padding-left: .3rem;
    }

    .related-item-title {
        font-weight: 600;
        font-size: .95rem;
        color: #14161f;
        margin-bottom: .15rem;
    }

    @media (max-width: 768px) {
        .reading-panel {
            top: auto;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            max-width: 100%;

            /* fallback for browsers without dvh support */
            height: 98vh;
            height: 98dvh;

            /* alternative: cap it instead of fixing it, so content decides height */
            max-height: 98dvh;

            border-radius: 20px 20px 0 0;
            transform: translateY(100%);

            /* respect the home indicator / notch area */
            padding-bottom: env(safe-area-inset-bottom);
            box-sizing: border-box;
        }

        .reading-panel.open {
            transform: translateY(0);
        }

        .reading-panel-header {
            justify-content: center;
            position: relative;
            padding: .7rem 1rem;
        }

        .reading-panel-header .reading-panel-close {
            position: absolute;
            right: 1rem;
            top: .6rem;
            z-index: 9;
        }

        .reading-panel-drag-handle {
            display: block;
            width: 40px;
            height: 4px;
            border-radius: 999px;
            background: #d1d4da;
        }

        .reading-panel-body {
            padding: 1.3rem 1.3rem 3rem;
        }

        .reading-title {
            font-size: 1.5rem;
        }

        .reading-body {
            font-size: 1.06rem;
        }

        .reading-top .badge {
            max-width: 48%;
        }

        .reading-actions button {
            width: 34px;
            height: 34px;
            margin-left: .3rem;
        }

        /* border-radius:999px (a pill) only looks right on a single line —
       once "upgrade to X to unlock" wraps to a second line on a narrow
       screen, the same radius stretches into a lopsided oval instead of
       a clean rounded box. */
        .quick-summary-upsell {
            border-radius: 10px;
            align-items: flex-start;
            flex-wrap: wrap;
            row-gap: .2rem;
        }
    }

/* Sign in with Apple — Apple's guidelines allow a white button with a black logo. */
.apple-icon svg { width: 20px; height: 20px; fill: #000; }

/* ══ Impersonation dock (partials/impersonation-dock.blade.php) ══
   Floats in the bottom-left corner, so it takes no space in the layout and
   never competes with the header for the top of the page. Red, so an admin
   inside someone else's account can't mistake it for their own.
   Layering: above page content, modals and the cookie banner; below the
   article reading panel (z-index 10050), so it never covers what you read. */
.imp-dock {
    --imp-lift: 0px;
    position: fixed; z-index: 10040;
    left: .75rem; bottom: calc(.75rem + var(--imp-lift));
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
    max-width: calc(100vw - 1.5rem);
    font-size: .88rem; line-height: 1.4;
    transition: bottom .2s ease;
}
.imp-card {
    width: 290px; max-width: 100%;
    padding: .85rem .95rem; border-radius: 14px;
    background: #fff; color: #1f2330;
    border: 1px solid #f3c6c1; border-top: 4px solid #b42318;
    box-shadow: 0 10px 28px rgba(20, 22, 31, .22);
}
.imp-card[hidden] { display: none; }
.imp-card-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b42318; }
.imp-card-email { margin-top: .1rem; font-weight: 700; overflow-wrap: anywhere; }
.imp-card-meta { margin-top: .25rem; font-size: .78rem; color: #6c757d; }
.imp-card-form { margin: .7rem 0 0; }
.imp-return {
    width: 100%; padding: .55rem .8rem; border: none; border-radius: 10px;
    background: #b42318; color: #fff; font-weight: 600; font-size: .86rem; cursor: pointer;
}
.imp-return:hover, .imp-return:focus-visible { background: #912018; outline: none; }
.imp-pill {
    display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
    min-height: 2.6rem; padding: .45rem .9rem; border: none; border-radius: 999px;
    background: #b42318; color: #fff; font-weight: 600; font-size: .84rem; cursor: pointer;
    box-shadow: 0 6px 18px rgba(180, 35, 24, .35);
}
.imp-pill:focus-visible { outline: 3px solid rgba(180, 35, 24, .35); outline-offset: 2px; }
.imp-pill-email { min-width: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; opacity: .9; }
.imp-pill-chevron { transition: transform .2s ease; }
.imp-dock.is-collapsed .imp-pill-chevron { transform: rotate(180deg); }
/* On a phone the pill says only "Viewing as": the email is one tap away in
   the card, and a long address would stretch the pill across the screen. */
@media (max-width: 575.98px) {
    .imp-pill-email { display: none; }
    .imp-card { width: min(290px, calc(100vw - 1.5rem)); }
}
@media (prefers-reduced-motion: reduce) {
    .imp-dock, .imp-pill-chevron { transition: none; }
}
/* ══ Cookie consent banner (layout/master.blade.php) ══
   Bottom of a phone, bottom-left card on a desktop — never over the page's
   main content, never a wall. Both buttons share one style on purpose:
   saying no may not be made harder, or less visible, than saying yes. */
.consent-banner {
    position: fixed; z-index: 1090; left: .75rem; right: .75rem; bottom: .75rem;
    display: flex; flex-direction: column; gap: .7rem;
    padding: .9rem 1rem; background: #14161f; color: #e9ebf2;
    border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    font-size: .88rem; line-height: 1.45;
}
.consent-banner[hidden] { display: none; }
.consent-banner-text { margin: 0; }
.consent-banner-text strong { color: #fff; }
.consent-banner-text a { color: #aab4ff; text-decoration: underline; }
.consent-banner-actions { display: flex; gap: .5rem; }
.consent-btn {
    flex: 1 1 0; padding: .55rem .9rem; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08);
    color: #fff; font-weight: 600; font-size: .86rem; cursor: pointer;
}
.consent-btn:hover, .consent-btn:focus-visible { background: rgba(255, 255, 255, .18); outline: none; border-color: #fff; }
@media (min-width: 768px) {
    .consent-banner { right: auto; max-width: 420px; left: 1.25rem; bottom: 1.25rem; }
}

/* ══ Blog post signup card (blog/show.blade.php) ══ */
.fb-article-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
    margin: 2.5rem 0 .5rem; padding: 1.4rem 1.5rem; border-radius: 16px;
    background: linear-gradient(135deg, #f4f3ff 0%, #eef4ff 100%); border: 1px solid #e3e1ff;
}
.fb-article-cta-text { flex: 1 1 280px; min-width: 0; }
.fb-article-cta-text h3 { margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 700; color: #14161f; }
.fb-article-cta-text p { margin: 0; font-size: .95rem; color: #4a4f5a; }
.fb-article-cta-action { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: 0 0 auto; }
.fb-article-cta-btn {
    display: inline-block; padding: .7rem 1.4rem; border-radius: 999px;
    background: linear-gradient(90deg, #4532FF, #7159FF); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.fb-article-cta-btn:hover, .fb-article-cta-btn:focus-visible { color: #fff; opacity: .92; }
.fb-article-cta-note { font-size: .78rem; color: #8a8f98; white-space: nowrap; }
@media (max-width: 575.98px) {
    .fb-article-cta-action, .fb-article-cta-btn { width: 100%; text-align: center; }
}
/* Homepage hero reassurance line (welcome.blade.php) */
.hero-users-icon { color: #16a34a; margin-right: .3rem; }

/* ── Sign in / create account (auth/login, auth/register) ── 2026-09-16
   Provider buttons: icon and label centred together. They were pinned at
   fixed offsets (icon 64px, label 138px from the left), so each label sat
   at a different distance from its icon and off-centre in the button. */
.social-btn { justify-content: center; gap: 12px; height: 46px; text-decoration: none; }
.social-btn .social-icon, .social-btn > span:last-child { position: static; }
.social-btn:focus-visible { outline: 2px solid #4c46ed; outline-offset: 2px; }
.error_msgs a { color: #4c42e9; font-weight: 600; }
.password-rules { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; padding: 0; font-size: 12px; color: #8a8f9e; }
.password-rules li { display: inline-flex; align-items: center; gap: 4px; }
.password-rules li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #cfd3dc; }
.password-rules li.is-met { color: #15803d; }
.password-rules li.is-met::before { background: #16a34a; }
.auth-switch { font-size: 14px !important; }
/* Account avatar (header + Profile): the uploaded photo, otherwise the
   person's initial on solid brand colour (the silhouette behind it was dropped). */
.fb_user_avatar { display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.fb_user_avatar img { width: 100%; height: 100%; object-fit: cover; }
.fb_user_avatar.is-default, .profile-avatar-initial { background: #4532FF; color: #fff; }
.profile-avatar-initial { width: 120px; height: 120px; border-radius: 50%; font-size: 48px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid #F7F5FF; }
.profile-avatar-initial[hidden] { display: none; }
.profile-photo-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: -4px 0 10px; min-height: 0; }
.profile-photo-actions:empty { display: none; }

/* Choose-interest grid (user/choose-interest): labels were nowrap, and a
   1fr column can't shrink below its content, so "Environment & Climate"
   widened the columns and pushed the third off narrow phones (the Android
   app, 2026-09-17). Columns now share the width; long labels wrap. */
.interest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.interest-item { min-width: 0; height: auto; min-height: 100px; }
.interest-item > span:last-child { white-space: normal; text-align: center; line-height: 1.25; overflow-wrap: anywhere; padding: 0 2px; }
@media (max-width: 480px) { .interest-item { min-height: 84px; } .interest-item > span:last-child { font-size: 11px; } }
@media (max-width: 360px) { .interest-item { min-height: 80px; } }

/* "Sign in with Google" button slot (auth/partials/social-buttons) */
.gis-slot { display: flex; flex-direction: column; align-items: center; min-height: 44px; }
.gis-slot .gis-error { margin: 6px 0 0; text-align: center; }
.gis-slot .gis-classic { margin-top: 8px; font-size: 12px; color: #6b7280; text-decoration: underline; }

/* Reader: "report a problem with this article" (article-panel-content) */
.panel-report-btn { background: none; border: 0; color: #8a8f98; padding: 4px 6px; }
.panel-report-btn:hover { color: #dc2626; }
.article-report-box { background: #f7f8fc; border: 1px solid #e7e9f2; border-radius: 12px; padding: 14px 16px; margin: 10px 0 16px; font-size: 14px; }
.article-report-reasons { display: flex; flex-direction: column; gap: 6px; }
.article-report-reason { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.article-report-reason input { margin: 0; }

/* ══ Blog post: share row and mobile typography (blog/show) ══ */
.fb-article-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid #eef0f5; }
.fb-article-share-label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a8f98; }
.fb-article-share-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.fb-article-share-links a, .fb-article-share-copy {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 50%; border: 1px solid #e7e9f2; background: #fff; color: #4b5563; font-size: 1.05rem;
    text-decoration: none; transition: color .2s, border-color .2s, transform .2s;
}
.fb-article-share-links a:hover, .fb-article-share-copy:hover { color: #4532FF; border-color: #c9c3ff; transform: translateY(-2px); }
.fb-article-share-done { font-size: .85rem; color: #16a34a; }
@media (max-width: 575.98px) {
    /* 2rem/800 at this width ran the title over four lines and pushed the
       article below the fold (screenshot, 2026-09-17). */
    .fb-article h1 { font-size: 1.55rem; line-height: 1.22; letter-spacing: -.01em; }
    .fb-article-body { font-size: 1rem; line-height: 1.7; }
    .fb-article-body h2 { font-size: 1.25rem; margin: 1.6rem 0 .75rem; }
    .fb-article-body h3 { font-size: 1.1rem; }
    .fb-article-breadcrumb { font-size: .78rem; margin-bottom: .9rem; }
    .fb-article-meta { font-size: .85rem; margin-bottom: 1.25rem; }
}
/* ══ Reading panel: publisher video pages (article-panel-content) ══ */
.reading-video-card { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; border: 1px solid #e7e9f2; border-radius: 14px; background: #f7f7fe; }
.reading-video-card > .bi { font-size: 2.6rem; color: #4532FF; line-height: 1; flex-shrink: 0; }
.reading-video-card p { color: #374151; }
/* ══ Reading panel: loading state while an article is fetched (partials/reading-panel) ══
   Built from the article panel's own classes (reading-top, reading-actions,
   reading-title), so it has the article's shape until the article arrives. */
.rp-loading { padding: 0; }
/* Same buttons as the loaded article, just not clickable yet — identical
   look and spacing, so nothing moves when the article arrives. */
.rp-actions button { cursor: default; }
.rp-actions button:hover { border-color: #e9ecef; color: #6c757d; transform: none; }
.rp-sk { display: block; background: linear-gradient(90deg, #eef0f6 25%, #f7f8fb 37%, #eef0f6 63%); background-size: 400% 100%; border-radius: 6px; animation: rpShimmer 1.4s ease infinite; }
@keyframes rpShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.rp-sk-chip { width: 8rem; height: 2rem; border-radius: 8px; }
.rp-sk-title { width: 92%; height: 1.9rem; margin-bottom: .6rem; }
.rp-sk-title.short { width: 60%; margin-bottom: 1rem; }
.rp-sk-meta { width: 55%; height: .95rem; margin: .4rem 0 1.4rem; }
.rp-sk-block { width: 100%; height: 5.4rem; border-radius: 12px; margin-bottom: 1.6rem; }
.rp-sk-line { width: 100%; height: 1rem; margin-bottom: .85rem; }
.rp-sk-line.short { width: 70%; margin-bottom: 1.5rem; }
.rp-sk-line.shorter { width: 45%; }
/* The status sits where the text will appear. */
.rp-status { margin: 0 0 1.4rem; }
.rp-loading-status { display: flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 600; color: #4532FF; margin-bottom: .55rem; min-height: 1.3rem; }
.rp-dot { width: 8px; height: 8px; border-radius: 50%; background: #4532FF; animation: rpPulse 1.1s ease-in-out infinite; flex-shrink: 0; }
@keyframes rpPulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.rp-loading-text.rp-fade { animation: rpFade .35s ease; }
@keyframes rpFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.rp-loading-bar { height: 4px; background: #eef0f6; border-radius: 4px; overflow: hidden; }
/* Fast at first, then ever slower: always moving, never "done" until it is. */
.rp-loading-bar span { display: block; height: 100%; width: 94%; background: linear-gradient(90deg, #8b7dff, #4532FF); border-radius: 4px;
    transform-origin: left; animation: rpProgress 26s cubic-bezier(.08,.82,.17,1) forwards; }
@keyframes rpProgress { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .rp-sk, .rp-dot, .rp-loading-bar span, .rp-loading-text.rp-fade { animation: none; }
    .rp-loading-bar span { transform: scaleX(.6); }
}

/* ══ Dashboard right column: extension promo and ad slot (user/dashboard/ad-slot) ══ */
.fb-promo-card, .fb-ad-card { position: relative; display: block; margin-top: 1.25rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid #eceef4; border-radius: 14px; background: #fff; text-decoration: none; color: inherit; }
.fb-promo-card { background: linear-gradient(160deg, #f5f3ff 0%, #fff 70%); border-color: #e4e0ff; }
.fb-promo-close { position: absolute; top: .45rem; right: .55rem; border: 0; background: none; font-size: 1.2rem; line-height: 1; color: #9ca3af; cursor: pointer; }
.fb-promo-close:hover { color: #4b5563; }
.fb-promo-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #4532FF; color: #fff; font-size: 1.1rem; margin-bottom: .6rem; }
.fb-promo-title { font-weight: 700; font-size: .98rem; margin-bottom: .3rem; color: #111827; }
.fb-promo-text { font-size: .84rem; color: #4b5563; line-height: 1.45; margin-bottom: .8rem; }
.fb-ad-card:hover { border-color: #d6d9e4; box-shadow: 0 2px 10px rgba(17, 24, 39, .05); }
.fb-ad-label { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; margin-bottom: .5rem; }
.fb-ad-image { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: .6rem; }
.fb-ad-title { display: block; font-weight: 700; font-size: .95rem; color: #111827; margin-bottom: .25rem; }
.fb-ad-text { display: block; font-size: .84rem; color: #4b5563; line-height: 1.45; margin-bottom: .45rem; }
.fb-ad-cta { display: inline-block; font-size: .84rem; font-weight: 600; color: #4532FF; }
.fb-ad-adsense { min-height: 120px; }
/* Built-in Coffee Club card: the slot's fallback for free users. */
.fb-cc-card { text-decoration: none; color: inherit; background: linear-gradient(160deg, #fff7ed 0%, #fff 70%); border-color: #fde5c8; }
.fb-cc-card:hover { border-color: #fbd3a3; box-shadow: 0 2px 10px rgba(17, 24, 39, .05); }
.fb-cc-icon { background: #b45309; }
.fb-cc-list { list-style: none; padding: 0; margin: .2rem 0 .9rem; font-size: .84rem; color: #4b5563; }
.fb-cc-list li { display: flex; gap: .4rem; align-items: baseline; margin-bottom: .25rem; }
.fb-cc-list .bi { color: #15803d; }
/* The same card inside the article list on small screens (dashboard wrapper). */
.fb-inline-slot { padding: .75rem 1rem; border-bottom: 1px solid #f0f1f5; }
.fb-inline-slot .fb-promo-card, .fb-inline-slot .fb-ad-card { margin-top: 0; }
@media (min-width: 992px) { .fb-inline-slot { display: none; } }