/* ======================================================
   CARDS FINAL APP STYLE
====================================================== */

.mjv2-card{
  position:relative;
  background:
    linear-gradient(180deg, rgba(16,24,40,.96), rgba(10,16,30,.98));
  border:1px solid rgba(110,150,220,.14);
  border-radius:22px;
  overflow:hidden;
  box-shadow:
    0 14px 34px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.mjv2-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.mjv2-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.26),
    0 0 0 1px rgba(110,150,220,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
  border-color:rgba(110,150,220,.22);
}

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

.mjv2-manga-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.mjv2-cover-link{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  background:#0b1018;
  overflow:hidden;
}

.mjv2-cover-link::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:28%;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(7,11,19,.22));
  pointer-events:none;
}

.mjv2-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .24s ease, opacity .24s ease, filter .24s ease;
}

.mjv2-manga-card:hover .mjv2-cover{
  transform:scale(1.03);
  filter:saturate(1.03);
}

.mjv2-card-body{
  position:relative;
  padding:14px 14px 15px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-width:0;
  background:
    linear-gradient(180deg, rgba(13,20,34,.92), rgba(11,17,29,.98));
}

.mjv2-card-title{
  margin:0;
  font-size:17px;
  line-height:1.32;
  font-weight:800;
  letter-spacing:-.015em;
}

.mjv2-card-title a{
  color:var(--mjv2-text);
  text-decoration:none;
}

.mjv2-card-title a:hover{
  text-decoration:none;
  opacity:.96;
}

.mjv2-meta-line{
  color:var(--mjv2-muted);
  font-size:13px;
  line-height:1.45;
  word-break:break-word;
}

.mjv2-meta-small{
  font-size:12px;
}

.mjv2-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.mjv2-card-body .mjv2-btn{
  margin-top:auto;
  width:100%;
}

/* ======================================================
   HOME CARD SPECIAL
====================================================== */

.mjv2-manga-card-home{
  border-radius:24px;
}

.mjv2-manga-card-home .mjv2-cover-link{
  border-bottom:1px solid rgba(255,255,255,.03);
}

.mjv2-manga-card-home .mjv2-card-body{
  gap:6px;
  padding:13px 13px 14px;
}

.mjv2-manga-card-home .mjv2-card-title{
  font-size:15px;
  line-height:1.35;
  min-height:2.7em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.mjv2-manga-card-home .mjv2-home-card-chapter{
  line-height:1.35;
  min-height:1.35em;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:rgba(225,232,245,.68);
  font-size:12px;
  letter-spacing:.01em;
}

/* ======================================================
   LIST ITEM CARD STYLE
====================================================== */

.mjv2-list-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  background:
    linear-gradient(180deg, rgba(16,24,40,.96), rgba(10,16,30,.98));
  border:1px solid rgba(110,150,220,.14);
  border-radius:24px;
  padding:15px;
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
  overflow:hidden;
}

.mjv2-list-item::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.mjv2-list-item:hover{
  transform:translateY(-3px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.24),
    0 0 0 1px rgba(110,150,220,.05),
    inset 0 1px 0 rgba(255,255,255,.04);
  border-color:rgba(110,150,220,.22);
}

.mjv2-list-cover-link{
  flex:0 0 auto;
  display:block;
}

.mjv2-list-cover{
  width:84px;
  height:116px;
  object-fit:cover;
  border-radius:16px;
  display:block;
  background:#0b1018;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.mjv2-list-body{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.mjv2-list-title{
  margin:0;
  font-size:18px;
  line-height:1.28;
  font-weight:800;
  letter-spacing:-.015em;
}

.mjv2-list-title a{
  color:var(--mjv2-text);
  text-decoration:none;
}

.mjv2-list-title a:hover{
  text-decoration:none;
  opacity:.96;
}

.mjv2-list-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* ======================================================
   DETAIL / AUTH / PROFILE CARD
====================================================== */

.mjv2-detail-cover{
  border:1px solid rgba(110,150,220,.14);
  border-radius:20px;
  overflow:hidden;
  box-shadow:
    0 14px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.mjv2-profile-card,
.mjv2-auth-card{
  max-width:720px;
  margin:0 auto;
  background:
    linear-gradient(180deg, rgba(16,24,40,.96), rgba(10,16,30,.98));
  border:1px solid rgba(110,150,220,.14);
  border-radius:24px;
  padding:22px;
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
}

/* ======================================================
   EMPTY / SURFACE STYLE
====================================================== */

.mjv2-empty-state{
  background:
    linear-gradient(180deg, rgba(16,24,40,.96), rgba(10,16,30,.98));
  border:1px solid rgba(110,150,220,.14);
  border-radius:22px;
  padding:22px;
  color:var(--mjv2-text);
  box-shadow:
    0 12px 28px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.mjv2-empty-state h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
}

.mjv2-empty-state p{
  margin:0;
  color:var(--mjv2-muted);
  line-height:1.6;
}

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

@media (max-width:700px){
  .mjv2-card{
    border-radius:20px;
  }

  .mjv2-card-title{
    font-size:16px;
  }

  .mjv2-card-body{
    padding:12px 12px 13px;
  }

  .mjv2-list-item{
    gap:12px;
    padding:12px;
    border-radius:20px;
  }

  .mjv2-list-cover{
    width:74px;
    height:102px;
    border-radius:14px;
  }

  .mjv2-list-title{
    font-size:16px;
  }
}

@media (max-width:480px){
  .mjv2-card{
    border-radius:18px;
  }

  .mjv2-manga-card-home{
    border-radius:20px;
  }

  .mjv2-card-body{
    padding:11px 11px 12px;
  }

  .mjv2-manga-card-home .mjv2-card-title{
    font-size:13px;
  }

  .mjv2-manga-card-home .mjv2-home-card-chapter{
    font-size:11px;
  }

  .mjv2-list-item{
    border-radius:20px;
    align-items:flex-start;
  }

  .mjv2-list-cover{
    width:68px;
    height:94px;
    border-radius:13px;
  }

  .mjv2-list-title{
    font-size:15px;
    line-height:1.3;
  }

  .mjv2-empty-state{
    padding:18px;
    border-radius:18px;
  }
}