/* PhotoSync 官网共用样式: 深色暖调, 衬线标题, 左对齐编辑排版. index / support / privacy 三页共用 */
:root {
  --bg: #12110f;
  --panel: #1b1916;
  --line: #2e2a25;
  --ink: #ece6dc;
  --muted: #a39a8c;
  --dim: #6f675c;
  --amber: #f2a541;
  --amber-ink: #1a1206;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); line-height: 1.7;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(242, 165, 65, .13), transparent 60%),
    var(--bg);
  min-height: 100vh;
}
a { color: var(--amber); text-underline-offset: 3px; }
::selection { background: var(--amber); color: var(--amber-ink); }

.page { max-width: 1040px; margin: 0 auto; padding: 0 32px 64px; }

/* 顶栏 */
.bar { display: flex; align-items: center; gap: 14px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-size: 20px; letter-spacing: .2px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 14px; }
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover, .bar nav a.on { color: var(--ink); }
.lang-select { font: 13px var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 28px 6px 10px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a39a8c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }

/* 首页主视觉 */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; padding: 88px 0 72px; }
.eyebrow { font: 12px var(--mono); letter-spacing: 2.5px; text-transform: uppercase; color: var(--amber); margin: 0 0 18px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7vw, 76px); line-height: 1.02;
  letter-spacing: -1px; margin: 0 0 24px; }
.hero h1 em { font-style: italic; color: var(--amber); }
.tagline { font-size: 18px; color: var(--muted); max-width: 30em; margin: 0; }

/* 右侧示意: 手机 → 电脑, 中间没有服务器 */
.flow { border: 1px solid var(--line); border-radius: 4px; padding: 28px; background: var(--panel);
  font: 13px/1.9 var(--mono); color: var(--muted); }
.flow .node { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.flow .node span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px rgba(242, 165, 65, .18); }
.flow .wire { margin: 6px 0 6px 4px; padding-left: 20px; border-left: 2px dashed var(--line); color: var(--dim); }
.flow .x { text-decoration: line-through; }

/* 下载: 编号列表行 */
.section-title { font: 12px var(--mono); letter-spacing: 2.5px; text-transform: uppercase; color: var(--dim);
  margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dl { list-style: none; margin: 0; padding: 0; counter-reset: dl; }
.dl li { counter-increment: dl; display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: center;
  padding: 28px 0; border-bottom: 1px solid var(--line); }
.dl li::before { content: counter(dl, decimal-leading-zero); font: 13px var(--mono); color: var(--dim); }
.dl h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0 0 2px; }
.dl p { margin: 0; color: var(--muted); font-size: 14.5px; }
.dl .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn { display: inline-block; text-decoration: none; font-size: 14px; font-weight: 600; padding: 11px 20px;
  border-radius: 999px; white-space: nowrap; border: 1px solid var(--amber); transition: background .15s, color .15s; }
.btn.solid { background: var(--amber); color: var(--amber-ink); }
.btn.solid:hover { background: #ffbb5c; }
.btn.line { color: var(--amber); background: transparent; }
.btn.line:hover { background: rgba(242, 165, 65, .1); }

/* 页脚 */
.foot { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 72px; padding-top: 24px;
  border-top: 1px solid var(--line); font-size: 13.5px; color: var(--dim); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .right { margin-left: auto; font-family: var(--mono); font-size: 12px; }

/* 文档页 (支持 / 隐私) */
.doc { display: grid; grid-template-columns: 220px 1fr; gap: 56px; padding-top: 64px; }
.doc aside { position: sticky; top: 32px; align-self: start; }
.doc aside .eyebrow { margin-bottom: 14px; }
.switch { display: flex; flex-direction: column; gap: 6px; }
.switch button { font: 13px var(--mono); text-align: left; color: var(--muted); background: transparent;
  border: 0; border-left: 2px solid var(--line); padding: 4px 12px; cursor: pointer; }
.switch button.active { color: var(--ink); border-left-color: var(--amber); }
.doc article { max-width: 680px; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 54px); line-height: 1.08;
  letter-spacing: -.5px; margin: 0 0 10px; }
.doc .meta { font: 13px var(--mono); color: var(--dim); margin: 0 0 36px; }
.doc h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 48px 0 10px; padding-top: 22px;
  border-top: 1px solid var(--line); }
.doc h3 { font-size: 16px; margin: 26px 0 4px; color: var(--ink); }
.doc p, .doc li { color: #cfc7ba; font-size: 16px; }
.doc strong { color: var(--ink); }
.doc ul { padding-left: 20px; }
.doc li::marker { color: var(--amber); }
.lang { display: none; }
.lang.active { display: block; }
.contact { border: 1px solid var(--line); border-left: 3px solid var(--amber); background: var(--panel);
  padding: 18px 22px; margin-top: 24px; }

@media (max-width: 820px) {
  .page { padding: 0 20px 48px; }
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 56px 0 48px; }
  .dl li { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .dl li::before { margin-bottom: -4px; }
  .dl .acts { justify-content: flex-start; }
  .doc { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .doc aside { position: static; }
  .switch { flex-direction: row; }
  .switch button { border-left: 0; border-bottom: 2px solid var(--line); padding: 4px 10px; }
  .switch button.active { border-bottom-color: var(--amber); }
  .bar nav { gap: 14px; }
  .bar nav a.hide-sm { display: none; }
}

/* 中日韩: 没有真斜体, 浏览器硬斜很难看; 强调只靠颜色. 字号略收, 按词换行 */
:lang(zh) .hero h1, :lang(ja) .hero h1, :lang(ko) .hero h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.15; word-break: keep-all; }
:lang(zh) .hero h1 em, :lang(ja) .hero h1 em, :lang(ko) .hero h1 em { font-style: normal; }

/* 网格子项默认 min-width:auto, 长文本会把列撑出屏幕 */
.hero > *, .dl li > *, .doc > * { min-width: 0; }
.contact h2 { border-top: 0; margin-top: 0; padding-top: 0; }