:root{
  --mp-bg: #070A0F;
  --mp-panel: rgba(255,255,255,.04);
  --mp-border: rgba(255,255,255,.10);
  --mp-text: #E9EEF7;
  --mp-muted: rgba(233,238,247,.72);
  --mp-danger: #ff2d55;
  --mp-glow: rgba(255,45,85,.18);
}

.mp-body{
  background:
    radial-gradient(900px 500px at 20% 5%, rgba(255,45,85,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(120,110,255,.14), transparent 60%),
    var(--mp-bg);
  color: var(--mp-text);
}

a { color: #b9c6ff; }
a:hover { color: #ffffff; }

.mp-topbar{
  backdrop-filter: blur(10px);
  background: rgba(7,10,15,.72);
  border-bottom: 1px solid var(--mp-border);
}

.mp-brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color: var(--mp-text);
}
.mp-brand__mark{
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--mp-danger);
  box-shadow: 0 0 0 6px var(--mp-glow);
}
.mp-brand__text{
  font-weight: 700;
  letter-spacing: .2px;
}

.mp-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--mp-border);
  background: rgba(255,255,255,.03);
  color: var(--mp-muted);
  font-size: 12px;
}

.mp-offcanvas{
  background: rgba(7,10,15,.96);
  color: var(--mp-text);
  border-left: 1px solid var(--mp-border);
}

.mp-nav{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.mp-nav a{ text-decoration:none; color: var(--mp-text); opacity:.9; }
.mp-nav a:hover{ opacity:1; }

.mp-hr{ border-color: var(--mp-border); opacity: 1; }

.mp-main{ min-height: 70vh; }

.mp-hero{
  border-bottom: 1px solid var(--mp-border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.mp-h1{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.3px;
  margin: 0;
}
.mp-h2{
  font-size: 18px;
  letter-spacing: .2px;
}
.mp-lead{
  margin-top: 12px;
  color: var(--mp-muted);
  max-width: 56ch;
}

.mp-sep{ width: 1px; height: 22px; background: var(--mp-border); margin: 0 6px; }

.mp-panel{
  border: 1px solid var(--mp-border);
  background: var(--mp-panel);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.mp-panel__title{ font-weight: 700; }
.mp-panel__note{ color: var(--mp-muted); font-size: 13px; }

.mp-label{ color: var(--mp-muted); font-size: 12px; margin-bottom: 6px; }

.form-control, .btn{
  border-radius: 12px;
}
.form-control{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--mp-border);
  color: var(--mp-text);
}
.form-control:focus{
  background: rgba(255,255,255,.05);
  color: var(--mp-text);
  border-color: rgba(255,45,85,.45);
  box-shadow: 0 0 0 .25rem rgba(255,45,85,.10);
}

.btn-danger{
  background: var(--mp-danger);
  border-color: var(--mp-danger);
}
.btn-outline-danger{
  border-color: rgba(255,45,85,.55);
  color: var(--mp-text);
}
.btn-outline-danger:hover{
  background: rgba(255,45,85,.15);
}

/* --- Pluginin hkf-* elementtien "upgrade" --- */
.hkf-card{
  border-radius: 18px !important;
  border: 1px solid var(--mp-border) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
  overflow: hidden;
}
.hkf-thumb img{
  transition: transform .25s ease;
}
.hkf-card:hover .hkf-thumb img{
  transform: scale(1.02);
}
.hkf-meta{
  opacity: 1 !important;
  color: var(--mp-muted);
}
.hkf-source{
  color: var(--mp-text);
}
.hkf-badge{
  border-radius: 999px !important;
  border: 1px solid rgba(255,45,85,.40) !important;
  background: rgba(255,45,85,.12) !important;
  color: var(--mp-text) !important;
}
.hkf-title a{
  color: var(--mp-text) !important;
}
.hkf-desc{
  color: var(--mp-muted) !important;
}
.hkf-sources{
  border-top-color: var(--mp-border) !important;
}
.hkf-sources-list li a{
  color: #ffd1da;
}
.hkf-sources-list li a:hover{
  color: #ffffff;
}

.mp-footer{
  border-top: 1px solid var(--mp-border);
  background: rgba(255,255,255,.02);
}