:root{
  --bg: #f7f9fc;
  --fg: #0c1a2a;
  --muted: #6b7c90;
  --card: #ffffff;
  --border: #e7edf5;
  --brand: #2563eb;
  --brand-600: #1d4ed8;
  --ok: #16a34a;
  --danger:#ef4444;
  --focus: #93c5fd;

  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --shadow-2: 0 6px 18px rgba(16,24,40,.10);

  --radius-sm: 10px; --radius: 14px; --radius-lg: 18px;

  --bar-h: 56px; --side-w: 280px;

  --fast: .16s; --normal: .25s; --easing: cubic-bezier(.22,1,.36,1);
}

/* 暗色主题变量 */
body[data-theme="dark"]{
  --bg: #0b1220;
  --fg: #e6ecf5;
  --muted: #9aa8bd;
  --card: #101827;
  --border: #1f2a3c;
  --brand: #60a5fa;
  --brand-600: #3b82f6;
  --focus: #60a5fa;
}

*{box-sizing:border-box}
html,body{
  height:100%; margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* 顶栏 */
.topbar{
  position: sticky; top: 0; z-index: 2000; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(14px, env(safe-area-inset-left)) 0 max(14px, env(safe-area-inset-right));
  background: var(--card); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.1) blur(6px);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.brand i{color:var(--brand)}
.brand .brand-short{display:none}
@media (max-width:640px){ .brand .brand-full{display:none} .brand .brand-short{display:inline} }

.status{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f1f5fb;border:1px solid var(--border);color:var(--fg);font-size:12px;box-shadow: var(--shadow-1)}
body[data-theme="dark"] .pill{ background:#0f172a }
.pill-online{background:linear-gradient( to right, rgba(37,99,235,.10), rgba(37,99,235,.02) )}
.icon-btn{min-width:44px; min-height:36px;background:#f8fafc;border:1px solid var(--border);color:var(--fg);font-size:16px;padding:6px 10px;border-radius:12px;cursor:pointer;transition: background var(--fast) var(--easing), transform var(--fast) var(--easing), box-shadow var(--fast); position:relative; z-index:2100}
.icon-btn:hover{background:#eef4ff; box-shadow: var(--shadow-1)}
.icon-btn:active{transform: translateY(1px)}
body[data-theme="dark"] .icon-btn{ background:#0f172a; border-color:#263145; }

/* 侧栏遮罩 */
.sidebar-mask{ position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.18); backdrop-filter: blur(2px); z-index: 1500; }
.sidebar-mask.hidden{ display: none; }

/* Leaflet 层级 */
.leaflet-container{ z-index: 0 !important; }

/* 侧栏 */
.sidebar{
  position:fixed; top: var(--bar-h); left:0; bottom: calc(64px + env(safe-area-inset-bottom));
  width: var(--side-w);
  background: var(--card); border-right:1px solid var(--border);
  padding: 14px; overflow:auto; box-shadow: var(--shadow-2);
  transform: translateX(0); transition: transform var(--normal) var(--easing); z-index: 2001;
}
.sidebar.collapsed{ transform: translateX(calc(-1 * var(--side-w))); }
.sidebar .section{background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 12px}
.field{display:flex; align-items:center; gap:10px; background: #f7f9fd; border:1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px}
body[data-theme="dark"] .field{ background:#0f172a; border-color:#263145 }
.field input{flex:1; background: transparent; border:0; color: var(--fg); font-size:16px; min-height: 38px; outline: none}
.field:focus-within{box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent); border-color: color-mix(in srgb, var(--focus) 50%, var(--border))}
.row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap; align-items:center}
.btn{min-height: 40px; min-width: 44px; background: #f8fafc; border:1px solid var(--border); color: var(--fg); border-radius: 12px; padding: 8px 12px; font-size:14px; cursor:pointer; transition: background var(--fast) var(--easing), transform var(--fast), box-shadow var(--fast)}
.btn:hover{ background:#eef4ff; box-shadow: var(--shadow-1) }
.btn:active{ transform: translateY(1px) }
.btn.wide{ width:100% }
.btn.primary{background: linear-gradient(135deg, var(--brand), var(--brand-600)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.25)}
body[data-theme="dark"] .btn{ background:#0f172a; border-color:#263145 }

/* 开关 */
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .slider{width:44px;height:24px;border-radius:999px;background:#dbe6f4;position:relative;display:inline-block;border:1px solid var(--border)}
.switch .slider::after{content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:999px; background:#ffffff; box-shadow: var(--shadow-1); transition: transform var(--fast) var(--easing), background var(--fast)}
.switch input:checked + .slider{ background:#c7f5d8; border-color:#b2eec7 }
.switch input:checked + .slider::after{ transform: translateX(20px); background:#22c55e }

/* 选择器 */
.select{flex:1; min-height:36px; border:1px solid var(--border); border-radius:10px; background:#f7f9fd; padding:6px 10px; outline:none}
.select:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 36%, transparent); border-color: color-mix(in srgb, var(--focus) 50%, var(--border)) }
body[data-theme="dark"] .select{ background:#0f172a; border-color:#263145 }

/* 主区由 JS 统一分配高度 */
.main{margin-left: var(--side-w); transition: margin-left var(--normal) var(--easing); padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right))}
.sidebar.collapsed ~ .main{ margin-left: 0; }
.panel{ padding: 12px; }
.map-panel{ padding-bottom: 0; }
.map{ width:100%; height:100%; min-height: 0; border-radius: var(--radius-lg); background:#f3f7fd; border:1px solid var(--border); box-shadow: var(--shadow-2) }
body[data-theme="dark"] .map{ background:#0f172a; border-color:#263145 }
.splitter{ height: 12px; cursor: row-resize; background: transparent; position: relative; touch-action: none }
.splitter::after{ content:''; position:absolute; left:50%; transform: translateX(-50%); top: 3px; width: 72px; height: 6px; border-radius: 6px; background: #dbe4f1; border:1px solid var(--border); box-shadow: var(--shadow-1) }

/* 允许完全折叠（视觉=隐藏） */
.map-panel.collapsed{ height:0 !important; padding:0 !important; border:0 !important; overflow:hidden }
#map-wrap { min-height: 0 !important; }

/* 聊天区 */
.chat-panel{ padding-top: 6px }
.chat-body{ height: 100%; min-height: 0; background: var(--card); border-radius: var(--radius-lg); overflow: auto; border:1px solid var(--border); padding: 12px; box-shadow: var(--shadow-1); scroll-behavior: smooth }
.chat-item{ padding: 10px 12px; border-radius: 14px; background: #f0f5ff; align-self:flex-start; max-width: 86%; border:1px solid #e3eaf8 }
.chat-item.me{ background: #e9fbef; border-color: #d4f3dc; align-self:flex-end }
.chat-item .meta{ font-size:12px; color: var(--muted); margin-bottom:6px; display:flex; justify-content:space-between; gap: 10px }

/* 底部输入条：固定（防 iOS 放大：input 字号 16px） */
.chat-form{ position: fixed; left:0; right:0; bottom:0; z-index: 40; display:flex; gap: 10px; align-items:center; padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); height: calc(56px + env(safe-area-inset-bottom)); background: var(--card); border-top:1px solid var(--border); backdrop-filter: saturate(1.1) blur(6px) }
.chat-form input{ flex:1; height: 42px; border-radius: 12px; border:1px solid var(--border); background: #f9fbff; color: var(--fg); padding: 0 12px; outline: none; transition: box-shadow var(--fast) var(--easing), border-color var(--fast); font-size:16px }
.chat-form input:focus{ border-color: color-mix(in srgb, var(--focus) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 36%, transparent) }
.chat-form .btn{ height:42px }

/* 悬浮按钮：我的位置 */
.fab{ position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: white; border: 0; box-shadow: var(--shadow-2); font-size: 20px; cursor: pointer; transition: transform var(--fast) var(--easing), filter var(--fast) }
.fab:hover{ filter: brightness(1.05) }
.fab:active{ transform: translateY(1px) }

/* 文本弱提示 */
.muted{ color: var(--muted); font-size: 12px; margin-top: 6px }

/* 昵称校验视觉状态 */
#nickname.name-valid{ color: var(--ok) }
#nickname.name-invalid{ color: var(--danger) }
.field.name-valid{ border-color: #b7ebc6; box-shadow: 0 0 0 3px rgba(34,197,94,.22) }
.field.name-invalid{ border-color: #fecaca; box-shadow: 0 0 0 3px rgba(239,68,68,.18) }

/* 响应式 */
@media (max-width: 980px){ .map{min-height: 200px} }
@media (max-width: 760px){ .sidebar{ top: var(--bar-h); bottom: calc(64px + env(safe-area-inset-bottom)) } }