/* Generated shared deferred CSS; see frontend/styles/README.md. */
@media (max-width: 767px){
h4 { font-size: clamp(1.125rem, 2.5vw, 1.25rem); }
input:-webkit-autofill {
        font-size: 16px !important;
    }
.button-group,
    .action-buttons {
        gap: 12px; 
    }
nav ul,
    .nav-list {
        gap: 8px;
    }
}
@media (max-width: 767px){
.share-circle,
    .share-button {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
.reaction-button,
    .comment-action,
    .article-action {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 12px;
        touch-action: manipulation;
    }
}
html[dir="rtl"] .btn-group .btn:first-child:not(:last-child),
html[dir="rtl"] .action-buttons .btn:first-child:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
html[dir="rtl"] .btn-group .btn:last-child:not(:first-child),
html[dir="rtl"] .action-buttons .btn:last-child:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
html[dir="rtl"] .btn-group .btn:not(:first-child):not(:last-child),
html[dir="rtl"] .action-buttons .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}
iframe, object, embed {
    max-width: 100%;
}
.no-scroll {
    overflow: hidden;
}
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}
.btn--ghost {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}
.text-muted {
    color: var(--color-text-muted);
}
.cookie-consent-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1f2937);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.12);
    padding: 18px var(--container-padding-inline, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 20px;
}
.cookie-consent-bar--hidden {
    display: none !important;
}
.cookie-consent-bar__inner {
    max-width: 960px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 20px;
}
.cookie-consent-bar__content {
    flex: 1 1 300px;
    min-width: 0;
}
.cookie-consent-bar__title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}
.cookie-consent-bar__text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}
.cookie-consent-bar__link {
    color: var(--color-primary, #2563eb);
    text-decoration: underline;
    font-weight: 500;
}
.cookie-consent-bar__link:hover {
    text-decoration: none;
    opacity: 0.9;
}
.cookie-consent-bar__btn {
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--color-primary, #2563eb);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cookie-consent-bar__btn:hover {
    opacity: 0.92;
}
html[data-theme="dark"] .cookie-consent-bar,
body[data-theme="dark"] .cookie-consent-bar {
    background: var(--color-surface);
    color: var(--color-text);
}





.surface-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--card-padding);
    border: 1px solid var(--color-border);
}

.surface-card--flush { padding: 0; }
.surface-card--lg { padding: var(--space-lg); }
.surface-card--elevated {
    box-shadow: var(--shadow-md);
    border-color: transparent;
}
.surface-card--no-border { border: 0; }

.section-divider {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-lg) 0;
}

.muted-text { color: var(--color-text-muted); }

.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.brand-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1;
    border: 0;
}

.is-success { color: var(--color-success); }
.is-danger  { color: var(--color-danger); }
.is-warning { color: var(--color-warning); }
.is-info    { color: var(--color-info); }

.bg-success-soft { background-color: var(--color-success-soft); color: var(--color-success); }
.bg-danger-soft  { background-color: var(--color-danger-soft);  color: var(--color-danger); }
.bg-warning-soft { background-color: var(--color-warning-soft); color: var(--color-warning); }
.bg-info-soft    { background-color: var(--color-info-soft);    color: var(--color-info); }



.mobile-account-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    min-height: 56px;
}

.mobile-account-panel__header .header-icon-button {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.mobile-account-panel__header-end {
    width: 40px;
    flex-shrink: 0;
}

.mobile-account-panel__logo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.mobile-account-panel__logo .site-logo__img {
    max-height: 40px;
    width: auto;
}

.mobile-account-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md) var(--space-lg) var(--space-xl);
}

.mobile-account-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-account-panel__item {
    margin: 0;
    padding: 0;
}

.mobile-account-panel__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 14px 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.15s ease;
}

.mobile-account-panel__link:hover,
.mobile-account-panel__link:focus-visible {
    background-color: var(--color-surface-alt);
    outline: none;
}

.mobile-account-panel__link--external .mobile-account-panel__external {
    font-size: 0.85rem;
    opacity: 0.7;
}

.mobile-account-panel__subheading {
    margin: var(--space-lg) 0 var(--space-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mobile-account-panel__footer {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.mobile-account-panel__logout {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
}

.mobile-account-panel__logout:hover {
    background-color: var(--color-surface-alt);
}

.mobile-account-panel__notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    padding: 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: 999px;
    background-color: var(--color-danger, #dc2626);
    color: #fff;
}

@media (min-width: 1200px) {
    .mobile-account-overlay {
        display: none !important;
    }
}

.mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav__search {
    padding: var(--space-md) var(--space-lg);
}

.mobile-nav__search-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-alt);
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.mobile-nav__search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-surface);
}

.mobile-nav__links {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav__link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-md);
    transition: background-color 0.2s, color 0.2s;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus {
    background-color: var(--color-surface-alt);
    color: var(--color-primary);
}

.mobile-nav__link--active {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
}

.mobile-nav__link--admin {
    color: var(--color-accent);
}

.mobile-nav__user-block:empty {
    display: none;
}

.mobile-nav__account {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.mobile-nav__account-heading {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mobile-nav__account-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-nav__account-item {
    margin: 0;
}

.mobile-nav__account-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.mobile-nav__account-link:hover,
.mobile-nav__account-link:focus {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 700;
}

.mobile-nav__account-link-label {
    flex: 1;
    min-width: 0;
    text-align: start;
}

.mobile-nav__account-link--profile {
    border-inline-start: 3px solid var(--color-primary);
}

.mobile-nav__account-link--dashboard {
    border-inline-start: 3px solid var(--color-accent);
}

.mobile-nav__account-link--notifications {
    border-inline-start: 3px solid #f59e0b;
}

.mobile-nav__account-external {
    font-size: 0.85rem;
    opacity: 0.65;
    flex-shrink: 0;
}

.mobile-nav__account-subheading {
    margin: var(--space-md) 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mobile-nav__account-list--extra .mobile-nav__account-link--extra {
    border-inline-start: 3px solid rgba(148, 163, 184, 0.45);
    font-weight: 500;
}

.mobile-nav__browse {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav__browse-label {
    display: block;
    margin-bottom: 0.35rem;
    padding-inline: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

[dir="rtl"] .mobile-nav__account-heading,
[dir="rtl"] .mobile-nav__browse-label,
[dir="rtl"] .mobile-nav__account-subheading {
    text-transform: none;
    letter-spacing: 0;
}

.notif-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.notif-mark-all {
    border: none;
    background: transparent;
    font-size: 0.8rem;
    cursor: pointer;
    color: #64748b;
}

.notif-list {
    max-height: 340px;
    overflow-y: auto;
}

.notif-item {
    display: block;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item--unread {
    background-color: rgba(59, 130, 246, 0.06);
}

.notif-item:hover {
    background-color: rgba(148, 163, 184, 0.10);
}

.notif-item__text {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.notif-item__excerpt {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.notif-item__time {
    font-size: 0.75rem;
    color: #94a3b8;
}

.notif-empty {
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    color: #64748b;
}
html[data-theme="dark"] .notif-dropdown,
body[data-theme="dark"] .notif-dropdown {
    background-color: #020617;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .notif-dropdown__header,
body[data-theme="dark"] .notif-dropdown__header {
    border-bottom-color: rgba(51, 65, 85, 0.8);
}

html[data-theme="dark"] .notif-item--unread,
body[data-theme="dark"] .notif-item--unread {
    background-color: rgba(37, 99, 235, 0.18);
}

html[data-theme="dark"] .notif-item:hover,
body[data-theme="dark"] .notif-item:hover {
    background-color: rgba(30, 64, 175, 0.35);
}

html[data-theme="dark"] .notif-item__excerpt,
body[data-theme="dark"] .notif-item__excerpt {
    color: #cbd5f5;
}

html[data-theme="dark"] .notif-item__time,
body[data-theme="dark"] .notif-item__time {
    color: #64748b;
}

html[data-theme="dark"] .notif-empty,
body[data-theme="dark"] .notif-empty {
    color: #94a3b8;
}

.header-user__menu-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.header-user__menu-head-avatar {
    flex-shrink: 0;
}

.header-user__menu-head-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid rgba(148, 163, 184, 0.35);
}

.header-user__menu-head-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-primary, #3b82f6), #1d4ed8);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
}

.header-user__menu-head-meta {
    min-width: 0;
    flex: 1;
}

.header-user__menu-head-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user__menu-head-link {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #2563eb);
    text-decoration: none;
}

.header-user__menu-head-link:hover {
    text-decoration: underline;
}


.header-user__menu-item {
    display: block;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    color: #0f172a;
    text-decoration: none;
    white-space: nowrap;
}

.header-user__menu-item:hover {
    background-color: rgba(148, 163, 184, 0.12);
}

.header-user__menu-item--notifications {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.header-user__menu-notif-badge {
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background-color: #ef4444;
    color: #ffffff;
}

.mobile-nav__notif-badge {
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    background-color: #ef4444;
    color: #ffffff;
}

html[data-theme="dark"] .header-user__menu-notif-badge,
html[data-theme="dark"] .mobile-nav__notif-badge {
    background-color: #f97316;
    color: #0f172a;
}

html[data-theme="dark"] .mobile-nav__account,
body[data-theme="dark"] .mobile-nav__account {
    background: linear-gradient(165deg, rgba(30, 41, 59, 0.6) 0%, #020617 100%);
    border-color: rgba(51, 65, 85, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .mobile-nav__account-link,
body[data-theme="dark"] .mobile-nav__account-link {
    background-color: rgba(15, 23, 42, 0.85);
    border-color: rgba(51, 65, 85, 0.85);
    color: #e5e7eb;
}

button.header-user__menu-item {
    width: 100%;
    text-align: start;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

.header-user__divider {
    height: 1px;
    margin: 0.3rem 0;
    background-color: rgba(148, 163, 184, 0.3);
}

html[data-theme="dark"] .header-user__menu-head,
body[data-theme="dark"] .header-user__menu-head {
    border-bottom-color: rgba(51, 65, 85, 0.85);
}

html[data-theme="dark"] .header-user__menu-head-name,
body[data-theme="dark"] .header-user__menu-head-name {
    color: #f1f5f9;
}

html[data-theme="dark"] .header-user__menu-head-img,
body[data-theme="dark"] .header-user__menu-head-img {
    border-color: rgba(71, 85, 105, 0.9);
}
html[data-theme="dark"] .header-user__menu,
body[data-theme="dark"] .header-user__menu {
    background-color: #020617;
    border-color: rgba(51, 65, 85, 0.85);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .header-user__menu-item,
body[data-theme="dark"] .header-user__menu-item {
    color: #e5e7eb;
}

html[data-theme="dark"] .header-user__menu-item:hover,
body[data-theme="dark"] .header-user__menu-item:hover {
    background-color: rgba(30, 64, 175, 0.35);
}

html[data-theme="dark"] .header-user__divider,
body[data-theme="dark"] .header-user__divider {
    background-color: rgba(51, 65, 85, 0.9);
}

@media (max-width: 767px) {
    .notif-dropdown {
        
        position: fixed;
        
        
        top: 70px; 
        
        
        width: auto;
        left: 12px;
        right: 12px;
        
        
        inset-inline-end: auto;
        
        
        transform: translateY(10px); 
    }

    .notif-dropdown.is-open {
        transform: translateY(0);
    }
}
.mobile-nav-overlay.is-open {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }




/* Sign-in feedback uses logical spacing for both publication languages. */
.google-signin-status{position:fixed;inset-inline:16px;bottom:20px;margin-inline:auto;max-width:520px;padding:16px 18px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;color:#172033;box-shadow:0 10px 35px #0003;z-index:10001;display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.7}.google-signin-status[hidden],.google-signin-status [hidden]{display:none}.google-signin-status [data-google-status-text]{flex:1}.google-signin-status button{flex-shrink:0;cursor:pointer;border:0;border-radius:6px;padding:6px 10px;background:#edf2f8;color:inherit;font:inherit}.google-signin-status button:focus-visible{outline:2px solid #2563eb;outline-offset:3px}.google-signin-status [data-google-dismiss]{font-size:22px;line-height:1}.google-signin-status[aria-busy=true] [data-google-status-text]{opacity:.8}@media(max-width:480px){.google-signin-status{flex-wrap:wrap;inset-inline:10px;bottom:12px}.google-signin-status [data-google-status-text]{flex-basis:75%}}
/* Private member reminder is fixed so it does not move page content. */
.member-profile-notice{position:fixed;z-index:110;inset-inline-end:20px;bottom:20px;width:min(370px,calc(100% - 32px));padding:18px;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);color:var(--color-text);box-shadow:0 12px 50px #0003}
.member-profile-notice[hidden]{display:none!important}
.member-profile-notice strong{font-size:15px}
.member-profile-notice p{font-size:13px;line-height:1.8;color:var(--color-text-muted);margin:8px 0 12px}
.member-profile-notice>div{display:flex;align-items:center;gap:14px}
.member-profile-notice button{border:0;background:none;color:var(--color-text-muted);font:inherit;cursor:pointer}
.auth-form__btn--facebook{display:flex;align-items:center;justify-content:center;gap:10px;background:#1877f2;color:#fff;border:0;text-decoration:none;margin-top:10px}
.auth-form__btn--facebook:hover{background:#1464ce;color:#fff}
.auth-form__btn--facebook span{font:bold 24px Arial,sans-serif}