:root {
    --panel-width: min(390px, calc(100vw - 32px));
    --white: #fff;
    --ink: #262626;
    --muted: #747474;
    --line: rgba(35, 35, 35, .10);
    --soft: rgba(242, 242, 240, .82);
    --soft-solid: #f1f1ef;
    --gold: #c8ad79;
    --gold-light: #eadfc6;
    --panel-shadow: 0 28px 90px rgba(0,0,0,.22);
    --safe-top: max(18px, env(safe-area-inset-top));
    --safe-bottom: max(18px, env(safe-area-inset-bottom));
    --safe-left: max(18px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body {
    color: var(--ink);
    background:#222;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { font:inherit; -webkit-tap-highlight-color:transparent; }
button { color:inherit; }

.tour-app { position:relative; width:100%; height:100%; height:100dvh; overflow:hidden; }
.tour-frame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#222; transition:opacity .28s ease; }
.tour-app.is-switching .tour-frame { opacity:.35; }
.tour-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.12), transparent 36%); }

.loading-overlay {
    position:absolute; inset:0; z-index:50; display:grid; place-items:center;
    visibility:hidden; opacity:0; background:rgba(20,20,20,.24);
    backdrop-filter:blur(3px); transition:opacity .25s ease, visibility .25s ease;
    pointer-events:none;
}
.loading-overlay.is-visible { visibility:visible; opacity:1; pointer-events:auto; }
.loading-card {
    display:flex; align-items:center; gap:13px; padding:16px 20px;
    color:#303030; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.75);
    border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.18);
    backdrop-filter:blur(24px);
}
.loading-card p { margin:0; font-size:.88rem; font-weight:650; }
.loader {
    width:22px; height:22px; border-radius:50%;
    border:2px solid rgba(0,0,0,.12); border-top-color:var(--gold);
    animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.control-panel {
    position:absolute; z-index:30; top:var(--safe-top); left:var(--safe-left);
    display:flex; flex-direction:column; width:var(--panel-width);
    max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom));
    overflow:hidden; background:rgba(20,65,140,.80);
    border:1px solid rgba(255,255,255,.76); border-radius:26px;
    box-shadow:var(--panel-shadow);
    backdrop-filter:blur(30px) saturate(120%);
    -webkit-backdrop-filter:blur(30px) saturate(120%);
}

.panel-header {
    position:relative; flex:0 0 auto; padding:23px 22px 20px;
    border-bottom:1px solid var(--line); background:rgba(255,255,255,.34);
}
.brand-lockup { display:flex; flex-direction:column; align-items:center; text-align:center; }
.brand-logo { display:block; width:auto; max-width:220px; height:64px; object-fit:contain; object-position:center; }
.brand-text { letter-spacing:.36em; font-size:1.8rem; }
.brand-lockup p { margin:9px 0 2px; font-size:.76rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
.brand-lockup span { color:#ffffff; font-size:.75rem; }

.panel-close { display:none; }
.panel-content { overflow:auto; padding:20px; overscroll-behavior:contain; scrollbar-width:thin; }
.panel-section + .panel-section { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }

.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:13px; }
.eyebrow { margin:0 0 2px; color:#9b8154; font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.section-heading h2 { margin:0; font-size:1.18rem; letter-spacing:-.02em; }
.space-count {
    display:grid; place-items:center; min-width:31px; height:31px; padding:0 8px;
    color:#6c604b; font-size:.77rem; font-weight:750; background:var(--gold-light); border-radius:999px;
}

.room-grid { display:grid; gap:10px; }
.room-card {
    position:relative; display:grid; grid-template-columns:88px minmax(0,1fr) 22px;
    align-items:center; gap:13px; width:100%; min-height:78px; padding:8px 13px 8px 8px;
    text-align:left; background:rgba(255,255,255,.63); border:1px solid rgba(33,33,33,.08);
    border-radius:16px; box-shadow:0 4px 16px rgba(0,0,0,.035);
    cursor:pointer; overflow:hidden;
    transition:transform .17s ease, box-shadow .17s ease, border-color .17s ease, background .17s ease;
}
.room-card:hover { transform:translateY(-1px); background:rgba(255,255,255,.9); box-shadow:0 10px 25px rgba(0,0,0,.08); }
.room-card.is-active { border-color:rgba(178,143,78,.54); background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(234,223,198,.78)); box-shadow:0 10px 28px rgba(122,95,44,.15); }
.room-card.is-active::after { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--gold); }
.room-image { display:block; width:88px; height:62px; overflow:hidden; border-radius:11px; background:#ddd; }
.room-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.room-card:hover .room-image img { transform:scale(1.04); }
.overview-image { display:grid; place-items:center; background:linear-gradient(145deg, #dad6cd, #f5f2ec); }
.overview-image svg { width:58px; fill:none; stroke:#987d4d; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.room-copy { min-width:0; }
.room-copy strong { display:block; overflow:hidden; color:#292929; font-size:.89rem; line-height:1.23; text-overflow:ellipsis; }
.room-copy small { display:block; margin-top:4px; overflow:hidden; color:var(--muted); font-size:.71rem; white-space:nowrap; text-overflow:ellipsis; }
.room-arrow { color:#8d8d8d; font-size:1.55rem; font-weight:300; transition:transform .17s ease; }
.room-card:hover .room-arrow { transform:translateX(2px); }

.action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.action-card {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    min-height:70px; padding:9px 5px; color:#3b3b3b; text-decoration:none;
    background:rgba(255,255,255,.58); border:1px solid rgba(33,33,33,.08);
    border-radius:15px; cursor:pointer; transition:transform .17s ease, background .17s ease, box-shadow .17s ease;
}
.action-card:hover { transform:translateY(-1px); background:#fff; box-shadow:0 9px 20px rgba(0,0,0,.07); }
.action-card svg { width:21px; height:21px; fill:none; stroke:#8c7040; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.action-card span { font-size:.7rem; font-weight:700; }
.share-status { min-height:17px; margin:10px 0 0; color:var(--muted); font-size:.72rem; text-align:center; }

.menu-toggle, .panel-backdrop { display:none; }
:focus-visible { outline:3px solid rgba(200,173,121,.75); outline-offset:2px; }

@media (max-width:760px) {
    .tour-shade { display:none; }
    .menu-toggle {
        position:absolute; z-index:45; top:var(--safe-top); right:max(18px, env(safe-area-inset-right)); left:auto;
        display:grid; place-content:center; gap:5px; width:54px; height:54px; padding:0;
        background:rgba(248,248,246,.88); border:1px solid rgba(255,255,255,.8);
        border-radius:17px; box-shadow:0 14px 40px rgba(0,0,0,.22);
        backdrop-filter:blur(22px); cursor:pointer;
    }
    .menu-toggle span { display:block; width:22px; height:2px; background:#333; border-radius:10px; }
    .control-panel {
        position:fixed; top:var(--safe-top); bottom:var(--safe-bottom); right:max(18px, env(safe-area-inset-right)); left:auto;
        width:min(91vw,390px); max-height:none;
        transform:translateX(calc(100% + 25px));
        transition:transform .28s cubic-bezier(.2,.8,.2,1);
    }
    .control-panel.is-open { transform:translateX(0); }
    .panel-close {
        position:absolute; z-index:2; top:13px; right:13px; display:grid; place-items:center;
        width:40px; height:40px; padding:0; background:rgba(255,255,255,.65);
        border:1px solid rgba(0,0,0,.08); border-radius:13px; cursor:pointer;
    }
    .panel-close svg { width:19px; fill:none; stroke:#333; stroke-width:1.8; stroke-linecap:round; }
    .panel-backdrop {
        position:fixed; inset:0; z-index:25; display:block; visibility:hidden; opacity:0;
        background:rgba(10,10,10,.42); transition:opacity .22s ease, visibility .22s ease;
    }
    .panel-backdrop.is-visible { visibility:visible; opacity:1; }
    body.menu-open { touch-action:none; }
}
@media (max-width:390px) {
    :root { --safe-left:max(9px, env(safe-area-inset-left)); }
    .control-panel { width:calc(100vw - 18px); }
    .panel-content { padding:16px; }
    .panel-header { padding-inline:16px; }
    .brand-logo { max-width:190px; }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}