*{box-sizing:border-box}
:root{
  --bg:#000;
  --panel:#121212;
  --panel-2:#181818;
  --panel-3:#242424;
  --hover:#2a2a2a;
  --text:#fff;
  --muted:#b3b3b3;
  --muted2:#727272;
  --line:rgba(255,255,255,.08);
  --accent:#7868ff;
  --accent-hover:#9185ff;
  --shadow:0 16px 40px rgba(0,0,0,.35)
}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.38}
.hidden{display:none!important}
*{scrollbar-width:thin;scrollbar-color:#565656 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#4f4f4f;border-radius:999px;border:2px solid transparent;background-clip:padding-box}

#app{height:100vh;display:grid;grid-template-rows:64px minmax(0,1fr) 90px;background:#000}

/* top bar */
.topbar{
  height:64px;display:flex;align-items:center;gap:12px;
  padding:8px 14px;background:#000;border-bottom:1px solid rgba(255,255,255,.02);
  z-index:20
}
.brand{display:flex;align-items:center;gap:10px;min-width:170px;height:42px;border:0;background:transparent;color:#fff;padding:0}
.brand-logo{width:32px;height:32px;border-radius:50%;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:8px}
.brand-logo i{height:2px;border-radius:10px;background:#000;display:block}
.brand-logo i:nth-child(2){width:85%}.brand-logo i:nth-child(3){width:68%}
.brand-name{font-size:17px;font-weight:800;letter-spacing:-.025em}
.nav-cluster{display:flex;align-items:center;gap:8px}
.round-button{
  width:32px;height:32px;border-radius:50%;border:0;background:#151515;color:#fff;
  display:grid;place-items:center;transition:.15s;font-size:16px
}
.round-button:hover:not(:disabled){background:#252525;transform:scale(1.04)}
.home-button{font-size:18px}
.search{position:relative;display:flex;align-items:center;flex:1;max-width:470px}
.search input{
  width:100%;height:48px;border-radius:24px;border:0;outline:0;background:#242424;color:#fff;
  padding:0 78px 0 46px;font-size:14px;font-weight:600;transition:.15s
}
.search input::placeholder{color:#b3b3b3}
.search input:hover{background:#2a2a2a}
.search input:focus{background:#2a2a2a;box-shadow:0 0 0 2px #fff inset}
.search-glyph{position:absolute;left:16px;color:#d0d0d0;font-size:21px}
.shortcut{position:absolute;right:11px;padding:4px 7px;border-radius:6px;border:1px solid #4c4c4c;background:#1b1b1b;color:#9b9b9b;font-size:10px}
.top-links{display:flex;align-items:center;gap:18px;margin-left:8px}
.top-link{border:0;background:transparent;color:#a9a9a9;font-size:13px;font-weight:700}
.top-link:hover{color:#fff}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.import-top{
  height:40px;padding:0 18px;border:0;border-radius:999px;background:#fff;color:#000;
  font-weight:800;transition:.15s
}
.import-top:hover{transform:scale(1.03);background:#f3f3f3}
.profile-button{
  width:36px;height:36px;border-radius:50%;border:0;background:#7d4bce;color:#fff;font-weight:800
}

/* layout */
.shell{min-height:0;display:grid;grid-template-columns:330px minmax(0,1fr);gap:8px;padding:8px}
.sidebar,.content{min-height:0}
.sidebar-card,.content{
  background:linear-gradient(180deg,#1a1a1a,#121212);
  border-radius:10px
}
.library-shell{height:100%;display:flex;flex-direction:column;padding:8px 8px 10px;overflow:hidden}
.library-header{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 12px}
.library-header h2{margin:0 0 2px;font-size:16px;letter-spacing:-.02em}
.library-header span{font-size:11px;color:#888}
.soft-button{
  border:0;border-radius:999px;background:#1f1f1f;color:#fff;padding:10px 13px;
  font-size:12px;font-weight:800
}
.soft-button:hover{background:#2b2b2b}
.import-card{
  border-radius:10px;border:1px solid rgba(255,255,255,.05);padding:16px;margin-bottom:10px;
  background:linear-gradient(180deg,#232323,#1d1d1d)
}
.import-card.dragover{outline:2px solid var(--accent)}
.import-card-icon{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#06140b;font-size:21px;font-weight:900;margin-bottom:10px
}
.import-card-copy strong{display:block;font-size:15px;margin-bottom:6px}
.import-card-copy p{margin:0 0 12px;color:#b1b1b1;font-size:12px;line-height:1.45}
.import-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.light-button,.dark-button{min-height:36px;border-radius:999px;padding:0 14px;font-size:12px;font-weight:800}
.light-button{border:0;background:#fff;color:#000}
.dark-button{border:1px solid #424242;background:#252525;color:#fff}
.nav-list{display:flex;flex-direction:column;gap:2px}
.nav-item{
  border:0;background:transparent;color:#fff;display:flex;align-items:center;gap:12px;
  text-align:left;padding:8px;border-radius:8px
}
.nav-item:hover,.nav-item.active{background:#222}
.nav-icon{
  width:42px;height:42px;border-radius:6px;background:linear-gradient(135deg,#535353,#353535);
  display:grid;place-items:center;font-size:17px;flex:none
}
.nav-item b,.nav-item small{display:block}
.nav-item b{font-size:13px}
.nav-item small{font-size:11px;color:#898989;margin-top:4px}
.playlist-section{margin-top:12px;padding:12px 6px 8px;border-top:1px solid rgba(255,255,255,.07);overflow:auto;min-height:0}
.playlist-caption{font-size:10px;letter-spacing:.12em;font-weight:800;color:#727272;margin:0 0 7px 2px}
.playlist-list{display:flex;flex-direction:column;gap:1px}
.playlist-entry{border:0;background:transparent;color:#b3b3b3;border-radius:6px;text-align:left;padding:9px 8px;font-size:12px}
.playlist-entry:hover{background:#1d1d1d;color:#fff}
.sidebar-footer{
  margin-top:auto;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.07)
}
.sidebar-footer b,.sidebar-footer small{display:block}
.sidebar-footer b{font-size:11px;color:#bbb}
.sidebar-footer small{font-size:10px;color:#777;margin-top:4px}

/* content */
.content{
  overflow:auto;
  background:
    linear-gradient(180deg,rgba(90,90,90,.36),rgba(27,27,27,.9) 210px,#121212 470px),
    linear-gradient(180deg,#1f1f1f,#121212)
}
.content-header{padding:32px 30px 12px}
.hero-copy{max-width:760px}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.14em;color:#b3b3b3}
.hero-copy h1{margin:10px 0 8px;font-size:48px;line-height:1;letter-spacing:-.055em}
.hero-copy p{margin:0;color:#c2c2c2;line-height:1.5;font-size:14px;max-width:700px}
.hero-actions{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.chip-button{
  min-height:32px;border:0;border-radius:999px;background:#242424;color:#fff;padding:0 14px;font-size:12px;font-weight:800
}
.chip-button.active-chip{background:#fff;color:#000}
.empty-state{padding:0 28px 34px}
.greeting-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px
}
.greeting-card{
  height:72px;border:0;border-radius:8px;background:#2a2a2a;color:#fff;
  display:flex;align-items:center;gap:12px;padding:10px 12px;text-align:left;transition:.14s
}
.greeting-card:hover{background:#323232}
.passive-card{cursor:default}
.greeting-cover{
  width:56px;height:56px;border-radius:4px;display:grid;place-items:center;font-size:20px;font-weight:900;flex:none
}
.accent-green{background:linear-gradient(135deg,#7868ff,#5144c8);color:#07120a}
.accent-purple{background:linear-gradient(135deg,#6755d8,#3d3190)}
.accent-pink{background:linear-gradient(135deg,#d46adf,#8e4fd2)}
.accent-neutral{background:linear-gradient(135deg,#555,#2f2f2f)}
.greeting-text b,.greeting-text small{display:block}
.greeting-text b{font-size:13px}
.greeting-text small{font-size:11px;color:#b3b3b3;margin-top:4px}
.empty-panel{
  min-height:280px;border-radius:10px;background:linear-gradient(180deg,#1d1d1d,#181818);
  border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:40px;padding:34px 36px
}
.record-visual{
  width:150px;height:150px;border-radius:50%;background:repeating-radial-gradient(circle,#2c2c2c 0 3px,#232323 4px 7px);
  display:grid;place-items:center;flex:none;box-shadow:var(--shadow)
}
.record-label{
  width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,#8a72ef,#d969aa);
  display:grid;place-items:center;position:relative
}
.record-label::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#111;border:5px solid #f2f2f2}
.record-label span{opacity:0}
.empty-copy h2{margin:8px 0 10px;font-size:44px;line-height:1;letter-spacing:-.05em}
.empty-copy p{margin:0 0 20px;color:#b3b3b3;line-height:1.55;font-size:14px;max-width:650px}
.empty-actions{display:flex;gap:10px;flex-wrap:wrap}
.accent-button,.outline-button,.danger-button{
  min-height:48px;border-radius:999px;padding:0 18px;font-weight:800;font-size:14px
}
.accent-button{border:0;background:var(--accent);color:#06120a}
.accent-button:hover{background:var(--accent-hover)}
.outline-button{border:1px solid #5a5a5a;background:transparent;color:#fff}
.outline-button:hover{border-color:#7d7d7d;background:#1d1d1d}

.dashboard{padding:0 28px 34px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:6px 0 14px}
.section-heading h2{margin:0 0 3px;font-size:24px;letter-spacing:-.04em}
.section-heading p{margin:0;color:#8f8f8f;font-size:12px}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:30px}
.quick-card{
  position:relative;border-radius:8px;background:#181818;padding:14px;height:250px;display:block;overflow:hidden;
  transition:background .15s, transform .15s;cursor:pointer
}
.quick-card:hover{background:#282828;transform:translateY(-2px)}
.quick-cover{
  width:100%;height:160px;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(135deg,#5d4bbf,#2f275f);font-size:36px;box-shadow:var(--shadow);margin-bottom:14px
}
.quick-card b,.quick-card span{display:block}
.quick-card b{font-size:16px;line-height:1.35}
.quick-card span{font-size:12px;color:#a9a9a9;line-height:1.45;margin-top:6px}
.quick-card::after{
  content:"▶";position:absolute;right:16px;bottom:82px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#06120a;font-size:14px;font-weight:900;
  opacity:0;transform:translateY(8px);transition:.15s;box-shadow:0 10px 24px rgba(0,0,0,.35)
}
.quick-card:hover::after{opacity:1;transform:none}
.song-heading{margin-top:2px}
.list-tools{display:flex;align-items:center;gap:8px}
.list-tools select{
  background:#1f1f1f;border:1px solid #343434;color:#fff;border-radius:999px;padding:9px 12px;outline:0;font-size:12px
}
.accent-round{width:40px;height:40px;background:var(--accent);color:#06120a}
.song-table{width:100%;border-collapse:separate;border-spacing:0 2px;table-layout:fixed}
.song-table th{
  padding:9px;color:#8e8e8e;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.08);font-weight:700;text-align:left
}
.number-column{width:48px;text-align:center!important}
.song-table th:nth-child(2){width:45%}
.song-table th:nth-child(3){width:24%}
.favorite-column{width:52px;text-align:center!important}
.duration-column{width:74px;text-align:right!important}
.menu-column{width:50px}
.song-table td{padding:8px 9px;color:#b9b9b9;font-size:13px;transition:.12s}
.song-row td:first-child{border-radius:6px 0 0 6px}
.song-row td:last-child{border-radius:0 6px 6px 0}
.song-row:hover td{background:#2a2a2a;color:#fff}
.song-row.active td{background:rgba(120,104,255,.08)}
.song-row.active .song-meta b{color:var(--accent)}
.number-cell,.center-cell{text-align:center}
.right-cell{text-align:right}
.song-title-cell{display:flex;align-items:center;gap:12px;min-width:0;cursor:pointer}
.cover{
  width:40px;height:40px;border-radius:4px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 6px 16px rgba(0,0,0,.25)
}
.song-meta{min-width:0}
.song-meta b,.song-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-meta b{font-size:14px;color:#fff}
.song-meta span{font-size:12px;color:#8f8f8f;margin-top:3px}
.row-button{border:0;background:transparent;color:#8d8d8d;font-size:17px;padding:6px}
.row-button:hover{color:#fff}
.favorite{color:var(--accent)!important}

/* player */
.player{
  height:90px;display:grid;grid-template-columns:minmax(250px,1fr) minmax(420px,1.5fr) minmax(220px,1fr);
  align-items:center;padding:0 16px;background:#000;border-top:1px solid rgba(255,255,255,.07)
}
.now-playing{display:flex;align-items:center;gap:12px;min-width:0}
.mini-cover{
  width:56px;height:56px;border-radius:4px;background:linear-gradient(135deg,#333,#1d1d1d);
  display:grid;place-items:center;flex:none
}
.now-meta{min-width:0}
.now-meta strong,.now-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-meta strong{font-size:14px}
.now-meta span{font-size:12px;color:#8d8d8d;margin-top:4px}
.bare-button{border:0;background:transparent;color:#a1a1a1}
.bare-button:hover:not(:disabled){color:#fff}
.heart-button{font-size:20px}
.transport{display:flex;flex-direction:column;align-items:center;gap:8px}
.transport-buttons{display:flex;align-items:center;gap:18px}
.transport-icon{font-size:15px;transition:.12s}
.transport-icon.active{color:var(--accent)}
.main-play{
  width:32px;height:32px;border-radius:50%;border:0;background:#fff;color:#000;display:grid;place-items:center;
  font-size:12px;padding:0;line-height:1;text-align:center;transition:.12s
}
.main-play:hover:not(:disabled){transform:scale(1.06)}
.timeline{
  width:min(650px,100%);display:grid;grid-template-columns:36px minmax(100px,1fr) 36px;align-items:center;gap:8px;
  font-size:11px;color:#8d8d8d
}
.timeline input,.volume-range{width:100%;accent-color:#fff}
.player-right{
  display:grid;grid-template-columns:28px 22px minmax(88px,120px);align-items:center;justify-content:end;gap:8px
}
.queue-button{font-size:18px}
.volume-glyph{font-size:15px;color:#bfbfbf}

/* drawers */
.queue-drawer{
  position:fixed;right:14px;top:78px;bottom:102px;width:min(390px,calc(100vw - 28px));
  background:#181818;border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:var(--shadow);
  z-index:60;padding:18px;overflow:auto
}
.drawer-header{display:flex;justify-content:space-between;align-items:flex-start}
.drawer-header h2{margin:5px 0 14px}
.small-round{width:32px;height:32px}
.queue-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer}
.queue-item:hover{background:#232323}
.queue-item.active{background:rgba(120,104,255,.08)}
.queue-cover{width:42px;height:42px;border-radius:4px;display:grid;place-items:center;flex:none}
.queue-meta{min-width:0}
.queue-meta b,.queue-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-meta b{font-size:12px}
.queue-meta span{font-size:10px;color:#8f8f8f;margin-top:3px}

/* modals */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.78);display:grid;place-items:center;z-index:100;padding:16px
}
.modal-card{
  width:min(430px,100%);background:#242424;border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:28px;box-shadow:var(--shadow);position:relative
}
.modal-card.wide{width:min(520px,100%)}
.modal-close{
  position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:50%;border:0;background:#333;color:#fff;font-size:18px
}
.modal-card h2{margin:8px 0 18px;font-size:26px;letter-spacing:-.04em}
.modal-card>input,.modal-card label>input{
  width:100%;margin-top:6px;padding:13px;border-radius:8px;border:1px solid #454545;background:#121212;color:#fff;outline:0
}
.modal-card label{display:block;color:#b3b3b3;font-size:12px;margin:12px 0}
.modal-card input:focus{border-color:#7d7d7d}
.full-width{width:100%;margin-top:12px}
.modal-actions.split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.danger-button{border:1px solid #5a3e3e;background:#2d2222;color:#ffc2c2}
.setting-row{
  display:flex!important;justify-content:space-between;align-items:center;gap:16px;padding:12px!important;
  border-radius:10px;background:#1b1b1b;margin:10px 0!important
}
.setting-row b,.setting-row small{display:block}
.setting-row b{font-size:12px;color:#fff}
.setting-row small{font-size:11px;color:#8f8f8f;margin-top:4px}
.setting-row input{width:20px;height:20px}
.storage-info{margin-top:14px;padding:12px;border-radius:8px;background:#161616;color:#8f8f8f;font-size:11px;line-height:1.45}
.settings-note{margin:12px 0 0;color:#777;font-size:11px;line-height:1.5}
.context-menu{
  position:fixed;min-width:220px;max-height:350px;overflow:auto;background:#282828;border:1px solid #404040;border-radius:8px;padding:6px;z-index:130
}
.context-menu button{width:100%;display:block;text-align:left;border:0;background:transparent;color:#fff;border-radius:4px;padding:10px;font-size:12px}
.context-menu button:hover{background:#393939}
.context-menu .danger{color:#ffb7b7}
.toast-host{position:fixed;right:18px;bottom:102px;z-index:180;display:flex;flex-direction:column;gap:8px}
.toast{
  background:#fff;color:#0b0b0b;border-radius:8px;padding:12px 14px;font-size:12px;font-weight:800;box-shadow:var(--shadow)
}

@media(max-width:1250px){
  .top-links{display:none}
  .shell{grid-template-columns:285px minmax(0,1fr)}
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .empty-copy h2{font-size:34px}
}
@media(max-width:900px){
  .search{max-width:none}
  .hero-copy h1{font-size:38px}
  .greeting-grid{grid-template-columns:1fr}
  .empty-panel{display:block}
  .record-visual{margin:0 auto 24px}
  .song-table th:nth-child(3),.song-table td:nth-child(3){display:none}
}
@media(max-width:760px){
  html,body{overflow:auto}
  #app{display:block;min-height:100vh;height:auto;padding-bottom:86px}
  .topbar{position:sticky;top:0}
  .brand-name,.top-links,.home-button{display:none}
  .search input{padding-right:18px}
  .shortcut,.import-top{display:none}
  .shell{display:block;padding:0}
  .sidebar{display:none}
  .content{border-radius:0;min-height:calc(100vh - 150px)}
  .content-header{padding:24px 16px 10px}
  .hero-copy h1{font-size:30px}
  .empty-state,.dashboard{padding:0 14px 24px}
  .empty-panel{padding:24px}
  .empty-copy h2{font-size:28px}
  .quick-grid{grid-template-columns:1fr}
  .quick-card{height:90px;padding:10px;display:flex;align-items:center;gap:12px}
  .quick-cover{width:70px;height:70px;margin:0;font-size:24px}
  .quick-card::after{display:none}
  .song-table th:nth-child(3),.song-table td:nth-child(3),.song-table th:nth-child(4),.song-table td:nth-child(4){display:none}
  .player{
    position:fixed;left:0;right:0;bottom:0;height:86px;display:grid;grid-template-columns:1fr auto;padding:8px 10px
  }
  .transport{align-items:flex-end}
  .timeline,.player-right,.transport-icon{display:none}
  .transport-buttons{gap:0}
}


/* TuneFlow V5 – Audio settings / 10-band EQ */
.audio-settings-card{width:min(820px,96vw);max-height:88vh;overflow:auto}
.settings-section{margin:14px 0 16px;padding:14px;border-radius:12px;background:#191919;border:1px solid rgba(255,255,255,.06)}
.settings-section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.settings-section-title b,.settings-section-title small{display:block}
.settings-section-title b{font-size:14px;color:#fff}
.settings-section-title small{font-size:11px;color:#8f8f8f;margin-top:4px;line-height:1.4}
.setting-select-row{display:flex!important;justify-content:space-between;align-items:center;gap:16px;padding:12px!important;border-radius:10px;background:#202020;margin:8px 0!important}
.setting-select-row span b,.setting-select-row span small{display:block}
.setting-select-row span b{font-size:12px;color:#fff}
.setting-select-row span small{font-size:10.5px;color:#888;margin-top:4px}
.setting-select-row select{min-width:150px;border:1px solid #444;background:#111;color:#fff;border-radius:999px;padding:9px 12px;outline:0}
.tiny-button{border:1px solid #4a4a4a;background:#242424;color:#fff;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800}
.tiny-button:hover{background:#303030}
.eq-grid{display:grid;grid-template-columns:repeat(10,minmax(48px,1fr));gap:8px;align-items:end;padding-top:8px}
.eq-grid label{display:flex!important;flex-direction:column;align-items:center;gap:7px;margin:0!important;color:#aaa}
.eq-grid label>span{font-size:10px;font-weight:800;color:#d0d0d0}
.eq-grid label>small{font-size:9px;color:#7f7f7f}
.eq-grid input[type=range]{
  -webkit-appearance:slider-vertical;
  writing-mode:vertical-lr;
  direction:rtl;
  width:28px;
  height:150px;
  accent-color:var(--accent);
  cursor:pointer
}
.eq-section.disabled{opacity:.46}
.eq-section.disabled input,.eq-section.disabled select,.eq-section.disabled button{pointer-events:none}
@media(max-width:900px){
  .eq-grid{grid-template-columns:repeat(5,1fr);row-gap:18px}
  .eq-grid input[type=range]{height:110px}
}
@media(max-width:560px){
  .setting-select-row{display:block!important}
  .setting-select-row select{width:100%;margin-top:10px}
  .eq-grid{grid-template-columns:repeat(5,1fr)}
}


/* TuneFlow V5.1 – funktionierender EQ-Reset + Musik-Hilfe */
.eq-reset-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.help-steps{display:flex;flex-direction:column;gap:10px;margin:12px 0 16px}
.help-step{display:flex;gap:12px;padding:12px;border-radius:10px;background:#191919;border:1px solid rgba(255,255,255,.05)}
.help-number{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#06120a;display:grid;place-items:center;font-weight:900;flex:none}
.help-step b,.help-step small{display:block}
.help-step b{font-size:12px;color:#fff}
.help-step small{font-size:11px;line-height:1.5;color:#9a9a9a;margin-top:4px}
.help-warning{padding:12px;border-radius:10px;background:#211d12;border:1px solid #57491c;margin-bottom:14px}
.help-warning b,.help-warning span{display:block}
.help-warning b{font-size:12px;color:#fff}
.help-warning span{font-size:11px;line-height:1.5;color:#c2b98d;margin-top:4px}


/* TuneFlow V5.2 – Volume control redesign */
.player-right{
  display:grid;
  grid-template-columns:28px minmax(145px,180px);
  align-items:center;
  justify-content:end;
  gap:12px
}
.volume-control{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:8px 10px;
  border-radius:999px;
  background:#151515;
  border:1px solid rgba(255,255,255,.06)
}
.volume-glyph{
  width:18px;
  text-align:center;
  font-size:14px;
  color:#cfcfcf;
  flex:none
}
.volume-range{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  height:18px;
  margin:0
}
.volume-range:focus{outline:none}
.volume-range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0 var(--volume-fill,80%), #4d4d4d var(--volume-fill,80%) 100%)
}
.volume-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border:0;
  margin-top:-4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.35)
}
.volume-range::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:#4d4d4d
}
.volume-range::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background:var(--accent)
}
.volume-range::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border:0;
  box-shadow:0 2px 8px rgba(0,0,0,.35)
}
@media(max-width:760px){
  .player-right,.volume-control,.volume-range,.volume-glyph{display:none}
}


/* TuneFlow V6 – Modern UI refresh */
.topbar{
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 28px rgba(0,0,0,.28)
}
.brand-name{font-size:18px}
.round-button{background:#141414;border:1px solid rgba(255,255,255,.05)}
.round-button:hover:not(:disabled){background:#1f1f1f}

.modern-search{
  max-width:520px;
  height:50px
}
.modern-search input{
  height:50px;
  background:linear-gradient(180deg,#242424,#202020);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.18);
  padding-right:112px
}
.modern-search input:hover{background:linear-gradient(180deg,#2b2b2b,#252525)}
.modern-search input:focus{
  background:linear-gradient(180deg,#2b2b2b,#252525);
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.22)
}
.search-clear{
  position:absolute;
  right:54px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:0;
  background:#363636;
  color:#fff;
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0
}
.search-clear:hover{background:#4a4a4a}
.shortcut{right:12px}
.top-links{gap:10px}
.top-link{
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  transition:.15s
}
.top-link:hover{background:#1f1f1f;border-color:rgba(255,255,255,.12)}
.import-top{height:42px;box-shadow:0 10px 24px rgba(0,0,0,.24)}
.profile-button{box-shadow:0 6px 16px rgba(125,75,206,.35)}

.content{
  background:
    radial-gradient(circle at top right,rgba(78,67,173,.28),transparent 24%),
    radial-gradient(circle at 80% 0,rgba(120,104,255,.08),transparent 18%),
    linear-gradient(180deg,rgba(88,88,88,.32),rgba(22,22,22,.9) 220px,#121212 520px)
}
.content-header{
  padding:28px 28px 18px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);
  gap:18px;
  align-items:stretch
}
.hero-main{
  min-width:0;
  padding:14px 4px 0
}
.hero-copy h1{
  font-size:58px;
  line-height:.98;
  letter-spacing:-.06em;
  margin-top:12px
}
.hero-copy p{font-size:15px;max-width:720px}
.hero-actions{margin-top:26px}
.chip-button{
  min-height:34px;
  background:#202020;
  border:1px solid rgba(255,255,255,.06)
}
.chip-button.active-chip{
  box-shadow:0 8px 18px rgba(255,255,255,.08)
}

.hero-sidecards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-content:start
}
.hero-sidecard{
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:18px 18px 16px;
  text-align:left;
  color:#fff;
  background:linear-gradient(180deg,#1f1f1f,#171717);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  transition:.16s
}
.hero-sidecard:hover{transform:translateY(-2px);background:linear-gradient(180deg,#262626,#1b1b1b)}
.premium-card{
  background:
    radial-gradient(circle at 100% 0,rgba(120,104,255,.18),transparent 32%),
    linear-gradient(180deg,#202020,#171717)
}
.support-card{
  background:
    radial-gradient(circle at 100% 0,rgba(113,88,232,.24),transparent 35%),
    linear-gradient(180deg,#202020,#171717)
}
.sidecard-badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#d7d7d7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  margin-bottom:12px
}
.hero-sidecard b,.hero-sidecard small{display:block}
.hero-sidecard b{font-size:18px;line-height:1.3;margin-bottom:8px}
.hero-sidecard small{font-size:12px;line-height:1.55;color:#aaaaaa}

.sidebar-card,.content,.quick-card,.import-card,.empty-panel,.greeting-card{
  box-shadow:0 18px 42px rgba(0,0,0,.18)
}
.import-card{
  border-radius:14px;
  background:
    radial-gradient(circle at 100% 0,rgba(120,104,255,.09),transparent 30%),
    linear-gradient(180deg,#222,#1a1a1a)
}
.greeting-grid{gap:10px}
.greeting-card{
  height:78px;
  border-radius:12px;
  background:linear-gradient(180deg,#232323,#1c1c1c);
  border:1px solid rgba(255,255,255,.05)
}
.greeting-card:hover{background:linear-gradient(180deg,#292929,#212121)}
.empty-panel{
  border-radius:18px;
  background:
    radial-gradient(circle at top right,rgba(113,88,232,.14),transparent 32%),
    linear-gradient(180deg,#1d1d1d,#171717)
}

.quick-grid{gap:16px}
.quick-card{
  height:265px;
  border-radius:16px;
  background:linear-gradient(180deg,#1b1b1b,#171717);
  border:1px solid rgba(255,255,255,.04)
}
.quick-card:hover{background:linear-gradient(180deg,#232323,#1d1d1d)}
.quick-cover{
  height:168px;
  border-radius:12px;
  background:
    radial-gradient(circle at top right,rgba(255,255,255,.12),transparent 28%),
    linear-gradient(135deg,#6f60df,#44349f)
}
.song-table-wrap{
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.008));
  border:1px solid rgba(255,255,255,.04);
  padding:8px 10px 10px
}
.song-row td:first-child{border-radius:10px 0 0 10px}
.song-row td:last-child{border-radius:0 10px 10px 0}
.song-row:hover td{background:#262626}

.player{
  background:rgba(0,0,0,.94);
  backdrop-filter:blur(18px)
}
.now-playing,.transport,.volume-control{
  background:rgba(255,255,255,.02)
}
.now-playing{
  padding:10px 12px;
  border-radius:16px
}
.transport{
  padding:10px 12px;
  border-radius:16px
}
.player-right{gap:10px}
.volume-control{
  border-radius:16px;
  padding:10px 12px
}

@media(max-width:1250px){
  .content-header{grid-template-columns:1fr}
  .hero-sidecards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hero-sidecards{grid-template-columns:1fr}
}
@media(max-width:760px){
  .modern-search input{padding-right:18px}
  .search-clear,.shortcut,.top-links{display:none}
  .content-header{padding:22px 14px 14px}
  .hero-copy h1{font-size:36px}
  .hero-sidecards{display:grid}
}


/* =========================================================
   TuneFlow V7 — App-ready feature lab
   ========================================================= */

.lab-heading{margin-top:4px}
.lab-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:30px
}
.lab-card{
  min-height:172px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  padding:16px;
  color:#fff;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg,#1c1c1c,#161616);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  transition:transform .16s ease,background .16s ease,border-color .16s ease
}
.lab-card:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg,#242424,#1b1b1b);
  border-color:rgba(255,255,255,.11)
}
.lab-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:900;
  margin-bottom:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.22)
}
.flowmix-card .lab-icon{background:linear-gradient(135deg,#7868ff,#5144c8);color:#06130a}
.moment-card .lab-icon{background:linear-gradient(135deg,#7a66f0,#c35eb1)}
.session-card .lab-icon{background:linear-gradient(135deg,#4376e8,#6d4fd7)}
.sleep-card .lab-icon{background:linear-gradient(135deg,#31354d,#665a93)}
.lab-copy b,.lab-copy small,.lab-copy em{display:block}
.lab-copy b{font-size:15px;margin-bottom:6px}
.lab-copy small{font-size:11px;line-height:1.5;color:#9e9e9e;min-height:48px}
.lab-copy em{
  margin-top:10px;
  color:#d1d1d1;
  font-size:10px;
  font-style:normal;
  font-weight:750
}

.player-tools{
  display:flex;
  align-items:center;
  gap:4px
}
.player-tool-button{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:16px;
  padding:0
}
.player-tool-button:hover:not(:disabled){background:#252525}
.player-right{
  grid-template-columns:auto minmax(145px,180px)
}

.feature-modal-card{width:min(720px,96vw);max-height:88vh;overflow:auto}
.feature-intro{margin:-6px 0 16px;color:#959595;font-size:12px;line-height:1.55}
.moment-create-card{
  padding:14px;
  border-radius:14px;
  background:#191919;
  border:1px solid rgba(255,255,255,.055);
  margin-bottom:14px
}
.moment-create-card>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:11px}
.moment-create-card b{font-size:13px}
.moment-create-card small{font-size:11px;color:var(--accent);font-weight:800}
.moment-create-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.moment-create-row input{
  min-width:0;
  border:1px solid #3b3b3b;
  background:#101010;
  color:#fff;
  border-radius:999px;
  padding:0 14px;
  outline:0
}
.moment-create-row input:focus{border-color:#777}
.compact-accent{min-height:42px;font-size:12px}
.feature-list{display:flex;flex-direction:column;gap:7px}
.feature-list-empty{
  padding:24px;
  border-radius:12px;
  background:#171717;
  color:#777;
  text-align:center;
  font-size:12px
}
.moment-item{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  background:#1b1b1b;
  border:1px solid rgba(255,255,255,.045)
}
.moment-time{
  min-height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#262626;
  color:var(--accent);
  font-size:11px;
  font-weight:900
}
.moment-meta{min-width:0}
.moment-meta b,.moment-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moment-meta b{font-size:12px}
.moment-meta span{font-size:10px;color:#8b8b8b;margin-top:4px}
.moment-actions{display:flex;gap:5px}
.moment-actions button{
  border:0;
  border-radius:999px;
  padding:8px 10px;
  background:#2a2a2a;
  color:#fff;
  font-size:10px;
  font-weight:800
}
.moment-actions button:hover{background:#363636}
.moment-actions .delete-moment{color:#ffaaaa}

.snapshot-card{
  padding:15px;
  border-radius:14px;
  background:
    radial-gradient(circle at 100% 0,rgba(113,88,232,.12),transparent 35%),
    #181818;
  border:1px solid rgba(255,255,255,.055);
  margin:12px 0 14px
}
.snapshot-card b,.snapshot-card small{display:block}
.snapshot-card b{font-size:13px}
.snapshot-card small{font-size:11px;color:#8f8f8f;line-height:1.5;margin-top:5px}
.feature-actions{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:8px
}
.feature-actions.two-actions{grid-template-columns:1fr 1fr}
.feature-actions button{min-height:44px;font-size:11px;padding:0 13px}

.desktop-ready-badge{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:rgba(120,104,255,.08);
  color:#78ee9f;
  border:1px solid rgba(120,104,255,.16);
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em
}

@media(max-width:1250px){
  .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .lab-grid{grid-template-columns:1fr}
  .lab-card{min-height:130px}
  .moment-create-row{grid-template-columns:1fr}
  .feature-actions,.feature-actions.two-actions{grid-template-columns:1fr}
}


/* =========================================================
   TuneFlow V8 – Real metadata & embedded cover artwork
   ========================================================= */
.cover,.queue-cover,.mini-cover,.quick-cover,.track-editor-cover{
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important
}
.cover.has-art,.queue-cover.has-art,.mini-cover.has-art,.quick-cover.has-art,.track-editor-cover.has-art{
  color:transparent
}

.song-meta .metadata-line{
  display:block;
  color:#777;
  font-size:10px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.metadata-editor-card{width:min(760px,96vw)}
.track-editor-hero{
  display:flex;
  align-items:center;
  gap:16px;
  margin:4px 0 18px
}
.track-editor-hero h2{margin:4px 0 8px}
.track-editor-cover{
  width:104px;
  height:104px;
  border-radius:12px;
  flex:none;
  display:grid;
  place-items:center;
  font-size:30px;
  background:linear-gradient(135deg,#343434,#1d1d1d);
  box-shadow:0 14px 30px rgba(0,0,0,.3)
}
.metadata-badges{display:flex;gap:6px;flex-wrap:wrap}
.metadata-badge{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  background:#191919;
  border:1px solid #373737;
  color:#aaa;
  font-size:9px;
  font-weight:800
}
.metadata-badge.accent-meta{
  color:#7cf0a3;
  border-color:rgba(120,104,255,.22);
  background:rgba(120,104,255,.07)
}
.metadata-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 10px
}
.metadata-form-grid .span-two{grid-column:1/-1}
.metadata-form-grid input:disabled{color:#757575;background:#151515}
.metadata-info-card{
  padding:12px 13px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.055);
  background:#171717;
  margin:13px 0
}
.metadata-info-card b,.metadata-info-card span{display:block}
.metadata-info-card b{font-size:11px;color:#ddd}
.metadata-info-card span{margin-top:4px;color:#858585;font-size:10px;line-height:1.5}
.metadata-editor-actions{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:8px;
  margin-top:16px
}
.metadata-editor-actions button{min-height:44px;font-size:11px}

@media(max-width:650px){
  .track-editor-hero{align-items:flex-start}
  .track-editor-cover{width:80px;height:80px}
  .metadata-form-grid{grid-template-columns:1fr}
  .metadata-form-grid .span-two{grid-column:auto}
  .metadata-editor-actions{grid-template-columns:1fr}
}


/* TuneFlow V9 – Künstler, Alben, Suche und Navigation */
.discovery-view,.search-view,.entity-detail{padding:0 28px 38px}
.entity-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.compact-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.entity-card{
  border:1px solid rgba(255,255,255,.045);border-radius:16px;
  background:linear-gradient(180deg,#1b1b1b,#161616);color:#fff;
  padding:14px;text-align:left;transition:.15s;min-width:0
}
.entity-card:hover{transform:translateY(-3px);background:linear-gradient(180deg,#232323,#1b1b1b);border-color:rgba(255,255,255,.1)}
.entity-card-cover{
  aspect-ratio:1/1;width:100%;border-radius:12px;display:grid;place-items:center;
  font-size:34px;font-weight:900;margin-bottom:12px;background:linear-gradient(135deg,#403b62,#222);
  box-shadow:0 14px 30px rgba(0,0,0,.24);overflow:hidden;
  background-position:center!important;background-size:cover!important
}
.entity-card.artist-card .entity-card-cover{border-radius:50%}
.entity-card b,.entity-card small{display:block}
.entity-card b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entity-card small{color:#8e8e8e;font-size:11px;line-height:1.45;margin-top:5px;min-height:31px}

.search-page-head{padding:6px 0 10px}
.search-page-head h2{font-size:36px;letter-spacing:-.045em;margin:6px 0}
.search-page-head p{color:#8f8f8f;margin:0;font-size:12px}
.search-group{margin-top:20px}
.search-song-list{display:flex;flex-direction:column;gap:3px}
.search-song-row{
  display:grid;grid-template-columns:48px minmax(0,1fr) minmax(120px,.7fr) auto;
  gap:12px;align-items:center;border-radius:10px;padding:7px 9px;cursor:pointer
}
.search-song-row:hover{background:#252525}
.search-song-cover{
  width:44px;height:44px;border-radius:6px;display:grid;place-items:center;
  background-size:cover!important;background-position:center!important
}
.search-song-meta{min-width:0}
.search-song-meta b,.search-song-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-song-meta b{font-size:13px}
.search-song-meta span{font-size:10.5px;color:#8b8b8b;margin-top:3px}
.search-song-album{font-size:11px;color:#939393;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-song-duration{color:#8a8a8a;font-size:11px}

.entity-hero{min-height:250px;display:flex;align-items:flex-end;gap:24px;padding:24px 0 26px}
.entity-hero-cover{
  width:190px;height:190px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:46px;
  background:linear-gradient(135deg,#544d7b,#202020);background-size:cover!important;background-position:center!important;
  box-shadow:0 22px 48px rgba(0,0,0,.4)
}
.entity-detail[data-type="artist"] .entity-hero-cover{border-radius:50%}
.entity-hero-copy{min-width:0}
.entity-hero-copy h2{font-size:52px;line-height:.98;letter-spacing:-.055em;margin:8px 0 10px;word-break:break-word}
.entity-hero-copy p{margin:0;color:#b5b5b5;font-size:12px}
.entity-actions{display:flex;gap:9px;margin-top:18px}
.entity-subsection{margin-bottom:26px}
.nav-arrow:disabled{opacity:.3}
.search-empty{padding:22px;border-radius:12px;background:#181818;color:#777;text-align:center;font-size:12px}

@media(max-width:1300px){
  .entity-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .compact-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:950px){
  .entity-grid,.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .entity-hero-copy h2{font-size:40px}
}
@media(max-width:760px){
  .discovery-view,.search-view,.entity-detail{padding:0 14px 26px}
  .entity-grid,.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entity-hero{align-items:center}
  .entity-hero-cover{width:110px;height:110px}
  .entity-hero-copy h2{font-size:28px}
  .search-song-row{grid-template-columns:44px minmax(0,1fr) auto}
  .search-song-album{display:none}
}


/* =========================================================
   TuneFlow V10 – Playlists Pro
   ========================================================= */

.playlist-hero{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:24px;
  align-items:end;
  margin:4px 0 28px;
  padding:20px;
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0,rgba(113,88,232,.16),transparent 34%),
    linear-gradient(180deg,#202020,#171717);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 20px 44px rgba(0,0,0,.2)
}
.playlist-hero.hidden{display:none}
.playlist-hero-copy h2{
  margin:7px 0 8px;
  font-size:42px;
  line-height:1;
  letter-spacing:-.05em
}
.playlist-hero-copy p{
  color:#a3a3a3;
  margin:0;
  font-size:12px
}
.playlist-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px
}
.playlist-hero-actions button{
  min-height:42px;
  font-size:11px;
  padding:0 15px
}
.playlist-drag-hint{
  display:block;
  margin-top:12px;
  color:#777;
  font-size:10px
}

.playlist-mosaic{
  overflow:hidden;
  background:#202020;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:1px
}
.large-playlist-mosaic{
  width:190px;
  height:190px;
  border-radius:16px;
  box-shadow:0 20px 42px rgba(0,0,0,.34)
}
.playlist-mosaic-cell{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  font-size:22px;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important
}
.playlist-mosaic.single-cover{
  display:block
}
.playlist-mosaic.single-cover .playlist-mosaic-cell{
  width:100%;
  height:100%;
  font-size:36px
}

.entity-card .playlist-mosaic{
  aspect-ratio:1/1;
  width:100%;
  border-radius:12px;
  margin-bottom:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.24)
}

.playlist-entry{
  display:flex!important;
  align-items:center;
  gap:8px;
  width:100%
}
.playlist-entry-cover{
  width:27px;
  height:27px;
  flex:none;
  border-radius:5px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  overflow:hidden;
  background:#252525
}
.playlist-entry-cover span{
  background-size:cover!important;
  background-position:center!important;
  min-width:0;
  min-height:0
}
.playlist-entry-copy{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.song-row.playlist-draggable{
  cursor:grab
}
.song-row.playlist-draggable:active{
  cursor:grabbing
}
.song-row.dragging{
  opacity:.38
}
.song-row.drag-over td{
  box-shadow:inset 0 2px 0 var(--accent)
}
.drag-handle{
  color:#696969;
  font-size:13px;
  letter-spacing:-2px;
  margin-right:7px;
  user-select:none
}
.song-row:hover .drag-handle{color:#a8a8a8}

.playlist-remove-note{
  color:#8b8b8b;
  font-size:10px
}

@media(max-width:760px){
  .playlist-hero{
    grid-template-columns:100px minmax(0,1fr);
    gap:14px;
    padding:14px
  }
  .large-playlist-mosaic{
    width:100px;
    height:100px;
    border-radius:12px
  }
  .playlist-hero-copy h2{font-size:26px}
  .playlist-hero-actions button{min-height:38px;padding:0 11px}
}


/* =========================================================
   TuneFlow V11 – Player Pro
   ========================================================= */

.repeat-mode-button{
  position:relative
}
.repeat-mode-button[data-repeat="one"]::after{
  content:"1";
  position:absolute;
  right:-2px;
  top:-3px;
  min-width:13px;
  height:13px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#07130a;
  font-size:8px;
  font-weight:950;
  box-shadow:0 2px 8px rgba(0,0,0,.25)
}
.repeat-mode-button[data-repeat="all"]{
  color:var(--accent)
}
.repeat-mode-button[data-repeat="one"]{
  color:var(--accent)
}

.volume-button{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:grid;
  place-items:center
}
.volume-button:hover{
  transform:scale(1.08)
}

.queue-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:-3px 0 10px;
  padding:8px 0 10px;
  border-bottom:1px solid rgba(255,255,255,.055)
}
.queue-toolbar span{
  color:#747474;
  font-size:9.5px;
  line-height:1.4
}
.queue-clear-button{
  flex:none;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #3b3b3b;
  background:#222;
  color:#aaa;
  font-size:9px;
  font-weight:800
}
.queue-clear-button:hover{
  background:#2d2d2d;
  color:#fff
}

.queue-item{
  position:relative;
  display:grid!important;
  grid-template-columns:18px 42px minmax(0,1fr) 28px;
  gap:9px!important;
  align-items:center
}
.queue-drag-handle{
  color:#666;
  font-size:12px;
  letter-spacing:-2px;
  cursor:grab;
  user-select:none
}
.queue-item:active .queue-drag-handle{cursor:grabbing}
.queue-remove-button{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#6f6f6f;
  font-size:15px;
  padding:0
}
.queue-remove-button:hover:not(:disabled){
  background:#303030;
  color:#fff
}
.queue-remove-button:disabled{
  opacity:.18;
  cursor:default
}
.queue-item.queue-dragging{
  opacity:.36
}
.queue-item.queue-drag-over{
  box-shadow:inset 0 2px 0 var(--accent);
  background:#242424
}
.queue-position{
  display:block;
  margin-top:3px;
  color:#666;
  font-size:9px
}
.queue-item.active .queue-position{
  color:var(--accent)
}

.player-resume-toast{
  color:#8debae
}

@media(max-width:760px){
  .queue-toolbar span{display:none}
}


/* TuneFlow V11.1 – Smooth Scrub */
#seekBar{
  touch-action:none;
  cursor:pointer;
}
#seekBar:active{
  cursor:grabbing;
}


/* TuneFlow V11.2 – eindeutiger Play/Pause-Button */
.main-play{
  position:relative;
  overflow:hidden;
}
.main-play[data-mode="play"]::before{
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:12px solid currentColor;
  transform:translateX(1.5px);
}
.main-play[data-mode="play"]::after{
  content:none;
}
.main-play[data-mode="pause"]::before,
.main-play[data-mode="pause"]::after{
  content:"";
  position:absolute;
  top:50%;
  width:5px;
  height:16px;
  border-radius:1.5px;
  background:currentColor;
  transform:translateY(-50%);
}
.main-play[data-mode="pause"]::before{
  left:calc(50% - 6px);
}
.main-play[data-mode="pause"]::after{
  left:calc(50% + 1px);
}


/* TuneFlow V11.4 – während Scrubbing keine hörbaren Audio-Sprünge */
#seekBar{
  user-select:none;
  -webkit-user-select:none;
}


/* =========================================================
   TuneFlow V12 – Audio & Qualität
   ========================================================= */

.player-quality{
  display:block;
  margin-top:3px;
  color:#666;
  font-size:9.5px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.balance-setting{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(160px,220px) 52px;
  gap:14px;
  align-items:center;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.045)
}
.balance-setting-copy b,
.balance-setting-copy small{
  display:block
}
.balance-setting-copy b{font-size:12px}
.balance-setting-copy small{
  color:#7d7d7d;
  margin-top:4px;
  font-size:10px
}
.balance-control{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center
}
.balance-control>span{
  color:#777;
  font-size:9px;
  font-weight:900
}
.balance-control input{
  width:100%
}
.balance-value{
  text-align:right;
  color:#aaa;
  font-size:10px;
  font-weight:800
}

.audio-quality-card{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  background:#161616;
  border:1px solid rgba(255,255,255,.05)
}
.quality-dot{
  width:9px;
  height:9px;
  flex:none;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(120,104,255,.07)
}
.audio-quality-card b,
.audio-quality-card small{
  display:block
}
.audio-quality-card b{
  font-size:11px
}
.audio-quality-card small{
  color:#7f7f7f;
  font-size:9.5px;
  margin-top:4px;
  line-height:1.45
}

.custom-preset-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(270px,1.1fr);
  gap:16px;
  align-items:center;
  padding:13px 0 15px
}
.custom-preset-row>div:first-child b,
.custom-preset-row>div:first-child small{
  display:block
}
.custom-preset-row>div:first-child b{font-size:12px}
.custom-preset-row>div:first-child small{
  margin-top:4px;
  color:#7e7e7e;
  font-size:10px;
  line-height:1.45
}
.custom-preset-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px
}
.custom-preset-controls input{
  min-width:0;
  height:34px;
  border:1px solid #393939;
  border-radius:999px;
  background:#131313;
  color:#fff;
  padding:0 12px;
  outline:0;
  font-size:10px
}
.custom-preset-controls input:focus{
  border-color:#666
}
.danger-tiny{
  color:#ffaaaa!important
}

@media(max-width:720px){
  .balance-setting{
    grid-template-columns:1fr;
    gap:8px
  }
  .balance-value{text-align:left}
  .custom-preset-row{grid-template-columns:1fr}
  .custom-preset-controls{
    grid-template-columns:1fr 1fr
  }
  .custom-preset-controls input{
    grid-column:1/-1
  }
}


/* =========================================================
   TuneFlow V13 – Smart Discovery Lab
   ========================================================= */

.lab-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.rediscover-card .lab-icon{background:linear-gradient(135deg,#c7813d,#6e4322)}
.mood-card .lab-icon{background:linear-gradient(135deg,#42a69a,#275d75)}
.dna-card .lab-icon{background:linear-gradient(135deg,#b653a9,#5551a8)}

.smart-modal-card{
  width:min(780px,96vw)
}
.smart-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:14px 0
}
.smart-summary>div{
  padding:13px;
  border-radius:12px;
  background:#181818;
  border:1px solid rgba(255,255,255,.05)
}
.smart-summary b,.smart-summary small{display:block}
.smart-summary b{
  font-size:18px;
  letter-spacing:-.03em
}
.smart-summary small{
  color:#7e7e7e;
  font-size:9px;
  margin-top:4px
}
.smart-actions{margin-bottom:12px}
.smart-track-list{
  display:flex;
  flex-direction:column;
  max-height:340px;
  overflow:auto;
  gap:3px
}
.smart-track{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:7px;
  border-radius:9px
}
.smart-track:hover{background:#222}
.smart-track-cover{
  width:40px;
  height:40px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background-size:cover!important;
  background-position:center!important
}
.smart-track-meta{min-width:0}
.smart-track-meta b,.smart-track-meta span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.smart-track-meta b{font-size:11px}
.smart-track-meta span{font-size:9px;color:#777;margin-top:3px}
.smart-track-score{
  color:#9c9c9c;
  font-size:9px;
  text-align:right
}

.mood-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin:14px 0
}
.mood-choice{
  min-height:118px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(180deg,#202020,#171717);
  color:#fff;
  text-align:left
}
.mood-choice:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,#292929,#1c1c1c)
}
.mood-choice>span{
  margin-bottom:auto;
  font-size:21px;
  color:var(--accent)
}
.mood-choice b{font-size:11px}
.mood-choice small{
  color:#787878;
  font-size:8.5px;
  line-height:1.35;
  margin-top:4px
}
.mood-result-card{
  padding:13px;
  border-radius:12px;
  background:#171717;
  border:1px solid rgba(255,255,255,.05)
}
.mood-result-card b,.mood-result-card small{display:block}
.mood-result-card b{font-size:11px}
.mood-result-card small{color:#7e7e7e;font-size:9px;margin-top:4px}

.dna-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:14px 0 18px
}
.dna-stat{
  padding:14px;
  border-radius:13px;
  background:#181818;
  border:1px solid rgba(255,255,255,.05)
}
.dna-stat b,.dna-stat small{display:block}
.dna-stat b{font-size:21px;letter-spacing:-.04em}
.dna-stat small{font-size:9px;color:#7b7b7b;margin-top:4px}
.dna-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}
.dna-columns h3{
  margin:0 0 8px;
  font-size:11px
}
.dna-list{
  min-height:120px;
  border-radius:12px;
  background:#171717;
  padding:7px
}
.dna-list-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border-radius:8px
}
.dna-list-row:hover{background:#212121}
.dna-list-row b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px
}
.dna-list-row span{
  color:#888;
  font-size:9px
}
.dna-insight{
  margin-top:14px;
  padding:13px;
  border-radius:12px;
  background:
    radial-gradient(circle at 100% 0,rgba(181,83,169,.12),transparent 40%),
    #171717;
  color:#aaa;
  font-size:10px;
  line-height:1.55
}

@media(max-width:1100px){
  .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mood-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .lab-grid{grid-template-columns:1fr}
  .smart-summary,.dna-stats{grid-template-columns:repeat(2,1fr)}
  .mood-grid{grid-template-columns:repeat(2,1fr)}
  .dna-columns{grid-template-columns:1fr}
}


/* TuneFlow V13.1 – Playlist Scroll Fix */
.song-table-wrap.playlist-scroll-area{
  height:clamp(250px,calc(100vh - 475px),620px);
  min-height:250px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  border-radius:10px;
  outline:none;
  padding-right:2px;
}
.song-table-wrap.playlist-scroll-area:focus{
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.song-table-wrap.playlist-scroll-area .song-table thead th{
  position:sticky;
  top:0;
  z-index:4;
  background:#171717;
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
.song-table-wrap.playlist-scroll-area::-webkit-scrollbar{
  width:10px;
}
.song-table-wrap.playlist-scroll-area::-webkit-scrollbar-thumb{
  background:#555;
  border-radius:999px;
  border:2px solid #171717;
}

@media(max-width:760px){
  .song-table-wrap.playlist-scroll-area{
    height:52vh;
    min-height:240px;
  }
}


/* TuneFlow V14 – Backup & Datensicherheit */
.backup-section{margin-top:18px;padding-top:17px;border-top:1px solid rgba(255,255,255,.055)}
.backup-status-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 13px;margin:12px 0;border-radius:12px;background:#161616;
  border:1px solid rgba(255,255,255,.05)
}
.backup-status-card b,.backup-status-card small{display:block}
.backup-status-card b{font-size:11px}
.backup-status-card small{margin-top:4px;color:#777;font-size:9.5px;line-height:1.4}
.backup-badge{
  flex:none;display:inline-flex;min-height:25px;align-items:center;padding:0 9px;border-radius:999px;
  background:rgba(120,104,255,.07);color:#80eaa4;border:1px solid rgba(120,104,255,.15);
  font-size:8.5px;font-weight:900
}
.backup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.backup-action-card{
  min-height:86px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;
  padding:11px;border-radius:12px;border:1px solid rgba(255,255,255,.05);
  background:#181818;color:#fff;text-align:left
}
.backup-action-card:hover:not(:disabled){background:#222;border-color:rgba(255,255,255,.1)}
.backup-action-card:disabled{opacity:.45}
.backup-action-card>span{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#262626;
  color:var(--accent);font-size:16px;font-weight:900
}
.backup-action-card b,.backup-action-card small{display:block}
.backup-action-card b{font-size:10.5px}
.backup-action-card small{margin-top:4px;color:#797979;font-size:8.8px;line-height:1.4}
.backup-progress{
  margin-top:10px;padding:10px;border-radius:10px;background:#151515;
  border:1px solid rgba(255,255,255,.05)
}
.backup-progress.hidden{display:none}
.backup-progress-bar{height:5px;border-radius:999px;background:#292929;overflow:hidden}
.backup-progress-bar span{
  display:block;width:0%;height:100%;border-radius:inherit;background:var(--accent);transition:width .16s ease
}
.backup-progress small{display:block;margin-top:7px;color:#858585;font-size:8.8px}
@media(max-width:680px){
  .backup-grid{grid-template-columns:1fr}
  .backup-status-card{align-items:flex-start;flex-direction:column}
}


/* TuneFlow V15.1 – echter Download-Button */
.direct-download-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.modal-download-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:14px;
  text-decoration:none;
  padding:0 18px;
}


/* SONQELO V16.1 – eigenständige Markenoptik */
.sonqelo-logo{
  width:34px;height:34px;border-radius:10px;padding:0;position:relative;
  display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.25),transparent 27%),
             linear-gradient(145deg,#8c7cff,#5546cc);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 5px 18px rgba(80,65,190,.18)
}
.sonqelo-logo .brand-v{
  position:relative;z-index:2;font-size:17px;line-height:1;font-weight:950;
  letter-spacing:-.08em;color:#fff;transform:translateY(-1px)
}
.sonqelo-logo .brand-pulse{
  position:absolute;left:7px;right:7px;bottom:6px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,transparent,#fff 20%,#fff 38%,transparent 39%,transparent 52%,#fff 53%,#fff 80%,transparent);
  opacity:.72
}
.legal-help-card{width:min(620px,94vw)}
.legal-points{display:grid;gap:8px;margin-top:14px}
.legal-points p{
  margin:0;padding:10px 11px;border-radius:10px;background:#171717;
  border:1px solid rgba(255,255,255,.05);color:#929292;font-size:10px;line-height:1.55
}
.legal-points b{color:#e5e5e5}


/* SONQELO V16.2 – eigenständiges S/Ring-Zeichen */
.sonqelo-logo{
  width:34px;height:34px;position:relative;display:grid;place-items:center;overflow:hidden;
  border-radius:11px;
  background:radial-gradient(circle at 72% 22%,rgba(255,255,255,.22),transparent 24%),
             linear-gradient(145deg,#8d7dff,#4e3ec8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 5px 18px rgba(72,57,180,.2)
}
.sonqelo-logo .brand-v,.sonqelo-logo .brand-pulse{display:none}
.sonqelo-ring{
  position:absolute;width:22px;height:22px;border:2px solid rgba(255,255,255,.3);
  border-radius:50%;transform:rotate(-12deg)
}
.sonqelo-ring::after{
  content:"";position:absolute;width:7px;height:7px;right:-3px;bottom:0;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)
}
.sonqelo-wave{
  position:relative;z-index:2;color:#fff;font-size:15px;line-height:1;
  font-weight:950;letter-spacing:-.08em
}


/* SONQELO V18 – EXE-Downloadstatus */
.download-choice-box{
  display:grid;
  gap:10px;
  margin-top:14px
}
.download-choice-box small{
  color:#7f7f7f;
  font-size:9.5px;
  line-height:1.45
}
.download-choice-box .modal-download-button{
  width:max-content;
  max-width:100%
}


/* SONQELO V21.2 – Desktop-App braucht keinen Download-Button */
html.sonqelo-desktop-app #downloadBtn,
html.sonqelo-desktop-app #downloadModal,
html.sonqelo-desktop-app .desktop-disabled {
  display:none !important;
}


/* SONQELO V24 – Desktop Mini-Player */
.desktop-only-control{display:none!important}
html.sonqelo-desktop-app .desktop-only-control{display:inline-grid!important}

.mini-player-toggle{
  width:30px;
  height:30px;
  place-items:center;
  border-radius:9px;
  font-size:15px;
  flex:none
}
.mini-player-toggle:hover{background:#282828}
.mini-player-toggle.active{color:var(--accent);background:rgba(120,104,255,.12)}

html.sonqelo-mini-player,
html.sonqelo-mini-player body{
  overflow:hidden!important
}
html.sonqelo-mini-player #app{
  height:100vh!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:1fr!important;
  padding:0!important
}
html.sonqelo-mini-player .topbar,
html.sonqelo-mini-player .shell{
  display:none!important
}
html.sonqelo-mini-player .player{
  position:static!important;
  inset:auto!important;
  height:100vh!important;
  width:100%!important;
  grid-template-columns:minmax(230px,1fr) minmax(300px,1.25fr)!important;
  gap:14px!important;
  padding:12px 14px!important;
  border:0!important;
  border-radius:0!important;
  background:#080808!important
}
html.sonqelo-mini-player .player-right{
  display:none!important
}
html.sonqelo-mini-player .timeline{
  display:none!important
}
html.sonqelo-mini-player .transport{
  justify-content:center!important;
  min-width:0!important
}
html.sonqelo-mini-player .transport-buttons{
  gap:16px!important
}
html.sonqelo-mini-player .now-playing{
  min-width:0!important;
  padding:8px 10px!important
}
html.sonqelo-mini-player .mini-cover{
  width:50px!important;
  height:50px!important
}
html.sonqelo-mini-player .now-meta small{
  display:none!important
}
html.sonqelo-mini-player .queue-drawer,
html.sonqelo-mini-player .modal{
  display:none!important
}


/* SONQELO V25 – Mini-Player Pro */
.mini-player-pin{
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.88);
  transition:opacity .16s ease, transform .16s ease;
  font-size:12px;
  pointer-events:none
}
.mini-player-pin.active{
  opacity:.72;
  transform:scale(1)
}

html.sonqelo-mini-player .player{
  grid-template-columns:minmax(250px,1.1fr) minmax(300px,1.25fr)!important;
  box-shadow:none!important
}
html.sonqelo-mini-player .player-left{
  min-width:0!important
}
html.sonqelo-mini-player .song-title{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important
}
html.sonqelo-mini-player .mini-player-pin{
  display:inline-flex!important
}


/* SONQELO V29 – Bibliotheksprüfung & Datei neu zuordnen */
.library-health-button{
  margin-top:10px;
  width:100%;
  min-height:34px;
  align-items:center;
  justify-content:center;
  border:1px solid #2b2b2b;
  background:#151515;
  color:#d8d8d8;
  border-radius:9px;
  font:inherit;
  font-size:12px;
  cursor:pointer
}
.library-health-button:hover{
  background:#202020;
  color:#fff
}
.song-row.source-missing{
  opacity:.72
}
.source-missing-badge{
  display:inline-flex;
  width:max-content;
  margin-top:3px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(255,184,76,.25);
  background:rgba(255,184,76,.08);
  color:#ffbf59;
  font-size:10px;
  line-height:1.4
}


/* SONQELO V30 – Sicherer Musik-Download */
.downloads-view{padding:24px 30px 42px;display:block;overflow:auto}
.downloads-view.hidden{display:none}
.download-page-head{margin-bottom:18px}
.download-page-head h2{margin:7px 0 7px;font-size:32px;letter-spacing:-.045em}
.download-page-head p{margin:0;color:#999;max-width:780px;font-size:13px;line-height:1.55}
.download-panel,.download-current-card,.download-history{border:1px solid #262626;background:linear-gradient(180deg,#181818,#111);border-radius:16px;padding:18px;margin-bottom:14px}
.download-url-label{display:block;font-size:12px;font-weight:700;color:#d8d8d8;margin-bottom:8px}
.download-url-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.download-url-row input{min-width:0;height:42px;border:1px solid #303030;background:#0d0d0d;color:#fff;border-radius:10px;padding:0 13px;outline:none}
.download-url-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(120,104,255,.11)}
.download-permission-check{display:flex;gap:9px;align-items:flex-start;margin-top:12px;color:#c9c9c9;font-size:12px;line-height:1.4}
.download-permission-check input{margin-top:2px;accent-color:var(--accent)}
.download-legal-note{display:block;color:#777;margin:7px 0 0 25px;font-size:10.5px}
.download-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.download-current-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.download-current-head h3{margin:6px 0 0;font-size:19px;overflow-wrap:anywhere}
.download-security-badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;border:1px solid #333;background:#202020;color:#bbb;white-space:nowrap}
.download-security-badge.success{background:rgba(65,205,126,.09);border-color:rgba(65,205,126,.25);color:#71dc9e}
.download-security-badge.danger{background:rgba(255,91,91,.09);border-color:rgba(255,91,91,.25);color:#ff8b8b}
.download-security-badge.warning{background:rgba(255,184,76,.09);border-color:rgba(255,184,76,.25);color:#ffbf59}
.download-progress-track{height:8px;background:#292929;border-radius:999px;overflow:hidden;margin-top:18px}
#musicDownloadProgressFill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#a396ff);transition:width .18s ease}
.download-progress-meta{display:flex;justify-content:space-between;color:#777;font-size:10.5px;margin-top:7px}
.download-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px}
.download-detail-grid>div{background:#0d0d0d;border:1px solid #222;border-radius:10px;padding:10px;min-width:0}
.download-detail-grid small,.download-detail-grid b{display:block}.download-detail-grid small{color:#737373;font-size:9.5px;margin-bottom:5px}.download-detail-grid b{color:#ddd;font-size:11.5px;overflow-wrap:anywhere}
.download-hash{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px!important}
.download-history-table-wrap{overflow:auto;border-radius:10px;border:1px solid #222}
.download-history-table{width:100%;border-collapse:collapse;min-width:820px;background:#0e0e0e}
.download-history-table th{font-size:9px;color:#777;text-align:left;padding:9px;border-bottom:1px solid #242424;text-transform:uppercase;letter-spacing:.06em}
.download-history-table td{font-size:11px;color:#aaa;padding:9px;border-bottom:1px solid #1d1d1d;vertical-align:top}.download-history-table td b,.download-history-table td small{display:block}.download-history-table td b{color:#ddd}.download-history-table td small{color:#666;margin-top:3px}
.download-status-pill{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:9.5px;font-weight:800;background:#222;color:#aaa}.download-status-pill.success{color:#71dc9e;background:rgba(65,205,126,.09)}.download-status-pill.danger{color:#ff8b8b;background:rgba(255,91,91,.09)}.download-status-pill.warning{color:#ffbf59;background:rgba(255,184,76,.09)}
.download-history-empty{text-align:center!important;padding:24px!important;color:#666!important}
@media(max-width:1050px){.download-url-row{grid-template-columns:1fr}.download-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* SONQELO V31 – Open licensed music finder */
.open-music-finder{
  margin-bottom:18px;
  padding:20px;
  border:1px solid #262626;
  border-radius:16px;
  background:linear-gradient(145deg,#141414,#0d0d0d)
}
.open-music-finder-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px
}
.open-music-finder-head h3{
  margin:4px 0 6px;
  font-size:20px
}
.open-music-finder-head p{
  margin:0;
  color:var(--muted);
  max-width:760px
}
.open-source-badge{
  flex:none;
  padding:6px 10px;
  border:1px solid rgba(120,104,255,.35);
  border-radius:999px;
  background:rgba(120,104,255,.10);
  color:#b9b1ff;
  font-size:12px;
  font-weight:700
}
.open-music-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px
}
.open-music-search-row input{
  width:100%;
  min-height:44px;
  border:1px solid #303030;
  border-radius:11px;
  background:#090909;
  color:#fff;
  padding:0 14px;
  outline:none
}
.open-music-search-row input:focus{
  border-color:rgba(120,104,255,.72);
  box-shadow:0 0 0 3px rgba(120,104,255,.10)
}
.open-music-search-info{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px
}
.open-music-search-info span{
  padding:4px 8px;
  border-radius:999px;
  background:#1b1b1b;
  color:#bdbdbd;
  font-size:11px
}
.open-music-license-note{
  margin:10px 0 0;
  color:#8d8d8d;
  font-size:11px
}
.open-music-search-status{
  margin:16px 0 10px;
  color:#a8a8a8;
  font-size:13px
}
.open-music-results{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px
}
.open-music-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:14px;
  border:1px solid #292929;
  border-radius:13px;
  background:#101010
}
.open-music-card:hover{
  border-color:#3a3a3a;
  background:#131313
}
.open-music-card-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:750;
  color:#f4f4f4
}
.open-music-card-artist{
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#aaa;
  font-size:12px
}
.open-music-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:11px 0 13px
}
.open-music-card-meta span{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:3px 7px;
  border-radius:7px;
  background:#1d1d1d;
  color:#bcbcbc;
  font-size:10px
}
.open-music-license{
  color:#cfc9ff!important;
  background:rgba(120,104,255,.12)!important
}
.open-music-card-actions{
  margin-top:auto
}
.open-music-card-actions button{
  width:100%
}
.open-music-empty{
  grid-column:1/-1;
  padding:22px;
  border:1px dashed #303030;
  border-radius:12px;
  color:#9c9c9c;
  text-align:center
}
@media (max-width:720px){
  .open-music-search-row{grid-template-columns:1fr}
  .open-music-finder-head{flex-direction:column}
}


/* SONQELO V31.1 – YouTube as metadata reference only */
.youtube-reference-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding:11px 13px;
  border:1px solid rgba(255,82,82,.22);
  border-radius:11px;
  background:rgba(255,82,82,.055)
}
.youtube-reference-banner.hidden{display:none!important}
.youtube-reference-banner div{
  min-width:0;
  display:flex;
  flex-direction:column
}
.youtube-reference-banner b,
.youtube-reference-banner small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.youtube-reference-banner small{
  margin-top:2px;
  color:#a5a5a5
}
.youtube-reference-banner>span{
  flex:none;
  padding:4px 8px;
  border-radius:999px;
  background:#1d1d1d;
  color:#bdbdbd;
  font-size:10px
}
.open-music-card.youtube-match{
  border-color:rgba(120,104,255,.34)
}
.open-music-match-badge{
  color:#cfc9ff!important;
  background:rgba(120,104,255,.12)!important
}


/* SONQELO V32 – automatic legal music discovery */
.auto-discovery-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:13px;
  border:1px solid rgba(120,104,255,.24);
  border-radius:12px;
  background:rgba(120,104,255,.055)
}
.auto-discovery-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px
}
.auto-discovery-copy b{color:#f1efff}
.auto-discovery-copy small{
  color:#9f9f9f;
  line-height:1.4
}
.auto-discovery-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  color:#d8d8d8;
  font-size:12px;
  cursor:pointer
}
.auto-discovery-toggle input{
  width:17px;
  height:17px;
  accent-color:var(--accent)
}
.auto-discovery-status{
  margin:9px 0 0;
  color:#9d9d9d;
  font-size:11px
}
@media (max-width:820px){
  .auto-discovery-panel{grid-template-columns:1fr}
}


/* SONQELO V32.1 – Sing-along discovery focus */
.auto-discovery-toggle span{
  font-weight:700
}


/* ============================================================
   SONQELO V32.3 — NEXUS FUTURE UI
   Futuristic glass / aurora / neon interface override
   ============================================================ */

:root{
  --bg:#05060b;
  --panel:rgba(12,15,26,.76);
  --panel-2:rgba(17,21,36,.78);
  --panel-3:rgba(24,29,49,.82);
  --hover:rgba(255,255,255,.08);
  --text:#f7f9ff;
  --muted:#a7afc8;
  --muted2:#69728d;
  --line:rgba(176,193,255,.13);
  --accent:#8b7cff;
  --accent-hover:#a99fff;
  --nexus-cyan:#45e7ff;
  --nexus-blue:#5b8cff;
  --nexus-violet:#9b6cff;
  --nexus-pink:#ff63d8;
  --nexus-green:#70ffd1;
  --glass:rgba(11,14,25,.68);
  --glass-strong:rgba(15,19,34,.86);
  --glow:0 0 34px rgba(91,140,255,.18);
  --shadow:0 24px 80px rgba(0,0,0,.46);
}

html,body{
  background:
    radial-gradient(circle at 18% 8%,rgba(69,231,255,.09),transparent 28%),
    radial-gradient(circle at 82% 12%,rgba(155,108,255,.11),transparent 32%),
    radial-gradient(circle at 65% 88%,rgba(255,99,216,.055),transparent 35%),
    #05060b;
  color:var(--text);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.24;
  background-image:
    linear-gradient(rgba(120,150,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,150,255,.04) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
  animation:nexusGridDrift 22s linear infinite;
}

body:after{
  content:"";
  position:fixed;
  width:46vw;
  height:46vw;
  border-radius:50%;
  left:40vw;
  top:-34vw;
  pointer-events:none;
  filter:blur(80px);
  opacity:.22;
  background:conic-gradient(from 20deg,var(--nexus-cyan),var(--nexus-violet),var(--nexus-pink),var(--nexus-cyan));
  animation:nexusAurora 16s ease-in-out infinite alternate;
}

#app{
  position:relative;
  z-index:1;
  background:transparent;
  grid-template-rows:72px minmax(0,1fr) 104px;
}

*{
  scrollbar-color:rgba(111,139,218,.55) transparent;
}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(69,231,255,.42),rgba(139,124,255,.55));
  border:2px solid transparent;
  background-clip:padding-box;
}

/* top command deck */
.topbar{
  height:72px;
  margin:8px 10px 0;
  padding:9px 13px;
  border:1px solid rgba(178,195,255,.12);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(11,15,27,.86),rgba(17,15,31,.68));
  box-shadow:0 18px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}

.brand{
  min-width:176px;
  gap:10px;
  position:relative;
}
.brand-logo{
  width:39px;
  height:39px;
  border-radius:14px;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),transparent 17%),
    linear-gradient(135deg,var(--nexus-cyan),var(--nexus-violet) 58%,var(--nexus-pink));
  box-shadow:0 0 28px rgba(69,231,255,.25),0 0 34px rgba(155,108,255,.18);
  transform:rotate(-4deg);
}
.sonqelo-ring{
  position:absolute;
  inset:6px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 0 12px rgba(255,255,255,.14);
}
.sonqelo-wave{
  position:relative;
  z-index:2;
  font-size:17px!important;
  font-weight:950;
  color:#071019!important;
  text-shadow:0 1px rgba(255,255,255,.45);
}
.brand-name{
  font-size:18px;
  letter-spacing:.08em;
  font-weight:900;
  background:linear-gradient(90deg,#fff 10%,#b8f7ff 48%,#cebfff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand-era{
  margin-left:-4px;
  align-self:flex-end;
  margin-bottom:8px;
  padding:3px 6px;
  border-radius:999px;
  font-size:8px;
  line-height:1;
  letter-spacing:.16em;
  font-weight:900;
  color:var(--nexus-cyan);
  border:1px solid rgba(69,231,255,.25);
  background:rgba(69,231,255,.08);
}

.nexus-status{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(112,255,209,.12);
  background:rgba(9,22,23,.54);
  color:#9eb5bb;
  font-size:8px;
  letter-spacing:.12em;
  font-weight:800;
}
.nexus-status b{color:var(--nexus-green);font-size:8px}
.nexus-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--nexus-green);
  box-shadow:0 0 10px var(--nexus-green);
  animation:nexusPulse 1.8s ease-in-out infinite;
}

.round-button{
  width:36px;height:36px;
  border:1px solid rgba(180,198,255,.1);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.round-button:hover:not(:disabled){
  background:rgba(92,135,255,.13);
  border-color:rgba(69,231,255,.24);
  box-shadow:0 0 22px rgba(69,231,255,.1);
}

.search{max-width:560px}
.search input{
  height:49px;
  border-radius:17px;
  border:1px solid rgba(176,193,255,.1);
  background:rgba(5,8,17,.6);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(16px);
}
.search input:hover{background:rgba(10,14,26,.78);border-color:rgba(91,140,255,.2)}
.search input:focus{
  background:rgba(8,12,23,.88);
  box-shadow:0 0 0 1px rgba(69,231,255,.46),0 0 28px rgba(69,231,255,.09),inset 0 1px rgba(255,255,255,.05);
}
.search-glyph{color:var(--nexus-cyan);filter:drop-shadow(0 0 8px rgba(69,231,255,.38))}
.shortcut{
  background:rgba(139,124,255,.1);
  border-color:rgba(139,124,255,.22);
  color:#bdb4ff;
}
.top-link{font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.import-top{
  border:1px solid rgba(69,231,255,.25);
  color:#071017;
  background:linear-gradient(100deg,#65edff,#9f8cff 78%);
  box-shadow:0 0 28px rgba(69,231,255,.12);
}
.import-top:hover{
  background:linear-gradient(100deg,#84f2ff,#b0a4ff 78%);
  box-shadow:0 0 34px rgba(69,231,255,.18);
}
.profile-button{
  width:40px;height:40px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,#202945,#7d59d8);
  box-shadow:0 0 24px rgba(155,108,255,.14);
}

/* shell / glass surfaces */
.shell{
  grid-template-columns:320px minmax(0,1fr);
  gap:10px;
  padding:10px;
}
.sidebar-card,.content{
  border:1px solid rgba(176,193,255,.11);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(18,22,38,.78),rgba(8,11,20,.72));
  box-shadow:0 22px 80px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}
.sidebar-card{overflow:hidden}
.library-shell{padding:12px}
.library-header{padding:9px 8px 14px}
.library-header h2{font-size:17px;letter-spacing:.01em}
.library-header span{color:#8290ad}
.soft-button{
  border:1px solid rgba(139,124,255,.16);
  background:rgba(139,124,255,.08);
  color:#dcd7ff;
}
.soft-button:hover{
  background:rgba(139,124,255,.15);
  box-shadow:0 0 18px rgba(139,124,255,.1);
}

.import-card{
  border:1px solid rgba(69,231,255,.09);
  border-radius:17px;
  background:
    radial-gradient(circle at 0 0,rgba(69,231,255,.09),transparent 43%),
    linear-gradient(145deg,rgba(28,33,52,.72),rgba(15,18,31,.72));
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.import-card-icon{
  border-radius:12px;
  background:linear-gradient(135deg,var(--nexus-cyan),var(--nexus-violet));
  color:#071017;
  box-shadow:0 0 20px rgba(69,231,255,.15);
}

.nav-list{gap:5px}
.nav-item{
  position:relative;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:13px;
  transition:.2s ease;
}
.nav-item:hover{
  background:rgba(255,255,255,.045);
  border-color:rgba(176,193,255,.08);
  transform:translateX(2px);
}
.nav-item.active{
  background:linear-gradient(90deg,rgba(69,231,255,.10),rgba(139,124,255,.08));
  border-color:rgba(69,231,255,.12);
  box-shadow:inset 3px 0 0 rgba(69,231,255,.75);
}
.nav-icon{
  width:42px;height:42px;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(98,121,190,.26),rgba(49,59,95,.32));
  border:1px solid rgba(184,200,255,.08);
  color:#dfe5ff;
  box-shadow:inset 0 1px rgba(255,255,255,.045);
}
.nav-item.active .nav-icon{
  color:var(--nexus-cyan);
  background:linear-gradient(145deg,rgba(69,231,255,.12),rgba(139,124,255,.15));
  box-shadow:0 0 18px rgba(69,231,255,.08);
}

/* hero */
.content{position:relative;isolation:isolate}
.content-header{
  position:relative;
  overflow:hidden;
  margin:10px 10px 0;
  padding:28px 30px;
  border-radius:20px;
  border:1px solid rgba(157,180,255,.12);
  background:
    radial-gradient(circle at 12% 20%,rgba(69,231,255,.13),transparent 30%),
    radial-gradient(circle at 85% 10%,rgba(155,108,255,.16),transparent 31%),
    linear-gradient(135deg,rgba(16,22,39,.94),rgba(14,12,29,.9));
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 28px 80px rgba(0,0,0,.22);
}
.content-header:before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  right:-130px;
  top:-180px;
  border-radius:50%;
  border:1px solid rgba(69,231,255,.13);
  box-shadow:
    0 0 0 38px rgba(139,124,255,.025),
    0 0 0 78px rgba(69,231,255,.018);
  animation:nexusOrbit 15s linear infinite;
}
.content-header:after{
  content:"";
  position:absolute;
  width:180px;
  height:2px;
  right:35px;
  bottom:25px;
  opacity:.5;
  background:linear-gradient(90deg,transparent,var(--nexus-cyan),var(--nexus-violet),transparent);
  box-shadow:0 0 14px rgba(69,231,255,.38);
}
.hero-main,.hero-sidecards{position:relative;z-index:2}
.hero-copy .eyebrow{
  color:var(--nexus-cyan);
  letter-spacing:.18em;
  text-shadow:0 0 14px rgba(69,231,255,.22);
}
.hero-copy h1{
  margin-top:7px;
  font-size:clamp(30px,3.2vw,50px);
  letter-spacing:-.055em;
  line-height:.98;
  background:linear-gradient(105deg,#fff 10%,#c7faff 44%,#c9baff 82%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 10px 30px rgba(139,124,255,.08));
}
.hero-copy p{max-width:720px;color:#aeb8d1;line-height:1.65}
.chip-button{
  border:1px solid rgba(178,195,255,.10);
  background:rgba(255,255,255,.035);
  color:#bec7df;
  backdrop-filter:blur(12px);
}
.chip-button:hover{border-color:rgba(69,231,255,.2);color:#fff}
.chip-button.active-chip{
  color:#071017;
  background:linear-gradient(90deg,var(--nexus-cyan),#a68cff);
  border-color:transparent;
  box-shadow:0 0 22px rgba(69,231,255,.12);
}

.hero-sidecard,.greeting-card,.lab-card,.entity-card,.snapshot-card,.backup-action-card{
  border:1px solid rgba(179,197,255,.10)!important;
  background:
    linear-gradient(145deg,rgba(30,36,57,.58),rgba(13,16,28,.62))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 18px 44px rgba(0,0,0,.16);
  backdrop-filter:blur(18px);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
.hero-sidecard:hover,.greeting-card:hover,.lab-card:hover,.entity-card:hover,.snapshot-card:hover,.backup-action-card:hover{
  transform:translateY(-3px);
  border-color:rgba(69,231,255,.22)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.24),0 0 28px rgba(69,231,255,.06)!important;
}
.sidecard-badge,.eyebrow{
  color:#93a3c8;
  letter-spacing:.13em;
}
.premium-card{
  background:
    radial-gradient(circle at 10% 0,rgba(69,231,255,.11),transparent 48%),
    linear-gradient(145deg,rgba(25,31,52,.72),rgba(13,16,29,.7))!important;
}
.support-card{
  background:
    radial-gradient(circle at 100% 0,rgba(255,99,216,.10),transparent 48%),
    linear-gradient(145deg,rgba(28,26,50,.72),rgba(13,16,29,.7))!important;
}

/* primary controls */
.accent-button,.light-button{
  border:1px solid rgba(69,231,255,.2);
  background:linear-gradient(100deg,#61eaff,#9e8cff 72%);
  color:#071017;
  box-shadow:0 8px 24px rgba(69,231,255,.08);
}
.accent-button:hover,.light-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 12px 30px rgba(69,231,255,.15);
}
.outline-button,.dark-button,.tiny-button{
  border-color:rgba(160,181,255,.15);
  background:rgba(255,255,255,.035);
  color:#e7ebff;
}
.outline-button:hover,.dark-button:hover,.tiny-button:hover{
  border-color:rgba(69,231,255,.24);
  background:rgba(69,231,255,.07);
}

/* downloads / discovery cockpit */
.downloads-view{
  padding-bottom:35px;
}
.download-page-head{
  position:relative;
  margin:12px 12px 16px;
  padding:25px 27px;
  border-radius:19px;
  border:1px solid rgba(69,231,255,.10);
  background:
    linear-gradient(120deg,rgba(69,231,255,.07),transparent 34%),
    linear-gradient(150deg,rgba(22,27,47,.8),rgba(11,14,25,.78));
}
.download-page-head h2{
  font-size:30px;
  margin:5px 0 8px;
  letter-spacing:-.035em;
}
.open-music-finder,.download-card,.download-current,.download-history-card{
  border-radius:19px!important;
  border:1px solid rgba(171,190,255,.11)!important;
  background:
    linear-gradient(145deg,rgba(23,28,47,.75),rgba(10,13,23,.72))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 22px 60px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(20px);
}
.open-music-finder{
  position:relative;
  overflow:hidden;
}
.open-music-finder:before{
  content:"DISCOVERY MATRIX";
  position:absolute;
  right:18px;
  top:13px;
  color:rgba(69,231,255,.13);
  font-size:9px;
  font-weight:900;
  letter-spacing:.25em;
}
.open-source-badge{
  border:1px solid rgba(112,255,209,.18)!important;
  color:var(--nexus-green)!important;
  background:rgba(112,255,209,.06)!important;
  box-shadow:0 0 18px rgba(112,255,209,.06);
}
.open-music-search-row input,.download-url-row input,#playlistNameInput,.settings-section input,.settings-section select{
  border:1px solid rgba(170,190,255,.12)!important;
  background:rgba(5,8,16,.62)!important;
  color:#f7f9ff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.03)!important;
}
.open-music-search-row input:focus,.download-url-row input:focus,#playlistNameInput:focus,.settings-section input:focus,.settings-section select:focus{
  outline:none!important;
  border-color:rgba(69,231,255,.45)!important;
  box-shadow:0 0 0 1px rgba(69,231,255,.22),0 0 24px rgba(69,231,255,.07)!important;
}
.auto-discovery-panel{
  position:relative;
  border:1px solid rgba(139,124,255,.16)!important;
  background:
    radial-gradient(circle at 0 50%,rgba(69,231,255,.08),transparent 42%),
    linear-gradient(120deg,rgba(20,25,44,.75),rgba(24,16,46,.64))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.auto-discovery-panel:after{
  content:"NEXUS AUTO DISCOVERY";
  position:absolute;
  top:10px;
  right:12px;
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(159,145,255,.48);
  font-weight:900;
}
.auto-discovery-toggle{
  border:1px solid rgba(112,255,209,.15)!important;
  background:rgba(112,255,209,.055)!important;
}
.nexus-download-button{
  position:relative;
  overflow:hidden;
  border-color:rgba(69,231,255,.24)!important;
  background:linear-gradient(90deg,rgba(69,231,255,.12),rgba(139,124,255,.13))!important;
  box-shadow:0 0 24px rgba(69,231,255,.07);
}
.nexus-download-button span{
  color:var(--nexus-cyan);
  font-weight:950;
  letter-spacing:.11em;
}
.nexus-download-button:before{
  content:"";
  position:absolute;
  inset:-2px auto -2px -35%;
  width:28%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:nexusButtonSweep 3.6s ease-in-out infinite;
}

/* tables / rows */
.song-table,.download-history-table{
  border-collapse:separate!important;
  border-spacing:0 5px!important;
}
.song-row,.song-table tbody tr,.download-history-table tbody tr{
  transition:.16s ease;
}
.song-table tbody tr td,.download-history-table tbody tr td{
  background:rgba(255,255,255,.018);
  border-top:1px solid rgba(255,255,255,.025);
  border-bottom:1px solid rgba(255,255,255,.025);
}
.song-table tbody tr td:first-child,.download-history-table tbody tr td:first-child{
  border-left:1px solid rgba(255,255,255,.025);
  border-radius:11px 0 0 11px;
}
.song-table tbody tr td:last-child,.download-history-table tbody tr td:last-child{
  border-right:1px solid rgba(255,255,255,.025);
  border-radius:0 11px 11px 0;
}
.song-table tbody tr:hover td,.download-history-table tbody tr:hover td{
  background:rgba(77,111,194,.085);
  border-color:rgba(69,231,255,.07);
}

/* player: floating holographic transport dock */
.player{
  height:92px;
  margin:0 10px 10px;
  border-radius:22px;
  border:1px solid rgba(174,194,255,.13);
  background:
    radial-gradient(circle at 50% 130%,rgba(69,231,255,.09),transparent 42%),
    linear-gradient(135deg,rgba(12,16,29,.94),rgba(17,14,31,.92));
  box-shadow:0 20px 70px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.05),0 0 35px rgba(91,140,255,.05);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
}
.mini-cover{
  border-radius:15px!important;
  border:1px solid rgba(69,231,255,.14)!important;
  box-shadow:0 0 25px rgba(69,231,255,.08)!important;
  overflow:hidden;
}
.now-meta strong{letter-spacing:-.01em}
.player-quality{
  color:var(--nexus-cyan)!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:8px!important;
}
.transport-buttons{gap:10px}
.transport-icon{
  border-radius:11px!important;
  color:#aab5d1!important;
}
.transport-icon:hover{color:var(--nexus-cyan)!important;background:rgba(69,231,255,.07)!important}
.main-play{
  width:45px!important;
  height:45px!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#64ecff,#9a82ff)!important;
  box-shadow:0 0 28px rgba(69,231,255,.16),0 0 35px rgba(139,124,255,.10)!important;
}
.main-play:hover{transform:translateY(-1px) scale(1.04)!important}
.timeline input[type=range],.volume-range{
  accent-color:var(--nexus-cyan);
}
input[type=range]::-webkit-slider-thumb{
  box-shadow:0 0 10px rgba(69,231,255,.45);
}

/* queue / modals */
.queue-drawer,.modal-card{
  border:1px solid rgba(177,196,255,.13)!important;
  background:
    linear-gradient(145deg,rgba(18,23,40,.94),rgba(10,13,24,.94))!important;
  box-shadow:0 30px 100px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(28px);
}
.modal{
  background:rgba(2,4,10,.66)!important;
  backdrop-filter:blur(11px);
}
.modal-close{
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.04)!important;
}

/* subtle future labels */
.section-heading h2,.lab-heading h2{
  letter-spacing:-.035em;
}
.section-heading .eyebrow,.lab-heading .eyebrow{
  color:#7e8eaf;
}
.library-health-button{
  border-color:rgba(112,255,209,.12)!important;
  background:rgba(112,255,209,.045)!important;
}

/* animations */
@keyframes nexusGridDrift{
  from{transform:translateY(0)}
  to{transform:translateY(42px)}
}
@keyframes nexusAurora{
  0%{transform:translate3d(-8%,0,0) rotate(0deg) scale(.9)}
  100%{transform:translate3d(10%,8%,0) rotate(18deg) scale(1.08)}
}
@keyframes nexusPulse{
  0%,100%{opacity:.45;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.16)}
}
@keyframes nexusOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes nexusButtonSweep{
  0%,58%{left:-35%}
  78%,100%{left:130%}
}

/* responsive future UI */
@media (max-width:1180px){
  .nexus-status{display:none}
  .top-links{display:none}
  .shell{grid-template-columns:290px minmax(0,1fr)}
}
@media (max-width:900px){
  .brand-era{display:none}
  .shell{grid-template-columns:240px minmax(0,1fr)}
  .content-header{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  body:before,body:after,.nexus-status-dot,.content-header:before,.nexus-download-button:before{
    animation:none!important;
  }
  *{scroll-behavior:auto!important}
}


/* SONQELO V33 — Jamendo Fast Discovery */
.open-source-badge::after{
  content:" · JAMENDO PRIMARY";
  color:var(--nexus-cyan);
  font-weight:900;
  letter-spacing:.08em;
}


/* ============================================================
   SONQELO V34 — Audius Stream + YouTube Fallback
   ============================================================ */
.audius-stream-panel{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(69,231,255,.13);
  background:
    radial-gradient(circle at 0 0,rgba(69,231,255,.08),transparent 40%),
    linear-gradient(145deg,rgba(16,24,40,.72),rgba(11,14,25,.72));
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 20px 55px rgba(0,0,0,.14);
}
.audius-stream-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.audius-stream-head b{
  display:block;
  margin-top:3px;
  font-size:16px;
}
.audius-live-badge{
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(112,255,209,.18);
  color:var(--nexus-green);
  background:rgba(112,255,209,.06);
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
  box-shadow:0 0 18px rgba(112,255,209,.06);
}
.audius-card{
  border-color:rgba(69,231,255,.13)!important;
}
.audius-card .accent-button{
  min-width:130px;
}
.youtube-reference-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.youtube-reference-actions span{
  font-size:9px;
  color:#9da9c3;
}
.youtube-fallback-card{
  width:min(920px,92vw)!important;
}
.youtube-embed-shell{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:17px;
  border:1px solid rgba(69,231,255,.13);
  background:#020308;
  box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 30px rgba(69,231,255,.05);
}
.youtube-embed-shell iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}


/* ============================================================
   SONQELO V34.1 — iPHONE PRIVATE TEST
   Mobile-first layout for iPhone / iOS safe areas
   ============================================================ */

.ios-private-note{
  display:none;
}

html.sonqelo-ios-app,
html.sonqelo-ios-runtime{
  background:#05060b;
  overscroll-behavior:none;
}

html.sonqelo-ios-app body,
html.sonqelo-ios-runtime body{
  min-height:100dvh;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  padding:0;
}

html.sonqelo-ios-app input,
html.sonqelo-ios-app textarea,
html.sonqelo-ios-runtime input,
html.sonqelo-ios-runtime textarea{
  -webkit-user-select:text;
  user-select:text;
}

html.sonqelo-ios-app .ios-private-note,
html.sonqelo-ios-runtime .ios-private-note{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:0 0 12px;
  padding:11px 13px;
  border:1px solid rgba(112,255,209,.14);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(112,255,209,.06),rgba(69,231,255,.045));
  color:#dffef3;
}
html.sonqelo-ios-app .ios-private-note b,
html.sonqelo-ios-runtime .ios-private-note b{
  color:var(--nexus-green);
  font-size:11px;
  letter-spacing:.04em;
}
html.sonqelo-ios-app .ios-private-note span,
html.sonqelo-ios-runtime .ios-private-note span{
  color:#8ea0b9;
  font-size:10px;
}

@media (max-width: 820px){
  html.sonqelo-ios-app #app,
  html.sonqelo-ios-runtime #app{
    min-height:100dvh;
    display:block;
    padding-top:calc(68px + env(safe-area-inset-top));
    padding-bottom:calc(176px + env(safe-area-inset-bottom));
  }

  html.sonqelo-ios-app .topbar,
  html.sonqelo-ios-runtime .topbar{
    position:fixed;
    z-index:120;
    top:env(safe-area-inset-top);
    left:8px;
    right:8px;
    height:58px;
    margin:0;
    padding:8px 10px;
    border-radius:18px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
  }

  html.sonqelo-ios-app .brand,
  html.sonqelo-ios-runtime .brand{
    min-width:0;
    width:auto;
    padding-right:2px;
  }

  html.sonqelo-ios-app .brand-logo,
  html.sonqelo-ios-runtime .brand-logo{
    width:34px;
    height:34px;
    border-radius:12px;
  }

  html.sonqelo-ios-app .brand-name,
  html.sonqelo-ios-app .brand-era:not(.ios-era),
  html.sonqelo-ios-app .nexus-status,
  html.sonqelo-ios-app .nav-cluster,
  html.sonqelo-ios-app .top-links,
  html.sonqelo-ios-app .shortcut,
  html.sonqelo-ios-runtime .brand-name,
  html.sonqelo-ios-runtime .brand-era:not(.ios-era),
  html.sonqelo-ios-runtime .nexus-status,
  html.sonqelo-ios-runtime .nav-cluster,
  html.sonqelo-ios-runtime .top-links,
  html.sonqelo-ios-runtime .shortcut{
    display:none!important;
  }

  html.sonqelo-ios-app .ios-era,
  html.sonqelo-ios-runtime .ios-era{
    display:inline-flex!important;
    align-self:center;
    margin:0;
    font-size:7px;
  }

  html.sonqelo-ios-app .search,
  html.sonqelo-ios-runtime .search{
    width:100%;
    max-width:none;
  }

  html.sonqelo-ios-app .search input,
  html.sonqelo-ios-runtime .search input{
    height:42px;
    border-radius:14px;
    padding-left:36px;
    padding-right:28px;
    font-size:14px;
  }

  html.sonqelo-ios-app .top-actions,
  html.sonqelo-ios-runtime .top-actions{
    gap:6px;
  }

  html.sonqelo-ios-app .import-top,
  html.sonqelo-ios-runtime .import-top{
    min-width:0;
    height:38px;
    padding:0 11px;
    font-size:9px;
    letter-spacing:.03em;
  }

  html.sonqelo-ios-app .profile-button,
  html.sonqelo-ios-runtime .profile-button{
    width:38px;
    height:38px;
  }

  html.sonqelo-ios-app .shell,
  html.sonqelo-ios-runtime .shell{
    display:block;
    padding:0 8px;
  }

  html.sonqelo-ios-app .sidebar,
  html.sonqelo-ios-runtime .sidebar{
    position:fixed;
    z-index:115;
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    height:66px;
  }

  html.sonqelo-ios-app .sidebar-card,
  html.sonqelo-ios-runtime .sidebar-card{
    height:66px;
    border-radius:20px;
    padding:6px 7px;
    overflow:hidden;
    background:linear-gradient(145deg,rgba(16,20,34,.94),rgba(9,12,22,.94));
    backdrop-filter:blur(28px) saturate(150%);
    -webkit-backdrop-filter:blur(28px) saturate(150%);
  }

  html.sonqelo-ios-app .library-header,
  html.sonqelo-ios-app .import-card,
  html.sonqelo-ios-app .playlist-section,
  html.sonqelo-ios-app .sidebar-footer,
  html.sonqelo-ios-runtime .library-header,
  html.sonqelo-ios-runtime .import-card,
  html.sonqelo-ios-runtime .playlist-section,
  html.sonqelo-ios-runtime .sidebar-footer{
    display:none!important;
  }

  html.sonqelo-ios-app .nav-list,
  html.sonqelo-ios-runtime .nav-list{
    height:100%;
    display:flex;
    gap:4px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    padding:0;
    align-items:stretch;
  }
  html.sonqelo-ios-app .nav-list::-webkit-scrollbar,
  html.sonqelo-ios-runtime .nav-list::-webkit-scrollbar{display:none}

  html.sonqelo-ios-app .nav-item,
  html.sonqelo-ios-runtime .nav-item{
    flex:0 0 68px;
    min-width:68px;
    height:54px;
    padding:4px 3px;
    border-radius:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    transform:none!important;
  }

  html.sonqelo-ios-app .nav-item .nav-icon,
  html.sonqelo-ios-runtime .nav-item .nav-icon{
    width:27px;
    height:27px;
    min-width:27px;
    border-radius:9px;
    font-size:13px;
  }

  html.sonqelo-ios-app .nav-item span:last-child,
  html.sonqelo-ios-runtime .nav-item span:last-child{
    display:block;
    min-width:0;
    width:100%;
    text-align:center;
  }

  html.sonqelo-ios-app .nav-item b,
  html.sonqelo-ios-runtime .nav-item b{
    display:block;
    font-size:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  html.sonqelo-ios-app .nav-item small,
  html.sonqelo-ios-runtime .nav-item small{
    display:none;
  }

  html.sonqelo-ios-app .content,
  html.sonqelo-ios-runtime .content{
    min-height:calc(100dvh - 250px);
    margin:0;
    border-radius:20px;
    overflow:visible;
  }

  html.sonqelo-ios-app .content-header,
  html.sonqelo-ios-runtime .content-header{
    margin:0;
    padding:20px 16px;
    border-radius:19px;
  }

  html.sonqelo-ios-app .hero-main,
  html.sonqelo-ios-runtime .hero-main{
    display:block;
  }

  html.sonqelo-ios-app .hero-copy h1,
  html.sonqelo-ios-runtime .hero-copy h1{
    font-size:34px;
    line-height:1.02;
  }

  html.sonqelo-ios-app .hero-copy p,
  html.sonqelo-ios-runtime .hero-copy p{
    font-size:12px;
    line-height:1.55;
  }

  html.sonqelo-ios-app .hero-sidecards,
  html.sonqelo-ios-runtime .hero-sidecards{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:14px;
  }

  html.sonqelo-ios-app .section,
  html.sonqelo-ios-runtime .section{
    padding-left:12px;
    padding-right:12px;
  }

  html.sonqelo-ios-app .greeting-grid,
  html.sonqelo-ios-app .lab-grid,
  html.sonqelo-ios-app .entity-grid,
  html.sonqelo-ios-runtime .greeting-grid,
  html.sonqelo-ios-runtime .lab-grid,
  html.sonqelo-ios-runtime .entity-grid{
    grid-template-columns:1fr!important;
  }

  html.sonqelo-ios-app .downloads-view,
  html.sonqelo-ios-runtime .downloads-view{
    padding:0 0 12px;
  }

  html.sonqelo-ios-app .download-page-head,
  html.sonqelo-ios-runtime .download-page-head{
    margin:0 0 10px;
    padding:18px 16px;
  }

  html.sonqelo-ios-app .open-music-finder,
  html.sonqelo-ios-app .download-card,
  html.sonqelo-ios-app .download-current,
  html.sonqelo-ios-app .download-history-card,
  html.sonqelo-ios-runtime .open-music-finder,
  html.sonqelo-ios-runtime .download-card,
  html.sonqelo-ios-runtime .download-current,
  html.sonqelo-ios-runtime .download-history-card{
    padding:13px!important;
    border-radius:17px!important;
  }

  html.sonqelo-ios-app .open-music-search-row,
  html.sonqelo-ios-app .download-url-row,
  html.sonqelo-ios-runtime .open-music-search-row,
  html.sonqelo-ios-runtime .download-url-row{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  html.sonqelo-ios-app .audius-stream-head,
  html.sonqelo-ios-runtime .audius-stream-head{
    align-items:flex-start;
  }

  html.sonqelo-ios-app .open-music-results,
  html.sonqelo-ios-runtime .open-music-results{
    grid-template-columns:1fr!important;
  }

  html.sonqelo-ios-app .open-music-card-actions,
  html.sonqelo-ios-runtime .open-music-card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  html.sonqelo-ios-app .open-music-card-actions button,
  html.sonqelo-ios-runtime .open-music-card-actions button{
    min-height:42px;
    font-size:10px;
  }

  html.sonqelo-ios-app .player,
  html.sonqelo-ios-runtime .player{
    position:fixed;
    z-index:116;
    left:8px;
    right:8px;
    bottom:calc(82px + env(safe-area-inset-bottom));
    height:78px;
    margin:0;
    padding:8px 10px;
    border-radius:20px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:1fr 18px;
    gap:2px 8px;
  }

  html.sonqelo-ios-app .player-left,
  html.sonqelo-ios-runtime .player-left{
    min-width:0;
  }

  html.sonqelo-ios-app .mini-cover,
  html.sonqelo-ios-runtime .mini-cover{
    width:48px!important;
    height:48px!important;
    min-width:48px;
    border-radius:13px!important;
  }

  html.sonqelo-ios-app .now-meta,
  html.sonqelo-ios-runtime .now-meta{
    min-width:0;
  }

  html.sonqelo-ios-app .now-meta strong,
  html.sonqelo-ios-runtime .now-meta strong{
    max-width:38vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
  }

  html.sonqelo-ios-app .player-center,
  html.sonqelo-ios-runtime .player-center{
    grid-column:2;
    grid-row:1;
    width:auto;
  }

  html.sonqelo-ios-app .transport-buttons,
  html.sonqelo-ios-runtime .transport-buttons{
    gap:4px;
  }

  html.sonqelo-ios-app .transport-icon:not(.main-play),
  html.sonqelo-ios-runtime .transport-icon:not(.main-play){
    display:none;
  }

  html.sonqelo-ios-app .main-play,
  html.sonqelo-ios-runtime .main-play{
    width:46px!important;
    height:46px!important;
  }

  html.sonqelo-ios-app .timeline,
  html.sonqelo-ios-runtime .timeline{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
  }

  html.sonqelo-ios-app .player-right,
  html.sonqelo-ios-runtime .player-right{
    display:none!important;
  }

  html.sonqelo-ios-app .modal-card,
  html.sonqelo-ios-runtime .modal-card{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin-top:env(safe-area-inset-top);
    border-radius:22px!important;
  }

  html.sonqelo-ios-app .youtube-fallback-card,
  html.sonqelo-ios-runtime .youtube-fallback-card{
    padding:15px!important;
  }

  html.sonqelo-ios-app .song-table,
  html.sonqelo-ios-app .download-history-table,
  html.sonqelo-ios-runtime .song-table,
  html.sonqelo-ios-runtime .download-history-table{
    font-size:10px;
  }
}


/* ============================================================
   SONQELO V35 — STREAMLINE UX
   Familiar modern music-player patterns, original SONQELO identity.
   ============================================================ */

:root{
  --stream-radius:16px;
  --stream-card:#101522;
  --stream-card-hover:#171e2f;
  --stream-line:rgba(192,205,255,.10);
}

/* slightly calmer, premium streaming-app density */
.topbar{
  border-radius:18px;
}
.sidebar-card,.content{
  border-radius:20px;
}
.content{
  overflow:hidden;
}
.content-header{
  margin:8px 8px 0;
  border-radius:18px;
  min-height:220px;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.72fr);
  gap:20px;
  align-items:end;
}
.hero-main{
  align-self:end;
}
.hero-copy h1{
  max-width:780px;
}
.hero-sidecards{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.hero-sidecard{
  min-height:105px;
  text-align:left;
}
.hero-sidecard b{
  font-size:15px;
  line-height:1.2;
}

.dashboard{
  padding:0 14px 28px;
}

.quick-grid{
  margin-top:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.quick-card{
  min-height:72px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.045);
  background:rgba(255,255,255,.035);
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.quick-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.07);
  border-color:rgba(69,231,255,.10);
}
.quick-cover{
  border-radius:11px;
}

.stream-shelf-section{
  margin-top:26px;
}
.stream-shelf-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
}
.stream-shelf-heading h2{
  margin:3px 0 3px;
  font-size:22px;
  letter-spacing:-.035em;
}
.stream-shelf-heading p{
  margin:0;
  color:#8994ad;
  font-size:11px;
}
.shelf-link-button{
  flex:none;
  border:0;
  background:transparent;
  color:#aab5ce;
  font-weight:800;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
}
.shelf-link-button:hover{
  color:var(--nexus-cyan);
}

.stream-card-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,172px);
  gap:11px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 10px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.stream-track-card{
  scroll-snap-align:start;
  min-width:0;
  padding:10px;
  border:1px solid rgba(255,255,255,.04);
  border-radius:var(--stream-radius);
  background:linear-gradient(145deg,rgba(18,23,38,.76),rgba(10,13,23,.76));
  color:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.stream-track-card:hover{
  transform:translateY(-4px);
  background:linear-gradient(145deg,rgba(26,33,54,.9),rgba(14,17,29,.9));
  border-color:rgba(69,231,255,.11);
  box-shadow:0 20px 42px rgba(0,0,0,.22);
}
.stream-track-art{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border-radius:13px;
  background-size:cover!important;
  background-position:center!important;
  overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}
.stream-card-play{
  position:absolute;
  z-index:3;
  right:8px;
  bottom:8px;
  width:38px;
  height:38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--nexus-cyan),var(--nexus-violet));
  color:#071017;
  font-size:12px;
  font-weight:950;
  opacity:0;
  transform:translateY(6px) scale(.9);
  transition:.18s ease;
  box-shadow:0 10px 28px rgba(69,231,255,.20);
}
.stream-track-card:hover .stream-card-play{
  opacity:1;
  transform:translateY(0) scale(1);
}
.stream-art-glyph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.82);
  font-size:26px;
}
.stream-track-copy{
  display:block;
  padding:9px 2px 2px;
  min-width:0;
}
.stream-track-copy b,
.stream-track-copy small,
.stream-track-copy em{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stream-track-copy b{
  font-size:12px;
  color:#f6f8ff;
  margin-bottom:4px;
}
.stream-track-copy small{
  font-size:10px;
  color:#939db5;
}
.stream-track-copy em{
  margin-top:6px;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:7.5px;
  color:#62708d;
}

.sonqelo-mix-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}
.sonqelo-mix-card{
  min-width:0;
  padding:10px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(19,23,39,.78),rgba(10,13,23,.78));
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.sonqelo-mix-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 22px 50px rgba(0,0,0,.22);
}
.mix-card-art{
  position:relative;
  display:block;
  aspect-ratio:1.28/1;
  overflow:hidden;
  border-radius:13px;
  background:#0c1020;
}
.mix-card-grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  opacity:.72;
}
.mix-card-grid span{
  display:grid;
  place-items:center;
  background-size:cover!important;
  background-position:center!important;
  font-size:15px;
  color:rgba(255,255,255,.68);
}
.mix-card-art:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(5,8,16,.08),rgba(5,8,16,.78));
}
.mix-card-glyph{
  position:absolute;
  z-index:2;
  left:13px;
  bottom:12px;
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:950;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.13);
  background:rgba(7,10,18,.48);
}
.mix-card-play{
  position:absolute;
  z-index:2;
  right:10px;
  bottom:10px;
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#071017;
  background:#fff;
  opacity:.92;
}
.mix-cyan .mix-card-glyph{color:var(--nexus-cyan)}
.mix-violet .mix-card-glyph{color:#b49cff}
.mix-pink .mix-card-glyph{color:#ff8ee4}
.mix-blue .mix-card-glyph{color:#8eb4ff}
.mix-card-copy{
  display:block;
  padding:9px 2px 2px;
}
.mix-card-copy b,.mix-card-copy small,.mix-card-copy em{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mix-card-copy b{
  font-size:13px;
  margin-bottom:4px;
}
.mix-card-copy small{
  color:#929db5;
  font-size:9.5px;
}
.mix-card-copy em{
  margin-top:5px;
  color:#63708b;
  font-style:normal;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

/* Player feels familiar but stays distinctly SONQELO */
.player{
  border-radius:18px;
}
.main-play{
  border-radius:50%!important;
  width:44px!important;
  height:44px!important;
  background:#f5f7ff!important;
  color:#05060b!important;
  box-shadow:0 10px 26px rgba(0,0,0,.22)!important;
}
.main-play:hover{
  transform:scale(1.05)!important;
}
.transport-icon:hover{
  background:transparent!important;
}
.now-meta strong{
  font-size:11.5px;
}
.now-meta span{
  font-size:9px;
}

/* Discovery feels like a clean browse surface */
.audius-stream-panel{
  border-radius:16px;
}
.open-music-card{
  border-radius:15px!important;
}
.open-music-card .accent-button{
  border-radius:999px!important;
}

/* Original SONQELO identity: avoid Spotify-green, own cyan/violet accents */
.nav-item.active{
  box-shadow:inset 3px 0 0 var(--nexus-cyan);
}
.accent-button,.light-button,.import-top{
  background:linear-gradient(100deg,#64ecff,#9883ff 76%)!important;
}
.chip-button.active-chip{
  background:linear-gradient(90deg,#64ecff,#9f8cff)!important;
}

/* mobile app information architecture */
@media (max-width: 820px){
  html.sonqelo-ios-app .nav-item,
  html.sonqelo-ios-runtime .nav-item{
    flex:1 0 62px;
    min-width:62px;
  }

  html.sonqelo-ios-app .nav-list,
  html.sonqelo-ios-runtime .nav-list{
    justify-content:space-between;
  }

  html.sonqelo-ios-app .nav-item[data-view="downloads"],
  html.sonqelo-ios-runtime .nav-item[data-view="downloads"]{
    display:flex!important;
  }

  html.sonqelo-ios-app .dashboard,
  html.sonqelo-ios-runtime .dashboard{
    padding:0 8px 18px;
  }

  html.sonqelo-ios-app .quick-grid,
  html.sonqelo-ios-runtime .quick-grid{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  html.sonqelo-ios-app .quick-card,
  html.sonqelo-ios-runtime .quick-card{
    min-height:60px;
  }

  html.sonqelo-ios-app .stream-shelf-section,
  html.sonqelo-ios-runtime .stream-shelf-section{
    margin-top:22px;
  }

  html.sonqelo-ios-app .stream-shelf-heading,
  html.sonqelo-ios-runtime .stream-shelf-heading{
    align-items:flex-start;
  }

  html.sonqelo-ios-app .stream-shelf-heading h2,
  html.sonqelo-ios-runtime .stream-shelf-heading h2{
    font-size:19px;
  }

  html.sonqelo-ios-app .stream-shelf-heading p,
  html.sonqelo-ios-runtime .stream-shelf-heading p{
    display:none;
  }

  html.sonqelo-ios-app .stream-card-rail,
  html.sonqelo-ios-runtime .stream-card-rail{
    grid-auto-columns:minmax(138px,42vw);
    gap:9px;
    margin-right:-8px;
    padding-right:10px;
  }

  html.sonqelo-ios-app .stream-track-card,
  html.sonqelo-ios-runtime .stream-track-card{
    padding:8px;
    border-radius:15px;
  }

  html.sonqelo-ios-app .stream-card-play,
  html.sonqelo-ios-runtime .stream-card-play{
    opacity:1;
    transform:none;
    width:34px;
    height:34px;
    border-radius:11px;
  }

  html.sonqelo-ios-app .sonqelo-mix-grid,
  html.sonqelo-ios-runtime .sonqelo-mix-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  html.sonqelo-ios-app .sonqelo-mix-card,
  html.sonqelo-ios-runtime .sonqelo-mix-card{
    padding:8px;
    border-radius:15px;
  }

  html.sonqelo-ios-app .content-header,
  html.sonqelo-ios-runtime .content-header{
    display:block;
    min-height:0;
  }

  html.sonqelo-ios-app .hero-sidecards,
  html.sonqelo-ios-runtime .hero-sidecards{
    grid-template-columns:1fr 1fr;
  }

  html.sonqelo-ios-app .hero-sidecard,
  html.sonqelo-ios-runtime .hero-sidecard{
    min-height:92px;
    padding:11px;
  }

  html.sonqelo-ios-app .hero-sidecard small,
  html.sonqelo-ios-runtime .hero-sidecard small{
    display:none;
  }
}

@media (max-width: 520px){
  .sonqelo-mix-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* ============================================================
   SONQELO V36 — UNIFIED SEARCH + RADIO
   ============================================================ */

.universal-online-group{
  margin-top:8px;
  padding:14px;
  border:1px solid rgba(69,231,255,.09);
  border-radius:17px;
  background:
    radial-gradient(circle at 0 0,rgba(69,231,255,.055),transparent 34%),
    rgba(255,255,255,.015);
}
.universal-online-group .section-heading{
  margin-bottom:10px;
}
.universal-online-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;
}
.universal-online-card{
  min-width:0;
  padding:10px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(18,24,39,.86),rgba(10,13,23,.82));
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.universal-online-card:hover{
  transform:translateY(-3px);
  border-color:rgba(69,231,255,.13);
  background:linear-gradient(145deg,rgba(24,31,50,.92),rgba(13,17,29,.9));
}
.universal-online-art{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border:0;
  border-radius:13px;
  background:
    radial-gradient(circle at 25% 15%,rgba(69,231,255,.18),transparent 35%),
    linear-gradient(145deg,#171e34,#0b0f1c);
  background-size:cover!important;
  background-position:center!important;
  cursor:pointer;
}
.universal-online-glyph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.55);
  font-size:34px;
}
.universal-online-play{
  position:absolute;
  z-index:2;
  right:9px;
  bottom:9px;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--nexus-cyan),var(--nexus-violet));
  color:#071017;
  font-weight:950;
  box-shadow:0 12px 28px rgba(69,231,255,.18);
}
.universal-online-copy{
  padding:9px 2px 7px;
  min-width:0;
}
.universal-online-copy b,
.universal-online-copy span,
.universal-online-copy small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.universal-online-copy b{
  font-size:12px;
  color:#f7f9ff;
  margin-bottom:3px;
}
.universal-online-copy span{
  font-size:10px;
  color:#9ca7bf;
}
.universal-online-copy small{
  margin-top:4px;
  color:#687690;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.universal-online-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.universal-online-actions button{
  min-height:36px;
  padding:0 8px;
  font-size:9px;
}
.universal-search-loading{
  grid-column:1/-1;
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#8492ad;
  font-size:10px;
}
.universal-search-loading span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--nexus-cyan);
  animation:universalSearchDot 1s ease-in-out infinite;
}
.universal-search-loading span:nth-child(2){animation-delay:.14s}
.universal-search-loading span:nth-child(3){animation-delay:.28s}

#entityRadioBtn{
  border-color:rgba(69,231,255,.18);
  background:linear-gradient(90deg,rgba(69,231,255,.07),rgba(139,124,255,.07));
}
#entityRadioBtn:hover{
  border-color:rgba(69,231,255,.30);
  box-shadow:0 0 24px rgba(69,231,255,.07);
}

@keyframes universalSearchDot{
  0%,100%{opacity:.25;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-4px)}
}

@media (max-width:820px){
  html.sonqelo-ios-app .universal-online-group,
  html.sonqelo-ios-runtime .universal-online-group{
    padding:10px;
    border-radius:15px;
  }
  html.sonqelo-ios-app .universal-online-grid,
  html.sonqelo-ios-runtime .universal-online-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  html.sonqelo-ios-app .universal-online-card,
  html.sonqelo-ios-runtime .universal-online-card{
    padding:8px;
    border-radius:14px;
  }
  html.sonqelo-ios-app .universal-online-actions,
  html.sonqelo-ios-runtime .universal-online-actions{
    grid-template-columns:1fr;
  }
  html.sonqelo-ios-app .universal-online-actions .outline-button,
  html.sonqelo-ios-runtime .universal-online-actions .outline-button{
    display:none;
  }
  html.sonqelo-ios-app .entity-actions,
  html.sonqelo-ios-runtime .entity-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  html.sonqelo-ios-app #entityQueueBtn,
  html.sonqelo-ios-runtime #entityQueueBtn{
    grid-column:1/-1;
  }
}

/* SONQELO V36.1 Standalone iPhone PWA */
.standalone-pwa-note{
  border-color:rgba(69,231,255,.18)!important;
  background:linear-gradient(135deg,rgba(20,30,48,.9),rgba(10,14,25,.9))!important;
}
.sonqelo-standalone-pwa body{overscroll-behavior:none}


/* ============================================================
   SONQELO V36.2 — MOBILE PRO PLAYER
   ============================================================ */

.mobile-now-expand{
  display:none;
}
.mobile-now-player{
  position:fixed;
  inset:0;
  z-index:1000;
}
.mobile-now-player.hidden{display:none}
.mobile-now-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,4,10,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.mobile-now-sheet{
  position:absolute;
  inset:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:
    calc(12px + env(safe-area-inset-top))
    18px
    calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 20% 10%,rgba(69,231,255,.12),transparent 32%),
    radial-gradient(circle at 80% 22%,rgba(150,111,255,.14),transparent 35%),
    linear-gradient(180deg,#0b1020 0%,#080b14 52%,#05060b 100%);
}
.mobile-now-topbar{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:11px;
  max-width:520px;
  margin:0 auto 18px;
}
.mobile-now-topbar>div{
  min-width:0;
  text-align:center;
}
.mobile-now-topbar b{
  display:block;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
}
.mobile-now-close{
  width:39px;
  height:39px;
  font-size:19px;
}
.mobile-network-pill{
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(112,255,209,.18);
  color:var(--nexus-green);
  background:rgba(112,255,209,.06);
  font-size:7px;
  font-weight:950;
  letter-spacing:.12em;
}
.mobile-network-pill.offline{
  color:#ffb0b0;
  border-color:rgba(255,120,120,.2);
  background:rgba(255,120,120,.07);
}
.mobile-now-art{
  position:relative;
  width:min(78vw,440px);
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:28px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 25% 18%,rgba(69,231,255,.28),transparent 34%),
    linear-gradient(145deg,#182343,#0a0f1d);
  background-size:cover!important;
  background-position:center!important;
  box-shadow:
    0 30px 75px rgba(0,0,0,.48),
    0 0 55px rgba(69,231,255,.08);
  border:1px solid rgba(193,209,255,.12);
}
.mobile-now-art>span:first-child{
  position:relative;
  z-index:2;
  font-size:52px;
  color:rgba(255,255,255,.82);
}
.mobile-now-art.has-art>span:first-child{
  opacity:0;
}
.mobile-now-aurora{
  position:absolute;
  width:70%;
  height:70%;
  border-radius:50%;
  filter:blur(65px);
  background:linear-gradient(135deg,rgba(69,231,255,.4),rgba(155,108,255,.34));
  opacity:.28;
  animation:mobileNowAurora 8s ease-in-out infinite alternate;
}
.mobile-now-info{
  max-width:520px;
  margin:22px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  align-items:center;
  gap:12px;
}
.mobile-now-copy{
  min-width:0;
}
.mobile-now-copy h2{
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:24px;
  letter-spacing:-.04em;
}
.mobile-now-copy p{
  margin:5px 0 0;
  color:#9aa7c0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}
.mobile-now-heart{
  width:46px;
  height:46px;
  border-radius:50%;
  font-size:25px;
  color:#cbd4e8;
}
.mobile-now-heart.favorite{
  color:#ff77dc;
  text-shadow:0 0 18px rgba(255,119,220,.32);
}
.mobile-now-progress{
  max-width:520px;
  margin:19px auto 0;
}
.mobile-now-progress input{
  width:100%;
  accent-color:var(--nexus-cyan);
}
.mobile-now-progress>div{
  display:flex;
  justify-content:space-between;
  margin-top:5px;
  color:#6e7b95;
  font-size:9px;
}
.mobile-now-controls{
  max-width:480px;
  margin:13px auto 0;
  display:grid;
  grid-template-columns:42px 56px 78px 56px 42px;
  justify-content:center;
  align-items:center;
  gap:10px;
}
.mobile-now-controls button{
  color:#eaf0ff;
}
.mobile-now-controls button.active{
  color:var(--nexus-cyan);
}
.mobile-now-prev,.mobile-now-next{
  height:52px;
  font-size:22px;
}
.mobile-now-play{
  width:72px;
  height:72px;
  border:0;
  border-radius:50%;
  background:#f8faff;
  color:#070910;
  cursor:pointer;
  position:relative;
  box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.mobile-now-play[data-mode="play"]::before{
  content:"";
  position:absolute;
  top:50%;
  left:53%;
  transform:translate(-45%,-50%);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-left:17px solid #080a11;
}
.mobile-now-play[data-mode="pause"]::before,
.mobile-now-play[data-mode="pause"]::after{
  content:"";
  position:absolute;
  top:25px;
  width:6px;
  height:22px;
  border-radius:2px;
  background:#080a11;
}
.mobile-now-play[data-mode="pause"]::before{left:27px}
.mobile-now-play[data-mode="pause"]::after{right:27px}
.mobile-now-actions{
  max-width:520px;
  margin:23px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.mobile-action-card{
  min-width:0;
  min-height:92px;
  padding:11px 8px;
  border:1px solid rgba(182,201,255,.09);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(20,27,44,.8),rgba(10,14,24,.8));
  color:#f3f6ff;
  text-align:center;
  cursor:pointer;
}
.mobile-action-card>span{
  display:block;
  color:var(--nexus-cyan);
  font-size:18px;
  margin-bottom:6px;
}
.mobile-action-card b,
.mobile-action-card small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobile-action-card b{
  font-size:9px;
  white-space:nowrap;
}
.mobile-action-card small{
  margin-top:3px;
  color:#77859e;
  font-size:7.5px;
}
.mobile-now-source{
  max-width:520px;
  margin:14px auto 0;
  text-align:center;
  color:#62708a;
  font-size:8px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.pwa-update-banner{
  position:fixed;
  z-index:1500;
  left:50%;
  top:calc(12px + env(safe-area-inset-top));
  transform:translateX(-50%);
  width:min(92vw,520px);
  padding:10px 11px 10px 14px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  border:1px solid rgba(69,231,255,.18);
  border-radius:15px;
  background:rgba(10,15,27,.94);
  box-shadow:0 20px 60px rgba(0,0,0,.38);
  backdrop-filter:blur(18px);
}
.pwa-update-banner.hidden{display:none}
.pwa-update-banner b,.pwa-update-banner span{display:block}
.pwa-update-banner b{font-size:10px}
.pwa-update-banner span{margin-top:2px;color:#8794ad;font-size:8px}
.pwa-update-banner button{min-height:34px;padding:0 12px;font-size:9px}

@keyframes mobileNowAurora{
  from{transform:translate(-8%,-5%) scale(.9)}
  to{transform:translate(12%,8%) scale(1.14)}
}

@media (max-width:820px){
  .mobile-now-expand{
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    color:#91a0b9;
  }
  #playerCover,#playerTitle{
    cursor:pointer;
  }
  html.mobile-now-open{
    overflow:hidden;
  }
}

@media (min-width:821px){
  .mobile-now-player{
    display:none!important;
  }
}

@media (max-width:390px){
  .mobile-now-sheet{
    padding-left:14px;
    padding-right:14px;
  }
  .mobile-now-art{
    width:min(80vw,360px);
    border-radius:24px;
  }
  .mobile-now-controls{
    grid-template-columns:36px 50px 70px 50px 36px;
    gap:7px;
  }
  .mobile-now-actions{
    gap:6px;
  }
}


/* ============================================================
   SONQELO V36.3 — MOBILE GESTURES + LIBRARY ACTIONS
   ============================================================ */

.mobile-now-actions-four{
  grid-template-columns:repeat(4,1fr);
}
.mobile-now-actions-four .mobile-action-card{
  min-height:88px;
}
.mobile-next-up{
  max-width:520px;
  margin:18px auto 0;
  padding:13px;
  border:1px solid rgba(176,195,255,.09);
  border-radius:17px;
  background:rgba(255,255,255,.022);
}
.mobile-next-up.hidden{display:none}
.mobile-next-up-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:8px;
}
.mobile-next-up-head b{
  display:block;
  font-size:12px;
  margin-top:2px;
}
.mobile-next-up-list{
  display:grid;
  gap:5px;
}
.mobile-next-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  width:100%;
  padding:6px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.mobile-next-row:hover{
  background:rgba(255,255,255,.045);
}
.mobile-next-art{
  width:42px;
  height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background-size:cover!important;
  background-position:center!important;
  font-size:13px;
}
.mobile-next-copy{
  min-width:0;
}
.mobile-next-copy b,.mobile-next-copy small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobile-next-copy b{font-size:9.5px}
.mobile-next-copy small{margin-top:3px;color:#7f8ba3;font-size:8px}
.mobile-next-row em{
  font-style:normal;
  font-size:7px;
  letter-spacing:.08em;
  color:#5f6f8a;
}
.mobile-gesture-hint{
  max-width:520px;
  margin:12px auto 0;
  text-align:center;
  color:#4e5c74;
  font-size:7px;
  letter-spacing:.06em;
}
.mobile-playlist-chooser-card{
  width:min(92vw,520px)!important;
}
.mobile-playlist-list{
  display:grid;
  gap:6px;
  max-height:45vh;
  overflow:auto;
  margin:14px 0;
}
.mobile-playlist-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  width:100%;
  padding:8px;
  border:1px solid rgba(177,197,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.mobile-playlist-row:hover:not(:disabled){
  border-color:rgba(69,231,255,.16);
  background:rgba(69,231,255,.045);
}
.mobile-playlist-row:disabled{
  opacity:.6;
  cursor:default;
}
.mobile-playlist-icon{
  width:42px;
  height:42px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:var(--nexus-cyan);
  background:linear-gradient(145deg,rgba(69,231,255,.08),rgba(139,124,255,.08));
}
.mobile-playlist-row>span:nth-child(2){
  min-width:0;
}
.mobile-playlist-row b,.mobile-playlist-row small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobile-playlist-row b{font-size:10px}
.mobile-playlist-row small{margin-top:3px;color:#7d8aa2;font-size:8px}
.mobile-playlist-row em{
  font-style:normal;
  color:#78859d;
  font-size:8px;
}
.mobile-playlist-row.already-added em{
  color:var(--nexus-green);
}

@media (max-width:430px){
  .mobile-now-actions-four{
    grid-template-columns:1fr 1fr;
  }
  .mobile-now-actions-four .mobile-action-card{
    min-height:78px;
  }
}


/* ============================================================
   SONQELO V36.4 — MOBILE TABBAR + LIBRARY HUB
   ============================================================ */

.mobile-tabbar{
  display:none;
}

.mobile-search-landing,
.mobile-library-view{
  padding:16px 16px 30px;
}

.mobile-page-head{
  margin-bottom:18px;
}
.mobile-page-head h2{
  margin:4px 0 5px;
  font-size:30px;
  letter-spacing:-.045em;
}
.mobile-page-head p{
  margin:0;
  color:#8491aa;
  font-size:11px;
}

.mobile-search-shortcuts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.mobile-search-shortcuts button{
  min-height:96px;
  padding:14px;
  border:1px solid rgba(178,197,255,.09);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(24,31,50,.88),rgba(11,15,27,.86));
  color:#f5f7ff;
  text-align:left;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.mobile-search-shortcuts button::after{
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  right:-24px;
  bottom:-31px;
  border-radius:24px;
  transform:rotate(18deg);
  background:linear-gradient(135deg,rgba(69,231,255,.18),rgba(155,108,255,.2));
}
.mobile-search-shortcuts button span{
  display:block;
  margin-bottom:14px;
  color:var(--nexus-cyan);
  font-size:19px;
}
.mobile-search-shortcuts button b{
  position:relative;
  z-index:2;
  font-size:15px;
}

.mobile-search-focus-card{
  width:100%;
  margin-top:12px;
  padding:13px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  border:1px solid rgba(69,231,255,.11);
  border-radius:16px;
  background:rgba(69,231,255,.035);
  color:#f2f6ff;
  text-align:left;
}
.mobile-search-focus-card>span{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(69,231,255,.08);
  color:var(--nexus-cyan);
  font-size:20px;
}
.mobile-search-focus-card b,
.mobile-search-focus-card small{
  display:block;
}
.mobile-search-focus-card b{font-size:11px}
.mobile-search-focus-card small{
  margin-top:3px;color:#76849d;font-size:8px;
}
.mobile-search-focus-card em{
  font-style:normal;
  color:#70809b;
  font-size:22px;
}

.mobile-library-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}
.mobile-library-create{
  min-height:38px;
  padding:0 13px;
  border-radius:999px!important;
  font-size:9px;
}

.mobile-library-categories{
  display:grid;
  gap:6px;
}
.mobile-library-categories>button{
  width:100%;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:7px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#f3f6ff;
  text-align:left;
  cursor:pointer;
}
.mobile-library-categories>button:hover{
  background:rgba(255,255,255,.035);
}
.mobile-library-category-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:18px;
  color:#fff;
}
.mobile-library-category-icon.favorite{
  background:linear-gradient(135deg,#704cff,#4b9cff);
}
.mobile-library-category-icon.recent{
  background:linear-gradient(135deg,#20a6a0,#226e90);
}
.mobile-library-category-icon.artists{
  border-radius:50%;
  background:linear-gradient(135deg,#934dca,#4b65be);
}
.mobile-library-category-icon.albums{
  background:linear-gradient(135deg,#34415e,#151a28);
}
.mobile-library-categories b,
.mobile-library-categories small{
  display:block;
}
.mobile-library-categories b{font-size:11px}
.mobile-library-categories small{
  margin-top:3px;
  color:#73819a;
  font-size:8px;
}
.mobile-library-categories em{
  font-style:normal;
  color:#59677e;
  font-size:20px;
}

.mobile-library-playlists{
  margin-top:24px;
}
.mobile-playlist-cards{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(140px,42vw);
  gap:10px;
  overflow-x:auto;
  padding-bottom:8px;
  scroll-snap-type:x proximity;
}
.mobile-library-playlist-card{
  scroll-snap-align:start;
  min-width:0;
  padding:8px;
  border:1px solid rgba(177,197,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.025);
  color:inherit;
  text-align:left;
}
.mobile-library-playlist-art{
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  overflow:hidden;
  border-radius:12px;
  background:#0d1220;
}
.mobile-library-playlist-art span{
  display:grid;
  place-items:center;
  background-size:cover!important;
  background-position:center!important;
  color:rgba(255,255,255,.6);
  font-size:13px;
}
.mobile-library-playlist-copy{
  display:block;
  min-width:0;
  padding:8px 2px 2px;
}
.mobile-library-playlist-copy b,
.mobile-library-playlist-copy small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mobile-library-playlist-copy b{font-size:10px}
.mobile-library-playlist-copy small{
  margin-top:3px;color:#71809a;font-size:8px;
}
.mobile-library-empty{
  grid-column:1/-1;
  min-width:260px;
  padding:18px;
  border:1px dashed rgba(177,197,255,.10);
  border-radius:14px;
  color:#75829a;
  font-size:9px;
}

@media (max-width:820px){
  html.sonqelo-ios-app .sidebar,
  html.sonqelo-ios-runtime .sidebar{
    display:none!important;
  }

  html.sonqelo-ios-app .mobile-tabbar,
  html.sonqelo-ios-runtime .mobile-tabbar{
    position:fixed;
    z-index:117;
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    height:66px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:3px;
    padding:5px 6px;
    border:1px solid rgba(176,194,255,.12);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(16,20,34,.95),rgba(8,11,21,.95));
    box-shadow:0 18px 55px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.04);
    backdrop-filter:blur(28px) saturate(150%);
    -webkit-backdrop-filter:blur(28px) saturate(150%);
  }

  .mobile-tab{
    border:0;
    border-radius:14px;
    background:transparent;
    color:#64718a;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    cursor:pointer;
  }
  .mobile-tab span{
    font-size:18px;
    line-height:1;
  }
  .mobile-tab b{
    font-size:7px;
    letter-spacing:.02em;
  }
  .mobile-tab.active{
    color:#ecf4ff;
    background:linear-gradient(145deg,rgba(69,231,255,.08),rgba(139,124,255,.07));
  }
  .mobile-tab.active span{
    color:var(--nexus-cyan);
    filter:drop-shadow(0 0 9px rgba(69,231,255,.26));
  }

  html.sonqelo-ios-app .player,
  html.sonqelo-ios-runtime .player{
    bottom:calc(82px + env(safe-area-inset-bottom));
  }

  html.sonqelo-ios-app #app,
  html.sonqelo-ios-runtime #app{
    padding-bottom:calc(176px + env(safe-area-inset-bottom));
  }

  html.sonqelo-ios-app .mobile-search-landing,
  html.sonqelo-ios-app .mobile-library-view,
  html.sonqelo-ios-runtime .mobile-search-landing,
  html.sonqelo-ios-runtime .mobile-library-view{
    display:block;
  }

  html.sonqelo-ios-app .mobile-search-landing.hidden,
  html.sonqelo-ios-app .mobile-library-view.hidden,
  html.sonqelo-ios-runtime .mobile-search-landing.hidden,
  html.sonqelo-ios-runtime .mobile-library-view.hidden{
    display:none;
  }
}

@media (min-width:821px){
  .mobile-search-landing,
  .mobile-library-view{
    display:none!important;
  }
}


/* SONQELO V36.4.1 — PWA UPDATE NOTIFICATION FIX */
.pwa-update-banner{
  border-color:rgba(69,231,255,.36)!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.52),
    0 0 32px rgba(69,231,255,.14)!important;
}
.pwa-update-banner:not(.hidden){
  animation:sonqeloUpdateIn .28s ease-out both;
}
@keyframes sonqeloUpdateIn{
  from{opacity:0;transform:translate(-50%,-14px) scale(.97)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}


/* ============================================================
   SONQELO V36.5 — MOBILE HOME PRO
   ============================================================ */

.mobile-home-pro{
  display:none;
}

@media (max-width:820px){
  html.sonqelo-ios-app .mobile-home-pro,
  html.sonqelo-ios-runtime .mobile-home-pro{
    display:block;
    padding:14px 12px 4px;
  }

  html.sonqelo-ios-app .mobile-home-pro.hidden,
  html.sonqelo-ios-runtime .mobile-home-pro.hidden{
    display:none;
  }

  html.sonqelo-ios-app #homeRotationSection,
  html.sonqelo-ios-app #homeRecentSection,
  html.sonqelo-ios-app #homeMixesSection,
  html.sonqelo-ios-runtime #homeRotationSection,
  html.sonqelo-ios-runtime #homeRecentSection,
  html.sonqelo-ios-runtime #homeMixesSection{
    display:none!important;
  }

  .mobile-home-greeting{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
    margin:2px 0 15px;
  }
  .mobile-home-greeting h2{
    margin:3px 0 3px;
    font-size:27px;
    letter-spacing:-.045em;
  }
  .mobile-home-greeting p{
    margin:0;
    color:#7f8da7;
    font-size:9px;
  }
  .mobile-home-search-btn{
    flex:none;
    width:42px;
    height:42px;
    border-radius:14px;
    color:var(--nexus-cyan);
    font-size:18px;
  }

  .mobile-home-feature{
    min-height:168px;
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    gap:14px;
    align-items:center;
    padding:13px;
    border:1px solid rgba(69,231,255,.11);
    border-radius:19px;
    background:
      radial-gradient(circle at 0 0,rgba(69,231,255,.09),transparent 42%),
      radial-gradient(circle at 100% 100%,rgba(139,124,255,.10),transparent 45%),
      linear-gradient(145deg,rgba(19,26,44,.93),rgba(10,13,24,.93));
    box-shadow:0 18px 48px rgba(0,0,0,.20);
  }
  .mobile-home-feature.empty{
    grid-template-columns:112px minmax(0,1fr);
  }
  .mobile-home-feature-art{
    width:100%;
    aspect-ratio:1/1;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:
      radial-gradient(circle at 28% 18%,rgba(69,231,255,.23),transparent 36%),
      linear-gradient(145deg,#1b2440,#0a0f1d);
    background-size:cover!important;
    background-position:center!important;
    overflow:hidden;
    box-shadow:0 15px 36px rgba(0,0,0,.30);
    color:#dffbff;
    font-size:28px;
  }
  .mobile-home-feature-copy{
    min-width:0;
  }
  .mobile-home-feature-copy h3{
    margin:5px 0 4px;
    font-size:21px;
    line-height:1.08;
    letter-spacing:-.035em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .mobile-home-feature-copy p{
    margin:0;
    color:#8794ac;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-home-feature-actions{
    display:flex;
    gap:7px;
    margin-top:13px;
  }
  .mobile-home-feature-actions button{
    min-height:37px;
    padding:0 11px;
    border-radius:999px!important;
    font-size:8.5px;
  }

  .mobile-home-section{
    margin-top:24px;
  }
  .mobile-home-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
    margin-bottom:10px;
  }
  .mobile-home-section-head h3{
    margin:3px 0 0;
    font-size:18px;
    letter-spacing:-.035em;
  }

  .mobile-home-quick-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .mobile-home-quick-card{
    min-width:0;
    min-height:64px;
    padding:8px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    border:1px solid rgba(180,199,255,.07);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(19,25,41,.75),rgba(10,13,23,.75));
    color:inherit;
    text-align:left;
  }
  .mobile-home-quick-card>span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:linear-gradient(135deg,rgba(69,231,255,.11),rgba(139,124,255,.11));
    color:var(--nexus-cyan);
    font-size:16px;
  }
  .mobile-home-quick-card b,
  .mobile-home-quick-card small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-home-quick-card b{font-size:9px}
  .mobile-home-quick-card small{margin-top:2px;color:#72809a;font-size:7px}
  .mobile-home-quick-card em{font-style:normal;color:#536079;font-size:16px}

  .mobile-home-artist-rail{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:94px;
    gap:10px;
    overflow-x:auto;
    padding:2px 2px 8px;
    scroll-snap-type:x proximity;
  }
  .mobile-home-artist-card{
    min-width:0;
    border:0;
    background:transparent;
    color:inherit;
    text-align:center;
    scroll-snap-align:start;
  }
  .mobile-home-artist-art{
    width:88px;
    height:88px;
    margin:0 auto 7px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background-size:cover!important;
    background-position:center!important;
    color:#dce8ff;
    font-size:20px;
    box-shadow:0 12px 30px rgba(0,0,0,.23);
    border:1px solid rgba(190,207,255,.08);
  }
  .mobile-home-artist-card b,
  .mobile-home-artist-card small{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-home-artist-card b{font-size:8.5px}
  .mobile-home-artist-card small{margin-top:2px;color:#6f7c94;font-size:7px}

  .mobile-home-new-list{
    display:grid;
    gap:4px;
  }
  .mobile-home-new-row{
    width:100%;
    min-width:0;
    padding:6px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    border:0;
    border-radius:12px;
    background:transparent;
    color:inherit;
    text-align:left;
  }
  .mobile-home-new-row:active{
    background:rgba(255,255,255,.04);
  }
  .mobile-home-new-art{
    width:46px;
    height:46px;
    border-radius:11px;
    display:grid;
    place-items:center;
    background-size:cover!important;
    background-position:center!important;
    color:#dbe7ff;
  }
  .mobile-home-new-copy{
    min-width:0;
  }
  .mobile-home-new-copy b,
  .mobile-home-new-copy small{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-home-new-copy b{font-size:9.5px}
  .mobile-home-new-copy small{margin-top:3px;color:#71809a;font-size:8px}
  .mobile-home-new-row em{
    font-style:normal;
    color:#5a6780;
    font-size:7px;
    letter-spacing:.08em;
  }
}

@media (max-width:390px){
  .mobile-home-feature{
    grid-template-columns:108px minmax(0,1fr);
  }
  .mobile-home-feature-copy h3{
    font-size:18px;
  }
}


/* ============================================================
   SONQELO V36.7 — SOUNDDNA CORE
   ============================================================ */

.sounddna-modal-card{
  width:min(94vw,980px)!important;
  max-height:90vh;
  overflow:auto;
  background:
    radial-gradient(circle at 8% 0%,rgba(69,231,255,.08),transparent 30%),
    radial-gradient(circle at 92% 8%,rgba(184,90,255,.09),transparent 32%),
    linear-gradient(160deg,#121726 0%,#0d111c 48%,#090c14 100%)!important;
}
.sounddna-title-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}
.sounddna-title-row>div{
  min-width:0;
}
.sounddna-strength{
  flex:none;
  padding:8px 11px;
  border:1px solid rgba(69,231,255,.18);
  border-radius:999px;
  background:rgba(69,231,255,.055);
  color:var(--nexus-cyan);
  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sounddna-spectrum-section,
.sounddna-mixes-section{
  margin-top:22px;
  padding:15px;
  border:1px solid rgba(180,198,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.018);
}
.sounddna-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:15px;
  margin-bottom:13px;
}
.sounddna-section-head h3{
  margin:3px 0 0;
  font-size:16px;
  letter-spacing:-.03em;
}
.sounddna-section-head>small{
  color:#68758c;
  font-size:8px;
}
.sounddna-spectrum{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.sounddna-axis{
  min-width:0;
}
.sounddna-axis>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.sounddna-axis b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dce5f8;
  font-size:8px;
}
.sounddna-axis span{
  flex:none;
  color:#70809b;
  font-size:8px;
}
.sounddna-axis-track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#171e2d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.sounddna-axis-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--nexus-cyan),#8f72ff,#ef79d3);
  box-shadow:0 0 15px rgba(69,231,255,.18);
}
.sounddna-mix-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.sounddna-mix-card{
  min-width:0;
  min-height:88px;
  padding:11px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:center;
  gap:11px;
  border:1px solid rgba(177,196,255,.08);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(22,29,48,.84),rgba(10,14,24,.78));
  color:#eef3ff;
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.sounddna-mix-card:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(69,231,255,.22);
  background:linear-gradient(145deg,rgba(27,37,60,.94),rgba(13,18,31,.90));
}
.sounddna-mix-card:disabled{
  opacity:.48;
  cursor:default;
}
.sounddna-mix-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:
    radial-gradient(circle at 25% 20%,rgba(69,231,255,.22),transparent 45%),
    linear-gradient(145deg,rgba(95,72,255,.20),rgba(226,91,210,.12));
  color:var(--nexus-cyan);
  font-size:20px;
}
.sounddna-mix-copy{
  min-width:0;
}
.sounddna-mix-copy b,
.sounddna-mix-copy small,
.sounddna-mix-copy em{
  display:block;
}
.sounddna-mix-copy b{
  font-size:10px;
}
.sounddna-mix-copy small{
  margin-top:3px;
  color:#7c89a2;
  font-size:8px;
  line-height:1.35;
}
.sounddna-mix-copy em{
  margin-top:6px;
  color:#55dff0;
  font-size:7px;
  font-style:normal;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sounddna-insight{
  border-color:rgba(69,231,255,.13)!important;
  background:
    linear-gradient(145deg,rgba(69,231,255,.045),rgba(139,124,255,.04))!important;
}

@media(max-width:760px){
  .sounddna-title-row{
    display:block;
  }
  .sounddna-strength{
    display:inline-block;
    margin-top:10px;
  }
  .sounddna-spectrum{
    grid-template-columns:1fr 1fr;
  }
  .sounddna-mix-grid{
    grid-template-columns:1fr;
  }
  .sounddna-section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
}


/* ============================================================
   SONQELO V36.8 — MUSIC JOURNEY CORE
   ============================================================ */

.journey-card .lab-icon{
  background:
    radial-gradient(circle at 25% 20%,rgba(255,196,95,.22),transparent 42%),
    linear-gradient(145deg,rgba(255,130,128,.14),rgba(139,124,255,.14));
  color:#ffd07f;
}
.journey-modal-card{
  width:min(95vw,1080px)!important;
  max-height:92vh;
  overflow:auto;
  background:
    radial-gradient(circle at 7% 0%,rgba(255,180,98,.07),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(150,103,255,.09),transparent 32%),
    linear-gradient(160deg,#131725 0%,#0c101a 50%,#080b12 100%)!important;
}
.journey-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}
.journey-title-row>div{min-width:0}
.journey-live-badge{
  flex:none;
  padding:8px 11px;
  border:1px solid rgba(255,202,116,.17);
  border-radius:999px;
  background:rgba(255,202,116,.045);
  color:#ffd188;
  font-size:8px;
  font-weight:950;
  letter-spacing:.10em;
}
.journey-period-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  margin:18px 0 16px;
  padding-bottom:2px;
}
.journey-period-tabs button{
  flex:none;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(179,198,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:#77859d;
  font-size:8px;
  font-weight:850;
  cursor:pointer;
}
.journey-period-tabs button.active{
  color:#10131b;
  border-color:transparent;
  background:linear-gradient(90deg,#ffd07f,#ff9c8c,#b89cff);
  box-shadow:0 10px 24px rgba(255,160,115,.10);
}
.journey-period-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
}
.journey-period-title b{
  font-size:12px;
}
.journey-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.journey-stats>div{
  min-height:78px;
  padding:13px;
  border:1px solid rgba(181,200,255,.075);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(24,30,47,.72),rgba(10,14,24,.70));
}
.journey-stats b,
.journey-stats small{
  display:block;
}
.journey-stats b{
  color:#f5f7ff;
  font-size:20px;
  letter-spacing:-.03em;
}
.journey-stats small{
  margin-top:5px;
  color:#728098;
  font-size:8px;
}
.journey-panel{
  margin-top:12px;
  padding:14px;
  border:1px solid rgba(180,198,255,.075);
  border-radius:17px;
  background:rgba(255,255,255,.018);
}
.journey-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
}
.journey-panel-head h3{
  margin:3px 0 0;
  font-size:14px;
  letter-spacing:-.025em;
}
.journey-panel-head>small{
  color:#65728a;
  font-size:7.5px;
}
.journey-trend{
  height:190px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  align-items:end;
}
.journey-trend-column{
  min-width:0;
  height:100%;
  display:grid;
  grid-template-rows:28px minmax(0,1fr) 18px;
  text-align:center;
}
.journey-trend-value{
  align-self:end;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#77849c;
  font-size:7px;
}
.journey-trend-bar-wrap{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin:4px 6px;
  overflow:hidden;
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.008),rgba(255,255,255,.025));
}
.journey-trend-bar-wrap i{
  width:64%;
  min-height:4px;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#ffd07f,#ff9b8e 56%,#9578ff);
  box-shadow:0 0 20px rgba(255,162,120,.12);
  transition:height .25s ease;
}
.journey-trend-column.current .journey-trend-bar-wrap i{
  background:linear-gradient(180deg,#69edff,#ae8cff,#ff8fcf);
}
.journey-trend-column small{
  color:#5f6d84;
  font-size:7px;
}
.journey-change{
  margin-top:10px;
  padding:10px 11px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  align-items:center;
  border:1px solid rgba(180,198,255,.06);
  border-radius:13px;
  background:rgba(255,255,255,.016);
}
.journey-change>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:16px;
}
.journey-change.up>span{background:rgba(86,230,172,.09);color:#71edb9}
.journey-change.down>span{background:rgba(255,139,139,.08);color:#ff9999}
.journey-change.neutral>span{background:rgba(129,151,255,.08);color:#9baaff}
.journey-change b,
.journey-change small{display:block}
.journey-change b{font-size:9px}
.journey-change small{margin-top:2px;color:#718099;font-size:8px}
.journey-top-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.journey-rank-list{
  display:grid;
  gap:5px;
}
.journey-rank-list>div,
.journey-rank-list>button{
  width:100%;
  min-width:0;
  padding:7px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.014);
  color:inherit;
  text-align:left;
}
.journey-rank-list>button{
  cursor:pointer;
}
.journey-rank-list>button:hover{
  background:rgba(255,255,255,.035);
}
.journey-rank-list b{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:8.5px;
}
.journey-rank-list span{
  flex:none;
  color:#6c7a91;
  font-size:7px;
}
.journey-track-rank-list>button{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
}
.journey-track-rank-list>button span{
  max-width:120px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.journey-empty-copy{
  display:block;
  padding:9px;
  color:#66748b;
  font-size:8px;
}
.journey-timeline-panel{
  margin-top:10px;
}
.journey-timeline{
  display:grid;
  gap:14px;
}
.journey-day-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.journey-day-title b{
  font-size:10px;
  text-transform:capitalize;
}
.journey-day-title span{
  color:#627087;
  font-size:7px;
}
.journey-event-list{
  display:grid;
  gap:4px;
}
.journey-event{
  width:100%;
  min-width:0;
  padding:7px 8px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto 22px;
  gap:9px;
  align-items:center;
  border:0;
  border-radius:11px;
  background:rgba(255,255,255,.012);
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.journey-event:hover{
  background:rgba(255,255,255,.034);
}
.journey-event-time{
  color:#7f8ca3;
  font-size:8px;
}
.journey-event-copy{
  min-width:0;
}
.journey-event-copy b,
.journey-event-copy small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.journey-event-copy b{font-size:9px}
.journey-event-copy small{margin-top:2px;color:#69778e;font-size:7.5px}
.journey-event-duration{
  color:#7d8aa1;
  font-size:7.5px;
}
.journey-event em{
  font-style:normal;
  color:#ffd07f;
  font-size:9px;
}
.journey-empty{
  padding:28px 14px;
  text-align:center;
  border:1px dashed rgba(181,200,255,.08);
  border-radius:14px;
}
.journey-empty span,
.journey-empty b,
.journey-empty small{
  display:block;
}
.journey-empty span{
  margin-bottom:8px;
  color:#ffd07f;
  font-size:24px;
}
.journey-empty b{font-size:10px}
.journey-empty small{
  max-width:520px;
  margin:5px auto 0;
  color:#6d7a91;
  font-size:8px;
  line-height:1.5;
}
.journey-precision-note{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(255,204,122,.08);
  border-radius:12px;
  background:rgba(255,204,122,.025);
  color:#8f826d;
  font-size:7.5px;
  line-height:1.5;
}

@media(max-width:780px){
  .journey-title-row{
    display:block;
  }
  .journey-live-badge{
    display:inline-block;
    margin-top:9px;
  }
  .journey-stats{
    grid-template-columns:1fr 1fr;
  }
  .journey-top-grid{
    grid-template-columns:1fr;
  }
  .journey-trend{
    height:160px;
    gap:4px;
  }
  .journey-trend-value{
    font-size:6px;
  }
  .journey-event{
    grid-template-columns:42px minmax(0,1fr) auto;
  }
  .journey-event-duration{
    display:none;
  }
  .journey-event em{
    display:none;
  }
}


/* ============================================================
   SONQELO V36.9 — STUDIO PLAYER CORE
   ============================================================ */

.studio-card .lab-icon{
  background:
    radial-gradient(circle at 25% 20%,rgba(88,235,255,.24),transparent 42%),
    linear-gradient(145deg,rgba(98,78,255,.18),rgba(232,87,210,.14));
  color:#67efff;
}
.studio-player-modal-card{
  width:min(95vw,1040px)!important;
  max-height:92vh;
  overflow:auto;
  background:
    radial-gradient(circle at 8% 0%,rgba(80,228,255,.075),transparent 30%),
    radial-gradient(circle at 92% 5%,rgba(180,100,255,.09),transparent 32%),
    linear-gradient(160deg,#111827 0%,#0c111d 52%,#080b13 100%)!important;
}
.studio-player-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.studio-player-title>div:first-child{min-width:0}
.studio-current-profile-box{
  flex:none;
  min-width:150px;
  padding:11px 13px;
  border:1px solid rgba(95,235,255,.13);
  border-radius:15px;
  background:rgba(95,235,255,.035);
}
.studio-current-profile-box small,
.studio-current-profile-box b{display:block}
.studio-current-profile-box small{
  color:#668098;
  font-size:7px;
  letter-spacing:.12em;
}
.studio-current-profile-box b{
  margin-top:4px;
  color:#7fefff;
  font-size:11px;
}
.studio-visualizer{
  width:100%;
  height:150px;
  display:block;
  margin:16px 0;
  border:1px solid rgba(167,191,255,.07);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006));
}
.studio-section{
  margin-top:12px;
  padding:15px;
  border:1px solid rgba(177,198,255,.075);
  border-radius:17px;
  background:rgba(255,255,255,.016);
}
.studio-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:12px;
}
.studio-section-head h3{
  margin:3px 0 0;
  font-size:14px;
  letter-spacing:-.025em;
}
.studio-section-head>small{
  color:#65748b;
  font-size:7.5px;
}
.studio-profile-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.studio-profile-card{
  min-height:112px;
  padding:12px;
  display:grid;
  align-content:start;
  gap:4px;
  border:1px solid rgba(178,198,255,.075);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(22,30,48,.72),rgba(11,15,25,.70));
  color:#eef4ff;
  text-align:left;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.studio-profile-card:hover{
  transform:translateY(-1px);
  border-color:rgba(99,235,255,.20);
}
.studio-profile-card.active{
  border-color:rgba(99,235,255,.33);
  background:
    radial-gradient(circle at 10% 0%,rgba(93,236,255,.09),transparent 42%),
    linear-gradient(145deg,rgba(25,35,57,.90),rgba(13,17,29,.88));
  box-shadow:0 12px 34px rgba(65,210,255,.055);
}
.studio-profile-card>span{
  color:#69efff;
  font-size:18px;
}
.studio-profile-card b{font-size:10px}
.studio-profile-card small{
  color:#718098;
  font-size:7.5px;
  line-height:1.42;
}
.studio-tone-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.studio-tone-control{
  min-width:0;
  padding:11px;
  border:1px solid rgba(177,198,255,.06);
  border-radius:13px;
  background:rgba(255,255,255,.012);
}
.studio-tone-control>span,
.studio-tone-control>b,
.studio-tone-control>small,
.studio-tone-control>em{
  display:block;
}
.studio-tone-control b{font-size:9px}
.studio-tone-control small{
  margin-top:2px;
  color:#67758d;
  font-size:7px;
}
.studio-tone-control input{
  width:100%;
  margin:12px 0 7px;
  accent-color:#72eefa;
}
.studio-tone-control em{
  color:#76eaf6;
  font-size:8px;
  font-style:normal;
  text-align:right;
}
.studio-headroom-row{
  margin-top:10px;
  min-height:58px;
  padding:10px 11px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(177,198,255,.06);
  border-radius:13px;
  background:rgba(255,255,255,.012);
}
.studio-headroom-row b,
.studio-headroom-row small{display:block}
.studio-headroom-row b{font-size:9px}
.studio-headroom-row small{
  margin-top:2px;
  color:#69778e;
  font-size:7.2px;
  line-height:1.4;
}
.studio-headroom-value{
  color:#6fe8f5;
  font-size:8px;
}
.studio-custom-profile-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.studio-custom-profile-row input,
.studio-custom-profile-row select{
  min-width:0;
  height:36px;
  padding:0 10px;
  border:1px solid rgba(180,199,255,.09);
  border-radius:10px;
  background:#101622;
  color:#e9effa;
  font-size:8.5px;
}
.studio-custom-profile-row-secondary{
  margin-top:7px;
}
.studio-note{
  margin-top:12px;
  padding:11px 12px;
  border:1px solid rgba(104,235,255,.08);
  border-radius:13px;
  background:rgba(104,235,255,.022);
}
.studio-note b,
.studio-note small{display:block}
.studio-note b{
  color:#7ce9f6;
  font-size:8.5px;
}
.studio-note small{
  margin-top:3px;
  color:#66758d;
  font-size:7.3px;
  line-height:1.45;
}

@media(max-width:780px){
  .studio-player-title{display:block}
  .studio-current-profile-box{
    display:inline-block;
    margin-top:10px;
  }
  .studio-visualizer{height:120px}
  .studio-profile-grid{grid-template-columns:1fr 1fr}
  .studio-tone-grid{grid-template-columns:1fr}
  .studio-section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .studio-headroom-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .studio-headroom-value{
    grid-column:1 / 2;
  }
  .studio-headroom-row input{
    grid-column:2;
    grid-row:1 / span 2;
  }
  .studio-custom-profile-row{
    grid-template-columns:1fr;
  }
}