* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, PingFang SC, Microsoft YaHei, sans-serif; }
/* 吸底页脚布局：页面最小高度撑满视口，主区域自适应，页脚置底 */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* 统一深色主题变量 */
:root {
  --dark-bg: #0f1117;
  --dark-bg-soft: #121419;
  --dark-panel: #121419;
  --dark-border: #2b3142;
  --dark-text: #e5e7eb;
  --dark-text-muted: #8b93a6;
  --accent: #7c3aed;
  --accent-600: #6d28d9;
}

.site-header { position: sticky; top:0; background:#0f1117; border-bottom:1px solid #1f2330; color:#e5e7eb; z-index:100; }
.site-header .container { max-width: 1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; }
.site-header .brand { font-weight:600; }
.site-header .nav a { color:#cbd5e1; text-decoration:none; margin-right:12px; }
.site-header .nav a:hover { color:#fff; }
.site-header .auth { color:#a1a7b3; }
.site-main { padding: 16px; }
.site-footer { border-top:1px solid #1f2330; padding: 16px; color:#a1a7b3; background:#0f1117; }
.container { max-width: 1200px; margin:0 auto; padding:0 16px; }
.container.narrow { max-width: 1200px; }

/* 基础按钮 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border:1px solid #2b3142; border-radius:8px; background:#1b2030; color:#e5e7eb; cursor:pointer; }
.btn:hover { background:#232941; }
.btn.primary { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.btn.primary:hover { background:#6d28d9; }
.btn.outline { background:transparent; border-color:#7c3aed; color:#7c3aed; }
.btn.outline:hover { border-color:#6d28d9; color:#6d28d9; }
.btn.small { padding:6px 8px; font-size:12px; }
.btn[disabled], .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* 表单 */
input[type="text"], input[type="email"], input[type="password"], select { background:#0f1218; color:#e5e7eb; border:1px solid #2b3142; border-radius:8px; padding:8px 10px; }
input::placeholder { color:#8b93a6; }

/* 暗色主题变量与基础排版（统一所有页面） */
:root {
  --dark-bg: #0b0d12;
  --dark-panel: #0f1218;
  --dark-border: #2b3142;
  --dark-text: #e5e7eb;
  --dark-text-muted: #8b93a6;
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
}
html, body { background: var(--dark-bg); color: var(--dark-text); }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 1.5; }
a { color: var(--dark-text); text-decoration: none; }

/* 头部/主体/页脚与容器 */
.site-header { position: sticky; top: 0; background: var(--dark-panel); border-bottom: 1px solid var(--dark-border); z-index: 1000; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.site-header .brand { font-weight: 600; color: var(--dark-text); }
.site-header .nav { display:flex; gap:12px; flex-wrap: wrap; }
.site-header .nav a { color: var(--dark-text); padding: 6px 10px; border-radius: 8px; }
.site-header .nav a:hover { background: #1b2030; }
.site-main { padding: 16px; }
.site-footer { border-top: 1px solid var(--dark-border); background: var(--dark-panel); }
.site-footer .container { padding: 12px 16px; }
.container { width: min(1120px, 92vw); margin: 0 auto; padding: 16px; }

/* 文本与表单通用 */
.muted { color:#8b93a6; }
input[type="text"], input[type="email"], input[type="password"], select, textarea { background:#0f1218; color:#e5e7eb; border:1px solid var(--dark-border); border-radius:8px; padding:8px 10px; }
input::placeholder, textarea::placeholder { color: var(--dark-text-muted); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,58,237,0.25); }

/* 输入组样式：标签和控件间距统一 */
.input-group { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.input-group label { font-size:13px; color: var(--dark-text-muted); }

/* 面板与标题，统一各页结构 */
.panel { background: var(--dark-panel); border: 1px solid var(--dark-border); border-radius: 12px; padding: 12px; color: var(--dark-text); }
.panel .header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.panel .header .h { font-weight: 600; }
.filter-summary { margin: 8px 0; font-size: 13px; color: var(--dark-text-muted); }

/* chips */
.chips { display:flex; gap:8px; overflow:auto; padding-bottom:4px; }
.chips.scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.chip { display:inline-flex; align-items:center; padding:6px 12px; border:1px solid #2b3142; border-radius:999px; background:#0f1218; color:#e5e7eb; cursor:pointer; white-space:nowrap; }
.chip.active { border-color:#7c3aed; color:#fff; background:#231b39; }

/* 步骤条：用于注册流程指示 */
.steps { display:flex; gap:8px; flex-wrap:wrap; }
.step { display:inline-flex; align-items:center; padding:4px 10px; border:1px dashed var(--dark-border); border-radius:999px; font-size:12px; color: var(--dark-text-muted); }
.step.active { border-color: var(--accent); color: #fff; background: #231b39; }
.step.done { border-color: #10b981; color: #10b981; }

/* 网格 */
.grid.gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

/* 响应式网格（个人主页三列 → 小屏一列） */
.grid.three { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* 页面布局统一（首页侧边栏） */
.dark-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
.card { background:#0f1218; border:1px solid #2b3142; border-radius:12px; overflow:hidden; }
.card img { width:100%; height:180px; object-fit:cover; background:#0b0d12; }
.card .meta { padding:8px; font-size:12px; color:#8b93a6; }

/* 弹层 */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index: 9999; }
.modal .content { width: min(720px, 92vw); background: #121419; border: 1px solid #2b3142; border-radius: 12px; padding: 12px; color:#e5e7eb; }
.modal .header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.modal .body { max-height: 60vh; overflow:auto; }

/* 提示 */
.toast { position: fixed; right: 12px; bottom: 12px; display:none; flex-direction: column; gap:8px; z-index: 99999; }
.toast .msg { background:#1b2030; border:1px solid #2b3142; color:#e5e7eb; border-radius: 8px; padding:8px 10px; }
.toast .msg.success { border-color:#10b981; }
.toast .msg.error { border-color:#ef4444; }

/* 文本 */
.muted { color:#8b93a6; }

/* 移动端优化：更紧凑的网格卡片与悬浮上传按钮 */
@media (max-width: 640px){
  .site-header .container { padding:8px 12px; }
  .site-main { padding: 12px; }
  .grid.gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .card img { height: 140px; }
  .site-header .nav { gap: 8px; }
  .btn { padding:7px 10px; }
  input[type="text"], input[type="email"], input[type="password"], select, textarea { padding:7px 10px; }
}

/* 悬浮上传按钮 */
.fab { position: fixed; right: 16px; bottom: 72px; width: 52px; height: 52px; border-radius: 50%; background:#7c3aed; color:#fff; border:none; box-shadow: 0 6px 16px rgba(124,58,237,0.4); font-size: 24px; line-height: 52px; text-align:center; cursor:pointer; z-index: 9999; }
.fab:hover { background:#6d28d9; }

/* 上传：拖拽区域与进度条 */
.dropzone { border: 2px dashed #2b3142; border-radius: 12px; padding: 16px; text-align: center; background: #0f1218; cursor: pointer; }
.dropzone .dz-icon { font-size: 24px; color: #8b93a6; }
.dropzone .dz-text { margin-top: 6px; color: #e5e7eb; }
.dropzone .dz-hint { margin-top: 2px; }
.dropzone.dragover { border-color: #7c3aed; background: #121826; }

.progress { position: relative; height: 16px; background: #0b0d12; border: 1px solid #2b3142; border-radius: 8px; overflow: hidden; }
.progress .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #7c3aed, #6d28d9); transition: width 0.2s ease; }
.progress .text { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #e5e7eb; }

/* 断点：中屏与小屏通用响应式 */
@media (max-width: 960px){
  .container { width: min(100%, 94vw); }
  .site-main { padding: 12px; }
  .grid.three { grid-template-columns: 1fr; }
  .dark-layout { grid-template-columns: 1fr; }
}