/* ============================================================
   DujiaoNext Theme v1.1 — 基于 dujiaoka-next 风格迁移
   Tailwind 风格实用工具类 + 自定义组件
   ============================================================ */

/* --- CSS Variables (Light) --- */
:root {
  --color-white: #ffffff;
  --color-black: #000000;

  /* Zinc palette */
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Blue palette */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  /* Red palette */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-800: #991b1b;

  /* Green palette */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-800: #166534;

  /* Amber/Yellow palette */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-800: #92400e;

  /* Gray neutral */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Theme colors */
  --bg-primary: var(--zinc-50);
  --bg-secondary: var(--zinc-100);
  --bg-card: var(--color-white);
  --bg-sidebar: var(--color-white);
  --bg-navbar: rgba(255,255,255,0.6);
  --border-color: var(--zinc-200);
  --text-primary: var(--zinc-900);
  --text-secondary: var(--zinc-500);
  --text-muted: var(--zinc-400);
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-light: var(--blue-50);
  --danger: var(--red-500);
  --success: var(--green-500);
  --warning: var(--amber-500);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --radius-sm: 0.375rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --sidebar-width: 260px;
  --navbar-height: 64px;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  --bg-primary: var(--zinc-900);
  --bg-secondary: var(--zinc-800);
  --bg-card: var(--zinc-900);
  --bg-sidebar: var(--zinc-900);
  --bg-navbar: rgba(24,24,27,0.6);
  --border-color: var(--zinc-700);
  --text-primary: var(--zinc-100);
  --text-secondary: var(--zinc-400);
  --text-muted: var(--zinc-500);
  --accent: var(--blue-400);
  --accent-hover: var(--blue-500);
  --accent-light: rgba(37,99,235,0.1);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.3);
  --shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color 0.2s, color 0.2s;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; }

ul, ol { list-style: none; }

/* --- Utility Classes --- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-0 { min-height: 0; }

.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-0 { padding-top: 0; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pl-4 { padding-left: 1rem; }
.pr-4 { padding-right: 1rem; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }

.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-zinc-400 { color: var(--zinc-400); }
.text-zinc-500 { color: var(--zinc-500); }
.text-zinc-600 { color: var(--zinc-600); }
.text-zinc-700 { color: var(--zinc-700); }
.text-zinc-900 { color: var(--zinc-900); }
.text-blue-600 { color: var(--blue-600); }
.text-blue-400 { color: var(--blue-400); }
.text-red-500 { color: var(--red-500); }
.text-red-600 { color: var(--red-600); }
.text-green-500 { color: var(--green-500); }
.text-green-600 { color: var(--green-600); }
.text-amber-600 { color: var(--amber-600); }
.text-muted { color: var(--text-muted); }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }

.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: 9999px; }
.rounded-none { border-radius: 0; }

.border { border: 1px solid var(--border-color); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }

.border-zinc-200 { border-color: var(--zinc-200); }
.border-zinc-700 { border-color: var(--zinc-700); }
.border-blue-200 { border-color: var(--blue-200); }
.border-blue-800 { border-color: var(--blue-800); }
.border-red-200 { border-color: var(--red-200); }
.border-red-800 { border-color: var(--red-800); }
.border-green-200 { border-color: var(--green-200); }
.border-green-800 { border-color: var(--green-800); }
.border-amber-200 { border-color: var(--amber-200); }
.border-amber-800 { border-color: var(--amber-800); }

.bg-white { background-color: var(--color-white); }
.bg-zinc-50 { background-color: var(--zinc-50); }
.bg-zinc-100 { background-color: var(--zinc-100); }
.bg-zinc-200 { background-color: var(--zinc-200); }
.bg-zinc-800 { background-color: var(--zinc-800); }
.bg-zinc-900 { background-color: var(--zinc-900); }
.bg-blue-50 { background-color: var(--blue-50); }
.bg-red-50 { background-color: var(--red-50); }
.bg-green-50 { background-color: var(--green-50); }
.bg-amber-50 { background-color: var(--amber-50); }
.bg-transparent { background-color: transparent; }
.bg-card { background-color: var(--bg-card); }

.hover\:bg-zinc-50:hover { background-color: var(--zinc-50); }
.hover\:bg-zinc-100:hover { background-color: var(--zinc-100); }
.hover\:bg-zinc-800:hover { background-color: var(--zinc-800); }
.hover\:bg-blue-50:hover { background-color: var(--blue-50); }

[data-theme="dark"] .dark\:bg-zinc-800 { background-color: var(--zinc-800); }
[data-theme="dark"] .dark\:bg-zinc-900 { background-color: var(--zinc-900); }
[data-theme="dark"] .dark\:bg-zinc-900\/20 { background-color: rgba(24,24,27,0.2); }
[data-theme="dark"] .dark\:bg-blue-900\/20 { background-color: rgba(30,58,138,0.2); }
[data-theme="dark"] .dark\:bg-red-900\/20 { background-color: rgba(127,29,29,0.2); }
[data-theme="dark"] .dark\:bg-green-900\/20 { background-color: rgba(20,83,45,0.2); }
[data-theme="dark"] .dark\:bg-amber-900\/20 { background-color: rgba(120,53,15,0.2); }
[data-theme="dark"] .dark\:border-zinc-700 { border-color: var(--zinc-700); }
[data-theme="dark"] .dark\:text-white { color: var(--color-white); }
[data-theme="dark"] .dark\:text-zinc-100 { color: var(--zinc-100); }
[data-theme="dark"] .dark\:text-zinc-300 { color: var(--zinc-300); }
[data-theme="dark"] .dark\:text-zinc-400 { color: var(--zinc-400); }
[data-theme="dark"] .dark\:text-blue-400 { color: var(--blue-400); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

.transition { transition: all 0.2s ease; }
.transition-colors { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.transition-shadow { transition: box-shadow 0.2s; }
.duration-300 { transition-duration: 0.3s; }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ============================================================
   THEME LAYOUT
   ============================================================ */

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--navbar-height);
  background: var(--bg-navbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
}

.navbar-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand:hover { color: var(--text-primary); opacity: 0.8; }

.navbar-brand img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 2rem;
}

.navbar-nav a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}
.navbar-nav a:hover,
.navbar-nav a.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Sidebar toggle button (mobile) */

/* Floating sidebar toggle (mobile only) */
.floating-toggle {
  display: none;
  position: fixed;
  bottom: calc(1.25rem + 56px);
  right: 1.25rem;
  z-index: 30;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
.floating-toggle:hover {
  transform: scale(1.05);
  background: var(--accent-hover);
}
.floating-toggle svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 1023px) {
  .floating-toggle { display: flex; }
  .main-inner { padding: 1rem; }
}
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  margin-right: 0.5rem;
}
.sidebar-toggle:hover { background: var(--bg-secondary); }
.sidebar-toggle svg { width: 24px; height: 24px; }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
}

.sidebar-overlay.open { display: block; }

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  min-height: var(--navbar-height);
}

.sidebar-header .brand-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
}

.sidebar-header .brand-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.sidebar-header .brand-name:hover {
  overflow: visible;
  animation: marquee-scroll 8s linear infinite;
}

.sidebar-close {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
}
.sidebar-close svg { width: 20px; height: 20px; }

.sidebar-nav {
  flex: 1;
  padding: 0.75rem;
  overflow-y: auto;
}

.sidebar-section-title {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.sidebar-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.sidebar-item.active {
  background: var(--accent-light);
  color: var(--accent);
}
.sidebar-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-item .badge {
  margin-left: auto;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--accent);
  color: white;
}

/* Collapsible sidebar category menu */
.sidebar-category-toggle {
  cursor: pointer;
  user-select: none;
}
.sidebar-category-toggle .collapse-arrow {
  margin-left: auto;
  transition: transform 0.25s ease;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
.sidebar-category-toggle.expanded .collapse-arrow {
  transform: rotate(180deg);
}

.sidebar-sub-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-left: 0;
}
.sidebar-sub-list.open {
  max-height: 600px;
}

.sidebar-sub-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem 0.5rem 2.5rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.sidebar-sub-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.sidebar-sub-item .sub-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
}
.sidebar-sub-item .sub-count {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
}

/* Main content area */
.main-wrapper {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-inner {
  flex: 1;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.card-body { padding: 1.25rem; }
.card-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-xl { padding: 0.875rem 2rem; font-size: 1.125rem; height: 3rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-outline:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--zinc-300);
}
.btn-outline.active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
}

.btn-danger {
  background: var(--red-500);
  color: white;
  border-color: var(--red-500);
}
.btn-danger:hover:not(:disabled) {
  background: var(--red-600);
  border-color: var(--red-600);
  color: white;
}

.btn-success {
  background: var(--green-500);
  color: white;
  border-color: var(--green-500);
}

/* Form inputs */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}
.form-label .optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  font-family: inherit;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.form-input::placeholder { color: var(--text-muted); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 2rem;
}
.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.form-error {
  font-size: 0.75rem;
  color: var(--red-500);
  margin-top: 0.25rem;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  line-height: 1.25rem;
}
.badge-blue {
  background: var(--blue-100);
  color: var(--blue-700);
}
.badge-green {
  background: var(--green-100);
  color: var(--green-800);
}
.badge-red {
  background: var(--red-100);
  color: var(--red-800);
}
.badge-amber {
  background: var(--amber-100);
  color: var(--amber-800);
}
.badge-zinc {
  background: var(--zinc-200);
  color: var(--zinc-700);
}

[data-theme="dark"] .badge-blue { background: rgba(59,130,246,0.2); color: var(--blue-400); }
[data-theme="dark"] .badge-green { background: rgba(22,163,74,0.2); color: var(--green-400); }
[data-theme="dark"] .badge-red { background: rgba(220,38,38,0.2); color: var(--red-400); }
[data-theme="dark"] .badge-amber { background: rgba(217,119,6,0.2); color: var(--amber-400); }
[data-theme="dark"] .badge-zinc { background: var(--zinc-700); color: var(--zinc-300); }

/* Alert */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid;
  margin-bottom: 1.5rem;
}
.alert-icon { flex-shrink: 0; margin-top: 0.125rem; }
.alert-icon svg { width: 20px; height: 20px; }
.alert-content { flex: 1; }
.alert-title { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.alert-body { font-size: 0.875rem; }
.alert-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0.25rem;
}
.alert-close:hover { opacity: 1; }
.alert-close svg { width: 16px; height: 16px; }

.alert-info {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-800);
}
.alert-success {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-800);
}
.alert-danger {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-800);
}
.alert-warning {
  background: var(--amber-50);
  border-color: var(--amber-200);
  color: var(--amber-800);
}

[data-theme="dark"] .alert-info { background: rgba(30,58,138,0.2); border-color: var(--blue-800); color: var(--blue-400); }
[data-theme="dark"] .alert-success { background: rgba(20,83,45,0.2); border-color: var(--green-800); color: var(--green-400); }
[data-theme="dark"] .alert-danger { background: rgba(127,29,29,0.2); border-color: var(--red-800); color: var(--red-400); }
[data-theme="dark"] .alert-warning { background: rgba(120,53,15,0.2); border-color: var(--amber-800); color: var(--amber-400); }

/* Table */
.table-container {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
table.data-table thead {
  background: var(--bg-secondary);
}
table.data-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
table.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}
table.data-table tbody tr:hover { background: var(--bg-secondary); }
table.data-table tbody tr:last-child td { border-bottom: none; }

/* Product list */
.product-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.product-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: all 0.15s;
  max-width: 100%;
  overflow: hidden;
}
.product-item:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.product-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.product-item .product-cover {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-secondary);
}

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

.product-item .product-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-item .product-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.product-item .product-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--red-500);
}

.product-item .product-stock {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* Product action area (right side, fixed position) */
.product-item .product-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  min-width: 34px;
  justify-content: center;
}

/* Cart button fixed on right */
.product-item .cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  background: var(--accent);
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(59,130,246,0.3);
}
.product-item .cart-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(59,130,246,0.4);
}
.product-item .cart-btn svg {
  width: 16px;
  height: 16px;
}

/* Category chips (tab-style) */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.category-tab:hover { background: var(--bg-card); color: var(--text-primary); }
.category-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.category-tab .count {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

/* Search input */
.search-box {
  position: relative;
}
.search-box .search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.search-box .search-icon svg { width: 16px; height: 16px; }
.search-box input {
  width: 100%;
  padding: 0.625rem 0.875rem 0.625rem 2.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}
.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.search-box input::placeholder { color: var(--text-muted); }

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.spinner-lg { width: 2rem; height: 2rem; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}
.empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.empty-state h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.empty-state p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1.5rem;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.15s;
}
.pagination a:hover {
  background: var(--bg-secondary);
  border-color: var(--zinc-300);
}
.pagination .active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.pagination .disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Footer */
.footer {
  text-align: center;
  padding: 1.5rem 2rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

/* Flash messages (toast) */
.toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 420px;
  width: calc(100% - 2rem);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease;
  cursor: pointer;
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
.toast-success { background: var(--green-50); border-color: var(--green-200); color: var(--green-800); }
.toast-error { background: var(--red-50); border-color: var(--red-200); color: var(--red-800); }
.toast-info { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-800); }
.toast-warning { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-800); }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.modal-title { font-size: 1.125rem; font-weight: 600; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.25rem;
}
.modal-close svg { width: 20px; height: 20px; }
.modal-body { padding: 1.5rem; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
}

/* Authentication pages (centered card) */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--bg-secondary);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}

.auth-card .auth-header {
  text-align: center;
  margin-bottom: 2rem;
}
.auth-card .auth-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}
.auth-card .auth-title {
  font-size: 1.5rem;
  font-weight: 700;
}
.auth-card .auth-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Radio & Checkbox styling */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.radio-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.radio-item:hover { border-color: var(--accent); }
.radio-item.selected {
  border-color: var(--accent);
  background: var(--accent-light);
}
.radio-item input[type="radio"],
.radio-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* Password strength indicator */
.password-strength {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.password-strength .bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border-color);
  transition: background 0.3s;
}

/* ============================================================
   SPECIFIC PAGES
   ============================================================ */

/* Buy / Item page */
.buy-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .buy-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.buy-product-gallery {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.buy-product-form {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: calc(var(--navbar-height) + 1rem);
}

.buy-product-form .price-display {
  text-align: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.buy-product-form .price-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--red-500);
}

.buy-product-form .price-original {
  font-size: 1rem;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 0.5rem;
}

/* Order detail page */
.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.order-detail-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.order-detail-value {
  font-size: 0.9375rem;
  color: var(--text-primary);
}

/* Card info display */
.card-info-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem;
  font-family: monospace;
  font-size: 0.875rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
}

/* Notice / Announcement */
.notice-banner {
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

[data-theme="dark"] .notice-banner {
  background: rgba(120,53,15,0.2);
  border-color: var(--amber-800);
}

.notice-banner svg {
  width: 24px;
  height: 24px;
  color: var(--amber-500);
  flex-shrink: 0;
}

.notice-banner .notice-content {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--amber-800);
}

[data-theme="dark"] .notice-banner .notice-content {
  color: var(--amber-200);
}

/* User center dashboard */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.stat-card .stat-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}
.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Responsive */
@media (max-width: 1023px) {
  .navbar-nav { display: none; }
  .main-inner { padding: 1rem; }
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-close { display: block; }
  .sidebar-toggle { display: flex; }
  .main-content {
    margin-left: 0;
  }
  .main-inner {
    padding: 1rem;
  }
  .buy-layout {
    grid-template-columns: 1fr;
  }
  .grid-cols-3, .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .navbar-actions .btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
  .theme-toggle svg { width: 16px !important; height: 16px !important; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  .product-item { flex-wrap: nowrap; gap: 0.5rem; width: 100%; align-items: flex-start; }
  .product-item .product-cover { width: 40px; height: 40px; margin-top: 2px; }
  .product-item .product-info { min-width: 0; flex: 1; overflow: hidden; }
  .product-item .product-name { font-size: 0.8125rem; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  .product-item .product-price { font-size: 0.875rem; }
  .product-item .product-meta { gap: 0.25rem; flex-wrap: wrap; overflow: hidden; align-items: center; }
  .product-item .product-stock { font-size: 0.6875rem; white-space: nowrap; }
  .product-item .badge { font-size: 0.625rem; padding: 0.125rem 0.3rem; white-space: nowrap; }
  .product-item .product-action { min-width: 28px; }
  .product-item .cart-btn { width: 24px; height: 24px; }
  .product-item .cart-btn svg { width: 13px; height: 13px; }
  /* Fix search box on mobile - full width */
  .search-box { max-width: 100% !important; margin-left: 0 !important; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .stat-card { padding: 0.75rem; }
  .stat-card .stat-value { font-size: 1.25rem; }
  .page-title { font-size: 1.25rem; }
  .main-inner { padding: 0.75rem; }
  .category-tabs { gap: 0.25rem; padding: 0.375rem; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; width: 100%; }
  .category-tab { padding: 0.375rem 0.5rem; font-size: 0.75rem; white-space: nowrap; flex-shrink: 0; }
  .buy-layout { grid-template-columns: 1fr; }
  .order-detail-grid { grid-template-columns: 1fr; }
  .card-body { padding: 0.75rem; }
}

/* Print */
@media print {
  .sidebar,
  .navbar,
  .sidebar-toggle,
  .footer { display: none; }
  .main-content { margin-left: 0; }
}

/* Utility: x-cloak for Alpine.js */
[x-cloak] { display: none !important; }

/* ===== Message Notification Dropdown ===== */
.uc-message-center { position:relative; }
.msg-btn {
  background:none; border:none; cursor:pointer; padding:6px;
  border-radius:var(--radius-md); color:var(--text-secondary);
  display:flex; align-items:center; position:relative;
  transition:background 0.2s,color 0.2s;
}
.msg-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }
.msg-badge {
  position:absolute; top:2px; right:2px; min-width:16px; height:16px;
  border-radius:8px; background:var(--red-500); color:#fff;
  font-size:10px; font-weight:600; line-height:16px; text-align:center;
  padding:0 4px; pointer-events:none; transition:transform 0.2s,opacity 0.2s;
}
.msg-badge.is-empty { transform:scale(0); opacity:0; }
.msg-dropdown {
  position:fixed; z-index:1000; display:none;
  width:320px; max-width:calc(100vw - 2rem);
  background:var(--bg-primary); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,0.12);
  margin-top:4px; overflow:hidden;
}
.msg-dropdown-head {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.75rem 1rem; font-size:0.875rem; font-weight:600;
  border-bottom:1px solid var(--border-color);
}
.msg-dropdown-count {
  margin-left:auto; font-size:0.75rem; font-weight:400; color:var(--text-muted);
  font-style:normal;
}
.msg-recent { max-height:300px; overflow-y:auto; }
.msg-item {
  display:flex; flex-direction:column; gap:0.125rem;
  padding:0.625rem 1rem; cursor:pointer; transition:background 0.15s;
  border-bottom:1px solid var(--border-color);
}
.msg-item:last-child { border-bottom:none; }
.msg-item:hover { background:var(--bg-secondary); }
.msg-item.unread { background:rgba(var(--accent-rgb,59,130,246),0.04); }
.msg-item-title { font-size:0.8125rem; font-weight:500; color:var(--text-primary); }
.msg-item-time { font-size:0.6875rem; color:var(--text-muted); }
.msg-empty { padding:2rem 1rem; text-align:center; color:var(--text-muted); font-size:0.875rem; }
.msg-loading {
  display:flex; gap:0.375rem; justify-content:center; padding:2rem 1rem;
}
.msg-loading i {
  width:8px; height:8px; border-radius:50%;
  background:var(--border-color);
  animation:msg-bounce 1.4s ease-in-out infinite both;
}
.msg-loading i:nth-child(1) { animation-delay:-0.32s; }
.msg-loading i:nth-child(2) { animation-delay:-0.16s; }
@keyframes msg-bounce {
  0%,80%,100% { transform:scale(0.6); opacity:0.4; }
  40% { transform:scale(1); opacity:1; }
}
.msg-dropdown-all {
  display:flex; align-items:center; justify-content:center; gap:0.375rem;
  padding:0.625rem 1rem; border-top:1px solid var(--border-color);
  font-size:0.8125rem; color:var(--accent); text-decoration:none;
  transition:background 0.15s;
}
.msg-dropdown-all:hover { background:var(--bg-secondary); }

/* ===== Ticket Badge ===== */
.ticket-btn {
  background:none; border:none; cursor:pointer; padding:6px;
  border-radius:var(--radius-md); color:var(--text-secondary);
  display:flex; align-items:center; position:relative;
  transition:background 0.2s,color 0.2s; text-decoration:none;
}
.ticket-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }
.ticket-badge {
  position:absolute; top:2px; right:2px; min-width:16px; height:16px;
  border-radius:8px; background:var(--amber-500); color:#fff;
  font-size:10px; font-weight:600; line-height:16px; text-align:center;
  padding:0 4px; pointer-events:none; transition:transform 0.2s,opacity 0.2s;
}
.ticket-badge.is-empty { transform:scale(0); opacity:0; }

/* ===== Theme Toggle Button ===== */
.theme-toggle-btn {
  background:none; border:none; cursor:pointer; padding:6px;
  border-radius:var(--radius-md); color:var(--text-secondary);
  display:flex; align-items:center;
  transition:background 0.2s,color 0.2s;
}
.theme-toggle-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }

/* ===== Sidebar User Section ===== */
.sidebar-user {
  padding:0.75rem 0.75rem 0.5rem;
  border-bottom:1px solid var(--border-color);
  margin:0 0.75rem;
}
.sidebar-user-top {
  display:flex; align-items:center; gap:0.625rem;
}
.sidebar-avatar {
  width:36px; height:36px; border-radius:50%; object-fit:cover;
  background:var(--bg-secondary); flex-shrink:0;
}
.sidebar-user-info { flex:1; min-width:0; }
.sidebar-user-name {
  font-size:0.875rem; font-weight:600; color:var(--text-primary);
}
.sidebar-user-badge {
  font-size:0.6875rem; color:var(--text-muted);
}
.sidebar-user-actions {
  display:flex; gap:0.125rem; flex-shrink:0;
}
.sidebar-user-actions a {
  padding:4px; border-radius:var(--radius-sm);
  color:var(--text-muted); text-decoration:none;
  transition:background 0.15s,color 0.15s;
}
.sidebar-user-actions a:hover { background:var(--bg-secondary); color:var(--text-primary); }

/* ===== Marquee auto-scroll for brand name ===== */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  15% { transform: translateX(0); }
  85% { transform: translateX(calc(-50% - 2rem)); }
  100% { transform: translateX(calc(-50% - 2rem)); }
}

/* ===== Mobile Site Header (logo + name above notice) ===== */
.mobile-site-header {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem 0.5rem;
}
.mobile-site-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.mobile-site-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 1023px) {
  .mobile-site-header { display: flex; }
}

/* ===== Mobile Bottom Navigation ===== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  z-index: 100;
  align-items: center;
  justify-content: space-around;
  padding: 0 env(safe-area-inset-bottom);
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  font-size: 10px;
  transition: color 0.15s;
  min-width: 48px;
}
.bottom-nav-item.active,
.bottom-nav-item:hover { color: var(--accent); }
.bottom-nav-item svg { display: block; }

@media (max-width: 1023px) {
  .bottom-nav { display: flex; }
  .main-inner { padding-bottom: calc(1rem + 56px); }
  .main-wrapper { padding-bottom: 56px; }
}

/* ===== Mobile Responsive Fixes ===== */
@media (max-width: 1023px) {
  html, body { overflow-x: hidden; }
  .main-wrapper { overflow-x: hidden; }
  .main-content { width: 100%; max-width: 100vw; overflow-x: hidden; margin-left: 0; }
  .main-inner { width: 100%; max-width: 100%; padding: 1rem; box-sizing: border-box; }
  .card { width: 100%; max-width: 100%; box-sizing: border-box; }
  .card-body { padding: 0.75rem; overflow-wrap: break-word; word-wrap: break-word; }
  img { max-width: 100%; height: auto; }
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { display: block; width: 100%; overflow-x: auto; }
  .ticket-create-layout, .ticket-detail-layout { grid-template-columns: 1fr; }
  .sidebar-user { flex-wrap: wrap; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .stat-card { padding: 0.75rem; }
  .stat-card .stat-value { font-size: 1.15rem; }
  .page-title { font-size: 1.15rem; }
  .page-subtitle { font-size: 0.8125rem; }
}

@media (max-width: 639px) {
  .data-table thead { display: none; }
  .data-table tr { display: block; margin-bottom: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
  .data-table td { display: block; text-align: right; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); }
  .data-table td:last-child { border-bottom: none; }
  .data-table td::before { content: attr(data-label); float: left; font-weight: 600; color: var(--text-muted); font-size: 0.8125rem; }
  .sidebar { width: 280px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .product-list { grid-template-columns: 1fr; }
}