:root {
    --bg: #050505;
    --bg-elevated: #0b0b0b;
    --panel: #121212;
    --text: #f2f3f5;
    --muted: #9ca3af;
    --border: rgba(255, 255, 255, 0.08);
    --accent: #6366f1;
    --accent-2: #a855f7;
    --accent-cyan: #22d3ee;
}

html, body {
    background: radial-gradient(1200px 800px at 80% -20%, rgba(99, 102, 241, 0.15), transparent 55%), var(--bg) !important;
    color: var(--text) !important;
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
}

html {
    overflow-y: scroll;
}

/* Stable two-column app shell for Bootstrap pages */
.d-flex.min-vh-100 > aside {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
}

.d-flex.min-vh-100 > main {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.container-fluid {
    max-width: 1680px;
}

.bg-black,
.bg-dark {
    background-color: #090909 !important;
}

.border-secondary,
.border-end,
.border-bottom {
    border-color: var(--border) !important;
}

.card.bg-secondary-subtle,
.card {
    background: linear-gradient(180deg, rgba(22, 22, 22, 0.88), rgba(14, 14, 14, 0.9)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

.navbar {
    backdrop-filter: blur(8px);
}

.form-control,
.form-select {
    background: #0d0d0d !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 12px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 0 0 .25rem rgba(99, 102, 241, 0.2) !important;
}

.btn {
    border-radius: 10px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.btn-primary {
    border: none !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #d1d5db !important;
}

.btn-outline-light:hover,
.btn-outline-light.active {
    background: rgba(99, 102, 241, 0.14) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    color: #fff !important;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

.table {
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
    --bs-table-hover-bg: rgba(99, 102, 241, 0.08) !important;
    --bs-table-border-color: var(--border) !important;
    color: #e5e7eb !important;
}

.table-responsive {
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: auto;
    background: rgba(8, 8, 8, 0.55);
}

.table > :not(caption) > * > * {
    padding-top: .72rem !important;
    padding-bottom: .72rem !important;
}

thead th {
    color: #9ca3af !important;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

code {
    color: #c4b5fd !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #a7f3d0 !important;
}

.text-secondary,
.text-light-emphasis {
    color: var(--muted) !important;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-weight: 700;
    letter-spacing: .01em;
    min-height: 54px;
    white-space: nowrap;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

.brand-logo {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.35);
}

.brand-link span {
    display: block;
    line-height: 1.05;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    font-size: 1.08rem;
}

.d-grid.gap-2 > .btn {
    min-height: 34px;
    line-height: 1.1;
}

/* Bootstrap-sidebars: make them match channels look */
aside .d-grid.gap-2 {
    display: flex !important;
    flex-direction: column;
    gap: .45rem !important;
}

aside .d-grid.gap-2 .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
    width: 100%;
    padding: .48rem .62rem !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #d4d4d8 !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.sidebar-btn-icon {
    width: 15px;
    height: 15px;
    opacity: .8;
    flex: 0 0 auto;
}

aside .d-grid.gap-2 .btn.active,
aside .d-grid.gap-2 .btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(168, 85, 247, 0.12)) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #fff !important;
}

aside .d-grid.gap-2 .btn.active .sidebar-btn-icon,
aside .d-grid.gap-2 .btn:hover .sidebar-btn-icon {
    opacity: 1;
    color: #22d3ee;
}

/* Forms on settings / gigachat / admin CRUD pages */
.form-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #a1a1aa !important;
}

.form-text {
    color: #71717a !important;
}

.row.g-2 > [class*="col-"],
.row.g-3 > [class*="col-"] {
    min-width: 0;
}

/* Make header controls and action buttons compact */
.navbar .btn,
.d-flex.gap-2 .btn,
.table .btn-sm {
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
}