/* ==========================================================================
   theme.css —— 主题层（加载顺序：app.css → experience.css → theme.css）
   --------------------------------------------------------------------------
   设计为「最后加载」，因此这里的规则拥有最终解释权。
   全部配色只通过 --c-* 变量派生，切换主题 = 切换一组变量，无需改任何选择器。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 主题色板
   -------------------------------------------------------------------------- */

/* 浅蓝（默认） */
:root,
:root[data-theme="azure"] {
  --c-accent: #1b74d1;
  --c-accent-rgb: 27, 116, 209;
  --c-accent-dark: #14508f;
  --c-accent-dark-rgb: 20, 80, 143;
  --c-accent-deep: #0f3d6e;
  --c-accent-bright: #2f8fe0;
  --c-accent-2: #c9762c;
  --c-accent-soft: #e3eefb;
  --c-success: #1f7a6a;
  --c-danger: #b42318;
  --c-bg: #eef3f9;
  --c-bg-deep: #dde7f2;
  --c-panel-rgb: 250, 252, 255;
  --c-panel-solid: #fafcff;
  --c-surface: #f2f6fb;
  --c-line: #d5e0ec;
  --c-line-strong: #b8c8dc;
  --c-ink: #13202e;
  --c-ink-rgb: 19, 32, 46;
  --c-ink-soft: #2f4155;
  --c-muted: #5d7086;
  --c-muted-strong: #44576b;
  --t-name: "浅蓝";
}

/* 青绿（原始配色） */
:root[data-theme="verdant"] {
  --c-accent: #0f7a6c;
  --c-accent-rgb: 15, 122, 108;
  --c-accent-dark: #0a5f55;
  --c-accent-dark-rgb: 10, 95, 85;
  --c-accent-deep: #1d7469;
  --c-accent-bright: #16907f;
  --c-accent-2: #c45c26;
  --c-accent-soft: #e0f0ec;
  --c-success: #24766a;
  --c-danger: #b42318;
  --c-bg: #ecefeb;
  --c-bg-deep: #dfe4de;
  --c-panel-rgb: 249, 250, 247;
  --c-panel-solid: #f9faf7;
  --c-surface: #f3f5f1;
  --c-line: #d4d9d2;
  --c-line-strong: #bdc5bd;
  --c-ink: #171d1b;
  --c-ink-rgb: 23, 29, 27;
  --c-ink-soft: #343d39;
  --c-muted: #69736e;
  --c-muted-strong: #4e5954;
  --t-name: "青绿";
}

/* 暖砂 */
:root[data-theme="amber"] {
  --c-accent: #c0662a;
  --c-accent-rgb: 192, 102, 42;
  --c-accent-dark: #8f4a1c;
  --c-accent-dark-rgb: 143, 74, 28;
  --c-accent-deep: #7a3f18;
  --c-accent-bright: #dd8340;
  --c-accent-2: #2f7d8c;
  --c-accent-soft: #fbecdc;
  --c-success: #4a7c3f;
  --c-danger: #a8321f;
  --c-bg: #f6f1e9;
  --c-bg-deep: #ece3d6;
  --c-panel-rgb: 255, 252, 246;
  --c-panel-solid: #fffcf6;
  --c-surface: #faf5ec;
  --c-line: #e2d6c2;
  --c-line-strong: #cdbda3;
  --c-ink: #241c12;
  --c-ink-rgb: 36, 28, 18;
  --c-ink-soft: #4a3a28;
  --c-muted: #7a6852;
  --c-muted-strong: #5c4c38;
  --t-name: "暖砂";
}

/* 石墨 */
:root[data-theme="graphite"] {
  --c-accent: #3f5d7d;
  --c-accent-rgb: 63, 93, 125;
  --c-accent-dark: #2c4460;
  --c-accent-dark-rgb: 44, 68, 96;
  --c-accent-deep: #22364d;
  --c-accent-bright: #5b7ea3;
  --c-accent-2: #a8724a;
  --c-accent-soft: #e6ecf3;
  --c-success: #3f7a63;
  --c-danger: #a23528;
  --c-bg: #eef0f3;
  --c-bg-deep: #dee2e8;
  --c-panel-rgb: 251, 252, 253;
  --c-panel-solid: #fbfcfd;
  --c-surface: #f4f6f8;
  --c-line: #d7dce3;
  --c-line-strong: #bcc4ce;
  --c-ink: #161b21;
  --c-ink-rgb: 22, 27, 33;
  --c-ink-soft: #333c46;
  --c-muted: #67717d;
  --c-muted-strong: #4c5560;
  --t-name: "石墨";
}

/* 让上一轮的光圈/描边等也跟随主题色 —— 扁平化：阴影全面调轻 */
:root {
  --v2-ring: 0 0 0 3px rgba(var(--c-accent-rgb), 0.18);
  --v2-shadow-xs: 0 1px 2px rgba(var(--c-ink-rgb), 0.06);
  --v2-shadow-sm: 0 1px 2px rgba(var(--c-ink-rgb), 0.05),
    0 4px 12px rgba(var(--c-ink-rgb), 0.08);
  --v2-shadow-md: 0 2px 4px rgba(var(--c-ink-rgb), 0.06),
    0 10px 28px rgba(var(--c-ink-rgb), 0.12);
  --v2-shadow-lg: 0 4px 10px rgba(var(--c-ink-rgb), 0.08),
    0 24px 56px rgba(var(--c-ink-rgb), 0.18);
}

/* --------------------------------------------------------------------------
   2. 外观设置：浮动入口 + 主题面板
   -------------------------------------------------------------------------- */

.theme-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--c-accent-rgb), 0.22);
  border-radius: 999px;
  background: rgba(var(--c-panel-rgb), 0.9);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 6px 20px rgba(var(--c-ink-rgb), 0.16);
  color: var(--c-accent-dark);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.theme-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(var(--c-ink-rgb), 0.22);
}

.theme-fab:active {
  transform: translateY(0) scale(0.97);
}

.theme-fab svg {
  width: 20px;
  height: 20px;
  display: block;
}

.theme-panel {
  position: fixed;
  right: 18px;
  bottom: 72px;
  z-index: 61;
  width: 286px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  background: rgba(var(--c-panel-rgb), 0.96);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 48px rgba(var(--c-ink-rgb), 0.2);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.theme-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.theme-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.theme-panel-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: 0.02em;
}

.theme-panel-head span {
  font-size: 11px;
  color: var(--c-muted);
}

.theme-swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.theme-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: 11px;
  background: var(--c-surface);
  color: var(--c-ink-soft);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s,
    background 0.18s;
}

.theme-swatch:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--c-accent-rgb), 0.4);
  box-shadow: 0 4px 14px rgba(var(--c-ink-rgb), 0.12);
}

.theme-swatch.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--c-accent-rgb), 0.25);
}

.theme-swatch-dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), 0.14),
    0 2px 6px rgba(var(--c-ink-rgb), 0.18);
}

.theme-panel-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-line);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--c-muted);
}

@media (max-width: 640px) {
  .theme-panel {
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   3. 点位悬浮信息卡（hover card）
   -------------------------------------------------------------------------- */

.point-hover-card {
  position: fixed;
  z-index: 40;
  width: 288px;
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: rgba(var(--c-panel-rgb), 0.94);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: 0 10px 28px rgba(var(--c-ink-rgb), 0.14),
    0 28px 64px rgba(var(--c-ink-rgb), 0.18);
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(6px) scale(0.97);
  transition: opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.point-hover-card.is-open {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-10px) scale(1);
  pointer-events: auto;
}

/* 顶部色条：类别主题色 */
.point-hover-card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--c-accent-bright),
    var(--c-accent) 55%,
    var(--c-accent-dark)
  );
}

.phc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px 9px;
}

.phc-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent-soft);
  box-shadow: inset 0 0 0 1px rgba(var(--c-accent-rgb), 0.16);
  overflow: hidden;
}

.phc-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.phc-icon-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-accent-dark);
  letter-spacing: -0.02em;
}

.phc-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.phc-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phc-meta {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--c-muted);
}

.phc-cat {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(var(--c-accent-rgb), 0.1);
  color: var(--c-accent-dark);
  font-weight: 600;
  font-size: 10.5px;
  white-space: nowrap;
}

.phc-addr {
  padding: 0 13px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--c-muted);
  display: flex;
  gap: 5px;
}

.phc-addr svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  opacity: 0.7;
}

.phc-shots {
  display: flex;
  gap: 5px;
  padding: 9px 13px 0;
}

.phc-shot {
  width: 54px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px rgba(var(--c-ink-rgb), 0.08);
}

/* 自定义字段：楼宇的楼层/客户信息就落在这里 */
.phc-fields {
  padding: 9px 13px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.phc-field {
  min-width: 0;
}

.phc-field dt {
  font-size: 10px;
  color: var(--c-muted);
  letter-spacing: 0.03em;
  margin-bottom: 1px;
}

.phc-field dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 资源摘要条：楼层 / 商铺 / 客户 */
.phc-resource {
  margin: 10px 13px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(var(--c-accent-rgb), 0.09),
    rgba(var(--c-accent-rgb), 0.03)
  );
  box-shadow: inset 0 0 0 1px rgba(var(--c-accent-rgb), 0.14);
}

.phc-resource-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-accent-dark);
  font-weight: 700;
}

.phc-resource-head b {
  font-size: 13px;
}

.phc-resource-list {
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}

.phc-resource-list li {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11.5px;
  color: var(--c-ink-soft);
  line-height: 1.45;
}

.phc-resource-list li .phc-floor {
  flex: 0 0 auto;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(var(--c-accent-rgb), 0.13);
  color: var(--c-accent-dark);
  font-size: 10px;
  font-weight: 700;
}

.phc-resource-list li .phc-unit {
  font-weight: 600;
}

.phc-resource-list li .phc-contact {
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 9px 13px 0;
}

.phc-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-line);
  font-size: 10.5px;
  color: var(--c-muted-strong);
}

.phc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 13px;
  border-top: 1px solid var(--c-line);
  background: rgba(var(--c-ink-rgb), 0.025);
  font-size: 10.5px;
  color: var(--c-muted);
}

.phc-foot kbd {
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--c-line-strong);
  background: var(--c-panel-solid);
  font-family: var(--mono, monospace);
  font-size: 10px;
}

.phc-empty {
  padding: 4px 13px 12px;
  font-size: 11.5px;
  color: var(--c-muted);
}

@media (prefers-reduced-motion: reduce) {
  .point-hover-card,
  .theme-panel,
  .theme-fab {
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   4. 账户抽屉里的「外观配色」入口（与 a 同款排版）
   -------------------------------------------------------------------------- */

.user-drawer-nav button#btn-open-theme-panel {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 18px !important;
  padding: 17px 2px !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color 0.18s ease, background 0.18s ease !important;
}

.user-drawer-nav button#btn-open-theme-panel:hover {
  color: var(--c-accent-dark) !important;
}

.user-drawer-nav button#btn-open-theme-panel span {
  flex: 0 0 auto !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.user-drawer-nav button#btn-open-theme-panel small {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  text-align: right !important;
  font-size: 0.85rem !important;
  opacity: 0.72;
}


/* 悬浮卡：底部小箭头指向标记；空间不足时翻到标记下方 */
.point-hover-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  transform: rotate(45deg);
  border-right: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(var(--c-panel-rgb), 0.96);
}

.point-hover-card.is-flipped {
  transform: translate(-50%, 0) translateY(10px) scale(0.97);
}

.point-hover-card.is-flipped.is-open {
  transform: translate(-50%, 0) translateY(12px) scale(1);
}

.point-hover-card.is-flipped::after {
  top: -6px;
  bottom: auto;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.72);
}

.phc-resource-list li.phc-more {
  color: var(--c-muted);
  font-size: 10.5px;
  padding-left: 2px;
}

/* 悬浮放大：静态投影 + 仅 transform 动画，避免滤镜重绘造成的卡顿 */
.map-point-marker {
  transition: transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1);
  filter: drop-shadow(0 3px 6px rgba(var(--c-ink-rgb), 0.22));
}

.map-point-marker:hover {
  transform: translateY(-3px) scale(1.06);
  z-index: 5;
}


/* ==========================================================================
   5. 点位悬浮信息卡 · 高级质感增强（叠加在玻璃底座上，零动画开销）
   -------------------------------------------------------------------------- */

/* 标题区一层极淡主题渐变，营造层次；纯静态背景，不参与动画 */
.phc-head {
  background: linear-gradient(135deg,
    rgba(var(--c-accent-rgb), 0.10),
    rgba(var(--c-accent-rgb), 0.02) 62%,
    rgba(var(--c-panel-rgb), 0) 100%);
  padding-bottom: 10px;
}

/* 图标芯片：白底 + 主题描边，干净又有立体感 */
.phc-icon {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(var(--c-ink-rgb), 0.12),
    inset 0 0 0 1px rgba(var(--c-accent-rgb), 0.18);
}

/* 标题文字轻微阴影，提升“贵气” */
.phc-title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 图片画廊：悬浮轻微放大（仅 transform，GPU 合成，顺滑） */
.phc-shot {
  transition: transform 0.2s ease;
}
.phc-shot:hover {
  transform: scale(1.05);
}

/* 底栏“查看详情”引导：主题色 + 箭头微动 */
.phc-go {
  color: var(--c-accent);
  font-weight: 600;
}
.phc-go::after {
  content: " \2192";
  transition: margin-left 0.2s ease;
}
.point-hover-card:hover .phc-go::after {
  margin-left: 3px;
}

/* ==========================================================================
   6. 图标选择器瓦片 · 高级质感（圆角 + 悬浮抬升，仅 transform）
   -------------------------------------------------------------------------- */

.marker-icon-grid {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

.marker-icon-option {
  border-radius: 12px;
  background: var(--c-panel-solid);
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition: transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.16s ease;
}

.marker-icon-option:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(var(--c-accent-rgb), 0.5),
    0 6px 16px rgba(var(--c-ink-rgb), 0.12);
}

.marker-icon-option.active {
  box-shadow: inset 0 0 0 2px var(--c-accent),
    0 6px 16px rgba(var(--c-accent-rgb), 0.22);
}