/* ==========================================
     🌟 1. ตัวแปรความเร็วและกราฟิก (Anti-Flicker + Design Tokens)
     ========================================== */
  :root {
    /* พื้นหลังไล่สีฟ้าสว่าง (มีสีพื้นรองรับป้องกันจอกระพริบขาว) */
    --bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
    --bg-fallback-solid: #bae6fd;

    /* กล่องข้อความสว่างใส (ลดการใช้ blur ซ้อนทับหลายชั้นเพื่อความเสถียรของ GPU) */
    --surface-color: rgba(248, 250, 252, 0.88);
    --surface-solid: #f0f9ff;
    --surface-solid-alt: #e2f1fd;
    --text-main: #0f172a;
    --text-muted: #334155;

    /* สีหลัก */
    --primary-color: #0284c7;
    --primary-hover: #0369a1;
    --danger-color: #ef4444;
    --danger-hover: #dc2626;
    --success-color: #10b981;

    /* เอฟเฟกต์กระจกและเงา */
    --blur-chrome: blur(8px);
    --border-color: rgba(255, 255, 255, 0.65);
    --soft-shadow: 0 4px 18px 0 rgba(2, 132, 199, 0.1);

    --transition-speed: 0.16s;
    --transition-page: 0.22s;
  }

  /* ==========================================
     🌌 ตัวแปรสีโหมดมืด (Dark Mode) : โทนดำ-ม่วง ทรงพลัง
     ========================================== */
  [data-theme="dark"] {
    --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #2e1065 100%);
    --bg-fallback-solid: #0f172a;
    --surface-color: rgba(15, 23, 42, 0.86);
    --surface-solid: #0f172a;
    --surface-solid-alt: #172038;
    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --primary-color: #a855f7;
    --primary-hover: #c084fc;
    --border-color: rgba(168, 85, 247, 0.34);
    --soft-shadow: 0 8px 26px 0 rgba(0, 0, 0, 0.45);
  }

  /* ==========================================
     ⚙️ รีเซ็ตค่าเริ่มต้นและฟอนต์
     ========================================== */
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Kanit', sans-serif;
    background-color: var(--bg-fallback-solid);
    background-image: var(--bg-gradient);
    color: var(--text-main);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
  }

  /* ==========================================
     🧩 Navbar & Cards
     ========================================== */
  .navbar {
    background: var(--surface-color);
    backdrop-filter: var(--blur-chrome);
    -webkit-backdrop-filter: var(--blur-chrome);
    border-bottom: 1px solid var(--border-color);
    padding: 0.85rem 1.75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.55rem 0.75rem;
    box-shadow: var(--soft-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
  }
  .nav-brand {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .nav-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  .nav-actions > button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .navbar .btn-outline {
    width: auto;
    min-block-size: 40px;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.92rem;
    line-height: 1.2;
    border-color: rgba(2, 132, 199, 0.34);
    background: rgba(255, 255, 255, 0.55);
    touch-action: manipulation;
  }
  [data-theme="dark"] .navbar .btn-outline {
    border-color: rgba(168, 85, 247, 0.42);
    background: rgba(30, 41, 59, 0.62);
  }

  .container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }

  /* ==========================================
     🎞️ Motion Design (เปลี่ยนหน้าแบบ Compositor Smooth)
     ========================================== */
  .page {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-page) ease, transform var(--transition-page) ease;
  }
  .page.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  .card {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--soft-shadow);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
  }
  @media (hover: hover) {
    .card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.16); }
  }

  /* ==========================================
     🚨 แก้ปัญหา SweetAlert2 สีขาวหลงยุค
     ========================================== */
  [data-theme="light"] .swal2-popup {
    background: rgba(240, 249, 255, 0.96) !important;
    backdrop-filter: var(--blur-chrome) !important;
    -webkit-backdrop-filter: var(--blur-chrome) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    color: #0f172a !important;
    border-radius: 16px !important;
  }
  [data-theme="light"] .swal2-title, [data-theme="light"] .swal2-html-container { color: #0f172a !important; }

  [data-theme="dark"] .swal2-popup {
    background: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: var(--blur-chrome) !important;
    -webkit-backdrop-filter: var(--blur-chrome) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
    color: #f8fafc !important;
    border-radius: 16px !important;
    box-shadow: 0 0 26px rgba(168, 85, 247, 0.18) !important;
  }
  [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: #f8fafc !important; }
  
  .swal2-confirm { background-color: var(--primary-color) !important; color: white !important; border-radius: 8px !important; }
  .swal2-cancel { background-color: transparent !important; color: var(--text-main) !important; border: 1px solid var(--text-muted) !important; border-radius: 8px !important; }
  
  /* ==========================================
     🖱️ Buttons (ปุ่มกดชัดเจน + Micro Interactions)
     ========================================== */
  .btn {
    font-family: 'Kanit', sans-serif;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* UX: เวลากดปุ่ม ต้องมีการยุบตัวลงไปและมีเงาบุ๋ม */
  .btn:active { 
    transform: scale(0.95); 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  }

  /* UX: ไอคอนในปุ่มขยับเล็กน้อยเวลาเอาเมาส์ชี้ */
  .btn:hover i {
    transform: scale(1.1) rotate(-5deg);
    transition: transform var(--transition-speed) ease;
  } 
  
  .btn-primary { background-color: var(--primary-color); color: white; }
  .btn-primary:hover { background-color: var(--primary-hover); }
  
  .btn-danger { background-color: var(--danger-color); color: white; }
  .btn-danger:hover { background-color: var(--danger-hover); }
  
  .btn-outline { background-color: transparent; border: 2px solid var(--border-color); color: var(--text-main); }
  .btn-outline:hover { border-color: var(--text-muted); }
  
  .btn-large { padding: 0.75rem 1.5rem; font-size: 1.1rem; }
  
  .icon-btn {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(2, 132, 199, 0.25);
    color: var(--text-main);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    min-inline-size: 40px;
    min-block-size: 40px;
    aspect-ratio: 1;
    padding: 0.45rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    touch-action: manipulation;
    transition: background-color 0.2s, border-color 0.2s;
  }
  [data-theme="dark"] .icon-btn {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(168, 85, 247, 0.38);
  }
  @media (hover: hover) {
    .icon-btn:hover { background-color: var(--border-color); }
  }

  /* ==========================================
     📝 Forms (อัปเกรดสีพื้นหลังรองรับ Dark Mode)
     ========================================== */
  .form-group { margin-bottom: 1rem; text-align: left; }
  .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
  
  .form-control {
    width: 100%; padding: 0.75rem;
    border: 1px solid var(--border-color); border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.6); 
    color: var(--text-main);
    font-family: 'Kanit', sans-serif; outline: none; transition: border-color 0.2s;
  }
  .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); }
  
  [data-theme="dark"] .form-control {
    background-color: rgba(0, 0, 0, 0.3); 
    color: #f8fafc;
  }
  [data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4); 
  }

  /* ==========================================
     📐 Utilities & Animations
     ========================================== */
  .text-center { text-align: center; }
  .text-primary { color: var(--primary-color); }
  .text-muted { color: var(--text-muted); }
  .mt-2 { margin-top: 1.5rem; }
  .action-buttons { display: flex; gap: 1rem; }
  .icon-large { font-size: 4rem; margin-bottom: 1rem; }

  /* UX: ปรับให้ดึงตัวแปรความเร็วมาใช้ จะได้พริ้วพร้อมกันทั้งเว็บ */
  .fade-in { animation: fadeIn var(--transition-page) ease-out; }
  .slide-up { animation: slideUp var(--transition-page) ease-out forwards; }
  
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

  /* ==========================================
     💀 Perceived Performance (Compositor-Only Skeleton Shimmer)
     ========================================== */
  .skeleton {
    position: relative;
    overflow: hidden;
    background: #dbeafe;
    border-radius: 8px;
    color: transparent !important;
    border: none !important;
    pointer-events: none;
  }
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    animation: shimmerSweep 1.35s infinite ease-in-out;
  }
  [data-theme="dark"] .skeleton {
    background: rgba(148, 163, 184, 0.14);
  }
  [data-theme="dark"] .skeleton::after {
    background: linear-gradient(90deg, transparent 0%, rgba(192, 132, 252, 0.22) 50%, transparent 100%);
  }
  @keyframes shimmerSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* ==========================================
     📭 Empty State UX (เวลาที่ไม่มีข้อมูลให้โชว์แบบสวยๆ)
     ========================================== */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-muted);
    opacity: 0;
    animation: fadeIn var(--transition-page) forwards;
  }
  .empty-state i {
    font-size: 3.5rem;
    opacity: 0.35;
    margin-bottom: 1rem;
    color: var(--primary-color);
  }
  .empty-state h3 { 
    margin: 0 0 0.5rem 0; 
    color: var(--text-main); 
  }
      
  /* ==========================================
     🌟 อัปเกรดเอฟเฟกต์ Gaming (Compositor-Friendly GPU Effects)
     ========================================== */
  .glow-gold {
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.38), inset 0 0 8px rgba(251, 191, 36, 0.12) !important;
    border: 2px solid #f59e0b !important;
    animation: goldPulse 2.8s infinite alternate ease-in-out;
  }
  @keyframes goldPulse {
    0% { transform: scale(1); opacity: 0.94; }
    100% { transform: scale(1.015); opacity: 1; }
  }

  .fire-glow {
    display: inline-block;
    color: #f97316;
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.65);
    animation: fireFlicker 1.4s infinite alternate ease-in-out;
  }
  @keyframes fireFlicker {
    0% { transform: scale(1) translateY(0); opacity: 0.9; }
    100% { transform: scale(1.08) translateY(-1px); opacity: 1; }
  }

  .text-danger-pulse {
    color: var(--danger-color);
    font-weight: bold;
    margin-left: 8px;
    display: inline-block;
    animation: textRedAlert 1.8s infinite ease-in-out;
  }
  @keyframes textRedAlert {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.72; color: #b91c1c; transform: scale(1.02); }
  }

  .badge-new-shine {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    color: white !important;
    padding: 2px 10px !important;
    border: none !important;
  }
  .badge-new-shine::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: shimmerSweep 2.4s infinite ease-in-out;
  }

  .progress-bar-striped {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.16) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
  }

  /* ==========================================
     🛠️ แก้บั๊ก Dropdown ขาวกลืนขาว (Select Options & Optgroup)
     ========================================== */
  [data-theme="light"] select option,
  [data-theme="light"] select optgroup {
    background-color: #ffffff; 
    color: #0f172a; 
  }
  [data-theme="dark"] select option {
    background-color: #0f172a; 
    color: #f8fafc; 
  }
  [data-theme="dark"] select optgroup {
    background-color: #1e1b4b;
    color: #c084fc;
    font-weight: bold;
  }

  /* ==========================================
     🏆 ระบบ Achievements 7 ระดับ (Gaming RPG Tiers - Zero Repaint)
     ========================================== */
  .achieve-badge {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    cursor: default;
  }
  .achieve-badge:hover { transform: translateY(-2px) scale(1.04); }

  .badge-mythic {
    background: linear-gradient(115deg, #ef4444, #f59e0b, #10b981, #3b82f6, #9333ea);
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
    animation: floatUpDown 3.2s ease-in-out infinite;
  }
  .badge-mythic::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    animation: shimmerSweep 3.2s infinite ease-in-out;
  }

  .badge-legendary {
    background: linear-gradient(135deg, #fbbf24, #ea580c);
    color: white;
    border: 1px solid #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
    animation: goldPulse 2.4s infinite alternate ease-in-out;
  }

  .badge-epic {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: white;
    border: 1px solid rgba(244, 114, 182, 0.65);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
    animation: neonFlicker 2.4s infinite alternate ease-in-out;
  }
  @keyframes neonFlicker {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.02); }
  }

  .badge-rare {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: white;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
  }

  .badge-common {
    background: var(--surface-color);
    color: var(--success-color);
    border: 1px solid var(--success-color);
  }

  .badge-late {
    background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 10px, #d97706 10px, #d97706 20px);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  }

  .badge-cursed {
    background: #111827;
    color: #ef4444;
    border: 1px solid #ef4444;
    box-shadow: inset 0 0 10px rgba(239, 68, 68, 0.45);
    animation: glitchShake 4s infinite;
  }
  @keyframes glitchShake {
    0%, 96% { transform: translate(0, 0); }
    97% { transform: translate(-2px, 1px); }
    98% { transform: translate(2px, -1px); }
    100% { transform: translate(0, 0); }
  }

  .badge-secret {
    background: linear-gradient(135deg, #090d16 0%, #312e81 50%, #090d16 100%);
    color: #e0e7ff;
    border: 1px solid #6366f1;
    box-shadow: 0 0 12px rgba(79, 70, 229, 0.5), inset 0 0 8px rgba(0, 0, 0, 0.7);
    text-shadow: 0 0 5px rgba(255,255,255,0.45);
    animation: secretAura 3s infinite alternate ease-in-out;
  }
  @keyframes secretAura {
    0% { opacity: 0.92; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.025); }
  }

  .achievement-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    padding: 0.5rem 0;
  }

  /* ==========================================
     👑 ป้ายอันดับ 1 สุดอลังการ (Super Rank One + Graduation Banner)
     ========================================== */
  .super-rank-one,
  .grad-celebrate-card {
    position: relative;
    background: linear-gradient(135deg, #b45309, #d97706, #f59e0b);
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
    border: 2.5px solid #fff;
    border-radius: 16px;
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    margin-top: 1rem;
  }
  .grad-celebrate-card {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding: 2rem 1.5rem;
  }
  .super-rank-one {
    animation: pulseGlow 2.4s alternate infinite ease-in-out;
  }
  .super-rank-one::before,
  .grad-celebrate-card::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-140%) skewX(-25deg);
    animation: superShineSweep 3.4s infinite ease-in-out;
    pointer-events: none;
  }
  @keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.96; }
    100% { transform: scale(1.012); opacity: 1; }
  }
  @keyframes superShineSweep {
    0% { transform: translateX(-140%) skewX(-25deg); }
    55%, 100% { transform: translateX(340%) skewX(-25deg); }
  }

  /* ==========================================
     💖 ระบบ Cheer Up (ป้ายพลังบวกรายบุคคล)
     ========================================== */
  .cheer-box {
    padding: 1.2rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--soft-shadow);
    transition: transform var(--transition-speed) ease;
    animation: slideUp var(--transition-page) ease-out;
  }
  .cheer-box:hover { transform: translateY(-2px); }
  
  .cheer-hero { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.05)); border: 1px solid #34d399; }
  .cheer-hero .c-icon { color: #10b981; }
  
  .cheer-star { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.05)); border: 1px solid #60a5fa; }
  .cheer-star .c-icon { color: #3b82f6; }
  
  .cheer-fighter { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.05)); border: 1px solid #fbbf24; }
  .cheer-fighter .c-icon { color: #f59e0b; }
  
  .cheer-seed { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(192, 132, 252, 0.05)); border: 1px solid #c084fc; }
  .cheer-seed .c-icon { color: #a855f7; }

  .cheer-warm { background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(244, 114, 182, 0.05)); border: 1px solid #f472b6; }
  .cheer-warm .c-icon { color: #ec4899; }

  .achievement-wrap {
    display: flex;
    flex-wrap: wrap; 
    gap: 0.8rem; 
    justify-content: center;
    padding: 1rem 0;
  }
  .achieve-badge {
    white-space: normal !important; 
    text-align: center;
    line-height: 1.3;
    padding: 0.5rem 0.8rem !important; 
  }

  .class-rank-box {
    background: var(--surface-color); 
    border: 2px dashed var(--border-color); 
    padding: 1.2rem; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-top: 1rem;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
  }

  /* ==========================================
     📱 ปรับแต่งเลย์เอาต์มือถือขั้นสูง (Advanced Mobile Layout)
     ========================================== */
  @media (max-width: 600px) {
    .container { padding: 0 0.8rem; margin: 1rem auto; }
    .card { padding: 1.2rem; border-radius: 16px; width: 100%; }
    
    .btn, .btn-outline {
      width: 100%;
      justify-content: center;
      padding: 0.8rem !important;
    }

    /* ⚡ ยกเว้นปุ่มใน Navbar และปุ่มควบคุมขนาดกะทัดรัด (Pill Chips / Header Actions) ไม่ให้ถูกขยาย 100% บนมือถือ */
    .navbar .perf-toggle-btn,
    .navbar .icon-btn,
    .navbar .btn,
    .navbar .btn-outline {
      width: auto !important;
      max-width: max-content !important;
      flex: 0 0 auto !important;
      min-block-size: 44px;
    }
    .navbar .btn,
    .navbar .btn-outline {
      padding: 0.42rem 0.85rem !important;
      font-size: 0.88rem;
      border-radius: 999px;
    }

    .quick-cls-pill, 
    .asm-cls-pill,
    .qr-queue-clear-btn,
    .qr-queue-remove-btn,
    .sm-view-filter-btn,
    .asm-cat-pill,
    .asm-round-focus-btn,
    .sm-row-filter-chip,
    .sm-tab-btn,
    .sm-inline-btn,
    .asm-inline-btn,
    .asm-seg-btn,
    .sm-back-btn,
    .asm-dnp-btn,
    .fc-back-btn,
    .fc-inline-btn,
    .fc-card-undo-btn,
    .fc-sync-retry-action,
    .fc-keypad-btn,
    .fc-scan-submit-btn,
    .am-header-btn,
    .am-pill-action-btn,
    .am-inline-btn,
    .am-row-action-btn,
    .hr-back-btn,
    .hr-inline-btn,
    .hr-undo-btn,
    .hr-quick-submit-btn,
    .hr-batch-submit-btn,
    .hr-vault-sync-btn,
    .hr-filter-reset-btn,
    .hr-search-clear-btn,
    .login-pass-toggle,
    .hr-action-btn,
    .hr-slip-btn,
    .td-header-btn,
    .td-logout-btn,
    .td-retry-chip,
    .td-search-clear-btn,
    .td-empty-chip,
    .admin-hub-collapse-btn,
    .home-scan-submit-btn {
      width: auto !important;
      max-width: max-content !important;
      flex: 0 0 auto !important;
    }
    .quick-cls-pill,
    .asm-cls-pill {
      padding: 6px 14px !important;
    }
    .sm-view-filter-btn,
    .asm-cat-pill,
    .asm-round-focus-btn,
    .sm-row-filter-chip,
    .sm-tab-btn,
    .sm-inline-btn,
    .asm-inline-btn,
    .asm-seg-btn,
    .sm-back-btn,
    .asm-dnp-btn,
    .fc-back-btn,
    .fc-inline-btn,
    .fc-card-undo-btn,
    .fc-keypad-btn,
    .fc-scan-submit-btn,
    .am-header-btn,
    .am-pill-action-btn,
    .am-inline-btn,
    .am-row-action-btn,
    .hr-back-btn,
    .hr-inline-btn,
    .hr-undo-btn,
    .hr-quick-submit-btn,
    .hr-batch-submit-btn,
    .hr-vault-sync-btn,
    .hr-filter-reset-btn,
    .hr-action-btn,
    .hr-slip-btn,
    .td-header-btn,
    .td-logout-btn {
      padding: 0.45rem 0.85rem !important;
      min-height: 44px;
    }
    .lost-qr-confirm-btn {
      width: auto !important;
      flex: 1 1 135px !important;
      min-height: 44px !important;
      padding: 0.55rem 0.9rem !important;
    }
    .sm-view-filter-btn {
      flex: 1 1 auto !important;
    }
    .fc-scan-submit-btn {
      flex: 1 1 auto !important;
      max-width: none !important;
    }
    .asm-seg-btn {
      flex: 1 1 0 !important;
      max-width: none !important;
      padding: 0.5rem 0.35rem !important;
    }

    div[style*="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));"] {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }
    
    button.btn[onclick*="openFastCheck"], 
    button.btn[onclick*="openAssignmentManager"] {
      padding: 1.5rem 1rem !important;
    }
    
    .stats-grid {
      grid-template-columns: 1fr !important;
      gap: 0.8rem !important;
    }
    
    #export-result-area, #hr-result-area {
      margin: 1rem -0.5rem; 
      border-radius: 0;
    }
    
    table { min-width: 500px; } 
    
    #am-class-container {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important; 
      gap: 0.5rem !important;
    }
    
    h2 { font-size: 1.3rem !important; }
    .nav-brand { font-size: 1.2rem; }
    .navbar { padding: 0.7rem 0.95rem; gap: 0.5rem 0.65rem; }

    #student-dashboard .sd-profile-top {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 0.75rem;
    }

    #student-dashboard .sd-profile-actions {
      width: 100%;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center;
      text-align: left;
    }

    #student-dashboard .sd-logout-btn {
      width: auto;
      min-height: 44px;
      padding: 0.45rem 0.9rem;
    }

    .assignment-grid {
      grid-template-columns: 1fr !important; 
    }

    .task-header-flex {
      flex-direction: column !important;
      gap: 1rem !important;
    }
    
    .task-status-container {
      width: 100% !important;
      text-align: right !important;
      border-top: 1px dashed var(--border-color);
      padding-top: 0.8rem;
      margin-top: 0.5rem;
    }
    
    .task-status-container div {
      width: 100% !important; 
      padding: 0.6rem !important;
      font-size: 1rem !important;
    }

    body { 
      background-attachment: scroll !important; 
    }
    
    .achieve-badge {
      font-size: 0.75rem !important;
      padding: 0.3rem 0.6rem !important;
    }
    
    .super-rank-one {
      flex-direction: column;
      text-align: center;
      gap: 1rem;
      padding: 1.2rem !important;
    }
  }
  
  /* ==========================================
     💖 Student Care UI (กระดานฮีลใจ & อารมณ์ V3 Mobile-First)
     ========================================== */
  .care-board-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    container-type: inline-size;
    container-name: care-board;
  }
  @media (max-width: 900px) {
    .care-board-grid { grid-template-columns: minmax(0, 1fr); }
  }
  
  .mail-card,
  .care-mail-card {
    background: var(--surface-color); 
    border: 1px solid var(--border-color);
    border-left: 4px solid #ec4899; 
    padding: 1rem; 
    border-radius: 12px; 
    box-shadow: var(--soft-shadow);
    color: var(--text-main);
  }

  /* ==========================================
     🌟 แก้ไขระยะห่างหน้าแอดมิน 
     ========================================== */
  #admin-management-page h3, 
  #teacher-dashboard h3 {
      margin-top: 2.5rem !important; 
      margin-bottom: 1.5rem !important;
      padding-top: 1rem;
      border-top: 1px dashed var(--border-color);
  }
  
  #admin-management-page h3:first-of-type,
  #teacher-dashboard h3:first-of-type {
      margin-top: 0 !important;
      border-top: none;
      padding-top: 0;
  }

/* ==========================================
     🖨️ ระบบ Print & QR Card Design (ปรับปรุงใหม่ แยกจอ/กระดาษ เด็ดขาด)
     ========================================== */
  #print-area {
    display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center;
    padding: 1.5rem; background: rgba(0,0,0,0.02); border-radius: 12px;
  }

  .qr-card-container {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--surface-color); padding: 1.2rem; border-radius: 16px;
    box-shadow: var(--soft-shadow); border: 1px solid var(--border-color);
    transition: transform 0.2s;
    max-width: 100%;
    box-sizing: border-box;
  }
  @media screen {
    .qr-card-container {
      content-visibility: auto;
      contain-intrinsic-size: auto 240px;
    }
    @supports not (content-visibility: auto) {
      .qr-card-container {
        contain: layout style paint;
      }
    }
  }
  .qr-card-container:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

  #print-area {
    --qr-accent: #2563eb;
    --qr-accent-dark: #1e3a8a;
    --qr-border: #3b82f6;
    --qr-divider: #93c5fd;
    --qr-bg-start: #ffffff;
    --qr-bg-end: #eff6ff;
    --qr-sub-text: #334155;
    --qr-badge-bg: #2563eb;
    --qr-badge-fg: #ffffff;
    --qr-id-bg: #eff6ff;
    --qr-id-border: #3b82f6;
    --qr-id-fg: #1e40af;
  }

  .qr-card {
    border: 2px dashed var(--qr-border, #3b82f6); border-radius: 12px; padding: 15px;
    background-color: var(--qr-bg-start, #ffffff);
    background-image: linear-gradient(135deg, var(--qr-bg-start, #ffffff) 0%, var(--qr-bg-end, #eff6ff) 100%);
    color: #000; display: flex; flex-direction: row;
    align-items: center; justify-content: space-between;
    width: 420px; height: 160px; box-shadow: inset 0 0 10px color-mix(in oklab, var(--qr-accent, #2563eb) 8%, transparent);
    overflow: hidden; box-sizing: border-box; position: relative;
    transition: none !important;
  }
  .qr-card * {
    transition: none !important;
  }

  .qr-top-system {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-right: 2px dashed var(--qr-divider, #93c5fd); padding-right: 10px; width: 25%; height: 100%;
  }
  .qr-top-system img { width: 65px; height: 65px; border: 1px solid var(--qr-divider, #93c5fd); border-radius: 8px; padding: 2px; background: #fff; }
  .qr-top-system div { text-align: center; }
  .qr-top-system div div:first-child { font-weight: bold; font-size: 0.8rem; color: var(--qr-accent, #2563eb); line-height: 1.1; margin-top: 5px;}
  .qr-top-system div div:last-child { font-size: 0.65rem; color: #475569; }

  .qr-card-info { width: 45%; min-width: 0; padding: 0 12px; text-align: left; overflow: hidden; }
  .qr-card-info h4 { margin: 0 0 5px 0; font-size: 1.1rem; font-weight: 800; color: var(--qr-accent-dark, #1e3a8a); line-height: 1.2; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .qr-card-info p { margin: 2px 0; font-size: 0.85rem; color: var(--qr-sub-text, #334155); }
  .qr-card-info p strong { color: var(--qr-accent, #2563eb); }

  .qr-main-token { width: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .qr-main-token img { width: 90px; height: 90px; padding: 3px; border-radius: 8px; border: 1px solid var(--qr-divider, #93c5fd); background: #fff; }
  .qr-main-token .warning {
    background: var(--qr-badge-bg, #2563eb);
    color: var(--qr-badge-fg, #ffffff);
    font-size: 0.65rem; padding: 3px 6px; border-radius: 4px; font-weight: bold; margin-top: 6px; text-align: center;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  @supports (color: contrast-color(#000)) {
    #print-area.qr-theme-color .qr-main-token .warning {
      color: contrast-color(var(--qr-badge-bg, #2563eb));
    }
  }

  .student-id-highlight {
    font-size: 0.85rem; font-weight: 900; color: var(--qr-id-fg, #1e40af); background: var(--qr-id-bg, #eff6ff);
    border: 1.5px solid var(--qr-id-border, #3b82f6); padding: 2px 8px; border-radius: 4px; margin-top: 5px;
  }

  /* Visual Customization Skins (Zero impact on card dimensions or proportions) */
  #print-area.qr-theme-color.qr-pat-dots .qr-card {
    background-image:
      radial-gradient(color-mix(in oklab, var(--qr-accent, #2563eb) 18%, transparent) 1.25px, transparent 1.25px),
      linear-gradient(135deg, var(--qr-bg-start, #ffffff) 0%, var(--qr-bg-end, #eff6ff) 100%);
    background-size: 12px 12px, 100% 100%;
  }
  #print-area.qr-theme-color.qr-pat-grid .qr-card {
    background-image:
      linear-gradient(color-mix(in oklab, var(--qr-accent, #2563eb) 11%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in oklab, var(--qr-accent, #2563eb) 11%, transparent) 1px, transparent 1px),
      linear-gradient(135deg, var(--qr-bg-start, #ffffff) 0%, var(--qr-bg-end, #eff6ff) 100%);
    background-size: 14px 14px, 14px 14px, 100% 100%;
  }
  #print-area.qr-theme-color.qr-pat-diagonal .qr-card {
    background-image:
      repeating-linear-gradient(-45deg, color-mix(in oklab, var(--qr-accent, #2563eb) 9%, transparent) 0 6px, transparent 6px 14px),
      linear-gradient(135deg, var(--qr-bg-start, #ffffff) 0%, var(--qr-bg-end, #eff6ff) 100%);
  }

  #print-area.qr-theme-color.qr-bdr-solid .qr-card { border-style: solid; border-color: var(--qr-border, #3b82f6); }
  #print-area.qr-theme-color.qr-bdr-double .qr-card { border-style: double; border-width: 3px; border-color: var(--qr-border, #3b82f6); }
  #print-area.qr-theme-color.qr-bdr-accent-bar .qr-card {
    border-style: dashed;
    border-color: var(--qr-border, #3b82f6);
    box-shadow: inset 7px 0 0 var(--qr-accent, #2563eb), inset 0 0 10px rgba(0,0,0,0.04);
  }
  #print-area.qr-theme-color .btn-save-img {
    background: var(--qr-badge-bg, var(--primary-color));
    color: var(--qr-badge-fg, #ffffff);
    border: 1.5px solid var(--qr-border, transparent);
  }
  @media (hover: hover) {
    #print-area.qr-theme-color .btn-save-img:hover {
      background: var(--qr-accent-dark, var(--primary-hover));
      color: #ffffff;
    }
  }

  @media screen and (max-width: 480px) {
    #print-area .qr-card-container { padding: 0.75rem; width: 100%; }
    #print-area .qr-card { zoom: 0.72; }
  }

  /* 🖨️/🖥️ พรีวิวหน้าจอเมื่อเลือกโหมดขาวดำ (WYSIWYG ตรงกับกระดาษพิมพ์) */
  #print-area.qr-theme-bw .qr-card {
    border-color: #000; border-style: dashed; background: #fff; background-image: none; box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
  }
  #print-area.qr-theme-bw .qr-top-system { border-right-color: #cbd5e1; }
  #print-area.qr-theme-bw .qr-top-system img,
  #print-area.qr-theme-bw .qr-main-token img { border-color: #d1d5db; }
  #print-area.qr-theme-bw .qr-top-system div div:first-child { color: #000; }
  #print-area.qr-theme-bw .qr-top-system div div:last-child { color: #555; }
  #print-area.qr-theme-bw .qr-card-info h4 { color: #000; }
  #print-area.qr-theme-bw .qr-card-info p,
  #print-area.qr-theme-bw .qr-card-info p strong { color: #222; }
  #print-area.qr-theme-bw .qr-main-token .warning { background: #111; color: #fff; }
  #print-area.qr-theme-bw .student-id-highlight { color: #000; background: #fff; border: 1.5px solid #000; }
  #print-area.qr-theme-bw .btn-save-img { background: #334155; }
  #print-area.qr-theme-bw .btn-save-img:hover { background: #1e293b; }

  .btn-save-img {
    background: var(--primary-color); border: none; color: white; padding: 10px 18px; min-height: 44px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; margin-top: 5px; width: 100%; touch-action: manipulation;
  }
  .btn-save-img:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); background: #3b82f6;}

  .teacher-qr-card {
    border: 3px solid #ef4444; border-radius: 15px; padding: 20px; text-align: center;
    background: #fff; width: 350px; color: #000; box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.1);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .teacher-qr-card h2 { color: #ef4444; margin-bottom: 5px; font-size: 1.5rem; }
  .teacher-qr-card h4 { color: #666; margin-bottom: 10px; }
  .teacher-qr-card img { width: 200px; height: 200px; margin: 15px 0; border-radius: 12px; border: 1px solid #ddd; padding: 5px; }
  .teacher-qr-card .warning-box { background: #ef4444; color: white; padding: 8px; border-radius: 8px; font-size: 0.9rem; font-weight: bold; width: 100%; margin-bottom: 10px; }
  .teacher-qr-card .url-text { font-size: 0.85rem; color: #666; word-break: break-all; line-height: 1.3; padding: 0 10px;}

  /* 🖥️ เฉพาะการแสดงผลบนหน้าจอ (Screen Only) ให้ยืดหยุ่นสวยงาม */
  @media screen {
    .a4-print-page { width: 100%; height: auto; padding: 0; background: transparent; }
    .a4-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; width: 100%; }

    .a4-scratch-page {
      width: 210mm;
      min-height: 297mm;
      max-height: 297mm;
      padding: 4mm 4mm;
      margin: 15px auto;
      background: white;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
      border-radius: 4px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .a4-scratch-grid {
      display: grid;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    .a4-scratch-grid.cols-4.rows-11 {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(11, 24.8mm);
      gap: 1.2mm 1.2mm;
    }
    .a4-scratch-grid.cols-4.rows-10 {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(10, 27.2mm);
      gap: 1.5mm 1.5mm;
    }
    .a4-scratch-grid.cols-2.rows-10 {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(10, 27.2mm);
      gap: 1.8mm 3mm;
    }
    .a4-scratch-grid.cols-2.rows-8 {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(8, 34mm);
      gap: 2.5mm 3mm;
    }
    .sc-print-card {
      border: 1.2px dashed #000;
      border-radius: 4px;
      padding: 1mm 1.5mm;
      background: #fff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      box-sizing: border-box;
      height: 100%;
      width: 100%;
    }
    .sc-print-card.blank {
      border: 1px dashed #cbd5e1;
      background: #fafafa;
      opacity: 0.25;
    }
    .sc-card-side-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding-right: 1.5mm;
      overflow: hidden;
    }
    .sc-card-meta {
      font-size: 6.5pt;
      font-weight: 700;
      color: #475569;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.15;
      margin-bottom: 0.5px;
    }
    .sc-card-num {
      font-size: 8pt;
      font-weight: 800;
      color: #6d28d9;
      line-height: 1.2;
      margin-bottom: 0.5px;
    }
    .sc-card-name {
      font-size: 8pt;
      font-weight: 800;
      color: #000;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }
    .sc-card-cols2 .sc-card-meta { font-size: 7.5pt; margin-bottom: 1px; }
    .sc-card-cols2 .sc-card-num { font-size: 9.5pt; margin-bottom: 1px; }
    .sc-card-cols2 .sc-card-name { font-size: 10pt; }
    .sc-card-cols2.large .sc-card-meta { font-size: 8.5pt; }
    .sc-card-cols2.large .sc-card-num { font-size: 11pt; }
    .sc-card-cols2.large .sc-card-name { font-size: 11.5pt; }

    .sc-target-box-2x2 {
      width: 20mm !important;
      height: 20mm !important;
      min-width: 20mm !important;
      min-height: 20mm !important;
      max-width: 20mm !important;
      max-height: 20mm !important;
      border: 1.5px dashed #000 !important;
      border-radius: 4px !important;
      background: #fafafa !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
    }
    .sc-target-score {
      font-size: 13pt !important;
      font-weight: 900 !important;
      color: #000 !important;
      line-height: 1 !important;
    }
    .sc-target-sub {
      font-size: 6.5pt !important;
      font-weight: 700 !important;
      color: #555 !important;
      line-height: 1 !important;
      margin-top: 1px !important;
    }
    .sc-card-cols2 .sc-target-score { font-size: 14pt !important; }
    .sc-card-cols2.large .sc-target-score { font-size: 15pt !important; }
  }

/* 🖨️ โหมดสั่งพิมพ์กระดาษ A4 (Print Only) บังคับ 10 ใบต่อหน้าเป๊ะๆ! */
  @media print {
    body * { visibility: hidden !important; }
    body { background: #fff !important; margin: 0 !important; padding: 0 !important; color: #000 !important; }
    #print-page, #print-page * { visibility: visible !important; }
    #print-page { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
    .no-print, .navbar, .btn-save-img { display: none !important; }

    @page { size: A4 portrait; margin: 0 !important; }
    #print-area { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: white !important;}

    /* บังคับขนาดกระดาษ A4 เป๊ะๆ */
    .a4-print-page {
       width: 210mm !important; 
       height: 296mm !important; 
       padding: 10mm 8mm !important; /* ขอบกระดาษ กันเครื่องปริ้นตัดขอบ */
       box-sizing: border-box !important; 
       page-break-after: always !important; 
       page-break-inside: avoid !important; 
       background: white !important;
       display: block !important;
    }
    .a4-print-page:last-child { page-break-after: auto !important; }

    /* บังคับ Grid 2 แถว 5 บรรทัด (10 ใบ) */
    .a4-grid {
       display: grid !important; 
       grid-template-columns: 1fr 1fr !important;
       grid-template-rows: repeat(5, 1fr) !important; 
       gap: 3mm !important; /* 🌟 ลดระยะห่างตรงนี้ลง เพื่อป้องกันการดันตกขอบกระดาษ */
       height: 100% !important; 
       width: 100% !important;
       box-sizing: border-box !important;
    }

    /* ล้างสไตล์บนจอทิ้งให้หมด */
    .qr-card-container { display: block !important; height: 100% !important; width: 100% !important; padding: 0 !important; box-shadow: none !important; border: none !important; margin: 0 !important; background: transparent !important; transform: none !important; }
    
    .qr-card { 
       border: 1px dashed #000 !important; border-radius: 8px !important; padding: 3mm !important; margin: 0 !important;
       height: 100% !important; width: 100% !important; box-sizing: border-box !important;
       background: #fff !important; box-shadow: none !important; display: flex !important;
       flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
       transform: none !important; overflow: hidden !important;
    }
    
    .qr-top-system { width: 22% !important; padding: 0 2mm 0 0 !important; border-right: 1px dashed #ccc !important; justify-content: center !important;}
    .qr-top-system img { width: 16mm !important; height: 16mm !important; padding: 0 !important; border: none !important; }
    .qr-top-system div div:first-child { font-size: 7px !important; color: #000 !important; font-weight: bold !important; margin-top:2px !important; }
    .qr-top-system div div:last-child { display: none !important; }

    .qr-card-info { width: 48% !important; min-width: 0 !important; padding: 0 4mm !important; text-align: left !important; overflow: hidden !important; }
    .qr-card-info h4 { color: #000 !important; font-size: 13px !important; margin: 0 0 2px 0 !important; line-height: 1.15 !important; font-weight: 800 !important; word-break: break-word !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
    .qr-card-info p { color: #333 !important; font-size: 10px !important; margin: 0 !important; }

    .qr-main-token { width: 30% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; margin: 0 !important; }
    .qr-main-token img { max-height: 28mm !important; width: auto !important; object-fit: contain !important; margin: 0 0 2px 0 !important; border: none !important; padding: 0 !important;}
    .qr-main-token .warning { font-size: 6.5px !important; padding: 2px 4px !important; line-height: 1.1 !important; background: #000 !important; color: #fff !important; border-radius: 4px !important; display: block !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    
    .student-id-highlight { 
       font-size: 8px !important; font-weight: 900 !important; color: #000 !important; background-color: transparent !important; 
       border: 1px solid #000 !important; padding: 2px 4px !important; border-radius: 4px !important; margin-top: 3px !important; 
       -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
    }

    /* 🎨 โหมดพิมพ์สี/ธีม (Color & Custom Mode): บังคับคงสีสันตามพรีวิวโดยไม่ขยับสเกลกรอบ A4 */
    #print-area.qr-theme-color,
    #print-area.qr-theme-color * {
       -webkit-print-color-adjust: exact !important;
       print-color-adjust: exact !important;
    }
    #print-area.qr-theme-color .qr-card {
       border: 1px dashed var(--qr-border, #2563eb) !important;
       background-color: var(--qr-bg-start, #ffffff) !important;
       background-image: linear-gradient(135deg, var(--qr-bg-start, #ffffff) 0%, var(--qr-bg-end, #eff6ff) 100%) !important;
       zoom: 1 !important;
    }
    #print-area.qr-theme-color.qr-pat-dots .qr-card {
       background-image:
         radial-gradient(color-mix(in oklab, var(--qr-accent, #2563eb) 18%, transparent) 1.25px, transparent 1.25px),
         linear-gradient(135deg, var(--qr-bg-start, #ffffff) 0%, var(--qr-bg-end, #eff6ff) 100%) !important;
       background-size: 12px 12px, 100% 100% !important;
    }
    #print-area.qr-theme-color.qr-pat-grid .qr-card {
       background-image:
         linear-gradient(color-mix(in oklab, var(--qr-accent, #2563eb) 11%, transparent) 1px, transparent 1px),
         linear-gradient(90deg, color-mix(in oklab, var(--qr-accent, #2563eb) 11%, transparent) 1px, transparent 1px),
         linear-gradient(135deg, var(--qr-bg-start, #ffffff) 0%, var(--qr-bg-end, #eff6ff) 100%) !important;
       background-size: 14px 14px, 14px 14px, 100% 100% !important;
    }
    #print-area.qr-theme-color.qr-pat-diagonal .qr-card {
       background-image:
         repeating-linear-gradient(-45deg, color-mix(in oklab, var(--qr-accent, #2563eb) 9%, transparent) 0 6px, transparent 6px 14px),
         linear-gradient(135deg, var(--qr-bg-start, #ffffff) 0%, var(--qr-bg-end, #eff6ff) 100%) !important;
    }
    #print-area.qr-theme-color.qr-bdr-solid .qr-card { border-style: solid !important; }
    #print-area.qr-theme-color.qr-bdr-double .qr-card { border-style: double !important; border-width: 2.5px !important; }
    #print-area.qr-theme-color.qr-bdr-accent-bar .qr-card {
       border-style: dashed !important;
       box-shadow: inset 4mm 0 0 var(--qr-accent, #2563eb) !important;
    }
    #print-area.qr-theme-color .qr-top-system {
       border-right: 1px dashed var(--qr-divider, #93c5fd) !important;
    }
    #print-area.qr-theme-color .qr-top-system div div:first-child {
       color: var(--qr-accent, #2563eb) !important;
    }
    #print-area.qr-theme-color .qr-card-info h4 {
       color: var(--qr-accent-dark, #1e3a8a) !important;
    }
    #print-area.qr-theme-color .qr-card-info p {
       color: var(--qr-sub-text, #334155) !important;
    }
    #print-area.qr-theme-color .qr-card-info p strong {
       color: var(--qr-accent, #1d4ed8) !important;
    }
    #print-area.qr-theme-color .qr-main-token .warning {
       background: var(--qr-badge-bg, #2563eb) !important;
       color: var(--qr-badge-fg, #ffffff) !important;
    }
    #print-area.qr-theme-color .student-id-highlight {
       color: var(--qr-id-fg, #1e40af) !important;
       background-color: var(--qr-id-bg, #eff6ff) !important;
       border: 1px solid var(--qr-id-border, #3b82f6) !important;
    }

    /* ⬛ โหมดพิมพ์ขาวดำ (B&W Mode): ประหยัดหมึก คมชัดบนกระดาษ */
    #print-area.qr-theme-bw .qr-card {
       border: 1px dashed #000 !important;
       background: #fff !important;
       background-image: none !important;
       box-shadow: none !important;
       zoom: 1 !important;
    }
    #print-area.qr-theme-bw .qr-top-system {
       border-right: 1px dashed #ccc !important;
    }
    #print-area.qr-theme-bw .qr-top-system div div:first-child {
       color: #000 !important;
    }
    #print-area.qr-theme-bw .qr-card-info h4 {
       color: #000 !important;
    }
    #print-area.qr-theme-bw .qr-card-info p,
    #print-area.qr-theme-bw .qr-card-info p strong {
       color: #222 !important;
    }
    #print-area.qr-theme-bw .qr-main-token .warning {
       background: #000 !important;
       color: #fff !important;
    }
    #print-area.qr-theme-bw .student-id-highlight {
       color: #000 !important;
       background-color: transparent !important;
       border: 1px solid #000 !important;
    }

    /* 🌟 ปรับขนาดของการ์ดครูให้เล็กกะทัดรัด ไม่ดันขอบ A4 */
    /* 🌟 ปรับขนาดของการ์ดครูให้เล็กกะทัดรัดลงอีก ไม่ให้ดันขอบ A4 แน่นอน */
    .teacher-qr-card { 
       display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; 
       border: 1px dashed #000 !important; border-radius: 8px !important; padding: 2mm !important; margin: 0 !important;
       height: 100% !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; 
       background: #fff !important; box-shadow: none !important; transform: none !important;
    }
    .teacher-qr-card h2 { font-size: 11px !important; margin: 0 0 1px 0 !important; color: #000 !important; font-weight: 800 !important; line-height: 1 !important;}
    .teacher-qr-card h4 { font-size: 8px !important; margin: 0 0 3px 0 !important; color: #333 !important; line-height: 1 !important;}
    
    /* บีบขนาด QR ให้เล็กลงนิดนึง */
    .teacher-qr-card img { width: 25mm !important; height: 25mm !important; object-fit: contain !important; margin: 0 !important; border: none !important; padding: 0 !important;}
    
    .teacher-qr-card .warning-box { background: #000 !important; color: white !important; font-size: 6px !important; padding: 3px !important; border-radius: 4px !important; margin-top: 3px !important; width: 95% !important; line-height: 1.1 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .teacher-qr-card .url-text { font-size: 5.5px !important; color: #666 !important; margin-top: 2px !important; line-height: 1.1 !important; word-break: break-all !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

    /* 🌟 Layout พิมพ์การ์ดคะแนนสติ๊กเกอร์ขูด (รองรับ 42/44 คน หรือ 40 คน หรือ 16/20 คน/หน้า) */
    .a4-scratch-page {
       width: 210mm !important; 
       height: 297mm !important; 
       max-height: 297mm !important; 
       padding: 4mm 4mm !important; 
       box-sizing: border-box !important; 
       page-break-after: always !important; 
       page-break-inside: avoid !important; 
       background: white !important; 
       display: block !important;
       overflow: hidden !important;
    }
    .a4-scratch-page:last-child { page-break-after: auto !important; }

    .a4-scratch-grid {
       display: grid !important; 
       width: 100% !important; 
       height: 100% !important; 
       box-sizing: border-box !important;
    }
    .a4-scratch-grid.cols-4.rows-11 {
       grid-template-columns: repeat(4, 1fr) !important; 
       grid-template-rows: repeat(11, 1fr) !important; 
       gap: 1.2mm 1.2mm !important;
    }
    .a4-scratch-grid.cols-4.rows-10 {
       grid-template-columns: repeat(4, 1fr) !important; 
       grid-template-rows: repeat(10, 1fr) !important; 
       gap: 1.5mm 1.5mm !important;
    }
    .a4-scratch-grid.cols-2.rows-10 {
       grid-template-columns: 1fr 1fr !important; 
       grid-template-rows: repeat(10, 1fr) !important; 
       gap: 1.8mm 3mm !important;
    }
    .a4-scratch-grid.cols-2.rows-8 {
       grid-template-columns: 1fr 1fr !important; 
       grid-template-rows: repeat(8, 1fr) !important; 
       gap: 2.5mm 3mm !important;
    }

    .sc-print-card {
       border: 1.2px dashed #000 !important; 
       border-radius: 4px !important; 
       padding: 1mm 1.5mm !important; 
       margin: 0 !important; 
       height: 100% !important; 
       width: 100% !important; 
       box-sizing: border-box !important; 
       background: #fff !important; 
       box-shadow: none !important; 
       display: flex !important; 
       flex-direction: row !important; 
       align-items: center !important; 
       justify-content: space-between !important; 
       overflow: hidden !important; 
       page-break-inside: avoid !important;
    }
    .sc-print-card.blank {
       border: 1px dashed #ccc !important; 
       background: #fafafa !important; 
       opacity: 0.2 !important;
    }

    .sc-card-side-info {
       flex: 1 !important;
       min-width: 0 !important;
       display: flex !important;
       flex-direction: column !important;
       justify-content: center !important;
       align-items: flex-start !important;
       padding-right: 1.5mm !important;
       overflow: hidden !important;
    }
    .sc-card-meta {
       font-size: 6.5pt !important;
       font-weight: 700 !important;
       color: #475569 !important;
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       line-height: 1.15 !important;
       margin-bottom: 0.5px !important;
    }
    .sc-card-num {
       font-size: 8pt !important;
       font-weight: 800 !important;
       color: #000 !important;
       line-height: 1.2 !important;
       margin-bottom: 0.5px !important;
    }
    .sc-card-name {
       font-size: 8pt !important;
       font-weight: 800 !important;
       color: #000 !important;
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       line-height: 1.2 !important;
    }

    /* โหมด 2 คอลัมน์ (16 หรือ 20 คน) ขยายขนาดตัวหนังสือ */
    .sc-card-cols2 .sc-card-meta { font-size: 7.5pt !important; margin-bottom: 1px !important; }
    .sc-card-cols2 .sc-card-num { font-size: 9.5pt !important; margin-bottom: 1px !important; }
    .sc-card-cols2 .sc-card-name { font-size: 10pt !important; }
    .sc-card-cols2.large .sc-card-meta { font-size: 8.5pt !important; }
    .sc-card-cols2.large .sc-card-num { font-size: 11pt !important; }
    .sc-card-cols2.large .sc-card-name { font-size: 11.5pt !important; }

    .sc-target-box-2x2 {
       width: 20mm !important; 
       height: 20mm !important; 
       min-width: 20mm !important; 
       min-height: 20mm !important; 
       max-width: 20mm !important; 
       max-height: 20mm !important; 
       border: 1.5px dashed #000 !important; 
       border-radius: 4px !important; 
       background: #fafafa !important; 
       display: flex !important; 
       flex-direction: column !important; 
       align-items: center !important; 
       justify-content: center !important; 
       box-sizing: border-box !important; 
       flex-shrink: 0 !important;
       margin: 0 !important; 
       -webkit-print-color-adjust: exact !important; 
       print-color-adjust: exact !important;
    }
    .sc-target-score {
       font-size: 13pt !important; 
       font-weight: 900 !important; 
       color: #000 !important; 
       line-height: 1 !important;
    }
    .sc-target-sub {
       font-size: 6.5pt !important; 
       font-weight: 700 !important; 
       color: #555 !important; 
       line-height: 1 !important; 
       margin-top: 1px !important;
    }
    .sc-card-cols2 .sc-target-score { font-size: 14pt !important; }
    .sc-card-cols2.large .sc-target-score { font-size: 15pt !important; }
  }

/* ==========================================
     🚀 Fast Check Result Area (บังคับเต็มจอ ไร้ Scrollbar)
     ========================================== */
  #fc-result-area {
      max-height: none !important; 
      overflow: visible !important; 
      padding: 0 !important;
      margin-top: 1.5rem;
      width: 100% !important;
      box-sizing: border-box !important;
  }
  
  /* 🌟 Fast Check Result Area Scrollbar (เพรียวบาง สวยงาม ไม่เกะกะสายตา) */
  #fc-result-area {
      scrollbar-gutter: stable;
  }
  
  /* ==========================================
     🏆 สีสันสำหรับฉายา Achievement 15 Tiers (ย้ายมาจาก JS)
     ========================================== */
  .badge-divine { background: linear-gradient(45deg, #fbbf24, #fffbeb); color: #b45309; border: 1px solid #fde68a; box-shadow: 0 0 10px rgba(251,191,36,0.8); animation: pulseGlow 2s infinite; }
  .badge-heroic { background: linear-gradient(45deg, #3b82f6, #93c5fd); color: #fff; border: 1px solid #2563eb; }
  .badge-elite { background: linear-gradient(45deg, #0ea5e9, #7dd3fc); color: #fff; border: 1px solid #0284c7; }
  .badge-uncommon { background: linear-gradient(45deg, #10b981, #6ee7b7); color: #fff; border: 1px solid #059669; }
  .badge-beginner { background: linear-gradient(45deg, #e5e7eb, #f3f4f6); color: #4b5563; border: 1px solid #d1d5db; }
  .badge-speed { background: linear-gradient(45deg, #fcd34d, #fef08a); color: #b45309; border: 1px solid #f59e0b; }
  .badge-survivor { background: linear-gradient(45deg, #fdba74, #fde047); color: #a16207; border: 1px solid #eab308; }
  .badge-grinder { background: linear-gradient(45deg, #9a3412, #ca8a04); color: #fff; border: 1px solid #713f12; }
  .badge-warning { background: linear-gradient(45deg, #f87171, #fca5a5); color: #7f1d1d; border: 1px solid #ef4444; }


  /* ==========================================
     📱 Mobile Fix: ป้องกันปุ่มไม้กายสิทธิ์บังเนื้อหา
     ========================================== */
  @media (max-width: 768px) {
      main.container {
          padding-bottom: 110px !important;
      }
      .behavior-fab {
          bottom: 25px !important;
          right: 20px !important;
          width: 55px !important;
          height: 55px !important;
          font-size: 26px !important;
      }
      .behavior-modal {
          bottom: 95px !important;
          right: 15px !important;
          width: calc(100vw - 30px) !important;
          max-width: 360px !important;
      }
  }

  /* ==============================================================
     🏆 แก้ไขสีข้อความกล่อง Leaderboard สายชั้น (Dark Mode)
     ============================================================== */
  [data-theme="dark"] #behavior-leaderboard-area .class-rank-box {
      background: rgba(30, 27, 75, 0.85) !important;
      border: 1px solid rgba(139, 92, 246, 0.4) !important;
  }
  
  [data-theme="dark"] #behavior-leaderboard-area .class-rank-box .sd-cb-title,
  [data-theme="dark"] #behavior-leaderboard-area .class-rank-box .sd-cb-sub {
      color: #f8fafc !important;
  }

  [data-theme="dark"] #behavior-leaderboard-area .class-rank-box .sd-cb-points.is-normal,
  [data-theme="dark"] #behavior-leaderboard-area .class-rank-box .sd-cb-points.is-top {
      color: #fde047 !important;
  }

  [data-theme="dark"] #behavior-leaderboard-area .class-rank-box .sd-cb-points.is-neg {
      color: #f87171 !important;
  }

  [data-theme="dark"] #behavior-leaderboard-area .class-rank-box .fa-trophy,
  [data-theme="dark"] #behavior-leaderboard-area .class-rank-box .fa-medal {
      color: #facc15 !important; /* เปลี่ยนสีไอคอนให้เป็นสีทองสว่างๆ */
  }
  
  /* ==============================================================
     📱 ปรับปรุงหน้า "บันทึกพฤติกรรม" สำหรับมือถือ (Mobile Responsive)
     ============================================================== */
     
  /* 1. แก้ปัญหาปุ่มพฤติกรรมยาวๆ ให้อ่านได้ครบ ปัดบรรทัดอัตโนมัติ */
  #beh-positive-list button, 
  #beh-negative-list button {
      white-space: normal !important; /* อนุญาตให้ปัดบรรทัดได้ */
      height: auto !important; /* ให้ปุ่มยืดความสูงตามตัวหนังสือ */
      min-height: 48px; /* ความสูงขั้นต่ำให้กดง่าย */
      line-height: 1.4 !important; /* ระยะห่างบรรทัดให้อ่านสบายตา */
      text-align: left !important; /* จัดข้อความชิดซ้าย */
      justify-content: flex-start !important;
      padding: 10px 15px !important;
  }

  /* 2. บังคับให้ช่อง "เลือกระดับชั้น" และ "เลือกห้อง" เรียงต่อกันลงมาข้างล่าง */
  @media (max-width: 600px) {
      #behavior-manager-page div[style*="minmax(200px, 1fr)"] {
          grid-template-columns: 1fr !important; /* บังคับให้แสดงแค่ 1 คอลัมน์ */
      }
      #behavior-manager-page div[style*="minmax(200px, 1fr)"] > .form-group {
          grid-column: 1 / -1 !important; /* ยกเลิกการกินพื้นที่ 2 คอลัมน์ */
      }
  }
    
  /* จัดการกล่องคะแนนให้ชัดเจนและรองรับทั้งธีมสว่าง/มืด */
  .fc-score-input-box {
      border: 2px solid #e2e8f0 !important;
      background: #ffffff !important;
      color: #1e293b !important;
      font-size: 1.2rem;
      font-weight: bold;
      width: 50px;
      padding: 5px;
      text-align: center;
      border-radius: 8px;
      transition: all 0.3s;
  }

  [data-theme="dark"] .fc-score-input-box {
      background: #1e293b !important; /* พื้นหลังสีเทาเข้ม */
      border: 2px solid #3b82f6 !important; /* ขอบสีฟ้าให้รู้ว่าแก้ไขได้ */
      color: #ffffff !important; /* ตัวเลขสีขาวสว่าง */
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
  }

  /* เพิ่มส่วนที่ให้คลิกแล้วเรืองแสงเด่นชัด */
  .fc-score-input-box:focus {
      outline: none;
      border-color: #3b82f6 !important;
      box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
  }

  /* บังคับให้ข้อความประกาศเว้นบรรทัดตามการกด Enter */
  .noti-premium-card .noti-content p,
  .noti-premium-card .noti-message-area,
  #home-notification-area div[style*="line-height"],
  #student-notification-area div[style*="line-height"] {
      white-space: pre-wrap !important;
      word-wrap: break-word !important;
  }

  /* ==========================================
     🎨 Tone Tokens (ชุดสีสถานะที่รองรับธีมสว่าง/มืดอัตโนมัติ)
     ใช้คู่กับคอมโพเนนต์: .tone-badge, .ps-stat, .ps-item, .ps-badge ฯลฯ
     ========================================== */
  .tone-success { --tone-bg: #f0fdf4; --tone-border: #bbf7d0; --tone-text: #166534; --tone-strong: #15803d; --tone-accent: #10b981; }
  .tone-danger  { --tone-bg: #fef2f2; --tone-border: #fecaca; --tone-text: #991b1b; --tone-strong: #dc2626; --tone-accent: #ef4444; }
  .tone-warn    { --tone-bg: #fffbeb; --tone-border: #fcd34d; --tone-text: #92400e; --tone-strong: #d97706; --tone-accent: #f59e0b; }
  .tone-info    { --tone-bg: #eff6ff; --tone-border: #bfdbfe; --tone-text: #1e40af; --tone-strong: #2563eb; --tone-accent: #3b82f6; }
  .tone-purple  { --tone-bg: #f5f3ff; --tone-border: #ddd6fe; --tone-text: #4c1d95; --tone-strong: #7c3aed; --tone-accent: #8b5cf6; }

  [data-theme="dark"] .tone-success { --tone-bg: rgba(16, 185, 129, 0.12); --tone-border: rgba(16, 185, 129, 0.35); --tone-text: #6ee7b7; --tone-strong: #34d399; }
  [data-theme="dark"] .tone-danger  { --tone-bg: rgba(239, 68, 68, 0.12);  --tone-border: rgba(239, 68, 68, 0.35);  --tone-text: #fca5a5; --tone-strong: #f87171; }
  [data-theme="dark"] .tone-warn    { --tone-bg: rgba(245, 158, 11, 0.12); --tone-border: rgba(245, 158, 11, 0.35); --tone-text: #fcd34d; --tone-strong: #fbbf24; }
  [data-theme="dark"] .tone-info    { --tone-bg: rgba(59, 130, 246, 0.12); --tone-border: rgba(59, 130, 246, 0.35); --tone-text: #93c5fd; --tone-strong: #60a5fa; }
  [data-theme="dark"] .tone-purple  { --tone-bg: rgba(139, 92, 246, 0.14); --tone-border: rgba(139, 92, 246, 0.4);  --tone-text: #c4b5fd; --tone-strong: #a78bfa; }

  .tone-badge {
    display: inline-block;
    background: var(--tone-bg);
    color: var(--tone-strong);
    border: 1px solid var(--tone-border);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
  }

  /* ==========================================
     🪪 ใบแจ้งสถานะรายบุคคล (Parent Slip) — รองรับธีมสว่าง/มืด
     หมายเหตุ: ไฟล์ PNG ที่ดาวน์โหลดยังคงพื้นขาวเสมอ เพื่อให้ผู้ปกครองอ่าน/พิมพ์ง่าย
     ========================================== */
  .ps-modal-title { font-size: 1.15rem; color: #1e40af; }
  [data-theme="dark"] .ps-modal-title { color: #c4b5fd; }

  .ps-card {
    --ps-bg: #ffffff;
    --ps-text: #1e293b;
    --ps-strong: #0f172a;
    --ps-muted: #64748b;
    --ps-heading: #1e3a8a;
    --ps-border: #cbd5e1;
    --ps-divider: #e2e8f0;
    --ps-soft: #f8fafc;
    --ps-chip: #f1f5f9;
    background: var(--ps-bg);
    color: var(--ps-text);
    border: 2px solid var(--ps-border);
    border-radius: 16px;
    padding: 16px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    font-family: 'Kanit', sans-serif;
  }
  [data-theme="dark"] .ps-card {
    --ps-bg: #111827;
    --ps-text: #e2e8f0;
    --ps-strong: #f8fafc;
    --ps-muted: #94a3b8;
    --ps-heading: #c4b5fd;
    --ps-border: rgba(168, 85, 247, 0.35);
    --ps-divider: rgba(148, 163, 184, 0.22);
    --ps-soft: rgba(30, 41, 59, 0.7);
    --ps-chip: rgba(51, 65, 85, 0.6);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  }

  .ps-header {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    border-bottom: 2px dashed var(--ps-divider);
    padding-bottom: 10px; margin-bottom: 12px;
  }
  .ps-heading { font-weight: 800; font-size: 1rem; color: var(--ps-heading); }
  .ps-sub { font-size: 0.75rem; color: var(--ps-muted); }
  .ps-date {
    font-size: 0.72rem; color: var(--ps-muted); background: var(--ps-chip);
    padding: 4px 8px; border-radius: 8px; font-weight: bold; white-space: nowrap;
  }
  .ps-student {
    background: var(--ps-soft); border: 1px solid var(--ps-divider); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 12px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  }
  .ps-name { font-size: 1.05rem; font-weight: 800; color: var(--ps-strong); }
  .ps-badge {
    background: var(--tone-bg); color: var(--tone-strong); border: 1px solid var(--tone-border);
    padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold;
  }

  .ps-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; text-align: center; }
  .ps-stat { background: var(--tone-bg); border: 1px solid var(--tone-border); padding: 8px; border-radius: 10px; }
  .ps-stat-label { font-size: 0.7rem; color: var(--tone-text); }
  .ps-stat-value { font-size: 1.1rem; font-weight: 800; color: var(--tone-strong); }

  .ps-section-title { font-weight: bold; font-size: 0.85rem; margin-bottom: 6px; text-align: left; color: var(--tone-strong); }
  .ps-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 210px; overflow-y: auto; padding-right: 4px; margin-bottom: 10px;
  }
  .ps-list-compact { max-height: none; gap: 5px; margin-bottom: 8px; }
  .ps-item {
    background: var(--tone-bg); border: 1px solid var(--tone-border); border-left: 4px solid var(--tone-accent);
    padding: 7px 10px; border-radius: 8px; text-align: left; font-size: 0.82rem; color: var(--ps-text);
  }
  .ps-item-title { font-weight: bold; color: var(--tone-text); }
  .ps-item-meta { font-size: 0.74rem; color: var(--ps-muted); margin-top: 2px; }
  .ps-empty {
    background: var(--tone-bg); border: 1px solid var(--tone-border); color: var(--tone-text);
    padding: 14px; border-radius: 10px; text-align: center; font-weight: bold; font-size: 0.9rem;
  }
  .ps-footer {
    margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--ps-border);
    font-size: 0.74rem; color: var(--ps-muted); text-align: center;
  }

  @media (max-width: 480px) {
    .ps-header { flex-direction: column; align-items: flex-start; }
    .ps-stats { gap: 6px; }
    .ps-stat-value { font-size: 1rem; }
  }

  /* 💌 กล่องข้อความจดหมายลับ — รองรับธีมมืด */
  .mail-bubble {
    text-align: left; padding: 1.2rem; border-radius: 12px; line-height: 1.6; font-size: 1.05rem;
    background: #fff5f7; color: #444; border: 1px solid #fce7f3;
    white-space: pre-wrap; word-wrap: break-word;
  }
  [data-theme="dark"] .mail-bubble {
    background: rgba(236, 72, 153, 0.1); color: #f1f5f9; border-color: rgba(236, 72, 153, 0.35);
  }

  /* ==========================================
     ⚡ ระบบแถบเลือกห้องด่วน 1-Click (Quick Classroom Switcher)
     ========================================== */
  .quick-class-bar-container {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-color);
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    transition: all 0.2s ease;
  }

  .quick-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
  }

  .quick-bar-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
  }

  .quick-bar-count {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.25);
  }

  .quick-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .quick-bar-toggle-btn {
    background: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }

  .quick-bar-toggle-btn:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
  }

  #btn-print-scratch-cards:hover {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: #f59e0b !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
  }

  .quick-bar-pills-wrap {
    position: relative;
    width: 100%;
  }

  .quick-bar-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* ปุ่มชิปเลือกห้อง */
  .quick-cls-pill, .asm-cls-pill {
    width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    padding: 5px 12px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    border: 1.5px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    box-sizing: border-box;
  }

  .quick-cls-pill:active, .asm-cls-pill:active {
    transform: scale(0.95);
  }

  /* สำหรับมือถือ (<= 768px) */
  @media (max-width: 768px) {
    .quick-class-bar-container {
      padding: 8px 10px;
      margin-bottom: 10px;
    }

    /* โหมดเริ่มต้น: แถบแนวนอนเลื่อนได้ 1 แถว (Swipeable Rail) ไม่กินเนื้อที่ ไม่ดันหน้าจอ */
    .quick-bar-pills-wrap:not(.is-expanded) .quick-bar-pills {
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      scroll-behavior: smooth;
      padding: 3px 2px 6px 2px !important;
      gap: 7px !important;
    }

    /* ซ่อน Scrollbar ให้สวยเนียน */
    .quick-bar-pills-wrap:not(.is-expanded) .quick-bar-pills::-webkit-scrollbar {
      height: 3px;
    }
    .quick-bar-pills-wrap:not(.is-expanded) .quick-bar-pills::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 10px;
    }

    /* โหมดขยายทั้งหมด (Expanded Mode): แสดงเป็นตารางกะทัดรัดหลายคอลัมน์ */
    .quick-bar-pills-wrap.is-expanded .quick-bar-pills {
      display: grid !important;
      grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)) !important;
      gap: 6px !important;
      padding: 3px 0 !important;
    }

    .quick-bar-pills-wrap.is-expanded .quick-cls-pill,
    .quick-bar-pills-wrap.is-expanded .asm-cls-pill {
      width: 100% !important;
      max-width: 100% !important;
      text-align: center;
      padding: 6px 4px !important;
    }

    .quick-cls-pill, .asm-cls-pill {
      padding: 6px 14px !important;
      font-size: 0.85rem !important;
    }
  }

  /* ==========================================
     📋 13. จัดการภาระงาน (Task Management Responsive Design)
     ========================================== */
  .am-desktop-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 0.95rem;
    background: var(--surface-color);
  }

  .am-desktop-table th {
    padding: 0.9rem 1rem;
    background: var(--surface-color);
    color: #059669;
    font-weight: 700;
    border-bottom: 2px solid rgba(16, 185, 129, 0.25);
  }

  .am-desktop-table td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
  }

  .am-desktop-table tr:hover td {
    background: rgba(16, 185, 129, 0.04);
  }

  .am-mobile-cards {
    display: none;
  }

  .am-task-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
  }

  .am-quick-date-btn {
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 44px;
    padding: 8px 14px;
    cursor: pointer;
    touch-action: manipulation;
  }

  .am-quick-date-btn:active {
    background: #10b981;
    color: white;
  }

  .am-btn-fc {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #7c3aed;
    font-weight: 700;
    border-radius: 10px;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    touch-action: manipulation;
  }

  .am-btn-fc:active {
    background: #8b5cf6;
    color: white;
  }

  @media (max-width: 768px) {
    #am-form-area {
      padding: 1.25rem !important;
    }
  }

  /* ==========================================
     ♿ Accessibility: ปิด Motion เมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว & Focus Visible
     ========================================== */
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
      scroll-behavior: auto !important;
    }
  }

  :focus-visible {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
  }

  /* ==========================================
     👑 Mobile UX & Admin Hub Overhaul Styles
     ========================================== */

  /* 🌟 1. System Stat Banner (Top of Dashboard - Compact Proportions) */
  .system-stat-banner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.15rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
  }

  .system-stat-banner[data-loading="true"] {
    opacity: 0.68;
  }
  .system-stat-banner[data-loading="true"] .stat-banner-card {
    border-color: rgba(139, 92, 246, 0.45);
  }

  .stat-banner-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 13px;
    padding: 0.6rem 0.75rem;
    box-shadow: var(--soft-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 76px;
    min-width: 0;
    transition: transform var(--transition-speed), border-color var(--transition-speed), background-color var(--transition-speed);
    box-sizing: border-box;
    overflow: hidden;
  }

  .stat-banner-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.4);
  }

  .stat-card-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0.35rem;
    min-width: 0;
  }

  .stat-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    background: rgba(139, 92, 246, 0.12);
    color: var(--primary-color);
  }

  .stat-card-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    letter-spacing: -0.01em;
  }

  .stat-card-value {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    min-width: 0;
  }

  .stat-sem-text {
    font-weight: 800;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    color: var(--primary-color);
    white-space: nowrap;
    letter-spacing: -0.01em;
    text-align: center;
  }

  .stat-grad-badge {
    text-align: center;
  }

  .stat-exam-badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
  }

  .stat-exam-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    background: rgba(148, 163, 184, 0.12);
    padding: 2px 7px;
    border-radius: 6px;
    min-width: 0;
    box-sizing: border-box;
    gap: 6px;
  }

  .stat-exam-name {
    color: var(--text-muted);
    font-size: 0.76rem;
    white-space: nowrap;
  }

  @media (max-width: 1050px) and (min-width: 600px) {
    .system-stat-banner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
    }
  }

  @media (max-width: 599px) {
    .system-stat-banner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
      margin-bottom: 0.85rem;
    }
    .stat-banner-card {
      padding: 0.52rem 0.6rem;
      border-radius: 12px;
      min-height: 68px;
    }
    .stat-card-header {
      gap: 5px;
      margin-bottom: 0.25rem;
    }
    .stat-card-icon {
      width: 22px;
      height: 22px;
      font-size: 0.72rem;
    }
    .stat-card-label {
      font-size: 0.74rem;
    }
    .stat-sem-text {
      font-size: 1.05rem;
    }
    .stat-exam-badges {
      gap: 3px;
    }
    .stat-exam-item {
      padding: 2px 6px;
      font-size: 0.74rem;
    }
  }

  /* 🌟 2. Admin Control Hub (Dashboard Admin Only — Compact Zero-Orphan Grid & Collapsible) */
  .admin-control-hub {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.08), rgba(139, 92, 246, 0.05));
    border: 1px solid rgba(245, 158, 11, 0.36);
    border-radius: 16px;
    padding: 0.85rem 1.05rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.08);
    position: relative;
    overflow: hidden;
    container: admin-hub / inline-size;
  }

  .admin-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0.7rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed rgba(245, 158, 11, 0.3);
  }
  .admin-control-hub.is-collapsed {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
  }
  .admin-control-hub.is-collapsed .admin-hub-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .admin-hub-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .admin-hub-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9px;
    font-size: 1rem;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.28);
    flex-shrink: 0;
  }

  .admin-hub-title-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .admin-hub-title {
    color: #b45309;
    margin: 0;
    font-size: 1.02rem !important;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [data-theme="dark"] .admin-hub-title {
    color: #fbbf24;
  }

  .admin-hub-subtitle {
    margin: 2px 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-hub-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .admin-hub-collapse-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 44px;
    padding: 0.38rem 0.78rem !important;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(245, 158, 11, 0.08);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
  }
  .admin-hub-collapse-btn:hover {
    background: rgba(245, 158, 11, 0.16);
  }
  [data-theme="dark"] .admin-hub-collapse-btn {
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(245, 158, 11, 0.12);
  }
  .admin-hub-collapse-btn i {
    transition: transform 0.2s ease;
  }
  .admin-control-hub.is-collapsed .admin-hub-collapse-btn i {
    transform: rotate(180deg);
  }
  .admin-control-hub.is-collapsed .admin-hub-body {
    display: none !important;
  }

  .admin-actions-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0;
    align-items: stretch;
  }

  .admin-action-btn {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.55rem 0.68rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 58px;
    height: 100%;
    justify-content: center;
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    position: relative;
    user-select: none;
    touch-action: manipulation;
    width: 100%;
    min-width: 0;
  }

  .admin-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  }

  .admin-action-btn:active {
    transform: scale(0.97);
  }

  .admin-action-btn.is-processing,
  .admin-hero-btn.is-processing {
    opacity: 0.72;
    cursor: wait;
    pointer-events: none;
  }

  .admin-action-btn .action-btn-top {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .admin-action-btn .action-btn-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    background: rgba(148, 163, 184, 0.14);
    flex-shrink: 0;
  }

  .admin-action-btn .action-btn-name {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .admin-live-chip {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-main);
    border: 1px solid rgba(148, 163, 184, 0.28);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.35;
  }
  .admin-live-chip.is-open {
    background: #047857;
    color: #ffffff;
    border-color: transparent;
  }
  .admin-live-chip.is-warn {
    background: rgba(245, 158, 11, 0.18);
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.35);
  }
  [data-theme="dark"] .admin-live-chip.is-warn {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.22);
  }
  .admin-live-chip.is-closed {
    background: rgba(100, 116, 139, 0.16);
    color: var(--text-muted);
  }

  .admin-action-btn .action-btn-desc {
    font-size: 0.72rem;
    opacity: 0.86;
    line-height: 1.25;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Specific Button Themes (WCAG AA Light/Dark Contrast) */
  .admin-btn-sem {
    border-color: rgba(217, 119, 6, 0.5);
    color: #92400e;
  }
  .admin-btn-sem:hover {
    background: rgba(245, 158, 11, 0.1);
  }
  [data-theme="dark"] .admin-btn-sem {
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.45);
  }

  .admin-btn-exam {
    border-color: rgba(37, 99, 235, 0.45);
    color: #1e40af;
  }
  .admin-btn-exam:hover {
    background: rgba(59, 130, 246, 0.1);
  }
  [data-theme="dark"] .admin-btn-exam {
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.45);
  }

  .admin-btn-grad {
    border-color: rgba(5, 150, 105, 0.45);
    color: #065f46;
  }
  .admin-btn-grad:hover {
    background: rgba(16, 185, 129, 0.1);
  }
  [data-theme="dark"] .admin-btn-grad {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.45);
  }

  .admin-btn-promote {
    border-color: rgba(124, 58, 237, 0.48);
    color: #5b21b6;
    background: rgba(139, 92, 246, 0.05);
  }
  .admin-btn-promote:hover {
    background: rgba(139, 92, 246, 0.12);
  }
  [data-theme="dark"] .admin-btn-promote {
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(139, 92, 246, 0.12);
  }

  /* 🔄 Process Stepper & Accessible Native <progress> UI */
  .smart-process-box {
    text-align: left;
    margin-top: 8px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.22);
  }
  [data-theme="dark"] .smart-process-box {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(129, 140, 248, 0.28);
  }
  .smart-process-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }
  .smart-process-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
  }
  .smart-process-pct {
    font-size: 0.9rem;
    font-weight: 800;
    color: #4f46e5;
    font-variant-numeric: tabular-nums;
  }
  [data-theme="dark"] .smart-process-pct {
    color: #a5b4fc;
  }
  progress.smart-progress-bar {
    appearance: none;
    border: 0 solid;
    overflow: clip;
    display: block;
    width: 100%;
    height: 12px;
    --progress-bar-radius: 1e5px;
    border-radius: var(--progress-bar-radius);
    background: var(--progress-bar-track, rgba(148, 163, 184, 0.28));
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
    container-type: inline-size;
    --progress-bar-fill: linear-gradient(90deg, #6366f1, #10b981);
    --progress-bar-indeterminate-size: 30%;
    --progress-bar-indeterminate-animation-duration: 1.5s;
  }
  progress.smart-progress-bar:indeterminate {
    --progress-bar-animation: var(
      --progress-bar-indeterminate-animation,
      smart-progress-indeterminate var(--progress-bar-indeterminate-animation-duration) infinite linear
    );
  }
  progress.smart-progress-bar:dir(rtl) {
    --progress-bar-indeterminate-animation: smart-progress-indeterminate var(--progress-bar-indeterminate-animation-duration) infinite linear reverse;
  }
  progress.smart-progress-bar::-webkit-progress-bar {
    background: transparent;
  }
  progress.smart-progress-bar::-webkit-progress-value {
    background: var(--progress-bar-fill, #6366f1);
    border-radius: var(--progress-bar-radius);
    transition: inline-size 0.3s ease;
    animation: var(--progress-bar-animation, revert-rule);
  }
  progress.smart-progress-bar::-moz-progress-bar {
    background: var(--progress-bar-fill, #6366f1);
    border-radius: var(--progress-bar-radius);
    transition: inline-size 0.3s ease;
    animation: var(--progress-bar-animation, revert-rule);
  }
  @keyframes smart-progress-indeterminate {
    from, to {
      inline-size: var(--progress-bar-indeterminate-size);
      margin-right: auto;
    }
    from { translate: -100%; }
    to { translate: 100cqi; }
  }
  @media (prefers-reduced-motion: reduce) {
    progress.smart-progress-bar {
      --progress-bar-indeterminate-animation-duration: 10s;
    }
    progress.smart-progress-bar::-webkit-progress-value {
      transition: none;
    }
    progress.smart-progress-bar::-moz-progress-bar {
      transition: none;
    }
  }
  .smart-step-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .smart-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.16);
  }
  .smart-step-item.is-running {
    color: var(--text-main);
    font-weight: 700;
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.35);
  }
  .smart-step-item.is-done {
    color: #065f46;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.32);
  }
  [data-theme="dark"] .smart-step-item.is-done {
    color: #6ee7b7;
  }
  .smart-step-item.is-error {
    color: #991b1b;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
  }
  [data-theme="dark"] .smart-step-item.is-error {
    color: #fca5a5;
  }
  .smart-step-icon {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
  }
  .smart-process-status-msg {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
  }
  .smart-preview-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 8px;
  }
  .smart-preview-badge {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.25);
    font-size: 0.8rem;
    line-height: 1.35;
  }
  [data-theme="dark"] .smart-preview-badge {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.22);
  }
  .smart-preview-badge strong {
    display: block;
    font-size: 1rem;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
  }
  .smart-preview-badge.is-cut strong {
    color: #dc2626;
  }
  [data-theme="dark"] .smart-preview-badge.is-cut strong {
    color: #f87171;
  }
  .smart-preview-badge.is-promote strong {
    color: #059669;
  }
  [data-theme="dark"] .smart-preview-badge.is-promote strong {
    color: #34d399;
  }

  .admin-btn-danger {
    background: rgba(239, 68, 68, 0.06);
    border: 1px dashed rgba(220, 38, 38, 0.72);
    color: #991b1b;
  }
  .admin-btn-danger:hover {
    background: rgba(239, 68, 68, 0.13);
    border-style: solid;
  }
  [data-theme="dark"] .admin-btn-danger {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.65);
    background: rgba(239, 68, 68, 0.12);
  }

  .admin-btn-sem .action-btn-icon { background: rgba(245, 158, 11, 0.16); color: #b45309; }
  .admin-btn-exam .action-btn-icon { background: rgba(59, 130, 246, 0.16); color: #1d4ed8; }
  .admin-btn-grad .action-btn-icon { background: rgba(16, 185, 129, 0.16); color: #047857; }
  .admin-btn-promote .action-btn-icon { background: rgba(139, 92, 246, 0.18); color: #6d28d9; }
  .admin-btn-danger .action-btn-icon { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
  [data-theme="dark"] .admin-btn-sem .action-btn-icon { color: #fcd34d; }
  [data-theme="dark"] .admin-btn-exam .action-btn-icon { color: #93c5fd; }
  [data-theme="dark"] .admin-btn-grad .action-btn-icon { color: #6ee7b7; }
  [data-theme="dark"] .admin-btn-promote .action-btn-icon { color: #c4b5fd; }
  [data-theme="dark"] .admin-btn-danger .action-btn-icon { color: #fca5a5; }

  .admin-action-btn:focus-visible,
  .admin-hero-btn:focus-visible,
  .admin-hub-collapse-btn:focus-visible,
  .admin-tab-btn:focus-visible,
  .adm-action-btn:focus-visible,
  .admin-card-btn:focus-visible,
  .adm-back-btn:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }

  .admin-hero-btn {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border: none;
    color: white !important;
    width: 100%;
    height: 100%;
    padding: 0.55rem 0.72rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.32);
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease;
    min-height: 58px;
    min-width: 0;
    touch-action: manipulation;
  }

  .admin-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.44);
  }

  .admin-hero-btn:active {
    transform: scale(0.98);
  }

  .hero-btn-left {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
  }

  .hero-btn-icon {
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.22);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .hero-btn-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  .hero-btn-title {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-btn-sub {
    font-size: 0.71rem;
    opacity: 0.92;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-btn-arrow {
    font-size: 0.86rem;
    opacity: 0.9;
    transition: transform 0.2s;
    flex-shrink: 0;
  }

  .admin-hero-btn:hover .hero-btn-arrow {
    transform: translateX(3px);
  }

  @container admin-hub (max-width: 920px) {
    .admin-actions-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.55rem;
    }
  }

  @container admin-hub (max-width: 580px) {
    .admin-actions-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.42rem;
    }
    .admin-hub-subtitle {
      display: none;
    }
    .admin-action-btn,
    .admin-actions-grid .admin-hero-btn {
      padding: 0.42rem 0.52rem !important;
      min-height: 48px;
    }
    .admin-action-btn .action-btn-top {
      gap: 4px;
    }
    .admin-action-btn .action-btn-icon,
    .hero-btn-icon {
      width: 22px;
      height: 22px;
      font-size: 0.78rem;
    }
    .admin-live-chip {
      font-size: 0.6rem;
      padding: 1px 4px;
    }
    .admin-action-btn .action-btn-name,
    .hero-btn-title {
      font-size: 0.8rem;
    }
    .admin-action-btn .action-btn-desc,
    .hero-btn-sub {
      font-size: 0.69rem;
    }
    .hero-btn-arrow {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .admin-control-hub {
      padding: 0.65rem 0.75rem;
      margin-bottom: 0.85rem;
    }
    .admin-hub-header {
      margin-bottom: 0.45rem;
      padding-bottom: 0.4rem;
      gap: 6px;
    }
    .admin-hub-badge {
      width: 28px;
      height: 28px;
      font-size: 0.9rem;
    }
    .admin-hub-title {
      font-size: 0.92rem !important;
    }
    .admin-hub-subtitle {
      display: none;
    }
    .admin-actions-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.42rem;
    }
    .admin-action-btn,
    .admin-actions-grid .admin-hero-btn {
      padding: 0.42rem 0.52rem !important;
      min-height: 48px;
      justify-content: center;
    }
    .admin-action-btn .action-btn-top {
      gap: 4px;
    }
    .admin-action-btn .action-btn-icon,
    .hero-btn-icon {
      width: 22px;
      height: 22px;
      font-size: 0.78rem;
    }
    .admin-live-chip {
      font-size: 0.6rem;
      padding: 1px 4px;
    }
    .admin-actions-grid .admin-hero-btn {
      justify-content: space-between;
    }
    .admin-action-btn .action-btn-name,
    .hero-btn-title {
      font-size: 0.8rem;
    }
    .admin-action-btn .action-btn-desc,
    .hero-btn-sub {
      font-size: 0.69rem;
    }
    .hero-btn-arrow {
      display: none;
    }
  }

  /* 🌟 3. Admin Database Management Page Shell, Tabs & Filter Bar */
  .adm-page-card {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.75rem;
    container-type: inline-size;
  }

  .adm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 12px;
  }

  .adm-page-heading-wrap {
    min-width: 0;
  }

  .adm-page-title {
    margin: 0;
    color: #6d28d9;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
  }

  [data-theme="dark"] .adm-page-title {
    color: #c4b5fd;
  }

  .adm-page-subtitle {
    margin: 4px 0 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
  }

  .adm-back-btn {
    min-height: 44px;
    padding: 0.55rem 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }

  .admin-tabs-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1.25rem;
  }

  .admin-tabs-container {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px 6px 10px 6px;
    user-select: none;
    scroll-snap-type: x proximity;
    border-bottom: 1px solid var(--border-color);
    cursor: grab;
  }

  .admin-tabs-container:active {
    cursor: grabbing;
  }

  .admin-tabs-container::-webkit-scrollbar {
    display: none;
  }

  .admin-tab-btn {
    scroll-snap-align: center;
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    font-size: 0.92rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    touch-action: manipulation;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
  }

  .admin-tab-btn:hover {
    color: #6d28d9;
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
  }

  [data-theme="dark"] .admin-tab-btn:hover {
    color: #ddd6fe;
    border-color: #a78bfa;
  }

  .admin-tab-btn.active,
  .admin-tab-btn[aria-selected="true"] {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.35);
  }

  .adm-tabpanel:focus {
    outline: none;
  }

  .admin-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.25rem;
  }

  .admin-filter-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }

  .adm-section-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 700;
    color: var(--text-main);
    font-size: 1.08rem;
  }

  .adm-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(139, 92, 246, 0.12);
    color: #6d28d9;
    border: 1px solid rgba(139, 92, 246, 0.25);
  }

  [data-theme="dark"] .adm-count-pill {
    background: rgba(167, 139, 250, 0.18);
    color: #ddd6fe;
    border-color: rgba(167, 139, 250, 0.35);
  }

  .adm-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .adm-top-actions .btn {
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .admin-filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(148, 163, 184, 0.06);
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
  }

  .admin-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 180px;
  }

  .admin-search-wrap i {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    pointer-events: none;
  }

  .admin-search-input {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.85rem 0.5rem 2.35rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-family: 'Kanit', sans-serif;
    font-size: max(1rem, 16px);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
  }

  .admin-search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  }

  .adm-filter-selects {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
  }

  .adm-filter-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
    white-space: nowrap;
  }

  .adm-filter-select {
    width: auto;
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    border-color: var(--primary-color);
    font-size: max(1rem, 16px);
  }

  .adm-table-area {
    overflow-x: auto;
    padding-bottom: 1.5rem;
  }

  /* 🌟 4. Unified Responsive Data Table (Desktop & WCAG Dark Mode) */
  .adm-table-wrap {
    max-height: 600px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    box-shadow: var(--soft-shadow);
  }

  .admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.94rem;
    text-align: left;
  }

  .admin-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f5f3ff;
  }

  [data-theme="dark"] .admin-table thead {
    background: #1e1b2e;
  }

  .admin-table th {
    padding: 0.95rem 1rem;
    color: #5b21b6;
    font-weight: 700;
    border-bottom: 2px solid #8b5cf6;
    white-space: nowrap;
  }

  [data-theme="dark"] .admin-table th {
    color: #ddd6fe;
    border-bottom-color: #a78bfa;
  }

  .admin-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    vertical-align: middle;
  }

  .admin-table tbody tr:nth-child(even) {
    background-color: rgba(148, 163, 184, 0.04);
  }

  .admin-table tbody tr:hover {
    background-color: rgba(139, 92, 246, 0.08);
  }

  .adm-cell-center {
    text-align: center;
  }

  .adm-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
  }

  .adm-action-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.4rem 0.85rem;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    touch-action: manipulation;
  }

  .adm-action-btn-danger {
    border-color: #dc2626 !important;
    color: #b91c1c !important;
  }

  [data-theme="dark"] .adm-action-btn-danger {
    border-color: #f87171 !important;
    color: #fca5a5 !important;
  }

  .adm-action-btn-qr {
    border-color: #059669 !important;
    color: #047857 !important;
  }

  [data-theme="dark"] .adm-action-btn-qr {
    border-color: #34d399 !important;
    color: #6ee7b7 !important;
  }

  .adm-error-box {
    padding: 2.25rem 1.25rem;
    text-align: center;
    background: rgba(239, 68, 68, 0.06);
    border: 1px dashed rgba(220, 38, 38, 0.5);
    border-radius: 14px;
    color: #991b1b;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  [data-theme="dark"] .adm-error-box {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.5);
  }

  .adm-modal-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
  }

  .adm-modal-body input.form-control,
  .adm-modal-body select.form-control,
  .adm-modal-body textarea.form-control {
    font-size: max(1rem, 16px);
    min-height: 44px;
  }

  /* Dual-View Switch: Desktop Table vs Mobile Cards via Viewport AND Container Query */
  @media (min-width: 769px) {
    .admin-desktop-view {
      display: block !important;
    }
    .admin-mobile-view {
      display: none !important;
    }
  }

  @media (max-width: 768px) {
    .admin-desktop-view {
      display: none !important;
    }
    .admin-mobile-view {
      display: flex !important;
      flex-direction: column;
      gap: 12px;
    }
    .adm-page-card,
    #admin-management-page .card {
      padding: 1rem !important;
    }
    .adm-page-title {
      font-size: 1.15rem;
    }
    .adm-back-btn {
      width: 100%;
      justify-content: center;
    }
    .admin-filter-controls {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 10px;
    }
    .adm-filter-selects {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
    }
    .admin-filter-controls select,
    .admin-filter-controls button {
      width: 100% !important;
      min-height: 44px;
    }
  }

  @media (max-width: 400px) {
    .adm-top-actions {
      width: 100%;
    }
    .adm-top-actions .btn {
      flex: 1 1 calc(50% - 4px);
      justify-content: center;
    }
  }

  /* 🌟 5. Mobile Card Component */
  .admin-data-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s ease;
    content-visibility: auto;
    contain-intrinsic-size: auto 108px;
  }

  .admin-data-card:active {
    transform: scale(0.99);
  }

  .admin-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-card-badge {
    font-weight: 700;
    font-size: 0.88rem;
    padding: 3px 9px;
    border-radius: 6px;
    word-break: break-all;
  }

  .admin-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .admin-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-main);
    overflow-wrap: anywhere;
  }

  .admin-card-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
  }

  .admin-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
  }

  .admin-card-btn {
    min-height: 44px;
    flex: 1 1 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.15s ease, background-color 0.15s ease;
  }

  .admin-card-btn:active {
    transform: scale(0.96);
  }

  html[data-perf="eco"] :where(.admin-action-btn, .admin-hero-btn, .admin-tab-btn, .admin-data-card, .admin-card-btn) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .admin-action-btn,
    .admin-hero-btn,
    .admin-tab-btn,
    .admin-data-card,
    .admin-card-btn {
      transition: none !important;
      animation: none !important;
    }
  }

  @media (forced-colors: active) {
    .admin-action-btn,
    .admin-hero-btn,
    .admin-tab-btn,
    .admin-data-card,
    .admin-table,
    .admin-search-input {
      border: 1px solid CanvasText !important;
    }
    .admin-tab-btn[aria-selected="true"],
    .admin-tab-btn.active {
      background: Highlight !important;
      color: HighlightText !important;
      border-color: Highlight !important;
    }
    .admin-action-btn:focus-visible,
    .admin-hero-btn:focus-visible,
    .admin-tab-btn:focus-visible,
    .adm-action-btn:focus-visible,
    .admin-card-btn:focus-visible {
      outline: 3px solid Highlight !important;
    }
    progress.smart-progress-bar {
      border: 1px solid CanvasText !important;
      background: Canvas !important;
    }
    progress.smart-progress-bar::-webkit-progress-value {
      background: Highlight !important;
    }
    progress.smart-progress-bar::-moz-progress-bar {
      background: Highlight !important;
    }
  }

  /* ==============================================================
     🗂️ แถบสลับหมวดหมู่แดชบอร์ด (Dashboard Category Segmented Tabs)
     ============================================================== */
  .dash-category-rail {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: 16px;
    padding: 6px;
    margin-bottom: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    user-select: none;
  }
  .dash-category-rail::-webkit-scrollbar { display: none; }

  [data-theme="dark"] .dash-category-rail {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(139, 92, 246, 0.28);
  }

  .dash-cat-tab {
    flex: 1 0 auto;
    min-width: fit-content;
    min-height: 44px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-muted, #475569);
    font-family: 'Kanit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  [data-theme="dark"] .dash-cat-tab { color: #cbd5e1; }
  .dash-cat-tab:hover { color: var(--primary-color, #7c3aed); background: rgba(139, 92, 246, 0.08); }
  .dash-cat-tab:active { transform: scale(0.97); }
  .dash-cat-tab:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }

  .dash-cat-tab.active,
  .dash-cat-tab[aria-selected="true"] {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.35);
  }
  .dash-cat-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 18%;
    inset-block-end: 3px;
    border-block-end: 3px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    pointer-events: none;
  }
  [data-theme="dark"] .dash-cat-tab.active,
  [data-theme="dark"] .dash-cat-tab[aria-selected="true"] {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.5);
  }
  @media (forced-colors: active) {
    .dash-cat-tab[aria-selected="true"] {
      outline: 2px solid Highlight;
    }
    .dash-cat-tab[aria-selected="true"]::after {
      border-block-end-color: HighlightText;
    }
  }

  .cat-pill-count {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    line-height: 1.2;
  }
  .dash-cat-tab.active .cat-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  .dash-category-section {
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .dash-category-section.cat-hidden { display: none !important; }
  .dash-category-section.cat-fade-in {
    animation: catFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

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

  @media (max-width: 768px) {
    .dash-category-rail { margin-bottom: 1.5rem; padding: 4px; gap: 6px; }
    .dash-cat-tab { padding: 8px 12px; font-size: 0.82rem; gap: 6px; }
    .dash-cat-tab i { font-size: 0.95rem; }
    .cat-pill-count { font-size: 0.7rem; padding: 1px 5px; }
  }

  /* ==========================================================================
     🎓 STUDENT DASHBOARD SEGMENTED TABS & STATUS PILLS (Option A + Req 2)
     ========================================================================== */
  .student-tab-rail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    background: var(--surface-color);
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    box-shadow: var(--soft-shadow);
    margin-bottom: 1.25rem;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
    scroll-padding: 0 10px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .student-tab-rail::-webkit-scrollbar {
    display: none;
  }

  .student-tab-btn {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    scroll-snap-align: center;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box !important;
  }
  .student-tab-btn span {
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .student-tab-btn:hover {
    color: var(--text-main);
    background: rgba(139, 92, 246, 0.08);
  }
  .student-tab-btn.active {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.35);
    transform: translateY(-1px);
  }
  .student-tab-btn i {
    font-size: 1.05rem;
  }

  .s-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    background: #ef4444;
    color: #fff;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  }
  .student-tab-btn.active .s-tab-badge {
    background: #ffffff;
    color: #ef4444;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .student-tab-panel {
    display: none;
  }
  .student-tab-panel.active {
    display: block;
    animation: sPanelFadeIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes sPanelFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Task Filter Header & Status Pills */
  .task-filter-header {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--soft-shadow);
  }
  .task-status-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .task-pill {
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-muted);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    user-select: none;
  }
  .task-pill:hover {
    border-color: var(--primary-color);
    color: var(--text-main);
  }
  .task-pill.active {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  }
  .task-pill.pill-pending.active {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
  }
  .task-pill.pill-done.active {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  }
  .task-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
  }
  .task-pill.active .task-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  /* Mobile responsiveness for stats-grid, gamer header, tabs and tasks */
  @media (max-width: 599px) {
    #student-dashboard .student-profile-card {
      padding: 1rem 0.85rem !important;
      gap: 0.85rem !important;
      border-radius: 14px !important;
      margin-bottom: 1rem !important;
    }
    #student-dashboard .gamer-frame {
      width: 52px !important;
      height: 52px !important;
      font-size: 1.7rem !important;
      flex-shrink: 0 !important;
    }
    #student-dashboard #sd-student-name {
      font-size: 1.12rem !important;
      line-height: 1.3 !important;
    }
    #student-dashboard #sd-gamer-title {
      font-size: 0.8rem !important;
      padding: 2px 8px !important;
      margin-top: 2px !important;
    }
    #student-dashboard #sd-class-passion {
      font-size: 0.78rem !important;
      margin-top: 4px !important;
    }
    #student-dashboard .stats-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
      margin-bottom: 1rem !important;
    }
    #student-dashboard .stats-grid .stat-card {
      padding: 10px 8px !important;
      border-radius: 14px !important;
    }
    #student-dashboard .stats-grid .stat-card > div:first-child {
      font-size: 1.55rem !important;
      line-height: 1.1 !important;
    }
    #student-dashboard .stats-grid .stat-card > div:nth-child(2) {
      font-size: 0.78rem !important;
      margin-top: 3px !important;
    }
    .student-tab-rail {
      padding: 5px 6px !important;
      gap: 6px !important;
      margin-bottom: 1rem !important;
      border-radius: 999px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
      scroll-snap-type: x proximity !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
      scroll-padding: 0 8px;
    }
    .student-tab-btn {
      padding: 7px 13px !important;
      font-size: 0.82rem !important;
      gap: 5px !important;
      border-radius: 999px !important;
      min-height: 40px !important;
      flex: 0 0 auto !important;
      flex-shrink: 0 !important;
      flex-grow: 0 !important;
      width: auto !important;
      max-width: none !important;
      min-width: max-content !important;
      white-space: nowrap !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }
    .student-tab-btn span {
      white-space: nowrap !important;
    }
    .student-tab-btn i {
      font-size: 0.95rem !important;
    }
    .task-filter-header {
      padding: 10px 12px !important;
      gap: 10px !important;
      border-radius: 14px !important;
    }
    #sd-subject-filter {
      width: 100% !important;
      min-width: 0 !important;
    }
    .task-status-pills {
      display: grid !important;
      grid-template-columns: 1fr 1fr 1fr !important;
      gap: 6px !important;
      width: 100% !important;
    }
    .task-pill {
      width: 100% !important;
      justify-content: center !important;
      padding: 7px 4px !important;
      font-size: 0.76rem !important;
      gap: 4px !important;
      min-height: 38px !important;
      border-radius: 10px !important;
    }
    .task-pill-count {
      font-size: 0.68rem !important;
      padding: 1px 5px !important;
    }
    .task-card {
      padding: 1rem 0.9rem !important;
      border-radius: 14px !important;
    }
    #s-panel-care button.btn {
      flex: 1 1 calc(50% - 6px) !important;
      min-height: 44px !important;
      font-size: 0.82rem !important;
      padding: 0.6rem 0.8rem !important;
      border-radius: 12px !important;
      justify-content: center !important;
    }
  }

  /* ==========================================================
     ⚡ Turbo Fast Check Cloud Sync Pill & Vault Indicator
     ========================================================== */
  .fc-sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.25s ease;
    user-select: none;
    border: 1px solid transparent;
  }
  .fc-sync-pill.ready {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.25);
  }
  .fc-sync-pill.syncing {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
  }
  .fc-sync-pill.pending, .fc-sync-pill.error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    cursor: pointer;
  }
  .fc-sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
  }
  .fc-sync-pill.syncing .fc-sync-dot {
    animation: fcDotPulse 1s infinite alternate;
  }
  .fc-sync-pill.pending .fc-sync-dot, .fc-sync-pill.error .fc-sync-dot {
    animation: fcDotBlink 0.8s infinite;
  }
  @keyframes fcDotPulse {
    from { opacity: 0.4; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1.2); }
  }
  @keyframes fcDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
  }
  .fc-sync-retry-action {
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
    transition: transform 0.15s ease, background 0.15s ease;
    margin-left: 3px;
  }
  .fc-sync-retry-action:hover {
    background: #dc2626;
    transform: scale(1.05);
  }

  /* ==========================================
     📝 Exam Score Manager Grid, Mobile Cards, Contrast & Navigation UX
     ========================================== */
  .exam-shell-card {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 4px solid #8b5cf6;
  }
  .exam-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 2px dashed rgba(139, 92, 246, 0.3);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
  }
  .exam-page-title {
    margin: 0;
    color: #7c3aed;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.18rem, 2.5vw, 1.5rem);
  }
  [data-theme="dark"] .exam-page-title {
    color: #c4b5fd;
  }
  .exam-title-icon {
    background: rgba(139, 92, 246, 0.15);
    color: #7c3aed;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.18);
  }
  [data-theme="dark"] .exam-title-icon {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.25);
  }
  .exam-page-subtitle {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
  }
  .exam-back-btn {
    border-color: #7c3aed;
    color: #6d28d9;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    font-weight: 700;
  }
  [data-theme="dark"] .exam-back-btn {
    border-color: #a78bfa;
    color: #ddd6fe;
  }

  .exam-filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.15rem;
    background: rgba(139, 92, 246, 0.05);
    padding: 1.15rem;
    border-radius: 16px;
    border: 1px solid rgba(139, 92, 246, 0.28);
  }
  [data-theme="dark"] .exam-filter-panel {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(167, 139, 250, 0.3);
  }
  .exam-filter-item {
    margin: 0 !important;
    min-width: 0;
  }
  @media (min-width: 640px) {
    .exam-filter-item-wide {
      grid-column: span 2;
    }
  }
  .exam-filter-label {
    display: block;
    color: #5b21b6;
    font-weight: 700;
    font-size: 0.9rem;
  }
  [data-theme="dark"] .exam-filter-label {
    color: #ddd6fe;
  }
  .exam-filter-label-accent {
    color: #6d28d9;
    font-size: 0.98rem;
  }
  [data-theme="dark"] .exam-filter-label-accent {
    color: #c4b5fd;
  }
  .exam-filter-select {
    border-color: #c4b5fd;
    margin-top: 6px;
    font: inherit;
    font-size: max(1rem, 1em);
    min-height: 44px;
  }
  .exam-type-select-accent {
    border: 2px solid #8b5cf6;
    font-weight: 700;
  }
  .exam-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .exam-mode-pill {
    padding: 6px 12px;
    min-height: 44px;
    font-size: 0.82rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .exam-mode-pill.is-active {
    border-color: #7c3aed;
    background: #7c3aed;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
  }
  [data-theme="dark"] .exam-mode-pill.is-active {
    background: #8b5cf6;
    border-color: #a78bfa;
    color: #ffffff;
  }

  .exam-banner-slot {
    margin-bottom: 0.9rem;
  }
  .exam-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 0.9rem;
  }
  .exam-kpi-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .exam-kpi-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 600;
  }
  .exam-kpi-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
  }
  .exam-kpi-card.is-pass { border-left: 3px solid #10b981; }
  .exam-kpi-card.is-pass .exam-kpi-val { color: #047857; }
  [data-theme="dark"] .exam-kpi-card.is-pass .exam-kpi-val { color: #6ee7b7; }
  .exam-kpi-card.is-fail { border-left: 3px solid #ef4444; }
  .exam-kpi-card.is-fail .exam-kpi-val { color: #b91c1c; }
  [data-theme="dark"] .exam-kpi-card.is-fail .exam-kpi-val { color: #fca5a5; }
  .exam-kpi-card.is-accent { border-left: 3px solid #8b5cf6; }
  .exam-kpi-card.is-accent .exam-kpi-val { color: #6d28d9; }
  [data-theme="dark"] .exam-kpi-card.is-accent .exam-kpi-val { color: #c4b5fd; }

  .exam-tools-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0.85rem;
  }
  .exam-search-box {
    flex: 1 1 240px;
    max-width: 360px;
    min-width: 0;
  }
  .exam-search-field {
    position: relative;
    display: flex;
    align-items: center;
  }
  .exam-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.9rem;
  }
  .exam-search-input {
    width: 100%;
    min-height: 44px;
    font: inherit;
    font-size: max(1rem, 1em);
    padding: 0.45rem 44px 0.45rem 36px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
  }
  .exam-search-clear-btn {
    position: absolute;
    right: 2px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .exam-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .exam-filter-chip {
    min-height: 44px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .exam-filter-chip.is-active {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #ffffff;
    font-weight: 700;
  }
  [data-theme="dark"] .exam-filter-chip.is-active {
    background: #8b5cf6;
    border-color: #a78bfa;
  }

  .exam-action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .exam-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
  }
  .exam-dirty-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid #d97706;
    color: #92400e;
  }
  [data-theme="dark"] .exam-dirty-pill {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fcd34d;
  }
  .exam-btn-print {
    border-color: #d97706;
    color: #92400e;
    background: rgba(245, 158, 11, 0.1);
    font-weight: 700;
    min-height: 44px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
  }
  [data-theme="dark"] .exam-btn-print {
    border-color: #f59e0b;
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.18);
  }
  .exam-btn-save {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    min-height: 44px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
  }
  .exam-btn-save:disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }

  .exam-table-area {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    min-height: 240px;
    background: var(--surface-color);
    box-shadow: var(--soft-shadow);
  }
  .exam-table-wrap {
    container-type: inline-size;
    container-name: examwrap;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .exam-score-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 0.93rem;
  }
  .exam-score-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f5f3ff;
    color: #4c1d95;
    border-bottom: 2px solid #8b5cf6;
  }
  [data-theme="dark"] .exam-score-table thead th {
    background: #231f3f;
    color: #e9d5ff;
    border-bottom-color: #a78bfa;
  }
  .exam-score-table thead th.exam-th-mid {
    background: #eff6ff;
    color: #1e40af;
    border-left: 2px solid rgba(59, 130, 246, 0.35);
  }
  [data-theme="dark"] .exam-score-table thead th.exam-th-mid {
    background: #172554;
    color: #bfdbfe;
  }
  .exam-score-table thead th.exam-th-mid-retake {
    background: #f8fafc;
    color: #1e40af;
  }
  [data-theme="dark"] .exam-score-table thead th.exam-th-mid-retake {
    background: #1e293b;
    color: #bfdbfe;
  }
  .exam-score-table thead th.exam-th-fin {
    background: #f5f3ff;
    color: #5b21b6;
    border-left: 2px solid rgba(139, 92, 246, 0.35);
  }
  [data-theme="dark"] .exam-score-table thead th.exam-th-fin {
    background: #2e1065;
    color: #ddd6fe;
  }
  .exam-score-table thead th.exam-th-fin-retake {
    background: #faf5ff;
    color: #5b21b6;
  }
  [data-theme="dark"] .exam-score-table thead th.exam-th-fin-retake {
    background: #281b45;
    color: #ddd6fe;
  }
  .exam-score-table thead th.exam-th-total {
    background: #ecfdf5;
    color: #065f46;
    border-left: 2px solid var(--border-color);
  }
  [data-theme="dark"] .exam-score-table thead th.exam-th-total {
    background: #064e3b;
    color: #a7f3d0;
  }
  .exam-score-table tbody tr {
    transition: background-color 0.15s ease;
  }
  .exam-score-table tbody td {
    border-bottom: 1px solid var(--border-color);
  }
  .exam-score-table tbody tr.exam-row-filtered-out {
    display: none !important;
  }
  .exam-score-table tbody tr.exam-active-row {
    background-color: rgba(139, 92, 246, 0.09) !important;
  }
  [data-theme="dark"] .exam-score-table tbody tr.exam-active-row {
    background-color: rgba(139, 92, 246, 0.22) !important;
  }

  .exam-input-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  #exam-manager-page .form-control,
  .exam-input-score,
  .exam-input-retake,
  .exam-input-resigned {
    font: inherit;
    font-size: max(1rem, 1em);
    min-height: 44px;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
  }
  .exam-input-score:focus,
  .exam-input-retake:focus {
    outline: none;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.28) !important;
  }
  .exam-input-score[readonly]:focus,
  .exam-input-retake[readonly]:focus {
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.35) !important;
  }
  .exam-lock-btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 38px;
    min-height: 38px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  [data-theme="dark"] .exam-lock-btn {
    color: #cbd5e1;
  }
  .exam-privacy-btn {
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s, background-color 0.2s;
  }
  .exam-privacy-btn:hover {
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.1);
  }
  [data-theme="dark"] .exam-privacy-btn {
    color: #cbd5e1;
  }

  .exam-head-action-btn {
    margin-top: 6px;
    min-height: 34px;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-color);
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .exam-head-action-btn.is-blue { border: 1px solid #2563eb; color: #1d4ed8; }
  [data-theme="dark"] .exam-head-action-btn.is-blue { border-color: #60a5fa; color: #93c5fd; }
  .exam-head-action-btn.is-purple { border: 1px solid #7c3aed; color: #6d28d9; }
  [data-theme="dark"] .exam-head-action-btn.is-purple { border-color: #a78bfa; color: #ddd6fe; }
  .exam-head-action-btn.is-red { border: 1px solid #dc2626; color: #b91c1c; }
  [data-theme="dark"] .exam-head-action-btn.is-red { border-color: #f87171; color: #fca5a5; }

  .exam-mobile-col-tools {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(139, 92, 246, 0.06);
    border-bottom: 1px solid var(--border-color);
  }
  .exam-mobile-col-tools .exam-head-action-btn {
    min-height: 44px;
    padding: 6px 12px;
    margin-top: 0;
  }

  .exam-total-pill {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    padding: 5px 11px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .exam-total-pill.pass {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.4);
  }
  [data-theme="dark"] .exam-total-pill.pass {
    color: #6ee7b7;
  }
  .exam-total-pill.fail {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.4);
  }
  [data-theme="dark"] .exam-total-pill.fail {
    color: #fca5a5;
  }
  .exam-total-pill.empty {
    color: var(--text-muted);
    font-weight: normal;
  }

  /* Banner Contrast Tokens */
  .exam-banner-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 10px;
    font-size: 0.88rem;
  }
  .exam-banner-box.is-warning {
    border: 1.5px dashed #d97706;
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
  }
  [data-theme="dark"] .exam-banner-box.is-warning {
    color: #fcd34d;
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.16);
  }
  .exam-banner-box.is-info {
    border: 1.5px solid #3b82f6;
    background: rgba(59, 130, 246, 0.09);
    color: #1e40af;
  }
  [data-theme="dark"] .exam-banner-box.is-info {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.18);
  }
  .exam-banner-box.is-purple {
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.08);
    color: #4c1d95;
  }
  [data-theme="dark"] .exam-banner-box.is-purple {
    color: #ddd6fe;
    background: rgba(139, 92, 246, 0.18);
  }
  .exam-banner-box.is-privacy {
    border: 1px dashed #dc2626;
    background: rgba(239, 68, 68, 0.06);
    color: #991b1b;
  }
  [data-theme="dark"] .exam-banner-box.is-privacy {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
  }
  .exam-banner-box.is-cleared {
    background: rgba(16, 185, 129, 0.12);
    border: 1.5px solid #10b981;
    color: #065f46;
  }
  [data-theme="dark"] .exam-banner-box.is-cleared {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.18);
  }
  .exam-retake-alert-card {
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.13), rgba(245, 158, 11, 0.1));
    border: 2px solid #ef4444;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.14);
  }
  .exam-retake-alert-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: #991b1b;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  [data-theme="dark"] .exam-retake-alert-title {
    color: #fca5a5;
  }
  .exam-retake-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    min-height: 44px;
    border-radius: 999px;
    border: 1.5px solid #ef4444;
    background: var(--surface-color);
    color: #991b1b;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.12);
  }
  [data-theme="dark"] .exam-retake-chip {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.35);
  }
  .exam-scope-subj-chip {
    display: inline-block;
    background: rgba(139, 92, 246, 0.14);
    color: #5b21b6;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
    margin: 1px 2px;
  }
  [data-theme="dark"] .exam-scope-subj-chip {
    background: rgba(167, 139, 250, 0.24);
    color: #e9d5ff;
  }

  /* Responsive Container Query: Transform single semantic <table> into touch cards on < 680px */
  @container examwrap (width < 680px) {
    .exam-mobile-col-tools {
      display: flex;
    }
    .exam-score-table,
    .exam-score-table tbody {
      display: block;
      width: 100%;
      min-width: 0 !important;
      box-sizing: border-box;
    }
    .exam-score-table thead {
      display: none !important;
    }
    .exam-score-table tbody tr.exam-score-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      padding: 12px;
      margin: 10px;
      width: calc(100% - 20px);
      max-width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      background: var(--surface-color);
      box-shadow: var(--soft-shadow);
    }
    .exam-score-table tbody tr.exam-score-row[data-resigned-row="true"] {
      border-style: dashed;
      background: rgba(148, 163, 184, 0.08);
    }
    .exam-score-table tbody tr.exam-score-row td {
      display: block;
      padding: 0 !important;
      border: none !important;
      text-align: left !important;
      min-width: 0;
    }
    .exam-score-table tbody tr.exam-score-row td.exam-cell-num {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 800;
      font-size: 0.85rem;
      color: var(--primary-color);
    }
    .exam-score-table tbody tr.exam-score-row td.exam-cell-num::before {
      content: "เลขที่ ";
      font-weight: 700;
      color: var(--text-muted);
      margin-right: 4px;
    }
    .exam-score-table tbody tr.exam-score-row td.exam-cell-name {
      grid-column: 1 / -1;
      border-bottom: 1px dashed var(--border-color) !important;
      padding-bottom: 8px !important;
      margin-bottom: 2px;
      font-weight: 700;
    }
    .exam-score-table tbody tr.exam-score-row td.exam-cell-total,
    .exam-score-table tbody tr.exam-score-row td.exam-cell-closed-pair {
      grid-column: 1 / -1;
      padding-top: 6px !important;
      border-top: 1px dashed var(--border-color) !important;
      text-align: center !important;
    }
    .exam-score-table tbody tr.exam-score-row td[data-col-label]::before {
      content: attr(data-col-label);
      display: block;
      font-size: 0.74rem;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .exam-score-table tbody tr.exam-score-row td.exam-cell-total::before {
      margin-bottom: 5px;
    }
  }

  @container examwrap (width >= 680px) {
    .exam-score-table th:nth-child(1),
    .exam-score-table td.exam-cell-num {
      position: sticky;
      left: 0;
      z-index: 2;
      background: var(--surface-color);
    }
    .exam-score-table th:nth-child(1) {
      z-index: 4;
      background: #f5f3ff;
    }
    .exam-score-table th:nth-child(2),
    .exam-score-table td.exam-cell-name {
      position: sticky;
      left: 58px;
      z-index: 2;
      background: var(--surface-color);
      box-shadow: 2px 0 6px -2px rgba(15, 23, 42, 0.08);
    }
    .exam-score-table th:nth-child(2) {
      z-index: 4;
      background: #f5f3ff;
    }
    [data-theme="dark"] .exam-score-table th:nth-child(1),
    [data-theme="dark"] .exam-score-table th:nth-child(2) {
      background: #231f3f;
    }
    [data-theme="dark"] .exam-score-table td.exam-cell-name {
      box-shadow: 2px 0 8px -2px rgba(0, 0, 0, 0.45);
    }
    .exam-score-table tbody tr.exam-active-row td.exam-cell-num,
    .exam-score-table tbody tr.exam-active-row td.exam-cell-name {
      background: #f3effe;
    }
    [data-theme="dark"] .exam-score-table tbody tr.exam-active-row td.exam-cell-num,
    [data-theme="dark"] .exam-score-table tbody tr.exam-active-row td.exam-cell-name {
      background: #2b234d;
    }
  }

  [data-theme="dark"] #exam-manager-page .exam-input-score[readonly],
  [data-theme="dark"] #exam-manager-page .exam-input-retake[readonly] {
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
  [data-theme="dark"] #exam-manager-page .exam-input-retake[data-retake-eligible="false"] {
    color: transparent !important;
    background: rgba(255, 255, 255, 0.02) !important;
  }
  [data-theme="dark"] #exam-manager-page .exam-input-retake[data-retake-eligible="true"]:not([readonly]) {
    color: #fca5a5 !important;
    border-color: #f87171 !important;
    background: rgba(239, 68, 68, 0.14) !important;
  }

  @supports (content-visibility: auto) {
    .exam-kpi-strip,
    .exam-banner-box {
      content-visibility: auto;
      contain-intrinsic-size: auto 72px;
    }
  }
  @supports not (content-visibility: auto) {
    .exam-kpi-strip,
    .exam-banner-box {
      contain: layout style paint;
    }
  }

  @media (max-width: 767px) {
    .exam-filter-panel {
      grid-template-columns: 1fr;
      padding: 0.9rem;
    }
    .exam-action-bar.has-actions {
      position: sticky;
      bottom: 8px;
      z-index: 25;
      background: var(--surface-color);
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px solid var(--border-color);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
      justify-content: space-between;
    }
    body.has-mobile-nav .exam-action-bar.has-actions {
      bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }
    body.has-mobile-nav #exam-table-area {
      margin-bottom: 115px;
    }
    .exam-action-bar.has-actions .exam-action-buttons {
      width: 100%;
    }
    .exam-action-bar.has-actions .exam-btn-print,
    .exam-action-bar.has-actions .exam-btn-save {
      flex: 1 1 140px;
    }
  }

  #exam-manager-page :is(button, input, select, [tabindex="0"]):focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 2px;
  }
  #exam-manager-page .quick-bar-toggle-btn,
  #exam-manager-page .quick-cls-pill {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  @media (forced-colors: active) {
    .exam-mode-pill.is-active,
    .exam-filter-chip.is-active,
    .exam-total-pill,
    .exam-retake-chip,
    .exam-banner-box,
    .exam-retake-alert-card,
    .exam-input-score,
    .exam-input-retake {
      border: 2px solid ButtonText !important;
    }
    .exam-mode-pill.is-active,
    .exam-filter-chip.is-active {
      outline: 2px solid Highlight;
    }
  }

  html[data-perf="eco"] #exam-manager-page *,
  html[data-perf="eco"] #exam-manager-page *::before,
  html[data-perf="eco"] #exam-manager-page *::after {
    transition: none !important;
    animation: none !important;
  }

  /* ==========================================
     ⚡ Homeroom Turbo Missing-Work Cards & Multi-Submit Toolbar
     ========================================== */
  .hr-batch-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
  }
  .hr-missing-card {
    background: var(--surface-color);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 3px solid #ef4444;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
  }
  .hr-missing-card.is-checked {
    border-color: rgba(16, 185, 129, 0.55);
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
  }
  .hr-missing-card.is-syncing {
    border-color: rgba(245, 158, 11, 0.5);
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
  }
  .hr-missing-card.is-synced {
    border-color: rgba(16, 185, 129, 0.45);
    border-left-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
  }

  /* ==========================================
     🎫 ระบบคิวคำร้อง QR หาย & ปุ่มสลับโหมดพิมพ์ (สี / ขาวดำ)
     ========================================== */
  .qr-dashboard-queue-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
    letter-spacing: 0.02em;
  }

  .qr-mode-toggle-group {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.16);
    border: 1px solid rgba(148, 163, 184, 0.3);
    gap: 4px;
  }

  .qr-mode-toggle-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.18s ease;
  }

  .qr-mode-toggle-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.45);
  }

  #btn-qr-mode-color.active {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
  }

  #btn-qr-mode-bw.active {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.35);
  }

  .qr-queue-panel {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 0.95rem;
    border-radius: 16px;
    margin-bottom: 14px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.12);
  }
  .qr-queue-header {
    font-weight: 800;
    color: #10b981;
    margin-bottom: 10px;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .qr-queue-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 180px;
    min-width: 0;
    line-height: 1.35;
  }
  .qr-queue-icon {
    background: #10b981;
    color: white;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
  }
  .qr-queue-clear-btn {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 6px 12px !important;
    min-height: 36px;
    font-size: 0.8rem;
    border-radius: 10px;
    border: 1.5px solid rgba(239, 68, 68, 0.45);
    background: transparent;
    color: #ef4444;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  .qr-queue-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 2px;
  }

  .qr-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
    background: var(--surface-solid, #ffffff);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  }
  .qr-queue-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .qr-queue-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.92rem;
    line-height: 1.38;
    word-break: break-word;
  }
  .qr-queue-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
  }
  .qr-queue-detail-chunk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .qr-queue-remove-btn {
    width: 38px !important;
    min-width: 38px;
    min-height: 38px;
    flex: 0 0 38px !important;
    padding: 0 !important;
    border-radius: 10px;
    border: 1.5px solid rgba(239, 68, 68, 0.38);
    background: rgba(239, 68, 68, 0.06);
    color: #ef4444;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
  .qr-queue-print-cta {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    width: 100%;
    justify-content: center;
    border: none;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    font-size: 0.98rem;
    min-height: 44px;
    height: auto !important;
    padding: 0.65rem 1rem !important;
    line-height: 1.3;
    font-weight: bold;
  }
  .lost-qr-swal-popup .swal2-title {
    padding: 0.75em 2.5em 0 !important;
  }
  .lost-qr-modal-title {
    padding-inline: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #ef4444;
    font-size: clamp(1rem, 4vw, 1.24rem);
    line-height: 1.3;
  }
  .lost-qr-confirm-box {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(217, 119, 6, 0.55);
    background: rgba(245, 158, 11, 0.1);
    text-align: left;
  }
  .lost-qr-confirm-box[hidden] {
    display: none !important;
  }
  .lost-qr-confirm-title {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
  }
  .lost-qr-confirm-desc {
    margin: 0 0 8px 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-main);
    overflow-wrap: anywhere;
  }
  .lost-qr-confirm-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }
  .lost-qr-confirm-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(217, 119, 6, 0.45);
    color: #92400e;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .lost-qr-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .lost-qr-confirm-btn {
    min-height: 44px;
    flex: 1 1 140px;
    justify-content: center;
    font-weight: 700;
    border-radius: 10px;
    touch-action: manipulation;
  }
  .lost-qr-confirm-danger {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.28);
  }
  [data-theme="dark"] .lost-qr-confirm-box {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(251, 191, 36, 0.45);
  }
  [data-theme="dark"] .lost-qr-confirm-title,
  [data-theme="dark"] .lost-qr-confirm-chip {
    color: #fcd34d;
  }
  [data-theme="dark"] .lost-qr-confirm-chip {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.38);
  }
  html[data-perf="eco"] .lost-qr-confirm-box {
    transition: none !important;
    animation: none !important;
  }
  .lost-qr-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 480px) {
    .lost-qr-swal-popup {
      padding: 1.1rem 0.85rem !important;
    }
    .lost-qr-swal-popup .swal2-html-container {
      margin: 0.65rem 0 0 0 !important;
      padding: 0 !important;
    }
    .lost-qr-action-grid {
      grid-template-columns: 1fr;
    }
    .qr-queue-remove-btn {
      width: 44px !important;
      min-width: 44px;
      min-height: 44px;
      flex: 0 0 44px !important;
    }
    .qr-queue-clear-btn {
      min-height: 40px;
      padding: 6px 12px !important;
    }
  }

  .qr-queue-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
  }

  .qr-queue-badge.is-reprint {
    background: rgba(2, 132, 199, 0.14);
    color: #0369a1;
  }

  .qr-queue-badge.is-new {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
  }

  .qr-preview-mode-pill {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 2px;
  }

  .qr-preview-mode-pill.is-reprint {
    background: rgba(2, 132, 199, 0.14);
    color: #0369a1;
  }

  .qr-preview-mode-pill.is-new {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
  }

  [data-theme="dark"] .qr-mode-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  [data-theme="dark"] .qr-queue-item {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(168, 85, 247, 0.25);
  }
  [data-theme="dark"] .qr-queue-badge.is-reprint,
  [data-theme="dark"] .qr-preview-mode-pill.is-reprint {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
  }
  [data-theme="dark"] .qr-queue-badge.is-new,
  [data-theme="dark"] .qr-preview-mode-pill.is-new {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
  }

  .pixel-fire {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }

  /* ==============================================================
     📅 ระบบ "ใครยังไม่ส่งงาน?" (Submissions Report) — Mobile-First UX & Perf
     ============================================================== */
  :root {
    --dr-target-size: 24px;
  }
  @media (pointer: coarse) {
    :root {
      --dr-target-size: 44px;
    }
  }

  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  #daily-report-page .dr-page-card {
    container: dr-report / inline-size;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    overflow-wrap: anywhere;
  }

  #daily-report-page :is(h2, h3) {
    text-wrap: balance;
  }

  #daily-report-page :is(p, li) {
    text-wrap: pretty;
  }

  #daily-report-page :where(button, select, input, summary, .dr-pill-btn) {
    min-block-size: var(--dr-target-size);
    min-inline-size: var(--dr-target-size);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  #daily-report-page :where(button, select, input, summary):focus-visible {
    outline: 2px solid var(--primary-color, #4f46e5);
    outline-offset: 2px;
  }

  .dr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.9rem;
    border-bottom: 2px dashed rgba(239, 68, 68, 0.28);
    padding-bottom: 1rem;
    margin-bottom: 1.15rem;
  }

  .dr-header-title-wrap {
    flex: 1 1 260px;
    min-inline-size: 0;
  }

  .dr-title {
    margin: 0;
    color: #ef4444;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.45rem);
    line-height: 1.3;
  }

  .dr-title-sub {
    font-size: 0.85em;
    font-weight: 600;
    opacity: 0.9;
  }

  .dr-title-icon {
    background: rgba(239, 68, 68, 0.14);
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.18);
  }

  .dr-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 6px 0 0 0;
    line-height: 1.45;
  }

  .dr-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
  }

  .dr-btn-refresh {
    border-color: rgba(79, 70, 229, 0.45);
    color: var(--primary-color, #4f46e5);
    padding: 0.45rem 0.9rem;
    font-weight: 600;
  }

  .dr-btn-back {
    border-color: #ef4444;
    color: #ef4444;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
  }

  .dr-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    background: var(--surface-color);
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.15rem;
    box-shadow: var(--soft-shadow);
  }

  @container dr-report (inline-size >= 620px) {
    .dr-filter-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 1.25rem;
    }
  }

  .dr-filter-field {
    margin: 0;
    min-inline-size: 0;
  }

  .dr-filter-label {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
  }

  .dr-filter-control {
    background-color: var(--bg-color);
    color: var(--text-main);
    border-color: rgba(99, 102, 241, 0.45);
    font-size: 1rem;
  }

  .dr-empty-box {
    padding: 3rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    background: var(--surface-color);
    text-align: center;
  }

  /* KPI Strip (2x2 on phone -> 4 columns on tablet/desktop container) */
  .dr-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
  }

  @container dr-report (inline-size >= 600px) {
    .dr-kpi-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.9rem;
    }
  }

  .dr-kpi-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.85rem 0.9rem;
    box-shadow: var(--soft-shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
  }

  .dr-kpi-card.is-danger { border-left: 4px solid #ef4444; background: rgba(239, 68, 68, 0.04); }
  .dr-kpi-card.is-warn   { border-left: 4px solid #f59e0b; background: rgba(245, 158, 11, 0.04); }
  .dr-kpi-card.is-success{ border-left: 4px solid #10b981; background: rgba(16, 185, 129, 0.04); }
  .dr-kpi-card.is-info   { border-left: 4px solid #3b82f6; background: rgba(59, 130, 246, 0.04); }

  .dr-kpi-val {
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-main);
  }
  .dr-kpi-card.is-danger .dr-kpi-val { color: #ef4444; }
  .dr-kpi-card.is-warn .dr-kpi-val { color: #d97706; }
  .dr-kpi-card.is-success .dr-kpi-val { color: #059669; }
  .dr-kpi-card.is-info .dr-kpi-val { color: #2563eb; }
  [data-theme="dark"] .dr-kpi-card.is-warn .dr-kpi-val { color: #fbbf24; }
  [data-theme="dark"] .dr-kpi-card.is-success .dr-kpi-val { color: #34d399; }
  [data-theme="dark"] .dr-kpi-card.is-info .dr-kpi-val { color: #60a5fa; }

  .dr-kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
  }

  /* Toolbar: View Switcher + Search + Swipeable Filter Rail */
  .dr-toolbar {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0.9rem;
    margin-bottom: 1rem;
    box-shadow: var(--soft-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .dr-toolbar-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    justify-content: space-between;
  }

  .dr-view-switch {
    display: inline-flex;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    flex: 1 1 240px;
    max-inline-size: 420px;
  }

  .dr-view-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.45rem 0.75rem;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }

  .dr-view-btn[aria-selected="true"] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.28);
  }

  .dr-search-wrap {
    position: relative;
    flex: 1 1 220px;
    min-inline-size: 0;
  }

  .dr-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
  }

  .dr-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.85rem 0.5rem 2.25rem;
    border-radius: 11px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
  }

  .dr-chip-rail {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
  }

  .dr-chip-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  }

  .dr-chip-btn[aria-pressed="true"] {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #dc2626;
    font-weight: 700;
  }
  [data-theme="dark"] .dr-chip-btn[aria-pressed="true"] {
    color: #fca5a5;
  }

  .dr-chip-btn:active, .dr-view-btn:active, #daily-report-page .btn:active {
    transform: scale(0.97);
  }

  /* Master Quick Actions Banner */
  .dr-master-banner {
    background: rgba(245, 158, 11, 0.06);
    border: 1.5px dashed rgba(245, 158, 11, 0.65);
    padding: 1rem;
    border-radius: 16px;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  @container dr-report (inline-size >= 620px) {
    .dr-master-banner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1.15rem 1.25rem;
    }
  }

  .dr-master-info {
    min-inline-size: 0;
  }
  .dr-master-title {
    margin: 0;
    font-size: 1rem;
    color: #b45309;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  [data-theme="dark"] .dr-master-title { color: #fbbf24; }
  .dr-master-desc {
    margin: 3px 0 0 0;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.4;
  }

  .dr-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
  }

  .dr-action-row > button {
    flex: 1 1 150px;
    justify-content: center;
  }

  /* Native <details> Report Cards with CSS Containment */
  .dr-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .dr-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 180px;
  }

  @supports not (content-visibility: auto) {
    .dr-card {
      contain: layout style paint;
    }
  }

  .dr-card.is-missing { border-color: rgba(239, 68, 68, 0.45); }
  .dr-card.is-done    { border-color: rgba(16, 185, 129, 0.45); }

  .dr-card-summary {
    list-style: none;
    cursor: pointer;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    background: rgba(239, 68, 68, 0.06);
    border-bottom: 1px dashed transparent;
    transition: background-color 0.15s ease;
  }

  .dr-card-summary::-webkit-details-marker {
    display: none;
  }

  .dr-card.is-done > .dr-card-summary {
    background: rgba(16, 185, 129, 0.07);
  }

  .dr-card[open] > .dr-card-summary {
    border-bottom-color: var(--border-color);
  }

  .dr-summary-left {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    flex: 1 1 220px;
    min-inline-size: 0;
  }

  .dr-chevron {
    color: var(--text-muted);
    margin-top: 4px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
  }

  .dr-card[open] .dr-chevron {
    transform: rotate(90deg);
  }

  .dr-summary-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
  }

  .dr-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
  }

  .dr-subj-pill {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    background: #ef4444;
  }
  .dr-card.is-done .dr-subj-pill {
    background: #10b981;
  }

  .dr-summary-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.35;
  }

  .dr-summary-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
  }

  .dr-count-badge {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .dr-count-badge.is-missing {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
  }
  .dr-count-badge.is-done {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
  }
  [data-theme="dark"] .dr-count-badge.is-missing { color: #fca5a5; }
  [data-theme="dark"] .dr-count-badge.is-done { color: #34d399; }

  .dr-card-body {
    padding: 0.95rem 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .dr-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
  }

  .dr-progress-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    overflow: hidden;
  }

  .dr-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #34d399);
  }

  .dr-missing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 8px;
  }

  .dr-student-chip {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    font-size: 0.88rem;
  }

  .dr-num-pill {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    min-inline-size: 26px;
    block-size: 26px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
    flex: 0 0 auto;
  }
  [data-theme="dark"] .dr-num-pill { color: #fca5a5; }

  .dr-stu-card-item {
    background: var(--surface-color);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    box-shadow: var(--soft-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    content-visibility: auto;
    contain-intrinsic-size: auto 130px;
  }

  .dr-stu-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .dr-stu-work-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .dr-stu-work-tag {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px 9px;
    font-size: 0.82rem;
    color: var(--text-main);
  }

  .dr-copy-status {
    font-size: 0.78rem;
    font-weight: 700;
    color: #059669;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }
  .dr-copy-status.is-visible {
    opacity: 1;
  }

  .dr-accordions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.6rem;
    font-size: 0.84rem;
    color: var(--text-muted);
  }

  @media (max-width: 520px) {
    #daily-report-page .dr-page-card {
      padding: 1rem 0.85rem max(1.5rem, env(safe-area-inset-bottom, 0px));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dr-chevron,
    .dr-view-btn,
    .dr-chip-btn,
    .dr-card-summary,
    .dr-copy-status {
      transition: none !important;
    }
    .dr-chip-btn:active, .dr-view-btn:active, #daily-report-page .btn:active {
      transform: none !important;
    }
  }

  /* =====================================================================
     📋 Attendance & Attendance Dashboard (Mobile-First, Term 1-2, A11y)
     ===================================================================== */
  #attendance-page,
  #attendance-dashboard-page {
    --att-accent: #7c3aed;
    --att-accent-soft: rgba(139, 92, 246, 0.12);
    --att-th-sticky-bg: #f5f3ff;
    --att-target-min: 44px;
  }

  [data-theme="dark"] #attendance-page,
  [data-theme="dark"] #attendance-dashboard-page {
    --att-accent: #c4b5fd;
    --att-accent-soft: rgba(139, 92, 246, 0.22);
    --att-th-sticky-bg: #1e1b4b;
  }

  .att-page-card {
    container: att-page / inline-size;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    overflow-wrap: anywhere;
  }

  .att-dash-card {
    container: att-dash / inline-size;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    overflow-wrap: anywhere;
  }

  :is(#attendance-page, #attendance-dashboard-page) :is(h2, h3) {
    text-wrap: balance;
  }

  :is(#attendance-page, #attendance-dashboard-page) :is(p, li) {
    text-wrap: pretty;
  }

  :is(#attendance-page, #attendance-dashboard-page) :where(button, select, input):focus-visible,
  .att-table-wrapper:focus-visible {
    outline: 2.5px solid #8b5cf6;
    outline-offset: 2px;
  }

  :is(#attendance-page, #attendance-dashboard-page) :where(button, select, input:not([type="checkbox"]), .att-tab-btn, .att-chip-btn) {
    min-block-size: var(--att-target-min);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  @media (pointer: coarse) {
    :is(#attendance-page, #attendance-dashboard-page) :where(select, input:not([type="checkbox"]), .att-tab-btn, .att-quick-btn) {
      min-block-size: 48px;
    }
  }

  .att-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.9rem;
    border-bottom: 2px dashed rgba(139, 92, 246, 0.28);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
  }

  .att-header-title-wrap {
    flex: 1 1 260px;
    min-inline-size: 0;
  }

  .att-title {
    margin: 0;
    color: var(--att-accent);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.45rem);
    line-height: 1.3;
  }

  .att-title-icon {
    background: var(--att-accent-soft);
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.16);
  }

  .att-sem-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--att-accent-soft);
    color: var(--att-accent);
    border: 1px solid rgba(139, 92, 246, 0.35);
  }

  .att-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 6px 0 0 0;
    line-height: 1.45;
  }

  .att-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
  }

  .att-btn-create {
    background-color: #7c3aed;
    border-color: #7c3aed;
  }

  .att-btn-dash,
  .att-btn-back,
  .att-btn-refresh {
    border-color: rgba(139, 92, 246, 0.5);
    color: var(--att-accent);
    font-weight: 600;
  }

  .att-btn-danger-outline {
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
    font-weight: 600;
  }
  .att-btn-danger-outline:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* Form controls & Create form */
  .att-create-form {
    background: rgba(139, 92, 246, 0.05);
    padding: 1.25rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    border: 1.5px dashed rgba(139, 92, 246, 0.5);
  }

  .att-create-heading {
    margin: 0 0 1rem 0;
    color: var(--att-accent);
    font-size: 1.08rem;
  }

  .att-create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
  }

  .att-class-fieldset {
    grid-column: 1 / -1;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin: 0;
    background: var(--bg-color);
  }

  .att-fieldset-legend {
    font-weight: 700;
    color: var(--att-accent);
    padding: 0 6px;
    font-size: 0.95rem;
  }

  .att-hint-inline {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.84rem;
  }

  .att-class-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.65rem;
  }

  .att-mini-btn {
    min-block-size: 36px !important;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.45);
    background: var(--surface-color);
    color: var(--att-accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
  }

  .att-class-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 160px;
    overflow-y: auto;
    padding: 2px;
  }

  .att-class-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-color);
    padding: 8px 14px;
    min-block-size: 44px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.92rem;
  }

  .att-class-chip input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #7c3aed;
    margin: 0;
  }

  .att-field-col {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .att-field-title {
    grid-column: 1 / -1;
  }

  .att-select-control,
  .att-text-control,
  .att-event-select,
  .att-scan-input,
  .att-search-input {
    font: inherit;
    font-size: max(1rem, 1em);
    box-sizing: border-box;
    min-inline-size: 0;
  }

  .att-event-select {
    border: 2px solid #8b5cf6;
    font-weight: 700;
  }

  .att-create-actions {
    margin-top: 1.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Selector Workstation & Filter Grids */
  .att-workstation-box {
    background: var(--surface-color);
    padding: 1.15rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
  }

  .att-selector-grid,
  .att-dash-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
  }

  .att-dash-filter-grid {
    background: rgba(139, 92, 246, 0.05);
    padding: 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(139, 92, 246, 0.3);
  }

  .att-filter-field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-inline-size: 0;
  }

  .att-filter-event-wide,
  .att-dash-event-field {
    grid-column: 1 / -1;
  }

  .att-filter-label {
    font-weight: 700;
    color: var(--att-accent);
    font-size: 0.93rem;
  }

  .att-event-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1rem;
  }

  .att-progress-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--att-accent-soft);
    color: var(--att-accent);
    font-weight: 700;
    font-size: 0.88rem;
  }

  .att-event-meta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Accessible Single-Row Scrollable Tablist */
  .att-tablist {
    display: flex;
    overflow-x: auto;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
  }
  .att-tablist::-webkit-scrollbar {
    display: none;
  }

  .att-tab-btn {
    flex: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.65rem 1.05rem;
    background: transparent;
    border: none;
    border-radius: 10px 10px 0 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
  }

  .att-tab-btn[aria-selected="true"] {
    color: var(--att-accent);
    background: rgba(139, 92, 246, 0.06);
  }

  .att-tab-btn[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    border-block-end: 3px solid currentColor;
  }

  /* Tabpanel inner padding wrapper (do NOT put box styling on [role="tabpanel"] itself) */
  .att-panel-inner {
    padding-top: 0.25rem;
  }

  /* Scanner input & controls */
  .att-scan-box {
    background: rgba(139, 92, 246, 0.05);
    padding: 1.15rem;
    border-radius: 14px;
    border: 1.5px dashed rgba(139, 92, 246, 0.55);
    margin-bottom: 1.15rem;
  }

  .att-scan-label {
    display: block;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--att-accent);
    margin-bottom: 0.65rem;
  }

  .att-scan-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: stretch;
  }

  .att-scan-input {
    flex: 1 1 220px;
    font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.35rem);
    font-weight: 700;
  }

  .att-scan-submit-btn {
    flex: 0 0 auto;
    background: #7c3aed;
    border-color: #7c3aed;
    padding: 0 1.25rem;
    font-weight: 700;
  }

  @media (max-width: 520px) {
    .att-scan-submit-btn {
      flex: 1 1 100%;
      justify-content: center;
    }
  }

  .att-scan-options-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.9rem;
  }

  .att-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    min-block-size: 44px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid transparent;
  }

  .att-toggle-chip input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .att-toggle-chip label {
    cursor: pointer;
    margin: 0;
  }

  .att-toggle-chip--manual {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
  }
  .att-toggle-chip--manual input { accent-color: #ef4444; }
  [data-theme="dark"] .att-toggle-chip--manual { color: #fca5a5; }

  .att-toggle-chip--late {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
  }
  .att-toggle-chip--late input { accent-color: #f59e0b; }
  [data-theme="dark"] .att-toggle-chip--late { color: #fcd34d; }

  .att-result-area {
    margin-top: 1rem;
    text-align: center;
    min-height: 80px;
  }

  /* Quick Roster Checklist (Mobile-first) */
  .att-roster-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }

  .att-roster-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    content-visibility: auto;
    contain-intrinsic-size: auto 84px;
  }

  .att-roster-card.is-present { border-color: rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.05); }
  .att-roster-card.is-late    { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.06); }

  .att-roster-stu {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 190px;
    min-inline-size: 0;
  }

  .att-num-pill {
    background: var(--att-accent-soft);
    color: var(--att-accent);
    min-inline-size: 30px;
    block-size: 30px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex: 0 0 auto;
  }

  .att-roster-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .att-quick-btn {
    min-block-size: 44px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .att-quick-btn[aria-pressed="true"].is-present {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
  }

  .att-quick-btn[aria-pressed="true"].is-late {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
  }

  .att-quick-btn--clear {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.35);
  }

  /* Dashboard KPI Grid */
  .att-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
  }

  .att-kpi-card {
    padding: 1rem 0.75rem;
    border-radius: 16px;
    text-align: center;
  }

  .att-kpi-card--total   { background: rgba(139, 92, 246, 0.06); border: 1px solid rgba(139, 92, 246, 0.32); }
  .att-kpi-card--present { background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.32); }
  .att-kpi-card--special { background: rgba(245, 158, 11, 0.07); border: 1px solid rgba(245, 158, 11, 0.35); }
  .att-kpi-card--absent  { background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.32); }

  .att-kpi-num {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
  }
  .att-kpi-card--total .att-kpi-num   { color: #7c3aed; }
  [data-theme="dark"] .att-kpi-card--total .att-kpi-num { color: #c4b5fd; }
  .att-kpi-card--present .att-kpi-num { color: #059669; }
  [data-theme="dark"] .att-kpi-card--present .att-kpi-num { color: #34d399; }
  .att-kpi-card--special .att-kpi-num { color: #d97706; }
  [data-theme="dark"] .att-kpi-card--special .att-kpi-num { color: #fbbf24; }
  .att-kpi-card--absent .att-kpi-num  { color: #dc2626; }
  [data-theme="dark"] .att-kpi-card--absent .att-kpi-num { color: #fca5a5; }

  .att-kpi-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 6px;
    font-weight: 700;
  }

  /* Toolbar Search & Filter Chips */
  .att-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.9rem;
    margin-bottom: 1rem;
  }

  .att-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
  }

  .att-search-form {
    flex: 1 1 240px;
    min-inline-size: 0;
  }

  .att-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  .att-search-icon {
    position: absolute;
    inset-inline-start: 14px;
    color: var(--text-muted);
    pointer-events: none;
  }

  .att-search-input {
    width: 100%;
    padding: 0.55rem 0.9rem 0.55rem 2.4rem;
    border-radius: 12px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
  }

  .att-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  .att-chip-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .att-chip-btn[aria-pressed="true"] {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
  }

  .att-export-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
  }

  .att-copy-status {
    font-size: 0.82rem;
    font-weight: 700;
    color: #059669;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .att-copy-status.is-visible { opacity: 1; }
  [data-theme="dark"] .att-copy-status { color: #34d399; }

  .att-event-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.4);
    padding: 0.95rem 1rem;
    border-radius: 14px;
    margin-bottom: 0.9rem;
  }

  /* Responsive Table with @container + Sticky Context + Stacked Mobile Cards */
  .att-table-wrapper {
    overflow: auto;
    max-inline-size: 100%;
    max-block-size: min(560px, 75vh);
    container-type: inline-size;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--surface-color);
    box-shadow: var(--soft-shadow);
  }

  .att-resp-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 0;
    min-inline-size: 0;
    text-align: left;
  }

  .att-resp-table caption {
    text-align: left;
    padding: 0.75rem 1rem 0.25rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  .att-resp-table thead {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
  }

  .att-resp-table thead th {
    background: var(--att-th-sticky-bg);
    color: var(--att-accent);
    padding: 0.85rem 0.9rem;
    font-weight: 800;
    font-size: 0.9rem;
    border-bottom: 2px solid rgba(139, 92, 246, 0.45);
    white-space: nowrap;
  }

  .att-resp-table tbody th {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--surface-color);
    padding: 0.75rem 0.9rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
  }

  .att-resp-table tbody td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
  }

  .att-resp-table tbody tr:hover td,
  .att-resp-table tbody tr:hover th {
    background: rgba(139, 92, 246, 0.05);
  }

  .att-stu-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-inline-size: 0;
  }

  .att-stu-name-text {
    color: var(--text-main);
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .att-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.83rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .att-status-badge--present { background: rgba(16, 185, 129, 0.14); color: #059669; }
  [data-theme="dark"] .att-status-badge--present { color: #34d399; }
  .att-status-badge--manual  { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
  [data-theme="dark"] .att-status-badge--manual { color: #93c5fd; }
  .att-status-badge--late    { background: rgba(245, 158, 11, 0.15); color: #b45309; }
  [data-theme="dark"] .att-status-badge--late { color: #fcd34d; }
  .att-status-badge--absent  { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
  [data-theme="dark"] .att-status-badge--absent { color: #fca5a5; }

  .att-row-quick-ops {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .att-row-mini-btn {
    min-block-size: var(--att-target-min);
    min-inline-size: 48px;
    padding: 6px 11px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .att-row-mini-btn.is-active-present { background: #10b981; border-color: #10b981; color: #fff; }
  .att-row-mini-btn.is-active-late    { background: #d97706; border-color: #d97706; color: #fff; }
  .att-row-mini-btn.is-clear          { color: #ef4444; border-color: rgba(239, 68, 68, 0.35); }

  .att-table--event {
    --att-label-2: "สถานะ";
    --att-label-3: "เวลา";
    --att-label-4: "แก้ไขด่วน";
  }

  .att-table--summary {
    --att-label-2: "ห้องเรียน";
    --att-label-3: "เข้าเรียน";
    --att-label-4: "ขาด";
    --att-label-5: "อัตราเข้าเรียน";
  }

  @container (width < 600px) {
    .att-table-wrapper {
      border: none;
      background: transparent;
      box-shadow: none;
      max-block-size: none;
      overflow: visible;
    }

    .att-resp-table,
    .att-resp-table thead,
    .att-resp-table tbody,
    .att-resp-table tr,
    .att-resp-table th,
    .att-resp-table td {
      display: block;
    }

    .att-resp-table caption {
      padding: 0 0 0.65rem 0;
    }

    .att-resp-table thead {
      /* MANDATORY: Hide column header from layout and screen readers on mobile card transform */
      display: none;
    }

    .att-resp-table tbody tr {
      margin-block-end: 0.8rem;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      background: var(--surface-color);
      box-shadow: var(--soft-shadow);
      overflow: hidden;
    }

    .att-resp-table tbody th {
      position: sticky;
      inset-block-start: 0;
      z-index: 2;
      background: var(--att-th-sticky-bg);
      border-bottom: 1px solid rgba(139, 92, 246, 0.25);
      padding: 0.75rem 0.9rem;
    }

    .att-resp-table tbody td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 0.65rem 0.9rem;
      border-bottom: 1px dashed var(--border-color);
      text-align: right;
    }

    .att-resp-table tbody tr td:last-child {
      border-bottom: none;
    }

    .att-resp-table td:nth-child(2)::before {
      content: var(--att-label-2) ": ";
      font-weight: 700;
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    .att-resp-table td:nth-child(3)::before {
      content: var(--att-label-3) ": ";
      font-weight: 700;
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    .att-resp-table td:nth-child(4)::before {
      content: var(--att-label-4) ": ";
      font-weight: 700;
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    .att-resp-table td:nth-child(5)::before {
      content: var(--att-label-5) ": ";
      font-weight: 700;
      color: var(--text-muted);
      font-size: 0.85rem;
    }
  }

  .att-rate-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .att-rate-bar {
    width: 68px;
    height: 8px;
    border-radius: 999px;
    background: var(--border-color);
    overflow: hidden;
  }

  .att-rate-fill {
    height: 100%;
    border-radius: 999px;
  }

  @media (max-width: 520px) {
    .att-page-card,
    .att-dash-card {
      padding: 1rem 0.85rem max(1.5rem, env(safe-area-inset-bottom, 0px));
    }
    .att-workstation-box {
      padding: 0.85rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .att-copy-status,
    .att-tab-btn,
    .att-quick-btn,
    .att-chip-btn {
      transition: none !important;
    }
  }

  /* =====================================================================
     ⚡ Performance Mode (Low-Spec / Anti-Flicker) & Background Pause System
     ===================================================================== */
  html {
    background-color: #bae6fd;
    color-scheme: light;
  }
  html[data-theme="dark"] {
    background-color: #0f172a;
    color-scheme: dark;
  }

  /* Navbar Performance Toggle Pill + Floating Toast */
  .perf-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.42rem 0.78rem;
    min-block-size: 40px;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-family: 'Kanit', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    touch-action: manipulation;
  }
  .perf-toggle-btn:hover {
    border-color: var(--primary-color);
  }
  .perf-toggle-btn:focus-visible,
  .icon-btn:focus-visible {
    outline: 2.5px solid var(--primary-color);
    outline-offset: 2px;
  }
  .perf-toggle-btn[aria-pressed="true"] {
    background: rgba(16, 185, 129, 0.16);
    border-color: #10b981;
    color: #047857;
  }
  [data-theme="dark"] .perf-toggle-btn[aria-pressed="true"] {
    background: rgba(16, 185, 129, 0.22);
    border-color: #34d399;
    color: #6ee7b7;
  }
  @media (pointer: coarse) {
    .perf-toggle-btn,
    .icon-btn,
    .navbar .btn-outline {
      min-block-size: 44px;
      min-inline-size: 44px;
    }
  }
  @media (max-width: 520px) {
    .navbar {
      padding: 0.58rem 0.85rem !important;
      gap: 0.48rem 0.6rem;
    }
    .nav-brand {
      font-size: 1.15rem;
    }
    .nav-actions {
      gap: 0.45rem !important;
      justify-content: flex-end;
    }
    .navbar:has(#login-btn:not([style*="display: none"]):not([style*="display:none"])) .nav-actions {
      flex-basis: 100%;
      width: 100%;
      justify-content: flex-end;
      padding-top: 0.48rem;
      border-top: 1px solid rgba(2, 132, 199, 0.16);
    }
    [data-theme="dark"] .navbar:has(#login-btn:not([style*="display: none"]):not([style*="display:none"])) .nav-actions {
      border-top-color: rgba(168, 85, 247, 0.25);
    }
    .navbar:has(#login-btn:not([style*="display: none"]):not([style*="display:none"])) #perf-toggle {
      margin-inline-end: auto;
    }
    .perf-toggle-btn,
    .icon-btn,
    .navbar .btn-outline {
      min-block-size: 44px;
      min-inline-size: 44px;
    }
    .perf-toggle-btn {
      padding: 0.38rem 0.72rem;
      font-size: 0.8rem;
    }
    .navbar .btn-outline {
      padding: 0.42rem 0.82rem !important;
      font-size: 0.84rem;
    }
  }
  @media (max-width: 350px) {
    .perf-toggle-btn {
      padding: 0.35rem 0.58rem;
      font-size: 0.76rem;
    }
    .navbar .btn-outline {
      padding: 0.38rem 0.68rem !important;
      font-size: 0.8rem;
    }
  }
  .navbar .btn-outline:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }
  @media (forced-colors: active) {
    .perf-toggle-btn,
    .icon-btn,
    .navbar .btn-outline {
      border: 1px solid ButtonText;
    }
    .perf-toggle-btn[aria-pressed="true"] {
      outline: 2px solid Highlight;
    }
  }

  .perf-mode-toast {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 16px);
    background: #0f172a;
    color: #f8fafc;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.45);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    z-index: 10050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    max-width: calc(100vw - 24px);
    text-align: center;
  }
  .perf-mode-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  body.has-mobile-nav .perf-mode-toast {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* Pause all infinite animations automatically when browser tab is backgrounded / minimized */
  html[data-tab-hidden="true"] *,
  html[data-tab-hidden="true"] *::before,
  html[data-tab-hidden="true"] *::after {
    animation-play-state: paused !important;
  }

  /* Eco / Performance Mode Design Token Reactivity (No Backdrop-Filter Blur, No Infinite Repaint Loops) */
  html[data-perf="eco"] {
    --surface-color: #f0f9ff;
    --blur-chrome: none;
    --soft-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    --transition-speed: 0.08s;
    --transition-page: 0.1s;
  }
  html[data-theme="dark"][data-perf="eco"] {
    --surface-color: #111c33;
    --blur-chrome: none;
    --soft-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  }

  :where(html[data-perf="eco"]) :where(
    .navbar, .card, .swal2-popup, .stat-banner-card, .system-announcement-card,
    .modal-overlay, #mobile-bottom-nav, .behavior-modal, dialog.care-dialog::backdrop,
    #secret-mail-modal, #kudos-modal, #house-cup-modal, #mood-modal
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-perf="eco"] .skeleton::after,
  html[data-perf="eco"] .badge-new-shine::after,
  html[data-perf="eco"] .badge-mythic::after,
  html[data-perf="eco"] .super-rank-one::before,
  html[data-perf="eco"] .grad-celebrate-card::before,
  html[data-perf="eco"] .glow-gold,
  html[data-perf="eco"] .fire-glow,
  html[data-perf="eco"] .text-danger-pulse,
  html[data-perf="eco"] .badge-mythic,
  html[data-perf="eco"] .badge-legendary,
  html[data-perf="eco"] .badge-epic,
  html[data-perf="eco"] .badge-cursed,
  html[data-perf="eco"] .badge-secret,
  html[data-perf="eco"] .badge-divine,
  html[data-perf="eco"] .super-rank-one,
  html[data-perf="eco"] .grad-celebrate-card,
  html[data-perf="eco"] .fc-sync-dot,
  html[data-perf="eco"] .fade-in,
  html[data-perf="eco"] .slide-up,
  html[data-perf="eco"] .cheer-box,
  html[data-perf="eco"] .empty-state,
  html[data-perf="eco"] .empty-state i,
  html[data-perf="eco"] i.fa-bounce,
  html[data-perf="eco"] i.fa-beat,
  html[data-perf="eco"] i.fa-shake,
  html[data-perf="eco"] i.fa-beat-fade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html[data-perf="eco"] .skeleton::after,
  html[data-perf="eco"] .badge-new-shine::after,
  html[data-perf="eco"] .badge-mythic::after,
  html[data-perf="eco"] .super-rank-one::before,
  html[data-perf="eco"] .grad-celebrate-card::before {
    display: none !important;
  }

  html[data-perf="eco"] :where(.card, .action-card, .achieve-badge, .stat-card, .stat-banner-card, .assignment-item, .noti-premium-card) {
    box-shadow: var(--soft-shadow) !important;
  }
  html[data-perf="eco"] :where(.card:hover, .action-card:hover, .achieve-badge:hover, .stat-card:hover, .stat-banner-card:hover, .assignment-item:hover, .btn:hover, .btn:hover i, .action-card:hover i, .qr-card-container:hover) {
    transform: none !important;
  }
  html[data-perf="eco"] .fa-spin {
    animation-duration: 2s !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .skeleton::after,
    .badge-new-shine::after,
    .badge-mythic::after,
    .super-rank-one::before,
    .grad-celebrate-card::before,
    .glow-gold,
    .fire-glow,
    .text-danger-pulse,
    .badge-mythic,
    .badge-legendary,
    .badge-epic,
    .badge-cursed,
    .badge-secret,
    .badge-divine,
    .super-rank-one,
    .grad-celebrate-card,
    .fc-sync-dot,
    .fade-in,
    .slide-up,
    .cheer-box,
    .empty-state,
    .empty-state i,
    i.fa-bounce,
    i.fa-beat,
    i.fa-shake,
    i.fa-beat-fade {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .fa-spin {
      animation-duration: 2.2s !important;
    }
    .perf-mode-toast {
      transition: opacity 0.1s linear !important;
    }
  }

  /* ==========================================
     💖 Student Care & Profile Manager V3 (Mobile-First, Accessible, Container-Aware)
     ========================================== */
  .care-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .care-page-card,
  .spm-page-card {
    padding: clamp(1rem, 3vw, 1.75rem);
  }

  .care-page-header,
  .spm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px dashed rgba(236, 72, 153, 0.28);
  }
  .spm-header {
    border-bottom-color: rgba(245, 158, 11, 0.3);
  }

  .care-title-block,
  .spm-title-block {
    flex: 1 1 280px;
    min-width: 0;
  }

  .care-page-title,
  .spm-page-title {
    margin: 0;
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .care-page-title { color: #ec4899; }
  .spm-page-title { color: #d97706; }
  html[data-theme="dark"] .spm-page-title { color: #fbbf24; }

  .care-title-icon,
  .spm-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
  }
  .care-title-icon {
    background: rgba(236, 72, 153, 0.14);
    color: #ec4899;
  }
  .spm-title-icon {
    background: rgba(245, 158, 11, 0.16);
    color: #f59e0b;
  }

  .care-page-subtitle,
  .spm-page-subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 0.45rem 0 0 0;
    line-height: 1.45;
  }

  .care-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.65rem;
  }

  .care-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
  }
  .care-kpi-pill.is-warn {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
  }
  .care-kpi-pill.is-pink {
    background: rgba(236, 72, 153, 0.14);
    color: #be185d;
    border: 1px solid rgba(236, 72, 153, 0.35);
  }
  html[data-theme="dark"] .care-kpi-pill.is-warn { color: #fcd34d; }
  html[data-theme="dark"] .care-kpi-pill.is-pink { color: #f9a8d4; }

  .care-updated-pill {
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  .care-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }
  .care-btn-refresh,
  .care-btn-back,
  .spm-btn-back {
    min-height: 44px;
    padding: 0.5rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    touch-action: manipulation;
  }
  .care-btn-refresh {
    border-color: rgba(236, 72, 153, 0.5);
    color: #db2777;
  }
  html[data-theme="dark"] .care-btn-refresh { color: #f472b6; }
  .care-btn-back { border-color: #ec4899; color: #ec4899; }
  .spm-btn-back { border-color: #f59e0b; color: #d97706; }
  html[data-theme="dark"] .spm-btn-back { color: #fbbf24; }

  /* Toolbar & Search */
  .care-toolbar,
  .spm-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--border-color);
  }
  .care-search-wrap,
  .spm-search-wrap {
    position: relative;
    flex: 1 1 230px;
    min-width: 0;
  }
  .care-search-icon,
  .spm-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
  }
  .care-search-input,
  .spm-search-input,
  .care-class-select,
  .spm-select-control,
  .care-form-control {
    font-size: max(1rem, 1em);
    min-height: 44px;
  }
  .care-search-input,
  .spm-search-input {
    padding-left: 2.35rem;
    width: 100%;
    box-sizing: border-box;
  }
  .care-class-filter-wrap {
    flex: 0 1 190px;
    min-width: 150px;
  }
  .care-filter-chips,
  .spm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .care-chip,
  .spm-chip {
    min-height: 44px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .care-chip.is-active {
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
  }
  .spm-chip.is-active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
  }

  /* Mobile Pane Switcher (visible < 900px) */
  .care-mobile-tabs {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 1rem;
    background: rgba(148, 163, 184, 0.1);
    padding: 0.35rem;
    border-radius: 12px;
  }
  .care-mobile-tab {
    min-height: 44px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    touch-action: manipulation;
  }
  .care-mobile-tab.is-active {
    background: var(--surface-color);
    color: #ec4899;
    box-shadow: var(--soft-shadow);
  }
  @media (max-width: 900px) {
    .care-mobile-tabs { display: grid; }
    .care-board-grid[data-pane="moods"] #care-mails-panel { display: none; }
    .care-board-grid[data-pane="mails"] #care-moods-panel { display: none; }
  }

  .care-panel {
    background: var(--surface-color);
    padding: clamp(0.95rem, 2.5vw, 1.35rem);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--soft-shadow);
    min-width: 0;
  }
  .care-panel-mood { border-color: rgba(245, 158, 11, 0.35); }
  .care-panel-mail { border-color: rgba(236, 72, 153, 0.35); }

  .care-panel-head { margin-bottom: 1rem; }
  .care-panel-title {
    margin: 0 0 0.3rem 0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
  .care-panel-title.is-mood { color: #d97706; }
  .care-panel-title.is-mail { color: #db2777; }
  html[data-theme="dark"] .care-panel-title.is-mood { color: #fbbf24; }
  html[data-theme="dark"] .care-panel-title.is-mail { color: #f472b6; }
  .care-panel-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .care-scroll-list {
    max-height: min(68vh, 620px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
  }
  .care-date-heading {
    margin: 1rem 0 0.75rem 0;
    padding: 0.55rem 0.85rem;
    background: rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    font-weight: 700;
    color: #2563eb;
    font-size: 0.96rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .care-date-heading:first-child { margin-top: 0; }
  html[data-theme="dark"] .care-date-heading { color: #60a5fa; }

  .care-class-group {
    margin-bottom: 1rem;
    border-left: 2px dashed rgba(245, 158, 11, 0.4);
    padding-left: 0.75rem;
    container-type: inline-size;
  }
  .care-class-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f59e0b;
    color: #fff;
    padding: 0.25rem 0.7rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
  }
  .care-mood-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
  @container (min-width: 480px) {
    .care-mood-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .care-mood-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--surface-color);
    border: 1px solid rgba(245, 158, 11, 0.24);
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    box-shadow: var(--soft-shadow);
    content-visibility: auto;
    contain-intrinsic-size: auto 84px;
    min-width: 0;
  }
  .care-mood-card.is-attention {
    border-color: rgba(239, 68, 68, 0.45);
    border-left: 4px solid #ef4444;
    background: rgba(239, 68, 68, 0.04);
  }
  .care-mood-emoji-badge {
    font-size: 2.1rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .care-mood-body {
    flex: 1 1 auto;
    min-width: 0;
  }
  .care-mood-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-main);
    word-break: break-word;
    margin-bottom: 2px;
  }
  .care-mood-desc {
    font-size: 0.85rem;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 3px;
  }
  html[data-theme="dark"] .care-mood-desc { color: #c4b5fd; }
  .care-mood-card.is-attention .care-mood-desc {
    color: #dc2626;
  }
  html[data-theme="dark"] .care-mood-card.is-attention .care-mood-desc { color: #fca5a5; }
  .care-mood-time {
    font-size: 0.76rem;
    color: var(--text-muted);
  }

  /* Secret Mail Cards */
  .care-mail-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .care-mail-card {
    border-left: 5px solid #9ca3af;
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
    transition: border-color 0.2s ease, opacity 0.25s ease;
  }
  .care-mail-card.is-unread {
    border-left-color: #ec4899;
    background: rgba(236, 72, 153, 0.04);
  }
  .care-mail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
  }
  .care-mail-sender {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1 1 200px;
  }
  .care-mail-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(236, 72, 153, 0.12);
    color: #ec4899;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .care-mail-sender-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.98rem;
    line-height: 1.35;
    word-break: break-word;
  }
  .care-mail-tag {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    margin-left: 0.35rem;
  }
  .care-mail-tag.is-sys {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
  }
  .care-mail-tag.is-unread {
    background: rgba(236, 72, 153, 0.16);
    color: #db2777;
  }
  .care-mail-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .care-mail-action-btn {
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    touch-action: manipulation;
  }
  .care-mail-body {
    background: rgba(236, 72, 153, 0.03);
    border: 1px dashed rgba(236, 72, 153, 0.3);
    padding: 0.85rem 1rem;
    border-radius: 10px;
    color: var(--text-main);
    font-size: 0.96rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .care-mail-footer {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Student Profile Manager Controls & Responsive Cards */
  .spm-controls-card {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    background: rgba(245, 158, 11, 0.06);
    padding: clamp(0.9rem, 2.5vw, 1.35rem);
    border-radius: 16px;
    border: 1px solid rgba(245, 158, 11, 0.3);
  }
  .spm-select-group {
    margin: 0;
    flex: 1 1 200px;
    min-width: 0;
  }
  .spm-control-label {
    color: #b45309;
    font-weight: 700;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.35rem;
  }
  html[data-theme="dark"] .spm-control-label { color: #fcd34d; }
  .spm-select-control {
    border-color: #fcd34d;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
  }
  .spm-btn-save {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    min-height: 46px;
    padding: 0.65rem 1.25rem;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.35);
    touch-action: manipulation;
  }
  .spm-dirty-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
  }
  .spm-summary-bar {
    font-size: 0.84rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-left: auto;
  }

  .spm-table-area {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    min-height: 220px;
    background: var(--surface-color);
    box-shadow: var(--soft-shadow);
    padding: clamp(0.75rem, 2vw, 1.15rem);
    container-type: inline-size;
    container-name: spm-grid;
  }
  .spm-cards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  @container spm-grid (min-width: 780px) {
    .spm-cards-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .spm-student-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid #f59e0b;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: var(--soft-shadow);
    content-visibility: auto;
    contain-intrinsic-size: auto 340px;
    min-width: 0;
  }
  .spm-student-card.is-dirty {
    border-color: #10b981;
    border-left-width: 5px;
    background: rgba(16, 185, 129, 0.04);
  }
  .spm-student-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px dashed var(--border-color);
  }
  .spm-student-identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
  }
  .spm-num-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 0.45rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-weight: 800;
    font-size: 0.88rem;
    flex-shrink: 0;
  }
  html[data-theme="dark"] .spm-num-pill { color: #fcd34d; }
  .spm-student-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    margin: 0;
    word-break: break-word;
  }
  .spm-status-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .spm-status-pill.is-done {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
  }
  .spm-status-pill.is-partial {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
  }
  .spm-status-pill.is-dirty {
    background: rgba(59, 130, 246, 0.16);
    color: #2563eb;
  }
  html[data-theme="dark"] .spm-status-pill.is-done { color: #34d399; }
  html[data-theme="dark"] .spm-status-pill.is-partial { color: #fcd34d; }
  html[data-theme="dark"] .spm-status-pill.is-dirty { color: #60a5fa; }

  .spm-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
  }
  @container spm-grid (min-width: 520px) {
    .spm-fields-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .spm-field-full {
      grid-column: 1 / -1;
    }
  }
  .spm-field-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
  }
  .spm-field-group .form-control {
    width: 100%;
    box-sizing: border-box;
    font-size: max(1rem, 1em);
    min-height: 44px;
    padding: 0.5rem 0.7rem;
  }

  /* Native Top-Layer Dialog Modals */
  dialog.care-dialog {
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-main);
    width: min(500px, calc(100vw - 1.5rem));
    max-width: min(500px, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    overflow: visible;
  }
  dialog.care-dialog:not([open]) {
    display: none;
  }
  dialog.care-dialog:modal {
    overscroll-behavior: contain;
  }
  dialog.care-dialog::backdrop {
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    overscroll-behavior: contain;
    overflow: hidden;
  }
  .care-dialog-panel {
    position: relative;
    background: var(--surface-color);
    color: var(--text-main);
    padding: clamp(1.2rem, 4vw, 1.85rem);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .care-mood-dialog .care-dialog-panel { max-width: 460px; text-align: center; }
  .care-profile-dialog .care-dialog-panel { border: 2px solid #8b5cf6; }
  .care-dialog-close {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
  }
  .care-dialog-close:hover,
  .care-dialog-close:focus-visible {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
  }
  .care-dialog-title {
    margin: 0 2.4rem 0.35rem 0;
    font-size: 1.35rem;
  }
  .care-mood-dialog .care-dialog-title,
  .care-profile-dialog .care-dialog-title {
    margin-left: 2.4rem;
    text-align: center;
  }
  .care-dialog-title.is-mood { color: #f59e0b; }
  .care-dialog-title.is-mail { color: #ec4899; }
  .care-dialog-title.is-profile { color: #8b5cf6; }
  .care-dialog-subtitle {
    margin: 0 0 1.1rem 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .care-dialog-subtitle.is-left { text-align: left; }

  .care-mood-choices-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 1.15rem;
  }
  @media (max-width: 360px) {
    .care-mood-choices-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .care-mood-choice-btn {
    border-radius: 12px;
    padding: 0.6rem 0.3rem;
    min-height: 66px;
    flex-direction: column;
    gap: 0.25rem;
    touch-action: manipulation;
    transition: transform 0.16s ease, border-color 0.16s ease;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(148, 163, 184, 0.08);
  }
  .care-mood-choice-btn:hover { transform: translateY(-2px); }
  .care-mood-choice-btn[data-tone="emerald"] { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.32); }
  .care-mood-choice-btn[data-tone="blue"] { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.32); }
  .care-mood-choice-btn[data-tone="amber"] { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.32); }
  .care-mood-choice-btn[data-tone="purple"] { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.32); }
  .care-mood-choice-btn[data-tone="pink"] { background: rgba(236,72,153,0.1); border-color: rgba(236,72,153,0.32); }
  .care-mood-choice-btn[data-tone="slate"] { background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.34); }
  .care-mood-choice-btn[data-tone="sky"] { background: rgba(14,165,233,0.1); border-color: rgba(14,165,233,0.32); }
  .care-mood-choice-btn[data-tone="teal"] { background: rgba(20,184,166,0.1); border-color: rgba(20,184,166,0.32); }
  .care-mood-choice-btn[data-tone="orange"] { background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.32); }
  .care-mood-choice-btn[data-tone="red"] { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.32); }
  .care-mood-choice-btn[data-tone="indigo"] { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.32); }
  .care-mood-emoji { font-size: 1.85rem; line-height: 1; }
  .care-mood-label { font-size: 0.78rem; font-weight: 700; color: var(--text-main); }

  .care-dialog-skip-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
  }
  .care-form-label {
    display: block;
    text-align: left;
    font-weight: 700;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
  }
  .care-char-counter {
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
  }
  .care-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1rem;
  }
  .care-dialog-actions .btn { min-height: 44px; }
  .care-dialog-actions.is-split { justify-content: space-between; }

  .care-mood-choice-btn:focus-visible,
  .care-dialog-close:focus-visible,
  .care-chip:focus-visible,
  .spm-chip:focus-visible,
  .care-mobile-tab:focus-visible,
  .care-mail-action-btn:focus-visible,
  .care-action-pill:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }

  /* Eco Mode / Reduced Motion Overrides for Student Care & Profiles */
  html[data-perf="eco"] :where(.care-mood-card, .care-mail-card, .spm-student-card, .care-panel),
  html[data-perf="eco"] .care-mood-choice-btn {
    transition: none !important;
    transform: none !important;
    box-shadow: var(--soft-shadow) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .care-mood-choice-btn,
    .care-chip,
    .spm-chip,
    .care-mail-card {
      transition: none !important;
    }
    .care-mood-choice-btn:hover { transform: none !important; }
  }

  /* =========================================================
     📋 Production Assignment Manager & Behavior Manager UI
     Mobile-First • Container Queries • Low-Spec School PC Safe
     ========================================================= */
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .am-page-header,
  .beh-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px dashed rgba(16, 185, 129, 0.28);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 12px;
  }
  .beh-page-header {
    border-bottom-color: rgba(236, 72, 153, 0.28);
  }

  .am-touch-btn,
  .beh-touch-btn,
  .am-pill-action-btn,
  .am-quick-date-btn,
  .am-status-pill,
  .beh-filter-pill,
  .beh-tab-btn,
  .beh-stu-chip,
  .beh-preset-item,
  .beh-manage-btn {
    min-height: 44px;
    touch-action: manipulation;
  }

  .am-input,
  .beh-input,
  .am-select-compact,
  .beh-custom-num,
  #assignment-manager-page input,
  #assignment-manager-page select,
  #assignment-manager-page textarea,
  #behavior-manager-page input,
  #behavior-manager-page select,
  #behaviorModal input {
    font-size: max(1rem, 1em);
  }

  .am-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
  }
  .am-form-grid-dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
  }
  .am-form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 10px;
    border-top: 1px dashed var(--border-color);
    padding-top: 1.25rem;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* Validation after interaction only (:user-invalid + fallback class) */
  #am-form-area :is(input, select, textarea):is(:user-invalid, .user-invalid-fallback),
  #am-class-container.user-invalid-fallback,
  #custom-beh-form :is(input, select):is(:user-invalid, .user-invalid-fallback) {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
  }
  #am-form-area :is(input, select, textarea):user-valid:not([type="hidden"]) {
    border-color: #10b981;
  }
  .am-field-error {
    color: #dc2626;
    font-size: 0.84rem;
    font-weight: 600;
    margin: 6px 0 0 0;
  }
  .am-field-error[hidden] { display: none; }
  [data-theme="dark"] .am-field-error { color: #fca5a5; }

  .am-sem-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #065f46;
  }
  [data-theme="dark"] .am-sem-pill {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(52, 211, 153, 0.45);
    color: #6ee7b7;
  }

  .am-subject-new-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #b45309;
    display: block;
    margin-bottom: 4px;
  }
  .am-subject-new-hint {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed #d97706;
    color: #92400e;
    padding: 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    line-height: 1.5;
  }
  [data-theme="dark"] .am-subject-new-label { color: #fcd34d; }
  [data-theme="dark"] .am-subject-new-hint {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fde68a;
  }

  .am-hint-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .am-char-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
  }
  .am-char-count.is-near-limit { color: #b45309; }
  [data-theme="dark"] .am-char-count.is-near-limit { color: #fcd34d; }

  .am-date-warn {
    color: #92400e;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.4);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 6px 0 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .am-date-warn[hidden] { display: none; }
  [data-theme="dark"] .am-date-warn {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(251, 191, 36, 0.45);
  }
  .am-class-summary-warn { color: #b45309; }
  .am-class-summary-ok { color: #047857; }
  [data-theme="dark"] .am-class-summary-warn { color: #fcd34d; }
  [data-theme="dark"] .am-class-summary-ok { color: #6ee7b7; }

  .am-pill-action-btn {
    padding: 0 12px;
    font-size: 0.82rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .am-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1.25rem;
    background: rgba(16, 185, 129, 0.05);
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(16, 185, 129, 0.28);
  }
  .am-filter-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .am-search-wrap {
    position: relative;
    min-width: 220px;
    flex: 1 1 260px;
  }
  .am-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
  }
  .am-clear-search-btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
  .am-clear-search-btn[hidden] { display: none; }
  .am-filter-select-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .am-filter-label {
    font-weight: bold;
    font-size: 0.85rem;
    color: #047857;
    white-space: nowrap;
  }
  [data-theme="dark"] .am-filter-label { color: #6ee7b7; }
  .am-total-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #065f46;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    white-space: nowrap;
  }
  [data-theme="dark"] .am-total-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
  }
  .am-stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 8px;
    margin-bottom: 1rem;
  }
  .am-stats-strip:empty {
    display: none;
  }
  .am-kpi-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-main);
  }
  .am-kpi-pill strong {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .am-kpi-pill--warn strong { color: #b91c1c; }
  .am-kpi-pill--ok strong { color: #047857; }
  .am-kpi-pill--info strong { color: #1d4ed8; }
  [data-theme="dark"] .am-kpi-pill--warn strong { color: #fca5a5; }
  [data-theme="dark"] .am-kpi-pill--ok strong { color: #6ee7b7; }
  [data-theme="dark"] .am-kpi-pill--info strong { color: #93c5fd; }
  .am-select-compact {
    width: auto;
    min-height: 44px;
    padding: 6px 10px;
    border-color: rgba(16, 185, 129, 0.55);
  }
  .am-filter-secondary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(16, 185, 129, 0.22);
  }
  .am-status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .am-status-pill,
  .beh-filter-pill {
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .am-status-pill.active {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
  }
  .beh-filter-pill.active {
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
  }

  /* Unified Container-Query Responsive Assignment Table (No Duplicate DOM!) */
  .am-list-shell {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface-color);
    box-shadow: var(--soft-shadow);
    overflow: hidden;
  }
  .am-table-region {
    container-type: inline-size;
    container-name: amtable;
    overflow-x: auto;
    max-height: 75vh;
    overflow-y: auto;
    outline: none;
  }
  .am-table-region:focus-visible {
    box-shadow: inset 0 0 0 3px #10b981;
  }
  .am-responsive-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }
  .am-responsive-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-solid, #f0f9ff);
    border-bottom: 2px solid var(--border-color);
    padding: 12px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .am-responsive-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
  }
  .am-responsive-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 108px;
  }
  @supports not (content-visibility: auto) {
    .am-responsive-table tbody tr,
    .beh-manage-card {
      contain: layout style paint;
    }
  }
  .am-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
  }
  .am-row-action-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    touch-action: manipulation;
  }
  .am-class-chip-btn {
    min-height: 44px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.38);
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    touch-action: manipulation;
  }
  [data-theme="dark"] .am-class-chip-btn {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(59, 130, 246, 0.16);
    color: #93c5fd;
  }
  .am-detach-select {
    min-height: 44px !important;
    touch-action: manipulation;
  }
  .am-subject-pill {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #065f46;
    background: rgba(16, 185, 129, 0.14);
    padding: 3px 9px;
    border-radius: 8px;
    margin-bottom: 4px;
  }
  [data-theme="dark"] .am-subject-pill {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.2);
  }
  .am-urg-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    display: inline-block;
    margin-top: 4px;
  }
  .am-urg-overdue { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }
  .am-urg-today { background: rgba(245, 158, 11, 0.16); color: #92400e; }
  .am-urg-soon { background: rgba(14, 165, 233, 0.14); color: #0369a1; }
  .am-urg-ok { background: rgba(16, 185, 129, 0.14); color: #065f46; }
  [data-theme="dark"] .am-urg-overdue { background: rgba(239, 68, 68, 0.22); color: #fca5a5; }
  [data-theme="dark"] .am-urg-today { background: rgba(245, 158, 11, 0.22); color: #fcd34d; }
  [data-theme="dark"] .am-urg-soon { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }
  [data-theme="dark"] .am-urg-ok { background: rgba(16, 185, 129, 0.22); color: #6ee7b7; }
  .am-empty-box {
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: var(--text-muted);
  }
  .am-inline-btn {
    min-height: 44px;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    touch-action: manipulation;
  }

  @container amtable (max-width: 720px) {
    .am-table-region {
      max-height: none;
      overflow-x: visible;
    }
    .am-responsive-table {
      display: block;
    }
    .am-responsive-table thead {
      display: none;
    }
    .am-responsive-table tbody {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px;
    }
    .am-responsive-table tbody tr {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 14px;
      background: var(--card-bg, var(--surface-color));
      box-shadow: var(--soft-shadow);
    }
    .am-responsive-table tbody td {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0;
      border-bottom: none;
      width: 100% !important;
      text-align: left !important;
    }
    .am-responsive-table tbody td::before {
      content: attr(data-label);
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--text-muted);
    }
    .am-row-actions {
      justify-content: stretch;
      margin-top: 6px;
      padding-top: 10px;
      border-top: 1px dashed var(--border-color);
    }
    .am-row-actions .am-row-action-btn {
      flex: 1 1 auto;
    }
  }

  /* Behavior Manager Page Styles */
  .beh-tablist {
    display: inline-flex;
    gap: 6px;
    background: rgba(0, 0, 0, 0.05);
    padding: 5px;
    border-radius: 12px;
    width: fit-content;
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .beh-tab-btn {
    border-radius: 9px;
    font-weight: bold;
    border: none;
    padding: 0 16px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
  }
  .beh-tab-btn.is-active {
    background: #ec4899;
    color: #fff;
  }
  .beh-selector-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    background: rgba(236, 72, 153, 0.05);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(236, 72, 153, 0.28);
    margin-bottom: 1.25rem;
  }
  .beh-student-picker-col {
    grid-column: 1 / -1;
  }
  .beh-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(236, 72, 153, 0.12);
    color: #be185d;
    font-weight: 700;
    font-size: 0.84rem;
  }
  .beh-student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    margin-top: 10px;
    max-height: 290px;
    overflow-y: auto;
    padding-right: 4px;
  }
  .beh-stu-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    cursor: pointer;
    user-select: none;
  }
  .beh-stu-chip input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: #ec4899;
    flex-shrink: 0;
  }
  .beh-sync-progress {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    appearance: none;
    overflow: hidden;
    display: block;
    margin-bottom: 0.75rem;
    background: rgba(236, 72, 153, 0.14);
    border: none;
  }
  .beh-sync-progress[hidden] {
    display: none;
  }
  .beh-sync-progress::-webkit-progress-bar {
    background: rgba(236, 72, 153, 0.14);
    border-radius: 999px;
  }
  .beh-sync-progress::-webkit-progress-value {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 999px;
  }
  .beh-preset-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .beh-preset-search-wrap {
    display: block;
    margin-bottom: 0;
  }
  .beh-toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 0;
  }
  .beh-pt-multiplier-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.45rem 0.7rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .beh-pt-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .beh-pt-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .beh-pt-pill {
    min-width: 38px;
    min-height: 36px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  }
  .beh-pt-pill:hover {
    border-color: #ec4899;
    transform: translateY(-1px);
  }
  .beh-pt-pill.active,
  .beh-pt-pill[aria-pressed="true"] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(236, 72, 153, 0.28);
  }
  .beh-pt-custom-input {
    width: 68px !important;
    min-height: 36px;
    padding: 0.25rem 0.45rem !important;
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: 10px !important;
  }
  .beh-sort-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  }
  .beh-sort-mode-btn.is-freq,
  .beh-sort-mode-btn[aria-pressed="true"] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
  }
  [data-theme="dark"] .beh-sort-mode-btn.is-freq,
  [data-theme="dark"] .beh-sort-mode-btn[aria-pressed="true"] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.18);
  }
  .beh-col-title {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  .beh-col-title.is-pos { color: #059669; }
  .beh-col-title.is-neg { color: #dc2626; }
  .beh-col-title-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .beh-col-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .beh-col-pts-pill {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
  }
  .beh-col-pts-pill.is-pos {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
  }
  .beh-col-pts-pill.is-neg {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
  }
  [data-theme="dark"] .beh-col-pts-pill.is-pos { color: #34d399; }
  [data-theme="dark"] .beh-col-pts-pill.is-neg { color: #f87171; }
  .beh-col-count-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
  }
  .beh-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
  }
  .beh-preset-column {
    padding: 1.25rem;
    border-radius: 16px;
  }
  .beh-preset-column.is-pos {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.3);
  }
  .beh-preset-column.is-neg {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.3);
  }
  .beh-preset-scroll {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 390px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
  }
  .beh-preset-item {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    cursor: pointer;
  }
  .beh-preset-item.selected-behavior {
    border-color: #ec4899;
    background: rgba(236, 72, 153, 0.1);
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.25);
  }
  .beh-preset-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
  }
  .beh-freq-badge {
    font-size: 0.74rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    white-space: nowrap;
  }
  [data-theme="dark"] .beh-freq-badge {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
  }
  .beh-preset-pts-badge {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .beh-preset-pts-badge.is-pos {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
  }
  .beh-preset-pts-badge.is-neg {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
  }
  [data-theme="dark"] .beh-preset-pts-badge.is-pos { color: #34d399; }
  [data-theme="dark"] .beh-preset-pts-badge.is-neg { color: #f87171; }
  .beh-selected-tray {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: var(--surface-color);
    border: 1.5px solid rgba(236, 72, 153, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-sizing: border-box;
    max-width: 100%;
  }
  .beh-selected-tray[hidden] {
    display: none;
  }
  .beh-tray-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
  }
  .beh-tray-clear-btn {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
  }
  .beh-tray-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .beh-tray-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    border-radius: 12px;
    background: var(--bg-color);
    border: 1.5px solid var(--border-color);
    font-size: 0.84rem;
    max-width: 100%;
    box-sizing: border-box;
  }
  .beh-tray-chip.is-pos { border-color: rgba(16, 185, 129, 0.45); }
  .beh-tray-chip.is-neg { border-color: rgba(239, 68, 68, 0.45); }
  .beh-tray-chip-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
    font-weight: 600;
  }
  .beh-tray-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .beh-tray-step-btn {
    min-width: 28px;
    min-height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .beh-tray-pts-val {
    min-width: 34px;
    text-align: center;
    font-weight: 800;
    font-size: 0.84rem;
  }
  .beh-tray-pts-val.is-pos { color: #059669; }
  .beh-tray-pts-val.is-neg { color: #dc2626; }
  .beh-skel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    width: 100%;
  }
  .beh-skel-card {
    height: 112px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(148,163,184,0.12) 25%, rgba(148,163,184,0.24) 50%, rgba(148,163,184,0.12) 75%);
    background-size: 200% 100%;
    animation: behShimmer 1.4s infinite linear;
  }
  @keyframes behShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .fc-beh-pt-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.55rem;
    border-radius: 11px;
    background: rgba(236, 72, 153, 0.06);
    border: 1px solid rgba(236, 72, 153, 0.22);
    margin-bottom: 0.45rem;
    box-sizing: border-box;
    max-width: 100%;
  }
  .fc-beh-pt-bar.is-modal {
    margin-bottom: 0.75rem;
  }
  .fc-beh-pt-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
  }
  .fc-beh-pt-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .fc-beh-pt-pill {
    min-width: 30px;
    min-height: 28px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
  }
  .fc-beh-pt-pill.active,
  .fc-beh-pt-pill[aria-pressed="true"] {
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
  }
  .fc-beh-pt-input {
    width: 56px !important;
    min-height: 28px;
    padding: 2px 4px !important;
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 8px !important;
  }
  .fc-beh-sort-btn {
    margin-left: auto;
    min-height: 28px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
  }
  .fc-beh-sort-btn.is-freq,
  .fc-beh-sort-btn[aria-pressed="true"] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
  }
  [data-theme="dark"] .fc-beh-sort-btn.is-freq,
  [data-theme="dark"] .fc-beh-sort-btn[aria-pressed="true"] {
    color: #fbbf24;
  }
  .beh-custom-action-group {
    flex: 1 1 240px;
    display: flex;
    align-items: stretch;
    background: var(--surface-color);
    border-radius: 10px;
    overflow: hidden;
    min-height: 48px;
  }
  .beh-custom-action-group.is-pos { border: 2px solid #10b981; }
  .beh-custom-action-group.is-neg { border: 2px solid #ef4444; }
  .beh-custom-sign {
    padding: 0 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .beh-custom-action-group.is-pos .beh-custom-sign {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
  }
  .beh-custom-action-group.is-neg .beh-custom-sign {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
  }
  .beh-custom-num {
    width: 68px;
    border: none;
    border-radius: 0;
    text-align: center;
    font-weight: 800;
    box-shadow: none;
  }
  .beh-custom-submit {
    flex-grow: 1;
    border: none;
    border-radius: 0;
    color: #fff;
    font-weight: 700;
    min-height: 48px;
  }
  .beh-custom-submit.is-pos { background: #10b981; }
  .beh-custom-submit.is-neg { background: #ef4444; }

  .beh-bulk-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1.25rem;
  }
  .beh-bulk-btn,
  .beh-freeze-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 1.05rem;
    padding: 12px 16px;
    border-radius: 12px;
  }
  .beh-bulk-btn {
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  }
  .beh-freeze-btn {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
  }

  .beh-manage-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1rem;
  }
  .beh-manage-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .beh-manage-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--soft-shadow);
    margin-bottom: 12px;
    content-visibility: auto;
    contain-intrinsic-size: auto 90px;
  }
  .beh-manage-card-head {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .beh-manage-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .beh-manage-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .beh-detail-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
  }
  [data-theme="dark"] .beh-detail-toolbar {
    background: rgba(255, 255, 255, 0.03);
  }
  .beh-detail-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
  }
  .beh-log-select-all-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    min-height: 32px;
  }
  .beh-log-selected-count {
    font-size: 0.78rem;
    color: var(--text-muted);
  }
  .beh-detail-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .beh-bulk-del-btn {
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  }
  .beh-bulk-del-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .beh-bulk-del-btn.is-active,
  .beh-bulk-del-btn:not(:disabled) {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    cursor: pointer;
  }
  [data-theme="dark"] .beh-bulk-del-btn.is-active,
  [data-theme="dark"] .beh-bulk-del-btn:not(:disabled) {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.2);
  }
  .beh-clear-all-btn {
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .beh-clear-all-btn:hover {
    border-color: #f59e0b;
    color: #d97706;
  }
  .beh-log-chk-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 28px;
    min-height: 28px;
    cursor: pointer;
  }
  .beh-log-chk {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #ec4899;
  }
  .beh-log-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .beh-log-row.is-selected {
    border-color: #ec4899;
    background: rgba(236, 72, 153, 0.06);
  }

  /* Focus Visible & Eco Mode Compliance */
  #assignment-manager-page :is(button, a, input, select, textarea):focus-visible,
  #behavior-manager-page :is(button, a, input, select):focus-visible,
  #behaviorModal :is(button, input):focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }

  html[data-perf="eco"] :where(.am-form-card, .am-filter-bar, .am-list-shell, .am-responsive-table tbody tr, .am-stats-strip, .am-kpi-pill, .am-sem-pill, .am-urg-badge, .beh-selector-box, .beh-manage-card, .beh-bulk-btn, .beh-freeze-btn) {
    box-shadow: var(--soft-shadow) !important;
    transition: none !important;
    animation: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .am-touch-btn, .beh-touch-btn, .beh-preset-item, .beh-stu-chip, .am-row-action-btn {
      transition: none !important;
    }
  }
  @media (max-width: 640px) {
    .am-form-actions { flex-direction: column-reverse; }
    .am-form-actions .btn { width: 100%; justify-content: center; }
    .am-filter-select-group { flex: 1 1 46%; }
    .am-filter-select-group select { width: 100%; }
  }

  /* =========================================================
     🎓 Class Stats Roster & QR Card Customizer UI (Mobile-First)
     ========================================================= */
  .cs-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px dashed rgba(59, 130, 246, 0.3);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 12px;
  }
  .cs-touch-btn,
  .qr-cust-chip,
  .cs-row-print-btn,
  .cs-check-label {
    min-height: 44px;
    touch-action: manipulation;
  }
  .cs-input,
  #class-stats-page select,
  #class-stats-page input,
  #print-page input,
  #print-page select {
    font-size: max(1rem, 1em);
  }
  .cs-selector-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    background: rgba(59, 130, 246, 0.05);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    margin-bottom: 1.25rem;
  }
  .cs-result-shell {
    overflow: hidden;
  }
  .cs-roster-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(59, 130, 246, 0.04);
  }
  .cs-toolbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cs-stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .cs-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
  }
  .cs-stat-pill.is-warn {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
  }
  .cs-stat-pill.is-danger {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
  }
  .cs-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .cs-search-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cs-search-wrap {
    position: relative;
    flex: 1 1 220px;
    min-width: 200px;
  }
  .cs-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
  }
  .cs-table-region {
    container-type: inline-size;
    container-name: cstable;
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
    outline: none;
  }
  .cs-table-region:focus-visible {
    box-shadow: inset 0 0 0 3px #3b82f6;
  }
  .cs-roster-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }
  .cs-roster-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #1d4ed8;
    color: #ffffff;
    padding: 12px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .cs-roster-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
  }
  .cs-roster-table tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.04);
  }
  .cs-roster-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 64px;
  }
  @supports not (content-visibility: auto) {
    .cs-roster-table tbody tr {
      contain: layout style paint;
    }
  }
  .cs-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    cursor: pointer;
  }
  .cs-stu-cb {
    width: 22px;
    height: 22px;
    accent-color: #2563eb;
    cursor: pointer;
  }
  .cs-status-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
  }
  .cs-status-badge.is-resigned {
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
  }
  .cs-status-badge.is-missing {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
  }
  .cs-row-print-btn {
    padding: 6px 12px;
    font-size: 0.84rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  @container cstable (max-width: 680px) {
    .cs-table-region {
      max-height: none;
      overflow-x: visible;
    }
    .cs-roster-table {
      display: block;
    }
    .cs-roster-table thead {
      display: none;
    }
    .cs-roster-table tbody {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
    }
    .cs-roster-table tbody tr {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 12px 14px;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      background: var(--surface-color) !important;
      box-shadow: var(--soft-shadow);
    }
    .cs-roster-table tbody td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 0;
      border-bottom: none;
      text-align: left !important;
    }
    .cs-roster-table tbody td::before {
      content: attr(data-label);
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .cs-row-print-btn {
      width: 100%;
      justify-content: center;
    }
  }

  /* Print Toolbar & QR Card Customizer Panel */
  .print-toolbar-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 2px dashed rgba(59, 130, 246, 0.3);
    margin-bottom: 1rem;
    background: var(--surface-color);
    padding: 1.25rem;
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
  }
  .qr-customizer-panel {
    background: var(--surface-color);
    border: 1px solid rgba(59, 130, 246, 0.32);
    border-radius: 16px;
    margin-bottom: 1.25rem;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
  }
  .qr-customizer-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 800;
    color: #2563eb;
    background: rgba(59, 130, 246, 0.06);
    min-height: 48px;
    user-select: none;
  }
  .qr-customizer-summary::-webkit-details-marker { display: none; }
  .qr-customizer-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
  }
  .qr-cust-summary-swatch {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
  }
  .qr-customizer-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px dashed rgba(59, 130, 246, 0.25);
  }
  .qr-cust-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
  }
  .qr-cust-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
    display: block;
  }
  .qr-cust-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .qr-cust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
  }
  .qr-cust-chip.active {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
  }
  .qr-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: none !important;
  }
  .qr-cust-color-picker-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1.5px dashed rgba(148, 163, 184, 0.65);
    background: var(--surface-color);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-main);
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
  }
  .qr-cust-color-picker-wrap.active {
    border-style: solid;
    border-color: var(--qr-cust-ring, #2563eb);
    background: color-mix(in oklab, var(--qr-cust-ring, #2563eb) 14%, transparent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--qr-cust-ring, #2563eb) 28%, transparent);
  }
  .qr-cust-color-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  .qr-cust-color-picker-wrap input[type="color"] {
    width: 36px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
  }
  .qr-cust-print-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px dashed rgba(245, 158, 11, 0.55);
    color: #92400e;
    font-size: 0.84rem;
    line-height: 1.5;
  }
  [data-theme="dark"] .qr-cust-print-tip {
    color: #fcd34d;
  }
  [data-theme="dark"] .qr-customizer-active-tag {
    background: rgba(59, 130, 246, 0.22);
    color: #93c5fd;
  }
  [data-theme="dark"] .qr-cust-chip.active {
    color: #93c5fd;
  }

  #class-stats-page button,
  #print-page button {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  #class-stats-page :is(button, input, select):focus-visible,
  #print-page :is(button, input, select, summary):focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }

  @media (forced-colors: active) {
    .qr-cust-chip.active {
      outline: 2px solid Highlight;
    }
    .qr-swatch,
    .qr-cust-color-picker-wrap input[type="color"] {
      forced-color-adjust: none;
    }
  }

  html[data-perf="eco"] :where(.qr-card-container, .qr-cust-chip, .cs-roster-table tbody tr, .qr-customizer-panel) {
    transition: none !important;
    transform: none !important;
    box-shadow: var(--soft-shadow) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .qr-card-container, .qr-cust-chip, .btn-save-img {
      transition: none !important;
    }
    .qr-card-container:hover { transform: none !important; }
  }
  @media (max-width: 640px) {
    .cs-toolbar-actions, .cs-toolbar-actions .btn { width: 100%; justify-content: center; }
    .qr-mode-toggle-group { width: 100%; justify-content: space-between; }
    .qr-mode-toggle-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  }

  /* ==========================================
     📊 Submission Manager & Computer Skill Assessment (Production UI/UX + Mobile-First)
     ========================================== */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  #submission-manager-page [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }

  .sm-main-card {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.15rem;
    --sm-accent: #ec4899;
    --sm-accent-strong: #db2777;
    --sm-asm-accent: #3b82f6;
    --sm-asm-strong: #2563eb;
    --sm-label-color: var(--text-muted);
    --sm-heading-color: #be185d;
    --sm-r1-bg: #eef2ff; --sm-r1-fg: #3730a3; --sm-r1-bd: #c7d2fe;
    --sm-r2-bg: #ecfeff; --sm-r2-fg: #0e7490; --sm-r2-bd: #a5f3fc;
    --sm-r3-bg: #fefce8; --sm-r3-fg: #a16207; --sm-r3-bd: #fde047;
    --sm-r4-bg: #f0fdf4; --sm-r4-fg: #15803d; --sm-r4-bd: #bbf7d0;
    --sm-ov-bg: #faf5ff; --sm-ov-fg: #6b21a8; --sm-ov-bd: #d8b4fe;
  }

  [data-theme="dark"] .sm-main-card {
    --sm-label-color: #e2e8f0;
    --sm-heading-color: #f472b6;
    --sm-r1-bg: rgba(79, 70, 229, 0.24); --sm-r1-fg: #c7d2fe; --sm-r1-bd: rgba(129, 140, 248, 0.45);
    --sm-r2-bg: rgba(8, 145, 178, 0.24); --sm-r2-fg: #a5f3fc; --sm-r2-bd: rgba(34, 211, 238, 0.45);
    --sm-r3-bg: rgba(202, 138, 4, 0.24); --sm-r3-fg: #fde68a; --sm-r3-bd: rgba(250, 204, 21, 0.45);
    --sm-r4-bg: rgba(22, 163, 74, 0.24); --sm-r4-fg: #bbf7d0; --sm-r4-bd: rgba(74, 222, 128, 0.45);
    --sm-ov-bg: rgba(126, 34, 206, 0.28); --sm-ov-fg: #e9d5ff; --sm-ov-bd: rgba(192, 132, 252, 0.48);
  }

  .sm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 12px;
  }

  .sm-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .sm-page-title {
    margin: 0;
    color: var(--sm-heading-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
    line-height: 1.25;
  }

  .sm-title-icon {
    background: rgba(236, 72, 153, 0.14);
    color: var(--sm-accent);
    width: 38px;
    height: 38px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .sm-back-btn {
    padding: 0.48rem 0.95rem;
    font-size: 0.9rem;
    min-height: 44px;
    height: fit-content;
    flex-shrink: 0;
  }

  /* Accessible Single-Row Tablist with Underline Indicator (WCAG 1.4.1) */
  .sm-tablist {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    background: var(--surface-solid-alt);
    border: 1px solid var(--border-color);
    padding: 5px;
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sm-tablist::-webkit-scrollbar { display: none; }

  .sm-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    font-weight: 700;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 0.95rem;
    font-size: 0.92rem;
    min-height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
    background: transparent;
    color: var(--text-muted);
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  }

  .sm-tab-btn[aria-selected="true"].active,
  #tab-sm-sub[aria-selected="true"] {
    background: var(--sm-accent);
    color: #ffffff;
    border-bottom-color: #9d174d;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.28);
  }

  #tab-sm-asm[aria-selected="true"] {
    background: var(--sm-asm-accent);
    color: #ffffff;
    border-bottom-color: #1e40af;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.28);
  }

  .sm-controls-card,
  .asm-controls-card {
    background: var(--surface-color);
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
    box-shadow: var(--soft-shadow);
  }

  .asm-controls-card {
    border-left: 4px solid var(--sm-asm-accent);
  }

  .sm-controls-grid,
  .asm-controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 12px;
    align-items: end;
  }

  .sm-field,
  .asm-field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .asm-field--wide {
    grid-column: span 2;
  }
  @media (max-width: 760px) {
    .asm-field--wide { grid-column: auto; }
  }

  .sm-field-label,
  .asm-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sm-label-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .sm-select-control,
  .asm-select-control {
    cursor: pointer;
    min-height: 44px;
    padding: 0.45rem 0.65rem;
    font-size: 0.92rem;
    border-radius: 9px;
  }

  .sm-assign-group {
    margin-top: 12px;
    margin-bottom: 10px;
  }

  .sm-assign-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
  }

  .sm-assign-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sm-heading-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .sm-assign-checkbox-list {
    max-height: 165px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: 10px;
    background: var(--surface-solid-alt);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .sm-assign-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.48rem 0.7rem;
    border-radius: 8px;
    background: var(--surface-solid);
    border: 1px solid var(--border-color);
    cursor: pointer;
    min-height: 44px;
    color: var(--text-main);
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .sm-assign-checkbox-item:hover {
    border-color: var(--sm-accent);
  }
  .sm-assign-checkbox-item input[type="checkbox"] {
    width: 19px;
    height: 19px;
    accent-color: var(--sm-accent);
    flex-shrink: 0;
    cursor: pointer;
  }

  .sm-assign-placeholder {
    color: var(--text-muted);
    font-size: 0.86rem;
    padding: 6px;
  }

  .sm-view-mode-wrap {
    margin-top: 10px;
    border-top: 1px dashed var(--border-color);
    padding-top: 10px;
  }

  .sm-view-mode-title {
    display: flex;
    margin-bottom: 6px;
  }

  .sm-view-filter-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .sm-view-filter-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.84rem;
    font-weight: 700;
    min-height: 44px;
    flex: 1 1 110px;
    border-radius: 9px;
  }
  .sm-view-filter-btn.active {
    background: var(--sm-accent);
    color: #ffffff;
    border-color: var(--sm-accent-strong);
  }

  .asm-cat-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
  }

  .asm-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
    min-height: 40px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .asm-cat-pill.active,
  .asm-cat-pill[aria-pressed="true"] {
    background: var(--sm-asm-accent);
    color: #ffffff;
    border-color: var(--sm-asm-strong);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
  }

  /* Search & Filter Bar */
  .asm-search-filter-bar,
  .sm-search-filter-bar {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: space-between;
  }

  .sm-search-box {
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
  }

  .sm-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.9rem;
  }

  .sm-search-input {
    width: 100%;
    min-height: 44px;
    padding: 0.45rem 0.75rem 0.45rem 2.2rem !important;
    border-radius: 10px !important;
    font-size: 0.92rem;
  }

  .sm-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  .sm-row-filter-chip,
  .asm-round-focus-btn {
    padding: 0.4rem 0.78rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 700;
    min-height: 40px;
    cursor: pointer;
    white-space: nowrap;
  }
  .sm-row-filter-chip.active {
    background: var(--sm-accent);
    color: #ffffff;
    border-color: var(--sm-accent-strong);
  }
  .asm-round-focus-btn.active {
    background: var(--sm-asm-accent);
    color: #ffffff;
    border-color: var(--sm-asm-strong);
  }

  /* Live KPI Bars */
  .sm-live-kpi-bar,
  .asm-live-kpi-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: var(--surface-solid-alt);
    border: 1px solid var(--border-color);
    align-items: center;
    justify-content: space-between;
  }

  .sm-kpi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  .sm-kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--surface-solid);
    border: 1px solid var(--border-color);
    color: var(--text-main);
  }
  .sm-kpi-chip--ok { border-color: rgba(16, 185, 129, 0.45); color: #047857; background: rgba(16, 185, 129, 0.12); }
  .sm-kpi-chip--warn { border-color: rgba(245, 158, 11, 0.45); color: #b45309; background: rgba(245, 158, 11, 0.14); }
  .sm-kpi-chip--bad { border-color: rgba(239, 68, 68, 0.45); color: #b91c1c; background: rgba(239, 68, 68, 0.12); }
  [data-theme="dark"] .sm-kpi-chip--ok { color: #6ee7b7; }
  [data-theme="dark"] .sm-kpi-chip--warn { color: #fcd34d; }
  [data-theme="dark"] .sm-kpi-chip--bad { color: #fca5a5; }

  .asm-table-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
  }

  .asm-section-heading {
    margin: 0;
    color: var(--text-main);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .asm-section-heading i {
    color: var(--sm-asm-accent);
  }

  .asm-download-all-btn {
    background: var(--sm-asm-accent);
    color: #ffffff;
    border: none;
    padding: 0.48rem 0.95rem;
    font-size: 0.85rem;
    min-height: 44px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
  }

  /* Container Query Responsive Tables */
  .sm-table-area {
    margin-bottom: 5.5rem;
    container-type: inline-size;
    container-name: smtable;
  }

  .sm-table-scroll,
  .asm-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-solid);
    box-shadow: var(--soft-shadow);
    outline-offset: 2px;
  }

  .asm-table-wrapper {
    container-type: inline-size;
    container-name: asmtable;
    margin-bottom: 5.5rem;
  }

  .sm-matrix-table,
  .asm-matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    color: var(--text-main);
  }

  .sm-matrix-table thead th,
  .asm-matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--surface-solid);
    color: var(--text-main);
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 0.65rem 0.55rem;
    font-weight: 700;
    vertical-align: middle;
  }

  .sm-matrix-table tbody td,
  .asm-matrix-table tbody td {
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 0.5rem 0.55rem;
    vertical-align: middle;
  }

  .sm-matrix-table tbody tr:nth-child(even) td,
  .asm-matrix-table tbody tr:nth-child(even) td {
    background: var(--surface-solid-alt);
  }

  .sm-matrix-table .sm-col-no,
  .asm-matrix-table .asm-col-no {
    position: sticky;
    left: 0;
    z-index: 8;
    min-width: 54px;
    width: 54px;
    text-align: center;
    font-weight: 700;
  }

  .sm-matrix-table .sm-col-name,
  .asm-matrix-table .asm-col-name {
    position: sticky;
    left: 54px;
    z-index: 8;
    min-width: 175px;
    max-width: 230px;
    text-align: left;
    box-shadow: 2px 0 6px rgba(15, 23, 42, 0.08);
  }

  .sm-matrix-table thead th.sm-col-no,
  .sm-matrix-table thead th.sm-col-name,
  .asm-matrix-table thead th.asm-col-no,
  .asm-matrix-table thead th.asm-col-name {
    z-index: 16;
  }

  .sm-student-name-main,
  .asm-student-name-main {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.88rem;
    line-height: 1.3;
  }
  .sm-student-id-sub,
  .asm-student-id-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .sm-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 145px;
  }

  .sm-score-input-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .sm-score-input {
    width: 100%;
    min-height: 40px;
    padding: 0.35rem 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
  }

  .sm-max-hint {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
  }

  .sm-status-select,
  .sm-method-select,
  .asm-overall-select {
    width: 100%;
    min-height: 38px;
    padding: 0.32rem 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    cursor: pointer;
  }

  /* View Mode Filtering (No Destructive Reload) */
  .sm-mode-score .sm-status-select-wrap,
  .sm-mode-score .sm-method-select-wrap {
    display: none !important;
  }
  .sm-mode-status .sm-score-input-wrap {
    display: none !important;
  }

  /* Round Header Theme Tokens */
  .asm-th-r1 { background: var(--sm-r1-bg) !important; color: var(--sm-r1-fg) !important; border-color: var(--sm-r1-bd) !important; }
  .asm-th-r2 { background: var(--sm-r2-bg) !important; color: var(--sm-r2-fg) !important; border-color: var(--sm-r2-bd) !important; }
  .asm-th-r3 { background: var(--sm-r3-bg) !important; color: var(--sm-r3-fg) !important; border-color: var(--sm-r3-bd) !important; }
  .asm-th-r4 { background: var(--sm-r4-bg) !important; color: var(--sm-r4-fg) !important; border-color: var(--sm-r4-bd) !important; }
  .asm-th-overall { background: var(--sm-ov-bg) !important; color: var(--sm-ov-fg) !important; border-color: var(--sm-ov-bd) !important; }

  /* Segment Controls & Typing Inputs inside Assessment Table */
  .asm-seg-group {
    display: flex;
    gap: 4px;
    width: 100%;
    min-width: 205px;
  }

  .asm-seg-btn {
    flex: 1 1 0;
    min-height: 40px;
    padding: 4px 6px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 7px;
    cursor: pointer;
    background: var(--surface-solid);
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    text-align: center;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  }

  .asm-seg-btn.is-active[data-val="3"],
  .asm-seg-btn.is-active[data-val="ดีเยี่ยม"] { background: #10b981; border-color: #059669; color: #ffffff; }
  .asm-seg-btn.is-active[data-val="2"],
  .asm-seg-btn.is-active[data-val="ดี"],
  .asm-seg-btn.is-active[data-val="พอใช้"] { background: #f59e0b; border-color: #d97706; color: #ffffff; }
  .asm-seg-btn.is-active[data-val="1"],
  .asm-seg-btn.is-active[data-val="ควรพัฒนา"] { background: #ef4444; border-color: #dc2626; color: #ffffff; }

  .asm-seg-group.is-disabled {
    opacity: 0.48;
    pointer-events: none;
  }

  .asm-seg-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sm-label-color);
    margin-bottom: 3px;
    text-align: left;
  }

  /* Semantic Status & Score States (Light + Dark High Contrast) */
  .sm-st-missing { border-color: #ef4444 !important; color: #dc2626 !important; background: rgba(239, 68, 68, 0.08) !important; }
  .sm-st-on_time { border-color: #10b981 !important; color: #047857 !important; background: rgba(16, 185, 129, 0.08) !important; }
  .sm-st-late { border-color: #f59e0b !important; color: #b45309 !important; background: rgba(245, 158, 11, 0.08) !important; }
  .sm-st-late_saved { border-color: #3b82f6 !important; color: #1d4ed8 !important; background: rgba(59, 130, 246, 0.08) !important; }
  [data-theme="dark"] .sm-st-missing { color: #fca5a5 !important; background: rgba(239, 68, 68, 0.18) !important; }
  [data-theme="dark"] .sm-st-on_time { color: #6ee7b7 !important; background: rgba(16, 185, 129, 0.18) !important; }
  [data-theme="dark"] .sm-st-late { color: #fcd34d !important; background: rgba(245, 158, 11, 0.18) !important; }
  [data-theme="dark"] .sm-st-late_saved { color: #93c5fd !important; background: rgba(59, 130, 246, 0.18) !important; }

  .sm-score-input.is-locked {
    background: var(--surface-solid-alt) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    opacity: 0.72;
  }

  .sm-matrix-row.is-focused-row td {
    background-color: rgba(236, 72, 153, 0.08) !important;
  }

  .sm-dirty-cell {
    box-shadow: 0 0 0 2px #f59e0b !important;
  }

  .asm-ov-excellent { color: #047857 !important; border-color: #10b981 !important; }
  .asm-ov-medium { color: #b45309 !important; border-color: #f59e0b !important; }
  .asm-ov-improve { color: #dc2626 !important; border-color: #ef4444 !important; }
  .asm-ov-wait { color: var(--text-muted) !important; border-color: var(--border-color) !important; }
  [data-theme="dark"] .asm-ov-excellent { color: #6ee7b7 !important; }
  [data-theme="dark"] .asm-ov-medium { color: #fcd34d !important; }
  [data-theme="dark"] .asm-ov-improve { color: #fca5a5 !important; }

  .asm-cls-pill.active {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
  }

  .sm-tip-banner,
  .sm-rule-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--text-main);
    background: rgba(236, 72, 153, 0.08);
    border: 1px dashed rgba(236, 72, 153, 0.35);
  }

  .sm-rule-banner {
    margin-top: 12px;
    margin-bottom: 0;
    display: block;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-left: 4px solid #10b981;
    line-height: 1.55;
  }

  .sm-retry-card {
    background: rgba(239, 68, 68, 0.08);
    border: 1.5px solid rgba(239, 68, 68, 0.35);
    border-radius: 12px;
    padding: 1.4rem 1rem;
    text-align: center;
    color: #b91c1c;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  [data-theme="dark"] .sm-retry-card {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
  }

  .asm-stat-grid {
    display: flex;
    gap: 5px;
    margin-bottom: 5px;
  }

  .asm-typing-input {
    width: 100%;
    min-width: 68px;
    min-height: 40px;
    padding: 0.3rem 0.4rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 7px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
  }

  .asm-badge-done,
  .asm-badge-wait,
  .asm-badge-active,
  .asm-badge-edit {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .asm-badge-done { color: #047857; background: rgba(16, 185, 129, 0.16); }
  .asm-badge-wait { color: var(--text-muted); background: rgba(148, 163, 184, 0.16); }
  .asm-badge-active { color: #1d4ed8; background: rgba(59, 130, 246, 0.16); }
  .asm-badge-edit { color: #b45309; background: rgba(245, 158, 11, 0.18); }
  [data-theme="dark"] .asm-badge-done { color: #6ee7b7; }
  [data-theme="dark"] .asm-badge-active { color: #93c5fd; }
  [data-theme="dark"] .asm-badge-edit { color: #fcd34d; }

  .sm-inline-btn,
  .asm-inline-btn {
    padding: 4px 8px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 7px;
    min-height: 36px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .asm-dnp-btn {
    padding: 4px 8px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 7px;
    min-height: 36px;
    border: 1px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-muted);
    cursor: pointer;
  }
  .asm-dnp-btn.is-absent {
    background: rgba(239, 68, 68, 0.16);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.45);
  }
  [data-theme="dark"] .asm-dnp-btn.is-absent { color: #fca5a5; }

  /* Stacked Card Layout via Container Queries on Mobile / Narrow Views */
  @container smtable (max-width: 680px) {
    .sm-table-scroll {
      overflow-x: visible;
      border: none;
      background: transparent;
      box-shadow: none;
    }
    .sm-matrix-table,
    .sm-matrix-table tbody,
    .sm-matrix-table tr,
    .sm-matrix-table td {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
    }
    .sm-matrix-table {
      min-width: 0 !important;
    }
    .sm-matrix-table thead {
      display: none;
    }
    .sm-matrix-table tbody tr {
      background: var(--surface-solid);
      border: 1.5px solid var(--border-color);
      border-radius: 14px;
      padding: 0.75rem;
      margin-bottom: 0.85rem;
      box-shadow: var(--soft-shadow);
    }
    .sm-matrix-table tbody tr:nth-child(even) td {
      background: transparent;
    }
    .sm-matrix-table tbody td {
      position: static !important;
      left: auto !important;
      box-shadow: none !important;
      border: none !important;
      background: transparent !important;
      padding: 0.42rem 0 !important;
    }
    .sm-matrix-table tbody td.sm-col-no {
      display: inline-block;
      width: auto !important;
      background: rgba(236, 72, 153, 0.14) !important;
      color: var(--sm-heading-color);
      padding: 2px 10px !important;
      border-radius: 999px;
      font-size: 0.8rem;
      margin-bottom: 4px;
    }
    .sm-matrix-table tbody td.sm-col-name {
      padding-bottom: 0.55rem !important;
      margin-bottom: 0.4rem;
      border-bottom: 1px dashed var(--border-color) !important;
    }
    .sm-matrix-table tbody td.sm-assign-cell {
      border-top: 1px dashed var(--border-color) !important;
      padding-top: 0.55rem !important;
    }
    .sm-matrix-table tbody td.sm-assign-cell::before {
      content: attr(data-col-label);
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--sm-heading-color);
      margin-bottom: 6px;
    }
    .sm-matrix-table tbody td.sm-col-total::before {
      content: "สรุปผลรวม: ";
      font-weight: 700;
      color: var(--text-muted);
    }
    .sm-score-input,
    .sm-status-select,
    .sm-method-select {
      font-size: 16px !important;
      min-height: 44px;
    }
  }

  @container asmtable (max-width: 680px) {
    .asm-table-wrapper {
      overflow-x: visible;
      border: none;
      background: transparent;
      box-shadow: none;
    }
    .asm-matrix-table,
    .asm-matrix-table tbody,
    .asm-matrix-table tr,
    .asm-matrix-table td {
      display: block;
      width: 100% !important;
      max-width: 100% !important;
    }
    .asm-matrix-table {
      min-width: 0 !important;
    }
    .asm-matrix-table thead {
      display: none;
    }
    .asm-matrix-table tbody tr {
      background: var(--surface-solid);
      border: 1.5px solid var(--border-color);
      border-radius: 14px;
      padding: 0.75rem;
      margin-bottom: 0.85rem;
      box-shadow: var(--soft-shadow);
    }
    .asm-matrix-table tbody tr:nth-child(even) td {
      background: transparent;
    }
    .asm-matrix-table tbody td {
      position: static !important;
      left: auto !important;
      box-shadow: none !important;
      border: none !important;
      background: transparent !important;
      padding: 0.45rem 0 !important;
    }
    .asm-matrix-table tbody td.asm-col-no {
      display: inline-block;
      width: auto !important;
      background: rgba(59, 130, 246, 0.15) !important;
      color: var(--sm-asm-accent);
      padding: 2px 10px !important;
      border-radius: 999px;
      font-size: 0.8rem;
      margin-bottom: 4px;
    }
    .asm-matrix-table tbody td.asm-col-name {
      padding-bottom: 0.55rem !important;
      margin-bottom: 0.4rem;
      border-bottom: 1px dashed var(--border-color) !important;
    }
    .asm-matrix-table tbody td[data-round]::before,
    .asm-matrix-table tbody td.asm-col-overall::before {
      content: attr(data-col-label);
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 6px;
    }
    .asm-matrix-table tbody td[data-round] {
      border-top: 1px dashed var(--border-color) !important;
      padding-top: 0.55rem !important;
    }
    .asm-table-wrapper[data-round-focus="1"] .asm-matrix-table tbody td[data-round]:not([data-round="1"]),
    .asm-table-wrapper[data-round-focus="2"] .asm-matrix-table tbody td[data-round]:not([data-round="2"]),
    .asm-table-wrapper[data-round-focus="3"] .asm-matrix-table tbody td[data-round]:not([data-round="3"]),
    .asm-table-wrapper[data-round-focus="4"] .asm-matrix-table tbody td[data-round]:not([data-round="4"]) {
      display: none !important;
    }
    .asm-seg-btn { min-height: 44px; font-size: 0.78rem; }
    .asm-typing-input, .asm-overall-select { font-size: 16px !important; min-height: 44px; }
  }

  /* Sticky Save Footers (Safe above Bottom Nav & Behavior FAB on Mobile) */
  .sm-sticky-footer {
    position: sticky;
    bottom: 14px;
    z-index: 95;
    display: flex;
    justify-content: center;
    padding: 0 12px;
    pointer-events: none;
  }

  .sm-save-cta {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0.65rem 1.45rem;
    font-size: 0.96rem;
    font-weight: 700;
    border-radius: 999px;
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  }
  .sm-save-cta--sub { background: linear-gradient(135deg, #ec4899, #be185d); }
  .sm-save-cta--asm { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

  .sm-dirty-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
  }

  @media (max-width: 768px) {
    .sm-main-card { padding: 0.8rem; }
    body.has-mobile-nav #submission-manager-page .sm-sticky-footer {
      bottom: calc(76px + env(safe-area-inset-bottom, 0px));
      justify-content: flex-start;
      padding: 0 78px 0 8px;
    }
    body.has-mobile-nav #submission-manager-page .sm-save-cta {
      width: 100%;
      font-size: 0.88rem;
      padding: 0.6rem 1rem;
    }
    .sm-table-area,
    .asm-table-wrapper {
      margin-bottom: 135px;
    }
    #sm-student-search,
    #asm-student-search,
    .sm-select-control,
    .asm-select-control {
      font-size: 16px !important;
    }
  }

  #submission-manager-page :is(button, input, select, summary):focus-visible,
  .sm-table-scroll:focus-visible,
  .asm-table-wrapper:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }

  @media (forced-colors: active) {
    .sm-tab-btn[aria-selected="true"],
    .asm-cat-pill[aria-pressed="true"],
    .asm-seg-btn.is-active {
      outline: 2px solid Highlight;
    }
  }

  html[data-perf="eco"] :where(.sm-tab-btn, .sm-assign-checkbox-item, .asm-cat-pill, .asm-seg-btn, .sm-save-cta) {
    transition: none !important;
    transform: none !important;
    box-shadow: var(--soft-shadow) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.sm-tab-btn, .sm-assign-checkbox-item, .asm-cat-pill, .asm-seg-btn) {
      transition: none !important;
    }
  }

  /* ==========================================
     ⚡ Fast Check (Scan & Vault) Production Styles
     ========================================== */
  .fc-card-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.35rem;
  }

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

  .fc-page-title {
    margin: 0;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
  }

  .fc-title-icon {
    background: rgba(79, 70, 229, 0.12);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 1.25rem;
    flex-shrink: 0;
  }

  .fc-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .fc-sync-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .fc-sem-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(79, 70, 229, 0.08);
    padding: 4px 10px;
    border-radius: 10px;
    border: 1px solid rgba(79, 70, 229, 0.25);
  }

  .fc-sem-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
  }

  .fc-sem-select {
    width: auto;
    min-height: 38px;
    padding: 0.25rem 0.55rem;
    font-size: 0.86rem;
    font-weight: 700;
    border-color: var(--primary-color);
    cursor: pointer;
  }

  .fc-back-btn {
    padding: 0.45rem 0.9rem;
    min-height: 44px;
  }

  .fc-controls-card {
    background: var(--surface-color);
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--soft-shadow);
    margin-bottom: 1.25rem;
  }

  .fc-controls-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .fc-field {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .fc-field-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
  }

  .fc-select-control {
    cursor: pointer;
    padding: 0.45rem 0.65rem;
    min-height: 44px;
    border-radius: 9px;
  }

  .fc-assign-wrap {
    max-width: 720px;
    margin: 0 auto;
  }

  .fc-assign-header {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 8px;
  }

  .fc-req-star {
    color: #ef4444;
  }

  .fc-selected-badge {
    background: var(--primary-color);
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
  }

  .fc-assign-list {
    background: var(--surface-solid-alt);
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .fc-assign-placeholder {
    color: var(--text-muted);
    font-size: 0.86rem;
    text-align: center;
    padding: 12px 8px;
  }

  .fc-select-all-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    min-height: 44px;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 8px;
    border: 1px dashed rgba(79, 70, 229, 0.35);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--primary-color);
  }
  .fc-select-all-label input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
  }

  .fc-assign-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    min-height: 44px;
    background: var(--surface-solid);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .fc-assign-label.is-selected {
    background: rgba(79, 70, 229, 0.08);
    border-color: var(--primary-color);
  }
  [data-theme="dark"] .fc-assign-label.is-selected {
    background: rgba(168, 85, 247, 0.18);
  }

  .fc-assign-chk {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
  }

  .fc-individual-score-wrap {
    display: none;
    align-items: center;
    gap: 4px;
    background: var(--surface-solid-alt);
    padding: 3px 8px;
    border-radius: 8px;
    border: 1.5px solid var(--primary-color);
    flex-shrink: 0;
  }
  .fc-individual-score-wrap.is-disabled {
    opacity: 0.45;
  }

  .fc-score-field {
    width: 48px;
    min-height: 36px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 800;
    color: var(--text-main);
    font-size: 1rem;
    padding: 0;
  }

  .fc-vault-banner {
    background: rgba(239, 68, 68, 0.08);
    border: 1.5px solid #ef4444;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .fc-vault-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.88rem;
  }
  [data-theme="dark"] .fc-vault-msg { color: #fca5a5; }

  .fc-vault-sync-btn {
    padding: 6px 14px;
    font-size: 0.84rem;
    border-radius: 9px;
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    font-weight: 700;
    min-height: 44px;
  }

  .fc-scan-zone {
    background: linear-gradient(145deg, rgba(79, 70, 229, 0.04), rgba(139, 92, 246, 0.04));
    padding: 1.65rem 1rem 1.15rem 1rem;
    border-radius: 16px;
    border: 2px dashed rgba(79, 70, 229, 0.42);
    text-align: center;
    position: relative;
  }

  .fc-scan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: #ffffff;
    padding: 4px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
  }

  .fc-popup-row {
    margin: 0.75rem auto 0.75rem auto;
    max-width: 420px;
  }

  .fc-popup-btn {
    border-color: var(--primary-color);
    color: var(--primary-color);
    border-radius: 999px;
    padding: 0.55rem 1.25rem;
    font-weight: 700;
    width: 100%;
    min-height: 44px;
  }

  .fc-scan-input-wrap {
    max-width: 580px;
    margin: 0.5rem auto;
  }

  .fc-scan-input-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .fc-scan-input {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 50px;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 700;
    border-radius: 999px !important;
    padding: 0.65rem 1rem;
    border: 2px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .fc-scan-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
  }

  .fc-keypad-btn {
    min-height: 50px;
    min-width: 52px;
    padding: 0 0.75rem;
    border-radius: 999px !important;
    font-size: 0.82rem;
    font-weight: 800;
    flex: 0 0 auto;
  }
  .fc-keypad-btn[aria-pressed="true"] {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
  }

  .fc-scan-submit-btn {
    min-height: 50px;
    padding: 0 1.2rem;
    border-radius: 999px !important;
    font-size: 0.94rem;
    font-weight: 700;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .fc-toggles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 1rem;
  }

  .fc-mode-widget {
    background: var(--surface-solid);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 0.55rem 0.9rem;
    min-height: 54px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: border-color 0.18s ease, background-color 0.18s ease;
  }

  .fc-mode-chk {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
  }
  #fc-is-manual { accent-color: #ef4444; }
  #fc-no-score { accent-color: #8b5cf6; }
  #fc-enable-custom-score { accent-color: #3b82f6; }

  .fc-mode-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background-color 0.18s ease, color 0.18s ease;
  }
  .fc-mode-icon--manual { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
  .fc-mode-icon--noscore { background: rgba(139, 92, 246, 0.14); color: #7c3aed; }
  .fc-mode-icon--custom { background: rgba(59, 130, 246, 0.14); color: #2563eb; }
  [data-theme="dark"] .fc-mode-icon--manual { color: #fca5a5; }
  [data-theme="dark"] .fc-mode-icon--noscore { color: #c4b5fd; }
  [data-theme="dark"] .fc-mode-icon--custom { color: #93c5fd; }

  .fc-mode-widget.is-active-manual {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
  }
  .fc-mode-widget.is-active-manual .fc-mode-icon--manual {
    background: #ef4444;
    color: #ffffff;
  }
  .fc-mode-widget.is-active-noscore {
    background: rgba(139, 92, 246, 0.08);
    border-color: #8b5cf6;
  }
  .fc-mode-widget.is-active-noscore .fc-mode-icon--noscore {
    background: #8b5cf6;
    color: #ffffff;
  }
  .fc-mode-widget.is-active-custom {
    background: rgba(59, 130, 246, 0.08);
    border-color: #3b82f6;
  }
  .fc-mode-widget.is-active-custom .fc-mode-icon--custom {
    background: #3b82f6;
    color: #ffffff;
  }

  .fc-mode-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
  }
  .fc-mode-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.25;
  }
  .fc-mode-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.25;
  }
  .fc-mode-sub--danger {
    color: #dc2626;
    font-weight: 700;
  }
  [data-theme="dark"] .fc-mode-sub--danger { color: #fca5a5; }

  .fc-rule-note {
    margin-top: 14px;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--surface-solid-alt);
    border: 1px solid var(--border-color);
    padding: 7px 14px;
    border-radius: 999px;
    display: inline-block;
  }

  .fc-result-area {
    margin-top: 1.5rem;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .fc-history-card-wrap {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  }

  .fc-history-card {
    display: block;
    width: 100%;
  }

  .fc-card-undo-btn {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 6px 12px;
    min-height: 38px;
    min-width: 44px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    pointer-events: auto;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  .fc-card-undo-btn:hover {
    background: rgba(239, 68, 68, 0.2);
  }
  .fc-card-undo-btn:active {
    transform: scale(0.96);
  }
  [data-theme="dark"] .fc-card-undo-btn {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.22);
  }
  @media (pointer: coarse) {
    .fc-card-undo-btn {
      min-height: 44px;
      min-width: 44px;
    }
  }

  @media (max-width: 680px) {
    .fc-card-shell { padding: 0.9rem; }
    .fc-controls-grid {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
    .fc-toggles-grid {
      grid-template-columns: 1fr;
    }
    .fc-scan-input,
    .fc-select-control,
    .fc-sem-select,
    .fc-score-field {
      font-size: max(1rem, 1em) !important;
    }
    .fc-card-undo-btn {
      min-height: 44px;
      min-width: 44px;
    }
  }

  @media (max-width: 480px) {
    .fc-scan-input-row {
      flex-wrap: wrap;
    }
    .fc-scan-input {
      flex: 1 1 100%;
    }
    .fc-keypad-btn {
      min-height: 44px;
    }
    .fc-scan-submit-btn {
      flex: 1 1 auto;
      min-height: 44px;
    }
  }

  @media (max-width: 768px) {
    body.has-mobile-nav #fast-check-page .fc-result-area {
      padding-bottom: 120px !important;
    }
  }

  #fast-check-page :is(button, input, select):focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }

  @media (forced-colors: active) {
    .fc-mode-widget.is-active-manual,
    .fc-mode-widget.is-active-noscore,
    .fc-mode-widget.is-active-custom,
    .fc-assign-label.is-selected {
      outline: 2px solid Highlight;
    }
  }

  html[data-perf="eco"] :where(.fc-scan-input, .fc-mode-widget, .fc-mode-icon, .fc-assign-label, .fc-history-card, .fc-sync-pill, .fc-sync-dot, .fc-sync-retry-action) {
    transition: none !important;
    animation: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.fc-scan-input, .fc-mode-widget, .fc-mode-icon, .fc-assign-label, .fc-history-card, .fc-sync-pill, .fc-sync-dot, .fc-sync-retry-action, .login-portal-card, .login-mode-tab, .hr-shell-card, .hr-risk-btn, .hr-mob-card, .hr-student-toggle-btn) {
      transition: none !important;
      animation: none !important;
    }
  }

  /* ==========================================
     ⚖️ Fast Check + Behavior Co-Pilot Dual Workspace & Quick Modal
     ========================================== */
  .fc-card-shell.is-dual-mode {
    max-width: 1380px;
  }

  .fc-beh-dock-toggle {
    border-color: #ec4899;
    color: #be185d;
    background: rgba(236, 72, 153, 0.08);
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    font-weight: 700;
    font-size: 0.86rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 10px;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  }
  .fc-beh-dock-toggle:hover {
    background: rgba(236, 72, 153, 0.15);
  }
  .fc-beh-dock-toggle[aria-pressed="true"] {
    background: linear-gradient(135deg, #db2777, #9333ea);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.28);
  }
  [data-theme="dark"] .fc-beh-dock-toggle {
    color: #f9a8d4;
    border-color: rgba(244, 114, 182, 0.55);
    background: rgba(236, 72, 153, 0.16);
  }
  [data-theme="dark"] .fc-beh-dock-toggle[aria-pressed="true"] {
    color: #ffffff;
  }

  .fc-beh-session-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ec4899;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
  }
  .fc-beh-session-badge[hidden] {
    display: none !important;
  }
  .fc-beh-dock-toggle[aria-pressed="true"] .fc-beh-session-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  .fc-dual-mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 1rem;
  }
  .fc-dual-mobile-bar[hidden] {
    display: none !important;
  }
  .fc-dual-jump-btn {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .fc-dual-jump-btn.is-scan {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(79, 70, 229, 0.08);
  }
  .fc-dual-jump-btn.is-beh {
    border-color: #ec4899;
    color: #be185d;
    background: rgba(236, 72, 153, 0.08);
  }
  [data-theme="dark"] .fc-dual-jump-btn.is-beh {
    color: #f9a8d4;
  }

  .fc-dual-workspace {
    display: block;
    min-width: 0;
  }
  .fc-primary-col {
    min-width: 0;
  }

  .fc-beh-dock {
    margin-top: 1.25rem;
    background: var(--surface-color);
    border: 1.5px solid rgba(236, 72, 153, 0.35);
    border-top: 4px solid #ec4899;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--soft-shadow);
    min-width: 0;
    contain: layout style;
  }
  .fc-beh-dock[hidden] {
    display: none !important;
  }

  @media (min-width: 1024px) {
    .fc-dual-mobile-bar {
      display: none !important;
    }
    .fc-card-shell.is-dual-mode .fc-dual-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
      gap: 1.25rem;
      align-items: start;
    }
    .fc-beh-dock {
      margin-top: 0;
      position: sticky;
      top: 1rem;
      max-height: calc(100dvh - 2rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
  }

  progress.fc-beh-progress-bar {
    display: block;
    width: 100%;
    height: 6px;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    appearance: none;
    margin-bottom: 0.75rem;
    background: rgba(236, 72, 153, 0.14);
    container-type: inline-size;
  }
  progress.fc-beh-progress-bar[hidden] {
    display: none !important;
  }
  progress.fc-beh-progress-bar::-webkit-progress-bar {
    background: rgba(236, 72, 153, 0.14);
    border-radius: 999px;
  }
  progress.fc-beh-progress-bar::-webkit-progress-value {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 999px;
    transition: width 0.25s ease;
  }
  progress.fc-beh-progress-bar::-moz-progress-bar {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 999px;
  }
  progress.fc-beh-progress-bar:indeterminate {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.14) 25%, rgba(236, 72, 153, 0.55) 50%, rgba(139, 92, 246, 0.55) 75%, rgba(236, 72, 153, 0.14) 100%);
    background-size: 200% 100%;
    animation: fcBehProgressSlide 1.3s linear infinite;
  }
  progress.fc-beh-progress-bar:indeterminate::-webkit-progress-bar {
    background: transparent;
  }
  progress.fc-beh-progress-bar:indeterminate::-moz-progress-bar {
    background: transparent;
  }
  @keyframes fcBehProgressSlide {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  .fc-beh-dock-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1.5px solid var(--border-color);
  }
  .fc-beh-dock-head-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .fc-beh-dock-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #be185d;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  [data-theme="dark"] .fc-beh-dock-title {
    color: #f9a8d4;
  }
  .fc-beh-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(236, 72, 153, 0.14);
    color: #db2777;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  [data-theme="dark"] .fc-beh-title-icon {
    color: #f9a8d4;
  }
  .fc-beh-class-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .fc-beh-class-pill {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(236, 72, 153, 0.12);
    color: #be185d;
    border: 1px solid rgba(236, 72, 153, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
  }
  [data-theme="dark"] .fc-beh-class-pill {
    color: #fbcfe8;
    background: rgba(236, 72, 153, 0.22);
  }
  .fc-beh-class-select {
    flex: 1 1 auto;
    min-width: 120px;
    min-height: 36px;
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 8px;
    border-color: rgba(236, 72, 153, 0.45);
    background: var(--surface-solid);
    color: var(--text-main);
  }
  .fc-beh-dock-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .fc-beh-mini-btn {
    min-height: 38px;
    min-width: 38px;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-color: var(--border-color);
  }
  .fc-beh-close-dock-btn {
    border-color: rgba(239, 68, 68, 0.35);
    color: #dc2626;
  }
  [data-theme="dark"] .fc-beh-close-dock-btn {
    color: #fca5a5;
  }

  .fc-beh-recent-box {
    background: rgba(99, 102, 241, 0.08);
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 0.75rem;
  }
  .fc-beh-recent-box[hidden] {
    display: none !important;
  }
  .fc-beh-recent-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
  }
  .fc-beh-recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .fc-beh-recent-chip {
    min-height: 36px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1.5px solid rgba(99, 102, 241, 0.35);
    background: var(--surface-solid);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  }
  .fc-beh-recent-chip[aria-pressed="true"] {
    background: #6366f1;
    border-color: #4f46e5;
    color: #ffffff;
  }

  .fc-beh-section {
    margin-bottom: 0.85rem;
  }
  .fc-beh-toolbar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 6px;
  }
  .fc-beh-search-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    font-size: 0.9rem;
    background: var(--surface-solid);
    border: 1.5px solid var(--border-color);
  }
  .fc-beh-select-all-btn {
    min-height: 40px;
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    border-color: rgba(59, 130, 246, 0.45);
    color: #2563eb;
    background: rgba(59, 130, 246, 0.08);
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .fc-beh-select-all-btn[aria-pressed="true"] {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
  }
  [data-theme="dark"] .fc-beh-select-all-btn {
    color: #93c5fd;
  }
  [data-theme="dark"] .fc-beh-select-all-btn[aria-pressed="true"] {
    color: #ffffff;
  }

  .fc-beh-status-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
  }
  .fc-beh-status-chip {
    width: 100%;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-solid-alt);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 999px;
  }
  .fc-beh-status-chip.is-active {
    color: #be185d;
    border-color: rgba(236, 72, 153, 0.4);
    background: rgba(236, 72, 153, 0.1);
  }
  [data-theme="dark"] .fc-beh-status-chip.is-active {
    color: #f9a8d4;
  }

  .fc-beh-stu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-solid-alt);
  }
  .fc-beh-empty-box {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
    padding: 1rem 0.5rem;
  }
  .fc-beh-skel-card {
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.15) 25%, rgba(148, 163, 184, 0.28) 50%, rgba(148, 163, 184, 0.15) 75%);
    background-size: 200% 100%;
    animation: fcBehProgressSlide 1.3s linear infinite;
  }

  .fc-beh-stu-chip {
    min-height: 40px;
    padding: 4px 6px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    cursor: pointer;
    text-align: left;
    font-size: 0.82rem;
    min-width: 0;
    transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.12s ease;
  }
  .fc-beh-stu-chip[aria-pressed="true"] {
    border-color: #ec4899;
    border-width: 2px;
    background: rgba(236, 72, 153, 0.12);
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.18);
  }
  .fc-beh-stu-chip-name {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    flex: 1;
  }
  .fc-beh-stu-check {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
    color: transparent;
  }
  .fc-beh-stu-chip[aria-pressed="true"] .fc-beh-stu-check {
    background: #ec4899;
    border-color: #ec4899;
    color: #ffffff;
  }
  .fc-beh-stu-score {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .fc-beh-stu-score.is-good { background: rgba(16, 185, 129, 0.14); color: #059669; }
  .fc-beh-stu-score.is-mid { background: rgba(245, 158, 11, 0.14); color: #d97706; }
  .fc-beh-stu-score.is-low { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
  [data-theme="dark"] .fc-beh-stu-score.is-good { color: #6ee7b7; }
  [data-theme="dark"] .fc-beh-stu-score.is-mid { color: #fcd34d; }
  [data-theme="dark"] .fc-beh-stu-score.is-low { color: #fca5a5; }

  .fc-beh-cat-row {
    margin-bottom: 6px;
  }
  .fc-beh-cat-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .fc-beh-cat-pill {
    min-height: 36px;
    padding: 4px 8px;
    border-radius: 9px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
  }
  .fc-beh-cat-pill[aria-pressed="true"] {
    border-color: #ec4899;
    background: rgba(236, 72, 153, 0.12);
    color: #be185d;
  }
  [data-theme="dark"] .fc-beh-cat-pill[aria-pressed="true"] {
    color: #f9a8d4;
  }

  .fc-beh-preset-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 205px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 2px;
  }
  .fc-beh-preset-btn {
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
  }
  .fc-beh-preset-btn.is-pos {
    border-color: rgba(16, 185, 129, 0.38);
  }
  .fc-beh-preset-btn.is-neg {
    border-color: rgba(239, 68, 68, 0.38);
  }
  .fc-beh-preset-btn[aria-pressed="true"].is-pos {
    background: rgba(16, 185, 129, 0.16);
    border-color: #10b981;
    border-width: 2px;
  }
  .fc-beh-preset-btn[aria-pressed="true"].is-neg {
    background: rgba(239, 68, 68, 0.16);
    border-color: #ef4444;
    border-width: 2px;
  }
  .fc-beh-preset-pts {
    font-weight: 800;
    font-size: 0.84rem;
    flex-shrink: 0;
  }
  .fc-beh-preset-btn.is-pos .fc-beh-preset-pts { color: #059669; }
  .fc-beh-preset-btn.is-neg .fc-beh-preset-pts { color: #dc2626; }
  [data-theme="dark"] .fc-beh-preset-btn.is-pos .fc-beh-preset-pts { color: #6ee7b7; }
  [data-theme="dark"] .fc-beh-preset-btn.is-neg .fc-beh-preset-pts { color: #fca5a5; }

  .fc-beh-custom-box {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px dashed rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.04);
  }
  .fc-beh-custom-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
  }
  .fc-beh-custom-actions {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .fc-beh-pts-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-solid);
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    padding: 0 8px;
  }
  .fc-beh-pts-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0;
  }
  .fc-beh-custom-pts {
    width: 54px;
    min-height: 36px;
    border: none !important;
    background: transparent !important;
    text-align: center;
    font-weight: 800;
    padding: 0;
  }
  .fc-beh-quick-pos-btn,
  .fc-beh-quick-neg-btn {
    flex: 1 1 100px;
    min-height: 40px;
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .fc-beh-quick-pos-btn { background: #10b981; }
  .fc-beh-quick-neg-btn { background: #ef4444; }

  .fc-beh-dock-footer {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1.5px solid var(--border-color);
  }
  .fc-beh-submit-btn {
    flex: 1 1 180px;
    min-height: 44px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.88rem;
  }
  .fc-beh-freeze-btn {
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    background: rgba(14, 165, 233, 0.14);
    border: 1.5px solid rgba(14, 165, 233, 0.45);
    color: #0284c7;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  [data-theme="dark"] .fc-beh-freeze-btn {
    color: #7dd3fc;
  }

  /* ⚖️ ปุ่ม +/- พฤติกรรมบนการ์ดผลสแกน Fast Check */
  .fc-card-right-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .fc-card-beh-btn {
    background: rgba(236, 72, 153, 0.12);
    color: #be185d;
    border: 1px solid rgba(236, 72, 153, 0.38);
    border-radius: 8px;
    padding: 6px 10px;
    min-height: 38px;
    min-width: 44px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    pointer-events: auto;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  .fc-card-beh-btn:hover {
    background: rgba(236, 72, 153, 0.22);
  }
  .fc-card-beh-btn:active {
    transform: scale(0.96);
  }
  [data-theme="dark"] .fc-card-beh-btn {
    color: #f9a8d4;
    background: rgba(236, 72, 153, 0.22);
  }
  .fc-card-beh-short { display: none; }
  .fc-card-beh-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
  }
  .fc-card-beh-delta[hidden] {
    display: none !important;
  }
  .fc-card-beh-delta.is-pos {
    background: #10b981;
    color: #ffffff;
  }
  .fc-card-beh-delta.is-neg {
    background: #ef4444;
    color: #ffffff;
  }
  .fc-card-beh-delta.is-neutral {
    background: #64748b;
    color: #ffffff;
  }

  .beh-jump-fc-btn {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: rgba(79, 70, 229, 0.08);
    font-weight: 700;
  }
  [data-theme="dark"] .beh-jump-fc-btn {
    color: #a5b4fc !important;
    background: rgba(99, 102, 241, 0.18);
  }

  /* ⚖️ Native Top-Layer Quick Behavior Dialog (<dialog>) */
  dialog.fc-qbeh-dialog {
    margin: auto;
    padding: 0;
    width: min(680px, 94vw);
    max-height: 90dvh;
    border-radius: 18px;
    border: 1.5px solid rgba(236, 72, 153, 0.45);
    background: var(--surface-solid, #ffffff);
    color: var(--text-main, #0f172a);
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.35);
    contain: layout style paint;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition-property: opacity, transform, display, overlay;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;
  }
  dialog.fc-qbeh-dialog[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  @starting-style {
    dialog.fc-qbeh-dialog[open] {
      opacity: 0;
      transform: translateY(14px) scale(0.97);
    }
  }
  dialog.fc-qbeh-dialog:modal {
    overscroll-behavior: contain;
  }
  dialog.fc-qbeh-dialog::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition-property: opacity, display, overlay;
    transition-duration: 0.2s;
    transition-behavior: allow-discrete;
  }
  dialog.fc-qbeh-dialog[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    dialog.fc-qbeh-dialog[open]::backdrop {
      opacity: 0;
    }
  }

  .fc-qbeh-inner {
    padding: 1.15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .fc-qbeh-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
  }
  .fc-qbeh-heading-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .fc-qbeh-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(236, 72, 153, 0.14);
    color: #db2777;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
  }
  .fc-qbeh-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #be185d;
  }
  [data-theme="dark"] .fc-qbeh-title {
    color: #f9a8d4;
  }
  .fc-qbeh-subtitle {
    margin: 2px 0 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
  }
  .fc-qbeh-close-btn {
    min-width: 40px;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-solid-alt);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .fc-qbeh-target-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(236, 72, 153, 0.08);
    border: 1px solid rgba(236, 72, 153, 0.25);
  }
  .fc-qbeh-stu-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .fc-qbeh-student-name {
    font-weight: 800;
    font-size: 0.96rem;
    color: var(--text-main);
  }
  .fc-qbeh-score-pill {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
  }
  [data-theme="dark"] .fc-qbeh-score-pill {
    color: #6ee7b7;
  }
  .fc-qbeh-delta-pill {
    font-size: 0.78rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
  }
  .fc-qbeh-presets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .fc-qbeh-col {
    border-radius: 12px;
    padding: 8px;
    border: 1px solid var(--border-color);
    background: var(--surface-solid-alt);
    min-width: 0;
  }
  .fc-qbeh-col.is-pos { border-color: rgba(16, 185, 129, 0.35); }
  .fc-qbeh-col.is-neg { border-color: rgba(239, 68, 68, 0.35); }
  .fc-qbeh-col-title {
    margin: 0 0 6px 0;
    font-size: 0.82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .fc-qbeh-col-title.is-pos { color: #059669; }
  .fc-qbeh-col-title.is-neg { color: #dc2626; }
  [data-theme="dark"] .fc-qbeh-col-title.is-pos { color: #6ee7b7; }
  [data-theme="dark"] .fc-qbeh-col-title.is-neg { color: #fca5a5; }
  .fc-qbeh-preset-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 205px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .fc-qbeh-preset-btn {
    width: 100%;
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .fc-qbeh-preset-btn.is-pos:hover { border-color: #10b981; background: rgba(16, 185, 129, 0.12); }
  .fc-qbeh-preset-btn.is-neg:hover { border-color: #ef4444; background: rgba(239, 68, 68, 0.12); }
  .fc-qbeh-custom-box {
    border-radius: 12px;
    padding: 10px;
    border: 1px dashed var(--border-color);
    background: var(--surface-solid-alt);
  }

  .fc-qbeh-dialog :is(button, input):focus-visible,
  #fc-inline-behavior-dock :is(button, input, select):focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }

  @media (max-width: 680px) {
    .fc-qbeh-presets-grid {
      grid-template-columns: 1fr;
    }
    .fc-card-beh-full { display: none; }
    .fc-card-beh-short { display: inline; }
    .fc-beh-search-input,
    .fc-beh-custom-pts,
    .fc-beh-class-select {
      font-size: max(1rem, 16px) !important;
    }
    .fc-beh-dock-toggle {
      flex: 1 1 auto;
      justify-content: center;
    }
    .fc-beh-dock-toggle,
    .fc-dual-jump-btn,
    .fc-beh-mini-btn,
    .fc-beh-select-all-btn,
    .fc-beh-stu-chip,
    .fc-beh-cat-pill,
    .fc-beh-preset-btn,
    .fc-beh-quick-pos-btn,
    .fc-beh-quick-neg-btn,
    .fc-beh-submit-btn,
    .fc-beh-freeze-btn,
    .fc-card-beh-btn,
    .fc-qbeh-close-btn,
    .fc-qbeh-preset-btn,
    .beh-pt-pill,
    .beh-pt-custom-input,
    .beh-sort-mode-btn,
    .beh-tray-step-btn,
    .fc-beh-pt-pill,
    .fc-beh-pt-input,
    .fc-beh-sort-btn {
      min-height: 44px;
      min-width: 44px;
    }
    .beh-pt-custom-input,
    .fc-beh-pt-input,
    #beh-preset-search {
      font-size: 16px;
    }
    .beh-tray-chip-desc {
      max-width: 170px;
    }
  }

  @media (pointer: coarse) {
    .fc-beh-mini-btn,
    .fc-beh-stu-chip,
    .fc-beh-preset-btn,
    .fc-card-beh-btn,
    .fc-qbeh-close-btn,
    .fc-qbeh-preset-btn,
    .beh-pt-pill,
    .beh-sort-mode-btn,
    .beh-tray-step-btn,
    .fc-beh-pt-pill,
    .fc-beh-sort-btn {
      min-height: 44px;
      min-width: 44px;
    }
  }

  @media (forced-colors: active) {
    .fc-beh-stu-chip[aria-pressed="true"],
    .fc-beh-preset-btn[aria-pressed="true"],
    .fc-beh-cat-pill[aria-pressed="true"],
    .fc-beh-dock-toggle[aria-pressed="true"],
    .beh-pt-pill[aria-pressed="true"],
    .beh-sort-mode-btn[aria-pressed="true"],
    .fc-beh-pt-pill[aria-pressed="true"],
    .fc-beh-sort-btn[aria-pressed="true"] {
      outline: 2px solid Highlight;
    }
  }

  html[data-perf="eco"] :where(.fc-beh-dock-toggle, .fc-beh-dock, .fc-beh-stu-chip, .fc-beh-preset-btn, .fc-beh-recent-chip, .fc-card-beh-btn, dialog.fc-qbeh-dialog, .fc-skel-card, .fc-beh-skel-card, .beh-preset-item, .beh-pt-pill, .beh-sort-mode-btn, .beh-skel-card) {
    transition: none !important;
    animation: none !important;
  }
  html[data-perf="eco"] dialog.fc-qbeh-dialog::backdrop {
    backdrop-filter: none !important;
    transition: none !important;
  }
  html[data-perf="eco"] progress.fc-beh-progress-bar:indeterminate,
  html[data-perf="eco"] progress.beh-sync-progress:indeterminate {
    animation-duration: 3.2s;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.fc-beh-dock-toggle, .fc-beh-dock, .fc-beh-stu-chip, .fc-beh-preset-btn, .fc-beh-recent-chip, .fc-card-beh-btn, dialog.fc-qbeh-dialog, dialog.fc-qbeh-dialog::backdrop, .fc-beh-skel-card, .beh-preset-item, .beh-pt-pill, .beh-sort-mode-btn, .beh-skel-card) {
      transition: none !important;
      animation: none !important;
    }
    progress.fc-beh-progress-bar:indeterminate,
    progress.beh-sync-progress:indeterminate {
      animation-duration: 3.5s;
    }
  }

  /* ==========================================
     🏫 Dual-Mode Login Portal & Homeroom Role Differentiation (Production UI/UX + A11y)
     ========================================== */
  .home-homeroom-portal-box {
    margin-top: 2rem;
    padding: 1.1rem 1rem 1.05rem;
    border-radius: 16px;
    border: 1.5px dashed rgba(217, 119, 6, 0.45);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(16, 185, 129, 0.06));
    text-align: center;
  }
  [data-theme="dark"] .home-homeroom-portal-box {
    border-color: rgba(251, 191, 36, 0.45);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(16, 185, 129, 0.1));
  }
  .home-homeroom-portal-eyebrow {
    margin-bottom: 0.45rem;
  }
  .home-homeroom-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #b45309;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(217, 119, 6, 0.38);
    border-radius: 999px;
    padding: 3px 11px;
  }
  [data-theme="dark"] .home-homeroom-pill {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(251, 191, 36, 0.5);
  }
  .home-homeroom-portal-desc {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin: 0 0 0.85rem;
    line-height: 1.45;
  }
  .home-homeroom-entry-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1rem;
    color: #ffffff;
    background: linear-gradient(135deg, #d97706, #b45309);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
  }
  .home-homeroom-entry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.36);
  }

  /* Login Page Dual Portal Cards */
  .login-portal-card {
    max-width: 470px;
    margin: 0 auto;
    border-top: 5px solid #4f46e5;
    padding: 1.4rem 1.35rem 1.6rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .login-portal-card[data-login-mode="homeroom"] {
    border-top-color: #d97706;
    box-shadow: 0 12px 32px rgba(217, 119, 6, 0.16);
  }
  [data-theme="dark"] .login-portal-card[data-login-mode="homeroom"] {
    border-top-color: #fbbf24;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(251, 191, 36, 0.25);
  }

  .login-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.16);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
  }
  [data-theme="dark"] .login-mode-tabs {
    background: rgba(15, 23, 42, 0.68);
  }
  .login-mode-tab {
    appearance: none;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    min-height: 46px;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1.25;
    text-align: center;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  }
  #login-tab-teacher.active {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.28);
  }
  #login-tab-homeroom.active {
    background: linear-gradient(135deg, #d97706, #059669);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
  }

  .login-mode-banner {
    border-radius: 14px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1.5px solid rgba(79, 70, 229, 0.32);
    background: rgba(79, 70, 229, 0.08);
    text-align: left;
  }
  [data-theme="dark"] .login-mode-banner {
    border-color: rgba(129, 140, 248, 0.42);
    background: rgba(79, 70, 229, 0.16);
  }
  .login-mode-banner.is-homeroom {
    border-color: rgba(217, 119, 6, 0.48);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(16, 185, 129, 0.09));
  }
  [data-theme="dark"] .login-mode-banner.is-homeroom {
    border-color: rgba(251, 191, 36, 0.5);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(16, 185, 129, 0.14));
  }
  .login-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #3730a3;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(79, 70, 229, 0.25);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 0.45rem;
  }
  [data-theme="dark"] .login-mode-badge {
    color: #e0e7ff;
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(129, 140, 248, 0.4);
  }
  .login-mode-banner.is-homeroom .login-mode-badge {
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.4);
  }
  [data-theme="dark"] .login-mode-banner.is-homeroom .login-mode-badge {
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.5);
  }
  .login-mode-desc {
    margin: 0 0 0.55rem;
    font-size: 0.86rem;
    color: var(--text-main);
    line-height: 1.45;
  }
  .login-mode-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .login-cap-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--surface-solid, #ffffff);
    color: var(--text-main);
    border: 1px solid rgba(100, 116, 139, 0.28);
  }
  .login-cap-chip.is-lock {
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.4);
  }
  [data-theme="dark"] .login-cap-chip.is-lock {
    color: #fcd34d;
  }

  .login-card-title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .login-portal-card[data-login-mode="homeroom"] .login-card-title {
    color: #b45309;
  }
  [data-theme="dark"] .login-portal-card[data-login-mode="homeroom"] .login-card-title {
    color: #fbbf24;
  }

  .login-error-alert {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1.5px solid rgba(239, 68, 68, 0.45);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    font-size: 0.86rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
  }
  [data-theme="dark"] .login-error-alert {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.18);
  }

  .login-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
  }
  .login-field-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
  }
  .login-req { color: #dc2626; font-weight: 800; }
  .login-input {
    font: inherit;
    font-size: max(1rem, 1em);
    min-height: 48px;
    border-radius: 10px;
    border: 1.5px solid #94a3b8;
    background: var(--surface-solid, #ffffff);
    color: var(--text-main);
    padding: 0.6rem 0.85rem;
  }
  [data-theme="dark"] .login-input {
    border-color: rgba(148, 163, 184, 0.5);
    background: var(--surface-solid-alt, #172038);
  }
  .login-input[aria-invalid="true"],
  .login-input:user-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
  }
  .login-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .login-pass-input {
    padding-inline-end: 52px;
    width: 100%;
  }
  .login-pass-toggle {
    position: absolute;
    inset-inline-end: 4px;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
  }
  .login-pass-toggle:hover {
    color: var(--text-main);
    background: rgba(148, 163, 184, 0.14);
  }
  .login-field-error {
    font-size: 0.82rem;
    font-weight: 700;
    color: #b91c1c;
  }
  [data-theme="dark"] .login-field-error {
    color: #fca5a5;
  }
  .login-submit-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 1.15rem;
  }
  .login-submit-btn,
  .login-cancel-btn {
    min-height: 48px;
  }
  .login-submit-btn.is-homeroom {
    background: linear-gradient(135deg, #d97706, #059669);
    border: none;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.28);
  }

  /* ==========================================
     📢 Homeroom Dashboard Page (Role-Differentiated & Accessible)
     ========================================== */
  .hr-shell-card {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 5px solid #f59e0b;
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-shell-card {
    border-top: 6px solid #059669;
    box-shadow: 0 10px 30px rgba(5, 150, 105, 0.14);
  }
  [data-theme="dark"] #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-shell-card {
    border-top-color: #34d399;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(52, 211, 153, 0.25);
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom-teacher"] .hr-shell-card {
    border-top: 6px solid #d97706;
  }
  #homeroom-dashboard-page[data-hr-mode="admin"] .hr-shell-card {
    border-top: 6px solid #8b5cf6;
  }

  .hr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed rgba(245, 158, 11, 0.35);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 12px;
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-header {
    border-bottom-color: rgba(16, 185, 129, 0.38);
  }
  .hr-heading-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hr-heading-icon {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.18);
    flex-shrink: 0;
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-heading-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(245, 158, 11, 0.18));
    color: #047857;
  }
  [data-theme="dark"] .hr-heading-icon { color: #fbbf24; }
  [data-theme="dark"] #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-heading-icon { color: #34d399; }

  .hr-page-title {
    margin: 0;
    color: #b45309;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.25;
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-page-title {
    color: #047857;
  }
  [data-theme="dark"] .hr-page-title { color: #fbbf24; }
  [data-theme="dark"] #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-page-title { color: #34d399; }

  .hr-page-subtitle {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .hr-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .hr-back-btn {
    border-color: #d97706;
    color: #b45309;
    min-height: 44px;
    font-weight: 700;
  }
  [data-theme="dark"] .hr-back-btn {
    border-color: #fbbf24;
    color: #fde68a;
  }
  .hr-back-btn.is-logout {
    border-color: #ef4444;
    color: #dc2626;
    background: rgba(239, 68, 68, 0.08);
  }
  [data-theme="dark"] .hr-back-btn.is-logout {
    border-color: #f87171;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.16);
  }

  /* Role Identity Banner */
  .hr-role-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 0.85rem 1.05rem;
    border-radius: 14px;
    margin-bottom: 1.15rem;
    background: rgba(79, 70, 229, 0.07);
    border: 1.5px solid rgba(79, 70, 229, 0.28);
  }
  [data-theme="dark"] .hr-role-banner {
    background: rgba(79, 70, 229, 0.16);
    border-color: rgba(129, 140, 248, 0.4);
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-role-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(245, 158, 11, 0.1));
    border: 2px solid rgba(5, 150, 105, 0.42);
  }
  [data-theme="dark"] #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-role-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(245, 158, 11, 0.14));
    border-color: rgba(52, 211, 153, 0.48);
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom-teacher"] .hr-role-banner {
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid rgba(217, 119, 6, 0.4);
  }
  #homeroom-dashboard-page[data-hr-mode="admin"] .hr-role-banner {
    background: rgba(139, 92, 246, 0.1);
    border: 1.5px solid rgba(139, 92, 246, 0.36);
  }

  .hr-role-banner-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .hr-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    background: #4f46e5;
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-role-pill {
    background: linear-gradient(135deg, #059669, #d97706);
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom-teacher"] .hr-role-pill {
    background: linear-gradient(135deg, #d97706, #b45309);
  }
  #homeroom-dashboard-page[data-hr-mode="admin"] .hr-role-pill {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
  }
  .hr-user-identity-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
  }
  .hr-role-scope-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .hr-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--surface-solid, #ffffff);
    color: var(--text-main);
    border: 1px solid rgba(100, 116, 139, 0.32);
  }
  .hr-scope-chip.is-advisor-only {
    color: #047857;
    border-color: rgba(5, 150, 105, 0.35);
  }
  [data-theme="dark"] .hr-scope-chip.is-advisor-only {
    color: #6ee7b7;
  }

  /* Filter Grid & Locked Room Card */
  .hr-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.95rem;
    background: var(--surface-color);
    padding: 1.15rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
    box-shadow: var(--soft-shadow);
  }
  .hr-filter-item { margin: 0; }
  .hr-filter-item[hidden] { display: none !important; }
  .hr-filter-label {
    display: block;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 5px;
  }
  .hr-filter-control {
    background-color: var(--bg-color);
    color: var(--text-main);
    border: 1.5px solid rgba(100, 116, 139, 0.4);
    min-height: 44px;
    font-size: max(1rem, 1em);
  }
  .hr-sort-select { font-weight: 700; cursor: pointer; }
  .hr-locked-room-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0.7rem 0.95rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(245, 158, 11, 0.12));
    border: 2px solid rgba(5, 150, 105, 0.45);
  }
  .hr-locked-room-card[hidden] { display: none !important; }
  .hr-locked-room-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: #047857;
  }
  [data-theme="dark"] .hr-locked-room-label { color: #6ee7b7; }
  .hr-locked-room-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
  }

  /* Search + Copy Toolbar */
  .hr-action-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0.5rem 0 1rem;
    padding: 0.85rem 0;
    border-top: 1px dashed var(--border-color);
    border-bottom: 1px dashed var(--border-color);
  }
  .hr-search-box {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: center;
  }
  .hr-search-icon {
    position: absolute;
    inset-inline-start: 14px;
    color: var(--text-muted);
    pointer-events: none;
  }
  .hr-search-input {
    width: 100%;
    padding-inline-start: 40px;
    padding-inline-end: 46px;
    min-height: 46px;
    border-radius: 12px;
    border: 1.5px solid #94a3b8;
    background: var(--surface-solid, #ffffff);
    color: var(--text-main);
    font-size: max(1rem, 1em);
  }
  [data-theme="dark"] .hr-search-input {
    background: var(--surface-solid-alt, #172038);
    border-color: rgba(148, 163, 184, 0.45);
  }
  .hr-search-clear-btn {
    position: absolute;
    inset-inline-end: 4px;
    min-width: 40px;
    min-height: 40px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hr-search-clear-btn[hidden] { display: none !important; }
  .hr-overview-copy-btn {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #ffffff;
    border: none;
    min-height: 46px;
    border-radius: 12px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3);
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-overview-copy-btn {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
  }

  /* Risk Filter Cards (<button>) */
  .hr-housecup-area { margin: 0.75rem 0 0.5rem; }
  .hr-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 0.9rem;
    margin: 1.1rem 0 1.35rem;
  }
  .hr-risk-btn {
    appearance: none;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.05rem;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    min-height: 112px;
    width: 100%;
  }
  .hr-risk-safe {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.35);
    --hr-risk-ink: #047857;
  }
  [data-theme="dark"] .hr-risk-safe { --hr-risk-ink: #34d399; }
  .hr-risk-warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.38);
    --hr-risk-ink: #b45309;
  }
  [data-theme="dark"] .hr-risk-warn { --hr-risk-ink: #fbbf24; }
  .hr-risk-crit {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.38);
    --hr-risk-ink: #dc2626;
  }
  [data-theme="dark"] .hr-risk-crit { --hr-risk-ink: #f87171; }
  .hr-risk-num {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--hr-risk-ink);
    line-height: 1.1;
  }
  .hr-risk-title {
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 700;
    margin-top: 4px;
  }
  .hr-risk-hint {
    font-size: 0.74rem;
    color: var(--hr-risk-ink);
    margin-top: 4px;
    font-weight: 600;
  }

  .hr-vault-emergency-banner {
    background: rgba(239, 68, 68, 0.09);
    border: 1.5px solid #ef4444;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .hr-vault-emergency-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.88rem;
  }
  [data-theme="dark"] .hr-vault-emergency-msg { color: #fca5a5; }
  .hr-vault-sync-btn {
    padding: 6px 14px;
    font-size: 0.84rem;
    border-radius: 8px;
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    font-weight: 700;
    min-height: 44px;
  }

  .hr-list-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.65rem;
  }
  .hr-list-status-bar[hidden] { display: none !important; }

  .hr-result-area {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--soft-shadow);
    overflow-x: auto;
    background: var(--surface-color);
  }
  .hr-empty-state { padding: 3.5rem 1rem; text-align: center; }
  .hr-empty-icon { font-size: 3.2rem; color: #f59e0b; margin-bottom: 0.8rem; }
  .hr-empty-title { color: var(--text-main); margin: 0 0 0.35rem; }
  .hr-empty-desc { color: var(--text-muted); font-size: 0.94rem; margin: 0; }

  /* Desktop Table & Sticky Header */
  .hr-table-scroll {
    overflow: auto;
    max-width: 100%;
    max-height: min(74vh, 820px);
    -webkit-overflow-scrolling: touch;
    cursor: grab;
  }
  .hr-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 0.95rem;
    min-width: 920px;
  }
  .hr-table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--surface-solid, #ffffff);
    color: #92400e;
    border-bottom: 2px solid #f59e0b;
    padding: 0.9rem 0.85rem;
    font-weight: 800;
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-table thead th {
    color: #065f46;
    border-bottom-color: #10b981;
  }
  [data-theme="dark"] .hr-table thead th {
    background: var(--surface-solid, #0f172a);
    color: #fde68a;
  }
  [data-theme="dark"] #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-table thead th {
    color: #6ee7b7;
  }
  .hr-table tbody tr.hr-stu-row:hover {
    background: rgba(245, 158, 11, 0.06);
  }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-table tbody tr.hr-stu-row:hover {
    background: rgba(16, 185, 129, 0.08);
  }

  .hr-student-toggle-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    min-height: 44px;
    border-radius: 8px;
    width: 100%;
  }
  .hr-student-toggle-btn:hover {
    background: rgba(245, 158, 11, 0.1);
  }
  .hr-caret { color: #d97706; flex-shrink: 0; }
  [data-theme="dark"] .hr-caret { color: #fbbf24; }
  #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-caret { color: #059669; }
  [data-theme="dark"] #homeroom-dashboard-page[data-hr-mode="homeroom"] .hr-caret { color: #34d399; }

  .hr-action-btn {
    padding: 0.45rem 0.78rem;
    font-size: 0.82rem;
    min-height: 44px;
    border-radius: 10px;
    font-weight: 700;
    border-color: #d97706;
    color: #b45309;
    white-space: nowrap;
  }
  [data-theme="dark"] .hr-action-btn {
    border-color: #fbbf24;
    color: #fde68a;
  }
  .hr-slip-btn {
    padding: 0.45rem 0.78rem;
    font-size: 0.82rem;
    min-height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    white-space: nowrap;
  }

  /* Mobile Student Card Layout */
  .hr-mob-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0.75rem;
  }
  .hr-mob-card {
    background: var(--surface-solid, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
  }
  [data-theme="dark"] .hr-mob-card {
    background: var(--surface-solid-alt, #172038);
  }
  .hr-mob-card-trigger {
    appearance: none;
    width: 100%;
    min-height: 54px;
    padding: 12px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
  }
  .hr-mob-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .hr-mob-card-actions .hr-action-btn,
  .hr-mob-card-actions .hr-slip-btn {
    width: 100% !important;
    max-width: none !important;
    justify-content: center;
  }

  .hr-advisor-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(5, 150, 105, 0.35);
    padding: 4px 9px;
    border-radius: 8px;
    white-space: nowrap;
  }
  [data-theme="dark"] .hr-advisor-tag {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.18);
  }

  .hr-batch-submit-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    min-height: 44px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
  }
  .hr-quick-submit-btn {
    background: #059669;
    color: #ffffff;
    padding: 5px 10px;
    min-height: 40px;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
    white-space: nowrap;
  }
  .hr-undo-btn {
    padding: 5px 10px;
    min-height: 40px;
    font-size: 0.76rem;
    border-color: #ef4444;
    color: #dc2626;
    white-space: nowrap;
  }
  [data-theme="dark"] .hr-undo-btn {
    color: #fca5a5;
  }

  @media (max-width: 600px) {
    #hr-result-area.hr-result-area {
      margin: 0;
      border-radius: 14px;
    }
    .hr-filter-grid {
      grid-template-columns: 1fr;
      padding: 0.9rem;
    }
    .hr-mob-list { padding: 0.5rem; }
    .login-submit-row {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
    }
    .login-submit-row .btn,
    .login-submit-row .btn-outline {
      width: 100% !important;
      max-width: none !important;
    }
    .hr-overview-copy-btn {
      width: 100%;
    }
  }

  #login-page :is(button, input):focus-visible,
  #homeroom-dashboard-page :is(button, input, select):focus-visible,
  .hr-table-scroll:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
  }

  @media (forced-colors: active) {
    .login-portal-card,
    .login-mode-banner,
    .hr-role-banner,
    .hr-risk-btn[aria-pressed="true"],
    .hr-mob-card {
      outline: 2px solid Highlight;
    }
  }

  html[data-perf="eco"] :where(.login-portal-card, .login-mode-tab, .home-homeroom-entry-btn, .hr-shell-card, .hr-risk-btn, .hr-mob-card, .hr-student-toggle-btn) {
    transition: none !important;
    animation: none !important;
  }

  #homeroom-dashboard-page .quick-bar-toggle-btn,
  #homeroom-dashboard-page .quick-cls-pill {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ==========================================================================
     🏠 PRODUCTION HOME LANDING & TEACHER/ADMIN DASHBOARD SHELL
     ========================================================================== */
  .skip-link:focus,
  .skip-link:focus-visible {
    position: fixed !important;
    top: 12px;
    left: 12px;
    z-index: 12000;
    background: var(--primary-color);
    color: #ffffff;
    padding: 0.65rem 1.1rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    outline: 3px solid #ffffff;
    outline-offset: 2px;
  }

  .site-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .site-header .navbar {
    position: static;
  }

  /* #home-page Layout & Typography */
  .home-noti-wrap {
    max-width: 1050px;
    margin: 0 auto 1rem auto;
    width: 100%;
  }
  .home-noti-wrap:empty {
    margin-bottom: 0;
  }

  .system-announcement-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-left: 5px solid #d97706;
    padding: 1.15rem 1.2rem;
    border-radius: 16px;
    margin: 0 auto 1.35rem auto;
    max-width: 1050px;
    box-shadow: var(--soft-shadow);
    text-align: left;
  }
  [data-theme="dark"] .system-announcement-card {
    border-left-color: #fbbf24;
  }
  .sys-ann-head {
    font-weight: 800;
    color: #b45309;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1.04rem;
  }
  [data-theme="dark"] .sys-ann-head {
    color: #fcd34d;
  }
  .sys-ann-icon {
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    flex-shrink: 0;
  }
  [data-theme="dark"] .sys-ann-icon {
    background: rgba(251, 191, 36, 0.18);
    color: #fcd34d;
  }
  .sys-ann-body {
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
  }
  .sys-ann-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(217, 119, 6, 0.28);
    font-size: 0.86rem;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
  }
  .sys-ann-footer i {
    color: var(--primary-color);
    margin-top: 3px;
    flex-shrink: 0;
  }

  .home-scan-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 2.35rem 1.85rem 2rem;
    container-type: inline-size;
    container-name: home-card;
  }
  .home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #0369a1;
    background: rgba(2, 132, 199, 0.12);
    border: 1px solid rgba(2, 132, 199, 0.28);
    margin-bottom: 0.85rem;
  }
  [data-theme="dark"] .home-hero-badge {
    color: #ddd6fe;
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.4);
  }
  .home-hero-icon {
    margin-bottom: 0.75rem;
    font-size: 3.6rem;
  }
  .home-hero-title {
    font-weight: 800;
    font-size: clamp(1.65rem, 3.6vw, 2.05rem);
    color: var(--text-main);
    margin: 0 0 0.45rem 0;
    line-height: 1.22;
    text-wrap: balance;
  }
  .home-hero-subtitle {
    font-size: 1.02rem;
    margin: 0 0 1.65rem 0;
    line-height: 1.5;
  }
  .home-scan-form {
    margin: 0 auto 1.35rem auto;
    text-align: left;
  }
  .home-scan-label {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }
  [data-theme="dark"] .home-scan-label {
    color: #d8b4fe;
  }
  .home-scan-input-group {
    display: flex;
    gap: 0.55rem;
    align-items: stretch;
    width: 100%;
  }
  .home-scan-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    font-size: max(1rem, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.7rem 0.95rem;
    border-radius: 12px;
    border: 2px solid rgba(2, 132, 199, 0.35);
    background: var(--surface-solid, #ffffff);
    color: var(--text-main);
    text-align: center;
  }
  .home-scan-input::placeholder {
    letter-spacing: normal;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-muted);
    opacity: 0.85;
  }
  [data-theme="dark"] .home-scan-input {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(168, 85, 247, 0.45);
    color: #f8fafc;
  }
  [data-theme="dark"] .home-scan-input::placeholder {
    color: #94a3b8;
  }
  .home-scan-input[aria-invalid="true"] {
    border-color: var(--danger-color) !important;
  }
  .home-scan-submit-btn {
    flex: 0 0 auto;
    min-height: 48px;
    min-width: 112px;
    padding: 0.7rem 1.15rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.98rem;
    justify-content: center;
    white-space: nowrap;
    touch-action: manipulation;
  }
  .home-scan-hint {
    margin: 0.55rem 0 0 0;
    font-size: 0.84rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.45;
  }
  .home-scan-hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(148, 163, 184, 0.16);
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 0.82rem;
    color: var(--text-main);
  }
  .home-scan-error {
    margin-top: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.38);
    color: #b91c1c;
    text-align: center;
  }
  [data-theme="dark"] .home-scan-error {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fecaca;
  }
  @container home-card (width < 430px) {
    .home-scan-input-group {
      flex-direction: column;
    }
    .home-scan-submit-btn {
      width: 100% !important;
      max-width: none !important;
    }
  }
  @media (max-width: 520px) {
    .home-scan-card {
      padding: 1.5rem 1.05rem 1.35rem;
    }
    .home-scan-input-group {
      flex-direction: column;
    }
    #home-page .home-scan-submit-btn {
      width: 100% !important;
      max-width: none !important;
    }
  }

  /* Notification Card Dark Mode & Failure State */
  [data-theme="dark"] .noti-premium-card h4 {
    filter: brightness(1.22);
  }
  .noti-retry-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #b91c1c;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  [data-theme="dark"] .noti-retry-box {
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
  }

  /* #teacher-dashboard Shell, Header, Stat Pills, Search & Action Bento */
  .td-noti-wrap {
    max-width: 1120px;
    margin: 0 auto 0.75rem auto;
    width: 100%;
  }
  .td-noti-wrap:empty {
    margin-bottom: 0;
  }
  .td-shell-card {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.35rem 1.5rem;
    container-type: inline-size;
    container-name: td-shell;
  }
  .td-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
  }
  .td-identity {
    flex: 1 1 280px;
    min-width: 0;
  }
  .td-welcome-title {
    margin: 0 0 0.45rem 0;
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .td-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    font-size: 0.9rem;
    color: var(--text-muted);
  }
  .td-role-badge {
    font-weight: 700;
    color: var(--primary-color);
  }
  [data-theme="dark"] .td-role-badge {
    color: #d8b4fe;
  }
  .td-scope-pill,
  .td-sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-main);
    border: 1px solid var(--border-color);
  }
  .td-scope-pill[hidden],
  .td-sync-pill[hidden] {
    display: none !important;
  }
  .td-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
  }
  .td-header-btn {
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    color: var(--text-main);
    border-color: rgba(148, 163, 184, 0.45);
  }
  .td-logout-btn {
    min-height: 44px;
    padding: 0.45rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 10px;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.55);
  }
  [data-theme="dark"] .td-logout-btn {
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.55);
  }

  /* Stat Banner WCAG Pills & Error Retry */
  .td-status-pill {
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.84rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .td-status-pill.is-open {
    background: #047857;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.28);
  }
  .td-status-pill.is-closed {
    background: rgba(100, 116, 139, 0.16);
    color: var(--text-main);
    border: 1px solid rgba(100, 116, 139, 0.3);
  }
  [data-theme="dark"] .td-status-pill.is-closed {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
  }
  .td-exam-state {
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
  }
  .td-exam-state.is-open {
    color: #047857;
  }
  [data-theme="dark"] .td-exam-state.is-open {
    color: #6ee7b7;
  }
  .td-exam-state.is-closed {
    color: var(--text-muted);
  }
  .td-retry-chip {
    appearance: none;
    border: 1px solid rgba(220, 38, 38, 0.45);
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border-radius: 8px;
    padding: 3px 9px;
    min-height: 30px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  [data-theme="dark"] .td-retry-chip {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.18);
  }

  /* Quick Search + Tabs Controls */
  .td-nav-controls {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.15rem;
  }
  .td-nav-controls .dash-category-rail {
    margin-bottom: 0;
  }
  @container td-shell (width >= 760px) {
    #teacher-dashboard .td-nav-controls {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
    }
    #teacher-dashboard .td-nav-controls > .dash-category-rail {
      flex: 1 1 auto;
      min-width: 0;
    }
    #teacher-dashboard .td-nav-controls > :not(.dash-category-rail) {
      flex: 0 1 300px;
      min-width: 210px;
      max-width: 340px;
    }
  }
  .td-empty-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
  }
  #teacher-dashboard .td-empty-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 8%, var(--card-bg));
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    width: auto;
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
  #teacher-dashboard .td-empty-chip:hover {
    background: color-mix(in srgb, var(--primary) 16%, var(--card-bg));
    border-color: var(--primary);
    transform: translateY(-1px);
  }
  #teacher-dashboard .td-empty-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    #teacher-dashboard .td-empty-chip:hover {
      transform: none;
    }
  }
  .td-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .td-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.95rem;
  }
  .td-search-input {
    min-height: 46px;
    font-size: max(1rem, 1rem);
    padding: 0.55rem 46px 0.55rem 40px;
    border-radius: 12px;
    border: 1.5px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
  }
  .td-search-clear-btn {
    position: absolute;
    right: 6px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .td-search-clear-btn[hidden] {
    display: none !important;
  }
  .td-search-clear-btn:hover {
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-main);
  }
  .td-search-empty {
    text-align: center;
    padding: 2.25rem 1rem;
    border: 1.5px dashed var(--border-color);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    background: rgba(148, 163, 184, 0.06);
  }
  .td-search-empty[hidden] {
    display: none !important;
  }
  .td-search-empty > i {
    font-size: 2.2rem;
    color: var(--primary-color);
    opacity: 0.7;
    margin-bottom: 0.65rem;
  }
  .td-search-empty-title {
    margin: 0 0 0.85rem 0;
    font-weight: 700;
    color: var(--text-main);
  }

  /* Dashboard Section Headings & Responsive Bento Grid */
  .td-sec-heading {
    color: var(--text-main);
    font-size: 1.04rem;
    font-weight: 800;
    margin: 0 0 0.85rem 0;
    border-bottom: 1.5px dashed var(--border-color);
    padding-bottom: 0.58rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .td-sec-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--soft-shadow);
    flex-shrink: 0;
    font-size: 1.05rem;
  }
  .td-sec-icon.is-purple { background: rgba(139, 92, 246, 0.14); color: #6d28d9; }
  .td-sec-icon.is-green { background: rgba(16, 185, 129, 0.14); color: #047857; }
  .td-sec-icon.is-indigo { background: rgba(99, 102, 241, 0.14); color: #4338ca; }
  [data-theme="dark"] .td-sec-icon.is-purple { color: #c4b5fd; }
  [data-theme="dark"] .td-sec-icon.is-green { color: #6ee7b7; }
  [data-theme="dark"] .td-sec-icon.is-indigo { color: #a5b4fc; }

  #teacher-dashboard .td-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  #teacher-dashboard #dash-section-stats .td-action-grid {
    margin-bottom: 0.35rem;
  }
  #teacher-dashboard .td-action-grid:not(.is-searching) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  #teacher-dashboard .td-action-grid.is-searching {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  }
  #teacher-dashboard .td-action-grid .action-card {
    padding: 0.92rem 0.72rem;
    min-height: 112px;
    border-radius: 14px;
    gap: 0.35rem;
    overflow: clip;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #teacher-dashboard .td-action-grid .action-card:hover {
      transform: none;
    }
  }
  @container td-shell (width >= 560px) and (width < 840px) {
    #teacher-dashboard .td-action-grid:not(.is-searching) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    #teacher-dashboard .td-action-grid:not(.is-searching) > .action-card:nth-child(-n+3) {
      grid-column: span 2;
    }
    #teacher-dashboard .td-action-grid:not(.is-searching) > .action-card:nth-child(4),
    #teacher-dashboard .td-action-grid:not(.is-searching) > .action-card:nth-child(5) {
      grid-column: span 3;
    }
  }
  @container td-shell (width < 560px) {
    #teacher-dashboard .td-action-grid:not(.is-searching) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem;
    }
    #teacher-dashboard .td-action-grid.is-searching {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem;
    }
    #teacher-dashboard .td-action-grid .action-card {
      padding: 0.78rem 0.62rem;
      min-height: 94px;
    }
    #teacher-dashboard .td-action-grid:not(.is-searching) > .action-card:nth-child(5):last-child {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      min-height: 62px;
      padding: 0.72rem 0.95rem;
      gap: 0.85rem;
    }
  }
  @container td-shell (width < 250px) {
    #teacher-dashboard .td-action-grid:not(.is-searching),
    #teacher-dashboard .td-action-grid.is-searching {
      grid-template-columns: minmax(0, 1fr);
    }
    #teacher-dashboard .td-action-grid:not(.is-searching) > .action-card {
      grid-column: auto;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      min-height: 58px;
      padding: 0.68rem 0.85rem;
      gap: 0.75rem;
    }
  }
  @media (max-width: 600px) {
    #teacher-dashboard .td-shell-card {
      padding: 1rem 0.9rem;
    }
  }
  html[data-perf="eco"] #teacher-dashboard .td-action-grid .action-card,
  html[data-perf="eco"] #teacher-dashboard .td-empty-chip {
    transition: none !important;
  }
  html[data-perf="eco"] #teacher-dashboard .td-action-grid .action-card:hover,
  html[data-perf="eco"] #teacher-dashboard .td-empty-chip:hover {
    transform: none !important;
  }
  html[data-perf="eco"] #teacher-dashboard .td-action-grid .action-card::after,
  html[data-perf="eco"] #teacher-dashboard .action-card::after {
    display: none !important;
    animation: none !important;
  }
  @media (forced-colors: active) {
    #teacher-dashboard .td-shell-card,
    #teacher-dashboard .admin-control-hub,
    #teacher-dashboard .admin-live-chip,
    #teacher-dashboard .td-action-grid .action-card,
    #teacher-dashboard .td-empty-chip {
      border: 1px solid ButtonText;
    }
    #teacher-dashboard .td-empty-chip:focus-visible,
    #teacher-dashboard .td-action-grid .action-card:focus-visible {
      outline: 2px solid Highlight;
    }
  }

  .td-section-deferred {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
  }
  @supports not (content-visibility: auto) {
    .td-section-deferred {
      contain: layout style paint;
    }
  }

  /* High-Contrast Hero Gradient Action Cards (Routine) */
  .td-hero-card {
    color: #ffffff;
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }
  .td-hero-card.is-violet {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    box-shadow: 0 8px 20px rgba(109, 40, 217, 0.3);
  }
  .td-hero-card.is-emerald {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 8px 20px rgba(4, 120, 87, 0.3);
  }
  .td-hero-card.is-rose {
    background: linear-gradient(135deg, #db2777, #9d174d);
    box-shadow: 0 8px 20px rgba(190, 24, 93, 0.3);
  }
  .td-hero-card.is-blue {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.3);
  }
  .td-hero-card.is-amber {
    background: linear-gradient(135deg, #b45309, #92400e);
    box-shadow: 0 8px 20px rgba(146, 64, 14, 0.3);
  }
  .td-hero-icon-circle {
    background: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.25rem;
    flex-shrink: 0;
  }
  .td-hero-icon-circle i {
    font-size: 2rem;
  }

  /* Tile Cards (Manage & Stats) with WCAG Light/Dark Icons */
  .td-tile-card {
    border-bottom-width: 4px;
    border-bottom-style: solid;
  }
  .td-tile-card.green { border-bottom-color: #059669; }
  .td-tile-card.orange { border-bottom-color: #d97706; }
  .td-tile-card.pink { border-bottom-color: #db2777; }
  .td-tile-card.purple { border-bottom-color: #7c3aed; }
  .td-tile-card.blue { border-bottom-color: #2563eb; }
  .td-tile-card.red { border-bottom-color: #dc2626; }

  .td-tile-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.2rem;
    flex-shrink: 0;
  }
  .td-tile-icon i {
    font-size: 1.55rem;
  }
  .td-tile-icon.is-green { background: rgba(16, 185, 129, 0.15); color: #047857; }
  .td-tile-icon.is-orange { background: rgba(245, 158, 11, 0.15); color: #b45309; }
  .td-tile-icon.is-pink { background: rgba(236, 72, 153, 0.15); color: #be185d; }
  .td-tile-icon.is-purple { background: rgba(139, 92, 246, 0.15); color: #6d28d9; }
  .td-tile-icon.is-blue { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
  .td-tile-icon.is-red { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }
  [data-theme="dark"] .td-tile-icon.is-green { color: #6ee7b7; }
  [data-theme="dark"] .td-tile-icon.is-orange { color: #fcd34d; }
  [data-theme="dark"] .td-tile-icon.is-pink { color: #f9a8d4; }
  [data-theme="dark"] .td-tile-icon.is-purple { color: #c4b5fd; }
  [data-theme="dark"] .td-tile-icon.is-blue { color: #93c5fd; }
  [data-theme="dark"] .td-tile-icon.is-red { color: #fca5a5; }

  @container td-shell (width < 560px) {
    .td-header {
      flex-direction: column;
      align-items: stretch;
    }
    .td-identity {
      flex: 0 0 auto;
    }
    .td-header-actions {
      justify-content: flex-end;
    }
    .td-action-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.72rem;
    }
    .action-card {
      padding: 1.05rem 0.65rem;
      min-height: 118px;
      gap: 0.55rem;
    }
    .action-card > .action-card-text,
    .action-card span {
      font-size: 0.94rem;
    }
    .action-card small {
      font-size: 0.76rem;
    }
    .td-hero-icon-circle {
      width: 48px;
      height: 48px;
    }
    .td-hero-icon-circle i {
      font-size: 1.55rem;
    }
    .td-tile-icon {
      width: 44px;
      height: 44px;
    }
    .td-tile-icon i {
      font-size: 1.3rem;
    }
  }
  @container td-shell (width < 250px) {
    .td-action-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 600px) {
    .td-shell-card {
      padding: 1.15rem 0.95rem;
    }
    .td-identity {
      flex: 0 0 auto;
    }
    .td-action-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.72rem;
    }
    .action-card {
      padding: 1.05rem 0.65rem;
      min-height: 118px;
    }
    .action-card > .action-card-text,
    .action-card span {
      font-size: 0.94rem;
    }
    .action-card small {
      font-size: 0.76rem;
    }
  }
  @media (max-width: 280px) {
    .td-action-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Eco & Reduced-Motion Overrides for Home & Teacher Dashboard Shell */
  html[data-perf="eco"] #mobile-bottom-nav {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="dark"][data-perf="eco"] #mobile-bottom-nav {
    background: #0f172a !important;
  }
  html[data-perf="eco"] .behavior-modal {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="dark"][data-perf="eco"] .behavior-modal {
    background: #1e1b4b !important;
  }
  html[data-perf="eco"] :where(
    .home-scan-card, .home-scan-submit-btn,
    .td-shell-card, .admin-action-btn, .admin-hero-btn, .dash-cat-tab,
    .dash-category-section, .td-hero-card, .td-tile-card, .m-nav-item, .m-nav-hero-btn, .behavior-fab
  ) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .dash-category-section.cat-fade-in,
    .behavior-modal.show {
      animation: none !important;
    }
  }

  /* ==============================================================
     🏆 School Leaderboard — Modern Bento UI, Responsive Sortable Table & A11y
     ============================================================== */
  @property --sl-fade-start {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }
  @property --sl-fade-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  #school-leaderboard-page .sl-shell-card {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 4px solid #f59e0b;
    container: sl-shell / inline-size;
    overflow-wrap: anywhere;
  }
  body.has-mobile-nav #school-leaderboard-page .sl-shell-card {
    padding-bottom: max(5.5rem, calc(5.5rem + env(safe-area-inset-bottom, 0px)));
  }

  .sl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 2px dashed rgba(245, 158, 11, 0.35);
    padding-bottom: 1.1rem;
    margin-bottom: 1.25rem;
  }
  .sl-header-main {
    min-width: 0;
    flex: 1 1 280px;
  }
  .sl-title {
    margin: 0;
    font-size: clamp(1.28rem, 1.05rem + 1vw, 1.65rem);
    color: #92400e;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    line-height: 1.25;
  }
  [data-theme="dark"] .sl-title {
    color: #fcd34d;
  }
  .sl-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.16);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.32);
    flex-shrink: 0;
  }
  [data-theme="dark"] .sl-title-icon {
    background: rgba(251, 191, 36, 0.18);
    color: #fcd34d;
  }
  .sl-sem-pill,
  .sl-sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
  }
  .sl-sem-pill {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.35);
  }
  [data-theme="dark"] .sl-sem-pill {
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
  }
  .sl-sync-pill {
    background: rgba(2, 132, 199, 0.12);
    color: #0369a1;
    border: 1px solid rgba(2, 132, 199, 0.28);
    margin-left: 0.4rem;
  }
  [data-theme="dark"] .sl-sync-pill {
    background: rgba(56, 189, 248, 0.18);
    color: #bae6fd;
  }
  .sl-subtitle {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    font-size: 0.94rem;
  }
  .sl-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
  }
  .sl-header-actions .btn,
  .sl-btn-reset,
  .sl-btn-export,
  .sl-btn-back,
  .sl-btn-sync,
  .sl-flame-toggle-btn,
  .sl-chip-btn,
  .sl-drill-btn,
  .sl-btn-copy-line,
  .sl-dialog-close {
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
  }
  .sl-btn-sync {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.05rem;
    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  }
  .sl-btn-sync:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(67, 56, 202, 0.36);
  }
  .sl-btn-export {
    border-color: rgba(16, 185, 129, 0.55);
    color: #047857;
  }
  [data-theme="dark"] .sl-btn-export {
    color: #6ee7b7;
  }
  .sl-btn-back {
    border-color: rgba(217, 119, 6, 0.55);
    color: #92400e;
  }
  [data-theme="dark"] .sl-btn-back {
    color: #fcd34d;
  }

  .sl-filter-panel {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    padding: 1.15rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
  [data-theme="dark"] .sl-filter-panel {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(251, 191, 36, 0.28);
  }
  .sl-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr));
    gap: 0.85rem;
  }
  .sl-filter-field {
    margin: 0;
    min-width: 0;
  }
  .sl-filter-label {
    display: block;
    color: #92400e;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
  }
  [data-theme="dark"] .sl-filter-label {
    color: #fde68a;
  }
  .sl-filter-label-accent {
    color: #78350f;
  }
  [data-theme="dark"] .sl-filter-label-accent {
    color: #fcd34d;
  }
  .sl-filter-control,
  .sl-search-input,
  .sl-sort-picker {
    font-size: max(1rem, 16px) !important;
    min-block-size: 44px;
    border-color: rgba(217, 119, 6, 0.45);
    cursor: pointer;
  }
  .sl-subject-control {
    border-width: 2px;
    border-color: #d97706;
    font-weight: 600;
  }
  [data-theme="dark"] .sl-subject-control {
    border-color: #fbbf24;
  }

  .sl-search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
  }
  .sl-search-input-wrap {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
  }
  .sl-search-icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
  }
  .sl-search-input {
    width: 100%;
    padding-inline: 2.35rem 2.75rem !important;
    cursor: text !important;
  }
  .sl-search-clear-btn {
    position: absolute;
    inset-inline-end: 0.25rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    min-inline-size: 40px;
    min-block-size: 40px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .sl-search-clear-btn[hidden] {
    display: none;
  }
  .sl-btn-reset {
    flex: 0 0 auto;
    padding: 0.45rem 0.95rem;
    border-color: var(--border-color);
    color: var(--text-main);
  }

  /* Tablist with horizontal scroll fade mask & active underline indicator */
  .sl-tablist {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.35rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: inline proximity;
    scroll-padding-inline: 2rem;
    scrollbar-width: none;
  }
  .sl-tablist::-webkit-scrollbar {
    display: none;
  }
  @supports (animation-timeline: scroll(self inline)) {
    .sl-tablist {
      --sl-fade-size: 2rem;
      mask:
        linear-gradient(black, black) no-clip subtract,
        linear-gradient(to right, black, transparent) 0 0 / var(--sl-fade-start) 100% no-repeat no-clip,
        linear-gradient(to right, transparent, black) 100% 0 / var(--sl-fade-end) 100% no-repeat no-clip;
      animation: slFadeStartReveal linear both, slFadeEndHide linear both;
      animation-timeline: scroll(self inline);
      animation-range: 0 var(--sl-fade-size), calc(100% - var(--sl-fade-size)) 100%;
    }
    @keyframes slFadeStartReveal {
      to { --sl-fade-start: var(--sl-fade-size); }
    }
    @keyframes slFadeEndHide {
      from { --sl-fade-end: var(--sl-fade-size); }
    }
  }
  .sl-tab-btn {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-block-size: 44px;
    padding: 0.55rem 1.05rem;
    border: none;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease;
  }
  .sl-tab-btn:hover {
    color: var(--text-main);
    background: rgba(148, 163, 184, 0.12);
  }
  .sl-tab-btn[aria-selected="true"] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.1);
  }
  [data-theme="dark"] .sl-tab-btn[aria-selected="true"] {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.12);
  }
  #tab-sl-streak[aria-selected="true"] {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.1);
  }
  [data-theme="dark"] #tab-sl-streak[aria-selected="true"] {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.12);
  }
  .sl-tab-btn[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    border-block-end: 3px solid currentColor;
  }

  .sl-tabpanels-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .sl-tabpanel {
    grid-area: 1 / 1;
    min-width: 0;
  }
  .sl-tabpanel-inner {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    min-width: 0;
  }

  /* KPI Grid */
  .sl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: 0.95rem;
  }
  .sl-kpi-card {
    padding: 1.15rem 1rem;
    border-radius: 16px;
    text-align: center;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--soft-shadow);
  }
  .sl-kpi-card.is-blue { border-color: rgba(29, 78, 216, 0.32); }
  .sl-kpi-card.is-green { border-color: rgba(4, 120, 87, 0.32); }
  .sl-kpi-card.is-pink { border-color: rgba(190, 24, 93, 0.32); }
  .sl-kpi-card.is-amber { border-color: rgba(180, 83, 9, 0.32); }
  .sl-kpi-val {
    font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.08;
  }
  .sl-kpi-val.is-blue { color: #1d4ed8; }
  .sl-kpi-val.is-green { color: #047857; }
  .sl-kpi-val.is-pink { color: #be185d; }
  .sl-kpi-val.is-amber { color: #b45309; }
  [data-theme="dark"] .sl-kpi-val.is-blue { color: #93c5fd; }
  [data-theme="dark"] .sl-kpi-val.is-green { color: #6ee7b7; }
  [data-theme="dark"] .sl-kpi-val.is-pink { color: #f9a8d4; }
  [data-theme="dark"] .sl-kpi-val.is-amber { color: #fcd34d; }
  .sl-kpi-label {
    color: var(--text-main);
    font-size: 0.96rem;
    font-weight: 700;
    margin-top: 0.45rem;
  }
  .sl-kpi-sub {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.2rem;
  }

  /* Top-3 Podium */
  .sl-podium-shell {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.05rem;
    box-shadow: var(--soft-shadow);
  }
  .sl-podium-shell[hidden] {
    display: none;
  }
  .sl-section-heading {
    margin: 0 0 0.85rem;
    font-size: 1.08rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sl-accent-amber { color: #d97706; }
  .sl-accent-red { color: #dc2626; }
  [data-theme="dark"] .sl-accent-amber { color: #fbbf24; }
  [data-theme="dark"] .sl-accent-red { color: #fca5a5; }
  .sl-podium-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0;
  }
  .sl-podium-card {
    width: 100%;
    text-align: left;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: 'Kanit', sans-serif;
    min-block-size: 68px;
    transition: transform 0.16s ease, border-color 0.16s ease;
  }
  .sl-podium-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
  }
  .sl-podium-rank {
    --sl-badge-bg: #f59e0b;
    --sl-badge-fg: #0f172a;
    background: var(--sl-badge-bg);
    color: var(--sl-badge-fg);
    min-inline-size: 38px;
    min-block-size: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.98rem;
    flex-shrink: 0;
  }
  .sl-podium-rank.is-r1 { --sl-badge-bg: #fbbf24; --sl-badge-fg: #0f172a; }
  .sl-podium-rank.is-r2 { --sl-badge-bg: #cbd5e1; --sl-badge-fg: #0f172a; }
  .sl-podium-rank.is-r3 { --sl-badge-bg: #b45309; --sl-badge-fg: #ffffff; }
  @supports (color: contrast-color(#000)) {
    .sl-podium-rank {
      color: contrast-color(var(--sl-badge-bg));
    }
  }
  .sl-podium-info {
    min-width: 0;
    flex: 1;
  }
  .sl-podium-class {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
  }
  .sl-podium-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
  }
  .sl-podium-pct {
    font-weight: 800;
    font-size: 1.3rem;
    color: #047857;
    flex-shrink: 0;
  }
  [data-theme="dark"] .sl-podium-pct {
    color: #6ee7b7;
  }

  /* Chart Card */
  .sl-chart-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.15rem;
    box-shadow: var(--soft-shadow);
  }
  .sl-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
  }
  .sl-chart-heading {
    margin: 0;
  }
  .sl-chart-mode-group,
  .sl-dialog-filter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .sl-chip-btn {
    border: 1px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-family: 'Kanit', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
  }
  .sl-chip-btn[aria-pressed="true"] {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
  }
  [data-theme="dark"] .sl-chip-btn[aria-pressed="true"] {
    background: #7c3aed;
    border-color: #a855f7;
  }
  .sl-chart-figure {
    margin: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  .sl-chart-wrap {
    position: relative;
    height: 320px;
    width: 100%;
    max-width: 100%;
    min-inline-size: 0;
    overflow: hidden;
  }
  .sl-chart-wrap canvas {
    max-inline-size: 100%;
    display: block;
  }
  .sl-chart-summary {
    margin-top: 0.75rem;
    font-size: 0.86rem;
    color: var(--text-muted);
    text-align: center;
  }

  /* Table Toolbar & Sortable Responsive Table */
  .sl-table-toolbar,
  .sl-streak-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .sl-table-toolbar .sl-section-heading,
  .sl-streak-toolbar .sl-section-heading {
    margin: 0;
  }
  .sl-sort-picker-wrap,
  .sl-streak-limit-wrap,
  .sl-streak-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-inline-size: 100%;
    min-inline-size: 0;
  }
  .sl-sort-picker-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
  }
  .sl-sort-picker {
    width: auto;
    max-width: 100%;
    min-inline-size: 0;
  }
  .sl-tablist {
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .sl-table-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
  }
  .sl-table-wrap {
    overflow: auto;
    max-inline-size: 100%;
    max-block-size: min(560px, 75dvh);
    container: sltable / inline-size;
  }
  .sl-table {
    width: 100%;
    min-inline-size: 700px;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 0.94rem;
    --sl-col-1: "อันดับ";
    --sl-col-3: "อัตราความสำเร็จ";
    --sl-col-4: "ส่งตรงเวลา";
    --sl-col-5: "งานค้าง";
    --sl-col-6: "ภาระงาน";
    --sl-col-7: "เจาะลึก";
  }
  .sl-table-caption {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border-color);
  }
  .sl-table thead {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
  }
  .sl-table thead th {
    background: var(--surface-solid-alt);
    color: var(--text-main);
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
    white-space: nowrap;
  }
  .sl-table thead th.sl-th-plain {
    padding: 0.85rem 0.9rem;
    text-align: center;
  }
  .sl-table thead th:has(> button) {
    padding: 0;
  }
  .sl-th-sort-btn {
    width: 100%;
    min-block-size: 44px;
    padding: 0.75rem 0.85rem;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-weight: 700;
    font-size: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    text-align: left;
  }
  .sl-th-sort-btn:hover {
    background: rgba(59, 130, 246, 0.08);
  }
  .sl-sort-ind::after {
    content: "↕";
    opacity: 0.42;
    font-size: 0.85em;
  }
  th[aria-sort="ascending"] .sl-sort-ind::after {
    content: "▲";
    opacity: 1;
    color: #0369a1;
  }
  th[aria-sort="descending"] .sl-sort-ind::after {
    content: "▼";
    opacity: 1;
    color: #0369a1;
  }
  [data-theme="dark"] th[aria-sort] .sl-sort-ind::after {
    color: #93c5fd;
  }
  .sl-table tbody tr {
    background: var(--surface-solid);
    transition: background-color 0.15s ease;
    view-transition-name: match-element;
    content-visibility: auto;
    contain-intrinsic-size: auto 64px;
  }
  .sl-table.sl-no-vt tbody tr {
    view-transition-name: none;
  }
  @supports not (content-visibility: auto) {
    .sl-table tbody tr,
    .sl-streak-card {
      contain: layout style paint;
    }
  }
  .sl-table tbody tr:nth-child(even) {
    background: var(--surface-solid-alt);
  }
  .sl-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.09);
  }
  .sl-table tbody th,
  .sl-table tbody td {
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
  }
  .sl-table tbody th.sl-row-header {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: inherit;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    white-space: nowrap;
  }
  .sl-rank-cell {
    text-align: center;
    white-space: nowrap;
  }
  .sl-rank-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: rgba(100, 116, 139, 0.16);
    color: var(--text-main);
  }
  .sl-rank-trophy { font-size: 1.45rem; }
  .sl-rank-trophy.is-gold { color: #d97706; }
  .sl-rank-trophy.is-silver { color: #64748b; }
  .sl-rank-trophy.is-bronze { color: #b45309; }
  [data-theme="dark"] .sl-rank-trophy.is-gold { color: #fbbf24; }
  [data-theme="dark"] .sl-rank-trophy.is-silver { color: #cbd5e1; }
  [data-theme="dark"] .sl-rank-trophy.is-bronze { color: #fb923c; }

  .sl-progress-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }
  .sl-progress-track {
    flex: 1 1 110px;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
    border: 1px solid var(--border-color);
    overflow: hidden;
  }
  .sl-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  }
  .sl-progress-fill.is-top { background: linear-gradient(90deg, #d97706, #fbbf24); }
  .sl-progress-fill.is-low { background: linear-gradient(90deg, #dc2626, #ef4444); }
  .sl-progress-pct {
    font-weight: 800;
    color: var(--text-main);
    min-width: 46px;
    text-align: right;
  }
  .sl-metric-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
  }
  .sl-pill-assign,
  .sl-pill-missing {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.68rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .sl-pill-assign {
    background: rgba(109, 40, 217, 0.12);
    color: #6d28d9;
    border: 1px solid rgba(109, 40, 217, 0.25);
  }
  [data-theme="dark"] .sl-pill-assign {
    background: rgba(168, 85, 247, 0.22);
    color: #ddd6fe;
  }
  .sl-pill-missing.has-missing {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.28);
  }
  [data-theme="dark"] .sl-pill-missing.has-missing {
    background: rgba(248, 113, 113, 0.2);
    color: #fecaca;
  }
  .sl-pill-missing.is-zero {
    background: rgba(4, 120, 87, 0.12);
    color: #047857;
    border: 1px solid rgba(4, 120, 87, 0.25);
  }
  [data-theme="dark"] .sl-pill-missing.is-zero {
    background: rgba(52, 211, 153, 0.18);
    color: #a7f3d0;
  }
  .sl-drill-btn {
    border: 1px solid rgba(2, 132, 199, 0.45);
    background: var(--surface-solid);
    color: #0369a1;
    border-radius: 10px;
    padding: 0.4rem 0.78rem;
    font-family: 'Kanit', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  [data-theme="dark"] .sl-drill-btn {
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.4);
  }

  /* Responsive Container Stacked Table for Mobile */
  @container sltable (width < 640px) {
    .sl-table-wrap {
      max-block-size: none;
      overflow-x: visible;
    }
    .sl-table,
    .sl-table caption,
    .sl-table thead,
    .sl-table tbody,
    .sl-table tr,
    .sl-table th,
    .sl-table td {
      display: block;
      min-inline-size: 0;
    }
    .sl-table .sl-table-caption {
      width: 100%;
      box-sizing: border-box;
    }
    .sl-table thead {
      display: none;
    }
    .sl-table tbody tr {
      margin: 0.85rem;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      overflow: hidden;
      background: var(--surface-solid) !important;
      box-shadow: var(--soft-shadow);
    }
    .sl-table tbody th.sl-row-header {
      position: sticky;
      inset-block-start: 0;
      z-index: 2;
      background: var(--surface-solid-alt);
      border-bottom: 1px solid var(--border-color);
      padding: 0.78rem 0.95rem;
      font-size: 1.08rem;
    }
    .sl-table tbody td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      padding: 0.65rem 0.95rem;
      text-align: right;
    }
    .sl-table tbody td::before {
      font-weight: 600;
      color: var(--text-muted);
      font-size: 0.86rem;
      text-align: left;
      flex: 0 0 auto;
    }
    .sl-table tbody td:nth-child(1)::before { content: var(--sl-col-1); }
    .sl-table tbody td:nth-child(3)::before { content: var(--sl-col-3); }
    .sl-table tbody td:nth-child(4)::before { content: var(--sl-col-4); }
    .sl-table tbody td:nth-child(5)::before { content: var(--sl-col-5); }
    .sl-table tbody td:nth-child(6)::before { content: var(--sl-col-6); }
    .sl-table tbody td:nth-child(7)::before { content: var(--sl-col-7); }
    .sl-progress-cell {
      flex: 1 1 auto;
      justify-content: flex-end;
    }
    .sl-drill-btn {
      width: auto;
    }
  }

  /* Top Streak Cards Grid */
  .sl-streak-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
    gap: 1rem;
  }
  .sl-streak-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--soft-shadow);
    content-visibility: auto;
    contain-intrinsic-size: auto 210px;
  }
  .sl-streak-card.is-rank-1 { border-color: rgba(220, 38, 38, 0.45); }
  .sl-streak-card.is-rank-2 { border-color: rgba(124, 58, 237, 0.45); }
  .sl-streak-card.is-rank-3 { border-color: rgba(217, 119, 6, 0.45); }
  .sl-streak-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
  }
  .sl-streak-badge {
    --sl-badge-bg: #b91c1c;
    --sl-badge-fg: #ffffff;
    background: var(--sl-badge-bg);
    color: var(--sl-badge-fg);
    padding: 0.25rem 0.65rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .sl-streak-badge.is-rank-2 { --sl-badge-bg: #6d28d9; --sl-badge-fg: #ffffff; }
  .sl-streak-badge.is-rank-3 { --sl-badge-bg: #b45309; --sl-badge-fg: #ffffff; }
  @supports (color: contrast-color(#000)) {
    .sl-streak-badge {
      color: contrast-color(var(--sl-badge-bg));
    }
  }
  .sl-streak-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: #b91c1c;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  [data-theme="dark"] .sl-streak-num { color: #fca5a5; }
  .sl-streak-name {
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.3rem;
  }
  .sl-streak-ontime {
    font-size: 0.88rem;
    color: var(--text-muted);
  }
  .sl-streak-tie {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border-color);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
  }
  .sl-streak-tie-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .sl-flame-toggle-btn {
    border-color: rgba(220, 38, 38, 0.45);
    color: #b91c1c;
  }
  [data-theme="dark"] .sl-flame-toggle-btn {
    color: #fca5a5;
  }

  /* Native Class Drill-Down <dialog> */
  .sl-class-dialog {
    margin: auto;
    max-width: min(94vw, 680px);
    width: 100%;
    max-height: 88dvh;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 0;
    background: var(--surface-solid);
    color: var(--text-main);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.42);
    overflow: hidden;
  }
  .sl-class-dialog::backdrop {
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(4px);
  }
  .sl-dialog-box {
    display: flex;
    flex-direction: column;
    max-height: 88dvh;
  }
  .sl-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    background: var(--surface-solid-alt);
    border-bottom: 1px solid var(--border-color);
  }
  .sl-dialog-title {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-main);
  }
  .sl-dialog-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.86rem;
    color: var(--text-muted);
  }
  .sl-dialog-close {
    min-inline-size: 44px;
    min-block-size: 44px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-main);
    cursor: pointer;
  }
  .sl-dialog-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
    padding: 0.9rem 1.2rem 0;
  }
  .sl-dialog-kpi {
    padding: 0.65rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    text-align: center;
  }
  .sl-dialog-kpi b {
    display: block;
    font-size: 1.15rem;
    color: var(--text-main);
  }
  .sl-dialog-kpi span {
    font-size: 0.78rem;
    color: var(--text-muted);
  }
  .sl-dialog-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--border-color);
  }
  .sl-dialog-body {
    padding: 0.9rem 1.2rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .sl-dialog-stu-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.72rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
  }
  .sl-dialog-stu-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
  }
  .sl-dialog-stu-right {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
  }

  /* Eco & Reduced-Motion Overrides */
  html[data-perf="eco"] .sl-tablist {
    mask: none;
    animation: none !important;
  }
  html[data-perf="eco"] :where(
    .sl-shell-card, .sl-btn-sync, .sl-tab-btn, .sl-podium-card, .sl-table tbody tr, .sl-streak-card
  ) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    view-transition-name: none !important;
  }
  html[data-perf="eco"] .sl-class-dialog::backdrop {
    backdrop-filter: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .sl-table tbody tr {
      view-transition-name: none !important;
    }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }

  /* Forced Colors Mode Fallbacks */
  @media (forced-colors: active) {
    .sl-tab-btn[aria-selected="true"]::after {
      border-block-end: 3px solid Highlight;
    }
    .sl-kpi-card,
    .sl-podium-card,
    .sl-streak-card,
    .sl-table-card,
    .sl-progress-track,
    .sl-class-dialog {
      border: 1px solid CanvasText;
    }
    .sl-progress-fill {
      background: Highlight;
    }
    .sl-chip-btn[aria-pressed="true"],
    .sl-podium-rank,
    .sl-streak-badge {
      background: Highlight;
      color: HighlightText;
      border: 1px solid CanvasText;
    }
    .sl-th-sort-btn:focus-visible,
    .sl-tab-btn:focus-visible,
    .sl-drill-btn:focus-visible,
    .sl-podium-card:focus-visible {
      outline: 3px solid Highlight;
      outline-offset: 2px;
    }
  }
  /* ==========================================================================
     🎓 STUDENT DASHBOARD V7: SECURITY, PERFORMANCE, A11Y & MOBILE-FIRST
     ========================================================================== */
  .sd-notification-area {
    max-width: 100%;
    margin-bottom: 1rem;
  }
  .sd-profile-card {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 1.4rem;
    display: flex;
    align-items: flex-start;
    gap: 1.35rem;
    box-shadow: var(--soft-shadow);
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    container-type: inline-size;
  }
  .sd-profile-body {
    flex: 1;
    min-width: 210px;
  }
  .sd-profile-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .sd-student-name {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-main);
    outline: none;
  }
  .sd-gamer-title {
    color: #8b5cf6;
    font-weight: 700;
    font-size: 0.92rem;
    margin-top: 4px;
    display: inline-block;
    padding: 3px 10px;
    background: rgba(139, 92, 246, 0.12);
    border-radius: 12px;
  }
  .sd-class-passion {
    margin-top: 8px;
  }
  .sd-class-chip {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.12);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: inline-block;
  }
  .sd-class-chip b { color: var(--text-main); }
  .sd-chip-sep { margin: 0 4px; opacity: 0.4; }
  .sd-profile-actions {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .sd-logout-btn {
    border-color: #ef4444;
    color: #ef4444;
    padding: 0.5rem 1rem;
    min-height: 44px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    touch-action: manipulation;
  }
  .sd-logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
  }
  .sd-xp-text {
    font-weight: 900;
    color: #8b5cf6;
    font-size: 0.9rem;
  }
  .sd-xp-left-line {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
  }
  .sd-xp-track {
    height: 12px;
    background: rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    width: 100%;
    margin-top: 6px;
  }
  .sd-xp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8b5cf6, #d946ef);
    border-radius: 10px;
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.45);
  }

  .sd-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 0.95rem;
    margin-bottom: 1.4rem;
  }
  .sd-stat-card {
    padding: 1.35rem 1rem;
    border-radius: 14px;
    text-align: center;
    border: 1px solid var(--border-color);
  }
  .sd-stat-card.is-emerald { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.24); }
  .sd-stat-card.is-amber { background: rgba(245, 158, 11, 0.06); border-color: rgba(245, 158, 11, 0.24); }
  .sd-stat-card.is-indigo { background: rgba(79, 70, 229, 0.06); border-color: rgba(79, 70, 229, 0.24); }
  .sd-stat-card.is-pink { background: rgba(236, 72, 153, 0.06); border-color: rgba(236, 72, 153, 0.24); }
  .sd-stat-value {
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
  }
  .sd-stat-value.is-emerald { color: #059669; }
  .sd-stat-value.is-amber { color: #d97706; }
  .sd-stat-value.is-indigo { color: var(--primary-color); }
  .sd-stat-value.is-pink { color: #db2777; }
  html[data-theme="dark"] .sd-stat-value.is-emerald { color: #34d399; }
  html[data-theme="dark"] .sd-stat-value.is-amber { color: #fbbf24; }
  html[data-theme="dark"] .sd-stat-value.is-pink { color: #f472b6; }
  .sd-stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.45rem;
  }
  .sd-stat-sub { font-weight: 700; color: var(--text-main); }
  .sd-count-pill {
    margin-top: 4px;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-block;
  }
  .sd-count-pill.is-warn { color: #dc2626; background: rgba(239, 68, 68, 0.14); }
  .sd-count-pill.is-ok { color: #059669; background: rgba(16, 185, 129, 0.14); }
  html[data-theme="dark"] .sd-count-pill.is-warn { color: #f87171; }
  html[data-theme="dark"] .sd-count-pill.is-ok { color: #34d399; }

  .sd-freeze-pill {
    margin-top: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #0369a1;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #7dd3fc;
    box-shadow: 0 3px 8px rgba(14, 165, 233, 0.18);
    display: inline-block;
  }

  .student-tab-btn {
    position: relative;
    min-height: 44px;
  }
  .student-tab-btn[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 18%;
    bottom: 2px;
    border-block-end: 2.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 2px;
  }

  /* AI Cheer Upgrade */
  .sd-cheer-icon { font-size: 2.3rem; flex-shrink: 0; }
  .sd-cheer-body { flex: 1; min-width: 0; }
  .sd-cheer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .sd-cheer-title { font-size: 1.12rem; color: var(--text-main); }
  .sd-cheer-msg { font-size: 0.94rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.5; }
  .sd-locked-card {
    background: rgba(148, 163, 184, 0.08);
    border: 1px dashed var(--border-color);
    opacity: 0.85;
  }

  /* Rank Roadmap & XP Breakdown */
  .sd-rank-roadmap {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.35rem;
    box-shadow: var(--soft-shadow);
  }
  .sd-rank-roadmap-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.8rem;
  }
  .sd-rank-roadmap-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
  .sd-rank-roadmap-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sd-rank-lv-pill {
    font-size: 0.78rem;
    background: rgba(139, 92, 246, 0.14);
    color: #7c3aed;
    padding: 2px 8px;
    border-radius: 999px;
  }
  html[data-theme="dark"] .sd-rank-lv-pill { color: #c4b5fd; }
  .sd-rank-xp-total {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 700;
  }
  .sd-rank-next-note {
    font-size: 0.82rem;
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.08);
    padding: 4px 10px;
    border-radius: 10px;
  }
  .sd-xp-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0.85rem;
  }
  .sd-xp-chip {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border-color);
  }
  .sd-xp-chip.is-emerald { background: rgba(16, 185, 129, 0.1); color: #059669; border-color: rgba(16, 185, 129, 0.3); }
  .sd-xp-chip.is-amber { background: rgba(245, 158, 11, 0.1); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
  .sd-xp-chip.is-blue { background: rgba(59, 130, 246, 0.1); color: #1d4ed8; border-color: rgba(59, 130, 246, 0.3); }
  html[data-theme="dark"] .sd-xp-chip.is-emerald { color: #34d399; }
  html[data-theme="dark"] .sd-xp-chip.is-amber { color: #fbbf24; }
  html[data-theme="dark"] .sd-xp-chip.is-blue { color: #93c5fd; }

  .sd-rank-steps-strip {
    display: grid;
    grid-template-columns: repeat(9, minmax(66px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .sd-rank-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(148, 163, 184, 0.06);
    text-align: center;
    font-size: 0.72rem;
  }
  .sd-rank-step.is-locked { opacity: 0.45; filter: grayscale(0.8); }
  .sd-rank-step.is-current {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.12);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
  }
  .sd-rank-step-name { font-weight: 700; color: var(--text-main); white-space: nowrap; }
  .sd-rank-step-lv { font-size: 0.66rem; color: var(--text-muted); }

  .sd-achieve-heading {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-align: center;
    border-top: 1px dashed var(--border-color);
    padding-top: 1.25rem;
  }
  .sd-all-badges-toggle-wrap {
    text-align: center;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }
  .sd-all-badges-btn {
    min-height: 44px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.45rem 1.1rem;
  }
  .sd-all-badges-drawer {
    margin-top: 0.85rem;
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px dashed var(--border-color);
    background: rgba(148, 163, 184, 0.06);
  }
  .sd-all-badges-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    font-weight: 600;
  }

  /* Semantic House Cup Button & Behavior Leaderboard */
  button.sd-housecup-trigger {
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
  }
  @media (hover: hover) {
    button.sd-housecup-trigger:hover { transform: scale(1.015); }
  }
  .sd-hc-body { flex: 1; min-width: 0; }
  .sd-hc-title { font-weight: 800; font-size: 1.1rem; }
  .sd-hc-title.is-muted { color: var(--text-muted); }
  .sd-hc-title.is-primary { color: var(--primary-color); }
  .sd-hc-title.is-crown { font-size: 1.25rem; text-shadow: 0 2px 4px rgba(0,0,0,0.35); color: #fff; }
  .sd-hc-desc { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.3rem; line-height: 1.45; }
  .sd-hc-desc.is-white { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
  .sd-hc-cta {
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.14);
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
  }
  .sd-hc-cta.is-primary { color: var(--primary-color); background: rgba(139, 92, 246, 0.12); }
  .sd-hc-cta.is-dark { color: #fff; background: rgba(0, 0, 0, 0.28); }
  .sd-hc-emblem { font-size: 2.4rem; opacity: 0.25; margin-left: 1rem; flex-shrink: 0; }
  .sd-hc-emblem.is-faint { opacity: 0.14; }
  .sd-hc-trophy { font-size: 3.1rem; position: relative; z-index: 3; margin-left: 0.75rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); flex-shrink: 0; }

  .sd-cb-empty {
    margin-top: 1rem;
    margin-bottom: 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sd-cb-banner {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(148, 163, 184, 0.35);
  }
  .sd-cb-banner.is-gold { background: linear-gradient(135deg, #fef08a, #fde047); }
  .sd-cb-banner.is-indigo { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
  .sd-cb-body { flex: 1; min-width: 0; }
  .sd-cb-title { font-weight: 800; font-size: 1.08rem; color: #312e81; }
  .sd-cb-banner.is-gold .sd-cb-title,
  .sd-cb-banner.is-gold .sd-cb-sub { color: #713f12; }
  .sd-cb-sub { font-size: 0.85rem; color: #3730a3; margin-top: 0.25rem; }
  .sd-cb-title.is-muted { color: var(--text-muted); }
  .sd-cb-points { font-size: 1.18rem; font-weight: 800; margin-top: 0.45rem; }
  .sd-cb-points.is-top { color: #713f12; }
  .sd-cb-points.is-normal { color: #312e81; }
  .sd-cb-points.is-neg { color: #dc2626; }
  .sd-cb-medal { font-size: 2.8rem; margin-left: 1rem; flex-shrink: 0; }
  .sd-cb-logs-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 1rem;
  }
  .sd-cb-logs-head {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 6px;
  }
  .sd-log-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    border-bottom: 1px dashed var(--border-color);
    padding: 7px 0;
  }
  .sd-log-row:last-child { border-bottom: none; }
  .sd-log-main { flex: 1 1 180px; min-width: 0; }
  .sd-log-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 800;
    display: inline-block;
  }
  .sd-log-badge.is-plus { background: rgba(16, 185, 129, 0.14); color: #059669; }
  .sd-log-badge.is-minus { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
  html[data-theme="dark"] .sd-log-badge.is-plus { color: #34d399; }
  html[data-theme="dark"] .sd-log-badge.is-minus { color: #f87171; }
  .sd-log-desc { color: var(--text-main); margin-left: 4px; word-break: break-word; }
  .sd-log-desc.is-bold { font-weight: 700; }
  .sd-log-time { color: var(--text-muted); font-size: 0.76rem; white-space: nowrap; }

  /* Tasks Filter, Search & Cards */
  .sd-task-filter-row,
  .sd-exam-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .sd-exam-filter-bar {
    margin-bottom: 1rem;
    background: rgba(139, 92, 246, 0.06);
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.22);
  }
  .sd-filter-label {
    font-weight: 800;
    color: var(--text-main);
    font-size: 0.94rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
  }
  .sd-subject-select,
  .sd-exam-select {
    width: auto;
    flex: 1;
    min-width: 200px;
    min-height: 44px;
    border-color: var(--primary-color);
    border-radius: 10px;
    font-weight: 700;
    color: var(--primary-color);
    cursor: pointer;
  }
  .sd-exam-select { border-color: #8b5cf6; color: #7c3aed; }
  html[data-theme="dark"] .sd-exam-select { color: #c4b5fd; }

  .sd-task-search-wrap {
    position: relative;
    width: 100%;
  }
  .sd-task-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
  }
  .sd-task-search-input {
    width: 100%;
    min-height: 44px;
    padding-left: 2.3rem;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: max(1rem, 1em);
  }

  .sd-task-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 1.15rem;
    border-radius: 14px;
    margin-bottom: 0.9rem;
    box-shadow: var(--soft-shadow);
    content-visibility: auto;
    contain-intrinsic-size: auto 150px;
  }
  .sd-task-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
  .sd-task-main { flex: 1; min-width: 200px; }
  .sd-task-subject { font-size: 0.8rem; color: var(--primary-color); font-weight: 700; margin-bottom: 0.25rem; }
  .sd-task-title { font-weight: 800; color: var(--text-main); font-size: 1.05rem; line-height: 1.4; }
  .sd-task-desc { font-size: 0.86rem; color: var(--text-muted); margin-top: 0.3rem; word-break: break-word; }
  .sd-task-dates {
    display: flex;
    gap: 8px 14px;
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    align-items: center;
  }
  .sd-due-urgency {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .sd-due-urgency.is-overdue { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
  .sd-due-urgency.is-today { background: rgba(245, 158, 11, 0.16); color: #b45309; }
  .sd-due-urgency.is-soon { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
  html[data-theme="dark"] .sd-due-urgency.is-overdue { color: #f87171; }
  html[data-theme="dark"] .sd-due-urgency.is-today { color: #fbbf24; }
  html[data-theme="dark"] .sd-due-urgency.is-soon { color: #93c5fd; }

  .sd-task-status-col {
    text-align: right;
    min-width: 92px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .sd-task-status-pill {
    color: #fff;
    padding: 0.4rem 0.95rem;
    border-radius: 20px;
    font-size: 0.84rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  }
  .sd-task-status-pill.is-missing { background: #dc2626; }
  .sd-task-status-pill.is-ontime { background: #059669; }
  .sd-task-status-pill.is-late { background: #d97706; }
  .sd-task-freeze-badge {
    font-size: 0.75rem;
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid #3b82f6;
    font-weight: 700;
  }
  .sd-task-peer-bar {
    background: rgba(148, 163, 184, 0.08);
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
    border-top: 1px dashed var(--border-color);
  }
  .sd-task-peer-label { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
  .sd-task-peer-track { flex: 1; background-color: rgba(156, 163, 175, 0.25); border-radius: 10px; height: 8px; overflow: hidden; }
  .sd-task-peer-fill { background-color: var(--primary-color); height: 100%; border-radius: 10px; transition: width 0.8s ease; }
  .sd-task-peer-pct { font-size: 0.8rem; font-weight: 700; color: var(--primary-color); }
  .sd-empty-box {
    text-align: center;
    color: var(--text-muted);
    padding: 2.5rem 1.25rem;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
  }

  /* Exams Grid & Cards */
  .sd-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
  }
  .sd-exam-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 1.15rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  }
  .sd-exam-card.is-pass { border-color: #10b981; }
  .sd-exam-card.is-fail { border-color: #ef4444; background: rgba(239, 68, 68, 0.03); }
  .sd-exam-card.is-retake-pass { border-color: #f59e0b; }
  .sd-exam-card.is-pending { border-style: dashed; text-align: center; color: var(--text-muted); }
  .sd-exam-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .sd-exam-card-title { font-weight: 800; color: var(--text-main); font-size: 1rem; }
  .sd-exam-pending-txt { font-size: 0.86rem; margin-top: 4px; }
  .sd-exam-pill {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .sd-exam-pill.is-pass { background: rgba(16, 185, 129, 0.14); color: #059669; }
  .sd-exam-pill.is-fail { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
  .sd-exam-pill.is-retake-pass { background: rgba(245, 158, 11, 0.14); color: #b45309; }
  html[data-theme="dark"] .sd-exam-pill.is-pass { color: #34d399; }
  html[data-theme="dark"] .sd-exam-pill.is-fail { color: #f87171; }
  html[data-theme="dark"] .sd-exam-pill.is-retake-pass { color: #fbbf24; }
  .sd-exam-score-val { font-size: 2rem; font-weight: 800; }
  .sd-exam-score-val.is-pass { color: var(--primary-color); }
  .sd-exam-score-val.is-fail { color: #ef4444; }
  .sd-exam-score-max { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
  .sd-exam-retake-line {
    font-size: 0.82rem;
    color: #d97706;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
  }
  .sd-exam-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background: var(--surface-color);
  }

  /* House Cup & Kudos Dialogs */
  .care-dialog-title.is-housecup { color: #d97706; text-align: center; margin-left: 2.4rem; }
  html[data-theme="dark"] .care-dialog-title.is-housecup { color: #fbbf24; }
  .care-dialog-title.is-peer-praise { color: #2563eb; text-align: center; margin-left: 2.4rem; }
  html[data-theme="dark"] .care-dialog-title.is-peer-praise { color: #60a5fa; }
  .sd-housecup-list {
    max-height: 58dvh;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sd-housecup-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .sd-hc-scope-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sd-hc-scope-btn,
  .sd-hc-refresh-btn {
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .sd-hc-scope-btn.is-active,
  .sd-hc-scope-btn[aria-pressed="true"] {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
  }
  .sd-hc-refresh-btn:hover,
  .sd-hc-scope-btn:not(.is-active):hover {
    border-color: #8b5cf6;
  }
  .sd-housecup-summary {
    margin-bottom: 10px;
  }
  .sd-hc-summary-card {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 12px;
    padding: 10px 12px;
  }
  .sd-hc-summary-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
  }
  .sd-hc-sum-room { font-weight: 800; color: var(--text-main); font-size: 0.96rem; }
  .sd-hc-sum-rank {
    font-size: 0.8rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.15);
    color: #6d28d9;
  }
  html[data-theme="dark"] .sd-hc-sum-rank { color: #ddd6fe; background: rgba(139, 92, 246, 0.28); }
  .sd-hc-sum-pct { font-weight: 900; font-size: 1rem; color: var(--text-main); }
  .sd-hc-sum-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
  }
  .sd-hc-sum-badge.is-lead { background: rgba(245, 158, 11, 0.2); color: #b45309; }
  .sd-hc-sum-badge.is-chase { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; }
  html[data-theme="dark"] .sd-hc-sum-badge.is-lead { color: #fde68a; }
  html[data-theme="dark"] .sd-hc-sum-badge.is-chase { color: #93c5fd; }
  .sd-hc-summary-sub { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
  .sd-hc-row {
    border: 1px solid var(--border-color);
    background: rgba(148, 163, 184, 0.08);
    padding: 12px;
    border-radius: 12px;
    content-visibility: auto;
    contain-intrinsic-size: auto 76px;
  }
  @supports not (content-visibility: auto) {
    .sd-hc-row { contain: layout style paint; }
  }
  .sd-hc-row.is-mine {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
  }
  .sd-hc-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .sd-hc-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .sd-hc-rank-dot {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-main);
  }
  .sd-hc-rank-dot.is-gold { background: rgba(245, 158, 11, 0.22); color: #b45309; }
  .sd-hc-rank-dot.is-silver { background: rgba(148, 163, 184, 0.26); color: #334155; }
  .sd-hc-rank-dot.is-bronze { background: rgba(234, 88, 12, 0.2); color: #9a3412; }
  .sd-hc-rank-dot.is-muted { background: rgba(148, 163, 184, 0.14); color: var(--text-muted); }
  html[data-theme="dark"] .sd-hc-rank-dot.is-gold { color: #fde68a; }
  html[data-theme="dark"] .sd-hc-rank-dot.is-silver { color: #e2e8f0; }
  html[data-theme="dark"] .sd-hc-rank-dot.is-bronze { color: #fdba74; }
  .sd-hc-room-name { font-weight: 700; color: var(--text-main); font-size: 0.98rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .sd-hc-row-meta { font-size: 0.77rem; color: var(--text-muted); margin-top: 2px; }
  .sd-hc-my-badge {
    font-size: 0.68rem;
    background: #7c3aed;
    color: #fff;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 700;
  }
  .sd-hc-room-pct { font-weight: 900; color: var(--text-main); flex-shrink: 0; }
  .sd-hc-track {
    height: 10px;
    background: rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    overflow: hidden;
  }
  .sd-hc-fill { height: 100%; border-radius: 10px; }

  .sd-hc-next-chip {
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #4c1d95;
    background: rgba(139, 92, 246, 0.14);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 10px;
  }
  .sd-hc-next-chip.is-light { color: var(--text-muted); background: rgba(148, 163, 184, 0.16); }
  html[data-theme="dark"] .sd-hc-next-chip { color: #ddd6fe; background: rgba(139, 92, 246, 0.26); }

  .sd-coop-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 4px 0;
  }
  progress.sd-coop-progress {
    appearance: none;
    border: 0 solid;
    width: 100%;
    inline-size: 100%;
    height: 11px;
    border-radius: 999px;
    overflow: clip;
    background: rgba(148, 163, 184, 0.28);
    display: block;
    margin-bottom: 8px;
  }
  progress.sd-coop-progress::-webkit-progress-bar {
    background: transparent;
  }
  progress.sd-coop-progress::-webkit-progress-value {
    background: linear-gradient(90deg, #059669, #10b981);
    border-radius: 999px;
    transition: inline-size 0.3s ease;
  }
  progress.sd-coop-progress::-moz-progress-bar {
    background: linear-gradient(90deg, #059669, #10b981);
    border-radius: 999px;
    transition: inline-size 0.3s ease;
  }
  .sd-coop-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0;
  }
  .sd-coop-step {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .sd-coop-step.is-reached {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
  }
  html[data-theme="dark"] .sd-coop-step.is-reached {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.22);
  }
  @media (prefers-reduced-motion: reduce) {
    progress.sd-coop-progress::-webkit-progress-value { transition: none; }
    progress.sd-coop-progress::-moz-progress-bar { transition: none; }
  }
  @media (forced-colors: active) {
    progress.sd-coop-progress { border: 1px solid CanvasText; }
    .sd-coop-step.is-reached { border-color: Highlight; }
  }

  .sd-care-readonly-note {
    margin: 0.75rem auto 1.25rem;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-muted);
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }

  /* Homeroom House Cup (Advisor & Subject Teacher) */
  .hr-housecup-area { container-type: inline-size; }
  .hr-hc-card {
    background: var(--surface-color);
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    box-shadow: var(--soft-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .hr-hc-card.is-champion {
    border: 2px solid #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(52, 211, 153, 0.08));
  }
  .hr-hc-card.is-lead {
    border: 2px solid #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(16, 185, 129, 0.07));
  }
  .hr-hc-card.is-emerald {
    border-color: rgba(16, 185, 129, 0.42);
    border-left: 4px solid #10b981;
  }
  .hr-hc-card.is-muted {
    border-color: var(--border-color);
  }
  .hr-hc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .hr-hc-main { flex: 1; min-width: 0; }
  .hr-hc-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
  .hr-hc-title {
    font-weight: 800;
    font-size: 1.06rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
  }
  .hr-hc-card.is-champion .hr-hc-title,
  .hr-hc-card.is-emerald .hr-hc-title { color: #047857; }
  .hr-hc-card.is-lead .hr-hc-title,
  .hr-hc-card.is-purple .hr-hc-title { color: #6d28d9; }
  html[data-theme="dark"] .hr-hc-card.is-champion .hr-hc-title,
  html[data-theme="dark"] .hr-hc-card.is-emerald .hr-hc-title { color: #34d399; }
  html[data-theme="dark"] .hr-hc-card.is-lead .hr-hc-title,
  html[data-theme="dark"] .hr-hc-card.is-purple .hr-hc-title { color: #c4b5fd; }
  .hr-hc-desc {
    font-size: 0.86rem;
    color: var(--text-main);
    margin-top: 3px;
    line-height: 1.45;
  }
  .hr-hc-card.is-muted .hr-hc-desc { color: var(--text-muted); }
  .hr-hc-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 64px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.12);
  }
  .hr-hc-emoji { font-size: 1.55rem; line-height: 1.1; }
  .hr-hc-pct { font-size: 1.05rem; font-weight: 900; color: var(--text-main); }
  .hr-hc-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
  }
  .hr-hc-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c3aed, #10b981);
    transition: width 0.35s ease;
  }
  .hr-hc-card.is-muted .hr-hc-fill { background: rgba(148, 163, 184, 0.5); }
  .hr-hc-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .hr-hc-stat-pill {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .hr-hc-stat-pill.is-warn { background: rgba(245, 158, 11, 0.15); color: #b45309; }
  .hr-hc-stat-pill.is-goal { background: rgba(139, 92, 246, 0.14); color: #6d28d9; }
  html[data-theme="dark"] .hr-hc-stat-pill { color: #6ee7b7; background: rgba(16, 185, 129, 0.2); }
  html[data-theme="dark"] .hr-hc-stat-pill.is-warn { color: #fde68a; background: rgba(245, 158, 11, 0.22); }
  html[data-theme="dark"] .hr-hc-stat-pill.is-goal { color: #ddd6fe; background: rgba(139, 92, 246, 0.24); }
  .hr-hc-subject-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
  }
  .hr-hc-subject-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--text-main);
  }
  .hr-hc-subject-tag { color: #1d4ed8; font-weight: 700; }
  html[data-theme="dark"] .hr-hc-subject-tag { color: #93c5fd; }
  .hr-hc-mini-btn {
    min-height: 44px;
    padding: 6px 14px !important;
    font-size: 0.82rem !important;
    border-radius: 999px !important;
  }
  .hr-hc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hr-hc-action-btn {
    min-height: 44px;
    padding: 6px 14px !important;
    font-size: 0.86rem !important;
    font-weight: 700;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .hr-hc-action-btn.is-line {
    border-color: #10b981 !important;
    color: #047857 !important;
  }
  html[data-theme="dark"] .hr-hc-action-btn.is-line {
    color: #34d399 !important;
  }
  .hr-hc-error {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed rgba(239, 68, 68, 0.45);
    color: #dc2626;
    font-size: 0.88rem;
  }
  @container (max-width: 520px) {
    .hr-hc-actions .hr-hc-action-btn { flex: 1 1 100%; justify-content: center; }
    .hr-hc-subject-strip .hr-hc-mini-btn { width: 100%; justify-content: center; min-height: 44px; }
  }

  .sd-hc-scope-btn:focus-visible,
  .sd-hc-refresh-btn:focus-visible,
  .hr-hc-action-btn:focus-visible,
  .hr-hc-mini-btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }
  html[data-perf="eco"] .hr-hc-fill,
  html[data-perf="eco"] .sd-hc-scope-btn,
  html[data-perf="eco"] .sd-hc-refresh-btn {
    transition: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .hr-hc-fill,
    .sd-hc-scope-btn,
    .sd-hc-refresh-btn { transition: none !important; }
  }
  @media (forced-colors: active) {
    .hr-hc-track { border: 1px solid CanvasText; }
    .hr-hc-fill { background: Highlight !important; }
    .sd-hc-scope-btn.is-active,
    .sd-hc-scope-btn[aria-pressed="true"] {
      background: Highlight;
      color: HighlightText;
      border-color: Highlight;
    }
  }

  .care-student-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }

  .student-tab-btn:focus-visible,
  .task-pill:focus-visible,
  .sd-housecup-trigger:focus-visible,
  .sd-all-badges-btn:focus-visible,
  .sd-logout-btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }

  @media (max-width: 599px) {
    #student-dashboard .sd-task-status-col {
      width: 100%;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    .task-pill { min-height: 44px !important; }
    .care-student-actions { display: grid; grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 360px) {
    .care-student-actions { grid-template-columns: 1fr; }
  }

  html[data-perf="eco"] :where(
    .sd-profile-card, .sd-rank-roadmap, .sd-task-card, .sd-exam-card, .sd-hc-row, .sd-housecup-trigger
  ) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .sd-xp-fill,
    .sd-task-peer-fill,
    button.sd-housecup-trigger {
      transition: none !important;
    }
  }
  @media (forced-colors: active) {
    .student-tab-btn[aria-selected="true"]::after {
      border-block-end: 3px solid Highlight;
    }
    .sd-xp-track, .sd-task-peer-track, .sd-hc-track { border: 1px solid CanvasText; }
    .sd-xp-fill, .sd-task-peer-fill, .sd-hc-fill { background: Highlight !important; }
  }

  /* ==============================================================
     🎓 54. Smart Remote Teaching & Adaptive Scroll System
     ============================================================== */

  /* 🌟 1. Custom Glassmorphic Scrollbar (Restored & High-Precision System) */
  html {
    scrollbar-gutter: stable;
  }
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-track:hover {
    background: rgba(148, 163, 184, 0.08);
  }
  [data-theme="dark"] ::-webkit-scrollbar-track:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.42);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: var(--primary-color, #0284c7) !important;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.45);
  }
  [data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.45);
  }
  [data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background: #c084fc !important;
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.55);
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
  }
  [data-theme="dark"] * {
    scrollbar-color: rgba(168, 85, 247, 0.5) transparent;
  }

  /* 🌟 1.1 หน้าต่างข้อมูลที่เลื่อนได้ (Scrollable Data Windows, Modals & Tables) */
  :where(
    dialog,
    .care-dialog-panel,
    .sl-dialog-box,
    .fc-qbeh-panel,
    .behavior-modal,
    .behavior-modal-body,
    .swal2-html-container,
    .adm-table-wrap,
    .adm-table-area,
    .am-table-wrap,
    .exam-table-wrap,
    .exam-table-area,
    #export-table-container,
    .table-responsive,
    .care-date-list,
    .beh-table-wrap,
    #beh-history-list,
    .sd-task-list
  ) {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  :where(
    dialog,
    .care-dialog-panel,
    .sl-dialog-box,
    .fc-qbeh-panel,
    .behavior-modal,
    .behavior-modal-body,
    .swal2-html-container,
    .adm-table-wrap,
    .adm-table-area,
    .am-table-wrap,
    .exam-table-wrap,
    .exam-table-area,
    #export-table-container,
    .table-responsive,
    .care-date-list,
    .beh-table-wrap,
    #beh-history-list,
    .sd-task-list
  ):hover::-webkit-scrollbar-thumb {
    background: rgba(2, 132, 199, 0.65);
  }

  [data-theme="dark"] :where(
    dialog,
    .care-dialog-panel,
    .sl-dialog-box,
    .fc-qbeh-panel,
    .behavior-modal,
    .behavior-modal-body,
    .swal2-html-container,
    .adm-table-wrap,
    .adm-table-area,
    .am-table-wrap,
    .exam-table-wrap,
    .exam-table-area,
    #export-table-container,
    .table-responsive,
    .care-date-list,
    .beh-table-wrap,
    #beh-history-list,
    .sd-task-list
  ):hover::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.7);
  }

  /* ⚡ 1.2 Eco / Performance Mode Scrollbars (Zero Blending, Solid Colors, Instant Response) */
  html[data-perf="eco"] ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }
  html[data-perf="eco"] ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
  }
  html[data-perf="eco"] ::-webkit-scrollbar-thumb {
    background: #64748b !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
  html[data-perf="eco"] ::-webkit-scrollbar-thumb:hover,
  html[data-perf="eco"] ::-webkit-scrollbar-thumb:active {
    background: #334155 !important;
    box-shadow: none !important;
  }
  html[data-perf="eco"][data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b !important;
  }
  html[data-perf="eco"][data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
  html[data-perf="eco"][data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
  html[data-perf="eco"][data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background: #cbd5e1 !important;
    box-shadow: none !important;
  }
  html[data-perf="eco"] * {
    scrollbar-width: thin !important;
    scrollbar-color: #64748b #f1f5f9 !important;
  }
  html[data-perf="eco"][data-theme="dark"] * {
    scrollbar-color: #94a3b8 #1e293b !important;
  }

  /* 🎓 1.3 Remote Teaching Mode: Touch-Friendly Adaptive Scrollbars (Tablet & Remote Desktop) */
  html.remote-teaching-mode ::-webkit-scrollbar,
  body:not(.teaching-mode-off) ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  html.remote-teaching-mode ::-webkit-scrollbar-track,
  body:not(.teaching-mode-off) ::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.1);
    border-radius: 999px;
  }
  html.remote-teaching-mode[data-theme="dark"] ::-webkit-scrollbar-track,
  body:not(.teaching-mode-off)[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
  }
  html.remote-teaching-mode ::-webkit-scrollbar-thumb,
  body:not(.teaching-mode-off) ::-webkit-scrollbar-thumb {
    background: rgba(2, 132, 199, 0.55);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    min-height: 48px;
    min-width: 48px;
  }
  html.remote-teaching-mode[data-theme="dark"] ::-webkit-scrollbar-thumb,
  body:not(.teaching-mode-off)[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.6);
  }
  html.remote-teaching-mode ::-webkit-scrollbar-thumb:hover,
  html.remote-teaching-mode ::-webkit-scrollbar-thumb:active,
  body:not(.teaching-mode-off) ::-webkit-scrollbar-thumb:hover,
  body:not(.teaching-mode-off) ::-webkit-scrollbar-thumb:active {
    background: var(--primary-color, #0284c7) !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.55);
  }
  html.remote-teaching-mode[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
  html.remote-teaching-mode[data-theme="dark"] ::-webkit-scrollbar-thumb:active,
  body:not(.teaching-mode-off)[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
  body:not(.teaching-mode-off)[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background: #c084fc !important;
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.7);
  }
  html.remote-teaching-mode * {
    scrollbar-width: auto;
    scrollbar-color: rgba(2, 132, 199, 0.6) rgba(148, 163, 184, 0.1);
  }
  html.remote-teaching-mode[data-theme="dark"] * {
    scrollbar-color: rgba(168, 85, 247, 0.65) rgba(255, 255, 255, 0.06);
  }

  /* Eco Mode + Remote Teaching Mode รวมกัน: คงขนาด 12px ให้สัมผัสง่าย แต่ใช้สี Solid ประหยัดพลังงาน */
  html.remote-teaching-mode[data-perf="eco"] ::-webkit-scrollbar,
  body:not(.teaching-mode-off)[data-perf="eco"] ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
  }
  html.remote-teaching-mode[data-perf="eco"] ::-webkit-scrollbar-track,
  body:not(.teaching-mode-off)[data-perf="eco"] ::-webkit-scrollbar-track {
    background: #e2e8f0 !important;
  }
  html.remote-teaching-mode[data-perf="eco"] ::-webkit-scrollbar-thumb,
  body:not(.teaching-mode-off)[data-perf="eco"] ::-webkit-scrollbar-thumb {
    background: #64748b !important;
    border: 1px solid #475569 !important;
  }
  html.remote-teaching-mode[data-perf="eco"][data-theme="dark"] ::-webkit-scrollbar-track,
  body:not(.teaching-mode-off)[data-perf="eco"][data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1e293b !important;
  }
  html.remote-teaching-mode[data-perf="eco"][data-theme="dark"] ::-webkit-scrollbar-thumb,
  body:not(.teaching-mode-off)[data-perf="eco"][data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border: 1px solid #cbd5e1 !important;
  }

  /* 🌟 2. Navbar Toggle Button */
  .remote-touch-btn {
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .remote-touch-btn[aria-pressed="true"] {
    color: var(--primary-color, #0284c7) !important;
    background: rgba(2, 132, 199, 0.12) !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.25);
  }
  [data-theme="dark"] .remote-touch-btn[aria-pressed="true"] {
    color: #c084fc !important;
    background: rgba(168, 85, 247, 0.18) !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
  }

  /* 🌟 3. Smart Floating Scroll Track */
  .smart-scroll-track {
    position: fixed;
    right: 2px;
    top: 72px;
    bottom: 72px;
    width: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    z-index: 9990;
    transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, opacity 0.25s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    opacity: 0.65;
  }
  .smart-scroll-track:hover,
  .smart-scroll-track:active,
  .smart-scroll-track.is-dragging {
    width: 20px;
    background: rgba(148, 163, 184, 0.28);
    opacity: 1;
  }
  [data-theme="dark"] .smart-scroll-track {
    background: rgba(168, 85, 247, 0.15);
  }
  [data-theme="dark"] .smart-scroll-track:hover,
  [data-theme="dark"] .smart-scroll-track:active,
  [data-theme="dark"] .smart-scroll-track.is-dragging {
    background: rgba(168, 85, 247, 0.3);
  }
  .smart-scroll-thumb {
    position: absolute;
    top: 0;
    left: 1px;
    right: 1px;
    min-height: 38px;
    border-radius: 999px;
    background: linear-gradient(180deg, #38bdf8, #0284c7);
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.45);
    cursor: grab;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    touch-action: none;
  }
  .smart-scroll-thumb:active,
  .smart-scroll-track.is-dragging .smart-scroll-thumb {
    cursor: grabbing;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.7);
  }
  [data-theme="dark"] .smart-scroll-thumb {
    background: linear-gradient(180deg, #c084fc, #9333ea);
    box-shadow: 0 2px 10px rgba(147, 51, 234, 0.5);
  }
  [data-theme="dark"] .smart-scroll-thumb:active,
  [data-theme="dark"] .smart-scroll-track.is-dragging .smart-scroll-thumb {
    background: linear-gradient(180deg, #e879f9, #a855f7);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.8);
  }
  .smart-scroll-grip {
    display: block;
    width: 60%;
    height: 3px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .smart-scroll-track:hover .smart-scroll-grip,
  .smart-scroll-track.is-dragging .smart-scroll-grip {
    opacity: 1;
  }
  .smart-scroll-badge {
    position: absolute;
    right: calc(100% + 10px);
    top: 0;
    transform: translateY(-50%);
    background: var(--surface-color, rgba(15, 23, 42, 0.9));
    backdrop-filter: var(--blur-chrome, blur(8px));
    -webkit-backdrop-filter: var(--blur-chrome, blur(8px));
    color: var(--text-main, #f8fafc);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .smart-scroll-badge.is-visible {
    opacity: 1;
  }
  .smart-scroll-pct {
    color: var(--primary-color, #38bdf8);
    font-family: monospace;
    font-size: 0.88rem;
  }
  .smart-scroll-section {
    color: var(--text-muted, #94a3b8);
    font-size: 0.78rem;
    font-weight: 500;
  }

  /* 🌟 4. Floating Teaching Navigation HUD */
  .teaching-nav-hud {
    position: fixed;
    z-index: 9980;
    bottom: 105px;
    transition: left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.25s ease;
    user-select: none;
    -webkit-user-select: none;
  }
  .teaching-nav-hud[data-dock="right"] {
    right: 18px;
    left: auto;
  }
  .teaching-nav-hud[data-dock="left"] {
    left: 18px;
    right: auto;
  }
  .teaching-hud-capsule {
    background: var(--surface-color, rgba(248, 250, 252, 0.92));
    backdrop-filter: var(--blur-chrome, blur(10px));
    -webkit-backdrop-filter: var(--blur-chrome, blur(10px));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.5));
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
    border-radius: 999px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  [data-theme="dark"] .teaching-hud-capsule {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  }
  .btn-hud-action {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .btn-hud-action:hover {
    transform: scale(1.08);
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
  }
  .btn-hud-action:active {
    transform: scale(0.95);
  }
  .btn-hud-toggle {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    color: #fff;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  }
  .btn-hud-toggle.is-open {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45) !important;
    color: #fff !important;
  }
  [data-theme="dark"] .btn-hud-toggle {
    background: linear-gradient(135deg, #9333ea, #a855f7);
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.45);
  }
  [data-theme="dark"] .btn-hud-toggle.is-open {
    background: linear-gradient(135deg, #e11d48, #f43f5e) !important;
    box-shadow: 0 2px 10px rgba(244, 63, 94, 0.5) !important;
  }
  .btn-hud-dock-swap {
    opacity: 0.85;
  }
  .btn-hud-dock-swap:hover {
    opacity: 1;
    background: rgba(148, 163, 184, 0.25) !important;
    color: var(--primary-color) !important;
  }
  .teaching-hud-divider {
    width: 22px;
    height: 1px;
    background: var(--border-color, rgba(255, 255, 255, 0.25));
    margin: 2px auto;
    opacity: 0.6;
    border-radius: 1px;
  }
  .btn-hud-hand[aria-pressed="true"] {
    background: #f59e0b !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
    animation: handPulse 1.8s infinite;
  }
  @keyframes handPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
  }
  .teaching-hud-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: max-height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
    max-height: 380px;
    overflow: hidden;
    opacity: 1;
  }
  .teaching-nav-hud.is-collapsed .teaching-hud-capsule {
    gap: 0;
  }
  .teaching-nav-hud.is-collapsed .teaching-hud-body {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    gap: 0;
  }
  .teaching-nav-hud.is-collapsed .btn-hud-toggle {
    transform: scale(1);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  }

  /* 🌟 5. Hand / Pan Canvas Mode */
  body.is-hand-mode {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  body.is-hand-mode * {
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  body.is-hand-mode.is-panning {
    cursor: grabbing !important;
  }

  /* 🌟 6. Teaching Mode Toggle Off */
  body.teaching-mode-off #smart-scroll-track,
  body.teaching-mode-off #teaching-nav-hud {
    display: none !important;
  }

  /* 🌟 7. Mobile and Print Responsive Rules */
  @media (max-width: 768px) {
    .teaching-nav-hud {
      bottom: calc(75px + env(safe-area-inset-bottom, 0px));
    }
    .smart-scroll-track {
      top: 62px;
      bottom: 80px;
      width: 5px;
    }
    .btn-hud-action {
      width: 38px;
      height: 38px;
      font-size: 0.9rem;
    }
  }
  @media print {
    #smart-scroll-track,
    #teaching-nav-hud {
      display: none !important;
    }
  }

  /* 🌟 8. Eco Mode & Accessibility */
  html[data-perf="eco"] :where(
    #smart-scroll-track, #teaching-nav-hud, .teaching-hud-capsule, .btn-hud-action, .smart-scroll-thumb, .smart-scroll-badge
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition-duration: 0s !important;
    animation: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .teaching-nav-hud,
    .teaching-hud-body,
    .btn-hud-action,
    .smart-scroll-track,
    .smart-scroll-thumb {
      transition: none !important;
      animation: none !important;
    }
  }
  @media (forced-colors: active) {
    .teaching-hud-capsule,
    .smart-scroll-thumb,
    .smart-scroll-track {
      border: 1px solid CanvasText;
    }
    .btn-hud-action {
      border: 1px solid ButtonText;
    }
  }
  /* ==============================================================
     📊 ระบบดาวน์โหลดรายงาน ปพ.5 & สรุปงาน Excel (PP.5 Export Studio)
     ============================================================== */
  .pp5-shell-card {
    max-width: 100%;
  }

  .pp5-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed rgba(16, 185, 129, 0.3);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .pp5-header-info {
    flex: 1;
    min-width: 260px;
  }

  .pp5-page-title {
    margin: 0;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.45rem;
    font-weight: 800;
  }

  .pp5-title-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
    font-size: 1.35rem;
    flex-shrink: 0;
  }

  .pp5-page-subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin: 8px 0 0 0;
    line-height: 1.4;
  }

  .pp5-back-btn {
    border-color: #10b981 !important;
    color: #10b981 !important;
    border-radius: 12px;
    padding: 0.55rem 1.15rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .pp5-back-btn:hover {
    background: rgba(16, 185, 129, 0.1) !important;
    transform: translateX(-2px);
  }

  .pp5-filter-card {
    background: rgba(16, 185, 129, 0.04);
    padding: 1.5rem;
    border-radius: 18px;
    border: 1.5px solid rgba(16, 185, 129, 0.25);
    margin-bottom: 1.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  }

  .pp5-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    align-items: flex-end;
  }

  @media (min-width: 1024px) {
    .pp5-filter-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  .pp5-filter-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
  }

  .pp5-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #059669;
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.3;
    margin-bottom: 6px;
    min-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pp5-filter-label-accent {
    color: #10b981;
    font-size: 0.88rem;
  }

  .pp5-filter-select {
    border-color: #34d399;
    border-radius: 10px;
    height: 44px;
    cursor: pointer;
    font-size: 0.92rem;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .pp5-filter-select:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    outline: none;
  }

  .pp5-filter-select-accent {
    border: 2px solid #10b981;
    font-weight: 700;
  }

  .pp5-action-cluster {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(16, 185, 129, 0.25);
  }

  .pp5-btn-export-single {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
    height: 46px;
    padding: 0 1.5rem;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  }

  .pp5-btn-export-single:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
  }

  .pp5-btn-export-single:active {
    transform: translateY(0);
  }

  .pp5-btn-export-bulk {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.35) !important;
    height: 46px;
    padding: 0 1.5rem;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  }

  .pp5-btn-export-bulk:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45) !important;
  }

  .pp5-btn-export-bulk:active {
    transform: translateY(0);
  }

  .pp5-header-meta {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(16, 185, 129, 0.25);
    animation: fadeIn 0.3s ease;
  }

  .pp5-indicator-panel {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 2px dashed rgba(16, 185, 129, 0.35);
    animation: fadeIn 0.3s ease;
  }

  /* 🌟 แผงสถิติภาพรวมห้องเรียน (Gamified Classroom Overview KPI Cards) */
  .export-kpi-container {
    margin: 1.25rem 0;
    animation: fadeIn 0.3s ease;
  }

  .export-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }

  .export-kpi-card {
    background: var(--surface-color);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .export-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  }

  .kpi-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
  }

  .kpi-content {
    flex: 1;
    min-width: 0;
  }

  .kpi-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .kpi-value {
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 2px 0;
  }

  .kpi-subtext {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kpi-card-perfect {
    border-color: #10b981 !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(245, 158, 11, 0.04)) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.16) !important;
  }

  .kpi-perfect-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
  }

  .kpi-card-warn {
    border-color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.05) !important;
  }

  /* 🔍 แถบเครื่องมือค้นหาและฟิลเตอร์สถานะนักเรียน */
  .export-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 1rem;
    padding: 0.8rem 1.1rem;
    background: var(--surface-color);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  }

  .export-search-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
    max-width: 380px;
  }

  .export-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
    font-size: 0.88rem;
  }

  .export-search-input {
    padding: 0.55rem 2.2rem 0.55rem 2.4rem !important;
    border-radius: 20px !important;
    font-size: 0.88rem !important;
    border: 1.5px solid var(--border-color) !important;
    background: var(--bg-color) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 38px !important;
  }

  .export-search-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
    outline: none !important;
  }

  .export-search-clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s;
  }

  .export-search-clear:hover {
    color: #ef4444;
  }

  .export-quick-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
  }

  .export-chip-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .export-chip-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
  }

  .export-chip-btn {
    border: 1.5px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
  }

  .export-chip-btn:hover {
    border-color: #10b981;
    transform: translateY(-1px);
  }

  .export-chip-btn.active {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
  }

  .export-chip-btn.chip-warn.active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
  }

  .export-chip-btn.chip-success.active {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
  }

  .export-chip-counter {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-left: 8px;
    white-space: nowrap;
  }

  /* 📋 Result Area & Preview Table */
  .export-result-area {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--surface-color);
    box-shadow: var(--soft-shadow);
    overflow: hidden;
  }

  .pp5-sticky-col-num {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--surface-color) !important;
  }

  .pp5-sticky-col-name {
    position: sticky;
    left: 50px;
    z-index: 4;
    background: var(--surface-color) !important;
    border-right: 2px solid #10b981 !important;
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.05);
  }

  thead th.pp5-sticky-col-num,
  thead th.pp5-sticky-col-name {
    z-index: 6;
  }

  .pp5-empty-state {
    padding: 3.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .pp5-empty-icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: rgba(16, 185, 129, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.18);
  }

  .pp5-empty-icon {
    font-size: 2.5rem;
    color: #10b981;
  }

  .pp5-empty-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: var(--text-main);
    font-weight: 700;
  }

  .pp5-empty-desc {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 520px;
    line-height: 1.45;
  }

  .pp5-empty-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .pp5-empty-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  }

  .pp5-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pp5-empty-step-arrow {
    color: var(--text-muted);
    font-size: 0.75rem;
  }

  .pp5-empty-search-row {
    padding: 3rem 1.5rem;
    text-align: center;
  }

  .pp5-empty-search-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  .pp5-clear-search-btn {
    border-color: #10b981 !important;
    color: #10b981 !important;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.82rem;
  }

  /* ⚡ Download Progress Modal Styling */
  .pp5-download-progress-wrap {
    padding: 1rem 0.5rem;
    text-align: center;
  }

  .pp5-download-anim-icon {
    font-size: 3rem;
    color: #10b981;
    margin-bottom: 1rem;
  }

  .pp5-download-stage-text {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 4px;
  }

  .pp5-download-subinfo {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
  }

  .pp5-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }

  .pp5-progress-bar-indeterminate {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399, #10b981);
    border-radius: 10px;
    position: absolute;
    animation: pp5ProgressIndet 1.4s ease-in-out infinite;
  }

  @keyframes pp5ProgressIndet {
    0% { left: -40%; }
    50% { left: 40%; width: 50%; }
    100% { left: 100%; width: 40%; }
  }

  /* 🌙 Dark Mode Support */
  [data-theme="dark"] .pp5-filter-card {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(52, 211, 153, 0.25);
  }

  [data-theme="dark"] .pp5-filter-label {
    color: #34d399;
  }

  [data-theme="dark"] .pp5-filter-label-accent {
    color: #6ee7b7;
  }

  [data-theme="dark"] .pp5-title-icon {
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
  }

  [data-theme="dark"] .pp5-sticky-col-num,
  [data-theme="dark"] .pp5-sticky-col-name {
    background: var(--surface-color, #1e293b) !important;
  }

  [data-theme="dark"] .export-kpi-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
  }

  [data-theme="dark"] .export-toolbar {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
  }

  [data-theme="dark"] .export-search-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  [data-theme="dark"] .export-chip-btn {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
  }

  /* ⚡ Eco Mode (Performance Mode) */
  html[data-perf="eco"] :where(
    .pp5-filter-card, .export-kpi-card, .pp5-btn-export-single, .pp5-btn-export-bulk,
    .export-chip-btn, .export-toolbar, .pp5-empty-icon-wrap, .pp5-progress-bar-indeterminate
  ) {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* 📱 Responsive Media Queries */
  @media (max-width: 768px) {
    .pp5-page-title {
      font-size: 1.25rem;
    }
    .pp5-title-icon {
      width: 40px;
      height: 40px;
      font-size: 1.15rem;
    }
    .pp5-filter-card {
      padding: 1rem;
    }
    .pp5-filter-grid {
      grid-template-columns: 1fr;
      gap: 0.85rem;
    }
    .pp5-action-cluster {
      flex-direction: column;
      width: 100%;
    }
    .pp5-btn-export-single,
    .pp5-btn-export-bulk {
      width: 100%;
      justify-content: center;
    }
    .export-kpi-grid {
      grid-template-columns: 1fr 1fr;
    }
    .export-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
    .export-search-field {
      max-width: 100%;
      min-width: 100%;
    }
    .export-quick-filters {
      justify-content: flex-start;
    }
    .export-chip-counter {
      width: 100%;
      margin-left: 0;
      margin-top: 4px;
    }
  }

  @media (max-width: 480px) {
    .export-kpi-grid {
      grid-template-columns: 1fr;
    }
    .pp5-empty-steps {
      flex-direction: column;
    }
    .pp5-empty-step-arrow {
      transform: rotate(90deg);
    }
  }