/* ═══════════════════════════════════════════════════════════════
   NYALIST EL CSS
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-dark: #14111c;
  --bg-card: #1e1928;
  --accent: #b39ddb;
  --accent-light: #d1c4e9;
  --secondary: #9575cd;
  --secondary-light: #b39ddb;
  --hair: #e1bee7;
  --hair-dim: rgba(225, 190, 231, 0.15);
  --ribbon: #9d4edd;
  --ribbon-dim: rgba(157, 78, 221, 0.15);
  --cardigan: #7e57c2;
  --cardigan-dim: rgba(126, 87, 194, 0.15);
  --text: #d1c4e9;
  --text-muted: #9575cd;
  --gold: #ffd700;
  --danger: #ef5350;
  --market-blue: #7986cb;
  --achieve-gold: #ffd700;
  --navbar-bg: rgba(19, 17, 26, 0.95);
  --navbar-bg-solid: #13111a;
  /* el new stuff to 'fix' lightmode */
  --panel-border: #3a2e4e;
  --panel-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  --panel-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.25);
  --panel-shadow-hover: 6px 6px 0 rgba(0, 0, 0, 0.35);
  --panel-radius: 4px;
  --panel-radius-sm: 3px;
  --press-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES 
   ═══════════════════════════════════════════════════════════════ */
.badge-admin {
    background: #e91e8c; color: #fff; font-size: 0.65rem; font-weight: 700;
    letter-spacing: 1px; padding: 2px 7px; border-radius: 4px;
    vertical-align: middle; text-transform: uppercase;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 8px rgba(233, 30, 140, 0.4);
}
.badge-beta {
    background: linear-gradient(135deg, #ffd700, #ff9f43); color: #1a1215;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; padding: 2px 7px;
    border-radius: 4px; vertical-align: middle; text-transform: uppercase;
    border: 1.5px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}
.badge-data-mod {
    background: linear-gradient(135deg, #5b9bd5, #0d73bb); color: #fff;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; padding: 2px 7px;
    border-radius: 4px; vertical-align: middle; text-transform: uppercase;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 8px rgba(91, 155, 213, 0.4);
}
.badge-supporter {
    background: linear-gradient(135deg, #c77dff, #9d4edd); color: #fff;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; padding: 2px 7px;
    border-radius: 4px; vertical-align: middle; text-transform: uppercase;
    border: 1.5px solid rgba(199, 125, 255, 0.5);
    box-shadow: 0 0 8px rgba(199, 125, 255, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   VN TAG CLOUD
   ═══════════════════════════════════════════════════════════════ */
.vn-tag-cloud-item {
    display: inline-block; padding: 6px 14px; margin: 3px;
    border-radius: 4px; font-weight: 600;
    background: var(--hair-dim); color: var(--hair);
    text-decoration: none; transition: all .15s;
    border: 1px solid var(--hair-dim);
}
.vn-tag-cloud-item:hover {
    background: var(--hair); color: var(--bg-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(248,192,157,0.2);
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION BELL
   ═══════════════════════════════════════════════════════════════ */
.notif-bell { position: relative; }
.notif-badge {
    position: absolute; top: -2px; right: -6px;
    background: var(--danger); color: #fff;
    font-size: .6rem; font-weight: 700;
    min-width: 16px; height: 16px;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    border: 1.5px solid var(--bg-dark);
}
.notif-dropdown {
    min-width: 350px; max-width: 380px;
    max-height: 400px; overflow-y: auto;
}
.notif-item {
    padding: 10px 14px; border-bottom: 1px solid var(--panel-border);
    transition: background .15s; text-decoration: none; display: block;
}
.notif-item:hover { background: rgba(248,192,157,0.06); text-decoration: none; }
.notif-item.unread { background: rgba(96,164,137,0.06); border-left: 3px solid var(--ribbon); }
.notif-item .notif-title { color: var(--hair); font-weight: 600; font-size: .85rem; }
.notif-item .notif-msg { color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
.notif-item .notif-time { color: var(--text-muted); font-size: .65rem; }

/* ═══════════════════════════════════════════════════════════════
   TAG AUTOCOMPLETE
   ═══════════════════════════════════════════════════════════════ */
.tag-autocomplete{position:absolute;top:100%;left:0;right:0;z-index:100000;background:var(--navbar-bg-solid);border:2px solid var(--panel-border);border-radius:var(--panel-radius-sm);max-height:280px;overflow-y:auto;display:none;box-shadow:var(--panel-shadow);margin-top:4px}
.tag-autocomplete.active{display:block}
.filter-bar{position:relative;z-index:100}
.tag-ac-item{padding:10px 14px;cursor:pointer;transition:background .15s;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--panel-border)}
.tag-ac-item:last-child{border-bottom:none;border-radius:0 0 var(--panel-radius-sm) var(--panel-radius-sm)}
.tag-ac-item:first-child{border-radius:var(--panel-radius-sm) var(--panel-radius-sm) 0 0}
.tag-ac-item:hover,.tag-ac-item.highlighted{background:rgba(248,192,157,0.08)}
.tag-ac-name{color:#60a489;font-weight:600;font-size:.9rem}
.tag-ac-match{color:#f8c09d;font-weight:700}
.tag-ac-count{color:#8a7a7e;font-size:.8rem}
.tag-ac-cat{font-size:.6rem;padding:1px 6px;border-radius:4px;margin-left:6px}
.tag-ac-cat-cont{background:rgba(96,164,137,0.15);color:#60a489;border:1px solid rgba(96,164,137,0.3)}
.tag-ac-cat-ero{background:rgba(224,85,85,0.15);color:#e05555;border:1px solid rgba(224,85,85,0.3)}
.tag-ac-cat-tech{background:rgba(91,155,213,0.15);color:#5b9bd5;border:1px solid rgba(91,155,213,0.3)}

/* ═══════════════════════════════════════════════════════════════
   NSFW IMAGE OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.vn-nsfw-overlay{position:relative;display:inline-block}
.vn-nsfw-overlay .vn-nsfw-img{filter:blur(20px) brightness(0.5);transform:scale(1.05)}
.vn-nsfw-overlay .vn-nsfw-blur{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(26,18,21,0.65);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:inherit;z-index:2;transition:all .15s}
.vn-nsfw-overlay .vn-nsfw-blur:hover{background:rgba(26,18,21,0.5)}
.vn-nsfw-overlay .vn-nsfw-blur i{font-size:1.5rem;color:var(--danger);margin-bottom:6px}
.vn-nsfw-overlay .vn-nsfw-blur small{color:var(--text-muted);font-size:.8rem}
.vn-nsfw-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:.7rem;background:rgba(224,85,85,0.15);color:var(--danger);border:1px solid rgba(224,85,85,0.3)}
.vn-blacklist-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:.7rem;background:rgba(138,122,126,0.15);color:var(--text-muted);border:1px solid rgba(138,122,126,0.3)}

/* ═══════════════════════════════════════════════════════════════
   VN TRACKING CARDS
   ═══════════════════════════════════════════════════════════════ */
.vn-card{background:var(--bg-card);border:3px solid var(--panel-border);border-radius:var(--panel-radius);overflow:hidden;transition:all .15s;display:flex;flex-direction:column;box-shadow:var(--panel-shadow-sm)}
.vn-card:hover{transform:translate(-2px,-2px);box-shadow:var(--panel-shadow-hover);border-color:var(--hair)}
.vn-card-img{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--bg-dark);flex-shrink:0}
.vn-card-img img{width:100%;height:100%;object-fit:cover}
.vn-status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700}
.vn-status-playing{background:rgba(96,164,137,0.15);color:var(--ribbon);border:1px solid rgba(96,164,137,0.3)}
.vn-status-finished{background:rgba(255,215,0,0.15);color:var(--gold);border:1px solid rgba(255,215,0,0.3)}
.vn-status-hold{background:rgba(163,107,112,0.15);color:var(--cardigan);border:1px solid rgba(163,107,112,0.3)}
.vn-status-dropped{background:rgba(224,85,85,0.15);color:var(--danger);border:1px solid rgba(224,85,85,0.3)}
.vn-status-plan{background:rgba(91,155,213,0.15);color:var(--market-blue);border:1px solid rgba(91,155,213,0.3)}
.vn-status-blacklist{background:rgba(138,122,126,0.15);color:var(--text-muted);border:1px solid rgba(138,122,126,0.3)}
.vn-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;background:var(--hair-dim);color:var(--text-muted);margin:1px}
.vn-tag-ero{background:rgba(224,85,85,0.1);color:var(--danger)}
.vn-rating-stars{color:var(--gold);letter-spacing:1px}
.vn-detail-banner{border-radius:var(--panel-radius);padding:0;margin-bottom:20px;position:relative;overflow:hidden;min-height:250px;background:var(--bg-dark)}
.vn-detail-cover{width:100%;height:100%;min-height:300px;max-height:400px;object-fit:cover;border-radius:var(--panel-radius)}
.vn-detail-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,var(--bg-dark));padding:30px 24px 20px}
.vn-list-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border:2px solid var(--panel-border);border-radius:var(--panel-radius-sm);margin-bottom:8px;transition:all .15s;background:var(--bg-card);box-shadow:var(--panel-shadow-sm)}
.vn-list-row:hover{border-color:var(--hair);transform:translate(-1px,-1px);box-shadow:var(--panel-shadow)}
.vn-list-row img{width:45px;height:64px;object-fit:contain;border-radius:3px;border:1px solid var(--panel-border);background:var(--bg-dark)}
.vn-fav-thumb:hover{border-color:var(--gold);transform:translateY(-3px)}

/* ═══════════════════════════════════════════════════════════════
   CAFE
   ═══════════════════════════════════════════════════════════════ */
.cafe-income-card{border:3px solid var(--gold);background:linear-gradient(135deg,rgba(42,32,37,0.9),rgba(60,40,30,0.9));position:relative;overflow:hidden;box-shadow:var(--panel-shadow)}
.cafe-income-card::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,215,0,0.06) 0%,transparent 70%);pointer-events:none}
.cafe-station{background:var(--bg-card);border:3px solid var(--panel-border);border-radius:var(--panel-radius);padding:18px;margin-bottom:14px;transition:all .15s;box-shadow:var(--panel-shadow-sm)}
.cafe-station:hover{border-color:var(--hair);transform:translate(-1px,-1px);box-shadow:var(--panel-shadow)}
.cafe-station.locked{opacity:.55;border-style:dashed}
.cafe-station.locked:hover{opacity:.7}
.cafe-staff-card{background:var(--bg-dark);border:2px solid var(--panel-border);border-radius:var(--panel-radius-sm);padding:10px;display:flex;align-items:center;gap:10px;transition:all .15s;min-height:64px}
.cafe-staff-card:hover{border-color:var(--ribbon)}
.cafe-empty-slot{background:var(--bg-dark);border:3px dashed var(--panel-border);border-radius:var(--panel-radius-sm);padding:14px;text-align:center;transition:all .15s;min-height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.cafe-empty-slot:hover{border-color:var(--ribbon);background:rgba(96,164,137,0.05)}
.cafe-role-select{font-size:.7rem;padding:2px 6px;background:var(--bg-dark);border:1px solid var(--panel-border);color:var(--text);border-radius:3px}
.cafe-level-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:var(--ribbon-dim);border:1px solid var(--ribbon);border-radius:12px;font-size:.8rem;font-weight:700;color:var(--ribbon)}
.cafe-eff-bar{background:rgba(19,17,26,0.6);border-radius:3px;height:10px;overflow:hidden;border:1px solid var(--panel-border)}
.cafe-eff-fill{height:100%;border-radius:3px;transition:width .4s ease}

/* ═══════════════════════════════════════════════════════════════
   SHOWCASE COMPACT CARDS
   ═══════════════════════════════════════════════════════════════ */
.showcase-compact .card-body{padding:8px 10px 10px}
.showcase-compact .card-body h6{font-size:.82rem;margin-bottom:1px;line-height:1.2}
.showcase-compact .card-body small{font-size:.72rem}

/* ═══════════════════════════════════════════════════════════════
   PROFILE BACKGROUND SYSTEM 
   ═══════════════════════════════════════════════════════════════ */
.profile-bg-wrapper{position:relative;min-height:100vh}
.profile-bg-fixed{position:fixed;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;z-index:0}
.profile-bg-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(26,18,21,0.25) 0%,rgba(26,18,21,0.6) 100%);z-index:0}
.profile-content-fg{position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════════
   SHOWCASE ANIMATED BORDERS
   ═══════════════════════════════════════════════════════════════ */
.card.rarity-5{border:3px solid #ffaa00;animation:sc-glow5 1.5s ease-in-out infinite;position:relative;overflow:hidden}
.card.rarity-5::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(105deg,transparent 40%,rgba(255,200,100,0.18) 50%,transparent 60%);transform:translateX(-150%);animation:sc-shimmer-gold 4s ease-in-out 1s infinite;pointer-events:none;z-index:10}
.card.rarity-6{border:3px solid #ff5555;animation:sc-rainbow 3s ease-in-out infinite;position:relative;overflow:hidden}
.card.rarity-6::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.08) 42%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.08) 58%,transparent 70%);transform:translateX(-150%);animation:sc-shimmer 2.5s ease-in-out 0.8s infinite;pointer-events:none;z-index:10}

@keyframes sc-glow5{0%,100%{box-shadow:0 0 10px rgba(255,170,0,0.3),0 0 25px rgba(255,170,0,0.15)}50%{box-shadow:0 0 20px rgba(255,170,0,0.5),0 0 40px rgba(255,170,0,0.2)}}
@keyframes sc-shimmer-gold{0%{transform:translateX(-150%);opacity:0}20%{opacity:.6}80%{opacity:.6}100%{transform:translateX(150%);opacity:0}}
@keyframes sc-rainbow{0%{box-shadow:0 0 15px rgba(255,85,85,0.4),0 0 35px rgba(255,85,85,0.2);border-color:#ff5555}16%{box-shadow:0 0 15px rgba(255,170,0,0.4),0 0 35px rgba(255,170,0,0.2);border-color:#ffaa00}33%{box-shadow:0 0 15px rgba(85,221,85,0.4),0 0 35px rgba(85,221,85,0.2);border-color:#55dd55}50%{box-shadow:0 0 15px rgba(85,153,255,0.4),0 0 35px rgba(85,153,255,0.2);border-color:#5599ff}66%{box-shadow:0 0 15px rgba(204,102,255,0.4),0 0 35px rgba(204,102,255,0.2);border-color:#cc66ff}83%{box-shadow:0 0 15px rgba(255,85,200,0.4),0 0 35px rgba(255,85,200,0.2);border-color:#ff55c8}100%{box-shadow:0 0 15px rgba(255,85,85,0.4),0 0 35px rgba(255,85,85,0.2);border-color:#ff5555}}
@keyframes sc-shimmer{0%{transform:translateX(-150%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(150%);opacity:0}}


.showcase-card img{object-fit:contain;border-radius:4px}
.showcase-card-lg{padding:0!important;background:var(--bg-dark)!important}
.showcase-card-lg img{width:100%;height:auto;max-height:350px;min-height:200px;object-fit:contain;border-radius:var(--panel-radius) var(--panel-radius) 0 0;background:var(--bg-dark);display:block}
.showcase-card-lg .showcase-card-info{padding:10px 14px 14px;background:var(--bg-card)}

/* ═══════════════════════════════════════════════════════════════
   ACHIEVEMENT RARITY TIERS
   ═══════════════════════════════════════════════════════════════ */
.achieve-rarity-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.achieve-common{border-color:#b0b0b0 !important}
.achieve-common .achieve-rarity-badge{background:rgba(176,176,176,0.15);color:#b0b0b0;border:1px solid rgba(176,176,176,0.3)}
.achieve-uncommon{border-color:#55dd55 !important}
.achieve-uncommon .achieve-rarity-badge{background:rgba(85,221,85,0.15);color:#55dd55;border:1px solid rgba(85,221,85,0.3)}
.achieve-rare{border-color:#5599ff !important}
.achieve-rare .achieve-rarity-badge{background:rgba(85,153,255,0.15);color:#5599ff;border:1px solid rgba(85,153,255,0.3)}
.achieve-epic{border-color:#cc66ff !important}
.achieve-epic .achieve-rarity-badge{background:rgba(204,102,255,0.15);color:#cc66ff;border:1px solid rgba(204,102,255,0.3)}
.achieve-legendary{border-color:#ffd700 !important;box-shadow:0 0 12px rgba(255,215,0,0.2)}
.achieve-legendary .achieve-rarity-badge{background:rgba(255,215,0,0.15);color:#ffd700;border:1px solid rgba(255,215,0,0.3)}

/* ═══════════════════════════════════════════════════════════════
   BACKGROUND SELECTOR
   ═══════════════════════════════════════════════════════════════ */
.bg-option{border:3px solid var(--panel-border);border-radius:var(--panel-radius-sm);overflow:hidden;cursor:pointer;transition:all .15s;position:relative;box-shadow:var(--panel-shadow-sm)}
.bg-option:hover{border-color:var(--hair);transform:translate(-1px,-1px);box-shadow:var(--panel-shadow)}
.bg-option.active{border-color:var(--gold);box-shadow:0 0 12px rgba(255,215,0,0.3)}
.bg-option.locked{opacity:.5;cursor:not-allowed}
.bg-option img{width:100%;height:80px;object-fit:cover;display:block}
.bg-option-label{padding:6px 10px;font-size:.8rem;color:var(--text);background:var(--bg-card)}
.bg-locked-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(26,18,21,0.7);color:var(--text-muted);font-size:1.2rem}

/* ═══════════════════════════════════════════════════════════════
   PROFILE & FRIENDS 
   ═══════════════════════════════════════════════════════════════ */
.profile-banner{border-radius:var(--panel-radius);padding:32px 24px 24px;margin-bottom:20px;position:relative;overflow:hidden;border:3px solid var(--panel-border);box-shadow:var(--panel-shadow)}
.profile-banner::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 40%,var(--bg-dark) 100%);pointer-events:none}
.profile-banner-content{position:relative;z-index:1}
.profile-avatar-lg{width:96px;height:96px;border-radius:50%;border:4px solid var(--hair);box-shadow:0 0 20px rgba(248,192,157,0.3)}
.showcase-card{background:var(--bg-card);border:3px solid var(--panel-border);border-radius:var(--panel-radius-sm);padding:12px;text-align:center;transition:all .15s;position:relative;box-shadow:var(--panel-shadow-sm)}
.showcase-card:hover{border-color:var(--hair);transform:translate(-2px,-2px);box-shadow:var(--panel-shadow-hover)}
.showcase-card img{width:80px;height:80px;object-fit:contain;border-radius:4px}
.showcase-slot-empty{background:var(--bg-card);border:3px dashed var(--panel-border);border-radius:var(--panel-radius-sm);padding:24px 12px;text-align:center;color:var(--text-muted);transition:all .15s;cursor:pointer}
.showcase-slot-empty:hover{border-color:var(--ribbon);color:var(--ribbon)}
.friend-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--panel-radius-sm);border:2px solid var(--panel-border);margin-bottom:8px;transition:all .15s;background:var(--bg-card);box-shadow:var(--panel-shadow-sm)}
.friend-row:hover{border-color:var(--hair);background:rgba(248,192,157,0.03);transform:translate(-1px,-1px);box-shadow:var(--panel-shadow)}
.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid var(--panel-border);cursor:pointer;transition:all .15s;display:inline-block}
.color-swatch:hover,.color-swatch.active{border-color:var(--hair);transform:scale(1.15);box-shadow:0 0 8px rgba(248,192,157,0.3)}
.private-overlay{position:relative;opacity:0.5;filter:blur(3px);pointer-events:none;user-select:none}
.private-badge{background:var(--cardigan-dim);color:var(--cardigan);border:1px solid var(--cardigan);border-radius:4px;padding:4px 12px;font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:4px}

/* ═══════════════════════════════════════════════════════════════
   TCG DECK SLOTS
   ═══════════════════════════════════════════════════════════════ */
.deck-slot{background:var(--bg-card);border:3px solid var(--panel-border);border-radius:var(--panel-radius);padding:20px;text-align:center;transition:all .15s;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--text);box-shadow:var(--panel-shadow-sm)}
.deck-slot:hover{border-color:var(--hair);transform:translate(-2px,-2px);box-shadow:var(--panel-shadow-hover)}
.deck-slot.empty{border-style:dashed;opacity:.55}
.deck-slot.empty:hover{opacity:.85;border-color:var(--ribbon)}
.deck-slot-full{background:var(--bg-card);border:3px solid var(--ribbon);border-radius:var(--panel-radius);padding:20px;text-align:center;transition:all .15s;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--text);box-shadow:var(--panel-shadow-sm)}
.deck-slot-full:hover{transform:translate(-2px,-2px);box-shadow:var(--panel-shadow-hover)}
.deck-card-mini{background:var(--bg-card);border:2px solid var(--panel-border);border-radius:var(--panel-radius-sm);padding:12px;display:flex;align-items:center;gap:12px;transition:all .15s;margin-bottom:8px;box-shadow:var(--panel-shadow-sm)}
.deck-card-mini:hover{border-color:var(--hair);transform:translate(-1px,-1px);box-shadow:var(--panel-shadow)}
.deck-card-mini img{width:56px;height:56px;object-fit:contain;border-radius:4px;border:1px solid var(--panel-border)}
.leaderboard-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--panel-border);transition:all .15s}
.leaderboard-row:hover{background:rgba(248,192,157,0.04)}
.ranking-1{color:#ffd700;font-weight:700}
.ranking-2{color:#c0c0c0;font-weight:700}
.ranking-3{color:#cd7f32;font-weight:700}
.elo-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 14px;border-radius:20px;font-weight:700;font-size:.9rem}
.elo-bronze{background:rgba(205,127,50,0.15);color:#cd7f32;border:1px solid rgba(205,127,50,0.3)}
.elo-silver{background:rgba(192,192,192,0.15);color:#c0c0c0;border:1px solid rgba(192,192,192,0.3)}
.elo-gold{background:rgba(255,215,0,0.15);color:#ffd700;border:1px solid rgba(255,215,0,0.3)}
.elo-platinum{background:rgba(96,164,137,0.15);color:var(--ribbon);border:1px solid rgba(96,164,137,0.3)}
.elo-diamond{background:rgba(85,153,255,0.15);color:#5599ff;border:1px solid rgba(85,153,255,0.3)}
.deck-power-bar{background:rgba(19,17,26,0.6);border-radius:4px;height:18px;overflow:hidden;border:1px solid var(--panel-border);margin-top:6px}
.deck-power-fill{height:100%;border-radius:4px;transition:width .5s ease}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-claim-daily { background:linear-gradient(135deg,var(--gold),#ff9f43); border:3px solid var(--panel-border); color:var(--bg-dark); border-radius:var(--panel-radius-sm); font-weight:700; font-size:1.2rem; padding:18px 36px; transition:all .15s; box-shadow:var(--panel-shadow); }
.btn-claim-daily:hover { transform:translate(-1px,-1px); box-shadow:var(--panel-shadow-hover); }
.btn-claim-daily:disabled { opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-claim-daily:active { transform:translate(var(--press-offset),var(--press-offset)); box-shadow:1px 1px 0 rgba(0,0,0,0.3); }
.btn-market { background:var(--market-blue); border:2px solid var(--panel-border); color:#fff; border-radius:var(--panel-radius-sm); font-weight:600; transition:all .15s; box-shadow:var(--panel-shadow-sm); }
.btn-market:hover { background:#4a8ac4; transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.btn-market:active { transform:translate(var(--press-offset),var(--press-offset)); box-shadow:1px 1px 0 rgba(0,0,0,0.2); }
.achievement-badge { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; background:var(--bg-card); border:2px solid var(--panel-border); border-radius:var(--panel-radius-sm); margin:4px; transition:all .15s; box-shadow:var(--panel-shadow-sm); }
.achievement-badge:hover { border-color:var(--achieve-gold); box-shadow:0 0 12px rgba(255,215,0,0.2); transform:translate(-1px,-1px); }
.achievement-icon { width:40px; height:40px; border-radius:4px; object-fit:contain; }
.achievement-icon-placeholder { width:40px; height:40px; border-radius:4px; background:var(--hair-dim); display:flex; align-items:center; justify-content:center; font-size:20px; }
.event-schedule-item { background:var(--bg-card); border:2px solid var(--panel-border); border-radius:var(--panel-radius-sm); padding:16px; margin-bottom:10px; transition:all .15s; box-shadow:var(--panel-shadow-sm); }
.event-schedule-item:hover { border-color:var(--hair); transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.event-status-active { color:var(--ribbon); font-weight:600; }
.event-status-upcoming { color:#5b9bd5; font-weight:600; }
.event-status-tba, .event-status-tbd { color:var(--gold); font-weight:600; }
.event-status-none { color:var(--text-muted); }
.market-listing { background:var(--bg-card); border:2px solid var(--panel-border); border-radius:var(--panel-radius-sm); padding:16px; margin-bottom:10px; display:flex; align-items:center; gap:16px; transition:all .15s; box-shadow:var(--panel-shadow-sm); }
.market-listing:hover { border-color:var(--hair); background:rgba(248,192,157,0.05); transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.market-listing img { width:56px; height:56px; object-fit:contain; border-radius:4px; border:1px solid var(--panel-border); }


.dupe-highlight { border-color: var(--danger) !important; box-shadow: 0 0 15px rgba(224,85,85,0.35) !important; }
.dupe-badge { background: var(--danger); color: #fff; font-size: 0.65rem; padding: 2px 7px; border-radius: 4px; font-weight: 700; letter-spacing: 1px; vertical-align: middle; margin-left: 4px; white-space: nowrap; }


.trade-card-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border:2px solid var(--panel-border); border-radius:var(--panel-radius-sm); margin-bottom:6px; transition:all .15s; cursor:pointer; box-shadow:var(--panel-shadow-sm); }
.trade-card-item:hover { border-color:var(--hair); background:var(--hair-dim); transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.trade-card-item.selected { border-color:var(--ribbon); background:var(--ribbon-dim); }
.trade-card-item img { width:48px; height:48px; object-fit:contain; border-radius:4px; }
.trade-section { background:var(--bg-card); border:3px solid var(--panel-border); border-radius:var(--panel-radius); padding:20px; margin-bottom:20px; box-shadow:var(--panel-shadow); }
.trade-card { background:var(--bg-card); border:3px solid var(--panel-border); border-radius:var(--panel-radius); padding:20px; margin-bottom:16px; transition:all .15s; box-shadow:var(--panel-shadow); }
.trade-card:hover { border-color:var(--hair); transform:translate(-1px,-1px); box-shadow:var(--panel-shadow-hover); }
.btn-accept-sm { background:rgba(96,164,137,.15); border:1px solid rgba(96,164,137,.4); color:var(--accent); border-radius:4px; padding:4px 10px; font-size:.8rem; text-decoration:none; }
.btn-accept-sm:hover { background:rgba(96,164,137,.4); color:#fff; }


.progress-series { background:var(--bg-card); border:3px solid var(--panel-border); border-radius:var(--panel-radius); padding:24px; margin-bottom:20px; box-shadow:var(--panel-shadow); }
.progress-bar-custom { background:rgba(19,17,26,0.6); border-radius:4px; height:22px; overflow:hidden; border:1px solid var(--panel-border); }
.progress-fill-ribbon { background:linear-gradient(90deg,var(--ribbon),var(--accent-light)); height:100%; border-radius:4px; transition:width .5s ease; }
.progress-fill-hair { background:linear-gradient(90deg,var(--hair),#ffcdb2); height:100%; border-radius:4px; transition:width .5s ease; }
.rarity-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rarity-label { min-width:40px; text-align:right; font-weight:600; }
.rarity-bar { flex:1; }
.rarity-count { min-width:60px; font-size:.9rem; }

/* ═══════════════════════════════════════════════════════════════
   BASE LAYOUT 
   ═══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}
.card-body h6, .inv-card strong {
    color: var(--ribbon) !important;
}

body {
    background-color: var(--bg-dark);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    margin: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 39px,
        rgba(225, 190, 231, 0.015) 40px
    );
    background-size: 100% 40px;
}


.glass {
    background: var(--bg-card);
    border: 3px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
}


.navbar {
    background: var(--navbar-bg) !important;
    border-bottom: 3px solid var(--panel-border);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 9999;
}
.navbar-brand { color: var(--hair) !important; font-weight: 900; }
.nav-link { color: var(--text-muted) !important; transition: all .15s; border-radius: 4px; padding: 8px 12px !important; }
.nav-link:hover, .nav-link.active { color: var(--hair) !important; background: var(--hair-dim); }
.navbar-logo { height: 42px; width: auto; margin-right: 8px; vertical-align: middle; filter: none; }

.card {
    background: var(--bg-card);
    border: 3px solid var(--panel-border);
    transition: all .15s ease;
    border-radius: var(--panel-radius);
    overflow: hidden;
    box-shadow: var(--panel-shadow-sm);
}
.card:hover {
    border-color: var(--hair);
    transform: translate(-2px, -2px);
    box-shadow: var(--panel-shadow-hover);
}
.card:active {
    transform: translate(var(--press-offset), var(--press-offset));
    box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}


.card-img-wrapper{position:relative;min-height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:var(--bg-dark);border-bottom:3px solid var(--panel-border)}
.card-img-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.4);min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;filter:blur(20px) brightness(0.65) saturate(1.2);z-index:0;pointer-events:none}
.card-img-fg { position:relative; z-index:1; background:transparent !important }
.card-img-full { width:100%; max-height:350px; object-fit:contain; }


.btn-accent { background: var(--hair); border: 2px solid var(--panel-border); color: var(--bg-dark); border-radius:var(--panel-radius-sm); font-weight:700; transition:all .15s; box-shadow:var(--panel-shadow-sm); }
.btn-accent:hover { background: #ffcdb2; transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.btn-accent:active { transform:translate(var(--press-offset),var(--press-offset)); box-shadow:1px 1px 0 rgba(0,0,0,0.2); }
.btn-outline-accent { background:var(--bg-card); border:2px solid var(--panel-border); color:var(--hair); border-radius:var(--panel-radius-sm); transition:all .15s; box-shadow:var(--panel-shadow-sm); }
.btn-outline-accent:hover { background:var(--hair); color:var(--bg-dark); transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.btn-outline-accent:active { transform:translate(var(--press-offset),var(--press-offset)); box-shadow:1px 1px 0 rgba(0,0,0,0.2); }
.btn-ribbon { background: var(--ribbon); border: 2px solid var(--panel-border); color: #fff; border-radius:var(--panel-radius-sm); font-weight:600; transition:all .15s; box-shadow:var(--panel-shadow-sm); }
.btn-ribbon:hover { background: #4752C4; transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.btn-ribbon:active { transform:translate(var(--press-offset),var(--press-offset)); box-shadow:1px 1px 0 rgba(0,0,0,0.2); }
.btn-danger-sm { background:rgba(224,108,117,.15); border:1px solid rgba(224,108,117,.4); color:var(--danger); border-radius:4px; padding:4px 10px; font-size:.8rem; }
.btn-danger-sm:hover { background:rgba(224,108,117,.4); color:#fff; }
.btn-edit-sm { background:var(--ribbon-dim); border:1px solid var(--ribbon); color:var(--ribbon); border-radius:4px; padding:4px 10px; font-size:.8rem; text-decoration:none; }
.btn-edit-sm:hover { background:var(--ribbon); color:#fff; }


.form-control, .form-select { background:rgba(19,17,26,0.6); border:2px solid var(--panel-border); color:var(--text); border-radius:var(--panel-radius-sm); }
.form-control:focus, .form-select:focus { background:rgba(19,17,26,0.8); border-color:var(--hair); color:var(--text); box-shadow:0 0 0 .2rem rgba(248,192,157,0.15); }


.table { color: var(--text) !important; --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-striped-bg: rgba(248,192,157,0.03); --bs-table-hover-bg: rgba(248,192,157,0.06); }
.table th { color: var(--hair) !important; border-color: var(--panel-border); background: transparent !important; }
.table td { color: var(--text) !important; border-color: rgba(225, 190, 231, 0.08); background: transparent !important; }


.stat-card {
    background: var(--bg-card);
    border: 3px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 32px 24px;
    text-align: center;
    transition: all .15s;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--panel-shadow-sm);
}
.stat-card:hover { border-color: var(--hair); box-shadow: var(--panel-shadow); transform:translate(-1px,-1px); }
.stat-card h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.1;
}
.stat-card p {
    font-size: 0.95rem;
    margin-bottom: 0;
}


.filter-bar { background: var(--bg-card); border:3px solid var(--panel-border); border-radius:var(--panel-radius); padding:20px; margin-bottom:20px; box-shadow:var(--panel-shadow); }


.give-form { background: var(--bg-card); border:3px solid var(--cardigan-dim); border-radius:var(--panel-radius); padding:40px; max-width:500px; margin:0 auto; box-shadow:var(--panel-shadow); }


.inv-card { background:var(--bg-card); border:2px solid var(--panel-border); border-radius:var(--panel-radius-sm); padding:15px; display:flex; align-items:center; gap:15px; margin-bottom:10px; transition:all .15s; box-shadow:var(--panel-shadow-sm); }
.inv-card:hover { border-color: var(--hair); transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.inv-card img { width:70px; height:70px; object-fit:cover; border-radius:4px; }


.pull-nav-btn { border:2px solid var(--panel-border); color:var(--hair); padding:6px 15px; border-radius:4px; text-decoration:none; transition:all .15s; display:inline-block; box-shadow:var(--panel-shadow-sm); }
.pull-nav-btn:hover { border-color:var(--hair); background:var(--hair-dim); color:var(--hair); transform:scale(1.05); box-shadow:var(--panel-shadow); }
.pull-nav-btn:disabled { opacity:.3; cursor:not-allowed; transform:none; box-shadow:none; }


.discord-btn { background:#5865F2; border:2px solid var(--panel-border); color:#fff; border-radius:var(--panel-radius-sm); padding:12px 24px; font-size:1.1rem; transition:all .15s; display:inline-flex; align-items:center; gap:10px; box-shadow:var(--panel-shadow-sm); }
.discord-btn:hover { background:#4752C4; transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.discord-btn:active { transform:translate(var(--press-offset),var(--press-offset)); box-shadow:1px 1px 0 rgba(0,0,0,0.2); }

/* ═══════════════════════════════════════════════════════════════
   PULL ANIMATION OVERLAY 
   ═══════════════════════════════════════════════════════════════ */
.pull-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,6,8,0.95);z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center;color:var(--text)}
.pull-overlay.active{display:flex}
.pull-scene{perspective:1200px;width:200px;height:280px;margin:0 auto}
.pull-card-3d{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 0.8s cubic-bezier(.4,0,.2,1)}
.pull-card-3d.flipped{transform:rotateY(180deg)}
.pull-card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:4px;overflow:hidden}
.pull-card-front{transform:rotateY(180deg);background:var(--bg-dark);display:flex;align-items:center;justify-content:center;border:2px solid var(--panel-border)}
.pull-card-front img{width:100%;height:100%;object-fit:contain}
.pull-card-back{background:linear-gradient(135deg, var(--bg-card) 0%, var(--panel-border) 50%, var(--bg-card) 100%);border:2px solid var(--panel-border);display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--hair-dim)}


@keyframes glow-5{0%,100%{box-shadow:0 0 15px rgba(255,170,0,0.4),0 0 35px rgba(255,170,0,0.2)}50%{box-shadow:0 0 30px rgba(255,170,0,0.7),0 0 60px rgba(255,170,0,0.3)}}
@keyframes rainbow-wave-glow {
  0% { box-shadow: 0 0 20px rgba(255,85,85,0.5), 0 0 50px rgba(255,85,85,0.25), 0 0 80px rgba(255,85,85,0.1); border-color: #ff5555; }
  16% { box-shadow: 0 0 20px rgba(255,170,0,0.5), 0 0 50px rgba(255,170,0,0.25), 0 0 80px rgba(255,170,0,0.1); border-color: #ffaa00; }
  33% { box-shadow: 0 0 20px rgba(85,221,85,0.5), 0 0 50px rgba(85,221,85,0.25), 0 0 80px rgba(85,221,85,0.1); border-color: #55dd55; }
  50% { box-shadow: 0 0 20px rgba(85,153,255,0.5), 0 0 50px rgba(85,153,255,0.25), 0 0 80px rgba(85,153,255,0.1); border-color: #5599ff; }
  66% { box-shadow: 0 0 20px rgba(204,102,255,0.5), 0 0 50px rgba(204,102,255,0.25), 0 0 80px rgba(204,102,255,0.1); border-color: #cc66ff; }
  83% { box-shadow: 0 0 20px rgba(255,85,200,0.5), 0 0 50px rgba(255,85,200,0.25), 0 0 80px rgba(255,85,200,0.1); border-color: #ff55c8; }
  100% { box-shadow: 0 0 20px rgba(255,85,85,0.5), 0 0 50px rgba(255,85,85,0.25), 0 0 80px rgba(255,85,85,0.1); border-color: #ff5555; }
}
@keyframes shimmer-pass { 0% { transform: translateX(-150%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(150%); opacity: 0; } }
@keyframes sparkle-blink { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }
@keyframes rainbow-sweep { 0% { background-position: 200% 0; opacity: 0; } 5% { opacity: 0.55; } 50% { opacity: 0.3; } 100% { background-position: -100% 0; opacity: 0; } }
.pull-rarity-5 .pull-card-front{animation:glow-5 1.5s ease-in-out infinite;border:2px solid #ffaa00}
.pull-rarity-6 .pull-card-front { animation: rainbow-wave-glow 3s ease-in-out infinite; border: 3px solid #ff5555; position: relative; overflow: hidden; }
.pull-rarity-6 .pull-card-front::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.08) 58%, transparent 70%); transform: translateX(-150%); animation: shimmer-pass 2s ease-in-out 0.8s 3; pointer-events: none; z-index: 10; }
.pull-rarity-6 .pull-card-front::before { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; top: 12%; left: 18%; opacity: 0; animation: sparkle-blink 0.6s ease-in-out 1.5s infinite alternate; z-index: 11; pointer-events: none; box-shadow: 30px 15px 0 2px rgba(255,255,255,0.9), 55px 5px 0 1px rgba(255,255,255,0.7), 10px 50px 0 2px rgba(255,255,255,0.8), 45px 45px 0 1px rgba(255,255,255,0.6), 70px 35px 0 2px rgba(255,255,255,0.7), 25px 70px 0 1px rgba(255,255,255,0.5), 60px 65px 0 2px rgba(255,255,255,0.6); }
.pull-flash { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(110deg, transparent 0%, rgba(255,85,85,0.3) 10%, rgba(255,170,0,0.35) 20%, rgba(255,255,85,0.3) 30%, rgba(85,221,85,0.35) 40%, rgba(85,153,255,0.35) 50%, rgba(204,102,255,0.3) 60%, rgba(255,85,200,0.35) 70%, transparent 80%); background-size: 300% 100%; z-index: 10000; pointer-events: none; animation: rainbow-sweep 2.5s ease-out forwards; }
@keyframes slide-up-in{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade-in-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.pull-slide-in{animation:slide-up-in .35s ease-out forwards}
.pull-fade-info{animation:fade-in-up .3s ease-out forwards}
.pull-counter{font-size:1.1rem;color:var(--text-muted);margin-bottom:10px}
.pull-info{text-align:center;min-height:80px}


.perm-on { color: var(--ribbon); }
.perm-off { color: var(--danger); }


.user-avatar { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--hair); box-shadow: 0 0 15px rgba(248, 192, 157, 0.3); }
.user-avatar-sm { width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--hair); margin-right: 8px; vertical-align: middle; }


.badge-star { font-weight: bold; letter-spacing: 1px; }
.badge-1 { color: #b0b0b0; } .badge-2 { color: #55dd55; } .badge-3 { color: #5599ff; }
.badge-4 { color: #cc66ff; } .badge-5 { color: #ffaa00; } .badge-6 { color: #ff5555; text-shadow: 0 0 8px rgba(255,85,85,0.5); }
.star-1 { color: #b0b0b0; } .star-2 { color: #55dd55; } .star-3 { color: #5599ff; }
.star-4 { color: #cc66ff; } .star-5 { color: #ffaa00; } .star-6 { color: #ff5555; }


.page-link { background: var(--bg-card); border: 2px solid var(--panel-border); color: var(--hair); box-shadow: var(--panel-shadow-sm); border-radius: var(--panel-radius-sm) !important; }
.page-link:hover { background: var(--hair-dim); border-color: var(--hair); color: var(--hair); transform:translate(-1px,-1px); box-shadow:var(--panel-shadow); }
.page-item.active .page-link { background: var(--hair); border-color: var(--hair); color: var(--bg-dark); font-weight: bold; }
.page-item.disabled .page-link { background: rgba(19,17,26,0.4); color: var(--text-muted); border-color: var(--panel-border); box-shadow: none; }


.login-box { max-width: 400px; margin: 10% auto; padding: 40px; border-radius: var(--panel-radius); background: var(--bg-card); border: 3px solid var(--panel-border); box-shadow: var(--panel-shadow); }

/* ═══════════════════════════════════════════════════════════════
   TRACKING UX
   ═══════════════════════════════════════════════════════════════ */
.tracking-status-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tracking-status-pill{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;border:2px solid transparent;background:var(--bg-dark);color:var(--text-muted)}
.tracking-status-pill:hover{border-color:var(--panel-border);transform:translateY(-1px)}
.tracking-status-pill.active{font-weight:700}
.tracking-status-pill.active.status-watching{background:rgba(96,164,137,0.2);color:var(--ribbon);border-color:var(--ribbon)}
.tracking-status-pill.active.status-reading{background:rgba(96,164,137,0.2);color:var(--ribbon);border-color:var(--ribbon)}
.tracking-status-pill.active.status-playing{background:rgba(96,164,137,0.2);color:var(--ribbon);border-color:var(--ribbon)}
.tracking-status-pill.active.status-completed{background:rgba(248,192,157,0.2);color:var(--gold);border-color:var(--gold)}
.tracking-status-pill.active.status-finished{background:rgba(248,192,157,0.2);color:var(--gold);border-color:var(--gold)}
.tracking-status-pill.active.status-hold{background:rgba(163,107,112,0.2);color:var(--cardigan);border-color:var(--cardigan)}
.tracking-status-pill.active.status-dropped{background:rgba(224,85,85,0.2);color:var(--danger);border-color:var(--danger)}
.tracking-status-pill.active.status-plan{background:rgba(91,155,213,0.2);color:var(--market-blue);border-color:var(--market-blue)}
.tracking-status-pill.active.status-blacklist{background:rgba(138,122,126,0.2);color:var(--text-muted);border-color:var(--text-muted)}
.tracking-star-rating{display:inline-flex;gap:2px;font-size:1.3rem;cursor:pointer}
.tracking-star{color:var(--text-muted);transition:color .15s;user-select:none}
.tracking-star:hover,.tracking-star.filled{color:var(--gold)}
.tracking-star.preview{color:var(--gold);opacity:.6}
.tracking-progress-wrapper{display:flex;align-items:center;gap:8px}
.tracking-progress-input{flex:1;min-width:60px}
.tracking-quick-btn{background:var(--ribbon-dim);border:2px solid var(--ribbon);color:var(--ribbon);border-radius:3px;padding:4px 10px;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;box-shadow:var(--panel-shadow-sm)}
.tracking-quick-btn:hover{background:var(--ribbon);color:#fff;transform:translate(-1px,-1px);box-shadow:var(--panel-shadow)}
.tracking-quick-btn:active{transform:translate(var(--press-offset),var(--press-offset));box-shadow:1px 1px 0 rgba(0,0,0,0.2)}
.tracking-progress-bar-wrap{margin-top:6px;height:8px;background:rgba(19,17,26,0.6);border-radius:3px;overflow:hidden;border:1px solid var(--panel-border)}
.tracking-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--ribbon),var(--accent-light));border-radius:3px;transition:width .3s ease}
.tracking-date-wrap{display:flex;gap:4px;align-items:center}
.tracking-date-btn{background:var(--hair-dim);border:1px solid var(--panel-border);color:var(--hair);border-radius:3px;padding:4px 8px;font-size:.7rem;cursor:pointer;transition:all .15s;white-space:nowrap}
.tracking-date-btn:hover{background:var(--hair);color:var(--bg-dark)}
.tracking-suggest{position:fixed;top:20px;right:20px;background:var(--bg-card);border:2px solid var(--ribbon);border-radius:var(--panel-radius-sm);padding:12px 20px;z-index:10000;box-shadow:var(--panel-shadow);display:none;animation:fade-in-up .3s ease-out}
.tracking-suggest.show{display:block}
.tracking-suggest-btn{margin-left:8px}

/* ═══════════════════════════════════════════════════════════════
   NEW MOBILE UI THAT ISNT FINISHED YAY!
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .navbar-toggler { display: none !important; }
    .navbar-collapse.collapse.show .navbar-nav { display: none; }
}
.mobile-bottom-nav { display: none; }
.mobile-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--navbar-bg-solid);
    border-top: 3px solid var(--panel-border);
    z-index: 9998; padding: 8px 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bottom-nav .nav-item { flex: 1; text-align: center; color: var(--text-muted); text-decoration: none; padding: 6px 0; transition: color 0.15s; }
.mobile-bottom-nav .nav-item i { font-size: 1.3rem; display: block; margin-bottom: 2px; }
.mobile-bottom-nav .nav-item span { font-size: 0.65rem; font-weight: 600; }
.mobile-bottom-nav .nav-item.active, .mobile-bottom-nav .nav-item:hover { color: var(--hair); }

@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; justify-content: space-around; }
    .navbar-collapse .navbar-nav { display: none; }
    .navbar { padding: 0.5rem 1rem; min-height: 50px; }
    .navbar-brand { font-size: 1rem; }
    .navbar-logo { height: 32px; }
    body { padding-bottom: 70px; }
    .vn-list-row { padding: 16px 12px !important; min-height: 60px; align-items: center; }
    .vn-list-row img { width: 50px !important; height: 70px !important; }
    .vn-list-row .btn-sm { font-size: 0.8rem !important; padding: 6px 12px !important; }
    .stat-card { padding: 16px 12px !important; min-height: auto !important; }
    .stat-card h2 { font-size: 1.8rem !important; }
    .stat-card h3 { font-size: 1.4rem !important; }
    .stat-card h4 { font-size: 1.1rem !important; }
    .row.g-3 > div { margin-bottom: 12px; }
    .vn-card { width: 100%; margin-bottom: 12px; }
    .vn-card-img { min-height: 180px; }
    .form-control, .form-select { font-size: 16px !important; }
    .btn-sm { font-size: 0.85rem; padding: 8px 14px; }
    .tracking-status-pills { gap: 6px; }
    .tracking-status-pill { font-size: 0.75rem; padding: 8px 12px; }
    .modal-dialog { margin: 10px; }
}

/* Reminder to fix this bum ass broken thing at some point */
.mobile-nav-item-dropdown { position: relative; }
.mobile-dropup-menu {
    display: none; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
    background: var(--navbar-bg-solid); border: 2px solid var(--panel-border); border-radius: var(--panel-radius-sm);
    padding: 8px; min-width: 140px; z-index: 10000; box-shadow: var(--panel-shadow);
}
.mobile-dropup-menu.show { display: block; }
.mobile-dropup-menu a { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; padding: 10px 12px; border-radius: 4px; font-size: 0.9rem; transition: background 0.15s; }
.mobile-dropup-menu a:hover { background: var(--hair-dim); color: var(--hair); }

/* ═══════════════════════════════════════════════════════════════
   LIST COMPARISON
   ═══════════════════════════════════════════════════════════════ */
.compare-summary-card{background:var(--bg-card);border:3px solid var(--panel-border);border-radius:var(--panel-radius);padding:20px;margin-bottom:20px;box-shadow:var(--panel-shadow)}
.compare-venn{display:flex;justify-content:center;align-items:center;gap:12px;margin:20px 0;flex-wrap:wrap}
.compare-circle{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;flex-shrink:0}
.compare-circle-mine{background:rgba(96,164,137,0.15);color:var(--ribbon);border:2px solid var(--ribbon)}
.compare-circle-shared{background:rgba(255,215,0,0.15);color:var(--gold);border:2px solid var(--gold)}
.compare-circle-theirs{background:rgba(126,87,194,0.15);color:var(--cardigan);border:2px solid var(--cardigan)}
.compare-circle-label{display:block;font-size:.6rem;font-weight:400;color:var(--text-muted);margin-top:2px}
.compare-section{margin-bottom:24px}
.compare-section-title{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:1.05rem}
.compare-section-title i{font-size:1.1rem}
.compare-type-header{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--panel-border)}
.compare-card{display:flex;align-items:center;gap:12px;padding:8px 12px;border:2px solid var(--panel-border);border-radius:var(--panel-radius-sm);margin-bottom:6px;background:var(--bg-card);transition:all .15s;box-shadow:var(--panel-shadow-sm)}
.compare-card:hover{border-color:var(--hair);transform:translate(-1px,-1px);box-shadow:var(--panel-shadow)}
.compare-card img{width:42px;height:60px;object-fit:contain;border-radius:3px;flex-shrink:0}
.compare-card-title{color:var(--hair);font-weight:600;font-size:.85rem;line-height:1.3}
.compare-card-sub{color:var(--text-muted);font-size:.75rem}
.compare-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.65rem;font-weight:700}
.compare-pill-mine{background:rgba(96,164,137,0.15);color:var(--ribbon);border:1px solid rgba(96,164,137,0.3)}
.compare-pill-theirs{background:rgba(126,87,194,0.15);color:var(--cardigan);border:1px solid rgba(126,87,194,0.3)}
.compare-pill-shared{background:rgba(255,215,0,0.15);color:var(--gold);border:1px solid rgba(255,215,0,0.3)}
.compare-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.compare-tab{padding:10px 20px;border-radius:var(--panel-radius-sm);font-weight:600;font-size:.9rem;text-decoration:none;transition:all .15s;border:2px solid var(--panel-border);background:var(--bg-card);color:var(--text-muted);box-shadow:var(--panel-shadow-sm)}
.compare-tab:hover{border-color:var(--hair);color:var(--hair);transform:translate(-1px,-1px);box-shadow:var(--panel-shadow)}
.compare-tab.active{font-weight:700}
.compare-tab.active.tab-shared{background:rgba(255,215,0,0.15);color:var(--gold);border-color:var(--gold)}
.compare-tab.active.tab-mine{background:rgba(96,164,137,0.15);color:var(--ribbon);border-color:var(--ribbon)}
.compare-tab.active.tab-theirs{background:rgba(126,87,194,0.15);color:var(--cardigan);border-color:var(--cardigan)}
.compare-tab-count{font-size:.75rem;opacity:.7;margin-left:4px}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN MENUS 
   ═══════════════════════════════════════════════════════════════ */
.dropdown-menu {
    background: var(--navbar-bg-solid) !important;
    border: 2px solid var(--panel-border) !important;
    border-radius: var(--panel-radius-sm) !important;
    box-shadow: var(--panel-shadow) !important;
}
.dropdown-item {
    color: var(--text) !important;
    border-radius: 4px;
    transition: background 0.15s;
}
.dropdown-item:hover {
    background: var(--hair-dim) !important;
    color: var(--hair) !important;
}
.dropdown-divider {
    border-color: var(--panel-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-content {
    background: var(--bg-card) !important;
    border: 3px solid var(--panel-border) !important;
    border-radius: var(--panel-radius) !important;
    box-shadow: var(--panel-shadow) !important;
}
.modal-header {
    border-bottom: 2px solid var(--panel-border) !important;
}
.modal-footer {
    border-top: 2px solid var(--panel-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAV TABS 
   ═══════════════════════════════════════════════════════════════ */
.nav-tabs {
    border-bottom: 2px solid var(--panel-border);
}
.nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border: 2px solid transparent !important;
    border-bottom: none !important;
    border-radius: var(--panel-radius-sm) var(--panel-radius-sm) 0 0;
    transition: all .15s;
}
.nav-tabs .nav-link:hover {
    color: var(--hair) !important;
    background: var(--hair-dim);
    border-color: var(--panel-border) !important;
    border-bottom: none !important;
}
.nav-tabs .nav-link.active {
    color: var(--hair) !important;
    background: var(--bg-card) !important;
    border-color: var(--panel-border) !important;
    border-bottom: 2px solid var(--bg-card) !important;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS 
   ═══════════════════════════════════════════════════════════════ */
.alert {
    border: 2px solid var(--panel-border) !important;
    border-radius: var(--panel-radius-sm) !important;
    background: var(--bg-card) !important;
    color: var(--text) !important;
}
.alert-success {
    color: var(--hair) !important;
    border-color: var(--ribbon) !important;
    background-color: var(--ribbon-dim) !important;
}
.alert-danger {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background-color: rgba(224, 85, 85, 0.1) !important;
}
.alert-warning {
    color: var(--gold) !important;
    border-color: var(--gold) !important;
    background-color: rgba(255, 215, 0, 0.1) !important;
}
.alert-info {
    color: var(--text) !important;
    border-color: var(--market-blue) !important;
    background-color: rgba(121, 134, 203, 0.1) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SUB RARITY STUFF
   ═══════════════════════════════════════════════════════════════ */
.sub-rarity-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid;
    margin-left: 3px;
    vertical-align: middle;
}

.sub-rarity-badge-rainbow {
    border: 1px solid transparent !important;
    background: linear-gradient(135deg, #ff6b6b, #ffaa00, #ffff66, #55dd55, #5599ff, #cc66ff) !important;
    color: #000 !important;
    font-weight: bold;
    animation: sub-rarity-hue 3s linear infinite;
}

.card-img-wrapper {
    position: relative;
    overflow: hidden;
}

.card-sub-rarity-holo .card-img-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        115deg, 
        transparent 20%, 
        rgba(0, 255, 255, 0.25) 35%, 
        rgba(255, 0, 255, 0.25) 45%, 
        rgba(255, 255, 0, 0.25) 55%, 
        transparent 70%
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
    animation: holo-shimmer 3s ease-in-out infinite;
    background-size: 200% 200%;
}

.card-sub-rarity-full_art .card-img-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: conic-gradient(
        from 0deg, 
        rgba(204, 102, 255, 0.3), 
        rgba(255, 105, 180, 0.3), 
        rgba(100, 149, 237, 0.3), 
        rgba(204, 102, 255, 0.3)
    );
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
    animation: holo-rotate 4s linear infinite;
}

.card-sub-rarity-holo_full_art .card-img-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        linear-gradient(115deg, transparent 20%, rgba(255, 215, 0, 0.35) 35%, rgba(255, 105, 180, 0.35) 45%, rgba(100, 149, 237, 0.35) 55%, transparent 70%),
        conic-gradient(from 0deg, rgba(204, 102, 255, 0.2), rgba(255, 105, 180, 0.2), rgba(100, 149, 237, 0.2), rgba(204, 102, 255, 0.2));
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
    animation: holo-shimmer 3s ease-in-out infinite, holo-rotate 4s linear infinite;
    background-size: 200% 200%, 100% 100%;
}

.card-sub-rarity-rainbow .card-img-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        45deg, 
        rgba(255, 107, 107, 0.4), 
        rgba(255, 170, 0, 0.4), 
        rgba(255, 255, 102, 0.4), 
        rgba(85, 221, 85, 0.4), 
        rgba(85, 153, 255, 0.4), 
        rgba(204, 102, 255, 0.4)
    );
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
    animation: holo-shift 4s linear infinite; 
    background-size: 300% 300%;
}

.card-sub-rarity-holo {
    border-color: #88ccff !important;
    box-shadow: 0 0 8px rgba(136, 204, 255, 0.2);
}

.card-sub-rarity-full_art {
    border-color: #cc66ff !important;
    box-shadow: 0 0 10px rgba(204, 102, 255, 0.25);
}

.card-sub-rarity-holo_full_art {
    border-color: #ffaa00 !important;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

.card-sub-rarity-rainbow {
    border: 2px solid transparent !important;
    background-image:
        linear-gradient(var(--bg-card), var(--bg-card)),
        linear-gradient(135deg, #ff6b6b, #ffaa00, #ffff66, #55dd55, #5599ff, #cc66ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
    animation: sub-rarity-hue 3s linear infinite;
}

@keyframes holo-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes holo-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes holo-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes sub-rarity-hue {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.instant-sell-label.card-sub-rarity-holo,
.instant-sell-label.card-sub-rarity-full_art,
.instant-sell-label.card-sub-rarity-holo_full_art,
.instant-sell-label.card-sub-rarity-rainbow {
    background-image:
        linear-gradient(var(--bg-dark), var(--bg-dark)),
        linear-gradient(135deg, #ff6b6b, #ffaa00, #ffff66, #55dd55, #5599ff, #cc66ff);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}



.lb-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    max-width: 500px;
    margin: 12px auto;
}

.lb-day-claimed {
    background: rgba(96, 164, 137, 0.15);
    border: 1px solid rgba(96, 164, 137, 0.3);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    color: var(--ribbon);
    position: relative;
    font-size: 0.75rem;
}
.lb-day-claimed::after {
    content: "✓";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
    color: var(--ribbon);
}

.lb-day-today {
    background: rgba(255, 215, 0, 0.15);
    border: 2px solid var(--gold);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    color: var(--gold);
    font-size: 0.75rem;
    animation: lb-pulse 2s ease-in-out infinite;
}

.lb-day-future {
    background: var(--bg-dark);
    border: 1px solid var(--hair-dim);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 0.75rem;
}

@keyframes lb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.2); }
}