/* ===== FX Licensing – Pro UI v3 (dark + neon, animated) ===== */
@supports (font-variation-settings: normal) {
  :root { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
}
@supports not (font-variation-settings: normal) {
  :root { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
}

/* Brand palette */
:root{
  --brand:#0d6efd;
  --brand-accent:#4cc9f0;
  --brand-deep:#3a0ca3;

  --bg-0:#0a1020;    /* page */
  --bg-1:#0f1730;    /* inputs */
  --bg-2:#111a2c;    /* cards/nav */
  --line:#1e2c50;

  --txt:#dbe3f0;
  --txt-dim:#a8b6d3;
  --txt-strong:#f3f7ff;

  --good:#16c79a;
  --warn:#fbbf24;
  --bad:#ef4444;

  --radius:14px;
}

/* Base layout + animated backdrop */
html,body{ height:100%; }
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(77,91,255,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 90%, rgba(0,195,255,.12), transparent 60%),
    linear-gradient(120deg, #0a1020, #0b1428);
  color:var(--txt);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  animation: bgFloat 28s ease-in-out infinite;
}
@keyframes bgFloat{
  0%,100%{ background-position: 0 0, 0 0, 0 0; }
  50%{ background-position: 20px -10px, -20px 10px, 0 0; }
}
@media (prefers-reduced-motion: reduce){
  body{ animation: none; }
}

/* Containers & common elements */
.container-tight{ max-width:1100px; }

/* Navbar (glass + neon brand) */
.navbar{
  background: linear-gradient(135deg, rgba(13,110,253,.25), rgba(76,201,240,.18));
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line)!important;
}
.navbar .navbar-brand{
  font-weight:800; letter-spacing:.2px;
  color:var(--txt-strong)!important;
  text-shadow: 0 1px 14px rgba(76,201,240,.55);
}
.navbar .btn, .navbar .nav-link{ color:#ebf3ff!important; }

/* Cards (glassmorphism) */
.card, .dropdown-menu{
  background: linear-gradient(180deg, rgba(17,26,44,.97), rgba(14,22,41,.98));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* Section header bar (bright on blue) */
.section-bar{
  background: linear-gradient(90deg, rgba(13,110,253,.40), rgba(76,201,240,.28));
  border:1px solid rgba(100,150,255,.28);
  color:var(--txt-strong);
  border-radius:12px;
  padding:.55rem .8rem;
  display:flex; align-items:center; gap:.6rem;
  text-shadow: 0 0 14px rgba(155,215,255,.4);
}

/* Headings */
h1,h2,h3,h4,h5,h6,.card .card-title{
  color:var(--txt-strong);
}
.neon-underline{
  position:relative; display:inline-block;
}
.neon-underline::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:100%;
  background:linear-gradient(90deg, #61a4ff, #4cc9f0);
  box-shadow:0 0 12px rgba(76,201,240,.7);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.neon-underline.reveal::after{ transform:scaleX(1); }

/* Forms */
label{ margin-bottom:.18rem; font-weight:600; color:#eef3ff; opacity:.95; }
.form-text{ margin-top:.2rem; color:var(--txt-dim); }
.form-control, .form-select{
  background:linear-gradient(180deg, var(--bg-1), #0c1430);
  color:#e6eeff; border:1px solid #263e70; border-radius:10px;
}

.form-control:focus,.form-select:focus{
  background:linear-gradient(180deg, #112149, #0e1a40);
  border-color:#3b6cff;
  box-shadow:0 0 0 .18rem rgba(61,124,255,.25), 0 10px 30px rgba(0,30,90,.25);
  color:#fff;
}

/* Buttons */
.btn{ border-radius:10px; transition: transform .18s ease, filter .2s ease, box-shadow .2s ease; }
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{
  background:linear-gradient(135deg, #2563eb, #0ea5e9);
  border-color:transparent;
  box-shadow:0 12px 30px rgba(37,99,235,.25);
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-outline-light{ color:#e9f2ff; border-color:#2f4a83; }
.btn-outline-light:hover{ color:#0b1022; background:#cfe0ff; border-color:#cfe0ff; }
.btn-danger{ box-shadow:0 10px 25px rgba(239,68,68,.22); }
.btn-warning{ color:#0b1220; }

/* Icon buttons */
.btn-icon{
  display:inline-flex; align-items:center; gap:.4rem;
}
.btn-icon .bi{ font-size:1rem; }

/* KPI cards */
.kpi-card{
  background: radial-gradient(120px 100px at 10% 10%, rgba(76,201,240,.25), transparent 60%), var(--bg-2);
  border:1px solid var(--line);
  border-radius:16px; padding:1rem 1rem;
  position:relative; overflow:hidden;
}
.kpi-card::after{
  content:""; position:absolute; inset:-2px;
  background:conic-gradient(from 45deg, rgba(64,150,255,.18), rgba(64,150,255,0), rgba(64,150,255,.18));
  filter:blur(18px); opacity:.6; pointer-events:none;
}
.kpi-label{ color:#cfe0ff; opacity:.85; font-size:.85rem; }
.kpi-value{ font-size:1.6rem; font-weight:800; letter-spacing:.2px; }

/* Tables */
.table{ color:#cfe0ff; }
.table thead th{ color:#f7fbff; border-bottom-color:rgba(255,255,255,.1); }
.table td, .table th{ padding:.6rem .65rem; vertical-align:middle; }
.table-hover tbody tr:hover{ background:rgba(60,105,200,.06); }
.table-modern .badge-key{ background:#0f1b36; border:1px solid #274385; color:#f3f6ff; padding:.35rem .5rem; border-radius:999px; font-weight:700; }

/* Status pills */
.pill{ padding:.25rem .55rem; border-radius:999px; font-weight:700; font-size:.75rem; }
.pill-good{ background:rgba(22,199,154,.15); color:#7ee8c9; border:1px solid rgba(22,199,154,.35); }
.pill-bad{ background:rgba(239,68,68,.15); color:#ffb2b2; border:1px solid rgba(239,68,68,.35); }
.pill-warn{ background:rgba(251,191,36,.15); color:#ffe1a1; border:1px solid rgba(251,191,36,.4); }

/* Badges */
.badge-soft{
  background: linear-gradient(135deg, #1b2c55, #1a2a4f);
  color:#d8e6ff; border:1px solid #304a85;
}

/* Cards with header bar */
.card-header-lite{
  background:linear-gradient(90deg, rgba(13,110,253,.25), rgba(76,201,240,.18));
  border-bottom:1px solid var(--line);
  color:var(--txt-strong);
}

/* Little animations */
.fade-in{ animation: fadeIn .45s ease both; }
.slide-up{ animation: slideUp .5s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{transform:translateY(6px); opacity:0} to{transform:none; opacity:1} }

/* Hover lift */
.hover-lift{ transition: transform .18s ease, box-shadow .2s ease; }
.hover-lift:hover{ transform: translateY(-3px); box-shadow:0 14px 35px rgba(0,0,0,.35); }

/* Toast (copy feedback) */
.copy-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(30,41,72,.95), rgba(20,28,54,.97));
  color:#e6f0ff; border:1px solid #254184; border-radius:10px; padding:.5rem .8rem;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  z-index:1080; opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
.copy-toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* Utility */
.text-dim{ color:var(--txt-dim); }
.rounded-12{ border-radius:12px; }



/* ===== Table contrast & Copy button fixes (add to end) ===== */

/* Make all in-card tables use a dark row background + bright text */
.card .table,
.table-modern {
  background: transparent;
}
.card .table thead th,
.table-modern thead th{
  background:#0e1b38;            /* deep navy */
  color:#eef3ff;                  /* bright headings */
  border-bottom-color:#233a6b;
}
.card .table tbody td,
.table-modern tbody td{
  background:#0f1730;             /* dark rows */
  color:#e6eeff;                   /* bright text on rows */
  border-top-color:#1e2c50;
}
.table-modern tbody tr:hover td{
  background:#122047;             /* hover shade */
}

/* “Badge key” remains readable on dark rows */
.table-modern .badge-key{
  background:#16254a;
  border:1px solid #2c4a8e;
  color:#f4f8ff;
}

/* Solid Copy button that stands out on any background */
.btn-copy{
  background: linear-gradient(135deg, #60a5fa, #22d3ee); /* blue→cyan */
  color:#061022 !important;
  border:0;
  box-shadow:0 10px 22px rgba(96,165,250,.28);
}
.btn-copy:hover{ filter:brightness(1.06); }

/* Make action buttons align nicely on narrow screens */
@media (max-width: 768px){
  .actions-wrap{ display:flex; flex-wrap:wrap; gap:.35rem; }
}

.form-control::placeholder {
  color: #ffffff !important;
  opacity: 0.8 !important;
}