/* RELEARN SOLUTION — Formal Corporate IT theme */

:root{
  --bg-0:#070b14;
  --bg-1:#0a0f1c;
  --accent-1:#16318C;   /* primary — deep navy blue */
  --accent-2:#077ADD;   /* secondary — mid blue */
  --accent-3:#0196FC;   /* highlight — bright sky blue */
  --accent-1-rgb: 22,49,140;
  --accent-2-rgb: 7,122,221;
  --accent-3-rgb: 1,150,252;
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.12);
  --glass-bg-strong: rgba(255,255,255,0.06);
  --mascot-pink:#ec4899;
  --mascot-cyan:#22d3ee;
  --mascot-purple:#a855f7;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background: var(--bg-0);
  color:#e6ecf0;
  font-family:"Prompt","Inter",system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  position:relative;
}

/* ---------- Background ambience (flat, no glow) ---------- */
.bg-scene{
  position:fixed;
  inset:0;
  z-index:-2;
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.bg-grid{
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.blob{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter: blur(110px);
  pointer-events:none;
}

/* ---------- Glass components ---------- */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.glass-strong{
  background: var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.glass-card{
  background: var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.glass-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 14px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Key focal cards (e.g. stats) — soft shadow + light top edge for depth, no glow */
.stat-card{
  border-top: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Mascot-color accents (Why Choose Us cards) — reflected light from the robot mascot */
.card-accent-pink{
  border-top-color: rgba(236,72,153,0.6);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 40px -12px rgba(236,72,153,0.45);
}
.card-accent-cyan{
  border-top-color: rgba(34,211,238,0.6);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 40px -12px rgba(34,211,238,0.45);
}
.card-accent-purple{
  border-top-color: rgba(168,85,247,0.6);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 40px -12px rgba(168,85,247,0.45);
}
.num-pink{ color: var(--mascot-pink); }
.num-cyan{ color: var(--mascot-cyan); }
.num-purple{ color: var(--mascot-purple); }

/* Gentle idle bob for standalone mascot illustrations */
@keyframes mascot-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.mascot-float{
  animation: mascot-float 4s ease-in-out infinite;
}

/* Highlighted plan/column — glowing border, like a "most popular" pricing card. Plain solid
   border on purpose: a gradient-clipped border needs an opaque mask layer to hide the fill,
   and without it the "transparent" layer does nothing — the gradient paints the whole box
   solid instead of just a ring. Keep this simple to avoid that trap. */
.plan-highlight{
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 24px;
  border: 2px solid var(--accent-3);
  background: transparent;
  box-shadow: 0 0 36px -6px rgba(var(--accent-3-rgb),0.5), 0 0 36px -6px rgba(var(--accent-2-rgb),0.4), inset 0 0 24px -10px rgba(var(--accent-3-rgb),0.3);
  pointer-events: none;
}
.badge-popular{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.05em;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  padding:5px 12px 5px 8px;
  border-radius:9999px;
}
.badge-popular svg{ width:12px; height:12px; }

/* Ambient glow behind the mascot image, echoing its own light */
.mascot-glow{
  position:absolute;
  inset:-10%;
  background: radial-gradient(circle, rgba(236,72,153,0.25) 0%, rgba(34,211,238,0.18) 45%, rgba(168,85,247,0.12) 65%, transparent 75%);
  filter: blur(30px);
  z-index:-1;
}

/* Pricing/tool cards — dark themed, top edge + check icons tinted per brand color */
.tool-card{
  border-top: 2px solid var(--tool-accent, var(--accent-3));
}
.check-icon{
  width:20px;height:20px;
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--tool-accent, var(--accent-3));
  color: var(--tool-accent, var(--accent-3));
  flex-shrink:0;
}
.check-icon svg{ width:11px; height:11px; }

/* Instructor cards — full-bleed portrait so the photo carries the card, name overlaid on it */
.instructor-card{
  border-top: 2px solid var(--card-accent, var(--accent-3));
}
.instructor-card .aspect-square img{
  transition: transform .4s ease;
}
.instructor-card:hover .aspect-square img{
  transform: scale(1.04);
}

/* Certificate-style frame (e.g. national trust panel) — textured, tinted border, seal corners, no glow */
.trust-frame{
  position:relative;
  background:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    var(--glass-bg-strong);
  background-size: 28px 28px, 28px 28px, auto;
  border:1px solid rgba(79,195,255,0.2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.trust-frame::before,
.trust-frame::after{
  content:"";
  position:absolute;
  width:32px;height:32px;
  pointer-events:none;
}
.trust-frame::before{
  top:16px;left:16px;
  border-top:2px solid rgba(79,195,255,0.5);
  border-left:2px solid rgba(79,195,255,0.5);
  border-top-left-radius:8px;
}
.trust-frame::after{
  bottom:16px;right:16px;
  border-bottom:2px solid rgba(79,195,255,0.5);
  border-right:2px solid rgba(79,195,255,0.5);
  border-bottom-right-radius:8px;
}

/* Icon-cluster blob (e.g. trust panel) — flat tinted shape, no glow */
.blob-shape{
  background: rgba(79,195,255,0.07);
  border:1px solid rgba(79,195,255,0.16);
  border-radius: 50% 50% 40% 40% / 60% 60% 32% 32%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.agency-badge{
  width:104px;height:104px;
  display:flex;align-items:center;justify-content:center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
  transition: transform .25s ease;
}
.agency-badge:hover{ transform: translateY(-3px); }

/* Navbar */
#navbar{
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav-pill{
  background: rgba(10,16,32,0.7);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.nav-pill a{
  position:relative;
  transition: color .2s ease;
}
.nav-pill a.active{
  color:#fff;
}
.nav-pill a:hover{
  color:#fff;
}

/* Nav "About" dropdown (desktop) — custom button, not native <details> */
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  transition: color .2s ease;
}
.nav-dropdown-trigger:focus{ outline:none; }
.nav-dropdown-trigger:focus-visible{
  outline:2px solid rgba(79,195,255,0.6);
  outline-offset:4px;
  border-radius:4px;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.active .nav-dropdown-trigger{
  color:#fff;
}
.nav-dropdown .chevron{
  transition: transform .2s ease;
}
.nav-dropdown.open .nav-dropdown-trigger .chevron{
  transform: rotate(180deg);
}
/* Shares its look with .filter-menu/.filter-option (catalog filters) so every
   dark-theme dropdown on the site reads as the same component. */
.nav-dropdown-panel{
  z-index:70;
  background:#0d1224;
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity:0;
  /* translateX(-50%) centers the panel (paired with the left-1/2 utility class);
     keep it in every state here since this rule's transform replaces, not merges
     with, the Tailwind utility's transform. */
  transform: translateX(-50%) translateY(-6px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-dropdown.open .nav-dropdown-panel{
  opacity:1;
  transform: translateX(-50%) translateY(0);
  pointer-events:auto;
}
.nav-dropdown-panel a{
  padding:9px 10px;
  border-radius:9px;
  font-size:13px;
  color: rgba(230,236,240,0.7);
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown-panel a:hover{
  background: rgba(255,255,255,0.06);
  color:#fff;
}

/* Nav "About" dropdown (mobile) */
.nav-dropdown-mobile > summary{
  list-style:none;
  cursor:pointer;
}
.nav-dropdown-mobile > summary::-webkit-details-marker,
.nav-dropdown-mobile > summary::marker{
  display:none;
  content:none;
}
.nav-dropdown-mobile .chevron{
  transition: transform .2s ease;
}
.nav-dropdown-mobile[open] .chevron{
  transform: rotate(180deg);
}

/* ---------- Headline highlight (flat, no gradient) ---------- */
.text-gradient{
  color: var(--accent-3);
}

/* ---------- Buttons (flat, no glow) ---------- */
.btn-primary{
  background: var(--accent-2);
  color:#ffffff;
  font-weight:600;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.btn-primary:hover{
  background: var(--accent-3);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.btn-ghost{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.18);
  color:#e6ecf0;
  transition: all .2s ease;
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.32);
}

/* ---------- Misc ---------- */
.pill{
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.icon-badge{
  width:52px;height:52px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(22,49,140,0.35);
  border:1px solid rgba(255,255,255,0.14);
}
.icon-badge-alt{
  background: rgba(7,122,221,0.35);
}
.icon-badge-green{
  background: rgba(16,185,129,0.28);
}
.reveal{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.in-view{
  opacity:1;
  transform: translateY(0);
}
.hero-glow{
  background: radial-gradient(ellipse 65% 55% at 50% 0%, rgba(var(--accent-3-rgb),0.22) 0%, rgba(var(--accent-2-rgb),0.1) 45%, transparent 75%);
}
::selection{ background: var(--accent-2); color:#ffffff; }

/* Scrollbar — hidden */
html{ scrollbar-width:none; -ms-overflow-style:none; }
::-webkit-scrollbar{ width:0; height:0; display:none; }

.marquee-track{
  display:flex;
  width:max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.number-badge{
  width:36px;height:36px;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.85rem;
  background: var(--accent-1);
  border:1px solid rgba(255,255,255,0.14);
  color:#ffffff;
}

/* ---------- Terminal / code animation (flat) ---------- */
.terminal-window{
  position:relative;
  background: #0a0d16;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

.terminal-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background: rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.terminal-dot{
  width:11px;height:11px;border-radius:9999px;
  display:inline-block;
}
.terminal-dot.red{ background:#ff5f56; }
.terminal-dot.yellow{ background:#ffbd2e; }
.terminal-dot.green{ background:#27c93f; }
.terminal-title{
  margin-left:8px;
  font-family:"JetBrains Mono","Fira Code",ui-monospace,monospace;
  font-size:12px;
  color:rgba(230,236,240,0.45);
}
.terminal-body{
  font-family:"JetBrains Mono","Fira Code",ui-monospace,monospace;
  font-size:13px;
  line-height:1.75;
  padding:22px 24px;
  min-height:220px;
  white-space:pre-wrap;
  word-break:break-word;
  color:#c9d1d9;
  margin:0;
}
.terminal-body .tok-kw{ color:#4a9eef; }
.terminal-body .tok-fn{ color:#5fb8ff; }
.terminal-body .tok-str{ color:#8fb8d9; }
.terminal-body .tok-com{ color:#5b6472; font-style:italic; }
.terminal-body .tok-var{ color:#c9d1d9; }
.terminal-body .tok-type{ color:#4a8fe0; }
.terminal-body .tok-punc{ color:#8b98a5; }
.terminal-cursor{
  display:inline-block;
  width:7px;height:16px;
  background:#4a9eef;
  margin-left:2px;
  vertical-align:-2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

.status-strip{
  font-family:"JetBrains Mono","Fira Code",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:0.04em;
}
.status-dot{
  width:7px;height:7px;border-radius:9999px;
  background:#4a9eef;
}

/* ---------- Corporate Training Catalog ---------- */
.catalog-search{
  background: rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  border-radius:9999px;
  transition: border-color .2s ease, background .2s ease;
}
.catalog-search:focus-within{
  border-color: rgba(1,150,252,0.5);
  background: rgba(255,255,255,0.07);
}
.catalog-search input{
  background:transparent;
  outline:none;
  color:#e6ecf0;
  width:100%;
}
.catalog-search input::placeholder{ color:rgba(230,236,240,0.35); }

.cat-nav{
  position: sticky;
  top: 76px;
  z-index: 30;
  background: rgba(7,11,20,0.85);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cat-pill{
  white-space:nowrap;
  padding:9px 16px;
  border-radius:9999px;
  font-size:13px;
  font-weight:600;
  color: rgba(230,236,240,0.6);
  border:1px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.cat-pill:hover{ color:#fff; }
.cat-pill.active{
  color:#fff;
  background: rgba(1,150,252,0.16);
  border-color: rgba(1,150,252,0.45);
}
.cat-pill .cat-pill-count{
  opacity:0.55;
  font-weight:500;
  margin-left:4px;
}

.course-group{
  border:1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius:16px;
  overflow:hidden;
}
.course-group-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  text-align:left;
  color:#e6ecf0;
  font-weight:600;
  font-size:14px;
  background: rgba(255,255,255,0.02);
  transition: background .2s ease;
}
.course-group-header:hover{ background: rgba(255,255,255,0.045); }
.course-group-header .chevron{
  transition: transform .25s ease;
  flex-shrink:0;
  color: rgba(230,236,240,0.4);
}
.course-group.open .course-group-header .chevron{ transform: rotate(180deg); }
.course-group-body{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.course-group.open .course-group-body{ grid-template-rows: 1fr; }
.course-group-body-inner{ overflow:hidden; }

.course-table-head{
  display:grid;
  grid-template-columns: 110px 1fr 90px 120px 150px;
  gap:14px;
  padding:0 20px 10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: rgba(230,236,240,0.35);
}
.course-row{
  display:grid;
  grid-template-columns: 110px 1fr 90px 120px 150px;
  gap:14px;
  align-items:center;
  padding:12px 20px;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:13px;
  transition: background .15s ease;
}
.course-row:hover{ background: rgba(79,195,255,0.04); }
.course-row .course-code{
  font-family:"JetBrains Mono","Fira Code",ui-monospace,monospace;
  font-size:10.5px;
  font-weight:600;
  color:#4fc3ff;
  background: rgba(79,195,255,0.12);
  border:1px solid rgba(79,195,255,0.25);
  border-radius:9999px;
  padding:3px 10px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  justify-self:start;
}
.course-row .course-name{ color: rgba(230,236,240,0.9); line-height:1.4; }
.course-row .course-days{ color: rgba(230,236,240,0.5); text-align:center; white-space:nowrap; }
.course-row .course-price{ color:#fff; font-weight:700; text-align:right; white-space:nowrap; }
.course-row .course-cta{
  justify-self:end;
  font-size:11px;
  font-weight:600;
  padding:7px 14px;
  border-radius:9999px;
  white-space:nowrap;
}

@media (max-width: 768px){
  .course-table-head{ display:none; }
  .course-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name name"
      "code days"
      "price cta";
    row-gap:8px;
  }
  .course-row .course-code{ grid-area: code; }
  .course-row .course-name{ grid-area: name; }
  .course-row .course-days{ grid-area: days; text-align:right; }
  .course-row .course-price{ grid-area: price; text-align:left; }
  .course-row .course-cta{ grid-area: cta; }
}

/* Custom filter dropdown (no native OS select styling) */
.filter-dropdown{
  position:relative;
}
.filter-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,0.05);
  border:1px solid var(--glass-border);
  color: rgba(230,236,240,0.8);
  border-radius:9999px;
  padding:11px 16px;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.filter-trigger:hover{ border-color: rgba(1,150,252,0.4); color:#fff; }
.filter-trigger .chevron{ transition: transform .2s ease; opacity:0.6; }
.filter-dropdown.open .filter-trigger{
  border-color: rgba(1,150,252,0.55);
  background: rgba(1,150,252,0.1);
  color:#fff;
}
.filter-dropdown.open .filter-trigger .chevron{ transform: rotate(180deg); }
.filter-dropdown.has-value .filter-trigger{
  border-color: rgba(1,150,252,0.4);
  color:#7dd8ff;
}

.filter-menu{
  position:absolute;
  top: calc(100% + 10px);
  left:0;
  min-width:210px;
  background:#0d1224;
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:60;
}
.filter-dropdown.open .filter-menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.filter-option{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  padding:9px 10px;
  border-radius:9px;
  font-size:13px;
  color: rgba(230,236,240,0.7);
  transition: background .15s ease, color .15s ease;
}
.filter-option:hover{ background: rgba(255,255,255,0.06); color:#fff; }
.filter-option.active{ color:#4fc3ff; background: rgba(79,195,255,0.1); }
.filter-option .filter-check{
  width:14px; height:14px;
  border-radius:4px;
  border:1.5px solid rgba(255,255,255,0.25);
  position:relative;
  flex-shrink:0;
}
.filter-option.active .filter-check{
  border-color:#4fc3ff;
  background:#4fc3ff;
}
.filter-option.active .filter-check::after{
  content:"";
  position:absolute;
  left:3px; top:0px;
  width:4px; height:8px;
  border:solid #06101f;
  border-width:0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 640px){
  .filter-dropdown{ flex:1; }
  .filter-trigger{ width:100%; justify-content:space-between; }
  .filter-menu{ left:0; right:0; min-width:0; }
}

.catalog-empty{
  text-align:center;
  padding:60px 20px;
  color: rgba(230,236,240,0.5);
}

/* ---------- Admin: training catalog manager ---------- */
.admin-cat-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left;
  padding:10px 14px; border-radius:12px;
  color: rgba(230,236,240,0.7);
  background: transparent;
  border:1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  font-size:0.85rem;
}
.admin-cat-row:hover{ background: rgba(255,255,255,0.04); }
.admin-cat-row.active{
  background: rgba(1,150,252,0.12);
  border-color: rgba(1,150,252,0.35);
  color:#fff;
}
.admin-cat-row-count{
  font-size:0.7rem;
  color: rgba(230,236,240,0.4);
  background: rgba(255,255,255,0.06);
  border-radius:9999px;
  padding:1px 8px;
}
.admin-label{
  display:block;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color: rgba(230,236,240,0.45);
  margin-bottom:6px;
}
.admin-input{
  width:100%;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:9px 12px;
  font-size:0.85rem;
  color:#fff;
  resize:vertical;
}
.admin-input:focus{
  outline:none;
  border-color: rgba(1,150,252,0.5);
  background: rgba(255,255,255,0.06);
}
.admin-input-sm{ padding:7px 10px; font-size:0.8rem; }
.admin-group-card{
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  padding:16px;
}
.admin-course-table{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.admin-course-row{
  display:grid;
  grid-template-columns: 90px 1fr 80px 100px 50px;
  gap:8px;
  align-items:center;
}
.admin-course-head{
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color: rgba(230,236,240,0.4);
  padding:0 2px;
}
@media (max-width: 768px){
  .admin-course-row{ grid-template-columns: 1fr; }
  .admin-course-head{ display:none; }
}