:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0a0d12;
    color: #f4f7fb;
}

* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(53, 113, 255, 0.13), transparent 38rem),
        #0a0d12;
}

button,
input {
    font: inherit;
}

.login-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 2rem 1.25rem;
}

.login-card {
    width: min(100%, 25rem);
    padding: 2rem;
    border: 1px solid #222936;
    border-radius: 1rem;
    background: rgba(16, 20, 28, 0.92);
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.32);
}

h1 {
    margin: 0 0 1.75rem;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
}

.login-form {
    display: grid;
    gap: 0.75rem;
}

.form-error {
    margin: -0.5rem 0 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 0.625rem;
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
    font-size: 0.8125rem;
}

label {
    color: #cbd2dc;
    font-size: 0.8125rem;
    font-weight: 600;
}

.password-label {
    margin-top: 0.375rem;
}

input {
    width: 100%;
    min-height: 2.875rem;
    padding: 0 0.875rem;
    border: 1px solid #303847;
    border-radius: 0.625rem;
    outline: none;
    background: #0c1016;
    color: #f4f7fb;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

input::placeholder {
    color: #646e7d;
}

input:focus {
    border-color: #668cff;
    box-shadow: 0 0 0 0.2rem rgba(102, 140, 255, 0.15);
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 4rem;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: #8fa9f8;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 650;
    transform: translateY(-50%);
}

.submit-button {
    min-height: 2.875rem;
    margin-top: 0.75rem;
    border: 0;
    border-radius: 0.625rem;
    background: #5f84f5;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    transition: background 150ms ease, transform 150ms ease;
}

.submit-button:hover {
    background: #7295ff;
}

.submit-button:active {
    transform: translateY(1px);
}

.dashboard-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; background: #0b0e13; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 1.25rem 0.875rem; border-right: 1px solid #202630; background: #0d1117; }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: .25rem .625rem 1.5rem; color: #f5f7fa; font-weight: 700; text-decoration: none; }
.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .55rem; background: #5f84f5; color: white; font-size: .8rem; }
.sidebar-nav { display: grid; gap: .25rem; }
.sidebar-nav p { margin: 1.25rem .75rem .4rem; color: #586272; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav a { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: .5rem; color: #8e98a7; font-size: .84rem; font-weight: 550; text-decoration: none; }
.sidebar-nav a:hover { background: #141922; color: #dce2ea; }
.sidebar-nav a.active { background: rgba(95,132,245,.12); color: #86a3ff; }
.sidebar-nav svg, .icon-button svg { width: 1rem; height: 1rem; fill: currentColor; }
.nav-count { margin-left: auto; padding: .1rem .4rem; border-radius: 999px; background: rgba(95,132,245,.18); color: #8ba7ff; font-size: .65rem; }
.nav-count.muted { background: #171c24; color: #687383; }
.sidebar-user { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; margin-top: auto; padding: .85rem .625rem 0; border-top: 1px solid #202630; }
.user-avatar { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: #242d3c; color: #afc1f7; font-size: .72rem; font-weight: 700; }
.sidebar-user div { display: grid; min-width: 0; }
.sidebar-user strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; }
.sidebar-user span:last-child { color: #626d7c; font-size: .65rem; }
.sidebar-user form { margin: 0; }
.sidebar-user input { display: none; }
.icon-button { display: grid; padding: .4rem; border: 0; background: transparent; color: #697483; cursor: pointer; }
.icon-button:hover { color: #f4f7fb; }
.dashboard-main { min-width: 0; padding: 2rem clamp(1.25rem, 3vw, 3rem) 4rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; }
.page-header p { margin: 0 0 .3rem; color: #6f7a8a; font-size: .75rem; }
.page-header h1 { margin: 0; font-size: 1.55rem; }
.live-badge { display: flex; align-items: center; gap: .5rem; padding: .45rem .7rem; border: 1px solid #27303c; border-radius: 999px; color: #a9b2bf; font-size: .72rem; }
.live-badge i { width: .45rem; height: .45rem; border-radius: 50%; background: #42d383; box-shadow: 0 0 0 .2rem rgba(66,211,131,.12); }

.monitor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.monitor-card, .panel {
    border: 1px solid #222936;
    border-radius: .75rem;
    background: #10151d;
}

.monitor-card {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
}

.monitor-card span {
    color: #7e8999;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.monitor-card strong {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.45rem;
}
.monitor-card strong small { color: #626d7c; font-size: .72rem; font-weight: 500; }
.monitor-card em { color: #687383; font-size: .7rem; font-style: normal; }
.monitor-card em.metric-positive { color: #57cc8a; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .75fr); gap: 1rem; margin-top: 1rem; }
.panel { overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.25rem; border-bottom: 1px solid #222936; }
.panel-heading h2 { margin: 0; font-size: .95rem; }
.panel-heading p { margin: .3rem 0 0; color: #657080; font-size: .72rem; }
.panel-heading button { padding: .5rem .75rem; border: 0; border-radius: .45rem; background: #5f84f5; color: #fff; cursor: pointer; font-size: .72rem; font-weight: 650; }
.panel-heading a { color: #7f9df5; font-size: .72rem; text-decoration: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: .75rem 1.25rem; border-bottom: 1px solid #222936; color: #657080; font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; }
td { padding: 1rem 1.25rem; color: #a7b0bd; font-size: .78rem; white-space: nowrap; }
.bot-name { display: flex; align-items: center; gap: .75rem; }
.bot-name > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .45rem; background: rgba(95,132,245,.14); color: #8ca7fb; font-size: .65rem; font-weight: 700; }
.bot-name div { display: grid; gap: .15rem; }
.bot-name strong { color: #dfe4eb; font-size: .78rem; }
.bot-name small { color: #606b79; font-size: .66rem; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: 999px; background: rgba(66,211,131,.1); color: #68d998; font-size: .68rem; }
.status-pill i { width: .35rem; height: .35rem; border-radius: 50%; background: #42d383; }
.activity-feed ol { margin: 0; padding: .35rem 1.25rem; list-style: none; }
.activity-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .7rem; padding: .85rem 0; border-bottom: 1px solid #202630; }
.activity-feed li:last-child { border-bottom: 0; }
.activity-feed li > i { width: .5rem; height: .5rem; margin-top: .25rem; border-radius: 50%; background: #668cff; box-shadow: 0 0 0 .2rem rgba(102,140,255,.1); }
.activity-feed li > i.event-success { background: #42d383; box-shadow: 0 0 0 .2rem rgba(66,211,131,.1); }
.activity-feed li div { display: grid; gap: .2rem; }
.activity-feed strong { font-size: .75rem; }
.activity-feed span { color: #657080; font-size: .67rem; line-height: 1.4; }
.activity-feed time { color: #596473; font-size: .65rem; }

@media (max-width: 62rem) {
    .monitor-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-columns { grid-template-columns: 1fr; }
}

@media (max-width: 44rem) {
    .dashboard-layout { grid-template-columns: 4.25rem minmax(0, 1fr); }
    .sidebar { padding-inline: .65rem; }
    .sidebar-brand { justify-content: center; padding-inline: 0; }
    .sidebar-brand > span:last-child, .sidebar-nav p, .sidebar-nav a:not(.active), .sidebar-nav a.active:not(:first-of-type), .sidebar-user div, .sidebar-user form { display: none; }
    .sidebar-nav a.active { justify-content: center; padding: 0; }
    .sidebar-user { display: flex; justify-content: center; padding-inline: 0; }
    .dashboard-main { padding-inline: 1rem; }
}

@media (max-width: 30rem) {
    .login-card {
        padding: 1.5rem;
    }

    .monitor-grid { grid-template-columns: 1fr; }
    .page-header h1 { font-size: 1.25rem; }
}