@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');

:root {
    --brand: #ff4d29;
    --brand-deep: #d64022;
    --dark: #092032;
    --body: #5c6b7a;
    --surface-soft: #f6f8fb;
    --surface-muted: #eef3f7;
    --border-soft: rgba(9, 32, 50, 0.08);
    --shadow-soft: 0 18px 60px rgba(9, 32, 50, 0.08);
    --shadow-panel: 0 10px 35px rgba(9, 32, 50, 0.09);
}

html { scroll-behavior: smooth; }
body { background: linear-gradient(180deg, #fff8f6 0%, #f3f6fb 12%, #f3f6fb 100%); }
.text-white-75 { color: rgba(255, 255, 255, 0.75); }
.border-soft { border-color: var(--border-soft) !important; }
.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; color: var(--brand); }
.btn-outline-brand { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn-outline-brand:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-brand-soft { background: rgba(255, 77, 41, 0.1); color: var(--brand); border: 0; }
.btn-brand-soft:hover { background: rgba(255, 77, 41, 0.18); color: var(--brand-deep); }

.earth-hero {
    position: relative;
    min-height: calc(100vh - 101px);
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 77, 41, 0.32), transparent 35%),
        linear-gradient(120deg, rgba(9, 32, 50, 0.95), rgba(9, 32, 50, 0.78)),
        url('../img/bg_banner1.jpg') center/cover no-repeat;
}

.earth-hero__backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 32, 50, 0.18), rgba(9, 32, 50, 0.48)),
        url('../img/bg_banner2.jpg') center/cover no-repeat;
    mix-blend-mode: soft-light;
    opacity: 0.85;
}

.hero-panel, .shell-panel {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow-soft);
    border-radius: 24px;
}

.hero-panel { padding: 1.5rem; }
.hero-panel__header { display: flex; align-items: center; justify-content: space-between; color: var(--dark); font-weight: 700; margin-bottom: 1rem; }
.status-pill { border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8rem; background: rgba(255, 77, 41, 0.1); color: var(--brand); }
.hero-story { display: flex; gap: 1rem; padding: 1rem; border-radius: 18px; background: var(--surface-soft); }
.hero-story img { width: 72px; height: 72px; object-fit: cover; border-radius: 18px; }
.hero-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hero-stat-grid div { padding: 1rem; border-radius: 18px; background: linear-gradient(180deg, #fff, #f8fbfd); border: 1px solid var(--border-soft); }
.hero-stat-grid strong, .stats-stack strong, .metric-chip strong { display: block; font-size: 1.1rem; color: var(--dark); }
.hero-stat-grid span, .stats-stack span, .metric-chip span { color: var(--body); font-size: 0.9rem; }

.service-soft { border-radius: 22px; border: 1px solid var(--border-soft); }
.app-navbar { background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(16px); }
.app-shell { min-height: calc(100vh - 77px); }
.app-sidebar { position: sticky; top: 100px; }

.app-nav-list .list-group-item {
    border: 0;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: transparent;
}

.app-nav-list .list-group-item.active,
.app-nav-list .list-group-item:hover {
    background: rgba(255, 77, 41, 0.08);
    color: var(--brand);
}

.composer-banner {
    background:
        linear-gradient(135deg, rgba(255, 77, 41, 0.92), rgba(214, 64, 34, 0.95)),
        url('../img/bg_banner2.jpg') center/cover no-repeat;
    border-radius: 24px 24px 0 0;
}

.composer-textarea { min-height: 140px; }
.post-card { overflow: hidden; }
.post-copy { white-space: pre-wrap; color: var(--dark); }
.post-image-wrap { border-radius: 20px; overflow: hidden; background: var(--surface-muted); }
.post-image { width: 100%; max-height: 520px; object-fit: cover; }
.comment-bubble { flex: 1; background: var(--surface-soft); border-radius: 18px; padding: 0.9rem 1rem; }
.shell-subpanel { background: linear-gradient(180deg, #fff, #fbfdff); border: 1px solid var(--border-soft); border-radius: 20px; box-shadow: var(--shadow-panel); }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-xxl { width: 120px; height: 120px; border-radius: 24px; }
.mini-user + .mini-user { margin-top: 1rem; }
.stats-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.stats-stack div, .metric-chip { padding: 1rem 1.1rem; border-radius: 18px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.2); display: inline-flex; flex-direction: column; }
.upload-preview { width: 100%; max-height: 260px; object-fit: cover; border-radius: 18px; border: 1px solid var(--border-soft); }
.upload-preview--static { display: block !important; }

.auth-shell {
    min-height: calc(100vh - 77px);
    background:
        radial-gradient(circle at top left, rgba(255, 77, 41, 0.14), transparent 30%),
        linear-gradient(180deg, #fff8f6 0%, #f3f6fb 100%);
}

.auth-panel { overflow: hidden; }
.profile-meta { display: grid; grid-template-columns: 110px 1fr; gap: 0.85rem 1rem; }
.profile-meta dt { font-weight: 700; color: var(--dark); }
.profile-meta dd { margin-bottom: 0; color: var(--body); }
.conversation-list { display: grid; gap: 0.85rem; }
.conversation-link {
    display: block;
    text-decoration: none;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, #fff, #fbfdff);
}
.conversation-link:hover,
.conversation-link.active {
    background: rgba(255, 77, 41, 0.08);
    border-color: rgba(255, 77, 41, 0.18);
}
.chat-panel { min-height: 720px; display: flex; flex-direction: column; }
.chat-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,248,251,0.92)),
        url('../img/c2.jpg') center/cover no-repeat;
}
.chat-bubble-row { display: flex; align-items: flex-end; max-width: 80%; }
.chat-bubble-row.mine { margin-left: auto; justify-content: flex-end; }
.chat-bubble {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 20px 20px 20px 6px;
    padding: 1rem;
    box-shadow: var(--shadow-panel);
}
.chat-bubble--mine {
    background: linear-gradient(135deg, rgba(255,77,41,0.95), rgba(214,64,34,0.95));
    color: #fff;
    border-radius: 20px 20px 6px 20px;
}
.chat-bubble--mine .text-muted { color: rgba(255,255,255,0.72) !important; }

@media (max-width: 991.98px) {
    .app-sidebar { position: static; }
    .earth-hero { min-height: auto; }
}

@media (max-width: 767.98px) {
    .hero-stat-grid, .stats-stack { grid-template-columns: 1fr; }
    .profile-meta { grid-template-columns: 1fr; }
    .chat-bubble-row { max-width: 100%; }
}