:root  {
  --bg:#140805;
  --panel:#261008;
  --panel2:#37180d;
  --rust:#a94323;
  --rust2:#c86134;

  --gold:#d8a45b;
  --sand:#f4d39a;
  --cream:#fff0c9;
  --muted:rgba(255,240,201,.72);

  --green:#a6d66f;
  --line:rgba(255,240,201,.25);

}


@font-face  {
  font-family:  'Mars';
  src:  url('../font/Mars.ttf')  format('truetype');
  font-weight:  400;
  font-style:  normal;
}


*{box-sizing:border-box}


body{
  margin:0;
  min-height:100vh;
  color:var(--cream);
  font-family:Inter,system-ui,Segoe  UI,Arial,sans-serif;
  background:#130805;

}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:url("../imgs/mars-main-bg.webp");
  background-size:cover;
  background-position:center;
  filter:brightness(.45)  saturate(1.1)  contrast(1.05);

}

body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;

  background:linear-gradient(180deg,rgba(20,8,5,.48),rgba(20,8,5,.9)),  radial-gradient(circle  at  50%  0%,rgba(200,97,52,.26),transparent  45%);

}

header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(20,8,5,.84);
  border-bottom:1px  solid  var(--line);
  backdrop-filter:blur(10px)
}

.nav{max-width:1420px;
margin:auto;
padding:16px  24px;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px}


.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: Mars, Georgia;
  font-weight: 900;
  letter-spacing: 2px;
}


.seal{
  width:38px;
  height:38px;
}


.navlinks{display:flex;
gap:9px;
align-items:center;
flex-wrap:wrap}

a,button,input,select{font:inherit}

a,button,select{color:var(--cream);
text-decoration:none;
border:1px  solid  var(--line);
background:rgba(55,24,13,.74);
border-radius:999px;
padding:10px  13px;
cursor:pointer}

button.primary,.primary{background:linear-gradient(135deg,var(--sand),var(--rust2));
color:#1a0803;
border:0;
font-weight:900}

.wrap{max-width:1420px;
margin:0  auto;
padding:28px  24px  50px}

.card{background:linear-gradient(180deg,rgba(55,24,13,.94),rgba(28,10,5,.94));
border:1px  solid  var(--line);
border-radius:24px;
box-shadow:0  28px  70px  rgba(0,0,0,.42);
overflow:hidden}

.panel{padding:24px}

h1,h2,h3{font-family:Georgia,'Times  New  Roman',serif;
margin:0;
line-height:1.05}

h1{font-size:clamp(38px,5vw,68px);
letter-spacing:-1.2px}

h2{font-size:30px}

.lede{color:var(--muted);
font-size:17px;
line-height:1.6}

.search-top{display:grid;
grid-template-columns:1fr  auto;
gap:14px;
align-items:end;
margin-bottom:24px}

.searchbox{padding:20px;
border-radius:22px;
background:rgba(38,16,8,.92);
border:1px  solid  var(--line)}

.searchbar{display:flex;
gap:10px;
margin-top:12px}

input{
  width:100%;
  border:1px  solid  var(--line);
  background:rgba(20,8,5,.72);
  color:var(--cream);
  border-radius:14px;
  padding:14px;
  outline:none;
}

.map-card{
  min-height:50vh;
  display:flex;
  flex-direction:column;
  margin-bottom:28px;
}

.map-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:14px  16px;
  border-bottom:1px  solid  var(--line);
  background:rgba(20,8,5,.45);
}

.map-title  strong{
  display:block;
  font-family:Georgia,serif;
  font-size:21px;
}

.map-title  span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}

.map-shell{
  position:relative;
  flex:1;
  min-height:50vh;
  overflow:hidden;
  background:#180b06;
  touch-action: pan-y;
}

.map-shell:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle  at  center,rgba(255,211,154,.08),rgba(20,8,5,.18)  62%,rgba(20,8,5,.62));
  pointer-events:none;
  z-index:1;
}

.map-stage{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  cursor:grab;
  touch-action: pan-y;
}

.map-stage.static{cursor:pointer}

.map-stage.dragging{cursor:grabbing}

#mapSvg{
  width:100%;
  height:100%;
  max-height:1500px;
  transition:transform  .08s  linear;
  filter:drop-shadow(0  25px  35px  rgba(0,0,0,.44));
  transform-origin:center  center;
}

.map-controls{position:absolute;
right:16px;
top:16px;
z-index:5;
display:flex;
flex-direction:column;
gap:8px}

.map-controls  button{width:42px;
height:42px;
border-radius:12px;
padding:0;
font-size:22px;
font-weight:900;
background:rgba(20,8,5,.76)}

.legend{position:absolute;
left:16px;
bottom:16px;
z-index:4;
max-width:360px;
background:rgba(20,8,5,.72);
border:1px  solid  var(--line);
border-radius:18px;
padding:12px;
color:var(--muted);
font-size:13px;
line-height:1.45;
backdrop-filter:blur(8px)}

.listings{margin-top:28px}

.listing-grid{display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:16px}

.listing{border:1px  solid  rgba(255,240,201,.18);
border-radius:20px;
overflow:hidden;
background:rgba(35,16,9,.9);
text-decoration:none;
color:var(--cream)}

.listing-art{height:170px;
background:#1a0a05;
position:relative;
overflow:hidden}

.listing-art  svg{position:absolute;
inset:0;
width:100%;
height:100%}

.listing-body{padding:14px}

.listing-body  strong{display:block;
font-size:17px}
  .listing-body  span{display:block;
color:var(--muted);
font-size:13px;
margin-top:6px}

.sector-badge{display:inline-flex;
margin-top:10px;
padding:6px  9px;
border-radius:999px;
background:rgba(216,164,91,.18);
border:1px  solid  rgba(255,240,201,.22);
color:var(--cream);
font-size:12px;
font-weight:800}

.detail-grid{display:grid;
grid-template-columns:360px  1fr;
gap:0;
height:calc(100vh  -  70px);
min-height:850px}

.left-list{border-right:1px  solid  var(--line);
background:rgba(24,9,4,.88);
overflow:auto;
padding:18px}

.left-list  .listing-grid{grid-template-columns:1fr;
margin-top:14px}

.left-list  .listing-art{height:120px}

.map-detail-card{height:100%;
min-height:850px;
border-radius:0;
margin:0;
border-left:0;
border-right:0}

.row{display:grid;
grid-template-columns:125px  1fr;
gap:12px;
padding:12px  0;
border-bottom:1px  solid  rgba(255,240,201,.12)}

.k{color:var(--muted);
font-size:12px;
text-transform:uppercase;
letter-spacing:.8px}
  .v{font-weight:850}

.status{display:inline-flex;
gap:8px;
align-items:center;
padding:8px  12px;
border-radius:999px;
background:rgba(166,214,111,.14);
border:1px  solid  rgba(166,214,111,.45);
color:#eaffdd;
font-weight:850;
font-size:13px;
letter-spacing:.6px;
margin-top:14px}

.dot{width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0  0  12px  var(--green)}

.notice{margin-top:18px;
padding:14px;
border-radius:16px;
background:rgba(169,67,35,.20);
border:1px  solid  rgba(216,164,91,.24);
color:var(--muted);
font-size:13px;
line-height:1.5}

.modal-backdrop{position:fixed;
inset:0;
z-index:80;
background:rgba(5,2,1,.68);
backdrop-filter:blur(3px);
display:none;
align-items:center;
justify-content:center;
padding:24px}

.modal-backdrop.open{display:flex}

.parcel-modal{width:min(560px,96vw);
background:linear-gradient(180deg,rgba(55,24,13,.98),rgba(23,8,4,.98));
border:1px  solid  rgba(255,240,201,.35);
border-radius:26px;
box-shadow:0  35px  100px  rgba(0,0,0,.7);
padding:24px}

.modal-close{float:right;
border-radius:12px;
padding:6px  10px}

@media(max-width:1100px){.listing-grid{grid-template-columns:repeat(2,1fr)}
.detail-grid{grid-template-columns:1fr;
height:auto}
.left-list{border-right:0;
border-bottom:1px  solid  var(--line)}
.left-list  .listing-grid{grid-template-columns:repeat(2,1fr)}
.map-detail-card{height:900px;
border-radius:24px}
}

@media(max-width:650px){.listing-grid,.left-list  .listing-grid{grid-template-columns:1fr}
.searchbar,.search-top{grid-template-columns:1fr;
flex-direction:column}
}


#mapSvg  .mars-bg{opacity:1}

#mapSvg  .ring-line{fill:none;
stroke:rgba(255,240,201,.42);
stroke-width:2.4;
stroke-dasharray:11  12}

#mapSvg  .corridor-wide{stroke:rgba(255,224,160,.24);
stroke-width:22;
stroke-linecap:round}

#mapSvg  .corridor-line{stroke:rgba(255,240,201,.72);
stroke-width:3;
stroke-dasharray:14  12;
stroke-linecap:round}

#mapSvg  .sector{stroke:rgba(255,240,201,.92);
stroke-width:4;
cursor:pointer}

#mapSvg  .sector:hover{stroke:#fff0c9;
stroke-width:6}

#mapSvg  .sector.active{stroke:#fff0c9;
stroke-width:7;
filter:url(#glow)}

#mapSvg  .sector.FND{fill:rgba(222,162,71,.36)}

#mapSvg  .sector.CUR{fill:rgba(199,92,82,.34)}

#mapSvg  .sector.HRZ{fill:rgba(91,173,183,.32)}

#mapSvg  .sector.PRV{fill:rgba(76,134,190,.32)}

#mapSvg  .sector.SMT{fill:rgba(132,177,103,.34)}

#mapSvg  .spaceport{fill:rgba(70,42,28,.52);
stroke:rgba(255,240,201,.54);
stroke-width:2}

#mapSvg  .parcel-hit{fill:transparent;
stroke:transparent;
pointer-events:all;
cursor:pointer}

#mapSvg  .parcel{fill:#efc987;
stroke:#321409;
stroke-width:.72;
pointer-events:none}

#mapSvg  .parcel-lot:hover  .parcel{fill:#ffe3a6}

#mapSvg  .parcel-lot.selected  .parcel{fill:#a6d66f;
stroke:#fff0c9;
stroke-width:3;
filter:url(#glow)}

#mapSvg  .parcel-label{fill:#1b0903;
font-family:Arial,sans-serif;
font-weight:900;
font-size:10.5px;
pointer-events:none}

#mapSvg  .dome{fill:#e0b36d;
stroke:#fff0c9;
stroke-width:3.5}

#mapSvg  .core-link{stroke:#fff0c9;
stroke-width:2;
opacity:.65}

#mapSvg  .core-mid{fill:#562717;
stroke:#fff0c9;
stroke-width:2}

#mapSvg  .plaza{fill:#6d301a;
stroke:#fff0c9;
stroke-width:2}

#mapSvg  .svg-label{fill:#fff0c9;
font-family:Georgia,serif;
letter-spacing:1px;
pointer-events:none}

.map-stage.static  #mapSvg,
.map-stage.static  #mapSvg  *{pointer-events:none}