:root { --bg:#07131f; --panel:rgba(13,27,41,.86); --text:#e6f1ff; --accent:#46c2ff; --shadow:0 8px 24px rgba(0,0,0,.35);} *{box-sizing:border-box} html,body{margin:0;height:100%;background:radial-gradient(circle at top,#0f2b45,var(--bg));color:var(--text);font-family:Inter,system-ui,sans-serif} body{display:grid;grid-template-rows:auto 1fr}
.topbar{padding:.55rem 1rem;background:rgba(6,12,20,.62);border-bottom:1px solid rgba(255,255,255,.08)}
.topbar h1{margin:0;font-size:1.06rem;letter-spacing:.01em}
#app{position:relative;height:100%} #scene-container{width:100%;height:100%;min-height:640px}
.store-browser,.info-panel,.promotion-panel{position:absolute;top:1rem;background:var(--panel);backdrop-filter:blur(8px);border:1px solid rgba(70,194,255,.26);border-radius:14px;box-shadow:var(--shadow)}
.store-browser{left:1rem;width:min(300px,calc(100% - 2rem));padding:.9rem;max-height:calc(100% - 2rem);overflow:auto;display:flex;flex-direction:column;gap:.8rem}
.store-browser h2{margin:0;font-size:1rem}
.port-select{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#eaf3ff;border-radius:8px;padding:.4rem .5rem}.poi-tabs{display:flex;gap:.45rem}
.poi-tab{border:1px solid rgba(154,210,255,.35);background:rgba(255,255,255,.06);color:#d9ebff;border-radius:999px;padding:.3rem .6rem;cursor:pointer;font-size:.8rem;line-height:1.1}
.poi-tab.active{border-color:var(--accent);background:rgba(70,194,255,.18)}
.category-filters{display:flex;flex-wrap:wrap;gap:.45rem}.filter-btn{border:1px solid rgba(154,210,255,.35);background:rgba(255,255,255,.06);color:#d9ebff;border-radius:999px;padding:.3rem .6rem;cursor:pointer;font-size:.8rem}.filter-btn.active{border-color:var(--accent);background:rgba(70,194,255,.18)}
.store-list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}.store-item{padding:.6rem .7rem;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer;display:flex;flex-direction:column;gap:.2rem}.store-item.selected{border-color:rgba(70,194,255,.95);background:rgba(70,194,255,.18)} .store-item span{font-size:.8rem;color:#b8d7f3}.sponsored-badge{font-style:normal;font-size:.68rem;margin-left:.35rem;padding:.08rem .35rem;border-radius:999px;background:rgba(255,193,79,.2);border:1px solid rgba(255,193,79,.5);color:#ffe9b6}
.route-meta{font-size:.82rem;color:#cfe4fb;margin:.2rem 0}
.chat-panel{border-top:1px solid rgba(255,255,255,.12);padding-top:.7rem}.chat-header{display:flex;justify-content:space-between;align-items:center}.chat-panel h3{margin:0;font-size:.95rem}.expert-toggle{border:1px solid rgba(220,178,66,.55);background:rgba(220,178,66,.14);color:#fbe8ac;border-radius:999px;font-size:.78rem;padding:.28rem .6rem;cursor:pointer}.expert-toggle.active{background:rgba(220,178,66,.3)}
.chat-messages{display:grid;gap:.4rem;max-height:150px;overflow:auto}.chat-bubble{padding:.5rem .6rem;border-radius:8px;font-size:.85rem;line-height:1.35}.chat-bubble.ai{background:rgba(70,194,255,.12);border:1px solid rgba(70,194,255,.3)}.chat-bubble.user{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.chat-form{margin-top:.55rem;display:grid;grid-template-columns:1fr auto;gap:.4rem}.chat-form input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#eaf3ff;border-radius:8px;padding:.45rem .55rem}.chat-form button{background:rgba(70,194,255,.25);border:1px solid rgba(70,194,255,.6);color:#eaf7ff;border-radius:8px;padding:.45rem .7rem;cursor:pointer}
.info-panel{right:1rem;width:min(360px,calc(100% - 2rem));padding:1rem 1rem .9rem;max-height:calc(100% - 2rem);overflow:auto}
.info-panel h2{margin:.1rem 1.8rem .35rem 0;font-size:1.12rem;line-height:1.25}
.info-panel p{margin:.38rem 0;color:#d8e7f8;font-size:.9rem;line-height:1.35}
.info-panel p strong{color:#f2f8ff}
#store-category{display:inline-block;padding:.12rem .45rem;border:1px solid rgba(70,194,255,.55);border-radius:999px;background:rgba(70,194,255,.14);font-weight:600}
#store-description{padding:.5rem .55rem;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.04)}
.close-btn{position:absolute;right:.55rem;top:.4rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#d8ecff;font-size:1.15rem;line-height:1;border-radius:8px;padding:.18rem .44rem;cursor:pointer}
.panel-enter{animation:panelIn .2s ease-out}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.excursions-section h3,.excursion-detail h3{margin:.7rem 0 .45rem;font-size:.95rem}
.excursion-list{display:grid;gap:.4rem}
.excursion-card{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);border-radius:8px;padding:.45rem .5rem;cursor:pointer}
.excursion-card small{display:block;color:#c7e0f7}
.booking-row{display:grid;grid-template-columns:1fr 90px;gap:.45rem;margin:.55rem 0}
.booking-row select,.booking-row input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#eaf3ff;border-radius:8px;padding:.35rem .45rem}
.booking-actions{display:flex;gap:.45rem;flex-wrap:wrap}
.booking-actions button{background:rgba(70,194,255,.25);border:1px solid rgba(70,194,255,.6);color:#eaf7ff;border-radius:8px;padding:.4rem .55rem;cursor:pointer}

.booking-card{margin-top:.5rem;padding:.65rem;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.05)}
.booking-price{margin:.1rem 0 .45rem;font-size:1.05rem}
.booking-price small{font-weight:500;color:#cfe4fb}
.booking-card .booking-actions button{width:100%;justify-content:center;background:#0b8f6f;border-color:#14b78e;color:#eafff8;font-weight:700;padding:.62rem .75rem}
.promotion-panel{right:1rem;bottom:1rem;top:auto;width:min(340px,calc(100% - 2rem));padding:.8rem;display:flex;gap:.7rem;align-items:flex-start}.promo-icon{font-size:1.7rem}.promotion-panel h3{margin:0 0 .3rem}.promotion-panel p{margin:.15rem 0 .5rem;font-size:.88rem}.promotion-panel button{background:rgba(255,193,79,.25);border:1px solid rgba(255,193,79,.6);color:#fff3c9;border-radius:8px;padding:.4rem .6rem;cursor:pointer}
.hidden{display:none}
@media (max-width:960px){.store-browser{width:min(260px,calc(100% - 2rem))}.info-panel{top:auto;bottom:1rem}}