/* Redwood Client App — поверх laya.css: цвета типов вилл (как на генплане сайта), генплан, легенда. */
:root { --vA: #E6788F; --vB: #B4CC63; --vC: #EFE04F; }
.flist .rwu b em { color: #0b0b0c; font-weight: 800; }
.rwu.tA b em { background: var(--vA); } .rwu.tB b em { background: var(--vB); } .rwu.tC b em { background: var(--vC); } .rwu.tD b em { background: var(--vD, #E8A94A); }
.flist .rwu s.rwk { text-decoration: none; color: var(--sea); font-weight: 600; }
.flist .rwu span { order: 1; } .flist .rwu s.rwk { order: 2; } .flist .rwu small { order: 3; }
.xplan { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #0f0f10; cursor: pointer; animation: xUp .45s var(--xe) both; }
.xplan img { display: block; width: 100%; height: auto; min-height: 200px; max-height: 46vh; object-fit: cover; }
.xplan span { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(11,11,12,.62); color: var(--sand); font: 600 11px/1 var(--f-ui); }
.xplan span svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.xlegend { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.xlg { display: grid; grid-template-columns: 14px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--xg); color: var(--sand); font: inherit; text-align: left; cursor: pointer; animation: xUp .45s var(--xe) both; }
.xlg i { grid-row: span 2; width: 14px; height: 14px; border-radius: 4px; }
.xlg.tA i { background: var(--vA); } .xlg.tB i { background: var(--vB); } .xlg.tC i { background: var(--vC); } .xlg.tD i { background: var(--vD, #E8A94A); }
.xlg b { font: 700 14px/1.2 var(--f-display); }
.xlg small { grid-column: 2; font-size: 11px; color: var(--faint); }
.xlg em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font: 700 11.5px/1.3 var(--f-ui); color: var(--lime); text-align: right; max-width: 92px; }
.xmplan { padding: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.xmplan img { display: block; width: 180%; max-width: none; height: auto; }
/* ===== Генплан — копия блока сайта (анимация контуров как на redwoodphuket.ru) ===== */
.xmp { display: flex; flex-direction: column; gap: 10px; animation: xUp .45s var(--xe) both; }
.mp-box { position: relative; width: 100%; aspect-ratio: 760 / 1081; border-radius: 24px; overflow: hidden; background: #0a0a0a; border: 1px solid var(--line); }
.mp-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s; }
.mp-box > img.ok { opacity: 1; }
.mp-fade { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 20%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: 1; }
.mp-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.mp-neon { stroke-linejoin: round; stroke-linecap: round; stroke-width: 3.5px; animation: mpPulse 3s ease-in-out infinite; }
.mp-glow { animation: mpGlow 2s ease-in-out infinite; }
#mpShape > g { animation: mpIn .5s var(--xe) both; transform-box: fill-box; }
@keyframes mpPulse { 0%, 100% { opacity: .7 } 50% { opacity: 1 } }
@keyframes mpGlow { 0%, 100% { opacity: .3 } 50% { opacity: .7 } }
@keyframes mpIn { from { opacity: 0 } to { opacity: 1 } }
.mp-top { position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mp-modes { display: flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); }
.mp-modes button { flex: 1; height: 34px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.8); font: 600 13.5px/1 var(--f-ui); cursor: pointer; transition: background .3s, color .3s, transform .3s; }
.mp-modes button.on { background: #fff; color: #000; box-shadow: 0 0 15px rgba(255,255,255,.2); transform: scale(1.02); }
.mp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
.mp-chips::-webkit-scrollbar { display: none; }
.mp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); font: 600 13.5px/1 var(--f-ui); white-space: nowrap; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.mp-chip i { width: 10px; height: 10px; border-radius: 50%; }
.mp-chip.on { background: #fff; color: #000; border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,.25); }
.mp-txt { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; pointer-events: none; }
.mp-txt.in .mp-txt-in { animation: mpTxt .5s var(--xe) both; }
@keyframes mpTxt { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.mp-txt-in { display: flex; flex-direction: column; gap: 5px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.mp-txt-in b { font: 700 22px/1.12 var(--f-display); color: #fff; }
.mp-txt-in span { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.9); }
.mp-txt-in em { font-style: normal; font: 700 12px/1 var(--f-ui); color: var(--lime); margin-top: 2px; }
.mp-cta { width: 100%; }
.xgb-back { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ══════════ Инфраструктура 02.11: фото на ~⅓ ниже (меньше растягиваются — чётче), под ними подробности и действия ══════════ */
.xinfra { gap: 12px; }
.xinfra .xinf-pics img { height: clamp(190px, 34vh, 300px); }
.xinfra .xinf-pics figcaption { font-size: 12px; }
.xinf-d { gap: 6px; }
.xinf-n { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.xinf-n b { font: 700 18px/1.2 var(--f-display); }
.xinf-n em { flex: 0 0 auto; font-style: normal; font: 600 11.5px/1 var(--f-ui); color: var(--faint); }
.xinf-d > span { font-size: 14px; line-height: 1.5; color: var(--sand); opacity: 0.88; }
.xinf-f { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.xinf-f i { font-style: normal; font: 600 12px/1 var(--f-ui); padding: 7px 10px; border-radius: 11px; background: rgba(209, 224, 90, 0.1); border: 1px solid rgba(209, 224, 90, 0.22); color: var(--lime); animation: xUp 0.4s var(--xe) both; }
.xinf-f i:nth-child(2) { animation-delay: 0.05s; } .xinf-f i:nth-child(3) { animation-delay: 0.1s; }
.xinf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.xinf-acts .ghost.mini, .xinf-acts .cta { height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* Материалы 02.11: видео + 6 плиток материалов в 2 колонки */
.xmat { gap: 8px; }
.xmat .xa { flex-direction: row; align-items: center; gap: 10px; padding: 12px 11px; min-height: 64px; }
.xmat .xa i { flex: 0 0 34px; height: 34px; margin: 0; }
.xmat .xa b { font-size: 13px; line-height: 1.2; }
.xmat .xa small { display: block; font-size: 10.5px; margin-top: 2px; }
.xmat .xa > span { min-width: 0; display: flex; flex-direction: column; }

/* ══════════ Камеры стройки 02.11 ══════════ */
.xcamb { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(239, 68, 68, 0.35); background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(14, 14, 16, 0.6)); color: var(--sand); font: inherit; text-align: left; cursor: pointer; }
.xcamb:active { transform: scale(0.98); }
.xcamb > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xcamb b { font: 700 14.5px/1.2 var(--f-display); }
.xcamb small { font-size: 11.5px; color: var(--faint); }
.xcamb em { font-style: normal; font: 700 12.5px/1 var(--f-ui); color: #ff6b6b; white-space: nowrap; }
.xcamb-dot, .xcam-live i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: camPulse 1.6s ease-out infinite; }
@keyframes camPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.xcamw { gap: 10px; }
.xcam-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.xcam-tabs .chip { justify-content: center; font-size: 12.5px; font-weight: 600; padding: 9px 4px; }
html.gem .xcam-tabs .chip:not(.on) { background-color: var(--xg); color: var(--sand); }
.xcam-v { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line); flex: 0 0 auto; }
.xcam-v iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xcam-live { position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 9px; background: rgba(11, 11, 12, 0.7); font: 800 11px/1 var(--f-ui); letter-spacing: 0.5px; color: #fff; pointer-events: none; }
.xcam-live i { width: 8px; height: 8px; }
.xcam-note { font-size: 12.5px; line-height: 1.45; color: var(--faint); }
.xcam-map { position: relative; width: 100%; aspect-ratio: 1600 / 1130; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #111; flex: 0 0 auto; }
.xcam-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xcam-pt { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; background: none; cursor: pointer; }
.xcam-pt b { position: absolute; inset: 7px; display: grid; place-items: center; border-radius: 50%; background: #ef4444; border: 2px solid #fff; color: #fff; font: 800 10.5px/1 var(--f-ui); z-index: 2; animation: camPulse 1.8s ease-out infinite; }
.xcam-pt i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin-left: -22px; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 34px solid rgba(239, 68, 68, 0.28); transform-origin: 50% 0; z-index: 1; pointer-events: none; }
.xcam-pt.on b { background: var(--lime); color: #0b0b0c; border-color: #0b0b0c; }
.xcam-pt.on i { border-bottom-color: rgba(209, 224, 90, 0.35); }