/* AlbumMate 全局样式 */

/* 基础变量 */
:root {
  --ring: 0 0% 9%;
}

/* 让焦点态在极简风下也可见 */
:where(a, button) {
  outline: none;
}
:where(a, button):focus-visible {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

/* 提示占位图的斜纹背景可选 */
.placeholder-diagonal {
  background-image: linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.03) 75%, transparent 75%, transparent);
  background-size: 16px 16px;
}

/* 表单样式 */
.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d4d4d4;
  border-radius: 0.25rem;
  background-color: #fff;
}
.form-control:focus {
  border-color: #737373;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem; /* 匹配 rounded */
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}
.btn-lg { padding: 0.75rem 1.25rem; }
.btn-primary {
  background-color: #0a0a0a;
  color: #fff;
}
.btn-primary:hover {
  background-color: #262626;
}
.btn-outline {
  border: 1px solid #e5e5e5 !important; /* 保持与 brand-200 一致，防止被其他样式覆盖 */
  background-color: transparent;
  color: #0a0a0a;
  box-sizing: border-box;
}
.btn-outline:hover { background-color: #f5f5f5; }
.btn-secondary {
  border: 1px solid #d4d4d4;
  background-color: transparent;
}
.btn-secondary:hover {
  background-color: #f5f5f5;
}

/* 语义按钮变体（用于深色 CTA 区域） */
.btn-light {
  background-color: #ffffff;
  color: #000000;
}
.btn-light:hover {
  background-color: #f5f5f5;
}
.btn-outline-white {
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
}
.btn-outline-white:hover {
  background-color: #171717;
}

/* 卡片样式 */
.card {
  border: 1px solid #e5e5e5;
  border-radius: 0.375rem;
  background-color: #fff;
  overflow: hidden;
}

/* 语义化卡片组合 */
.card-panel {
  border: 1px solid #e5e5e5; /* brand-200 */
  border-radius: 0.375rem;
  background-color: #fff;
  padding: 1.5rem; /* p-6 */
  display: flex;
  flex-direction: column;
}
.card-dark {
  border: 1px solid #171717; /* brand-900 */
  border-radius: 0.375rem;
  background-color: #000;
  color: #fff;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.card-simple {
  border: 1px solid #e5e5e5;
  border-radius: 0.375rem;
  background-color: #fff;
  padding: 1rem; /* p-4 与原页面一致，避免间距差异 */
}
.card-compact {
  border: 1px solid #e5e5e5;
  border-radius: 0.375rem;
  background-color: #fff;
  padding: 1rem; /* p-4 */
}

/* 语义化栅格组合 */
.grid-cards {
  display: grid;
  gap: 2rem; /* gap-8 */
}
@media (min-width: 768px) { /* md */
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 精确匹配原有栅格组合，避免视觉变化 */
.grid-md-3-gap-6 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-md-3-gap-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.grid-md-4-gap-6 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-md-4-gap-6 { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.grid-2-md-3-gap-4 { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .grid-2-md-3-gap-4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.grid-md-2-gap-4 { display: grid; gap: 1rem; }
@media (min-width: 768px) { .grid-md-2-gap-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Masonry 布局（替换行内样式） */
.masonry-grid {
  column-count: 2;
  column-gap: 12px;
}
@media (min-width: 640px) { /* sm */
  .masonry-grid { column-count: 3; }
}
@media (min-width: 768px) { /* md */
  .masonry-grid { column-count: 4; }
}

/* 进度条初始宽度（替换行内样式） */
.progress-bar {
  width: 0%;
  transition: width 0.2s ease;
}