/* ============================================================================
 * 拼豆图纸库（画廊首页）样式
 * 视觉规则与工具页保持一致：靛蓝→紫渐变品牌色、14px 圆角、柔和双层阴影。
 * 🔴 移动端优先：390px 宽下必须两列、不出现横向滚动。
 * 🔴 不要用 backdrop-filter（本项目实测会让合成层卡死，见技能 pindou-web-app）。
 * ==========================================================================*/
:root {
  --bg: #f6f7fb;
  --panel: #fff;
  --line: #e6e8f0;
  --text: #16181d;
  --muted: #7b8494;
  --brand: #4f46e5;
  --brand2: #7c3aed;
  --pink: #db2777;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
  --shadow-lg: 0 14px 38px rgba(79, 70, 229, .16);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1100px 560px at 8% -12%, #eef0ff 0%, transparent 62%),
    radial-gradient(900px 520px at 94% -6%, #fdf2f8 0%, transparent 58%),
    var(--bg);
  color: var(--text);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: .1px;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
.grow { flex: 1; }

/* ---------------- 顶栏 ---------------- */
.g-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid rgba(226, 229, 239, .9);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .03);
}
.g-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.g-mark { font-size: 20px; line-height: 1; }
.g-name {
  font-size: 17px; font-weight: 800; letter-spacing: .3px;
  background: linear-gradient(118deg, #4f46e5, #7c3aed 55%, #db2777);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.g-tag { font-size: 12px; color: #9aa1b1; }
.g-btn {
  height: 34px; padding: 0 13px; border-radius: 10px; border: 1px solid #e2e5ef;
  background: #fff; color: #374151; font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: transform .14s, box-shadow .16s, border-color .16s, background .16s;
}
.g-btn:hover { border-color: #c7cdf0; box-shadow: 0 4px 14px rgba(79, 70, 229, .13); transform: translateY(-1px); }
.g-btn.primary {
  border-color: transparent; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 4px 14px rgba(79, 70, 229, .3);
}
.g-btn.primary:hover { background: linear-gradient(135deg, #4338ca, #6d28d9); }
.g-btn.member {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #fcd34d; color: #92400e;
}
.g-btn .ab-dot { width: 6px; height: 6px; border-radius: 50%; background: #c7cbd6; }
.g-btn .ab-dot.pro { background: #f59e0b; }

/* ---------------- Hero ---------------- */
.g-hero {
  position: relative; overflow: hidden;
  margin: 16px; padding: 26px 22px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 46%, #db2777 100%);
  box-shadow: 0 16px 40px rgba(79, 70, 229, .28);
}
.g-hero-inner { position: relative; z-index: 2; max-width: 560px; }
.g-hero h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: .4px; }
.g-hero p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.75; opacity: .94; }
.g-cta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 20px; border-radius: 12px;
  background: #fff; color: #4f46e5; font-size: 14px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .22);
  transition: transform .15s, box-shadow .15s;
}
.g-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, .28); }
.g-hero-art {
  position: absolute; right: 10px; top: 0; bottom: 0; width: 190px;
  z-index: 1; pointer-events: none;
}
.g-hero-art .bead {
  position: absolute; border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35), 0 6px 16px rgba(15, 23, 42, .18);
}
.g-hero-art .b1 { width: 44px; height: 44px; right: 96px; top: 18px; background: #fbbf24; }
.g-hero-art .b2 { width: 30px; height: 30px; right: 46px; top: 52px; background: #34d399; }
.g-hero-art .b3 { width: 34px; height: 34px; right: 108px; top: 86px; background: #60a5fa; }
.g-hero-art .b4 { width: 26px; height: 26px; right: 58px; top: 118px; background: #f472b6; }
.g-hero-art .b5 { width: 20px; height: 20px; right: 130px; top: 140px; background: #f87171; }
.g-hero-art .b6 { width: 16px; height: 16px; right: 22px; top: 22px; background: #a78bfa; }

/* ---------------- 分类 chips ---------------- */
.g-tabs {
  display: flex; gap: 8px; align-items: center;
  padding: 2px 16px 12px; overflow-x: auto; scrollbar-width: none;
}
.g-tabs::-webkit-scrollbar { display: none; }
.g-tabs button {
  flex: 0 0 auto; height: 34px; padding: 0 15px; border-radius: 99px;
  border: 1px solid #e2e5ef; background: #fff; color: #4b5563;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.g-tabs button:hover { border-color: #c7cdf0; color: var(--brand); }
.g-tabs button.on {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 4px 14px rgba(79, 70, 229, .28);
}
.g-tabs button.mine { border-style: dashed; }
.g-tabs button.mine.on { border-style: solid; }
.g-sep { flex: 0 0 auto; width: 1px; height: 20px; background: var(--line); margin: 0 2px; }

/* ---------------- 网格 ---------------- */
.g-main { padding: 0 16px 30px; min-height: 40vh; }
.g-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.g-card {
  position: relative; display: block; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid #eaecf4; box-shadow: var(--shadow);
  transition: transform .16s, box-shadow .18s, border-color .18s;
}
.g-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #dfe3f5; }
.g-card .cover {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; background: linear-gradient(135deg, #f7f8fc, #eef0f8);
  border-bottom: 1px solid #f1f2f8;
}
.g-card .info { padding: 9px 11px 11px; }
.g-card .info b { display: block; font-size: 13.5px; font-weight: 700; color: #232936; }
.g-card .info span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-card .go {
  display: block; margin-top: 8px; height: 30px; line-height: 30px; text-align: center;
  border-radius: 9px; font-size: 12.5px; font-weight: 700; color: #4f46e5;
  background: #eef0ff;
}
.g-card:hover .go { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; }
.g-fav {
  position: absolute; right: 8px; top: 8px; width: 30px; height: 30px;
  border-radius: 50%; border: 0; cursor: pointer; font-size: 15px; line-height: 1;
  background: rgba(255, 255, 255, .92); color: #c02e4c;
  box-shadow: 0 3px 10px rgba(16, 24, 40, .16);
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s, background .14s;
}
.g-fav:hover { transform: scale(1.08); }
.g-fav.on { background: #ffe4ec; }

/* 我的作品卡片（无封面，用拼豆点阵做视觉） */
.g-card.work .cover {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, #eef0ff, #f6f7fb 70%);
  font-size: 30px;
}
.g-card.work .info span { color: #9aa1b1; }

/* ---------------- 状态 / 加载 ---------------- */
.g-state {
  padding: 50px 20px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 2;
}
.g-state::before { content: '🧩'; display: block; font-size: 44px; margin-bottom: 8px; opacity: .9; }
.g-state b { color: #374151; }
.g-state .act {
  display: inline-block; margin-top: 12px; height: 38px; line-height: 38px; padding: 0 22px;
  border-radius: 11px; font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 6px 18px rgba(79, 70, 229, .3);
}
.g-more { padding: 18px 0 0; text-align: center; }
.g-more button {
  height: 38px; padding: 0 26px; border-radius: 11px; cursor: pointer;
  border: 1px solid #e2e5ef; background: #fff; color: #4b5563;
  font-size: 13.5px; font-weight: 600;
}
.g-more button:hover { border-color: #c7cdf0; color: var(--brand); }

/* ---------------- 页脚 ---------------- */
.g-foot {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding: 18px 16px 34px; font-size: 12px; color: #9aa1b1;
  border-top: 1px solid var(--line); margin: 0 16px;
}
.g-foot .g-row { display: flex; gap: 14px; }
.g-foot a { color: #6b7280; }
.g-foot a:hover { color: var(--brand); }

/* ---------------- toast ---------------- */
.g-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 14px);
  max-width: 82vw; padding: 11px 18px; border-radius: 11px;
  background: rgba(22, 24, 29, .94); color: #fff; font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .28);
}
.g-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 手机 ---------------- */
@media (max-width: 860px) {
  .only-wide { display: none; }
  .g-hero { margin: 12px; padding: 22px 18px; border-radius: 16px; }
  .g-hero h1 { font-size: 21px; }
  .g-hero p { font-size: 12.5px; }
  .g-hero-art { width: 130px; opacity: .55; }
  .g-hero-art .bead { transform: scale(.72); }
  .g-tabs { padding: 0 12px 10px; gap: 6px; }
  .g-tabs button { height: 32px; padding: 0 13px; font-size: 12.5px; }
  .g-main { padding: 0 12px 24px; }
  .g-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .g-card .info { padding: 8px 10px 10px; }
  .g-card .info b { font-size: 13px; }
  .g-card .go { height: 28px; line-height: 28px; font-size: 12px; }
  .g-top { padding: 8px 12px; gap: 8px; }
  .g-name { font-size: 15.5px; }
  .g-btn { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .g-foot { padding: 16px 12px 28px; margin: 0 12px; }
}