/* E-InkWall — 样式（品牌色：朱红点缀 #b03a2e / 深色 #d4553f） */
:root {
  --ink-bg: #fff;
  --ink-bg-alt: #fff;
  --ink-text: #222;
  --ink-text-muted: #777;
  --ink-text-light: #555;
  --ink-border: #f0f0f0;
  --ink-accent: #444;
  --font-serif: Charter, Georgia, Palatino, "Times New Roman", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", STSong, serif;
  --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dark {
  --ink-bg: #111;
  --ink-bg-alt: #181818;
  --ink-text: #f0f0f0;
  --ink-text-muted: #888;
  --ink-text-light: #999;
  --ink-border: #2a2a2a;
  --ink-accent: #ccc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-bg);
  color: var(--ink-text);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* header */
.site-header { border-bottom: 1px solid var(--ink-border); position: sticky; top: 0; background: var(--ink-bg); z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; }
.brand { display: flex; align-items: center; gap: .5rem; color: var(--ink-text); text-decoration: none; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.brand-logo { width: 1.5rem; height: 1.5rem; }
.brand-zh { color: var(--ink-text-muted); font-weight: 300; }
.brand-tld { color: #b03a2e; font-weight: 600; font-size: .85em; }
.dark .brand-tld { color: #d4553f; }
.footer-domain { font-family: Georgia, serif; letter-spacing: .04em; }
.icon-btn { background: none; border: 1px solid var(--ink-border); border-radius: .5rem; color: var(--ink-text-muted); width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s, border-color .2s; }
.icon-btn:hover { color: var(--ink-text); border-color: var(--ink-accent); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }
/* 语言 + 主题 分段式胶囊控件 */
.header-actions { display: flex; align-items: center; border: 1px solid var(--ink-border); border-radius: .5rem; height: 2.25rem; overflow: hidden; }
.header-seg { background: none; border: none; color: var(--ink-text-muted); height: 100%; min-width: 2.5rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s, background .2s; }
.header-seg:hover { color: var(--ink-text); background: var(--ink-bg-alt); }
.header-seg svg { width: 1.1rem; height: 1.1rem; }
.header-seg-divider { width: 1px; height: 1.1rem; background: var(--ink-border); }
.lang-btn { padding: 0 .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .02em; font-family: Charter, Georgia, serif; }
/* header 内页面导航（首页 + 生成器共用） */
.header-nav { display: flex; align-items: center; gap: 1rem; margin: 0 .75rem 0 .65rem; }
.header-nav a { color: var(--ink-text-muted); text-decoration: none; font-size: .8125rem; font-weight: 400; padding: .25rem .2rem; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; }
.header-nav a:hover { color: var(--ink-text); }
.header-nav a.active { color: var(--ink-text); border-bottom-color: #b03a2e; font-weight: 500; }
.dark .header-nav a.active { border-bottom-color: #d4553f; }
@media (max-width: 640px) { .header-nav { gap: .6rem; margin-right: .5rem; } .header-nav a { font-size: .75rem; } .brand-zh { display: none; } .brand { font-size: .9rem; } }
.dark .icon-sun { display: none; }
.icon-moon { display: none; }
.dark .icon-moon { display: block; }

/* hero */
.hero { text-align: center; padding: 5rem 0 3.5rem; }
.hero-title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.15; margin: 0 0 1.25rem; }
.hero-title em { font-style: normal; color: var(--ink-text-muted); font-weight: 400; }
.hero-sub { color: var(--ink-text-muted); font-weight: 300; font-size: 1rem; line-height: 1.7; margin: 0; }

/* 固定宽高网格：最多 4 列，卡片统一 3:4，cover 填充 */
.cat-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.cat-tab { border: 1px solid var(--ink-border); background: var(--ink-bg); color: var(--ink-text-muted); border-radius: 999px; padding: .35rem .9rem; font-size: .8125rem; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.cat-tab:hover { color: var(--ink-text); border-color: var(--ink-accent); }
.cat-tab.active { background: var(--ink-text); color: var(--ink-bg); border-color: var(--ink-text); }
.detail-cat-chip { display: inline-block; align-self: flex-start; border: 1px solid var(--ink-border); border-radius: 999px; padding: .25rem .7rem; font-size: .75rem; color: var(--ink-text-muted); margin-bottom: 1rem; }
.masonry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; width: 100%; }
.masonry-item { position: relative; }
.masonry-card { display: block; width: 100%; aspect-ratio: 3 / 4; border: 1px solid rgba(0,0,0,.06); padding: 0; background: var(--ink-bg-alt); cursor: pointer; border-radius: .5rem; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px -8px rgba(0,0,0,.14); transition: transform .25s ease, box-shadow .25s ease; }
.masonry-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 14px 30px -8px rgba(0,0,0,.2); }
.dark .masonry-card { border-color: rgba(255,255,255,.07); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -10px rgba(0,0,0,.7); }
.dark .masonry-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 16px 34px -10px rgba(0,0,0,.85); }
.masonry-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease, opacity .3s; }
.masonry-card:hover img { transform: scale(1.02); }
.masonry-card .card-overlay { position: absolute; inset: auto 0 0 0; padding: 1.75rem .75rem .6rem; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; font-size: .75rem; display: flex; justify-content: space-between; opacity: 0; transition: opacity .25s; }
.masonry-card:hover .card-overlay { opacity: 1; }
@media (max-width: 1024px) { .masonry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .masonry-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } }

/* pagination */
.pagination { display: flex; justify-content: center; align-items: center; gap: .4rem; padding: 2.5rem 0 4rem; flex-wrap: wrap; }
.page-btn { min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border: 1px solid var(--ink-border); background: none; color: var(--ink-text-muted); border-radius: .5rem; cursor: pointer; font: inherit; font-size: .875rem; transition: all .2s; }
.page-btn:hover:not(:disabled) { border-color: var(--ink-accent); color: var(--ink-text); }
.page-btn.active { background: var(--ink-text); border-color: var(--ink-text); color: var(--ink-bg); }
.page-btn:disabled { opacity: .35; cursor: default; }
.page-ellipsis { color: var(--ink-text-muted); padding: 0 .25rem; }

/* footer */
.site-footer { border-top: 1px solid var(--ink-border); padding: 2rem 0; text-align: center; color: var(--ink-text-muted); font-size: .8125rem; }

/* detail overlay */
.detail-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink-bg) 92%, transparent); backdrop-filter: blur(8px); z-index: 100; overflow-y: auto; padding: 2rem 1rem; }
.detail-panel { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto; gap: 0 2.5rem; align-items: start; }
.detail-preview { grid-column: 1; grid-row: 1; min-width: 0; display: flex; justify-content: center; }
.detail-original-view img { max-width: 100%; max-height: 82vh; border-radius: .5rem; display: block; border: 1px solid var(--ink-border); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px -10px rgba(0,0,0,.16); }
.device-frame-img { border-radius: .5rem; }
.detail-side { grid-column: 2; grid-row: 1; width: auto; }
.detail-nav { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; gap: .75rem; margin-top: 2rem; }
@media (max-width: 860px) {
  .detail-panel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .detail-side { grid-column: 1; grid-row: 1; width: 100%; max-width: 520px; margin: 0 auto; }
  .detail-preview { grid-column: 1; grid-row: 2; margin-top: 1.25rem; }
  .detail-nav { grid-column: 1; grid-row: 3; margin-top: 1.25rem; padding-bottom: 1rem; }
}

/* 详情操作行（返回 + 下载）与翻页按钮 */
.detail-actions-row { display: flex; gap: .75rem; margin-bottom: 1.25rem; }
.detail-actions-row .download-btn { flex: 1; }
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1rem; background: none; color: var(--ink-text); border: 1px solid var(--ink-border); border-radius: .5rem; font: inherit; font-size: .9rem; cursor: pointer; transition: border-color .2s; }
.ghost-btn:hover { border-color: var(--ink-accent); }
.ghost-btn svg { width: 1rem; height: 1rem; }
.detail-nav .ghost-btn { min-width: 8.5rem; }

/* device preview */
.device-selector-section { border-bottom: 1px solid var(--ink-border); margin-bottom: 2rem; padding-bottom: 1rem; }
.device-label { display: block; color: var(--ink-text-muted); font-size: .75rem; margin-bottom: .5rem; letter-spacing: .05em; text-transform: uppercase; }
.device-select { width: 100%; padding: .5rem .75rem; border: 1px solid var(--ink-border); border-radius: .5rem; background: var(--ink-bg); color: var(--ink-text); font: inherit; font-size: .875rem; }
.device-preview-container { flex-direction: column; align-items: center; gap: 1.5rem; width: 100%; max-width: 700px; display: flex; margin: 0 auto; }
.device-css-body { width: 100%; position: relative; display: flex; justify-content: center; }
.device-frame-img { max-width: 100%; max-height: 78vh; width: auto; display: block; }
.device-screen { position: absolute; overflow: hidden; background: #e8e8e8; display: flex; align-items: center; justify-content: center; }
.device-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 无边框图设备：CSS 绘制机身 */
.device-css-fallback { position: relative; background: var(--ink-bg-alt); border: 1px solid var(--ink-border); border-radius: .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.device-meta { align-items: center; gap: .75rem; display: flex; flex-direction: column; text-align: center; }
.device-meta-name { color: var(--ink-text-muted); font-size: .8125rem; font-weight: 500; }
.device-meta-spec { color: var(--ink-text-light); letter-spacing: .02em; font-size: .6875rem; }

.wallpaper-meta { color: var(--ink-text-muted); font-size: .75rem; line-height: 1.8; margin-bottom: 1.25rem; }
.download-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; background: var(--ink-text); color: var(--ink-bg); border: none; border-radius: .5rem; font: inherit; font-size: .9rem; cursor: pointer; transition: opacity .2s; }
.download-btn:hover { opacity: .85; }
.download-btn:disabled { opacity: .6; cursor: wait; }
.download-btn svg { width: .9rem; height: .9rem; }

/* ===== 响应式适配 ===== */
/* 平板 */
@media (min-width: 861px) and (max-width: 1024px) {
  .hero { padding: 4rem 0 2.75rem; }
  .detail-panel { grid-template-columns: minmax(0, 1fr) 280px; gap: 0 1.75rem; }
  .device-frame-img { max-height: 70vh; }
}
/* 手机 */
@media (max-width: 640px) {
  .container { padding: 0 1rem; }
  .header-inner { height: 3rem; }
  .hero { padding: 2.75rem 0 2rem; }
  .hero-title { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
  .hero-sub { font-size: .9rem; }
  .br-desktop { display: none; }
  .masonry-grid { columns: 2 9rem; column-gap: .75rem; }
  .masonry-item { margin-bottom: .75rem; }
  .masonry-card { border-radius: .375rem; }
  .masonry-card .card-overlay { opacity: 1; padding: 1.5rem .6rem .45rem; font-size: .6875rem; } /* 触屏无 hover，常显信息 */
  .pagination { gap: .3rem; padding: 1.75rem 0 3rem; }
  .page-btn { min-width: 2.1rem; height: 2.4rem; } /* 触控热区 */
  .detail-overlay { padding: 1rem .75rem; }
  .detail-actions-row { position: sticky; top: 0; z-index: 5; background: var(--ink-bg); padding: .25rem 0; margin-bottom: 1rem; } /* 返回/下载随手可达 */
  .device-selector-section { margin-bottom: 1rem; }
  .device-frame-img { max-height: 62vh; }
  .detail-original-view img { max-height: 62vh; }
  .detail-nav { margin-top: 1rem; }
  .detail-nav .ghost-btn { flex: 1; }
  .wallpaper-meta { text-align: center; }
  .site-footer { padding: 1.5rem 0; font-size: .75rem; }
}
/* 小屏手机 */
@media (max-width: 380px) {
  .hero-title { font-size: 1.75rem; }
  .detail-actions-row { flex-wrap: wrap; }
  .detail-actions-row .download-btn { flex: 1 1 100%; }
}
/* 桌面大屏：限制瀑布流过宽 */
@media (min-width: 1600px) {
  .container { max-width: 1400px; }
}