:root {
  --bg: #040913;
  --bg2: #071424;
  --panel: rgba(10, 23, 43, .74);
  --panel2: rgba(255,255,255,.075);
  --line: rgba(132, 222, 255, .18);
  --text: #f5fbff;
  --muted: #9fb4c8;
  --cyan: #72e8ff;
  --violet: #8d7aff;
  --gold: #e8c36c;
  --danger: #ff7891;
  --ok: #7cffc4;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 70% 8%, rgba(141,122,255,.22), transparent 32%), linear-gradient(135deg, var(--bg), var(--bg2)); }
button, input, textarea, select { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
.light { --bg: #f7fbff; --bg2: #eaf3fb; --panel: rgba(255,255,255,.78); --panel2: rgba(10,33,54,.055); --line: rgba(36,83,112,.14); --text: #0d1b2a; --muted: #617487; }
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 420px; gap: 7vw; align-items: center; padding: clamp(24px,7vw,92px); background: linear-gradient(90deg, rgba(3,8,17,.56), rgba(3,8,17,.08)), url("./assets/travel-vision-bg.png") center/cover; }
.login h1 { max-width: 760px; margin: 60px 0 22px; font-size: clamp(42px,5vw,76px); line-height: 1.04; letter-spacing: 0; }
.login p { max-width: 620px; color: #c7d7e8; font-size: 18px; line-height: 1.8; }
.brand { display: flex; align-items: center; gap: 12px; background: transparent; text-align: left; }
.mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #06101d; font-weight: 900; background: linear-gradient(135deg, var(--cyan), var(--violet) 58%, var(--gold)); box-shadow: 0 0 34px rgba(110,231,255,.28); }
.brand small { display: block; color: var(--muted); letter-spacing: .2em; font-size: 10px; margin-top: 3px; }
.traits { display: flex; flex-wrap: wrap; gap: 22px; color: var(--gold); font-weight: 800; margin-top: 36px; }
.panel, .card, .auth { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, var(--panel), rgba(255,255,255,.035)); backdrop-filter: blur(22px); box-shadow: 0 24px 80px rgba(0,0,0,.34); }
.auth { padding: 34px; }
.auth h2 { font-size: 32px; margin: 24px 0; }
.auth label { display: grid; gap: 8px; margin: 15px 0; color: var(--muted); font-size: 13px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.06); color: var(--text); padding: 13px 14px; outline: 0; }
.tabs, .chips, .actions, .topbar, .tagrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tabs { justify-content: space-between; color: var(--muted); font-size: 12px; }
.tabs .active { color: var(--gold); }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.05); }
.seg button, .chips button, .tabbar button { border-radius: 6px; background: transparent; color: var(--muted); padding: 10px 12px; }
.seg .on, .chips button:hover, .tabbar .on { color: var(--text); background: rgba(110,231,255,.13); }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #06101d; font-weight: 900; padding: 12px 16px; }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.055); border-radius: 8px; padding: 11px 14px; }
.full { width: 100%; margin-top: 12px; }
.shell { display: grid; grid-template-columns: minmax(238px,25vw) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; padding: 24px; border-right: 1px solid var(--line); background: rgba(3,9,18,.76); backdrop-filter: blur(20px); }
.side .brand { margin-bottom: 30px; }
.nav { display: grid; gap: 8px; }
.nav button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 13px; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; }
.nav button.on, .nav button:hover { background: rgba(110,231,255,.11); color: var(--text); }
.sidefoot { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.user { display: flex; gap: 10px; align-items: center; background: transparent; color: var(--text); text-align: left; min-width: 0; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(110,231,255,.14); color: var(--cyan); }
.workspace { padding: 24px; min-width: 0; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.header h1 { margin: 0; font-size: clamp(30px,4vw,52px); letter-spacing: 0; }
.header p { color: var(--muted); line-height: 1.7; margin: 8px 0 0; }
.explore { display: grid; grid-template-columns: 1fr 330px; gap: 22px; min-height: calc(100vh - 48px); }
.maphero { position: relative; overflow: hidden; min-height: calc(100vh - 48px); background: linear-gradient(180deg, rgba(4,10,20,.34), rgba(4,10,20,.88)), url("./assets/travel-vision-bg.png") center/cover; }
.hero-copy { position: absolute; z-index: 5; left: clamp(22px,4vw,54px); top: clamp(24px,5vw,62px); max-width: 720px; }
.hero-copy h1 { margin: 0; font-size: clamp(36px,4.8vw,72px); line-height: 1.05; }
.hero-copy p { color: var(--muted); line-height: 1.7; }
.world { position: absolute; inset: 19% 3% 16%; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 52% 48%, rgba(110,231,255,.22), transparent 34%), radial-gradient(ellipse at 44% 48%, rgba(141,122,255,.16), transparent 42%); }
.world:before { content: ""; position: absolute; inset: 8% 7%; border: 1px solid rgba(110,231,255,.22); border-radius: 50%; box-shadow: inset 0 0 50px rgba(110,231,255,.14), 0 0 44px rgba(141,122,255,.14); }
.grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(110,231,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(110,231,255,.1) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, #000 52%, transparent 76%); }
.route { position: absolute; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(110,231,255,.8), transparent); transform-origin: left; }
.r1 { width: 56%; left: 18%; top: 44%; transform: rotate(-12deg); }
.r2 { width: 48%; left: 28%; top: 58%; transform: rotate(18deg); }
.hot { position: absolute; transform: translate(-50%,-50%); display: grid; justify-items: center; gap: 5px; background: transparent; }
.hot i { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(232,195,108,.13), 0 0 26px rgba(232,195,108,.72); }
.hot.on i { background: var(--cyan); box-shadow: 0 0 0 9px rgba(110,231,255,.13), 0 0 34px rgba(110,231,255,.9); }
.hot span { font-size: 12px; text-shadow: 0 2px 10px #000; }
.popup { position: absolute; z-index: 8; right: 34px; top: 36%; width: min(440px, calc(100% - 48px)); display: grid; grid-template-columns: 116px 1fr; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(5,15,29,.78); backdrop-filter: blur(20px); }
.thumb, .miniimg, .cardimg, .cover, .gallery-tile { border-radius: 8px; background-size: cover; background-position: center; }
.thumb { min-height: 132px; }
.tagrow span { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: 6px 9px; font-size: 12px; }
.rail, .stack { display: grid; gap: 14px; align-content: start; }
.card, .panel { padding: 20px; }
.ptitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ptitle b { display: flex; align-items: center; gap: 8px; }
.ptitle small, .gold { color: var(--gold); }
.mini { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.055); }
.miniimg { height: 60px; }
.muted, .card p, .popup p { color: var(--muted); line-height: 1.62; }
.ai { position: absolute; left: 34px; right: 34px; bottom: 28px; z-index: 10; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: rgba(4,12,23,.78); backdrop-filter: blur(20px); transition: .25s ease; }
.ai.open { top: 30%; max-width: 820px; right: auto; }
.msgs { display: grid; gap: 10px; max-height: 220px; overflow: auto; }
.msg { margin: 0; padding: 10px 12px; border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.055); }
.msg.user { justify-self: end; color: #06101d; background: var(--cyan); }
.airow { display: flex; gap: 10px; align-items: center; }
.airow input { border: 0; background: transparent; }
.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.74fr); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.recgrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 13px; }
.day { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: rgba(255,255,255,.055); }
.day small { color: var(--gold); }
.day p { display: grid; gap: 4px; color: var(--muted); }
.wishlist .row { display: grid; grid-template-columns: auto 86px 1fr auto auto; gap: 14px; align-items: center; margin-bottom: 12px; }
.profile-row, .risk, .table-row { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding: 14px 0; }
.tabbar { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; }
.cover { min-height: 320px; }
.detail-hero { display: grid; grid-template-columns: minmax(260px,.85fr) 1fr; gap: 22px; align-items: stretch; }
.geo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.gallery-tile { min-height: 180px; display: flex; align-items: end; padding: 16px; }
.admin { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.admin-side { padding: 24px; border-right: 1px solid var(--line); background: rgba(4,10,20,.78); display: grid; align-content: start; gap: 8px; }
.admin-side .brand { margin-bottom: 22px; }
.stat strong { font-size: 28px; display: block; margin-top: 10px; }
.heat { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.heat i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); }
.temple { background-image: linear-gradient(135deg, #14243a, #755d3a 54%, #e4c775); }
.lake { background-image: linear-gradient(135deg, #063047, #20b8c2 52%, #d8f2e7); }
.city { background-image: linear-gradient(135deg, #172039, #d9a942 48%, #3ab7ff); }
.aurora { background-image: linear-gradient(135deg, #06101d, #197679 48%, #9b7bff); }
.market { background-image: linear-gradient(135deg, #24143d, #13a7a3 45%, #e8c36c); }
@media (max-width: 1080px) {
  .shell, .admin { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto; height: 72px; padding: 8px 10px; border-right: 0; border-top: 1px solid var(--line); }
  .side .brand, .sidefoot { display: none; }
  .nav { grid-template-columns: repeat(7,1fr); }
  .nav button { justify-content: center; flex-direction: column; gap: 4px; padding: 0; font-size: 11px; }
  .workspace { padding-bottom: 92px; }
  .explore, .grid2, .detail-hero { grid-template-columns: 1fr; }
  .maphero { min-height: 820px; }
  .grid3, .grid4, .recgrid, .geo, .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-side { display: none; }
}
@media (max-width: 720px) {
  .login { grid-template-columns: 1fr; padding: 22px; }
  .login h1 { font-size: 40px; margin-top: 34px; }
  .workspace { padding: 14px 14px 92px; }
  .maphero { min-height: 760px; }
  .hero-copy { left: 18px; top: 22px; right: 18px; }
  .world { inset: 22% 0 27%; }
  .popup { left: 14px; right: 14px; top: 43%; grid-template-columns: 1fr; }
  .ai, .ai.open { left: 14px; right: 14px; bottom: 14px; top: auto; max-width: none; }
  .rail, .grid3, .grid4, .recgrid, .geo, .gallery { grid-template-columns: 1fr; }
  .wishlist .row { grid-template-columns: 1fr; align-items: start; }
}