/* Dark glass surfaces for common containers */
.rme-card,.rme-panel,.panel,#main-nav.navbar,.site-footer,
.card,.navbar,.footer,.well,.panel-default,.panel-body,.panel-heading,
.list-group,.offcanvas,.modal-content{
  background:linear-gradient(180deg,rgba(18,14,44,.62),rgba(10,8,24,.52));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}

/* Inputs */
.form-control,.form-select{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(185,166,255,.18);
  color:var(--text);
  border-radius:var(--radius);
}
.form-control:focus,.form-select:focus{
  background:rgba(255,255,255,.06);
  border-color:rgba(185,166,255,.42);
  box-shadow:var(--ring);
  color:var(--text);
}

/* Buttons */
.btn,button,input[type="submit"],input[type="button"]{
  border-radius:calc(var(--radius) - 6px);
}
.btn-primary{
  background:linear-gradient(135deg,rgba(185,166,255,.95),rgba(124,58,237,.95));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 42px rgba(124,58,237,.22);
}
.btn-primary:hover{filter:brightness(1.06);}

/* Nav link aura */
#main-nav .navbar-nav .nav-link{
  border-radius:999px;
  transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
#main-nav .navbar-nav .nav-link:hover,
#main-nav .navbar-nav .nav-link:focus{
  background:rgba(185,166,255,.14);
  box-shadow:0 12px 30px rgba(124,58,237,.18);
  transform:translateY(-1px);
}

/* =========================
   TECH Micro-Interactions (UI feels alive)
   ========================= */

/* Crisp typography & spacing feel (optional) */
body { letter-spacing: 0.1px; }

/* Nav: technical underline + active indicator */
#main-nav .nav-link{
  position: relative;
  isolation: isolate;
}

#main-nav .nav-link::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(185,166,255,.55), transparent);
  opacity:0;
  transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
}

#main-nav .nav-link:hover::before,
#main-nav .nav-link:focus-visible::before{
  opacity:1;
  transform: translateY(0);
}

/* Cards/Panels: hover lift + edge highlight (tech feel) */
.card, .panel, .rme-card, .rme-panel{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.card:hover, .panel:hover, .rme-card:hover, .rme-panel:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(185,166,255,.38);
}

/* Inputs: stronger, more “instrument panel” focus */
.form-control:focus, .form-select:focus{
  box-shadow: var(--ring), 0 0 0 1px rgba(124,58,237,.35) inset;
}

/* Buttons: fast response + subtle “sheen” on hover */
.btn, .btn-primary{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .12s ease, filter .12s ease;
}

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

.btn::before, .btn-primary::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(255,255,255,.14) 45%,
    rgba(185,166,255,.18) 50%,
    transparent 60%
  );
  transform: translateX(-30%) rotate(8deg);
  opacity:0;
}

.btn:hover::before, .btn-primary:hover::before{
  opacity:1;
  animation: tech-sheen .55s ease-out 1;
}

@keyframes tech-sheen{
  from{ transform: translateX(-35%) rotate(8deg); }
  to  { transform: translateX(35%)  rotate(8deg); }
}