/* ===== RESET & BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Sarabun', 'Noto Sans Thai', sans-serif; font-size: 15px;
       color: #7c2d12; line-height: 1.6; min-height: 100vh;
       background:
         radial-gradient(circle at 8% 12%, rgba(251,146,60,.30), transparent 45%),
         radial-gradient(circle at 92% 18%, rgba(249,115,22,.22), transparent 45%),
         radial-gradient(circle at 50% 95%, rgba(253,186,116,.25), transparent 50%),
         linear-gradient(160deg, #fff8f1 0%, #ffedd9 55%, #ffdfb8 100%);
       background-attachment: fixed; }
a { color: #ea580c; text-decoration: none; }

/* ===== NAVBAR ===== */
.navbar { background: rgba(255,255,255,.55); color: #9a3412; display: flex; align-items: center;
          justify-content: space-between; padding: 0 24px; height: 56px;
          position: sticky; top: 0; z-index: 100;
          backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
          border-bottom: 1px solid rgba(255,255,255,.5);
          box-shadow: 0 4px 24px rgba(234,88,12,.12); }
.navbar-brand { display: flex; align-items: center; gap: 10px;
                font-size: 16px; font-weight: 700; letter-spacing: .3px; color: #c2410c; }
.navbar-logo { height: 36px; width: auto; display: block; }
.navbar-menu { display: flex; align-items: center; gap: 8px; }
.nav-link { color: #9a3412; padding: 6px 12px; border-radius: 8px;
            font-size: 14px; transition: background .15s; }
.nav-link:hover { background: rgba(249,115,22,.15); color: #c2410c; }
.nav-user { color: #b45309; font-size: 13px; padding: 0 8px; }
.nav-logout { color: #dc2626; }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle { background: none; border: none; font-family: inherit; cursor: pointer; }
.nav-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px;
                     display: none; flex-direction: column; gap: 2px; padding: 6px;
                     background: rgba(255,255,255,.9); border-radius: 10px;
                     border: 1px solid rgba(255,255,255,.6);
                     box-shadow: 0 8px 24px rgba(154,52,18,.2);
                     backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
                     z-index: 110; }
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu .nav-link { white-space: nowrap; }

/* ===== CONTAINER ===== */
.container { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }

/* ===== LOGIN ===== */
.login-page { display: flex; align-items: center; justify-content: center;
              min-height: 100vh;
              background:
                radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 40%),
                radial-gradient(circle at 80% 85%, rgba(255,237,213,.25), transparent 45%),
                linear-gradient(135deg,#fb923c,#f97316 55%,#ea580c); }
.login-card { background: rgba(255,255,255,.55); border-radius: 20px; padding: 40px 36px;
              width: 100%; max-width: 400px;
              backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
              border: 1px solid rgba(255,255,255,.6);
              box-shadow: 0 20px 60px rgba(154,52,18,.25); }
.login-logo { text-align: center; }
.login-logo-img { height: 84px; width: auto; margin-bottom: 14px; }
.login-logo h1 { font-size: 20px; color: #c2410c; margin-bottom: 4px; }
.login-logo p  { font-size: 13px; color: #b45309; margin-bottom: 28px; }

/* ===== CARD ===== */
.card { background: rgba(255,255,255,.55); border-radius: 16px; margin-bottom: 20px;
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 8px 32px rgba(234,88,12,.12);
        border: 1px solid rgba(255,255,255,.6); overflow: hidden; }
.card-header { padding: 14px 20px; background: rgba(255,255,255,.35);
               border-bottom: 1px solid rgba(255,255,255,.5); font-weight: 600;
               display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 20px; }
.section-header { color: #c2410c; font-size: 14px; }

/* ===== PAGE HEADER ===== */
.page-header { margin-bottom: 20px; }
.page-header h2 { font-size: 22px; color: #c2410c; }
.eval-header { display: flex; justify-content: space-between; align-items: flex-start;
               margin-bottom: 16px; }
.eval-title h2 { font-size: 20px; color: #c2410c; }
.eval-title p  { color: #b45309; font-size: 13px; }
.eval-meta { font-size: 13px; color: #b45309; }

/* ===== TABLES ===== */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { background: rgba(255,247,237,.7); padding: 10px 12px; text-align: left;
            font-weight: 600; color: #9a3412; border: 1px solid rgba(254,215,170,.6);
            font-size: 13px; }
.table td { padding: 9px 12px; border: 1px solid rgba(254,215,170,.5); vertical-align: middle; }
.table tbody tr:hover { background: rgba(255,237,213,.45); }
.total-row { background: rgba(254,215,170,.5) !important; }
.total-row td { font-weight: 600; }
.eval-table td { vertical-align: middle; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-small  { font-size: 12.5px; color: #b45309; }

/* ===== FORMS ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600;
                    color: #9a3412; margin-bottom: 6px; }
.form-control { width: 100%; padding: 9px 12px; border: 1px solid rgba(234,88,12,.25);
                border-radius: 10px; font-size: 14px; font-family: inherit;
                background: rgba(255,255,255,.55);
                backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
                color: #7c2d12;
                transition: border .15s, box-shadow .15s; }
.form-control:focus { outline: none; border-color: #f97316;
                      box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
.form-control.text-center { text-align: center; }
textarea.form-control { resize: vertical; }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; gap: 6px;
       padding: 9px 18px; border-radius: 10px; font-size: 14px;
       font-family: inherit; font-weight: 500; cursor: pointer;
       border: none; transition: all .15s; }
.btn-primary  { background: linear-gradient(135deg,#fb923c,#f97316); color: #fff;
                box-shadow: 0 4px 16px rgba(249,115,22,.35); }
.btn-primary:hover { background: linear-gradient(135deg,#f97316,#ea580c); }
.btn-secondary { background: rgba(255,255,255,.5); color: #9a3412;
                 border: 1px solid rgba(234,88,12,.3);
                 backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-secondary:hover { background: rgba(255,255,255,.75); }
.btn-success  { background: linear-gradient(135deg,#22c55e,#16a34a); color: #fff; }
.btn-success:hover { background: linear-gradient(135deg,#16a34a,#15803d); }
.btn-danger   { background: linear-gradient(135deg,#f87171,#dc2626); color: #fff; }
.btn-danger:hover { background: linear-gradient(135deg,#dc2626,#b91c1c); }
.btn-outline  { background: rgba(255,255,255,.4); color: #9a3412;
                border: 1px solid rgba(234,88,12,.35);
                backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-outline:hover { background: rgba(255,255,255,.7); }
.btn-sm  { padding: 5px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end;
                margin-top: 20px; padding: 16px 0; }

/* ===== ALERTS ===== */
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px;
         backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.alert-success { background: rgba(220,252,231,.6); color: #166534; border: 1px solid rgba(187,247,208,.7); }
.alert-danger  { background: rgba(254,242,242,.6); color: #991b1b; border: 1px solid rgba(254,202,202,.7); }
.alert-info    { background: rgba(255,247,237,.65); color: #c2410c; border: 1px solid rgba(254,215,170,.7); }

/* ===== BADGES ===== */
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px;
         font-size: 12px; font-weight: 600; }
.badge-success  { background: rgba(220,252,231,.8); color: #166534; }
.badge-warning  { background: rgba(254,249,195,.85); color: #854d0e; }
.badge-info     { background: rgba(255,237,213,.85); color: #c2410c; }
.badge-danger   { background: rgba(254,226,226,.85); color: #991b1b; }
.badge-secondary { background: rgba(255,255,255,.6); color: #9a3412; }

/* ===== GRADE BADGES ===== */
.grade { display: inline-block; padding: 3px 14px; border-radius: 99px;
         font-weight: 700; font-size: 14px; }
.grade-A     { background: rgba(220,252,231,.85); color: #166534; }
.grade-Bplus, .grade-B\+ { background: rgba(255,237,213,.85); color: #c2410c; }
.grade-B     { background: rgba(254,243,199,.85); color: #92400e; }
.grade-C     { background: rgba(254,215,170,.85); color: #9a3412; }
.grade-D     { background: rgba(254,226,226,.85); color: #991b1b; }

/* ===== SCORE SUMMARY ===== */
.score-badge { font-size: 12px; font-weight: 500; color: #c2410c;
               background: rgba(255,237,213,.8); padding: 2px 10px; border-radius: 99px; }
.score-result { font-weight: 700; color: #c2410c; font-size: 15px; }
.score-summary { display: grid; gap: 10px; max-width: 400px; margin: 0 auto; }
.score-item { display: flex; justify-content: space-between; align-items: center;
              padding: 8px 16px; background: rgba(255,255,255,.5); border-radius: 10px;
              border: 1px solid rgba(254,215,170,.6); }
.score-item.total { background: linear-gradient(135deg,#fb923c,#ea580c); color: #fff;
                    border: none; border-radius: 12px;
                    font-size: 16px; font-weight: 700; }

/* ===== INFO GRID ===== */
.info-grid { display: flex; flex-direction: column; gap: 8px; }
.info-row  { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.info-label { font-weight: 600; color: #9a3412; }
.info-value { color: #c2410c; }

/* ===== MISC ===== */
.empty-state { text-align: center; padding: 40px; color: #c2876b; font-size: 15px; }