/* JHIF Ultra Theme — World-class emotional UI */ 
:root{
  --bg: #0e1017; --panel:#131826; --elev:#0f1422; --text:#eaf0ff; --muted:#98a3b7; --line:#232c45;
  --brand:#7aa2ff; --brand-2:#ffb86b; --danger:#ff6b6b; --success:#69e1b6; --warning:#ffe58f;
  --shadow: 0 12px 40px rgba(0,0,0,.4); --radius:18px; --space:clamp(14px,1.4vw,22px);
  --font: ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, system-ui, "Apple Color Emoji","Segoe UI Emoji";
}
@media (prefers-color-scheme: light){ :root{ --bg:#f6f8fc; --panel:#fff; --elev:#fff; --text:#0e1320; --muted:#5f6982; --line:#e7ecf5 } }
html,body{ background:var(--bg)!important; color:var(--text)!important; font-family:var(--font); text-rendering:optimizeLegibility }
a{ color:var(--brand) } a:hover{ opacity:.9 }
.card, .modal-content, .toast, .navbar, .dropdown-menu, .list-group-item, .alert{
  background:var(--panel)!important; border:1px solid var(--line)!important; border-radius:var(--radius)!important; box-shadow:var(--shadow)
}
.container-xl{ padding-top: clamp(10px,2vw,24px); padding-bottom: clamp(10px,2vw,24px) }
.btn{ border-radius:14px!important; font-weight:700; letter-spacing:.2px }
.btn-primary{ background:var(--brand)!important; color:#0b1222!important; border:0!important }
.btn-outline-primary{ border-color:var(--brand)!important; color:var(--brand)!important }
.btn-outline-primary:hover{ background:color-mix(in srgb, var(--brand) 15%, transparent)!important }
.form-control, .form-select, .form-check-input{
  background: var(--elev)!important; color: var(--text)!important; border:1px solid var(--line)!important; border-radius:12px!important;
}
.form-control::placeholder{ color:color-mix(in srgb, var(--muted) 70%, transparent) }
.form-check-input:checked{ background-color: var(--brand)!important; border-color: var(--brand)!important }
.navbar{ backdrop-filter: blur(10px) saturate(120%);
  background: color-mix(in srgb, var(--bg) 75%, transparent)!important; border-bottom:1px solid var(--line)!important }
.navbar .navbar-brand{ font-weight:900; letter-spacing:.3px }
.navbar .btn, .navbar a{ box-shadow:none }
.grid-feed{ display:grid; gap: clamp(12px,1.2vw,20px) }
@media (min-width: 900px){ .grid-feed{ grid-template-columns: 1fr 1fr } }
@media (min-width: 1200px){ .grid-feed{ grid-template-columns: 1fr 1fr 1fr } }
.post-card .post-title{ font-weight:800; font-size:1.15rem; margin-bottom:.35rem }
.post-card .post-meta{ color:var(--muted); font-size:.92rem; display:flex; gap:.5rem; align-items:center }
.post-card figure img{ width:100%; border-radius:14px; border:1px solid var(--line) }
.post-card .reactions .chip{
  background:#161d30; border:1px solid var(--line); border-radius:999px; padding:.45rem .7rem; display:inline-flex; gap:.4rem; color:var(--muted)
}
.chip.kind{ background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); border-color: var(--success) }
.composer textarea{ min-height:140px; resize:vertical } .helper{ color:var(--muted); font-size:.9rem }
:focus-visible{ outline: 2px solid var(--brand-2); outline-offset:3px }
@media (prefers-reduced-motion:no-preference){
  .card, .btn, .form-control{ transition: transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease }
  .btn:hover{ transform: translateY(-1px) }
  .card:hover{ transform: translateY(-2px) }
}
.glow{ position:relative; } 
.glow::after{ content:""; position:absolute; inset:-2px; z-index:-1; border-radius:inherit;
  background: radial-gradient(600px 180px at var(--mx,50%) 0%, color-mix(in srgb, var(--brand) 45%, transparent), transparent);
  opacity:.15; filter: blur(12px);
}
.toast-success{ background: color-mix(in srgb, var(--success) 10%, var(--panel))!important }
.toast-error{ background: color-mix(in srgb, var(--danger) 10%, var(--panel))!important }
.theme-toggle{ background:transparent;border:1px solid var(--line); border-radius:999px; padding:.35rem .7rem; color:var(--muted) }
.theme-toggle[aria-pressed="true"]{ color:var(--brand) }
.hero{ border-radius: 28px; padding: clamp(22px, 4vw, 56px);
  background: radial-gradient(1200px 300px at 10% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent),
  radial-gradient(1200px 300px at 90% -10%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent),
  linear-gradient(160deg, color-mix(in srgb, var(--panel) 70%, transparent), var(--panel));
  border:1px solid var(--line); box-shadow: var(--shadow) }
.hero h1{ font-weight:900; letter-spacing:.3px } .hero p{ color: var(--muted) }
/* Skeleton */
.skeleton{ position:relative; overflow:hidden; background: #1a2236; border-radius:12px; }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite; } @keyframes shimmer{ 100% { transform: translateX(100%) } }
/* Comments */
.comment{ display:flex; gap:.75rem; } .comment .avatar{ flex:0 0 36px; height:36px; border-radius:50%; background:#1a2236; border:1px solid var(--line) }
.comment .bubble{ background:var(--elev); border:1px solid var(--line); border-radius:14px; padding:.6rem .8rem }
.comment .meta{ font-size:.85rem; color:var(--muted); margin-bottom:.2rem } .comment .actions{ display:flex; gap:.6rem; color:var(--muted); font-size:.9rem }
.reactions{ display:flex; gap:.5rem; flex-wrap:wrap }


#notifications .modal-header {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) !important;
  color: #fff !important;
}
#notifications .modal-title {
  color: #fff !important;
}


/* --- FOOTER GRADIENT --- */
footer {
  background: linear-gradient(
    90deg,
    var(--brand) 0%,
    var(--brand-2) 100%
  ) !important;
  color: #fff !important;
  padding: 1.5rem 0;
  text-align: center;
}

footer a {
  color: #fff !important;
  opacity: 0.85;
  text-decoration: none;
}

footer a:hover {
  opacity: 1;
}


/* --- PROFILE DROPDOWN PREMIUM STYLE --- */
.navbar .dropdown-menu {
  background: linear-gradient(
    135deg,
    var(--brand) 0%,
    var(--brand-2) 100%
  ) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 0.5rem 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  min-width: 200px;
  animation: fadeInUp 0.25s ease;
}

.navbar .dropdown-menu .dropdown-item {
  color: #fff !important;
  font-weight: 600;
  padding: 0.75rem 1rem;
  transition: background 0.2s ease, transform 0.15s ease;
  border-radius: 12px;
}

.navbar .dropdown-menu .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateX(3px);
}

.navbar .dropdown-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Special treatment for Logout */
.navbar .dropdown-menu .dropdown-item.logout {
  color: var(--danger) !important;
  font-weight: 700;
}
.navbar .dropdown-menu .dropdown-item.logout:hover {
  background: rgba(255, 107, 107, 0.2) !important;
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gradient header for cards */
.jackpot-gradient {
    background: linear-gradient(135deg, #7aa2ff, #ffb86b);
}

/* Light blue background for scores */
.bg-primary-lt {
    background-color: rgba(122, 162, 255, 0.15) !important;
    color: #7aa2ff !important;
    border: 1px solid rgba(122, 162, 255, 0.25);
}