@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap");


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: #0b0910;

  color: #f1ebef;

  font-family:
    Inter,
    Arial,
    sans-serif;

  line-height: 1.7;
}


.background {
  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 15% 15%,
      #6b3b5730,
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 70%,
      #8a607430,
      transparent 35%
    );
}


.hidden {
  display: none !important;
}


/* LOGIN */

.login-screen {
  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 25px;
}


.login-card {
  width: 100%;

  max-width: 480px;

  padding: 55px 40px;

  border:
    1px solid #ffffff16;

  border-radius: 28px;

  background:
    #ffffff05;

  box-shadow:
    0 30px 80px #00000035;
}


.eyebrow {
  margin: 0 0 12px;

  color: #c595aa;

  font-size: 10px;

  letter-spacing: 0.22em;

  text-transform: uppercase;
}


.login-card h1,
.dashboard h1,
.checkins-section h2,
.checkin-card h3 {
  font-family:
    "Cormorant Garamond",
    serif;

  font-weight: 500;

  line-height: 0.95;
}


.login-card h1 {
  margin: 0;

  font-size: 58px;
}


.login-text {
  margin:
    25px 0
    35px;

  color: #9f969d;

  font-size: 14px;
}


#loginForm {
  display: flex;

  flex-direction: column;

  gap: 18px;
}


#loginForm label {
  display: flex;

  flex-direction: column;

  gap: 8px;

  color: #b7adb4;

  font-size: 11px;
}


#loginForm input {
  width: 100%;

  padding: 15px;

  border:
    1px solid #ffffff1c;

  border-radius: 12px;

  outline: none;

  background:
    #ffffff06;

  color: white;

  font-family:
    Inter,
    sans-serif;
}


#loginForm input:focus {
  border-color: #c997ad;
}


#loginForm button,
.refresh-button,
.logout-button {
  border: 0;

  border-radius: 100px;

  padding: 14px 22px;

  cursor: pointer;

  font-family:
    Inter,
    sans-serif;

  font-size: 11px;

  transition: 0.25s;
}


#loginForm button {
  margin-top: 10px;

  background: #d5a7bc;

  color: #26161e;
}


#loginForm button:hover,
.refresh-button:hover {
  transform: translateY(-2px);
}


.back {
  display: block;

  margin-top: 28px;

  text-align: center;

  color: #8f8189;

  text-decoration: none;

  font-size: 11px;
}


/* DASHBOARD */

.dashboard {
  max-width: 1200px;

  margin: auto;

  padding: 60px 6%;
}


.dashboard header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  margin-bottom: 55px;
}


.dashboard h1 {
  margin: 0;

  font-size:
    clamp(
      3.5rem,
      8vw,
      6rem
    );
}


.header-actions {
  display: flex;

  align-items: center;

  gap: 12px;
}


.home-link {
  color: #c5b5bd;

  text-decoration: none;

  font-size: 11px;

  padding: 12px 16px;
}


.logout-button {
  background: transparent;

  color: #c7a3b2;

  border:
    1px solid #ffffff20;
}


/* SUMMARY */

.summary {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;

  margin-bottom: 70px;
}


.summary-card {
  padding: 28px;

  border:
    1px solid #ffffff16;

  border-radius: 20px;

  background:
    #ffffff04;
}


.summary-label {
  display: block;

  color: #897d85;

  font-size: 9px;

  letter-spacing: 0.16em;
}


.summary-card strong {
  display: block;

  margin-top: 12px;

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 42px;

  font-weight: 500;

  color: #e4c4d2;
}


/* SECTION */

.section-heading {
  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 20px;

  margin-bottom: 35px;
}


.checkins-section h2 {
  margin: 0;

  font-size: 52px;
}


.refresh-button {
  background: #ffffff08;

  color: #d4b5c3;

  border:
    1px solid #ffffff1c;
}


/* CHECKIN CARD */

.checkins-list {
  display: grid;

  gap: 20px;
}


.checkin-card {
  padding: 32px;

  border:
    1px solid #ffffff16;

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #ffffff06,
      #ffffff02
    );
}


.checkin-top {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  align-items: start;

  padding-bottom: 22px;

  margin-bottom: 22px;

  border-bottom:
    1px solid #ffffff12;
}


.checkin-card h3 {
  margin: 5px 0 0;

  font-size: 32px;
}


.checkin-date {
  color: #bd91a6;

  font-size: 10px;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.mental-score {
  padding: 8px 13px;

  border-radius: 100px;

  background: #d5a7bc15;

  color: #dfb7c9;

  font-size: 11px;
}


.checkin-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 15px;
}


.data-box {
  padding: 17px;

  border-radius: 14px;

  background: #ffffff04;
}


.data-label {
  display: block;

  color: #7f747b;

  font-size: 9px;

  letter-spacing: 0.13em;

  margin-bottom: 7px;
}


.data-value {
  color: #ded5da;

  font-size: 13px;
}


.message-box {
  margin-top: 18px;

  padding: 20px;

  border-left:
    2px solid #c894aa;

  background: #ffffff035;

  border-radius:
    0 12px 12px 0;
}


.message-box strong {
  display: block;

  margin-bottom: 8px;

  color: #bfa2ae;

  font-size: 10px;

  letter-spacing: 0.1em;
}


.message-box p {
  margin: 0;

  color: #c7bec3;

  font-size: 13px;

  white-space: pre-wrap;
}


/* LOADING */

.loading {
  padding: 70px;

  text-align: center;

  color: #897f86;

  font-size: 13px;
}


/* EMPTY */

.empty-state {
  padding: 80px 25px;

  text-align: center;

  border:
    1px solid #ffffff14;

  border-radius: 22px;
}


.empty-heart {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 80px;

  color: #c794aa;
}


.empty-state h3 {
  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 36px;

  font-weight: 500;

  margin: 0;
}


.empty-state p {
  color: #8f858c;

  font-size: 13px;
}


/* ERROR */

.error {
  margin-top: 20px;

  padding: 15px;

  border-radius: 12px;

  background: #5c1e2a55;

  color: #f0a8b6;

  font-size: 12px;
}


/* MOBILE */

@media (max-width: 700px) {

  .dashboard {
    padding:
      40px 6%;
  }


  .dashboard header {
    flex-direction: column;

    align-items: flex-start;

    margin-bottom: 45px;
  }


  .header-actions {
    width: 100%;

    justify-content: space-between;
  }


  .summary {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .section-heading {
    align-items: flex-start;

    flex-direction: column;
  }


  .checkin-grid {
    grid-template-columns: 1fr;
  }


  .checkin-top {
    flex-direction: column;
  }


  .login-card {
    padding: 45px 25px;
  }

}