/* GRID & LAYOUT */
.mb-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.mb-item { display:flex; gap:12px; background:#0f1720; padding:10px; border-radius:8px; align-items:flex-start; color:#fff; transition:0.25s; }
.mb-item:hover { box-shadow:0 6px 18px rgba(0,0,0,0.5); }
.mb-thumb { position:relative; flex-shrink:0; overflow:hidden; border-radius:6px; width:140px; height:200px; }
.mb-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; display:block; }
.mb-thumb:hover img { transform:scale(1.08); }
.mb-episode { position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,0.7); color:#fff; padding:4px 6px; border-radius:4px; font-size:12px; }
.mb-info { flex:1; display:flex; flex-direction:column; }
.mb-title { margin:0 0 6px 0; font-size:16px; }
.mb-title a { color:#fff; text-decoration:none; }
.mb-meta { font-size:13px; color:#9aa5b1; display:flex; gap:12px; margin-bottom:8px; }
.mb-actions { margin-top:auto; }
.mb-remove { background:#ff3b5c; color:#fff; border:none; padding:6px 10px; border-radius:6px; cursor:pointer; }
.mb-remove:hover { background:#ff2f50; }
.mb-controls { margin-bottom:12px; display:flex; justify-content:flex-end; gap:12px; }
#mb-sort { padding:6px 8px; border-radius:6px; background:#111; color:#fff; border:1px solid #222; }
.mb-empty { padding:20px; text-align:center; color:#cbd5e1; }

/* STANDARD BUTTON */
.mb-bookmark { border:1px solid #333; padding:6px 12px; border-radius:20px; background:#0b1220; color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:0.2s; }
.mb-bookmark.active { border-color:#ff3b5c; color:#ff3b5c; }
.mb-heart { font-size:16px; }
.mb-text { font-size:14px; }
.mb-count { font-weight:700; color:#ffd166; }

/* TOAST */
#mb-toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.mb-toast { background: #1f2937; color: #fff; padding: 12px 16px; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 10px; min-width: 250px; font-size: 14px; border-left: 4px solid #3b82f6; opacity: 0; transform: translateX(50px); animation: mbSlideIn 0.3s forwards; pointer-events: auto; }
.mb-toast.success { border-color: #10b981; }
.mb-toast.error { border-color: #ef4444; }
.mb-toast.warning { border-color: #f59e0b; }
.mb-toast-icon { font-size: 18px; }
@keyframes mbSlideIn { to { opacity: 1; transform: translateX(0); } }
@keyframes mbFadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* SPINNER & LOADING */
.mb-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: mbSpin 0.8s linear infinite; margin-right: 6px; vertical-align: middle; }
@keyframes mbSpin { to { transform: rotate(360deg); } }
.mb-loading { opacity: 0.7; cursor: not-allowed !important; position: relative; }
.mb-bookmark.mb-loading .mb-heart { display: none; }

/* DROPDOWN STATUS */
.mb-dropdown-wrap { position: relative; display: inline-block; margin-bottom: 12px; }
.mb-dropdown-trigger { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #1e293b; border: 1px solid #334155; border-radius: 6px; color: #cbd5e1; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; min-width: 140px; justify-content: space-between; }
.mb-dropdown-trigger:hover { background: #334155; }
.mb-trigger-arrow { font-size: 10px; opacity: 0.7; }
.mb-dropdown-trigger.later { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.mb-dropdown-trigger.watching { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.mb-dropdown-trigger.finished { background: #10b981; border-color: #10b981; color: #fff; }
.mb-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 160px; background: #0f172a; border: 1px solid #334155; border-radius: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); margin-top: 5px; overflow: hidden; animation: mbSlideDown 0.2s ease; }
.mb-dropdown-wrap.open .mb-dropdown-menu { display: block; }
.mb-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; color: #94a3b8; font-size: 13px; border-bottom: 1px solid #1e293b; transition: 0.2s; }
.mb-dropdown-item:last-child { border-bottom: none; }
.mb-dropdown-item:hover { background: #1e293b; color: #fff; padding-left: 18px; }
@keyframes mbSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* PAGINATION MODERN (Dark Mode) */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600&display=swap');
.mb-pagination { display: flex; justify-content: center; background-color: #0e0e0e; margin-top: 20px; width: fit-content; margin-left: auto; margin-right: auto; font-family: 'Rajdhani', sans-serif; }
.mb-page-num { position: relative; display: flex; justify-content: center; align-items: center; text-decoration: none; min-width: 50px; height: 50px; color: #6c7a89; font-size: 20px; font-weight: 500; border-right: 1px solid #1a1a1a; transition: all 0.2s ease; cursor: pointer; box-shadow: none !important; }
.mb-page-num:last-child { border-right: none; }
.mb-page-num:hover:not(.active) { background-color: #1a1a1a; color: #fff; }
.mb-page-num.active { color: #ffffff; background-color: #000000; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); cursor: default; }
.mb-page-num.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #34495e; }
.mb-page-num.last { padding: 0 15px; font-size: 18px; text-transform: uppercase; }

/* SIMPLE BUTTON STYLE */
.mb-simple-btn { background: transparent; border: none; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px; color: #9aa5b1; transition: all 0.3s ease; font-family: sans-serif; outline: none; }
.mb-simple-btn svg { width: 28px; height: 28px; stroke: currentColor; fill: transparent; transition: all 0.3s ease; }
.mb-simple-btn .mb-simple-text { font-size: 13px; font-weight: 500; }
.mb-simple-btn:hover { color: #fff; }
.mb-simple-btn:hover svg { transform: scale(1.1); }
.mb-simple-btn.active { color: #ff3b5c; }
.mb-simple-btn.active svg { fill: #ff3b5c; stroke: #ff3b5c; animation: heartBeat 0.4s forwards; }
@keyframes heartBeat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }