:root {
    /* Tells browsers to render every native widget (select dropdown
       panel, scrollbars, date/color/file pickers, focus rings) in
       dark mode. Without this, Chrome/Firefox briefly flash the OS
       default light panel when a <select> is clicked. */
    color-scheme: dark;

    --primary-bg: #0a0f18;
    --secondary-bg: #1A202C;
    --accent-color: #39D3BB;
    --text-primary: #E2E8F0;
    --text-secondary: #A0AEC0;
    --text-on-accent: #0D1117;
    --border-color: #2D3748;
    --header-bg: #1A202C;
    --footer-bg: #1A202C;
    --glass-bg: rgba(26, 32, 44, 0.6);
    --accent-color-rgb: 57, 211, 187;
    --primary-bg-rgb: 10, 15, 24; /* FIXED: Added this missing variable */

    --font-primary: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-headings: 'Montserrat', var(--font-primary);
}

/* =================================================================== */
/* 1. GENERAL & BASE STYLES
/* =================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.7;
    background-color: var(--primary-bg);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px;
}

main {
    flex-grow: 1;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #69D2E7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--text-primary);
    margin-bottom: 0.75em;
    line-height: 1.3;
}


h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }

p {
    margin-bottom: 1.2em;
    color: var(--text-secondary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style-position: inside;
    padding-left: 0;
}

/* General Container for content sections */
.content-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* =================================================================== */
/* 2. LAYOUT: HEADER & FOOTER
/* =================================================================== */

/* --- Header --- */
header {
    background-color: var(--header-bg);
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header nav {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

header nav h1 {
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

header nav h1 a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1;
}

.logo-accent {
    color: var(--accent-color);
}

header nav .nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

header nav .nav-links li a {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

header nav .nav-links li a:hover,
header nav .nav-links li a.active {
    color: var(--accent-color);
}

/* --- Language Switcher Dropdown --- */
.nav-lang-switcher {
    position: relative;
}
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.lang-toggle:hover {
    background: rgba(var(--accent-color-rgb), 0.08);
    border-color: var(--border-color);
}
.lang-flag {
    display: inline-block;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
.lang-flag-it {
    background: linear-gradient(90deg, #009246 33.33%, #fff 33.33%, #fff 66.66%, #CE2B37 66.66%);
}
.lang-flag-en {
    position: relative;
    background: #012169;
}
.lang-flag-en::before,
.lang-flag-en::after {
    content: '';
    position: absolute;
}
.lang-flag-en::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    margin-top: -2px;
    background: #fff;
    box-shadow: 0 0 0 1px #C8102E;
}
.lang-flag-en::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    margin-left: -2px;
    background: #fff;
    box-shadow: 0 0 0 1px #C8102E;
}
.lang-flag-es {
    background: linear-gradient(180deg, #AA151B 25%, #F1BF00 25%, #F1BF00 75%, #AA151B 75%);
}
.lang-flag-fr {
    background: linear-gradient(90deg, #002395 33.33%, #fff 33.33%, #fff 66.66%, #ED2939 66.66%);
}
.lang-flag-ar {
    background: linear-gradient(180deg, #CE1126 33.33%, #fff 33.33%, #fff 66.66%, #000 66.66%);
    position: relative;
}
.lang-flag-ar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #007A3D;
}
.lang-flag-zh-hans {
    background: #DE2910;
    position: relative;
}
.lang-flag-zh-hans::after {
    content: '★';
    position: absolute;
    top: 0;
    left: 2px;
    font-size: 10px;
    line-height: 16px;
    color: #FFDE00;
}
.lang-flag-ja {
    background: #fff;
    position: relative;
}
.lang-flag-ja::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: #BC002D;
}
.lang-flag-ru {
    background: linear-gradient(180deg, #fff 33.33%, #0039A6 33.33%, #0039A6 66.66%, #D52B1E 66.66%);
}
.lang-flag-ko {
    background: #fff;
    position: relative;
}
.lang-flag-ko::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: linear-gradient(180deg, #CD2E3A 50%, #0047A0 50%);
}
.lang-label {
    letter-spacing: 0.5px;
}
.lang-caret {
    transition: transform 0.25s ease;
    color: var(--text-secondary);
}
.lang-toggle[aria-expanded="true"] .lang-caret {
    transform: rotate(180deg);
}

/* Language dropdown menu */
.lang-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 150px;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.35rem;
    list-style: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1100;
    animation: dropdownFadeIn 0.15s ease-out;
}
.lang-dropdown-menu.show {
    display: block;
}
.lang-dropdown-menu form {
    display: block;
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    background: none;
    border: none;
    border-radius: 7px;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lang-option:hover {
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
}
.lang-option.active {
    color: var(--accent-color);
    font-weight: 600;
}
.lang-option.active::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
    margin-left: auto;
}

/* --- Profile Avatar Dropdown --- */
.nav-profile-wrapper {
    position: relative;
}
.profile-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 24px;
    cursor: pointer;
    padding: 0.3rem 0.6rem 0.3rem 0.3rem;
    color: var(--text-secondary);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.profile-toggle:hover {
    background: rgba(var(--accent-color-rgb), 0.08);
    border-color: var(--border-color);
}
.nav-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    transition: border-color 0.3s ease;
}
.profile-toggle:hover .nav-avatar {
    border-color: var(--accent-color);
}
.nav-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), #2bb5a0);
    color: var(--text-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.profile-toggle:hover .nav-avatar-fallback {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.3);
}
.profile-caret {
    transition: transform 0.25s ease;
    color: var(--text-secondary);
}
.profile-toggle[aria-expanded="true"] .profile-caret {
    transform: rotate(180deg);
}

/* --- Login link for anonymous users --- */
header nav .nav-links li a.nav-login-btn,
.nav-login-btn {
    color: var(--text-secondary) !important;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.35rem 1.1rem;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav-login-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}
.nav-login-btn:hover {
    color: #fff !important;
    border-color: var(--accent-color);
    box-shadow: 0 0 18px rgba(57, 211, 187, 0.25);
}
.nav-login-btn:hover::before {
    opacity: 1;
}
.nav-login-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 8px rgba(57, 211, 187, 0.4);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* --- Hub nav link for staff users --- */
header nav .nav-links li a.nav-hub-link,
.nav-hub-link {
    color: var(--accent-color) !important;
    background: rgba(var(--accent-color-rgb), 0.08);
    border: 1px solid rgba(var(--accent-color-rgb), 0.3);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.35rem 1.1rem;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.nav-hub-link:hover {
    color: var(--text-on-accent) !important;
    background: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 18px rgba(var(--accent-color-rgb), 0.3);
}

/* Dropdown user info: name + tier badge row */
.dropdown-user-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dropdown-user-name-row .tier-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

/* --- Dropdown Menu --- */
.profile-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 220px;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.4rem;
    list-style: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1100;
    animation: dropdownFadeIn 0.15s ease-out;
}
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.profile-dropdown-menu.show {
    display: block;
}

/* User info header */
.dropdown-user-info {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.9rem;
}
.dropdown-user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.dropdown-user-email {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu items */
.profile-dropdown-menu li a,
.dropdown-logout-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.profile-dropdown-menu li a svg,
.dropdown-logout-btn svg {
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.profile-dropdown-menu li a:hover,
.dropdown-logout-btn:hover {
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
}
.profile-dropdown-menu li a:hover svg,
.dropdown-logout-btn:hover svg {
    opacity: 1;
}
.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.35rem 0.5rem;
}
.dropdown-logout-btn {
    color: #e53e3e;
}
.dropdown-logout-btn:hover {
    color: #fc8181;
    background: rgba(229, 62, 62, 0.08);
}
.dropdown-logout-btn:hover svg {
    opacity: 1;
}

/* --- Mobile Nav (Hamburger) --- */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.nav-toggle .hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-primary);
    position: relative;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.nav-toggle .hamburger-icon::before,
.nav-toggle .hamburger-icon::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-primary);
    position: absolute;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

.nav-toggle .hamburger-icon::before { top: -8px; }
.nav-toggle .hamburger-icon::after { bottom: -8px; }
.nav-toggle[aria-expanded="true"] .hamburger-icon { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger-icon::before { transform: rotate(45deg); top: 0; }
.nav-toggle[aria-expanded="true"] .hamburger-icon::after { transform: rotate(-45deg); bottom: 0; }

/* --- Footer --- */
footer {
    background-color: var(--footer-bg);
    color: var(--text-secondary);
    padding: 3rem 2rem 2rem;
    font-size: 0.95rem;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
    text-align: left;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-column h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.footer-column p {
    margin-bottom: 0.8em;
    line-height: 1.6;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 0.6em;
}

.footer-column ul li a,
.footer-column p a {
    color: var(--text-secondary);
    text-decoration: none;
}

.footer-column ul li a:hover,
.footer-column p a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.social-links a {
    margin-right: 0.8rem;
    font-size: 1rem;
    display: inline-block;
    color: var(--text-secondary);
}

.social-links a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.footer-bottom p {
    margin: 0;
}

/* =================================================================== */
/* 3. PAGE-SPECIFIC SECTIONS
/* =================================================================== */

/* --- Hero Section --- */
.hero {
    background: linear-gradient(-45deg, #0D1117, #1A202C, #0a0f18, #39D3BB);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: var(--text-primary);
    padding: 100px 20px 80px;
    text-align: center;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero h2.hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.1;
    max-width: 900px;
    letter-spacing: -2px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.hero p.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 700px;
    line-height: 1.6;
    font-weight: 400;
}

/* --- Mission & OKR Section --- */
.mission.content-section {
    max-width: 900px;
    margin: 6rem auto 0 auto;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    padding: 3rem 2.5rem 2rem 2.5rem;
    border-bottom: none;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    text-align: center;
}

.mission h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.mission h3 + p + h3 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    margin-top: 3rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.mission p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 1.5rem auto;
    color: var(--text-secondary);
    line-height: 1.8;
    text-align: left;
}

.okr-section {
    max-width: 900px;
    margin: 0 auto 6rem auto;
    padding: 3rem 2.5rem;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.okr-objective-block {
    margin-bottom: 4rem;
}
.okr-objective-block:last-child {
    margin-bottom: 0;
}

.okr-container {
    max-width: 900px;
    margin: 0 auto;
}

.okr-main-title {
    color: var(--accent-color);
    font-family: var(--font-headings);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}

.okr-subtitle {
    color: var(--text-secondary);
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 50px;
}

.kr-item {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 25px;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: rgba(var(--primary-bg-rgb), 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.kr-item:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 5px 20px rgba(var(--accent-color-rgb), 0.1);
}

.kr-item:last-child {
    margin-bottom: 0;
}

.kr-identifier {
    color: var(--accent-color);
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    line-height: 1;
    background-color: rgba(var(--accent-color-rgb), 0.1);
}

.kr-details {
    width: 100%;
}

.kr-description {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.kr-status,
.kr-due-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 4px 0;
}

.progress-bar-container {
    width: 100%;
    background-color: rgba(var(--accent-color-rgb), 0.2);
    height: 5px;
    border-radius: 5px;
    margin-top: 15px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

/* --- Venture Detail Page --- */
.venture-detail-page {
    padding-bottom: 3rem;
}

.venture-hero-section {
    position: relative;
    margin-bottom: 100px;
    line-height: 0;
}

.venture-cover-image {
    width: 100%;
    height: 35vh;
    max-height: 400px;
    min-height: 250px;
    overflow: hidden;
    background-color: var(--secondary-bg);
}

.venture-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.venture-profile-section-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

.venture-logo-container {
    position: absolute;
    bottom: 0;
    left: 20px;
    transform: translateY(40%);
    background-color: var(--primary-bg);
    z-index: 10;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 16px;
}

.venture-logo {
    width: 160px;
    height: 160px;
    display: block;
    object-fit: cover;
    background-color: #f0f2f5;
    padding: 0;
    border-radius: 0;
}

.venture-logo-placeholder {
    width: 160px;
    height: 160px;
    background-color: var(--secondary-bg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: bold;
    border-radius: 10px;
}

/* Venture hero action tabs — sits between hero and content, right of logo */
.venture-hero-actions {
    max-width: 1200px;
    margin: 0 auto 1.5rem;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    gap: 0;
}
.venture-hero-actions__badge { margin-left: auto; display: inline-flex; align-items: center; }

/* Inline variant: manage tabs rendered inside the content column (under the
   venture meta) rather than anchored beneath the hero. Left-aligned, framed
   by a top border, same .manage-tab effect. */
.venture-hero-actions--inline {
    max-width: none;
    margin: 1.5rem 0 0;
    padding: 0.35rem 0 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-top: 1px solid var(--border-color);
}
.venture-hero-actions--inline .venture-hero-actions__badge { margin-left: auto; }

.venture-main-content {
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Single-column fallback when no sidebar */
.venture-detail-single-col .venture-main-content {
    max-width: 1200px;
}

/* Two-column layout: remove max-width/padding from inner wrapper (grid handles it) */
.article-detail-layout .venture-main-content {
    max-width: none;
    padding: 0;
}

.venture-info h1 {
    font-size: 3rem;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.venture-oneliner {
    font-size: 1.3rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.venture-meta-1 {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
}

.venture-meta {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: space-between; /* Pushes info to the left and button to the right */
    align-items: center; /* Vertically aligns the text and the button */
    gap: 1.5rem; /* Provides space if they wrap */
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

/* This new container will group the text-based details */
.venture-meta-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem; /* The spacing for Date, Time, Location */
}

.venture-meta-details span {
    font-size: 1.1rem;
    color: var(--text-primary);
    opacity: 0.9;
}


.venture-meta span {
    font-size: 1.1rem; /* Slightly larger text */
    color: var(--text-primary);
    opacity: 0.9;
}
.venture-meta span strong {
    color: var(--text-primary);
}
.venture-meta a {
    color: var(--accent-color);
    font-weight: 500;
}
.venture-not-incorporated {
    font-style: italic;
    opacity: 0.7;
}

.venture-meta .cta-button {
    font-size: 1rem; /* Adjust button size to fit better */
    padding: 0.7rem 1.5rem;
}


.venture-structured-content {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.content-block {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.venture-structured-content .content-block:last-child {
    border-bottom: none;
}

/* === NEW STYLES FOR VENTURE CONTACT BLOCK   === */
/* ============================================== */

.venture-contact-block {
    margin-top: 3rem;
    padding: 2.5rem;
    background-color: var(--primary-bg); /* Use the darkest bg for contrast */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}

.venture-contact-block h3 {
    color: var(--text-primary);
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.venture-contact-block .cta-button {
    margin-top: 1rem;
}

.content-block h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
}

.content-block .content-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-primary);
}

.content-block .content-body p {
    margin-bottom: 1em;
}

.content-block .content-body ul,
.content-block .content-body ol {
    list-style-position: outside;
    padding-left: 1.5rem;
    margin-bottom: 1em;
}

/* =================================================================== */
/* 4. REUSABLE COMPONENTS
/* =================================================================== */

/* --- Buttons --- */
.cta-button {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--text-on-accent);
    padding: 0.9rem 2.2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(var(--accent-color-rgb), 0.2);
}

.cta-button:hover {
    background-color: #2CBBA5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-color-rgb), 0.3);
}

.cta-button.secondary-cta {
    background-color: var(--secondary-bg);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    box-shadow: none;
}

.cta-button.secondary-cta:hover {
    background-color: var(--accent-color);
    color: var(--text-on-accent);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--accent-color-rgb), 0.2);
}

/* --- Venture/Event Cards --- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}
.card {
    background-color: var(--secondary-bg);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease; /* Use 'all' for smoother transitions */
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color); /* Add a subtle border */
}

.card:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 12px 30px rgba(var(--accent-color-rgb), 0.2); /* Brighter glow */
    border-color: rgba(var(--accent-color-rgb), 0.5); /* Highlight border on hover */
}


/* --- 1. Add more space around the entire section (title and cards) --- */
.page-content-section {
    padding: 80px 40px; /* Increased vertical and horizontal padding for more "margin" */
    max-width: 1300px; /* Allow the grid to be a bit wider on large screens */
    margin: 0 auto;
}

/* --- 2. Add more space specifically below the title --- */
.page-content-section h2 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 4rem; /* INCREASED: Creates more space between title and cards */
    color: var(--text-primary);
}


.event-card {
    padding: 0;
    position: relative; /* For the stretched link */
    overflow: hidden;
}

.event-card-image-container {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--secondary-bg);
}

.event-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-card-img-placeholder {
    background-color: var(--border-color);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-card-img-placeholder span {
    font-size: 1.1rem;
    font-weight: 500;
}

/* --- 3. Lighten the Image Overlay and Style Title --- */
.event-card-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    /* Use a lighter gradient to show more of the image */
    background: linear-gradient(to top, rgba(10, 15, 24, 0.85) 0%, rgba(10, 15, 24, 0.7) 40%, transparent 100%);
}

.event-card-title-overlay h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.6rem; /* Slightly larger title */
    font-weight: 700; /* Bolder */
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6); /* Add text shadow for legibility */
    /* Clamp long titles to a maximum of 3 lines with an ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Venture card — mirrors detail-page hero/logo pattern --- */
.venture-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: visible;          /* allow logo to overflow */
    position: relative;
}

/* Cover image — mirrors .venture-cover-image */
.venture-card-cover {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    background-color: var(--secondary-bg);
    line-height: 0;
}
.venture-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.venture-card-cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-bg) 0%, rgba(var(--accent-color-rgb), 0.05) 100%);
}

/* Profile bridge — mirrors .venture-profile-section-wrapper */
.venture-card-profile {
    position: relative;
    padding: 0 16px;
    height: 0;                  /* collapses so footer flows naturally */
}

/* Logo container — mirrors .venture-logo-container exactly */
.venture-card-logo {
    position: absolute;
    bottom: 0;
    left: 80%;
    transform: translate(-50%, 50%);
    background-color: var(--primary-bg);
    z-index: 10;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    padding: 6px;
    border-radius: 14px;
    width: 102px;
    height: 102px;
}
.venture-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}
.venture-card-logo-letter {
    width: 100%;
    height: 100%;
    background-color: var(--secondary-bg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-headings);
    border-radius: 10px;
}

/* Footer — content below logo bridge */
.venture-card-footer {
    padding: 42px 22px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.venture-card-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-headings);
    line-height: 1.3;
}
.venture-card-oneliner {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Small logo badge for press/article cards */
.press-card-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--primary-bg);
    padding: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    z-index: 2;
}
.press-card-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 5px;
}

/* Date label inside card content */
.event-card-date {
    display: block;
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* --- 4. Fix Readability and Layout of Card Content --- */
.event-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 110px; /* FIXED: Ensures all cards have a consistent minimum height */
}

.event-card-content p {
    flex-grow: 1;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    opacity: 0.9; /* Slightly brighter for even better readability */
}

.event-detail-page .venture-info h1 {
    color: var(--accent-color);
}

.stretched-link-cover::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0,0,0,0);
}

/* --- Card Edit Bar & Button --- */
.card-edit-bar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding: 0.4rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--secondary-bg);
}

.card-edit-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    background: transparent;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.card-edit-btn svg {
    flex-shrink: 0;
}

.card-edit-btn:hover {
    background: var(--accent-color);
    color: #fff;
}

@media (max-width: 480px) {
    .card-edit-bar {
        padding: 0.35rem 0.75rem;
    }
    .card-edit-btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }
}

/* --- Join Modal --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--secondary-bg);
    margin: 15% auto;
    padding: 3rem;
    border: 1px solid var(--border-color);
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    position: relative;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.modal-content h3 {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.close-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    transition: color 0.3s;
    cursor: pointer;
    line-height: 1;
}

.close-button:hover,
.close-button:focus {
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}

.form-input {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 1rem;
}

/* Polished <select> styling — strips browser default chrome and draws
   a custom chevron via inline SVG. Applies wherever a select appears
   inside an .form-fieldset (covers profile/venture/article edit forms)
   or carries the .form-input class. */
select.form-input,
.form-fieldset select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background-color: var(--primary-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339D3BB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
select.form-input:hover,
.form-fieldset select:hover {
    border-color: rgba(var(--accent-color-rgb), 0.35);
    background-color: rgba(var(--accent-color-rgb), 0.04);
}
select.form-input:focus,
.form-fieldset select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18);
    background-color: var(--primary-bg);
}
/* Style the dropdown options too — limited support but Chrome+Firefox
   on dark backgrounds need this to avoid a stark white panel. */
select.form-input option,
.form-fieldset select option {
    background: var(--secondary-bg);
    color: var(--text-primary);
    padding: 0.5rem;
}
select.form-input:disabled,
.form-fieldset select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Polished text-input styling for any <input> inside a .form-fieldset
   that the original Django form didn't decorate with .form-input
   (e.g. inline formset rows like MemberLinkFormSet's label/url/order).
   Mirrors the .form-input treatment so the whole form looks coherent. */
.form-fieldset input[type="text"],
.form-fieldset input[type="url"],
.form-fieldset input[type="email"],
.form-fieldset input[type="tel"],
.form-fieldset input[type="search"],
.form-fieldset input[type="password"],
.form-fieldset input[type="number"],
.form-fieldset input[type="date"],
.form-fieldset input[type="datetime-local"],
.form-fieldset input[type="time"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: var(--font-primary);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.form-fieldset input[type="text"]::placeholder,
.form-fieldset input[type="url"]::placeholder,
.form-fieldset input[type="email"]::placeholder,
.form-fieldset input[type="tel"]::placeholder,
.form-fieldset input[type="search"]::placeholder,
.form-fieldset input[type="password"]::placeholder,
.form-fieldset input[type="number"]::placeholder { color: rgba(160, 174, 192, 0.55); }
.form-fieldset input[type="text"]:hover,
.form-fieldset input[type="url"]:hover,
.form-fieldset input[type="email"]:hover,
.form-fieldset input[type="tel"]:hover,
.form-fieldset input[type="search"]:hover,
.form-fieldset input[type="password"]:hover,
.form-fieldset input[type="number"]:hover,
.form-fieldset input[type="date"]:hover,
.form-fieldset input[type="datetime-local"]:hover,
.form-fieldset input[type="time"]:hover {
    border-color: rgba(var(--accent-color-rgb), 0.35);
}
.form-fieldset input[type="text"]:focus,
.form-fieldset input[type="url"]:focus,
.form-fieldset input[type="email"]:focus,
.form-fieldset input[type="tel"]:focus,
.form-fieldset input[type="search"]:focus,
.form-fieldset input[type="password"]:focus,
.form-fieldset input[type="number"]:focus,
.form-fieldset input[type="date"]:focus,
.form-fieldset input[type="datetime-local"]:focus,
.form-fieldset input[type="time"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18);
    background-color: var(--primary-bg);
}
/* File input — also gets a dark-themed look (the picker button itself
   is browser-controlled but color-scheme:dark on :root handles that). */
.form-fieldset input[type="file"] {
    width: 100%;
    padding: 0.6rem;
    background-color: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.88rem;
    cursor: pointer;
}

/* Polished <textarea> styling — matches the select treatment. Targets
   any .form-input textarea AND any textarea inside a .form-fieldset
   (covers profile / venture / article edit forms). */
textarea.form-input,
.form-fieldset textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background-color: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-primary);
    line-height: 1.55;
    min-height: 120px;
    resize: vertical;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
textarea.form-input::placeholder,
.form-fieldset textarea::placeholder {
    color: rgba(160, 174, 192, 0.55);
}
textarea.form-input:hover,
.form-fieldset textarea:hover {
    border-color: rgba(var(--accent-color-rgb), 0.35);
}
textarea.form-input:focus,
.form-fieldset textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18);
    background-color: var(--primary-bg);
}
textarea.form-input:disabled,
.form-fieldset textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* Custom scrollbar for textareas — works on Chromium/Safari */
textarea.form-input::-webkit-scrollbar,
.form-fieldset textarea::-webkit-scrollbar { width: 8px; }
textarea.form-input::-webkit-scrollbar-thumb,
.form-fieldset textarea::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-color-rgb), 0.25);
    border-radius: 4px;
}
textarea.form-input::-webkit-scrollbar-thumb:hover,
.form-fieldset textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-color-rgb), 0.5);
}

#membership-form .form-input::placeholder {
    color: var(--text-secondary);
}

#membership-form .cta-button {
    width: 100%;
    margin-top: 1rem;
}

.form-errors {
    color: #f87171;
    text-align: left;
    margin-bottom: 1rem;
}

.form-errors ul {
    list-style: none;
    padding: 0;
}

/* =================================================================== */
/* 5. RESPONSIVE STYLES
/* =================================================================== */

@media (max-width: 1100px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    header nav h1 a { font-size: 1.5rem; }
    .hero h2.hero-title { font-size: 3.5rem; }
    .hero p.hero-subtitle { font-size: 1.2rem; }
    .cta-button { padding: 0.8rem 1.8rem; font-size: 1rem; }
    .content-section, .mission.content-section, .okr-section { padding: 3rem 1.5rem; }
    
    
    .venture-meta {
        flex-direction: column; /* Stack the text block and button vertically */
        align-items: stretch;   /* Make them both full-width */
        gap: 1.5rem;
    }

    .venture-meta-details {
        flex-direction: column;   /* Stack Date, Time, Location vertically */
        align-items: flex-start;  /* Align them to the left */
        gap: 0.75rem;
    }
    
    /* Ensure the button is centered on its own line on mobile */
    .venture-meta .cta-button {
        text-align: center;
    }
}

@media (max-width: 992px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
    }
    .footer-column {
        min-width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .venture-meta {
        flex-direction: column; /* Stack the text block and button vertically */
        align-items: stretch;   /* Make them both full-width */
        gap: 1.5rem;
    }

    .venture-meta-details {
        flex-direction: column;   /* Stack Date, Time, Location vertically */
        align-items: flex-start;  /* Align them to the left */
        gap: 0.75rem;
    }
    
    /* Ensure the button is centered on its own line on mobile */
    .venture-meta .cta-button {
        text-align: center;
    }
}

@media (max-width: 1100px) {
    header { padding: 0.75rem 1rem; }
    header nav h1 a { font-size: 1.4rem; }
    header nav .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--header-bg);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        border-top: 1px solid var(--border-color);
        max-height: 0;
        overflow: hidden;
        overflow-y: auto;
        transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s ease;
        z-index: 1000;
    }
    header nav .nav-links.nav-open {
        display: flex;
        max-height: 80vh;
        padding: 0.5rem 0;
    }
    header nav .nav-links li { width: 100%; text-align: left; }
    header nav .nav-links li a {
        display: flex;
        align-items: center;
        padding: 0.9rem 1.25rem;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        font-size: 0.95rem;
        min-height: 48px; /* Touch-friendly minimum */
    }
    header nav .nav-links li:last-child a { border-bottom: none; }
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        transition: background 0.2s;
    }
    .nav-toggle:hover,
    .nav-toggle:active {
        background: rgba(var(--accent-color-rgb), 0.1);
    }

    /* Mobile: language switcher */
    .nav-lang-switcher { padding: 0; border-bottom: 1px solid rgba(255,255,255,0.04); width: 100%; }
    .lang-toggle {
        justify-content: flex-start;
        width: 100%;
        border-radius: 0;
        padding: 0.9rem 1.25rem;
        min-height: 48px;
    }
    .lang-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0,0,0,0.15);
        min-width: auto;
        padding: 0;
        animation: none;
    }
    .lang-dropdown-menu.show { display: block; }
    .lang-option {
        justify-content: flex-start;
        padding: 0.75rem 1.5rem;
        border-radius: 0;
        min-height: 44px;
    }

    /* Mobile: login button */
    .nav-login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0.75rem 1rem;
        padding: 0.85rem 1.5rem;
        font-size: 0.85rem;
        min-height: 48px;
        border-radius: 8px;
    }

    /* Mobile: hub link — full-width accent row */
    header nav .nav-links li a.nav-hub-link,
    .nav-hub-link {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin: 0;
        padding: 0.9rem 1.25rem;
        font-size: 0.95rem;
        min-height: 48px;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        border-left: 3px solid var(--accent-color);
        background: rgba(var(--accent-color-rgb), 0.06);
        width: 100%;
        text-transform: none;
        letter-spacing: normal;
        font-weight: 600;
    }
    header nav .nav-links li a.nav-hub-link:hover {
        background: rgba(var(--accent-color-rgb), 0.12);
        box-shadow: none;
    }

    /* Mobile: the bell becomes a full-width row with an inline panel (its
       340px floating dropdown would overflow small phones). Its label shows. */
    .nav-ico-label { display: inline; }
    .nav-bell-item { position: static; width: 100%; }
    .nav-bell-toggle {
        justify-content: flex-start;
        width: 100%;
        padding: 0.9rem 1.25rem;
        min-height: 48px;
        gap: 0.75rem;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .nav-bell-badge { margin-left: auto; }
    .nav-bell-dropdown {
        position: static;
        width: 100%;
        max-width: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0,0,0,0.15);
        opacity: 1;
        visibility: hidden;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .nav-bell-open .nav-bell-dropdown { visibility: visible; max-height: 60vh; overflow-y: auto; }
    .nav-bell-head { padding-left: 1.25rem; padding-right: 1.25rem; }

    /* Mobile: profile dropdown becomes inline */
    .nav-profile-wrapper { padding: 0; width: 100%; }
    .profile-toggle {
        justify-content: flex-start;
        width: 100%;
        border-radius: 0;
        padding: 0.9rem 1.25rem;
        min-height: 48px;
        gap: 0.75rem;
    }
    .profile-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0,0,0,0.15);
        min-width: auto;
        padding: 0;
        animation: none;
    }
    .profile-dropdown-menu.show { display: block; }
    .dropdown-user-info {
        align-items: flex-start;
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .dropdown-divider { display: none; }
    .profile-dropdown-menu li a,
    .dropdown-logout-btn {
        justify-content: flex-start;
        padding: 0.85rem 1.25rem;
        border-radius: 0;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        min-height: 48px;
        gap: 0.75rem;
    }
    .profile-dropdown-menu li:last-child .dropdown-logout-btn {
        border-bottom: none;
    }
}

/* Card / venture-meta layout keeps its own 900px breakpoint (unrelated to the
   nav, which now collapses to the hamburger earlier — on tablets — above). */
@media (max-width: 900px) {
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }

    .venture-meta {
        flex-direction: column; /* Stack the text block and button vertically */
        align-items: stretch;   /* Make them both full-width */
        gap: 1.5rem;
    }

    .venture-meta-details {
        flex-direction: column;   /* Stack Date, Time, Location vertically */
        align-items: flex-start;  /* Align them to the left */
        gap: 0.75rem;
    }

    /* Ensure the button is centered on its own line on mobile */
    .venture-meta .cta-button {
        text-align: center;
    }
}

@media (max-width: 480px) {
    header { padding: 0.5rem 0.65rem; }
    header nav h1 a { font-size: 1.15rem; }
    .nav-toggle {
        width: 40px;
        height: 40px;
    }
    .nav-toggle .hamburger-icon,
    .nav-toggle .hamburger-icon::before,
    .nav-toggle .hamburger-icon::after {
        width: 22px;
        height: 2.5px;
    }
    .nav-toggle .hamburger-icon::before { top: -7px; }
    .nav-toggle .hamburger-icon::after { bottom: -7px; }
    header nav .nav-links li a {
        padding: 0.8rem 1rem;
        font-size: 0.88rem;
    }
}

@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .hero h2.hero-title { font-size: 2.5rem; letter-spacing: -1px;}
    .hero p.hero-subtitle { font-size: 1.1rem; }
    
    .kr-item {
        flex-direction: column;
        gap: 15px;
        text-align: left;
    }
    .kr-identifier { align-self: flex-start; }

    .venture-hero-section {
        margin-bottom: 20px;
    }
    .venture-cover-image {
        height: 25vh;
        min-height: 180px;
    }
    .venture-logo-container {
        position: static;
        transform: none;
        width: 128px;
        height: 128px;
        margin: -64px auto 20px auto;
        padding: 5px;
    }
    .venture-logo, .venture-logo-placeholder {
        width: 118px;
        height: 118px;
    }
    .venture-hero-actions {
        justify-content: flex-end;
    }
    .venture-main-content {
        text-align: center;
    }
    .venture-info h1 {
        font-size: 2.2rem;
    }
    .venture-oneliner {
        font-size: 1.1rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    .content-block h3 {
        font-size: 1.3rem;
    }
    .content-block .content-body {
        font-size: 1rem;
        text-align: left;
    }
    
        
    /* --- Mobile Fixes for Event Flyer --- */
    .event-flyer-section.content-block {
        /* Make the container invisible on mobile */
        background: transparent;
        border: none;
        padding: 0;
    }

    .event-flyer-section h3 {
        /* Restore normal heading alignment for this section on mobile */
        text-align: left;
        display: block;
        border-bottom: 2px solid var(--accent-color); /* Put the underline back */
        margin-bottom: 1.5rem;
    }

    .event-flyer-image {
        /* Ensure the image is centered within the main page padding */
        
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    
    .venture-meta {
        flex-direction: column; /* Stack the text block and button vertically */
        align-items: stretch;   /* Make them both full-width */
        gap: 1.5rem;
    }

    .venture-meta-details {
        flex-direction: column;   /* Stack Date, Time, Location vertically */
        align-items: flex-start;  /* Align them to the left */
        gap: 0.75rem;
    }
    
    /* Ensure the button is centered on its own line on mobile */
    .venture-meta .cta-button {
        text-align: center;
    }

    /* Venture hero actions: horizontal scroll on mobile */
    .venture-hero-actions {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 1rem;
        gap: 0;
    }
    .venture-hero-actions::-webkit-scrollbar {
        display: none;
    }

    /* Venture single-col: tighter padding on mobile */
    .venture-detail-single-col {
        padding: 0 1rem;
    }
    .venture-main-content {
        padding: 0 0.5rem;
    }

    /* Gallery images: shorter on mobile */
    .gallery-item img {
        height: 180px;
    }

    /* Modal: tighter padding on mobile */
    .modal-content {
        margin: 10% auto;
        padding: 1.5rem;
    }

    /* Event flyer: constrain width */
    .event-flyer-image {
        max-width: 100%;
        height: auto;
    }

    /* Related news cards: tighter on mobile */
    .related-news-card-img {
        height: 140px;
    }

    /* Content body overflow prevention (shared) */
    .venture-structured-content {
        overflow-x: hidden;
    }
    .venture-structured-content img {
        max-width: 100%;
        height: auto;
    }
    .venture-structured-content iframe {
        max-width: 100%;
    }
}

/* Venture & Event detail: extra-small screens */
@media (max-width: 480px) {
    .venture-hero-section {
        margin-bottom: 10px;
    }
    .venture-cover-image {
        height: 20vh;
        min-height: 140px;
    }
    .venture-logo-container {
        width: 100px;
        height: 100px;
        margin: -50px auto 12px auto;
        padding: 4px;
    }
    .venture-logo, .venture-logo-placeholder {
        width: 92px;
        height: 92px;
    }
    .venture-logo-placeholder {
        font-size: 3rem;
    }
    .venture-info h1 {
        font-size: 1.6rem;
    }
    .venture-oneliner {
        font-size: 0.95rem;
    }
    .venture-meta-details {
        gap: 0.5rem;
    }
    .venture-meta-details span {
        font-size: 0.85rem;
    }
    .venture-main-content {
        padding: 0;
    }
    .gallery-item img {
        height: 150px;
    }
    .modal-content {
        margin: 5% auto;
        padding: 1.25rem;
    }
    .modal-content h3 {
        font-size: 1.1rem;
    }
}


/* ============================================== */
/* === NEW STYLES FOR VENTURE GALLERY         === */
/* ============================================== */

.venture-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.gallery-item img {
    width: 100%;
    height: 220px; /* Give all images a fixed height */
    object-fit: cover; /* Make images cover the area, cropping them uniformly */
    display: block;
    transition: transform 0.3s ease;
}


.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    color: var(--text-primary);
    padding: 1.5rem 1rem 1rem 1rem;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
    transform: translateY(0);
}



/* ===================================== */
/* === ENHANCEMENTS FOR ARTICLE PAGE === */
/* ===================================== */


/* Find this block in style.css and REPLACE it */

/* ===================================== */
/* === ENHANCEMENTS FOR ARTICLE PAGE === */
/* ===================================== */

/* Gallery grid — base */
.gallery-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
    max-width: 900px;
    border-radius: 10px;
    overflow: hidden;
}

/* Single image — full width, contained */
.gallery-grid--single {
    grid-template-columns: 1fr;
}
.gallery-grid--single a {
    display: block;
}
.gallery-grid--single img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    border-radius: 10px;
}

/* Two images — side by side */
.gallery-grid--duo {
    grid-template-columns: repeat(2, 1fr);
}

/* Three or more — 3 columns */
.gallery-grid--multi {
    grid-template-columns: repeat(3, 1fr);
}

/* Uniform sizing for duo + multi galleries */
.gallery-grid--duo a,
.gallery-grid--multi a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
.gallery-grid--duo img,
.gallery-grid--multi img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.gallery-grid--duo a:hover img,
.gallery-grid--multi a:hover img {
    transform: scale(1.03);
}

@media (max-width: 992px) {
    .gallery-grid--multi {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .gallery-grid--duo,
    .gallery-grid--multi {
        grid-template-columns: 1fr;
    }
    .gallery-grid--duo img,
    .gallery-grid--multi img {
        height: 200px;
    }
}

/* Spacing between adjacent galleries/videos */
.event-video-wrapper + .event-video-wrapper,
.gallery-grid + .gallery-grid,
.event-video-wrapper + .gallery-grid,
.gallery-grid + .event-video-wrapper {
    margin-top: 2rem;
}

/* Spacing after text content */
.content-body + .gallery-grid,
.content-body + .event-video-wrapper,
.cta-container + .gallery-grid,
.cta-container + .event-video-wrapper {
     margin-top: 2.5rem;
}


/* ========================================================= */
/* === STYLES FOR EVENT DETAIL PAGE (Add or Verify) === */
/* ========================================================= */

.event-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 8px; /* Added for a modern look */
}

.event-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-embed-fallback {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}


/* ========================================================= */
/* === STYLES FOR EVENT FLYER (FINAL & CORRECTED)        === */
/* ========================================================= */

.event-flyer-section {
    /* This rule can be removed as we will center the h3 directly */
}

/* This new, more specific rule solves the alignment issue. */
.event-flyer-section h3 {
    display: block; /* Make it a full-width block element */
    text-align: center; /* Center the text INSIDE the h3 element */
    border-bottom: none; /* Remove the underline from the generic .content-block h3 style */
    margin-bottom: 1.5rem; /* Add space between the title and the flyer image */
}

.event-flyer-image {
    max-width: auto; /* Override the 600px limit and let it fill the container */
    width: auto;
    height: auto;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    display: block; /* Use block and margin:auto for reliable centering */
    margin-left: auto;
    margin-right: auto;
}

/* ========================================================= */
/* === UTILITY STYLES (Add this new section)             === */
/* ========================================================= */

.page-bottom-link-container {
    margin: 3rem auto; /* Correctly uses margin for top/bottom and centers the block */
    text-align: center; /* Centers the button inside the block */
}


/* ========================================================= */
/* === STYLES FOR COOKIE CONSENT BANNER                  === */
/* ========================================================= */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--secondary-bg);
    border-top: 1px solid var(--border-color);
    padding: 1.5rem 2rem;
    z-index: 3000;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    
    /* Animation for sliding in */
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cookie-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.cookie-text a {
    color: var(--accent-color);
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 1rem;
    flex-shrink: 0; /* Prevents buttons from shrinking on small screens */
}

.cookie-buttons .cta-button {
    padding: 0.7rem 1.5rem; /* Slightly smaller buttons for the banner */
    font-size: 0.9rem;
}

/* --- Responsive Adjustments for the Cookie Banner --- */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 1.5rem;
    }

    .cookie-buttons {
        justify-content: center;
    }
}

/* Add this to the end of your style.css file */

/* ===================================== */
/* === 2-COLUMN GRID FOR EVENT LISTS === */
/* ===================================== */

.card-grid-2-col {
    display: grid;
    /* Creates two equal-width columns */
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem; /* The space between cards */
}

/* On screens smaller than 768px (tablets/phones), stack to a single column */
@media (max-width: 768px) {
    .card-grid-2-col {
        grid-template-columns: 1fr;
    }
}


/* Add to your main style.css */
.subsection-block { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
/* Find this rule in your style.css and replace it */

.cta-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center; /* This will center the button */
}

/* ── Article Section CTAs ── */
.article-cta {
    margin: 1.75rem 0 2rem;
    position: relative;
}
/* Decorative left accent line */
.article-cta::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    min-height: 24px;
    background: linear-gradient(180deg, var(--accent-color), rgba(var(--accent-color-rgb), 0.2));
    border-radius: 2px;
}
.article-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.6rem 0.8rem 1.35rem;
    margin-left: 1rem;
    background: rgba(var(--accent-color-rgb), 0.06);
    border: 1px solid rgba(var(--accent-color-rgb), 0.15);
    border-radius: 10px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}
/* Subtle shimmer on hover */
.article-cta-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(var(--accent-color-rgb), 0.06) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}
.article-cta-link:hover::after {
    transform: translateX(100%);
}
.article-cta-link:hover {
    background: rgba(var(--accent-color-rgb), 0.12);
    border-color: rgba(var(--accent-color-rgb), 0.3);
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
}
.article-cta-text {
    position: relative;
    z-index: 1;
}
.article-cta-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
    opacity: 0.7;
}
.article-cta-link:hover .article-cta-arrow {
    transform: translateX(4px);
    opacity: 1;
}

/* Subsection CTA — slightly smaller, softer presence */
.article-cta--sub::before {
    width: 2px;
    background: linear-gradient(180deg, rgba(var(--accent-color-rgb), 0.5), rgba(var(--accent-color-rgb), 0.1));
}
.article-cta--sub .article-cta-link {
    font-size: 0.88rem;
    padding: 0.65rem 1.35rem 0.65rem 1.15rem;
    background: rgba(var(--accent-color-rgb), 0.03);
    border-color: rgba(var(--accent-color-rgb), 0.1);
}
.article-cta--sub .article-cta-arrow {
    width: 16px;
    height: 16px;
}

/* Spacing with adjacent content */
.article-cta + .gallery-grid,
.article-cta + .event-video-wrapper {
    margin-top: 2.5rem;
}

/* Responsive */
@media (max-width: 600px) {
    .article-cta-link {
        font-size: 0.88rem;
        padding: 0.7rem 1.2rem 0.7rem 1.1rem;
        gap: 0.5rem;
    }
    .article-cta--sub .article-cta-link {
        font-size: 0.82rem;
    }
}

.content-block h2 { font-size: 2.5rem; color: var(--accent-color); margin-bottom: 1.5rem; }
.subsection-block h3 { font-size: 1.8rem; color: var(--text-primary); margin-bottom: 1rem; }

/* ================================================= */
/* ===  DEFINITIVE FIX FOR LIGHTBOX Z-INDEX ISSUE  === */
/* ================================================= */

/* The black overlay */
#lightboxOverlay {
  z-index: 9998 !important; 
}

/* The container for the image, arrows, and caption */
#lightbox {
  z-index: 9999 !important;
}

/* The loading spinner */
.lb-loader {
  z-index: 10000 !important;
}


#lightbox .lb-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Add the new white-space property */
.article-detail-content .content-body {
    font-size: 1.1rem;
    line-height: 1.8;
    white-space: pre-wrap; /* This is the magic line */
}

/* ================================ */
/* Auth pages                       */
/* ================================ */
.auth-container {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.auth-container h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}
.auth-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}
.form-group {
    margin-bottom: 1rem;
}
.form-errors, .field-errors {
    margin-bottom: 0.5rem;
}
.error-message {
    color: #EF4444;
    font-size: 0.85rem;
    margin: 0.25rem 0;
}
.auth-link {
    text-align: center;
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.auth-link a {
    color: var(--accent-color);
}

/* ================================ */
/* Tier badges                      */
/* ================================ */
.tier-badge { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; }
.badge-member { background: rgba(57,211,187,0.15); color: #39D3BB; }
.badge-member-plus { background: rgba(129,140,248,0.15); color: #818CF8; }
.badge-advisor { background: rgba(245,158,11,0.15); color: #F59E0B; }
.badge-guest { background: rgba(160,174,192,0.15); color: #A0AEC0; }
.badge-partner { background: rgba(236,72,153,0.15); color: #EC4899; }
.badge-staff { background: rgba(59,130,246,0.15); color: #3B82F6; }
.badge-admin { background: rgba(239,68,68,0.15); color: #EF4444; }
.agent-badge { background: rgba(99,102,241,0.18); color: #818CF8; border: 1px dashed rgba(99,102,241,0.4); }
.member-profile-agent-line { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.member-profile-agent-line a { color: var(--accent-color); text-decoration: none; }
.member-profile-agent-line a:hover { text-decoration: underline; }
.member-profile-agent-model { font-family: monospace; font-size: 0.78rem; opacity: 0.7; margin-left: 0.3rem; }
.article-byline-hint {
    position: absolute; top: 8px; right: 8px;
    background: rgba(99, 102, 241, 0.85); color: #fff;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
    padding: 0.18rem 0.5rem; border-radius: 4px; z-index: 2;
}
.member-profile-section-hint {
    margin-left: 0.5rem; font-size: 0.78rem; font-weight: 400;
    color: var(--text-secondary); font-style: italic;
}
.member-drafts-list { list-style: none; margin: 0; padding: 0; }
.member-drafts-item {
    padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.8rem;
}
.member-drafts-item:last-child { border-bottom: none; }
.member-drafts-link { color: var(--text-primary); font-weight: 500; text-decoration: none; }
.member-drafts-link:hover { color: var(--accent-color); }
.member-drafts-meta { font-size: 0.78rem; color: var(--text-secondary); }

/* ================================ */
/* ================================ */
/* Profile edit page                */
/* ================================ */
.profile-edit-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.profile-edit-page .form-fieldset { margin-bottom: 1.25rem; }
.profile-edit-page .form-row { display: grid; gap: 1rem; }
.profile-edit-page .form-row--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
    .profile-edit-page .form-row--two { grid-template-columns: 1fr; }
}

.profile-edit-current-picture {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1rem;
}
.profile-edit-current-picture img {
    width: 88px; height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--accent-color-rgb), 0.3);
}

.form-checkbox-label {
    display: flex; align-items: flex-start; gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem 0;
}
.form-checkbox-label input[type="checkbox"] {
    margin-top: 4px;
    width: 18px; height: 18px;
    accent-color: var(--accent-color);
}
.form-checkbox-label > span {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.form-checkbox-label .field-help { margin: 0; }

.member-link-delete-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: #f87171;
    font-size: 0.78rem;
    cursor: pointer;
    grid-column: 1 / -1;
    margin-top: 0.4rem;
}
.member-link-delete-toggle input[type="checkbox"] {
    accent-color: #f87171;
}

.profile-edit-actions {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
@media (max-width: 480px) {
    .profile-edit-actions { flex-direction: column-reverse; }
    .profile-edit-actions .cta-button,
    .profile-edit-actions .cta-button-outline { width: 100%; text-align: center; }
}

/* ================================ */
/* Advisor capabilities section     */
/* ================================ */
.member-profile-advisor {
    border-color: rgba(245, 158, 11, 0.3);
    background:
        linear-gradient(135deg, rgba(245, 158, 11, 0.04), transparent 60%),
        var(--secondary-bg);
}
.member-profile-advisor .member-profile-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-primary);
}
.member-profile-advisor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}
.member-profile-advisor-headline {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0.25rem 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.member-profile-advisor-description {
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: 0.92rem;
    margin: 0 0 1rem;
}
.member-profile-advisor-description p { margin: 0 0 0.6rem; }
.member-profile-advisor-description p:last-child { margin-bottom: 0; }
.member-profile-advisor-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.member-profile-advisor-topic {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 999px;
}

/* News-hero floating action button — top-right of the banner */
.news-hero-inner { position: relative; }
.news-hero-action {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.05rem;
    background: rgba(var(--accent-color-rgb), 0.12);
    border: 1px solid rgba(var(--accent-color-rgb), 0.4);
    border-radius: 999px;
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 5;
}
.news-hero-action:hover {
    background: var(--accent-color);
    color: var(--text-on-accent);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--accent-color-rgb), 0.35);
}
@media (max-width: 640px) {
    .news-hero-action {
        top: auto; right: 50%; transform: translateX(50%);
        bottom: -16px;
    }
    .news-hero-action:hover { transform: translateX(50%) translateY(-1px); }
}

/* Sidebar venture card stack       */
/* ================================ */
/* Bare vertical stack of the same .venture-card used on /ventures/.
   The list-page card is sized for a wide grid (180px cover, 120px
   floating logo at left:85%). In the narrow sidebar that geometry
   overflows the right edge and dwarfs the surrounding sidebar cards.
   The overrides below scope ONLY to the sidebar context — the list
   page is untouched.

   Targets a card height (~150-180px) consistent with the other
   sidebar-card panels (Connect, AI Agents, Communities). */
.sidebar-venture-card-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.sidebar-venture-card-stack .venture-card { width: 100%; }

/* Shorter cover for the narrow column. */
.sidebar-venture-card-stack .venture-card-cover { height: 110px; }

/* Smaller logo (72px instead of 120px) and pulled inward
   (left: 78% instead of 85%) so the right edge stays inside the
   card no matter how narrow the sidebar gets. */
.sidebar-venture-card-stack .venture-card-logo {
    width: 72px;
    height: 72px;
    left: 78%;
    padding: 4px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.sidebar-venture-card-stack .venture-card-logo img,
.sidebar-venture-card-stack .venture-card-logo-letter {
    border-radius: 9px;
}
.sidebar-venture-card-stack .venture-card-logo-letter { font-size: 1.4rem; }

/* Footer paddings: top reduced to match the smaller logo overhang
   (logo bottom sits at cover_bottom + 36px ≈ 36px overlap into footer). */
.sidebar-venture-card-stack .venture-card-footer {
    padding: 40px 18px 18px;
}
.sidebar-venture-card-stack .venture-card-name { font-size: 1.05rem; }
.sidebar-venture-card-stack .venture-card-oneliner { font-size: 0.82rem; }

/* ================================ */
/* Members-list right column        */
/* ================================ */
/* Same vertical-flex layout as .member-profile-sidebar so consecutive
   sidebar cards (Become a Member CTA, Partners, etc.) get consistent
   breathing room without needing per-card margin tweaks. */
.public-members-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ================================ */
/* Sidebar partner list             */
/* (members-list right column)      */
/* ================================ */
.sidebar-partner-list {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sidebar-partner-item { margin: 0; }
.sidebar-partner-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.sidebar-partner-link:hover {
    background: rgba(var(--accent-color-rgb), 0.06);
    border-color: rgba(var(--accent-color-rgb), 0.3);
}
.sidebar-partner-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--primary-bg);
    flex-shrink: 0;
}
.sidebar-partner-logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-weight: 700;
    font-family: var(--font-headings);
    font-size: 0.95rem;
}
.sidebar-partner-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.sidebar-partner-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-partner-oneliner {
    font-size: 0.72rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================ */
/* Dashboard 'Your benefits' card   */
/* ================================ */
.dashboard-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.dashboard-section-link {
    font-size: 0.85rem;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
}
.dashboard-section-link:hover { text-decoration: underline; }
.dashboard-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}
.dashboard-benefit-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.1rem 1rem;
    background: linear-gradient(158deg, var(--secondary-bg), rgba(var(--accent-color-rgb), 0.045));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-primary);
    transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.dashboard-benefit-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.5);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}
.dashboard-benefit-card--partner { border-top: 3px solid rgba(129, 140, 248, 0.65); }
.dashboard-benefit-card--venture { border-top: 3px solid rgba(var(--accent-color-rgb), 0.65); }
.dashboard-benefit-card--hub { border-top: 3px solid rgba(var(--accent-color-rgb), 0.65); }
.dashboard-benefit-head { display: flex; align-items: center; gap: 0.55rem; }
.dashboard-benefit-logo {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--primary-bg);
    flex-shrink: 0;
}
.dashboard-benefit-logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-weight: 700;
    font-family: var(--font-headings);
}
.dashboard-benefit-issuer {
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    line-height: 1.3;
}
.dashboard-benefit-issuer:hover { color: var(--accent-color); }
.dashboard-benefit-title {
    margin: 0.2rem 0 0;
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dashboard-benefit-desc {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dashboard-benefit-foot { margin-top: auto; padding-top: 0.75rem; }
.dashboard-benefit-code { display: flex; align-items: center; gap: 0.7rem; }
.dashboard-benefit-codeval {
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent-color);
    font-size: 0.95rem;
}
.dashboard-benefit-redeem {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    border: none;
}
.dashboard-benefit-soldout { font-size: 0.8rem; color: #EF4444; font-weight: 600; }
.dashboard-benefit-coupon {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.dashboard-benefit-coupon code {
    font-family: var(--font-headings);
    color: var(--accent-color);
    font-weight: 700;
}

/* ================================ */
/* Hub Benefits landing page        */
/* ================================ */
.hub-benefits-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.hub-benefits-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    justify-content: center;
}
.hub-benefits-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.hub-benefits-filter:hover {
    border-color: rgba(var(--accent-color-rgb), 0.4);
    color: var(--text-primary);
}
.hub-benefits-filter--active {
    background: rgba(var(--accent-color-rgb), 0.1);
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.hub-benefits-filter-count {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    color: var(--text-secondary);
}
.hub-benefits-filter--active .hub-benefits-filter-count {
    background: rgba(var(--accent-color-rgb), 0.18);
    color: var(--accent-color);
}

.hub-benefits-grid {
    display: grid;
    /* min(300px, 100%) lets columns shrink below 300px on narrow phones
       instead of overflowing the viewport. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.25rem;
}
.hub-benefit-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.hub-benefit-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.hub-benefit-card--venture {
    border-left: 3px solid rgba(var(--accent-color-rgb), 0.5);
}
.hub-benefit-card--partner {
    border-left: 3px solid rgba(129, 140, 248, 0.5);
}
.hub-benefit-card--expired { opacity: 0.55; }
.hub-benefit-card--eligible {
    border-color: rgba(var(--accent-color-rgb), 0.4);
    background:
        linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.05), transparent 50%),
        var(--secondary-bg);
}

.hub-benefit-issuer {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hub-benefit-issuer-logo {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--primary-bg);
    flex-shrink: 0;
}
.hub-benefit-issuer-logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-weight: 700;
    font-family: var(--font-headings);
}
.hub-benefit-issuer-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.hub-benefit-issuer-kind {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
}
.hub-benefit-card--venture .hub-benefit-issuer-kind { color: var(--accent-color); }
.hub-benefit-card--partner .hub-benefit-issuer-kind { color: #818CF8; }
.hub-benefit-issuer-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-benefit-title {
    margin: 0 0 0.55rem;
    font-family: var(--font-headings);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.hub-benefit-description {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
    flex: 1;
}
.hub-benefit-footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.hub-benefit-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    align-self: flex-start;
}
.hub-benefit-status--eligible {
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.12);
    border: 1px solid rgba(var(--accent-color-rgb), 0.35);
}
.hub-benefit-status--locked {
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
}
.hub-benefit-status--cta {
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.08);
    border: 1px solid rgba(var(--accent-color-rgb), 0.3);
}
.hub-benefit-status--cta:hover {
    background: var(--accent-color);
    color: var(--text-on-accent);
}
.hub-benefit-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.hub-benefit-tier-chip {
    font-size: 0.68rem;
    padding: 0.16rem 0.5rem;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 999px;
}

/* ================================ */
/* Member benefits (partner/venture)*/
/* ================================ */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.benefit-card {
    position: relative;
    padding: 1.25rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(var(--accent-color-rgb), 0.25);
    border-radius: 12px;
    transition: border-color 0.18s ease, transform 0.15s ease;
}
.benefit-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.5);
    transform: translateY(-2px);
}
.benefit-card--expired { opacity: 0.55; }
.benefit-card--inactive { opacity: 0.45; }
.benefit-card--outbound {
    border-color: rgba(129, 140, 248, 0.35);
    background:
        linear-gradient(135deg, rgba(129, 140, 248, 0.04), transparent 60%),
        rgba(255,255,255,0.02);
}
.benefit-card--outbound:hover { border-color: rgba(129, 140, 248, 0.6); }

.benefit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.benefit-card-direction {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color);
}
.benefit-card--outbound .benefit-card-direction { color: #818CF8; }
.benefit-card-status {
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 0.18rem 0.55rem;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
}
.benefit-card-status--expired { color: #f87171; background: rgba(248,113,113,0.08); }
.benefit-card-status--inactive { color: #6b7280; }
.benefit-card-title {
    margin: 0 0 0.55rem;
    font-family: var(--font-headings);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.benefit-card-description {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.benefit-card-description p:last-child { margin-bottom: 0; }
.benefit-card-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin: 0.65rem 0 0;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.benefit-card-tiers-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.2rem;
}
.benefit-card-tier-chip {
    font-size: 0.7rem;
    padding: 0.18rem 0.55rem;
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(var(--accent-color-rgb), 0.25);
    border-radius: 999px;
}
.benefit-card-coupon {
    margin-top: 0.65rem;
    padding: 0.55rem 0.75rem;
    background: rgba(var(--accent-color-rgb), 0.06);
    border: 1px dashed rgba(var(--accent-color-rgb), 0.4);
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.benefit-card-coupon-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.benefit-card-coupon code {
    font-family: var(--font-headings);
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.04em;
}

/* Internal/staff-only block visual cue */
.content-block--internal {
    border-left: 3px solid rgba(129, 140, 248, 0.5);
    padding-left: 1rem;
}
.content-block-tag {
    margin-left: 0.6rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #818CF8;
    background: rgba(129, 140, 248, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.3);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    vertical-align: middle;
}

/* Edit form: benefit row grid layout */
.benefit-form-fields {
    display: grid;
    grid-template-columns: 140px 1fr 80px;
    gap: 0.6rem;
    align-items: end;
}
.benefit-form-fields .form-group--wide { grid-column: 1 / -1; }
.benefit-form-fields .form-group { margin: 0; min-width: 0; }
@media (max-width: 700px) {
    .benefit-form-fields { grid-template-columns: 1fr; }
}

/* ================================ */
/* Venture team                     */
/* ================================ */
.venture-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}
.venture-team-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.18s ease, transform 0.15s ease, background 0.18s ease;
}
.venture-team-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.45);
    background: rgba(var(--accent-color-rgb), 0.04);
    transform: translateY(-2px);
}
.venture-team-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.venture-team-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    color: var(--accent-color);
    font-weight: 700;
    font-family: var(--font-headings);
}
.venture-team-body { min-width: 0; flex: 1; }
.venture-team-name {
    margin: 0 0 0.1rem;
    font-family: var(--font-headings);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.venture-team-role {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.venture-team-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.venture-team-badges .tier-badge,
.venture-team-badges .hub-role-badge {
    font-size: 0.65rem;
    padding: 0.18rem 0.5rem;
}

/* ================================ */
/* Venture external links            */
/* ================================ */
.venture-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.venture-link-item a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.venture-link-item a:hover { border-color: rgba(var(--accent-color-rgb), 0.4); background: rgba(var(--accent-color-rgb), 0.06); }
.venture-link-kind {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-color);
}
.venture-link-label { font-size: 0.85rem; color: var(--text-secondary); }
.venture-link-item a:hover .venture-link-label { color: var(--text-primary); }

/* Edit form */
.venture-link-form-grid { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.6rem; }
.venture-link-form-row {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.venture-link-form-fields {
    display: grid;
    grid-template-columns: 140px 200px 1fr 80px;
    gap: 0.6rem;
    align-items: end;
}
.venture-link-form-fields .form-group { margin: 0; }
.venture-link-form-fields .form-group label { display: block; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.03em; }
.venture-link-form-fields select,
.venture-link-form-fields input { width: 100%; }
.venture-link-delete {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: #f87171;
    margin-top: 0.4rem;
    cursor: pointer;
}
@media (max-width: 700px) {
    .venture-link-form-fields { grid-template-columns: 1fr 1fr; }
    .venture-link-form-fields .form-group--wide { grid-column: 1 / -1; }
}

/* Role badges (Admin, Staff) */
.hub-role-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.3rem;
    vertical-align: middle;
}
.hub-role-badge--admin {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}
.hub-role-badge--staff {
    background: rgba(99, 102, 241, 0.15);
    color: #6366F1;
}
.hub-role-badge--green {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.hub-role-badge--amber {
    background: rgba(246, 173, 85, 0.15);
    color: #F6AD55;
}
.hub-role-badge--red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.hub-role-badge--gray {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

/* ================================ */
/* Version badge                    */
/* ================================ */
.version-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.version-badge-icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    max-width: 14px;
    max-height: 14px;
    flex-shrink: 0;
    opacity: 0.5;
}
.version-badge--inline {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    cursor: default;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.version-badge--card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
}
.version-badge--card .version-badge-icon {
    width: 16px;
    height: 16px;
}
.version-badge-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.version-badge-label {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.8rem;
}
.version-badge-meta {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0.7;
}
a.version-badge--link {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
a.version-badge--link:hover {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.08);
    color: var(--accent-color);
}
a.version-badge--link:hover .version-badge-icon {
    opacity: 1;
    color: var(--accent-color);
}
.version-badge--card .version-badge-label a {
    color: var(--text-primary);
    text-decoration: none;
}
.version-badge--card .version-badge-label a:hover {
    color: var(--accent-color);
}

/* ================================ */
/* Version Timeline (History Page)  */
/* ================================ */
.vt-page-header {
    margin-bottom: 1.5rem;
}
.vt-page-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}
.vt-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.version-timeline {
    position: relative;
}

/* Each entry */
.vt-entry {
    display: flex;
    gap: 1rem;
    min-height: 60px;
}

/* Left connector (dot + line) */
.vt-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    flex-shrink: 0;
    padding-top: 0.35rem;
}
.vt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color);
    border: 2px solid var(--bg-primary, #0f0f0f);
    flex-shrink: 0;
    z-index: 1;
}
.vt-dot--latest {
    background: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2);
}
.vt-dot--creation {
    background: var(--text-secondary);
    width: 8px;
    height: 8px;
}
.vt-line {
    width: 2px;
    flex: 1;
    background: var(--border-color);
    margin-top: 4px;
}

/* Right content */
.vt-content {
    flex: 1;
    padding-bottom: 1.5rem;
    min-width: 0;
}
.vt-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.vt-version {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
}
.vt-entry--latest .vt-version {
    background: rgba(var(--accent-color-rgb), 0.1);
    border-color: rgba(var(--accent-color-rgb), 0.3);
    color: var(--accent-color);
}
.vt-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.vt-meta svg {
    opacity: 0.5;
    flex-shrink: 0;
}
.vt-comment {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.7;
}

/* Diff table */
.vt-diff {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.vt-diff-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.vt-diff-row:last-child {
    border-bottom: none;
}
.vt-diff-field {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 120px;
    flex-shrink: 0;
    font-size: 0.78rem;
}
.vt-diff-removed {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    text-decoration: line-through;
    font-size: 0.8rem;
    word-break: break-word;
}
.vt-diff-added {
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.06);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    font-size: 0.8rem;
    word-break: break-word;
}
.vt-diff-arrow {
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0.4;
    margin-top: 0.15rem;
}
.vt-translations-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    opacity: 0.7;
}
.vt-translations-note svg {
    opacity: 0.5;
}
.vt-no-changes {
    font-size: 0.78rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .vt-diff-row {
        flex-direction: column;
        gap: 0.2rem;
    }
    .vt-diff-field {
        min-width: 0;
    }
}

/* ================================ */
/* Skill tags                       */
/* ================================ */
.skill-tag { display: inline-block; background: rgba(57,211,187,0.1); color: #39D3BB; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.85rem; margin: 0.2rem; }

/* ================================ */
/* Dashboard                        */
/* ================================ */
.dashboard-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.stat-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
}
.stat-card h4 {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.stat-value {
    font-size: 1.2rem;
    font-weight: 600;
}
.text-accent { color: var(--accent-color); }
.text-muted { color: var(--text-secondary); }
.dashboard-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.dashboard-section h3 {
    margin-bottom: 1rem;
}

/* ================================ */
/* Hub Dashboard                    */
/* ================================ */
.hub-dashboard-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
    flex-wrap: wrap;
}
.hub-nav-tab {
    padding: 0.75rem 1.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    font-weight: 500;
}
.hub-nav-tab:hover {
    color: var(--text-primary);
}
.hub-nav-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.hub-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    border-radius: 10px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 0.35rem;
    vertical-align: middle;
    line-height: 1;
}
.hub-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}
.hub-chart-grid-single {
    grid-template-columns: 1fr;
}
.hub-chart-box {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
}
.hub-chart-box h4 {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.hub-chart-box-wide {
    grid-column: 1 / -1;
}
@media (max-width: 768px) {
    .hub-chart-grid {
        grid-template-columns: 1fr;
    }
}

/* Hub Dashboard — Page Override */
.hub-dashboard-page.page-content-section {
    padding: 2rem 2rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden;
}
.hub-dashboard-page.page-content-section > h2 {
    display: none;
}

/* Hub Dashboard — Hero Header */
.hub-hero {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-bottom: 3px solid var(--accent-color);
    border-radius: 12px 12px 0 0;
    padding: 2rem 2rem 1.5rem;
    margin-bottom: 1.5rem;
}
.hub-hero-text h2 {
    text-align: left;
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}
.hub-hero-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}
.hub-hero-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.hub-hero-pill {
    background: rgba(var(--accent-color-rgb), 0.08);
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
    border-radius: 50px;
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.hub-hero-pill-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hub-hero-pill-value {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 1rem;
}

/* Hub Dashboard — Hero (news-hero variant) */
.dashboard-hero {
    padding: 3.5rem 2rem 0;
}
.dashboard-hero .news-hero-inner {
    max-width: 800px;
}
.dashboard-hero .news-hero-subtitle {
    margin-bottom: 1.5rem;
}
.dashboard-hero .news-hero-stats {
    margin-bottom: 1.5rem;
}
.dashboard-hero .hub-dashboard-nav {
    justify-content: center;
    margin-bottom: 0;
    border-bottom: none;
    gap: 0.25rem;
}
.dashboard-hero .hub-nav-tab {
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
    border-radius: 6px 6px 0 0;
    border-bottom: 2px solid transparent;
}
.dashboard-hero .hub-nav-tab.active {
    background: rgba(255,255,255,0.04);
}
.dashboard-hero + .page-content-section {
    padding-top: 2rem;
}
@media (max-width: 600px) {
    .dashboard-hero {
        padding: 2rem 0.75rem 0;
    }
    .dashboard-hero .news-hero-title {
        font-size: 1.4rem;
    }
    .dashboard-hero .news-hero-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
    .dashboard-hero .news-hero-stats {
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    .dashboard-hero .news-hero-inner {
        max-width: 100%;
    }
    .dashboard-hero .hub-dashboard-nav {
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0 -0.75rem;
        padding: 0 0.75rem;
    }
    .dashboard-hero .hub-dashboard-nav::-webkit-scrollbar {
        display: none;
    }
    .dashboard-hero .hub-nav-tab {
        padding: 0.5rem 0.65rem;
        font-size: 0.72rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ========================================= */
/* Hub Dashboard — Responsive               */
/* ========================================= */

/* Nav tabs: horizontal scroll on small screens */
@media (max-width: 900px) {
    .hub-dashboard-nav,
    .dashboard-hero .hub-dashboard-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .hub-dashboard-nav::-webkit-scrollbar,
    .dashboard-hero .hub-dashboard-nav::-webkit-scrollbar {
        display: none;
    }
    .hub-nav-tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 0.6rem 0.9rem;
        font-size: 0.82rem;
    }
    /* Reduce page side padding at tablet */
    .hub-dashboard-page.page-content-section {
        padding: 1.5rem 1rem 2.5rem;
    }
    /* Hero stats: wrap and reduce gap */
    .news-hero-stats {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* Hub sections: reduce padding */
    .hub-section {
        padding: 1.15rem;
        margin-bottom: 1rem;
    }
    /* Stat cards — 3-column at tablet, then 2-column at 768 */
    .hub-section .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
    }
    /* Chart grid: single column when two-col layout stacks */
    .hub-chart-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    /* Articles card */
    .hub-articles-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem 1.15rem;
    }
    .hub-articles-header-pills {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .hub-article-card-list {
        padding: 0.5rem 0.85rem;
    }
    .hub-articles-card-footer {
        padding: 0.75rem 1.15rem;
    }
    /* Quick links: 2-column grid */
    .hub-quick-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .hub-quick-link {
        flex-direction: row;
        text-align: left;
        gap: 0.5rem;
        padding: 0.7rem;
        font-size: 0.85rem;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }
}

@media (max-width: 768px) {
    /* Page padding */
    .hub-dashboard-page.page-content-section {
        padding: 1rem 0.5rem 2rem;
    }
    /* Stat cards grid */
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .stat-card {
        padding: 0.85rem 0.75rem;
        border-radius: 8px;
        min-width: 0;
    }
    .stat-card h4 {
        font-size: 0.68rem;
        letter-spacing: 0.02em;
        margin-bottom: 0.3rem;
    }
    .stat-value {
        font-size: 1.3rem;
    }
    .stat-card-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 0.5rem;
    }
    .stat-card-icon svg {
        width: 15px;
        height: 15px;
    }
    /* Sections */
    .hub-section {
        padding: 0.85rem;
        margin-bottom: 0.75rem;
        border-radius: 8px;
    }
    .hub-section-header h3 {
        font-size: 1rem;
    }
    .hub-section .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    /* Charts */
    .hub-chart-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .hub-chart-box {
        padding: 0.85rem;
    }
    .hub-chart-box h4 {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
    }
    /* Info cards — redesigned for mobile */
    .hub-info-card {
        padding: 0;
        margin-bottom: 0.75rem;
        border-left: none;
        border: 1px solid rgba(var(--accent-color-rgb), 0.15);
        border-radius: 10px;
        background: rgba(var(--accent-color-rgb), 0.03);
        overflow: hidden;
    }
    .hub-info-card-title {
        font-size: 0.7rem;
        gap: 0.4rem;
        margin-bottom: 0;
        padding: 0.6rem 0.85rem;
        background: rgba(var(--accent-color-rgb), 0.06);
        border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.1);
    }
    .hub-info-card-title svg {
        width: 14px;
        height: 14px;
    }
    .hub-info-card-row {
        font-size: 0.85rem;
        padding: 0.45rem 0.85rem;
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .hub-info-card-row:last-of-type {
        border-bottom: none;
    }
    .hub-info-card-row strong {
        font-size: 0.95rem;
    }
    .hub-info-card-note {
        font-size: 0.7rem;
        margin: 0;
        padding: 0.4rem 0.85rem 0.55rem;
        border-top: 1px solid rgba(255,255,255,0.03);
    }
    /* Revenue link card */
    a.hub-info-card--link {
        padding: 0;
    }
    a.hub-info-card--link:hover {
        border-color: var(--accent-color);
    }
    .hub-info-card-arrow {
        width: 14px;
        height: 14px;
    }
    /* Quick links — keep row layout, just smaller */
    .hub-quick-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .hub-quick-link {
        flex-direction: row;
        text-align: left;
        gap: 0.5rem;
        padding: 0.65rem 0.6rem;
        font-size: 0.78rem;
        background: rgba(255,255,255,0.02);
        border: 1px solid var(--border-color);
        border-radius: 8px;
    }
    /* Article card title — allow wrapping at narrow widths */
    .hub-article-card-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.25;
    }
    /* Tables */
    .analytics-referrers-tbl {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .analytics-referrers-tbl thead,
    .analytics-referrers-tbl tbody,
    .analytics-referrers-tbl tfoot {
        min-width: 400px;
    }
    .analytics-referrers-tbl thead th {
        padding: 0.5rem 0.6rem;
        font-size: 0.7rem;
    }
    .analytics-referrers-tbl tbody td,
    .analytics-referrers-tbl tfoot td {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }
    /* Article image cards */
    .hub-article-card {
        height: 100px;
    }
    .hub-article-card-title {
        font-size: 0.85rem;
    }
    .hub-articles-card-header {
        padding: 1rem;
    }
    .hub-article-card-list {
        padding: 0.5rem 0.75rem;
    }
    /* Hero stats */
    .news-hero-stats {
        gap: 0.75rem;
    }
    .news-hero-stat-val {
        font-size: 1.1rem;
    }
    .news-hero-stat-lbl {
        font-size: 0.65rem;
    }
    /* Filters — stack on mobile */
    .hub-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .hub-filters .form-input {
        max-width: none;
    }
    /* Data tables */
    .hub-data-table th,
    .hub-data-table td {
        padding: 0.6rem 0.65rem;
        font-size: 0.82rem;
    }
    .hub-data-table th {
        font-size: 0.7rem;
    }
    /* Member cell — keep compact */
    .hub-member-cell {
        gap: 0.5rem;
    }
    /* Pagination */
    .hub-pagination {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    /* Activity feed */
    .activity-entry-rail {
        display: none;
    }
    .activity-entry-card {
        margin-left: 0;
    }
    .activity-entry-row {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
    .activity-entry-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    /* Events dashboard cards */
    .hub-event-card {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    /* Tighter page padding */
    .hub-dashboard-page.page-content-section {
        padding: 0.75rem 0.35rem 1.5rem;
    }
    /* Stack stat cards to single column — horizontal row layout */
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
    .stat-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 0.85rem;
        border-radius: 6px;
    }
    .stat-card-icon {
        margin-bottom: 0;
        width: 26px;
        height: 26px;
        flex-shrink: 0;
    }
    .stat-card-icon svg {
        width: 14px;
        height: 14px;
    }
    .stat-card h4 {
        margin-bottom: 0;
        font-size: 0.68rem;
        flex: 1;
        min-width: 0;
    }
    .stat-value {
        font-size: 1.1rem;
        margin-left: auto;
        flex-shrink: 0;
    }
    .hub-section .dashboard-stats {
        grid-template-columns: 1fr;
    }
    /* Sections even more compact */
    .hub-section {
        padding: 0.65rem;
        margin-bottom: 0.5rem;
    }
    /* Nav tabs smaller */
    .dashboard-hero .hub-nav-tab {
        padding: 0.4rem 0.5rem;
        font-size: 0.68rem;
    }
    /* Hero stats compact */
    .news-hero-stats {
        gap: 0.6rem;
    }
    .news-hero-stat-val {
        font-size: 1rem;
    }
    .news-hero-stat-lbl {
        font-size: 0.58rem;
    }
    /* Section header */
    .hub-section-header h3 {
        font-size: 0.88rem;
    }
    .hub-section-icon {
        width: 18px;
        height: 18px;
    }
    /* Charts */
    .hub-chart-box {
        padding: 0.6rem;
    }
    .hub-chart-box h4 {
        font-size: 0.7rem;
    }
    /* Info cards — ultra compact */
    .hub-info-card-title {
        font-size: 0.65rem;
        padding: 0.5rem 0.7rem;
    }
    .hub-info-card-title svg {
        width: 12px;
        height: 12px;
    }
    .hub-info-card-row {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
    .hub-info-card-row strong {
        font-size: 0.88rem;
    }
    .hub-info-card-note {
        font-size: 0.65rem;
        padding: 0.3rem 0.7rem 0.45rem;
    }
    /* Quick links single column */
    .hub-quick-links {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .hub-quick-link {
        flex-direction: row;
        text-align: left;
        padding: 0.6rem 0.75rem;
        font-size: 0.78rem;
    }
    /* Articles pills */
    .hub-articles-header-pills {
        gap: 0.25rem;
        flex-wrap: wrap;
    }
    .hub-articles-pill {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }
    /* Articles footer */
    .hub-articles-card-footer {
        padding: 0.65rem 0.75rem;
        font-size: 0.75rem;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    /* Article cards */
    .hub-article-card {
        height: 80px;
    }
    .hub-article-card-title {
        font-size: 0.78rem;
        -webkit-line-clamp: 1;
    }
    .hub-article-card-overlay {
        padding: 0.5rem 0.65rem;
    }
    .hub-article-category,
    .hub-status {
        font-size: 0.55rem;
        padding: 0.15rem 0.4rem;
    }
    .hub-article-card-meta {
        font-size: 0.65rem;
    }
    /* Section links — touch friendly */
    .hub-section-link {
        font-size: 0.78rem;
        display: block;
        text-align: center;
        padding: 0.65rem 0;
    }
    /* Hero stats: 2x2 grid on very small screens */
    .news-hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        text-align: center;
    }
    .news-hero-stat {
        padding: 0.35rem 0;
    }
}

/* Hub Dashboard — Two-Column Layout */
.hub-two-col {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
    align-items: start;
    min-width: 0;
}
.hub-two-col > * {
    min-width: 0;
}
@media (max-width: 900px) {
    .hub-two-col {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Hub Dashboard — Sections */
.hub-section {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.hub-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.hub-section-header h3 {
    margin: 0;
    font-size: 1.15rem;
}
.hub-section-icon {
    width: 22px;
    height: 22px;
    color: var(--accent-color);
    flex-shrink: 0;
}

/* ── Membership KPI Strip ── */
.membership-kpi-strip {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(var(--primary-bg-rgb), 0.4);
    border: 1px solid rgba(var(--accent-color-rgb), 0.06);
    border-radius: 10px;
    padding: 0.15rem 0;
    margin-bottom: 1.25rem;
}
.membership-kpi {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.5rem;
    gap: 0.15rem;
    transition: background 0.2s;
    min-width: 0;
}
.membership-kpi:first-child { border-radius: 10px 0 0 10px; }
.membership-kpi:last-child { border-radius: 0 10px 10px 0; }
.membership-kpi:hover { background: rgba(var(--accent-color-rgb), 0.04); }
.membership-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1;
}
.membership-kpi-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}
.membership-kpi-divider {
    width: 1px;
    height: 28px;
    background: var(--border-color);
    flex-shrink: 0;
}

/* ── Membership Content Grid (Tier + Revenue | Growth) ── */
.membership-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.membership-content-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.membership-content-right {
    display: flex;
    flex-direction: column;
}
.membership-chart-card {
    background: rgba(var(--primary-bg-rgb), 0.35);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
}
.membership-chart-card--growth {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.membership-chart-title {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
    font-weight: 600;
}
.membership-chart-title small {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.membership-chart-canvas-wrap {
    max-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.membership-chart-canvas-wrap canvas {
    max-height: 200px;
}
.membership-chart-canvas-wrap--wide {
    flex: 1;
    max-height: none;
}
.membership-chart-canvas-wrap--wide canvas {
    max-height: none;
    width: 100%;
}

/* ── Membership Responsive ── */
@media (max-width: 900px) {
    .membership-content-grid {
        grid-template-columns: 1fr;
    }
    .membership-chart-canvas-wrap {
        max-height: 180px;
    }
    .membership-chart-canvas-wrap canvas {
        max-height: 180px;
    }
}
@media (max-width: 600px) {
    .membership-kpi-strip {
        flex-wrap: wrap;
        border-radius: 10px;
    }
    .membership-kpi {
        flex: 0 0 calc(33.33% - 1px);
        padding: 0.5rem 0.25rem;
    }
    .membership-kpi:first-child { border-radius: 10px 0 0 0; }
    .membership-kpi:last-child { border-radius: 0 0 10px 0; }
    .membership-kpi:nth-child(5) { border-radius: 0 10px 0 0; }
    .membership-kpi:nth-child(9) { border-radius: 0 0 0 10px; }
    .membership-kpi-divider:nth-child(4),
    .membership-kpi-divider:nth-child(8) {
        display: none;
    }
    .membership-kpi-value {
        font-size: 1.15rem;
    }
    .membership-kpi-label {
        font-size: 0.58rem;
    }
    .membership-chart-card {
        padding: 0.75rem;
    }
    .membership-chart-title {
        font-size: 0.68rem;
    }
}
@media (max-width: 480px) {
    .membership-kpi {
        flex: 0 0 calc(50% - 1px);
    }
    .membership-kpi-value {
        font-size: 1.05rem;
    }
    .membership-kpi-divider:nth-child(2),
    .membership-kpi-divider:nth-child(6) {
        height: 0;
        width: 100%;
    }
}

/* Hub Dashboard — Stat Cards inside sections need darker bg */
.hub-section .stat-card {
    background: var(--primary-bg);
}
.hub-section .dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Hub Dashboard — Stat Card Icons */
.stat-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
}
.stat-card-icon svg {
    width: 18px;
    height: 18px;
}
.stat-card-icon--success {
    background: rgba(72, 187, 120, 0.1);
    color: #48BB78;
}
.stat-card-icon--warning {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}
.stat-card-icon--danger {
    background: rgba(245, 101, 101, 0.1);
    color: #F56565;
}

/* Hub Dashboard — Info Cards */
.hub-info-card {
    background: rgba(var(--accent-color-rgb), 0.04);
    border-left: 3px solid var(--accent-color);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.hub-info-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.hub-info-card-title svg {
    width: 16px;
    height: 16px;
    color: var(--accent-color);
}
.hub-info-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.95rem;
}
.hub-info-card-row span {
    color: var(--text-secondary);
}
.hub-info-card-note {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 0.5rem;
    margin-bottom: 0;
}
a.hub-info-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
a.hub-info-card--link:hover {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.08);
}
.hub-info-card-arrow {
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}
a.hub-info-card--link:hover .hub-info-card-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* Hub Dashboard — Period Filter Pills */
.hub-period-pills {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.hub-period-pill {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 20px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.hub-period-pill:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-color-rgb), 0.3);
    background: rgba(var(--accent-color-rgb), 0.06);
}
.hub-period-pill--active {
    color: var(--text-on-accent);
    background: var(--accent-color);
    border-color: var(--accent-color);
}
.hub-period-pill--active:hover {
    color: var(--text-on-accent);
    background: var(--accent-color);
    border-color: var(--accent-color);
}

/* ── Analytics Timeframe Selector ── */
.analytics-tf-bar {
    margin-bottom: 1.5rem;
}
.analytics-tf-pills {
    display: flex;
    gap: 2px;
    background: rgba(var(--primary-bg-rgb), 0.5);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
    flex-wrap: wrap;
}
.analytics-tf-pill {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
}
.analytics-tf-pill:hover {
    color: var(--text-primary);
    background: rgba(var(--accent-color-rgb), 0.06);
}
.analytics-tf-pill--active {
    background: var(--accent-color);
    color: var(--text-on-accent);
    font-weight: 600;
}
.analytics-tf-pill--active:hover {
    background: var(--accent-color);
    color: var(--text-on-accent);
}
.analytics-tf-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.analytics-tf-date {
    background: rgba(var(--primary-bg-rgb), 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    font-family: var(--font-primary);
}
.analytics-tf-date:focus {
    outline: none;
    border-color: rgba(var(--accent-color-rgb), 0.3);
}
.analytics-tf-date-sep {
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 0.8rem;
}
.analytics-tf-apply {
    background: var(--accent-color);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    padding: 0.4rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.analytics-tf-apply:hover {
    background: #2CBBA5;
}
@media (max-width: 600px) {
    .analytics-tf-pills {
        gap: 1px;
    }
    .analytics-tf-pill {
        font-size: 0.68rem;
        padding: 0.35rem 0.55rem;
    }
}

/* ── Analytics Summary Row ── */
/* ── Analytics Summary Cards ── */
.analytics-summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.analytics-summary-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow: hidden;
}
/* Subtle geometric accent — diagonal corner stripe */
.analytics-summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(
        135deg,
        transparent 50%,
        rgba(var(--accent-color-rgb), 0.04) 50%
    );
    border-radius: 0 12px 0 0;
    pointer-events: none;
}
/* Bottom edge glow line */
.analytics-summary-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--accent-color-rgb), 0.2) 30%,
        rgba(var(--accent-color-rgb), 0.2) 70%,
        transparent
    );
    pointer-events: none;
}
.analytics-summary-card--views {
    padding-bottom: 1rem;
}
/* Views card: stronger top-left accent bar */
.analytics-summary-card--views::before {
    width: 100px;
    height: 100px;
}
.analytics-summary-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.analytics-summary-card-header svg {
    width: 16px;
    height: 16px;
    color: var(--accent-color);
    opacity: 0.7;
}
.analytics-summary-bignum {
    font-size: 2.6rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1;
    margin: 0;
    color: var(--text-primary);
}
/* Icon container for compact cards */
.analytics-summary-card-icon {
    position: absolute;
    bottom: 1rem;
    right: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--accent-color-rgb), 0.08);
    border: 1px solid rgba(var(--accent-color-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.analytics-summary-card-icon svg {
    width: 18px;
    height: 18px;
    color: var(--accent-color);
    opacity: 0.6;
}
/* Live sessions pulse dot */
.analytics-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    position: absolute;
    top: 1.35rem;
    right: 1.5rem;
    animation: analytics-pulse 1.5s ease-in-out infinite;
}
@keyframes analytics-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(var(--accent-color-rgb), 0); }
}
/* Label beneath big number */
.analytics-summary-sublabel {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.65;
    margin-top: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Lazy-load placeholder */
.analytics-lazy-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    min-height: 60px;
}
.analytics-lazy-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: analytics-spin 0.6s linear infinite;
}
@keyframes analytics-spin {
    to { transform: rotate(360deg); }
}

/* Views grid (4-cell) */
.analytics-views-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: rgba(var(--primary-bg-rgb), 0.35);
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.06);
}
.analytics-views-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.65rem 0.75rem 0.55rem;
    border-right: 1px solid var(--border-color);
    position: relative;
    transition: background 0.2s;
}
.analytics-views-cell:hover {
    background: rgba(var(--accent-color-rgb), 0.04);
}
.analytics-views-cell:first-child {
    border-radius: 8px 0 0 8px;
}
.analytics-views-cell:last-child {
    border-right: none;
    border-radius: 0 8px 8px 0;
}
.analytics-views-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    font-weight: 500;
}
.analytics-views-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1.2;
    color: var(--text-primary);
}
.analytics-views-cell:first-child .analytics-views-value {
    color: var(--accent-color);
}
.analytics-views-unique {
    font-size: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.analytics-views-unique::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(var(--accent-color-rgb), 0.35);
    flex-shrink: 0;
}

/* ── Traffic Interval Pills ── */
.analytics-interval-pills {
    display: flex;
    gap: 2px;
    margin-left: auto;
    background: rgba(var(--primary-bg-rgb), 0.5);
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--border-color);
}
.analytics-interval-pill {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.analytics-interval-pill:hover {
    color: var(--text-color);
    background: rgba(var(--accent-color-rgb), 0.08);
}
.analytics-interval-pill--active {
    background: var(--accent-color);
    color: var(--text-on-accent, #0a0f18);
    font-weight: 600;
}
.analytics-interval-pill--active:hover {
    background: var(--accent-color);
    color: var(--text-on-accent, #0a0f18);
}

/* ── Bot Toggle Switch ── */
.analytics-bot-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    user-select: none;
    margin-left: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.analytics-bot-toggle input {
    display: none;
}
.analytics-bot-toggle-track {
    width: 32px;
    height: 18px;
    background: rgba(var(--primary-bg-rgb), 0.6);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    position: relative;
    transition: all 0.25s;
}
.analytics-bot-toggle-thumb {
    display: block;
    width: 12px;
    height: 12px;
    background: var(--text-secondary);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.25s;
}
.analytics-bot-toggle input:checked ~ .analytics-bot-toggle-track {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}
.analytics-bot-toggle input:checked ~ .analytics-bot-toggle-track .analytics-bot-toggle-thumb {
    transform: translateX(14px);
    background: #ef4444;
}
.analytics-bot-toggle svg {
    opacity: 0.5;
}
.analytics-bot-toggle-label {
    display: inline;
}

/* ── Bot Categories Grid ── */
.analytics-bot-cats-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ── Bot Category Badges ── */
.analytics-bot-cat-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.analytics-bot-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.72rem;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    background: rgba(var(--primary-bg-rgb), 0.5);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.analytics-bot-cat-badge strong {
    color: var(--text-color);
    font-weight: 600;
}
.analytics-bot-cat-badge--search_engine { border-color: rgba(57,211,187,0.3); color: #39D3BB; }
.analytics-bot-cat-badge--seo_tool { border-color: rgba(99,102,241,0.3); color: #6366f1; }
.analytics-bot-cat-badge--social_media { border-color: rgba(59,130,246,0.3); color: #3b82f6; }
.analytics-bot-cat-badge--ai_crawler { border-color: rgba(245,158,11,0.3); color: #f59e0b; }
.analytics-bot-cat-badge--security_scanner { border-color: rgba(239,68,68,0.3); color: #ef4444; }
.analytics-bot-cat-badge--monitoring { border-color: rgba(139,92,246,0.3); color: #8b5cf6; }
.analytics-bot-cat-badge--other_bot { border-color: rgba(107,114,128,0.3); color: #6b7280; }

/* ── Security Summary Card (on analytics page) ── */
/* ── Security Summary Card ── */
.analytics-security-summary-card {
    border-left: 3px solid #ef4444;
    position: relative;
}
/* Override the accent corner to use red for security */
.analytics-security-summary-card::before {
    background: linear-gradient(
        135deg,
        transparent 50%,
        rgba(239, 68, 68, 0.05) 50%
    );
}
.analytics-security-summary-card::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(239, 68, 68, 0.15) 30%,
        rgba(239, 68, 68, 0.15) 70%,
        transparent
    );
}
.analytics-security-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s;
}
.analytics-security-link:hover {
    opacity: 0.9;
}
.analytics-security-arrow {
    margin-left: auto;
    opacity: 0.4;
    transition: transform 0.25s, opacity 0.25s;
}
.analytics-security-link:hover .analytics-security-arrow {
    opacity: 0.8;
    transform: translateX(3px);
}
.analytics-security-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    text-align: center;
    background: rgba(var(--primary-bg-rgb), 0.35);
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.06);
}
.analytics-security-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--border-color);
    transition: background 0.2s;
}
.analytics-security-summary-item:last-child {
    border-right: none;
}
.analytics-security-summary-item:first-child {
    border-radius: 8px 0 0 8px;
}
.analytics-security-summary-item:last-child {
    border-radius: 0 8px 8px 0;
}
.analytics-security-summary-item:hover {
    background: rgba(239, 68, 68, 0.03);
}
.analytics-security-summary-item > span:first-child {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1;
}
.analytics-security-summary-item > span:nth-child(2) {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    font-weight: 500;
}
.analytics-security-summary-item > small {
    font-size: 0.62rem;
    color: var(--text-secondary);
    opacity: 0.55;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}
.analytics-security-summary-item > small::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.3);
    flex-shrink: 0;
}

/* ── Engagement Summary Grid ── */
.engagement-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: rgba(var(--primary-bg-rgb), 0.35);
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.06);
}
.engagement-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.85rem 0.5rem;
    border-right: 1px solid var(--border-color);
    transition: background 0.2s;
}
.engagement-summary-item:last-child {
    border-right: none;
}
.engagement-summary-item:first-child { border-radius: 8px 0 0 8px; }
.engagement-summary-item:last-child { border-radius: 0 8px 8px 0; }
.engagement-summary-item:hover {
    background: rgba(var(--accent-color-rgb), 0.04);
}
.engagement-summary-item svg {
    color: var(--accent-color);
    opacity: 0.6;
    margin-bottom: 0.15rem;
}
.engagement-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--text-primary);
    line-height: 1;
}
.engagement-summary-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 500;
}
@media (max-width: 600px) {
    .engagement-summary-grid {
        grid-template-columns: 1fr;
    }
    .engagement-summary-item {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.65rem 0.85rem;
    }
    .engagement-summary-item:first-child { border-radius: 8px 8px 0 0; }
    .engagement-summary-item:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }
    .engagement-summary-value { font-size: 1.2rem; }
}

/* ── Attack Summary Cards ── */
.analytics-attack-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.analytics-attack-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: rgba(var(--primary-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.analytics-attack-stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1;
}
.analytics-attack-stat--ssh { color: #ef4444; }
.analytics-attack-stat--nginx { color: #f59e0b; }
.analytics-attack-stat-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.25rem;
}
.analytics-attack-stat-sub {
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-top: 0.15rem;
}
.analytics-attack-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
.analytics-attack-table-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Nginx category badge colors */
.analytics-bot-cat-badge--wp_probe { border-color: rgba(239,68,68,0.3); color: #ef4444; }
.analytics-bot-cat-badge--env_probe { border-color: rgba(245,158,11,0.3); color: #f59e0b; }
.analytics-bot-cat-badge--admin_probe { border-color: rgba(239,68,68,0.3); color: #ef4444; }
.analytics-bot-cat-badge--sql_injection { border-color: rgba(220,38,38,0.4); color: #dc2626; }
.analytics-bot-cat-badge--path_traversal { border-color: rgba(220,38,38,0.3); color: #dc2626; }
.analytics-bot-cat-badge--scanner { border-color: rgba(139,92,246,0.3); color: #8b5cf6; }
.analytics-bot-cat-badge--shellshock { border-color: rgba(220,38,38,0.4); color: #dc2626; }
.analytics-bot-cat-badge--failed_password { border-color: rgba(239,68,68,0.3); color: #ef4444; }
.analytics-bot-cat-badge--invalid_user { border-color: rgba(245,158,11,0.3); color: #f59e0b; }
.analytics-bot-cat-badge--break_in { border-color: rgba(220,38,38,0.4); color: #dc2626; }

/* ── Analytics Responsive ── */
@media (max-width: 900px) {
    .analytics-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .analytics-summary-card-icon {
        display: none;
    }
    .analytics-security-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .analytics-views-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .analytics-views-cell:nth-child(2) {
        border-right: none;
        border-radius: 0 8px 0 0;
    }
    .analytics-views-cell:first-child {
        border-radius: 8px 0 0 0;
    }
    .analytics-views-cell:nth-child(3) {
        border-radius: 0 0 0 8px;
    }
    .analytics-views-cell:last-child {
        border-radius: 0 0 8px 0;
    }
    .analytics-views-cell:nth-child(1),
    .analytics-views-cell:nth-child(2) {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 0.75rem;
    }
    .analytics-interval-pills {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    .analytics-bot-toggle {
        margin-left: 0;
    }
    .analytics-bot-cats-grid {
        grid-template-columns: 1fr;
    }
    .analytics-attack-tables {
        grid-template-columns: 1fr;
    }
    .analytics-attack-summary {
        grid-template-columns: 1fr;
    }
    .analytics-security-summary-grid {
        grid-template-columns: 1fr;
    }
    .analytics-security-summary-item {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
    }
    .analytics-security-summary-item:first-child {
        border-radius: 8px 8px 0 0;
    }
    .analytics-security-summary-item:last-child {
        border-bottom: none;
        border-radius: 0 0 8px 8px;
    }
}

/* =================================================================== */
/* LIVE DASHBOARD                                                      */
/* =================================================================== */

/* ── Summary Strip ── */
.live-summary-strip {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.live-summary-strip::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb), 0.2) 30%, rgba(var(--accent-color-rgb), 0.2) 70%, transparent);
}
.live-summary-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.live-summary-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    animation: analytics-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.live-summary-value {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--text-primary);
    line-height: 1;
}
.live-summary-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}
.live-summary-page {
    font-size: 0.8rem;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.08);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-summary-divider {
    width: 1px;
    height: 28px;
    background: var(--border-color);
    flex-shrink: 0;
}
.live-summary-refresh {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.live-refresh-indicator {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: all 0.3s;
}
.live-refresh-indicator.live-refreshing {
    opacity: 1;
    color: var(--accent-color);
    animation: analytics-spin 0.6s linear infinite;
}

/* ── Main Grid ── */
.live-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}

/* ── Visitors Table ── */
.live-visitors-section {
    min-height: 300px;
}
.live-visitors-table-wrap {
    overflow-x: auto;
}
.live-visitors-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.live-visitors-tbl th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    white-space: nowrap;
}
.live-visitors-tbl td {
    padding: 0.6rem 0.65rem;
    border-bottom: 1px solid rgba(var(--primary-bg-rgb), 0.4);
    vertical-align: middle;
}
.live-visitor-row {
    transition: background 0.2s;
}
.live-visitor-row:hover {
    background: rgba(var(--accent-color-rgb), 0.04);
}

/* Visitor identity */
.live-visitor-identity {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}
.live-visitor-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.live-visitor-badge--user {
    background: rgba(var(--accent-color-rgb), 0.12);
    color: var(--accent-color);
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
}
.live-visitor-badge--anon {
    background: rgba(var(--primary-bg-rgb), 0.5);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.live-visitor-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8rem;
}
.live-visitor-anon {
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 0.72rem;
}
.live-visitor-ip {
    font-size: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.6;
    font-family: monospace;
    padding-left: 26px;
}

/* Country flag (text-based ISO code) */
.live-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(var(--accent-color-rgb), 0.08);
    color: var(--accent-color);
    border: 1px solid rgba(var(--accent-color-rgb), 0.12);
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    letter-spacing: 0.04em;
    min-width: 26px;
    text-align: center;
}
.live-flag-sm {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Device badge */
.live-device-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.live-device-badge svg {
    opacity: 0.6;
}
.live-device-badge--desktop svg { color: #6366f1; }
.live-device-badge--mobile svg { color: #f59e0b; }
.live-device-badge--tablet svg { color: #10b981; }

/* Current page */
.live-current-page {
    font-size: 0.75rem;
    color: var(--text-primary);
    display: block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-referrer {
    display: block;
    font-size: 0.62rem;
    color: var(--text-secondary);
    opacity: 0.6;
    margin-top: 0.1rem;
}
.live-page-count {
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--accent-color);
    font-size: 0.9rem;
}
.live-duration {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: monospace;
    white-space: nowrap;
}

/* ── Page View Stream ── */
.live-stream-section {
    max-height: 420px;
    display: flex;
    flex-direction: column;
}
.live-stream-list {
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
}
.live-stream-item {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(var(--primary-bg-rgb), 0.3);
    font-size: 0.78rem;
    transition: background 0.3s, opacity 0.5s;
}
.live-stream-item--new {
    animation: live-fade-in 0.5s ease-out;
    background: rgba(var(--accent-color-rgb), 0.04);
}
@keyframes live-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.live-stream-time {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-family: monospace;
    opacity: 0.7;
}
.live-stream-url {
    font-size: 0.75rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-stream-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    color: var(--text-secondary);
}
.live-stream-user {
    font-weight: 500;
    color: var(--accent-color);
    opacity: 0.8;
}

/* ── Activity Stream ── */
.live-activity-section {
    max-height: 380px;
    display: flex;
    flex-direction: column;
}
.live-activity-list {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}
.live-activity-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.15rem 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--primary-bg-rgb), 0.3);
    font-size: 0.78rem;
    transition: background 0.3s;
}
.live-activity-action {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    align-self: center;
    /* Default */
    background: rgba(var(--primary-bg-rgb), 0.5);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.live-activity-action--create { background: rgba(16,185,129,0.1); color: #10b981; border-color: rgba(16,185,129,0.2); }
.live-activity-action--edit { background: rgba(99,102,241,0.1); color: #6366f1; border-color: rgba(99,102,241,0.2); }
.live-activity-action--delete { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.2); }
.live-activity-action--publish { background: rgba(var(--accent-color-rgb),0.1); color: var(--accent-color); border-color: rgba(var(--accent-color-rgb),0.2); }
.live-activity-action--approve { background: rgba(16,185,129,0.1); color: #10b981; border-color: rgba(16,185,129,0.2); }
.live-activity-action--reject { background: rgba(245,158,11,0.1); color: #f59e0b; border-color: rgba(245,158,11,0.2); }
.live-activity-action--login { background: rgba(99,102,241,0.1); color: #6366f1; border-color: rgba(99,102,241,0.2); }
.live-activity-action--logout { background: rgba(var(--primary-bg-rgb),0.5); color: var(--text-secondary); border-color: var(--border-color); }
.live-activity-action--register { background: rgba(var(--accent-color-rgb),0.1); color: var(--accent-color); border-color: rgba(var(--accent-color-rgb),0.2); }
.live-activity-action--translate { background: rgba(139,92,246,0.1); color: #8b5cf6; border-color: rgba(139,92,246,0.2); }
.live-activity-action--ai_review { background: rgba(236,72,153,0.1); color: #ec4899; border-color: rgba(236,72,153,0.2); }
.live-activity-action--email { background: rgba(59,130,246,0.1); color: #3b82f6; border-color: rgba(59,130,246,0.2); }
.live-activity-desc {
    color: var(--text-primary);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-activity-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* ── Empty State ── */
.live-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    text-align: center;
}
.live-empty-state svg {
    opacity: 0.3;
    margin-bottom: 0.75rem;
}
.live-empty-state p {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
}
.live-empty-state--sm {
    padding: 1.5rem 1rem;
}
.live-empty-state--sm p {
    font-size: 0.8rem;
}

/* ── Live Dashboard Responsive ── */
@media (max-width: 1000px) {
    .live-grid {
        grid-template-columns: 1fr;
    }
    .live-stream-section,
    .live-activity-section {
        max-height: none;
    }
    .live-stream-list,
    .live-activity-list {
        max-height: 300px;
    }
}
@media (max-width: 600px) {
    .live-summary-strip {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .live-summary-divider {
        display: none;
    }
    .live-summary-page {
        max-width: 180px;
    }
    .live-visitors-tbl {
        font-size: 0.75rem;
    }
    .live-visitor-ip {
        display: none;
    }
    .live-current-page {
        max-width: 150px;
    }
}

/* Hub Dashboard — Section Links */
.hub-section-link {
    display: inline-block;
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    padding-top: 0.5rem;
    transition: opacity 0.2s;
}
.hub-section-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Hub Dashboard — Quick Links */
.hub-quick-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hub-quick-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s;
}
.hub-quick-link:hover {
    background: rgba(var(--accent-color-rgb), 0.08);
    color: var(--accent-color);
}
.hub-quick-link svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.hub-quick-link:hover svg {
    color: var(--accent-color);
}

.hub-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.hub-filters .form-input {
    flex: 1;
    min-width: 150px;
    max-width: 250px;
}
.hub-table-wrap {
    overflow-x: auto;
}
.hub-data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--secondary-bg);
    border-radius: 10px;
    overflow: hidden;
}
.hub-data-table th,
.hub-data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.hub-data-table th {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
}
.hub-data-table tr:last-child td {
    border-bottom: none;
}
.hub-member-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.hub-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.hub-member-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--accent-color);
    font-weight: 600;
    flex-shrink: 0;
}
.hub-member-avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}
.hub-status {
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}
.hub-status-active { background: rgba(57,211,187,0.15); color: #39D3BB; }
.hub-status-pending { background: rgba(255,193,7,0.15); color: #ffc107; }
.hub-status-verifying { background: rgba(74,158,255,0.16); color: #4a9eff; }
.hub-status-expired { background: rgba(253,126,20,0.15); color: #fd7e14; }
.hub-status-cancelled { background: rgba(220,53,69,0.15); color: #dc3545; }
.hub-btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
}
.hub-pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
}

/* ── Filter button (dashboard-scoped, smaller than landing CTA) ── */
.hub-filter-btn {
    padding: 0.55rem 1.4rem;
    font-size: 0.88rem;
    flex-shrink: 0;
}

/* ── Members Mobile Card View ── */
.members-card-mobile {
    display: none;
}
.member-card-m {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s;
}
.member-card-m:hover {
    border-color: rgba(var(--accent-color-rgb), 0.25);
}
.member-card-m-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.member-card-m-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.member-card-m-avatar--fallback {
    background: var(--primary-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--accent-color);
    font-weight: 600;
}
.member-card-m-identity {
    flex: 1;
    min-width: 0;
}
.member-card-m-name {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.member-card-m-email {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.member-card-m-edit {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: rgba(var(--accent-color-rgb), 0.06);
    border: 1px solid rgba(var(--accent-color-rgb), 0.1);
    flex-shrink: 0;
    transition: all 0.2s;
}
.member-card-m-edit:hover {
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.12);
    border-color: rgba(var(--accent-color-rgb), 0.25);
}
.member-card-m-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(var(--primary-bg-rgb), 0.3);
    align-items: center;
}
.member-card-m-badges .hub-role-badge,
.member-card-m-badges .tier-badge,
.member-card-m-badges .hub-status {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
}
.member-card-m-login {
    font-size: 0.65rem;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-left: auto;
}

/* Switch: table on desktop, cards on mobile */
@media (max-width: 768px) {
    .members-table-desktop {
        display: none;
    }
    .members-card-mobile {
        display: block;
    }
    /* Filters: full width button */
    .hub-filter-btn {
        width: 100%;
        text-align: center;
    }
    /* Pagination compact */
    .hub-pagination {
        gap: 0.5rem;
        font-size: 0.85rem;
    }
    .hub-pagination .cta-button-outline {
        padding: 0.4rem 0.8rem;
        font-size: 0.78rem;
    }
    /* Top members tables: more compact */
    .analytics-referrers-tbl td,
    .analytics-referrers-tbl th {
        font-size: 0.78rem;
        padding: 0.4rem 0.5rem;
    }
    /* Edit card responsive */
    .hub-edit-card {
        padding: 1.25rem;
        max-width: 100%;
    }
    .hub-edit-header {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    .hub-edit-actions {
        flex-direction: column;
    }
    .hub-edit-actions .cta-button,
    .hub-edit-actions .cta-button-outline {
        width: 100%;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .member-card-m {
        padding: 0.7rem 0.8rem;
    }
    .member-card-m-avatar {
        width: 32px;
        height: 32px;
    }
    .member-card-m-name {
        font-size: 0.82rem;
    }
    .member-card-m-badges .hub-role-badge,
    .member-card-m-badges .tier-badge,
    .member-card-m-badges .hub-status {
        font-size: 0.6rem;
        padding: 0.12rem 0.4rem;
    }
}

.hub-edit-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 2rem;
    max-width: 600px;
}
.hub-edit-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.hub-edit-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
}
.form-error {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.hub-inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.hub-input-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    max-width: 150px;
}
.hub-btn-danger {
    background: rgba(220,53,69,0.15);
    color: #dc3545;
    border: 1px solid rgba(220,53,69,0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}
.hub-btn-danger:hover {
    background: rgba(220,53,69,0.25);
}
.hub-add-member-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.hub-autocomplete-wrap {
    position: relative;
    flex: 1;
    min-width: 250px;
}
.hub-autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}
.hub-ac-item {
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.hub-ac-item:hover {
    background: var(--primary-bg);
}
.hub-ac-item:last-child {
    border-bottom: none;
}
.hub-ac-empty {
    cursor: default;
    color: var(--text-secondary);
}
.hub-placeholder {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    max-width: 500px;
    margin: 2rem auto;
}
.hub-placeholder h3 {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}
.hub-placeholder p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ================================ */
/* Profile                          */
/* ================================ */
.profile-picture { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-color); }
.profile-picture-placeholder { width: 120px; height: 120px; border-radius: 50%; background: var(--secondary-bg); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--accent-color); border: 3px solid var(--border-color); }
.profile-preview {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.profile-header {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.profile-header-info h2 {
    margin-bottom: 0.25rem;
}
.profile-section {
    margin-top: 1.5rem;
}
.profile-section h3 {
    margin-bottom: 0.5rem;
}
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.field-help {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.form-checkbox {
    width: auto;
    margin-right: 0.5rem;
}

/* ================================ */
/* Member Profile Page (Private)    */
/* ================================ */
.member-profile-page .mp-hero {
    margin-bottom: 100px;
}
.mp-hero-bg {
    width: 100%;
    height: 35vh;
    max-height: 400px;
    min-height: 250px;
    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--primary-bg) 100%);
    border-bottom: 3px solid var(--accent-color);
}
.mp-avatar-container {
    border-radius: 50%;
}
.mp-avatar {
    border-radius: 50%;
    object-fit: cover;
}
.mp-avatar-placeholder {
    border-radius: 50%;
}
.mp-info-bar {
    margin-top: 1.5rem;
}
.mp-linkedin-link {
    color: var(--accent-color);
    font-weight: 500;
    font-size: 1.1rem;
}
.mp-linkedin-link:hover {
    text-decoration: underline;
}
.mp-actions {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 768px) {
    .member-profile-page .mp-hero {
        margin-bottom: 20px;
    }
    .mp-hero-bg {
        height: 25vh;
        min-height: 180px;
    }
    .member-profile-page .mp-avatar-container {
        position: static;
        transform: none;
        width: 128px;
        height: 128px;
        margin: -64px auto 20px auto;
        padding: 5px;
    }
    .member-profile-page .mp-avatar,
    .member-profile-page .mp-avatar-placeholder {
        width: 118px;
        height: 118px;
    }
    .mp-actions {
        justify-content: center;
    }
}

.event-history-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* ================================ */
/* Member Directory                 */
/* ================================ */
.directory-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    align-items: center;
}
.directory-filters .form-input {
    flex: 1;
    min-width: 150px;
}
.directory-filters .cta-button {
    flex-shrink: 0;
}
.member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
}
.member-card:hover {
    text-decoration: none;
}
.featured-member {
    border-color: var(--accent-color);
}
.member-card-avatar {
    margin-bottom: 1rem;
}
.member-card-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}
.member-card-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent-color);
    border: 2px solid var(--border-color);
}
.member-card-info h3 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}
.member-card-skills {
    margin-top: 0.5rem;
}

/* ============================== */
/* Floating Action Button (FAB)   */
/* ============================== */
.fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--primary-bg);
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(57, 211, 187, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 1000;
    line-height: 1;
}
.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(57, 211, 187, 0.6);
    text-decoration: none;
    color: var(--primary-bg);
}

/* ============================== */
/* Content Creation Forms         */
/* ============================== */
/* ── Wizard Banner & SEO Card ── */
.wizard-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: rgba(var(--accent-color-rgb), 0.06);
    border: 1px solid rgba(var(--accent-color-rgb), 0.15);
    border-left: 3px solid var(--accent-color);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.wizard-banner svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.wizard-banner strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text-primary);
}
.wizard-banner span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.wizard-seo-card {
    max-width: 800px;
    margin: 0 auto 1.5rem;
    background: rgba(var(--primary-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.wizard-seo-card summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.wizard-seo-card summary svg {
    color: var(--accent-color);
    opacity: 0.7;
}
.wizard-seo-card p {
    padding: 0 1rem 0.85rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0;
}

.content-create-form {
    max-width: 800px;
    margin: 0 auto;
}
.form-fieldset {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.form-fieldset legend {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent-color);
    padding: 0 0.5rem;
}
.form-static-text {
    color: var(--text-color);
    font-size: 0.95rem;
    margin: 0;
    padding: 0.4rem 0;
}
.form-static-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.form-static-list li {
    font-size: 0.95rem;
    color: var(--text-color);
    padding: 0.2rem 0;
}
.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.form-group.has-error .form-input {
    border-color: #e53e3e;
}
.field-error {
    display: block;
    color: #e53e3e;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.form-errors:empty {
    display: none;
}
.form-errors {
    background: rgba(229, 62, 62, 0.1);
    border: 1px solid #e53e3e;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.form-errors .error-message {
    color: #e53e3e;
    margin: 0;
}
.form-textarea {
    resize: vertical;
    min-height: 100px;
}
.form-checkbox {
    width: auto;
    margin-right: 0.5rem;
}
.section-card {
    padding: 1.25rem;
    margin-bottom: 1rem;
    position: relative;
}
.section-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.section-label {
    font-family: var(--font-headings);
    font-weight: 600;
    color: var(--text-primary);
}
.remove-section-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.25rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
}
.remove-section-btn:hover {
    color: #e53e3e;
    border-color: #e53e3e;
}
.cta-button-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 1.75rem;
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-primary);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.cta-button-outline:hover {
    background: var(--accent-color);
    color: var(--text-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--accent-color-rgb), 0.25);
}

/* Ghost variant — for tertiary actions like Cancel. Neutral border,
   muted text, no accent. Becomes accent-tinted on hover. */
.cta-button-outline--ghost {
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.cta-button-outline--ghost:hover {
    background: rgba(var(--accent-color-rgb), 0.08);
    border-color: rgba(var(--accent-color-rgb), 0.45);
    color: var(--text-primary);
    box-shadow: none;
}
.form-actions {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* --- Subsection cards (nested inside section cards) --- */
.subsection-forms {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.subsection-heading {
    font-family: var(--font-headings);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.subsection-card {
    margin-left: 1.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid var(--accent-color);
    position: relative;
}
.subsection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.subsection-label {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.remove-subsection-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.1rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
}
.remove-subsection-btn:hover {
    color: #e53e3e;
    border-color: #e53e3e;
}
.add-subsection-btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    margin-top: 0.5rem;
}

/* --- Article status ribbon (tilted overlay badge) --- */
.article-status-ribbon {
    position: absolute;
    top: 14px;
    right: -30px;
    z-index: 2;
    padding: 0.25rem 2.5rem;
    font-family: var(--font-headings);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transform: rotate(35deg);
    pointer-events: none;
}
.article-status-draft {
    background: #ecc94b;
    color: #1a202c;
}
.article-status-review {
    background: #ed8936;
    color: #1a202c;
}

/* --- News List: Hero Header --- */
.news-hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 2rem 2.5rem;
}
.news-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(57,211,187,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(57,211,187,0.05) 0%, transparent 55%),
        radial-gradient(ellipse 90% 40% at 50% 110%, rgba(57,211,187,0.04) 0%, transparent 50%);
    pointer-events: none;
}
.news-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(57,211,187,0.15) 50%, transparent 95%);
}
.news-hero-inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.news-hero-title {
    font-family: var(--font-headings);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
}
.news-hero-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 2rem;
    line-height: 1.5;
}

/* Hero stats row */
.news-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}
.news-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.news-hero-stat-val {
    font-family: var(--font-headings);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.news-hero-stat:first-child .news-hero-stat-val {
    color: var(--accent-color);
}
.news-hero-stat-lbl {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.news-hero-stat--chart {
    flex-direction: row;
    width: 120px;
    height: 36px;
}

/* Hero search box */
.news-search-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
}
.news-search-input {
    width: 100%;
    padding: 0.7rem 3rem 0.7rem 1.25rem;
    font-size: 0.9rem;
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    outline: none;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.news-search-input::placeholder {
    color: rgba(255,255,255,0.25);
}
.news-search-input:focus {
    background: rgba(255,255,255,0.06);
    border-color: rgba(57,211,187,0.3);
    box-shadow: 0 0 0 3px rgba(57,211,187,0.06);
}
.news-search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.25);
    pointer-events: none;
    transition: color 0.3s;
}
.news-search-input:focus ~ .news-search-icon {
    color: var(--accent-color);
}

/* Content section override — tighten top padding since hero provides spacing */
.news-list-content {
    padding-top: 2rem;
}

/* --- News List: Section Headings --- */
.news-section {
    margin-bottom: 2.5rem;
}
.news-section-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.news-section-heading svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.news-section-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    margin-left: 0.25rem;
}

@media (max-width: 768px) {
    .news-hero {
        padding: 3rem 1.25rem 2rem;
    }
    .news-hero-title {
        font-size: 1.8rem;
    }
    .news-hero-subtitle {
        font-size: 0.82rem;
    }
    .news-hero-stats {
        gap: 1rem;
        flex-wrap: wrap;
    }
    .news-hero-stat-val {
        font-size: 1.2rem;
    }
    .news-hero-stat--chart {
        width: 100%;
        height: 32px;
        order: 10;
    }
    .news-search-wrap {
        max-width: 100%;
    }

    /* Page content section: reduce padding on mobile */
    .page-content-section {
        padding: 2rem 1rem;
    }
    .page-content-section h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    /* Card grid: 2-column for tablets before collapsing to 1 */
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
    }

    /* Event/article cards: smaller image, tighter padding */
    .event-card-image-container {
        height: 160px;
    }
    .event-card-title-overlay {
        padding: 1.5rem 1rem 1rem;
    }
    .event-card-title-overlay h3 {
        font-size: 1.25rem;
    }
    .event-card-content {
        padding: 1rem;
        min-height: 80px;
    }
    .event-card-content p {
        font-size: 0.9rem;
    }

    /* Venture cards: smaller logo + cover */
    .venture-card-cover {
        height: 150px;
    }
    .venture-card-logo {
        width: 90px;
        height: 90px;
        padding: 5px;
        border-radius: 12px;
    }
    .venture-card-footer {
        padding: 32px 16px 18px;
    }
    .venture-card-name {
        font-size: 1.1rem;
    }
    .venture-card-oneliner {
        font-size: 0.82rem;
    }
    .venture-card-logo-letter {
        font-size: 1.6rem;
    }

    /* News sections: tighter spacing */
    .news-section {
        margin-bottom: 1.5rem;
    }
    .news-section-heading {
        font-size: 1rem;
        padding-bottom: 0.6rem;
    }

    /* Disable hover lift on touch devices */
    .card:hover {
        transform: none;
    }

    /* News list content: tighter top */
    .news-list-content {
        padding-top: 1.25rem;
    }
}

/* List pages: extra-small screens */
@media (max-width: 480px) {
    .news-hero {
        padding: 2rem 1rem 1.5rem;
    }
    .news-hero-title {
        font-size: 1.4rem;
    }
    .news-hero-subtitle {
        font-size: 0.78rem;
    }
    .news-hero-stats {
        gap: 0.6rem;
    }
    .news-hero-stat-val {
        font-size: 1rem;
    }
    .news-hero-stat-lbl {
        font-size: 0.58rem;
    }
    .news-search-input {
        padding: 0.6rem 2.5rem 0.6rem 1rem;
        font-size: 0.82rem;
    }

    .page-content-section {
        padding: 1.25rem 0.75rem;
    }
    .page-content-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Card grid: single column on phones */
    .card-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .event-card-image-container {
        height: 140px;
    }
    .event-card-title-overlay h3 {
        font-size: 1.1rem;
    }
    .event-card-content {
        padding: 0.85rem;
        min-height: auto;
    }

    .venture-card-cover {
        height: 130px;
    }
    .venture-card-logo {
        width: 72px;
        height: 72px;
        padding: 4px;
        border-radius: 10px;
        left: 80%;
    }
    .venture-card-footer {
        padding: 24px 14px 16px;
    }
    .venture-card-name {
        font-size: 1rem;
    }
    .venture-card-oneliner {
        font-size: 0.78rem;
    }

    .news-section {
        margin-bottom: 1.25rem;
    }
    .news-section-heading {
        font-size: 0.9rem;
    }

    .press-card-badge {
        width: 28px;
        height: 28px;
        bottom: 6px;
        right: 6px;
    }
}

/* --- My Articles Dashboard --- */
.my-articles-table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
}
.my-articles-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--secondary-bg);
    border-radius: 10px;
    overflow: hidden;
}
.my-articles-table thead {
    background: var(--primary-bg);
}
.my-articles-table th,
.my-articles-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.my-articles-table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}
.my-articles-table td a {
    color: var(--accent-color);
}
.my-articles-table td a:hover {
    text-decoration: underline;
}
.article-status-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.article-status-badge.article-status-published {
    background: #48bb78;
    color: #fff;
}
.article-status-badge.article-status-draft {
    background: #ecc94b;
    color: #1a202c;
}
.article-status-badge.article-status-review {
    background: #ed8936;
    color: #1a202c;
}

@media (max-width: 768px) {
    .my-articles-table thead {
        display: none;
    }
    .my-articles-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 0.5rem;
    }
    .my-articles-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
        padding: 0.6rem 0.8rem;
    }
    .my-articles-table td:last-child {
        border-bottom: none;
    }
    .my-articles-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        color: var(--text-secondary);
        margin-right: 1rem;
    }
}


/* =================================================================== */
/* ARTICLE DETAIL: TWO-COLUMN LAYOUT, BREADCRUMB, SIDEBAR, COMPACT ANALYTICS
/* =================================================================== */

/* Breadcrumb */
.article-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem 0;
}

.article-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.article-breadcrumb li + li::before {
    content: "›";
    margin-right: 0.25rem;
    color: var(--text-secondary);
}

.article-breadcrumb li:last-child {
    color: var(--text-primary);
}

/* =================================================================== */
/* ARTICLE DETAIL — Overrides for venture-shared classes
/* =================================================================== */

/* Article pages don't have a logo overlap, so reduce the hero margin */
.venture-detail-page:has(.article-detail-layout) .venture-hero-section,
.venture-detail-page:has(.article-manage-page) .venture-hero-section {
    margin-bottom: 0;
}

/* ...but the two-column (member) venture/event layout also uses
   .article-detail-layout, and those pages DO have an overhanging absolute
   logo. With the manage tabs no longer sitting between the hero and the
   content (#302), the title collided with the logo. Restore top clearance on
   the title block on desktop, where the logo overhangs. Real article pages
   have no .venture-info, so they're unaffected. (#303) */
@media (min-width: 769px) {
    .venture-detail-page:has(.article-detail-layout) .venture-info {
        margin-top: 5rem;
    }
}

/* Article hero footer overlay */
.article-hero-section {
    display: flex;
    flex-direction: column;
}
.article-hero-section .venture-cover-image {
    height: 45vh;
    max-height: 480px;
    min-height: 280px;
    position: relative;
}

/* Cover image change button */
.cover-image-input-wrap {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.cover-change-btn {
    position: absolute;
    top: 16px;
    /* Align with main content: centered max-width 1000px + 2rem padding */
    right: calc(50% - 500px + 2rem);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-headings, inherit);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    z-index: 2;
}
.cover-change-btn:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}
.cover-change-btn:active {
    transform: translateY(0);
}
.cover-change-btn svg {
    opacity: 0.85;
}
@media (max-width: 1040px) {
    .cover-change-btn {
        right: 2rem;
    }
}
@media (max-width: 768px) {
    .cover-change-btn {
        right: 1rem;
        top: 12px;
    }
}
.article-hero-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.3) 80%, transparent 100%);
    padding: 3rem 0 1.5rem;
    z-index: 5;
}
.article-hero-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}
.article-hero-footer-text {
    flex: 1;
    min-width: 0;
}
.article-hero-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.article-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.article-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}
.article-hero-meta svg {
    opacity: 0.7;
    flex-shrink: 0;
}
.article-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.article-hero-cta:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}
.article-hero-cta--primary {
    background: var(--accent-color);
    color: var(--text-on-accent);
    border-color: var(--accent-color);
    cursor: pointer;
    font-family: inherit;
}
.article-hero-cta--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent);
}
.article-hero-cta--active {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}
.article-hero-cta--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}
.article-hero-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* Events also use article-hero-section — remove the logo-overlap margin */
.event-detail-page .venture-hero-section,
.venture-detail-page:has(.venture-main-content) .article-hero-section {
    margin-bottom: 0;
}

/* Cover image placeholder when no cover image exists */
.venture-cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--secondary-bg) 0%, rgba(var(--accent-color-rgb), 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ── Cover Upload Zone (visible when no cover image is set) ── */
.cover-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 2rem;
    border: 2px dashed rgba(var(--accent-color-rgb), 0.2);
    border-radius: 16px;
    transition: all 0.3s;
    max-width: 280px;
}
.cover-upload-zone:hover {
    border-color: rgba(var(--accent-color-rgb), 0.5);
    background: rgba(var(--accent-color-rgb), 0.04);
}
.cover-upload-zone svg {
    color: var(--accent-color);
    opacity: 0.4;
    transition: opacity 0.3s;
}
.cover-upload-zone:hover svg {
    opacity: 0.7;
}
.cover-upload-zone span {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: color 0.3s;
}
.cover-upload-zone:hover span {
    color: var(--accent-color);
}
/* Hide upload zone when preview image is shown */
.venture-cover-placeholder img[style*="display: block"] ~ .cover-upload-zone,
.venture-cover-placeholder img:not([style*="display:none"]):not([style*="display: none"]) ~ .cover-upload-zone {
    display: none;
}

/* Article meta: left-align, don't space-between */
.article-detail-main .venture-meta {
    justify-content: flex-start;
    gap: 0.75rem 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Admin Toolbar */
.article-admin-toolbar {
    max-width: 1160px;
    margin: 0.75rem auto 0;
    padding: 0.65rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: rgba(var(--accent-color-rgb), 0.05);
    border: 1px solid rgba(var(--accent-color-rgb), 0.15);
    border-radius: 10px;
}
.article-admin-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.article-admin-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.article-admin-status {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
}
.article-admin-status--published {
    background: rgba(57, 211, 187, 0.15);
    color: var(--accent-color);
}
.article-admin-status--review {
    background: rgba(253, 126, 20, 0.15);
    color: #fd7e14;
}
.article-admin-status--draft {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}
.article-admin-category {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
}
.article-admin-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}
.article-admin-badge--members {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}
.article-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    text-decoration: none;
    background: var(--accent-color);
    color: var(--text-on-accent);
    transition: opacity 0.2s, box-shadow 0.2s;
}
.article-admin-btn:hover {
    opacity: 0.9;
    box-shadow: 0 2px 10px rgba(var(--accent-color-rgb), 0.3);
}
.article-admin-btn--secondary {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}
.article-admin-btn--secondary:hover {
    background: rgba(255,255,255,0.14);
    color: var(--text-primary);
    opacity: 1;
    box-shadow: none;
}

@media (max-width: 768px) {
    .article-admin-toolbar {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* Two-column grid */
.article-detail-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
}

.article-detail-main {
    min-width: 0;
}

/* Sidebar */
.article-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 100px;
    align-self: start;
}

/* Sidebar Stats Card */
.sidebar-stats-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.sidebar-stats-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-stats-header svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.sidebar-stats-header h4 {
    margin: 0;
    font-size: 0.9rem;
}
.sidebar-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.sidebar-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
.sidebar-stat:nth-child(2n) {
    border-right: none;
}
.sidebar-stat:nth-last-child(-n+2) {
    border-bottom: none;
}
.sidebar-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}
.sidebar-stat-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
}
.sidebar-stats-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Stats card — per-language breakdown */
.sidebar-stats-lang-breakdown {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.sidebar-stats-lang-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}
.sidebar-stats-lang-row .lang-flag {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}
.sidebar-stats-lang-code {
    width: 3.2em;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.72rem;
    flex-shrink: 0;
}
.sidebar-stats-lang-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}
.sidebar-stats-lang-bar {
    display: block;
    height: 100%;
    background: var(--accent-color);
    border-radius: 3px;
    min-width: 2px;
}
.sidebar-stats-lang-count {
    min-width: 2em;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

/* Card translation flag badges */
.card-translation-flags {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: flex;
    gap: 0.3rem;
}
.card-translation-flags .lang-flag {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
}
.card-translation-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 13px;
    border-radius: 2px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    letter-spacing: -0.02em;
}

/* Settings page translation grid */
.settings-translations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}
.settings-translation-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    transition: opacity 0.2s;
}
.settings-translation-item--available {
    background: rgba(46,204,113,0.08);
    border-color: rgba(46,204,113,0.25);
}
.settings-translation-item--missing {
    opacity: 0.45;
}
.settings-translation-check {
    margin-left: auto;
    color: #2ecc71;
    flex-shrink: 0;
}

/* Sidebar Translations Card */
.sidebar-translations-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.sidebar-translations-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-translations-header svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.sidebar-translations-header h4 {
    margin: 0;
    font-size: 0.9rem;
}
.sidebar-translations-available,
.sidebar-translations-missing {
    padding: 0.75rem 1.25rem;
}
.sidebar-translations-missing {
    border-top: 1px solid var(--border-color);
}
.sidebar-translations-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.sidebar-translations-flags {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sidebar-translation-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-primary);
}
.sidebar-translation-item .lang-flag {
    width: 18px;
    height: 13px;
    border-radius: 2px;
}
.sidebar-translation-item--missing {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Sidebar — Translation Views (inline after language name) */
.sidebar-translation-views-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}
.sidebar-translation-views-inline svg {
    opacity: 0.6;
}

/* Sidebar Latest News Card */
/* Sidebar — Ventures / Partners card container (reused) */
.sidebar-latest-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.sidebar-latest-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-latest-header svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.sidebar-latest-header h4 {
    margin: 0;
    font-size: 0.9rem;
}
.sidebar-latest-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.sidebar-latest-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.sidebar-latest-footer a:hover {
    opacity: 0.8;
}
.sidebar-latest-footer a svg {
    transition: transform 0.2s;
}
.sidebar-latest-footer a:hover svg {
    transform: translateX(2px);
}

/* Sidebar — Latest News (editorial list) */
.sidebar-news-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.sidebar-news-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-news-header svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.sidebar-news-header h4 {
    margin: 0;
    font-size: 0.9rem;
}
.sidebar-news-list {
    padding: 0.4rem 0;
}
.sidebar-news-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sidebar-news-item:last-child {
    border-bottom: none;
}
.sidebar-news-item:hover {
    background: rgba(255,255,255,0.04);
}
.sidebar-news-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
}
.sidebar-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-news-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    opacity: 0.4;
}
.sidebar-news-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}
.sidebar-news-category {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-color);
    line-height: 1;
}
.sidebar-news-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sidebar-news-item:hover .sidebar-news-title {
    color: var(--accent-color);
}
.sidebar-news-meta {
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.7;
}
.sidebar-news-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.sidebar-news-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.sidebar-news-footer a:hover {
    opacity: 0.8;
}
.sidebar-news-footer a svg {
    transition: transform 0.2s;
}
.sidebar-news-footer a:hover svg {
    transform: translateX(2px);
}

/* Sidebar entity list (ventures / partners) */
.sidebar-entity-list {
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sidebar-entity-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}
.sidebar-entity-item:hover {
    background: rgba(255,255,255,0.04);
}
.sidebar-entity-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
    background: #0a0f18;
    flex-shrink: 0;
}
.sidebar-entity-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-color);
    border: 1px solid var(--border-color);
}
.sidebar-entity-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.sidebar-entity-name {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-entity-badge {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent-color);
}
.sidebar-entity-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact analytics card */
.article-compact-analytics {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.compact-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 70px;
}

.compact-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1.2;
}

.compact-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive: stack sidebar below on small screens */
@media (max-width: 900px) {
    .article-detail-layout {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .article-detail-sidebar {
        position: static;
    }

    .article-breadcrumb {
        padding: 1rem 1rem 0;
    }

    /* Article hero: show full image + info below it on mobile */
    .article-hero-section .venture-cover-image {
        height: auto;
        max-height: none;
        min-height: 0;
    }
    .article-hero-section .venture-cover-image img {
        height: auto;
        max-height: 50vh;
        object-fit: contain;
        object-position: center;
        background: var(--secondary-bg);
    }
    .article-hero-footer {
        position: relative;
        background: var(--secondary-bg);
        padding: 0.75rem 0 0.75rem;
    }
    .article-hero-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 1rem;
        gap: 1rem;
    }
    .article-hero-title {
        font-size: 1.4rem;
        color: var(--text-color);
        text-shadow: none;
    }
    .article-hero-meta {
        gap: 0.5rem;
    }
    .article-hero-meta span {
        font-size: 0.78rem;
        color: var(--text-secondary);
    }
    .article-hero-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }
    .article-hero-cta {
        padding: 0.55rem 1rem;
        font-size: 0.8rem;
        background: rgba(var(--accent-color-rgb), 0.1);
        border-color: var(--border-color);
        color: var(--text-color);
        backdrop-filter: none;
    }
    .article-hero-cta:hover {
        background: rgba(var(--accent-color-rgb), 0.2);
        border-color: var(--accent-color);
    }
    .article-hero-cta--active {
        background: rgba(var(--accent-color-rgb), 0.2);
        border-color: var(--accent-color);
        color: var(--accent-color);
    }

    /* Review banners: stack on mobile */
    .review-in-progress-inner,
    .review-failed-inner {
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        font-size: 0.82rem;
        gap: 0.5rem;
    }
    .review-failed-text {
        flex-basis: calc(100% - 2rem);
    }
    .review-failed-text span {
        font-size: 0.8rem;
        word-break: break-word;
    }
    .review-retry-btn {
        margin-left: auto;
    }

    /* Sidebar cards: horizontal scroll prevention */
    .article-detail-sidebar {
        overflow-x: hidden;
    }
    .sidebar-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .sidebar-translations-flags {
        gap: 0.4rem;
    }
    .sidebar-translation-item {
        font-size: 0.78rem;
    }
    .sidebar-entity-item {
        padding: 0.5rem 0;
    }
    .sidebar-entity-logo {
        width: 36px;
        height: 36px;
    }
    .sidebar-news-thumb {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    /* Related sections: tighter spacing */
    .related-section {
        padding: 1.2rem 0;
    }
    .related-members-row {
        gap: 0.8rem;
    }
    .related-member-card {
        width: 68px;
    }
    .related-member-avatar,
    .related-member-avatar-placeholder {
        width: 48px;
        height: 48px;
    }
    .related-member-name {
        font-size: 0.7rem;
    }

    /* Content overflow prevention */
    .article-detail-main {
        overflow-x: hidden;
    }
    .content-body img {
        max-width: 100%;
        height: auto;
    }
    .content-body iframe {
        max-width: 100%;
    }
    .event-video-wrapper iframe {
        max-width: 100%;
    }

    /* Related entity cards: stack on mobile */
    .related-entity-card {
        flex-direction: row;
        gap: 0.75rem;
    }
    .related-entity-logo {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    /* CTA buttons: full-width on mobile */
    .cta-container {
        text-align: center;
    }
    .cta-button {
        display: inline-block;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Article detail: extra-small screens */
@media (max-width: 480px) {
    .article-detail-layout {
        padding: 0.75rem;
    }
    .article-hero-title {
        font-size: 1.15rem;
    }
    .article-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    .article-hero-meta span {
        font-size: 0.72rem;
    }
    .article-hero-actions {
        gap: 0.35rem;
    }
    .article-hero-cta {
        padding: 0.45rem 0.7rem;
        font-size: 0.72rem;
    }
    .content-block h2 {
        font-size: 1.3rem;
    }
    .subsection-block h3 {
        font-size: 1.1rem;
    }
    .content-body {
        font-size: 0.95rem;
    }
    .sidebar-stats-card,
    .sidebar-translations-card,
    .sidebar-latest-card,
    .sidebar-news-card {
        padding: 0.75rem;
    }
    .review-in-progress-inner,
    .review-failed-inner {
        padding: 0.6rem 0.75rem;
        font-size: 0.78rem;
    }
}


/* =================================================================== */
/* DETAIL PAGE ANALYTICS PANEL
/* =================================================================== */

.detail-analytics {
    margin-top: 3rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.detail-analytics-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    color: var(--accent-color);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.detail-analytics-toggle:hover {
    background: rgba(var(--accent-color-rgb), 0.08);
}

.detail-analytics-caret {
    margin-left: auto;
    transition: transform 0.25s;
}
.detail-analytics-toggle[aria-expanded="true"] .detail-analytics-caret {
    transform: rotate(180deg);
}

.detail-analytics-content {
    display: none;
    margin-top: 1.5rem;
}
.detail-analytics-content.open {
    display: block;
}

.analytics-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.analytics-chart-box {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.2rem;
}
.analytics-chart-box:first-child {
    grid-column: 1 / -1;
}
.analytics-chart-box h4 {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.8rem;
}

/* ── Visitor Type Table (detail analytics) ── */
.detail-vtype-table {
    width: 100%;
    border-collapse: collapse;
}
.detail-vtype-table th,
.detail-vtype-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}
.detail-vtype-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
}
.detail-vtype-table tr:last-child td {
    border-bottom: none;
}
.detail-vtype-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.detail-vtype-dot--guest { background: #A0AEC0; }
.detail-vtype-dot--member { background: #39D3BB; }
.detail-vtype-dot--member-plus { background: #818CF8; }
.detail-vtype-dot--advisor { background: #F59E0B; }
.detail-vtype-dot--partner { background: #EC4899; }
.detail-vtype-dot--staff { background: #3B82F6; }
.detail-vtype-dot--admin { background: #EF4444; }

/* ── Sidebar Visitor Types Card ── */
.sidebar-vtype-card {
    margin-bottom: 1.5rem;
}
.sidebar-vtype-list {
    padding: 0.5rem 0;
}
.sidebar-vtype-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.25rem;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.sidebar-vtype-row:hover {
    background: rgba(var(--accent-color-rgb), 0.04);
}
.sidebar-vtype-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sidebar-vtype-dot--guest { background: #A0AEC0; }
.sidebar-vtype-dot--member { background: #39D3BB; }
.sidebar-vtype-dot--member-plus { background: #818CF8; }
.sidebar-vtype-dot--advisor { background: #F59E0B; }
.sidebar-vtype-dot--partner { background: #EC4899; }
.sidebar-vtype-dot--staff { background: #3B82F6; }
.sidebar-vtype-dot--admin { background: #EF4444; }
.sidebar-vtype-label {
    flex: 1;
    color: var(--text-primary);
}
.sidebar-vtype-count {
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--accent-color);
    font-size: 0.9rem;
}

.analytics-referrers-table {
    margin-top: 1.5rem;
}
.analytics-referrers-table h4 {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.8rem;
}
.analytics-referrers-table table {
    width: 100%;
    border-collapse: collapse;
}
.analytics-referrers-table th,
.analytics-referrers-table td {
    padding: 0.5rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.analytics-referrers-table th {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .analytics-chart-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================== */
/* === HUB DASHBOARD: ARTICLE LIST            === */
/* ============================================== */

/* --- Articles Card: Header --- */
.hub-articles-card {
    padding: 0 !important;
    overflow: hidden;
}
.hub-articles-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.hub-articles-header-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hub-articles-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.hub-articles-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hub-articles-pill--published .hub-articles-pill-dot { background: var(--accent-color); }
.hub-articles-pill--review .hub-articles-pill-dot { background: #fd7e14; }
.hub-articles-pill--draft .hub-articles-pill-dot { background: #ffc107; }

/* --- Articles Card: Image Card List --- */
.hub-article-card-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 1rem;
}

.hub-article-card {
    display: block;
    position: relative;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.6rem;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.hub-article-card:last-child {
    margin-bottom: 0;
}
.hub-article-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.35);
    box-shadow: 0 4px 20px rgba(var(--accent-color-rgb), 0.1);
    transform: translateY(-1px);
}

.hub-article-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.15) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.75rem 0.85rem;
}

.hub-article-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hub-article-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hub-article-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.hub-article-card-meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* --- Articles Card: Footer --- */
.hub-articles-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(255,255,255,0.02);
}
.hub-articles-footer-total {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.hub-articles-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.hub-articles-footer-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}
.hub-articles-footer-link:hover {
    opacity: 0.85;
}
.hub-articles-footer-link:hover svg {
    transform: translateX(2px);
}

/* --- Legacy article list (kept for other views) --- */
.hub-article-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

a.hub-article-item {
    text-decoration: none;
    color: inherit;
}
.hub-article-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background 0.2s;
}
.hub-article-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(var(--accent-color-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--accent-color-rgb), 0.06);
}

.hub-article-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.hub-article-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
}
.hub-article-thumb-placeholder svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.hub-article-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.hub-article-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hub-article-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.hub-article-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}
.hub-article-category {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}
.hub-article-category-press {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
}
.hub-article-category-blog {
    background: rgba(236, 72, 153, 0.15);
    color: #f9a8d4;
}
.hub-article-category-news {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

/* ============================================== */
/* === HUB DASHBOARD: VENTURE CARDS           === */
/* ============================================== */

.hub-venture-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 800px;
}

.hub-venture-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    transition: background 0.2s;
}
.hub-venture-card:hover {
    background: rgba(255,255,255,0.06);
}

.hub-venture-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hub-venture-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.hub-venture-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.hub-venture-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
}
.hub-venture-logo-placeholder svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.hub-venture-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-venture-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-left: 3.25rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .hub-venture-card-main {
        flex-direction: column;
        align-items: flex-start;
    }
    .hub-venture-meta {
        padding-left: 0;
    }
}

/* ========================================= */
/* Manage Page (Settings / Analytics shared) */
/* ========================================= */
.article-manage-page.page-content-section {
    max-width: 1000px;
    padding: 2rem 2rem 3rem;
}
.article-manage-page.analytics-manage-page.page-content-section {
    max-width: 1200px;
}
.article-manage-page.page-content-section > h2 {
    display: none;
}

/* Wrap for manage header when used inside full-width pages (e.g. article detail) */
.manage-header-wrap {
    max-width: 1200px;
    margin: 0 auto 1.5rem;
    padding: 1rem 2rem 0;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}
.manage-header-wrap .article-breadcrumb {
    padding: 0 0 0.5rem;
    max-width: none;
    margin: 0;
}
.manage-header-wrap .manage-page-tabs {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Page header */
.manage-page-header {
    margin-bottom: 0;
}
.manage-page-header-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.manage-page-header-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}
.manage-page-header-info h1 {
    font-size: 1.8rem;
    margin: 0 0 0.6rem;
    line-height: 1.3;
}
.manage-page-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.manage-page-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.manage-page-meta-item svg {
    opacity: 0.6;
    flex-shrink: 0;
}

/* Navigation tabs */
.manage-page-tabs {
    display: flex;
    gap: 0;
    margin: 1.5rem 0 2rem;
    border-bottom: 1px solid var(--border-color);
}
.manage-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}
.manage-tab svg {
    opacity: 0.5;
    flex-shrink: 0;
}
.manage-tab:hover {
    color: var(--text-primary);
}
.manage-tab:hover svg {
    opacity: 0.8;
}
.manage-tab--active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}
.manage-tab--active svg {
    opacity: 1;
}

/* Settings — form area narrower */
.article-manage-page .content-create-form {
    max-width: 680px;
}

/* Settings — cover preview */
.settings-cover-preview {
    margin-bottom: 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.settings-cover-preview img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* Settings — scrollable checkbox list for M2M fields */
.checkbox-list-scroll {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem;
    background: var(--bg-color);
}
.checkbox-list-scroll ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.checkbox-list-scroll li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
}
.checkbox-list-scroll li label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 0.9rem;
    cursor: pointer;
}
.checkbox-list-scroll li input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* ── M2M Search Picker ── */
.m2m-picker {
    margin-bottom: 0.5rem;
}
.m2m-picker > label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text-color);
}
.m2m-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    min-height: 0;
}
.m2m-picker-selected:empty {
    display: none;
}
.m2m-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: rgba(var(--accent-color-rgb), 0.1);
    border: 1px solid rgba(var(--accent-color-rgb), 0.25);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-color);
    animation: m2m-chip-in 0.2s ease;
}
@keyframes m2m-chip-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.m2m-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(var(--accent-color-rgb), 0.15);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0;
    padding: 0;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.m2m-chip-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}
.m2m-chip-remove svg {
    width: 10px;
    height: 10px;
}
.m2m-picker-search-wrap {
    position: relative;
}
.m2m-picker-search-icon {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    opacity: 0.5;
    pointer-events: none;
}
.m2m-picker-search {
    padding-left: 2rem !important;
    font-size: 0.85rem !important;
}
.m2m-picker-results {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    border-top: none;
    background: var(--bg-color);
    display: none;
}
.m2m-picker-results.m2m-picker-results--open {
    display: block;
}
.m2m-picker-results--empty {
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-style: italic;
}
.m2m-picker-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 0.84rem;
}
.m2m-picker-result:hover {
    background: rgba(var(--accent-color-rgb), 0.06);
}
.m2m-picker-result input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
}
.m2m-picker-result label {
    margin: 0;
    cursor: pointer;
    font-weight: 400;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m2m-picker-hint {
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Settings — checkbox row */
.form-group--checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-group--checkbox label {
    margin-bottom: 0;
}

/* Settings — status hint */
.settings-status-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(var(--accent-color-rgb), 0.06);
    border: 1px solid rgba(var(--accent-color-rgb), 0.15);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.settings-status-hint svg {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.settings-status-hint p {
    margin: 0;
}

/* ========================================= */
/* Article Settings Page — Redesign          */
/* ========================================= */
.article-settings-page.page-content-section {
    max-width: 1140px;
    padding: 1.5rem 2rem 3rem;
}

/* Pipeline — glass banner */
.stg-pipeline {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 22px 32px;
    margin-bottom: 1.5rem;
}
.stg-pipeline-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.stg-pipeline-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
}
.stg-pipeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    opacity: 0.3;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.stg-pipeline-step--done .stg-pipeline-icon {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    opacity: 1;
}
.stg-pipeline-step--active .stg-pipeline-icon {
    border-color: var(--accent-color);
    color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.15);
    opacity: 1;
}
.stg-pipeline-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    opacity: 0.35;
}
.stg-pipeline-step--active .stg-pipeline-label {
    color: var(--accent-color);
    opacity: 1;
}
.stg-pipeline-step--done .stg-pipeline-label {
    color: var(--text-color);
    opacity: 0.8;
}
.stg-pipeline-line {
    width: 48px;
    height: 2px;
    background: var(--border-color);
    margin: 0 8px;
    border-radius: 1px;
    transition: background 0.3s ease;
    opacity: 0.5;
}
.stg-pipeline-line--done {
    background: var(--accent-color);
    opacity: 1;
}
.stg-pipeline-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 14px;
    opacity: 0.7;
}
.stg-pipeline-meta svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Alert banner */
.stg-alert {
    background: rgba(255, 193, 7, 0.06);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 1.5rem;
}
.stg-alert-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: #ffc107;
}
.stg-alert-header svg {
    color: #ffc107;
    flex-shrink: 0;
}
.stg-alert p {
    margin: 0;
    color: rgba(255, 193, 7, 0.8);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Form grid — two columns */
.stg-form {
    max-width: none;
}
.stg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.stg-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Cards — consistent with site sidebar cards */
.stg-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.stg-card--full {
    margin-bottom: 1.25rem;
}
.stg-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.stg-card-header svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.stg-card-header h3 {
    font-family: var(--font-headings);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}
.stg-card-body {
    padding: 1.15rem 1.25rem;
}

/* Cover image preview */
.stg-cover-preview {
    position: relative;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.stg-cover-preview img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: filter 0.25s ease;
}
.stg-cover-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.stg-cover-preview:hover .stg-cover-overlay {
    opacity: 1;
}

/* Author display */
.stg-author-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 14px;
}
.stg-author-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
}
.stg-author-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-color-rgb), 0.12);
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.9rem;
}
.stg-author-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.3;
}
.stg-author-role {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

/* Contributor chips */
.stg-contributors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.stg-contributor-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Linked entities — dual dropdowns */
.stg-links-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 6px;
}

/* M2M section separator */
.stg-m2m-section {
    border-top: 1px solid var(--border-color);
    margin-top: 14px;
    padding-top: 14px;
}

/* Hint box */
.stg-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 10px 12px;
    background: rgba(var(--accent-color-rgb), 0.04);
    border: 1px solid rgba(var(--accent-color-rgb), 0.1);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.stg-hint svg {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 1px;
}
.stg-hint p {
    margin: 0;
}

/* Translations grid */
.stg-translations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.stg-lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.84rem;
    transition: all 0.2s ease;
}
.stg-lang--available {
    background: rgba(46,204,113,0.05);
    border-color: rgba(46,204,113,0.15);
}
.stg-lang--missing {
    opacity: 0.4;
}
.stg-lang-name {
    flex: 1;
    color: var(--text-color);
}
.stg-lang-check {
    margin-left: auto;
    color: #2ecc71;
    flex-shrink: 0;
}

/* Save actions */
.stg-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}
.stg-actions .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.stg-actions .cta-button svg {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .article-settings-page.page-content-section {
        padding: 1rem 1rem 2rem;
    }
    .stg-grid {
        grid-template-columns: 1fr;
    }
    .stg-links-row {
        grid-template-columns: 1fr;
    }
    .stg-pipeline {
        padding: 16px;
    }
    .stg-pipeline-step {
        flex-direction: column;
        gap: 4px;
    }
    .stg-pipeline-label {
        font-size: 0.7rem;
    }
    .stg-pipeline-line {
        width: 28px;
    }
    .stg-pipeline-icon {
        width: 30px;
        height: 30px;
    }
    .stg-pipeline-icon svg {
        width: 13px;
        height: 13px;
    }
    .stg-translations-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ========================================= */
/* Analytics Page — Layout                   */
/* ========================================= */

/* Tabs — positioned under hero */
.analytics-page-tabs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ========================================= */
/* Analytics Page — Two-Column Layout        */
/* ========================================= */
.analytics-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
}
.analytics-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}
.analytics-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 100px;
    align-self: start;
}

/* Chart boxes */
.analytics-full-box {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
}
.analytics-full-box h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}
.analytics-full-box h4 svg {
    color: var(--accent-color);
    flex-shrink: 0;
}

/* Doughnut pair — side by side inside main */
.analytics-pair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.analytics-doughnut-wrap {
    max-width: 220px;
    margin: 0 auto;
}

/* Chart + table combo (country/language sections) */
.analytics-chart-table-combo {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.analytics-chart-table-combo .analytics-doughnut-wrap {
    max-width: 200px;
    margin: 0 auto;
}

/* Source type badges */
.analytics-source-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 3px;
    line-height: 1.4;
}
.analytics-source-badge--search {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}
.analytics-source-badge--social {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
}
.analytics-source-badge--referral {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}
.analytics-source-badge--direct {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

/* Visitor Types card — enhanced */
.visitor-types-body {
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.visitor-types-chart-wrap {
    position: relative;
    width: 140px;
    height: 140px;
}
.visitor-types-chart-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.visitor-types-chart-total {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}
.visitor-types-chart-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.visitor-types-detail {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.visitor-type-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
}
.visitor-type-row:last-child {
    border-bottom: none;
}
.visitor-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.visitor-type-dot--new { background: #10b981; }
.visitor-type-dot--returning { background: #6366f1; }
.visitor-type-dot--guest { background: #A0AEC0; }
.visitor-type-dot--member { background: #39D3BB; }
.visitor-type-dot--member-plus { background: #818CF8; }
.visitor-type-dot--advisor { background: #F59E0B; }
.visitor-type-dot--partner { background: #EC4899; }
.visitor-type-dot--staff { background: #3B82F6; }
.visitor-type-dot--admin { background: #EF4444; }
.visitor-type-name {
    flex: 1;
    color: var(--text-secondary);
}
.visitor-type-count {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 2ch;
    text-align: right;
}
.visitor-type-pct {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 3.5ch;
    text-align: right;
    opacity: 0.75;
}

/* Referrers table */
.analytics-referrers-tbl {
    width: 100%;
    border-collapse: collapse;
}
.analytics-referrers-tbl thead th {
    text-align: left;
    padding: 0.6rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}
.analytics-referrers-tbl tbody td {
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border-color);
}
.analytics-referrers-tbl tbody tr:last-child td {
    border-bottom: none;
}
.analytics-referrers-tbl tbody tr:hover {
    background: rgba(255,255,255,0.02);
}
.analytics-referrers-tbl tfoot td {
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    border-top: 2px solid var(--border-color);
}

/* Sidebar — quick actions card */
.analytics-sidebar-actions {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.analytics-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s, color 0.15s;
}
.analytics-sidebar-link:last-child {
    border-bottom: none;
}
.analytics-sidebar-link svg {
    color: var(--accent-color);
    opacity: 0.7;
    flex-shrink: 0;
}
.analytics-sidebar-link:hover {
    background: rgba(var(--accent-color-rgb), 0.06);
    color: var(--text-primary);
}
.analytics-sidebar-link:hover svg {
    opacity: 1;
}

/* Visitor Flow */
.visitor-flow-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.analytics-no-data {
    color: var(--text-secondary);
    font-size: 0.88rem;
    text-align: center;
    padding: 1.5rem 0;
}

/* ── CTA Clicks Table ── */
.analytics-cta-tbl .analytics-cta-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.analytics-cta-tbl .analytics-cta-url {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: monospace;
    font-size: 0.78rem;
    transition: color 0.2s;
}
.analytics-cta-tbl .analytics-cta-url:hover {
    color: var(--accent-color);
}
.analytics-cta-tbl .analytics-cta-url svg {
    opacity: 0.5;
    flex-shrink: 0;
}
.analytics-cta-tbl .analytics-cta-url:hover svg {
    opacity: 1;
}
.analytics-cta-tbl .analytics-cta-count {
    font-weight: 700;
    font-family: var(--font-headings);
    font-size: 1rem;
}
.analytics-cta-tbl .analytics-cta-time {
    color: var(--text-secondary);
    font-size: 0.78rem;
    opacity: 0.7;
    white-space: nowrap;
}

.visitor-flow-entry {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}
.visitor-flow-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.visitor-flow-time {
    margin-left: auto;
    opacity: 0.7;
}
.visitor-flow-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.visitor-flow-page {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.visitor-flow-page--current {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
    font-weight: 600;
}
.visitor-flow-arrow {
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 0.75rem;
}
.visitor-flow-ellipsis {
    color: var(--text-secondary);
    opacity: 0.5;
    font-size: 0.8rem;
    letter-spacing: 2px;
}
.visitor-flow-pages-count {
    font-weight: 600;
    color: var(--text-primary);
}
.visitor-flow-pill-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.visitor-flow-duration {
    font-size: 0.62rem;
    color: var(--accent-color);
    opacity: 0.85;
    font-family: monospace;
}

/* Analytics Pagination */
.analytics-pagination {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.analytics-page-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.78rem;
    min-width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0 0.4rem;
}
.analytics-page-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}
.analytics-page-btn--active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    font-weight: 600;
}
.analytics-page-btn--active:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* Journey Modal */
.journey-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.journey-modal-content {
    width: 80vw;
    max-width: 1100px;
    max-height: 80vh;
    background: var(--card-bg, #1a1f2e);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.journey-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.journey-modal-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.journey-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}
.journey-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}
.journey-modal-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.journey-modal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.journey-modal-pages {
    font-weight: 600;
    color: var(--accent-color);
}
.journey-modal-trail {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.journey-modal-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.journey-modal-step:hover {
    background: rgba(255, 255, 255, 0.03);
}
.journey-modal-step-num {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.journey-modal-step .visitor-flow-page {
    max-width: none;
}
.journey-modal-step .visitor-flow-page--current {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}
.journey-modal-tag {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: auto;
}
.journey-modal-tag--entry {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.journey-modal-tag--exit {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.journey-modal-step-duration {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--accent-color);
    opacity: 0.85;
    margin-left: 0.5rem;
}

@media (max-width: 768px) {
    .journey-modal-content {
        width: 95vw;
        max-height: 90vh;
    }
}

/* ========================================= */
/* Responsive — Manage & Analytics pages     */
/* ========================================= */
@media (max-width: 768px) {
    .article-manage-page.page-content-section {
        padding: 1.25rem 1rem 2rem;
    }
    .manage-header-wrap {
        padding: 0.75rem 1rem 0;
    }
    .manage-page-header-info h1 {
        font-size: 1.35rem;
    }
    .manage-page-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .manage-page-tabs::-webkit-scrollbar {
        display: none;
    }
    .manage-tab {
        padding: 0.65rem 0.85rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
}

@media (max-width: 900px) {
    .analytics-layout {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    .analytics-sidebar {
        position: static;
    }
    .analytics-page-tabs {
        padding: 0 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .analytics-page-tabs::-webkit-scrollbar {
        display: none;
    }
    .analytics-pair-grid {
        grid-template-columns: 1fr;
    }
    .analytics-doughnut-wrap {
        max-width: 240px;
    }
    .visitor-flow-trail {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .visitor-flow-page {
        max-width: 140px;
    }
}

/* ================================================= */
/* ===  ARTICLE EDITOR — CONTENT EDITING STYLES  === */
/* ================================================= */

.article-editor-form {
    max-width: 900px;
    margin: 0 auto;
}

/* ── Field labels ── */
.editor-field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.editor-field-label--inline {
    margin-bottom: 4px;
}

/* ── Shared input refinement for editor ── */
.article-editor-form .form-input,
.article-editor-form .form-textarea {
    background: rgba(var(--primary-bg-rgb), 0.3);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    padding: 0.7rem 0.95rem;
    font-size: 0.95rem;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.article-editor-form .form-textarea {
    padding: 0.85rem 1rem;
    line-height: 1.7;
}
.article-editor-form .form-input:focus,
.article-editor-form .form-textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.08);
    outline: none;
}

/* ── Article header — title ── */
.editor-article-header {
    margin-bottom: 2rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--border-color);
}
.editor-article-header .form-input[name*="title"] {
    font-family: var(--font-headings);
    font-size: 1.8rem;
    font-weight: 700;
    padding: 0.75rem 1rem;
    line-height: 1.3;
}
.editor-article-header .form-input[name*="title"]::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* ── Content area — container for all sections ── */
.editor-content-area {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ── Section/Subsection toolbar bar ── */
.editor-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: rgba(var(--primary-bg-rgb), 0.5);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
}
.editor-card-toolbar--sub {
    border-radius: 0 12px 0 0;
    border-left: 3px solid rgba(var(--accent-color-rgb), 0.5);
    padding: 0.4rem 0.85rem;
}
.editor-card-toolbar-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-headings);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.editor-card-toolbar .editor-section-number,
.editor-card-toolbar .editor-subsection-number {
    margin-top: 0;
}
.editor-card-toolbar .remove-section-btn,
.editor-card-toolbar .remove-subsection-btn {
    margin-top: 0;
}

/* ── Section — card styling ── */
.editor-section {
    padding: 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0 0 14px 14px;
    position: relative;
    margin-bottom: 0;
    background: var(--card-bg);
    transition: border-color 0.25s, box-shadow 0.25s;
}
.editor-section:hover {
    border-color: rgba(var(--accent-color-rgb), 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.editor-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.editor-section-number {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-color);
    color: var(--text-on-accent);
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editor-section-title-wrap {
    flex: 1;
    margin: 0;
}
.editor-section-title-wrap .form-input {
    font-family: var(--font-headings);
    font-size: 1.35rem;
    font-weight: 700;
    padding: 0.6rem 0.85rem;
}
.editor-section-title-wrap .form-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* ── Section body — content textarea ── */
.editor-section-body {
    margin-bottom: 1rem;
}
.editor-section-body .form-textarea {
    font-size: 1rem;
    line-height: 1.75;
    padding: 1rem;
    min-height: 120px;
    resize: none;
    overflow: hidden;
}

/* ── CTA collapsible details ── */
.editor-cta-details {
    margin-top: 1rem;
}
/* Summary reads as a clear, minimalist "add" button (transparent). */
.editor-cta-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    list-style: none;
}
.editor-cta-summary svg {
    opacity: 0.7;
}
.editor-cta-summary::-webkit-details-marker {
    display: none;
}
/* Leading +/× affordance so it's unmistakably an add toggle. */
.editor-cta-summary::before {
    content: '+';
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 400;
    transition: transform 0.2s;
}
.editor-cta-details[open] .editor-cta-summary::before {
    transform: rotate(45deg);
}
.editor-cta-summary:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.04);
}
.editor-cta-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.85rem;
    padding: 1.15rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
}

/* ── Subsection — card with left accent ── */
.editor-subsection {
    margin-left: 0;
    padding: 1.25rem 1.5rem 1rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid rgba(var(--accent-color-rgb), 0.5);
    border-radius: 0 0 12px 0;
    margin-bottom: 0.75rem;
    position: relative;
    background: var(--card-bg);
    transition: border-color 0.25s, box-shadow 0.25s;
}
.editor-subsection:hover {
    border-left-color: var(--accent-color);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.editor-subsection-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.editor-subsection-number {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--accent-color-rgb), 0.12);
    color: var(--accent-color);
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editor-subsection-title-wrap {
    flex: 1;
    margin: 0;
}
.editor-subsection-title-wrap .form-input {
    font-family: var(--font-headings);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
}
.editor-subsection-title-wrap .form-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* ── Subsection body ── */
.editor-subsection-body {
    margin-bottom: 0.75rem;
}
.editor-subsection-body .form-textarea {
    font-size: 0.95rem;
    line-height: 1.75;
    padding: 0.85rem;
    min-height: 80px;
    resize: none;
    overflow: hidden;
}

/* ── Subsection CTA — smaller ── */
.editor-cta-details--sub .editor-cta-fields {
    grid-template-columns: 1fr 1fr;
}

/* ── Media collapsible panel ── */
.editor-media-details {
    margin-top: 1rem;
}
.editor-media-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    cursor: pointer;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    list-style: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.editor-media-summary:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.04);
}
.editor-media-summary svg {
    opacity: 0.7;
}
.editor-media-summary::-webkit-details-marker { display: none; }
.editor-media-summary::before {
    content: '+';
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 400;
    transition: transform 0.2s;
}
.editor-media-details[open] .editor-media-summary::before {
    transform: rotate(45deg);
}
.editor-media-details[open] .editor-media-summary {
    margin-bottom: 0.85rem;
}
.editor-media-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent-color);
    color: var(--text-on-accent);
    font-size: 0.7rem;
    font-weight: 700;
}
.editor-media-content {
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
}
.editor-media-heading {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.editor-media-heading::before {
    content: '';
    flex: 0 0 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--accent-color);
}
.editor-media-heading:not(:first-child) {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}
.editor-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* ── Media card — redesigned ── */
.editor-media-card {
    display: flex;
    flex-direction: column;
    background: rgba(var(--primary-bg-rgb), 0.35);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.editor-media-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ── Thumbnail preview with overlay ── */
.editor-media-card-preview {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--secondary-bg, #1a1a2e);
}
.editor-media-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.editor-media-card:hover .editor-media-card-preview img {
    transform: scale(1.04);
}

/* ── Hover overlay with action buttons ── */
.editor-media-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.editor-media-card:hover .editor-media-card-overlay {
    opacity: 1;
}

/* ── Action buttons (view, delete) ── */
.editor-media-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
    text-decoration: none;
}
.editor-media-action:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}
.editor-media-action--delete {
    background: rgba(229, 62, 62, 0.25);
    border-color: rgba(229, 62, 62, 0.4);
}
.editor-media-action--delete:hover {
    background: rgba(229, 62, 62, 0.5);
    border-color: rgba(229, 62, 62, 0.7);
}
.editor-media-action input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Card body: caption + replace ── */
.editor-media-card-body {
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.editor-media-card-caption input {
    width: 100%;
    font-size: 0.82rem;
    padding: 0.5rem 0.7rem;
    background: rgba(var(--primary-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    transition: border-color 0.2s;
}
.editor-media-card-caption input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}
.editor-media-card-caption input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.08);
}
.editor-media-card-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.editor-media-card-field input {
    width: 100%;
    font-size: 0.82rem;
    padding: 0.5rem 0.7rem;
    background: rgba(var(--primary-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    transition: border-color 0.2s;
}
.editor-media-card-field input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.08);
}

/* ── Replace button ── */
.editor-media-card-replace {
    display: flex;
}
.editor-media-replace-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(var(--primary-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.editor-media-replace-btn:hover {
    color: var(--accent-color);
    border-color: rgba(var(--accent-color-rgb), 0.4);
    background: rgba(var(--accent-color-rgb), 0.06);
}
.editor-media-replace-btn input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Upload dropzone card ── */
.editor-media-card--upload {
    border-style: dashed;
    border-color: rgba(var(--accent-color-rgb), 0.25);
    background: rgba(var(--accent-color-rgb), 0.02);
}
.editor-media-card--upload:hover {
    border-color: rgba(var(--accent-color-rgb), 0.45);
    background: rgba(var(--accent-color-rgb), 0.04);
}
.editor-media-card-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}
.editor-media-card--upload:hover .editor-media-card-dropzone {
    color: var(--accent-color);
}
.editor-media-card-dropzone svg {
    opacity: 0.5;
    transition: opacity 0.2s;
}
.editor-media-card--upload:hover .editor-media-card-dropzone svg {
    opacity: 0.8;
}
.editor-media-card-dropzone span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.editor-media-card-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
/* Hide the "Currently:" text node cruft from Django's ClearableFileInput */
.editor-media-card-dropzone > a,
.editor-media-card-dropzone > br,
.editor-media-card-dropzone > label {
    display: none !important;
}

/* ── Video preview card ── */
.editor-media-card-preview--video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 130px;
    background: linear-gradient(135deg,
        rgba(var(--primary-bg-rgb), 0.8) 0%,
        rgba(var(--primary-bg-rgb), 0.5) 100%);
}
.editor-media-play-icon {
    color: var(--accent-color);
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.editor-media-card:hover .editor-media-play-icon {
    opacity: 0.9;
    transform: scale(1.1);
}
.editor-media-video-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    max-width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    opacity: 0.7;
}

/* ── Add media button (inside grid) ── */
.editor-media-add-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 140px;
    padding: 1.5rem 1rem;
    background: transparent;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.editor-media-add-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.04);
}
.editor-media-add-btn svg {
    opacity: 0.5;
    transition: opacity 0.2s;
}
.editor-media-add-btn:hover svg {
    opacity: 1;
}

/* ── Upload success badge ── */
.editor-media-upload-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Hide Django ClearableFileInput extra elements inside media cards ── */
.editor-media-replace-btn a,
.editor-media-card-dropzone a {
    display: none !important;
}
.editor-media-replace-btn br,
.editor-media-card-dropzone br {
    display: none !important;
}
.editor-media-replace-btn input[type="checkbox"],
.editor-media-card-dropzone input[type="checkbox"] {
    display: none !important;
}

/* ── Marked for delete state ── */
.editor-media-card--marked {
    border-color: rgba(229, 62, 62, 0.4) !important;
    opacity: 0.55;
    position: relative;
}
.editor-media-card--marked .editor-media-card-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(229, 62, 62, 0.08) 8px,
        rgba(229, 62, 62, 0.08) 16px
    );
    pointer-events: none;
}
.editor-media-card--marked .editor-media-card-overlay {
    opacity: 1;
    background: rgba(0, 0, 0, 0.65);
}

/* ── Subsection forms container ── */
.article-editor-form .subsection-forms {
    margin-top: 1.5rem;
    padding-top: 0;
    border-top: none;
}

/* ── Hide Django DELETE checkbox — toggled via JS ── */
.formset-delete-hidden {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── Remove buttons ── */
.article-editor-form .remove-section-btn,
.article-editor-form .remove-subsection-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.article-editor-form .remove-subsection-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
}
.article-editor-form .remove-section-btn:hover,
.article-editor-form .remove-subsection-btn:hover {
    color: #e53e3e;
    border-color: #e53e3e;
    background: rgba(229, 62, 62, 0.08);
}

/* ── Add section / subsection buttons ── */
.editor-add-section-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem;
    margin-top: 1.25rem;
    background: transparent;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    font-family: var(--font-headings);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.editor-add-section-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.04);
}
.editor-add-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.4rem 0.85rem;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.editor-add-sub-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ── Editor action bar ── */
/* ── Error banner at top of editor ── */
.editor-error-banner {
    background: rgba(229, 62, 62, 0.08);
    border: 1px solid rgba(229, 62, 62, 0.35);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    animation: editorErrorSlideIn 0.35s ease-out;
}
@keyframes editorErrorSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.editor-error-banner-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f56565;
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
}
.editor-error-banner-header svg {
    flex-shrink: 0;
}
.editor-error-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.editor-error-list li {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.3rem 0 0.3rem 1.5rem;
    position: relative;
}
.editor-error-list li::before {
    content: '•';
    position: absolute;
    left: 0.5rem;
    color: #e53e3e;
    font-weight: 700;
}
.editor-error-field {
    color: var(--text-color);
    font-weight: 600;
}

/* ── Action bar ── */
.editor-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding: 0;
}
.editor-actions .editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font-headings);
    letter-spacing: 0.02em;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s;
    text-decoration: none;
    line-height: 1.4;
}
.editor-btn--cancel {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.editor-btn--cancel:hover {
    border-color: var(--text-color);
    color: var(--text-color);
    background: rgba(var(--primary-bg-rgb), 0.3);
}
.editor-btn--save {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}
.editor-btn--save:hover {
    background: rgba(var(--accent-color-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.1);
}

/* Override .section-card default padding for editor */
.article-editor-form .section-card {
    padding: 0;
    margin-bottom: 0;
}

/* ── Responsive editor ── */
@media (max-width: 768px) {
    .editor-article-header .form-input[name*="title"] {
        font-size: 1.4rem;
    }
    .editor-section-title-wrap .form-input {
        font-size: 1.15rem;
    }
    .editor-subsection-title-wrap .form-input {
        font-size: 1rem;
    }
    .editor-card-toolbar { padding: 0.4rem 0.75rem; }
    .editor-card-toolbar--sub { padding: 0.35rem 0.65rem; }
    .editor-cta-fields {
        grid-template-columns: 1fr;
    }
    .editor-subsection {
        padding-left: 1rem;
    }
    .editor-section {
        padding: 1.25rem;
    }
    .editor-media-grid {
        grid-template-columns: 1fr 1fr;
    }
    .editor-media-card-preview {
        height: 120px;
    }
    .editor-media-card-preview--video {
        height: 100px;
    }
    .editor-actions {
        flex-direction: column-reverse;
    }
    .editor-actions .editor-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .editor-content-area {
        gap: 1.25rem;
    }
}

/* ======================================
   PARTNER TYPE BADGE
   ====================================== */
.partner-type-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    background: rgba(0, 200, 255, 0.15);
    color: var(--accent);
    border: 1px solid rgba(0, 200, 255, 0.25);
}

/* ======================================
   RELATED SECTIONS (article detail)
   ====================================== */
.related-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.related-section h3 {
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Related news card */
.related-news-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, transform 0.2s;
}
.related-news-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.related-news-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.related-news-card-img-placeholder {
    background: linear-gradient(135deg, #0a0f18, #141c2b);
}
.related-news-card-body {
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.related-news-card-category {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
}
.related-news-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}
.related-news-card-date {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Related entity card (partners / ventures) */
.related-entity-card {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, transform 0.2s;
}
.related-entity-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.related-entity-logo {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: contain;
    background: #0a0f18;
    flex-shrink: 0;
}
.related-entity-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    border: 1px solid var(--border);
}
.related-entity-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.related-entity-name {
    font-size: 0.9rem;
    font-weight: 600;
}
.related-entity-oneliner {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Mentioned members row */
.related-members-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}
.related-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 80px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}
a.related-member-card:hover {
    transform: translateY(-2px);
    color: var(--accent-color);
}
a.related-member-card:hover .related-member-avatar,
a.related-member-card:hover .related-member-avatar-placeholder {
    border-color: var(--accent-color);
}
.related-member-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.related-member-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--card-bg);
    border: 2px solid var(--border);
}
.related-member-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}
.related-member-role {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   ARTICLE REVIEW PIPELINE
   ===================================================== */
.review-pipeline {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 24px 32px;
    margin-bottom: 24px;
}
.review-pipeline-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.review-pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}
.review-pipeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--border-color, #cbd5e1);
    background: var(--card-bg, #ffffff);
    transition: all 0.3s ease;
}
.review-pipeline-step--done .review-pipeline-dot {
    background: var(--accent-color, #e94560);
    border-color: var(--accent-color, #e94560);
}
.review-pipeline-step--active .review-pipeline-dot {
    border-color: var(--accent-color, #e94560);
    background: var(--card-bg, #ffffff);
    box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.15);
}
.review-pipeline-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.review-pipeline-step--active .review-pipeline-label,
.review-pipeline-step--done .review-pipeline-label {
    color: var(--accent-color, #e94560);
}
.review-pipeline-connector {
    width: 60px;
    height: 3px;
    background: var(--border-color, #cbd5e1);
    margin-bottom: 24px;
}
.review-pipeline-connector--done {
    background: var(--accent-color, #e94560);
}
.review-pipeline-meta {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin-top: 16px;
}

.review-notes-alert {
    background: #fef3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.review-notes-alert-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #856404;
}
.review-notes-alert-header svg {
    color: #ffc107;
    flex-shrink: 0;
}
.review-notes-alert p {
    margin: 0;
    color: #856404;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ================================ */
/* Author AI Review Page            */
/* ================================ */

.review-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}
.review-empty-state h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

/* --- Review In Progress Banner --- */
.review-in-progress-banner {
    background: linear-gradient(135deg, rgba(57, 211, 187, 0.08) 0%, rgba(57, 211, 187, 0.03) 100%);
    border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.15);
}
.review-in-progress-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.review-in-progress-inner svg {
    flex-shrink: 0;
    color: var(--accent-color);
}
.review-in-progress-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
    animation: review-pulse 1.8s ease-in-out infinite;
}
@keyframes review-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(var(--accent-color-rgb), 0); }
}

/* --- Review Failed Banner --- */
.review-failed-banner {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.10) 0%, rgba(220, 53, 69, 0.04) 100%);
    border-bottom: 1px solid rgba(220, 53, 69, 0.2);
}
.review-failed-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.review-failed-inner > svg {
    flex-shrink: 0;
    color: #dc3545;
}
.review-failed-text {
    flex: 1;
    min-width: 0;
}
.review-failed-text span {
    color: var(--text-secondary);
}
.review-retry-form {
    flex-shrink: 0;
}
.review-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.08);
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.review-retry-btn:hover {
    background: rgba(var(--accent-color-rgb), 0.15);
    border-color: rgba(var(--accent-color-rgb), 0.35);
}
.review-retry-btn svg {
    flex-shrink: 0;
}

/* ── Sticky action bar ── */
.rv-sticky-actions {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.6rem 1.5rem;
    background: rgba(var(--primary-bg-rgb), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    margin: 0 -2rem 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.rv-sticky-edit-btn {
    padding: 0.5rem 1.4rem !important;
    font-size: 0.85rem !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
}
.rv-sticky-fix-btn {
    padding: 0.5rem 1.4rem !important;
    font-size: 0.85rem !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.rv-sticky-fix-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}
.rv-fix-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.rv-fix-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(var(--accent-color-rgb), 0.3);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: rv-spin 0.7s linear infinite;
}
@keyframes rv-spin {
    to { transform: rotate(360deg); }
}
/* ── Score hero ── */
.rv-score-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem 1.5rem;
    margin-bottom: 1.25rem;
}
.rv-score-ring {
    position: relative;
    width: 130px;
    height: 130px;
}
.rv-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.rv-ring-track {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
}
.rv-ring-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.73;
    stroke-dashoffset: 326.73;
}
.rv-score-ring--good .rv-ring-fill { stroke: var(--accent-color); }
.rv-score-ring--fair .rv-ring-fill { stroke: #F6AD55; }
.rv-score-ring--poor .rv-ring-fill { stroke: #ef4444; }

.rv-ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.rv-ring-value {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1;
    color: var(--text-primary);
}
.rv-ring-max {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.rv-score-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.rv-round-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.rv-score-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}
.rv-score-delta--up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}
.rv-score-delta--down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}
.rv-score-delta--same {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}
.rv-review-date {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ── Quick stats ── */
.rv-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.rv-stat-card {
    text-align: center;
    padding: 1rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}
.rv-stat-card--warn {
    border-color: rgba(246, 173, 85, 0.4);
    background: rgba(246, 173, 85, 0.05);
}
.rv-stat-card--danger {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}
.rv-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.rv-stat-card--warn .rv-stat-value { color: #F6AD55; }
.rv-stat-card--danger .rv-stat-value { color: #ef4444; }
.rv-stat-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Summary card ── */
.rv-summary-card {
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.rv-summary-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}
.rv-summary-card > p {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.rv-focus-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.78rem !important;
    color: var(--accent-color) !important;
    margin-top: 0.75rem !important;
    line-height: 1.5;
}
.rv-focus-hint svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ── Community flags ── */
.rv-flags-card {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.rv-flags-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ef4444;
    margin-bottom: 0.75rem;
}
.rv-flags-header svg { flex-shrink: 0; }
.rv-flags-intro {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}
.rv-flags-list {
    margin: 0;
    padding: 0 0 0 1.25rem;
    list-style: none;
}
.rv-flags-list li {
    font-size: 0.85rem;
    color: #ef4444;
    margin-bottom: 0.4rem;
    padding-left: 0.5rem;
}
.rv-flags-list li::before {
    content: "\26A0\FE0F";
    margin-right: 0.4rem;
}

/* ── SEO card with interactive checklist ── */
.rv-seo-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.rv-seo-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.rv-seo-header svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.rv-seo-header h3 {
    margin: 0;
    font-size: 1rem;
}
.rv-seo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.rv-seo-list li { margin-bottom: 0.5rem; }
.rv-seo-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.rv-seo-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.rv-seo-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    margin-top: 1px;
    transition: all 0.15s ease;
}
.rv-seo-checkmark::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}
.rv-seo-checkbox:checked + .rv-seo-checkmark {
    background: var(--accent-color);
    border-color: var(--accent-color);
}
.rv-seo-checkbox:checked + .rv-seo-checkmark::after {
    border-color: var(--text-on-accent);
    transform: rotate(45deg) scale(1);
}
.rv-seo-checkbox:checked ~ .rv-seo-text {
    text-decoration: line-through;
    opacity: 0.5;
}
.rv-seo-text { transition: opacity 0.15s ease; }

/* SEO score inline next to header */
.rv-seo-score-inline {
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Keyword coverage */
.rv-keyword-coverage {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.rv-keyword-group-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.rv-keyword-group--missing .rv-keyword-group-label {
    color: #ef4444;
}
.rv-keyword-group--missing .rv-keyword-group-label svg { stroke: #ef4444; }
.rv-keyword-group--found .rv-keyword-group-label {
    color: var(--accent-color);
}
.rv-keyword-group--found .rv-keyword-group-label svg { stroke: var(--accent-color); }

.rv-keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.rv-keyword-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-weight: 500;
}
.rv-keyword-tag--missing {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.rv-keyword-tag--found {
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
}

/* Structured SEO suggestion extras */
.rv-seo-suggestions-title {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}
.rv-seo-priority {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    margin-right: 0.3rem;
    vertical-align: middle;
}
.rv-seo-priority--high {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.rv-seo-priority--medium {
    background: rgba(246, 173, 85, 0.12);
    color: #F6AD55;
}
.rv-seo-location {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-left: 0.3rem;
    opacity: 0.8;
}
.rv-seo-location::before {
    content: "\2192 ";
}
.rv-seo-keywords {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--accent-color);
    margin-left: 0.3rem;
    opacity: 0.8;
}
.rv-seo-keywords::before {
    content: "[";
}
.rv-seo-keywords::after {
    content: "]";
}

/* ── Google SERP Preview ── */
.rv-serp-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
}
.rv-serp-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.rv-serp-card-header svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.rv-serp-card-header h3 {
    margin: 0;
    font-size: 1rem;
}

/* Explainer */
.rv-serp-explainer {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.rv-serp-explainer strong {
    color: var(--text-color);
}

/* Section labels */
.rv-serp-section {
    margin-bottom: 1.25rem;
}
.rv-serp-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}
.rv-serp-section-label--optimized {
    color: var(--accent-color);
}

/* Field source hints */
.rv-serp-field-hints {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.rv-serp-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.7;
}
.rv-serp-hint svg {
    flex-shrink: 0;
}

/* Editable SERP inputs */
.rv-serp-title-input {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(138, 180, 248, 0.25);
    border-radius: 4px;
    color: #8ab4f8;
    font-size: 1.1rem;
    line-height: 1.3;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.15rem;
    font-family: Arial, sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.rv-serp-title-input:focus {
    border-color: #8ab4f8;
}
.rv-serp-desc-input {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(189, 193, 198, 0.2);
    border-radius: 4px;
    color: #bdc1c6;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.15rem;
    font-family: Arial, sans-serif;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}
.rv-serp-desc-input:focus {
    border-color: #bdc1c6;
}
.rv-serp-char-count {
    font-size: 0.65rem;
    color: #70757a;
    text-align: right;
    margin-bottom: 0.3rem;
}
.rv-serp-char-count--warn {
    color: #ef4444;
}

/* Save to article row */
.rv-serp-apply-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.rv-serp-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.3);
    background: rgba(var(--accent-color-rgb), 0.08);
    color: var(--accent-color);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.rv-serp-apply-btn:hover:not(:disabled) {
    background: rgba(var(--accent-color-rgb), 0.15);
    border-color: var(--accent-color);
}
.rv-serp-apply-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.rv-serp-apply-btn--done {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.12);
}
.rv-serp-apply-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* SERP result mock */
.rv-serp-preview {
    position: relative;
}
.rv-serp-result {
    background: #202124;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: Arial, sans-serif;
}
.rv-serp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #bdc1c6;
    margin-bottom: 0.35rem;
}
.rv-serp-favicon {
    flex-shrink: 0;
}
.rv-serp-sep {
    color: #70757a;
}
.rv-serp-title {
    font-size: 1.15rem;
    color: #8ab4f8;
    line-height: 1.3;
    margin-bottom: 0.3rem;
    cursor: pointer;
}
.rv-serp-title:hover {
    text-decoration: underline;
}
.rv-serp-description {
    font-size: 0.82rem;
    color: #bdc1c6;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Labels */
.rv-serp-label {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.6rem;
}
.rv-serp-label--warn {
    background: rgba(246, 173, 85, 0.12);
    color: #F6AD55;
}
.rv-serp-label--good {
    background: rgba(var(--accent-color-rgb), 0.12);
    color: var(--accent-color);
}

/* Meta items */
.rv-serp-meta {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.rv-serp-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.rv-serp-meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.rv-serp-meta-value {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}
.rv-serp-meta-value svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.rv-serp-query {
    font-style: italic;
}
.rv-serp-estimate {
    color: var(--accent-color);
}

/* Indexing factors */
.rv-serp-factors {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.rv-serp-factors-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}
.rv-serp-factors ul {
    margin: 0;
    padding: 0 0 0 1.1rem;
    list-style: disc;
}
.rv-serp-factors li {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

/* ── Pending changes card ── */
.rv-pending-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    margin-top: 1.5rem;
}
.rv-pending-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}
.rv-pending-header h4 {
    margin: 0;
    font-size: 0.85rem;
    flex: 1;
}
.rv-pending-header svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}
.rv-pending-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: rgba(var(--accent-color-rgb), 0.12);
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 0.35rem;
}
.rv-pending-empty {
    text-align: center;
    padding: 1rem 0.5rem;
}
.rv-pending-empty p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0.5rem 0 0;
}
.rv-pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rv-pending-item {
    position: relative;
    padding: 0.6rem 1.8rem 0.6rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: rgba(var(--accent-color-rgb), 0.03);
    transition: border-color 0.2s;
}
.rv-pending-item:hover {
    border-color: rgba(var(--accent-color-rgb), 0.3);
}
.rv-pending-item-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}
.rv-pending-item-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rv-pending-item-field {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.rv-pending-item-preview {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}
.rv-pending-remove {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 20px;
    height: 20px;
    border: none;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    font-family: inherit;
}
.rv-pending-remove:hover {
    background: rgba(239, 68, 68, 0.2);
}
.rv-pending-actions {
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.rv-apply-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.rv-apply-all-btn:hover:not(:disabled) {
    background: rgba(var(--accent-color-rgb), 0.2);
}
.rv-apply-all-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.rv-clear-btn {
    display: block;
    width: 100%;
    padding: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: inherit;
}
.rv-clear-btn:hover {
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
}

/* Stage button (replaces save button) */
.rv-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
    color: #60a5fa;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.rv-apply-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: #60a5fa;
}
.rv-apply-btn--done {
    background: rgba(var(--accent-color-rgb), 0.1) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}
.rv-editable-suggestion--staged {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.04);
}

/* ── Section feedback ── */
.rv-sections-header {
    margin-bottom: 1.25rem;
}
.rv-sections-header h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}
.rv-sections-header p {
    font-size: 0.82rem;
    margin: 0;
}
.rv-section-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--border-color);
    transition: border-color 0.2s;
}
.rv-section-card--good { border-left-color: var(--accent-color); }
.rv-section-card--fair { border-left-color: #F6AD55; }
.rv-section-card--poor { border-left-color: #ef4444; }

.rv-section-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.rv-section-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.rv-section-title-group h4 {
    margin: 0;
    font-size: 0.95rem;
}
.rv-priority-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

/* Score with mini bar */
.rv-section-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.rv-section-score-num {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-headings);
    line-height: 1;
}
.rv-section-score--good .rv-section-score-num,
.rv-section-score--good { color: var(--accent-color); }
.rv-section-score--fair .rv-section-score-num,
.rv-section-score--fair { color: #F6AD55; }
.rv-section-score--poor .rv-section-score-num,
.rv-section-score--poor { color: #ef4444; }

.rv-section-score-bar {
    display: block;
    width: 48px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}
.rv-section-score-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}
.rv-section-score--good .rv-section-score-fill { background: var(--accent-color); }
.rv-section-score--fair .rv-section-score-fill { background: #F6AD55; }
.rv-section-score--poor .rv-section-score-fill { background: #ef4444; }

.rv-section-feedback {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.75rem;
}
.rv-section-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.rv-flag-tag {
    display: inline-block;
    font-size: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

/* Subsections */
.rv-subsection {
    margin-left: 1.25rem;
    border-left: 2px solid var(--border-color);
    padding-left: 1rem;
    margin-top: 0.75rem;
}
.rv-subsection-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rv-subsection-top h5 {
    margin: 0;
    font-size: 0.88rem;
}
.rv-subsection-score {
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
}
.rv-subsection-feedback {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0;
    line-height: 1.5;
    font-style: italic;
}

/* ── Review content blocks (current, analysis, suggested) ── */
.rv-content-block {
    margin-top: 0.75rem;
    border-radius: 8px;
    overflow: hidden;
}
.rv-content-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.rv-content-label::-webkit-details-marker { display: none; }
.rv-content-label::after {
    content: '';
    margin-left: auto;
    border: 4px solid transparent;
    border-top-color: var(--text-secondary);
    transform: translateY(2px);
    transition: transform 0.2s;
}
details[open] > .rv-content-label::after {
    transform: rotate(180deg) translateY(2px);
}
.rv-content-label--static {
    cursor: default;
    padding: 0.5rem 0.75rem 0.25rem;
}
.rv-content-label--static::after { display: none; }
.rv-content-body {
    padding: 0.5rem 0.75rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
}

/* Current content block */
.rv-content-block--current {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
}
.rv-content-block--current .rv-content-label {
    color: var(--text-secondary);
}

/* Analysis block */
.rv-content-block--analysis {
    background: rgba(var(--accent-color-rgb), 0.04);
    border: 1px solid rgba(var(--accent-color-rgb), 0.12);
}
.rv-content-block--analysis .rv-content-label {
    color: var(--accent-color);
}
.rv-analysis-text {
    padding: 0.25rem 0.75rem 0.75rem;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Suggested optimization block */
/* Field groups inside section cards */
.rv-field-group {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
}
.rv-field-group-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}
.rv-field-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    opacity: 0.7;
}
.rv-field-score {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    letter-spacing: 0.02em;
}
.rv-field-score--good {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
}
.rv-field-score--fair {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}
.rv-field-score--poor {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}
.rv-current-value {
    font-size: 0.88rem;
    color: var(--text-color);
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}
.rv-current-value--updated {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.06);
    color: var(--accent-color);
}
.rv-suggested-readonly {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}
.rv-suggested-readonly-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #60a5fa;
    flex-shrink: 0;
}
.rv-content-block--suggested-ro {
    background: rgba(59, 130, 246, 0.03);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    margin-top: 0.4rem;
}
.rv-content-block--suggested-ro .rv-content-label {
    color: #60a5fa;
}

/* Editable suggestion block */
.rv-editable-suggestion {
    margin-top: 0.5rem;
    padding: 0.6rem 0.7rem;
    background: rgba(59, 130, 246, 0.04);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
}
.rv-editable-suggestion--saved {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.04);
}
.rv-editable-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #60a5fa;
    margin-bottom: 0.4rem;
}
.rv-editable-header svg {
    flex-shrink: 0;
}
.rv-editable-input {
    width: 100%;
    font-size: 0.88rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
}
.rv-editable-textarea {
    width: 100%;
    font-size: 0.82rem;
    line-height: 1.6;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    resize: vertical;
    min-height: 80px;
}

/* ── Approve & Publish card ── */
.rv-approve-card {
    margin-top: 2rem;
    border: 2px solid rgba(var(--accent-color-rgb), 0.5);
    border-radius: 14px;
    padding: 1.75rem;
    background: rgba(var(--accent-color-rgb), 0.08);
    box-shadow: 0 0 20px rgba(var(--accent-color-rgb), 0.1), 0 4px 12px rgba(0,0,0,0.15);
}
.rv-approve-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
}
.rv-approve-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.rv-approve-info svg {
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 0.1rem;
    width: 26px;
    height: 26px;
}
.rv-approve-info strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
    font-family: var(--font-headings);
}
.rv-approve-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.rv-publish-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    background: var(--accent-color);
    color: var(--bg-color);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-headings);
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.rv-publish-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--accent-color-rgb), 0.35);
}
.rv-publish-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.rv-publish-btn--done {
    background: var(--accent-color);
}

/* Save button (legacy — kept for non-editor readonly views) */

/* ── Bottom actions ── */
.rv-bottom-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin: 2rem 0 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
}
.rv-bottom-actions .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Review history timeline ── */
.rv-history {
    margin-bottom: 1.5rem;
}
.rv-history summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.rv-history summary svg {
    color: var(--text-secondary);
}
.rv-history-timeline {
    padding: 0.75rem 0 0 0.5rem;
}
.rv-history-entry {
    display: flex;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    position: relative;
}
.rv-history-entry:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}
.rv-history-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 50%;
    background: var(--border-color);
    margin-top: 2px;
    z-index: 1;
}
.rv-history-entry--current .rv-history-dot {
    background: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.2);
}
.rv-history-content {
    flex: 1;
    min-width: 0;
}
.rv-history-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.rv-history-round {
    font-weight: 600;
    font-size: 0.88rem;
}
.rv-history-type {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.rv-history-date {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* ── Review page responsive ── */
@media (max-width: 640px) {
    .rv-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .rv-score-hero {
        padding: 1.5rem 0.5rem 1rem;
    }
    .rv-score-ring {
        width: 110px;
        height: 110px;
    }
    .rv-ring-value {
        font-size: 2rem;
    }
    .rv-sticky-actions {
        margin: 0 -1rem 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .rv-section-top {
        flex-direction: column;
        gap: 0.5rem;
    }
    .rv-section-score {
        align-items: flex-start;
    }
}

.form-hint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    margin-top: 4px;
}
.form-hint--auto {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-color);
    opacity: 0.8;
}
.form-hint--auto svg {
    flex-shrink: 0;
}
.form-input--readonly {
    opacity: 0.55;
    cursor: not-allowed;
    border-style: dashed !important;
}

@media (max-width: 768px) {
    .review-pipeline {
        padding: 16px;
    }
    .review-pipeline-connector {
        width: 30px;
    }
    .review-pipeline-dot {
        width: 24px;
        height: 24px;
    }
}

.review-pending-banner {
    background: var(--accent-color, #e94560);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 0.95rem;
}
.hub-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
}
.bulk-actions-bar {
    margin-top: 16px;
}
.bulk-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.bulk-reject-panel {
    margin-top: 12px;
    padding: 16px;
    background: var(--surface-bg, #f8f9fa);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
}
.bulk-reject-panel textarea {
    width: 100%;
    margin-bottom: 10px;
}

/* ===========================
   Activity Feed — Timeline
   =========================== */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Date group heading */
.activity-date-group {
    margin-bottom: 0.25rem;
}
.activity-date-label {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.75rem 0;
}
.activity-date-label span {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    background: var(--secondary-bg);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

/* Timeline rail */
.activity-timeline {
    padding-left: 0.25rem;
}
.activity-entry {
    display: flex;
    gap: 0;
    align-items: stretch;
    min-height: 0;
}
.activity-entry-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
    padding-top: 1.15rem;
}
.activity-entry-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--border-color);
    border: 2px solid var(--secondary-bg);
    box-shadow: 0 0 0 2px var(--border-color);
    position: relative;
    z-index: 1;
}
.activity-entry-line {
    width: 2px;
    flex: 1;
    background: var(--border-color);
    opacity: 0.4;
    margin: 2px 0;
}

/* Dot color per action */
.activity-dot-create { background: #28a745; box-shadow: 0 0 0 2px rgba(40,167,69,0.25); }
.activity-dot-edit { background: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }
.activity-dot-delete { background: #dc3545; box-shadow: 0 0 0 2px rgba(220,53,69,0.25); }
.activity-dot-publish,
.activity-dot-approve { background: var(--accent-color); box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb),0.25); }
.activity-dot-reject { background: #dc3545; box-shadow: 0 0 0 2px rgba(220,53,69,0.25); }
.activity-dot-submit,
.activity-dot-status_change { background: #e0a800; box-shadow: 0 0 0 2px rgba(224,168,0,0.25); }
.activity-dot-register { background: #6f42c1; box-shadow: 0 0 0 2px rgba(111,66,193,0.25); }
.activity-dot-upload { background: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }
.activity-dot-login,
.activity-dot-logout { background: #6c757d; box-shadow: 0 0 0 2px rgba(108,117,125,0.25); }
.activity-dot-role_change { background: #6f42c1; box-shadow: 0 0 0 2px rgba(111,66,193,0.25); }
.activity-dot-comment { background: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }
.activity-dot-bulk_action { background: #fd7e14; box-shadow: 0 0 0 2px rgba(253,126,20,0.25); }
.activity-dot-translate { background: #17a2b8; box-shadow: 0 0 0 2px rgba(23,162,184,0.25); }

/* Card */
.activity-entry-card {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    margin: 0.25rem 0 0.25rem 0.65rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.activity-entry-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--border-color);
}
.activity-entry-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Avatar */
.activity-entry-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-top: 1px;
}
.activity-entry-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.activity-entry-avatar .hub-member-avatar-fallback {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
}

/* Body */
.activity-entry-body {
    flex: 1;
    min-width: 0;
}
.activity-entry-headline {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    line-height: 1.5;
}
.activity-entry-user {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.activity-entry-object {
    color: var(--accent-color);
    font-weight: 500;
    font-size: 0.86rem;
}
.activity-entry-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0.15rem 0 0;
    line-height: 1.45;
}
.activity-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.activity-meta-chip {
    font-size: 0.72rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    color: var(--text-secondary);
}
.activity-meta-key {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 0.2rem;
}

/* Field-level change tracking */
.activity-changes-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}
.activity-change-item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.4;
    flex-wrap: wrap;
}
.activity-change-field {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 80px;
    flex-shrink: 0;
}
.activity-change-old {
    color: #e74c3c;
    text-decoration: line-through;
    opacity: 0.8;
    word-break: break-word;
}
.activity-change-arrow {
    color: var(--text-secondary);
    flex-shrink: 0;
}
.activity-change-new {
    color: #2ecc71;
    font-weight: 500;
    word-break: break-word;
}

/* Timestamp */
.activity-entry-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    opacity: 0.6;
    padding-top: 2px;
    min-width: 36px;
    text-align: right;
}

/* System avatar (AI CTO) */
.activity-avatar-system {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #17a2b8, #6f42c1);
    color: #fff;
}
.activity-avatar-system svg {
    width: 16px;
    height: 16px;
}

/* Expandable card */
.activity-expandable {
    cursor: pointer;
}
.activity-expand-icon {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: transform 0.2s;
    margin-left: auto;
}
.activity-entry-card.expanded .activity-expand-icon {
    transform: rotate(180deg);
}

/* Details panel */
.activity-entry-details {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}
.activity-detail-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.3rem 0;
    font-size: 0.8rem;
    line-height: 1.5;
}
.activity-detail-label {
    flex-shrink: 0;
    width: 90px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 1px;
}
.activity-detail-value {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    word-break: break-word;
}
.activity-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Action badge for translate */
.activity-action-translate {
    background: rgba(23,162,184,0.15);
    color: #17a2b8;
}

/* Empty state */
.activity-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--text-secondary);
    opacity: 0.5;
}
.activity-empty svg {
    opacity: 0.4;
}
.activity-empty p {
    font-size: 0.92rem;
}

/* Action badges */
.activity-action-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    vertical-align: middle;
}
.activity-action-create { background: rgba(40,167,69,0.12); color: #4cdf72; }
.activity-action-edit { background: rgba(0,123,255,0.12); color: #5aa3ff; }
.activity-action-delete { background: rgba(220,53,69,0.12); color: #e8616e; }
.activity-action-publish { background: rgba(57,211,187,0.12); color: var(--accent-color); }
.activity-action-approve { background: rgba(57,211,187,0.12); color: var(--accent-color); }
.activity-action-reject { background: rgba(220,53,69,0.12); color: #e8616e; }
.activity-action-submit { background: rgba(255,193,7,0.12); color: #f0c040; }
.activity-action-register { background: rgba(111,66,193,0.12); color: #a78bfa; }
.activity-action-upload { background: rgba(0,123,255,0.12); color: #5aa3ff; }
.activity-action-login { background: rgba(108,117,125,0.08); color: #8c959d; }
.activity-action-logout { background: rgba(108,117,125,0.08); color: #8c959d; }
.activity-action-status_change { background: rgba(255,193,7,0.12); color: #f0c040; }
.activity-action-role_change { background: rgba(111,66,193,0.12); color: #a78bfa; }
.activity-action-comment { background: rgba(0,123,255,0.12); color: #5aa3ff; }
.activity-action-bulk_action { background: rgba(253,126,20,0.12); color: #ffa04d; }

/* Responsive: collapse rail on small screens */
@media (max-width: 640px) {
    .activity-entry-rail { display: none; }
    .activity-entry-card { margin-left: 0; }
    .activity-entry-row { flex-wrap: wrap; }
    .activity-entry-time { width: 100%; text-align: left; margin-top: 0.3rem; }
}

/* =================================================================== */
/* Member Profile (public)                                             */
/* =================================================================== */

.member-profile-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

/* Hero */
.member-profile-hero {
    position: relative;
    padding: 3rem 0 2rem;
    overflow: hidden;
}
.member-profile-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 60% at 30% 50%, rgba(57,211,187,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 20%, rgba(99,102,241,0.05) 0%, transparent 55%);
    pointer-events: none;
}
.member-profile-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    /* Match the .member-profile-page wrapper width so the inner content
       stays comfortably readable while the hero (and its gradient bg)
       spans the full viewport behind it. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
/* Avatar wrap is the ring container. The ring itself is rendered via
   a gradient ::before that masks to a 3px stroke, tinted per tier.
   The avatar img sits inside as a normal element, and the tier chip
   overlays at bottom-right (sized to feel embedded on the rim). */
.member-profile-avatar-wrap {
    flex-shrink: 0;
    position: relative;
    width: 152px;
    height: 152px;
    border-radius: 50%;
    padding: 6px;             /* room for ring stroke + chip */
}
.member-profile-avatar-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 3px;
    /* Default ring (Member tier or no tier) — neutral accent halo */
    background: linear-gradient(135deg,
        rgba(var(--accent-color-rgb), 0.55),
        rgba(var(--accent-color-rgb), 0.15));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
/* Per-tier ring tints */
.member-profile-avatar-wrap--member_plus::before {
    background: linear-gradient(135deg, var(--accent-color), #2BB89F 60%, rgba(var(--accent-color-rgb), 0.2));
}
.member-profile-avatar-wrap--partner::before {
    background: linear-gradient(135deg, #818CF8, #c084fc 60%, rgba(129, 140, 248, 0.2));
}
.member-profile-avatar-wrap--member::before {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.45), rgba(var(--accent-color-rgb), 0.1));
}
.member-profile-avatar-wrap--guest::before {
    background: linear-gradient(135deg, rgba(160,174,192,0.45), rgba(160,174,192,0.1));
}
.member-profile-avatar-wrap--admin::before {
    background: linear-gradient(135deg, #ef4444, #f97316 60%, rgba(239,68,68,0.2));
}
.member-profile-avatar-wrap--agent::before {
    background: linear-gradient(135deg, #818CF8, #6366f1 60%, rgba(99,102,241,0.2));
}

.member-profile-avatar {
    position: relative;
    z-index: 1;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--secondary-bg);
    display: block;
}
.member-profile-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--accent-color);
    font-family: var(--font-headings);
}

/* Tier chip overlay — bottom-right corner, sits on the rim */
.member-profile-tier-chip {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    border: 3px solid var(--secondary-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.member-profile-tier-chip--member_plus { background: linear-gradient(135deg, var(--accent-color), #2BB89F); }
.member-profile-tier-chip--partner     { background: linear-gradient(135deg, #818CF8, #c084fc); }
.member-profile-tier-chip--member      { background: rgba(var(--accent-color-rgb), 0.7); }
.member-profile-tier-chip--guest       { background: #6b7280; }
.member-profile-tier-chip--admin       { background: linear-gradient(135deg, #ef4444, #f97316); }
.member-profile-tier-chip--agent       { background: linear-gradient(135deg, #818CF8, #6366f1); }

/* Column under the avatar — holds the picture bubble + role pills */
.member-profile-avatar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

/* Hub-role pills directly under the avatar — soft pill style, no
   resemblance to the inline tier-badge on the right column. */
.member-profile-role-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    max-width: 180px;
}
.member-profile-role-pill {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.1);
    border: 1px solid rgba(var(--accent-color-rgb), 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1.2;
}
/* Per-role tinting for the high-prestige slots */
.member-profile-role-pill--president,
.member-profile-role-pill--vice_president {
    color: #fff;
    background: linear-gradient(135deg, rgba(239,68,68,0.85), rgba(249,115,22,0.85));
    border-color: rgba(239,68,68,0.6);
}
.member-profile-role-pill--cfo,
.member-profile-role-pill--treasurer,
.member-profile-role-pill--secretary {
    color: #fff;
    background: linear-gradient(135deg, rgba(99,102,241,0.85), rgba(129,140,248,0.85));
    border-color: rgba(99,102,241,0.55);
}
.member-profile-role-pill--startup_manager,
.member-profile-role-pill--community_manager,
.member-profile-role-pill--editorial {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-color), #2BB89F);
    border-color: rgba(var(--accent-color-rgb), 0.55);
}
.member-profile-role-pill--advisor,
.member-profile-role-pill--mentor {
    color: #fff;
    background: linear-gradient(135deg, rgba(245,158,11,0.85), rgba(251,191,36,0.85));
    border-color: rgba(245,158,11,0.55);
}

/* Social icons row — under the name, brand-coloured tiles */
.member-profile-link-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0.7rem;
}
.member-profile-link-icons .brand-link {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    aspect-ratio: auto;
}

/* Website link list — sidebar Connect card */
.website-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.website-link-item { margin: 0; }
.website-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.website-link:hover {
    border-color: rgba(var(--accent-color-rgb), 0.45);
    background: rgba(var(--accent-color-rgb), 0.06);
    color: var(--accent-color);
}
.website-link svg { color: var(--accent-color); flex-shrink: 0; }
.website-link-label {
    font-size: 0.85rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-profile-identity {
    flex: 1;
    min-width: 250px;
}
.member-profile-name {
    font-family: var(--font-headings);
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    color: var(--text-primary);
    line-height: 1.2;
}
.member-profile-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.member-profile-nickname {
    display: inline-block;
    margin-left: 0.7rem;
    color: var(--accent-color);
    font-family: 'Caveat', 'Brush Script MT', cursive;
    font-size: 1.5rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.01em;
    vertical-align: baseline;
    opacity: 0.95;
}
.member-profile-nickname::before { content: '“'; opacity: 0.6; margin-right: 0.05rem; }
.member-profile-nickname::after  { content: '”'; opacity: 0.6; margin-left: 0.05rem; }

/* Brand-coloured social link tiles — used in the sidebar Connect card.
   Each tile uses the brand background + white logo (canonical brand
   presentation). */
.brand-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 0.5rem;
}
.brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.brand-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

.brand-link--github    { background: #24292e; }
.brand-link--linkedin  { background: #0A66C2; }
.brand-link--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
/* Per-tile variants when a member has multiple links of the same kind.
   For Instagram: keep the brand vibe but rotate hue/angle so each tile
   feels distinct in a row of identical icons. */
.brand-link--instagram.brand-link--v0 { background: linear-gradient(45deg, #f09433, #e6683c 35%, #dc2743 75%, #cc2366); }   /* warm sunset */
.brand-link--instagram.brand-link--v1 { background: linear-gradient(135deg, #dc2743, #cc2366 50%, #bc1888); }              /* pink/magenta */
.brand-link--instagram.brand-link--v2 { background: linear-gradient(225deg, #bc1888, #6366f1 60%, #0ea5e9); }              /* purple→indigo→cyan */
.brand-link--instagram.brand-link--v3 { background: linear-gradient(45deg, #f59e0b 0%, #ef4444 50%, #dc2743 100%); }       /* amber→red */
.brand-link--instagram.brand-link--v4 { background: linear-gradient(135deg, #10b981, #6366f1 50%, #ec4899); }              /* teal→indigo→pink */
.brand-link--facebook  { background: #1877F2; }
.brand-link--twitter   { background: #000; }
.brand-link--youtube   { background: #FF0000; }
.brand-link--website   { background: linear-gradient(135deg, var(--accent-color), #2BB89F); }
.brand-link--other     { background: var(--border-color); }
.member-profile-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--accent-color);
    text-decoration: none;
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(var(--accent-color-rgb), 0.25);
    border-radius: 6px;
    transition: all 0.2s;
}
.member-profile-edit-link:hover {
    background: rgba(var(--accent-color-rgb), 0.08);
    border-color: rgba(var(--accent-color-rgb), 0.5);
}

/* Two-column body */
.member-profile-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    margin-top: 1.5rem;
}
.member-profile-main {
    min-width: 0;
}
.member-profile-section {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.member-profile-section-title {
    font-family: var(--font-headings);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.member-profile-bio {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}
.member-profile-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}
.member-profile-skill {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    background: rgba(var(--accent-color-rgb), 0.06);
    border: 1px solid rgba(var(--accent-color-rgb), 0.15);
    color: var(--accent-color);
    font-size: 0.78rem;
    border-radius: 12px;
}

/* Sidebar */
.member-profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sidebar-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
}
.sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.sidebar-card-header svg {
    color: var(--accent-color);
    opacity: 0.7;
}
.sidebar-card-header h4 {
    margin: 0;
    flex: 1;
    font-size: 0.78rem;
    font-weight: 600;
}
.sidebar-card-note {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.7;
}
.sidebar-coming-soon {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.08);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.sidebar-card--placeholder {
    opacity: 0.7;
}

/* External links list */
.member-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.member-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: rgba(var(--primary-bg-rgb), 0.4);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.25s;
}
.member-link:hover {
    border-color: rgba(var(--accent-color-rgb), 0.3);
    background: rgba(var(--accent-color-rgb), 0.04);
    transform: translateX(2px);
}
.member-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    flex-shrink: 0;
    opacity: 0.7;
}
.member-link:hover .member-link-icon { opacity: 1; }
.member-link-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.member-link--instagram .member-link-icon { color: #E4405F; }
.member-link--facebook .member-link-icon { color: #1877F2; }
.member-link--twitter .member-link-icon { color: var(--text-primary); }
.member-link--linkedin .member-link-icon { color: #0A66C2; }
.member-link--github .member-link-icon { color: var(--text-primary); }
.member-link--youtube .member-link-icon { color: #FF0000; }

/* Become Member CTA */
.sidebar-card--cta {
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.08), rgba(99,102,241,0.06));
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
}
.become-member-cta-title {
    font-family: var(--font-headings);
    font-size: 1.05rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.become-member-cta-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 1rem;
}
.become-member-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    justify-content: center;
    padding: 0.6rem 1rem;
    background: var(--accent-color);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
}
.become-member-btn:hover {
    background: #2bb5a0;
    transform: translateY(-1px);
}

/* Modal */
.become-member-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.become-member-modal.is-open { display: flex; }
.become-member-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}
.become-member-modal-content {
    position: relative;
    max-width: 460px;
    width: 90%;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.become-member-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
}
.become-member-modal-icon {
    display: flex;
    justify-content: center;
    color: var(--accent-color);
    margin-bottom: 1rem;
}
.become-member-modal-content h3 {
    font-family: var(--font-headings);
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.become-member-modal-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.become-member-waitlist-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.become-member-success {
    text-align: center;
}
.become-member-success svg { margin-bottom: 0.5rem; }

/* Other members carousel */
.member-profile-other {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.member-profile-other-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.member-profile-other-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.25s;
}
.member-profile-other-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.3);
    transform: translateY(-2px);
}
.member-profile-other-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}
.member-profile-other-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    color: var(--accent-color);
    font-weight: 700;
    font-family: var(--font-headings);
}
.member-profile-other-name {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
.member-profile-other-footer {
    text-align: center;
    margin-top: 1.25rem;
}
.member-profile-other-link {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.9rem;
}
.member-profile-other-link:hover { text-decoration: underline; }

/* Public Members directory */
.public-members-page {
    max-width: 1200px;
    margin: 0 auto;
}
.public-members-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2rem;
}
.public-members-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.public-members-filters .form-input {
    flex: 1;
    min-width: 180px;
}
.public-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}
.public-member-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem 1.25rem;
    background: linear-gradient(180deg, rgba(var(--accent-color-rgb), 0.04), var(--secondary-bg) 60%);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
}
.public-member-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% -10%, rgba(var(--accent-color-rgb), 0.18), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.public-member-card:hover {
    border-color: rgba(var(--accent-color-rgb), 0.45);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(var(--accent-color-rgb), 0.1);
}
.public-member-card:hover::before { opacity: 1; }

.public-member-card--featured {
    border-color: rgba(var(--accent-color-rgb), 0.35);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb), 0.08), var(--secondary-bg) 70%),
        linear-gradient(135deg, rgba(129, 140, 248, 0.08), transparent);
}
.public-member-card--featured .public-member-card-avatar-wrap::after {
    background: linear-gradient(135deg, var(--accent-color), #818CF8);
}

.public-member-card-avatar-wrap {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    padding: 3px;
    background: rgba(var(--accent-color-rgb), 0.18);
    z-index: 1;
}
.public-member-card-avatar-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.5), rgba(var(--accent-color-rgb), 0.1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.public-member-card-avatar {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.public-member-card-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg);
    color: var(--accent-color);
    font-weight: 700;
    font-family: var(--font-headings);
    font-size: 1.4rem;
}

.public-member-card-body {
    width: 100%;
    min-width: 0;
    z-index: 1;
}
.public-member-card-name {
    font-family: var(--font-headings);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.4rem 0 0.1rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.public-member-card-nickname {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0 0 0.6rem;
    opacity: 0.85;
}
.public-member-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin: 0.55rem 0 0.6rem;
}
.public-member-card-badges .tier-badge,
.public-member-card-badges .hub-role-badge {
    font-size: 0.7rem;
    padding: 0.22rem 0.6rem;
}
.public-member-card-bio {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0.4rem 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.public-member-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.public-member-card-skill {
    font-size: 0.68rem;
    padding: 0.18rem 0.55rem;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}
.public-member-card-skill--more {
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
    border-color: rgba(var(--accent-color-rgb), 0.2);
}

@media (max-width: 480px) {
    .public-members-grid { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 900px) {
    .member-profile-body,
    .public-members-layout {
        grid-template-columns: 1fr;
    }
    .member-profile-name { font-size: 1.7rem; }
    .member-profile-avatar { width: 100px; height: 100px; }
    .member-profile-avatar--placeholder { font-size: 1.8rem; }
}

/* Member profile edit — links formset */
.member-links-fieldset {
    margin-top: 1.5rem;
    padding: 0;
    border: 0;
}
.member-links-fieldset legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}
/* Rows are separated by a hairline, not framed as cards: a list of links is a
   list, and the icon carries the identity of each one. */
.member-link-form-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: .8rem .1rem;
    margin-bottom: 0;
}
.member-link-form-row:last-of-type { border-bottom: 0; }
.member-link-icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    margin-top: 1.35rem;          /* aligns with the inputs, not their labels */
    border-radius: 10px;
    background: rgba(var(--accent-color-rgb), .1);
    color: var(--accent-color);
}
.member-link-form-row > .member-link-form-fields { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
    .member-link-icon { margin-top: 0; }
    .member-link-form-row { gap: .55rem; }
}
.member-link-form-fields {
    display: grid;
    /* kind (auto) · label (1fr) · url (2fr — widest) · order (80px) */
    grid-template-columns: minmax(120px, auto) minmax(0, 1fr) minmax(0, 2fr) 80px;
    gap: 0.6rem;
    align-items: end;
}
.member-link-form-fields .form-group { margin: 0; min-width: 0; }
.member-link-form-fields .form-group--wide { grid-column: span 1; }
.member-link-form-fields .form-group--narrow { grid-column: span 1; }
@media (max-width: 700px) {
    .member-link-form-fields {
        grid-template-columns: 1fr 1fr;
    }
    .member-link-form-fields .form-group--wide { grid-column: 1 / -1; }
}

/* ================================ */
/* Welcome setup page (password)    */
/* ================================ */
.welcome-setup-section {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background:
        radial-gradient(circle at 20% 10%, rgba(var(--accent-color-rgb), 0.10), transparent 45%),
        radial-gradient(circle at 80% 90%, rgba(99, 102, 241, 0.08), transparent 45%);
}

.welcome-setup-card {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 2.5rem 2rem 2rem;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--accent-color-rgb), 0.18);
    border-radius: 20px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    overflow: hidden;
}

.welcome-setup-glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(var(--accent-color-rgb), 0.22), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.welcome-setup-card > *:not(.welcome-setup-glow) {
    position: relative;
    z-index: 1;
}

.welcome-setup-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--accent-color-rgb), 0.18), rgba(var(--accent-color-rgb), 0.04));
    border: 1px solid rgba(var(--accent-color-rgb), 0.35);
    border-radius: 18px;
    color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(var(--accent-color-rgb), 0.18);
}

.welcome-setup-title {
    text-align: center;
    margin: 0 0 0.5rem;
    font-family: var(--font-headings);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.welcome-setup-intro {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}
.welcome-setup-intro strong {
    color: var(--accent-color);
    font-weight: 600;
}

.welcome-setup-errors {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
}

.welcome-setup-form { display: flex; flex-direction: column; gap: 1.25rem; }

.welcome-field { display: flex; flex-direction: column; gap: 0.4rem; }

.welcome-field-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.welcome-field-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.welcome-field-input {
    width: 100%;
    padding: 0.95rem 3rem 0.95rem 1rem;
    background: rgba(10, 15, 24, 0.7);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.welcome-field-input::placeholder { color: rgba(160, 174, 192, 0.55); }
.welcome-field-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(10, 15, 24, 0.9);
    box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb), 0.18);
}

.welcome-field-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.welcome-field-toggle:hover { color: var(--accent-color); background: rgba(var(--accent-color-rgb), 0.08); }
.welcome-field-toggle:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.welcome-field-help {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0.1rem 0 0;
    opacity: 0.85;
}
.welcome-field-help ul, .welcome-field-help ol { padding-left: 1.1rem; margin: 0.25rem 0; }

.welcome-field-match {
    font-size: 0.8rem;
    margin: 0.1rem 0 0;
    min-height: 1em;
    font-weight: 500;
}
.welcome-field-match.is-ok { color: var(--accent-color); }
.welcome-field-match.is-bad { color: #EF4444; }

.welcome-strength {
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.welcome-strength-bar {
    flex: 1;
    height: 6px;
    background: rgba(45, 55, 72, 0.6);
    border-radius: 3px;
    overflow: hidden;
}
.welcome-strength-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--border-color);
    border-radius: 3px;
    transition: width 0.25s ease, background 0.2s ease;
}
.welcome-strength-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 70px;
    text-align: right;
    transition: color 0.2s ease;
}

.welcome-setup-submit {
    margin-top: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--accent-color), #2BB89F);
    color: var(--text-on-accent);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.15s ease;
    box-shadow: 0 8px 22px rgba(var(--accent-color-rgb), 0.28);
}
.welcome-setup-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(var(--accent-color-rgb), 0.38);
    filter: brightness(1.05);
}
.welcome-setup-submit:active { transform: translateY(0); filter: brightness(0.98); }

.welcome-setup-note {
    margin-top: 1.75rem;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(var(--accent-color-rgb), 0.06);
    border: 1px solid rgba(var(--accent-color-rgb), 0.18);
    border-radius: 10px;
    color: var(--text-secondary);
}
.welcome-setup-note svg { color: var(--accent-color); flex-shrink: 0; margin-top: 2px; }
.welcome-setup-note p { margin: 0; font-size: 0.8rem; line-height: 1.5; }

@media (max-width: 480px) {
    .welcome-setup-card { padding: 2rem 1.25rem 1.5rem; border-radius: 16px; }
    .welcome-setup-title { font-size: 1.4rem; }
    .welcome-setup-icon { width: 60px; height: 60px; }
}

/* Draft profile banner */
.draft-profile-banner {
    background: linear-gradient(90deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02));
    border: 1px solid rgba(245,158,11,0.25);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.draft-profile-banner svg {
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.draft-profile-banner strong { color: var(--text-primary); }

/* Inline link-styled button (used for "Manifesta interesse" on login) */
.auth-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-color);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.auth-link-btn:hover { color: #2bb5a0; }

/* ================================ */
/* Member journey timeline          */
/* ================================ */
/* ── Member journey timeline ──
   Sized for the sidebar (compact). Marker column = 22px; the vertical
   rail is positioned at left:10px so its 2px stroke runs through the
   exact center of every marker (22/2 - 1 = 10). Both marker and rail
   share the same coordinate system — no parent padding to offset.
*/
.member-journey {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.member-journey::before {
    content: "";
    position: absolute;
    left: 10px;             /* marker center (11) − line half-width (1) */
    top: 14px;              /* align to first marker center */
    bottom: 14px;           /* align to last marker center */
    width: 2px;
    background: linear-gradient(to bottom,
        rgba(var(--accent-color-rgb), 0.55) 0%,
        rgba(var(--accent-color-rgb), 0.18) 60%,
        rgba(var(--accent-color-rgb), 0.05) 100%);
    border-radius: 2px;
    z-index: 0;
}
.member-journey-item {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 0.7rem;
    padding: 0.45rem 0;
    align-items: start;
}
.member-journey-item:first-child { padding-top: 0; }
.member-journey-item:last-child  { padding-bottom: 0; }

.member-journey-marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--secondary-bg);
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.member-journey-marker svg { width: 11px; height: 11px; }

.member-journey-item--membership_expired .member-journey-marker,
.member-journey-item--membership_cancelled .member-journey-marker,
.member-journey-item--role_removed .member-journey-marker,
.member-journey-item--venture_left .member-journey-marker {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}
.member-journey-item--role_added .member-journey-marker,
.member-journey-item--venture_joined .member-journey-marker {
    border-color: #818CF8;
    color: #818CF8;
}

.member-journey-body {
    padding-top: 0;
    min-width: 0;
}
.member-journey-headline {
    color: var(--text-primary);
    font-size: 0.84rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.member-journey-headline strong {
    color: var(--accent-color);
    font-weight: 600;
}
.member-journey-date {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    letter-spacing: 0.02em;
    opacity: 0.85;
}
.member-journey-note {
    margin: 0.25rem 0 0;
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-style: italic;
    padding-left: 0.45rem;
    border-left: 2px solid var(--border-color);
    line-height: 1.4;
}

/* --- Core-team notification bell (main nav) --- */
.nav-notif-item { display: flex; align-items: center; }
.nav-notif-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--text-primary);
    padding: 0.3rem;
    transition: color 0.2s ease;
}
.nav-notif-link:hover { color: var(--accent-color); }
.nav-notif-badge {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #EF4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--header-bg);
}

/* --- Ventures page: Become a Partner CTA --- */
.ventures-partner-cta { text-align: center; }
.ventures-partner-cta .partner-cta-inner {
    max-width: 640px;
    margin: 1rem auto 0;
    padding: 2.5rem 2rem;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}
.ventures-partner-cta h3 { margin: 0 0 0.75rem; font-size: 1.6rem; color: var(--text-primary); }
.ventures-partner-cta p { color: var(--text-secondary); margin: 0 0 1.5rem; line-height: 1.6; }

/* --- Ventures page: group separators (Ventures / Partners / Post associati) --- */
.ventures-group-divider {
    margin: 3.5rem 0 2rem;
    padding-top: 2.25rem;
    border-top: 2px solid var(--border-color);
    text-align: center;
}
.ventures-group-divider h2 {
    font-size: 2rem;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}
.ventures-group-divider p {
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.6;
}

/* =========================================================================
   Management console — unified Venture/Partner edit shell
   (issue #300). Reuses existing tokens; no new colors.
   ========================================================================= */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.console-skip:focus {
    position: fixed; top: 12px; left: 12px;
    width: auto; height: auto; z-index: 60;
    clip: auto; margin: 0;
    padding: 0.6rem 1rem; border-radius: 8px;
    background: var(--accent-color); color: var(--text-on-accent);
    font-weight: 600;
}

.console-page { padding-bottom: 2rem; }

.console-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 20px 0;
    display: grid;
    grid-template-columns: 220px minmax(0, 800px);
    gap: 40px;
    align-items: start;
}
.console-form-col { min-width: 0; }

/* Section-nav rail */
.console-nav {
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 4px;
}
.console-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border-left: 2px solid transparent;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.console-nav-link:hover { color: var(--text-primary); background: rgba(var(--primary-bg-rgb), 0.4); }
.console-nav-link.is-current {
    color: var(--accent-color);
    background: var(--glass-bg);
    border-left-color: var(--accent-color);
}
.console-nav-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Sections: offset for sticky header on anchor jump */
.console-form .form-fieldset[id^="sec-"],
#ops { scroll-margin-top: 96px; }

/* Sticky save bar */
.console-savebar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    margin-top: 2rem;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.console-savebar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
}
.console-savebar__hint {
    margin-right: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 1em;
}
.console-savebar.is-saving .console-savebar__hint { visibility: hidden; }
.console-savebar__save { display: inline-flex; align-items: center; gap: 0.5rem; }
.console-savebar.is-saving .console-savebar__save { opacity: 0.7; cursor: progress; }

/* ---- Benefit cards ---- */
.benefit-formset { display: flex; flex-direction: column; gap: 1rem; }
.benefit-card {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 12px;
    background: var(--glass-bg);
    padding: 1.1rem 1.25rem;
    transition: border-color 0.2s, opacity 0.2s;
}
.benefit-card--inactive { border-left-color: var(--text-secondary); }
.benefit-card--deleting {
    opacity: 0.5;
    border-style: dashed;
    border-color: #f87171;
}
.benefit-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.benefit-card__dir { flex: 0 0 auto; }
.benefit-card__dir select { min-width: 130px; }
.benefit-card__title { flex: 1 1 220px; min-width: 0; }
.benefit-card__title input { font-size: 1rem; font-weight: 600; }
.benefit-card__toggles {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: auto;
}
/* Active switch */
.benefit-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-secondary);
    user-select: none;
}
.benefit-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.benefit-switch__track {
    position: relative;
    width: 38px; height: 22px;
    border-radius: 22px;
    background: var(--border-color);
    transition: background 0.2s;
    flex-shrink: 0;
}
.benefit-switch__track::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--text-primary);
    transition: transform 0.2s;
}
.benefit-switch input:checked + .benefit-switch__track { background: var(--accent-color); }
.benefit-switch input:checked + .benefit-switch__track::after { transform: translateX(16px); background: var(--text-on-accent); }
.benefit-switch input:focus-visible + .benefit-switch__track { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.benefit-switch input:checked ~ .benefit-switch__label { color: var(--accent-color); }
/* Delete */
.benefit-delete {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.benefit-delete:hover { color: #f87171; background: rgba(248, 113, 113, 0.1); }
.benefit-delete input { position: absolute; opacity: 0; width: 0; height: 0; }
.benefit-delete input:checked ~ svg { color: #f87171; }
.benefit-delete input:focus-visible ~ svg { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.benefit-card__body { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.benefit-card__body .form-group { margin: 0; }
.benefit-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
.benefit-limits {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    background: rgba(var(--primary-bg-rgb), 0.35);
}
.benefit-limits__caption {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.55rem;
}
.benefit-limits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.benefit-limits .form-group { margin: 0; }

/* monospace redemption code chip */
.benefit-code {
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent-color);
}

/* ---- Operations region ---- */
.console-ops {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.console-ops__eyebrow {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.console-ops__title {
    font-family: var(--font-headings);
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 0.2rem 0 1.25rem;
}
/* Stacked layout: compact scanner on top, full-width redemptions log below */
.console-ops__scan { margin-bottom: 2.25rem; }
.console-ops__log { }
.console-ops__block-title { font-size: 1.05rem; color: var(--text-primary); margin: 0 0 0.25rem; }
.console-ops__block-hint { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 1rem; }

.benefit-scanner__panel { margin-top: 1rem; max-width: 380px; }
.benefit-scanner__reader { width: 100%; }
.benefit-scanner__stop { margin-top: 0.75rem; }
.benefit-result { margin-top: 1rem; line-height: 1.6; }
.benefit-result__title { font-weight: 700; font-size: 1.1rem; }
.benefit-result--ok .benefit-result__title { color: var(--accent-color); }
.benefit-result--err { color: #EF4444; }

/* Redemptions log fills the full form-column width with no extra chrome —
   the table already carries its own background, radius and row separators. */
.benefit-redemptions-scroll {
    overflow-x: auto;
    width: 100%;
}
.benefit-redemptions-scroll .hub-data-table { margin: 0; }

/* ---- Media preview ---- */
.media-preview {
    margin-bottom: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.5rem;
    display: inline-block;
    background: rgba(var(--primary-bg-rgb), 0.35);
}
.media-preview img { display: block; border-radius: 6px; }
.media-preview--logo img { width: 100px; height: 100px; object-fit: contain; }
.media-preview--cover img { max-width: 320px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- Empty states ---- */
.console-empty {
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.console-empty--sm { padding: 1rem; }
.console-empty p { margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .console-layout { grid-template-columns: 1fr; gap: 0; }
    .console-nav { display: none; }
}
@media (max-width: 700px) {
    .console-layout { padding: 1.5rem 16px 0; }
    .benefit-card__meta,
    .benefit-limits__grid { grid-template-columns: 1fr; }
    .benefit-card__toggles { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .benefit-card, .benefit-switch__track, .benefit-switch__track::after,
    .console-nav-link, .benefit-delete { transition: none; }
}

/* =========================================================================
   Opportunities — job / internship / volunteering board (#304)
   ========================================================================= */
.opp-page { max-width: 1100px; margin: 0 auto; padding: 2.5rem 20px 3rem; }
.opp-hero { text-align: center; margin-bottom: 2rem; }
.opp-hero h1 { font-family: var(--font-headings); font-size: 2.6rem; color: var(--text-primary); margin: 0 0 .5rem; }
.opp-hero p { color: var(--text-secondary); max-width: 640px; margin: 0 auto; }

.opp-filters { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; }
.opp-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.opp-chip {
    padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 500;
    color: var(--text-secondary); text-decoration: none;
    border: 1px solid var(--border-color); background: transparent; transition: all .15s;
}
.opp-chip:hover { color: var(--text-primary); border-color: var(--accent-color); }
.opp-chip.is-active { background: var(--accent-color); color: var(--text-on-accent); border-color: var(--accent-color); }
.opp-chip--kind.is-active { background: var(--secondary-bg); color: var(--accent-color); border-color: var(--accent-color); }

.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: 1.25rem; }
.opp-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr)); gap: 1rem; }

.opp-card {
    display: block; text-decoration: none; background: var(--secondary-bg);
    border: 1px solid var(--border-color); border-left: 3px solid var(--accent-color);
    border-radius: 12px; padding: 1.15rem 1.25rem; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.opp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.28); border-color: var(--accent-color); }
.opp-card--partner { border-left-color: #8b7bd8; }
.opp-card--hub { border-left-color: #f2b705; }
.opp-card__top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.opp-card__title { font-size: 1.08rem; color: var(--text-primary); margin: 0 0 .7rem; line-height: 1.3; }
.opp-card__issuer { display: flex; align-items: center; gap: .5rem; color: var(--text-secondary); font-size: .85rem; margin-bottom: .7rem; }
.opp-card__logo { height: 30px; width: auto; max-width: 90px; border-radius: 7px; object-fit: contain; background: var(--primary-bg); padding: 4px 5px; flex-shrink: 0; }
.opp-card__logo--ph { width: 28px; height: 28px; padding: 0; background: var(--primary-bg); color: var(--accent-color); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.opp-card__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--text-secondary); font-size: .8rem; }

.opp-type-badge {
    display: inline-block; padding: .2rem .6rem; border-radius: 6px; font-size: .72rem; font-weight: 700;
    letter-spacing: .02em; background: rgba(var(--accent-color-rgb), .15); color: var(--accent-color);
}
.opp-type-badge--volunteering { background: rgba(242,183,5,.15); color: #f2b705; }
.opp-type-badge--full_time, .opp-type-badge--part_time { background: rgba(139,123,216,.18); color: #b3a6ee; }
.opp-paid-badge { font-size: .72rem; font-weight: 700; color: #39D3BB; border: 1px solid rgba(var(--accent-color-rgb),.4); border-radius: 6px; padding: .12rem .5rem; }

/* Detail */
.opp-detail__head { border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.opp-detail__badges { display: flex; gap: .5rem; margin-bottom: .75rem; }
.opp-detail h1 { font-family: var(--font-headings); font-size: 2.1rem; color: var(--text-primary); margin: 0 0 .75rem; }
.opp-detail__issuer { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-secondary); text-decoration: none; margin-bottom: 1rem; }
.opp-detail__issuer img { height: 36px; width: auto; max-width: 120px; border-radius: 8px; object-fit: contain; background: var(--primary-bg); padding: 4px 6px; }
.opp-detail__issuer:hover { color: var(--accent-color); }
.opp-detail__meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--text-secondary); font-size: .9rem; }
.opp-detail__layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 2.5rem; align-items: start; }
.opp-detail__body section { margin-bottom: 1.75rem; }
.opp-detail__body h2 { font-size: 1.15rem; color: var(--accent-color); margin: 0 0 .5rem; }
.opp-detail__body p { color: var(--text-primary); line-height: 1.7; }
.opp-back { display: inline-block; color: var(--text-secondary); text-decoration: none; margin-bottom: 1.25rem; font-size: .9rem; }
.opp-back:hover { color: var(--accent-color); }
.opp-preview-banner { background: rgba(242,183,5,.12); border: 1px solid rgba(242,183,5,.4); color: #f2b705; padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; font-size: .88rem; }

.opp-apply { background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 14px; padding: 1.5rem; position: sticky; top: 88px; }
.opp-apply h2 { font-size: 1.2rem; color: var(--text-primary); margin: 0 0 .5rem; }
.opp-apply__hint { color: var(--text-secondary); font-size: .85rem; margin: 0 0 1rem; }
.opp-apply .form-group { margin-bottom: .8rem; }
.opp-apply .form-group label { display: block; font-size: .82rem; color: var(--text-secondary); margin-bottom: .3rem; }
.opp-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: var(--text-secondary); margin: .5rem 0 1rem; cursor: pointer; }
.opp-consent input { margin-top: .2rem; }
.opp-apply__error { color: #EF4444; font-size: .85rem; margin-bottom: .6rem; }
.opp-apply__error:empty { display: none; }
.opp-apply__done { background: rgba(var(--accent-color-rgb),.12); border: 1px solid rgba(var(--accent-color-rgb),.4); color: var(--accent-color); padding: 1rem; border-radius: 10px; text-align: center; font-weight: 600; }
.opp-apply .cta-button { width: 100%; text-align: center; }

.opp-public-section__hint { color: var(--text-secondary); font-size: .9rem; margin: -.25rem 0 1rem; }
.job-app-status.is-saved { border-color: var(--accent-color); }
.opp-status-select select { min-width: 110px; }

@media (max-width: 860px) {
    .opp-detail__layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .opp-apply { position: static; }
}

/* Opportunity detail — aligned to the standard .venture-detail-page +
   .article-detail-layout pattern (#306). Hero content is centered; the
   apply box lives in the sticky sidebar, so it must not double-stick. */
.opp-detail .news-hero .opp-detail__badges,
.opp-detail .news-hero .opp-detail__meta { justify-content: center; }
.opp-detail .news-hero .opp-detail__meta { margin-top: .75rem; }
.opp-detail .news-hero .opp-detail__issuer { margin-bottom: 0; }
.opp-detail .article-detail-sidebar .opp-apply { position: static; top: auto; }
.opp-detail .article-detail-main .opp-back { margin-bottom: 1rem; }

/* Optional-field hint in the apply form (#307) */
.opp-optional { font-weight: 400; color: var(--text-secondary); font-size: 0.8rem; }
.opp-consent a { color: var(--accent-color); }

/* Profile-dropdown section label — e.g. "Le mie Ventures" (#311) */
.dropdown-section-label {
    padding: 0.35rem 1rem 0.15rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Event participation fork — Visitor vs Stand (#312) */
.event-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.event-choice-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 1.5rem 1rem; border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--primary-bg); color: var(--text-primary); cursor: pointer;
    transition: border-color .15s, transform .15s, background .15s;
}
.event-choice-card:hover { border-color: var(--accent-color); transform: translateY(-2px); background: var(--secondary-bg); }
.event-choice-icon { font-size: 1.8rem; }
.event-choice-title { font-weight: 700; font-size: 1.05rem; }
.event-choice-desc { font-size: 0.82rem; color: var(--text-secondary); text-align: center; }
.modal-back-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; padding: 0 0 0.75rem; }
.modal-back-btn:hover { color: var(--accent-color); }
.event-soldout-note { color: #EF4444; font-weight: 600; }
#modal-stand-content .form-field, #modal-form-content .form-field { margin-bottom: 0.7rem; }
@media (max-width: 480px) { .event-choice-grid { grid-template-columns: 1fr; } }

/* Prominent in-content "Partecipa" CTA (opens the participation modal) — #313 */
.article-cta-link--participate {
    background: var(--accent-color); color: var(--text-on-accent);
    border-color: var(--accent-color); font-weight: 700; cursor: pointer;
}
.article-cta-link--participate:hover { background: #2CBBA5; border-color: #2CBBA5; transform: translateY(-2px); }
.article-cta-link--participate .article-cta-arrow { stroke: var(--text-on-accent); }

/* Privacy note under signup forms (#318) */
.form-privacy-note { font-size: 0.8rem; color: var(--text-secondary); text-align: center; margin: 0.75rem 0 0; }
.form-privacy-note a { color: var(--accent-color); }
.footer-legal-links { margin-top: 0.4rem; font-size: 0.85rem; }
.footer-legal-links a { color: var(--text-secondary); }
.footer-legal-links a:hover { color: var(--accent-color); }

/* Center all CTAs on the event page (first "About" section + all sections) (#318) */
.event-content .article-cta { text-align: center; }
.event-content .article-cta::before { display: none; }
.event-content .article-cta-link { margin-left: 0; }

/* ══════════════════════════════════════════════════════════════════
   Console shell + event hero — mobile optimization
   (event settings, venture/partner editors)
   ══════════════════════════════════════════════════════════════════ */
/* ── Unified section navigation (desktop + mobile) ────────────────────────
   One component everywhere: a sticky pill bar above the form that WRAPS.
   Replaces the desktop left rail and the mobile chip strip, so there is no
   second navigation system and nothing is hidden behind horizontal scroll. */
.console-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
    gap: 0;
}
.console-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: sticky;
    top: 88px;                          /* below the sticky site header */
    z-index: 25;
    align-self: auto;
    max-height: none;
    overflow: visible;
    gap: 6px;
    padding: 0.6rem 0 0.7rem;
    margin: 0 0 1.25rem;
    background: var(--primary-bg);
    border-bottom: 1px solid var(--border-color);
}
.console-nav-link {
    flex: 0 1 auto;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    background: var(--secondary-bg);
    line-height: 1.2;
}
.console-nav-link.is-current {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.12);
}
@media (max-width: 991px) {
    /* re-assert: the old shell hid the nav entirely below this width */
    .console-nav { display: flex; top: 56px; }
}
@media (max-width: 700px) {
    .console-nav { top: 56px; padding: 0.5rem 0 0.6rem; margin-bottom: 1rem; }
    .console-nav-link { font-size: 0.8rem; padding: 0.35rem 0.75rem; }
}
@media (max-width: 480px) {
    .console-nav { top: 48px; }
}

@media (max-width: 700px) {
    /* (fieldset spacing is set by the minimal/borderless block below) */

    /* ≥16px inputs so iOS Safari doesn't auto-zoom on focus */
    .console-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .console-form select,
    .console-form textarea { font-size: 16px; }
    .console-form input[type="file"] { max-width: 100%; font-size: 0.85rem; }
    .console-ops select, .console-ops input { font-size: 16px; max-width: 100%; }

    /* Save bar: safe-area aware, thumb-sized buttons.
       NOTE: no negative margins — they overflow the viewport whenever the
       ancestor padding differs from the assumed value. */
    .console-savebar {
        padding-bottom: env(safe-area-inset-bottom);
        max-width: 100%;
    }
    /* Single compact row: status hint + two icon-only buttons */
    .console-savebar__inner {
        padding: 0.55rem 12px;
        gap: 0.5rem;
        flex-wrap: nowrap;
        align-items: center;
    }
    .console-savebar__hint {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0;
        font-size: 0.78rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Labels collapse — the icon plus title/aria-label carry the meaning */
    .console-savebar__cancel-label,
    .console-savebar__save-label { display: none; }
    .console-savebar__cancel,
    .console-savebar__save {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        min-width: 0;
        padding: 0;
        gap: 0;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .console-savebar__cancel svg,
    .console-savebar__save svg { width: 18px; height: 18px; }

    /* Fluid image previews */
    .settings-cover-preview img { width: 100%; height: auto; }

    /* Event hero CTAs: stacked full-width buttons — every action visible,
       thumb-sized, no horizontal scrolling */
    .article-hero-actions {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0.5rem;
    }
    .article-hero-actions .article-hero-cta {
        width: 100%;
        justify-content: center;
        padding: 0.7rem 1rem;
    }
}

@media (max-width: 480px) {
    .console-nav { top: 48px; }
    .console-layout { padding: 1rem 12px 0; }
}

/* ── Overflow containment: nothing in the console may exceed the viewport ──
   Grid/flex children default to min-width:auto and refuse to shrink below
   their content, which is what pushes the page wider than the screen. */
@media (max-width: 991px) {
    .console-layout,
    .console-form-col,
    .console-form,
    .console-form .form-fieldset,
    .console-ops,
    .console-ops__log,
    .console-ops__scan,
    .console-savebar {
        min-width: 0;
        max-width: 100%;
    }
    /* Media and controls never dictate the page width */
    .console-form img,
    .console-ops img { max-width: 100%; height: auto; }
    .console-form input,
    .console-form select,
    .console-form textarea,
    .console-ops input,
    .console-ops select {
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Wide content scrolls inside its own box, never the page */
    .console-ops .hub-table-wrap,
    .console-form .hub-table-wrap { max-width: 100%; overflow-x: auto; }
    /* Hero action strip: it is a flex item, so it needs min-width:0 to be
       allowed to shrink and scroll internally instead of stretching the page */
    .article-hero-actions { min-width: 0; max-width: 100%; }
    .article-hero-footer-inner { max-width: 100%; }
}

/* Event staff assignment form (console Operations) — stacks on mobile */
.event-staff-assign {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    max-width: 100%;
}
.event-staff-assign > * { min-width: 0; max-width: 100%; }
@media (max-width: 700px) {
    .event-staff-assign { grid-template-columns: 1fr; }
    .event-staff-assign .cta-button { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   Console form sections — minimal, borderless
   Separation comes from typography, an accent marker and whitespace
   instead of boxes. Scoped to .console-form so other forms keep theirs.
   ══════════════════════════════════════════════════════════════════ */
.console-form .form-fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 3rem;
    scroll-margin-top: 150px;           /* sticky nav clearance on jump */
}
.console-form .form-fieldset:last-of-type { margin-bottom: 1.5rem; }

.console-form .form-fieldset > legend {
    display: block;
    width: 100%;
    float: left;                        /* legends ignore display:block in some engines */
    padding: 0;
    margin: 0 0 0.35rem;
    font-family: var(--font-headings);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
/* Slim accent marker replaces the old box */
.console-form .form-fieldset > legend::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.95em;
    margin-right: 0.55rem;
    vertical-align: -0.12em;
    border-radius: 2px;
    background: var(--accent-color);
}
/* clear the floated legend */
.console-form .form-fieldset > legend + * { clear: both; }

/* Airier fields, quieter labels */
.console-form .form-group { margin-bottom: 1.35rem; }
.console-form .form-group > label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}
.console-form .field-help {
    display: block;
    margin: -0.15rem 0 0.45rem;
    font-size: 0.79rem;
    line-height: 1.45;
    color: var(--text-secondary);
    opacity: 0.85;
}
/* Checkbox rows read as switches-in-a-list, not boxed fields */
.console-form .form-group--checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 0.65rem;
    row-gap: 0.15rem;
    margin-bottom: 1rem;
}
.console-form .form-group--checkbox > label {
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}
.console-form .form-group--checkbox .field-help {
    grid-column: 2;
    margin: 0;
}
.console-form .form-group--checkbox input[type="checkbox"] { margin-top: 0.2rem; }

/* Operations region: hairline separator only, no card */
.console-ops {
    border-top: 0;
    margin-top: 3.5rem;
    padding-top: 0;
}
.console-ops__header { margin-bottom: 1.25rem; }

/* Read-only blocks inside a borderless section stay light */
.console-form .form-static-list { margin: 0; padding-left: 1.1rem; }

@media (max-width: 700px) {
    .console-form .form-fieldset { margin-bottom: 2.25rem; padding: 0; scroll-margin-top: 120px; }
    .console-form .form-fieldset > legend { font-size: 1.05rem; }
}

/* ── Event staff & roles table (console Operations) ───────────────────────
   Must never widen the page on a phone: the action column is a compact icon
   button, cells wrap, and the wrapper scrolls internally as a last resort. */
.event-staff-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 1rem;
}
.event-staff-table { width: 100%; table-layout: auto; }
.event-staff-table th,
.event-staff-table td { vertical-align: middle; }
/* long names/emails wrap instead of forcing the column wide */
.event-staff-table td:first-child {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.event-staff-table__action { width: 1%; white-space: nowrap; text-align: right; }
.event-staff-table__action form { display: inline; margin: 0; }

/* Compact icon-only remove button */
.event-staff-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.event-staff-remove:hover,
.event-staff-remove:focus-visible {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.1);
}

@media (max-width: 700px) {
    /* Tighter cells so three columns fit a 360px screen without scrolling */
    .event-staff-table th,
    .event-staff-table td { padding: 0.55rem 0.5rem; font-size: 0.85rem; }
    .event-staff-table th { font-size: 0.68rem; }
    .event-staff-remove { width: 32px; height: 32px; }
}

/* ── File fields: long media paths must never widen the page ──────────────
   Django's ClearableFileInput prints "Currently: <app/dir/file.png>" as one
   unbreakable string; on a phone that alone causes lateral scrolling. */
.console-form .form-group { min-width: 0; overflow-wrap: anywhere; }

/* The current-file link is redundant next to the preview image: keep it,
   but truncate it to the available width with an ellipsis. */
.console-form .form-group > a[href^="/media/"],
.console-form .form-group > a[href*="/media/"] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    direction: rtl;              /* keep the filename visible, clip the path */
    text-align: left;
}

/* File inputs size to their container, not to the chosen filename */
.console-form input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* NOTE: deliberately no overflow clip on .console-layout — it hosts the
   sticky section nav and save bar, and clipping there risks breaking them.
   Overflow is prevented at the source (wrapping + width caps) instead. */

/* Other long-string sources inside the console */
.console-form .form-static-text,
.console-form .form-static-list li,
.console-ops td { overflow-wrap: anywhere; }

/* ── Read-only console form (non-admin, non-owner) ────────────────────────
   Sections stay readable but are visibly inert. Django renders the fields
   disabled, so this is presentation only — the server also refuses the POST. */
.console-locked-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1.75rem;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}
.console-locked-notice svg { flex: none; margin-top: 0.15rem; color: #F59E0B; }

.console-form .form-fieldset.is-locked > legend { opacity: 0.75; }
.console-form .form-fieldset.is-locked > legend::before { background: var(--text-secondary); }
.console-form .form-fieldset.is-locked .form-group { opacity: 0.6; }
/* Disabled controls: unmistakably inert, still legible */
.console-form .form-fieldset.is-locked input,
.console-form .form-fieldset.is-locked select,
.console-form .form-fieldset.is-locked textarea {
    cursor: not-allowed;
    background: var(--primary-bg);
    border-style: dashed;
}
/* The custom m2m picker is JS-driven, so neutralise it explicitly */
.console-form .form-fieldset.is-locked .m2m-picker { pointer-events: none; }
.console-form .form-fieldset.is-locked .m2m-picker-search-wrap { display: none; }

/* Nothing to save in read-only mode */
.console-form.is-readonly .console-savebar { display: none; }

/* ── Event live overview (settings page) ─────────────────────────────────
   Shown to everyone who can reach the page: organiser tools + live stats. */

/* Viewer standing badges (Admin / Owner / assigned role) */
.ev-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.ev-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--secondary-bg);
}
.ev-badge--admin { color: #F59E0B; border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.10); }
.ev-badge--owner { color: var(--accent-color); border-color: rgba(var(--accent-color-rgb),0.45); background: rgba(var(--accent-color-rgb),0.10); }
.ev-badge--role { color: #22D3EE; border-color: rgba(34,211,238,0.45); background: rgba(34,211,238,0.10); }

/* Tool buttons — minimal glass: barely-there surface, soft edge, one row */
.ev-tools { display: flex; gap: 0.7rem; flex-wrap: nowrap; min-width: 0; }
.ev-tool {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem;
    border-radius: 18px;
    text-decoration: none;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.035);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow: none;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ev-tool:hover {
    color: var(--text-primary);
    transform: translateY(-2px);
    background: rgba(var(--accent-color-rgb), 0.07);
    border-color: rgba(var(--accent-color-rgb), 0.22);
}
.ev-tool:focus-visible {
    outline: 1px solid rgba(var(--accent-color-rgb), 0.5);
    outline-offset: 3px;
}

/* Icon: a whisper of tint, no hard chip edge */
.ev-tool__icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.08);
    transition: background 0.3s ease;
}
.ev-tool:hover .ev-tool__icon { background: rgba(var(--accent-color-rgb), 0.14); }

.ev-tool__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ev-tool__text strong { font-size: 0.9rem; font-weight: 500; letter-spacing: -0.01em; }
.ev-tool__text small {
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Primary action: only a touch warmer than the others */
.ev-tool--primary {
    background: rgba(var(--accent-color-rgb), 0.07);
    border-color: rgba(var(--accent-color-rgb), 0.16);
}
.ev-tool--primary .ev-tool__icon { background: rgba(var(--accent-color-rgb), 0.14); }

@media (prefers-reduced-motion: reduce) {
    .ev-tool, .ev-tool__icon { transition: none; }
    .ev-tool:hover { transform: none; }
}

.ev-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.ev-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--secondary-bg);
    min-width: 0;
}
.ev-stat--accent { box-shadow: inset 0 0 0 1px rgba(var(--accent-color-rgb), 0.35); }
.ev-stat__val { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.ev-stat--accent .ev-stat__val { color: var(--accent-color); }
.ev-stat__lbl { font-size: 0.84rem; color: var(--text-primary); }
.ev-stat__sub { font-size: 0.75rem; color: var(--text-secondary); overflow-wrap: anywhere; }

.ev-breakdowns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem 2rem;
}
.ev-breakdown { min-width: 0; }
.ev-breakdown h4 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin: 0 0 0.6rem;
}
.ev-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.88rem;
    min-width: 0;
}
.ev-row:last-child { border-bottom: none; }
.ev-row > span:first-child,
.ev-row > a { min-width: 0; overflow-wrap: anywhere; }
.ev-tag {
    flex: none;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--primary-bg);
    color: var(--text-secondary);
}
.ev-empty { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }

@media (max-width: 700px) {
    .ev-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6rem; }
    .ev-stat { padding: 0.75rem 0.85rem; }
    .ev-stat__val { font-size: 1.5rem; }
    .ev-breakdowns { grid-template-columns: 1fr; gap: 1.25rem; }
    .ev-tools { gap: 0.5rem; }
    .ev-tool { flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 0.7rem 0.4rem; border-radius: 16px; }
    .ev-tool__icon { width: 32px; height: 32px; border-radius: 11px; }
    .ev-tool__text small { display: none; }
    .ev-tool__text strong { font-size: 0.76rem; }
}

/* ── Event crew roster (Staff & ruoli) ───────────────────────────────────
   Organisers see who works the event: picture, name, role and phone. */
.ev-crew { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.ev-crew__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
    min-width: 0;
}
.ev-crew__item:last-child { border-bottom: none; }
.ev-crew__avatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-bg);
}
.ev-crew__avatar--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.ev-crew__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ev-crew__name { font-weight: 600; overflow-wrap: anywhere; }
.ev-crew__role { font-size: 0.78rem; color: var(--text-secondary); }
.ev-crew__phone {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.ev-crew__phone--none { color: var(--text-secondary); opacity: 0.6; font-style: italic; }
.ev-crew__remove { flex: none; margin: 0; }

@media (max-width: 700px) {
    /* Two rows on a phone: identity, then contact + action */
    .ev-crew__item { flex-wrap: wrap; row-gap: 0.4rem; }
    .ev-crew__info { flex-basis: calc(100% - 52px); }
    .ev-crew__phone { margin-left: 52px; }
    .ev-crew__remove { margin-left: auto; }
    .ev-crew__phone span { overflow-wrap: anywhere; }
}

/* ── Translation scheduler (event settings, admin) ───────────────────────── */
.tr-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tr-queue { font-size: 0.8rem; color: var(--text-secondary); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.5rem; }
.tr-lang {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 0;
}
.tr-lang__name { font-size: 0.88rem; min-width: 0; overflow-wrap: anywhere; }
.tr-lang__state { margin-left: auto; font-size: 0.72rem; color: var(--text-secondary); text-align: right; }
.tr-btn {
    flex: none;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), 0.08);
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
    transition: background 0.2s ease;
}
.tr-btn:hover:not(:disabled) { background: rgba(var(--accent-color-rgb), 0.16); }
.tr-btn:disabled { opacity: 0.45; cursor: default; }

/* Per-state accents */
.tr-lang[data-state="done"] { border-color: rgba(var(--accent-color-rgb), 0.22); }
.tr-lang[data-state="done"] .tr-lang__state { color: var(--accent-color); }
.tr-lang[data-state="queued"] .tr-lang__state { color: #F59E0B; }
.tr-lang[data-state="error"] { border-color: rgba(248, 113, 113, 0.35); }
.tr-lang[data-state="error"] .tr-lang__state { color: #f87171; }
.tr-lang[data-state="running"] { border-color: rgba(var(--accent-color-rgb), 0.4); }
.tr-lang[data-state="running"] .tr-lang__state { color: var(--accent-color); }
.tr-lang[data-state="running"]::after {
    content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-color-rgb), 0.25);
    border-top-color: var(--accent-color);
    animation: tr-spin 0.8s linear infinite;
    flex: none;
}
@keyframes tr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .tr-lang[data-state="running"]::after { animation: none; }
}
@media (max-width: 700px) {
    .tr-grid { grid-template-columns: 1fr; }
}

/* ── Event registration: consent precondition notice (#367) ──
   Sign-up is two fields plus a consent. The consent is not fine print: if it
   is left unticked we say so before the guest presses send. */
/* Refusing to send: the modal shakes its head and flushes red, then settles.
   The message itself goes in the usual red error box — one alert, not two. */
@keyframes reg-refuse-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-9px); }
    30%      { transform: translateX(8px); }
    45%      { transform: translateX(-6px); }
    60%      { transform: translateX(4px); }
    75%      { transform: translateX(-2px); }
}
.modal-content.is-refused {
    animation: reg-refuse-shake .45s cubic-bezier(.36, .07, .19, .97) both;
    border-color: rgba(229, 62, 62, .75);
    box-shadow: 0 0 0 1px rgba(229, 62, 62, .35), 0 18px 50px rgba(229, 62, 62, .18);
    /* Slower on the way out than in: the alarm fades rather than snaps off. */
    transition: border-color 1.2s ease, box-shadow 1.2s ease;
}
.modal-content:not(.is-refused) {
    transition: border-color 1.2s ease, box-shadow 1.2s ease;
}
@media (prefers-reduced-motion: reduce) {
    .modal-content.is-refused { animation: none; }
}

/* ── Member dashboard: one identity block (#380) ──
   Greeting, name, standing and the profile actions used to be three separate
   cards restating each other. One row now: who you are, where you stand, what
   you can do about it. */
.dash-id {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    text-align: left;
}
.dash-id__avatar {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--secondary-bg);
    border: 2px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-id__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-id__initials { font-size: 1.6rem; font-weight: 800; color: var(--text-secondary); }
.dash-id__body { flex: 1 1 260px; min-width: 0; }
.dash-id__hello { margin: 0; font-size: 1.9rem; line-height: 1.15; }
.dash-id__name { margin: .15rem 0 .5rem; color: var(--text-secondary); font-size: .95rem; }
.dash-id__bio { margin: .6rem 0 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }
.dash-id__skills { margin-top: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.dash-id__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.dash-id__actions .cta-button { margin: 0; }

.dash-id__badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.dash-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .18rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--text-secondary);
    white-space: nowrap;
}
.dash-badge.accent { background: rgba(57, 211, 187, .15); color: #39D3BB; border-color: rgba(57, 211, 187, .35); }
.dash-badge.ok     { background: rgba(57, 211, 187, .12); color: #39D3BB; border-color: rgba(57, 211, 187, .3); }
.dash-badge.warn   { background: rgba(245, 166, 35, .15); color: #F5A623; border-color: rgba(245, 166, 35, .35); }
.dash-badge.bad    { background: rgba(229, 72, 77, .15);  color: #E5484D; border-color: rgba(229, 72, 77, .35); }
.dash-badge.role   { background: rgba(34, 211, 238, .15); color: #22D3EE; border-color: rgba(34, 211, 238, .35); }
.dash-badge.admin  { background: rgba(245, 166, 35, .15); color: #F5A623; border-color: rgba(245, 166, 35, .35); }

.dash-grace {
    margin: .9rem 0 0;
    padding: .6rem .9rem;
    border-radius: 10px;
    background: rgba(245, 166, 35, .12);
    border: 1px solid rgba(245, 166, 35, .3);
    color: #F5A623;
    font-size: .86rem;
    text-align: left;
}

@media (max-width: 640px) {
    .dash-id { gap: .9rem; }
    .dash-id__avatar { width: 58px; height: 58px; }
    .dash-id__hello { font-size: 1.5rem; }
    /* Actions go full width rather than crowding under the name. */
    .dash-acts { flex: 1 1 100%; }
}

/* ── Profile: owner-only membership card (#382) ──
   Carried over from the private profile page this one replaced. */
.profile-card {
    max-width: 520px;
    margin: 1.5rem auto 0;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--secondary-bg);
}
.profile-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: .9rem;
}
.profile-card__row:last-of-type { border-bottom: 0; }
.profile-card__lbl { color: var(--text-secondary); }
.profile-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.profile-card__actions .cta-button { flex: 1 1 auto; text-align: center; }

/* ── Profile edit: borderless sections, two columns, full width (#383) ──
   The form is mostly long text — bio, help, links — so the visual identity
   (picture, visibility) sits on a narrow rail and the writing gets the width.
   Section titles keep the project's own legend styling: only the frames go. */
.profile-edit-page--wide {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    /* Breathing room under the hero, which sits flush above the form. */
    padding: 2.5rem 1.5rem 3rem;
}
.profile-edit-page--wide .content-create-form {
    max-width: none;
    background: none;
    border: 0;
    padding: 0;
}

.pe-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.pe-col { min-width: 0; }
/* The rail holds three sections now; pin it only when the viewport is tall
   enough to show them, otherwise the bottom of it becomes unreachable. */
.pe-col--side { position: static; }
@media (min-height: 860px) and (min-width: 981px) {
    .pe-col--side { position: sticky; top: 90px; }
}

/* Frames removed, headings untouched: the boxes were the problem, not the
   titles, which keep the heading font and accent colour used site-wide. */
.profile-edit-page--wide .form-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 2.25rem;
    background: none;
}
.profile-edit-page--wide .form-fieldset > legend {
    padding: 0 0 .6rem;
    margin-bottom: 1rem;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
}
.profile-edit-page--wide .form-group { margin-bottom: 1.1rem; }
.profile-edit-page--wide textarea { min-height: 150px; }

.profile-edit-page--wide .profile-edit-actions {
    display: flex;
    gap: .6rem;
    justify-content: flex-end;
    padding-top: 1.25rem;
    margin-top: .5rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 980px) {
    .pe-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* Sticky is meaningless once the rail is a full-width band above the form. */
    .pe-col--side { position: static; }
}
@media (max-width: 600px) {
    .profile-edit-page--wide { padding: 1.75rem 1rem 2.5rem; }
    .profile-edit-page--wide .profile-edit-actions { flex-direction: column-reverse; }
    .profile-edit-page--wide .profile-edit-actions > * { width: 100%; text-align: center; }
}
}

/* ── Profile picture gallery (#384) ──
   The avatar itself is the button; the gallery keeps past uploads so a member
   can go back to a photo they preferred. */
.pe-avatar {
    /* Full width and centred: as an inline button it hugged its contents and
       sat against the left edge, which reads as misaligned once the rail
       becomes a full-width band on a phone. */
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.pe-avatar .member-profile-avatar-wrap {
    margin: 0 auto;
    /* The ring is drawn on this box, so it has to keep the avatar's exact
       footprint or the circle drifts off the photo. */
    flex: 0 0 auto;
}
/* Nothing is painted behind the picture or its label. The avatar normally
   fills its circle so transparent PNGs sit on a panel; here the photo should
   float on the page instead. */
.pe-avatar,
.pe-avatar .pe-avatar__hint,
.pe-avatar .member-profile-avatar-wrap,
.pe-avatar .member-profile-avatar {
    background: transparent;
    box-shadow: none;
    /* No frame of our own: the only ring around the picture is the tier ring
       drawn by ::before, which is the part worth keeping. */
    border: 0;
    outline: none;
}
.pe-avatar:focus-visible .pe-avatar__wrap {
    /* Keyboard users still need to see where they are. */
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
    border-radius: 50%;
}
/* Hover: the ring breathes and the face lifts slightly, so the picture reads
   as something you can act on rather than decoration. */
.pe-avatar__wrap {
    transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.pe-avatar__wrap .member-profile-avatar {
    transition: filter .28s ease;
}
.pe-avatar:hover .pe-avatar__wrap,
.pe-avatar:focus-visible .pe-avatar__wrap {
    transform: scale(1.06) translateY(-2px);
}
.pe-avatar:hover .pe-avatar__wrap .member-profile-avatar,
.pe-avatar:focus-visible .pe-avatar__wrap .member-profile-avatar {
    filter: brightness(1.08);
}
.pe-avatar:hover .pe-avatar__wrap::before,
.pe-avatar:focus-visible .pe-avatar__wrap::before {
    animation: pe-ring-pulse 1.6s ease-in-out infinite;
}
.pe-avatar:active .pe-avatar__wrap { transform: scale(1.01); }
@keyframes pe-ring-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
    .pe-avatar__wrap, .pe-avatar__wrap .member-profile-avatar { transition: none; }
    .pe-avatar:hover .pe-avatar__wrap { transform: none; }
    .pe-avatar:hover .pe-avatar__wrap::before { animation: none; }
}
.pe-avatar__hint {
    font-size: .82rem;
    font-weight: 600;
    color: var(--accent-color);
    opacity: .75;
    transition: opacity .2s ease;
}
.pe-avatar:hover .pe-avatar__hint { opacity: 1; }

.pe-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; }
.pe-modal[hidden] { display: none; }
/* Translucent on purpose: the dialog is about the page behind it — a broken
   section, a wrong name — so that page has to stay in sight. */
.pe-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 12, 22, .45);
}
.pe-modal__panel {
    position: relative;
    width: min(680px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.4rem 1.5rem 1.6rem;
}
.pe-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pe-modal__head h3 { margin: 0; font-size: 1.15rem; }
.pe-modal__x { background: none; border: 0; color: var(--text-secondary); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.pe-modal__note { margin: .4rem 0 1.1rem; font-size: .84rem; color: var(--text-secondary); }
.pe-modal__msg { margin: .9rem 0 0; font-size: .85rem; font-weight: 600; min-height: 1.2em; }
.pe-modal__msg.err { color: #E5484D; }
.pe-modal__msg.ok { color: #39D3BB; }

.pe-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .7rem;
}
.pe-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    cursor: pointer;
    padding: 0;
    transition: border-color .18s ease, transform .18s ease;
}
.pe-tile:hover, .pe-tile:focus-visible { border-color: var(--accent-color); transform: translateY(-2px); }
.pe-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The current picture is marked on the wrapper, which also hosts the discard
   control — a button cannot be nested inside the tile button. */
.pe-tile-wrap { position: relative; }
.pe-tile-wrap.is-current .pe-tile {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), .35);
}
.pe-tile__del {
    position: absolute;
    top: 5px; right: 5px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 999px;
    border: 0;
    background: rgba(10, 15, 24, .78);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
}
.pe-tile-wrap:hover .pe-tile__del,
.pe-tile__del:focus-visible { opacity: 1; }
.pe-tile__del:hover { background: #E5484D; }
/* The picture in use cannot be discarded: it would leave the member faceless. */
.pe-tile-wrap.is-current .pe-tile__del { display: none; }
@media (hover: none) {
    /* No hover on touch: the control is simply always there. */
    .pe-tile__del { opacity: 1; }
}

.pe-tile.is-current { border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), .35); }
.pe-tile-wrap.is-current .pe-tile::after {
    content: "✓";
    position: absolute;
    right: 6px; bottom: 4px;
    font-weight: 800;
    color: #06131a;
    background: var(--accent-color);
    border-radius: 999px;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    font-size: .75rem;
}
/* The upload tile leads the grid and wears the same shape as the pictures, so
   adding one reads as part of choosing one. */
.pe-tile--add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    border-style: dashed;
    color: var(--text-secondary);
}
.pe-tile--add:hover { color: var(--accent-color); }
.pe-tile__plus { font-size: 1.8rem; line-height: 1; font-weight: 300; }
.pe-tile__lbl { font-size: .72rem; font-weight: 600; }
.pe-tile.is-busy { opacity: .5; pointer-events: none; }

/* ── Member report dialog (#387) ──
   A locked field needs a way to ask, right where the lock is. */
.mr-ask {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    margin-left: .35rem;
    vertical-align: middle;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.mr-ask:hover, .mr-ask:focus-visible {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), .1);
}
.mr-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.mr-textarea {
    width: 100%;
    padding: .7rem .8rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: .92rem;
    resize: vertical;
}
.mr-textarea:focus { outline: none; border-color: var(--accent-color); }
.mr-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .9rem; flex-wrap: wrap; }
@media (max-width: 480px) {
    .mr-actions { flex-direction: column-reverse; }
    .mr-actions > * { width: 100%; text-align: center; }
}


/* ── Profile edit: quick links and the three numbers (#388) ── */
.pe-quick { display: flex; flex-direction: column; gap: .5rem; }
.pe-quick__item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem .8rem;
    border-radius: 12px;
    background: var(--secondary-bg);
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, background .16s ease;
}
.pe-quick__item:hover { transform: translateX(3px); background: rgba(var(--accent-color-rgb), .1); }
/* Line icons in a soft square, one stroke weight throughout. */
.pe-quick__ico {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(var(--accent-color-rgb), .1);
    color: var(--accent-color);
}
.pe-quick__go {
    flex: 0 0 auto;
    color: var(--text-secondary);
    opacity: .55;
    transition: transform .16s ease, opacity .16s ease;
}
.pe-quick__item:hover .pe-quick__go { opacity: 1; transform: translateX(2px); }
.pe-quick__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pe-quick__name { font-weight: 700; overflow-wrap: anywhere; }
.pe-quick__meta { font-size: .78rem; color: var(--text-secondary); }
.pe-quick__empty { color: var(--text-secondary); font-size: .86rem; margin: 0; }

.pe-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.pe-stat {
    padding: .8rem .6rem;
    border-radius: 12px;
    background: var(--secondary-bg);
    text-align: center;
}
.pe-stat__val { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.pe-stat__lbl { display: block; font-size: .74rem; color: var(--text-secondary); margin-top: .2rem; }


/* ── Two short link blocks side by side (#390) ── */
.pe-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    align-items: start;
}
.pe-duo > .form-fieldset { margin-bottom: 1.5rem; }


/* The picture block on a phone: smaller, and squarely in the middle. */
@media (max-width: 700px) {
    .pe-avatar .member-profile-avatar-wrap {
        width: 124px;
        height: 124px;
    }
    .pe-avatar .member-profile-avatar {
        width: 112px;
        height: 112px;
    }
    .pe-avatar .member-profile-tier-chip {
        right: 4px;
        bottom: 4px;
    }
}

/* ── Hero action on small screens (#391) ──
   Pinned to the top-right corner, the button landed on top of the title once
   the hero narrowed. On a phone it leaves the corner and takes its own line
   below the heading, between the hero and whatever the page starts with. */
@media (max-width: 700px) {
    .news-hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .news-hero-action {
        position: static;
        order: 99;                 /* after the title and subtitle, whatever the DOM order */
        margin: 1.1rem 0 0;
        align-self: center;
    }
    /* Two actions (e.g. edit + report) sit side by side rather than stacking. */
    .news-hero-inner > .news-hero-action ~ .news-hero-action { margin-top: .5rem; }
    .news-hero-stats { order: 50; width: 100%; }
}

/* ── Privacy policy: per-field table (#392) ── */
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: .92rem;
}
.privacy-table th, .privacy-table td {
    text-align: left;
    vertical-align: top;
    padding: .7rem .6rem;
    border-bottom: 1px solid var(--border-color);
}
.privacy-table th { color: var(--text-secondary); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.privacy-table td:first-child { font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
    .privacy-table td:first-child { white-space: normal; }
    .privacy-table, .privacy-table th, .privacy-table td { font-size: .86rem; }
}

/* ── Per-section privacy note (#392) ── */
.pe-privacy {
    margin: -.4rem 0 1rem;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.pe-privacy strong { color: var(--text-primary); font-weight: 700; }
.pe-privacy a { color: var(--accent-color); white-space: nowrap; }

/* ── Members directory (#393) ──
   An internal way to find people, built thumb-first: the old grid was a
   desktop table of cards that squeezed rather than reflowed. */
.md-page { max-width: 1180px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }

.md-search { display: flex; gap: .6rem; margin-bottom: .9rem; }
.md-search__field {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .1rem .85rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--secondary-bg);
    color: var(--text-secondary);
}
.md-search__field input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--text-primary);
    /* 16px keeps iOS from zooming the page when the field takes focus. */
    font-size: 16px;
    padding: .7rem 0;
}
.md-search__field input:focus { outline: none; }
.md-search .cta-button { white-space: nowrap; }

.md-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.md-chip {
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
}
.md-chip:hover { border-color: var(--accent-color); color: var(--accent-color); }
.md-chip.is-on { background: var(--accent-color); border-color: var(--accent-color); color: var(--text-on-accent); font-weight: 700; }

.md-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.md-lane__title { font-size: 1rem; margin: 0 0 .15rem; }
.md-lane__note { font-size: .82rem; color: var(--text-secondary); margin: 0 0 .8rem; }
/* Horizontal strip on a phone: a row of faces scrolls better than it wraps. */
.md-lane__row { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: .4rem; scrollbar-width: thin; }
.md-mini { flex: 0 0 auto; width: 74px; text-align: center; text-decoration: none; color: inherit; }
.md-mini img, .md-mini__ini {
    display: block;
    width: 58px; height: 58px;
    margin: 0 auto .35rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--secondary-bg);
    border: 2px solid transparent;
    transition: border-color .18s ease;
}
.md-mini__ini { display: grid; place-items: center; font-weight: 800; color: var(--text-secondary); }
.md-mini:hover img, .md-mini:hover .md-mini__ini { border-color: var(--accent-color); }
.md-mini__name { font-size: .74rem; color: var(--text-secondary); display: block; overflow-wrap: anywhere; }

.md-result { color: var(--text-secondary); font-size: .88rem; margin: 0 0 1rem; }

.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }
.md-card {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--secondary-bg);
    min-width: 0;
}
.md-card__head { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; min-width: 0; }
.md-card__avatar { flex: 0 0 auto; }
.md-card__avatar img, .md-card__ini {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-bg);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: var(--text-secondary);
}
.md-card__id { display: flex; flex-direction: column; min-width: 0; }
.md-card__name { font-weight: 700; overflow-wrap: anywhere; }
.md-card__nick { font-size: .78rem; color: var(--text-secondary); }
.md-card__roles { display: flex; gap: .3rem; flex-wrap: wrap; }
.md-role {
    font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px;
    background: rgba(34, 211, 238, .15); color: #22D3EE; border: 1px solid rgba(34, 211, 238, .3);
}
.md-card__bio { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text-secondary); }
.md-card__skills { display: flex; gap: .3rem; flex-wrap: wrap; }
.md-skill {
    font-size: .72rem; padding: .15rem .55rem; border-radius: 999px;
    background: var(--primary-bg); border: 1px solid var(--border-color);
    color: var(--text-secondary); text-decoration: none;
}
.md-skill:hover { border-color: var(--accent-color); color: var(--accent-color); }
.md-card__cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .84rem; font-weight: 700; color: var(--accent-color); text-decoration: none;
}
.md-card__cta:hover { gap: .5rem; }

.md-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.md-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.md-pager__btn { color: var(--accent-color); text-decoration: none; font-weight: 700; font-size: .9rem; }
.md-pager__pos { color: var(--text-secondary); font-size: .85rem; }
.md-foot { margin-top: 2.5rem; text-align: center; color: var(--text-secondary); font-size: .88rem; }
.md-foot a { color: var(--accent-color); }

@media (max-width: 600px) {
    .md-page { padding: 1.5rem 1rem 2.5rem; }
    /* One column, and the search button drops under the field rather than
       squeezing it to nothing. */
    .md-grid { grid-template-columns: minmax(0, 1fr); }
    .md-search { flex-wrap: wrap; }
    .md-search__field { flex: 1 1 100%; }
    .md-search .cta-button { flex: 1 1 100%; text-align: center; }
    .md-lanes { gap: 1.25rem; }
}

/* ── Profile completion bonus (#394) ── */
.pc-pitch { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.55; color: var(--text-secondary); }
.pc-pitch strong { color: var(--accent-color); }
.pc-won {
    margin: 0 0 .9rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    background: rgba(var(--accent-color-rgb), .12);
    border: 1px solid rgba(var(--accent-color-rgb), .35);
    color: var(--accent-color);
    font-size: .88rem;
    font-weight: 600;
}
.pc-bar { height: 8px; border-radius: 999px; background: var(--primary-bg); overflow: hidden; }
.pc-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--accent-color-rgb), .5), var(--accent-color));
    transition: width .5s cubic-bezier(.2, .8, .3, 1);
}
.pc-bar__fill.is-full { background: linear-gradient(90deg, var(--accent-color), #2BB89F); }
.pc-pct { margin: .4rem 0 1rem; font-size: .82rem; color: var(--text-secondary); }
.pc-pct strong { color: var(--text-primary); font-size: 1rem; }

.pc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pc-item { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; }
.pc-item__mark {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--primary-bg);
    color: var(--text-secondary);
    font-size: .7rem;
    margin-top: .1rem;
}
.pc-item.is-done .pc-item__mark { background: var(--accent-color); color: var(--text-on-accent); font-weight: 800; }
.pc-item.is-done .pc-item__label { color: var(--text-secondary); text-decoration: line-through; text-decoration-thickness: 1px; }
.pc-item__body { display: flex; flex-direction: column; min-width: 0; }
.pc-item__label em { color: var(--accent-color); font-style: normal; font-weight: 700; }
.pc-item__hint { font-size: .78rem; color: var(--text-secondary); line-height: 1.45; }

/* ── Dashboard nudge toward a complete profile (#394) ── */
.dash-nudge {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: rgba(var(--accent-color-rgb), .08);
    border: 1px solid rgba(var(--accent-color-rgb), .25);
    text-decoration: none;
    color: var(--text-primary);
    text-align: left;
    transition: background .18s ease;
}
.dash-nudge:hover { background: rgba(var(--accent-color-rgb), .14); }
.dash-nudge__bar { flex: 0 0 90px; height: 6px; border-radius: 999px; background: var(--primary-bg); overflow: hidden; }
.dash-nudge__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent-color); }
.dash-nudge__txt { flex: 1 1 auto; font-size: .86rem; line-height: 1.45; }
.dash-nudge__go { flex: 0 0 auto; color: var(--accent-color); font-weight: 800; }
@media (max-width: 560px) {
    .dash-nudge { flex-wrap: wrap; }
    .dash-nudge__bar { flex: 1 1 100%; order: 3; }
}

/* Contribution hint under a face in the directory lanes (#395) */
.md-mini__meta { display: block; font-size: .68rem; color: var(--accent-color); margin-top: .1rem; }

/* ── Public profile on a phone (#396) ──
   The page was a two-column desktop layout that merely stacked. Stacking is
   not the same as fitting: the ring kept its desktop footprint while the
   photo shrank, cards kept desktop padding, and rows of chips ran off the
   side. */
@media (max-width: 700px) {
    .member-profile-hero-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .member-profile-avatar-column { display: flex; flex-direction: column; align-items: center; }

    /* Ring and photo must shrink together, or the circle floats off the face. */
    .member-profile-avatar-wrap { width: 118px; height: 118px; }
    .member-profile-avatar { width: 106px; height: 106px; }
    .member-profile-avatar--placeholder { font-size: 2rem; }
    .member-profile-tier-chip { right: 2px; bottom: 2px; }

    .member-profile-identity { align-items: center; text-align: center; min-width: 0; }
    .member-profile-name { font-size: 1.45rem; overflow-wrap: anywhere; }
    .member-profile-role-pills,
    .member-profile-social-row { justify-content: center; flex-wrap: wrap; }

    /* Cards give back the padding they borrowed from the reading width. */
    .member-profile-section,
    .sidebar-card { padding: 1.1rem; border-radius: 14px; }
    .member-profile-section-title { font-size: 1.05rem; }
    .member-profile-body { gap: 1.1rem; margin-top: 1.1rem; }

    /* Anything in rows wraps instead of pushing the page sideways. */
    .member-profile-section .skill-tag,
    .member-profile-section .member-topic { max-width: 100%; overflow-wrap: anywhere; }
    .website-link-label { overflow-wrap: anywhere; }

    /* A strip of faces scrolls; it does not need to wrap. */
    .member-profile-other-grid {
        display: flex;
        gap: .9rem;
        overflow-x: auto;
        padding-bottom: .4rem;
    }
    .member-profile-other-grid > * { flex: 0 0 44%; }
}

@media (max-width: 420px) {
    .member-profile-name { font-size: 1.3rem; }
    .member-profile-section, .sidebar-card { padding: .95rem; }
    .member-profile-other-grid > * { flex: 0 0 58%; }
}

/* ── Staff viewing another member's profile (#397) ──
   A strip, not a second hero: the profile header right below already
   introduces the person. */
.staff-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
    padding: .6rem 1rem;
    background: rgba(245, 166, 35, .1);
    border-bottom: 1px solid rgba(245, 166, 35, .28);
    font-size: .84rem;
}
.staff-bar__tag { color: #F5A623; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.staff-bar__action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-color-rgb), .4);
    background: rgba(var(--accent-color-rgb), .1);
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
}
.staff-bar__action:hover { background: var(--accent-color); color: var(--text-on-accent); }

/* ── Dashboard actions and staff tools (#398) ──
   One action leads and two follow, instead of three equal slabs. */
.dash-acts { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }

/* Primary action — a solid key with a soft top-sheen and a low glow. */
.dash-acts__main {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem 1.35rem;
    border-radius: 12px;
    background: var(--accent-color);
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
                0 6px 18px rgba(var(--accent-color-rgb), .26);
    transition: transform .18s ease, box-shadow .18s ease;
}
.dash-acts__main svg { opacity: .92; }
.dash-acts__main:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34),
                0 12px 30px rgba(var(--accent-color-rgb), .42);
}
.dash-acts__main:active { transform: translateY(0); }

/* Secondary actions — one hairline-segmented glass cluster, not scattered chips. */
.dash-acts__minor {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}
.dash-acts__ghost {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .62rem .95rem;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.dash-acts__ghost:first-child { border-left: none; }
.dash-acts__ghost svg { opacity: .7; transition: opacity .16s ease, transform .16s ease, color .16s ease; }
.dash-acts__ghost:hover { background: rgba(var(--accent-color-rgb), .12); color: #fff; }
.dash-acts__ghost:hover svg { opacity: 1; color: var(--accent-color); transform: translateY(-1px); }
.dash-acts__ghost:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }

.dash-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem; }
.dash-tool {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem .95rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: border-color .16s ease, transform .16s ease;
}
.dash-tool:hover { border-color: var(--accent-color); transform: translateY(-1px); }
/* The desk on the day of the event: the one tile worth finding in a hurry. */
.dash-tool--lead { border-color: rgba(var(--accent-color-rgb), .45); background: rgba(var(--accent-color-rgb), .08); }
.dash-tool__ico {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(var(--accent-color-rgb), .12);
    color: var(--accent-color);
}
.dash-tool__body { display: flex; flex-direction: column; min-width: 0; }
.dash-tool__name { font-weight: 700; font-size: .92rem; }
.dash-tool__meta { font-size: .76rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
    /* Full width, but still one leading action rather than three of them. */
    .dash-acts { width: 100%; }
    .dash-acts__main { width: 100%; justify-content: center; }
    /* The glass cluster stacks into clean full-width rows on a phone, with the
       hairline moved to the top edge so each row reads as its own segment. */
    .dash-acts__minor { width: 100%; flex-direction: column; }
    .dash-acts__ghost {
        width: 100%;
        justify-content: flex-start;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, .08);
        padding: .85rem 1rem;
    }
    .dash-acts__ghost:first-child { border-top: none; }
    .dash-tools { grid-template-columns: minmax(0, 1fr); }
}

/* ── Hero numbers on a phone (#399) ──
   They were shrunk from 1.5rem to 1.1rem below 768px, which is backwards: on
   a small screen the number IS the content, and its label is the only thing
   that can afford to be quiet. Cards give each one a target and a boundary,
   so three of them read as three figures rather than one run-on line. */
@media (max-width: 768px) {
    .news-hero-inner .news-hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
        width: 100%;
    }
    .news-hero-inner .news-hero-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        padding: .7rem .4rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid var(--border-color);
        min-width: 0;
    }
    .news-hero-inner .news-hero-stat-val {
        font-size: 1.7rem;
        line-height: 1.05;
    }
    .news-hero-inner .news-hero-stat-lbl {
        font-size: .68rem;
        line-height: 1.25;
        text-align: center;
        overflow-wrap: anywhere;
    }
    /* A chart cell has nothing to enlarge; let it span instead. */
    .news-hero-inner .news-hero-stat--chart { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
    /* Two per row before the labels start breaking mid-word. */
    .news-hero-inner .news-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-hero-inner .news-hero-stat-val { font-size: 1.55rem; }
}

/* ── Dashboard empty states and contribution counts (#400) ── */
.dash-empty { text-align: center; color: var(--text-secondary); }
.dash-empty p { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.55; }

.dash-contrib { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.dash-contrib__item { text-align: center; }
.dash-contrib__n { display: block; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--accent-color); }
.dash-contrib__lbl { display: block; font-size: .78rem; color: var(--text-secondary); margin-top: .25rem; }
@media (max-width: 480px) {
    .dash-contrib { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
}

/* ── Advisor directory before it opens (#401) ── */
.adv-soon {
    margin: 1.5rem 0;
    padding: 1.6rem 1.4rem;
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    text-align: center;
    color: var(--text-secondary);
}
.adv-soon__lead { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .5rem; }
.adv-soon p { margin: 0 0 .6rem; line-height: 1.6; }
.adv-soon__note { font-size: .85rem; }
.adv-soon .cta-button { margin-top: .6rem; }

/* ── Hub Dashboard side navigation (#402) ──
   Seventeen destinations do not belong in a tab strip: it wrapped into four
   rows on a laptop and ran off the edge on a phone, which is how Membri and
   Eventi became unreachable. */
.hub-nav-open {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1rem auto 0;
    padding: .55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .06);
    color: var(--text-primary);
    font-weight: 700;
    font-size: .86rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.hub-nav-open:hover { border-color: var(--accent-color); color: var(--accent-color); }
.hub-nav-open__here {
    padding-left: .55rem;
    margin-left: .1rem;
    border-left: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 500;
}

/* Below the header, never over it: the header stays reachable while the
   panel is open, and --hubnav-top is measured in JS because a sticky header
   changes height with the viewport. */
.hub-nav {
    position: fixed;
    top: var(--hubnav-top, 0px);
    left: 0; right: 0; bottom: 0;
    z-index: 900;
}
.hub-nav[hidden] { display: none; }
/* Invisible on purpose: it still catches a tap outside to close the panel,
   but the page underneath stays readable rather than being dimmed. */
.hub-nav__scrim { position: absolute; inset: 0; background: transparent; }
.hub-nav__panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: min(310px, 86vw);
    overflow-y: auto;
    padding: 1.1rem 1rem 2rem;
    background: var(--secondary-bg);
    border-right: 1px solid var(--border-color);
    animation: hub-nav-in .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes hub-nav-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .hub-nav__panel { animation: none; } }

.hub-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.hub-nav__title { font-weight: 800; font-size: .95rem; }

.hub-nav__group {
    margin: 1.1rem 0 .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.hub-nav__group:first-of-type { margin-top: 0; }
.hub-nav__item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: .9rem;
    border-left: 2px solid transparent;
}
.hub-nav__item:hover { background: rgba(255, 255, 255, .05); }
.hub-nav__item.is-on {
    background: rgba(var(--accent-color-rgb), .12);
    border-left-color: var(--accent-color);
    color: var(--accent-color);
    font-weight: 700;
}
.hub-nav__badge {
    margin-left: auto;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--text-on-accent);
    font-size: .7rem;
    font-weight: 800;
}

/* ── Partner team management (#403) ── */
.pt-team { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.pt-member {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    flex-wrap: wrap;
}
.pt-member__avatar {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--secondary-bg);
    color: var(--text-secondary);
    font-weight: 800;
    font-size: .8rem;
}
.pt-member__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-member__id { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; }
.pt-member__name { font-weight: 700; text-decoration: none; color: var(--text-primary); overflow-wrap: anywhere; }
.pt-member__mail { font-size: .76rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.pt-member__role { flex: 0 1 190px; min-width: 0; }
.pt-member__role .form-input { margin: 0; }
.pt-remove {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.pt-remove:hover { border-color: #E5484D; color: #E5484D; }
.pt-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pt-add .form-input { flex: 1 1 190px; min-width: 0; margin: 0; }
@media (max-width: 620px) {
    .pt-member__role, .pt-add .form-input, .pt-add .cta-button { flex: 1 1 100%; }
}


/* ── Hub rail on wide screens (#404) ──
   Above 1200px the navigation is furniture: always present, no scrim, and the
   page makes room for it. Below, it goes back to being a drawer. */
@media (min-width: 1200px) {
    .hub-nav { pointer-events: none; }
    .hub-nav__scrim { display: none; }
    .hub-nav__panel {
        pointer-events: auto;
        width: 248px;
        border-right: 1px solid var(--border-color);
        background: var(--secondary-bg);
        animation: none;
    }
    body.hub-shell { padding-left: 248px; transition: padding-left .22s ease; }
    /* The rail is fixed BELOW the header (top: --hubnav-top = header height) and
       sits under it (z-index 900 < the header's 1000). So the header must NOT be
       pushed right to "clear" the rail — that made the whole header lurch 248px
       sideways every time the rail opened. Keep the header full width with its
       content at the normal 2rem: only the page body below makes room for the
       rail. Cancel the body's left padding so the header stays put. */
    body.hub-shell > header { margin-left: -248px; padding-left: 2rem; }
    body.hub-rail-collapsed.hub-shell { padding-left: 0; }
    body.hub-rail-collapsed.hub-shell > header { margin-left: 0; }
    /* Fill the full width (don't re-centre at 1300px): logo far left, profile
       far right, both stable whether the rail is open or closed. */
    body.hub-shell > header nav { max-width: none; margin: 0; }
}

/* The toggle stays reachable at every width — a panel you cannot close is
   furniture nailed to the floor. */
.hub-nav-open { display: inline-flex; }
.hub-nav__x {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.hub-nav__x:hover { border-color: var(--accent-color); color: var(--accent-color); }
.hub-nav-open[aria-expanded="true"] { border-color: var(--accent-color); color: var(--accent-color); }

/* ── Hub members table (#404) ──
   Columns were sized by whatever fell into them, so avatars, badges and dates
   drifted out of line. Fixed alignment, one identity block per row, and the
   organisations a member belongs to given a column of their own. */
.hub-data-table { width: 100%; border-collapse: collapse; }
.hub-data-table th {
    text-align: left;
    vertical-align: middle;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.hub-data-table td {
    /* Middle, not baseline: an avatar and a one-line date sat on different
       lines otherwise. */
    vertical-align: middle;
    padding: .7rem;
    border-bottom: 1px solid var(--border-color);
    font-size: .88rem;
}
.hub-data-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.hub-col-num { white-space: nowrap; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hub-col-act { width: 1%; white-space: nowrap; }

.hub-member-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.hub-member-avatar, .hub-member-avatar-fallback {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: grid; place-items: center;
    background: var(--primary-bg);
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 800;
}
.hub-member-id { display: flex; flex-direction: column; min-width: 0; }
.hub-member-name { font-weight: 700; color: var(--text-primary); text-decoration: none; overflow-wrap: anywhere; }
.hub-member-name:hover { color: var(--accent-color); }
.hub-member-mail { font-size: .75rem; color: var(--text-secondary); overflow-wrap: anywhere; }

.hub-col-orgs { max-width: 260px; }
.hub-org {
    display: inline-flex;
    flex-direction: column;
    margin: 0 .3rem .3rem 0;
    padding: .2rem .55rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    text-decoration: none;
    color: inherit;
    max-width: 100%;
}
.hub-org:hover { border-color: var(--accent-color); }
.hub-org--venture { border-style: dashed; }
.hub-org__name { font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-org__type { font-size: .66rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.hub-org-none { color: var(--text-secondary); }

.hub-row-acts { display: flex; gap: .35rem; align-items: center; justify-content: flex-end; }
.hub-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    height: 30px;
    padding: 0 .7rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}
.hub-act:hover { border-color: var(--accent-color); color: var(--accent-color); }
.hub-act--primary { background: rgba(var(--accent-color-rgb), .12); border-color: rgba(var(--accent-color-rgb), .35); color: var(--accent-color); }
.hub-act svg { display: block; }

/* ── Hub partner console (#405) ── */
.hub-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hub-head h2 { margin: 0; text-align: left; }
.hub-head__count { color: var(--text-secondary); font-size: .85rem; }
.hub-data-table tr.is-muted { opacity: .55; }
.pd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.pd-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
    padding: .45rem 0; border-bottom: 1px solid var(--border-color); font-size: .88rem;
}
.pd-row:last-child { border-bottom: 0; }
.pd-row a { color: var(--text-primary); text-decoration: none; overflow-wrap: anywhere; }
.pd-row a:hover { color: var(--accent-color); }

/* ── Event FAQ and schedule (#406) ──
   Two sections that are lists, not prose, and read better as such. */
.content-block--faq .subsection-block {
    padding: .9rem 0;
    border-bottom: 1px solid var(--border-color);
    margin: 0;
}
.content-block--faq .subsection-block:last-of-type { border-bottom: 0; }
.content-block--faq .subsection-block h3 {
    /* The question, not a heading: same size as the answer, carried by weight.
       .content-block h3 marks section titles with an accent rule and an
       inline-block box; a question is neither, so both are given back. */
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .3rem;
    color: var(--text-primary);
    line-height: 1.45;
    border-bottom: 0;
    padding-bottom: 0;
    display: block;
}
.content-block--faq .subsection-block .content-body,
.content-block--faq .subsection-block .content-body p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* The schedule: the hour leads, in a fixed-width figure so the rows line up. */
.content-block--schedule .subsection-block {
    padding: .75rem 0;
    border-bottom: 1px solid var(--border-color);
    margin: 0;
}
.content-block--schedule .subsection-block:last-of-type { border-bottom: 0; }
.content-block--schedule .subsection-block h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--accent-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    /* Same inheritance as the FAQ: an hour is not a section title. */
    border-bottom: 0;
    padding-bottom: 0;
    display: block;
}
.content-block--schedule .subsection-block .content-body,
.content-block--schedule .subsection-block .content-body p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Stand section: the same card grid as the ventures page, breathing a little
   more since it sits inside a narrower reading column (#407). */
.event-stand-grid { margin: 1.2rem 0 1.6rem; }
@media (max-width: 600px) {
    .event-stand-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Cards inside event content (#408) ──
   .content-block h3 draws the accent underline that marks a section heading.
   A card's title is not a section heading, so inside a card it has to give
   that back and look exactly as it does on the ventures page. */
.event-stand-grid .card h3,
.event-stand-grid .card h4 {
    font-size: 1.15rem;
    color: var(--text-primary);
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: .35rem;
    display: block;
}
.event-stand-grid .card a { text-decoration: none; }
.event-stand-grid .card p { color: var(--text-secondary); }

/* ── Hub panel toggle, in the site header (#409) ──
   It sits beside the logo so it is in the same place on every Hub page and
   survives the panel being closed. */
.hub-header-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px; height: 36px;
    margin-right: .75rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .05);
    color: var(--text-secondary);
    cursor: pointer;
    flex: 0 0 auto;
}
.hub-header-toggle:hover { border-color: var(--accent-color); color: var(--accent-color); }
.hub-header-toggle[aria-expanded="true"] { color: var(--accent-color); border-color: rgba(var(--accent-color-rgb), .45); }
/* Keep the flex row, but do NOT drop justify-content here: an earlier bare
   `header nav { display:flex }` wiped the base space-between, so with the extra
   Hub toggle child everything packed left and the nav ran off the right edge.
   Anchor the logo left with an auto margin instead — robust to the toggle
   being present or not, on hub pages and everywhere else. */
header nav { display: flex; align-items: center; flex-wrap: nowrap; }
header nav h1 { margin-right: auto; }
/* Let the right-hand controls shrink and, if a crowded header (Hub toggle +
   bell + language + profile) would overflow, wrap right-aligned onto a second
   line instead of running off the screen. */
header nav .nav-links { flex-shrink: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 1rem 1.8rem; }

/* Stand invitation confirm (#409) */
.si-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.4rem; }
.si-label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .88rem; }
.si-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.si-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; margin-top: .5rem; }
@media (max-width: 520px) { .si-actions { flex-direction: column-reverse; } .si-actions .cta-button { width: 100%; text-align: center; } }

/* ── Partner story sections editor (#411) ── */
.ps-section { margin-bottom: 1rem; }
.ps-section__head { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.ps-section__title { flex: 1 1 auto; min-width: 0; font-weight: 700; margin: 0; }
.ps-save { padding: .5rem .9rem; border-radius: 8px; border: 1px solid rgba(var(--accent-color-rgb), .4); background: rgba(var(--accent-color-rgb), .12); color: var(--accent-color); font-weight: 700; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.ps-remove { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.ps-remove:hover { border-color: #E5484D; color: #E5484D; }
.ps-add { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.ps-add .form-input { flex: 1 1 200px; min-width: 0; }

/* Onboarding speech/podcast opt-in (#412) */
.si-speak{border:1px solid var(--border-color);border-radius:12px;padding:1rem;margin:.5rem 0;}
.si-speak legend{padding:0 .4rem;font-weight:700;}
.si-speak__note{font-size:.84rem;color:var(--text-secondary);margin:0 0 .7rem;}

/* Partner member code (#414) */
.pc-code{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem 1.1rem;border:1px dashed var(--accent-color);border-radius:12px;background:rgba(var(--accent-color-rgb),.06);}
.pc-code__val{font-size:1.15rem;font-weight:800;letter-spacing:.06em;color:var(--accent-color);font-family:monospace;}
.pc-code__left{color:var(--text-secondary);font-size:.85rem;}

/* Hub events list thumbnails (#416) */
.hub-ev-thumb{flex:0 0 auto;width:42px;height:42px;border-radius:8px;object-fit:cover;background:var(--primary-bg);display:grid;place-items:center;font-size:1.1rem;}
.hub-ev-thumb--ph{color:var(--text-secondary);}

/* ── Event hero: management actions in their own wrapping bar (#416) ──
   Kept off the title row so a wall of admin buttons no longer squeezes the
   event name and its info. */
.event-mgmt-bar{
    display:flex;flex-wrap:wrap;gap:.5rem;
    justify-content:center;
    margin-top:1rem;padding-top:1rem;
    border-top:1px solid rgba(255,255,255,.12);
}
.event-mgmt-bar .article-hero-cta{
    font-size:.82rem;padding:.45rem .8rem;
    justify-content:center;
}
@media (max-width:600px){
    .event-mgmt-bar{gap:.4rem;}
    /* Two clean columns of equal buttons instead of a ragged wrap. */
    .event-mgmt-bar .article-hero-cta{
        flex:1 1 calc(50% - .4rem);
        min-width:0;
    }
}
@media (max-width:380px){
    /* Single full-width column on the narrowest phones. */
    .event-mgmt-bar .article-hero-cta{flex-basis:100%;}
}
/* The primary Partecipa keeps the hero to a clean single action + title. */
.article-hero-actions{flex-wrap:wrap;}

.event-flyer-cta{display:flex;justify-content:center;margin-top:1.1rem;}
.event-flyer-cta .article-cta-link--participate{margin:0;}

/* ── Review center: expandable request details (#417) ── */
.rc-details{margin:.7rem 0 0;border-top:1px solid var(--border-color);padding-top:.6rem;}
.rc-details summary{cursor:pointer;font-size:.85rem;font-weight:700;color:var(--accent-color);list-style:none;display:inline-flex;align-items:center;gap:.4rem;}
.rc-details summary::before{content:"▸";transition:transform .15s ease;display:inline-block;}
.rc-details[open] summary::before{transform:rotate(90deg);}
.rc-detail-list{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:.3rem .9rem;margin:.7rem 0 0;font-size:.86rem;}
.rc-detail-list dt{color:var(--text-secondary);font-weight:600;}
.rc-detail-list dd{margin:0;overflow-wrap:anywhere;}
.rc-detail-list dd a{color:var(--accent-color);}
@media(max-width:560px){.rc-detail-list{grid-template-columns:1fr;gap:.1rem .9rem;}.rc-detail-list dt{margin-top:.5rem;}}

/* ── Stand cards on the event page: clear the name from the logo (#417) ──
   The logo is 102px and hangs 51px into the footer, but the footer's own
   top padding is 42px — so a startup's name was tucked under it. Push the
   name down past the logo's reach in the stand grid. */
.event-stand-grid .venture-card-footer {
    padding-top: 60px;
}

/* ============================================================
   Event Page Builder — 2-column modular editor with palette
   ============================================================ */
.pb-layout{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:2rem;
    align-items:start;
}
.pb-canvas{min-width:0;}

/* ── Palette (left column) — minimalist, transparent, elegant ── */
.pb-palette{
    position:sticky;
    top:1rem;
    background:transparent;
    border:none;
    padding:0;
}
.pb-palette-toggle{display:none;}
.pb-palette-hint{
    font-size:.82rem;
    color:var(--text-secondary);
    line-height:1.5;
    margin:0 0 1.5rem;
}
.pb-palette-group{margin-bottom:2rem;}
.pb-palette-group:last-child{margin-bottom:0;}
.pb-palette-label{
    display:block;
    font-family:var(--font-headings);
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-secondary);
    margin-bottom:.85rem;
}
.pb-palette-item{
    display:flex;
    align-items:center;
    gap:.85rem;
    width:100%;
    padding:.95rem 1.1rem;
    margin-bottom:.6rem;
    background:transparent;
    border:1px solid var(--border-color);
    border-radius:12px;
    font-family:inherit;
    font-size:.95rem;
    font-weight:600;
    color:var(--text-color);
    cursor:pointer;
    text-align:left;
    transition:border-color .2s, background .2s, transform .1s, box-shadow .2s;
}
.pb-palette-item:last-child{margin-bottom:0;}
.pb-palette-item:hover{
    border-color:var(--accent-color);
    background:rgba(var(--accent-color-rgb),.04);
    box-shadow:0 4px 18px rgba(0,0,0,.05);
    transform:translateY(-1px);
}
.pb-palette-item:active{transform:translateY(0) scale(.99);}
.pb-palette-item svg{
    flex:0 0 auto;
    width:18px;height:18px;
    color:var(--accent-color);
    opacity:.85;
}
.pb-pinned-note{
    font-size:.82rem;
    color:var(--text-secondary);
    line-height:1.55;
    margin:0;
}
.pb-pinned-note a{color:var(--accent-color);font-weight:600;}

/* ── Drag handle + drag states ── */
.pb-grip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;height:26px;
    padding:0;
    background:transparent;
    border:none;
    border-radius:6px;
    color:var(--text-muted,#aab);
    cursor:grab;
    touch-action:none;
}
.pb-grip:hover{background:rgba(var(--accent-color-rgb),.1);color:var(--accent-color);}
.pb-grip:active{cursor:grabbing;}
.editor-section.pb-drag-active{
    opacity:.5;
    outline:2px dashed var(--accent-color);
    outline-offset:2px;
}
.editor-section.pb-drop-before{
    box-shadow:0 -3px 0 0 var(--accent-color);
}
.editor-section.pb-just-added{
    animation:pbFlash 1.2s ease;
}
@keyframes pbFlash{
    0%{box-shadow:0 0 0 3px rgba(var(--accent-color-rgb),.5);}
    100%{box-shadow:0 0 0 0 rgba(var(--accent-color-rgb),0);}
}

/* ── Responsive: single column + collapsible palette ── */
@media (max-width:900px){
    .pb-layout{grid-template-columns:1fr;}
    .pb-palette{
        position:static;
        padding:.75rem 1rem;
        order:-1;
    }
    .pb-palette-toggle{
        display:flex;
        align-items:center;
        gap:.5rem;
        width:100%;
        padding:.55rem .75rem;
        background:transparent;
        border:none;
        font-family:inherit;
        font-size:.9rem;
        font-weight:700;
        color:var(--text-color,#223);
        cursor:pointer;
    }
    .pb-palette-body{display:none;padding-top:.75rem;}
    .pb-palette--open .pb-palette-body{display:block;}
    /* On mobile lay palette items in a wrapping grid for quick reach. */
    .pb-palette--open .pb-palette-group:first-of-type{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:.5rem;
    }
    .pb-palette--open .pb-palette-item{margin-bottom:0;}
    .pb-palette--open .pb-palette-label{grid-column:1 / -1;margin-bottom:0;}
}

/* ============================================================
   Smart Timeline block (event edit page)
   ============================================================ */
.etl-block{
    margin:1.5rem 0;
    border:1px solid var(--border-color);
    border-radius:14px;
    background:var(--card-bg);
    overflow:hidden;
}
.etl-block-summary{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:1rem 1.25rem;
    cursor:pointer;
    font-family:var(--font-headings);
    font-weight:700;
    font-size:1rem;
    color:var(--text-color);
    list-style:none;
    user-select:none;
}
.etl-block-summary::-webkit-details-marker{display:none;}
.etl-block-summary svg{color:var(--accent-color);flex:0 0 auto;}
.etl-block-sub{
    font-family:var(--font-body,inherit);
    font-weight:500;
    font-size:.8rem;
    color:var(--text-secondary);
    margin-left:auto;
}
.etl-block-body{padding:0 1.25rem 1.25rem;}
.etl-busy{opacity:.55;pointer-events:none;transition:opacity .15s;}
.etl-empty{color:var(--text-secondary);font-size:.9rem;padding:1rem 0;}

.etl-grid{
    display:grid;
    grid-template-columns:225px minmax(0,1fr);
    gap:1.25rem;
    align-items:start;
    width:100%;
}
.etl-block-body{width:100%;}

/* ── Pool (left) ── */
.etl-group{margin-bottom:1.5rem;}
.etl-group:last-child{margin-bottom:0;}
.etl-group-label{
    display:block;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-secondary);
    margin-bottom:.6rem;
}
.etl-group-label em{
    font-style:normal;
    display:inline-block;
    min-width:18px;
    padding:0 5px;
    margin-left:.25rem;
    border-radius:9px;
    background:rgba(var(--accent-color-rgb),.14);
    color:var(--accent-color);
    font-size:.7rem;
    text-align:center;
}
.etl-group-empty{
    font-size:.82rem;
    color:var(--text-secondary);
    opacity:.7;
    margin:0;
}
.etl-group--rejected summary{cursor:pointer;list-style:none;}
.etl-group--rejected summary::-webkit-details-marker{display:none;}
.etl-group--rejected[open]{margin-top:1rem;}

/* ── Cards ── */
.etl-card{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.6rem .7rem;
    margin-bottom:.5rem;
    background:var(--bg-color,#fff);
    border:1px solid var(--border-color);
    border-radius:10px;
    transition:border-color .18s, box-shadow .18s, transform .1s;
}
.etl-card:last-child{margin-bottom:0;}
.etl-card--accepted{cursor:grab;}
.etl-card--accepted:hover{
    border-color:var(--accent-color);
    box-shadow:0 3px 14px rgba(0,0,0,.06);
}
.etl-card--dragging{opacity:.5;}
.etl-card--rejected{opacity:.65;}
.etl-card-main{display:flex;align-items:center;gap:.55rem;min-width:0;flex:1;}
.etl-card-kind{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;height:26px;
    border-radius:7px;
    background:rgba(var(--accent-color-rgb),.1);
    color:var(--accent-color);
}
.etl-card-kind--podcast{
    background:rgba(180,90,220,.14);
    color:#a94fce;
}
.etl-card-body{min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.etl-card-name{
    font-size:.88rem;
    font-weight:600;
    color:var(--text-color);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.etl-card-meta{font-size:.74rem;color:var(--text-secondary);}
.etl-card-actions{display:flex;gap:.35rem;flex:0 0 auto;}
.etl-btn{
    padding:.3rem .6rem;
    border-radius:6px;
    border:1px solid var(--border-color);
    background:transparent;
    font-family:inherit;
    font-size:.74rem;
    font-weight:600;
    cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
}
.etl-btn--accept{color:#1a9d4f;border-color:rgba(26,157,79,.4);}
.etl-btn--accept:hover{background:rgba(26,157,79,.1);border-color:#1a9d4f;}
.etl-btn--reject{color:#d13c3c;border-color:rgba(209,60,60,.35);}
.etl-btn--reject:hover{background:rgba(209,60,60,.1);border-color:#d13c3c;}
.etl-card-remove{
    flex:0 0 auto;
    width:24px;height:24px;
    border:none;background:transparent;
    color:var(--text-secondary);
    font-size:1.15rem;line-height:1;
    cursor:pointer;border-radius:6px;
}
.etl-card-remove:hover{background:rgba(209,60,60,.1);color:#d13c3c;}

/* ── Timeline track (right) ── */
.etl-track{
    border:1px solid var(--border-color);
    border-radius:10px;
    overflow:hidden;
    max-height:520px;
    overflow-y:auto;
}
.etl-track-head{
    display:flex;
    justify-content:space-between;
    padding:.55rem .85rem;
    background:rgba(var(--accent-color-rgb),.05);
    border-bottom:1px solid var(--border-color);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-secondary);
    position:sticky;top:0;z-index:1;
}
.etl-row{
    display:flex;
    align-items:stretch;
    min-height:40px;
    border-bottom:1px dashed var(--border-color);
}
.etl-row:last-child{border-bottom:none;}
.etl-row-time{
    flex:0 0 54px;
    display:flex;align-items:center;
    padding-left:.85rem;
    font-size:.78rem;
    font-weight:600;
    color:var(--text-secondary);
    background:rgba(var(--primary-bg-rgb),.25);
}
.etl-row-drop{
    flex:1;
    display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
    padding:.35rem .5rem;
    min-width:0;
}
.etl-row-hint{
    font-size:.72rem;color:var(--text-secondary);opacity:0;
    transition:opacity .15s;
}
.etl-row:hover .etl-row-hint{opacity:.55;}
/* Hide the "drop here" hint once the row actually holds a chip. */
.etl-row--filled .etl-row-hint{display:none;}
.etl-row--over{background:rgba(var(--accent-color-rgb),.1);}
.etl-row--over .etl-row-hint{opacity:1;color:var(--accent-color);}
.etl-row--filled{background:rgba(var(--accent-color-rgb),.04);}
.etl-row--filled .etl-row-drop .etl-chip{flex:1 1 auto;}

/* ── Chips (segments + organiser items) ── */
.etl-chip{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.45rem .6rem;
    margin-bottom:.4rem;
    background:var(--bg-color,#fff);
    border:1px solid var(--border-color);
    border-radius:9px;
    cursor:grab;
    transition:border-color .18s, box-shadow .18s, opacity .15s;
    min-width:0;
}
.etl-pool .etl-chip{width:100%;}
.etl-chip:last-child{margin-bottom:0;}
.etl-chip:hover{border-color:var(--accent-color);box-shadow:0 3px 12px rgba(0,0,0,.06);}
.etl-chip--dragging{opacity:.5;}
.etl-chip--placed{margin:0;background:var(--card-bg);}
.etl-chip-icon{
    flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:6px;
    background:rgba(var(--accent-color-rgb),.1);
    color:var(--accent-color);
}
.etl-chip-icon--podcast{background:rgba(180,90,220,.14);color:#a94fce;}
.etl-chip-icon--speech{background:rgba(38,132,255,.14);color:#2684ff;}
.etl-chip-body{min-width:0;display:flex;flex-direction:column;line-height:1.2;flex:1;}
.etl-chip-name{
    font-size:.84rem;font-weight:600;color:var(--text-color);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.etl-chip-meta{font-size:.72rem;color:var(--text-secondary);}
.etl-chip-remove{
    flex:0 0 auto;width:22px;height:22px;border:none;background:transparent;
    color:var(--text-secondary);font-size:1.05rem;line-height:1;cursor:pointer;border-radius:5px;
}
.etl-chip-remove:hover{background:rgba(209,60,60,.1);color:#d13c3c;}

/* ── Organiser preset buttons ── */
.etl-presets{display:flex;flex-wrap:wrap;gap:.4rem;}
.etl-preset{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.35rem .6rem;
    background:transparent;
    border:1px dashed var(--border-color);
    border-radius:20px;
    font-family:inherit;font-size:.78rem;font-weight:600;
    color:var(--text-secondary);
    cursor:pointer;
    transition:border-color .15s, color .15s, background .15s;
}
.etl-preset:hover{border-color:var(--accent-color);color:var(--accent-color);background:rgba(var(--accent-color-rgb),.05);}
.etl-preset svg{opacity:.7;}

@media (max-width:820px){
    .etl-grid{grid-template-columns:1fr;}
    .etl-track{max-height:420px;}
}

/* ── Smart Exhibitors block (event editor) ── */
.exb-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:1.25rem;
    margin-bottom:1.25rem;
    padding-bottom:1.25rem;
    border-bottom:1px solid var(--border-color);
}
.exb-toggle{
    display:flex;
    align-items:center;
    gap:.55rem;
    font-size:.9rem;
    font-weight:600;
    color:var(--text-color);
    cursor:pointer;
}
.exb-toggle input{width:18px;height:18px;flex:0 0 auto;cursor:pointer;}
.exb-title-field{flex:1;min-width:220px;margin:0;}
.exb-title-field label{
    display:block;
    font-size:.75rem;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:.35rem;
}
.exb-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem;}
.exb-chip{
    display:inline-flex;
    align-items:center;
    padding:.3rem .7rem;
    border-radius:20px;
    background:rgba(var(--accent-color-rgb),.1);
    color:var(--accent-color);
    font-size:.82rem;
    font-weight:600;
}
.exb-incomplete{
    display:flex;
    align-items:center;
    gap:.45rem;
    margin:.9rem 0 0;
    font-size:.82rem;
    color:#b8860b;
}
.exb-incomplete svg{flex:0 0 auto;color:#d99a00;}

/* ── Public exhibitors block heading ── */
.event-exhibitors-block{margin-top:2rem;}

/* ── Notification bell (navbar) ── */
.nav-bell-item{position:relative;}
/* The bell shows only an icon in the top bar; its text label appears in the
   mobile menu where an icon alone would be ambiguous. */
.nav-ico-label{display:none;}
.nav-bell-toggle{background:transparent;border:none;cursor:pointer;padding:0;}
.nav-bell-dropdown{
    position:absolute;top:calc(100% + 10px);right:0;
    width:340px;max-width:calc(100vw - 2rem);
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.16);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .16s, transform .16s, visibility .16s;
    z-index:1200;overflow:hidden;
}
.nav-bell-open .nav-bell-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.nav-bell-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:.85rem 1rem;border-bottom:1px solid var(--border-color);
    font-weight:700;font-size:.9rem;
}
.nav-bell-allread{
    background:transparent;border:none;color:var(--accent-color);
    font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
}
.nav-bell-list{list-style:none;margin:0;padding:0;max-height:360px;overflow-y:auto;}
.nav-bell-notif{border-bottom:1px solid var(--border-color);}
.nav-bell-notif:last-child{border-bottom:none;}
.nav-bell-notif a{
    display:flex;flex-direction:column;gap:.2rem;
    padding:.75rem 1rem;text-decoration:none;color:var(--text-color);
}
.nav-bell-notif a:hover{background:rgba(var(--accent-color-rgb),.05);}
.nav-bell-notif--unread{background:rgba(var(--accent-color-rgb),.06);}
.nav-bell-notif--unread .nav-bell-text{font-weight:600;}
.nav-bell-text{font-size:.86rem;line-height:1.35;}
.nav-bell-time{font-size:.72rem;color:var(--text-secondary);}
.nav-bell-empty{padding:1.5rem 1rem;text-align:center;color:var(--text-secondary);font-size:.86rem;}
.nav-bell-all{
    display:block;text-align:center;padding:.7rem;
    border-top:1px solid var(--border-color);
    color:var(--accent-color);font-weight:600;font-size:.85rem;text-decoration:none;
}
.nav-bell-all:hover{background:rgba(var(--accent-color-rgb),.05);}