/* ════════════════════════════════════════════════════════════════
   theme.css — ธีมกลางของระบบตรวจสอบผลการเรียน (Modern / Smart)
   โหลดต่อท้าย <style> ของแต่ละหน้า จึงทับตัวแปรสีและคอมโพเนนต์เดิมทั้งหมด
   ปรับสีทั้งระบบได้ที่บล็อก :root ด้านล่างที่เดียว
   ════════════════════════════════════════════════════════════════ */
@media screen {

:root {
    /* พื้นผิวและตัวอักษร */
    --bg: #eef4ff;  --surface: #ffffff;
    --text: #0b1b3a; --muted: #5b6b8c; --border: #dbe5f5;

    /* แบรนด์: ทะเลลึก + teal */
    --navy: #071a3d;  --navy-mid: #0b2552;
    --navy-lt: #2563eb;  --navy-xl: #3b82f6;
    --primary: #2563eb;  --primary-lt: #3b82f6;  --primary-xl: #60a5fa;

    /* สีเน้น */
    --gold: #60a5fa;  --gold-lt: #93c5fd;  --gold-dim: rgba(96,165,250,.16);
    --accent: #3b82f6;  --accent-lt: #93c5fd;  --accent-dim: rgba(59,130,246,.14);
    --cream: #eff6ff;

    /* สถานะ */
    --green: #10b981;  --red: #e11d48;  --orange: #f59e0b;
    --success: #047857;  --success-bg: #d1fae5;
    --danger: #be123c;   --danger-bg: #ffe4e6;
    --info: #1d4ed8;     --info-bg: #dbeafe;

    --radius: 20px;
    --shadow-sm: 0 1px 2px rgba(7,26,61,.04), 0 6px 18px rgba(7,26,61,.06);
    --shadow-md: 0 2px 4px rgba(7,26,61,.05), 0 16px 40px rgba(7,26,61,.12);
    --ring: 0 0 0 4px rgba(59,130,246,.22);
    --grad: linear-gradient(135deg, #1d4ed8 0%, #2563eb 48%, #0ea5e9 100%);
    --grad-soft: linear-gradient(135deg, rgba(37,99,235,.10), rgba(14,165,233,.08));
    --glow: 0 10px 30px rgba(37,99,235,.38);
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--text);
    background:
        radial-gradient(1100px 480px at 88% -8%, rgba(59,130,246,.11), transparent 60%),
        radial-gradient(900px 420px at -8% 6%, rgba(14,165,233,.08), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(59,130,246,.25); }

/* หัวข้อทั้งหมดใช้ฟอนต์ sans เดียวกัน ให้ดูเรียบทันสมัย */
h1, h2, h3, h4, [class*="title"], .stat-value, .brand-text, .brand-name, .welcome-name,
.gpa-hero-value, .page-title, .modal-box h3 {
    font-family: 'Prompt', 'IBM Plex Sans Thai', system-ui, sans-serif !important;
    letter-spacing: -.01em;
}

/* ── Scrollbar ─────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #b9c8e6 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #b9c8e6; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #93a8d3; background-clip: content-box; border: 2px solid transparent; }

/* ── Focus ที่มองเห็นชัด (รองรับคีย์บอร์ด) ─────────────── */
:focus-visible { outline: 3px solid rgba(59,130,246,.55); outline-offset: 2px; border-radius: 8px; }

/* ── Sidebar ───────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(190deg, #071a3d 0%, #0f2f66 60%, #123a7c 100%) !important;
    border-right: 0 !important;
    box-shadow: 8px 0 40px rgba(7,26,61,.18);
}
.sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
.brand-icon, .brand-logo {
    background: var(--grad) !important; color: #fff !important; border: 0 !important;
    border-radius: 12px !important; box-shadow: 0 6px 18px rgba(37,99,235,.45);
}
.nav-section { color: rgba(147,197,253,.55) !important; letter-spacing: .12em; font-size: .66rem !important; font-weight: 700; }
.nav-item {
    margin: 2px 12px !important; border-radius: 12px !important; border-left: 0 !important;
    color: rgba(226,232,255,.68) !important; transition: background .18s, color .18s, transform .18s;
}
.nav-item i { opacity: .9; }
.nav-item:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; transform: translateX(2px); }
.nav-item.active {
    background: linear-gradient(135deg, rgba(59,130,246,.55), rgba(2,132,199,.38)) !important;
    color: #fff !important; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(147,197,253,.28), 0 6px 18px rgba(37,99,235,.30);
}
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.07) !important; }
.sidebar-footer a { border-radius: 12px; transition: background .18s, color .18s; }
.sidebar-footer a:hover { background: rgba(244,63,94,.14) !important; color: #fda4af !important; }

/* ── Top bar (กระจกฝ้า) ───────────────────────────────── */
.topbar {
    background: rgba(7,26,61,.84) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    box-shadow: 0 8px 30px rgba(7,26,61,.18) !important;
}
.topbar-title { font-weight: 700 !important; }
.year-badge, .welcome-chip, .meta-chip {
    background: rgba(96,165,250,.16) !important; border: 1px solid rgba(147,197,253,.28) !important;
    color: #bfdbfe !important; border-radius: 99px !important;
}
.avatar, .user-avatar {
    background: var(--grad) !important; color: #fff !important; border: 0 !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.40);
}
.user-btn, .user-btn-top { border-radius: 99px !important; transition: background .18s; }
.user-btn:hover { background: rgba(255,255,255,.09) !important; }

/* เมนู dropdown */
.dropdown-menu, .user-dropdown, .drop-menu {
    border: 1px solid var(--border) !important; border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important; overflow: hidden;
}
.dropdown-item, .drop-item, .dropdown-item-custom, .user-dropdown a {
    transition: background .15s, color .15s;
}
.dropdown-item:hover, .drop-item:hover, .dropdown-item-custom:hover, .user-dropdown a:hover { background: #eff6ff !important; }

/* ── แบนเนอร์ต้อนรับ ──────────────────────────────────── */
.welcome-banner {
    background: linear-gradient(120deg, #071a3d 0%, #0b2f73 45%, #1d4ed8 100%) !important;
    border-radius: 24px !important; border: 0 !important;
    box-shadow: 0 18px 50px rgba(29,78,216,.28) !important; position: relative; overflow: hidden;
}
.welcome-banner::before, .welcome-banner::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(147,197,253,.35), transparent 70%);
}
.welcome-banner::before { width: 360px; height: 360px; right: -90px; top: -150px; }
.welcome-banner::after  { width: 240px; height: 240px; left: 25%; bottom: -150px; opacity: .6; }
.gpa-hero { background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 20px !important; }

/* ── การ์ด ─────────────────────────────────────────────── */
.stat-card, .card, .content-card, .search-card, .mini-card, .action-card, .student-card,
.summary-bar, .backup-card, .semester-block, .import-info-box, .profile-card, .bstat {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
}
.stat-card, .mini-card, .action-card { transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s; }
.stat-card:hover, .mini-card:hover, .action-card:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-md) !important; border-color: #bfdbfe !important;
}
.stat-icon, .mini-icon, .tip-icon {
    border-radius: 14px !important;
}
.stat-value { font-weight: 800 !important; letter-spacing: -.02em; }
.card-header, .card-toolbar, .card-title, .section-title { border-color: var(--border) !important; }
.page-title { font-weight: 800 !important; letter-spacing: -.02em; }
.page-sub { color: var(--muted) !important; }
.breadcrumb-pill { opacity: .85; }

/* ── ตาราง ─────────────────────────────────────────────── */
.data-table, .grade-table, .backup-table { border-collapse: separate !important; border-spacing: 0; width: 100%; }
.data-table thead th, .grade-table thead th, .backup-table thead th {
    background: #f3f7ff !important; color: #64748b !important;
    font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .07em;
    border-bottom: 1px solid var(--border) !important; white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.data-table tbody td, .grade-table tbody td, .backup-table tbody td { border-bottom: 1px solid #e6edfb !important; }
.data-table tbody tr, .grade-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover, .grade-table tbody tr:hover, .backup-table tbody tr:hover { background: #eaf2ff !important; }
.data-table tbody tr:last-child td, .grade-table tbody tr:last-child td { border-bottom: 0 !important; }
.table-wrap, .table-responsive, .data-wrap { border-radius: var(--radius); overflow-x: auto; }

/* ── ปุ่ม ──────────────────────────────────────────────── */
.btn-primary, .btn-save, .btn-submit, .btn-search, .btn-print, .btn-import, .btn-add, .btn-pw-submit {
    background: var(--grad) !important; color: #fff !important; border: 0 !important;
    border-radius: 12px !important; font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(37,99,235,.30);
    transition: transform .16s, box-shadow .16s, filter .16s;
}
.btn-primary:hover, .btn-save:hover, .btn-submit:hover, .btn-search:hover, .btn-print:hover, .btn-import:hover, .btn-add:hover {
    transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,99,235,.38); filter: brightness(1.05);
}
.btn-primary:active, .btn-save:active, .btn-submit:active, .btn-search:active { transform: translateY(0) scale(.98); }
.btn-green, .btn-save-green { background: linear-gradient(135deg,#059669,#10b981) !important; color:#fff !important; border:0 !important; border-radius:12px !important; box-shadow: 0 6px 16px rgba(5,150,105,.28); }
.btn-delete, .btn-save-danger { border-radius: 12px !important; }
.btn-save-danger { background: linear-gradient(135deg,#be123c,#e11d48) !important; color:#fff !important; border:0 !important; box-shadow: 0 6px 16px rgba(225,29,72,.28); }
.btn-cancel, .btn-clear, .btn-modal-close, .btn-icon, .btn-edit {
    border-radius: 12px !important; transition: background .16s, border-color .16s, transform .16s;
}
.btn-cancel:hover, .btn-clear:hover { background: #eff6ff !important; border-color: #bfdbfe !important; }
.btn-icon:hover, .btn-edit:hover, .btn-delete:hover { transform: translateY(-1px); }
button, .btn-primary, a.btn { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ── ฟอร์ม ─────────────────────────────────────────────── */
.field-input, .field-select, input[type="text"], input[type="password"], input[type="number"],
input[type="search"], input[type="email"], input[type="file"], select, textarea {
    border-radius: 12px !important; border: 1.5px solid #cfdcf2 !important; background: #fff;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.field-input:focus, input:focus, select:focus, textarea:focus {
    border-color: #3b82f6 !important; box-shadow: var(--ring) !important; outline: none;
}
.field-label, .field-label-modal, label { font-weight: 600; }
.field-hint { color: var(--muted); }

/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay {
    background: rgba(7,26,61,.55) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal-box {
    border-radius: 24px !important; border: 1px solid rgba(255,255,255,.4);
    box-shadow: 0 30px 80px rgba(7,26,61,.35) !important;
    animation: tm-pop .28s cubic-bezier(.22,1,.36,1);
}
.modal-head { border-bottom: 1px solid var(--border) !important; }
.modal-foot { border-top: 1px solid var(--border) !important; background: #f8faff; border-radius: 0 0 24px 24px; }
@keyframes tm-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── Toast / Alert ─────────────────────────────────────── */
.toast {
    border-radius: 16px !important; border-left-width: 5px !important;
    box-shadow: 0 14px 40px rgba(7,26,61,.20) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.alert {
    display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
    padding: .9rem 1.1rem; margin: 0 0 1.1rem; border-radius: 14px; font-size: .92rem;
    border: 1px solid transparent; animation: tm-pop .3s ease;
}
.alert-success { background: var(--success-bg); color: #065f46; border-color: #a7f3d0; }
.alert-danger  { background: var(--danger-bg);  color: #9f1239; border-color: #fecdd3; }
.alert-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.alert-info    { background: var(--info-bg); color: #1e40af; border-color: #bfdbfe; }
.alert .btn-close { background: none; border: 0; font-size: 1.1rem; line-height: 1; color: inherit; opacity: .55; cursor: pointer; padding: 0 .25rem; }
.alert .btn-close::before { content: "\00d7"; font-size: 1.4rem; }
.alert .btn-close:hover { opacity: 1; }
.alert.is-hiding { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }

/* ── ป้ายสถานะ / เกรด ──────────────────────────────────── */
.status-badge, .grade-badge, .gb, .chip, .filter-tag { border-radius: 99px !important; font-weight: 700; }
.sem-pill, .pag-btn, .pg-link { border-radius: 12px !important; transition: background .16s, border-color .16s, transform .16s; }
.sem-pill:hover, .pag-btn:hover, .pg-link:hover { transform: translateY(-1px); border-color: #93c5fd !important; }
.sem-pill.active, .pag-btn.active, .pg-link.active { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(37,99,235,.30); }

.empty-state { color: var(--muted); }
.empty-state i { color: #bfdbfe !important; }

/* ── Top nav ของฝั่งนักศึกษา ───────────────────────────── */
.topnav-link, .mnav-link { border-radius: 12px !important; }
.topnav-link.active, .mnav-link.active, .topnav-link:hover, .mnav-link:hover {
    background: rgba(96,165,250,.22) !important; color: #fff !important; border-color: rgba(147,197,253,.30) !important;
}

/* ── หน้า Login ───────────────────────────────────────── */
.panel-left {
    background: radial-gradient(900px 500px at 20% 0%, #1e40af 0%, transparent 60%),
                linear-gradient(160deg, #071a3d 0%, #0b2f73 100%) !important;
}
.geo { background: radial-gradient(circle, rgba(147,197,253,.20), transparent 70%) !important; border-color: rgba(147,197,253,.12) !important; }
.panel-right { background: #fff; }
.divider-gold, .heading-line { background: var(--grad) !important; border-radius: 99px; }
.btn-pw-toggle { border-radius: 10px !important; }

/* ── หน้าเปลี่ยนรหัสผ่านนักศึกษา ───────────────────────── */
.pw-bar {
    display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.5rem;
    background: rgba(7,26,61,.86); color: #dbeafe; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pw-back { color: #bfdbfe; text-decoration: none; font-weight: 500; display: inline-flex; gap: .4rem; align-items: center; }
.pw-back:hover { color: #fff; }
.pw-user { font-size: .88rem; opacity: .8; }
.pw-wrap { max-width: 460px; margin: 2.5rem auto; padding: 0 1rem; }
.pw-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 2rem; box-shadow: var(--shadow-md); }
.pw-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 1.5rem; box-shadow: 0 10px 24px rgba(37,99,235,.35); }
.pw-card h1 { font-size: 1.45rem; font-weight: 800; margin: 1rem 0 .15rem; }
.pw-sub { color: var(--muted); margin: 0 0 1.4rem; font-size: .92rem; }
.pw-card label { display: block; font-size: .85rem; margin: 1rem 0 .35rem; }
.pw-card input { width: 100%; padding: .75rem .9rem; font: inherit; box-sizing: border-box; }
.pw-card button { width: 100%; margin-top: 1.5rem; padding: .85rem; font: inherit; font-weight: 600; color: #fff; background: var(--grad); border: 0; border-radius: 12px; box-shadow: 0 8px 20px rgba(37,99,235,.32); transition: transform .16s, box-shadow .16s; }
.pw-card button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(37,99,235,.4); }

/* ── แอนิเมชันเข้าหน้า ────────────────────────────────── */
.main-inner > *, .main > .content-grid, .page-wrap > * { animation: tm-rise .5s cubic-bezier(.22,1,.36,1) both; }
.main-inner > *:nth-child(2) { animation-delay: .04s; } .main-inner > *:nth-child(3) { animation-delay: .08s; }
.main-inner > *:nth-child(4) { animation-delay: .12s; } .main-inner > *:nth-child(5) { animation-delay: .16s; }
@keyframes tm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) {
    .modal-box { border-radius: 20px !important; }
    .stat-card:hover, .mini-card:hover { transform: none; }
    .data-table thead th { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* แถบสีหัวการ์ดสถิติ (แทนแถบซ้ายเดิม) */
.stat-card { overflow: hidden; }
.stat-card::before { left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important; width: auto !important; height: 4px !important; border-radius: 0 !important; }
.stat-card.s-navy::before  { background: linear-gradient(90deg,#2563eb,#60a5fa) !important; }
.stat-card.s-gold::before  { background: linear-gradient(90deg,#0284c7,#38bdf8) !important; }
.stat-card.s-teal::before  { background: linear-gradient(90deg,#0ea5e9,#38bdf8) !important; }
.stat-card.s-green::before { background: linear-gradient(90deg,#10b981,#34d399) !important; }
.s-navy .stat-icon { background: rgba(37,99,235,.10) !important; color: #2563eb !important; }
.s-gold .stat-icon { background: rgba(2,132,199,.10) !important; color: #0284c7 !important; }
.s-teal .stat-icon { background: rgba(14,165,233,.10) !important; color: #0284c7 !important; }
.s-green .stat-icon { background: rgba(16,185,129,.12) !important; color: #059669 !important; }

/* ปุ่มหลักที่เดิมเป็นสีทอง → ไล่เฉดม่วงน้ำเงิน ตัวอักษรขาว */
.btn-primary-gold, .btn-gold, .btn-save, .btn-add-gold {
    background: var(--grad) !important; color: #fff !important; border: 0 !important;
    border-radius: 12px !important; box-shadow: 0 6px 16px rgba(37,99,235,.30);
    transition: transform .16s, box-shadow .16s, filter .16s;
}
.btn-primary-gold:hover, .btn-gold:hover, .btn-save:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37,99,235,.38); filter: brightness(1.05); }
.btn-secondary-outline { border-radius: 12px !important; }
.btn-save-green { background: linear-gradient(135deg,#059669,#10b981) !important; }

/* ให้แถบข้างอยู่เหนือ topbar เพื่อให้เห็นโลโก้/ชื่อระบบ */
.sidebar { z-index: 210 !important; }
.sidebar-overlay { z-index: 205 !important; }

.gpa-hero-value { color: #fff !important; text-shadow: 0 4px 24px rgba(147,197,253,.55); }

@media (max-width: 640px) {
    .grade-table, .data-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .user-btn > span, .user-btn-top > span { display: none; }
    .pw-wrap { margin: 1.25rem auto; }
}

/* ═══════════ WOW LAYER — ฟ้า Aurora ═══════════ */

/* พื้นหลังออโรร่าเคลื่อนไหวช้า ๆ */
body {
    background:
        radial-gradient(900px 520px at 92% -10%, rgba(59,130,246,.20), transparent 60%),
        radial-gradient(800px 480px at -6% 4%, rgba(14,165,233,.15), transparent 58%),
        radial-gradient(700px 420px at 50% 112%, rgba(56,189,248,.14), transparent 60%),
        var(--bg) !important;
    background-attachment: fixed !important;
}

/* Sidebar: ทะเลลึก + ประกายเรืองแสง */
.sidebar {
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(59,130,246,.28), transparent 65%),
        radial-gradient(360px 300px at 100% 100%, rgba(14,165,233,.22), transparent 65%),
        linear-gradient(190deg, #071a3d 0%, #0b2a5e 55%, #123a7c 100%) !important;
}
.nav-item.active {
    background: linear-gradient(135deg, rgba(59,130,246,.55), rgba(14,165,233,.38)) !important;
    box-shadow: inset 0 0 0 1px rgba(147,197,253,.35), 0 8px 24px rgba(37,99,235,.40) !important;
}
.nav-item.active i { color: #bfdbfe; filter: drop-shadow(0 0 6px rgba(147,197,253,.7)); }
.brand-icon, .brand-logo { background: var(--grad) !important; box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.35) !important; }

/* Top bar */
.topbar, .topnav-wrap, header.topbar {
    background: linear-gradient(90deg, rgba(7,26,61,.90), rgba(9,27,82,.86)) !important;
}

/* แบนเนอร์ต้อนรับ: ไล่เฉดเคลื่อนไหว + ประกาย */
.welcome-banner {
    background: linear-gradient(120deg, #071a3d 0%, #1e4fa8 38%, #2563eb 78%, #0ea5e9 115%) !important;
    background-size: 200% 200% !important;
    animation: tm-flow 14s ease-in-out infinite;
    box-shadow: 0 24px 60px rgba(37,99,235,.32) !important;
}
.welcome-banner::before { background: radial-gradient(circle, rgba(147,197,253,.40), transparent 70%) !important; animation: tm-float 9s ease-in-out infinite; }
.welcome-banner::after  { background: radial-gradient(circle, rgba(56,189,248,.35), transparent 70%) !important; animation: tm-float 11s ease-in-out infinite reverse; }
.gpa-hero { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.30) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 40px rgba(7,26,61,.25); }
.gpa-hero-value { color: #fff !important; text-shadow: 0 0 28px rgba(147,197,253,.85), 0 4px 18px rgba(7,26,61,.35) !important; }

@keyframes tm-flow  { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes tm-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-24px,18px) scale(1.12); } }

/* การ์ดสถิติ: แถบสีเรืองแสง + ไอคอนไล่เฉด */
.stat-card { position: relative; }
.stat-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(280px 120px at 100% 0%, rgba(59,130,246,.16), transparent 70%); transition: opacity .3s;
}
.stat-card:hover::after { opacity: 1; }
.stat-card:hover { border-color: #93c5fd !important; box-shadow: 0 18px 44px rgba(37,99,235,.20) !important; }
.stat-card.s-navy::before  { background: linear-gradient(90deg,#2563eb,#60a5fa) !important; }
.stat-card.s-gold::before  { background: linear-gradient(90deg,#0284c7,#38bdf8) !important; }
.stat-card.s-teal::before  { background: linear-gradient(90deg,#0ea5e9,#38bdf8) !important; }
.stat-card.s-green::before { background: linear-gradient(90deg,#1e40af,#60a5fa) !important; }
.s-navy .stat-icon  { background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important; color: #1d4ed8 !important; }
.s-gold .stat-icon  { background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important; color: #1d4ed8 !important; }
.s-teal .stat-icon  { background: linear-gradient(135deg,#e0f2fe,#bae6fd) !important; color: #0369a1 !important; }
.s-green .stat-icon { background: linear-gradient(135deg,#dbeafe,#bfdbfe) !important; color: #1e40af !important; }
.stat-value {
    background: linear-gradient(135deg,#0b1b3a 30%,#2563eb); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ปุ่มหลัก: เรืองแสง + ประกายวิ่งผ่านตอน hover */
.btn-primary, .btn-save, .btn-submit, .btn-search, .btn-print, .btn-import, .btn-add, .btn-primary-gold, .btn-gold {
    background: var(--grad) !important; background-size: 160% 160% !important; position: relative; overflow: hidden;
    box-shadow: 0 8px 22px rgba(37,99,235,.36), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.btn-primary::after, .btn-save::after, .btn-submit::after, .btn-search::after, .btn-primary-gold::after, .btn-gold::after {
    content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); transition: left .6s;
}
.btn-primary:hover::after, .btn-save:hover::after, .btn-submit:hover::after, .btn-search:hover::after,
.btn-primary-gold:hover::after, .btn-gold:hover::after { left: 130%; }
.btn-primary:hover, .btn-save:hover, .btn-submit:hover, .btn-search:hover, .btn-primary-gold:hover, .btn-gold:hover {
    box-shadow: 0 14px 32px rgba(37,99,235,.46), inset 0 1px 0 rgba(255,255,255,.3) !important; background-position: 100% 50% !important;
}

/* หัวตาราง + แถวที่ชี้ */
.data-table tbody tr:hover, .grade-table tbody tr:hover { background: linear-gradient(90deg, #eaf2ff, #f0f6ff) !important; box-shadow: inset 3px 0 0 #3b82f6; }
.grade-table thead th { background: #1d4ed8 !important; color: #fff !important; border-bottom: 0 !important; }
.grade-table thead th:first-child { border-top-left-radius: 14px; } .grade-table thead th:last-child { border-top-right-radius: 14px; }

/* ฟอร์ม */
.field-input:focus, input:focus, select:focus, textarea:focus { border-color: #3b82f6 !important; box-shadow: var(--ring) !important; }

/* ป้ายเกรด */
.grade-A { box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.grade-F { box-shadow: 0 0 0 3px rgba(225,29,72,.12); }

/* ปุ่มเลือกภาคเรียน/หน้า */
.sem-pill.active, .pag-btn.active, .pg-link.active { box-shadow: 0 8px 22px rgba(37,99,235,.38) !important; }

/* Modal กระจก */
.modal-overlay { background: radial-gradient(800px 500px at 50% 0%, rgba(37,99,235,.25), transparent 70%), rgba(7,26,61,.60) !important; }
.modal-box { box-shadow: 0 40px 100px rgba(7,26,61,.45), 0 0 0 1px rgba(147,197,253,.25) !important; }

/* Alert */
.alert-info { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }

/* ─── หน้า Login: ออโรร่า + การ์ดฟอร์มกระจก ─── */
.panel-left {
    background:
        radial-gradient(700px 480px at 15% 10%, rgba(96,165,250,.55), transparent 60%),
        radial-gradient(600px 460px at 90% 90%, rgba(14,165,233,.50), transparent 62%),
        radial-gradient(500px 400px at 70% 20%, rgba(56,189,248,.34), transparent 60%),
        linear-gradient(160deg, #071a3d 0%, #0b2a5e 55%, #1e4fa8 100%) !important;
    background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100% !important;
    animation: tm-aurora 16s ease-in-out infinite alternate;
}
@keyframes tm-aurora {
    0%   { background-position: 0% 0%, 100% 100%, 70% 20%, 0 0; }
    100% { background-position: 30% 25%, 70% 80%, 40% 50%, 0 0; }
}
.panel-left .logo-wrap, .panel-left .logo-box, .panel-left img { filter: drop-shadow(0 12px 32px rgba(96,165,250,.45)); }
.panel-right {
    background:
        radial-gradient(500px 360px at 100% 0%, rgba(59,130,246,.10), transparent 70%),
        radial-gradient(420px 320px at 0% 100%, rgba(14,165,233,.08), transparent 70%), #fff !important;
}
.btn-pw-toggle:hover { color: #2563eb !important; }

/* เปลี่ยนรหัสผ่านนักศึกษา */
.pw-bar { background: linear-gradient(90deg, rgba(7,26,61,.92), rgba(9,27,82,.90)); }
.pw-card { box-shadow: 0 30px 70px rgba(37,99,235,.16), 0 0 0 1px rgba(147,197,253,.35); }

/* เลื่อนเข้าแบบไล่ลำดับ (stagger) ให้ดูมีชีวิต */
.stat-card { animation: tm-rise .6s cubic-bezier(.22,1,.36,1) both; }
.stat-card:nth-child(2) { animation-delay: .06s; } .stat-card:nth-child(3) { animation-delay: .12s; } .stat-card:nth-child(4) { animation-delay: .18s; }

} /* end @media screen */