:root{
  --kc-radius: 16px;
  --kc-radius-sm: 12px;

  --kc-accent: #5b8cff;
  --kc-accent-2: #8b5bff;

  --kc-bg: #f5f7fb;
  --kc-text: #0f172a;
  --kc-muted: rgba(15,23,42,.68);

  --kc-glass-bg: rgba(255,255,255,.55);
  --kc-glass-border: rgba(255,255,255,.45);
  --kc-shadow: 0 18px 40px rgba(2,6,23,.10);
  --kc-shadow-soft: 0 10px 24px rgba(2,6,23,.10);

  --kc-blur: 20px;
  --kc-ring: 0 0 0 .22rem rgba(91,140,255,.35);

  --kc-motion-fast: 150ms;
  --kc-motion: 220ms;
  --kc-motion-slow: 320ms;
  --kc-ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --kc-bg: #0b1020;
    --kc-text: #e7eefc;
    --kc-muted: rgba(231,238,252,.68);

    --kc-glass-bg: rgba(17,25,45,.55);
    --kc-glass-border: rgba(255,255,255,.12);
    --kc-shadow: 0 22px 55px rgba(0,0,0,.45);
    --kc-shadow-soft: 0 16px 38px rgba(0,0,0,.35);

    --kc-ring: 0 0 0 .22rem rgba(91,140,255,.38);
  }
}

html,body{height:100%;}
body{
  color: var(--kc-text);
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(91,140,255,.18), transparent 55%),
    radial-gradient(700px 380px at 85% 20%, rgba(139,91,255,.14), transparent 60%),
    radial-gradient(900px 500px at 50% 100%, rgba(91,140,255,.10), transparent 60%),
    var(--kc-bg);
}

.kc-muted{color: var(--kc-muted) !important;}

/* Glass surfaces */
.glass{
  background: var(--kc-glass-bg);
  border: 1px solid var(--kc-glass-border);
  border-radius: var(--kc-radius);
  box-shadow: var(--kc-shadow);
  backdrop-filter: blur(var(--kc-blur));
  -webkit-backdrop-filter: blur(var(--kc-blur));
  transform: translateZ(0);
}

.glass-soft{
  box-shadow: var(--kc-shadow-soft);
}

.glass-card{
  position: relative;
  overflow: hidden;
}

.glass-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 180px at 10% 0%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(420px 160px at 90% 10%, rgba(255,255,255,.35), transparent 50%),
    linear-gradient(120deg, rgba(91,140,255,.18), rgba(139,91,255,.10), rgba(91,140,255,.14));
  opacity:.10;
  pointer-events:none;
  filter: blur(6px);
  transition: opacity var(--kc-motion) var(--kc-ease);
}

.glass-card:hover::before{
  opacity:.20;
}

.glass:hover{
  box-shadow: 0 22px 55px rgba(2,6,23,.14);
}

.glass .card-header,
.glass .bg-white{
  background: transparent !important;
}

.glass .card-header{
  border-bottom: 1px solid var(--kc-glass-border);
}

.glass .table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.08);
  --bs-table-hover-bg: rgba(255,255,255,.10);
}

@media (prefers-color-scheme: dark){
  .glass .table{
    --bs-table-striped-bg: rgba(255,255,255,.05);
    --bs-table-hover-bg: rgba(255,255,255,.07);
  }
}

/* Improve Bootstrap cards to match */
.card{
  border-radius: var(--kc-radius);
}

.navbar{
  background: var(--kc-glass-bg) !important;
  border-bottom: 1px solid var(--kc-glass-border) !important;
  backdrop-filter: blur(var(--kc-blur));
  -webkit-backdrop-filter: blur(var(--kc-blur));
}

.bg-glass{
  background: var(--kc-glass-bg) !important;
  border-color: var(--kc-glass-border) !important;
  backdrop-filter: blur(var(--kc-blur));
  -webkit-backdrop-filter: blur(var(--kc-blur));
}

.navbar .navbar-brand .kc-icon{
  width: 1.15rem;
  height: 1.15rem;
}

/* Buttons + focus */
.btn{
  border-radius: 999px;
  transition: transform var(--kc-motion-fast) var(--kc-ease), box-shadow var(--kc-motion-fast) var(--kc-ease), background-color var(--kc-motion-fast) var(--kc-ease), color var(--kc-motion-fast) var(--kc-ease), border-color var(--kc-motion-fast) var(--kc-ease);
}

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

.btn:active{
  transform: translateY(0px) scale(.98);
}

.btn:hover{
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}

.btn:focus-visible{
  box-shadow: var(--kc-ring) !important;
  outline: none;
}

.form-control,
.form-select{
  border-radius: var(--kc-radius-sm);
  background-color: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.40);
  backdrop-filter: blur(calc(var(--kc-blur) - 8px));
  -webkit-backdrop-filter: blur(calc(var(--kc-blur) - 8px));
}

@media (prefers-color-scheme: dark){
  .form-control,
  .form-select{
    background-color: rgba(17,25,45,.55);
    border-color: rgba(255,255,255,.14);
    color: var(--kc-text);
  }
}

/* Icon system */
.kc-btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-inline: .85rem;
  position: relative;
  overflow: hidden;
}

.kc-btn::after{
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), transparent 65%);
  transform: translateX(-40%) translateY(20%) scale(.6);
  opacity: 0;
  transition: opacity var(--kc-motion) var(--kc-ease), transform var(--kc-motion) var(--kc-ease);
  pointer-events: none;
}

.kc-btn:hover::after,
.kc-btn:focus-visible::after{
  opacity: .35;
  transform: translateX(25%) translateY(-5%) scale(1);
}

.kc-icon{
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: currentColor;
}

/* Stroke->Fill illusion + draw */
.kc-icon path{
  vector-effect: non-scaling-stroke;
}

.kc-icon.kc-icon--anim path{
  fill: currentColor;
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition:
    stroke-dashoffset var(--kc-motion-slow) var(--kc-ease),
    fill-opacity var(--kc-motion) var(--kc-ease),
    transform var(--kc-motion) var(--kc-ease);
  transform-origin: 50% 50%;
}

a:hover .kc-icon.kc-icon--anim path,
button:hover .kc-icon.kc-icon--anim path,
a:focus-visible .kc-icon.kc-icon--anim path,
button:focus-visible .kc-icon.kc-icon--anim path{
  stroke-dashoffset: 0;
  fill-opacity: .85;
  transform: scale(1.04);
}

/* Subtle morph-like wobble (no heavy JS) */
@keyframes kc-wobble{
  0%,100%{transform: rotate(0deg) scale(1.04);}
  35%{transform: rotate(-5deg) scale(1.06);}
  70%{transform: rotate(4deg) scale(1.05);}
}

a:hover .kc-icon.kc-icon--wobble path,
button:hover .kc-icon.kc-icon--wobble path{
  animation: kc-wobble 520ms var(--kc-ease);
}

/* Scroll reveal */
[data-reveal]{
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity var(--kc-motion-slow) var(--kc-ease), transform var(--kc-motion-slow) var(--kc-ease);
  will-change: transform, opacity;
}

[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
  [data-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn{
    transition: none;
  }
  .kc-icon.kc-icon--anim path{
    transition: none;
    stroke-dashoffset: 0;
    fill-opacity: .85;
  }
}