/* DESIGN SYSTEM THEME TOKENS */
:root {
  --font-sans: 'Plus Jakarta Sans', 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* สเกลขนาดตัวอักษรหลักที่จะควบคุมทั้งระบบ */
.app {
  --font-scale: 1.0;
}

.app.font-md {
  --font-scale: 1.2;
  /* ขยายขึ้น 20% */
}

.app.font-lg {
  --font-scale: 1.4;
  /* ขยายขึ้น 40% */
}

body {
  background-color: #05070f;
  font-family: var(--font-sans);
  min-height: 100vh;
  display: block;
  width: 100%;
  overflow-x: hidden;
}

/* สไตล์หลักของแอปพลิเคชันรองรับ Multi-Theme */
.app {
  width: 100%;
  max-width: 100% !important;
  min-height: 100vh;
  background: var(--bg0);
  display: block;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, font-size 0.15s ease;
  font-size: calc(14px * var(--font-scale));
}

/* 1. DARK GUNDAM SPACE THEME (ธีมหลักอวกาศ ไซโคเฟรมเรืองแสง) */
.app.dark {
  --bg0: #0a0d16;      /* เนวี่อวกาศลึกสไตล์ Hangar ยามค่ำคืน */
  --bg1: #131726;      /* สีบอดี้โครงหุ่นยนต์ Dark Blue Armor */
  --bg2: #1c2238;      /* สีโครงเหล็กข้อต่อชั้นใน Inner Joint Steel */
  --t1: #f1f5f9;       /* ขาวเกราะสว่าง */
  --t2: #94a3b8;       /* เทาชุดดีคอล */
  --t3: #8496b0;
  --bdr: #2d3852;      /* เส้นตัด Panel Line ที่คมชัด */
  --nav-bg: #0d101c;

  --acc-blue: #3b82f6;    /* Gundam Classical Chest Blue */
  --acc-orange: #fbbf24;  /* Yellow/Gold V-Fin */
  --acc-green: #00f5d4;   /* Glowing Psychoframe Green */
  --acc-red: #ef4444;     /* Gundam Feet / Shield Red */
  --acc-purple: #c084fc;  /* Unicorn Psychoframe Purple */

  --badge-own-bg: rgba(0, 245, 212, 0.1);
  --badge-own-t: #00f5d4;
  --badge-pre-bg: rgba(251, 191, 36, 0.1);
  --badge-pre-t: #fbbf24;
  --btn-active-bg: rgba(59, 130, 246, 0.15);
}

/* 2. LIGHT FEDERATION HANGAR THEME (ธีมขาวเกราะสว่าง White Base Hangar) */
.app.light {
  --bg0: #f0f3f8;       /* ขาวเกราะภายนอก Off-White */
  --bg1: #ffffff;       /* สีชิ้นส่วนพลาสติกขาวสว่าง pure white panels */
  --bg2: #e2e8f0;       /* ช่องใส่ชิ้นส่วนดีเทลในแผงรันเนอร์ */
  --t1: #0f172a;
  --t2: #475569;
  --t3: #4f5e74;
  --bdr: #cbd5e1;       /* เส้นตัดพลาสติกคมๆ */
  --nav-bg: #ffffff;

  --acc-blue: #1e40af;   /* โทนน้ำเงินเข้มข้นโมเดลกันดั้ม */
  --acc-orange: #d97706; /* เหลืองมัสตาร์ดสติกเกอร์ V-Fin */
  --acc-green: #059669;  /* เขียวเซนเซอร์กล้องหัว */
  --acc-red: #dc2626;    /* แดงแผงพลาสติกชิ้นส่วนสำคัญ */
  --acc-purple: #7c3aed;

  --badge-own-bg: #e6fffa;
  --badge-own-t: #059669;
  --badge-pre-bg: #fffbeb;
  --badge-pre-t: #d97706;
  --btn-active-bg: rgba(30, 64, 175, 0.12);
}

.auth-page {
  display: none;
  padding: 40px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  background: #05070f;
  color: var(--t1);
  position: relative;
  overflow: hidden;
}

.auth-page.active {
  display: flex;
}

/* พื้นหลังวีดีโอสตรีมมิ่ง */
.video-background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* อัตราส่วน 16:9 */
  min-height: 100vh;
  min-width: 177.77vh; 
  opacity: 0.65; /* ปรับสว่างขึ้นสวยงามเห็นลวดลายชัดเจน */
  filter: brightness(0.85) contrast(1.1) saturate(1.2);
}

.bg-video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: none;
  opacity: 0.7; /* สว่างพอให้เห็นชัดเจน */
  filter: brightness(0.55) contrast(1.2) saturate(1.4) hue-rotate(10deg);
  z-index: 1;
  object-fit: cover; /* สำคัญมากสำหรับ <video> element */
  transition: opacity 0.8s ease;
}

.gundam-hud-canvas {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  opacity: 0.9 !important;
  z-index: 2; /* ดันแคนวาสมาอยู่เหนือวิดีโอ */
}

/* ขอบจอดับไล่สี Vignette แบบกึ่งโปร่งใสไม่ทับวิดีโอ */
.auth-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(5, 7, 15, 0.1) 20%, rgba(5, 7, 15, 0.8) 95%);
  z-index: 2;
  pointer-events: none;
}

.auth-wrapper {
  width: 100%;
  max-width: 380px;
  background: rgba(19, 23, 38, 0.85); /* ดีไซน์ Glassmorphism เกรดค็อกพิทกันดั้ม */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 36px 28px;
  border-radius: 20px;
  border: 1.5px solid rgba(59, 130, 246, 0.4) !important; /* กรอบส่องแสง Gundam Blue */
  position: relative;
  z-index: 10;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 24px rgba(59, 130, 246, 0.2);
  transition: opacity 0.4s ease;
}

.form-container-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.form-group {
  margin-bottom: 12px;
  text-align: left;
}

.form-group label {
  display: block;
  font-size: calc(12px * var(--font-scale));
  color: var(--t2);
  margin-bottom: 6px;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  color: var(--t1);
  padding: 12px;
  border-radius: 10px;
  font-size: calc(14px * var(--font-scale));
  outline: none;
  font-family: var(--font-sans);
}

.form-group select option {
  background: var(--bg1);
  color: var(--t1);
}

.btn-block {
  width: 100%;
  padding: 12px;
  background: var(--acc-blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: calc(14px * var(--font-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* สถานะสติกเกอร์ป้ายกำกับสินค้า (Badge System) */
.r-badge {
  font-size: calc(12px * var(--font-scale));
  padding: 4px 12px;
  border-radius: 99px;
  font-weight: 700;
  display: inline-block;
  text-align: center;
  min-width: 80px;
}

.r-badge.badge-own {
  background-color: var(--badge-own-bg);
  color: var(--badge-own-t);
}

.r-badge.badge-pre {
  background-color: var(--badge-pre-bg);
  color: var(--badge-pre-t);
}

.r-badge.badge-wish {
  background-color: rgba(196, 176, 255, 0.2);
  color: var(--acc-purple);
}

/* แถบหัวขอด้านบนสุดของระบบ (Header Topbar) */
.topbar {
  background: var(--nav-bg);
  padding: 14px 24px;
  border-bottom: 1px solid var(--bdr);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.topbar-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-left-block {
  min-width: 180px;
}

.topbar-title {
  font-size: calc(18px * var(--font-scale));
  font-weight: 700;
  color: var(--t1);
}

.topbar-sub {
  font-size: calc(12px * var(--font-scale));
  color: var(--acc-blue);
  margin-top: 2px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.icon-btn {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--t2);
  transition: all 0.2s ease;
}

.icon-btn i {
  font-size: calc(16px * var(--font-scale));
}

.icon-btn.active {
  background: var(--btn-active-bg);
  border-color: var(--acc-blue);
  color: var(--acc-blue);
}

.icon-btn.active-orange {
  background: rgba(255, 179, 71, 0.15);
  border-color: var(--acc-orange);
  color: var(--acc-orange);
}

/* ระบบเมนูดร็อปดาวน์โปรไฟล์แอดมิน/ผู้ใช้งาน */
.profile-trigger-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  padding: 4px 10px 4px 4px;
  border-radius: 99px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease;
}

.profile-trigger-btn:hover {
  border-color: var(--acc-blue);
}

.profile-trigger-avatar-container {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--bdr);
}

.profile-trigger-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.profile-trigger-text {
  font-size: calc(13px * var(--font-scale));
  font-weight: 600;
  color: var(--t1);
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-dropdown-menu {
  position: absolute;
  top: 48px;
  right: 0;
  width: 280px;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 16px;
  display: none;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}

.profile-dropdown-menu.show {
  display: flex;
}

.dropdown-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bdr);
}

.dropdown-avatar-big {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--acc-blue);
}

.dropdown-avatar-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

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

.dropdown-name {
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-email {
  font-size: calc(11px * var(--font-scale));
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.dropdown-role-badge {
  font-size: calc(10px * var(--font-scale));
  padding: 2px 6px;
  background: rgba(90, 171, 255, 0.15);
  color: var(--acc-blue);
  border-radius: 4px;
  font-weight: 700;
  display: inline-block;
  margin-top: 4px;
}

.dropdown-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: calc(13px * var(--font-scale));
  color: var(--t1);
}

.dropdown-item-link:hover {
  border-color: var(--acc-blue);
  background: var(--bg1);
}

.dropdown-item-link i {
  font-size: calc(16px * var(--font-scale));
}

/* พื้นที่แสดงผลแดชบอร์ดข้อมูล (Screen Viewports) */
.screen {
  width: 100%;
  max-width: 100% !important;
  margin: 0 auto;
  padding: 24px;
  padding-bottom: 90px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.main-content-area {
  min-width: 0;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

/* กล่องสรุปสถิติระดับยุทธวิธี (Summary Cards Grid) */
.cards-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  background: var(--bg1);
  border-radius: 14px;
  padding: 20px;
  border: 1px solid var(--bdr);
  min-height: 165px;
}

.card-accent {
  height: 3px;
  width: 32px;
  border-radius: 99px;
  margin-bottom: 14px;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.card-count-block {
  min-width: 70px;
}

.card-count {
  font-size: calc(32px * var(--font-scale));
  font-weight: 700;
  color: var(--t1);
  line-height: 1.1;
}

.card-count-sub {
  font-size: calc(12px * var(--font-scale));
  color: var(--t3);
  margin-top: 2px;
}

.card-main-value {
  text-align: right;
  min-width: 110px;
}

.card-main-value .val {
  font-size: calc(22px * var(--font-scale));
  font-weight: 700;
}

.card-main-value .lbl {
  font-size: calc(12px * var(--font-scale));
  color: var(--t3);
  text-align: right;
  margin-top: 2px;
}

.card-title {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.divider {
  height: 1px;
  background: var(--bdr);
  margin: 14px 0;
}

.card-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card-row .rl {
  font-size: calc(13px * var(--font-scale));
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.card-row .rr {
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

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

.prog-bar {
  height: 6px;
  background: var(--bg2);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 12px;
}

.prog-fill {
  height: 100%;
  border-radius: 99px;
}

.prog-labels {
  display: flex;
  justify-content: space-between;
  font-size: calc(12px * var(--font-scale));
  color: var(--t2);
  margin-top: 6px;
}

.section-hd {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--acc-blue);
  padding: 16px 0 10px 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* รายการการ์ดจำลองโมเดลหุ่นยนต์ (Inventory Items Layout) */
.items-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  cursor: pointer;
}

.r-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(22px * var(--font-scale));
  flex-shrink: 0;
}

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

.r-name {
  font-size: calc(15px * var(--font-scale));
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.r-meta {
  font-size: calc(13px * var(--font-scale));
  color: var(--t2);
  margin-top: 4px;
}

/* แถบเครื่องมือ ตัวกรอง และการจัดตาราง */
.col-page-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.search-bar-wrap {
  display: flex;
  gap: 10px;
  flex: 1;
  max-width: 500px;
  position: relative;
}

.search-input {
  width: 100%;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: calc(14px * var(--font-scale));
  color: var(--t1);
  outline: none;
}

.filter-btn,
.add-data-btn {
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 0 14px;
  color: var(--t2);
  cursor: pointer;
  font-size: calc(14px * var(--font-scale));
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
}

.add-data-btn {
  background: var(--acc-blue);
  color: #fff;
  border: none;
  font-weight: 600;
}

/* รายละเอียดหน้าเชิงลึกสินค้า (Technical Log Detail View) */
.detail-layout-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 16px;
}

.back-btn {
  color: var(--acc-blue);
  font-size: calc(14px * var(--font-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  min-width: 60px;
}

.detail-title {
  font-size: calc(16px * var(--font-scale));
  font-weight: 600;
  color: var(--t1);
}

.detail-card {
  background: var(--bg1);
  border-radius: 14px;
  border: 1px solid var(--bdr);
  padding: 20px;
}

.detail-thumb-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.detail-thumb {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(36px * var(--font-scale));
  flex-shrink: 0;
}

.detail-name {
  font-size: calc(18px * var(--font-scale));
  font-weight: 700;
  color: var(--t1);
}

.detail-series {
  font-size: calc(14px * var(--font-scale));
  color: var(--acc-orange);
  margin-top: 4px;
  font-weight: 500;
}

.detail-grade {
  font-size: calc(13px * var(--font-scale));
  color: var(--t2);
  margin-top: 2px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--bdr);
}

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

.info-label {
  font-size: calc(13px * var(--font-scale));
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-val {
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
  color: var(--t1);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--t3);
  font-size: calc(14px * var(--font-scale));
  width: 100%;
  grid-column: 1 / -1;
}

.empty-state i {
  font-size: calc(48px * var(--font-scale));
  display: block;
  margin-bottom: 14px;
  opacity: 0.5;
}

/* ฟังก์ชันการจัดการโปรไฟล์แผงควบคุมระบบ (Management Panel UI) */
.prof-banner-hud {
  background: linear-gradient(135deg, rgba(90, 171, 255, 0.1) 0%, rgba(196, 176, 255, 0.05) 100%);
  border: 1px dashed var(--acc-blue);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.mgmt-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--t2);
  cursor: pointer;
  text-align: left;
  font-size: calc(14px * var(--font-scale));
  font-family: var(--font-sans);
  transition: all 0.2s ease;
}

.mgmt-nav-btn:hover {
  background: var(--bg2) !important;
  color: var(--t1) !important;
}

.mgmt-nav-btn.active {
  background: var(--acc-blue) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(90, 171, 255, 0.25);
}

.mgmt-table-tr {
  border-bottom: 1px solid var(--bdr);
  transition: background 0.2s;
}

.mgmt-table-tr:hover {
  background: rgba(255, 255, 255, 0.01);
}

.table-role-badge {
  font-size: calc(11px * var(--font-scale));
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.table-role-badge.admin {
  background: rgba(196, 176, 255, 0.15);
  color: var(--acc-purple);
}

.table-role-badge.user {
  background: rgba(90, 171, 255, 0.15);
  color: var(--acc-blue);
}

.table-role-badge.pending {
  background: rgba(255, 179, 71, 0.15);
  color: var(--acc-orange);
}

/* แถบเมนูด้านล่างสำหรับโมบายล (Bottom Navigation Bar Mobile Only) */
.bottom-nav {
  background: var(--nav-bg);
  border-top: 1px solid var(--bdr);
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 100;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--t3);
  font-size: calc(11px * var(--font-scale));
  background: none;
  border: none;
}

.nav-btn i {
  font-size: calc(22px * var(--font-scale));
}

.nav-btn.active {
  color: var(--acc-blue);
  font-weight: 600;
}

/* หน้ากากป็อปอัพโมดอล (Modal Backdrop Layer) */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

/* RESPONSIVE LAYOUT MEDIA HUD */
@media (min-width: 768px) {
  .cards-wrap {
    grid-template-columns: repeat(3, 1fr);
  }

  .items-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-layout-container {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* ค้นหาหน้านี้ในไฟล์เดิมของคุณ แล้ววางทับส่วน @media (min-width: 1024px) เดิมได้เลย */
@media (min-width: 1024px) {
  .screen {
    grid-template-columns: 1fr;
    padding: 32px;
  }

  /* ซ่อนปุ่มโปรไฟล์บนเมนูด้านล่างของจอใหญ่เพื่อไม่ให้ซ้ำซ้อนกับ Topbar */
  #nav-pro {
    display: none !important;
  }

  .topbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  .bottom-nav {
    position: static !important;
    border-top: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1;
    width: auto !important;
    box-shadow: none !important;
  }

  .nav-btn {
    flex: none !important;
    flex-direction: row !important;
    gap: 6px;
    font-size: calc(13px * var(--font-scale));
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 500;
    min-width: auto !important;
    height: 36px;
    transition: all 0.15s ease;
    color: var(--t2);
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
  }

  .nav-btn i {
    font-size: calc(18px * var(--font-scale));
  }

  .nav-btn:hover {
    background: var(--bg2) !important;
    color: var(--t1) !important;
  }

  .nav-btn.active {
    background: var(--btn-active-bg) !important;
    border-color: var(--acc-blue) !important;
    color: var(--acc-blue) !important;
  }
}

/* SYSTEM TOAST NOTIFICATION POPUP SYSTEM */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast-popup {
  background: var(--bg1, #1c1d21);
  border: 1px solid var(--bdr, #32353e);
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--t1, #f0f0f0);
  font-size: 14px;
  font-weight: 500;
  min-width: 290px;
  max-width: 380px;
  animation: slideInToast 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: all 0.2s ease;
}

.toast-popup.success {
  border-left: 4px solid var(--acc-green, #3ddc84);
}

.toast-popup.error {
  border-left: 4px solid var(--acc-red, #ff6b6b);
}

.toast-popup.warning {
  border-left: 4px solid var(--acc-orange, #ffb347);
}

.toast-popup.info {
  border-left: 4px solid var(--acc-blue, #5aabff);
}

.toast-popup i {
  font-size: 18px;
}

.toast-popup.success i {
  color: var(--acc-green, #3ddc84);
}

.toast-popup.error i {
  color: var(--acc-red, #ff6b6b);
}

.toast-popup.warning i {
  color: var(--acc-orange, #ffb347);
}

.toast-popup.info i {
  color: var(--acc-blue, #5aabff);
}

@keyframes slideInToast {
  from {
    transform: translateX(120%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ======================================================== */
/* MODERN CENTER MODAL POPUP SYSTEM                         */
/* ======================================================== */
/* พื้นหลังมืดและเบลอ (Backdrop) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 7, 15, 0.4); /* ปรับให้โปร่งใสมากขึ้นเพื่อให้เห็นวิดีโอพื้นหลังชัดเจน */
  backdrop-filter: blur(4px); /* ลดความเบลอเพื่อให้วิดีโอพื้นหลังยังคงมองเห็นได้ชัด */
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* เมื่อสั่งเปิดคลาส active ให้แสดงผล */
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* กล่องข้อความกลางหน้าจอ */
.modal-box {
  background: var(--bg1, #1c1d21);
  border: 1px solid var(--bdr, #32353e);
  padding: 32px 24px;
  border-radius: 20px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* เอฟเฟกต์เด้งออกแบบนุ่มนวลเมื่อเปิด */
.modal-overlay.active .modal-box {
  transform: scale(1);
}

/* ส่วนหัวไอคอนวงกลม */
.modal-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  font-size: 28px;
}

.modal-icon-circle.success {
  background: rgba(61, 220, 132, 0.15);
  color: #3ddc84;
}

.modal-icon-circle.error {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.modal-icon-circle.info {
  background: rgba(90, 171, 255, 0.15);
  color: #5aabff;
}

.modal-title {
  color: var(--t1, #f0f0f0);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.modal-desc {
  color: var(--t2, #b0b3bb);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ปุ่มปิด/ตกลง */
.modal-btn {
  width: 100%;
  padding: 12px;
  background: var(--acc-blue, #5aabff);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: filter 0.2s;
}

.modal-btn:hover {
  filter: brightness(1.1);
}

/* ======================================================== */
/* DASHBOARD ENHANCEMENTS — Portfolio Banner, Chart, QA     */
/* ======================================================== */

/* Portfolio Total Banner */
.portfolio-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(90,171,255,0.12) 0%, rgba(61,220,132,0.06) 100%);
  border: 1px solid rgba(90,171,255,0.25);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  gap: 16px;
}

.portfolio-banner-label {
  font-size: calc(12px * var(--font-scale));
  color: var(--t3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.portfolio-banner-value {
  font-size: calc(28px * var(--font-scale));
  font-weight: 700;
  color: var(--acc-blue);
  line-height: 1;
  letter-spacing: -0.5px;
}

.portfolio-banner-right {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.portfolio-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--t1);
}

/* Bottom Row: Chart + Quick Actions */
.dash-bottom-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .dash-bottom-row {
    grid-template-columns: 1.4fr 1fr;
  }
  .portfolio-banner-right {
    gap: 28px;
  }
}

/* Chart Card */
.dash-chart-card,
.dash-quick-actions {
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 18px 20px;
}

.dash-chart-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
}

.dash-chart-title {
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  color: var(--t1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dash-chart-sub {
  font-size: calc(11px * var(--font-scale));
  color: var(--t3);
}

/* Bar Chart */
.dash-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bar-item {
  display: grid;
  grid-template-columns: 100px 1fr 70px;
  align-items: center;
  gap: 10px;
}

.bar-label {
  font-size: calc(12px * var(--font-scale));
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.bar-track {
  height: 8px;
  background: var(--bg2);
  border-radius: 99px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bar-val {
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  color: var(--t1);
  text-align: right;
}

/* Quick Actions Grid */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg2);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: calc(11px * var(--font-scale));
  color: var(--t2);
  font-family: var(--font-sans);
  font-weight: 500;
  transition: all 0.18s ease;
  text-align: center;
}

.qa-btn i {
  font-size: calc(20px * var(--font-scale));
}

.qa-btn:hover {
  background: var(--bg1);
  border-color: var(--acc-blue);
  color: var(--t1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ======================================================== */
/* ✨ VISUAL EFFECTS & ANIMATIONS — CRISP BORDERS & TIGHT SHADOWS  */
/* ======================================================== */

/* === 1. KEYFRAME ANIMATIONS === */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

/* === 2. PAGE ENTRY ANIMATION === */
.page.active {
  animation: fadeSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* === 3. TOPBAR GLASS + SOLID HIGHLIGHT === */
.topbar {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1.5px solid var(--bdr) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* === 4. SUMMARY CARDS — High Contrast Lift & Accent Borders === */
.summary-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
  border-color: var(--bdr) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.summary-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Sharp, precise outline border highlights on hover instead of fuzzy background glow */
.summary-card:has(.card-accent[style*="acc-green"]):hover {
  border-color: var(--acc-green) !important;
  box-shadow: 0 10px 24px -4px rgba(16, 185, 129, 0.15), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.summary-card:has(.card-accent[style*="acc-orange"]):hover {
  border-color: var(--acc-orange) !important;
  box-shadow: 0 10px 24px -4px rgba(245, 158, 11, 0.15), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.summary-card:has(.card-accent[style*="acc-purple"]):hover {
  border-color: var(--acc-purple) !important;
  box-shadow: 0 10px 24px -4px rgba(139, 92, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* === 5. RECENT ITEMS — Sharp Border highlight === */
.recent-item {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.recent-item:hover {
  transform: translateX(4px);
  border-color: var(--acc-blue) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* === 6. ADD/FILTER BUTTONS — Crisp shadows === */
.add-data-btn {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.add-data-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.add-data-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}

.filter-btn {
  transition: all 0.18s ease;
}

.filter-btn:hover {
  border-color: var(--acc-blue) !important;
  color: var(--t1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* === 7. INPUT FOCUS SHARP HIGHLIGHT === */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--acc-blue) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  transition: all 0.18s ease;
  background: var(--bg1) !important; /* สลับพื้นหลังสว่างขึ้นเมื่อพิมพ์ */
}

/* === 8. NAV BUTTON ACTIVE — Defined Border Indicator === */
.nav-btn.active {
  position: relative;
}

@media (min-width: 1024px) {
  .nav-btn.active {
    box-shadow: none !important;
    border: 1px solid var(--acc-blue) !important;
    background: rgba(59, 130, 246, 0.08) !important;
  }
}

/* === 9. ICON BUTTONS — Clean borders === */
.icon-btn {
  transition: all 0.18s ease;
}

.icon-btn:hover {
  transform: translateY(-1px);
  border-color: var(--acc-blue) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* === 10. PORTFOLIO BANNER — High Contrast Highlight === */
.portfolio-banner {
  border: 1.5px solid var(--bdr);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.05), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Shimmer sweep on banner */
.portfolio-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  animation: shimmer 4s ease-in-out infinite;
}

.portfolio-banner-value {
  color: var(--t1); /* ดูเด่นแบบสะอาดตา */
  text-shadow: none;
}

/* === 11. BAR FILL === */
#bar-own  { box-shadow: none; }
#bar-pre  { box-shadow: none; }
#bar-wish { box-shadow: none; }

/* === 12. DETAIL CARD === */
.detail-thumb {
  animation: floatY 4s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--bdr);
}

/* === 13. BADGE STYLE === */
.r-badge {
  border: 1px solid transparent;
}
.r-badge.badge-own  { border-color: rgba(16, 185, 129, 0.3); }
.r-badge.badge-pre  { border-color: rgba(245, 158, 11, 0.3); }
.r-badge.badge-wish { border-color: rgba(139, 92, 246, 0.3); }

/* === 14. DETAIL CARD === */
.detail-card:hover {
  border-color: var(--bdr) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* === 15. MODAL BOX — Clean & Sharp & Glassmorphism === */
.modal-box {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(28, 29, 33, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* === 16. MGMT NAV BUTTONS ACTIVE === */
.mgmt-nav-btn.active {
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25) !important;
}

/* === 17. ADMIN ROLE BADGES === */
.table-role-badge {
  border: 1px solid transparent;
}
.table-role-badge.admin   { border-color: rgba(139, 92, 246, 0.3); }
.table-role-badge.user    { border-color: rgba(59, 130, 246, 0.3); }
.table-role-badge.pending { border-color: rgba(245, 158, 11, 0.3); }

/* === 18. QA BUTTONS === */
.qa-btn {
  border: 1.5px solid var(--bdr) !important;
  background: var(--bg1); /* ใช้สีเดียวกับการ์ดเพื่อให้เด่นจากพื้นหลังบอร์ด */
}

.qa-btn:hover {
  border-color: var(--acc-blue) !important;
  background: var(--bg2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* === 19. LOGIN CARD === */
.auth-wrapper {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  border: 1.5px solid var(--bdr) !important;
}

.auth-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}

/* === 20. BTN-BLOCK === */
.btn-block {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.btn-block:hover {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35);
}

/* === 21. PROFILE DROPDOWN === */
.profile-dropdown-menu {
  border: 1.5px solid var(--bdr) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}

/* === 22. SECTION HEADER === */
.section-hd {
  text-shadow: none;
}

/* === 23. DASH CHART / QA CARD === */
.dash-chart-card,
.dash-quick-actions {
  border: 1.5px solid var(--bdr) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.dash-chart-card:hover,
.dash-quick-actions:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* === 24. SEARCH INPUT === */
.search-input {
  border: 1.5px solid var(--bdr) !important;
}

.search-input:focus {
  background: var(--bg1) !important;
}

/* === 25. TOAST POPUP === */
.toast-popup {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  border: 1.5px solid var(--bdr) !important;
}

/* === LIGHT MODE ADJUSTMENTS (softer borders) === */
.app.light .summary-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
.app.light .topbar { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.app.light .section-hd { text-shadow: none; }
.app.light .portfolio-banner-value { text-shadow: none; }

/* === 26. GUNDAM CYCLE BUTTON INTERACTIVE ACCENTS === */
.gundam-cycle-btn {
  background: rgba(0, 245, 212, 0.05) !important;
  border: 1px solid rgba(0, 245, 212, 0.3) !important;
  color: var(--acc-green) !important;
  margin-top: 14px;
  font-size: 11px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: bold;
  width: 100%;
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.1);
  outline: none;
}

.gundam-cycle-btn:hover {
  background: rgba(0, 245, 212, 0.16) !important;
  border-color: rgba(0, 245, 212, 0.7) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.35);
  transform: translateY(-1.5px);
}

.gundam-cycle-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.15);
}

/* === 27. SHAKE ERROR HUD ANIMATION === */
.shake {
  animation: shakeHUD 0.5s ease-in-out !important;
}

@keyframes shakeHUD {
  0%, 100% { transform: scale(1) translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: scale(1) translateX(-6px); }
  20%, 40%, 60%, 80% { transform: scale(1) translateX(6px); }
}

/* === 28. LOADING LOADER SPIN ANIMATION === */
.spin {
  display: inline-block !important;
  animation: spin 1s linear infinite !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === 29. MOBILE RESPONSIVE TOPBAR FIXES === */
@media (max-width: 768px) {
  .topbar {
    padding: 10px 14px !important;
  }
  .topbar-left-block {
    min-width: auto !important;
  }
  .topbar-title {
    font-size: 15px !important;
  }
  .topbar-sub {
    font-size: 10px !important;
  }
  .profile-trigger-text,
  .profile-trigger-btn .ti-chevron-down {
    display: none !important;
  }
  .profile-trigger-btn {
    padding: 4px !important;
    border-radius: 50% !important;
  }
  .topbar-right {
    gap: 8px !important;
  }
  .icon-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
  #btn-lang-toggle {
    font-size: 10px !important;
    padding: 0 4px !important;
    min-width: auto !important;
    height: 32px !important;
  }

  /* 📊 GUNDAM RESPONSIVE TABLE & BUTTON ALIGNMENTS ON MOBILE */
  .mgmt-table-tr th,
  .mgmt-table-tr td {
    white-space: nowrap !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  
  .mgmt-table-tr td button {
    margin: 0 4px !important;
    vertical-align: middle !important;
  }
  
  div[style*="overflow-x: auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }

  #master-data-table-body td {
    white-space: nowrap !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .filter-btn {
    padding: 0 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
  }
}

/* ========================================================================
   PHASE 6: ENHANCED MICRO-ANIMATIONS & INTERACTIONS (ข้อ 8, 9, 12)
   ======================================================================== */

/* === BUTTON RIPPLE EFFECT === */
.ripple-container {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* === BUTTON PRESS SCALE EFFECT === */
.btn-block, .add-data-btn, .modal-btn, .qa-btn, .mgmt-nav-btn, .filter-btn, .gundam-cycle-btn {
  position: relative;
  overflow: hidden;
}
.btn-block:active, .modal-btn:active, .filter-btn:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* === INPUT FOCUS GLOW ANIMATION === */
@keyframes focusGlow {
  0% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0); }
  50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
  100% { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: focusGlow 0.4s ease-out;
}

/* === SKELETON LOADING SHIMMER === */
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg1) 37%, var(--bg2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 8px;
}
.skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-card { height: 80px; border-radius: 12px; }
.skeleton-circle { width: 44px; height: 44px; border-radius: 50%; }

/* === SCROLL TO TOP BUTTON === */
.scroll-to-top {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--acc-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 90;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}
.scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}
.scroll-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
}
.scroll-to-top:active {
  transform: scale(0.9);
}

/* === ENHANCED TOAST WITH PROGRESS BAR === */
.toast-popup {
  position: relative;
  overflow: hidden;
}
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  animation: toastCountdown 3.5s linear forwards;
  border-radius: 0 0 12px 12px;
}
.toast-popup.success .toast-progress { background: var(--acc-green); }
.toast-popup.error .toast-progress { background: var(--acc-red); }
.toast-popup.warning .toast-progress { background: var(--acc-orange); }
.toast-popup.info .toast-progress { background: var(--acc-blue); }

@keyframes toastCountdown {
  from { width: 100%; }
  to { width: 0%; }
}

/* === LOADING OVERLAY === */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(5, 7, 15, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.loading-overlay.active { opacity: 1; pointer-events: auto; }
.loading-spinner {
  width: 48px; height: 48px;
  border: 3px solid var(--bdr);
  border-top-color: var(--acc-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-text {
  color: var(--t2);
  font-size: 14px;
  font-weight: 500;
}

/* === 2FA SETUP MODAL STYLES === */
.tfa-qr-container {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  display: inline-block;
  margin: 16px auto;
}
.tfa-qr-container img {
  width: 200px;
  height: 200px;
  display: block;
}
.tfa-secret-key {
  font-family: 'Courier New', monospace;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--acc-green);
  letter-spacing: 2px;
  word-break: break-all;
  text-align: center;
  margin: 12px 0;
  user-select: all;
}
.tfa-otp-input {
  font-size: 24px !important;
  text-align: center !important;
  letter-spacing: 8px !important;
  font-weight: 700 !important;
  font-family: 'Courier New', monospace !important;
}

/* === SECURITY DASHBOARD STYLES === */
.security-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.security-stat-card {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.security-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1;
}
.security-stat-label {
  font-size: 11px;
  color: var(--t3);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.security-file-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}
.security-file-status.ok {
  background: rgba(0, 245, 212, 0.06);
  color: var(--acc-green);
  border: 1px solid rgba(0, 245, 212, 0.2);
}
.security-file-status.modified {
  background: rgba(239, 68, 68, 0.06);
  color: var(--acc-red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* === BACKUP LIST STYLES === */
.backup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: border-color 0.2s ease;
}
.backup-item:hover {
  border-color: var(--acc-blue);
}
.backup-info { flex: 1; }
.backup-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}
.backup-meta {
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
}
.backup-actions {
  display: flex;
  gap: 8px;
}
.backup-btn {
  background: none;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--t2);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.backup-btn:hover {
  border-color: var(--acc-blue);
  color: var(--acc-blue);
}
.backup-btn.restore-btn:hover {
  border-color: var(--acc-orange);
  color: var(--acc-orange);
}

/* === FACEBOOK LOGIN BUTTON === */
.fb-login-btn {
  width: 100%;
  padding: 12px;
  background: #1877F2;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
  position: relative;
  overflow: hidden;
}
.fb-login-btn:hover {
  background: #166FE5;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(24, 119, 242, 0.4);
}
.fb-login-btn:active {
  transform: scale(0.97);
}
.fb-login-btn svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* === GUNDAM SERIES EXPLORER === */
.gundam-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gundam-series-card {
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  padding: 16px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.gundam-series-card:hover {
  transform: translateY(-4px);
  border-color: var(--acc-blue);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.gundam-series-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.gundam-series-subtitle {
  font-size: 12px;
  color: var(--acc-orange);
  font-weight: 500;
  margin-bottom: 8px;
}
.gundam-series-desc {
  font-size: 12px;
  color: var(--t3);
  line-height: 1.5;
}
.gundam-series-badge {
  display: inline-block;
  background: rgba(59, 130, 246, 0.1);
  color: var(--acc-blue);
  border: 1px solid rgba(59, 130, 246, 0.2);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 8px;
}

/* === CONFETTI PARTICLES === */
.confetti-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  animation: confettiFall 2s ease-out forwards;
}
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg) scale(0.3); }
}

/* === ADMIN SUB-TAB NAVIGATION === */
.admin-sub-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-sub-tab {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--bdr);
  background: var(--bg2);
  color: var(--t2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  font-family: var(--font-sans);
}
.admin-sub-tab:hover {
  border-color: var(--acc-blue);
  color: var(--t1);
}
.admin-sub-tab.active {
  background: var(--acc-blue);
  color: #fff;
  border-color: var(--acc-blue);
  font-weight: 600;
}

/* === SECURITY LOG TABLE === */
.security-log-item {
  display: grid;
  grid-template-columns: 130px 190px 1fr;
  gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bdr);
  font-size: 12px;
  align-items: center;
}
.security-log-item:last-child { border-bottom: none; }
.security-log-time { color: var(--t3); font-family: monospace; }
.security-log-action {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
}
.security-log-action.login { background: rgba(0, 245, 212, 0.1); color: var(--acc-green); }
.security-log-action.fail { background: rgba(239, 68, 68, 0.1); color: var(--acc-red); }
.security-log-action.system { background: rgba(59, 130, 246, 0.1); color: var(--acc-blue); }
.security-log-detail { color: var(--t2); }

/* === ENHANCED RESPONSIVE DESIGN (320px → 2560px) === */

/* Ultra-small phones (320px-374px) */
@media (max-width: 374px) {
  .auth-wrapper { padding: 24px 16px !important; max-width: 300px !important; }
  .portfolio-banner { flex-direction: column !important; text-align: center; }
  .portfolio-banner-right { justify-content: center; }
  .qa-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .bar-item { grid-template-columns: 70px 1fr 50px !important; }
  .toast-popup { min-width: auto !important; max-width: 280px !important; font-size: 12px !important; }
}

/* Small phones (375px-479px) */
@media (max-width: 479px) {
  .portfolio-banner { flex-direction: column; text-align: center; padding: 16px !important; }
  .portfolio-banner-right { justify-content: center; gap: 16px !important; }
  .security-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gundam-series-grid { grid-template-columns: 1fr !important; }
  .security-log-item { grid-template-columns: 1fr !important; gap: 4px; }
}

/* Tablets (480px-767px) */
@media (min-width: 480px) and (max-width: 767px) {
  .cards-wrap { grid-template-columns: repeat(2, 1fr) !important; }
  .gundam-series-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Large screens (1440px+) */
@media (min-width: 1440px) {
  .screen { max-width: 1400px !important; margin: 0 auto; }
  .items-list-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .gundam-series-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Ultra-wide (2560px+) */
@media (min-width: 2560px) {
  .screen { max-width: 1800px !important; }
  .items-list-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* === SAFE AREA INSETS (Notch devices) === */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  }
  .scroll-to-top {
    bottom: calc(90px + env(safe-area-inset-bottom));
  }
}

/* === TOUCH TARGET ENHANCEMENT (Mobile) === */
@media (hover: none) and (pointer: coarse) {
  .nav-btn { min-height: 44px !important; }
  .icon-btn { min-width: 44px !important; min-height: 44px !important; }
  .qa-btn { min-height: 56px !important; }
  .backup-btn { min-height: 36px !important; padding: 8px 12px !important; }
  .mgmt-nav-btn { min-height: 44px !important; }
  button, [role="button"] { min-height: 44px; }
}

/* === PRINT STYLES === */
@media print {
  .topbar, .bottom-nav, .scroll-to-top, .toast-container { display: none !important; }
  .page { display: block !important; }
  body { background: #fff !important; }
}

/* === REDUCED MOTION (Accessibility) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-to-top { transition: opacity 0.01ms !important; }
}

/* === UNIFIED SEARCH & FILTER PATTERN (SYSTEM-WIDE) === */
.unified-search-filter-group {
  display: flex;
  align-items: center;
  background: var(--bg2, #21232b);
  border: 1px solid var(--bdr, #32353e);
  border-radius: 8px;
  position: relative;
  width: 100%;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.unified-search-filter-group:focus-within {
  border-color: var(--acc-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.unified-search-filter-group .search-icon {
  position: absolute;
  left: 12px;
  color: var(--t3);
  pointer-events: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.unified-search-filter-group input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  color: var(--t1);
  padding: 10px 12px 10px 36px !important;
  font-size: calc(13px * var(--font-scale)) !important;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.unified-search-filter-group .filter-select-wrapper {
  border-left: 1px solid var(--bdr);
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.unified-search-filter-group select {
  background: transparent !important;
  border: none !important;
  color: var(--t2);
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  padding: 0 28px 0 8px;
  cursor: pointer;
  outline: none;
  height: 100%;
  min-width: 165px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23a0aec0%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.unified-search-filter-group select:hover {
  color: var(--t1);
}
.unified-search-filter-group select option {
  background: var(--bg1, #1c1d21);
  color: var(--t1);
}
.security-log-item {
  animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.security-log-header {
  display: grid;
  grid-template-columns: 130px 190px 1fr;
  gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bdr);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--t3);
  background: rgba(255, 255, 255, 0.02);
  box-sizing: border-box;
}

/* === ACCESSIBLE TABLE SYSTEM (ALL AGES) === */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
th {
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  font-size: calc(12px * var(--font-scale));
  letter-spacing: 0.5px;
  padding: 12px 10px;
  border-bottom: 2px solid var(--bdr);
}
td {
  padding: 14px 10px;
  color: var(--t1);
  font-size: calc(13px * var(--font-scale));
  border-bottom: 1px solid var(--bdr);
  transition: all 0.2s ease;
  vertical-align: middle;
}
tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.015);
}
tr:hover {
  background-color: rgba(255, 255, 255, 0.035) !important;
}

/* === BETTER BUTTON & INPUT ACCESSIBILITY === */
button, .nav-btn, .icon-btn, .add-data-btn, .filter-btn, .mgmt-nav-btn {
  font-family: var(--font-sans);
  letter-spacing: 0.25px;
  transition: all 0.2s ease;
}
input, select, textarea {
  font-family: var(--font-sans) !important;
}

/* === CUSTOM SEAMLESS DROPDOWN SYSTEM === */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  color: var(--t1);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: calc(14px * var(--font-scale));
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.custom-select-trigger:hover {
  border-color: rgba(59, 130, 246, 0.4);
}
.custom-select-trigger.open {
  border-color: var(--acc-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.custom-select-trigger i {
  color: var(--t3);
  font-size: 14px;
  transition: transform 0.2s ease;
}
.custom-select-trigger.open i {
  transform: rotate(180deg);
}
.custom-select-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: var(--bg1);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  z-index: 999;
  max-height: 220px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 6px;
  box-sizing: border-box;
}
.custom-select-options.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.custom-option {
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--t2);
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.custom-option:hover {
  background: rgba(255, 255, 255, 0.035);
  color: var(--t1);
}
.custom-option.selected {
  background: rgba(59, 130, 246, 0.15);
  color: var(--acc-blue);
  font-weight: 600;
}

/* Custom Scrollbar for Dropdowns */
.custom-select-options::-webkit-scrollbar {
  width: 6px;
}
.custom-select-options::-webkit-scrollbar-track {
  background: transparent;
}
.custom-select-options::-webkit-scrollbar-thumb {
  background: var(--bdr);
  border-radius: 3px;
}
.custom-select-options::-webkit-scrollbar-thumb:hover {
  background: var(--t3);
}