/* ============================================================
   看看 TA —— 黑白毛玻璃（与 API 设置同一套材质语言）
   · 容器 = 半透明白 + backdrop-filter，靠壁纸透过来产生层次
   · 边缘 = 低对比度高光，不画硬描边
   · 控件 = 胶囊 / 大圆角 / 柔和大扩散阴影
   · 重要按钮 = 纯黑 + 4px 台阶像素切角，是画面里唯一的高对比块
   ============================================================ */

:root {
  --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-top-fallback, 0px));
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  --ink: #17171a;
  --ink-2: rgb(23 23 26 / 62%);
  --ink-3: rgb(23 23 26 / 42%);
  --ink-4: rgb(23 23 26 / 26%);

  --glass: rgb(255 255 255 / 26%);
  --glass-blur: saturate(180%) brightness(1.32) blur(34px);
  --glass-strong: rgb(255 255 255 / 62%);
  --glass-sunken: rgb(255 255 255 / 26%);
  --glass-ctrl-blur: saturate(150%) brightness(1.1) blur(14px);

  --edge: inset 0 0 0 1px rgb(255 255 255 / 42%), inset 0 1px 0 0 rgb(255 255 255 / 72%), inset 0 0 0 1.5px rgb(23 23 26 / 5%);
  --lift: 0 1px 2px rgb(23 23 26 / 4%), 0 8px 20px -8px rgb(23 23 26 / 12%);
  --lift-lg: 0 2px 4px rgb(23 23 26 / 4%), 0 18px 40px -14px rgb(23 23 26 / 16%);

  --r-card: 28px;
  --r-sub: 22px;
  --r-pill: 999px;

  --pixel-cut: polygon(
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
  );
  --pixel-cut-sm: polygon(
    0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px)
  );
  --pixel-scan: repeating-linear-gradient(0deg, transparent 0 2px, rgb(255 255 255 / 5%) 2px 3px);

  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: #ececed; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* 玻璃需要壁纸做折射底：同 API 那张默认背景 */
.ta-phone {
  position: relative;
  width: min(100vw, calc(100vh * 393 / 852), 393px);
  aspect-ratio: 393 / 852;
  overflow: hidden;
  background-color: #e9e9eb;
  background-image: var(--page-wallpaper, url("参考图/默认背景图背景图.jpg"));
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 70px rgb(23 23 26 / 12%);
}

/* 两个主视图都从壁纸上滚过去，自身不铺实色 */
.contact-view, .map-view { position: absolute; inset: 0; overflow-y: auto; background: transparent; scrollbar-width: none; }
.contact-view::-webkit-scrollbar, .map-view::-webkit-scrollbar { display: none; }

/* ---------- 顶栏：毛玻璃 + 底边 mask 渐隐 ---------- */
.ta-toolbar, .map-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  height: calc(64px + var(--safe-top));
  padding: var(--safe-top) 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgb(255 255 255 / 60%), rgb(255 255 255 / 22%));
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
}
.ta-toolbar { justify-content: center; }
.ta-toolbar h1, .map-toolbar h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.ta-toolbar a, .map-toolbar > button {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift);
  font: 300 26px/1 Arial, sans-serif;
  cursor: pointer;
}
.ta-toolbar a:active, .map-toolbar > button:active { background: var(--glass); }
.ta-toolbar { justify-content: center; position: relative; }
.ta-toolbar a { position: absolute; left: 16px; top: calc(var(--safe-top) + 14px); }
.ta-toolbar > span { display: none; }

.map-toolbar { justify-content: flex-start; }
.map-toolbar > div { flex: 1; min-width: 0; }
.map-toolbar p { margin: 3px 0 0; color: var(--ink-2); font-size: 12px; display: flex; align-items: center; }
.map-avatar { width: 38px; height: 38px; }
.menu-button {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift);
  font-size: 17px;
  cursor: pointer;
}
.menu-button:active { background: var(--glass); }

/* 首屏说明：一小片胶囊玻璃垫在壁纸上 */
.ta-intro {
  display: inline-block;
  margin: 4px 20px 16px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 13px;
  background: rgb(255 255 255 / 52%);
  -webkit-backdrop-filter: saturate(150%) brightness(1.1) blur(12px);
  backdrop-filter: saturate(150%) brightness(1.1) blur(12px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%);
}

/* ---------- 联系人网格 ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 12px; padding: 4px 20px 40px; }
.contact-card { border: 0; background: none; cursor: pointer; text-align: center; }
.contact-avatar, .map-avatar, .privacy-avatar, .person-pin span, .scene-avatar {
  display: grid; place-items: center; overflow: hidden;
  border-radius: 50%;
  color: var(--ink);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-ctrl-blur);
  backdrop-filter: var(--glass-ctrl-blur);
  font-size: 28px; font-weight: 700;
}
.contact-avatar { width: 76px; height: 76px; margin: auto; box-shadow: var(--edge), var(--lift); }
.contact-avatar img, .map-avatar img, .privacy-avatar img, .person-pin span img, .scene-avatar img { width: 100%; height: 100%; object-fit: cover; }
.contact-card strong { display: block; margin-top: 9px; font-size: 13px; font-weight: 600; color: var(--ink); }
.status-dot { display: inline-block; vertical-align: middle; margin-left: 5px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.status-dot.status-idle { background: #34c759; }
.status-dot.status-busy { background: #ff9500; }
.status-dot.status-dnd { background: #3478f6; }
.map-toolbar .status-dot { margin: 0 6px 0 0; }
.empty-state { text-align: center; color: var(--ink-2); margin-top: 80px; }

/* ---------- 搜索胶囊 ---------- */
.ta-search {
  margin: 4px 16px 14px;
  padding: 0 16px;
  min-height: 44px;
  display: flex; align-items: center; gap: 9px;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-ctrl-blur);
  backdrop-filter: var(--glass-ctrl-blur);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
}
.ta-search-icon { color: var(--ink-3); font-size: 15px; }
.ta-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font-size: 15px; }
.ta-search input::placeholder { color: var(--ink-4); }

/* ---------- 假地图：单色重绘 ---------- */
.map-canvas {
  position: relative;
  height: 300px;
  margin: 0 16px 14px;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--glass-sunken);
  touch-action: none;
  box-shadow: var(--edge), var(--lift);
}
.map-canvas.placing { cursor: crosshair; }
.map-canvas.map-expanded {
  position: fixed;
  inset: 0;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  z-index: 50;
}
.map-canvas-inner {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
  background-image: url('assets/ta/base-map.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--glass-sunken);
}
.map-canvas-inner.snap { transition: transform .25s ease; }
.map-block, .map-road, .map-label { display: none; }
.route-dot { position: absolute; z-index: 2; top: 206px; left: 51%; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 2px 9px rgb(23 23 26 / 30%); }
.geo-label { position: absolute; z-index: 1; color: var(--ink-2); font-size: 12px; transform: translate(-50%, -50%); background: rgb(255 255 255 / 55%); padding: 1px 6px; border-radius: 999px; white-space: nowrap; touch-action: none; }
.map-canvas.placing .geo-label { cursor: grab; box-shadow: 0 0 0 1px rgb(23 23 26 / 30%); }
.geo-label.dragging { z-index: 4; cursor: grabbing; background: rgb(255 255 255 / 90%); }
.person-pin { position: absolute; z-index: 3; top: 95px; left: 48%; display: grid; justify-items: center; transform: translate(-50%, -50%); transition: left .4s ease, top .4s ease; }
.person-pin span { width: 48px; height: 48px; border: 3px solid #fff; outline: 2px solid var(--ink); box-shadow: 0 4px 10px rgb(23 23 26 / 30%); }
.person-pin i { width: 0; height: 0; border: 8px solid transparent; border-top: 11px solid var(--ink); }

.map-tools { display: flex; gap: 8px; margin: 0 16px 10px; }
.map-tool-btn {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.map-tool-btn:active { background: var(--glass); }
.map-tool-btn.active { background: var(--ink); color: #fff; }
#map-expand-toggle { width: 34px; padding: 0; font-size: 15px; }
.map-expand-floating { position: absolute; z-index: 6; top: 10px; right: 10px; }
.map-canvas.map-expanded .map-expand-floating { top: calc(10px + var(--safe-top)); }

/* ---------- 左右滑动：日程时间轴（让用户看到每天不一样的生成结果） ---------- */
.map-pager { display: flex; justify-content: center; gap: 6px; margin: 0 0 10px; }
.map-pager-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(23 23 26 / 18%); transition: background .2s ease; }
.map-pager-dot.active { background: var(--ink); }
.map-swipe { overflow: hidden; touch-action: pan-y; }
.map-swipe-track { display: flex; transition: transform .32s cubic-bezier(.22, .61, .36, 1); }
.map-swipe-track.dragging { transition: none; }
.map-panel { flex: 0 0 100%; min-width: 100%; }
.itinerary-panel { margin: 0 16px 14px; }
.itinerary-panel-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.itinerary-panel-head .itinerary-title { margin: 0; }
.itinerary-regenerate { border: 0; padding: 5px 11px; border-radius: 999px; background: var(--glass-strong); box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%); color: var(--ink-2); font-size: 11px; cursor: pointer; }
.itinerary-regenerate:disabled { opacity: .6; }
.itinerary-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
.itinerary-timeline { position: relative; padding-left: 18px; }
.itinerary-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: rgb(23 23 26 / 14%); }
.itinerary-item { position: relative; display: flex; gap: 10px; margin-bottom: 14px; }
.itinerary-time { position: relative; flex: 0 0 44px; font-size: 12px; color: var(--ink-3); padding-top: 2px; }
.itinerary-dot { position: absolute; left: -18px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--bg, #fff); }
.itinerary-card { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-card); background: var(--glass-sunken); box-shadow: var(--edge); }
.itinerary-card-head strong { font-size: 14px; color: var(--ink); }
.itinerary-meta { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.itinerary-jump { color: #3478f6; text-decoration: none; }
.itinerary-tip { margin: 6px 0 0; padding: 6px 9px; border-radius: 10px; background: rgb(23 23 26 / 6%); font-size: 12px; color: var(--ink-2); }
.itinerary-tip b { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; vertical-align: 1px; }

/* ---------- 三个操作：像素黑按钮一字排开（排版更新的核心） ---------- */
.ta-actions { margin: 0 16px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ta-action {
  display: grid; justify-items: center; gap: 8px;
  padding: 15px 6px 13px;
  border: 0;
  color: #fff;
  background: var(--ink);
  background-image: var(--pixel-scan);
  clip-path: var(--pixel-cut);
  filter: drop-shadow(4px 4px 0 rgb(23 23 26 / 22%)) drop-shadow(0 8px 18px rgb(23 23 26 / 18%));
  cursor: pointer;
  transition: transform .1s ease, filter .1s ease;
}
.ta-action:active { transform: translate(4px, 4px); filter: drop-shadow(0 0 0 transparent) drop-shadow(0 2px 6px rgb(23 23 26 / 20%)); }
.ta-action-icon { width: 30px; height: 30px; display: grid; place-items: center; }
.ta-action-icon img { width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
.ta-action strong { font-size: 12px; font-weight: 600; letter-spacing: .5px; }

/* ---------- 位置卡 / 收藏 / 动态：外层玻璃卡 ---------- */
.location-card {
  margin: 0 16px 14px;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 13px;
  border-radius: var(--r-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift-lg);
}
.home-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; color: var(--ink); background: rgb(23 23 26 / 8%); font-size: 22px; }
.location-card strong { font-size: 15px; font-weight: 600; }
.location-card p { margin: 3px 0 0; color: var(--ink-2); font-size: 12px; }
.location-card button { margin-left: auto; border: 0; background: none; color: var(--ink-2); font-size: 22px; cursor: pointer; }

.ta-favorites, .ta-recent { padding: 0 16px 14px; }
.ta-favorites header, .ta-recent header { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 10px; }
.ta-favorites h2, .ta-recent h2 { margin: 0; font-size: 16px; font-weight: 620; }
.ta-recent header span { color: var(--ink-3); font-size: 12px; }
.ta-favorites-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ta-favorite-card {
  min-width: 0;
  padding: 14px 8px;
  display: grid; justify-items: center; gap: 6px; text-align: center;
  border-radius: var(--r-sub);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-ctrl-blur);
  backdrop-filter: var(--glass-ctrl-blur);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
}
.ta-favorite-icon { font-size: 16px; }
.ta-favorite-card strong { overflow: hidden; max-width: 100%; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ta-recent-list {
  border-radius: var(--r-sub);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-ctrl-blur);
  backdrop-filter: var(--glass-ctrl-blur);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
}
.ta-empty { margin: 0; padding: 22px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ---------- 底部弹层（查手机 / 去看他 / 偷看日记 共用） ---------- */
.privacy-shade { position: absolute; inset: 0; z-index: 5; background: rgb(23 23 26 / 22%); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.privacy-sheet {
  position: absolute; z-index: 6; right: 0; bottom: 0; left: 0;
  padding: 14px 20px calc(26px + var(--safe-bottom));
  border-radius: 30px 30px 0 0;
  text-align: center;
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) brightness(1.24) blur(34px);
  backdrop-filter: saturate(180%) brightness(1.24) blur(34px);
  box-shadow: 0 -1px 0 rgb(255 255 255 / 60%) inset, 0 -20px 50px rgb(23 23 26 / 14%);
}
.sheet-handle { width: 46px; height: 5px; margin: 0 auto 18px; border-radius: 3px; background: var(--ink-4); }
.privacy-avatar { width: 72px; height: 72px; margin: auto; box-shadow: var(--edge), var(--lift); }
.eyebrow { margin: 14px 0 6px; color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: 3px; }
.privacy-sheet h2 { margin: 0; font-size: 18px; font-weight: 620; }
.privacy-subtitle { margin: 8px 0 16px; color: var(--ink-2); font-size: 13px; }
.privacy-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.privacy-stats div {
  padding: 13px 14px;
  border-radius: var(--r-sub);
  background: var(--glass-sunken);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%), inset 0 1px 0 0 rgb(255 255 255 / 55%);
}
.privacy-stats small { display: block; color: var(--ink-3); font-size: 11px; }
.privacy-stats strong { display: block; margin-top: 6px; font-size: 16px; font-weight: 620; }
.visit-plan-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; text-align: left; }
.visit-field { display: block; padding: 10px 12px; border-radius: var(--r-sub); background: var(--glass-sunken); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%), inset 0 1px 0 0 rgb(255 255 255 / 55%); }
.visit-field small { display: block; color: var(--ink-3); font-size: 11px; }
.visit-field select, .visit-field input { display: block; width: 100%; margin-top: 4px; padding: 0; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink); }
.visit-field select:focus, .visit-field input:focus { outline: none; }
.privacy-note { margin: 16px 0; color: var(--ink-3); font-size: 11px; }
.privacy-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.privacy-actions button { height: 46px; border: 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.privacy-actions button:first-child {
  border-radius: 0;
  clip-path: var(--pixel-cut-sm);
  color: var(--ink);
  background: var(--glass-strong);
}
.privacy-actions button:first-child:active { background: var(--glass); }
.privacy-actions button:last-child {
  color: #fff;
  background: var(--ink);
  background-image: var(--pixel-scan);
  clip-path: var(--pixel-cut);
  letter-spacing: 1px;
  filter: drop-shadow(4px 4px 0 rgb(23 23 26 / 22%)) drop-shadow(0 8px 18px rgb(23 23 26 / 18%));
  transition: transform .1s ease, filter .1s ease;
}
.privacy-actions button:last-child:active { transform: translate(4px, 4px); filter: drop-shadow(0 0 0 transparent) drop-shadow(0 2px 6px rgb(23 23 26 / 20%)); }

/* ---------- 去看他：现场页 / 偷看日记：日记页 ---------- */
.scene-screen, .diary-screen { position: absolute; inset: 0; z-index: 7; overflow-y: auto; background: transparent; scrollbar-width: none; }
.scene-screen::-webkit-scrollbar, .diary-screen::-webkit-scrollbar { display: none; }
.scene-toolbar {
  position: sticky; top: 0; z-index: 2;
  height: calc(64px + var(--safe-top));
  padding: var(--safe-top) 16px 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgb(255 255 255 / 60%), rgb(255 255 255 / 22%));
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
}
.scene-toolbar h1 { margin: 0; font-size: 17px; font-weight: 600; }
.scene-toolbar button {
  position: absolute; left: 16px; top: calc(var(--safe-top) + 14px);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift);
  font: 300 26px/1 Arial, sans-serif;
  cursor: pointer;
}
.scene-toolbar > span { display: none; }
.scene-body, .diary-body { padding: 6px 16px calc(40px + var(--safe-bottom)); }
.scene-hero { display: grid; justify-items: center; gap: 8px; margin: 6px 0 18px; text-align: center; }
.scene-avatar { width: 84px; height: 84px; box-shadow: var(--edge), var(--lift); }
.scene-hero strong { font-size: 18px; font-weight: 620; }
.scene-hero p { margin: 0; color: var(--ink-2); font-size: 13px; }
.scene-card {
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift-lg);
}
.scene-card small { display: block; color: var(--ink-3); font-size: 11px; letter-spacing: .5px; }
.scene-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink); }
.scene-empty { margin: 20px 0; text-align: center; color: var(--ink-3); font-size: 13px; }

.diary-entry {
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--edge), var(--lift-lg);
}
.diary-entry header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.diary-entry time { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.diary-entry .diary-mood { color: var(--ink-3); font-size: 11px; }
.diary-entry p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }

/* ---------- 编辑行程弹层 ---------- */
.itinerary-sheet { max-height: 88svh; overflow: auto; text-align: left; }
.itinerary-sheet h2 { margin: 0 0 18px; font-size: 20px; text-align: center; }
.itinerary-sheet label { display: block; margin-bottom: 14px; color: var(--ink-2); font-size: 13px; }
.itinerary-sheet textarea, .itinerary-sheet select {
  width: 100%; margin-top: 7px; padding: 12px 14px;
  border: 0; border-radius: var(--r-sub);
  color: var(--ink);
  background: var(--glass-strong);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
  font: 14px/1.5 inherit; resize: vertical;
}
.itinerary-map-preview, #itinerary-map-preview { width: 100%; height: 140px; margin-bottom: 12px; border-radius: var(--r-sub); object-fit: cover; }
.itinerary-hint { margin: 0 0 14px; min-height: 16px; color: var(--ink-3); font-size: 12px; }
.place-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.place-chip {
  border: 0; border-radius: var(--r-pill);
  padding: 7px 14px;
  background: var(--glass-strong);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.place-chip.active { background: var(--ink); color: #fff; }
.itinerary-locations-head { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.itinerary-locations-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.location-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sub); background: var(--glass-strong); box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%); }
.location-fav { border: 0; background: none; padding: 0; font-size: 15px; color: var(--ink-3); cursor: pointer; flex: 0 0 auto; }
.location-fav.active { color: #ff9500; }
.location-name { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.location-tag { flex: 0 0 auto; padding: 1px 6px; border-radius: 999px; background: rgb(23 23 26 / 8%); color: var(--ink-3); font-size: 10px; }
.location-btn { flex: 0 0 auto; border: 0; padding: 4px 9px; border-radius: 999px; background: rgb(23 23 26 / 6%); color: var(--ink-2); font-size: 11px; cursor: pointer; }
.location-btn:active { background: rgb(23 23 26 / 12%); }
.place-point-sheet #place-point-name {
  width: 100%; padding: 10px 12px; margin-top: 6px;
  border: 0; border-radius: var(--r-sub);
  color: var(--ink);
  background: var(--glass-strong);
  box-shadow: var(--edge), 0 1px 2px rgb(23 23 26 / 4%);
  font: 14px/1.5 inherit;
}
.place-point-sheet label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.itinerary-sheet .privacy-actions { grid-template-columns: 1fr 1.4fr; margin-bottom: 12px; }
.itinerary-save {
  width: 100%; height: 50px; border: 0; border-radius: 0;
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 1.5px; cursor: pointer;
  background: var(--ink); background-image: var(--pixel-scan);
  clip-path: var(--pixel-cut);
  filter: drop-shadow(4px 4px 0 rgb(23 23 26 / 26%)) drop-shadow(0 8px 18px rgb(23 23 26 / 22%));
  transition: transform .1s ease, filter .1s ease;
}
.itinerary-save:active { transform: translate(4px, 4px); filter: drop-shadow(0 0 0 transparent) drop-shadow(0 2px 6px rgb(23 23 26 / 20%)); }

/* ---------- 刷新查手机弹层 ---------- */
.refresh-shade { z-index: 5; }
.refresh-sheet {
  position: absolute; z-index: 6; right: 0; bottom: 0; left: 0;
  max-height: 82svh; overflow: auto;
  padding: 14px 20px calc(26px + var(--safe-bottom));
  border-radius: 30px 30px 0 0;
  color: var(--ink);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) brightness(1.24) blur(34px);
  backdrop-filter: saturate(180%) brightness(1.24) blur(34px);
  box-shadow: 0 -1px 0 rgb(255 255 255 / 60%) inset, 0 -20px 50px rgb(23 23 26 / 14%);
}
.refresh-tag { display: inline-block; margin-top: 4px; padding: 5px 12px; border-radius: var(--r-pill); background: rgb(23 23 26 / 8%); color: var(--ink-2); font-size: 10px; font-weight: 700; letter-spacing: .5px; }
.refresh-sheet h2 { margin: 10px 0 0; font-size: 19px; font-weight: 620; }
.refresh-desc { margin: 8px 0 14px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.refresh-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.refresh-cards div { padding: 13px 14px; border-radius: var(--r-sub); background: var(--glass-sunken); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%); }
.refresh-cards small { display: block; color: var(--ink-3); font-size: 11px; }
.refresh-cards strong { display: block; margin-top: 4px; font-size: 15px; color: var(--ink); }
.refresh-cards span { display: block; margin-top: 3px; color: var(--ink-3); font-size: 11px; }
.refresh-apps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.refresh-apps-head h3 { margin: 0; font-size: 14px; font-weight: 620; }
.refresh-apps-head span { color: var(--ink-3); font-size: 12px; }
.refresh-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.refresh-app { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: var(--r-sub); background: var(--glass-sunken); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%); }
.refresh-app-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgb(23 23 26 / 8%); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.refresh-app strong { flex: 1; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.refresh-radio { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 5px solid var(--ink); }
.refresh-sheet .privacy-actions button:first-child { background: var(--glass-strong); color: var(--ink); }
.refresh-sheet .privacy-actions button:last-child { background: var(--ink); color: #fff; }

/* ---------- 模拟 TA 手机：锁屏 / 密码 / 桌面 / 外观（保持深色手机质感） ---------- */
.lock-shade { position: absolute; inset: 0; z-index: 7; background: #000; }
.lock-screen { position: absolute; inset: 0; z-index: 8; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; padding: calc(max(20px,4svh) + var(--safe-top)) 24px calc(20px + var(--safe-bottom)); text-align: center; color: #fff; background: radial-gradient(120% 70% at 15% 0%, #4c6f8c 0%, transparent 55%), radial-gradient(140% 80% at 100% 15%, #2f4f6b 0%, transparent 60%), linear-gradient(200deg, #345169 0%, #1f374a 38%, #13232f 72%, #0b151d 100%); }
.lock-datetime { margin-top: max(20px,6svh); display: grid; justify-items: center; }
#lock-date { font-size: 14px; font-weight: 600; letter-spacing: .3px; color: #fff; text-shadow: 0 2px 10px #0000004d; }
#lock-time { margin-top: 6px; font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 76px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 4px 18px #0000004d; }
.lock-swipe { display: grid; justify-items: center; gap: 10px; transform: translateY(2px); }
.lock-swipe span { font-size: 11px; color: #fff; opacity: .72; }
.lock-swipe i { display: block; width: 134px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 65%); }
.passcode-screen { position: absolute; inset: 0; z-index: 9; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-content: center; padding: calc(max(56px,12svh) + var(--safe-top)) 24px calc(24px + var(--safe-bottom)); text-align: center; color: #fff; background: radial-gradient(120% 70% at 15% 0%, #4c6f8c 0%, transparent 55%), radial-gradient(140% 80% at 100% 15%, #2f4f6b 0%, transparent 60%), linear-gradient(200deg, #345169 0%, #1f374a 38%, #13232f 72%, #0b151d 100%); backdrop-filter: blur(2px); }
.passcode-hint { margin: 0 0 22px; font-size: 15px; font-weight: 600; color: #fff; opacity: .9; }
.passcode-dots { margin-top: 22px; display: flex; gap: 16px; }
.passcode-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 65%); background: transparent; }
.passcode-dots i.filled { background: #fff; }
.passcode-dots.shake { animation: passcode-shake .4s ease; }
@keyframes passcode-shake { 10%,90% { transform: translateX(-6px); } 20%,80% { transform: translateX(5px); } 30%,50%,70% { transform: translateX(-8px); } 40%,60% { transform: translateX(8px); } }
.passcode-keypad { margin-top: auto; display: grid; grid-template-columns: repeat(3, 72px); gap: 18px; justify-content: center; }
.passcode-key { width: 72px; height: 72px; border-radius: 50%; display: grid; justify-items: center; align-content: center; gap: 1px; color: #fff; background: rgb(255 255 255 / 16%); border: 1px solid rgb(255 255 255 / 22%); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); }
.passcode-key strong { font-size: 26px; font-weight: 500; }
.passcode-key small { font-size: 9px; letter-spacing: 1.5px; opacity: .8; }
.passcode-links { width: 100%; margin-top: 20px; display: flex; justify-content: space-between; padding: 0 6px; }
.passcode-link { border: 0; background: none; color: #fff; font-size: 13px; opacity: .85; }
.home-screen { position: absolute; inset: 0; z-index: 8; overflow: hidden auto; color: #fff; background: linear-gradient(160deg, #3d4250 0%, #20222a 55%, #101115 100%); }
.home-toolbar { padding: max(18px, env(safe-area-inset-top)) 20px 8px; display: flex; align-items: center; justify-content: space-between; }
.home-toolbar button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: rgb(255 255 255 / 12%); font: 20px/1 Arial; display: grid; place-items: center; }
.home-search { margin: 8px 20px 18px; padding: 11px 0; border-radius: 20px; text-align: center; color: rgb(255 255 255 / 75%); background: rgb(255 255 255 / 10%); font-size: 14px; }
.home-widgets { margin: 0 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-widget { padding: 14px; border: 0; border-radius: 20px; background: rgb(255 255 255 / 8%); color: #fff; text-align: left; font: inherit; }
.home-widget-clock { display: grid; gap: 2px; }
.home-widget-clock strong { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-widget-clock span { color: rgb(255 255 255 / 55%); font-size: 12px; }
.home-widget-music { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.home-widget-music-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgb(255 255 255 / 12%); font-size: 16px; }
.home-widget-music-info { min-width: 0; display: grid; gap: 2px; }
.home-widget-music-info strong { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.home-widget-music-info small { overflow: hidden; color: rgb(255 255 255 / 55%); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-widget-schedule { grid-column: 1 / -1; }
.home-widget-schedule small { display: block; color: rgb(255 255 255 / 55%); font-size: 12px; }
.home-widget-schedule p { margin: 6px 0 0; overflow: hidden; display: -webkit-box; font-size: 13px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-widget-todo { grid-column: 1 / -1; }
.home-widget-todo header { display: flex; align-items: center; justify-content: space-between; }
.home-widget-todo header small { color: rgb(255 255 255 / 55%); font-size: 12px; }
.home-widget-todo header button { width: 22px; height: 22px; border: 0; border-radius: 50%; color: #fff; background: rgb(255 255 255 / 14%); font-size: 14px; line-height: 1; }
.home-widget-todo-list { margin-top: 8px; display: grid; gap: 6px; }
.home-widget-todo-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.home-widget-todo-item input { width: 16px; height: 16px; accent-color: #fff; }
.home-widget-todo-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-widget-todo-item.done span { color: rgb(255 255 255 / 45%); text-decoration: line-through; }
.home-widget-todo-empty { color: rgb(255 255 255 / 45%); font-size: 12px; }
.home-stats { margin: 0 16px 20px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 12px; }
.home-stat-card { padding: 14px; border-radius: 20px; background: rgb(255 255 255 / 8%); }
.home-stat-overview { grid-row: 1 / 3; }
.home-stat-card > small { display: block; color: rgb(255 255 255 / 55%); font-size: 12px; }
.home-stat-row { margin-top: 14px; }
.home-stat-row span { display: block; color: rgb(255 255 255 / 55%); font-size: 12px; }
.home-stat-row strong { display: block; margin-top: 2px; font-size: 20px; font-weight: 700; }
.home-stat-row strong b { font-size: 20px; font-weight: 700; }
.home-battery-value { display: block; margin-top: 10px; font-size: 22px; font-weight: 700; }
.home-battery-bar { margin-top: 10px; height: 6px; border-radius: 3px; background: rgb(255 255 255 / 15%); overflow: hidden; }
.home-battery-bar i { display: block; height: 100%; background: #fff; border-radius: 3px; }
.home-screentime { display: block; margin-top: 10px; font-size: 20px; font-weight: 700; }
.home-screen-chart { margin-top: 12px; height: 22px; display: flex; align-items: flex-end; gap: 4px; }
.home-screen-chart i { flex: 1; border-radius: 2px; background: rgb(255 255 255 / 35%); }
.home-screen-chart i:nth-child(1) { height: 35%; }
.home-screen-chart i:nth-child(2) { height: 60%; }
.home-screen-chart i:nth-child(3) { height: 45%; }
.home-screen-chart i:nth-child(4) { height: 85%; }
.home-apps { margin: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; }
.home-app { display: grid; justify-items: center; gap: 8px; border: 0; background: none; color: #fff; }
.home-app-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: rgb(255 255 255 / 10%); font-size: 22px; }
.home-app span { font-size: 12px; color: rgb(255 255 255 / 85%); }
.home-dock { margin: 20px 16px max(20px, env(safe-area-inset-bottom)); padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border-radius: 22px; background: rgb(255 255 255 / 10%); }
.home-dock .home-app-icon { width: 100%; aspect-ratio: 1; border-radius: 16px; background: rgb(255 255 255 / 12%); }
.appearance-screen { position: absolute; inset: 0; z-index: 12; overflow: hidden auto; background: #f7f7f8; color: #202124; }
.appearance-toolbar { height: calc(64px + var(--safe-top)); padding: calc(10px + var(--safe-top)) 18px 10px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e5e5e8; background: #f7f7f8; }
.appearance-toolbar h1 { margin: 0; font-size: 20px; }
.appearance-toolbar button { position: absolute; left: 18px; border: 0; background: none; color: #1c1c1e; font: 40px/1 Arial; }
.appearance-content { padding: 18px 20px 36px; }
.appearance-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 20px 26px; }
.appearance-preview { padding: 0; border: 0; background: none; color: #202124; font: inherit; }
.preview-device { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 330px; overflow: hidden; border-radius: 28px; background: linear-gradient(145deg, #111, #050505 60%, #303036); box-shadow: 0 7px 18px #0002; color: #fff; }
.preview-device b { position: absolute; top: 38px; font-size: 31px; font-weight: 500; }
.preview-device i { width: 100%; padding: 13px 0; font-style: normal; font-size: 16px; background: #ffffff45; }
.preview-device em { position: absolute; bottom: 58px; font-style: normal; font-size: 22px; letter-spacing: 5px; }
.appearance-preview strong { display: block; margin-top: 12px; font-size: 17px; font-weight: 500; }
.appearance-content h2 { margin: 0 0 12px; color: #5d6065; font-size: 16px; font-weight: 500; }
.appearance-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 18px; padding: 24px 14px 28px; border-radius: 18px; background: #fff; }
.appearance-icon { display: grid; justify-items: center; gap: 8px; border: 0; background: none; color: #27272a; font: 14px inherit; }
.appearance-icon span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 17px; color: #fff; background: #29282b; font-size: 25px; }
.appearance-icon small { font-size: 13px; }

@media (max-width: 480px) {
  body { background: #ececed; }
  .ta-phone { width: 100vw; height: 100vh; aspect-ratio: auto; box-shadow: none; }
}

/* backdrop-filter 不支持时的实色回退 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgb(255 255 255 / 86%); --glass-strong: rgb(255 255 255 / 94%); --glass-sunken: rgb(255 255 255 / 70%); }
  .ta-toolbar, .map-toolbar, .scene-toolbar { background: rgb(255 255 255 / 90%); }
}