:root{
  --brand:#c2185b; --brand2:#e91e63; --bg:#f5f6f8; --card:#fff;
  --line:#e8e8e8; --txt:#333; --sub:#999; --warm:#8a6d3b; --warmbg:#fdfaf3;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:var(--bg); color:var(--txt); }
a { color:var(--brand); text-decoration:none; }
img { max-width:100%; }

/* 顶部导航(非地图页通用) */
.topnav { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:4px;
          background:linear-gradient(135deg,#fff,#fdf3f6); border-bottom:1px solid var(--line);
          padding:0 12px; min-height:52px; }
.topnav .ttl { font-weight:700; color:var(--brand); font-size:15px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topnav .ttl small { display:block; font-weight:400; color:var(--sub); font-size:10.5px; margin-top:1px; }
.navi { display:flex; gap:2px; }
.navi a { padding:6px 10px; font-size:13px; color:#666; border-radius:8px; white-space:nowrap; }
.navi a.on { background:var(--brand); color:#fff; font-weight:600; }
.navi a:hover { color:var(--brand); }
.navi a.on:hover { color:#fff; }

/* 按钮 */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer;
       background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff;
       border-radius:10px; padding:10px 16px; font-size:14px; font-weight:600; font-family:inherit; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.ghost { background:#fff; color:var(--brand); border:1px solid #f0c6d3; }
.btn.small { padding:5px 10px; font-size:12px; border-radius:8px; }
.btn.green { background:linear-gradient(135deg,#1e8e3e,#34a853); }
.btn.red { background:linear-gradient(135deg,#c62828,#e53935); }
.btn.gray { background:#e0e0e0; color:#555; }
.btn.block { width:100%; }
.btnrow { display:flex; gap:8px; margin-top:14px; }
.btnrow .btn { flex:1; }

.muted { color:var(--sub); } .brand { color:var(--brand); } .small { font-size:12px; }
.pill { display:inline-block; font-size:10.5px; padding:1.5px 8px; border-radius:20px; background:#fdeef2; color:var(--brand); font-weight:600; white-space:nowrap; }
.pill.done { background:#d4edda; color:#155724; }
.pill.skip { background:#f1f1f1; color:#777; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; }
.empty { color:#bbb; font-size:13px; text-align:center; padding:48px 20px; line-height:2; }

/* 表单(写游记/管理) */
.form label { display:block; font-size:12.5px; color:#666; margin:14px 0 6px; font-weight:600; }
.form .req::after { content:" *"; color:var(--brand); }
.inp, .form input, .form textarea, .form select {
  width:100%; border:1px solid #ddd; border-radius:10px; padding:10px 12px;
  font-size:15px; font-family:inherit; background:#fff; color:#333; outline:none; }
.inp:focus, .form input:focus, .form textarea:focus, .form select:focus { border-color:var(--brand); }
.form textarea { min-height:120px; line-height:1.6; resize:vertical; }

.toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:9999;
         background:rgba(20,20,20,.92); color:#fff; padding:9px 18px; border-radius:22px; font-size:13px;
         box-shadow:0 4px 16px rgba(0,0,0,.25); max-width:86vw; }
.toast.ok { background:rgba(30,142,62,.95); }
.toast.err { background:rgba(198,40,40,.95); }

/* 加载/登录遮罩 */
.gate { position:fixed; inset:0; background:rgba(255,255,255,.96); z-index:5000; display:flex;
        flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; }
.gate .gcard { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px;
               width:100%; max-width:340px; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.spinner { width:26px; height:26px; border:3px solid #f0c6d3; border-top-color:var(--brand);
           border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 地图页专属 */
#map { position:fixed; top:0; left:0; right:350px; bottom:0; z-index:1; background:#e8eaed; }
#mhdr { position:fixed; top:0; left:0; right:350px; min-height:58px; z-index:500;
        background:linear-gradient(135deg,#fff,#faf3e8); border-bottom:1px solid #eee;
        display:flex; align-items:center; padding:0 12px; gap:10px; }
#mhdr .logo { font-size:15px; font-weight:700; color:var(--brand); white-space:nowrap; }
#mhdr .sub { font-size:11px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
#mhdr .mnav { display:flex; gap:4px; align-items:center; }
#mhdr .mnav a { font-size:12.5px; padding:5px 10px; border-radius:8px; background:#fff; border:1px solid #eee; color:#555; white-space:nowrap; }
#mhdr .mnav a.on, #mhdr .mnav a:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
#panel { position:fixed; top:0; right:0; width:350px; bottom:0; z-index:400;
         background:#fff; border-left:1px solid var(--line); display:flex; flex-direction:column; }
.tabs { display:flex; border-bottom:1px solid #eee; background:#fff; flex:0 0 44px; }
.tab { flex:1; text-align:center; padding:12px 0 10px; font-size:13px; cursor:pointer; color:#888;
       border-bottom:2px solid transparent; user-select:none; }
.tab.active { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.tab-body { flex:1; overflow-y:auto; display:none; -webkit-overflow-scrolling:touch; }
.tab-body.active { display:block; }
.stat-line { font-size:11px; color:#999; padding:6px 12px 2px; }
.day-sec { font-size:11px; font-weight:700; padding:12px 12px 4px; letter-spacing:.5px; display:flex; align-items:center; gap:6px; }
.day-sec .bar { width:14px; height:4px; border-radius:2px; flex:0 0 auto; }
.day-sec .n { color:#999; font-weight:400; font-size:10px; margin-left:auto; }
.poi-card { margin:3px 8px; padding:7px 10px; border:1px solid #f0ece4; border-radius:8px;
            background:#fffdf8; cursor:pointer; transition:all .15s; }
.poi-card:hover { border-color:var(--brand); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.poi-card.active { border-color:var(--brand); background:#fdf0f4; }
.poi-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.poi-day { font-size:10px; font-weight:700; color:#fff; background:var(--brand); border-radius:4px;
           padding:1px 5px; white-space:nowrap; }
.poi-name { font-size:13px; font-weight:600; color:#333; }
.poi-km { font-size:10px; color:#aaa; margin-left:auto; white-space:nowrap; }
.poi-view { font-size:11px; color:#666; margin-top:3px; line-height:1.45; }
.poi-meta { font-size:10.5px; color:var(--warm); margin-top:3px; line-height:1.5; }
.poi-meta .tag { display:inline-block; background:#fdeef2; color:var(--brand); border-radius:3px;
                 padding:0 4px; margin-right:2px; font-size:9.5px; }
.st { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:3px; }
.st.plan{ background:#ccc; } .st.done{ background:#34a853; } .st.skip{ background:#eee; border:1px solid #ccc; }
.poi-jl { margin-left:auto; font-size:10px; color:var(--brand); white-space:nowrap; }
.legend { position:fixed; bottom:14px; left:12px; z-index:600; background:rgba(255,255,255,.96);
          border:1px solid #e0e0e0; border-radius:8px; padding:8px 10px; font-size:11px; color:#555;
          box-shadow:0 2px 8px rgba(0,0,0,.08); max-width:290px; }
.legend .lg-row { display:flex; align-items:center; gap:6px; margin:2.5px 0; cursor:pointer; }
.legend .lg-row:hover { color:var(--brand); }
.legend .sw { width:16px; height:4px; border-radius:2px; flex:0 0 auto; }
.legend .tl { font-size:11px; color:var(--brand); font-weight:700; margin-bottom:4px; display:flex; align-items:center; justify-content:space-between; }
.legend .lg-n { font-size:9.5px; color:#bbb; }
.legend .tile-sw { margin-top:6px; padding-top:6px; border-top:1px dashed #eee; font-size:10.5px; }
.legend .tile-sw span { cursor:pointer; margin-right:8px; color:#888; }
.legend .tile-sw span.on { color:var(--brand); font-weight:700; }
#hover { position:fixed; z-index:900; display:none; max-width:280px; background:#fff;
         border:1px solid #ddd; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.15);
         padding:10px 12px; font-size:12px; color:#444; pointer-events:none; }
#hover .h-day { display:inline-block; background:var(--brand); color:#fff; font-size:10px;
                font-weight:700; border-radius:4px; padding:1px 6px; margin-bottom:4px; }
#hover .h-name { font-size:13.5px; font-weight:700; color:#222; margin-bottom:3px; }
#hover .h-view { line-height:1.5; color:#555; }
#hover .h-meta { margin-top:5px; line-height:1.6; color:var(--warm); font-size:11px; border-top:1px dashed #eee; padding-top:4px; }

/* 建议箱 */
.sug-wrap { padding:12px; }
.sug-form { background:#fdfaf3; border:1px solid #f0e8d5; border-radius:10px; padding:12px; margin-bottom:12px; }
.sug-form h4 { font-size:13px; color:var(--warm); margin-bottom:8px; }
.sug-form input, .sug-form textarea, .sug-form select { width:100%; border:1px solid #e0dccf;
  border-radius:6px; padding:7px 9px; font-size:13px; font-family:inherit; margin-bottom:8px; background:#fff; }
.sug-form textarea { height:62px; resize:vertical; }
.sug-note { font-size:10.5px; color:#aaa; margin-top:4px; line-height:1.5; }
.sug-item { border:1px solid #eee; border-radius:8px; padding:8px 10px; margin-bottom:8px; font-size:12px; }
.sug-item .s-head { display:flex; gap:6px; align-items:center; font-size:11px; color:#999; }
.sug-item .s-text { margin-top:4px; color:#333; line-height:1.5; white-space:pre-wrap; }
.sug-item .s-status { margin-left:auto; font-size:10px; }
.s-badge { padding:1px 6px; border-radius:4px; font-size:10px; }
.st-pending { background:#fff3cd; color:#856404; } .st-adopted { background:#d4edda; color:#155724; }
.st-discarded { background:#f8d7da; color:#721c24; }
.leaflet-popup-content { font-size:12px; line-height:1.55; }
.pop-day { display:inline-block; background:var(--brand); color:#fff; font-size:10px; font-weight:700;
           border-radius:4px; padding:1px 6px; }
.pop-name { font-size:14px; font-weight:700; color:#222; margin:4px 0 2px; }
.pop-view { color:#555; }
.pop-meta { margin-top:5px; color:var(--warm); font-size:11px; border-top:1px dashed #eee; padding-top:4px; }

/* 游记页(手机优先) */
.jw { max-width:640px; margin:0 auto; padding:0 12px 30px; }
.jfilter { display:flex; gap:6px; overflow-x:auto; padding:10px 0 6px; -webkit-overflow-scrolling:touch; }
.jfilter .chip { flex:0 0 auto; font-size:12px; padding:5px 12px; border-radius:20px; background:#fff;
                 border:1px solid #ddd; color:#666; cursor:pointer; }
.jfilter .chip.on { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; }
.jcard { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
         margin:12px 0; box-shadow:0 1px 4px rgba(0,0,0,.03); cursor:pointer; }
.jcard .jc-top { padding:10px 13px 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.jcard .jc-title { font-size:15.5px; font-weight:700; color:#222; flex:1 0 100%; margin:4px 0 2px; }
.jcard .jc-ex { font-size:13px; color:#666; line-height:1.6; padding:0 13px 4px;
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.jcard .jc-date { font-size:11px; color:var(--sub); margin-left:auto; }
.jcover { position:relative; width:100%; aspect-ratio:16/9; background:#eee; overflow:hidden; }
.jcover img { width:100%; height:100%; object-fit:cover; display:block; }
.jcover video { width:100%; height:100%; object-fit:cover; }
.jcover .jv-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
                   font-size:44px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.jgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.jgrid img, .jgrid .jcell { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#eee; }
.jc-foot { display:flex; gap:6px; align-items:center; padding:8px 13px; font-size:11px; color:var(--sub); }
.jc-tags span { margin-right:6px; }

/* 游记详情 */
.jdetail { position:fixed; inset:0; z-index:4000; background:#111; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.jd-inner { max-width:720px; margin:0 auto; background:#fff; min-height:100%; padding-bottom:40px; }
.jd-x { position:fixed; top:8px; right:10px; z-index:4100; width:36px; height:36px; border-radius:50%;
        background:rgba(0,0,0,.45); color:#fff; font-size:20px; border:none; cursor:pointer; }
.jd-img { width:100%; display:block; background:#000; }
.jd-body { padding:16px; }
.jd-title { font-size:20px; font-weight:800; color:#111; margin:8px 0 4px; }
.jd-date { font-size:12px; color:var(--sub); }
.jd-text { font-size:15px; line-height:1.9; color:#333; margin-top:10px; word-break:break-word; }
.jd-text p { margin:8px 0; }

/* 管理后台 */
.admin { max-width:760px; margin:0 auto; padding:0 10px 60px; }
.atabs { position:sticky; top:52px; z-index:90; display:flex; background:#fff; border-bottom:1px solid var(--line);
         padding:0 6px; overflow-x:auto; }
.atabs .at { flex:0 0 auto; font-size:13.5px; padding:11px 14px; color:#666; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.atabs .at.on { color:var(--brand); border-bottom-color:var(--brand); font-weight:700; }
.asec { padding:14px 0; }
.day-edit { background:#fff; border:1px solid var(--line); border-radius:12px; margin:8px 0; overflow:hidden; }
.day-edit .de-h { display:flex; align-items:center; gap:6px; padding:9px 12px; cursor:pointer; background:#fffdf8; }
.day-edit.open .de-h { background:#fdf0f4; }
.de-body { display:none; padding:6px 12px 12px; border-top:1px dashed #eee; }
.day-edit.open .de-body { display:block; }
.de-body .form label { margin:10px 0 4px; font-size:12px; }
.de-body .form input, .de-body .form select { padding:7px 9px; font-size:14px; }
.upz { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.upz .up { position:relative; border-radius:8px; overflow:hidden; background:#eee; }
.upz img, .upz video { width:100%; height:82px; object-fit:cover; display:block; }
.upz .up .x { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
              background:rgba(0,0,0,.55); color:#fff; border:none; font-size:12px; line-height:20px; cursor:pointer; }
.media-add { border:1.5px dashed #ddd; border-radius:10px; min-height:90px; display:flex; align-items:center;
             justify-content:center; color:#bbb; font-size:13px; cursor:pointer; background:#fafafa; }
.media-add.on { border-color:var(--brand); background:#fdf0f4; color:var(--brand); }
.upbar { height:4px; background:#eee; border-radius:2px; margin-top:8px; overflow:hidden; }
.upbar i { display:block; height:100%; background:var(--brand2); width:0; transition:width .15s; }

/* 轨迹列表 */
.track-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; margin:6px 0; background:#fff; }
.track-item .sw { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }

/* 地图页移动端 */
@media (max-width:768px){
  #map { right:0; bottom:44%; }
  #mhdr { right:0; top:auto; bottom:44%; min-height:44px; padding:4px 8px; }
  #mhdr .logo { font-size:12.5px; } #mhdr .sub { display:none; }
  #panel { top:auto; height:44%; width:100%; border-left:none; border-top:1px solid var(--line); }
  .legend { bottom:45%; left:8px; max-width:76vw; }
  #hover { display:none !important; }
}