:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --card: #ffffff;
  --border: #e4eaf2;
  --border2: #d2dae6;
  --accent: #4f46e5;
  --accent2: #6366f1;
  --gold: #d97706;
  --green: #059669;
  --red: #dc2626;
  --purple: #7c3aed;
  --text: #172033;
  --text2: #5d6b82;
  --text3: #8c99ad;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 8px 24px rgba(15, 23, 42, .045);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, .14);
}

body {
  background:
    radial-gradient(circle at 82% 2%, rgba(99, 102, 241, .08), transparent 26rem),
    var(--bg);
}

button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(99, 102, 241, .22);
  outline-offset: 2px;
}

#loginPage {
  position: relative;
  overflow: hidden;
  background: #0b1220;
  isolation: isolate;
}
#loginPage::before, #loginPage::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  z-index: -1;
}
#loginPage::before {
  width: 44rem;
  height: 44rem;
  left: -14rem;
  top: -20rem;
  background: radial-gradient(circle, rgba(79, 70, 229, .55), transparent 67%);
}
#loginPage::after {
  width: 38rem;
  height: 38rem;
  right: -12rem;
  bottom: -20rem;
  background: radial-gradient(circle, rgba(14, 165, 233, .35), transparent 68%);
}
.login-box {
  width: 440px;
  padding: 48px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
}
.login-box .logo-mark { background: linear-gradient(135deg, #6366f1, #4338ca); }

#mainApp {
  min-height: 100vh;
  padding-left: 264px;
}
.topbar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 264px;
  height: 100vh;
  padding: 24px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  overflow: hidden;
  border: 0;
  background: linear-gradient(180deg, #111a2e 0%, #0b1220 100%);
  box-shadow: 16px 0 42px rgba(15, 23, 42, .09);
}
.brand-block {
  width: 100%;
  margin: 0 !important;
  padding: 0 8px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: #fff;
}
.brand-block .logo-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px;
  background: linear-gradient(135deg, #818cf8, #4f46e5);
  box-shadow: 0 8px 22px rgba(79, 70, 229, .4);
}
.brand-block .logo-text { font-size: 14px !important; letter-spacing: .8px !important; }
.nav-list {
  width: 100%;
  flex: 1 !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.nav-tab {
  width: 100%;
  height: 45px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  color: #aeb9cb;
  text-align: left;
  font-size: 13px;
  font-weight: 550;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-tab:hover { color: #fff; background: rgba(255, 255, 255, .075); transform: translateX(2px); }
.nav-tab.active {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, .95), rgba(79, 70, 229, .86));
  box-shadow: 0 8px 18px rgba(49, 46, 129, .28);
}
.account-tools {
  width: 100%;
  margin: 0 !important;
  padding: 16px 4px 0;
  display: grid !important;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.account-tools #wsBadge, .account-tools #topProfit {
  width: 100%;
  padding: 7px 10px !important;
  text-align: center;
  border-color: rgba(129, 140, 248, .24) !important;
  background: rgba(99, 102, 241, .13) !important;
  color: #c7d2fe !important;
}
.account-tools .btn { justify-content: center; color: #cbd5e1; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.account-tools .btn:hover { color: #fff; background: rgba(255,255,255,.1); }

.month-toolbar {
  top: 0;
  padding: 14px 28px;
  min-height: 66px;
  border-color: var(--border);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .025);
}
.month-chip { background: #eef2ff; border-color: #dfe3ff; color: #4338ca; }
.month-toolbar .inp { min-height: 38px; background: #fff; }
.page { max-width: 1500px; padding: 30px 34px 44px; }
.page.active > * { animation-duration: .28s; }

.stat-grid { gap: 14px; }
.stat-card {
  min-height: 132px;
  padding: 19px 19px 18px;
  border-left-width: 1px;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute;
  inset: auto -26px -34px auto;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: currentColor;
  opacity: .04;
}
.stat-card:hover { transform: translateY(-3px); }
.stat-card .sl { margin-bottom: 12px; color: #718096; letter-spacing: .75px; }
.stat-card .sv { font-size: clamp(18px, 1.55vw, 24px); letter-spacing: -.7px; }

.tbl-wrap, .chart-card, .cust-card {
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.tbl-wrap { border-radius: 17px; }
.tbl th { position: sticky; top: 0; z-index: 1; background: #f8fafc; color: #718096; }
.tbl td { border-color: #edf1f6; }
.tbl tbody tr { transition: background .14s ease; }
.tbl tbody tr:hover td { background: #f8faff; }
.chart-card { padding: 24px; }
.sec-title { font-size: 17px; letter-spacing: -.2px; }
.sec-sub { color: #7a879a; }
.inp, .search-inp, .items-tbl .ii {
  border-color: #dbe2ec;
  background-color: #fbfcfe;
}
.inp:hover, .search-inp:hover, .items-tbl .ii:hover { border-color: #b9c4d3; }
.btn { border-radius: 10px; }
.btn-primary { background: linear-gradient(135deg, #5b55e7, #4338ca); box-shadow: 0 8px 18px rgba(79, 70, 229, .19); }
.btn-primary:hover { background: linear-gradient(135deg, #4f46e5, #3730a3); transform: translateY(-1px); }
.filter-chip.active { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }
.modal-bg { background: rgba(15, 23, 42, .6); }
.modal { border: 1px solid rgba(255,255,255,.72); box-shadow: 0 28px 80px rgba(15,23,42,.25); }
.toast { border-left: 4px solid var(--accent); }

@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  #mainApp { padding: 72px 0 84px; }
  .topbar {
    inset: 0 0 auto 0;
    width: 100%;
    height: 72px;
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    overflow: visible;
  }
  .brand-block { width: auto; padding: 0; border: 0; }
  .nav-list {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    height: 72px;
    padding: 9px 10px;
    flex-direction: row;
    gap: 5px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: rgba(11, 18, 32, .97);
    border-top: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 -8px 30px rgba(15,23,42,.16);
  }
  .nav-tab { width: auto; min-width: max-content; height: 52px; padding: 0 14px; text-align: center; }
  .nav-tab:hover { transform: none; }
  .account-tools {
    width: auto;
    margin-left: auto !important;
    padding: 0;
    display: flex !important;
    border: 0;
  }
  .account-tools #topProfit { display: none; }
  .account-tools #wsBadge { width: auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .account-tools .btn { width: auto; }
  .month-toolbar { top: 72px; }
  .page { padding: 24px 20px 36px; }
}

@media (max-width: 640px) {
  .login-box { padding: 36px 26px; border-radius: 21px; }
  .brand-block .logo-text { display: block; }
  .account-tools #wsBadge { display: none !important; }
  .account-tools .btn { padding: 9px 11px; font-size: 0; }
  .account-tools .btn::first-letter { font-size: 17px; }
  .month-toolbar { position: relative; top: auto; padding: 13px 16px; }
  .month-toolbar-left, .month-toolbar-right { width: 100%; }
  .month-toolbar .month-chip { display: none; }
  .month-toolbar .inp { width: calc(100% - 112px) !important; }
  .month-toolbar .btn { width: 104px !important; justify-content: center; }
  .page { padding: 20px 14px 32px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { min-height: 116px; padding: 15px; }
  .stat-card .sv { font-size: 16px; word-break: normal; }
  .chart-card { padding: 19px 16px; }
  .modal { max-width: calc(100vw - 18px); max-height: 94vh; padding: 21px 17px; }
  .cust-card { align-items: flex-start; flex-wrap: wrap; }
  .cust-card > div:nth-last-child(2) { margin-left: 56px; text-align: left !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}