/* ==================================
   APP LAYOUT
================================== */

.app {

  width: 100%;

  min-height: 100dvh;

  display: flex;

  justify-content: center;
  align-items: center;

  padding: 16px;
}

/* ==================================
   CONTENT AREA
================================== */

.content-area {

  flex: 1;

  min-width: 0;

  min-height: 0;

  display: flex;

  position: relative;
}

/* ==================================
   PAGE VIEW
================================== */

.page-view {

  display: none;

  width: 100%;

  min-width: 0;

  min-height: 0;
}

.page-view.active {

  display: flex;

  animation:
    fadeIn .25s ease;
}

/* ==================================
   CALCULATOR VIEW
================================== */

#calculatorView {

  flex: 1;

  min-width: 0;

  min-height: 0;
}

/* ==================================
   CONVERTER VIEW
================================== */

#converterView {

  flex: 1;

  min-width: 0;

  min-height: 0;
}

/* ==================================
   SECTION SPACING
================================== */

.section {

  padding: 24px;
}

/* ==================================
   EMPTY STATE
================================== */

.empty-state {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  padding: 40px;
}

.empty-state h2 {

  font-size: 2rem;

  margin-bottom: 12px;
}

.empty-state p {

  color: var(--text-secondary);

  max-width: 500px;
}

/* ==================================
   GLASS CARD
================================== */

.glass-card {

  background: var(--glass);

  border: 1px solid var(--border);

  border-radius: 24px;

  backdrop-filter: blur(24px);

  box-shadow: var(--shadow);
}

/* ==================================
   CARD TITLE
================================== */

.card-title {

  font-size: 1.2rem;

  font-weight: 700;

  margin-bottom: 12px;
}

/* ==================================
   CARD DESCRIPTION
================================== */

.card-description {

  color: var(--text-secondary);

  line-height: 1.6;
}

/* ==================================
   LIGHT MODE
================================== */

body[data-theme="light"] .glass-card {

  background: rgba(255,255,255,.80);

  border-color:
    rgba(15,23,42,.08);
}

/* ==================================
   TABLET
================================== */

@media (max-width: 1199px) {

  .content-area {

    width: 100%;
  }

}

/* ==================================
   MOBILE
================================== */

@media (max-width: 767px) {

  .app {

    padding: 0;
  }

  .content-area {

    width: 100%;

    height: 100%;
  }

  .section {

    padding: 18px;
  }

}

/* ==================================
   ULTRA WIDE
================================== */

@media (min-width: 1800px) {

  .app {

    max-width: 1800px;

    margin: 0 auto;
  }

}