/* ============================================
   大学城美食地图 - Neo-Brutalism 2.0 通用样式
   数字时代粗野复兴 / 高饱和撞色 / 硬阴影
   ============================================ */

/* CSS变量 - 新粗野主义色彩系统 */
:root {
  /* 背景 */
  --bg-primary: #F4F1EA;
  --bg-secondary: #FFFFFF;
  --border-black: #000000;

  /* 强调色 */
  --accent-orange: #FF4D00;
  --accent-orange-hover: #E64400;
  --accent-yellow: #FFE600;
  --accent-green: #00E55C;
  --accent-blue: #0066FF;
  --accent-pink: #FF0066;

  /* 文字 */
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-inverted: #FFFFFF;

  /* 状态色（保留语义，映射到荧光色） */
  --status-idle: #00E55C;
  --status-busy: #FFE600;
  --status-full: #9CA3AF;
  --status-queue: #FF0066;
  --status-closed: #9CA3AF;

  /* 兼容旧变量名 */
  --primary-500: #FF4D00;
  --primary-600: #E64400;
  --primary-50: #FFF0EB;
  --primary-100: #FFE0D6;
  --primary-700: #000;
  --secondary-50: #E6F9FF;
  --secondary-700: #000;
  --bg-canvas: #F4F1EA;
  --text-tertiary: #666666;
  --border: #000000;
  --border-light: #000000;

  /* 硬阴影 */
  --shadow-hard: 4px 4px 0px #000000;
  --shadow-hard-sm: 2px 2px 0px #000000;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* 圆角：直角或最大4px */
  --radius-sm: 0px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-full: 0px;
}

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Helvetica Neue", "Arial Black", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* 字体样式 - 粗黑无衬线 */
.text-hero {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.text-h2 {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.text-h3 {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.text-h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.text-body-lg {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.text-body {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.text-body-sm {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.text-caption {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* 数字强调：字重900，可配合放大 */
.text-number {
  font-weight: 900;
  font-size: 1.2em;
}

/* 按钮 - 硬边框 + 硬阴影，hover 阴影消失 + 位移 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  border: 2.5px solid var(--border-black);
  outline: none;
}

.btn-primary {
  background: var(--accent-orange);
  color: var(--text-inverted);
  box-shadow: var(--shadow-hard);
}

.btn-primary:hover {
  background: var(--accent-orange-hover);
  box-shadow: none;
  transform: translate(2px, 2px);
}

.btn-primary:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.btn-secondary {
  background: var(--accent-yellow);
  color: var(--text-primary);
  border: 2.5px solid var(--border-black);
  box-shadow: var(--shadow-hard);
}

.btn-secondary:hover {
  box-shadow: none;
  transform: translate(2px, 2px);
}

.btn-text,
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 2.5px solid var(--border-black);
  box-shadow: var(--shadow-hard);
}

.btn-text:hover,
.btn-ghost:hover {
  background: var(--border-black);
  color: var(--text-inverted);
  box-shadow: none;
  transform: translate(2px, 2px);
}

.btn-lg {
  height: 48px;
  padding: 0 var(--space-8);
  font-size: 16px;
}

.btn-sm {
  height: 32px;
  padding: 0 var(--space-4);
  font-size: 12px;
}

/* 卡片 - 白底黑边硬阴影 */
.card {
  background: var(--bg-secondary);
  border: 2.5px solid var(--border-black);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.card:hover {
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* 标签 - 直角矩形，高饱和底+黑字黑边 */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
  border: 2px solid var(--border-black);
}

.tag-scene {
  background: var(--accent-yellow);
  color: var(--text-primary);
}

.tag-status-idle {
  background: var(--accent-green);
  color: var(--text-primary);
  border: 2px solid var(--border-black);
}

.tag-status-busy {
  background: var(--accent-yellow);
  color: var(--text-primary);
  border: 2px solid var(--border-black);
}

.tag-status-full {
  background: var(--status-full);
  color: var(--text-primary);
  border: 2px solid var(--border-black);
}

.tag-status-queue {
  background: var(--accent-pink);
  color: var(--text-primary);
  border: 2px solid var(--border-black);
}

.status-idle { color: var(--accent-green); }
.status-busy { color: var(--accent-yellow); }
.status-full { color: var(--status-full); }
.status-queue { color: var(--accent-pink); }
.status-closed { color: var(--status-closed); }

/* 输入框 - 白底黑边无圆角 */
.input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  font-size: 14px;
  font-weight: 700;
  border: 2px solid var(--border-black);
  border-radius: 0;
  background: var(--bg-secondary);
  transition: border 0.1s ease;
}

.input:focus {
  outline: none;
  border-color: var(--border-black);
}

.input::placeholder {
  color: var(--text-secondary);
  font-weight: 700;
}

/* 搜索框 - 白底黑边 */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 48px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-black);
  border-radius: 0;
  transition: border 0.1s ease;
}

.search-box:focus-within {
  border-color: var(--border-black);
}

.search-box input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.m-4 { margin: var(--space-4); }

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* 硬切动效 0.1s */
@keyframes slideUp {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}

.animate-slide-up {
  animation: slideUp 0.1s ease;
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--accent-yellow);
}

.page-container {
  min-height: 100vh;
  background: var(--bg-primary);
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--text-secondary);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
  color: var(--text-secondary);
  text-align: center;
  font-weight: 700;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}