/* ============================================================
   StayPanel — Ana CSS (style.css)
   Geliştirici: adtouchlabs
   ============================================================ */

:root {
  --bg-void:     #0a0907;
  --bg-deep:     #0f0d0a;
  --bg-panel:    #141210;
  --bg-card:     #1a1815;
  --bg-elevated: #201e1a;
  --bg-hover:    #252220;
  --gold:        #c9a84c;
  --gold-light:  #e4c87a;
  --gold-dim:    #9a7a34;
  --gold-glow:   rgba(201,168,76,.12);
  --amber:       #d4884a;
  --cream:       #f0e8d8;
  --cream-dim:   #b8a88a;
  --text-primary:#ede8e0;
  --text-secondary:#9a9080;
  --text-muted:  #5a5448;
  --border:      rgba(201,168,76,.1);
  --border-bright:rgba(201,168,76,.32);
  --success:     #4caf82;
  --danger:      #c94c4c;
  --info:        #4c8ec9;
  --warning:     #c9a84c;
  --radius:      10px;
  --radius-lg:   16px;
  --shadow:      0 4px 24px rgba(0,0,0,.6);
  --shadow-gold: 0 0 40px rgba(201,168,76,.07);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg-void);
  color:var(--text-primary);
  display:flex;
  height:100vh;
  overflow:hidden;
  font-size:14px;
}

::-webkit-scrollbar { width:3px; height:3px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:4px }

/* ── FLASH ─────────────────────────────────────────────────── */
.flash-wrap { position:fixed; top:16px; right:16px; z-index:9999 }
.flash {
  display:flex; align-items:center; gap:9px;
  padding:11px 16px;
  border-radius:var(--radius);
  border:1px solid;
  font-size:13px; font-weight:500;
  box-shadow:var(--shadow);
  animation:slideIn .25s ease;
}
.flash-success { background:rgba(76,175,130,.12); border-color:rgba(76,175,130,.3); color:var(--success) }
.flash-error   { background:rgba(201,76,76,.12);  border-color:rgba(201,76,76,.3);  color:var(--danger) }
.flash-info    { background:rgba(76,142,201,.12); border-color:rgba(76,142,201,.3); color:var(--info) }
.flash-close { background:none; border:none; cursor:pointer; color:inherit; margin-left:6px; opacity:.7 }
.flash-close:hover { opacity:1 }
@keyframes slideIn { from { opacity:0; transform:translateX(16px) } to { opacity:1; transform:translateX(0) } }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar {
  width:228px; min-width:228px;
  background:var(--bg-deep);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:relative; z-index:10;
}
.sidebar::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(to bottom,transparent,var(--gold-dim) 30%,var(--gold) 50%,var(--gold-dim) 70%,transparent);
  opacity:.3;
}

.brand { padding:22px 20px 16px; border-bottom:1px solid var(--border) }
.brand-logo { display:flex; align-items:center; gap:9px; margin-bottom:3px }
.brand-icon {
  width:28px; height:28px; border-radius:7px;
  background:linear-gradient(135deg,var(--gold-dim),var(--gold));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-name { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; color:var(--gold-light); letter-spacing:.03em }
.brand-hotel { font-size:11px; color:var(--cream-dim); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.brand-plan {
  display:inline-block; font-size:9px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:2px 7px; border-radius:4px; margin-top:5px;
}
.plan-starter      { background:rgba(90,84,72,.3);        color:var(--text-muted) }
.plan-professional { background:rgba(201,168,76,.1);       color:var(--gold-dim) }
.plan-enterprise   { background:rgba(201,168,76,.18);      color:var(--gold-light) }
.plan-trial        { background:rgba(76,142,201,.1);       color:var(--info) }

.sidebar-section { padding:14px 10px 4px }
.sidebar-label { font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); padding:0 12px; margin-bottom:5px }

.nav-item {
  display:flex; align-items:center; gap:9px;
  padding:9px 12px; border-radius:var(--radius);
  cursor:pointer; transition:all .15s;
  color:var(--text-secondary); font-size:13px; font-weight:400;
  margin-bottom:1px; border:1px solid transparent;
  text-decoration:none;
}
.nav-item:hover { background:var(--bg-hover); color:var(--cream-dim) }
.nav-item.active { background:var(--gold-glow); color:var(--gold-light); border-color:rgba(201,168,76,.18) }
.nav-item.active::before {
  content:''; position:absolute; left:0; top:25%; bottom:25%;
  width:3px; background:var(--gold); border-radius:0 2px 2px 0;
}
.nav-item { position:relative }
.nav-icon { width:15px; height:15px; flex-shrink:0; opacity:.7 }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity:1 }
.nav-badge {
  margin-left:auto; background:var(--danger); color:#fff;
  font-size:9px; font-weight:700; padding:2px 6px; border-radius:20px;
  min-width:17px; text-align:center;
}
.nav-badge.gold { background:var(--gold); color:var(--bg-void) }

.sidebar-footer { margin-top:auto; padding:12px 10px; border-top:1px solid var(--border) }
.sidebar-credit { text-align:center; font-size:9px; color:var(--text-muted); margin-bottom:9px; letter-spacing:.05em }
.sidebar-credit a { color:var(--gold-dim); text-decoration:none; transition:color .15s }
.sidebar-credit a:hover { color:var(--gold-light) }

.user-chip {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; background:var(--bg-card);
  border-radius:var(--radius); border:1px solid var(--border);
}
.user-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-dim),var(--amber));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--bg-void); flex-shrink:0;
}
.user-info { flex:1; min-width:0 }
.user-name { font-size:12px; font-weight:500; color:var(--cream-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-role { margin-top:2px }
.logout-btn {
  width:28px; height:28px; border-radius:7px; border:1px solid var(--border);
  background:transparent; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); cursor:pointer; transition:all .15s; text-decoration:none; flex-shrink:0;
}
.logout-btn:hover { border-color:var(--danger); color:var(--danger) }

/* ── MAIN / TOPBAR ─────────────────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg-panel) }
.topbar {
  height:54px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 24px; gap:12px;
  background:var(--bg-deep); flex-shrink:0;
}
.topbar-title { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:500; color:var(--cream); flex:1 }
.topbar-actions { display:flex; align-items:center; gap:8px }

.icon-btn {
  width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-card); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; color:var(--text-secondary); position:relative;
}
.icon-btn:hover { border-color:var(--border-bright); color:var(--gold-light) }
.notif-dot { position:absolute; top:5px; right:5px; width:6px; height:6px; background:var(--danger); border-radius:50%; border:1.5px solid var(--bg-deep) }

.ai-status-pill {
  display:flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:20px; border:1px solid;
  font-size:11px; font-weight:600; cursor:pointer; transition:all .2s;
  letter-spacing:.04em; background:none;
  font-family:'DM Sans',sans-serif;
}
.ai-status-pill.on  { border-color:rgba(76,175,130,.4); background:rgba(76,175,130,.08); color:var(--success) }
.ai-status-pill.off { border-color:rgba(90,84,72,.5);   background:var(--bg-card);       color:var(--text-muted) }
.pulse { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.content { flex:1; overflow-y:auto; padding:24px }

/* ── GRID / CARD ───────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }

.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden }
.card:hover { border-color:rgba(201,168,76,.16) }
.card-header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.card-title { font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600; color:var(--cream); letter-spacing:.02em }
.card-body { padding:18px }

/* ── STAT CARDS ────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:20px }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 20px;
  position:relative; overflow:hidden; transition:border-color .2s;
}
.stat-card:hover { border-color:var(--border-bright) }
.stat-card::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:80px; height:80px; border-radius:50%; background:var(--gold-glow); pointer-events:none;
}
.stat-label { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; display:flex; align-items:center; gap:6px }
.stat-value { font-family:'Cormorant Garamond',serif; font-size:31px; font-weight:600; color:var(--cream); line-height:1 }
.stat-value span { font-size:14px; color:var(--gold-dim); font-family:'DM Sans',sans-serif; font-weight:400 }
.stat-change { font-size:11px; margin-top:6px }
.stat-change.up { color:var(--success) }
.stat-change.down { color:var(--danger) }
.stat-icon-bg { position:absolute; bottom:14px; right:16px; opacity:.05; color:var(--gold) }

/* ── SECTION HEADER ────────────────────────────────────────── */
.section-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; gap:12px }
.section-title { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; color:var(--cream) }
.section-sub { font-size:12px; color:var(--text-muted); margin-top:2px }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 15px; border-radius:var(--radius);
  font-size:12px; font-weight:500; font-family:'DM Sans',sans-serif;
  cursor:pointer; border:1px solid transparent; transition:all .15s;
  white-space:nowrap; text-decoration:none;
}
.btn svg { flex-shrink:0 }
.btn-gold { background:linear-gradient(135deg,var(--gold-dim),var(--gold)); color:var(--bg-void); font-weight:600 }
.btn-gold:hover { filter:brightness(1.08); transform:translateY(-1px) }
.btn-outline { background:transparent; border-color:var(--border); color:var(--text-secondary) }
.btn-outline:hover { border-color:var(--border-bright); color:var(--cream-dim) }
.btn-ghost { background:var(--bg-elevated); color:var(--text-secondary); border-color:transparent }
.btn-ghost:hover { background:var(--bg-hover); color:var(--cream-dim) }
.btn-danger { background:rgba(201,76,76,.1); color:var(--danger); border-color:rgba(201,76,76,.2) }
.btn-danger:hover { background:rgba(201,76,76,.2) }
.btn-success { background:rgba(76,175,130,.1); color:var(--success); border-color:rgba(76,175,130,.2) }
.btn-info { background:rgba(76,142,201,.1); color:var(--info); border-color:rgba(76,142,201,.2) }
.btn-sm { padding:5px 10px; font-size:11px }
.btn-lg { padding:11px 22px; font-size:14px }
.btn-block { width:100%; justify-content:center }

/* ── FORMS ─────────────────────────────────────────────────── */
.form-group { margin-bottom:14px }
.form-label {
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:5px; display:flex; align-items:center; gap:5px;
}
.form-input, .form-select, .form-textarea {
  width:100%; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius); padding:9px 13px; color:var(--text-primary);
  font-size:13px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--border-bright) }
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-muted) }
.form-select option { background:var(--bg-elevated) }
.form-textarea { resize:vertical; line-height:1.6 }
.form-error { font-size:11px; color:var(--danger); margin-top:4px }
.form-hint { font-size:11px; color:var(--text-muted); margin-top:4px; line-height:1.5 }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px }

/* ── TABLE ─────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto }
table { width:100%; border-collapse:collapse }
thead th {
  padding:9px 13px; text-align:left;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); font-weight:500;
  border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td { padding:12px 13px; font-size:13px; color:var(--text-secondary); border-bottom:1px solid rgba(201,168,76,.04); vertical-align:middle }
tbody tr:hover td { background:var(--bg-elevated) }

/* ── TAGS / BADGES ─────────────────────────────────────────── */
.tag { display:inline-block; font-size:10px; padding:2px 8px; border-radius:4px; font-weight:600 }
.tag-green   { background:rgba(76,175,130,.1);  color:var(--success) }
.tag-red     { background:rgba(201,76,76,.1);   color:var(--danger) }
.tag-gold    { background:rgba(201,168,76,.1);  color:var(--gold-light) }
.tag-blue    { background:rgba(76,142,201,.1);  color:var(--info) }
.tag-gray    { background:rgba(90,84,72,.3);    color:var(--text-muted) }
.tag-warning { background:rgba(201,168,76,.1);  color:var(--warning) }

.role-badge  { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; letter-spacing:.05em }
.role-superadmin { background:rgba(201,168,76,.1);  color:var(--gold-light); border:1px solid rgba(201,168,76,.22) }
.role-admin      { background:rgba(76,142,201,.1);  color:var(--info);       border:1px solid rgba(76,142,201,.2) }
.role-staff      { background:rgba(90,84,72,.25);   color:var(--text-secondary); border:1px solid var(--border) }

.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px }

/* ── CHAT SOURCE TAGS ──────────────────────────────────────── */
.chat-source-tag { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:4px; text-transform:uppercase }
.src-instagram { background:rgba(225,48,108,.14); color:#e1306c }
.src-whatsapp  { background:rgba(37,211,102,.1);  color:#25d366 }
.src-web       { background:rgba(201,168,76,.1);  color:var(--gold-light) }
.src-telegram  { background:rgba(41,182,246,.1);  color:#29b6f6 }
.src-facebook  { background:rgba(24,119,242,.1);  color:#1877f2 }
.src-phone     { background:rgba(76,175,130,.1);  color:var(--success) }
.src-walkin    { background:rgba(156,39,176,.1);  color:#ce93d8 }
.src-ai        { background:var(--gold-glow);     color:var(--gold-light) }

/* ── PROGRESS BAR ──────────────────────────────────────────── */
.progress-bar { height:3px; background:var(--bg-elevated); border-radius:2px; overflow:hidden; margin-top:6px }
.progress-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--gold-dim),var(--gold)) }

/* ── TOGGLE ────────────────────────────────────────────────── */
.toggle { width:52px; height:26px; background:var(--bg-elevated); border-radius:13px; border:1px solid var(--border); cursor:pointer; position:relative; transition:all .3s }
.toggle.on { background:linear-gradient(90deg,rgba(76,175,130,.25),rgba(76,175,130,.12)); border-color:rgba(76,175,130,.4) }
.toggle-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text-muted); transition:all .3s cubic-bezier(.68,-.55,.265,1.55); box-shadow:0 2px 6px rgba(0,0,0,.4) }
.toggle.on .toggle-knob { left:29px; background:var(--success) }
.toggle-text { font-size:10px; font-weight:700; letter-spacing:.1em }
.toggle-text.on  { color:var(--success) }
.toggle-text.off { color:var(--text-muted) }

/* ── MODAL ─────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px); z-index:1000;
  display:none; align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; animation:fadeIn .2s ease }
.modal {
  background:var(--bg-card); border:1px solid var(--border-bright);
  border-radius:var(--radius-lg); padding:24px;
  width:520px; max-width:95vw; max-height:92vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.7),var(--shadow-gold);
}
.modal-title {
  font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600;
  color:var(--cream); margin-bottom:18px; padding-bottom:12px;
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px;
}
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; padding-top:14px; border-top:1px solid var(--border) }

/* ── CHAT UI ───────────────────────────────────────────────── */
.chat-layout { display:grid; grid-template-columns:268px 1fr; height:calc(100vh - 54px); background:var(--bg-card); border-top:1px solid var(--border) }
.chat-sidebar { border-right:1px solid var(--border); display:flex; flex-direction:column }
.chat-search { padding:10px; border-bottom:1px solid var(--border) }
.chat-filter-row { display:flex; gap:4px; margin-bottom:7px; flex-wrap:wrap }
.search-input { width:100%; background:var(--bg-elevated); border:1px solid var(--border); border-radius:8px; padding:7px 11px; color:var(--text-primary); font-size:12px; font-family:'DM Sans',sans-serif; outline:none }
.search-input:focus { border-color:var(--border-bright) }
.search-input::placeholder { color:var(--text-muted) }
.chat-list { overflow-y:auto; flex:1 }
.chat-item { padding:10px 12px; cursor:pointer; transition:background .15s; border-bottom:1px solid rgba(201,168,76,.04); position:relative }
.chat-item:hover { background:var(--bg-elevated) }
.chat-item.active { background:var(--gold-glow) }
.chat-item-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px }
.chat-item-name { font-size:13px; font-weight:500; color:var(--cream-dim) }
.chat-item-time { font-size:10px; color:var(--text-muted) }
.chat-item-preview { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.unread-badge { position:absolute; right:11px; bottom:12px; width:17px; height:17px; background:var(--gold); border-radius:50%; font-size:9px; font-weight:700; color:var(--bg-void); display:flex; align-items:center; justify-content:center }
.chat-main { display:flex; flex-direction:column }
.chat-header { padding:12px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px }
.chat-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#2a2318,#3a3020); display:flex; align-items:center; justify-content:center; border:1px solid var(--border); flex-shrink:0; color:var(--gold-dim) }
.chat-contact-name { font-size:14px; font-weight:500; color:var(--cream) }
.chat-contact-sub { font-size:11px; color:var(--text-muted); margin-top:1px }
.chat-messages { flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:10px }
.msg-wrap { display:flex; flex-direction:column }
.msg-wrap.me { align-items:flex-end }
.msg-wrap.them { align-items:flex-start }
.msg-bubble { max-width:65%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.55 }
.msg-wrap.me .msg-bubble { background:var(--gold-glow); border:1px solid rgba(201,168,76,.2); color:var(--cream); border-bottom-right-radius:3px }
.msg-wrap.them .msg-bubble { background:var(--bg-elevated); border:1px solid var(--border); color:var(--cream-dim); border-bottom-left-radius:3px }
.msg-time { font-size:10px; color:var(--text-muted); margin-top:3px }
.ai-msg-label { font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:3px; display:flex; align-items:center; gap:4px }
.chat-input-area { padding:11px 18px; border-top:1px solid var(--border); display:flex; gap:8px; align-items:flex-end }
.chat-input { flex:1; background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px; padding:8px 12px; color:var(--text-primary); font-size:13px; font-family:'DM Sans',sans-serif; outline:none; resize:none; max-height:100px; line-height:1.5; transition:border-color .2s }
.chat-input:focus { border-color:var(--border-bright) }
.chat-input::placeholder { color:var(--text-muted) }

/* ── ONBOARDING ────────────────────────────────────────────── */
.onboarding-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg-void); padding:24px }
.onboarding-card { width:560px; max-width:100%; background:var(--bg-card); border:1px solid var(--border-bright); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.7),var(--shadow-gold) }
.onboarding-header { padding:28px 32px 20px; border-bottom:1px solid var(--border) }
.onboarding-step-track { display:flex; gap:4px; margin-bottom:16px }
.step-dot { flex:1; height:3px; border-radius:2px; background:var(--bg-elevated) }
.step-dot.done { background:var(--gold) }
.step-dot.active { background:var(--gold-light) }
.onboarding-body { padding:28px 32px }
.onboarding-foot { padding:16px 32px 24px; display:flex; justify-content:space-between; align-items:center }

/* ── AUTH SAYFALAR ─────────────────────────────────────────── */
.auth-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; background:radial-gradient(ellipse at 30% 50%,rgba(201,168,76,.04) 0%,transparent 70%),var(--bg-void); padding:24px }
.auth-card { width:440px; max-width:100%; background:var(--bg-card); border:1px solid var(--border-bright); border-radius:var(--radius-lg); padding:36px; box-shadow:0 24px 80px rgba(0,0,0,.8),var(--shadow-gold) }
.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:28px }
.auth-title { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; color:var(--cream); margin-bottom:6px }
.auth-sub { font-size:13px; color:var(--text-secondary); margin-bottom:24px; line-height:1.6 }
.auth-link { color:var(--gold-light); text-decoration:none; font-weight:500 }
.auth-link:hover { color:var(--gold) }
.auth-divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-muted); font-size:11px }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border) }

/* ── BILLING / PLANS ───────────────────────────────────────── */
.plan-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; transition:all .2s; position:relative }
.plan-card:hover { border-color:var(--border-bright); transform:translateY(-2px) }
.plan-card.recommended { border-color:var(--gold); box-shadow:var(--shadow-gold) }
.plan-recommended-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold-dim),var(--gold)); color:var(--bg-void); font-size:9px; font-weight:700; letter-spacing:.12em; padding:3px 12px; border-radius:20px; text-transform:uppercase }
.plan-name { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--cream); margin-bottom:4px }
.plan-price { font-family:'JetBrains Mono',monospace; font-size:32px; color:var(--gold-light); line-height:1 }
.plan-price span { font-size:14px; color:var(--text-muted); font-family:'DM Sans',sans-serif }
.plan-features { list-style:none; margin:18px 0; display:flex; flex-direction:column; gap:9px }
.plan-features li { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary) }
.plan-features li.yes { color:var(--cream-dim) }
.plan-features li.no  { color:var(--text-muted); text-decoration:line-through }

/* ── MISC ──────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:16px 0 }
[data-tip] { position:relative }
[data-tip]::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); background:var(--bg-elevated); border:1px solid var(--border-bright); color:var(--cream-dim); font-size:10px; padding:3px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s }
[data-tip]:hover::after { opacity:1 }
.mono { font-family:'JetBrains Mono',monospace }
.text-gold { color:var(--gold-light) }
.text-muted { color:var(--text-muted) }
.text-success { color:var(--success) }
.text-danger { color:var(--danger) }
.text-cream { color:var(--cream-dim) }
.info-box { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; font-size:12px; color:var(--text-secondary); line-height:1.6 }
.info-box.info { border-color:rgba(76,142,201,.2); background:rgba(76,142,201,.06); color:var(--info) }
.info-box.warn { border-color:rgba(201,168,76,.2); background:rgba(201,168,76,.06); color:var(--warning) }

/* ── ROOM CARDS ────────────────────────────────────────────── */
.room-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px }
.room-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all .2s }
.room-card:hover { border-color:var(--border-bright); transform:translateY(-2px); box-shadow:var(--shadow-gold) }
.room-thumb { height:130px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden }
.room-thumb-icon { position:relative; z-index:1; opacity:.2; color:var(--gold) }
.room-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,var(--bg-card) 0%,transparent 55%) }
.room-quota-badge { position:absolute; top:10px; right:10px; background:rgba(10,9,7,.85); border:1px solid var(--border-bright); color:var(--gold-light); font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; z-index:1; font-family:'JetBrains Mono',monospace }
.room-info { padding:14px 16px }
.room-name { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:600; color:var(--cream); margin-bottom:3px }
.room-prices { display:flex; gap:8px; margin:8px 0 }
.price-tag { background:var(--bg-elevated); border-radius:8px; padding:6px 11px; text-align:center; flex:1 }
.price-label { font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted) }
.price-value { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:500; color:var(--gold-light); margin-top:2px }
.room-actions { display:flex; gap:6px; margin-top:10px }

/* ── HOURLY PICKER ─────────────────────────────────────────── */
.time-range-wrap { display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:center }
.time-sep { text-align:center; font-size:12px; color:var(--text-muted); font-weight:600 }
.hourly-summary { background:var(--bg-elevated); border-radius:var(--radius); padding:11px 14px; border:1px solid var(--border-bright); display:flex; justify-content:space-between; align-items:center; margin-top:4px }
.hourly-duration { font-size:12px; color:var(--text-secondary) }
.hourly-price { font-family:'JetBrains Mono',monospace; font-size:17px; color:var(--gold-light); font-weight:500 }

/* ── DATE TABS ─────────────────────────────────────────────── */
.date-tabs { display:flex; gap:3px; background:var(--bg-elevated); border-radius:8px; padding:3px }
.date-tab { padding:5px 11px; border-radius:6px; font-size:11px; font-weight:500; cursor:pointer; color:var(--text-secondary); transition:all .15s; white-space:nowrap }
.date-tab.active { background:var(--bg-card); color:var(--gold-light); border:1px solid var(--border-bright) }
.date-tab:hover:not(.active) { color:var(--cream-dim) }

/* ── 403 PAGE ──────────────────────────────────────────────── */
.error-page { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:40px; text-align:center }
.error-code { font-family:'Cormorant Garamond',serif; font-size:72px; color:var(--gold-dim); line-height:1 }
.error-title { font-size:18px; color:var(--cream-dim); margin:12px 0 6px }
.error-desc { font-size:13px; color:var(--text-muted); max-width:360px; line-height:1.7 }

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fadeIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.page-animate { animation:fadeIn .22s ease }