/* ============================================================
   DVLS Dashboard - Material Design 3 Dark Theme
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ---------- Design Tokens ---------- */
:root{
  /* MD3 Primary */
  --md-primary: #D0BCFF;
  --md-on-primary: #381E72;
  --md-primary-container: #4F378B;
  --md-on-primary-container: #EADDFF;
  /* MD3 Secondary */
  --md-secondary: #CCC2DC;
  --md-on-secondary: #332D41;
  --md-secondary-container: #4A4458;
  --md-on-secondary-container: #E8DEF8;
  /* MD3 Tertiary */
  --md-tertiary: #EFB8C8;
  --md-on-tertiary: #492532;
  --md-tertiary-container: #633B48;
  --md-on-tertiary-container: #FFD8E4;
  /* MD3 Error */
  --md-error: #F2B8B5;
  --md-on-error: #601410;
  --md-error-container: #8C1D18;
  --md-on-error-container: #F9DEDC;
  /* MD3 Surface (dark theme) */
  --md-surface: #141218;
  --md-surface-dim: #141218;
  --md-surface-bright: #3B383E;
  --md-surface-container-lowest: #0F0D13;
  --md-surface-container-low: #1D1B20;
  --md-surface-container: #211F26;
  --md-surface-container-high: #2B2930;
  --md-surface-container-highest: #36343B;
  --md-on-surface: #E6E1E5;
  --md-on-surface-variant: #CAC4D0;
  /* MD3 Outline */
  --md-outline: #938F99;
  --md-outline-variant: #49454F;
  /* MD3 Inverse */
  --md-inverse-surface: #E6E1E5;
  --md-inverse-on-surface: #313033;
  /* Semantic */
  --success: #86EFAC;
  --success-container: #1B5E20;
  --warning: #FCD34D;
  --warning-container: #7C5800;
  --error: #F2B8B5;
  --error-container: #8C1D18;
  --accent: #D0BCFF;
  --accent-container: #4F378B;
  /* Elevation */
  --elevation-0: none;
  --elevation-1: 0 1px 3px 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3);
  --elevation-2: 0 2px 6px 2px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.3);
  --elevation-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
  --elevation-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3);
  /* Shape */
  --shape-none: 0;
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 9999px;
  /* Motion */
  --motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --motion-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --duration-short: 150ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
}

/* ---------- Global ---------- */
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:'Roboto','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--md-surface);
  color:var(--md-on-surface);
  height:100vh;
  height:100dvh;
  overflow:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--md-primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Typography Scale ---------- */
.display-large{font-size:57px;line-height:64px;font-weight:400;letter-spacing:-0.25px}
.display-medium{font-size:45px;line-height:52px;font-weight:400}
.headline-large{font-size:32px;line-height:40px;font-weight:400}
.headline-medium{font-size:28px;line-height:36px;font-weight:400}
.headline-small{font-size:24px;line-height:32px;font-weight:400}
.title-large{font-size:22px;line-height:28px;font-weight:500}
.title-medium{font-size:16px;line-height:24px;font-weight:500;letter-spacing:0.15px}
.title-small{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}
.body-large{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0.5px}
.body-medium{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.25px}
.body-small{font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.4px}
.label-large{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0.1px}
.label-medium{font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.5px}
.label-small{font-size:11px;line-height:16px;font-weight:500;letter-spacing:0.5px}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--md-outline-variant);border-radius:var(--shape-full)}
::-webkit-scrollbar-thumb:hover{background:var(--md-outline)}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
#login-page{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  height:100dvh;
  background:var(--md-surface);
  padding:16px;
}
.login-card{
  background:var(--md-surface-container);
  border-radius:var(--shape-xl);
  padding:48px 40px;
  width:100%;
  max-width:400px;
  text-align:center;
  box-shadow:var(--elevation-3);
  position:relative;
  overflow:hidden;
}
.login-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--md-primary),var(--md-tertiary));
}
.login-card h1{
  font-size:40px;
  font-weight:400;
  margin-bottom:8px;
  background:linear-gradient(135deg,var(--md-primary),var(--md-tertiary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-0.5px;
}
.login-card .subtitle{
  color:var(--md-on-surface-variant);
  margin-bottom:36px;
  font-size:14px;
  letter-spacing:0.25px;
}

/* ============================================================
   MD3 INPUT FIELDS (Filled variant)
   ============================================================ */
.md-field{
  position:relative;
  margin-bottom:24px;
}
.md-field input,
.md-field select,
.md-field textarea{
  width:100%;
  font-family:inherit;
  font-size:16px;
  line-height:24px;
  padding:20px 16px 8px;
  background:var(--md-surface-container-highest);
  color:var(--md-on-surface);
  border:none;
  border-bottom:2px solid var(--md-outline);
  border-radius:var(--shape-sm) var(--shape-sm) 0 0;
  outline:none;
  transition:border-color var(--duration-short) var(--motion-standard);
}
.md-field input:focus,
.md-field select:focus,
.md-field textarea:focus{
  border-bottom-color:var(--md-primary);
  border-bottom-width:3px;
  padding-bottom:7px;
}
.md-field label{
  position:absolute;
  left:16px;top:16px;
  font-size:16px;
  color:var(--md-on-surface-variant);
  pointer-events:none;
  transition:all var(--duration-short) var(--motion-standard);
  transform-origin:left top;
}
.md-field input:focus + label,
.md-field input:not(:placeholder-shown) + label,
.md-field select:focus + label,
.md-field textarea:focus + label,
.md-field textarea:not(:placeholder-shown) + label{
  transform:translateY(-12px) scale(0.75);
  color:var(--md-primary);
}
.md-field select{
  appearance:none;
  cursor:pointer;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23CAC4D0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
}
.md-field .helper{
  font-size:12px;
  color:var(--md-on-surface-variant);
  padding:4px 16px 0;
  letter-spacing:0.4px;
}

/* Small variant for dense forms */
.md-field-sm input{
  padding:14px 12px 6px;
  font-size:14px;
}
.md-field-sm label{
  left:12px;top:14px;
  font-size:14px;
}
.md-field-sm input:focus + label,
.md-field-sm input:not(:placeholder-shown) + label{
  transform:translateY(-10px) scale(0.75);
}

/* ============================================================
   MD3 BUTTONS
   ============================================================ */
button{
  cursor:pointer;
  border:none;
  font-family:inherit;
  border-radius:var(--shape-full);
  font-weight:500;
  letter-spacing:0.1px;
  transition:all var(--duration-short) var(--motion-standard);
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
button:active{transform:scale(.97)}

/* Ripple effect */
.md-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  transform:scale(0);
  animation:rippleEffect .6s var(--motion-standard);
  pointer-events:none;
}
@keyframes rippleEffect{
  to{transform:scale(4);opacity:0}
}

/* Filled Button */
.btn-primary{
  background:var(--md-primary);
  color:var(--md-on-primary);
  padding:10px 24px;
  font-size:14px;
  font-weight:500;
  min-height:40px;
  box-shadow:var(--elevation-0);
}
.btn-primary:hover{
  box-shadow:var(--elevation-1);
  filter:brightness(1.1);
}

/* Filled Tonal Button */
.btn-success{
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
  padding:10px 24px;
  font-size:14px;
  font-weight:500;
  min-height:40px;
}
.btn-success:hover{filter:brightness(1.15)}

/* Error Button */
.btn-danger{
  background:var(--md-error-container);
  color:var(--md-on-error-container);
  padding:10px 24px;
  font-size:14px;
  font-weight:500;
  min-height:40px;
}
.btn-danger:hover{filter:brightness(1.15)}

/* Outlined Button */
.btn-ghost{
  background:transparent;
  color:var(--md-primary);
  border:1px solid var(--md-outline);
  padding:10px 24px;
  font-size:14px;
  font-weight:500;
  min-height:40px;
}
.btn-ghost:hover{
  background:rgba(208,188,255,.08);
  border-color:var(--md-primary);
}

/* Text Button */
.btn-text{
  background:transparent;
  color:var(--md-primary);
  padding:10px 12px;
  font-size:14px;
  font-weight:500;
}
.btn-text:hover{background:rgba(208,188,255,.08)}

/* Sizes */
.btn-sm{padding:6px 16px;font-size:12px;min-height:32px;border-radius:var(--shape-full)}
.btn-xs{padding:4px 10px;font-size:11px;min-height:26px;border-radius:var(--shape-full)}
.btn-icon{
  width:40px;height:40px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--shape-full);
  font-size:18px;
  background:transparent;
  color:var(--md-on-surface-variant);
}
.btn-icon:hover{background:rgba(208,188,255,.08)}
.btn-icon.btn-xs{width:32px;height:32px;font-size:14px}
.btn-icon.btn-sm{width:36px;height:36px;font-size:16px}

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 10px;
  border-radius:var(--shape-full);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.5px;
  line-height:20px;
}
.badge-success{background:var(--success-container);color:var(--success)}
.badge-error{background:var(--error-container);color:var(--error)}
.badge-warning{background:var(--warning-container);color:var(--warning)}
.badge-accent{background:var(--accent-container);color:var(--accent)}

/* ============================================================
   MD3 SWITCH
   ============================================================ */
.md-switch{
  position:relative;
  width:52px;
  height:32px;
  flex-shrink:0;
  cursor:pointer;
}
.md-switch input{display:none}
.md-switch .track{
  position:absolute;
  inset:0;
  background:var(--md-surface-container-highest);
  border:2px solid var(--md-outline);
  border-radius:var(--shape-full);
  transition:all var(--duration-medium) var(--motion-standard);
}
.md-switch .thumb{
  position:absolute;
  top:6px;left:6px;
  width:16px;height:16px;
  background:var(--md-outline);
  border-radius:50%;
  transition:all var(--duration-medium) var(--motion-standard);
  z-index:1;
}
.md-switch input:checked ~ .track{
  background:var(--md-primary);
  border-color:var(--md-primary);
}
.md-switch input:checked ~ .thumb{
  transform:translateX(20px);
  background:var(--md-on-primary);
  width:24px;
  height:24px;
  top:2px;
  left:2px;
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
#app{
  display:none;
  height:100vh;
  height:100dvh;
  flex-direction:row;
}

/* ---------- Sidebar (Desktop) ---------- */
#sidebar{
  width:280px;
  background:var(--md-surface-container-low);
  border-right:1px solid var(--md-outline-variant);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  z-index:10;
  transition:width var(--duration-medium) var(--motion-standard);
}
.sidebar-header{
  padding:24px 20px 20px;
  border-bottom:1px solid var(--md-outline-variant);
}
.sidebar-header .logo{
  font-size:24px;
  font-weight:500;
  letter-spacing:0.15px;
  background:linear-gradient(135deg,var(--md-primary),var(--md-tertiary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sidebar-header .subtitle{
  color:var(--md-on-surface-variant);
  font-size:12px;
  letter-spacing:0.5px;
  margin-top:2px;
}
.sidebar-nav{
  flex:1;
  padding:12px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-radius:var(--shape-full);
  color:var(--md-on-surface-variant);
  cursor:pointer;
  transition:all var(--duration-short) var(--motion-standard);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.1px;
  min-height:48px;
  margin-bottom:4px;
  position:relative;
  overflow:hidden;
}
.nav-item:hover{
  background:rgba(208,188,255,.08);
  color:var(--md-on-surface);
}
.nav-item.active{
  background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);
}
.nav-item .icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.sidebar-footer{
  padding:16px;
  border-top:1px solid var(--md-outline-variant);
}
.sidebar-footer .server{
  color:var(--md-on-surface);
  font-size:13px;
  font-weight:500;
  word-break:break-all;
  padding:8px 12px;
  background:var(--md-surface-container);
  border-radius:var(--shape-sm);
  margin-bottom:12px;
  letter-spacing:0.25px;
}

/* ---------- Main Content ---------- */
#main{
  flex:1;
  overflow-y:auto;
  padding:24px 32px;
  scroll-behavior:smooth;
}

/* ============================================================
   BOTTOM NAVIGATION BAR (Mobile)
   ============================================================ */
#bottom-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--md-surface-container);
  border-top:1px solid var(--md-outline-variant);
  z-index:100;
  padding-bottom:env(safe-area-inset-bottom,0);
  box-shadow:var(--elevation-2);
}
.bottom-nav-items{
  display:flex;
  justify-content:space-around;
  align-items:center;
  height:64px;
}
.bottom-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  padding:8px 0;
  min-width:48px;
  position:relative;
  color:var(--md-on-surface-variant);
  transition:color var(--duration-short) var(--motion-standard);
  -webkit-tap-highlight-color:transparent;
  background:none;
  border:none;
  font-family:inherit;
}
.bottom-nav-item .icon-wrap{
  width:64px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--shape-full);
  transition:background var(--duration-short) var(--motion-standard);
  font-size:20px;
}
.bottom-nav-item.active .icon-wrap{
  background:var(--md-secondary-container);
}
.bottom-nav-item.active{
  color:var(--md-on-surface);
}
.bottom-nav-item .nav-label{
  font-size:12px;
  font-weight:500;
  letter-spacing:0.5px;
}

/* Mobile hamburger overlay */
#mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:19;
}
.mobile-header{
  display:none;
  position:fixed;
  top:0;left:0;right:0;
  height:64px;
  background:var(--md-surface-container);
  border-bottom:1px solid var(--md-outline-variant);
  z-index:15;
  padding:0 16px;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--elevation-1);
}
.mobile-header .title{
  font-size:20px;
  font-weight:500;
  letter-spacing:0.15px;
  background:linear-gradient(135deg,var(--md-primary),var(--md-tertiary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ============================================================
   PAGE
   ============================================================ */
.page{display:none}
.page.active{display:block}
.page-header{margin-bottom:28px}
.page-header h1{
  font-size:28px;
  font-weight:400;
  letter-spacing:-0.25px;
}
.page-header p{
  color:var(--md-on-surface-variant);
  font-size:14px;
  margin-top:4px;
  letter-spacing:0.25px;
}
.page-header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:28px;
}
.stat-card{
  background:var(--md-surface-container);
  border-radius:var(--shape-md);
  padding:20px;
  transition:all var(--duration-short) var(--motion-standard);
  box-shadow:var(--elevation-1);
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  border-radius:var(--shape-md) var(--shape-md) 0 0;
}
.stat-card.accent::before{background:var(--md-primary)}
.stat-card.success::before{background:var(--success)}
.stat-card.error::before{background:var(--error)}
.stat-card.warning::before{background:var(--warning)}
.stat-card:hover{box-shadow:var(--elevation-2);transform:translateY(-2px)}
.stat-card .label{
  font-size:12px;
  color:var(--md-on-surface-variant);
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:500;
}
.stat-card .value{
  font-size:36px;
  font-weight:400;
  margin-top:4px;
  letter-spacing:-0.5px;
  line-height:1.2;
}
.stat-card.success .value{color:var(--success)}
.stat-card.error .value{color:var(--error)}
.stat-card.warning .value{color:var(--warning)}
.stat-card.accent .value{color:var(--md-primary)}

/* ============================================================
   BOT CARDS
   ============================================================ */
.bot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:16px;
}
.bot-card{
  background:var(--md-surface-container);
  border-radius:var(--shape-md);
  padding:20px;
  transition:all var(--duration-medium) var(--motion-standard);
  box-shadow:var(--elevation-1);
  position:relative;
}
.bot-card:hover{box-shadow:var(--elevation-2);transform:translateY(-2px)}
.bot-card.disabled{opacity:.55}
.bot-card.disabled .bot-card-header .name{text-decoration:line-through}
.bot-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.bot-card-header .name{
  font-size:16px;
  font-weight:500;
  letter-spacing:0.15px;
}
.status-dot{
  width:10px;height:10px;
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 8px currentColor;
  flex-shrink:0;
}
.status-dot.online{background:var(--success);color:var(--success)}
.status-dot.offline{background:var(--error);color:var(--error)}
.status-dot.disabled{background:var(--md-outline);color:var(--md-outline)}
.status-dot.reconnecting{background:var(--warning);color:var(--warning);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.bot-card .meta{
  font-size:13px;
  color:var(--md-on-surface-variant);
  margin-bottom:12px;
  letter-spacing:0.25px;
}
.bot-card .meta span{display:block;margin-bottom:3px}
.bot-card .actions{display:flex;gap:8px;flex-wrap:wrap}

/* Badges on bot cards */
.msa-badge{
  background:var(--md-primary);
  color:var(--md-on-primary);
  font-size:10px;
  padding:2px 8px;
  border-radius:var(--shape-full);
  font-weight:500;
  letter-spacing:0.5px;
  animation:pulse 1.5s infinite;
}
.disabled-badge{
  background:var(--md-surface-container-highest);
  color:var(--md-on-surface-variant);
  font-size:10px;
  padding:2px 8px;
  border-radius:var(--shape-full);
  font-weight:500;
  letter-spacing:0.5px;
}
.metrics-row{
  display:flex;
  gap:12px;
  margin-top:8px;
  margin-bottom:12px;
  font-size:12px;
  color:var(--md-on-surface-variant);
}
.metrics-row .metric{display:flex;align-items:center;gap:4px}
.metrics-row .metric .value{color:var(--md-on-surface);font-weight:500}
.proxy-badge{
  background:rgba(129,140,248,.12);
  color:#818cf8;
  font-size:10px;
  padding:2px 8px;
  border-radius:var(--shape-full);
  font-weight:500;
  letter-spacing:0.5px;
  margin-right:4px;
}
.uptime-badge{
  font-size:11px;
  padding:2px 8px;
  border-radius:var(--shape-full);
  font-weight:500;
  letter-spacing:0.5px;
}
.uptime-badge.good{background:rgba(134,239,172,.12);color:var(--success)}
.uptime-badge.warn{background:rgba(252,211,77,.12);color:var(--warning)}
.uptime-badge.bad{background:rgba(242,184,181,.12);color:var(--error)}
.reconnect-badge{
  font-size:10px;
  padding:1px 6px;
  border-radius:var(--shape-full);
  background:rgba(252,211,77,.12);
  color:var(--warning);
  font-weight:500;
  margin-left:6px;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap{
  background:var(--md-surface-container);
  border-radius:var(--shape-md);
  overflow:hidden;
  box-shadow:var(--elevation-1);
}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;
  padding:14px 16px;
  font-size:12px;
  color:var(--md-on-surface-variant);
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-bottom:1px solid var(--md-outline-variant);
  font-weight:500;
  background:var(--md-surface-container-high);
}
td{
  padding:14px 16px;
  border-bottom:1px solid var(--md-outline-variant);
  font-size:14px;
  letter-spacing:0.25px;
}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(208,188,255,.04)}

/* Mobile: table to card layout */
.mobile-card{
  display:none;
  background:var(--md-surface-container);
  border-radius:var(--shape-md);
  padding:16px;
  margin-bottom:12px;
  box-shadow:var(--elevation-1);
}
.mobile-card .card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.mobile-card .card-top .name{font-weight:500;font-size:15px}
.mobile-card .card-info{
  font-size:13px;
  color:var(--md-on-surface-variant);
  margin-bottom:12px;
}
.mobile-card .card-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ============================================================
   COMMANDS PAGE
   ============================================================ */
.cmd-area{
  display:flex;
  gap:12px;
  margin-bottom:24px;
  align-items:flex-end;
}
.cmd-area .md-field{flex:1;margin-bottom:0}
.cmd-area .md-field select{min-width:160px}
.cmd-area .btn-primary{flex-shrink:0}

.quick-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin-bottom:28px;
}
.quick-cmd{
  background:var(--md-surface-container);
  border-radius:var(--shape-md);
  padding:16px;
  cursor:pointer;
  transition:all var(--duration-short) var(--motion-standard);
  position:relative;
  box-shadow:var(--elevation-0);
  border:1px solid var(--md-outline-variant);
}
.quick-cmd:hover{
  box-shadow:var(--elevation-1);
  border-color:var(--md-primary);
  transform:translateY(-1px);
}
.quick-cmd .cmd-name{
  font-weight:500;
  font-size:14px;
  margin-bottom:4px;
  color:var(--md-primary);
  letter-spacing:0.1px;
}
.quick-cmd .cmd-desc{
  font-size:12px;
  color:var(--md-on-surface-variant);
  letter-spacing:0.4px;
}
.quick-cmd .cmd-actions{
  position:absolute;top:8px;right:8px;
  display:none;gap:4px;
}
.quick-cmd:hover .cmd-actions{display:flex}

.history-item{
  padding:10px 14px;
  border-bottom:1px solid var(--md-outline-variant);
  font-family:'Cascadia Code','Fira Code',monospace;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:background var(--duration-short) var(--motion-standard);
}
.history-item:hover{background:rgba(208,188,255,.04)}
.history-item:last-child{border-bottom:none}
.history-item .time{
  color:var(--md-on-surface-variant);
  font-size:11px;
  flex-shrink:0;
  margin-left:12px;
}

/* ============================================================
   CONFIG PAGE
   ============================================================ */
.config-section{
  background:var(--md-surface-container);
  border-radius:var(--shape-md);
  padding:24px;
  margin-bottom:16px;
  box-shadow:var(--elevation-1);
}
.config-section h3{
  font-size:18px;
  font-weight:400;
  letter-spacing:-0.15px;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--md-outline-variant);
}
.config-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.config-row:last-child{margin-bottom:0}
.config-row label{
  min-width:160px;
  font-size:14px;
  color:var(--md-on-surface-variant);
  letter-spacing:0.25px;
}
.config-row input,
.config-row select{
  flex:1;
  max-width:360px;
  font-family:inherit;
  font-size:14px;
  padding:12px 16px;
  background:var(--md-surface-container-highest);
  color:var(--md-on-surface);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-sm);
  outline:none;
  transition:border-color var(--duration-short) var(--motion-standard);
}
.config-row input:focus,
.config-row select:focus{
  border-color:var(--md-primary);
  border-width:2px;
  padding:11px 15px;
}

/* ============================================================
   LOGS PAGE
   ============================================================ */
.log-controls{
  display:flex;
  gap:12px;
  margin-bottom:16px;
  align-items:center;
  flex-wrap:wrap;
}
.log-controls select,
.log-controls input{
  max-width:200px;
  font-family:inherit;
  font-size:13px;
  padding:10px 14px;
  background:var(--md-surface-container-highest);
  color:var(--md-on-surface);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-sm);
  outline:none;
  transition:border-color var(--duration-short) var(--motion-standard);
}
.log-controls select:focus,
.log-controls input:focus{
  border-color:var(--md-primary);
  border-width:2px;
}
.log-controls select{
  appearance:none;
  cursor:pointer;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23CAC4D0'%3E%3Cpath d='M6 8l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
}

.log-viewer{
  background:var(--md-surface-container-lowest);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-md);
  height:calc(100vh - 260px);
  overflow-y:auto;
  padding:16px;
  font-family:'Cascadia Code','Fira Code',monospace;
  font-size:12px;
  line-height:1.8;
}
.log-line{
  white-space:pre-wrap;
  word-break:break-all;
  padding:2px 0;
  border-radius:var(--shape-xs);
  transition:background var(--duration-short) var(--motion-standard);
}
.log-line:hover{background:rgba(208,188,255,.04)}
.log-line .time{color:var(--md-outline)}
.log-line .bot{color:var(--md-primary);font-weight:500}
.log-line .log-type{
  font-size:10px;
  padding:1px 6px;
  border-radius:var(--shape-xs);
  font-weight:500;
  margin-right:6px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.log-line .log-type.chat{background:rgba(134,239,172,.12);color:var(--success)}
.log-line .log-type.system{background:rgba(147,143,153,.12);color:var(--md-on-surface-variant)}
.log-line .log-type.error{background:rgba(242,184,181,.12);color:var(--error)}
.log-line .log-type.auth{background:rgba(208,188,255,.12);color:var(--md-primary)}
.log-line.log-chat .log-msg{color:var(--md-on-surface)}
.log-line.log-system .log-msg{color:var(--md-on-surface-variant)}
.log-line.log-error .log-msg{color:var(--error)}
.log-line.log-auth .log-msg{color:var(--md-primary)}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:16px;
  animation:fadeIn var(--duration-medium) var(--motion-standard);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal{
  background:var(--md-surface-container-high);
  border-radius:var(--shape-xl);
  padding:28px;
  width:480px;
  max-width:90vw;
  box-shadow:var(--elevation-4);
  animation:modalIn var(--duration-medium) var(--motion-decelerate);
  max-height:85vh;
  overflow-y:auto;
}
@keyframes modalIn{
  from{transform:scale(.92);opacity:0}
  to{transform:scale(1);opacity:1}
}
.modal h3{
  font-size:22px;
  font-weight:400;
  letter-spacing:-0.15px;
  margin-bottom:20px;
}
.modal .form-group{margin-bottom:16px}
.modal .form-group label{
  display:block;
  font-size:12px;
  color:var(--md-on-surface-variant);
  margin-bottom:6px;
  font-weight:500;
  letter-spacing:0.5px;
}
.modal .form-group input,
.modal .form-group select{
  width:100%;
  padding:12px 16px;
  font-family:inherit;
  font-size:14px;
  background:var(--md-surface-container-highest);
  color:var(--md-on-surface);
  border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-sm);
  outline:none;
  transition:border-color var(--duration-short) var(--motion-standard);
}
.modal .form-group input:focus,
.modal .form-group select:focus{
  border-color:var(--md-primary);
  border-width:2px;
}
.modal .form-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:24px;
}

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--md-on-surface-variant);
}
.empty-state .icon{font-size:56px;margin-bottom:16px;opacity:.4}
.empty-state p{font-size:14px;letter-spacing:0.25px}

/* ============================================================
   MSA AUTH MODAL
   ============================================================ */
.msa-modal .modal{width:520px;text-align:center}
.msa-modal .msa-icon{font-size:56px;margin-bottom:12px}
.msa-modal .msa-title{font-size:22px;font-weight:400;margin-bottom:6px}
.msa-modal .msa-subtitle{color:var(--md-on-surface-variant);font-size:14px;margin-bottom:24px;letter-spacing:0.25px}
.msa-modal .msa-code-box{
  background:var(--md-surface-container-highest);
  border:2px dashed var(--md-primary);
  border-radius:var(--shape-md);
  padding:24px;
  margin-bottom:16px;
  position:relative;
}
.msa-modal .msa-code{
  font-size:36px;
  font-weight:400;
  letter-spacing:8px;
  color:var(--md-primary);
  font-family:'Cascadia Code','Fira Code',monospace;
}
.msa-modal .msa-url{
  color:var(--md-on-surface-variant);
  font-size:13px;
  margin-bottom:20px;
  word-break:break-all;
  letter-spacing:0.25px;
}
.msa-modal .msa-url a{
  color:var(--md-primary);
  text-decoration:underline;
  font-weight:500;
}
.msa-modal .msa-steps{
  text-align:left;
  margin:16px 0;
  padding:16px;
  background:var(--md-surface-container);
  border-radius:var(--shape-md);
}
.msa-modal .msa-steps ol{margin:0;padding-left:20px}
.msa-modal .msa-steps li{
  margin-bottom:8px;
  font-size:13px;
  color:var(--md-on-surface-variant);
  line-height:1.6;
}
.msa-modal .msa-steps li strong{color:var(--md-on-surface)}
.msa-modal .msa-spinner{
  display:inline-block;
  width:20px;height:20px;
  border:3px solid var(--md-outline-variant);
  border-top-color:var(--md-primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin-right:8px;
  vertical-align:middle;
}
.msa-modal .msa-waiting{color:var(--md-on-surface-variant);font-size:13px;margin-top:12px}
.msa-modal .msa-expire{color:var(--warning);font-size:12px;margin-top:8px}
.msa-modal .copy-btn{position:absolute;top:12px;right:12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   BOT DETAIL MODAL
   ============================================================ */
.bot-detail-modal .modal{width:580px;max-height:80vh;overflow-y:auto}
.bot-detail-modal .detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.bot-detail-modal .detail-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:16px;
}
.bot-detail-modal .detail-stat{
  background:var(--md-surface-container);
  border-radius:var(--shape-sm);
  padding:14px;
  text-align:center;
}
.bot-detail-modal .detail-stat .label{
  font-size:11px;
  color:var(--md-on-surface-variant);
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:500;
}
.bot-detail-modal .detail-stat .value{
  font-size:20px;
  font-weight:400;
  margin-top:4px;
  letter-spacing:-0.25px;
}
.bot-detail-modal .history-list{
  max-height:200px;
  overflow-y:auto;
  border:1px solid var(--md-outline-variant);
  border-radius:var(--shape-sm);
}
.bot-detail-modal .history-item{
  padding:10px 14px;
  border-bottom:1px solid var(--md-outline-variant);
  font-size:13px;
}
.bot-detail-modal .history-item:last-child{border-bottom:none}
.bot-detail-modal .history-item .event{font-weight:500}
.bot-detail-modal .history-item .event.connected{color:var(--success)}
.bot-detail-modal .history-item .event.disconnected{color:var(--md-on-surface-variant)}
.bot-detail-modal .history-item .event.kicked{color:var(--error)}
.bot-detail-modal .history-item .event.maxAttemptsReached{color:var(--error)}
.bot-detail-modal .history-item .reason{color:var(--error);font-size:11px}
.bot-detail-modal .history-item .h-time{color:var(--md-on-surface-variant);font-size:11px}

/* ============================================================
   UPTIME CHART
   ============================================================ */
.uptime-section{
  margin-top:32px;
  margin-bottom:16px;
}
.uptime-header{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:16px;
}
.uptime-header h2{
  font-size:18px;
  font-weight:500;
  letter-spacing:0.15px;
}
.uptime-tz{
  font-size:11px;
  color:var(--md-on-surface-variant);
  letter-spacing:0.4px;
  background:var(--md-surface-container-high);
  padding:2px 10px;
  border-radius:var(--shape-full);
}
.chart-container{
  background:var(--md-surface-container);
  border-radius:var(--shape-md);
  padding:20px;
  box-shadow:var(--elevation-1);
  height:220px;
  position:relative;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast{
  position:fixed;
  bottom:24px;
  right:24px;
  padding:14px 24px;
  border-radius:var(--shape-sm);
  font-size:14px;
  font-weight:500;
  letter-spacing:0.25px;
  z-index:9999;
  animation:slideIn var(--duration-medium) var(--motion-decelerate);
  box-shadow:var(--elevation-3);
}
.toast.success{background:var(--success-container);color:var(--success)}
.toast.error{background:var(--error-container);color:var(--error)}
.toast.info{background:var(--accent-container);color:var(--accent)}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ============================================================
   RESPONSIVE: TABLET
   ============================================================ */
@media(max-width:1024px){
  #sidebar{width:72px}
  .sidebar-header h2,.sidebar-header small,.nav-item span:not(.icon),.sidebar-footer{display:none}
  .sidebar-header{padding:16px 8px;text-align:center}
  .nav-item{justify-content:center;padding:12px;gap:0}
  #main{padding:20px 16px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .config-row{flex-direction:column;align-items:stretch}
  .config-row label{min-width:auto}
  .config-row input,.config-row select{max-width:100%}
}

/* ============================================================
   RESPONSIVE: MOBILE
   ============================================================ */
@media(max-width:768px){
  #sidebar{display:none}
  #bottom-nav{display:block}
  .mobile-header{display:flex}
  #mobile-overlay.open{
    display:block;
    animation:fadeIn var(--duration-medium) var(--motion-standard);
  }

  /* Slide-in mobile sidebar */
  #sidebar.mobile-open{
    display:flex;
    position:fixed;
    top:0;left:0;bottom:0;
    width:280px;
    z-index:20;
    animation:slideInLeft var(--duration-medium) var(--motion-decelerate);
    box-shadow:var(--elevation-4);
  }
  @keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}

  #sidebar.mobile-open .sidebar-header h2,
  #sidebar.mobile-open .sidebar-header small,
  #sidebar.mobile-open .nav-item span:not(.icon),
  #sidebar.mobile-open .sidebar-footer{display:block}
  #sidebar.mobile-open .sidebar-header{padding:24px 20px 20px;text-align:left}
  #sidebar.mobile-open .nav-item{justify-content:flex-start;padding:12px 16px;gap:12px}

  #main{
    padding:80px 16px 80px;
  }

  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:14px}
  .stat-card .value{font-size:28px}

  .bot-grid{grid-template-columns:1fr;gap:10px}
  .bot-card{padding:16px}

  .page-header h1{font-size:24px}

  /* Table to card */
  .table-wrap table{display:none}
  .mobile-card{display:block}

  .cmd-area{flex-direction:column}
  .cmd-area .md-field select{min-width:auto}
  .cmd-area .btn-primary{width:100%}

  .quick-grid{grid-template-columns:1fr;gap:8px}

  .config-section{padding:16px}
  .config-row{flex-direction:column;align-items:stretch;gap:8px}
  .config-row label{min-width:auto}

  .log-controls{gap:8px}
  .log-controls select,.log-controls input{max-width:100%;flex:1;min-width:0}
  .log-viewer{height:calc(100vh - 340px);padding:10px;font-size:11px}

  .modal{border-radius:var(--shape-xl) var(--shape-xl) 0 0;width:100%;max-width:100%;padding:24px 16px;align-self:flex-end;max-height:90vh}
  .modal-overlay{align-items:flex-end;padding:0}

  .bot-detail-modal .modal{width:100%;max-width:100%}
  .bot-detail-modal .detail-stats{grid-template-columns:repeat(2,1fr)}
  .msa-modal .modal{width:100%;max-width:100%}
  .msa-modal .msa-code{font-size:28px;letter-spacing:4px}

  .toast{left:16px;right:16px;bottom:80px;text-align:center}

  .history-item{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ============================================================
   RESPONSIVE: SMALL PHONE
   ============================================================ */
@media(max-width:400px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card .value{font-size:24px}
  .stat-card .label{font-size:10px}
  .stat-card{padding:12px}

  .bot-card-header .name{font-size:14px}
  .bot-card .actions{flex-direction:column}
  .bot-card .actions button{width:100%;justify-content:center}

  .login-card{padding:32px 24px}
  .login-card h1{font-size:32px}
}