/* E-InkWall 生成器样式（复用 style.css 的墨纸灰阶变量） */
[hidden] { display: none !important; }

/* 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; } }

/* hero 紧凑版（工具页不需要大 Hero，把首屏让给画布） */
.hero-gen { padding: 2rem 0 1.5rem; }
.hero-gen .hero-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: .6rem; }
.hero-gen .hero-sub { font-size: .9rem; }

/* 生成器页容器收窄：只作用于 hero 和 main（页头与壁纸库保持同宽同位，避免切页横跳） */
body.gen-page .hero .container, body.gen-page main.container { max-width: 1080px; }

/* 整体两栏布局 */
.gen-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; padding-bottom: 4rem; }
@media (max-width: 1024px) { .gen-layout { grid-template-columns: 1fr; } }

/* ============ 左侧预览列 ============ */
.gen-mode-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.gen-mode-tab { border: 1px solid var(--ink-border); background: var(--ink-bg); color: var(--ink-text-muted); border-radius: 999px; padding: .4rem 1rem; font-size: .8125rem; cursor: pointer; font-family: inherit; font-weight: 300; transition: color .2s, border-color .2s, background .2s; }
.gen-mode-tab:hover { color: var(--ink-text); border-color: var(--ink-accent); }
.gen-mode-tab.active { background: var(--ink-text); color: var(--ink-bg); border-color: var(--ink-text); }

.gen-preview-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.gen-compare { display: inline-flex; border: 1px solid var(--ink-border); border-radius: .5rem; overflow: hidden; }
.gen-seg { background: none; border: none; color: var(--ink-text-muted); padding: .35rem .85rem; font-size: .78rem; cursor: pointer; font-family: inherit; font-weight: 400; transition: color .2s, background .2s; }
.gen-seg:hover { color: var(--ink-text); }
.gen-seg.active { background: var(--ink-text); color: var(--ink-bg); }
.gen-seg-row { display: inline-flex; border: 1px solid var(--ink-border); border-radius: .5rem; overflow: hidden; width: 100%; }
.gen-seg-row .gen-seg { flex: 1; padding: .45rem .5rem; }

.gen-target-info { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--ink-text-muted); }
.gen-target-info b { color: var(--ink-text); font-weight: 500; margin-left: .3rem; }
.ti-label { opacity: .75; }

.gen-quick { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.gen-quick-label { font-size: .78rem; color: var(--ink-text-muted); }
.gen-quick-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.quick-chip { border: 1px solid var(--ink-border); background: var(--ink-bg); color: var(--ink-text-muted); border-radius: 999px; padding: .25rem .75rem; font-size: .75rem; cursor: pointer; font-family: inherit; transition: color .2s, border-color .2s; }
.quick-chip:hover { color: var(--ink-text); border-color: var(--ink-accent); }
.quick-chip.custom { border-color: #b03a2e; color: #b03a2e; }
.dark .quick-chip.custom { border-color: #d4553f; color: #d4553f; }

.gen-stage-wrap { border: 1px solid var(--ink-border); border-radius: .75rem; padding: .9rem; background: var(--ink-bg-alt); margin-bottom: .9rem; }
.gen-stage { display: flex; justify-content: center; min-height: 10rem; }
.gen-stage canvas { max-width: 100%; max-height: 72vh; height: auto; width: auto; border-radius: .25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 14px 34px -12px rgba(0,0,0,.22); background: #fff; }
.dark .gen-stage canvas { box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 14px 34px -12px rgba(0,0,0,.9); }
.gen-stage-caption { text-align: center; color: var(--ink-text-muted); font-size: .75rem; margin: .9rem 0 0; }

.gen-upload-zone { border: 1.5px dashed var(--ink-border); border-radius: .75rem; padding: 1.4rem 1rem; text-align: center; color: var(--ink-text-muted); font-size: .8125rem; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.gen-upload-zone:hover, .gen-upload-zone.dragover { border-color: var(--ink-accent); color: var(--ink-text); background: var(--ink-bg-alt); }
.gen-upload-actions { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; flex-wrap: wrap; }
.gen-privacy { font-size: .75rem; color: var(--ink-text-muted); }

/* ============ 右侧调节面板 ============ */
.gen-panel { border: 1px solid var(--ink-border); border-radius: .75rem; padding: 1.5rem; background: var(--ink-bg); position: sticky; top: 4.5rem; }
@media (max-width: 1024px) { .gen-panel { position: static; } }
.gen-panel-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 .3rem; }
.gen-panel-head p { color: var(--ink-text-muted); font-size: .8rem; margin: 0 0 .75rem; }
.gen-format-chip { display: inline-block; border: 1px solid var(--ink-border); border-radius: 999px; padding: .15rem .6rem; font-size: .7rem; letter-spacing: .05em; color: var(--ink-text-muted); text-transform: uppercase; }

.gen-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--ink-border); margin: 1rem 0 1.25rem; }
.gen-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-text-muted); padding: .5rem .7rem; font-size: .8125rem; cursor: pointer; font-family: inherit; font-weight: 300; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.gen-tab:hover { color: var(--ink-text); }
.gen-tab.active { color: var(--ink-text); border-bottom-color: #b03a2e; font-weight: 500; }
.dark .gen-tab.active { border-bottom-color: #d4553f; }

.gen-section h3, .mode-block h3 { font-size: .9rem; font-weight: 500; margin: 0 0 .3rem; }
.sec-desc { color: var(--ink-text-muted); font-size: .78rem; margin: 0 0 1rem; line-height: 1.6; }
.mode-section { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ink-border); }

.fld-label { display: block; font-size: .78rem; color: var(--ink-text-muted); margin: 1rem 0 .35rem; }
.fld-input { width: 100%; border: 1px solid var(--ink-border); border-radius: .5rem; background: var(--ink-bg); color: var(--ink-text); padding: .5rem .65rem; font: inherit; font-size: .8125rem; font-weight: 300; transition: border-color .2s; }
.fld-input:focus { outline: none; border-color: var(--ink-accent); }
textarea.fld-input { resize: vertical; line-height: 1.6; }
select.fld-input { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; padding-right: 2rem; }

.check-row { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .5rem; font-size: .8125rem; cursor: pointer; }
.check-row input { accent-color: #b03a2e; width: .95rem; height: .95rem; cursor: pointer; }

.slider-row { display: flex; align-items: center; gap: .75rem; }
.slider-row input[type="range"] { flex: 1; accent-color: #b03a2e; cursor: pointer; }
.slider-val { font-size: .78rem; font-weight: 500; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-text); }

.ghost-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--ink-border); background: none; color: var(--ink-text-muted); border-radius: .5rem; padding: .45rem .9rem; font: inherit; font-size: .8125rem; cursor: pointer; transition: color .2s, border-color .2s; }
.ghost-btn:hover:not(:disabled) { color: var(--ink-text); border-color: var(--ink-accent); }
.ghost-btn:disabled { opacity: .4; cursor: default; }

.custom-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.preset-actions { display: flex; gap: .6rem; }
.gen-export-note { margin-top: 1.25rem; }

.gen-download-row { margin-top: 1.5rem; }
.download-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--ink-text); color: var(--ink-bg); border: 1px solid var(--ink-text); border-radius: .5rem; padding: .7rem 1rem; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; transition: opacity .2s, transform .15s; }
.download-btn:hover:not(:disabled) { transform: translateY(-1px); }
.download-btn:disabled { opacity: .35; cursor: default; }
.download-btn svg { width: 1.05rem; height: 1.05rem; }

/* ============ MBTI ============ */
.mbti-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.mbti-type { border: 1px solid var(--ink-border); background: var(--ink-bg); color: var(--ink-text-muted); border-radius: .5rem; padding: .45rem .2rem; font-family: inherit; cursor: pointer; text-align: center; transition: color .2s, border-color .2s, background .2s; }
.mbti-type:hover { color: var(--ink-text); border-color: var(--ink-accent); }
.mbti-type.active { background: var(--ink-text); color: var(--ink-bg); border-color: var(--ink-text); }
.mbti-type .mt-code { display: block; font-weight: 600; font-size: .85rem; letter-spacing: .02em; }
.mbti-type .mt-name { display: block; font-size: .65rem; margin-top: .15rem; opacity: .8; }
.mbti-brief { border: 1px solid var(--ink-border); border-radius: .5rem; padding: .8rem .9rem; margin-top: 1rem; font-size: .78rem; line-height: 1.7; color: var(--ink-text-light); }
.mbti-brief .mb-name { font-weight: 500; color: var(--ink-text); }
.mbti-brief .mb-kw { color: var(--ink-text-muted); margin-top: .3rem; display: block; }
.quote-list { display: flex; flex-direction: column; gap: .4rem; }
.quote-item { text-align: left; border: 1px solid var(--ink-border); background: var(--ink-bg); color: var(--ink-text-muted); border-radius: .5rem; padding: .5rem .75rem; font: inherit; font-size: .8rem; cursor: pointer; transition: color .2s, border-color .2s; }
.quote-item:hover { color: var(--ink-text); border-color: var(--ink-accent); }
.quote-item.active { border-color: #b03a2e; color: var(--ink-text); }
.dark .quote-item.active { border-color: #d4553f; }

/* 词云/文字模式隐藏上传 */
.gen-upload-zone.mode-hidden, .gen-quick.mode-hidden { display: none; }

/* ============ 移动端优化 ============ */
@media (max-width: 1024px) {
  /* 单列堆叠后：下载条吸底，随时可导出 */
  .gen-download-row {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    margin: 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: var(--ink-bg); border-top: 1px solid var(--ink-border);
  }
  .gen-layout { padding-bottom: 5.5rem; }
}