/* JTNav Design System */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei UI', sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
table { width: 100%; border-collapse: collapse; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

:root {
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --primary-alpha: rgba(37,99,235,0.06);
  --primary-alpha-md: rgba(37,99,235,0.12);
  --accent: #f59e0b;
  --danger: #ef4444; --danger-hover: #dc2626;
  --success: #10b981; --success-hover: #059669;
  --warning: #f59e0b; --info: #3b82f6;

  --bg: #f8fafc; --bg-white: #ffffff;
  --bg-hover: #f1f5f9; --bg-active: #e2e8f0;

  --text: #0f172a; --text-secondary: #475569;
  --text-light: #64748b; --text-lighter: #94a3b8;

  --border: #e2e8f0; --border-light: #f1f5f9; --border-dark: #cbd5e1;

  --radius: 12px; --radius-sm: 8px; --radius-xs: 6px;
  --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow: 0 3px 6px -4px rgba(0,0,0,0.05), 0 6px 16px -4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.05), 0 10px 24px -4px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px -4px rgba(0,0,0,0.08), 0 16px 48px -8px rgba(0,0,0,0.06);

  --scrollbar: #cbd5e1; --scrollbar-hover: #94a3b8;
  --sidebar-width: 260px; --header-height: 60px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 0.2s; --duration-md: 0.3s;
  --transition: all var(--duration) var(--ease);
  --transition-md: all var(--duration-md) var(--ease);
}

/* Admin overrides — Carbon Design System */
.admin-layout {
  --primary: #0F62FE; --primary-hover: #0043CE;
  --primary-light: #EDF5FF;
  --primary-alpha: rgba(15,98,254,0.08);
  --primary-alpha-md: rgba(15,98,254,0.15);
  --radius: 0px; --radius-sm: 0px; --radius-xs: 0px;
  --radius-lg: 0px; --radius-xl: 0px; --radius-full: 9999px;
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --shadow: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.2);
  --danger: #DA1E28; --danger-hover: #b91c1c;
  --success: #198038; --success-hover: #106b2e;
  --warning: #F1C21B;
  --bg: #F4F4F4; --bg-white: #FFFFFF;
  --text: #161616; --text-secondary: #525252;
  --text-light: #6b6b6b; --text-lighter: #A8A8A8;
  --border: #E0E0E0; --border-light: #E0E0E0; --border-dark: #8D8D8D;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border: none; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: var(--transition-md); line-height: 1.2;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(37,99,235,0.3); }
.admin-layout .btn-primary:hover { box-shadow: 0 4px 14px -2px rgba(99,102,241,0.35); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-hover); color: #fff; }
.btn-secondary { background: #475569; color: #fff; }
.btn-secondary:hover { background: #334155; color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid var(--border-dark); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-alpha); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: var(--radius-xs); }
.btn-lg { padding: 12px 28px; font-size: 15px; border-radius: var(--radius-sm); }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; }
.badge-primary { background: var(--primary-alpha-md); color: var(--primary); }
.badge-success { background: #ecfdf5; color: #059669; }
.badge-danger { background: #fef2f2; color: #dc2626; }
.badge-warning { background: #fffbeb; color: #d97706; }
.badge-top { background: #fbbf24; color: #fff; }
.badge-secondary { background: #f1f5f9; color: #64748b; }

/* ---- Cards ---- */
.card { background: var(--bg-white); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: var(--space-5, 20px); box-shadow: var(--shadow-xs); }

/* ---- Forms ---- */
.form-group { margin-bottom: var(--space-4, 16px); }
.form-group label { display: block; font-size: 13px; color: var(--text); margin-bottom: 6px; font-weight: 600; }
.form-group label .required { color: var(--danger); }
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="color"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; transition: var(--transition); background: #fff; color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-alpha-md);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-lighter); }
.form-group .hint { font-size: 12px; color: var(--text-lighter); margin-top: 5px; }
.form-row { display: flex; gap: var(--space-4, 16px); }
.form-row .form-group { flex: 1; }
.radio-group { display: flex; gap: 20px; }
.radio-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 400; }
.radio-group input[type="radio"] { width: 16px; height: 16px; accent-color: var(--primary); }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 400; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }

/* ---- Flash Messages ---- */
.flash-msg { padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13px; font-weight: 500; animation: slideDown 0.3s var(--ease-out); }
.flash-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.flash-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.flash-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ---- Pagination ---- */
.pagination { display: flex; align-items: center; gap: 4px; justify-content: center; margin-top: 24px; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-secondary); background: #fff; min-width: 36px;
  transition: var(--transition); font-weight: 500;
}
.page-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-alpha); text-decoration: none; }
.page-btn.active { background: var(--primary); color: #fff; border-color: transparent; }
.page-btn.disabled { color: var(--text-lighter); pointer-events: none; background: var(--bg); }

/* ---- Modal ---- */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1000; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }
.modal { background: #fff; border-radius: var(--radius-xl); padding: 24px; max-width: 420px; width: 90%; box-shadow: var(--shadow-lg); animation: modalIn 0.3s var(--ease-spring); }
.modal h3 { margin-bottom: 12px; font-size: 17px; font-weight: 700; }
.modal p { margin-bottom: 20px; color: var(--text-secondary); font-size: 14px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- Utility ---- */
.pc-only { display: block; }
.mobile-only { display: none; }
.hidden { display: none; }
.text-center { text-align: center; }
.text-muted { color: var(--text-lighter); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

/* ---- Animations ---- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }