/* =========================================================
RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

:root {
--bg: #212121;
--sidebar: #171717;
--sidebar-hover: #2a2a2a;
--surface: #292929;
--surface-light: #303030;
--border: #3a3a3a;
--text: #ececec;
--text-muted: #999;
--accent: #7c5cff;
--accent-hover: #8d72ff;
--sidebar-width: 260px;


}

/* =========================================================
BODY
========================================================= */

html,
body {
width: 100%;
height: 100%;


overflow: hidden;


}

body {


font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

background: var(--bg);

color: var(--text);


}

/* =========================================================
APP
========================================================= */

.app {


width: 100%;
height: 100vh;

display: flex;

overflow: hidden;


}

/* =========================================================
SIDEBAR
========================================================= */

.sidebar {


width: var(--sidebar-width);
height: 100vh;

background: var(--sidebar);

display: flex;
flex-direction: column;

padding: 10px;

border-right: 1px solid #242424;

flex-shrink: 0;


}

/* =========================================================
LOGO
========================================================= */

.sidebar-logo {


height: 46px;

display: flex;
align-items: center;

padding: 0 12px;

margin-bottom: 8px;

font-size: 18px;
font-weight: 600;

color: white;


}

.sidebar-logo span {


color: var(--accent);

margin-left: 5px;


}

/* =========================================================
NEW CHAT
========================================================= */

.new-chat {


width: 100%;
height: 44px;

border: 1px solid #3a3a3a;
border-radius: 8px;

background: transparent;

color: var(--text);

display: flex;
align-items: center;

padding: 0 13px;

font-size: 14px;

cursor: pointer;

transition: background 0.15s;


}

.new-chat:hover {


background: var(--sidebar-hover);


}

.new-chat-icon {


font-size: 20px;

margin-right: 10px;

color: #ddd;


}

/* =========================================================
SIDEBAR SECTION
========================================================= */

.sidebar-section {


margin-top: 20px;


}

.sidebar-title {


padding: 0 10px 8px;

font-size: 11px;

color: #777;

text-transform: uppercase;

letter-spacing: 0.06em;


}

/* =========================================================
NAVIGATION
========================================================= */

.navigation {


display: flex;
flex-direction: column;

gap: 2px;


}

.nav-item {


width: 100%;

height: 38px;

padding: 0 11px;

display: flex;
align-items: center;

gap: 11px;

border-radius: 7px;

color: #cfcfcf;

text-decoration: none;

font-size: 13px;

transition:
    background 0.15s,
    color 0.15s;


}

.nav-item:hover {


background: var(--sidebar-hover);

color: white;


}

.nav-item.active {


background: #2b2b2b;

color: white;


}

.nav-icon {


width: 18px;

text-align: center;

font-size: 16px;

color: #999;


}

.nav-item.active .nav-icon {


color: var(--accent);


}

/* =========================================================
CHAT HISTORY
========================================================= */

.chat-history {


display: flex;
flex-direction: column;

gap: 2px;

overflow-y: auto;


}

.history-item {


width: 100%;

padding: 9px 11px;

border-radius: 7px;

color: #aaa;

font-size: 13px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

cursor: pointer;

transition: background 0.15s;


}

.history-item:hover {


background: var(--sidebar-hover);

color: #ddd;


}

/* =========================================================
SIDEBAR BOTTOM
========================================================= */

.sidebar-bottom {


margin-top: auto;

padding-top: 10px;

border-top: 1px solid #292929;


}

/* =========================================================
MINI PROFILE
========================================================= */

.profile-mini {


width: 100%;

border: none;

background: transparent;

color: white;

display: flex;
align-items: center;

padding: 9px 8px;

border-radius: 8px;

cursor: pointer;

text-align: left;

transition: background 0.15s;


}

.profile-mini:hover {


background: var(--sidebar-hover);


}

.mini-avatar {


width: 31px;
height: 31px;

border-radius: 8px;

display: flex;
align-items: center;
justify-content: center;

background: var(--accent);

color: white;

font-size: 12px;
font-weight: 600;

margin-right: 10px;


}

.mini-user {


display: flex;
flex-direction: column;

min-width: 0;

flex: 1;


}

.mini-user strong {


font-size: 12px;

font-weight: 600;


}

.mini-user span {


margin-top: 2px;

color: #777;

font-size: 10px;


}

.profile-arrow {


color: #777;

font-size: 17px;


}

/* =========================================================
MAIN
========================================================= */

.main {


flex: 1;

min-width: 0;
height: 100vh;

display: flex;
flex-direction: column;

background: var(--bg);


}

/* =========================================================
TOPBAR
========================================================= */

.topbar {


height: 58px;

display: flex;
align-items: center;

padding: 0 22px;

border-bottom: 1px solid #2c2c2c;

flex-shrink: 0;


}

.topbar-title {


font-size: 15px;

font-weight: 600;


}

.topbar-spacer {


flex: 1;


}

/* =========================================================
TOPBAR PROFILE
========================================================= */

.topbar-profile {


display: flex;
align-items: center;

gap: 8px;

padding: 5px 8px;

border: none;

border-radius: 7px;

background: transparent;

color: #ccc;

cursor: pointer;

font-size: 13px;

transition: background 0.15s;


}

.topbar-profile:hover {


background: #2b2b2b;


}

.topbar-avatar {


width: 27px;
height: 27px;

border-radius: 7px;

background: var(--accent);

color: white;

display: flex;
align-items: center;
justify-content: center;

font-size: 11px;
font-weight: 600;


}

.profile-chevron {


color: #777;

font-size: 11px;


}

/* =========================================================
PAGE
========================================================= */

.page {


flex: 1;

overflow-y: auto;

padding: 42px 30px 60px;


}

/* Scrollbar */

.page::-webkit-scrollbar {


width: 7px;


}

.page::-webkit-scrollbar-thumb {


background: #444;

border-radius: 10px;


}

.page::-webkit-scrollbar-track {


background: transparent;


}

/* =========================================================
PAGE CONTENT
========================================================= */

.page-content {


width: 100%;

max-width: 1050px;

margin: 0 auto;


}

/* =========================================================
WELCOME
========================================================= */

.welcome {


display: flex;

align-items: center;
justify-content: space-between;

gap: 25px;

margin-bottom: 30px;


}

.welcome-label {


color: var(--accent);

font-size: 11px;

font-weight: 600;

letter-spacing: 0.08em;

margin-bottom: 7px;


}

.welcome h1 {

font-size: 30px;

line-height: 1.2;

font-weight: 600;

letter-spacing: -0.02em;

}

.welcome h1 span {

color: var(--accent);

}

.welcome p {

margin-top: 7px;

color: #888;

font-size: 14px;

}

/* =========================================================
PRIMARY BUTTON
========================================================= */

.primary-button {

height: 42px;

padding: 0 15px;

display: flex;
align-items: center;

gap: 8px;

border: none;

border-radius: 8px;

background: var(--accent);

color: white;

font-size: 13px;

font-weight: 600;

cursor: pointer;

transition:
    background 0.15s,
    transform 0.1s;

}

.primary-button:hover {
background: var(--accent-hover);

}

.primary-button:active {

transform: scale(0.97);

}

.primary-button span {

font-size: 18px;

}

/* =========================================================
STATS
========================================================= */

.stats-grid {


display: grid;

grid-template-columns:
    repeat(4, 1fr);

gap: 12px;

margin-bottom: 18px;


}

.stat-card {


min-height: 100px;

padding: 17px;

display: flex;
align-items: center;

gap: 13px;

background: #292929;

border: 1px solid #383838;

border-radius: 10px;

transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;


}

.stat-card:hover {


background: #303030;

border-color: #474747;

transform: translateY(-1px);


}

.stat-icon {


width: 38px;
height: 38px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background: #363636;

color: #aaa;

font-size: 18px;


}

.stat-card:first-child .stat-icon {


background: rgba(124, 92, 255, 0.16);

color: var(--accent);


}

.stat-info {


display: flex;
flex-direction: column;


}

.stat-label {


color: #858585;

font-size: 11px;

margin-bottom: 4px;


}

.stat-info strong {


font-size: 19px;

font-weight: 600;

color: #eee;


}

/* =========================================================
DASHBOARD GRID
========================================================= */

.dashboard-grid {


display: grid;

grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 1fr);

gap: 18px;


}

/* =========================================================
DASHBOARD CARD
========================================================= */

.dashboard-card {


background: #292929;

border: 1px solid #383838;

border-radius: 10px;

overflow: hidden;


}

/* =========================================================
CARD HEADER
========================================================= */

.card-header {


display: flex;

align-items: center;
justify-content: space-between;

padding: 18px 18px 15px;

border-bottom: 1px solid #363636;


}

.card-header h2 {


font-size: 14px;

font-weight: 600;


}

.card-header p {


margin-top: 4px;

color: #777;

font-size: 11px;


}

.card-link {


color: var(--accent);

text-decoration: none;

font-size: 11px;

font-weight: 500;


}

.card-link:hover {


color: var(--accent-hover);


}

/* =========================================================
ACTIVITY
========================================================= */

.activity-list {


display: flex;

flex-direction: column;


}

.activity-item {


min-height: 66px;

padding: 11px 18px;

display: flex;
align-items: center;

gap: 11px;

border-bottom: 1px solid #333;

transition: background 0.15s;


}

.activity-item:last-child {


border-bottom: none;


}

.activity-item:hover {


background: #303030;


}

.activity-icon {


width: 31px;
height: 31px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 7px;

background: #363636;

color: #aaa;

font-size: 15px;


}

.activity-icon.purple {


background: rgba(124, 92, 255, 0.17);

color: var(--accent);


}

.activity-info {


min-width: 0;

flex: 1;

display: flex;
flex-direction: column;


}

.activity-info strong {


color: #ddd;

font-size: 12px;

font-weight: 500;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;


}

.activity-info span {


margin-top: 3px;

color: #6f6f6f;

font-size: 10px;


}

.activity-item time {


color: #666;

font-size: 10px;

white-space: nowrap;


}

/* =========================================================
QUICK ACTIONS
========================================================= */

.quick-actions {


display: flex;

flex-direction: column;


}

.quick-action {


min-height: 70px;

padding: 11px 15px;

display: flex;
align-items: center;

gap: 11px;

color: inherit;

text-decoration: none;

border-bottom: 1px solid #333;

transition: background 0.15s;


}

.quick-action:last-child {


border-bottom: none;


}

.quick-action:hover {


background: #303030;


}

.quick-icon {


width: 32px;
height: 32px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

border-radius: 8px;

background: #363636;

color: #aaa;

font-size: 16px;


}

.quick-icon.purple {


background: rgba(124, 92, 255, 0.17);

color: var(--accent);


}

.quick-action > div:nth-child(2) {


min-width: 0;

flex: 1;

display: flex;
flex-direction: column;


}

.quick-action strong {


color: #ddd;

font-size: 12px;

font-weight: 500;


}

.quick-action span {


margin-top: 3px;

color: #707070;

font-size: 10px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;


}

.quick-action b {


color: #666;

font-size: 18px;

font-weight: 400;

transition: color 0.15s;


}

.quick-action:hover b {


color: #aaa;


}

/* =========================================================
STATUS CARD
========================================================= */

.status-card {


margin-top: 18px;

min-height: 72px;

padding: 14px 17px;

display: flex;

align-items: center;
justify-content: space-between;

background: #292929;

border: 1px solid #383838;

border-radius: 10px;


}

.status-left {


display: flex;

align-items: center;

gap: 12px;


}

.status-logo {


width: 37px;
height: 37px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background: var(--accent);

color: white;

font-size: 14px;

font-weight: 700;


}

.status-left strong {


display: block;

font-size: 12px;

font-weight: 600;


}

.status-left p {


margin-top: 3px;

color: #707070;

font-size: 10px;


}

.online-status {


display: flex;

align-items: center;

gap: 6px;

color: #999;

font-size: 11px;


}

.online-status span {


width: 7px;
height: 7px;

border-radius: 50%;

background: #62c76b;

box-shadow: 0 0 7px rgba(98, 199, 107, 0.5);


}

/* =========================================================
FOOTER
========================================================= */

.footer {


padding-top: 25px;

display: flex;

justify-content: center;

align-items: center;

gap: 8px;

color: #555;

font-size: 10px;


}

.footer span:first-child {


color: #777;


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 900px) {


.stats-grid {

    grid-template-columns:
        repeat(2, 1fr);
}

.dashboard-grid {

    grid-template-columns: 1fr;
}


}

@media (max-width: 700px) {


:root {
    --sidebar-width: 220px;
}

.sidebar {

    width: 220px;
}

.page {

    padding: 30px 18px 50px;
}

.welcome h1 {

    font-size: 26px;
}


}

.sidebar {

    display: none;
}

.topbar {

    padding: 0 15px;
}

.page {

    padding: 25px 14px 45px;
}

.welcome {

    align-items: flex-start;

    flex-direction: column;
}

.primary-button {

    width: 100%;

    justify-content: center;
}

.stats-grid {

    grid-template-columns: 1fr 1fr;

    gap: 8px;
}

.stat-card {

    min-height: 90px;

    padding: 12px;

    gap: 9px;
}

.stat-icon {

    width: 32px;
    height: 32px;

    font-size: 15px;
}

.stat-info strong {

    font-size: 16px;
}

.stat-label {

    font-size: 10px;
}

.status-card {

    align-items: flex-start;

    gap: 12px;
}

.online-status {

    margin-top: 4px;
}

.footer {

    flex-wrap: wrap;
}