/*
  MOXHO Watchlist
  Dark theme + UI polish (Bootstrap 5.3)
*/

:root{
  --moxho-radius: 18px;
  --moxho-radius-sm: 12px;
  --moxho-shadow: 0 18px 60px rgba(0,0,0,.25);
}

html, body { height: 100%; }

body.moxho-body{
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[data-bs-theme="light"] body.moxho-body{
  background: linear-gradient(180deg, #f6f7f9, #eef1f6);
}

/* Overall background */
html[data-bs-theme="dark"] body.moxho-body{
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(255, 200, 120, .14), transparent 70%),
    radial-gradient(900px 420px at 90% 0%, rgba(120, 200, 255, .10), transparent 60%),
    radial-gradient(900px 600px at 60% 110%, rgba(160, 120, 255, .10), transparent 60%),
    linear-gradient(180deg, rgba(15,17,20,1), rgba(11,12,14,1));
}

/* Keep cards slightly softer */
.card{ border-radius: var(--moxho-radius); }

.navbar-brand{ letter-spacing: .3px; }

/* Compact icon buttons */
.qs-icon-btn{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
}

/* Torrent icons under title */
.qs-torrent-ico{
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  backdrop-filter: blur(6px);
}
.qs-torrent-ico:hover{ background: rgba(255,255,255,.10); }

/* ===== NOW HERO ===== */

.moxho-hero{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--moxho-shadow);
  border: 1px solid rgba(255,255,255,.10);
}

.moxho-hero::before{
  content:"";
  position:absolute;
  inset:-24px;
  background-image: var(--moxho-hero-bg);
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(1.05) brightness(.65);
  transform: scale(1.08);
}

.moxho-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 380px at 30% 50%, rgba(0,0,0,.15), transparent 70%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.60) 100%);
}

.moxho-hero__inner{
  position: relative;
  z-index: 1;
  padding: 22px;
}

.moxho-poster{
  width: 112px;
  height: 150px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}

.moxho-title{
  font-size: 40px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0;
}

.moxho-sub{
  opacity: .82;
  font-weight: 400;
}

.moxho-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(27, 181, 109, .18);
  border: 1px solid rgba(27, 181, 109, .30);
  color: rgba(240,255,248, .92);
  font-weight: 500;
}

.moxho-meta{
  display: grid;
  gap: 6px;
  margin-top: 10px;
  opacity: .9;
}

.moxho-note{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 14px;
  color: inherit;
  outline: none;
}

.moxho-note::placeholder{ color: rgba(255,255,255,.45); }

.moxho-glass{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 46px rgba(0,0,0,.26);
}

.moxho-right{
  padding: 16px;
}

.moxho-minirow{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.moxho-date{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  color: inherit;
  padding: 10px 12px;
}

.moxho-mini-actions{
  display: inline-flex;
  gap: 8px;
}

.moxho-mini-btn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: inherit;
  text-decoration: none;
}

.moxho-mini-btn:hover{ background: rgba(255,255,255,.10); }

.moxho-action-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.moxho-action{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.moxho-action__circle{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}

.moxho-action--ok .moxho-action__circle{
  background: rgba(27,181,109,.18);
  border-color: rgba(27,181,109,.30);
}

.moxho-action--swap .moxho-action__circle{
  background: rgba(255,193,7,.18);
  border-color: rgba(255,193,7,.30);
}

.moxho-action--edit .moxho-action__circle{
  background: rgba(255,255,255,.10);
}

.moxho-action--period .moxho-action__circle{
  background: rgba(99, 102, 241, .18);
  border-color: rgba(99, 102, 241, .32);
}

.moxho-action__label{
  font-size: 12px;
  opacity: .85;
}

/* History cards – nicer in both themes */
.moxho-history a.card{
  transition: transform .12s ease, box-shadow .12s ease;
}
.moxho-history a.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* Smaller title on narrow screens */
@media (max-width: 991px){
  .moxho-title{ font-size: 30px; }
  .moxho-action-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== TITLES FORM (add/edit) ===== */

.moxho-form-hero .moxho-hero__inner{ padding: 26px; }

.moxho-path{
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .2px;
}
.moxho-dot{
  width: 6px; height: 6px; border-radius: 99px;
  background: rgba(255,255,255,.35);
  display: inline-block;
}
.moxho-subtitle{ opacity: .86; font-weight: 400; }
.moxho-hint{ margin-top: 6px; opacity: .75; font-size: 13px; }

.moxho-alert{ border-radius: 16px; border: 1px solid rgba(255,255,255,.14); }

.moxho-form{
  padding: 0;
}

.moxho-input{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: inherit;
}
html[data-bs-theme="light"] .moxho-input{
  background: rgba(255,255,255,.85);
  border-color: rgba(0,0,0,.10);
}
.moxho-input:focus{
  box-shadow: 0 0 0 .18rem rgba(13,110,253,.18);
  border-color: rgba(13,110,253,.45);
}

.moxho-muted{ opacity: .72; }

.moxho-side{
  position: sticky;
  top: 14px;
}

.moxho-preview{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  padding: 14px;
}

.moxho-cover{
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 44px rgba(0,0,0,.30);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.moxho-cover__empty{
  text-align: center;
  opacity: .75;
}
.moxho-cover__empty i{ font-size: 34px; display:block; margin-bottom: 6px; }

.moxho-preview__title{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 18px;
  line-height: 1.2;
}

@media (max-width: 991.98px){
  .moxho-side{ position: static; }
  .moxho-path{ font-size: 28px; }
}