/*
 * Modern design system for the B2B meetings platform.
 */
:root {
    --color-primary:#1f3b73;
    --color-primary-dark:#16254f;
    --color-secondary:#f2b705;
    --color-accent:#f05d23;
    --color-surface:#ffffff;
    --color-muted:#5b6072;
    --color-border:#e2e6f4;
    --color-bg:#f7f8ff;
    --color-heading:#0a193f;
    --color-success:#0f9d58;
    --color-warning:#c7791b;
    --color-danger:#c53030;
    --radius-lg:20px;
    --radius-md:14px;
    --radius-sm:10px;
    --shadow-soft:0 15px 35px rgba(15,35,60,0.08);
    --shadow-card:0 35px 60px rgba(15,35,60,0.12);
    --transition:0.25s ease;
    --font-base:'Cairo','Tahoma',sans-serif;
}

*,
*::before,
*::after {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:var(--font-base);
    background:var(--color-bg);
    color:var(--color-heading);
    line-height:1.7;
}

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

a {
    color:inherit;
    text-decoration:none;
    transition:color var(--transition), background var(--transition), border var(--transition), box-shadow var(--transition);
}

small,
.helper {
    display:block;
    font-size:0.85rem;
    color:var(--color-muted);
    margin-bottom:0.75rem;
}

ul,
ol {
    margin:0;
    padding:0;
    list-style:none;
}

.page-content {
    padding:2.5rem 0 3.5rem;
}

section + section {
    margin-top:2rem;
}

.container {
    width:min(1200px, 92vw);
    margin:0 auto;
}

.site-header {
    background:var(--color-surface);
    border-bottom:1px solid rgba(13,35,58,0.08);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 20px 40px rgba(15,35,60,0.08);
}

.header-flex {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.25rem;
    padding:1rem 0;
}

.logo {
    display:inline-flex;
    align-items:center;
    font-weight:700;
    font-size:1.15rem;
    color:var(--color-primary);
    letter-spacing:0.02em;
    text-decoration:none;
}

.logo img {
    max-height:56px;
    width:auto;
    display:block;
}

.logo-row {
    display:flex;
    align-items:center;
    gap:0.75rem;
}

.nav-toggle {
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:0.25rem;
    background:var(--color-primary);
    color:#fff;
    border:none;
    border-radius:var(--radius-sm);
    padding:0.35rem 0.55rem;
    cursor:pointer;
}

.nav-toggle span {
    width:20px;
    height:2px;
    background:#fff;
    border-radius:999px;
    display:block;
}

.main-nav {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0.5rem;
}

.main-nav a {
    padding:0.5rem 1.25rem;
    border-radius:999px;
    font-weight:600;
    color:var(--color-heading);
    background:transparent;
}

.main-nav a:hover,
.main-nav a:focus {
    background:rgba(31,59,115,0.18);
    color:var(--color-primary);
}

.main-nav .messages-link {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
}

.admin-dashboard-link {
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
}

.nav-unread {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    padding:0 0.4rem;
    height:20px;
    border-radius:999px;
    background:var(--color-danger, #c53030);
    color:#fff;
    font-size:0.75rem;
    font-weight:700;
}

.nav-unread-alert {
    box-shadow:0 0 0 2px var(--color-surface);
}

.message.message-pending {
    opacity:0.65;
    position:relative;
}

.message.message-pending::after {
    content:'...';
    position:absolute;
    inset-inline-end:8px;
    bottom:6px;
    font-size:0.8rem;
    color:var(--color-muted);
}

.btn,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-link,
button,
input[type=submit] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.45rem;
    font-family:inherit;
    font-weight:600;
    border-radius:var(--radius-sm);
    border:1px solid transparent;
    padding:0.75rem 1.5rem;
    cursor:pointer;
    transition:var(--transition);
    font-size:1rem;
}

.btn,
button,
input[type=submit] {
    background:var(--color-primary);
    color:#fff;
    border-color:var(--color-primary);
    box-shadow:0 10px 25px rgba(31,59,115,0.25);
}

.btn:hover,
.btn:focus,
button:hover,
button:focus,
input[type=submit]:hover,
input[type=submit]:focus {
    background:var(--color-primary-dark);
    border-color:var(--color-primary-dark);
    box-shadow:0 20px 40px rgba(0,76,130,0.3);
}

.btn:disabled,
button:disabled,
input[type=submit]:disabled {
    opacity:0.6;
    cursor:not-allowed;
    box-shadow:none;
}

.btn-primary {
    background:var(--color-primary);
    color:#fff;
}

.btn-outline {
    background:transparent;
    border-color:var(--color-secondary);
    color:var(--color-secondary);
    box-shadow:none;
}

.btn-outline:hover,
.btn-outline:focus {
    background:rgba(242,183,5,0.12);
    color:var(--color-primary-dark);
}

.btn-secondary {
    background:var(--color-secondary);
    border-color:var(--color-secondary);
    color:#2e2201;
    box-shadow:0 10px 25px rgba(242,183,5,0.35);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background:#d19c04;
    border-color:#d19c04;
    color:#fff;
}

.btn-ghost {
    background:rgba(255,255,255,0.12);
    color:#fff;
    border-color:rgba(255,255,255,0.4);
}

.btn-link {
    border:none;
    padding:0;
    background:none;
    color:var(--color-primary);
    box-shadow:none;
}

.btn-link:hover,
.btn-link:focus {
    color:var(--color-primary-dark);
}

.btn-large {
    padding:1rem 2.5rem;
    font-size:1.1rem;
}

.hero {
    background:linear-gradient(135deg, rgba(31,59,115,0.12), rgba(5, 242, 167, 0.18));
    padding:2.5rem;
    border-radius:var(--radius-lg);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:var(--shadow-card);
}

.hero::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 10% 10%, rgba(255,255,255,0.35), transparent 40%);
    mix-blend-mode:screen;
    pointer-events:none;
}

.hero > * {
    position:relative;
}

.hero h1 {
    margin-top:0;
    font-size:2.1rem;
    color:var(--color-primary-dark);
    line-height:1.4;
}

.hero p {
    max-width:65ch;
    margin:1rem 0 1.5rem;
    color:var(--color-heading);
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
}

.hero-actions .btn-outline {
    background:rgba(6, 82, 53, 0.2);
    border-color:rgba(11, 16, 155, 0.65);
    color:#fff;
}

.hero-actions .btn-outline:hover {
    background:rgba(6, 3, 66, 0.2);
}

.grid {
    display:grid;
    gap:1.25rem;
}

.grid-2 {
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.grid-3 {
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.grid-4 {
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.news-grid {
    display:grid;
    gap:1.25rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    align-items:start;
}

.news-grid .card {
    display:flex;
    flex-direction:column;
    height:100%;
}

.news-grid .post-summary {
    flex-grow:1;
}

.news-grid .card .btn-link {
    margin-top:auto;
}

.news-filters {
    display:flex;
    gap:0.75rem;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    margin-bottom:1.25rem;
}

.news-filters .btn-link {
    padding:0.55rem 1.2rem;
    border-radius:999px;
    background:rgba(31,59,115,0.06);
    font-weight:700;
}

.news-filters .btn-link:hover,
.news-filters .btn-link:focus {
    background:rgba(31,59,115,0.12);
}

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

.card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow-card);
}

.card h1,
.card h2,
.card h3 {
    margin-top:0;
    margin-bottom:0.75rem;
    color:var(--color-heading);
}

.card p {
    margin:0.25rem 0 0.75rem;
    color:var(--color-muted);
}

.event-summary {
    max-height:4.8em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.card .meta {
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem;
    font-size:0.9rem;
    color:var(--color-muted);
}

.card .meta strong {
    color:var(--color-heading);
}

.participant-card {
    text-align:center;
}

.participant-logo {
    width:100px;
    height:100px;
    margin:0 auto 1rem;
    border-radius:50%;
    border:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f8fafc;
    overflow:hidden;
}

.participant-logo img {
    width:80%;
    height:80%;
    object-fit:contain;
}

.participant-placeholder {
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#fff;
    background:linear-gradient(135deg, rgba(31,91,150,0.9), rgba(37,211,102,0.85));
}

.contact-list {
    list-style:none;
    padding:0;
    margin:0;
}

.contact-list li {
    margin-bottom:0.4rem;
    font-weight:600;
    color:var(--color-heading);
}

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

.contact-location {
    margin-top:1rem;
    padding:1rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    background:#f9fbff;
}

.participant-card h3 {
    margin-bottom:0.25rem;
}

.participant-card p {
    margin:0;
    color:var(--color-muted);
    font-weight:600;
}

.participant-event {
    margin-top:0.4rem;
    font-size:0.9rem;
    color:var(--color-primary);
    font-weight:600;
}

.participant-actions {
    display:flex;
    gap:0.5rem;
    flex-wrap:wrap;
    margin-top:0.75rem;
}

.participant-actions .btn-link {
    font-weight:700;
}

.event-highlight {
    background:linear-gradient(120deg, rgba(31,59,115,0.08), rgba(7, 139, 18, 0.18));
    position:relative;
    overflow:hidden;
}

.event-highlight::before {
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(5, 107, 56, 0.4);
    top:-60px;
    inset-inline-end:-40px;
    filter:blur(10px);
    pointer-events:none;
}

.event-highlight > * {
    position:relative;
}

.event-highlight__meta {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:1rem;
    margin-top:1rem;
}

.event-highlight__meta span {
    display:block;
    font-size:0.85rem;
    color:var(--color-muted);
    margin-bottom:0.25rem;
}

.event-highlight__meta strong {
    font-size:1.1rem;
    color:var(--color-primary-dark);
}

.event-card {
    display:flex;
    flex-direction:column;
    gap:0.35rem;
    min-height:220px;
}

.event-card .btn-link {
    margin-top:auto;
    font-weight:700;
}

.event-card-participants {
    margin-top:0.75rem;
}

.event-card-participants > span {
    display:block;
    font-size:0.85rem;
    color:var(--color-muted);
    margin-bottom:0.35rem;
    font-weight:600;
}

.participant-chips {
    display:flex;
    flex-wrap:wrap;
    gap:0.4rem;
}

.sponsors-fieldset {
    margin-top:1.5rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:1rem 1.25rem;
}

.sponsors-fieldset legend {
    font-weight:700;
    padding:0 0.5rem;
}

.sponsors-wrapper {
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.sponsor-item {
    border:1px dashed var(--color-border);
    border-radius:var(--radius-sm);
    padding:1rem;
    background:#f9fbff;
}

.sponsor-item-actions {
    margin-top:0.75rem;
    text-align:end;
}

.event-sponsors {
    margin-top:0.75rem;
}

.event-sponsors > span {
    display:block;
    font-size:0.85rem;
    color:var(--color-muted);
    margin-bottom:0.35rem;
    font-weight:600;
}

.sponsor-logos {
    display:flex;
    gap:0.75rem;
    overflow-x:auto;
    padding-bottom:0.4rem;
}

.event-sponsor-logo-card,
.event-card-sponsor {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.35rem;
    text-align:center;
}
.event-card-sponsor {
    margin-right:0.75rem;
}



.supporters-slider {

    display:flex;

    gap:1rem;

    flex-wrap:nowrap;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x proximity;

    padding-bottom:0.5rem;

}

.supporters-slider .participant-card {

    flex:0 0 calc((100% - 2rem) / 3);

    min-width:calc((100% - 2rem) / 3);

    scroll-snap-align:start;

    transition:transform var(--transition);

}

.supporters-slider .participant-card .participant-event,

.supporters-slider .participant-card .btn-link {

    display:none;

}

.supporters-slider .participant-logo {

    margin-bottom:0.75rem;

}

@media (max-width: 900px) {

    .supporters-slider .participant-card {

        flex:0 0 calc((100% - 1rem) / 2);

        min-width:calc((100% - 1rem) / 2);

    }

}

@media (max-width: 640px) {

    .supporters-slider .participant-card {

        flex:0 0 100%;

        min-width:100%;

    }

}



.event-sponsors {

    margin-top:0.65rem;

}



.event-sponsor-carousel-container {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin-top: 1rem;

    position: relative;

    padding: 0 25px; /* Maintain padding for layout */

}



.event-sponsor-carousel {

    display: flex;

    gap: 1rem;

    overflow-x: auto;

    padding: 1rem 0;

    width: 100%;

    scroll-behavior: smooth;

    scroll-snap-type: x proximity;

}



.event-sponsor-carousel::-webkit-scrollbar {

    display: none;

}



.event-sponsor-carousel {

    -ms-overflow-style: none;

    scrollbar-width: none;

}



.event-sponsor-carousel-track {

    display: flex;

    gap: 1rem;

    width: max-content;

}


.event-sponsor-card {

    flex: 0 0 auto;

    width: min(320px, calc((100% - 2rem) / 3));

    min-width: 220px;

    background: var(--color-surface);

    border-radius: var(--radius-md);

    padding: 1rem;

    border: 1px solid var(--color-border);

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    box-shadow: var(--shadow-soft);

    scroll-snap-align: start;

}



.event-sponsor-logo {

    width: 100%;

    height: 140px;

    border-radius: var(--radius-sm);

    border: 1px solid rgba(15, 35, 60, 0.08);

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f9fafc;

    overflow: hidden;

}



.event-sponsor-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.event-sponsor-card h3 {

    margin: 0;

    font-size: 1rem;

    font-weight: 700;

    color: var(--color-heading);

}



@media (max-width: 900px) {

    .event-sponsor-card {

        width: min(260px, calc((100% - 1rem) / 2));

    }

}



@media (max-width: 640px) {

    .event-sponsor-card {

        width: calc(100% - 1rem);

    }

}



.sponsor-logo {

    width:72px;

    height:72px;

    border-radius:18px;

    border:1px solid var(--color-border);

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    box-shadow:0 5px 15px rgba(15,35,60,0.08);

}



.sponsor-logo img {

    width:100%;

    height:100%;

    object-fit:contain;

    padding:0.5rem;

}



.sponsor-placeholder {

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg, rgba(31,91,150,0.9), rgba(37,211,102,0.85));

}



.sponsors-scroll {

    display:flex;

    gap:0.5rem;

    overflow-x:auto;

    padding-bottom:0.4rem;

}



.sponsors-scroll::-webkit-scrollbar {

    height:6px;

}



.sponsors-scroll::-webkit-scrollbar-thumb {

    background:rgba(15,35,60,0.15);

    border-radius:999px;

}



.sponsor-chip {

    display:flex;

    align-items:center;

    gap:0.5rem;

    padding:0.4rem 0.9rem;

    border:1px solid var(--color-border);

    border-radius:999px;

    background:#fff;

    color:inherit;

    text-decoration:none;

    font-weight:600;

    white-space:nowrap;

    flex-shrink:0;

    box-shadow:0 5px 15px rgba(15,35,60,0.08);

}



.sponsor-chip img {

    width:32px;

    height:32px;

    object-fit:contain;

}



.post-card .status-badge {

    margin-bottom:0.75rem;

}



.post-image {

    width:100%;

    height:220px;

    border-radius:var(--radius-md);

    overflow:hidden;

    margin:1rem 0;

    background:#0f172a;

}



.post-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.status-badge {

    display:inline-flex;

    align-items:center;

    padding:0.25rem 0.85rem;

    border-radius:999px;

    font-size:0.85rem;

    font-weight:600;

    text-transform:capitalize;

}



.status-badge.pending {

    background:rgba(255,197,87,0.25);

    color:#a66300;

}



.status-badge.approved {

    background:rgba(15,157,88,0.2);

    color:var(--color-success);

}



.status-badge.rejected {

    background:rgba(197,48,48,0.15);

    color:var(--color-danger);

}



.status-badge.accepted,

.status-badge.done {

    background:rgba(15,157,88,0.2);

    color:var(--color-success);

}



.status-badge.reschedule_requested {

    background:rgba(66,133,244,0.18);

    color:#1a73e8;

}



.status-badge.needs_admin {

    background:rgba(0,0,0,0.08);

    color:#4a5568;

}


.status-badge.awaiting_admin {

    background:rgba(255,193,7,0.2);

    border-color:rgba(255,193,7,0.35);

    color:#664d00;

}




.sponsor-type-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.2rem 0.8rem;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:600;
    background:rgba(31,59,115,0.08);
    color:var(--color-primary);
    text-transform:none;
}
.sponsor-type-badge--logo {
    margin-top:0.35rem;
}
.sponsor-type-badge--highlight {
    margin-top:0.5rem;
}
.sponsor-type-badge--card {
    margin-top:0.3rem;
    font-size:0.7rem;
}
.sponsor-type-badge--chip {
    margin-left:0.4rem;
    font-size:0.65rem;
    background:rgba(0,0,0,0.08);
    color:var(--color-heading);
}

.actions {

    display:flex;

    justify-content:center;

    margin-top:1.25rem;

}



.actions .btn-outline {

    min-width:200px;

}



.table-actions {

    display:flex;

    flex-wrap:wrap;

    gap:0.15rem;

    align-items:center;

}



.table-actions form {

    display:flex;

    align-items:center;

    gap:0.15rem;

    flex-wrap:nowrap;

    margin:0;

    padding:0;

}



.table-actions button {

    padding:0.3rem 0.7rem;

    font-size:0.85rem;

}



.table-actions select {

    padding:0.4rem 0.7rem;

    font-size:0.9rem;

}



.inline-form {

    display:inline-flex;

    gap:0.35rem;

    align-items:center;

    margin:0;

}

.proposal-actions {
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    align-items:flex-end;
}

.proposal-form {
    margin-top:1rem;
}



.inline-form.compact input[type="text"] {

    padding:0.4rem 0.7rem;

    font-size:0.9rem;

    min-width:160px;

    margin:0;

}



.inline-form.compact button {

    padding:0.35rem 0.75rem;

    font-size:0.9rem;

}



.profile-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:1rem;

    margin-bottom:1.25rem;

}



.profile-panel {

    background:#f7f9fd;

    border:1px solid var(--color-border);

    border-radius:var(--radius-md);

    padding:1rem 1.25rem;

}



.profile-panel h2 {

    margin-top:0;

}



.meta-list {

    list-style:none;

    padding:0;

    margin:0 0 0.5rem;

    display:grid;

    gap:0.45rem;

}



.meta-list li {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:0.5rem;

    font-weight:600;

}



.meta-list li span:first-child {

    color:var(--color-muted);

    font-weight:600;

}



.profile-avatar {

    width:140px;

    height:140px;

    border-radius:16px;

    border:1px solid var(--color-border);

    background:#e2e8f0;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    margin-bottom:0.75rem;

}



.profile-avatar img {

    width:100%;

    height:100%;

    object-fit:contain;

}



.user-search {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:0.5rem;

    margin:0 0 1rem;

}



.user-search input[type="text"] {

    width:280px;

    max-width:100%;

    padding:0.55rem 0.85rem;

}



.user-search .btn-outline {

    padding:0.55rem 1rem;

    font-size:0.95rem;

}



.table-wrapper {

    overflow-x:auto;

    background:var(--color-surface);

    border-radius:var(--radius-lg);

    border:1px solid var(--color-border);

}



table {

    width:100%;

    border-collapse:collapse;

    min-width:640px;

}



thead {

    background:#f2f5fb;

}



th,

td {

    padding:0.85rem 1rem;

    text-align:right;

    border-bottom:1px solid var(--color-border);

    font-size:0.95rem;

}



tbody tr:hover {

    background:rgba(31,59,115,0.06);

}



.alert {

    padding:0.9rem 1.25rem;

    border-radius:var(--radius-sm);

    font-weight:600;

    margin-bottom:1rem;

}



.alert.success {

    background:rgba(15,157,88,0.18);

    color:var(--color-success);

}



.alert.error {

    background:rgba(197,48,48,0.15);

    color:var(--color-danger);

}



.alert.info {

    background:rgba(31,59,115,0.12);

    color:var(--color-primary);

}



form {

    background:var(--color-surface);

    padding:2rem;

    border-radius:var(--radius-lg);

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-soft);

}



label {

    display:block;

    font-weight:600;

    margin-bottom:0.35rem;

    color:var(--color-heading);

}



input,

select,

textarea {

    width:100%;

    padding:0.85rem 1rem;

    border:1px solid var(--color-border);

    border-radius:var(--radius-sm);

    background:#f7f9fd;

    font-family:inherit;

    font-size:1rem;

    margin-bottom:1rem;

    transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);

}



input:focus,

select:focus,

textarea:focus {

    outline:none;

    border-color:var(--color-primary);

    background:#fff;

    box-shadow:0 0 0 3px rgba(31,59,115,0.18);

}



.input-error {

    border-color:var(--color-danger);

    background:rgba(197,48,48,0.05);

}



.site-footer {

    background:#031324;

    color:#cdd5df;

    text-align:center;

    padding:2rem 0;

    margin-top:3rem;

}



.site-footer p {

    margin:0;

}



.empty-state {

    text-align:center;

    color:var(--color-muted);

    padding:2rem 0;

    font-weight:600;

}



.stat-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:1rem;

}



.stat-card {

    padding:1.25rem;

    border-radius:var(--radius-md);

    background:linear-gradient(145deg,#fff,#f5f8ff);

    border:1px solid var(--color-border);

}



.stat-card .value {

    font-size:2rem;

    font-weight:700;

    color:var(--color-primary-dark);

    margin:0;

}



.stat-card span {

    color:var(--color-muted);

    font-size:0.9rem;

}



.section-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    margin-bottom:1.5rem;

}



.section-header h2 {

    margin:0;

}



.badge {

    padding:0.25rem 0.85rem;

    border-radius:999px;

    font-size:0.8rem;

    background:rgba(31,59,115,0.15);

    color:var(--color-primary);

}



.pill {

    border-radius:999px;

    background:rgba(100,116,139,0.15);

    color:var(--color-heading);

    padding:0.35rem 0.9rem;

    font-size:0.85rem;

}



.media-card {

    display:flex;

    gap:1rem;

    align-items:flex-start;

}



.media-card .icon {

    width:48px;

    height:48px;

    border-radius:16px;

    background:rgba(31,59,115,0.12);

    display:grid;

    place-items:center;

    color:var(--color-primary);

    font-weight:700;

}



.media-card h3 {

    margin-bottom:0.25rem;

}



.media-card p {

    margin:0;

}



.post-card {

    display:flex;

    flex-direction:column;

    height:100%;

}



.post-card p {

    flex-grow:1;

}



.post-card .btn-link {

    align-self:flex-start;

}



.messages-list {

    display:flex;

    flex-direction:column;

    gap:0.75rem;

}



.message-thread {

    display:block;

    border:1px solid var(--color-border);

    border-radius:var(--radius-md);

    padding:1rem 1.25rem;

    background:#fff;

    transition:box-shadow var(--transition), border-color var(--transition);

}



.message-thread:hover {

    border-color:rgba(31,59,115,0.4);

    box-shadow:0 15px 30px rgba(15,35,60,0.08);

}



.message-thread.is-unread {

    border-color:var(--color-primary);

    background:rgba(31,59,115,0.04);

}



.message-thread__header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:0.5rem;

    gap:0.5rem;

}



.badge-unread {

    background:var(--color-primary);

    color:#fff;

}



.conversation {

    border:1px solid var(--color-border);

    border-radius:var(--radius-md);

    max-height:420px;

    overflow-y:auto;

    padding:1rem;

    background:linear-gradient(145deg,#f8fbff,#fff);

    margin-bottom:1rem;

    display:flex;

    flex-direction:column;

    gap:0.75rem;

}



.message {

    border-radius:var(--radius-sm);

    padding:0.75rem 1rem;

    background:#fff;

    border:1px solid var(--color-border);

    width:fit-content;

    max-width:85%;

}



.message-in {

    align-self:flex-start;

}



.message-out {

    align-self:flex-end;

    background:rgba(31,59,115,0.1);

    border-color:rgba(31,59,115,0.25);

}



.message-meta {

    display:flex;

    justify-content:space-between;

    gap:0.5rem;

    font-size:0.8rem;

    color:var(--color-muted);

    margin-bottom:0.35rem;

}



.message-form textarea {

    min-height:120px;

    resize:vertical;

}



.message-participants {

    border:1px dashed var(--color-border);

    border-radius:var(--radius-sm);

    padding:0.75rem 1rem;

    margin-bottom:1rem;

    background:#f8fafc;

}



.message-participants ul {

    margin:0.5rem 0 0;

    padding:0;

    list-style:none;

    display:flex;

    flex-wrap:wrap;

    gap:0.5rem 1rem;

    font-weight:600;

}



.message-participants li span {

    display:block;

    font-size:0.8rem;

    color:var(--color-muted);

}



.message-participants li.is-me {

    color:var(--color-primary);

}



.notifications-card .notify-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:1rem;

    margin-bottom:0.75rem;

}



.notify-chip {

    display:flex;

    align-items:center;

    gap:0.75rem;

    padding:0.75rem 1rem;

    background:linear-gradient(120deg, rgba(31,59,115,0.08), rgba(240,93,35,0.07));

    border-radius:var(--radius-sm);

    border:1px solid rgba(31,59,115,0.12);

}



.notify-icon {

    width:42px;

    height:42px;

    border-radius:14px;

    background:var(--color-primary);

    color:#fff;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1rem;

}



.notify-actions {

    display:flex;

    align-items:center;

    gap:0.75rem;

}



.notifications-list {

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:0.75rem;

}



.notifications-list li {

    padding:0.85rem 1rem;

    border:1px solid var(--color-border);

    border-radius:var(--radius-sm);

    background:var(--color-surface);

    display:flex;

    flex-direction:column;

    gap:0.35rem;

}



.notifications-list li.is-unread {

    border-color:rgba(197,48,48,0.35);

    box-shadow:0 12px 30px rgba(12,27,55,0.08);

}



.notifications-list li.is-snapshot {

    background:linear-gradient(120deg, rgba(31,59,115,0.04), rgba(240,93,35,0.04));

    border-color:rgba(31,59,115,0.15);

}



.notifications-list li.has-pending {

    border-color:rgba(197,48,48,0.85);

    background:rgba(197,48,48,0.12);

    box-shadow:0 14px 30px rgba(197,48,48,0.18);

}



.notifications-list .notify-title-row {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:0.75rem;

}



.notifications-list .notify-date {

    font-size:0.85rem;

    color:var(--color-muted);

}



.notifications-list p {

    margin:0;

    color:var(--color-heading);

}



.notifications-list a.notify-link {

    color:var(--color-primary);

    font-weight:700;

}



.products-card .products-heading {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:1.5rem;

    flex-wrap:wrap;

}



.products-card .pill {

    display:inline-flex;

    align-items:center;

    gap:0.35rem;

    background:rgba(31,59,115,0.15);

    color:var(--color-primary);

    font-weight:700;

    box-shadow:0 10px 25px rgba(31,59,115,0.08);

}



.product-size-note {

    margin-top:0.65rem;

    padding:0.75rem 1rem;

    border:1px dashed rgba(31,59,115,0.35);

    border-radius:var(--radius-sm);

    background:rgba(31,59,115,0.05);

    font-weight:600;

}



.product-tip-card {

    min-width:260px;

    max-width:360px;

    background:linear-gradient(140deg, rgba(31,59,115,0.12), rgba(240,93,35,0.08));

    border:1px solid rgba(31,59,115,0.16);

    border-radius:var(--radius-md);

    padding:1rem 1.1rem;

    box-shadow:var(--shadow-soft);

    display:flex;

    flex-direction:column;

    gap:0.5rem;

}



.product-tip-card ul {

    margin:0;

    padding-right:1.1rem;

}



.product-tip-card li {

    margin-bottom:0.2rem;

    font-weight:600;

}



.product-owner-card {

    max-width:360px;

}



.product-owner-card .owner-logo {

    width:72px;

    height:72px;

    border-radius:18px;

    overflow:hidden;

    background:rgba(31,59,115,0.12);

    border:1px solid rgba(31,59,115,0.15);

}



.product-owner-card .owner-logo img {

    width:100%;

    height:100%;

    object-fit:cover;

}



.product-owner-card .owner-meta {

    display:flex;

    flex-direction:column;

    gap:0.15rem;

    font-weight:700;

}



.product-owner-card .owner-meta small {

    color:var(--color-muted);

}



.product-remaining {

    margin-top:auto;

    align-self:flex-start;

    font-weight:800;

    color:var(--color-primary-dark);

}



.product-form {

    border:1px dashed var(--color-border);

    padding:1.25rem;

    border-radius:var(--radius-md);

    background:linear-gradient(120deg, #ffffff, rgba(31,59,115,0.04));

    margin:1rem 0 1.5rem;

}



.product-form form {

    display:flex;

    flex-direction:column;

    gap:0.7rem;

}



.product-grid {

    display:grid;

    grid-template-columns:repeat(4, minmax(0, 1fr));

    gap:1rem;

}

@media (max-width: 1200px) {

    .product-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }

}

@media (max-width: 900px) {

    .product-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 640px) {

    .product-grid { grid-template-columns:repeat(1, minmax(0, 1fr)); }

}



.product-card {

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:var(--radius-md);

    box-shadow:0 18px 50px rgba(12,27,55,0.08);

    overflow:hidden;

    display:flex;

    flex-direction:column;

}



.product-thumb {

    position:relative;

    aspect-ratio:4/3;

    background:linear-gradient(135deg, rgba(31,59,115,0.08), rgba(240,93,35,0.08));

}



.product-thumb img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



.product-body {

    padding:0.85rem 1rem 1rem;

    display:flex;

    flex-direction:column;

    gap:0.4rem;

}



.product-desc {

    color:var(--color-muted);

    margin:0;

    min-height:2.2em;

}



.product-edit-form {

    display:flex;

    flex-direction:column;

    gap:0.45rem;

}



.product-actions {

    display:flex;

    align-items:center;

    gap:0.65rem;

}



.product-delete-form {

    margin-top:0.35rem;

}



.product-delete-form .btn-link.danger {

    color:var(--color-danger);

    font-weight:700;

}



.modal-backdrop {

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.45);

    display:none;

    align-items:center;

    justify-content:center;

    padding:1rem;

    z-index:2000;

}



.modal-backdrop.is-open {

    display:flex;

}



.modal-card {

    background:#fff;

    border-radius:var(--radius-lg);

    box-shadow:0 30px 80px rgba(0,0,0,0.18);

    width:min(520px, 96vw);

    border:1px solid var(--color-border);

    position:relative;

    max-height:90vh;

    overflow:auto;

    padding:1.5rem;

}



.modal-close {

    position:absolute;

    top:12px;

    inset-inline-end:12px;

    background:transparent;

    border:none;

    font-size:1.1rem;

    cursor:pointer;

    color:var(--color-muted);

}



.modal-close:hover,

.modal-close:focus {

    color:var(--color-heading);

}



.modal-card h3 {

    margin-top:0;

    margin-bottom:0.75rem;

}



.modal-actions {

    display:flex;

    gap:0.5rem;

    margin-top:0.75rem;

}



.empty-products {

    grid-column:1 / -1;

    text-align:center;

    padding:1rem;

    border:1px dashed var(--color-border);

    border-radius:var(--radius-md);

    background:rgba(31,59,115,0.05);

    color:var(--color-muted);

}



@media (max-width:992px) {

    .header-flex {

        flex-direction:column;

    }

    .hero {

        padding:2rem;

    }

    .site-header {

        position:static;

    }

    table {

        min-width:0;

    }

}



@media (max-width:640px) {

    .page-content {

        padding:1.5rem 0 2rem;

    }

    form {

        padding:1rem;

    }

    .hero {

        padding:1.5rem;

    }

    .hero h1 {

        font-size:1.65rem;

    }

    .hero-actions {

        flex-direction:column;

        align-items:stretch;

    }

    .main-nav {

        display:none;

        flex-direction:column;

        width:100%;

        gap:0;

        background:var(--color-surface);

        padding:0.5rem 0;

        border-radius:var(--radius-sm);

    }

    .main-nav.is-open {

        display:flex;

    }

    .nav-toggle {

        display:flex;

    }

    .main-nav a,

    .main-nav .btn,

    .main-nav .btn.primary {

        width:100%;

        text-align:center;

        margin:0.25rem 0;

    }

    .header-flex {

        flex-direction:column;

    }

    .logo-row {

        width:100%;

        justify-content:space-between;

    }

    .news-grid .card {

        padding:1.25rem;

    }

    .news-grid .post-image {

        height:180px;

    }

    .news-filters {

        width:100%;

        gap:0.5rem;

    }

    .news-filters .btn-link {

        flex:1 1 45%;

        min-width:140px;

        text-align:center;

    }

}