*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Arial, sans-serif;
}

/* DASHBOARD NAVBAR */
.dashboard-nav {
  background: linear-gradient(135deg, #0b6e4f 0%, #00b074 100%);
  color: white;
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.dashboard-nav h1 {
  font-size: 24px;
  margin: 0;
  letter-spacing: 1px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-greeting {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.nav-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid white;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
}

.nav-btn:hover {
  background: white;
  color: #0b6e4f;
}

.nav-home-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
  display: inline-block;
}

.nav-home-btn:hover {
  background: white;
  color: #0b6e4f;
}

.logout-btn {
  background: rgba(231, 76, 60, 0.8);
  border-color: #e74c3c;
}

.logout-btn:hover {
  background: #e74c3c;
  color: white;
}

body{
  min-height:100vh;
  background:linear-gradient(135deg, #0b6e4f 0%, #85dcb2 100%);
  color:#fff;
  padding-top: 70px;
}

.dashboard-page{
      width:100%;
      max-width:1100px;
      margin:20px auto;
      padding:40px 20px;
      background:rgba(255,255,255,0.08);
      border-radius:28px;
      box-shadow:0 28px 70px rgba(0,0,0,0.18);
      backdrop-filter:blur(18px);
    }

    .dashboard-header{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:20px;
      margin-bottom:40px;
    }

    .dashboard-header .subtitle{
      text-transform:uppercase;
      letter-spacing:1.8px;
      color:rgba(255,255,255,0.8);
      font-size:14px;
      margin-bottom:12px;
    }

    .dashboard-header h1{
      font-size:40px;
      line-height:1.1;
      margin-bottom:12px;
    }

    .header-text{
      max-width:650px;
      font-size:18px;
      line-height:1.8;
      color:rgba(255,255,255,0.9);
    }

    .overview-section,
    .library-section,
    .review-section{
      margin-bottom:40px;
    }

    .section-title{
      font-size:28px;
      margin-bottom:15px;
      color:#ffffff;
    }

    .section-text{
      font-size:16px;
      color:rgba(255,255,255,0.85);
      margin-bottom:20px;
    }

    .overview-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
      gap:20px;
    }

    .overview-card{
      background:rgba(255,255,255,0.15);
      border:1px solid rgba(255,255,255,0.18);
      border-radius:20px;
      padding:25px;
      text-align:center;
    }

    .overview-value{
      display:block;
      font-size:42px;
      font-weight:700;
      margin-bottom:10px;
    }

    .overview-label{
      font-size:16px;
      color:rgba(255,255,255,0.9);
    }

    .library-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
      gap:20px;
    }

    .library-card{
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.16);
      border-radius:20px;
      padding:25px;
      min-height:220px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }

    .library-card h3{
      margin-bottom:14px;
      color:#ffffff;
    }

    .library-card p{
      color:rgba(255,255,255,0.85);
      line-height:1.7;
      margin-bottom:20px;
      flex:1;
    }

    .library-actions{
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }

    .btn.secondary{
      background:rgba(255,255,255,0.16);
      color:white;
    }

    .review-card,
    .review-list-container{
      background:rgba(255,255,255,0.12);
      border:1px solid rgba(255,255,255,0.16);
      border-radius:20px;
      padding:25px;
      margin-bottom:20px;
    }

    .review-form-row{
      display:flex;
      flex-wrap:wrap;
      gap:20px;
      align-items:center;
      margin-bottom:20px;
    }

    .review-form-row label{
      color:rgba(255,255,255,0.9);
      font-weight:700;
      min-width:110px;
    }

    .review-form-row select{
      flex:1;
      min-width:220px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.25);
      padding:12px 14px;
      background:rgba(255,255,255,0.08);
      color:white;
    }

    textarea{
      width:100%;
      border-radius:16px;
      border:1px solid rgba(255,255,255,0.22);
      background:rgba(255,255,255,0.08);
      color:white;
      padding:16px;
      font-size:16px;
      resize:vertical;
      min-height:140px;
    }

    .review-list h3{
      margin-bottom:18px;
      color:white;
    }

    .review-item{
      border-top:1px solid rgba(255,255,255,0.14);
      padding:18px 0;
    }

    .review-item:first-child{
      border-top:none;
    }

    .review-item strong{
      display:block;
      margin-bottom:8px;
      color:white;
    }

    .review-item p{
      color:rgba(255,255,255,0.9);
      line-height:1.8;
    }

    .empty-review{
      color:rgba(255,255,255,0.8);
      padding:16px 0;
    }

    .btn{
      padding:14px 28px;
      border:none;
      background:#fff;
      color:#0b6e4f;
      font-size:16px;
      border-radius:10px;
      cursor:pointer;
      font-weight:700;
      transition:0.3s;
      text-decoration:none;
      display:inline-block;
    }

    .btn:hover{
      background:#e8f8f2;
    }

    @media(max-width:900px){
      .dashboard-header{
        flex-direction:column;
      }

      .review-form-row{
        flex-direction:column;
        align-items:flex-start;
      }
}