@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); :root { --bg:#f6f6fb; --bg2:#ffffff; --bg3:#efeff5; --line:rgba(15,15,35,.1); --text:#181826; --muted:#6b6b7e; --accent:#7c3aed; --accent2:#db2777; --lime:#16a34a; --blue:#0ea5e9; --danger:#dc2626; --warn:#d97706; --radius:14px; --shadow:0 18px 40px rgba(15,15,35,.12); } /* ---- Dark theme (toggle via .dark on , persisted as 'theme') ---- */ html.dark, html[data-theme="dark"] { --bg:#0e0e15; --bg2:#16161f; --bg3:#1d1d29; --line:rgba(255,255,255,.09); --text:#f2f2f8; --muted:#a6a6b8; --accent:#9d6bff; --accent2:#f46ab0; --shadow:0 18px 40px rgba(0,0,0,.5); color-scheme:dark; } html.dark body, html[data-theme="dark"] body{background:var(--bg);color:var(--text)} html.dark .tp-header, html[data-theme="dark"] .tp-header{background:rgba(22,22,31,.85)} html.dark .app-sidebar, html[data-theme="dark"] .app-sidebar, html.dark .dash-side, html[data-theme="dark"] .dash-side, html.dark .tp-footer, html[data-theme="dark"] .tp-footer{background:var(--bg2)} html.dark .tp-card, html[data-theme="dark"] .tp-card, html.dark .tp-card-panel, html[data-theme="dark"] .tp-card-panel, html.dark .tp-alert, html[data-theme="dark"] .tp-alert, html.dark .tp-article-card, html[data-theme="dark"] .tp-article-card, html.dark .roy-card, html[data-theme="dark"] .roy-card, html.dark .dash-panel, html[data-theme="dark"] .dash-panel{background:var(--bg2)} html.dark .tp-input, html[data-theme="dark"] .tp-input, html.dark .tp-btn-ghost, html[data-theme="dark"] .tp-btn-ghost, html.dark .tp-chip, html[data-theme="dark"] .tp-chip{background:var(--bg3);border-color:var(--line);color:var(--text)} html.dark .tp-modal, html[data-theme="dark"] .tp-modal, html.dark .tp-modal-overlay > div, html[data-theme="dark"] .tp-modal-overlay > div{background:var(--bg2);color:var(--text)} html.dark .tp-track, html[data-theme="dark"] .tp-track{background:transparent;color:var(--text)} html.dark .tp-track h5, html[data-theme="dark"] .tp-track h5, html.dark .tp-track-mid h5, html[data-theme="dark"] .tp-track-mid h5, html.dark .tp-card h4, html[data-theme="dark"] .tp-card h4{color:var(--text)} html.dark .tp-footer a, html[data-theme="dark"] .tp-footer a{color:var(--muted)} html.dark .tp-footer a:hover, html[data-theme="dark"] .tp-footer a:hover{color:var(--text)} html.dark ::placeholder, html[data-theme="dark"] ::placeholder{color:var(--muted)} html.dark .tp-queued-item, html[data-theme="dark"] .tp-queued-item, html.dark .tp-nowplaying, html[data-theme="dark"] .tp-nowplaying{background:var(--bg2);color:var(--text)} *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw} body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4,h5,p{margin:0} input,button,select,textarea{font-family:inherit} .tp-container{width:100%;max-width:1240px;margin:0 auto;padding:0 24px} /* Covers & art */ .cover{border-radius:12px;overflow:hidden;background:var(--bg3);position:relative} img.cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center top} .profile-photo{width:120px;height:120px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2.4rem} .cover-photo{width:100%;height:200px;border-radius:12px;overflow:hidden;font-size:2.2rem} .profile-photo img,.cover-photo img{width:100%;height:100%;object-fit:cover} img.profile-photo{display:block;width:120px;height:120px;border-radius:50%;overflow:hidden;object-fit:cover;object-position:center top} img.cover-photo{display:block;width:100%;height:200px;border-radius:12px;overflow:hidden;object-fit:cover;object-position:center} .cover-letter{font-size:2.6rem;font-weight:900} .cover-sm .cover-letter{font-size:1.4rem} .dash-table .cover-sm{width:44px;height:44px;aspect-ratio:auto;margin:0;border-radius:9px;display:block} .dash-table .cover-sm img{width:100%;height:100%;object-fit:cover} .no-art{font-size:2.4rem;color:#fff;opacity:.5} /* ---------- Buttons ---------- */ .tp-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:.9rem;font-weight:600;border:0;cursor:pointer;transition:.18s;white-space:nowrap;background:var(--bg3);color:var(--text)} .tp-btn:hover{transform:translateY(-1px)} .tp-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(219,39,119,.25)} .tp-btn-green{background:linear-gradient(135deg,var(--lime),#15803d);color:#fff} .tp-btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)} .tp-btn-ghost:hover{border-color:var(--accent);background:rgba(124,58,237,.08)} .tp-btn-sm{padding:7px 13px;font-size:.82rem} .tp-btn-lg{padding:14px 28px;font-size:1rem} .tp-btn-block{width:100%;justify-content:center} /* Badges & alerts */ .tp-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:600;background:var(--bg3);color:var(--muted)} .tp-badge-accent{background:rgba(124,58,237,.12);color:#6d28d9} .tp-badge-green{background:rgba(22,163,74,.12);color:#15803d} .tp-badge-warn{background:rgba(217,119,6,.12);color:#b45309} .tp-badge-danger{background:rgba(220,38,38,.12);color:#b91c1c} .tp-badge-pill{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent2);font-size:.72rem;font-weight:700;color:#fff} .tp-alert{padding:14px 18px;border-radius:12px;margin-bottom:22px;font-size:.92rem;border:1px solid var(--line);background:var(--bg2)} .tp-alert-success{border-color:rgba(22,163,74,.4);color:#15803d;background:rgba(22,163,74,.08)} .tp-alert-error{border-color:rgba(220,38,38,.4);color:#b91c1c;background:rgba(220,38,38,.08)} /* ---------- Header ---------- */ .tp-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .tp-header-inner{display:flex;align-items:center;gap:22px;height:66px} .tp-logo{display:inline-flex;align-items:center;gap:10px} .tp-logo img{height:52px;width:auto;object-fit:contain} .tp-logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));position:relative;box-shadow:0 6px 16px rgba(124,58,237,.35)} .tp-logo-mark::after{content:'';position:absolute;inset:9px 8px 9px 12px;border:2px solid #fff;border-left:none;border-top-right-radius:7px;border-bottom-right-radius:7px;transform:skewY(2deg)} .tp-logo-text{font-weight:800;font-size:1.22rem;letter-spacing:-.02em} .tp-logo-text span{color:var(--accent2)} .tp-nav{display:flex;flex:1 1 auto;min-width:0;gap:2px;overflow-x:auto;scrollbar-width:none} .tp-nav::-webkit-scrollbar{display:none} .tp-nav-link{padding:8px 11px;border-radius:10px;font-size:.9rem;font-weight:500;color:var(--muted);transition:.18s;white-space:nowrap} .tp-nav-link:hover{color:var(--text);background:rgba(15,15,35,.06)} .tp-nav-link.is-active{color:var(--accent);background:rgba(124,58,237,.1)} /* TunePlay Ads header link must never be clipped: widen the header bar and fit all nav items, collapsing to the burger menu on narrower screens. */ .tp-header .tp-header-inner{gap:16px} .tp-header .tp-header-actions{gap:8px} .tp-header-actions{margin-left:auto;display:flex;align-items:center;gap:12px} .tp-theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:.95rem;transition:.18s;flex:none} .tp-theme-toggle:hover{background:var(--bg3)} html.dark .tp-theme-toggle i{transform:rotate(180deg)} .tp-country{position:relative;flex:none;display:inline-flex;align-items:center;gap:3px;height:38px;border:1px solid var(--line);border-radius:999px;padding:0 8px 0 10px;background:var(--bg2);color:var(--muted);max-width:130px} .tp-country-icon{font-size:.85rem;color:var(--muted);pointer-events:none;flex:none} .tp-country-select{background:transparent;border:0;color:var(--text);font:inherit;font-size:.8rem;line-height:1;padding:0 2px;cursor:pointer;max-width:92px;height:100%;outline:none} .tp-country-select option{color:var(--text);background:var(--bg2)} .artists-circles{text-align:center} .artist-circle{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--text);min-width:0} .artist-circle-avatar{display:block;width:100%;max-width:150px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:2px solid var(--line);box-shadow:0 8px 20px rgba(15,15,35,.22);transition:.18s;margin:0 auto} .artist-circle:hover .artist-circle-avatar{border-color:var(--accent);transform:translateY(-3px)} .artist-circle-name{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .artist-circle-meta{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .tp-search{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--bg2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:9px;width:40px;height:40px;font-size:.86rem;transition:.2s} .tp-search:hover{border-color:var(--accent);color:var(--text)} .tp-search-icon{color:var(--muted);font-size:1rem} .tp-search-ph{display:none} .tp-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#4f46e5);display:grid;place-items:center;font-weight:700;font-size:.9rem;color:#fff} .tp-user{display:flex;align-items:center;gap:10px} .tp-notif{position:relative} .tp-notif-btn{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:1.05rem;transition:.18s} .tp-notif-btn:hover{color:var(--text);border-color:var(--accent)} .tp-notif-btn .tp-badge-pill{position:absolute;top:-6px;right:-6px} .tp-notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-width:calc(100vw - 24px);background:var(--bg2);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.22);overflow:hidden;z-index:70} .tp-notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.92rem} .tp-notif-head a{color:var(--accent);font-size:.8rem;font-weight:600} .tp-notif-list{max-height:380px;overflow-y:auto} .tp-notif-item{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;transition:.15s;align-items:flex-start} .tp-notif-item:hover{background:rgba(124,58,237,.06)} .tp-notif-item.unread{background:rgba(124,58,237,.07)} .tp-notif-item.unread .tp-notif-dot{background:var(--accent2)} .tp-notif-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:transparent;margin-top:6px} .tp-notif-icon{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:.85rem} .tp-notif-body{display:flex;flex-direction:column;gap:2px;min-width:0} .tp-notif-body b{font-size:.9rem} .tp-notif-body span{font-size:.82rem;color:var(--muted);line-height:1.4} .tp-notif-body small{font-size:.72rem;color:var(--muted)} .tp-notif-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;color:var(--muted);font-size:.85rem;text-align:center} .tp-notif-foot{display:block;text-align:center;padding:12px;font-size:.85rem;font-weight:600;color:var(--accent);border-top:1px solid var(--line);text-decoration:none} .tp-notif-foot:hover{background:rgba(124,58,237,.06)} @media (max-width:820px){ .tp-notif-panel{position:fixed;top:72px;left:50%;right:auto;transform:translateX(-50%);width:min(380px,calc(100vw - 24px));max-width:none} } .tp-msg{position:relative} .tp-msg-btn{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:1.05rem;transition:.18s} .tp-msg-btn:hover{color:var(--accent);border-color:var(--accent)} .tp-msg-btn .tp-badge-pill{position:absolute;top:-6px;right:-6px} .tp-msg-box{position:fixed;top:74px;right:20px;width:380px;max-width:calc(100vw - 24px);background:var(--bg2);border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 60px rgba(0,0,0,.28);z-index:120;overflow:hidden;animation:tpModalIn .2s ease} .tp-msg-box-inner{display:flex;flex-direction:column;max-height:calc(100vh - 110px)} .tp-msg-box-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)} .tp-msg-box-head b{flex:1;font-size:1rem} .tp-msg-back,.tp-msg-close{width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:.95rem;flex:0 0 auto} .tp-msg-back:hover,.tp-msg-close:hover{color:var(--accent);background:rgba(124,58,237,.06)} .tp-msg-search{position:relative;padding:10px 16px;border-bottom:1px solid var(--line)} .tp-msg-search i{position:absolute;left:26px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.85rem} .tp-msg-search input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 34px;color:var(--text);font-size:.85rem} .tp-msg-search input:focus{outline:none;border-color:var(--accent)} .tp-msg-convs{max-height:min(440px,calc(100vh - 220px));overflow-y:auto} .tp-msg-conv{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:none;border-bottom:1px solid var(--line);padding:12px 16px;cursor:pointer;transition:.15s;color:var(--text);position:relative} .tp-msg-conv:hover{background:rgba(124,58,237,.06)} .tp-msg-ava-wrap{position:relative;flex:0 0 auto} .tp-msg-av{width:44px;height:44px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;flex:0 0 auto} .tp-msg-dot{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid var(--bg2)} .tp-msg-conv-body{flex:1;min-width:0} .tp-msg-conv-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .tp-msg-conv-top b{font-size:.9rem} .tp-msg-conv-top small{font-size:.72rem;color:var(--muted)} .tp-msg-conv-body p{font-size:.82rem;color:var(--muted);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-msg-unread{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent2,#ec4899);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center} .tp-msg-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 20px;color:var(--muted);text-align:center} .tp-msg-empty i{font-size:2.2rem;opacity:.5} .tp-msg-empty p{font-weight:700;color:var(--text);margin:0} .tp-msg-empty span{font-size:.82rem} .tp-msg-thread{display:flex;flex-direction:column;height:min(480px,calc(100vh - 220px))} .tp-msg-thread-user{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line)} .tp-msg-thread-user .tp-msg-av{width:40px;height:40px;font-size:.85rem} .tp-msg-thread-meta b{display:block;font-size:.92rem} .tp-msg-thread-meta small{font-size:.76rem;color:#16a34a} .tp-msg-thread-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:var(--bg)} .tp-msg{max-width:76%;padding:9px 12px;border-radius:14px;font-size:.86rem;line-height:1.45;word-wrap:break-word} .tp-msg p{margin:0} .tp-msg small{display:block;font-size:.68rem;opacity:.7;margin-top:4px} .tp-msg.m-them{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:4px} .tp-msg.m-me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px} .tp-msg.m-me small{color:rgba(255,255,255,.8)} .tp-msg-file{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--accent);text-decoration:underline;margin-top:2px} .tp-msg-nomsg{text-align:center;color:var(--muted);font-size:.85rem;padding:24px} .tp-msg-compose{display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--line)} .tp-msg-compose textarea{flex:1;resize:none;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--text);font-size:.86rem;max-height:96px} .tp-msg-compose textarea:focus{outline:none;border-color:var(--accent)} .tp-msg-compose button{width:38px;height:38px;flex:0 0 auto;border:none;border-radius:12px;background:var(--accent);color:#fff;cursor:pointer;font-size:.9rem} .tp-msg-compose button:hover{filter:brightness(1.1)} .tp-hide{display:none!important} .tp-msg-box[hidden],.tp-msg-convs[hidden],.tp-msg-thread[hidden],.tp-msg-empty[hidden],.tp-msg-search[hidden],.tp-msg-back[hidden]{display:none!important} .tp-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:6px;cursor:pointer} .tp-burger span{width:22px;height:2px;background:var(--text);border-radius:2px} .tp-mobile{position:fixed;top:66px;left:12px;right:12px;z-index:90;max-height:calc(100vh - 84px);overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:12px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.22);animation:tpFlapIn .18s ease} @keyframes tpFlapIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .tp-mobile a{padding:11px 12px;font-weight:500;border-radius:8px;color:var(--text)} .tp-mobile a:hover{background:rgba(15,15,35,.06)} [hidden]{display:none!important} /* ---------- Page shell ---------- */ .tp-main{min-height:60vh;padding:34px 0 70px} .page-head{margin-bottom:28px} .page-head h1{font-size:2rem;font-weight:800;letter-spacing:-.02em} .page-head p{color:var(--muted);margin-top:8px;font-size:1rem} .tp-section{margin:44px 0} .tp-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px} .tp-sec-title{font-size:1.4rem;font-weight:800;letter-spacing:-.02em} .tp-sec-sub{color:var(--muted);font-size:.9rem;margin-top:4px} .tp-sec-link{color:var(--accent);font-weight:600;font-size:.9rem} .tp-sec-link:hover{color:var(--accent2)} /* Cards + rails */ .tp-rail{display:flex;gap:18px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin} .tp-rail::-webkit-scrollbar{height:6px} .tp-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .tp-card{flex:0 0 168px} .tp-card .cover{margin-bottom:11px;box-shadow:0 10px 24px rgba(15,15,35,.18);width:100%;aspect-ratio:1} .tp-card h4{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-card p{color:var(--muted);font-size:.82rem;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-card .play-btn{position:absolute;right:10px;bottom:14px;opacity:0;transform:translateY(6px);transition:.22s} .tp-card-wrap{position:relative} .tp-card-wrap:hover .play-btn{opacity:1;transform:none} .tp-play,.play-btn{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--lime),#16a34a);color:#06230f;display:grid;place-items:center;border:0;cursor:pointer;font-size:1rem;box-shadow:0 8px 20px rgba(34,197,94,.4)} .tp-card .tp-card-add{position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);color:#fff;display:grid;place-items:center;border:0;cursor:pointer;font-size:.8rem;opacity:0;transform:translateY(-4px);transition:.22s;box-shadow:0 4px 10px rgba(0,0,0,.3)} .tp-card-wrap:hover .tp-card-add{opacity:1;transform:none} .tp-card-add:hover{background:rgba(124,58,237,.9)} /* Grids */ .tp-grid{display:grid;gap:18px} .tp-grid > *,.tp-card,.dash-panel,.tp-card-panel{min-width:0} .tp-grid-2{grid-template-columns:repeat(2,1fr)} .tp-grid-3{grid-template-columns:repeat(3,1fr)} .tp-grid-4{grid-template-columns:repeat(4,1fr)} .tp-grid-5{grid-template-columns:repeat(5,1fr)} .tp-grid-6{grid-template-columns:repeat(6,1fr)} /* Track rows */ .tp-track{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;transition:.18s;cursor:pointer;min-width:0} .tp-track:hover{background:var(--bg3)} .tp-track-num{width:24px;text-align:center;color:var(--muted);font-weight:600;font-size:.88rem} .tp-track .cover{width:50px;height:50px;flex:none} .tp-track-mid{flex:1;min-width:0} .tp-track-mid h5{font-size:.96rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-track-mid span{color:var(--muted);font-size:.86rem} .tp-meta{color:var(--muted);font-size:.86rem;display:flex;gap:14px;align-items:center;white-space:nowrap} .tp-meta i{color:var(--accent)} /* Detail layout */ .tp-detail{display:grid;grid-template-columns:300px 1fr;gap:34px} .tp-detail .hero-cover{width:100%;aspect-ratio:1} .tp-detail h1{font-size:2.4rem;font-weight:900;letter-spacing:-.02em} .tp-detail .meta-line{color:var(--muted);margin:10px 0 18px} /* ---------- Tables ---------- */ .tp-table{width:100%;border-collapse:collapse;font-size:.9rem} .tp-table th{text-align:left;color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;padding:12px 14px;border-bottom:1px solid var(--line)} .tp-table td{padding:12px 14px;border-bottom:1px solid var(--line)} .tp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .tp-table-wrap .tp-table{min-width:480px} .tp-table tbody tr:hover{background:var(--bg2)} .tp-card-panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:20px} /* ---------- FAQ ---------- */ .tp-faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);margin-bottom:12px;overflow:hidden} .tp-faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px} .tp-faq summary::-webkit-details-marker{display:none} .tp-faq summary i{color:var(--muted);transition:.2s;font-size:.8rem} .tp-faq[open] summary i{transform:rotate(180deg)} .tp-faq p{padding:0 18px 18px;margin:0;color:var(--muted);font-size:.9rem;line-height:1.6} /* ---------- Forms ---------- */ .tp-form{display:flex;flex-direction:column;gap:16px} .field label{display:block;font-size:.84rem;font-weight:600;color:var(--muted);margin-bottom:6px} .field input,.field select,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--text);font-size:.92rem;outline:none;transition:.18s} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)} .field textarea{min-height:110px;resize:vertical} .field .hint{font-size:.76rem;color:var(--muted);margin-top:5px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} select option{background:var(--bg2)} /* ---------- Auth ---------- */ .tp-auth{max-width:440px;margin:40px auto;padding:34px;background:var(--bg2);border:1px solid var(--line);border-radius:20px} .tp-auth h1{font-size:1.5rem;font-weight:800;margin-bottom:4px} .tp-auth p{color:var(--muted);font-size:.9rem;margin-bottom:22px} .tp-auth .tp-btn{margin-top:6px} .tp-role{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tp-role label{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--muted);font-size:.82rem;font-weight:600;transition:.18s} .tp-role input{display:none} .tp-role label:has(input:checked){border-color:var(--accent);background:rgba(124,58,237,.1);color:var(--text)} .tp-role i{font-size:1.3rem;color:var(--accent)} /* ---------- Dashboards ---------- */ .dash{display:grid;grid-template-columns:250px 1fr;gap:28px} .dash-side{border-right:1px solid var(--line);padding-right:20px} .dash-nav{display:flex;flex-direction:column;gap:4px} .dash-nav a{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:10px;color:var(--muted);font-weight:500;font-size:.92rem;transition:.15s} .dash-nav a i{width:20px;text-align:center;color:var(--accent)} .dash-nav a:hover{background:var(--bg3);color:var(--text)} .dash-nav a.active{background:rgba(124,58,237,.12);color:var(--accent)} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px} .stat-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px} .stat-card .label{color:var(--muted);font-size:.8rem;font-weight:600} .stat-card .value{font-size:1.7rem;font-weight:800;margin-top:6px} .stat-card .delta{color:var(--lime);font-size:.78rem;font-weight:600;margin-top:4px} .dash-title{font-size:1.7rem;font-weight:800;margin-bottom:4px} .dash-sub{color:var(--muted);margin-bottom:24px} /* ---------- Hero (home) ---------- */ .tp-hero{position:relative;overflow:hidden;padding:66px 0;margin:-34px 0 0;background:radial-gradient(1000px 500px at 80% -10%,rgba(124,58,237,.18),transparent 60%),radial-gradient(800px 400px at 0% 110%,rgba(219,39,119,.14),transparent 60%),var(--bg2);border-bottom:1px solid var(--line)} .tp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} .tp-hero-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border:1px solid rgba(124,58,237,.5);border-radius:999px;font-size:.78rem;color:#6d28d9;background:rgba(124,58,237,.08);font-weight:600} .tp-hero h1{font-size:3.1rem;line-height:1.05;font-weight:900;margin:20px 0 16px;letter-spacing:-.03em} .tp-hero h1 .gr{background:linear-gradient(90deg,var(--accent),var(--accent2),#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent} .tp-hero p.lead{color:var(--muted);font-size:1.08rem;max-width:520px} .tp-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px} .tp-hero-art{display:grid;grid-template-columns:1fr 1fr;gap:16px} .tp-cta{padding:60px 0;text-align:center;background:linear-gradient(120deg,#3b0764,#701a75);margin-bottom:0} .tp-cta h2{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:900;margin-bottom:14px;letter-spacing:-.02em} .tp-cta p{color:#e9d5ff;max-width:560px;margin:0 auto 26px} .tp-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* Empty state */ .tp-empty{text-align:center;padding:60px 20px;color:var(--muted)} .tp-empty i{font-size:3rem;color:var(--line);margin-bottom:14px;opacity:.6} .tp-empty h3{color:var(--text);font-weight:700;margin-bottom:6px} /* Filters */ .tp-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px} .tp-filters a{padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);font-size:.85rem;font-weight:500;transition:.18s} .tp-filters a:hover{color:var(--text);border-color:var(--accent)} .tp-filters a.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent} .tp-searchbar{position:relative;max-width:560px} .tp-searchbar i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)} .tp-searchbar input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:13px 18px 13px 44px;color:var(--text);font-size:.95rem;outline:none} .tp-searchbar input:focus{border-color:var(--accent)} /* Footer */ .tp-footer{background:var(--bg2);border-top:1px solid var(--line);padding:60px 0 24px;margin-top:60px} .tp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px} .tp-footer-brand p{color:var(--muted);max-width:300px;margin:16px 0 20px;font-size:.92rem} .tp-social{display:flex;gap:10px} .tp-social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:.2s} .tp-social a:hover{color:var(--accent);border-color:var(--accent);background:rgba(124,58,237,.1)} .tp-footer-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 14px} .tp-footer-col a{display:block;color:var(--muted);font-size:.9rem;padding:5px 0;transition:.2s} .tp-footer-col a:hover{color:var(--accent)} .tp-footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:38px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.84rem} .tp-footer-legal{display:flex;gap:18px} /* Mini player */ .tp-player{position:fixed;left:50%;bottom:16px;transform:translate(-50%,20px);width:min(820px,calc(100% - 32px));opacity:0;pointer-events:none;transition:.3s;z-index:80;background:rgba(15,15,35,.96);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:12px 16px;display:flex;align-items:center;gap:18px} .tp-player.show{opacity:1;pointer-events:auto;transform:translateX(-50%)} .tp-player-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1.1} .tp-player-center{flex:1.6;min-width:0} .tp-player-right{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end} .tp-player-info{flex:1;min-width:0} .tp-player-info h5{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f4f4fb} .tp-player-info span{color:rgba(244,244,251,.62);font-size:.8rem} .tp-player-cover{width:52px;height:52px;border-radius:10px;flex:none;display:grid;place-items:center;color:rgba(244,244,251,.5)} .tp-player-cover img{width:100%;height:100%;object-fit:cover;border-radius:10px} .tp-player-ctl{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:transparent;color:rgba(244,244,251,.72);font-size:.95rem;display:grid;place-items:center;flex:none;transition:.18s} .tp-player-ctl:hover{color:#fff;background:rgba(255,255,255,.12)} .tp-player-ctl-main{width:46px;height:46px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:1rem;box-shadow:0 8px 20px rgba(124,58,237,.3)} .tp-player-ctl-main:hover{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff} .tp-player-ctl-ghost{background:transparent;color:#f4f4fb;border:1px solid rgba(255,255,255,.18)} .tp-player-ctl-ghost:hover{background:rgba(220,38,38,.14);border-color:var(--danger)} .tp-player-ctl.on{color:var(--accent);background:rgba(124,58,237,.28)} .tp-player-ctl.on.one::after{content:'1';position:absolute;font-size:.5rem;margin-top:18px} .tp-player-ctl.liked{color:#e11d48} #tpLike.liked i{color:#e11d48} .tp-player-ctls{display:flex;align-items:center;justify-content:center;gap:10px} .tp-player-progress{display:flex;align-items:center;gap:10px;margin-top:8px} .tp-player-buffering{display:inline-flex;align-items:center;gap:8px;color:rgba(244,244,251,.62);font-size:.76rem;margin-top:6px} .tp-player-buffering i{color:var(--accent)} .tp-player.buffering .tp-progress-fill{opacity:.5} .tp-time{font-size:.72rem;color:rgba(244,244,251,.62);font-variant-numeric:tabular-nums;min-width:34px;text-align:center} .tp-progress{flex:1;height:5px;background:rgba(255,255,255,.14);border-radius:5px;position:relative;cursor:pointer} .tp-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent2))} .tp-progress-knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(15,15,35,.35);left:0;opacity:0;transition:opacity .18s} .tp-progress:hover .tp-progress-knob{opacity:1} .tp-vol{width:70px;accent-color:var(--accent);cursor:pointer} .tp-player-dl{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:rgba(244,244,251,.72);font-size:.95rem;text-decoration:none;transition:.18s;flex:none} .tp-player-dl:hover{color:#fff;background:rgba(255,255,255,.12)} .tp-player .tp-playing{background:rgba(124,58,237,.28)} .tp-track.tp-playing,.tp-card.tp-playing{border-color:var(--accent);background:rgba(124,58,237,.08)} .tp-track.tp-playing .play-btn,.tp-card.tp-playing .play-btn{background:var(--accent);color:#fff} .tp-track.tp-playing h4,.tp-track.tp-playing h5,.tp-track.tp-playing .tp-track-mid h5,.tp-card.tp-playing h4,.tp-card.tp-playing h5{color:var(--accent)} .tp-track.tp-playing .fa-music{color:var(--accent)} @media (max-width:640px){ .tp-player{flex-wrap:wrap;gap:10px} .tp-player-center{order:3;width:100%;flex:1 1 100%} .tp-player-right #tpVolRange{display:none} .tp-progress{height:10px} .tp-progress-knob{opacity:1;width:16px;height:16px} } @media (hover:none) and (pointer:coarse){ .tp-progress-knob{opacity:1;width:16px;height:16px} } /* Home page compat (kept as the site owner designed it) */ .tp-card-art{position:relative;margin-bottom:11px} .tp-track-list .tp-track{border-bottom:1px solid var(--line)} .tp-track-list .tp-track:last-child{border-bottom:0} .tp-chips{display:flex;flex-wrap:wrap;gap:10px} .tp-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);font-size:.88rem;font-weight:500;transition:.2s} .tp-chip:hover{color:var(--text);border-color:var(--accent);background:rgba(124,58,237,.08)} .tp-chip .chip-icon{color:var(--accent)} /* ---------- Responsive ---------- */ @media (max-width:1320px){.tp-nav,.tp-search{display:none}.tp-burger{display:inline-flex}} @media (max-width:1560px){.tp-nav-link{padding:8px 7px}} @media (max-width:1000px){.tp-grid-5,.tp-grid-6{grid-template-columns:repeat(3,1fr)}.tp-grid-4{grid-template-columns:repeat(3,1fr)}.dash{grid-template-columns:1fr}.dash-side{border-right:0;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px}.tp-detail{grid-template-columns:1fr}} @media (max-width:820px){ .tp-nav,.tp-search{display:none}.tp-burger{display:inline-flex} .tp-header .tp-btn-ghost,.tp-user .tp-btn{display:none} .tp-header-inner{gap:12px} .tp-hero-grid{grid-template-columns:1fr}.tp-hero-art{display:none}.tp-hero h1{font-size:2.4rem} .tp-grid-3,.tp-grid-4,.tp-grid-5{grid-template-columns:repeat(2,1fr)} .stat-grid{grid-template-columns:repeat(2,1fr)} .tp-footer-grid{grid-template-columns:1fr} .field-row,.field-grid{grid-template-columns:1fr} } @media (max-width:520px){ .tp-grid-2,.tp-grid-3,.tp-grid-4,.tp-grid-5,.tp-grid-6{grid-template-columns:repeat(2,1fr)} .tp-card{flex-basis:150px} .stat-grid{grid-template-columns:1fr 1fr} .tp-player-row{flex-wrap:wrap} .tp-header-inner{gap:8px} .tp-header-actions{gap:6px} .tp-country{max-width:116px;padding-left:8px} .tp-country-select{max-width:74px} .tp-logo-text{font-size:1.08rem} .tp-logo-mark{width:30px;height:30px;border-radius:9px} .tp-logo img{height:40px} .tp-notif-btn,.tp-msg-btn{width:36px;height:36px;font-size:1rem} .tp-header .tp-btn{padding:9px 13px;font-size:.84rem} } @media (max-width:400px){ .tp-header-actions{gap:4px} } /* ---------- Song detail page ---------- */ .tp-btn-xl{padding:14px 30px;font-size:1.02rem} .tp-songpage{--songc1:#7c3aed;--songc2:#db2777} .tp-hero-band{position:relative;padding:40px 0 66px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg2),var(--bg))} .tp-hero-blur{position:absolute;inset:0;z-index:0;background:radial-gradient(600px 300px at 80% 0%,rgba(124,58,237,.14),transparent 60%),radial-gradient(500px 260px at 10% 100%,rgba(219,39,119,.1),transparent 60%)} .tp-hero-row{position:relative;z-index:1;display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap} img.tp-song-art,.tp-song-art{width:170px;height:170px;border-radius:16px;flex:0 0 auto;box-shadow:0 20px 48px rgba(15,15,35,.28),0 0 0 1px rgba(15,15,35,.06)} .tp-song-artwrap{position:relative;flex:0 0 auto} .tp-song-artplay{position:absolute;inset:auto 8px 8px auto;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:.95rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px rgba(219,39,119,.35);transition:.2s} .tp-song-artplay:hover{transform:scale(1.08)} .tp-song-artwrap:hover .tp-song-artplay{background:linear-gradient(135deg,var(--accent2),var(--accent))} .tp-song-info{flex:1;min-width:270px} .tp-song-kicker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} .tp-song-title{font-size:clamp(2rem,5vw,3.4rem);line-height:1.03;font-weight:800;margin:6px 0;color:var(--text)} .tp-song-artist a{font-size:1.15rem;color:var(--accent);font-weight:600;text-decoration:none} .tp-song-artist a:hover{text-decoration:underline} .tp-song-artist{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .tp-song-released{color:var(--muted);font-size:.84rem;display:inline-flex;align-items:center;gap:6px} .tp-song-released i{font-size:.8rem} .tp-song-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap} .tp-song-actions form{margin:0} .tp-btn-icon{min-height:46px} .tp-btn-liked{background:linear-gradient(135deg,#f43f5e,#ec4899);border:0;color:#fff;box-shadow:0 6px 18px rgba(244,63,94,.4)} .tp-song-stats{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap} .tp-stat{display:flex;align-items:center;gap:8px} .tp-stat i{color:var(--accent);font-size:.92rem} .tp-stat span{font-size:1.22rem;font-weight:700;color:var(--text);line-height:1} .tp-stat small{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;margin-left:2px} .tp-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:var(--text);border:1px solid var(--line);color:#fff;padding:11px 20px;border-radius:999px;font-size:.88rem;box-shadow:var(--shadow);opacity:0;transition:.3s;z-index:2000} .tp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .tp-body{padding:34px 0 66px} .tp-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start} .tp-detail-main{display:flex;flex-direction:column;gap:22px} .tp-detail-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:66px} .tp-lyrics{color:var(--muted);line-height:1.75;white-space:pre-wrap;font-size:.95rem;max-height:340px;overflow:auto} .tp-album-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);padding:12px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);transition:.18s} .tp-album-card:hover{border-color:var(--accent);background:var(--bg3)} .tp-album-art{width:62px;height:62px;border-radius:10px;flex:0 0 auto} .tp-album-card strong{display:block;font-size:.95rem} .tp-album-card span{color:var(--muted);font-size:.8rem} .tp-album-card .fa-chevron-right{margin-left:auto;color:var(--muted)} .tp-facts{margin:0} .tp-facts div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem} .tp-facts div:last-child{border-bottom:0} .tp-facts dt{color:var(--muted)} .tp-facts dd{margin:0;color:var(--text);text-align:right;font-weight:500} .tp-facts dd a{color:var(--accent);text-decoration:none} @media (max-width:860px){ .tp-detail-grid{grid-template-columns:1fr} .tp-detail-side{position:static} img.tp-song-art,.tp-song-art{width:120px;height:120px} } /* ================= Discover redesigned ================= */ .tp-eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:4px} .tp-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px} .tp-sec-head .tp-sec-title{display:flex;align-items:center;gap:10px;margin:0} .tp-sec-head .tp-sec-title i{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent} .tp-sec-link{color:var(--muted);font-size:.85rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:.18s} .tp-sec-link:hover{color:var(--accent)} .tp-sec-link i{font-size:.8rem;margin-left:4px} .tp-sec-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px} .disc-hero{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line); background:linear-gradient(130deg,var(--g1),var(--g2)); padding:46px clamp(22px,5vw,56px);margin:14px 0 30px;display:flex;gap:34px;align-items:center;flex-wrap:wrap} .disc-hero-glow{position:absolute;inset:0;background:radial-gradient(90% 130% at 20% 120%,rgba(0,0,0,.25),transparent 55%)} .disc-hero-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:42px 42px;pointer-events:none} .disc-hero-in{position:relative;z-index:2;flex:1;min-width:280px} .disc-hero .tp-badge{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px)} .disc-hero h1{font-size:clamp(1.9rem,4.5vw,3.1rem);line-height:1.06;font-weight:800;letter-spacing:-.02em;color:#fff;margin:14px 0 12px} .disc-hero p{color:rgba(255,255,255,.82);max-width:520px;line-height:1.55} .disc-hero-actions{display:flex;gap:11px;margin-top:22px;flex-wrap:wrap} .disc-hero-actions .tp-btn-primary,.disc-play{background:#0b0817;color:#fff;border:1px solid rgba(255,255,255,.22)} .disc-play:hover{border-color:#fff} .disc-hero-art{position:relative;z-index:2;width:min(360px,100%);display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .disc-hero-card{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45);cursor:pointer;transform:translateY(var(--odd,0));transition:.25s} .disc-hero-card:nth-child(even){--odd:12px} .disc-hero-card:hover{transform:translateY(-4px)} .disc-hero-cover{width:100%;aspect-ratio:1;display:block} .disc-hero-tag{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#fff;font-size:.8rem} .disc-chips{margin-bottom:8px} .disc-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:34px;align-items:start} .disc-split .tp-sec-head{margin-bottom:14px} .disc-split > *{min-width:0} .disc-artists{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .disc-artists > *{min-width:0} .disc-artist{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);text-decoration:none;color:var(--text);transition:.18s} .disc-artist:hover{border-color:var(--accent);background:var(--bg3);transform:translateY(-2px)} .disc-artist-avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-weight:800;font-size:1.1rem} .disc-artist-name{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .disc-artist-meta{display:block;color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .disc-genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px} .disc-genre{position:relative;overflow:hidden;border-radius:16px;padding:20px;text-decoration:none;color:#fff; background:linear-gradient(135deg,var(--ga),var(--gb));display:flex;align-items:center;gap:14px;transition:.22s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .disc-genre:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.4)} .disc-genre-icon{width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.22);display:grid;place-items:center;font-size:1.15rem} .disc-genre-name{font-weight:700;font-size:1.05rem} .disc-genre-arrow{margin-left:auto;font-size:.9rem;opacity:.7;transition:.2s} .disc-genre:hover .disc-genre-arrow{opacity:1;transform:translateX(3px)} @media (max-width:1100px){ .disc-split{grid-template-columns:1fr} .disc-artists{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .disc-hero{padding:26px 20px} .disc-hero-art{grid-template-columns:repeat(2,1fr)} .disc-genres{grid-template-columns:repeat(2,1fr)} } @media (max-width:480px){ .disc-genres{grid-template-columns:1fr} .disc-artists{grid-template-columns:1fr} } /* ---------- Nav More dropdown ---------- */ .tp-drop{position:relative} .tp-drop-trigger{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit} .tp-drop-trigger .fa-chevron-down{font-size:.68rem;transition:.18s} .tp-drop:hover .tp-drop-trigger .fa-chevron-down, .tp-drop.is-open .tp-drop-trigger .fa-chevron-down{transform:rotate(180deg)} .tp-drop-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:215px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:70} .tp-drop:hover .tp-drop-menu, .tp-drop.is-open .tp-drop-menu{opacity:1;visibility:visible;transform:none} .tp-drop-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--muted);font-size:.9rem;font-weight:500;text-decoration:none;transition:.15s} .tp-drop-link:hover{color:var(--text);background:rgba(15,15,35,.06)} .tp-drop-link.is-active{color:var(--accent);background:rgba(124,58,237,.1)} .tp-drop-link i{width:16px;text-align:center;color:var(--accent);font-size:.88rem} /* ================= App shell + sidebar (home-style rail, all pages) ================= */ .app-shell{display:flex;align-items:stretch;min-height:calc(100vh - 66px)} .app-shell.no-sidebar{display:block} .app-shell.no-sidebar .tp-main{max-width:1800px;margin:0 auto} /* ================= YouTube-style video grid (no sidebar) ================= */ .tp-videos-topbar{padding:24px 0 18px} .tp-videos-title{font-size:1.5rem;font-weight:800;margin:0} .tp-videos-sub{color:var(--muted);margin:4px 0 0;font-size:.92rem} .yt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px 18px;padding-bottom:40px} .yt-card{display:block;color:inherit;text-decoration:none} .yt-card:hover{color:inherit} .yt-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--bg3);box-shadow:0 10px 28px rgba(15,15,35,.18)} .yt-thumb img{width:100%;height:100%;object-fit:cover;display:block} .yt-thumb-time{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);color:#fff;font-size:.75rem;font-weight:600;padding:2px 6px;border-radius:6px} .yt-thumb-play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:.22s;background:rgba(0,0,0,.18)} .yt-thumb-play i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.72);font-size:1.15rem;color:#fff;border:1px solid rgba(255,255,255,.4)} .yt-card:hover .yt-thumb-play{opacity:1} .yt-card-body{display:flex;gap:12px;margin-top:10px} .yt-channel-avatar{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-weight:800;color:#fff;font-size:.9rem} .yt-card-meta{min-width:0} .yt-card-meta h4{margin:0;font-size:.92rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .yt-channel{display:block;color:var(--muted);font-size:.82rem;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .yt-stats{display:block;color:var(--muted);font-size:.78rem;margin-top:2px} @media (max-width:560px){.yt-grid{grid-template-columns:1fr;gap:26px 0}.yt-channel-avatar{display:none}.yt-thumb{border-radius:10px}.yt-card-meta h4{font-size:1rem;line-height:1.4}.yt-channel{font-size:.84rem}.yt-stats{font-size:.8rem}} /* ================= YouTube-style watch page ================= */ .yt-watch{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;padding:20px 0 60px;align-items:start} .yt-watch-main{min-width:0} .yt-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5)} .yt-player:fullscreen{aspect-ratio:auto;border-radius:0;box-shadow:none} .yt-player:fullscreen video{object-fit:contain} .yt-player:fullscreen.yt-fs-rot video{width:100vh;height:100vw;transform:rotate(90deg)} .yt-player iframe,.yt-player video{position:absolute;inset:0;width:100%;height:100%;border:0} .yt-player video{object-fit:cover} .yt-player-box{position:absolute;inset:0} .yt-player-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .yt-player-empty{position:absolute;inset:0;display:grid;place-items:center;flex-direction:column;color:var(--muted);text-align:center} .yt-player-empty i{font-size:2.4rem;margin-bottom:10px} .yt-player-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background-size:cover;background-position:center;display:grid;place-items:center} .yt-player-poster::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.22);transition:.2s} .yt-player-poster:hover::before{background:rgba(0,0,0,.38)} .yt-player-poster-play{position:relative;width:70px;height:70px;border-radius:50%;background:rgba(15,15,35,.55);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;font-size:1.55rem;border:1px solid rgba(255,255,255,.35);transition:.2s;box-shadow:0 12px 30px rgba(0,0,0,.35)} .yt-player-poster:hover .yt-player-poster-play{background:linear-gradient(135deg,var(--accent),var(--accent2));transform:scale(1.08)} .yt-player-poster:focus{outline:2px solid var(--accent);outline-offset:2px} .yt-watch-title{font-size:1.15rem;font-weight:700;margin:10px 0 6px;line-height:1.4} .yt-title-artist{font-weight:800} .yt-watch-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap} .yt-watch-channel{display:flex;align-items:center;gap:12px} .yt-watch-channel b{display:block;font-size:.92rem;line-height:1.4} .yt-watch-channel span{display:block;color:var(--muted);font-size:.78rem;margin-top:2px} .yt-watch-actions{display:flex;gap:10px} .yt-watch-pill,.yt-watch-share{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:.88rem;font-weight:600;cursor:pointer;border:0} .yt-watch-pill{background:var(--bg3);color:var(--text)} .yt-watch-pill.on{background:rgba(225,29,72,.12);color:#e11d48} .yt-watch-pill.on i{color:#e11d48} .yt-watch-share{background:var(--bg3);border:1px solid var(--line);color:var(--text)} .yt-channel-sub{display:flex;align-items:center;gap:8px;margin-left:6px} .yt-sub-btn{padding:10px 16px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:.88rem;font-weight:600;cursor:pointer;transition:.18s} .yt-sub-btn:hover{opacity:.9;transform:translateY(-1px)} .yt-sub-btn.subscribed{background:var(--bg3);color:var(--text);border:1px solid var(--line)} .yt-sub-btn:disabled{opacity:.6;cursor:default;transform:none} .yt-sub-bell{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:.95rem;transition:.18s} .yt-sub-bell:hover{color:var(--text);border-color:var(--accent)} .yt-sub-bell.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent} .yt-autoplay{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:var(--bg3);border:1px solid var(--line);color:var(--muted);font-size:.85rem;font-weight:600;cursor:pointer;user-select:none;transition:.18s} .yt-autoplay .switch{position:relative;width:34px;height:19px;border-radius:999px;background:rgba(15,15,35,.2);transition:.2s;flex:none} .yt-autoplay .switch::after{content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .yt-autoplay.on{color:var(--text)} .yt-autoplay.on .switch{background:linear-gradient(135deg,var(--accent),var(--accent2))} .yt-autoplay.on .switch::after{left:18px} .yt-quality{position:relative} .yt-quality-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--bg3);border:1px solid var(--line);color:var(--text);font-size:.85rem;font-weight:600;cursor:pointer} .yt-quality-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow);z-index:50;display:none} .yt-quality-menu.open{display:block} .yt-quality-opt{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;padding:9px 12px;border-radius:8px;color:var(--text);font-size:.85rem;cursor:pointer;text-align:left} .yt-quality-opt:hover{background:rgba(15,15,35,.06)} .yt-quality-opt.on{color:var(--accent);font-weight:700} .yt-quality-opt .chk{visibility:hidden} .yt-quality-opt.on .chk{visibility:visible} .yt-watch-desc{background:var(--bg3);border-radius:12px;padding:14px 16px;margin-top:14px;font-size:.9rem;color:var(--muted);line-height:1.55} .yt-comments{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .yt-comments-title{font-size:1.05rem;font-weight:700;margin:0 0 18px;display:flex;align-items:center;gap:9px} .yt-comments-title i{color:var(--accent)} .yt-comment-form textarea{background:var(--bg3);border-radius:10px;padding:11px 14px} .yt-watch-side{display:flex;flex-direction:column;gap:10px} .yt-upnext{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .yt-suggest{display:flex;gap:12px;padding:10px;border-radius:12px;text-decoration:none;color:inherit;transition:.15s} .yt-suggest:hover{background:rgba(15,15,35,.06)} .yt-suggest.tp-playing{background:rgba(124,58,237,.08)} .yt-suggest.tp-playing .yt-suggest-meta h4{color:var(--accent)} .yt-suggest-thumb{position:relative;flex:0 0 196px;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:var(--bg3)} .yt-suggest-thumb img{width:100%;height:100%;object-fit:cover;display:block} .yt-suggest-meta{min-width:0} .yt-suggest-meta h4{margin:0;font-size:.95rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .yt-suggest-meta span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px} @media (max-width:1000px){.yt-watch{grid-template-columns:minmax(0,1fr)}.yt-suggest{flex-basis:auto}} /* ================= Watch page: mobile YouTube-style polish ================= */ .yt-watch-channel .yt-channel-avatar{overflow:hidden;position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:50%} .yt-watch-channel .yt-channel-avatar img{width:100%;height:100%;object-fit:cover;display:block} .yt-verified{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,#1d9bf0,#2563eb);color:#fff;font-size:.58rem;margin-left:5px;vertical-align:middle} .yt-dl{text-decoration:none} .yt-watch-actions .yt-watch-pill,.yt-watch-actions .yt-watch-share,.yt-watch-actions .yt-autoplay,.yt-watch-actions .yt-quality-btn{min-height:40px} /* solid pinned player (mobile): stays full-size just under the header, content scrolls below it */ .yt-player-frame{position:relative} @media (max-width:1000px){ .yt-player-frame{position:fixed;top:66px;left:0;right:0;z-index:40;background:#000} .yt-player{border-radius:0;box-shadow:none} .yt-watch{margin-top:-34px;padding:0 0 60px} .yt-watch-main{padding-top:calc(100vw * 9 / 16)} } /* stats row: likes / views / uploaded-ago ...more */ .yt-stats-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;font-size:.88rem} .yt-stats-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .yt-stats-item{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:600;font-size:.88rem} .yt-stats-item i{color:var(--accent)} .yt-stats-sep{color:var(--muted);font-weight:600} .yt-more-btn{flex:none;background:none;border:0;color:var(--accent);padding:4px 2px;cursor:pointer} .yt-more-btn .yt-more-lbl{font-weight:700;font-size:.9rem} /* expanded info block (title / views / date / description) */ .yt-info{margin-top:6px;padding:14px 16px;background:var(--bg3);border-radius:12px} .yt-info .yt-watch-title{margin:0 0 6px;font-size:1.05rem;color:var(--text)} .yt-info-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.82rem;flex-wrap:wrap} .yt-info-meta span + span::before{content:'\2022';margin-right:10px;color:var(--line)} .yt-info .yt-watch-desc{margin-top:10px;padding:0;background:none;color:var(--text);font-size:.9rem;line-height:1.55;white-space:pre-line} /* channel row: avatar | name+subs | subscribe / like / share */ .yt-watch-channel{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .yt-watch-channel-info{flex:1;min-width:0} .yt-watch-channel-info b{display:block;font-size:.95rem;font-weight:700;line-height:1.4} .yt-watch-channel-info > span{display:block;color:var(--muted);font-size:.78rem;margin-top:2px} .yt-watch-channel-actions{display:flex;align-items:center;gap:8px;flex:none} .yt-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:.9rem;font-weight:600;cursor:pointer;transition:.18s;white-space:nowrap} .yt-icon-btn i{font-size:.98rem} .yt-icon-btn:hover{border-color:var(--accent);color:var(--accent)} .yt-icon-btn.yt-like.on{background:rgba(225,29,72,.1);border-color:transparent;color:#e11d48} .yt-icon-btn.yt-like.on i{color:#e11d48} /* secondary actions bar (autoplay / quality / download) */ .yt-watch-actions{display:flex;align-items:center;gap:10px;margin-top:14px} .yt-watch-actions .yt-dl{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0} .yt-watch-actions .yt-dl i{color:#fff} /* comments: header + exchanging preview canvas */ .yt-comments{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .yt-comments-title{font-size:1.02rem;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:9px} .yt-comments-title i{color:var(--accent)} .yt-comment-canvas{position:relative;border-radius:14px;background:var(--bg3);overflow:hidden;cursor:pointer;height:132px;-webkit-tap-highlight-color:transparent} .yt-canvas-inner{transition:transform .55s ease} .yt-canvas-msg{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;min-height:66px} .yt-canvas-msg:nth-child(even){flex-direction:row-reverse} .yt-canvas-msg:nth-child(even) .yt-canvas-body{text-align:left} .yt-canvas-msg .tp-comment-avatar{width:32px;height:32px;font-size:.75rem} .yt-canvas-msg:nth-child(even) .tp-comment-avatar{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:0} .yt-canvas-body{flex:1;min-width:0} .yt-canvas-body b{display:block;font-size:.8rem} .yt-canvas-body p{font-size:.82rem;color:var(--muted);margin:2px 0 0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .yt-canvas-foot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;font-size:.82rem;font-weight:700;color:var(--accent);background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg2) 45%);pointer-events:none} /* comment flap (bottom sheet) */ .yt-flap{position:fixed;inset:0;z-index:120} .yt-flap[hidden]{display:none} .yt-flap-mask{position:absolute;inset:0;background:rgba(0,0,0,.5);-webkit-tap-highlight-color:transparent} .yt-flap-sheet{position:absolute;bottom:0;left:0;right:0;margin:0 auto;width:100%;max-width:560px;height:76vh;max-height:84vh;background:var(--bg2);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;animation:ytFlapUp .28s ease} @keyframes ytFlapUp{from{transform:translateY(60px);opacity:.4}to{transform:none;opacity:1}} .yt-flap-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex:none} .yt-flap-close{width:34px;height:34px;border-radius:50%;border:0;background:var(--bg3);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:1rem;flex:none} .yt-flap-title{font-size:1rem;font-weight:700;margin:0;display:flex;align-items:center;gap:9px} .yt-flap-title i{color:var(--accent)} .yt-flap-body{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 28px;-webkit-overflow-scrolling:touch} .yt-flap-body .yt-comments{margin-top:0;padding-top:0;border-top:0} /* suggested cards now wrapped (3-dot menu on the right) */ .yt-suggest-wrap{position:relative} .yt-suggest-more{position:absolute;right:2px;top:2px;z-index:5;width:34px;height:34px;border-radius:50%;border:0;background:rgba(15,15,35,.42);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:.9rem;opacity:0;transition:.18s;backdrop-filter:blur(3px)} .yt-suggest-wrap:hover .yt-suggest-more{opacity:1} .yt-suggest-wrap .yt-suggest{padding-right:6px} /* local video overlay controls */ .yt-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 34%,transparent 55%,rgba(0,0,0,.6));opacity:1;transition:opacity .3s;color:#fff} .yt-ov.hide{opacity:0;pointer-events:none} .yt-ov-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(15,15,35,.5);color:#fff;font-size:1.5rem;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)} .yt-ov-bar{padding:10px 14px 14px;display:flex;flex-direction:column;gap:6px} .yt-ov-seek{width:100%;accent-color:var(--accent);cursor:pointer} .yt-ov-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem} .yt-ov-btns{display:flex;align-items:center;gap:8px} .yt-ov-btns button{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:8px;padding:6px 10px;font-size:.8rem;cursor:pointer;min-height:32px} .yt-ov-btns .yt-ov-speed{font-weight:700} .yt-ov-time{text-shadow:0 1px 2px rgba(0,0,0,.4)} @media (max-width:640px){ .yt-watch{padding:0 0 48px} .yt-watch-channel{gap:10px} .yt-watch-actions{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;flex-wrap:nowrap} .yt-watch-actions::-webkit-scrollbar{display:none} .yt-watch-actions > *{flex:0 0 auto} .yt-watch-pill,.yt-watch-share,.yt-autoplay,.yt-quality-btn{white-space:nowrap} .yt-stats-item{font-size:.82rem} .yt-stats-meta{gap:10px} .yt-suggest{flex-direction:column;gap:9px;padding:0} .yt-suggest-wrap:hover .yt-suggest-more{opacity:1} .yt-suggest-more{opacity:1;right:6px;top:6px} .yt-suggest-thumb{flex:none;width:100%} .yt-suggest-meta h4{font-size:.98rem} .yt-upnext{font-size:.9rem;margin:6px 0 2px} .yt-watch-side{gap:16px} .yt-comments{margin-top:18px;padding-top:16px} .yt-info{margin:8px 0 0} .yt-flap-sheet{height:80vh;max-height:80vh} } @media (max-width:430px){ .yt-watch-channel{flex-wrap:wrap} .yt-watch-channel-actions{margin-left:auto} .yt-ov-play{width:58px;height:58px;font-size:1.35rem} } .app-sidebar{position:sticky;top:66px;height:calc(100vh - 66px);flex:0 0 236px;background:var(--bg2);border-right:1px solid var(--line);overflow-y:auto;z-index:20} .app-side-scroll{padding:18px 14px 24px;display:flex;flex-direction:column;gap:2px} .app-side-link{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-size:.9rem;font-weight:500;color:var(--muted);text-decoration:none;transition:.16s} .app-side-link i{width:18px;text-align:center;font-size:.95rem;color:var(--muted);transition:.16s} .app-side-link:hover{color:var(--text);background:rgba(15,15,35,.06)} .app-side-link:hover i{color:var(--accent)} .app-side-link.is-active{color:var(--accent);background:linear-gradient(90deg,rgba(124,58,237,.14),rgba(219,39,119,.05))} .app-side-link.is-active i{color:var(--accent)} .app-side-title{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:16px 6px 6px} .app-side-cta{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:600;font-size:.85rem;text-decoration:none;box-shadow:0 8px 20px rgba(124,58,237,.3);transition:.18s} .app-side-cta:hover{transform:translateY(-1px);filter:brightness(1.06)} .app-shell .tp-main{flex:1;min-width:0} .tp-flash{padding-top:22px;margin:0} @media (max-width:1000px){ .app-sidebar{display:none} } /* ---------- Discover v2: page head + featured banner ---------- */ .tp-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:30px 0 6px} .tp-page-head h1{font-size:clamp(2rem,4.5vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin:8px 0 6px;background:linear-gradient(90deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .tp-page-head p{color:var(--muted);max-width:560px} .feat{position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:linear-gradient(120deg,var(--fg1),var(--fg2));display:flex;align-items:stretch;margin:26px 0 8px;box-shadow:0 24px 60px rgba(0,0,0,.35)} .feat::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 150% at 85% -10%,rgba(255,255,255,.14),transparent 45%),radial-gradient(90% 130% at 10% 120%,rgba(0,0,0,.35),transparent 60%);pointer-events:none} .feat-art{position:relative;z-index:1;flex:0 0 46%;min-height:300px;display:flex;align-items:center;justify-content:center;padding:30px} .feat-cover{width:100%;max-width:320px;aspect-ratio:1;border-radius:18px;box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14);object-fit:cover} .feat-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 42px} .feat-kicker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .feat-body h2{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800;letter-spacing:-.02em;margin:0 0 6px;color:#fff} .feat-artist a{font-size:1.15rem;color:rgba(255,255,255,.92);font-weight:600;text-decoration:none} .feat-artist a:hover{text-decoration:underline} .feat-stats{color:rgba(255,255,255,.72);font-size:.9rem;margin:8px 0 22px} .feat-actions{display:flex;gap:11px;flex-wrap:wrap} @media (max-width:860px){ .feat{flex-direction:column} .feat-art{flex:1;padding:26px} .feat-body{padding:6px 26px 30px} .tp-page-head{flex-direction:column;align-items:flex-start} } .disc-avatar{width:100%;height:100%;object-fit:cover;display:block} /* ================= Dashboard tabs & admin/artist polish ================= */ .dash{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start} .dash-side{position:sticky;top:66px;display:flex;flex-direction:column;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:12px} .dash-tab{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;color:var(--muted);font-size:.9rem;font-weight:500;text-decoration:none;transition:.16s} .dash-tab i{width:18px;text-align:center;color:var(--muted);font-size:.95rem;transition:.16s} .dash-tab:hover{color:var(--text);background:rgba(15,15,35,.06)} .dash-tab:hover i{color:var(--accent)} .dash-tab.is-active{color:var(--accent);background:linear-gradient(90deg,rgba(124,58,237,.14),rgba(219,39,119,.05))} .dash-tab.is-active i{color:var(--accent)} .dash-side-title{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:16px 13px 6px} .dash-side-title:first-child{padding-top:4px} /* ================= Admin sidebar (control room) ================= */ .admin-side{padding:0;overflow:hidden} .admin-side-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--line)} .admin-side-avatar{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#7c3aed,#db2777);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:none} .admin-side-head b{display:block;font-size:.9rem;line-height:1.1} .admin-side-head small{color:var(--muted);font-size:.72rem} .admin-side-search{padding:10px 12px;border-bottom:1px solid var(--line)} .admin-side-search .tp-input{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:9px;padding:8px 10px 8px 30px;font-size:.82rem;color:var(--text)} .admin-side-search{position:relative} .admin-side-search .si{position:absolute;left:22px;top:20px;color:var(--muted);font-size:.8rem;pointer-events:none} .admin-side-nav{display:flex;flex-direction:column;gap:2px;padding:6px 8px 10px} .admin-side-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 6px 6px;text-align:left} .admin-side-group-toggle i{margin-left:auto;font-size:.62rem;transition:.2s} .admin-side-group.open .admin-side-group-toggle i{transform:rotate(180deg)} .admin-side-count{margin-left:auto;font-size:.62rem;font-weight:700;background:rgba(219,39,119,.12);color:#be185d;border-radius:99px;padding:1px 7px;letter-spacing:0} .admin-side-link{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:9px;color:var(--muted);font-size:.87rem;font-weight:500;text-decoration:none;transition:.15s} .admin-side-link i{width:17px;text-align:center;color:var(--muted);font-size:.9rem;transition:.15s} .admin-side-link:hover{color:var(--text);background:rgba(15,15,35,.06)} .admin-side-link:hover i{color:var(--accent)} .admin-side-link.is-active{color:var(--accent);background:linear-gradient(90deg,rgba(124,58,237,.14),rgba(219,39,119,.05))} .admin-side-link.is-active i{color:var(--accent)} .admin-side-foot{border-top:1px solid var(--line);padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px} .admin-side{flex-basis:252px;flex:none;width:252px;position:relative;z-index:61} .admin-mob-toggle{display:none;border:0;background:var(--bg3);width:36px;height:36px;border-radius:10px;color:var(--accent);font-size:1rem;cursor:pointer;flex:none} .admin-side-backdrop{position:fixed;inset:0;z-index:96;background:rgba(10,8,22,.45)} .dash-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .dash-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} .dash-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px} .dash-mini{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.85rem;min-width:0} .dash-mini>div:first-child{min-width:0;flex:1} .dash-mini-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} .dash-mini:last-child{border-bottom:0} .dash-mini b{color:var(--text);white-space:nowrap} .dash-mini .muted{color:var(--muted);font-size:.8rem} .dash-table{width:100%;border-collapse:collapse;font-size:.85rem;table-layout:auto} .dash-table th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)} .dash-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle} .dash-table tr:last-child td{border-bottom:0} .dash-table tr:hover td{background:rgba(15,15,35,.02)} .ad-stat{display:inline-flex;align-items:center;gap:5px;margin-right:10px;font-size:.78rem;color:var(--text,#f4f4fb)} .ad-stat i{font-size:.72rem;color:var(--accent,#7c5cff)} .ad-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .ad-actions .tp-btn{padding:6px 10px;line-height:1} .ad-actions form{display:inline-flex} .ad-cards{display:flex;flex-direction:column;gap:12px} .ad-card{border:1px solid var(--line,rgba(255,255,255,.1));background:rgba(255,255,255,.015);border-radius:14px;padding:14px 16px} .ad-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap} .ad-card-head{min-width:0;flex:1 1 340px} .ad-card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ad-card-title b{font-size:.95rem} .ad-card-id{font-size:.72rem;color:var(--muted)} .ad-camp-end{display:inline-block;background:#ef4444;color:#fff;border-radius:4px;padding:1px 7px;font-size:.74rem;line-height:1.5;font-weight:700;letter-spacing:.04em} .ad-camp-start{display:inline-block;background:#10b981;color:#fff;border-radius:4px;padding:1px 7px;font-size:.74rem;line-height:1.5;font-weight:700;letter-spacing:.04em} .ad-filter-dd-wrap{position:relative;display:inline-block} .ad-filter-dd-btn{display:inline-flex;align-items:center;gap:7px} .ad-filter-dd-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:240px;background:#171720;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);padding:6px;display:flex;flex-direction:column;gap:2px} .ad-filter-dd-menu[hidden]{display:none} .ad-filter-dd-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:500;white-space:nowrap} .ad-filter-dd-menu a:hover{background:rgba(255,255,255,.06);color:#fff} .ad-filter-dd-menu a.active{background:var(--accent,#7c5cff);color:#fff} .ad-filter-dd-menu b{font-size:.72rem;background:rgba(255,255,255,.08);border-radius:999px;padding:0 7px;line-height:1.6} .ad-filter-dd-menu a.active b{background:rgba(0,0,0,.18)} .ad-card-note.warn{color:#d97706} .ad-card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px} .ad-card-meta span{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;color:var(--muted)} .ad-card-meta i{font-size:.7rem;color:var(--accent,#7c5cff)} .ad-card-note{margin-top:8px;font-size:.78rem;color:#f87171;display:flex;align-items:center;gap:6px} .ad-card-desc{margin:8px 0 0;font-size:.8rem;color:var(--muted)} .ad-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line,rgba(255,255,255,.09))} .ad-card-chips{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0} .prm-label{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--muted);margin-right:6px} .ad-card-stats{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-left:auto;padding-left:12px} .act-feed{display:flex;flex-direction:column;gap:2px} .act-item{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--line)} .act-item:last-child{border-bottom:0} .act-ico{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(124,58,237,.1);color:var(--accent);font-size:.85rem} .act-item .t{font-size:.87rem;color:var(--muted)} .act-item .t b{color:var(--text)} .act-item .s{font-size:.76rem;color:var(--muted)} .dash-body{min-width:0;display:flex;flex-direction:column;gap:22px} .ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .ov-cell{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px} .ov-cell i{color:var(--accent);margin-bottom:8px;display:inline-block;font-size:1.05rem} .ov-cell .v{font-size:1.35rem;font-weight:800;line-height:1} .ov-cell .l{font-size:.72rem;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600} .ov-cell .d{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;margin-top:8px;padding:2px 8px;border-radius:999px} .ov-cell .d.up{background:rgba(22,163,74,.12);color:#15803d} .ov-cell .d.down{background:rgba(220,38,38,.12);color:#b91c1c} .ov-cell .d.flat{background:rgba(255,255,255,.07);color:var(--muted)} .dash-panel{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px;min-width:0;max-width:100%} .dash-panel h3{font-size:1.05rem;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:9px} .dash-panel h3 i{color:var(--accent)} .dash-panel > p.lead{color:var(--muted);margin:-8px 0 16px;font-size:.9rem} .dash-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px} .dash-stat{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;background:var(--bg3);border:1px solid var(--line)} .dash-stat i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem;background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(219,39,119,.1));color:var(--accent)} .dash-stat b{display:block;font-size:1.25rem;color:var(--text)} .dash-stat span{color:var(--muted);font-size:.8rem} .dash-form label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:6px} .dash-form .tp-input{margin-bottom:14px} .dash-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0} /* Base .tp-input — full width, light, matches theme */ .tp-input{width:100%;box-sizing:border-box;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--text);font-size:.92rem;font-family:inherit;outline:none;transition:.18s;appearance:none;-webkit-appearance:none} .tp-input::placeholder{color:#a4a4b5} .tp-input:hover{border-color:rgba(15,15,35,.22)} .tp-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.12);background:var(--bg2)} select.tp-input{background-color:var(--bg2);cursor:pointer} select.tp-input option{background:var(--bg2);color:var(--text)} textarea.tp-input{resize:vertical;min-height:90px;line-height:1.5} input.tp-input[type=file]{padding:9px 12px;color:var(--muted);cursor:pointer} input.tp-input[type=file]::file-selector-button{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:7px 14px;margin-right:10px;color:var(--text);font-weight:600;font-size:.82rem;cursor:pointer;transition:.18s} input.tp-input[type=file]::file-selector-button:hover{border-color:var(--accent);background:rgba(124,58,237,.1)} .dash-form .dash-form-row .tp-input{margin-bottom:0} .dash-form .dash-form-row{margin-bottom:14px} .dash-form > label:not(:first-child){margin-top:2px} .dash-toggles{display:flex;flex-wrap:wrap;gap:10px 18px;margin:4px 0 16px} .dash-toggles label{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--text);font-weight:500;cursor:pointer} .dash-toggles input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer} /* ---------- Modal ---------- */ .tp-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;background:rgba(15,15,35,.55);backdrop-filter:blur(3px);overflow-y:auto;padding:40px 16px} .tp-modal.open{display:flex} .tp-modal-box{background:var(--bg2);border:1px solid var(--line);border-radius:18px;width:100%;max-width:760px;padding:24px 26px;box-shadow:var(--shadow);animation:tpModalIn .22s ease} @keyframes tpModalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .tp-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .tp-modal-head h3{margin:0;font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:10px} .tp-modal-head h3 i{color:var(--accent)} .tp-modal-close{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--bg3);color:var(--muted);font-size:1rem;cursor:pointer;flex:0 0 auto;transition:.18s} .tp-modal-close:hover{color:var(--text);border-color:var(--accent);background:rgba(124,58,237,.1)} .tp-modal .dash-form-row{grid-template-columns:1fr 1fr} @media (max-width:560px){.tp-modal{padding:16px}.tp-modal-box{padding:18px}.tp-modal .dash-form-row{grid-template-columns:1fr}} .dash-list{display:flex;flex-direction:column} .dash-row{display:flex;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--line)} .dash-row:last-child{border-bottom:0} .dash-row .dash-art{width:52px;height:52px;border-radius:10px;flex:0 0 auto} .dash-row .dash-mid{flex:1;min-width:0} .dash-row .dash-mid b{display:block;font-size:.92rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dash-row .dash-mid small{color:var(--muted);font-size:.78rem} .dash-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .dash-badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px} .dash-badge.single{background:rgba(124,58,237,.12);color:#6d28d9} .dash-badge.ep{background:rgba(219,39,119,.12);color:#be185d} .dash-badge.album{background:rgba(22,163,74,.12);color:#15803d} .dash-badge.song{background:rgba(14,165,233,.12);color:#0369a1} .dash-badge.pending{background:rgba(217,119,6,.12);color:#b45309} .dash-badge.ok{background:rgba(22,163,74,.12);color:#15803d} .dash-badge.off{background:rgba(220,38,38,.12);color:#b91c1c} .prm-pkgs{display:flex;flex-wrap:wrap;gap:8px} .prm-pkg{cursor:pointer} .prm-pkg input{position:absolute;opacity:0;pointer-events:none} .prm-pkg span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line,rgba(255,255,255,.14));background:rgba(255,255,255,.03);color:var(--muted);font-size:.78rem;font-weight:600;transition:.15s} .prm-pkg span::before{content:"\f0c8";font:var(--fa-font-regular)} .prm-pkg input:checked+span{border-color:var(--accent,#7c5cff);background:rgba(124,92,255,.14);color:#fff} .prm-pkg input:checked+span::before{content:"\f00c"} .prm-chip{display:inline-block;padding:3px 9px;margin:1px 4px 1px 0;border-radius:999px;background:rgba(124,92,255,.14);color:#c4b5fd;border:1px solid rgba(124,92,255,.25);font-size:.74rem;font-weight:600} .prm-chip-more{background:rgba(255,255,255,.05);color:var(--muted);border-color:var(--line,rgba(255,255,255,.14))} .prm-dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px} .prm-date{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted);background:var(--bg3);border:1px solid var(--line);border-radius:999px;padding:3px 10px} .prm-date i{color:var(--accent);font-size:.72rem} .prm-date b{color:var(--text);font-weight:700} .prm-date-end i{color:#d97706} .prm-pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:6px;min-width:0} .prm-pkg-card{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:14px;background:rgba(255,255,255,.03);transition:.16s;min-width:0} .prm-pkg-card input{position:absolute;opacity:0;pointer-events:none} .prm-pkg-card b{color:var(--text);font-size:.95rem} .prm-pkg-card small{color:var(--muted);font-size:.78rem;line-height:1.45;flex:1} .prm-pkg-card em{font-style:normal;font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:6px} .prm-pkg-price{display:inline-flex;align-self:flex-start;font-weight:800;font-size:1.15rem;color:#fff;background:linear-gradient(135deg,#8b5cf6,#d946ef);padding:2px 12px;border-radius:999px} .prm-pkg-card input:checked+span{border-color:transparent} .prm-pkg-card:has(input:checked){border-color:var(--accent,#7c5cff);background:rgba(124,92,255,.12);box-shadow:0 0 0 2px rgba(124,92,255,.35)} /* ---- promotion ads (image-based display units, standard IAB sizes) ---- */ .tp-ad-zone .tp-ad-slot{display:none} .tp-ad-zone .tp-ad-slot.is-active{display:block} .tp-ad-top{display:flex;justify-content:center;margin:0 auto 18px;padding:0 24px} .tp-ad-top>.tp-ad-slot.is-active{display:flex;justify-content:center} .tp-ad-content{width:calc(100% - 48px);max-width:1192px;margin:0 auto 18px;display:flex;flex-direction:column;gap:10px;align-items:center} .tp-ad-sidebar{display:flex;flex-direction:column;gap:12px;padding:14px 0 4px;align-items:center} .tp-ad{position:relative;display:block;overflow:hidden;border-radius:12px;text-decoration:none;color:#fff;background-color:#15152a;background-size:contain;background-repeat:no-repeat;background-position:center;border:1px solid rgba(15,15,35,.14);box-shadow:0 8px 24px rgba(15,15,35,.16);transition:.18s;max-width:100%} .tp-ad:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(15,15,35,.24)} .tp-ad-scrim{position:absolute;inset:0;z-index:1;pointer-events:none} .tp-ad-layout-col .tp-ad-scrim{background:linear-gradient(to top,rgba(10,10,25,.58) 0%,rgba(10,10,25,.18) 38%,rgba(10,10,25,0) 68%)} .tp-ad-layout-row .tp-ad-scrim{background:linear-gradient(100deg,rgba(10,10,25,.48) 0%,rgba(10,10,25,.12) 45%,rgba(10,10,25,0) 72%)} .tp-ad-inner{position:relative;z-index:2;display:flex;min-height:100%;box-sizing:border-box;padding:14px 16px} .tp-ad-layout-col .tp-ad-inner{flex-direction:column;justify-content:flex-end;gap:3px} .tp-ad-layout-row .tp-ad-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px} .tp-ad-layout-row .tp-ad-head{min-width:0;margin-right:auto} .tp-ad-layout-row .tp-ad-title,.tp-ad-layout-row .tp-ad-desc{display:none} .tp-ad-head{display:flex;align-items:center;gap:9px;min-width:0} .tp-ad-name{font-weight:800;font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.45)} .tp-ad-title{font-style:normal;color:rgba(255,255,255,.95);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 4px rgba(0,0,0,.45)} .tp-ad-desc{font-style:normal;color:rgba(255,255,255,.85);font-size:.78rem;line-height:1.45;display:none;overflow:hidden} .tp-ad-layout-col .tp-ad-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1px} .tp-ad-tag{display:inline-flex;align-items:center;gap:5px;font-size:.56rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.94);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:2px 8px;border-radius:999px;flex:none;backdrop-filter:blur(4px)} .tp-ad-tag i{font-size:.4rem;color:#fbbf24} .tp-ad-cta{font-style:normal;font-weight:700;font-size:.8rem;letter-spacing:.01em;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);margin-top:2px} .tp-ad-cta:hover{filter:brightness(1.08)} .tp-ad-cta i{font-size:.66rem} .tp-ad-layout-row .tp-ad-name{font-size:.92rem} .tp-ad-layout-row .tp-ad-cta{padding:6px 13px;font-size:.74rem} .tp-ad-layout-row .tp-ad-cta i{font-size:.58rem} /* standard display sizes */ .ad-size-970x250{width:970px;height:250px;--ad-ratio:970 / 250} .ad-size-970x90{width:970px;height:90px;--ad-ratio:970 / 90} .ad-size-728x90{width:728px;height:90px;--ad-ratio:728 / 90} .ad-size-468x60{width:468px;height:60px;--ad-ratio:468 / 60} .ad-size-336x280{width:336px;height:280px;--ad-ratio:336 / 280} .ad-size-300x250{width:300px;height:250px;--ad-ratio:300 / 250} .ad-size-300x600{width:300px;height:600px;--ad-ratio:300 / 600} .ad-size-320x100{width:320px;height:100px;--ad-ratio:320 / 100} .ad-size-320x50{width:320px;height:50px;--ad-ratio:320 / 50} .ad-size-300x50{width:300px;height:50px;--ad-ratio:300 / 50} .ad-size-250x250{width:250px;height:250px;--ad-ratio:250 / 250} .ad-size-200x200{width:200px;height:200px;--ad-ratio:200 / 200} .ad-size-160x600{width:160px;height:600px;--ad-ratio:160 / 600} .ad-size-120x600{width:120px;height:600px;--ad-ratio:120 / 600} /* responsive: scale down to fit the viewport, keep the ratio */ @media (max-width:900px){ .tp-ad{width:100% !important;height:auto;aspect-ratio:var(--ad-ratio)} .tp-ad-top{padding:0 24px} } /* ===== AdSense-style placements ===== */ /* Anchor: sticky bar attached to the bottom of the screen. Lifts up automatically when the mini player is showing. */ .tp-ad-anchor{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 12px;pointer-events:none;transition:transform .25s} .tp-ad-anchor .tp-ad-slot{pointer-events:auto} .tp-ad-anchor .tp-ad-slot.is-active{display:flex;justify-content:center} .tp-ad-anchor .tp-ad-close{pointer-events:auto;position:absolute;top:8px;right:10px} .tp-ad-vignette .tp-ad-slot.is-active{display:flex;justify-content:center} .tp-ad-rail .tp-ad-slot.is-active{display:flex;justify-content:center} .tp-ad-anchor.is-hidden{display:none} .tp-ad-anchor.lifted{transform:translateY(-110px)} @media (max-width:600px){.tp-ad-anchor.lifted{transform:none}} /* slight panel behind the sticky bar so page content scrolling past stays readable */ .tp-ad-anchor::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,18,0) 0%,rgba(8,8,18,.55) 70%);pointer-events:none} .tp-ad-anchor .tp-ad,.tp-ad-anchor .tp-ad-close{position:relative} /* Vignette: full-screen interstitial shown once per session. */ .tp-ad-vignette{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(8,8,18,.82);backdrop-filter:blur(8px)} .tp-ad-vignette.is-open{display:flex} .tp-ad-vignette .tp-ad{box-shadow:0 30px 90px rgba(0,0,0,.6)} .tp-ad-vignette .tp-ad-close.is-disabled{opacity:.45;pointer-events:none} .tp-ad-vignette .tp-ad-close{position:absolute;top:14px;right:14px} /* Right side rail: skyscraper stuck to the right margin on wide desktops. */ .tp-ad-rail{position:fixed;right:20px;top:92px;z-index:40;display:none} @media (min-width:1720px){ .tp-ad-rail{display:flex;flex-direction:column;gap:16px;align-items:center} } /* Multiplex: native-style sponsored recommendation grid at the end of content. */ .tp-ad-multiplex{max-width:1192px;margin:30px auto 4px;padding:0 24px} .tp-ad-multiplex-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .tp-ad-multiplex-head .tp-ad-tag{font-size:.6rem} .tp-ad-multiplex-head small{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .tp-ad-multiplex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;justify-items:center} .tp-ad-multiplex-grid .tp-ad-slot.is-active{width:100%;display:flex;justify-content:center} .tp-ad-multiplex .tp-ad-slot{position:relative} .tp-ad-multiplex .tp-ad-close{position:absolute;top:8px;right:8px;z-index:5} .tp-ad-multiplex .tp-ad-slot.is-hidden{display:none} /* X on the top-right corner of inline ad zones (top/content/sidebar/rail). */ .tp-ad-frame{position:relative;display:inline-flex} .tp-ad-frame>.tp-ad-close{position:absolute;top:8px;right:8px;z-index:5} .tp-ad-frame.is-hidden{display:none} /* Generic close (X) used by anchor + vignette. */ .tp-ad-close{width:26px;height:26px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(10,10,25,.55);color:#fff;font-size:.7rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);flex:none;transition:.15s} .tp-ad-close:hover{background:rgba(10,10,25,.85)} /* dashboard ad-image preview */ .tp-art-prev{display:none;max-width:100%;overflow:hidden} .tp-art-prev:not(:empty){display:block;margin-top:6px} .tp-art-prev img{max-height:140px;max-width:100%;border-radius:12px;border:1px solid var(--line);width:auto;object-fit:contain} .dash-mini{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;padding:8px 2px;border-bottom:1px solid var(--line);min-width:0} .dash-mini:last-child{border-bottom:0} .dash-mini span{color:var(--muted)} .dash-mini b{color:var(--text);font-weight:600} .dash-note{border:1px dashed rgba(124,58,237,.4);background:rgba(124,58,237,.06);border-radius:12px;padding:12px 14px;font-size:.86rem;color:var(--muted);display:flex;gap:10px;align-items:flex-start} .dash-note i{color:var(--accent);margin-top:2px} @media (max-width:900px){.dash{grid-template-columns:1fr}.dash-side{position:static;flex-direction:row;overflow-x:auto;padding:8px}.dash-tab{white-space:nowrap}.dash-form-row{grid-template-columns:1fr}} /* ================= Dashboard polish: stat cards, quick actions, hero ================= */ .tp-card-panel.stat{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;border-radius:16px;padding:18px;background:linear-gradient(160deg,var(--bg2),var(--bg3));transition:.2s;border-color:rgba(15,15,35,.08)} .tp-card-panel.stat::after{content:"";position:absolute;right:-26px;top:-26px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.16),transparent 70%);pointer-events:none} .tp-card-panel.stat:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,15,35,.09);border-color:rgba(124,58,237,.35)} .tp-card-panel.stat > i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.05rem;color:#fff;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 6px 16px rgba(124,58,237,.32)} .tp-card-panel.stat > div{display:flex;flex-direction:column;gap:5px;min-width:0} .tp-card-panel.stat span{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-card-panel.stat small{color:var(--muted);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em} .dash-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:22px} .dash-quick a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px 10px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:.78rem;font-weight:600;text-align:center;text-decoration:none;transition:.18s} .dash-quick a i{font-size:1.2rem;color:var(--accent);transition:.18s} .dash-quick a small{color:var(--muted);font-size:.68rem;font-weight:500;display:block;margin-top:2px} .dash-quick a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 20px rgba(15,15,35,.08);background:rgba(124,58,237,.06)} .dash-quick a:hover i{transform:scale(1.12)} .dash-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 24px;border-radius:18px;border:1px solid rgba(124,58,237,.25);background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(219,39,119,.06) 55%,var(--bg2));margin-bottom:22px} .dash-hero::after{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.18),transparent 70%)} .dash-hero-art{width:58px;height:58px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;color:#fff;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 10px 22px rgba(124,58,237,.35)} .dash-hero-body{flex:1;min-width:220px} .dash-hero-body h2{margin:0 0 4px;font-size:1.55rem;font-weight:800;color:var(--text)} .dash-hero-body p{margin:0;color:var(--muted);font-size:.9rem} .dash-hero-actions{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:1} .dash-side-title{display:block;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 13px 6px} .dash-side-title:first-child{padding-top:4px} .dash-panel h3 i{width:28px;height:28px;flex:none;border-radius:9px;display:inline-grid;place-items:center;font-size:.8rem;color:#fff;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 3px 8px rgba(124,58,237,.22)} .dash-panel h3 [class*="fa-"].tp-ico-amber{background:linear-gradient(135deg,#f59e0b,#ef4444)} .dash-panel h3 [class*="fa-"].tp-ico-green{background:linear-gradient(135deg,#10b981,#059669)} .dash-panel h3 [class*="fa-"].tp-ico-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)} .dash-panel h3 [class*="fa-"].tp-ico-pink{background:linear-gradient(135deg,#ec4899,#db2777)} .dash-panel h3 [class*="fa-"].tp-ico-slate{background:linear-gradient(135deg,#64748b,#475569)} .dash-panel h3 [class*="fa-"].tp-ico-gold{background:linear-gradient(135deg,#fbbf24,#d97706)} .dash-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px} .dash-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px} .dash-toolbar h2{font-size:1.25rem;font-weight:800;margin:0;display:flex;align-items:center;gap:10px} .dash-toolbar h2 i{color:var(--accent)} .dash-summary{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .dash-summary .tp-btn{flex:none} .dash-empty-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:36px 20px;border:1px dashed var(--line);border-radius:16px;background:var(--bg3);color:var(--muted)} .dash-empty-card i{font-size:2rem;color:var(--accent);opacity:.55} .tp-share-sub{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0 0 16px} .tp-share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tp-share-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;border:1px solid var(--line);background:var(--bg3);color:var(--text);cursor:pointer;font-size:.78rem;font-weight:600;transition:.18s} .tp-share-btn i{font-size:1.5rem} .tp-share-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);background:rgba(124,58,237,.08)} .tp-share-btn[data-share="what"] i{color:#25D366} .tp-share-btn[data-share="x"] i{color:var(--text)} .tp-share-btn[data-share="facebook"] i{color:#1877F2} .tp-share-btn[data-share="telegram"] i{color:#26A5E4} .tp-share-btn[data-share="sms"] i{color:#34C759} .tp-share-btn[data-share="copy"] i{color:var(--accent)} @media (max-width:560px){.tp-share-grid{grid-template-columns:repeat(2,1fr)}} .tip-presets{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px} .tip-presets .tp-btn{flex:1;min-width:70px} .tip-presets .tp-btn.is-active{border-color:#f59e0b;color:#fbbf24;background:rgba(245,158,11,.12)} .tip-dash-link{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;background:rgba(124,58,237,.06)} .tip-dash-link .tp-input{flex:1;min-width:220px;font-family:var(--font-mono,monospace);font-size:.82rem} @media (max-width:560px){.tp-share-grid{grid-template-columns:repeat(2,1fr)}.tip-dash-link .tp-input{min-width:160px}} /* ---------- Artist dashboard mobile bottom nav ---------- */ .artist-botnav,.artist-botnav-sheet,.artist-botnav-backdrop{display:none} @media (max-width:820px){ .artist-page{padding-bottom:96px} .artist-botnav{display:flex;position:fixed !important;left:0;right:0;bottom:0;width:100%;box-sizing:border-box;z-index:95;align-items:stretch;gap:6px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(15,15,35,.12);padding:6px 8px calc(6px + env(safe-area-inset-bottom))} .artist-botnav-burger,.artist-botnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--muted);font-size:.62rem;font-weight:600;padding:6px 2px;border-radius:12px;cursor:pointer;text-decoration:none;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .artist-botnav-btn i,.artist-botnav-burger i{font-size:1.1rem;color:var(--accent)} .artist-botnav-burger:hover,.artist-botnav-btn:hover{background:rgba(124,58,237,.08);color:var(--text)} .artist-botnav-btn.tp-active{color:var(--accent)} .artist-botnav-backdrop{display:block;position:fixed;inset:0;z-index:96;background:rgba(10,8,22,.45)} .artist-botnav-backdrop[hidden]{display:none} .artist-botnav-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:97;max-height:72vh;overflow-y:auto;background:var(--bg2);border-top-left-radius:18px;border-top-right-radius:18px;box-shadow:0 -18px 50px rgba(15,15,35,.28);padding:10px 14px calc(18px + env(safe-area-inset-bottom));animation:tpSheetIn .22s ease} .artist-botnav-sheet[hidden]{display:none} .artist-botnav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 6px 10px;border-bottom:1px solid var(--line);margin-bottom:4px} .artist-botnav-head b{font-size:1.02rem;display:flex;align-items:center;gap:8px} .artist-botnav-close{border:0;background:var(--bg3);width:32px;height:32px;border-radius:10px;color:var(--muted);cursor:pointer;font-size:.95rem} .artist-botnav-group{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:14px 8px 6px} .artist-botnav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .artist-botnav-link{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--muted);font-size:.74rem;font-weight:600;padding:10px 6px;border-radius:12px;text-align:center;line-height:1.25} .artist-botnav-link i{font-size:1.05rem;color:var(--accent)} .artist-botnav-link:hover{background:rgba(124,58,237,.08);color:var(--text)} .artist-botnav-link.tp-active{color:var(--accent);background:rgba(124,58,237,.1)} @keyframes tpSheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}} } .perk-rows{display:flex;flex-direction:column;gap:8px} .perk-row{display:grid;grid-template-columns:90px 1fr auto;gap:8px} .perk-row .perk-desc{grid-column:1/-1} .camp-dash-item{padding:14px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:14px;background:var(--bg3);margin-bottom:14px} .camp-dash-off{opacity:.6} .camp-dash-item .tp-grid-4{grid-template-columns:repeat(2,1fr)} @media (max-width:900px){.dash{grid-template-columns:1fr}.dash-side{position:static;flex-direction:row;overflow-x:auto;padding:8px}.dash-tab{white-space:nowrap}.dash-form-row{grid-template-columns:1fr}} @media (max-width:1100px){.admin-side-nav{flex-direction:column}.admin-side-search .tp-input{padding-left:10px}.admin-side-search .si{display:none}} /* ============================================================ Admin dashboard — mobile responsive ============================================================ */ @media (max-width:900px){ .app-shell{flex-direction:column} .admin-side{position:fixed;top:0;left:0;bottom:0;width:260px;max-width:85vw;z-index:97;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;border-radius:0;border:none;box-shadow:12px 0 40px rgba(10,8,22,.4);padding:0} .admin-side.is-open{transform:translateX(0)} .admin-side-backdrop{display:block} .admin-side-backdrop[hidden]{display:none} .admin-mob-toggle{display:grid;place-items:center} .admin-side-nav{flex-direction:column;padding:6px 8px 10px} .admin-side-search .tp-input{padding-left:10px} .admin-side-search .si{display:none} .admin-side-link span{font-size:.84rem} .admin-side-link{padding:9px 12px} .admin-side-head{padding:14px} .dash-toolbar{flex-direction:column;align-items:flex-start;gap:8px} .dash-toolbar .tp-btn{width:100%;justify-content:center} .dash-grid-2,.dash-grid-3{grid-template-columns:1fr} .dash-stat{padding:14px} .dash-stat i{width:36px;height:36px;border-radius:10px;font-size:.9rem} .dash-kpis{grid-template-columns:repeat(2,1fr)} .ad-card{padding:12px} .ad-card-top{flex-direction:column;gap:10px} .ad-card-head{flex:1 1 100%} .ad-card-bottom{flex-direction:column;align-items:flex-start;gap:8px} .ad-card-stats{margin-left:0;padding-left:0} .dash-table{font-size:.78rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .dash-table th,.dash-table td{padding:7px 8px;white-space:nowrap} .dash-panel{padding:16px;border-radius:14px} .dash-panel h3{font-size:.95rem} .dash-row{flex-wrap:wrap;gap:8px} .dash-row .dash-mid b{font-size:.86rem} .dash-hero{padding:16px;gap:14px} .dash-hero-art{width:46px;height:46px;font-size:1.2rem;border-radius:12px} .dash-hero-body{min-width:0} .dash-hero-body h2{font-size:1.2rem} .dash-quick{grid-template-columns:repeat(2,1fr)} .tp-container{padding:0 12px} .page-head{flex-direction:column;align-items:flex-start !important;gap:10px} .page-head h1{font-size:1.4rem} .dash-form-row{grid-template-columns:1fr} .field label small{display:block;margin-top:2px} .dash-summary{flex-direction:column;align-items:flex-start} .camp-dash-item .tp-grid-4{grid-template-columns:1fr} body:has(.app-shell){padding-bottom:0} } /* Admin bottom nav — mobile only */ .admin-botnav{display:none} @media (max-width:900px){ .admin-botnav{display:flex;position:fixed;left:0;right:0;bottom:0;width:100%;box-sizing:border-box;z-index:95;align-items:stretch;gap:6px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(15,15,35,.12);padding:6px 8px calc(6px + env(safe-area-inset-bottom))} .admin-botnav-burger,.admin-botnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--muted);font-size:.62rem;font-weight:600;padding:6px 2px;border-radius:12px;cursor:pointer;text-decoration:none;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admin-botnav-btn i,.admin-botnav-burger i{font-size:1.1rem;color:var(--accent)} .admin-botnav-burger:hover,.admin-botnav-btn:hover{background:rgba(124,58,237,.08);color:var(--text)} .admin-botnav-btn.tp-active{color:var(--accent)} body:has(.app-shell){padding-bottom:80px} } /* Producer bottom nav — mobile only */ .producer-botnav{display:none} @media (max-width:900px){ .producer-botnav{display:flex;position:fixed;left:0;right:0;bottom:0;width:100%;box-sizing:border-box;z-index:95;align-items:stretch;gap:6px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(15,15,35,.12);padding:6px 8px calc(6px + env(safe-area-inset-bottom))} .producer-botnav-burger,.producer-botnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;color:var(--muted);font-size:.62rem;font-weight:600;padding:6px 2px;border-radius:12px;cursor:pointer;text-decoration:none;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .producer-botnav-btn i,.producer-botnav-burger i{font-size:1.1rem;color:var(--accent)} .producer-botnav-burger:hover,.producer-botnav-btn:hover{background:rgba(124,58,237,.08);color:var(--text)} .producer-botnav-btn.tp-active{color:var(--accent)} .producer-side{position:fixed;top:0;left:0;bottom:0;width:260px;max-width:85vw;z-index:97;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;border-radius:0;border:none;box-shadow:12px 0 40px rgba(10,8,22,.4);padding:0} .producer-side.is-open{transform:translateX(0)} .producer-side-backdrop{display:block} .producer-side-backdrop[hidden]{display:none} .producer-side .dash-tab{padding:9px 12px;font-size:.84rem} .producer-side .dash-side-title{padding:14px 13px 6px} } /* Shared checkout / guide sidebar classes (used on upload-packages, producer dashboard, etc.) */ .gco-side-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px} .gco-side-card h4{margin:0 0 10px;font-size:.95rem} .gco-side-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .gco-side-card li{font-size:.83rem;color:var(--muted);display:flex;gap:8px;align-items:flex-start;line-height:1.5} .gco-side-card li i{color:#16a34a} .nl-step-group{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px} .nl-step-badge{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center} .nl-step-title{font-size:.84rem;font-weight:700;color:var(--text);margin-bottom:2px} .nl-step-desc{font-size:.8rem;color:var(--muted);line-height:1.5;margin:0} .nl-aside{display:flex;flex-direction:column;gap:0} /* ================= Song page: ratings, activity, comments, playlists, reports, buy ================= */ .tp-rating-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:rgba(251,191,36,.14);color:#b45309;font-size:.76rem;font-weight:700} .tp-rating-pill i{color:#fbbf24} .tp-rating-row{margin:12px 0 4px} .tp-stars{display:flex;align-items:center;gap:3px} .tp-stars button{background:none;border:0;padding:4px 3px;cursor:pointer;font-size:1.25rem;color:#4b4b5c;transition:.15s} .tp-stars button:hover{color:#fbbf24;transform:scale(1.15)} .tp-stars button i.fas{color:#fbbf24} .tp-stars button i.far{color:#5b5b6e} .tp-stars-meta{margin-left:10px;color:var(--muted);font-size:.8rem} .tp-stars-meta b{color:#fbbf24;font-size:.95rem} .tp-btn-later{background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.45);color:#0369a1} .tp-btn-later:hover{background:rgba(14,165,233,.2);color:#0c4a6e} .tp-lyrics-collapsed{max-height:130px;overflow:hidden;position:relative;transition:max-height .3s ease} .tp-lyrics-collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,transparent,var(--bg2))} .tp-lyrics-open .tp-lyrics-collapsed{max-height:none} .tp-lyrics-open .tp-lyrics-collapsed::after{display:none} .tp-lyrics-toggle{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);color:var(--muted);font-size:.85rem;padding:7px 14px;border-radius:999px;cursor:pointer;transition:.18s} .tp-lyrics-toggle:hover{color:var(--text);border-color:var(--accent);background:rgba(124,58,237,.08)} .tp-count-badge{display:inline-flex;min-width:22px;height:22px;padding:0 7px;align-items:center;justify-content:center;border-radius:999px;background:rgba(124,58,237,.14);color:#6d28d9;font-size:.75rem;margin-left:8px} .tp-activity{display:flex;flex-direction:column;gap:2px} .tp-activity-row{display:flex;align-items:center;gap:11px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:.86rem} .tp-activity-row:last-child{border-bottom:0} .tp-activity-txt{flex:1;min-width:0;color:var(--muted)} .tp-activity-txt strong{color:var(--text);font-weight:600} .tp-activity-txt em{color:var(--accent);font-style:normal} .tp-activity-time{color:var(--muted);font-size:.74rem;white-space:nowrap} .tp-comment-form{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px} .tp-comment-form textarea{flex:1} .tp-comment-form .tp-btn{flex:none;margin-top:2px} .tp-comments-list{display:flex;flex-direction:column;gap:18px} .tp-comment{display:flex;gap:11px} .tp-comment-avatar{width:38px;height:38px;flex:none;border-radius:50%;background:var(--bg3);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);overflow:hidden} .tp-comment-avatar img{width:100%;height:100%;object-fit:cover} .tp-comment-body{flex:1;min-width:0} .tp-comment-head{display:flex;align-items:center;gap:10px;margin-bottom:3px} .tp-comment-head strong{font-size:.9rem;color:var(--text)} .tp-comment-head span{color:var(--muted);font-size:.74rem} .tp-comment-body p{font-size:.9rem;color:var(--muted);line-height:1.55;margin:0 0 6px;word-break:break-word} .tp-comment-actions{display:flex;gap:14px;align-items:center} .tp-comment-actions button{background:none;border:0;color:var(--muted);font-size:.78rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:2px 0;transition:.15s} .tp-comment-actions button:hover{color:var(--accent)} .tp-comment-like.on{color:#f43f5e} .tp-comment-like.on i{color:#f43f5e} .tp-comment-replies{margin-top:14px;padding-left:20px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:14px} .tp-playlist-create{display:flex;gap:10px;margin-bottom:14px} .tp-playlist-create .tp-input{flex:1} .tp-playlist-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto} .tp-playlist-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--bg3);color:var(--text);cursor:pointer;text-align:left;transition:.16s;font-size:.9rem} .tp-playlist-row:hover{border-color:var(--accent);background:rgba(124,58,237,.08)} .tp-playlist-row i{color:var(--accent)} .tp-muted{color:var(--muted);font-size:.86rem} /* player seek tip + waveform */ .tp-progress-tip{position:absolute;top:-26px;transform:translateX(-50%);background:#181826;border:1px solid var(--line);color:#fff;font-size:.7rem;padding:3px 7px;border-radius:7px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap} .tp-wave{width:100%;height:30px;margin-top:8px;opacity:0;transition:opacity .3s} .tp-wave.active{opacity:.9} @media (max-width:640px){.tp-wave{height:22px}} /* product page: sticky artwork while the licence panel scrolls */ .tp-product-left{position:sticky;top:20px} @media (max-width:860px){.tp-product-left{position:static}} /* independent scrollbar for the choose-license list */ .tp-license-scroll{height:min(52vh,360px);overflow-y:scroll;padding-right:10px;overscroll-behavior:contain;scrollbar-gutter:stable} .tp-license-scroll::-webkit-scrollbar{width:12px} .tp-license-scroll::-webkit-scrollbar-track{background:var(--bg3);border-radius:10px} .tp-license-scroll::-webkit-scrollbar-thumb{background:rgba(139,92,246,.5);border-radius:10px;border:2px solid var(--bg3)} .tp-license-scroll::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.75)} @media (max-width:860px){.tp-license-scroll{height:auto;max-height:52vh;overflow-y:auto}} /* ============================================================ Listener dashboard ============================================================ */ .tp-lhero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:26px 26px;border-radius:18px;margin-bottom:20px;background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(219,39,119,.10)),var(--bg2);border:1px solid rgba(124,58,237,.22)} .tp-lhero::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.22),transparent 70%);pointer-events:none} .tp-lhero-main{display:flex;align-items:center;gap:16px;min-width:0;position:relative} .tp-lhero-avatar{flex:0 0 auto;width:68px;height:68px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:1.4rem;font-weight:800;color:#fff;box-shadow:0 10px 24px rgba(124,58,237,.3)} .tp-lhero-avatar img{width:100%;height:100%;object-fit:cover} .tp-lhero-text h1{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;margin:2px 0 4px} .tp-lhero-text h1 i{color:var(--accent);font-size:1.1rem} .tp-lhero-text p{margin:0;color:var(--muted);font-size:.92rem} .tp-lhero-side{display:flex;gap:10px;flex-wrap:wrap;position:relative} .tp-lchip{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;padding:8px 14px;border-radius:999px;background:var(--bg3);border:1px solid var(--line);white-space:nowrap} .tp-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin-bottom:22px} .tp-quick-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);text-decoration:none;color:var(--text);font-size:.8rem;font-weight:700;transition:.18s} .tp-quick-item i{font-size:1.15rem;color:var(--accent)} .tp-quick-item:hover{transform:translateY(-2px);border-color:var(--accent);background:rgba(124,58,237,.06)} .tp-lstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:26px} @media (max-width:640px){ .tp-lhero{padding:20px 16px} .tp-lhero-avatar{width:52px;height:52px} .tp-lhero-text h1{font-size:1.2rem} } /* ============================================================ Listener blueprint pages ============================================================ */ .tp-flash{margin-bottom:4px} .tp-alert{padding:12px 16px;border-radius:12px;font-size:.9rem;font-weight:600;margin-bottom:14px} .tp-alert-success{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);color:#86efac} .tp-alert-error{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.35);color:#fda4af} .tp-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:18px} .tp-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--muted);text-decoration:none;border:1px solid transparent;transition:.18s} .tp-tab:hover{color:var(--text);background:var(--bg3)} .tp-tab.is-active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 14px rgba(219,39,119,.25)} .tp-chip-row{display:flex;flex-wrap:wrap;gap:9px} .tp-chip.is-active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent} .tp-progress-bar{height:7px;border-radius:999px;background:var(--bg3);border:1px solid var(--line);overflow:hidden} .tp-progress-bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2))} .tp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0} @media (max-width:640px){.tp-form-grid{grid-template-columns:1fr}} .tp-label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 6px} .tp-switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)} .tp-switch-row:last-child{border-bottom:0} .tp-switch-row b{display:block;font-size:.94rem} .tp-switch-row small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px} .tp-switch-row .switch{flex:none;width:44px;height:24px;border-radius:999px;background:var(--bg3);border:1px solid var(--line);position:relative;cursor:pointer;transition:.2s} .tp-switch-row input{display:none} .tp-switch-row .switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s} .tp-switch-row input:checked + .switch{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent} .tp-switch-row input:checked + .switch::after{left:22px} .tp-btn-danger{background:linear-gradient(135deg,#f43f5e,#be123c);color:#fff;box-shadow:0 6px 18px rgba(244,63,94,.25)} .tp-btn-danger:hover{transform:translateY(-1px)} .tp-profile-cover{position:absolute;left:0;right:0;top:0;height:150px} .tp-profile-avatar{flex:0 0 auto;width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--bg3);border:3px solid var(--bg2);font-size:2rem;font-weight:800;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.3)} .tp-profile-avatar .cover{width:100%;height:100%} @media (max-width:640px){.tp-profile-cover{height:110px}.tp-profile-avatar{width:74px;height:74px}} .tp-recap-card{border-radius:18px} .tp-recap-num{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .tp-recap-title{font-size:.9rem;font-weight:800;color:var(--muted);margin:18px 0 0;text-transform:uppercase;letter-spacing:.04em} .tp-recap-title i{color:var(--accent);margin-right:6px} .tp-recap-stat{color:var(--text);font-size:.95rem;font-weight:600;margin:10px 0 0} .tp-recap-stat i{color:var(--accent)} .tp-station-art{flex:0 0 auto} .station-orbit{width:150px;height:150px;border-radius:50%;border:2px solid rgba(124,58,237,.4);box-shadow:0 0 0 12px rgba(124,58,237,.08),0 0 0 24px rgba(124,58,237,.04)} @media (max-width:640px){.station-orbit{width:110px;height:110px}} .tp-avatar{width:38px;height:38px;flex:none;border-radius:50%;background:var(--bg3);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;color:var(--accent);overflow:hidden} .tp-share-pop{position:fixed;inset:0;z-index:2000;background:rgba(10,8,22,.6);display:grid;place-items:center;padding:18px} .tp-share-inner{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:20px 22px;min-width:240px;box-shadow:var(--shadow);animation:tpModalIn .22s ease} .tp-share-inner b{display:block;margin-bottom:14px;font-size:1rem} .tp-share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} .tp-share-grid a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;aspect-ratio:1;border-radius:14px;background:var(--bg3);border:1px solid var(--line);color:var(--text);text-decoration:none;font-size:1.2rem;transition:.16s} .tp-share-grid a:hover{transform:translateY(-2px);border-color:var(--accent);background:rgba(124,58,237,.1)} .tp-share-inner .tp-btn{width:100%;justify-content:center} /* mobile bottom navigation */ .tp-mobnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:900;background:rgba(16,13,30,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));grid-template-columns:repeat(5,1fr);transition:transform .2s} .tp-mobnav.lifted{transform:translateY(110%)} .tp-mobnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);text-decoration:none;font-size:.64rem;font-weight:700;padding:6px 2px;border-radius:10px} .tp-mobnav a i{font-size:1.15rem} .tp-mobnav a.is-active{color:var(--accent)} .tp-mobnav .tp-mobnav-create{color:var(--accent)} @media (max-width:860px){ .tp-mobnav{display:grid} .tp-player{bottom:52px !important} .tp-player.show{bottom:0 !important} } body:has(.artist-page) #tpMobnav{display:none !important} /* watch progress overlay on dashboard cards */ .tp-watch-progress{position:absolute;left:8px;right:8px;bottom:8px;height:4px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden} .tp-watch-progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))} /* community page: liked + replies */ .tp-btn.is-liked{color:#f43f5e;border-color:rgba(244,63,94,.35);background:rgba(244,63,94,.1)} .tp-replies{max-height:260px;overflow:auto;scrollbar-width:thin} .tp-reply-form{animation:tpModalIn .18s ease} .tp-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;color:var(--muted);text-align:center;grid-column:1/-1} .tp-empty i{font-size:1.8rem} /* ============================================================ Listener dashboard — mobile responsive ============================================================ */ @media (max-width:860px){ .tp-lhero{padding:20px 16px;gap:12px} .tp-lhero-main{gap:12px} .tp-lhero-avatar{width:52px;height:52px;font-size:1.1rem} .tp-lhero-text h1{font-size:1.15rem} .tp-lhero-text p{font-size:.82rem} .tp-lhero-side{gap:8px} .tp-lchip{padding:6px 10px;font-size:.76rem} .tp-quick{grid-template-columns:repeat(5,1fr);gap:8px} .tp-quick-item{padding:10px 4px;font-size:.72rem;gap:6px;border-radius:10px} .tp-quick-item i{font-size:1rem} .tp-lstats{grid-template-columns:repeat(2,1fr);gap:10px} .tp-lstats .stat{padding:12px} .tp-section{margin:28px 0} .tp-grid-5{grid-template-columns:repeat(2,1fr);gap:10px} .tp-grid-2{grid-template-columns:1fr;gap:14px} .tp-card{flex-basis:auto} .tp-card h4{font-size:.85rem} .tp-card p{font-size:.78rem} .disc-artists{grid-template-columns:1fr} .disc-artist{padding:10px} .tp-track{padding:10px 12px;gap:10px} .tp-track .cover{width:42px;height:42px} .tp-track-mid h5{font-size:.88rem} .tp-sec-head{flex-wrap:wrap;gap:8px} .tp-sec-title{font-size:1.05rem} .tp-container.tp-listen{padding-bottom:80px} /* Orders tab */ .lis-order-stats{grid-template-columns:repeat(2,1fr) !important;gap:8px !important} .lis-order-stats .tp-card-panel{padding:10px !important;gap:8px !important} .lis-order-stats .tp-card-panel > i{width:36px;height:36px;font-size:.9rem;border-radius:10px} .lis-order-stats .tp-card-panel span{font-size:1rem} .lis-order-stats .tp-card-panel small{font-size:.7rem} .lis-order-row{flex-direction:column;align-items:flex-start !important;gap:8px !important} .lis-order-row > div:last-child{width:100%;display:flex;gap:8px;align-items:center} .lis-order-grid{grid-template-columns:1fr !important;gap:12px !important} .lis-txn-row{flex-wrap:wrap;gap:6px} .lis-txn-row small{width:100%;padding-left:28px} } @media (max-width:520px){ .tp-lhero{padding:16px 14px} .tp-lhero-avatar{width:44px;height:44px} .tp-lhero-text h1{font-size:1.05rem} .tp-quick{grid-template-columns:repeat(5,1fr);gap:6px} .tp-quick-item{padding:8px 2px;font-size:.66rem;gap:4px} .tp-quick-item i{font-size:.92rem} .tp-lstats{grid-template-columns:1fr 1fr;gap:8px} .tp-lstats .stat{padding:10px} .tp-lstats .stat span{font-size:1rem} .tp-grid-5{grid-template-columns:1fr 1fr;gap:8px} .tp-card .cover{width:100%;aspect-ratio:1;border-radius:10px} .tp-card-wrap{border-radius:10px;overflow:hidden} .lis-order-stats{grid-template-columns:1fr 1fr !important} .lis-order-stats .tp-card-panel{padding:8px !important;gap:6px !important} .lis-order-stats .tp-card-panel > i{width:30px;height:30px;font-size:.8rem;border-radius:8px} .lis-order-stats .tp-card-panel span{font-size:.9rem} .lis-order-stats .tp-card-panel small{font-size:.65rem} .lis-order-grid{gap:10px !important} .lis-txn-row{font-size:.8rem !important} .lis-txn-row i{font-size:.8rem !important} .lis-txn-row div:first-child{font-size:.8rem !important} .lis-panel{padding:12px !important} .lis-panel h3{font-size:.9rem !important} .tp-container.tp-listen{padding-bottom:80px} } /* ============================================================ ADVERTISING SYSTEM — Phase 1 ============================================================ */ /* Advertiser dashboard cards */ .ad-cards{display:grid;gap:14px} .ad-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;transition:.15s} .ad-card:hover{border-color:rgba(124,92,255,.3)} .ad-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap} .ad-card-head{flex:1;min-width:0} .ad-card-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px} .ad-card-title b{font-size:.92rem} .ad-card-id{color:var(--muted);font-size:.75rem} .ad-card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.76rem;color:var(--muted)} .ad-card-meta span{display:inline-flex;align-items:center;gap:4px} .ad-card-meta i{font-size:.7rem} .ad-card-note{margin-top:8px;padding:8px 12px;border-radius:8px;background:rgba(239,68,68,.08);color:#fca5a5;font-size:.78rem;display:flex;align-items:center;gap:6px} .ad-card-desc{margin-top:8px;font-size:.82rem;color:var(--muted);line-height:1.5} .ad-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .ad-card-stats{display:flex;gap:12px;flex-wrap:wrap} .ad-stat{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;color:var(--muted)} .ad-stat i{font-size:.7rem} .ad-stat b{color:var(--text);font-weight:700} .ad-card-chips{display:flex;align-items:center;gap:4px;flex-wrap:wrap} .ad-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center} /* Advertiser page: hide main bottom nav */ body:has(.advertiser-page) #tpMobnav{display:none !important} /* Advertiser modal (used in dashboard) */ .adv-modal{position:fixed;inset:0;z-index:200;background:rgba(8,8,18,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px} .adv-modal[hidden]{display:none} .adv-modal-dialog{width:min(560px,100%);background:var(--bg2,#15151f);border:1px solid var(--line,rgba(255,255,255,.09));border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;max-height:92vh} .adv-modal-dialog-lg{width:min(720px,100%)} .adv-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line,rgba(255,255,255,.09));flex:0 0 auto} .adv-modal-head h4{margin:0} .adv-modal-body{padding:14px 22px;flex:1 1 auto;overflow-y:auto;display:grid;gap:12px} .adv-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 22px 14px;border-top:1px solid var(--line,rgba(255,255,255,.09));background:rgba(21,21,31,.96);backdrop-filter:blur(4px);position:sticky;bottom:0;z-index:2} /* Zone checkbox toggle chips (advertiser campaign form) */ .adv-zone-chips label{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:.78rem;font-weight:600;transition:.15s} .adv-zone-chips input{position:absolute;opacity:0;pointer-events:none} .adv-zone-chips input:checked+span{border-color:var(--accent,#7c5cff);background:rgba(124,92,255,.14);color:#fff} /* Revenue split highlight card */ .rev-split-card{display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--bg2)} .rev-split-card .rev-pct{font-size:1.8rem;font-weight:800;line-height:1} .rev-split-card .rev-label{font-size:.82rem;color:var(--muted)} /* ================= Audio pre-roll ad overlay ================= */ .tp-audio-ad-overlay{position:absolute;bottom:0;left:0;right:0;z-index:60;background:linear-gradient(135deg,#1a1030,#12121f);border-top:2px solid var(--accent,#7c5cff);border-radius:12px 12px 0 0;padding:14px 18px;display:none;box-shadow:0 -8px 30px rgba(124,92,255,.2)} .tp-audio-ad-overlay.is-visible{display:block} .tp-audio-ad-inner{display:flex;flex-direction:column;gap:10px} .tp-audio-ad-head{display:flex;align-items:center;gap:10px} .tp-audio-ad-badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;color:#f59e0b;text-transform:uppercase;letter-spacing:.5px} .tp-audio-ad-badge i{font-size:.45rem;color:#ef4444;animation:tp-ad-pulse 1.2s infinite} @keyframes tp-ad-pulse{0%,100%{opacity:1}50%{opacity:.3}} .tp-audio-ad-timer{font-size:.75rem;color:var(--muted);margin-left:auto} .tp-audio-ad-close{background:none;border:1px solid rgba(255,255,255,.15);color:#fff;font-size:.75rem;font-weight:600;padding:5px 12px;border-radius:999px;cursor:pointer;transition:.15s;margin-left:8px;white-space:nowrap} .tp-audio-ad-close:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)} .tp-audio-ad-close:disabled{opacity:.35;cursor:not-allowed} .tp-audio-ad-info{display:flex;align-items:center;gap:12px} .tp-audio-ad-cover{width:44px;height:44px;border-radius:10px;background:rgba(124,92,255,.2);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.1rem;flex-shrink:0} .tp-audio-ad-text{min-width:0} .tp-audio-ad-text b{display:block;font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-audio-ad-text i{font-style:normal;font-size:.75rem;color:var(--muted)} .tp-audio-ad-bar{height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden} .tp-audio-ad-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent,#7c5cff),var(--accent2,#ec4899));border-radius:99px;transition:width .3s linear} /* ================= Video pre-roll ad overlay ================= */ .tp-video-ad-overlay{position:absolute;inset:0;z-index:70;background:#000;display:grid;place-items:center} .tp-video-ad-overlay[hidden]{display:none} .tp-video-ad-box{width:100%;max-width:800px;position:relative;border-radius:12px;overflow:hidden;background:#000} .tp-video-ad-box video{width:100%;aspect-ratio:16/9;display:block;background:#000} .tp-video-ad-head{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);z-index:2} .tp-video-ad-timer{font-size:.75rem;color:rgba(255,255,255,.7);margin-left:auto} .tp-video-ad-skip{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.75rem;font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;transition:.15s;backdrop-filter:blur(4px);white-space:nowrap} .tp-video-ad-skip:hover:not(:disabled){background:rgba(255,255,255,.15)} .tp-video-ad-skip:disabled{opacity:.4;cursor:not-allowed} .tp-video-ad-bar{position:absolute;bottom:40px;left:0;right:0;height:3px;background:rgba(255,255,255,.1);z-index:2} .tp-video-ad-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent,#7c5cff),var(--accent2,#ec4899));transition:width .3s linear} .tp-video-ad-info{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);z-index:2} .tp-video-ad-info span{font-size:.8rem;color:rgba(255,255,255,.8)} .tp-video-ad-info a{font-size:.75rem;color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap} .tp-video-ad-info a:hover{text-decoration:underline} /* ================= Phase 3: Charts & Royalty Pool ================= */ /* Chart period buttons */ .ad-chart-period,.ad-admin-chart-period{font-size:.72rem !important;padding:4px 10px !important;border-radius:999px !important} .ad-chart-period.active,.ad-admin-chart-period.active{background:var(--accent,#7c5cff) !important;color:#fff !important;border-color:var(--accent,#7c5cff) !important} /* Chart container */ canvas{max-width:100%} /* Royalty pool admin table */ .dash-table th{font-size:.76rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;padding:8px 12px;border-bottom:2px solid var(--line)} .dash-table td{padding:8px 12px;border-bottom:1px solid var(--line);font-size:.84rem} .dash-table tr:hover td{background:rgba(255,255,255,.02)} /* Phase 4: Frequency capping, dayparting, A/B testing */ .ab-group-badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(124,92,255,.12);color:var(--accent,#7c5cff)} .ab-group-badge.a{background:rgba(16,185,129,.12);color:#10b981} .ab-group-badge.b{background:rgba(59,130,246,.12);color:#3b82f6} .ab-group-badge.c{background:rgba(245,158,11,.12);color:#f59e0b} .freq-badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;padding:2px 8px;border-radius:999px;background:rgba(6,182,212,.08);color:#06b6d4} .daypart-badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;padding:2px 8px;border-radius:999px;background:rgba(236,72,153,.08);color:#ec4899} /* Brand sponsorship badge */ .sp-badge{display:flex;align-items:center;gap:10px;padding:10px 16px;margin-bottom:14px;background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(219,39,119,.06));border:1px solid rgba(124,58,237,.12);border-radius:12px} .sp-badge-logo{height:28px;width:auto;border-radius:4px;object-fit:contain} .sp-badge-text{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .sp-badge-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:2px 8px;background:rgba(124,58,237,.1);border-radius:6px} .sp-badge-tag{font-size:.82rem;font-weight:600;color:var(--text);font-style:italic} /* ---- Media-player style playlist ---- */ .tp-player-hint{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 14px;border-radius:10px;font-size:.84rem;color:var(--muted);background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.12)} .tp-player-hint-warn{color:var(--text);background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2)} .tp-player-hint a{color:var(--accent);font-weight:700;text-decoration:underline} .tp-player-list{margin-top:8px;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:14px;overflow:hidden;background:rgba(0,0,0,.02)} .tp-list-head{display:grid;grid-template-columns:34px 58px 1fr 60px;gap:10px;align-items:center;padding:10px 16px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line,rgba(0,0,0,.08))} .tp-list-head.tp-has-actions{grid-template-columns:34px 34px 58px 1fr 60px 48px} .tp-lh-actions{text-align:right} .tp-playlist-row{display:grid;grid-template-columns:34px 58px 1fr 60px;align-items:center;gap:10px;padding:8px 16px;min-height:66px;transition:background .18s,opacity .25s,transform .25s;cursor:pointer;position:relative;border-bottom:1px solid var(--line,rgba(0,0,0,.06))} .tp-playlist-row.tp-has-actions{grid-template-columns:34px 34px 58px 1fr 60px 48px} .tp-playlist-row:last-child{border-bottom:0} .tp-playlist-row.tp-playing{background:rgba(124,58,237,.09);box-shadow:inset 3px 0 0 var(--accent,#8b5cf6)} .tp-playlist-row.tp-playing .tp-row-mid h5{color:var(--accent,#8b5cf6)} .tp-playlist-row:hover{background:var(--bg3,rgba(124,58,237,.05))} .tp-playlist-row .cover{width:44px;height:44px;flex:none;border-radius:8px;overflow:hidden;background:#15151f} .tp-playlist-row img.cover,.tp-playlist-row .cover img{width:100%;height:100%;object-fit:contain;object-position:center} .tp-playlist-row.tp-removing{opacity:0;transform:translateX(16px)} .tp-row-grip{color:var(--muted);cursor:grab;text-align:center;font-size:.85rem;opacity:.55} .tp-playlist-row.can-reorder .tp-row-grip{opacity:.85;cursor:grab} .tp-playlist-row.can-reorder:hover .tp-row-grip{opacity:1} .tp-row-mid{min-width:0} .tp-row-mid h5{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-row-mid span{color:var(--muted);font-size:.82rem} .tp-row-time{color:var(--muted);font-size:.82rem;text-align:right} .tp-row-actions{display:flex;justify-content:flex-end} .tp-row-remove{opacity:.6} .tp-playlist-row:hover .tp-row-remove{opacity:1} .tp-queue-add{background:transparent;border:0;color:var(--accent);cursor:pointer;font-size:.85rem} .tp-dragging{opacity:.35} .tp-drag-over-before,.tp-drag-over-after{position:relative} .tp-drag-over-before::before,.tp-drag-over-after::after{content:"";position:absolute;left:8px;right:8px;height:3px;border-radius:2px;background:var(--accent,#8b5cf6);pointer-events:none;z-index:2} .tp-drag-over-before::before{top:-2px} .tp-drag-over-after::after{bottom:-2px} .pl-add-song.tp-added{opacity:.6} .pl-add-song.tp-adding-ok{opacity:.55} .tp-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:transparent;color:var(--muted);cursor:pointer;transition:.18s} .tp-icon-btn:hover{background:rgba(124,58,237,.1);color:var(--accent);border-color:transparent} .tp-icon-btn.danger:hover{background:rgba(220,38,38,.12);color:#dc2626} /* ---- Windows 11 Media Player style playlist detail ---- */ .tp-wmedia{display:flex;gap:22px;align-items:flex-start;max-width:1180px;padding:26px 24px 60px} .tp-wmedia-rail{position:sticky;top:90px;flex:0 0 46px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)} .tp-wm-rail-link,.tp-wm-rail-search{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--muted);font-size:1.05rem;cursor:pointer;border:0;background:transparent;text-decoration:none;transition:.18s} .tp-wm-rail-link:hover,.tp-wm-rail-search:hover{color:var(--text);background:var(--bg3)} .tp-wm-rail-link.is-active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 5px 14px rgba(124,58,237,.35)} .tp-wm-rail-search{margin-top:auto;border:1px solid var(--line)} .tp-wmedia-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px} .tp-mp-hero{display:flex;gap:26px;align-items:flex-end;padding:26px 26px 20px;border-radius:20px;border:1px solid rgba(124,58,237,.12);background-color:var(--bg2)} .tp-mp-hero-art{flex:0 0 210px;max-width:42vw} .tp-mp-cover{aspect-ratio:1/1;width:100%;border-radius:14px;box-shadow:0 22px 48px rgba(15,15,35,.28)} .tp-mp-hero-info{flex:1;min-width:0} .tp-mp-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:var(--accent2);text-transform:uppercase} .tp-mp-title{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;margin:6px 0 4px;line-height:1.1;overflow-wrap:break-word} .tp-mp-desc{margin:0 0 8px;color:var(--muted);font-size:.95rem} .tp-mp-meta{color:var(--muted);font-size:.85rem;margin-bottom:16px} .tp-mp-transport{display:flex;align-items:center;gap:10px;margin-bottom:12px} .tp-mp-ctl{position:relative;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:.98rem;transition:.18s;user-select:none;touch-action:manipulation} .tp-mp-ctl:hover{border-color:var(--accent);background:rgba(124,58,237,.08);color:var(--accent)} .tp-mp-ctl.on{color:var(--accent);background:rgba(124,58,237,.12);border-color:var(--accent)} .tp-mp-ctl.one::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);margin-top:26px} .tp-mp-ctl.tp-mp-play{width:66px;height:66px;font-size:1.35rem;color:#fff;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 26px rgba(219,39,119,.4)} .tp-mp-ctl.tp-mp-play:hover{color:#fff;transform:scale(1.04)} .tp-mp-progress{display:flex;align-items:center;gap:12px;margin-bottom:16px;max-width:560px} .tp-mp-time{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums} .tp-mp-bar{flex:1;height:5px;border-radius:999px;background:var(--bg3);position:relative;overflow:hidden;cursor:pointer} .tp-mp-bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2))} .tp-mp-actions{display:flex;gap:10px;flex-wrap:wrap} .tp-collab{margin:2px 0;padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg2);font-size:.88rem} .tp-collab summary{cursor:pointer;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px} .tp-collab summary::-webkit-details-marker{display:none} .tp-collab summary .tp-muted{font-weight:400} .tp-player-list{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg2)} @media (max-width:860px){ .tp-wmedia{gap:12px;padding:18px 16px 56px} .tp-wmedia-rail{flex-basis:40px;padding:8px 4px;flex-direction:row;position:static;width:auto} .tp-wm-rail-search{margin-top:0} .tp-mp-hero{flex-direction:column;align-items:flex-start;padding:20px} .tp-mp-hero-art{flex:0 0 auto;width:180px;max-width:70vw} .tp-mp-title{font-size:1.6rem} } @media (max-width:520px){ .tp-mp-hero-art{width:140px} .tp-mp-transport{gap:8px} .tp-mp-ctl{width:38px;height:38px} .tp-mp-ctl.tp-mp-play{width:56px;height:56px} } /* ===== Two-pane Windows Media Player (info + tracklist) ===== */ body.tp-page-playlist .tp-player{display:none !important} .tp-wmedia-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px} /* ===== The whole media window (two equal panes + attached bottom player) ===== */ .tp-wmedia-window{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(15,15,35,.18);height:auto;min-height:440px} .tp-wmedia-main.tp-np-main{flex:1 1 auto;flex-direction:row;align-items:stretch;gap:0;min-height:0} .tp-nowplaying{flex:1 1 0;width:50%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg2);padding:14px 16px;border-right:1px solid var(--line)} .tp-np-head{align-self:stretch;width:100%;max-width:350px;display:flex;justify-content:flex-end;margin:0 auto 2px} .tp-np-share{margin-top:0;border-radius:999px} .tp-np-stage{width:100%;display:flex;flex-direction:column;gap:10px;align-items:center} .tp-np-art{position:relative;display:grid;place-items:center;width:100%;max-width:280px;height:min(300px,42vh);border-radius:16px;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 22px 52px rgba(15,15,35,.3)} .tp-np-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:16px;display:block;background:rgba(0,0,0,.35)} .tp-np-art .np-fallback{font-size:4rem;color:rgba(255,255,255,.55)} .tp-np-art-title{position:absolute;left:0;right:0;top:0;padding:12px 14px;border-radius:16px 16px 0 0;font-size:1rem;font-weight:800;letter-spacing:-.01em;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tp-np-edit{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:.78rem;cursor:pointer;transition:.18s} .tp-np-info{margin:12px 0 0;text-align:center;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px} .tp-np-now{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tp-np-artist{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .tp-np-vis{margin-top:4px;font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--accent2);display:inline-flex;align-items:center;gap:6px} .tp-wmedia-panel{flex:1 1 0;width:50%;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden} .tp-wp-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .tp-wp-actions .tp-btn{white-space:nowrap} .tp-share-pop{position:fixed;z-index:22000;display:none;width:260px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.3);padding:8px} .tp-share-list{display:flex;flex-direction:column;gap:4px} .tp-share-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;color:var(--text);font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;border:0;background:transparent;text-align:left;width:100%;transition:.15s} .tp-share-item:hover{background:var(--bg3)} .tp-share-item .tp-share-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1rem;flex:none} .tp-share-item.tp-share-copy{color:var(--text)} .tp-player-list{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column} .tp-list-body{overflow-y:auto;flex:1} /* ===== The independent horizontal player (attached bottom bar of the window) ===== */ .tp-mvp{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;gap:12px;background:rgba(124,58,237,.04);border-top:1px solid var(--line);padding:7px 14px} .tp-mvp-now{flex:0 0 200px;min-width:0;display:flex;align-items:center;gap:9px} .tp-mvp-art{flex:0 0 38px;width:38px;height:38px;border-radius:8px;overflow:hidden;position:relative;background:linear-gradient(135deg,#7c3aed,#db2777);display:grid;place-items:center;color:rgba(255,255,255,.65);font-size:.9rem} .tp-mvp-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#15151f} .tp-mvp-meta{min-width:0} .tp-mvp-title{font-weight:700;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-mvp-artist{color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-mvp-controls{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-left:14px;border-left:1px solid var(--line)} .tp-mvp-progress{display:flex;align-items:center;gap:9px;width:100%} .tp-mvp-ctrlrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0} .tp-mvp-transport{display:flex;align-items:center;gap:7px;justify-content:center;flex:1;min-width:0} .tp-mvp-side{display:flex;align-items:center;gap:9px;flex:0 0 auto} .tp-mvp-vol{display:flex;align-items:center;gap:6px} .tp-mvp-vol input[type=range]{width:80px;max-width:100%;accent-color:var(--accent);cursor:pointer} /* ===== Playlist meta / management strip ===== */ .tp-pla-top{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap} .tp-meta-strip{display:flex;flex-direction:column;gap:14px} .tp-meta-bottom{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:20px 24px} @media (max-width:1020px){ .tp-wmedia-window{height:auto;min-height:0;overflow:visible} .tp-wmedia-main.tp-np-main{flex-direction:column} .tp-nowplaying{flex:0 0 auto;width:100%;flex-direction:row;gap:18px;justify-content:flex-start;padding:16px 20px;border-right:0;border-bottom:1px solid var(--line)} .tp-np-stage{width:auto;flex:0 0 140px;gap:8px} .tp-np-art{max-width:140px} .tp-np-info{text-align:left;align-items:flex-start;justify-content:center;margin:0} .tp-wmedia-panel{width:100%;flex:1 1 auto;max-height:60vh} .tp-mvp{flex:0 0 auto} .tp-mvp-now{flex:0 0 auto} .tp-mvp-controls{padding-left:0;border-left:0} } @media (max-width:640px){ .tp-nowplaying{flex-direction:column} .tp-nowplaying{text-align:center} .tp-np-stage{flex:0 0 auto;width:100%} .tp-np-art{max-width:200px;margin:0 auto} .tp-np-info{text-align:center;align-items:center} .tp-mvp-ctrlrow{flex-direction:column;align-items:stretch;gap:8px} .tp-mvp-side{justify-content:center} .tp-mvp-vol input[type=range]{width:80px} } @media (max-width:400px){ .tp-mvp{flex-direction:column;align-items:stretch;gap:10px} .tp-mvp-now{justify-content:center} .tp-mvp-vol input[type=range]{width:70px} } @media (prefers-color-scheme:dark){ .tp-mvp,.tp-meta-strip{background:rgba(22,22,32,.7)} }