* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;
}


body {
  min-height: 100vh;

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

  background:
    #f3f6fa;

  color:
    #12263f;
}


/* ========================================
   LOGIN
======================================== */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;

  padding: 30px;

  background:
    linear-gradient(
      135deg,
      #061c31,
      #0c3458
    );
}


.login-wrapper {
  width: 100%;
  max-width: 450px;
}


.login-brand {
  margin-bottom: 24px;

  text-align: center;

  color: white;
}


.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 68px;
  height: 68px;

  margin:
    0
    auto
    14px;

  border-radius: 16px;

  background:
    #2b8cff;

  font-size: 24px;
  font-weight: 800;
}


.login-brand h1 {
  margin: 0;

  font-size: 24px;
}


.login-brand h1 span {
  color:
    #49a0ff;
}


.login-brand p {
  margin:
    6px
    0
    0;

  color:
    #bcd0e2;
}


.login-card {
  padding: 35px;

  border-radius: 18px;

  background:
    white;

  box-shadow:
    0
    20px
    60px
    rgba(0, 0, 0, 0.22);
}


.login-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  border-radius: 13px;

  background:
    #e6f2ff;

  color:
    #1577cf;

  font-size: 21px;
}


.login-card h2 {
  margin:
    18px
    0
    7px;
}


.login-description {
  margin:
    0
    0
    24px;

  color:
    #657a90;

  line-height: 1.6;
}


/* ========================================
   FORMS
======================================== */

.form-group {
  margin-bottom: 19px;
}


.form-group label {
  display: block;

  margin-bottom: 7px;

  font-size: 13px;
  font-weight: 700;
}


.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;

  padding:
    12px
    13px;

  border:
    1px solid
    #ccd7e2;

  border-radius: 8px;

  outline: none;

  background:
    white;

  font: inherit;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color:
    #2386df;

  box-shadow:
    0
    0
    0
    3px
    rgba(
      35,
      134,
      223,
      0.1
    );
}


.form-row {
  display: grid;

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

  gap: 18px;
}


.publish-option {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 20px;

  cursor: pointer;
}


.primary-btn,
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    12px
    19px;

  border-radius: 8px;

  font-weight: 700;

  cursor: pointer;
}


.primary-btn {
  border: none;

  background:
    #147acb;

  color:
    white;
}


.primary-btn:hover {
  background:
    #0968b2;
}


.secondary-btn {
  border:
    1px solid
    #ccd6e1;

  background:
    white;

  color:
    #294058;
}


.full-btn {
  width: 100%;
}


.form-actions {
  display: flex;

  gap: 10px;
}


.form-message {
  margin-top: 15px;

  font-size: 13px;
}


.form-message.error {
  color:
    #bf2727;
}


.form-message.success {
  color:
    #16834c;
}


.back-link {
  display: block;

  margin-top: 22px;

  text-align: center;

  color:
    #63788d;

  text-decoration: none;

  font-size: 13px;
}


/* ========================================
   ADMIN LAYOUT
======================================== */

.admin-layout {
  min-height: 100vh;
}


.admin-sidebar {
  position: fixed;

  top: 0;
  left: 0;

  display: flex;
  flex-direction: column;

  width: 260px;
  height: 100vh;

  background:
    #071d31;

  color:
    white;
}


.admin-brand {
  display: flex;
  align-items: center;

  gap: 12px;

  padding:
    25px
    22px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );
}


.small-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 10px;

  background:
    #2188e3;

  font-weight: 800;
}


.admin-brand strong,
.admin-brand span {
  display: block;
}


.admin-brand span {
  margin-top: 3px;

  color:
    #9fb5ca;

  font-size: 11px;
}


.admin-nav {
  padding:
    20px
    0;
}


.admin-nav a {
  display: flex;
  align-items: center;

  gap: 13px;

  padding:
    14px
    22px;

  color:
    #dce8f3;

  text-decoration: none;

  border-left:
    3px solid
    transparent;
}


.admin-nav a:hover,
.admin-nav a.active {
  background:
    rgba(
      46,
      143,
      229,
      0.14
    );

  border-left-color:
    #2e8fe5;

  color:
    white;
}


.sidebar-footer {
  margin-top: auto;

  padding: 20px;
}


.logout-btn {
  width: 100%;

  padding: 12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  border-radius: 8px;

  background:
    transparent;

  color:
    white;

  cursor: pointer;
}


.admin-main {
  margin-left:
    260px;

  padding:
    42px
    48px
    70px;
}


/* ========================================
   PAGE HEADER
======================================== */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 28px;
}


.admin-eyebrow {
  display: block;

  margin-bottom: 7px;

  color:
    #1678cc;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 1.2px;
}


.page-header h1 {
  margin: 0;

  font-size: 38px;
}


.page-header p {
  margin:
    6px
    0
    0;

  color:
    #64798d;
}


.header-admin-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 65px;
  height: 65px;

  border-radius: 15px;

  background:
    #e6f2ff;

  color:
    #1678cc;

  font-size: 25px;
}


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

.dashboard-stats {
  display: grid;

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

  gap: 20px;

  margin-bottom: 26px;
}


.dashboard-stat {
  display: flex;
  align-items: center;

  gap: 14px;

  padding: 22px;

  border:
    1px solid
    #dce5ed;

  border-radius: 14px;

  background:
    white;
}


.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  border-radius: 12px;
}


.stat-icon.blue {
  background:
    #e5f2ff;

  color:
    #177bcf;
}


.stat-icon.green {
  background:
    #e6f7ee;

  color:
    #168451;
}


.stat-icon.gold {
  background:
    #fff4d7;

  color:
    #c28a00;
}


.dashboard-stat span {
  display: block;

  margin-bottom: 4px;

  color:
    #6a7e91;

  font-size: 12px;
}


.dashboard-stat strong {
  font-size: 24px;
}


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

.admin-card {
  margin-bottom: 26px;

  overflow: hidden;

  border:
    1px solid
    #dce4ec;

  border-radius: 15px;

  background:
    white;
}


.admin-card-header {
  padding:
    24px
    28px;

  border-bottom:
    1px solid
    #e4eaf0;
}


.admin-card-header h2 {
  margin: 0;
}


.admin-card-header p {
  margin:
    5px
    0
    0;

  color:
    #687d91;

  font-size: 13px;
}


.project-form {
  padding:
    28px;
}


.quick-actions {
  display: grid;

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

  gap: 18px;

  padding: 28px;
}


.quick-action-card {
  display: flex;
  align-items: center;

  gap: 15px;

  padding: 20px;

  border:
    1px solid
    #dce5ed;

  border-radius: 12px;

  color:
    inherit;

  text-decoration: none;
}


.quick-action-card > i {
  color:
    #177bcf;

  font-size: 21px;
}


.quick-action-card strong,
.quick-action-card span {
  display: block;
}


.quick-action-card span {
  margin-top: 4px;

  color:
    #728599;

  font-size: 12px;
}


/* ========================================
   PROJECT LIST
======================================== */

.admin-projects-list {
  padding: 20px;
}


.admin-project-item {
  display: flex;
  align-items: center;

  gap: 18px;

  padding: 16px;

  border-bottom:
    1px solid
    #e8edf2;
}


.admin-project-item:last-child {
  border-bottom: none;
}


.admin-project-image,
.admin-project-placeholder {
  flex-shrink: 0;

  width: 100px;
  height: 75px;

  border-radius: 9px;
}


.admin-project-image {
  object-fit: cover;
}


.admin-project-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    #edf2f7;

  color:
    #98a8b7;
}


.admin-project-info {
  flex: 1;
}


.project-top-row {
  display: flex;
  align-items: center;

  gap: 8px;
}


.project-category-badge,
.project-status {
  display: inline-block;

  padding:
    4px
    7px;

  border-radius: 20px;

  font-size: 10px;
  font-weight: 700;
}


.project-category-badge {
  background:
    #eaf3fc;

  color:
    #236da8;
}


.project-status.published {
  background:
    #e3f5eb;

  color:
    #167c4b;
}


.project-status.draft {
  background:
    #f2f3f5;

  color:
    #697783;
}


.admin-project-info h3 {
  margin:
    8px
    0
    5px;
}


.admin-project-info p {
  margin: 0;

  color:
    #687c8f;

  font-size: 12px;
}


.admin-project-actions {
  display: flex;

  gap: 7px;
}


.admin-project-actions button {
  padding:
    9px
    11px;

  border-radius: 7px;

  cursor: pointer;
}


.edit-btn {
  border:
    1px solid
    #cbd8e3;

  background:
    white;

  color:
    #246a9f;
}


.delete-project-btn {
  border: none;

  background:
    #fbe8e8;

  color:
    #ba2929;
}


.empty-admin-state {
  padding: 45px;

  text-align: center;

  color:
    #75889a;
}


.empty-admin-state i {
  font-size: 35px;
}


.hidden {
  display: none !important;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 900px) {

  .admin-sidebar {
    width: 78px;
  }


  .admin-brand > div:last-child,
  .admin-nav a {
    font-size: 0;
  }


  .admin-nav a {
    justify-content: center;
  }


  .admin-nav a i {
    font-size: 18px;
  }


  .admin-main {
    margin-left:
      78px;

    padding:
      30px
      20px;
  }


  .dashboard-stats {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 650px) {

  .form-row,
  .quick-actions {
    grid-template-columns:
      1fr;
  }


  .admin-project-item {
    align-items: flex-start;
    flex-direction: column;
  }


  .admin-project-actions {
    width: 100%;
  }

}