/* =====================================================================
   Pink Kuro Panel — Dark Glass design system
   Token-driven reskin of Bootstrap 5. Loaded after bootstrap.min.css
   and natacode.css so these rules take precedence.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* --- surface --- */
  --void:        #08090D;
  --bg-1:        #0B0D14;
  --bg-2:        #12141F;
  --surface:     rgba(255,255,255,0.045);
  --surface-2:   rgba(255,255,255,0.075);
  --border:      rgba(255,255,255,0.09);
  --border-hi:   rgba(255,255,255,0.16);

  /* --- accents (magenta / violet nod to the old FF90BB+8ACCD5 duo, saturated) --- */
  --magenta:     #FF3D9A;
  --magenta-2:   #C026D3;
  --violet:      #7C5CFC;
  --cyan:        #2FE6C4;
  --grad-brand:  linear-gradient(135deg, var(--magenta) 0%, var(--violet) 55%, var(--cyan) 100%);

  /* --- text --- */
  --ink-1:       #F2F3F8;
  --ink-2:       #A7AEC0;
  --ink-3:       #6C7690;

  /* --- state --- */
  --ok:          #34E4A3;
  --warn:        #FBBF66;
  --bad:         #FF5E7E;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.45);

  --f-display: 'Space Grotesk', 'Inter', sans-serif;
  --f-body: 'Inter', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------------------------------------------------------------- base */
html, body{
  background: var(--bg-1) !important;
  color: var(--ink-1);
  font-family: var(--f-body) !important;
}

body.pk-canvas{
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ambient mesh — two restrained blurred orbs, fixed, low opacity */
body.pk-canvas::before,
body.pk-canvas::after{
  content: "";
  position: fixed;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -1;
  opacity: 0.28;
  pointer-events: none;
}
body.pk-canvas::before{
  background: var(--magenta);
  top: -20vmax;
  left: -15vmax;
}
body.pk-canvas::after{
  background: var(--violet);
  bottom: -25vmax;
  right: -15vmax;
  opacity: 0.22;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--f-display) !important;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

a{ color: var(--cyan); }
a:hover{ color: var(--magenta); }

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

/* ---------------------------------------------------------------- navbar */
.pk-nav{
  background: rgba(10,11,17,0.72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.pk-nav .navbar-brand{
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--ink-1) !important;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.pk-nav .navbar-brand .brand-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 12px var(--magenta);
}
.pk-nav .nav-link{
  color: var(--ink-2) !important;
  font-weight: 500;
  border-radius: var(--r-sm);
  padding: .5rem .9rem !important;
  transition: color .15s ease, background .15s ease;
}
.pk-nav .nav-link:hover,
.pk-nav .nav-link.active{
  color: var(--ink-1) !important;
  background: var(--surface);
}
.pk-nav .navbar-toggler{
  border-color: var(--border);
  filter: invert(1) grayscale(1) brightness(2);
}

.fixed-dropdown,
.dropdown-menu{
  background: #12131D !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-glass) !important;
  padding: .4rem !important;
}
.dropdown-item{
  color: var(--ink-2) !important;
  border-radius: var(--r-sm);
  padding: .55rem .8rem !important;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: var(--surface-2) !important;
  color: var(--ink-1) !important;
}
.dropdown-item.text-danger{ color: var(--bad) !important; }
.dropdown-divider{ border-color: var(--border) !important; }

/* ---------------------------------------------------------------- main shell */
main .container,
main .container-fluid{
  background: transparent !important;
}

/* ---------------------------------------------------------------- glass surfaces: cards */
.card,
.dashboard-card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-glass);
  color: var(--ink-1);
}
.card:hover{ transform: none; }

.card-header{
  background: linear-gradient(120deg, rgba(255,61,154,0.16), rgba(124,92,252,0.16)) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink-1) !important;
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.card-header.text-white{ color: var(--ink-1) !important; }
.card-header.text-dark{ color: var(--ink-1) !important; }
.card-body{ color: var(--ink-1); }
.card-footer{
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
}

/* alert-style header used on Keys/generate.php */
.shadow-lg.p-3.mb-5{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  color: var(--ink-1) !important;
  box-shadow: var(--shadow-glass) !important;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  border-radius: var(--r-sm) !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary,
.btn-outline-dark,
.btn-glow{
  background: var(--grad-brand) !important;
  border: none !important;
  color: #0A0A10 !important;
  box-shadow: 0 6px 20px rgba(255,61,154,0.25);
}
.btn-primary:hover,
.btn-outline-dark:hover,
.btn-glow:hover{
  filter: brightness(1.08);
  box-shadow: 0 8px 26px rgba(124,92,252,0.35);
  color: #0A0A10 !important;
}

.btn-outline-secondary,
.btn-secondary{
  background: var(--surface-2) !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--ink-1) !important;
}
.btn-danger{ background: var(--bad) !important; border: none !important; }
.btn-sm{ border-radius: var(--r-sm) !important; }

.btn-glow::after{ display:none !important; content:none !important; }

/* semantic outline buttons: glass ghost by default, fills with its own color on hover */
.btn-outline-primary,
.btn-outline-info{ color: var(--cyan) !important; border: 1px solid rgba(47,230,196,0.55) !important; background: rgba(47,230,196,0.06) !important; }
.btn-outline-primary:hover,
.btn-outline-info:hover{ background: var(--cyan) !important; color: #062018 !important; }

.btn-outline-success{ color: var(--ok) !important; border: 1px solid rgba(52,228,163,0.55) !important; background: rgba(52,228,163,0.06) !important; }
.btn-outline-success:hover{ background: var(--ok) !important; color: #062018 !important; }

.btn-outline-danger{ color: var(--bad) !important; border: 1px solid rgba(255,94,126,0.55) !important; background: rgba(255,94,126,0.06) !important; }
.btn-outline-danger:hover{ background: var(--bad) !important; color: #20050b !important; }

.btn-outline-warning{ color: var(--warn) !important; border: 1px solid rgba(251,191,102,0.55) !important; background: rgba(251,191,102,0.06) !important; }
.btn-outline-warning:hover{ background: var(--warn) !important; color: #20130a !important; }

.btn-outline-light{ color: var(--ink-1) !important; border: 1px solid var(--border-hi) !important; background: var(--surface) !important; }
.btn-outline-light:hover{ background: var(--surface-2) !important; }

.btn-dark{ background: var(--surface-2) !important; border: 1px solid var(--border-hi) !important; color: var(--ink-1) !important; }
.btn-dark:hover{ background: var(--grad-brand) !important; color: #0A0A10 !important; }

.btn-outline-primary.text-dark:hover,
.btn-outline-success.text-dark:hover,
.btn-outline-danger.text-dark:hover,
.btn-outline-warning.text-dark:hover{ color: inherit !important; }

/* ---------------------------------------------------------------- forms */
.form-select{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-1) !important;
  border-radius: var(--r-sm) !important;
}
.form-control::placeholder{ color: var(--ink-3); }
.form-control:focus,
.form-select:focus{
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--magenta) !important;
  box-shadow: 0 0 0 3px rgba(255,61,154,0.18) !important;
  color: var(--ink-1) !important;
}
.form-floating > label{ color: var(--ink-3) !important; }
.form-check-input{
  background-color: rgba(255,255,255,0.08);
  border-color: var(--border-hi);
}
.form-check-input:checked{
  background-color: var(--magenta);
  border-color: var(--magenta);
}
.form-label{ color: var(--ink-2); font-weight: 500; }

/* ---------------------------------------------------------------- tables */
.table{ color: var(--ink-1) !important; }
.table > :not(caption) > * > *{
  background: transparent !important;
  border-bottom-color: var(--border) !important;
  color: var(--ink-1);
}
.table thead th{
  color: var(--ink-3);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-hi) !important;
}
.table-hover > tbody > tr:hover > *{
  background: var(--surface-2) !important;
}
.table-responsive{ border-radius: var(--r-md); overflow: hidden; }

/* ---------------------------------------------------------------- badges & keys */
.badge{
  font-weight: 600;
  border-radius: 999px !important;
  letter-spacing: .01em;
}
.badge.bg-light{
  background: var(--surface-2) !important;
  color: var(--ink-1) !important;
}
.badge.bg-primary{ background: var(--violet) !important; color:#fff !important; }
.badge.bg-success{ background: var(--ok) !important; color:#062018 !important; }
.badge.bg-danger{  background: var(--bad) !important; color:#20050b !important; }
.badge.bg-warning{ background: var(--warn) !important; color:#20130a !important; }

/* license / key chips: signature element — monospace, glowing, pill */
code,
.key-chip,
td:has(> code){
  font-family: var(--f-mono);
}
code{
  background: rgba(47,230,196,0.10);
  border: 1px solid rgba(47,230,196,0.35);
  color: var(--cyan);
  padding: .15rem .5rem;
  border-radius: 8px;
  font-size: .85em;
}

/* ---------------------------------------------------------------- list groups */
.list-group-item{
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--ink-1) !important;
}
.list-group-item-action:hover{ background: var(--surface-2) !important; }

/* ---------------------------------------------------------------- alerts */
.alert{
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
}
.alert-success{ background: rgba(52,228,163,0.12) !important; color: var(--ok) !important; }
.alert-danger{  background: rgba(255,94,126,0.12) !important; color: var(--bad) !important; }
.alert-warning{ background: rgba(251,191,102,0.12) !important; color: var(--warn) !important; }
.alert-info,
.alert-primary{ background: rgba(124,92,252,0.12) !important; color: var(--violet) !important; }

/* ---------------------------------------------------------------- pagination / modal */
.page-link{
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink-1) !important;
}
.page-item.active .page-link{
  background: var(--grad-brand) !important;
  border-color: transparent !important;
  color: #0A0A10 !important;
}
.modal-content{
  background: #12131D !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  color: var(--ink-1);
}

/* ---------------------------------------------------------------- stat cards (dashboard) */
.stat-card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  backdrop-filter: blur(20px);
  color: var(--ink-1) !important;
  box-shadow: var(--shadow-glass);
}
.stat-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--r-lg);
  padding:1px;
  background: var(--grad-brand);
  opacity:.35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.stat-card.purple .card-icon,
.stat-card.purple .stat-value{ color: var(--violet); }
.stat-card.pink .card-icon,
.stat-card.pink .stat-value{ color: var(--magenta); }
.stat-card.blue .card-icon,
.stat-card.blue .stat-value{ color: var(--cyan); }
.stat-card.yellow .card-icon,
.stat-card.yellow .stat-value{ color: var(--warn); }
.stat-label{ color: var(--ink-3) !important; }
.trend-up{ background: rgba(52,228,163,0.14) !important; color: var(--ok) !important; }
.trend-down{ background: rgba(255,94,126,0.14) !important; color: var(--bad) !important; }

/* ---------------------------------------------------------------- footer */
footer{
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
}

/* ---------------------------------------------------------------- auth toggle switch (Starter.php) */
.slider{ background-color: var(--surface-2); }
.slider:before{ background-color: var(--ink-1); }
input:checked + .slider{ background-color: var(--magenta); }

/* ---------------------------------------------------------------- stray Bootstrap utilities */
.bg-light{ background: var(--surface-2) !important; }
.bg-white{ background: var(--surface) !important; }
.bg-secondary{ background: var(--surface-2) !important; }
.bg-info{ background: rgba(47,230,196,0.18) !important; color: var(--cyan) !important; }
.bg-dark{ background: #0D0F17 !important; }
.text-black,
.text-dark{ color: var(--ink-1) !important; }
.text-muted{ color: var(--ink-3) !important; }
.input-group-text{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-2) !important;
}

/* ---------------------------------------------------------------- DataTables (used on Keys/list, Admin/users) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing{
  color: var(--ink-2) !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-1) !important;
  border-radius: var(--r-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color: var(--ink-2) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--ink-1) !important;
}
table.dataTable thead th,
table.dataTable thead td{ border-bottom: 1px solid var(--border-hi) !important; }
table.dataTable.table-bordered{ border: 1px solid var(--border) !important; }
table.dataTable.table-bordered th,
table.dataTable.table-bordered td{ border: 1px solid var(--border) !important; }

/* ---------------------------------------------------------------- misc */
::selection{ background: var(--magenta); color: #fff; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg-1); }
::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover{ background: var(--border-hi); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}