:root{
  --bg: #0b1220;
  --surface: #0f172a;
  --card: #0b1327;
  --card2: rgba(255,255,255,.04);
  --text: #e5e7eb;
  --muted: rgba(229,231,235,.72);
  --muted2: rgba(229,231,235,.55);
  --primary: #22c55e;
  --primary2: #16a34a;
  --system-primary-soft: rgba(34,197,94,.18);
  --system-primary-surface: rgba(34,197,94,.12);
  --system-primary-ring: rgba(34,197,94,.24);
  --system-primary-contrast: #f8fafc;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #38bdf8;
  --border: rgba(255,255,255,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.45);
  --shadow2: 0 6px 18px rgba(0,0,0,.35);
  --radius: 16px;
  --radius2: 12px;
  --pad: 18px;
  --pad2: 14px;
  --pad3: 10px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  overflow-x:hidden;
  background:
    linear-gradient(180deg, #09111f 0%, #0b1528 45%, #0b1627 70%, #090f1a 100%);
  background-attachment: fixed;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 20% 12%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(820px 460px at 85% 5%, rgba(56,189,248,.16), transparent 60%),
    radial-gradient(900px 620px at 55% 120%, rgba(34,197,94,.10), transparent 70%);
  opacity:.9;
  z-index:-1;
}

.container{
  width:min(1120px, calc(100% - 32px));
  margin-inline:auto;
}

body.login-page{
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
::selection{background:var(--system-primary-ring)}

.kbd{
  font-family:var(--mono);
  font-size:12px;
  padding:2px 6px;
  border:1px solid var(--border);
  border-bottom-color:rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
}

html[data-system-theme="light"]{
  --bg: #f3f7fb;
  --surface: #ffffff;
  --card: #ffffff;
  --card2: rgba(15,23,42,.04);
  --text: #162033;
  --muted: rgba(22,32,51,.68);
  --muted2: rgba(22,32,51,.5);
  --border: rgba(148,163,184,.26);
  --shadow: 0 18px 48px rgba(15,23,42,.12);
  --shadow2: 0 10px 24px rgba(15,23,42,.08);
}

html[data-system-theme="light"] body{
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef4fa 48%, #edf3f8 100%);
}

html[data-system-theme="light"] body::before{
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(255,255,255,.94), transparent 58%),
    radial-gradient(760px 420px at 86% 4%, var(--system-primary-soft), transparent 60%),
    radial-gradient(980px 620px at 55% 118%, rgba(56,189,248,.10), transparent 68%);
  opacity:1;
}

html[data-system-theme="light"] .sidebar,
html[data-system-theme="light"] .main,
html[data-system-theme="light"] .topbar,
html[data-system-theme="light"] .brand,
html[data-system-theme="light"] .card,
html[data-system-theme="light"] .table-wrap,
html[data-system-theme="light"] .page-hero,
html[data-system-theme="light"] .filter-shell,
html[data-system-theme="light"] .table-panel,
html[data-system-theme="light"] .modal,
html[data-system-theme="light"] .loading .box,
html[data-system-theme="light"] .profile-pop,
html[data-system-theme="light"] .notify-panel,
html[data-system-theme="light"] .ui-task-notice{
  color:var(--text);
}

html[data-system-theme="light"] .sidebar{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,248,252,.96));
  border-right-color:var(--border);
}

html[data-system-theme="light"] .main{
  background:linear-gradient(180deg, rgba(248,251,255,.9) 0%, rgba(241,246,250,.96) 100%);
}

html[data-system-theme="light"] .topbar{
  background:rgba(255,255,255,.86);
  border-bottom-color:var(--border);
}

html[data-system-theme="light"] .brand,
html[data-system-theme="light"] .card,
html[data-system-theme="light"] .table-wrap,
html[data-system-theme="light"] .filter-shell,
html[data-system-theme="light"] .table-panel,
html[data-system-theme="light"] .modal,
html[data-system-theme="light"] .loading .box,
html[data-system-theme="light"] .profile-pop,
html[data-system-theme="light"] .notify-panel{
  background:rgba(255,255,255,.9) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow2) !important;
}

html[data-system-theme="light"] .page-hero{
  background:
    linear-gradient(160deg, rgba(255,255,255,.96), rgba(245,249,253,.94)),
    radial-gradient(420px 220px at 12% 0%, var(--system-primary-soft), transparent 70%) !important;
  box-shadow:var(--shadow) !important;
}

html[data-system-theme="light"] .btn{
  background:rgba(255,255,255,.88);
  border-color:var(--border);
  color:var(--text);
}

html[data-system-theme="light"] .btn:hover{
  background:#ffffff;
  border-color:rgba(100,116,139,.3);
}

html[data-system-theme="light"] .btn.primary{
  background:linear-gradient(180deg, var(--system-primary-soft), rgba(255,255,255,.92));
  border-color:rgba(15,23,42,.12);
  color:var(--text);
}

html[data-system-theme="light"] .badge{
  background:rgba(255,255,255,.82);
  color:var(--muted);
  border-color:var(--border);
}

html[data-system-theme="light"] .badge.good{
  background:rgba(34,197,94,.12);
  color:#166534;
}

html[data-system-theme="light"] .badge.warn{
  background:rgba(245,158,11,.14);
  color:#92400e;
}

html[data-system-theme="light"] .badge.bad{
  background:rgba(239,68,68,.12);
  color:#991b1b;
}

html[data-system-theme="light"] .nav a,
html[data-system-theme="light"] .nav .ico,
html[data-system-theme="light"] .topbar .search,
html[data-system-theme="light"] .profile-btn,
html[data-system-theme="light"] .profile-pop .item,
html[data-system-theme="light"] .notify-btn{
  background:rgba(255,255,255,.8);
  border-color:var(--border);
  color:var(--text);
}

html[data-system-theme="light"] .nav a.active{
  background:var(--system-primary-surface);
  border-color:rgba(15,23,42,.12);
}

html[data-system-theme="light"] input,
html[data-system-theme="light"] select,
html[data-system-theme="light"] textarea,
html[data-system-theme="light"] .filter-input,
html[data-system-theme="light"] .topbar .search input{
  background:rgba(255,255,255,.88) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

html[data-system-theme="light"] input:focus,
html[data-system-theme="light"] select:focus,
html[data-system-theme="light"] textarea:focus,
html[data-system-theme="light"] .filter-input:focus{
  border-color:rgba(15,23,42,.18) !important;
  box-shadow:0 0 0 4px var(--system-primary-ring) !important;
}

html[data-system-theme="light"] th{
  background:rgba(241,245,249,.95);
  color:var(--text);
}

html[data-system-theme="light"] tr:hover td{
  background:rgba(241,245,249,.7);
}

html[data-system-theme="light"] .help,
html[data-system-theme="light"] .card-sub,
html[data-system-theme="light"] .page-subtitle,
html[data-system-theme="light"] .muted,
html[data-system-theme="light"] .table-secondary{
  color:var(--muted) !important;
}

html[data-system-theme="light"] .brand .logo,
html[data-system-theme="light"] .avatar,
html[data-system-theme="light"] .profile-btn .avatar-circle{
  background:
    radial-gradient(circle at 30% 30%, var(--system-primary-soft), rgba(255,255,255,.9)) !important;
  border-color:rgba(15,23,42,.08) !important;
}

html[data-system-theme="light"] .brand .logo .ui-ico,
html[data-system-theme="light"] .page-eyebrow,
html[data-system-theme="light"] .notify-item .tag,
html[data-system-theme="light"] .profile-pop .head .meta .eyebrow{
  color:var(--text) !important;
}

html[data-system-theme="light"] .notify-item.info,
html[data-system-theme="light"] .notify-item.warn,
html[data-system-theme="light"] .notify-item.danger{
  background:rgba(255,255,255,.96) !important;
}

/* kbd chip */
html[data-system-theme="light"] .kbd{
  background:rgba(241,245,249,.9);
  border-color:rgba(148,163,184,.3);
  border-bottom-color:rgba(148,163,184,.45);
  color:var(--muted);
}

/* Profile pop head eyebrow */
html[data-system-theme="light"] .profile-pop .head .meta .eyebrow{
  background:var(--system-primary-surface) !important;
  border-color:rgba(34,197,94,.24) !important;
  color:#166534 !important;
}

/* Page hero subtitle / actions area text */
html[data-system-theme="light"] .page-title-lg,
html[data-system-theme="light"] .page-hero-content > h2{
  color:var(--text) !important;
}

/* Scrollbar tint in light mode */
html[data-system-theme="light"] .client-recent-list::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
}
html[data-system-theme="light"] .notify-list{
  scrollbar-color:rgba(148,163,184,.35) transparent;
}