:root {
  /* Backgrounds */
  --qh-bg: #f8fafc;
  --qh-surface: #ffffff;
--qh-surface1: #fffefe;
  --qh-thead: #f8fafc;
  --qh-article:#1e293b;
  /* Text */
  --qh-text: #0f172a;
  --qh-muted: #64748b;
 
--qh-gradeint1: rgba(112, 114, 123, 0.68);
--qh-gradeint2: rgba(96, 98, 112, 0.75);
  /* Borders */
  --qh-border: #e2e8f0;
--qh-headings: #020e32;
  /* Brand */
  --qh-primary: #2563eb;
  --qh-success: #16a34a;
  --qh-danger: #dc2626;
--qh-active:#181b1b;
--qh-activeback:#c8f0f4;
  /* Shape */
  --qh-radius-sm: 8px;
  --qh-radius: 12px;
  --qh-radius-lg: 16px;
 --qh-nav-hover: #0f32e3;
  /* Shadow #38f1f4   #0ce7bb*/
  --qh-shadow: 0 6px 18px rgba(0,0,0,0.06);
    --qh-exam:#2a0266;
}
.dark-mode {
  --qh-exam:#2a0266;
    --qh-gradeint1: rgba(11, 15, 35, 0.68);
--qh-gradeint2: rgba(11, 15, 35, 0.75);
   --qh-thead: #0b1220;
  --qh-bg: #0b1220;
  --qh-surface: #0f172a;
--qh-surface1: #0b1220;
  --qh-text:  #c6d4d4;
  --qh-muted: #7e91ad;
--qh-headings: #128d8f;
  --qh-border: #1e343b;
  --qh-nav-hover: #0beaed;
  --qh-active:#0beaed;
  --qh-activeback: #0e4958c8;
   --qh-article:#1e293b;
}
/* =========================
   TYPOGRAPHY SYSTEM
========================= */

:root {

  /* Font Sizes (Base Scale - 1.125 ratio) */
  --qh-font-xs: 0.75rem;   /* 12px */
  --qh-font-sm: 0.875rem;  /* 14px */
  --qh-font-md: 1rem;      /* 16px */
  --qh-font-lg: 1.125rem;  /* 18px */
  --qh-font-xl: 1.25rem;   /* 20px */
  --qh-font-2xl: 1.5rem;   /* 24px */
  --qh-font-3xl: 1.875rem; /* 30px */
  --qh-font-4xl: 2.25rem;  /* 36px */
  --qh-font-5xl: 3rem;     /* 48px */

  /* Line Heights */
  --qh-leading-tight: 1.2;
  --qh-leading-normal: 1.5;
  --qh-leading-relaxed: 1.7;

}

/* =========================
   BASE TEXT
========================= */

body {
  font-size: var(--qh-font-xs);
  line-height: var(--qh-leading-normal);
}
body {
  background: var(--qh-bg);
  color: var(--qh-text);
}
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body {
  font-family: "Open-sans", system-ui, sans-serif, Open-sans,Lato;
}

h1, h2, h3 {
  font-family: "Montserrat", "Inter", sans-serif,Poppins;
}
a{
  text-decoration: none;
}

h1, h2, h3, h4, h5,h6{
  color: var(--qh-headings);
}

/* =========================
   HEADINGS
========================= */

h1 {
  font-size: var(--qh-font-3xl);
  line-height: var(--qh-leading-tight);
  font-weight: 800;
  margin-bottom: 0.75rem;
}

h2 {
  font-size: var( --qh-font-lg);
  line-height: var(--qh-leading-tight);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

h3 {
  font-size: var(--qh-font-md);
  line-height: var(--qh-leading-tight);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

h4 {
  font-size: var(--qh-font-md);
  line-height: var(--qh-leading-normal);
  font-weight: 600;
}

h5 {
  font-size: var(--qh-font-sm);
  line-height: var(--qh-leading-normal);
  font-weight: 600;
}

h6 {
  font-size: var(--qh-font-sm);
  line-height: var(--qh-leading-normal);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================
   PARAGRAPH
========================= */

p {
  font-size: var(--qh-font-xs);
  line-height: var(--qh-leading-relaxed);
  margin-bottom: 1rem;
}

/* =========================
   SMALL / MUTED TEXT
========================= */

small {
  font-size: var(--qh-font-sm);
}

.qh-muted {
  font-size: var(--qh-font-sm);
  color: var(--qh-muted);
}

/* =========================
   LINKS
========================= */

a {
  color: var(--qh-primary);
  transition: 0.2s ease;
}

a:hover {
  opacity: 0.85;
}

/* =========================
   LISTS
========================= */

ul, ol {
  font-size: var(--qh-font-md);
  line-height: var(--qh-leading-relaxed);
}

/* =========================
   CODE / PRE (if used)
========================= */

code {
  font-size: var(--qh-font-sm);
  background: var(--qh-surface1);
  padding: 2px 6px;
  border-radius: 6px;
}

pre {
  font-size: var(--qh-font-sm);
  line-height: 1.6;
}

.qh-card {
  background: var(--qh-surface);
  border: 1px solid var(--qh-border);
  border-radius: 16px var(--qh-radius);
  padding: 16px;
  box-shadow: var(--qh-shadow);
 transition: all 0.25s ease;
}
.qh-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* Image-style header (fake image block) */
.qh-card-header {
    height: 90px;
    padding: 15px;
    background: linear-gradient(135deg, #0d6efd, #6ea8fe);
} 
.qh-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: var(--qh-radius);
  border: 1px solid var(--qh-border);
  background: var(--qh-surface);
  color: var(--qh-text);
  cursor: pointer;
  transition: 0.2s ease;
}

.qh-btn:hover {
  opacity: 0.9;
}
.list-group-item{
   background: var(--qh-surface);
   color: var(--qh-text);
    border: 1px solid var(--qh-border);
}
.qh-btn-primary {
  background: var(--qh-primary);
  color: #fff;
  border: none;
}
.qh-title {
  font-weight: 700;
}

.qh-text {
  color: var(--qh-text);
}

.qh-muted {
  color: var(--qh-muted);
}
.qh-mcq {
  padding: 16px;
  border-left: 4px solid var(--qh-primary);
}

.qh-option {
  padding: 6px 10px;
  border-radius: var(--qh-radius-sm);
}

.qh-correct {
  background: var(--qh-success);
  color: #fff;
}
.qh-badge {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--qh-border);
}
.qh-qno {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;

    padding: 0 10px;

    font-size: 14px;
    font-weight: 700;

    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    border-radius: 12px;

    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.25);

    flex-shrink: 0;
    user-select: none;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect */
.qh-qno:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35);
}

 
/* =========================
   QH TABLE BASE
========================= */

.qh-table {
  background: var(--qh-surface);
  color: var(--qh-text);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius);
  overflow: hidden;
}

/* TABLE HEADER */
.qh-table thead {
  background: var(--qh-thead);
  color: var(--qh-text);
  border-bottom: 1px solid var(--qh-border);
}

.qh-table thead th {
  background: var(--qh-thead);
   color: var(--qh-text);
  font-weight: 600;
  padding: 12px;
  border-bottom: 1px solid var(--qh-border);
}

/* TABLE BODY */
.qh-table tbody td {
  padding: 12px;
  border-color: var(--qh-border);
  vertical-align: middle;
}

/* ROW HOVER */
.qh-table.table-hover tbody tr:hover {
  background: rgba(37, 99, 235, 0.06);
}

 
/* TABLE BORDER CLEANUP */
.qh-table td,
.qh-table th {
  border-top: 1px solid var(--qh-border);
}
.qh-table {
    width: 100%;
    table-layout: fixed;
}

.qh-table td,
.qh-table th {
    word-wrap: break-word;
    vertical-align: top;
    font-size: 13px;
}
.wrap {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* =========================
   FORM CONTROLS DARK FIX
========================= */

.form-control,
.form-select,
textarea {
  background: var(--qh-surface1);
  color: var(--qh-text);
  border: 1px solid var(--qh-border);
}

/* Placeholder fix */
.form-control::placeholder,
textarea::placeholder {
  color: var(--qh-muted);
  background: var(--qh-surface1);
}

/* Focus state */
.form-control:focus,
.form-select:focus,
textarea:focus {
  background: var(--qh-surface1);
  color: var(--qh-text);
  border-color: var(--qh-primary);
  box-shadow: none;
}
.qh-input, .form-control {
    border-radius: 10px;
    padding: 10px 12px;
}
#tagBox span {
    background: linear-gradient(45deg, #007bff, #0056d2);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
}
/* =========================
   TABLE ROW DARK FIX
========================= */

.qh-table tbody tr {
  background: var(--qh-surface1);
   color: var(--qh-text);
}

/* prevent bootstrap override */
.qh-table tbody td {
background: var(--qh-surface1);
   color: var(--qh-text);
}

/* alternate rows (optional but better UI) */
.qh-table tbody tr:nth-child(even) {
  background: rgba(148, 163, 184, 0.05);
}
/* =========================
   ALERT SYSTEM (QH STYLE)
========================= */

.qh-alert {
    background: var(--qh-surface);
    border: 1px solid var(--qh-border);
    border-left: 4px solid var(--qh-primary);
    border-radius: var(--qh-radius);
    color: var(--qh-text);
    box-shadow: var(--qh-shadow);
    padding: 12px 14px;
    margin-bottom: 10px;
}

/* type colors */
.alert-success.qh-alert {
    border-left-color: var(--qh-success);
}

.alert-danger.qh-alert {
    border-left-color: var(--qh-danger);
}

.alert-warning.qh-alert {
    border-left-color: #f59e0b;
}

.alert-info.qh-alert {
    border-left-color: var(--qh-primary);
}

.qh-alert-icon {
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}
.qh-table-compact th,
.qh-table-compact td {
    padding: 10px 12px;
    font-size: 13px;
}

.qh-table tbody tr {
    transition: 0.2s ease;
}

.qh-table tbody tr:hover {
    transform: scale(1.005);
}
.qh-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
 .login-page {
    min-height: 100vh;
    background:linear-gradient(var(--qh-gradeint1),var(--qh-gradeint2)), url('../../uploads/images/st7.jpg') no-repeat center center/cover;
    position: relative;
}

/* dark overlay */
.login-page .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.473);
}

/* ensure content above overlay */
.login-page .container {
    position: relative;
    z-index: 2;
}
.register-page {
    min-height: 100vh;
    background: linear-gradient(var(--qh-gradeint1),var(--qh-gradeint2)),url('../../uploads/images/auth1.jpg') no-repeat center center/cover;
    position: relative;
}

/* overlay */
.register-page .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

/* content layer */
.register-page .container {
    position: relative;
    z-index: 2;
}
 .qh-parent {
    cursor: pointer;
    padding: 10px;
    background: var(--qh-surface);
    border-radius: 6px;
    border: 1px solid #eee;
    font-weight: 600;
}

.qh-child {
    text-decoration: none;
    background:var(--qh-surface);
    border: 1px solid var(--qh-border);
    border-radius: 6px;
    font-size: 14px;
    transition: 0.2s;
}

.qh-child:hover {
    background: var(--qh-surface);
    transform: translateX(3px);
}



 
/* Optional muted text fix */
.qh-muted {
    color: #6c757d;
}
 
 
/* SECTION SPACING */
.qh-section {
    margin-bottom: 40px;
}
 



.category-card {
    border-radius: 20px;
    overflow: hidden;
    background: var(--qh-surface);
    transition: 0.25s ease;
    border: 1px solid var(--qh-border);
    
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px var(--qh-shadow);
}

/* TOP HEADER */
.category-card-top {
    
    padding: 16px;
    color:var(--qh-text);
    border-radius: 20px;
}

.category-card-top h5 {
    margin: 0;
    font-weight: 600;
}

/* BODY */
.category-card-body {
    padding: 16px;
}

.category-desc {
    font-size: 14px;
    color:var(--qh-muted);
    margin-bottom: 12px;

  
}

/* META */
.category-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color:var(--qh-primary);
}

/* =========================
   DESKTOP ENHANCEMENTS (≥ 992px)
========================= */

@media (min-width: 992px) {

  /* =========================
     LAYOUT SPACING
  ========================= */

  .qh-page {
    gap: 1.5rem;
  }

  .qh-section {
    margin-bottom: 2.5rem;
  }

  /* =========================
     CARD IMPROVEMENTS
  ========================= */

  .qh-card {
    padding: 1rem;
    border-radius: 1rem;
  }

  .qh-card:hover {
    transform: translateY(-0.3125rem);
  }

  .qh-card-header {
    height: 5.625rem;
    padding: 0.9375rem;
  }

  /* =========================
     BUTTONS
  ========================= */

  .qh-btn {
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
  }

  .qh-btn:hover {
    transform: translateY(-0.125rem);
  }

  /* =========================
     TABLES
  ========================= */

  .qh-table thead th,
  .qh-table tbody td {
    padding: 0.75rem;
    font-size: 0.8125rem;
  }

  .qh-table-compact th,
  .qh-table-compact td {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* =========================
     FORM CONTROLS
  ========================= */

  .qh-input,
  .form-control {
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
  }

  /* =========================
     BADGES / TAGS
  ========================= */

  .qh-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
  }

  #tagBox span {
    font-size: 0.75rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 1.25rem;
  }

  /* =========================
     CATEGORY CARDS
  ========================= */

  .category-card {
    border-radius: 1.25rem;
  }

  .category-card-top {
    padding: 1rem;
  }

  .category-card-body {
    padding: 1rem;
  }

  .category-desc {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
  }

  .category-meta {
    font-size: 0.8125rem;
  }

  /* =========================
     LOGIN / REGISTER
  ========================= */

  .login-page,
  .register-page {
    background-size: cover;
  }

  /* =========================
     NAV HOVER IMPROVE
  ========================= */

  .qh-nav-link {
    padding: 0.75rem 0.875rem;
  }

  .qh-nav-link:hover {
    transform: translateX(0.25rem);
  }

  /* =========================
     ALERTS
  ========================= */

  .qh-alert {
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.625rem;
    border-radius: 0.75rem;
  }

  .qh-alert-icon {
    font-size: 1.125rem;
  }

  /* =========================
     TEXT UTILITIES
  ========================= */

  .qh-title {
    font-size: 1.25rem;
  }

  .qh-muted {
    font-size: 0.875rem;
  }
}