* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(251, 191, 36, 0.16), transparent 22%),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 24%),
        linear-gradient(180deg, #eef4ff 0%, #f7f9ff 58%, #eef2ff 100%);
    color: #172033;
}

a {
    color: inherit;
}

.site-header {
    background: rgba(15, 23, 42, 0.94);
    color: #ffffff;
    padding: 14px 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(16px);
    position: relative;
    z-index: 9000;
    overflow: visible;
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 16px;
}

.logo-img {
    height: 40px;
    width: auto;
    display: block;
    vertical-align: middle;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    margin-left: 10px;
}

.logo-name {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.logo-tagline {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    line-height: 1;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

.nav-action-link {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 15px;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.nav-action-link:hover {
    background: rgba(96, 165, 250, 0.12);
    border-color: rgba(96, 165, 250, 0.24);
    transform: translateY(-1px);
}

.nav-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ec4899;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 4px;
}

.nav-button {
    background: #ffffff;
    color: #0f172a !important;
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    transition: background .15s, transform .1s;
}
.nav-button:hover {
    background: #e0e7ff;
    color: #3730a3 !important;
    transform: translateY(-1px);
}

.nav-feature-link {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 0;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #f8fafc !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nav-feature-link:hover {
    background: #334155;
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.guest-feature-top-link {
    display: none;
}

.primary-btn {
    background: #4f46e5;
    color: #ffffff !important;
    padding: 11px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    display: inline-block;
}

.secondary-btn {
    border: 1px solid #cbd5e1;
    color: #0f172a;
    padding: 11px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    display: inline-block;
}

.user-pill {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.14);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
}

.nav-mini-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.nav-profile-menu {
    position: relative;
}

.nav-profile-menu summary::-webkit-details-marker {
    display: none;
}

.nav-profile-caret {
    font-size: 11px;
    opacity: 0.7;
}

.nav-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    padding: 8px;
    background: #ffffff;
    color: #172033;
    border: 1px solid #dbe4fb;
    border-radius: 16px;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
    z-index: 9001;
}

.nav-profile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #172033 !important;
    text-decoration: none;
    font-weight: 700;
}

.nav-profile-item:hover {
    background: #f8fafc;
}

.nav-profile-logout {
    color: #b91c1c !important;
}

/* ── Navbar: avatar-only profile button ── */
.nav-profile-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

.nav-profile-avatar-btn:hover {
    border-color: #ffffff;
}

.nav-profile-avatar-btn i {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
}

.nav-profile-avatar-btn .nav-mini-avatar {
    width: 100%;
    height: 100%;
}

/* ── Settings: logout nav item ── */
.settings-nav-logout {
    color: #b91c1c !important;
    margin-top: 8px;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px !important;
}

:root {
    --page-shell-max: 1120px;
    --page-shell-gutter: 20px;
    --lc-max-width: 1320px;
    --lc-gutter: clamp(20px, 3vw, 44px);
    --page-content-max: 1200px;
}

.page-wrap {
    width: 100%;
    max-width: var(--lc-max-width);
    margin: 36px auto;
    padding: 0;
    box-sizing: border-box;
}

.global-messages {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

@media(min-width: 901px) {
    .global-messages {
        position: fixed;
        bottom: 28px;
        right: 28px;
        z-index: 9000;
        width: 360px;
        margin-bottom: 0;
    }
    .lc-msg {
        box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
    }
}

.stories-strip {
    margin-bottom: 14px;
}

.stories-strip,
.social-shell,
.circle-page,
.notifications-page,
.jobs-shell,
.jobs-detail-shell {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.stories-rail {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 10% 8px; /* Added side padding to match page margins */
    margin-left: -10%;  /* Negative margin to allow full-bleed scroll */
    margin-right: -10%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
}

.stories-rail::-webkit-scrollbar {
    display: none;
}

.story-card {
    position: relative;
    flex: 0 0 auto;
    min-width: 172px;
    height: 205px;
    border-radius: 16px;
    overflow: hidden;
    background: #e8eaed;
    box-shadow: none;
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform 0.18s ease;
}

.story-card:hover {
    transform: translateY(-2px) scale(1.015);
}

.story-view-card {
    border: 3px solid #3b82f6;
    border-radius: 16px;
}

.story-view-card.story-viewed {
    border-color: #d1d5db;
}

.story-create-card {
    padding: 16px;
}

/* ── Story card header (avatar + progress ring) ── */
.story-card-header {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Circular progress badge ── */
.story-badge-ring {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.story-ring-svg {
    width: 40px;
    height: 40px;
    display: block;
    filter: none;
}

.story-ring-track {
    fill: rgba(255,255,255,0.18);
    stroke: rgba(255,255,255,0.28);
    stroke-width: 2.5;
}

.story-ring-arc {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.story-view-card.story-viewed .story-ring-arc {
    stroke: rgba(255,255,255,0.45);
}

.story-ring-count {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    letter-spacing: -0.5px;
}

/* ── Story card footer (author + time) ── */
.story-card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 22px 10px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    border-radius: 0 0 13px 13px;
}

.story-view-card.is-text-story .story-card-footer {
    background: linear-gradient(to top, rgba(0,0,0,0.32) 0%, transparent 100%);
}

.story-author-name {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-card-time {
    display: block;
    font-size: 9.5px;
    color: rgba(255,255,255,0.75);
    margin-top: 1px;
}

.story-card-caption {
    font-size: 10.5px;
    color: rgba(255,255,255,0.88);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Centered text body for text stories ── */
.story-card-text-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 52px 12px 40px;
}

.story-card-text-body p {
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    line-height: 1.35;
    word-break: break-word;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.18);
    margin: 0;
}

/* ── Artistic top sheen on view cards ── */
.story-view-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 100%);
    border-radius: 13px 13px 0 0;
    z-index: 1;
    pointer-events: none;
}

.story-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #ffffff;
    font-weight: 800;
    flex-shrink: 0;
}

.story-avatar img,
.social-avatar img,
.nav-mini-avatar img,
.adm-avatar img,
.adm-topbar-avatar img,
.adm-cell-avatar img,
.cd-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-avatar span,
.social-avatar span,
.nav-mini-avatar span,
.adm-avatar span,
.adm-topbar-avatar span,
.adm-cell-avatar span,
.cd-avatar span {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
    color: #ffffff !important;
}

.story-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.story-create-entry {
    border: 0;
    min-width: 130px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 10px 8px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.75), rgba(255,255,255,0.98)),
        linear-gradient(135deg, rgba(79,70,229,0.08), rgba(236,72,153,0.08));
}

.story-create-plus {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.story-create-entry strong {
    font-size: 12px;
    color: #1e293b;
}

.story-create-entry > span:last-child {
    font-size: 12px;
    color: #64748b;
}

.story-input input {
    width: 100%;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    background: #ffffff;
    padding: 12px 14px;
    font-size: 14px;
}

.story-upload-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.story-upload-btn {
    flex: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    color: #4338ca;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
}

.story-upload-btn input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.story-submit-btn {
    border: none;
    border-radius: 14px;
    min-height: 44px;
    padding: 0 16px;
    background: #0f172a;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.story-compose-open {
    overflow: hidden;
}

.story-compose-modal[hidden] { display: none; }

/* ── Modal shell ── */
.story-compose-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: flex-end;       /* bottom-sheet on all sizes */
    justify-content: center;
}

.story-compose-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}

/* ── Card ── */
.story-compose-card {
    position: relative;
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 24px 24px 0 0;
    padding: 8px 20px 32px;
    background: #ffffff;
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* pull-down handle */
    scrollbar-width: none;
}
.story-compose-card::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
}
.story-compose-card::-webkit-scrollbar { display: none; }

/* ── Head ── */
.story-compose-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.story-card-top { display: flex; align-items: center; gap: 10px; }
.story-card-top strong { display: block; font-size: .92rem; font-weight: 700; color: #0f172a; }
.story-card-top span  { font-size: .74rem; color: #64748b; }

.story-compose-close {
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: #f1f5f9; color: #475569;
    font-size: 18px; line-height: 1;
    cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.story-compose-close:hover { background: #e2e8f0; }

/* ── Form ── */
.story-compose-form { display: flex; flex-direction: column; gap: 12px; }

.story-compose-input input {
    width: 100%; box-sizing: border-box;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    padding: 13px 16px;
    font-size: 15px; color: #1e293b; font-family: inherit;
    transition: border-color .15s;
}
.story-compose-input input:focus { outline: none; border-color: #818cf8; background: #fff; }
.story-compose-input input::placeholder { color: #94a3b8; }

/* ── Style panel ── */
.story-style-panel[hidden] { display: none; }
.story-style-panel {
    display: flex; flex-direction: column; gap: 0;
    border-radius: 16px; overflow: hidden;
    border: 1.5px solid #e8ecf4;
}

/* ── Preview ── */
.story-style-preview {
    height: 240px; border-radius: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: #4f46e5; color: #fff;
    transition: background .3s, color .2s; overflow: hidden;
    position: relative;
}
.story-style-preview p { margin: 0; font-size: 20px; font-weight: 700; padding: 0 16px; line-height: 1.35; position: relative; z-index: 1; }
.story-preview-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: none;
}
.story-style-preview.has-image .story-preview-img { display: block; }
.story-style-preview.has-image p { display: none; }

/* ── On-demand toolbar ── */
.story-style-toolbar {
    display: flex; align-items: center; gap: 0;
    background: #f8f9ff; border-top: 1.5px solid #e8ecf4;
}
.story-style-panel.has-image .story-style-toolbar { display: none; }
.story-toolbar-btn {
    flex: 1; height: 44px; border: none; background: transparent;
    color: #64748b; font-size: 11px; font-weight: 700; font-family: inherit;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
    border-right: 1px solid #e8ecf4; transition: background .12s, color .12s;
    flex-direction: column;
}
.story-toolbar-btn:last-child { border-right: none; }
.story-toolbar-btn:hover { background: #eff1fb; color: #334155; }
.story-toolbar-btn:active { background: #e0e7ff; }
.stbtn-aa {
    font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1;
    transition: font-family .15s;
}
.stbtn-dot {
    width: 20px; height: 20px; border-radius: 50%; display: block; flex-shrink: 0;
    transition: background .15s;
}
.stbtn-label { font-size: 10px; font-weight: 600; color: #94a3b8; line-height: 1; }

/* ── Visibility picker ── */
.story-visibility-bar {
    display: flex; gap: 6px; margin-bottom: 10px;
}
.story-vis-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; border-radius: 10px; border: 1.5px solid #e2e8f0;
    background: #f8fafc; color: #64748b;
    font-size: 12px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.story-vis-btn:hover { background: #f1f5f9; border-color: #c7d2e8; color: #334155; }
.story-vis-btn.is-active {
    background: #0f172a; border-color: #0f172a; color: #fff;
}

/* ── Actions ── */
.story-compose-actions { display: flex; gap: 10px; align-items: center; }

.story-compose-upload {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 48px; border-radius: 14px;
    border: 1.5px solid #e2e8f0; background: #f8fafc;
    font-size: 14px; font-weight: 600; color: #475569;
    cursor: pointer; transition: background .12s, border-color .12s; overflow: hidden;
}
.story-compose-upload:hover { background: #f1f5f9; border-color: #c7d2e8; }
.story-compose-upload input[type="file"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

.story-compose-submit {
    flex: 1.5; height: 48px; border-radius: 14px;
    border: none; background: #0f172a; color: #fff;
    font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: opacity .15s;
}
.story-compose-submit:hover { opacity: .88; }

/* ── Desktop: centered modal + restore preview ── */
@media(min-width: 700px) {
    .story-compose-modal { align-items: center; padding: 20px; }
    .story-compose-card {
        width: min(100%, 460px);
        max-height: 90dvh;
        border-radius: 24px;
        padding: 20px 24px 24px;
    }
    .story-compose-card::before { display: none; }
    .story-style-preview { height: 220px; }
}

.story-view-card {
    padding: 0;
    display: block;
}

.story-card-header .story-avatar {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    font-size: 13px;
}

.story-view-card.is-text-story {
    background: var(--story-card-background, linear-gradient(160deg, #eef2ff 0%, #fdf2f8 100%));
    color: var(--story-card-text, #ffffff);
}

.story-view-card.has-image {
    color: #ffffff;
}

.story-card-image,
.story-card-overlay {
    position: absolute;
    inset: 0;
}

.story-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-card-overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.8) 100%);
}

.story-view-card.is-text-story .story-card-overlay,
.story-stage-body.is-text-story .story-stage-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(15, 23, 42, 0.08) 100%);
}


/* ── Full-screen story viewer ── */

body.story-full-body {
    background: #000;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

body.story-full-body .site-header,
body.story-full-body .site-footer,
body.story-full-body .lc-mobile-bottom-nav,
body.story-full-body nav.lc-mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.story-full-body .page-wrap {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.sf-wrap {
    position: fixed;
    inset: 0;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

/* The story column — phone-sized on desktop */
.sf-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100%;
    overflow: hidden;
    background: #000;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Progress bar */
/* Progress wrap: segments + counter */
.sf-progress-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 12px 12px 0;
}

.sf-progress {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}

.sf-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.35);
    overflow: hidden;
}

.sf-seg-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    will-change: width;
    box-shadow: 0 0 4px rgba(255,255,255,.4);
}

.sf-seg-done .sf-seg-fill {
    width: 100%;
}

/* Counter e.g. "2 / 5" */
.sf-counter {
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.75);
    letter-spacing: .04em;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    line-height: 1;
}

/* Pause indicator */
.sf-pause-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    z-index: 30;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    transition: transform .15s ease, opacity .15s ease;
    opacity: 0;
    pointer-events: none;
}
.sf-paused .sf-pause-indicator {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
}


/* Top bar */
.sf-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 14px 18px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
}

.sf-back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    opacity: 0.9;
}

.sf-author {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.sf-author-meta strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.sf-author-meta span {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}

/* Story content — text stories are sandwiched between topbar and footer */
.sf-content {
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    bottom: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 0;
    box-sizing: border-box;
}

/* Image stories go full-bleed; topbar + footer overlay via z-index */
.sf-has-image {
    background: #000;
    top: 0;
    bottom: 0;
}

.sf-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sf-text-story {
    /* background / color / font set inline */
    padding: 48px 24px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-caption {
    text-align: center;
    padding: 0 32px;
}

.sf-caption p {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
}

.sf-caption-over {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 96px clears the ~92px footer on desktop; env() adds home-indicator space on mobile */
    padding: 80px 24px max(96px, calc(env(safe-area-inset-bottom, 0px) + 92px));
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.sf-caption-over p {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
    margin: 0;
}

/* Tap nav zones */
.sf-tap {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 38%;
    z-index: 10;
    text-decoration: none;
}

.sf-tap-prev { left: 0; }
.sf-tap-next { right: 0; }

/* Bottom footer */
.sf-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 18px max(28px, env(safe-area-inset-bottom, 28px));
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.sf-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.sf-like-btn {
    transition: background 0.15s, transform 0.15s;
    margin-left: auto;
    padding: 11px 18px;
    font-size: 16px;
}

.sf-like-btn i {
    font-size: 18px;
}

.sf-icon-btn:hover { background: rgba(255,255,255,0.25); }

.sf-like-btn { transition: background 0.15s, transform 0.15s; }

.sf-liked {
    background: rgba(251,113,133,0.25);
    border-color: rgba(251,113,133,0.5);
    color: #fb7185;
}

.sf-like-btn:active { transform: scale(0.92); }

.sf-delete-btn {
    color: #fca5a5;
    border-color: rgba(252,165,165,0.3);
    padding: 9px 13px;
}

/* Viewers bottom sheet */
.sf-sheet-wrap[hidden] { display: none; }

.sf-sheet-wrap {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sf-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.sf-sheet {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    animation: sf-sheet-up 0.28s cubic-bezier(0.32,0.72,0,1);
}

@keyframes sf-sheet-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.sf-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.sf-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.sf-sheet-head strong { font-size: 15px; color: #0f172a; }
.sf-sheet-head span   { font-size: 13px; color: #6b7280; }

.sf-sheet-body {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0 24px;
}

.sf-viewer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
}

.sf-viewer-row:hover { background: #f9fafb; }

.sf-viewer-liked-icon {
    margin-left: auto;
    flex-shrink: 0;
    color: #ef4444;
    font-size: 18px;
    animation: heartPulse 0.3s ease;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.sf-viewer-info strong { display: block; font-size: 14px; color: #111827; }
.sf-viewer-info span   { font-size: 12px; color: #6b7280; }

.sf-sheet-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
    padding: 24px;
}

/* Mobile-optimized story view */
@media only screen and (max-width: 575px) {
    body.story-full-body {
        background: #000;
        overflow: hidden;
        overscroll-behavior: none;
        /* No body-level safe-area padding — sf-wrap is fixed and handles it per-element */
    }

    /* sf-wrap spans the FULL viewport including notch/home-indicator areas for the
       black background effect. Individual children (progress, topbar, footer) each
       declare their own safe-area offsets so nothing overlaps hardware chrome. */
    .sf-wrap {
        position: fixed;
        inset: 0;
        background: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
    }

    .sf-stage {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }

    .sf-progress {
        gap: 2px;
        padding: max(12px, env(safe-area-inset-top, 12px)) 8px 0;
    }

    .sf-seg-fill {
        height: 2px;
    }

    .sf-topbar {
        /* Top padding clears both the progress bar and the notch/status-bar */
        padding: max(26px, calc(env(safe-area-inset-top, 0px) + 14px)) 10px 12px;
        gap: 8px;
    }

    .sf-back {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 20px;
    }

    .sf-author-meta strong {
        font-size: 13px;
    }

    .sf-author-meta span {
        font-size: 11px;
    }

    .story-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        min-height: 36px;
    }

    /* Text-story content clears the topbar height + notch, and the footer + home-indicator */
    .sf-content {
        top: max(80px, calc(env(safe-area-inset-top, 0px) + 70px));
        bottom: max(80px, calc(env(safe-area-inset-bottom, 0px) + 76px));
        padding: 0;
    }

    /* Image stories stay full-bleed on mobile too */
    .sf-has-image {
        top: 0;
        bottom: 0;
    }

    .sf-caption {
        padding: 0 16px;
    }

    .sf-caption p {
        font-size: 22px;
        line-height: 1.3;
    }

    /* caption-over: inherited desktop value (max 96px) already handles mobile well;
       env() bumps it further on home-indicator devices */
    .sf-caption-over p {
        font-size: 15px;
        font-weight: 600;
    }

    .sf-tap {
        width: 45%;
    }

    .sf-footer {
        gap: 8px;
        padding: 14px 12px max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px));
        justify-content: flex-end;
    }

    .sf-icon-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 8px 14px;
        gap: 5px;
        font-size: 13px;
        border-radius: 999px;
    }

    .sf-icon-btn span {
        font-size: 12px;
    }

    .sf-delete-btn {
        padding: 8px 12px;
        min-width: 44px;
        min-height: 44px;
    }

    .sf-views-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .sf-sheet {
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
    }

    .sf-sheet-head {
        padding: 12px 16px;
    }

    .sf-sheet-head strong {
        font-size: 14px;
    }

    .sf-sheet-head span {
        font-size: 12px;
    }

    .sf-sheet-body {
        padding: 4px 0 8px;
    }

    .sf-viewer-row {
        gap: 10px;
        padding: 8px 16px;
    }

    .sf-viewer-info strong {
        font-size: 13px;
    }

    .sf-viewer-info span {
        font-size: 11px;
    }
}

@media only screen and (max-width: 480px) {
    .sf-content {
        top: max(76px, calc(env(safe-area-inset-top, 0px) + 68px));
        bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 72px));
        padding: 0;
    }

    .sf-has-image {
        top: 0;
        bottom: 0;
    }

    .sf-caption p {
        font-size: 18px;
    }

    .sf-topbar {
        padding: max(24px, calc(env(safe-area-inset-top, 0px) + 12px)) 8px 10px;
    }

    .sf-author-meta strong {
        font-size: 12px;
    }

    .sf-author-meta span {
        font-size: 10px;
    }

    .sf-back {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .sf-caption p {
        font-size: 18px;
    }

    .sf-caption-over p {
        font-size: 14px;
    }

    .sf-footer {
        gap: 6px;
        padding: 10px 8px max(18px, calc(env(safe-area-inset-bottom, 12px) + 2px));
    }

    .sf-icon-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    .sf-sheet-head {
        padding: 10px 14px;
    }

    .sf-viewer-row {
        padding: 6px 14px;
    }
}

.circle-page {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.notifications-page {
    width: 100%;
}

.notifications-panel {
    width: 100%;
    box-sizing: border-box;
}


.circle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
}

.circle-main,
.circle-side {
    display: grid;
    gap: 18px;
    align-items: start;
}

.circle-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 20px;
    box-shadow: none;
    min-width: 0;
    overflow: hidden;
}

.circle-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.circle-map-toolbar,
.circle-map-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.circle-map-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #dbe4fb;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}

.circle-map-tool:hover {
    border-color: #94a3b8;
    color: #0f172a;
    background: #f8fafc;
    transform: translateY(-1px);
}

.circle-map-tool.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.circle-map-tool-primary {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.circle-map-tool-primary:hover {
    background: #1e293b;
    border-color: #1e293b;
    color: #ffffff;
}

.circle-map-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
    padding: 15px 18px;
    border-radius: 18px;
    border: 1px solid #000000;
    background: #000000;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.circle-map-cta:hover {
    background: #111827;
    border-color: #111827;
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.16);
}

.circle-map-helper {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.circle-panel-head h1,
.circle-panel-head h2 {
    margin: 6px 0 0;
}

.circle-college-tag {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    color: #4338ca;
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.circle-request-box {
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #fdf2f8 100%);
}

.circle-request-box h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.circle-request-list,
.circle-notification-list,
.notification-page-list {
    display: grid;
    gap: 12px;
}

.circle-request-item,
.notification-page-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: background 0.15s;
}

.notification-page-item.notif-unread {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.circle-request-item span,
.notification-page-item span {
    display: block;
    font-size: 12px;
    color: #64748b;
}

/* Avatar + type badge stack */
.notif-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.notif-type-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: block;
    border: 2px solid #fff;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.notif-type-badge i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: 0;
    font-size: 11px;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.notif-type-badge i::before {
    display: block;
    line-height: 1;
}

.notif-type-new_post {
    color: #334155;
}

.notif-type-circle_request {
    color: #0f172a;
}

.notif-type-circle_accept {
    color: #10b981;
}

.notif-type-profile_view {
    color: #f59e0b;
}

.notif-type-post_like {
    color: #ef4444;
}

.notif-type-post_comment {
    color: #475569;
}

.notif-type-post_reshare {
    color: #334155;
}

.notif-type-forum_post {
    background: #ede9fe;
    color: #6d28d9;
}

.notif-type-forum_reply {
    background: #ede9fe;
    color: #6366f1;
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-message {
    font-size: 13px;
    color: #1e293b;
    margin: 0 0 3px;
    line-height: 1.45;
}

.notif-time {
    font-size: 11px;
    color: #94a3b8;
}

.circle-request-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.circle-req-btn,
.circle-action-btn {
    border-radius: 12px;
    padding: 9px 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
}

.circle-req-accept {
    background: #0f172a;
    color: #fff;
    border: 1px solid #0f172a;
}
.circle-req-accept:hover {
    background: #1e293b;
    border-color: #1e293b;
    transform: translateY(-1px);
}

.circle-req-reject {
    background: #e2e8f0;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}
.circle-req-reject:hover {
    background: #cbd5e1;
    border-color: #cbd5e1;
}

.circle-request-item button,
.circle-action-btn {
    border: 1px solid #0f172a;
    border-radius: 12px;
    padding: 11px 14px;
    background: #0f172a;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.circle-request-item button:hover,
.circle-action-btn:hover {
    background: #1e293b;
    border-color: #1e293b;
    transform: translateY(-1px);
}

.circle-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.circle-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.circle-search-icon {
    position: absolute;
    left: 13px;
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

.circle-search-input {
    width: 100%;
    padding: 9px 36px 9px 34px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
    font-family: inherit;
    color: #172033;
    outline: none;
    transition: border-color 0.15s;
}

.circle-search-input:focus {
    border-color: #0f172a;
    background: #fff;
}

.circle-search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}

.circle-search-clear:hover {
    color: #475569;
}

.circle-year-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.circle-year-pill {
    padding: 4px 13px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
    white-space: nowrap;
}

.circle-year-pill:hover {
    border-color: #0f172a;
    color: #0f172a;
    background: #f1f5f9;
}

.circle-year-pill.active {
    background: #0f172a;
    border-color: #0f172a;
    color: #fff;
}

.circle-filter-results {
    font-size: 12px;
    color: #64748b;
}

.circle-member-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.circle-member-card,
.circle-empty-card {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.circle-empty-card.compact {
    padding: 14px;
}

.circle-member-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.circle-member-top-link,
.circle-request-meta-link {
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding: 6px;
    margin: -6px;
    transition: background 0.12s;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.circle-member-top-link:hover,
.circle-request-meta-link:hover {
    background: #f1f5f9;
}

.circle-member-top-link strong,
.circle-request-meta-link strong {
    color: #0f172a;
}

.circle-member-top strong {
    display: block;
}

.circle-member-top span {
    font-size: 12px;
    color: #64748b;
}

.circle-member-card p,
.circle-notice-item p,
.notification-page-item p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.circle-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.circle-card-actions form {
    margin: 0;
    min-width: 0;
}

.circle-card-actions .circle-action-btn,
.circle-card-actions .circle-view-profile-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    text-align: center;
}

.circle-view-profile-btn {
    border-radius: 12px;
    padding: 11px 14px;
}

.circle-state {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.circle-state.connected {
    background: #dcfce7;
    color: #166534;
}

.circle-state.pending {
    background: #fef3c7;
    color: #92400e;
}

.circle-map {
    position: relative;
    min-height: 340px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.04), transparent 52%),
        linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(241,245,249,0.94) 100%);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.circle-svg-lines {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.circle-orbit-ring {
    --ring-radius: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--ring-radius) * 2);
    height: calc(var(--ring-radius) * 2);
    margin: calc(var(--ring-radius) * -1) 0 0 calc(var(--ring-radius) * -1);
    border-radius: 50%;
    border: 1px dashed rgba(15, 23, 42, 0.12);
    pointer-events: none;
    z-index: 1;
}

.circle-map::before {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.86) 0%, rgba(239,246,255,0.28) 100%);
    border: 1px solid rgba(191, 219, 254, 0.4);
    pointer-events: none;
}

.circle-map-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #94a3b8;
    padding: 24px;
    width: 80%;
}

.circle-map-empty i {
    font-size: 28px;
    margin-bottom: 10px;
    display: block;
    color: #c7d2fe;
}

.circle-map-empty p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.circle-center-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    z-index: 2;
}

.circle-center-node .story-avatar {
    width: 64px;
    height: 64px;
}

.circle-center-node strong {
    background: rgba(255,255,255,0.9);
    padding: 6px 10px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.circle-orbit-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(var(--angle)) translateX(var(--radius, 120px)) rotate(calc(var(--angle) * -1));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 92px;
    margin-left: -46px;
    margin-top: -28px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    z-index: 2;
    transition: transform 0.18s, filter 0.18s;
}

.circle-orbit-node:hover {
    transform: rotate(var(--angle)) translateX(var(--radius, 120px)) rotate(calc(var(--angle) * -1)) scale(1.08);
    filter: drop-shadow(0 14px 24px rgba(37, 99, 235, 0.18));
}

.circle-orbit-node[data-level="2"] .story-avatar,
.circle-orbit-node[data-level="3"] .story-avatar,
.circle-orbit-node[data-level="4"] .story-avatar,
.circle-orbit-node[data-level="5"] .story-avatar {
    box-shadow: 0 10px 18px rgba(59, 130, 246, 0.12);
}

.circle-orbit-node[data-level="2"] span,
.circle-orbit-node[data-level="3"] span,
.circle-orbit-node[data-level="4"] span,
.circle-orbit-node[data-level="5"] span {
    color: #64748b;
}

.circle-orbit-node span {
    font-size: 11px;
    color: #475569;
    line-height: 1.35;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.circle-orbit-node .story-avatar {
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.14);
}

.circle-map.is-3d {
    transform-style: preserve-3d;
    perspective: 1100px;
}

.circle-map.is-3d .circle-orbit-ring {
    transform: translateZ(-24px) rotateX(74deg);
    border-color: rgba(99, 102, 241, 0.28);
}

.circle-map.is-3d .circle-center-node {
    transform: translate(-50%, -50%) translateZ(58px);
}

.circle-map.is-3d .circle-orbit-node {
    transform:
        rotate(var(--angle))
        translateX(var(--radius, 120px))
        translateZ(var(--depth, 0px))
        rotate(calc(var(--angle) * -1));
}

.circle-map.is-3d .circle-orbit-node:hover {
    transform:
        rotate(var(--angle))
        translateX(var(--radius, 120px))
        translateZ(calc(var(--depth, 0px) + 18px))
        rotate(calc(var(--angle) * -1))
        scale(1.06);
}

.circle-map.is-3d .circle-svg-lines {
    opacity: 0.55;
}

.circle-summary-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.circle-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.circle-summary-item span {
    color: #64748b;
}

.circle-map-modal[hidden] {
    display: none;
}

.circle-map-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.circle-map-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(10px);
}

.circle-map-modal-panel {
    position: relative;
    z-index: 1;
    width: min(1400px, calc(100vw - 48px));
    height: min(92vh, 980px);
    margin: 4vh auto;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fbff 0%, #eef3ff 100%);
    border: 1px solid rgba(219, 228, 251, 0.8);
    box-shadow: 0 40px 90px rgba(15, 23, 42, 0.35);
    display: grid;
    grid-template-rows: auto 1fr;
}

.circle-map-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(219, 228, 251, 0.7);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
}

.circle-map-modal-head h2 {
    margin: 6px 0 0;
}

.circle-map-modal-stage {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 18px;
    padding: 22px;
    align-items: stretch;
    perspective: 1400px;
}

.circle-map-modal-stage.is-dragging {
    cursor: grabbing;
}

.circle-map-fullscreen {
    min-height: 100%;
    height: 100%;
    border-radius: 26px;
    --fullscreen-orbit-radius: 210px;
    --map-scale: 1;
    transform: scale(var(--map-scale));
    transform-origin: center center;
}

.circle-map-fullscreen.is-3d {
    transform: scale(var(--map-scale)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.circle-map-fullscreen .circle-orbit-ring {
    width: calc(var(--ring-radius-fullscreen, var(--ring-radius, 120px)) * 2);
    height: calc(var(--ring-radius-fullscreen, var(--ring-radius, 120px)) * 2);
    margin: calc(var(--ring-radius-fullscreen, var(--ring-radius, 120px)) * -1) 0 0 calc(var(--ring-radius-fullscreen, var(--ring-radius, 120px)) * -1);
}

.circle-map-fullscreen .circle-center-node .story-avatar {
    width: 86px;
    height: 86px;
}

.circle-map-fullscreen .circle-orbit-node {
    width: 120px;
    margin-left: -60px;
    margin-top: -34px;
    transform: rotate(var(--angle)) translateX(var(--fullscreen-radius, var(--fullscreen-orbit-radius, 210px))) rotate(calc(var(--angle) * -1));
}

.circle-map-fullscreen .circle-orbit-node:hover {
    transform: rotate(var(--angle)) translateX(var(--fullscreen-radius, var(--fullscreen-orbit-radius, 210px))) rotate(calc(var(--angle) * -1)) scale(1.08);
}

.circle-map-fullscreen .circle-orbit-node span {
    max-width: 112px;
    font-size: 12px;
}

.circle-map-fullscreen.is-3d .circle-orbit-node {
    transform:
        rotate(var(--angle))
        translateX(var(--fullscreen-radius, var(--fullscreen-orbit-radius, 210px)))
        translateZ(var(--depth, 0px))
        rotate(calc(var(--angle) * -1));
}

.circle-map-fullscreen.is-3d .circle-orbit-node:hover {
    transform:
        rotate(var(--angle))
        translateX(var(--fullscreen-radius, var(--fullscreen-orbit-radius, 210px)))
        translateZ(calc(var(--depth, 0px) + 24px))
        rotate(calc(var(--angle) * -1))
        scale(1.05);
}

.circle-map-fullscreen .circle-orbit-node.is-selected .story-avatar {
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.18), 0 16px 34px rgba(37, 99, 235, 0.26);
}

.circle-map-fullscreen .circle-orbit-node.is-selected span {
    color: #1d4ed8;
    font-weight: 700;
}

.circle-map-modal-meta {
    display: grid;
    gap: 12px;
    align-content: start;
}

.circle-map-inspector,
.circle-map-tips {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(219, 228, 251, 0.85);
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 8px;
}

.circle-map-inspector-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.circle-map-inspector strong,
.circle-map-tips strong {
    color: #0f172a;
}

.circle-map-inspector span,
.circle-map-tips span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.circle-map-inspector-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    border: 1px solid #0f172a;
    background: #0f172a;
}

.circle-map-inspector-link:hover {
    background: #1e293b;
    border-color: #1e293b;
}

body.circle-map-modal-open {
    overflow: hidden;
}

.circle-notice-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.circle-request-meta,
.circle-notice-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.circle-request-meta > div,
.circle-member-top > div,
.circle-notice-top strong {
    min-width: 0;
}

.circle-request-meta span {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 13px;
}

.circle-notice-top {
    margin-bottom: 8px;
}

.notification-page-item {
    justify-content: flex-start;
    align-items: flex-start;
}

.notification-page-item .story-avatar {
    margin-top: 2px;
}

.notifications-panel {
    max-width: none;
    margin: 0;
}

/* ── Notifications mobile: edge-to-edge, no rounded corners ── */
@media (max-width: 800px) {
    body.notifications-body .page-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body.notifications-body .notifications-panel {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    body.notifications-body .notification-page-list {
        gap: 0 !important;
    }
    body.notifications-body .notification-page-item {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }
}

@media (max-width: 1080px) {
    .circle-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .circle-main,
    .circle-side {
        gap: 16px;
    }

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

    .circle-map-modal-panel {
        width: min(100vw - 28px, 1200px);
        height: min(94vh, 920px);
    }

    .circle-map-modal-stage {
        grid-template-columns: 1fr;
    }

    .circle-map-modal-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .circle-panel {
        padding: 16px;
        border-radius: 0;
    }

    .circle-panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 14px;
    }

    .circle-map-toolbar,
    .circle-map-modal-actions {
        width: 100%;
    }

    .circle-map-tool {
        justify-content: center;
    }

    .circle-college-tag {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    .circle-request-item,
    .circle-notice-item {
        padding: 12px;
    }

    .circle-request-item {
        flex-direction: column;
        align-items: stretch;
    }

    .circle-request-item form,
    .circle-request-item button,
    .circle-action-btn {
        width: 100%;
    }

    .circle-card-actions {
        grid-template-columns: 1fr;
    }

    .circle-card-actions form {
        width: 100%;
    }

    .circle-year-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .circle-year-pills::-webkit-scrollbar {
        display: none;
    }

    .circle-member-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .circle-member-card,
    .circle-empty-card {
        padding: 14px;
    }

    .circle-member-top {
        align-items: flex-start;
    }

    .circle-member-top strong,
    .circle-request-meta strong {
        display: block;
        line-height: 1.35;
        word-break: break-word;
    }

    .circle-member-top span,
    .circle-request-meta span {
        word-break: break-word;
    }

    .circle-map {
        min-height: 290px;
    }

    .circle-orbit-ring {
        width: 190px;
        height: 190px;
        margin: -95px 0 0 -95px;
    }

    .circle-center-node .story-avatar {
        width: 56px;
        height: 56px;
    }

    .circle-center-node strong {
        max-width: 120px;
        font-size: 12px;
        line-height: 1.3;
        word-break: break-word;
    }

    .circle-orbit-node {
        width: 74px;
        margin-left: -37px;
        margin-top: -22px;
        transform: rotate(var(--angle)) translateX(94px) rotate(calc(var(--angle) * -1));
    }

    .circle-orbit-node:hover {
        transform: rotate(var(--angle)) translateX(94px) rotate(calc(var(--angle) * -1)) scale(1.04);
    }

    .circle-orbit-node span {
        max-width: 72px;
        font-size: 10px;
    }

    .circle-map-cta {
        padding: 13px 16px;
        border-radius: 14px;
    }

    .circle-map-modal-panel {
        width: calc(100vw - 18px);
        height: calc(100vh - 18px);
        margin: 9px auto;
        border-radius: 22px;
    }

    .circle-map-modal-head {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .circle-map-modal-stage {
        padding: 14px;
        gap: 14px;
    }

    .circle-map-fullscreen {
        min-height: 420px;
    }

    .circle-map-fullscreen .circle-orbit-ring {
        width: 250px;
        height: 250px;
        margin: -125px 0 0 -125px;
    }

    .circle-map-fullscreen .circle-center-node .story-avatar {
        width: 62px;
        height: 62px;
    }

    .circle-map-fullscreen .circle-orbit-node {
        width: 82px;
        margin-left: -41px;
        margin-top: -24px;
        transform: rotate(var(--angle)) translateX(var(--fullscreen-orbit-radius, 122px)) rotate(calc(var(--angle) * -1));
    }

    .circle-map-fullscreen .circle-orbit-node:hover {
        transform: rotate(var(--angle)) translateX(var(--fullscreen-orbit-radius, 122px)) rotate(calc(var(--angle) * -1)) scale(1.05);
    }

    .circle-map-fullscreen .circle-orbit-node span {
        max-width: 76px;
        font-size: 10px;
    }

    .circle-map-fullscreen.is-3d .circle-orbit-node {
        transform:
            rotate(var(--angle))
            translateX(var(--fullscreen-orbit-radius, 122px))
            translateZ(var(--depth, 0px))
            rotate(calc(var(--angle) * -1));
    }

    .circle-map-fullscreen.is-3d .circle-orbit-node:hover {
        transform:
            rotate(var(--angle))
            translateX(var(--fullscreen-orbit-radius, 122px))
            translateZ(calc(var(--depth, 0px) + 16px))
            rotate(calc(var(--angle) * -1))
            scale(1.04);
    }
}

@media (max-width: 520px) {
    .circle-request-box {
        padding: 14px;
    }

    .circle-search-input {
        font-size: 16px;
    }

    .circle-year-pill {
        padding: 7px 12px;
        font-size: 11px;
    }

    .circle-map {
        min-height: 250px;
    }

    .circle-orbit-ring {
        width: 156px;
        height: 156px;
        margin: -78px 0 0 -78px;
    }

    .circle-center-node .story-avatar {
        width: 48px;
        height: 48px;
    }

    .circle-orbit-node {
        width: 64px;
        margin-left: -32px;
        margin-top: -18px;
        transform: rotate(var(--angle)) translateX(76px) rotate(calc(var(--angle) * -1));
    }

    .circle-orbit-node:hover {
        transform: rotate(var(--angle)) translateX(76px) rotate(calc(var(--angle) * -1)) scale(1.03);
    }

    .circle-orbit-node span {
        max-width: 62px;
    }

    .circle-summary-item {
        padding: 10px 12px;
    }

    .circle-map-modal-meta {
        grid-template-columns: 1fr;
    }

    /* Modal action buttons: icon-only compact row on small screens */
    .circle-map-modal-actions {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding-bottom: 2px;
    }

    .circle-map-modal-actions::-webkit-scrollbar {
        display: none;
    }

    .circle-map-tool {
        flex-shrink: 0;
        width: auto !important;
        padding: 9px 12px;
        gap: 0;
    }

    .circle-map-tool span {
        display: none;
    }

    .circle-map-tool i {
        font-size: 15px;
    }
}

.profile-page {
    width: 100%;
}

.profile-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.profile-main-column,
.profile-side-column {
    display: grid;
    gap: 16px;
}

.profile-top-stack {
    display: grid;
    gap: 16px;
}

/* Profile page — wider sidebars, narrower feed */
.profile-social-shell {
    margin-top: 20px;
    grid-template-columns: 380px minmax(0, 1fr) 380px;
}

.profile-activity-side,
.profile-activity-feed {
    min-width: 0;
}

.profile-activity-side {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 16px;
}

.profile-activity-feed .profile-section-card {
    padding: 18px;
}

.profile-feed-list {
    display: grid;
    gap: 14px;
}

.profile-feed-card {
    width: 100%;
}

.profile-hero-card,
.profile-section-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

/* Cover band */
.profile-cover-band {
    height: 220px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1e293b 50%, #334155 100%);
    position: relative;
    overflow: hidden;
}

.profile-cover-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 10% 80%, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(255,255,255,0.04) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 60%);
}

.profile-cover-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 24px,
            rgba(255,255,255,0.018) 24px,
            rgba(255,255,255,0.018) 25px
        );
}

.profile-hero-body {
    padding: 0 28px 26px;
}

.profile-hero-overview {
    margin: 0 28px 28px;
    padding-top: 22px;
    border-top: 1px solid #e2e8f0;
}

.profile-hero-overview .profile-section-head {
    margin-bottom: 16px;
}

/* Top row: avatar (overlapping) + actions */
.profile-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
}

/* Avatar */
.profile-avatar-lg {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
    border: 4px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #0f172a, 0 8px 28px rgba(15,23,42,0.22);
    flex-shrink: 0;
}

.profile-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-lg span {
    font-size: 36px;
    font-weight: 800;
    color: #1e293b;
}

.profile-avatar-stack {
    position: relative;
    width: 108px;
    height: 108px;
    margin-top: -62px;
    flex-shrink: 0;
}

/* Pencil badge on avatar */
.avatar-edit-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(15,23,42,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.avatar-edit-badge:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(15,23,42,0.18);
}

.avatar-edit-badge input[type="file"] {
    display: none;
}

/* Crop modal */
.crop-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.crop-modal.is-open {
    opacity: 1;
    pointer-events: all;
}

.crop-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.crop-modal-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 24px 64px rgba(15,23,42,0.28);
    overflow: hidden;
    transform: translateY(8px);
    transition: transform 0.2s;
}

.crop-modal.is-open .crop-modal-card {
    transform: translateY(0);
}

.crop-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.crop-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.crop-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.crop-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.crop-modal-body {
    padding: 20px;
    background: #0f172a;
    max-height: 380px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crop-modal-body img {
    max-width: 100%;
    max-height: 340px;
    display: block;
}

.crop-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid #e2e8f0;
}

.crop-btn-cancel {
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    padding: 8px 18px;
    background: #ffffff;
    color: #475569;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.crop-btn-cancel:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.crop-btn-confirm {
    border: none;
    border-radius: 999px;
    padding: 9px 20px;
    background: #0f172a;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s, transform 0.1s;
}

.crop-btn-confirm:hover {
    background: #1e293b;
    transform: translateY(-1px);
}

.crop-btn-confirm:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Identity */
.profile-hero-identity {
    margin-bottom: 20px;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.profile-name {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.6px;
    line-height: 1.1;
}

.profile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #0f172a;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.profile-kicker i,
.eyebrow i {
    margin-right: 2px;
}

.profile-kicker i {
    color: #94a3b8;
}

.profile-subline {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.profile-subline span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* College chip — clickable link in subline */
.profile-college-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 3px 10px 3px 8px;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.profile-college-chip:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.profile-college-chip i {
    font-size: 11px;
    color: #64748b;
}

/* College link in overview data list */
.profile-data-college-link {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px solid #e2e8f0;
    transition: border-color 0.12s;
}

.profile-data-college-link:hover {
    border-color: #0f172a;
}

.profile-view-strip-block {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.profile-view-strip {
    display: flex;
    align-items: center;
}

.profile-view-strip-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    text-decoration: none;
}

.profile-view-strip-avatar:first-child {
    margin-left: 0;
}

.profile-view-strip-avatar .story-avatar {
    width: 100%;
    height: 100%;
}

.profile-view-strip-empty {
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 600;
}

.profile-view-strip-copy {
    display: grid;
    gap: 2px;
}

.profile-view-strip-copy strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
}

.profile-view-strip-copy span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.profile-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 4px;
    transition: color 0.2s ease;
}

.profile-view-all-link:hover {
    color: #2563eb;
}

.profile-view-all-link i {
    font-size: 10px;
}

/* Actions */
.profile-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.profile-hero-btn,
.profile-hero-actions button {
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    background: #0f172a;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background 0.15s, transform 0.1s;
}

.profile-hero-btn:hover,
.profile-hero-actions button:hover {
    background: #1e293b;
    transform: translateY(-1px);
}

.profile-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
}

.profile-state-pill.connected {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.profile-state-pill.pending {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.profile-circle-pill {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a;
}

/* Fact grid (kept for compatibility) */
.profile-fact-grid {
    display: none; /* replaced by profile-stat-strip */
}

/* ── Combined horizontal scroll rail ── */
.profile-scroll-rail {
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.profile-scroll-rail::-webkit-scrollbar {
    display: none;
}

.profile-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 8px;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

/* Mobile: fixed width + horizontal scroll */
@media (max-width: 800px) {
    .profile-scroll-rail {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .profile-rail-item {
        flex: 0 0 auto;
        min-width: 80px;
        padding: 12px 14px;
        scroll-snap-align: start;
    }
}

.profile-rail-item + .profile-rail-item::before {
    content: '';
    position: absolute;
    left: 0; top: 22%; bottom: 22%;
    width: 1px;
    background: #f1f5f9;
}

.profile-rail-item-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s;
}

.profile-rail-item-link:hover {
    background: #f8fafc;
}

.profile-rail-accent .profile-rail-icon,
.profile-rail-accent .profile-rail-value {
    color: #0f172a;
}

.profile-rail-accent .profile-rail-label {
    color: #0f172a;
    font-weight: 800;
}

.profile-rail-icon {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 1px;
}

.profile-rail-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    white-space: nowrap;
}

.profile-rail-value {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.profile-fact-card {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

.profile-fact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: #0f172a;
    opacity: 0;
    transition: opacity 0.15s;
}

.profile-fact-card-link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.profile-fact-card-link:hover {
    background: #f1f5f9;
    border-color: #0f172a;
}

.profile-fact-card-link:hover::before {
    opacity: 1;
}

.profile-fact-card span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.profile-fact-card strong {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

/* Social links */
.profile-link-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
}

.profile-link-row a {
    text-decoration: none;
    color: #0f172a;
    font-weight: 700;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    border: 1.5px solid #0f172a;
    transition: background 0.15s, transform 0.1s;
}

.profile-link-row a:hover {
    background: #1e293b;
    border-color: #1e293b;
    transform: translateY(-1px);
}

/* Section card */
.profile-section-card {
    padding: 24px 28px;
}

.profile-section-head {
    margin-bottom: 20px;
}

.profile-section-head h2 {
    margin: 5px 0 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #0f172a;
}

.profile-section-sub {
    margin: 8px 0 0;
    color: #64748b;
    line-height: 1.65;
    font-size: 14px;
}

/* Bio */
.profile-bio {
    margin: 0;
    color: #475569;
    line-height: 1.75;
    font-size: 14.5px;
}

.profile-bio-full {
    max-width: 100%;
}

.profile-bio-wrap {
    position: relative;
    padding: 6px 0 4px;
    margin-bottom: 18px;
}

.profile-bio-quote {
    font-size: 28px;
    color: #cbd5e1;
    line-height: 1;
    display: block;
}

.profile-bio-quote-open {
    margin-bottom: 6px;
}

.profile-bio-quote-close {
    text-align: right;
    margin-top: 6px;
}

/* Overview */
.profile-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    gap: 24px;
    align-items: start;
}

/* Bio inside overview */
.profile-bio.profile-bio-full {
    margin: 0 0 18px;
}

/* 4-column info grid */
.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.profile-info-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 8px 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    min-width: 0;
    gap: 6px;
    transition: background 0.12s, border-color 0.12s;
}

.profile-info-tile-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.profile-info-tile-link:hover {
    background: #f1f5f9;
    border-color: #0f172a;
}

.profile-info-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #0f172a;
    flex-shrink: 0;
}

.profile-info-tile-link:hover .profile-info-tile-icon {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.profile-info-tile-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    white-space: nowrap;
}

.profile-info-tile-value {
    font-size: 11.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Post cards (kept for compatibility) */
.profile-post-list {
    display: grid;
    gap: 16px;
}

.profile-post-card {
    padding: 18px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.profile-post-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.profile-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-post-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
    letter-spacing: -0.3px;
}

.profile-post-card p {
    margin: 0;
    color: #475569;
    line-height: 1.72;
}

.profile-post-body {
    display: grid;
    gap: 14px;
}

.profile-post-body.has-media {
    grid-template-columns: minmax(0, 0.78fr) minmax(240px, 0.92fr);
    align-items: start;
}

.profile-post-copy {
    min-width: 0;
}

.profile-post-media {
    border-radius: 14px;
    overflow: hidden;
    background: #e2e8f0;
}

.profile-post-image {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    display: block;
}

/* Sidebar stats */
.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.profile-stat-card {
    padding: 16px 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: background 0.12s, border-color 0.12s;
}

.profile-stat-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.profile-circle-stat-card {
    background: #0f172a !important;
    border-color: #0f172a !important;
}

.profile-circle-stat-card span {
    color: rgba(255,255,255,0.5) !important;
}

.profile-circle-stat-card strong {
    color: #ffffff !important;
}

.profile-stat-card span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.profile-stat-card strong {
    display: block;
    margin-top: 6px;
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -1px;
    line-height: 1;
}

/* Circle mini */
.profile-story-list,
.profile-circle-mini {
    display: grid;
    gap: 8px;
}

.profile-circle-fact-card,
.profile-circle-stat-card {
    background: #0f172a;
    border-color: #0f172a;
}

.profile-circle-fact-card:hover,
.profile-circle-stat-card:hover {
    background: #1e293b;
    border-color: #0f172a;
}

.profile-circle-fact-card span,
.profile-circle-stat-card span {
    color: rgba(255, 255, 255, 0.78);
}

.profile-circle-fact-card strong,
.profile-circle-stat-card strong {
    color: #ffffff;
}

.profile-circle-mini-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s;
    min-width: 0;
}

.profile-circle-mini-item .story-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    font-size: 13px;
}

.profile-circle-mini-item:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.profile-circle-mini-item span {
    color: #0f172a;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Story cards */
.profile-story-card {
    position: relative;
    min-height: 180px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
    transition: transform 0.2s;
}

.profile-story-card:hover {
    transform: translateY(-2px);
}

.profile-story-card img,
.profile-story-overlay {
    position: absolute;
    inset: 0;
}

.profile-story-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-story-overlay {
    background: linear-gradient(180deg, transparent 30%, rgba(15,23,42,0.78) 100%);
}

.profile-story-copy {
    position: relative;
    z-index: 2;
    padding: 16px;
    color: #ffffff;
}

.profile-story-copy strong {
    display: block;
    font-size: 14px;
    line-height: 1.4;
}

.profile-story-copy span {
    font-size: 11.5px;
    opacity: 0.8;
}

.feed-user-link {
    text-decoration: none;
    color: inherit;
}

.feed-user-link:hover {
    color: #355ea8;
}

.hero-card {
    background: #ffffff;
    padding: 56px;
    border-radius: 28px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.eyebrow {
    color: #2563eb;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 13px;
    margin-bottom: 14px;
}

.hero-card h1 {
    font-size: 48px;
    line-height: 1.05;
    margin: 0 0 18px;
}

.hero-card p {
    max-width: 760px;
    font-size: 18px;
    line-height: 1.65;
    color: #475569;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.social-shell {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 270px;
    gap: 16px;
    align-items: start;
}

.social-column {
    display: grid;
    gap: 12px;
}

.social-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 18px;
    box-shadow: none;
}

.profile-rail-card {
    padding: 16px;
}

.rail-profile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.rail-profile-link {
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding: 8px;
    margin: -8px;
    transition: background 0.15s;
}

.rail-profile-link:hover {
    background: #f1f5f9;
}

.rail-profile-chevron {
    font-size: 11px;
    color: #cbd5e1;
    margin-left: auto;
    flex-shrink: 0;
    transition: color 0.15s;
}

.rail-profile-link:hover .rail-profile-chevron {
    color: #94a3b8;
}

.rail-avatar {
    width: 38px;
    height: 38px;
}

.rail-profile-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rail-profile-copy strong,
.rail-brand {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.rail-profile-copy span,
.rail-brand-copy {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.rail-brand-copy {
    margin: 8px 0 0;
}

.rail-shortcuts {
    display: grid;
    gap: 4px;
}

.rail-link {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    color: #1f2937;
}

.rail-link:hover,
.rail-link-active {
    background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%);
    color: #4338ca;
}

.rail-cta-black {
    display: block;
    padding: 11px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    background: #0f172a;
    color: #ffffff !important;
    text-align: center;
    transition: background 0.15s;
}

.rail-cta-black:hover {
    background: #1e293b;
    color: #ffffff !important;
}

.rail-explore-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.12s;
}

.rail-explore-card:hover {
    box-shadow: 0 18px 40px rgba(79, 70, 229, 0.12);
    transform: translateY(-1px);
}

.rail-explore-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.rail-explore-icon--company {
    background: #fef3c7;
    color: #b45309;
}

.rail-explore-icon--college {
    background: #d1fae5;
    color: #065f46;
}

.rail-explore-icon--forum {
    background: #ede9fe;
    color: #6d28d9;
}

.rail-explore-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rail-explore-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}

.rail-explore-text span {
    font-size: 11.5px;
    color: #94a3b8;
}

.rail-explore-arrow {
    font-size: 11px;
    color: #cbd5e1;
    transition: color 0.15s, transform 0.15s;
}

.rail-explore-card:hover .rail-explore-arrow {
    color: #64748b;
    transform: translateX(3px);
}

.rail-forum-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
    border-color: #ddd6fe !important;
    transition: box-shadow 0.15s, transform 0.12s;
}
.rail-forum-card:hover {
    box-shadow: 0 8px 24px rgba(109, 40, 217, 0.13);
    transform: translateY(-1px);
}
.rail-forum-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.rail-forum-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #6d28d9;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(109,40,217,.3);
}
.rail-forum-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.rail-forum-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #3b0764;
}
.rail-forum-text span {
    font-size: 11.5px;
    color: #7c3aed;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rail-forum-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: #059669;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
    letter-spacing: .02em;
    flex-shrink: 0;
}

.social-actions {
    margin-top: 22px;
}

.feed-side-card {
    padding: 16px 18px;
}

.side-card-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 6px;
}

.composer-card {
    padding: 16px;
}

.composer-top {
    margin-bottom: 10px;
}

.composer-form {
    display: grid;
    gap: 9px;
}

.composer-field input,
.composer-field textarea,
.composer-select select,
.report-form select,
.report-form textarea,
.comment-form textarea {
    width: 100%;
    border: 1px solid #d7dfeb;
    border-radius: 16px;
    background: #f8fafc;
    padding: 12px 13px;
    font-size: 14px;
    color: #172033;
}

.composer-prompt {
    padding: 11px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #eff6ff 0%, #fdf2f8 100%);
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.composer-field textarea,
.report-form textarea {
    min-height: 132px;
    resize: vertical;
}

.comment-form textarea {
    min-height: 52px;
    resize: none;
}

.composer-meta {
    display: grid;
    gap: 10px;
}

.composer-title-field input {
    border-radius: 12px;
}

.composer-type-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.composer-type-picker input[type="hidden"] {
    display: none;
}

.composer-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #d7dfeb;
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.composer-type-chip i {
    font-size: 12px;
}

.composer-type-chip:hover {
    border-color: #0f172a;
    color: #0f172a;
    background: #f8fafc;
}

.composer-type-chip.is-active {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.composer-privacy-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
}

.privacy-label {
    display: none;
}

#id_privacy {
    padding: 6px 10px;
    border: 1px solid #d7dfeb;
    border-radius: 6px;
    font-size: 12px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 100px;
}

#id_privacy:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

#id_privacy:focus {
    outline: none;
    border-color: #0f172a;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.07);
}

.composer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.composer-row[hidden],
.composer-poll-builder[hidden] { display: none !important; }

.composer-file-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    padding: 10px 12px;
}

.composer-file-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #334155;
    font-size: 12.5px;
    font-weight: 800;
}

.composer-file-label i {
    color: #64748b;
}

.composer-file input {
    width: 100%;
    padding: 0;
    font-size: 13px;
    color: #475569;
}

.composer-file input::file-selector-button {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    margin-right: 10px;
    background: #0f172a;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
}

.composer-file input::-webkit-file-upload-button {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    margin-right: 10px;
    background: #0f172a;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.composer-actions {
    display: flex;
    justify-content: flex-end;
}

.composer-actions-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.composer-expand-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #d7dfeb;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.composer-expand-btn:hover,
.composer-expand-btn:focus-visible {
    border-color: #94a3b8;
    background: #f1f5f9;
    color: #0f172a;
    outline: none;
}

#composer-submit-btn {
    margin-left: auto;
}

.composer-card.is-expanded .composer-expand-btn {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.social-shell .primary-btn {
    background: #0f172a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.social-shell .secondary-btn {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

.mini-stat-card {
    padding: 10px 18px;
}

.mini-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #edf2f7;
    color: #475569;
}

.mini-stat-row:last-child {
    border-bottom: none;
}

.mini-stat-row strong {
    color: #0f172a;
    font-size: 20px;
}

.mini-stat-link {
    text-decoration: none;
    transition: background 0.15s ease, border-radius 0.15s ease, padding 0.15s ease, margin 0.15s ease;
}

.mini-stat-link:hover {
    margin: 0 -8px;
    padding: 14px 8px;
    border-radius: 12px;
    background: #f8fafc;
}

.directory-page {
    width: 100%;
}

.directory-shell {
    display: grid;
    gap: 20px;
}

.directory-head h1 {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    color: #0f172a;
}

.directory-head p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 14px;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.directory-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #dde7fb;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.08);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.directory-card:hover {
    transform: translateY(-2px);
    border-color: #c7d2fe;
    background: #f8fbff;
}

.directory-avatar {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

.directory-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.directory-card-copy {
    min-width: 0;
}

.directory-card-copy strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
}

.directory-card-copy span {
    display: block;
    margin-top: 4px;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
}

.directory-card-copy p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

/* ── Company Directory Cards ─────────────────────────────────── */

.dir-company-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.dir-co-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.dir-co-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 20px rgba(15,23,42,0.07);
}

.dir-co-link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    flex: 1;
}

.dir-co-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #f1f5f9;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.dir-co-photo {
    overflow: hidden;
    padding: 0;
}

.dir-co-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dir-co-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dir-co-name {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dir-co-link:hover .dir-co-name { color: #0f172a; }

.dir-co-industry {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.dir-co-location {
    font-size: 12.5px;
    color: #64748b;
}

.dir-co-location i,
.dir-co-followers i { margin-right: 4px; font-size: 11px; }

.dir-co-followers {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.dir-co-follow-form { align-self: flex-end; }

/* Follow button */
.follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid #0f172a;
    background: #ffffff;
    color: #0f172a;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    text-decoration: none;
    font-family: inherit;
}

.follow-btn:hover {
    background: #0f172a;
    color: #ffffff;
}

.follow-btn-following {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.follow-btn-unfollow { display: none; }
.follow-btn-following:hover .follow-btn-label { display: none; }
.follow-btn-following:hover .follow-btn-unfollow { display: inline; }
.follow-btn-following:hover { background: #ef4444; border-color: #ef4444; }

.follow-btn-sm { padding: 6px 14px; font-size: 12.5px; border-radius: 7px; }

/* ── Company Profile Page ─────────────────────────────────────── */

.cp-back-bar {
    margin-bottom: 18px;
}

.cp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: color 0.14s;
}

.cp-back-link:hover { color: #0f172a; }

.cp-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
}

.cp-sidebar {
    position: sticky;
    top: 76px;
}

.cp-sidebar-right {
    align-self: start;
}

.cp-info-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.04);
}

.cp-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding-bottom: 20px;
}

.cp-brand-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #f1f5f9;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-brand-icon svg { width: 30px; height: 30px; }

.cp-brand-icon img,
.company-page-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.cp-brand-name {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.cp-industry-pill { margin-top: 2px; }

.cp-follow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 14px;
}

.cp-chat-row {
    border-top: none;
}

.cp-chat-row form,
.cp-chat-actions form {
    margin: 0;
}

.cp-chat-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cp-stat-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cp-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.cp-stat-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cp-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 14px 0;
}

.cp-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #334155;
    padding: 5px 0;
}

.cp-detail-icon {
    width: 16px;
    text-align: center;
    color: #94a3b8;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 13px;
}

.cp-about-text {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

.cp-employee-block {
    display: grid;
    gap: 12px;
}

.cp-employee-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cp-employee-head strong {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.cp-employee-list {
    display: grid;
    gap: 10px;
}

.cp-employee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 8px 0;
}

.cp-employee-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #0f172a;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
}

.cp-employee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-employee-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cp-employee-copy strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-employee-copy span {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.45;
}

.cp-main {
    min-width: 0;
}

.cp-main .cd-posts-feed {
    max-width: 720px;
    margin: 0 auto;
}

.cp-main .cd-post-footer {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.cp-main .cd-post-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
}

.cp-main .cd-post-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cp-main .cd-post-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0;
}

.cp-main .cd-post-actions form {
    margin: 0;
}

.cp-main .cd-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #dbe1ea;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.cp-main button.cd-action-btn {
    appearance: none;
    -webkit-appearance: none;
}

.cp-main .cd-action-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.cp-main .cd-action-btn.is-active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.company-employee-request-list {
    display: grid;
    gap: 12px;
}

.company-employee-request-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.company-employee-request-card-link {
    text-decoration: none;
    color: inherit;
}

.company-employee-request-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-employee-request-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
}

.company-employee-request-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.company-employee-request-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.company-employee-request-copy strong {
    font-size: 13.5px;
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-employee-request-copy span {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.company-employee-request-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.company-employee-request-actions form {
    margin: 0;
}

.company-employee-empty,
.company-employee-more {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
}

/* ── College Profile Page ─────────────────────────────────────── */

.college-profile-page {
    display: grid;
    gap: 20px;
}

.college-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    padding: 30px 30px 28px;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a 0%, #1e293b 50%, #334155 100%);
    color: #ffffff;
    box-shadow: none;
}

.college-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 24px,
            rgba(255,255,255,0.018) 24px,
            rgba(255,255,255,0.018) 25px
        );
    pointer-events: none;
}

.college-hero-copy,
.college-hero-side {
    position: relative;
    z-index: 1;
}

.college-hero-copy {
    display: grid;
    gap: 18px;
}

.college-hero-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

.college-hero-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.college-hero-badge {
    width: 70px;
    height: 70px;
    border-radius: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.college-hero-badge svg {
    width: 34px;
    height: 34px;
}

.college-hero-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.college-hero-title {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.college-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.college-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.94);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.college-hero-chip-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

.college-hero-text {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    line-height: 1.75;
}

.college-hero-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.college-highlight-card {
    display: grid;
    gap: 3px;
    padding: 16px 18px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.college-highlight-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.college-highlight-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.74);
}

.college-hero-side {
    display: flex;
    align-items: stretch;
}

.college-like-panel {
    width: 100%;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 22px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.college-like-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.college-like-value {
    font-size: clamp(38px, 6vw, 52px);
    font-weight: 800;
    line-height: 0.95;
}

.college-like-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13.5px;
    line-height: 1.65;
}

.college-like-form {
    display: flex;
}

.college-like-btn {
    width: 100%;
    justify-content: center;
    border-color: rgba(255, 255, 255, 0.18);
}

.college-like-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px;
    font-weight: 600;
}

.college-chat-actions {
    display: grid;
    gap: 10px;
}

.college-chat-action-row {
    display: grid;
    gap: 10px;
}

.college-profile-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.college-profile-facts,
.college-profile-main,
.college-profile-students {
    display: grid;
    gap: 20px;
}

.college-section-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 24px;
    box-shadow: none;
}

.college-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.college-section-heading h2 {
    margin: 4px 0 0;
    font-size: 22px;
    color: #0f172a;
}

.college-side-count {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.college-side-heading-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.college-see-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.college-see-more-link:hover {
    background: #dbeafe;
    color: #1e40af;
}

.college-student-grid {
    display: grid;
    gap: 12px;
}

.college-student-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.college-student-card:hover {
    transform: translateY(-1px);
    border-color: #bfdbfe;
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.08);
}

.college-student-avatar {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.college-student-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.college-student-name {
    font-size: 14px;
    color: #0f172a;
    line-height: 1.35;
}

.college-student-user {
    font-size: 12px;
    color: #64748b;
}

.college-student-tags {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.college-student-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
}

.college-student-tag-stream {
    background: #eff6ff;
    color: #2563eb;
}

.college-side-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: #94a3b8;
}

.college-fact-list {
    display: grid;
    gap: 4px;
}

.college-fact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #edf2f7;
}

.college-fact-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.college-fact-row:first-child {
    padding-top: 0;
}

.college-fact-row span {
    font-size: 13px;
    color: #64748b;
}

.college-fact-row strong {
    font-size: 13px;
    color: #0f172a;
    text-align: right;
}

/* Stats strip — 4-col variant */
.cd-stats-strip {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Orange icon for follower stat */
.cd-icon-orange  { background: #fff7ed; color: #ea580c; }
.cd-icon-indigo  { background: #ede9fe; color: #4f46e5; }

.cd-stat-card-link {
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
}

.cd-stat-card-link:hover {
    border-color: #c4b5fd;
    box-shadow: 0 6px 20px rgba(79,70,229,0.12);
}

.directory-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    gap: 18px;
    align-items: start;
}

.activity-header-card {
    padding-bottom: 8px;
}

.social-heading {
    margin-bottom: 0;
}

.social-feed-list {
    gap: 14px;
}

.social-post-card {
    background: #ffffff;
    border-radius: 0;
    padding: 16px 16px 14px;
    overflow: hidden;
    position: relative;
}

.fb-composer-card,
.fb-section-card,
.fb-post-card {
    border-radius: 0;
}

.fb-post-card::before,
.fb-composer-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #0f172a;
    border-radius: 14px 14px 0 0;
}

@media (min-width: 801px) {
    .composer-expand-btn {
        display: inline-flex;
    }

    .composer-card:not(.is-expanded) .composer-meta {
        display: none;
    }

    .composer-card:not(.is-expanded) .composer-textarea textarea {
        min-height: 112px;
    }
}

.reshare-note {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 10px;
}

.feed-image-wrap {
    margin-top: 12px;
    border-radius: 0;
    overflow: hidden;
    background: #0f172a;
    cursor: zoom-in;
    max-height: 500px;
}

.feed-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    object-position: center top;
}

.reshared-original {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.reshared-original-user {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 6px;
}

.reshared-original-body {
    margin-top: 6px;
    color: #64748b;
    line-height: 1.6;
}

.feed-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #edf2f7;
    color: #64748b;
    font-size: 13px;
}

.fb-feed-stats {
    justify-content: space-between;
}

.feed-actions {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    margin-top: 10px;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    padding: 6px 0;
}

.feed-actions form {
    margin: 0;
    flex: 1;
}

.feed-action-btn,
.feed-actions button {
    width: 100%;
    border: none;
    background: transparent;
    color: #334155;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.feed-action-btn.is-active {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.feed-action-btn:hover,
.feed-actions button:hover {
    background: #f1f5f9;
}

.feed-action-btn i,
.feed-actions button i {
    font-size: 15px;
}

.feed-action-like.is-active i {
    animation: heart-pop 0.34s ease;
}

@keyframes heart-pop {
    0% {
        transform: scale(0.75);
    }
    55% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

.post-menu {
    margin-left: auto;
    position: relative;
}

.post-menu-trigger {
    list-style: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #475569;
}

.post-menu-trigger::-webkit-details-marker {
    display: none;
}

.post-menu-trigger:hover {
    background: #f3f4f6;
}

.post-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: 240px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #dbe4fb;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.post-menu-link {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    background: transparent;
    border: none;
    color: #1f2937;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.post-menu-link:hover {
    background: #f8fafc;
}

.post-menu-form {
    margin: 0;
}

.post-menu-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #475569;
}

.post-menu-report-form {
    min-width: 0;
    width: 100%;
    display: grid;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

.post-menu-dropdown .report-form select,
.post-menu-dropdown .report-form textarea {
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 10px;
}

.post-menu-dropdown .report-form textarea {
    min-height: 56px;
    resize: none;
}

.post-menu-dropdown .report-form button[type="submit"] {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    width: 100%;
}

.feed-inline-link {
    background: none;
    border: none;
    padding: 0;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.danger-link {
    color: #b91c1c;
}

.report-form {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.report-form button,
.comment-form button,
.composer-actions button,
.post-edit-actions button {
    background: #111827;
    color: #ffffff;
    border: none;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
}

.comment-block {
    margin-top: 14px;
}

.feed-comment-preview {
    padding-top: 2px;
}

.feed-comment-preview-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.feed-comment-preview-link:hover .comment-bubble {
    background: #e8eef8;
}

.feed-comment-preview-link:hover .own-comment .comment-bubble,
.feed-comment-preview-link:hover .comment-item.own-comment .comment-bubble {
    background: #cfeec0;
}

.feed-comment-more {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.comment-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.comment-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comment-item.own-comment {
    align-items: flex-end;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.own-comment .comment-meta {
    flex-direction: row-reverse;
}

.comment-username {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.comment-time {
    font-size: 11px;
    color: #94a3b8;
}

.comment-actions {
    display: none;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}

.own-comment .comment-actions { margin-left: 0; margin-right: 4px; }

.comment-item:hover .comment-actions {
    display: flex;
}

.comment-action-btn {
    background: none;
    border: none;
    padding: 3px 5px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 11px;
    border-radius: 4px;
    line-height: 1;
}

.comment-action-btn:hover { color: #475569; background: #f1f5f9; }
.comment-delete-btn:hover { color: #ef4444; background: #fef2f2; }

.comment-bubble {
    display: inline-block;
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 16px 16px 16px 4px;
    background: #f1f5f9;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.own-comment .comment-bubble {
    background: #dcf8c6;
    border-radius: 16px 16px 4px 16px;
    color: #1a3a1a;
}

.comment-edit-form {
    width: 100%;
    max-width: 85%;
    display: grid;
    gap: 6px;
}

.own-comment .comment-edit-form { margin-left: auto; }

.comment-edit-input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #c7d2fe;
    border-radius: 10px;
    font-size: 14px;
    resize: none;
    outline: none;
    font-family: inherit;
}

.comment-edit-input:focus { border-color: #0f172a; }

.comment-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.comment-edit-save {
    padding: 4px 12px;
    border-radius: 8px;
    border: none;
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.comment-edit-save:hover { background: #1e293b; }

.comment-edit-cancel {
    padding: 4px 12px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
}

.comment-edit-cancel:hover { background: #f8fafc; }

.comment-form {
    display: grid;
    gap: 8px;
}

.social-post-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.social-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #dbeafe 0%, #fce7f3 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #312e81;
    flex-shrink: 0;
}

.social-post-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.social-post-user strong {
    font-size: 14px;
}

.social-post-user span {
    font-size: 13px;
    color: #64748b;
}

.social-post-top .activity-type {
    margin-left: auto;
}

.social-post-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
}

.social-post-card p {
    margin: 0;
    color: #475569;
    line-height: 1.7;
}

/* ── Post detail page ── */
.post-detail-page {
    padding-bottom: 40px;
}

/* Top bar */
.post-detail-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 14px;
    max-width: calc(var(--page-shell-max) - 572px);
    margin: 0 auto;
}

.post-detail-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}

.post-detail-back:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.post-detail-topbar-label {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.post-detail-shell {
    max-width: calc(var(--page-shell-max) - 572px);
    margin: 0 auto;
    display: grid;
    gap: 0;
}

.post-detail-card {
    padding: 18px 18px 16px;
}

.post-detail-menu-trigger {
    width: 36px;
    height: 36px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 50%;
}

.post-detail-menu-dropdown {
    min-width: 220px;
}

.post-detail-menu-dropdown .post-menu-form {
    margin: 0;
}

.post-detail-report {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf2f7;
}

.post-detail-report summary {
    cursor: pointer;
    font-weight: 700;
    color: #334155;
    font-size: 13px;
}

/* Comments — now a separate section below the card */
.post-detail-comments {
    padding: 20px 18px 8px;
    border-top: 1px solid #f1f5f9;
}

.post-detail-comments-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.post-detail-comments-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

.post-detail-comments-head span,
.post-detail-empty-comments {
    color: #94a3b8;
    font-size: 13px;
}

.post-detail-empty-comments {
    padding: 20px 0;
    text-align: center;
}

.post-detail-login-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 13px 14px;
    margin-top: 8px;
    transition: border-color 0.12s, background 0.12s;
}

.post-detail-login-link:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Mobile overrides */
@media (max-width: 800px) {
    body.post-detail-body .page-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body.post-detail-body .post-detail-page {
        padding-bottom: 0;
    }
    body.post-detail-body .post-detail-topbar {
        max-width: 100%;
        padding: 10px 14px 10px;
        border-bottom: 1px solid #f1f5f9;
        background: #ffffff;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    body.post-detail-body .post-detail-shell {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    body.post-detail-body .post-detail-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    body.post-detail-body .post-detail-card .feed-image-wrap,
    body.post-detail-body .post-detail-card .post-slider {
        border-radius: 0 !important;
        margin-left: -18px !important;
        margin-right: -18px !important;
    }
    body.post-detail-body .post-detail-card .feed-image,
    body.post-detail-body .post-detail-card .post-slider-slide img {
        border-radius: 0 !important;
    }
    body.post-detail-body .post-detail-comments {
        padding: 16px 16px 40px;
    }
}

.right-summary-card p {
    margin: 10px 0 0;
    color: #64748b;
    line-height: 1.65;
}

.pulse-number {
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    color: #0f172a;
    margin-top: 10px;
}

.post-edit-wrap {
    max-width: 720px;
    margin: 0 auto;
}

.post-edit-card {
    max-width: none;
}

.post-edit-sub {
    margin: 0 0 18px;
    color: #64748b;
}

.post-edit-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.panel-heading h2 {
    margin: 6px 0 0;
    font-size: 22px;
    letter-spacing: -0.6px;
}

.eyebrow-muted {
    color: #64748b;
}

.quick-link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.quick-link-card {
    padding: 16px 16px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e7ecf2;
}

.quick-link-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.quick-link-card p {
    margin: 0;
    color: #5b6b82;
    line-height: 1.65;
}

.activity-list {
    display: grid;
    gap: 16px;
}

.activity-card {
    padding: 16px;
    border-radius: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.activity-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.activity-type {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.fb-post-type {
    background: linear-gradient(135deg, #eef2ff 0%, #fce7f3 100%);
    color: #4338ca;
}

.activity-date,
.activity-author {
    color: #64748b;
    font-size: 14px;
}

.activity-card h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.activity-card p {
    margin: 0 0 14px;
    color: #475569;
    line-height: 1.65;
}

.landing-empty-state {
    background: #f8fafc;
    border-radius: 20px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.feature-card,
.form-card {
    background: #ffffff;
    padding: 28px;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.feature-card h3 {
    margin-top: 0;
}

.feature-card p {
    color: #64748b;
    line-height: 1.55;
}

.form-card {
    max-width: 520px;
}

.form-card h1 {
    margin-top: 0;
}

form p {
    margin-bottom: 16px;
}

form label {
    display: block;
    font-weight: 700;
    margin-bottom: 7px;
}

form input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    font-size: 15px;
}

form .helptext,
form ul {
    color: #64748b;
    font-size: 13px;
}

form button {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}

.status-note,
/* ── Global flash messages ── */
.lc-msg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.5;
    animation: lcMsgIn .22s ease;
}
@keyframes lcMsgIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lc-msg-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .88rem;
}
.lc-msg-icon::before { font-family: 'Font Awesome 6 Free'; font-weight: 900; }

.lc-msg-text { flex: 1; }

.lc-msg-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    opacity: .5;
    transition: opacity .15s, background .15s;
    color: inherit;
    padding: 0;
}
.lc-msg-close:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* ── Warning (warmup / cooldown) — amber ── */
.lc-msg--warning {
    background: #1a1200;
    border: 1px solid #332800;
    color: #fbbf24;
}
.lc-msg--warning .lc-msg-icon {
    background: rgba(251,191,36,.12);
    color: #fbbf24;
}
.lc-msg--warning .lc-msg-icon::before { content: '\f254'; } /* hourglass-half */
.lc-msg--warning .lc-msg-close { color: #fbbf24; }
.lc-msg--warning .lc-msg-close:hover { background: rgba(251,191,36,.1); }

/* ── Error — red ── */
.lc-msg--error {
    background: #180808;
    border: 1px solid #3a0f0f;
    color: #f87171;
}
.lc-msg--error .lc-msg-icon {
    background: rgba(248,113,113,.12);
    color: #f87171;
}
.lc-msg--error .lc-msg-icon::before { content: '\f071'; } /* triangle-exclamation */
.lc-msg--error .lc-msg-close { color: #f87171; }
.lc-msg--error .lc-msg-close:hover { background: rgba(248,113,113,.1); }

/* ── Success — green ── */
.lc-msg--success {
    background: #051208;
    border: 1px solid #0d2e14;
    color: #4ade80;
}
.lc-msg--success .lc-msg-icon {
    background: rgba(74,222,128,.12);
    color: #4ade80;
}
.lc-msg--success .lc-msg-icon::before { content: '\f00c'; } /* check */
.lc-msg--success .lc-msg-close { color: #4ade80; }
.lc-msg--success .lc-msg-close:hover { background: rgba(74,222,128,.1); }

/* ── Info — blue ── */
.lc-msg--info {
    background: #050d1a;
    border: 1px solid #0d1f3a;
    color: #60a5fa;
}
.lc-msg--info .lc-msg-icon {
    background: rgba(96,165,250,.12);
    color: #60a5fa;
}
.lc-msg--info .lc-msg-icon::before { content: '\f05a'; } /* circle-info */
.lc-msg--info .lc-msg-close { color: #60a5fa; }
.lc-msg--info .lc-msg-close:hover { background: rgba(96,165,250,.1); }

/* light mode overrides */
body.fd-light .lc-msg--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
body.fd-light .lc-msg--warning .lc-msg-icon { background: rgba(245,158,11,.12); color: #d97706; }
body.fd-light .lc-msg--warning .lc-msg-close { color: #92400e; }
body.fd-light .lc-msg--warning .lc-msg-close:hover { background: rgba(245,158,11,.1); }

body.fd-light .lc-msg--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
body.fd-light .lc-msg--error .lc-msg-icon { background: rgba(239,68,68,.1); color: #dc2626; }
body.fd-light .lc-msg--error .lc-msg-close { color: #991b1b; }
body.fd-light .lc-msg--error .lc-msg-close:hover { background: rgba(239,68,68,.08); }

body.fd-light .lc-msg--success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
body.fd-light .lc-msg--success .lc-msg-icon { background: rgba(34,197,94,.1); color: #16a34a; }
body.fd-light .lc-msg--success .lc-msg-close { color: #166534; }
body.fd-light .lc-msg--success .lc-msg-close:hover { background: rgba(34,197,94,.08); }

body.fd-light .lc-msg--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
body.fd-light .lc-msg--info .lc-msg-icon { background: rgba(59,130,246,.1); color: #2563eb; }
body.fd-light .lc-msg--info .lc-msg-close { color: #1e40af; }
body.fd-light .lc-msg--info .lc-msg-close:hover { background: rgba(59,130,246,.08); }

.admin-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.admin-sidebar,
.admin-main,
.data-table-wrap {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.admin-sidebar {
    padding: 24px;
    position: sticky;
    top: 24px;
}

.admin-sidebar h2 {
    margin: 0 0 6px;
}

.admin-sidebar p {
    margin: 0 0 18px;
    color: #64748b;
}

.admin-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-menu a {
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 14px;
    color: #334155;
    font-weight: 700;
}

.admin-menu a.active {
    background: #dbeafe;
    color: #1d4ed8;
}

.admin-main {
    padding: 28px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.admin-header h1,
.admin-section h2 {
    margin: 0 0 8px;
}

.admin-header p,
.admin-section p {
    margin: 0;
    color: #64748b;
}

.admin-metrics {
    min-width: 160px;
    background: #eff6ff;
    border-radius: 18px;
    padding: 16px 18px;
}

.metric-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #2563eb;
    margin-bottom: 8px;
}

.metric-value {
    font-size: 30px;
    font-weight: 800;
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 22px;
}

.admin-section {
    background: #f8fafc;
    border-radius: 20px;
    padding: 24px;
}

.data-table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}

.data-table th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.empty-state {
    padding: 24px;
    color: #64748b;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 10px 0 40px;
}

.login-role-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.login-role-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: #64748b;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    user-select: none;
}

.login-role-card svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.login-role-card:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
}

.login-role-active {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

.login-card {
    max-width: 100%;
}

.login-info {
    margin-bottom: 20px;
}

.login-info h1 {
    margin: 0 0 6px;
    font-size: 24px;
}

.login-sub {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

.login-footer-links {
    margin-top: 18px;
    text-align: center;
    font-size: 13.5px;
    color: #64748b;
}

.login-footer-links a {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
}

.login-footer-links a:hover {
    text-decoration: underline;
}

/* ── New login tab bar (onboarding layout) ── */
.login-tabs {
    display: flex;
    gap: 6px;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
}

.login-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.login-tab i {
    font-size: 12px;
}

.login-tab:hover {
    color: #1e293b;
    background: rgba(255,255,255,0.6);
}

.login-tab-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(15,23,42,0.1);
}

/* ── Mobile-only logo inside right panel ── */
.onboard-mobile-logo {
    display: none;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 20px;
}
.onboard-mobile-logo img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: contain;
}
.onboard-mobile-logo span {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.3px;
}
@media (max-width: 640px) {
    .onboard-mobile-logo {
        display: flex;
    }
}

/* ── Student sub-type switcher (Student / Alumni / Teacher) ── */
.login-sub-tabs {
    display: flex;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 3px;
    margin-top: 14px;
}

.login-sub-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.login-sub-tab i {
    font-size: 11px;
}

.login-sub-tab:hover {
    color: #1e293b;
    background: rgba(255,255,255,0.8);
}

.login-sub-tab-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}

/* ============================================================
   SIGNUP PAGE  (signup-* / sg-* namespace)
   ============================================================ */

/* ── Onboarding (signup) shell ── */
.onboard-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background: #ffffff;
}

/* ── Left panel ── */
.onboard-left {
    background: linear-gradient(155deg, #0a0a0a 0%, #1e293b 55%, #334155 100%);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.onboard-left::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.onboard-left::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.onboard-left-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 36px;
    height: 100%;
}

.onboard-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.onboard-logo-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 8px;
}

.onboard-logo span {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
}

.onboard-hero-text h2 {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}

.onboard-hero-text p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
    margin: 0;
    max-width: 320px;
}

.onboard-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.onboard-feat-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 11px 14px;
    backdrop-filter: blur(8px);
}

.onboard-feat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 15px;
    flex-shrink: 0;
}

.onboard-feat-card div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.onboard-feat-card strong {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.onboard-feat-card span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* ── Illustration circles ── */
.onboard-illustration {
    margin-top: auto;
    position: relative;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ob-ill-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.ob-ring-1 { width: 120px; height: 120px; }
.ob-ring-2 { width: 190px; height: 190px; }
.ob-ring-3 { width: 260px; height: 260px; }

.ob-ill-center {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0f172a;
    border: 1.5px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 2;
}

.ob-ill-avatar {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    backdrop-filter: blur(4px);
}

.ob-av-1 { top: 20px; left: 50%; transform: translateX(-50%); }
.ob-av-2 { bottom: 20px; left: 22%; }
.ob-av-3 { bottom: 20px; right: 22%; }

/* ── Right panel ── */
.onboard-right {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 48px;
    overflow-y: auto;
}

.onboard-form-wrap {
    width: 100%;
    max-width: 420px;
}

.onboard-form-header {
    margin-bottom: 28px;
}

.onboard-form-header h1 {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.onboard-form-header p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
}

.onboard-form-header a {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
}

.onboard-form-header a:hover {
    text-decoration: underline;
}

.onboard-form-section {
    margin-bottom: 24px;
}

.onboard-section-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #94a3b8;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.onboard-submit {
    display: block;
    width: 100%;
    padding: 13px;
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    margin-top: 8px;
}

.onboard-submit:hover {
    background: #1e293b;
    transform: translateY(-1px);
}

/* ── Verification status page ── */
.vs-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.vs-badge-pending {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
}

.vs-badge-rejected {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.vs-info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 4px 0;
    margin: 20px 0;
}

.vs-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
}

.vs-info-row:last-child {
    border-bottom: none;
}

.vs-info-label {
    color: #64748b;
    font-weight: 600;
}

.vs-info-value {
    color: #0f172a;
    font-weight: 700;
}

.vs-pending-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b45309;
}

.vs-rejection-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 20px 0 16px;
}

.vs-rejection-title {
    font-size: 13px;
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.vs-rejection-text {
    font-size: 14px;
    color: #7f1d1d;
    line-height: 1.6;
    margin: 0;
}

.vs-common-reasons,
.vs-what-next {
    margin: 20px 0;
}

.vs-reasons-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.vs-reasons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vs-reasons-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #334155;
    line-height: 1.5;
}

.vs-reasons-list li i {
    font-size: 13px;
    color: #94a3b8;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.vs-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.vs-contact-btn:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

.vs-ill-center--rejected {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.18);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    position: relative;
    z-index: 2;
}

/* ── Alumni company fields ── */
/* ── Sidebar companies card ── */
.sidebar-companies {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}

.sidebar-company-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.12s;
}

.sidebar-company-row:hover {
    background: #f8fafc;
}

.sidebar-company-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #eef2ff, #ede9fe);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
}

.sidebar-company-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-company-avatar span {
    font-size: 15px;
    font-weight: 800;
    color: #4f46e5;
}

.sidebar-company-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sidebar-company-info strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-company-info span {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-company-arrow {
    font-size: 10px;
    color: #cbd5e1;
    flex-shrink: 0;
}

.sidebar-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.sidebar-view-all:hover {
    border-color: #4f46e5;
    color: #4f46e5;
    background: #f5f3ff;
}

.sidebar-view-all i {
    font-size: 11px;
}

/* ── Alumni company fields ── */
.alumni-or-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.alumni-or-divider::before,
.alumni-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.onboard-other-links {
    text-align: center;
    font-size: 12.5px;
    color: #94a3b8;
    margin-top: 16px;
}

.onboard-other-links a {
    color: #64748b;
    font-weight: 600;
    text-decoration: none;
}

.onboard-other-links a:hover {
    color: #0f172a;
}

/* ── Onboard pages: show header + full footer, same scroll as non-auth home ── */
.onboard-body .site-header { display: none; }

/* Compact fixed footer bar on onboard pages */
.onboard-body {
    --onboard-footer-h: 46px;
    padding-bottom: var(--onboard-footer-h);
}
.onboard-body .site-footer {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--onboard-footer-h);
    min-height: var(--onboard-footer-h);
    max-height: var(--onboard-footer-h);
    margin: 0;
    overflow: hidden;
    z-index: 30;
}
.onboard-body .site-footer-inner,
.onboard-body .site-footer::after {
    display: none;
}
.onboard-body .site-footer-bottom {
    height: var(--onboard-footer-h);
    min-height: var(--onboard-footer-h);
    padding: 0 10%;
    display: flex;
    align-items: center;
}
.onboard-body {
    background: #ffffff;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.onboard-body::-webkit-scrollbar { display: none; }
.onboard-body .page-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    flex: 1 1 auto;
}

/* ── College theme (emerald) ── */
.onboard-left--college {
    background: linear-gradient(155deg, #052e16 0%, #064e3b 50%, #065f46 100%);
}

.onboard-left--college .onboard-feat-icon {
    background: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

.ob-ill-center--college {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2);
}

/* ── Company theme (violet) ── */
.onboard-left--company {
    background: linear-gradient(155deg, #2e1065 0%, #3b0764 50%, #4a044e 100%);
}

.onboard-left--company .onboard-feat-icon {
    background: rgba(167, 139, 250, 0.2);
    color: #c4b5fd;
}

.ob-ill-center--company {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.2);
}

.onboard-left--banned {
    background: linear-gradient(155deg, #1c0505 0%, #3b0a0a 50%, #450a0a 100%);
}

.onboard-left--banned .onboard-feat-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.vs-ill-center--banned {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    position: relative;
    z-index: 2;
}

.vs-badge-banned {
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
}

.vs-ban-box {
    background: #fff1f2;
    border-color: #fecdd3;
}

.vs-ban-box .vs-rejection-title { color: #9f1239; }
.vs-ban-box .vs-rejection-text  { color: #7f1d1d; }

.onboard-submit--banned {
    background: #dc2626;
}

.onboard-submit--banned:hover {
    background: #b91c1c;
}

.vs-appeal-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #92400e;
    line-height: 1.5;
    margin-bottom: 16px;
}

.vs-appeal-notice i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }

.onboard-submit--college {
    background: #059669;
}

.onboard-submit--college:hover {
    background: #047857;
}

.onboard-submit--company {
    background: #7c3aed;
}

.onboard-submit--company:hover {
    background: #6d28d9;
}

/* ── Verification notice ── */
.onboard-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: #166534;
    line-height: 1.5;
    margin-bottom: 16px;
}

.onboard-notice--company {
    background: #faf5ff;
    border-color: #e9d5ff;
    color: #6b21a8;
}

.onboard-notice i {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* right panel scrolls on tall forms */
.onboard-right {
    align-items: flex-start;
    padding-top: 48px;
    padding-bottom: 48px;
}

/* keep old signup-section etc. for college/company pages */
.signup-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 20px 0 40px;
}

.signup-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.signup-header {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    padding: 36px 40px 30px;
    color: #ffffff;
}

.signup-header h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

.signup-header p {
    margin: 0;
    font-size: 15px;
    opacity: 0.85;
    line-height: 1.5;
}

.signup-section {
    padding: 28px 40px 0;
}

.signup-section:last-of-type {
    padding-bottom: 0;
}

.signup-section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #2563eb;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.sg-field {
    margin-bottom: 16px;
}

.sg-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}

.sg-field input,
.sg-field select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    background: #f8fafc;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
    appearance: auto;
}

.sg-searchable-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sg-searchable-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    background: #f8fafc;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.sg-searchable-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    background: #ffffff;
}

.sg-field input:focus,
.sg-field select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    background: #ffffff;
}

.sg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sg-req {
    color: #ef4444;
}

.sg-error {
    color: #dc2626;
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.4;
}

.sg-nf-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    margin: 0 40px 16px;
}

.sg-passout-hint {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 7px;
}

.sg-submit {
    display: block;
    width: calc(100% - 80px);
    margin: 26px 40px 0;
    padding: 13px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.12s;
}

.sg-submit:hover {
    background: #1d4ed8;
}

.sg-login-link {
    text-align: center;
    font-size: 13.5px;
    color: #64748b;
    padding: 16px 40px 28px;
    margin: 0;
}

.sg-login-link a {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
}

.sg-login-link a:hover {
    text-decoration: underline;
}

/* Onboarding responsive */
@media (max-width: 860px) {
    .onboard-shell {
        grid-template-columns: 1fr;
        min-height: unset;
    }
    .onboard-left {
        padding: 36px 32px 32px;
    }
    .onboard-illustration {
        display: none;
    }
    .onboard-hero-text h2 {
        font-size: 28px;
    }
    .onboard-right {
        padding: 36px 32px;
    }
}

/* On mobile, hide the left branding panel so the form is visible immediately */
@media (max-width: 640px) {
    .onboard-left {
        display: none;
    }
    .onboard-right {
        padding: 32px 20px 40px;
        min-height: 100vh;
    }
    /* Compact main tabs — icon + short label, allow wrap */
    .login-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }
    .login-tab {
        font-size: 12px;
        padding: 8px 8px;
        gap: 5px;
    }
    /* Sub-tabs — shrink label text */
    .login-sub-tabs {
        flex-wrap: nowrap;
        gap: 3px;
        padding: 3px;
    }
    .login-sub-tab {
        font-size: 11px;
        padding: 6px 6px;
        gap: 4px;
    }
    .login-sub-tab i {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .onboard-hero-text h2 {
        font-size: 24px;
    }
    .onboard-features {
        display: none;
    }
    .onboard-right {
        padding: 28px 20px 40px;
    }
    .sg-row {
        grid-template-columns: 1fr;
    }
}

/* Legacy signup responsive (college/company pages) */
@media (max-width: 640px) {
    .signup-header {
        padding: 28px 24px 22px;
    }
    .signup-section {
        padding-left: 24px;
        padding-right: 24px;
    }
    .sg-row {
        grid-template-columns: 1fr;
    }
    .sg-submit {
        width: calc(100% - 48px);
        margin-left: 24px;
        margin-right: 24px;
    }
    .sg-nf-error {
        margin-left: 24px;
        margin-right: 24px;
    }
    .sg-login-link {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ============================================================
   ADMIN DASHBOARD  (adm-* namespace)
   ============================================================ */

.adm-body {
    background: #f1f5f9;
    min-height: 100vh;
}

.adm-layout {
    display: flex;
    min-height: 100vh;
}

/* ----- Sidebar ----- */
.adm-sidebar {
    width: 256px;
    background: #0f172a;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 100;
}

.adm-brand {
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-brand-name {
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.adm-brand-badge {
    background: #2563eb;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}

.adm-nav {
    flex: 1;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.adm-nav-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: #475569;
    text-transform: uppercase;
    padding: 8px 12px 6px;
    margin-bottom: 2px;
}

.adm-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: #94a3b8;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.12s, color 0.12s;
}

.adm-nav-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.adm-nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
}

.adm-nav-link.adm-active {
    background: #2563eb;
    color: #ffffff;
}

/* ----- Sidebar footer ----- */
.adm-sidebar-footer {
    padding: 14px 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.adm-user-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    margin-bottom: 10px;
}

.adm-avatar {
    width: 34px;
    height: 34px;
    background: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.adm-user-meta {
    min-width: 0;
}

.adm-user-name {
    color: #e2e8f0;
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-user-role {
    color: #64748b;
    font-size: 11.5px;
    margin-top: 2px;
}

.adm-footer-links {
    display: flex;
    gap: 6px;
}

.adm-footer-link {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(255,255,255,0.05);
    transition: background 0.12s, color 0.12s;
}

.adm-footer-link:hover {
    background: rgba(255,255,255,0.1);
    color: #e2e8f0;
}

.adm-footer-link-danger:hover {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}

/* ----- Main area ----- */
.adm-main {
    margin-left: 256px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

/* ----- Topbar ----- */
.adm-topbar {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.adm-topbar-left {
    min-width: 0;
}

.adm-topbar-title {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
    line-height: 1.15;
}

.adm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #94a3b8;
}

.adm-breadcrumb a {
    text-decoration: none;
    color: #64748b;
    font-weight: 500;
}

.adm-breadcrumb a:hover {
    color: #2563eb;
}

.adm-breadcrumb span {
    color: #94a3b8;
}

.adm-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.adm-topbar-avatar {
    width: 34px;
    height: 34px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
}

/* ----- Content area ----- */
.adm-content {
    padding: 26px 28px;
    flex: 1;
}

/* ----- Alert messages ----- */
.adm-msg {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 22px;
    font-weight: 600;
    font-size: 14px;
    border-width: 1px;
    border-style: solid;
}

.adm-msg-success {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.adm-msg-error {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.adm-msg-warning {
    background: #fefce8;
    color: #a16207;
    border-color: #fef08a;
}

/* ----- Stat grid ----- */
.adm-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 26px;
}

.adm-stat-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.adm-stat-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-stat-card-link {
    text-decoration: none;
}

.adm-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adm-stat-icon svg {
    width: 20px;
    height: 20px;
}

.adm-stat-icon-blue   { background: #eff6ff; color: #2563eb; }
.adm-stat-icon-green  { background: #f0fdf4; color: #16a34a; }
.adm-stat-icon-purple { background: #faf5ff; color: #7c3aed; }
.adm-stat-icon-orange { background: #fff7ed; color: #ea580c; }
.adm-stat-icon-slate  { background: #f8fafc; color: #0f172a; }
.adm-stat-icon-red    { background: #fef2f2; color: #dc2626; }

.adm-stat-value {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.adm-stat-label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.adm-stat-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* ----- Section header ----- */
.adm-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.adm-section-header-mb {
    margin-bottom: 14px;
}

.adm-section-title {
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 3px;
}

.adm-section-desc {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ----- Two-column page grid ----- */
.adm-page-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 22px;
    align-items: start;
}

/* ----- Cards ----- */
.adm-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04);
}

/* ----- Form ----- */
.adm-form-group {
    margin-bottom: 16px;
}

.adm-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}

.adm-form-group input,
.adm-form-group textarea,
.adm-form-group select {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 14px;
    color: #0f172a;
    background: #f8fafc;
    transition: border-color 0.12s, box-shadow 0.12s;
    box-sizing: border-box;
}

.adm-form-group input:focus,
.adm-form-group textarea:focus,
.adm-form-group select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    background: #ffffff;
}

.adm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.adm-form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.adm-form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #2563eb;
}

.adm-form-check label {
    font-size: 13.5px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    margin: 0;
}

.adm-form-error {
    color: #dc2626;
    font-size: 12px;
    margin-top: 5px;
}

.adm-required {
    color: #ef4444;
}

.adm-submit-btn {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 11px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    transition: background 0.12s;
}

.adm-submit-btn:hover {
    background: #1d4ed8;
}

/* ----- Table ----- */
.adm-table-wrap {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04);
    overflow-x: auto;
}

.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.adm-table thead {
    background: #f8fafc;
}

.adm-table th {
    padding: 12px 18px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.adm-table td {
    padding: 13px 18px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.adm-table tr:last-child td {
    border-bottom: none;
}

.adm-table tbody tr:hover {
    background: #f8fafc;
}

.adm-table-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

.adm-table-link:hover {
    text-decoration: underline;
}

.adm-cell-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 3px;
    font-weight: 400;
}

.adm-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adm-cell-avatar {
    width: 30px;
    height: 30px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}

.adm-muted {
    color: #94a3b8;
    font-size: 13px;
}

/* ----- Badges ----- */
.adm-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.adm-badge-green  { background: #dcfce7; color: #15803d; }
.adm-badge-red    { background: #fee2e2; color: #dc2626; }
.adm-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.adm-badge-gray   { background: #f1f5f9; color: #64748b; }
.adm-badge-purple { background: #f3e8ff; color: #7c3aed; }
.adm-badge-orange { background: #fff7ed; color: #ea580c; }

/* ----- Empty state ----- */
.adm-empty {
    text-align: center;
    padding: 44px 24px;
    color: #94a3b8;
}

.adm-empty p {
    margin: 0;
    font-size: 14px;
}

/* ----- Recent grid (dashboard 2-column) ----- */
.adm-recent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ----- Admin responsive ----- */
@media (max-width: 1100px) {
    .adm-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .adm-page-grid {
        grid-template-columns: 1fr;
    }
    .adm-recent-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .adm-sidebar {
        width: 220px;
    }
    .adm-main {
        margin-left: 220px;
    }
    .adm-content {
        padding: 20px;
    }
    .adm-topbar {
        padding: 14px 20px;
    }
}

@media (max-width: 640px) {
    .adm-sidebar {
        display: none;
    }
    .adm-main {
        margin-left: 0;
    }
    .adm-stat-grid,
    .adm-stat-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 400px) {
    .adm-stat-grid,
    .adm-stat-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ----- Admin action buttons ----- */
.adm-action-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.12s;
}

.adm-action-btn-success {
    background: #dcfce7;
    color: #15803d;
}

.adm-action-btn-success:hover {
    background: #bbf7d0;
}

.adm-action-btn-danger {
    background: #fee2e2;
    color: #dc2626;
}

.adm-action-btn-danger:hover {
    background: #fecaca;
}

.adm-action-btn-neutral {
    background: #e2e8f0;
    color: #334155;
}

.adm-action-btn-neutral:hover {
    background: #cbd5e1;
}

.adm-inline-select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    background: #f8fafc;
    color: #1e293b;
}

.adm-inline-stack {
    display: grid;
    gap: 10px;
    min-width: 240px;
}

.adm-inline-review-form {
    display: grid;
    gap: 8px;
}

.adm-inline-textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
    background: #f8fafc;
    color: #1e293b;
    resize: vertical;
    box-sizing: border-box;
}

.adm-inline-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
    background: #ffffff;
}

/* ----- Admin nav badge (pending count) ----- */
.adm-nav-badge {
    margin-left: auto;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.4;
}

.adm-badge-orange { background: #fff7ed; color: #ea580c; }

/* ============================================================
   COLLEGE DASHBOARD  (cd-* namespace)
   ============================================================ */

.cd-header {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.cd-header-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.cd-college-photo-stack {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.cd-college-icon {
    width: 56px;
    height: 56px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cd-college-photo {
    overflow: hidden;
}

.cd-college-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cd-college-icon svg {
    width: 28px;
    height: 28px;
}

.cd-photo-edit-badge {
    right: -4px;
    bottom: -4px;
    width: 28px;
    height: 28px;
}

.cd-college-name {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
}

.cd-college-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: #64748b;
    flex-wrap: wrap;
}

.cd-website-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}

.cd-website-link:hover { text-decoration: underline; }

.cd-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.cd-badge svg { width: 14px; height: 14px; }

.cd-badge-verified  { background: #dcfce7; color: #15803d; }
.cd-badge-pending   { background: #fff7ed; color: #ea580c; }

.cd-notice {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 14px;
    color: #92400e;
    margin-bottom: 22px;
    line-height: 1.6;
}

/* Stat grid */
.cd-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 26px;
}

.cd-stat-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-stat-icon svg { width: 20px; height: 20px; }

.cd-icon-blue   { background: #eff6ff; color: #2563eb; }
.cd-icon-green  { background: #f0fdf4; color: #16a34a; }
.cd-icon-purple { background: #faf5ff; color: #7c3aed; }

.cd-stat-value {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}

.cd-stat-label {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Two-column layout */
.cd-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 22px;
    align-items: start;
}

/* Profile card */
.cd-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.04);
}

.cd-card-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.cd-count-pill {
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
}

.cd-profile-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
    align-items: flex-start;
}

.cd-profile-row:last-child { border-bottom: none; }

.cd-profile-row-col { flex-direction: column; gap: 6px; }

.cd-profile-label {
    font-weight: 700;
    color: #94a3b8;
    min-width: 80px;
    flex-shrink: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding-top: 2px;
}

.cd-desc {
    color: #64748b;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
}

.cd-link {
    color: #0f172a;
    text-decoration: none;
    font-weight: 600;
    word-break: break-all;
}

.cd-link:hover { text-decoration: underline; }

.cd-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 18px 0;
}

/* Table */
.cd-table-wrap {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.04);
    overflow-x: auto;
}

.cd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.cd-table thead { background: #f8fafc; }

.cd-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.cd-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
}

.cd-table tr:last-child td { border-bottom: none; }
.cd-table tbody tr:hover { background: #f8fafc; }

.cd-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-avatar {
    width: 30px;
    height: 30px;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
}

.cd-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.cd-muted { color: #94a3b8; font-size: 13px; }

.cd-pill {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.cd-pill-blue   { background: #dbeafe; color: #1d4ed8; }
.cd-pill-green  { background: #dcfce7; color: #15803d; }
.cd-pill-gray   { background: #f1f5f9; color: #64748b; }
.cd-pill-purple { background: #f1f5f9; color: #334155; }

.cd-empty {
    background: #ffffff;
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    line-height: 1.6;
}

.cd-more-note {
    font-size: 13px;
    color: #94a3b8;
    margin: 12px 0 0;
    text-align: right;
}

/* College signup extra */
.signup-header-college {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
}

.signup-header-college h1 { font-size: 22px; }

.signup-header-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.signup-header-icon svg { width: 26px; height: 26px; stroke: #ffffff; }

.sg-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #1e40af;
    margin: 0 40px 20px;
    line-height: 1.55;
}

.sg-notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.sg-submit-college { background: #1e40af; }
.sg-submit-college:hover { background: #1e3a8a; }

@media (max-width: 800px) {
    .cd-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .cd-grid { grid-template-columns: 1fr; }
    .cd-header { flex-direction: column; }
    .cd-stats-strip { grid-template-columns: repeat(2, 1fr); }
    .college-snapshot-card { grid-template-columns: 1fr; }
    .college-snapshot-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cd-layout { grid-template-columns: 1fr; }
    .cd-sidebar { position: static; }
    .college-hero { grid-template-columns: 1fr; padding: 24px 22px; }
    .college-hero-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .college-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
    .cd-stat-grid { grid-template-columns: 1fr; }
    .cd-stats-strip { grid-template-columns: 1fr; }
    .college-snapshot-card { padding: 20px 18px; }
    .college-snapshot-copy h2 { font-size: 22px; }
    .college-snapshot-metrics { grid-template-columns: 1fr; }
    .college-snapshot-metric strong { font-size: 30px; }
    .sg-notice { margin-left: 24px; margin-right: 24px; }
    .college-hero-head { flex-direction: column; }
    .college-hero-highlights { grid-template-columns: 1fr; }
    .college-section-card { padding: 20px 18px; }
    .college-section-heading { flex-direction: column; }
    .college-side-count { min-width: 0; }
    .college-student-card { grid-template-columns: 1fr; }
    .college-student-tags { grid-column: 1; }
}

/* ============================================================
   COMPANY DASHBOARD  (company-* additions)
   ============================================================ */

.cd-company-icon { background: #faf5ff; color: #7c3aed; }

.college-dashboard-avatar {
    position: relative;
    overflow: visible;
    background: #eff6ff;
    color: #2563eb;
}

.college-dashboard-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.company-page-hero {
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.company-page-cover {
    display: none;
}

.company-page-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px 24px 20px;
    margin-top: 0;
}

.company-page-avatar {
    width: 92px;
    height: 92px;
    border-radius: 24px;
    border: 1px solid #ede9fe;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.company-page-avatar svg {
    width: 38px;
    height: 38px;
}

.company-logo-upload-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.company-logo-preview {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}

.company-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.company-logo-upload-control {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.company-page-summary {
    display: grid;
    gap: 8px;
    align-content: center;
    justify-items: start;
}

.company-page-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid #e2e8f0;
}

.company-page-summary h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1.05;
    color: #0f172a;
    letter-spacing: -0.04em;
}

.company-page-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.company-page-summary p {
    margin: 0;
    max-width: 760px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.65;
}

.company-page-actions {
    display: grid;
    justify-items: end;
    gap: 12px;
    min-width: 220px;
}

.company-page-primary {
    width: auto;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 14px;
    box-shadow: none;
}

.company-page-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.company-page-summary .company-page-action-row {
    width: 100%;
    align-self: start;
    margin-top: 2px;
}

.company-page-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.company-page-metric {
    display: grid;
    gap: 6px;
    padding: 18px 22px;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
}

.company-page-metric:last-child {
    border-right: 0;
}

.company-page-metric span {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.company-page-metric strong {
    font-size: 38px;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -0.04em;
}

.company-page-metric.is-purple strong { color: #7c3aed; }
.company-page-metric.is-green strong { color: #16a34a; }
.company-page-metric.is-blue strong { color: #2563eb; }
.company-page-metric.is-orange strong { color: #ea580c; }

.company-page-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 22px 18px;
    background: #fcfcfd;
}

.company-page-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #dbe1ea;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.company-page-tab:hover,
.company-page-tab.is-active {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.company-dashboard-link-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #dbe1ea;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.company-dashboard-link-chip i {
    font-size: 12px;
}

.company-dashboard-link-chip:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
}

/* Two-column layout: sidebar + main */
.cd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 24px;
    align-items: start;
}

.cd-sidebar {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 76px;
}

.cd-main-col {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.company-dashboard-layout {
    grid-template-columns: 1fr;
}

.company-dashboard-layout .cd-sidebar {
    order: initial;
    gap: 14px;
    position: static;
    top: auto;
    align-self: start;
}

.company-dashboard-layout .cd-main-col {
    order: 1;
}

.company-dashboard-layout .cd-sidebar-left {
    order: 2;
}

.company-dashboard-layout .cd-sidebar-right {
    order: 3;
}

.college-dashboard-layout .cd-sidebar-left {
    order: 2;
}

.college-dashboard-layout .cd-sidebar-right {
    order: 3;
}

@media (min-width: 1200px) {
    .company-dashboard-layout {
        grid-template-columns: 260px minmax(0, 1fr) 290px;
        gap: 20px;
    }

    .company-dashboard-layout .cd-sidebar-left {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: 76px;
        align-self: start;
    }

    .company-dashboard-layout .cd-main-col {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .company-dashboard-layout .cd-sidebar-right {
        grid-column: 3;
        grid-row: 1;
        position: sticky;
        top: 76px;
        align-self: start;
    }

    .company-dashboard-layout .cd-posts-feed {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 980px) {
    .company-page-profile {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .company-page-actions {
        justify-items: start;
        min-width: 0;
    }

    .company-page-action-row {
        justify-content: flex-start;
    }
}

/* Section block (white card wrapper inside main col) */
.cd-section-block {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.04);
}

.cd-section-header {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    margin-bottom: 16px;
}

.cd-posts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cd-section-count {
    font-size: 13px;
    color: #94a3b8;
}

/* Action banner */
.company-action-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
    color: #ffffff;
    border-radius: 20px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14.5px;
    font-weight: 600;
}

.company-action-banner-link {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.company-action-banner-link:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

.company-post-btn {
    background: #ffffff;
    color: #1d4ed8 !important;
    font-size: 13.5px;
    padding: 9px 18px;
    white-space: nowrap;
    flex-shrink: 0;
}

.company-post-btn:hover { background: #eff6ff; }

/* Opportunity cards grid */
.company-opportunity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.company-workbench {
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.company-opp-card {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.company-opp-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.company-opp-icon svg { width: 17px; height: 17px; }

.company-opp-icon-purple { background: #faf5ff; color: #7c3aed; }
.company-opp-icon-blue   { background: #eff6ff; color: #2563eb; }
.company-opp-icon-green  { background: #f0fdf4; color: #16a34a; }
.company-opp-icon-orange { background: #fff7ed; color: #ea580c; }

.company-opp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.company-opp-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}

.company-opp-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

/* Clickable opp card (verified) */
.company-opp-card-btn {
    cursor: pointer;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.company-opp-card-btn:hover,
.company-opp-card-btn:focus-visible {
    border-color: #a5b4fc;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
    transform: translateY(-1px);
    outline: none;
}

/* Locked opp card (unverified) */
.company-opp-card-locked {
    opacity: 0.55;
    cursor: default;
}

.opp-post-cta {
    font-size: 11.5px;
    font-weight: 600;
    color: #6366f1;
    margin-top: 5px;
}

/* Locked notice */
.company-locked-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
}

.company-locked-note svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Post cards inside My Posts */
.cd-posts-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: calc(var(--page-shell-max) - 572px);
    margin-right: auto;
}

.college-profile-page .cd-posts-feed {
    max-width: 100%;
    margin-right: 0;
}

.cd-post-card {
    background: #ffffff;
}

.company-dashboard-post-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
}

.company-dashboard-post-icon svg {
    width: 20px;
    height: 20px;
}

.cd-post-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cd-post-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 10px 0 10px;
}

.cd-post-body {
    font-size: 14px;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

.cd-post-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.cd-post-actions form {
    margin: 0;
}

.cd-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #dbe1ea;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

button.cd-action-btn {
    appearance: none;
    -webkit-appearance: none;
}

.cd-action-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.cd-action-btn.is-active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.cd-post-footer {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.cd-post-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
}

.cd-post-stats span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cd-comment-block { margin-top: 14px; }

.cd-posts-empty {
    background: #f8fafc;
    border: 1.5px dashed #e2e8f0;
    border-radius: 12px;
    padding: 32px 24px;
    font-size: 14px;
    color: #94a3b8;
    text-align: center;
}

/* Opportunity post modal */
.opp-post-modal[hidden] { display: none; }

.opp-post-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.opp-post-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(5px);
}

.opp-post-modal-card {
    position: relative;
    width: min(100%, 540px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: 24px;
    padding: 32px 32px 28px;
    background: #ffffff;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
}

.opp-post-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.opp-post-modal-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.opp-type-internship    { background: #faf5ff; color: #7c3aed; }
.opp-type-project       { background: #eff6ff; color: #2563eb; }
.opp-type-campus_hiring { background: #f0fdf4; color: #16a34a; }
.opp-type-event         { background: #fff7ed; color: #ea580c; }
.opp-type-general       { background: #eef2ff; color: #4338ca; }
.opp-type-achievement   { background: #fefce8; color: #b45309; }

.opp-post-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.opp-post-modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.opp-post-modal-close:hover { background: #e2e8f0; }

.opp-post-modal-form { display: flex; flex-direction: column; gap: 18px; }

.opp-post-modal-field { display: flex; flex-direction: column; gap: 6px; }

.opp-post-modal-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.opp-label-optional { font-weight: 400; color: #94a3b8; font-size: 12px; }
.opp-label-req { color: #ef4444; }

.opp-post-modal-select,
.opp-post-modal-input,
.opp-post-modal-textarea {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.15s, background 0.15s;
    resize: vertical;
    box-sizing: border-box;
}

.opp-post-modal-select:focus,
.opp-post-modal-input:focus,
.opp-post-modal-textarea:focus {
    outline: none;
    border-color: #6366f1;
    background: #ffffff;
}

.opp-post-modal-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 13.5px;
    color: #64748b;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.opp-post-modal-file-label:hover { border-color: #94a3b8; background: #f8fafc; }
.opp-post-modal-file-input { display: none; }

.opp-post-modal-submit {
    align-self: flex-end;
    background: #0f172a;
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.opp-post-modal-submit:hover { background: #1e293b; }

/* Feed post type badges */
.feed-post-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.feed-badge-internship    { background: #faf5ff; color: #7c3aed; }
.feed-badge-project       { background: #eff6ff; color: #2563eb; }
.feed-badge-campus_hiring { background: #f0fdf4; color: #16a34a; }
.feed-badge-event         { background: #fff7ed; color: #ea580c; }
.feed-badge-achievement   { background: #fefce8; color: #b45309; }
.feed-badge-poll          { background: #fdf4ff; color: #9333ea; }

.feed-post-privacy-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
    margin-left: 6px;
    align-items: center;
    gap: 4px;
}

.feed-post-privacy-badge i {
    margin-right: 4px;
}

.feed-privacy-only_me {
    background: #fecdd3;
    color: #991b1b;
}

.feed-privacy-only_circle {
    background: #dbeafe;
    color: #1e40af;
}

.feed-privacy-college {
    background: #d1fae5;
    color: #065f46;
}

.feed-privacy-public {
    background: #f3e8ff;
    color: #6b21a8;
}

.feed-privacy-current_students {
    background: #fef9c3;
    color: #854d0e;
}

.feed-privacy-alumni {
    background: #ffe4e6;
    color: #9f1239;
}

/* Company signup header */
.signup-header-company {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
}

.signup-header-company h1 { font-size: 22px; }

.sg-submit-company { background: #7c3aed; }
.sg-submit-company:hover { background: #6d28d9; }

/* Login tab — 3-column now */
.login-role-cards { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
    .dir-company-grid { grid-template-columns: repeat(2, 1fr); }
    .dir-filter-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .login-role-cards { grid-template-columns: 1fr; gap: 8px; }
    .company-opportunity-grid { grid-template-columns: 1fr; }
    .company-action-banner { flex-direction: column; }
    .company-page-profile {
        grid-template-columns: 1fr;
        margin-top: 0;
        padding: 18px;
    }
    .company-page-summary h1 {
        font-size: 30px;
    }
    .company-page-actions {
        justify-items: start;
        min-width: 0;
    }
    .company-page-action-row {
        justify-content: flex-start;
    }
    .company-page-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .company-page-nav {
        padding: 12px 18px 16px;
    }
    .cd-posts-feed { max-width: 100%; }
    .dir-company-grid { grid-template-columns: 1fr; }
    .dir-filter-row { grid-template-columns: 1fr; }
    .cp-layout { grid-template-columns: 1fr; }
    .cp-sidebar { position: static; }
}

/* ============================================================
   END ADMIN DASHBOARD
   ============================================================ */

@media (max-width: 800px) {
    .hero-card {
        padding: 34px 24px;
    }

    .hero-card h1 {
        font-size: 36px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .social-card {
        padding: 18px 14px;
    }

    .profile-shell,
    .profile-post-body.has-media,
    .profile-overview-grid {
        grid-template-columns: 1fr;
    }

    .profile-social-shell {
        grid-template-columns: 1fr;
    }

    .profile-activity-side {
        position: static;
        top: auto;
    }

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

    /* Info grid stays 4 cols but tighter on tablet */
    .profile-info-grid {
        gap: 6px;
    }

    .profile-info-tile {
        padding: 12px 6px 10px;
    }

    .profile-hero-body {
        padding: 0 18px 22px;
    }

    .profile-hero-overview {
        margin: 0 18px 22px;
    }

    .profile-avatar-lg {
        width: 80px;
        height: 80px;
    }

    .profile-avatar-stack {
        margin-top: -40px;
        width: 80px;
        height: 80px;
    }

    .profile-name {
        font-size: 22px;
    }

    .profile-subline {
        font-size: 13px;
    }

    .profile-data-row {
        gap: 10px;
    }

    .profile-hero-actions {
        justify-content: flex-end;
    }

    .profile-top-row {
        margin-bottom: 14px;
    }

    .profile-cover-band {
        height: 110px;
    }

    .profile-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .composer-row {
        grid-template-columns: 1fr;
    }

    .intro-card h1 {
        font-size: 34px;
    }

    .social-post-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .panel-heading h2 {
        font-size: 24px;
    }

    .admin-shell,
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
    }

    .admin-main {
        padding: 22px;
    }

    .admin-header {
        flex-direction: column;
    }
}

/* Profile feed list gap */
.profile-feed-list {
    gap: 14px;
}

/* ── Profile left sidebar: circle list ── */
.profile-circle-list-card {
    padding: 0 !important;
    overflow: hidden;
}

.profile-circle-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
}

.profile-circle-list-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.profile-circle-list-title i {
    font-size: 11px;
    color: #94a3b8;
}

.profile-circle-list-count {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: #0f172a;
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.5;
}

.profile-circle-list-more {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: color 0.12s;
}

.profile-circle-list-more:hover {
    color: #0f172a;
}

.profile-circle-list {
    display: flex;
    flex-direction: column;
}

.profile-circle-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.1s;
}

.profile-circle-list-item:hover {
    background: #f8fafc;
}

.profile-circle-list-item:last-child {
    border-bottom: none;
}

.profile-circle-list-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.profile-circle-list-info strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-circle-list-info span {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-circle-list-college {
    max-width: 100%;
    color: #64748b !important;
}

.profile-circle-list-college i {
    font-size: 10px;
    margin-right: 3px;
}

.profile-circle-list-empty {
    padding: 20px 16px;
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    text-align: center;
}

.profile-sidebar-stat-row {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.profile-sidebar-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    position: relative;
}

.profile-sidebar-stat + .profile-sidebar-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 15%; bottom: 15%;
    width: 1px;
    background: #f1f5f9;
}

.profile-sidebar-stat strong {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    line-height: 1;
}

.profile-sidebar-stat span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
}

.profile-sidebar-stat-accent strong {
    color: #0f172a;
}

.profile-sidebar-college {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-decoration: none;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 12px;
    transition: color 0.12s;
}

.profile-sidebar-college:hover {
    color: #0f172a;
}

.profile-sidebar-college i {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
    flex-shrink: 0;
}

.profile-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.profile-sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: color 0.12s;
}

.profile-sidebar-link:hover {
    color: #0f172a;
}

.profile-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.profile-sidebar-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}

.profile-sidebar-action-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}

/* ── Profile mobile: edge-to-edge, no rounded corners, feed = public feed ── */
@media (max-width: 800px) {
    body.profile-feed-body .page-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Hero card and all section cards: flat, edge-to-edge */
    body.profile-feed-body .profile-hero-card,
    body.profile-feed-body .profile-section-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    /* Cover band: no radius */
    body.profile-feed-body .profile-cover-band {
        border-radius: 0 !important;
    }

    /* Activity shell: no outer gap */
    body.profile-feed-body .profile-activity-shell {
        gap: 0 !important;
        margin-top: 0 !important;
    }

    body.profile-feed-body .profile-top-stack {
        gap: 0 !important;
    }

    body.profile-feed-body .profile-main-column,
    body.profile-feed-body .profile-side-column {
        gap: 0 !important;
    }

    /* Feed: same as public feed */
    body.profile-feed-body .profile-feed-list,
    body.profile-feed-body .social-feed-list {
        gap: 0 !important;
    }

    body.profile-feed-body .social-post-card,
    body.profile-feed-body .fb-post-card,
    body.profile-feed-body .profile-feed-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    body.profile-feed-body .fb-post-card::before {
        border-radius: 0 !important;
    }

    body.profile-feed-body .feed-image-wrap,
    body.profile-feed-body .post-slider {
        border-radius: 0 !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
    }

    body.profile-feed-body .feed-image,
    body.profile-feed-body .post-slider-slide img {
        border-radius: 0 !important;
    }

    /* Section cards: remove side padding, let inner elements handle spacing */
    body.profile-feed-body .profile-section-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }

    body.profile-feed-body .profile-section-head {
        padding: 16px 16px 0 !important;
        margin-bottom: 12px !important;
    }

    body.profile-feed-body .profile-activity-feed .profile-section-card {
        padding: 0 !important;
    }

    /* Inner padding adjustments */
    /* Scroll rail: full bleed on mobile */
    body.profile-feed-body .profile-scroll-rail {
        margin-left: -16px !important;
        margin-right: -16px !important;
    }

    body.profile-feed-body .profile-rail-item {
        min-width: 80px !important;
        padding: 12px 14px !important;
    }

    body.profile-feed-body .profile-hero-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.profile-feed-body .profile-hero-overview {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 16px !important;
    }

    body.profile-feed-body .profile-bio-wrap {
        padding: 8px 16px 0 !important;
        margin-bottom: 0 !important;
    }

    /* Skills, data rows, etc: restore side padding */
    body.profile-feed-body .profile-fact-grid,
    body.profile-feed-body .profile-data-list,
    body.profile-feed-body .profile-overview-grid,
    body.profile-feed-body .profile-post-list,
    body.profile-feed-body .profile-skill-list,
    body.profile-feed-body .profile-stat-grid,
    body.profile-feed-body .profile-locked-card,
    body.profile-feed-body .profile-section-sub {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.profile-feed-body .profile-locked-card {
        padding-bottom: 16px !important;
    }
}

/* ── Chat ────────────────────────────────────── */

/* body.chat-body drives the full-height flex layout — no px guessing */
body.chat-body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.chat-body .site-header {
    flex-shrink: 0;
}

body.chat-body .page-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: var(--lc-max-width);
    margin: 36px auto;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.chat-body .page-wrap > .chat-shell {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1199px) {
    body.chat-body .page-wrap > .chat-shell,
    body.chat-body .chat-shell {
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
    }
}

body.chat-body .global-messages {
    flex-shrink: 0;
}

body.chat-body .site-footer {
    display: none;
}

/* Mobile responsive for chat */
@media (max-width: 768px) {
    body.chat-body {
        height: 100dvh;
    }

    body.chat-body .site-header {
        flex-shrink: 0;
    }

    body.chat-body .page-wrap {
        flex: 1;
        min-height: 0;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }

    body.chat-body .chat-shell {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 479px) {
    body.chat-body .page-wrap {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

.chat-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    background: #f8fafc;
    width: 100%;
    margin: 0 0 18px;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    overflow: hidden;
}

/* Sidebar */
.chat-sidebar {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.chat-sidebar-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.chat-sidebar-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
    order: 1;
    flex: 1;
}

.chat-sidebar-home-link {
    color: inherit;
    text-decoration: none;
}

.chat-sidebar-home-link:hover {
    color: #1e293b;
}

.chat-sidebar-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    order: 3;
}

.chat-background-form {
    margin: 0;
}

.chat-background-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}

.chat-background-btn:hover {
    border-color: #94a3b8;
    background: #ffffff;
    color: #0f172a;
}

.chat-background-btn.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.chat-background-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.chat-background-clear {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.chat-background-clear:hover {
    border-color: #fecaca;
    background: #fff1f2;
    color: #dc2626;
}

.chat-background-clear:hover {
    border-color: #fecaca;
    background: #fff1f2;
    color: #dc2626;
}

.chat-conversations {
    overflow-y: auto;
    flex: 1;
}

.chat-conv-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
    cursor: pointer;
}

.chat-conv-item:hover {
    background: #f8fafc;
}

.chat-conv-item.is-active {
    background: #eff6ff;
    border-right: 3px solid #2563eb;
}

.chat-conv-avatar {
    flex-shrink: 0;
}

.chat-conv-info {
    flex: 1;
    min-width: 0;
}

.chat-conv-name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-conv-preview {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.chat-conv-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.chat-conv-time {
    font-size: 10.5px;
    color: #cbd5e1;
}

.chat-unread-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.chat-empty-list {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
}

.chat-empty-list i {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    opacity: 0.4;
}

.chat-empty-list p {
    font-size: 13px;
    margin: 0;
}

.chat-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 10px 16px 4px;
}

.chat-group-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.chat-group-avatar img,
.chat-group-avatar span {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #f8fafc;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    object-fit: cover;
}

.chat-group-avatar img:first-child,
.chat-group-avatar span:first-child {
    top: 0;
    left: 0;
    z-index: 2;
}

.chat-group-avatar img:nth-child(2),
.chat-group-avatar span:nth-child(2) {
    bottom: 0;
    right: 0;
    z-index: 1;
}

.chat-sender-name {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
    padding-left: 2px;
}

.chat-message-other .chat-sender-name {
    display: block;
}

.chat-message-own .chat-sender-name {
    display: none;
}

.chat-group-header-avatars {
    display: flex;
    align-items: center;
    margin-right: 4px;
    flex-shrink: 0;
}

.chat-group-header-avatar {
    width: 32px;
    height: 32px;
    margin-left: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.chat-group-header-avatar:first-child {
    margin-left: 0;
}

.chat-group-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-group-header-avatar span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.chat-group-header-avatar-more {
    background: #e2e8f0;
    border-color: #ffffff;
}

.chat-group-header-avatar-more span {
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
}

.chat-group-start-avatars {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.chat-group-start-avatars .chat-group-header-avatar {
    width: 44px;
    height: 44px;
}

/* Main area */
.chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f1f5f9;
}

.chat-main-themed {
    background: #f1f5f9;
}

.chat-main-themed .chat-header,
.chat-main-themed .chat-input-bar,
.chat-main-themed .leave-request-banner {
    background: rgba(255, 255, 255, 0.9);
}

.chat-main-themed .leave-request-banner--own {
    background: rgba(240, 253, 244, 0.92);
}

.chat-main-themed .leave-request-banner--rejected {
    background: rgba(254, 242, 242, 0.92);
}

.chat-main-themed .chat-messages,
.chat-main-themed .chat-recents-pane,
.chat-main-themed .chat-empty-state,
.chat-main-themed .chat-typing-indicator {
    background: rgba(248, 250, 252, 0.28);
}

@media (min-width: 1100px) {
    .chat-shell {
        min-width: 1040px;
    }

    .chat-main {
        min-width: 740px;
    }
}

/* Chat header */
.chat-header {
    padding: 12px 22px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
    box-shadow: 0 1px 0 #e2e8f0;
}

.chat-header-avatar {
    flex-shrink: 0;
    text-decoration: none;
}

.chat-header-info {
    flex: 1;
    min-width: 0;
}

.chat-header-name {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-sub {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-menu {
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}

.chat-header-menu-trigger {
    width: 38px;
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chat-header-menu-trigger:hover,
.chat-header-menu-trigger[aria-expanded="true"] {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.chat-header-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    z-index: 30;
}

.chat-header-menu-dropdown form {
    margin: 0;
}

.chat-header-menu-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: #0f172a;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.chat-header-menu-item:hover {
    background: #f8fafc;
}

.chat-header-menu-item-danger {
    color: #b91c1c;
}

.chat-header-menu-item-danger:hover {
    background: #fef2f2;
}

.circle-name-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.circle-name-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.circle-name-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
}

.circle-name-modal-card {
    position: relative;
    width: min(100%, 460px);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.circle-name-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.circle-name-modal-header h3 {
    margin: 0;
    font-size: 17px;
    color: #0f172a;
}

.circle-name-modal-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.circle-name-modal-body {
    padding: 20px;
}

.circle-name-input {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 15px;
    color: #0f172a;
    background: #ffffff;
}

.circle-name-input:focus {
    outline: none;
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.circle-name-error {
    margin: 10px 2px 0;
    color: #dc2626;
    font-size: 13px;
}

.circle-name-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 20px;
}

.circle-name-cancel-btn,
.circle-name-save-btn {
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.circle-name-cancel-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
}

.circle-name-save-btn {
    border: 0;
    background: #0f172a;
    color: #ffffff;
}

.circle-name-save-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.chat-group-name-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.chat-group-name-input {
    min-width: 220px;
    max-width: 360px;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #0f172a;
    background: #ffffff;
}

.chat-group-name-input:focus {
    outline: none;
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.chat-group-name-btn {
    border: 0;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.chat-group-name-btn:hover {
    background: #1e293b;
}

.chat-header-profile-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chat-header-profile-link:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #1e293b;
}

/* Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
}

.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 65%;
}

.chat-message-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.chat-message-own {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-message-other {
    align-self: flex-start;
    align-items: flex-start;
}

.chat-bubble {
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-bubble-deleted {
    font-style: italic;
    opacity: 0.7;
}

.chat-reply-snippet {
    border-left: 3px solid #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 100%;
}

.chat-reply-snippet strong {
    font-size: 11px;
    color: #0f172a;
}

.chat-reply-snippet span {
    font-size: 12px;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-message-own .chat-bubble {
    background: #0f172a;
    color: #ffffff;
    border-bottom-right-radius: 5px;
}

.chat-message-other .chat-bubble {
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 5px;
}

.chat-meta {
    font-size: 10px;
    color: #cbd5e1;
    margin-top: 3px;
    padding: 0 4px;
}

.chat-message-other .chat-meta,
.chat-message-other .chat-reply-snippet strong {
    color: #475569;
}

.chat-message-own .chat-reply-snippet {
    border-left-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.12);
}

.chat-message-own .chat-reply-snippet strong,
.chat-message-own .chat-reply-snippet span {
    color: #e2e8f0;
}

.chat-attachment {
    display: block;
    max-width: min(340px, 100%);
    text-decoration: none;
}

.chat-attachment-image {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid #dbe3ee;
    background: #ffffff;
}

.chat-attachment-image img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    display: block;
}

.chat-attachment-media {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #dbe3ee;
}

.chat-attachment-media video,
.chat-attachment-media audio {
    width: 100%;
    display: block;
}

.chat-attachment-media small {
    font-size: 11px;
    color: #64748b;
}

.chat-attachment-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #dbe3ee;
    color: #1e293b;
}

.chat-attachment-file i {
    font-size: 18px;
    color: #475569;
    flex-shrink: 0;
}

.chat-attachment-file div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.chat-attachment-file span,
.chat-attachment-file small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-attachment-file span {
    font-size: 12.5px;
    font-weight: 700;
}

.chat-attachment-file small {
    font-size: 11px;
    color: #64748b;
}

.chat-reaction-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.chat-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe3ee;
    color: #334155;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1;
}

.chat-reaction-chip.is-reacted {
    border-color: #94a3b8;
    background: #eff6ff;
}

.chat-reply-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.chat-reply-bar[hidden] {
    display: none !important;
}

.chat-reply-bar-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-reply-bar-copy strong {
    font-size: 12px;
    color: #0f172a;
}

.chat-reply-bar-copy span {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reply-cancel {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.chat-action-sheet[hidden] {
    display: none;
}

.chat-action-sheet {
    position: fixed;
    inset: 0;
    z-index: 9800;
}

.chat-action-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
}

.chat-action-sheet-panel {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(92vw, 360px);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    padding: 14px;
}

@media (max-width: 479px) {
    .chat-action-sheet-panel {
        width: 95vw;
        bottom: 12px;
        border-radius: 16px;
    }
}

.chat-action-reactions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.chat-reaction-option {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #f8fafc;
    font-size: 22px;
    cursor: pointer;
}

.chat-action-list {
    display: grid;
    gap: 6px;
}

.chat-action-item {
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    color: #0f172a;
    padding: 12px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.chat-action-item[hidden] {
    display: none !important;
}

.chat-action-item:hover {
    background: #f8fafc;
}

.chat-action-item-danger {
    color: #b91c1c;
}

/* Conversation start hint */
.chat-start-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: auto;
    padding: 40px 0;
    color: #94a3b8;
    text-align: center;
}

.chat-start-avatar {
    margin-bottom: 4px;
}

.chat-start-hint p {
    margin: 0;
    font-size: 16px;
    color: #0f172a;
}

.chat-start-hint span {
    font-size: 13px;
}

/* Leave circle */
.chat-leave-form {
    margin-left: auto;
    flex-shrink: 0;
}

.chat-leave-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.chat-leave-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

.chat-leave-btn--cancel:hover {
    border-color: #f59e0b;
    color: #d97706;
    background: #fffbeb;
}

.leave-request-banner {
    flex-shrink: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fefce8;
    padding: 10px 20px;
}

.leave-request-banner--own {
    background: #f0fdf4;
}

.leave-request-banner--rejected {
    background: #fef2f2;
}

.leave-request-banner--rejected .leave-request-banner-content > i {
    color: #ef4444;
}

.leave-request-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.leave-request-banner-content > i {
    font-size: 15px;
    color: #f59e0b;
    flex-shrink: 0;
}

.leave-request-banner--own .leave-request-banner-content > i {
    color: #22c55e;
}

.leave-request-banner-text {
    flex: 1;
    min-width: 0;
}

.leave-request-banner-text strong {
    display: block;
    font-size: 13px;
    color: #1e293b;
}

.leave-request-banner-text span {
    font-size: 12px;
    color: #64748b;
}

.leave-accept-btn {
    padding: 5px 14px;
    border-radius: 16px;
    border: none;
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s;
}

.leave-accept-btn:hover {
    background: #1e293b;
}

.leave-accepted-badge {
    font-size: 12px;
    color: #22c55e;
    font-weight: 600;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.leave-action-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.leave-reject-btn {
    padding: 5px 14px;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: all 0.15s;
}

.leave-reject-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

/* Typing indicator */
.chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 28px 6px;
    flex-shrink: 0;
}

.chat-typing-indicator[hidden] {
    display: none;
}

.chat-typing-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    border-bottom-left-radius: 5px;
    padding: 9px 14px;
}

.chat-typing-bubble span {
    width: 7px;
    height: 7px;
    background: #94a3b8;
    border-radius: 50%;
    display: inline-block;
    animation: typingBounce 1.3s ease-in-out infinite;
}

.chat-typing-bubble span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing-bubble span:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.chat-typing-label {
    font-size: 12px;
    color: #64748b;
}

/* Input bar */
.chat-input-bar {
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    flex-shrink: 0;
}

/* ── Blocked state bar ── */
.chat-blocked-bar[hidden] { display: none !important; }

.chat-blocked-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #fee2e2;
    background: #fff5f5;
    flex-shrink: 0;
    font-size: 13.5px;
    color: #64748b;
}

.chat-blocked-bar i {
    color: #ef4444;
    font-size: 16px;
    flex-shrink: 0;
}

.chat-blocked-bar strong {
    color: #0f172a;
    font-weight: 700;
}

.chat-blocked-bar--them {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.chat-blocked-bar--them i {
    color: #94a3b8;
}

.chat-blocked-unblock {
    margin-left: auto;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.14s, border-color 0.14s;
}

.chat-blocked-unblock:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.chat-input-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 24px;
    padding: 8px 8px 8px 18px;
    transition: border-color 0.15s;
}

.chat-input-form:focus-within {
    border-color: #94a3b8;
    background: #ffffff;
}

.chat-input-form textarea {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    color: #1e293b;
    outline: none;
    max-height: 120px;
    line-height: 1.5;
    padding: 3px 0;
    overflow-y: auto;
}

.chat-input-form textarea::placeholder {
    color: #94a3b8;
}

.chat-input-form textarea:disabled {
    opacity: 0.5;
}

.chat-attachment-input {
    display: none;
}

.chat-attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #dbe3ee;
    background: #ffffff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.chat-attach-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    transform: scale(1.04);
}

.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
    transition: background 0.15s, transform 0.1s;
}

.chat-send-btn:hover {
    background: #1e293b;
    transform: scale(1.06);
}

/* Empty state (home page) */
.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #94a3b8;
}

.chat-empty-state i {
    font-size: 52px;
    opacity: 0.3;
}

.chat-empty-state p {
    font-size: 15px;
    color: #64748b;
    margin: 0;
}

.chat-recents-pane {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    background: #ffffff;
}

.chat-recents-head {
    padding: 24px 24px 16px;
}

.chat-recents-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.chat-recents-head p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 13px;
}

.chat-recents-list {
    margin-top: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid #f1f5f9;
}

.chat-request-list {
    display: grid;
    gap: 0;
    margin: 16px 0 22px;
}

.chat-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-radius: 0;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.chat-request-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.chat-request-copy {
    min-width: 0;
}

.chat-request-copy strong,
.chat-request-copy span {
    display: block;
}

.chat-request-copy strong {
    font-size: 14px;
    color: #0f172a;
}

.chat-request-copy span {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

.chat-request-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-request-actions form {
    margin: 0;
}

.chat-request-btn {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.chat-request-btn-primary {
    border-color: #0f172a;
    background: #0f172a;
    color: #ffffff;
}

.chat-recent-card {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 24px;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    background: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}

.chat-recent-card:hover {
    background: #f8fafc;
}

.chat-recent-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.chat-recent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-recent-avatar-group {
    background: #1e293b;
}

.chat-recent-content {
    flex: 1;
    min-width: 0;
}

.chat-recent-top,
.chat-recent-bottom {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chat-recent-top {
    justify-content: space-between;
}

.chat-recent-title,
.chat-recent-subtitle,
.chat-recent-preview {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-recent-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.chat-recent-time {
    flex-shrink: 0;
    font-size: 11px;
    color: #94a3b8;
}

.chat-recent-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
}

.chat-recent-bottom {
    margin-top: 5px;
    justify-content: space-between;
}

.chat-recent-preview {
    font-size: 13px;
    color: #475569;
}

.chat-recent-preview--typing {
    font-style: italic;
    color: #475569;
}

.chat-broadcast-item.is-active {
    background: #eff6ff;
    border-right: 3px solid #2563eb;
}

.chat-broadcast-avatar,
.chat-broadcast-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1d4ed8;
    background: #dbeafe;
}

.chat-broadcast-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
}

.chat-broadcast-header {
    align-items: center;
}

.chat-broadcast-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 18px;
}

.chat-broadcast-messages {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.chat-broadcast-card {
    max-width: 720px;
    padding: 16px 18px;
    border: 1px solid #dbe3ec;
    border-radius: 20px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.chat-broadcast-card + .chat-broadcast-card {
    margin-top: 12px;
}

.chat-broadcast-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.chat-broadcast-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.chat-broadcast-label {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chat-broadcast-time {
    font-size: 12px;
    color: #64748b;
    flex-shrink: 0;
}

.chat-broadcast-body {
    font-size: 14px;
    line-height: 1.7;
    color: #1e293b;
    white-space: normal;
    word-break: break-word;
}

.chat-broadcast-body-deleted {
    color: #94a3b8;
    font-style: italic;
}

.chat-broadcast-card .chat-reaction-strip {
    margin-top: 12px;
}

.chat-broadcast-empty i {
    color: #94a3b8;
}

/* Responsive */
/* Mobile: Small phones (< 480px) */
@media (max-width: 479px) {
    body.chat-body .page-wrap {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .chat-shell {
        margin: 0;
        border-radius: 0;
    }

    .chat-sidebar {
        display: none;
    }

    .chat-header {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap;
        align-items: center;
        min-height: 52px;
    }

    .chat-header-avatar-wrap {
        order: 1;
        flex-shrink: 0;
    }

    /* Shrink avatar stack on mobile */
    .chat-group-header-avatars {
        margin-right: 0;
    }

    .chat-group-header-avatar {
        width: 26px;
        height: 26px;
        margin-left: -6px;
    }

    .chat-group-header-avatar span {
        font-size: 10px;
    }

    .chat-header-info {
        order: 2;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .chat-header-profile-link {
        order: 3;
        flex-shrink: 0;
    }

    .chat-header-menu {
        flex-shrink: 0;
        order: 3;
        margin-left: auto;
    }

    .chat-header-menu-trigger {
        width: 34px;
        height: 34px;
    }

    /* Mobile controls drawer in header */
    .chat-mobile-controls {
        order: 4;
        width: 100%;
        display: flex;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid #e2e8f0;
    }

    .chat-header-name {
        font-size: 13px;
        font-weight: 700;
    }

    .chat-header-sub {
        font-size: 11px;
        margin-top: 1px;
    }

    .chat-messages {
        padding: 12px 12px;
        gap: 4px;
    }

    .chat-message {
        max-width: 90%;
    }

    .chat-bubble {
        padding: 8px 12px;
        border-radius: 16px;
        font-size: 13px;
    }

    .chat-message-own .chat-bubble {
        border-bottom-right-radius: 2px;
    }

    .chat-message-other .chat-bubble {
        border-bottom-left-radius: 2px;
    }

    .chat-input-bar {
        padding: 10px 14px;
    }

    .chat-input-form {
        border-radius: 20px;
        padding: 6px 6px 6px 14px;
    }

    .chat-input-form textarea {
        font-size: 13px;
        max-height: 100px;
    }

    .chat-attach-btn,
    .chat-send-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .chat-typing-indicator {
        padding: 0 12px;
    }

    .chat-recents-pane {
        padding: 0;
    }

    .chat-recents-head {
        padding: 16px 16px 12px;
    }

    .chat-recents-list {
        gap: 0;
    }

    .chat-recent-card {
        padding: 12px 16px;
        gap: 12px;
    }

    .chat-recent-avatar {
        width: 44px;
        height: 44px;
        font-size: 13px;
    }

    .chat-recent-title {
        font-size: 13px;
    }

    .chat-recent-time {
        font-size: 10px;
    }

    .chat-request-card {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .chat-request-actions {
        width: 100%;
    }

    .chat-request-btn {
        flex: 1;
        min-width: 0;
    }
}

/* Tablet: Medium phones & tablets (480px - 768px) */
@media (min-width: 480px) and (max-width: 768px) {
    body.chat-body .page-wrap {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .chat-shell {
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .chat-sidebar {
        width: 80px;
    }

    .chat-sidebar-header {
        justify-content: center;
        padding: 8px 8px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .chat-sidebar-header h2 {
        font-size: 11px;
        order: 1;
        width: 100%;
        text-align: center;
        margin: 0 0 4px 0;
    }

    .chat-status-wrap {
        order: 2;
        display: flex;
        justify-content: center;
    }

    .chat-sidebar-tools {
        flex-direction: row;
        gap: 6px;
        order: 3;
        justify-content: center;
    }

    .chat-conv-info,
    .chat-conv-meta {
        display: none;
    }

    .chat-background-btn,
    .chat-background-clear {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }

    .chat-background-btn span {
        display: none;
    }

    .chat-conv-item {
        justify-content: center;
        padding: 10px;
    }

    .chat-header {
        padding: 10px 16px;
    }

    .chat-messages {
        padding: 14px 16px;
    }

    .chat-message {
        max-width: 85%;
    }

    .chat-bubble {
        font-size: 13.5px;
    }

    .chat-input-bar {
        padding: 10px 16px;
    }

    .chat-recents-pane {
        padding: 0;
    }

    .chat-recents-head {
        padding: 14px 14px 10px;
    }

    .chat-recent-card {
        padding: 11px 14px;
    }

    .chat-request-card {
        padding: 10px;
    }

    /* Better styling for status and background controls on tablets */
    .chat-status-btn {
        width: 36px;
        height: 36px;
    }

    .chat-background-btn {
        padding: 8px 10px;
        border-radius: 18px;
    }

    .chat-background-clear {
        width: 36px;
        height: 36px;
    }

    .chat-status-menu {
        left: -20px;
    }
}

/* Desktop: Large tablets & up (769px - 1099px) */
@media (min-width: 769px) and (max-width: 1099px) {
    .chat-sidebar {
        width: 280px;
    }

    .chat-messages {
        padding: 20px 24px;
    }

    .chat-message {
        max-width: 70%;
    }
}

/* Original responsive rule for older screens */
@media (max-width: 700px) {
    .chat-shell {
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
    }
    .chat-sidebar-header {
        justify-content: center;
        padding: 12px 8px;
    }
    .chat-sidebar-tools {
        flex-direction: column;
        gap: 6px;
    }
    .chat-background-btn,
    .chat-background-clear {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }
    .chat-background-btn span {
        display: none;
    }
    .chat-sidebar {
        width: 72px;
    }
    .chat-conv-info,
    .chat-conv-meta,
    .chat-sidebar-header h2 {
        display: none;
    }
    .chat-conv-item {
        justify-content: center;
        padding: 10px;
    }
    .chat-messages {
        padding: 14px 14px;
    }
    .chat-message {
        max-width: 85%;
    }
    .chat-recents-pane {
        padding: 0;
    }
    .chat-recents-head {
        padding: 14px 14px 10px;
    }
    .chat-recent-card {
        padding: 10px 14px;
    }
}

/* Mobile: Touch-friendly UI improvements */
@media (max-width: 768px) {
    /* Ensure minimum touch target sizes */
    .chat-attach-btn,
    .chat-send-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .chat-reaction-option {
        min-width: 44px;
        min-height: 44px;
    }

    .chat-action-item {
        min-height: 44px;
        padding: 14px 12px;
    }

    .chat-request-btn {
        min-height: 40px;
    }

    /* Better spacing for form elements */
    .chat-input-form textarea {
        padding: 6px 0;
    }

    /* Optimize avatar sizes for mobile */
    .chat-conv-avatar {
        width: 40px;
        height: 40px;
    }

    .chat-header-avatar {
        width: 36px;
        height: 36px;
    }

    /* Better readability on mobile */
    .chat-header-name {
        font-size: 14px;
    }

    .chat-bubble {
        line-height: 1.6;
    }

    /* Prevent text zoom on input focus */
    input,
    textarea,
    select,
    button {
        font-size: 16px;
    }
}

/* Extra small phones */
@media (max-width: 479px) {
    /* Stack layouts for narrow screens */
    .chat-conv-avatar-wrap {
        margin-right: -4px;
    }

    /* Better button sizes for small screens */
    .chat-attach-btn,
    .chat-send-btn,
    .chat-reaction-option {
        min-width: 40px;
        min-height: 40px;
    }

    /* Optimize message bubbles */
    .chat-bubble {
        padding: 7px 11px;
        font-size: 13px;
        line-height: 1.5;
    }

    /* Compact avatar for small screens */
    .chat-recent-avatar {
        width: 38px;
        height: 38px;
        font-size: 12px;
    }

    /* Better readability with tighter spacing */
    .chat-recent-title {
        font-size: 12.5px;
    }

    .chat-recent-subtitle {
        font-size: 11px;
    }

    /* Safe area for notches */
    @supports (padding: max(0px)) {
        body.chat-body .page-wrap {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }
    }
}

/* ══════════════════════════════════════════════
   SITE FOOTER
══════════════════════════════════════════════ */

.site-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-body .page-wrap {
    flex: 1;
}

/* ── Home feed: only center column scrolls, sidebars stay fixed ── */

body.home-feed-body .page-wrap {
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Hide page scrollbar but keep scrolling working (auth layout only) */
body.home-feed-body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.home-feed-body::-webkit-scrollbar {
    display: none;
}

/* Header sticks at top */
body.home-feed-body .site-header {
    position: sticky;
    top: 0;
    z-index: 200;
}

/* Sidebars: sticky so they never move while page scrolls */
body.home-feed-body .social-left,
body.home-feed-body .social-right {
    position: sticky;
    top: calc(68px + 16px); /* header height + page-wrap margin-top */
    align-self: start;
}

.site-footer {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 28%),
        linear-gradient(180deg, #081120 0%, #0b1628 100%);
    color: #94a3b8;
    margin-top: auto;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.35) 20%, rgba(99, 102, 241, 0.55) 50%, rgba(148, 163, 184, 0.35) 80%, transparent 100%);
}

.site-footer::after {
    content: "";
    position: absolute;
    inset: auto -140px -140px auto;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 70%);
    pointer-events: none;
}

.site-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 52px 40px 34px;
    display: flex;
    gap: 56px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 290px;
}

.site-footer-brand-card {
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.footer-logo-img {
    height: 52px;
    width: 52px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    padding: 6px;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-logo-name {
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.footer-logo-sub {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.48);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.site-footer-tagline {
    font-size: 14px;
    color: #a7b4c7;
    line-height: 1.75;
    margin: 0;
}

.site-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: #c7d2e3;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 999px;
}

.site-footer-pulse {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #8ea0b9;
    font-size: 12px;
    line-height: 1.5;
}

.site-footer-pulse-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
    box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.12);
}

.site-footer-nav {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 6px;
}

.site-footer-col-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8392a8;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    margin-bottom: 4px;
}

.site-footer-col a {
    font-size: 14px;
    color: #a6b2c4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color 0.15s, transform 0.15s, opacity 0.15s;
}

.site-footer-col a i {
    font-size: 12px;
    width: 16px;
    text-align: center;
    opacity: 0.75;
    color: #7c8aa1;
    transition: opacity 0.15s, color 0.15s;
}

.site-footer-col a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.site-footer-col a:hover i {
    opacity: 1;
    color: #9fb6ff;
}

.site-footer-bottom {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 40px 22px;
    font-size: 12px;
    color: #73849b;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.site-footer-bottom-tagline {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8b9ab0;
    font-size: 12px;
}

/* ── Public features page ── */

body.features-page-body {
    background: #f5f7fb;
    color: #111827;
}

.features-page-body .page-wrap {
    max-width: none;
    padding: 0;
}

.features-hero,
.features-section,
.features-final-cta {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.features-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
    gap: 48px;
    align-items: center;
    padding: 72px 0 54px;
}

.features-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: #2563eb;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.features-hero h1 {
    margin: 18px 0 18px;
    max-width: 820px;
    color: #0f172a;
    font-size: clamp(2.25rem, 5vw, 4.8rem);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: 0;
}

.features-hero p {
    max-width: 690px;
    margin: 0;
    color: #475569;
    font-size: 1.04rem;
    line-height: 1.75;
}

.features-hero-actions,
.features-final-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.features-hero-actions {
    margin-top: 30px;
    flex-wrap: wrap;
}

.features-primary-btn,
.features-secondary-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 850;
    text-decoration: none !important;
}

.features-primary-btn {
    background: #0f172a;
    color: #ffffff !important;
    border: 1px solid #0f172a;
}

.features-primary-btn:hover {
    background: #1e293b;
}

.features-secondary-btn {
    background: #ffffff;
    color: #0f172a !important;
    border: 1px solid #cbd5e1;
}

.features-secondary-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.features-hero-panel {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    padding: 22px;
}

.features-product-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 14px;
    padding: 18px;
}

.features-product-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #facc15;
    color: #111827;
    font-size: 1.3rem;
}

.features-product-card strong,
.features-product-card span {
    display: block;
}

.features-product-card strong {
    font-size: 1rem;
    font-weight: 900;
}

.features-product-card div > span {
    margin-top: 4px;
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.5;
}

.features-panel-grid,
.features-grid,
.features-audience-grid,
.features-stat-row {
    display: grid;
}

.features-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.features-mini-tile {
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 15px;
    color: #0f172a;
    font-weight: 850;
}

.features-mini-tile i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e0f2fe;
    color: #0369a1;
}

.features-stat-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.features-stat-row div {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}

.features-stat-row strong,
.features-stat-row span {
    display: block;
}

.features-stat-row strong {
    color: #0f172a;
    font-size: 1.5rem;
    line-height: 1;
}

.features-stat-row span {
    margin-top: 5px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 750;
}

.features-section {
    padding: 52px 0;
}

.features-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.features-section-head h2,
.features-trust-copy h2,
.features-final-cta h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: 0;
}

.features-section-head h2 {
    max-width: 620px;
}

.features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.feature-card {
    min-height: 238px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 16px;
    padding: 22px;
}

.feature-card i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 1.08rem;
}

.feature-card:nth-child(3n+2) i {
    background: #dcfce7;
    color: #15803d;
}

.feature-card:nth-child(3n) i {
    background: #fef3c7;
    color: #92400e;
}

.feature-card h3 {
    margin: 18px 0 9px;
    color: #0f172a;
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: 0;
}

.feature-card p,
.features-audience-card p,
.features-trust-copy p {
    margin: 0;
    color: #526174;
    font-size: 0.88rem;
    line-height: 1.7;
}

.features-audience-section {
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
    padding-inline: max(24px, calc((100% - 1180px) / 2));
}

.features-audience-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.features-audience-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
}

.features-audience-card span {
    display: block;
    margin-bottom: 10px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
}

.features-trust-section {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(340px, 1fr);
    gap: 28px;
    align-items: center;
}

.features-trust-copy h2 {
    margin: 16px 0 14px;
}

.features-trust-list {
    display: grid;
    gap: 12px;
}

.features-trust-list div {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    padding: 16px;
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 760;
}

.features-trust-list i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #bbf7d0;
    color: #166534;
    font-size: 0.78rem;
}

.features-final-cta {
    justify-content: space-between;
    margin-top: 34px;
    margin-bottom: 64px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
}

.features-final-cta .features-kicker {
    margin-bottom: 14px;
}

/* Gen Z flat feature-page refresh */

body.features-page-body {
    background: #fff7ed;
    color: #111827;
}

.features-page-body .page-wrap {
    overflow: hidden;
}

.features-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 450px);
    gap: 34px;
    padding: 76px 0 42px;
    position: relative;
}

.features-hero::before,
.features-hero::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border: 3px solid #111827;
    z-index: -1;
}

.features-hero::before {
    top: 38px;
    left: -56px;
    background: #facc15;
    transform: rotate(10deg);
}

.features-hero::after {
    right: -58px;
    bottom: 28px;
    background: #67e8f9;
    transform: rotate(-9deg);
}

.features-kicker {
    color: #111827;
    background: #a7f3d0;
    border: 2px solid #111827;
    border-radius: 999px;
    box-shadow: 4px 4px 0 #111827;
    padding: 8px 13px;
}

.features-hero h1 {
    max-width: 880px;
    font-size: clamp(2.7rem, 6.5vw, 6.6rem);
    line-height: 0.94;
    color: #111827;
    text-wrap: balance;
}

.features-hero p {
    max-width: 720px;
    color: #263241;
    font-size: 1.08rem;
    font-weight: 600;
}

.features-vibe-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.features-vibe-row span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 2px solid #111827;
    border-radius: 999px;
    color: #111827;
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 3px 3px 0 #111827;
}

.features-vibe-row span:nth-child(2) {
    background: #bfdbfe;
}

.features-vibe-row span:nth-child(3) {
    background: #fecdd3;
}

.features-vibe-row span:nth-child(4) {
    background: #fde68a;
}

.features-primary-btn,
.features-secondary-btn {
    min-height: 50px;
    border: 2px solid #111827;
    border-radius: 12px;
    box-shadow: 5px 5px 0 #111827;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.features-primary-btn {
    background: #111827;
    color: #ffffff !important;
}

.features-secondary-btn {
    background: #ffffff;
    color: #111827 !important;
}

.features-primary-btn:hover,
.features-secondary-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #111827;
}

.features-hero-panel {
    border: 3px solid #111827;
    border-radius: 24px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 12px 12px 0 #111827;
    transform: rotate(1deg);
}

.features-app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    color: #111827;
    font-size: 0.86rem;
    font-weight: 900;
}

.features-app-topbar span {
    width: 44px;
    height: 14px;
    border-radius: 999px;
    background: #111827;
}

.features-app-topbar i {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #111827;
    border-radius: 10px;
    background: #facc15;
}

.features-feed-card {
    border: 2px solid #111827;
    border-radius: 18px;
    padding: 18px;
    background: #dbeafe;
}

.features-post-chip {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border: 2px solid #111827;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-size: 0.72rem;
    font-weight: 900;
}

.features-feed-card h2 {
    margin: 14px 0 8px;
    color: #111827;
    font-size: 1.5rem;
    line-height: 1.08;
    font-weight: 900;
}

.features-feed-card p {
    margin: 0;
    color: #253244;
    font-size: 0.84rem;
    line-height: 1.55;
    font-weight: 650;
}

.features-post-meta {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.features-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111827;
    font-size: 0.76rem;
    font-weight: 900;
}

.features-stack-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0;
}

.features-stack-card {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 2px solid #111827;
    border-radius: 18px;
    padding: 14px;
    color: #111827;
}

.features-stack-card strong,
.features-stack-card span {
    display: block;
}

.features-stack-card strong {
    font-size: 1.08rem;
    font-weight: 900;
}

.features-stack-card span {
    margin-top: 3px;
    font-size: 0.75rem;
    font-weight: 800;
}

.features-stack-yellow {
    background: #fde68a;
}

.features-stack-blue {
    background: #a7f3d0;
}

.features-product-card {
    border: 2px solid #111827;
    background: #111827;
    border-radius: 18px;
}

.features-product-icon {
    border: 2px solid #111827;
    background: #fb7185;
}

.features-band {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 3px solid #111827;
    border-bottom: 3px solid #111827;
    background: #111827;
}

.features-band span {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    color: #111827;
    background: #facc15;
    border-right: 3px solid #111827;
    font-size: 0.9rem;
    font-weight: 900;
    text-align: center;
}

.features-band span:nth-child(2) {
    background: #67e8f9;
}

.features-band span:nth-child(3) {
    background: #f9a8d4;
}

.features-band span:nth-child(4) {
    background: #a7f3d0;
    border-right: 0;
}

.features-section {
    padding: 64px 0;
}

.features-section-head {
    align-items: flex-start;
}

.features-section-head h2,
.features-trust-copy h2,
.features-final-cta h2 {
    color: #111827;
    font-size: clamp(2rem, 4.2vw, 4.2rem);
    line-height: 0.98;
    text-wrap: balance;
}

.features-grid {
    gap: 20px;
}

.feature-card {
    position: relative;
    min-height: 270px;
    border: 3px solid #111827;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 7px 7px 0 #111827;
    overflow: hidden;
}

.feature-card:nth-child(4n+1) {
    background: #ffffff;
}

.feature-card:nth-child(4n+2) {
    background: #ecfccb;
}

.feature-card:nth-child(4n+3) {
    background: #e0f2fe;
}

.feature-card:nth-child(4n) {
    background: #ffe4e6;
}

.feature-card::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
    border-right: 4px solid #111827;
    border-bottom: 4px solid #111827;
}

.feature-card i {
    border: 2px solid #111827;
    border-radius: 14px;
    background: #111827 !important;
    color: #ffffff !important;
}

.feature-card-tag {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 2px solid #111827;
    border-radius: 999px;
    background: #facc15;
    color: #111827;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.feature-card h3 {
    margin-top: 28px;
    max-width: 250px;
    color: #111827;
    font-size: 1.28rem;
    line-height: 1.08;
}

.feature-card p,
.features-audience-card p,
.features-trust-copy p {
    color: #263241;
    font-weight: 650;
}

.features-audience-section {
    background: #111827;
    border-top: 3px solid #111827;
    border-bottom: 3px solid #111827;
}

.features-audience-section .features-section-head h2 {
    color: #ffffff;
}

.features-audience-card {
    min-height: 245px;
    border: 3px solid #111827;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 7px 7px 0 #000000;
}

.features-audience-card:nth-child(1) {
    background: #fef3c7;
}

.features-audience-card:nth-child(2) {
    background: #bfdbfe;
}

.features-audience-card:nth-child(3) {
    background: #bbf7d0;
}

.features-audience-card:nth-child(4) {
    background: #fecdd3;
}

.features-audience-card i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 2px solid #111827;
    border-radius: 14px;
    background: #111827;
    color: #ffffff;
}

.features-audience-card span {
    font-size: 1.35rem;
    line-height: 1;
}

.features-trust-section {
    border: 3px solid #111827;
    border-radius: 28px;
    background: #ffffff;
    padding: 34px;
    box-shadow: 10px 10px 0 #111827;
}

.features-trust-list div {
    border: 2px solid #111827;
    border-radius: 16px;
    background: #f8fafc;
    color: #111827;
    font-weight: 850;
}

.features-trust-list div:nth-child(2) {
    background: #ecfccb;
}

.features-trust-list div:nth-child(3) {
    background: #e0f2fe;
}

.features-trust-list div:nth-child(4) {
    background: #ffe4e6;
}

.features-trust-list i {
    border: 2px solid #111827;
    background: #111827;
    color: #ffffff;
}

.features-final-cta {
    border: 3px solid #111827;
    border-radius: 28px;
    background: #facc15;
    box-shadow: 10px 10px 0 #111827;
}

/* ── Static pages (Privacy, Terms, About, Contact) ── */

.static-page-wrap {
    max-width: 800px;
    margin: 48px auto;
    padding: 0 24px;
}

.static-page-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 48px 52px;
}

.static-page-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}

.static-page-meta {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0 0 18px;
}

.static-page-lead {
    font-size: 1rem;
    color: #475569;
    line-height: 1.7;
    margin: 0 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.static-page-card h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 28px 0 8px;
}

.static-page-card p,
.static-page-card li {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.75;
}

.static-page-card ul {
    padding-left: 20px;
    margin: 6px 0 12px;
}

.static-page-card a {
    color: #4f46e5;
    text-decoration: none;
}

.static-page-card a:hover {
    text-decoration: underline;
}

.static-page-cta {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}

.static-page-btn {
    display: inline-block;
    background: #4f46e5;
    color: #fff !important;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s;
}

.static-page-btn:hover {
    background: #4338ca;
}

/* Contact page grid */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 8px;
}

.contact-info-block h2,
.contact-note-block h2 {
    margin-top: 0;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.contact-detail i {
    color: #4f46e5;
    font-size: 1rem;
    margin-top: 3px;
    width: 18px;
    flex-shrink: 0;
}

.contact-detail div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-detail strong {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
}

.contact-detail span {
    font-size: 0.82rem;
    color: #64748b;
}

/* ── Footer responsive ── */

@media (max-width: 900px) {
    .site-footer-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .features-hero,
    .features-section,
    .features-final-cta {
        width: min(100% - 28px, 620px);
    }

    .features-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 0 34px;
    }

    .features-hero::before,
    .features-hero::after {
        display: none;
    }

    .features-hero h1 {
        font-size: clamp(2.35rem, 13vw, 4.05rem);
        line-height: 0.95;
    }

    .features-hero p {
        font-size: 0.94rem;
    }

    .features-vibe-row span {
        min-height: 31px;
        font-size: 0.7rem;
        box-shadow: 2px 2px 0 #111827;
    }

    .features-hero-actions,
    .features-final-cta {
        align-items: stretch;
    }

    .features-primary-btn,
    .features-secondary-btn {
        width: 100%;
        box-shadow: 4px 4px 0 #111827;
    }

    .features-hero-panel {
        transform: none;
        border-radius: 20px;
        box-shadow: 7px 7px 0 #111827;
        padding: 14px;
    }

    .features-feed-card h2 {
        font-size: 1.25rem;
    }

    .features-stack-row {
        grid-template-columns: 1fr;
    }

    .features-panel-grid,
    .features-stat-row,
    .features-grid,
    .features-audience-grid,
    .features-trust-section {
        grid-template-columns: 1fr;
    }

    .features-band {
        grid-template-columns: 1fr 1fr;
    }

    .features-band span {
        min-height: 54px;
        font-size: 0.76rem;
        border-bottom: 3px solid #111827;
    }

    .features-band span:nth-child(2) {
        border-right: 0;
    }

    .features-band span:nth-child(3),
    .features-band span:nth-child(4) {
        border-bottom: 0;
    }

    .features-section {
        padding: 34px 0;
    }

    .features-section-head {
        display: block;
        margin-bottom: 16px;
    }

    .features-section-head .features-kicker {
        margin-bottom: 12px;
    }

    .feature-card {
        min-height: auto;
        padding: 18px;
        border-radius: 18px;
        box-shadow: 5px 5px 0 #111827;
    }

    .feature-card h3 {
        max-width: none;
        padding-right: 76px;
        font-size: 1.12rem;
    }

    .feature-card-tag {
        top: 16px;
        right: 16px;
        font-size: 0.62rem;
        max-width: 76px;
        justify-content: center;
        text-align: center;
    }

    .features-audience-section {
        width: 100%;
        padding: 34px 14px;
    }

    .features-audience-card {
        min-height: auto;
        box-shadow: 5px 5px 0 #000000;
    }

    .features-trust-section {
        gap: 18px;
        padding: 22px;
        border-radius: 20px;
        box-shadow: 6px 6px 0 #111827;
    }

    .features-final-cta {
        flex-direction: column;
        margin-top: 18px;
        margin-bottom: 28px;
        padding: 22px;
        border-radius: 20px;
        box-shadow: 6px 6px 0 #111827;
    }

    .site-footer-inner {
        flex-direction: column;
        gap: 36px;
        padding: 40px 24px 28px;
    }

    .site-footer-brand {
        flex: unset;
    }

    .site-footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        width: 100%;
    }

    .site-footer-bottom {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        padding: 16px 24px;
    }

    .static-page-card {
        padding: 32px 24px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ══════════════════════════════════════════════
   INLINE POST EDIT MODAL
══════════════════════════════════════════════ */

.pedit-backdrop,
.pdel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 300000;
    backdrop-filter: blur(2px);
}

.pedit-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300001;
    width: min(560px, calc(100vw - 32px));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.pedit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.pedit-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.pedit-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #475569;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.pedit-close:hover { background: #e2e8f0; }

.pedit-form {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 80vh;
    overflow-y: auto;
}

.pedit-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pedit-type-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.pedit-type-chip.is-active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

.pedit-input,
.pedit-textarea,
.pedit-select {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.pedit-input:focus,
.pedit-textarea:focus,
.pedit-select:focus {
    outline: none;
    border-color: #6366f1;
    background: #fff;
}

.pedit-textarea {
    resize: vertical;
    min-height: 110px;
}

.pedit-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pedit-select { flex: 1; }

.pedit-file-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1.5px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
}

.pedit-file-label:hover { border-color: #6366f1; color: #6366f1; }

.pedit-file-input { display: none; }

.pedit-submit {
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.pedit-submit:hover { background: #4338ca; }

/* ── Delete confirm modal ── */

.pdel-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300001;
    width: min(380px, calc(100vw - 32px));
    background: #fff;
    border-radius: 18px;
    padding: 28px 28px 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    text-align: center;
}

.pdel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}

.pdel-body {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 24px;
}

.pdel-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pdel-cancel {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.pdel-cancel:hover { background: #e2e8f0; }

.pdel-confirm {
    flex: 1;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: #dc2626;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.pdel-confirm:hover { background: #b91c1c; }

/* ══════════════════════════════════════════════
   POST IMAGE SLIDER
══════════════════════════════════════════════ */

.post-slider {
    position: relative;
    margin-top: 12px;
    border-radius: 0;
    overflow: hidden;
    background: #0f172a;
    user-select: none;
}

.post-slider-track {
    display: flex;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.post-slider-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 480px;
    background: #1e293b;
    cursor: zoom-in;
}

.post-slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Arrow buttons ── */

.post-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: background 0.15s, opacity 0.15s;
    opacity: 0;
}

.post-slider:hover .post-slider-arrow { opacity: 1; }

.post-slider-prev { left: 10px; }
.post-slider-next { right: 10px; }

.post-slider-arrow:hover { background: #ffffff; }

/* ── HUD: dots + count (top-right) ── */

.post-slider-hud {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 7px;
}

.post-slider-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}

.post-slider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.post-slider-dot.is-active {
    background: #ffffff;
    transform: scale(1.35);
}

.post-slider-count {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(15, 23, 42, 0.56);
    padding: 2px 9px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Post video player ── */

.post-video-wrap {
    margin-top: 12px;
    border-radius: 0;
    overflow: hidden;
    background: #0f172a;
    position: relative;
}
.post-video-plays {
    position: absolute;
    bottom: 10px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.post-video {
    display: block;
    width: 100%;
    max-height: 480px;
    background: #0f172a;
}

/* ══════════════════════════════════════════════
   COMPOSER MEDIA BUTTONS & PREVIEW
══════════════════════════════════════════════ */

.composer-media-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    font-family: inherit;
}

.composer-media-btn:hover {
    border-color: #6366f1;
    color: #4f46e5;
    background: #eef2ff;
}

.composer-media-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.cmp-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
    flex-shrink: 0;
}

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

.cmp-vid-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 32px 8px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 12px;
    color: #475569;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmp-thumb-rm {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cmp-vid-chip .cmp-thumb-rm {
    background: #cbd5e1;
    color: #334155;
}

/* opp-post-modal media row */
.opp-post-modal-media-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 540px) {
    .post-slider-arrow { opacity: 1; }   /* always show arrows on touch */
}

/* ── Notification link items ── */

a.notification-page-item.notif-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.notification-page-item.notif-link:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.notif-chevron {
    color: #cbd5e1;
    font-size: 12px;
    flex-shrink: 0;
    margin-left: auto;
}

a.notification-page-item.notif-link:hover .notif-chevron {
    color: #0f172a;
}

/* ── Directory search bar ── */

.dir-search-bar {
    margin-bottom: 20px;
}

.dir-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dir-search-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.dir-search-input {
    width: 100%;
    padding: 10px 36px 10px 38px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.dir-search-input:focus {
    border-color: #6366f1;
}

.dir-search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.dir-search-clear:hover { color: #475569; }

.dir-result-count {
    margin: 8px 0 0;
    font-size: 13px;
    color: #64748b;
}

.dir-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.dir-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dir-filter-field span {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.dir-filter-field select {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.dir-filter-field select:focus {
    border-color: #6366f1;
}

/* ── Directory pagination ── */

.dir-pag {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}

.dir-pag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: center;
}

.dir-pag-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

a.dir-pag-item:hover {
    background: #ede9fe;
    border-color: #a5b4fc;
    color: #4f46e5;
}

.dir-pag-active {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
    pointer-events: none;
}

.dir-pag-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Student directory card ── */

.dir-student-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.dir-student-main-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.dir-student-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 20px rgba(99,102,241,0.09);
    transform: translateY(-2px);
}

.dir-student-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dir-student-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dir-student-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    width: 100%;
}

.dir-student-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.dir-student-handle {
    font-size: 12px;
    color: #94a3b8;
}

.dir-student-stream {
    font-size: 12px;
    color: #6366f1;
    font-weight: 500;
    margin-top: 2px;
}

.dir-student-college {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.dir-student-college i {
    font-size: 10px;
    color: #94a3b8;
}

.dir-student-year {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    border-radius: 20px;
    padding: 2px 8px;
    margin-top: 4px;
}

.dir-student-company {
    font-size: 12px;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
    max-width: 100%;
    min-width: 0;
}

.dir-student-company i {
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
}

.dir-student-company-text {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dir-student-company-link {
    text-decoration: none;
    color: #2563eb;
    font-weight: 600;
}

.dir-student-company-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.dir-student-company-link i {
    color: #64748b;
}

/* ── Students directory (feed-style) ── */

.students-dir-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.students-dir-sidebar {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 80px;
    align-self: start;
    min-width: 0;
}

.students-dir-main {
    display: grid;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

/* critical: prevent grid display from overriding [hidden] */
.students-grid[hidden] {
    display: none !important;
}

.students-people-list[hidden] {
    display: none !important;
}

.students-dir-filter-card .side-card-title {
    margin-bottom: 14px;
}

.students-dir-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.students-dir-search-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

.students-dir-search-input {
    width: 100%;
    padding: 9px 32px 9px 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.students-dir-search-input:focus {
    border-color: #6366f1;
    background: #fff;
}

.students-dir-search-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.students-dir-search-clear:hover { color: #475569; }

.students-dir-result-count {
    font-size: 12px;
    color: #64748b;
    margin: 6px 0 0;
}

.students-dir-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.students-dir-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.students-dir-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.students-dir-filter-field select {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.15s;
    cursor: pointer;
}

.students-dir-filter-field select:focus {
    border-color: #6366f1;
    background: #fff;
}

.students-dir-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12px;
    color: #0f172a;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.students-dir-clear-all:hover { text-decoration: underline; }

/* ── People list ── */

.students-people-list {
    padding: 0;
    overflow: hidden;
}

.std-person-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
}

.std-person-row:last-child {
    border-bottom: none;
}

.std-person-row:hover {
    background: #f8fafc;
}

.std-person-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #0f172a;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.std-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.std-person-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.std-person-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.std-person-handle {
    font-size: 12px;
    color: #94a3b8;
}

.std-person-college {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
}

.std-person-college i {
    font-size: 10px;
    color: #94a3b8;
}

.std-person-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.std-tag {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

.std-tag-stream {
    background: #ede9fe;
    color: #6d28d9;
}

.std-tag-company {
    background: #f0fdf4;
    color: #15803d;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.std-person-arrow {
    font-size: 11px;
    color: #cbd5e1;
    flex-shrink: 0;
    margin-left: 4px;
}

/* ── Responsive students directory ── */

@media (max-width: 900px) {
    .students-dir-shell {
        grid-template-columns: 1fr;
    }
    .students-dir-sidebar {
        position: static;
    }
    .students-dir-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .students-dir-filters {
        grid-template-columns: 1fr;
    }
    .std-person-row {
        gap: 10px;
        padding: 12px 14px;
    }
    .std-person-tags {
        display: none;
    }
}

/* ── Companies directory (feed-style) ── */

.companies-dir-shell {
    grid-template-columns: 320px minmax(0, 1fr);
}

.companies-dir-sidebar {
    position: sticky;
    top: 80px;
}

.companies-people-list {
    padding: 0;
    overflow: hidden;
}

.co-person-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
}

.co-person-row:last-child { border-bottom: none; }
.co-person-row:hover { background: #f8fafc; }

.co-person-link {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.co-person-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    overflow: hidden;
}

.co-person-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.co-person-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.co-person-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-person-link:hover .co-person-name { color: #1e293b; }

.co-person-industry {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.co-person-meta {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.co-person-meta i { font-size: 10px; }
.co-meta-dot { color: #cbd5e1; }

.co-person-actions {
    flex-shrink: 0;
}

.co-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    padding: 6px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.12s;
}

.co-view-btn:hover {
    color: #0f172a;
    border-color: #0f172a;
    background: #f8fafc;
}

.co-college-icon {
    border-radius: 14px;
    background: #f1f5f9;
    color: #334155;
    font-size: 17px;
}

.co-own-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 4px 10px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .companies-dir-shell {
        grid-template-columns: 1fr;
    }
    .companies-dir-sidebar {
        position: static;
    }
}

@media (max-width: 480px) {
    .co-person-row {
        gap: 10px;
        padding: 12px 14px;
    }
    .co-person-industry { display: none; }
}

/* ── Jobs directory — mini-card entries ── */

.job-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.job-entry-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.job-entry-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 28px rgba(15,23,42,0.08);
    transform: translateY(-1px);
}

.job-entry-applied {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.job-entry-applied:hover {
    border-color: #86efac;
}

/* Head row */
.job-entry-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.job-entry-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #f1f5f9;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.job-entry-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-entry-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.job-entry-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.job-entry-card:hover .job-entry-title { color: #1e293b; }

.job-entry-company {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.job-entry-apps {
    font-size: 12px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Meta row */
.job-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    padding: 12px 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.job-entry-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}

.job-entry-meta-item i { font-size: 11px; color: #94a3b8; }

.job-entry-deadline {
    color: #b45309 !important;
    font-weight: 600;
}

.job-entry-deadline i { color: #b45309 !important; }

.job-entry-time { color: #94a3b8 !important; }

/* Footer row */
.job-entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.job-entry-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.job-entry-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #0f172a;
    padding: 8px 18px;
    border-radius: 9px;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.job-entry-card:hover .job-entry-cta { background: #1e293b; }

/* Sidebar extras */
.jobs-sidebar-applications-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    border: 1px solid #dde7fb;
    background: #fff;
    box-shadow: 0 14px 34px rgba(79,70,229,0.06);
    transition: background 0.12s;
}

.jobs-sidebar-applications-link:hover { background: #f8fafc; }

.jobs-sidebar-applications-link i:first-child {
    font-size: 18px;
    color: #334155;
    flex-shrink: 0;
}

.jobs-sidebar-applications-link div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jobs-sidebar-applications-link strong {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.jobs-sidebar-applications-link span {
    font-size: 11px;
    color: #94a3b8;
}

.jobs-sidebar-arrow {
    font-size: 11px;
    color: #cbd5e1;
    flex-shrink: 0;
}

.jobs-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    width: 100%;
}

.jobs-sidebar-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #0f172a;
    cursor: pointer;
    margin: 0;
}

.jobs-sidebar-toggle span {
    line-height: 1;
    white-space: nowrap;
}

/* ── My Applications page ── */

.myapp-title-link {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.3;
}

.myapp-title-link:hover { color: #1e293b; }

.myapp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.myapp-status-badge-pending     { background: #fef9c3; color: #854d0e; }
.myapp-status-badge-shortlisted { background: #d1fae5; color: #065f46; }
.myapp-status-badge-rejected    { background: #fee2e2; color: #991b1b; }

.myapp-status-shortlisted { border-color: #86efac; }
.myapp-status-rejected    { border-color: #fca5a5; opacity: 0.85; }

.myapp-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.myapp-cv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    padding: 7px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.12s;
}

.myapp-cv-btn:hover {
    color: #0f172a;
    border-color: #0f172a;
    background: #f8fafc;
}

/* ── Private profile toggle ── */

.settings-private-toggle {
    padding: 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.settings-toggle-wrap {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
}

.settings-toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    margin-top: 2px;
}

.settings-toggle-track input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-knob {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.2s;
    cursor: pointer;
}

.settings-toggle-knob::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}

.settings-toggle-track input:checked ~ .settings-toggle-knob {
    background: #0f172a;
}

.settings-toggle-track input:checked ~ .settings-toggle-knob::after {
    transform: translateX(20px);
}

.settings-toggle-copy strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 3px;
}

.settings-toggle-copy span {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

/* ── Locked private profile card ── */

.profile-locked-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 32px;
    gap: 10px;
}

.profile-locked-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #0f172a;
    margin-bottom: 6px;
}

.profile-locked-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.profile-locked-card p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

.profile-locked-pending {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.profile-private-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 8px;
    vertical-align: middle;
    margin-left: 6px;
}

/* ── Settings & Edit Profile pages ── */

.settings-page {
    width: 100%;
}

.settings-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}

/* Sidebar */
.settings-sidebar {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.settings-sidebar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.settings-sidebar-head strong {
    font-size: 14px;
    color: #1e293b;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
    border-left: 3px solid transparent;
}

.settings-nav-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}

.settings-nav-item:hover {
    background: #f8fafc;
    color: #0f172a;
}

.settings-nav-item.active {
    background: #f1f5f9;
    color: #0f172a;
    border-left-color: #0f172a;
    font-weight: 600;
}

/* Main content card */
.settings-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
}

.settings-card-head {
    padding: 24px 28px 18px;
    border-bottom: 1px solid #f1f5f9;
}

.settings-card-head h1 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.settings-card-head p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* Form sections */
.settings-form {
    padding: 20px 28px 24px;
}

.settings-section {
    margin-bottom: 28px;
}

.settings-section:last-of-type {
    margin-bottom: 0;
}

.settings-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin: 0 0 14px;
}

.settings-field {
    margin-bottom: 16px;
}

.settings-field:last-child { margin-bottom: 0; }

.settings-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.settings-field-hint {
    font-weight: 400;
    color: #94a3b8;
    font-size: 12px;
    margin-left: 6px;
}

.settings-field input[type="text"],
.settings-field input[type="email"],
.settings-field input[type="url"],
.settings-field input[type="password"],
.settings-field textarea,
.settings-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fff;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus {
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15,23,42,0.07);
}

.settings-field textarea { resize: vertical; }

.settings-field-error {
    display: block;
    font-size: 12px;
    color: #ef4444;
    margin-top: 5px;
}

.settings-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Account info row (read-only) */
.settings-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}

.settings-info-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    min-width: 90px;
}

.settings-info-value {
    font-size: 14px;
    color: #1e293b;
    font-weight: 600;
}

.settings-info-note {
    font-size: 12px;
    color: #94a3b8;
    margin-left: auto;
}

/* Footer buttons */
.settings-form-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.settings-save-btn {
    padding: 10px 24px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.settings-save-btn:hover { background: #1e293b; }

.settings-cancel-link {
    font-size: 14px;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
}

.settings-cancel-link:hover { color: #1e293b; }

/* Messages */
.settings-messages {
    display: grid;
    gap: 8px;
}

.settings-msg {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.settings-msg-success {
    background: #dcf8c6;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.settings-msg-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Profile page — Edit + Settings buttons */
.profile-edit-btn {
    background: #0f172a;
    color: #fff;
    border: none;
    font-weight: 600;
}

.profile-edit-btn:hover {
    background: #1e293b;
    color: #fff;
}

.profile-settings-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    color: #64748b;
    text-decoration: none;
    font-size: 15px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.profile-settings-icon:hover {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;
}

/* Responsive */
@media (max-width: 720px) {
    .settings-shell {
        grid-template-columns: 1fr;
    }
    .settings-sidebar {
        position: static;
    }
    .settings-nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 6px;
        gap: 4px;
    }
    .settings-nav-item {
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 13px;
    }
    .settings-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: #0f172a;
    }
    .settings-field-row {
        grid-template-columns: 1fr;
    }
}

/* ── Admin post highlight ── */

.admin-post {
    background: #dcf8c6;
    border-color: #b2e5a0;
}

.admin-post:hover {
    background: #d0f4b8;
    border-color: #93d882;
}

/* ── Product Philosophy page ── */

.phil-page {
    max-width: 860px;
}

.phil-intro {
    background: #f8f9ff;
    border: 1px solid #e0e3f0;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 32px;
    color: #4b5563;
    line-height: 1.7;
}

.phil-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
}

.phil-section-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px 20px;
    border-bottom: 1px solid #f3f4f6;
    background: #fafafa;
}

.phil-number {
    font-size: 2rem;
    font-weight: 800;
    color: #e5e7eb;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.phil-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.phil-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.phil-body {
    padding: 20px 28px 24px;
}

.phil-body p {
    color: #374151;
    line-height: 1.7;
    margin: 0 0 16px;
    font-size: 0.9375rem;
}

.phil-body p:last-child {
    margin-bottom: 0;
}

.phil-tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0 20px;
}

.phil-tier {
    background: #f8f9ff;
    border: 1px solid #dde1f5;
    border-radius: 8px;
    padding: 16px 18px;
}

.phil-tier-label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4f46e5;
    margin-bottom: 6px;
}

.phil-tier p {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0 !important;
}

.phil-rule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.phil-rule {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.6;
}

.phil-rule code {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.8125rem;
    color: #374151;
}

.phil-rule-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 1px;
}

.phil-rule-icon.phil-do {
    background: #d1fae5;
    color: #065f46;
}

.phil-rule-icon.phil-dont {
    background: #fee2e2;
    color: #991b1b;
}

.phil-footer {
    margin-top: 36px;
    padding: 16px 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #6b7280;
}

/* ── Ad Manager ── */

.adm-page {
    width: 100%;
}

.adm-page-shell {
    display: grid;
    gap: 24px;
}

.adm-page-shell-narrow {
    max-width: 680px;
}

.adm-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.adm-page-head h1 {
    margin: 6px 0 0;
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
}

.adm-page-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.adm-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

.adm-page-btn:hover { opacity: 0.9; }

.adm-page-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #4f46e5;
    border: 1.5px solid #4f46e5;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
}

.adm-page-btn-outline:hover { background: #f5f3ff; }

.adm-page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 0.875rem;
    text-decoration: none;
}

.adm-page-back:hover { color: #111827; }

/* Credit bar */
.adcredit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 14px;
    padding: 24px 28px;
    color: #fff;
    flex-wrap: wrap;
}

.adcredit-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.adcredit-value {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}

.adcredit-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.adcredit-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.4);
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
}

.adcredit-buy-btn:hover { background: rgba(255,255,255,0.3); }

.adcredit-note {
    font-size: 0.75rem;
    opacity: 0.7;
    max-width: 260px;
    text-align: right;
}

/* Campaign grid */
.adcamp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.adcamp-card {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adcamp-card:hover {
    box-shadow: 0 8px 24px rgba(79,70,229,0.12);
    border-color: #c4b5fd;
}

.adcamp-card-top {
    display: flex;
    align-items: center;
    gap: 7px;
}

.adcamp-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-active .adcamp-status-dot { background: #22c55e; }
.status-paused .adcamp-status-dot { background: #f59e0b; }
.status-draft  .adcamp-status-dot { background: #94a3b8; }
.status-ended  .adcamp-status-dot { background: #ef4444; }

.adcamp-status-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.adcamp-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.adcamp-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: #6b7280;
}

.adcamp-meta span { display: flex; align-items: center; gap: 5px; }

.adcamp-empty {
    text-align: center;
    padding: 48px 24px;
    color: #9ca3af;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.adcamp-empty i { font-size: 2.5rem; opacity: 0.4; }

/* Campaign status bar */
.adcamp-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    background: #f9fafb;
    flex-wrap: wrap;
}

.adcamp-status-bar.status-active { background: #f0fdf4; border-color: #bbf7d0; }
.adcamp-status-bar.status-paused { background: #fffbeb; border-color: #fde68a; }
.adcamp-status-bar.status-ended  { background: #fef2f2; border-color: #fecaca; }

.adcamp-status-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #374151;
}

.adcamp-status-form {
    display: flex;
    gap: 8px;
}

.adcamp-status-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.adcamp-btn-activate { background: #22c55e; color: #fff; }
.adcamp-btn-pause    { background: #f59e0b; color: #fff; }
.adcamp-btn-end      { background: #ef4444; color: #fff; }

/* Analytics grid */
.adanalytics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.adanalytics-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adanalytics-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
}

.adanalytics-value {
    font-size: 1.75rem;
    font-weight: 900;
    color: #111827;
    line-height: 1;
}

/* Chart */
.adchart-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 24px;
}

.adchart-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #374151;
    margin: 0 0 16px;
}

/* Ads list */
.adlist-section { display: grid; gap: 14px; }
.adlist-title { font-size: 1.1rem; font-weight: 700; color: #111827; margin: 0; }

.adlist-grid { display: grid; gap: 14px; }

.adlist-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
}

.adlist-card-pending { border-color: #fde68a; background: #fffbeb; }

.adlist-media {
    flex-shrink: 0;
    width: 100px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
}

.adlist-media img,
.adlist-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.adlist-info { flex: 1; min-width: 0; }
.adlist-info-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.adlist-headline { font-size: 0.9375rem; font-weight: 700; color: #111827; }

.adlist-approval {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}

.adlist-approved { background: #d1fae5; color: #065f46; }
.adlist-pending  { background: #fef9c3; color: #92400e; }

.adlist-body { font-size: 0.8375rem; color: #6b7280; margin: 4px 0 8px; }

.adlist-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8125rem;
    color: #9ca3af;
    flex-wrap: wrap;
}

.adlist-link { color: #4f46e5; text-decoration: none; font-weight: 600; }

.adlist-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

.adlist-action-btn {
    padding: 7px 14px;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    color: #374151;
    text-decoration: none;
    text-align: center;
    transition: background 0.12s;
}

.adlist-action-btn:hover { background: #f9fafb; }
.adlist-delete-btn { color: #ef4444; border-color: #fecaca; }
.adlist-delete-btn:hover { background: #fef2f2; }

/* Transaction list */
.adtx-section { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 20px; }
.adtx-title { font-size: 1rem; font-weight: 700; color: #111827; margin: 0 0 14px; }
.adtx-list { display: grid; gap: 1px; }

.adtx-row {
    display: grid;
    grid-template-columns: 160px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}

.adtx-row:last-child { border-bottom: none; }

.adtx-type {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}

.adtx-type-admin_grant { background: #d1fae5; color: #065f46; }
.adtx-type-impression  { background: #fef3c7; color: #92400e; }
.adtx-type-purchase    { background: #dbeafe; color: #1e40af; }
.adtx-type-refund      { background: #ede9fe; color: #5b21b6; }

.adtx-note { color: #6b7280; }
.adtx-date { color: #9ca3af; white-space: nowrap; }
.adtx-amount { font-weight: 700; white-space: nowrap; }
.adtx-credit { color: #16a34a; }
.adtx-debit  { color: #dc2626; }

/* Ad form */
.adform-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px;
}

.adform {
    display: grid;
    gap: 18px;
}

.adform-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.adform-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adform-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.adform-field input,
.adform-field select,
.adform-field textarea {
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 9px;
    font-size: 0.9375rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s;
}

.adform-field input:focus,
.adform-field select:focus,
.adform-field textarea:focus {
    outline: none;
    border-color: #4f46e5;
}

.adform-hint { font-size: 0.75rem; color: #9ca3af; font-weight: 400; }
.adform-error { font-size: 0.8125rem; color: #dc2626; }
.adform-error-block { padding: 10px 14px; background: #fef2f2; border-radius: 8px; border: 1px solid #fecaca; }

.adform-footer { padding-top: 8px; }

.adform-approval-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.875rem;
    color: #1e40af;
    margin-bottom: 20px;
}

.adform-current-media {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: #6b7280;
}

.adform-current-media img { width: 80px; height: 56px; object-fit: cover; border-radius: 6px; }

/* Feed ad card */
.feed-ad-card {
    background: #fff;
    border: 1.5px solid #e0e3f0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.feed-ad-label {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.92);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    backdrop-filter: blur(4px);
}

.feed-ad-biz {
    color: #374151;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}

.feed-ad-dot {
    color: #d1d5db;
    font-weight: 400;
}

.feed-ad-media img,
.feed-ad-media video {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    display: block;
}

.feed-ad-body {
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feed-ad-headline {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.feed-ad-text {
    font-size: 0.9rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.55;
}

.feed-ad-cta {
    align-self: flex-start;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s;
}

.feed-ad-cta:hover { opacity: 0.9; }

/* ── Feed Event Card ─────────────────────────────────────────────── */
.feed-event-card {
    display: block;
    background: #fff;
    border: 1.5px solid #e0e3f0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.feed-event-card:hover { border-color: #f97316; box-shadow: 0 4px 20px rgba(249,115,22,.1); }
body.dk-page .feed-event-card { background: #111; border-color: #232323; }
body.dk-page .feed-event-card:hover { border-color: #f97316; box-shadow: 0 4px 20px rgba(249,115,22,.12); }
.feed-event-colorbar { height: 4px; width: 100%; }
.feed-event-inner { padding: 16px 18px 14px; }
.feed-event-label {
    display: flex; align-items: center; gap: 6px;
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: #94a3b8; margin-bottom: 8px;
}
body.dk-page .feed-event-label { color: #555; }
.feed-event-dot { color: #cbd5e1; }
.feed-event-title {
    display: block; font-size: 1rem; font-weight: 800;
    color: #09090b; line-height: 1.3; margin-bottom: 8px;
}
body.dk-page .feed-event-title { color: #f0f0f0; }
.feed-event-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: .76rem; color: #64748b; margin-bottom: 8px;
}
body.dk-page .feed-event-meta { color: #666; }
.feed-event-meta i { margin-right: 3px; }
.feed-event-desc {
    font-size: .82rem; color: #64748b; line-height: 1.55;
    margin: 0 0 12px; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.dk-page .feed-event-desc { color: #666; }
.feed-event-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}
body.dk-page .feed-event-footer { border-top-color: #222; }
.feed-event-rsvp-count { font-size: .72rem; color: #94a3b8; }
.feed-event-actions { display: flex; align-items: center; gap: 8px; }
.feed-ev-rsvp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; background: #f97316; color: #fff;
    border: none; border-radius: 20px; font-size: .76rem; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: opacity .13s;
}
.feed-ev-rsvp-btn:hover { opacity: .88; }
.feed-ev-rsvped { background: #f1f5f9; color: #64748b; }
body.dk-page .feed-ev-rsvped { background: #1e1e1e; color: #888; }
.feed-ev-view-btn {
    font-size: .74rem; font-weight: 600; color: #64748b;
    text-decoration: none; padding: 6px 10px; border-radius: 8px;
    transition: background .13s;
}
.feed-ev-view-btn:hover { background: #f1f5f9; }
body.dk-page .feed-ev-view-btn { color: #666; }
body.dk-page .feed-ev-view-btn:hover { background: #1a1a1a; }

/* Admin ads panel */
.adm-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 20px;
}

.adm-tab {
    padding: 10px 18px;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.12s;
}

.adm-tab.active { color: #4f46e5; border-bottom-color: #4f46e5; }
.adm-tab:hover  { color: #374151; }

.adm-tab-count {
    background: #4f46e5;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 20px;
    min-width: 18px;
    text-align: center;
}

.adm-tab-panel { display: none; }
.adm-tab-panel.active { display: block; }

.adm-ad-preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.adm-ad-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.adm-ad-body { font-size: 0.8rem; color: #6b7280; margin: 2px 0 0; }

.adm-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: #ede9fe;
    color: #5b21b6;
}

.adm-status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}

.adm-status-active  { background: #d1fae5; color: #065f46; }
.adm-status-paused  { background: #fef9c3; color: #92400e; }
.adm-status-draft   { background: #f3f4f6; color: #374151; }
.adm-status-ended   { background: #fee2e2; color: #991b1b; }

.adm-credit-value { color: #4f46e5; font-size: 1rem; }

.adm-grant-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px;
    max-width: 500px;
}

.adm-grant-card h2 { font-size: 1.1rem; font-weight: 700; color: #111827; margin: 0 0 6px; }
.adm-grant-card p  { font-size: 0.875rem; color: #6b7280; margin: 0 0 20px; }

.adm-grant-form { display: grid; gap: 16px; }

.adm-grant-field { display: flex; flex-direction: column; gap: 6px; }
.adm-grant-field label { font-size: 0.875rem; font-weight: 600; color: #374151; }

.adm-grant-select,
.adm-grant-input {
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 9px;
    font-size: 0.9375rem;
    color: #111827;
    background: #fff;
}

.adm-grant-select:focus,
.adm-grant-input:focus { outline: none; border-color: #4f46e5; }

.adm-grant-btn {
    padding: 11px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    transition: opacity 0.15s;
}

.adm-grant-btn:hover { opacity: 0.9; }

.adm-action-approve { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.adm-action-danger  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

.adm-empty { padding: 24px; text-align: center; color: #9ca3af; font-size: 0.875rem; }

@media (max-width: 900px) {
    .adcamp-grid        { grid-template-columns: repeat(2, 1fr); }
    .adanalytics-grid   { grid-template-columns: repeat(2, 1fr); }
    .adtx-row           { grid-template-columns: 130px 1fr auto; }
    .adtx-date          { display: none; }
}

@media (max-width: 640px) {
    .adcamp-grid        { grid-template-columns: 1fr; }
    .adanalytics-grid   { grid-template-columns: 1fr 1fr; }
    .adform-row         { grid-template-columns: 1fr; }
    .adcredit-actions   { align-items: flex-start; }
    .adcredit-note      { text-align: left; }
}

/* ============================================================
   GLOBAL RESPONSIVE — all screen sizes
   ============================================================ */

/* ── Tablet landscape: hide left rail, keep center + right ── */
@media (max-width: 1080px) {
    .social-shell {
        grid-template-columns: minmax(0, 1fr) 270px;
    }
    .social-left {
        display: none;
    }
    .page-wrap {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* ── Tablet portrait: single column ── */
@media (max-width: 800px) {
    .social-shell {
        grid-template-columns: 1fr;
    }
    .social-left,
    .social-right {
        display: none;
    }
    .page-wrap {
        margin-top: 12px;
        margin-bottom: 12px;
        padding: 0;
    }
    .story-card {
        min-width: 140px;
    }
}

/* ── Public feed mobile: edge-to-edge, no rounded corners ── */
@media (max-width: 991px) {
    body.home-feed-body .page-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.home-feed-body .social-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body.home-feed-body .social-center {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 800px) {
    body.home-feed-body .page-wrap {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body.home-feed-body .social-shell {
        gap: 0 !important;
    }
    body.home-feed-body .social-column {
        gap: 0 !important;
    }
    body.home-feed-body .social-feed-list,
    body.home-feed-body .activity-list {
        gap: 0 !important;
        width: 100% !important;
    }
    body.home-feed-body .social-post-card,
    body.home-feed-body .fb-post-card,
    body.home-feed-body .fb-composer-card,
    body.home-feed-body .fb-section-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.home-feed-body .social-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    body.home-feed-body .fb-post-card::before,
    body.home-feed-body .fb-composer-card::before {
        border-radius: 0 !important;
    }
    body.home-feed-body .feed-image-wrap,
    body.home-feed-body .post-slider {
        border-radius: 0 !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
    }
    body.home-feed-body .feed-image,
    body.home-feed-body .post-slider-slide img {
        border-radius: 0 !important;
    }
    body.home-feed-body .reshared-original {
        border-radius: 8px;
    }
    body.home-feed-body .stories-strip {
        padding: 0 12px !important;
    }
}

/* ── Header nav on mobile ── */
@media (max-width: 800px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        padding: 12px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .logo-text { display: none; }
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .nav-links {
        gap: 6px;
    }
    .nav-links a,
    .nav-links button {
        font-size: 13px;
        padding: 7px 10px;
    }
}

/* ── Feed action buttons: icon-only on small phones ── */
@media (max-width: 480px) {
    .feed-action-btn span,
    .feed-actions button span {
        display: none;
    }
    .feed-action-btn,
    .feed-actions button {
        padding: 10px 8px;
        gap: 0;
    }
    .feed-action-btn i,
    .feed-actions button i {
        font-size: 17px;
    }
    .feed-stats {
        font-size: 12px;
        gap: 10px;
    }
    .social-card {
        padding: 14px 12px;
        border-radius: 12px;
    }
    .composer-card {
        padding: 12px;
    }
    .story-card {
        min-width: 120px;
        min-height: 160px;
    }
}

/* ── Post card: tighten on phones ── */
@media (max-width: 640px) {
    .social-post-top {
        gap: 8px;
    }
    .post-menu-dropdown {
        width: 210px;
    }
    .comment-form textarea {
        font-size: 14px;
    }
    .profile-fact-grid {
        grid-template-columns: 1fr;
    }
    .profile-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .panel-heading h2 {
        font-size: 20px;
    }
    .post-detail-header {
        gap: 10px;
    }
    .post-detail-header h1 {
        font-size: 30px;
    }
    .post-detail-menu-dropdown {
        right: 0;
        left: auto;
    }
}

/* ── Extra small phones (≤390px) ── */
@media (max-width: 390px) {
    .page-wrap {
        padding: 0;
    }
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        padding: 10px 12px;
    }
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .logo-img {
        height: 32px;
    }
    .feed-stats {
        font-size: 11px;
        gap: 8px;
    }
    .social-card {
        padding: 12px 10px;
        border-radius: 10px;
    }
    .comment-block {
        margin-top: 10px;
    }
    .post-menu-dropdown {
        width: 190px;
        padding: 8px;
    }
    .story-card {
        min-width: 106px;
        min-height: 140px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   COMPANY DASHBOARD — JOB ROWS
   ═══════════════════════════════════════════════════════════════ */

.cd-section-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    background: #0f172a;
    color: #fff;
    border-radius: 7px;
    text-decoration: none;
    transition: background 0.15s;
}

.cd-section-action-btn:hover { background: #1e293b; }

.cd-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.cd-job-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}

.cd-job-row:last-child { border-bottom: none; }

.cd-job-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.cd-job-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s;
}

.cd-job-title:hover { color: #6366f1; }

.cd-job-location {
    font-size: 12px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cd-job-row-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cd-job-apps-link {
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cd-job-apps-link:hover { opacity: 0.8; }

.cd-job-action {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    transition: all 0.15s;
}

.cd-job-action:hover {
    color: #6366f1;
    border-color: #c7d2fe;
    background: #f5f3ff;
}

/* ═══════════════════════════════════════════════════════════════
   JOBS MODULE
   ═══════════════════════════════════════════════════════════════ */

.jobs-page {
    padding: 0 0 60px;
}

.jobs-shell {
    max-width: var(--page-content-max);
    margin: 0 auto;
}

/* ── Intro ── */
.jobs-intro-card {
    padding: 28px 30px 24px;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    margin-bottom: 24px;
}

.jobs-intro-top,
.jobs-intro-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.jobs-intro-top {
    margin-bottom: 20px;
}

.jobs-intro-copy {
    max-width: 620px;
}

.jobs-hero-kicker {
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
}

.jobs-intro-copy h1 {
    margin: 10px 0 8px;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #0f172a;
}

.jobs-intro-copy p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
}

.jobs-intro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jobs-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.jobs-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbeafe;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.jobs-hero-stat strong {
    font-size: 15px;
    color: #0f172a;
}

.jobs-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, transform 0.15s;
}

.jobs-post-btn:hover {
    background: #1e293b;
    transform: translateY(-1px);
}

.jobs-toolbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid #d6dee8;
    background: #fff;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.jobs-toolbar-link:hover {
    border-color: #94a3b8;
}

/* ── Filter bar ── */
.jobs-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.jobs-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #475569;
    border: 1px solid #d6dee8;
    text-decoration: none;
    transition: all 0.15s;
}

.jobs-filter-tab:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

.jobs-filter-active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

/* ── Job cards grid ── */
.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.job-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.job-card:hover {
    border-color: #cbd5e1;
    background: #fafafa;
}

.job-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.job-card-company-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-size: 18px;
    flex-shrink: 0;
}

.job-card-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.job-card-company {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    line-height: 1.35;
}

.job-card-excerpt {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #64748b;
}

/* ── Job type badge ── */
.job-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.job-type-job {
    background: #dbeafe;
    color: #1d4ed8;
}

.job-type-internship {
    background: #d1fae5;
    color: #065f46;
}

.job-applied-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
    margin-left: auto;
}

/* ── Card details ── */
.job-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 14px;
}

.job-card-detail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b;
}

/* ── Skills chips ── */
.job-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.job-skill-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.job-skill-more {
    background: transparent;
    color: #94a3b8;
}

/* ── Card footer ── */
.job-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eef2f7;
    font-size: 12px;
    color: #94a3b8;
}

.job-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}

/* ── Empty state ── */
.jobs-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 24px;
    background: #fff;
    color: #94a3b8;
    text-align: center;
}

.jobs-empty-icon {
    font-size: 44px;
    margin-bottom: 14px;
    opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   JOB DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */

.jobs-detail-page {
    padding: 0 0 60px;
}

.jobs-detail-shell {
    width: 100%;
}

.jobs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.15s;
}

.jobs-back-link:hover {
    color: #0f172a;
}

.jobs-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

/* ── Main detail card ── */
.jobs-detail-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 28px;
}

.jobs-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.jobs-detail-company-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-size: 22px;
    flex-shrink: 0;
}

.jobs-detail-head-text {
    flex: 1;
    min-width: 0;
}

.jobs-detail-company {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
}

.jobs-detail-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

/* ── Meta row ── */
.jobs-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.jobs-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}

.jobs-meta-deadline {
    color: #b45309;
    font-weight: 600;
}

.jobs-meta-link {
    text-decoration: none;
    color: #0f172a;
    transition: opacity 0.15s;
}

.jobs-meta-link:hover {
    opacity: 0.8;
}

/* ── Detail sections ── */
.jobs-detail-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.jobs-detail-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.jobs-detail-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}

.jobs-detail-desc {
    font-size: 14px;
    color: #334155;
    line-height: 1.7;
    white-space: pre-line;
}

.jobs-detail-company-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 10px;
}

.jobs-detail-company-desc {
    font-size: 14px;
    color: #475569;
    margin: 8px 0 0;
    line-height: 1.6;
}

/* ── Owner actions ── */
.jobs-owner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid #f1f5f9;
}

.jobs-owner-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    background: #f8fafc;
    color: #334155;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.15s;
}

.jobs-owner-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.jobs-owner-btn-primary {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

.jobs-owner-btn-primary:hover {
    background: #1e293b;
    border-color: #1e293b;
}

.jobs-owner-btn-danger {
    background: #fff;
    color: #dc2626;
    border-color: #fecaca;
}

.jobs-owner-btn-danger:hover {
    background: #fef2f2;
}

.jobs-app-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    font-size: 11px;
    font-weight: 700;
}

.jobs-owner-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

/* ── Apply sidebar card ── */
.jobs-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px;
}

.jobs-apply-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 24px;
}

.jobs-apply-heading {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}

.jobs-apply-sub {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px;
}

.jobs-apply-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jobs-apply-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.jobs-apply-field label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.jobs-apply-field input[type="file"] {
    font-size: 13px;
    color: #475569;
}

.jobs-apply-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    color: #334155;
    resize: vertical;
    transition: border-color 0.15s;
}

.jobs-apply-field textarea:focus {
    outline: none;
    border-color: #0f172a;
}

.jobs-req { color: #ef4444; }
.jobs-optional { color: #94a3b8; font-weight: 400; }

.jobs-apply-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    background: #0f172a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.jobs-apply-btn:hover {
    background: #1e293b;
}

.jobs-apply-btn-outline {
    background: #fff;
    color: #0f172a;
    border: 1.5px solid #0f172a;
    margin-top: 8px;
}

.jobs-apply-btn-outline:hover {
    background: #f8fafc;
}

/* ── Applied state ── */
.jobs-applied-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.jobs-applied-icon {
    font-size: 36px;
    color: #16a34a;
}

.jobs-applied-state h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.jobs-applied-state p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.jobs-app-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.jobs-app-status-pending    { background: #fef9c3; color: #854d0e; }
.jobs-app-status-shortlisted { background: #d1fae5; color: #065f46; }
.jobs-app-status-rejected   { background: #fee2e2; color: #991b1b; }

/* ── Login CTA ── */
.jobs-login-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.jobs-login-icon {
    font-size: 28px;
    color: #cbd5e1;
}

.jobs-login-cta h3 {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.jobs-login-cta p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* ── Aside stats ── */
.jobs-aside-stats {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jobs-aside-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #475569;
}

.jobs-aside-stat i {
    width: 16px;
    color: #94a3b8;
    text-align: center;
}

.jobs-field-error {
    font-size: 12px;
    color: #dc2626;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   MY APPLICATIONS LIST
   ═══════════════════════════════════════════════════════════════ */

.my-apps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-app-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 22px;
    flex-wrap: wrap;
}

.my-app-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.my-app-company-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-size: 16px;
    flex-shrink: 0;
}

.my-app-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.my-app-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-app-title:hover { color: #1e293b; }

.my-app-company {
    font-size: 13px;
    color: #64748b;
}

.my-app-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.my-app-date {
    font-size: 12px;
    color: #94a3b8;
}

.my-app-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.my-app-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.my-app-status-pending    { background: #fef9c3; color: #854d0e; }
.my-app-status-shortlisted { background: #d1fae5; color: #065f46; }
.my-app-status-rejected   { background: #fee2e2; color: #991b1b; }

.my-app-cv-link {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.my-app-cv-link:hover { color: #0f172a; }

/* ═══════════════════════════════════════════════════════════════
   JOB APPLICATIONS TABLE (COMPANY VIEW)
   ═══════════════════════════════════════════════════════════════ */

.job-apps-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
}

.job-apps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.job-apps-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.job-apps-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
}

.job-app-row:last-child td {
    border-bottom: none;
}

.job-app-applicant {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.job-app-name {
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
}

.job-app-name:hover { color: #6366f1; }

.job-app-username {
    font-size: 11px;
    color: #94a3b8;
}

.job-app-cv-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    text-decoration: none;
    padding: 4px 10px;
    background: #f5f3ff;
    border-radius: 6px;
    transition: background 0.15s;
}

.job-app-cv-btn:hover { background: #ede9fe; }

.job-app-status-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.job-app-status-select {
    padding: 5px 8px;
    font-size: 12px;
    font-family: inherit;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    color: #334155;
    background: #fff;
    cursor: pointer;
}

.job-app-update-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.job-app-update-btn:hover { background: #4f46e5; }

.job-app-cover-row td {
    padding: 0 16px 12px;
    background: #fafafa;
}

.job-app-cover {
    font-size: 13px;
    color: #475569;
    padding: 10px 14px;
    background: #f1f5f9;
    border-radius: 8px;
    line-height: 1.6;
}

/* ── Settings checkbox label (used in post_job form) ── */
.settings-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
}

.settings-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
    cursor: pointer;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .jobs-intro-top,
    .jobs-intro-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .jobs-detail-layout {
        grid-template-columns: 1fr;
    }

    .jobs-detail-aside {
        position: static;
    }
}

@media (max-width: 600px) {
    .jobs-intro-card,
    .job-card {
        padding: 18px;
        border-radius: 0;
    }

    .jobs-intro-copy h1 {
        font-size: 30px;
    }

    .jobs-post-btn,
    .jobs-toolbar-link {
        width: 100%;
        justify-content: center;
    }

    .jobs-grid {
        grid-template-columns: 1fr;
    }

    .jobs-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .job-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .my-app-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .my-app-right {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .job-apps-table thead {
        display: none;
    }

    .job-apps-table tbody tr {
        display: block;
        border-bottom: 2px solid #f1f5f9;
        padding: 12px 0;
    }

    .job-apps-table tbody td {
        display: block;
        border: none;
        padding: 4px 16px;
    }
}

/* ── Jobs mobile: edge-to-edge, no rounded corners ── */
@media (max-width: 800px) {
    body.jobs-body .page-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Job list page */
    body.jobs-body .social-shell {
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    body.jobs-body .jobs-intro-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
    }
    body.jobs-body .job-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    body.jobs-body .jobs-grid {
        gap: 0 !important;
    }
    body.jobs-body .social-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    /* Job detail page */
    body.jobs-detail-body .jobs-detail-shell {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    body.jobs-detail-body .jobs-detail-card,
    body.jobs-detail-body .jobs-apply-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }
    body.jobs-detail-body .jobs-detail-layout {
        gap: 0 !important;
    }
    body.jobs-detail-body .jobs-back-link {
        padding: 12px 16px 0 !important;
        margin-bottom: 0 !important;
        display: block !important;
    }
    body.jobs-detail-body .jobs-detail-page {
        padding: 0 !important;
    }
}

/* ── Online presence badge ─────────────────────────────────── */
.chat-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: block;
    pointer-events: none;
    background: transparent;
}

.chat-online-dot--online { background: #22c55e; }
.chat-online-dot--away   { background: #94a3b8; }
.chat-online-dot--busy   { background: #ef4444; }
.chat-online-dot--teacher.chat-online-dot--online { background: #6366f1; }

/* Wrappers that hold avatar + dot */
.chat-conv-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.chat-conv-avatar-wrap .chat-conv-avatar {
    width: 100%;
    height: 100%;
}

.chat-header-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.chat-header-avatar-wrap .chat-header-avatar {
    display: block;
}

.chat-recent-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.chat-recent-avatar-wrap .chat-recent-avatar {
    width: 100%;
    height: 100%;
}

.chat-recent-avatar-wrap .chat-online-dot {
    width: 12px;
    height: 12px;
    bottom: 1px;
    right: 1px;
}

/* Header status label */
.chat-online-label {
    font-weight: 600;
    font-size: 12px;
}
.chat-online-label--online { color: #22c55e; }
.chat-online-label--away   { color: #94a3b8; }
.chat-online-label--busy   { color: #ef4444; }

/* ── Status picker (in sidebar header) ─────────────────────── */
.chat-status-wrap {
    position: relative;
    order: 2;
    z-index: 500;
}

.chat-status-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    position: relative;
}

.chat-status-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.chat-status-btn .chat-online-dot {
    position: static;
    width: 10px;
    height: 10px;
    border-color: #ffffff;
    flex-shrink: 0;
}

.chat-status-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    padding: 4px;
    min-width: 130px;
    z-index: 9999;
}

.chat-status-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.chat-status-option:hover {
    background: #f1f5f9;
}

.chat-status-option .chat-online-dot {
    position: static;
    width: 9px;
    height: 9px;
    border: none;
    flex-shrink: 0;
}


/* ============================================================
   LINQCAMPUS FINAL MOBILE RESPONSIVE OVERRIDE
   Added for Circle page, header, footer and 3D map mobile view.
   Keep this block at the END of style.css.
   ============================================================ */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.circle-page,
.circle-layout,
.circle-main,
.circle-side,
.circle-panel,
.circle-member-grid,
.circle-member-card {
    min-width: 0;
}

.circle-member-top strong,
.circle-member-top span,
.circle-member-card p,
.circle-request-meta strong,
.circle-request-meta span {
    overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
    .page-wrap {
        margin-top: 22px;
        margin-bottom: 22px;
    }

    body.circle-body .page-wrap {
        padding: 0 !important;
        margin: 0 !important;
    }

    body.circle-body .circle-layout {
        gap: 0 !important;
    }

    body.circle-body .circle-panel {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    .circle-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .circle-main,
    .circle-side {
        width: 100%;
    }

    /* Show circle stats/map/invite above member grid on tablet & mobile */
    .circle-side {
        order: -1;
    }

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

@media (max-width: 800px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        padding: 11px 14px;
        gap: 10px;
        align-items: center;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .logo {
        margin-left: 0;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .logo-img {
        height: 34px;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .logo-text {
        display: none;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .nav-links {
        gap: 7px;
        justify-content: flex-end;
        min-width: 0;
    }

    .nav-action-link {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 13px;
        padding: 0 !important;
    }

    .nav-mini-avatar {
        width: 23px;
        height: 23px;
    }

    .user-pill {
        padding: 7px 10px;
        gap: 7px;
        font-size: 12px;
        max-width: 160px;
    }

    .user-pill span,
    .user-pill strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-profile-dropdown {
        right: 0;
        min-width: 172px;
        border-radius: 14px;
        z-index: 9999;
    }
}

@media (max-width: 640px) {
    body {
        background:
            radial-gradient(circle at top left, rgba(96, 165, 250, 0.14), transparent 28%),
            radial-gradient(circle at top right, rgba(129, 140, 248, 0.12), transparent 30%),
            linear-gradient(180deg, #f4f7ff 0%, #f9fbff 100%);
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 10px 12px;
        border-radius: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo {
        grid-column: 1;
        grid-row: 1;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 7px;
    }

    .nav-action-link {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .nav-profile-menu {
        width: 100%;
        flex: 0 0 100%;
    }

    .user-pill {
        width: 100%;
        max-width: 100%;
        justify-content: space-between;
        border-radius: 14px;
        padding: 8px 10px;
    }

    .nav-profile-dropdown {
        left: auto;
        right: 0;
        top: calc(100% + 8px);
    }

    .page-wrap {
        padding: 0;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    body.circle-body .page-wrap {
        padding: 0 !important;
        margin: 0 !important;
    }

    body.circle-body .circle-layout {
        gap: 0 !important;
    }

    body.circle-body .circle-panel {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
    }

    .circle-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .circle-panel {
        padding: 14px;
        border-radius: 0;
        border-color: #e2e8f0;
        box-shadow: none;
    }

    .circle-panel-head {
        gap: 8px;
        margin-bottom: 14px;
        flex-wrap: wrap;
    }

    .circle-panel-head h1 {
        font-size: 27px;
        line-height: 1.08;
        margin-top: 4px;
    }

    .circle-panel-head h2 {
        font-size: 21px;
        line-height: 1.16;
        margin-top: 4px;
    }

    .circle-college-tag {
        max-width: 100%;
        padding: 7px 10px;
        font-size: 11px;
        white-space: normal;
    }

    .circle-filter-bar {
        gap: 9px;
        margin-bottom: 14px;
    }

    .circle-search-input {
        min-height: 42px;
        border-radius: 12px;
        background: #ffffff;
        font-size: 16px;
    }

    .circle-year-pills {
        display: flex;
        flex-wrap: nowrap;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .circle-year-pills::-webkit-scrollbar {
        display: none;
    }

    .circle-year-pill {
        flex: 0 0 auto;
        padding: 7px 12px;
        font-size: 11px;
    }

    .circle-member-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .circle-member-card,
    .circle-empty-card {
        padding: 13px;
        border-radius: 15px;
        background: #ffffff;
    }

    .circle-member-top {
        gap: 10px;
        margin-bottom: 10px;
        align-items: flex-start;
    }

    .circle-member-top .story-avatar {
        width: 34px;
        height: 34px;
        font-size: 12px;
        flex: 0 0 34px;
    }

    .circle-member-top strong {
        font-size: 14px;
        line-height: 1.25;
    }

    .circle-member-top span {
        font-size: 11px;
        line-height: 1.35;
    }

    .circle-member-card p {
        font-size: 13px;
        line-height: 1.45;
        margin-bottom: 10px;
    }

    .circle-state {
        padding: 8px 11px;
        font-size: 11px;
        border-radius: 999px;
    }

    .circle-card-actions {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .circle-card-actions form,
    .circle-card-actions .circle-action-btn,
    .circle-card-actions .circle-view-profile-btn,
    .circle-action-btn,
    .secondary-btn.circle-view-profile-btn {
        width: 100%;
    }

    .circle-card-actions .circle-action-btn,
    .circle-card-actions .circle-view-profile-btn,
    .circle-action-btn,
    .secondary-btn.circle-view-profile-btn {
        min-height: 42px;
        border-radius: 11px;
        font-size: 13px;
        padding: 10px 12px;
    }

    .circle-request-box {
        padding: 13px;
        border-radius: 14px;
    }

    .circle-request-item {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }

    .circle-request-item form,
    .circle-request-item button {
        width: 100%;
    }

    .circle-summary-list {
        gap: 8px;
        margin-top: 10px;
    }

    .circle-summary-item {
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 13px;
    }

    .circle-map-cta {
        margin-top: 10px;
        min-height: 42px;
        border-radius: 12px;
        font-size: 13px;
        padding: 12px 14px;
    }

    .circle-map-helper {
        margin-top: 10px;
        font-size: 11px;
        line-height: 1.45;
    }

    .circle-map {
        min-height: 260px;
    }

    .circle-center-node .story-avatar {
        width: 48px;
        height: 48px;
    }

    .circle-orbit-node {
        width: 66px;
        margin-left: -33px;
        margin-top: -20px;
        transform: rotate(var(--angle)) translateX(82px) rotate(calc(var(--angle) * -1));
    }

    .circle-orbit-node:hover {
        transform: rotate(var(--angle)) translateX(82px) rotate(calc(var(--angle) * -1)) scale(1.03);
    }

    .circle-orbit-node span {
        max-width: 64px;
        font-size: 10px;
    }
}

@media (max-width: 390px) {
    .page-wrap {
        padding: 0;
    }

    .circle-panel {
        padding: 12px;
    }

    .circle-panel-head h1 {
        font-size: 24px;
    }

    .circle-panel-head h2 {
        font-size: 19px;
    }

    .nav-action-link {
        width: 31px;
        height: 31px;
    }

    .circle-member-card,
    .circle-empty-card {
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .circle-map-modal-panel {
        width: 100vw;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .circle-map-modal-head {
        padding: 14px 12px;
        flex-direction: column;
        gap: 10px;
    }

    .circle-map-modal-head h2 {
        font-size: 20px;
    }

    .circle-map-modal-actions {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .circle-map-modal-actions::-webkit-scrollbar {
        display: none;
    }

    .circle-map-tool {
        flex: 0 0 auto;
        width: auto;
        min-height: 38px;
        padding: 9px 12px;
        font-size: 12px;
        border-radius: 999px;
    }

    .circle-map-tool span {
        white-space: nowrap;
    }

    .circle-map-modal-stage {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
        overflow-y: auto;
    }

    .circle-map-fullscreen {
        height: 58vh;
        min-height: 360px;
        border-radius: 18px;
        overflow: hidden;
    }

    .circle-map-modal-meta {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .circle-map-inspector,
    .circle-map-tips {
        border-radius: 14px;
        padding: 13px;
    }

    .circle-map-tips span,
    .circle-map-inspector span {
        font-size: 12px;
    }

    .circle-map-fullscreen .circle-center-node .story-avatar {
        width: 58px;
        height: 58px;
    }

    .circle-map-fullscreen .circle-orbit-node {
        width: 80px;
        margin-left: -40px;
        margin-top: -24px;
        transform: rotate(var(--angle)) translateX(var(--fullscreen-orbit-radius, 120px)) rotate(calc(var(--angle) * -1));
    }

    .circle-map-fullscreen .circle-orbit-node:hover {
        transform: rotate(var(--angle)) translateX(var(--fullscreen-orbit-radius, 120px)) rotate(calc(var(--angle) * -1)) scale(1.04);
    }

    .circle-map-fullscreen .circle-orbit-node span {
        max-width: 74px;
        font-size: 10px;
    }

    .circle-map-fullscreen.is-3d .circle-orbit-node {
        transform:
            rotate(var(--angle))
            translateX(var(--fullscreen-orbit-radius, 120px))
            translateZ(var(--depth, 0px))
            rotate(calc(var(--angle) * -1));
    }

    .circle-map-fullscreen.is-3d .circle-orbit-node:hover {
        transform:
            rotate(var(--angle))
            translateX(var(--fullscreen-orbit-radius, 120px))
            translateZ(calc(var(--depth, 0px) + 16px))
            rotate(calc(var(--angle) * -1))
            scale(1.04);
    }

    .site-footer-inner {
        padding: 34px 16px 26px;
        display: flex;
        flex-direction: column;
        gap: 26px;
    }

    .site-footer-brand {
        flex: unset;
        width: 100%;
    }

    .site-footer-brand-card {
        padding: 18px;
        border-radius: 18px;
    }

    .site-footer-nav {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .site-footer-col a {
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .site-footer-inner {
        padding: 28px 14px 22px;
    }

    .site-footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .site-footer-col-label {
        font-size: 10px;
    }

    .site-footer-bottom {
        padding: 15px 14px 18px;
    }
}

/* ============================================================
   FINAL FIX: PROFESSIONAL COMPACT MOBILE HEADER
   This overrides the earlier stacked mobile header rules.
   Keep this at the very END of style.css.
   ============================================================ */

@media (max-width: 640px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 9px 10px !important;
        min-height: 58px !important;
        border-radius: 0 !important;
        overflow: visible !important;
        background: rgba(15, 23, 42, 0.98) !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18) !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo {
        grid-column: auto !important;
        grid-row: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-img {
        width: 38px !important;
        height: 38px !important;
        object-fit: contain !important;
        display: block !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-text {
        display: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links {
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 2px 0 !important;
        scrollbar-width: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links::-webkit-scrollbar {
        display: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-action-link {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.11) !important;
        color: #ffffff !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-action-link i {
        font-size: 14px !important;
        line-height: 1 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-menu {
        position: relative !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill {
        width: 42px !important;
        max-width: 42px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 7px !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 12px !important;
        font-size: 0 !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border: 1px solid rgba(191, 219, 254, 0.16) !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill > span:not(.nav-mini-avatar),
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill > strong,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill .username,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill .nav-profile-name {
        display: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-mini-avatar {
        width: 21px !important;
        height: 21px !important;
        font-size: 9px !important;
        margin: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-caret {
        display: inline-flex !important;
        font-size: 9px !important;
        opacity: 0.75 !important;
        margin-left: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-dropdown {
        position: absolute !important;
        top: calc(100% + 9px) !important;
        right: 0 !important;
        left: auto !important;
        width: 172px !important;
        min-width: 172px !important;
        padding: 8px !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        border: 1px solid #dbeafe !important;
        box-shadow: 0 22px 50px rgba(15, 23, 42, 0.20) !important;
        z-index: 99999 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-item {
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        gap: 10px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-item i {
        width: 18px !important;
        text-align: center !important;
        font-size: 15px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .page-wrap {
        margin-top: 14px !important;
    }
}

@media (max-width: 380px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        gap: 6px !important;
        padding: 8px 8px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-img {
        width: 34px !important;
        height: 34px !important;
    }

    .site-header .nav-links {
        gap: 5px !important;
    }

    .site-header .nav-action-link {
        flex-basis: 31px !important;
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }

    .site-header .user-pill {
        width: 38px !important;
        max-width: 38px !important;
        height: 31px !important;
        min-height: 31px !important;
    }

    .site-header .nav-mini-avatar {
        width: 19px !important;
        height: 19px !important;
    }
}

/* ============================================================
   FINAL FIX: MOBILE PROFILE DROPDOWN MENU VISIBILITY
   Reason: previous compact header used overflow-x:auto on .nav-links,
   which clipped the dropdown menu inside the header.
   Keep this block at the VERY END of style.css.
   ============================================================ */

@media (max-width: 640px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        position: relative !important;
        z-index: 10000 !important;
        overflow: visible !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .site-header .nav-profile-menu {
        position: relative !important;
        overflow: visible !important;
        z-index: 10001 !important;
    }

    .site-header .user-pill {
        cursor: pointer !important;
        list-style: none !important;
    }

    .site-header .user-pill::-webkit-details-marker {
        display: none !important;
    }

    .site-header .nav-profile-menu[open] .nav-profile-dropdown {
        display: block !important;
    }

    .site-header .nav-profile-dropdown {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        display: block;
        width: 176px !important;
        min-width: 176px !important;
        background: #ffffff !important;
        color: #172033 !important;
        border: 1px solid #dbeafe !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.24) !important;
        z-index: 10002 !important;
    }

    .site-header .nav-profile-item {
        color: #172033 !important;
        text-decoration: none !important;
    }

    .site-header .nav-profile-logout {
        color: #b91c1c !important;
    }
}

/* ============================================================
   FINAL FIX: STICKY / FIXED MOBILE HEADER ON SCROLL
   This must stay at the VERY END of style.css.
   It keeps the compact mobile header visible while scrolling
   and keeps the profile dropdown above page content.
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --lc-mobile-header-height: 76px;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) {
        padding-top: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        overflow: visible !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .page-wrap {
        margin-top: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-menu {
        overflow: visible !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-menu {
        position: relative !important;
        z-index: 100000 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-dropdown {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        z-index: 100001 !important;
    }
}

@media (max-width: 640px) {
    :root {
        --lc-mobile-header-height: 74px;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        min-height: 58px !important;
        padding: 9px 10px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.20) !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-img {
        width: 38px !important;
        height: 38px !important;
        max-height: 38px !important;
    }
}

@media (max-width: 380px) {
    :root {
        --lc-mobile-header-height: 68px;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        min-height: 54px !important;
        padding: 8px 8px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-img {
        width: 36px !important;
        height: 36px !important;
        max-height: 36px !important;
    }
}

/* ============================================================
   LINQCAMPUS FINAL MOBILE UX: TOP MINI HEADER + BOTTOM NAV BAR
   Paste/keep this block at the VERY END of style.css.
   Desktop and tablet layouts remain unchanged.
   ============================================================ */

@media (max-width: 768px) {
    :root {
        --lc-mobile-topbar-height: 68px;
        --lc-mobile-bottom-nav-height: 78px;
        --lc-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) {
        padding-top: 0 !important;
        padding-bottom: calc(var(--lc-mobile-bottom-nav-height) + var(--lc-mobile-safe-bottom) + 18px) !important;
    }

    /* Top bar becomes clean and compact: logo only */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: var(--lc-mobile-topbar-height) !important;
        height: var(--lc-mobile-topbar-height) !important;
        z-index: 99990 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 12px 16px !important;
        background: rgba(15, 23, 42, 0.98) !important;
        border-radius: 0 !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.20) !important;
        border: 0 !important;
        overflow: visible !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo {
        margin: 0 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-img {
        width: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        object-fit: contain !important;
        display: block !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-text {
        display: none !important;
    }

    /* Bottom app-style nav */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(10px + var(--lc-mobile-safe-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        height: 64px !important;
        min-height: 64px !important;
        z-index: 100000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 8px !important;
        margin: 0 !important;
        background: rgba(15, 23, 42, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.34) !important;
        overflow: visible !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links > a,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links > details,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-menu {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-action-link {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        border-radius: 17px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        color: #f8fafc !important;
        font-size: 18px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        transform: none !important;
        box-shadow: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-action-link:hover,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-action-link:active {
        background: rgba(96, 165, 250, 0.16) !important;
        border-color: rgba(147, 197, 253, 0.24) !important;
        transform: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-badge {
        top: 5px !important;
        right: 8px !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 5px !important;
        font-size: 10px !important;
        line-height: 17px !important;
    }

    /* Profile item inside bottom nav */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-menu {
        position: relative !important;
        z-index: 100001 !important;
        display: block !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill {
        width: 100% !important;
        max-width: none !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border-radius: 17px !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        color: #ffffff !important;
        cursor: pointer !important;
        list-style: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill::-webkit-details-marker {
        display: none !important;
    }

    /* Hide username in bottom nav, keep avatar + caret */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill > strong,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill > span:not(.nav-mini-avatar):not(.nav-profile-caret),
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill .username,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill .nav-profile-name {
        display: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-mini-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        font-size: 10px !important;
        flex-shrink: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-caret {
        display: inline-flex !important;
        color: #ffffff !important;
        font-size: 10px !important;
        opacity: 0.82 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Dropdown opens upward from bottom bar */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-menu[open] .nav-profile-dropdown {
        display: block !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-dropdown {
        position: absolute !important;
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        width: 188px !important;
        min-width: 188px !important;
        padding: 8px !important;
        background: #ffffff !important;
        color: #172033 !important;
        border: 1px solid #dbeafe !important;
        border-radius: 0 !important;
        box-shadow: 0 22px 52px rgba(15, 23, 42, 0.28) !important;
        z-index: 100002 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-item {
        min-height: 44px !important;
        padding: 11px 12px !important;
        border-radius: 13px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #172033 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-item:hover {
        background: #f1f5f9 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-profile-logout {
        color: #b91c1c !important;
    }

    /* Page spacing with bottom nav */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .page-wrap {
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-footer {
        margin-bottom: calc(var(--lc-mobile-bottom-nav-height) + var(--lc-mobile-safe-bottom)) !important;
    }
}

@media (max-width: 420px) {
    :root {
        --lc-mobile-topbar-height: 64px;
        --lc-mobile-bottom-nav-height: 74px;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        min-height: var(--lc-mobile-topbar-height) !important;
        height: var(--lc-mobile-topbar-height) !important;
        padding: 11px 14px !important;
        border-radius: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-img {
        width: 39px !important;
        height: 39px !important;
        max-height: 39px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links {
        left: 9px !important;
        right: 9px !important;
        bottom: calc(8px + var(--lc-mobile-safe-bottom)) !important;
        height: 60px !important;
        min-height: 60px !important;
        padding: 7px !important;
        gap: 6px !important;
        border-radius: 0 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-action-link,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill {
        height: 46px !important;
        min-height: 46px !important;
        border-radius: 16px !important;
        font-size: 17px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-mini-avatar {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
    }
}

@media (max-width: 360px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-links {
        left: 7px !important;
        right: 7px !important;
        gap: 5px !important;
        padding: 6px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-action-link,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .user-pill {
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 15px !important;
        font-size: 16px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .nav-mini-avatar {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
}

/* ============================================================
   FINAL OVERRIDE: FORCE MOBILE BOTTOM NAVBAR
   Put this block LAST if you paste manually.
   Reason: older header rules keep .nav-links inside the top header.
   ============================================================ */
@media (max-width: 991px) {
    :root {
        --lc-mobile-topbar-height: 70px;
        --lc-mobile-bottom-nav-height: 78px;
        --lc-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html,
    body {
        overflow-x: hidden !important;
    }

    body {
        padding-top: calc(var(--lc-mobile-topbar-height) + 8px) !important;
        padding-bottom: calc(var(--lc-mobile-bottom-nav-height) + var(--lc-mobile-safe-bottom) + 18px) !important;
    }

    /* Top bar should contain logo only */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--lc-mobile-topbar-height) !important;
        min-height: var(--lc-mobile-topbar-height) !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        background: rgba(15, 23, 42, 0.98) !important;
        border-radius: 0 !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.20) !important;
        z-index: 9998 !important;
        overflow: visible !important;
    }

    .site-header .logo {
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        z-index: 2 !important;
    }

    .site-header .logo-img {
        width: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        object-fit: contain !important;
    }

    .site-header .logo-text {
        display: none !important;
    }

    /* This is the real bottom navbar */
    .site-header .nav-links,
    header.site-header .nav-links {
        position: fixed !important;
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(10px + var(--lc-mobile-safe-bottom)) !important;
        width: auto !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
        background: rgba(15, 23, 42, 0.985) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.36) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        z-index: 100000 !important;
        overflow: visible !important;
        transform: translateZ(0) !important;
    }

    .site-header .nav-links > a,
    .site-header .nav-links > details,
    .site-header .nav-links > .nav-profile-menu {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .site-header .nav-action-link {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        border-radius: 17px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        color: #ffffff !important;
        font-size: 18px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .site-header .nav-action-link:hover,
    .site-header .nav-action-link:active {
        background: rgba(96, 165, 250, 0.16) !important;
        border-color: rgba(147, 197, 253, 0.24) !important;
        transform: none !important;
    }

    .site-header .nav-badge {
        top: 5px !important;
        right: 8px !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 5px !important;
        font-size: 10px !important;
        line-height: 17px !important;
        z-index: 2 !important;
    }

    .site-header .nav-profile-menu {
        position: relative !important;
        display: block !important;
        z-index: 100001 !important;
    }

    .site-header .user-pill {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border-radius: 17px !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        color: #ffffff !important;
        cursor: pointer !important;
        list-style: none !important;
    }

    .site-header .user-pill::-webkit-details-marker {
        display: none !important;
    }

    .site-header .user-pill > strong,
    .site-header .user-pill > span:not(.nav-mini-avatar):not(.nav-profile-caret),
    .site-header .user-pill .username,
    .site-header .user-pill .nav-profile-name {
        display: none !important;
    }

    .site-header .nav-mini-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .site-header .nav-profile-caret {
        display: inline-flex !important;
        color: #ffffff !important;
        font-size: 10px !important;
        opacity: 0.82 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Profile dropdown opens upward */
    .site-header .nav-profile-dropdown {
        position: absolute !important;
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        width: 188px !important;
        min-width: 188px !important;
        padding: 8px !important;
        background: #ffffff !important;
        color: #172033 !important;
        border: 1px solid #dbeafe !important;
        border-radius: 0 !important;
        box-shadow: 0 22px 52px rgba(15, 23, 42, 0.28) !important;
        z-index: 100002 !important;
    }

    .site-header .nav-profile-menu[open] .nav-profile-dropdown {
        display: block !important;
    }

    .site-header .nav-profile-item {
        min-height: 44px !important;
        padding: 11px 12px !important;
        border-radius: 13px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #172033 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    .site-header .nav-profile-logout {
        color: #b91c1c !important;
    }

    .page-wrap {
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-footer {
        margin-bottom: calc(var(--lc-mobile-bottom-nav-height) + var(--lc-mobile-safe-bottom)) !important;
    }
}

@media (max-width: 420px) {
    .site-header .nav-links,
    header.site-header .nav-links {
        left: 9px !important;
        right: 9px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        height: 60px !important;
        min-height: 60px !important;
        padding: 7px !important;
        gap: 6px !important;
        border-radius: 0 !important;
    }

    .site-header .nav-action-link,
    .site-header .user-pill {
        height: 46px !important;
        min-height: 46px !important;
        border-radius: 16px !important;
        font-size: 17px !important;
    }

    .site-header .logo-img {
        width: 39px !important;
        height: 39px !important;
        max-height: 39px !important;
    }
}

/* ==========================================================
   FINAL MOBILE NAVBAR V2
   Purpose: keep a small top logo bar and force nav icons to
   the bottom even when header/backdrop-filter creates a fixed
   containing block.
   Paste is already merged at the end of this file.
   ========================================================== */

@media only screen and (max-width: 991px) {
    :root {
        --lc-mobile-topbar-height: 74px;
        --lc-mobile-bottom-nav-height: 74px;
        --lc-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        padding-top: calc(var(--lc-mobile-topbar-height) + 10px) !important;
        padding-bottom: calc(var(--lc-mobile-bottom-nav-height) + 26px + var(--lc-mobile-safe-bottom)) !important;
    }

    /* IMPORTANT:
       The header itself becomes a neutral wrapper.
       This prevents the bottom nav from being trapped inside the top header. */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) header.site-header {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: visible !important;
        transform: none !important;
        contain: none !important;
        isolation: auto !important;
        z-index: auto !important;
    }

    /* Fixed top background bar */
    .site-header::before,
    header.site-header::before {
        content: "" !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--lc-mobile-topbar-height) !important;
        background: rgba(15, 23, 42, 0.985) !important;
        border-bottom-left-radius: 22px !important;
        border-bottom-right-radius: 22px !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        z-index: 8998 !important;
        pointer-events: none !important;
    }

    /* Logo pinned inside the mini top bar */
    .site-header .logo,
    header.site-header .logo {
        position: fixed !important;
        top: 15px !important;
        left: 16px !important;
        z-index: 9000 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .site-header .logo-img,
    header.site-header .logo-img {
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .site-header .logo-text,
    header.site-header .logo-text {
        display: none !important;
    }

    /* Real app-style bottom navigation */
    .site-header .nav-links,
    header.site-header .nav-links,
    body .nav-links {
        position: fixed !important;
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + var(--lc-mobile-safe-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        margin: 0 !important;
        padding: 8px 9px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
        background: rgba(15, 23, 42, 0.985) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 46px rgba(15, 23, 42, 0.36) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        overflow: visible !important;
        transform: none !important;
        contain: none !important;
        z-index: 100000 !important;
    }

    .site-header .nav-links > a,
    .site-header .nav-links > details,
    .site-header .nav-links > .nav-profile-menu,
    header.site-header .nav-links > a,
    header.site-header .nav-links > details,
    header.site-header .nav-links > .nav-profile-menu,
    body .nav-links > a,
    body .nav-links > details,
    body .nav-links > .nav-profile-menu {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .site-header .nav-action-link,
    header.site-header .nav-action-link,
    body .nav-action-link {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 17px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        color: #ffffff !important;
        font-size: 18px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .site-header .nav-action-link:hover,
    .site-header .nav-action-link:active,
    header.site-header .nav-action-link:hover,
    header.site-header .nav-action-link:active,
    body .nav-action-link:hover,
    body .nav-action-link:active {
        background: rgba(96, 165, 250, 0.16) !important;
        border-color: rgba(147, 197, 253, 0.24) !important;
        transform: none !important;
    }

    .site-header .nav-badge,
    header.site-header .nav-badge,
    body .nav-badge {
        top: 5px !important;
        right: 8px !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 5px !important;
        font-size: 10px !important;
        line-height: 17px !important;
        z-index: 2 !important;
    }

    /* Profile menu as one bottom-nav item */
    .site-header .nav-profile-menu,
    header.site-header .nav-profile-menu,
    body .nav-profile-menu {
        position: relative !important;
        display: block !important;
        overflow: visible !important;
        z-index: 100001 !important;
    }

    .site-header .user-pill,
    header.site-header .user-pill,
    body .user-pill {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border-radius: 17px !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        color: #ffffff !important;
        cursor: pointer !important;
        list-style: none !important;
        box-shadow: none !important;
    }

    .site-header .user-pill::-webkit-details-marker,
    header.site-header .user-pill::-webkit-details-marker,
    body .user-pill::-webkit-details-marker {
        display: none !important;
    }

    .site-header .user-pill > strong,
    .site-header .user-pill > span:not(.nav-mini-avatar):not(.nav-profile-caret),
    .site-header .user-pill .username,
    .site-header .user-pill .nav-profile-name,
    header.site-header .user-pill > strong,
    header.site-header .user-pill > span:not(.nav-mini-avatar):not(.nav-profile-caret),
    header.site-header .user-pill .username,
    header.site-header .user-pill .nav-profile-name,
    body .user-pill > strong,
    body .user-pill > span:not(.nav-mini-avatar):not(.nav-profile-caret),
    body .user-pill .username,
    body .user-pill .nav-profile-name {
        display: none !important;
    }

    .site-header .nav-mini-avatar,
    header.site-header .nav-mini-avatar,
    body .nav-mini-avatar {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .site-header .nav-profile-caret,
    header.site-header .nav-profile-caret,
    body .nav-profile-caret {
        display: inline-flex !important;
        color: #ffffff !important;
        font-size: 10px !important;
        opacity: 0.82 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Dropdown opens upward from bottom nav */
    .site-header .nav-profile-dropdown,
    header.site-header .nav-profile-dropdown,
    body .nav-profile-dropdown {
        position: absolute !important;
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        width: 188px !important;
        min-width: 188px !important;
        padding: 8px !important;
        background: #ffffff !important;
        color: #172033 !important;
        border: 1px solid #dbeafe !important;
        border-radius: 0 !important;
        box-shadow: 0 22px 52px rgba(15, 23, 42, 0.28) !important;
        z-index: 100002 !important;
    }

    .site-header .nav-profile-menu[open] .nav-profile-dropdown,
    header.site-header .nav-profile-menu[open] .nav-profile-dropdown,
    body .nav-profile-menu[open] .nav-profile-dropdown {
        display: block !important;
    }

    .site-header .nav-profile-item,
    header.site-header .nav-profile-item,
    body .nav-profile-item {
        min-height: 44px !important;
        padding: 11px 12px !important;
        border-radius: 13px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #172033 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    .site-header .nav-profile-logout,
    header.site-header .nav-profile-logout,
    body .nav-profile-logout {
        color: #b91c1c !important;
    }

    .page-wrap {
        margin-top: 10px !important;
        margin-bottom: 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-footer {
        margin-bottom: calc(var(--lc-mobile-bottom-nav-height) + var(--lc-mobile-safe-bottom)) !important;
    }
}

@media only screen and (max-width: 420px) {
    .site-header .nav-links,
    header.site-header .nav-links,
    body .nav-links {
        left: 9px !important;
        right: 9px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        padding: 7px !important;
        gap: 6px !important;
        border-radius: 0 !important;
    }

    .site-header .nav-action-link,
    header.site-header .nav-action-link,
    body .nav-action-link,
    .site-header .user-pill,
    header.site-header .user-pill,
    body .user-pill {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        border-radius: 16px !important;
        font-size: 17px !important;
    }

    .site-header .logo-img,
    header.site-header .logo-img {
        width: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
    }
}


/* ==========================================================
   LINQCAMPUS TRUE MOBILE BOTTOM NAVBAR - FINAL STRUCTURE FIX
   Works with the separate .mobile-bottom-nav placed OUTSIDE header.
   Keep this at the absolute bottom of style.css.
   ========================================================== */

.mobile-bottom-nav {
    display: none;
}

@media only screen and (max-width: 991px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.site-body,
    body {
        padding-top: 82px !important;
        padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 74px !important;
        height: 74px !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: rgba(15, 23, 42, 0.98) !important;
        border-radius: 0 !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        z-index: 9000 !important;
        overflow: visible !important;
    }

    .site-header .logo {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    .site-header .logo-img {
        height: 42px !important;
        width: auto !important;
        display: block !important;
    }

    .site-header .logo-text {
        display: none !important;
    }

    /* Hide the desktop navbar on mobile. Do not move it. */
    .site-header > .nav-links,
    header.site-header > nav.nav-links {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .mobile-bottom-nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        z-index: 99999 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;

        min-height: 72px !important;
        padding: 10px !important;
        margin: 0 !important;

        background: rgba(15, 23, 42, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.36) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        overflow: visible !important;
    }

    .mobile-bottom-link,
    .mobile-profile-menu {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .mobile-bottom-link {
        position: relative !important;
        height: 52px !important;
        min-height: 52px !important;
        width: 100% !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        font-size: 18px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        transform: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        transform: none !important;
        outline: none !important;
    }

    .mobile-bottom-link:active {
        transform: scale(0.96) !important;
    }

    .mobile-profile-menu {
        position: relative !important;
        overflow: visible !important;
        z-index: 100000 !important;
    }

    .mobile-profile-menu summary {
        list-style: none !important;
    }

    .mobile-profile-menu summary::-webkit-details-marker {
        display: none !important;
    }

    .mobile-profile-button .nav-mini-avatar {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }

    .mobile-profile-caret {
        display: inline-flex !important;
        color: #ffffff !important;
        font-size: 11px !important;
        opacity: 0.85 !important;
    }

    .mobile-profile-dropdown {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: auto !important;
        bottom: calc(100% + 12px) !important;
        width: 184px !important;
        min-width: 184px !important;
        padding: 8px !important;
        background: #ffffff !important;
        color: #172033 !important;
        border: 1px solid #dbe4fb !important;
        border-radius: 0 !important;
        box-shadow: 0 22px 50px rgba(15, 23, 42, 0.28) !important;
        z-index: 100001 !important;
    }

    .mobile-profile-dropdown .nav-profile-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
        color: #172033 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .mobile-profile-dropdown .nav-profile-item:hover {
        background: #f8fafc !important;
    }

    .mobile-profile-dropdown .nav-profile-logout {
        color: #b91c1c !important;
    }

    .mobile-nav-badge,
    .mobile-bottom-link .nav-badge {
        position: absolute !important;
        top: 6px !important;
        right: 8px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        background: #ec4899 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    .page-wrap {
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-footer {
        margin-bottom: 0 !important;
    }
}

@media only screen and (max-width: 380px) {
    .mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        gap: 6px !important;
        padding: 8px !important;
        border-radius: 0 !important;
    }

    .mobile-bottom-link {
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 16px !important;
        font-size: 16px !important;
    }

    .mobile-profile-button .nav-mini-avatar {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ==========================================================
   UPDATE: MOBILE PROFILE MOVED TO TOP RIGHT
   Bottom nav keeps only main navigation icons.
   Paste at the VERY END of style.css.
   ========================================================== */

.mobile-top-profile-menu {
    display: none;
}

@media only screen and (max-width: 991px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) header.site-header {
        justify-content: space-between !important;
        gap: 14px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .mobile-top-profile-menu {
        position: relative !important;
        display: block !important;
        margin-left: auto !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
        z-index: 100000 !important;
    }

    .mobile-top-profile-menu summary {
        list-style: none !important;
    }

    .mobile-top-profile-menu summary::-webkit-details-marker {
        display: none !important;
    }

    .mobile-top-profile-button {
        width: 54px !important;
        height: 46px !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        cursor: pointer !important;
    }

    .mobile-top-profile-button .nav-mini-avatar {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .mobile-top-profile-caret {
        font-size: 11px !important;
        color: #ffffff !important;
        opacity: 0.85 !important;
        line-height: 1 !important;
    }

    .mobile-top-profile-dropdown {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: 184px !important;
        min-width: 184px !important;
        padding: 8px !important;
        background: #ffffff !important;
        color: #172033 !important;
        border: 1px solid #dbe4fb !important;
        border-radius: 0 !important;
        box-shadow: 0 22px 50px rgba(15, 23, 42, 0.28) !important;
        z-index: 100001 !important;
    }

    .mobile-top-profile-dropdown .nav-profile-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
        color: #172033 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    .mobile-top-profile-dropdown .nav-profile-item:hover {
        background: #f8fafc !important;
    }

    .mobile-top-profile-dropdown .nav-profile-logout {
        color: #b91c1c !important;
    }

    /* Since profile moved to top, make bottom nav distribute remaining icons cleanly */
    .mobile-bottom-nav {
        justify-content: space-between !important;
    }

    .mobile-bottom-nav .mobile-profile-menu {
        display: none !important;
    }
}

@media only screen and (max-width: 380px) {
    .mobile-top-profile-button {
        width: 50px !important;
        height: 44px !important;
        border-radius: 15px !important;
    }

    .mobile-top-profile-button .nav-mini-avatar {
        width: 28px !important;
        height: 28px !important;
    }
}

/* =====================================================
   FINAL POLISH: MOBILE BOTTOM NAV WITHOUT PERMANENT BOXES
   Icons stay clean; hover/open/tap shows the highlight.
   ===================================================== */

@media only screen and (max-width: 991px) {
    .mobile-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 10px 12px !important;
        background: rgba(15, 23, 42, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.34) !important;
        overflow: visible !important;
    }

    .mobile-bottom-link,
    .mobile-profile-button {
        height: 48px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 14px !important;
        color: #ffffff !important;
        font-size: 22px !important;
        text-decoration: none !important;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    }

    .mobile-bottom-link:hover,
    .mobile-bottom-link:focus-visible,
    .mobile-profile-button:hover,
    .mobile-profile-button:focus-visible,
    .mobile-profile-menu[open] .mobile-profile-button {
        background: rgba(255, 255, 255, 0.09) !important;
        color: #ffffff !important;
        outline: none !important;
    }

    .mobile-bottom-link:active,
    .mobile-profile-button:active {
        background: rgba(255, 255, 255, 0.14) !important;
        transform: scale(0.96) !important;
    }

    .mobile-bottom-link i,
    .mobile-profile-button i {
        font-size: 22px !important;
    }

    .mobile-profile-button .nav-mini-avatar {
        width: 30px !important;
        height: 30px !important;
    }

    .mobile-profile-caret {
        font-size: 11px !important;
        margin-left: 4px !important;
        opacity: 0.85 !important;
    }
}

/* =====================================================
   CHAT HOME MOBILE FIX
   Hide scattered left sidebar on mobile/tablet
   and make recent conversations full width.
   ===================================================== */

@media only screen and (max-width: 991px) {
    body.chat-body .page-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 100px !important;
        margin-top: 12px !important;
    }

    .chat-shell {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: none !important;
    }

    .chat-sidebar {
        display: none !important;
    }

    .chat-main {
        width: 100% !important;
        min-width: 0 !important;
        display: block !important;
    }

    .chat-recents-pane {
        width: 100% !important;
        padding: 16px 14px !important;
        overflow: visible !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    }

    .chat-recents-head h3 {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }

    .chat-recents-head p {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .chat-recents-list {
        margin-top: 14px !important;
        gap: 0 !important;
    }

    .chat-recent-card {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px 12px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 0 !important;
        min-width: 0 !important;
        background: #ffffff !important;
    }

    .chat-recent-avatar-wrap {
        width: 46px !important;
        height: 46px !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    .chat-recent-avatar {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    .chat-recent-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .chat-recent-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .chat-recent-top {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .chat-recent-title {
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    .chat-recent-time {
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: #94a3b8 !important;
    }

    .chat-recent-subtitle {
        margin-top: 3px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    .chat-recent-bottom {
        margin-top: 7px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .chat-recent-preview {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    .chat-unread-badge {
        flex-shrink: 0 !important;
    }

    .chat-request-list {
        margin: 14px 0 18px !important;
    }

    .chat-request-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px 12px !important;
    }

    .chat-request-card-top {
        width: 100% !important;
        min-width: 0 !important;
    }

    .chat-request-copy {
        min-width: 0 !important;
    }

    .chat-request-copy strong,
    .chat-request-copy span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .chat-request-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .chat-request-actions form {
        width: 100% !important;
        margin: 0 !important;
    }

    .chat-request-btn {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 12px !important;
    }

    .chat-empty-state,
    .chat-empty-list {
        padding: 24px 16px !important;
        text-align: center !important;
    }
}

@media only screen and (max-width: 575px) {
    .chat-recents-pane {
        padding: 14px 12px !important;
    }

    .chat-recent-card {
        padding: 12px 10px !important;
        gap: 10px !important;
    }

    .chat-recent-avatar-wrap,
    .chat-recent-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .chat-recent-title {
        font-size: 13.5px !important;
    }

    .chat-recent-subtitle {
        font-size: 11.5px !important;
    }

    .chat-recent-preview {
        font-size: 12px !important;
    }

    .chat-recent-time {
        font-size: 10px !important;
    }
}
/* ==========================================================
   FINAL CHAT WINDOW HARD FIX
   Scoped only to Messages page: body.chat-body
   Reason: some tablet/mobile previews are wider than 991px,
   so older chat-sidebar rules were still active.
   ========================================================== */

@media only screen and (max-width: 1199px) {
    body.chat-body {
        overflow-x: hidden !important;
    }

    body.chat-body .page-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 110px !important;
        margin-top: 12px !important;
        overflow-x: hidden !important;
    }

    /* Force chat layout to become one clean column */
    body.chat-body .chat-shell {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        grid-template-columns: 1fr !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: none !important;
    }

    /* Hide the scattered left profile/sidebar only on chat page */
    body.chat-body .chat-shell > .chat-sidebar,
    body.chat-body aside.chat-sidebar,
    body.chat-body .chat-sidebar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* Recent conversations must take full space */
    body.chat-body .chat-shell > .chat-main,
    body.chat-body .chat-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        flex: none !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    body.chat-body .chat-recents-pane {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 18px 16px !important;
        overflow: visible !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    }

    body.chat-body .chat-recents-head {
        margin-bottom: 14px !important;
    }

    body.chat-body .chat-recents-head h3 {
        font-size: 22px !important;
        line-height: 1.18 !important;
        margin: 0 !important;
        color: #0f172a !important;
    }

    body.chat-body .chat-recents-head p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 5px 0 0 !important;
        color: #64748b !important;
    }

    body.chat-body .chat-recents-list {
        display: grid !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }

    body.chat-body .chat-recent-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        text-decoration: none !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
        overflow: hidden !important;
    }

    body.chat-body .chat-recent-card:hover {
        transform: none !important;
        border-color: #cbd5e1 !important;
        background: #f8fafc !important;
    }

    body.chat-body .chat-recent-avatar-wrap,
    body.chat-body .chat-recent-avatar {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    body.chat-body .chat-recent-avatar {
        border-radius: 50% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 800 !important;
    }

    body.chat-body .chat-recent-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    body.chat-body .chat-recent-content {
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    body.chat-body .chat-recent-top {
        min-width: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    body.chat-body .chat-recent-title {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.chat-body .chat-recent-time {
        flex-shrink: 0 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        color: #94a3b8 !important;
    }

    body.chat-body .chat-recent-subtitle {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 3px !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        color: #64748b !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.chat-body .chat-recent-bottom {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-top: 7px !important;
    }

    body.chat-body .chat-recent-preview {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #475569 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.chat-body .chat-unread-badge {
        flex-shrink: 0 !important;
    }

    body.chat-body .chat-empty-state,
    body.chat-body .chat-empty-list {
        padding: 28px 16px !important;
        text-align: center !important;
    }
}

@media only screen and (max-width: 575px) {
    body.chat-body .page-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.chat-body .chat-shell {
        border-radius: 0 !important;
        border: none !important;
    }

    body.chat-body .chat-recents-pane {
        padding: 15px 12px !important;
    }

    body.chat-body .chat-recents-head h3 {
        font-size: 19px !important;
    }

    body.chat-body .chat-recents-head p {
        font-size: 13px !important;
    }

    body.chat-body .chat-recents-list {
        gap: 8px !important;
    }

    body.chat-body .chat-recent-card {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    body.chat-body .chat-recent-avatar-wrap,
    body.chat-body .chat-recent-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }

    body.chat-body .chat-recent-title {
        font-size: 14px !important;
    }

    body.chat-body .chat-recent-time {
        font-size: 10px !important;
    }

    body.chat-body .chat-recent-subtitle {
        font-size: 12px !important;
    }

    body.chat-body .chat-recent-preview {
        font-size: 12.5px !important;
    }
}
/* ==========================================================
   CHAT HOME FINAL STRUCTURAL FIX
   Works with chat_home_fixed_no_sidebar.html
   Removes the broken/scattered sidebar only from chat home.
   Other chat pages can keep their normal conversation sidebar.
   ========================================================== */

/* chat-home-shell: flex column so height is constrained by page-wrap → pane can scroll */
body.chat-body .chat-home-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

body.chat-body .chat-home-shell > .chat-sidebar,
body.chat-body .chat-home-shell .chat-home-sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
}

body.chat-body .chat-home-shell > .chat-main,
body.chat-body .chat-home-shell .chat-home-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: #ffffff !important;
}

/* Pane fills remaining space and scrolls — no padding, no max-width cap */
body.chat-body .chat-home-shell .chat-recents-pane {
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
}

body.chat-body .chat-home-shell .chat-recents-head {
    display: grid !important;
    gap: 4px !important;
    padding: 24px 24px 16px !important;
    margin-bottom: 0 !important;
}

body.chat-body .chat-home-shell .chat-recents-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.chat-body .chat-home-shell .chat-recents-title-row > div {
    min-width: 0 !important;
}

body.chat-body .chat-home-shell .chat-recents-head h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #0f172a !important;
}

body.chat-body .chat-home-shell .chat-recents-head p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: #64748b !important;
}

/* List spans full width with a top border as section separator */
body.chat-body .chat-home-shell .chat-recents-list {
    display: grid !important;
    gap: 0 !important;
    margin-top: 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
}

/* Cards are full-bleed rows with only a bottom divider */
body.chat-body .chat-home-shell .chat-recent-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 24px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.12s !important;
}

body.chat-body .chat-home-shell .chat-recent-card:hover {
    background: #f8fafc !important;
    transform: none !important;
}

body.chat-body .chat-home-shell .chat-recent-avatar-wrap,
body.chat-body .chat-home-shell .chat-recent-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

body.chat-body .chat-home-shell .chat-recent-avatar {
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body.chat-body .chat-home-shell .chat-recent-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

body.chat-body .chat-home-shell .chat-recent-content {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

body.chat-body .chat-home-shell .chat-recent-top,
body.chat-body .chat-home-shell .chat-recent-bottom {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.chat-body .chat-home-shell .chat-recent-top {
    justify-content: space-between !important;
}

body.chat-body .chat-home-shell .chat-recent-bottom {
    justify-content: space-between !important;
    margin-top: 8px !important;
}

body.chat-body .chat-home-shell .chat-recent-title,
body.chat-body .chat-home-shell .chat-recent-subtitle,
body.chat-body .chat-home-shell .chat-recent-preview {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.chat-body .chat-home-shell .chat-recent-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

body.chat-body .chat-home-shell .chat-recent-time {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    color: #94a3b8 !important;
}

body.chat-body .chat-home-shell .chat-recent-subtitle {
    margin-top: 4px !important;
    font-size: 12.5px !important;
    color: #64748b !important;
}

body.chat-body .chat-home-shell .chat-recent-preview {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #475569 !important;
}

body.chat-body .chat-home-shell .chat-unread-badge {
    flex-shrink: 0 !important;
}

body.chat-body .chat-home-shell .chat-request-list {
    display: grid !important;
    gap: 10px !important;
    margin: 16px 0 22px !important;
}

body.chat-body .chat-home-shell .chat-request-card {
    border-radius: 0 !important;
    padding: 16px !important;
}

@media only screen and (max-width: 991px) {
    body.chat-body .page-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 108px !important;
        margin-top: 12px !important;
    }

    body.chat-body .chat-home-shell {
        border-radius: 0 !important;
        margin: 0 !important;
    }

    body.chat-body .chat-home-shell .chat-recents-pane {
        padding: 0 !important;
    }

    body.chat-body .chat-home-shell .chat-recents-head {
        padding: 18px 18px 14px !important;
    }

    body.chat-body .chat-home-shell .chat-recents-head h3 {
        font-size: 18px !important;
    }

    body.chat-body .chat-home-shell .chat-recents-head p {
        font-size: 13px !important;
    }

    body.chat-body .chat-home-shell .chat-recent-card {
        display: flex !important;
        gap: 12px !important;
        padding: 13px 18px !important;
        border-radius: 0 !important;
    }

    body.chat-body .chat-home-shell .chat-recent-avatar-wrap,
    body.chat-body .chat-home-shell .chat-recent-avatar {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    body.chat-body .chat-home-shell .chat-recent-title {
        font-size: 15px !important;
    }

    body.chat-body .chat-home-shell .chat-recent-time {
        font-size: 11px !important;
    }
}

@media only screen and (max-width: 575px) {
    body.chat-body .page-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.chat-body .chat-home-shell {
        border-radius: 0 !important;
    }

    body.chat-body .chat-home-shell .chat-recents-pane {
        padding: 0 !important;
    }

    body.chat-body .chat-home-shell .chat-recents-head {
        padding: 14px 14px 12px !important;
    }

    body.chat-body .chat-home-shell .chat-recents-list {
        gap: 0 !important;
    }

    body.chat-body .chat-home-shell .chat-recent-card {
        display: flex !important;
        gap: 10px !important;
        padding: 11px 14px !important;
        border-radius: 0 !important;
    }

    body.chat-body .chat-home-shell .chat-recent-avatar-wrap,
    body.chat-body .chat-home-shell .chat-recent-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }

    body.chat-body .chat-home-shell .chat-recent-title {
        font-size: 14px !important;
    }

    body.chat-body .chat-home-shell .chat-recent-subtitle {
        font-size: 12px !important;
    }

    body.chat-body .chat-home-shell .chat-recent-preview {
        font-size: 12.5px !important;
    }

    body.chat-body .chat-home-shell .chat-recent-time {
        font-size: 10px !important;
    }
}
/* ==========================================================
   LINQCAMPUS PRODUCTION MOBILE NAV + CHAT HOME PATCH
   Purpose:
   1) Kill old experimental mobile classes that caused the floating avatar.
   2) Use collision-proof lc-* classes for mobile account and bottom nav.
   3) Make chat home full-width with no scattered sidebar.
   Keep this block at the absolute END of style.css.
   ========================================================== */

/* New components are hidden on desktop by default */
.lc-mobile-account,
.lc-mobile-account-link,
.lc-mobile-bottom-nav {
    display: none !important;
}

@media only screen and (min-width: 992px) {
    .lc-mobile-account,
    .lc-mobile-bottom-nav,
    .mobile-top-profile-menu,
    .mobile-bottom-nav {
        display: none !important;
    }
}

@media only screen and (max-width: 991px) {
    :root {
        --lc-topbar-height: 78px;
        --lc-bottom-nav-height: 78px;
        --lc-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.site-body {
        padding-top: 0 !important;
        padding-bottom: calc(var(--lc-bottom-nav-height) + 24px + var(--lc-mobile-safe-bottom)) !important;
    }

    /* Remove all old/experimental mobile nav ghosts */
    .mobile-top-profile-menu,
    .mobile-bottom-nav,
    .mobile-profile-menu,
    .site-header > .mobile-top-profile-menu,
    header.site-header > .mobile-top-profile-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        transform: none !important;
    }

    /* Mobile top header: only logo left and lc-mobile-account right */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) header.site-header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--lc-topbar-height) !important;
        min-height: var(--lc-topbar-height) !important;
        max-height: var(--lc-topbar-height) !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        background: rgba(15, 23, 42, 0.98) !important;
        border-radius: 0 !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18) !important;
        overflow: visible !important;
        z-index: 9500 !important;
    }

    .site-header::before,
    header.site-header::before {
        display: none !important;
        content: none !important;
    }

    .site-header .logo,
    header.site-header .logo {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        position: relative !important;
        z-index: 9502 !important;
    }

    .site-header .logo-img,
    header.site-header .logo-img {
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        object-fit: contain !important;
        display: block !important;
    }

    .site-header .logo-text,
    header.site-header .logo-text {
        display: none !important;
    }

    /* Hide desktop nav on mobile. This removes duplicate desktop profile/menu. */
    .site-header > nav.nav-links,
    header.site-header > nav.nav-links,
    .site-header .nav-links,
    header.site-header .nav-links {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* New isolated account link (replaces dropdown) */
    .lc-mobile-account-link {
        display: inline-flex !important;
    }

    /* New isolated account menu */
    .lc-mobile-account {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        z-index: 9600 !important;
    }

    /* New: direct link replacing the dropdown */
    .lc-mobile-account-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        transform: translateY(-50%) !important;
        width: 46px !important;
        height: 46px !important;
        text-decoration: none !important;
        z-index: 9600 !important;
    }

    .lc-mobile-account summary {
        list-style: none !important;
    }

    .lc-mobile-account summary::-webkit-details-marker {
        display: none !important;
    }

    .lc-mobile-account-btn {
        width: 58px !important;
        height: 46px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.13) !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
        cursor: pointer !important;
        box-shadow: none !important;
        line-height: 1 !important;
    }

    .lc-mobile-account-btn:hover,
    .lc-mobile-account[open] .lc-mobile-account-btn {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .lc-mobile-account-avatar,
    .lc-mobile-account-avatar img {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        overflow: hidden !important;
    }

    .lc-mobile-account-avatar span,
    .lc-mobile-account-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .lc-mobile-account-caret {
        font-size: 11px !important;
        color: #ffffff !important;
        opacity: 0.82 !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .lc-mobile-account-menu {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: 190px !important;
        min-width: 190px !important;
        padding: 8px !important;
        display: grid !important;
        gap: 4px !important;
        border-radius: 0 !important;
        border: 1px solid #dbe4fb !important;
        background: #ffffff !important;
        box-shadow: 0 22px 50px rgba(15, 23, 42, 0.28) !important;
        z-index: 9700 !important;
    }

    .lc-mobile-account-item {
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: #172033 !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    .lc-mobile-account-item:hover {
        background: #f8fafc !important;
    }

    .lc-mobile-account-logout {
        color: #b91c1c !important;
    }

    /* New isolated bottom navigation */
    .lc-mobile-bottom-nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + var(--lc-mobile-safe-bottom)) !important;
        width: auto !important;
        min-height: 72px !important;
        padding: 10px 12px !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: 6px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.09) !important;
        background: rgba(15, 23, 42, 0.98) !important;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.34) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        z-index: 9400 !important;
        overflow: visible !important;
    }

    .lc-mobile-nav-link {
        position: relative !important;
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 22px !important;
        line-height: 1 !important;
        transition: background 0.16s ease, transform 0.16s ease !important;
    }

    .lc-mobile-nav-link:hover,
    .lc-mobile-nav-link:focus-visible {
        background: rgba(255, 255, 255, 0.1) !important;
        outline: none !important;
    }

    .lc-mobile-nav-link:active {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: scale(0.96) !important;
    }

    .lc-mobile-nav-link i {
        font-size: 22px !important;
        line-height: 1 !important;
    }

    .lc-mobile-nav-badge {
        position: absolute !important;
        top: 6px !important;
        right: 14px !important;
        min-width: 17px !important;
        height: 17px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        background: #ec4899 !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .page-wrap {
        margin-top: 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media only screen and (max-width: 380px) {
    .lc-mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: 68px !important;
        padding: 8px 10px !important;
        border-radius: 0 !important;
    }

    .lc-mobile-nav-link {
        height: 48px !important;
        min-height: 48px !important;
        font-size: 20px !important;
    }

    .lc-mobile-account {
        right: 12px !important;
    }

    .lc-mobile-account-btn {
        width: 54px !important;
        height: 44px !important;
    }
}

/* ==========================================================
   CHAT HOME PRODUCTION FIX
   Uses unique lc-chat-home-shell class in chat_home.html.
   ========================================================== */

/* Shell uses flex column so page-wrap height cascades down → pane scrolls */
body.chat-body .lc-chat-home-shell {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

@media (max-width: 1199px) {
    body.chat-body .lc-chat-home-shell {
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
    }
}

body.chat-body .lc-chat-home-shell > .chat-sidebar {
    display: none !important;
}

body.chat-body .lc-chat-home-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background: #ffffff !important;
}

/* Pane fills height and scrolls — no padding, no max-width cap */
body.chat-body .lc-chat-home-shell .chat-recents-pane {
    flex: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
}

body.chat-body .lc-chat-home-shell .chat-recents-head h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #0f172a !important;
}

body.chat-body .lc-chat-home-shell .chat-recents-head p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: #64748b !important;
}

body.chat-body .lc-chat-home-shell .chat-recents-head {
    display: grid !important;
    gap: 4px !important;
    padding: 24px 24px 16px !important;
    margin-bottom: 0 !important;
}

/* List is full-bleed with a top border as section separator */
body.chat-body .lc-chat-home-shell .chat-recents-list {
    display: grid !important;
    gap: 0 !important;
    margin-top: 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
}

body.chat-body .lc-chat-home-shell .chat-recents-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.chat-body .lc-chat-home-shell .chat-recents-title-row > div {
    min-width: 0 !important;
}

body.chat-body .lc-chat-home-shell .chat-new-btn,
body.chat-body .lc-chat-home-shell .chat-start-back {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18) !important;
}

body.chat-body .lc-chat-home-shell .chat-new-btn:hover,
body.chat-body .lc-chat-home-shell .chat-start-back:hover {
    background: #1e293b !important;
}

body.chat-body .lc-chat-home-shell .chat-start-screen[hidden] {
    display: none !important;
}

body.chat-body .lc-chat-home-shell .chat-start-screen {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    width: calc(100% - 32px) !important;
    max-width: 940px !important;
    margin: 16px auto !important;
    padding: 28px 30px !important;
    background: #ffffff !important;
    border: 2px solid #1e293b !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    height: calc(100% - 32px) !important;
}

@media (max-width: 768px) {
    body.chat-body .lc-chat-home-shell .chat-start-screen {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 16px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        height: 100% !important;
    }
    body.chat-body .lc-chat-home-shell .chat-start-search {
        border-color: #1e293b !important;
        border-width: 1.5px !important;
    }
}

body.chat-body .lc-chat-home-shell .chat-start-screen-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 0 18px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

body.chat-body .lc-chat-home-shell .chat-start-screen-head h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
}

body.chat-body .lc-chat-home-shell .chat-start-screen-head p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 3px 0 0 !important;
    color: #94a3b8 !important;
}

body.chat-body .lc-chat-home-shell .chat-start-section-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #64748b !important;
    padding: 14px 20px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option-group {
    background: #f8fafc !important;
}

body.chat-body .lc-chat-home-shell .chat-start-search {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 14px !important;
    margin-bottom: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    transition: border-color 0.15s !important;
}

body.chat-body .lc-chat-home-shell .chat-start-search:focus-within {
    border-color: #0f172a !important;
    background: #ffffff !important;
}

body.chat-body .lc-chat-home-shell .chat-start-search input {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font: inherit !important;
    font-size: 14px !important;
}

body.chat-body .lc-chat-home-shell .chat-start-options {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid #f1f5f9 !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 13px 20px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background 0.12s !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option:last-child {
    border-bottom: none !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option[hidden] {
    display: none !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option:hover {
    background: #f8fafc !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option-copy {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option-copy strong,
body.chat-body .lc-chat-home-shell .chat-start-option-copy span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option-copy strong {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option-copy span {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option-arrow {
    color: #cbd5e1 !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    transition: color 0.12s !important;
}

body.chat-body .lc-chat-home-shell .chat-start-option:hover .chat-start-option-arrow {
    color: #0f172a !important;
}

body.chat-body .lc-chat-home-shell .chat-start-no-results {
    padding: 24px 20px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 24px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: inherit !important;
    text-decoration: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: background 0.12s !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-card:hover {
    background: #f8fafc !important;
    transform: none !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-avatar-wrap,
body.chat-body .lc-chat-home-shell .chat-recent-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-avatar {
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0f172a !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-content,
body.chat-body .lc-chat-home-shell .chat-recent-title,
body.chat-body .lc-chat-home-shell .chat-recent-subtitle,
body.chat-body .lc-chat-home-shell .chat-recent-preview {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-top,
body.chat-body .lc-chat-home-shell .chat-recent-bottom {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-top {
    justify-content: space-between !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-bottom {
    justify-content: space-between !important;
    margin-top: 8px !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-title,
body.chat-body .lc-chat-home-shell .chat-recent-subtitle,
body.chat-body .lc-chat-home-shell .chat-recent-preview {
    display: block !important;
    white-space: nowrap !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-time {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    color: #94a3b8 !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-subtitle {
    margin-top: 4px !important;
    font-size: 12.5px !important;
    color: #64748b !important;
}

body.chat-body .lc-chat-home-shell .chat-recent-preview {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #475569 !important;
}

@media only screen and (max-width: 991px) {
    body.chat-body .lc-chat-home-shell {
        border-radius: 0 !important;
        margin: 0 !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recents-pane {
        padding: 0 !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recents-head {
        padding: 18px 18px 14px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recents-head h3 {
        font-size: 18px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recents-head p {
        font-size: 13px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recents-title-row {
        align-items: center !important;
    }

    body.chat-body .lc-chat-home-shell .chat-new-btn,
    body.chat-body .lc-chat-home-shell .chat-start-back {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-start-screen {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
        margin: 8px auto !important;
        height: calc(100% - 16px) !important;
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-start-screen-head h3 {
        font-size: 18px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-start-screen-head p {
        font-size: 12px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-start-option {
        gap: 12px !important;
        padding: 12px 14px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-card {
        display: flex !important;
        gap: 12px !important;
        padding: 13px 18px !important;
        border-radius: 0 !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-avatar-wrap,
    body.chat-body .lc-chat-home-shell .chat-recent-avatar {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-title {
        font-size: 15px !important;
    }
}

@media only screen and (max-width: 575px) {
    body.chat-body .lc-chat-home-shell .chat-recents-pane {
        padding: 0 !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recents-head {
        padding: 14px 14px 12px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recents-list {
        gap: 0 !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-card {
        display: flex !important;
        gap: 10px !important;
        padding: 11px 14px !important;
        border-radius: 0 !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-avatar-wrap,
    body.chat-body .lc-chat-home-shell .chat-recent-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-title {
        font-size: 14px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-subtitle {
        font-size: 12px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-preview {
        font-size: 12.5px !important;
    }

    body.chat-body .lc-chat-home-shell .chat-recent-time {
        font-size: 10px !important;
    }
}
/* ==========================================================
   FINAL PRODUCTION REPAIR: MOBILE HEADER + CHAT ROOM LAYOUT
   Scope:
   - fixes LC/profile alignment in mobile top bar
   - fixes direct/group/broadcast chat screens only
   - does NOT affect lc-chat-home-shell recent conversations page
   ========================================================== */

@media only screen and (max-width: 991px) {
    :root {
        --lc-mobile-topbar-h: 82px;
        --lc-mobile-bottom-nav-h: 92px;
        --lc-mobile-chat-gap: 10px;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        padding-top: var(--lc-mobile-topbar-h) !important;
        padding-bottom: var(--lc-mobile-bottom-nav-h) !important;
    }

    /* Compact, aligned mobile top header */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--lc-mobile-topbar-h) !important;
        min-height: var(--lc-mobile-topbar-h) !important;
        max-height: var(--lc-mobile-topbar-h) !important;
        padding: 0 16px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(15, 23, 42, 0.98) !important;
        border-radius: 0 !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16) !important;
        overflow: visible !important;
        z-index: 9000 !important;
    }

    .site-header .logo {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        line-height: 1 !important;
    }

    .site-header .logo-img {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
        display: block !important;
        object-fit: contain !important;
    }

    .site-header .logo-text,
    .site-header .nav-links {
        display: none !important;
    }

    .lc-mobile-account {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        transform: translateY(-50%) !important;
        z-index: 9100 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .lc-mobile-account-btn {
        width: 74px !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 9px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border: 1px solid rgba(255, 255, 255, 0.13) !important;
        box-shadow: none !important;
        list-style: none !important;
        cursor: pointer !important;
    }

    .lc-mobile-account-btn::-webkit-details-marker {
        display: none !important;
    }

    .lc-mobile-account-avatar,
    .lc-mobile-account-avatar img {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .lc-mobile-account-caret {
        color: #ffffff !important;
        font-size: 13px !important;
        opacity: 0.85 !important;
    }

    .lc-mobile-account-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        width: 178px !important;
        min-width: 178px !important;
        padding: 8px !important;
        background: #ffffff !important;
        border: 1px solid #dbe4fb !important;
        border-radius: 0 !important;
        box-shadow: 0 22px 50px rgba(15, 23, 42, 0.24) !important;
        z-index: 9200 !important;
    }

    /* Bottom nav stays clean and does not steal chat input space */
    .lc-mobile-bottom-nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        height: 72px !important;
        min-height: 72px !important;
        padding: 10px 12px !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: center !important;
        background: rgba(15, 23, 42, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 26px !important;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.34) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        z-index: 8999 !important;
    }

    .lc-mobile-nav-link {
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 16px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .lc-mobile-nav-link:hover,
    .lc-mobile-nav-link:focus-visible,
    .lc-mobile-nav-link:active {
        background: rgba(255, 255, 255, 0.10) !important;
    }

    /* Chat pages: viewport-safe layout */
    body.chat-body {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        padding-top: var(--lc-mobile-topbar-h) !important;
        padding-bottom: var(--lc-mobile-bottom-nav-h) !important;
    }

    body.chat-body .page-wrap {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(100dvh - var(--lc-mobile-topbar-h) - var(--lc-mobile-bottom-nav-h) - var(--lc-mobile-chat-gap)) !important;
        min-height: 0 !important;
        margin: var(--lc-mobile-chat-gap) 0 0 !important;
        padding: 0 10px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Keep recent conversations page using its own production layout */
    body.chat-body .lc-chat-home-shell {
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Direct chat, circle chat, announcement chat */
    body.chat-body .chat-shell:not(.lc-chat-home-shell) {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) > .chat-sidebar {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) > .chat-main,
    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-main {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header {
        flex: 0 0 auto !important;
        min-height: 72px !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header-info {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header-name {
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header-sub {
        font-size: 12px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-group-header-avatars {
        flex: 0 0 auto !important;
        max-width: 128px !important;
        overflow: hidden !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header-menu-trigger,
    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header-profile-link {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex-shrink: 0 !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-messages,
    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-broadcast-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 14px 14px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        background: #ffffff !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-message {
        max-width: 86% !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-bubble {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        padding: 9px 13px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-typing-indicator {
        flex: 0 0 auto !important;
        padding: 0 14px 6px !important;
        background: #ffffff !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-input-bar {
        display: block !important;
        visibility: visible !important;
        flex: 0 0 auto !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 2 !important;
        padding: 9px 10px 10px !important;
        border-top: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-reply-bar {
        margin-bottom: 8px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-input-form {
        min-height: 48px !important;
        border-radius: 20px !important;
        padding: 7px 7px 7px 14px !important;
        gap: 8px !important;
        background: #f8fafc !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-input-form textarea {
        min-height: 32px !important;
        max-height: 96px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        padding: 5px 0 !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-attach-btn,
    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-send-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    body.chat-body .chat-action-sheet-panel {
        bottom: calc(var(--lc-mobile-bottom-nav-h) + 8px) !important;
    }
}

@media only screen and (max-width: 575px) {
    :root {
        --lc-mobile-topbar-h: 76px;
        --lc-mobile-bottom-nav-h: 88px;
        --lc-mobile-chat-gap: 8px;
    }

    .site-header .logo-img {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .lc-mobile-account {
        right: 12px !important;
    }

    .lc-mobile-account-btn {
        width: 68px !important;
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 0 !important;
    }

    .lc-mobile-account-avatar,
    .lc-mobile-account-avatar img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    body.chat-body .page-wrap {
        padding: 0 8px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) {
        border-radius: 0 !important;
        border: none !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header {
        min-height: 66px !important;
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-group-header-avatars {
        max-width: 112px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-group-header-avatar,
    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header-avatar,
    body.chat-body .chat-shell:not(.lc-chat-home-shell) .story-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header-name {
        font-size: 13.5px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-header-sub {
        font-size: 11.5px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-messages,
    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-broadcast-messages {
        padding: 12px 12px 10px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-message {
        max-width: 90% !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-input-bar {
        padding: 8px 8px 9px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-input-form {
        border-radius: 0 !important;
        padding-left: 12px !important;
    }

    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-attach-btn,
    body.chat-body .chat-shell:not(.lc-chat-home-shell) .chat-send-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
}
/* ==========================================================
   FINAL FIX: CENTER LC LOGO IN MOBILE HEADER
   Keeps profile/account button on the right.
   Desktop header remains unchanged.
   ========================================================== */

@media only screen and (max-width: 991px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > .site-header {
        justify-content: center !important;
        align-items: center !important;
        position: fixed !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9001 !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo-img {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        display: block !important;
        object-fit: contain !important;
    }

    .lc-mobile-account {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 9100 !important;
    }
}

@media only screen and (max-width: 575px) {
    .site-header .logo-img {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .lc-mobile-account {
        right: 12px !important;
    }
}
/* ==========================================================
   FINAL FIX: MOBILE HEADER LOGO VERTICALLY CENTERED
   Logo returns to the left side, but is perfectly centered
   vertically inside the header. Profile stays right.
   ========================================================== */

@media only screen and (max-width: 991px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--lc-mobile-topbar-h, 82px) !important;
        min-height: var(--lc-mobile-topbar-h, 82px) !important;
        max-height: var(--lc-mobile-topbar-h, 82px) !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .site-header .logo {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        z-index: 9001 !important;
    }

    .site-header .logo-img {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        display: block !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .lc-mobile-account {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 9100 !important;
    }
}

@media only screen and (max-width: 575px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > .site-header {
        height: var(--lc-mobile-topbar-h, 76px) !important;
        min-height: var(--lc-mobile-topbar-h, 76px) !important;
        max-height: var(--lc-mobile-topbar-h, 76px) !important;
        padding: 0 12px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo {
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .site-header .logo-img {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .lc-mobile-account {
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}
/* ==========================================================
   FINAL HEADER POLISH: FLAT MOBILE TOP NAVBAR
   - LC logo vertically centered on the left
   - Profile vertically centered on the right
   - Removes rounded bottom corners from top navbar
   ========================================================== */

@media only screen and (max-width: 991px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > .site-header {
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        height: var(--lc-mobile-topbar-h, 82px) !important;
        min-height: var(--lc-mobile-topbar-h, 82px) !important;
        max-height: var(--lc-mobile-topbar-h, 82px) !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .site-header .logo {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 52px !important;
        width: 52px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    .site-header .logo-img {
        width: 52px !important;
        height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        display: block !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .lc-mobile-account {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
}

@media only screen and (max-width: 575px) {
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > .site-header {
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        height: var(--lc-mobile-topbar-h, 76px) !important;
        min-height: var(--lc-mobile-topbar-h, 76px) !important;
        max-height: var(--lc-mobile-topbar-h, 76px) !important;
        padding: 0 12px !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header .logo {
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 48px !important;
        height: 48px !important;
    }

    .site-header .logo-img {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }

    .lc-mobile-account {
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}
/* ==========================================================
   ABSOLUTE FINAL HEADER ALIGNMENT FIX
   Mobile top navbar:
   - flat navbar
   - LC logo vertically centered using inset top/bottom + margin auto
   - profile tab vertically centered using inset top/bottom + margin auto
   This overrides all earlier logo/header rules.
   ========================================================== */

@media only screen and (max-width: 991px) {
    html body > header.site-header,
    html body .site-header {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        width: 100% !important;
        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;
        padding: 0 !important;
        margin: 0 !important;

        display: block !important;

        background: rgba(15, 23, 42, 0.98) !important;
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;
        overflow: visible !important;
        z-index: 9000 !important;
    }

    html body .site-header .logo {
        position: absolute !important;
        left: 16px !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;

        margin-top: auto !important;
        margin-bottom: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
        text-decoration: none !important;
        z-index: 9001 !important;
    }

    html body .site-header .logo-img {
        position: static !important;
        display: block !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        line-height: 0 !important;
        vertical-align: middle !important;
    }

    html body .site-header .logo-text,
    html body .site-header .nav-links {
        display: none !important;
    }

    html body .site-header .lc-mobile-account {
        position: absolute !important;
        right: 16px !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;

        width: 72px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;

        margin-top: auto !important;
        margin-bottom: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        z-index: 9100 !important;
    }

    html body .site-header .lc-mobile-account-btn {
        width: 72px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border-radius: 0 !important;
    }

    body {
        padding-top: 76px !important;
    }

    body.chat-body {
        padding-top: 76px !important;
    }
}

@media only screen and (max-width: 575px) {
    html body > header.site-header,
    html body .site-header {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
    }

    html body .site-header .logo {
        left: 14px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }

    html body .site-header .logo-img {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }

    html body .site-header .lc-mobile-account {
        right: 14px !important;
        width: 68px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    html body .site-header .lc-mobile-account-btn {
        width: 68px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    body {
        padding-top: 72px !important;
    }

    body.chat-body {
        padding-top: 72px !important;
    }
}
/* ==========================================================
   CORRECTED FIX: REMOVE ROUNDED CORNERS ONLY FROM TOP NAVBARS
   Bottom mobile navbar remains rounded.
   Applies to normal pages and chat pages.
   ========================================================== */

@media only screen and (max-width: 991px) {
    html body > header.site-header,
    html body header.site-header,
    html body .site-header,
    html body.chat-body > header.site-header,
    html body.chat-body header.site-header,
    html body.chat-body .site-header {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        overflow: visible !important;
    }

    /* Keep the bottom navbar rounded. Do NOT flatten it. */
    html body .lc-mobile-bottom-nav,
    html body .mobile-bottom-nav {
        border-radius: 26px !important;
        border-top-left-radius: 26px !important;
        border-top-right-radius: 26px !important;
        border-bottom-left-radius: 26px !important;
        border-bottom-right-radius: 26px !important;
        overflow: visible !important;
    }

    html body .lc-mobile-nav-link,
    html body .mobile-bottom-link {
        border-radius: 0 !important;
    }
}

@media only screen and (max-width: 575px) {
    html body > header.site-header,
    html body header.site-header,
    html body .site-header,
    html body.chat-body > header.site-header,
    html body.chat-body header.site-header,
    html body.chat-body .site-header {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Keep bottom app navbar rounded on phones */
    html body .lc-mobile-bottom-nav,
    html body .mobile-bottom-nav {
        border-radius: 24px !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
    }

    html body .lc-mobile-nav-link,
    html body .mobile-bottom-link {
        border-radius: 14px !important;
    }
}
/* ==========================================================
   HARD FIX: FLAT TOP NAVBAR ON ALL MOBILE PAGES
   Bottom navbar remains rounded.
   This targets both header systems:
   1) production .lc-mobile-* header
   2) older normal-page .site-header mobile header
   ========================================================== */

@media only screen and (max-width: 991px) {
    /* Top navbar: all page types */
    html body.site-body > header.site-header,
    html body.site-body header.site-header,
    html body.site-body .site-header,
    html body:not(.chat-body) > header.site-header,
    html body:not(.chat-body) header.site-header,
    html body:not(.chat-body) .site-header,
    html body.chat-body > header.site-header,
    html body.chat-body header.site-header,
    html body.chat-body .site-header,
    header.site-header.site-header,
    .site-header.site-header {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        clip-path: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        overflow: visible !important;
    }

    /* Top navbar pseudo layers, in case an old rounded mask/shadow is used */
    html body.site-body > header.site-header::before,
    html body.site-body > header.site-header::after,
    html body.site-body header.site-header::before,
    html body.site-body header.site-header::after,
    html body.site-body .site-header::before,
    html body.site-body .site-header::after,
    html body:not(.chat-body) > header.site-header::before,
    html body:not(.chat-body) > header.site-header::after,
    html body:not(.chat-body) header.site-header::before,
    html body:not(.chat-body) header.site-header::after,
    html body:not(.chat-body) .site-header::before,
    html body:not(.chat-body) .site-header::after,
    html body.chat-body > header.site-header::before,
    html body.chat-body > header.site-header::after,
    html body.chat-body header.site-header::before,
    html body.chat-body header.site-header::after,
    html body.chat-body .site-header::before,
    html body.chat-body .site-header::after {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        clip-path: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    /* Keep bottom nav rounded: production bottom nav */
    html body .lc-mobile-bottom-nav,
    html body .lc-mobile-bottom-nav.lc-mobile-bottom-nav {
        border-radius: 26px !important;
        border-top-left-radius: 26px !important;
        border-top-right-radius: 26px !important;
        border-bottom-left-radius: 26px !important;
        border-bottom-right-radius: 26px !important;
        overflow: visible !important;
    }

    html body .lc-mobile-nav-link,
    html body .lc-mobile-nav-link.lc-mobile-nav-link {
        border-radius: 16px !important;
    }

    /* Keep bottom nav rounded if old CSS still uses .nav-links as bottom nav */
    html body .site-header .nav-links,
    html body header.site-header .nav-links,
    html body .mobile-bottom-nav {
        border-radius: 26px !important;
        border-top-left-radius: 26px !important;
        border-top-right-radius: 26px !important;
        border-bottom-left-radius: 26px !important;
        border-bottom-right-radius: 26px !important;
        overflow: visible !important;
    }

    html body .site-header .nav-action-link,
    html body header.site-header .nav-action-link,
    html body .mobile-bottom-link {
        border-radius: 16px !important;
    }
}

@media only screen and (max-width: 575px) {
    html body.site-body > header.site-header,
    html body.site-body header.site-header,
    html body.site-body .site-header,
    html body:not(.chat-body) > header.site-header,
    html body:not(.chat-body) header.site-header,
    html body:not(.chat-body) .site-header,
    html body.chat-body > header.site-header,
    html body.chat-body header.site-header,
    html body.chat-body .site-header,
    header.site-header.site-header,
    .site-header.site-header {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        clip-path: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    html body .lc-mobile-bottom-nav,
    html body .lc-mobile-bottom-nav.lc-mobile-bottom-nav,
    html body .site-header .nav-links,
    html body header.site-header .nav-links,
    html body .mobile-bottom-nav {
        border-radius: 24px !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
    }

    html body .lc-mobile-nav-link,
    html body .site-header .nav-action-link,
    html body header.site-header .nav-action-link,
    html body .mobile-bottom-link {
        border-radius: 14px !important;
    }
}
/* ==========================================================
   EXACT FIX FOR THIS HEADER STRUCTURE
   Target:
   <header class="site-header"> ... <nav class="nav-links"> ... </nav>
   Goal:
   - top header/navbar is flat on every mobile page
   - bottom nav stays rounded only when it is fixed to bottom
   ========================================================== */

@media only screen and (max-width: 991px) {
    /* This is the top navbar you pasted */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > header.site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) header.site-header {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        overflow: visible !important;
    }

    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > header.site-header::before,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) header.site-header::before,
    header.site-header::after,
    .site-header::before,
    .site-header::after {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* The desktop nav inside this header should NOT create a rounded top bar on mobile */
    header.site-header > nav.nav-links,
    .site-header > .nav-links {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    /*
      If your current CSS is still using .nav-links as the mobile bottom bar,
      keep only its bottom bar roundness. This prevents top corners from looking rounded
      when it visually sits near the top due to older CSS.
    */
    @supports (bottom: 1px) {
        header.site-header > nav.nav-links,
        .site-header > .nav-links {
            border-radius: 24px !important;
        }
    }

    /* Production separate bottom nav remains rounded */
    .lc-mobile-bottom-nav,
    .mobile-bottom-nav {
        border-radius: 24px !important;
    }
}

/* Stronger phone override */
@media only screen and (max-width: 575px) {
    body > header.site-header,
    header.site-header,
    .site-header,
    body > header.site-header::before,
    body > header.site-header::after,
    header.site-header::before,
    header.site-header::after,
    .site-header::before,
    .site-header::after {
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}
/* ==========================================================
   LINQCAMPUS FINAL MOBILE NAV SYSTEM - PRODUCTION OVERRIDE
   IMPORTANT:
   Your base.html now has TWO nav systems:
   1. <header class="site-header"> desktop/top header
   2. <nav class="lc-mobile-bottom-nav"> mobile bottom nav
   So on mobile we MUST hide only header > .nav-links.
   This removes the old duplicate rounded mobile navbar from normal pages.
   ========================================================== */

@media only screen and (max-width: 991px) {
    :root {
        --lc-mobile-topbar-h: 76px;
        --lc-mobile-bottom-nav-h: 92px;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        padding-top: var(--lc-mobile-topbar-h) !important;
        padding-bottom: var(--lc-mobile-bottom-nav-h) !important;
    }

    /* TOP NAVBAR: flat, fixed, consistent on ALL pages */
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) .site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) > header.site-header,
    body:not(.story-full-body):not(.onboard-body):not(.chat-body) header.site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: var(--lc-mobile-topbar-h) !important;
        min-height: var(--lc-mobile-topbar-h) !important;
        max-height: var(--lc-mobile-topbar-h) !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
        background: rgba(15, 23, 42, 0.98) !important;

        border: 0 !important;
        border-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;

        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;

        overflow: visible !important;
        z-index: 9000 !important;
    }

    body > header.site-header::before,
    body > header.site-header::after,
    header.site-header::before,
    header.site-header::after,
    .site-header::before,
    .site-header::after {
        border-radius: 0 !important;
        clip-path: none !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    /* Logo: left, vertically centered */
    header.site-header > .logo,
    .site-header > .logo {
        position: absolute !important;
        left: 14px !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;

        margin-top: auto !important;
        margin-bottom: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
        z-index: 9001 !important;
    }

    header.site-header > .logo .logo-img,
    .site-header > .logo .logo-img {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;

        display: block !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    header.site-header > .logo .logo-text,
    .site-header > .logo .logo-text {
        display: none !important;
    }

    /* CRITICAL FIX:
       Hide the old desktop nav inside the top header on mobile.
       This is what was creating the rounded navbar on normal pages. */
    header.site-header > nav.nav-links,
    .site-header > nav.nav-links,
    header.site-header > .nav-links,
    .site-header > .nav-links {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        position: static !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    /* Top-right profile account */
    header.site-header > .lc-mobile-account,
    .site-header > .lc-mobile-account {
        display: block !important;
        position: absolute !important;
        right: 14px !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;

        width: 68px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        margin-top: auto !important;
        margin-bottom: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        z-index: 9100 !important;
    }

    header.site-header .lc-mobile-account-btn,
    .site-header .lc-mobile-account-btn {
        width: 68px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        margin: 0 !important;
        padding: 0 8px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        border-radius: 0 !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border: 1px solid rgba(255, 255, 255, 0.13) !important;
        list-style: none !important;
        cursor: pointer !important;
    }

    header.site-header .lc-mobile-account-btn::-webkit-details-marker,
    .site-header .lc-mobile-account-btn::-webkit-details-marker {
        display: none !important;
    }

    header.site-header .lc-mobile-account-avatar,
    header.site-header .lc-mobile-account-avatar img,
    .site-header .lc-mobile-account-avatar,
    .site-header .lc-mobile-account-avatar img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    header.site-header .lc-mobile-account-caret,
    .site-header .lc-mobile-account-caret {
        color: #ffffff !important;
        font-size: 12px !important;
        opacity: 0.85 !important;
    }

    header.site-header .lc-mobile-account-menu,
    .site-header .lc-mobile-account-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        width: 178px !important;
        min-width: 178px !important;
        padding: 8px !important;
        background: #ffffff !important;
        color: #172033 !important;
        border: 1px solid #dbe4fb !important;
        border-radius: 0 !important;
        box-shadow: 0 22px 50px rgba(15, 23, 42, 0.24) !important;
        z-index: 9200 !important;
    }

    /* REAL mobile bottom nav: keep rounded, app-style */
    body > nav.lc-mobile-bottom-nav,
    nav.lc-mobile-bottom-nav,
    .lc-mobile-bottom-nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;

        width: auto !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;

        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: 8px !important;

        padding: 10px 12px !important;
        margin: 0 !important;

        background: rgba(15, 23, 42, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 26px !important;
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.34) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;

        overflow: visible !important;
        z-index: 8999 !important;
    }

    .lc-mobile-nav-link {
        position: relative !important;
        height: 50px !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #ffffff !important;
        font-size: 21px !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    .lc-mobile-nav-link:hover,
    .lc-mobile-nav-link:focus-visible,
    .lc-mobile-nav-link:active {
        background: rgba(255, 255, 255, 0.10) !important;
    }

    /* Page spacing for normal pages */
    body:not(.chat-body) .page-wrap {
        margin-top: 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 24px !important;
    }

    /* Chat keeps its repaired layout */
    body.chat-body {
        padding-top: var(--lc-mobile-topbar-h) !important;
        padding-bottom: var(--lc-mobile-bottom-nav-h) !important;
    }
}

@media only screen and (max-width: 575px) {
    :root {
        --lc-mobile-topbar-h: 72px;
        --lc-mobile-bottom-nav-h: 88px;
    }

    header.site-header > .logo,
    .site-header > .logo {
        left: 12px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }

    header.site-header > .logo .logo-img,
    .site-header > .logo .logo-img {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        max-width: 46px !important;
        max-height: 46px !important;
    }

    header.site-header > .lc-mobile-account,
    .site-header > .lc-mobile-account {
        right: 12px !important;
    }

    body > nav.lc-mobile-bottom-nav,
    nav.lc-mobile-bottom-nav,
    .lc-mobile-bottom-nav {
        left: 9px !important;
        right: 9px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        padding: 8px 10px !important;
        border-radius: 24px !important;
    }

    .lc-mobile-nav-link {
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 14px !important;
        font-size: 20px !important;
    }
}
/* ==========================================================
   FOOTER RESPONSIVE VISIBILITY
   Mobile/tablet: hide footer completely
   Desktop: footer remains visible as per normal desktop CSS
   ========================================================== */

@media only screen and (max-width: 991px) {
    footer.site-footer,
    .site-footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

@media only screen and (min-width: 992px) {
    body:not(.chat-body) footer.site-footer,
    body:not(.chat-body) .site-footer {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}
/* ==========================================================
   GUEST MOBILE BOTTOM NAV
   Not logged in layout:
   Home icon | Join as Student button | Login icon
   ========================================================== */

@media only screen and (max-width: 991px) {
    .site-header .nav-feature-link {
        display: none !important;
    }

    .guest-feature-top-link {
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 100002;
        padding: 0 12px;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: #0f172a !important;
        font-size: 12px;
        font-weight: 900;
        text-decoration: none;
    }

    .guest-feature-top-link i {
        color: #2563eb;
        font-size: 13px;
    }

    body > nav.lc-mobile-bottom-nav.lc-mobile-bottom-nav-guest,
    nav.lc-mobile-bottom-nav.lc-mobile-bottom-nav-guest,
    .lc-mobile-bottom-nav.lc-mobile-bottom-nav-guest {
        grid-template-columns: 58px minmax(0, 1fr) 58px !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .lc-mobile-bottom-nav-guest .lc-mobile-nav-link {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 16px !important;
        font-size: 21px !important;
    }

    .lc-mobile-nav-join {
        height: 50px !important;
        min-height: 50px !important;
        width: 100% !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        padding: 0 14px !important;
        border-radius: 16px !important;

        background: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16) !important;

        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .lc-mobile-nav-join i {
        font-size: 15px !important;
        line-height: 1 !important;
    }

    .lc-mobile-nav-join:active,
    .lc-mobile-nav-join:hover,
    .lc-mobile-nav-join:focus-visible {
        background: #f8fafc !important;
        color: #0f172a !important;
        transform: none !important;
    }
}

@media only screen and (max-width: 380px) {
    .guest-feature-top-link {
        right: 10px;
        height: 36px;
        padding: 0 10px;
        font-size: 11px;
    }

    body > nav.lc-mobile-bottom-nav.lc-mobile-bottom-nav-guest,
    nav.lc-mobile-bottom-nav.lc-mobile-bottom-nav-guest,
    .lc-mobile-bottom-nav.lc-mobile-bottom-nav-guest {
        grid-template-columns: 50px minmax(0, 1fr) 50px !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    .lc-mobile-nav-join {
        font-size: 12px !important;
        padding: 0 10px !important;
        gap: 6px !important;
    }

    .lc-mobile-nav-join i {
        font-size: 14px !important;
    }
}

/* Feature page: squared brutalist edges, no thin borders */
.features-page-body .features-kicker,
.features-page-body .features-vibe-row span,
.features-page-body .features-primary-btn,
.features-page-body .features-secondary-btn,
.features-page-body .features-hero-panel,
.features-page-body .features-app-topbar span,
.features-page-body .features-app-topbar i,
.features-page-body .features-feed-card,
.features-page-body .features-post-chip,
.features-page-body .features-stack-card,
.features-page-body .features-product-card,
.features-page-body .features-product-icon,
.features-page-body .features-mini-tile,
.features-page-body .features-mini-tile i,
.features-page-body .features-stat-row div,
.features-page-body .feature-card,
.features-page-body .feature-card i,
.features-page-body .feature-card-tag,
.features-page-body .features-audience-card,
.features-page-body .features-audience-card i,
.features-page-body .features-trust-section,
.features-page-body .features-trust-list div,
.features-page-body .features-trust-list i,
.features-page-body .features-final-cta,
.features-page-body .features-band span {
    border-radius: 0 !important;
}

.features-page-body .features-kicker,
.features-page-body .features-vibe-row span,
.features-page-body .features-primary-btn,
.features-page-body .features-secondary-btn,
.features-page-body .features-hero-panel,
.features-page-body .features-app-topbar i,
.features-page-body .features-feed-card,
.features-page-body .features-post-chip,
.features-page-body .features-stack-card,
.features-page-body .features-product-card,
.features-page-body .features-product-icon,
.features-page-body .features-mini-tile,
.features-page-body .features-mini-tile i,
.features-page-body .features-stat-row div,
.features-page-body .feature-card,
.features-page-body .feature-card i,
.features-page-body .feature-card-tag,
.features-page-body .features-audience-card,
.features-page-body .features-audience-card i,
.features-page-body .features-trust-section,
.features-page-body .features-trust-list div,
.features-page-body .features-trust-list i,
.features-page-body .features-final-cta {
    border-color: #111827 !important;
    border-width: 3px !important;
}

.features-page-body .features-band,
.features-page-body .features-band span {
    border-color: #111827 !important;
    border-width: 4px !important;
}

.features-page-body .nav-feature-link {
    border-radius: 0 !important;
    border: 3px solid #ffffff !important;
}

.features-page-body .feature-card::after {
    border-right-width: 5px !important;
    border-bottom-width: 5px !important;
}

@media only screen and (max-width: 991px) {
    .guest-feature-top-link {
        border-radius: 0 !important;
        border: 3px solid #111827 !important;
        box-shadow: 4px 4px 0 #111827 !important;
    }
}
/* ==========================================================
   ONBOARD / SIGNUP MOBILE FIX
   Hide left illustration panel on mobile and show only form.
   Applies to pages with body_class: onboard-body
   ========================================================== */

@media only screen and (max-width: 991px) {
    body.onboard-body {
        overflow-x: hidden !important;
    }

    body.onboard-body .page-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 108px !important;
    }

    body.onboard-body .onboard-shell {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
    }

    body.onboard-body aside.onboard-left,
    body.onboard-body .onboard-left {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.onboard-body .onboard-right {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    body.onboard-body .onboard-form-wrap {
        width: 100% !important;
        max-width: 560px !important;
        margin: 0 auto !important;
        padding: 20px 16px !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    }

    body.onboard-body .onboard-form-header h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    body.onboard-body .sg-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    body.onboard-body .onboard-submit {
        width: 100% !important;
        min-height: 46px !important;
    }
}

@media only screen and (max-width: 575px) {
    body.onboard-body .page-wrap {
        margin-top: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body.onboard-body .onboard-form-wrap {
        padding: 18px 14px !important;
        border-radius: 0 !important;
    }

    body.onboard-body .onboard-form-header h1 {
        font-size: 22px !important;
    }
}

/* ==========================================================
   HOME FEED SCROLL REPAIR
   Keep the old native page-scroll feel after the later mobile
   header/bottom-nav overrides. Scoped to the home feed only.
   ========================================================== */

body.home-feed-body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important;
    touch-action: pan-y;
}

body.home-feed-body .page-wrap,
body.home-feed-body .social-shell,
body.home-feed-body .social-center,
body.home-feed-body .activity-list,
body.home-feed-body .social-feed-list {
    overflow: visible !important;
}

body.home-feed-body .social-center {
    min-width: 0;
}

body.home-feed-body .stories-rail {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: none !important;
}

body.home-feed-body .social-post-card,
body.home-feed-body .feed-ad-card,
body.home-feed-body .quick-link-card,
body.home-feed-body .rail-explore-card,
body.home-feed-body .sidebar-company-row {
    will-change: auto !important;
}

@supports (content-visibility: auto) {
    body.home-feed-body .social-post-card,
    body.home-feed-body .feed-ad-card {
        content-visibility: auto;
        contain-intrinsic-size: 420px;
    }
}

body.home-feed-body .fb-feed-actions {
    min-width: 0;
}

body.home-feed-body .guide-card {
    min-width: 0;
}

body.home-feed-body .social-quick-grid {
    min-width: 0;
}

@media only screen and (max-width: 991px) {
    body.home-feed-body .page-wrap {
        overflow: visible !important;
        padding-bottom: calc(var(--lc-mobile-bottom-nav-h, 92px) + 24px) !important;
    }

    body.home-feed-body .social-left,
    body.home-feed-body .social-right {
        position: static !important;
        top: auto !important;
    }
}

@media only screen and (min-width: 992px) {
    body.home-feed-body {
        --home-feed-header-h: 72px;
        --home-feed-footer-h: 46px;
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden !important;
        padding-bottom: var(--home-feed-footer-h) !important;
        touch-action: auto;
    }

    body.home-feed-body .site-header {
        flex: 0 0 auto;
        position: relative !important;
        top: auto !important;
        z-index: 20;
    }

    body.home-feed-body .page-wrap {
        flex: 0 0 auto;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vh - var(--home-feed-header-h) - var(--home-feed-footer-h) - 32px) !important;
        min-height: 0 !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
        padding-left: clamp(16px, 1.6vw, 30px) !important;
        padding-right: clamp(16px, 1.6vw, 30px) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        overflow: hidden !important;
    }

    body.home-feed-body .stories-strip {
        flex: 0 0 auto;
        margin-bottom: 0 !important;
    }

    body.home-feed-body .social-shell {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: minmax(220px, 300px) minmax(0, 560px) minmax(220px, 300px) !important;
        justify-content: center !important;
        gap: 14px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        padding-right: 0 !important;
    }

    body.home-feed-body .social-column,
    body.home-feed-body .social-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.home-feed-body .social-left,
    body.home-feed-body .social-right {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    body.home-feed-body .social-right {
        padding: 0 0 12px 0 !important;
        margin-right: 0 !important;
    }

    body.home-feed-body .social-right .social-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }

    body.home-feed-body .social-right p,
    body.home-feed-body .right-summary-card p,
    body.home-feed-body .sidebar-company-row,
    body.home-feed-body .sidebar-company-info,
    body.home-feed-body .sidebar-company-info strong,
    body.home-feed-body .sidebar-company-info span,
    body.home-feed-body .sidebar-view-all {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.home-feed-body .right-summary-card p {
        overflow-wrap: anywhere !important;
    }

    body.home-feed-body .sidebar-view-all {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.home-feed-body .social-left::-webkit-scrollbar,
    body.home-feed-body .social-right::-webkit-scrollbar {
        display: none;
    }

    body.home-feed-body .social-center {
        width: 100% !important;
        max-width: 560px !important;
        justify-self: center !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scroll-behavior: auto !important;
        padding-right: 4px;
    }

    body.home-feed-body .social-center .activity-list,
    body.home-feed-body .social-center .social-feed-list {
        overflow: visible !important;
    }

    /* Compact footer bar — auth users on home feed only */
    body.home-feed-body.auth-compact-footer-body .site-footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: var(--home-feed-footer-h) !important;
        min-height: var(--home-feed-footer-h) !important;
        max-height: var(--home-feed-footer-h) !important;
        margin: 0 !important;
        overflow: hidden !important;
        z-index: 30;
    }

    body.home-feed-body.auth-compact-footer-body .site-footer-inner,
    body.home-feed-body.auth-compact-footer-body .site-footer::after {
        display: none !important;
    }

    body.home-feed-body.auth-compact-footer-body .site-footer-bottom {
        height: var(--home-feed-footer-h) !important;
        min-height: var(--home-feed-footer-h) !important;
        padding: 0 10% !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Guest / non-auth: locked 3-col viewport, full footer below (page scrolls to reach it) */
    body.home-feed-body:not(.auth-compact-footer-body) {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 0 !important;
    }

    body.home-feed-body:not(.auth-compact-footer-body) .page-wrap {
        /* No compact footer offset — use full remaining viewport height */
        height: calc(100vh - var(--home-feed-header-h) - 32px) !important;
    }

    /* Restore full footer for non-auth */
    body.home-feed-body:not(.auth-compact-footer-body) .site-footer {
        position: static !important;
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }

    body.home-feed-body:not(.auth-compact-footer-body) .site-footer-inner {
        display: flex !important;
    }

    body.home-feed-body:not(.auth-compact-footer-body) .site-footer::after {
        display: block !important;
    }
}

@media only screen and (min-width: 992px) {
    html body header.site-header .nav-action-link {
        background: transparent !important;
        border-color: transparent !important;
    }

    html body header.site-header .nav-action-link:hover,
    html body header.site-header .nav-action-link:active {
        background: rgba(96, 165, 250, 0.16) !important;
        border-color: rgba(147, 197, 253, 0.24) !important;
    }
}

@media only screen and (min-width: 992px) {
    body.auth-compact-footer-body:not(.home-feed-body),
    body.compact-footer-body:not(.home-feed-body) {
        --compact-page-footer-h: 46px;
        padding-bottom: var(--compact-page-footer-h) !important;
    }

    body.auth-compact-footer-body:not(.home-feed-body) .page-wrap,
    body.compact-footer-body:not(.home-feed-body) .page-wrap {
        padding-bottom: 24px !important;
    }

    body.auth-compact-footer-body:not(.home-feed-body):not(.story-full-body) .site-footer,
    body.compact-footer-body:not(.home-feed-body):not(.story-full-body) .site-footer {
        display: block !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: var(--compact-page-footer-h) !important;
        min-height: var(--compact-page-footer-h) !important;
        max-height: var(--compact-page-footer-h) !important;
        margin: 0 !important;
        overflow: hidden !important;
        z-index: 30;
    }

    body.auth-compact-footer-body:not(.home-feed-body) .site-footer-inner,
    body.auth-compact-footer-body:not(.home-feed-body) .site-footer::after,
    body.compact-footer-body:not(.home-feed-body) .site-footer-inner,
    body.compact-footer-body:not(.home-feed-body) .site-footer::after {
        display: none !important;
    }

    body.auth-compact-footer-body:not(.home-feed-body) .site-footer-bottom,
    body.compact-footer-body:not(.home-feed-body) .site-footer-bottom {
        height: var(--compact-page-footer-h) !important;
        min-height: var(--compact-page-footer-h) !important;
        padding: 0 10% !important;
        display: flex !important;
        align-items: center !important;
    }

    body.chat-body.auth-compact-footer-body {
        padding-bottom: 0 !important;
    }

    body.chat-body.auth-compact-footer-body .page-wrap {
        flex: 0 1 auto !important;
        height: calc(100vh - 72px - var(--compact-page-footer-h) - 32px) !important;
        min-height: 0 !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
        padding-bottom: 0 !important;
    }
}

.pwa-install-dialog[hidden] {
    display: none !important;
}

.pwa-install-dialog {
    position: fixed;
    inset: 0;
    z-index: 250000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.42);
}

.pwa-install-card {
    width: min(100%, 420px);
    background: #ffffff;
    color: #172033;
    border: 1px solid #dbe4fb;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    padding: 18px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: start;
}

.pwa-install-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: block;
}

.pwa-install-copy h2 {
    margin: 2px 0 4px;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
}

.pwa-install-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;
}

.pwa-install-fallback {
    margin-top: 8px !important;
    color: #334155 !important;
    font-weight: 700;
}

.pwa-install-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pwa-install-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-top: 4px;
}

.pwa-install-primary,
.pwa-install-secondary {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}

.pwa-install-primary {
    border: 0;
    background: #0f172a;
    color: #ffffff;
}

.pwa-install-secondary {
    border: 1px solid #dbe4fb;
    background: #ffffff;
    color: #475569;
    padding: 0 16px;
}

@media only screen and (min-width: 768px) {
    .pwa-install-dialog {
        display: none !important;
    }
}

/* ── Poll feature ─────────────────────────────── */
.poll-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 4px;
}

.poll-option-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    cursor: pointer;
    text-align: left;
    gap: 8px;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
}

.poll-option-btn:hover:not(:disabled) {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.poll-option-btn.is-voted {
    border-color: #3b82f6;
    background: #eff6ff;
}

.poll-option-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}

.poll-option-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.09);
    border-radius: 10px;
    transition: width 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.poll-option-btn.is-voted .poll-option-bar {
    background: rgba(59, 130, 246, 0.16);
}

.poll-option-text {
    position: relative;
    z-index: 1;
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
}

.poll-option-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b;
    flex-shrink: 0;
}

.poll-option-pct {
    font-weight: 700;
    color: #3b82f6;
    min-width: 32px;
    text-align: right;
}

.poll-option-count {
    color: #94a3b8;
    font-size: 11px;
}

.poll-voted-tick {
    position: relative;
    z-index: 1;
    color: #3b82f6;
    font-size: 11px;
    flex-shrink: 0;
}

.poll-option-readonly {
    cursor: default;
    pointer-events: none;
}

.poll-footer {
    font-size: 12px;
    color: #94a3b8;
    padding: 2px 2px 0;
}

.poll-login-prompt a {
    color: #3b82f6;
    font-weight: 500;
}

/* Poll composer builder */
.composer-poll-builder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 8px;
}

.poll-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #f8fafc;
    color: #0f172a;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.poll-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
}

/* ── OTP / Email Verify page ─────────────────────────────────────────────── */
.auth-shell {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.auth-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(15,23,42,.1);
    padding: 40px 36px;
    width: 100%;
    text-align: center;
}

.auth-logo { margin-bottom: 20px; }

.auth-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
}

.auth-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 28px;
    line-height: 1.6;
}

.otp-input-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 24px;
}

.otp-digit {
    width: 48px;
    height: 56px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    color: #0f172a;
    background: #f8fafc;
    transition: border-color 0.15s;
    outline: none;
}

.otp-digit:focus {
    border-color: #0f172a;
    background: #fff;
}

.auth-submit-btn {
    width: 100%;
    padding: 14px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.auth-submit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.auth-alt-row {
    margin-top: 20px;
    font-size: 14px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.link-btn {
    background: none;
    border: none;
    color: #0f172a;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.form-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
    text-align: left;
}
.form-alert-error   { background: #fee2e2; color: #991b1b; }
.form-alert-success { background: #dcfce7; color: #166534; }
.form-alert-warning { background: #fef3c7; color: #92400e; }

/* ── Notification settings tab ───────────────────────────────────────────── */
.notif-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}
.notif-pref-label { font-size: 14px; color: #0f172a; }
.notif-pref-label span { display: block; font-size: 12px; color: #94a3b8; margin-top: 2px; }

/* ── WhatsApp Invite Card ────────────────────────────────────────────────── */
.circle-side-stack {
    display: flex;
    flex-direction: column;
}

.circle-side-stack > .circle-panel:first-child {
    border-radius: 0;
    border-bottom: none;
    padding-bottom: 14px;
}

.circle-side-stack > .circle-panel:last-child {
    border-radius: 0;
}

/* Horizontal invite row inside the top card */
.invite-wa-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.invite-wa-row-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #f0fdf4;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invite-wa-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invite-wa-row-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-wa-row-sub {
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-wa-row-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    background: #25D366;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background 0.15s;
    white-space: nowrap;
}

.invite-wa-row-btn:hover {
    background: #1ebe5a;
}

@media (max-width: 480px) {
    .invite-wa-row {
        gap: 8px;
    }
    .invite-wa-row-body {
        flex: 1 1 120px;
    }
    .invite-wa-row-btn {
        flex: 1 1 100%;
        justify-content: center;
        padding: 9px 13px;
    }
}

.invite-wa-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.invite-wa-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}

.invite-wa-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 14px;
}

.invite-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    background: #25D366;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background 0.15s, transform 0.1s;
}

.invite-wa-btn:hover {
    background: #1ebe5a;
    transform: translateY(-1px);
}

.invite-wa-btn:active {
    transform: translateY(0);
}

/* ── Verified badge ──────────────────────────────────────────────────────── */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: 20px;
    padding: 3px 10px;
    vertical-align: middle;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.verified-badge i { color: #fff; font-size: 11px; }

.get-verified-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    text-decoration: none;
    vertical-align: middle;
    margin-left: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.get-verified-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.get-verified-btn i {
    font-size: 11px;
}

.verification-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 20px;
    padding: 3px 10px;
    text-decoration: none;
    vertical-align: middle;
    margin-left: 6px;
    transition: all 0.3s ease;
}

.verification-pending-badge:hover {
    background: #fde68a;
}

.verification-pending-badge i {
    color: #f59e0b;
    font-size: 11px;
}

.verified-badge-mini {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    vertical-align: middle;
    font-size: 13px;
    color: #2563eb;
}

/* ── Cooldown banner ─────────────────────────────────────────────────────── */
.cooldown-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #92400e;
}

.cooldown-banner i {
    font-size: 20px;
    color: #f59e0b;
    margin-top: 2px;
    flex-shrink: 0;
}

.cooldown-banner strong { display: block; font-size: 14px; margin-bottom: 3px; }
.cooldown-banner span   { line-height: 1.5; color: #78350f; }

/* ── Muted account page ──────────────────────────────────────────────────── */
.mute-icon { text-align: center; margin-bottom: 16px; }

.mute-until-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 16px 0;
}

.mute-until-label  { font-size: 11px; color: #92400e; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.mute-until-date   { font-size: 16px; font-weight: 800; color: #78350f; margin-top: 4px; }

.mute-reason-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 16px;
    text-align: left;
    margin-bottom: 8px;
}

.mute-reason-label { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.mute-reason-text  { font-size: 14px; color: #334155; margin: 6px 0 0; line-height: 1.6; }

/* ── Report user button & modal ──────────────────────────────────────────── */
.profile-report-btn {
    background: none;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 10px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    transition: border-color .15s, color .15s;
    line-height: 1;
}

.profile-report-btn:hover { border-color: #fca5a5; color: #ef4444; }

.report-user-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.report-user-modal[hidden],
.profile-more-dropdown[hidden] {
    display: none !important;
}

.circle-accept-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    padding: 16px;
    backdrop-filter: blur(2px);
}
.circle-accept-modal-overlay[hidden] { display: none !important; }

.circle-accept-modal-card {
    background: #fff;
    border-radius: 18px;
    padding: 32px 28px 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 16px 48px rgba(15,23,42,0.18);
}
.circle-accept-modal-icon {
    font-size: 28px;
    color: #6366f1;
    margin-bottom: 14px;
}
.circle-accept-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 10px;
}
.circle-accept-modal-body {
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 24px;
}
.circle-accept-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.report-user-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
}

.report-user-card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 18px;
    padding: 28px 26px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px rgba(15,23,42,.2);
}

.report-user-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.report-user-head h2 { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0; }

.report-user-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
}

.report-field { margin-bottom: 14px; }
.report-field label { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }

.report-select, .report-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    background: #f8fafc;
    box-sizing: border-box;
}

.report-select:focus, .report-textarea:focus { outline: none; border-color: #0f172a; background: #fff; }

.report-user-submit {
    width: 100%;
    padding: 12px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
}

.report-feedback { padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 12px; }
.report-feedback-ok  { background: #dcfce7; color: #166534; }
.report-feedback-err { background: #fee2e2; color: #991b1b; }

/* ── Invite code section (college dashboard) ─────────────────────────────── */
.cd-verified-count { color: #16a34a; font-weight: 700; }

.invite-code-select {
    flex: 1;
    padding: 8px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    background: #f8fafc;
    color: #0f172a;
}

.invite-code-gen-btn {
    padding: 8px 14px;
    background: #0f172a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.invite-code-list { display: flex; flex-direction: column; gap: 8px; }

.invite-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.invite-code-row-inactive { opacity: .5; }

.invite-code-badge {
    font-family: monospace;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #0f172a;
    background: #dbeafe;
    border-radius: 6px;
    padding: 3px 8px;
    flex-shrink: 0;
}

.invite-code-meta { flex: 1; font-size: 12px; color: #64748b; display: flex; flex-direction: column; gap: 1px; }

.invite-code-deact-btn {
    background: none;
    border: 1px solid #fca5a5;
    color: #ef4444;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 12px;
    cursor: pointer;
}

.invite-code-dead { font-size: 11px; color: #94a3b8; }

/* ── Signup invite code row ──────────────────────────────────────────────── */
.sg-invite-code-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.sg-invite-code-icon { font-size: 20px; color: #16a34a; margin-top: 2px; flex-shrink: 0; }
.sg-invite-code-body { flex: 1; }
.sg-invite-code-body label { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.sg-invite-code-body input { width: 100%; padding: 9px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 14px; background: #fff; box-sizing: border-box; }
.sg-invite-code-input {
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.sg-invite-code-input::placeholder {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 14px;
    color: #9aa4b2;
}
.sg-invite-code-hint { font-size: 12px; color: #64748b; margin: 6px 0 0; line-height: 1.5; }
.sg-college-request-toggle {
    margin: -2px 0 12px;
    padding: 12px 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}
.sg-college-request-label {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    cursor: pointer;
    width: 100%;
}
.sg-college-request-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    flex-shrink: 0;
    accent-color: #2563eb;
}
.sg-college-request-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.sg-college-request-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
}
.sg-college-request-note {
    display: block;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
}
.sg-college-request-fields {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

/* ── Admin user report styles ────────────────────────────────────────────── */
.report-reason-tag {
    display: inline-block;
    padding: 2px 10px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.admin-action-btn {
    display: inline-block;
    padding: 5px 10px;
    background: #0f172a;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.admin-action-muted { background: #94a3b8; }
.admin-action-danger { background: #dc2626; }

/* ── Profile ⋯ more-options menu ─────────────────────────────────────────── */
.profile-more-menu {
    position: relative;
}

.profile-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, border-color .15s;
}

.profile-more-btn:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.4);
}

.profile-more-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    width: 210px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #dbe4fb;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15,23,42,.14);
}

.profile-more-item {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}

.profile-more-item:hover { background: #f8fafc; }
.profile-more-item-danger { color: #dc2626; }
.profile-more-item-danger:hover { background: #fef2f2; }

/* ── Students directory header + view toggle ─────────────────────────────── */
.students-dir-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.students-dir-header-left { display: flex; flex-direction: column; gap: 2px; }

.students-dir-heading {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.students-dir-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.std-view-toggle {
    display: flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.std-view-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.std-view-btn.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(15,23,42,.1);
}

/* ── Grid view cards ─────────────────────────────────────────────────────── */
.students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr));
    gap: 12px;
}

.std-grid-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    gap: 4px;
    transition: box-shadow .15s, transform .15s;
    min-width: 0;
    overflow: hidden;
}

.std-grid-card:hover {
    box-shadow: 0 8px 24px rgba(15,23,42,.1);
    transform: translateY(-2px);
}

.std-grid-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #0f172a;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 8px;
}

.std-grid-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.std-grid-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    word-break: break-word;
    line-height: 1.35;
    gap: 4px;
}

.std-grid-handle {
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Likes dialog ────────────────────────────────────────────────────────── */
.feed-stat-likes-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s;
}

.feed-stat-likes-btn:hover {
    text-decoration-color: currentColor;
}

.likes-dialog {
    border: none;
    border-radius: 18px;
    padding: 0;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.18);
    background: #fff;
    overflow: hidden;
}

.likes-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
}

.likes-dialog-inner {
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.likes-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    flex-shrink: 0;
}

.likes-dialog-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 16px;
    padding: 4px 6px;
    border-radius: 8px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.likes-dialog-close:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.likes-dialog-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}

.likes-dialog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    gap: 12px;
    transition: background 0.12s;
}

.likes-dialog-row:hover {
    background: #f8fafc;
}

.likes-dialog-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.likes-dialog-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.likes-dialog-year {
    font-size: 12px;
    color: #64748b;
}

.likes-dialog-heart {
    color: #f43f5e;
    font-size: 15px;
    flex-shrink: 0;
}

.likes-dialog-loading,
.likes-dialog-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #94a3b8;
    font-size: 14px;
    list-style: none;
}

/* ── Lazy image: shimmer skeleton + fade-in ──────────────────────────────── */
@keyframes img-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.feed-image-wrap,
.post-slider-slide {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 1200px 100%;
    animation: img-shimmer 1.5s ease-in-out infinite;
}

.feed-image-wrap.img-wrap-loaded,
.post-slider-slide.img-wrap-loaded {
    background: transparent;
    animation: none;
}

.lazy-img {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.lazy-img.img-loaded {
    opacity: 1;
}


/* ========== MODERN FEATURES PAGE REDESIGN ========== */

body.features-page-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

.features-page-modern .page-wrap {
    max-width: none;
    padding: 0;
}

/* Hero Section */
.features-modern-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    overflow: hidden;
}

.features-hero-bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.features-floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    animation: float 20s infinite ease-in-out;
}

.features-shape-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.features-shape-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    top: 50%;
    right: -100px;
    animation-delay: 5s;
}

.features-shape-3 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    bottom: -100px;
    left: 50%;
    animation-delay: 10s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.features-hero-container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.features-hero-content {
    color: #ffffff;
}

.features-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 24px;
    animation: fadeInUp 0.6s ease-out;
}

.features-badge-pill i {
    color: #ffd700;
}

.features-hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 24px 0;
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.features-gradient-text {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.features-hero-description {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px 0;
    max-width: 580px;
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.features-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
    animation: fadeInUp 0.6s ease-out 0.6s both;
}

.features-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.features-stat-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
}

.features-stat-item i {
    font-size: 1.5rem;
    color: #ffd700;
}

.features-stat-item strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.features-stat-item span {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

.features-hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    animation: fadeInUp 0.6s ease-out 0.8s both;
}

.features-btn-primary,
.features-btn-secondary,
.features-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.features-btn-primary {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1a1a2e;
    border: none;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

.features-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.4);
}

.features-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.features-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.features-btn-outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.features-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

.features-btn-large {
    padding: 20px 40px;
    font-size: 1.1rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Phone Mockup */
.features-hero-visual {
    position: relative;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.features-phone-mockup {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.3));
}

.features-phone-screen {
    background: #ffffff;
    border-radius: 40px;
    padding: 20px;
    border: 12px solid #1a1a2e;
    position: relative;
    overflow: hidden;
}

.features-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    margin-bottom: 20px;
    color: #ffffff;
}

.features-screen-dots {
    display: flex;
    gap: 6px;
}

.features-screen-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.features-screen-header strong {
    font-size: 1rem;
    font-weight: 700;
}

.features-screen-header i {
    font-size: 1.1rem;
}

.features-screen-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.features-demo-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 20px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.features-card-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
}

.features-demo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.features-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.features-card-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border-radius: 20px;
}

.features-demo-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px 0;
}

.features-demo-card p {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.features-card-footer {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: #6c757d;
}

.features-card-footer span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.features-card-secondary {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    border-color: transparent;
}

.features-card-secondary h3 {
    color: #1a1a2e;
}

.features-card-secondary p {
    color: #2d3748;
}

/* Main Features Section */
.features-main-section {
    background: #ffffff;
    padding: 100px 24px;
}

.features-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.features-section-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.features-section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #1a1a2e;
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.features-section-header p {
    font-size: 1.15rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}

.features-grid-modern {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.features-card-modern {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    border: 2px solid #e9ecef;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.features-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.features-card-modern:hover::before {
    transform: scaleX(1);
}

.features-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.features-card-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.features-card-modern:hover .features-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.features-card-accent-1 .features-card-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

.features-card-accent-2 .features-card-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #ffffff;
}

.features-card-accent-3 .features-card-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #ffffff;
}

.features-card-accent-4 .features-card-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #ffffff;
}

.features-card-accent-5 .features-card-icon {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: #ffffff;
}

.features-card-accent-6 .features-card-icon {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    color: #ffffff;
}

.features-card-modern h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 16px 0;
}

.features-card-modern p {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.features-card-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.features-card-tags span {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    background: #f8f9fa;
    color: #667eea;
    border-radius: 20px;
    border: 1px solid #e9ecef;
}

/* Audience Section */
.features-audience-section-modern {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 100px 24px;
}

.features-audience-section-modern .features-section-header h2,
.features-audience-section-modern .features-section-header p {
    color: #ffffff;
}

.features-audience-grid-modern {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.features-audience-card-modern {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.4s ease;
}

.features-audience-card-modern:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-8px);
}

.features-audience-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.features-audience-students .features-audience-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
}

.features-audience-colleges .features-audience-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #ffffff;
}

.features-audience-teachers .features-audience-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #ffffff;
}

.features-audience-companies .features-audience-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #ffffff;
}

.features-audience-card-modern:hover .features-audience-icon {
    transform: scale(1.1) rotate(10deg);
}

.features-audience-card-modern h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20px 0;
}

.features-audience-card-modern ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.features-audience-card-modern li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

.features-audience-card-modern li i {
    color: #43e97b;
    margin-top: 4px;
    flex-shrink: 0;
}

.features-audience-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.features-audience-link:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateX(4px);
}

/* Trust Section */
.features-trust-section-modern {
    background: #f8f9fa;
    padding: 100px 24px;
}

.features-trust-content {
    max-width: 1280px;
    margin: 0 auto;
}

.features-trust-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.features-trust-text h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #1a1a2e;
    margin: 20px 0 16px 0;
    line-height: 1.2;
}

.features-trust-text p {
    font-size: 1.15rem;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
}

.features-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.features-trust-item {
    display: flex;
    gap: 20px;
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.features-trust-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: #667eea;
}

.features-trust-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ffffff;
    flex-shrink: 0;
}

.features-trust-item h4 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px 0;
}

.features-trust-item p {
    font-size: 0.95rem;
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
}

/* Final CTA Section */
.features-final-cta-modern {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 100px 24px;
    overflow: hidden;
}

.features-cta-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

.features-cta-content h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.features-cta-content p {
    font-size: 1.2rem;
    margin: 0 0 40px 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.features-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.features-cta-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.features-cta-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 15s infinite ease-in-out;
}

.features-cta-circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.features-cta-circle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: 10%;
    animation-delay: 5s;
}

.features-cta-circle-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    left: -50px;
    animation-delay: 10s;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .features-hero-visual {
        order: -1;
    }
    
    .features-phone-mockup {
        max-width: 320px;
    }
    
    .features-hero-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .features-modern-hero {
        min-height: auto;
        padding: 60px 0;
    }
    
    .features-hero-title {
        font-size: 2rem;
    }
    
    .features-hero-description {
        font-size: 1rem;
    }
    
    .features-hero-cta {
        flex-direction: column;
    }
    
    .features-btn-primary,
    .features-btn-secondary,
    .features-btn-outline {
        width: 100%;
        justify-content: center;
    }
    
    .features-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .features-audience-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .features-trust-grid {
        grid-template-columns: 1fr;
    }
    
    .features-main-section,
    .features-audience-section-modern,
    .features-trust-section-modern,
    .features-final-cta-modern {
        padding: 60px 24px;
    }
    
    .features-section-header h2,
    .features-trust-text h2,
    .features-cta-content h2 {
        font-size: 1.75rem;
    }
    
    .features-card-modern {
        padding: 30px;
    }
    
    .features-audience-card-modern {
        padding: 30px;
    }
    
    .features-trust-item {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .features-hero-container {
        padding: 0 16px;
    }
    
    .features-phone-mockup {
        max-width: 280px;
    }
    
    .features-phone-screen {
        padding: 16px;
        border-width: 8px;
        border-radius: 30px;
    }
    
    .features-demo-card {
        padding: 16px;
    }
    
    .features-card-modern {
        padding: 24px;
    }
    
    .features-audience-card-modern {
        padding: 24px;
    }
}


/* ========== PREMIUM FEATURES PAGE ========== */

body.features-premium {
    background: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "SF Pro Display", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.features-premium .page-wrap {
    max-width: none;
    padding: 0;
}

.feat-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Hero Section */
.feat-hero {
    padding: 120px 0 100px;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.feat-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: float-slow 20s infinite ease-in-out;
}

.feat-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: float-slow 25s infinite ease-in-out reverse;
}

@keyframes float-slow {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, 30px); }
}

.feat-hero-content {
    max-width: 640px;
    position: relative;
    z-index: 1;
}

.feat-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.feat-badge-dot {
    width: 8px;
    height: 8px;
    background: #fbbf24;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.feat-hero-title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin: 0 0 24px 0;
}

.feat-highlight {
    color: #fbbf24;
    position: relative;
    text-shadow: 0 2px 10px rgba(251, 191, 36, 0.3);
}

.feat-hero-subtitle {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 40px 0;
    font-weight: 400;
}

.feat-hero-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.feat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.01em;
    border: none;
    cursor: pointer;
}

.feat-btn-primary {
    background: #fbbf24;
    color: #111827;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4);
}

.feat-btn-primary:hover {
    background: #f59e0b;
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5);
    transform: translateY(-2px);
}

.feat-btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.feat-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.25);
}

.feat-btn-large {
    padding: 16px 32px;
    font-size: 16px;
}

.feat-hero-stats {
    display: flex;
    gap: 48px;
}

.feat-stat {
    display: flex;
    flex-direction: column;
}

.feat-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.feat-stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Hero Visual */
.feat-hero-visual {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
}

.feat-visual-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.feat-visual-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.feat-card-1 {
    animation: slideInRight 0.6s ease-out;
}

.feat-card-2 {
    animation: slideInRight 0.6s ease-out 0.2s both;
    margin-left: 40px;
}

.feat-card-3 {
    animation: slideInRight 0.6s ease-out 0.4s both;
    margin-left: 20px;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.feat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.feat-card-icon {
    font-size: 24px;
}

.feat-card-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    background: #eff6ff;
    color: #1e40af;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.feat-visual-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.feat-visual-card p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px 0;
}

.feat-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #9ca3af;
}

.feat-card-verified {
    color: #10b981;
    font-weight: 600;
}

.feat-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
}

.feat-profile-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.feat-profile-meta {
    font-size: 12px;
    color: #6b7280;
}

.feat-verified-badge {
    margin-left: auto;
    width: 20px;
    height: 20px;
    background: #10b981;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Section Styles */
.feat-section {
    padding: 100px 0;
}

.feat-section-dark {
    background: #111827;
}

.feat-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}

.feat-section-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.feat-section-dark .feat-section-label {
    color: #fbbf24;
}

.feat-section-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0 0 16px 0;
}

.feat-section-dark .feat-section-title {
    color: #ffffff;
}

.feat-section-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0;
}

.feat-section-dark .feat-section-desc {
    color: #9ca3af;
}

/* Features Grid */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.feat-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
}

.feat-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    transform: translateY(-4px);
}

.feat-card-icon-wrapper {
    width: 56px;
    height: 56px;
    background: #f9fafb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.feat-card:hover .feat-card-icon-wrapper {
    background: #000000;
}

.feat-card-icon {
    color: #000000;
    transition: all 0.3s ease;
}

.feat-card:hover .feat-card-icon {
    color: #fbbf24;
}

.feat-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}

.feat-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0;
}

/* Audience Grid */
.feat-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feat-audience-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
}

.feat-audience-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
}

.feat-audience-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #ffffff;
}

.feat-audience-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}

.feat-audience-card p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px 0;
}

.feat-audience-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.feat-audience-link:hover {
    color: #a5b4fc;
    transform: translateX(4px);
}

/* Trust Section */
.feat-trust-layout {
    max-width: 900px;
    margin: 0 auto;
}

.feat-trust-content {
    text-align: center;
}

.feat-trust-desc {
    font-size: 18px;
    line-height: 1.7;
    color: #6b7280;
    margin: 0 0 48px 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.feat-trust-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    text-align: left;
}

.feat-trust-item {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feat-trust-item:hover {
    background: #ffffff;
    border-color: #d1d5db;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.feat-trust-icon {
    flex-shrink: 0;
    color: #fbbf24;
}

.feat-trust-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.feat-trust-item p {
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0;
}

/* CTA Section */
.feat-cta {
    padding: 100px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}

.feat-cta-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.feat-cta-content h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0 0 16px 0;
}

.feat-cta-content p {
    font-size: 20px;
    line-height: 1.6;
    color: #6b7280;
    margin: 0 0 40px 0;
}

.feat-cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 1280px) {
    .feat-hero-visual {
        right: 40px;
        width: 380px;
    }
}

@media (max-width: 1024px) {
    .feat-hero {
        padding: 80px 0 60px;
    }
    
    .feat-hero-visual {
        position: static;
        transform: none;
        width: 100%;
        max-width: 420px;
        margin: 48px auto 0;
    }
    
    .feat-hero-content {
        max-width: 100%;
    }
    
    .feat-hero-title {
        font-size: 48px;
    }
    
    .feat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feat-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .feat-container {
        padding: 0 20px;
    }
    
    .feat-hero {
        padding: 60px 0 40px;
    }
    
    .feat-hero-title {
        font-size: 36px;
    }
    
    .feat-hero-subtitle {
        font-size: 18px;
    }
    
    .feat-hero-actions {
        flex-direction: column;
    }
    
    .feat-btn {
        width: 100%;
        justify-content: center;
    }
    
    .feat-hero-stats {
        gap: 32px;
    }
    
    .feat-section {
        padding: 60px 0;
    }
    
    .feat-section-title {
        font-size: 32px;
    }
    
    .feat-section-desc {
        font-size: 16px;
    }
    
    .feat-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .feat-audience-grid {
        grid-template-columns: 1fr;
    }
    
    .feat-trust-list {
        grid-template-columns: 1fr;
    }
    
    .feat-cta-content h2 {
        font-size: 32px;
    }
    
    .feat-cta-content p {
        font-size: 18px;
    }
    
    .feat-cta-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .feat-hero-title {
        font-size: 32px;
    }
    
    .feat-hero-subtitle {
        font-size: 16px;
    }
    
    .feat-hero-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .feat-section-title {
        font-size: 28px;
    }
    
    .feat-card {
        padding: 24px;
    }
    
    .feat-audience-card {
        padding: 24px;
    }
}

.campus-radio-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
    gap: 20px;
}

.campus-radio-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.campus-radio-card-head h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.campus-radio-card-head p {
    margin: 0;
    color: var(--muted-text, #667085);
}

.campus-radio-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.campus-radio-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campus-radio-field-full {
    grid-column: 1 / -1;
}

.campus-radio-field label,
.campus-radio-toggle span {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.campus-radio-field input,
.campus-radio-field textarea {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    font: inherit;
    color: #111827;
}

.campus-radio-field textarea {
    resize: vertical;
    min-height: 120px;
}

.campus-radio-field small,
.campus-radio-preview-copy,
.campus-radio-empty-state,
.campus-radio-meta-list {
    color: #667085;
}

.campus-radio-error {
    color: #b42318;
    font-size: 0.88rem;
}

.campus-radio-toggle {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.campus-radio-save-btn {
    grid-column: 1 / -1;
    width: fit-content;
}

.campus-radio-library-card {
    margin-top: 20px;
}

.campus-radio-library-form {
    margin-bottom: 10px;
}

.campus-radio-live-pill,
.campus-radio-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
}

.campus-radio-live-pill,
.campus-radio-status.is-live {
    background: rgba(18, 183, 106, 0.12);
    color: #027a48;
}

.campus-radio-status.is-offline {
    background: #f2f4f7;
    color: #475467;
}

.campus-radio-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
}

.campus-radio-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.campus-radio-live-btn,
.campus-radio-stop-btn,
.campus-radio-track-btn {
    width: fit-content;
}

.campus-radio-preview-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.campus-radio-preview-top strong,
.campus-radio-preview-top span {
    display: block;
}

.campus-radio-preview-top strong {
    color: #111827;
}

.campus-radio-preview-top span {
    margin-top: 4px;
    color: #667085;
}

.campus-radio-player {
    width: 100%;
}

.campus-radio-library-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campus-radio-library-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
}

.campus-radio-library-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campus-radio-library-copy strong {
    color: #111827;
}

.campus-radio-library-copy span {
    color: #667085;
    font-size: 0.92rem;
}

.campus-radio-library-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.campus-radio-library-player {
    width: 220px;
}

.campus-radio-track-action {
    border: 1px solid #d0d5dd;
    background: #fff;
}

.campus-radio-track-action.is-danger {
    border-color: #fda29b;
    color: #b42318;
}

.campus-radio-public-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.radio-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.radio-hub-card {
    height: 100%;
}

.radio-public-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 22px auto 40px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.radio-public-back {
    display: flex;
    align-items: center;
}

.radio-public-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
    gap: 20px;
    align-items: stretch;
}

.radio-public-hero-copy,
.radio-public-stage,
.radio-public-panel {
    border: 1px solid #d9dee8;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.radio-public-hero-copy {
    padding: 30px;
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.12), transparent 34%),
        radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.12), transparent 28%),
        #ffffff;
}

.radio-public-kicker,
.radio-panel-kicker,
.radio-stage-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7c3aed;
}

.radio-public-title {
    margin: 12px 0 14px;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1;
    color: #0f172a;
}

.radio-public-text {
    margin: 0;
    max-width: 58ch;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #475467;
}

.radio-public-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.radio-public-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
}

.radio-public-stage {
    padding: 24px;
    background: #0f172a;
    color: #f8fafc;
    position: relative;
    overflow: hidden;
}

.radio-public-stage::before {
    content: "";
    position: absolute;
    inset: auto -40px -70px auto;
    width: 200px;
    height: 200px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.16);
    filter: blur(6px);
}

.radio-stage-topline,
.radio-stage-main,
.radio-stage-stats {
    position: relative;
    z-index: 1;
}

.radio-stage-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.radio-stage-main {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

.radio-stage-icon {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1.75rem;
    color: #86efac;
}

.radio-stage-copy strong,
.radio-stage-copy span {
    display: block;
}

.radio-stage-copy strong {
    font-size: 1.25rem;
    color: #fff;
}

.radio-stage-copy span,
.radio-stage-tagline {
    color: rgba(248, 250, 252, 0.74);
}

.radio-stage-copy span {
    margin-top: 6px;
}

.radio-stage-tagline {
    margin: 16px 0 0;
    font-size: 0.96rem;
    line-height: 1.7;
}

.radio-stage-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.radio-stage-stat {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.radio-stage-stat span,
.radio-side-metric span {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #98a2b3;
}

.radio-stage-stat strong,
.radio-side-metric strong {
    display: block;
    margin-top: 6px;
    color: #fff;
    font-size: 1rem;
}

.radio-public-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.7fr);
    gap: 20px;
    align-items: start;
}

.radio-public-panel {
    padding: 24px;
}

.radio-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.radio-panel-head h2,
.radio-public-side-panel h3 {
    margin: 8px 0 0;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #101828;
}

.radio-panel-dots {
    display: inline-flex;
    gap: 6px;
    padding-top: 4px;
}

.radio-panel-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d0d5dd;
}

.radio-program-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.radio-program-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
}

.radio-public-listener-shell {
    margin-top: 18px;
    padding: 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    border: 1px solid #1f2937;
}

.radio-listener-copy {
    margin: 0 0 16px;
    color: rgba(248, 250, 252, 0.78);
    line-height: 1.7;
}

.radio-public-control-row {
    align-items: center;
}

.radio-public-listen-btn,
.radio-public-disconnect-btn {
    border-radius: 14px;
}

.radio-live-meter {
    display: flex;
    align-items: end;
    gap: 6px;
    height: 38px;
    margin: 18px 0;
}

.radio-live-meter span {
    width: 8px;
    border-radius: 999px;
    background: #22c55e;
    animation: radioMeter 1.2s ease-in-out infinite;
}

.radio-live-meter span:nth-child(1) { height: 14px; animation-delay: 0s; }
.radio-live-meter span:nth-child(2) { height: 28px; animation-delay: 0.12s; }
.radio-live-meter span:nth-child(3) { height: 20px; animation-delay: 0.24s; }
.radio-live-meter span:nth-child(4) { height: 32px; animation-delay: 0.36s; }
.radio-live-meter span:nth-child(5) { height: 18px; animation-delay: 0.48s; }

@keyframes radioMeter {
    0%, 100% { transform: scaleY(0.7); opacity: 0.7; }
    50% { transform: scaleY(1.1); opacity: 1; }
}

.radio-public-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.radio-public-meta .college-fact-row {
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
}

.radio-public-meta-tight .college-fact-row {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.radio-public-meta-tight .college-fact-row span,
.radio-public-meta-tight .college-fact-row strong {
    color: #f8fafc;
}

.radio-public-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.radio-public-side-panel {
    background: #fcfcfd;
}

.radio-note-list {
    margin: 16px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 10px;
    color: #475467;
    line-height: 1.6;
}

.radio-side-metric {
    padding: 14px 16px;
    border-radius: 18px;
    background: #111827;
    margin-top: 14px;
}

.radio-login-lockup {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid #e4e7ec;
    background: #f8fafc;
}

.radio-login-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    color: #fff;
    font-size: 1.1rem;
}

.radio-login-lockup strong {
    display: block;
    color: #111827;
}

.radio-login-lockup p {
    margin: 6px 0 0;
    color: #667085;
    line-height: 1.6;
}

.radio-login-btn {
    white-space: nowrap;
}

.radio-business-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.radio-business-panel {
    background: #fff;
}

.radio-business-form {
    margin-top: 18px;
}

.radio-admin-stat-grid .adm-stat-card .adm-stat-icon i {
    font-size: 1rem;
}

.radio-admin-view-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.radio-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 20px;
    margin-bottom: 20px;
}

.radio-admin-grid-lower {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
}

.radio-admin-card {
    padding: 22px;
    border-radius: 16px;
}

.radio-admin-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.radio-admin-card-head h3 {
    margin: 0;
    font-size: 1.02rem;
    color: #0f172a;
}

.radio-admin-card-head p {
    margin: 6px 0 0;
    color: #64748b;
    line-height: 1.6;
    font-size: 0.92rem;
}

.radio-admin-form.campus-radio-form {
    gap: 14px;
}

.radio-admin-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.radio-admin-live-box {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.radio-admin-live-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.radio-admin-live-top strong,
.radio-admin-live-top span {
    display: block;
}

.radio-admin-live-top strong {
    color: #0f172a;
}

.radio-admin-live-top span {
    margin-top: 4px;
    color: #64748b;
}

.radio-admin-live-state {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475467;
    line-height: 1.6;
}

.radio-admin-control-row .adm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.radio-admin-live-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.radio-admin-metric {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.radio-admin-metric span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.radio-admin-metric strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: 1rem;
}

.radio-admin-upload-form {
    margin-bottom: 16px;
}

.radio-admin-track-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-admin-track-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
}

.radio-admin-track-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radio-admin-track-copy strong {
    color: #0f172a;
}

.radio-admin-track-copy span {
    font-size: 0.9rem;
    color: #64748b;
}

.radio-admin-track-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.radio-admin-track-actions form {
    margin: 0;
}

.radio-admin-track-actions .adm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.radio-admin-table-wrap.adm-table-wrap {
    box-shadow: none;
    border: 1px solid #e2e8f0;
}

@media (max-width: 980px) {
    .campus-radio-admin-grid {
        grid-template-columns: 1fr;
    }

    .radio-public-hero,
    .radio-public-grid,
    .radio-business-grid {
        grid-template-columns: 1fr;
    }

    .radio-public-shell {
        width: min(100%, calc(100% - 24px));
    }

    .radio-stage-stats {
        grid-template-columns: 1fr;
    }

    .radio-admin-grid,
    .radio-admin-grid-lower {
        grid-template-columns: 1fr;
    }

    .radio-admin-live-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .campus-radio-form {
        grid-template-columns: 1fr;
    }

    .campus-radio-control-row {
        flex-direction: column;
    }

    .campus-radio-library-item,
    .campus-radio-library-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .campus-radio-library-player {
        width: 100%;
    }

    .radio-public-hero-copy,
    .radio-public-stage,
    .radio-public-panel {
        padding: 20px;
        border-radius: 20px;
    }

    .radio-public-title {
        font-size: 2rem;
    }

    .radio-login-lockup {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .radio-public-meta {
        grid-template-columns: 1fr;
    }

    .radio-admin-track-item,
    .radio-admin-track-actions,
    .radio-admin-card-head {
        flex-direction: column;
        align-items: stretch;
    }

    .radio-admin-view-link {
        width: 100%;
        justify-content: center;
    }
}