*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--g1: #d4687a;
--g2: #e891a0;
--g3: #f2b8c2;
--g4: #fff0f3;
--g5: #fff7f8;
--g6: #f5cdd5;
--text: #3a1f28;
--text2: #7a4455;
--text3: #c08898;
--border: #f0d0d8;
--peach: #fce4d6;
--peach2: #f8c8b0;
--mint: #e8f4f0;
--mint2: #c5dfd8;
--sky: #f0eef8;
--sky2: #d8d4f0;
--rose: #FFEFF3;
--rose2: #f5c8d5;
--yellow: #fef8e8;
--yellow2: #e8c870;
}
body {
font-family: 'Inter', sans-serif;
background: #F7F4EF;
color: var(--text);
min-height: 100vh;
}
body::before {
content: '';
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0;
background:
radial-gradient(ellipse 70% 50% at 5% 0%, #FFEFF355 0%, transparent 65%),
radial-gradient(ellipse 50% 40% at 95% 10%, #f5cdd544 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 85% 95%, #FFEFF333 0%, transparent 60%),
radial-gradient(ellipse 55% 40% at 10% 90%, #F7F4EF66 0%, transparent 60%);
}
#root { position: relative; z-index: 1; }
 
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--g6); border-radius: 3px; }
 
@keyframes bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-7px)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes pinPulse { 0%,100%{r:10;opacity:.25} 50%{r:22;opacity:0} }
 
.page { animation: fadeIn .38s cubic-bezier(.4,0,.2,1); }
input, select, button { font-family: 'Inter', sans-serif; }
 
.inp {
width: 100%; padding: 11px 16px; border-radius: 14px;
border: 1.5px solid var(--border); font-size: 14px; color: var(--text);
background: rgba(255,255,255,.85); outline: none;
transition: border .2s, background .2s, box-shadow .2s;
}
.inp:focus {
border-color: var(--g1); background: #FFEFF3;
box-shadow: 0 0 0 4px rgba(212,104,122,.13);
}
.inp.err { border-color: #f87171; background: #fff5f8; }
 
.lbl {
display: block; font-size: 11px; font-weight: 700; color: var(--text3);
text-transform: uppercase; letter-spacing: .7px; margin-bottom: 6px;
}
.card {
background: rgba(247,244,239,.94);
border-radius: 22px; border: 1.5px solid var(--border);
box-shadow: 0 6px 32px rgba(212,104,122,.10), 0 1px 4px rgba(212,104,122,.06);
padding: 28px;
backdrop-filter: blur(8px);
}
.btn-primary {
width: 100%; padding: 13px 0; border-radius: 50px; border: none;
background: linear-gradient(135deg, var(--g1), var(--g2));
color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
transition: all .25s; font-family: 'Inter', sans-serif;
box-shadow: 0 4px 18px rgba(212,104,122,.30); letter-spacing: .3px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(212,104,122,.42); }
.btn-primary:active { transform: translateY(0); }
 
.btn-outline {
padding: 9px 20px; border-radius: 50px;
border: 2px solid var(--g1); background: transparent; color: var(--g1);
font-size: 13px; font-weight: 700; cursor: pointer;
transition: all .2s; font-family: 'Inter', sans-serif;
}
.btn-outline:hover { background: var(--g4); }
 
.tag {
display: inline-block; background: var(--g4);
color: var(--g1); padding: 4px 14px; border-radius: 50px;
font-size: 12px; font-weight: 700; border: 1px solid var(--border);
}
.errtxt { font-size: 11px; color: #f87171; margin-top: 4px; }
 
.toast {
position: fixed; bottom: 28px; right: 28px; z-index: 9999;
background: linear-gradient(135deg, var(--g1), var(--g2));
color: #fff; padding: 14px 22px; border-radius: 16px; font-weight: 700;
font-size: 14px; box-shadow: 0 8px 32px rgba(212,104,122,.38);
transition: all .4s cubic-bezier(.4,0,.2,1); max-width: 340px; pointer-events: none;
}
.toast.hidden { opacity: 0; transform: translateY(100px); }

/* Support notification panel */
@keyframes supportSlideIn { from{opacity:0;transform:translateY(-20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes supportSlideOut { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-20px) scale(.97)} }
#support-notif {
position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
z-index: 99999; pointer-events: none;
display: flex; align-items: center; gap: 13px;
background: rgba(255,255,255,0.97);
border: 1.5px solid var(--border);
border-radius: 20px;
padding: 14px 22px;
box-shadow: 0 8px 36px rgba(212,104,122,.18), 0 2px 8px rgba(212,104,122,.10);
min-width: 260px; max-width: 360px;
backdrop-filter: blur(16px);
animation: supportSlideIn .38s cubic-bezier(.4,0,.2,1) forwards;
}
#support-notif.hiding { animation: supportSlideOut .32s cubic-bezier(.4,0,.2,1) forwards; }
#support-notif .sn-icon {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, var(--g4), var(--g6));
border: 1.5px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
#support-notif .sn-text {
font-size: 14px; font-weight: 600; color: var(--text);
line-height: 1.4; flex: 1;
}
#support-notif .sn-bar {
position: absolute; bottom: 0; left: 0;
height: 3px; border-radius: 0 0 20px 20px;
background: linear-gradient(90deg, var(--g1), var(--g3));
animation: none;
}
@keyframes sn-progress { from{width:100%} to{width:0%} }
 
.tab-btn {
padding: 9px 16px; border-radius: 12px; border: none;
font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800;
cursor: pointer; transition: all .2s; white-space: nowrap;
background: transparent; color: var(--text2);
}
.tab-btn:hover { background: var(--g4); }
.tab-btn.active {
background: linear-gradient(135deg, var(--g1), var(--g2));
color: #fff; box-shadow: 0 4px 14px rgba(212,104,122,.28);
}
 
.auth-tab {
flex: 1; padding: 10px 0; border: none; border-radius: 12px;
font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800;
cursor: pointer; transition: all .2s; background: transparent; color: var(--text3);
}
.auth-tab.active {
background: #FFEFF3; color: var(--g1);
box-shadow: 0 4px 16px rgba(212,104,122,.16);
}
 
.lang-btn {
padding: 6px 14px; border-radius: 50px;
border: 1.5px solid var(--border); background: rgba(255,255,255,.8);
color: var(--text2); font-size: 12px; font-weight: 700;
cursor: pointer; transition: all .2s; font-family: 'Inter', sans-serif;
}
.lang-btn.active {
background: linear-gradient(135deg, var(--g1), var(--g2));
color: #fff; border-color: transparent;
box-shadow: 0 3px 10px rgba(212,104,122,.28);
}
 
.chat-bubble-ai {
background: rgba(247,244,239,.97); border: 1px solid var(--border);
border-radius: 4px 20px 20px 20px; color: var(--text);
}
.chat-bubble-user {
background: linear-gradient(135deg, var(--g1), var(--g2));
color: #fff; border-radius: 20px 4px 20px 20px;
}
.dot-bounce {
width: 8px; height: 8px; border-radius: 50%;
background: var(--g2); animation: bounce 1.2s infinite; display: inline-block;
}
.map-region { cursor: pointer; transition: all .18s; }
.map-pin { cursor: pointer; }
.map-region-item {
display: flex; align-items: center; gap: 8px; padding: 8px 10px;
border-radius: 12px; border: 1.5px solid var(--border);
cursor: pointer; background: rgba(255,255,255,.8); transition: all .15s; margin-bottom: 5px;
}
.map-region-item:hover { background: var(--g4); border-color: var(--g1); }