/* Kuro Fangs official academia palette — warm cream, deep burgundy & academic study surface. */
:root {
  --bg-app: #F8F5EE;
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: #F2ECE1;
  --bg-card: #FFFFFF;
  --bg-hover: #EFE8DC;
  --border-subtle: #EAE3D6;
  --border-card: #EAE3D6;
  --text-primary: #24181B;
  --text-secondary: #756966;
  --text-muted: #9C8F8C;
  --brand-burgundy: #7E1D2A;
  --brand-burgundy-hover: #681320;
  --brand-burgundy-light: rgba(126, 29, 42, 0.08);
  --brand-burgundy-surface: rgba(126, 29, 42, 0.04);
  --brand-burgundy-border: rgba(126, 29, 42, 0.20);
  --brand-burgundy-gradient: linear-gradient(135deg, #962837 0%, #7E1D2A 50%, #5E0E18 100%);
  --brand-burgundy-glow: 0 8px 22px rgba(126, 29, 42, 0.16);
  --brand-accent: #7E1D2A;
  --sidebar-width: 276px;
  --radius-card: 16px;
  --radius-modal: 20px;
  --shadow-card: 0 2px 10px rgba(36, 24, 27, 0.03);
  --shadow-card-hover: 0 10px 28px rgba(126, 29, 42, 0.08);
}

body { background: var(--bg-app); color: var(--text-primary); }
.app-sidebar { background: var(--bg-sidebar, #FAF7F2); border-color: var(--border-subtle, #EAE3D6); }
.sidebar-header { height: 68px; padding: 0 18px; background: var(--bg-sidebar, #FAF7F2); border-bottom: 1px solid var(--border-subtle, #EAE3D6); }
.sidebar-brand-emblem { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #FFFFFF; border: 1.5px solid rgba(126, 29, 42, 0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-brand-emblem img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-brand-title { font-size: 1.05rem; letter-spacing: -.015em; font-weight: 800; color: var(--text-primary, #24181B); }
.sidebar-brand-sub { font-size: 0.72rem; color: var(--text-secondary, #756966); font-weight: 500; }
.sidebar-nav { padding: 14px 12px; gap: 3px; }
.sidebar-section-title { padding: 16px 10px 6px; color: #8C6E72; font-size: .68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-menu-item { padding: 9px 12px; border-radius: 10px; color: var(--text-primary, #24181B); font-size: 0.86rem; font-weight: 500; border: 1px solid transparent; transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1); }
.sidebar-menu-item:hover { background: var(--bg-sidebar-hover, #F2ECE1); color: var(--color-primary, #7E1D2A); }
.sidebar-menu-item.active { background: #F8EDEF !important; border-color: rgba(126, 29, 42, 0.14) !important; color: #7E1D2A !important; font-weight: 700 !important; box-shadow: 0 1px 4px rgba(126, 29, 42, 0.08); }
.sidebar-menu-item.active::before { display: none !important; }
.sidebar-menu-icon-wrap { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #7E1D2A; }
.sidebar-menu-icon-wrap svg { width: 17px; height: 17px; stroke: #7E1D2A; stroke-width: 2.1; }
.sidebar-soon-badge {
  margin-inline-start: auto;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  color: #92400E;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-menu-item:hover .sidebar-soon-badge {
  background: #FDE68A;
  border-color: #F59E0B;
  color: #78350F;
}
.site-header { height: 76px; padding: 0 34px; background: rgba(255,255,255,.84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header-search-box input { min-height: 42px; background: #f4f6fa; border-color: transparent; }
.header-search-box input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.14); border-color: #7E1D2A; outline: none !important; }
.header-toggle-btn, .points-pill { min-height: 38px; border-color: #e4e9f2; }
.main-content { padding-top: 30px; }
.btn { min-height: 40px; border-radius: 11px; }
.subject-card, .sheet-card, .content-card, .faculty-news-card { border-radius: 18px; }
.subject-card:hover, .sheet-card:hover, .faculty-news-card:hover { transform: translateY(-3px); }

/* Compact phone shell: no squeezed header, no horizontal page overflow. */
@media (max-width: 640px) {
  body { background: var(--bg-app); }
  .site-header { height: 64px; padding: 0 14px; gap: 10px; }
  .header-left { gap: 9px; min-width: 0; }
  .mobile-toggle-btn { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
  .header-search-box { max-width: none; min-width: 0; }
  .header-search-box input { min-height: 40px; font-size: .78rem; }
  .header-actions { gap: 5px; flex: 0 0 auto; }
  .header-auth-action-box, .points-pill, .header-mascot-avatar-btn { display: none; }
  .header-toggle-btn { width: 38px; min-height: 38px; padding: 0; justify-content: center; border-radius: 11px; }
  .header-toggle-btn span { display: none; }
  .main-content { padding: 18px 14px 38px; }
  .app-sidebar { width: min(84vw, 310px); }
  .sidebar-header { height: 72px; }
  h1 { font-size: 1.5rem; }
  .faculty-news-card, .subject-card, .sheet-card { border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .dt-kuro-mascot-img,
  .dt-kuro-pulse-ring,
  .kuro-float,
  .kuro-bounce,
  .kuro-character-img {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   KURO FANGS — ELITE ADMIN CRAFTSMANSHIP (LINEAR / RAYCAST GRADE)
   Anti-AI-Slop Product Engineering: Double-Border Elevation, High-Density Controls
   ========================================================================== */

/* Main Shell */
.kf-admin-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 16px 60px;
  animation: kfFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes kfFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 1. Header & Command Bar */
.kf-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.kf-admin-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  margin-bottom: 10px;
}

.kf-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
  animation: kfPulse 2s infinite ease-in-out;
  display: inline-block;
}

.kf-pulse-dot.warning {
  background: #F59E0B;
  box-shadow: 0 0 6px #F59E0B;
}

@keyframes kfPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.kf-admin-title-wrap h1 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kf-admin-title-wrap p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}

.kf-admin-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 2. Linear-Style Segmented Navigation */
.kf-segmented-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}

.kf-segmented-nav::-webkit-scrollbar {
  display: none;
}

.kf-segmented-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.kf-segmented-btn:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .kf-segmented-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.kf-segmented-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 700;
  border-color: var(--border-subtle);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
}

.kf-segmented-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 9999px;
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.kf-segmented-btn.active .kf-segmented-badge {
  background: var(--brand-burgundy-light);
  color: var(--brand-burgundy);
  border-color: var(--brand-burgundy-border);
}

/* 3. Bento Metric Grid */
.kf-bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kf-bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.kf-bento-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.kf-bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kf-bento-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.kf-bento-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-subtle);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.kf-bento-value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 6px;
}

.kf-bento-footer {
  font-size: 0.775rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 4. High-Density Executive Tables & Cards */
.kf-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-bottom: 24px;
  overflow: hidden;
}

.kf-panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-surface);
}

.kf-panel-title {
  font-size: 0.9375rem;
  font-weight: 750;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.kf-panel-body {
  padding: 20px;
}

.kf-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.kf-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

.kf-data-table th {
  padding: 10px 14px;
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  font-weight: 700;
  text-align: start;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-subtle);
}

.kf-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
  transition: background 0.12s ease;
}

.kf-data-table tr:last-child td {
  border-bottom: none;
}

.kf-data-table tbody tr:hover td {
  background: var(--bg-hover);
}

/* Actions in tables */
.kf-action-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.kf-action-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-card-hover);
  background: var(--bg-hover);
  transform: translateY(-1px);
}

.kf-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #EF4444;
}

.kf-action-btn:active {
  transform: scale(0.95);
}

/* 5. Executive Auth Vault */
.kf-vault-wrapper {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
}

.kf-vault-card {
  max-width: 420px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  animation: kfVaultPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes kfVaultPop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.kf-vault-seal {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: var(--brand-burgundy-surface);
  border: 1px solid var(--brand-burgundy-border);
  color: var(--brand-burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(136, 19, 55, 0.08);
}

.kf-vault-card h2 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.kf-vault-card p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0 0 20px;
  line-height: 1.45;
}

.kf-input-group {
  position: relative;
  margin-bottom: 14px;
}

.kf-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  font-size: 0.875rem;
  color: var(--text-primary);
  font-weight: 500;
  outline: none;
  transition: all 0.15s ease;
}

.kf-input:focus {
  background: var(--bg-surface);
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(35, 87, 217, 0.12);
}

.kf-btn-tactile {
  width: 100%;
  padding: 11px 18px;
  background: var(--brand-burgundy-gradient);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.kf-btn-tactile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(35, 87, 217, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.kf-btn-tactile:active {
  transform: translateY(1px) scale(0.985);
}

/* 6. Refined Dialog Modal */
.kf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 14, 23, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: kfFadeIn 0.18s ease-out;
}

.kf-modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  animation: kfVaultPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.kf-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kf-modal-title {
  font-size: 1rem;
  font-weight: 750;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kf-modal-body {
  padding: 20px;
}

.kf-modal-footer {
  padding: 14px 20px;
  background: var(--bg-surface-subtle);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Responsive adjustment */
@media (max-width: 640px) {
  .kf-admin-shell { padding: 4px 8px 50px; }
  .kf-segmented-nav { width: 100%; }
  .kf-admin-header { gap: 12px; }
  .kf-admin-title-wrap h1 { font-size: 1.35rem; }
  .kf-bento-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GLOBAL APP CRAFTSMANSHIP & ANTI-AI-SLOP OVERHAUL (FULL PLATFORM)
   ========================================================================== */

/* 1. Global Shell & Sidebar */
.app-sidebar {
  background: var(--bg-sidebar, #FAF7F2);
  border-inline-end: 1px solid var(--border-subtle, #EAE3D6);
}

.sidebar-header {
  border-bottom: 1px solid var(--border-subtle, #EAE3D6);
}

.sidebar-brand-title {
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary, #24181B);
}

.sidebar-brand-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary, #756966);
}

.sidebar-section-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8C6E72;
  padding: 16px 12px 6px;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-primary, #24181B);
  font-size: 0.86rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.sidebar-menu-item:hover {
  color: var(--color-primary, #7E1D2A);
  background: var(--bg-sidebar-hover, #F2ECE1);
}

.sidebar-menu-item.active {
  color: #7E1D2A !important;
  background: #F8EDEF !important;
  border: 1px solid rgba(126, 29, 42, 0.14) !important;
  box-shadow: 0 1px 4px rgba(126, 29, 42, 0.08);
  font-weight: 700;
}

.sidebar-menu-item.active::before {
  display: none !important;
}

/* 2. Site Header (Raycast Grade) */
.site-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}

[data-theme="dark"] .site-header {
  background: rgba(13, 17, 26, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.header-search-box {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-search-box:focus-within {
  background: var(--bg-surface);
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

/* 3. Subject Module Cards (Luxury Dental Craft) */
.subjects-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.subject-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.subject-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-card-hover);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.subject-card:active {
  transform: translateY(-1px) scale(0.99);
}

.subject-cover-wrap {
  position: relative;
  height: 100px;
  overflow: hidden;
  background: #0F172A;
}

.subject-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.subject-card:hover .subject-cover-img {
  transform: scale(1.04);
}

.subject-cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(11, 15, 23, 0.85) 100%);
}

.subject-code-badge {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  background: rgba(11, 15, 23, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #F8FAFC;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  font-family: var(--font-mono, monospace);
}

.subject-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.subject-title-primary {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.35;
}

.subject-title-sub {
  font-size: 0.775rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.card-doctor-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-accent);
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.card-progress-wrap {
  margin-bottom: 12px;
}

.card-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.card-progress-percent {
  font-variant-numeric: tabular-nums;
  color: #10B981;
  font-weight: 700;
}

.card-progress-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--border-subtle);
  overflow: hidden;
}

.card-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #0284C7, #10B981);
  transition: width 0.4s ease;
}

.card-stats-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.card-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.btn-explore-subject {
  width: 100%;
  padding: 8px 14px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.subject-card:hover .btn-explore-subject {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #FFFFFF;
}

/* 4. Sheets & Lectures Showcase (High-Density Modern Rows) */
.sheet-modern-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.sheet-modern-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.sheet-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.sheet-main-title {
  font-size: 1rem;
  font-weight: 750;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.sheet-card-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.775rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

.sheet-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Permanently remove intrusive guest banner */
#guest-encourage-banner, .guest-encourage-banner {
  display: none !important;
}

/* ==========================================================================
   QUESTION BANK & CLINICAL MCQ EXAMS — LINEAR GRADE CRAFTSMANSHIP
   ========================================================================== */
.q-card {
  border: 1px solid var(--border-card);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.q-card:hover {
  border-color: rgba(2, 132, 199, 0.3);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.q-opt-btn {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 550;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: start;
  transition: all 0.14s ease;
  user-select: none;
}

.q-opt-btn:hover:not(.disabled) {
  background: var(--bg-surface);
  border-color: var(--brand-accent);
  transform: translateY(-1px);
}

.q-opt-btn:active:not(.disabled) {
  transform: scale(0.99);
}

.q-opt-btn.selected-correct {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: #10B981 !important;
  color: #065F46 !important;
  font-weight: 650;
}

[data-theme="dark"] .q-opt-btn.selected-correct {
  color: #34D399 !important;
}

.q-opt-btn.selected-wrong {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: #EF4444 !important;
  color: #991B1B !important;
  font-weight: 650;
}

[data-theme="dark"] .q-opt-btn.selected-wrong {
  color: #F87171 !important;
}

.q-opt-btn.disabled {
  cursor: default;
  opacity: 0.85;
}

/* Linear Segmented Scrollable Filter Bar */
.kf-segmented-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  scrollbar-width: thin;
}

.kf-segmented-scroll::-webkit-scrollbar {
  height: 4px;
}

.kf-segmented-scroll::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 4px;
}

.kf-tab-pill {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.14s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kf-tab-pill:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .kf-tab-pill:hover {
  background: rgba(255, 255, 255, 0.05);
}

.kf-tab-pill.active {
  background: var(--bg-surface);
  color: var(--brand-accent);
  border-color: var(--border-subtle);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Flashcard 3D Stage Elevation */
.flashcard-stage {
  perspective: 1000px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.flashcard-stage.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
  width: 100%;
  min-height: 280px;
  border-radius: 16px;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flashcard-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  border-color: rgba(2, 132, 199, 0.35);
  background: radial-gradient(circle at 100% 0%, rgba(2, 132, 199, 0.04), transparent 60%), var(--bg-card);
}

/* ==========================================================================
/* ==========================================================================
   QUESTIONS PAGE & DENTISTOIRE-STYLE PRACTICE BANK ARCHITECTURE
   Exact Visual Reference Implementation (media_1790266085521.png)
   12 Minimal Subject Cards, Double-Border Elevation, Bi-directional (LTR/RTL)
   ========================================================================== */

/* ── 1. Questions Hero Banner (Panoramic Blueprint Architecture) ── */
.q-hero-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-card, 16px);
  padding: 24px 30px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 150px;
  display: flex;
  align-items: center;
}

[data-theme="dark"] .q-hero-banner {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.q-hero-bg-artwork {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 48%;
  background-size: contain;
  background-position: center inline-end;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

.q-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg-card) 50%, rgba(251, 249, 244, 0.75) 70%, rgba(251, 249, 244, 0.1) 100%);
  pointer-events: none;
  z-index: 2;
}

[dir="rtl"] .q-hero-overlay {
  background: linear-gradient(to left, var(--bg-card) 50%, rgba(251, 249, 244, 0.75) 70%, rgba(251, 249, 244, 0.1) 100%);
}

[data-theme="dark"] .q-hero-overlay {
  background: linear-gradient(to right, #1E1E2D 50%, rgba(30, 30, 45, 0.85) 70%, rgba(30, 30, 45, 0.2) 100%);
}

[data-theme="dark"][dir="rtl"] .q-hero-overlay {
  background: linear-gradient(to left, #1E1E2D 50%, rgba(30, 30, 45, 0.85) 70%, rgba(30, 30, 45, 0.2) 100%);
}

.q-hero-content {
  position: relative;
  z-index: 3;
  max-width: 620px;
}

.q-hero-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.q-hero-badge-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(126, 29, 42, 0.08);
  border: 1px solid rgba(126, 29, 42, 0.18);
  color: var(--brand-burgundy, #7E1D2A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(126, 29, 42, 0.08);
}

[data-theme="dark"] .q-hero-badge-icon-box {
  background: rgba(200, 67, 67, 0.15);
  border-color: rgba(200, 67, 67, 0.3);
  color: #FFA3A3;
}

.q-hero-title {
  font-size: 1.45rem;
  font-weight: 850;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.q-hero-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* ── 2. Minimal Subheader Bar (Search + Count Indicator) ── */
.q-sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  box-sizing: border-box;
  max-width: 100%;
}

.q-search-box-wrap {
  position: relative;
  flex: 1 1 auto;
  max-width: 440px;
}

.q-search-box-wrap .q-search-icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.q-search-field {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm, 10px);
  padding: 9px 36px;
  font-size: 0.825rem;
  color: var(--text-primary);
  outline: none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.q-search-field:focus {
  border-color: var(--brand-burgundy, #7E1D2A);
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.1);
}

.q-search-clear-btn {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
}

.q-search-clear-btn:hover {
  color: var(--text-primary);
}

.q-subjects-total-count {
  font-size: 0.775rem;
  font-weight: 750;
  color: var(--text-secondary);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  padding: 6px 14px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 3. 12 Subject Cards Grid — Desktop 4-Col, iPad 2-Col, Mobile 1-Col ── */
.questions-subject-grid,
.bento-subject-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px;
  box-sizing: border-box;
  max-width: 100%;
}

.q-subject-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card, 14px);
  padding: 18px 18px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  outline: none;
}

[data-theme="dark"] .q-subject-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.q-subject-card:hover {
  transform: translateY(-2px);
  border-color: rgba(126, 29, 42, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(126, 29, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.q-subject-card:active {
  transform: scale(0.985);
}

.q-subject-card:focus-visible {
  border-color: var(--brand-burgundy, #7E1D2A);
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.15);
}

/* Subject Card Icon Box */
.q-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(126, 29, 42, 0.06);
  border: 1px solid rgba(126, 29, 42, 0.16);
  color: var(--brand-burgundy, #7E1D2A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(126, 29, 42, 0.04);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

[data-theme="dark"] .q-card-icon-box {
  background: rgba(200, 67, 67, 0.15);
  border-color: rgba(200, 67, 67, 0.3);
  color: #FFA3A3;
}

.q-subject-card:hover .q-card-icon-box {
  background: rgba(126, 29, 42, 0.1);
  border-color: rgba(126, 29, 42, 0.28);
  transform: scale(1.03);
}

[data-theme="dark"] .q-subject-card:hover .q-card-icon-box {
  background: rgba(200, 67, 67, 0.22);
  border-color: rgba(200, 67, 67, 0.4);
}

.q-card-icon-box i,
.q-card-icon-box svg {
  width: 22px;
  height: 22px;
}

/* Subject Card Info */
.q-card-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 56px;
}

.q-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.q-card-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
  flex: 1 1 auto;
  min-width: 0;
}

.q-card-code-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 6px;
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="dark"] .q-card-code-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.q-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.q-card-mcq-count {
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--text-muted);
}

.q-card-mcq-count.active-count {
  color: var(--brand-burgundy, #7E1D2A);
  font-weight: 800;
}

[data-theme="dark"] .q-card-mcq-count.active-count {
  color: #FFA3A3;
}

.q-card-arrow-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(126, 29, 42, 0.07);
  border: 1px solid rgba(126, 29, 42, 0.14);
  color: var(--brand-burgundy, #7E1D2A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .q-card-arrow-btn {
  background: rgba(200, 67, 67, 0.15);
  border-color: rgba(200, 67, 67, 0.28);
  color: #FFA3A3;
}

.q-card-arrow-btn i,
.q-card-arrow-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.q-subject-card:hover .q-card-arrow-btn {
  background: var(--brand-burgundy, #7E1D2A);
  border-color: var(--brand-burgundy, #7E1D2A);
  color: #FFFFFF;
  transform: translateX(3px);
}

[dir="rtl"] .q-subject-card:hover .q-card-arrow-btn {
  transform: translateX(-3px);
}

[data-theme="dark"] .q-subject-card:hover .q-card-arrow-btn {
  background: var(--brand-burgundy, #7E1D2A);
  border-color: var(--brand-burgundy, #7E1D2A);
  color: #FFFFFF;
}

/* Empty search state */
.q-empty-results {
  padding: 48px 24px;
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--border-card);
  border-radius: var(--radius-card, 14px);
  margin-bottom: 24px;
}

/* ── 4. Level 2: Subject Question Bank & Sheets View ── */
.q-level2-container {
  box-sizing: border-box;
  max-width: 100%;
}

.q-level2-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.q-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm, 10px);
  padding: 8px 14px;
  font-size: 0.825rem;
  font-weight: 750;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.q-back-btn:hover {
  border-color: var(--brand-burgundy, #7E1D2A);
  color: var(--brand-burgundy, #7E1D2A);
  transform: translateY(-1px);
}

.q-level2-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.q-level2-count {
  font-size: 0.775rem;
  font-weight: 750;
  color: var(--text-secondary);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 9999px;
}

.q-start-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-burgundy, #7E1D2A);
  border: 1px solid var(--brand-burgundy, #7E1D2A);
  border-radius: var(--radius-sm, 10px);
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 750;
  color: #FFFFFF;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 4px rgba(126, 29, 42, 0.25);
}

.q-start-all-btn:hover {
  background: #962534;
  transform: translateY(-1px);
}

.q-level2-heading {
  margin-bottom: 20px;
}

.q-level2-title {
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.q-level2-desc {
  font-size: 0.825rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.45;
}

/* Level 2 Sheet Bento Grid */
.bento-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 30px;
  align-items: start;
  box-sizing: border-box;
  max-width: 100%;
}

.bento-sheet-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card, 14px);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  box-sizing: border-box;
}

.bento-sheet-box:hover {
  transform: translateY(-2px);
  border-color: rgba(126, 29, 42, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(126, 29, 42, 0.05);
}

.bento-sheet-box:active {
  transform: scale(0.985);
}

.bento-sheet-box.empty-sheet-box {
  opacity: 0.65;
  border-style: dashed;
}

.bento-sheet-box.empty-sheet-box:hover {
  opacity: 0.8;
  transform: none;
  box-shadow: none;
}

/* ── 5. Responsive Rules (Desktop / iPad / Mobile) ── */
/* iPad & Tablet LANDSCAPE (Dedicated 3-Column Layout) */
@media (min-width: 992px) and (max-width: 1279px),
       (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) {
  .questions-subject-grid,
  .bento-subject-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  .bento-sheet-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  .q-hero-banner {
    padding: 20px 24px;
    min-height: 140px;
  }

  .q-hero-bg-artwork {
    width: 44%;
    opacity: 0.85;
  }

  .q-subject-card {
    padding: 15px 15px 13px;
  }
}

/* iPad / Tablet (768px – 1199px) */
@media (min-width: 768px) and (max-width: 991px),
       (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1199px) {
  .questions-subject-grid,
  .bento-subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  .bento-sheet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  .q-hero-banner {
    padding: 20px 24px;
    min-height: 140px;
  }

  .q-hero-bg-artwork {
    width: 44%;
    opacity: 0.85;
  }

  .q-subject-card {
    padding: 16px 16px 14px;
  }
}

/* Mobile Phone (< 768px) */
@media (max-width: 767px) {
  .questions-subject-grid,
  .bento-subject-grid,
  .bento-sheet-grid {
    grid-template-columns: 1fr !important;
    gap: 11px;
  }

  .q-hero-banner {
    padding: 16px 18px;
    min-height: auto;
  }

  .q-hero-bg-artwork {
    width: 100%;
    opacity: 0.12;
  }

  .q-hero-overlay {
    background: var(--bg-card);
    opacity: 0.92;
  }

  .q-hero-title {
    font-size: 1.2rem;
  }

  .q-sub-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .q-search-box-wrap {
    max-width: 100%;
    width: 100%;
  }

  .q-subjects-total-count {
    align-self: flex-start;
  }

  .q-subject-card {
    padding: 14px 14px 13px;
    gap: 12px;
  }

  .q-card-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 9px;
  }

  .q-card-icon-box i,
  .q-card-icon-box svg {
    width: 20px;
    height: 20px;
  }

  .q-card-title {
    font-size: 0.875rem;
  }
}

/* Level 3: Dentistoire Luxury Quiz Runner Modal */
.dt-quiz-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 15, 26, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dtFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dtFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dt-quiz-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 28px 26px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: dtSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dtSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dt-quiz-option {
  width: 100%;
  min-height: 52px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  padding: 12px 18px;
  border-radius: 11px;
  color: var(--text-primary);
  font-size: 0.925rem;
  font-weight: 550;
  line-height: 1.5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  gap: 12px;
  transition: all 0.15s ease;
  user-select: none;
}

.dt-quiz-option:hover:not(:disabled) {
  border-color: var(--brand-accent);
  background: var(--bg-surface);
  transform: translateY(-1px);
}

.dt-modal-options-box.locked .dt-quiz-option {
  pointer-events: none !important;
}

.dt-quiz-option:disabled {
  cursor: default;
}

.dt-quiz-option.correct {
  border-color: #10B981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #065F46 !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35), 0 4px 16px rgba(16, 185, 129, 0.18) !important;
  animation: dtCorrectSoftPulse 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .dt-quiz-option.correct {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34D399 !important;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.45), 0 4px 20px rgba(16, 185, 129, 0.24) !important;
}

@keyframes dtCorrectSoftPulse {
  0% { transform: scale(0.99); }
  50% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

.dt-quiz-option.incorrect {
  border-color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #991B1B !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25) !important;
}

[data-theme="dark"] .dt-quiz-option.incorrect {
  color: #F87171 !important;
}

@keyframes shakeWrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.shake-wrong {
  animation: shakeWrong 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Feedback Badges inside Explanation Section */
.dt-feedback-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 750;
  line-height: 1.4;
  margin-bottom: 12px;
}

.dt-feedback-badge.correct {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #059669;
}

[data-theme="dark"] .dt-feedback-badge.correct {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34D399;
}

.dt-feedback-badge.incorrect {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  color: #DC2626;
}

[data-theme="dark"] .dt-feedback-badge.incorrect {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.3);
  color: #F87171;
}

/* Animated Pop Icons for Answer Choices */
.dt-anim-pop-check {
  display: inline-block;
  animation: dtPopCheck 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes dtPopCheck {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.25) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.dt-anim-pop-wrong {
  display: inline-block;
  animation: dtPopWrong 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes dtPopWrong {
  0% {
    transform: scale(0) rotate(15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.22) rotate(-4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Kuro Mascot Happy Bounce on Correct */
.dt-mascot-happy-bounce {
  animation: dtMascotBounce 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dtMascotBounce {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-10px) scale(1.05); }
  70% { transform: translateY(2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

/* Staged Explanation Reveal Sequence (Fluid & Non-distracting) */
.dt-card-exp-section.staged-reveal {
  opacity: 1;
}

.dt-card-exp-section.staged-reveal .dt-card-feedback-banner {
  animation: dtFadeSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.02s both;
}

.dt-card-exp-section.staged-reveal .dt-card-faculty-exp {
  animation: dtFadeSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.dt-card-exp-section.staged-reveal .dt-card-quote-box {
  animation: dtFadeSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
}

.dt-card-exp-section.staged-reveal .dt-card-source-actions,
.dt-card-exp-section.staged-reveal #dt-card-source-actions {
  animation: dtFadeSlideDown 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
}

@keyframes dtFadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Quick Mute Button in Quiz Runner Header */
#dt-btn-sound.active-muted {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #EF4444;
}

/* Quiz Completion Modal Styling */
.dt-completion-card {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-card);
}

.dt-completion-mascot-box img {
  filter: drop-shadow(0 10px 22px rgba(126, 29, 42, 0.25));
  animation: dtCelebrationFloat 3.2s ease-in-out infinite;
}

@keyframes dtCelebrationFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.dt-completion-stat-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-completion-stat-card:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   Dentistoire Stage & Large Kuro Companion Engine (Non-obscuring UX)
   ========================================================================== */

.dt-quiz-stage-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-quiz-card {
  flex: 1 1 580px;
  max-width: 650px;
  min-width: 320px;
}

/* Large Kuro Mascot Companion Pane */
.dt-kuro-companion-stage {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 10px;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tactile Clickable Kuro Avatar Button */
.dt-kuro-mascot-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  outline: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .dt-kuro-mascot-trigger:hover {
    transform: translateY(-3px) scale(1.02);
  }
  .dt-kuro-mascot-trigger:hover .dt-kuro-mascot-img {
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45)) drop-shadow(0 6px 18px rgba(200, 67, 67, 0.35));
  }
  .dt-kuro-mascot-trigger:hover .dt-kuro-bubble-callout {
    border-color: var(--brand-accent);
    background: var(--bg-card);
    box-shadow: 0 6px 18px rgba(200, 67, 67, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

.dt-kuro-mascot-trigger:active {
  transform: scale(0.96);
}

.dt-kuro-avatar-frame {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt-kuro-mascot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.35)) drop-shadow(0 4px 12px rgba(200, 67, 67, 0.18));
  animation: kuroCompanionFloat 4s ease-in-out infinite;
  transition: filter 0.3s ease, opacity 0.25s ease;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

@keyframes kuroCompanionFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) translateZ(0);
  }
  50% {
    transform: translateY(-8px) rotate(1deg) translateZ(0);
  }
}

/* Glowing Pulse Ring behind mascot */
.dt-kuro-pulse-ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 67, 67, 0.3);
  pointer-events: none;
  animation: kuroRingPulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  will-change: transform, opacity;
}

@keyframes kuroRingPulse {
  0% {
    transform: scale(0.9) translateZ(0);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.15) translateZ(0);
    opacity: 0;
  }
  100% {
    transform: scale(1.15) translateZ(0);
    opacity: 0;
  }
}

/* Mascot Speech Bubble Callout */
.dt-kuro-bubble-callout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 0.775rem;
  font-weight: 750;
  color: var(--text-primary);
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-kuro-bubble-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* Dedicated Non-obscuring Explanation Panel (Sits beside Kuro) */
.dt-kuro-explanation-pane {
  width: 360px;
  max-width: 390px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: kuroExpSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
  text-align: start;
}

@keyframes kuroExpSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dt-kuro-exp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.dt-kuro-exp-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(200, 67, 67, 0.1);
  border: 1px solid rgba(200, 67, 67, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dt-kuro-exp-close-btn {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dt-kuro-exp-close-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #EF4444;
}

.dt-kuro-exp-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dt-kuro-answer-highlight {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.65;
  background: var(--bg-surface-subtle);
  border-inline-start: 3.5px solid var(--brand-accent);
  border-radius: 9px;
  padding: 12px 14px;
  white-space: pre-line;
}

.dt-kuro-sheet-quote-box {
  background: rgba(2, 132, 199, 0.05);
  border: 1px dashed rgba(2, 132, 199, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
}

.dt-kuro-quote-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--brand-accent);
  margin-bottom: 6px;
}

.dt-kuro-quote-text {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.55;
  direction: ltr;
  text-align: left;
}

[dir="rtl"] .dt-kuro-quote-text {
  direction: ltr;
  text-align: left;
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 960px) {
  .dt-quiz-stage-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-height: 94vh;
    overflow-y: auto;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
  }

  .dt-quiz-card {
    max-width: 100%;
    max-height: none;
    overflow-y: visible;
  }

  .dt-kuro-companion-stage {
    position: static;
    width: 100%;
    max-width: 650px;
    transition: opacity 0.25s ease;
  }

  .dt-kuro-avatar-frame {
    width: 105px;
    height: 105px;
  }

  .dt-kuro-mascot-img {
    animation: kuroCompanionFloatMobile 4.5s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.28));
  }

  .dt-kuro-pulse-ring {
    animation: kuroRingPulseMobile 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }

  .dt-kuro-mascot-trigger:active {
    transform: scale(0.97);
  }

  .dt-kuro-explanation-pane {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
}

@keyframes kuroCompanionFloatMobile {
  0%, 100% {
    transform: translateY(0px) translateZ(0);
  }
  50% {
    transform: translateY(-4px) translateZ(0);
  }
}

@keyframes kuroRingPulseMobile {
  0% {
    transform: scale(0.92) translateZ(0);
    opacity: 0.6;
  }
  70%, 100% {
    transform: scale(1.1) translateZ(0);
    opacity: 0;
  }
}

/* Sound Effects Toggle Button Micro-interactions */
#sound-toggle-btn {
  position: relative;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}

#sound-toggle-btn:hover {
  transform: translateY(-1px);
}

#sound-toggle-btn:active {
  transform: translateY(1px) scale(0.95);
}

#sound-toggle-btn[data-sound-active="false"] {
  opacity: 0.55;
  filter: grayscale(0.5);
}

#sound-toggle-btn[data-sound-active="true"] #sound-icon {
  color: var(--brand-accent, #0284C7);
}

/* ==========================================================================
   SHEETS & LECTURES — MASTER REDESIGN (Exact Reference Implementation)
   Panoramic Hero, Filter Controls, 2-Column Card Split, Bottom Action Buttons
   ========================================================================== */

/* ── Panoramic Hero Banner ───────────────────────────────────────────────── */
.sheets-hero-banner {
  position: relative;
  width: 100%;
  min-height: 190px;
  max-height: 220px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid rgba(138, 123, 120, 0.22);
  box-shadow: 0 4px 22px rgba(36, 24, 27, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background: #FAF7F2;
  display: flex;
  align-items: center;
}

[data-theme="dark"] .sheets-hero-banner {
  background: #181924;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.shb-img-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.shb-hero-artwork {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center;
  display: block;
}

[dir="rtl"] .shb-hero-artwork {
  object-position: 20% center;
}

.shb-vignette-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(250, 247, 242, 0.97) 0%, rgba(250, 247, 242, 0.92) 38%, rgba(250, 247, 242, 0.35) 65%, transparent 100%);
  pointer-events: none;
}

[dir="rtl"] .shb-vignette-overlay {
  background: linear-gradient(to left, rgba(250, 247, 242, 0.97) 0%, rgba(250, 247, 242, 0.92) 38%, rgba(250, 247, 242, 0.35) 65%, transparent 100%);
}

[data-theme="dark"] .shb-vignette-overlay {
  background: linear-gradient(to right, rgba(24, 25, 36, 0.97) 0%, rgba(24, 25, 36, 0.92) 38%, rgba(24, 25, 36, 0.35) 65%, transparent 100%);
}

[dir="rtl"][data-theme="dark"] .shb-vignette-overlay {
  background: linear-gradient(to left, rgba(24, 25, 36, 0.97) 0%, rgba(24, 25, 36, 0.92) 38%, rgba(24, 25, 36, 0.35) 65%, transparent 100%);
}

.shb-content-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 34px;
  max-width: 580px;
}

.shb-badge-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #FEECEE;
  border: 1.5px solid rgba(126, 29, 42, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-burgundy, #7E1D2A);
  box-shadow: 0 2px 8px rgba(126, 29, 42, 0.08);
}

[data-theme="dark"] .shb-badge-wrap {
  background: rgba(126, 29, 42, 0.25);
  border-color: rgba(253, 164, 175, 0.22);
  color: #FDA4AF;
}

.shb-typography {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shb-title {
  font-size: 1.68rem;
  font-weight: 850;
  color: #24181B;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

[data-theme="dark"] .shb-title {
  color: #F8F5EE;
}

.shb-subtitle {
  font-size: 0.9rem;
  font-weight: 500;
  color: #6B5E5F;
  margin: 0;
  line-height: 1.45;
}

[data-theme="dark"] .shb-subtitle {
  color: #A59B98;
}

/* ── Filter & Search Control Bar ─────────────────────────────────────────── */
.sheets-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sheets-search-box {
  flex: 1;
  min-width: 220px;
  position: relative;
  display: flex;
  align-items: center;
}

.sheets-search-icon {
  position: absolute;
  inset-inline-start: 13px;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.sheets-search-input {
  width: 100%;
  height: 42px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #EAE3D6);
  border-radius: 11px;
  color: var(--text-primary, #24181B);
  font-size: 0.88rem;
  padding: 0 14px;
  padding-inline-start: 38px;
  padding-inline-end: 34px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sheets-search-input::placeholder {
  color: var(--text-muted, #8A7B78);
}

.sheets-search-input:focus {
  outline: none;
  border-color: var(--brand-burgundy, #7E1D2A);
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.12), 0 1px 3px rgba(0,0,0,0.04);
}

[data-theme="dark"] .sheets-search-input {
  background: var(--bg-surface-subtle, #1B1C26);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

.sheets-search-clear {
  position: absolute;
  inset-inline-end: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--bg-hover, #F4EFEA);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s;
}

.sheets-filters-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sheets-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 42px;
}

.sheets-select-icon {
  position: absolute;
  inset-inline-start: 12px;
  width: 14px;
  height: 14px;
  color: var(--text-muted, #8A7B78);
  pointer-events: none;
}

.sheets-select-chevron {
  position: absolute;
  inset-inline-end: 12px;
  width: 14px;
  height: 14px;
  color: var(--text-muted, #8A7B78);
  pointer-events: none;
}

.sheets-select-control {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #EAE3D6);
  border-radius: 11px;
  color: var(--text-primary, #24181B);
  font-size: 0.86rem;
  font-weight: 650;
  height: 42px;
  padding: 0 34px;
  padding-inline-start: 34px;
  padding-inline-end: 32px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sheets-select-control:focus {
  outline: none;
  border-color: var(--brand-burgundy, #7E1D2A);
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.12);
}

[data-theme="dark"] .sheets-select-control {
  background: var(--bg-surface-subtle, #1B1C26);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── View Toggle Bar ─────────────────────────────────────────────────────── */
.sheets-view-toggle-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-surface-subtle, #F4EFEA);
  border: 1px solid var(--border-card, #EAE3D6);
  border-radius: 11px;
  padding: 3px;
  height: 42px;
  box-sizing: border-box;
}

[data-theme="dark"] .sheets-view-toggle-bar {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.sheets-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #8A7B78);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16,1,0.3,1);
}

.sheets-view-btn:hover {
  color: var(--text-primary);
}

.sheets-view-btn.active {
  background: var(--brand-burgundy, #7E1D2A) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 4px rgba(126, 29, 42, 0.3);
}

.sheets-view-btn:active {
  transform: scale(0.92);
}

/* ── Count & Metadata Sub-bar ────────────────────────────────────────────── */
.sheets-meta-subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.sheets-count-badge {
  display: inline-flex;
  align-items: center;
}

.sheets-count-text {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--text-secondary, #6B5E5F);
}

.sheets-mobile-view-toggle {
  display: none;
}

/* ==========================================================================
   SHEETS & LECTURES — 2-STEP SUBJECT & SHEETS ARCHITECTURE
   Level 1: Subject Selection (Desktop 3-Col, iPad 2-Col, Mobile 1-Col)
   Level 2: Subject Sheets Library (PDF First Page Thumbnails & Action Buttons)
   ========================================================================== */

.sheets-hub-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.sheets-content-stage {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Top Back to Subjects Bar ─────────────────────────────────────────── */
.sheets-top-back-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.sheets-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #EAE3D6);
  border-radius: 11px;
  color: #BC4A47;
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sheets-back-btn:hover {
  background: #BC4A47;
  color: #FFFFFF !important;
  border-color: #BC4A47;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(188, 74, 71, 0.22);
}

.sheets-back-btn:active {
  transform: scale(0.97);
}

[data-theme="dark"] .sheets-back-btn {
  background: #1B1C26;
  border-color: rgba(255, 255, 255, 0.1);
  color: #FDA4AF;
}

[data-theme="dark"] .sheets-back-btn:hover {
  background: #BC4A47;
  color: #FFFFFF !important;
}

/* ── Subject Badge Wrap inside Dedicated Hero ────────────────────────── */
.sheets-sub-badge-wrap {
  background: rgba(188, 74, 71, 0.08) !important;
  border-color: rgba(188, 74, 71, 0.2) !important;
  color: #BC4A47 !important;
}

[data-theme="dark"] .sheets-sub-badge-wrap {
  background: rgba(188, 74, 71, 0.2) !important;
  border-color: rgba(253, 164, 175, 0.25) !important;
  color: #FDA4AF !important;
}

/* ── Level 1: Subject Selection Grid ─────────────────────────────────── */
.sheets-subject-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.sheets-subject-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.sheets-subject-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #EAE3D6);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(44, 24, 20, 0.03);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  outline: none;
  min-width: 0;
}

[data-theme="dark"] .sheets-subject-card {
  background: #1B1C26;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.sheets-subject-card:hover {
  transform: translateY(-2px);
  border-color: rgba(188, 74, 71, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(188, 74, 71, 0.09);
}

.sheets-subject-card:hover .sheets-subject-arrow {
  color: #BC4A47;
  transform: translateX(3px);
}

[dir="rtl"] .sheets-subject-card:hover .sheets-subject-arrow {
  transform: translateX(-3px);
}

.sheets-subject-card:focus-visible {
  border-color: #BC4A47;
  box-shadow: 0 0 0 3px rgba(188, 74, 71, 0.16);
}

.sheets-subject-card:active {
  transform: scale(0.985);
}

.sheets-subject-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.sheets-subject-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(188, 74, 71, 0.07);
  border: 1px solid rgba(188, 74, 71, 0.16);
  color: #BC4A47;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .sheets-subject-icon-box {
  background: rgba(188, 74, 71, 0.18);
  border-color: rgba(253, 164, 175, 0.2);
  color: #FDA4AF;
}

.sheets-subject-card:hover .sheets-subject-icon-box {
  transform: scale(1.06);
}

.sheets-subject-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.sheets-subject-name {
  font-size: 0.96rem;
  font-weight: 750;
  color: var(--text-primary, #24181B);
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .sheets-subject-name {
  color: #F8F5EE;
}

.sheets-subject-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted, #7A7270);
  font-weight: 600;
}

.sheets-subject-code {
  font-weight: 700;
  color: var(--text-secondary, #6B5E5F);
}

[data-theme="dark"] .sheets-subject-code {
  color: #A59B98;
}

.sheets-subject-meta-dot {
  color: var(--border-card, #EAE3D6);
  font-size: 0.85rem;
}

.sheets-subject-count {
  font-weight: 650;
  color: var(--text-muted, #7A7270);
}

.sheets-subject-arrow {
  color: var(--text-muted, #A8A19F);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* ── Grid Container ──────────────────────────────────────────────────────── */
.sheets-grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  align-items: start;
}

/* ── List View Container ─────────────────────────────────────────────────── */
.sheets-list-container-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* ── Grid Card (Master 2-Column Internal Split) ───────────────────────────── */
.sheets-grid-card {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #EAE3D6);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(36, 24, 27, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
  overflow: hidden;
}

[data-theme="dark"] .sheets-grid-card {
  background: #1B1C26;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sheets-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(126, 29, 42, 0.32);
  box-shadow: 0 10px 24px rgba(126, 29, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sheets-grid-card:active {
  transform: scale(0.985);
}

.sgc-card-inner {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

/* ── Left Column: A4 Vertical PDF Thumbnail ──────────────────────────────── */
.sgc-thumb-col {
  width: 114px;
  flex-shrink: 0;
}

.sgc-thumbnail-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1.38;
  border-radius: 9px;
  overflow: hidden;
  background: #FAF7F2;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .sgc-thumbnail-wrapper {
  background: #14151E;
  border-color: rgba(255, 255, 255, 0.08);
}

.sgc-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8A7B78;
}

.sgc-doc-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(126, 29, 42, 0.06);
  border: 1px solid rgba(126, 29, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-burgundy, #7E1D2A);
}

[data-theme="dark"] .sgc-doc-icon-wrap {
  background: rgba(253, 164, 175, 0.1);
  border-color: rgba(253, 164, 175, 0.2);
  color: #FDA4AF;
}

.sgc-placeholder-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sgc-placeholder-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(126, 29, 42, 0.12);
  color: var(--brand-burgundy, #7E1D2A);
}

[data-theme="dark"] .sgc-placeholder-badge {
  background: rgba(253, 164, 175, 0.16);
  color: #FDA4AF;
}

.sgc-placeholder-pages {
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--text-secondary);
}

.sgc-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sgc-thumbnail-img.loaded {
  opacity: 1;
}

/* ── Right Column: Info & Metadata ───────────────────────────────────────── */
.sgc-info-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sgc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.sgc-badges-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.sgc-subject-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.71rem;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
  max-width: 155px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.sheets-order-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 6px;
  background: rgba(14, 165, 233, 0.10);
  color: #0EA5E9;
  border: 1px solid rgba(14, 165, 233, 0.25);
  line-height: 1.2;
}

.sgc-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.sgc-menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.sgc-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-primary, #24181B);
  line-height: 1.36;
  margin: 1px 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  letter-spacing: -0.01em;
}

.sgc-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  line-height: 1.3;
}

.sgc-meta-icon {
  width: 13px;
  height: 13px;
  color: var(--text-muted, #8A7B78);
  flex-shrink: 0;
}

.sgc-doctor-row {
  color: var(--text-primary, #24181B);
  font-weight: 650;
}

.sgc-specs-row,
.sgc-date-row {
  color: var(--text-secondary, #6B5E5F);
}

.sgc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sgc-meta-sep {
  color: var(--border-card, #EAE3D6);
  font-size: 0.85rem;
  user-select: none;
}

/* ── Bottom Full-Width Action Buttons ────────────────────────────────────── */
.sgc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 4px;
}

.sgc-btn-view {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  background: var(--brand-burgundy, #7E1D2A);
  color: #FFFFFF !important;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16,1,0.3,1);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(126, 29, 42, 0.22);
}

.sgc-btn-view:hover {
  background: #681320;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(126, 29, 42, 0.32);
}

.sgc-btn-view:active {
  transform: scale(0.97);
}

.sgc-btn-download {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  background: #FAF7F2;
  color: #4A151C;
  border: 1.5px solid rgba(126, 29, 42, 0.18);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16,1,0.3,1);
  white-space: nowrap;
}

.sgc-btn-download:hover {
  background: #F4EFEA;
  border-color: var(--brand-burgundy, #7E1D2A);
  color: var(--brand-burgundy, #7E1D2A);
  transform: translateY(-1px);
}

.sgc-btn-download:active {
  transform: scale(0.97);
}

[data-theme="dark"] .sgc-btn-download {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F8F5EE;
}

[data-theme="dark"] .sgc-btn-download:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: #FDA4AF;
  color: #FDA4AF;
}

/* ── List Row Mode ───────────────────────────────────────────────────────── */
.sheets-list-row {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #EAE3D6);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), border-color 0.18s ease, box-shadow 0.18s ease;
}

[data-theme="dark"] .sheets-list-row {
  background: #1B1C26;
  border-color: rgba(255, 255, 255, 0.08);
}

.sheets-list-row:hover {
  transform: translateY(-1px);
  border-color: rgba(126, 29, 42, 0.28);
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.slr-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.slr-doc-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(126, 29, 42, 0.06);
  border: 1px solid rgba(126, 29, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-burgundy, #7E1D2A);
  flex-shrink: 0;
}

[data-theme="dark"] .slr-doc-icon-wrap {
  background: rgba(253, 164, 175, 0.1);
  border-color: rgba(253, 164, 175, 0.2);
  color: #FDA4AF;
}

.slr-info {
  flex: 1;
  min-width: 0;
}

.slr-header-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.slr-title {
  font-size: 0.96rem !important;
  margin: 0 0 3px !important;
}

.slr-meta {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.slr-actions {
  flex-shrink: 0;
  width: 260px;
}

/* ── Responsive Multi-Device Rules ───────────────────────────────────────── */
/* Tier 1: Desktop (≥ 1200px) */
@media (min-width: 1200px) {
  .sheets-grid-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* Tier 2: iPad & Tablet LANDSCAPE (Dedicated 3-Column Tablet Grid) */
@media (min-width: 992px) and (max-width: 1279px),
       (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) {
  .sheets-grid-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sheets-grid-card {
    padding: 14px 14px 12px !important;
    gap: 12px !important;
    border-radius: 14px !important;
  }

  .sgc-thumb-col {
    width: 96px !important;
  }

  .sgc-title {
    font-size: 0.92rem !important;
  }

  .sgc-actions {
    gap: 8px !important;
  }

  .sgc-btn-view,
  .sgc-btn-download {
    padding: 6px 10px !important;
    font-size: 0.77rem !important;
  }

  /* Compact iPad Landscape Hero Banner */
  .sheets-hero-banner {
    min-height: 145px !important;
    max-height: 165px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
  }

  .shb-content-overlay {
    padding: 18px 24px !important;
    gap: 14px !important;
    max-width: 520px !important;
  }

  .shb-badge-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 11px !important;
  }

  .shb-badge-svg {
    width: 19px !important;
    height: 19px !important;
  }

  .shb-title {
    font-size: 1.35rem !important;
  }

  .shb-subtitle {
    font-size: 0.82rem !important;
  }

  .shb-hero-artwork {
    object-position: 80% center !important;
  }

  [dir="rtl"] .shb-hero-artwork {
    object-position: 20% center !important;
  }

  /* Streamlined iPad Landscape Filter Bar (Single Row, No Overflow) */
  .sheets-filter-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sheets-search-box {
    flex: 1 1 auto !important;
    min-width: 160px !important;
  }

  .sheets-search-input {
    height: 38px !important;
    font-size: 0.82rem !important;
    padding-inline-start: 34px !important;
    padding-inline-end: 28px !important;
  }

  .sheets-filters-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
  }

  .sheets-select-wrap {
    height: 38px !important;
  }

  .sheets-select-control {
    height: 38px !important;
    font-size: 0.8rem !important;
    padding-inline-start: 28px !important;
    padding-inline-end: 24px !important;
    border-radius: 9px !important;
  }

  .sheets-year-select-wrap .sheets-select-control {
    max-width: 110px !important;
  }

  .sheets-sort-select-wrap .sheets-select-control {
    max-width: 130px !important;
  }

  .sheets-view-toggle-bar {
    height: 38px !important;
    padding: 2px !important;
  }

  .sheets-view-btn {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Tier 3: iPad & Tablet PORTRAIT (Dedicated 2-Column Tablet Grid) */
@media (min-width: 768px) and (max-width: 991px),
       (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1199px) {
  .sheets-subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .sheets-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .sgc-thumb-col {
    width: 106px;
  }
  .sheets-hero-banner {
    min-height: 180px;
    max-height: 200px;
  }
}

@media (max-width: 767px) {
  .sheets-subject-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .sheets-subject-card {
    padding: 13px 15px !important;
  }
  .sheets-hero-banner {
    min-height: 130px;
    max-height: 150px;
    border-radius: 14px;
    margin-bottom: 16px;
  }

  .shb-content-overlay {
    padding: 16px 18px;
    gap: 12px;
    max-width: 100%;
  }

  .shb-badge-wrap {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }

  .shb-title {
    font-size: 1.28rem;
  }

  .shb-subtitle {
    font-size: 0.78rem;
  }

  .sheets-filter-bar {
    gap: 8px;
  }

  .sheets-search-box {
    width: 100%;
    min-width: 0;
  }

  .sheets-filters-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .sheets-select-wrap {
    width: 100%;
  }

  .sheets-select-control {
    width: 100%;
  }

  .sheets-year-select-wrap,
  .sheets-view-toggle-bar {
    display: none;
  }

  .sheets-mobile-view-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-surface-subtle, #F4EFEA);
    border: 1px solid var(--border-card, #EAE3D6);
    border-radius: 9px;
    padding: 2px;
  }

  .sheets-meta-subbar {
    margin-bottom: 14px;
  }

  .sheets-grid-container {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sgc-thumb-col {
    width: 98px;
  }

  .sgc-card-inner {
    gap: 10px;
  }

  .sgc-title {
    font-size: 0.92rem;
  }

  .sgc-actions {
    gap: 8px;
  }

  .sgc-btn-view,
  .sgc-btn-download {
    height: 40px !important;
    font-size: 0.82rem !important;
  }

  .sheets-list-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
  }

  .slr-left {
    width: 100%;
  }

  .slr-actions {
    width: 100%;
  }
}

/* ==========================================================================
   AUDIO RECORDINGS PAGE — Card internals
   ========================================================================== */

/* Empty rec card — dimmed */
.rec-card-empty {
  opacity: 0.7;
  border-style: dashed;
}

.rec-card-empty:hover {
  opacity: 0.85;
  transform: none;
  box-shadow: none;
}

/* Tracks list inside a recording card */
.rec-tracks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

/* Individual track row */
.rec-track-item {
  padding: 10px 12px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s;
}

.rec-track-item:hover {
  border-color: rgba(200,67,67,0.2);
}

.rec-track-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.rec-track-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rec-track-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.rec-track-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Embedded audio player */
.rec-audio-player {
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm);
  accent-color: var(--brand-burgundy);
  background: transparent;
}

.rec-audio-player::-webkit-media-controls-panel {
  background: var(--bg-surface-subtle);
}

/* Telegram button in recordings */
.rec-telegram-btn {
  width: 100%;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
}

/* ==========================================================================
   AUTH MODAL — AVATAR UPLOAD COMPONENT
   ========================================================================== */

.auth-avatar-upload-group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-surface-subtle);
  border: 1px dashed var(--border-card);
  border-radius: 14px;
  margin-bottom: 18px;
  transition: border-color 0.2s ease;
}

.auth-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px dashed var(--border-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.auth-avatar-preview:hover {
  border-color: var(--brand-burgundy);
  box-shadow: 0 0 0 4px rgba(200,67,67,0.10);
}

#auth-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.auth-avatar-upload-info { flex: 1; min-width: 0; }

.auth-avatar-label {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 3px;
}

.auth-avatar-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}

.auth-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.775rem;
  font-weight: 750;
  color: var(--brand-burgundy);
  background: rgba(200,67,67,0.08);
  border: 1px solid rgba(200,67,67,0.22);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.auth-avatar-btn:hover { background: rgba(200,67,67,0.14); }
.auth-avatar-btn:active { transform: scale(0.96); }

/* ==========================================================================
   PROFILE & ACCOUNT SETTINGS PAGE (Linear/Raycast grade)
   ========================================================================== */

.profile-page-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

@media (max-width: 860px) {
  .profile-page-grid {
    grid-template-columns: 1fr;
  }
}

.profile-avatar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md, 14px);
  background: var(--bg-card);
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.04));
  position: relative;
}

.profile-avatar-circle-wrap {
  position: relative;
  margin-bottom: 18px;
}

.profile-avatar-circle {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 2.5px solid var(--border-card);
  background: var(--bg-surface-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-avatar-circle:hover {
  border-color: var(--brand-burgundy);
  box-shadow: 0 0 0 4px rgba(200, 67, 67, 0.12);
  transform: translateY(-2px);
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 21, 30, 0.65);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 750;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 50%;
}

.profile-avatar-circle:hover .profile-avatar-overlay {
  opacity: 1;
}

.profile-name-display {
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.profile-email-display {
  font-size: 0.825rem;
  color: var(--text-secondary);
  margin: 0 0 16px;
  word-break: break-all;
}

.profile-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #D97706;
  margin-bottom: 18px;
}

.profile-remove-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.775rem;
  font-weight: 700;
  color: #EF4444;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-remove-avatar-btn:hover {
  background: rgba(239, 68, 68, 0.14);
}

.profile-remove-avatar-btn:active {
  transform: scale(0.96);
}

.profile-forms-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-section {
  padding: 26px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.04));
}

.profile-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.profile-section-header h3 {
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--text-primary);
  margin: 0;
}

.profile-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.profile-toggle-pw {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.profile-toggle-pw:hover {
  color: var(--text-primary);
}

.profile-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 0.875rem;
  font-weight: 750;
  color: #fff;
  background: var(--brand-burgundy, #C84343);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(200, 67, 67, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 14px;
}

.profile-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 67, 67, 0.35);
}

.profile-save-btn:active {
  transform: scale(0.98);
}

.profile-feedback {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.825rem;
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 6px;
  line-height: 1.5;
}

.profile-feedback-success {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.profile-feedback-error {
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ══════════════════════════════════════════════════════════════════
   HOME DASHBOARD v3: COMPACT GREETING, TABBED LECTURES, COMPACT TILES
   ══════════════════════════════════════════════════════════════════ */

/* 1. Compact Greeting Banner */
.home-compact-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-compact-greeting-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.home-compact-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.home-compact-greeting {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.25;
}

.home-compact-badge {
  font-size: 0.7rem;
  font-weight: 750;
  color: var(--brand-burgundy, #2357d9);
  background: var(--brand-burgundy-light, rgba(35, 87, 217, 0.08));
  border: 1px solid var(--brand-burgundy-border, rgba(35, 87, 217, 0.20));
  padding: 2px 9px;
  border-radius: 9999px;
  white-space: nowrap;
}

.home-compact-subline {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

.home-compact-mascot-wrap {
  flex-shrink: 0;
}

.home-compact-mascot-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 6px;
  border-radius: 9999px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-compact-mascot-pill:hover {
  border-color: var(--brand-burgundy-border, #bfd0ff);
  background: var(--brand-burgundy-light, rgba(35, 87, 217, 0.08));
  transform: translateY(-1px);
}

.home-compact-mascot-pill:active {
  transform: scale(0.96);
}

.home-compact-mascot-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.home-compact-mascot-name {
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--text-primary);
}

/* 2. Compact Tabbed Lectures Schedule */
.home-compact-schedule-section {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hcs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.hcs-tabs-segmented {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 3px;
}

.hcs-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.hcs-tab-btn:hover {
  color: var(--text-primary);
}

.hcs-tab-btn.active {
  background: var(--bg-card);
  color: var(--brand-burgundy, #2357d9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.hcs-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
}

.hcs-date-and-more {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hcs-current-date-hint {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.hcs-full-schedule-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-burgundy, #2357d9);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.hcs-full-schedule-link:hover {
  background: var(--brand-burgundy-light, rgba(35, 87, 217, 0.08));
}

.hcs-content-box {
  display: flex;
  flex-direction: column;
}

/* Single-Line Slim Lecture Row */
.compact-lecture-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px 110px 20px;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.compact-lecture-row:hover {
  background: var(--bg-hover);
  border-color: var(--brand-burgundy-border, #bfd0ff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.compact-lecture-row:active {
  transform: scale(0.99);
}

.clr-time-col {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clr-time-col svg {
  color: var(--text-muted);
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.clr-subject-col {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.clr-subject-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.clr-subject-code {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.clr-subject-name {
  font-size: 0.825rem;
  font-weight: 750;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clr-hall-col {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.clr-hall-col svg {
  color: #0284C7;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.clr-status-col {
  display: flex;
  justify-content: flex-end;
}

.clr-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
  line-height: 1.3;
}

.clr-status.live {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.clr-status.upcoming {
  background: rgba(2, 132, 199, 0.10);
  color: #0284C7;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.clr-status.completed {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.clr-arrow {
  color: var(--text-muted);
  width: 13px;
  height: 13px;
  opacity: 0.6;
  transition: all 0.15s ease;
  justify-self: end;
}

.compact-lecture-row:hover .clr-arrow {
  opacity: 1;
  color: var(--brand-burgundy, #2357d9);
}

/* Empty State inside Lectures Tab */
.compact-lecture-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-surface-subtle);
  border: 1px dashed var(--border-subtle);
  border-radius: 9px;
  gap: 10px;
}

.clr-empty-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 550;
}

.clr-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--brand-burgundy, #2357d9);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.clr-empty-link:hover {
  background: var(--brand-burgundy-light, rgba(35, 87, 217, 0.08));
}

/* 3. Compact Subject Tiles (Linear / Apple Modern UI Style) */
.subjects-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.compact-subject-tile {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  user-select: none;
  -webkit-user-select: none;
}

.compact-subject-tile:hover {
  transform: translateY(-2px);
  border-color: var(--brand-burgundy, #2357d9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.compact-subject-tile:active {
  transform: scale(0.98);
}

.cst-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cst-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cst-icon-badge svg {
  width: 17px;
  height: 17px;
}

.cst-code-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cst-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cst-title-primary {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cst-title-secondary {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

.cst-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.cst-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.cst-count-pill svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

.cst-open-hint {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.compact-subject-tile:hover .cst-open-hint {
  color: var(--brand-burgundy, #2357d9);
}

/* Responsive adjustments for mobile phones */
@media (max-width: 640px) {
  .home-compact-banner {
    padding: 10px 14px;
    gap: 8px;
    margin-bottom: 12px;
  }
  .home-compact-subline {
    display: none;
  }
  .home-compact-badge {
    font-size: 0.62rem;
    padding: 1px 6px;
  }
  .home-compact-mascot-name {
    display: none;
  }
  .home-compact-mascot-pill {
    padding: 3px;
  }

  .home-compact-schedule-section {
    padding: 10px 12px;
    margin-bottom: 12px;
  }
  .hcs-header {
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .hcs-tab-btn {
    padding: 4px 8px;
    font-size: 0.72rem;
  }
  .hcs-current-date-hint {
    display: none;
  }
  .hcs-full-schedule-link {
    font-size: 0.7rem;
    padding: 2px 6px;
  }

  .compact-lecture-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 7px 10px;
  }
  .clr-time-col {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.7rem;
  }
  .clr-status-col {
    grid-column: 2;
    grid-row: 1;
  }
  .clr-subject-col {
    grid-column: 1;
    grid-row: 2;
  }
  .clr-hall-col {
    display: none;
  }
  .clr-arrow {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  /* 2-column mobile subjects grid: 6-8 cards visible without long scrolling! */
  .subjects-showcase-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .compact-subject-tile {
    padding: 9px 10px !important;
    border-radius: 10px !important;
  }
  .cst-top {
    margin-bottom: 7px !important;
  }
  .cst-icon-badge {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
  }
  .cst-icon-badge svg {
    width: 14px !important;
    height: 14px !important;
  }
  .cst-code-badge {
    font-size: 0.6rem !important;
    padding: 1px 5px !important;
  }
  .cst-title-primary {
    font-size: 0.8rem !important;
  }
  .cst-title-secondary {
    font-size: 0.62rem !important;
  }
  .cst-footer {
    margin-top: 7px !important;
    padding-top: 5px !important;
  }
  .cst-count-pill {
    font-size: 0.64rem !important;
  }
  .cst-count-pill svg {
    width: 10px !important;
    height: 10px !important;
  }
}

/* 4. Question Translation Controls */
.dt-btn-translate-q,
.btn-toggle-direct-trans,
.btn-toggle-saved-trans,
.btn-toggle-quiz-trans {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.dt-btn-translate-q:hover {
  background: rgba(35, 87, 217, 0.08);
  border-color: rgba(35, 87, 217, 0.28);
  color: var(--brand-accent);
}

.dt-btn-translate-q:active,
.btn-toggle-direct-trans:active,
.btn-toggle-saved-trans:active,
.btn-toggle-quiz-trans:active {
  transform: scale(0.96);
}

/* ══════════════════════════════════════════
   5. POLISHED SUBJECT MODAL & NOTIFICATIONS VIEWPORT SHIELD
   ══════════════════════════════════════════ */
.subject-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 14, 23, 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.subject-modal-backdrop.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.subject-modal-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
  max-width: 820px !important;
  max-height: 90vh !important;
  max-height: 90dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: scale(0.95) translateY(12px) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 1000000 !important;
}

.subject-modal-backdrop.active .subject-modal-box {
  transform: scale(1) translateY(0) !important;
}

/* Polished Category Cards */
.modal-category-card {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease !important;
  user-select: none !important;
}

.modal-category-card:active {
  transform: scale(0.98) !important;
}

/* Mobile Subject Modal sizing */
@media (max-width: 640px) {
  .subject-modal-box {
    max-height: 94dvh !important;
    border-radius: 16px !important;
  }
  .modal-header {
    padding: 14px 16px !important;
  }
  .modal-body {
    padding: 14px 16px !important;
  }
  .modal-categories-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Mobile Notifications Dropdown Viewport Shield */
@media (max-width: 640px) {
  .notifications-dropdown-panel {
    position: fixed !important;
    top: calc(var(--header-height, 56px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    inset-inline-start: 12px !important;
    inset-inline-end: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 75px) !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    z-index: 100050 !important;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }
}

/* ==========================================================================
   KURO FANGS — COZY ACADEMIC STUDY HOMEPAGE & TOP NAVBAR (PRIMARY DESIGN)
   Reference Mockup: Warm Cream (#F8F5EE), Deep Burgundy (#7E1D2A), Botanical Motif
   ========================================================================== */

/* ─── 1. Responsive Master Layout (Desktop, iPad/Tablet & Phone) ─── */
@media (min-width: 1200px) {
  .app-sidebar:not(.open) {
    display: none !important;
  }
  .mobile-toggle-btn {
    display: none !important;
  }
  .sidebar-backdrop {
    display: none !important;
  }
}

/* Mobile & Tablet Drawer Architecture (< 1200px) */
@media (max-width: 1199px) {
  /* 1. Backdrop Overlay (Z-Index 1000) */
  .sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.28) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s ease !important;
  }

  .sidebar-backdrop.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* 2. Slide-In Sidebar Drawer (Z-Index 1010) */
  .app-sidebar {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: min(85vw, 320px) !important;
    max-width: 320px !important;
    z-index: 1010 !important;
    background: #FAF7F2 !important;
    border: none !important;
    box-shadow: 0 0 35px rgba(36, 24, 27, 0.12), 0 8px 24px rgba(36, 24, 27, 0.06) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* LTR Direction: Slide in from Left */
  html[dir="ltr"] .app-sidebar,
  .app-sidebar {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
    border-right: 1px solid #EAE3D6 !important;
    border-left: none !important;
  }

  /* RTL Direction: Slide in from Right */
  html[dir="rtl"] .app-sidebar {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
    border-left: 1px solid #EAE3D6 !important;
    border-right: none !important;
  }

  /* Open State: Drawer visible & interactive */
  .app-sidebar.open,
  html[dir="ltr"] .app-sidebar.open,
  html[dir="rtl"] .app-sidebar.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Drawer Navigation Scrolling */
  .app-sidebar .sidebar-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  /* Drawer Header & Close Button */
  .app-sidebar .sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 68px !important;
    padding: 0 16px !important;
    background: #FAF7F2 !important;
    border-bottom: 1px solid #EAE3D6 !important;
    flex-shrink: 0 !important;
  }

  .sidebar-close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    border: 1px solid #EAE3D6 !important;
    background: #FFFFFF !important;
    color: #7E1D2A !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(36, 24, 27, 0.04) !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
    flex-shrink: 0 !important;
  }

  .sidebar-close-btn svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #7E1D2A !important;
  }

  .sidebar-close-btn:hover {
    background: #F8F5EE !important;
    border-color: rgba(126, 29, 42, 0.25) !important;
  }

  .sidebar-close-btn:active {
    transform: scale(0.95) !important;
    background: #F2ECE1 !important;
  }

  /* Distinctive Admin Portal Card */
  .app-sidebar .sidebar-admin-link {
    background: rgba(126, 29, 42, 0.04) !important;
    border: 1px solid rgba(126, 29, 42, 0.16) !important;
    border-radius: 10px !important;
    color: #7E1D2A !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
  }

  .app-sidebar .sidebar-admin-link:hover {
    background: rgba(126, 29, 42, 0.08) !important;
    border-color: rgba(126, 29, 42, 0.28) !important;
  }

  /* Drawer Footer */
  .app-sidebar .sidebar-footer {
    flex-shrink: 0 !important;
    padding: 12px 14px !important;
    border-top: 1px solid #EAE3D6 !important;
    background: #FAF7F2 !important;
  }

  /* Quick Settings Controls */
  .sidebar-quick-settings {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #EAE3D6 !important;
  }

  .side-quick-setting-btn {
    flex: 1 !important;
    height: 35px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    border: 1px solid #EAE3D6 !important;
    color: #24181B !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(36, 24, 27, 0.04) !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
  }

  .side-quick-setting-btn svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #7E1D2A !important;
    color: #7E1D2A !important;
  }

  .side-quick-setting-btn:hover {
    background: #F8F5EE !important;
    border-color: rgba(126, 29, 42, 0.25) !important;
  }

  .side-quick-setting-btn:active {
    transform: scale(0.96) !important;
    background: #F2ECE1 !important;
  }

  /* User Profile Card */
  .sidebar-user-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
  }

  .sidebar-user-card:hover {
    background: #F2ECE1 !important;
    border-color: #EAE3D6 !important;
  }

  .sidebar-user-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1.5px solid #EAE3D6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
  }

  .sidebar-user-name {
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #24181B !important;
    line-height: 1.25 !important;
  }

  .sidebar-user-sub {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    color: #756966 !important;
    line-height: 1.2 !important;
  }

  /* Mobile Burger Toggle Button */
  .mobile-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid #EAE3D6 !important;
    background: #FFFFFF !important;
    color: #24181B !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    transition: transform 0.1s ease, background 0.15s ease !important;
  }

  .mobile-toggle-btn:active {
    transform: scale(0.95) !important;
    background: #F5EFEB !important;
  }
}

/* Dark Mode Overrides for Sidebar */
[data-theme="dark"] .app-sidebar,
[data-theme="kuro-dark"] .app-sidebar {
  background: #0E0F15 !important;
  border-color: #242636 !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .sidebar-header,
[data-theme="kuro-dark"] .sidebar-header {
  background: #0E0F15 !important;
  border-bottom-color: #242636 !important;
}

[data-theme="dark"] .sidebar-brand-title,
[data-theme="kuro-dark"] .sidebar-brand-title {
  color: #F6F2EC !important;
}

[data-theme="dark"] .sidebar-brand-sub,
[data-theme="kuro-dark"] .sidebar-brand-sub {
  color: #A6ADC8 !important;
}

[data-theme="dark"] .sidebar-close-btn,
[data-theme="kuro-dark"] .sidebar-close-btn {
  background: #14151E !important;
  border-color: #242636 !important;
  color: #DE5353 !important;
}

[data-theme="dark"] .sidebar-close-btn svg,
[data-theme="kuro-dark"] .sidebar-close-btn svg {
  stroke: #DE5353 !important;
}

[data-theme="dark"] .sidebar-section-title,
[data-theme="kuro-dark"] .sidebar-section-title {
  color: #DE5353 !important;
}

[data-theme="dark"] .sidebar-menu-item,
[data-theme="kuro-dark"] .sidebar-menu-item {
  color: #A6ADC8 !important;
}

[data-theme="dark"] .sidebar-menu-item:hover,
[data-theme="kuro-dark"] .sidebar-menu-item:hover {
  background: #14151E !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .sidebar-menu-item.active,
[data-theme="kuro-dark"] .sidebar-menu-item.active {
  background: rgba(222, 83, 83, 0.16) !important;
  border-color: rgba(222, 83, 83, 0.35) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .sidebar-menu-icon-wrap,
[data-theme="kuro-dark"] .sidebar-menu-icon-wrap {
  color: #DE5353 !important;
}

[data-theme="dark"] .sidebar-menu-icon-wrap svg,
[data-theme="kuro-dark"] .sidebar-menu-icon-wrap svg {
  color: #DE5353 !important;
  stroke: #DE5353 !important;
}

[data-theme="dark"] .sidebar-admin-link,
[data-theme="kuro-dark"] .sidebar-admin-link {
  background: rgba(222, 83, 83, 0.10) !important;
  border-color: rgba(222, 83, 83, 0.30) !important;
  color: #DE5353 !important;
}

[data-theme="dark"] .sidebar-footer,
[data-theme="kuro-dark"] .sidebar-footer {
  background: #0E0F15 !important;
  border-top-color: #242636 !important;
}

[data-theme="dark"] .sidebar-quick-settings,
[data-theme="kuro-dark"] .sidebar-quick-settings {
  border-bottom-color: #242636 !important;
}

[data-theme="dark"] .side-quick-setting-btn,
[data-theme="kuro-dark"] .side-quick-setting-btn {
  background: #14151E !important;
  border-color: #242636 !important;
  color: #F6F2EC !important;
}

[data-theme="dark"] .side-quick-setting-btn svg,
[data-theme="kuro-dark"] .side-quick-setting-btn svg {
  stroke: #DE5353 !important;
  color: #DE5353 !important;
}

[data-theme="dark"] .sidebar-user-card:hover,
[data-theme="kuro-dark"] .sidebar-user-card:hover {
  background: #14151E !important;
  border-color: #242636 !important;
}

[data-theme="dark"] .sidebar-user-avatar,
[data-theme="kuro-dark"] .sidebar-user-avatar {
  background: #14151E !important;
  border-color: #242636 !important;
}

[data-theme="dark"] .sidebar-user-name,
[data-theme="kuro-dark"] .sidebar-user-name {
  color: #F6F2EC !important;
}

[data-theme="dark"] .sidebar-user-sub,
[data-theme="kuro-dark"] .sidebar-user-sub {
  color: #A6ADC8 !important;
}

.app-main-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  min-height: 100vh;
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
  .header-nav-center {
    display: flex !important;
  }
  .mobile-bottom-nav {
    display: none !important;
  }
  .main-content {
    max-width: 1260px !important;
    margin: 0 auto !important;
    padding: 24px 32px 64px !important;
  }
}

/* iPad & Tablet Landscape (Dedicated Breakpoint) */
@media (min-width: 992px) and (max-width: 1279px),
       (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) {
  .header-nav-center {
    display: flex !important;
    gap: 2px !important;
  }
  .mobile-bottom-nav {
    display: none !important;
  }
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 18px 22px 48px !important;
    box-sizing: border-box !important;
  }
}

/* Tablet / iPad (768px – 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .header-nav-center {
    display: flex !important;
    gap: 3px !important;
  }
  .header-nav-pill {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
  }
  .mobile-bottom-nav {
    display: none !important;
  }
  .main-content {
    max-width: 100% !important;
    padding: 20px 24px 54px !important;
  }
}

/* Mobile Phone (< 768px) */
@media (max-width: 767px) {
  .header-nav-center {
    display: none !important;
  }
  .mobile-bottom-nav {
    display: none !important;
  }
  .main-content {
    padding: 14px 14px 36px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 360px) {
  .main-content {
    padding: 12px 10px 32px !important;
  }
}

/* ─── 2. Top Header / Navbar (Warm Cream & Burgundy Accents) ─── */
.site-header {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  height: 68px !important;
  padding: 0 32px !important;
  background: #FAF7F2 !important;
  border-bottom: 1px solid #EAE3D6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

@media (min-width: 1200px) {
  .desktop-only-nav-item {
    display: inline-flex !important;
  }
  .tablet-schedules-item {
    display: none !important;
  }
  .mobile-toggle-btn {
    display: none !important;
  }
}

.header-left-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-brand-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.header-brand-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1.5px solid rgba(126, 29, 42, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-brand-identity:hover .header-brand-avatar {
  transform: scale(1.08);
  border-color: #7E1D2A;
}

.header-brand-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #24181B;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* Center Desktop Navigation Pills */
.header-nav-center {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(234, 227, 214, 0.45);
  padding: 4px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(234, 227, 214, 0.85);
}

.header-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 9999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #5C5250;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.header-nav-pill svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

.header-nav-pill:hover {
  color: #7E1D2A;
  background: rgba(255, 255, 255, 0.8);
}

.header-nav-pill.active {
  background: #7E1D2A !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(126, 29, 42, 0.25);
}

.header-nav-pill.active svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.header-nav-dropdown-wrap {
  position: relative;
}

.header-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(36, 24, 27, 0.12);
  padding: 8px;
  min-width: 210px;
  display: none;
  z-index: 1000;
  flex-direction: column;
  gap: 2px;
}

.header-nav-dropdown-wrap.open .header-dropdown-menu {
  display: flex;
}

.header-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #24181B;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.header-dropdown-item:hover {
  background: #F8F5EE;
  color: #7E1D2A;
}

.header-dropdown-item svg {
  width: 16px;
  height: 16px;
}

.header-dropdown-divider {
  height: 1px;
  background: #EAE3D6;
  margin: 4px 6px;
}

/* Right Header Tools */
.header-right-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-right-tools .header-search-box {
  position: relative;
  width: auto;
}

.header-right-tools .header-search-box input {
  background: #F4EFEA !important;
  border: 1px solid #EAE3D6 !important;
  border-radius: 9999px !important;
  height: 38px !important;
  width: 210px !important;
  font-size: 0.82rem !important;
  color: #24181B !important;
  padding-inline-start: 36px !important;
  padding-inline-end: 14px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.header-right-tools .header-search-box input:focus {
  width: 250px !important;
  background: #FFFFFF !important;
  border-color: #7E1D2A !important;
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.12) !important;
}

.header-right-tools .header-search-box .search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 12px;
  width: 15px;
  height: 15px;
  color: #9C8F8C;
  pointer-events: none;
}

.header-toggle-btn {
  background: #FFFFFF !important;
  border: 1px solid #EAE3D6 !important;
  color: #24181B !important;
  border-radius: 9999px !important;
  height: 36px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.header-toggle-btn:hover {
  border-color: #7E1D2A !important;
  color: #7E1D2A !important;
  background: #FDF7F8 !important;
}

.notifications-bell-btn {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  justify-content: center !important;
}

.notifications-badge {
  position: absolute !important;
  top: -3px !important;
  inset-inline-end: -3px !important;
  background: #7E1D2A !important;
  color: #FFFFFF !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  min-width: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
  text-align: center !important;
  border-radius: 9999px !important;
  border: 1.5px solid #FFFFFF !important;
  padding: 0 3px !important;
}

.header-profile-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #EAE3D6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.header-profile-avatar-btn:hover {
  transform: scale(1.06);
  border-color: #7E1D2A;
}

.header-profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─── 3. Notifications Safe Anchoring (Never goes off-screen in LTR/RTL) ─── */
.notifications-dropdown-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  width: min(380px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 100050 !important;
  border: 1px solid #EAE3D6 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px -8px rgba(36, 24, 27, 0.16) !important;
  background: #FFFFFF !important;
}

html[dir="rtl"] .notifications-dropdown-panel {
  right: 0 !important;
  left: auto !important;
}
html[dir="ltr"] .notifications-dropdown-panel {
  right: 0 !important;
  left: auto !important;
}

@media (max-width: 640px) {
  .notifications-dropdown-panel {
    position: fixed !important;
    top: 68px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ─── 4. Homepage Dashboard Container ─── */
.kuro-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .kuro-dashboard-container {
    gap: 18px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* ─── 5. Hero Study Scene Banner with Dynamic Left Sunlight Greeting ─── */
.kuro-hero-workspace {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #FAF7F2;
  box-shadow: 0 4px 20px rgba(126, 29, 42, 0.06);
  border: 1px solid #EAE3D6;
  margin-bottom: 20px;
}

.kuro-hero-banner {
  position: relative;
  width: 100%;
  height: 155px !important;
  overflow: hidden;
  background-color: #FAF7F2;
  background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAOACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9KQlvqQLK2cYKsvBU15X8XvE1r4F8OanqOsTZ062kM8rKnzhTtBK46nnkV2uh6sywRtsC5XccHO4H196+S/8AgoD4U1PxFpgvRrL2diirDFbRpuyJOH3DIB6DB6ggYr5vEP3Fra7PqcJRlOtyrsfG3xz+HXhrSvEv2bT/ABEuoyXkh1B3S0IitkfDrFu/56becEDHA6mtDxD4a+Gr+Ep9M8O+G7q41yVEWGTe7TSOWUsIx0LEE4ArqZfhLH4qtYNWttZjddM0g2cdtPpMcQuDs2s8rrIzFs87zk59K8F0IrJe6j5heC5iDRW8sB5SXjDc9hz71dOp7OLUO3U9GrQdRxd9nrbS5//Z');
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}

.kuro-hero-bg-img {
  width: 100%;
  height: 100% !important;
  display: block;
  aspect-ratio: unset !important;
  object-fit: cover !important;
  object-position: 72% center !important;
}

/* Smooth Soft Sunlight Vignette Behind Greeting */
.kuro-hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 247, 242, 0.95) 0%, rgba(250, 247, 242, 0.82) 34%, rgba(250, 247, 242, 0.3) 54%, rgba(250, 247, 242, 0) 72%);
  z-index: 2;
}

html[dir="rtl"] .kuro-hero-vignette {
  background: linear-gradient(90deg, rgba(250, 247, 242, 0.95) 0%, rgba(250, 247, 242, 0.82) 34%, rgba(250, 247, 242, 0.3) 54%, rgba(250, 247, 242, 0) 72%);
}

/* Dynamic Greeting Strictly Over Left Bright Area */
.kuro-hero-greeting-overlay {
  position: absolute;
  left: 4.5% !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(260px, 42%, 460px);
  z-index: 5;
  pointer-events: none;
}

html[dir="rtl"] .kuro-hero-greeting-overlay {
  left: 4.5% !important;
  right: auto !important;
  text-align: right;
}

html[dir="ltr"] .kuro-hero-greeting-overlay {
  left: 4.5% !important;
  right: auto !important;
  text-align: left;
}

.kuro-hero-greeting-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #521019;
  line-height: 1.2;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.kuro-hero-greeting-sub {
  font-size: 0.86rem;
  color: #6E2A34;
  font-weight: 550;
  line-height: 1.3;
  margin: 0 0 10px;
}

.kuro-hero-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(126, 29, 42, 0.16);
  color: #7E1D2A;
  font-size: 0.78rem;
  font-weight: 700;
}

.kuro-hero-date-icon {
  width: 13px;
  height: 13px;
  color: #7E1D2A;
}

.kuro-hero-date-full {
  display: inline;
}

.kuro-hero-date-short {
  display: none;
}

/* ─── 6. Today's Lectures Schedule Section ─── */
.kuro-schedule-section {
  display: flex;
  flex-direction: column;
}

.kuro-schedule-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.kuro-tabs-segmented {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kuro-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.86rem;
  font-weight: 600;
  border: 1px solid #EAE3D6;
  background: #FFFFFF;
  color: #24181B;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.kuro-tab-pill:hover {
  background: #FAF7F2;
  border-color: #7E1D2A;
}

.kuro-tab-pill.active {
  background: #7E1D2A !important;
  color: #FFFFFF !important;
  border-color: #7E1D2A !important;
  box-shadow: 0 2px 8px rgba(126, 29, 42, 0.22);
}

.kuro-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-block;
}

.kuro-schedule-right-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.kuro-schedule-date-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #756966;
}

.kuro-schedule-date-hint svg {
  width: 15px;
  height: 15px;
  color: #7E1D2A;
}

.kuro-weekly-schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: #7E1D2A;
  color: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
}

.kuro-weekly-schedule-btn:hover {
  background: #681320;
  transform: translateY(-1px);
}

.kuro-weekly-schedule-btn svg {
  width: 14px;
  height: 14px;
}

.kuro-schedule-card {
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(36, 24, 27, 0.03);
  overflow: hidden;
}

.kuro-schedule-pane {
  display: flex;
  flex-direction: column;
}

.kuro-lecture-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px 100px 36px;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #F5EFEB;
  cursor: pointer;
  transition: background 0.15s ease;
}

.kuro-lecture-row:last-child {
  border-bottom: none;
}

.kuro-lecture-row:hover {
  background: #FAF7F2;
}

.kuro-lecture-row:active {
  transform: scale(0.995);
}

.klr-time-col {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 550;
  color: #24181B;
}

.klr-time-col svg {
  width: 15px;
  height: 15px;
  color: #756966;
}

.klr-subject-col {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.klr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.klr-code-badge {
  background: #F5EFEB;
  color: #7E1D2A;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.klr-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #24181B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klr-hall-col {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  color: #756966;
}

.klr-hall-col svg {
  width: 14px;
  height: 14px;
  color: #9C8F8C;
}

.klr-status-col {
  display: flex;
  justify-content: flex-end;
}

.klr-status-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
}

.klr-status-pill.live {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.klr-status-pill.upcoming {
  background: rgba(126, 29, 42, 0.08);
  color: #7E1D2A;
}

.klr-status-pill.completed {
  background: #F4EFEA;
  color: #756966;
}

.klr-arrow-col {
  display: flex;
  justify-content: flex-end;
  color: #9C8F8C;
}

.klr-arrow-col svg {
  width: 16px;
  height: 16px;
}

.kuro-lecture-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px;
  color: #756966;
  font-size: 0.88rem;
}

.kuro-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7E1D2A;
  font-weight: 700;
  text-decoration: none;
  margin-inline-start: 10px;
}

/* ─── 6b. Today & Tomorrow Split Schedule Section ─── */
.kuro-schedule-split-section {
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  margin-bottom: 22px;
}

.kuro-schedule-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.kuro-split-card {
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(36, 24, 27, 0.03);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 220px;
}

.kuro-split-card:hover {
  border-color: #D6C7B8;
  box-shadow: 0 4px 14px rgba(36, 24, 27, 0.05);
}

.kuro-split-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F5EFEB;
}

.kuro-split-card-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kuro-split-card-title {
  font-size: 1.05rem;
  font-weight: 750;
  color: #24181B;
  margin: 0;
  line-height: 1.25;
}

.kuro-split-card-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: #756966;
}

.kuro-view-full-schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #7E1D2A;
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.kuro-view-full-schedule-btn:hover {
  background: #681320;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(126, 29, 42, 0.22);
}

.kuro-view-full-schedule-btn:active {
  transform: scale(0.98);
}

.kuro-view-full-schedule-btn svg {
  width: 14px;
  height: 14px;
}

.kuro-split-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.kuro-mini-lecture-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kuro-schedule-row-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FAF7F2;
  border: 1px solid #EFE8E0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.kuro-schedule-row-card:hover {
  background: #F5EFEB;
  border-color: #E2D7CD;
  transform: translateY(-1px);
}

.kuro-schedule-row-card:active {
  transform: scale(0.99);
}

.ksrc-accent-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 3.5px;
  background: #7E1D2A;
}

.ksrc-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline-start: 4px;
}

.ksrc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #756966;
}

.ksrc-time {
  color: #7E1D2A;
  font-weight: 700;
}

.ksrc-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ksrc-location svg {
  width: 12px;
  height: 12px;
  color: #9C8F8C;
}

.ksrc-subject {
  font-size: 0.92rem;
  font-weight: 700;
  color: #24181B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ksrc-arrow {
  display: flex;
  align-items: center;
  color: #9C8F8C;
  flex-shrink: 0;
}

.ksrc-arrow svg {
  width: 16px;
  height: 16px;
}

.kuro-empty-day-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 16px;
  background: #FAF7F2;
  border-radius: 12px;
  border: 1px dashed #E5DBD0;
  flex: 1;
}

.keds-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  display: inline-block;
}

.keds-title {
  font-size: 0.98rem;
  font-weight: 750;
  color: #24181B;
  margin: 0 0 4px;
}

.keds-desc {
  font-size: 0.8125rem;
  color: #756966;
  margin: 0;
}

/* ─── 6c. Continue Studying Section (3-Card Activity Grid) ─── */
.continue-studying-section {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 36px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.continue-studying-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.continue-studying-header .kuro-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 750;
  color: #24181B;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.continue-studying-header .kuro-section-title svg {
  width: 20px;
  height: 20px;
  color: #7E1D2A;
  flex-shrink: 0;
}

.kuro-continue-studying-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.continue-study-card {
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(36, 24, 27, 0.03);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
  min-height: 195px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.continue-study-card:hover {
  border-color: #D6C7B8;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(36, 24, 27, 0.06);
}

.continue-card-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.continue-tag-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(126, 29, 42, 0.08);
  color: #7E1D2A;
  border: 1px solid rgba(126, 29, 42, 0.14);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.continue-tag-badge span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.continue-tag-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.continue-tag-badge.recording {
  background: rgba(124, 58, 237, 0.08);
  color: #7C3AED;
  border-color: rgba(124, 58, 237, 0.16);
}

.continue-tag-badge.questions {
  background: rgba(217, 119, 6, 0.09);
  color: #B45309;
  border-color: rgba(217, 119, 6, 0.18);
}

.continue-tag-badge.questions.completed-badge {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .continue-tag-badge.questions.completed-badge {
  background: rgba(16, 185, 129, 0.18);
  color: #34D399;
  border-color: rgba(16, 185, 129, 0.32);
}

.continue-card-title {
  font-size: 1.02rem;
  font-weight: 750;
  color: #24181B;
  margin: 4px 0 2px;
  line-height: 1.38;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  flex-shrink: 0;
}

.continue-card-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.38;
}

.continue-card-subject {
  font-size: 0.8125rem;
  color: #756966;
  margin: 0;
  line-height: 1.4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.continue-card-meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9C8F8C;
  margin-top: 2px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.continue-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.continue-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 650;
  color: #756966;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.continue-progress-track {
  width: 100%;
  max-width: 100%;
  height: 6px;
  background: #EFE8E0;
  border-radius: 9999px;
  overflow: hidden;
  box-sizing: border-box;
}

.continue-progress-fill {
  height: 100%;
  background: #7E1D2A;
  border-radius: 9999px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.continue-progress-fill.completed-fill {
  background: #10B981;
}

.continue-empty-hint {
  font-size: 0.76rem;
  color: #9C8F8C;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continue-card-bottom {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.continue-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: 10px;
  background: #7E1D2A;
  color: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.continue-action-btn:hover {
  background: #681320;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(126, 29, 42, 0.22);
}

.continue-action-btn:active {
  transform: scale(0.98);
}

.continue-action-btn.secondary {
  background: #FAF7F2;
  color: #24181B;
  border: 1px solid #EAE3D6;
}

.continue-action-btn.secondary:hover {
  background: #F3ECE2;
  border-color: #D6C7B8;
  color: #7E1D2A;
}

.continue-action-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.continue-action-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Responsive queries */
@media (max-width: 991px) {
  .kuro-continue-studying-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .kuro-schedule-split-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .continue-studying-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 8px;
    margin-bottom: 28px;
  }

  .kuro-continue-studying-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .kuro-split-card {
    padding: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .continue-study-card {
    padding: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  .continue-action-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
  }
}

/* Extra small mobile screens (<= 390px, e.g. 320px, 360px, 375px) */
@media (max-width: 390px) {
  .continue-study-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .continue-card-title {
    font-size: 0.96rem !important;
  }

  .continue-action-btn {
    padding: 9px 12px !important;
    font-size: 0.8125rem !important;
    gap: 6px !important;
  }
}

/* ─── 7. Quick Access Section (4 Tiles) ─── */
.kuro-qa-section {
  display: flex;
  flex-direction: column;
}

.kuro-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.kuro-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kuro-section-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(126, 29, 42, 0.08);
  color: #7E1D2A;
}

.kuro-section-emblem svg {
  width: 17px;
  height: 17px;
}

.kuro-section-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #24181B;
  margin: 0;
}

.kuro-section-count {
  font-size: 0.84rem;
  color: #756966;
  margin-inline-start: 6px;
}

.kuro-view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7E1D2A;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.kuro-view-all-link:hover {
  text-decoration: underline;
}

.kuro-view-all-link svg {
  width: 14px;
  height: 14px;
}

.kuro-qa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.kuro-qa-tile {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  border-radius: 16px;
  padding: 20px 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(36, 24, 27, 0.02);
  overflow: hidden;
}

.kuro-qa-tile:hover {
  transform: translateY(-3px);
  border-color: #7E1D2A;
  box-shadow: 0 8px 24px rgba(126, 29, 42, 0.08);
}

.kuro-qa-tile:active {
  transform: scale(0.98);
}

.kuro-qa-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #7E1D2A;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(126, 29, 42, 0.2);
  z-index: 2;
}

.kuro-qa-icon-box svg {
  width: 22px;
  height: 22px;
}

.kuro-qa-content {
  z-index: 2;
}

.kuro-qa-title {
  font-size: 0.98rem;
  font-weight: 750;
  color: #24181B;
  margin: 0 0 4px;
}

.kuro-qa-subtitle {
  font-size: 0.8rem;
  color: #756966;
  margin: 0;
}

.kuro-qa-arrow {
  position: absolute;
  bottom: 18px;
  inset-inline-end: 18px;
  width: 16px;
  height: 16px;
  color: #9C8F8C;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.kuro-qa-tile:hover .kuro-qa-arrow {
  color: #7E1D2A;
  transform: translateX(3px);
}

/* ─── 8. Your Subjects Section (3-Column Desktop Grid) ─── */
.kuro-subjects-section-header {
  margin-top: 6px;
}

.kuro-subjects-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kuro-subjects-search-box {
  position: relative;
}

.kuro-subjects-search-box input {
  background: #FFFFFF !important;
  border: 1px solid #EAE3D6 !important;
  border-radius: 9999px !important;
  height: 38px !important;
  width: 220px !important;
  font-size: 0.84rem !important;
  color: #24181B !important;
  padding-inline-start: 36px !important;
  padding-inline-end: 14px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.kuro-subjects-search-box input:focus {
  border-color: #7E1D2A !important;
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.1) !important;
  width: 250px !important;
}

.kuro-search-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 12px;
  width: 15px;
  height: 15px;
  color: #9C8F8C;
  pointer-events: none;
}

.kuro-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  color: #24181B;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.kuro-filter-pill:hover {
  border-color: #7E1D2A;
  color: #7E1D2A;
}

.kuro-filter-pill svg {
  width: 14px;
  height: 14px;
}

.kuro-subjects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.kuro-subject-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  border-radius: 16px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(36, 24, 27, 0.02);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kuro-subject-card:hover {
  transform: translateY(-3px);
  border-color: #7E1D2A;
  box-shadow: 0 10px 28px rgba(126, 29, 42, 0.08);
}

.kuro-subject-card:active {
  transform: scale(0.985);
}

.ksc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  z-index: 2;
}

.ksc-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ksc-icon-box svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.2;
}

.ksc-code-badge {
  background: #F5EFEB;
  color: #756966;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
}

.ksc-body {
  flex: 1;
  margin-bottom: 16px;
  z-index: 2;
}

.ksc-title-primary {
  font-size: 1.05rem;
  font-weight: 750;
  color: #24181B;
  margin: 0 0 3px;
  line-height: 1.35;
}

.ksc-title-secondary {
  font-size: 0.84rem;
  color: #756966;
  font-weight: 500;
  margin: 0;
  line-height: 1.35;
}

.ksc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #F5EFEB;
  z-index: 2;
}

.ksc-sheet-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #756966;
  font-weight: 600;
}

.ksc-sheet-count svg {
  width: 14px;
  height: 14px;
  color: #9C8F8C;
}

.ksc-arrow-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9C8F8C;
  transition: all 0.18s ease;
}

.ksc-arrow-btn svg {
  width: 16px;
  height: 16px;
}

.kuro-subject-card:hover .ksc-arrow-btn {
  color: #7E1D2A;
  transform: translateX(2px);
}

/* ─── 9. Botanical Leaf Corner Watermark ─── */
.kuro-card-leaf-watermark {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 64px;
  height: 64px;
  background-image: url('../assets/icons/leaf-branch.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}
/* ─── 10. Master Responsive Navigation & Device-Tuned Layouts ─── */

/* ── Fixed Mobile Bottom Navigation Bar (Phones only: < 768px) ── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid #EAE3D6;
  box-shadow: 0 -4px 20px rgba(126, 29, 42, 0.06);
  display: none;
  align-items: center;
  justify-content: space-around;
  z-index: 990;
  box-sizing: border-box;
}

[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(26, 27, 38, 0.94);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}

.mobile-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 54px;
  height: 48px;
  padding: 4px 6px;
  border-radius: 12px;
  color: #756966;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .mobile-bottom-nav-item {
  color: #94A3B8;
}

.mobile-bottom-nav-item svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.1;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-bottom-nav-item .mobile-nav-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.mobile-bottom-nav-item:active {
  transform: scale(0.92);
}

.mobile-bottom-nav-item.active {
  color: #7E1D2A !important;
}

[data-theme="dark"] .mobile-bottom-nav-item.active {
  color: #FDA4AF !important;
}

.mobile-bottom-nav-item.active svg {
  transform: translateY(-1px) scale(1.08);
}

.mobile-bottom-nav-item.active .mobile-nav-label {
  font-weight: 800;
}

/* ── Mobile More Bottom Sheet / Drawer ── */
.mobile-more-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 14, 15, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
}

.mobile-more-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-more-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #FAF7F2;
  border-top: 1px solid #EAE3D6;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  z-index: 1001;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

[data-theme="dark"] .mobile-more-sheet {
  background: #181926;
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}

.mobile-more-backdrop.open .mobile-more-sheet,
.mobile-more-sheet.open {
  transform: translateY(0);
}

.mobile-more-handle-bar {
  display: flex;
  justify-content: center;
  padding: 12px 0 6px;
}

.mobile-more-handle {
  width: 38px;
  height: 4.5px;
  border-radius: 9999px;
  background: #D8CEBE;
}

[data-theme="dark"] .mobile-more-handle {
  background: #3B3C4E;
}

.mobile-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 14px;
  border-bottom: 1px solid #EAE3D6;
  margin-bottom: 14px;
}

[data-theme="dark"] .mobile-more-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.mobile-more-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-more-avatar {
  border-radius: 50%;
  background: #FDF1F2;
  border: 1.5px solid #7E1D2A;
}

.mobile-more-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #24181B;
  margin: 0;
}

[data-theme="dark"] .mobile-more-title {
  color: #F8FAFC;
}

.mobile-more-sub {
  font-size: 0.72rem;
  color: #756966;
  font-weight: 550;
}

[data-theme="dark"] .mobile-more-sub {
  color: #94A3B8;
}

.mobile-more-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(234, 227, 214, 0.6);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5C5250;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .mobile-more-close {
  background: rgba(255, 255, 255, 0.08);
  color: #F8FAFC;
}

/* Quick Settings Row inside More Sheet */
.mobile-more-quick-settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.mob-quick-setting-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  color: #5C5250;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .mob-quick-setting-btn {
  background: #202232;
  border-color: rgba(255, 255, 255, 0.08);
  color: #E2E8F0;
}

.mob-quick-setting-btn:active {
  transform: scale(0.96);
  background: #F4EFEA;
}

.mob-quick-setting-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  color: #7E1D2A;
}

[data-theme="dark"] .mob-quick-setting-btn svg {
  color: #FDA4AF;
}

/* More Groups & Link Cards */
.mobile-more-group {
  margin-bottom: 18px;
}

.mobile-more-group-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #8A7B78;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 4px 8px;
}

[data-theme="dark"] .mobile-more-group-title {
  color: #94A3B8;
}

.mobile-more-links-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-more-card-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #FFFFFF;
  border: 1px solid #EAE3D6;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

[data-theme="dark"] .mobile-more-card-link {
  background: #202232;
  border-color: rgba(255, 255, 255, 0.08);
}

.mobile-more-card-link:active {
  transform: scale(0.98);
  background: #FDF9F5;
  border-color: #7E1D2A;
}

.mobile-more-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-more-card-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.1;
}

.mobile-more-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mobile-more-card-name {
  font-size: 0.88rem;
  font-weight: 750;
  color: #24181B;
  line-height: 1.25;
}

[data-theme="dark"] .mobile-more-card-name {
  color: #F8FAFC;
}

.mobile-more-card-desc {
  font-size: 0.72rem;
  color: #756966;
  font-weight: 500;
  margin-top: 2px;
}

[data-theme="dark"] .mobile-more-card-desc {
  color: #94A3B8;
}

.mobile-more-card-arrow {
  width: 16px;
  height: 16px;
  color: #B5A8A0;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   DEVICE-SPECIFIC VIEWPORT TUNING
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. iPad & Tablet LANDSCAPE (Dedicated Tablet Landscape Layout) ─── */
@media (min-width: 992px) and (max-width: 1279px),
       (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) {
  .site-header {
    height: 62px !important;
    padding: 0 18px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  /* Priority 1: Brand */
  .header-left-group {
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .header-brand-avatar {
    width: 32px !important;
    height: 32px !important;
  }

  .header-brand-name {
    font-size: 0.94rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  /* Priority 2: Center Navigation (Home, Sheets, Recordings, Questions, Schedules, More) */
  .header-nav-center {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 3px 5px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .header-nav-pill {
    padding: 5px 9px !important;
    font-size: 0.77rem !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .header-nav-pill svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Schedules is VISIBLE in center nav on iPad Landscape */
  .desktop-only-nav-item {
    display: inline-flex !important;
  }

  .tablet-schedules-item {
    display: none !important;
  }

  /* Priority 3: Right Tools (Search, Notifications, Profile) */
  .header-right-tools {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .header-right-tools .header-search-box {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .header-right-tools .header-search-box input {
    width: clamp(88px, 11vw, 130px) !important;
    height: 34px !important;
    font-size: 0.76rem !important;
    padding-inline-start: 28px !important;
    padding-inline-end: 8px !important;
  }

  .header-right-tools .header-search-box input:focus {
    width: clamp(110px, 14vw, 155px) !important;
  }

  .header-right-tools .header-search-box .search-icon {
    width: 13px !important;
    height: 13px !important;
    inset-inline-start: 9px !important;
  }

  .notifications-bell-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .header-profile-avatar-btn {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }

  .header-profile-avatar-btn img {
    width: 34px !important;
    height: 34px !important;
  }

  /* Secondary clutter hidden from top bar on iPad Landscape */
  .mobile-toggle-btn,
  #lang-toggle-btn,
  #theme-toggle-btn,
  #sound-toggle-btn,
  #header-auth-action-box {
    display: none !important;
  }

  /* Tablet Landscape Grids: 3 Columns */
  .kuro-qa-grid,
  .kuro-subjects-grid,
  .schedules-cards-grid,
  .audio-recordings-grid,
  .questions-subject-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .kuro-hero-workspace {
    border-radius: 16px;
    margin-bottom: 16px;
  }

  .kuro-hero-banner {
    height: 140px !important;
    aspect-ratio: unset !important;
  }

  .kuro-hero-bg-img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: 72% center !important;
  }

  .kuro-hero-greeting-overlay {
    width: 50% !important;
    left: 4% !important;
  }

  .kuro-hero-greeting-title {
    font-size: 1.25rem !important;
    margin: 0 0 3px !important;
    line-height: 1.2 !important;
  }

  .kuro-hero-greeting-sub {
    font-size: 0.80rem !important;
    margin: 0 0 8px !important;
    line-height: 1.25 !important;
  }

  .kuro-hero-date-chip {
    padding: 3px 10px !important;
    font-size: 0.74rem !important;
  }

  .kuro-lecture-row {
    grid-template-columns: 110px 1fr 100px 80px 24px !important;
    padding: 14px 18px !important;
  }
}

/* ─── 2. iPad & Tablet PORTRAIT (768px – 991px / Portrait up to 1024px) ─── */
@media (min-width: 768px) and (max-width: 991px),
       (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
       (min-width: 768px) and (max-width: 1199px) {
  .site-header {
    height: 62px !important;
    padding: 0 16px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* On iPad, hide secondary toggles from header (accessible via profile or drawer) to avoid any horizontal overflow */
  .mobile-toggle-btn,
  #lang-toggle-btn,
  #theme-toggle-btn,
  #sound-toggle-btn,
  #header-auth-action-box {
    display: none !important;
  }

  /* Tablet: Schedules hidden from center pills, exposed inside More dropdown */
  .desktop-only-nav-item {
    display: none !important;
  }

  .tablet-schedules-item {
    display: flex !important;
  }

  .header-left-group {
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .header-brand-name {
    font-size: 0.92rem !important;
    white-space: nowrap !important;
  }

  .header-nav-center {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 3px 5px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .header-nav-pill {
    padding: 6px 9px !important;
    font-size: 0.77rem !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .header-nav-pill svg {
    width: 13px !important;
    height: 13px !important;
  }

  .header-right-tools {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .header-right-tools .header-search-box {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .header-right-tools .header-search-box input {
    width: clamp(80px, 11vw, 125px) !important;
    height: 34px !important;
    font-size: 0.76rem !important;
    padding-inline-start: 28px !important;
    padding-inline-end: 8px !important;
  }

  .header-right-tools .header-search-box input:focus {
    width: clamp(100px, 14vw, 145px) !important;
  }

  .header-right-tools .header-search-box .search-icon {
    width: 13px !important;
    height: 13px !important;
    inset-inline-start: 9px !important;
  }

  .kuro-hero-workspace {
    border-radius: 16px;
    margin-bottom: 18px;
  }

  .kuro-hero-banner {
    height: 145px !important;
    aspect-ratio: unset !important;
  }

  .kuro-hero-bg-img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: 72% center !important;
  }

  .kuro-hero-greeting-overlay {
    width: 52% !important;
    left: 4.5% !important;
  }

  .kuro-hero-greeting-title {
    font-size: 1.25rem !important;
    margin: 0 0 3px !important;
    line-height: 1.2 !important;
  }

  .kuro-hero-greeting-sub {
    font-size: 0.80rem !important;
    margin: 0 0 8px !important;
    line-height: 1.25 !important;
  }

  .kuro-hero-date-chip {
    padding: 3px 10px !important;
    font-size: 0.74rem !important;
  }

  .kuro-qa-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .kuro-subjects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .kuro-lecture-row {
    grid-template-columns: 110px 1fr 100px 80px 24px !important;
    padding: 14px 18px !important;
  }
}

/* ─── 2. Mobile Phone (< 768px) ─── */
@media (max-width: 767px) {
  /* Cleaner Compact Mobile Header */
  .site-header {
    height: 56px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .header-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .header-brand-identity {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Hamburger Menu Button Visible & Interactive */
  .mobile-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    border: 1px solid #EAE3D6 !important;
    background: #FFFFFF !important;
    color: #24181B !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  .mobile-toggle-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .header-brand-avatar {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }

  .header-brand-avatar img {
    width: 28px !important;
    height: 28px !important;
  }

  .header-brand-name {
    font-size: 0.88rem !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 1 !important;
  }

  /* Hide Desktop Center Nav and Clutter on Mobile Phone */
  .header-nav-center,
  .desktop-only-nav-item,
  #lang-toggle-btn,
  #theme-toggle-btn,
  #sound-toggle-btn,
  #header-auth-action-box {
    display: none !important;
  }

  .header-right-tools {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  .header-right-tools .header-search-box {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .header-right-tools .header-search-box input {
    width: clamp(65px, 18vw, 100px) !important;
    height: 32px !important;
    font-size: 0.74rem !important;
    padding-inline-start: 28px !important;
    padding-inline-end: 6px !important;
  }

  .header-right-tools .header-search-box input:focus {
    width: clamp(85px, 24vw, 120px) !important;
  }

  .header-right-tools .header-search-box .search-icon {
    width: 13px !important;
    height: 13px !important;
    inset-inline-start: 9px !important;
  }

  .notifications-bell-btn {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  .header-profile-avatar-btn {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }

  .header-profile-avatar-btn img {
    width: 32px !important;
    height: 32px !important;
  }

  /* ZERO Bottom Nav on Mobile Phone */
  .mobile-bottom-nav {
    display: none !important;
  }

  /* Mobile Content Padding: No Bottom Nav Offset */
  .main-content {
    padding: 14px 14px 36px !important;
  }

  /* Dedicated Mobile Hero Composition (125px) */
  .kuro-hero-workspace {
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 3px 14px rgba(126, 29, 42, 0.05) !important;
  }

  .kuro-hero-banner {
    height: 125px !important;
    aspect-ratio: unset !important;
  }

  .kuro-hero-bg-img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: 80% center !important;
  }

  .kuro-hero-vignette {
    background: linear-gradient(90deg, rgba(250, 247, 242, 0.96) 0%, rgba(250, 247, 242, 0.86) 42%, rgba(250, 247, 242, 0.25) 65%, rgba(250, 247, 242, 0) 82%) !important;
  }

  html[dir="rtl"] .kuro-hero-vignette {
    background: linear-gradient(90deg, rgba(250, 247, 242, 0.96) 0%, rgba(250, 247, 242, 0.86) 42%, rgba(250, 247, 242, 0.25) 65%, rgba(250, 247, 242, 0) 82%) !important;
  }

  .kuro-hero-greeting-overlay {
    width: min(230px, 64%) !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  html[dir="rtl"] .kuro-hero-greeting-overlay {
    left: 12px !important;
    right: auto !important;
    text-align: right;
  }

  html[dir="ltr"] .kuro-hero-greeting-overlay {
    left: 12px !important;
    right: auto !important;
    text-align: left;
  }

  .kuro-hero-greeting-title {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    margin: 0 0 2px !important;
  }

  .kuro-hero-greeting-sub {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .kuro-hero-date-chip {
    font-size: 0.70rem !important;
    padding: 3px 9px !important;
    gap: 5px !important;
  }

  .kuro-hero-date-chip svg {
    width: 12px !important;
    height: 12px !important;
  }

  .kuro-hero-date-full {
    display: none !important;
  }

  .kuro-hero-date-short {
    display: inline !important;
  }

  /* Today / Tomorrow Schedule on Mobile */
  .kuro-schedule-section {
    margin-bottom: 18px !important;
  }

  .kuro-schedule-controls-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .kuro-tabs-segmented {
    width: 100% !important;
    display: flex !important;
    gap: 4px !important;
  }

  .kuro-tab-pill {
    flex: 1 !important;
    justify-content: center !important;
    padding: 7px 10px !important;
    font-size: 0.78rem !important;
  }

  .kuro-schedule-right-group {
    justify-content: space-between !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .kuro-schedule-date-hint {
    font-size: 0.72rem !important;
  }

  .kuro-weekly-schedule-btn {
    padding: 5px 10px !important;
    font-size: 0.74rem !important;
  }

  /* Vertical Class Cards Layout for Mobile (0 Overflow) */
  .kuro-lecture-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "time status"
      "subject subject"
      "hall arrow" !important;
    gap: 6px 10px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid #F0EAE1 !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
  }

  .klr-time-col {
    grid-area: time;
    display: flex !important;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem !important;
    font-weight: 700;
    color: #8A7B78;
  }

  .klr-time-col svg {
    width: 13px !important;
    height: 13px !important;
  }

  .klr-status-col {
    grid-area: status;
    justify-self: end;
    display: flex !important;
  }

  .klr-status-pill {
    font-size: 0.68rem !important;
    padding: 2px 8px !important;
  }

  .klr-subject-col {
    grid-area: subject;
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .klr-dot {
    width: 7px !important;
    height: 7px !important;
  }

  .klr-code-badge {
    font-size: 0.68rem !important;
    padding: 1px 6px !important;
  }

  .klr-title {
    font-size: 0.9rem !important;
    font-weight: 750 !important;
  }

  .klr-hall-col {
    grid-area: hall;
    display: flex !important;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem !important;
    color: #8A7B78;
  }

  .klr-hall-col svg {
    width: 12px !important;
    height: 12px !important;
  }

  .klr-arrow-col {
    grid-area: arrow;
    justify-self: end;
    align-self: center;
  }

  /* Quick Access 2 × 2 Grid on Mobile */
  .kuro-qa-section {
    margin-bottom: 20px !important;
  }

  .kuro-qa-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .kuro-qa-tile {
    padding: 12px 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-height: 104px !important;
    border-radius: 14px !important;
  }

  .kuro-qa-icon-box {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 6px !important;
    border-radius: 9px !important;
  }

  .kuro-qa-icon-box svg {
    width: 18px !important;
    height: 18px !important;
  }

  .kuro-qa-title {
    font-size: 0.85rem !important;
    margin: 0 0 2px !important;
    line-height: 1.25 !important;
  }

  .kuro-qa-subtitle {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }

  .kuro-qa-arrow {
    display: none !important;
  }

  /* Clean Vertical 1-Column List for Subjects on Mobile */
  .kuro-subjects-section-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .kuro-subjects-controls {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  .kuro-subjects-search-box {
    flex: 1 !important;
  }

  .kuro-subjects-search-box input {
    width: 100% !important;
    height: 38px !important;
    font-size: 0.8rem !important;
  }

  .kuro-filter-pill {
    padding: 0 12px !important;
    height: 38px !important;
  }

  .kuro-subjects-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .kuro-subject-card {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "icon body arrow"
      "icon footer arrow" !important;
    align-items: center !important;
    gap: 2px 12px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    min-height: 68px !important;
  }

  .ksc-top {
    grid-area: icon;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
  }

  .ksc-icon-box {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .ksc-icon-box svg {
    width: 20px !important;
    height: 20px !important;
  }

  .ksc-code-badge {
    font-size: 0.62rem !important;
    padding: 1px 5px !important;
  }

  .ksc-body {
    grid-area: body;
    min-width: 0;
  }

  .ksc-title-primary {
    font-size: 0.94rem !important;
    margin: 0 0 2px !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ksc-title-secondary {
    font-size: 0.77rem !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ksc-footer {
    grid-area: footer;
    display: flex !important;
    align-items: center !important;
    margin-top: 2px !important;
    padding-top: 0 !important;
    border-top: none !important;
  }

  .ksc-sheet-count {
    font-size: 0.72rem !important;
    padding: 2px 7px !important;
  }

  .ksc-arrow-btn {
    grid-area: arrow;
    align-self: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACADEMIC SCHEDULES HUB & SUB-PAGE POLISH
   Visual Reference: Warm Ivory, Deep Burgundy, Linear/Raycast-Grade Finish
   ══════════════════════════════════════════════════════════════════════════ */

.schedules-top-back-bar {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.schedules-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(44, 24, 20, 0.04);
  border-radius: 9999px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.schedules-back-link:hover {
  background: var(--bg-hover);
  color: var(--brand-burgundy, #6B1D2F);
  border-color: var(--border-hover);
  transform: translateX(-2px);
}

[dir="rtl"] .schedules-back-link:hover {
  transform: translateX(2px);
}

.schedules-back-link:active {
  transform: scale(0.97);
}

.schedules-back-link svg {
  width: 16px;
  height: 16px;
}

.schedules-hub-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 4px 40px;
}

/* ══════════════════════════════════════════════════════════════════════════
   1. PANORAMIC TOP BANNER (Academic Schedules Hero)
   ══════════════════════════════════════════════════════════════════════════ */
.schedules-hub-hero {
  width: 100%;
}

.schedules-hero-card {
  position: relative;
  width: 100%;
  min-height: 220px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-subtle, rgba(44, 24, 20, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 30px rgba(44, 24, 20, 0.07);
  display: flex;
  align-items: center;
  background: #1C1315;
}

.schedules-hero-bg-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  filter: brightness(0.85);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="rtl"] .schedules-hero-bg-artwork {
  background-position: center left;
}

.schedules-hero-card:hover .schedules-hero-bg-artwork {
  transform: scale(1.02);
}

.schedules-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28, 17, 20, 0.94) 0%, rgba(28, 17, 20, 0.82) 48%, rgba(28, 17, 20, 0.30) 100%);
  z-index: 1;
  pointer-events: none;
}

[dir="rtl"] .schedules-hero-overlay {
  background: linear-gradient(270deg, rgba(28, 17, 20, 0.94) 0%, rgba(28, 17, 20, 0.82) 48%, rgba(28, 17, 20, 0.30) 100%);
}

.schedules-hero-content {
  position: relative;
  z-index: 2;
  padding: 34px 40px;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.schedules-hero-badge-wrap {
  margin-bottom: 12px;
}

.schedules-hero-badge-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #FCA5A5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.schedules-hero-title {
  font-size: 2rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
  letter-spacing: -0.015em;
  line-height: 1.22;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.schedules-hero-subtitle {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 6px 0;
  line-height: 1.45;
  font-weight: 600;
}

.schedules-hero-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.5;
  font-weight: 450;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. THREE DISTINCT SCHEDULE CARDS GRID
   ══════════════════════════════════════════════════════════════════════════ */
.schedules-hub-grid-section {
  width: 100%;
}

.schedules-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.sched-card {
  position: relative;
  background: var(--bg-card, var(--bg-surface, #FFFFFF));
  border: 1px solid var(--border-card, var(--border-subtle, rgba(44, 24, 20, 0.08)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 20px rgba(44, 24, 20, 0.04);
  border-radius: 20px;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 290px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .sched-card,
[data-theme="kuro-dark"] .sched-card {
  background: #1C1517;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px rgba(0, 0, 0, 0.35);
}

.sched-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 16px 36px rgba(44, 24, 20, 0.09);
}

.sched-card:active {
  transform: scale(0.985);
}

/* Category Specific Hover Borders */
.sched-card-theory:hover {
  border-color: rgba(126, 29, 42, 0.32);
}

.sched-card-clinical:hover {
  border-color: rgba(5, 150, 105, 0.32);
}

.sched-card-exams:hover {
  border-color: rgba(217, 119, 6, 0.32);
}

/* Card Main Area */
.sched-card-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  z-index: 2;
  position: relative;
}

/* Card Header */
.sched-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.sched-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sched-card:hover .sched-card-icon-box {
  transform: scale(1.06);
}

.sched-card-icon-box svg {
  width: 20px;
  height: 20px;
}

.icon-theory {
  background: rgba(126, 29, 42, 0.08);
  color: var(--brand-burgundy, #7E1D2A);
  border: 1px solid rgba(126, 29, 42, 0.18);
}

.icon-clinical {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.18);
}

.icon-exams {
  background: rgba(217, 119, 6, 0.08);
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.18);
}

[data-theme="dark"] .icon-theory,
[data-theme="kuro-dark"] .icon-theory {
  background: rgba(126, 29, 42, 0.22);
  color: #FCA5A5;
  border-color: rgba(252, 165, 165, 0.25);
}

[data-theme="dark"] .icon-clinical,
[data-theme="kuro-dark"] .icon-clinical {
  background: rgba(5, 150, 105, 0.22);
  color: #6EE7B7;
  border-color: rgba(110, 231, 183, 0.25);
}

[data-theme="dark"] .icon-exams,
[data-theme="kuro-dark"] .icon-exams {
  background: rgba(217, 119, 6, 0.22);
  color: #FCD34D;
  border-color: rgba(252, 211, 77, 0.25);
}

.sched-card-title-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.sched-card-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.sched-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  width: fit-content;
}

.pill-burgundy {
  background: rgba(126, 29, 42, 0.08);
  color: var(--brand-burgundy, #7E1D2A);
  border: 1px solid rgba(126, 29, 42, 0.18);
}

.pill-emerald {
  background: rgba(5, 150, 105, 0.08);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.18);
}

.pill-amber {
  background: rgba(217, 119, 6, 0.08);
  color: #B45309;
  border: 1px solid rgba(217, 119, 6, 0.18);
}

[data-theme="dark"] .pill-burgundy,
[data-theme="kuro-dark"] .pill-burgundy {
  background: rgba(126, 29, 42, 0.20);
  color: #FCA5A5;
  border-color: rgba(252, 165, 165, 0.20);
}

[data-theme="dark"] .pill-emerald,
[data-theme="kuro-dark"] .pill-emerald {
  background: rgba(5, 150, 105, 0.20);
  color: #6EE7B7;
  border-color: rgba(110, 231, 183, 0.20);
}

[data-theme="dark"] .pill-amber,
[data-theme="kuro-dark"] .pill-amber {
  background: rgba(217, 119, 6, 0.20);
  color: #FCD34D;
  border-color: rgba(252, 211, 77, 0.20);
}

/* Card Body */
.sched-card-body {
  margin: 6px 0 18px 0;
  flex: 1;
}

.sched-card-summary {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 64%;
}

/* Card Footer */
.sched-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
  z-index: 2;
  position: relative;
}

.sched-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sched-card-cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.sched-card:hover .sched-card-cta svg {
  transform: translateX(3px);
}

[dir="rtl"] .sched-card:hover .sched-card-cta svg {
  transform: translateX(-3px);
}

.cta-burgundy {
  background: var(--brand-burgundy, #7E1D2A);
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(126, 29, 42, 0.28);
}

.cta-burgundy:hover {
  background: #631621;
}

.cta-emerald {
  background: #059669;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.28);
}

.cta-emerald:hover {
  background: #047857;
}

.cta-amber {
  background: #D97706;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(217, 119, 6, 0.28);
}

.cta-amber:hover {
  background: #B45309;
}

/* Circular Arrow for Tablet/Mobile Blueprint */
.sched-circle-arrow {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.sched-circle-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.circle-burgundy {
  background: rgba(126, 29, 42, 0.09);
  color: var(--brand-burgundy, #7E1D2A);
  border: 1px solid rgba(126, 29, 42, 0.18);
}

.circle-emerald {
  background: rgba(5, 150, 105, 0.09);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.18);
}

.circle-amber {
  background: rgba(217, 119, 6, 0.09);
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.18);
}

/* Artwork Box (Bottom Right Positioning) */
.sched-card-artwork-box {
  position: absolute;
  bottom: 0;
  right: 12px;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

[dir="rtl"] .sched-card-artwork-box {
  right: auto;
  left: 12px;
}

.sched-card-kuro-img {
  max-height: 148px;
  max-width: 145px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(44, 24, 20, 0.12));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sched-card:hover .sched-card-kuro-img {
  transform: scale(1.05) translateY(-3px);
}

/* ══════════════════════════════════════════════════════════════════════════
   3. RESPONSIVE BREAKPOINTS (iPad & Mobile Blueprint Fidelity)
   ══════════════════════════════════════════════════════════════════════════ */

/* iPad & Tablets (768px – 1199px) */
@media (max-width: 1199px) {
  .schedules-cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sched-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 165px;
    padding: 22px 26px;
  }

  .sched-card-main {
    flex: 1;
    max-width: 65%;
  }

  .sched-card-summary {
    max-width: 100%;
    margin-bottom: 12px;
  }

  .sched-card-artwork-box {
    position: static;
    flex-shrink: 0;
    margin-inline-start: 16px;
  }

  .sched-card-kuro-img {
    max-height: 125px;
    max-width: 130px;
  }

  /* Show circular arrow button in tablet blueprint */
  .sched-card-cta {
    display: none;
  }

  .sched-circle-arrow {
    display: flex;
  }

  .sched-card:hover .sched-circle-arrow {
    transform: scale(1.08);
  }

  .sched-card-theory:hover .circle-burgundy {
    background: var(--brand-burgundy, #7E1D2A);
    color: #FFFFFF;
  }

  .sched-card-clinical:hover .circle-emerald {
    background: #059669;
    color: #FFFFFF;
  }

  .sched-card-exams:hover .circle-amber {
    background: #D97706;
    color: #FFFFFF;
  }
}

/* Mobile Phones (< 768px) */
@media (max-width: 767px) {
  .schedules-hub-container {
    gap: 16px;
    padding-bottom: 30px;
  }

  .schedules-hero-card {
    min-height: 180px;
    border-radius: 16px;
  }

  .schedules-hero-content {
    padding: 22px 20px;
    max-width: 100%;
  }

  .schedules-hero-badge-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .schedules-hero-title {
    font-size: 1.4rem;
  }

  .schedules-hero-subtitle {
    font-size: 0.85rem;
  }

  .schedules-hero-desc {
    font-size: 0.78rem;
  }

  .schedules-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sched-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 18px 16px !important;
    border-radius: 16px !important;
    min-height: auto !important;
    position: relative !important;
  }

  .sched-card-main {
    max-width: 100% !important;
  }

  .sched-card-summary {
    max-width: 60% !important;
    font-size: 0.8rem !important;
    margin: 4px 0 14px 0 !important;
  }

  .sched-card-artwork-box {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    margin-inline-start: 0 !important;
  }

  [dir="rtl"] .sched-card-artwork-box {
    right: auto !important;
    left: 8px !important;
  }

  .sched-card-kuro-img {
    max-height: 105px !important;
    max-width: 105px !important;
  }

  .sched-card-cta {
    display: inline-flex !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    min-height: 40px !important;
  }

  .sched-circle-arrow {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   KURO STUDENT — UNIFIED ACADEMIC & EXAM SCHEDULES REDESIGN
   Visual Reference: media_1790292241824.jpg
   Palette: Warm Cream (#FAF8F5 / #FAF7F2), Deep Burgundy (#7E1D2A), Soft Neutral Grays
   Zero rainbow clutters. Double-border elevation, Linear/Raycast-grade micro-interactions.
   ══════════════════════════════════════════════════════════════════════════ */

.schedules-subpage-container {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 4px 48px;
  box-sizing: border-box;
}

/* 1. Back Navigation Pill */
.sched-back-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #E8E2D9);
  box-shadow: 0 1px 3px rgba(44, 24, 20, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-radius: 9999px;
  color: var(--text-primary, #4A3E3D);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sched-back-pill:hover {
  background: var(--bg-surface-subtle, #F8F5EE);
  color: var(--brand-burgundy, #7E1D2A);
  border-color: rgba(126, 29, 42, 0.25);
  transform: translateX(-2px);
}

[dir="rtl"] .sched-back-pill:hover {
  transform: translateX(2px);
}

.sched-back-pill:active {
  transform: scale(0.98);
}

.sched-back-pill svg {
  width: 16px;
  height: 16px;
}

/* 2. Page Header */
.sched-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.sched-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sched-header-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(126, 29, 42, 0.08);
  border: 1px solid rgba(126, 29, 42, 0.16);
  color: var(--brand-burgundy, #7E1D2A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sched-header-icon-box svg {
  width: 22px;
  height: 22px;
}

.sched-header-titles h1 {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-primary, #231F20);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sched-header-titles p {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary, #706560);
  margin: 4px 0 0;
}

.sched-filter-pill {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #E8E2D9);
  border-radius: 9999px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #4A3E3D);
  box-shadow: 0 1px 3px rgba(44, 24, 20, 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sched-filter-pill:hover {
  border-color: rgba(126, 29, 42, 0.25);
  background: var(--bg-surface-subtle, #F8F5EE);
}

.sched-filter-pill svg {
  width: 15px;
  height: 15px;
  color: var(--brand-burgundy, #7E1D2A);
}

/* 3. Academic Tabs Row */
.sched-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.sched-tabs-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sched-tab-btn {
  border-radius: 9999px;
  padding: 9px 20px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid var(--border-card, #E8E2D9);
  background: var(--bg-card, #FFFFFF);
  color: var(--text-primary, #4A3E3D);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(44, 24, 20, 0.03);
}

.sched-tab-btn:hover {
  background: var(--bg-surface-subtle, #F8F5EE);
  color: var(--brand-burgundy, #7E1D2A);
  border-color: rgba(126, 29, 42, 0.25);
}

.sched-tab-btn.active {
  background: var(--brand-burgundy, #7E1D2A);
  color: #FFFFFF !important;
  border-color: var(--brand-burgundy, #7E1D2A);
  box-shadow: 0 2px 10px rgba(126, 29, 42, 0.28);
}

.sched-tab-count-badge {
  font-size: 0.72rem;
  padding: 2.5px 8px;
  border-radius: 9999px;
  font-weight: 700;
  background: var(--bg-surface-subtle, #F0EAE1);
  color: var(--text-secondary, #6B605A);
}

.sched-tab-btn.active .sched-tab-count-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

.sched-print-btn {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #E8E2D9);
  border-radius: 9999px;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #4A3E3D);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(44, 24, 20, 0.04);
  transition: all 0.2s ease;
}

.sched-print-btn:hover {
  background: var(--bg-surface-subtle, #F8F5EE);
  color: var(--brand-burgundy, #7E1D2A);
  border-color: rgba(126, 29, 42, 0.25);
}

.sched-print-btn svg {
  width: 16px;
  height: 16px;
}

/* 4. Group Selector (Clinical & Lab) */
.sched-group-selector-wrap {
  margin-bottom: 22px;
}

.sched-group-selector-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary, #5C524B);
  margin-bottom: 10px;
}

.sched-group-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.sched-group-pills-row::-webkit-scrollbar {
  display: none;
}

.sched-group-pill {
  min-width: 44px;
  height: 38px;
  border-radius: 9999px;
  border: 1px solid var(--border-card, #E8E2D9);
  background: var(--bg-card, #FFFFFF);
  color: var(--text-primary, #4A3E3D);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(44, 24, 20, 0.03);
}

.sched-group-pill:hover {
  border-color: rgba(126, 29, 42, 0.35);
  color: var(--brand-burgundy, #7E1D2A);
  background: #FCF7F7;
}

.sched-group-pill.active {
  background: var(--brand-burgundy, #7E1D2A);
  border-color: var(--brand-burgundy, #7E1D2A);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(126, 29, 42, 0.25);
}

/* 5. Clean Unified Table Container */
.kuro-sched-table-card {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-card, #ECE6DE);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(44, 24, 20, 0.03);
  width: 100%;
  margin-bottom: 24px;
}

.kuro-sched-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

[dir="rtl"] .kuro-sched-table {
  text-align: right;
}

.kuro-sched-table thead tr {
  background: #F8F5EE;
  border-bottom: 1px solid #ECE6DE;
}

.kuro-sched-table th {
  padding: 14px 20px;
  font-size: 0.825rem;
  font-weight: 700;
  color: #706560;
  letter-spacing: 0.01em;
}

.kuro-sched-table tbody tr {
  border-bottom: 1px solid #F3EFE9;
  transition: background-color 0.15s ease;
}

.kuro-sched-table tbody tr:hover {
  background-color: #FAF8F5;
}

.kuro-sched-table tr.sched-day-last-row {
  border-bottom: 2px solid #E8E1D5;
}

.kuro-sched-table td {
  padding: 15px 20px;
  font-size: 0.875rem;
  vertical-align: middle;
}

.sched-day-cell {
  background: #FCFAF7;
  border-inline-end: 1px solid #ECE6DE;
  vertical-align: middle;
  text-align: center;
  padding: 16px 22px;
}

.sched-day-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #231F20;
  display: block;
}

.sched-day-sub {
  font-size: 0.775rem;
  font-weight: 600;
  color: #8C827A;
  margin-top: 3px;
  display: block;
}

.sched-subject-cell {
  font-weight: 700;
  font-size: 0.92rem;
}

.sched-subject-primary {
  color: var(--brand-burgundy, #7E1D2A);
  display: block;
}

.sched-subject-en-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: #8C827A;
  display: block;
  margin-top: 2px;
}

.sched-time-cell {
  font-weight: 600;
  color: #2D2224;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.sched-code-cell {
  color: #706560;
  font-size: 0.825rem;
  font-weight: 600;
}

.sched-location-cell {
  color: #706560;
  font-size: 0.825rem;
  font-weight: 500;
}

.sched-date-cell {
  font-variant-numeric: tabular-nums;
}

.sched-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  color: #4A3E3D;
}

.sched-date-pill svg {
  width: 14px;
  height: 14px;
  color: var(--brand-burgundy, #7E1D2A);
}

.sched-countdown-badge {
  background: #FDF2F2;
  color: #9B2C3B;
  border: 1px solid rgba(155, 44, 59, 0.15);
  font-size: 0.775rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  display: inline-block;
  white-space: nowrap;
}

/* 6. Mobile Layout & Breakpoints */
.kuro-sched-mobile-list {
  display: none;
}

@media (max-width: 767px) {
  .kuro-sched-table-card {
    display: none !important;
  }

  .kuro-sched-mobile-list {
    display: block !important;
  }

  .sched-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sched-header-actions {
    width: 100%;
  }

  .sched-filter-pill {
    width: 100%;
    justify-content: center;
  }

  .sched-tabs-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sched-tabs-group {
    width: 100%;
    display: flex;
  }

  .sched-tab-btn {
    flex: 1;
    justify-content: center;
    padding: 9px 12px;
    font-size: 0.825rem;
  }

  .sched-print-btn {
    width: 100%;
    justify-content: center;
  }

  .sched-mobile-day-group {
    margin-bottom: 20px;
  }

  .sched-mobile-day-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #231F20;
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .sched-mobile-day-title span {
    font-size: 0.8rem;
    font-weight: 600;
    color: #8C827A;
  }

  .sched-mobile-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-card, #ECE6DE);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(44, 24, 20, 0.03);
  }

  .sched-mobile-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FDF2F2;
    color: var(--brand-burgundy, #7E1D2A);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .sched-mobile-icon-box svg {
    width: 18px;
    height: 18px;
  }

  .sched-mobile-info {
    flex: 1;
    min-width: 0;
  }

  .sched-mobile-time {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7A706B;
    margin-bottom: 2px;
  }

  .sched-mobile-subject {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-burgundy, #7E1D2A);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sched-mobile-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: #8C827A;
    margin-top: 2px;
  }

  .sched-mobile-arrow {
    color: #C4BAB0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .sched-mobile-arrow svg {
    width: 16px;
    height: 16px;
  }

  .sched-mobile-group-hint {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-burgundy, #7E1D2A);
    margin-bottom: 12px;
    padding: 6px 12px;
    background: rgba(126, 29, 42, 0.06);
    border-radius: 8px;
    display: inline-block;
  }

  .sched-mobile-exam-card {
    background: var(--bg-card, #FFFFFF);
    border: 1px solid var(--border-card, #ECE6DE);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(44, 24, 20, 0.03);
  }

  .sched-mobile-date-block {
    width: 48px;
    height: 50px;
    border-radius: 10px;
    background: #FAF5F5;
    border: 1px solid #F2E6E6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .date-block-month {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-burgundy, #7E1D2A);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .date-block-day {
    font-size: 1.15rem;
    font-weight: 800;
    color: #231F20;
    line-height: 1;
  }

  .sched-mobile-exam-info {
    flex: 1;
    min-width: 0;
  }

  .exam-time-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #7A706B;
    margin-bottom: 2px;
  }

  .exam-subject-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-burgundy, #7E1D2A);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .exam-code-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #8C827A;
    margin-top: 2px;
  }

  .sched-mobile-countdown {
    background: #FDF2F2;
    color: #9B2C3B;
    border: 1px solid rgba(155, 44, 59, 0.15);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* 7. Dark Mode Architecture */
[data-theme="dark"] .kuro-sched-table-card,
[data-theme="kuro-dark"] .kuro-sched-table-card {
  background: #1C1517;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .kuro-sched-table thead tr,
[data-theme="kuro-dark"] .kuro-sched-table thead tr {
  background: #23191B;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .kuro-sched-table th,
[data-theme="kuro-dark"] .kuro-sched-table th {
  color: #A8A09B;
}

[data-theme="dark"] .kuro-sched-table tbody tr,
[data-theme="kuro-dark"] .kuro-sched-table tbody tr {
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .kuro-sched-table tbody tr:hover,
[data-theme="kuro-dark"] .kuro-sched-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .kuro-sched-table tr.sched-day-last-row,
[data-theme="kuro-dark"] .kuro-sched-table tr.sched-day-last-row {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .sched-day-cell,
[data-theme="kuro-dark"] .sched-day-cell {
  background: #1F1719;
  border-inline-end-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sched-day-name,
[data-theme="kuro-dark"] .sched-day-name {
  color: #F5F2EB;
}

[data-theme="dark"] .sched-day-sub,
[data-theme="kuro-dark"] .sched-day-sub {
  color: #9E9690;
}

[data-theme="dark"] .sched-subject-primary,
[data-theme="kuro-dark"] .sched-subject-primary {
  color: #F87171;
}

[data-theme="dark"] .sched-time-cell,
[data-theme="kuro-dark"] .sched-time-cell {
  color: #ECE5DC;
}

[data-theme="dark"] .sched-code-cell,
[data-theme="dark"] .sched-location-cell,
[data-theme="kuro-dark"] .sched-code-cell,
[data-theme="kuro-dark"] .sched-location-cell {
  color: #B5ACA4;
}

[data-theme="dark"] .sched-back-pill,
[data-theme="dark"] .sched-filter-pill,
[data-theme="dark"] .sched-tab-btn:not(.active),
[data-theme="dark"] .sched-print-btn,
[data-theme="dark"] .sched-group-pill:not(.active),
[data-theme="kuro-dark"] .sched-back-pill,
[data-theme="kuro-dark"] .sched-filter-pill,
[data-theme="kuro-dark"] .sched-tab-btn:not(.active),
[data-theme="kuro-dark"] .sched-print-btn,
[data-theme="kuro-dark"] .sched-group-pill:not(.active) {
  background: #1C1517;
  border-color: rgba(255, 255, 255, 0.1);
  color: #ECE5DC;
}

[data-theme="dark"] .sched-countdown-badge,
[data-theme="kuro-dark"] .sched-countdown-badge {
  background: rgba(188, 74, 71, 0.2);
  color: #FFA3A3;
  border-color: rgba(188, 74, 71, 0.35);
}

[data-theme="dark"] .sched-header-titles h1,
[data-theme="kuro-dark"] .sched-header-titles h1 {
  color: #F5F2EB;
}

[data-theme="dark"] .sched-header-titles p,
[data-theme="kuro-dark"] .sched-header-titles p {
  color: #A8A09B;
}

[data-theme="dark"] .sched-mobile-card,
[data-theme="dark"] .sched-mobile-exam-card,
[data-theme="kuro-dark"] .sched-mobile-card,
[data-theme="kuro-dark"] .sched-mobile-exam-card {
  background: #1C1517;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sched-mobile-icon-box,
[data-theme="kuro-dark"] .sched-mobile-icon-box {
  background: rgba(188, 74, 71, 0.2);
  color: #FFA3A3;
}

[data-theme="dark"] .sched-mobile-date-block,
[data-theme="kuro-dark"] .sched-mobile-date-block {
  background: #251B1D;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .date-block-month,
[data-theme="kuro-dark"] .date-block-month {
  color: #F87171;
}

[data-theme="dark"] .date-block-day,
[data-theme="kuro-dark"] .date-block-day {
  color: #F5F2EB;
}

[data-theme="dark"] .sched-mobile-countdown,
[data-theme="kuro-dark"] .sched-mobile-countdown {
  background: rgba(188, 74, 71, 0.2);
  color: #FFA3A3;
  border-color: rgba(188, 74, 71, 0.35);
}

/* ══════════════════════════════════════════════════════════════════════════
   KURO STUDENT — AUDIO RECORDINGS LIBRARY MASTER REDESIGN
   3-Level Dental Curriculum Architecture:
     Level 1: Subject Selection (12 Dental Subjects)
     Level 2: Sheets of Selected Subject
     Level 3: Audio Recordings of Selected Sheet
   Visual Reference: media_1790272295311.jpg
   Warm Terracotta / Ivory Design System (#BC4A47, #FBF8F4, #24181B)
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --audio-primary: #BC4A47;
  --audio-primary-hover: #A53F3D;
  --audio-primary-subtle: rgba(188, 74, 71, 0.08);
  --audio-primary-border: rgba(188, 74, 71, 0.22);
  --audio-card-bg: #FFFFFF;
  --audio-border: #EAE3D6;
  --audio-text-primary: #24181B;
  --audio-text-muted: #78716C;
  --audio-wave-inactive: #D6CEC5;
  --audio-wave-active: #BC4A47;
}

[data-theme="dark"] {
  --audio-card-bg: #1C1517;
  --audio-border: rgba(255, 255, 255, 0.08);
  --audio-text-primary: #F5F2EB;
  --audio-text-muted: #A8A29E;
  --audio-wave-inactive: #3D3335;
}

.audio-hub-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 4px 44px;
  box-sizing: border-box;
}

.audio-content-stage {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
   1. HERO BANNER (Kuro Headphones Blueprint)
   ────────────────────────────────────────────────────────────────────────── */
.audio-hub-hero {
  width: 100%;
}

.audio-hero-card {
  position: relative;
  width: 100%;
  min-height: 205px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-subtle, rgba(44, 24, 20, 0.12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 24px rgba(44, 24, 20, 0.06);
  display: flex;
  align-items: center;
  background: #201416;
}

.audio-hero-bg-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  filter: brightness(0.92);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[dir="rtl"] .audio-hero-bg-artwork {
  background-position: center left;
}

.audio-hero-card:hover .audio-hero-bg-artwork {
  transform: scale(1.02);
}

.audio-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(32, 20, 22, 0.94) 0%, rgba(32, 20, 22, 0.80) 48%, rgba(32, 20, 22, 0.24) 100%);
  z-index: 1;
  pointer-events: none;
}

[dir="rtl"] .audio-hero-overlay {
  background: linear-gradient(270deg, rgba(32, 20, 22, 0.94) 0%, rgba(32, 20, 22, 0.80) 48%, rgba(32, 20, 22, 0.24) 100%);
}

.audio-hero-content {
  position: relative;
  z-index: 2;
  padding: 30px 38px;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.audio-hero-badge-wrap {
  margin-bottom: 12px;
}

.audio-hero-badge-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(188, 74, 71, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFAAA8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.audio-hero-title {
  font-size: 1.95rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 6px 0;
  letter-spacing: -0.015em;
  line-height: 1.22;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.audio-hero-subtitle {
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  line-height: 1.45;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. LEVEL NAVIGATION & SUB-BAR
   ────────────────────────────────────────────────────────────────────────── */
.audio-level-nav-bar {
  display: flex;
  align-items: center;
  margin-bottom: -4px;
}

.audio-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 11px;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  color: var(--audio-text-primary);
  font-weight: 750;
  font-size: 0.86rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-back-btn:hover {
  background: var(--audio-primary-subtle);
  border-color: var(--audio-primary-border);
  color: var(--audio-primary);
  transform: translateY(-1px);
}

.audio-back-btn:active {
  transform: scale(0.98);
}

.audio-back-btn svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s ease;
}

.audio-back-btn:hover svg {
  transform: translateX(-3px);
}

[dir="rtl"] .audio-back-btn:hover svg {
  transform: translateX(3px);
}

.audio-sub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.audio-search-box-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 480px;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  border-radius: 12px;
  height: 44px;
  padding: 0 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-search-box-wrap:focus-within {
  border-color: var(--audio-primary);
  box-shadow: 0 0 0 3px rgba(188, 74, 71, 0.12);
}

.audio-search-icon {
  width: 16px;
  height: 16px;
  color: var(--audio-text-muted);
  flex-shrink: 0;
  margin-inline-end: 8px;
}

.audio-search-field {
  border: none;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--audio-text-primary);
  width: 100%;
  outline: none;
}

.audio-search-field::placeholder {
  color: var(--audio-text-muted);
  opacity: 0.85;
}

.audio-search-clear-btn {
  background: var(--bg-hover, #F1EFEA);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  color: var(--audio-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.audio-search-clear-btn:hover {
  background: var(--audio-primary);
  color: #FFFFFF;
}

.audio-sub-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.audio-subjects-total-count {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--audio-text-muted);
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  padding: 6px 14px;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  white-space: nowrap;
}

.audio-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  border-radius: 12px;
  padding: 4px;
  height: 44px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.03);
}

.audio-view-btn {
  width: 36px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--audio-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-view-btn:hover {
  color: var(--audio-text-primary);
  background: var(--bg-hover, #F1EFEA);
}

.audio-view-btn.active {
  background: var(--audio-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(188, 74, 71, 0.28);
}

/* ──────────────────────────────────────────────────────────────────────────
   3. LEVEL 1: 12 SUBJECT CARDS GRID (4-Col Desktop, 3-Col iPad, 1-Col Mobile)
   ────────────────────────────────────────────────────────────────────────── */
.audio-subject-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.audio-subject-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.audio-subject-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(44, 24, 20, 0.03);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  outline: none;
}

.audio-subject-card:hover {
  transform: translateY(-3px);
  border-color: var(--audio-primary-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(188, 74, 71, 0.09);
}

.audio-subject-card:focus-visible {
  border-color: var(--audio-primary);
  box-shadow: 0 0 0 3px rgba(188, 74, 71, 0.16);
}

.audio-subject-card:active {
  transform: scale(0.985);
}

.audio-subj-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--audio-primary-subtle);
  border: 1px solid var(--audio-primary-border);
  color: var(--audio-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-subject-card:hover .audio-subj-icon-box {
  transform: scale(1.06);
}

.audio-subj-icon-box svg {
  width: 20px;
  height: 20px;
}

.audio-subj-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.audio-subj-title {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--audio-text-primary);
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-subj-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--audio-text-muted);
}

.audio-subj-code {
  font-weight: 750;
  color: var(--audio-primary);
  background: var(--audio-primary-subtle);
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--audio-primary-border);
}

.audio-subj-count {
  font-weight: 600;
  white-space: nowrap;
}

.audio-subj-arrow {
  margin-inline-start: auto;
  color: var(--audio-text-muted);
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.audio-subject-card:hover .audio-subj-arrow {
  opacity: 1;
  color: var(--audio-primary);
  transform: translateX(3px);
}

[dir="rtl"] .audio-subject-card:hover .audio-subj-arrow {
  transform: translateX(-3px);
}

.audio-subj-arrow svg {
  width: 16px;
  height: 16px;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. LEVEL 2: SHEETS OF SELECTED SUBJECT
   ────────────────────────────────────────────────────────────────────────── */
.audio-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.audio-level-heading {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--audio-text-primary);
  margin: 0;
}

.audio-level-badge {
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--audio-primary);
  background: var(--audio-primary-subtle);
  border: 1px solid var(--audio-primary-border);
  padding: 3px 10px;
  border-radius: 9999px;
}

.audio-sheets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.audio-sheet-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 6px rgba(44, 24, 20, 0.03);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.audio-sheet-card:hover {
  transform: translateY(-3px);
  border-color: var(--audio-primary-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(188, 74, 71, 0.08);
}

.audio-sheet-card:active {
  transform: scale(0.985);
}

.audio-sheet-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--audio-primary-subtle);
  border: 1px solid var(--audio-primary-border);
  color: var(--audio-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.audio-sheet-card:hover .audio-sheet-icon-box {
  transform: scale(1.06);
}

.audio-sheet-icon-box svg {
  width: 20px;
  height: 20px;
}

.audio-sheet-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.audio-sheet-title {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--audio-text-primary);
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-sheet-meta {
  font-size: 0.76rem;
  color: var(--audio-text-muted);
  font-weight: 600;
}

.audio-sheet-arrow {
  margin-inline-start: auto;
  color: var(--audio-text-muted);
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.audio-sheet-card:hover .audio-sheet-arrow {
  opacity: 1;
  color: var(--audio-primary);
  transform: translateX(3px);
}

[dir="rtl"] .audio-sheet-card:hover .audio-sheet-arrow {
  transform: translateX(-3px);
}

.audio-sheet-arrow svg {
  width: 16px;
  height: 16px;
}

/* ──────────────────────────────────────────────────────────────────────────
   5. LEVEL 3: AUDIO RECORDINGS OF SELECTED SHEET
   ────────────────────────────────────────────────────────────────────────── */
.audio-sheet-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.03);
}

.audio-sheet-banner-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--audio-primary-subtle);
  border: 1px solid var(--audio-primary-border);
  color: var(--audio-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.audio-sheet-banner-icon-box svg {
  width: 22px;
  height: 22px;
}

.audio-sheet-banner-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.audio-sheet-banner-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--audio-text-primary);
  margin: 0;
  line-height: 1.3;
}

.audio-sheet-banner-subtitle {
  font-size: 0.86rem;
  color: var(--audio-text-muted);
  margin: 0;
  font-weight: 600;
}

.audio-recordings-deck {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.audio-recording-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 3px 10px rgba(44, 24, 20, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.audio-recording-card:hover {
  transform: translateY(-2px);
  border-color: var(--audio-primary-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(188, 74, 71, 0.08);
}

.audio-recording-card.is-playing {
  border-color: var(--audio-primary);
  box-shadow: 0 0 0 2px rgba(188, 74, 71, 0.15), 0 8px 24px rgba(188, 74, 71, 0.1);
}

/* Card Header */
.audio-rec-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.audio-rec-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.audio-rec-bullet-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--audio-primary-subtle);
  color: var(--audio-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.audio-rec-bullet-icon svg {
  width: 16px;
  height: 16px;
}

.audio-rec-heading-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.audio-rec-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--audio-text-primary);
  margin: 0;
  line-height: 1.35;
}

.audio-rec-doctor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--audio-text-muted);
  font-weight: 600;
}

.audio-rec-duration-badge {
  font-size: 0.82rem;
  font-weight: 750;
  font-family: 'Inter', monospace;
  color: var(--audio-text-muted);
  background: var(--bg-hover, #F8F6F2);
  border: 1px solid var(--audio-border);
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Player Row */
.audio-rec-player-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-hover, #FAF8F5);
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--audio-border);
}

.audio-play-circle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--audio-primary);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(188, 74, 71, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-play-circle-btn:hover {
  transform: scale(1.08);
  background: var(--audio-primary-hover);
}

.audio-play-circle-btn:active {
  transform: scale(0.95);
}

.audio-play-circle-btn svg {
  width: 18px;
  height: 18px;
}

.audio-rec-waveform-container {
  flex: 1;
  height: 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.audio-waveform-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Wave animation when playing */
@keyframes bar-pulse-terracotta {
  0% { transform: scaleY(0.45); }
  50% { transform: scaleY(1.2); }
  100% { transform: scaleY(0.7); }
}

.audio-wave-bar.wave-anim {
  transform-origin: center;
  animation: bar-pulse-terracotta 1s ease-in-out infinite alternate;
}

.audio-wave-bar.wave-anim:nth-child(2n) {
  animation-delay: 0.15s;
}

.audio-wave-bar.wave-anim:nth-child(3n) {
  animation-delay: 0.3s;
}

/* Card Footer */
.audio-rec-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.audio-rec-date-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--audio-text-muted);
  font-weight: 600;
}

.audio-rec-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.audio-btn-view-sheet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9px;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  color: var(--audio-text-primary) !important;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.audio-btn-view-sheet:hover {
  background: var(--audio-primary-subtle);
  border-color: var(--audio-primary-border);
  color: var(--audio-primary) !important;
}

.audio-btn-view-sheet:active {
  transform: scale(0.98);
}

.audio-btn-more-options {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--audio-border);
  color: var(--audio-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.audio-btn-more-options:hover {
  background: var(--bg-hover, #F1EFEA);
  color: var(--audio-text-primary);
}

/* Empty State Card */
.audio-empty-card {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  padding: 40px 24px;
  text-align: center;
  background: var(--audio-card-bg);
  border: 1px solid var(--audio-border);
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(44, 24, 20, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.audio-empty-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--audio-primary-subtle);
  border: 1px solid var(--audio-primary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. RESPONSIVE BREAKPOINTS (Blueprint Fidelity & Zero Overflow)
   ────────────────────────────────────────────────────────────────────────── */

/* iPad Landscape (900px – 1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
  .audio-subject-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .audio-sheets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* iPad Portrait & Small Tablets (600px – 899px) */
@media (min-width: 600px) and (max-width: 899px) {
  .audio-subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .audio-sheets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .audio-hero-card {
    min-height: 180px;
  }

  .audio-hero-title {
    font-size: 1.65rem;
  }
}

/* Mobile Phones (< 600px) */
@media (max-width: 599px) {
  .audio-hub-container {
    gap: 16px;
    padding-bottom: 30px;
  }

  .audio-hero-card {
    min-height: 165px;
    border-radius: 16px;
  }

  .audio-hero-content {
    padding: 20px 18px;
    max-width: 100%;
  }

  .audio-hero-badge-icon-box {
    width: 38px;
    height: 38px;
  }

  .audio-hero-title {
    font-size: 1.45rem;
  }

  .audio-hero-subtitle {
    font-size: 0.85rem;
  }

  .audio-sub-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .audio-search-box-wrap {
    max-width: 100%;
    width: 100%;
  }

  .audio-sub-bar-right {
    justify-content: space-between;
    width: 100%;
  }

  /* Single Column on Mobile */
  .audio-subject-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .audio-subject-card {
    padding: 14px 16px;
    border-radius: 14px;
  }

  .audio-sheets-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .audio-recording-card {
    padding: 16px;
    border-radius: 16px;
    gap: 12px;
  }

  .audio-rec-player-row {
    padding: 8px 12px;
    gap: 12px;
  }

  .audio-play-circle-btn {
    width: 40px;
    height: 40px;
  }

  .audio-rec-title {
    font-size: 0.96rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   STUDIO FULLSCREEN ISOLATION (Hides any navbar, search box, or overlays)
   ══════════════════════════════════════════════════════════════════════════ */
body.studio-fullscreen-active #site-header,
body.studio-fullscreen-active .site-header,
body.studio-fullscreen-active #app-header,
body.studio-fullscreen-active .app-header,
body.studio-fullscreen-active .header-search-box,
body.studio-fullscreen-active #header-search-input,
body.studio-fullscreen-active .header-right-tools,
body.studio-fullscreen-active #app-sidebar,
body.studio-fullscreen-active .app-sidebar,
body.studio-fullscreen-active .mobile-bottom-nav,
body.studio-fullscreen-active .sidebar-backdrop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.studio-fullscreen-active #sheet-studio-fullscreen-root {
  z-index: 999999 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS TRIGGER, UNIFIED POPOVER & MOBILE BOTTOM SHEET
   Reference: media_1790281442628.jpg
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Header Trigger Button & Anchor Wrapper */
.settings-trigger-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.settings-gear-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  border: 1.5px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  color: #524B43 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
}

.settings-gear-btn i,
.settings-gear-btn svg {
  width: 19px !important;
  height: 19px !important;
  color: #7E1D2A !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.settings-gear-btn:hover {
  background: #FFFFFF !important;
  border-color: #7E1D2A !important;
  box-shadow: 0 4px 12px rgba(126, 29, 42, 0.12) !important;
}

.settings-gear-btn:hover i,
.settings-gear-btn:hover svg {
  transform: rotate(45deg);
}

.settings-gear-btn:active {
  transform: scale(0.96) !important;
}

/* 2. Desktop & iPad Popover Menu */
.settings-popover-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  inset-inline-end: 0 !important;
  width: 290px !important;
  max-width: calc(100vw - 24px) !important;
  background: #FFFFFF !important;
  border: 1px solid #EAE3D6 !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  z-index: 100050 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  animation: settingsPopoverSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes settingsPopoverSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.settings-popover-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.settings-popover-header {
  padding: 6px 10px 10px !important;
  border-bottom: 1px solid #F0ECE4 !important;
  margin-bottom: 4px !important;
}

.settings-popover-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #1E1E2D !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.settings-menu-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 2px 0 !important;
}

.settings-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 11px !important;
  border: none !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  color: #2C2C2C !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.16s ease !important;
}

.settings-menu-item:hover {
  background: #F8F5F0 !important;
}

.settings-menu-item:active {
  transform: scale(0.99) !important;
}

.set-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  color: inherit !important;
}

.set-item-icon {
  width: 18px !important;
  height: 18px !important;
  color: #7E1D2A !important;
  flex-shrink: 0 !important;
}

.set-item-label {
  font-weight: 600 !important;
  color: #1E1E2D !important;
  line-height: 1.2 !important;
}

.set-item-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.set-item-val {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #8C827A !important;
}

.set-chevron {
  width: 15px !important;
  height: 15px !important;
  color: #A69E96 !important;
}

.settings-menu-divider {
  height: 1px !important;
  background: #F0ECE4 !important;
  margin: 4px 6px !important;
}

.set-item-logout {
  color: #DC2626 !important;
}

.set-item-logout .set-item-icon {
  color: #DC2626 !important;
}

.set-item-logout .set-item-label {
  color: #DC2626 !important;
}

.set-item-logout:hover {
  background: #FEF2F2 !important;
}

/* 3. Interactive Toggle Switch (Sound & Preferences) */
.settings-toggle-switch {
  width: 42px !important;
  height: 24px !important;
  border-radius: 9999px !important;
  background: #D6CEC5 !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  padding: 2px !important;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
}

.settings-switch-thumb {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22) !important;
  display: block !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.settings-toggle-switch.active {
  background: #BC4A47 !important;
}

html[dir="ltr"] .settings-toggle-switch.active .settings-switch-thumb {
  transform: translateX(18px) !important;
}

html[dir="rtl"] .settings-toggle-switch.active .settings-switch-thumb {
  transform: translateX(-18px) !important;
}

/* 4. Mobile Bottom Sheet & Backdrop */
.settings-mobile-sheet-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 100060 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}

.settings-mobile-sheet-backdrop.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.settings-mobile-sheet {
  position: fixed !important;
  inset-inline: 0 !important;
  bottom: 0 !important;
  max-height: 85vh !important;
  max-height: 85dvh !important;
  background: #FFFFFF !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2) !important;
  z-index: 100070 !important;
  transform: translateY(105%) !important;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.settings-mobile-sheet.open {
  transform: translateY(0) !important;
}

.settings-mobile-handle-bar {
  display: flex !important;
  justify-content: center !important;
  padding: 10px 0 4px !important;
  cursor: grab !important;
}

.settings-mobile-handle {
  width: 40px !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: #D6CEC5 !important;
}

.settings-mobile-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px 14px !important;
  border-bottom: 1px solid #F0ECE4 !important;
}

.settings-mobile-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #1E1E2D !important;
}

.settings-mobile-scroll {
  overflow-y: auto !important;
  padding: 12px 18px 36px !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.settings-mobile-group-title {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #8C827A !important;
  padding: 8px 8px 4px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   5. DEDICATED SETTINGS PAGE (#/settings)
   Reference: media_1790281442628.jpg Row 2
   ══════════════════════════════════════════════════════════════════════════ */
.settings-page-wrapper {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 24px 60px !important;
  box-sizing: border-box !important;
}

.settings-page-mobile-bar {
  display: none;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.settings-page-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: #1E1E2D !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
}

.settings-page-back-link i {
  width: 20px !important;
  height: 20px !important;
  color: #7E1D2A !important;
}

.settings-page-layout {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 28px !important;
  align-items: start !important;
}

/* Sidebar Navigation in Settings Page */
.settings-page-sidebar {
  background: #FFFFFF !important;
  border: 1px solid #EAE3D6 !important;
  border-radius: 18px !important;
  padding: 16px 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
  position: sticky !important;
  top: 88px !important;
}

.settings-sidebar-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px 14px !important;
  border-bottom: 1px solid #F0ECE4 !important;
  margin-bottom: 10px !important;
}

.settings-sidebar-icon {
  width: 22px !important;
  height: 22px !important;
  color: #7E1D2A !important;
}

.settings-sidebar-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #1E1E2D !important;
  margin: 0 !important;
}

.settings-sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.settings-sidebar-tab {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: none !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #524B43 !important;
  cursor: pointer !important;
  text-align: start !important;
  width: 100% !important;
  transition: all 0.16s ease !important;
}

.settings-sidebar-tab:hover {
  background: #F8F5F0 !important;
  color: #1E1E2D !important;
}

.settings-sidebar-tab.active {
  background: #7E1D2A !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(126, 29, 42, 0.22) !important;
}

.settings-sidebar-tab.active i,
.settings-sidebar-tab.active svg {
  color: #FFFFFF !important;
}

.settings-sidebar-tab i,
.settings-sidebar-tab svg {
  width: 18px !important;
  height: 18px !important;
  color: #8C827A !important;
  flex-shrink: 0 !important;
}

/* Settings Content Area */
.settings-page-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  min-width: 0 !important;
}

.settings-tab-header {
  margin-bottom: 6px !important;
}

.settings-tab-title {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: #1E1E2D !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.01em !important;
}

.settings-tab-desc {
  font-size: 0.92rem !important;
  color: #786F66 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Setting Cards */
.settings-cards-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.settings-card {
  background: #FFFFFF !important;
  border: 1px solid #EAE3D6 !important;
  border-radius: 18px !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.settings-card:hover {
  border-color: #D6CEC5 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}

.set-card-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-width: 0 !important;
}

.set-card-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  background: #F8F5F0 !important;
  border: 1px solid #EAE3D6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #7E1D2A !important;
}

.set-card-icon-box i,
.set-card-icon-box svg {
  width: 20px !important;
  height: 20px !important;
}

.set-card-meta {
  min-width: 0 !important;
}

.set-card-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1E1E2D !important;
  margin: 0 0 4px 0 !important;
}

.set-card-subtitle {
  font-size: 0.85rem !important;
  color: #786F66 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.set-card-action {
  flex-shrink: 0 !important;
}

/* Form Controls and Buttons */
.settings-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.settings-select-ctrl {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #FAF8F5 !important;
  border: 1.5px solid #D6CEC5 !important;
  border-radius: 11px !important;
  padding: 8px 36px 8px 14px !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #1E1E2D !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}

.settings-select-ctrl:focus {
  border-color: #7E1D2A !important;
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.12) !important;
}

html[dir="rtl"] .settings-select-ctrl {
  padding: 8px 14px 8px 36px !important;
}

.settings-select-arrow {
  position: absolute !important;
  inset-inline-end: 12px !important;
  pointer-events: none !important;
  width: 16px !important;
  height: 16px !important;
  color: #8C827A !important;
}

.settings-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border-radius: 11px !important;
  background: #7E1D2A !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.16s ease !important;
  box-shadow: 0 2px 8px rgba(126, 29, 42, 0.18) !important;
}

.settings-btn-primary:hover {
  background: #63141F !important;
  transform: translateY(-1px) !important;
}

.settings-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border-radius: 11px !important;
  background: #F8F5F0 !important;
  border: 1.5px solid #EAE3D6 !important;
  color: #1E1E2D !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.16s ease !important;
}

.settings-btn-secondary:hover {
  background: #EAE3D6 !important;
}

.settings-btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border-radius: 11px !important;
  background: #FEE2E2 !important;
  border: 1.5px solid #FECACA !important;
  color: #DC2626 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
}

.settings-btn-danger:hover {
  background: #FCA5A5 !important;
  color: #991B1B !important;
}

.settings-badge-ok {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  background: #ECFDF5 !important;
  color: #059669 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border: 1px solid #A7F3D0 !important;
}

.settings-avatar-preview {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #EAE3D6 !important;
  flex-shrink: 0 !important;
  background: #FAF8F5 !important;
}

.settings-avatar-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 6. Dark Theme Overrides */
[data-theme="dark"] .settings-gear-btn {
  background: #252538 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #D6CEC5 !important;
}

[data-theme="dark"] .settings-gear-btn i,
[data-theme="dark"] .settings-gear-btn svg {
  color: #E66A67 !important;
}

[data-theme="dark"] .settings-popover-menu,
[data-theme="dark"] .settings-mobile-sheet,
[data-theme="dark"] .settings-page-sidebar,
[data-theme="dark"] .settings-card {
  background: #1E1E2D !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .settings-popover-header,
[data-theme="dark"] .settings-menu-divider,
[data-theme="dark"] .settings-mobile-header,
[data-theme="dark"] .settings-sidebar-header {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .settings-popover-title,
[data-theme="dark"] .set-item-label,
[data-theme="dark"] .settings-sidebar-title,
[data-theme="dark"] .settings-tab-title,
[data-theme="dark"] .set-card-title,
[data-theme="dark"] .settings-page-back-link {
  color: #FFFFFF !important;
}

[data-theme="dark"] .settings-menu-item:hover,
[data-theme="dark"] .settings-sidebar-tab:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .settings-sidebar-tab {
  color: #D6CEC5 !important;
}

[data-theme="dark"] .set-card-icon-box {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #E66A67 !important;
}

[data-theme="dark"] .settings-select-ctrl {
  background: #161622 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .settings-btn-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .settings-mobile-close {
  background: #252538 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

/* 7. Tablet & Mobile Responsive Layouts */
@media (max-width: 991px) {
  .settings-page-layout {
    grid-template-columns: 220px 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 767px) {
  .settings-page-mobile-bar {
    display: flex !important;
  }

  .settings-page-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .settings-page-sidebar {
    position: static !important;
    width: 100% !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .settings-sidebar-header {
    display: none !important;
  }

  .settings-sidebar-nav {
    flex-direction: row !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  .settings-sidebar-nav::-webkit-scrollbar {
    display: none !important;
  }

  .settings-sidebar-tab {
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
  }

  .settings-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .set-card-action {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .settings-page-wrapper {
    padding: 16px 14px 40px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   4-STEP SUBJECT QUICK-ACCESS MODAL & HOME SUBJECT CARDS
   Reference: media_1790283083887.jpg
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Home Page Subjects Grid & Horizontal Subject Cards */
.kuro-subjects-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
  .kuro-subjects-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .kuro-subjects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 767px) {
  .kuro-subjects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .kuro-subject-card {
    padding: 10px 10px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }

  .ksc-icon-wrap {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .ksc-icon-wrap svg,
  .ksc-icon-wrap i {
    width: 17px !important;
    height: 17px !important;
  }

  .ksc-title {
    font-size: 0.82rem !important;
  }

  .ksc-code,
  .ksc-count {
    font-size: 0.70rem !important;
  }

  .ksc-arrow-wrap i,
  .ksc-arrow-wrap svg {
    width: 13px !important;
    height: 13px !important;
  }
}

@media (max-width: 360px) {
  .kuro-subjects-grid {
    grid-template-columns: 1fr !important;
  }
}

.kuro-subject-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background: #FFFFFF !important;
  border: 1.5px solid #EAE3D6 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  gap: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}

.kuro-subject-card:hover {
  border-color: #BC4A47 !important;
  box-shadow: 0 6px 18px rgba(188, 74, 71, 0.1) !important;
  transform: translateY(-2px) !important;
}

.kuro-subject-card:active {
  transform: scale(0.98) !important;
}

.ksc-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #FAF5F5 !important;
  border: 1.5px solid #F0D5D5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #BC4A47 !important;
}

.ksc-icon-wrap svg,
.ksc-icon-wrap i {
  width: 22px !important;
  height: 22px !important;
}

.ksc-info-col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 !important;
  gap: 2px !important;
}

.ksc-title {
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  color: #1E1E2D !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.ksc-code {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #8C827A !important;
}

.ksc-count {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #A69E96 !important;
}

.ksc-arrow-wrap {
  color: #A69E96 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.ksc-arrow-wrap i,
.ksc-arrow-wrap svg {
  width: 16px !important;
  height: 16px !important;
  transition: transform 0.15s ease !important;
}

.kuro-subject-card:hover .ksc-arrow-wrap i {
  transform: translateX(2px);
  color: #BC4A47;
}

html[dir="rtl"] .kuro-subject-card:hover .ksc-arrow-wrap i {
  transform: translateX(-2px);
}

/* 2. Floating Quick-Access Modal Box (sqm-modal-box) */
.subject-modal-box.sqm-modal-box {
  width: min(460px, calc(100vw - 28px)) !important;
  max-width: 460px !important;
  background: #FFFFFF !important;
  border: 1px solid #EAE3D6 !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.sqm-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.sqm-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid #F0ECE4 !important;
  gap: 12px !important;
}

.sqm-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.sqm-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: #FAF5F5 !important;
  border: 1.5px solid #F0D5D5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #BC4A47 !important;
}

.sqm-icon-box i,
.sqm-icon-box svg {
  width: 22px !important;
  height: 22px !important;
}

.sqm-icon-sheet {
  background: #FAF8F5 !important;
  border-color: #EAE3D6 !important;
  color: #BC4A47 !important;
}

.sqm-icon-question {
  border-radius: 50% !important;
  background: #FAF5F5 !important;
  border-color: #F0D5D5 !important;
  color: #BC4A47 !important;
}

.sqm-icon-audio {
  background: #FAF5F5 !important;
  border-color: #F0D5D5 !important;
  color: #BC4A47 !important;
}

.sqm-icon-notes {
  background: #FAF8F5 !important;
  border-color: #EAE3D6 !important;
  color: #BC4A47 !important;
}

.sqm-title-meta {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 2px !important;
}

.sqm-main-title {
  font-size: 1.05rem !important;
  font-weight: 750 !important;
  color: #1E1E2D !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sqm-sub-code {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #8C827A !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sqm-close-btn,
.sqm-back-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #524B43 !important;
  flex-shrink: 0 !important;
  transition: all 0.16s ease !important;
}

.sqm-close-btn:hover,
.sqm-back-btn:hover {
  background: #FFFFFF !important;
  border-color: #BC4A47 !important;
  color: #BC4A47 !important;
}

/* 3. Step 1: 5 Action Cards Grid */
.sqm-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px !important;
  padding: 18px 20px 24px !important;
}

.sqm-action-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px 10px 16px !important;
  border-radius: 16px !important;
  border: 1.5px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  grid-column: span 2 !important;
}

/* Row 2: 2 cards centered under Row 1 */
#sqm-action-notes {
  grid-column: 2 / span 2 !important;
}

#sqm-action-other {
  grid-column: 4 / span 2 !important;
}

.sqm-action-card:hover {
  border-color: #BC4A47 !important;
  background: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(188, 74, 71, 0.12) !important;
  transform: translateY(-2px) !important;
}

.sqm-action-card:active {
  transform: scale(0.97) !important;
}

.sqm-card-icon-box {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: #FFFFFF !important;
  border: 1px solid #EAE3D6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #BC4A47 !important;
}

.sqm-card-icon-box i,
.sqm-card-icon-box svg {
  width: 19px !important;
  height: 19px !important;
}

.sqm-card-label {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1E1E2D !important;
}

/* 4. Step 2: Search Input & Sheets List */
.sqm-search-wrap {
  padding: 12px 20px 6px !important;
  position: relative !important;
}

.sqm-search-input {
  width: 100% !important;
  padding: 9px 14px 9px 38px !important;
  border-radius: 12px !important;
  border: 1.5px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  color: #1E1E2D !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease !important;
}

.sqm-search-input:focus {
  border-color: #BC4A47 !important;
  background: #FFFFFF !important;
}

html[dir="rtl"] .sqm-search-input {
  padding: 9px 38px 9px 14px !important;
}

.sqm-search-icon {
  position: absolute !important;
  inset-inline-start: 32px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  color: #8C827A !important;
  pointer-events: none !important;
}

.sqm-sheets-scroll-body {
  max-height: 380px !important;
  overflow-y: auto !important;
  padding: 8px 20px 20px !important;
  -webkit-overflow-scrolling: touch !important;
}

.sqm-sheets-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sqm-sheet-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1.5px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  box-sizing: border-box !important;
}

.sqm-sheet-row:hover {
  background: #FFFFFF !important;
  border-color: #BC4A47 !important;
  box-shadow: 0 4px 14px rgba(188, 74, 71, 0.08) !important;
}

.sqm-sheet-row:active {
  transform: scale(0.99) !important;
}

.sqm-sheet-row-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.sqm-sheet-icon-pill {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #FAF5F5 !important;
  border: 1px solid #F0D5D5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #BC4A47 !important;
  flex-shrink: 0 !important;
}

.sqm-sheet-icon-pill i,
.sqm-sheet-icon-pill svg {
  width: 17px !important;
  height: 17px !important;
}

.sqm-sheet-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 2px !important;
}

.sqm-sheet-title {
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  color: #1E1E2D !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.sqm-sheet-specs {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #8C827A !important;
}

.sqm-row-chevron {
  width: 16px !important;
  height: 16px !important;
  color: #A69E96 !important;
  flex-shrink: 0 !important;
}

/* 5. Steps 3 & 4: Options Lists */
.sqm-options-body {
  padding: 14px 20px 24px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
}

.sqm-options-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sqm-option-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  border: 1.5px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: start !important;
  font-family: inherit !important;
  transition: all 0.16s ease !important;
  box-sizing: border-box !important;
}

.sqm-option-row:hover {
  background: #FFFFFF !important;
  border-color: #BC4A47 !important;
  box-shadow: 0 4px 14px rgba(188, 74, 71, 0.08) !important;
}

.sqm-option-row:active {
  transform: scale(0.99) !important;
}

.sqm-option-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.sqm-option-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: #FAF5F5 !important;
  border: 1px solid #F0D5D5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #BC4A47 !important;
  flex-shrink: 0 !important;
}

.sqm-option-icon i,
.sqm-option-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.sqm-option-texts {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  gap: 2px !important;
}

.sqm-option-title {
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  color: #1E1E2D !important;
  line-height: 1.3 !important;
}

.sqm-option-sub {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: #8C827A !important;
  line-height: 1.2 !important;
}

/* 6. Empty States */
.sqm-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 36px 16px !important;
  text-align: center !important;
  gap: 10px !important;
}

.sqm-empty-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #FAF8F5 !important;
  border: 1.5px solid #EAE3D6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8C827A !important;
}

.sqm-empty-icon i {
  width: 24px !important;
  height: 24px !important;
}

.sqm-empty-title {
  font-size: 0.98rem !important;
  font-weight: 750 !important;
  color: #1E1E2D !important;
  margin: 0 !important;
}

.sqm-empty-desc {
  font-size: 0.82rem !important;
  color: #8C827A !important;
  margin: 0 !important;
  max-width: 300px !important;
  line-height: 1.4 !important;
}

/* 7. Recordings & Notes Panes */
.sqm-recordings-body,
.sqm-notes-body {
  padding: 14px 20px 24px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
}

.sqm-recordings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.sqm-recording-card {
  padding: 14px !important;
  border-radius: 14px !important;
  border: 1.5px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sqm-rec-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.sqm-rec-title {
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  color: #1E1E2D !important;
  margin: 0 !important;
}

.sqm-rec-duration {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #BC4A47 !important;
  background: #FAF5F5 !important;
  border: 1px solid #F0D5D5 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}

.sqm-rec-meta {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 0.78rem !important;
  color: #8C827A !important;
}

.sqm-rec-meta span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.sqm-player-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

.sqm-play-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #BC4A47 !important;
  color: #FFFFFF !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.sqm-player-bar-track {
  flex: 1 !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: #EAE3D6 !important;
  overflow: hidden !important;
}

.sqm-player-bar-fill {
  height: 100% !important;
  background: #BC4A47 !important;
}

.sqm-notes-hint {
  font-size: 0.82rem !important;
  color: #8C827A !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
}

.sqm-notes-textarea {
  width: 100% !important;
  min-height: 160px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1.5px solid #EAE3D6 !important;
  background: #FAF8F5 !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  color: #1E1E2D !important;
  resize: vertical !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.sqm-notes-textarea:focus {
  border-color: #BC4A47 !important;
  background: #FFFFFF !important;
}

.sqm-notes-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 10px !important;
}

.sqm-notes-save-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  border-radius: 11px !important;
  background: #7E1D2A !important;
  color: #FFFFFF !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
}

.sqm-notes-save-btn:hover {
  background: #63141F !important;
}

/* 8. Dark Mode Overrides for Quick-Access Modal & Cards */
[data-theme="dark"] .kuro-subject-card,
[data-theme="dark"] .subject-modal-box.sqm-modal-box {
  background: #1E1E2D !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .ksc-title,
[data-theme="dark"] .sqm-main-title,
[data-theme="dark"] .sqm-card-label,
[data-theme="dark"] .sqm-sheet-title,
[data-theme="dark"] .sqm-option-title,
[data-theme="dark"] .sqm-empty-title,
[data-theme="dark"] .sqm-rec-title {
  color: #FFFFFF !important;
}

[data-theme="dark"] .ksc-icon-wrap,
[data-theme="dark"] .sqm-icon-box,
[data-theme="dark"] .sqm-card-icon-box,
[data-theme="dark"] .sqm-sheet-icon-pill,
[data-theme="dark"] .sqm-option-icon {
  background: rgba(188, 74, 71, 0.15) !important;
  border-color: rgba(188, 74, 71, 0.3) !important;
  color: #E66A67 !important;
}

[data-theme="dark"] .sqm-action-card,
[data-theme="dark"] .sqm-sheet-row,
[data-theme="dark"] .sqm-option-row,
[data-theme="dark"] .sqm-recording-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sqm-action-card:hover,
[data-theme="dark"] .sqm-sheet-row:hover,
[data-theme="dark"] .sqm-option-row:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #E66A67 !important;
}

[data-theme="dark"] .sqm-header {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .sqm-close-btn,
[data-theme="dark"] .sqm-back-btn,
[data-theme="dark"] .sqm-empty-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .sqm-search-input,
[data-theme="dark"] .sqm-notes-textarea {
  background: #161622 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

/* 9. Dark Mode Overrides for Compact Hero */
[data-theme="dark"] .kuro-hero-workspace,
body.dark-mode .kuro-hero-workspace {
  background: #1E1E2D !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .kuro-hero-vignette,
body.dark-mode .kuro-hero-vignette {
  background: linear-gradient(90deg, rgba(30, 30, 45, 0.95) 0%, rgba(30, 30, 45, 0.85) 34%, rgba(30, 30, 45, 0.3) 54%, rgba(30, 30, 45, 0) 72%) !important;
}

[data-theme="dark"] .kuro-hero-greeting-title,
body.dark-mode .kuro-hero-greeting-title {
  color: #FFFFFF !important;
}

[data-theme="dark"] .kuro-hero-greeting-sub,
body.dark-mode .kuro-hero-greeting-sub {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .kuro-hero-date-chip,
body.dark-mode .kuro-hero-date-chip {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #F87171 !important;
}

[data-theme="dark"] .kuro-hero-date-icon,
body.dark-mode .kuro-hero-date-icon {
  color: #F87171 !important;
}

/* 10. Dark Mode Overrides for Split Schedule & Continue Studying */
[data-theme="dark"] .kuro-split-card,
body.dark-mode .kuro-split-card,
[data-theme="dark"] .continue-study-card,
body.dark-mode .continue-study-card {
  background: var(--bg-surface, #1E1B1D) !important;
  border-color: var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .kuro-split-card-title,
body.dark-mode .kuro-split-card-title,
[data-theme="dark"] .continue-card-title,
body.dark-mode .continue-card-title,
[data-theme="dark"] .continue-studying-header .kuro-section-title,
body.dark-mode .continue-studying-header .kuro-section-title,
[data-theme="dark"] .keds-title,
body.dark-mode .keds-title,
[data-theme="dark"] .ksrc-subject,
body.dark-mode .ksrc-subject {
  color: var(--text-primary, #F5F0EB) !important;
}

[data-theme="dark"] .kuro-split-card-header,
body.dark-mode .kuro-split-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .kuro-schedule-row-card,
body.dark-mode .kuro-schedule-row-card,
[data-theme="dark"] .kuro-empty-day-state,
body.dark-mode .kuro-empty-day-state {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .kuro-schedule-row-card:hover,
body.dark-mode .kuro-schedule-row-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .continue-action-btn.secondary,
body.dark-mode .continue-action-btn.secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary, #F5F0EB) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .continue-progress-track,
body.dark-mode .continue-progress-track {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   11. KURO STUDENT — GLOBAL TACTILE PRESS & ZERO-BLUE-OUTLINE SYSTEM
   Universal Apple / Linear-grade interaction physics (120-180ms spring transitions)
   Total elimination of default browser blue selection & focus outlines
   Supported seamlessly across Desktop, Laptop, iPad, Android & iPhone
   ========================================================================== */

/* Universal tap-highlight removal across all DOM elements */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent !important;
}

/* Custom themed text selection highlight (zero bright cyan/blue highlight rectangle) */
::selection {
  background: rgba(126, 29, 42, 0.22) !important;
  color: inherit !important;
}

::-moz-selection {
  background: rgba(126, 29, 42, 0.22) !important;
  color: inherit !important;
}

/* Eliminate default browser blue rectangular outline on mouse & touch clicks */
:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none;
}

/* Refined Kuro Student keyboard accessibility focus state (Zero Blue Outline) */
:focus-visible {
  outline: 2px solid #7E1D2A !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.16) !important;
  border-radius: inherit;
}

[data-theme="dark"] :focus-visible,
body.dark-mode :focus-visible {
  outline: 2px solid #E27B88 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(226, 123, 136, 0.22) !important;
}

/* Form input focus styling (warm burgundy glow, zero browser blue) */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #7E1D2A !important;
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.14) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: #C84343 !important;
  box-shadow: 0 0 0 3px rgba(200, 67, 67, 0.2) !important;
}

/* ─── A. BUTTONS & INTERACTIVE ACTION TRIGGERS ─── */
button,
.btn,
.continue-action-btn,
.kuro-view-full-schedule-btn,
.kuro-weekly-schedule-btn,
.audio-btn-view-sheet,
.audio-back-btn,
.schedules-back-btn,
.sched-card-btn,
.shb-action-btn,
.sgc-btn-view,
.sgc-btn-download,
.sqm-back-btn,
.sqm-close-btn,
.mobile-toggle-btn,
.header-settings-btn,
.settings-gear-btn,
.dt-modal-nav-btn,
.dt-modal-tool-btn,
.dt-quiz-option,
.q-btn-action,
.sheets-view-btn,
.sheets-back-btn,
.profile-save-btn,
.auth-avatar-btn,
.mob-quick-setting-btn {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 140ms ease,
              background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tactile press down state on click/tap */
button:active:not(:disabled),
.btn:active:not(:disabled),
.continue-action-btn:active,
.kuro-view-full-schedule-btn:active,
.kuro-weekly-schedule-btn:active,
.audio-btn-view-sheet:active,
.audio-back-btn:active,
.schedules-back-btn:active,
.sched-card-btn:active,
.shb-action-btn:active,
.sgc-btn-view:active,
.sgc-btn-download:active,
.sqm-back-btn:active,
.sqm-close-btn:active,
.mobile-toggle-btn:active,
.header-settings-btn:active,
.settings-gear-btn:active,
.dt-modal-nav-btn:active,
.dt-modal-tool-btn:active,
.dt-quiz-option:active,
.q-btn-action:active,
.sheets-view-btn:active,
.sheets-back-btn:active,
.profile-save-btn:active,
.auth-avatar-btn:active,
.mob-quick-setting-btn:active {
  transform: scale(0.98) !important;
  opacity: 0.94;
}

/* ─── B. CARDS & INTERACTIVE STUDY TILES ─── */
.continue-study-card,
.kuro-split-card,
.kuro-schedule-row-card,
.kuro-subject-card,
.sheets-subject-card,
.sheet-grid-card,
.audio-subject-card,
.audio-sheet-card,
.audio-recording-card,
.questions-subject-card,
.sched-card,
.sqm-recording-card,
.settings-card,
.sqm-sheet-row,
.sqm-option-row,
.subject-card,
.sheet-card,
.content-card,
.faculty-news-card {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card tactile press state */
.continue-study-card:active,
.kuro-schedule-row-card:active,
.kuro-subject-card:active,
.sheets-subject-card:active,
.sheet-grid-card:active,
.audio-subject-card:active,
.audio-sheet-card:active,
.audio-recording-card:active,
.questions-subject-card:active,
.sched-card:active,
.sqm-recording-card:active,
.settings-card:active,
.sqm-sheet-row:active,
.sqm-option-row:active,
.subject-card:active,
.sheet-card:active,
.faculty-news-card:active {
  transform: scale(0.985) !important;
}

/* ─── C. NAVIGATION ITEMS, TABS & SEGMENTED PILLS ─── */
.site-nav-pill,
.nav-pill,
.kuro-tab-pill,
.kf-segmented-btn,
.exams-segmented-btn,
.schedules-tab-btn,
.filter-pill,
.kuro-filter-pill,
.sqm-action-item,
.more-dropdown-item,
.settings-popover-item,
.settings-menu-item,
.sidebar-menu-item {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              color 140ms ease,
              border-color 160ms ease,
              box-shadow 160ms ease;
}

/* Active navigation tap/press */
.site-nav-pill:active,
.nav-pill:active,
.kuro-tab-pill:active,
.kf-segmented-btn:active,
.exams-segmented-btn:active,
.schedules-tab-btn:active,
.filter-pill:active,
.kuro-filter-pill:active,
.sqm-action-item:active,
.more-dropdown-item:active,
.settings-popover-item:active,
.settings-menu-item:active,
.sidebar-menu-item:active {
  transform: scale(0.97) !important;
}

/* ─── D. CIRCULAR AUDIO PLAY CONTROLS ─── */
.audio-play-circle-btn,
.sqm-play-btn {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 160ms ease,
              box-shadow 160ms ease;
}

.audio-play-circle-btn:active,
.sqm-play-btn:active {
  transform: scale(0.93) !important;
}

/* ─── E. GENERAL LINKS & INTERACTIVE PROSE ─── */
a {
  -webkit-tap-highlight-color: transparent !important;
}

a:focus:not(:focus-visible) {
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   KURO NOTES — FINAL PDF SHEET VIEWER MASTER INTERFACE & TOOL SUITE
   UI/UX References: media_1790359931640.png .. media_1790359989246.png
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --kn-bg: #F8F5EE;
  --kn-surface: #FFFFFF;
  --kn-header-bg: #FFFFFF;
  --kn-toolbar-bg: #FFFFFF;
  --kn-sidebar-bg: #FCFAF6;
  --kn-sidebar-tab-bg: #F1ECE1;
  --kn-sidebar-tab-active-bg: rgba(126, 29, 42, 0.08);
  --kn-sidebar-tab-active-color: #7E1D2A;
  --kn-primary: #7E1D2A;
  --kn-primary-hover: #962534;
  --kn-primary-active: #661622;
  --kn-accent-soft: rgba(126, 29, 42, 0.08);
  --kn-border: #E8E2D5;
  --kn-border-subtle: #EFE9DE;
  --kn-text: #1F1A17;
  --kn-text-muted: #7C736B;
  --kn-shadow-page: 0 4px 24px rgba(36, 24, 27, 0.08), 0 1px 3px rgba(36, 24, 27, 0.04);
  --kn-shadow-card: 0 2px 10px rgba(36, 24, 27, 0.05);
  --kn-shadow-popover: 0 12px 32px rgba(31, 26, 23, 0.14), 0 2px 6px rgba(31, 26, 23, 0.06);
  --kn-active-outline: #7E1D2A;
}

[data-theme="dark"] {
  --kn-bg: #11121C;
  --kn-surface: #1E202E;
  --kn-header-bg: #161724;
  --kn-toolbar-bg: #161724;
  --kn-sidebar-bg: #181928;
  --kn-sidebar-tab-bg: #222436;
  --kn-sidebar-tab-active-bg: rgba(225, 29, 72, 0.15);
  --kn-sidebar-tab-active-color: #F43F5E;
  --kn-primary: #BE123C;
  --kn-primary-hover: #E11D48;
  --kn-primary-active: #9F1239;
  --kn-accent-soft: rgba(190, 18, 60, 0.15);
  --kn-border: rgba(255, 255, 255, 0.09);
  --kn-border-subtle: rgba(255, 255, 255, 0.05);
  --kn-text: #F8FAFC;
  --kn-text-muted: #94A3B8;
  --kn-shadow-page: 0 6px 30px rgba(0, 0, 0, 0.5);
  --kn-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
  --kn-shadow-popover: 0 14px 36px rgba(0, 0, 0, 0.55);
  --kn-active-outline: #E11D48;
}

/* 1. Workspace Root (4 Main Screen Areas) */
.kuro-notes-workspace {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background-color: var(--kn-bg);
  color: var(--kn-text);
  font-family: 'Inter', 'IBM Plex Sans Arabic', -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* 2. Top Header (Unified Responsive Hierarchy across Desktop, Tablet/iPad, Mobile) */
.kn-header {
  min-height: 54px;
  background: var(--kn-header-bg);
  border-bottom: 1px solid var(--kn-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  flex-shrink: 0;
  z-index: 30;
  gap: 10px;
}

.kn-header-left,
.kn-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.kn-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.kn-header-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.kn-controls-nav-zoom-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.kn-more-overflow-group {
  display: none;
}

.kn-more-overflow-item {
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: 100%;
}

.kn-dropdown-divider.kn-more-overflow-divider {
  height: 1px;
  background: var(--kn-border);
  margin: 4px 0;
}

.kn-dropdown-item.kn-more-overflow-item.active {
  color: #7E1D2A !important;
  font-weight: 700;
}

.kn-dropdown-item.kn-more-overflow-item.active svg {
  fill: currentColor;
}

[data-theme="dark"] .kn-dropdown-item.kn-more-overflow-item.active {
  color: #FDA4AF !important;
}

.kn-dropdown-item.kn-more-overflow-item.kn-mode-edit {
  color: #0284C7 !important;
  font-weight: 700;
}

[data-theme="dark"] .kn-dropdown-item.kn-more-overflow-item.kn-mode-edit {
  color: #38BDF8 !important;
}

.kn-mob-history-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  padding: 2px;
}

.kn-mob-history-group .kn-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.kn-header-pill-group {
  display: inline-flex;
  align-items: center;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.kn-header-pill-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

.kn-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.kn-mascot-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kn-accent-soft);
  border: 1px solid var(--kn-border);
}

.kn-app-title {
  font-weight: 800;
  font-size: 0.94rem;
  letter-spacing: -0.01em;
  color: var(--kn-text);
  white-space: nowrap;
}

.kn-header-sep {
  width: 1px;
  height: 18px;
  background: var(--kn-border);
  margin-inline: 2px;
  flex-shrink: 0;
}

.kn-doc-title-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--kn-text);
  max-width: 300px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kn-doc-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tactile Button Foundations & Zero Browser Blue Outlines */
.kn-btn,
.kn-icon-btn,
.kn-tool-btn,
.kn-zoom-btn,
.kn-tab-pill,
.kn-chip-btn,
.kn-ctx-btn {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border: 1px solid transparent;
  background: transparent;
  color: var(--kn-text);
  font-family: inherit;
  font-size: 0.81rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 150ms ease,
              border-color 150ms ease,
              color 150ms ease,
              box-shadow 150ms ease;
}

.kn-btn:active,
.kn-icon-btn:active,
.kn-tool-btn:active,
.kn-zoom-btn:active,
.kn-tab-pill:active,
.kn-chip-btn:active,
.kn-ctx-btn:active {
  transform: scale(0.96) !important;
}

.kn-btn-back {
  padding: 5px 11px;
  background: var(--kn-bg);
  border-color: var(--kn-border);
  gap: 6px;
  font-weight: 700;
}
.kn-btn-back:hover {
  background: var(--kn-border-subtle);
}

.kn-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--kn-text-muted);
}
.kn-icon-btn:hover {
  background: var(--kn-bg);
  color: var(--kn-text);
}
.kn-icon-btn.active {
  background: var(--kn-sidebar-tab-active-bg);
  color: var(--kn-primary);
  border-color: rgba(126, 29, 42, 0.22);
}

.kn-btn-primary {
  background: var(--kn-primary);
  color: #FFFFFF !important;
  border-color: var(--kn-primary);
  padding: 5px 13px;
  border-radius: 8px;
  gap: 6px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(126, 29, 42, 0.25);
}
.kn-btn-primary:hover {
  background: var(--kn-primary-hover);
  border-color: var(--kn-primary-hover);
}
.kn-btn-primary:active {
  background: var(--kn-primary-active);
  transform: scale(0.96) !important;
}

/* 3. Clean Centered Top Toolbar (NO Horizontal Scroll Strip) */
.kn-toolbar {
  min-height: 46px;
  background: var(--kn-toolbar-bg);
  border-bottom: 1px solid var(--kn-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px;
  gap: 6px;
  flex-shrink: 0;
  z-index: 25;
  position: relative;
}

.kn-tool-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.kn-toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--kn-border);
  margin-inline: 4px;
  flex-shrink: 0;
}

.kn-tool-btn {
  height: 34px;
  padding-inline: 10px;
  min-width: 34px;
  border-radius: 7px;
  color: var(--kn-text-muted);
  gap: 6px;
  position: relative;
}
.kn-tool-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.kn-tool-caret {
  font-size: 0.72rem;
  opacity: 0.65;
  margin-inline-start: -1px;
  line-height: 1;
}
.kn-tool-btn:hover:not(:disabled) {
  background: var(--kn-bg);
  color: var(--kn-text);
}
.kn-tool-btn.active,
.kn-tool-btn[aria-checked="true"] {
  background: var(--kn-sidebar-tab-active-bg) !important;
  color: var(--kn-primary) !important;
  border: 1px solid rgba(126, 29, 42, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-weight: 700;
}
.kn-tool-btn:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.kn-fullscreen-btn {
  width: 34px;
  min-width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kn-fullscreen-btn svg {
  width: 17px;
  height: 17px;
}

.kn-tool-color-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.kn-page-input-wrap {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  gap: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  height: 28px;
}

.kn-page-input {
  width: 28px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--kn-text);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  outline: none;
  padding: 0;
}
.kn-page-input::-webkit-inner-spin-button,
.kn-page-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kn-zoom-btn {
  height: 28px;
  padding-inline: 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--kn-text);
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.kn-zoom-btn:hover {
  background: var(--kn-border-subtle);
}

.kn-sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--kn-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.kn-sidebar-collapse-btn:hover {
  background: var(--kn-bg);
  color: var(--kn-text);
}

/* 4. Floating Tool Control Panel (Anchored smoothly below active tool) */
.kn-tool-popover {
  position: fixed;
  top: 108px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  box-shadow: var(--kn-shadow-popover);
  border-radius: 12px;
  padding: 12px 14px;
  z-index: 60;
  min-width: 290px;
  max-width: 390px;
  display: none;
  flex-direction: column;
  gap: 10px;
  animation: knPopoverIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-tool-popover.open {
  display: flex;
}

@keyframes knPopoverIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.kn-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--kn-text);
  border-bottom: 1px solid var(--kn-border-subtle);
  padding-bottom: 6px;
}

.kn-popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.kn-popover-label {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--kn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kn-segmented-control {
  display: inline-flex;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  width: 100%;
}

.kn-seg-btn {
  flex: 1;
  padding: 5px 8px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--kn-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 130ms ease;
}
.kn-seg-btn.active {
  background: var(--kn-surface);
  color: var(--kn-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.kn-swatch-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.kn-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  position: relative;
}
.kn-color-swatch:hover {
  transform: scale(1.1);
}
.kn-color-swatch.active {
  border-color: var(--kn-primary);
  box-shadow: 0 0 0 2px var(--kn-surface), 0 0 0 4px var(--kn-primary);
  transform: scale(1.08);
}

.kn-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.kn-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--kn-primary);
  cursor: pointer;
  height: 5px;
}
.kn-slider-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--kn-text);
  min-width: 38px;
  text-align: end;
}

/* Live Preview Box inside Highlighter / Pen Popover */
.kn-live-preview-box {
  background: #FFFFFF;
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  position: relative;
  overflow: hidden;
}
.kn-hl-preview-sample {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1F1A17;
  position: relative;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Unified Presets Strip */
.kn-presets-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-top: 4px;
  scrollbar-width: none;
}
.kn-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--kn-text);
  cursor: pointer;
  white-space: nowrap;
}
.kn-preset-chip.active {
  border-color: var(--kn-primary);
  background: var(--kn-sidebar-tab-active-bg);
  color: var(--kn-primary);
}
.kn-preset-action,
.kn-preset-del {
  opacity: 0.55;
  font-size: 0.74rem;
  padding-inline-start: 2px;
  cursor: pointer;
  transition: opacity 120ms ease, color 120ms ease;
}
.kn-preset-action:hover {
  opacity: 1;
  color: var(--kn-primary);
}
.kn-preset-del:hover {
  opacity: 1;
  color: #DC2626;
}

/* ── Jnotes-Style Lasso / Selection Popover ────────────────────────────────── */
.kn-lasso-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--kn-border-subtle, #EDE7DD);
}

.kn-lasso-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--kn-text, #1F1A17);
  letter-spacing: -0.01em;
}

.kn-close-popover-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--kn-text-muted, #7C736B);
  background: transparent;
  border: none;
  font-size: 0.85rem;
  transition: all 120ms ease;
}

.kn-close-popover-btn:hover {
  background: rgba(126, 29, 42, 0.08);
  color: var(--brand-burgundy, #7E1D2A);
}

.kn-lasso-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.kn-lasso-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--kn-surface, #FFFFFF);
  border: 1.5px solid var(--kn-border, #E8E2D5);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
  gap: 6px;
  user-select: none;
  color: var(--kn-text-secondary, #5A524C);
  box-shadow: 0 1px 2px rgba(31, 26, 23, 0.04);
}

.kn-lasso-mode-card:hover {
  border-color: #CBB9AE;
  background: rgba(126, 29, 42, 0.03);
  color: var(--kn-text, #1F1A17);
}

.kn-lasso-mode-card:active {
  transform: scale(0.97);
}

.kn-lasso-mode-card.active {
  background: rgba(126, 29, 42, 0.08) !important;
  border-color: var(--brand-burgundy, #7E1D2A) !important;
  color: var(--brand-burgundy, #7E1D2A) !important;
  box-shadow: inset 0 0 0 1px var(--brand-burgundy, #7E1D2A), 0 2px 6px rgba(126, 29, 42, 0.12) !important;
}

.kn-lasso-mode-preview {
  width: 48px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.kn-lasso-mode-preview svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.kn-lasso-mode-name {
  font-size: 0.78rem;
  font-weight: 750;
  text-align: center;
  color: inherit;
}

.kn-lasso-section-title {
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kn-text-muted, #7C736B);
  margin-top: 6px;
  margin-bottom: 2px;
}

.kn-lasso-targets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

@media (max-width: 360px) {
  .kn-lasso-targets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kn-lasso-target-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: 8px;
  background: var(--kn-surface, #FFFFFF);
  border: 1px solid var(--kn-border, #E8E2D5);
  color: var(--kn-text, #1F1A17);
  cursor: pointer;
  transition: all 130ms cubic-bezier(0.16, 1, 0.3, 1);
  gap: 4px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(31, 26, 23, 0.03);
}

.kn-lasso-target-chip:hover {
  border-color: #B58A90;
  background: rgba(126, 29, 42, 0.03);
}

.kn-lasso-target-chip:active {
  transform: scale(0.96);
}

.kn-lasso-target-chip.active {
  background: rgba(126, 29, 42, 0.09) !important;
  border-color: var(--brand-burgundy, #7E1D2A) !important;
  color: var(--brand-burgundy, #7E1D2A) !important;
  font-weight: 750;
  box-shadow: inset 0 0 0 1px var(--brand-burgundy, #7E1D2A), 0 1px 4px rgba(126, 29, 42, 0.1) !important;
}

.kn-lasso-chip-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.kn-lasso-chip-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.kn-lasso-chip-text {
  font-size: 0.71rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: inherit;
}

[data-theme="dark"] .kn-lasso-mode-card.active,
[data-theme="dark"] .kn-lasso-target-chip.active {
  background: rgba(220, 38, 38, 0.16) !important;
  border-color: #F87171 !important;
  color: #FCA5A5 !important;
  box-shadow: inset 0 0 0 1px #F87171, 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 5. Search Popover */
.kn-search-popover {
  position: fixed;
  top: 62px;
  inset-inline-end: 24px;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  box-shadow: var(--kn-shadow-popover);
  border-radius: 12px;
  padding: 10px 12px;
  z-index: 75;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.kn-search-popover.open {
  display: flex;
}
.kn-search-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  padding: 4px 8px;
}
.kn-search-bar-row input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--kn-text);
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
}
.kn-search-count {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--kn-text-muted);
  white-space: nowrap;
}
.kn-search-results-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kn-search-result-item {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.77rem;
  color: var(--kn-text);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kn-search-result-item:hover,
.kn-search-result-item.active {
  background: var(--kn-sidebar-tab-active-bg);
  border-color: rgba(126, 29, 42, 0.22);
}

/* 6. Main Workspace Body */
.kn-workspace-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* 7. Left Navigation Sidebar (195-225px Desktop) */
.kn-sidebar-left {
  width: 215px;
  min-width: 215px;
  background: var(--kn-sidebar-bg);
  border-inline-end: 1px solid var(--kn-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 18;
  flex-shrink: 0;
}
.kn-sidebar-left.kn-sidebar-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-inline-end-color: transparent !important;
  visibility: hidden;
  pointer-events: none;
}

.kn-left-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-bottom: 1px solid var(--kn-border);
  flex-shrink: 0;
}

.kn-left-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kn-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 140ms ease;
}

.kn-left-nav-item-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.kn-left-nav-chevron {
  font-size: 0.95rem;
  opacity: 0.65;
}

.kn-sidebar-tab-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 8px 8px;
  border-bottom: 1px solid var(--kn-border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.kn-sidebar-tab-bar::-webkit-scrollbar {
  display: none;
}

.kn-tab-pill {
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--kn-text-muted);
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  border: none;
}
.kn-tab-pill:hover {
  color: var(--kn-text);
  background: var(--kn-sidebar-tab-bg);
}
.kn-tab-pill.active {
  background: var(--kn-sidebar-tab-active-bg) !important;
  color: var(--kn-sidebar-tab-active-color) !important;
}

.kn-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Thumbnail Item (Page Number Left + Preview Card Right matching reference image) */
.kn-thumbnail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: all 150ms ease;
  position: relative;
}
.kn-thumbnail-item:hover {
  background: var(--kn-bg);
}

.kn-thumb-badges {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  display: flex;
  gap: 3px;
  z-index: 2;
}
.kn-thumb-badge {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7E1D2A;
  box-shadow: 0 0 0 1.5px #FFF;
}

.kn-thumb-index {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--kn-text-muted);
  min-width: 18px;
  text-align: center;
}
.kn-thumbnail-item.active .kn-thumb-index {
  color: #7E1D2A;
}

.kn-thumb-preview {
  width: 112px;
  aspect-ratio: 1 / 1.33;
  background: #FFFFFF;
  border: 2px solid var(--kn-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.kn-thumbnail-item.active .kn-thumb-preview {
  border-color: #7E1D2A !important;
  box-shadow: 0 0 0 3px rgba(126, 29, 42, 0.14);
}
.kn-thumb-preview canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 8. Central Document Workspace & Layered Page Stack */
.kn-document-viewport {
  flex: 1;
  overflow: auto;
  background-color: var(--kn-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 64px;
  outline: none;
  direction: ltr !important; /* Critical: PDF documents and coordinates are LTR; prevents RTL flex centering sagittal cutoff */
}

.kn-pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  transform-origin: top center;
}

.kn-page-card {
  background-color: #FFFFFF;
  border: 1px solid var(--kn-border);
  box-shadow: var(--kn-shadow-page);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: width 120ms ease, height 120ms ease;
}

/* CRITICAL 5-LAYER PAGE STACK:
   1. .kn-pdf-canvas (Original PDF render, z-index 1)
   2. .kn-highlight-canvas (Under-text Highlighter with mix-blend-mode: multiply, z-index 2)
   3. .kn-text-layer (Selectable PDF text & Search highlights, z-index 3)
   4. .kn-annotation-layer (Pen strokes & Shapes above text, z-index 4)
   5. .kn-objects-layer (Interactive Text boxes, Images, Study Notes, Selection UI, z-index 5)
*/
.kn-pdf-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.kn-highlight-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.kn-text-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1.0;
  pointer-events: auto;
  z-index: 3;
  user-select: text;
}
.kn-text-layer ::selection {
  background: rgba(126, 29, 42, 0.18);
}

.kn-search-mark {
  position: absolute;
  background: rgba(250, 204, 21, 0.42);
  border-radius: 2px;
  pointer-events: none;
}
.kn-search-mark.current {
  background: rgba(126, 29, 42, 0.32);
  outline: 2px solid #7E1D2A;
}

.kn-annotation-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.kn-objects-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 25;
}

.kn-interaction-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: auto;
  touch-action: pan-x pan-y;
}
.kn-interaction-layer.tool-active {
  pointer-events: auto;
  touch-action: none;
}
.kn-interaction-layer.kn-drawing-active {
  z-index: 12;
  pointer-events: auto;
  touch-action: none;
}

/* Eraser Live Circle Cursor */
.kn-eraser-cursor {
  position: fixed;
  pointer-events: none;
  border: 2px solid #7E1D2A;
  background: rgba(126, 29, 42, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: none;
}

/* 9. On-Page Interactive Objects (Text, Image, Note, Selection Box) */
.kn-page-object {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  transform-origin: center center;
  touch-action: none;
}
.kn-page-object.selected {
  outline: none !important;
}

/* On-Page Text Box (Appears directly on page without border/box when idle; frame appears only on edit/select) */
.kn-textbox-obj {
  min-width: 60px;
  min-height: 28px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px dashed transparent;
  background: transparent;
  cursor: move;
}
.kn-textbox-obj.editing {
  border: 1.5px solid #2563EB;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.14);
  z-index: 30;
  cursor: text;
  touch-action: manipulation;
}
.kn-textbox-editor {
  width: 100%;
  min-height: 24px;
  height: 100%;
  outline: none;
  border: none;
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: inherit;
  user-select: text;
  -webkit-user-select: text;
}
.kn-textbox-obj.editing .kn-textbox-editor {
  cursor: text;
  touch-action: manipulation;
}
.kn-textbox-obj.editing .kn-textbox-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(120, 113, 108, 0.65);
  pointer-events: none;
}

.kn-search-page-group {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--kn-text-muted);
  padding: 6px 6px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--kn-border-subtle);
}
.kn-search-page-group:first-child {
  border-top: none;
}
.kn-search-snippet-mark {
  background: rgba(250, 204, 21, 0.55);
  color: #1F1A17;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}
.kn-img-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.kn-img-action-card {
  background: var(--kn-bg);
  border: 1px dashed var(--kn-border);
  border-radius: 8px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--kn-text);
  cursor: pointer;
  text-align: center;
}
.kn-img-action-card:hover {
  border-color: var(--kn-primary);
  background: var(--kn-sidebar-tab-active-bg);
  color: var(--kn-primary);
}
/* Kuro Notes Redesigned 2-Mode Eraser (Select Object & Partial Erase) */
.kn-eraser-modes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 6px 0 12px;
}
.kn-eraser-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--kn-border, #E5E7EB);
  background: var(--kn-bg, #FFFFFF);
  color: var(--kn-text, #1F2937);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  position: relative;
  outline: none;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.kn-eraser-mode-card:hover {
  border-color: #B91C1C;
  transform: translateY(-1px);
}
.kn-eraser-mode-card:active {
  transform: scale(0.98);
}
.kn-eraser-mode-card.active {
  background: #FDF2F4 !important;
  border-color: #7E1D2A !important;
  box-shadow: 0 2px 6px rgba(126, 29, 42, 0.08);
}
.kn-eraser-card-icon {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B5563;
  transition: color 0.18s ease;
}
.kn-eraser-mode-card.active .kn-eraser-card-icon {
  color: #7E1D2A !important;
}
.kn-eraser-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--kn-text, #1F2937);
  transition: color 0.18s ease;
}
.kn-eraser-mode-card.active .kn-eraser-card-title {
  color: #7E1D2A !important;
}
.kn-eraser-card-sub {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6B7280;
  margin-top: 3px;
  font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
  transition: color 0.18s ease;
}
.kn-eraser-mode-card.active .kn-eraser-card-sub {
  color: #9E3B49 !important;
}
[data-theme="dark"] .kn-eraser-mode-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F3F4F6;
}
[data-theme="dark"] .kn-eraser-mode-card .kn-eraser-card-icon {
  color: #9CA3AF;
}
[data-theme="dark"] .kn-eraser-mode-card.active {
  background: rgba(126, 29, 42, 0.3) !important;
  border-color: #E11D48 !important;
}
[data-theme="dark"] .kn-eraser-mode-card.active .kn-eraser-card-icon,
[data-theme="dark"] .kn-eraser-mode-card.active .kn-eraser-card-title {
  color: #FDA4AF !important;
}
[data-theme="dark"] .kn-eraser-mode-card.active .kn-eraser-card-sub {
  color: #FECDD3 !important;
}

.kn-eraser-quick-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  padding: 4px 0;
}
.kn-eraser-size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--kn-text-muted);
  flex: 1;
  transition: all 0.15s ease;
}
.kn-eraser-size-btn:hover {
  border-color: var(--kn-primary);
  color: var(--kn-primary);
}
.kn-eraser-size-btn.active {
  border-color: #7E1D2A;
  background: #FDF2F4;
  color: #7E1D2A;
}
[data-theme="dark"] .kn-eraser-size-btn.active {
  border-color: #E11D48;
  background: rgba(126, 29, 42, 0.3);
  color: #FDA4AF;
}

/* Eraser Selection Overlay & Floating Delete Action */
.kn-selection-box.is-eraser-sel {
  border: 2px dashed #7E1D2A !important;
  background: rgba(126, 29, 42, 0.08) !important;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 4px 14px rgba(126, 29, 42, 0.15);
  animation: knPulseEraserSel 1.8s infinite ease-in-out;
}
.kn-selection-box.is-eraser-sel:hover {
  background: rgba(126, 29, 42, 0.14) !important;
}
@keyframes knPulseEraserSel {
  0%, 100% { border-color: #7E1D2A; }
  50% { border-color: #B91C1C; }
}
[data-theme="dark"] .kn-selection-box.is-eraser-sel {
  border-color: #F87171 !important;
  background: rgba(248, 113, 113, 0.15) !important;
}
.kn-ctx-btn.danger.kn-ctx-eraser-del {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  padding: 5px 12px;
  background: #7E1D2A;
  color: #FFFFFF !important;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.kn-ctx-btn.danger.kn-ctx-eraser-del:hover {
  background: #9B2C3B !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* On-Page Image Object & Crop Frame */
.kn-image-obj {
  cursor: move;
  user-select: none;
}
.kn-image-obj img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  border-radius: 2px;
}
.kn-crop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kn-crop-box {
  position: absolute;
  border: 2px dashed #FFFFFF;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  cursor: move;
}

/* On-Page Structured Study Note Card */
.kn-note-obj {
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(31, 26, 23, 0.14);
  border: 1px solid rgba(126, 29, 42, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: move;
  transition: box-shadow 140ms ease;
  z-index: 21;
}
.kn-note-obj.collapsed {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kn-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.7rem;
  font-weight: 800;
  gap: 4px;
}
.kn-note-title-input {
  border: none;
  background: transparent;
  font-weight: 800;
  font-size: 0.76rem;
  color: #1F1A17;
  width: 100%;
  outline: none;
  padding: 4px 8px 0;
  font-family: inherit;
  touch-action: manipulation;
}
.kn-note-body-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.75rem;
  color: #292524;
  padding: 4px 8px 8px;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.45;
  touch-action: manipulation;
}

/* Selection Dashed Rectangular Bounding Box, 8 Square Handles, Top Rotation Handle & Contextual Bar */
.kn-selection-box {
  position: absolute;
  border: 1.5px dashed #7E1D2A;
  background: rgba(126, 29, 42, 0.04);
  pointer-events: auto;
  z-index: 20;
  cursor: grab;
  touch-action: none;
  box-sizing: border-box;
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
}
.kn-selection-box.is-dragging {
  cursor: grabbing !important;
}
.kn-selection-box.is-text-sel {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.04);
}
.kn-selection-box.is-note-sel {
  border-color: #B45309;
  background: rgba(245, 158, 11, 0.04);
  pointer-events: auto;
}
.kn-sel-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border: 2px solid #7E1D2A;
  border-radius: 2px;
  z-index: 26;
  pointer-events: auto;
  touch-action: none;
  box-sizing: border-box;
}
.kn-sel-handle::after {
  content: '';
  position: absolute;
  inset: -3px; /* Prevents swallowing the center body of small/medium bounding boxes */
}
.kn-selection-box.is-text-sel .kn-sel-handle:not(.rot) {
  border-color: #2563EB;
}
.kn-selection-box.is-note-sel .kn-sel-handle:not(.rot) {
  border-color: #B45309;
}
.kn-sel-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.kn-sel-handle.n  { top: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.kn-sel-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.kn-sel-handle.e  { top: calc(50% - 5px); right: -6px; cursor: ew-resize; }
.kn-sel-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.kn-sel-handle.s  { bottom: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.kn-sel-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.kn-sel-handle.w  { top: calc(50% - 5px); left: -6px; cursor: ew-resize; }
.kn-sel-handle.rot {
  top: -26px;
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #7E1D2A;
  cursor: grab;
}
.kn-sel-handle.rot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10px;
  width: 1.5px;
  height: 14px;
  background: #7E1D2A;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Floating Contextual Action Bar for Selection / Image / Text / Note */
.kn-context-bar {
  position: absolute;
  transform: translateX(-50%);
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  box-shadow: var(--kn-shadow-popover);
  border-radius: 9px;
  padding: 4px 6px;
  display: none;
  align-items: center;
  gap: 2px;
  z-index: 45;
  white-space: nowrap;
  pointer-events: auto;
}
.kn-context-bar.open {
  display: inline-flex;
}
.kn-ctx-sep {
  width: 1px;
  height: 14px;
  background: var(--kn-border);
  margin-inline: 2px;
  flex-shrink: 0;
}
.kn-ctx-btn {
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  color: var(--kn-text);
  gap: 4px;
}
.kn-ctx-btn:hover {
  background: var(--kn-bg);
  color: var(--kn-primary);
}
.kn-ctx-btn.danger {
  color: #DC2626;
}
.kn-ctx-btn.danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #DC2626;
}

/* 10. Right Smart Panel (280-320px Desktop) */
.kn-sidebar-right {
  width: 300px;
  min-width: 300px;
  background: var(--kn-sidebar-bg);
  border-inline-start: 1px solid var(--kn-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 18;
  flex-shrink: 0;
}
.kn-sidebar-right.kn-sidebar-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-inline-start-color: transparent !important;
  visibility: hidden;
  pointer-events: none;
}

.kn-outline-search {
  margin: 10px 10px 6px;
  padding: 7px 11px;
  background: var(--kn-bg);
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  font-size: 0.79rem;
  color: var(--kn-text);
  outline: none;
  width: calc(100% - 20px);
  box-sizing: border-box;
}

.kn-outline-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 10px 16px;
  overflow-y: auto;
  flex: 1;
}

.kn-outline-item {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--kn-text);
  cursor: pointer;
  gap: 8px;
  transition: all 130ms ease;
  line-height: 1.35;
}
.kn-outline-item:hover {
  background: var(--kn-bg);
}
.kn-outline-item.active {
  background: var(--kn-sidebar-tab-active-bg) !important;
  color: #7E1D2A !important;
  font-weight: 700;
}
.kn-outline-item.sub-item {
  padding-inline-start: 22px;
  font-size: 0.75rem;
  color: var(--kn-text-muted);
}

/* Sidebar Note Card */
.kn-sidebar-note-card {
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  border-radius: 9px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}
.kn-sidebar-note-card:hover {
  border-color: var(--kn-primary);
  transform: translateY(-1px);
}

/* 11. Focus / Distraction-Free Reading Mode */
.kn-reading-mode .kn-header,
.kn-reading-mode .kn-toolbar,
.kn-reading-mode .kn-sidebar-left,
.kn-reading-mode .kn-sidebar-right,
.kn-reading-mode .kn-mobile-bottom-bar,
.kn-reading-mode .kn-ipad-fab {
  display: none !important;
}

.kn-reading-mode-pill {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(28, 25, 23, 0.9);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.kn-reading-mode-pill button {
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 12. Dropdown Menus */
.kn-dropdown-wrap {
  position: relative;
}
.kn-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  box-shadow: var(--kn-shadow-popover);
  border-radius: 10px;
  padding: 6px;
  min-width: 185px;
  z-index: 80;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.kn-dropdown-menu.open {
  display: flex;
}
.kn-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--kn-text);
  font-size: 0.79rem;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
  width: 100%;
}
.kn-dropdown-item:hover {
  background: var(--kn-bg);
}
.kn-dropdown-item.active {
  background: var(--kn-sidebar-tab-active-bg);
  color: #7E1D2A;
  font-weight: 700;
}

/* 13. iPad Quick-Toggle Floating Corner Buttons & Mobile Bottom Bar */
.kn-ipad-fab {
  position: fixed;
  bottom: 18px;
  z-index: 35;
  background: var(--kn-surface);
  border: 1px solid var(--kn-border);
  box-shadow: var(--kn-shadow-popover);
  color: var(--kn-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  display: none;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.kn-ipad-fab-left { inset-inline-start: 18px; }
.kn-ipad-fab-right { inset-inline-end: 18px; }

.kn-mobile-bottom-bar {
  height: 44px;
  min-height: 44px;
  background: var(--kn-surface);
  border-top: 1px solid var(--kn-border);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-inline: 12px;
  z-index: 30;
  flex-shrink: 0;
}

/* 14. Responsive Breakpoints across ALL Devices: Desktop (>1024px), Tablet/iPad (768-1024px), Mobile (<768px) */
@media (max-width: 1180px) {
  .kn-doc-title-pill {
    max-width: 185px;
  }
  .kn-tool-btn {
    padding-inline: 8px;
    gap: 5px;
  }
}

@media (max-width: 1024px) {
  .kn-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    padding: 6px 12px 8px;
    row-gap: 8px;
    column-gap: 8px;
    align-items: center;
    justify-content: space-between;
  }
  .kn-header-left {
    order: 1;
    flex: 1 1 auto;
    max-width: calc(100% - 215px);
    min-width: 0;
    gap: 6px;
  }
  .kn-header-right {
    order: 2;
    margin-inline-start: auto;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    gap: 6px;
  }
  #kn-btn-search,
  #kn-btn-bookmark,
  #kn-btn-mode-toggle,
  #kn-btn-share,
  #kn-btn-header-more {
    display: inline-flex !important;
  }
  .kn-doc-title-pill {
    max-width: min(220px, 28vw);
    min-width: 0;
    padding: 4px 8px;
    font-size: 0.76rem;
  }
  .kn-btn-share-text {
    display: none;
  }
  #kn-btn-share {
    padding: 6px 8px;
  }
  .kn-header-controls {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border-top: 1px solid var(--kn-border-subtle);
    padding-top: 6px;
    margin-top: 2px;
  }
  .kn-controls-nav-zoom-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
  }
  .kn-toolbar {
    padding: 4px 8px;
  }
  .kn-tool-group {
    gap: 4px;
  }
  .kn-tool-btn {
    padding-inline: 7px;
    height: 34px;
    font-size: 0.76rem;
  }
  .kn-sidebar-right {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.14);
  }
}

@media (max-width: 860px) {
  .kn-sidebar-left {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.14);
  }
  .kn-app-title {
    font-size: 0.85rem;
  }
  .kn-doc-title-pill {
    max-width: min(160px, 24vw);
  }
}

@media (max-width: 767px) {
  .kn-header {
    flex-wrap: nowrap;
    height: 48px;
    min-height: 48px;
    padding: 4px 8px;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
  }
  .kn-header-left {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    gap: 4px;
  }
  #kn-btn-left-sidebar {
    display: none !important;
  }
  .kn-header-right {
    order: 2;
    margin-inline-start: auto;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    gap: 4px;
  }
  /* On mobile header, bookmark and share are available in More menu to prevent overflow */
  #kn-btn-bookmark,
  #kn-btn-share {
    display: none !important;
  }
  #kn-btn-search,
  #kn-btn-mode-toggle,
  #kn-btn-header-more {
    display: inline-flex !important;
  }
  .kn-more-overflow-group {
    display: block;
  }
  .kn-header-controls {
    display: none !important;
  }
  .kn-app-title {
    font-size: 0.82rem;
  }
  .kn-header-sep,
  .kn-btn-text,
  .kn-btn-share-text {
    display: none !important;
  }
  .kn-doc-title-pill {
    max-width: 115px;
    font-size: 0.74rem;
    padding: 3px 6px;
  }
  .kn-toolbar {
    height: auto;
    min-height: 42px;
    padding: 4px 6px;
  }
  .kn-tool-group {
    gap: 3px;
    width: 100%;
    justify-content: space-around;
  }
  .kn-tool-label {
    display: none;
  }
  .kn-tool-btn {
    padding-inline: 6px;
    min-width: 34px;
    height: 34px;
    gap: 2px;
  }
  .kn-ipad-fab {
    display: none !important;
  }
  .kn-mobile-bottom-bar {
    display: flex;
  }
  .kn-sidebar-left,
  .kn-sidebar-right {
    position: fixed;
    top: auto;
    bottom: 44px;
    left: 0;
    right: 0;
    width: 100% !important;
    min-width: 100% !important;
    height: 60vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.22);
    z-index: 55;
  }
  .kn-sidebar-left.kn-sidebar-collapsed,
  .kn-sidebar-right.kn-sidebar-collapsed {
    transform: translateY(105%);
  }
  .kn-document-viewport {
    padding: 14px 8px 32px;
  }
}

@media (max-width: 480px) {
  .kn-doc-title-pill {
    display: none !important;
  }
}

/* 15. Global Interaction Mode Toggle (👁 Browse Mode <-> ✎ Edit Mode) */
.kn-mode-toggle-btn {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 160ms ease,
              border-color 160ms ease,
              color 160ms ease,
              box-shadow 160ms ease;
}

.kn-mode-toggle-btn:active {
  transform: scale(0.93);
}

.kn-mode-toggle-btn .kn-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  pointer-events: none;
}

.kn-mode-toggle-btn.kn-mode-browse .kn-mode-icon-browse {
  display: inline-flex;
}
.kn-mode-toggle-btn.kn-mode-browse .kn-mode-icon-edit {
  display: none;
}

.kn-mode-toggle-btn.kn-mode-edit .kn-mode-icon-browse {
  display: none;
}
.kn-mode-toggle-btn.kn-mode-edit .kn-mode-icon-edit {
  display: inline-flex;
}

/* Browse Mode Visual State — Soft Neutral Active */
.kn-mode-toggle-btn.kn-mode-browse {
  background: rgba(126, 29, 42, 0.08);
  border: 1.5px solid rgba(126, 29, 42, 0.24);
  color: var(--kn-primary, #7E1D2A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.kn-mode-toggle-btn.kn-mode-browse:hover {
  background: rgba(126, 29, 42, 0.14);
  border-color: rgba(126, 29, 42, 0.38);
}

[data-theme="dark"] .kn-mode-toggle-btn.kn-mode-browse {
  background: rgba(253, 164, 175, 0.12);
  border-color: rgba(253, 164, 175, 0.28);
  color: #FDA4AF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Edit Mode Visual State — Strong Burgundy Active (#7E1D2A) */
.kn-mode-toggle-btn.kn-mode-edit {
  background: #7E1D2A !important;
  border: 1.5px solid #5C131D !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(126, 29, 42, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.kn-mode-toggle-btn.kn-mode-edit:hover {
  background: #691722 !important;
}

/* Floating Tooltip Badge (Never takes permanent layout space) */
.kn-mode-toggle-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  background: #1C1917;
  color: #FAF7F2;
  font-size: 0.69rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, transform 150ms cubic-bezier(0.16, 1, 0.3, 1), visibility 150ms ease;
  z-index: 95;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.kn-mode-toggle-btn:hover::after,
.kn-mode-toggle-btn:focus-visible::after,
.kn-mode-toggle-btn.show-tooltip::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Global Browse Mode Lock: Pure Reading, Scrolling, Pan & Pinch-Zoom */
.kuro-notes-workspace.kn-is-browse-mode .kn-document-viewport,
.kuro-notes-workspace.kn-is-browse-mode .kn-pages-stack,
.kuro-notes-workspace.kn-is-browse-mode .kn-page-card {
  touch-action: pan-x pan-y pinch-zoom;
}

.kuro-notes-workspace.kn-is-browse-mode .kn-interaction-layer {
  pointer-events: none !important;
  touch-action: pan-x pan-y pinch-zoom !important;
  cursor: default !important;
}

.kuro-notes-workspace.kn-is-browse-mode .kn-objects-layer,
.kuro-notes-workspace.kn-is-browse-mode .kn-page-object,
.kuro-notes-workspace.kn-is-browse-mode .kn-textbox-editor,
.kuro-notes-workspace.kn-is-browse-mode .kn-note-card,
.kuro-notes-workspace.kn-is-browse-mode .kn-note-header,
.kuro-notes-workspace.kn-is-browse-mode .kn-note-title-input,
.kuro-notes-workspace.kn-is-browse-mode .kn-note-textarea,
.kuro-notes-workspace.kn-is-browse-mode .kn-note-del-btn {
  pointer-events: none !important;
  cursor: default !important;
}

.kuro-notes-workspace.kn-is-browse-mode .kn-selection-box,
.kuro-notes-workspace.kn-is-browse-mode .kn-context-bar {
  display: none !important;
}

.kuro-notes-workspace.kn-is-browse-mode .kn-text-layer {
  pointer-events: auto;
  touch-action: pan-x pan-y pinch-zoom;
}

/* Tablet / iPad Touch-Friendly Sizing (38px x 38px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .kn-mode-toggle-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
}

/* Mobile Compact Icon-Only Sizing (34px x 34px) */
@media (max-width: 767px) {
  .kn-mode-toggle-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUESTION → EXACT LOCATION IN SHEET (LUXURY ACADEMIC INTEGRATION)
   ══════════════════════════════════════════════════════════════════════════ */

/* In-Card Faculty Explanation & Official Sheet Quote */
.dt-card-exp-section {
  padding: 16px;
  border-radius: 14px;
  background: var(--bg-surface-subtle, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .dt-card-exp-section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.dt-card-quote-box {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(200, 67, 67, 0.04);
  border: 1px dashed rgba(200, 67, 67, 0.28);
  border-inline-start: 3px solid var(--brand-accent, #C84343);
}

[data-theme="dark"] .dt-card-quote-box {
  background: rgba(200, 67, 67, 0.08);
  border-color: rgba(200, 67, 67, 0.35);
  border-inline-start-color: #EF4444;
}

/* View in Sheet Action Button(s) */
.dt-btn-view-sheet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.dt-btn-view-sheet:active {
  transform: scale(0.985);
}

.dt-btn-view-sheet.exact {
  background: rgba(126, 29, 42, 0.06);
  border: 1px solid rgba(126, 29, 42, 0.25);
  color: var(--brand-burgundy, #7E1D2A);
}

.dt-btn-view-sheet.exact:hover {
  background: rgba(126, 29, 42, 0.12);
  border-color: var(--brand-burgundy, #7E1D2A);
  box-shadow: 0 4px 12px rgba(126, 29, 42, 0.15);
}

[data-theme="dark"] .dt-btn-view-sheet.exact {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #F87171;
}

[data-theme="dark"] .dt-btn-view-sheet.exact:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #F87171;
}

.dt-btn-view-sheet.supporting {
  background: rgba(79, 70, 229, 0.05);
  border: 1px solid rgba(79, 70, 229, 0.22);
  color: #4F46E5;
}

.dt-btn-view-sheet.supporting:hover {
  background: rgba(79, 70, 229, 0.1);
  border-color: #4F46E5;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}

[data-theme="dark"] .dt-btn-view-sheet.supporting {
  background: rgba(129, 140, 248, 0.1);
  border-color: rgba(129, 140, 248, 0.3);
  color: #818CF8;
}

/* Source Type Pill Badges */
.dt-source-type-pill {
  font-size: 0.675rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.dt-source-type-pill.exact {
  background: rgba(126, 29, 42, 0.12);
  color: var(--brand-burgundy, #7E1D2A);
  border: 1px solid rgba(126, 29, 42, 0.22);
}

[data-theme="dark"] .dt-source-type-pill.exact {
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.35);
}

.dt-source-type-pill.supporting {
  background: rgba(79, 70, 229, 0.12);
  color: #4F46E5;
  border: 1px solid rgba(79, 70, 229, 0.22);
}

[data-theme="dark"] .dt-source-type-pill.supporting {
  background: rgba(129, 140, 248, 0.18);
  color: #C7D2FE;
  border-color: rgba(129, 140, 248, 0.35);
}

/* ── Split View Layout (iPad & Desktop: Question Left, PDF Viewer Right) ── */
#dt-quiz-stage-container.dt-split-active {
  display: grid !important;
  grid-template-columns: 460px 1fr !important;
  width: 98vw !important;
  max-width: 1560px !important;
  height: 94vh !important;
  max-height: 94vh !important;
  margin: 0 auto !important;
  gap: 16px !important;
  align-items: stretch !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1400px) {
  #dt-quiz-stage-container.dt-split-active {
    grid-template-columns: 500px 1fr !important;
  }
}

#dt-quiz-stage-container.dt-split-active #dt-quiz-card-box {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  max-width: 100% !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  border-radius: 18px !important;
}

#dt-quiz-stage-container.dt-split-active #dt-quiz-pdf-pane {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1)) !important;
  background: var(--bg-card, #FFFFFF) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
  position: relative !important;
  z-index: 10 !important;
}

#dt-quiz-stage-container.dt-split-active .kuro-notes-workspace {
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 18px !important;
}

#dt-quiz-stage-container.dt-split-active .kn-document-viewport {
  direction: ltr !important;
  padding: 16px 8px 64px !important;
  overflow-x: auto !important;
}

#dt-quiz-stage-container.dt-split-active .kn-page-card {
  max-width: 100% !important;
  margin: 0 auto !important;
}

#dt-quiz-stage-container.dt-split-active #kn-top-header {
  border-radius: 18px 18px 0 0 !important;
}

/* ── Mobile Sequential Fullscreen PDF Flow (< 900px) ── */
@media (max-width: 899px) {
  #dt-quiz-runner-modal.dt-mobile-pdf-active {
    padding: 0 !important;
    background: var(--bg-card, #FFFFFF) !important;
  }

  #dt-quiz-runner-modal.dt-mobile-pdf-active #dt-quiz-stage-container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  #dt-quiz-runner-modal.dt-mobile-pdf-active #dt-quiz-card-box {
    display: none !important;
  }

  #dt-quiz-runner-modal.dt-mobile-pdf-active #dt-quiz-pdf-pane {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    border: none !important;
  }

  #dt-quiz-runner-modal.dt-mobile-pdf-active .kuro-notes-workspace {
    height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* ── Non-Destructive Source Highlights Overlay ── */
.kn-source-ref-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 18;
}

.dt-question-source-highlight {
  position: absolute;
  pointer-events: none;
  border-radius: 4px;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dt-question-source-highlight.exact {
  background: rgba(250, 204, 21, 0.42);
  border: 1px solid rgba(234, 179, 8, 0.75);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.45);
}

.dt-question-source-highlight.supporting {
  background: rgba(56, 189, 248, 0.38);
  border: 1px solid rgba(14, 165, 233, 0.75);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

@keyframes kfSourcePulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.35);
    box-shadow: 0 0 22px rgba(250, 204, 21, 0.95);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.dt-question-source-highlight.pulse-attention {
  animation: kfSourcePulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2;
}

/* ── Contextual Floating Dock (Linear / Apple Glassmorphic Pill) ── */
.kn-source-ref-dock {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 99px;
  background: rgba(26, 22, 20, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #F9FAFB;
  font-size: 0.825rem;
  max-width: 90%;
  animation: slideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translate(-50%, 18px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.kn-dock-back-btn {
  background: var(--brand-burgundy, #7E1D2A);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  padding: 7px 15px;
  font-weight: 750;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(126, 29, 42, 0.35);
  white-space: nowrap;
}

.kn-dock-back-btn:hover {
  background: #962534;
  transform: translateY(-1px);
}

.kn-dock-back-btn:active {
  transform: scale(0.97);
}

.kn-dock-center-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kn-dock-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.775rem;
  white-space: nowrap;
}

.kn-dock-q-num {
  font-weight: 800;
  color: #FBBF24;
}

.kn-dock-sep {
  opacity: 0.4;
}

.kn-dock-status {
  font-weight: 750;
}

.kn-dock-status.exact {
  color: #FCD34D;
}

.kn-dock-status.supporting {
  color: #93C5FD;
}

.kn-dock-page {
  color: #D1D5DB;
  font-weight: 600;
}

.kn-dock-snippet {
  font-size: 0.735rem;
  font-style: italic;
  color: #9CA3AF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.kn-dock-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kn-dock-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #F3F4F6;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  padding: 6px 13px;
  font-weight: 700;
  font-size: 0.775rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.kn-dock-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.26);
}

.kn-dock-btn:active {
  transform: scale(0.97);
}

.kn-dock-keep-btn:hover {
  color: #FCD34D;
  border-color: rgba(252, 211, 77, 0.4);
}

@media (max-width: 767px) {
  .kn-source-ref-dock {
    bottom: 12px;
    padding: 8px 12px;
    gap: 8px;
    width: 94%;
    justify-content: space-between;
    border-radius: 16px;
  }

  .kn-dock-snippet {
    display: none;
  }
}

/* ── Fallback Warning Card (NO GUESSING Alert) ── */
.kn-source-fallback-card {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 92%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.15);
  color: #92400E;
  animation: slideDownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .kn-source-fallback-card {
  background: #272115;
  border-color: #78350F;
  color: #FDE68A;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translate(-50%, -14px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.kn-fallback-title {
  font-size: 0.92rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: #B45309;
}

[data-theme="dark"] .kn-fallback-title {
  color: #FBBF24;
}

.kn-fallback-sub {
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}

.kn-fallback-btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.kn-fallback-btn-row .kn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s;
}

.kn-fallback-btn-row .kn-btn-back-q {
  background: var(--brand-burgundy, #7E1D2A);
  color: #FFFFFF;
  border: none;
}

.kn-fallback-btn-row .kn-btn-back-q:hover {
  background: #962534;
}

.kn-fallback-btn-row .kn-btn-manual-read {
  background: transparent;
  color: #92400E;
  border: 1px solid #FCD34D;
}

[data-theme="dark"] .kn-fallback-btn-row .kn-btn-manual-read {
  color: #FDE68A;
  border-color: #78350F;
}

/* ── Keep Highlight Confirmation Modal ── */
.kn-keep-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12000;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.kn-keep-modal {
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
  border-radius: 18px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}











/* Absolute header override for full-page auth/wizard views */
body.login-view-active #site-header,
body.login-view-active .site-header,
body.login-view-active #app-sidebar,
body.login-view-active #sidebar-backdrop,
body.login-view-active .mobile-bottom-nav,
body.login-view-active #guest-encourage-banner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* ==========================================================================
   HIGH-PERFORMANCE 60 FPS GPU HARDWARE ACCELERATION & SMOOTHNESS OPTIMIZATIONS
   ========================================================================== */

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

/* Hardware accelerated spring transitions */
.header-nav-pill,
.sidebar-user-card,
.wizard-btn-primary,
.wizard-group-card,
.avatar-preset-card,
.login-submit-btn,
.btn-header-signout,
.subject-card,
.sheet-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tactile click responsiveness */
.wizard-btn-primary:active,
.login-submit-btn:active,
.header-nav-pill:active,
.avatar-preset-card:active,
.subject-card:active,
.sheet-card:active {
  transform: scale(0.97) translateZ(0) !important;
}

/* ==========================================================================
   FORMAL ACADEMIC PORTAL OVERRIDES (v24.0)
   Clean KURO FANGS Wordmark, Zero Empty Icon Squares, Crisp Outline Icons
   ========================================================================== */
img[src*="assets/characters/kuro"] {
  display: none !important;
}

.header-brand-avatar,
.sidebar-brand-emblem {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

#header-brand-name,
.header-brand-name {
  font-weight: 850 !important;
  color: #7D1E30 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

[data-theme="dark"] #header-brand-name,
[data-theme="dark"] .header-brand-name {
  color: #FDA4AF !important;
}

.keds-mascot-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #7D1E30 !important;
}

.kssc-icon-box svg,
.keds-mascot-wrap svg,
.ksrc-icon-box svg,
.continue-card-type-icon svg {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}