:root {
    --fr-ink: #162a25;
    --fr-muted: #65756f;
    --fr-primary: #087f5b;
    --fr-primary-dark: #056348;
    --fr-primary-soft: #e8f7f1;
    --fr-accent: #60d4aa;
    --fr-surface: rgba(255, 255, 255, .94);
    --fr-border: #e4ece8;
    --fr-bg: #f3f8f6;
    --fr-shadow: 0 12px 40px rgba(21, 62, 49, .08);
    --fr-radius: 1.15rem;
}

html { min-height: 100%; }

body {
    background:
        radial-gradient(circle at 8% 3%, rgba(96, 212, 170, .16), transparent 28rem),
        radial-gradient(circle at 92% 18%, rgba(8, 127, 91, .08), transparent 24rem),
        var(--fr-bg);
    color: var(--fr-ink);
    font-family: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

a { color: var(--fr-primary); }
a:hover { color: var(--fr-primary-dark); }

.app-navbar {
    background: rgba(11, 48, 39, .94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 30px rgba(5, 45, 34, .13);
    padding: .75rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-brand {
    align-items: center;
    display: inline-flex;
    font-size: 1.28rem;
    font-weight: 760;
    gap: .65rem;
    letter-spacing: -.04em;
}

.brand-mark {
    align-items: center;
    background: linear-gradient(145deg, var(--fr-accent), #d3ffef);
    border-radius: .7rem;
    box-shadow: 0 5px 16px rgba(96, 212, 170, .25);
    color: #075941;
    display: inline-flex;
    font-size: 1.15rem;
    height: 2.1rem;
    justify-content: center;
    width: 2.1rem;
}

.app-navbar .nav-link {
    border-radius: .7rem;
    color: rgba(255, 255, 255, .72);
    font-size: .94rem;
    font-weight: 550;
    margin: 0 .1rem;
    padding: .55rem .75rem !important;
    transition: background .2s ease, color .2s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.unread-badge {
    align-items: center;
    background: #ff5f6d;
    border: 2px solid currentColor;
    border-color: rgba(255, 255, 255, .86);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(171, 31, 47, .25);
    color: #fff;
    display: inline-flex;
    font-size: .68rem;
    font-weight: 800;
    height: 1.35rem;
    justify-content: center;
    line-height: 1;
    margin-left: .3rem;
    min-width: 1.35rem;
    padding: 0 .3rem;
    vertical-align: .1rem;
}

.list-group-item .unread-badge {
    border-color: #fff;
    font-size: .72rem;
    height: 1.5rem;
    min-width: 1.5rem;
}

.main-shell { min-height: calc(100vh - 10rem); padding-bottom: 3rem !important; padding-top: 2rem !important; }

.card {
    background: var(--fr-surface);
    border: 1px solid rgba(223, 234, 229, .9);
    border-radius: var(--fr-radius);
    box-shadow: var(--fr-shadow);
}

.post-card { transition: box-shadow .2s ease, transform .2s ease; }
.post-card:hover { box-shadow: 0 18px 50px rgba(21, 62, 49, .11); transform: translateY(-1px); }
.composer-card { background: linear-gradient(145deg, #fff, #f8fffc); border-color: #d5eae2; }

.avatar {
    align-items: center;
    background: linear-gradient(145deg, #d7f5e9, #aee8d2);
    border: 2px solid #fff;
    border-radius: .85rem;
    box-shadow: 0 4px 12px rgba(8, 127, 91, .14);
    color: var(--fr-primary-dark);
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 750;
    height: 2.65rem;
    justify-content: center;
    width: 2.65rem;
}

.form-control,
.form-select {
    background-color: rgba(255, 255, 255, .92);
    border: 1px solid #d8e4df;
    border-radius: .8rem;
    color: var(--fr-ink);
    padding: .72rem .9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #65bfa1;
    box-shadow: 0 0 0 .23rem rgba(8, 127, 91, .1);
}

textarea.form-control { resize: vertical; }

.btn {
    border-radius: .75rem;
    font-weight: 620;
    letter-spacing: -.01em;
    padding: .58rem .95rem;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn-sm { border-radius: .65rem; padding: .4rem .7rem; }
.btn-success { background: var(--fr-primary); border-color: var(--fr-primary); box-shadow: 0 5px 14px rgba(8, 127, 91, .16); }
.btn-success:hover, .btn-success:focus { background: var(--fr-primary-dark); border-color: var(--fr-primary-dark); }
.btn-outline-success { border-color: #86bda9; color: var(--fr-primary); }
.btn-outline-success:hover, .btn-outline-success.active { background: var(--fr-primary); border-color: var(--fr-primary); color: #fff; }
.btn-outline-secondary, .btn-outline-primary, .btn-outline-danger { background: #fff; border-color: var(--fr-border); color: var(--fr-muted); }
.btn-outline-secondary:hover, .btn-outline-primary:hover { background: var(--fr-primary-soft); border-color: #bee3d5; color: var(--fr-primary-dark); }
.btn-outline-danger:hover { background: #fff0f1; border-color: #f1c8cb; color: #b4232d; }

.auth-divider {
    align-items: center;
    color: var(--fr-muted);
    display: flex;
    font-size: .78rem;
    gap: .8rem;
    margin: 1.25rem 0;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    background: var(--fr-border);
    content: "";
    flex: 1;
    height: 1px;
}

.btn-google {
    align-items: center;
    background: #fff;
    border: 1px solid #d8e0dd;
    color: #25332f;
    display: flex;
    gap: .75rem;
    justify-content: center;
}

.btn-google:hover {
    background: #f8fbfa;
    border-color: #bfcfc9;
    box-shadow: 0 6px 18px rgba(21, 62, 49, .08);
    color: #172620;
}

.google-mark {
    align-items: center;
    background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    height: 1.45rem;
    justify-content: center;
    width: 1.45rem;
}

.verification-card { border-top: 4px solid var(--fr-primary); }
.verification-icon {
    align-items: center;
    background: var(--fr-primary-soft);
    border-radius: 1rem;
    color: var(--fr-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.4rem;
    font-weight: 800;
    height: 3rem;
    justify-content: center;
    width: 3rem;
}
.verification-notes { min-width: min(100%, 18rem); }

.feed-filter {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(216, 232, 225, .85);
    border-radius: .8rem;
    padding: .25rem;
}

.feed-filter .btn { border: 0; box-shadow: none; }
.post-actions { border-color: var(--fr-border) !important; }
.reply-block { background: #f8fbfa; border-color: #b9dfd0 !important; border-radius: 0 .75rem .75rem 0; padding-bottom: .65rem; padding-top: .65rem; }
.post-body, .message-body, .preserve-lines { overflow-wrap: anywhere; white-space: pre-wrap; }

.badge {
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: .01em;
    padding: .38em .65em;
}

.text-bg-success { background-color: var(--fr-primary) !important; }
.alert { border: 0; border-radius: .9rem; box-shadow: var(--fr-shadow); }

.list-group { border-radius: var(--fr-radius); overflow: hidden; }
.list-group-item { border-color: var(--fr-border); transition: background .2s ease; }
.list-group-item-action:hover { background: #f3fbf8; }

.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f3fbf8; }
.table > :not(caption) > * > * { border-color: var(--fr-border); padding: 1rem; }

.message { max-width: min(78%, 42rem); }
.message.mine { margin-left: auto; }
.message .message-body { background: #fff; border: 1px solid var(--fr-border); border-radius: .25rem 1rem 1rem 1rem; box-shadow: 0 5px 20px rgba(21, 62, 49, .06); padding: .75rem 1rem; }
.message.mine .message-body { background: linear-gradient(145deg, #def7ed, #eefbf6); border-color: #cbeadd; border-radius: 1rem .25rem 1rem 1rem; }
.sticky-composer { bottom: 1rem; position: sticky; }
.badge-update { background: #1473e6; }
.badge-training { background: #7557c7; }

.app-footer { border-color: rgba(181, 207, 197, .7) !important; }
.app-footer a { color: var(--fr-muted); text-decoration: none; }

.notification-settings-link {
    background: var(--fr-primary-soft);
    border: 1px solid #cce7dc;
    border-radius: .9rem;
    color: var(--fr-primary-dark);
    padding: 1rem 1.15rem;
    text-decoration: none;
}

.notification-settings-link:hover {
    background: #dcf4ea;
    color: var(--fr-primary-dark);
}

.notification-item { border-left: 4px solid transparent; }
.notification-item.is-unread {
    background: linear-gradient(145deg, #fff, #f0fbf6);
    border-left-color: var(--fr-primary);
}

.notification-dot {
    background: #c8d5d0;
    border-radius: 50%;
    flex: 0 0 auto;
    height: .7rem;
    margin-top: .35rem;
    width: .7rem;
}

.notification-item.is-unread .notification-dot {
    background: var(--fr-primary);
    box-shadow: 0 0 0 .3rem rgba(8, 127, 91, .12);
}

.notification-option {
    border-bottom: 1px solid var(--fr-border);
    padding-bottom: 1rem;
    padding-left: 2rem;
}

@media (max-width: 991.98px) {
    .app-navbar .navbar-collapse { background: rgba(6, 38, 30, .98); border-radius: 1rem; margin-top: .7rem; padding: .75rem; }
}

@media (max-width: 575.98px) {
    .main-shell { padding-top: 1.25rem !important; }
    .card { border-radius: 1rem; }
    .message { max-width: 90%; }
    .post-card, .composer-card { padding: 1rem !important; }
}