/* master/lms/assets/css/lms.css
   LMS BASE STYLES (NO THEME VISUALS)
*/

/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.lms-body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  color: var(--lms-text, #fff);
}

/* ============================================================
   CONTAINER / PAGE LAYOUT
   ============================================================ */
.lms-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

.lms-page,
.lms-section{ display: block; }

/* Vertical rhythm between stacked cards/sections */
.lms-card + .lms-card,
.dashboard-card + .dashboard-card{
  margin-top: 22px;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4,h5,h6{
  margin: 0 0 8px;
  font-weight: 700;
}
h1{ font-size: 2rem; }
h2{ font-size: 1.5rem; }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 10px; }

.muted{ opacity: .75; }
.small{ font-size: .85rem; }

/* ============================================================
   LINKS
   ============================================================ */
a{ color: inherit; text-decoration: underline; }
a:hover{ opacity: .85; }

/* ============================================================
   BUTTONS (NEUTRAL STRUCTURE ONLY)
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, opacity .15s ease, transform .08s ease;
}
.btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-xs{ padding: 6px 12px; font-size: .8rem; }
.btn-sm{ padding: 7px 14px; font-size: .85rem; }

/* Theme decides fills/borders */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-secondary,
.btn-ghost,
.btn-success,
.btn-danger,
.btn-warning,
.btn-warning-outline,
.btn-info,
.btn-light{
  /* intentionally blank */
}
/* ==========================================
   Metrics grid (reusable component)
   ========================================== */

:root{
  /* fallbacks (theme files can override these) */
  --lms-metric-bg: rgba(255,255,255,.04);
  --lms-metric-border: rgba(255,255,255,.10);
  --lms-metric-label: rgba(255,255,255,.75);
  --lms-metric-value: #ffffff;
  --lms-stripe-a: #b31942;  /* red */
  --lms-stripe-b: #ffffff;  /* white */
  --lms-stripe-c: #0a1f44;  /* blue */
}

/* Optional: stripe utility for ANY card */
.lms-card.og-striped{
  position: relative;
  overflow: hidden;
}
.lms-card.og-striped::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:10px;
  background: linear-gradient(
    90deg,
    var(--lms-stripe-a) 0%,
    var(--lms-stripe-a) 33.33%,
    var(--lms-stripe-b) 33.33%,
    var(--lms-stripe-b) 66.66%,
    var(--lms-stripe-c) 66.66%,
    var(--lms-stripe-c) 100%
  );
  opacity:.95;
  pointer-events:none;
}

/* Grid */
.lms-metrics{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 1100px){
  .lms-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .lms-metrics{ grid-template-columns: 1fr; }
}

.lms-metric{
  background: var(--lms-metric-bg);
  border: 1px solid var(--lms-metric-border);
  border-radius: 14px;
  padding: 14px;
  min-height: 74px;
}

.lms-metric .metric-label{
  font-size: 12px;
  color: var(--lms-metric-label);
  margin-bottom: 6px;
}

.lms-metric .metric-value{
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  color: var(--lms-metric-value);
}

/* ============================================================
   TABLES
   ============================================================ */
table{ width: 100%; border-collapse: collapse; }

thead th{
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
}

tbody td{ padding: 10px 12px; }

tbody tr + tr td{
  border-top: 1px solid var(--lms-border-soft, rgba(255,255,255,.15));
}

/* ============================================================
   PROGRESS BARS (STRUCTURE ONLY)
   ============================================================ */
.progress-bar,
.lms-progress-bar{
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar-fill,
.lms-progress-fill,
.lms-progress-bar-inner{
  height: 100%;
  width: 0%;
}

/* ============================================================
   STATUS / BADGES (STRUCTURE ONLY)
   ============================================================ */
.badge,
.badge-pill,
.pill,
.course-code-pill,
.course-status-pill,
.module-status-pill,
.lesson-quiz-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
}

/* ============================================================
   CARD STRUCTURE ONLY (NO VISUALS)
   ============================================================ */
.lms-card,
.course-card,
.dashboard-card,
.lms-side-card,
.manage-courses-card,
.course-manage-card,
.module-card{
  position: relative;
  padding: 18px 20px;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* Prevent accidental nested padding explosions */
.lms-card .lms-card,
.course-card .course-card{
  padding: 0;
}

/* ============================================================
   HEADER LAYOUT (STRUCTURE ONLY)
   ============================================================ */
.lms-go-header{
  position: sticky;
  top: 0;
  z-index: 50;
}

.lms-go-header-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 18px;
}

.lms-go-brand{
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lms-go-brand-mark{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: 0 0 auto;
}

.lms-go-brand-text{
  line-height: 1.05;
  font-weight: 800;
}

.lms-go-nav{
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  min-width: 0;
}

.lms-go-nav .nav-link{
  display: inline-block;
  padding: 8px 4px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.lms-go-user{
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.lms-go-user-meta .label{
  font-size: 12px;
  line-height: 1.1;
  opacity: 0.85;
}

.lms-go-user-meta .name{
  font-weight: 800;
  line-height: 1.1;
}

/* ============================================================
   MANAGE COURSES (STRUCTURE)
   ============================================================ */
.manage-courses-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.manage-courses-header > div{ min-width: 0; }
.manage-courses-header .btn{ flex: 0 0 auto; white-space: nowrap; }

.course-manage-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 980px){
  .course-manage-grid{ grid-template-columns: 1fr; }
}

.course-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.course-actions .inline-form{
  display: inline-flex;
  margin: 0;
}

.course-actions .inline-form button{ margin: 0; }

.course-manage-footer{ margin-top: 14px; }

/* ============================================================
   LESSON LIST ROWS (STRUCTURE)
   ============================================================ */
.lms-lesson-list{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.lms-lesson-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.lms-lesson-row:first-child{ border-top: none; }

.lms-lesson-title{
  font-weight: 700;
  text-decoration: none;
}

.lms-lesson-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  opacity: 0.9;
}

.lms-status-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.16);
  /* background moved to theme */
}

.lms-status-pill .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  /* background moved to theme */
}

.lms-lesson-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ============================================================
   MODALS (STRUCTURE)
   ============================================================ */
.lms-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.lms-modal.is-open{ display: flex; }

.lms-modal-backdrop{
  position: absolute;
  inset: 0;
  /* background moved to theme */
}

.lms-modal-dialog{
  position: relative;
  width: min(1100px, 96vw);
  height: min(720px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lms-modal-header{ padding: 12px 16px; }
.lms-modal-body{ flex: 1; position: relative; }

.lms-modal-body iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.hidden{ display: none !important; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }
.flex{ display: flex; }
.flex-between{ display: flex; justify-content: space-between; }
.flex-center{ display: flex; align-items: center; }
.gap-sm{ gap: 8px; }
.gap-md{ gap: 16px; }
.gap-lg{ gap: 24px; }

/* Simple spacing utilities (standardized, no inline styles) */
.lms-mt-sm{ margin-top: 10px; }
.lms-mt-md{ margin-top: 16px; }
.lms-h2-tight{ margin-bottom: 8px; }

/* ============================================================
   NESTED CARD SEPARATION — ABSOLUTE (GAP + STACK)
   Put at VERY BOTTOM of lms.css (not theme)
   ============================================================ */

/* Make the wrapper a vertical stack with real gaps */
.course-manage-grid{
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
}

@media (min-width: 981px){
  .course-manage-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
}

/* Safety: kill any margins collapsing weirdness */
.course-manage-card{ margin: 0 !important; }

/* Cards stacked inside a parent card */
.lms-card .lms-card + .lms-card,
.lms-card .course-card + .course-card,
.lms-card .dashboard-card + .dashboard-card,
.lms-card .lms-side-card + .lms-side-card,
.lms-card .course-manage-card + .course-manage-card{
  margin-top: 18px;
}

.course-manage-section > .course-manage-card + .course-manage-card{
  margin-top: 18px;
}

/* ============================================================
   QUIZ BANK ACCORDION (STRUCTURE ONLY)
   Drop at VERY BOTTOM of lms.css
   ============================================================ */
.quiz-bank-card{
  padding: 18px 20px;
}

.quiz-bank-accordion{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each group wrapper */
.quiz-bank-group{
  border-radius: 14px;
  overflow: hidden;
}

/* Header button (click target) */
.quiz-bank-group-head{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border: none;
  background: transparent;

  text-align: left;
  cursor: pointer;
  user-select: none;
}
.quiz-bank-group-head:hover{
  transform: translateY(-1px);
}

/* Focus ring */
.quiz-bank-group-head:focus{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 12px;
}

/* Chevron */
.quiz-bank-chevron{
  display: inline-block;
  width: 18px;
  text-align: center;
  transform: rotate(0deg);
  transition: transform 0.18s ease;
}

/* Title + meta */
.quiz-bank-title{
  font-weight: 800;
  min-width: 0;
}

.quiz-bank-meta{
  margin-left: auto;
  white-space: nowrap;
}

/* Body container (JS animates height/display) */
.quiz-bank-group-body{
  padding: 8px 14px 12px;
}

/* Rotate chevron when open */
.quiz-bank-group.is-open > .quiz-bank-group-head .quiz-bank-chevron{
  transform: rotate(90deg);
}

/* Indentation for nested groups */
.quiz-bank-course > .quiz-bank-group-body{
  padding-left: 14px;
}
.quiz-bank-module{
  margin-top: 8px;
}
.quiz-bank-module > .quiz-bank-group-head{
  padding-left: 22px;
}
.quiz-bank-module > .quiz-bank-group-body{
  padding-left: 22px;
}

.quiz-bank-lesson{
  margin-top: 8px;
}
.quiz-bank-lesson > .quiz-bank-group-head{
  padding-left: 32px;
}
.quiz-bank-lesson > .quiz-bank-group-body{
  padding-left: 32px;
}

/* Quiz rows */
.quiz-bank-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 10px;
  border-top: 1px solid var(--lms-border-soft, rgba(255,255,255,.15));
}

.quiz-bank-row:first-child{
  border-top: none;
}

.quiz-bank-row-left{
  min-width: 0;
}

.quiz-bank-quiz-title{
  display: inline-block;
  margin-right: 6px;
}

/* Button cluster */
.quiz-bank-row-right{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Small screens: stack the row */
@media (max-width: 640px){
  .quiz-bank-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .quiz-bank-row-right{
    width: 100%;
  }
  .quiz-bank-row-right .btn{
    width: 100%;
  }
}

/* Student roster action buttons */
.roster-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.roster-actions .btn {
  white-space: nowrap;
}

/* Student Progress: switch form layout (no inline styles) */
.student-switch-form{ margin-top: 10px; }
.student-switch-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:6px;
}
.student-switch-input{ max-width:160px; }

/* Student Progress: course card header alignment */
.student-course-head{ align-items:flex-start; }

/* Student Progress: signoff button spacing */
.signoff-btn{ margin-left: 8px; }

/* Student Status page spacing (no inline styles) */
.lms-status-card{ margin-top: 16px; }

.lms-status-meta{ margin-bottom: 10px; }

.lms-status-summary{ margin-top: 10px; }
.lms-status-row{ margin-bottom: 6px; }
.lms-status-row:last-child{ margin-bottom: 0; }

.lms-status-form{ margin-top: 14px; }

.lms-status-group{ margin-bottom: 0.75rem; }
.lms-status-help{ margin: 6px 0 0; }

.lms-status-note{
  width: 100%;
  max-width: 680px;
}

.lms-status-actions{
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lms-status-checkbox{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

/* Accordion polish */
[data-acc-group] > [data-acc-body]{
  overflow: hidden;
  display: none;
  height: 0;
  will-change: height;
}

/* If you have a chevron icon in your toggle, give it data-acc-chevron */
[data-acc-toggle] [data-acc-chevron]{
  display: inline-block;
  transition: transform 180ms ease;
  transform: rotate(0deg);
}

[data-acc-group].is-open > [data-acc-toggle] [data-acc-chevron]{
  transform: rotate(90deg);
}
.btn-pill{
  border-radius: 999px;
  padding-left: 18px;
  padding-right: 18px;
}
/* ==========================================
   PRIMARY ACTION PILL (Create / Save)
   ========================================== */

.btn-primary.btn-pill{
  background: linear-gradient(
    180deg,
    #ff8b47,
    #f37021
  );
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.02em;

  border: 1px solid rgba(0,0,0,.35);
  border-radius: 999px;
  padding: 9px 22px;

  box-shadow:
    0 6px 14px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease;
}

.btn-primary.btn-pill:hover{
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.btn-primary.btn-pill:active{
  transform: translateY(0);
  box-shadow:
    0 4px 10px rgba(0,0,0,.5),
    inset 0 2px 6px rgba(0,0,0,.35);
}
/* =========================================================
   QUIZ TAKE — polish pass (drop-in)
   File: assets/css/lms_quiz.css
   ========================================================= */

.lms-page-quiz-take .lms-quiz-container{
  max-width: 980px;
  margin: 24px auto;
  padding: 22px 22px 18px;
  border-radius: 18px;
}

/* Header spacing */
.lms-page-quiz-take .lms-quiz-header .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .3px;
}
.lms-page-quiz-take .lms-quiz-header h1{
  margin: 10px 0 6px;
  line-height: 1.15;
}
.lms-page-quiz-take .lms-quiz-description{
  margin: 0 0 10px;
  opacity: .9;
}

/* Question number */
.lms-page-quiz-take .lms-quiz-question-number{
  margin: 4px 0 12px;
  font-size: 14px;
  opacity: .9;
}

/* Image: keep it heroic, not dominant */
.lms-page-quiz-take .lms-quiz-question-image{
  margin: 10px 0 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.lms-page-quiz-take .lms-quiz-question-image img{
  display:block;
  width:100%;
  height:auto;
  max-height: 420px;
  object-fit: contain;
}

/* Question text */
.lms-page-quiz-take .lms-quiz-question-text{
  margin: 10px 0 14px;
  font-size: 18px;
  line-height: 1.45;
}

/* Choices -> pill buttons (single line when possible) */
.lms-page-quiz-take .lms-quiz-choice-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  margin: 0 0 14px;
  padding: 0;
}

/* label wrapper from JS: <label class="lms-choice"><input> <span class="lms-choice-text">.. */
.lms-page-quiz-take label.lms-choice{
  flex: 1 1 360px; /* two columns on desktop, wraps nicely */
  min-width: 280px;
  margin: 0;
  cursor: pointer;
}

/* Hide the native control but keep it accessible */
.lms-page-quiz-take label.lms-choice input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The pill */
.lms-page-quiz-take .lms-choice-text{
  display:flex;
  align-items:center;
  gap:10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  line-height: 1.25;
  user-select: none;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Add a subtle “radio dot” */
.lms-page-quiz-take .lms-choice-text::before{
  content:"";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.45);
  background: transparent;
  flex: 0 0 auto;
}

/* Hover */
.lms-page-quiz-take label.lms-choice:hover .lms-choice-text{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* Selected state */
.lms-page-quiz-take label.lms-choice input:checked + .lms-choice-text{
  background: rgba(243,112,33,.16); /* uses your ASC orange vibe */
  border-color: rgba(243,112,33,.45);
  box-shadow: 0 0 0 3px rgba(243,112,33,.18);
}
.lms-page-quiz-take label.lms-choice input:checked + .lms-choice-text::before{
  background: rgba(243,112,33,.95);
  border-color: rgba(243,112,33,.95);
}

/* Nav: give it breathing room + consistent spacing */
.lms-page-quiz-take .lms-quiz-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Make Submit feel primary when it appears */
.lms-page-quiz-take #quiz-btn-submit{
  margin-left: auto;
  border-radius: 999px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Tight screens: single column choices */
@media (max-width: 720px){
  .lms-page-quiz-take label.lms-choice{
    flex: 1 1 100%;
    min-width: 0;
  }
  .lms-page-quiz-take #quiz-btn-submit{
    margin-left: 0;
    width: 100%;
  }
}
/* Make dropdown options readable in dark theme */
.quiz-question-card select option {
  background: #fff;
  color: #111;
}
/* Matching drag/drop */
.lms-matching {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}

.lms-matching-col-title {
  font-weight: 700;
  margin-bottom: 10px;
}

.lms-match-row {
  margin-bottom: 12px;
}

.lms-match-left-text {
  margin-bottom: 8px;
}

.lms-match-dropzone {
  position: relative;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 10px 44px 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.04);
}

.lms-match-dropzone.is-over {
  outline: 2px dashed rgba(255,255,255,.35);
  outline-offset: 2px;
}

.lms-match-dropzone-label {
  opacity: .95;
}

.lms-match-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255,255,255,.10);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
}

.lms-match-chip {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.05);
  cursor: grab;
  user-select: none;
}

.lms-match-chip[data-used="1"] {
  opacity: .45;
}

.lms-match-chip.is-active {
  outline: 2px solid rgba(255,255,255,.35);
}

@media (max-width: 900px) {
  .lms-matching { grid-template-columns: 1fr; }
}
/* ===== Quiz Take: Categorization Drag & Drop ===== */
.qt-cat-dd { margin-top: 10px; }

.qt-cat-dd-cols{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px){
  .qt-cat-dd-cols{ grid-template-columns: 1fr; }
}

.qt-cat-dd-head{
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.92);
}

.qt-cat-dd-dropzone{
  border: 1px dashed rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 10px;
  min-height: 84px;
}

.qt-cat-dd-dropzone.is-over{
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.07);
}

.qt-cat-dd-bin{
  margin-bottom: 14px;
}

.qt-cat-dd-bin-head{
  font-weight: 700;
  margin: 10px 0 8px;
  color: rgba(255,255,255,0.92);
}

.qt-cat-dd-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;

  padding: 8px 12px;
  margin: 6px 6px 0 0;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.95);
  font-weight: 600;
  cursor: grab;
}

.qt-cat-dd-item.is-dragging{
  opacity: 0.6;
  cursor: grabbing;
}

.qt-cat-dd-hint{
  padding: 8px 6px;
}