:root{
      --bg:#090b10;
      --panel:rgba(255,255,255,.055);
      --panel-2:rgba(255,255,255,.08);
      --line:rgba(255,255,255,.10);
      --line-2:rgba(255,255,255,.18);
      --text:rgba(255,255,255,.95);
      --muted:rgba(255,255,255,.58);
      --muted-2:rgba(255,255,255,.38);
      --violet:#8a7bff;
      --green:#22c55e;
      --yellow:#f59e0b;
      --red:#ef4444;
      --shadow:0 20px 60px rgba(0,0,0,.35);
      --dur:.18s;
      --desktop-card:330px;
      --desktop-card-h:calc(var(--desktop-card) + 22px);
      --desktop-gap:16px;
      --desktop-info:460px;
      --desktop-chat:430px;
      --desktop-content-max:calc(var(--desktop-card) * 2 + var(--desktop-gap) + var(--desktop-info) + var(--desktop-chat) + 64px);
    }
    @media (max-width:2300px){
      :root{
        --desktop-card:320px;
        --desktop-info:440px;
        --desktop-chat:420px;
      }
    }
    @media (max-width:1920px){
      :root{
        --desktop-card:300px;
        --desktop-gap:14px;
        --desktop-info:420px;
        --desktop-chat:400px;
      }
    }
    @media (max-width:1600px){
      :root{
        --desktop-card:280px;
        --desktop-gap:14px;
        --desktop-info:400px;
        --desktop-chat:380px;
      }
    }
    *{box-sizing:border-box}
    html,body{
      margin:0;
      height:100%;
      background:var(--bg);
      color:var(--text);
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }
    body{
      background-image:
        radial-gradient(circle at 18% 15%, rgba(138,123,255,.14), transparent 24%),
        radial-gradient(circle at 82% 0%, rgba(255,255,255,.05), transparent 22%),
        radial-gradient(circle at 70% 80%, rgba(138,123,255,.05), transparent 18%),
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(135deg,#0c1018 0%,#090b10 45%,#111726 100%);
      background-size:auto,auto,auto,24px 24px,24px 24px,auto;
      overflow:hidden;
    }
    body.mobile-detail-open .sidebar{display:none}
    body.mobile-detail-open .main{display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    a{color:inherit;text-decoration:none}
    input[type="range"]{accent-color:var(--violet)}
    select option{
      background:#121727;
      color:#fff;
    }
    ::-webkit-scrollbar{width:8px;height:8px}
    ::-webkit-scrollbar-track{background:transparent}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
    .glass{
      border:1px solid var(--line);
      background:var(--panel);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      box-shadow:var(--shadow);
    }
    .shell{
      height:100vh;
      padding:6px;
      display:flex;
      flex-direction:column;
      gap:8px;
      overflow:hidden;
      opacity:0;
      transform:translateY(8px);
      transition:opacity .45s ease, transform .45s ease;
    }
    body.app-ready .shell{
      opacity:1;
      transform:none;
    }
    .topbar{
      border-radius:18px;
      padding:8px 10px;
      display:grid;
      grid-template-columns:auto minmax(280px,1fr) auto;
      align-items:center;
      gap:10px;
      min-height:58px;
      flex:0 0 auto;
    }
    .topbar-left{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:14px;
      font-weight:800;
      white-space:nowrap;
      min-width:0;
    }
    .brand-logo{
      flex:0 0 auto;
    }
    .brand-title{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--violet);
      box-shadow:0 0 16px rgba(138,123,255,.7);
      flex:0 0 auto;
    }
    .top-mobile-back,
    .top-mobile-track,
    .mobile-detail-actions{
      display:none !important;
    }
    .top-mobile-track{
      min-width:0;
      align-items:center;
      gap:10px;
      flex:1 1 auto;
    }
    .top-mobile-track-title{
      font-size:15px;
      font-weight:900;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      letter-spacing:-.02em;
    }
    .topbar-right{
      display:flex;
      align-items:center;
      gap:8px;
      justify-self:end;
    }
    .mobile-detail-actions{
      align-items:center;
      gap:10px;
    }
    #topEditTrackBtn,
    #topMobileStatus{
      width:34px;
      height:34px;
    }
    #topMobileStatus{
      display:none;
      align-items:center;
      justify-content:center;
      font-size:14px;
      line-height:1;
    }
    .global-player{
      min-width:0;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      border-radius:16px;
      padding:8px 10px;
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      gap:10px;
      align-items:center;
    }
    .global-player.idle{opacity:.82}
    .player-main{
      min-width:0;
      display:grid;
      gap:5px;
    }
    .player-head{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:10px;
      min-width:0;
    }
    .player-name{
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      color:rgba(255,255,255,.92);
    }
    .player-times{
      font-size:11px;
      color:var(--muted);
      white-space:nowrap;
      flex:0 0 auto;
    }
    .player-progress{
      width:100%;
      margin:0;
      appearance:none;
      height:4px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      outline:none;
    }
    .player-progress::-webkit-slider-thumb{
      appearance:none;
      width:13px;
      height:13px;
      border-radius:50%;
      background:#d9d3ff;
      box-shadow:0 0 0 3px rgba(138,123,255,.28);
      border:none;
    }
    .player-progress::-moz-range-thumb{
      width:13px;
      height:13px;
      border:none;
      border-radius:50%;
      background:#d9d3ff;
      box-shadow:0 0 0 3px rgba(138,123,255,.28);
    }
    .volume-box{
      display:flex;
      align-items:center;
      gap:8px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      border-radius:14px;
      padding:8px 10px;
      min-width:150px;
    }
    .volume-label{
      font-size:12px;
      color:rgba(255,255,255,.86);
      white-space:nowrap;
    }
    .volume-slider{
      width:100%;
      margin:0;
    }
    .layout{
      display:grid;
      grid-template-columns:360px minmax(0,1fr);
      gap:8px;
      min-height:0;
      flex:1;
      overflow:hidden;
    }
    .sidebar{
      border-radius:22px;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height:0;
      height:100%;
    }
    .sidebar-head{
      padding:12px;
      border-bottom:1px solid var(--line);
      display:flex;
      flex-direction:column;
      gap:8px;
      flex:0 0 auto;
    }
    .sidebar-title{
      font-size:13px;
      font-weight:800;
      color:rgba(255,255,255,.8);
      letter-spacing:.03em;
    }
    .search-wrap{position:relative}
    .search-icon{
      position:absolute;
      left:14px;
      top:50%;
      transform:translateY(-50%);
      color:rgba(255,255,255,.34);
      pointer-events:none;
      font-size:13px;
    }
    .search-input,
    .text-input,
    .select,
    .textarea,
    .file-input{
      width:100%;
      border:1px solid var(--line);
      border-radius:14px;
      background:rgba(255,255,255,.07);
      color:var(--text);
      outline:none;
      transition:border-color var(--dur), background var(--dur);
    }
    .search-input{padding:11px 14px 11px 38px}
    .text-input,.select,.file-input{padding:11px 13px}
    .textarea{
      min-height:106px;
      padding:11px 13px;
      resize:vertical;
    }
    .search-input:focus,.text-input:focus,.select:focus,.textarea:focus{
      border-color:rgba(138,123,255,.34);
      background:rgba(255,255,255,.10);
    }
    .filters{
      display:grid;
      grid-template-columns:repeat(6,minmax(0,1fr));
      gap:6px;
    }
    .filter-btn{
      position:relative;
      border:1px solid var(--line);
      background:rgba(255,255,255,.06);
      border-radius:11px;
      padding:9px 0;
      min-height:34px;
      transition:background var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur);
      font-size:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color:rgba(255,255,255,.72);
    }
    .filter-btn::before{
      content:attr(data-icon);
      font-size:15px;
      font-weight:900;
      line-height:1;
    }
    .filter-btn[data-badge]:not([data-badge=""]):after{
      content:attr(data-badge);
      position:absolute;
      top:-4px;
      right:-4px;
      min-width:16px;
      height:16px;
      padding:0 4px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:10px;
      font-weight:1000;
      background:rgba(239,68,68,.96);
      color:#fff;
      box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 0 14px rgba(239,68,68,.36);
    }
    .filter-btn[data-filter="ready"]{color:#49db78}
    .filter-btn[data-filter="warning"]{color:#ffbf2e}
    .filter-btn[data-filter="not_ready"]{color:#ff5050}
    .filter-btn[data-filter="all"]{color:#d6d0ff}
    .filter-btn[data-filter="unread"]{color:#ff6b6b}
    .filter-btn[data-filter="concert"]{color:#b77cff}
    .filter-btn:hover{
      background:rgba(255,255,255,.10);
      border-color:var(--line-2);
    }
    .filter-btn.active{
      background:rgba(255,255,255,.14);
      border-color:rgba(255,255,255,.18);
      box-shadow:0 0 16px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.05);
    }
    .filter-btn.active[data-filter="ready"]{
      background:rgba(34,197,94,.12);
      border-color:rgba(34,197,94,.28);
    }
    .filter-btn.active[data-filter="warning"]{
      background:rgba(245,158,11,.12);
      border-color:rgba(245,158,11,.28);
    }
    .filter-btn.active[data-filter="not_ready"]{
      background:rgba(239,68,68,.12);
      border-color:rgba(239,68,68,.28);
    }
    .filter-btn.active[data-filter="all"]{
      background:rgba(138,123,255,.14);
      border-color:rgba(138,123,255,.28);
    }
    .filter-btn.active[data-filter="unread"]{
      background:rgba(239,68,68,.14);
      border-color:rgba(239,68,68,.34);
      box-shadow:0 0 18px rgba(239,68,68,.12);
    }
    .filter-btn.active[data-filter="concert"]{
      background:rgba(183,124,255,.15);
      border-color:rgba(183,124,255,.34);
      box-shadow:0 0 18px rgba(183,124,255,.14);
    }
    .status-picker{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:10px;
    }
    .status-choice{
      border:1px solid var(--line);
      background:rgba(255,255,255,.05);
      color:var(--text);
      border-radius:16px;
      min-height:64px;
      padding:10px 8px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:0;
      transition:background var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur);
      text-align:center;
    }
    .status-choice:hover{
      background:rgba(255,255,255,.10);
      border-color:var(--line-2);
      transform:translateY(-1px);
    }
    .status-choice.active{
      box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 14px 26px rgba(0,0,0,.18);
    }
    .status-choice-icon{
      width:28px;
      height:28px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
      font-weight:900;
      border:2px solid currentColor;
      background:rgba(255,255,255,.04);
      box-shadow:0 0 12px currentColor;
      line-height:1;
    }
    .status-choice-label{
      display:none;
    }
    .status-choice.ready{color:#49db78}
    .status-choice.warning{color:#ffbf2e}
    .status-choice.not_ready{color:#ff5050}
    .status-choice.concert{color:#b77cff}
    .status-choice.ready.active{
      background:rgba(34,197,94,.12);
      border-color:rgba(34,197,94,.30);
    }
    .status-choice.warning.active{
      background:rgba(245,158,11,.12);
      border-color:rgba(245,158,11,.30);
    }
    .status-choice.not_ready.active{
      background:rgba(239,68,68,.12);
      border-color:rgba(239,68,68,.30);
    }
    .status-choice.concert.active{
      background:rgba(183,124,255,.13);
      border-color:rgba(183,124,255,.34);
    }
    .sidebar-note{
      font-size:11px;
      color:var(--muted-2);
      line-height:1.4;
    }
    .tracks-list{
      padding:8px;
      overflow:auto;
      min-height:0;
      flex:1 1 auto;
    }
    .sidebar-footer{
      padding:8px 12px 10px;
      border-top:1px solid var(--line);
      font-size:11px;
      color:var(--muted-2);
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .sidebar-footer-unread{
      color:rgba(255,122,122,.92);
      font-weight:800;
      white-space:nowrap;
    }
    .track-item{
      position:relative;
      margin-bottom:8px;
      border-radius:18px;
    }
    .track-item.dragging{opacity:.45}
    .track-item.drag-over-top::before,
    .track-item.drag-over-bottom::after{
      content:"";
      position:absolute;
      left:10px;
      right:10px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, transparent, rgba(138,123,255,.95), transparent);
      pointer-events:none;
      z-index:3;
    }
    .track-item.drag-over-top::before{top:-5px}
    .track-item.drag-over-bottom::after{bottom:-5px}
    .track-card{
      width:100%;
      text-align:left;
      border:1px solid var(--line);
      color:var(--text);
      border-radius:18px;
      padding:11px 40px 11px 12px;
      transition:background var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur);
      position:relative;
      overflow:hidden;
      min-height:46px;
      display:flex;
      align-items:center;
    }
    .track-card::before,
    .track-card::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius:inherit;
    }
    .track-card::before{
      opacity:.95;
      transition:opacity var(--dur), transform .9s ease;
    }
    .track-card::after{
      opacity:0;
      mix-blend-mode:screen;
      filter:blur(18px);
      transition:opacity var(--dur);
    }
    .track-card.status-ready{
      background:rgba(255,255,255,.045);
      border-color:rgba(34,197,94,.28);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(34,197,94,.05);
    }
    .track-card.status-ready::before{
      background:
        radial-gradient(circle at 18% 50%, rgba(34,197,94,.16), transparent 54%),
        linear-gradient(135deg, rgba(34,197,94,.20), rgba(34,197,94,.06) 42%, rgba(255,255,255,.02) 82%);
    }
    .track-card.status-ready::after{
      background:
        radial-gradient(circle at 20% 50%, rgba(34,197,94,.22), transparent 42%);
    }
    .track-card.status-warning{
      background:rgba(255,255,255,.045);
      border-color:rgba(245,158,11,.28);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(245,158,11,.05);
    }
    .track-card.status-warning::before{
      background:
        radial-gradient(circle at 18% 50%, rgba(245,158,11,.16), transparent 54%),
        linear-gradient(135deg, rgba(245,158,11,.20), rgba(245,158,11,.06) 42%, rgba(255,255,255,.02) 82%);
    }
    .track-card.status-warning::after{
      background:
        radial-gradient(circle at 20% 50%, rgba(245,158,11,.22), transparent 42%);
    }
    .track-card.status-not_ready{
      background:rgba(255,255,255,.045);
      border-color:rgba(239,68,68,.26);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(239,68,68,.05);
    }
    .track-card.status-not_ready::before{
      background:
        radial-gradient(circle at 18% 50%, rgba(239,68,68,.16), transparent 54%),
        linear-gradient(135deg, rgba(239,68,68,.20), rgba(239,68,68,.06) 42%, rgba(255,255,255,.02) 82%);
    }
    .track-card.status-not_ready::after{
      background:
        radial-gradient(circle at 20% 50%, rgba(239,68,68,.22), transparent 42%);
    }
    .track-card.status-concert{
      background:rgba(255,255,255,.045);
      border-color:rgba(183,124,255,.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 1px rgba(183,124,255,.08);
    }
    .track-card.status-concert::before{
      background:
        radial-gradient(circle at 18% 50%, rgba(183,124,255,.20), transparent 54%),
        linear-gradient(135deg, rgba(183,124,255,.25), rgba(183,124,255,.07) 42%, rgba(255,255,255,.02) 82%);
    }
    .track-card.status-concert::after{
      background:
        radial-gradient(circle at 20% 50%, rgba(183,124,255,.28), transparent 42%);
    }
    .track-card:hover{
      border-color:var(--line-2);
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(0,0,0,.16);
    }
    .track-card.active{
      border-color:rgba(255,255,255,.18);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 18px 34px rgba(0,0,0,.24);
    }
    .track-card.active::before{
      opacity:1;
      transform:scale(1.02);
      animation:trackCardBreathe 3.8s ease-in-out infinite;
    }
    .track-card.active::after{
      opacity:1;
      animation:trackCardGlowPulse 3.8s ease-in-out infinite;
    }
    .track-card.active:hover{
      transform:none;
      border-color:rgba(255,255,255,.18);
    }
    .track-title-row{
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      width:100%;
    }
    .track-status-icon{
      width:30px;
      height:30px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:17px;
      font-weight:900;
      border:2px solid currentColor;
      background:rgba(255,255,255,.04);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.03),
        0 0 12px currentColor;
      flex:0 0 auto;
      line-height:1;
      cursor:help;
    }
    .track-status-icon.ready{color:#49db78}
    .track-status-icon.warning{color:#ffbf2e}
    .track-status-icon.not_ready{color:#ff5050}
    .track-status-icon.concert{color:#b77cff}
    .track-sample-icon{
      width:20px;
      height:20px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      line-height:1;
      color:#d8d1ff;
      background:rgba(138,123,255,.16);
      border:1px solid rgba(138,123,255,.32);
      box-shadow:0 0 14px rgba(138,123,255,.18);
      flex:0 0 auto;
    }
    .track-title{
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      min-width:0;
      width:100%;
      flex:1 1 auto;
    }
    .track-unread-badge{
      width:24px;
      height:24px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
      color:#fff4f4;
      flex:0 0 auto;
      line-height:1;
      position:relative;
      filter:drop-shadow(0 0 10px rgba(239,68,68,.38));
    }
    .track-unread-count{
      position:absolute;
      right:-6px;
      top:-7px;
      min-width:16px;
      height:16px;
      padding:0 4px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:10px;
      font-weight:1000;
      background:rgba(239,68,68,.96);
      color:#fff;
      box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 0 14px rgba(239,68,68,.36);
    }
    .track-card.has-unread{
      border-color:rgba(239,68,68,.24);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(239,68,68,.06);
    }
    .track-delete{
      position:absolute;
      top:50%;
      right:8px;
      transform:translateY(-50%);
      width:26px;
      height:26px;
      border-radius:9px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      color:#ffb9b9;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background var(--dur), border-color var(--dur), color var(--dur);
      z-index:2;
      font-size:13px;
      padding:0;
    }
    .track-delete:hover{
      background:rgba(239,68,68,.18);
      border-color:rgba(239,68,68,.34);
      color:#fff;
    }
    .main{
      border-radius:22px;
      padding:0;
      min-height:0;
      overflow:auto;
      position:relative;
      display:block;
    }
    .main-empty{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
    }
    .empty-box{
      border:1px dashed rgba(255,255,255,.12);
      border-radius:18px;
      padding:16px;
      color:var(--muted-2);
      text-align:center;
      background:rgba(255,255,255,.03);
      font-size:13px;
    }
    .viewer{
      min-height:100%;
      padding:18px 18px 20px;
      position:relative;
      overflow:hidden;
      --status-rgb:138,123,255;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(11,14,21,.94), rgba(8,10,16,.88));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 0 0 1px rgba(var(--status-rgb), .14),
        0 0 0 1px rgba(var(--status-rgb), .08),
        0 0 48px rgba(var(--status-rgb), .12);
    }
    .viewer.status-ready{--status-rgb:34,197,94}
    .viewer.status-warning{--status-rgb:245,158,11}
    .viewer.status-not_ready{--status-rgb:239,68,68}
    .viewer.status-concert{--status-rgb:183,124,255}
    .viewer::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:radial-gradient(rgba(255,255,255,.065) 1px, transparent 1px);
      background-size:11px 11px;
      opacity:.10;
      pointer-events:none;
      z-index:0;
    }
    .viewer::after{
      content:"";
      position:absolute;
      inset:-18%;
      pointer-events:none;
      z-index:0;
      background:
        radial-gradient(circle at 4% 26%, rgba(var(--status-rgb), .58), transparent 24%),
        radial-gradient(circle at 8% 54%, rgba(var(--status-rgb), .42), transparent 28%),
        radial-gradient(circle at 20% 76%, rgba(var(--status-rgb), .22), transparent 20%),
        radial-gradient(circle at 78% 14%, rgba(255,255,255,.05), transparent 16%);
      filter:blur(18px);
      opacity:1;
      animation:viewerEdgePulse 6.2s ease-in-out infinite;
    }
    .viewer-bg{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:1;
      z-index:0;
      overflow:hidden;
      filter:saturate(1.1);
    }
    .viewer-bg::before{
      content:"";
      position:absolute;
      inset:-24%;
      background:
        radial-gradient(circle at 2% 42%, rgba(var(--status-rgb), .82), transparent 30%),
        radial-gradient(circle at 10% 52%, rgba(var(--status-rgb), .66), transparent 34%),
        radial-gradient(circle at 20% 30%, rgba(var(--status-rgb), .46), transparent 22%),
        radial-gradient(circle at 28% 18%, rgba(var(--status-rgb), .30), transparent 18%),
        linear-gradient(135deg,
          rgba(var(--status-rgb), .56) 0%,
          rgba(var(--status-rgb), .36) 12%,
          rgba(var(--status-rgb), .18) 24%,
          rgba(var(--status-rgb), .08) 40%,
          rgba(var(--status-rgb), 0) 66%
        );
      opacity:1;
      transform-origin:10% 44%;
      animation:viewerStatusBreathe 7.2s ease-in-out infinite;
    }
    .viewer-bg::after{
      content:"";
      position:absolute;
      top:-14%;
      left:-12%;
      width:82%;
      height:76%;
      transform:rotate(-11deg);
      background:
        repeating-linear-gradient(
          -33deg,
          rgba(var(--status-rgb), .30) 0 12px,
          rgba(255,255,255,.028) 12px 24px
        );
      opacity:.56;
      mask-image:linear-gradient(
        135deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.54) 28%,
        rgba(0,0,0,.18) 48%,
        rgba(0,0,0,0) 74%
      );
      -webkit-mask-image:linear-gradient(
        135deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.54) 28%,
        rgba(0,0,0,.18) 48%,
        rgba(0,0,0,0) 74%
      );
      border-radius:28px;
      animation:viewerStatusSweep 8.4s ease-in-out infinite;
    }
    .viewer-inner{
      position:relative;
      z-index:1;
      display:grid;
      gap:14px;
    }
    .viewer-stage{
      width:100%;
      max-width:var(--desktop-content-max);
      margin:0 auto;
      display:grid;
      gap:14px;
    }
    .viewer-toolbar{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    .btn{
      border:1px solid var(--line);
      background:rgba(255,255,255,.07);
      color:var(--text);
      border-radius:13px;
      padding:10px 14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      transition:background var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur);
    }
    .btn:hover{
      background:rgba(255,255,255,.12);
      border-color:var(--line-2);
      transform:translateY(-1px);
    }
    .btn-primary{
      background:linear-gradient(135deg, rgba(138,123,255,.18), rgba(138,123,255,.08));
      border-color:rgba(138,123,255,.28);
    }
    .btn:disabled{
      cursor:not-allowed;
      opacity:.55;
      transform:none;
    }
    .icon-btn{
      width:34px;
      height:34px;
      padding:0;
      border-radius:11px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.07);
      color:var(--text);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition:background var(--dur), border-color var(--dur), transform var(--dur), box-shadow var(--dur);
      flex:0 0 auto;
      font-size:14px;
      line-height:1;
    }
    .icon-btn:hover{
      background:rgba(255,255,255,.12);
      border-color:var(--line-2);
    }
    .icon-btn.active{
      border-color:rgba(138,123,255,.42);
      background:rgba(138,123,255,.16);
      box-shadow:0 0 18px rgba(138,123,255,.16);
    }
    .icon-btn.add-btn{
      width:34px;
      height:34px;
      font-size:18px;
      font-weight:800;
    }
    .hero{
      padding-top:2px;
    }
    .title-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      width:100%;
    }
    .hero-title{
      margin:0;
      font-size:clamp(22px, 3vw, 54px);
      line-height:.95;
      font-weight:900;
      letter-spacing:-.04em;
      text-transform:uppercase;
      color:#ececff;
      text-shadow:
        0 0 20px rgba(255,255,255,.05),
        0 0 36px rgba(138,123,255,.08);
      min-width:0;
      word-break:break-word;
    }
    .status-inline{
      width:20px;
      height:20px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:900;
      border:2px solid currentColor;
      background:rgba(255,255,255,.04);
      box-shadow:
        0 0 0 2px rgba(255,255,255,.03),
        0 0 14px currentColor;
      cursor:help;
      line-height:1;
      flex:0 0 auto;
    }
    .status-inline.ready{color:#49db78}
    .status-inline.warning{color:#ffbf2e}
    .status-inline.not_ready{color:#ff5050}
    .status-inline.concert{color:#b77cff}
    .hero-status{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      flex:0 0 auto;
      white-space:nowrap;
    }
    .hero-status .status-inline{
      width:24px;
      height:24px;
      font-size:14px;
    }
    .hero-status-text{
      font-size:15px;
      font-weight:800;
      color:rgba(255,255,255,.9);
    }
    .desktop-layout{
      display:grid;
      grid-template-columns:calc(var(--desktop-card) * 2 + var(--desktop-gap)) var(--desktop-info) var(--desktop-chat);
      gap:16px;
      align-items:start;
      justify-content:center;
    }
    .desktop-left{
      display:grid;
      gap:14px;
    }
    .desktop-media-grid{
      display:grid;
      grid-template-columns:repeat(2, var(--desktop-card));
      grid-auto-rows:var(--desktop-card-h);
      gap:var(--desktop-gap);
      align-items:stretch;
    }
    .desktop-info{
      width:var(--desktop-info);
      display:grid;
      gap:14px;
      align-content:start;
    }
    .media-section{
      display:grid;
      gap:8px;
      width:var(--desktop-card);
    }
    .media-label{
      font-size:15px;
      font-weight:800;
      color:rgba(255,255,255,.86);
      padding-left:2px;
    }
    .media-card-title{
      position:absolute;
      top:10px;
      left:12px;
      right:12px;
      z-index:2;
      text-align:center;
      font-size:13px;
      font-weight:900;
      letter-spacing:.03em;
      color:rgba(255,255,255,.90);
      text-transform:uppercase;
      pointer-events:none;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .media-card{
      position:relative;
      border:1px solid rgba(255,255,255,.12);
      border-radius:22px;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.10), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 20px 50px rgba(0,0,0,.25);
      overflow:hidden;
    }
    .media-card.desktop-square{
      width:var(--desktop-card);
      height:var(--desktop-card-h);
      padding:36px 12px 12px;
      display:grid;
      grid-template-rows:auto 1fr auto;
      gap:10px;
    }
    .media-card.playing{
      border-color:rgba(255,255,255,.46);
      background:
        radial-gradient(circle at 50% 22%, rgba(255,255,255,.32), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.12));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        inset 0 0 34px rgba(255,255,255,.08),
        0 0 0 1px rgba(255,255,255,.20),
        0 20px 50px rgba(0,0,0,.25),
        0 0 38px rgba(255,255,255,.12),
        0 0 44px rgba(138,123,255,.18);
    }
    .media-card.empty{
      width:var(--desktop-card);
      height:var(--desktop-card-h);
      display:flex;
      align-items:center;
      justify-content:center;
      padding-top:34px;
      color:var(--muted-2);
      font-size:13px;
      background:rgba(255,255,255,.04);
      border-style:dashed;
    }
    .desktop-meta-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-size:11px;
      color:rgba(255,255,255,.60);
      min-height:16px;
    }
    .desktop-meta-row span{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:48%;
    }
    .speaker-wrap{
      position:relative;
      z-index:1;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:0;
    }
    .media-card.desktop-square .media-card-title,
    .media-card.desktop-square .desktop-meta-row,
    .media-card.desktop-square .desktop-card-bottom,
    .tab-file-top,
    .tab-file-preview,
    .tab-file-actions{
      position:relative;
      z-index:1;
    }
    .media-card.desktop-square::before,
    .media-card.desktop-square::after{
      display:none;
    }
    .speaker{
      position:relative;
      width:104px;
      height:104px;
      border-radius:50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.34), transparent 24%),
        radial-gradient(circle at 50% 50%, #20273a 0%, #0c1018 40%, #06080d 65%, #000 100%);
      border:4px solid rgba(235,236,255,.75);
      box-shadow:
        0 0 0 3px rgba(255,255,255,.08),
        0 0 0 7px rgba(138,123,255,.22),
        inset 0 0 12px rgba(255,255,255,.16),
        inset 0 -14px 26px rgba(0,0,0,.75),
        0 20px 40px rgba(0,0,0,.35);
      flex:0 0 auto;
    }
    .speaker::before{
      content:"";
      position:absolute;
      inset:13px;
      border-radius:50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 22%),
        radial-gradient(circle at 50% 45%, #56607b 0%, #151a27 52%, #090b10 100%);
      box-shadow:
        inset 0 3px 8px rgba(255,255,255,.18),
        inset 0 -18px 20px rgba(0,0,0,.5);
    }
    .speaker::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:28px;
      height:28px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 24%),
        radial-gradient(circle at 50% 50%, #33394b 0%, #0b0e16 70%, #000 100%);
      box-shadow:0 0 8px rgba(255,255,255,.08);
    }
    .media-card.playing .speaker{
      animation:speakerBassPulse .34s ease-in-out infinite;
      box-shadow:
        0 0 0 3px rgba(255,255,255,.12),
        0 0 0 8px rgba(138,123,255,.30),
        inset 0 0 14px rgba(255,255,255,.20),
        inset 0 -14px 26px rgba(0,0,0,.75),
        0 20px 40px rgba(0,0,0,.35),
        0 0 28px rgba(255,255,255,.14);
    }
    .media-card.playing .speaker::before{
      animation:speakerConePulse .22s ease-in-out infinite;
    }
    @keyframes speakerBassPulse{
      0%,100%{transform:scale(1)}
      38%{transform:scale(1.055)}
      62%{transform:scale(.985)}
    }
    @keyframes speakerConePulse{
      0%,100%{transform:scale(1)}
      50%{transform:scale(1.08)}
    }
    .desktop-card-bottom{
      display:grid;
      gap:7px;
      justify-items:center;
      align-self:end;
      min-width:0;
    }
    .media-name{
      width:100%;
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      text-align:center;
    }
    .desktop-actions{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:10px;
    }
    .desktop-extra-files{
      display:grid;
      gap:8px;
      max-height:112px;
      overflow:auto;
      padding-right:2px;
    }
    .desktop-extra-file{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.05);
      border-radius:14px;
      padding:8px 10px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto auto;
      align-items:center;
      gap:8px;
    }
    .desktop-extra-file-name{
      min-width:0;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .desktop-extra-file-meta{
      font-size:10px;
      color:rgba(255,255,255,.56);
      white-space:nowrap;
    }
    .lyrics-panel,
    .notes-panel{
      border:1px solid rgba(255,255,255,.12);
      border-radius:22px;
      padding:14px;
      background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.07), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 50px rgba(0,0,0,.22);
      display:grid;
      gap:10px;
      align-content:start;
    }
    .lyrics-title,
    .notes-title{
      font-size:15px;
      font-weight:800;
      color:rgba(255,255,255,.86);
    }
    .lyrics-body,
    .notes-body{
      white-space:pre-wrap;
      line-height:1.55;
      font-size:14px;
      color:rgba(255,255,255,.9);
      padding-right:4px;
      scrollbar-gutter:stable;
      scrollbar-width:thin;
      scrollbar-color:rgba(255,255,255,.28) transparent;
      overflow:auto;
    }
    .lyrics-body::-webkit-scrollbar,
    .notes-body::-webkit-scrollbar{
      width:10px;
    }
    .lyrics-body::-webkit-scrollbar-thumb,
    .notes-body::-webkit-scrollbar-thumb{
      background:rgba(255,255,255,.26);
      border-radius:999px;
    }
    .lyrics-body{
      min-height:calc(var(--desktop-card-h) * 2 + var(--desktop-gap) - 18px);
      max-height:calc(var(--desktop-card-h) * 2 + var(--desktop-gap) - 18px);
    }
    .notes-body{
      min-height:22px;
      max-height:120px;
      color:rgba(255,255,255,.84);
    }
    .notes-panel.empty{
      padding:10px 14px;
    }
    .notes-panel.empty .notes-body{
      max-height:22px;
      overflow:hidden;
    }
    .chat-panel{
      border:1px solid rgba(255,255,255,.12);
      border-radius:22px;
      padding:14px;
      background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.07), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 50px rgba(0,0,0,.22);
      display:grid;
      grid-template-rows:auto minmax(180px,1fr) auto;
      gap:12px;
      align-content:stretch;
      min-height:calc(var(--desktop-card-h) * 2 + var(--desktop-gap) + 116px);
      max-height:calc(var(--desktop-card-h) * 2 + var(--desktop-gap) + 116px);
      overflow:hidden;
    }
    .chat-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .chat-title-wrap{
      min-width:0;
      display:grid;
      gap:4px;
    }
    .chat-title{
      font-size:15px;
      font-weight:800;
      color:rgba(255,255,255,.88);
    }
    .chat-subtitle{
      font-size:12px;
      color:rgba(255,255,255,.48);
      line-height:1.35;
    }
    .role-pill,
    .role-pill-static{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      padding:8px 11px;
      color:#fff;
      min-height:36px;
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
    }
    .role-pill{
      cursor:pointer;
      transition:background var(--dur), border-color var(--dur), transform var(--dur);
    }
    .role-pill:hover{
      background:rgba(255,255,255,.11);
      border-color:rgba(255,255,255,.18);
      transform:translateY(-1px);
    }
    .role-icon{
      width:24px;
      height:24px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
      line-height:1;
      background:rgba(255,255,255,.08);
      box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 0 18px rgba(255,255,255,.08);
      flex:0 0 auto;
    }
    .role-guitar .role-icon,
    .message-role.role-guitar{
      background:rgba(80, 200, 120, .18);
      color:#8bf5ad;
      box-shadow:0 0 0 1px rgba(80,200,120,.18), 0 0 22px rgba(80,200,120,.18);
    }
    .role-bass .role-icon,
    .message-role.role-bass{
      background:rgba(80, 150, 255, .18);
      color:#9fbeff;
      box-shadow:0 0 0 1px rgba(80,150,255,.18), 0 0 22px rgba(80,150,255,.18);
    }
    .role-vocal .role-icon,
    .message-role.role-vocal{
      background:rgba(255, 120, 220, .18);
      color:#ffb1ec;
      box-shadow:0 0 0 1px rgba(255,120,220,.18), 0 0 22px rgba(255,120,220,.18);
    }
    .role-drums .role-icon,
    .message-role.role-drums{
      background:rgba(255, 175, 70, .18);
      color:#ffcb7e;
      box-shadow:0 0 0 1px rgba(255,175,70,.18), 0 0 22px rgba(255,175,70,.18);
    }
    .chat-list{
      min-height:180px;
      overflow:auto;
      padding-right:4px;
      display:grid;
      gap:10px;
      align-content:start;
      scrollbar-gutter:stable;
      scrollbar-width:thin;
      scrollbar-color:rgba(255,255,255,.22) transparent;
    }
    .chat-list::-webkit-scrollbar{width:8px}
    .chat-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px}
    .chat-empty{
      min-height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      border:1px dashed rgba(255,255,255,.10);
      border-radius:18px;
      background:rgba(255,255,255,.03);
      color:rgba(255,255,255,.42);
      font-size:13px;
      padding:16px;
    }
    .message-card{
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      gap:10px;
      align-items:start;
      border:1px solid rgba(255,255,255,.10);
      border-radius:18px;
      background:rgba(255,255,255,.05);
      padding:10px 11px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .message-card.own{
      border-color:rgba(138,123,255,.20);
      background:rgba(138,123,255,.06);
    }
    .message-role{
      width:34px;
      height:34px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
      flex:0 0 auto;
      margin-top:1px;
    }
    .message-main{
      min-width:0;
      display:grid;
      gap:5px;
    }
    .message-head{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      flex-wrap:wrap;
    }
    .message-author{
      font-size:13px;
      font-weight:800;
      color:rgba(255,255,255,.92);
    }
    .message-time{
      font-size:11px;
      color:rgba(255,255,255,.42);
    }
    .message-text{
      white-space:pre-wrap;
      word-break:break-word;
      line-height:1.45;
      font-size:13px;
      color:rgba(255,255,255,.88);
    }
    .message-delete{
      width:28px;
      height:28px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      color:#ffb9b9;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      transition:background var(--dur), border-color var(--dur), color var(--dur);
      flex:0 0 auto;
      margin-top:2px;
    }
    .message-delete:hover{
      background:rgba(239,68,68,.18);
      border-color:rgba(239,68,68,.34);
      color:#fff;
    }
    .chat-compose{
      display:grid;
      gap:10px;
    }
    .chat-target-row.chat-target-row-hidden{
      display:none;
    }
    .chat-target-buttons{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .chat-target-btn{
      width:38px;
      height:38px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.78);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
      line-height:1;
      transition:background var(--dur), border-color var(--dur), color var(--dur), transform var(--dur), box-shadow var(--dur);
    }
    .chat-target-btn:hover{
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.22);
      transform:translateY(-1px);
    }
    .chat-target-btn.active{
      background:rgba(138,123,255,.18);
      color:#fff;
      border-color:rgba(138,123,255,.44);
      box-shadow:0 0 0 1px rgba(138,123,255,.14), 0 0 18px rgba(138,123,255,.18);
    }
    .chat-target-btn:disabled{
      opacity:.45;
      cursor:not-allowed;
      transform:none;
    }
    .chat-target-select{
      min-height:38px;
      padding:8px 11px;
      border-radius:13px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.07);
      color:var(--text);
      outline:none;
    }
    .message-target{
      font-size:11px;
      color:rgba(255,255,255,.46);
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.045);
      border-radius:999px;
      padding:3px 7px;
    }
    .chat-compose .textarea{
      min-height:84px;
      max-height:140px;
      resize:vertical;
    }
    .chat-compose-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .chat-helper{
      font-size:11px;
      color:rgba(255,255,255,.42);
      line-height:1.35;
    }
    .chat-error{
      border:1px solid rgba(239,68,68,.22);
      background:rgba(239,68,68,.08);
      color:#ffb4b4;
      border-radius:14px;
      padding:10px 12px;
      font-size:12px;
      line-height:1.4;
    }
    .role-modal-root{
      position:fixed;
      inset:0;
      z-index:115;
      pointer-events:none;
    }
    .role-modal-root.open{pointer-events:auto}
    .role-modal-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.62);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      opacity:0;
      transition:opacity .22s ease;
    }
    .role-modal-root.open .role-modal-backdrop{opacity:1}
    .role-modal-wrap{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
    }
    .role-modal-card{
      width:min(96vw, 560px);
      border-radius:26px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 50% 0%, rgba(180,0,0,.14), transparent 28%),
        linear-gradient(180deg, rgba(18,18,24,.94), rgba(8,8,12,.98));
      box-shadow:0 0 0 1px rgba(120,0,0,.14), 0 40px 80px rgba(0,0,0,.55), 0 0 48px rgba(170,0,0,.18);
      padding:24px;
      transform:translateY(12px) scale(.985);
      opacity:0;
      transition:transform .24s ease, opacity .24s ease;
    }
    .role-modal-root.open .role-modal-card{
      transform:none;
      opacity:1;
    }
    .role-modal-title{
      margin:0;
      font-size:30px;
      line-height:1;
      font-weight:900;
      letter-spacing:-.03em;
      text-transform:uppercase;
    }
    .role-modal-sub{
      margin:10px 0 18px;
      color:rgba(255,255,255,.68);
      font-size:14px;
      line-height:1.45;
    }
    .role-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .role-card{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      border-radius:18px;
      padding:16px;
      text-align:left;
      color:#fff;
      display:grid;
      gap:8px;
      cursor:pointer;
      transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    .role-card:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.18);
      background:rgba(255,255,255,.09);
      box-shadow:0 18px 30px rgba(0,0,0,.22);
    }
    .role-card-top{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .role-card-icon{
      width:42px;
      height:42px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:22px;
      background:rgba(255,255,255,.08);
      box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 0 24px rgba(255,255,255,.08);
      flex:0 0 auto;
    }
    .role-card-name{
      font-size:18px;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .role-card-desc{
      font-size:12px;
      color:rgba(255,255,255,.58);
      line-height:1.45;
    }
    .role-modal-foot{
      margin-top:14px;
      display:flex;
      justify-content:flex-end;
    }
    .role-modal-close{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:40px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      color:#fff;
      padding:0 14px;
    }
    .role-modal-close:hover{
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.16);
    }
    .mobile-layout{
      display:none;
    }
    .mobile-detail-shell{
      display:none;
      position:relative;
      border:1px solid rgba(var(--status-rgb), .24);
      border-radius:24px;
      padding:12px;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(12,15,22,.96), rgba(8,10,16,.90));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 0 0 1px rgba(var(--status-rgb), .10),
        0 0 34px rgba(var(--status-rgb), .12),
        0 16px 34px rgba(0,0,0,.24);
      animation:mobileDetailPop .32s cubic-bezier(.2,.88,.28,1.12) both;
      --status-rgb:138,123,255;
    }
    .mobile-detail-shell.status-ready{--status-rgb:34,197,94}
    .mobile-detail-shell.status-warning{--status-rgb:245,158,11}
    .mobile-detail-shell.status-not_ready{--status-rgb:239,68,68}
    .mobile-detail-shell.status-concert{--status-rgb:183,124,255}
    .mobile-detail-shell::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      border-radius:inherit;
      background:
        radial-gradient(ellipse at 12% 50%,
          rgba(var(--status-rgb), .78) 0%,
          rgba(var(--status-rgb), .48) 24%,
          rgba(var(--status-rgb), .22) 48%,
          rgba(var(--status-rgb), .08) 66%,
          rgba(var(--status-rgb), 0) 84%
        ),
        linear-gradient(90deg,
          rgba(var(--status-rgb), .30) 0%,
          rgba(var(--status-rgb), .16) 28%,
          rgba(var(--status-rgb), .06) 52%,
          rgba(var(--status-rgb), 0) 78%
        );
      filter:blur(20px) saturate(170%);
      opacity:1;
    }
    .mobile-detail-shell::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(
          -33deg,
          rgba(var(--status-rgb), .16) 0 12px,
          rgba(255,255,255,.018) 12px 24px
        );
      opacity:.36;
      pointer-events:none;
      mask-image:linear-gradient(
        135deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.46) 30%,
        rgba(0,0,0,.16) 50%,
        rgba(0,0,0,0) 74%
      );
      -webkit-mask-image:linear-gradient(
        135deg,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.46) 30%,
        rgba(0,0,0,.16) 50%,
        rgba(0,0,0,0) 74%
      );
    }
    .mobile-detail-shell > *{
      position:relative;
      z-index:1;
    }
    .mobile-section{
      display:grid;
      gap:8px;
    }
    .mobile-row{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      border-radius:18px;
      box-shadow:none;
      padding:9px 10px;
      display:grid;
      grid-template-columns:30px 34px minmax(0,1fr) 34px;
      grid-template-rows:auto auto;
      gap:4px 8px;
      align-items:center;
    }
    .mobile-speaker{
      grid-column:1;
      grid-row:1 / span 2;
      width:30px;
      height:30px;
      border-radius:50%;
      border:2px solid rgba(235,236,255,.7);
      box-shadow:0 0 0 2px rgba(138,123,255,.15);
      position:relative;
      background:
        radial-gradient(circle at 50% 50%, #20273a 0%, #0c1018 60%, #000 100%);
    }
    .mobile-speaker::before{
      content:"";
      position:absolute;
      inset:5px;
      border-radius:50%;
      background:radial-gradient(circle at 50% 50%, #56607b 0%, #151a27 52%, #090b10 100%);
    }
    .mobile-row.playing{
      background:rgba(255,255,255,.16);
      border-color:rgba(255,255,255,.34);
      box-shadow:0 0 22px rgba(255,255,255,.10), 0 0 26px rgba(138,123,255,.12);
    }
    .mobile-row.playing .mobile-speaker{
      animation:speakerBassPulse .34s ease-in-out infinite;
    }
    .mobile-row.playing .mobile-speaker::before{
      animation:speakerConePulse .22s ease-in-out infinite;
    }
    .mobile-play{
      grid-column:2;
      grid-row:1 / span 2;
    }
    .mobile-main{
      grid-column:3;
      grid-row:1 / span 2;
      min-width:0;
      display:grid;
      gap:4px;
      align-self:center;
    }
    .mobile-file-name{
      font-size:12px;
      font-weight:800;
      text-align:center;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .mobile-progress{
      width:100%;
      height:4px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      overflow:hidden;
    }
    .mobile-progress > span{
      display:block;
      width:0%;
      height:100%;
      background:linear-gradient(90deg, rgba(138,123,255,.95), rgba(220,214,255,.9));
      border-radius:999px;
      transition:width .08s linear;
    }
    .mobile-download{
      grid-column:4;
      grid-row:1 / span 2;
    }
    .modal-root{
      position:fixed;
      inset:0;
      z-index:220;
      pointer-events:none;
    }
    .modal-root.open{pointer-events:auto}
    .modal-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.56);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      opacity:0;
      transition:opacity var(--dur);
    }
    .modal-root.open .modal-backdrop{opacity:1}
    .modal-wrap{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
    }
    .modal{
      width:100%;
      max-width:920px;
      max-height:90vh;
      overflow:auto;
      border-radius:24px;
      padding:18px;
      transform:translateY(10px);
      opacity:0;
      transition:transform var(--dur), opacity var(--dur);
    }
    .modal-root.open .modal{
      transform:translateY(0);
      opacity:1;
    }
    .modal-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .modal-title{
      font-size:20px;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .modal-sub{
      margin-top:6px;
      font-size:13px;
      color:var(--muted);
      line-height:1.5;
    }
    .form-grid{
      display:grid;
      gap:10px;
    }
    .form-columns{
      display:grid;
      grid-template-columns:1fr 220px;
      gap:10px;
    }
    .form-label{
      display:block;
      font-size:13px;
      color:var(--muted);
      margin-bottom:7px;
    }
    .upload-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .upload-box{
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.05);
      border-radius:18px;
      padding:11px;
      display:flex;
      flex-direction:column;
      gap:9px;
    }
    .upload-title{
      font-size:13px;
      font-weight:800;
      letter-spacing:.03em;
    }
    .file-input:disabled{
      opacity:.45;
      cursor:not-allowed;
    }
    .mini-files{
      display:flex;
      flex-direction:column;
      gap:8px;
      max-height:130px;
      overflow:auto;
    }
    .mini-file{
      border:1px solid var(--line);
      background:rgba(255,255,255,.05);
      border-radius:14px;
      padding:8px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .mini-file-name{
      font-size:12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .mini-file-name-row{
      min-width:0;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .mini-file-badge{
      padding:3px 7px;
      border-radius:999px;
      font-size:10px;
      font-weight:800;
      letter-spacing:.02em;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      color:rgba(255,255,255,.74);
      flex:0 0 auto;
    }
    .mini-file-badge.external{
      border-color:rgba(96,165,250,.22);
      background:rgba(96,165,250,.10);
      color:#dcecff;
    }
    .upload-external{
      border-top:1px dashed rgba(255,255,255,.10);
      padding-top:10px;
      display:grid;
      gap:8px;
    }
    .upload-external-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;
      gap:8px;
      align-items:center;
    }
    .upload-external .btn{
      min-width:120px;
    }
    .upload-external-note{
      font-size:11px;
      color:var(--muted);
      line-height:1.4;
    }
    @media (max-width:980px){
      .upload-external-grid{
        grid-template-columns:1fr;
      }
      .upload-external .btn{
        width:100%;
      }
    }
    .mini-remove{
      width:28px;
      height:28px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      color:#ffb9b9;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background var(--dur), border-color var(--dur), color var(--dur);
      flex:0 0 auto;
    }
    .mini-remove:hover{
      background:rgba(239,68,68,.18);
      border-color:rgba(239,68,68,.34);
      color:#fff;
    }
    .small-note{
      font-size:12px;
      color:var(--muted);
      line-height:1.45;
    }
    .app-version{
      position:fixed;
      right:12px;
      bottom:10px;
      z-index:60;
      padding:5px 9px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(9,11,16,.72);
      color:rgba(255,255,255,.54);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      font-size:11px;
      font-weight:800;
      letter-spacing:.04em;
      pointer-events:none;
    }
    .play-sparks-layer{
      display:none !important;
    }
    body.audio-playing .play-sparks-layer{
      opacity:1;
    }
    .play-sparks-field,
    .intro-sparks-field{
      display:none !important;
    }
    .intro-sparks-field{
      z-index:1;
      mix-blend-mode:screen;
      pointer-events:none;
    }
    @media (min-width: 769px){
      body.audio-playing .play-sparks-layer{
        opacity:0;
      }
      body.audio-playing .play-sparks-layer .forge-spark,
      body.audio-playing .play-sparks-glow{
        animation-play-state:paused;
        opacity:0 !important;
      }
    }
    .play-sparks-glow{
      position:absolute;
      bottom:-8vh;
      width:42vw;
      height:36vh;
      filter:blur(30px);
      opacity:0;
      transition:opacity .22s ease;
      background:radial-gradient(circle at center bottom, rgba(255,114,38,.22), rgba(255,92,24,.10) 34%, rgba(255,92,24,0) 72%);
    }
    .play-sparks-glow.left{ left:-12vw; }
    .play-sparks-glow.right{ right:-12vw; }
    body.audio-playing .play-sparks-glow{
      opacity:.95;
    }
    .forge-spark{
      display:none !important;
      position:absolute;
      left:var(--x);
      bottom:var(--y);
      width:var(--w);
      height:var(--h);
      border-radius:999px;
      opacity:0;
      transform-origin:center center;
      transform:translate3d(0,0,0) rotate(var(--rot));
      background:linear-gradient(90deg, rgba(255,248,228,.98) 0%, rgba(255,210,128,.96) 18%, rgba(255,137,62,.94) 56%, rgba(255,72,34,.54) 100%);
      box-shadow:
        0 0 8px rgba(255,230,172,.92),
        0 0 16px rgba(255,157,72,.88),
        0 0 28px rgba(255,90,40,.44);
      filter:blur(.18px);
      animation:forgeSparkRise var(--dur) linear infinite;
      animation-delay:var(--delay);
      will-change:transform, opacity;
    }
    .forge-spark::after{
      content:'';
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      background:inherit;
      opacity:.72;
      filter:blur(2.6px);
    }
    .forge-spark.bright{
      box-shadow:
        0 0 10px rgba(255,248,210,.96),
        0 0 18px rgba(255,180,88,.94),
        0 0 36px rgba(255,102,42,.58);
    }
    @keyframes forgeSparkRise{
      0%{opacity:0; transform:translate3d(0,0,0) rotate(var(--rot)) scale(.96)}
      9%{opacity:var(--alpha)}
      55%{opacity:var(--alpha)}
      100%{opacity:0; transform:translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--rot) + 10deg)) scale(.34)}
    }
    @media (prefers-reduced-motion: reduce){
      .intro-spark,
      .forge-spark{animation:none !important; display:none !important}
      .play-sparks-glow{display:none !important}
    }
    .modal-actions{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      padding-top:4px;
    }
    .toast{
      position:fixed;
      left:50%;
      bottom:24px;
      transform:translateX(-50%) translateY(16px);
      border:1px solid var(--line);
      background:rgba(16,18,27,.92);
      color:var(--text);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
      border-radius:16px;
      padding:12px 16px;
      box-shadow:var(--shadow);
      opacity:0;
      pointer-events:none;
      transition:opacity var(--dur), transform var(--dur), border-color var(--dur);
      z-index:90;
      max-width:min(90vw,640px);
      text-align:center;
      font-size:14px;
    }
    .toast.show{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }
    .toast.success{border-color:rgba(34,197,94,.34)}
    .toast.error{border-color:rgba(239,68,68,.34)}
    .toast.info{border-color:rgba(138,123,255,.34)}
    .busy{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.26);
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      pointer-events:none;
      transition:opacity var(--dur);
      z-index:70;
    }
    .busy.show{
      opacity:1;
      pointer-events:auto;
    }
    .busy-card{
      border-radius:18px;
      padding:14px 18px;
      font-size:14px;
      color:var(--muted);
    }
    .intro-overlay{
      position:fixed;
      inset:0;
      z-index:120;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      background:
        radial-gradient(circle at 50% 50%, rgba(120,170,255,.10), transparent 18%),
        radial-gradient(circle at 50% 50%, rgba(120,170,255,.06), transparent 34%),
        linear-gradient(135deg, #02050a 0%, #070c16 54%, #0a1019 100%);
      transition:opacity .45s ease, visibility .45s ease;
    }
    .intro-overlay::before{
      content:"";
      position:absolute;
      inset:-24%;
      background:
        repeating-linear-gradient(
          -33deg,
          rgba(255,255,255,.02) 0 18px,
          rgba(90,130,210,.05) 18px 36px
        );
      opacity:.24;
      animation:introDrift 4.2s linear infinite;
    }
    .intro-overlay::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.07), transparent 8%),
        radial-gradient(circle at 50% 50%, rgba(122,170,255,.22), transparent 20%),
        radial-gradient(circle at 50% 50%, rgba(122,170,255,.08), transparent 42%);
      opacity:.74;
      pointer-events:none;
      animation:introCorePulse 2.3s ease-in-out infinite;
    }
    .intro-overlay.hide{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }
    .intro-breath{
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 50% 50%, rgba(120,170,255,.24), transparent 28%);
      opacity:0;
      animation:redBreath 2.6s ease .86s 1 forwards;
    }
    .intro-lockup{
      position:relative;
      z-index:2;
      width:min(94vw, 1220px);
      display:grid;
      justify-items:center;
      align-items:center;
      gap:2px;
    }
    .intro-word{
      display:block;
      font-size:clamp(58px, 10vw, 170px);
      font-weight:1000;
      letter-spacing:.18em;
      color:#eef6ff;
      text-transform:uppercase;
      text-shadow:
        0 0 24px rgba(255,255,255,.10),
        0 0 72px rgba(120,170,255,.18),
        0 0 148px rgba(90,130,210,.18),
        0 0 220px rgba(90,130,210,.10);
      opacity:0;
      filter:blur(14px);
      will-change:transform, opacity, filter;
      user-select:none;
    }
    .intro-word-death{
      animation:introWordFromTop 1.7s cubic-bezier(.12,.92,.18,1.08) forwards;
    }
    .intro-word-mode{
      animation:introWordFromBottom 1.7s cubic-bezier(.12,.92,.18,1.08) .10s forwards;
    }
    .intro-impact{
      position:relative;
      width:min(90vw, 980px);
      height:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:-18px 0 -12px;
    }
    .intro-divider{
      position:absolute;
      left:50%;
      top:50%;
      width:0;
      height:5px;
      transform:translate(-50%, -50%);
      border-radius:999px;
      background:linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,1) 12%,
        rgba(210,230,255,.98) 50%,
        rgba(255,255,255,1) 88%,
        rgba(255,255,255,0) 100%
      );
      box-shadow:
        0 0 18px rgba(255,255,255,.44),
        0 0 38px rgba(120,170,255,.24),
        0 0 84px rgba(90,130,210,.24);
      opacity:0;
      animation:introBeamExpand 1.12s cubic-bezier(.14,.9,.18,1) 1.02s forwards;
    }
    .intro-divider-core{
      position:absolute;
      left:50%;
      top:50%;
      width:26px;
      height:26px;
      transform:translate(-50%, -50%) scale(.24);
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(210,230,255,.92) 28%, rgba(120,170,255,.24) 56%, rgba(90,130,210,0) 82%);
      box-shadow:
        0 0 30px rgba(255,255,255,.30),
        0 0 90px rgba(120,170,255,.24),
        0 0 140px rgba(90,130,210,.14);
      opacity:0;
      animation:introImpactFlash .82s ease .96s forwards;
    }
    .intro-divider-core::before,
    .intro-divider-core::after{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:2px;
      height:38px;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
      transform:translate(-50%, -50%) rotate(45deg);
      opacity:0;
      animation:introSpark .66s ease 1.04s forwards;
    }
    .intro-divider-core::after{
      transform:translate(-50%, -50%) rotate(-45deg);
    }
    .intro-spark{
      display:none !important;
    }
    .intro-spark.s1{--x:-390px;--y:-56px;animation-delay:1.02s}
    .intro-spark.s2{--x:-310px;--y:48px;animation-delay:1.08s}
    .intro-spark.s3{--x:-190px;--y:-74px;animation-delay:1.10s}
    .intro-spark.s4{--x:-86px;--y:60px;animation-delay:1.06s}
    .intro-spark.s5{--x:96px;--y:-62px;animation-delay:1.09s}
    .intro-spark.s6{--x:214px;--y:76px;animation-delay:1.04s}
    .intro-spark.s7{--x:326px;--y:-46px;animation-delay:1.12s}
    .intro-spark.s8{--x:410px;--y:52px;animation-delay:1.07s}
    @keyframes introWordFromTop{
      0%{
        opacity:0;
        filter:blur(16px);
        transform:translateY(-56vh) scale(.76);
      }
      76%{
        opacity:1;
        filter:blur(0);
        transform:translateY(18px) scale(1.06);
      }
      100%{
        opacity:1;
        filter:blur(0);
        transform:translateY(0) scale(1);
      }
    }
    @keyframes introWordFromBottom{
      0%{
        opacity:0;
        filter:blur(16px);
        transform:translateY(56vh) scale(.76);
      }
      76%{
        opacity:1;
        filter:blur(0);
        transform:translateY(-18px) scale(1.06);
      }
      100%{
        opacity:1;
        filter:blur(0);
        transform:translateY(0) scale(1);
      }
    }
    @keyframes introBeamExpand{
      0%{
        width:0;
        opacity:0;
      }
      10%{
        opacity:1;
      }
      72%{
        width:min(88vw, 940px);
        opacity:1;
      }
      100%{
        width:min(82vw, 900px);
        opacity:.98;
      }
    }
    @keyframes introImpactFlash{
      0%{
        opacity:0;
        transform:translate(-50%, -50%) scale(.18);
      }
      28%{
        opacity:1;
        transform:translate(-50%, -50%) scale(1.55);
      }
      100%{
        opacity:.18;
        transform:translate(-50%, -50%) scale(3.4);
      }
    }
    @keyframes introSpark{
      0%{
        opacity:0;
        transform:translate(-50%, -50%) rotate(45deg) scale(.2);
      }
      30%{
        opacity:1;
      }
      100%{
        opacity:0;
        transform:translate(-50%, -50%) rotate(45deg) scale(2.2);
      }
    }
    @keyframes introParticleBurst{
      0%{opacity:0; transform:translate(-50%, -50%) scale(.35)}
      18%{opacity:1}
      100%{opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.08)}
    }
    @keyframes redBreath{
      0%{opacity:0}
      22%{opacity:1}
      100%{opacity:0}
    }
    @keyframes introDrift{
      0%{transform:translate3d(0,0,0)}
      100%{transform:translate3d(46px,0,0)}
    }
    @keyframes introCorePulse{
      0%,100%{transform:scale(1);opacity:.82}
      50%{transform:scale(1.16);opacity:1}
    }
    @keyframes trackCardBreathe{
      0%,100%{
        transform:scale(1);
        opacity:.94;
      }
      50%{
        transform:scale(1.035);
        opacity:1;
      }
    }
    @keyframes trackCardGlowPulse{
      0%,100%{
        opacity:.28;
        transform:scale(.96);
      }
      50%{
        opacity:.54;
        transform:scale(1.04);
      }
    }
    @keyframes viewerStatusBreathe{
      0%,100%{
        opacity:.92;
        transform:scale(1);
      }
      50%{
        opacity:1;
        transform:scale(1.09);
      }
    }
    @keyframes viewerStatusSweep{
      0%,100%{
        opacity:.34;
        transform:translate3d(0,0,0) rotate(-11deg) scale(1);
      }
      50%{
        opacity:.54;
        transform:translate3d(14px,-8px,0) rotate(-8deg) scale(1.06);
      }
    }
    @keyframes viewerEdgePulse{
      0%,100%{
        opacity:.78;
        transform:scale(1);
      }
      50%{
        opacity:1;
        transform:scale(1.04);
      }
    }
    @keyframes mobileDetailPop{
      0%{
        opacity:0;
        transform:translateY(10px) scale(.985);
      }
      100%{
        opacity:1;
        transform:translateY(0) scale(1);
      }
    }
    @keyframes mobileSpreadGlow{
      0%{
        opacity:0;
        transform:scale(.84);
        filter:blur(18px);
      }
      100%{
        opacity:1;
        transform:scale(1);
        filter:blur(0);
      }
    }
    @keyframes mobileStripesFade{
      0%{
        opacity:0;
        transform:scale(.96);
      }
      100%{
        opacity:.34;
        transform:scale(1);
      }
    }
    .tab-files-stack{
      display:grid;
      gap:10px;
      width:var(--desktop-card);
    }
    .tab-file-card{
      position:relative;
      width:var(--desktop-card);
      height:var(--desktop-card-h);
      border:1px solid rgba(255,255,255,.12);
      border-radius:22px;
      padding:36px 12px 12px;
      background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 28%),
        linear-gradient(180deg, rgba(10,10,12,.96), rgba(22,8,10,.96));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 18px 40px rgba(0,0,0,.28),
        0 0 28px rgba(255,0,0,.08);
      display:grid;
      grid-template-rows:auto 1fr auto;
      gap:10px;
      overflow:hidden;
    }
    .tab-file-card-mobile{
      width:100%;
      height:auto;
      min-height:174px;
    }
    .tab-file-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .tab-file-name{
      min-width:0;
      font-size:13px;
      font-weight:900;
      line-height:1.35;
      color:#fff;
      word-break:break-word;
    }
    .tab-file-meta{
      font-size:11px;
      color:rgba(255,255,255,.58);
      white-space:nowrap;
      flex:0 0 auto;
    }
    .tab-file-preview{
      position:relative;
      min-height:0;
      height:100%;
      border-radius:16px;
      background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.04), transparent 26%),
        linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.995));
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 0 22px rgba(255,0,0,.12);
    }
    .tab-file-preview::before{
      content:"";
      position:absolute;
      left:16%;
      right:16%;
      top:28%;
      bottom:28%;
      border-radius:14px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,0) 18%),
        repeating-linear-gradient(
          180deg,
          rgba(255,55,55,.92) 0 1px,
          transparent 1px 11px
        );
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 18px rgba(255,0,0,.10);
      opacity:.95;
    }
    .tab-file-preview::after{
      content:"GP / GP5";
      position:absolute;
      right:12px;
      bottom:10px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.12em;
      color:rgba(255,255,255,.80);
      text-transform:uppercase;
    }
    .tab-file-actions{
      display:flex;
      gap:8px;
      justify-content:flex-end;
    }
    .tab-open-btn{
      min-width:96px;
      border:1px solid rgba(255,70,70,.28);
      background:linear-gradient(135deg, rgba(255,55,55,.22), rgba(255,55,55,.08));
      box-shadow:0 0 18px rgba(255,0,0,.10);
    }
    .tab-open-btn:hover{
      background:linear-gradient(135deg, rgba(255,55,55,.28), rgba(255,55,55,.10));
      border-color:rgba(255,80,80,.42);
    }
    .tab-modal-root{
      position:fixed;
      inset:0;
      z-index:140;
      pointer-events:none;
      opacity:0;
      transition:opacity .22s ease;
    }
    .tab-modal-root.open{
      pointer-events:auto;
      opacity:1;
    }
    html.tab-modal-open,
    body.tab-modal-open{
      overflow:hidden !important;
      overscroll-behavior:none;
      height:100%;
    }
    body.tab-modal-open{
      position:fixed;
      width:100%;
      inset:0;
      touch-action:none;
    }
    .tab-modal-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.82);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    .tab-modal{
      position:absolute;
      inset:24px;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at 50% 0%, rgba(255,0,0,.10), transparent 20%),
        linear-gradient(180deg, rgba(7,7,8,.985), rgba(3,3,4,.985));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 28px 80px rgba(0,0,0,.5),
        0 0 70px rgba(255,0,0,.12);
      display:grid;
      grid-template-rows:auto auto 1fr;
      gap:14px;
      padding:16px;
      overflow:hidden;
    }
    .tab-modal-toolbar{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .tab-modal-back{
      min-width:108px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#fff;
      border-radius:14px;
      padding:10px 14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-weight:800;
      cursor:pointer;
    }
    .tab-player-controls{
      display:flex;
      align-items:center;
      gap:8px;
      flex:0 0 auto;
    }
    .tab-player-btn{
      min-width:104px;
      border:1px solid rgba(255,70,70,.28);
      background:linear-gradient(135deg, rgba(255,55,55,.22), rgba(255,55,55,.08));
      box-shadow:0 0 18px rgba(255,0,0,.10);
    }
    .tab-player-btn:hover{
      background:linear-gradient(135deg, rgba(255,55,55,.28), rgba(255,55,55,.10));
      border-color:rgba(255,80,80,.42);
    }
    .tab-player-btn[disabled]{
      opacity:.44;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }
    .tab-player-btn[disabled]:hover{
      transform:none;
    }
    .tab-player-state{
      font-size:12px;
      color:rgba(255,255,255,.58);
      white-space:nowrap;
    }
    .tab-modal-meta{
      min-width:0;
      display:grid;
      gap:4px;
      flex:1 1 auto;
    }
    .tab-modal-title{
      font-size:18px;
      font-weight:900;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .tab-modal-sub{
      font-size:12px;
      color:rgba(255,255,255,.56);
    }
    .tab-track-pills{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      min-height:42px;
      align-items:flex-start;
      align-content:flex-start;
    }
    .tab-track-chip{
      display:flex;
      align-items:center;
      gap:6px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border-radius:999px;
      padding:4px;
      box-shadow:0 0 0 1px rgba(255,255,255,.02), 0 10px 22px rgba(0,0,0,.18);
    }
    .tab-track-chip.active{
      border-color:rgba(255,90,90,.34);
      box-shadow:0 0 0 1px rgba(255,80,80,.08), 0 0 24px rgba(255,0,0,.14);
    }
    .tab-track-pill{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      color:rgba(255,255,255,.88);
      border-radius:999px;
      padding:8px 12px;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
      transition:background var(--dur), border-color var(--dur), box-shadow var(--dur), transform var(--dur);
      min-width:0;
    }
    .tab-track-pill:hover{
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.18);
      transform:translateY(-1px);
    }
    .tab-track-pill.active{
      border-color:rgba(255,90,90,.42);
      background:linear-gradient(135deg, rgba(255,50,50,.26), rgba(255,50,50,.10));
      box-shadow:0 0 24px rgba(255,0,0,.16);
    }
    .tab-track-mini{
      width:30px;
      height:30px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.05);
      color:rgba(255,255,255,.88);
      font-size:11px;
      font-weight:900;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:background var(--dur), border-color var(--dur), box-shadow var(--dur), transform var(--dur);
      padding:0;
      line-height:1;
    }
    .tab-track-mini:hover{
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.16);
      transform:translateY(-1px);
    }
    .tab-track-mini.active{
      border-color:rgba(255,90,90,.42);
      background:linear-gradient(135deg, rgba(255,50,50,.28), rgba(255,50,50,.10));
      box-shadow:0 0 18px rgba(255,0,0,.14);
      color:#fff;
    }
    .tab-track-settings-panel{
      display:grid;
      gap:12px;
      margin-top:4px;
      padding:12px 14px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 14px 28px rgba(0,0,0,.18);
    }
    .tab-track-settings-title{
      font-size:12px;
      font-weight:900;
      color:rgba(255,255,255,.92);
    }
    .tab-track-settings-grid{
      display:grid;
      grid-template-columns:minmax(180px, 240px) minmax(180px, 280px);
      gap:12px;
      align-items:end;
    }
    .tab-track-settings-field.full{
      grid-column:1 / -1;
    }
    .tab-track-settings-field{
      display:grid;
      gap:5px;
      min-width:0;
    }
    .tab-track-settings-field label{
      font-size:10px;
      font-weight:800;
      color:rgba(255,255,255,.64);
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .tab-track-settings-field input[type="text"]{
      width:100%;
      border:1px solid rgba(255,255,255,.10);
      border-radius:11px;
      background:rgba(255,255,255,.06);
      color:#fff;
      padding:9px 11px;
      outline:none;
    }
    .tab-track-settings-field input[type="range"]{
      width:100%;
      margin:0;
      touch-action:pan-x;
    }
    .tab-track-settings-meta{
      font-size:10px;
      color:rgba(255,255,255,.50);
      line-height:1.35;
    }
    .tab-settings-launch{
      min-width:42px;
      padding:0 12px;
      font-size:16px;
      font-weight:900;
    }
    .tab-settings-modal-root{
      position:absolute;
      inset:0;
      z-index:12;
      opacity:0;
      pointer-events:none;
      transition:opacity var(--dur);
    }
    .tab-settings-modal-root.open{
      opacity:1;
      pointer-events:auto;
    }
    .tab-settings-modal-backdrop{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.58);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
    }
    .tab-settings-modal{
      position:absolute;
      top:86px;
      right:18px;
      width:min(680px, calc(100% - 36px));
      max-height:calc(100% - 120px);
      overflow:hidden;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at 0% 0%, rgba(255,0,0,.10), transparent 34%),
        linear-gradient(180deg, rgba(16,16,18,.98), rgba(7,7,8,.98));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 28px 80px rgba(0,0,0,.56),
        0 0 40px rgba(255,0,0,.10);
      padding:14px;
      display:grid;
      grid-template-rows:auto minmax(0,1fr);
      gap:10px;
      overscroll-behavior:contain;
      transform:translateZ(0);
      backface-visibility:hidden;
    }
    .tab-settings-modal-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      position:sticky;
      top:0;
      z-index:2;
      padding-bottom:4px;
      background:linear-gradient(180deg, rgba(12,12,14,.96), rgba(12,12,14,.72));
      backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);
    }
    .tab-settings-modal-title{
      font-size:14px;
      font-weight:900;
      color:#fff;
    }
    .tab-settings-list{
      display:grid;
      gap:8px;
      overflow:auto;
      padding-right:4px;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-gutter:stable;
    }
    .tab-settings-row{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(176px, 208px);
      gap:10px;
      padding:10px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 10px 22px rgba(0,0,0,.14);
      align-items:end;
    }
    .tab-settings-row-head{
      grid-column:1 / -1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-size:12px;
      font-weight:900;
      color:rgba(255,255,255,.92);
      min-width:0;
    }
    .tab-settings-row-head span:first-child{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .tab-settings-role-note{
      font-size:10px;
      color:rgba(255,255,255,.44);
      font-weight:700;
      white-space:nowrap;
    }
    .tab-seek-marker{
      position:absolute;
      width:20px;
      height:20px;
      margin-left:-10px;
      margin-top:-10px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.96) 0 20%, rgba(255,68,68,.90) 20% 42%, rgba(255,0,0,.28) 42% 72%, rgba(255,0,0,0) 72%);
      box-shadow:0 0 12px rgba(255,40,40,.72), 0 0 26px rgba(255,0,0,.40);
      pointer-events:none;
      z-index:9;
      opacity:0;
      transform:scale(.75);
      transition:opacity .12s ease, transform .12s ease;
    }
    .tab-seek-marker.show{
      opacity:1;
      transform:scale(1);
    }
    .tab-alpha-shell{
      min-height:0;
      display:grid;
    }
    .tab-alpha-stage{
      position:relative;
      min-height:0;
      height:100%;
      border-radius:22px;
      overflow-y:auto;
      overflow-x:hidden;
      border:1px solid rgba(255,255,255,.08);
      background:#000;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 0 40px rgba(255,0,0,.12),
        0 0 86px rgba(255,0,0,.08);
    }
    .tab-alpha-stage::before{
      display:none;
    }
    .tab-alpha-viewport{
      position:relative;
      z-index:1;
      min-height:100%;
      width:100%;
      max-width:100%;
      padding:18px 18px 64px;
      color:#fff;
      background:#000;
      overflow-x:hidden;
    }
    .tab-alpha-viewport canvas,
    .tab-alpha-viewport svg{
      filter:none;
      background:#000 !important;
      max-width:100% !important;
    }
    .tab-alpha-viewport .at-surface,
    .tab-alpha-viewport .at-main,
    .tab-alpha-viewport .at-viewport{
      background:#000 !important;
    }
    .tab-alpha-viewport svg text,
    .tab-alpha-viewport svg tspan{
      fill:#ffffff !important;
      stroke:none !important;
    }
    .tab-alpha-viewport svg line,
    .tab-alpha-viewport svg polyline{
      stroke:rgba(108,22,30,.96) !important;
    }
    .tab-alpha-viewport svg rect,
    .tab-alpha-viewport svg circle,
    .tab-alpha-viewport svg ellipse,
    .tab-alpha-viewport svg polygon{
      fill:rgba(255,255,255,.62) !important;
      stroke:rgba(108,22,30,.72) !important;
      stroke-width:1.15px !important;
    }
    .tab-alpha-viewport svg path{
      fill:rgba(255,255,255,.58) !important;
      stroke:rgba(108,22,30,.68) !important;
      stroke-width:1.05px !important;
    }
    .tab-alpha-viewport .at-cursor-beat,
    .tab-alpha-viewport .at-cursor-bar{
      display:none !important;
    }
    .tab-alpha-viewport svg .at-highlight,
    .tab-alpha-viewport svg g.at-highlight{
      filter:drop-shadow(0 0 8px rgba(255,42,42,.55)) drop-shadow(0 0 22px rgba(255,0,0,.28));
    }
    .tab-alpha-viewport svg .at-highlight text,
    .tab-alpha-viewport svg .at-highlight tspan{
      fill:#ffffff !important;
      stroke:rgba(255,38,38,.72) !important;
      stroke-width:8px !important;
      stroke-linejoin:round !important;
      paint-order:stroke fill !important;
      filter:drop-shadow(0 0 10px rgba(255,0,0,.58)) drop-shadow(0 0 20px rgba(255,0,0,.32));
      font-weight:900 !important;
    }
    .tab-alpha-viewport svg .at-highlight line,
    .tab-alpha-viewport svg .at-highlight polyline{
      stroke:rgba(255,92,92,.98) !important;
    }
    .tab-alpha-viewport svg .at-highlight rect,
    .tab-alpha-viewport svg .at-highlight circle,
    .tab-alpha-viewport svg .at-highlight ellipse,
    .tab-alpha-viewport svg .at-highlight polygon{
      fill:transparent !important;
      stroke:rgba(255,92,92,.98) !important;
    }
    .tab-alpha-viewport svg .at-highlight path{
      fill:transparent !important;
      stroke:rgba(255,92,92,.98) !important;
    }
    .tab-status-overlay{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.42);
      color:rgba(255,255,255,.88);
      font-size:14px;
      font-weight:800;
      letter-spacing:.02em;
      z-index:2;
      text-align:center;
      padding:18px;
      pointer-events:none;
    }
    .tab-status-overlay.error{
      color:#ffd7d7;
      background:rgba(20,0,0,.60);
    }
    .tab-rotate-hint{
      display:none;
      font-size:12px;
      color:rgba(255,255,255,.66);
      text-align:center;
      margin-top:-4px;
    }
    @media (max-width:980px){
      body{
        overflow:auto;
      }
      body:not(.mobile-detail-open) .main{
        display:none;
      }
      body.mobile-detail-open .sidebar{
        display:none;
      }
      .shell{
        height:auto;
        min-height:100vh;
        overflow:visible;
      }
      .global-player,
      .volume-box{
        display:none !important;
      }
      .topbar{
        grid-template-columns:1fr auto;
        justify-content:space-between;
        min-height:auto;
      }
      .topbar-left{
        min-width:0;
      }
      .topbar-right{
        justify-self:end;
      }
      body.mobile-detail-open .brand{
        display:none;
      }
      body.mobile-detail-open .top-mobile-back,
      body.mobile-detail-open .top-mobile-track,
      body.mobile-detail-open .mobile-detail-actions{
        display:flex !important;
      }
      body.mobile-detail-open #addTrackBtn{
        display:none;
      }
      body.mobile-detail-open #topMobileStatus{
        display:inline-flex;
        order:2;
      }
      body.mobile-detail-open #topEditTrackBtn{
        order:1;
      }
      .layout{
        grid-template-columns:1fr;
        overflow:visible;
      }
      .sidebar,
      .main{
        min-height:auto;
      }
      .tracks-list{
        max-height:none;
      }
      .main{
        overflow:visible;
      }
      .sidebar-note{
        display:none;
      }
      .viewer{
        padding:10px;
      }
      .viewer-stage{
        max-width:none;
        margin:0;
      }
      .viewer-toolbar,
      .desktop-layout,
      .hero{
        display:none;
      }
      .mobile-detail-shell{
        display:block;
      }
      .mobile-layout{
        display:grid;
        gap:12px;
      }
      .mobile-detail-shell .lyrics-panel,
      .mobile-detail-shell .notes-panel{
        width:100%;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        border-color:rgba(255,255,255,.08);
      }
      .mobile-detail-shell .mobile-row{
        background:rgba(255,255,255,.015);
        border-color:rgba(255,255,255,.08);
      }
      .lyrics-panel,
      .notes-panel{
        width:100%;
      }
      .mobile-layout .lyrics-body{
        min-height:42vh;
        max-height:58vh;
      }
      .mobile-layout .notes-body{
        min-height:22px;
        max-height:96px;
      }
      .desktop-info,
      .chat-panel{
        width:100%;
        min-height:auto;
        max-height:none;
      }
      .chat-panel{
        grid-template-rows:auto minmax(180px,1fr) auto;
      }
      .chat-list{
        max-height:50vh;
      }
      .role-grid{
        grid-template-columns:1fr;
      }
      .form-columns,
      .upload-grid{
        grid-template-columns:1fr;
      }
      .modal{
        max-height:92vh;
      }
      .tab-modal-backdrop{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        background:#000;
      }
      .tab-modal{
        inset:0;
        border-radius:0;
        padding:10px;
      }
      .tab-modal.force-landscape{
        inset:auto;
        top:50%;
        left:50%;
        width:100vh;
        height:100vw;
        max-width:none;
        max-height:none;
        transform:translate(-50%, -50%) rotate(-90deg);
        transform-origin:center center;
        border-radius:0;
        padding:6px;
      }
      .tab-modal-toolbar{
        flex-wrap:nowrap;
        gap:6px;
      }
      .tab-modal-back{
        min-width:38px;
        width:38px;
        padding:8px 0;
      }
      .tab-modal-meta{
        display:none;
      }
      .tab-player-controls{
        width:auto;
        justify-content:flex-start;
        gap:6px;
      }
      .tab-player-state{
        display:none;
      }
      .tab-settings-launch{
        width:34px;
        height:34px;
      }
      .tab-track-pills{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:6px;
        max-height:92px;
        overflow:auto;
        align-content:start;
      }
      .tab-track-chip{
        width:100%;
        min-width:0;
        justify-content:space-between;
      }
      .tab-track-pill{
        flex:1 1 auto;
        min-width:0;
        padding:7px 10px;
        font-size:11px;
      }
      .tab-track-mini{
        width:28px;
        height:28px;
        font-size:10px;
      }
      .tab-alpha-shell{
        min-height:0;
      }
      .tab-alpha-stage{
        overflow:auto;
        -webkit-overflow-scrolling:touch;
      }
      .tab-alpha-viewport{
        padding:6px 6px 20px;
      }
      .tab-modal.force-landscape .tab-alpha-stage{
        display:block;
      }
      .tab-modal.force-landscape .tab-alpha-viewport{
        --tab-mobile-scale:0.7;
      }
      .tab-modal.force-landscape .tab-alpha-viewport .at-surface,
      .tab-modal.force-landscape .tab-alpha-viewport .at-main,
      .tab-modal.force-landscape .tab-alpha-viewport .at-viewport,
      .tab-modal.force-landscape .tab-alpha-viewport svg{
        max-width:none !important;
      }
      .tab-settings-modal-root{
        position:fixed;
        inset:0;
        z-index:120;
      }
      .tab-settings-modal-backdrop{
        background:rgba(0,0,0,.72);
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
      }
      .tab-settings-modal{
        top:10px;
        right:10px;
        left:10px;
        bottom:10px;
        width:auto;
        max-height:none;
        padding:12px;
        border-radius:18px;
      }
      .tab-settings-modal-head{
        padding-bottom:6px;
      }
      .tab-settings-list{
        gap:8px;
        padding-right:2px;
      }
      .tab-settings-row{
        grid-template-columns:1fr;
        gap:8px;
        padding:9px;
      }
      .tab-settings-row-head{
        font-size:11px;
      }
      .tab-settings-role-note{
        display:none;
      }
      .tab-track-settings-field input[type="text"]{
        font-size:16px;
        padding:10px 11px;
      }
      .tab-track-settings-field input[type="range"]{
        min-height:26px;
      }
    }
    @media (max-width:980px) and (orientation:portrait){
      .tab-rotate-hint{
        display:block;
      }
    }
    .filters{
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
    }
    .filter-btn[data-filter="all"],
    .filter-btn[data-filter="concert"],
    .filter-btn[data-filter="unread"]{display:none !important}
    .status-picker{
      grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .status-choice.concert,
    .track-card.status-concert,
    .status-inline.concert,
    .track-status-icon.concert,
    .viewer.status-concert,
    .mobile-detail-shell.status-concert{display:none !important}
    .track-title-row{gap:10px}
    .track-status-icon{
      width:36px;
      height:36px;
      font-size:20px;
      box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 0 18px currentColor;
    }
    .track-title{
      font-size:15px;
      letter-spacing:.01em;
    }
    .track-tab-icon,
    .track-sample-icon{
      width:24px;
      height:24px;
      font-size:13px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
    }
    .track-tab-icon{
      color:#ffd9a1;
      background:rgba(255,165,55,.14);
      border:1px solid rgba(255,165,55,.28);
      box-shadow:0 0 18px rgba(255,165,55,.14);
    }
    .viewer{
      overflow:visible;
    }
    .viewer::before{
      inset:-8% -9%;
      opacity:.96;
      filter:blur(20px) saturate(135%);
      background:
        radial-gradient(circle at 32% 52%, rgba(var(--status-rgb), .34), transparent 25%),
        radial-gradient(circle at 68% 48%, rgba(var(--status-rgb), .18), transparent 30%),
        radial-gradient(circle at 50% 62%, rgba(var(--status-rgb), .16), transparent 46%);
    }
    .viewer-bg::before{
      opacity:1;
      filter:blur(10px) saturate(130%);
      background:
        radial-gradient(circle at 18% 18%, rgba(var(--status-rgb), .32), transparent 28%),
        radial-gradient(circle at 83% 22%, rgba(var(--status-rgb), .17), transparent 22%),
        radial-gradient(circle at 35% 72%, rgba(var(--status-rgb), .24), transparent 32%),
        radial-gradient(circle at 72% 78%, rgba(var(--status-rgb), .20), transparent 28%),
        linear-gradient(135deg, rgba(var(--status-rgb), .28), rgba(var(--status-rgb), .10) 42%, rgba(255,255,255,.02) 82%);
    }
    .viewer-bg::after{
      opacity:.75;
      filter:blur(28px);
    }
    .viewer-toolbar{display:none}
    .hero{margin-bottom:18px}
    .title-row{
      align-items:flex-start;
      gap:16px;
    }
    .hero-title{
      font-size:clamp(50px, 5vw, 78px);
      letter-spacing:-.03em;
      margin:0;
    }
    .hero-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex:0 0 auto;
      padding-top:6px;
    }
    .hero-status{
      min-height:56px;
      padding:12px 18px;
      border-radius:18px;
      gap:12px;
    }
    .hero-status .status-inline{
      width:42px;
      height:42px;
      font-size:21px;
    }
    .hero-edit-btn{
      width:56px;
      height:56px;
      font-size:22px;
      border-radius:18px;
    }
    .desktop-layout{
      grid-template-columns:minmax(0, calc(var(--desktop-card) * 2 + var(--desktop-gap))) minmax(0, var(--desktop-info)) minmax(0, var(--desktop-chat));
      align-items:stretch;
    }
    .desktop-left,
    .desktop-info,
    .desktop-side{
      min-height:calc(var(--desktop-card-h) * 2 + var(--desktop-gap));
    }
    .desktop-side{
      width:var(--desktop-chat);
      display:grid;
      grid-template-rows:minmax(116px, auto) minmax(0, 1fr);
      gap:14px;
      align-content:stretch;
    }
    .desktop-info .lyrics-panel,
    .desktop-side .chat-panel,
    .desktop-side .notes-panel{
      height:100%;
      min-height:0;
    }
    .lyrics-body{
      min-height:calc(var(--desktop-card-h) * 2 + var(--desktop-gap) - 28px);
      max-height:calc(var(--desktop-card-h) * 2 + var(--desktop-gap) - 28px);
    }
    .notes-body{
      min-height:54px;
      max-height:150px;
      color:rgba(255,255,255,.84);
    }
    .chat-panel{
      min-height:0;
    }
    .message-quick-row{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin-top:4px;
    }
    .message-react-btn{
      min-width:38px;
      height:34px;
      padding:0 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.86);
      font-size:13px;
      font-weight:800;
      transition:background var(--dur), border-color var(--dur), transform var(--dur);
    }
    .message-react-btn:hover{
      background:rgba(255,255,255,.12);
      border-color:rgba(255,255,255,.18);
      transform:translateY(-1px);
    }
    .intro-overlay{
      background:
        radial-gradient(circle at 50% 50%, rgba(60,110,190,.10), transparent 22%),
        radial-gradient(circle at 50% 50%, rgba(255,40,28,.06), transparent 34%),
        linear-gradient(180deg, #020408 0%, #070b13 45%, #090b10 100%);
    }
    .intro-overlay::before{
      opacity:.30;
      background:
        repeating-linear-gradient(-33deg, rgba(255,255,255,.014) 0 18px, rgba(80,120,200,.045) 18px 36px);
      animation:introDrift 5.2s linear infinite;
    }
    .intro-overlay::after{
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.07), transparent 7%),
        radial-gradient(circle at 50% 50%, rgba(255,32,24,.52), transparent 12%),
        radial-gradient(circle at 50% 50%, rgba(82,138,255,.16), transparent 34%);
      animation:introRedHitFlash 2.15s cubic-bezier(.2,.9,.2,1) forwards;
    }
    .intro-breath{
      background:
        radial-gradient(circle at 50% 50%, rgba(255,36,28,.82), transparent 18%),
        radial-gradient(circle at 50% 50%, rgba(255,90,40,.28), transparent 36%);
      animation:introRedSnap 2.15s cubic-bezier(.2,.9,.2,1) forwards;
    }
    .intro-lockup{
      gap:0;
      transform-origin:50% 50%;
      animation:introElasticCamera 2.15s cubic-bezier(.18,.92,.24,1) forwards;
    }
    .intro-word{
      letter-spacing:.10em;
      text-shadow:
        5px 9px 0 rgba(0,0,0,.46),
        0 0 18px rgba(255,255,255,.12),
        0 0 56px rgba(255,72,72,.18),
        0 0 120px rgba(80,140,255,.18);
    }
    .intro-impact{
      width:min(88vw, 920px);
      height:18px;
      margin:-8px 0 -6px;
    }
    .intro-divider{
      height:4px;
      animation:introBeamElastic .92s cubic-bezier(.18,.92,.20,1) 1.02s forwards;
      box-shadow:0 0 18px rgba(255,255,255,.30), 0 0 40px rgba(255,72,72,.24), 0 0 90px rgba(82,138,255,.24);
    }
    .intro-divider-core{
      width:24px;
      height:24px;
      animation:introImpactFlashElastic .65s ease .98s forwards;
      background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,176,176,.90) 26%, rgba(255,60,48,.38) 48%, rgba(82,138,255,.16) 70%, rgba(82,138,255,0) 86%);
      box-shadow:0 0 26px rgba(255,255,255,.28), 0 0 72px rgba(255,52,42,.36), 0 0 130px rgba(82,138,255,.26);
    }
    @keyframes introWordFromTop{
      0%{opacity:0;filter:blur(14px);transform:translateY(-58vh) scale(.88)}
      46%{opacity:1;filter:blur(1px);transform:translateY(20px) scale(1.035)}
      56%{opacity:1;filter:blur(0);transform:translateY(-10px) scale(.99)}
      68%{transform:translateY(5px) scale(1.01)}
      82%{transform:translateY(-3px) scale(1)}
      100%{opacity:1;filter:blur(0);transform:translateY(-2px) scale(1)}
    }
    @keyframes introWordFromBottom{
      0%{opacity:0;filter:blur(14px);transform:translateY(58vh) scale(.88)}
      46%{opacity:1;filter:blur(1px);transform:translateY(-20px) scale(1.035)}
      56%{opacity:1;filter:blur(0);transform:translateY(10px) scale(.99)}
      68%{transform:translateY(-5px) scale(1.01)}
      82%{transform:translateY(3px) scale(1)}
      100%{opacity:1;filter:blur(0);transform:translateY(2px) scale(1)}
    }
    @keyframes introElasticCamera{
      0%,43%{transform:scale(1)}
      48%{transform:scale(1.28)}
      56%{transform:scale(1.08)}
      66%{transform:scale(1.15)}
      78%{transform:scale(1.045)}
      100%{transform:scale(1.035)}
    }
    @keyframes introRedSnap{
      0%,44%{opacity:0}
      48%{opacity:1}
      54%{opacity:.12}
      68%,100%{opacity:0}
    }
    @keyframes introRedHitFlash{
      0%,44%{opacity:.22;filter:saturate(1)}
      48%{opacity:1;filter:saturate(1.65)}
      56%{opacity:.36;filter:saturate(1.1)}
      72%,100%{opacity:.22;filter:saturate(.82) hue-rotate(12deg)}
    }
    @keyframes introBeamElastic{
      0%{width:0;opacity:0;transform:translate(-50%,-50%) scaleX(.12)}
      18%{opacity:1;width:min(18vw, 160px)}
      44%{width:min(68vw, 560px);opacity:1}
      68%{width:min(54vw, 450px);opacity:.95}
      100%{width:min(60vw, 500px);opacity:.88;transform:translate(-50%,-50%) scaleX(1)}
    }
    @keyframes introImpactFlashElastic{
      0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
      20%{opacity:1;transform:translate(-50%,-50%) scale(1.42)}
      48%{opacity:.82;transform:translate(-50%,-50%) scale(.76)}
      100%{opacity:.58;transform:translate(-50%,-50%) scale(1)}
    }
    @media (max-width:980px){
      .desktop-side{width:auto;min-height:0;grid-template-rows:auto auto}
      .hero-title{font-size:clamp(32px, 11vw, 48px)}
      .hero-actions{padding-top:0}
      .hero-status{min-height:44px;padding:8px 12px}
      .hero-status .status-inline{width:34px;height:34px;font-size:17px}
      .hero-edit-btn{width:44px;height:44px;font-size:18px}
      .mobile-layout .notes-panel{margin-bottom:12px}
    }
    :root{
      --viewer-column-h:calc(var(--desktop-card-h) * 2 + var(--desktop-gap));
      --notes-panel-h:148px;
    }
    .filter-btn[data-filter="all"],
    .filter-btn[data-filter="concert"],
    .filter-btn[data-filter="unread"],
    .status-choice.concert,
    .track-card.status-concert,
    .status-inline.concert,
    .track-status-icon.concert,
    .viewer.status-concert,
    .mobile-detail-shell.status-concert{
      display:none !important;
    }
    .viewer{
      overflow:hidden;
    }
    .viewer::after{
      inset:-42% -8% -34% -78%;
      background:
        radial-gradient(ellipse at 34% 42%, rgba(var(--status-rgb), 1) 0%, rgba(var(--status-rgb), 1) 10%, rgba(var(--status-rgb), .94) 20%, rgba(var(--status-rgb), .74) 34%, rgba(var(--status-rgb), .46) 48%, rgba(var(--status-rgb), .23) 62%, rgba(var(--status-rgb), .075) 76%, rgba(var(--status-rgb), 0) 91%),
        radial-gradient(ellipse at 28% 62%, rgba(var(--status-rgb), .96) 0%, rgba(var(--status-rgb), .70) 16%, rgba(var(--status-rgb), .40) 34%, rgba(var(--status-rgb), .16) 54%, rgba(var(--status-rgb), 0) 76%);
      filter:blur(46px) saturate(190%);
      opacity:1;
      animation:none;
      pointer-events:none;
    }
    .viewer-bg::before{
      inset:-34% -2% -28% -62%;
      background:
        radial-gradient(ellipse at 25% 42%, rgba(var(--status-rgb), 1) 0%, rgba(var(--status-rgb), .90) 12%, rgba(var(--status-rgb), .62) 26%, rgba(var(--status-rgb), .34) 42%, rgba(var(--status-rgb), .14) 58%, rgba(var(--status-rgb), .04) 72%, rgba(var(--status-rgb), 0) 86%),
        linear-gradient(90deg, rgba(var(--status-rgb), .78) 0%, rgba(var(--status-rgb), .52) 12%, rgba(var(--status-rgb), .30) 26%, rgba(var(--status-rgb), .13) 42%, rgba(var(--status-rgb), .035) 58%, rgba(var(--status-rgb), 0) 76%);
      opacity:1;
      filter:saturate(185%);
      animation:none;
    }
    .viewer-bg::after{
      display:block;
      top:8%;
      left:-18%;
      width:56%;
      height:82%;
      transform:rotate(-6deg);
      background:radial-gradient(ellipse at 38% 50%, rgba(var(--status-rgb), .55), rgba(var(--status-rgb), .20) 34%, rgba(var(--status-rgb), 0) 72%);
      opacity:.85;
      filter:blur(30px) saturate(170%);
      mask-image:none;
      -webkit-mask-image:none;
      animation:none;
    }
    .intro-lockup{
      animation:none !important;
    }
    .intro-word{
      text-shadow:
        0 12px 24px rgba(0,0,0,.58),
        0 2px 0 rgba(255,255,255,.05),
        0 0 18px rgba(255,255,255,.12),
        0 0 70px rgba(86,145,255,.16);
    }
    .intro-overlay{
      background:
        radial-gradient(circle at 50% 50%, rgba(120,170,255,.11), transparent 24%),
        linear-gradient(180deg, #020408 0%, #070b13 45%, #090b10 100%);
    }
    .intro-overlay::after{
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.92), transparent 10%),
        radial-gradient(circle at 50% 50%, rgba(160,210,255,.54), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(58,120,255,.20), transparent 46%);
      animation:introLightningFade 2.15s ease-out forwards !important;
    }
    .intro-breath{
      background:radial-gradient(circle at 50% 50%, rgba(120,176,255,.32), transparent 34%);
      animation:introColdFlashFade 2.15s ease-out forwards !important;
    }
    @keyframes introLightningFade{
      0%{opacity:1;filter:brightness(1.85) saturate(.92)}
      8%{opacity:.95}
      28%{opacity:.34}
      64%{opacity:.10}
      100%{opacity:0;filter:brightness(1) saturate(.8)}
    }
    @keyframes introColdFlashFade{
      0%{opacity:.72}
      42%{opacity:.22}
      100%{opacity:0}
    }
    @keyframes introWordFromTop{
      0%{opacity:0;filter:blur(13px);transform:translateY(-48vh) scale(.94)}
      54%{opacity:1;filter:blur(1px);transform:translateY(6px) scale(1.01)}
      72%{filter:blur(0);transform:translateY(-2px) scale(1)}
      100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
    }
    @keyframes introWordFromBottom{
      0%{opacity:0;filter:blur(13px);transform:translateY(48vh) scale(.94)}
      54%{opacity:1;filter:blur(1px);transform:translateY(-6px) scale(1.01)}
      72%{filter:blur(0);transform:translateY(2px) scale(1)}
      100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
    }
    .global-player{
      max-width:560px;
      width:100%;
      justify-self:center;
    }
    .player-main{justify-items:center}
    .player-head{width:100%}
    .player-progress{
      width:70%;
      max-width:340px;
      height:3px;
      justify-self:center;
      touch-action:pan-x;
    }
    .desktop-layout{
      align-items:stretch;
    }
    .desktop-left,
    .desktop-info,
    .desktop-side{
      align-self:stretch;
      min-height:var(--viewer-column-h);
      max-height:var(--viewer-column-h);
    }
    .desktop-media-grid{height:var(--viewer-column-h)}
    .desktop-info .lyrics-panel{height:var(--viewer-column-h)}
    .desktop-side{
      grid-template-rows:var(--notes-panel-h) minmax(0, calc(var(--viewer-column-h) - var(--notes-panel-h) - 14px));
      height:var(--viewer-column-h);
    }
    .desktop-side .notes-panel{height:var(--notes-panel-h)}
    .desktop-side .chat-panel{
      height:calc(var(--viewer-column-h) - var(--notes-panel-h) - 14px);
      min-height:calc(var(--viewer-column-h) - var(--notes-panel-h) - 14px);
      max-height:calc(var(--viewer-column-h) - var(--notes-panel-h) - 14px);
    }
    .lyrics-body{
      min-height:calc(var(--viewer-column-h) - 52px);
      max-height:calc(var(--viewer-column-h) - 52px);
    }
    .notes-body{
      min-height:0;
      max-height:calc(var(--notes-panel-h) - 58px);
    }
    .media-card.desktop-square,
    .tab-file-card{
      grid-template-rows:24px minmax(0, 1fr) 58px;
      gap:8px;
    }
    .speaker-wrap{
      align-self:stretch;
      justify-self:stretch;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:0;
    }
    .speaker{
      margin:auto;
      transform:none;
    }
    .media-name{
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .desktop-card-bottom{
      min-height:0;
      overflow:hidden;
    }
    .desktop-actions{
      gap:8px;
    }
    .tab-file-actions{
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:0;
    }
    .tab-open-btn{
      min-width:72px !important;
      height:38px;
      padding:0 12px;
      border-radius:13px;
      font-size:13px;
    }
    .message-card.pending-reaction{
      border-color:rgba(255,255,255,.26);
      background:rgba(255,255,255,.11);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(255,255,255,.04);
    }
    .message-quick-row{
      gap:6px;
      flex-wrap:wrap;
    }
    .message-react-btn{
      min-width:34px;
      height:30px;
      padding:0 9px;
      border-radius:10px;
      font-size:13px;
    }
    .message-react-btn.is-active{
      background:rgba(255,255,255,.18);
      border-color:rgba(255,255,255,.26);
      box-shadow:0 0 18px rgba(255,255,255,.08);
    }
    .message-reactions{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin-top:2px;
    }
    .message-reaction-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 9px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.90);
      font-size:12px;
      font-weight:800;
    }
    .message-reaction-chip .who{opacity:.78}
    .message-reaction-chip.check{color:#bdf8c7}
    .message-reaction-chip.cross{color:#ffd0d0}
    .mobile-speaker,
    .mobile-progress{display:none !important}
    .mobile-row{
      min-height:84px;
      grid-template-columns:46px minmax(0,1fr) 38px;
      grid-template-rows:auto;
      padding:12px 10px;
      gap:8px 10px;
      align-items:center;
    }
    .mobile-play{
      grid-column:1;
      grid-row:1;
      width:44px;
      height:44px;
      align-self:center;
      justify-self:center;
      font-size:17px;
    }
    .mobile-main{
      grid-column:2;
      grid-row:1;
      gap:9px;
      align-self:center;
      min-width:0;
    }
    .mobile-download{
      grid-column:3;
      grid-row:1;
      width:38px;
      height:38px;
      align-self:center;
      justify-self:center;
    }
    .mobile-file-name{font-size:13px}
    .mobile-progress-range{
      width:100%;
      appearance:none;
      height:5px;
      border-radius:999px;
      background:rgba(255,255,255,.20);
      outline:none;
      touch-action:pan-x;
    }
    .mobile-progress-range::-webkit-slider-thumb{
      appearance:none;
      width:18px;
      height:18px;
      border-radius:50%;
      background:#ececff;
      box-shadow:0 0 0 4px rgba(138,123,255,.24);
      border:none;
    }
    .mobile-progress-range::-moz-range-thumb{
      width:18px;
      height:18px;
      border:none;
      border-radius:50%;
      background:#ececff;
      box-shadow:0 0 0 4px rgba(138,123,255,.24);
    }
    .mobile-progress-range:disabled{opacity:.45}
    .volume-slider{touch-action:pan-x}
    .tab-track-pills{
      overflow-x:auto;
      overflow-y:hidden;
      flex-wrap:nowrap;
      scrollbar-width:thin;
      padding-bottom:6px;
      scroll-snap-type:x proximity;
    }
    .tab-track-chip{
      flex:0 0 auto;
      scroll-snap-align:start;
    }
    .tab-track-pill{
      max-width:160px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    @media (max-width:980px){
      html,body{overflow-x:hidden}
      body{overscroll-behavior-y:none}
      .shell{min-height:100svh}
      .main,.viewer,.mobile-detail-shell{overscroll-behavior-y:contain}
      .mobile-detail-shell{touch-action:pan-y}
      .mobile-layout{padding-bottom:2px}
      .mobile-layout .lyrics-body{min-height:38vh;max-height:52vh}
      .tab-track-pills{
        max-width:100%;
        flex-wrap:nowrap !important;
      }
    }
    .global-player{
      max-width:500px;
      width:100%;
      justify-self:center;
      padding:6px 8px;
      min-height:44px;
    }
    .player-main{justify-items:center; gap:4px}
    .player-head{width:100%}
    .player-progress{
      width:90%;
      max-width:390px;
      height:3px;
      justify-self:center;
      touch-action:pan-x;
    }
    .desktop-side{
      grid-template-rows:minmax(0, 1fr) !important;
      height:var(--viewer-column-h);
      max-height:var(--viewer-column-h);
    }
    .desktop-side .chat-panel{
      height:var(--viewer-column-h) !important;
      min-height:var(--viewer-column-h) !important;
      max-height:var(--viewer-column-h) !important;
    }
    .media-card.desktop-square{
      grid-template-rows:24px minmax(0,1fr) 58px;
    }
    .media-card.desktop-square .speaker-wrap{
      position:absolute !important;
      inset:0 !important;
      z-index:0 !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      pointer-events:none !important;
      transform:none !important;
    }
    .media-card.desktop-square .speaker{
      margin:0 !important;
      flex:0 0 auto;
    }
    .media-card.desktop-square .media-card-title,
    .media-card.desktop-square .desktop-meta-row,
    .media-card.desktop-square .desktop-card-bottom{
      z-index:2 !important;
    }
    .media-card.desktop-square .desktop-card-bottom{
      align-self:end;
      overflow:hidden;
      padding-bottom:0;
    }
    .media-name{
      font-size:12px;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .desktop-actions .icon-btn{
      width:30px;
      height:30px;
      border-radius:10px;
    }
    .tab-open-btn{
      min-width:66px !important;
      height:34px !important;
      padding:0 10px !important;
      border-radius:12px !important;
      font-size:12px !important;
    }
    .tab-file-actions .icon-btn{
      width:30px;
      height:30px;
      border-radius:10px;
    }
    .chat-compose .textarea{
      min-height:72px;
      max-height:116px;
    }
    .chat-compose-row{
      align-items:center;
      gap:8px;
    }
    .chat-compose-row .btn{
      padding:8px 12px;
      border-radius:12px;
      font-size:14px;
      flex:0 0 auto;
    }
    .chat-helper{
      min-width:0;
      flex:1 1 140px;
    }
    .message-card{
      padding:9px 10px;
    }
    .message-quick-row{
      gap:6px;
      flex-wrap:wrap;
      align-items:center;
    }
    .message-react-btn{
      min-width:32px;
      width:32px;
      height:30px;
      padding:0;
      border-radius:10px;
      font-size:13px;
    }
    .message-reactions{
      display:flex;
      flex-wrap:wrap;
      gap:5px;
      margin:0;
      align-items:center;
    }
    .message-reactions.own-reactions{
      margin-top:4px;
    }
    .message-reaction-chip{
      gap:4px;
      padding:4px 7px;
      font-size:11px;
      line-height:1;
    }
    .tab-rotate-hint{display:none !important}
    .tab-modal-toolbar{
      justify-content:flex-start;
    }
    .tab-player-controls{
      margin-left:auto;
      justify-content:flex-end;
    }
    .tab-modal-back{
      min-width:116px;
      min-height:42px;
    }
    @media (max-width:980px){
      .tab-modal{
        grid-template-rows:auto auto minmax(0,1fr) !important;
      }
      .tab-modal-toolbar{
        gap:7px;
      }
      .tab-modal-back{
        min-width:46px !important;
        width:46px !important;
        height:42px !important;
        padding:0 !important;
        border-radius:13px;
        font-size:18px;
      }
      .tab-player-controls{
        margin-left:auto !important;
        gap:6px;
      }
      .tab-player-btn{
        min-width:44px !important;
        width:44px !important;
        height:38px !important;
        padding:0 !important;
        font-size:15px;
      }
      #tabStopBtn,
      .tab-settings-launch{
        width:38px !important;
        height:38px !important;
      }
      .tab-track-pills{
        display:flex !important;
        flex-wrap:nowrap !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        max-height:none !important;
        min-height:40px !important;
        gap:6px !important;
        padding:0 2px 7px !important;
        align-items:center !important;
        align-content:center !important;
        touch-action:pan-x !important;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
      }
      .tab-track-chip{
        width:auto !important;
        min-width:0 !important;
        flex:0 0 auto !important;
        justify-content:flex-start !important;
        gap:4px !important;
        padding:3px !important;
        scroll-snap-align:start;
      }
      .tab-track-pill{
        flex:0 1 auto !important;
        max-width:92px !important;
        min-width:0 !important;
        padding:6px 9px !important;
        font-size:10px !important;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .tab-track-mini{
        width:26px !important;
        height:26px !important;
        font-size:10px !important;
        flex:0 0 auto !important;
      }
      .mobile-layout .notes-panel{
        display:none !important;
      }
    }
    html.dm-auth-preload .shell{
      opacity:0 !important;
      visibility:hidden !important;
      pointer-events:none !important;
    }
    .viewer{
      overflow:hidden !important;
    }
    .viewer::after{
      content:"" !important;
      position:absolute !important;
      left:-145px !important;
      top:-70px !important;
      width:720px !important;
      height:560px !important;
      inset:auto !important;
      z-index:0 !important;
      pointer-events:none !important;
      background:
        radial-gradient(circle at 250px 185px,
          rgba(var(--status-rgb), 1) 0%,
          rgba(var(--status-rgb), .96) 8%,
          rgba(var(--status-rgb), .76) 18%,
          rgba(var(--status-rgb), .48) 31%,
          rgba(var(--status-rgb), .24) 45%,
          rgba(var(--status-rgb), .10) 58%,
          rgba(var(--status-rgb), .035) 70%,
          rgba(var(--status-rgb), 0) 84%
        ) !important;
      filter:blur(38px) saturate(155%) !important;
      opacity:1 !important;
      animation:none !important;
      transform:none !important;
    }
    .viewer-bg::before{
      content:"" !important;
      position:absolute !important;
      left:-60px !important;
      top:-10px !important;
      width:520px !important;
      height:430px !important;
      inset:auto !important;
      z-index:0 !important;
      background:
        radial-gradient(circle at 190px 130px,
          rgba(var(--status-rgb), .72) 0%,
          rgba(var(--status-rgb), .42) 21%,
          rgba(var(--status-rgb), .18) 42%,
          rgba(var(--status-rgb), .055) 62%,
          rgba(var(--status-rgb), 0) 82%
        ) !important;
      filter:blur(24px) saturate(140%) !important;
      opacity:.95 !important;
      animation:none !important;
      transform:none !important;
    }
    .viewer-bg::after{
      display:none !important;
    }
    .viewer-inner{
      position:relative !important;
      z-index:1 !important;
    }
    .top-mobile-track[data-status="ready"] .top-mobile-track-title{
      background:radial-gradient(ellipse at 10% 50%, rgba(34,197,94,.26) 0%, rgba(34,197,94,.08) 58%, transparent 90%);
      border-radius:24px;
      padding:6px 16px;
      text-shadow:0 0 16px rgba(34,197,94,.38), 0 0 34px rgba(34,197,94,.16);
    }
    .top-mobile-track[data-status="warning"] .top-mobile-track-title{
      background:radial-gradient(ellipse at 10% 50%, rgba(245,158,11,.30) 0%, rgba(245,158,11,.09) 58%, transparent 90%);
      border-radius:24px;
      padding:6px 16px;
      text-shadow:0 0 16px rgba(245,158,11,.42), 0 0 34px rgba(245,158,11,.18);
    }
    .top-mobile-track[data-status="not_ready"] .top-mobile-track-title{
      background:radial-gradient(ellipse at 10% 50%, rgba(239,68,68,.28) 0%, rgba(239,68,68,.08) 58%, transparent 90%);
      border-radius:24px;
      padding:6px 16px;
      text-shadow:0 0 16px rgba(239,68,68,.40), 0 0 34px rgba(239,68,68,.16);
    }
    @media (max-width: 760px){
      body,
      .shell,
      .layout,
      .main{
        background-color:#080d17 !important;
      }
      .main{
        background:
          radial-gradient(circle at 18% 8%, rgba(138,123,255,.08), transparent 34%),
          linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
          linear-gradient(135deg, #0b1020 0%, #070b13 52%, #101827 100%) !important;
        background-size:auto, 24px 24px, 24px 24px, auto !important;
      }
      .viewer{
        background:
          linear-gradient(180deg, rgba(12,16,28,.96), rgba(7,10,18,.94)) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.035),
          0 16px 36px rgba(0,0,0,.24) !important;
        border-color:rgba(255,255,255,.08) !important;
      }
      .viewer::after,
      .viewer-bg::before,
      .viewer-bg::after,
      .mobile-detail-shell::before,
      .mobile-detail-shell::after{
        display:none !important;
        content:none !important;
        background:none !important;
      }
      .mobile-detail-shell{
        background:rgba(9,13,23,.78) !important;
        border-color:rgba(255,255,255,.09) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.04),
          0 16px 34px rgba(0,0,0,.24) !important;
      }
      .mobile-layout{
        background:transparent !important;
      }
      .mobile-detail-shell .lyrics-panel,
      .mobile-detail-shell .notes-panel,
      .mobile-detail-shell .chat-panel,
      .mobile-detail-shell .mobile-row,
      .mobile-detail-shell .tab-file-card{
        background:
          radial-gradient(
            ellipse at 0% 0%,
            rgba(var(--status-rgb), .54) 0%,
            rgba(var(--status-rgb), .30) 27%,
            rgba(var(--status-rgb), .12) 52%,
            rgba(var(--status-rgb), .04) 70%,
            rgba(var(--status-rgb), 0) 88%
          ),
          linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.030)) !important;
        border-color:rgba(var(--status-rgb), .24) !important;
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.055),
          inset 0 0 0 1px rgba(var(--status-rgb), .09),
          0 0 18px rgba(var(--status-rgb), .08),
          0 14px 28px rgba(0,0,0,.20) !important;
        backdrop-filter:blur(16px) !important;
        -webkit-backdrop-filter:blur(16px) !important;
      }
      .mobile-detail-shell .lyrics-panel{
        background:
          radial-gradient(
            ellipse at 0% 0%,
            rgba(var(--status-rgb), .60) 0%,
            rgba(var(--status-rgb), .34) 26%,
            rgba(var(--status-rgb), .14) 52%,
            rgba(var(--status-rgb), .045) 72%,
            rgba(var(--status-rgb), 0) 90%
          ),
          linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.028)) !important;
      }
      .mobile-detail-shell .mobile-row.playing{
        background:
          radial-gradient(
            ellipse at 0% 0%,
            rgba(var(--status-rgb), .72) 0%,
            rgba(var(--status-rgb), .40) 30%,
            rgba(var(--status-rgb), .15) 58%,
            rgba(var(--status-rgb), 0) 88%
          ),
          linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.050)) !important;
        border-color:rgba(var(--status-rgb), .34) !important;
      }
    }
@media (max-width: 760px){
  .mobile-detail-shell::before,
  .mobile-detail-shell::after,
  .viewer::before,
  .viewer::after,
  .viewer-bg{
    display:none !important;
    content:none !important;
    background:none !important;
  }
  .viewer,
  .mobile-detail-shell,
  .mobile-layout{
    background:transparent !important;
    box-shadow:none !important;
    border-color:transparent !important;
  }
}
    @media (max-width:760px){
      .shell{
        padding-left:4px !important;
        padding-right:4px !important;
      }
      .viewer{
        padding-left:4px !important;
        padding-right:4px !important;
      }
      .mobile-detail-shell{
        padding-left:6px !important;
        padding-right:6px !important;
      }
      .tracks-list{
        padding-left:4px !important;
        padding-right:4px !important;
      }
      .track-card{
        padding-left:14px !important;
        padding-right:42px !important;
      }
      .mobile-detail-shell .lyrics-panel,
      .mobile-detail-shell .notes-panel,
      .mobile-detail-shell .chat-panel,
      .mobile-detail-shell .mobile-row,
      .mobile-detail-shell .tab-file-card{
        width:100% !important;
        max-width:none !important;
      }
    }


/* === No-password / track plan patch === */
html:not(.dm-auth-preload) .shell,
body.app-ready .shell{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}
body:not(.dm-auth-locked) #dmAuthGate{display:none !important;}

.track-plan-modal-root{position:fixed;inset:0;z-index:9999;display:none;}
.track-plan-modal-root.open{display:block;}
.track-plan-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.track-plan-modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(96vw,1120px);max-height:88vh;border-radius:24px;padding:16px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;overflow:hidden;}
.track-plan-head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.track-plan-title{font-size:24px;font-weight:950;letter-spacing:-.04em;text-transform:uppercase;}
.track-plan-sub{font-size:13px;color:rgba(255,255,255,.56);margin-top:4px;}
.track-plan-table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(0,0,0,.18);}
.track-plan-table{width:100%;border-collapse:collapse;font-size:13px;}
.track-plan-table th,.track-plan-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center;white-space:nowrap;}
.track-plan-table th{position:sticky;top:0;background:rgba(15,17,24,.96);z-index:1;color:rgba(255,255,255,.72);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
.track-plan-table tr{cursor:pointer;}
.track-plan-table tr:hover td{background:rgba(255,255,255,.055);}
.track-plan-table .plan-track-title{text-align:left;font-weight:850;max-width:320px;overflow:hidden;text-overflow:ellipsis;}
.plan-mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;font-weight:950;}
.plan-mark.ok{color:#7ef0a0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.25);}
.plan-mark.empty{color:rgba(255,255,255,.28);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);}
.plan-status{display:inline-flex;align-items:center;justify-content:center;min-width:112px;padding:6px 10px;border-radius:999px;font-weight:850;border:1px solid rgba(255,255,255,.12);}
.plan-status.ready{color:#7ef0a0;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.24);}
.plan-status.warning{color:#ffd078;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.24);}
.plan-status.not_ready{color:#ff9999;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.24);}
.plan-btn{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.07);}


/* v41 compact wide layout + simple notes */
.hero{ margin-bottom: 10px; }
.viewer-stage{ max-width: calc(100vw - 72px); }
.desktop-layout{ align-items: stretch; }
.simple-comments-panel{
  width: var(--desktop-chat);
  min-height: calc(var(--desktop-card-h) * 2 + var(--desktop-gap) + 116px);
  max-height: calc(var(--desktop-card-h) * 2 + var(--desktop-gap) + 116px);
}
.simple-comments-list{ gap:8px; }
.simple-note-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  padding:10px 11px;
  display:grid;
  gap:6px;
}
.simple-note-text{
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.45;
  font-size:13px;
  color:rgba(255,255,255,.90);
}
.simple-note-time{
  font-size:11px;
  color:rgba(255,255,255,.42);
}
.simple-comments-compose .textarea{ min-height:84px; }
.track-plan-table tbody tr.plan-row.status-ready{
  background:linear-gradient(90deg, rgba(34,197,94,.14), rgba(34,197,94,.045));
}
.track-plan-table tbody tr.plan-row.status-warning{
  background:linear-gradient(90deg, rgba(245,158,11,.16), rgba(245,158,11,.045));
}
.track-plan-table tbody tr.plan-row.status-not_ready{
  background:linear-gradient(90deg, rgba(239,68,68,.14), rgba(239,68,68,.04));
}
.track-plan-table tbody tr.plan-row:hover{ filter:brightness(1.12); }
@media (max-width: 1480px){
  :root{
    --desktop-card:250px;
    --desktop-gap:12px;
    --desktop-info:360px;
    --desktop-chat:340px;
  }
  .viewer-stage{ max-width: calc(100vw - 48px); }
}


/* v42 delete notes + smoother UX */
.shell,
.viewer,
.track-card,
.media-card,
.lyrics-panel,
.notes-panel,
.simple-comments-panel,
.track-plan-modal{
  transition:
    opacity .28s ease,
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

.main-content-pop .viewer{
  animation:viewerSoftIn .34s cubic-bezier(.2,.85,.2,1) both;
}

@keyframes viewerSoftIn{
  from{opacity:.72;transform:translateY(10px) scale(.992);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}

.track-card{
  transition:transform .22s cubic-bezier(.2,.85,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease, filter .22s ease;
}
.track-card:hover{transform:translateY(-2px) scale(1.006)}
.track-card.active{transform:translateY(-1px) scale(1.01)}
.track-card:active{transform:scale(.992)}

.track-item.dragging{
  opacity:.38;
  transform:scale(.975);
  filter:saturate(.6) brightness(.85);
}
.track-item.drag-over-top::before,
.track-item.drag-over-bottom::after{
  left:6px;
  right:6px;
  height:40px;
  border-radius:16px;
  border:1px dashed rgba(210,205,255,.72);
  background:
    radial-gradient(circle at 50% 50%, rgba(138,123,255,.22), transparent 62%),
    linear-gradient(90deg, rgba(138,123,255,.10), rgba(255,255,255,.08), rgba(138,123,255,.10));
  box-shadow:0 0 0 1px rgba(138,123,255,.10), 0 0 28px rgba(138,123,255,.22), inset 0 1px 0 rgba(255,255,255,.10);
  animation:dropPlaceholderPulse 1s ease-in-out infinite;
}
.track-item.drag-over-top::before{top:-44px}
.track-item.drag-over-bottom::after{bottom:-44px}
@keyframes dropPlaceholderPulse{
  0%,100%{opacity:.74;transform:scale(.985)}
  50%{opacity:1;transform:scale(1)}
}

.simple-note-card{
  position:relative;
  padding-right:42px;
  animation:noteSoftIn .24s ease both;
}
@keyframes noteSoftIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
.simple-note-delete{
  position:absolute;
  top:9px;
  right:9px;
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:#ffb9b9;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  opacity:.62;
  transition:opacity .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.simple-note-delete:hover{
  opacity:1;
  background:rgba(239,68,68,.18);
  border-color:rgba(239,68,68,.36);
  transform:translateY(-1px);
}
.simple-note-delete:active{transform:scale(.96)}

@media (min-width:981px){
  .shell{padding:6px;gap:6px;}
  .layout{gap:6px;}
  .viewer{min-height:100%;}
  .viewer-stage{max-width:calc(100vw - 36px);}
  .desktop-layout{gap:14px;}
  .viewer-inner{gap:10px;}
  .hero{margin-bottom:6px;}
}


/* Smooth track drag v2 */
.track-item{
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    opacity .18s ease,
    margin .22s cubic-bezier(.2,.8,.2,1);
}

.track-item.smooth-drag-placeholder{
  position:relative;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(138,123,255,.16), transparent 62%),
    linear-gradient(90deg, rgba(138,123,255,.08), rgba(255,255,255,.05), rgba(138,123,255,.08));
  outline:1px dashed rgba(220,216,255,.82);
  outline-offset:-2px;
  box-shadow:
    0 0 0 1px rgba(138,123,255,.10),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 26px rgba(138,123,255,.18);
  animation:trackDragPlaceholderPulse 1s ease-in-out infinite;
}

.track-item.smooth-drag-placeholder > *{
  opacity:0;
  visibility:hidden;
}

.track-drag-ghost{
  position:fixed;
  left:0;
  top:0;
  z-index:99999;
  pointer-events:none;
  opacity:.96;
  transform-origin:center;
  filter:
    drop-shadow(0 22px 30px rgba(0,0,0,.42))
    drop-shadow(0 0 24px rgba(138,123,255,.20));
  transition:filter .16s ease, opacity .16s ease;
  will-change:transform;
}

.track-drag-ghost .track-card{
  transform:translateY(8px) scale(1.015);
  border-color:rgba(220,216,255,.58);
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    0 0 0 1px rgba(138,123,255,.20),
    0 0 28px rgba(138,123,255,.22);
}

.track-drag-ghost .track-delete{
  opacity:0;
}

body.is-track-dragging,
body.is-track-dragging *{
  cursor:grabbing !important;
  user-select:none !important;
}

@keyframes trackDragPlaceholderPulse{
  0%,100%{opacity:.78;filter:brightness(.96)}
  50%{opacity:1;filter:brightness(1.08)}
}