/* Apartment explorer (3D Offplan demo).
   No motion on the page: state changes are instant; only the 3D ring turns, and only when the visitor turns it. */
:root {
  /* the website's palette (longevitysamui.com globals.css, Máté 2026-10-11: "green like the website, not cream") */
  --ink: #E4D9C3;          /* text: website --cream */
  --muted: rgba(228,217,195,.66);   /* labels (~5:1 on the panel) */
  --gold: #C9A96E;         /* fills, chips, selection */
  --gold-bright: #E8C98A;
  --gold-soft: rgba(201,169,110,.16);
  --forest: #060E08;       /* website --bg: the darkest, text on gold */
  --paper: #0D1C10;        /* panel: website --bg-2 */
  --card: #12251A;         /* raised surfaces */
  --img: #E9E2D3;          /* behind the light floor-plan renders */
  --line: rgba(201,169,110,.20);
  /* status colours: the CRM masterplan component (Máté's choice A, 2026-10-10) */
  --avail: #2FA968;
  --res: #E0A63A;
  --sold: #D8483B;
  --panel-w: 440px;
  --r: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink);
  font: 400 15px/1.45 "Host Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, .serif { font-family: "Host Grotesk", system-ui, sans-serif; font-weight: 400; letter-spacing: .01em; }

.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------------------------------------------------------------- left panel */
.panel { width: var(--panel-w); flex: none; display: flex; flex-direction: column; background: var(--paper);
  border-right: 1px solid var(--line); position: relative; z-index: 3; }
.panel.closed { margin-left: calc(-1 * var(--panel-w)); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 22px 28px 16px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; color: var(--ink); }
.brand img { width: 40px; height: 37px; }
.brand b { font: 400 17px/1.1 "Host Grotesk", system-ui, sans-serif; display: block; letter-spacing: .04em; }
.brand small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.icon-btn { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; position: relative; }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn.on { background: var(--gold); border-color: var(--gold); color: var(--forest); }
.icon-btn .count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--gold); color: var(--forest); font-size: 11px; display: grid; place-items: center; padding: 0 4px; }

.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 28px 16px; }
.filters label { position: relative; display: block; }
.filters select { width: 100%; appearance: none; border: 1px solid var(--line); background: var(--card); border-radius: 8px;
  padding: 11px 32px 11px 14px; font-size: 14px; }
.filters label::after { content: ""; position: absolute; right: 14px; top: 50%; margin-top: -3px; border: 5px solid transparent;
  border-top-color: var(--ink); pointer-events: none; }
.filters select.set { border-color: var(--gold); background: var(--gold-soft); }
.result-line { padding: 0 28px 10px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.result-line button { border: 0; background: none; color: var(--ink); text-decoration: underline; padding: 0; font-size: 13px; }

.list { overflow-y: auto; padding: 4px 28px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; flex: 1; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; cursor: pointer; position: relative; text-align: left; }
.card:hover, .card.hl { border-color: var(--gold); }
.card .img { aspect-ratio: 1 / .9; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--img); }
.card .img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.card .fav { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(6,14,8,.72); display: grid; place-items: center; }
.card .fav svg { width: 16px; height: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 8px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--gold); color: var(--forest); white-space: nowrap; }
.chip.ghost { background: var(--gold-soft); }
.chip.avail { background: rgba(47,169,104,.18); color: #6FD39C; }
.chip.res { background: rgba(224,166,58,.18); color: #F0C26E; }
.chip.sold { background: rgba(216,72,59,.20); color: #F08479; }
.facts { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.facts b { color: var(--ink); font-weight: 500; }
.empty { grid-column: 1 / -1; color: var(--muted); padding: 30px 0; text-align: center; }

.thumb-loc { margin: 4px 28px 16px; border-radius: var(--r); overflow: hidden; position: relative; background: var(--card); aspect-ratio: 16/10; }
.thumb-loc canvas, .thumb-loc svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- stage */
.stage { flex: 1; position: relative; overflow: hidden; background: var(--forest); user-select: none; -webkit-user-select: none; }
.detail { user-select: text; -webkit-user-select: text; }
.view { position: absolute; inset: 0; display: none; }
.view.on { display: block; }
#v3d > canvas, #v3d > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#v3d { cursor: grab; touch-action: none; }
#v3d.drag { cursor: grabbing; }
.u-poly { fill: transparent; stroke: transparent; stroke-width: 3; vector-effect: non-scaling-stroke; cursor: pointer; }
.u-poly.match { fill: rgba(201,169,110,.22); stroke: rgba(201,169,110,.9); stroke-width: 1.5; }
.u-poly.hot { fill: rgba(201,169,110,.45); stroke: #fff4dc; stroke-width: 2; }
.u-poly.sold.hot { fill: rgba(216,72,59,.45); }
.u-poly.res.hot { fill: rgba(224,166,58,.5); }

.switch { position: absolute; top: 24px; right: 24px; display: flex; background: rgba(13,28,16,.92); border-radius: 10px;
  padding: 4px; border: 1px solid var(--line); z-index: 4; }
.switch button { border: 0; background: none; padding: 9px 16px; border-radius: 7px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.switch button svg { width: 18px; height: 18px; }
.switch button.on { background: var(--gold); color: var(--forest); }

.arrows { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4;
  background: rgba(13,28,16,.9); padding: 8px; border-radius: 12px; border: 1px solid var(--line); }
.arrows button { width: 46px; height: 42px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; }
.arrows svg { width: 20px; height: 20px; }
.hint { position: absolute; left: 24px; bottom: 30px; z-index: 4; font-size: 13px; color: var(--ink);
  background: rgba(13,28,16,.9); border: 1px solid var(--line); padding: 7px 12px; border-radius: 8px; }
.toggle-panel { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 5; width: 26px; height: 52px;
  border: 1px solid var(--line); border-left: 0; background: var(--paper); border-radius: 0 9px 9px 0; display: grid; place-items: center; }
.toggle-panel svg { width: 14px; height: 14px; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; z-index: 2; }

/* hover card on the 3D view */
.pop { position: absolute; z-index: 6; width: 236px; background: var(--card); border-radius: 12px; padding: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); border: 1px solid var(--line); display: none; }
.pop.on { display: block; }
.pop .img { aspect-ratio: 1.2; display: grid; place-items: center; background: var(--img); border-radius: 7px; overflow: hidden; }
.pop .img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pop .go { width: 100%; margin-top: 10px; border: 0; border-radius: 8px; padding: 10px; background: var(--gold); color: var(--forest); font-weight: 600; }
.pop .go[disabled] { background: rgba(228,217,195,.10); color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------- floors view */
#vfloor { background: var(--paper); }
#vfloor .plan { position: absolute; inset: 90px 120px 70px 60px; }
#vfloor .plan img, #vfloor .plan svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.f-poly { fill: rgba(201,169,110,0); stroke: rgba(22,36,27,0); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.f-poly.match { fill: rgba(201,169,110,.10); stroke: rgba(201,169,110,.8); }
.f-poly.hot { fill: rgba(201,169,110,.32); stroke: var(--gold); }
.f-label { pointer-events: none; }
.f-label rect { fill: rgba(13,28,16,.92); stroke: rgba(201,169,110,.35); }
.f-label rect { stroke-width: 3; }
.f-label text { font: 500 40px "Host Grotesk", sans-serif; fill: var(--ink); }
.f-label text.t { font: 400 52px "Host Grotesk", system-ui, sans-serif; }
.floor-pick { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; z-index: 4; }
.floor-pick button { width: 52px; height: 46px; border: 0; background: none; font: 400 17px "Host Grotesk", system-ui, sans-serif; }
.floor-pick button.on { background: var(--gold); color: var(--forest); }
.floor-pick small { display: block; text-align: center; font-size: 10px; letter-spacing: .14em; color: var(--muted); padding: 8px 0 4px; }
.compass { position: absolute; left: 34px; top: 30px; width: 64px; height: 64px; }
.floor-title { position: absolute; left: 112px; top: 36px; }
.floor-title h2 { margin: 0; font-size: 26px; }
.floor-title p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- 2D grid */
#v2d { background: var(--paper); padding: 110px 60px 60px; overflow: auto; }
.legend { display: flex; gap: 20px; justify-content: center; margin-bottom: 30px; font-size: 14px; }
.legend i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 7px; }
.grid2d { display: grid; grid-template-columns: 60px 1fr; gap: 10px 18px; max-width: 900px; margin: 0 auto; }
.grid2d .lvl { font: 400 20px "Host Grotesk", system-ui, sans-serif; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.grid2d .row { display: flex; gap: 10px; flex-wrap: wrap; }
.cell { min-width: 108px; border-radius: 8px; padding: 10px 12px; border: 0; text-align: left; color: #060E08; }
.cell b { display: block; font: 400 19px "Host Grotesk", system-ui, sans-serif; }
.cell span { font-size: 12px; opacity: .92; }
.cell.avail { background: var(--avail); } .cell.res { background: var(--res); } .cell.sold { background: var(--sold); }
.cell.dim { opacity: .28; }
.cell:hover { outline: 3px solid var(--gold); }

/* ---------------------------------------------------------------- apartment page */
.detail { position: absolute; inset: 0; z-index: 8; background: var(--paper); display: none; overflow: auto; }
.detail.on { display: block; }
.detail .bar { display: flex; align-items: center; gap: 12px; padding: 22px 30px; position: sticky; top: 0; background: var(--paper); z-index: 2; border-bottom: 1px solid var(--line); }
.detail .bar .back { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 8px 14px; display: flex; gap: 8px; align-items: center; }
.detail .bar .back svg { width: 16px; height: 16px; }
.detail .body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 40px; padding: 30px; max-width: 1400px; }
.detail .hero { background: var(--img); border-radius: 14px; display: grid; place-items: center; padding: 20px; min-height: 420px; }
.detail .hero img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.detail h1 { font-size: 40px; margin: 0 0 6px; line-height: 1.1; }
.detail .sub { color: var(--muted); margin: 0 0 20px; }
.spec { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin: 18px 0; }
.spec div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec div:nth-child(odd) { padding-right: 16px; }
.spec small { display: block; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.spec b { font: 400 22px "Host Grotesk", system-ui, sans-serif; }
.price { font: 400 20px "Host Grotesk", system-ui, sans-serif; margin: 6px 0 18px; }
.btn { border: 0; border-radius: 9px; padding: 14px 18px; font-weight: 600; letter-spacing: .02em; }
.btn.primary { background: var(--gold); color: var(--forest); width: 100%; }
.btn.line { background: var(--card); border: 1px solid var(--line); }
.btn-row { display: flex; gap: 10px; margin-top: 10px; }
.btn-row .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-row svg { width: 17px; height: 17px; }
.mini { margin-top: 26px; }
.mini h3 { font-size: 16px; margin: 0 0 10px; }
.mini.seaview img { width: 100%; display: block; border-radius: 10px; border: 1px solid var(--line); }
.mini.seaview p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.mini .wrap { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 3600 / 1556; }
.mini .wrap img, .mini .wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.form { display: none; margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.form.on { display: block; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; margin-bottom: 10px; background: var(--forest); }
.form textarea { min-height: 80px; resize: vertical; }
.form .consent { display: flex; gap: 10px; font-size: 13px; color: var(--muted); margin: 4px 0 14px; align-items: flex-start; }
.form .consent a { color: var(--ink); }
.form .note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.form .hp { position: absolute; left: -9999px; }

.foot-note { position: absolute; right: 24px; bottom: 4px; z-index: 4; font-size: 11px; color: var(--muted);
  background: rgba(6,14,8,.75); padding: 3px 8px; border-radius: 6px; max-width: calc(100% - 48px); }
/* narrower stages: the hint would run into the arrows (Máté's screenshot 2026-10-09), lift it above them */
@media (max-width: 1250px) { .hint { bottom: 96px; } }

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  .app { flex-direction: column-reverse; height: auto; min-height: 100dvh; overflow: visible; }
  .panel { width: 100%; border-right: 0; }
  .panel.closed { margin-left: 0; }
  .panel-head { padding: 16px 16px 10px; }
  .filters, .result-line { padding-left: 16px; padding-right: 16px; }
  .list { padding: 4px 16px 24px; overflow: visible; }
  .thumb-loc { margin: 4px 16px 12px; }
  .stage { height: 62vh; flex: none; position: sticky; top: 0; }
  .toggle-panel, .hint { display: none; }
  .foot-note { right: 8px; bottom: 66px; font-size: 10px; }
  .switch { top: 12px; right: 12px; left: 12px; justify-content: space-between; }
  .switch button { padding: 8px 10px; font-size: 13px; }
  .arrows { bottom: 14px; }
  #vfloor .plan { inset: 70px 70px 20px 12px; }
  .floor-pick { right: 10px; }
  .compass, .floor-title { display: none; }
  #v2d { padding: 70px 14px 30px; }
  .grid2d { grid-template-columns: 44px 1fr; }
  .cell { min-width: 84px; }
  .detail { position: fixed; }
  .detail .body { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .detail .hero { min-height: 260px; }
  .detail h1 { font-size: 30px; }
  .detail .bar { padding: 14px 16px; }
  .pop { width: 210px; }
}

/* preview only: camera preset comparison */
.cam-switch { position: absolute; top: 24px; left: 24px; z-index: 4; display: flex; align-items: center; gap: 4px; padding: 4px;
  background: rgba(13,28,16,.92); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.cam-switch span { padding: 0 8px; color: var(--muted); }
.cam-switch a { width: 34px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: var(--ink); text-decoration: none; font-weight: 600; }
.cam-switch a.on { background: var(--gold); color: var(--forest); }
@media (max-width: 900px) { .cam-switch { top: 64px; left: 12px; } }

/* ---------------------------------------------------------------- lighter brand variants (Máté 2026-10-11: "too dark")
   preview: index.html?theme=a|b|c ; the chosen one becomes the default */
:root[data-theme="a"] { --paper: #17301F; --card: #1F3D2A; --line: rgba(201,169,110,.26); --muted: rgba(228,217,195,.74); }
:root[data-theme="a"] .stage { background: #17301F; }
:root[data-theme="b"] { --paper: #24463A; --card: #2D5444; --line: rgba(232,201,138,.30); --muted: rgba(240,232,214,.80); --ink: #F3EBDA; }
:root[data-theme="b"] .stage { background: #24463A; }
/* c: green frame, light content: panel and bars stay forest green, every card / popup / page body is warm ivory */
:root[data-theme="c"] { --paper: #1A3324; --card: #21402D; --line: rgba(201,169,110,.26); --muted: rgba(228,217,195,.74); }
:root[data-theme="c"] .card, :root[data-theme="c"] .pop { background: #EEF1FA; color: #15191D; border-color: rgba(0,31,22,.10); }
:root[data-theme="c"] .card .facts, :root[data-theme="c"] .pop .facts { color: #55645a; }
:root[data-theme="c"] .card .facts b, :root[data-theme="c"] .pop .facts b { color: #15191D; }
:root[data-theme="c"] .card .chip.ghost, :root[data-theme="c"] .pop .chip.ghost { background: rgba(0,31,22,.08); color: #15191D; }
:root[data-theme="c"] .card .img, :root[data-theme="c"] .pop .img { background: #EDE5D5; }
:root[data-theme="c"] .card:hover, :root[data-theme="c"] .card.hl { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
:root[data-theme="c"] .detail, :root[data-theme="c"] .detail .bar, :root[data-theme="c"] #v2d, :root[data-theme="c"] #vfloor { background: #F3EDE1; color: #15191D; }
:root[data-theme="c"] .detail .sub, :root[data-theme="c"] .detail .spec small, :root[data-theme="c"] .floor-title p, :root[data-theme="c"] .legend { color: #55645a; }
:root[data-theme="c"] .detail .bar, :root[data-theme="c"] .detail .spec, :root[data-theme="c"] .detail .spec div { border-color: rgba(0,31,22,.12); }
:root[data-theme="c"] .detail .bar .back, :root[data-theme="c"] .btn.line, :root[data-theme="c"] .grid2d .lvl, :root[data-theme="c"] .floor-pick { background: #fff; border-color: rgba(0,31,22,.14); color: #15191D; }
:root[data-theme="c"] .detail .chip.ghost { background: rgba(0,31,22,.08); color: #15191D; }
:root[data-theme="c"] .mini .wrap, :root[data-theme="c"] .form { background: #fff; border-color: rgba(0,31,22,.12); }
:root[data-theme="c"] .form input[type=text], :root[data-theme="c"] .form input[type=email], :root[data-theme="c"] .form input[type=tel], :root[data-theme="c"] .form textarea { background: #FBF8F2; border-color: rgba(0,31,22,.14); color: #15191D; }
:root[data-theme="c"] .mini.seaview p, :root[data-theme="c"] .form .consent, :root[data-theme="c"] .form .note { color: #55645a; }
:root[data-theme="c"] .floor-title h2, :root[data-theme="c"] .grid2d .lvl { color: #15191D; }
:root[data-theme="c"] .f-label rect { fill: rgba(255,255,255,.95); stroke: rgba(0,31,22,.2); }
:root[data-theme="c"] .f-label text { fill: #15191D; }
:root[data-theme="c"] .chip.avail { background: #DDF1E5; color: #1C7A49; }
:root[data-theme="c"] .chip.res { background: #F8EBCF; color: #8A5E12; }
:root[data-theme="c"] .chip.sold { background: #F6DCD8; color: #A3322A; }

/* c+ : the premium refinement of c (Máté 2026-10-11: "professional and premium") — hairline gold instead of grey
   borders, more air, small spaced capitals for labels, no heavy shadows, ivory never pure white */
:root[data-theme="c"] .card, :root[data-theme="c"] .pop { border: 1px solid rgba(201,169,110,.45); border-radius: 4px; padding: 12px; box-shadow: none; }
:root[data-theme="c"] .pop { box-shadow: 0 18px 50px rgba(0,0,0,.35); border-top: 2px solid var(--gold); }
:root[data-theme="c"] .card .img, :root[data-theme="c"] .pop .img { border-radius: 2px; }
:root[data-theme="c"] .list { gap: 16px; }
:root[data-theme="c"] .chip { border-radius: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; }
:root[data-theme="c"] .card:hover, :root[data-theme="c"] .card.hl { box-shadow: 0 0 0 1px var(--gold); }
:root[data-theme="c"] .btn, :root[data-theme="c"] .pop .go { border-radius: 2px; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; font-weight: 500; }
:root[data-theme="c"] .btn.line { border: 1px solid rgba(0,31,22,.25); }
:root[data-theme="c"] .detail .bar { border-bottom: 1px solid rgba(201,169,110,.5); }
:root[data-theme="c"] .detail .hero { background: #EDE5D5; border-radius: 2px; }
:root[data-theme="c"] .detail h1 { font-size: 46px; letter-spacing: .01em; }
:root[data-theme="c"] .detail h1::after { content: ""; display: block; width: 56px; height: 1px; background: var(--gold); margin: 16px 0 4px; }
:root[data-theme="c"] .spec b { font-size: 24px; }
:root[data-theme="c"] .price { font-size: 22px; letter-spacing: .02em; }
:root[data-theme="c"] .filters select, :root[data-theme="c"] .icon-btn { border-radius: 2px; }
:root[data-theme="c"] .switch, :root[data-theme="c"] .arrows, :root[data-theme="c"] .hint { border-radius: 4px; border-color: rgba(201,169,110,.35); }
:root[data-theme="c"] .switch button, :root[data-theme="c"] .arrows button { border-radius: 2px; }
:root[data-theme="c"] .switch button { letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
:root[data-theme="c"] .result-line { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
:root[data-theme="c"] .brand small { color: var(--gold); }
:root[data-theme="c"] .mini h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-family: "Host Grotesk", sans-serif; font-weight: 500; color: #55645a; }

/* ---------------------------------------------------------------- intro film, eye button, outline toggle, tab bar */
.intro { position: fixed; inset: 0; z-index: 100; background: #050b07; display: grid; place-items: center; transition: opacity .45s ease; }
.intro[hidden] { display: none; }
.intro.out { opacity: 0; pointer-events: none; }
.intro video { width: 100%; height: 100%; object-fit: cover; }
.intro-skip { position: absolute; right: 24px; bottom: 24px; border: 1px solid rgba(201,169,110,.5); background: rgba(5,11,7,.5); color: #E4D9C3;
  padding: 9px 18px; border-radius: 4px; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.card .eye { position: absolute; top: 50px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(6,14,8,.72); color: #E4D9C3; display: grid; place-items: center; }
.card .eye svg { width: 16px; height: 16px; }
.outline-toggle { position: absolute; right: 24px; bottom: 26px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: rgba(13,28,16,.9); }
.outline-toggle .knob { width: 38px; height: 22px; border-radius: 11px; background: rgba(228,217,195,.25); position: relative; }
.outline-toggle .knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.outline-toggle.on .knob { background: var(--gold); }
.outline-toggle.on .knob::after { left: 19px; }
.outline-toggle .sw { position: relative; width: 22px; height: 22px; }
.outline-toggle .sw i { position: absolute; width: 12px; height: 12px; }
.outline-toggle .sw .a { left: 0; top: 0; background: var(--avail); } .outline-toggle .sw .r { right: 0; bottom: 0; background: var(--res); }
.u-poly.all { fill: rgba(47,169,104,.30); stroke: rgba(255,255,255,.8); stroke-width: 1.2; }
.u-poly.all.res { fill: rgba(224,166,58,.38); } .u-poly.all.sold { fill: rgba(216,72,59,.38); }
.tabbar { display: none; }
@media (max-width: 1250px) { .outline-toggle { bottom: 96px; } }

/* ---------------------------------------------------------------- f: the FLAT.SHOW / AMANI look
   (Máté 2026-10-11: "almost 1:1 like flatshow.property/AMANI; keep our functions where they are better")
   white panel and cards, hairline grey borders, 10 px radii, pale grey icon buttons, gold chips with white text,
   forest green for the active state, light glass controls on the 3D view, a bottom tab bar on phones */
:root[data-theme="f"] { --ink: #1B1613; --muted: #6E6A64; --paper: #FFFFFF; --card: #FFFFFF; --line: rgba(34,36,38,.15);
  --img: #FFFFFF; --forest: #15191D; color-scheme: light; }
:root[data-theme="f"] body { font-size: 14px; }
:root[data-theme="f"] .panel { border-right: 0; }
:root[data-theme="f"] .panel-head { padding: 28px 30px 16px; }
:root[data-theme="f"] .brand img { content: url(assets/logo-dark.svg); width: 50px; height: 46px; }
:root[data-theme="f"] .brand b { color: #15191D; }
:root[data-theme="f"] .brand small { color: #6B7076; }
:root[data-theme="f"] .icon-btn { background: #F2F1EF; border: 0; border-radius: 10px; width: 42px; height: 42px; color: #1B1613; }
:root[data-theme="f"] .icon-btn.on { background: #15191D; color: #fff; }
:root[data-theme="f"] .icon-btn .count { background: var(--gold); color: #fff; }
:root[data-theme="f"] .filters { padding: 6px 30px 18px; }
:root[data-theme="f"] .filters select { background: #fff; border: 1px solid rgba(34,36,38,.15); border-radius: 4px; padding: 13px 32px 13px 18px; font-size: 13px; color: #1B1613; }
:root[data-theme="f"] .filters label::after { border-top-color: #1B1613; border-width: 4px; }
:root[data-theme="f"] .filters select.set { background: #EEF1FA; border-color: var(--gold); }
:root[data-theme="f"] .result-line { padding: 0 30px 12px; color: #6E6A64; }
:root[data-theme="f"] .result-line button { color: #15191D; }
:root[data-theme="f"] .thumb-loc { margin: 4px 30px 16px; background: #F2F1EF; }
:root[data-theme="f"] .list { padding: 4px 30px 30px; gap: 10px; }
:root[data-theme="f"] .card { background: #fff; border: 1px solid rgba(34,36,38,.15); border-radius: 10px; padding: 4px 4px 14px; }
:root[data-theme="f"] .card:hover, :root[data-theme="f"] .card.hl { border-color: #15191D; }
:root[data-theme="f"] .card .img { background: #fff; aspect-ratio: 1 / .78; border-radius: 8px; }
:root[data-theme="f"] .card .fav, :root[data-theme="f"] .card .eye { background: #C9C8C4; color: #fff; top: 14px; right: 10px; }
:root[data-theme="f"] .card .eye { top: 49px; }
:root[data-theme="f"] .card .fav svg { stroke: #fff; }
:root[data-theme="f"] .card .chips, :root[data-theme="f"] .card .facts { padding: 0 8px; }
:root[data-theme="f"] .chip, :root[data-theme="f"] .chip.ghost { background: var(--gold); color: #fff; border-radius: 2px; font-size: 12px; padding: 2px 6px; }
:root[data-theme="f"] .facts { color: #1B1613; font-size: 13px; }
:root[data-theme="f"] .facts b { font-weight: 400; }
:root[data-theme="f"] .chip.avail { background: #DDF1E5; color: #1C7A49; }
:root[data-theme="f"] .chip.res { background: #F8EBCF; color: #8A5E12; }
:root[data-theme="f"] .chip.sold { background: #F6DCD8; color: #A3322A; }
:root[data-theme="f"] .stage { background: #ECECE8; }
:root[data-theme="f"] .toggle-panel { background: #fff; border: 0; border-radius: 0 10px 10px 0; color: #1B1613; }
:root[data-theme="f"] .switch { background: rgba(255,255,255,.82); border: 0; border-radius: 6px; padding: 6px; }
:root[data-theme="f"] .switch button { color: #1B1613; border-radius: 4px; padding: 10px 16px; font-size: 14px; }
:root[data-theme="f"] .switch button.on { background: #15191D; color: #fff; }
:root[data-theme="f"] .arrows { background: rgba(255,255,255,.55); border: 0; border-radius: 10px; padding: 10px 14px; }
:root[data-theme="f"] .arrows button { background: #F2F1EF; border: 0; border-radius: 6px; color: #1B1613; }
:root[data-theme="f"] .hint { background: rgba(255,255,255,.85); border: 0; border-radius: 6px; color: #1B1613; }
:root[data-theme="f"] .outline-toggle { background: rgba(255,255,255,.7); border: 0; border-radius: 6px; }
:root[data-theme="f"] .outline-toggle .knob { background: #C9C8C4; }
:root[data-theme="f"] .outline-toggle.on .knob { background: #15191D; }
:root[data-theme="f"] .foot-note { background: rgba(255,255,255,.8); color: #6E6A64; }
:root[data-theme="f"] .pop { background: #fff; border: 0; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.22); }
:root[data-theme="f"] .pop .img { background: #fff; }
:root[data-theme="f"] .pop .go { background: #15191D; color: #fff; border-radius: 8px; font-weight: 500; }
:root[data-theme="f"] .u-poly.hot { fill: rgba(255,255,255,.35); stroke: #fff; }
:root[data-theme="f"] #v2d, :root[data-theme="f"] #vfloor { background: #fff; color: #1B1613; }
:root[data-theme="f"] .grid2d .lvl, :root[data-theme="f"] .floor-pick { background: #F2F1EF; border: 0; color: #1B1613; }
:root[data-theme="f"] .floor-pick button.on { background: #15191D; color: #fff; }
:root[data-theme="f"] .floor-title h2 { color: #1B1613; } :root[data-theme="f"] .floor-title p, :root[data-theme="f"] .legend { color: #6E6A64; }
:root[data-theme="f"] .f-label rect { fill: rgba(255,255,255,.95); stroke: rgba(34,36,38,.2); }
:root[data-theme="f"] .f-label text { fill: #1B1613; }
:root[data-theme="f"] .detail, :root[data-theme="f"] .detail .bar { background: #fff; color: #1B1613; }
:root[data-theme="f"] .detail .bar { border-bottom: 1px solid rgba(34,36,38,.12); }
:root[data-theme="f"] .detail .bar .back, :root[data-theme="f"] .btn.line { background: #F2F1EF; border: 0; color: #1B1613; border-radius: 8px; }
:root[data-theme="f"] .detail .hero { background: #fff; border: 1px solid rgba(34,36,38,.12); border-radius: 10px; }
:root[data-theme="f"] .detail .sub, :root[data-theme="f"] .spec small, :root[data-theme="f"] .mini.seaview p { color: #6E6A64; }
:root[data-theme="f"] .spec, :root[data-theme="f"] .spec div { border-color: rgba(34,36,38,.12); }
:root[data-theme="f"] .btn.primary { background: #15191D; color: #fff; border-radius: 8px; font-weight: 500; }
:root[data-theme="f"] .mini .wrap, :root[data-theme="f"] .form { background: #fff; border-color: rgba(34,36,38,.12); }
:root[data-theme="f"] .form input[type=text], :root[data-theme="f"] .form input[type=email], :root[data-theme="f"] .form input[type=tel], :root[data-theme="f"] .form textarea { background: #fff; border-color: rgba(34,36,38,.15); color: #1B1613; }
:root[data-theme="f"] .form .consent, :root[data-theme="f"] .form .note { color: #6E6A64; }
:root[data-theme="f"] .form .consent a { color: #15191D; }
@media (max-width: 900px) {
  :root[data-theme="f"] .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: #fff; border-top: 1px solid rgba(34,36,38,.1); padding-bottom: env(safe-area-inset-bottom); }
  :root[data-theme="f"] .tabbar button { border: 0; background: #fff; color: #1B1613; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 0 9px; font-size: 13px; }
  :root[data-theme="f"] .tabbar svg { width: 24px; height: 24px; }
  :root[data-theme="f"] .tabbar button.on { background: #15191D; color: #fff; }
  :root[data-theme="f"] .app { flex-direction: column; min-height: 100dvh; padding-bottom: 70px; }
  :root[data-theme="f"] .stage { height: calc(100dvh - 70px); position: relative; }
  :root[data-theme="f"] .switch { display: none; }
  :root[data-theme="f"] .panel { display: none; }
  :root[data-theme="f"] body[data-tab="filters"] .panel { display: flex; }
  :root[data-theme="f"] body[data-tab="filters"] .stage { display: none; }
  :root[data-theme="f"] .arrows { bottom: 18px; } :root[data-theme="f"] .outline-toggle { bottom: 18px; right: 12px; } :root[data-theme="f"] .foot-note { bottom: 82px; }
}

/* F refinement (2026-10-12): the apartment page a touch more premium, as in C+ */
:root[data-theme="f"] .detail .bar { border-bottom: 1px solid rgba(201,169,110,.55); }
:root[data-theme="f"] .detail h1 { font-size: 46px; color: #15191D; }
:root[data-theme="f"] .detail h1::after { content: ""; display: block; width: 56px; height: 1px; background: var(--gold); margin: 16px 0 4px; }
:root[data-theme="f"] .pop { border-top: 2px solid var(--gold); }