/* ================================================================
   KUNDI MODERN SKIN  ·  kundi-modern.css
   Injected after main CSS — visual overrides only, no JS changes
   ================================================================ */

/* ── 1. DESIGN TOKEN OVERRIDES ────────────────────────────────── */
:root {
  /* Real depth — default values are all transparent #ff693300 */
  --elevate-1         : rgba(0,0,0,0.05);
  --elevate-2         : rgba(0,0,0,0.10);
  --shadow-2xs        : 0 1px 2px rgba(0,0,0,.04);
  --shadow-xs         : 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm         : 0 2px 6px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow            : 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-md         : 0 6px 20px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg         : 0 12px 40px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.05);
  --shadow-xl         : 0 20px 60px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.06);
  --shadow-2xl        : 0 32px 80px rgba(0,0,0,.20);

  /* Slightly refined palette */
  --background        : 220 14% 97%;
  --card              : 0 0% 100%;
  --card-border       : 220 13% 91%;
  --border            : 220 13% 89%;
  --input             : 220 13% 89%;
  --muted             : 220 12% 93%;
  --muted-foreground  : 240 7% 46%;
  --sidebar           : 0 0% 100%;
  --sidebar-border    : 220 13% 91%;

  /* Modern radius */
  --radius: 0.6rem;
}


/* ── 2. BASE ──────────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  letter-spacing: -0.011em;
  line-height: 1.5;
}


/* ── 3. SCROLLBARS ────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: hsl(220 13% 82%); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(220 13% 68%); }


/* ── 4. TYPOGRAPHY ────────────────────────────────────────────── */
h1 { letter-spacing: -0.025em; line-height: 1.25; font-weight: 700; }
h2 { letter-spacing: -0.020em; line-height: 1.3;  font-weight: 600; }
h3 { letter-spacing: -0.015em; line-height: 1.35; font-weight: 600; }
h4 { letter-spacing: -0.010em; line-height: 1.4;  font-weight: 600; }
label { font-weight: 500; letter-spacing: -0.005em; font-size: 0.8125rem; }
::placeholder { opacity: 0.55 !important; }


/* ── 5. SIDEBAR ───────────────────────────────────────────────── */
/* fixed left-0 top-0 z-40 sidebar container */
.fixed.left-0.top-0.z-40 {
  background: hsl(0 0% 100%) !important;
  border-right: 1px solid hsl(220 13% 91%) !important;
  box-shadow: 2px 0 16px rgba(0,0,0,.04) !important;
}

/* Sidebar nav link items */
.fixed.left-0.top-0.z-40 a,
.fixed.left-0.top-0.z-40 button[class*="flex"] {
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background 130ms ease, color 130ms ease !important;
}
.fixed.left-0.top-0.z-40 a:hover {
  background: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--primary)) !important;
}

/* Sidebar group label (section headers) */
.fixed.left-0.top-0.z-40 .text-xs.font-semibold,
.fixed.left-0.top-0.z-40 .text-xs.uppercase {
  font-size: 0.67rem !important;
  letter-spacing: 0.09em !important;
  font-weight: 700 !important;
  color: hsl(var(--muted-foreground)) !important;
}


/* ── 6. TOPBAR / PAGE HEADER ──────────────────────────────────── */
.border-b.bg-background\/95,
.border-b.bg-card.sticky,
.sticky.top-0.z-\[100\],
.border-b.sticky {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 1px 0 hsl(220 13% 91%), 0 2px 8px rgba(0,0,0,.04) !important;
}


/* ── 7. CARDS ─────────────────────────────────────────────────── */
.rounded-xl.border,
.rounded-xl.border.bg-card,
.bg-card.border.rounded-xl {
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04) !important;
  border-color: hsl(220 13% 91%) !important;
  border-radius: 0.75rem !important;
  transition: box-shadow 200ms ease, transform 200ms ease !important;
}
.rounded-xl.border:hover,
.bg-card.border.rounded-xl:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.05) !important;
}
.rounded-lg.border,
.bg-card.border.rounded-lg {
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.03) !important;
  border-color: hsl(220 13% 91%) !important;
  border-radius: 0.625rem !important;
  transition: box-shadow 180ms ease !important;
}
.rounded-lg.border:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04) !important;
}

/* Stat / metric cards — numbers */
.rounded-xl.border .text-3xl,
.rounded-xl.border .text-2xl,
.rounded-lg.border  .text-3xl,
.rounded-lg.border  .text-2xl {
  letter-spacing: -0.04em;
  font-weight: 700;
}


/* ── 8. BUTTONS ───────────────────────────────────────────────── */
button, [role="button"] {
  transition: background-color 140ms ease, color 140ms ease,
              box-shadow 160ms ease, opacity 140ms ease,
              transform 100ms ease !important;
}
button:not([disabled]):active,
[role="button"]:not([disabled]):active {
  transform: scale(0.975) !important;
}
/* Primary button — add subtle lift */
button.bg-primary,
[role="button"].bg-primary {
  box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.10) !important;
}
button.bg-primary:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.12) !important;
  filter: brightness(1.05);
}


/* ── 9. INPUTS & TEXTAREAS ────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: var(--radius) !important;
  font-size: 0.875rem !important;
  transition: border-color 150ms, box-shadow 150ms !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.14),
              0 0 0 1px hsl(var(--primary) / 0.30) !important;
  border-color: hsl(var(--primary) / 0.60) !important;
}


/* ── 10. TABLES ───────────────────────────────────────────────── */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
thead tr {
  background: hsl(220 13% 96%) !important;
  border-bottom: 2px solid hsl(220 13% 89%) !important;
}
thead th {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: hsl(var(--muted-foreground)) !important;
  padding: 0.6875rem 1rem !important;
  white-space: nowrap !important;
}
tbody tr {
  transition: background 110ms ease !important;
  border-bottom: 1px solid hsl(220 13% 93%) !important;
}
tbody tr:nth-child(even) {
  background: hsl(220 14% 98%) !important;
}
tbody tr:hover {
  background: hsl(var(--primary) / 0.05) !important;
}
tbody td {
  padding: 0.6875rem 1rem !important;
  font-size: 0.8125rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid hsl(220 13% 93%) !important;
}
tfoot tr {
  border-top: 2px solid hsl(220 13% 89%) !important;
  background: hsl(220 13% 96%) !important;
}
tfoot td {
  padding: 0.625rem 1rem !important;
  font-size: 0.8125rem !important;
}


/* ── 11. TABS ─────────────────────────────────────────────────── */
/* TabsList: rounded-lg bg-muted p-1 */
[role="tablist"] {
  background: hsl(220 12% 91%) !important;
  border-radius: 0.625rem !important;
  padding: 0.25rem !important;
  gap: 2px !important;
  height: auto !important;
}
/* TabsTrigger */
[role="tab"] {
  border-radius: 0.4375rem !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.875rem !important;
  color: hsl(var(--muted-foreground)) !important;
  border: none !important;
  background: transparent !important;
  transition: all 150ms ease !important;
}
[role="tab"][data-state="active"],
[role="tab"].bg-background {
  background: hsl(0 0% 100%) !important;
  color: hsl(var(--foreground)) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05) !important;
}
[role="tab"]:hover:not([data-state="active"]) {
  background: hsl(0 0% 100% / 0.5) !important;
  color: hsl(var(--foreground)) !important;
}


/* ── 12. BADGES ───────────────────────────────────────────────── */
/* Badge base — inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold */
.rounded-md.border.px-2\.5.py-0\.5.text-xs,
.rounded-full.border.px-2\.5.py-0\.5.text-xs {
  border-radius: 9999px !important;
  font-size: 0.69rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0.2rem 0.6rem !important;
  line-height: 1.4 !important;
}

/* Status-colored badges (set by JS observer below) */
[data-kstatus="active"]    { background: hsl(142 72% 93%) !important; color: hsl(142 55% 26%) !important; border-color: hsl(142 60% 76%) !important; }
[data-kstatus="completed"] { background: hsl(210 80% 93%) !important; color: hsl(210 70% 30%) !important; border-color: hsl(210 70% 72%) !important; }
[data-kstatus="pending"]   { background: hsl(45  93% 93%) !important; color: hsl(35  80% 30%) !important; border-color: hsl(45  85% 72%) !important; }
[data-kstatus="draft"]     { background: hsl(220 13% 93%) !important; color: hsl(220 10% 38%) !important; border-color: hsl(220 12% 78%) !important; }
[data-kstatus="inactive"]  { background: hsl(220 13% 93%) !important; color: hsl(220 10% 38%) !important; border-color: hsl(220 12% 78%) !important; }
[data-kstatus="cancelled"] { background: hsl(0   84% 94%) !important; color: hsl(0   72% 32%) !important; border-color: hsl(0   72% 76%) !important; }
[data-kstatus="ongoing"]   { background: hsl(270 60% 93%) !important; color: hsl(270 52% 32%) !important; border-color: hsl(270 52% 72%) !important; }
[data-kstatus="planning"]  { background: hsl(30  90% 93%) !important; color: hsl(30  72% 30%) !important; border-color: hsl(30  80% 68%) !important; }

/* Type badges (activity types, media types) */
.rounded-md.border.text-xs.capitalize {
  border-radius: 9999px !important;
  font-size: 0.69rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 0.18rem 0.55rem !important;
}


/* ── 13. DIALOGS & MODALS ─────────────────────────────────────── */
/* Overlay: fixed inset-0 z-50 bg-black/80 */
.fixed.inset-0.z-50.bg-black\/80,
.fixed.inset-0.z-50 {
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  background: rgba(0,0,0,.45) !important;
}
/* DialogContent: fixed left-[50%] top-[50%] z-50 ... border bg-background shadow-lg */
.fixed.left-\[50\%\].top-\[50\%\].z-50 {
  border-radius: 1rem !important;
  border-color: hsl(220 13% 91%) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.20), 0 4px 16px rgba(0,0,0,.10) !important;
}
/* Sheet/Drawer */
.fixed.inset-y-0 {
  box-shadow: 8px 0 40px rgba(0,0,0,.16) !important;
}


/* ── 14. DROPDOWN MENUS ───────────────────────────────────────── */
[role="menu"] {
  border-radius: 0.625rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  border: 1px solid hsl(220 13% 91%) !important;
  overflow: hidden !important;
  padding: 0.25rem !important;
}
[role="menuitem"],
[role="menuitemcheckbox"],
[role="menuitemradio"] {
  font-size: 0.8125rem !important;
  border-radius: 0.375rem !important;
  padding: 0.4375rem 0.75rem !important;
  transition: background 100ms ease !important;
}


/* ── 15. SELECT DROPDOWN ──────────────────────────────────────── */
[data-radix-select-content] {
  border-radius: 0.625rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  border: 1px solid hsl(220 13% 91%) !important;
  overflow: hidden !important;
}
[data-radix-select-viewport] {
  padding: 0.25rem !important;
}
[role="option"] {
  font-size: 0.8125rem !important;
  border-radius: 0.375rem !important;
  padding: 0.4375rem 0.75rem !important;
  transition: background 100ms ease !important;
}


/* ── 16. POPOVERS & TOOLTIPS ──────────────────────────────────── */
[data-radix-popper-content-wrapper] > div {
  border-radius: 0.625rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  border: 1px solid hsl(220 13% 91%) !important;
}
[role="tooltip"] {
  font-size: 0.75rem !important;
  border-radius: 0.5rem !important;
  padding: 0.375rem 0.625rem !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.14) !important;
}


/* ── 17. ALERTS & TOASTS ──────────────────────────────────────── */
[role="alert"],
[data-sonner-toast] {
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
  border: 1px solid hsl(220 13% 91%) !important;
  font-size: 0.875rem !important;
}
/* Toast container */
.fixed.bottom-0.right-0,
.fixed.top-auto.sm\:bottom-0.sm\:right-0 {
  padding: 1rem !important;
}


/* ── 18. PROGRESS BARS ────────────────────────────────────────── */
[role="progressbar"] {
  border-radius: 9999px !important;
  overflow: hidden !important;
  height: 6px !important;
}
[role="progressbar"] > div {
  border-radius: 9999px !important;
  transition: width 400ms ease !important;
}


/* ── 19. AVATARS ──────────────────────────────────────────────── */
.rounded-full.h-9,
.rounded-full.h-8,
.rounded-full.h-10 {
  box-shadow: 0 0 0 2px hsl(0 0% 100%),
              0 0 0 3px hsl(220 13% 88%) !important;
}


/* ── 20. EMPTY STATES ─────────────────────────────────────────── */
.text-center.py-16.border,
.text-center.py-8.border {
  border-radius: 0.875rem !important;
  border-style: dashed !important;
  border-color: hsl(220 13% 85%) !important;
  background: hsl(220 14% 99%) !important;
}
.text-center.py-16.border.rounded-xl,
.text-center.py-8.border.rounded-lg {
  padding: 3rem 2rem !important;
}


/* ── 21. BREADCRUMBS ──────────────────────────────────────────── */
nav[aria-label*="breadcrumb"],
[aria-label*="breadcrumb"] {
  font-size: 0.8125rem !important;
}
nav[aria-label*="breadcrumb"] a {
  color: hsl(var(--muted-foreground)) !important;
  transition: color 130ms ease !important;
}
nav[aria-label*="breadcrumb"] a:hover {
  color: hsl(var(--foreground)) !important;
}


/* ── 22. FORMS ────────────────────────────────────────────────── */
.space-y-2 label,
.space-y-4 label,
.grid label {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: hsl(var(--foreground)) !important;
}
/* Form error messages */
.text-destructive.text-sm {
  font-size: 0.75rem !important;
}


/* ── 23. SEPARATOR ────────────────────────────────────────────── */
[role="separator"],
.border-t, .border-b, .border-l, .border-r {
  --separator-color: hsl(220 13% 91%);
}


/* ── 24. LINK STYLES ──────────────────────────────────────────── */
a.text-primary,
a[class*="text-primary"] {
  transition: opacity 130ms ease, text-decoration-color 130ms ease !important;
}
a.text-primary:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.85;
}


/* ── 25. LOADING SKELETON ─────────────────────────────────────── */
.animate-pulse > div,
[class*="skeleton"] {
  background: linear-gradient(
    90deg,
    hsl(220 13% 93%) 0%,
    hsl(220 13% 88%) 50%,
    hsl(220 13% 93%) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: k-shimmer 1.6s ease-in-out infinite !important;
}
@keyframes k-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ── 26. LOGIN PAGE ───────────────────────────────────────────── */
/* min-h-screen flex items-center justify-center ... relative overflow-hidden */
.min-h-screen.flex.items-center.justify-center.bg-background {
  background: linear-gradient(
    135deg,
    hsl(220 20% 97%) 0%,
    hsl(30 20% 97%) 50%,
    hsl(var(--primary) / 0.04) 100%
  ) !important;
}
.min-h-screen.flex.items-center.justify-center.bg-background > * {
  position: relative;
  z-index: 1;
}
/* Login card */
.min-h-screen.flex.items-center.justify-center.bg-background .rounded-xl.border,
.min-h-screen.flex.items-center.justify-center.bg-background .rounded-lg.border {
  box-shadow: 0 8px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06) !important;
  border-color: hsl(220 13% 88%) !important;
}
/* Decorative bg dots */
.min-h-screen.flex.items-center.justify-center.bg-background::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, hsl(var(--primary) / 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}


/* ── 27. HOVER LIFT ON PHASE/PROJECT CARDS ────────────────────── */
/* Phase accordion toggle rows */
.group.flex.items-center.justify-between.border.rounded-lg {
  border-color: hsl(220 13% 89%) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease,
              background 140ms ease !important;
  border-radius: 0.625rem !important;
}
.group.flex.items-center.justify-between.border.rounded-lg:hover {
  border-color: hsl(var(--primary) / 0.3) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  background: hsl(0 0% 100%) !important;
}

/* Media / file cards */
.group.relative.border.rounded-xl.overflow-hidden {
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}
.group.relative.border.rounded-xl.overflow-hidden:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}


/* ── 28. DASHBOARD STAT CARDS ─────────────────────────────────── */
/* Dashboard: large number + small label layout */
.flex.flex-col.gap-1 .text-3xl,
.flex.flex-col.gap-2 .text-3xl,
.flex.flex-col.gap-1 .text-2xl {
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
.flex.flex-col.gap-1 .text-muted-foreground,
.flex.flex-col.gap-2 .text-muted-foreground {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}


/* ── 29. CHART IMPROVEMENTS ───────────────────────────────────── */
.recharts-wrapper svg {
  overflow: visible;
}
.recharts-cartesian-grid-horizontal line,
.recharts-cartesian-grid-vertical line {
  stroke: hsl(220 13% 92%) !important;
}
.recharts-text {
  font-size: 0.7rem !important;
  fill: hsl(var(--muted-foreground)) !important;
}


/* ── 30. RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  [role="tablist"] { overflow-x: auto; flex-wrap: nowrap; }
  .fixed.left-0.top-0.z-40 { box-shadow: 0 0 24px rgba(0,0,0,.15) !important; }
  .fixed.left-\[50\%\].top-\[50\%\].z-50 { border-radius: 0.75rem !important; }
  thead th { font-size: 0.65rem !important; padding: 0.5rem 0.75rem !important; }
  tbody td { padding: 0.5625rem 0.75rem !important; }
}

@media (max-width: 480px) {
  .fixed.left-\[50\%\].top-\[50\%\].z-50 {
    width: calc(100vw - 2rem) !important;
    max-width: none !important;
  }
}


/* ================================================================
   31. BROKEN-IMAGE PLACEHOLDER  (.k-no-img)
   ================================================================ */
.k-no-img {
  position: relative !important;
  background: hsl(var(--muted)) !important;
}
.k-no-img::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    hsl(var(--muted)) center / 36px 36px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

/* ================================================================
   32. LIGHTBOX  (#k-lb-root)
   ================================================================ */
#k-lb-root {
  position: fixed;
  inset: 0;
  z-index: 99990;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 220ms ease;
}
#k-lb-root.k-lb-visible { opacity: 1; }

#k-lb-bg {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.90);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: default;
}

#k-lb-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 1rem;
  padding: 3rem 1rem 1.5rem;
  box-sizing: border-box;
}

#k-lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
  z-index: 1;
}

#k-lb-img {
  max-width: 88vw;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 0.75rem;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
  transition: opacity 180ms ease;
  display: block;
}

#k-lb-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}
#k-lb-title {
  color: rgba(255,255,255,0.88);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: Inter, sans-serif;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#k-lb-count {
  color: rgba(255,255,255,0.38);
  font-size: 0.75rem;
  font-family: Inter, sans-serif;
  letter-spacing: 0.04em;
}

/* Nav buttons */
#k-lb-prev,
#k-lb-next {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  min-width: 48px;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, transform 120ms;
  flex-shrink: 0;
}
#k-lb-prev:hover,
#k-lb-next:hover { background: rgba(255,255,255,0.22); transform: scale(1.08); }

#k-lb-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 3;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, transform 120ms;
}
#k-lb-close:hover { background: rgba(239,68,68,0.6); transform: scale(1.08); }

/* Zoom cursor on clickable images */
.k-lb-trigger { cursor: zoom-in !important; }

@media (max-width: 600px) {
  #k-lb-prev, #k-lb-next {
    position: absolute;
    bottom: 1rem;
    top: auto;
  }
  #k-lb-prev { left: 1rem; }
  #k-lb-next { right: 1rem; }
  #k-lb-shell { flex-direction: column; padding-bottom: 5rem; }
}

/* ================================================================
   33. MEDIA GROUPING  (.k-grp-badge, .k-grp-btn, .k-grp-header)
   ================================================================ */
/* Group label badge on media card */
.k-grp-badge {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 4;
  background: rgba(3,7,18,0.62);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  font-family: Inter, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: none;
}

/* Group assign button — shown on card hover */
.k-grp-btn {
  position: absolute;
  bottom: 2.75rem;
  right: 0.375rem;
  z-index: 5;
  background: rgba(3,7,18,0.55);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms, background 120ms;
  padding: 0;
  line-height: 1;
}
.group:hover .k-grp-btn,
.group:focus-within .k-grp-btn { opacity: 1; }
.k-grp-btn:hover { background: rgba(255,107,53,0.82); }

/* Group section header in the media grid */
.k-grp-header {
  grid-column: 1 / -1;
  padding: 0.25rem 0.125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: Inter, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 0.25rem;
}