:root {
    --hoc-blue: #66d1ff;
    --hoc-blue-dim: #4eb6e0;
    --hoc-surface: #14121e;
    --hoc-surface-2: #181623;
    --hoc-line: #1c1a2b;
}

.button.is-hocblue {
    background-color: var(--hoc-blue);
    color: #0c1418;
    border-color: transparent;
}
.button.is-hocblue:hover,
.button.is-hocblue.is-hovered {
    background-color: var(--hoc-blue-dim);
    color: #061015;
    border-color: transparent;
}
.button.is-hocblue:focus,
.button.is-hocblue.is-focused {
    background-color: var(--hoc-blue-dim);
    color: #061015;
    border-color: transparent;
    box-shadow: 0 0 0 0.125em rgba(102, 209, 255, 0.45);
}
.button.is-hocblue:active,
.button.is-hocblue.is-active { background-color: var(--hoc-blue-dim); color:#061015; }
.button.is-hocblue[disabled] { background-color: var(--hoc-blue); opacity: 0.5; }

#user-dropdown .user-trigger { cursor: pointer; }
#user-dropdown .navbar-dropdown {
    background-color: var(--hoc-surface);
    border-top: 1px solid var(--hoc-line);
}

#user-dropdown .navbar-dropdown a.navbar-item {
    background-color: var(--hoc-surface);
    color: #ddd;
}
#user-dropdown .navbar-dropdown a.navbar-item:hover,
#user-dropdown .navbar-dropdown a.navbar-item.is-active {
    background-color: rgba(102, 209, 255, 0.14);
    color: #fff;
}
#user-dropdown .navbar-divider { background-color: var(--hoc-line); }

@media screen and (max-width: 1023px) {
    #user-dropdown .navbar-dropdown { display: block; }
    #user-dropdown .navbar-link::after { display: none; }
}

.modal-card-body .notification.is-light { color: var(--hoc-line); }
.modal-card-body .label { color: #ddd; }

.mylist-tabs { margin-bottom: 1.5rem; }
.mylist-status-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    margin-left: 0.5rem;
    text-transform: uppercase;
}
.mylist-status-pill.plan      { background:#4a3d7a; color:#cdc0ff; }
.mylist-status-pill.completed { background:#1f5e3a; color:#b7f0c8; }
.mylist-status-pill.dropped   { background:#693030; color:#ffc7c7; }

.hoc-overlay-card { position: relative; }
.hoc-overlay-card .card-image { position: relative; }

.hoc-card-overlay {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 10;
    display: flex;
    gap: 0.25rem;
    flex-direction: column;
}
.hoc-card-overlay.hoc-overlay-left {
    right: auto;
    left: 0.4rem;
}
.hoc-overlay-btn {
    background: rgba(20, 18, 30, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.hoc-overlay-btn:hover {
    background: var(--hoc-blue);
    color: #0c1418;
    transform: scale(1.05);
}

.hoc-overlay-menu {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 11;
    background: var(--hoc-surface);
    border: 1px solid var(--hoc-line);
    border-radius: 6px;
    min-width: 170px;
    padding: 0.35rem 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.hoc-menu-item {
    display: block;
    padding: 0.4rem 0.85rem;
    color: #ddd;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.2;
    text-decoration: none;
}
.hoc-menu-item:hover { background: rgba(102, 209, 255, 0.14); color: #fff; }
.hoc-menu-sep { height: 1px; background: var(--hoc-line); margin: 0.3rem 0; }

.playlist-card {
    background: var(--hoc-surface-2);
    border: 1px solid var(--hoc-line);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.playlist-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.pl-card-cover {
    display: flex;
    gap: 4px;
    position: relative;
    background: #0d0c14;
    aspect-ratio: 16 / 6;
}
.pl-cover-tile {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1c1a2b, #100f18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pl-cover-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.playlist-card:hover .pl-cover-tile img { transform: scale(1.04); }
.pl-cover-tile.is-empty {
    color: #3a3a4f;
    font-size: 1.6rem;
}
.pl-cover-tile.is-empty i { opacity: 0.6; }

.pl-cover-count {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 5;
}

.pl-overlay-actions { flex-direction: row !important; }

.pl-card-body {
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pl-card-body .pl-name {
    font-weight: 600;
    color: #f0f0f0;
    font-size: 1.05rem;
    text-decoration: none;
}
.pl-card-body .pl-name:hover { color: var(--hoc-blue); }
.pl-card-body .pl-meta {
    color: #aaa;
    font-size: 0.8rem;
    margin-left: auto;
}

.visibility-pill {
    font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.55rem;
    border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4px;
    display: inline-block;
}
.visibility-pill.public  { background:#1f5e3a; color:#b7f0c8; }
.visibility-pill.private { background:#3a3a4f; color:#cccccc; }

@media (max-width: 540px) {
    .pl-card-body { flex-direction: column; align-items: flex-start; }
    .pl-card-body .pl-meta { margin-left: 0; }
}

.addpl-popover {
    background: var(--hoc-surface-2);
    border: 1px solid var(--hoc-line);
    border-radius: 6px;
    padding: 0.5rem 0;
    max-height: 340px;
    overflow-y: auto;
    min-width: 280px;
}
.addpl-popover .addpl-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    color: #ddd;
}
.addpl-popover .addpl-item:hover { background: rgba(102, 209, 255, 0.14); }
.addpl-popover .addpl-item .icon { width: 1.2rem; }
.addpl-popover .addpl-item.checked .icon i { color: #6cf080; }
.addpl-popover hr { margin: 0.4rem 0; background-color: var(--hoc-line); height: 1px; border: 0; }
.addpl-popover .addpl-newrow { padding: 0.45rem 0.85rem; }
.addpl-popover .addpl-newrow input { width: 100%; }

.pl-controls {
    background: var(--hoc-surface-2);
    border: 1px solid var(--hoc-line);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}
.pl-controls .pl-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.pl-controls .pl-title  {
    font-weight: 600; color: #fff;
}
.pl-controls .pl-pos    { color: #aaa; font-size: 0.85rem; }
.pl-controls .pl-nav    { display: flex; gap: 0.4rem; margin-left: auto; }
.pl-strip                      { padding: 0.5rem 0 !important; margin: 0 !important; }
.pl-strip .pl-strip-item       { text-decoration: none; flex: 0 0 150px; }
.pl-strip .pl-strip-item .compact-thumbnail { position: relative; }

.pl-strip .pl-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 640px) {
    .pl-controls .pl-nav { margin-left: 0; width: 100%; }
    .pl-controls .pl-nav .button { flex: 1; }
    .pl-strip .pl-strip-item { flex: 0 0 120px; }
}

.pl-drag-handle {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    z-index: 11;
    background: rgba(20, 18, 30, 0.85);
    color: #fff;
    border-radius: 6px;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: grab;
    font-size: 0.9rem;
}
.pl-drag-handle:active { cursor: grabbing; }

#pl-grid.is-reorder-mode .pl-item-card {
    outline: 2px dashed rgba(102, 209, 255, 0.4);
    outline-offset: -4px;
    border-radius: 8px;
}
#pl-grid.is-reorder-mode .pl-item-card .pl-item-link { pointer-events: none; }
#pl-grid .pl-item-card.is-dragging { opacity: 0.5; }

.pl-reorder-arrows {
    bottom: 0.4rem;
    top: auto !important;
    right: 0.4rem;
    flex-direction: row !important;
}

.is-hidden { display: none !important; }

.bookmark-btn.is-marked-plan      { background-color: #4a3d7a !important; color: #fff !important; }
.bookmark-btn.is-marked-completed { background-color: #1f5e3a !important; color: #fff !important; }
.bookmark-btn.is-marked-dropped   { background-color: #693030 !important; color: #fff !important; }


/* Fix later */
.fixed-grid .grid {
    gap: 1.25rem 0.75rem;
}

.pl-card {
    background: transparent;
    border-radius: 8px;
    transition: transform 0.15s ease;
    cursor: pointer;
    position: relative;
    color: inherit;
    text-decoration: none;
    display: block;
}
.pl-card:hover {
    transform: translateY(-3px);
}

.pl-card .cover-frame {
    position: relative;
    aspect-ratio: 134 / 197;
    border-radius: 6px;
    overflow: visible;
    padding-top: 8px;
}

.pl-card .paper-back {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 6px;
    border-radius: 4px 4px 0 0;
    background: #2a2438;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.04);
}
.pl-card .paper-back.b1 {
    top: 0;
    left: 14%;
    right: 14%;
    background: #1f1b2a;
}
.pl-card .paper-back.b2 {
    top: 4px;
    left: 11%;
    right: 11%;
    background: #2a2438;
}

.pl-card .cv {
    position: relative;
    z-index: 2;
    aspect-ratio: 134 / 197;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(135deg, #1c1a2b, #100f18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pl-card .cv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pl-card .cv i {
    font-size: 2rem;
    color: #3a3a4f;
    opacity: 0.6;
}

.pl-card .count-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.45rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    z-index: 5;
    pointer-events: none;
}
.count-badge i {
    color: var(--hoc-blue);
    font-size: 0.7rem;
}

.pl-overlay-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 6;
    display: flex;
    gap: 0.25rem;
    flex-direction: row;
}
.hoc-overlay-btn {
    opacity: 1 !important;
}

.pl-card .pl-content {
    padding: 0.55rem 0.2rem 0;
    text-align: center;
}
.pl-card .pl-title {
    color: #f0f0f0;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 0.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pl-card .pl-meta {
    color: #888;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-transform: capitalize;
}
.pl-card .pl-meta .vis-icon {
    color: #66d1ff;
    font-size: 0.7rem;
}
.pl-card .pl-meta .vis-icon.private {
    color: #b9b4ff;
}

@media (max-width: 540px) {
    .pl-card .pl-content {
        padding: 0.45rem 0.1rem 0;
    }
    .pl-card .pl-title {
        font-size: 0.8rem;
    }
    .fixed-grid .grid {
        gap: 1rem 0.5rem;
    }
}