/* =========================================
   RESET
========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


:root {

  --bg: #0b0b0b;
  --card: #151515;
  --card-light: #1d1d1d;

  --text: #ffffff;
  --text-muted: #9a9a9a;

  --border: #2a2a2a;

  --primary: #ffffff;
  --primary-text: #000000;

  --danger: #ff4d4d;

}


/* =========================================
   BODY
========================================= */

body {

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

  background:
    var(--bg);

  color:
    var(--text);

  min-height:
    100vh;

}


/* =========================================
   SCREEN
========================================= */

.screen {

  min-height:
    100vh;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  padding:
    20px;

}


.hidden {

  display:
    none !important;

}


/* =========================================
   CONTAINER
========================================= */

.container {

  width:
    100%;

  max-width:
    420px;

}


/* =========================================
   LOADING SCREEN
========================================= */

.loading-screen {

  position:
    fixed;

  inset:
    0;

  background:
    #000;

  z-index:
    9999;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

}


.loading-screen p {

  color:
    var(--text-muted);

  font-size:
    14px;

}


.loader {

  width:
    42px;

  height:
    42px;

  border:
    4px solid #333;

  border-top-color:
    #fff;

  border-radius:
    50%;

  animation:
    spin 0.8s linear infinite;

}


@keyframes spin {

  to {

    transform:
      rotate(360deg);

  }

}


/* =========================================
   LOGO
========================================= */

.logo {

  text-align:
    center;

  margin-bottom:
    35px;

}


.logo-icon {

  width:
    65px;

  height:
    65px;

  margin:
    0 auto 15px;

  border:
    2px solid #fff;

  border-radius:
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    30px;

  font-weight:
    bold;

}


.logo h1 {

  font-size:
    28px;

  margin-bottom:
    8px;

}


.logo p {

  color:
    var(--text-muted);

  font-size:
    14px;

}


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

.card {

  background:
    var(--card);

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

  border-radius:
    20px;

  padding:
    25px;

}


.card h2 {

  font-size:
    22px;

  margin-bottom:
    8px;

}


.subtitle {

  color:
    var(--text-muted);

  font-size:
    14px;

  margin-bottom:
    25px;

}


/* =========================================
   INPUT GROUP
========================================= */

.input-group {

  margin-bottom:
    20px;

}


.input-group label {

  display:
    block;

  font-size:
    14px;

  margin-bottom:
    8px;

  color:
    #d0d0d0;

}


.input-group select,

.input-group input {

  width:
    100%;

  height:
    52px;

  background:
    #0f0f0f;

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

  border-radius:
    12px;

  padding:
    0 15px;

  color:
    #fff;

  font-size:
    15px;

  outline:
    none;

}


.input-group select:focus,

.input-group input:focus {

  border-color:
    #ffffff;

}


/* =========================================
   PASSWORD
========================================= */

.password-box {

  position:
    relative;

}


.password-box input {

  padding-right:
    55px;

}


.password-box button {

  position:
    absolute;

  right:
    0;

  top:
    0;

  height:
    52px;

  width:
    52px;

  background:
    transparent;

  border:
    none;

  color:
    #fff;

  cursor:
    pointer;

  font-size:
    18px;

}


/* =========================================
   BUTTONS
========================================= */

.primary-btn,

.danger-btn {

  width:
    100%;

  height:
    54px;

  border:
    none;

  border-radius:
    14px;

  font-size:
    15px;

  font-weight:
    bold;

  cursor:
    pointer;

  transition:
    0.2s;

}


.primary-btn {

  background:
    #fff;

  color:
    #000;

}


.primary-btn:hover {

  transform:
    translateY(-1px);

  opacity:
    0.9;

}


.primary-btn:disabled {

  opacity:
    0.5;

  cursor:
    not-allowed;

}


.danger-btn {

  margin-top:
    20px;

  background:
    var(--danger);

  color:
    #fff;

}


.danger-btn:hover {

  opacity:
    0.9;

}


/* =========================================
   MESSAGE
========================================= */

.message {

  display:
    none;

  margin-top:
    18px;

  padding:
    12px 15px;

  border-radius:
    10px;

  font-size:
    14px;

  text-align:
    center;

}


.message.success {

  display:
    block;

  background:
    rgba(0, 255, 150, 0.1);

  color:
    #00d084;

  border:
    1px solid rgba(0, 255, 150, 0.2);

}


.message.error {

  display:
    block;

  background:
    rgba(255, 77, 77, 0.1);

  color:
    #ff7070;

  border:
    1px solid rgba(255, 77, 77, 0.2);

}


/* =========================================
   FOOTER
========================================= */

.footer-text {

  text-align:
    center;

  color:
    #666;

  font-size:
    12px;

  margin-top:
    25px;

}


/* =========================================
   DASHBOARD HEADER
========================================= */

.dashboard-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    25px;

}


.welcome-text {

  color:
    var(--text-muted);

  font-size:
    13px;

  margin-bottom:
    5px;

}


.dashboard-header h2 {

  font-size:
    24px;

}


/* =========================================
   SESSION BUTTON
========================================= */

.session-btn {

  width:
    45px;

  height:
    45px;

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

  background:
    var(--card);

  color:
    #fff;

  border-radius:
    12px;

  cursor:
    pointer;

  font-size:
    20px;

}


/* =========================================
   DATE BOX
========================================= */

.date-box {

  background:
    var(--card);

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

  padding:
    15px;

  border-radius:
    14px;

  color:
    var(--text-muted);

  font-size:
    14px;

  margin-bottom:
    18px;

}


/* =========================================
   STATUS CARD
========================================= */

.status-card {

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  background:
    var(--card);

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

  border-radius:
    16px;

  padding:
    20px;

  margin-bottom:
    18px;

}


.status-icon {

  font-size:
    28px;

  color:
    #00d084;

}


.status-card p {

  font-size:
    13px;

  color:
    var(--text-muted);

  margin-bottom:
    5px;

}


.status-card h3 {

  font-size:
    18px;

}


/* =========================================
   DETAILS CARD
========================================= */

.details-card {

  background:
    var(--card);

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

  border-radius:
    16px;

  padding:
    20px;

}


.details-card h3 {

  font-size:
    17px;

  margin-bottom:
    15px;

}


.detail-row {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    15px 0;

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

  font-size:
    14px;

}


.detail-row:last-child {

  border-bottom:
    none;

}


.detail-row span {

  color:
    var(--text-muted);

}


.detail-row strong {

  font-size:
    14px;

}


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

@media (
  max-width: 480px
) {

  .screen {

    padding:
      16px;

    align-items:
      flex-start;

    padding-top:
      40px;

  }


  .card {

    padding:
      20px;

  }


  .logo {

    margin-bottom:
      25px;

  }


  .logo-icon {

    width:
      58px;

    height:
      58px;

    font-size:
      26px;

  }

}