/* ===== MC Pack Manager - Minecraft 风格主题 ===== */

/* CDN 字体 - Minecraft 风格等宽像素字体 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  --mc-bg: #1e1e1e;
  --mc-bg-2: #2b2b2b;
  --mc-panel: #3a3a3a;
  --mc-border: #555555;
  --mc-border-dark: #222222;
  --mc-green: #4CAF50;
  --mc-green-dark: #2E7D32;
  --mc-gold: #FFAA00;
  --mc-red: #B22222;
  --mc-blue: #4A90D9;
  --mc-white: #E0E0E0;
  --mc-gray: #999999;
  --mc-text: #FFFFFF;
  --mc-text-dim: #AAAAAA;
}

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

html, body {
  font-family: 'VT323', 'Press Start 2P', monospace;
  font-size: 18px;
  background: var(--mc-bg);
  color: var(--mc-text);
  min-height: 100vh;
  image-rendering: pixelated;
}

/* 背景纹理 - 石头感 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(80,80,80,0.3) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(60,60,60,0.2) 2px, transparent 2px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
}

/* ===== 按钮 ===== */
.mc-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #fff;
  background: #7a7a7a;
  border: 0;
  padding: 10px 20px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  transition: filter 0.05s;
  box-shadow:
    inset -4px -4px 0 rgba(0,0,0,0.4),
    inset 4px 4px 0 rgba(255,255,255,0.25);
  image-rendering: pixelated;
}
.mc-btn:hover { filter: brightness(1.15); }
.mc-btn:active {
  box-shadow:
    inset 4px 4px 0 rgba(0,0,0,0.4),
    inset -4px -4px 0 rgba(255,255,255,0.15);
  filter: brightness(0.9);
}
.mc-btn:disabled {
  filter: grayscale(0.6) brightness(0.7);
  cursor: not-allowed;
}

.mc-btn-green { background: var(--mc-green); }
.mc-btn-red { background: var(--mc-red); }
.mc-btn-blue { background: var(--mc-blue); }
.mc-btn-gold { background: var(--mc-gold); color: #222; }

/* ===== 卡片 / 面板 ===== */
.mc-card {
  background: var(--mc-panel);
  padding: 20px;
  border: 3px solid var(--mc-border);
  box-shadow:
    inset -3px -3px 0 rgba(0,0,0,0.4),
    inset 3px 3px 0 rgba(255,255,255,0.1);
  position: relative;
}
.mc-card-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--mc-gold);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px dashed var(--mc-border);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

/* ===== 输入框 ===== */
.mc-input, .mc-select, .mc-textarea {
  font-family: 'VT323', monospace;
  font-size: 18px;
  background: #000;
  color: #fff;
  border: 2px solid var(--mc-border);
  padding: 10px 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  letter-spacing: 1px;
}
.mc-input:focus, .mc-select:focus, .mc-textarea:focus {
  border-color: var(--mc-gold);
}
.mc-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--mc-text-dim);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* ===== 进度条 ===== */
.mc-progress {
  width: 100%;
  height: 20px;
  background: #000;
  border: 2px solid var(--mc-border);
  position: relative;
  overflow: hidden;
}
.mc-progress-bar {
  height: 100%;
  background: linear-gradient(
    to right,
    var(--mc-green) 0%, var(--mc-green) 50%,
    var(--mc-green-dark) 50%, var(--mc-green-dark) 100%
  );
  background-size: 20px 20px;
  transition: width 0.2s ease;
  image-rendering: pixelated;
  position: relative;
}
.mc-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 8px,
    rgba(255,255,255,0.2) 8px, rgba(255,255,255,0.2) 10px
  );
  animation: progress-stripes 0.6s linear infinite;
}
@keyframes progress-stripes {
  from { transform: translateX(0); }
  to { transform: translateX(-20px); }
}
.mc-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

/* ===== 顶部导航 ===== */
.mc-navbar {
  background: var(--mc-bg-2);
  border-bottom: 3px solid var(--mc-border);
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 0 var(--mc-border-dark);
}
.mc-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--mc-green);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-logo-icon {
  width: 28px; height: 28px;
  background: var(--mc-green);
  box-shadow:
    inset -3px -3px 0 rgba(0,0,0,0.4),
    inset 3px 3px 0 rgba(255,255,255,0.3);
}
.mc-nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ===== 布局 ===== */
.mc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.mc-row { display: flex; gap: 20px; flex-wrap: wrap; }
.mc-col { flex: 1; min-width: 280px; }
.mc-full { width: 100%; }

/* ===== 标签 Badge ===== */
.mc-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 3px 8px;
  background: var(--mc-border);
  color: #fff;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mc-badge-green { background: var(--mc-green); }
.mc-badge-red { background: var(--mc-red); }
.mc-badge-blue { background: var(--mc-blue); }
.mc-badge-gold { background: var(--mc-gold); color: #222; }

/* ===== 步骤引导 ===== */
.mc-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 8px;
}
.mc-step {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  background: var(--mc-bg-2);
  border: 2px solid var(--mc-border);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--mc-text-dim);
  position: relative;
}
.mc-step.active {
  border-color: var(--mc-gold);
  color: var(--mc-gold);
  background: #4a3a00;
  box-shadow: inset 0 0 10px rgba(255,170,0,0.2);
}
.mc-step.done {
  border-color: var(--mc-green);
  color: var(--mc-green);
  background: #1a3a1a;
}
.mc-step-num {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

/* ===== 表格 ===== */
.mc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.mc-table th, .mc-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--mc-border);
}
.mc-table th {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--mc-gold);
  text-transform: uppercase;
  background: var(--mc-bg-2);
}
.mc-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ===== 文件上传区 ===== */
.mc-dropzone {
  border: 3px dashed var(--mc-border);
  background: var(--mc-bg-2);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mc-dropzone:hover, .mc-dropzone.drag {
  border-color: var(--mc-green);
  background: rgba(76,175,80,0.08);
}
.mc-dropzone-icon {
  font-size: 40px;
  margin-bottom: 10px;
  filter: grayscale(0.5);
}

/* ===== Toast ===== */
.mc-toast {
  position: fixed;
  top: 20px; right: 20px;
  background: var(--mc-panel);
  border: 2px solid var(--mc-gold);
  color: #fff;
  padding: 12px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  z-index: 1000;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  animation: toast-in 0.2s ease;
}
.mc-toast.error { border-color: var(--mc-red); }
.mc-toast.success { border-color: var(--mc-green); }
@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== Code 显示 ===== */
.mc-code {
  background: #000;
  border: 2px solid var(--mc-border);
  padding: 12px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
  color: #a5d6a7;
}

/* ===== 链接 ===== */
a { color: var(--mc-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
  background: #555;
  border: 2px solid #000;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.4);
}

/* ===== 存储条 ===== */
.mc-storage-bar {
  height: 16px;
  background: #000;
  border: 2px solid var(--mc-border);
  position: relative;
  overflow: hidden;
}
.mc-storage-fill {
  height: 100%;
  background: var(--mc-green);
  transition: width 0.3s;
}
.mc-storage-fill.warn { background: var(--mc-gold); }
.mc-storage-fill.crit { background: var(--mc-red); }

/* ===== Flex 工具 ===== */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-4 { margin-top: 16px; } .mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; } .mb-8 { margin-bottom: 32px; }
.p-4 { padding: 16px; } .p-8 { padding: 32px; }

/* ===== Grid ===== */
.mc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 800px) {
  .mc-grid-3 { grid-template-columns: 1fr; }
  .mc-steps { flex-wrap: wrap; }
  .mc-step { flex: 1 1 40%; }
}

/* ===== 大标题 ===== */
.mc-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  color: var(--mc-green);
  text-shadow:
    3px 3px 0 #0a2a0a,
    6px 6px 0 rgba(0,0,0,0.5);
  margin-bottom: 8px;
}
.mc-subtitle {
  font-size: 22px;
  color: var(--mc-text-dim);
  margin-bottom: 24px;
}

/* ===== 英雄区 ===== */
.mc-hero {
  text-align: center;
  padding: 60px 20px;
}
.mc-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.mc-feature {
  text-align: center;
  padding: 24px 16px;
}
.mc-feature-icon {
  font-size: 36px;
  margin-bottom: 10px;
}