:root {
    --blue: #d40b16;
    --blue-soft: #fff0f1;
    --brand-red: #d40b16;
    --brand-red-dark: #87050b;
    --brand-black: #0c0d10;
    --brand-charcoal: #202329;
    --brand-silver: #c7cbd1;
    --ink: #191b20;
    --muted: #6d7078;
    --line: #dfe1e5;
    --surface: #f3f4f6;
}

body {
    background: linear-gradient(145deg, #f7f7f8 0%, #eceef1 100%);
}

.app-navbar {
    height: 72px;
    background: linear-gradient(105deg, #07080a 0%, #191b20 62%, #30333a 100%) !important;
    border-bottom: 2px solid var(--brand-red) !important;
    box-shadow: 0 8px 26px rgba(10, 10, 12, .22);
}

.navbar-brand {
    color: #fff !important;
    margin-right: 1.25rem;
}

.brand-logo {
    width: 74px;
    height: 50px;
    object-fit: cover;
    object-position: center;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 7px 18px rgba(212,11,22,.25);
}

.brand-title {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    padding-left: 11px;
    border-left: 1px solid rgba(255,255,255,.25);
}

.brand-title b {
    color: #fff;
    font-size: .94rem;
    letter-spacing: .075em;
}

.brand-title small {
    color: #adb1b9;
    font-size: .64rem;
    letter-spacing: .06em;
    margin-top: 4px;
}

.app-navbar .nav-link {
    color: #bec1c8;
    border-radius: 9px;
    padding-inline: .8rem !important;
}

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

.app-navbar .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand-red), #a50710);
    box-shadow: 0 5px 14px rgba(212,11,22,.3);
}

.app-navbar .small,
.app-navbar .navbar-text {
    color: #e8e9eb;
}

.app-navbar .badge.text-bg-light {
    color: #25272c !important;
    background: linear-gradient(145deg, #fff, #aeb2b9) !important;
}

.app-navbar .btn-outline-secondary {
    color: #e6e7e9;
    border-color: #666a73;
}

.app-navbar .btn-outline-secondary:hover {
    color: #fff;
    background: var(--brand-red);
    border-color: var(--brand-red);
}

.navbar-toggler {
    border-color: rgba(255,255,255,.3);
}

.navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

.brand-mark {
    background: linear-gradient(145deg, #ef1924, #83040a);
    box-shadow: 0 6px 18px rgba(212,11,22,.38);
}

.btn-primary {
    --bs-btn-bg: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: #a50710;
    --bs-btn-hover-border-color: #a50710;
    --bs-btn-active-bg: #85050b;
    --bs-btn-active-border-color: #85050b;
    background-image: linear-gradient(135deg, #ea1520, #a7070f);
    box-shadow: 0 5px 15px rgba(212,11,22,.2);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-red);
    --bs-btn-border-color: var(--brand-red);
    --bs-btn-hover-bg: var(--brand-red);
    --bs-btn-hover-border-color: var(--brand-red);
}

.form-control:focus,
.form-select:focus {
    border-color: #ef7780;
    box-shadow: 0 0 0 .2rem rgba(212,11,22,.13);
}

.login-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 54%, rgba(215, 10, 21, .42), transparent 31%),
        radial-gradient(circle at 78% 18%, rgba(210, 214, 221, .18), transparent 24%),
        linear-gradient(135deg, #050506 0%, #181a1f 56%, #070708 100%);
}

.login-page::before,
.login-page::after {
    content: "";
    position: absolute;
    width: 460px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    transform: rotate(-38deg);
}

.login-page::before { top: 18%; right: -80px; }
.login-page::after { bottom: 16%; left: -90px; }

.login-card {
    position: relative;
    z-index: 1;
    width: min(92vw, 460px);
    padding: 34px 42px 42px;
    color: #fff;
    text-align: center;
    background: linear-gradient(155deg, rgba(39,42,48,.97), rgba(8,9,11,.98));
    border: 1px solid rgba(255,255,255,.16);
    border-bottom: 3px solid var(--brand-red);
    box-shadow: 0 28px 80px rgba(0,0,0,.5), 0 0 45px rgba(212,11,22,.14) !important;
}

.login-logo {
    display: block;
    width: min(100%, 300px);
    height: auto;
    margin: 0 auto 18px;
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0,0,0,.48), 0 0 28px rgba(212,11,22,.2);
}

.login-kicker {
    color: #ef4c55;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .18em;
    margin-bottom: 8px;
}

.login-card .text-secondary { color: #aeb1b8 !important; }
.login-card .form-label { display: block; color: #d7d9dd; text-align: left; }
.login-card .form-control {
    color: #fff;
    background: #111318;
    border-color: #444851;
}
.login-card .form-control::placeholder { color: #7e828b; }

.metric-card {
    position: relative;
    overflow: hidden;
    border-color: #d9dce1;
    box-shadow: 0 10px 26px rgba(14,16,20,.07);
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(var(--brand-red), #7f050b);
}

.metric-card strong { color: #15171b; }
.card { border-color: #e0e2e6 !important; }

.inbox-shell {
    height: calc(100vh - 72px);
}

.inbox-sidebar {
    background: linear-gradient(180deg, #f8f8f9 0%, #eceef1 100%);
}

.filter-nav button:hover,
.filter-nav button.active {
    color: #a3060e;
    background: linear-gradient(90deg, #ffe7e9, #fff5f5);
}

.filter-nav button.active {
    box-shadow: inset 3px 0 0 var(--brand-red);
}

.filter-nav button b,
.unread-badge {
    background: linear-gradient(135deg, #e31520, #9d060d);
}

.filter-nav .channel-filter {
    position: relative;
    width: 100%;
    padding-left: 31px;
    color: #676a72;
    font-size: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-nav .channel-filter span {
    color: #a6a9af;
    margin-right: 4px;
}

.filter-nav .channel-filter.active {
    color: #9b060d;
}

.conversation-item:hover,
.conversation-item.active {
    background: linear-gradient(90deg, #fff0f1, #fafafa);
}

.conversation-item.active {
    box-shadow: inset 3px 0 0 var(--brand-red);
}

.customer-avatar {
    color: #8d080f;
    background: linear-gradient(145deg, #eceef1, #b9bdc5);
    box-shadow: inset 0 0 0 1px rgba(91,94,101,.18);
}

.message-list {
    background:
        linear-gradient(rgba(249,249,250,.94), rgba(240,241,243,.96)),
        radial-gradient(circle at 80% 10%, rgba(212,11,22,.08), transparent 34%);
}

.message.staff .bubble {
    background: linear-gradient(135deg, #e31420, #9b060d);
    box-shadow: 0 6px 16px rgba(165,7,16,.19);
}

.message.customer .bubble {
    border: 1px solid #e1e3e7;
}

.composer textarea:focus {
    border-color: #e86b73;
    box-shadow: 0 0 0 3px #ffeaec;
}

.quick-option:hover { background: #fff0f1; }
.quick-option code { color: #b30710; }

.tag-check input:checked + span {
    color: #a4060e;
    background: #ffe9eb;
    border-color: #e9959b;
}

.search-box:focus-within {
    background: #fff;
    box-shadow: 0 0 0 2px rgba(212,11,22,.13);
}

.sidebar-status {
    color: #555861;
    background: rgba(255,255,255,.52);
}

.channel-caption {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-card {
    overflow: hidden;
}

.channel-card::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-red), #858991, transparent 84%);
}

.line-channel-card::before {
    background: linear-gradient(90deg, #06c755, #8eddae, transparent 84%);
}

.facebook-channel-card::before {
    background: linear-gradient(90deg, #1877f2, #7eb3f8, transparent 84%);
}

.channel-editor summary {
    width: fit-content;
    color: #a70710;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.channel-editor[open] summary {
    margin-bottom: 8px;
}

.channel-form {
    padding-top: 8px;
}

.platform-count {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    font-weight: 800;
    border-radius: 12px;
    background: linear-gradient(145deg, #1877f2, #0b50ac);
    box-shadow: 0 6px 15px rgba(24,119,242,.22);
}

.add-channel-card {
    border: 1px dashed #d9989d !important;
    background: linear-gradient(145deg, #fff, #fff7f7);
}

.add-page-icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    margin-right: 7px;
    place-items: center;
    color: #fff;
    border-radius: 9px;
    background: linear-gradient(145deg, #e31520, #97060d);
}

@media (max-width: 991px) {
    .app-navbar { min-height: 68px; height: auto; }
    .inbox-shell { height: calc(100vh - 68px); }
    .navbar-collapse { padding: 12px 0 14px; }
    .app-navbar .nav-link { margin: 2px 0; }
}

@media (max-width: 575px) {
    .brand-logo { width: 62px; height: 42px; }
    .brand-title b { font-size: .8rem; }
    .brand-title small { font-size: .56rem; }
    .login-card { padding: 24px 24px 30px; }
    .login-logo { max-width: 240px; }
}