/* UNO Prague — Luxury Boutique 4★ Concierge PWA */
:root{
  --bg:#0a0a0a;
  --bg-soft:#121212;
  --bg-card:#171717;
  --bg-card-hover:#1d1d1d;
  --border:rgba(196,166,97,0.18);
  --border-strong:rgba(196,166,97,0.35);
  --gold:#c4a661;
  --gold-soft:#d4b97a;
  --gold-bright:#e2c789;
  --text:#f5f1e8;
  --text-mute:#a59f93;
  --text-dim:#6b6760;
  --danger:#c47a61;
  --success:#7ec461;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow:0 24px 48px rgba(0,0,0,0.45);
  --radius:14px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow-x:hidden}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bottom);
}

/* RTL support */
body[dir="rtl"]{text-align:right}

/* Headings */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;letter-spacing:0.01em}
h1{font-size:2.6rem;line-height:1.1}
h2{font-size:1.8rem;line-height:1.2}
h3{font-size:1.3rem;line-height:1.3}

/* App shell */
#app{min-height:100vh;display:flex;flex-direction:column}

/* Loader */
.loader{
  position:fixed;inset:0;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:9999;transition:opacity 0.5s;
}
.loader.hide{opacity:0;pointer-events:none}
.loader-logo{
  font-family:var(--serif);font-size:3rem;color:var(--gold);
  letter-spacing:0.3em;margin-bottom:1rem;
}
.loader-bar{width:140px;height:1px;background:rgba(196,166,97,0.15);position:relative;overflow:hidden}
.loader-bar::after{
  content:'';position:absolute;left:-30%;top:0;width:30%;height:100%;
  background:var(--gold);animation:slide 1.4s infinite ease-in-out;
}
@keyframes slide{
  0%{left:-30%}
  100%{left:100%}
}

/* === ONBOARDING === */
.onboarding{
  min-height:100vh;display:flex;flex-direction:column;
  padding:2rem 1.5rem;background:
    radial-gradient(ellipse at top,rgba(196,166,97,0.08) 0%,transparent 60%),
    var(--bg);
}
.ob-hero{text-align:center;padding:3rem 0 2rem;flex:0 0 auto}
.ob-hero-mark{font-family:var(--serif);font-size:4rem;color:var(--gold);letter-spacing:0.4em;margin-bottom:0.5rem}
.ob-hero-sub{font-family:var(--serif);font-size:1.1rem;color:var(--text-mute);letter-spacing:0.25em;text-transform:uppercase}
.ob-hero-tag{margin-top:1.5rem;color:var(--text-mute);font-size:0.95rem;max-width:320px;margin-left:auto;margin-right:auto}

.ob-step{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:1rem}
.ob-step h2{color:var(--gold);margin-bottom:0.5rem;text-align:center}
.ob-step p.hint{color:var(--text-mute);text-align:center;margin-bottom:1.5rem;font-size:0.92rem}

.ob-progress{display:flex;gap:6px;justify-content:center;margin:0.5rem 0 2rem}
.ob-dot{width:24px;height:2px;background:rgba(196,166,97,0.2);transition:all 0.3s}
.ob-dot.active{background:var(--gold);width:40px}

/* Form fields */
.field{margin-bottom:1.2rem}
.field label{display:block;color:var(--text-mute);font-size:0.85rem;margin-bottom:0.4rem;letter-spacing:0.1em;text-transform:uppercase}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-size:1rem;font-family:var(--sans);
  transition:border-color 0.2s,background 0.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--bg-card-hover);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}

/* Pill choices */
.pills{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.5rem}
.pill{
  padding:10px 16px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:999px;
  color:var(--text);font-size:0.92rem;cursor:pointer;
  transition:all 0.2s;
}
.pill.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:500}
.pill:active{transform:scale(0.96)}

/* Language list (onboarding) */
.lang-list{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem}
.lang-btn{
  padding:18px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;color:var(--text);text-align:center;cursor:pointer;
  transition:all 0.2s;
}
.lang-btn.active{border-color:var(--gold);background:var(--bg-card-hover)}
.lang-btn-flag{font-size:1.6rem;margin-bottom:4px}
.lang-btn-name{font-family:var(--serif);font-size:1.1rem;color:var(--gold)}
.lang-btn-native{font-size:0.8rem;color:var(--text-mute);margin-top:2px}

/* Primary button */
.btn{
  display:block;width:100%;padding:16px;border:none;border-radius:10px;
  font-size:1rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;transition:all 0.2s;font-family:var(--sans);
}
.btn-primary{background:var(--gold);color:var(--bg)}
.btn-primary:hover{background:var(--gold-bright)}
.btn-primary:disabled{background:rgba(196,166,97,0.3);color:var(--bg);cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--border)}
.btn-row{display:flex;gap:0.6rem;margin-top:1.5rem}
.btn-row .btn{margin:0;flex:1}

/* === DASHBOARD === */
.app-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);
  background:rgba(10,10,10,0.85);backdrop-filter:blur(20px);
  position:sticky;top:var(--safe-top);z-index:50;
}
.header-brand{font-family:var(--serif);font-size:1.4rem;color:var(--gold);letter-spacing:0.3em}
.header-greeting{font-family:var(--serif);font-size:1rem;color:var(--text-mute)}
.header-actions{display:flex;gap:0.8rem;align-items:center}
.header-icon{
  width:38px;height:38px;border-radius:50%;background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--gold);font-size:1.1rem;border:1px solid var(--border);
}
.header-icon:active{transform:scale(0.92)}

/* Greeting block */
.greeting{padding:2rem 1.5rem 1rem}
.greeting-hello{font-family:var(--serif);font-size:2rem;color:var(--text);margin-bottom:0.3rem}
.greeting-hello .gold{color:var(--gold)}
.greeting-meta{color:var(--text-mute);font-size:0.92rem}
.greeting-location{display:flex;align-items:center;gap:0.4rem;color:var(--text-mute);font-size:0.85rem;margin-top:0.3rem}
.greeting-location .dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* Section grid */
.sections{padding:1rem 1.5rem 6rem;display:grid;grid-template-columns:1fr 1fr;gap:0.9rem}
.section-card{
  position:relative;aspect-ratio:1/1.05;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem;cursor:pointer;display:flex;flex-direction:column;
  justify-content:space-between;transition:all 0.25s;overflow:hidden;
}
.section-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transition:opacity 0.3s;
}
.section-card:active{transform:scale(0.97)}
.section-card:hover::before{opacity:1}
.section-card.feature{grid-column:span 2;aspect-ratio:auto;min-height:120px}
.section-icon{font-size:1.6rem;color:var(--gold);margin-bottom:auto}
.section-title{font-family:var(--serif);font-size:1.25rem;color:var(--text);line-height:1.2;margin-top:0.5rem}
.section-desc{font-size:0.78rem;color:var(--text-mute);margin-top:0.3rem;line-height:1.4}
.section-badge{
  position:absolute;top:0.8rem;right:0.8rem;
  background:var(--gold);color:var(--bg);font-size:0.65rem;
  padding:2px 8px;border-radius:999px;letter-spacing:0.1em;font-weight:600;
}
body[dir="rtl"] .section-badge{right:auto;left:0.8rem}

/* === SECTION DETAIL VIEW === */
.detail{
  position:fixed;inset:0;background:var(--bg);z-index:100;
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform 0.4s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;padding-top:var(--safe-top);
}
.detail.open{transform:translateY(0)}
.detail-header{
  display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem;
  border-bottom:1px solid var(--border);position:sticky;top:0;
  background:rgba(10,10,10,0.9);backdrop-filter:blur(20px);z-index:5;
}
.detail-back{
  width:40px;height:40px;border-radius:50%;background:var(--bg-card);
  border:1px solid var(--border);color:var(--gold);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.detail-title{font-family:var(--serif);font-size:1.4rem;color:var(--gold);flex:1}
.detail-body{padding:1.5rem;flex:1}

/* List items (events, recommendations) */
.list-item{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.1rem;margin-bottom:0.8rem;
  transition:all 0.2s;
}
.list-item h3{color:var(--gold);margin-bottom:0.4rem;font-size:1.15rem}
.list-item .meta{color:var(--text-mute);font-size:0.85rem;margin-bottom:0.4rem;display:flex;gap:0.6rem;flex-wrap:wrap}
.list-item .meta span{display:inline-flex;align-items:center;gap:0.3rem}
.list-item p{color:var(--text);font-size:0.92rem;line-height:1.55}
.list-item .tag{
  display:inline-block;font-size:0.7rem;padding:3px 10px;
  background:rgba(196,166,97,0.12);color:var(--gold);
  border:1px solid var(--border);border-radius:999px;
  margin-top:0.5rem;letter-spacing:0.08em;
}

/* Empty / loading states */
.state{padding:3rem 1rem;text-align:center;color:var(--text-mute)}
.state .icon{font-size:2.5rem;color:var(--gold);margin-bottom:1rem;opacity:0.5}
.state h3{color:var(--gold);margin-bottom:0.5rem}
.spinner{
  width:32px;height:32px;border:2px solid rgba(196,166,97,0.2);
  border-top-color:var(--gold);border-radius:50%;
  animation:spin 0.8s linear infinite;margin:0 auto 1rem;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* AI Guide chat */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 60px - var(--safe-top))}
.chat-body{flex:1;overflow-y:auto;padding:1rem 1.5rem;padding-bottom:1rem}
.msg{margin-bottom:1rem;display:flex;gap:0.6rem;animation:slideUp 0.3s}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.me{justify-content:flex-end}
.msg-bubble{
  max-width:78%;padding:12px 16px;border-radius:18px;
  background:var(--bg-card);border:1px solid var(--border);
  font-size:0.95rem;line-height:1.55;color:var(--text);
}
.msg.me .msg-bubble{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.msg-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--bg-card);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);flex-shrink:0;font-family:var(--serif);font-weight:500;
  border:1px solid var(--border);
}
.chat-compose{
  display:flex;gap:0.5rem;padding:1rem 1.5rem;
  border-top:1px solid var(--border);background:var(--bg);
  padding-bottom:calc(1rem + var(--safe-bottom));
}
.chat-compose input{
  flex:1;padding:14px 18px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:999px;
  color:var(--text);font-size:1rem;
}
.chat-compose input:focus{outline:none;border-color:var(--gold)}
.chat-compose button{
  width:48px;height:48px;border-radius:50%;background:var(--gold);
  color:var(--bg);border:none;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.chat-compose button:disabled{opacity:0.4}

/* Rating stars (feedback) */
.stars{display:flex;justify-content:center;gap:0.8rem;margin:2rem 0;font-size:2.5rem;color:var(--text-dim)}
.stars .star{cursor:pointer;transition:all 0.2s}
.stars .star.on,.stars .star:hover,.stars .star:hover ~ .star{color:var(--gold)}
.stars.up5 .star{color:var(--gold)}

/* VIP card */
.vip-card{
  background:linear-gradient(135deg,#1a1410,#0a0a0a);
  border:1px solid var(--gold);border-radius:var(--radius);
  padding:2rem 1.5rem;text-align:center;
}
.vip-card .crown{font-size:2.5rem;color:var(--gold);margin-bottom:1rem}
.vip-card h2{color:var(--gold);font-family:var(--serif);margin-bottom:0.5rem}

/* Toast */
.toast{
  position:fixed;bottom:calc(2rem + var(--safe-bottom));left:50%;
  transform:translateX(-50%) translateY(120%);
  background:var(--bg-card);border:1px solid var(--gold);
  color:var(--text);padding:14px 22px;border-radius:999px;
  z-index:200;transition:transform 0.3s;font-size:0.92rem;
  box-shadow:var(--shadow);
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* Hide */
.hidden{display:none!important}

/* Small screens */
@media (max-width:340px){
  .sections{grid-template-columns:1fr}
  .section-card{aspect-ratio:auto;min-height:130px}
  .section-card.feature{min-height:130px}
}