:root{
  --db-bg: #0b1220;
  --db-surface: #0f172a;
  --db-surface-2: #111c33;
  --db-border: rgba(148,163,184,.18);
  --db-text: #0f172a;
  --db-muted: rgba(15,23,42,.72);
  --db-radius: 16px;
  --db-shadow: 0 18px 50px rgba(2,6,23,.12);
}

body{
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip link */
.db-skip{
  position:absolute;
  left:-999px;
  top:8px;
  background:#fff;
  padding:10px 12px;
  border-radius:10px;
  z-index:2000;
}
.db-skip:focus{left:8px;}

/* Topbar */
.db-topbar{
  position:sticky;
  top:0;
  z-index:1030;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148,163,184,.18);
}
[data-bs-theme="dark"] .db-topbar{
  background: rgba(15,23,42,.78);
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.db-topbar-inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.db-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: inherit;
  font-weight:700;
}
.db-brand-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(14,165,233,.12));
  border: 1px solid rgba(37,99,235,.18);
}
[data-bs-theme="dark"] .db-brand-mark{
  background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(14,165,233,.16));
  border: 1px solid rgba(59,130,246,.25);
}
.db-brand-text{letter-spacing:.2px;}

.db-topbar-actions{display:flex; align-items:center; gap:10px;}
.db-toplink{
  text-decoration:none;
  color: rgba(15,23,42,.72);
  padding:8px 10px;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
}
.db-toplink:hover{background: rgba(2,6,23,.05); color: rgba(15,23,42,.88);} 
.db-toplink.active{background: rgba(37,99,235,.10); color: #1d4ed8;}
[data-bs-theme="dark"] .db-toplink{color: rgba(226,232,240,.78);} 
[data-bs-theme="dark"] .db-toplink:hover{background: rgba(226,232,240,.06); color: rgba(226,232,240,.92);} 
[data-bs-theme="dark"] .db-toplink.active{background: rgba(59,130,246,.18); color: #93c5fd;}

.db-theme{
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.02);
}
[data-bs-theme="dark"] .db-theme{
  background: rgba(226,232,240,.06);
  border: 1px solid rgba(148,163,184,.22);
}

.db-user{
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.02);
  display:flex;
  align-items:center;
  gap:8px;
}
[data-bs-theme="dark"] .db-user{background: rgba(226,232,240,.06); border: 1px solid rgba(148,163,184,.22);}
.db-avatar{border-radius:999px; box-shadow: 0 0 0 2px rgba(37,99,235,.16);} 

/* Shell */
.db-shell{display:flex; min-height: calc(100vh - 64px - 52px);} 
.db-sidebar{
  width: 280px;
  padding: 18px;
  border-right: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
[data-bs-theme="dark"] .db-sidebar{
  background: rgba(15,23,42,.70);
  border-right: 1px solid rgba(148,163,184,.18);
}
.db-sidebar-section{display:flex; flex-direction:column; gap:8px;}
.db-sidebar-title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(100,116,139,.9);
  margin: 10px 10px 6px;
}
[data-bs-theme="dark"] .db-sidebar-title{color: rgba(148,163,184,.8);} 
.db-navitem{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:10px 12px;
  border-radius: 12px;
  color: rgba(15,23,42,.82);
  font-weight: 600;
}
.db-navitem i{font-size: 16px; opacity:.9;}
.db-navitem:hover{background: rgba(2,6,23,.05);}
.db-navitem.active{background: rgba(37,99,235,.10); color:#1d4ed8;}
[data-bs-theme="dark"] .db-navitem{color: rgba(226,232,240,.86);} 
[data-bs-theme="dark"] .db-navitem:hover{background: rgba(226,232,240,.06);} 
[data-bs-theme="dark"] .db-navitem.active{background: rgba(59,130,246,.18); color: #93c5fd;}

.db-main{flex:1; background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.10), transparent 60%), radial-gradient(900px 520px at 90% 10%, rgba(14,165,233,.10), transparent 55%), #f6f8fc;}
[data-bs-theme="dark"] .db-main{background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.18), transparent 60%), radial-gradient(900px 520px at 90% 10%, rgba(14,165,233,.16), transparent 55%), #0b1220;}
.db-main-inner{max-width: 1180px; margin: 0 auto; padding: 22px 18px 40px;}

/* Footer */
.db-footer{border-top: 1px solid rgba(148,163,184,.18); background: rgba(255,255,255,.72);}
[data-bs-theme="dark"] .db-footer{background: rgba(15,23,42,.70);} 

.db-footer-links{
  display:flex;
  align-items:center;
  gap:10px;
}
.db-footer-links a{
  color: rgba(15,23,42,.72);
  text-decoration:none;
  font-weight: 600;
}
.db-footer-links a:hover{color: rgba(15,23,42,.92); text-decoration: underline;}
[data-bs-theme="dark"] .db-footer-links a{color: rgba(226,232,240,.80);} 
[data-bs-theme="dark"] .db-footer-links a:hover{color: rgba(226,232,240,.94);} 
.db-dot{opacity:.6;}

/* Cards */
.db-card{
  border: 1px solid rgba(148,163,184,.18);
  border-radius: var(--db-radius);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  box-shadow: var(--db-shadow);
}
[data-bs-theme="dark"] .db-card{background: rgba(15,23,42,.72);} 

.db-card-header{padding:16px 18px; border-bottom: 1px solid rgba(148,163,184,.16);} 
.db-card-body{padding:16px 18px;}

/* Guild avatar placeholders */
.db-guild-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(148,163,184,.20);
}
[data-bs-theme="dark"] .db-guild-icon{background: rgba(226,232,240,.06); border: 1px solid rgba(148,163,184,.18);} 

/* Table tweaks */
.table thead.sticky-top{top:0; z-index:1;}
.db-table{
  border-collapse: separate;
  border-spacing: 0;
}
.db-table thead th{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(100,116,139,.9);
}
[data-bs-theme="dark"] .db-table thead th{color: rgba(148,163,184,.9);} 

.db-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding: 5px 10px;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 600;
}
[data-bs-theme="dark"] .db-pill{background: rgba(15,23,42,.65);} 

/* Buttons */
.btn{border-radius: 12px;}
.btn-primary{box-shadow: 0 10px 30px rgba(37,99,235,.18);} 

/* Forms */
.form-control, .form-select{border-radius: 12px;}

/* Modal */
.modal-content{border-radius: 16px; border: 1px solid rgba(148,163,184,.18);} 

/* Toast */
.toast{border-radius: 14px; border: 1px solid rgba(148,163,184,.18); box-shadow: 0 12px 40px rgba(2,6,23,.18);} 


/* Role lists inside modal */
.db-rolelist{
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  max-height: 360px;
  overflow: auto;
}
[data-bs-theme="dark"] .db-rolelist{background: rgba(15,23,42,.55);} 
.db-roleitem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
.db-roleitem:last-child{border-bottom:none;}
.db-roleitem .name{font-weight:600; font-size:14px;}
.db-roleitem .meta{font-size:12px; color: rgba(100,116,139,.9);} 
[data-bs-theme="dark"] .db-roleitem .meta{color: rgba(148,163,184,.85);} 

/* ---------------- Landing (index) ---------------- */
.db-hero{
  padding: 18px 0 10px;
}
.db-hero-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 991px){
  .db-hero-wrap{grid-template-columns: 1fr;}
}

.db-hero-copy{
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}
[data-bs-theme="dark"] .db-hero-copy{
  background: linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.62));
}

.db-hero-title{
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.db-hero-subtitle{
  font-size: 16px;
  line-height: 1.6;
  color: rgba(15,23,42,.72);
  margin: 0 0 18px;
}
[data-bs-theme="dark"] .db-hero-subtitle{color: rgba(226,232,240,.78);} 

.db-hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 18px;}

.db-hero-meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,.18);
}
@media (max-width: 575px){
  .db-hero-meta{grid-template-columns: 1fr;}
}
.db-meta-item{padding: 10px 12px; border-radius: 14px; background: rgba(2,6,23,.03); border: 1px solid rgba(148,163,184,.16);} 
[data-bs-theme="dark"] .db-meta-item{background: rgba(226,232,240,.06); border: 1px solid rgba(148,163,184,.18);} 
.db-meta-k{font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: rgba(100,116,139,.9); font-weight: 800;}
[data-bs-theme="dark"] .db-meta-k{color: rgba(148,163,184,.85);} 
.db-meta-v{font-weight: 700; margin-top: 2px;}

.db-hero-preview{
  padding: 28px;
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background: radial-gradient(700px 420px at 20% 10%, rgba(59,130,246,.18), transparent 60%),
              radial-gradient(620px 360px at 90% 20%, rgba(14,165,233,.16), transparent 60%),
              rgba(255,255,255,.70);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}
[data-bs-theme="dark"] .db-hero-preview{background: radial-gradient(700px 420px at 20% 10%, rgba(59,130,246,.22), transparent 60%),
              radial-gradient(620px 360px at 90% 20%, rgba(14,165,233,.18), transparent 60%),
              rgba(15,23,42,.64);} 

.db-preview-card{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.86);
  overflow: hidden;
}
[data-bs-theme="dark"] .db-preview-card{background: rgba(2,6,23,.25);} 
.db-preview-head{display:flex; gap:8px; padding: 12px 14px; border-bottom: 1px solid rgba(148,163,184,.14);} 
.db-preview-dot{width: 10px; height: 10px; border-radius: 99px; background: rgba(148,163,184,.55);} 
.db-preview-body{padding: 14px;}
.db-preview-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 8px 10px; border-radius: 12px; background: rgba(2,6,23,.03); border: 1px solid rgba(148,163,184,.14); margin-bottom: 10px;}
[data-bs-theme="dark"] .db-preview-row{background: rgba(226,232,240,.06);} 
.db-preview-pill{font-weight: 700; font-size: 13px;}
.db-preview-badge{font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,.18);} 
.db-preview-badge.on{background: rgba(34,197,94,.12); color: rgba(22,163,74,1);} 
.db-preview-badge.off{background: rgba(239,68,68,.10); color: rgba(220,38,38,1);} 
[data-bs-theme="dark"] .db-preview-badge.on{color: #86efac;} 
[data-bs-theme="dark"] .db-preview-badge.off{color: #fecaca;} 
.db-preview-divider{height:1px; background: rgba(148,163,184,.18); margin: 12px 0;}
.db-preview-grid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.db-preview-mini{padding: 10px 12px; border-radius: 14px; background: rgba(2,6,23,.03); border: 1px solid rgba(148,163,184,.14);} 
[data-bs-theme="dark"] .db-preview-mini{background: rgba(226,232,240,.06);} 
.db-preview-mini .t{font-size:12px; letter-spacing: .10em; text-transform: uppercase; color: rgba(100,116,139,.9); font-weight: 800;}
[data-bs-theme="dark"] .db-preview-mini .t{color: rgba(148,163,184,.85);} 
.db-preview-mini .v{font-weight: 800; margin-top: 2px;}

.db-section{padding: 12px 0 6px;}

.db-feature{display:flex; gap:12px; align-items:flex-start;}
.db-feature-ic{width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center; border: 1px solid rgba(148,163,184,.18); background: rgba(37,99,235,.10);} 
[data-bs-theme="dark"] .db-feature-ic{background: rgba(59,130,246,.18);} 
.db-feature-ic i{font-size: 18px;}
.db-feature-title{font-weight: 800;}
.db-feature-desc{color: rgba(15,23,42,.72); margin-top: 2px;}
[data-bs-theme="dark"] .db-feature-desc{color: rgba(226,232,240,.78);} 

/* ---------------- Empty state ---------------- */
.db-empty{
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
  padding: 26px;
  margin-bottom: 16px;
}
[data-bs-theme="dark"] .db-empty{background: rgba(15,23,42,.72);} 
.db-empty-ic{width: 56px; height: 56px; border-radius: 18px; display:grid; place-items:center; background: rgba(37,99,235,.10); border: 1px solid rgba(59,130,246,.22); margin-bottom: 12px;}
.db-empty-ic i{font-size: 22px;}
.db-empty-title{font-weight: 900; font-size: 18px; margin-bottom: 6px;}
.db-empty-subtitle{color: rgba(15,23,42,.72); margin-bottom: 14px;}
[data-bs-theme="dark"] .db-empty-subtitle{color: rgba(226,232,240,.78);} 
.db-empty-list{display:flex; flex-direction:column; gap:8px; margin-bottom: 16px;}
.db-empty-item{display:flex; gap:10px; align-items:flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(148,163,184,.16); background: rgba(2,6,23,.02);} 
[data-bs-theme="dark"] .db-empty-item{background: rgba(226,232,240,.06);} 
.db-empty-item i{margin-top: 2px;}
.db-empty-actions{display:flex; flex-wrap:wrap; gap:10px;}