:root{
  --c1:#7c3aed; --c2:#d946ef; --c3:#06b6d4; --c4:#f59e0b;
  --grad:linear-gradient(135deg,#7c3aed 0%,#d946ef 55%,#06b6d4 100%);
  --bg:#f4f1ff; --card:#fff; --ink:#1e1b4b; --muted:#6b7280;
  --sidebar-w:270px;
}
*{box-sizing:border-box}
body{font-family:'Prompt','Kanit',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;
  background-image:radial-gradient(circle at 10% 0%,rgba(217,70,239,.12),transparent 40%),radial-gradient(circle at 100% 20%,rgba(6,182,212,.12),transparent 40%);
  background-attachment:fixed}
h1,h2,h3,h4,h5,.brand-font{font-family:'Kanit','Prompt',sans-serif;font-weight:600}

/* ---------- Sidebar ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:linear-gradient(180deg,#1e1b4b 0%,#312e81 60%,#4c1d95 100%);
  color:#e0e7ff;z-index:1040;overflow-y:auto;transition:transform .3s}
.sidebar .brand{padding:1.4rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar .brand .logo{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-size:1.3rem;color:#fff;box-shadow:0 8px 20px rgba(217,70,239,.45)}
.sidebar .nav-link{color:#c7d2fe;border-radius:12px;margin:.15rem .8rem;padding:.65rem .9rem;display:flex;align-items:center;gap:.75rem;transition:.2s}
.sidebar .nav-link i{width:22px;text-align:center}
.sidebar .nav-link:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateX(3px)}
.sidebar .nav-link.active{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(124,58,237,.45)}
.sidebar .menu-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#a5b4fc;padding:1rem 1.6rem .3rem}
.main-wrap{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:1030;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(124,58,237,.12)}
.content{padding:1.5rem;flex:1}
@media(max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .main-wrap{margin-left:0}
}

/* ---------- Cards ---------- */
.card-x{background:var(--card);border:0;border-radius:20px;box-shadow:0 10px 30px rgba(76,29,149,.08);transition:.25s}
.card-x:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(76,29,149,.16)}
.stat-card{border-radius:20px;color:#fff;padding:1.3rem;position:relative;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.15)}
.stat-card::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.18)}
.stat-card .icon{font-size:2rem;opacity:.9}
.stat-card .num{font-family:'Kanit';font-size:2rem;font-weight:700;line-height:1}
.g-violet{background:linear-gradient(135deg,#7c3aed,#d946ef)}
.g-sky{background:linear-gradient(135deg,#0ea5e9,#06b6d4)}
.g-green{background:linear-gradient(135deg,#10b981,#84cc16)}
.g-orange{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.g-rose{background:linear-gradient(135deg,#f43f5e,#ec4899)}

/* ---------- Components ---------- */
.btn-grad{background:var(--grad);color:#fff;border:0;border-radius:12px;padding:.55rem 1.3rem;font-weight:500;box-shadow:0 8px 20px rgba(124,58,237,.3);transition:.2s}
.btn-grad:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.08)}
.form-control,.form-select{border-radius:12px;border:1.5px solid #e5e7eb;padding:.6rem .9rem}
.form-control:focus,.form-select:focus{border-color:var(--c2);box-shadow:0 0 0 .2rem rgba(217,70,239,.15)}
.page-title{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.page-title .pt-icon{width:44px;height:44px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(124,58,237,.35)}
.table thead th{background:#f5f3ff;color:#4c1d95;border:0;font-weight:600;white-space:nowrap}
.table tbody tr:hover{background:#faf5ff}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:600}
.badge-soft{border-radius:50px;padding:.35em .8em;font-weight:500}

/* ---------- Star rating (ใช้ในหน้าประเมิน) ---------- */
.star-rating{display:inline-flex;flex-direction:row-reverse;gap:.2rem}
.star-rating input{display:none}
.star-rating label{font-size:1.9rem;color:#d1d5db;cursor:pointer;transition:.15s}
.star-rating input:checked~label,.star-rating label:hover,.star-rating label:hover~label{color:#f59e0b;transform:scale(1.12)}

/* ---------- Login ---------- */
.login-bg{min-height:100vh;background:var(--grad);display:grid;place-items:center;padding:1rem;position:relative;overflow:hidden}
.login-bg::before,.login-bg::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.14);animation:float 8s ease-in-out infinite}
.login-bg::before{width:340px;height:340px;left:-80px;top:-80px}
.login-bg::after{width:260px;height:260px;right:-60px;bottom:-60px;animation-delay:2s}
@keyframes float{50%{transform:translateY(25px) scale(1.06)}}
.glass{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-radius:28px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.fade-in{animation:fadeIn .5s ease backwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.text-purple{color:var(--c1)!important}