/*
Theme Name: VianoMusic
Theme URI: https://wintheme.ir
Description: پوسته حرفه ای ویانو موزیک
Author: وین تم
Author URI: https://wintheme.ir
Version: 1.0
*/

:root{--vio-bg:#0b0b0f;--vio-surface:#131318;--vio-surface-2:#17171f;--vio-white:#fff;--vio-text:#f3f3f7;--vio-muted:#9a9aa8;--vio-muted-2:#6c6c7a;--vio-line:#232330;--vio-line-2:#2b2b3a;--vio-purple:#8b5cf6;--vio-purple-dark:#6d28d9;--vio-purple-light:#a78bfa;--vio-purple-soft:#8b5cf61f;--vio-purple-soft-2:#8b5cf638;--vio-black:#000;--vio-radius:20px;--vio-radius-lg:26px;--vio-radius-md:16px;--vio-radius-sm:12px;--vio-max:1320px;--vio-header-gap:20px;--vio-player-h:88px;--vio-sidebar-w:320px;--vio-grad-purple:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);--vio-grad-dark:linear-gradient(180deg,#17171f 0%,#0b0b0f 100%);--vio-header-bg:#131318db;--vio-nav-panel-bg:#0f0f14fa;--vio-search-overlay-bg:#060609b8;--vio-theme-toggle-transition:.3s ease}
html[data-theme="light"]{--vio-bg:#f3f4fa;--vio-surface:#ffffff;--vio-surface-2:#f5f6fb;--vio-white:#181a29;--vio-text:#181a29;--vio-muted:#5b5f72;--vio-muted-2:#8b8fa3;--vio-line:#e7e8f2;--vio-line-2:#dcdeeb;--vio-purple-soft:#8b5cf617;--vio-purple-soft-2:#8b5cf62a;--vio-grad-dark:linear-gradient(180deg,#ffffff 0%,#f1f2f9 100%);--vio-header-bg:#ffffffe6;--vio-nav-panel-bg:#ffffffed;--vio-search-overlay-bg:#f4f5faf0}
html{transition:background-color .3s ease}
body{transition:background-color .3s ease,color .3s ease}
.vio_header,.vio_post,.vio_hero,.vio_featured a,.vio_search form,.vio_footer,.vio_toast,.vio_icon_btn,.vio_theme_toggle,.vio_header nav a,.vio_side_block{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
@font-face{font-family:iyn;font-style:normal;font-weight:400;src:url(assets/fonts/yknbkh.woff) format("woff"),url(assets/fonts/yknbkh.woff2) format("woff2");font-display:swap}
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;font-family:iyn,sans-serif;font-size:14px;line-height:1.9;color:var(--vio-text);background:radial-gradient(circle at top right,#8b5cf61a,transparent 22%),radial-gradient(circle at bottom left,#8b5cf60f,transparent 26%),var(--vio-bg);overflow-x:hidden;padding-bottom:calc(var(--vio-player-h) + 20px)}
h1,h2,h3,h4,h5,h6,p{margin:0}
a{text-decoration:none;color:inherit;transition:.25s ease}
img{display:block;max-width:100%;height:auto;object-fit:cover}
button,input,textarea,select{font-family:inherit;border:none;outline:none;background:none}
ul,li{list-style:none;margin:0;padding:0}
.vio_wrap{width:min(var(--vio-max),calc(100% - 28px));margin-inline:auto}
.vio_flex{display:flex;align-items:center;flex-wrap:wrap}
.vio_header_wrap{position:sticky;top:0;z-index:50;padding-top:12px}
.vio_header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px;border-radius:var(--vio-radius-lg);background:var(--vio-header-bg);border:1px solid var(--vio-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.vio_logo_link{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;line-height:1;max-width:100%;position:relative}
.vio_logo_img{display:block;max-width:100%;height:auto;max-height:56px;width:auto;object-fit:contain;border:0;vertical-align:middle}
.vio_logo_text{display:inline-flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;line-height:1.2;color:var(--vio-white,#fff);letter-spacing:-.3px;white-space:nowrap;position:relative}
.vio_logo_text::before{content:"";width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:linear-gradient(135deg,#7c3aedf2,#a855f7f2);box-shadow:0 10px 30px #7c3aed47 inset 0 1px 0 #ffffff38;position:relative;margin-left:10px}
.vio_logo_text::after{content:"♪";position:absolute;right:auto;left:12px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:700;color:#fff;pointer-events:none}
.vio_logo{display:flex;align-items:center;flex-shrink:0;min-width:0}
.vio_logo_link:hover .vio_logo_img{opacity:.95;transform:translateY(-1px);transition:.25s ease}
.vio_logo_link:hover .vio_logo_text{opacity:.95;transition:.25s ease}
@media (max-width:768px) {
.vio_logo_img{max-height:46px}
.vio_logo_text{font-size:21px}
.vio_logo_text::before{width:36px;height:36px;flex-basis:36px;border-radius:12px;margin-left:8px}
.vio_logo_text::after{left:10px;font-size:15px}
}
.vio_header_right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.vio_header nav{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.vio_header nav span{display:flex}
.vio_header nav a{min-width:96px;height:42px;padding:0 16px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--vio-muted);background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:12px;font-size:13px}
.vio_header nav a:hover{color:var(--vio-white);border-color:var(--vio-purple);background:var(--vio-purple-soft)}
.vio_header_space{height:var(--vio-header-gap)}
.vio_header_actions{display:none;align-items:center;gap:8px;flex:0 0 auto}
.vio_icon_btn{width:42px;height:42px;border-radius:12px;display:none;align-items:center;justify-content:center;color:var(--vio-muted);background:var(--vio-surface);border:1px solid var(--vio-line);cursor:pointer;transition:.2s ease;flex:0 0 auto}
.vio_icon_btn:hover{color:var(--vio-white);border-color:var(--vio-purple);background:var(--vio-purple-soft)}
.vio_icon_btn svg{width:19px;height:19px}
.vio_theme_toggle{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--vio-muted);background:var(--vio-surface);border:1px solid var(--vio-line);cursor:pointer;transition:.2s ease;flex:0 0 auto}
.vio_theme_toggle:hover{color:var(--vio-white);border-color:var(--vio-purple);background:var(--vio-purple-soft)}
.vio_theme_toggle svg{width:19px;height:19px}
.vio_theme_toggle .vio_theme_icon_moon{display:none}
html[data-theme="light"] .vio_theme_toggle .vio_theme_icon_sun{display:none}
html[data-theme="light"] .vio_theme_toggle .vio_theme_icon_moon{display:flex}
.vio_menu_toggle.vio_active{color:var(--vio-purple-light);border-color:var(--vio-purple);background:var(--vio-purple-soft)}
.vio_burger{width:19px;height:13px;position:relative;display:inline-block}
.vio_burger span{position:absolute;right:0;left:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.vio_burger span:nth-child(1){top:0}
.vio_burger span:nth-child(2){top:5.5px}
.vio_burger span:nth-child(3){top:11px}
.vio_menu_toggle.vio_active .vio_burger span:nth-child(1){top:5.5px;transform:rotate(45deg)}
.vio_menu_toggle.vio_active .vio_burger span:nth-child(2){opacity:0}
.vio_menu_toggle.vio_active .vio_burger span:nth-child(3){top:5.5px;transform:rotate(-45deg)}
.vio_search{margin-bottom:20px}
.vio_search form{background:var(--vio-surface);border:1px solid var(--vio-line);min-height:70px;display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:var(--vio-radius)}
.vio_search input{flex:1;height:50px;padding:18px;color:var(--vio-text);font-size:14px;background:var(--vio-surface-2);border:1px solid var(--vio-line);border-radius:12px}
.vio_search input::placeholder{color:var(--vio-muted-2)}
.vio_search button{min-width:45px;height:45px;cursor:pointer;background:var(--vio-grad-purple);color:#fff;padding:0 20px;border-radius:12px;font-size:16px;box-shadow:0 10px 22px #8b5cf647}
.vio_search button:hover{box-shadow:0 14px 26px #8b5cf666}
.vio_search_close{display:none;position:absolute;top:-50px;left:0;width:38px;height:38px;border-radius:11px;align-items:center;justify-content:center;color:var(--vio-text);background:var(--vio-surface-2);border:1px solid var(--vio-line-2);cursor:pointer;transition:.2s ease}
.vio_search_close svg{width:16px;height:16px}
.vio_search_close:hover{color:#ff8787;border-color:#e0525266;background:#e052521f}
.vio_featured{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:24px}
.vio_featured a{display:block;position:relative;min-height:200px;overflow:hidden;border-radius:var(--vio-radius-md);background:var(--vio-surface);border:1px solid var(--vio-line);isolation:isolate}
.vio_featured a::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 15%,#000000e0 100%);z-index:1}
.vio_featured img{width:100%;height:200px;transition:transform .4s ease}
.vio_featured a:hover img{transform:scale(1.07)}
.vio_featured span{position:absolute;inset:auto 12px 12px 12px;z-index:2;color:#fff;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:8px;border-radius:12px;background:#0b0b0f66;backdrop-filter:blur(6px)}
.vio_featured strong{font-size:14px}
.vio_featured b{font-size:11px;color:#ffffffbf;font-weight:400}
.vio_hero{text-align:center;padding:26px 24px;line-height:2;position:relative;overflow:hidden;margin-bottom:20px;background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius-lg)}
.vio_hero::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#8b5cf62e,transparent 70%);top:-90px;right:-70px}
.vio_hero h1{font-size:24px;color:var(--vio-white);margin-bottom:8px;line-height:1.7;position:relative;z-index:1}
.vio_hero p{color:var(--vio-muted);font-size:13px;position:relative;z-index:1;max-width:900px;margin-inline:auto}
.vio_layout{display:grid;grid-template-columns:1fr var(--vio-sidebar-w);gap:22px;align-items:start}
.vio_main{display:flex;flex-direction:column;gap:20px;min-width:0}
.vio_sidebar{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.vio_posts{display:flex;flex-direction:column;gap:16px;width:100%}
.vio_post{position:relative;overflow:hidden;padding:14px;background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius);transition:.3s ease}
.vio_post:hover{border-color:var(--vio-purple);box-shadow:0 14px 34px #8b5cf624}
.vio_post_top{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:start;margin-bottom:12px;position:relative;z-index:1}
.vio_post_cover{position:relative;width:100%;height:150px;overflow:hidden;border-radius:var(--vio-radius-sm)}
.vio_post_cover img{width:100%;height:100%;transition:transform .4s ease}
.vio_post:hover .vio_post_cover img{transform:scale(1.06)}
.vio_post_badge{position:absolute;top:10px;right:10px;min-height:28px;padding:0 10px;border-radius:999px;background:#000000a6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;backdrop-filter:blur(6px)}
.vio_post_badge.vio_post_views{right:auto;left:10px;gap:4px}
.vio_post_badge.vio_post_views svg{width:13px;height:13px;fill:currentColor;flex-shrink:0}
.vio_link.vio_post_views_inline{gap:6px;cursor:default;color:var(--vio-muted)}
.vio_link.vio_post_views_inline svg{width:14px;height:14px;fill:currentColor;flex-shrink:0}
.vio_post_info{min-width:0;display:flex;flex-direction:column;gap:25px}
.vio_post_title_row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.vio_post_title{font-size:16px;line-height:1.8;color:var(--vio-white);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vio_post_menu{position:relative;flex:0 0 auto}
.vio_post_menu_toggle{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--vio-surface-2);border:1px solid var(--vio-line);color:var(--vio-muted);cursor:pointer;transition:.2s ease}
.vio_post_menu_toggle svg{width:16px;height:16px;fill:currentColor}
.vio_post_menu_toggle:hover,.vio_post_menu.vio_open .vio_post_menu_toggle{color:var(--vio-white);border-color:var(--vio-purple);background:var(--vio-purple-soft)}
.vio_post_menu_dropdown {position: absolute;top: calc(100% + 6px);left: 0;min-width: 180px;background: var(--vio-surface-2);border: 1px solid var(--vio-line-2);border-radius: var(--vio-radius-sm);box-shadow: 0 14px 34px rgba(0,0,0,.4);padding: 4px;display: flex;flex-direction: column;gap: 2px;opacity: 0;visibility: hidden;transform: translateY(-6px);transition: opacity .18s ease, transform .18s ease, visibility .18s;z-index: 5;}
.vio_post_menu.vio_open .vio_post_menu_dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.vio_post_menu_item{display:flex;align-items:center;gap:5px;width:100%;padding:5px 5px;border-radius:8px;background:transparent;border:none;color:var(--vio-text);font-size:12px;text-align:right;cursor:pointer;transition:.15s ease}
.vio_post_menu_item svg{width:15px;height:15px;fill:currentColor;flex:0 0 15px;color:var(--vio-muted)}
.vio_post_menu_item:hover{background:var(--vio-purple-soft);color:var(--vio-white)}
.vio_post_menu_item:hover svg{color:var(--vio-purple-light)}
@keyframes vio_skeleton_pulse {
0%{opacity:.55}
50%{opacity:1}
100%{opacity:.55}
}
.vio_skeleton{background:var(--vio-surface-2);border-radius:8px;animation:vio_skeleton_pulse 1.3s ease-in-out infinite}
.vio_skeleton_card{pointer-events:none}
.vio_skeleton_cover{width:150px;height:150px;border-radius:var(--vio-radius-sm);flex:0 0 150px}
.vio_skeleton_line{height:14px;border-radius:6px}
.vio_skeleton_title{width:80%;height:18px}
.vio_skeleton_meta{width:50%}
.vio_skeleton_excerpt{width:95%}
.vio_skeleton_btn{width:110px;height:38px;border-radius:12px}
#vioPostsList.vio_loading_posts{opacity:1}
#vioPaginationWrap.vio_loading_posts{opacity:.5;pointer-events:none}
.vio_post_meta{display:flex;flex-wrap:wrap;gap:6px}
.vio_chip{min-height:28px;padding:0 10px;border-radius:999px;background:var(--vio-surface-2);border:1px solid var(--vio-line);display:inline-flex;align-items:center;justify-content:center;color:var(--vio-muted);font-size:11px}
.vio_chip_brand{color:var(--vio-purple-light);border-color:var(--vio-purple-soft-2);background:var(--vio-purple-soft)}
.vio_post_excerpt{color:var(--vio-muted);font-size:12px;line-height:2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vio_post_bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.vio_post_actions{display:flex;gap:8px;flex-wrap:wrap}
.vio_btn{height:40px;padding:0 16px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;cursor:pointer;transition:.25s ease}
.vio_btn_primary{color:#fff;background:var(--vio-grad-purple);box-shadow:0 10px 20px #8b5cf63d}
.vio_btn_primary:hover{box-shadow:0 14px 24px #8b5cf657}
.vio_btn_soft{color:var(--vio-text);background:var(--vio-surface-2);border:1px solid var(--vio-line)}
.vio_btn_soft:hover{border-color:var(--vio-purple);color:var(--vio-purple-light)}
.vio_post_like{position:relative;height:40px;padding:0 14px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;color:var(--vio-muted);background:var(--vio-surface-2);border:1px solid var(--vio-line);cursor:pointer;overflow:visible;transition:color .25s ease,border-color .25s ease,background .25s ease,transform .18s ease,box-shadow .25s ease}
.vio_post_like svg{width:17px;height:17px;fill:currentColor;transition:transform .3s cubic-bezier(.34,1.56,.64,1),fill .25s ease}
.vio_post_like_count{min-width:10px;transition:color .25s ease}
.vio_post_like:hover{color:#ff5f8d;border-color:#ff5f8d;background:#ff5f8d14;transform:translateY(-2px);box-shadow:0 8px 18px #ff5f8d2e}
.vio_post_like:hover svg{transform:scale(1.12)}
.vio_post_like:active{transform:translateY(0) scale(.94)}
.vio_post_like.vio_active{color:#ff2d6a;border-color:#ff2d6a;background:#ff2d6a1a}
.vio_post_like.vio_active svg{fill:#ff2d6a;animation:vioLikeHeartPop .45s cubic-bezier(.34,1.56,.64,1)}
.vio_post_like.vio_loading{opacity:.65;pointer-events:none}
@keyframes vioLikeHeartPop {
0%{transform:scale(1)}
30%{transform:scale(1.45)}
55%{transform:scale(.85)}
100%{transform:scale(1)}
}
.vio_like_burst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.vio_like_burst svg{width:34px;height:34px;fill:#ff2d6a;opacity:0;animation:vioLikeBurst .6s ease-out forwards}
@keyframes vioLikeBurst {
0%{opacity:.9;transform:scale(.4)}
60%{opacity:.55;transform:scale(1.6)}
100%{opacity:0;transform:scale(2.1)}
}
.vio_like_spark{position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#ff2d6a;pointer-events:none;opacity:0;animation:vioLikeSpark .55s ease-out forwards}
@keyframes vioLikeSpark {
0%{opacity:1;transform:rotate(var(--vio-angle)) translate(0,0) scale(1)}
100%{opacity:0;transform:rotate(var(--vio-angle)) translate(22px,0) scale(.3)}
}
@media (prefers-reduced-motion: reduce) {
.vio_post_like svg,.vio_post_like.vio_active svg,.vio_like_burst svg,.vio_like_spark{animation:none!important;transition:none!important}
}
.vio_btn svg{width:16px;height:16px;fill:currentColor;flex:0 0 16px}
.vio_post_links{display:flex;gap:8px;flex-wrap:wrap}
.vio_link{height:36px;padding:0 12px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--vio-muted);background:var(--vio-surface-2);border:1px solid var(--vio-line);font-size:12px}
.vio_link:hover{color:var(--vio-purple-light);border-color:var(--vio-purple)}
.vio_pagination{justify-content:center;gap:8px}
.vio_pagination a,.vio_pagination span{min-width:42px;height:42px;display:flex;justify-content:center;align-items:center;padding:0 12px;border-radius:12px;border:1px solid var(--vio-line);background:var(--vio-surface);color:var(--vio-text)}
.vio_pagination .current,.vio_pagination a:hover{color:#fff;background:var(--vio-grad-purple);border-color:var(--vio-purple)}
.vio_pagination .vio_next,.vio_pagination .vio_prev{min-width:80px;padding:0 16px}
@keyframes vio_spin {
to{transform:rotate(360deg)}
}
.vio_pagination a.vio_pagination_link_loading{position:relative;color:transparent!important;pointer-events:none}
.vio_pagination a.vio_pagination_link_loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid var(--vio-line-2);border-top-color:#fff;border-radius:50%;animation:vio_spin .6s linear infinite}
.vio_side_block{background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius);overflow:hidden}
.vio_side_block_header{padding:18px 18px 0;display:flex;flex-direction:column;gap:10px}
.vio_side_block_header h2{font-size:16px;color:var(--vio-white)}
.vio_side_block_header::after{content:"";width:100%;height:1px;background:var(--vio-line)}
.vio_side_list{display:flex;flex-direction:column;padding:8px 8px 10px}
.vio_side_list a{border-radius:10px;display:flex;width:100%;padding:11px 12px;text-align:right;align-items:center;color:var(--vio-muted);font-size:13px;line-height:1.7}
.vio_side_list a:hover{color:var(--vio-purple-light);background:var(--vio-purple-soft)}
.vio_artists_wrap{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px 20px}
.vio_artist_tag{padding:9px 14px;border-radius:12px;background:var(--vio-surface-2);border:1px solid var(--vio-line);color:var(--vio-text);font-size:12px}
.vio_artist_tag:hover{color:#fff;background:var(--vio-grad-purple);border-color:var(--vio-purple)}
.vio_about_text{padding:18px 15px;color:var(--vio-muted);font-size:14px;line-height:2}
.vio_footer{margin-top:22px;margin-bottom:18px;border-radius:var(--vio-radius-lg);background:var(--vio-grad-dark);border:1px solid var(--vio-line);overflow:hidden}
.vio_footer_content{display:flex;flex-direction:column;align-items:center;padding:24px 22px 20px;color:#fff}
.vio_footer_content::before{content:"";width:min(300px,80%);height:1px;background:var(--vio-line);margin:0 0 16px}
.vio_footer_content p{color:var(--vio-muted);font-size:13px;line-height:2.1;text-align:center}
.vio_footer_social{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.vio_footer_social a{display:flex;align-items:center;justify-content:center;color:var(--vio-text);gap:.5em;min-height:40px;padding:0 14px;border-radius:10px;background:var(--vio-surface-2);border:1px solid var(--vio-line);font-size:13px}
.vio_footer_social a:hover{color:#fff;background:var(--vio-grad-purple);border-color:var(--vio-purple)}
.vio_footer_social_icons{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px}
.vio_social_icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;background:var(--vio-surface-2);border:1px solid var(--vio-line-2);color:var(--vio-muted);transition:.25s ease}
.vio_social_icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:.25s ease}
.vio_social_icon.vio_social_telegram svg,.vio_social_icon.vio_social_twitter svg{fill:currentColor;stroke:none}
.vio_social_icon:hover{color:#fff;background:var(--vio-grad-purple);border-color:var(--vio-purple);transform:translateY(-3px);box-shadow:0 10px 22px #8b5cf659}
.vio_social_icon.vio_social_instagram:hover{background:linear-gradient(135deg,#f58529 0%,#dd2a7b 45%,#8134af 75%,#515bd4 100%);border-color:transparent}
.vio_social_icon.vio_social_telegram:hover{background:linear-gradient(135deg,#2aabee 0%,#229ed9 100%);border-color:transparent}
.vio_social_icon.vio_social_twitter:hover{background:#000;border-color:#000}
@media (max-width:600px) {
.vio_social_icon{width:38px;height:38px;border-radius:12px}
.vio_social_icon svg{width:17px;height:17px}
}
.vio_player{position:fixed;left:0;right:0;bottom:0;z-index:999;background:#0a0a0df7;color:#fff;border-top:1px solid var(--vio-line-2);box-shadow:0 -18px 50px #00000073;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.vio_player_progress_row{display:flex;align-items:center;gap:10px;direction:ltr;padding:10px 20px 0}
.vio_player_progress_row .vio_player_time{font-size:11px;color:var(--vio-muted);direction:ltr;flex:0 0 auto;min-width:34px}
.vio_player_progress_row .vio_player_time:first-child{text-align:left}
.vio_player_progress_row .vio_player_time:last-child{text-align:right}
.vio_player_seek_track{flex:1;position:relative;display:flex;align-items:center}
.vio_range{--vio-fill:0;-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;background:linear-gradient(to right,var(--vio-purple) 0%,var(--vio-purple) var(--vio-fill),var(--vio-line-2) var(--vio-fill),var(--vio-line-2) 100%);cursor:pointer;direction:ltr;transition:background .06s linear}
.vio_range::-moz-range-track{background:transparent}
.vio_range::-moz-range-progress{background:var(--vio-purple);height:5px;border-radius:999px}
.vio_range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--vio-purple-light);box-shadow:0 0 0 4px #8b5cf633}
.vio_range::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--vio-purple-light);box-shadow:0 0 0 4px #8b5cf633}
.vio_player_inner{display:grid;grid-template-columns:280px 1fr 260px;grid-template-areas:"track controls side";gap:20px;align-items:center;min-height:var(--vio-player-h);padding:10px 20px 14px}
.vio_player_track{grid-area:track;display:flex;align-items:center;gap:12px;min-width:0}
.vio_player_cover{width:56px;height:56px;flex:0 0 56px;border-radius:14px;overflow:hidden;background:var(--vio-surface-2);border:1px solid var(--vio-line-2);position:relative}
.vio_player_cover img{width:100%;height:100%}
.vio_player_meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.vio_player_title{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vio_player_artist{font-size:11px;color:var(--vio-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vio_player_like{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--vio-muted);background:var(--vio-surface-2);border:1px solid var(--vio-line-2);cursor:pointer;margin-inline-start:auto}
.vio_player_like svg{width:15px;height:15px;fill:currentColor}
.vio_player_like.vio_active{color:var(--vio-purple-light);border-color:var(--vio-purple)}
.vio_player_like.vio_loading{opacity:.6;pointer-events:none}
.vio_player_like:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.vio_player_controls{grid-area:controls;display:flex;align-items:center;justify-content:center;gap:10px;direction:ltr}
.vio_player_btn{width:38px;height:38px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--vio-surface-2);border:1px solid var(--vio-line-2);transition:.2s ease;position:relative}
.vio_player_btn:hover{background:var(--vio-purple-soft);border-color:var(--vio-purple)}
.vio_player_btn.vio_active{color:var(--vio-purple-light);border-color:var(--vio-purple);background:var(--vio-purple-soft)}
.vio_player_btn.vio_active::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--vio-purple-light)}
.vio_player_btn svg{width:16px;height:16px;fill:currentColor}
.vio_player_btn_play{width:46px;height:46px;border-radius:16px;background:var(--vio-grad-purple);border-color:var(--vio-purple);box-shadow:0 10px 24px #8b5cf659}
.vio_player_side{grid-area:side;display:flex;align-items:center;justify-content:flex-end;gap:10px;direction:ltr}
.vio_player_volume{display:flex;align-items:center;gap:8px;min-width:130px;direction:ltr}
.vio_player_volume .vio_range{height:4px}
.vio_player_playlist_btn{position:relative}
.vio_player_playlist_count{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--vio-purple);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;line-height:1}
.vio_playlist_panel{max-height:0;overflow:hidden;transition:max-height .35s ease;border-top:0 solid var(--vio-line-2)}
.vio_playlist_panel.vio_open{max-height:320px;overflow-y:auto;border-top-width:1px}
.vio_playlist_header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 8px}
.vio_playlist_header h3{font-size:13px;color:var(--vio-muted);font-weight:400}
.vio_playlist_clear{font-size:11px;color:var(--vio-muted);cursor:pointer;padding:6px 10px;border-radius:8px;background:var(--vio-surface-2);border:1px solid var(--vio-line-2)}
.vio_playlist_clear:hover{color:var(--vio-purple-light);border-color:var(--vio-purple)}
.vio_playlist_items{display:flex;flex-direction:column;padding:4px 12px 14px}
.vio_playlist_item{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;cursor:pointer}
.vio_playlist_item:hover{background:var(--vio-surface-2)}
.vio_playlist_item.vio_playing{background:var(--vio-purple-soft)}
.vio_playlist_item_index{width:22px;flex:0 0 22px;text-align:center;font-size:11px;color:var(--vio-muted);direction:ltr;position:relative;display:flex;align-items:center;justify-content:center}
.vio_playlist_item.vio_playing .vio_playlist_item_index{color:var(--vio-purple-light)}
.vio_playlist_item_number{display:block}
.vio_playlist_item_play{display:none;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer}
.vio_playlist_item_play svg{width:16px;height:16px;fill:currentColor}
.vio_playlist_item:hover .vio_playlist_item_number,.vio_playlist_item.vio_playing .vio_playlist_item_number{display:none}
.vio_playlist_item:hover .vio_playlist_item_play,.vio_playlist_item.vio_playing .vio_playlist_item_play{display:flex}
.vio_playlist_item_cover{width:38px;height:38px;flex:0 0 38px;border-radius:10px;overflow:hidden;background:var(--vio-surface-2)}
.vio_playlist_item_cover img{width:100%;height:100%}
.vio_playlist_item_meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.vio_playlist_item_title{font-size:12.5px;color:var(--vio-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vio_playlist_item_artist{font-size:11px;color:var(--vio-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vio_playlist_item_remove{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--vio-muted-2)}
.vio_playlist_item_remove:hover{color:#fff;background:#ffffff14}
.vio_playlist_empty{padding:30px 18px;text-align:center;color:var(--vio-muted-2);font-size:12px}
html[data-theme="light"] .vio_player{background:var(--vio-surface);color:var(--vio-text);box-shadow:0 -18px 50px #0000001a}
html[data-theme="light"] .vio_player_title{color:var(--vio-text)}
html[data-theme="light"] .vio_player_btn{color:var(--vio-text)}
html[data-theme="light"] .vio_player_btn_play{color:#fff}
html[data-theme="light"] .vio_playlist_item_remove:hover{color:var(--vio-text);background:#00000010}
.vio_toast_stack{position:fixed;bottom:calc(var(--vio-player-h) + 40px);left:50%;transform:translateX(-50%);z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.vio_toast{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:#131318f5;border:1px solid var(--vio-line-2);color:#fff;font-size:13px;box-shadow:0 14px 34px #0006;opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
.vio_toast.vio_show{opacity:1;transform:translateY(0)}
.vio_toast svg{width:16px;height:16px;fill:var(--vio-purple-light);flex:0 0 16px}
@media (max-width:1200px) {
.vio_featured{grid-template-columns:repeat(4,1fr)}
.vio_layout{grid-template-columns:1fr 280px}
.vio_player_inner{grid-template-columns:220px 1fr 200px}
}
@media (max-width:992px) {
.vio_header{position:relative;gap:12px;padding:10px 14px}
.vio_header_actions,.vio_icon_btn{display:flex}
.vio_header nav.vio_nav{position:absolute;top:calc(100% + 10px);left:0;right:0;width:calc(100% - 4px);max-width:380px;margin-inline:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding:14px;border-radius:var(--vio-radius-md);background:var(--vio-nav-panel-bg);border:1px solid var(--vio-line);box-shadow:0 24px 60px #00000080;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease,background-color .3s ease;z-index:60}
.vio_header nav.vio_nav.vio_open{opacity:1;pointer-events:auto;transform:translateY(0)}
.vio_header nav.vio_nav span{width:100%}
.vio_header nav.vio_nav a{width:100%;min-width:0;height:46px}
.vio_featured{grid-template-columns:repeat(3,1fr)}
.vio_layout{grid-template-columns:1fr}
.vio_sidebar{position:static}
.vio_search{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;width:100%;margin:0;padding:88px 18px 18px;background:var(--vio-search-overlay-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease,background-color .3s ease}
.vio_search.vio_open{opacity:1;visibility:visible;pointer-events:auto}
.vio_search form{position:relative;width:100%;max-width:460px;flex-direction:column;align-items:stretch;transform:translateY(-10px);opacity:0;transition:transform .25s ease,opacity .25s ease}
.vio_search.vio_open form{transform:translateY(0);opacity:1}
.vio_search button[type="submit"]{width:100%;min-width:unset}
.vio_search_close{display:flex}
:root{--vio-player-h:72px}
.vio_player_inner{grid-template-columns:1fr auto;grid-template-areas:"track track" "controls side";gap:8px 12px;padding:8px 16px 12px}
.vio_player_side{justify-content:flex-end}
.vio_player_volume{min-width:90px}
}
@media (max-width:768px) {
.vio_wrap{width:min(var(--vio-max),calc(100% - 18px))}
.vio_featured{grid-template-columns:repeat(2,1fr);gap:10px}
.vio_featured a,.vio_featured img{min-height:170px;height:170px}
.vio_post_top{grid-template-columns:1fr}
.vio_post_cover{height:220px}
}
@media (max-width:640px) {
:root{--vio-player-h:64px}
.vio_player_inner{grid-template-columns:1fr auto;grid-template-areas:"track track" "controls side";gap:6px 8px;padding:6px 12px 10px}
.vio_player_progress_row{padding:6px 12px 0;gap:8px}
.vio_player_progress_row .vio_player_time{min-width:28px;font-size:10px}
.vio_player_track{gap:8px}
.vio_player_cover{width:40px;height:40px;flex-basis:40px;border-radius:11px}
.vio_player_title{font-size:13px}
.vio_player_artist{font-size:10px}
.vio_player_like{width:28px;height:28px;flex:0 0 28px;border-radius:9px}
.vio_player_like svg{width:13px;height:13px}
.vio_player_controls{gap:6px}
.vio_player_btn{width:34px;height:34px;border-radius:10px}
.vio_player_btn_play{width:40px;height:40px;border-radius:12px}
.vio_player_btn svg{width:14px;height:14px}
.vio_player_volume .vio_range{display:none}
.vio_player_side{gap:6px}
.vio_post_bottom{flex-direction:column;align-items:stretch}
.vio_post_actions,.vio_post_links{width:100%}
.vio_post_actions .vio_btn,.vio_post_links .vio_link{justify-content:center;padding:10px}
}
@media (max-width:520px) {
.vio_header{padding:9px 12px;min-height:64px;border-radius:18px}
.vio_logo a{font-size:20px}
.vio_logo a::before{display:none}
.vio_icon_btn{width:38px;height:38px;border-radius:11px}
.vio_header nav.vio_nav{max-width:none;width:calc(100% - 4px)}
.vio_header nav.vio_nav a{height:44px;font-size:12px}
.vio_featured a,.vio_featured img{min-height:150px;height:150px;border-radius:14px}
.vio_player_inner{padding:6px 10px 8px}
.vio_player_progress_row{padding:6px 10px 0}
.vio_player_btn{width:32px;height:32px;border-radius:10px}
.vio_player_btn_play{width:38px;height:38px;border-radius:11px}
.vio_playlist_panel.vio_open{max-height:260px}
}
.vio_breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px;font-size:12px;color:var(--vio-muted-2)}
.vio_breadcrumb a{color:var(--vio-muted)}
.vio_breadcrumb a:hover{color:var(--vio-purple-light)}
.vio_breadcrumb svg{width:12px;height:12px;fill:var(--vio-muted-2);transform:scaleX(-1)}
.vio_breadcrumb span[aria-current]{color:var(--vio-text)}
.vio_page_header{text-align:center;padding:26px 24px;line-height:2;position:relative;overflow:hidden;margin-bottom:20px;background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius-lg)}
.vio_page_header::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#8b5cf62e,transparent 70%);top:-90px;left:-70px}
.vio_page_header h1{font-size:24px;color:var(--vio-white);position:relative;z-index:1}
.vio_page_content{padding:22px 24px 26px;background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius);color:var(--vio-text);font-size:13.5px;line-height:2.1}
.vio_page_content h2,.vio_page_content h3{color:var(--vio-white);margin:22px 0 10px;line-height:1.8}
.vio_page_content h2{font-size:18px}
.vio_page_content h3{font-size:15px}
.vio_page_content p{margin-bottom:14px}
.vio_page_content ul,.vio_page_content ol{margin:0 0 14px;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;color:var(--vio-muted)}
.vio_page_content a{color:var(--vio-purple-light);text-decoration:underline;text-underline-offset:3px}
.vio_page_content img{border-radius:var(--vio-radius-md);margin:14px 0;border:1px solid var(--vio-line)}
.vio_page_content blockquote{margin:16px 0;padding:14px 18px;border-inline-start:3px solid var(--vio-purple);background:var(--vio-surface-2);border-radius:0 var(--vio-radius-sm) var(--vio-radius-sm) 0;color:var(--vio-muted)}
.vio_page_content table{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:12.5px}
.vio_page_content th,.vio_page_content td{padding:10px 12px;border:1px solid var(--vio-line);text-align:right}
.vio_page_content th{background:var(--vio-surface-2);color:var(--vio-white)}
.vio_404{text-align:center;padding:60px 24px;position:relative;overflow:hidden;background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius-lg);margin-bottom:20px}
.vio_404::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#8b5cf629,transparent 70%);top:-140px;right:-100px}
.vio_404::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#8b5cf61f,transparent 70%);bottom:-120px;left:-90px}
.vio_404_code{position:relative;z-index:1;font-size:72px;font-weight:600;line-height:1;background:var(--vio-grad-purple);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.vio_404_title{position:relative;z-index:1;font-size:20px;color:var(--vio-white);margin-bottom:10px}
.vio_404_text{position:relative;z-index:1;color:var(--vio-muted);font-size:13px;max-width:520px;margin:0 auto 26px;line-height:2}
.vio_404_search{position:relative;z-index:1;max-width:560px;margin:0 auto 22px}
.vio_404_actions{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.vio_404_links{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.vio_singer_hero{display:flex;align-items:center;gap:20px;padding:24px;position:relative;overflow:hidden;margin-bottom:20px;background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius-lg)}
.vio_singer_hero::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#8b5cf629,transparent 70%);top:-90px;left:-70px}
.vio_singer_avatar{position:relative;z-index:1;width:88px;height:88px;flex:0 0 88px;border-radius:22px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--vio-grad-purple);color:#fff;font-size:32px;box-shadow:0 12px 28px #8b5cf64d}
.vio_singer_avatar img{width:100%;height:100%}
.vio_singer_info{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.vio_singer_name{font-size:22px;color:var(--vio-white)}
.vio_singer_meta{display:flex;gap:8px;flex-wrap:wrap}
.vio_singer_desc{color:var(--vio-muted);font-size:13px;line-height:2;max-width:760px}
.vio_empty_state{text-align:center;padding:50px 24px;color:var(--vio-muted);font-size:13px;background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius)}
@media (max-width:640px) {
.vio_404_code{font-size:52px}
.vio_404{padding:40px 18px}
.vio_singer_hero{flex-direction:column;text-align:center;padding:20px}
.vio_singer_meta{justify-content:center}
.vio_singer_avatar{width:72px;height:72px;flex-basis:72px;border-radius:18px;font-size:26px}
}
/* Playlist post type */
.vio_playlist_card .vio_post_badge{background:var(--vio-purple-soft);color:var(--vio-purple-light);border:1px solid var(--vio-purple)}
.vio_playlist_tracklist .vio_playlist_track_item{cursor:default}
/* Playlist archive — fuller grid card layout */
.vio_posts.vio_playlist_archive{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.vio_playlist_card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--vio-surface);border:1px solid var(--vio-line);border-radius:var(--vio-radius);transition:.3s ease}
.vio_playlist_card:hover{border-color:var(--vio-purple);box-shadow:0 14px 34px #8b5cf624;transform:translateY(-2px)}
.vio_playlist_card_cover{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--vio-surface-2)}
.vio_playlist_card_cover img{width:100%;height:100%;transition:transform .4s ease}
.vio_playlist_card:hover .vio_playlist_card_cover img{transform:scale(1.06)}
.vio_playlist_card_cover_placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--vio-grad-dark)}
.vio_playlist_card_cover_placeholder svg{width:40px;height:40px;fill:var(--vio-muted-2)}
.vio_playlist_card_badge{position:absolute;top:10px;right:10px;min-height:26px;padding:0 10px;border-radius:999px;background:var(--vio-purple-soft);color:var(--vio-purple-light);border:1px solid var(--vio-purple);display:flex;align-items:center;justify-content:center;font-size:11px;backdrop-filter:blur(6px);z-index:2}
.vio_playlist_card_hint{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:#0b0b0f8c;border:1px solid #ffffff40;backdrop-filter:blur(4px);opacity:0;transform:scale(.85);transition:.25s ease;z-index:2}
.vio_playlist_card_hint svg{width:20px;height:20px;fill:currentColor;margin-inline-start:2px}
.vio_playlist_card:hover .vio_playlist_card_hint{opacity:1;transform:scale(1)}
.vio_playlist_card_cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#000000a3 100%);pointer-events:none}
.vio_playlist_card_body{display:flex;flex-direction:column;gap:10px;padding:14px}
.vio_playlist_card_title{font-size:15px;line-height:1.7;color:var(--vio-white)}
.vio_playlist_card_title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vio_playlist_card_title a:hover{color:var(--vio-purple-light)}
.vio_playlist_card_excerpt{color:var(--vio-muted);font-size:12px;line-height:1.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vio_playlist_card_actions{display:flex;align-items:center;gap:8px;margin-top:4px}
.vio_playlist_card_actions .vio_playlist_play_all{flex:1;min-width:0}
.vio_playlist_card_actions_secondary{margin-top:0}
.vio_playlist_card_more{flex:1;min-width:0}
.vio_playlist_card_more span{display:inline}
.vio_playlist_card_actions_secondary .vio_post_like{flex:0 0 auto;height:40px}
@media (max-width:640px) {
.vio_posts.vio_playlist_archive{grid-template-columns:repeat(2,1fr);gap:12px}
.vio_playlist_card_body{padding:12px;gap:8px}
.vio_playlist_card_title{font-size:13.5px}
.vio_playlist_card_excerpt{display:none}
.vio_playlist_card_actions,.vio_playlist_card_actions_secondary{flex-wrap:wrap}
.vio_playlist_card_more{width:100%}
.vio_playlist_card_actions_secondary .vio_post_like{flex:1}
}
/* Sidebar — playlists widget */
.vio_sb_playlists_head{padding:18px 18px 14px}
.vio_sb_playlists_head::after{display:none}
.vio_sb_playlists_head_row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding-bottom:14px;border-bottom:1px solid var(--vio-line)}
.vio_sb_playlists_head_row h2{font-size:16px;color:var(--vio-white)}
.vio_sb_playlists_view_all{display:inline-flex;align-items:center;gap:4px;color:var(--vio-muted);font-size:12px;flex:0 0 auto}
.vio_sb_playlists_view_all svg{width:14px;height:14px;transform:scaleX(-1)}
.vio_sb_playlists_view_all:hover{color:var(--vio-purple-light)}
.vio_sb_playlists_list{display:flex;flex-direction:column;padding:6px 8px 10px;gap:2px}
.vio_sb_playlist_item_link{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:var(--vio-radius-sm);transition:.2s ease}
.vio_sb_playlist_item_link:hover{background:var(--vio-purple-soft)}
.vio_sb_playlist_item_cover{flex:0 0 56px;width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--vio-surface-2);display:flex;align-items:center;justify-content:center}
.vio_sb_playlist_item_cover img{width:100%;height:100%;object-fit:cover}
.vio_sb_playlist_item_cover svg{width:22px;height:22px;fill:var(--vio-muted-2)}
.vio_sb_playlist_item_body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.vio_sb_playlist_item_title{font-size:13px;line-height:1.7;color:var(--vio-text);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.vio_sb_playlist_item_link:hover .vio_sb_playlist_item_title{color:var(--vio-white)}
.vio_sb_playlist_item_count{display:inline-flex;align-items:center;gap:5px;color:var(--vio-muted-2);font-size:11px}
.vio_sb_playlist_item_count svg{width:12px;height:12px;flex:0 0 12px}
.vio_sb_playlist_item_arrow{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--vio-muted-2);background:var(--vio-surface-2)}
.vio_sb_playlist_item_arrow svg{width:14px;height:14px;transform:scaleX(-1)}
.vio_sb_playlist_item_link:hover .vio_sb_playlist_item_arrow{color:#fff;background:var(--vio-grad-purple)}