/* ============================================================
   Liine · 参考线小工具
   设计令牌沿用小红书小工具模板：直角、暗底、无阴影
   ============================================================ */

:root {
  --bg: oklch(12% 0.0015 228.68);
  --surface: oklch(21.03% 0.003 228.68);
  --fg: oklch(99.11% 0.0015 228.68);
  --fg-muted: oklch(70.5% 0.003 228.68);
  --line: oklch(28% 0.0015 228.68);
  --accent: #00ff90;
  --accent-fg: oklch(15% 0.03 155);
  --mask: oklch(4% 0.002 228.68 / 0.92);
  --mask-opacity: 0.6;

  --fs-1: 12px;
  --fs-2: 12px;
  --fs-3: 13px;
  --fs-4: 16px;
  --fs-5: 18px;
  --lh: 1.45;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;

  --bw: 1px;
  --hit: 44px;
  --fast: 80ms;
  --title-h: 48px;
  --action-h: 48px;
  --tab-h: 48px;
  --cell-h: 48px;

  --font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
}

/* ---------- 原生体验：是 Web，但必须是 app 感 ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-3);
  line-height: var(--lh);
  font-family: var(--font-family);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }
svg { display: block; flex: 0 0 auto; }

/* ---------- 四区骨架 ---------- */

#app {
  display: grid;
  grid-template-rows: var(--title-h) minmax(0, 1fr) auto var(--action-h);
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 1 · 标题栏 */
.title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--bw) solid var(--line);
  padding: 0 var(--s-4);
}
.title { font-size: var(--fs-4); font-weight: 600; letter-spacing: 0.04em; display: flex; align-items: center; }
.logo { width: 48px; height: 17px; color: var(--fg); }

/* 2 · 动作栏（圆按钮：撤销/重做左一组，重置右单个） */
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.act-group {
  display: flex;
  gap: var(--s-3);
}
.act-round {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--bw) solid var(--line);
  background: transparent;
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.act-round:disabled {
  color: var(--fg-muted);
  cursor: default;
  opacity: 0.55;
}
.act-round svg {
  width: 14px;
  height: 14px;
}

/* 底部矩形按钮（替换照片/保存发布） */
.act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 100%;
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--fg);
}
.act svg { width: 14px; height: 14px; }
.act + .act { border-left: var(--bw) solid var(--line); }
.act:active:not(:disabled) { background: var(--fg); color: var(--bg); }
.act:disabled {
  color: var(--fg-muted);
  cursor: default;
  opacity: 0.55;
}

/* 3 · 预览区 */
.stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  overflow: hidden;
}

#frame {
  position: relative;
  display: block;
}
#frame[hidden] { display: none; }

#photo {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

#lines, #input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#input { pointer-events: auto; touch-action: none; }

.sample {
  position: absolute;
  inset: var(--s-4);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-2);
  background: var(--surface);
  color: var(--fg);
  text-align: center;
  padding: var(--s-4);
}
.sample[hidden] { display: none; }
.sample-title { font-size: var(--fs-4); font-weight: 500; }
.sample-hint { font-size: var(--fs-1); color: var(--fg-muted); }
.sample:active { background: var(--fg); color: var(--bg); }
.sample:active .sample-hint { color: var(--bg); opacity: 0.7; }

/* 4 · 调节区 */
.panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  /* 6 列 grid 每格宽度，跟第一排 sq-btn 严格对齐 */
  --cell: calc((min(100vw, 480px) - 2 * var(--s-4) - 5 * var(--s-4)) / 6);
}
.panel[hidden] { display: none; }
.sec + .sec {
  margin-top: var(--s-4);
  margin-left: calc(-1 * var(--s-4));
  margin-right: calc(-1 * var(--s-4));
  padding-top: var(--s-4);
  padding-left: var(--s-4);
  padding-right: var(--s-4);
  border-top: var(--bw) solid var(--line);
}

/* 三排通用方格按钮：相同高度 / 边框 / 按压反馈 / 选中态 / 图标制式 */
.sq-btn,
.btn-type,
.btn-erase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--cell-h);
  color: var(--fg);
  background: transparent;
  border: var(--bw) solid var(--line);
  transition: transform var(--fast) ease, background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.btn-type[aria-pressed="true"],
.btn-erase[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  position: relative;
  z-index: 1;
}
.sq-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.sq-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.btn-type svg,
.btn-erase svg {
  width: 16px;
  height: 16px;
}
.btn-label {
  font-size: 10px;
  line-height: 1;
}

/* 布局：两排统一 6 列 grid，同 gap，按钮宽度对齐 */
.swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
}
.type-row {
  display: flex;
  gap: var(--s-4);
  align-items: center;
}
/* seg 内元素连体：共享中间边（右元素往左压 1px 覆盖左元素边） */
.seg {
  display: flex;
  gap: 0;
  align-items: center;
}
.seg > * + * { margin-left: calc(-1 * var(--bw)); }
.seg .btn-type,
.seg .btn-erase { width: var(--cell); }
.seg-erase { flex: 1; min-width: 0; }

/* 自绘滑杆：带外框，跟擦除方块共享左边 */
.ctl-slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  min-height: var(--cell-h);
  padding: 0 var(--s-3);
  border: var(--bw) solid var(--line);
  background: transparent;
  touch-action: none;
}
.ctl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: 10px;
  line-height: 1;
  color: var(--fg-muted);
}
.ctl-label { color: var(--fg); }
.ctl-value { color: var(--fg); font-variant-numeric: tabular-nums; }
.track {
  position: relative;
  height: 16px;
  background: transparent;
}
.track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--line);
}
.track-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--accent);
}
.thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  transition: transform var(--fast) ease;
}
.thumb::after {
  position: absolute;
  inset: 2px;
  width: 8px;
  height: 8px;
  background: var(--accent-fg);
  content: "";
}
.ctl-slider.is-drag .thumb { transform: translate(-50%, -50%) scale(1.08); }
.ctl-slider:not(.is-disabled) {
  border-color: var(--accent);
}
.ctl-slider.is-disabled {
  pointer-events: none;
}
.ctl-slider.is-disabled .track-fill,
.ctl-slider.is-disabled .thumb {
  background: var(--line);
}
.ctl-slider.is-disabled .thumb::after {
  background: var(--bg);
}
.ctl-slider.is-disabled .ctl-label,
.ctl-slider.is-disabled .ctl-value {
  color: var(--fg-muted);
}

/* 5 · 底部栏：加图 / 保存 */
.bottom-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--bw) solid var(--line);
}

/* 导出浮层：全屏遮罩 + 长按存图 */
.export-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) var(--s-4) env(safe-area-inset-bottom);
}
.export-modal[hidden] { display: none; }
.export-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--mask);
  border: 0;
  padding: 0;
}
.export-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-8);
  max-width: 100%;
  max-height: 100%;
}
.export-img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}
.export-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  width: 100%;
  max-width: 360px;
}
.export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 44px;
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--fg);
  background: transparent;
  border: var(--bw) solid var(--line);
  text-decoration: none;
}
.export-btn svg { width: 14px; height: 14px; }
.export-btn:active { background: var(--fg); color: var(--bg); }
.export-btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.export-btn-primary:active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* =========================================================
 * 布局顶层：桌面端左右两栏（手机屏幕 + 信息面板）
 *   - 移动端：#stage-wrap 占满视口，#info-panel 不显示
 *   - 桌面端（≥481×600）：#stage-wrap 横向两栏，左 375×812 手机模拟 + 右信息面板
 * =======================================================*/
#stage-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

@media (min-width: 481px) and (min-height: 600px) {
  #stage-wrap {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    padding: 80px;
    overflow: auto;
  }
  /* 覆盖移动端 #app 的 max-width:480px + 居中，锁成手机尺寸 */
  #app {
    width: 375px;
    height: 812px;
    margin: 0;
    padding-top: 0;
    border: none;
    box-shadow: 0 0 0 2px var(--fg);
    justify-self: center;
  }
  #info-panel {
    display: flex;
    flex-direction: column;
    height: 812px;
  }
  #info-panel.hidden { display: none; }
  #install-btn { display: none; }
}

/* 已安装为桌面 App（standalone）：内容铺满窗口 */
@media (display-mode: standalone) {
  #stage-wrap { padding: 0; align-items: stretch; justify-content: stretch; }
  #app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding-top: 0;
    border: none;
  }
  #info-panel { display: none !important; }
  #install-btn { display: flex; }
}

/* =========================================================
 * 信息面板（桌面端右侧，同 Lux/Riso）
 * =======================================================*/
#info-panel { color: var(--fg); }
#info-panel.hidden { display: none; }
.info-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--s-5);
  gap: var(--s-5);
}
.info-header { width: 320px; display: flex; align-items: center; gap: var(--s-4); }
.info-icon { width: 80px; height: 80px; border-radius: 0; flex: 0 0 auto; }
.info-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); text-align: left; }
.info-name { margin: 0; font-family: var(--font-family); font-weight: 600; font-size: 22px; letter-spacing: 0.5px; }
.info-desc { margin: 0; font-family: var(--font-family); font-size: var(--fs-3); color: var(--fg); letter-spacing: 0.2px; line-height: 1.6; }
.info-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.info-action-btn {
  width: 320px;
  height: 48px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--fg);
  color: var(--fg);
  font-family: var(--font-family);
  font-size: var(--fs-3);
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: stretch;
  transition: background 0.1s, border-color 0.1s, transform 0.08s;
}
.btn-icon { width: 48px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-right: 1px solid var(--fg); }
.btn-icon img { width: 32px; height: 32px; flex: 0 0 auto; display: block; }
.info-action-btn > span:not(.btn-icon):not(.btn-toggle) { flex: 1; display: flex; align-items: center; padding: 0 var(--s-5); }
.btn-toggle { flex: 0 0 auto; align-self: center; margin-right: var(--s-4); font-size: 18px; line-height: 1; font-family: var(--font-family); }
.info-action-btn:hover { border-color: var(--fg); }
.info-action-btn:active { background: var(--fg); color: var(--bg); transform: scale(0.99); }
.info-action-btn:active .btn-icon img { filter: brightness(0); }
.info-action-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* 标题栏安装按钮（install-hint 动态创建） */
#install-btn {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s-2) var(--s-3);
  color: var(--fg);
  font-family: var(--font-family);
  font-size: var(--fs-1);
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.1s, transform 0.08s;
}
#install-btn:active {
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-50%) scale(0.98);
}
#install-btn img {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

/* =========================================================
 * 安装引导浮层 & 手风琴（同 Lux/Riso 结构）
 * =======================================================*/
.install-sheet {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
}
.install-sheet.show { opacity: 1; pointer-events: auto; }
.install-sheet-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--mask-opacity)); }
.install-sheet-body {
  position: relative; width: 360px; max-width: calc(100vw - 32px);
  background: var(--surface); padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.install-sheet-header { display: flex; align-items: center; justify-content: space-between; }
.install-sheet-title {
  display: inline-flex; align-items: center; gap: var(--s-4);
  font-family: var(--font-family); font-weight: 600; font-size: var(--fs-4);
  color: var(--fg); letter-spacing: 0.5px;
}
.install-sheet-icon { display: block; width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; }
.install-sheet-close {
  width: var(--s-8); height: var(--s-8); background: none;
  border: 1px solid var(--line); color: var(--fg); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: border-color 0.1s, transform 0.08s;
}
.install-sheet-close:active { border-color: var(--fg); transform: scale(0.98); }

.action-item { display: flex; flex-direction: column; }
.accordion-panel {
  width: 320px;
  border: 1px solid var(--fg);
  border-top: none;
  padding: var(--s-4);
  box-sizing: border-box;
}
.accordion-panel .qr-wrap { padding: 0; display: flex; justify-content: center; }
.accordion-panel .qr-wrap img { width: 200px; height: 200px; }
.accordion-panel .install-steps { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.install-step { display: flex; align-items: center; gap: var(--s-2); }
.step-no {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.step-inline-icon { display: inline; width: 18px; height: 18px; flex-shrink: 0; color: inherit; }
.step-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.25em; font-size: 14px; letter-spacing: 0.5px; line-height: 1.5; }
.step-capsule {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: color-mix(in srgb, var(--fg) 10%, var(--bg));
  border: 1px solid var(--fg); border-radius: 999px; font-size: 13px;
}

/* #install-btn 的显隐要赢过桌面/standalone 媒体查询（同优先级靠源码顺序），重申放在最后 */
@media (min-width: 481px) and (min-height: 600px) {
  #install-btn { display: none; }
}
@media (display-mode: standalone) {
  #install-btn { display: flex; }
}