@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --bg:#0b0b0d;
  --ink:#f3f2f4;
  --dim:#8a8790;
  --line:#232228;
  --pink:#ec4899;
  --pink-soft:#4a1f38;
  --pink-glow:rgba(236,72,153,.35);
  --card:#131114;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(600px 300px at 50% -60px, var(--pink-glow), transparent 70%),
    var(--bg);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.app{
  max-width:760px;
  margin:0 auto;
  padding:32px 24px 60px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ---------- TOP BAR ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.tag{
  font-size:12px;
  color:var(--dim);
  letter-spacing:0.5px;
  display:flex;
  align-items:center;
  gap:8px;
}
.status-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px 7px 12px;
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  border:1px solid transparent;
  backdrop-filter:blur(6px);
  transition:background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.status-badge .dot{margin:0;}
.status-badge.status-online{
  background:linear-gradient(135deg, rgba(111,207,122,0.18), rgba(111,207,122,0.05));
  border-color:rgba(111,207,122,0.4);
  color:#8fe09a;
  box-shadow:0 0 16px -4px rgba(111,207,122,0.45), inset 0 0 0 1px rgba(111,207,122,0.06);
}
.status-badge.status-busy{
  background:linear-gradient(135deg, rgba(242,184,75,0.18), rgba(242,184,75,0.05));
  border-color:rgba(242,184,75,0.4);
  color:#f2c169;
  box-shadow:0 0 16px -4px rgba(242,184,75,0.45), inset 0 0 0 1px rgba(242,184,75,0.06);
}
.status-badge.status-offline{
  background:linear-gradient(135deg, rgba(150,150,158,0.14), rgba(150,150,158,0.04));
  border-color:rgba(150,150,158,0.3);
  color:#a8a6ad;
  box-shadow:0 0 12px -6px rgba(150,150,158,0.3), inset 0 0 0 1px rgba(150,150,158,0.05);
}
.status-badge.state-pop{animation:statusPop .5s ease;}
@keyframes statusPop{
  0%{transform:scale(1);}
  30%{transform:scale(1.08);}
  100%{transform:scale(1);}
}
.tag-note{color:var(--dim); font-size:12px;}
.dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 0 3px var(--pink-soft);
  flex-shrink:0;
  animation:dotpulse 2.4s ease-in-out infinite;
}
@keyframes dotpulse{
  0%,100%{box-shadow:0 0 0 3px var(--pink-soft);}
  50%{box-shadow:0 0 0 6px transparent;}
}
.dot.status-online{background:#6fcf7a; box-shadow:0 0 0 3px rgba(111,207,122,0.25); animation:dotpulse-online 1.8s ease-in-out infinite;}
.dot.status-busy{background:#f2b84b; box-shadow:0 0 0 3px rgba(242,184,75,0.25); animation:dotpulse-busy 1.1s ease-in-out infinite;}
.dot.status-offline{background:#6a6a72; box-shadow:0 0 0 3px rgba(106,106,114,0.2); animation:none;}
@keyframes dotpulse-online{
  0%,100%{box-shadow:0 0 0 3px rgba(111,207,122,0.25);}
  50%{box-shadow:0 0 0 7px rgba(111,207,122,0);}
}
@keyframes dotpulse-busy{
  0%,100%{box-shadow:0 0 0 3px rgba(242,184,75,0.25); opacity:1;}
  50%{box-shadow:0 0 0 5px rgba(242,184,75,0); opacity:0.55;}
}
.mini-status-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.3px;
  vertical-align:middle;
  transition:background .35s ease, color .35s ease, box-shadow .35s ease;
}
.mini-status-badge.status-online{background:rgba(111,207,122,0.15); color:#8fe09a; box-shadow:inset 0 0 0 1px rgba(111,207,122,0.3);}
.mini-status-badge.status-busy{background:rgba(242,184,75,0.15); color:#f2c169; box-shadow:inset 0 0 0 1px rgba(242,184,75,0.3);}
.mini-status-badge.status-offline{background:rgba(150,150,158,0.13); color:#a8a6ad; box-shadow:inset 0 0 0 1px rgba(150,150,158,0.25);}

.nav{
  display:flex;
  gap:4px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:100px;
  padding:4px;
}
.nav-item{
  background:none;
  border:none;
  font-family:'Manrope', sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--dim);
  padding:8px 16px;
  border-radius:100px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:all .2s ease;
}
.nav-item:hover{color:var(--ink);}
.nav-item.is-active{color:#fff; background:var(--pink);}
.nav-item .n{
  font-size:10px;
  opacity:.7;
  font-family:'Unbounded', sans-serif;
}

/* ---------- VIEWS ---------- */
.view{display:none;}
.view.is-active{display:block; animation:rise .5s cubic-bezier(.2,.8,.2,1);}
@keyframes rise{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- HERO (centered, avatar) ---------- */
.hero-center{
  text-align:center;
  margin-bottom:44px;
}
.avatar-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:24px;
}
.avatar{
  width:120px; height:120px;
  border-radius:28px;
  border:2px dashed var(--pink);
  padding:5px;
  display:flex;
  position:relative;
}
.avatar::before{
  content:'';
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle, var(--pink-glow), transparent 70%);
  z-index:-1;
}
.avatar-inner{
  width:100%; height:100%;
  border-radius:20px;
  background:linear-gradient(160deg,#3a1230,#0b0b0d 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Unbounded', sans-serif;
  font-size:40px;
  font-weight:700;
  color:var(--pink);
}

.kicker{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:10px;
  font-weight:600;
}

h1.hero{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:clamp(24px, 4vw, 34px);
  line-height:1.2;
  letter-spacing:-0.5px;
  margin-bottom:16px;
}
h1.hero .highlight{
  background:var(--pink);
  color:#fff;
  padding:2px 10px;
  border-radius:8px;
  display:inline-block;
}

.age-line{
  font-size:15px;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
  margin-bottom:20px;
}
.age-line b{color:var(--ink); font-weight:600;}

.lede{
  font-size:15px;
  line-height:1.6;
  color:#c9c8ce;
  max-width:480px;
  margin:0 auto 28px;
}

.cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--ink);
  color:var(--bg);
  font-family:'Manrope', sans-serif;
  font-weight:700;
  font-size:14px;
  padding:12px 22px;
  border-radius:100px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.cta:hover{background:var(--pink); color:#fff; transform:translateY(-2px);}
.cta.ghost{background:none; color:var(--ink); border:1px solid var(--line);}
.cta.ghost:hover{background:none; border-color:var(--pink); color:var(--pink); transform:translateY(-2px);}

/* ---------- CARDS GRID ---------- */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:8px;
}
.info-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 20px;
  transition:border-color .2s ease, transform .2s ease;
}
.info-card:hover{border-color:var(--pink); transform:translateY(-3px);}
.info-card-icon{
  width:36px; height:36px;
  border-radius:10px;
  background:#1c1a1f;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  font-size:16px;
}
.info-card-title{
  font-family:'Unbounded', sans-serif;
  font-size:15px;
  font-weight:600;
  margin-bottom:8px;
}
.info-card-desc{
  font-size:13px;
  color:var(--dim);
  line-height:1.5;
}

/* ---------- STRIP (facts row, kept for contacts page use) ---------- */
.grid-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:28px;
}
.strip-item{
  padding:14px 16px;
  border-right:1px solid var(--line);
  text-align:center;
}
.strip-item:last-child{border-right:none;}
.strip-label{
  font-size:11px;
  color:var(--dim);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.strip-value{
  font-family:'Unbounded', sans-serif;
  font-size:16px;
  font-weight:500;
}

/* ---------- CONTACTS ---------- */
.contact-list{display:flex; flex-direction:column; gap:10px;}
.contact-row{
  display:grid;
  grid-template-columns:140px 1fr auto;
  align-items:center;
  gap:24px;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  text-decoration:none;
  color:inherit;
  transition:all .2s ease;
}
.contact-row:hover{border-color:var(--pink); transform:translateY(-2px);}
.contact-plat{font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--dim);}
.contact-handle{font-family:'Unbounded', sans-serif; font-size:18px; font-weight:500;}
.contact-note{font-size:13px; color:var(--dim); margin-top:4px; font-weight:400;}
.contact-go{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--dim);
  transition:all .2s cubic-bezier(.2,.8,.2,1);
  flex-shrink:0;
}
.contact-row:hover .contact-go{background:var(--pink); border-color:var(--pink); color:#fff; transform:rotate(45deg);}

.empty-state{
  padding:32px 0;
  color:var(--dim);
  font-size:14px;
  text-align:center;
}

/* ---------- WEATHER CARD ---------- */
.weather-card{
  margin:0 auto;
  max-width:420px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  text-align:left;
}
.weather-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  font-size:13px;
  color:var(--dim);
  flex-wrap:wrap;
}
.weather-ico{font-style:normal; margin-right:4px;}
.weather-loc{color:var(--ink); font-weight:500;}
.weather-cond{
  font-family:'Unbounded', sans-serif;
  font-size:18px;
  font-weight:500;
  margin-bottom:14px;
}
.weather-temp{
  font-size:14px;
  color:var(--dim);
  margin-bottom:10px;
}
.weather-temp b{color:var(--ink); font-weight:600;}
.weather-row{
  display:flex;
  gap:24px;
  font-size:14px;
  color:var(--dim);
  margin-bottom:10px;
  flex-wrap:wrap;
}
.weather-row b{font-weight:600;}
.weather-row b.ok{color:#6fcf7a;}
.weather-row b.warn{color:#f2b84b;}
.weather-row b.bad{color:#e2574c;}
.weather-status{
  font-size:12px;
  color:var(--dim);
}

.footer-note{
  text-align:center;
  font-size:11px;
  color:var(--dim);
  margin-top:auto;
  padding-top:40px;
}

@media (max-width:640px){
  .app{padding:24px 18px 40px;}
  .topbar{justify-content:center; text-align:center;}
  .cards-grid{grid-template-columns:1fr;}
  .grid-strip{grid-template-columns:1fr;}
  .strip-item{border-right:none; border-bottom:1px solid var(--line);}
  .strip-item:last-child{border-bottom:none;}
  .contact-row{grid-template-columns:1fr auto; row-gap:6px;}
  .contact-plat{grid-column:1/2; order:1;}
  .contact-handle{grid-column:1/2; order:2;}
}