:root { --chrome:#f3f1ec; --panel:#fbfaf7; --line:#dedbd3; --ink:#282a28; --muted:#767871; --accent:#d65735; --map:#27312c; --shadow:0 8px 28px rgba(35,37,34,.16); }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; font-family:"Segoe UI","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--chrome); }
button, select { font:inherit; }
button { color:inherit; }
.topbar { height:64px; display:flex; align-items:center; gap:12px; padding:0 18px; background:var(--panel); border-bottom:1px solid var(--line); position:relative; z-index:1001; }
.topbar h1 { margin:0; font-size:17px; line-height:1.25; letter-spacing:.02em; }
.topbar p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.brand-mark { width:20px; height:20px; border:2px solid var(--accent); transform:rotate(45deg); position:relative; }
.brand-mark:after { content:""; position:absolute; inset:4px; background:var(--accent); }
.connection { margin-left:auto; font-size:12px; color:#59705e; }
.connection:before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#62856b; }
.icon-button, .text-button { border:0; background:transparent; cursor:pointer; }
.icon-button { display:none; font-size:20px; padding:7px; }
.text-button { color:var(--accent); font-size:12px; }
.sidebar-actions { display:flex; align-items:center; gap:8px; }
.sidebar-close,.mobile-map-button,.sidebar-backdrop { display:none; }
.workspace { height:calc(100% - 64px); display:flex; min-height:0; }
.sidebar { width:310px; flex:none; overflow:auto; background:var(--panel); border-right:1px solid var(--line); transition:margin .2s ease; }
.sidebar-heading { display:flex; justify-content:space-between; align-items:center; padding:22px 20px 14px; position:sticky; top:0; background:rgba(251,250,247,.96); z-index:2; }
.sidebar-heading h2 { font-size:14px; margin:0 0 4px; }
.sidebar-heading span { color:var(--muted); font-size:11px; }
.parcel { border-top:1px solid var(--line); }
.parcel-toggle { width:100%; display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:5px; text-align:left; border:0; background:transparent; padding:14px 18px; cursor:pointer; }
.parcel-toggle:hover { background:#f4f2ed; }
.parcel-name { font-weight:600; font-size:13px; }
.parcel-chevron { font-size:22px; color:var(--muted); transition:transform .2s; }
.parcel.open .parcel-chevron { transform:rotate(90deg); }
.layer-total { color:var(--muted); font-size:11px; }
.parcel-content { display:none; padding:2px 20px 18px 41px; }
.parcel.open .parcel-content { display:block; }
.layer-group { margin:8px 0 16px; }
.layer-group h3, .field-control>span { display:block; margin:0 0 8px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.layer-row { display:flex; align-items:center; gap:9px; min-height:31px; font-size:12px; cursor:pointer; }
.layer-row input { accent-color:var(--accent); }
.layer-empty { color:#aaa89f; font-size:12px; padding:5px 0; }
.field-control select { width:100%; height:34px; padding:0 9px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:6px; }
.field-control small { display:block; margin-top:7px; color:#96978f; font-size:10px; line-height:1.45; }
.map-shell { position:relative; flex:1; min-width:0; background:var(--map); }
#map { position:absolute; inset:0 0 27px; background:var(--map); }
.leaflet-control-zoom a { color:var(--ink)!important; }
.map-toolbar { position:absolute; z-index:500; top:12px; right:12px; display:flex; gap:6px; }
.map-toolbar button { width:34px; height:34px; border:1px solid rgba(255,255,255,.35); border-radius:6px; color:white; background:rgba(35,39,36,.82); cursor:pointer; box-shadow:var(--shadow); font-size:18px; }
.feature-panel { position:absolute; z-index:500; right:12px; top:58px; width:min(310px,calc(100% - 24px)); max-height:55%; overflow:auto; padding:15px; border-radius:8px; background:rgba(251,250,247,.97); box-shadow:var(--shadow); }
.feature-title { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:10px; }
.feature-title button { border:0; background:transparent; cursor:pointer; font-size:18px; }
.feature-panel dl { display:grid; grid-template-columns:minmax(80px,1fr) 1.5fr; gap:0; margin:8px 0 0; font-size:12px; }
.feature-panel dt,.feature-panel dd { margin:0; padding:7px 2px; border-bottom:1px solid #ebe8e1; overflow-wrap:anywhere; }
.feature-panel dt { color:var(--muted); }
.statusbar { position:absolute; inset:auto 0 0; height:27px; display:flex; justify-content:flex-end; align-items:center; gap:25px; padding:0 14px; background:#272c29; color:#c7cbc7; font:11px Consolas,monospace; }
.empty { margin:15px 20px; padding:24px 10px; border-top:1px solid var(--line); color:var(--muted); text-align:center; }
.empty strong,.empty span { display:block; }
.empty strong { color:var(--ink); font-size:13px; margin-bottom:7px; }
.empty span { font-size:11px; line-height:1.6; }
.leaflet-tooltip.map-label { padding:2px 4px; border:0; border-radius:3px; color:#fff; background:rgba(30,35,31,.78); box-shadow:none; font-size:10px; font-weight:600; line-height:1.25; white-space:nowrap; }
.leaflet-tooltip.map-label:before { display:none; }
@media (max-width:760px) {
  html,body { height:100dvh; overflow:hidden; }
  .topbar { height:56px; padding:env(safe-area-inset-top) 12px 0; gap:10px; }
  .topbar h1 { font-size:15px; white-space:nowrap; }
  .topbar p,.connection { display:none; }
  .brand-mark { width:17px; height:17px; }
  .icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:7px; font-size:22px; }
  .icon-button:active { background:#ece9e2; }
  .workspace { height:calc(100dvh - 56px); }
  .sidebar { position:fixed; z-index:1200; top:56px; bottom:0; left:0; width:min(88vw,340px); padding-bottom:calc(72px + env(safe-area-inset-bottom)); border-right:0; box-shadow:12px 0 36px rgba(20,25,21,.22); transform:translateX(0); transition:transform .22s ease; overscroll-behavior:contain; }
  .sidebar.collapsed { margin-left:0; transform:translateX(-105%); box-shadow:none; }
  .sidebar-heading { padding:16px 16px 12px; }
  .sidebar-close { display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:7px; background:#efede7; font-size:22px; cursor:pointer; }
  .sidebar-backdrop { display:block; position:fixed; z-index:1100; inset:56px 0 0; border:0; background:rgba(18,23,20,.34); opacity:1; transition:opacity .22s; }
  .sidebar.collapsed + .sidebar-backdrop { pointer-events:none; opacity:0; }
  .parcel-toggle { min-height:50px; padding:13px 16px; }
  .parcel-content { padding:3px 16px 20px 38px; }
  .layer-row { min-height:44px; font-size:13px; }
  .layer-row input { width:18px; height:18px; }
  .field-control select { height:44px; font-size:14px; }
  .mobile-map-button { display:block; position:fixed; z-index:3; left:16px; bottom:calc(14px + env(safe-area-inset-bottom)); width:calc(min(88vw,340px) - 32px); height:46px; border:0; border-radius:8px; color:white; background:var(--accent); box-shadow:0 5px 16px rgba(214,87,53,.28); font-weight:600; }
  #map { inset:0 0 calc(25px + env(safe-area-inset-bottom)); }
  .leaflet-control-zoom a { width:42px!important; height:42px!important; line-height:42px!important; font-size:22px!important; }
  .leaflet-control-scale { margin-bottom:12px!important; }
  .map-toolbar { top:10px; right:10px; gap:8px; }
  .map-toolbar button { width:44px; height:44px; font-size:20px; }
  .feature-panel { position:absolute; top:auto; right:8px; bottom:calc(37px + env(safe-area-inset-bottom)); width:calc(100% - 16px); max-height:min(46%,360px); padding:15px 16px calc(15px + env(safe-area-inset-bottom)); border-radius:12px 12px 8px 8px; }
  .feature-title button { width:40px; height:40px; font-size:22px; }
  .feature-panel dl { font-size:13px; }
  .feature-panel dt,.feature-panel dd { padding:9px 2px; }
  .statusbar { height:calc(25px + env(safe-area-inset-bottom)); padding:0 9px env(safe-area-inset-bottom); justify-content:flex-end; gap:0; font-size:10px; }
  #coordinates { display:none; }
  .leaflet-control-attribution { max-width:70vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

@media (max-width:380px), (max-height:680px) {
  .topbar { height:52px; }
  .workspace { height:calc(100dvh - 52px); }
  .sidebar { top:52px; }
  .sidebar-backdrop { inset:52px 0 0; }
  .feature-panel { max-height:42%; }
}