:root{
  /* Y2K minimal: glass + neon, but restrained */
  --bg: #f6f7ff;
  --fg: #0e0f14;
  --muted: rgba(14,15,20,.62);
  --hairline: rgba(14,15,20,.14);
  --surface: rgba(255,255,255,.68);

  --accent: #2b59ff;   /* electric blue */
  --accent-2: #ff3dd6; /* neon magenta */
  --accent-3: #2dff9a; /* neon mint (used sparingly) */

  --radius: 16px;
  --radius-tight: 14px;
  --shadow: 0 18px 50px rgba(15,18,40,.10);
  --shadow-tight: 0 10px 24px rgba(15,18,40,.10);
}

/* Global tone */
body.bg-body-tertiary{
  background: var(--bg) !important;
  color: var(--fg);
  font-feature-settings: "ss01" 1, "ss02" 1;
}

/* Background: subtle grid + neon halos (Y2K but minimal) */
body.bg-body-tertiary::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(43,89,255,.18), transparent 60%),
    radial-gradient(700px 540px at 80% 30%, rgba(255,61,214,.14), transparent 62%),
    radial-gradient(800px 600px at 40% 95%, rgba(45,255,154,.10), transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.0));
  pointer-events: none;
}
body.bg-body-tertiary::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(14,15,20,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,15,20,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .35;
  mask-image: radial-gradient(closest-side at 50% 20%, rgba(0,0,0,.85), transparent 70%);
  pointer-events: none;
}

/* Typography: editorial + mono accents */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing: .1px;
}

h1,h2,h3,h4,h5,.navbar-brand{
  letter-spacing: -.02em;
}

code, pre, .font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Layout: more breathing room */
.container{
  max-width: 1100px;
}

/* Navbar: minimal, sharp */
.navbar{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 10px 30px rgba(15,18,40,.08);
}

.navbar-brand{
  text-transform: uppercase;
  font-weight: 650;
  font-size: .95rem;
  letter-spacing: .12em;
}

/* Surfaces: thin borders, subtle shadow, slightly off grid */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.55);
  background: var(--surface);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: var(--shadow);
}

.border{
  border-color: var(--hairline) !important;
}

.rounded{
  border-radius: var(--radius) !important;
}

/* Inputs/buttons: crisp */
.btn, .form-control, .form-select, .alert, .input-group-text{
  border-radius: var(--radius-tight);
}

.form-control, .form-select{
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

.form-control:focus, .form-select:focus{
  border-color: rgba(43,89,255,.65);
  box-shadow: 0 0 0 .22rem rgba(43,89,255,.14);
}

.btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0)) , linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 10px 26px rgba(43,89,255,.22);
}
.btn-primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 14px 34px rgba(43,89,255,.26);
}

.btn-outline-secondary{
  border-color: rgba(255,255,255,.58);
  color: var(--fg);
  background: rgba(255,255,255,.40);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.56);
  border-color: rgba(255,255,255,.68);
  color: var(--fg);
}

.btn-outline-danger{
  border-color: rgba(255,0,70,.35);
}

.badge.text-bg-light{
  background: rgba(17,17,17,.04) !important;
  border: 1px solid var(--hairline);
  color: var(--fg) !important;
  font-weight: 550;
}

/* Alerts: less “bootstrap-y” */
.alert{
  border: 1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  color: var(--fg);
}
.alert-success{ border-left: 4px solid rgba(0,160,90,.7); }
.alert-danger{ border-left: 4px solid rgba(255,0,70,.65); }
.alert-warning{ border-left: 4px solid rgba(255,140,0,.7); }
.alert-info{ border-left: 4px solid rgba(43,89,255,.55); }

/* Progress bar: graphic, post-modern */
.progress{
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.62);
  background: rgba(255,255,255,.42);
  overflow: hidden;
}
.progress-bar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0)),
    linear-gradient(90deg, var(--accent), var(--accent-2));
  font-weight: 650;
  font-size: .75rem;
  letter-spacing: .06em;
}

/* Tables: airy */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}
.table tbody td{
  border-top: 1px solid rgba(17,17,17,.08);
}

/* Tiny “post-modern” touch: offset sections slightly on wide screens */
@media (min-width: 992px){
  .card{
    transform: translateY(-1px);
  }
  .card:hover{
    transform: translateY(-2px);
    transition: transform 120ms ease;
  }
}

/* Micro-interaction: slightly “plastic” highlights on hover */
.card:hover{
  box-shadow: 0 22px 64px rgba(15,18,40,.14);
}

/* Links: crisp neon underline on hover */
a{
  text-decoration-color: rgba(43,89,255,.35);
  text-underline-offset: 3px;
}
a:hover{
  text-decoration-color: rgba(255,61,214,.45);
}

/* Companion markdown spacing */
.companion-md :is(h1,h2,h3,h4){
  margin-top: .75rem;
  margin-bottom: .5rem;
}
.companion-md p{
  margin-bottom: .6rem;
}
.companion-md table{
  margin-bottom: .75rem;
}
.companion-md pre{
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-tight);
  background: rgba(255,255,255,.42);
  overflow: auto;
}