: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%;
    /* Preserve the founder's image as-is — show it whole, never cropped or
       stretched. Any letterbox area falls back to the section background. The
       edit page recommends a ~3:1 banner so it fills this frame perfectly. */
    object-fit: contain;
    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-subhead {
    margin: 1rem 0 .6rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text-secondary);
}
.content-subhead:first-of-type { margin-top: .6rem; }

.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;
    /* Box shrink-wraps the logo: its size equals the logo's (at a fixed height) */
    width: auto;
    height: auto;
    max-width: 200px;   /* safety cap for extreme aspect ratios only */
    line-height: 0;
}
.venture-card-logo img {
    display: block;
    height: 92px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 10px;
}
.venture-card-logo-letter {
    width: 92px;
    height: 92px;
    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;
        /* Fill exactly the space between the sticky header and the viewport
           bottom. 80vh used to spill below the fold on phones (vh counts the
           area behind the URL bar), stranding the last items of a long Account
           menu off-screen. dvh is URL-bar aware; --nav-h is the real header
           height (base.html). vh line is the fallback for older browsers. */
        max-height: calc(100vh - var(--nav-h, 64px));
        max-height: calc(100dvh - var(--nav-h, 64px));
        padding: 0.5rem 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    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;
        /* Shown inline in the drawer: the account links (incl. Hub Dashboard)
           are always visible when the hamburger is open. The old tap-to-expand
           on the avatar — the last item of a scrollable panel — was unreliable
           on phones (opened below the fold, hard to reach). */
        display: block;
    }
    .profile-dropdown-menu.show { display: block; }
    /* No expand/collapse affordance on mobile: the avatar row is just a header. */
    .profile-caret { display: none; }
    .profile-toggle { cursor: default; }
    .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; }

/* Il riquadro si stringe attorno al logo, come nella scheda piena: un marchio
   largo resta largo, uno quadrato resta quadrato. Fissare qui 72x72 annullava
   quel comportamento e schiacciava tutto nella stessa sagoma.
   L'ancoraggio e' al bordo destro, non a una percentuale: con larghezza
   variabile una percentuale fa uscire il riquadro dalla scheda. */
.sidebar-venture-card-stack .venture-card-logo {
    left: auto;
    right: 16px;
    transform: translateY(50%);
    width: auto;
    height: auto;
    max-width: calc(100% - 32px);
    padding: 5px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.sidebar-venture-card-stack .venture-card-logo img {
    height: 62px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 9px;
}
.sidebar-venture-card-stack .venture-card-logo-letter {
    width: 62px;
    height: 62px;
    border-radius: 9px;
    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-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.dashboard-crumb {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
a.dashboard-crumb:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}
.dashboard-crumb--current {
    border-color: rgba(57, 211, 187, 0.4);
    background: rgba(57, 211, 187, 0.12);
    color: var(--accent-color);
    font-weight: 700;
}
.dashboard-crumb-sep {
    color: var(--text-secondary);
    opacity: 0.55;
}
.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;
    }
    /* Due colonne regolari invece di un a capo che lascia una riga da tre e
      una da due. */
   .dashboard-hero .news-hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
        margin-bottom: 1rem;
    }
    .dashboard-hero .news-hero-stat {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: .55rem .7rem;
        min-width: 0;
    }
    .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;
}

.news-section--centered .news-section-heading {
    position: relative;
    justify-content: center;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}
.news-section--centered .news-section-heading::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.55rem;
    transform: translateX(-50%);
    width: 3.5rem;
    height: 1px;
    background: rgba(255,255,255,0.12);
}

@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;
    }
    /* Si rimpicciolisce il logo, non lo si costringe in un quadrato: il
       riquadro continua a prendere la forma del marchio. */
    .venture-card-logo {
        padding: 5px;
        border-radius: 12px;
    }
    .venture-card-logo img { height: 76px; }
    .venture-card-logo-letter { width: 76px; height: 76px; }
    .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 {
        padding: 4px;
        border-radius: 10px;
    }
    .venture-card-logo img { height: 62px; }
    .venture-card-logo-letter { width: 62px; height: 62px; }
    .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 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.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;
    flex-shrink: 0;
}
.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-wrap { width: 112px; height: 112px; }
    .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: 1180px;
    margin: 0 auto;
    padding: 2rem 24px 0;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}
.console-form-col { min-width: 0; }

/* Left rail: quick actions + section nav, sticky as one column */
.console-side {
    position: sticky;
    top: 88px;
    align-self: start;
    max-height: calc(100vh - 104px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 4px;
}

/* Quick actions card (Salva / Annulla) */
.console-quick {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.console-quick__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-secondary);
}
/* Due comandi, due icone. Erano due blocchi larghi con l'etichetta, uno sopra
   l'altro, e occupavano la parte alta della colonna in ogni schermata della
   console per dire «salva» e «annulla». Il nome resta nel suggerimento e
   nell'etichetta per i lettori di schermo; sotto, la riga che dice se c'e'
   qualcosa da salvare, che e' l'informazione che serve davvero. */
.console-quick__row { display: flex; gap: .5rem; }
.console-qbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 42px;
    border-radius: 11px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    transition: background .18s, border-color .18s, color .18s, transform .15s, box-shadow .18s;
}
.console-qbtn:hover { border-color: var(--accent-color); color: var(--text-primary); }
.console-qbtn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.console-qbtn svg { display: block; }
.console-qbtn--save {
    flex: 2 1 0;
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-on-accent);
    box-shadow: 0 4px 14px rgba(var(--accent-color-rgb), .26);
}
.console-qbtn--save:hover { color: var(--text-on-accent); transform: translateY(-1px); box-shadow: 0 7px 20px rgba(var(--accent-color-rgb), .36); }
.console-qbtn--save:active { transform: translateY(0); }
.console-qbtn--save:disabled { cursor: progress; opacity: .6; transform: none; box-shadow: none; }
/* Finche' non c'e' niente da salvare il pulsante non promette nulla. */
.console-quick:not(.is-dirty) .console-qbtn--save { opacity: .5; box-shadow: none; }
.console-quick:not(.is-dirty) .console-qbtn--save:hover { transform: none; box-shadow: none; }
.console-quick__hint {
    font-size: .76rem;
    color: var(--text-secondary);
    min-height: 1em;
    text-align: center;
    line-height: 1.4;
}
.console-quick.is-dirty {
    border-color: rgba(var(--accent-color-rgb), .55);
    box-shadow: 0 10px 30px rgba(var(--accent-color-rgb), .18);
}
.console-quick.is-dirty .console-quick__hint { color: var(--accent-color); }
.console-quick.is-saving .console-quick__save { opacity: .7; cursor: progress; }

/* Section-nav rail */
.console-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.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; }
    /* Quick actions sit at the top, full width, not stuck to the viewport. */
    .console-side { position: static; max-height: none; overflow: visible; margin-bottom: 1rem; }
    .console-quick { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .console-quick__label { flex-basis: 100%; }
    /* Anche in riga la gerarchia resta: il salvataggio prende lo spazio, la
       via d'uscita quello che le serve. */
    .console-quick__save { flex: 1 1 auto; width: auto; }
    .console-quick__cancel { flex: 0 0 auto; width: auto; align-self: auto; }
}
@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)
   ══════════════════════════════════════════════════════════════════ */
/* ── Section navigation, tablet/mobile only ───────────────────────────────
   Below the two-column breakpoint the left rail collapses; the section nav
   becomes a sticky pill bar above the form that WRAPS (no hidden nav, no
   horizontal scroll). On desktop the two-column left rail (above) is used. */
@media (max-width: 991px) {
    .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: 56px;                          /* 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: 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; }

/* Erano colonne nude accostate: con un nome lungo il valore finiva a filo
   della colonna accanto e non si capiva piu' quale numero appartenesse a
   quale voce. Adesso ogni gruppo e' un riquadro con il suo perimetro, e la
   larghezza minima e' quella che serve a una ragione sociale. */
.ev-breakdowns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.ev-breakdown {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, .02);
}
.ev-breakdown h4 {
    font-size: 0.76rem;
    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: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: .86rem;
    line-height: 1.45;
    min-width: 0;
}
/* Il valore non si stringe e non va a capo: e' il pezzo che si legge per
   primo, e deve restare in una riga sola qualunque cosa gli stia accanto. */
.ev-row > strong, .ev-row > .ev-tag { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-row > strong { font-size: .95rem; }
.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) {
    /* ── Testata della dashboard su schermo stretto ──────────────────────
       Identita' compatta: l'avatar accanto al saluto invece che sopra una
       colonna che poi va a capo da sola. */
    .dash-id { gap: .8rem; align-items: center; }
    .dash-id__avatar { width: 54px; height: 54px; }
    .dash-id__hello { font-size: 1.35rem; }
    .dash-id__name { font-size: .86rem; margin: .1rem 0 .4rem; }
    .dash-id__body { flex: 1 1 0; }
    .dash-id__bio { display: none; }
    .dash-acts { flex: 1 1 100%; }

    /* Le azioni rapide prendono tutta la larghezza e si dividono lo spazio in
       parti uguali. Quarantaquattro pixel e' la misura minima di un bersaglio
       che si preme con il dito: trentotto erano troppo pochi. */
    .dash-icons {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: .4rem;
        margin-top: .9rem;
    }
    .dash-ico { width: 100%; height: 44px; border-radius: 12px; }
}

/* ── 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; }
}

/* ── Profile edit fieldsets: card-like panels with consistent spacing ── */
.profile-edit-page--wide .form-fieldset {
    background: rgba(26, 32, 44, .65);
    border: 1px solid rgba(var(--accent-color-rgb), .15);
    border-radius: 16px;
    padding: 1.5rem 1.6rem 1.6rem;
    margin: 0 0 1.25rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.profile-edit-page--wide .form-fieldset > legend {
    padding: 0 0 .6rem;
    margin-bottom: 1rem;
    width: 100%;
    border-bottom: 1px solid rgba(var(--accent-color-rgb), .18);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-headings, 'Montserrat', sans-serif);
    color: var(--accent-color);
}
.profile-edit-page--wide .form-group { margin-bottom: 1.15rem; }
.profile-edit-page--wide .form-group > label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-secondary, #b8c0cc);
    margin-bottom: .35rem;
    display: block;
}
.profile-edit-page--wide textarea { min-height: 140px; }

/* ── Save bar: sticky on mobile so the user doesn't scroll to the bottom ── */
.profile-edit-page--wide .profile-edit-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    padding: 1.1rem 0;
    margin-top: .75rem;
    border-top: 1px solid rgba(var(--accent-color-rgb), .18);
}
.profile-edit-page--wide .profile-edit-actions .cta-button-outline {
    padding: .65rem 1.8rem;
    font-size: .92rem;
    border-radius: 10px;
}

@media (max-width: 980px) {
    .pe-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pe-col--side { position: static; }
}
@media (max-width: 700px) {
    .profile-edit-page--wide { padding: 1.25rem .85rem 5.5rem; }
    .profile-edit-page--wide .form-fieldset {
        padding: 1.15rem 1.1rem 1.25rem;
        border-radius: 14px;
        margin-bottom: .85rem;
    }
    .profile-edit-page--wide .form-fieldset > legend {
        font-size: 1rem;
    }
    .profile-edit-page--wide .profile-edit-actions {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 100;
        background: rgba(26, 32, 44, .97);
        border-top: 1px solid rgba(var(--accent-color-rgb), .25);
        padding: .85rem 1rem;
        margin: 0;
        box-shadow: 0 -6px 28px rgba(0,0,0,.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .profile-edit-page--wide .profile-edit-actions > * {
        flex: 1;
        text-align: center;
        font-size: .9rem;
    }
    /* Avatar centered and a little larger on phones */
    .pe-avatar .member-profile-avatar-wrap {
        width: 128px; height: 128px;
    }
    .pe-avatar .member-profile-avatar {
        width: 116px; height: 116px;
    }
}
@media (max-width: 420px) {
    .profile-edit-page--wide { padding: 1rem .65rem 5.5rem; }
    .profile-edit-page--wide .form-fieldset {
        padding: 1rem .9rem 1.1rem;
    }
}

/* ── 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;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 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.25rem; }
@media (max-width: 700px) {
    .pe-duo { grid-template-columns: 1fr; gap: .5rem; }
}


/* The picture block on a phone: smaller, and squarely in the middle.
   Sizes now live in the profile-edit-page--wide @media block above. */
@media (max-width: 700px) {
    .pe-avatar .member-profile-avatar-wrap {
        width: 128px;
        height: 128px;
    }
    .pe-avatar .member-profile-avatar {
        width: 116px;
        height: 116px;
    }
    .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) {
    /* Il testo prima, la barra sotto a larghezza piena: strizzata in una
       colonna da novanta pixel non si legge e non dimostra niente. */
    .dash-nudge { flex-wrap: wrap; gap: .5rem .7rem; }
    .dash-nudge__txt { flex: 1 1 auto; order: 1; font-size: .82rem; }
    .dash-nudge__go { order: 2; }
    .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); }
/* Gestione del proprio podcast dalla dashboard dell'ospite (#729) */
.dash-pod { margin-top: .6rem; padding: .85rem 1rem; border: 1px solid rgba(var(--accent-color-rgb), .28); border-radius: 12px; background: rgba(var(--accent-color-rgb), .06); }
.dash-pod__lead { font-size: .9rem; line-height: 1.55; margin: 0 0 .5rem; }
.dash-pod__t { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); font-weight: 700; margin: .4rem 0 .3rem; }
.dash-pod__none { font-size: .88rem; color: var(--text-secondary); margin: .3rem 0 .2rem; }
.dash-pod__mine { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-color); border: 1px solid rgba(var(--accent-color-rgb), .4); border-radius: 20px; padding: .05rem .45rem; }
.dash-pod__cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.dash-pod__btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .5rem 1.05rem; border-radius: 10px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.dash-pod__btn--primary { background: var(--accent-color); color: var(--text-on-accent); }
.dash-pod__btn--ghost { border: 1px solid var(--border-color); color: var(--text-primary); }
.dash-pod__btn:hover { filter: brightness(1.07); }
.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); }

.pd-danger {
    margin-top: 2.2rem;
    border: 1px solid rgba(229, 72, 77, .3);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    background: rgba(229, 72, 77, .04);
}
.pd-danger h3 { margin: 0 0 .3rem; font-size: 1rem; color: #E5484D; }
.pd-danger p { margin: 0 0 .5rem; font-size: .86rem; color: var(--text-secondary); }
.pd-danger__what { color: var(--text-primary); }
.pd-danger__form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.pd-danger__form input {
    flex: 1 1 260px; min-width: 0;
    padding: .45rem .65rem; border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg); color: var(--text-primary); font-size: .87rem;
}
.pd-danger__btn {
    padding: .45rem 1rem; border-radius: 8px;
    border: 1px solid rgba(229, 72, 77, .45);
    background: transparent; color: #E5484D;
    font-weight: 700; font-size: .84rem; cursor: pointer;
}
.pd-danger__btn:hover { background: rgba(229, 72, 77, .12); }

/* ── Event FAQ and schedule (#406) ──
   Two sections that are lists, not prose, and read better as such. */
/* Breathing room between the section intro and the first question (#508). */
.content-block--faq > .content-body { margin-bottom: 1.1rem; }

/* ── Event agenda timeline + FAQ accordion (#520) ── */
.ev-timeline { list-style: none; margin: 1.3rem 0 0; padding: 0; }
.ev-timeline__row { display: grid; grid-template-columns: 52px 22px minmax(0, 1fr); }
.ev-timeline__time {
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--accent-color);
    font-size: 0.9rem; text-align: right; padding-top: 1.05rem; white-space: nowrap;
}
.ev-timeline__rail { position: relative; display: flex; justify-content: center; }
.ev-timeline__rail::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border-color);
}
.ev-timeline__row:first-child .ev-timeline__rail::before { top: 1rem; }
.ev-timeline__row:last-child .ev-timeline__rail::before { bottom: auto; height: 1.5rem; }
.ev-timeline__dot {
    position: relative; z-index: 1; margin-top: 0.95rem;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--accent-color); box-shadow: 0 0 0 4px rgba(var(--accent-color-rgb), 0.14);
}
.ev-timeline__card {
    margin: 0.5rem 0 0.8rem 0.5rem; padding: 0.8rem 1rem;
    background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 12px;
}
.ev-timeline__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ev-timeline__top h3 {
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-primary);
    border: 0; padding: 0; line-height: 1.35;
}
.ev-timeline__badge {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem; border-radius: 999px;
    background: rgba(var(--accent-color-rgb), 0.16); color: var(--accent-color);
}
.ev-timeline__badge--podcast { background: rgba(240, 180, 41, 0.16); color: #f0b429; }
.ev-timeline__dur {
    margin-left: auto; font-size: 0.78rem; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ev-timeline__detail { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.55; }

.ev-faq { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ev-faq__item {
    border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--secondary-bg); overflow: hidden;
}
.ev-faq__q {
    cursor: pointer; list-style: none; display: flex; align-items: center;
    justify-content: space-between; gap: 1rem;
    padding: 0.95rem 1.1rem; font-weight: 600; font-size: 0.98rem; color: var(--text-primary);
}
.ev-faq__q::-webkit-details-marker { display: none; }
.ev-faq__q:hover { color: var(--accent-color); }
.ev-faq__chev { flex: 0 0 auto; color: var(--text-secondary); transition: transform 0.2s ease; }
.ev-faq__item[open] > .ev-faq__q { color: var(--accent-color); }
.ev-faq__item[open] .ev-faq__chev { transform: rotate(180deg); color: var(--accent-color); }
.ev-faq__a { padding: 0 1.1rem 1rem; font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6; }
.ev-faq__a p { margin: 0; }

@media (max-width: 520px) {
    .ev-timeline__row { grid-template-columns: 46px 20px minmax(0, 1fr); }
    .ev-timeline__time { font-size: 0.82rem; }
}
.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;
    max-width:920px;
    margin:1.25rem auto 0;
    padding:0 1.5rem;
}
.event-mgmt-bar .article-hero-cta{
    font-size:.82rem;padding:.5rem .9rem;
    justify-content:center;
    background:var(--secondary-bg);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    -webkit-backdrop-filter:none;backdrop-filter:none;
}
.event-mgmt-bar .article-hero-cta:hover{
    border-color:var(--accent-color);color:var(--accent-color);background:var(--secondary-bg);
}
.event-mgmt-bar .article-hero-cta--active{
    background:rgba(var(--accent-color-rgb),.14);
    border-color:var(--accent-color);color:var(--accent-color);
}
@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(--secondary-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);}

/* ── Cover image AI-prompt tip (venture edit) ── */
.cover-tip {
    margin-top: .75rem;
    padding: .9rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: rgba(var(--accent-color-rgb), .04);
}
.cover-tip__head { margin: 0 0 .35rem; font-weight: 700; font-size: .9rem; color: var(--text-color); }
.cover-tip__meta { margin: .25rem 0; font-size: .82rem; color: var(--text-secondary); line-height: 1.45; }
.cover-tip__note { opacity: .85; }
.cover-tip__prompt {
    width: 100%;
    margin-top: .4rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    line-height: 1.5;
    resize: vertical;
}
.cover-tip__prompt:focus { outline: 2px solid var(--accent-color); outline-offset: 1px; }

/* ── Products & Services (offerings) editor ── */
.offering-list { display: flex; flex-direction: column; gap: 1.25rem; }
/* Borderless card: a soft tinted panel with an accent left edge — no hard box. */
.offering-item {
    position: relative;
    padding: 1.15rem 1.15rem 1rem 1.35rem;
    border: 0;
    border-radius: 14px;
    background: rgba(var(--primary-bg-rgb), .45);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    box-shadow: inset 3px 0 0 rgba(var(--accent-color-rgb), .55);
}
.offering-item .form-group { margin: 0; }
.offering-item .form-group > label,
.offering-item__file-label {
    display: block;
    font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-secondary); margin-bottom: .3rem;
}
/* header row: index badge + kind / name / price */
.offering-item__head {
    display: grid;
    grid-template-columns: auto 150px 1fr 130px;
    gap: .75rem;
    align-items: end;
}
.offering-item__index {
    align-self: center;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: rgba(var(--accent-color-rgb), .14); color: var(--accent-color);
    font-size: .8rem; font-weight: 700;
}
/* two image uploaders side by side, each with a preview */
.offering-item__media {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    padding-top: .25rem;
}
.offering-media input[type="file"] { max-width: 100%; font-size: .82rem; }
.media-preview--offering img {
    width: 100%; max-width: 220px; aspect-ratio: 4 / 3;
    object-fit: cover; border-radius: 8px; margin-bottom: .5rem;
    border: 1px solid var(--border-color);
}
/* footer: visible toggle + delete */
.offering-item__foot {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.07);
    margin-top: .15rem;
}
.offering-item__active, .offering-item__del {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: var(--text-secondary); cursor: pointer;
}
.offering-item__del { color: #e26a6a; margin-left: auto; }
@media (max-width: 640px) {
    .offering-item__head { grid-template-columns: auto 1fr; }
    .offering-item__head .offering-item__price { grid-column: 2; }
    .offering-item__media { grid-template-columns: 1fr; }
}

/* ── Products & Services (public detail) ── */
.offering-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: .5rem; }
.offering-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
}
.offering-card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--secondary-bg); }
.offering-card__body { padding: .85rem 1rem; display: flex; flex-direction: column; gap: .35rem; }
.offering-card__kind {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--accent-color);
}
.offering-card__kind--service { color: #a94fce; }
.offering-card__name { font-size: 1rem; font-weight: 700; margin: 0; color: var(--text-color); }
.offering-card__price { font-size: .9rem; font-weight: 600; color: var(--text-secondary); }
.offering-card__desc { font-size: .85rem; color: var(--text-secondary); line-height: 1.45; margin: 0; }
.offering-card__link {
    margin-top: auto; font-size: .82rem; font-weight: 600; color: var(--accent-color);
    text-decoration: none; padding-top: .35rem;
}

/* ============================================================
   Venture Vetrina hero — public showcase + product star-deck (#465)
   ============================================================ */
.vetrina-hero{
    position:relative; min-height:100vh; min-height:100svh;
    display:flex; align-items:center;
    padding:calc(var(--nav-h,72px) + 2rem) clamp(1.25rem,5vw,5rem) 4rem;
    overflow:hidden; isolation:isolate;
    /* Field behind the cover = the image's own computed edge colour, so the
       masked edges melt into a same-toned background. Falls back to the dark
       page background when no colour was computed. */
    background-color:var(--vetrina-edge, var(--primary-bg));
}
.vetrina-hero::before{           /* cover image filling the hero, edges progressively dissolving into --vetrina-edge */
    content:""; position:absolute; inset:0; z-index:-2;
    background-image:var(--vetrina-cover,none);
    background-size:cover; background-position:center; background-repeat:no-repeat;
    opacity:.8;
    /* Progressive edge dissolve on all four sides — long, eased gradient bands
       so the cover melts gradually into the venture's edge colour, no hard rim. */
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,.7) 20%, #000 32%, #000 68%, rgba(0,0,0,.7) 80%, rgba(0,0,0,.25) 90%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 9%, rgba(0,0,0,.7) 19%, #000 30%, #000 70%, rgba(0,0,0,.7) 81%, rgba(0,0,0,.25) 91%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,.7) 20%, #000 32%, #000 68%, rgba(0,0,0,.7) 80%, rgba(0,0,0,.25) 90%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 9%, rgba(0,0,0,.7) 19%, #000 30%, #000 70%, rgba(0,0,0,.7) 81%, rgba(0,0,0,.25) 91%, transparent 100%);
    mask-composite:intersect;
}
.vetrina-hero::after{            /* light translucent tint just for text legibility */
    content:""; position:absolute; inset:0; z-index:-1;
    background:
        radial-gradient(120% 90% at 18% 28%, rgba(var(--accent-color-rgb),.08), transparent 60%),
        linear-gradient(180deg, rgba(var(--primary-bg-rgb),.30), rgba(var(--primary-bg-rgb),.48));
}
.vetrina-hero__inner{
    width:100%; max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(2rem,5vw,5rem); align-items:center;
}
.vetrina-hero--solo .vetrina-hero__inner{
    grid-template-columns:minmax(0,720px); justify-content:center; text-align:center;
}
.vetrina-hero--solo .vetrina-hero__meta,
.vetrina-hero--solo .vetrina-hero__logo,
.vetrina-hero--solo .vetrina-hero__oneliner{ margin-inline:auto; justify-content:center; }

.vetrina-hero__logo{
    width:84px; height:84px; border-radius:20px; overflow:hidden;
    background:var(--secondary-bg); border:1px solid rgba(var(--accent-color-rgb),.35);
    display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.vetrina-hero__logo img{ width:100%; height:100%; object-fit:cover; }
.vetrina-hero__logo-fallback{
    font-family:'Montserrat',sans-serif; font-size:2rem; font-weight:700; color:var(--accent-color);
}
.vetrina-hero__name{
    font-family:'Montserrat',sans-serif; font-size:clamp(2.4rem,6vw,4rem);
    line-height:1.02; margin:0 0 1rem; letter-spacing:-.02em;
    text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.vetrina-hero__oneliner{
    font-size:clamp(1.05rem,2.2vw,1.4rem); line-height:1.5;
    color:var(--text-muted,#b8c0cc); max-width:36ch; margin:0 0 1.75rem;
    text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.vetrina-hero__meta{ display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; }
.vetrina-hero__link{ color:var(--accent-color); font-weight:600; text-decoration:none; }
.vetrina-hero__link:hover{ text-decoration:underline; }
.vetrina-hero__chip{
    font-size:.8rem; padding:.3rem .7rem; border-radius:999px;
    border:1px solid rgba(var(--accent-color-rgb),.4); color:var(--accent-color);
}
.vetrina-hero__chip--muted{ border-color:rgba(255,255,255,.2); color:var(--text-muted,#9aa4b2); }
.vetrina-hero__kind{ display:flex; margin-top:.9rem; }
.vetrina-hero--solo .vetrina-hero__kind{ justify-content:center; }
.vetrina-hero__identity--free .vetrina-hero__kind{ justify-content:center; }

/* product/service star deck */
.vetrina-hero__showcase{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.vetrina-deck{ position:relative; width:min(74vw,360px); aspect-ratio:1/1; margin-inline:auto; }
.deck-card{
    position:absolute; top:50%; left:50%; margin:0;
    width:58%; aspect-ratio:3/4;
    border-radius:16px; overflow:hidden;
    border:2px solid var(--accent-color); background:var(--secondary-bg);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    transform:translate(-50%,-50%) translate(var(--ox,0),var(--oy,0)) rotate(var(--rot,0deg));
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    cursor:pointer; text-decoration:none; will-change:transform;
}
.deck-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.deck-card__label{
    position:absolute; left:0; right:0; bottom:0; padding:.6rem .7rem;
    font-size:.82rem; font-weight:600; color:#fff;
    background:linear-gradient(0deg, rgba(0,0,0,.82), transparent);
    opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s;
}
.deck-card:hover, .deck-card:focus-visible{
    transform:translate(-50%,-50%) translate(var(--tx,0),var(--ty,0)) rotate(0deg) scale(1.1);
    box-shadow:0 20px 48px rgba(var(--accent-color-rgb),.35), 0 0 0 3px rgba(var(--accent-color-rgb),.5);
    z-index:50 !important; outline:none;
}
.deck-card:hover .deck-card__label, .deck-card:focus-visible .deck-card__label{ opacity:1; transform:none; }
.vetrina-deck__hint{ font-size:.85rem; color:var(--text-muted,#9aa4b2); text-align:center; margin:0; }

/* scroll cue */
.vetrina-hero__scroll{
    position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
    width:26px; height:42px; border:2px solid rgba(var(--accent-color-rgb),.6);
    border-radius:14px; display:flex; justify-content:center; padding-top:7px;
}
.vetrina-hero__scroll span{
    width:4px; height:8px; border-radius:2px; background:var(--accent-color);
    animation:vetrina-scroll 1.6s ease-in-out infinite;
}
@keyframes vetrina-scroll{
    0%{ opacity:0; transform:translateY(-4px); } 50%{ opacity:1; } 100%{ opacity:0; transform:translateY(10px); }
}

/* offering section: navigated-to highlight */
.offering-card{ scroll-margin-top:90px; }
.offering-card:target{ box-shadow:0 0 0 2px var(--accent-color); }

/* mobile: no hover — deck becomes a tappable snap strip */
@media (max-width:820px){
    .vetrina-hero__inner{ grid-template-columns:1fr; text-align:center; gap:2.5rem; }
    .vetrina-hero__meta{ justify-content:center; }
    .vetrina-hero__logo, .vetrina-hero__oneliner{ margin-inline:auto; }
    .vetrina-deck{
        position:static; width:100%; aspect-ratio:auto;
        display:flex; gap:.9rem; overflow-x:auto; padding:.5rem .25rem 1rem;
        scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    }
    .deck-card{
        position:static; transform:none !important;
        width:44vw; max-width:200px; flex:0 0 auto; aspect-ratio:3/4; scroll-snap-align:center;
    }
    .deck-card__label{ opacity:1; transform:none; }
    .deck-card:hover, .deck-card:focus-visible{ transform:none !important; box-shadow:0 12px 30px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion:reduce){
    .deck-card{ transition:none; }
    .vetrina-hero__scroll span{ animation:none; }
}

/* ============================================================
   Venture Vetrina — full-width products section (#465, count-adaptive)
   ============================================================ */
.vetrina-products{
    padding:clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,5rem);
    background:linear-gradient(180deg, var(--primary-bg), rgba(var(--primary-bg-rgb),.85));
    scroll-margin-top:80px;
}
.vetrina-products__head{
    max-width:1200px; margin:0 auto 2.5rem;
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.vetrina-products__title{
    font-family:'Montserrat',sans-serif; font-size:clamp(1.6rem,3.5vw,2.4rem); margin:0; letter-spacing:-.01em;
}
.vetrina-products__count{ margin:0; color:var(--text-muted,#9aa4b2); font-size:.95rem; }
.vetrina-products__inner{ max-width:1200px; margin:0 auto; }

/* multi-item layouts */
.vetrina-products--duo  .vetrina-products__inner{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.vetrina-products--trio .vetrina-products__inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.vetrina-products--grid .vetrina-products__inner{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.75rem; }

/* base card (duo / trio / grid) */
.product-panel{
    display:flex; flex-direction:column;
    background:var(--secondary-bg); border:1px solid rgba(var(--accent-color-rgb),.22);
    border-radius:18px; overflow:hidden; scroll-margin-top:90px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-panel:hover{
    transform:translateY(-4px);
    border-color:rgba(var(--accent-color-rgb),.5);
    box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.product-panel:target{ border-color:var(--accent-color); box-shadow:0 0 0 2px rgba(var(--accent-color-rgb),.4); }
.product-panel__media{ aspect-ratio:4/3; background:#0d1420; overflow:hidden; }
.product-panel__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-panel__media--empty{ display:flex; align-items:center; justify-content:center; }
.product-panel__media--empty span{ font-family:'Montserrat',sans-serif; font-size:2.4rem; font-weight:700; color:rgba(var(--accent-color-rgb),.5); }
.product-panel__body{ padding:1.4rem; display:flex; flex-direction:column; gap:.55rem; }
.product-panel__kind{
    align-self:flex-start; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    padding:.22rem .6rem; border-radius:999px;
}
.product-panel__kind--product{ background:rgba(var(--accent-color-rgb),.14); color:var(--accent-color); }
.product-panel__kind--service{ background:rgba(139,148,255,.16); color:#8b94ff; }
.product-panel__name{ font-family:'Montserrat',sans-serif; font-size:1.25rem; margin:0; }
.product-panel__price{ color:var(--accent-color); font-weight:600; }
.product-panel__desc{ color:var(--text-muted,#b8c0cc); line-height:1.55; margin:0; }
.product-panel__cta{
    align-self:flex-start; margin-top:.4rem; color:var(--accent-color); font-weight:600; text-decoration:none;
}
.product-panel__cta:hover{ text-decoration:underline; }

/* single item → spotlight (media | details, tall) */
.vetrina-products--solo .product-panel{
    display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch; border-radius:24px;
}
.vetrina-products--solo .product-panel:hover{ transform:none; }
.vetrina-products--solo .product-panel__media{ aspect-ratio:auto; min-height:min(58vh,520px); }
.vetrina-products--solo .product-panel__body{ padding:clamp(1.5rem,4vw,3rem); justify-content:center; gap:.8rem; }
.vetrina-products--solo .product-panel__name{ font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.05; }
.vetrina-products--solo .product-panel__price{ font-size:1.2rem; }
.vetrina-products--solo .product-panel__desc{ font-size:1.05rem; }

@media (max-width:820px){
    .vetrina-products--duo .vetrina-products__inner,
    .vetrina-products--trio .vetrina-products__inner{ grid-template-columns:1fr; }
    .vetrina-products--solo .product-panel{ grid-template-columns:1fr; }
    .vetrina-products--solo .product-panel__media{ min-height:46vh; }
}

/* ============================================================
   Vetrina hero — free-form (founder-composed) mode (#465)
   ============================================================ */
/* Free-form is FULL-BLEED: the cover fills the whole hero (fading at the sides,
   like the default hero) and the logo + title block are absolutely placed at
   the founder's percentages of that same full box. The editor stages use an
   aspect ratio close to the hero (16/9 desktop, 9/16 mobile) to approximate it. */
:root{ --hero-aspect:16/9; --hero-aspect-m:9/16; }
.vetrina-hero--custom{ padding:0; align-items:stretch; min-height:100svh; }
.vetrina-hero__inner--free{
    position:relative; width:100%; align-self:stretch; display:block; min-height:100svh;
}
.vetrina-hero__logo--free,
.vetrina-hero__identity--free{
    position:absolute; transform:translate(-50%,-50%); margin:0; z-index:2;
    left:var(--xd); top:var(--yd);          /* desktop composition */
}
.vetrina-hero__logo--free{ margin:0; }
.vetrina-hero__identity--free{ width:min(88vw,520px); text-align:center; }
.vetrina-hero__identity--free .vetrina-hero__meta{ justify-content:center; }

@media (max-width:820px){
    /* Mobile uses its own (--xm/--ym) positions of the same full-bleed box. */
    .vetrina-hero__logo--free,
    .vetrina-hero__identity--free{
        left:var(--xm); top:var(--ym);
    }
    .vetrina-hero__identity--free{ width:min(84vw,420px); }
}







.dash-org__acts{
    display:flex; gap:.9rem; flex-wrap:wrap; margin:.5rem 0 0;
    position:relative; z-index:2;      /* sopra la copertura cliccabile */
    font-size:.82rem;
}
.dash-org__acts a{ color:var(--accent-color); text-decoration:none; font-weight:600; }
.dash-org__acts a:hover{ text-decoration:underline; }



/* «Devo intervistare»: si sceglie la persona e si legge (#660).
   In cima perche' e' l'unica cosa che si fa in piedi con una telecamera
   davanti; il resto della pagina si fa seduti, prima. */
.pc-live{
    border:1px solid rgba(var(--accent-color-rgb),.35); border-radius:14px;
    padding:1rem; margin-bottom:1.4rem;
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),.08), transparent 60%);
}
.pc-live__t{
    margin:0 0 .7rem; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-muted,#9aa4b2);
}
.pc-live__rows{ display:flex; flex-direction:column; gap:.5rem; }
.pc-live__row{
    display:flex; align-items:center; gap:.8rem; width:100%;
    min-height:58px; padding:.7rem .9rem; border-radius:12px; cursor:pointer;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03);
    color:inherit; font:inherit; text-align:left;
}
.pc-live__row:hover{ border-color:var(--accent-color); }
.pc-live__row:focus-visible{ outline:2px solid var(--accent-color); outline-offset:2px; }
.pc-live__who{ flex:1 1 auto; min-width:0; }
.pc-live__who b{ display:block; font-family:'Montserrat',sans-serif; font-size:.98rem; overflow-wrap:anywhere; }
.pc-live__who i{ display:block; font-style:normal; font-size:.82rem; color:var(--text-muted,#9aa4b2); }
.pc-live__n{ flex:none; font-size:.8rem; color:var(--text-muted,#9aa4b2); white-space:nowrap; }
.pc-live__time{ color:var(--accent-color); font-variant-numeric:tabular-nums; }
.pc-live__ready{ flex:none; font-size:.74rem; font-weight:700; white-space:nowrap;
    padding:.14rem .55rem; border-radius:999px;
    background:rgba(var(--accent-color-rgb),.14); color:var(--accent-color); }
.pc-live__ready--no{ background:rgba(245,166,35,.15); color:#F5A623; }
.pc-live__go{ flex:none; color:var(--accent-color); display:inline-flex; }
.pc-live__hint{ margin:.75rem 0 0; font-size:.8rem; color:var(--text-muted,#9aa4b2); line-height:1.5; }
@media (max-width:520px){
    .pc-live__ready{ font-size:.68rem; padding:.1rem .4rem; }
}

.etb--quiet{ margin-top:1.6rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.08); }

/* I pulsanti degli strumenti quando sono schede (#667): stessa forma di sempre,
   ma il clic cambia il contenuto invece di aprire un'altra pagina. */
.etb__b[role="tab"]{ cursor:pointer; }
.etb__b[aria-selected="true"]{
    border-color:var(--accent-color); color:#0a0f18; background:var(--accent-color);
}
.etb__b[aria-selected="true"] svg{ opacity:1; }
.etb__n{
    font-variant-numeric:tabular-nums; font-weight:700; font-size:.78rem;
    padding:.05rem .4rem; border-radius:20px;
    background:rgba(255,255,255,.1); color:inherit;
}
.etb__b[aria-selected="true"] .etb__n{ background:rgba(10,15,24,.18); }

/* Il collegamento alla pagina intera, dentro il pannello (#666): si guarda
   qui, e si va di la' solo quando c'e' da operare. */
.etp__open{ margin:0 0 .8rem; font-size:.86rem; }
.etp__open a{ color:var(--accent-color); text-decoration:none; font-weight:600; }
.etp__open a:hover{ text-decoration:underline; }

/* ============================================================
   Briciole e strumenti di un evento (#662)
   ============================================================ */
.etn{
    display:flex; align-items:center; gap:.45rem; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 0 .8rem; padding-bottom:.2rem;
    font-size:.85rem; color:var(--text-muted,#9aa4b2);
}
.etn::-webkit-scrollbar{ display:none; }
.etn a{ color:var(--text-muted,#9aa4b2); text-decoration:none; white-space:nowrap; }
.etn a:hover{ color:var(--accent-color); }
.etn__here{ white-space:nowrap; }
.etn strong{ color:var(--text-primary,#e8eef6); font-weight:600; white-space:nowrap; }

/* I pulsanti scorrono di lato in una riga sola: e' lo strumento di chi sta in
   piedi con una scatola in mano, e la pagina non deve muoversi con loro. */
.etb{
    display:flex; gap:.5rem; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 0 1.4rem; padding-bottom:.35rem;
}
.etb::-webkit-scrollbar{ display:none; }
.etb__b{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:.45rem;
    min-height:44px; padding:.5rem .9rem; border-radius:11px;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.03);
    color:inherit; text-decoration:none; white-space:nowrap;
    font-family:'Montserrat',sans-serif; font-weight:600; font-size:.86rem;
    transition:border-color .16s ease, background .16s ease, color .16s ease;
}
/* Solo sui tab NON selezionati: sul selezionato lo sfondo e' gia' accent, e il
   testo accent sopra sparirebbe (accent su accent). */
.etb__b:hover:not([aria-selected="true"]):not(.is-on){ border-color:var(--accent-color); color:var(--accent-color); }
.etb__b svg{ flex:none; opacity:.85; }
.etb__b.is-on{
    border-color:var(--accent-color); color:#0a0f18;
    background:var(--accent-color); pointer-events:none;
}
.etb__b.is-on svg{ opacity:1; }
.etb__b--quiet{ opacity:.72; }
.etb__b--quiet:hover{ opacity:1; }
@media (max-width:520px){
    .etb__b{ padding:.5rem .7rem; font-size:.8rem; }
}

/* «Già socio» nella coda delle adesioni (#661) */
.int-already{
    display:inline-block; margin-top:.25rem; padding:.1rem .5rem; border-radius:20px;
    font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
    color:#4fbf9f; border:1px solid rgba(79,191,159,.45);
}
.int-warn{
    margin:.6rem 0; padding:.55rem .9rem; border-radius:10px; font-size:.88rem;
    background:rgba(224,162,79,.1); border:1px solid rgba(224,162,79,.4);
}

/* Briciole di pane della pagina Podcast (#660). Scorrono di lato solo loro,
   mai la pagina: su uno schermo stretto un percorso lungo non deve trascinare
   con se' tutto il resto. */
.pc-crumbs{
    display:flex; align-items:center; gap:.45rem; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:0 0 .9rem; padding-bottom:.2rem;
    font-size:.85rem; color:var(--text-muted,#9aa4b2);
    scrollbar-width:none;
}
.pc-crumbs::-webkit-scrollbar{ display:none; }
.pc-crumbs a{ color:var(--text-muted,#9aa4b2); text-decoration:none; white-space:nowrap; }
.pc-crumbs a:hover{ color:var(--accent-color); }
.pc-crumbs strong{ color:var(--text-primary,#e8eef6); font-weight:600; white-space:nowrap; }

.pc-exh{ margin:.5rem 0 0; font-size:.85rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:baseline; }
.pc-exh span{ color:var(--text-muted,#9aa4b2); }
.pc-exh a{ color:var(--accent-color); text-decoration:none; font-weight:600; }
.pc-exh a:hover{ text-decoration:underline; }
.pc-exh__pub{ font-weight:400; font-size:.8rem; }

/* Le scelte dell'ospite nella pagina podcast (#646) */
.pc-own{ margin:.9rem 0; padding:.85rem 1rem; border-radius:12px;
    border:1px solid rgba(var(--accent-color-rgb),.25); background:rgba(var(--accent-color-rgb),.05); }
.pc-own__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.7rem; flex-wrap:wrap; }
.pc-own__t{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:.9rem; }
.pc-own__link{ font-size:.8rem; color:var(--accent-color); text-decoration:none; }
.pc-own__link:hover{ text-decoration:underline; }
.pc-own__list{ list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.pc-own__item{ font-size:.9rem; line-height:1.45; }
.pc-own__item--mine .pc-own__q{ border-left:2px solid var(--accent-color); padding-left:.55rem; display:inline-block; }
.pc-own__rev{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.pc-own__note{ flex:1 1 220px; min-width:0; min-height:38px; padding:.35rem .6rem;
    border-radius:8px; border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.03); color:inherit; font:inherit; font-size:.85rem; }
.pc-own__tag{ font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
    border-radius:20px; padding:.1rem .45rem; margin-left:.4rem; white-space:nowrap; }
.pc-own__tag--ok{ color:#4fbf9f; border:1px solid rgba(79,191,159,.45); }
.pc-own__tag--rw{ color:#e0714f; border:1px solid rgba(224,113,79,.5); }
.pc-own__none{ margin:.5rem 0 0; font-size:.85rem; color:var(--text-muted,#9aa4b2); }



.hero-err{
    margin:.55rem 0 0; padding:.5rem .8rem; border-radius:10px;
    background:rgba(224,113,79,.12); border:1px solid rgba(224,113,79,.45);
    font-size:.85rem; line-height:1.45; color:#ffb8a0;
}

/* Logo e copertina cliccabili nella vetrina (#652) */
.brand-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.hero-swap{ display:block; position:relative; cursor:pointer; height:100%; }
.hero-swap:focus-visible{ outline:2px solid var(--accent-color); outline-offset:3px; }

/* ── La copertina: un bottone semitrasparente, in alto a destra ──────────
   Sta sopra l'immagine e non le toglie spazio. Su schermo largo si posa
   nell'angolo, dove non copre mai il soggetto di una foto — che sta quasi
   sempre al centro o a sinistra. */
.hero-swap__btn{
    position:absolute; top:1rem; right:1rem; z-index:3;
    display:inline-flex; align-items:center; gap:.45rem;
    min-height:38px; padding:.45rem .85rem; border-radius:22px;
    background:rgba(10,15,24,.45); border:1px solid rgba(255,255,255,.28);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:#fff; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.8rem;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.hero-swap--cover:hover .hero-swap__btn{
    background:rgba(10,15,24,.72); border-color:var(--accent-color);
}
.hero-swap--cover:active .hero-swap__btn{ transform:scale(.96); }

/* Sul telefono l'angolo in alto e' dove passa il pollice quando si scorre, e
   l'angolo in alto a destra e' il punto piu' lontano dalla mano. Il bottone
   scende in basso a destra, sopra il bordo della copertina, dove il pollice
   arriva senza cambiare presa. */
@media (max-width:719px){
    .hero-swap__btn{
        top:auto; bottom:.65rem; right:.65rem;
        min-height:36px; padding:.4rem .7rem; font-size:.74rem;
    }
    .hero-swap__btn-t{ display:none; }
    .hero-swap__btn{ padding:.5rem; border-radius:50%; }
}

/* ── Il logo: quasi trasparente, si accende al tocco ─────────────────────
   Il logo e' piccolo e un bottone sopra lo coprirebbe. Qui il comando e' un
   velo che di norma non si vede quasi: al passaggio del mouse si scurisce e
   compare l'icona, al clic pulsa una volta. */
.hero-swap--logo{ border-radius:inherit; overflow:hidden; }
.hero-swap__veil{
    position:absolute; inset:0; z-index:2; border-radius:inherit;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,15,24,.06); color:transparent;
    transition:background .22s ease, color .22s ease;
}
.hero-swap--logo:hover .hero-swap__veil,
.hero-swap--logo:focus-visible .hero-swap__veil{
    background:rgba(10,15,24,.55); color:#fff;
}
.hero-swap--logo:hover .hero-swap__veil svg{ animation:hero-lift .45s ease; }
.hero-swap--logo:active .hero-swap__veil{ background:rgba(10,15,24,.72); }
.hero-swap--logo:active .hero-swap__veil svg{ animation:hero-tap .28s ease; }

@keyframes hero-lift{
    0%{ transform:translateY(4px); opacity:0; }
    100%{ transform:translateY(0); opacity:1; }
}
@keyframes hero-tap{
    0%{ transform:scale(1); }
    45%{ transform:scale(.82); }
    100%{ transform:scale(1); }
}
/* Il tocco non lascia traccia come il passaggio del mouse: sul telefono il
   velo resta appena percettibile, quanto basta a far capire che si tocca. */
@media (hover:none){
    .hero-swap__veil{ background:rgba(10,15,24,.22); color:rgba(255,255,255,.75); }
}
@media (prefers-reduced-motion:reduce){
    .hero-swap__veil svg{ animation:none !important; }
    .hero-swap--cover:active .hero-swap__btn{ transform:none; }
}

/* Quando l'immagine e' stata cambiata ma non ancora salvata. */
.hero-swap.is-changed::after{
    content:""; position:absolute; inset:0; z-index:4;
    border:2px solid var(--accent-color); border-radius:inherit; pointer-events:none;
}

/* ============================================================
   Elenco dei partner nella dashboard (#651)
   Schede al posto della tabella. Telefono per primo.
   ============================================================ */
.pgrid{ display:grid; grid-template-columns:1fr; gap:.85rem; margin-top:1.2rem; }
.pcard{
    border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:.95rem 1rem;
    background:rgba(255,255,255,.02);
}
.pcard--draft{ border-color:rgba(224,162,79,.32); background:rgba(224,162,79,.045); }
.pcard__top{ display:flex; align-items:center; gap:.75rem; }
.pcard__face{
    flex:0 0 auto; width:44px; height:44px; border-radius:10px; overflow:hidden;
    background:#0a0f18; border:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
    font-family:'Montserrat',sans-serif; font-weight:700; color:var(--accent-color);
}
.pcard__face img{ width:100%; height:100%; object-fit:contain; padding:.25rem; }
.pcard__id{ min-width:0; }
.pcard__name{
    font-family:'Montserrat',sans-serif; font-weight:600; font-size:1rem;
    text-decoration:none; color:inherit; overflow-wrap:anywhere;
}
.pcard__name:hover{ color:var(--accent-color); }
.pcard__meta{ margin:.15rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.pcard__type{ font-size:.78rem; color:var(--text-muted,#9aa4b2); }
.pcard__st{ font-size:.64rem; letter-spacing:.05em; text-transform:uppercase;
    border-radius:20px; padding:.1rem .45rem; white-space:nowrap; }
.pcard__st--live{ color:#4fbf9f; border:1px solid rgba(79,191,159,.45); }
.pcard__st--draft{ color:#e0a24f; border:1px solid rgba(224,162,79,.45); }

.pcard__next{ margin:.7rem 0 0; font-size:.86rem; line-height:1.45; }
.pcard__next strong{ display:block; font-weight:600; }
.pcard__next span{ color:var(--text-muted,#9aa4b2); overflow-wrap:anywhere; }
.pcard__next--done strong{ color:#4fbf9f; }

.pcard__reach{ margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:.84rem; }
.pcard__reach a{ color:var(--accent-color); text-decoration:none; overflow-wrap:anywhere;
    min-height:32px; display:inline-flex; align-items:center; }
.pcard__reach a:hover{ text-decoration:underline; }
.pcard__none{ color:var(--text-muted,#9aa4b2); }

.pcard__facts{ margin:.55rem 0 0; display:flex; flex-wrap:wrap; gap:.15rem .8rem;
    font-size:.78rem; color:var(--text-muted,#9aa4b2); }

.pcard__acts{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.85rem; }
.pcard__act{
    flex:1 1 auto; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
    padding:.45rem .9rem; border-radius:10px; text-decoration:none; font-size:.85rem;
    font-family:'Montserrat',sans-serif; font-weight:600;
    border:1px solid rgba(255,255,255,.16); color:inherit;
}
.pcard__act:hover{ border-color:var(--accent-color); color:var(--accent-color); }
.pcard__act--main{ background:var(--accent-color); border-color:var(--accent-color); color:#0a0f18; }
.pcard__act--main:hover{ filter:brightness(1.08); color:#0a0f18; }

/* La densita' serve a chi ne guarda venti insieme, e ha lo schermo per farlo. */
@media (min-width:760px){
    .pgrid{ grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:1rem; }
    .pcard__act{ flex:0 0 auto; }
}

/* ============================================================
   La propria attività in cima alla dashboard (#650)
   Scritto per il telefono per primo: il desktop e' la variante.
   ============================================================ */
.dob{
    border:1px solid rgba(var(--accent-color-rgb),.28); border-radius:16px;
    padding:1rem; margin-bottom:1rem;
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),.07), transparent 62%);
}
.dob__top{ display:flex; align-items:center; gap:.85rem; }
.dob__face{
    flex:0 0 auto; width:56px; height:56px; border-radius:12px; overflow:hidden;
    background:#0a0f18; border:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
}
.dob__face img{ width:100%; height:100%; object-fit:contain; padding:.35rem; }
.dob__face span{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.5rem; color:var(--accent-color); }
.dob__id{ min-width:0; }
.dob__name{
    font-family:'Montserrat',sans-serif; font-size:1.15rem; margin:0;
    overflow-wrap:anywhere;
}
.dob__meta{ margin:.2rem 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:.82rem; }
.dob__state{
    font-size:.66rem; letter-spacing:.05em; text-transform:uppercase;
    border-radius:20px; padding:.12rem .5rem; white-space:nowrap;
}
.dob__state--live{ color:#4fbf9f; border:1px solid rgba(79,191,159,.45); }
.dob__state--draft{ color:#e0a24f; border:1px solid rgba(224,162,79,.45); }
.dob__one{ color:var(--text-muted,#9aa4b2); min-width:0; overflow-wrap:anywhere; }

.dob__next{
    margin-top:.8rem; padding:.6rem .75rem; border-radius:10px;
    background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:.15rem;
}
.dob__next-t{ font-weight:600; font-size:.9rem; }
.dob__next-m{ font-size:.82rem; color:var(--text-muted,#9aa4b2); overflow-wrap:anywhere; }

/* I bottoni: sul telefono a piena larghezza, perche' il pollice non e' un
   puntatore. 44px e' la misura sotto la quale si sbaglia bersaglio. */
.dob__acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.dob__act{
    flex:1 1 auto; min-width:0; min-height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    padding:.55rem .9rem; border-radius:10px; text-decoration:none;
    font-family:'Montserrat',sans-serif; font-weight:600; font-size:.88rem;
    border:1px solid rgba(255,255,255,.16); color:var(--text-primary,#e8eef6);
}
.dob__act:hover{ border-color:var(--accent-color); color:var(--accent-color); }
.dob__act--main{
    background:var(--accent-color); border-color:var(--accent-color); color:#0a0f18;
}
.dob__act--main:hover{ filter:brightness(1.08); color:#0a0f18; }

.dob__card{ margin-top:1.1rem; padding-top:.95rem; border-top:1px dashed rgba(255,255,255,.14); }
.dob__card-t{
    margin:0 0 .6rem; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-muted,#9aa4b2);
}
/* La card sta dentro un blocco stretto: le si da' una larghezza massima cosi'
   su desktop non si stira fino a sembrare un'altra cosa da quella che e'. */
.dob__card .venture-card{ max-width:340px; }
.dob__card-note{ margin:.6rem 0 0; font-size:.8rem; color:var(--text-muted,#9aa4b2); }

.dob__help{ margin:.9rem 0 0; font-size:.84rem; }
.dob__help a{ color:var(--text-muted,#9aa4b2); text-decoration:none; }
.dob__help a:hover{ color:var(--accent-color); text-decoration:underline; }

.dob__todo{ margin-top:.85rem; display:flex; flex-direction:column; gap:.4rem; }
.dob__todo-row{
    display:flex; align-items:center; justify-content:space-between; gap:.7rem;
    min-height:44px; padding:.55rem .8rem; border-radius:10px; text-decoration:none;
    border:1px solid rgba(var(--accent-color-rgb),.35);
    background:rgba(var(--accent-color-rgb),.08); color:inherit;
}
.dob__todo-row:hover{ border-color:var(--accent-color); }
.dob__todo-row.is-done{ border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03); }
.dob__todo-t{ font-size:.88rem; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.dob__todo-a{ font-size:.8rem; color:var(--accent-color); white-space:nowrap; }
.dob__todo-row.is-done .dob__todo-a{ color:var(--text-muted,#9aa4b2); }

.dob__gig{
    margin-top:.9rem; padding-top:.85rem;
    border-top:1px dashed rgba(255,255,255,.14);
}
.dob__gig-t{ margin:0; font-family:'Montserrat',sans-serif; font-weight:600; font-size:.95rem; }
.dob__gig-when{ margin:.15rem 0 .7rem; font-size:.84rem; color:var(--text-muted,#9aa4b2); }
.dob__gig-acts{ display:flex; flex-wrap:wrap; gap:.5rem; }

@media (min-width:720px){
    .dob{ padding:1.25rem 1.4rem; }
    .dob__face{ width:68px; height:68px; }
    .dob__name{ font-size:1.35rem; }
    .dob__acts, .dob__gig-acts{ gap:.6rem; }
    .dob__act{ flex:0 0 auto; }
}

/* ============================================================
   Console per livelli (#641)
   ============================================================ */
.cg{
    border:1px solid rgba(255,255,255,.09); border-radius:14px;
    margin-bottom:.85rem; background:rgba(255,255,255,.015);
}
.cg--now{
    border-color:rgba(var(--accent-color-rgb),.42);
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),.06), transparent 55%);
}
.cg__sum{
    display:flex; align-items:center; gap:.7rem; cursor:pointer;
    padding:.95rem 1.15rem; list-style:none; user-select:none;
    border-radius:14px;
}
.cg__sum::-webkit-details-marker{ display:none; }
.cg__sum::after{
    content:"›"; margin-left:auto; font-size:1.35rem; line-height:1;
    color:var(--text-muted,#9aa4b2); transition:transform .16s ease;
}
.cg[open] > .cg__sum::after{ transform:rotate(90deg); }
.cg__sum:hover{ background:rgba(255,255,255,.03); }
.cg__n{
    flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem;
    border:1px solid rgba(255,255,255,.18); color:var(--text-muted,#9aa4b2);
}
.cg--now .cg__n{
    border-color:var(--accent-color); color:var(--accent-color);
    background:rgba(var(--accent-color-rgb),.12);
}
.cg__t{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:1rem; }
.cg__todo{
    font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent-color); border:1px solid rgba(var(--accent-color-rgb),.45);
    border-radius:20px; padding:.12rem .5rem;
}
.cg__hint{
    margin:0 1.15rem .4rem; font-size:.85rem; line-height:1.5;
    color:var(--text-muted,#9aa4b2); max-width:64ch;
}
/* I fieldset dentro un gruppo non ripetono la cornice: la cornice e' il gruppo. */
.cg .form-fieldset{ border:0; padding:0 1.15rem 1.1rem; margin:0; }
.cg .form-fieldset + .form-fieldset{ padding-top:.6rem; border-top:1px solid rgba(255,255,255,.06); }
.cg .form-fieldset > legend{
    font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-muted,#9aa4b2); padding:0; margin-bottom:.5rem;
}
@media (max-width:640px){
    .cg__sum{ padding:.85rem .9rem; gap:.55rem; }
    .cg .form-fieldset{ padding-inline:.9rem; }
    .cg__hint{ margin-inline:.9rem; }
}

/* Phylo accanto all'elevator pitch (#634). Il riquadro e' visibilmente una
   proposta e non un campo: sfondo diverso, bordo tratteggiato, due bottoni. */
.ph{ margin-top:.55rem; }
.ph__ask{
    border:1px solid rgba(var(--accent-color-rgb),.5); border-radius:8px;
    background:rgba(var(--accent-color-rgb),.09); color:var(--accent-color);
    font-family:'Montserrat',sans-serif; font-size:.82rem; font-weight:600;
    padding:.42rem .8rem; cursor:pointer;
}
.ph__ask:hover:not(:disabled){ background:rgba(var(--accent-color-rgb),.18); }
.ph__ask:disabled{ opacity:.55; cursor:progress; }
.ph__what{ font-size:.8rem; color:var(--text-muted,#9aa4b2); margin-left:.6rem; }
.ph__locked{ font-size:.82rem; color:var(--text-muted,#9aa4b2); margin:.4rem 0 0; }

.ph__box{
    margin-top:.75rem; padding:.9rem 1rem; border-radius:12px;
    border:1px dashed rgba(var(--accent-color-rgb),.45);
    background:rgba(var(--accent-color-rgb),.06);
}
.ph__head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.ph__who{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:.85rem; color:var(--accent-color); }
.ph__tag{
    font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-muted,#9aa4b2); border:1px solid rgba(255,255,255,.16);
    border-radius:20px; padding:.1rem .45rem;
}
.ph__text{ margin:0 0 .8rem; font-size:.95rem; line-height:1.6; }
.ph__state{ margin:0 0 .6rem; font-size:.88rem; color:var(--text-muted,#9aa4b2); }
.ph--working .ph__state::after{
    content:""; display:inline-block; width:6px; height:6px; margin-left:.45rem;
    border-radius:50%; background:var(--accent-color); animation:ph-pulse 1.1s infinite;
}
@keyframes ph-pulse{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .ph--working .ph__state::after{ animation:none } }
.ph__acts{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.ph__link{
    border:0; background:none; padding:0; cursor:pointer;
    color:var(--text-muted,#9aa4b2); font-size:.84rem; text-decoration:underline;
}
.ph__link:hover{ color:var(--accent-color); }
.ph__check{
    margin:0 0 .7rem; padding:.5rem .65rem; border-radius:8px;
    background:rgba(255,180,90,.1); border:1px solid rgba(255,180,90,.32);
    font-size:.82rem; line-height:1.5;
}
.ph__check strong{ color:#ffb45a; }
.ph__check span{ font-family:monospace; }
.ph__check em{ font-style:normal; color:var(--text-muted,#9aa4b2); }
.ph__note{ margin:.7rem 0 0; font-size:.78rem; color:var(--text-muted,#9aa4b2); max-width:62ch; }

/* Sottogruppi del menu della dashboard (#633). Il rientro e la riga verticale
   dicono l'appartenenza senza bisogno di cornici. */
.hub-nav__head-item{
    display:flex; align-items:center; gap:.5rem; width:100%;
    padding:.5rem .75rem; margin:0; border:0; background:transparent;
    color:inherit; font:inherit; text-align:left; cursor:pointer;
    border-radius:8px;
}
.hub-nav__head-item:hover{ background:rgba(255,255,255,.05); }
.hub-nav__head-item:focus-visible{ outline:2px solid var(--accent-color); outline-offset:-2px; }
.hub-nav__caret{ flex:0 0 auto; transition:transform .16s ease; opacity:.7; }
.hub-nav__head-item.is-open .hub-nav__caret{ transform:rotate(90deg); }
.hub-nav__head-label{ flex:1 1 auto; font-weight:600; }
.hub-nav__badge--rollup{ opacity:.9; }
.hub-nav__head-item.is-open .hub-nav__badge--rollup{ display:none; }

.hub-nav__sub{
    margin:.1rem 0 .35rem 1.05rem; padding-left:.7rem;
    border-left:1px solid rgba(255,255,255,.1);
}
.hub-nav__item--sub{ padding-top:.38rem; padding-bottom:.38rem; font-size:.9rem; }
.hub-nav__item--leaf{ opacity:.78; font-size:.86rem; }
.hub-nav__item--leaf:hover{ opacity:1; }

/* Informazione accanto a un campo (#632). Piccola: se fosse vistosa
   competerebbe con l'etichetta, e l'etichetta viene prima. */
.fi{ position:relative; display:inline-flex; vertical-align:middle; margin-left:.4rem; }
.fi__btn{
    width:16px; height:16px; padding:0; line-height:15px;
    border-radius:50%; border:1px solid rgba(var(--accent-color-rgb),.55);
    background:transparent; color:var(--accent-color);
    font-family:'Montserrat',sans-serif; font-size:.65rem; font-weight:700;
    cursor:pointer;
}
.fi__btn:hover{ background:rgba(var(--accent-color-rgb),.16); }
.fi__btn:focus-visible{ outline:2px solid var(--accent-color); outline-offset:2px; }
.fi__pop{
    position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
    z-index:60; width:max-content; max-width:min(300px,74vw);
    padding:.7rem .8rem; border-radius:10px;
    border:1px solid rgba(var(--accent-color-rgb),.3);
    background:#111823; box-shadow:0 10px 30px rgba(0,0,0,.5);
    font-size:.8rem; line-height:1.5; font-weight:400;
    color:var(--text-muted,#c3ccd8); text-transform:none; letter-spacing:normal;
    white-space:normal; text-align:left;
}
.fi__pop::before{
    content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-bottom-color:rgba(var(--accent-color-rgb),.3);
}
.fi__t{ display:block; color:var(--accent-color); margin-bottom:.25rem; font-size:.82rem; }

/* Cosa ottiene un partner (#631) — sobrio: quattro voci, nessun badge. */
.pb-what{ padding-top:1rem; }
.pb-what__title{
    font-family:'Montserrat',sans-serif; font-size:1.35rem; margin:0 0 1.4rem;
    text-align:center;
}
.pb-what__grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1.4rem; max-width:1000px; margin:0 auto;
}
.pb-what__item{
    border:1px solid rgba(var(--accent-color-rgb),.2); border-radius:14px;
    padding:1.15rem 1.25rem;
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),.05), transparent 70%);
}
.pb-what__item h4{
    font-family:'Montserrat',sans-serif; font-size:.98rem; margin:0 0 .45rem;
    color:var(--accent-color);
}
.pb-what__item p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--text-muted,#9aa4b2); }

/* ============================================================
   Pannello traffico nella console (#630)
   ============================================================ */
.tp{
    border:1px solid rgba(var(--accent-color-rgb),.22);
    border-radius:16px; padding:1.35rem 1.5rem 1.5rem;
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),.055), transparent 60%);
    margin-bottom:1.75rem;
}
.tp__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:0 0 .2rem; }
.tp__open{
    display:flex; align-items:baseline; gap:.7rem; cursor:pointer;
    list-style:none; user-select:none; flex-wrap:wrap;
}
.tp__open::-webkit-details-marker{ display:none; }
.tp__open::after{ content:"›"; margin-left:auto; font-size:1.3rem; color:var(--text-muted,#9aa4b2); transition:transform .16s ease; }
.tp[open] > .tp__open::after{ transform:rotate(90deg); }
.tp__peek{ font-size:.82rem; color:var(--text-muted,#9aa4b2); }
.tp__title{ font-family:'Montserrat',sans-serif; font-size:1.05rem; margin:0; }
.tp__sub{ margin:.15rem 0 0; font-size:.82rem; color:var(--text-muted,#9aa4b2); }
.tp__more{
    font-size:.84rem; font-weight:600; color:var(--accent-color); text-decoration:none;
    white-space:nowrap; padding-top:.15rem;
}
.tp__more:hover{ text-decoration:underline; }

.tp__figures{ display:flex; gap:2.25rem; flex-wrap:wrap; margin:1.15rem 0 .35rem; }
.tp__fig{ display:flex; flex-direction:column; gap:.1rem; }
.tp__n{
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.7rem; line-height:1;
    font-variant-numeric:tabular-nums;
}
.tp__l{ font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted,#9aa4b2); }

.tp__charts{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:1.5rem; margin-top:1.1rem; }
.tp__chart{ margin:0; min-width:0; }
/* L'altezza la deve dare il contenitore: Chart.js senza aspect-ratio prende
   quella del genitore, e un genitore senza altezza cresce all'infinito. */
.tp__cv{ position:relative; height:190px; }
.tp__cv canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.tp__chart figcaption{
    font-size:.76rem; letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-muted,#9aa4b2); margin-bottom:.5rem;
}
.tp__chart canvas{ max-width:100%; }

.tp__months{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.07); }
.tp__months-t{ font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted,#9aa4b2); }
.tp__months-row{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:.6rem; }
.tp__month{ display:flex; flex-direction:column; }
.tp__month-n{ font-weight:700; font-variant-numeric:tabular-nums; }
.tp__month-l{ font-size:.74rem; color:var(--text-muted,#9aa4b2); }

.tp__empty{ margin:1rem 0 0; font-size:.9rem; color:var(--text-muted,#9aa4b2); max-width:52ch; }

@media (max-width:820px){
    .tp{ padding:1.1rem 1rem 1.25rem; }
    .tp__charts{ grid-template-columns:1fr; gap:1.25rem; }
    .tp__cv{ height:160px; }
    .tp__figures{ gap:1.5rem; }
}

/* ============================================================
   Vetrina hero — drag editor (venture settings) (#465)
   ============================================================ */
.hero-editor{ margin-top:.5rem; }
.hero-editor__stages{ display:flex; gap:1.25rem; align-items:flex-start; flex-wrap:wrap; }
.hero-editor__screen{ flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:.4rem; }
.hero-editor__screen--mobile{ flex:0 0 190px; }
.hero-editor__screen-label{ font-size:.82rem; font-weight:600; color:var(--text-muted,#9aa4b2); }
.hero-editor__stage{
    /* Same aspect ratio and cover treatment as the public free-form box
       (.vetrina-hero__inner--free) so placement is truly WYSIWYG. */
    position:relative; width:100%; aspect-ratio:var(--hero-aspect,16/9);
    border-radius:14px; overflow:visible;
    border:1px solid rgba(var(--accent-color-rgb),.3);
    background-color:var(--vetrina-edge,#0a0f18);
    touch-action:none; user-select:none;
}
.hero-editor__stage--mobile{ aspect-ratio:var(--hero-aspect-m,9/16); }
.hero-editor__stage::before{           /* cover, same look as the public hero */
    content:""; position:absolute; inset:0; border-radius:inherit;
    background-image:var(--vetrina-cover,none);
    background-size:contain; background-position:center; background-repeat:no-repeat;
    opacity:.75;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 8%, #000 20%, #000 80%, rgba(0,0,0,.6) 92%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 7%, #000 18%, #000 82%, rgba(0,0,0,.6) 93%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 8%, #000 20%, #000 80%, rgba(0,0,0,.6) 92%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 7%, #000 18%, #000 82%, rgba(0,0,0,.6) 93%, transparent 100%);
    mask-composite:intersect;
}
.hero-editor__stage::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(180deg, rgba(var(--primary-bg-rgb),.28), rgba(var(--primary-bg-rgb),.46));
}
.hero-editor__item{
    position:absolute; transform:translate(-50%,-50%); z-index:2;
    cursor:grab; touch-action:none;
    padding:.4rem .6rem; border-radius:10px;
    border:1px dashed rgba(var(--accent-color-rgb),.55);
    background:rgba(10,15,24,.35); backdrop-filter:blur(2px);
    display:flex; flex-direction:column; align-items:center; gap:.15rem; text-align:center;
    max-width:60%;
}
/* La fascia che sulla pagina vera sta sotto l'header sticky (#628). Non e' un
   divieto: si puo' ancora trascinare li' dentro, ma si vede dove si finisce.
   L'altezza la scrive il JS, misurata, perche' dipende dal padding dell'header
   e cambia nei media query. */
.hero-editor__band{
    position:absolute; inset:0 0 auto 0; z-index:1; pointer-events:none;
    border-radius:14px 14px 0 0;
    background:repeating-linear-gradient(135deg,
        rgba(0,0,0,.42) 0 6px, rgba(0,0,0,.28) 6px 12px);
    border-bottom:1px dashed rgba(255,255,255,.45);
    display:flex; align-items:flex-end; justify-content:center;
}
.hero-editor__band-label{
    font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
    color:rgba(255,255,255,.72); padding-bottom:.15rem; white-space:nowrap;
}
.hero-editor__item.is-under-header{
    border-color:rgba(255,180,90,.95); border-style:solid;
    box-shadow:0 0 0 3px rgba(255,180,90,.18);
}

.hero-editor__item.is-dragging{ cursor:grabbing; border-style:solid; box-shadow:0 8px 24px rgba(0,0,0,.5); z-index:5; }
.hero-editor__item--logo{ width:56px; height:56px; padding:0; border-radius:12px; overflow:hidden; justify-content:center; }
.hero-editor__item--logo img{ width:100%; height:100%; object-fit:cover; }
.hero-editor__item--logo span{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.4rem; color:var(--accent-color); }
.hero-editor__item--block strong{ font-family:'Montserrat',sans-serif; font-size:1rem; color:#fff; }
.hero-editor__item--block .hero-editor__sub{ font-size:.78rem; color:#c9d2de; }
.hero-editor__item--block .hero-editor__links{ font-size:.72rem; color:var(--accent-color); }
.hero-editor__item--deck{ font-size:.85rem; font-weight:600; color:#fff; }
.hero-editor__bar{ display:flex; align-items:center; gap:1rem; margin-top:.75rem; flex-wrap:wrap; }
.hero-editor__bar .cta-button{ padding:.4rem .9rem; font-size:.85rem; }
.hero-editor__tip{ font-size:.82rem; color:var(--text-muted,#9aa4b2); }

/* ============================================================
   Event detail — full-width cover (fill, not letterboxed) (#465)
   Scoped to the public event detail page only; other event pages
   (settings/analytics/edit) and the global "show whole image"
   convention are unaffected.
   ============================================================ */
.event-detail-page .article-hero-section .venture-cover-image{
    width:100%; height:calc(100vh - 72px); height:calc(100dvh - 72px); max-height:none; min-height:400px;
}
.event-detail-page .article-hero-section .venture-cover-image img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
    background:var(--secondary-bg);
}
@media (max-width:900px){
    .event-detail-page .article-hero-section .venture-cover-image{
        height:calc(100vh - 56px); height:calc(100dvh - 56px); min-height:400px; max-height:none;
    }
    .event-detail-page .article-hero-section .venture-cover-image img{
        height:100%; max-height:none; object-fit:cover;
    }
}

/* Exhibitors grid as a subsection of "Stand delle startup" */
.event-exhibitors-subsection{ margin-top:1.5rem; }

/* ============================================================
   Product set — section 2: star-deck + synced detail panel (#465)
   ============================================================ */
.product-set-section{
    padding:clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,5rem);
    background:linear-gradient(180deg, var(--primary-bg), rgba(var(--primary-bg-rgb),.85));
    scroll-margin-top:80px;
}
.product-set-section .vetrina-products__head{
    max-width:1200px; margin:0 auto 2.5rem;
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.product-set{
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(2rem,5vw,4rem); align-items:center;
}
/* deck (left) */
.product-set__deck{ position:relative; width:min(70vw,380px); aspect-ratio:1/1; margin-inline:auto; }
.pset-card{
    position:absolute; top:50%; left:50%; margin:0; padding:0;
    width:56%; aspect-ratio:3/4;
    border:2px solid var(--accent-color); border-radius:16px; overflow:hidden;
    background:var(--secondary-bg); color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    transform:translate(-50%,-50%) translate(var(--ox,0),var(--oy,0)) rotate(var(--rot,0deg));
    transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    cursor:pointer;
}
.pset-card__img{ width:100%; height:100%; object-fit:cover; display:block; }
.pset-card__ph{
    display:flex; width:100%; height:100%; align-items:center; justify-content:center;
    font-family:'Montserrat',sans-serif; font-size:2.4rem; font-weight:700; color:rgba(var(--accent-color-rgb),.6);
}
.pset-card:hover, .pset-card:focus-visible, .pset-card.is-active{
    transform:translate(-50%,-50%) translate(var(--tx,0),var(--ty,0)) rotate(0deg) scale(1.08);
    box-shadow:0 20px 48px rgba(var(--accent-color-rgb),.35), 0 0 0 3px rgba(var(--accent-color-rgb),.5);
    z-index:50; outline:none;
}
/* detail panel (right) */
.product-set__detail{ position:relative; min-height:200px; }
.pset-panel{ display:none; flex-direction:column; gap:.6rem; }
.pset-panel.is-active{ display:flex; animation:pset-fade .3s ease; }
@keyframes pset-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.pset-panel__kind{
    align-self:flex-start; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    padding:.22rem .6rem; border-radius:999px;
}
.pset-panel__kind--product{ background:rgba(var(--accent-color-rgb),.14); color:var(--accent-color); }
.pset-panel__kind--service{ background:rgba(139,148,255,.16); color:#8b94ff; }
.pset-panel__name{ font-family:'Montserrat',sans-serif; font-size:clamp(1.5rem,3vw,2.2rem); margin:0; line-height:1.1; }
.pset-panel__price{ color:var(--accent-color); font-weight:600; font-size:1.1rem; }
.pset-panel__desc{ color:var(--text-muted,#b8c0cc); line-height:1.6; margin:0; }
.pset-panel__cta{ align-self:flex-start; margin-top:.4rem; color:var(--accent-color); font-weight:600; text-decoration:none; }
.pset-panel__cta:hover{ text-decoration:underline; }

@media (max-width:820px){
    .product-set{ grid-template-columns:1fr; gap:2rem; }
    .product-set__deck{
        position:static; width:100%; aspect-ratio:auto;
        display:flex; gap:.75rem; overflow-x:auto; padding:.5rem .25rem 1rem;
        scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    }
    .pset-card{
        position:static; transform:none !important;
        width:40vw; max-width:170px; flex:0 0 auto; aspect-ratio:3/4; scroll-snap-align:center;
    }
    .pset-card:hover, .pset-card:focus-visible, .pset-card.is-active{
        transform:none !important; box-shadow:0 0 0 3px rgba(var(--accent-color-rgb),.5);
    }
    .product-set__detail{ min-height:0; }
}

/* ============================================================
   Product heroes — section 2: one dedicated hero band per offering (#465)
   ============================================================ */
.product-heroes{ padding:0 0 clamp(2rem,5vw,4rem); }
.product-heroes__head{ text-align:center; padding:clamp(3rem,6vw,5rem) 1.25rem clamp(1.5rem,3vw,2.5rem); }
.product-heroes__title{ font-family:'Montserrat',sans-serif; font-size:clamp(1.7rem,3.6vw,2.6rem); margin:0; letter-spacing:-.01em; }
.product-heroes__count{ margin:.5rem 0 0; color:var(--text-muted,#9aa4b2); }

.product-hero{
    position:relative; display:flex; align-items:center; justify-content:center;
    min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate;
    background-color:var(--pedge,#0a0f18);
    text-decoration:none; color:inherit; scroll-margin-top:0;
}
.product-hero::before{                 /* background image — fills the whole band (cover) */
    content:""; position:absolute; inset:0; z-index:-2;
    background-image:var(--pcover,none);
    background-size:cover; background-position:center; background-repeat:no-repeat;
    transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.product-hero::after{                  /* wash for legibility + smooth top/bottom blend */
    content:""; position:absolute; inset:0; z-index:-1;
    background:
        /* fade each band's top & bottom into the solid page colour so the
           heading→band and band→band seams dissolve instead of showing a line */
        linear-gradient(180deg, rgb(var(--primary-bg-rgb)) 0%, transparent 20%, transparent 80%, rgb(var(--primary-bg-rgb)) 100%),
        radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(var(--primary-bg-rgb),.35) 100%),
        linear-gradient(180deg, rgba(var(--primary-bg-rgb),.42), rgba(var(--primary-bg-rgb),.58));
}
.product-hero__content{
    max-width:640px; padding:2.5rem 1.5rem;
    display:flex; flex-direction:column; align-items:center;
    text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.product-hero__text{ display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center; }
/* split: product photo card beside the text (when a dedicated hero bg exists) */
.product-hero__content--split{
    flex-direction:row; align-items:center; max-width:1080px;
    gap:clamp(1.5rem,4vw,3.5rem);
}
.product-hero__content--split .product-hero__text{ align-items:flex-start; text-align:left; }
.product-hero__card{
    flex:0 0 auto; width:min(46vw,480px); aspect-ratio:4/5;  /* fallback; overridden inline to the image ratio */
    max-height:80vh;
    border-radius:18px; overflow:hidden; background:var(--secondary-bg);
    border:2px solid rgba(var(--accent-color-rgb),.55);
    box-shadow:0 22px 55px rgba(0,0,0,.55);
}
/* the card matches the image's aspect ratio (set inline), so the photo fills it
   edge to edge with no empty space and no crop */
.product-hero__card img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:768px){
    .product-hero__content--split{ flex-direction:column; max-width:640px; gap:1.5rem; }
    .product-hero__content--split .product-hero__text{ align-items:center; text-align:center; }
    .product-hero__card{ width:min(80vw,340px); }
}
.product-hero__kind{
    font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    padding:.22rem .7rem; border-radius:999px;
}
.product-hero__kind--product{ background:rgba(var(--accent-color-rgb),.16); color:var(--accent-color); }
.product-hero__kind--service{ background:rgba(139,148,255,.2); color:#a7adff; }
.product-hero__name{ font-family:'Montserrat',sans-serif; font-size:clamp(1.7rem,4vw,3rem); margin:0; line-height:1.05; }
.product-hero__price{ color:var(--accent-color); font-weight:600; font-size:1.15rem; }
.product-hero__desc{ color:#e7ecf3; line-height:1.6; margin:0; max-width:52ch; }
.product-hero__link{
    margin-top:.6rem; font-weight:700; color:var(--accent-color);
    padding:.5rem 1.1rem; border:1px solid rgba(var(--accent-color-rgb),.5); border-radius:999px;
    transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* hover: highlight the band and activate the link */
.product-hero--link{ cursor:pointer; }
.product-hero--link:hover::before,
.product-hero--link:focus-visible::before{ opacity:.82; transform:scale(1.04); }
.product-hero--link:hover .product-hero__link,
.product-hero--link:focus-visible .product-hero__link{
    background:var(--accent-color); color:#08131a;
    box-shadow:0 10px 26px rgba(var(--accent-color-rgb),.4); transform:translateY(-1px);
}
.product-hero--link:focus-visible{ outline:2px solid var(--accent-color); outline-offset:-2px; }

@media (prefers-reduced-motion:reduce){
    .product-hero::before{ transition:none; }
    .product-hero--link:hover::before{ transform:none; }
}

/* file labels in the offering editor */
.offering-item__file-label{ display:block; font-size:.72rem; color:var(--text-muted,#9aa4b2); margin-bottom:.25rem; }

/* Console nav group headers (venture editor) */
.console-nav-group{
    display:block; margin:.9rem 0 .25rem; padding:0 .75rem;
    font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
    color:var(--text-secondary); opacity:.75;
}
.console-nav-group:first-child{ margin-top:0; }
/* on the mobile pill bar, group labels would break the row — hide them there */
@media (max-width:991px){ .console-nav-group{ display:none; } }

/* ============================================================
   Vetrina — full-width Galleria & Video hero sections (#465)
   ============================================================ */
.vetrina-gallery, .vetrina-videos{
    padding:clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,5rem);
    background:linear-gradient(180deg, rgba(var(--primary-bg-rgb),.85), var(--primary-bg));
}
/* Video: full-screen section, video capped to a max width and centred. */
.vetrina-videos{
    min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(180deg, var(--primary-bg), rgba(var(--primary-bg-rgb),.9));
}
.vetrina-videos .vetrina-section__head{ width:100%; }
.vetrina-section__head{ text-align:center; margin:0 auto clamp(1.75rem,3vw,2.75rem); }
.vetrina-section__title{
    font-family:'Montserrat',sans-serif; font-size:clamp(1.7rem,3.6vw,2.6rem);
    margin:0; letter-spacing:-.01em;
}

/* Gallery grid */
.vetrina-gallery__grid{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
    gap:1rem; grid-auto-rows:220px;
}
.vetrina-gallery__item{
    position:relative; display:block; overflow:hidden; border-radius:14px;
    background:var(--secondary-bg); border:1px solid rgba(var(--accent-color-rgb),.18);
}
/* let a few tiles span larger for an editorial mosaic */
.vetrina-gallery__item:nth-child(6n+1){ grid-column:span 2; grid-row:span 2; }
.vetrina-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.vetrina-gallery__item:hover img{ transform:scale(1.06); }
.vetrina-gallery__caption{
    position:absolute; left:0; right:0; bottom:0; padding:.7rem .8rem;
    font-size:.82rem; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.8), transparent);
    opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;
}
.vetrina-gallery__item:hover .vetrina-gallery__caption{ opacity:1; transform:none; }
@media (max-width:640px){
    .vetrina-gallery__grid{ grid-auto-rows:160px; gap:.6rem; }
    .vetrina-gallery__item:nth-child(6n+1){ grid-column:span 2; grid-row:span 1; }
}

/* Video list */
.vetrina-videos__list{
    max-width:min(1100px, 92vw); width:100%; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,520px),1fr));
    gap:1.5rem;
}
.vetrina-video__frame{
    position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
    background:#000; border:1px solid rgba(var(--accent-color-rgb),.2);
    box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.vetrina-video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vetrina-video__frame .video-embed-fallback{ display:flex; align-items:center; justify-content:center; height:100%; }
.vetrina-video__frame .video-embed-fallback a{ color:var(--accent-color); font-weight:600; }
.vetrina-video__title{ text-align:center; margin:.7rem 0 0; color:var(--text-muted,#b8c0cc); font-weight:600; }

/* Video editor rows (settings) — same soft card as offerings */
.video-list{ display:flex; flex-direction:column; gap:.9rem; }
.video-item{
    position:relative; padding:1rem 1.1rem; border:0; border-radius:14px;
    background:rgba(var(--primary-bg-rgb),.45);
    box-shadow:inset 3px 0 0 rgba(var(--accent-color-rgb),.55);
    display:flex; flex-direction:column; gap:.6rem;
}
.video-item .form-group{ margin:0; }
.video-item .form-group > label{
    display:block; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-secondary); margin-bottom:.3rem;
}
.video-item__row{ display:grid; grid-template-columns:2fr 1fr; gap:.75rem; }
@media (max-width:640px){ .video-item__row{ grid-template-columns:1fr; } }

/* ============================================================
   Vetrina — full-screen scroll snap (venture detail only) (#465)
   Each full-screen section snaps precisely into view; the regular
   content below (no snap points) scrolls freely thanks to `proximity`.
   ============================================================ */
html:has(.vetrina-hero){
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
}
.vetrina-hero,
.product-hero,
.vetrina-videos,
.vetrina-benefits{
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
@media (prefers-reduced-motion: reduce){
    html:has(.vetrina-hero){ scroll-snap-type: none; }
}

/* ============================================================
   Venture detail — floating manage actions (staff/owner/team) (#465)
   ============================================================ */
.venture-fab{
    position:fixed; right:0; top:50%; transform:translateY(-50%);
    z-index:70; display:flex; flex-direction:column; gap:4px;
    padding:.4rem; border-radius:14px 0 0 14px;
    background:var(--glass-bg, rgba(26,32,44,.7)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid var(--border-color); border-right:0;
    box-shadow:-8px 0 28px rgba(0,0,0,.35);
}
.venture-fab__btn{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:10px;
    color:var(--text-secondary); text-decoration:none;
    transition:background .2s, color .2s;
}
.venture-fab__btn:hover,
.venture-fab__btn:focus-visible{ background:rgba(var(--accent-color-rgb),.16); color:var(--accent-color); outline:none; }
.venture-fab__btn.is-current{ color:var(--accent-color); background:rgba(var(--accent-color-rgb),.1); }
/* label pops out to the left on hover/focus — no layout shift */
.venture-fab__label{
    position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(6px);
    padding:.35rem .65rem; border-radius:8px; white-space:nowrap; font-size:.82rem; font-weight:600;
    background:var(--secondary-bg); color:var(--text-primary, #fff);
    border:1px solid var(--border-color); box-shadow:0 6px 18px rgba(0,0,0,.35);
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.venture-fab__btn:hover .venture-fab__label,
.venture-fab__btn:focus-visible .venture-fab__label{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:768px){
    .venture-fab{ top:auto; bottom:16px; transform:none; border-radius:12px; border-right:1px solid var(--border-color); right:12px; flex-direction:row; }
    .venture-fab__btn{ width:40px; height:40px; }
    .venture-fab__label{ display:none; }
}

/* version badge inside the floating manage panel (staff/owner only) */
.venture-fab__version{
    display:flex; align-items:center; justify-content:center;
    padding:.15rem 0 .3rem; margin-bottom:.15rem;
    border-bottom:1px solid var(--border-color); font-size:.72rem;
}
@media (max-width:768px){
    .venture-fab__version{ border-bottom:0; border-right:1px solid var(--border-color); padding:0 .4rem; margin:0 .1rem 0 0; }
}

/* version badge under the hero info block (staff/owner only) + clickable logo */
.vetrina-hero__version{ margin-top:1rem; text-align:center; }
.vetrina-hero__identity--free .vetrina-hero__version{ text-align:center; }
.vetrina-hero__logo-link{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.vetrina-hero__logo-link:hover{ opacity:.92; }

/* ============================================================
   Venture edit — Identità Visiva section polish (#465)
   ============================================================ */
.brand-media-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:1.5rem; align-items:start; }
.brand-media{ margin:0; }
.brand-media > label{ display:block; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); margin-bottom:.4rem; }
.brand-media__preview{
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    border-radius:12px; background:var(--secondary-bg); border:1px dashed var(--border-color);
    margin-bottom:.6rem;
}
.brand-media__preview img{ display:block; max-width:100%; }
.brand-media .brand-media__preview:not(.brand-media__preview--cover){ width:120px; height:120px; }
.brand-media .brand-media__preview:not(.brand-media__preview--cover) img{ width:100%; height:100%; object-fit:contain; padding:.4rem; }
.brand-media__preview--cover{ width:100%; aspect-ratio:16/6; }
.brand-media__preview--cover img{ width:100%; height:100%; object-fit:cover; }
.brand-media__placeholder{ font-family:'Montserrat',sans-serif; font-size:2rem; font-weight:700; color:rgba(var(--accent-color-rgb),.5); }
.brand-media__placeholder--cover{ font-size:.9rem; color:var(--text-secondary); }
.brand-ai-btn{ margin-top:.6rem; display:inline-flex; align-items:center; gap:.4rem; }
@media (max-width:700px){ .brand-media-grid{ grid-template-columns:1fr; } }

/* AI prompt textarea inside the modal */
.pe-modal .cover-tip__prompt{
    width:100%; margin:.4rem 0 .2rem; padding:.7rem .8rem; border-radius:10px;
    background:var(--primary-bg); border:1px solid var(--border-color); color:var(--text-primary,#fff);
    font-size:.85rem; line-height:1.5; resize:vertical;
}
.pe-modal .mr-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; }

/* ============================================================
   Hero composition editor — alignment grid + live snap guides (#465)
   ============================================================ */
.hero-editor__grid{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.hero-editor__grid-line{ position:absolute; background:rgba(255,255,255,.09); }
.hero-editor__grid-line--v{ top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.hero-editor__grid-line--h{ left:0; right:0; height:1px; transform:translateY(-.5px); }
/* live snap guides — bright, only visible while a block is aligned */
.hero-editor__guide{ position:absolute; pointer-events:none; z-index:4; opacity:0; transition:opacity .08s linear; }
.hero-editor__guide.is-on{ opacity:1; }
.hero-editor__guide--v{ top:0; bottom:0; width:0; border-left:1px dashed var(--accent-color); box-shadow:0 0 8px rgba(var(--accent-color-rgb),.7); transform:translateX(-.5px); }
.hero-editor__guide--h{ left:0; right:0; height:0; border-top:1px dashed var(--accent-color); box-shadow:0 0 8px rgba(var(--accent-color-rgb),.7); transform:translateY(-.5px); }

/* ============================================================
   Vetrina — Team · Benefit · Business Model hero sections (#465)
   ============================================================ */
.vetrina-team, .vetrina-benefits, .vetrina-bmc{
    padding:clamp(3rem,7vw,6rem) clamp(1.25rem,5vw,5rem);
}
.vetrina-team{ background:linear-gradient(180deg, var(--primary-bg), rgba(var(--primary-bg-rgb),.85)); }
.vetrina-benefits{ background:linear-gradient(180deg, rgba(var(--primary-bg-rgb),.85), var(--primary-bg)); }
.vetrina-bmc{ background:linear-gradient(180deg, var(--primary-bg), rgba(var(--primary-bg-rgb),.9)); }
.vetrina-section__note{ text-align:center; margin:.5rem 0 0; font-size:.85rem; color:var(--text-muted,#9aa4b2); }

/* Team cards */
.vetrina-team__grid{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1.5rem;
}
.vteam-card{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
    padding:1.75rem 1.25rem; border-radius:18px; text-decoration:none;
    background:var(--secondary-bg); border:1px solid rgba(var(--accent-color-rgb),.2);
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vteam-card:hover{ transform:translateY(-4px); border-color:rgba(var(--accent-color-rgb),.5); box-shadow:0 18px 40px rgba(0,0,0,.4); }
.vteam-card__avatar{
    width:104px; height:104px; border-radius:50%; overflow:hidden; margin-bottom:.4rem;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--accent-color-rgb),.12); border:2px solid rgba(var(--accent-color-rgb),.4);
}
.vteam-card__avatar img{ width:100%; height:100%; object-fit:cover; }
.vteam-card__avatar span{ font-family:'Montserrat',sans-serif; font-size:2rem; font-weight:700; color:var(--accent-color); }
.vteam-card__name{ font-family:'Montserrat',sans-serif; font-size:1.15rem; margin:0; color:var(--text-primary,#fff); }
.vteam-card__role{ margin:0; font-size:.85rem; color:var(--text-muted,#b8c0cc); }
.vteam-card__badges{ display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; margin-top:.35rem; }

/* Benefit hero — the reused .benefit-grid sits centred */
.vetrina-benefits__inner{ max-width:1100px; margin:0 auto; }
.vetrina-benefits__inner .content-block{ margin:0 0 1.5rem; }

/* Business Model narrative cards */
.vetrina-bmc__grid{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:1.25rem;
}
.bmc-card{
    background:var(--secondary-bg); border:1px solid rgba(var(--accent-color-rgb),.18);
    border-left:3px solid var(--accent-color); border-radius:14px; padding:1.4rem 1.5rem;
}
.bmc-card__label{
    font-family:'Montserrat',sans-serif; font-size:.78rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--accent-color); margin:0 0 .6rem;
}
.bmc-card__body{ color:var(--text-muted,#c9d2de); line-height:1.65; font-size:.95rem; }
.bmc-card__body p{ margin:0 0 .6rem; }
.bmc-card__body p:last-child{ margin-bottom:0; }
/* the pitch/problem/solution read as the lead — span full width */
.bmc-card--elevator_pitch, .bmc-card--problem, .bmc-card--solution{ grid-column:1 / -1; }

/* ============================================================
   Analytics arsenal — engagement / product / interaction panels (#23)
   ============================================================ */
.aa{ max-width:1000px; margin:0 auto 2rem; background:var(--secondary-bg); border:1px solid var(--border-color); border-radius:16px; padding:1.5rem 1.75rem; }
.aa__title{ font-family:'Montserrat',sans-serif; font-size:1.25rem; margin:0 0 1.2rem; }
.aa-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; }
.aa-stat{ display:flex; flex-direction:column; gap:.2rem; padding:1rem; border-radius:12px; background:rgba(var(--primary-bg-rgb),.5); text-align:center; }
.aa-stat__val{ font-family:'Montserrat',sans-serif; font-size:1.7rem; font-weight:700; color:var(--accent-color); }
.aa-stat__lbl{ font-size:.78rem; color:var(--text-secondary); }
.aa-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin-top:1.4rem; }
.aa-block__title{ font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); margin:0 0 .8rem; }
.aa-bar{ display:flex; align-items:center; gap:.7rem; margin:0 0 .55rem; }
.aa-bar__lbl{ flex:0 0 120px; font-size:.85rem; color:var(--text-muted,#c9d2de); }
.aa-bar__track{ flex:1; height:8px; border-radius:999px; background:rgba(var(--primary-bg-rgb),.6); overflow:hidden; }
.aa-bar__fill{ height:100%; border-radius:999px; background:var(--accent-color); min-width:2px; transition:width .4s ease; }
.aa-bar__val{ flex:0 0 42px; text-align:right; font-size:.82rem; font-weight:600; color:var(--text-secondary); }
.aa-table{ width:100%; border-collapse:collapse; }
.aa-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); padding:.5rem .6rem; border-bottom:1px solid var(--border-color); }
.aa-table td{ padding:.55rem .6rem; border-bottom:1px solid rgba(255,255,255,.05); font-size:.9rem; }
.aa-table__accent{ color:var(--accent-color); font-weight:700; }
/* Il modo del prodotto accanto al nome, e i preordini dentro la colonna delle
   richieste (#692): due informazioni che non meritano una colonna propria ma
   cambiano il senso della riga. */
.aa-table__mode{ display:block; font-size:.72rem; color:var(--text-secondary);
    margin-top:.1rem; }
.aa-table__pre{ display:inline-block; font-size:.7rem; font-weight:600;
    padding:.1rem .45rem; border-radius:20px; margin-left:.3rem;
    background:rgba(var(--accent-color-rgb),.16); }
.aa-note{ margin:.7rem 0 0; font-size:.76rem; line-height:1.5;
    color:var(--text-secondary); }
.aa-empty{ color:var(--text-secondary); font-size:.9rem; margin:0; }

/* ============================================================
   Gallery hero — venture cover as the background (#465)
   ============================================================ */
.vetrina-gallery{
    position:relative; isolation:isolate; overflow:hidden;
    background:var(--vetrina-edge,#0a0f18);
}
.vetrina-gallery::before{           /* cover, dimmed + blurred backdrop */
    content:""; position:absolute; inset:0; z-index:-2;
    background-image:var(--vetrina-cover,none);
    background-size:cover; background-position:center;
    opacity:.35; filter:saturate(1.05);
    transform:scale(1.06);
}
.vetrina-gallery::after{            /* dark wash so the grid stays readable */
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(var(--primary-bg-rgb),.72), rgba(var(--primary-bg-rgb),.86));
}

/* ============================================================
   Benefit card — redesigned + full-width benefits hero (#465)
   ============================================================ */
.vetrina-benefits{
    background:linear-gradient(180deg, rgba(var(--primary-bg-rgb),.9), var(--primary-bg));
}
.vetrina-benefits .content-block > h3{
    text-align:center; font-family:'Montserrat',sans-serif; font-size:1.15rem;
    margin:0 0 1.5rem; color:var(--text-primary,#fff);
}
.vetrina-benefits .benefit-grid{ grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.25rem; }

/* the card itself — premium ticket-style, used on venture + partner pages */
.benefit-card{
    padding:1.5rem 1.5rem 1.5rem 1.75rem;
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),.07), rgba(255,255,255,.02));
    border:1px solid rgba(var(--accent-color-rgb),.25); border-radius:16px;
    overflow:hidden;
    transition:border-color .2s ease, transform .2s ease, box-shadow .3s ease;
}
.benefit-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent-color); }
.benefit-card--outbound::before{ background:#818CF8; }
.benefit-card:hover{
    border-color:rgba(var(--accent-color-rgb),.55); transform:translateY(-4px);
    box-shadow:0 18px 44px rgba(0,0,0,.4);
}
.benefit-card-direction{ font-size:.64rem; }
.benefit-card-title{ font-size:1.15rem; }
.benefit-card-description{ color:var(--text-muted,#c9d2de); }
/* coupon → dashed ticket chip */
.benefit-card-coupon{
    display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
    padding:.5rem .8rem; border:1px dashed rgba(var(--accent-color-rgb),.55);
    border-radius:10px; background:rgba(var(--accent-color-rgb),.06);
}
.benefit-card-coupon code{
    font-family:'Roboto Mono', monospace; font-weight:700; letter-spacing:.06em;
    color:var(--accent-color); font-size:.95rem;
}
.benefit-card-tier-chip{ background:rgba(var(--accent-color-rgb),.12); color:var(--accent-color); }

/* ============================================================
   Benefit hero — horizontal slider of ad-hoc benefit cards (#465)
   ============================================================ */
.vetrina-benefits{
    position:relative; isolation:isolate; overflow:hidden;
    min-height:100vh; min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    background:var(--vetrina-edge,#0a0f18);
}
.vetrina-benefits::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-color-rgb),.14), transparent 60%),
        linear-gradient(180deg, rgba(var(--primary-bg-rgb),.78), rgba(var(--primary-bg-rgb),.92));
}
.benefit-slider{ position:relative; display:flex; align-items:center; gap:.5rem; max-width:1200px; margin:0 auto; width:100%; padding:0 clamp(1rem,4vw,3rem); }
.benefit-slider__track{
    display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding:.5rem .25rem 1.25rem; flex:1;
    scrollbar-width:none;
}
.benefit-slider__track::-webkit-scrollbar{ display:none; }
.benefit-slider__nav{
    flex:0 0 auto; width:44px; height:44px; border-radius:50%;
    border:1px solid rgba(var(--accent-color-rgb),.4); background:rgba(10,15,24,.55); backdrop-filter:blur(6px);
    color:var(--accent-color); font-size:1.6rem; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;
}
.benefit-slider__nav:hover{ background:rgba(var(--accent-color-rgb),.18); transform:scale(1.06); }
.benefit-slider__nav[hidden]{ display:none; }
/* all cards fit → centre them, no arrows */
.benefit-slider--fits .benefit-slider__track{ justify-content:center; overflow-x:visible; }

/* ad-hoc benefit card */
.bslide{
    flex:0 0 clamp(280px, 82vw, 360px); scroll-snap-align:center;
    display:flex; flex-direction:column; gap:.6rem;
    padding:1.6rem 1.6rem 1.4rem 1.75rem; border-radius:20px; position:relative; overflow:hidden;
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),.1), var(--secondary-bg));
    border:1px solid rgba(var(--accent-color-rgb),.3);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.bslide::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent-color); }
.bslide--outbound{ background:linear-gradient(180deg, rgba(129,140,248,.12), var(--secondary-bg)); border-color:rgba(129,140,248,.35); }
.bslide--outbound::before{ background:#818CF8; }
.bslide__top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.bslide__dir{ font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent-color); }
.bslide--outbound .bslide__dir{ color:#a7adff; }
.bslide__tag{ font-size:.7rem; padding:.18rem .55rem; border-radius:999px; background:rgba(255,255,255,.06); color:var(--text-secondary); }
.bslide__tag--exp{ color:#f87171; background:rgba(248,113,113,.1); }
.bslide__title{ font-family:'Montserrat',sans-serif; font-size:1.3rem; margin:.1rem 0 0; color:#fff; }
.bslide__desc{ color:var(--text-muted,#c9d2de); line-height:1.55; font-size:.92rem; }
.bslide__desc p{ margin:0 0 .5rem; } .bslide__desc p:last-child{ margin:0; }
.bslide__tiers{ display:flex; flex-wrap:wrap; gap:.35rem; }
.bslide__tier{ font-size:.72rem; padding:.2rem .55rem; border-radius:999px; background:rgba(var(--accent-color-rgb),.14); color:var(--accent-color); }
.bslide__foot{ margin-top:auto; padding-top:.8rem; }
.bslide__code{ display:flex; flex-direction:column; gap:.15rem; padding:.7rem .85rem; border:1px dashed rgba(var(--accent-color-rgb),.6); border-radius:12px; background:rgba(var(--accent-color-rgb),.07); }
.bslide__code-label{ font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-secondary); }
.bslide__code code{ font-family:'Roboto Mono',monospace; font-size:1.15rem; font-weight:700; letter-spacing:.08em; color:var(--accent-color); }
.bslide__voucher{ display:block; margin-top:.4rem; font-size:.72rem; color:var(--text-secondary); }
.bslide__btn{ display:inline-block; width:100%; text-align:center; padding:.7rem 1rem; border-radius:10px; border:0; cursor:pointer; font-weight:700; font-size:.9rem; background:var(--accent-color); color:#08131a; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.bslide__btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(var(--accent-color-rgb),.4); }
.bslide__btn--ghost{ background:transparent; color:var(--accent-color); border:1px solid rgba(var(--accent-color-rgb),.5); }
.bslide__btn.is-loading{ opacity:.6; cursor:progress; }
.bslide__hint{ font-size:.82rem; color:var(--text-secondary); }
@media (max-width:600px){ .benefit-slider__nav{ display:none; } }

/* benefit card: copy button + voucher QR */
.bslide__copy{ margin-top:.4rem; align-self:flex-start; padding:.35rem .7rem; border-radius:8px; border:1px solid rgba(var(--accent-color-rgb),.5); background:transparent; color:var(--accent-color); font-size:.78rem; font-weight:600; cursor:pointer; transition:background .2s; }
.bslide__copy:hover{ background:rgba(var(--accent-color-rgb),.12); }
.bslide__qr{ display:flex; flex-direction:column; align-items:center; gap:.35rem; margin-top:.75rem; }
.bslide__qr img{ width:120px; height:120px; border-radius:10px; background:#fff; padding:6px; }

/* BMC gated → request-canvas CTA */
.bmc-locked{ max-width:640px; margin:1.75rem auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.8rem; padding:1.75rem; border:1px dashed rgba(var(--accent-color-rgb),.4); border-radius:16px; background:rgba(var(--accent-color-rgb),.05); }
.bmc-locked svg{ color:var(--accent-color); opacity:.8; }
.bmc-locked p{ margin:0; color:var(--text-muted,#c9d2de); }
.bmc-locked__btn{ margin-top:.2rem; }
.pe-modal .form-input{ width:100%; margin:.3rem 0 .8rem; }

/* ============================================================
   Vetrina — discovery strips (Altre venture / News) + owner stats band
   (promoted from the old sidebar) (#465)
   ============================================================ */
.vetrina-strip{ padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,5rem); background:linear-gradient(180deg, rgba(var(--primary-bg-rgb),.9), var(--primary-bg)); }
.vetrina-strip--news{ background:var(--primary-bg); }
.vetrina-section__head--sub{ margin-top:2.5rem; }
.vstrip-foot{ text-align:center; margin-top:1.6rem; }
.vstrip-foot a{ color:var(--accent-color); font-weight:600; text-decoration:none; }
.vstrip-foot a:hover{ text-decoration:underline; }

/* other-ventures cards */
.vstrip-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; }
.ventity-card{ display:flex; align-items:center; gap:.9rem; padding:1rem; border-radius:14px; background:var(--secondary-bg); border:1px solid rgba(var(--accent-color-rgb),.18); text-decoration:none; transition:transform .25s ease, border-color .25s ease; }
.ventity-card:hover{ border-color:rgba(var(--accent-color-rgb),.5); transform:translateY(-3px); }
.ventity-card__logo{ width:52px; height:52px; border-radius:12px; object-fit:cover; flex:0 0 auto; }
.ventity-card__logo--ph{ display:flex; align-items:center; justify-content:center; background:rgba(var(--accent-color-rgb),.12); font-family:'Montserrat',sans-serif; font-weight:700; color:var(--accent-color); }
.ventity-card__name{ display:block; font-weight:600; color:var(--text-primary,#fff); }
.ventity-card__desc{ display:block; font-size:.82rem; color:var(--text-muted,#9aa4b2); }

/* news cards */
.vnews-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.vnews-card{ display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:var(--secondary-bg); border:1px solid var(--border-color); text-decoration:none; transition:transform .25s ease, border-color .25s ease; }
.vnews-card:hover{ transform:translateY(-4px); border-color:rgba(var(--accent-color-rgb),.4); }
.vnews-card__thumb{ aspect-ratio:16/9; background:#0d1420; }
.vnews-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vnews-card__body{ padding:1rem; display:flex; flex-direction:column; gap:.3rem; }
.vnews-card__cat{ font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-color); font-weight:700; }
.vnews-card__title{ font-family:'Montserrat',sans-serif; font-size:1rem; color:var(--text-primary,#fff); line-height:1.3; }
.vnews-card__meta{ font-size:.76rem; color:var(--text-muted,#9aa4b2); }

/* owner-only stats band */
.vowner-stats{ padding:1.4rem clamp(1.25rem,5vw,5rem); background:rgba(var(--accent-color-rgb),.05); border-block:1px solid rgba(var(--accent-color-rgb),.15); }
.vowner-stats__inner{ max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:1.5rem 2rem; flex-wrap:wrap; justify-content:center; }
.vowner-stats__badge{ font-size:.72rem; font-weight:700; color:var(--accent-color); }
.vowner-stats__grid{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.vowner-stat{ text-align:center; }
.vowner-stat__val{ display:block; font-family:'Montserrat',sans-serif; font-size:1.5rem; font-weight:700; color:var(--accent-color); }
.vowner-stat__lbl{ font-size:.7rem; color:var(--text-muted,#9aa4b2); }
.vowner-stats__link{ color:var(--accent-color); font-weight:600; text-decoration:none; white-space:nowrap; }
.vowner-stats__link:hover{ text-decoration:underline; }

/* Altre venture — reuse list card, centred */
.vstrip-cards{ max-width:1160px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; }
.vstrip-cards .venture-card{ flex:0 1 320px; max-width:340px; }

/* Hero social icons (below the oneliner) — reuses _link_kind_icon by kind */
.vetrina-hero__social{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin:.2rem 0 1.4rem; }
.vetrina-hero__identity--free .vetrina-hero__social{ justify-content:center; }
.vhero-social{
    width:40px; height:40px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
    text-decoration:none; transition:transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
    backdrop-filter:blur(4px);
}
.vhero-social:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); }
.vhero-social svg{ width:18px; height:18px; }
.vhero-social--instagram:hover{ color:#E4405F; border-color:#E4405F; }
.vhero-social--facebook:hover{ color:#1877F2; border-color:#1877F2; }
.vhero-social--twitter:hover{ color:#fff; border-color:#fff; }
.vhero-social--linkedin:hover{ color:#0A66C2; border-color:#0A66C2; }
.vhero-social--github:hover{ color:#fff; border-color:#fff; }
.vhero-social--youtube:hover{ color:#FF0000; border-color:#FF0000; }
.vhero-social--website:hover,.vhero-social--other:hover{ color:var(--accent-color); border-color:var(--accent-color); }

/* Article — cited startups as rich venture cards */
.article-ventures{ margin:2.5rem 0; }
.article-ventures__title{ font-family:'Montserrat',sans-serif; font-size:1.15rem; margin:0 0 1.25rem; }
.article-ventures__grid{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.article-ventures__grid .venture-card{ flex:0 1 300px; max-width:340px; }

/* ============================================================
   Event detail — full-page layout + prominent hero CTA (#504, #505)
   ============================================================ */
/* Full-page: single column, wider, no sidebar on the event page */
.event-detail-page .article-detail-layout {
    grid-template-columns: 1fr;
    max-width: 920px;
}
.event-detail-page .article-detail-sidebar { display: none; }

/* Mobile/tablet: turn the hero's «Partecipa / Register» into a big, clearly
   visible full-width call to action so the first section reads as a hero. */
@media (max-width: 900px) {
    .event-detail-page .article-hero-actions { width: 100%; }
    .event-detail-page .article-hero-cta--primary {
        width: 100%;
        justify-content: center;
        padding: 0.95rem 1.2rem;
        font-size: 1.02rem;
        border-radius: 12px;
        box-shadow: 0 8px 22px rgba(var(--accent-color-rgb), 0.4);
    }
    .event-detail-page .article-hero-cta--primary svg { width: 18px; height: 18px; }
}

/* ============================================================
   Event hero — full-screen; full-width bottom footer, stacked info,
   centered CTA (#506, #509)
   ============================================================ */
.event-hero .venture-cover-image {
    /* Desktop: a strong but not full-screen hero (full-height is mobile-only, #512) */
    height: 62vh;
    max-height: 640px;
    min-height: 420px;
}
/* Hero in normal flow — no sticky/parallax; positioned for the centered CTA (#518) */
.event-detail-page .event-hero { position: relative; }
/* Full-width bar pinned to the bottom of the section */
.event-hero .article-hero-footer {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(8, 12, 20, 0.97) 0%, rgba(8, 12, 20, 0.9) 45%, rgba(8, 12, 20, 0.5) 78%, transparent 100%);
    padding: 3.5rem 1.5rem 2.4rem;   /* compact at the bottom so it never meets the centered button */
}
/* Centered content column: title, info on separate rows, centered CTA */
.event-hero .article-hero-footer-inner {
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
}
.event-hero .article-hero-footer-text { width: 100%; min-width: 0; }
.event-hero .article-hero-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
    font-size: 2.4rem;
    margin: 0 0 0.9rem;
    overflow-wrap: anywhere;
}
/* Info on separate rows */
.event-hero .article-hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    width: 100%;
    max-width: 100%;
}
/* Block (not inline-flex) so long text wraps and never overflows the viewport */
.event-hero .article-hero-meta span {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 1.05rem;   /* larger, readable (was 0.85rem) */
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);   /* legible over the cover image */
    text-align: center;
    line-height: 1.5;             /* consistent spacing when a line wraps */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.event-hero .article-hero-meta span svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
    width: 16px; height: 16px;
    opacity: 0.9;
}
.event-hero .article-hero-meta a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}
.event-hero .article-hero-meta a:hover { text-decoration-color: var(--accent-color); color: var(--accent-color); }
/* Centered Partecipa button */
.event-hero .article-hero-actions { justify-content: center; width: auto; }
.event-hero .article-hero-cta--primary {
    width: auto;
    padding: 0.9rem 2.2rem;
    font-size: 1rem;
    border-radius: 12px;
}
/* Centered «Partecipa» overlay — horizontally + vertically centered in the hero (#517) */
.event-hero .event-hero-cta-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    width: max-content;
    max-width: 90%;
    text-align: center;
}
.event-hero .event-hero-cta-big {
    background: var(--accent-color);
    color: #0a0f18;
    border: 1px solid var(--accent-color);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 1rem 2.6rem;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}
.event-hero .event-hero-cta-big:hover { filter: brightness(1.05); }

@media (max-width: 900px) {
    .event-hero .venture-cover-image { height: 100vh; max-height: none; min-height: 480px; }
    .event-hero .article-hero-footer { padding: 3rem 1rem 2rem; }
    .event-hero .article-hero-footer-inner { align-items: center; }
    .event-hero .article-hero-title { font-size: 1.8rem; }
    .event-hero .article-hero-meta span { font-size: 0.98rem; }
    .event-hero .article-hero-actions { width: 100%; justify-content: center; }
    .event-hero .article-hero-cta--primary { width: auto; min-width: 200px; margin: 0 auto; }
}

@media (max-width: 1100px) {
    .nav-profile-wrapper, .nav-lang-switcher { position: static; }
    .profile-dropdown-menu, .lang-dropdown-menu {
        position: static;
        inset: auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        box-shadow: none;
        animation: none;
    }
    header nav .nav-links.nav-open { max-height: 85vh; }
}

.partner-draft-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: rgba(240, 180, 41, 0.1); border: 1px solid rgba(240, 180, 41, 0.4);
    border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.partner-draft-banner strong { color: #f0b429; }
.partner-draft-banner p { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.partner-draft-badge { color: #f0b429; font-weight: 700; font-size: 0.85rem; }

.partner-draft-banner--live {
    background: rgba(var(--accent-color-rgb), 0.08);
    border-color: rgba(var(--accent-color-rgb), 0.35);
}
.partner-draft-banner--live strong { color: var(--accent-color); }

.pp-service { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 0; border-bottom: 1px solid var(--border-color); }
.pp-service:last-of-type { border-bottom: 0; }
.pp-service__info strong { color: var(--text-primary); }
.pp-service__price { color: var(--accent-color); font-size: 0.82rem; font-weight: 700; }
.pp-service__info p { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--text-secondary); }
.pp-orders { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.pp-orders li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.pp-order__status { font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(var(--accent-color-rgb),0.15); color: var(--accent-color); }
.pp-order__status--fulfilled { background: rgba(57,211,187,0.15); color: #39D3BB; }
.pp-order__status--cancelled { background: rgba(229,72,77,0.15); color: #E5484D; }
.pp-order__date { margin-left: auto; color: var(--text-secondary); font-size: 0.78rem; }

/* Canvas hero in the partner console */
.partner-canvas-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid rgba(57, 211, 187, 0.28);
    border-radius: 16px;
    background: radial-gradient(900px 320px at 12% -40%, rgba(57, 211, 187, 0.16), transparent),
                var(--secondary-bg);
}
.partner-canvas-hero__text { flex: 1 1 320px; }
.partner-canvas-hero__eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}
.partner-canvas-hero h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
}
.partner-canvas-hero p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    max-width: 62ch;
}
.partner-canvas-hero__cta { white-space: nowrap; }
@media (max-width: 640px) {
    .partner-canvas-hero { padding: 1.25rem; }
    .partner-canvas-hero__cta { width: 100%; text-align: center; }
}

.legal-translation-note {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.9rem;
    color: #555;
}

.site-messages {
    max-width: 1100px;
    margin: 1.2rem auto 0;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.site-message {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: .9rem;
    line-height: 1.45;
}
.site-message--success { border-color: rgba(57, 211, 187, .5); }
.site-message--error { border-color: rgba(229, 72, 77, .55); }
.site-message--warning { border-color: rgba(240, 180, 41, .55); }
.site-message__x {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .2rem;
}
.site-message__x:hover { color: var(--text-primary); }

.dash-page { max-width: 1320px; }
.dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.6rem;
    align-items: start;
}
.dash-main { min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.dash-rail {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}
.dash-rail .dashboard-section,
.dash-rail .sim-hero { margin: 0; }
.dash-rail .dash-tools { grid-template-columns: 1fr; }
.dash-rail .dash-contrib { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }

.sim-hero--rail { padding: 1.2rem 1.3rem; border-radius: 16px; }
.sim-hero--rail h2 { font-size: 1.05rem; line-height: 1.25; }
.sim-hero--rail p { font-size: .84rem; line-height: 1.5; }
.sim-hero--rail .sim-hero__cta { flex-wrap: wrap; gap: .45rem; }
.sim-hero--rail .sim-hero__btn { font-size: .76rem; padding: .45rem .7rem; }
.sim-hero--rail .sim-hero__motif { opacity: .5; }

.dash-main .dash-zone,
.dash-rail .dash-zone {
    font-family: 'Montserrat', sans-serif;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--text-secondary);
    margin: .8rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--border-color);
}
.dash-main > .dash-zone:first-child,
.dash-rail > .dash-zone:first-child { border-top: none; padding-top: 0; margin-top: 0; }

@media (max-width: 1080px) {
    .dash-cols { grid-template-columns: 1fr; }
    .dash-rail { position: static; }
    .dash-rail .dash-contrib { grid-template-columns: repeat(4, 1fr); }
    .dash-rail .dash-tools { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}

.dash-main .dashboard-section,
.dash-rail .dashboard-section {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.15rem 1.25rem 1.3rem;
    margin: 0;
}
.dash-main .dashboard-section > h3,
.dash-rail .dashboard-section > h3,
.dash-main .dashboard-section-header h3,
.dash-rail .dashboard-section-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    margin: 0 0 .9rem;
}
.dash-main .dashboard-section-header { margin-bottom: .9rem; }
.dash-main .dashboard-section .event-card-grid,
.dash-main .dashboard-section .venture-grid,
.dash-main .dashboard-section .article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .8rem;
}
.dash-main .dashboard-section .event-card img,
.dash-main .dashboard-section .venture-card img { aspect-ratio: 16 / 9; object-fit: cover; }
.dash-main .dash-events-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dash-main .todo-panel { margin: 0; }
.dash-rail .dash-contrib { padding: 1rem; }
.dash-rail .dash-contrib__n { font-size: 1.35rem; }
.dash-rail .dashboard-section > h3 { font-size: .95rem; }

.dash-icons { display: flex; gap: .45rem; flex-wrap: wrap; }
.dash-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Quattro sono collegamenti e la quinta e' un button: senza azzerare
       riempimento, margine e aspetto nativo, il pulsante porta i valori del
       browser e la sua icona esce dal centro rispetto alle altre. Su iOS
       l'aspetto nativo aggiunge anche il proprio bordo. */
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 1;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    color: #cfd6e0;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.dash-ico:hover { border-color: var(--accent-color); color: var(--accent-color); background: rgba(57, 211, 187, .1); }
.dash-ico:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.dash-ico svg { display: block; }

.dash-count {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: rgba(57, 211, 187, .16);
    color: var(--accent-color);
    font-size: .74rem;
    font-weight: 700;
    vertical-align: middle;
}

.dash-meet { display: flex; flex-direction: column; gap: .55rem; }
.dash-meet__row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .85rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}
.dash-meet__row:hover { border-color: var(--accent-color); }
.dash-meet__when {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: .82rem;
    color: var(--accent-color);
    min-width: 5.6rem;
}
.dash-meet__what { font-size: .88rem; font-weight: 600; }
.dash-meet__who { font-size: .76rem; color: var(--text-secondary); }

.sim-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color);
    border-radius: 16px;
    padding: 1.1rem 1.2rem 1.2rem;
}
.sim-card__top { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.sim-card__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(57, 211, 187, .12);
    color: var(--accent-color);
    flex-shrink: 0;
}
.sim-card__eyebrow {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.3;
}
.sim-card__title { font-family: 'Montserrat', sans-serif; font-size: .98rem; line-height: 1.3; margin: 0 0 .4rem; }
.sim-card__txt { font-size: .82rem; line-height: 1.55; color: var(--text-secondary); margin: 0 0 .9rem; }
.sim-card__go {
    display: inline-block;
    font-weight: 700;
    font-size: .82rem;
    color: var(--accent-color);
    text-decoration: none;
}
.sim-card__go:hover { text-decoration: underline; }
.sim-card__more { display: flex; gap: .9rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--border-color); }
.sim-card__more a { font-size: .76rem; color: var(--text-secondary); text-decoration: none; }
.sim-card__more a:hover { color: var(--accent-color); }

.dash-tk__grp {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 1rem 0 .45rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--border-color);
}
.dash-tk__grp:first-of-type { margin-top: .2rem; padding-top: 0; border-top: none; }
.dash-tk__row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem .6rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.dash-tk__row:hover { background: rgba(255, 255, 255, .04); }
.dash-tk__row:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.dash-tk__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(57, 211, 187, .1);
    color: var(--accent-color);
    flex-shrink: 0;
}
.dash-tk__row b { display: block; font-size: .84rem; font-weight: 600; line-height: 1.3; }
.dash-tk__row i {
    display: block;
    font-style: normal;
    font-size: .72rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: .12rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Il footer conteneva l'unica stringa indivisibile del sito, l'indirizzo email
   di 34 caratteri. Su schermi stretti non entrava e allargava tutta la pagina. */
.footer-column,
.footer-bottom { min-width: 0; }
.footer-column p,
.footer-column a,
.footer-bottom p,
.footer-bottom a { overflow-wrap: anywhere; }

@media (max-width: 600px) {
    footer { padding: 2.5rem 1.15rem 1.5rem; }
    .footer-column { min-width: 0; width: 100%; }
    .footer-content { gap: 1.5rem; }
}

.cf-panel { background: var(--secondary-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.2rem 1.3rem 1.4rem; margin-bottom: 1.4rem; }
.cf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cf-head h3 { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; margin: 0; }
.cf-days { font-size: .72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .1em; }
.cf-funnel { display: flex; align-items: stretch; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.cf-step { flex: 1 1 140px; min-width: 0; background: rgba(255,255,255,.03); border: 1px solid var(--border-color); border-radius: 12px; padding: .85rem 1rem; display: flex; flex-direction: column; }
.cf-step--end { border-color: var(--accent-color); }
.cf-step__v { font-family: 'Montserrat', sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.cf-step--end .cf-step__v { color: var(--accent-color); }
.cf-step__l { font-size: .76rem; color: var(--text-secondary); margin-top: .35rem; }
.cf-step__s { font-size: .7rem; color: var(--text-secondary); opacity: .8; margin-top: .2rem; }
.cf-arrow { align-self: center; color: var(--text-secondary); font-size: 1.1rem; }
.cf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; }
.cf-box { border: 1px solid var(--border-color); border-radius: 12px; padding: .9rem 1rem; min-width: 0; }
.cf-box__t { font-size: .7rem; text-transform: uppercase; letter-spacing: .11em; color: var(--text-secondary); font-weight: 700; margin-bottom: .7rem; }
.cf-src { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; font-size: .8rem; }
.cf-src__k { min-width: 4.6rem; color: var(--text-secondary); }
.cf-src__bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.cf-src__bar span { display: block; height: 100%; background: var(--accent-color); }
.cf-src__n { font-weight: 700; font-size: .8rem; min-width: 1.8rem; text-align: right; }
.cf-kv { font-size: .82rem; color: var(--text-secondary); margin-bottom: .4rem; line-height: 1.45; }
.cf-kv b { color: var(--text-primary); font-family: 'Montserrat', sans-serif; font-weight: 800; margin-right: .25rem; }
.cf-empty { font-size: .78rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
@media (max-width: 560px) { .cf-funnel { flex-direction: column; } .cf-arrow { transform: rotate(90deg); } }

.ev-timeline__who {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-color);
    margin: 0.15rem 0 0.35rem;
    line-height: 1.4;
}


.sm-repo { display: flex; gap: .9rem; background: var(--secondary-bg); border: 1px solid var(--border-color); border-left: 3px solid var(--accent-color); border-radius: 16px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.sm-repo__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(57,211,187,.12); color: var(--accent-color); display: inline-flex; align-items: center; justify-content: center; }
.sm-repo__body { min-width: 0; }
.sm-repo__body b { font-family: 'Montserrat', sans-serif; font-size: .95rem; }
.sm-repo__body p { font-size: .84rem; color: var(--text-secondary); line-height: 1.55; margin: .25rem 0 .6rem; }
.sm-repo__links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.sm-repo__links a { font-size: .8rem; font-weight: 600; color: var(--accent-color); text-decoration: none; }
.sm-repo__links a:hover { text-decoration: underline; }

/* ── Lettura della pagina: miniatura, numeri e aree in un blocco solo ── */
.cf-read { border: 1px solid var(--border-color); border-radius: 14px; padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.1rem; }
.cf-read__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.cf-read__head h4 { font-family: 'Montserrat', sans-serif; font-size: .95rem; margin: 0; }
.cf-read__n { font-size: .72rem; color: var(--text-secondary); }
.cf-read__body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }

.cf-read__page { position: relative; min-height: 300px; border-radius: 10px; border: 1px solid var(--border-color); overflow: hidden; background: #0d1219; cursor: crosshair; }
.cf-bandx { position: absolute; left: 0; right: 0; transition: filter .12s; }
.cf-bandx.is-on { filter: brightness(1.6); outline: 1px solid #fff2c8; outline-offset: -1px; }
.cf-read__edge { position: absolute; left: 0; right: 0; top: 5px; text-align: center; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.45); pointer-events: none; z-index: 3; }
.cf-read__edge--end { top: auto; bottom: 5px; }
.cf-secmark { position: absolute; left: 5px; right: 5px; font-size: .56rem; color: rgba(255,255,255,.82); pointer-events: none; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,.9); border-top: 1px dashed rgba(255,255,255,.25); padding-top: 1px; }

.cf-read__side { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.cf-read__live { min-height: 4.4rem; }
.cf-read__big { display: block; font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--accent-color); }
.cf-read__cap { display: block; font-size: .8rem; color: var(--text-secondary); line-height: 1.45; margin-top: .3rem; }
.cf-read__sub { display: block; font-size: .72rem; color: var(--text-secondary); opacity: .75; margin-top: .15rem; }
.cf-read__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cf-read__stats div { border: 1px solid var(--border-color); border-radius: 10px; padding: .55rem .6rem; min-width: 0; }
.cf-read__stats b { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 800; line-height: 1; }
.cf-read__stats span { display: block; font-size: .68rem; color: var(--text-secondary); margin-top: .25rem; line-height: 1.3; }
.cf-read__secs { margin-top: .1rem; }
.cf-read__note { font-size: .74rem; color: var(--text-secondary); line-height: 1.55; margin: .9rem 0 0; }
@media (max-width: 640px) {
    .cf-read__body { grid-template-columns: 96px minmax(0, 1fr); gap: .8rem; }
    .cf-read__page { min-height: 240px; }
    .cf-read__stats { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
}

.analytics-recount-note { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--border-color); border-left: 3px solid var(--accent-color); border-radius: 10px; padding: .85rem 1rem; margin-bottom: 1.2rem; background: rgba(255,255,255,.02); }
.analytics-recount-note svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: .12rem; color: var(--accent-color); }
.analytics-recount-note p { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--text-secondary); }
.analytics-recount-note b { color: var(--text-primary); font-weight: 700; }

/* ── Togliere una foto: comando sempre visibile, esito dichiarato, ripensamento possibile ── */
.editor-media-remove {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .32rem .6rem; border-radius: 999px;
    background: rgba(12, 16, 24, .82); border: 1px solid rgba(255, 255, 255, .22);
    color: #fff; font-size: .72rem; font-weight: 700; cursor: pointer;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .18s, border-color .18s;
}
.editor-media-remove:hover { background: rgba(229, 62, 62, .85); border-color: rgba(229, 62, 62, .95); }
.editor-media-remove input[type="checkbox"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.editor-media-remove:focus-within { outline: 2px solid var(--accent-color); outline-offset: 2px; }

.editor-media-marked {
    position: absolute; inset: auto 0 0 0; z-index: 3; display: none;
    align-items: center; justify-content: space-between; gap: .6rem;
    padding: .5rem .7rem; background: rgba(229, 62, 62, .92); color: #fff;
    font-size: .72rem; font-weight: 600; line-height: 1.3;
}
.editor-media-undo {
    flex: none; border: 1px solid rgba(255, 255, 255, .6); background: transparent;
    color: #fff; font-family: inherit; font-size: .7rem; font-weight: 700;
    padding: .25rem .6rem; border-radius: 6px; cursor: pointer; transition: background .18s;
}
.editor-media-undo:hover { background: rgba(255, 255, 255, .2); }
.editor-media-card--marked .editor-media-marked { display: flex; }
.editor-media-card--marked .editor-media-remove { display: none; }
.editor-media-card--marked .editor-media-card-preview img { filter: grayscale(1); opacity: .45; }

/* ── Profilo: lo stato della tessera vive nell'intestazione ── */
.news-hero-stat-val--text { font-size: 1rem !important; font-weight: 700; letter-spacing: 0; }
.news-hero-stat-val .dash-badge { font-size: .78rem; }
.news-hero-grace { margin: .9rem 0 0; font-size: .82rem; color: #f0b429; }

/* ── Pulsante d'azione flottante ────────────────────────────────────────────
   Geometria, ombre, ventaglio, sfondo che si espande ed effetto ondulato
   vengono dal componente ufficiale, in static/css/vendor/materialize-fab.css,
   ricopiato dal sorgente sass/components/_buttons.scss. Qui non si corregge
   niente di quello: si aggiunge solo cio' che il componente non puo' sapere,
   cioe' i nostri colori e le etichette accanto alle voci.

   In particolare non si tocca lo z-index: il componente sceglie 997, e
   abbassarlo lo farebbe finire sotto altri pezzi della pagina. */

/* Materialize colora i cerchi con le sue classi di tavolozza (red, blue...).
   Le nostre sono variabili, e i cerchi le prendono da qui. Lo sfondo che si
   espande all'apertura va tinto insieme, altrimenti resta del colore
   predefinito della libreria. */
.profile-fab .btn-floating { background-color: var(--secondary-bg); color: var(--text-secondary); }
.profile-fab .btn-floating:hover { background-color: var(--accent-color); color: var(--text-on-accent); }
.profile-fab .btn-floating.btn-large,
.profile-fab .fab-backdrop { background-color: var(--accent-color); }
.profile-fab .btn-floating.btn-large { color: var(--text-on-accent); }
.profile-fab .btn-floating.btn-large:hover { background-color: var(--accent-color); filter: brightness(1.08); }
.profile-fab .btn-floating:focus { background-color: var(--accent-color); }
.profile-fab .btn-floating:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; }

/* Il componente centra l'icona con l'altezza di riga, perche' si aspetta il
   carattere Material Icons dove il glifo riempie il quadrato. Le nostre sono
   figure disegnate, e l'altezza di riga non le centra: serve dirlo esplicitamente.
   Larghezza, altezza e forma restano quelle del componente. */
/* inline-flex e non flex: il componente allinea le voci con text-align sulla
   lista, e un elemento di blocco romperebbe quella centratura. */
.profile-fab .btn-floating { display: inline-flex; align-items: center; justify-content: center; }
.profile-fab .btn-floating svg { display: block; }

/* Materialize toglie i segni di elenco nel suo foglio globale, che qui non
   c'e': senza questo ogni voce si porta dietro il pallino e la rientranza,
   e i cerchi risultano spostati. */
.profile-fab ul { list-style: none; margin: 0; padding: 0; }
.profile-fab ul li { list-style: none; }

/* I tre punti diventano una croce a ventaglio aperto: lo stesso cerchio apre
   e chiude, e conviene che si veda. */
.profile-fab .fab-dots { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.profile-fab.active .fab-dots { transform: rotate(90deg); }

/* Materialize non prevede etichette accanto alle voci, e due cerchi con
   un'icona ciascuno non dicono cosa fanno. L'etichetta e' posizionata in
   assoluto a sinistra del cerchio, cosi' la geometria della lista resta
   quella del componente: centratura, margini e altezze non si toccano. */
.profile-fab ul li { position: relative; }
.fab-label { position: absolute; right: 56px; top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; background: var(--secondary-bg); border: 1px solid var(--border-color); color: var(--text-primary); font-size: .78rem; font-weight: 600; line-height: 1.4; padding: .3rem .65rem; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.profile-fab.active .fab-label { opacity: 1; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
    .profile-fab .fab-dots, .fab-label { transition: none; }
}

/* ── Invito a completare la scheda dell'espositore ──
   Sta in cima alla dashboard perche' finche' la scheda e' incompleta la
   realta' non compare fra gli espositori dell'evento, e chi e' entrato
   accettando uno stand torna qui a ogni accesso. */
.dash-finish { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    border: 1px solid rgba(240, 180, 41, .45); background: rgba(240, 180, 41, .08);
    border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; }
.dash-finish__body { flex: 1 1 300px; min-width: 0; }
.dash-finish h3 { margin: 0 0 .3rem; font-family: 'Montserrat', sans-serif; font-size: 1.02rem; color: var(--text-primary); }
.dash-finish p { margin: 0; font-size: .85rem; color: var(--text-secondary); line-height: 1.5; }
.dash-finish__missing { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .82rem; color: #f0b429; line-height: 1.6; }
.dash-finish__go { flex: 0 0 auto; margin: 0; }
@media (max-width: 560px) { .dash-finish__go { width: 100%; text-align: center; } }

/* ── Nota sotto un campo file ──
   Dice quanto pesa quello che si sta caricando, se e' stato rimpicciolito e
   quando supera il limite. Prima l'unico riscontro era un 413 di nginx a
   trasferimento finito, senza il sito attorno. */
.upload-note { margin: .35rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--text-secondary); }
.upload-note--bad { color: #E5484D; font-weight: 600; }

/* ── Griglia con pochi elementi ──
   auto-fit con 1fr distribuisce le colonne su tutta la larghezza: una
   categoria con un partner solo produceva una scheda larga quanto la pagina, e
   due ne producevano due da mezza pagina. Fino a due elementi si centrano alla
   loro larghezza naturale; da tre in su la griglia torna fluida e va a capo. */
.card-grid--few {
    grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
    justify-content: center;
}

/* La targhetta del tipo, che il partner ha e la venture no. */
.venture-card-badge {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: .18rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, .04);
    color: var(--text-secondary);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ── Gobbo del podcast (#615) ──
   Non e' una presentazione per il pubblico: e' lo strumento di chi conduce,
   guardato di sfuggita mentre parla. Quindi fondo nero, una domanda per volta
   grande abbastanza da leggersi con la coda dell'occhio, e niente altro. */
body.pp-open { overflow: hidden; }

.pp {
    position: fixed; inset: 0; z-index: 4000;
    background: #000; color: #fff;
    display: flex; flex-direction: column;
    padding: max(1.4rem, env(safe-area-inset-top)) 1.4rem max(1.4rem, env(safe-area-inset-bottom));
    touch-action: pan-y;
}
.pp:focus { outline: none; }
/* L'attributo `hidden` deve poter nascondere davvero (#660).
   `display:flex` scritto qui vince sulla regola del browser che nasconde gli
   elementi con `hidden`: il gobbo restava sopra tutto, uno schermo nero. Non si
   vedeva perche' veniva reso solo per chi aveva domande assegnate — e con
   l'assegnazione a mano non ne aveva nessuno. La riga sbagliata era li' da
   prima, protetta da un dato che non c'era. */
.pp[hidden] { display: none; }

.pp-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none; }
.pp-bar__who { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-bar__count { font-size: .8rem; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; flex: none; }
.pp-x {
    background: none; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7);
    width: 38px; height: 38px; border-radius: 50%; font-size: 1.2rem; line-height: 1;
    cursor: pointer; flex: none;
}
.pp-x:hover { border-color: #fff; color: #fff; }

.pp-track { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; }
.pp-card {
    grid-area: 1 / 1; max-width: 22ch; text-align: center;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
    font-size: clamp(1.9rem, 7vw, 4.6rem); line-height: 1.12; letter-spacing: -.02em;
    opacity: 0; visibility: hidden; transition: opacity .18s ease;
}
.pp-card.is-current { opacity: 1; visibility: visible; }
.pp-track--in .pp-card.is-current { animation: pp-rise .28s ease both; }
@keyframes pp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pp-nav { flex: none; display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.pp-nav button {
    background: none; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75);
    width: 54px; height: 54px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.pp-nav button:hover { border-color: #fff; color: #fff; }
.pp--first [data-prompter-prev], .pp--last [data-prompter-next] { opacity: .25; pointer-events: none; }
.pp-hint { flex: none; text-align: center; font-size: .72rem; color: rgba(255,255,255,.3); margin-top: .7rem; }
@media (max-width: 720px) { .pp-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .pp-card, .pp-track--in .pp-card.is-current { transition: none; animation: none; }
}

/* ── Barra di avanzamento di una pipeline di onboarding (#619) ──
   Condivisa fra l'elenco delle pipeline, la scheda del centro di revisione e
   la scheda dell'organizzazione: erano tre posti che mostrano la stessa cosa. */
.pl-bar { margin: .75rem 0 0; }
.pl-bar__track {
    display: flex; gap: 3px; height: 6px; border-radius: 999px; overflow: hidden;
}
.pl-tick {
    flex: 1 1 0; min-width: 0; border-radius: 999px;
    background: var(--border-color);
}
.pl-tick--done { background: var(--accent-color); }
/* La tappa di adesso e' piena a meta': si vede che e' cominciata e non finita. */
.pl-tick--current {
    background: linear-gradient(90deg, #F5A623 0 55%, rgba(245,166,35,.22) 55% 100%);
}
.pl-bar--done .pl-tick--done { background: var(--accent-color); }

.pl-bar__say {
    display: flex; align-items: baseline; gap: .5rem;
    margin-top: .45rem; min-width: 0;
}
.pl-bar__n {
    font-size: .74rem; font-weight: 800; letter-spacing: .04em;
    font-variant-numeric: tabular-nums; color: #F5A623; flex: none;
}
.pl-bar--done .pl-bar__n { color: var(--accent-color); }
.pl-bar__now {
    font-size: .8rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.pl-bar__why {
    margin: .25rem 0 0; font-size: .76rem; line-height: 1.4;
    color: var(--text-secondary);
}

/* ── Griglia delle pipeline: tre per riga, e non di piu' ──
   auto-fit avrebbe messo quattro schede strette sui monitor larghi, e una
   scheda di venture sotto una certa larghezza smette di mostrare la copertina
   per quello che e'. */
.pipeline-grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) { .pipeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .pipeline-grid { grid-template-columns: minmax(0, 1fr); } }

/* Una o due schede non si stirano per riempire tre colonne: si mettono al
   centro alla loro larghezza. Stessa regola della pagina Ventures, dove una
   venture sola restava incollata a sinistra con due buchi accanto. */
.pipeline-grid--few {
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    justify-content: center;
}

/* La scheda con la barra: il piede cresce, quindi la scheda deve poter crescere
   con lui invece di tagliare il testo. */
.venture-card--pipeline { display: flex; flex-direction: column; }
.venture-card--pipeline .venture-card-footer { flex: 1 1 auto; display: flex; flex-direction: column; }
.venture-card--pipeline .pl-bar { margin-top: auto; padding-top: .8rem; }
.venture-card__stuck {
    font-size: .72rem; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; margin-top: .35rem;
}
.venture-card__stuck--long { color: #F5A623; font-weight: 700; }

/* I recapiti nel piede di una scheda con pipeline (#620).
   Stanno sopra il velo che rende cliccabile tutta la scheda, altrimenti il
   numero non si potrebbe toccare: una scheda che ti dice chi chiamare e non
   ti lascia chiamare e' peggio che non dirtelo. */
.venture-card__reach {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center;
    margin-top: .5rem; padding-top: .5rem;
    border-top: 1px solid var(--border-color);
    font-size: .76rem;
}
.venture-card__tel {
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--accent-color); text-decoration: none; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.venture-card__tel:hover { text-decoration: underline; }
.venture-card__mail {
    color: var(--text-secondary); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.venture-card__mail:hover { color: var(--accent-color); }

/* Un numero da toccare, ovunque compaia nella dashboard (#620). */
.hub-tel {
    color: var(--accent-color); text-decoration: none; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hub-tel:hover { text-decoration: underline; }

/* ── La scala dei livelli di un profilo (#622) ──
   Solo nelle pagine in cui guardiamo noi. Il colore va dal rosso al verde
   acqua passando per l'ambra, ma il numero resta leggibile da solo: il colore
   conferma, non informa. */
.lv-chip {
    display: inline-flex; align-items: baseline; gap: 1px;
    padding: .12rem .5rem; border-radius: 999px;
    border: 1px solid var(--border-color); background: var(--primary-bg);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lv-chip__n { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .92rem; line-height: 1; }
.lv-chip__of { font-size: .68rem; color: var(--text-secondary); }
.lv-chip--0 { border-color: rgba(229,72,77,.4); }
.lv-chip--0 .lv-chip__n { color: #E5484D; }
.lv-chip--1 { border-color: rgba(245,166,35,.45); }
.lv-chip--1 .lv-chip__n { color: #F5A623; }
.lv-chip--2 { border-color: rgba(34,211,238,.45); }
.lv-chip--2 .lv-chip__n { color: #22D3EE; }
.lv-chip--3, .lv-chip--4 { border-color: rgba(var(--accent-color-rgb),.45); }
.lv-chip--3 .lv-chip__n, .lv-chip--4 .lv-chip__n { color: var(--accent-color); }
.lv-need { font-size: .76rem; color: var(--text-secondary); margin-left: .45rem; }

.lv-ladder { display: flex; flex-direction: column; gap: .1rem; }
.lv-step {
    display: flex; gap: .8rem; align-items: flex-start;
    padding: .6rem 0; border-bottom: 1px solid var(--border-color);
}
.lv-step:last-child { border-bottom: 0; }
.lv-step__n {
    width: 26px; height: 26px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .8rem;
    border: 1px solid var(--border-color); color: var(--text-secondary);
}
.lv-step--done .lv-step__n {
    border-color: rgba(var(--accent-color-rgb),.45);
    background: rgba(var(--accent-color-rgb),.12); color: var(--accent-color);
}
.lv-step--now .lv-step__n { border-color: rgba(245,166,35,.5); color: #F5A623; }
.lv-step__body { min-width: 0; }
.lv-step__t { font-weight: 700; font-size: .92rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.lv-step--done .lv-step__t { color: var(--text-secondary); font-weight: 600; }
.lv-step__ok { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-color); }
.lv-step__now { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #F5A623; }
.lv-step__miss { margin: .15rem 0 0; font-size: .8rem; color: #F5A623; line-height: 1.4; }
.lv-step__say { margin: .15rem 0 0; font-size: .8rem; color: var(--text-secondary); line-height: 1.4; }

/* ============================================================
   Il CTA di un prodotto o servizio (#674)
   ============================================================ */
.offering-cta{ border-top:1px solid rgba(255,255,255,.08); padding-top:.9rem; }
.offering-cta__url, .offering-cta__label{ margin-top:.7rem; }
.offering-cta__note{
    margin:.7rem 0 0; font-size:.8rem; line-height:1.5;
    color:var(--text-muted,#9aa4b2);
    border-left:2px solid rgba(var(--accent-color-rgb),.5); padding-left:.7rem;
}
/* Chiedere e' un gesto diverso dall'uscire verso un altro sito: il pulsante
   che porta al modulo e' pieno, quello che porta altrove resta un link. */
.product-hero__link--ask{
    display:inline-block; margin-top:.3rem; padding:.55rem 1.2rem;
    border-radius:12px; background:var(--accent-color); color:#0a0f18;
    font-family:'Montserrat',sans-serif; font-weight:700;
}
.dob__act--ask{
    border-color:rgba(var(--accent-color-rgb),.55) !important;
    background:rgba(var(--accent-color-rgb),.14);
    color:var(--accent-color) !important; font-weight:700;
}

/* ============================================================
   «La prossima cosa da fare» (#624, #673)
   Il pannello da cui si comincia. Telefono per primo.
   ============================================================ */
.ns{
    border:1px solid rgba(var(--accent-color-rgb),.38); border-radius:16px;
    padding:1.15rem 1.2rem 1.05rem; margin-bottom:1.5rem;
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),.11), transparent 62%);
}
.ns--done{ border-color:rgba(79,191,159,.45);
    background:linear-gradient(180deg, rgba(79,191,159,.1), transparent 62%); }
.ns__eyebrow{
    margin:0; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
    color:var(--text-muted,#9aa4b2);
}
.ns__title{
    font-family:'Montserrat',sans-serif; font-size:1.35rem; line-height:1.2;
    margin:.25rem 0 0; text-wrap:balance;
}
.ns--done .ns__title{ color:#4fbf9f; }

/* Le cose che mancano, una per una: si contano a occhio. */
.ns__need{ list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.ns__need li{
    font-size:.86rem; padding:.28rem .65rem; border-radius:20px;
    border:1px solid rgba(var(--accent-color-rgb),.4);
    background:rgba(var(--accent-color-rgb),.1);
    overflow-wrap:anywhere;
}
.ns__go{
    display:inline-flex; align-items:center; min-height:44px; margin-top:.9rem;
    padding:.55rem 1.15rem; border-radius:12px; text-decoration:none;
    background:var(--accent-color); color:#0a0f18;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:.92rem;
}
.ns__go:hover{ filter:brightness(1.07); color:#0a0f18; }
.ns__why{
    margin:.85rem 0 0; font-size:.86rem; line-height:1.55;
    color:var(--text-muted,#9aa4b2); max-width:58ch;
}

/* I passi: una fila, non un elenco. Quello fatto e' spento, quello attuale
   acceso, gli altri quieti — sapere dove si va a finire e' diverso
   dall'essere incalzati. */
.ns__rail{
    list-style:none; margin:1.1rem 0 0; padding:.9rem 0 0; display:flex;
    flex-wrap:wrap; gap:.35rem 1rem;
    border-top:1px solid rgba(255,255,255,.09);
}
.ns__step{ display:flex; align-items:center; gap:.4rem; font-size:.8rem;
    color:var(--text-muted,#9aa4b2); }
.ns__dot{
    width:16px; height:16px; border-radius:50%; flex:none;
    border:1px solid rgba(255,255,255,.22);
    display:inline-flex; align-items:center; justify-content:center;
}
.ns__step.is-done{ color:rgba(255,255,255,.55); }
.ns__step.is-done .ns__dot{ border-color:#4fbf9f; color:#4fbf9f; }
.ns__step.is-now{ color:var(--text-primary,#e8eef6); font-weight:600; }
.ns__step.is-now .ns__dot{ border-color:var(--accent-color); background:rgba(var(--accent-color-rgb),.28); }

@media (max-width:520px){
    .ns__title{ font-size:1.2rem; }
    .ns__go{ width:100%; justify-content:center; }
}

/* I passi successivi si vedono ma non incalzano: sapere dove si va a finire
   e' diverso dall'essere spinti. */
.ns__rest {
    list-style: none; margin: 1.1rem 0 0; padding: .9rem 0 0;
    border-top: 1px solid var(--border-color);
    display: flex; flex-wrap: wrap; gap: .35rem 1.3rem;
}
.ns__step { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--text-secondary); }
.ns__mark {
    width: 16px; height: 16px; border-radius: 50%; flex: none;
    border: 1px solid var(--border-color); display: grid; place-items: center;
}
.ns__step--done .ns__mark { border-color: rgba(var(--accent-color-rgb),.5); color: var(--accent-color); }
.ns__step--done .ns__label { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.ns__step--now .ns__mark { border-color: rgba(245,166,35,.6); }
.ns__step--now .ns__label { color: var(--text-primary); font-weight: 700; }
.ns__tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-color); }

.ns--done { border-color: rgba(var(--accent-color-rgb),.35); background: rgba(var(--accent-color-rgb),.06); }
.ns--done .ns__head strong { color: var(--accent-color); font-size: 1rem; text-transform: none; letter-spacing: 0; }

/* =========================================================================
   La console di partner e venture, rifatta (#675)
   Tre cose: salvare, caricare un'immagine, respirare.
   Sta in fondo di proposito — riscrive regole scritte in cinque momenti
   diversi, e la cascata e' l'unico posto dove quella storia si ricompone.
   ========================================================================= */

/* ── 1. Salvare ──────────────────────────────────────────────────────────
   Salva aveva perso il suo nome: restava un dischetto, che riconosce chi ha
   visto un floppy. Chi cura la pagina di una bottega spesso no. */
.console-quick { padding: .85rem; gap: .5rem; }
.console-qbtn { height: 44px; }
.console-qbtn--save { flex: 3 1 auto; gap: .5rem; font-weight: 700; font-size: .95rem; }
.console-qbtn--exit { flex: 0 0 46px; }
.console-qbtn__t { font-family: var(--font-headings); letter-spacing: .01em; }
.console-quick__hint { font-size: .78rem; }
/* Lo stato dice la verita' in entrambi i versi: senza il caso «tutto salvato»
   la riga restava vuota e non si capiva se il vuoto fosse un'assenza o una
   risposta. */
.console-quick:not(.is-dirty) .console-quick__hint { opacity: .75; }
.console-quick.is-dirty .console-quick__hint::before { content: '● '; }

@media (max-width: 991px) {
    /* Da telefono la colonna sta in cima e scorre via: per salvare si
       risaliva tutta la pagina. La barra si incolla in fondo, dove arriva il
       pollice, e lascia respirare il fondo del modulo. */
    .console-quick {
        position: fixed; left: 12px; right: 12px; bottom: 0; z-index: 40;
        margin: 0 0 max(10px, env(safe-area-inset-bottom));
        flex-direction: column;
        box-shadow: 0 -6px 26px rgba(0, 0, 0, .38);
    }
    .console-quick__row { width: 100%; }
    .console-quick__hint { text-align: center; }
    .console-side { margin-bottom: 0; }
    .console-form-col { padding-bottom: 110px; }
}

/* ── 2. Caricare un'immagine ─────────────────────────────────────────────
   Un solo modo, uguale ovunque. L'anteprima ha la forma di quello che
   l'immagine diventera' — quadrata il logo, larga la fascia, 4:3 la foto di
   un prodotto — cosi' si vede subito cosa verra' tagliato. */
.mup { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.mup__lab {
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-secondary);
}
.mup__tile {
    position: relative; display: block; overflow: hidden; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 12px;
    background: rgba(var(--primary-bg-rgb), .5);
    transition: border-color .18s, box-shadow .18s;
}
.mup--photo .mup__tile { aspect-ratio: 4 / 3; }
.mup--wide .mup__tile { aspect-ratio: 16 / 9; }
.mup--square .mup__tile { aspect-ratio: 1 / 1; max-width: 160px; }
.mup__tile:hover { border-color: rgba(var(--accent-color-rgb), .5); }
.mup__tile:focus-within { box-shadow: 0 0 0 2px var(--accent-color); }
/* L'immagine intera, mai tagliata: qui si sta decidendo se va bene, e una
   copertina giudicata su meta' inquadratura si sceglie male (vedi #640). */
.mup__tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mup__none {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; color: var(--text-secondary); opacity: .5;
}
.mup__btn {
    position: absolute; right: .5rem; bottom: .5rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .7rem; border-radius: 9px; font-size: .76rem; font-weight: 600;
    background: rgba(10, 15, 24, .72); color: #fff;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mup__tile:hover .mup__btn { background: var(--accent-color); color: var(--text-on-accent); }
/* Il campo file resta raggiungibile da tastiera ma non si vede: la piastrella
   e' il comando. */
.mup__tile input[type="file"] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
    cursor: pointer;
}
.mup__file {
    font-size: .75rem; color: var(--accent-color); min-height: 1em;
    overflow-wrap: anywhere;
}
.offering-item__media { gap: 1rem; }

/* ── 3. Sezioni dentro i gruppi (#705 redesign) ──────────────────────────
   Ogni fieldset dentro un cg e' una card a se': sfondo, bordo accent,
   raggio, padding. Il gruppo li contiene; i fieldset danno struttura. */
.console-form .form-fieldset {
    background: rgba(26, 32, 44, .5);
    border: 1px solid rgba(var(--accent-color-rgb), .12);
    border-radius: 14px;
    padding: 1.4rem 1.5rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.cg .form-fieldset {
    background: rgba(26, 32, 44, .35);
    border: 1px solid rgba(var(--accent-color-rgb), .08);
    border-radius: 12px;
    padding: 1.2rem 1.3rem 1.3rem;
    margin-bottom: 1rem;
}
.cg .form-fieldset + .form-fieldset {
    margin-top: .25rem;
}
.cg .form-fieldset > legend,
.console-form .form-fieldset > legend {
    font-family: var(--font-headings, 'Montserrat', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-color);
    padding: 0 0 .5rem;
    margin-bottom: .8rem;
    border-bottom: 1px solid rgba(var(--accent-color-rgb), .15);
    width: 100%;
    letter-spacing: .01em;
}
.console-form .form-group { margin-bottom: 1.1rem; }
.console-form .form-group:last-child { margin-bottom: 0; }
.console-form .form-group > label {
    font-size: .84rem; font-weight: 600;
    color: var(--text-secondary, #b8c0cc);
    margin-bottom: .35rem; display: block;
}
.console-form .field-help,
.console-form .form-hint {
    display: block; margin-top: .3rem; font-size: .78rem; line-height: 1.5;
    color: var(--text-secondary);
}

@media (max-width: 700px) {
    .console-layout { padding: 1.25rem 14px 0; }
    .console-form .form-fieldset { padding: 1rem; }
    .cg .form-fieldset { padding: 0 0 .25rem; }
    /* Due caricamenti affiancati su 360 pixel sono due francobolli. */
    .offering-item__media { grid-template-columns: 1fr; }
    .offering-item { padding: 1rem; }
    .offering-item__head { grid-template-columns: auto 1fr; gap: .6rem; }
    .offering-item__head .offering-item__price { grid-column: 2; }
}

/* La galleria di una venture ha un suo riquadro, nato prima (#640): non lo
   rifacciamo, ma il comando dentro deve appartenere alla stessa famiglia di
   quelli nuovi, o la pagina continua a sembrare fatta da due persone. */
.editor-media-replace-btn {
    padding: .4rem .7rem; border-radius: 9px; font-size: .76rem;
    background: rgba(10, 15, 24, .55); color: var(--text-primary);
}
.editor-media-replace-btn:hover {
    background: var(--accent-color); color: var(--text-on-accent);
    border-color: var(--accent-color);
}

/* Una scheda del team che non porta da nessuna parte non deve nemmeno
   sembrare premibile (#676): resta la persona, sparisce l'invito. */
.vteam-card--flat { cursor: default; }
.vteam-card--flat:hover { transform: none; box-shadow: none; }

/* Il pulsante che rimanda il link di accesso, nella scheda della pipeline
   (#680). Sopra il velo che copre la scheda, o non si potrebbe premere. */
.venture-card__relink{ position:relative; z-index:3; margin:.6rem 0 0;
    display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.vc-relink{
    display:inline-flex; align-items:center; gap:.35rem; cursor:pointer;
    min-height:36px; padding:.35rem .75rem; border-radius:9px; font-size:.78rem;
    border:1px solid rgba(var(--accent-color-rgb),.45);
    background:rgba(var(--accent-color-rgb),.1); color:var(--accent-color);
    font-family:inherit;
}
.vc-relink:hover{ background:var(--accent-color); color:var(--text-on-accent); }
.vc-relink__when{ font-size:.72rem; color:var(--text-secondary); }

/* «Il logo va da un'altra parte» (#681): il consiglio sta accanto alla foto,
   dov'e' nato l'equivoco, non in fondo alla pagina. */
.pe-logo-hint{
    margin-top:1rem; padding:.85rem 1rem; border-radius:12px;
    border:1px solid rgba(var(--accent-color-rgb),.35);
    background:rgba(var(--accent-color-rgb),.07);
}
.pe-logo-hint__t{ margin:0 0 .4rem; font-size:.86rem; font-weight:600; }
.pe-logo-hint__r{ margin:.35rem 0 0; font-size:.85rem; line-height:1.6;
    display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.pe-logo-hint__b{
    cursor:pointer; font:inherit; font-size:.8rem; font-weight:600;
    min-height:38px; padding:.35rem .8rem; border-radius:9px;
    border:0; background:var(--accent-color); color:var(--text-on-accent);
}
.pe-logo-hint__b:hover{ filter:brightness(1.07); }
.pe-logo-hint__a{ font-size:.8rem; color:var(--text-secondary); text-decoration:none; }
.pe-logo-hint__a:hover{ color:var(--accent-color); }
@media (max-width:520px){ .pe-logo-hint__b{ width:100%; } }

/* Perche' un espositore non e' in vetrina, uno per uno (#684). */
.exb-why{ list-style:none; margin:.35rem 0 0; padding:0 0 0 1.2rem;
    font-size:.82rem; line-height:1.7; color:var(--text-secondary); }
.exb-why strong{ color:var(--text-primary); font-weight:600; }

/* La copertina di un articolo tiene la forma del file caricato (#690): niente
   bande vuote ai lati, niente soggetto spostato. I limiti restano, perche' una
   copertina quadrata non deve prendersi tutto lo schermo di un telefono. */
.article-hero-section .venture-cover-image--fitted{
    height: auto;
    max-height: 62vh;
    min-height: 0;
}
.article-hero-section .venture-cover-image--fitted img{
    /* Con la cornice della forma giusta, `cover` e `contain` coincidono: si
       tiene `contain` perche' e' la regola dichiarata — l'immagine intera,
       sempre — e perche' un arrotondamento di un pixel non deve tagliare. */
    object-fit: contain;
}
@media (max-width: 700px){
    .article-hero-section .venture-cover-image--fitted{ max-height: 46vh; }
}

/* Le tre scelte del CTA, visibili tutte e tre (#691). Erano dentro una tendina
   che di suo diceva «Nessun invito»: chi compilava non sapeva nemmeno che il
   modulo per ricevere richieste esistesse. */
.offering-cta__q{ font-size:.78rem !important; }
.offering-cta__opts ul{ list-style:none; margin:0; padding:0;
    display:grid; gap:.4rem; }
@media (min-width:640px){ .offering-cta__opts ul{ grid-template-columns:repeat(2,1fr); } }
.offering-cta__opts li{ margin:0; }
.offering-cta__opts label{
    display:flex; align-items:flex-start; gap:.5rem; cursor:pointer;
    padding:.55rem .7rem; border-radius:11px; font-size:.84rem !important;
    text-transform:none !important; letter-spacing:0 !important;
    font-weight:500 !important; color:var(--text-primary) !important;
    border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.02);
    transition:border-color .16s, background .16s;
    margin-bottom:0 !important;
}
.offering-cta__opts label:hover{ border-color:rgba(var(--accent-color-rgb),.45); }
.offering-cta__opts input[type="radio"]{ margin-top:.15rem; flex:none; accent-color:var(--accent-color); }
.offering-cta__opts input[type="radio"]:checked + span,
.offering-cta__opts label:has(input:checked){
    border-color:var(--accent-color); background:rgba(var(--accent-color-rgb),.1);
}
.offering-cta__hint{ margin:.5rem 0 0; font-size:.78rem; line-height:1.5;
    color:var(--text-secondary); }

/* La seconda riga del nome, per chi ha un nome lungo (#693): piu' piccola, non
   sussurrata — fa parte del nome, non e' una didascalia. */
.vetrina-hero__sub{
    display:block; margin-top:.15rem;
    font-size:.46em; font-weight:600; letter-spacing:0;
    line-height:1.15; opacity:.92;
}

/* Il suggerimento su come spezzare un nome lungo (#693). */
.hero-split__hint{ flex-basis:100%; margin:.2rem 0 0; font-size:.8rem;
    color:var(--text-secondary); line-height:1.5; }
.hero-split__use{
    cursor:pointer; font:inherit; font-size:.78rem; font-weight:600;
    margin-left:.3rem; padding:.2rem .6rem; border-radius:8px;
    border:1px solid rgba(var(--accent-color-rgb),.45);
    background:rgba(var(--accent-color-rgb),.1); color:var(--accent-color);
}
.hero-split__use:hover{ background:var(--accent-color); color:var(--text-on-accent); }

/* La galleria: piu' foto insieme, con l'anteprima subito (#695). */
.gal-msg{
    margin:.2rem 0 .8rem; font-size:.82rem; line-height:1.5;
    color:var(--accent-color);
}
.gal-msg.is-bad{ color:#e0a24f; }
.gal-drag{ margin-left:.6rem; font-size:.8rem; color:var(--text-secondary); }
.editor-media-grid.is-drop{
    outline:2px dashed var(--accent-color); outline-offset:6px; border-radius:14px;
}
/* L'anteprima della foto appena scelta: la scheda smette di essere un
   rettangolo grigio prima ancora del salvataggio. */
.editor-media-card-dropzone.has-preview{
    background-size:cover; background-position:center; color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.8); border-style:solid;
    border-color:rgba(var(--accent-color-rgb),.55);
}
.editor-media-card-dropzone.has-preview svg{ display:none; }
.editor-media-card-dropzone.has-preview span{
    background:rgba(10,15,24,.72); padding:.2rem .5rem; border-radius:6px;
    font-size:.72rem; overflow-wrap:anywhere;
}
.editor-media-card{ position:relative; }
.gal-drop{
    position:absolute; top:6px; right:6px; z-index:2; cursor:pointer;
    width:26px; height:26px; padding:0; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.25); color:#fff;
    background:rgba(10,15,24,.72);
}
.gal-drop:hover{ background:#c0392b; border-color:#c0392b; }
.editor-media-card.is-marked{ opacity:.45; }

/* Le fasce di foto e video, in mezzo ai prodotti (#696). Stessa forma delle
   fasce dei prodotti: la pagina resta una sequenza sola, non un collage. */
.product-hero--photo{
    display:block; position:relative; padding:0; overflow:hidden;
    background:var(--pedge,#0a0f18);
}
.product-hero--photo img{
    display:block; width:100%; max-height:78vh;
    /* Intera, mai tagliata: la regola di sempre (#640). */
    object-fit:contain; background:#0a0f18;
}
.product-hero--video{ display:block; padding:0; background:#0a0f18; }
.product-hero__frame{ position:relative; width:100%; aspect-ratio:16/9; }
.product-hero__frame iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
}
.product-hero__cap{
    position:absolute; left:0; right:0; bottom:0; padding:1rem 1.2rem;
    font-size:.9rem; color:#fff;
    background:linear-gradient(0deg, rgba(0,0,0,.72), transparent);
}
.product-hero--video .product-hero__cap{ position:static; background:none;
    color:var(--text-muted,#9aa4b2); }
@media (max-width:700px){
    .product-hero--photo img{ max-height:56vh; }
}

/* ── Relatori: card a tutta altezza, foto piena, footer semitrasparente (#701) ── */
.event-speakers-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:1.25rem;
    max-width:1100px;
    margin:0 auto;
}
.speaker-card{
    position:relative;
    display:block;
    aspect-ratio:3 / 4;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    background:var(--secondary-bg);
    border:1px solid rgba(var(--accent-color-rgb),.2);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.speaker-card:not(.speaker-card--flat):hover{
    transform:translateY(-5px);
    box-shadow:0 20px 44px rgba(0,0,0,.45);
    border-color:rgba(var(--accent-color-rgb),.55);
}
.speaker-card__media{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(160deg, rgba(var(--accent-color-rgb),.18), rgba(0,0,0,.35));
}
.speaker-card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
}
.speaker-card__initials{
    font-family:'Montserrat',sans-serif;
    font-size:3.4rem;
    font-weight:700;
    color:rgba(255,255,255,.85);
    letter-spacing:.04em;
}
.speaker-card__footer{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:1.9rem 1.1rem 1rem;
    background:linear-gradient(0deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.85) 38%,
        rgba(0,0,0,.5) 72%,
        rgba(0,0,0,0) 100%);
    color:#fff;
}
.speaker-card__name{
    font-family:'Montserrat',sans-serif;
    font-size:1.1rem;
    font-weight:700;
    margin:0;
    line-height:1.2;
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.speaker-card__talk{
    margin:.3rem 0 0;
    font-size:.82rem;
    line-height:1.3;
    color:rgba(255,255,255,.9);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.speaker-card--flat{ cursor:default; }
@media (max-width:520px){
    .event-speakers-grid{
        grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
        gap:.85rem;
    }
    .speaker-card__initials{ font-size:2.6rem; }
    .speaker-card__name{ font-size:.98rem; }
}

/* ── Cambio password nel profilo (#702) ── */
.pw-form .form-group{ margin-bottom:.75rem; }
.pw-form label{ display:block; font-size:.82rem; margin-bottom:.25rem; color:var(--text-secondary,#b8c0cc); }
.pw-form .form-input{
    width:100%; padding:.55rem .75rem; font-size:.9rem;
    background:var(--primary-bg,#0e1117); color:var(--text-primary,#fff);
    border:1px solid var(--border-color,#2a2f3a); border-radius:8px;
}
.pw-form .form-input:focus{ border-color:var(--accent-color); outline:none; }
.pw-msg{ margin-top:.6rem; font-size:.82rem; min-height:1.2em; }
.pw-msg--ok{ color:var(--accent-color,#39D3BB); }
.pw-msg--err{ color:#f56565; }

/* ── Console mobile & UI polish (#705) ───────────────────────────────── */

/* 1. form-row nel contesto console: grid a 2 colonne, stacking su mobile */
.console-form .form-row{ display:grid; gap:1rem; }
.console-form .form-row--two{ grid-template-columns:1fr 1fr; }
@media (max-width:640px){
    .console-form .form-row--two{ grid-template-columns:1fr; }
}

/* 2. Gruppi collapsibili: piu' corpo e contrasto */
.cg{
    border-color:rgba(var(--accent-color-rgb),.12);
    background:rgba(26,32,44,.45);
    box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.cg[open]{
    border-color:rgba(var(--accent-color-rgb),.22);
}
.cg__sum{
    min-height:52px;
}
.cg__t{
    font-size:1.05rem;
}

/* 3. Fieldset dentro un gruppo: separatore piu' visibile */
.cg .form-fieldset + .form-fieldset{
    border-top-color:rgba(var(--accent-color-rgb),.1);
}
.cg .form-fieldset legend{
    color:var(--accent-color);
    font-weight:700;
}

/* 4. Touch target >= 44px per i bottoni della sezione */
.ps-save{
    min-height:44px; padding:.55rem 1rem; font-size:.84rem;
    border-radius:10px;
}
.ps-remove{
    width:44px; height:44px; border-radius:10px; font-size:1.4rem;
}

/* 5. Label coerenti dentro la console */
.console-form .form-group > label{
    font-size:.84rem; font-weight:600;
    color:var(--text-secondary,#b8c0cc);
    margin-bottom:.3rem; display:block;
}

/* 6. Team member row: bottoni piu' grandi */
.pt-member__acts .cta-button,
.pt-member__acts button,
.pt-add .cta-button{
    min-height:44px;
}

/* 7. Console form inputs: raggio coerente, bordi accent */
.console-form .form-input,
.console-form input[type="text"],
.console-form input[type="url"],
.console-form input[type="email"],
.console-form input[type="tel"],
.console-form input[type="number"],
.console-form input[type="date"],
.console-form select,
.console-form textarea{
    border-radius:10px;
}
.console-form .form-input:focus,
.console-form input:focus,
.console-form select:focus,
.console-form textarea:focus{
    border-color:var(--accent-color);
    box-shadow:0 0 0 2px rgba(var(--accent-color-rgb),.12);
}

/* 8. Mobile < 640px: spaziature piu' comode */
@media (max-width:640px){
    .cg{ border-radius:12px; margin-bottom:.7rem; }
    .cg__sum{ padding:.8rem .85rem; min-height:48px; }
    .cg__t{ font-size:.95rem; }
    .cg .form-fieldset{ padding-inline:.85rem; }
    .cg .form-fieldset legend{ font-size:.82rem; }
    .ps-section__head{ flex-wrap:wrap; gap:.4rem; }
}

/* 9. Draft/publish banner: stack su mobile */
@media (max-width:640px){
    .partner-draft-banner{ flex-direction:column; gap:.6rem; text-align:center; }
    .partner-draft-banner .cta-button,
    .partner-draft-banner .secondary-cta{ width:100%; min-height:44px; }
}

/* ── Modal richiesta prodotto (#707) ── */
.oiq-field { margin-bottom: .9rem; }
.oiq-field .form-input { width: 100%; margin: .3rem 0 0; }
.oiq-help { display: block; font-size: .78rem; color: var(--text-muted, #9aa4b2); margin-top: .3rem; line-height: 1.5; }
.oiq-err { color: #ff8b8b; font-size: .82rem; margin: .3rem 0 0; }
[data-inquiry-fields] { margin-bottom: .5rem; }

/* ── Modal richiesta prodotto: mobile-friendly (#709) ── */
[data-inquiry-modal] .pe-modal__panel { width: min(460px, 94vw); }
[data-inquiry-modal] .oiq-field { margin-bottom: .8rem; }
[data-inquiry-modal] .form-input { font-size: 16px; padding: .7rem .85rem; }
@media (max-width: 520px) {
    [data-inquiry-modal] .pe-modal { align-items: flex-end; }
    [data-inquiry-modal] .pe-modal__panel {
        width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
    }
    [data-inquiry-modal] .mr-actions { flex-direction: column-reverse; }
    [data-inquiry-modal] .mr-actions > * { width: 100%; min-height: 48px; }
}
.oiq-opt { font-weight: 400; color: var(--text-muted, #9aa4b2); font-size: .82em; }

/* ── Badge richieste ricevute per prodotto in console (#710) ── */
.offering-item__inq {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: .6rem; padding: .35rem .7rem; border-radius: 20px;
    font-size: .8rem; text-decoration: none;
    border: 1px solid var(--border-color); color: var(--text-secondary);
}
.offering-item__inq:hover { border-color: var(--accent-color); color: var(--accent-color); }
.offering-item__inq strong { color: var(--accent-color); }
.offering-item__inq--new {
    border-color: rgba(var(--accent-color-rgb), .5);
    background: rgba(var(--accent-color-rgb), .08);
}

/* ── Richieste ricevute in cima ad Analytics (#710) ── */
.aq-box { }
.aq-list { display: flex; flex-direction: column; gap: .6rem; }
.aq-item { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.02); }
.aq-item--new { border-color: rgba(var(--accent-color-rgb), .45); background: rgba(var(--accent-color-rgb), .05); }
.aq-sum { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.aq-sum::-webkit-details-marker { display: none; }
.aq-sum__name { font-family: 'Montserrat', sans-serif; font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.aq-sum__counts { display: flex; gap: .4rem; flex-wrap: wrap; }
.aq-badge { font-size: .74rem; padding: .18rem .55rem; border-radius: 20px; border: 1px solid var(--border-color); color: var(--text-secondary); white-space: nowrap; }
.aq-badge--new { border-color: transparent; background: var(--accent-color); color: var(--text-on-accent, #06131a); font-weight: 700; }
.aq-chev { flex: 0 0 auto; color: var(--text-muted, #9aa4b2); transition: transform .18s ease; }
.aq-item[open] .aq-chev { transform: rotate(180deg); }
.aq-details { padding: .3rem 1rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
.aq-row { border-top: 1px solid var(--border-color); padding-top: .7rem; }
.aq-row--new { }
.aq-row__head { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.aq-row__who { font-weight: 700; }
.aq-row__kind { font-size: .8rem; color: var(--accent-color); }
.aq-row__when { margin-left: auto; font-size: .76rem; color: var(--text-muted, #9aa4b2); font-variant-numeric: tabular-nums; }
.aq-row__contacts { font-size: .84rem; margin-top: .25rem; }
.aq-row__contacts a { color: var(--accent-color); text-decoration: none; }
.aq-row__msg { margin: .5rem 0 0; font-size: .88rem; line-height: 1.5; border-left: 2px solid var(--border-color); padding-left: .8rem; color: var(--text-secondary); }
.aq-row__status { font-size: .76rem; margin-top: .45rem; }
.aq-row__status--new { color: var(--accent-color); font-weight: 700; }
.aq-row__status--handled, .aq-row__status--closed { color: var(--text-muted, #9aa4b2); }
@media (max-width: 520px) {
    .aq-sum { flex-wrap: wrap; }
    .aq-row__when { margin-left: 0; width: 100%; }
}

/* ── QR code del prodotto nella console (#711) ── */
.offering-qr { margin-top: .7rem; border: 1px solid var(--border-color); border-radius: 12px; background: rgba(255,255,255,.02); }
.offering-qr__sum { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; cursor: pointer; list-style: none; font-size: .88rem; font-weight: 600; }
.offering-qr__sum::-webkit-details-marker { display: none; }
.offering-qr__count { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--accent-color); background: rgba(var(--accent-color-rgb), .1); padding: .15rem .55rem; border-radius: 20px; }
.offering-qr__body { display: flex; gap: 1.1rem; padding: 0 .9rem 1rem; flex-wrap: wrap; align-items: flex-start; }
.offering-qr__img { border-radius: 10px; background: #fff; padding: 6px; flex: 0 0 auto; }
.offering-qr__side { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.offering-qr__side .cta-button-outline { align-self: flex-start; min-height: 40px; }
@media (max-width: 520px) {
    .offering-qr__body { flex-direction: column; }
    .offering-qr__side .cta-button-outline { width: 100%; text-align: center; }
}

/* ── Strumenti evento · Partecipanti mobile-first (#712) ── */
.ep__head { margin-bottom: 1rem; }
.ep__title { margin: 0; font-size: 1.3rem; }
.ep__meta { margin: .25rem 0 0; color: var(--text-muted, #9aa4b2); font-size: .9rem; }
.ep__meta strong { color: var(--accent-color); }
.ep__controls { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ep__search { position: relative; flex: 1 1 220px; display: flex; align-items: center; }
.ep__search svg { position: absolute; left: .7rem; color: var(--text-muted, #9aa4b2); pointer-events: none; }
.ep__search input {
    width: 100%; padding: .7rem .8rem .7rem 2.2rem; font-size: 16px;
    background: var(--primary-bg); color: var(--text-primary, #fff);
    border: 1px solid var(--border-color); border-radius: 12px;
}
.ep__search input:focus { border-color: var(--accent-color); outline: none; }
.ep__filter { flex: 0 0 auto; }
.ep__filter select { min-height: 44px; border-radius: 12px; }
.ep__list { display: flex; flex-direction: column; gap: .55rem; }
.ep-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: .85rem 1rem; border-radius: 14px;
    background: var(--secondary-bg); border: 1px solid var(--border-color);
}
.ep-card--in { border-color: rgba(var(--accent-color-rgb), .45); background: rgba(var(--accent-color-rgb), .05); }
.ep-card__main { min-width: 0; flex: 1 1 auto; }
.ep-card__name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ep-card__contacts { margin-top: .3rem; font-size: .86rem; display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.ep-card__contacts a { color: var(--accent-color); text-decoration: none; overflow-wrap: anywhere; }
.ep-card__phone { font-variant-numeric: tabular-nums; }
.ep-card__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.ep-card__when { font-size: .74rem; color: var(--text-muted, #9aa4b2); white-space: nowrap; }
.ep-tag { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .12rem .45rem; border-radius: 20px; }
.ep-tag--walkin { background: rgba(245,166,35,.15); color: #f5a623; }
.ep-tag--in { background: var(--accent-color); color: var(--text-on-accent, #06131a); }
.ep-consent { font-size: .74rem; white-space: nowrap; padding: .12rem .45rem; border-radius: 20px; border: 1px solid var(--border-color); }
.ep-consent--yes { color: var(--accent-color); border-color: rgba(var(--accent-color-rgb), .4); }
.ep-consent--no { color: var(--text-muted, #9aa4b2); }
.ep__empty, .ep__none { text-align: center; color: var(--text-muted, #9aa4b2); padding: 2rem 1rem; }
@media (max-width: 520px) {
    .ep-card { flex-direction: column; gap: .5rem; }
    .ep-card__side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* =================================================================== */
/* EVENT LIVE / REGIA — mobile-first control dashboard                 */
/* =================================================================== */

/* ── Accreditation gauge ─────────────────────────────────────────── */
.el-gauge {
    border: 1px solid rgba(var(--accent-color-rgb), .3);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: linear-gradient(168deg, rgba(var(--accent-color-rgb), .08) 0%, transparent 60%);
}
.el-gauge__head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .6rem;
}
.el-gauge__big {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--accent-color);
}
.el-gauge__slash {
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--text-muted, #9aa4b2);
}
.el-gauge__label {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #9aa4b2);
}
.el-gauge__track {
    height: 8px;
    border-radius: 999px;
    background: rgba(var(--accent-color-rgb), .12);
    overflow: hidden;
    margin-bottom: .55rem;
}
.el-gauge__bar {
    height: 100%;
    border-radius: 999px;
    background: var(--accent-color);
    transition: width .5s ease;
    min-width: 0;
}
.el-gauge__sub {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--text-muted, #9aa4b2);
    flex-wrap: wrap;
}
.el-gauge__sub b {
    color: var(--text-primary);
    font-weight: 700;
}
.el-gauge__dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--text-muted, #9aa4b2);
    flex-shrink: 0;
}

/* ── "Adesso" / Now card ─────────────────────────────────────────── */
.el-now {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.1rem 1.1rem 1rem;
    margin-bottom: 1rem;
    background: var(--secondary-bg);
    position: relative;
    overflow: hidden;
}
.el-now__tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--accent-color);
    color: var(--text-on-accent, #06131a);
    margin-bottom: .55rem;
    animation: el-pulse-tag 2s ease-in-out infinite;
}
.el-now__tag--next {
    background: rgba(var(--accent-color-rgb), .18);
    color: var(--accent-color);
    animation: none;
}
.el-now__time {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: .2rem;
}
.el-now__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    line-height: 1.25;
}
.el-now__people {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .4rem;
}
.el-now__person {
    font-size: .84rem;
    padding: .15rem .55rem;
    border-radius: 20px;
    background: rgba(var(--accent-color-rgb), .1);
    color: var(--accent-color);
    font-weight: 600;
}
.el-now__interviewer {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
    font-size: .84rem;
    color: var(--text-muted, #9aa4b2);
}
.el-now__empty {
    text-align: center;
    padding: 1.2rem 0;
    color: var(--text-muted, #9aa4b2);
}
.el-now__empty svg {
    display: block;
    margin: 0 auto .6rem;
    opacity: .5;
}
.el-now__empty p {
    margin: 0;
    font-size: .92rem;
    color: var(--text-muted, #9aa4b2);
}

@keyframes el-pulse-tag {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

/* ── Kind badge (reused in now card + runsheet) ──────────────────── */
.el-kind {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .12rem .5rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    color: var(--text-muted, #9aa4b2);
    white-space: nowrap;
    vertical-align: middle;
}
.el-kind--speech { background: rgba(99, 148, 255, .15); color: #7fb0ff; }
.el-kind--podcast { background: rgba(230, 100, 230, .15); color: #d48bd4; }
.el-kind--welcome { background: rgba(var(--accent-color-rgb), .15); color: var(--accent-color); }
.el-kind--closing { background: rgba(245, 166, 35, .15); color: #f5a623; }
.el-kind--custom  { background: rgba(255, 255, 255, .06); color: var(--text-muted, #9aa4b2); }

/* ── Runsheet / Scaletta ─────────────────────────────────────────── */
.el-runsheet {
    margin-bottom: 2rem;
}
.el-runsheet__heading {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .8rem;
    color: var(--text-primary);
}
.el-runsheet__heading svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.el-runsheet__empty {
    text-align: center;
    color: var(--text-muted, #9aa4b2);
    padding: 2rem 1rem;
    font-size: .92rem;
}

/* ── Single item row ─────────────────────────────────────────────── */
.el-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .8rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--secondary-bg);
    margin-bottom: .5rem;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

/* Current item — accent glow */
.el-item--current {
    border-color: var(--accent-color);
    background: rgba(var(--accent-color-rgb), .06);
    box-shadow: 0 0 16px rgba(var(--accent-color-rgb), .18), inset 0 0 0 1px rgba(var(--accent-color-rgb), .2);
}

/* Done item — dimmed */
.el-item--done {
    opacity: .55;
    border-color: rgba(var(--accent-color-rgb), .15);
}
.el-item--done .el-item__title {
    text-decoration: line-through;
    text-decoration-color: rgba(var(--accent-color-rgb), .35);
}

/* Time column */
.el-item__left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
}
.el-item__time {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.el-item__dur {
    font-size: .68rem;
    color: var(--text-muted, #9aa4b2);
}

/* Body */
.el-item__body {
    flex: 1 1 auto;
    min-width: 0;
}
.el-item__row1 {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    flex-wrap: wrap;
}
.el-item__title {
    font-weight: 700;
    font-size: .92rem;
    overflow-wrap: anywhere;
}
.el-item__people {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .5rem;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--text-muted, #9aa4b2);
}
.el-item__interviewer {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .15rem;
    font-size: .76rem;
    color: var(--text-muted, #9aa4b2);
}

/* Status tags */
.el-item__live-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .1rem .5rem;
    border-radius: 20px;
    background: var(--accent-color);
    color: var(--text-on-accent, #06131a);
    margin-top: .3rem;
}
.el-item__live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-on-accent, #06131a);
    animation: el-blink 1.2s ease-in-out infinite;
}
@keyframes el-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}
.el-item__done-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-top: .3rem;
}

/* Action buttons */
.el-item__acts {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    align-items: flex-end;
}
.el-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: .5rem .85rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-weight: 700;
    font-size: .82rem;
    font-family: inherit;
    transition: all .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.el-btn:disabled {
    opacity: .45;
    cursor: default;
}
.el-btn--start {
    background: var(--accent-color);
    color: var(--text-on-accent, #06131a);
    border-color: var(--accent-color);
}
.el-btn--start:hover:not(:disabled) {
    background: #30c5ae;
}
.el-btn--done {
    background: rgba(var(--accent-color-rgb), .15);
    color: var(--accent-color);
    border-color: rgba(var(--accent-color-rgb), .3);
}
.el-btn--done:hover:not(:disabled) {
    background: rgba(var(--accent-color-rgb), .25);
}
.el-btn--reset {
    background: transparent;
    color: var(--text-muted, #9aa4b2);
    border-color: rgba(255, 255, 255, .12);
    padding: .5rem;
    min-width: 36px;
    min-height: 36px;
}
.el-btn--reset:hover:not(:disabled) {
    border-color: rgba(245, 166, 35, .5);
    color: #f5a623;
}

/* ── Toast ────────────────────────────────────────────────────────── */
.el-toast {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%) translateY(120%);
    max-width: min(92vw, 420px);
    padding: .7rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: .88rem;
    background: var(--accent-color);
    color: var(--text-on-accent, #06131a);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    transition: transform .28s ease;
    z-index: 1200;
    text-align: center;
}
.el-toast.show {
    transform: translateX(-50%) translateY(0);
}
.el-toast.err {
    background: #E5484D;
    color: #fff;
}
.el-toast.warn {
    background: #F5A623;
}

/* ── Responsive: tablet and up ───────────────────────────────────── */
@media (min-width: 600px) {
    .el-gauge {
        padding: 1.2rem 1.4rem;
    }
    .el-gauge__big {
        font-size: 3rem;
    }
    .el-now {
        padding: 1.3rem 1.4rem 1.1rem;
    }
    .el-now__title {
        font-size: 1.55rem;
    }
    .el-item {
        padding: .85rem 1rem;
    }
}

@media (min-width: 900px) {
    /* On larger screens, limit content width for readability */
    .el-gauge,
    .el-now,
    .el-runsheet {
        max-width: 720px;
    }
}

/* ── Print: hide buttons, keep timeline ──────────────────────────── */
@media print {
    .el-gauge, .el-now, .el-toast { display: none; }
    .el-item__acts { display: none; }
    .el-item--done { opacity: 1; }
}

/* ── Regia link in events dashboard ──────────────────────────────── */
.ev-act--regia {
    width: auto;
    padding: 0 .8rem;
    font-size: .76rem;
    font-weight: 700;
    margin-left: auto;
    background: rgba(230, 100, 230, .12);
    border-color: #d48bd4;
    color: #d48bd4;
}
.ev-act--regia:hover {
    background: rgba(230, 100, 230, .22);
    color: #e0a0e0;
}

/* =================================================================== */
/* REGIA — SPEAKER CHECK-IN (.el-sp*)
/* =================================================================== */
.el-sp {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--secondary-bg);
}
.el-sp__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .7rem;
    flex-wrap: wrap;
}
.el-sp__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.el-sp__title svg {
    color: var(--accent-color);
    flex-shrink: 0;
}
.el-sp__count {
    font-size: .82rem;
    color: var(--text-muted, #9aa4b2);
    white-space: nowrap;
}
.el-sp__count b {
    color: var(--accent-color);
    font-weight: 700;
}

/* ── Speaker row ─────────────────────────────────────────────────── */
.el-sp-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: 12px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    margin-bottom: .35rem;
    transition: background .2s ease, border-color .2s ease;
}
.el-sp-row.is-present {
    background: rgba(var(--accent-color-rgb), .06);
    border-left-color: var(--accent-color);
    border-color: rgba(var(--accent-color-rgb), .15);
    border-left-color: var(--accent-color);
}

/* ── Avatar ──────────────────────────────────────────────────────── */
.el-sp-av {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(var(--accent-color-rgb), .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.el-sp-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.el-sp-av__init {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    color: var(--accent-color);
    line-height: 1;
    user-select: none;
}

/* ── Identity (name + talks) ─────────────────────────────────────── */
.el-sp-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.el-sp-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.el-sp-name a {
    color: inherit;
}
.el-sp-name a:hover {
    color: var(--accent-color);
}
.el-sp-talks {
    font-size: .76rem;
    color: var(--text-muted, #9aa4b2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.el-sp-tag {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .05rem .4rem;
    border-radius: 20px;
    background: rgba(230, 100, 230, .15);
    color: #d48bd4;
    vertical-align: middle;
    margin-left: .2rem;
}

/* ── Toggle button ───────────────────────────────────────────────── */
.el-sp-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: .45rem .7rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted, #9aa4b2);
    font-weight: 700;
    font-size: .74rem;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.el-sp-btn:hover:not(:disabled) {
    border-color: rgba(var(--accent-color-rgb), .4);
    color: var(--accent-color);
}
.el-sp-btn--on {
    background: var(--accent-color);
    color: var(--text-on-accent, #06131a);
    border-color: var(--accent-color);
}
.el-sp-btn--on:hover:not(:disabled) {
    background: #30c5ae;
    color: var(--text-on-accent, #06131a);
}
.el-sp-btn:disabled {
    opacity: .45;
    cursor: default;
}

/* ── Responsive: tablet and up ───────────────────────────────────── */
@media (min-width: 600px) {
    .el-sp {
        padding: 1.2rem 1.4rem;
    }
    .el-sp-av {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }
}
@media (min-width: 900px) {
    .el-sp {
        max-width: 720px;
    }
}
@media print {
    .el-sp-btn { display: none; }
    .el-sp-row.is-present { border-left-color: #333; }
}

/* ── Pulsante «Proietta a schermo» nella Regia (#713) ── */
.el-project {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem; margin-bottom: 1rem; min-height: 44px;
    border-radius: 12px; text-decoration: none; font-weight: 700; font-size: .9rem;
    border: 1px solid rgba(var(--accent-color-rgb), .4);
    background: rgba(var(--accent-color-rgb), .1); color: var(--accent-color);
}
.el-project:hover { background: var(--accent-color); color: var(--text-on-accent, #06131a); }

/* ══════════════════════════════════════════════════════════════════════
   Event tools · UI kit condiviso (.etk-*)  (#717)
   Il linguaggio visivo degli strumenti evento in un posto solo: card,
   titoli, pill, badge, bottoni (touch >=44px), barre e conteggi. Nato dalla
   Regia; da qui in poi i tool nuovi usano queste classi invece di reinventarle.
   Mobile-first, sui token :root del sito.
   ══════════════════════════════════════════════════════════════════════ */
.etk-card{
    background:var(--secondary-bg); border:1px solid var(--border-color);
    border-radius:14px; padding:1rem 1.1rem; margin-bottom:.85rem;
}
.etk-card--accent{ border-color:rgba(var(--accent-color-rgb),.45);
    background:rgba(var(--accent-color-rgb),.05); }
.etk-head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
    margin-bottom:.6rem; }
.etk-title{ font-family:'Montserrat',sans-serif; font-weight:700;
    font-size:1.05rem; margin:0; color:var(--text-primary,#fff); }
.etk-count{ margin-left:auto; font-size:.8rem; color:var(--text-muted,#9aa4b2); }
.etk-count b{ color:var(--accent-color); }

.etk-pill{ font-size:.72rem; font-weight:700; padding:.16rem .55rem;
    border-radius:20px; white-space:nowrap; border:1px solid var(--border-color);
    color:var(--text-secondary,#b8c0cc); }
.etk-pill--accent{ border-color:transparent; background:var(--accent-color);
    color:var(--text-on-accent,#06131a); }
.etk-pill--speech{ background:rgba(90,140,255,.16); color:#9db8ff; border-color:transparent; }
.etk-pill--podcast{ background:rgba(168,120,255,.16); color:#c9a9ff; border-color:transparent; }
.etk-pill--warn{ background:rgba(245,166,35,.16); color:#f5a623; border-color:transparent; }

.etk-badge{ font-size:.66rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; padding:.12rem .45rem; border-radius:20px; }
.etk-badge--done{ background:var(--accent-color); color:var(--text-on-accent,#06131a); }
.etk-badge--warn{ background:rgba(245,166,35,.15); color:#f5a623; }
.etk-badge--muted{ background:rgba(255,255,255,.06); color:var(--text-muted,#9aa4b2); }

.etk-btn{ display:inline-flex; align-items:center; justify-content:center;
    gap:.4rem; min-height:44px; padding:.5rem 1rem; border-radius:10px;
    font-size:.85rem; font-weight:700; cursor:pointer; text-decoration:none;
    border:1px solid var(--border-color); background:transparent;
    color:var(--text-secondary,#b8c0cc); transition:background .18s,border-color .18s,color .18s; }
.etk-btn:hover{ border-color:var(--accent-color); color:var(--accent-color); }
.etk-btn--primary{ background:var(--accent-color); color:var(--text-on-accent,#06131a);
    border-color:transparent; }
.etk-btn--primary:hover{ filter:brightness(1.06); color:var(--text-on-accent,#06131a); }

.etk-bar{ height:6px; border-radius:999px; background:var(--primary-bg); overflow:hidden; }
.etk-bar__fill{ height:100%; background:var(--accent-color); border-radius:999px;
    transition:width .4s ease; }

.etk-search{ position:relative; display:flex; align-items:center; }
.etk-search svg{ position:absolute; left:.7rem; color:var(--text-muted,#9aa4b2);
    pointer-events:none; }
.etk-search input{ width:100%; padding:.7rem .8rem .7rem 2.2rem; font-size:16px;
    background:var(--primary-bg); color:var(--text-primary,#fff);
    border:1px solid var(--border-color); border-radius:12px; }
.etk-search input:focus{ border-color:var(--accent-color); outline:none; }

.etk-empty{ text-align:center; color:var(--text-muted,#9aa4b2); padding:2rem 1rem; }

/* ══════════════════════════════════════════════════════════════════════
   Strumento Accredito — migrato da inline a foglio di stile (#719)
   Stessi selettori .acc-*, comportamento identico; ora centralizzati e
   disponibili sia in pagina piena sia in frammento senza doppioni inline.
   ══════════════════════════════════════════════════════════════════════ */
.acc-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;}
.acc-progress{flex:1 1 100%;height:6px;border-radius:999px;background:var(--secondary-bg);overflow:hidden;}
.acc-progress__bar{height:100%;background:#39D3BB;border-radius:999px;transition:width .4s ease;}
.acc-count{font-size:2.2rem;font-weight:800;line-height:1;}
.acc-count small{font-size:.9rem;font-weight:500;color:var(--text-secondary);}
.acc-tools{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem;}
.acc-tools .form-input{flex:1 1 220px;min-width:0;}
.acc-btn{padding:.55rem 1rem;border-radius:10px;border:1px solid var(--border-color);cursor:pointer;font-weight:700;background:#39D3BB;color:#06131a;}
.acc-btn.ghost{background:transparent;color:var(--text-primary);}
.acc-btn.undo{background:var(--secondary-bg);color:var(--text-secondary);}
.acc-btn:disabled{opacity:.5;cursor:default;}
.acc-tabs{display:flex;gap:.4rem;margin-bottom:1rem;border-bottom:1px solid var(--border-color);}
.acc-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:.65rem .9rem;cursor:pointer;color:var(--text-secondary);font-weight:700;font-size:.95rem;}
.acc-tab[aria-selected="true"]{color:var(--text-primary);border-bottom-color:#39D3BB;}
.acc-tab .pill{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;border-radius:999px;background:var(--secondary-bg);font-size:.75rem;color:var(--text-secondary);}
.acc-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;border:1px solid var(--border-color);border-radius:12px;padding:.7rem .9rem;margin-bottom:.5rem;transition:background .3s ease,border-color .3s ease;}
/* display:flex sovrascrive [hidden] del browser: senza questo il filtro non nasconde le righe (#accredito-filtro). */
.acc-row[hidden]{display:none;}
.acc-row.done{background:rgba(57,211,187,.08);border-color:rgba(57,211,187,.3);}
.acc-row.is-hit{animation:acc-hit .9s ease;}
@keyframes acc-hit{0%{background:rgba(57,211,187,.45);}100%{background:rgba(57,211,187,.08);}}
.acc-row__main{flex:1 1 200px;min-width:0;}
.acc-name{font-weight:700;display:block;overflow-wrap:anywhere;}
.acc-meta{font-size:.8rem;color:var(--text-secondary);overflow-wrap:anywhere;display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline;}
.acc-meta a{color:var(--accent-color);text-decoration:none;}
.acc-meta a:hover{text-decoration:underline;}
.acc-meta__phone{font-variant-numeric:tabular-nums;}
.acc-meta__when{color:var(--text-muted,#9aa4b2);font-size:.72rem;}
.acc-consent{font-size:.72rem;color:var(--accent-color);white-space:nowrap;}
.acc-consent--no{color:var(--text-muted,#9aa4b2);}
.acc-tag{font-size:.72rem;padding:.1rem .5rem;border-radius:999px;background:var(--primary-bg);border:1px solid var(--border-color);color:var(--text-secondary);white-space:nowrap;}
.acc-tag.exhib{background:rgba(57,211,187,.15);color:#39D3BB;border-color:rgba(57,211,187,.3);}
.acc-num{width:84px;}
.acc-empty{color:var(--text-secondary);text-align:center;padding:2rem;}
.acc-walkin{border:1px dashed var(--border-color);border-radius:12px;padding:.9rem;margin:0 0 1rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.acc-walkin .form-input{flex:1 1 140px;min-width:0;}
.acc-hint{flex:1 1 100%;color:var(--text-secondary);font-size:.78rem;}
.acc-sugg{flex:1 1 100%;margin-top:.4rem;display:flex;flex-direction:column;gap:.35rem;}
.acc-sugg__item{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;cursor:pointer;padding:.55rem .7rem;border-radius:10px;border:1px solid var(--border-color);background:var(--secondary-bg);color:var(--text-primary);}
.acc-sugg__item:hover,.acc-sugg__item:focus-visible{border-color:#39D3BB;background:rgba(57,211,187,.1);}
.acc-sugg__item[data-done="1"]{opacity:.6;}
.acc-sugg__body{flex:1 1 auto;min-width:0;}
.acc-sugg__name{font-weight:700;display:block;overflow-wrap:anywhere;}
.acc-sugg__meta{font-size:.78rem;color:var(--text-secondary);overflow-wrap:anywhere;}
.acc-sugg__go{font-weight:800;color:#39D3BB;white-space:nowrap;}
.acc-sugg__none{color:var(--text-secondary);font-size:.82rem;padding:.3rem .1rem;}
.acc-scan-box{margin:0 0 1rem;max-width:420px;}
.acc-scan-box #acc-reader{width:100%;border-radius:12px;overflow:hidden;}
.acc-toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(120%);max-width:min(92vw,460px);padding:.8rem 1.1rem;border-radius:12px;font-weight:700;background:#39D3BB;color:#06131a;box-shadow:0 12px 40px rgba(0,0,0,.35);transition:transform .28s ease;z-index:1200;text-align:center;}
.acc-toast.show{transform:translateX(-50%) translateY(0);}
.acc-toast.warn{background:#F5A623;}
.acc-toast.err{background:#E5484D;color:#fff;}
@media (max-width:600px){ .acc-row{gap:.5rem;} .acc-btn{flex:1 1 auto;} }

/* ══════════════════════════════════════════════════════════════════════
   Strumento Podcast — migrato da inline a foglio di stile (#719)
   ══════════════════════════════════════════════════════════════════════ */
.pc-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.4rem;}
.pc-head h2{margin:0;}
.pc-meta{color:var(--text-secondary);font-size:.88rem;}
.pc-links{display:flex;gap:.9rem;flex-wrap:wrap;margin:.2rem 0 1.4rem;font-size:.84rem;}
.pc-links a{color:var(--accent-color);text-decoration:none;}
.pc-links a:hover{text-decoration:underline;}
.pc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:1.5rem;align-items:start;}
@media(max-width:900px){.pc-grid{grid-template-columns:minmax(0,1fr);}}
.pc-card{border:1px solid var(--border-color);border-radius:14px;padding:1.1rem 1.2rem;background:var(--secondary-bg);margin-bottom:1.1rem;}
.pc-card h3{margin:0 0 .2rem;font-size:1rem;}
.pc-note{color:var(--text-secondary);font-size:.84rem;margin:0 0 .9rem;}
.pc-who{display:flex;justify-content:space-between;gap:.7rem;align-items:baseline;flex-wrap:wrap;}
.pc-who__name{font-weight:700;font-size:1.02rem;overflow-wrap:anywhere;}
.pc-st{font-size:.7rem;padding:.12rem .55rem;border-radius:999px;background:var(--primary-bg);color:var(--text-secondary);white-space:nowrap;}
.pc-st--new{background:rgba(245,166,35,.15);color:#F5A623;}
.pc-st--accepted{background:rgba(57,211,187,.15);color:#39D3BB;}
.pc-st--scheduled{background:rgba(34,211,238,.15);color:#22D3EE;}
.pc-st--reviewing{background:rgba(255,255,255,.07);color:var(--text-secondary);}
.pc-st--seg{background:rgba(143,166,255,.15);color:#8fa6ff;}
.pc-card--seg{border-left:3px solid #8fa6ff;}
.pc-seg-sep{margin:1.6rem 0 .8rem;}
.pc-seg-sep__t{margin:0;font-size:1rem;}
.pc-seg-q{width:100%;box-sizing:border-box;background:var(--primary-bg);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;padding:.55rem .7rem;font:inherit;line-height:1.5;resize:vertical;margin-bottom:.6rem;}
.pc-seg-q:focus{outline:none;border-color:var(--accent-color);}
.pc-remind{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border:1px solid var(--border-color);border-radius:12px;background:var(--secondary-bg);padding:.8rem 1.1rem;margin:.2rem 0 1.1rem;}
.pc-remind__txt strong{font-family:'Montserrat',sans-serif;}
.pc-remind form{margin:0;}
.pc-send{margin:.55rem 0 .2rem;}
.pc-sheet{border:1px solid var(--border-color);border-radius:14px;background:var(--secondary-bg);padding:1.1rem 1.2rem;margin:1.4rem 0 0;}
.pc-sheet__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem;}
.pc-sheet__head h3{margin:0;font-size:1.05rem;}
.pc-sheet__head form{margin:0;}
.pc-sheet__host{border-top:1px solid var(--border-color);padding:.8rem 0 .2rem;}
.pc-sheet__host--none{opacity:.85;}
.pc-sheet__who{font-family:'Montserrat',sans-serif;font-weight:600;margin:0 0 .5rem;}
.pc-sheet__row{padding:.2rem 0 .6rem .2rem;}
.pc-sheet__t{margin:0 0 .25rem;font-weight:600;}
.pc-sheet__q{margin:.1rem 0 0;padding-left:1.3rem;color:var(--text-secondary);font-size:.9rem;line-height:1.6;}
.pc-sheet__none{margin:.1rem 0 0;font-size:.85rem;color:#F5A623;}
.pc-facts{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.45rem 0 .2rem;font-size:.8rem;color:var(--text-secondary);}
.pc-facts a{color:var(--accent-color);text-decoration:none;}
.pc-journey{font-size:.86rem;line-height:1.5;margin:.55rem 0 0;padding-left:.7rem;border-left:2px solid rgba(var(--accent-color-rgb),.35);color:var(--text-primary);}
.pc-warn{font-size:.8rem;color:#F5A623;margin:.5rem 0 0;}
.pc-qpick{margin:.9rem 0 0;border-top:1px solid var(--border-color);padding-top:.8rem;}
.pc-qpick__t{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary);font-weight:700;margin-bottom:.5rem;}
.pc-qlist{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.7rem;}
.pc-q{display:flex;gap:.55rem;align-items:flex-start;font-size:.87rem;line-height:1.4;cursor:pointer;}
.pc-q input{margin-top:.22rem;flex:0 0 auto;}
.pc-q--off{color:var(--text-secondary);}
.pc-q__tag{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:999px;padding:0 .35rem;margin-left:.2rem;white-space:nowrap;}
.pc-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.5rem 1rem;border-radius:10px;border:1px solid transparent;background:var(--accent-color);color:var(--text-on-accent,#06131a);font-weight:700;font-size:.84rem;font-family:inherit;cursor:pointer;transition:background .16s,border-color .16s,color .16s;}
.pc-btn:hover{filter:brightness(1.06);}
.pc-btn.ghost{background:transparent;border-color:var(--border-color);color:var(--text-secondary);filter:none;}
.pc-btn.ghost:hover{border-color:var(--accent-color);color:var(--accent-color);}
.pc-btn.danger:hover{border-color:#E5484D;color:#E5484D;}
.pc-new{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;}
.pc-new textarea,.pc-bank input[type=text]{width:100%;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--border-color);background:var(--primary-bg);color:var(--text-primary);font-size:.87rem;font-family:inherit;resize:vertical;}
.pc-new label{display:flex;gap:.45rem;align-items:center;font-size:.8rem;color:var(--text-secondary);}
.pc-bank__row{display:flex;gap:.4rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--border-color);}
.pc-bank__row:last-child{border-bottom:0;}
.pc-bank__n{flex:0 0 1.4rem;font-size:.75rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;padding-top:.5rem;}
.pc-bank__main{flex:1 1 auto;min-width:0;}
.pc-bank__row--off .pc-bank__main input{opacity:.55;}
.pc-bank__ops{display:flex;gap:.25rem;padding-top:.15rem;}
.pc-mini{background:none;border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:.8rem;width:28px;height:28px;line-height:1;padding:0;}
.pc-mini:hover{border-color:var(--accent-color);color:var(--accent-color);}
.pc-mini.danger:hover{border-color:#E5484D;color:#E5484D;}
.pc-empty{color:var(--text-secondary);font-size:.86rem;}

/* Accredito · chip filtro presenza (#721) */
.acc-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin:0 0 1rem;}
.acc-chip{min-height:40px;padding:.4rem .85rem;border-radius:999px;cursor:pointer;
    border:1px solid var(--border-color);background:transparent;color:var(--text-secondary);
    font-weight:700;font-size:.82rem;display:inline-flex;align-items:center;gap:.35rem;
    transition:border-color .15s,color .15s,background .15s;}
.acc-chip:hover{border-color:var(--accent-color);color:var(--accent-color);}
.acc-chip b{font-variant-numeric:tabular-nums;opacity:.85;}
.acc-chip.is-on{background:var(--accent-color);color:var(--text-on-accent,#06131a);border-color:transparent;}
.acc-chip.is-on b{opacity:1;}