/* Sipnelo MAIN luxury theme — Step 3
   Visual overrides only. No auth, database, chat or business logic changes. */
:root{
  --sip-navy:#0b1f33;
  --sip-navy-2:#132a44;
  --sip-navy-3:#1d3a58;
  --sip-rose:#b9796e;
  --sip-rose-2:#cf9a8d;
  --sip-rose-soft:#f4e6e1;
  --sip-cream:#fbf8f4;
  --sip-cream-2:#f4efe9;
  --sip-ink:#182433;
  --sip-muted:#6f7884;
  --sip-border:rgba(185,121,110,.28);
  --sip-shadow:0 14px 34px rgba(11,31,51,.10);
}

html{background:var(--sip-cream)}
body{
  color:var(--sip-ink);
  background:
    radial-gradient(circle at 8% 0%,rgba(207,154,141,.18),transparent 30%),
    radial-gradient(circle at 92% 12%,rgba(19,42,68,.08),transparent 28%),
    linear-gradient(180deg,#fffdfb 0%,var(--sip-cream) 48%,#f7f2ed 100%);
}

.app{position:relative}
h1,h2,h3{color:var(--sip-navy);letter-spacing:-.015em}
h1{font-weight:850}
h2{font-weight:800}
.small,.upload-note,.group-members,.admin-chat-count{color:var(--sip-muted)}

.box,.card,.archive-folder,.admin-user-row,.admin-chat-date-folder,.admin-chat-user-folder{
  background:rgba(255,255,255,.94);
  border:1px solid var(--sip-border);
  box-shadow:var(--sip-shadow);
}
.box,.card{border-radius:20px}
.hero{
  border:1px solid rgba(185,121,110,.38);
  background:linear-gradient(145deg,#fffdfb 0%,#f8ece7 100%);
}

input,textarea,select{
  color:var(--sip-ink);
  background:#fffdfb;
  border:1px solid rgba(19,42,68,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--sip-rose);
  box-shadow:0 0 0 3px rgba(185,121,110,.14);
  background:#fff;
}

button{
  background:linear-gradient(135deg,var(--sip-rose) 0%,var(--sip-rose-2) 100%);
  color:#fff;
  box-shadow:0 7px 18px rgba(185,121,110,.20);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
button:hover{filter:brightness(1.025);box-shadow:0 9px 22px rgba(185,121,110,.25)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.62;box-shadow:none}
.dark,.blue{
  background:linear-gradient(135deg,var(--sip-navy) 0%,var(--sip-navy-3) 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(11,31,51,.18)!important;
}
.gray{background:#697586!important;color:#fff!important}
.green{background:#2f7b67!important;color:#fff!important}
.red{background:#b94a55!important;color:#fff!important}

.badge,.tag{
  background:var(--sip-rose-soft);
  color:#774d46;
  border:1px solid rgba(185,121,110,.18);
}
.avatar{
  color:var(--sip-navy);
  background:linear-gradient(145deg,#f6e9e4,#e9c7bd);
  border:1px solid rgba(185,121,110,.28);
  box-shadow:0 5px 14px rgba(11,31,51,.09);
}

.notice{background:#fff8ed;color:#805c27;border:1px solid rgba(185,121,110,.18)}
.success{background:#edf7f1;color:#245f4d;border-color:#cfe7db}
.danger{background:#fff0f1;color:#8f303c;border-color:#f0cbd0}

.brand-motto{
  color:#e8b9ac;
  background:linear-gradient(135deg,var(--sip-navy),var(--sip-navy-2));
  border:1px solid rgba(207,154,141,.42);
  box-shadow:0 10px 28px rgba(11,31,51,.16);
  letter-spacing:1.5px;
}
.brand-motto::before,.brand-motto::after{color:var(--sip-rose-2)}
.sipnelo-brand-logo{
  background:#fff;
  border:1px solid rgba(185,121,110,.28);
  box-shadow:0 12px 30px rgba(11,31,51,.11);
}

.chip,.discover-tabs button,.langbar button{
  background:#fff!important;
  color:var(--sip-navy)!important;
  border:1px solid rgba(19,42,68,.16)!important;
  box-shadow:none!important;
}
.chip.active,.discover-tabs button.active{
  background:linear-gradient(135deg,var(--sip-navy),var(--sip-navy-2))!important;
  color:#fff!important;
  border-color:var(--sip-navy)!important;
}
.langbar button.active{
  background:var(--sip-navy)!important;
  color:#fff!important;
  border-color:var(--sip-navy)!important;
}

.stat{background:linear-gradient(145deg,#fffaf7,#f3e7e2);border:1px solid rgba(185,121,110,.16)}
.reward{border-color:var(--sip-rose)}
.archive-folder summary,.admin-chat-date-folder>summary{background:#fbf4f0;color:var(--sip-navy)}
.admin-chat-user-folder>summary{background:#f5f7f9;color:var(--sip-navy)}

.messages{background:#f5f2ef;border:1px solid rgba(19,42,68,.08)}
.msg{background:#e7edf3;color:var(--sip-ink)}
.msg.me{background:#f0d9d2;color:#553a35}
.file-link{color:var(--sip-navy);border-color:rgba(19,42,68,.15);background:#fff}
.emoji-bar button,.reaction-bar button{
  background:#fff!important;
  color:var(--sip-ink)!important;
  border-color:rgba(19,42,68,.14)!important;
  box-shadow:none!important;
}
.reaction-bar button.mine-reaction{background:var(--sip-rose-soft)!important;border-color:var(--sip-rose)!important}

.modal{background:rgba(5,18,31,.72);backdrop-filter:blur(6px)}
.modal>div{
  background:#fffdfb;
  border:1px solid rgba(207,154,141,.34);
  box-shadow:0 24px 70px rgba(4,18,31,.28);
}

.nav{
  background:rgba(11,31,51,.97);
  border-top:1px solid rgba(207,154,141,.42);
  box-shadow:0 -9px 28px rgba(11,31,51,.16);
  backdrop-filter:blur(14px);
}
.nav button{
  background:transparent!important;
  color:#cdd6df!important;
  box-shadow:none!important;
}
.nav button.active{color:#efb8aa!important}
.nav button.active::after{
  content:'';
  position:absolute;
  left:32%;right:32%;bottom:5px;height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--sip-rose),var(--sip-rose-2));
}
.notif-badge{background:#c75a68;border:1px solid rgba(255,255,255,.24)}

.cookie,.push-optin-banner,.pwa-install-banner{
  background:linear-gradient(135deg,var(--sip-navy),#172f49);
  border:1px solid rgba(207,154,141,.38);
  box-shadow:0 18px 46px rgba(4,18,31,.30);
}
.cookie p,.push-optin-banner .small,.pwa-install-banner .pwa-copy span{color:#dbe1e7}
.toast{background:linear-gradient(135deg,var(--sip-navy),#172f49);border:1px solid rgba(207,154,141,.30)}

#map,.mini-map{border:1px solid rgba(185,121,110,.28);box-shadow:0 10px 26px rgba(11,31,51,.10)}
.photo,.moment-preview{box-shadow:0 8px 22px rgba(11,31,51,.12)}

/* Step 3 — header and home hierarchy */
.app>.head{
  margin:0 -4px 16px;
  padding:12px 14px;
  border:1px solid rgba(185,121,110,.24);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:0 12px 30px rgba(11,31,51,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.app>.head h1{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  color:var(--sip-navy);
  font-size:29px;
  letter-spacing:-.035em;
}
.sipnelo-header-mark{
  width:46px;
  height:46px;
  margin-right:0;
  border:2px solid rgba(207,154,141,.62);
  box-shadow:0 7px 18px rgba(11,31,51,.12);
}
.app>.head #who{margin-top:3px;color:#657180}
.langbar{align-items:center;flex-wrap:nowrap}
.langbar button{
  min-width:38px;
  padding:7px 8px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.04em;
}
#logout{
  border-radius:999px!important;
  padding:9px 12px!important;
  font-size:12px!important;
  box-shadow:none!important;
}
#v-home>.brand-motto{margin-top:2px;margin-bottom:18px}
#discoverBox{
  position:relative;
  overflow:hidden;
  padding:19px;
  border-color:rgba(185,121,110,.38);
  background:linear-gradient(145deg,#fffdfb 0%,#f6e6e0 100%);
}
#discoverBox::before{
  content:'';
  position:absolute;
  width:150px;height:150px;
  right:-62px;top:-76px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(185,121,110,.20),rgba(185,121,110,0) 70%);
  pointer-events:none;
}
#discoverBox h2,#createBox h2{margin-top:0;font-size:24px}
#categoryChips{padding:5px 1px 9px}
#categoryChips .chip{border-radius:999px!important;padding:9px 13px!important;font-weight:750!important}
#nearbyCount{
  background:rgba(255,255,255,.70);
  color:var(--sip-navy);
  border-color:rgba(185,121,110,.25);
  font-weight:750;
}
#listView,#mapView{border-radius:14px!important}
#createBox{
  padding:19px;
  border-color:rgba(19,42,68,.13);
  background:rgba(255,255,255,.96);
}
#createBox>label.small{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 2px;
}
#createBox input[type=checkbox],#authBox input[type=checkbox]{accent-color:var(--sip-rose)}
#locationStatus{margin:2px 3px 8px}
#v-home>h2[data-i18n="activeInvitesTitle"]{
  margin:22px 2px 10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(185,121,110,.24);
}
#events>.card{
  position:relative;
  overflow:hidden;
}
#events>.card::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--sip-rose),var(--sip-navy-3));
}

@media(max-width:520px){
  body{background:linear-gradient(180deg,#fffdfb 0%,#f8f3ee 100%)}
  .app{padding-left:14px;padding-right:14px}
  .box,.card{border-radius:18px}
  .nav button.active::after{left:28%;right:28%}
  .app>.head{padding:10px 11px;border-radius:18px;gap:7px}
  .app>.head h1{font-size:25px;gap:7px}
  .sipnelo-header-mark{width:40px;height:40px}
  .langbar{gap:3px}
  .langbar button{min-width:31px!important;padding:6px!important;font-size:10px!important}
  #logout{padding:8px 9px!important}
  #discoverBox,#createBox{padding:16px}
  #discoverBox h2,#createBox h2{font-size:22px}
}

@media(prefers-reduced-motion:reduce){
  button,input,textarea,select{transition:none}
}