@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --bg:#050507;
  --glass: rgba(35, 12, 20, .52);
  --glass-2: rgba(35, 12, 20, .36);
  --stroke: rgba(255,255,255,.14);
  --stroke-2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --faint: rgba(255,255,255,.55);
  --accent: #ff4d7d;
  --accent-2:#ff2b63;
  --shadow: 0 28px 80px rgba(0,0,0,.55);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}

/* Background */
.bg-layer{
  position:fixed; inset:0;
  background:
    radial-gradient(1100px 700px at 50% 18%, rgba(255,77,125,.22), transparent 55%),
    radial-gradient(900px 700px at 72% 70%, rgba(255,77,125,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.86));
  z-index:-2;
}
.bg-layer::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('https://i.imgur.com/IKTDwdR.jpg');
  background-size: cover;
  background-position: center 15%;
  background-repeat:no-repeat;
  filter: blur(18px) saturate(1.15) contrast(1.06);
  opacity:.55;
  transform: scale(1.06);
}
.bg-layer::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(1000px 600px at 50% 15%, rgba(0,0,0,.12), rgba(0,0,0,.78) 62%),
              linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.92));
}

/* Topbar */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
  backdrop-filter: blur(14px);
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.10);
  z-index:10;
}

.brand__script{
  font-family: "Great Vibes", cursive;
  font-size: 30px;
  letter-spacing:.5px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 8px 30px rgba(255,77,125,.30);
}

.topbar__right{display:flex; align-items:center; gap:12px}

.icon-btn{
  appearance:none;
  border:none;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.icon-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16)}

.burger{width:44px; height:44px; display:grid; place-items:center}
.burger span{display:block; width:18px; height:2px; background: rgba(255,255,255,.82); border-radius:99px; margin:2px 0}

.avatar-btn{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.avatar-btn:hover{transform: translateY(-1px); box-shadow: 0 14px 40px rgba(255,77,125,.12)}

#avatarImg{width:100%; height:100%; object-fit: cover; display:none}
.avatar-fallback{width:100%; height:100%; display:grid; place-items:center; font-size:18px; color: rgba(255,255,255,.90)}

.profile-pop{position:relative}
.profile-pop .pop{
  position:absolute;
  top:52px; right:0;
  width:180px;
  border-radius: 16px;
  background: rgba(15,8,12,.72);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 8px;
  backdrop-filter: blur(16px);
  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.profile-pop.is-open .pop{opacity:1; transform: translateY(0); pointer-events:auto}

.pop__item{
  width:100%;
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.90);
  background: transparent;
  border:none;
  text-align:left;
  cursor:pointer;
  transition: background .18s ease;
  font: inherit;
}
.pop__item:hover{background: rgba(255,255,255,.08)}
.pop__item--danger{color: rgba(255,160,175,.95)}

/* Sidebar */
.sidebar{
  position:fixed;
  top:64px; left:0;
  width: 260px;
  height: calc(100vh - 64px);
  background: rgba(18,8,12,.78);
  border-right: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  padding: 18px 14px;
  transform: translateX(-102%);
  transition: transform .22s ease;
  z-index:12;
}
.sidebar.is-open{transform: translateX(0)}
.sidebar__title{font-weight:600; color: rgba(255,255,255,.90); margin: 6px 8px 12px}

.nav{display:flex; flex-direction:column; gap:8px}
.nav__link{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.nav__link:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14)}
.nav__link.is-active{background: rgba(255,77,125,.14); border-color: rgba(255,77,125,.26)}

.sidebar__hint{margin: 14px 8px 0; color: rgba(255,255,255,.60); font-size: 12px; line-height: 1.35}

.scrim{
  position:fixed; inset:64px 0 0 0;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:11;
}
.scrim.is-show{opacity:1; pointer-events:auto}

/* Page */
.page{min-height:100vh; padding: 92px 18px 40px; display:grid; place-items:center}
.glass{
  width:min(980px, 100%);
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
  padding: 28px 22px;
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(900px 500px at 50% 0%, rgba(255,77,125,.18), transparent 60%);
  pointer-events:none;
}

.page-head{text-align:center; padding: 10px 8px 16px; position:relative}
.page-head__title{
  margin: 6px 0 6px;
  font-family: "Great Vibes", cursive;
  font-weight:400;
  font-size: clamp(42px, 6vw, 70px);
  color: rgba(255,129,165,.95);
  text-shadow: 0 10px 40px rgba(255,77,125,.22);
}
.page-head__sub{margin:0 auto; max-width: 640px; color: var(--muted); line-height: 1.6; font-size: 14px}

.page-body{position:relative}
.page-foot{text-align:center; padding-top: 18px; color: rgba(255,255,255,.55); font-size: 12px}

/* Cards */
.grid{display:grid; gap:14px}
.grid--cards{grid-template-columns: repeat(12, 1fr)}

.card{
  grid-column: span 4;
  background: var(--glass-2);
  border:1px solid var(--stroke-2);
  border-radius: 20px;
  padding: 16px;
  min-height: 162px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.card:hover{transform: translateY(-2px); border-color: rgba(255,77,125,.26); background: rgba(35,12,20,.46); box-shadow: 0 18px 50px rgba(0,0,0,.40)}
.card.is-locked{opacity:.58}
.card.is-locked:hover{transform:none; box-shadow:none; border-color: var(--stroke-2)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size: 12px;
}

.card__title{margin:10px 0 4px; font-weight:600; letter-spacing:.2px}
.card__meta{color: rgba(255,255,255,.64); font-size: 12px}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight:600;
  letter-spacing:.2px;
  color: rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(255,77,125,.95), rgba(255,43,99,.86));
  box-shadow: 0 18px 50px rgba(255,77,125,.14);
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.04)}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn--ghost{background: rgba(255,255,255,.08); box-shadow:none; border: 1px solid rgba(255,255,255,.12)}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row--center{justify-content:center}

/* Timer */
.timer{
  width: min(520px, 100%);
  margin: 14px auto 20px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.timebox{padding: 10px 8px; border-radius: 14px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.10); text-align:center}
.timebox__num{font-weight:700; font-size: 20px}
.timebox__lbl{font-size: 11px; color: rgba(255,255,255,.72); letter-spacing:.4px}

/* Forms */
.field{display:flex; flex-direction:column; gap:6px; margin: 10px 0}
.label{font-size: 12px; color: rgba(255,255,255,.72)}
.input, .textarea, .select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  outline:none;
}
.textarea{min-height: 140px; resize: vertical}
.input:focus, .textarea:focus, .select:focus{border-color: rgba(255,77,125,.35); box-shadow: 0 0 0 4px rgba(255,77,125,.10)}

.split{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}

/* Messages */
.msg-list{display:grid; gap:12px; margin-top: 10px}
.msg-item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  padding: 14px;
  transition: transform .18s ease, border-color .18s ease;
}
.msg-item:hover{transform: translateY(-1px); border-color: rgba(255,77,125,.24)}
.msg-item__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.msg-item__title{margin:0; font-weight:600}
.msg-item__meta{font-size: 12px; color: rgba(255,255,255,.62)}
.msg-item__body{margin: 10px 0 0; color: rgba(255,255,255,.84); white-space: pre-wrap; line-height: 1.55}
.msg-actions{display:flex; gap:8px}

.chip{font-size: 11px; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.78)}

/* Calendar */
.cal-head{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin: 10px 0 16px}
.cal-title{font-weight:700}
.cal-grid{display:grid; grid-template-columns: repeat(7, 1fr); gap: 10px}
.dow{font-size: 11px; color: rgba(255,255,255,.68); text-align:center}
.day{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  min-height: 74px;
  padding: 10px;
  position:relative;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.day:hover{transform: translateY(-1px); border-color: rgba(255,77,125,.22); background: rgba(0,0,0,.18)}
.day.is-today{border-color: rgba(255,77,125,.42)}
.day__num{position:absolute; top:8px; right:10px; font-size: 12px; color: rgba(255,255,255,.70)}
.day__dots{display:flex; gap:6px; flex-wrap:wrap; padding-top: 16px}
.dot{width:7px; height:7px; border-radius: 99px; background: rgba(255,77,125,.95)}

/* Modal */
.modal-overlay{position:fixed; inset:0; background: rgba(0,0,0,.62); display:grid; place-items:center; z-index:50; padding: 18px}
.modal{width:min(560px, 100%); border-radius: 20px; background: rgba(15,8,12,.78); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); backdrop-filter: blur(18px); padding: 16px 16px 14px; position:relative}
.modal__title{margin: 6px 38px 10px 6px}
.modal__close{position:absolute; top: 10px; right: 10px}
.modal__body{padding: 6px}
.modal__actions{display:flex; gap:10px; justify-content:flex-end; padding: 10px 6px 2px}

/* Toast */
.toast-host{position:fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display:grid; gap:10px; z-index:80; width:min(520px, 92vw)}
.toast{display:flex; gap:10px; align-items:center; padding: 12px 14px; border-radius: 16px; background: rgba(10,6,8,.80); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); opacity:0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease}
.toast--show{opacity:1; transform: translateY(0)}
.toast__dot{width:9px; height:9px; border-radius:99px; background: var(--accent)}
.toast--success .toast__dot{background:#6ee7a8}
.toast--error .toast__dot{background:#ff6b6b}
.toast__msg{color: rgba(255,255,255,.88)}

/* Responsive */
@media (max-width: 880px){
  .card{grid-column: span 6}
  .split{grid-template-columns: 1fr}
}
@media (max-width: 560px){
  .page{padding-left: 12px; padding-right: 12px}
  .glass{padding: 22px 14px}
  .card{grid-column: span 12}
  .timer{grid-template-columns: repeat(2, 1fr)}
}