/* =========================================================================
 * JEWEL MONSTER · index 专用 arcade.ai 复刻主题（浅色）
 * 依据 2026-09-30 对 www.arcade.ai 的渲染级抓取：
 *   页底 #F7F4F0 象牙白 / 墨色 #211D1E / 次级文字 #45413B·#696864 / 面板 #E4DDD5
 *   奶油胶囊钮 #E9E5D8 / 高亮黄 CTA #FCFF7B / 白卡片 / 圆角 9999·24·16·12·8
 *   展示字体 Recoleta（衬线，h1 64 w400 ls-0.02em / h2 42 w500 / h3 32 w400）
 *   UI 字体 Instrument Sans；粉彩点缀 #FEE6DA·#FEC090·#AE8FC9·#87E0FE·#FCFF7B
 * ========================================================================= */
@import url("https://fonts.loli.net/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Noto+Serif+SC:wght@400;500;600&display=swap");

:root {
  --ivory: #f7f4f0;          /* 页面底 */
  --ivory-2: #f1ede7;
  --panel: #ede9e2;
  --panel-2: #e4ddd5;        /* 深一档面板 */
  --cream: #e9e5d8;          /* 奶油胶囊钮 */
  --ink: #211d1e;            /* 墨色 */
  --ink-2: #45413b;          /* 次级正文 */
  --ink-3: #696864;          /* 弱文字 */
  --muted: #9d9d9d;
  --line: rgba(33, 29, 30, .10);
  --yellow: #fcff7b;         /* 高亮 CTA */
  --peach: #fee6da;
  --peach-2: #fec090;
  --coral: #fe9673;
  --lavender: #ae8fc9;
  --peri: #716ed9;
  --sky: #87e0fe;
  --white: #ffffff;
  --shadow: 0 8px 30px rgba(33, 29, 30, .10);
  --shadow-2: 0 2px 10px rgba(33, 29, 30, .07);
  --maxw: 1160px;
  --font-ui: "Instrument Sans", -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Recoleta", "Fraunces", "Noto Serif SC", Georgia, "Songti SC", "SimSun", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--ivory);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--muted); }
::selection { background: var(--yellow); color: var(--ink); }

/* ---------- 顶栏（ivory 毛玻璃） ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: rgba(247, 244, 240, .86);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 16px; height: 66px; }
.logo { font-weight: 600; letter-spacing: .5px; display: flex; align-items: center; gap: 10px; flex: none; }
.logo img { height: 30px; width: auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(33,29,30,.10); }
.brand-text { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1; display: flex; flex-direction: column; color: var(--ink); }
.brand-text small { font-family: var(--font-ui); font-weight: 500; color: var(--ink-3); letter-spacing: 1.5px; font-size: 11px; margin-top: 3px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { font-size: 14.5px; color: var(--ink-2); padding: 8px 13px; border-radius: 9999px; white-space: nowrap; transition: .15s; }
.nav a:hover { background: rgba(33,29,30,.06); color: var(--ink); }
.lang-sel { border: 1px solid var(--line); background: var(--white); border-radius: 9999px; padding: 7px 10px; font-size: 13px; color: var(--ink-2); margin-left: 6px; }

/* ---------- 按钮（全胶囊体系） ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-size: 16px; font-weight: 500;
  border-radius: 9999px; padding: 13px 26px; border: none; cursor: pointer; transition: .18s; }
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { transform: scale(1.03); box-shadow: 0 6px 22px rgba(252, 255, 123, .8); }
.btn-cream { background: var(--cream); color: #0f0f0f; }
.btn-cream:hover { background: var(--panel-2); transform: scale(1.02); }
.btn-dark { background: var(--ink-2); color: var(--ivory); }
.btn-dark:hover { background: var(--ink); transform: scale(1.02); }

/* ---------- Hero ---------- */
.hero { padding: 84px 0 60px; text-align: center; position: relative; overflow: hidden; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ink-3); background: var(--cream); border-radius: 9999px; padding: 6px 16px; margin-bottom: 26px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(38px, 6.4vw, 64px); line-height: 1.12; margin: 0 auto 18px; max-width: 820px;
  color: var(--ink);
}
.hero .lead { max-width: 660px; margin: 0 auto 34px; color: var(--ink-2); font-size: 17.5px; font-weight: 300; }
.prompt-box {
  display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto;
  background: var(--white); border-radius: 9999px; padding: 9px 9px 9px 26px;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.prompt-box input { flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-ui); font-size: 15.5px; color: var(--ink); }
.prompt-box input::placeholder { color: var(--muted); }
.prompt-box .btn { padding: 12px 24px; flex: none; }
.hero-cta-row { margin-top: 18px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- 通用 Section ---------- */
.section { padding: 64px 0; }
.section .kicker { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.section h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(30px, 4.6vw, 42px); line-height: 1.15; margin: 0 0 12px; color: var(--ink); }
.section h3.mid { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(25px, 3.6vw, 32px); margin: 0 0 10px; }
.section .sub { max-width: 640px; color: var(--ink-2); font-weight: 300; margin: 0 0 34px; }

/* ---------- How it works（三列，无卡片感） ---------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 14px; }
.step {}
.step .n { width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 19px; color: var(--ink); background: var(--cream); margin-bottom: 16px; }
.step h4 { font-family: var(--font-display); font-weight: 500; font-size: 21px; margin: 0 0 8px; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--ink-2); font-weight: 300; font-size: 15px; }

/* ---------- 社区条 ---------- */
.band { margin-top: 52px; padding: 34px 38px; border-radius: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--panel); }
.band h3 { font-family: var(--font-display); font-weight: 500; font-size: 27px; margin: 0 0 6px; letter-spacing: -0.01em; }
.band p { margin: 0; color: var(--ink-2); font-weight: 300; }
.band .btn { border-radius: 21px; flex: none; }

/* ---------- 品类网格（arcade 大图卡） ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-2); transition: .2s; }
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat .ico { aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); display: grid; place-items: center; font-size: 52px; }
.cat .ico img { width: 100%; height: 100%; object-fit: cover; transition: .35s; }
.cat:hover .ico img { transform: scale(1.045); }
.cat .ico.noimg { background: linear-gradient(135deg, var(--peach) 0%, var(--peach-2) 100%); }
.cat-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.cat-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 23px; margin: 0 0 6px; letter-spacing: -0.01em; }
.cat-body p { margin: 0 0 16px; color: var(--ink-3); font-size: 14px; font-weight: 300; flex: 1; }
.cat-cta { display: inline-flex; align-items: center; background: var(--cream); color: #0f0f0f;
  font-size: 14.5px; font-weight: 500; border-radius: 9999px; padding: 9px 20px; transition: .15s; }
.cat:hover .cat-cta { background: var(--yellow); }

/* ---------- 源头直采（品牌大卡，粉彩底） ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.brand-card { border-radius: 20px; padding: 26px 22px 22px; background: var(--white);
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; align-items: flex-start; transition: .2s; }
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.brand-card:nth-child(1) { background: linear-gradient(160deg, #fdeae2, #fff); }
.brand-card:nth-child(2) { background: linear-gradient(160deg, #eef3e4, #fff); }
.brand-card:nth-child(3) { background: linear-gradient(160deg, #e9f0fa, #fff); }
.brand-card:nth-child(4) { background: linear-gradient(160deg, #f4ecf7, #fff); }
.brand-card:nth-child(5) { background: linear-gradient(160deg, #e6f5f0, #fff); }
.brand-card:nth-child(6) { background: linear-gradient(160deg, #fdf3df, #fff); }
.brand-card:nth-child(7) { background: linear-gradient(160deg, #eeeaf7, #fff); }
.brand-card:nth-child(8) { background: linear-gradient(160deg, #fbe9e4, #fff); }
.b-ico { width: 52px; height: 52px; border-radius: 9999px; display: grid; place-items: center; font-size: 25px;
  background: var(--white); box-shadow: var(--shadow-2); margin-bottom: 14px; }
.brand-card h4 { font-family: var(--font-display); font-weight: 500; font-size: 20px; margin: 0 0 5px; letter-spacing: -0.01em; }
.brand-card p { margin: 0 0 14px; color: var(--ink-3); font-size: 13.5px; font-weight: 300; flex: 1; }
.b-tag { font-size: 12px; font-weight: 600; letter-spacing: .5px; padding: 5px 13px; border-radius: 9999px; }
.b-tag.ok { color: #1d6b4f; background: rgba(43, 160, 110, .14); }
.b-tag.soon { color: var(--ink-3); background: rgba(33, 29, 30, .07); }

/* ---------- 设计师（照片大卡） ---------- */
.designer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.designer { border-radius: 20px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; transition: .2s; }
.designer:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.d-ico { aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); }
.d-ico img { width: 100%; height: 100%; object-fit: cover; transition: .35s; }
.designer:hover .d-ico img { transform: scale(1.045); }
.designer .d-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.designer h4 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 0 0 8px; letter-spacing: -0.01em; }
.designer p { margin: 0 0 16px; color: var(--ink-2); font-size: 14.5px; font-weight: 300; flex: 1; }
.d-link { font-size: 14.5px; font-weight: 500; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }

/* ---------- 匠人（8 卡） ---------- */
.maker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.maker { border-radius: 18px; padding: 24px 20px; background: var(--white); box-shadow: var(--shadow-2); transition: .2s; }
.maker:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.m-ico { width: 46px; height: 46px; border-radius: 9999px; display: grid; place-items: center; font-size: 21px;
  background: var(--cream); margin-bottom: 13px; }
.maker h4 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.maker p { margin: 0; color: var(--ink-3); font-size: 13.5px; font-weight: 300; }

/* ---------- 社区作品流 ---------- */
.feed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feed-card { border-radius: 16px; background: var(--white); box-shadow: var(--shadow-2); overflow: hidden;
  display: flex; flex-direction: column; transition: .2s; }
.feed-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fc-img { aspect-ratio: 1/1; overflow: hidden; background: var(--panel); position: relative; }
.fc-img img { width: 100%; height: 100%; object-fit: cover; transition: .35s; }
.feed-card:hover .fc-img img { transform: scale(1.05); }
.fc-likes { position: absolute; top: 12px; right: 12px; font-size: 12.5px; font-weight: 500;
  background: rgba(247, 244, 240, .65); backdrop-filter: blur(6px); color: var(--ink);
  border-radius: 9999px; padding: 5px 12px; }
.fc-body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.fc-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); }
.fc-row.dim { margin-top: 5px; }
.fc-ava { width: 20px; height: 20px; border-radius: 9999px; flex: none; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: var(--ivory); background: var(--ink-2); }
.fc-ava.mk { background: var(--cream); color: var(--ink); }
.fc-name { font-weight: 600; color: var(--ink-2); }
.fc-body h4 { font-family: var(--font-display); font-weight: 500; font-size: 19px; margin: 9px 0 0; line-height: 1.3; letter-spacing: -0.01em; }
.fc-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.fc-price { font-weight: 600; color: var(--ink); }
.fc-act { color: var(--ink-3); font-size: 12.5px; }
.fc-act i { font-style: normal; color: var(--coral); }
.fc-act b { font-weight: 600; color: var(--ink); }

/* ---------- 礼物（横向滚动条） ---------- */
.gift-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 14px;
  overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.gift-grid::-webkit-scrollbar { display: none; }
.gift { display: flex; flex-direction: column; border-radius: 16px; background: var(--white);
  box-shadow: var(--shadow-2); overflow: hidden; transition: .2s; }
.gift:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.g-ico { height: 110px; display: grid; place-items: center; font-size: 42px; background: var(--cream); }
.gift:nth-child(1) .g-ico { background: var(--peach); }
.gift:nth-child(2) .g-ico { background: #fde8f3; }
.gift:nth-child(3) .g-ico { background: #e9f0fa; }
.gift:nth-child(4) .g-ico { background: #fdf3df; }
.gift:nth-child(5) .g-ico { background: #e6f5f0; }
.gift:nth-child(6) .g-ico { background: #f4ecf7; }
.gift .g-body { padding: 14px 16px 16px; }
.gift h4 { font-family: var(--font-display); font-weight: 500; font-size: 17px; margin: 0 0 3px; }
.gift p { margin: 0; color: var(--ink-3); font-size: 12.5px; font-weight: 300; }

/* ---------- Recently created（新近创作） ---------- */
.recent-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.recent-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px;
  cursor: pointer; transition: .2s; background: var(--panel); }
.recent-grid img:hover { transform: scale(1.045); box-shadow: var(--shadow); }

/* ---------- Studio 介绍横幅（深色） ---------- */
.studio-banner { background: var(--ink); color: var(--ivory); border-radius: 24px;
  padding: 56px 54px; display: flex; align-items: center; justify-content: space-between; gap: 34px;
  position: relative; overflow: hidden; }
.studio-banner::after { content: "✦"; position: absolute; right: -18px; top: -34px; font-size: 150px;
  color: rgba(252, 255, 123, .16); transform: rotate(18deg); }
.studio-banner h2 { color: var(--ivory); margin: 0 0 12px; }
.studio-banner p { color: rgba(247, 244, 240, .72); font-weight: 300; max-width: 560px; margin: 0 0 26px; }
.studio-banner .btn { flex: none; }

/* ---------- 品牌橱窗（我的作品） ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.gallery-grid .piece { border-radius: 16px; background: var(--white); box-shadow: var(--shadow-2);
  overflow: hidden; cursor: pointer; transition: .2s; }
.gallery-grid .piece:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gallery-grid .thumb { aspect-ratio: 1/1; display: grid; place-items: center; background: var(--panel); overflow: hidden; }
.gallery-grid .thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid .meta { padding: 13px 15px 15px; }
.gallery-grid .meta .b { font-size: 11.5px; font-weight: 600; letter-spacing: 1px; color: var(--ink-3); text-transform: uppercase; }
.gallery-grid .meta h4 { font-family: var(--font-display); font-weight: 500; font-size: 16.5px; margin: 4px 0 6px; }
.gallery-grid .meta .price { font-weight: 600; font-size: 14px; }
.gallery-grid .empty { color: var(--ink-3); padding: 30px; border: 1.5px dashed var(--line); border-radius: 16px; font-weight: 300; }

/* ---------- 图例网格 ---------- */
.jewel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.jewel-grid img { width: 100%; height: 168px; object-fit: cover; border-radius: 12px; cursor: pointer;
  transition: .2s; background: var(--panel); }
.jewel-grid img:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.loading-inline { color: var(--muted); padding: 24px 4px; font-weight: 300; }

/* ---------- 灯箱 ---------- */
.lb-overlay { position: fixed; inset: 0; background: rgba(20, 18, 16, .94); display: none;
  align-items: center; justify-content: center; z-index: 200; padding: 24px; flex-direction: column; }
.lb-overlay.show { display: flex; animation: fade .25s ease; }
.lb-overlay img { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.lb-overlay .lb-close { position: fixed; top: 18px; right: 24px; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: .8; }
.lb-overlay .lb-close:hover { opacity: 1; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 页脚（墨色，arcade 式四列） ---------- */
.footer { background: var(--ink); color: var(--ivory); margin-top: 40px; padding: 58px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 40px; }
.footer-brand .brand-text { color: var(--ivory); }
.footer-brand .brand-text small { color: rgba(247,244,240,.5); }
.footer-brand p { color: rgba(247,244,240,.55); font-size: 13.5px; font-weight: 300; max-width: 260px; margin-top: 14px; }
.footer-col h5 { font-size: 12.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(247,244,240,.45); margin: 0 0 14px; }
.footer-col a { display: block; font-size: 14px; font-weight: 300; color: rgba(247,244,240,.78);
  padding: 4.5px 0; transition: .15s; }
.footer-col a:hover { color: var(--yellow); }
.footer-bottom { border-top: 1px solid rgba(247,244,240,.14); padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(247,244,240,.45); font-weight: 300; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { color: rgba(247,244,240,.65); font-size: 13px; }
.footer-social a:hover { color: var(--yellow); }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .feed-grid { grid-template-columns: repeat(2, 1fr); }
  .maker-grid { grid-template-columns: repeat(2, 1fr); }
  .designer-grid { grid-template-columns: 1fr; }
  .recent-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .studio-banner { flex-direction: column; align-items: flex-start; padding: 40px 30px; }
}
@media (max-width: 860px) {
  .wrap { padding: 0 16px; }
  .topbar .wrap { flex-wrap: wrap; height: auto; padding: 10px 16px 0; row-gap: 0; }
  .logo { margin-bottom: 8px; }
  .nav { margin-left: 0; width: 100%; order: 2; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 0 10px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; border: 1px solid var(--line); background: var(--white); padding: 7px 12px; font-size: 13px; }
  .topbar .lang-sel { order: 1; margin-left: auto; }
  .hero { padding: 52px 0 40px; }
  .prompt-box { flex-direction: column; border-radius: 22px; padding: 12px; }
  .prompt-box input { padding: 8px 6px; width: 100%; }
  .prompt-box .btn { width: 100%; }
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .band { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .section { padding: 46px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 620px) {
  .maker-grid { grid-template-columns: 1fr; }
  .feed-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr; }
  .recent-grid { grid-template-columns: repeat(3, 1fr); }
  .hero .lead { font-size: 15.5px; }
}