:root {
  --bs-body-bg: #0e1016;
  --accent: #7c5cff;
  --accent-2: #4f8cff;
  --panel: #161a24;
  --panel-2: #1d2230;
  --line: #283042;
  --ink: #e7ebf3;
  --field-bg: #0f131c;
  --sidebar-w: 248px;
}

body {
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(124, 92, 255, 0.10), transparent 60%),
    radial-gradient(800px 500px at -10% 0%, rgba(79, 140, 255, 0.08), transparent 55%),
    var(--bs-body-bg);
  min-height: 100vh;
  color: var(--ink);
}

.brand-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px var(--accent); margin-right: 6px; vertical-align: middle;
}

/* ---------- Sidebar ---------- */
.app-sidebar {
  width: var(--sidebar-w);
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
}
.app-sidebar-fixed { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1030; }
.sidebar-brand { font-size: 18px; font-weight: 600; padding: 6px 8px 18px; }
.sidebar-nav { gap: 4px; flex: 1; }
.sidebar-nav .nav-link {
  color: #aeb6c8; border-radius: 10px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; font-weight: 500;
}
.sidebar-nav .nav-link i { font-size: 17px; width: 20px; text-align: center; }
.sidebar-nav .nav-link:hover { background: var(--panel-2); color: var(--ink); }
.sidebar-nav .nav-link.active {
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(79,140,255,.14));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(124,92,255,.35);
}
.sidebar-footer { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.user-chip {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border-radius: 10px; text-decoration: none;
  color: var(--ink); background: var(--panel-2);
}
.user-chip:hover { background: #252b3b; color: var(--ink); }
.user-chip .user-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip i { font-size: 18px; }

.app-main { margin-left: 0; }
.app-topbar {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center;
  padding: 10px 14px; background: rgba(15,18,26,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 992px) { .app-main { margin-left: var(--sidebar-w); } }

/* ---------- Surfaces ---------- */
.card, .list-group-item, .modal-content, .offcanvas {
  background-color: var(--panel); border-color: var(--line); color: var(--ink);
}
.card-header { background-color: var(--panel-2); border-color: var(--line); }
.table { --bs-table-bg: transparent; color: var(--ink); }
.table > :not(caption) > * > * { border-color: var(--line); }
.dropdown-menu {
  background-color: var(--panel-2); border-color: var(--line);
}
.dropdown-item { color: var(--ink); }
.dropdown-item:hover { background-color: #262d3d; color: #fff; }

/* ---------- Form fields ---------- */
.form-control, .form-select {
  background-color: var(--field-bg); border-color: var(--line); color: var(--ink);
}
.form-control::placeholder { color: #707a90; }
.form-control:focus, .form-select:focus {
  background-color: var(--field-bg); border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(124, 92, 255, .25); color: var(--ink);
}
.form-label { color: #c4cbda; }
a { color: var(--accent-2); }

/* ---------- Tom Select (keyword input) ---------- */
.ts-wrapper.form-control, .ts-wrapper.form-select { padding: 4px 8px !important; height: auto; }
.ts-control {
  background-color: var(--field-bg) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.ts-control input, .ts-control input::placeholder { color: var(--ink) !important; }
.ts-control input::placeholder { color: #707a90 !important; }
.ts-wrapper.focus .ts-control {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .2rem rgba(124, 92, 255, .25) !important;
}
.ts-control .item {
  background: var(--accent) !important; color: #fff !important;
  border-radius: 6px; border: none;
}
.ts-control .item .remove { border-color: rgba(255,255,255,.4); color: #fff; }
.ts-dropdown {
  background-color: #0c0f17 !important; border: 1px solid var(--line) !important;
  color: var(--ink) !important; box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.ts-dropdown .option, .ts-dropdown .create { color: var(--ink) !important; }
.ts-dropdown .option.active, .ts-dropdown .active {
  background-color: var(--accent) !important; color: #fff !important;
}
.ts-dropdown .no-results, .ts-dropdown .optgroup-header { color: #9aa0b4 !important; }
.ts-dropdown .create .highlight, .ts-dropdown .option .highlight { background: rgba(124,92,255,.3); }

/* ---------- Buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #6a4bf0; --bs-btn-hover-border-color: #6a4bf0;
  --bs-btn-active-bg: #5e40e0;
}

/* ---------- Auth screen ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo {
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #fff; font-size: 26px;
  box-shadow: 0 8px 30px rgba(124, 92, 255, .4); margin: 0 auto 14px;
}

/* ---------- Misc ---------- */
pre.json {
  background: #0b0e15; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; font-size: 12.5px; color: #cdd6e6; overflow: auto; margin: 0;
}
.status-success { color: #34d399; }
.status-error { color: #fb7185; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.filter-bar { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.copy-btn { cursor: pointer; }