/* === OVERLORD SIMPLE THEME START === */
/* settings: {"accent":"#7a5bff","background":"#020617","surface":"#0f172a","text":"#f1f5f9","corners":"round"} */
:root {
  --color-sky-50: #f4f2ff;
  --color-sky-100: #e7e1ff;
  --color-sky-200: #d4cbff;
  --color-sky-300: #baaaff;
  --color-sky-400: #9a82ff;
  --color-sky-500: #7a5bff;
  --color-sky-600: #684dd9;
  --color-sky-700: #5540b3;
  --color-sky-800: #43328c;
  --color-sky-900: #33266b;
  --color-sky-950: #221947;
  --color-blue-50: #f4f2ff;
  --color-blue-100: #e7e1ff;
  --color-blue-200: #d4cbff;
  --color-blue-300: #baaaff;
  --color-blue-400: #9a82ff;
  --color-blue-500: #7a5bff;
  --color-blue-600: #684dd9;
  --color-blue-700: #5540b3;
  --color-blue-800: #43328c;
  --color-blue-900: #33266b;
  --color-blue-950: #221947;
  --color-cyan-50: #f4f2ff;
  --color-cyan-100: #e7e1ff;
  --color-cyan-200: #d4cbff;
  --color-cyan-300: #baaaff;
  --color-cyan-400: #9a82ff;
  --color-cyan-500: #7a5bff;
  --color-cyan-600: #684dd9;
  --color-cyan-700: #5540b3;
  --color-cyan-800: #43328c;
  --color-cyan-900: #33266b;
  --color-cyan-950: #221947;
  --color-indigo-50: #f4f2ff;
  --color-indigo-100: #e7e1ff;
  --color-indigo-200: #d4cbff;
  --color-indigo-300: #baaaff;
  --color-indigo-400: #9a82ff;
  --color-indigo-500: #7a5bff;
  --color-indigo-600: #684dd9;
  --color-indigo-700: #5540b3;
  --color-indigo-800: #43328c;
  --color-indigo-900: #33266b;
  --color-indigo-950: #221947;
  --color-violet-50: #f4f2ff;
  --color-violet-100: #e7e1ff;
  --color-violet-200: #d4cbff;
  --color-violet-300: #baaaff;
  --color-violet-400: #9a82ff;
  --color-violet-500: #7a5bff;
  --color-violet-600: #684dd9;
  --color-violet-700: #5540b3;
  --color-violet-800: #43328c;
  --color-violet-900: #33266b;
  --color-violet-950: #221947;
  --color-purple-50: #f4f2ff;
  --color-purple-100: #e7e1ff;
  --color-purple-200: #d4cbff;
  --color-purple-300: #baaaff;
  --color-purple-400: #9a82ff;
  --color-purple-500: #7a5bff;
  --color-purple-600: #684dd9;
  --color-purple-700: #5540b3;
  --color-purple-800: #43328c;
  --color-purple-900: #33266b;
  --color-purple-950: #221947;
  --color-fuchsia-50: #f4f2ff;
  --color-fuchsia-100: #e7e1ff;
  --color-fuchsia-200: #d4cbff;
  --color-fuchsia-300: #baaaff;
  --color-fuchsia-400: #9a82ff;
  --color-fuchsia-500: #7a5bff;
  --color-fuchsia-600: #684dd9;
  --color-fuchsia-700: #5540b3;
  --color-fuchsia-800: #43328c;
  --color-fuchsia-900: #33266b;
  --color-fuchsia-950: #221947;
  --color-slate-50: #f6f9fb;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #d1d6dc;
  --color-slate-300: #b2b7bf;
  --color-slate-400: #8b919c;
  --color-slate-500: #69707d;
  --color-slate-600: #4a5160;
  --color-slate-700: #333b4b;
  --color-slate-800: #21293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  --color-primary: #7a5bff;
  --color-primary-hover: #9a82ff;
  --color-text: #f1f5f9;
  --color-text-bright: #f6f9fb;
  --color-text-muted: #8b919c;
  --color-surface: rgba(15, 23, 42, 0.72);
  --color-surface-dark: rgba(2, 6, 23, 0.88);
  --color-border: rgba(241, 245, 249, 0.12);
  --ui-border-strong: rgba(122, 91, 255, 0.45);
  --ui-ring: rgba(122, 91, 255, 0.28);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-2xl: 30px;
}
html, body {
  background-color: #020617 !important;
  color: #f1f5f9;
}
/* === OVERLORD SIMPLE THEME END === */

/* =========================================================
   EXPERIENCE — PREMIUM OBSIDIAN / GLASS UI
   Refined replacement theme
   ========================================================= */

:root {
  --bg: #05070b;
  --bg-2: #080c12;
  --panel: rgba(13, 18, 27, .82);
  --panel-2: rgba(17, 23, 34, .88);
  --panel-hover: rgba(22, 30, 44, .94);

  --border: rgba(255,255,255,.075);
  --border-soft: rgba(148,163,184,.10);
  --border-hover: rgba(91, 196, 255, .30);

  --text: #f4f7fb;
  --text-2: #a9b5c7;
  --text-3: #6e7b8f;

  --cyan: #42c8ff;
  --cyan-light: #83ddff;
  --purple: #9b7cff;
  --green: #35d6a0;
  --red: #ff637a;
  --yellow: #ffd166;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  --shadow-sm: 0 4px 18px rgba(0,0,0,.22);
  --shadow: 0 14px 45px rgba(0,0,0,.28);
  --shadow-lg: 0 28px 90px rgba(0,0,0,.48);
}

/* =========================================================
   BASE
   ========================================================= */

html,
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Subtle premium texture without affecting content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .025;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(130,150,180,.28);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(66,200,255,.42);
}

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */

header,
.navbar,
nav {
  background: rgba(5, 8, 13, .76) !important;
  backdrop-filter: blur(22px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
  border-bottom: 1px solid rgba(255,255,255,.065) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.025),
    0 12px 40px rgba(0,0,0,.22) !important;
}

nav button,
.navbar button,
header button,
nav a,
.navbar a {
  color: var(--text-2) !important;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}

nav button:hover,
.navbar button:hover,
header button:hover,
nav a:hover,
.navbar a:hover {
  color: var(--text) !important;
  background: rgba(66,200,255,.065) !important;
  border-color: rgba(66,200,255,.16) !important;
}

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

aside,
.sidebar {
  background:
    linear-gradient(180deg, rgba(7,10,16,.96), rgba(4,7,11,.98)) !important;
  border-right: 1px solid rgba(255,255,255,.065) !important;
  box-shadow: 18px 0 55px rgba(0,0,0,.16) !important;
}

aside a,
.sidebar a,
aside button,
.sidebar button {
  color: var(--text-2) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease !important;
}

aside a:hover,
.sidebar a:hover,
aside button:hover,
.sidebar button:hover {
  color: #f7fbff !important;
  background:
    linear-gradient(90deg, rgba(66,200,255,.09), rgba(155,124,255,.045)) !important;
  border-color: rgba(66,200,255,.10) !important;
  transform: translateX(2px);
}

aside a.active,
.sidebar a.active,
aside .active,
.sidebar .active {
  color: #fff !important;
  background:
    linear-gradient(90deg, rgba(66,200,255,.13), rgba(155,124,255,.075)) !important;
  border-color: rgba(66,200,255,.18) !important;
  box-shadow:
    inset 2px 0 0 var(--cyan),
    0 8px 28px rgba(0,0,0,.16) !important;
}

/* =========================================================
   CARDS / PANELS
   ========================================================= */

.card,
.panel,
section,
[class*="card"],
[class*="panel"] {
  background:
    linear-gradient(145deg, rgba(18,25,37,.88), rgba(9,13,20,.90)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}

.card:hover,
.panel:hover {
  border-color: var(--border-hover) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.30),
    0 0 0 1px rgba(66,200,255,.025),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* =========================================================
   PAGE HEADER / HERO
   ========================================================= */

[class*="page-header"],
[class*="hero"],
.page-header {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 5%, rgba(66,200,255,.12), transparent 32%),
    radial-gradient(circle at 8% 100%, rgba(155,124,255,.08), transparent 34%),
    linear-gradient(135deg, rgba(18,26,39,.96), rgba(9,14,22,.96)) !important;
  border: 1px solid rgba(120,170,220,.13) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

[class*="page-header"]::after,
[class*="hero"]::after,
.page-header::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -140px;
  top: -170px;
  border-radius: 50%;
  border: 1px solid rgba(66,200,255,.08);
  box-shadow:
    0 0 80px rgba(66,200,255,.045),
    inset 0 0 80px rgba(66,200,255,.025);
  pointer-events: none;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text) !important;
  letter-spacing: -.02em;
  font-weight: 650;
}

small,
.text-muted,
.muted {
  color: var(--text-3) !important;
}

/* =========================================================
   INPUTS
   ========================================================= */

input,
textarea,
select {
  background: rgba(4,8,14,.72) !important;
  color: var(--text) !important;
  border: 1px solid rgba(130,155,190,.13) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    transform .2s ease !important;
}

input:hover,
textarea:hover,
select:hover {
  border-color: rgba(130,180,220,.25) !important;
  background: rgba(6,11,18,.82) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  background: rgba(7,12,20,.92) !important;
  border-color: rgba(66,200,255,.58) !important;
  box-shadow:
    0 0 0 3px rgba(66,200,255,.075),
    0 0 24px rgba(66,200,255,.055),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

input::placeholder,
textarea::placeholder {
  color: #566477 !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

button,
.btn {
  border-radius: var(--radius-sm) !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    filter .16s ease !important;
}

button:hover,
.btn:hover {
  transform: translateY(-1px);
}

.btn-primary,
button.primary,
button[type="submit"] {
  background:
    linear-gradient(135deg, #20b9ee 0%, #168bd1 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(140,225,255,.32) !important;
  box-shadow:
    0 7px 24px rgba(20,150,215,.18),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.btn-primary:hover,
button.primary:hover,
button[type="submit"]:hover {
  filter: brightness(1.08);
  box-shadow:
    0 10px 32px rgba(20,160,225,.25),
    0 0 22px rgba(66,200,255,.08),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* =========================================================
   TABLES
   ========================================================= */

table {
  background: transparent !important;
  color: var(--text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}

thead,
thead tr {
  background: rgba(21,29,42,.70) !important;
}

th {
  color: #8290a5 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .065em;
}

td,
th {
  border-bottom: 1px solid rgba(120,150,190,.075) !important;
}

tbody tr {
  transition: background .15s ease, box-shadow .15s ease !important;
}

tbody tr:hover {
  background: rgba(66,200,255,.025) !important;
}

/* =========================================================
   BADGES / STATUS
   ========================================================= */

.badge {
  border-radius: 999px !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.success,
.status-success {
  color: var(--green) !important;
}

.danger,
.status-danger {
  color: var(--red) !important;
}

.warning,
.status-warning {
  color: var(--yellow) !important;
}

[class*="admin"],
.admin {
  box-shadow:
    0 0 20px rgba(155,124,255,.09) !important;
}

/* =========================================================
   DIVIDERS
   ========================================================= */

hr {
  border: 0 !important;
  border-top: 1px solid rgba(130,155,190,.09) !important;
}

/* =========================================================
   MODALS / DIALOGS
   ========================================================= */

.modal,
.dialog {
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

.modal-content,
.dialog-content {
  background:
    linear-gradient(145deg, rgba(19,27,40,.97), rgba(8,13,21,.98)) !important;
  border: 1px solid rgba(130,170,215,.16) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow:
    var(--shadow-lg),
    0 0 60px rgba(0,160,255,.035),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu,
.menu,
[role="menu"] {
  background: rgba(13,19,29,.96) !important;
  border: 1px solid rgba(120,160,205,.14) !important;
  border-radius: var(--radius) !important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.dropdown-menu a:hover,
.menu a:hover,
[role="menu"] > *:hover {
  background: rgba(66,200,255,.075) !important;
}

/* =========================================================
   FOCUS
   ========================================================= */

:focus-visible {
  outline: 2px solid rgba(66,200,255,.48) !important;
  outline-offset: 2px;
}

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

@media (max-width: 900px) {
  .card,
  .panel,
  section {
    border-radius: 12px !important;
  }

  body {
    font-size: 14px !important;
  }
}

/* =========================================================
   BACKGROUND PRESERVATION
   The panel's existing background image is intentionally untouched.
   ========================================================= */