:root{
  --panel:#101612ee;
  --line:#2b342f;
  --text:#f5f8f3;
  --muted:#8e9990;
  --lime:#c7ff4d;
  --ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#101512;color:var(--text);overflow:hidden;font-family:var(--ui-font);font-synthesis:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font:inherit}
.app-shell,.map-stage{height:100%;width:100%}
.map-stage{position:relative;overflow:hidden;background:linear-gradient(#b8c7c4 0%,#aabdb8 45%,#8fa79d 100%);cursor:grab;user-select:none;touch-action:none}
.map-stage.dragging{cursor:grabbing}
.sky-glow{position:absolute;inset:0;background:radial-gradient(circle at 54% 31%,#e4ece9b0 0,transparent 42%);pointer-events:none}

/* Die Kamera und die Straße bleiben absolut stabil. Nur Inhalte innerhalb der Straße werden recycelt. */
.scene{position:absolute;inset:0;perspective:1220px;perspective-origin:55% 47%;overflow:hidden;pointer-events:auto}
.webgl-notice{position:fixed;z-index:100;left:50%;top:50%;width:min(520px,calc(100% - 48px));transform:translate(-50%,-50%);padding:26px 28px;border:1px solid #34423a;border-radius:16px;background:#101713f2;color:#f3f7f2;box-shadow:0 24px 70px #1a272066;backdrop-filter:blur(16px);font-family:var(--ui-font);pointer-events:auto;user-select:text}
.webgl-notice h2{margin:8px 0 10px;font-size:25px;line-height:1.15;letter-spacing:-.02em}
.webgl-notice p{margin:0;color:#aeb9b1;font-size:14px;line-height:1.55}
.webgl-notice .webgl-notice-detail{margin-top:15px;padding-top:15px;border-top:1px solid #2d3832;color:#dce4dd}
.webgl-notice strong{color:var(--lime)}
.world{position:absolute;left:50%;top:58%;width:7200px;height:1180px;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.ground,.road-plane,.park-plane,.park-path,.road-edge,.lane-markings,.curb-markings{position:absolute;transform-style:preserve-3d;pointer-events:none}
.grass{left:0;top:0;width:7200px;height:1180px;background:linear-gradient(100deg,#6f8e67,#55724f);transform:translateZ(-4px);box-shadow:inset 0 30px 80px #0001}
.road-plane{left:0;top:320px;width:7200px;height:286px;background:linear-gradient(#26302d,#18211f);transform:translateZ(3px);box-shadow:0 12px 26px #0005}
.road-edge{left:0;width:7200px;height:12px;background:#3b4642}
.road-edge-far{top:320px;transform:translateZ(8px)}
.road-edge-near{top:594px;transform:translateZ(8px)}
.lane-markings{left:0;top:428px;width:7200px;height:7px;background:repeating-linear-gradient(90deg,transparent 0 48px,#d7ded9 48px 79px,transparent 79px 118px);opacity:.74;transform:translateZ(11px);will-change:background-position}
.curb-markings{left:0;top:587px;width:7200px;height:5px;background:repeating-linear-gradient(90deg,#d8dfda 0 6px,transparent 6px 61px);opacity:.9;transform:translateZ(12px);will-change:background-position}
.park-plane{left:0;top:642px;width:7200px;height:345px;background:#85a77b;border-top:18px solid #dfe5dc;border-bottom:18px solid #dfe5dc;transform:translateZ(1px)}
.park-path{left:0;top:779px;width:7200px;height:23px;background:#e5ddd1;transform:translateZ(8px)}

.infinite-layer{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.street-chunk{position:absolute;top:0;width:900px;height:100%;transform-style:preserve-3d;pointer-events:none;will-change:left}
.street-chunk .chunk-buildings,.street-chunk .chunk-plots,.street-chunk .chunk-trees{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}

.building3d{position:absolute;transform-style:preserve-3d;cursor:pointer;outline:none;pointer-events:auto}
.building3d .face{position:absolute;backface-visibility:hidden;border:1px solid #26312c}
.building3d .front{left:0;bottom:0;transform:translateZ(var(--d));background:var(--c);box-shadow:inset 0 0 0 1px #ffffff12,0 5px 10px #0002}
.building3d .back{left:0;bottom:0;transform:rotateY(180deg);background:var(--c-dark)}
.building3d .right{right:0;bottom:0;transform-origin:right center;transform:rotateY(90deg);background:var(--c-dark)}
.building3d .left{left:0;bottom:0;transform-origin:left center;transform:rotateY(-90deg);background:var(--c-mid)}
.building3d .top{left:0;top:0;transform-origin:center top;transform:rotateX(90deg);background:var(--c-light)}
.building3d .front::before{content:"";position:absolute;inset:10px 7px;background:repeating-linear-gradient(to bottom,transparent 0 19px,#dff0e31e 19px 21px,transparent 21px 28px)}
.building3d .logo-plate{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) translateZ(calc(var(--d) + 1px));min-width:25px;height:28px;padding:0 5px;background:#edf2ec;color:#172019;border:1px solid #d4dcd4;display:flex;align-items:center;justify-content:center;font-family:var(--ui-font);font-size:10px;line-height:1;font-weight:800;letter-spacing:0;white-space:nowrap;z-index:4;box-shadow:0 2px 8px #0002}
.building3d:hover,.building3d.selected{filter:drop-shadow(0 0 10px #c7ff4daa)}
.building3d:hover .front,.building3d.selected .front{outline:2px solid var(--lime)}

.plot3d{position:absolute;width:90px;height:67px;background:#8ca08f88;border:2px dashed #d3ddd4;transform:translateZ(8px);cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;color:#334238;font-family:var(--ui-font);font-size:9px;font-weight:800;letter-spacing:.06em}
.plot3d:hover,.plot3d.selected{border-color:var(--lime);background:#a3ba9d99;color:#162016}
.tree3d{position:absolute;width:7px;height:34px;background:#4b5a4c;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(-64deg) translateZ(17px)}
.tree3d::before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:#456b4b;left:50%;top:-12px;transform:translateX(-50%);border:1px solid #315138;box-shadow:0 6px 10px #0003}

.topbar{position:absolute;left:0;right:0;top:0;height:58px;display:flex;align-items:center;padding:0 20px;pointer-events:none;font-family:var(--ui-font)}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 18px #c7ff4d88;margin-right:10px}
.brand-name{font-size:11px;letter-spacing:.28em;font-weight:800;color:#152019aa}
.wallet-pill{position:absolute;left:50%;transform:translateX(-50%);top:13px;background:#16201bcc;color:#dfe8e0;border:1px solid #313e35;border-radius:9px;padding:7px 12px;font-size:12px;display:flex;gap:7px;align-items:center;box-shadow:0 10px 20px #0002;backdrop-filter:blur(10px)}
.wallet-pill .wallet-spark{color:var(--lime)}
.wallet-pill .divider{height:13px;width:1px;background:#465149;margin:0 2px}

.left-rail{position:absolute;left:12px;top:14px;bottom:14px;width:310px;display:flex;gap:10px;pointer-events:none;font-family:var(--ui-font)}
.panel{width:310px;max-height:calc(100vh - 28px);overflow:auto;background:linear-gradient(180deg,#0f1512f5,#121a15f2);border:1px solid #2d3731;border-radius:14px;box-shadow:0 24px 70px #0007;backdrop-filter:blur(14px);padding:15px;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#435047 transparent;transition:transform .25s ease,opacity .25s ease}
.panel.closed{transform:translateX(-340px);opacity:0;pointer-events:none}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.panel-close,.mobile-selection-button{display:none}
.eyebrow{font-size:10px;letter-spacing:.2em;color:#9ba79f;font-weight:700}
.icon-btn{width:28px;height:28px;border:0;border-radius:8px;background:#1b241f;color:#93a098;font-size:21px;cursor:pointer}
.building-heading{display:grid;grid-template-columns:62px 1fr;gap:13px;align-items:start}
.logo-card{width:62px;height:62px;border-radius:10px;background:#eef2ed;color:#121613;display:flex;align-items:center;justify-content:center;font-weight:900;font-style:italic;font-size:20px;border:1px solid #cfd8ce}
.logo-card.has-image{padding:0;overflow:hidden;font-style:normal;background:#eef2ed}
.logo-card.has-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.building-heading h1{margin:0 0 7px;font-size:22px;line-height:1.06;font-weight:800;letter-spacing:-.02em}
.building-heading p{margin:0;color:#96a097;font-size:11px;line-height:1.45;font-weight:400}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metric-grid>div{padding:10px 0}.metric-grid>div:nth-child(odd){border-right:1px solid var(--line)}.metric-grid>div:nth-child(even){padding-left:13px}
.metric-grid span,.address-block small{display:block;color:#727f76;font-size:8px;letter-spacing:.14em;margin-bottom:3px;font-weight:600}
.metric-grid strong{font-size:12px;font-weight:700}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:7px;letter-spacing:.08em;background:#1a231e;border:1px solid #303b34;border-radius:5px;padding:5px 7px;color:#adb7af;font-weight:600}
.primary-action{margin-top:14px;width:100%;border:0;background:linear-gradient(180deg,#d0ff5d,#bdf643);color:#10180f;font-weight:800;border-radius:7px;padding:12px;cursor:pointer}
.secondary-actions{display:flex;margin-top:7px}.secondary-actions button{flex:1;background:none;border:0;color:#768279;font-size:9px;padding:6px}.secondary-actions button+button{border-left:1px solid #2c3630}
.address-block{display:flex;align-items:center;gap:10px;margin:10px 0;border-top:1px solid #273129;padding-top:12px}.pin{color:var(--lime);font-size:12px}.address-block strong{font-size:11px;font-weight:700}
.buy-strip{width:100%;display:flex;align-items:center;justify-content:space-between;background:#141c17;border:1px solid #2b352f;color:#d2ddd4;border-radius:7px;padding:12px 10px;font-size:9px;letter-spacing:.05em;cursor:pointer;font-weight:600}
.floor-list{margin-top:8px}.floor{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 2px;border-bottom:1px solid #273129;color:#77837a;font-size:9px}.floor strong{color:#e3ebe4;font-weight:700}
.mini-stack{pointer-events:auto;display:flex;flex-direction:column;gap:6px;margin-top:54px}.mini{width:36px;height:36px;border:0;border-radius:8px;background:#16201bcc;color:#cbd5cd;cursor:pointer}.mini.active{background:var(--lime);color:#121a12}
.right-tools{position:absolute;right:13px;top:15px;background:#16201be8;border:1px solid #314037;border-radius:10px;overflow:hidden;box-shadow:0 12px 28px #0003;font-family:var(--ui-font)}
.right-tools button{display:block;width:40px;height:43px;border:0;border-bottom:1px solid #2d3932;background:transparent;color:#d6dfd8;cursor:pointer}.right-tools button:last-child{border-bottom:0}
.zoom-controls{position:absolute;right:14px;bottom:15px;display:grid;gap:7px}.zoom-controls button{width:40px;height:40px;border:1px solid #314037;border-radius:8px;background:#16201be8;color:#eef4ef;font-size:21px;cursor:pointer}.zoom-controls .reset{font-size:15px}
.hint{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);padding:8px 12px;border-radius:8px;background:#142019bb;border:1px solid #2b3a31;color:#cfddd1;font-size:10px;backdrop-filter:blur(8px);transition:opacity .4s;pointer-events:none;font-family:var(--ui-font)}.hint.hide{opacity:0}

@media(max-width:780px){.left-rail{width:280px}.panel{width:280px}.right-tools{display:none}.hint{display:none}.scene{perspective-origin:60% 47%}}
@media(max-width:780px){
  .left-rail{position:fixed;z-index:40;left:10px;right:10px;top:auto;bottom:66px;width:auto;height:auto;display:block}
  .panel{width:100%;max-height:min(62dvh,520px);padding:15px;border-radius:17px;background:linear-gradient(180deg,#0f1512fc,#121a15fa);transform:translateY(0);transition:transform .25s ease,opacity .2s ease}
  .panel.closed{transform:translateY(calc(100% + 90px));opacity:0;pointer-events:none}
  .panel-head{margin-bottom:10px}
  .panel-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #36433b;border-radius:9px;background:#1a241e;color:#e9efea;font-size:24px;line-height:1;cursor:pointer}
  .building-heading{grid-template-columns:52px 1fr;gap:11px}.logo-card{width:52px;height:52px}.building-heading h1{font-size:19px}.building-heading p{font-size:10px}
  .metric-grid{margin:14px 0 10px}.metric-grid>div{padding:8px 0}.ownership-note{margin:9px 0}.primary-action{margin-top:10px}.local-note{margin-top:12px}
  .mobile-selection-button{position:fixed;z-index:35;left:12px;bottom:61px;max-width:calc(100% - 84px);display:flex;align-items:center;gap:9px;border:1px solid #405047;border-radius:11px;background:#132019ed;color:#f1f5f1;padding:9px 12px;box-shadow:0 10px 28px #0005;backdrop-filter:blur(12px);font-family:var(--ui-font);cursor:pointer}
  .mobile-selection-button span{color:var(--lime);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.mobile-selection-button strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
  body.mobile-panel-open .zoom-controls,body.mobile-panel-open .city-legal-links{opacity:0;pointer-events:none}
  .zoom-controls,.city-legal-links{transition:opacity .18s ease}
}
@media(max-width:780px){.webgl-notice{width:calc(100% - 28px);padding:20px}.webgl-notice h2{font-size:20px}}

/* --- Infinite Street Engine v2: road in foreground, plots/buildings behind it --- */
.back-sidewalk{position:absolute;left:0;top:296px;width:7200px;height:24px;background:#d9ded8;border-top:2px solid #aeb8b0;border-bottom:2px solid #89958d;transform:translateZ(5px);pointer-events:none}
.chunk-buildings,.chunk-plots{z-index:2}
.road-plane,.road-edge,.lane-markings,.curb-markings,.traffic-layer{z-index:5}
.park-plane,.park-path,.chunk-trees{z-index:1}

/* Freie Grundstücke liegen sichtbar hinter dem Gehweg / der Straße. */
.plot3d{width:94px;height:72px;background:linear-gradient(145deg,#8ca785aa,#74956daa);border:2px dashed #e1e8df;box-shadow:inset 0 0 0 4px #ffffff13,0 5px 10px #0002;transform:translateZ(9px);color:#26372b}
.plot3d::before{content:"";position:absolute;inset:7px;border:1px solid #ffffff2d;pointer-events:none}
.plot3d:hover,.plot3d.selected{border-color:var(--lime);background:linear-gradient(145deg,#a7c69daa,#8fb485cc);box-shadow:0 0 0 2px #c7ff4d55,0 7px 16px #0003;color:#142015}

/* Leichter Standfuß trennt Gebäude optisch vom Fahrbahnbereich. */
.building3d::after{content:"";position:absolute;left:-5px;right:-5px;bottom:-7px;height:9px;background:#67776b;border:1px solid #445149;transform:translateZ(2px);box-shadow:0 4px 7px #0003;pointer-events:none}

/* Dezent belebte Straße. Die Autos bewegen sich unabhängig vom Straßen-Scrollen. */
.traffic-layer{position:absolute;left:0;top:0;width:7200px;height:1180px;transform-style:preserve-3d;pointer-events:none}
.traffic-car{position:absolute;width:58px;height:27px;top:386px;border-radius:7px 10px 9px 7px;background:linear-gradient(180deg,color-mix(in srgb,var(--car-color) 85%,white),var(--car-color));border:1px solid #26332d;transform:translateZ(19px);box-shadow:0 7px 8px #0005;will-change:left;opacity:.96}
.traffic-car.near{top:510px}
.traffic-car.westbound{transform:translateZ(19px) rotate(180deg)}
.traffic-car::before{content:"";position:absolute;right:-5px;top:7px;width:7px;height:13px;border-radius:0 4px 4px 0;background:color-mix(in srgb,var(--car-color) 78%,black)}
.traffic-car::after{content:"";position:absolute;left:5px;top:5px;width:5px;height:7px;border-radius:3px;background:#f1e7b7;box-shadow:0 10px 0 #f1e7b7}
.car-cabin{position:absolute;left:19px;top:4px;width:24px;height:18px;border-radius:6px;background:linear-gradient(135deg,#aabcc0 0 42%,#657b80 43% 100%);border:1px solid #33484b}
.car-wheel{position:absolute;width:12px;height:4px;border-radius:3px;background:#111814;bottom:-3px}.wheel-a{left:8px}.wheel-b{right:8px}

@media (prefers-reduced-motion: reduce){.traffic-car{display:none}}

/* ============================================================
   Infinite Street Engine v3
   Saubere 2.5D-Gebaeude + echte CSS-3D-Fahrzeuge
   ============================================================ */

/* Gebaeude stehen senkrecht. Die Welt kippt die Strasse, das Gebaeude
   kompensiert diese Neigung und bekommt danach eine kontrollierte,
   konsistente 2.5D-Extrusion. */
.building3d{
  transform-origin:50% 100%;
  transform:rotateX(var(--counter-tilt)) translateZ(10px);
  filter:drop-shadow(10px 12px 9px #15201932);
}
.building3d .face{
  border:1px solid #243029;
  backface-visibility:visible;
}
.building3d .back,.building3d .left{display:none}
.building3d .front{
  left:0;top:0;bottom:auto;
  width:100%!important;height:100%!important;
  transform:none;
  background:linear-gradient(90deg,var(--c) 0 82%,var(--c-mid) 100%);
  box-shadow:inset 0 0 0 1px #ffffff16;
  z-index:3;
}
.building3d .front::before{
  inset:10px 7px;
  background:repeating-linear-gradient(to bottom,transparent 0 18px,#eef7ef22 18px 20px,transparent 20px 27px);
}
.building3d .right{
  display:block;
  left:100%;right:auto;top:0;bottom:auto;
  width:var(--side)!important;height:100%!important;
  transform:none;
  clip-path:polygon(0 var(--roof),100% 0,100% calc(100% - var(--roof)),0 100%);
  background:linear-gradient(90deg,var(--c-dark),#111815aa);
  z-index:2;
}
.building3d .top{
  display:block;
  left:0;top:calc(-1 * var(--roof));
  width:calc(100% + var(--side))!important;height:var(--roof)!important;
  transform:none;
  clip-path:polygon(var(--side) 0,100% 0,calc(100% - var(--side)) 100%,0 100%);
  background:linear-gradient(180deg,var(--c-light),var(--c));
  z-index:4;
}
.building3d .logo-plate{
  transform:translate(-50%,-50%);
  z-index:6;
  box-shadow:0 2px 7px #0003;
}
.building3d::after{
  left:-4px;right:calc(var(--side-neg) - 4px);bottom:-7px;height:8px;
  background:#53645a;
  border:1px solid #39473f;
  transform:none;
  box-shadow:7px 6px 8px #0003;
}
.building3d:hover,.building3d.selected{filter:drop-shadow(0 0 9px #c7ff4d77) drop-shadow(10px 12px 9px #15201932)}

/* Autos: Karosserie als echte 3D-Box auf der Strassenebene. Die Hauptflaeche
   ist das Dach/der obere Karosserieteil; ::before und ::after bilden die
   vertikalen Seiten. Dadurch entsteht bei der geneigten Welt sichtbar Hoehe. */
.traffic-layer{transform-style:preserve-3d}
.traffic-car{
  width:64px;height:30px;
  top:382px;
  border:0;border-radius:8px;
  background:linear-gradient(90deg,var(--car-mid) 0 8%,var(--car-color) 15% 82%,var(--car-light) 100%);
  transform-style:preserve-3d;
  transform:translateZ(17px);
  box-shadow:none;
  opacity:1;
  will-change:left;
}
.traffic-car.near{top:510px}
.traffic-car.westbound{transform:translateZ(17px) rotateZ(180deg)}
.traffic-car::before{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:12px;
  border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,var(--car-mid),var(--car-dark));
  transform-origin:50% 100%;
  transform:rotateX(90deg);
  border:1px solid #26312c;
}
.traffic-car::after{
  content:"";
  position:absolute;right:0;top:0;
  width:12px;height:100%;
  border-radius:0 5px 5px 0;
  background:linear-gradient(90deg,var(--car-mid),var(--car-dark));
  transform-origin:100% 50%;
  transform:rotateY(90deg);
  border:1px solid #26312c;
}
.car-cabin{
  position:absolute;
  left:20px;top:5px;width:28px;height:20px;
  border-radius:6px 7px 6px 5px;
  background:linear-gradient(110deg,#a8bbc0 0 38%,#5f777e 39% 71%,#8fa7ab 72% 100%);
  border:1px solid #31474b;
  transform-style:preserve-3d;
  transform:translateZ(9px);
  box-shadow:inset 0 0 0 1px #d9e6e655;
}
.car-cabin::before{
  content:"";
  position:absolute;left:0;bottom:0;width:100%;height:8px;
  background:#3f575d;
  transform-origin:50% 100%;
  transform:rotateX(90deg);
  border:1px solid #293d41;
}
.car-cabin::after{
  content:"";
  position:absolute;right:0;top:0;width:8px;height:100%;
  background:#51696f;
  transform-origin:100% 50%;
  transform:rotateY(90deg);
  border:1px solid #293d41;
}
.car-wheel{
  position:absolute;
  width:13px;height:6px;
  border-radius:3px;
  background:#101713;
  border:1px solid #263029;
  transform:translateZ(4px);
  z-index:5;
}
.wheel-a{left:8px;top:-4px}.wheel-b{right:8px;top:-4px}
.wheel-c{left:8px;bottom:-4px}.wheel-d{right:8px;bottom:-4px}
.traffic-car.eastbound .car-cabin::after{box-shadow:2px 0 0 #dce8e544 inset}
.traffic-car.eastbound{filter:drop-shadow(8px 8px 5px #0004)}
.traffic-car.westbound{filter:drop-shadow(-8px -8px 5px #0004)}

/* Auf kleinen Zoomstufen nicht zu filigran werden. */
@media(max-width:780px){
  .traffic-car{width:58px;height:28px}
  .car-cabin{left:18px;width:26px;height:18px}
}

/* V4: only the city renderer changes. UI rules above stay intact. */
.scene{perspective:none}
.scene canvas{display:block;width:100%;height:100%;outline:none}
.scene canvas:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}
/* V5: property forms and owner details, using the established V4 typography. */
[hidden]{display:none!important}
.ownership-note{font-size:11px;line-height:1.5;color:#a9b5ac;margin:12px 0}
.local-note{font-size:10px;line-height:1.5;color:#9daa9f;border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
.status-message{font-size:11px;line-height:1.5;color:var(--lime)}
dialog{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;background:#121a15;color:var(--text);border:1px solid #465546;border-radius:16px;padding:22px;box-shadow:0 28px 100px #0008;font-family:var(--ui-font)}
dialog::backdrop{background:#07120bbc;backdrop-filter:blur(4px)}
.dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:15px;margin-bottom:18px}
.dialog-heading h2{font-size:23px;line-height:1.2;margin:6px 0 0;letter-spacing:-.025em}
dialog label{display:block;font-size:12px;color:#d3ddd4;margin-top:15px}
dialog input,dialog select,dialog textarea{display:block;width:100%;border:1px solid #3b4a3f;border-radius:7px;background:#1c2820;color:#f5f8f3;font:inherit;padding:10px;margin-top:6px;outline:none}
dialog input:focus,dialog select:focus,dialog textarea:focus{border-color:var(--lime);box-shadow:0 0 0 2px #c7ff4d22}
dialog input[type=file]{font-size:11px}dialog input::file-selector-button{border:0;padding:6px;border-radius:4px;margin-right:8px;background:#344936;color:#eef4ee;cursor:pointer}
dialog input::placeholder,dialog textarea::placeholder{color:#809084}
.form-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}.price-card{background:#253424;border-radius:8px;padding:11px}.price-card span,.price-card small{display:block;font-size:10px;color:#aabcaa}.price-card strong{display:block;font-size:23px;color:var(--lime);margin:3px 0}
.optional{color:#91a093;font-size:10px;margin-left:5px}.field-hint{display:block;color:#94a398;font-size:10px;line-height:1.5;margin-top:5px}
.url-input{display:flex;align-items:center;background:#1c2820;border:1px solid #3b4a3f;border-radius:7px;margin-top:6px;overflow:hidden}.url-input span{padding-left:10px;color:var(--lime);font-size:13px}.url-input input{border:0;margin:0;padding-left:2px;border-radius:0}.url-input:focus-within{border-color:var(--lime)}
.image-preview{display:block;max-width:100%;height:90px;object-fit:contain;margin-top:10px;background:#e9eee7;border-radius:6px;padding:5px}
.form-error{color:#ffb9ac;font-size:12px;line-height:1.4}.primary-action:disabled{opacity:.5;cursor:wait}
.offer-row{padding:12px 0;border-bottom:1px solid var(--line);font-size:11px}.offer-row small{display:block;color:#96a697;font-size:9px;margin-top:5px}.offer-row p{color:#bdc9bd;overflow-wrap:anywhere}.building-heading h1{overflow-wrap:anywhere}

.account-nav{position:absolute;right:75px;top:20px;display:flex;gap:14px;pointer-events:auto;font-size:12px}.account-nav a{color:#1b2c20;font-weight:700;text-decoration:none}.account-nav a:hover{text-decoration:underline}@media(max-width:780px){.account-nav{top:60px;right:15px;flex-direction:column;background:#dce7dc;padding:8px;border-radius:8px}}

/* V6: selectable building types */
.building-type-fieldset{border:0;padding:0;margin:16px 0 2px}.building-type-fieldset legend{font-size:12px;color:#d3ddd4;margin-bottom:8px}.building-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.building-type-card{margin:0!important;position:relative;cursor:pointer}.building-type-card input{position:absolute;opacity:0;pointer-events:none}.building-type-card span{display:block;min-height:64px;padding:10px;border:1px solid #3b4a3f;border-radius:8px;background:#1a251e;transition:border-color .15s,background .15s,box-shadow .15s}.building-type-card strong,.building-type-card small{display:block}.building-type-card strong{font-size:12px;color:#eef4ef;margin-bottom:4px}.building-type-card small{font-size:9px;line-height:1.35;color:#91a093}.building-type-card input:checked+span{border-color:var(--lime);background:#253424;box-shadow:0 0 0 2px #c7ff4d18}.building-type-card input:focus-visible+span{outline:2px solid var(--lime);outline-offset:2px}@media(max-width:520px){.building-type-grid{grid-template-columns:1fr}}


/* V9: Plot number/address are the primary purchase criteria. */
.panel.plot-selected .eyebrow#panelType{font-size:15px;letter-spacing:.14em;color:#c7ff4d;font-weight:800}
.panel.plot-selected .building-heading{grid-template-columns:78px 1fr;gap:16px}
.panel.plot-selected .logo-card{width:78px;height:78px;font-size:27px;font-weight:900;color:#172019;background:#f1f4ed;border-color:#d9e0d7}
.panel.plot-selected .building-heading h1{font-size:29px;line-height:1.03;letter-spacing:-.035em;margin-bottom:9px}
.panel.plot-selected .building-heading p{font-size:12px;line-height:1.45}
.panel.plot-selected .address-block{padding:16px 0 15px;margin:13px 0;align-items:flex-start}
.panel.plot-selected .address-block small{font-size:9px;letter-spacing:.18em;color:#91a095;margin-bottom:5px}
.panel.plot-selected .address-block strong{font-size:22px;line-height:1.08;font-weight:850;letter-spacing:-.02em;color:#f4f7f2}
.panel.plot-selected .pin{font-size:17px;line-height:1.1;margin-top:18px}
@media(max-width:780px){
  .panel.plot-selected .building-heading h1{font-size:26px}
  .panel.plot-selected .address-block strong{font-size:20px}
}

/* V14 building customization */
.color-field{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;margin-top:6px}.color-field input[type=color]{width:58px;height:46px;padding:4px;margin:0;cursor:pointer}.color-field input[type=text]{margin:0;text-transform:uppercase}.roof-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.roof-style-grid .building-type-card span{min-height:54px}.edit-card input[type=color]{height:46px;padding:4px;cursor:pointer}.edit-color-row{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center}.edit-color-row input{margin-top:6px}.edit-card .roof-style-grid{margin-top:6px}@media(max-width:520px){.roof-style-grid{grid-template-columns:1fr}}
.form-success{color:#b9ff3f;font-size:14px;line-height:1.45;margin:8px 0}

/* V16 direct billboard booking */
#billboardForm input[type=checkbox]{width:auto;display:inline-block;margin:0 8px 0 0;accent-color:var(--lime)}
#billboardDialog a{color:var(--lime)}

.billboard-preview{width:min(100%,420px);aspect-ratio:2/1;margin:10px 0 16px;border:5px solid #26302c;border-radius:5px;overflow:hidden;background:#e9eee7;box-shadow:0 8px 20px #0004}.billboard-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.city-legal-links{position:fixed;right:72px;bottom:14px;z-index:20;display:flex;align-items:center;gap:8px;font-size:11px;color:#34433a;background:#eef3eddd;padding:5px 7px;border-radius:7px;box-shadow:0 2px 10px #00000012}.city-legal-links span{padding:0 3px}.city-legal-links a{color:#34433a;text-decoration:none;padding:3px 5px;border-radius:4px}.city-legal-links a:hover,.city-legal-links a:focus-visible{text-decoration:underline;background:#ffffff80}@media(max-width:780px){.city-legal-links{left:8px;right:62px;bottom:8px;justify-content:center;gap:4px;font-size:10px;flex-wrap:wrap;padding:4px 6px}}#buildForm .legal-check,#billboardForm .legal-check{font-size:12px;line-height:1.45;color:#59665b}#buildForm .legal-check input,#billboardForm .legal-check input{width:auto;display:inline-block;margin:0 7px 0 0}#buildForm .legal-check a,#billboardForm .legal-check a{color:inherit;text-decoration:underline}
@media(max-width:780px){
  .panel.plot-selected .eyebrow#panelType{font-size:12px}
  .panel.plot-selected .building-heading{grid-template-columns:52px 1fr;gap:11px}
  .panel.plot-selected .logo-card{width:52px;height:52px;font-size:21px}
  .panel.plot-selected .building-heading h1{font-size:19px;line-height:1.06;margin-bottom:6px}
  .panel.plot-selected .building-heading p{font-size:10px;line-height:1.4}
  .panel.plot-selected .address-block{padding:10px 0;margin:9px 0}
  .panel.plot-selected .address-block strong{font-size:17px}
  .panel.plot-selected .pin{font-size:13px;margin-top:14px}
  .zoom-controls{right:10px;bottom:60px}.zoom-controls button{width:38px;height:38px}
}
.account-nav{top:14px;right:14px;flex-direction:row;align-items:center;gap:12px;padding:9px 11px;border:1px solid #3c4b42;border-radius:10px;background:#132019e8;box-shadow:0 8px 24px #17241d2e;backdrop-filter:blur(12px)}
.account-nav a,.account-nav .logout-link{color:#f1f5f1;font-size:10px;white-space:nowrap}
.account-nav #accountLink{display:block;max-width:110px;overflow:hidden;text-overflow:ellipsis}
@media(max-width:780px){
  .account-nav{top:12px;right:10px;gap:9px;padding:8px 9px;border-radius:9px}
  .account-nav a,.account-nav .logout-link{font-size:9px}
  .account-nav #accountLink{max-width:76px}
}


/* City Life / UI v16 */
.account-nav{display:flex;align-items:center;gap:14px}
.account-nav a,.logout-link{color:#dce5de;text-decoration:none;font:600 10px/1 var(--ui-font);letter-spacing:.03em}
.logout-link{border:0;background:transparent;padding:0;cursor:pointer}
.logout-link:hover,.account-nav a:hover{color:var(--lime)}
@media(max-width:780px){.account-nav{gap:9px}.account-nav a,.logout-link{font-size:9px}}

.custom-file{display:flex;align-items:center;gap:10px;margin-top:8px}.custom-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.file-button{border:0;padding:8px 12px;border-radius:6px;background:#344936;color:#eef4ee;font:inherit;cursor:pointer}.file-name{font-size:13px;color:#c8d1c8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.file-button:focus-visible{outline:2px solid #b6ff3b;outline-offset:2px}

/* v0.5: mobile floor stepper + prevent iOS input focus zoom */
.floor-stepper{display:block;margin-top:6px}
.floor-stepper #levels{margin-top:0}
.floor-stepper-btn{display:none}
@media(max-width:780px){
  dialog input,dialog select,dialog textarea{font-size:16px}
  html.elys-ios-app .floor-stepper{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:stretch}
  html.elys-ios-app .floor-stepper #levels{height:48px;text-align:center;font-size:18px;font-weight:700;-moz-appearance:textfield}
  html.elys-ios-app .floor-stepper #levels::-webkit-outer-spin-button,html.elys-ios-app .floor-stepper #levels::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  html.elys-ios-app .floor-stepper-btn{display:flex;align-items:center;justify-content:center;height:48px;border:1px solid #3b4a3f;border-radius:8px;background:#253424;color:var(--lime);font-size:26px;font-weight:700;line-height:1;cursor:pointer;touch-action:manipulation}
  html.elys-ios-app .floor-stepper-btn:active{background:#31462f}
}

/* v0.6 media detail dialogs */
.logo-card.has-image img{cursor:zoom-in}.logo-card.has-image img:focus-visible{outline:2px solid var(--lime);outline-offset:2px}.media-viewer{width:min(92vw,980px);max-width:980px}.media-viewer-frame{display:flex;align-items:center;justify-content:center;max-height:72vh;border-radius:9px;overflow:hidden;background:#0d1510}.media-viewer-frame img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain}.billboard-viewer-frame{aspect-ratio:2/1;background:#e9eee7}.billboard-viewer-frame img{width:100%;height:100%;max-height:none;object-fit:contain}.billboard-viewer-text{white-space:pre-wrap;line-height:1.55;color:#d3ddd4;margin:16px 0}.billboard-viewer .primary-action{margin-top:8px}@media(max-width:780px){.media-viewer{width:calc(100vw - 20px);max-width:none}.media-viewer-frame{max-height:64vh}.media-viewer-frame img{max-height:64vh}.billboard-viewer-frame img{max-height:none}}

/* Admin-only publishing controls */
.admin-options{margin:12px 0;padding:14px;border:1px solid rgba(185,255,63,.35);border-radius:12px;background:rgba(185,255,63,.06)}
.admin-options .admin-check{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px}.admin-options .admin-check input{width:auto;margin-top:3px}.admin-options strong{color:#c7ff4d}

/* --- iPad/desktop property panel: compact + closable --- */
.left-rail{
  align-items:flex-start;
}
.panel{
  align-self:flex-start;
  height:auto;
}
.panel-close{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border:1px solid #36433b;
  border-radius:9px;
  background:#1a241e;
  color:#e9efea;
  font-size:23px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.panel-close:hover{
  background:#243128;
  border-color:#4a5c50;
}
.panel-close:active{
  transform:scale(.96);
}

/* Keep the compact panel scrollable only when its actual content exceeds
   the available viewport height; otherwise it ends directly after content. */
@media(min-width:781px){
  .panel{
    max-height:calc(100dvh - 28px);
  }
}

/* Plot jump: direct navigation to a favorite plot number. */
.plot-jump{position:absolute;z-index:24;top:70px;right:13px;display:flex;align-items:center;gap:6px;padding:6px;background:#16201be8;border:1px solid #314037;border-radius:10px;box-shadow:0 12px 28px #0003;backdrop-filter:blur(10px);pointer-events:auto;font-family:var(--ui-font)}
.plot-jump label{padding-left:5px;color:#aeb9b0;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.plot-jump input{width:74px;height:31px;border:1px solid #3a493f;border-radius:7px;background:#0f1712;color:#f1f5f1;padding:0 8px;font:700 12px/1 var(--ui-font);outline:none;-moz-appearance:textfield}
.plot-jump input::-webkit-outer-spin-button,.plot-jump input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.plot-jump input:focus{border-color:var(--lime);box-shadow:0 0 0 2px #c7ff4d26}
.plot-jump button{height:31px;border:0;border-radius:7px;background:var(--lime);color:#142015;padding:0 10px;font:800 10px/1 var(--ui-font);cursor:pointer}
.plot-jump button:hover{filter:brightness(1.04)}
@media(max-width:780px){
  .plot-jump{top:68px;left:10px;right:auto;max-width:calc(100vw - 20px)}
  .plot-jump label{font-size:8px}
  .plot-jump input{width:68px}
}