:root{--bg:#0b1220;--card:#111b2e;--line:#25324a;--txt:#eef3fb;--muted:#a8b3c7;--accent:#68a0ff;--ok:#39c98a;--danger:#ff6875}*{box-sizing:border-box}body{margin:0;background:#0a1020;color:var(--txt);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}header{border-bottom:1px solid var(--line);background:#0d1729}.wrap{width:min(1120px,calc(100% - 32px));margin:auto}.nav{display:flex;align-items:center;gap:18px;height:62px}.nav strong{margin-right:auto}.nav a{color:var(--muted);text-decoration:none}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin:18px 0}.narrow{max-width:480px;margin:64px auto}.public-head{padding:40px 0 12px}.public-head h1,.toolbar h1{font-size:clamp(30px,5vw,46px);margin:8px 0}.muted{color:var(--muted)}label{display:grid;gap:8px;color:var(--muted);font-size:14px}input,select,textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#0b1323;color:var(--txt);font:inherit}textarea{resize:vertical}button,.button{display:inline-flex;align-items:center;justify-content:center;padding:11px 15px;border:0;border-radius:10px;background:var(--accent);color:#08101e;font-weight:700;cursor:pointer;text-decoration:none}.ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}.danger{background:var(--danger);color:#26070a}.primary{background:var(--accent)}.big{width:100%;padding:15px;font-size:17px}.stack{display:grid;gap:18px}.toolbar{display:flex;gap:20px;justify-content:space-between;align-items:center;padding-top:28px}.actions,.unit-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.stats div{padding:20px;background:var(--card);border:1px solid var(--line);border-radius:14px}.stats b{display:block;font-size:28px}.stats span{color:var(--muted)}.row{display:grid;grid-template-columns:1fr 1.5fr 1.7fr auto;gap:10px}.unit{display:flex;justify-content:space-between;gap:20px;align-items:center}.tag{font-size:12px;letter-spacing:.08em;color:var(--accent);font-weight:800}.status{padding:7px 10px;border-radius:999px;border:1px solid #745d14;color:#ffd66c;font-size:12px;font-weight:800}.status.done{color:#8ff0c5;border-color:#206f53}.flash{padding:12px 14px;border-radius:10px;margin-top:18px}.flash.success{background:#0d2f24}.flash.error{background:#3a1218}.balcony-title{display:flex;justify-content:space-between;align-items:flex-start}.balcony h2{margin:4px 0}.pd-frame,.admin-preview{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.pd-frame img,.admin-preview img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}.zone{position:absolute;border:3px solid #ff4d63;background:rgba(255,77,99,.16);box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;pointer-events:none}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choices label{display:block}.choices input{position:absolute;opacity:0}.choices span{display:block;padding:15px;border:2px solid var(--line);border-radius:12px;text-align:center;color:var(--txt);font-weight:800}.choices input:checked+span{border-color:var(--accent);background:rgba(104,160,255,.12)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check{display:flex;align-items:center;gap:10px}.check input{width:auto}.successbox{border-color:#206f53}.balcony-admin{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.balcony-admin form{margin-bottom:12px}.admin-preview{margin-bottom:10px}.hr,hr{border:0;border-top:1px solid var(--line);margin:24px 0}@media(max-width:760px){.row,.grid2,.choices,.stats{grid-template-columns:1fr}.toolbar,.unit{align-items:flex-start;flex-direction:column}.unit-actions{width:100%}.button,button{min-height:42px}}
.editor{cursor:crosshair;touch-action:none}.editor-hint{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.72);color:#fff;padding:7px 9px;border-radius:8px;font-size:12px;pointer-events:none}

.admin-preview{touch-action:none;user-select:none}.admin-preview .zone{pointer-events:none}.editor-hint{z-index:5}

/* v5: highly visible balcony editor frame */
.admin-preview { position: relative; cursor: crosshair; }
.admin-preview img { user-select: none; -webkit-user-drag: none; }
.admin-preview .zone {
  border: 4px solid #ff00ff !important;
  background: rgba(255, 0, 255, 0.16) !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 14px rgba(255,0,255,.95) !important;
  pointer-events: none;
}

/* v6: copy invitation button */
.copy-invitation { cursor: pointer; }
.copy-invitation:disabled { opacity: .75; cursor: default; }

/* v7: owner-facing focused view of the exact marked balcony */
.focus-wrap{background:#0a1020;border:1px solid var(--line);border-radius:14px;padding:8px;overflow:hidden}
.pd-focus{position:relative;width:100%;height:clamp(300px,52vw,620px);overflow:hidden;background:#fff;border-radius:10px}
.pd-focus-image{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
.pd-focus .zone{position:absolute!important;border:5px solid #00ff66!important;background:rgba(0,255,102,.15)!important;box-shadow:0 0 0 2px #07130c,0 0 18px rgba(0,255,102,.95)!important;pointer-events:none}
.focus-caption{margin:10px 2px 0;color:var(--muted);font-size:14px}

.public-head .tag{display:inline-block;max-width:100%;line-height:1.5}

/* v9: responsive full-house preview and no horizontal overflow */
html, body { max-width: 100%; overflow-x: hidden; }
.wrap { width: min(1100px, calc(100% - 32px)); max-width: 100%; }
.public-head { padding-bottom: 8px; }
.balcony { overflow: hidden; }
.pd-full { position: relative; width: 100%; max-width: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.pd-full img { display: block; width: 100%; max-width: 100%; height: auto; }
.pd-full .full-zone { position: absolute !important; z-index: 3; border: 5px solid #00ff66 !important; background: rgba(0,255,102,.12) !important; box-shadow: 0 0 0 2px #07130c, 0 0 18px rgba(0,255,102,.95) !important; pointer-events: none; }
.compact { margin: 3px 0 0; font-size: 13px; }
.admin-preview { max-width: 100%; overflow: hidden; }
.admin-preview img { width: 100%; max-width: 100%; height: auto; }

/* v10: drawing-based left/right orientation */
.focus-caption { margin: 8px 0 10px; }

/* v11: mobile readability - zoom around the selected balcony */
.pd-full { position: relative; }
.pd-canvas { position: relative; width: 100%; transform-origin: 0 0; }
.pd-canvas img { display: block; width: 100%; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.pd-canvas .full-zone { position: absolute !important; z-index: 3; }
.mobile-zoom-toggle { display: none; }

@media (max-width: 760px) {
  .wrap { width: min(100% - 20px, 680px); }
  .public-head { padding-top: 24px; }
  .public-head h1 { font-size: 30px; line-height: 1.15; }
  .balcony.card { padding: 14px; }
  .balcony-title h2 { font-size: 24px; }
  .compact { font-size: 12px; line-height: 1.35; }
  .mobile-zoom-container {
    height: min(68vw, 430px);
    min-height: 300px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
  }
  .mobile-zoom-container .pd-canvas {
    will-change: transform;
  }
  .mobile-zoom-container .full-zone {
    border-width: 4px !important;
  }
  .mobile-zoom-toggle {
    display: block;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 10;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: 9px;
    background: rgba(10,16,32,.9);
    color: #eef3fb;
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    font-size: 12px;
    font-weight: 800;
  }
  .choices span { padding: 16px 10px; font-size: 14px; }
  .big { font-size: 16px; }
}

.settings-card{max-width:720px}.narrow-form{max-width:560px}.narrow-form input{width:100%}

/* v15: clearer import workflow */
.auto-card { display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; }

/* v16: auto assignment emphasis */
.auto-card button { white-space: nowrap; }

/* v18: visual verification of every assigned balcony */
.overview-toolbar { align-items:flex-start; }
.overview-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
.overview-stats div { padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.overview-stats b { display:block; font-size:28px; }
.overview-stats span { color:var(--muted); }
.overview-card-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }
.overview-card-head h2 { margin:0 0 4px; }
.legend { display:flex; gap:16px; color:var(--muted); font-size:13px; white-space:nowrap; }
.legend-dot { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.legend-1172 { background:#00e5ff; }
.legend-1173 { background:#ff4de1; }
.overview-drawing { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; line-height:0; }
.overview-drawing img { display:block; width:100%; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.overview-zone { position:absolute; z-index:4; display:block; box-sizing:border-box; text-decoration:none; }
.overview-zone span {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:block; padding:3px 5px; border-radius:5px;
  font:800 10px/1.1 system-ui,sans-serif; white-space:nowrap;
  color:#07130c; background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);
  pointer-events:none;
}
.overview-zone.zone-1172 { border:4px solid #00e5ff; box-shadow:0 0 0 2px rgba(0,0,0,.9),0 0 14px rgba(0,229,255,.95); background:rgba(0,229,255,.10); }
.overview-zone.zone-1173 { border:4px solid #ff4de1; box-shadow:0 0 0 2px rgba(0,0,0,.9),0 0 14px rgba(255,77,225,.95); background:rgba(255,77,225,.10); }
.overview-zone:hover { z-index:8; filter:brightness(1.2); }
.overview-list { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.overview-list a { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding:9px 10px; border:1px solid var(--line); border-radius:9px; color:var(--txt); text-decoration:none; background:rgba(255,255,255,.02); min-width:0; }
.overview-list a:hover { border-color:var(--accent); }
.overview-list strong { font-size:12px; white-space:nowrap; }
.overview-list span { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.overview-list em { font-size:10px; font-style:normal; color:#ffd66c; white-space:nowrap; }
@media(max-width:760px) {
  .overview-stats { grid-template-columns:1fr; }
  .overview-card-head { align-items:flex-start; flex-direction:column; }
  .overview-list { grid-template-columns:1fr; }
  .overview-zone span { font-size:8px; padding:2px 3px; }
  .overview-zone.zone-1172,.overview-zone.zone-1173 { border-width:3px; }
}

.ref-links { margin: 14px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px; }
.ref-links a { color:var(--accent); text-decoration:none; font-weight:800; }
.ref-links a:hover { text-decoration:underline; }
