/* ═══════════════════════════════════════════════════════════════
   来杯美式 · AMERICANO — 暗色霓虹画廊风格
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #0a0a0c;
  --bg-2: #111114;
  --accent: #7ec8e3;
  --text: #f4f4f5;
  --dim: #9a9aa3;
  --faint: #6b6b76;
  --line: rgba(255, 255, 255, 0.08);
  --line-bright: rgba(126, 200, 227, 0.5);
  --cyan: #7ec8e3;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* 表单控件默认的固有宽度（约 20 字符）会把 grid / flex 轨道顶宽，窄屏下直接撑出容器。
   这里统一允许收缩，具体宽度交给布局决定。 */
input, textarea, select { min-width: 0; max-width: 100%; }
.hidden { display: none !important; }
html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1000px 700px at 50% -10%, rgba(126, 200, 227, 0.08), transparent 60%),
    linear-gradient(160deg, #0a0a0c 0%, #0c0d11 55%, #0a0a0c 100%);
  overflow-x: hidden;
  position: relative;
}

/* 网格 + 扫描线：CRT 显示器氛围 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(126, 200, 227, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 200, 227, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.22) 3px, transparent 4px);
}

.wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 26px 22px 36px; }

.panel {
  background: linear-gradient(180deg, rgba(18, 18, 22, 0.85), rgba(13, 13, 16, 0.85));
  border: 1px solid var(--line);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  position: relative;
}

.mono { font-family: var(--mono); letter-spacing: 0.06em; }

/* ── 顶栏 ── */
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; margin-bottom: 42px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-text { font-size: 1.18rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; }
.brand-sub { font-family: var(--mono); font-size: 10px; color: var(--cyan); letter-spacing: 0.3em; }

nav { display: flex; gap: 20px; align-items: center; }
nav a { color: var(--dim); text-decoration: none; font-size: 14px; transition: color 0.2s ease, text-shadow 0.2s ease; }
nav a:hover { color: var(--cyan); text-shadow: 0 0 8px rgba(126, 200, 227, 0.6); }
nav a.cta { color: var(--cyan); padding: 6px 15px; border-radius: 6px; border: 1px solid var(--line-bright); background: rgba(126, 200, 227, 0.06); transition: all 0.22s ease; }
nav a.cta:hover { background: rgba(126, 200, 227, 0.14); box-shadow: 0 0 16px rgba(126, 200, 227, 0.35); }

.user-wrap { position: relative; display: inline-flex; }
.sso-login-btn {
  padding: 6px 16px; border-radius: 6px; border: 1px solid var(--line-bright);
  background: rgba(126, 200, 227, 0.08); color: var(--cyan); font-size: 13.5px; font-weight: 600;
  font-family: var(--mono); letter-spacing: 1px; cursor: pointer; transition: all 0.22s ease;
}
.sso-login-btn:hover { background: rgba(126, 200, 227, 0.16); box-shadow: 0 0 16px rgba(126, 200, 227, 0.4); }
.sso-login-btn.done { border-color: rgba(0, 255, 170, 0.5); background: rgba(0, 255, 170, 0.1); color: #4cffb4; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 登录弹窗 ── */
.sso-modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center;
  padding: 20px; background: rgba(3, 4, 12, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* margin:auto 代替 align-items:center：内容不超高时居中，超高时从顶部开始并可滚动，
   软键盘弹出、横屏、小屏都不会把上半截裁掉 */
.sso-modal { position: relative; margin: auto; width: 100%; max-width: 420px; padding: 30px 28px 24px; text-align: center; animation: fadeUp 0.3s ease both; }
.sso-modal h3 { font-family: var(--mono); font-size: 19px; margin-bottom: 6px; letter-spacing: 0.2em; color: var(--cyan); text-shadow: 0 0 12px rgba(126, 200, 227, 0.5); }
.sso-hint { color: var(--dim); font-size: 12.5px; margin-bottom: 16px; line-height: 1.7; }
.sso-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.sso-tab {
  flex: 1; padding: 8px 4px; border-radius: 6px; border: 1px solid var(--line); background: transparent;
  color: var(--dim); font-size: 13px; font-family: inherit; cursor: pointer; transition: all 0.2s ease;
}
.sso-tab.active { color: var(--cyan); border-color: var(--line-bright); background: rgba(126, 200, 227, 0.08); }
/* minmax(0, 1fr)：轨道按容器宽度走，不允许被输入框的固有宽度顶开 */
.sso-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sso-form input {
  width: 100%; min-width: 0;
  padding: 11px 14px; border-radius: 8px; border: 1px solid var(--line); background: rgba(126, 200, 227, 0.04);
  color: var(--text); outline: none; font-family: var(--mono); font-size: 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sso-form input::placeholder { color: var(--faint); }
.sso-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(126, 200, 227, 0.14); }
.sso-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sso-code-row button {
  padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
  color: var(--dim); font-size: 13px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: all 0.2s ease;
}
.sso-code-row button:hover:not(:disabled) { color: var(--cyan); background: rgba(126, 200, 227, 0.1); }
.sso-code-row button:disabled { opacity: 0.5; cursor: default; }
.sso-submit {
  padding: 12px; border-radius: 8px; border: 1px solid var(--line-bright);
  background: linear-gradient(90deg, rgba(126,200,227,0.22), rgba(126,200,227,0.22)); color: #fff;
  font-weight: 600; font-family: var(--mono); letter-spacing: 2px; cursor: pointer; transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.sso-submit:hover:not(:disabled) { box-shadow: 0 0 18px rgba(126, 200, 227, 0.4); }
.sso-submit:disabled { opacity: 0.5; cursor: default; }
.sso-status { font-size: 13px; color: var(--dim); min-height: 16px; margin-top: 4px; }
.sso-status.ok { color: #4cffb4; }
.sso-status.err { color: #ff6b7a; }
.sso-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: none; border-radius: 6px; background: rgba(255,255,255,0.06); color: var(--dim); font-size: 14px; cursor: pointer; transition: all 0.2s ease; }
.sso-close:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* ── 首屏 ── */
.hero { text-align: center; padding: 30px 20px 8px; }
.hero .kicker { font-family: var(--mono); color: var(--accent); font-size: 12px; letter-spacing: 0.5em; margin-bottom: 14px; opacity: 0.85; animation: fadeUp 0.8s ease both; }
.hero h1 { font-size: clamp(40px, 7vw, 68px); font-weight: 800; letter-spacing: 0.06em; line-height: 1.1; color: #fff; position: relative; animation: fadeUp 0.8s 0.08s ease both; }
.hero .subhead { margin-top: 12px; color: var(--dim); font-size: 14px; letter-spacing: 0.35em; animation: fadeUp 0.8s 0.16s ease both; }
.divider-title { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; animation: fadeUp 0.8s 0.2s ease both; }
.divider-line { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 8px rgba(126,200,227,0.6); }
.divider-text { font-family: var(--mono); color: var(--accent); font-size: 12px; letter-spacing: 0.3em; white-space: nowrap; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.hero-cover { text-align: center; padding: 30px 20px 8px; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.hero-cta a {
  padding: 11px 26px; border-radius: 8px; font-size: 14.5px; font-weight: 600;
  text-decoration: none; letter-spacing: 0.06em; transition: all 0.22s ease;
}
.hero-cta .primary {
  border: 1px solid var(--line-bright);
  background: linear-gradient(90deg, rgba(126,200,227,0.22), rgba(126,200,227,0.22)); color: #fff;
}
.hero-cta .primary:hover { box-shadow: 0 0 20px rgba(126,200,227,0.45); }
.hero-cta .ghost { border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--text); }
.hero-cta .ghost:hover { color: var(--accent); border-color: var(--line-bright); }

/* ── 作品墙 ── */
/* 加载骨架：先占好位置，图来了再替换，避免整页跳动（CLS） */
.work-skel {
  border-radius: 10px;
  border: 1px solid var(--line); background: rgba(126,200,227,0.03);
  aspect-ratio: 3 / 4; animation: skel 1.4s ease-in-out infinite;
  flex: 1 1 0; min-width: 0;
}
@keyframes skel { 0%,100% { opacity: 0.32; } 50% { opacity: 0.68; } }

.contact { padding: 22px 20px 4px; text-align: center; }
.contact-line { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; }
.contact-item { color: var(--dim); font-size: 14px; font-family: var(--mono); cursor: pointer; padding: 6px 12px; border-radius: 6px; transition: all 0.2s ease; user-select: all; }
.contact-item:hover { color: var(--cyan); background: rgba(126,200,227,0.08); text-shadow: 0 0 8px rgba(126,200,227,0.5); }
.contact-divider { color: var(--faint); }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.social-link { color: var(--dim); text-decoration: none; font-size: 13.5px; padding: 8px 18px; border-radius: 6px; border: 1px solid var(--line); background: rgba(126,200,227,0.03); transition: all 0.22s ease; }
.social-link:hover { color: var(--cyan); border-color: var(--line-bright); background: rgba(126,200,227,0.1); box-shadow: 0 0 14px rgba(126,200,227,0.3); transform: translateY(-2px); }

.works { margin: 40px 0 8px; }
.works-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.works-head h2 { font-size: 18px; letter-spacing: 0.05em; }
.works-head h2::before { content: "▍"; color: var(--cyan); margin-right: 8px; }
.works-head-right { display: flex; align-items: center; gap: 12px; }
/* 移动端作品墙形态切换：默认 2 列紧凑，可切 1 列大图看细节。桌面端列宽本来就够，这个开关不显示。 */
.works-view {
  display: none;
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.03); color: var(--dim);
  font-size: 12.5px; font-family: var(--mono); line-height: 1.4; white-space: nowrap;
  cursor: pointer; transition: all 0.2s ease;
}
.works-view:hover { color: var(--cyan); border-color: var(--line-bright); }
.works-view[aria-pressed="true"] { color: var(--cyan); border-color: var(--line-bright); background: rgba(126,200,227,0.1); }
.works-count { font-family: var(--mono); color: var(--faint); font-size: 12px; }

/* ── 分类筛选栏 ── */
.works-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.works-filter-btn {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.03);
  color: var(--dim); font-size: 13.5px; font-family: inherit;
  cursor: pointer; transition: all 0.2s ease;
}
.works-filter-btn:hover { color: var(--cyan); border-color: var(--line-bright); }
.works-filter-btn.active {
  color: var(--cyan); border-color: var(--cyan);
  background: rgba(126,200,227,0.1); box-shadow: 0 0 14px rgba(126,200,227,0.18);
}
.works-filter-btn .n { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.works-filter-btn.active .n { color: var(--cyan); }
/* 行式排版：容器是纵向的行栈，每行 .works-row 由 JS 按比例排版（高度一致、填满行宽） */
.works-grid { display: flex; flex-direction: column; gap: 14px; }
.works-row { display: flex; justify-content: center; }
.work-item { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(126,200,227,0.03); cursor: zoom-in; flex: none; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.work-item:hover { transform: translateY(-3px); border-color: var(--line-bright); box-shadow: 0 0 22px rgba(126,200,227,0.3); }
.work-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 图片按需加载：还没取回来时给个同色占位，避免破图图标和跳动 */
.work-item img.is-loading { background: linear-gradient(100deg, rgba(126,200,227,0.05), rgba(126,200,227,0.11), rgba(126,200,227,0.05)); }

/* 作品卡片皮肤：底部渐变 + 角色名（参考摄影师作品集范式） */
.work-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 36px 14px 13px; pointer-events: none;
  background: linear-gradient(to top, rgba(5,6,15,0.9) 0%, rgba(5,6,15,0.55) 45%, rgba(5,6,15,0) 100%);
}
.work-char {
  font-size: 19px; font-weight: 500; color: #fff;
  letter-spacing: 0.04em; line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.works-grid.mode-large .work-char { font-size: 24px; }
.work-del { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border: none; border-radius: 6px; background: rgba(5,6,15,0.8); color: #ff6b7a; font-size: 12px; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; z-index: 2; }
.work-item:hover .work-del { opacity: 1; }
.work-edit { position: absolute; top: 38px; right: 8px; padding: 4px 10px; border: none; border-radius: 6px; background: rgba(5,6,15,0.8); color: var(--cyan); font-size: 12px; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; z-index: 3; }
.work-item:hover .work-edit { opacity: 1; }
.works-empty { color: var(--dim); font-size: 14px; padding: 30px 0; text-align: center; }
.works-admin { margin-top: 18px; text-align: center; }
.works-upload-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 12px; }
.works-upload-form input {
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(126,200,227,0.04); color: var(--text);
  font-size: 13px; font-family: inherit; min-width: 160px;
}
/* 自绘暗色下拉（替代原生 select：Windows 原生展开列表是白色系统渲染） */
.sel-dark { position: relative; min-width: 160px; }
.sel-dark-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(126,200,227,0.04);
  color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
  transition: border-color 0.2s ease;
}
.sel-dark-btn:hover { border-color: var(--line-bright); }
.sel-dark.open .sel-dark-btn { border-color: var(--cyan); }
.sel-dark-val { text-align: left; }
.sel-dark-caret { color: var(--dim); font-size: 11px; }
.sel-dark-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90;
  background: #101018; border: 1px solid var(--line-bright); border-radius: 10px;
  padding: 6px; display: none; max-height: 260px; overflow: auto;
  box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}
.sel-dark.open .sel-dark-list { display: block; }
.sel-dark-opt {
  padding: 8px 10px; border-radius: 6px; font-size: 13px;
  color: var(--dim); cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.sel-dark-opt:hover { background: rgba(126,200,227,0.08); color: var(--text); }
.sel-dark-opt.is-active { color: var(--cyan); }
.works-edit {
  display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.03); text-align: left;
}
.works-edit.hidden { display: none; }
.works-edit > img { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.works-edit-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.works-edit-form select, .works-edit-form input {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(126,200,227,0.04); color: var(--text); font-size: 13px; font-family: inherit;
}
.btn-ghost { background: transparent; color: var(--dim); border-color: var(--line); }
.btn-ghost:hover { color: var(--cyan); }
.btn-neon { display: inline-block; padding: 10px 22px; border-radius: 8px; border: 1px solid var(--line-bright); background: linear-gradient(90deg, rgba(126,200,227,0.16), rgba(126,200,227,0.16)); color: #fff; font-size: 14px; font-weight: 600; font-family: var(--mono); letter-spacing: 1px; cursor: pointer; transition: box-shadow 0.2s ease, opacity 0.2s ease; }
.btn-neon:hover:not(:disabled) { box-shadow: 0 0 20px rgba(126,200,227,0.45); }
.btn-neon:disabled { opacity: 0.5; cursor: default; }
.btn-ghost { display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--dim); font-size: 13px; font-family: var(--mono); cursor: pointer; transition: all 0.2s ease; }
.btn-ghost:hover { color: var(--cyan); border-color: var(--line-bright); }

/* ── 灯箱 ── */
/* overscroll-behavior:contain 挡住移动端下拉刷新 / 滚动穿透；
   touch-action:none 让 iOS 不再对灯箱做橡皮筋位移，横滑手势也不会被浏览器抢走 */
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(2,3,10,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overscroll-behavior: contain; touch-action: none; }
.lightbox-img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 60px rgba(126,200,227,0.25); transition: opacity 0.25s ease; user-select: none; -webkit-user-drag: none; }
/* 切图时先压淡，图到了再亮起来，避免换图瞬间的闪白 */
.lightbox-img.switching { opacity: 0.35; }
.lightbox-close { position: absolute; top: 18px; right: 22px; width: 38px; height: 38px; border: none; border-radius: 6px; background: rgba(126,200,227,0.08); color: #fff; font-size: 18px; cursor: pointer; transition: background 0.2s ease; }
.lightbox-close:hover { background: rgba(126,200,227,0.22); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: none; border-radius: 6px; background: rgba(126,200,227,0.08); color: var(--cyan); font-size: 24px; cursor: pointer; transition: background 0.2s ease; }
.lightbox-nav:hover { background: rgba(126,200,227,0.2); }
.lightbox-prev { left: 18px; } .lightbox-next { right: 18px; }
.lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(200,230,255,0.7); font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; }

/* ── 价格区块 ── */
.pricing { padding: 26px 26px; margin: 40px 0; }
.pricing h2 { font-size: 17px; margin-bottom: 6px; }
.pricing h2::before { content: "▍"; color: var(--cyan); margin-right: 8px; }
.pricing .pr-sub { color: var(--dim); font-size: 13px; margin-bottom: 18px; line-height: 1.7; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px; }
.pr-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px;
  background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.22s ease;
}
.pr-card:hover { border-color: var(--line-bright); transform: translateY(-3px); box-shadow: 0 0 22px rgba(126,200,227,0.22); }
.pr-card .pr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-card .pr-name { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-card .pr-price { font-family: var(--mono); color: var(--cyan); font-size: 26px; margin-top: 10px; line-height: 1.2; }
.pr-card .pr-price small { font-size: 12px; color: var(--faint); margin-left: 5px; }
.pr-card .pr-split { font-family: var(--mono); color: #cde7f1; font-size: 12.5px; margin-top: 2px; }
.pr-card .pr-desc { color: var(--dim); font-size: 13px; line-height: 1.7; margin-top: 6px; }
.pr-card .pr-go { margin-top: 12px; font-size: 13px; color: var(--cyan); font-family: var(--mono); letter-spacing: 0.06em; }

/* 套餐规格：标签 → 包含项 → 补充说明，三层递减。
   价格卡（pr-card）与预约卡（bk-product）共用，避免两处各写一套。 */
.p-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p-chip {
  font-size: 11.5px; line-height: 1.5; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(126, 200, 227, 0.28); background: rgba(126, 200, 227, 0.08);
  color: #cde7f1; white-space: nowrap;
}
.p-includes { font-size: 11.5px; color: var(--faint); margin-top: 6px; line-height: 1.6; }
.p-note { font-size: 12.5px; color: var(--dim); margin-top: 6px; line-height: 1.6; }
.pr-empty { color: var(--faint); font-size: 13px; padding: 6px 0; }

/* ── 行程 ── */
.trip { padding: 22px 26px; margin: 40px 0; }
.trip h2 { font-size: 17px; margin-bottom: 14px; }
.trip h2::before { content: "▍"; color: var(--cyan); margin-right: 8px; }
.trip-list { display: flex; flex-wrap: wrap; gap: 12px; }
.trip-item { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 6px; font-size: 15px; font-weight: 600; font-family: var(--mono); border: 1px solid rgba(126,200,227,0.4); background: rgba(126,200,227,0.08); color: #cde7f1; }
.trip-del { border: none; background: none; color: var(--faint); font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1; transition: color 0.2s ease; }
.trip-del:hover { color: #ff6b7a; }
.trip-note { color: var(--dim); font-size: 14px; }
.trip-admin { margin-top: 16px; }
.trip-form { display: flex; gap: 10px; max-width: 520px; }
.trip-form input { flex: 1; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: rgba(126,200,227,0.04); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.trip-form input::placeholder { color: var(--faint); }
.trip-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(126,200,227,0.14); }
#trip-add { padding: 9px 20px; border-radius: 8px; border: 1px solid rgba(126,200,227,0.5); background: rgba(126,200,227,0.14); color: #cde7f1; font-size: 14px; font-weight: 600; font-family: var(--mono); cursor: pointer; white-space: nowrap; transition: box-shadow 0.2s ease; }
#trip-add:hover { box-shadow: 0 0 16px rgba(126,200,227,0.4); }

/* ── 预约 ── */
.booking { padding: 26px 26px; margin: 40px 0; }
.booking h2 { font-size: 17px; margin-bottom: 6px; }
.booking h2::before { content: "▍"; color: var(--cyan); margin-right: 8px; }
.booking .bk-sub { color: var(--dim); font-size: 13px; margin-bottom: 18px; line-height: 1.7; }
.bk-form { display: grid; gap: 12px; max-width: 560px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-form input, .bk-form textarea { padding: 11px 14px; border-radius: 8px; border: 1px solid var(--line); background: rgba(126,200,227,0.04); color: var(--text); outline: none; font-size: 14px; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.bk-form textarea { resize: vertical; min-height: 80px; }
.bk-form input::placeholder, .bk-form textarea::placeholder { color: var(--faint); }
.bk-form input:focus, .bk-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(126,200,227,0.14); }
.bk-login-tip { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; color: var(--dim); font-size: 13px; flex-wrap: wrap; }
.bk-list { margin-top: 20px; display: grid; gap: 10px; }
.bk-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: rgba(255,255,255,0.03); }
.bk-card .bk-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bk-card .bk-name { font-weight: 600; font-size: 15px; }
.bk-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid; font-family: var(--mono); }
.bk-badge.pending { color: #ffd166; border-color: rgba(255,209,102,0.5); }
.bk-badge.confirmed { color: var(--cyan); border-color: rgba(126,200,227,0.5); }
.bk-badge.done { color: #4cffb4; border-color: rgba(76,255,180,0.5); }
.bk-badge.cancelled { color: var(--faint); border-color: var(--line); }
.bk-card .bk-meta { color: var(--dim); font-size: 13px; line-height: 1.7; }
.bk-card .bk-note { color: var(--dim); font-size: 13px; margin-top: 6px; }
.bk-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* 动作参考图 */
.bk-refs { display: grid; gap: 10px; }
.bk-refs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bk-refs-title { font-size: 13.5px; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.bk-refs-title small { color: var(--faint); font-size: 12px; font-family: var(--mono); }
.bk-ref-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.bk-ref-list:empty { display: none; }
.bk-ref { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; background: rgba(255,255,255,0.03); cursor: zoom-in; transition: border-color 0.2s ease; }
.bk-ref:hover, .bk-ref:focus-visible { border-color: var(--line-bright); }
.bk-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-ref-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border-radius: 999px; border: 1px solid rgba(255,107,122,0.5); background: rgba(10,14,34,0.86); color: #ff6b7a; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; }
.bk-ref-del:hover { background: #ff6b7a; color: #0a0e22; border-color: #ff6b7a; }
.bk-refs-tip { margin: 0; color: var(--faint); font-size: 12px; line-height: 1.7; }

/* 查询码查询（游客） */
.bk-lookup { margin-top: 26px; border-top: 1px dashed var(--line); padding-top: 18px; }
.bk-lookup-head { margin-bottom: 12px; }
.bk-lookup-form { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-lookup-form input { flex: 1 1 160px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); background: rgba(126,200,227,0.04); color: var(--text); outline: none; font-size: 14px; font-family: var(--mono); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.bk-lookup-form input::placeholder { color: var(--faint); }
.bk-lookup-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(126,200,227,0.14); }

.bk-step { margin-bottom: 22px; }
.bk-step-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.bk-step-head small { color: var(--faint); font-weight: 400; font-size: 12.5px; margin-left: 4px; }
.bk-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  font-family: var(--mono); font-size: 13px; color: var(--cyan);
  border: 1px solid var(--line-bright); background: rgba(126,200,227,0.08);
}
.bk-date-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-date-tab {
  padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line); background: rgba(126,200,227,0.03);
  color: var(--dim); font-size: 14px; font-family: var(--mono); cursor: pointer; text-align: center;
  transition: all 0.2s ease; min-width: 96px;
}
.bk-date-tab .d1 { display: block; font-size: 14px; }
.bk-date-tab .d2 { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
.bk-date-tab:hover:not(.disabled) { color: var(--cyan); border-color: var(--line-bright); }
.bk-date-tab.active { color: var(--cyan); border-color: var(--line-bright); background: rgba(126,200,227,0.12); box-shadow: 0 0 14px rgba(126,200,227,0.25); }
.bk-date-tab.disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.bk-empty { color: var(--faint); font-size: 13px; padding: 8px 0; }

.bk-product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bk-product {
  padding: 16px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.03);
  cursor: pointer; transition: all 0.2s ease;
}
.bk-product:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.bk-product.active { border-color: var(--cyan); background: rgba(126,200,227,0.1); box-shadow: 0 0 16px rgba(126,200,227,0.2); }
.bk-product .p-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bk-product .p-name { font-size: 15px; font-weight: 600; }
.bk-product .p-price { font-family: var(--mono); color: var(--cyan); font-size: 16px; margin-top: 6px; }
.bk-product .p-deposit { font-family: var(--mono); color: #cde7f1; font-size: 12px; margin-top: 3px; }
.bk-product .p-desc { color: var(--dim); font-size: 12.5px; margin-top: 6px; line-height: 1.6; }
.bk-product.soldout { opacity: 0.42; cursor: not-allowed; }
.bk-product.soldout:hover { border-color: var(--line); transform: none; }
.bk-product .p-soldout { color: #ff9aa4; font-size: 12px; margin-top: 8px; }

.bk-slot-list {
  display: flex; gap: 8px; flex-wrap: wrap; max-height: 236px; overflow-y: auto; padding: 2px 6px 2px 2px;
}
.bk-slot-list::-webkit-scrollbar { width: 6px; }
.bk-slot-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.bk-slot-list::-webkit-scrollbar-thumb { background: rgba(126,200,227,0.28); border-radius: 3px; }
.bk-slot {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(126,200,227,0.04);
  color: var(--dim); font-size: 12.5px; font-family: var(--mono); cursor: pointer; transition: all 0.2s ease;
  white-space: nowrap;
}
.bk-slot:hover:not(.disabled) { color: #cde7f1; border-color: rgba(126,200,227,0.5); }
.bk-slot.active { color: #cde7f1; border-color: rgba(126,200,227,0.6); background: rgba(126,200,227,0.14); box-shadow: 0 0 14px rgba(126,200,227,0.25); }
/* 不可选的时间段（已约满 / 午休等硬禁区）灰掉，但仍然展示出来，
   顾客能看见「这个点为什么不能选」，而不是莫名其妙少一段 */
.bk-slot.disabled { cursor: not-allowed; border-style: dashed; background: transparent; }
.bk-slot.disabled:hover { border-color: var(--line); }
/* 只把「时间区间」压淡，整块不设 opacity —— 否则「已约满」也跟着糊掉看不清了 */
.bk-slot.disabled .s-t { color: var(--faint); }
.bk-slot .s-flag { margin-left: 6px; font-size: 11px; color: #ff8f9c; }
.bk-slot.blocked .s-flag { color: var(--dim); opacity: 0.7; }

.bk-success-card { text-align: center; padding: 30px 20px; border: 1px solid rgba(76,255,180,0.4); border-radius: 12px; background: rgba(76,255,180,0.06); }
.bk-success-title { font-size: 20px; font-weight: 700; color: #4cffb4; margin-bottom: 12px; }
.bk-success-meta { color: var(--dim); font-size: 14px; line-height: 1.8; margin-bottom: 20px; white-space: pre-line; }
.bk-success-pay {
  display: inline-block; margin: -8px 0 20px; padding: 10px 18px; border-radius: 8px;
  border: 1px solid rgba(126,200,227,0.35); background: rgba(126,200,227,0.08);
  color: #cde7f1; font-family: var(--mono); font-size: 13px; line-height: 1.8;
}
.bk-pay {
  padding: 11px 14px; border-radius: 8px; border: 1px solid rgba(126,200,227,0.3);
  background: rgba(126,200,227,0.06); color: #cde7f1;
  font-family: var(--mono); font-size: 13px; line-height: 1.8;
}
.pm-preview {
  padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--line);
  color: var(--faint); font-family: var(--mono); font-size: 12px; line-height: 1.7;
}
.pm-preview b { color: #cde7f1; font-weight: 600; }

/* 后台套餐表单：修图档位分段按钮 / 包含项勾选行 */
.pm-seg {
  display: flex; gap: 4px; padding: 4px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(126, 200, 227, 0.04);
}
.pm-seg button {
  flex: 1; min-width: 0; padding: 6px 4px; border: 0; border-radius: 6px;
  background: transparent; color: var(--dim); font-size: 13px; font-family: inherit;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.pm-seg button:hover { color: #cde7f1; }
.pm-seg button.is-active { background: rgba(126, 200, 227, 0.16); color: #cde7f1; }
.pm-inc-row { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 2px; }
.pm-inc-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); cursor: pointer; }
.pm-inc-row input[type="checkbox"] {
  width: 15px; height: 15px; padding: 0; border: 0; background: none; box-shadow: none;
  accent-color: #7ec8e3; cursor: pointer; flex: none;
}

/* 收款码（定金支付） */
.pay-block { display: grid; gap: 12px; justify-items: center; margin: 2px 0 22px; }
.pay-amount { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.pay-amount b { font-size: 26px; color: #4cffb4; margin-left: 6px; text-shadow: 0 0 14px rgba(76,255,180,0.4); }
.pay-qrs { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.pay-qr { display: grid; gap: 7px; justify-items: center; }
/* 收款码：列表里只做「能认出是哪个码」的缩略图，扫码请点开看原图。
   白边（静默区）保留，但不再撑到 300px，避免两张码把页面拉得很长。 */
.pay-qr img {
  width: 200px; aspect-ratio: 1 / 1; height: auto;
  object-fit: contain; padding: 14px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line); cursor: zoom-in;
}
/* 平台名做胶囊，和套餐卡片的标签同一套语言；「点击可放大」才是辅助说明 */
.pay-qr .pay-name {
  font-family: inherit; font-size: 13px; line-height: 1.5; letter-spacing: 0.02em;
  padding: 3px 14px; border-radius: 999px; color: #cde7f1;
  border: 1px solid rgba(126, 200, 227, 0.3); background: rgba(126, 200, 227, 0.09);
  cursor: zoom-in; transition: border-color 0.2s ease, background 0.2s ease;
}
.pay-qr .pay-name:hover { border-color: var(--line-bright); background: rgba(126, 200, 227, 0.16); }
.pay-qr .pay-zoom { font-size: 12px; color: var(--faint); font-family: var(--mono); }
/* 收款码扫不出来时的兜底通道：直接加好友转账，别把支付路径堵死 */
.pay-fallback { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 12px; color: var(--faint); font-size: 12.5px; }
.pay-copy {
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--line-bright);
  background: rgba(126,200,227,0.08); color: var(--cyan);
  font-family: var(--mono); font-size: 12px; cursor: pointer; transition: all 0.2s ease;
}
.pay-copy:hover { background: rgba(126,200,227,0.16); }

/* 保存收款码：按钮 + 选择面板（移动端贴底，桌面居中） */
.pay-save-row { display: flex; justify-content: center; margin-top: 14px; }
.pay-save-btn {
  padding: 8px 18px; border-radius: 8px; border: 1px solid var(--line-bright);
  background: rgba(126, 200, 227, 0.08); color: var(--cyan);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pay-save-btn:hover { background: rgba(126, 200, 227, 0.16); }

.save-sheet {
  position: fixed; inset: 0; z-index: 320; display: flex; align-items: flex-end;
  justify-content: center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 3, 10, 0.74);
}
@media (min-width: 641px) { .save-sheet { align-items: center; } }
.save-sheet-panel {
  width: 100%; max-width: 380px; display: grid; gap: 8px;
  padding: 14px; border-radius: 14px; border: 1px solid var(--line);
  background: #121216; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.save-sheet-title { text-align: center; font-size: 12.5px; color: var(--dim); padding: 2px 0 6px; line-height: 1.6; }
.save-sheet-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03); color: var(--text);
  font-size: 14px; font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.save-sheet-opt:hover { border-color: var(--line-bright); background: rgba(126, 200, 227, 0.08); }
.save-sheet-opt small { color: var(--faint); font-size: 12px; }
.save-sheet-cancel {
  margin-top: 2px; padding: 11px; border: 0; border-radius: 8px;
  background: transparent; color: var(--dim); font-size: 13px;
  font-family: inherit; cursor: pointer;
}
.save-sheet-cancel:hover { color: var(--text); }
.pay-tip { color: var(--faint); font-size: 12px; line-height: 1.8; text-align: center; }
.pay-tip.warn { color: #cde7f1; }
.pay-note { color: var(--dim); font-size: 12.5px; line-height: 1.8; text-align: center; }
.pay-slot { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.pay-slot img { width: 54px; height: 54px; flex: none; object-fit: contain; padding: 3px; border-radius: 6px; background: #fff; }
/* 缩略图右侧分成「名称 / 操作」两行：名称允许换行，操作按钮换行而不被压缩 */
.pay-slot .pay-slot-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 8px; }
.pay-slot .pay-slot-name { min-width: 0; font-size: 13px; color: var(--dim); line-height: 1.5; overflow-wrap: anywhere; }
.pay-slot .pay-slot-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-slot button { flex: none; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); color: var(--dim); font-size: 12px; font-family: var(--mono); cursor: pointer; transition: all 0.2s ease; }
.pay-slot button:hover:not(:disabled) { color: var(--cyan); border-color: var(--line-bright); }
.pay-slot button.pay-del:hover:not(:disabled) { color: #ff6b7a; border-color: rgba(255,107,122,0.5); }

/* ── 管理后台 ── */
.bk-manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; margin-top: 8px; }
.bk-manage-col { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: rgba(255,255,255,0.02); }
.bk-manage-tip { color: var(--faint); font-size: 12px; line-height: 1.7; margin: -4px 0 12px; }
/* minmax(0,1fr)：列宽永远不超过所在栏，不会被某个宽子元素（如收款码槽位）反向撑开 */
.bk-manage-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.bk-manage-form input, .bk-manage-form select { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(126,200,227,0.04); color: var(--text); outline: none; font-size: 13px; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; transition: border-color 0.2s ease, box-shadow 0.2s ease; color-scheme: dark; }
.bk-manage-form input::placeholder { color: var(--faint); }
.bk-manage-form input:focus, .bk-manage-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(126,200,227,0.14); }
.bk-manage-form select:invalid { color: var(--faint); }
.bk-manage-list { display: grid; gap: 8px; min-width: 0; }
/* 管理列表行：第一行「名称 + 操作按钮」，第二行信息（价格/时长/事由）单独占满宽度。
   注意：信息文字不能加 white-space:nowrap —— 那样整行的最小宽度会被文字顶大，
   行就会比所在栏还宽，把「改 / ×」按钮挤出面板。 */
.bk-manage-row { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-size: 13px; }
.bk-manage-row .m-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bk-manage-row .m-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-manage-row .m-actions { flex: none; display: flex; align-items: center; gap: 2px; }
.bk-manage-row .m-sub { min-width: 0; color: var(--faint); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.bk-manage-row button { flex: none; border: none; background: none; color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 6px; transition: color 0.2s ease; }
.bk-manage-row button:hover { color: #ff6b7a; }
.bk-manage-row button.m-edit { font-size: 12px; color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }
.bk-manage-row button.m-edit:hover { color: var(--cyan); border-color: var(--line-bright); }
.bk-manage-empty { color: var(--faint); font-size: 12.5px; padding: 4px 0; }

/* ── toast / 页脚 ── */
.toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 400; background: rgba(10,14,34,0.97); border: 1px solid var(--line-bright); color: var(--cyan); padding: 10px 22px; border-radius: 8px; font-size: 13px; font-family: var(--mono); box-shadow: 0 0 20px rgba(126,200,227,0.25); transition: opacity 0.25s ease; }

footer { text-align: center; color: var(--faint); font-size: 12.5px; padding: 24px 0 8px; font-family: var(--mono); letter-spacing: 0.5px; }

/* ── 响应式 ── */
@media (max-width: 860px) {
  .works-grid { gap: 10px; }
}
@media (max-width: 640px) {
  header { flex-direction: column; gap: 12px; }
  .hero-cta a { padding: 10px 20px; font-size: 14px; }
  .works-view { display: inline-block; }
  .work-item { border-radius: 8px; }
  nav { gap: 12px; flex-wrap: wrap; justify-content: center; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
  .pricing { padding: 22px 18px; margin: 32px 0; }
  .pr-grid { grid-template-columns: 1fr; }
  .pay-qr img { width: min(36vw, 160px); padding: 10px; }
  .pay-qrs { gap: 14px 12px; }
  .pay-qr { gap: 5px; }
  .pay-qr .pay-name { font-size: 12.5px; padding: 3px 12px; }
  .pay-qr .pay-zoom { font-size: 12px; }
  .hero h1 { font-size: clamp(34px, 12vw, 52px); }
  .bk-row { grid-template-columns: 1fr; }
  .bk-manage-grid { grid-template-columns: 1fr; }
  .booking { padding: 22px 18px; }
  .trip { padding: 20px 18px; }
}

/* ═══════════════ 管理后台（admin.html） ═══════════════ */
.admin-page .wrap { max-width: 860px; }
.adm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.adm-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-who {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.adm-link { color: var(--dim); font-size: 13px; text-decoration: none; transition: color 0.2s ease; }
.adm-link:hover { color: var(--cyan); }

/* 未登录 / 非管理员门禁 */
.admin-gate { display: flex; align-items: center; justify-content: center; padding: 54px 20px; }
.admin-gate-card {
  max-width: 420px; width: 100%; text-align: center; padding: 34px 26px;
  border-radius: 16px; border: 1px solid var(--line); background: rgba(18, 18, 22, 0.85);
}
.admin-gate-title { font-family: var(--mono); font-size: 17px; letter-spacing: 0.14em; color: var(--cyan); margin-bottom: 10px; }
.admin-gate-text { color: var(--dim); font-size: 13px; line-height: 1.8; margin-bottom: 20px; }
.admin-gate .sso-submit { max-width: 200px; margin: 0 auto; }

.adm-sec { padding: 20px 20px 22px; margin-bottom: 18px; }
.adm-foot { text-align: center; color: var(--faint); font-size: 12px; padding: 4px 0 12px; }

/* 作品管理卡片 */
.aw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-top: 14px; }
.aw-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
}
.aw-card > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: rgba(126, 200, 227, 0.04); }
.aw-meta { padding: 8px 10px 2px; min-width: 0; }
.aw-cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--cyan); }
.aw-char { font-size: 12px; color: var(--text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-ops { display: flex; gap: 6px; padding: 8px 10px 10px; }
.aw-btn {
  flex: 1; padding: 5px 0; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: var(--dim); font-size: 12px; font-family: inherit;
  cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
}
.aw-btn:hover { color: var(--cyan); border-color: var(--line-bright); }
.aw-btn.aw-del:hover { color: #ff6b7a; border-color: rgba(255, 107, 122, 0.5); }

/* 顾客页页脚的管理入口 */
.site-admin { text-align: center; padding: 0 0 30px; }
.site-admin a {
  color: var(--faint); font-size: 12px; font-family: var(--mono); letter-spacing: 0.08em;
  text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.14); padding-bottom: 2px;
  transition: color 0.2s ease;
}
.site-admin a:hover { color: var(--cyan); }

@media (max-width: 640px) {
  .adm-head { padding: 14px 16px; }
  .adm-sec { padding: 16px 14px 18px; }
  .aw-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   管理后台 · 手机端竖屏形态（<768px）
   桌面端保持不变：默认全部隐藏，只在窄屏 + 已登录时接管
   ═══════════════════════════════════════════════════════════════ */
.m-top, .m-tabs, .m-view { display: none; }

@media (max-width: 767px) {
  body.admin-page .wrap {
    max-width: 100%;
    padding: 0 14px calc(84px + env(safe-area-inset-bottom));
  }
  .admin-page .adm-head { display: none; }
  .admin-page #site-footer { display: none; }
  .admin-page .adm-foot { display: none; }

  /* ── 顶栏 ── */
  body.m-is-admin .m-top {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 40;
    margin: 0 -14px; padding: 10px 14px 9px;
    background: rgba(10, 10, 12, 0.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .m-brand { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .m-brand-name { font-size: 13px; color: var(--text); letter-spacing: 0.02em; }
  .m-brand-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--cyan); margin-top: 1px; }
  .m-back {
    width: 34px; height: 34px; flex: none; border-radius: 9px;
    border: 1px solid var(--line); background: transparent; color: var(--cyan);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0 0 3px;
  }
  .m-back:active { background: rgba(126, 200, 227, 0.12); }
  .m-sub-title { flex: 1; min-width: 0; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-who {
    margin-left: auto; flex: none;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--dim);
    border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
  }

  /* ── 视图切换 ── */
  #admin-content > .m-view { display: none; }
  #admin-content > .m-view.is-active { display: block; }
  #admin-content > .adm-sec { display: none; }
  #admin-content > .adm-sec.is-m-sub { display: block; }
  body.m-is-admin.m-sub .m-tabs { display: none; }

  .m-hero { padding: 12px 0 2px; }
  .m-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .m-title { font-size: 21px; font-weight: 500; color: var(--text); letter-spacing: 0.02em; }
  .m-sub { font-size: 11.5px; color: var(--dim); margin-top: 4px; }

  /* ── 今日统计 ── */
  .m-stats { display: flex; gap: 7px; margin-top: 13px; }
  .m-stat { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.045); border-radius: 10px; padding: 9px 9px 8px; }
  .m-stat-k { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
  .m-stat-v { font-family: var(--mono); font-size: 19px; color: var(--text); margin-top: 3px; }
  .m-stat-v.warn { color: #e8b877; }

  .m-sec-head { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 2px; }
  .m-sec-head > span:first-child { font-size: 12px; color: var(--dim); letter-spacing: 0.04em; }
  .m-sec-head > span:last-child { font-size: 10.5px; color: #5a5a63; }

  /* ── 时间轴 ── */
  .m-timeline { display: block; }
  .m-tl-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .m-tl-row:last-child { border-bottom: none; }
  .m-tl-time { width: 42px; flex: none; font-family: var(--mono); font-size: 12px; color: var(--cyan); }
  .m-tl-body { flex: 1; min-width: 0; }
  .m-tl-main { font-size: 12.5px; color: var(--text); }
  .m-tl-sub { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
  .m-tl-body.warn .m-tl-sub { color: #e8b877; }
  .m-pill { flex: none; font-size: 10.5px; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
  .m-pill.confirmed { color: var(--cyan); border: 1px solid rgba(126, 200, 227, 0.4); }
  .m-pill.pending { color: #e8b877; border: 1px solid rgba(232, 184, 119, 0.4); }
  .m-pill.done { color: #6b6b76; border: 1px solid var(--line); }
  .m-tl-free { display: flex; gap: 10px; align-items: center; padding: 10px 0; }
  .m-tl-free .m-tl-time { color: #5a5a63; }
  .m-tl-free .m-tl-main { font-size: 11.5px; color: #5a5a63; }

  /* ── 空状态 ── */
  .m-empty { text-align: center; padding: 30px 16px; }
  .m-empty-t { font-size: 13px; color: var(--dim); }
  .m-empty-s { font-size: 11.5px; color: var(--faint); margin-top: 6px; line-height: 1.7; }
  .m-empty-btn {
    margin-top: 14px; padding: 9px 18px; border-radius: 9px; font-family: inherit; font-size: 12.5px;
    border: 1px solid rgba(126, 200, 227, 0.42); background: transparent; color: var(--cyan); cursor: pointer;
  }
  .m-empty-btn:active { background: rgba(126, 200, 227, 0.12); }

  /* ── 预约筛选 + 卡片 ── */
  .m-chips { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
  .m-chip {
    flex: none; padding: 5px 11px; border-radius: 999px; font-family: inherit; font-size: 11.5px;
    border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer;
  }
  .m-chip.active { background: var(--cyan); border-color: var(--cyan); color: #0a0a0c; }
  .m-cards { display: grid; gap: 9px; margin-top: 12px; }
  .m-card { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); padding: 11px 12px; }
  .m-card.todo { border-color: rgba(232, 184, 119, 0.34); }
  .m-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .m-card-name { font-size: 13px; font-weight: 500; color: var(--text); }
  .m-card-time { font-family: var(--mono); font-size: 11.5px; color: var(--cyan); flex: none; }
  .m-card-meta { font-size: 11px; color: var(--dim); margin-top: 3px; line-height: 1.6; overflow-wrap: anywhere; }
  .m-card-note { font-size: 11px; color: var(--faint); margin-top: 4px; line-height: 1.6; overflow-wrap: anywhere; }
  .m-card-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .m-card-refs img { width: 56px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
  .m-card-refs img:hover, .m-card-refs img:focus-visible { border-color: var(--line-bright); }
  .m-card-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
  .m-card-ops.one { grid-template-columns: 1fr; }
  .m-op {
    padding: 8px 0; border-radius: 7px; font-family: inherit; font-size: 11.5px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: var(--dim);
  }
  .m-op.primary { background: var(--cyan); border-color: var(--cyan); color: #0a0a0c; }
  .m-op.danger { color: #e8909a; border-color: rgba(232, 144, 154, 0.3); }
  .m-op:active { opacity: 0.8; }

  /* ── 档期月历 ── */
  .m-cal-nav { display: flex; align-items: center; gap: 8px; }
  .m-cal-nav-btn {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line);
    background: transparent; color: var(--dim); font-size: 13px; line-height: 1; cursor: pointer; padding: 0 0 2px;
  }
  .m-cal-label { font-family: var(--mono); font-size: 12px; color: var(--text); min-width: 62px; text-align: center; }
  .m-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 12px; }
  .m-cal-week span { text-align: center; font-size: 10.5px; color: #5a5a63; }
  .m-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 6px; }
  .m-cal-cell {
    height: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-family: var(--mono); font-size: 12.5px; color: #6b6b76;
    border: 1px solid transparent; background: transparent; font-weight: 400;
  }
  .m-cal-cell.blank { visibility: hidden; }
  .m-cal-cell.open { color: var(--dim); border-color: rgba(126, 200, 227, 0.28); cursor: pointer; }
  .m-cal-cell.busy { color: var(--cyan); background: rgba(126, 200, 227, 0.13); border-color: rgba(126, 200, 227, 0.3); cursor: pointer; }
  .m-cal-cell.sel { background: var(--cyan); border-color: var(--cyan); color: #0a0a0c; }
  .m-legend { display: flex; align-items: center; gap: 6px; margin-top: 11px; font-size: 10.5px; color: var(--faint); flex-wrap: wrap; }
  .m-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
  .m-legend i + i { margin-left: 6px; }
  .m-legend .lg-open { border: 1px solid rgba(126, 200, 227, 0.4); }
  .m-legend .lg-busy { background: rgba(126, 200, 227, 0.35); }
  .m-legend .lg-off { background: #1c1c20; }

  .m-day-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .m-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .m-day-head > span:first-child { font-size: 12.5px; color: var(--text); }
  .m-day-range { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }
  .m-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
  .m-slot {
    display: flex; justify-content: space-between; align-items: center; gap: 6px;
    padding: 8px 9px; border-radius: 7px; border: 1px solid var(--line);
    font-family: var(--mono); font-size: 11.5px; color: var(--dim);
  }
  .m-slot.on { border-color: rgba(126, 200, 227, 0.42); color: var(--cyan); }
  .m-slot.off { border-style: dashed; color: #6e6e79; }
  .m-slot em { font-style: normal; font-size: 10px; }
  .m-day-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
  .m-op-btn {
    padding: 9px 0; border-radius: 8px; font-family: inherit; font-size: 11.5px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: var(--dim);
  }
  .m-op-btn.danger { color: #e8909a; border-color: rgba(232, 144, 154, 0.32); }
  .m-op-btn:disabled { opacity: 0.4; cursor: default; }

  /* ── 更多菜单 ── */
  .m-group-label { font-size: 10.5px; color: #5a5a63; letter-spacing: 0.06em; padding: 16px 0 6px; }
  .m-menu { display: grid; gap: 2px; }
  .m-row {
    display: grid; grid-template-columns: 1fr auto auto;
    grid-template-areas: "t n go" "d n go";
    align-items: center; gap: 0 8px;
    width: 100%; text-align: left; padding: 11px 0;
    border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent; color: inherit; font-family: inherit; cursor: pointer;
  }
  .m-row:last-child { border-bottom: none; }
  .m-row-t { grid-area: t; font-size: 12.5px; color: var(--text); }
  .m-row-d { grid-area: d; font-size: 10.5px; color: var(--faint); margin-top: 1px; }
  .m-row-n { grid-area: n; font-family: var(--mono); font-size: 10.5px; color: #5a5a63; }
  .m-row-go { grid-area: go; font-size: 13px; color: #4f4f58; }
  .m-row:active { background: rgba(255, 255, 255, 0.03); }

  /* 更多页：内容不足一屏时，页脚贴到内容区底部，距底部导航留 60px 呼吸 */
  #admin-content > #m-more.is-active {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 138px);
    min-height: calc(100dvh - 138px);
  }
  .m-more-foot { margin-top: auto; padding-top: 22px; padding-bottom: 25px; }
  .m-site-link { display: block; text-align: center; font-size: 12px; color: var(--dim); text-decoration: none; padding: 10px 0; }
  .m-logout {
    width: 100%; margin-top: 10px; padding: 11px 0; border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1); background: transparent;
    color: var(--dim); font-family: inherit; font-size: 12px; cursor: pointer;
  }
  .m-logout:active { background: rgba(255, 255, 255, 0.04); }

  /* ── 底部导航 ── */
  body.m-is-admin .m-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(12, 12, 16, 0.96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 6px 0 calc(7px + env(safe-area-inset-bottom));
  }
  .m-tab {
    flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: none; background: none; color: #5a5a63; font-family: inherit; font-size: 10.5px;
    padding: 4px 0 2px; cursor: pointer; min-height: 42px;
  }
  .m-tab.active { color: var(--cyan); }
  .m-tab-dot { position: absolute; top: 3px; left: calc(50% + 7px); width: 6px; height: 6px; border-radius: 50%; background: #e8b877; }

  /* ── 子页（原桌面区块在手机上的形态） ── */
  .adm-sec.is-m-sub { padding: 14px; }
  .adm-sec.is-m-sub .bk-step-head { display: none; }
  .adm-sec.is-m-sub .bk-manage-tip { font-size: 12px; }
  .adm-sec.is-m-sub .bk-manage-form input,
  .adm-sec.is-m-sub .bk-manage-form select { min-height: 44px; font-size: 14px; }
  .adm-sec.is-m-sub .bk-manage-form .sso-submit { width: 100%; min-height: 44px; }
  .adm-sec.is-m-sub .bk-manage-form .sel-dark-btn { min-height: 44px; font-size: 14px; }
  .adm-sec.is-m-sub .bk-manage-row { padding: 11px 12px; }
  .adm-sec.is-m-sub .bk-manage-row button { min-height: 30px; }
  .adm-sec.is-m-sub .works-edit-form { width: 100%; }
  .adm-sec.is-m-sub .aw-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 9px; }
}

@media (max-width: 767px) {
  /* 提示条要浮在底部导航之上，否则会盖住 Tab 文字 */
  body.admin-page .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ── 登录弹层：手机端排版（窄屏留白收紧、控件加高到好点的高度） ── */
@media (max-width: 767px) {
  .sso-modal-backdrop { padding: 14px; }
  .sso-modal { padding: 26px 20px 22px; border-radius: 14px; }
  .sso-modal h3 { font-size: 17px; }
  .sso-hint { font-size: 12px; margin-bottom: 14px; }
  .sso-close { width: 34px; height: 34px; top: 10px; right: 10px; font-size: 15px; }

  .sso-tabs { gap: 8px; margin-bottom: 14px; }
  .sso-tab { min-height: 40px; font-size: 13.5px; }

  .sso-form { gap: 10px; }
  .sso-form input { min-height: 46px; padding: 10px 13px; font-size: 16px; }
  .sso-code-row button { min-height: 46px; padding: 0 12px; font-size: 13px; }
  .sso-submit { min-height: 48px; font-size: 15px; }
  .sso-status { font-size: 12.5px; }
}

/* ── 时间段按钮显示「开始-结束」后变宽，手机端收紧内边距，一行仍能放下 3 个 ── */
@media (max-width: 767px) {
  .bk-slot-list { gap: 7px; }
  .bk-slot { padding: 7px 10px; font-size: 12px; }

  /* 步骤标题 + 后面的说明文字在窄屏挤成两行，改成「标题一行、说明另起一行并缩进对齐」 */
  .bk-step-head { flex-wrap: wrap; row-gap: 3px; }
  .bk-step-head small { flex: 0 0 100%; margin-left: 0; padding-left: 32px; }

  /* 同上：查询区标题也带一句长说明，放不下时整体换行而不是把标题挤断 */
  .bk-refs-title { flex-wrap: wrap; row-gap: 2px; }
  .bk-refs-title small { flex: 0 0 100%; }
}

/* ══ 无障碍 ══
   ① 键盘焦点必须看得见：默认 outline 在暗色背景上几乎不可见
   ② 系统开了「减少动态效果」就把动效归零，前庭敏感的人不头晕
   输入框自带的「青色边框 + 外发光」已经是明确聚焦态，不再叠一层外框 */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}