/* ═══ Calendar Panel ═══ */
.cal-hero { background: linear-gradient(135deg, #1a0d3d, var(--purple)); border-radius: 16px; padding: 1.3rem; margin-bottom: 1rem; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; overflow: hidden; }
.cal-hero::before { content: ''; position: absolute; top: -35px; right: -35px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.cal-hero-t { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: 4px; margin-bottom: .2rem; }
.cal-hero-s { font-size: .68rem; opacity: .75; }
.cal-nav { display: flex; align-items: center; gap: 9px; flex-shrink: 0; z-index: 1; }
.cnbtn { background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 8px; color: #fff; width: 34px; height: 34px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; transition: background .12s; flex-shrink: 0; }
.cnbtn:hover { background: rgba(255, 255, 255, .32); }
.cmlbl { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 2px; min-width: 135px; text-align: center; }

/* Today button */
.cal-today-btn { background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.25); border-radius: 8px; color: #fff; padding: 5px 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .65rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .12s; }
.cal-today-btn:hover { background: rgba(255,255,255,.32); }

/* Wheel picker */
.cal-wheels { display: flex; gap: 4px; align-items: center; }
.cal-wheel-wrap { position: relative; height: 90px; width: 100px; overflow: hidden; border-radius: 10px; }
.cal-wheel { height: 100%; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: y mandatory; }
.cal-wheel::-webkit-scrollbar { display: none; }
.cal-wheel-item { height: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 2px; color: rgba(255,255,255,.3); cursor: pointer; transition: color .15s, transform .15s; user-select: none; }
.cal-wheel-item.active { color: #fff; font-size: 1.2rem; }
.cal-wheel-fade { position: absolute; left: 0; right: 0; height: 30px; pointer-events: none; z-index: 2; }
.cal-wheel-fade.top { top: 0; background: linear-gradient(to bottom, rgba(26,13,61,.9), transparent); }
.cal-wheel-fade.bottom { bottom: 0; background: linear-gradient(to top, rgba(26,13,61,.9), transparent); }
.cal-wheel-pad { height: 30px; flex-shrink: 0; }
.cal-wheel-highlight { position: absolute; top: 50%; left: 4px; right: 4px; height: 30px; transform: translateY(-50%); border-radius: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); pointer-events: none; z-index: 1; }

/* Stats */
.cal-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 1rem; }
.csb { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 10px; padding: .6rem; text-align: center; }
.csb-v { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; line-height: 1; }
.csb-l { font-size: .55rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

/* Legend */
.cal-legend { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: .8rem; }
.cl-item { display: flex; align-items: center; gap: 4px; font-size: .62rem; color: var(--muted); font-weight: 600; }
.cl-dot { width: 7px; height: 7px; border-radius: 50%; }

/* Controls */
.cal-ctrl { display: flex; gap: 7px; margin-bottom: .8rem; flex-wrap: wrap; align-items: center; }
.cal-filters { display: flex; gap: 5px; flex: 1; flex-wrap: wrap; }
.cfb { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: .68rem; color: var(--muted); cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; transition: all .12s; }
.cfb:hover { border-color: var(--purple); color: var(--purple); }
.cfb.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.add-custom-btn { background: linear-gradient(135deg, var(--red), var(--pink)); color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .7rem; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 10px rgba(232, 37, 58, .22); transition: all .15s; }
.add-custom-btn:hover { transform: translateY(-1px); }

/* Search */
.cal-search-wrap { position: relative; margin-bottom: 1rem; }
.cal-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: .85rem; pointer-events: none; }
.cal-search { width: 100%; padding: 10px 40px 10px 40px; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8rem; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.cal-search::placeholder { color: var(--muted); font-size: .75rem; }
.cal-search:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(108, 47, 247, .12); }
.cal-search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: var(--bg4); border: none; color: var(--muted); width: 22px; height: 22px; border-radius: 50%; font-size: .7rem; cursor: pointer; display: none; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; transition: background .12s, color .12s; }
.cal-search-clear:hover { background: var(--purple); color: #fff; }
.cal-search-clear.visible { display: flex; }
/* Search Dropdown */
.cal-search-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg2); border: 1.5px solid var(--purple); border-radius: 12px; max-height: 360px; overflow-y: auto; z-index: 50; box-shadow: 0 8px 32px rgba(108, 47, 247, .15); }
.cal-search-dropdown.open { display: block; }
.cal-search-dropdown::-webkit-scrollbar { width: 5px; }
.cal-search-dropdown::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 5px; }
.cal-sr-header { padding: 10px 14px 6px; font-size: .65rem; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); }
.cal-sr { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background .1s; border-bottom: 1px solid var(--border); }
.cal-sr:last-child { border-bottom: none; }
.cal-sr:hover { background: var(--bg3); }
.cal-sr-poster { width: 32px; height: 48px; border-radius: 5px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.cal-sr-poster-ph { width: 32px; height: 48px; border-radius: 5px; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.cal-sr-info { flex: 1; min-width: 0; }
.cal-sr-title { font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-sr-title mark { background: rgba(108, 47, 247, .2); color: var(--purple); border-radius: 2px; padding: 0 1px; font-weight: 800; }
.cal-sr-meta { font-size: .65rem; color: var(--muted); margin-top: 1px; }
.cal-sr-type { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.cal-sr-type.t-release { background: rgba(108, 47, 247, .1); color: var(--purple); }
.cal-sr-type.t-event { background: rgba(255, 153, 0, .1); color: var(--gold); }
.cal-sr-type.t-festival { background: rgba(255, 45, 120, .1); color: var(--pink); }
.cal-sr-type.t-custom { background: rgba(232, 37, 58, .1); color: var(--red); }
.cal-sr-type.t-wish { background: rgba(255, 107, 53, .1); color: var(--orange); }
.cal-sr-empty { padding: 20px 14px; text-align: center; color: var(--muted); font-size: .8rem; }
.cal-sr-future { display: inline-block; background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; font-size: .5rem; font-weight: 700; padding: 1px 6px; border-radius: 3px; vertical-align: middle; text-transform: uppercase; letter-spacing: .5px; margin-left: 4px; }

/* Grid */
.cal-grid-wrap { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 1rem; }
.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg3); border-bottom: 1.5px solid var(--border); }
.cal-dow { text-align: center; font-size: .58rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding: .4rem 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--bg3); }
.cal-day.om { background: var(--bg3); opacity: .4; }
.cal-day.td .cdn { background: var(--purple); color: #fff; border-radius: 50%; }
.cal-day.hl .cdn { background: var(--pink); color: #fff; border-radius: 50%; animation: pop .4s ease; }
@keyframes pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.cdn { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; margin-bottom: 2px; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; }
.cdot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cdot.release { background: var(--purple); }
.cdot.event { background: var(--gold); }
.cdot.festival { background: var(--pink); }
.cdot.wish { background: var(--orange); }
.cdot.custom { background: var(--red); }
.cal-mini-poster { width: 18px; height: 27px; border-radius: 3px; object-fit: cover; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
/* Poster tooltip */
.poster-tip { position: fixed; z-index: 999; pointer-events: none; opacity: 0; transition: opacity .18s ease, transform .18s ease; background: var(--bg2); border: 1.5px solid var(--purple); border-radius: 10px; padding: 6px; box-shadow: 0 12px 40px rgba(108, 47, 247, .25); width: 160px; }
.poster-tip.visible { opacity: 1; }
.poster-tip img { width: 100%; border-radius: 6px; display: block; }
.poster-tip-title { font-size: .7rem; font-weight: 700; text-align: center; margin-top: 5px; padding: 0 2px 2px; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-mini-poster { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.cal-mini-poster:hover { transform: scale(1.15); box-shadow: 0 3px 10px rgba(108, 47, 247, .3); }

.cal-more { font-size: .5rem; font-weight: 700; color: var(--muted); background: var(--bg4); border-radius: 3px; padding: 1px 3px; line-height: 1.2; align-self: center; }
.cal-day { min-height: 75px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 3px 3px; cursor: pointer; transition: background .1s; }

/* List */
.cal-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 1rem; }
.ci { background: var(--bg2); border: 1.5px solid var(--border); border-radius: 12px; padding: 11px 13px; display: flex; gap: 11px; align-items: flex-start; }
.ci:hover { border-color: var(--purple2); }
.ci.ci-ev { border-left: 3px solid var(--gold); }
.ci.ci-fe { border-left: 3px solid var(--pink); }
.ci.ci-re { border-left: 3px solid var(--purple); }
.ci.ci-wi { border-left: 3px solid var(--orange); }
.ci.ci-cu { border-left: 3px solid var(--red); }
.ci-date { text-align: center; flex-shrink: 0; width: 38px; }
.ci-day { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; line-height: 1; color: var(--purple); }
.ci.ci-cu .ci-day { color: var(--red); }
.ci-mon { font-size: .56rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.ci-ph { width: 35px; height: 52px; border-radius: 5px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.ci-pph { width: 35px; height: 52px; border-radius: 5px; background: var(--bg4); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.ci-info { flex: 1; }
.ci-type { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; display: inline-block; margin-bottom: 3px; }
.ct-re { background: rgba(108, 47, 247, .1); color: var(--purple); }
.ct-ev { background: rgba(255, 153, 0, .1); color: var(--gold); }
.ct-fe { background: rgba(255, 45, 120, .1); color: var(--pink); }
.ct-wi { background: rgba(255, 107, 53, .1); color: var(--orange); }
.ct-cu { background: rgba(232, 37, 58, .1); color: var(--red); }
.ci-title { font-size: .85rem; font-weight: 700; margin-bottom: 2px; }
.ci-meta { font-size: .7rem; color: var(--muted); line-height: 1.4; }
.ci-cd { font-size: .63rem; color: var(--cyan); font-weight: 700; margin-top: 2px; }
.ci-today { display: inline-block; background: var(--purple); color: #fff; font-size: .53rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-left: 5px; vertical-align: middle; text-transform: uppercase; }
.ci-acts { display: flex; gap: 5px; margin-top: 5px; align-items: center; flex-wrap: wrap; }
.ci-add { background: var(--purple); color: #fff; border: none; border-radius: 5px; padding: 3px 9px; font-size: .62rem; font-weight: 700; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; }
.ci-add:hover { background: var(--purple2); }
.ci-add.added { background: var(--green); cursor: default; }
.ci-wish { background: transparent; border: 1.5px solid var(--border2); border-radius: 5px; padding: 3px 9px; font-size: .62rem; font-weight: 700; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--orange); }
.ci-del { background: transparent; border: 1.5px solid var(--border); border-radius: 5px; padding: 3px 9px; font-size: .62rem; font-weight: 700; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--muted); margin-left: auto; }
.ci-del:hover { border-color: var(--danger); color: var(--danger); }
.ci-clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.ci-clickable:hover { border-color: var(--purple2); box-shadow: 0 4px 16px rgba(108, 47, 247, .1); transform: translateY(-1px); }
.ci-arrow { font-size: 1.5rem; color: var(--muted); flex-shrink: 0; align-self: center; margin-left: auto; padding-left: 6px; transition: color .12s, transform .12s; }
.ci-clickable:hover .ci-arrow { color: var(--purple); transform: translateX(3px); }
.cal-empty { text-align: center; padding: 1.5rem; color: var(--muted); font-size: .83rem; }