:root,
      [data-theme="dark"] {
        --bg: #1a1025;
        --bg1: #211533;
        --bg2: #2d2045;
        --bg3: #382a55;
        --pink: #ff7eb3;
        --lav: #c4b5fd;
        --cyan: #7afcff;
        --ylw: #fde68a;
        --grn: #86efac;
        --t1: #f0e8ff;
        --t2: #a89bc4;
        --t3: #6b5d85;
        --bd: rgba(255, 255, 255, 0.07);
        --bd2: rgba(255, 126, 179, 0.3);
        --sh: rgba(0, 0, 0, 0.3);
        --glow: rgba(255, 126, 179, 0.15);
        --sidebg: linear-gradient(180deg, #211533, #1a1025);
        --bodybg:
          radial-gradient(
            ellipse at 10% 15%,
            rgba(196, 181, 253, 0.06),
            transparent 55%
          ),
          radial-gradient(
            ellipse at 90% 85%,
            rgba(255, 126, 179, 0.05),
            transparent 50%
          );
      }
      [data-theme="light"] {
        --bg: #f5f0ff;
        --bg1: #ece5f8;
        --bg2: #fff;
        --bg3: #e8dff2;
        --pink: #c2185b;
        --lav: #6c5ce7;
        --cyan: #0097a7;
        --ylw: #e67e22;
        --grn: #2e7d32;
        --t1: #2d1b4e;
        --t2: #6b5d85;
        --t3: #9b8fb8;
        --bd: rgba(0, 0, 0, 0.08);
        --bd2: rgba(194, 24, 91, 0.25);
        --sh: rgba(0, 0, 0, 0.06);
        --glow: rgba(194, 24, 91, 0.1);
        --sidebg: #fff;
        --bodybg:
          radial-gradient(
            ellipse at 10% 15%,
            rgba(108, 92, 231, 0.04),
            transparent 55%
          ),
          radial-gradient(
            ellipse at 90% 85%,
            rgba(194, 24, 91, 0.03),
            transparent 50%
          );
      }
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      body {
        font-family:
          -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
        background: var(--bg);
        color: var(--t1);
        min-height: 100vh;
        overflow-x: hidden;
        line-height: 1.6;
        transition:
          background 0.3s,
          color 0.3s;
      }
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: var(--bodybg);
        pointer-events: none;
        z-index: 0;
        transition: background 0.3s;
      }
      ::-webkit-scrollbar {
        width: 5px;
      }
      ::-webkit-scrollbar-thumb {
        background: var(--t3);
        border-radius: 3px;
      }
      .app {
        display: flex;
        min-height: 100vh;
        position: relative;
        z-index: 1;
      }
      .side {
        width: var(--side-w, 200px);
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: var(--sidebg);
        border-right: 1px solid var(--bd);
        display: flex;
        flex-direction: column;
        z-index: 100;
        transition: background 0.3s;
      }
      .logo {
        padding: 20px 12px 14px;
        text-align: center;
        border-bottom: 1px solid var(--bd);
      }
      .av {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        margin: 0 auto 8px;
        background: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.8rem;
        box-shadow: none;
      }
      .ln {
        font-weight: 900;
        font-size: 1.05rem;
        background: linear-gradient(
          135deg,
          var(--pink),
          var(--lav),
          var(--cyan)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .ls {
        font-size: 0.58rem;
        color: var(--t3);
        letter-spacing: 0.1em;
      }
      .nav {
        flex: 1;
        padding: 6px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
      .nl {
        font-size: 0.54rem;
        color: var(--t3);
        text-transform: uppercase;
        letter-spacing: 0.15em;
        padding: 8px 0 3px;
        text-align: center;
      }
      .ni {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 0;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--t2);
        font-size: 0.82rem;
        margin-bottom: 1px;
        position: relative;
      }
      .ni:hover {
        background: rgba(255, 255, 255, 0.04);
        color: var(--t1);
      }
      [data-theme="light"] .ni:hover {
        background: rgba(0, 0, 0, 0.03);
      }
      .ni.on {
        background: linear-gradient(
          135deg,
          rgba(255, 126, 179, 0.12),
          rgba(196, 181, 253, 0.08)
        );
        color: var(--pink);
      }
      .ni.on::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 50%;
        background: var(--pink);
        border-radius: 0 3px 3px 0;
      }
      .ni .ic {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1rem;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--bd);
      }
      [data-theme="light"] .ni .ic {
        background: rgba(0, 0, 0, 0.03);
      }
      .ni.on .ic {
        background: rgba(255, 126, 179, 0.1);
        border-color: rgba(255, 126, 179, 0.2);
      }
      .ni > span:not(.ic) {
        min-width: 4.2em;
        text-align: center;
      }
      .foot {
        padding: 8px;
        border-top: 1px solid var(--bd);
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .tbtn,
      .abtn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 7px 0;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--t3);
        font-size: 0.78rem;
        width: 100%;
        border: 1px solid var(--bd);
        background: 0;
        font-family: inherit;
      }
      .tbtn:hover {
        border-color: var(--cyan);
        color: var(--cyan);
      }
      .abtn:hover {
        border-color: var(--lav);
        color: var(--lav);
      }
      .abtn.on {
        border-color: var(--grn);
        color: var(--grn);
        border-style: solid;
      }
      .main {
        flex: 1;
        margin-left: var(--side-w, 200px);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }
      .pg {
        display: none;
        padding: 24px 32px;
        animation: fi 0.25s ease;
      }
      .pg.on {
        display: block;
      }
      @keyframes fi {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .hd {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
      }
      .hd h2 {
        font-size: 1.3rem;
        font-weight: 900;
      }
      .hd p {
        color: var(--t2);
        font-size: 0.82rem;
        width: 100%;
        margin-top: -2px;
      }
      .ab {
        display: none;
        align-items: center;
        gap: 4px;
        padding: 3px 9px;
        background: rgba(134, 239, 172, 0.1);
        border: 1px solid rgba(134, 239, 172, 0.2);
        border-radius: 12px;
        font-size: 0.68rem;
        color: var(--grn);
        margin-left: auto;
      }
      .amode .ab {
        display: flex;
      }
      .ab .d {
        width: 4px;
        height: 4px;
        background: var(--grn);
        border-radius: 50%;
        animation: pu 2s infinite;
      }
      @keyframes pu {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 11px;
        border-radius: 10px;
        font-size: 0.78rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        font-family: inherit;
        text-decoration: none;
      }
      .bp {
        background: linear-gradient(135deg, var(--pink), var(--lav));
        color: #fff;
      }
      .bp:hover {
        box-shadow: 0 3px 12px var(--glow);
        transform: translateY(-1px);
      }
      .bs {
        background: var(--bg2);
        color: var(--t2);
        border: 1px solid var(--bd);
      }
      .bs:hover {
        border-color: var(--t2);
        color: var(--t1);
      }
      .bx {
        background: 0;
        color: var(--t2);
        padding: 3px 6px;
      }
      .bx:hover {
        color: var(--pink);
      }
      .sm {
        padding: 4px 8px;
        font-size: 0.7rem;
      }
      .bd {
        background: rgba(248, 113, 113, 0.12);
        color: #f87171;
        border: 1px solid rgba(248, 113, 113, 0.2);
      }
      .ao {
        display: none !important;
      }
      .amode .ao {
        display: inline-flex !important;
      }
      .hero {
        background: linear-gradient(
          135deg,
          rgba(255, 126, 179, 0.06),
          rgba(196, 181, 253, 0.04)
        );
        border: 1px solid var(--bd);
        border-radius: 12px;
        padding: 24px 26px;
        margin-bottom: 18px;
      }
      .ht {
        font-size: 1.45rem;
        font-weight: 900;
        margin-bottom: 3px;
      }
      .w {
        display: inline-block;
        animation: wave 2.5s ease-in-out infinite;
        transform-origin: 70% 70%;
      }
      @keyframes wave {
        0%,
        100% {
          transform: rotate(0);
        }
        10% {
          transform: rotate(14deg);
        }
        20% {
          transform: rotate(-8deg);
        }
        30%,
        60%,
        100% {
          transform: rotate(0);
        }
      }
      .hs {
        color: var(--t2);
        font-size: 0.86rem;
      }
      /* ── 统计卡片：基础（窄屏） ── */
      .stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 18px;
      }
      @media (max-width: 600px) {
        .stats {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .st {
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 12px;
        padding: 12px 14px 12px 24px;
        transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15%;
        position: relative;
        overflow: hidden;
      }
      .st::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--st-glow, rgba(255,126,179,0.04));
        opacity: 0;
        transition: opacity 0.3s;
      }
      .st:hover::before {
        opacity: 1;
      }
      .st:hover {
        border-color: var(--bd2);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--sh);
      }
      .st .si {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        flex-shrink: 0;
        font-size: 1.15rem;
        position: relative;
        z-index: 1;
      }
      .st .st-hd {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 1;
      }
      .st .stx {
        position: relative;
        z-index: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .st .stx .st-label {
        font-size: 0.64rem;
        color: var(--t3);
        font-weight: 500;
        margin-top: 1px;
        min-width: 3em;
        text-align: center;
      }
      .st .sv {
        font-size: 1.5rem;
        font-weight: 900;
        line-height: 1.1;
        letter-spacing: -0.02em;
        min-width: 3em;
        text-align: center;
      }
      .st .st-deco {
        display: none;
      }

      /* ── 统计卡片：宽屏模式 ── */
      body[data-layout="wide"] .stats {
        gap: clamp(10px, 2vw, 30px);
      }
      body[data-layout="wide"] .st {
        padding: clamp(16px, 1.5vw, 28px) clamp(20px, 2vw, 36px) clamp(16px, 1.5vw, 28px) clamp(30px, 3vw, 56px);
        border-radius: 14px;
        gap: 18%;
        min-height: max(110px, 8vw);
      }
      body[data-layout="wide"] .st::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: var(--st-deco-bg, radial-gradient(circle, rgba(255,126,179,0.08), transparent 70%));
        border-radius: 50%;
        transform: translate(30%, -30%);
        pointer-events: none;
        transition: opacity 0.3s;
        opacity: 0.6;
      }
      body[data-layout="wide"] .st:hover::after {
        opacity: 1;
      }
      body[data-layout="wide"] .st .si {
        width: clamp(44px, 3vw, 64px);
        height: clamp(44px, 3vw, 64px);
        font-size: clamp(1.2rem, 1.2vw, 1.8rem);
        border-radius: 13px;
      }
      body[data-layout="wide"] .st .stx {
        flex-direction: column;
      }
      body[data-layout="wide"] .st .sv {
        font-size: clamp(1.6rem, 2vw, 3rem);
        letter-spacing: -0.03em;
      }
      body[data-layout="wide"] .st .stx .st-label {
        font-size: clamp(0.65rem, 0.7vw, 0.9rem);
        margin-top: 2px;
      }
      body[data-layout="wide"] .st .st-deco {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--st-bar, linear-gradient(90deg, rgba(255,126,179,0.5), transparent));
        border-radius: 0 0 14px 14px;
        opacity: 0;
        transition: opacity 0.3s;
      }
      body[data-layout="wide"] .st:hover .st-deco {
        opacity: 1;
      }
      .stt {
        font-size: 0.92rem;
        font-weight: 700;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .stt .dt {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--pink);
      }
      .ann {
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-left: 3px solid var(--ylw);
        border-radius: 8px;
        padding: 10px 13px;
        margin-bottom: 6px;
        transition: all 0.2s;
        position: relative;
      }
      .ann:hover {
        border-color: var(--bd2);
      }
      .ann .ad {
        font-size: 0.64rem;
        color: var(--t3);
      }
      .ann .at {
        font-weight: 600;
        margin: 2px 0 1px;
        font-size: 0.83rem;
      }
      .ann .ax {
        font-size: 0.76rem;
        color: var(--t2);
      }
      .ann .nd {
        position: absolute;
        top: 5px;
        right: 5px;
        display: none;
        z-index: 3;
        width: 24px;
        height: 24px;
        padding: 0;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
      }
      .amode .ann .nd {
        display: inline-flex;
      }
      .tbar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        flex-wrap: wrap;
      }
      .sb {
        flex: 1;
        min-width: 130px;
        position: relative;
      }
      .sb input {
        width: 100%;
        padding: 7px 10px 7px 28px;
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 8px;
        color: var(--t1);
        font-size: 0.82rem;
        font-family: inherit;
        outline: 0;
        transition: border-color 0.2s;
      }
      .sb input:focus {
        border-color: var(--pink);
      }
      .sb input::placeholder {
        color: var(--t3);
      }
      .sb .ic2 {
        position: absolute;
        left: 9px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--t3);
        font-size: 0.78rem;
      }
      .cr {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 12px;
        font-size: 0.8rem;
      }
      .cr .ci {
        color: var(--t2);
        cursor: pointer;
        transition: color 0.2s;
      }
      .cr .ci:hover {
        color: var(--pink);
      }
      .cr .ci.nw {
        color: var(--t1);
        font-weight: 500;
        cursor: default;
      }
      .cr .cs {
        color: var(--t3);
        font-size: 0.6rem;
      }
      .fg {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
        gap: 12px;
      }
      .fd {
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 12px;
        padding: 12px;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
      }
      .fd:hover {
        border-color: var(--bd2);
        transform: translateY(-3px);
      }
      .fd::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--fc, var(--pink));
        opacity: 0;
        transition: opacity 0.3s;
      }
      .fd:hover::before {
        opacity: 1;
      }
      .fpv {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        aspect-ratio: 5/2.2;
        background: rgba(0, 0, 0, 0.12);
        border-radius: 6px;
        overflow: hidden;
        position: relative;
      }
      .fpv img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .fpv .fpv-empty {
        color: var(--t3);
        font-size: 1.4rem;
        opacity: 0.4;
      }
      .fpi {
        border-radius: 2px;
        aspect-ratio: 1;
      }
      .fm {
        display: flex;
        align-items: center;
        gap: 7px;
      }
      .fi2 {
        flex: 1;
        min-width: 0;
      }
      .fn {
        font-weight: 600;
        font-size: 0.82rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .fc {
        font-size: 0.66rem;
        color: var(--t3);
      }
      .fdl {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(248, 113, 113, 0.9);
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 0.7rem;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 3;
        transition: transform 0.15s, background 0.15s;
      }
      .fdl:hover {
        transform: scale(1.15);
        background: rgba(248, 113, 113, 1);
      }
      .amode .fdl {
        display: flex;
      }
      .gbox-wrap {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 10px;
        margin-bottom: 10px;
      }
      .gbox {
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 12px;
        overflow: hidden;
        transition: border-color 0.3s;
      }
      .gbox:hover {
        border-color: var(--bd2);
      }
      .gbox-hd {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 13px;
        border-bottom: 1px solid var(--bd);
        font-weight: 600;
        font-size: 0.84rem;
        background: rgba(255, 255, 255, 0.02);
      }
      [data-theme="light"] .gbox-hd {
        background: rgba(0, 0, 0, 0.02);
      }
      .gbox-hd .gpath {
        flex: 1;
        min-width: 0;
      }
      .gbox-hd .gpath .gfname {
        color: var(--t3);
        font-weight: 400;
        font-size: 0.68rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
      .gbox-hd .gpath .gname {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        font-size: 0.78rem;
      }
      .gbox-hd .gcnt {
        color: var(--t3);
        font-weight: 400;
        font-size: 0.64rem;
        flex-shrink: 0;
      }
      .gbox-hd .gops {
        margin-left: auto;
        display: flex;
        gap: 3px;
        flex-shrink: 0;
      }
      /* 搜索结果：单文件单分组 → 半宽卡片 */
      .gbox.mini {
        max-width: none;
      }
      .gbox.mini .gbox-hd {
        padding: 7px 10px;
      }
      .gbox.mini .gbox-hd .gfname {
        font-size: 0.62rem;
      }
      .gbox.mini .gbox-hd .gname {
        font-size: 0.72rem;
      }
      .gbox.mini .gbox-body {
        padding: 8px 8px;
      }
      .gbox.mini .gbox-body > div {
        grid-template-columns: 1fr;
        gap: 4px;
      }
      .gbox.mini .ff {
        padding: 14px 10px;
      }
      .gbox.mini .ff .ft {
        width: 40px;
        height: 40px;
      }
      .gbox.mini .ff .fn2 {
        font-size: 0.66rem;
      }
      /* 搜索结果外层网格：mini 卡片用 120px 列宽 */
      .gbox-wrap.search-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        grid-auto-flow: dense;
      }
      /* 普通卡片占两列，mini占一列 */
      .gbox-wrap.search-grid > .gbox:not(.mini) {
        grid-column: span 2;
      }
      .gbox-hd .gops .ao {
        display: none !important;
      }
      .amode .gbox-hd .gops .ao {
        display: inline-flex !important;
      }
      .gbox-body {
        padding: 8px 10px;
      }
      .fig {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        gap: 8px;
      }
      body[data-layout="wide"] .fig {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 10px;
      }
      .ff {
        background: var(--bg3);
        border: 1px solid var(--bd);
        border-radius: 10px;
        padding: 10px;
        text-align: center;
        transition: all 0.3s;
        position: relative;
      }
      .ff:hover {
        border-color: var(--bd2);
        transform: translateY(-2px);
      }
      .ff .ft {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 6px;
        font-size: 1.1rem;
      }
      .ff .fn2 {
        font-size: 0.72rem;
        font-weight: 500;
        margin-bottom: 2px;
        word-break: break-all;
        line-height: 1.3;
      }
      .ff .fm2 {
        font-size: 0.62rem;
        color: var(--t3);
        display: flex;
        justify-content: center;
        gap: 4px;
      }
      .ff .fa {
        margin-top: 6px;
        display: flex;
        gap: 3px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
      .ff .mv {
        display: none;
        font-size: 0.6rem;
        padding: 2px 4px;
        background: var(--bg);
        border: 1px solid var(--bd);
        border-radius: 4px;
        color: var(--t1);
        max-width: 65px;
      }
      .amode .ff .mv {
        display: inline;
      }
      .ff .fd2 {
        display: none !important;
      }
      .amode .ff .fd2 {
        display: inline-flex !important;
        min-width: 24px;
        min-height: 24px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: transform 0.15s, background 0.15s;
      }
      .amode .ff .fd2:hover {
        transform: scale(1.15);
        background: rgba(248, 113, 113, 0.25);
      }
      .t-pdf {
        background: rgba(255, 107, 87, 0.15);
        color: #ff6b57;
      }
      .t-doc {
        background: rgba(87, 143, 255, 0.15);
        color: #578fff;
      }
      .t-ppt {
        background: rgba(255, 167, 38, 0.15);
        color: #ffa726;
      }
      .t-xls {
        background: rgba(102, 187, 106, 0.15);
        color: #66bb6a;
      }
      .t-zip {
        background: rgba(186, 104, 200, 0.15);
        color: #ba68c8;
      }
      .t-img {
        background: rgba(255, 138, 128, 0.15);
        color: #ff8a80;
      }
      .t-vid {
        background: rgba(79, 195, 247, 0.15);
        color: #4fc3f7;
      }
      .t-html {
        background: rgba(255, 107, 87, 0.15);
        color: #ff6b57;
      }
      .t-html {
        background: rgba(255, 107, 87, 0.15);
        color: #ff6b57;
      }
      .t-code {
        background: rgba(129, 199, 132, 0.15);
        color: #81c784;
      }
      .t-other {
        background: rgba(176, 190, 197, 0.15);
        color: #b0bec5;
      }
      .xg {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 12px;
      }
      .xc {
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
      }
      .xc:hover {
        border-color: var(--bd2);
        transform: translateY(-3px);
        box-shadow: 0 6px 16px var(--sh);
      }
      .xcv {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem;
        position: relative;
        overflow: hidden;
      }
      .xcv::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, var(--bg2), transparent 50%);
      }
      .xcv .em {
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
      }
      .xcv img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        z-index: 0;
      }
      .xb {
        padding: 10px 12px 4px;
        flex: 1;
      }
      .xtg {
        display: flex;
        gap: 3px;
        margin-bottom: 0;
        flex-wrap: wrap;
        align-items: center;
      }
      .xt-stars {
        margin-left: auto;
        line-height: 1;
      }
      .xt {
        font-size: 0.68rem;
        padding: 0px 6px;
        border-radius: 12px;
        background: rgba(255, 126, 179, 0.1);
        color: var(--pink);
        font-weight: 500;
        line-height: 1.4;
      }
      .xtt {
        font-weight: 700;
        font-size: 0.88rem;
        margin: 0;
        line-height: 1.3;
      }
      .xsm {
        font-size: 0.74rem;
        color: var(--t2);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
      }
      .xrt {
        color: var(--ylw);
        font-size: 0.66rem;
        margin-top: 0;
        letter-spacing: 1px;
      }
      .xf {
        padding: 2px 12px 1px;
        border-top: 1px solid var(--bd);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.66rem;
        color: var(--t3);
      }
      .xf .btn {
        padding: 5px 10px;
        font-size: 0.72rem;
        min-height: 28px;
      }
      .pfb {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 1px 5px;
        border-radius: 4px;
        font-size: 0.55rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--bd);
        color: var(--t3);
        white-space: nowrap;
      }
      [data-theme="light"] .pfb {
        background: rgba(0, 0, 0, 0.03);
      }
      .pfb.ver {
        background: rgba(122, 252, 255, 0.08);
        color: var(--cyan);
        border-color: rgba(122, 252, 255, 0.15);
      }
      .pf-btn {
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 0.68rem;
        cursor: pointer;
        border: 1px solid var(--bd);
        background: 0;
        color: var(--t3);
        font-family: inherit;
        transition: all 0.2s;
      }
      .pf-btn:hover {
        border-color: var(--t2);
        color: var(--t2);
      }
      .pf-btn.on {
        border-color: var(--pink);
        background: rgba(255, 126, 179, 0.1);
        color: var(--pink);
      }
      .rd {
        max-width: 680px;
        width: 100%;
        margin: 0 auto;
        padding: 0 16px;
      }
      .rb {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--t2);
        cursor: pointer;
        margin-bottom: 14px;
        font-size: 0.82rem;
        transition: color 0.2s;
      }
      .rb:hover {
        color: var(--pink);
      }
      .rd h1 {
        font-size: 1.45rem;
        font-weight: 900;
        margin-bottom: 6px;
      }
      .rm {
        color: var(--t3);
        font-size: 0.76rem;
        margin-bottom: 18px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
      }
      .rc {
        font-size: 0.88rem;
        line-height: 1.85;
        color: var(--t2);
        word-break: break-word;
        overflow-wrap: break-word;
      }
      .rc strong, .rc b {
        color: var(--t1);
        font-weight: 700;
      }
      .rc em, .rc i {
        color: var(--lav);
        font-style: italic;
      }
      .rc h2 {
        color: var(--t1);
        font-size: 1.1rem;
        margin: 18px 0 6px;
        font-weight: 700;
      }
      .rc h3 {
        color: var(--t1);
        font-size: 0.96rem;
        margin: 12px 0 4px;
        font-weight: 600;
      }
      .rc p {
        margin-bottom: 10px;
      }
      .rc ul,
      .rc ol {
        margin-bottom: 10px;
        padding-left: 16px;
      }
      .rc li {
        margin-bottom: 3px;
      }
      .rc code {
        background: var(--bg2);
        padding: 1px 4px;
        border-radius: 3px;
        font-family: monospace;
        font-size: 0.83em;
        color: var(--cyan);
      }
      .rc blockquote {
        border-left: 3px solid var(--lav);
        padding: 6px 12px;
        margin: 8px 0;
        background: rgba(196, 181, 253, 0.04);
        border-radius: 0 6px 6px 0;
      }
      .rc img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 8px 0;
        display: block;
      }
      .pc {
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 12px;
        padding: 22px;
        text-align: center;
        margin-bottom: 18px;
        position: relative;
        overflow: hidden;
      }
      .pc::before {
        content: "";
        position: absolute;
        inset: 0;
        background: conic-gradient(
          from 0deg,
          transparent,
          rgba(255, 126, 179, 0.02),
          transparent,
          rgba(196, 181, 253, 0.02),
          transparent
        );
        animation: sp 20s linear infinite;
        pointer-events: none;
      }
      @keyframes sp {
        to {
          transform: rotate(360deg);
        }
      }
      .pav {
        font-size: 2.6rem;
        margin-bottom: 5px;
        animation: fl 3s ease-in-out infinite;
        display: inline-block;
      }
      .pav .av-img {
        width: 130px;
        border-radius: 14px;
        display: block;
        margin: 0 auto;
      }
      @keyframes fl {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-5px);
        }
      }
      .pn {
        font-size: 1rem;
        font-weight: 900;
        margin-bottom: 3px;
      }
      .pb {
        color: var(--t2);
        font-size: 0.82rem;
        line-height: 1.5;
      }
      .about-inner {
        max-width: 640px;
        margin: 0 auto;
      }
      .ics {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 12px;
      }
      .ic {
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 8px;
        padding: 9px 11px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .ic .ii {
        font-size: 0.95rem;
      }
      .ic .it {
        flex: 1;
      }
      .ic .il {
        font-size: 0.64rem;
        color: var(--t3);
      }
      .ic .iv {
        font-weight: 500;
        font-size: 0.82rem;
      }
      .mb {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        z-index: 1000;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 4vh 0;
        overflow-y: auto;
      }
      .mb.on {
        display: flex;
      }
      .md {
        background: var(--bg1);
        border: 1px solid var(--bd);
        border-radius: 12px;
        width: 90%;
        max-width: 440px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 16px 40px var(--sh);
        animation: mi 0.2s ease;
      }
      @keyframes mi {
        from {
          opacity: 0;
          transform: scale(0.96) translateY(6px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }
      .mh {
        padding: 11px 15px;
        border-bottom: 1px solid var(--bd);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        background: var(--bg1);
        z-index: 1;
      }
      .mh h3 {
        font-size: 0.92rem;
        font-weight: 700;
      }
      .mx {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: none;
        background: var(--bg2);
        color: var(--t2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        transition: all 0.2s;
      }
      .mx:hover {
        background: rgba(248, 113, 113, 0.2);
        color: #f87171;
      }
      .mbd {
        padding: 14px;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
      }
      .mf {
        padding: 8px 15px;
        border-top: 1px solid var(--bd);
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        flex-shrink: 0;
        background: var(--bg1);
        position: relative;
        z-index: 1;
      }
      .fg2 {
        margin-bottom: 10px;
      }
      .fg2 label {
        display: block;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--t2);
        margin-bottom: 2px;
      }
      .fg2 input,
      .fg2 textarea,
      .fg2 select {
        width: 100%;
        padding: 7px 10px;
        background: var(--bg2);
        border: 1px solid var(--bd);
        border-radius: 6px;
        color: var(--t1);
        font-size: 0.8rem;
        font-family: inherit;
        outline: 0;
        transition: border-color 0.2s;
      }
      .fg2 input:focus,
      .fg2 textarea:focus {
        border-color: var(--pink);
      }
      .fg2 textarea {
        min-height: 80px;
        resize: vertical;
        white-space: pre-wrap;
      }
      .fg2 select {
        cursor: pointer;
      }
      .uz {
        border: 2px dashed var(--bd);
        border-radius: 10px;
        padding: 22px 10px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
      }
      .uz:hover,
      .uz.ov {
        border-color: var(--pink);
        background: var(--glow);
      }
      .uzi {
        font-size: 1.5rem;
        margin-bottom: 3px;
      }
      .uzt {
        color: var(--t2);
        font-size: 0.78rem;
      }
      .ul {
        margin-top: 6px;
      }
      .ui {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 7px;
        background: var(--bg2);
        border-radius: 6px;
        margin-bottom: 2px;
        font-size: 0.72rem;
      }
      .ui .us {
        color: var(--t3);
        margin-left: auto;
        font-family: monospace;
        font-size: 0.64rem;
      }
      .ui .ur {
        cursor: pointer;
        color: var(--t3);
        background: none;
        border: none;
        font-size: 0.78rem;
      }
      .ui .ur:hover {
        color: #f87171;
      }
      .cp {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
      }
      .sw {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        cursor: pointer;
        border: 3px solid transparent;
        transition: all 0.2s;
      }
      .sw:hover,
      .sw.sl {
        border-color: var(--t1);
        transform: scale(1.1);
      }
      .cprev {
        margin-top: 4px;
      }
      .cprev img {
        max-height: 50px;
        border-radius: 5px;
      }
      .thumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 4px;
      }
      .thumb {
        position: relative;
        display: inline-block;
      }
      .thumb img {
        height: 50px;
        border-radius: 5px;
        vertical-align: middle;
      }
      .thumb .tx {
        position: absolute;
        top: -3px;
        right: -3px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #f87171;
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .sakura {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        overflow: hidden;
      }
      .pt {
        position: absolute;
        opacity: 0;
        animation: pf linear infinite;
      }
      @keyframes pf {
        0% {
          transform: translateY(-5vh) rotate(0);
          opacity: 0;
        }
        10% {
          opacity: 0.35;
        }
        90% {
          opacity: 0.35;
        }
        100% {
          transform: translateY(105vh) rotate(540deg) translateX(40px);
          opacity: 0;
        }
      }
      .stars-b {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
      }
      .stars-b .s {
        position: absolute;
        width: 2px;
        height: 2px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        animation: tw 3s ease-in-out infinite;
      }
      @keyframes tw {
        0%,
        100% {
          opacity: 0;
          transform: scale(0);
        }
        50% {
          opacity: 1;
          transform: scale(1);
        }
      }
      [data-theme="light"] .stars-b {
        display: none;
      }
      [data-theme="light"] .pt {
        opacity: 0.2;
      }
      .ts {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .tt {
        background: var(--bg1);
        border: 1px solid var(--bd);
        border-radius: 8px;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 4px 16px var(--sh);
        animation: ti 0.2s ease;
        font-size: 0.8rem;
        min-width: 160px;
      }
      .tt.ok {
        border-left: 3px solid var(--grn);
      }
      .tt.er {
        border-left: 3px solid #f87171;
      }
      .tt.nf {
        border-left: 3px solid var(--cyan);
      }
      @keyframes ti {
        from {
          transform: translateX(40px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      .empty {
        text-align: center;
        padding: 28px 10px;
        color: var(--t3);
      }
      .empty .ei {
        font-size: 1.8rem;
        margin-bottom: 5px;
        opacity: 0.5;
      }
      .sg {
        opacity: 0;
        animation: fu 0.3s ease forwards;
      }
      @keyframes fu {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      /* ═══ 布局状态系统 ═══ */
      /* 宽屏：导航栏图标+文字都在 */
      body[data-layout="wide"] {
        --side-w: 200px;
        --layout: wide;
      }
      /* 窄屏：导航栏只显示图标 */
      body[data-layout="narrow"] {
        --side-w: 46px;
        --layout: narrow;
      }
      /* 用法示例：
         body[data-layout="wide"] .你的类 { ... }
         body[data-layout="narrow"] .你的类 { ... }
         或用 CSS 变量：var(--side-w) */

      @media (max-width: 780px) {
        .side {
          width: 46px;
        }
        .ln,
        .ls,
        .ni span:not(.ic),
        .nl,
        .tbtn span:not(:first-child),
        .abtn span:not(:first-child) {
          display: none;
        }
        .av {
          width: 26px;
          height: 26px;
          font-size: 1.1rem;
        }
        .logo {
          padding: 8px 4px 6px;
        }
        .ni {
          padding: 8px;
          justify-content: center;
        }
        .ni .ic {
          border: none;
          background: 0;
        }
        .ni.on {
          background: none;
        }
        .ni.on::before {
          height: 26px;
          width: 3px;
          top: 50%;
          left: 3px;
          transform: translateY(-50%);
          border-radius: 12px 0 0 12px;
          pointer-events: none;
          border: none;
        }
        .ni:hover {
          background: 0;
          color: inherit;
        }
        [data-theme="light"] .ni:hover {
          background: 0;
        }
        .ni:hover .ic {
          border: 2px solid var(--pink);
          color: var(--pink);
        }
        [data-theme="light"] .ni:hover .ic {
          border-color: var(--pink);
          color: var(--pink);
        }
        .ni:active .ic,
        .ni.on .ic {
          border: none;
          color: inherit;
        }
        .main {
          margin-left: var(--side-w, 46px);
        }
        .pg {
          padding: 12px;
        }
        .fg {
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        }
        .xg {
          grid-template-columns: 1fr;
        }
        .gbox-wrap {
          grid-template-columns: 1fr;
        }
      }
      .ft-ico {
        width: 26px;
        height: 26px;
        vertical-align: middle;
      }
      .ff .ft .ft-ico,
      .fig .ft .ft-ico {
        width: 36px;
        height: 36px;
      }

      /* ═══ 音乐模块 ═══ */
      .music-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
      .track-card{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
      .track-card:hover{border-color:var(--bd2);transform:translateY(-2px);box-shadow:0 4px 12px var(--sh)}
      .track-card.playing{border-color:var(--fe-fill,#A388E2);background:linear-gradient(135deg,rgba(163,136,226,.06),rgba(184,164,232,.04))}
      .track-art{width:48px;height:48px;border-radius:10px;background:var(--fe-cover-bg,#f0edf6);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;position:relative;overflow:hidden}
      .track-art img{width:100%;height:100%;object-fit:cover;border-radius:10px}
      .track-info{flex:1;min-width:0}
      .track-title{font-weight:600;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .track-meta{font-size:.68rem;color:var(--t3);margin-top:2px}
      .track-combined{display:none}
      .track-artist{font-size:.68rem;color:var(--fe-sub-c,var(--t3));margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .track-actions{display:flex;gap:4px;flex-shrink:0}
      .track-actions .btn{padding:4px 6px;font-size:.68rem}
      .track-eq{position:absolute;bottom:4px;right:4px;display:none;gap:1px;align-items:flex-end;height:14px}
      .track-card.playing .track-eq{display:flex}
      .eq-bar{width:2px;background:var(--fe-fill,#A388E2);border-radius:1px;animation:eqBounce .8s ease-in-out infinite}
      .eq-bar:nth-child(1){height:60%;animation-delay:0s}
      .eq-bar:nth-child(2){height:100%;animation-delay:.2s}
      .eq-bar:nth-child(3){height:40%;animation-delay:.4s}
      @keyframes eqBounce{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

      /* ── 播放器：通用 ── */
      .pl-ctrl-btn{
        display:inline-flex;align-items:center;justify-content:center;
        border:none;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0;
        background:0;color:var(--t2);
      }
      .pl-ctrl-btn:hover{color:var(--fe-fill,#A388E2)}
      .pl-ctrl-btn.active{color:var(--fe-fill,#A388E2)}
      .pl-ctrl-btn.main-btn{
        background:linear-gradient(135deg,var(--fe-fill,#A388E2),#B8A4E8);color:#fff;border-radius:50%;
      }
      .pl-ctrl-btn.main-btn:hover{box-shadow:0 2px 10px rgba(163,136,226,.3);transform:scale(1.06)}

      /* ── 宽屏：三态播放器（参考 Mizuki） ── */
      body[data-layout="wide"] .player-fab{
        position:fixed;bottom:16px;right:16px;z-index:500;
        display:none;flex-direction:column;align-items:flex-end;
      }
      body[data-layout="wide"] .player-fab.on{display:flex}

      /* 状态1：小球 */
      body[data-layout="wide"] .fab-orb{
        width:48px;height:48px;border-radius:16px;
        background:var(--bg1);border:1px solid var(--bd);
        box-shadow:0 4px 16px var(--sh);
        display:none;align-items:center;justify-content:center;
        cursor:pointer;transition:all .2s;color:var(--fe-fill,#A388E2);
        position:relative;
      }
      body[data-layout="wide"] .fab-orb:hover{box-shadow:0 6px 24px var(--sh);transform:scale(1.05)}
      body[data-layout="wide"] .fab-orb .fab-dot{
        position:absolute;bottom:8px;right:8px;width:6px;height:6px;
        border-radius:50%;background:var(--fe-fill,#A388E2);box-shadow:0 0 0 2px var(--bg1);display:none;
      }
      body[data-layout="wide"] .fab-orb.playing .fab-dot{display:block;animation:fabPulse 1.8s ease-out infinite}
      @keyframes fabPulse{0%{opacity:0;transform:scale(.8)}30%{opacity:.8}100%{opacity:0;transform:scale(1.4)}}

      /* 状态2：小长条 */
      body[data-layout="wide"] .fab-mini{
        width:280px;border-radius:16px;
        background:#fff;border:1px solid rgba(0,0,0,.08);
        box-shadow:0 4px 16px var(--sh);
        display:none;align-items:center;gap:10px;padding:10px 12px;
        backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
        animation:fabSlideIn .3s ease;
      }
      [data-theme="dark"] body[data-layout="wide"] .fab-mini{
        background:var(--bg1);border-color:var(--bd);
      }
      @keyframes fabSlideIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
      .fm-cover{
        width:40px;height:40px;border-radius:50%;
        background:var(--fe-cover-bg,#f0edf6);
        display:flex;align-items:center;justify-content:center;
        font-size:1.1rem;flex-shrink:0;overflow:hidden;cursor:pointer;
      }
      .fm-cover img{
        width:100%;height:100%;object-fit:cover;border-radius:50%;
        animation:fabSpin 8s linear infinite;animation-play-state:paused;
      }
      .fm-cover.spinning img{animation-play-state:running}
      .fm-info{flex:1;min-width:0;cursor:pointer;text-align:center}
      .fm-title{font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fe-title-c,var(--t1))}
      .fm-artist{font-size:.58rem;color:var(--fe-sub-c,var(--t3));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
      .fm-btns{display:flex;gap:4px;flex-shrink:0}
      .fm-btn{
        width:28px;height:28px;border-radius:8px;border:1px solid rgba(0,0,0,.08);
        background:0;color:var(--fe-ctrl,#333);cursor:pointer;display:flex;
        align-items:center;justify-content:center;transition:all .15s;padding:0;
      }
      [data-theme="dark"] .fm-btn{border-color:rgba(255,255,255,.08);color:#ccc}
      .fm-btn:hover{border-color:var(--fe-fill,#A388E2);color:var(--fe-fill,#A388E2)}

      /* 状态3：大显示 */
      body[data-layout="wide"] .fab-expanded{
        width:320px;border-radius:16px;
        background:#fff;border:1px solid rgba(0,0,0,.08);
        box-shadow:0 8px 32px var(--sh);
        display:none;flex-direction:column;padding:14px;gap:10px;
        backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
        animation:fabSlideIn .3s ease;
      }
      [data-theme="dark"] body[data-layout="wide"] .fab-expanded{
        background:var(--bg1);border-color:var(--bd);
      }
      /* 播放器主题变量：挂在 player-fab 上，三个组件共用 */
      .player-fab{
        display:none;
        --fe-fill:#A388E2;
        --fe-track:#E8E6F0;
        --fe-mode-on:#222;
        --fe-mode-off:#aaa;
        --fe-ctrl:#333;
        --fe-play-bg:#f3f0fa;
        --fe-play-icon:#7B6AC4;
        --fe-title-c:#222;
        --fe-sub-c:#888;
        --fe-time-c:#aaa;
        --fe-cover-bg:#f0edf6;
        --fe-vol-icon:#999;
      }
      .player-bar{display:none}
      [data-theme="dark"] .player-fab{
        --fe-fill:#A388E2;
        --fe-track:rgba(255,255,255,.1);
        --fe-mode-on:#eee;
        --fe-mode-off:#555;
        --fe-ctrl:#ccc;
        --fe-play-bg:rgba(163,136,226,.15);
        --fe-play-icon:#A388E2;
        --fe-title-c:#eee;
        --fe-sub-c:#888;
        --fe-time-c:#555;
        --fe-cover-bg:#252230;
        --fe-vol-icon:#777;
      }
      /* 顶部：封面 + 曲名 + 右上角按钮 */
      .fe-top{display:flex;gap:12px;align-items:center}
      .fe-cover{
        width:64px;height:64px;border-radius:50%;
        background:var(--fe-cover-bg,#f0edf6);
        display:flex;align-items:center;justify-content:center;
        font-size:1.3rem;flex-shrink:0;overflow:hidden;
      }
      .fe-cover img{
        width:100%;height:100%;object-fit:cover;border-radius:50%;
        animation:fabSpin 8s linear infinite;animation-play-state:paused;
      }
      .fe-cover.spinning img{animation-play-state:running}
      @keyframes fabSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
      .fe-right{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
      .fe-top-row{display:flex;align-items:flex-start;justify-content:space-between}
      .fe-titles{flex:1;min-width:0;text-align:center}
      .fe-title{font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fe-title-c,var(--t1))}
      .fe-artist{font-size:.68rem;color:var(--fe-sub-c,var(--t3));margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .fe-time{font-size:.6rem;color:var(--fe-time-c,var(--t3));margin-top:4px;font-variant-numeric:tabular-nums}
      .fe-top-btns{display:flex;gap:6px;flex-shrink:0;margin-left:8px;padding-top:2px}
      .fe-top-btn{
        width:36px;height:36px;border-radius:10px;border:none;
        background:0;color:var(--fe-ctrl,#333);cursor:pointer;display:flex;
        align-items:center;justify-content:center;transition:all .15s;padding:0;
      }
      .fe-top-btn:hover{color:var(--fe-fill)}
      .fe-top-btn.active{color:var(--fe-fill)}
      /* 进度条 */
      .fe-seek{display:flex;align-items:center;padding:0 6px}
      .fe-seek .fe-bar{flex:1;height:5px;background:var(--fe-track,var(--bg3));border-radius:999px;cursor:pointer;position:relative;overflow:hidden}
      .fe-seek .fe-bar:hover{height:7px}
      .fe-seek .fe-bar-fill{height:100%;background:var(--fe-fill,#A388E2);border-radius:999px;width:0%;transition:width .1s}
      /* 控制行 */
      .fe-ctrls{display:flex;align-items:center;justify-content:center;gap:14px;padding:0 16px}
      .fe-ctrls .pl-ctrl-btn{width:30px;height:30px;border-radius:50%;color:var(--fe-ctrl,#333)}
      .fe-ctrls .pl-ctrl-btn:hover{color:var(--fe-fill)}
      .fe-ctrls .pl-ctrl-btn.main-btn{
        width:44px;height:44px;
        background:var(--fe-play-bg,#f3f0fa);color:var(--fe-play-icon,#7B6AC4);
      }
      .fe-ctrls .pl-ctrl-btn.main-btn:hover{filter:brightness(.92)}
      .fe-ctrls .pl-ctrl-btn.sm{width:26px;height:26px}
      /* 模式按钮：选中=黑色/白色，未选中=灰色，不变色 */
      .fe-ctrls .pl-ctrl-btn.mode-btn{color:var(--fe-mode-off,#aaa)}
      .fe-ctrls .pl-ctrl-btn.mode-btn.on{color:var(--fe-mode-on,#222)}
      /* 底部：音量 + 列表 */
      .fe-bottom{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 4px}
      .fe-vol{display:flex;align-items:center;gap:8px}
      .fe-vol svg{color:var(--fe-vol-icon,#999);flex-shrink:0;width:18px;height:18px}
      .fe-vol input[type=range]{
        width:190px;height:5px;-webkit-appearance:none;appearance:none;
        border-radius:999px;outline:0;cursor:pointer;
        background:linear-gradient(to right,var(--fe-fill,#A388E2) 0%,var(--fe-fill,#A388E2) 80%,var(--fe-track,#E8E6F0) 80%,var(--fe-track,#E8E6F0) 100%);
      }
      .fe-vol input[type=range]::-webkit-slider-thumb{
        -webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--fe-fill,#A388E2);cursor:pointer;box-shadow:0 0 4px rgba(0,0,0,.15);
      }
      .fe-vol input[type=range]::-moz-range-thumb{
        width:14px;height:14px;border-radius:50%;background:var(--fe-fill,#A388E2);cursor:pointer;border:none;box-shadow:0 0 4px rgba(0,0,0,.15);
      }
      .fe-vol input[type=range]::-moz-range-track{
        height:5px;border-radius:999px;background:var(--fe-track,#E8E6F0);
      }
      .fe-vol input[type=range]::-moz-range-progress{
        height:5px;border-radius:999px;background:var(--fe-fill,#A388E2);
      }
      .fe-list-btn{
        width:36px;height:36px;border-radius:10px;border:none;
        background:0;color:var(--fe-vol-icon,#999);cursor:pointer;display:flex;
        align-items:center;justify-content:center;transition:all .15s;padding:0;flex-shrink:0;
      }
      .fe-list-btn:hover{color:var(--fe-fill)}
      .fe-list-btn.active{color:var(--fe-fill)}

      /* 三态互斥显示 */
      body[data-layout="wide"] .player-fab.state-orb .fab-orb{display:flex}
      body[data-layout="wide"] .player-fab.state-orb .fab-mini{display:none}
      body[data-layout="wide"] .player-fab.state-orb .fab-expanded{display:none}
      body[data-layout="wide"] .player-fab.state-mini .fab-orb{display:none}
      body[data-layout="wide"] .player-fab.state-mini .fab-mini{display:flex}
      body[data-layout="wide"] .player-fab.state-mini .fab-expanded{display:none}
      body[data-layout="wide"] .player-fab.state-expanded .fab-orb{display:none}
      body[data-layout="wide"] .player-fab.state-expanded .fab-mini{display:none}
      body[data-layout="wide"] .player-fab.state-expanded .fab-expanded{display:flex}

      /* ── 窄屏：底部横条 ── */
      body[data-layout="narrow"] .player-bar{
        position:fixed;bottom:0;left:46px;right:0;
        background:var(--bg1);border-top:1px solid var(--bd);
        z-index:500;display:none;flex-direction:column;
        backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
      }
      body[data-layout="narrow"] .player-bar.on{display:flex}
      body[data-layout="narrow"] .pb-seek{display:flex;align-items:center;gap:6px;padding:2px 10px 0;height:18px}
      body[data-layout="narrow"] .pb-seek .pb-time{font-size:.56rem;color:var(--t3);min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
      body[data-layout="narrow"] .pb-seek .pb-bar{flex:1;height:3px;background:var(--bg3);border-radius:2px;cursor:pointer;position:relative;overflow:hidden}
      body[data-layout="narrow"] .pb-seek .pb-bar-fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--lav));border-radius:2px;width:0%;transition:width .1s}
      body[data-layout="narrow"] .pb-main{display:flex;align-items:center;gap:6px;padding:4px 10px 6px}
      body[data-layout="narrow"] .pb-left{flex:1;min-width:0}
      body[data-layout="narrow"] .pb-title{font-size:.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
      body[data-layout="narrow"] .pb-artist{font-size:.58rem;color:var(--t3);display:none}
      body[data-layout="narrow"] .pb-center{display:flex;align-items:center;gap:4px;flex-shrink:0}
      body[data-layout="narrow"] .pb-center .pl-ctrl-btn{width:28px;height:28px}
      body[data-layout="narrow"] .pb-center .pl-ctrl-btn.main-btn{width:34px;height:34px}
      body[data-layout="narrow"] .pb-center .pl-ctrl-btn.sm{width:22px;height:22px}
      body[data-layout="narrow"] .pb-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
      body[data-layout="narrow"] .pb-right .pb-list-btn{
        width:28px;height:28px;border-radius:6px;border:1px solid var(--bd);
        background:0;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;
        transition:all .15s;padding:0;
      }
      body[data-layout="narrow"] .pb-right .pb-list-btn.active{border-color:var(--pink);color:var(--pink);background:rgba(255,126,179,.06)}

      /* ── 播放列表弹窗 ── */
      .pl-panel{
        position:fixed;width:300px;max-height:360px;
        background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;
        box-shadow:0 8px 32px var(--sh);z-index:501;
        display:none;flex-direction:column;overflow:hidden;
      }
      [data-theme="dark"] .pl-panel{
        background:var(--bg1);border-color:var(--bd);
      }
      .pl-panel.on{display:flex}
      body[data-layout="wide"] .pl-panel{bottom:16px;right:348px}
      body[data-layout="narrow"] .pl-panel{bottom:56px;right:8px;width:calc(100vw - 62px)}
      .pl-panel .pl-hd{
        padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.08);
        display:flex;justify-content:space-between;align-items:center;
        font-size:.82rem;font-weight:600;color:var(--fe-title-c,var(--t1));
      }
      [data-theme="dark"] .pl-panel .pl-hd{border-color:rgba(255,255,255,.08)}
      .pl-panel .pl-body{overflow-y:auto;flex:1}
      .pl-panel .pl-item{
        padding:7px 10px;display:flex;align-items:center;gap:8px;
        cursor:pointer;transition:background .15s;font-size:.76rem;
        color:var(--fe-sub-c,var(--t2));
      }
      .pl-panel .pl-item:hover{background:rgba(0,0,0,.03)}
      [data-theme="dark"] .pl-panel .pl-item:hover{background:rgba(255,255,255,.04)}
      .pl-panel .pl-item.on{color:var(--fe-fill,#A388E2);background:rgba(163,136,226,.08)}
      .pl-panel .pl-item .pl-num{width:18px;text-align:center;color:var(--fe-time-c,var(--t3));font-size:.64rem;flex-shrink:0}
      .pl-panel .pl-item.on .pl-num{color:var(--fe-fill,#A388E2)}
      .pl-panel .pl-item .pl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .pl-panel .pl-item .pl-del{
        width:20px;height:20px;border-radius:4px;border:none;
        background:0;color:var(--fe-time-c,var(--t3));cursor:pointer;display:none;
        align-items:center;justify-content:center;font-size:.6rem;
        transition:all .15s;flex-shrink:0;padding:0;
      }
      .pl-panel .pl-item:hover .pl-del{display:flex}
      .pl-panel .pl-item .pl-del:hover{background:rgba(248,113,113,.15);color:#f87171}
      /* 窄屏：删除按钮常显（触屏设备无 hover） */
      body[data-layout="narrow"] .pl-panel .pl-item .pl-del{display:flex}

      /* 嵌入式播放卡片 */
      .embed-player{background:var(--bg2);border:1px solid var(--bd);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;margin:8px 0;cursor:pointer;transition:all .2s}
      .embed-player:hover{border-color:var(--bd2)}
      .embed-player .ep-btn{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--lav));border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;transition:all .2s}
      .embed-player .ep-btn:hover{box-shadow:0 2px 8px var(--glow);transform:scale(1.05)}
      .embed-player .ep-info{flex:1;min-width:0}
      .embed-player .ep-title{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .embed-player .ep-meta{font-size:.64rem;color:var(--t3)}
      .embed-player .ep-bar{flex:1.5;height:3px;background:var(--bg3);border-radius:2px;overflow:hidden}
      .embed-player .ep-bar-fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--lav));border-radius:2px;width:0%;transition:width .1s}

      /* ═══ 音乐选择器 ═══ */
      .mpick-search{position:relative;margin-bottom:10px}
      .mpick-search input{
        width:100%;padding:8px 10px 8px 32px;background:var(--bg2);border:1px solid var(--bd);
        border-radius:8px;color:var(--t1);font-size:.82rem;font-family:inherit;outline:0;
      }
      .mpick-search input:focus{border-color:var(--pink)}
      .mpick-search .mpick-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.78rem}
      .mpick-list{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
      .mpick-item{
        display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
        cursor:pointer;transition:all .15s;border:1px solid transparent;
      }
      .mpick-item:hover{background:rgba(255,126,179,.06);border-color:var(--bd)}
      .mpick-item .mpick-cover{
        width:40px;height:40px;border-radius:8px;background:var(--bg3);
        display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;overflow:hidden;
      }
      .mpick-item .mpick-cover img{width:100%;height:100%;object-fit:cover;border-radius:8px}
      .mpick-item .mpick-info{flex:1;min-width:0}
      .mpick-item .mpick-title{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .mpick-item .mpick-artist{font-size:.68rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .mpick-empty{text-align:center;padding:24px;color:var(--t3);font-size:.78rem}

      /* ═══ 上传进度条 ═══ */
      .upload-progress{
        margin-top:8px;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;padding:10px 14px;display:none;
      }
      .upload-progress.on{display:block}
      .upload-progress .up-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.76rem;color:var(--t2)}
      .upload-progress .up-bar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;position:relative}
      .upload-progress .up-fill{height:100%;background:linear-gradient(90deg,var(--pink),var(--lav));border-radius:3px;width:0%;transition:width .15s}
      .upload-progress .up-status{display:flex;justify-content:space-between;margin-top:4px;font-size:.66rem;color:var(--t3)}
      .upload-progress .up-speed{color:var(--cyan)}
      .upload-progress .up-cancel{
        background:0;border:1px solid rgba(248,113,113,.3);color:#f87171;font-size:.66rem;
        padding:2px 8px;border-radius:4px;cursor:pointer;margin-left:8px;
      }
      .upload-progress .up-cancel:hover{background:rgba(248,113,113,.1)}

      /* 音乐管理页 header */
      .music-header{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
      .music-header h2{font-size:1.3rem;font-weight:900}
      .music-header .music-stats{color:var(--t3);font-size:.78rem;margin-left:8px}
      .music-empty{text-align:center;padding:40px 10px;color:var(--t3)}
      .music-empty .mei{font-size:2rem;margin-bottom:8px;opacity:.5}
      .music-upload-zone{border:2px dashed var(--bd);border-radius:12px;padding:28px 10px;text-align:center;cursor:pointer;transition:all .3s;margin-bottom:16px}
      .music-upload-zone:hover,.music-upload-zone.ov{border-color:var(--pink);background:var(--glow)}
      .music-upload-zone .muz-icon{font-size:2rem;margin-bottom:4px}
      .music-upload-zone .muz-text{color:var(--t2);font-size:.8rem}
      .music-upload-zone .muz-hint{color:var(--t3);font-size:.68rem;margin-top:2px}
      .music-queue{margin-top:8px}
      .music-queue .mq-item{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg2);border-radius:8px;margin-bottom:4px;font-size:.76rem}
      .music-queue .mq-item .mq-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .music-queue .mq-item .mq-size{color:var(--t3);font-size:.64rem}
      .music-queue .mq-item .mq-rm{cursor:pointer;color:var(--t3);background:0;border:0;font-size:.78rem}
      .music-queue .mq-item .mq-rm:hover{color:#f87171}

      @media(max-width:780px){
        .music-grid{grid-template-columns:1fr}
        .track-artist,.track-meta{display:none!important}
        .track-combined{display:block;font-size:.68rem;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      }

      /* 播放器显示时给底部留空间 */
      .main{padding-bottom:0}
      body[data-layout="narrow"] .main.has-player{padding-bottom:70px}
      body[data-layout="wide"] .main{padding-bottom:0!important}
      .ic-i{width:1.15em;height:1.15em;vertical-align:-0.15em;display:inline-block}
      .ic .ic-i{width:18px;height:18px}
      .av .ic-i{width:26px;height:26px}
      .tbtn .ic-i,.abtn .ic-i{width:15px;height:15px}
      .hd h2 .ic-i{width:22px;height:22px;vertical-align:-0.2em}
      .st .si .ic-i{width:20px;height:20px}
      .btn .ic-i{width:15px;height:15px}
      .uzi .ic-i{width:32px;height:32px}
      .sb .ic2 .ic-i{width:15px;height:15px}
      .mh h3 .ic-i{width:18px;height:18px;vertical-align:-0.2em}
      .empty .ei .ic-i{width:32px;height:32px;opacity:0.5}
      .pav .ic-i{width:46px;height:46px}
      .about-inner .pav .ic-i{width:56px;height:56px}
      .ic .ii .ic-i{width:18px;height:18px}
      .pf-btn .ic-i{width:14px;height:14px}
      .tt .ic-i{width:16px;height:16px}
      .gbox-hd .ic-i{width:16px;height:16px}
      [data-theme="light"] .ic-i{filter:brightness(0.2)}

      /* 网站 Footer */
      .site-footer{margin-top:auto;padding:24px 0 20px;border-top:1px solid var(--bd);text-align:center}
      .sf-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
      .sf-copy{font-size:.75rem;color:var(--t3)}
      .sf-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
      .sf-links a{font-size:.72rem;color:var(--t2);text-decoration:none;transition:color .2s}
      .sf-links a:hover{color:var(--lav)}
      .sf-sep{color:var(--t3);font-size:.65rem}
      .sf-note{font-size:.68rem;color:var(--t3);margin-top:2px}
      body[data-layout="narrow"] .site-footer{padding:18px 12px 14px}
      body[data-layout="narrow"] .sf-links{gap:4px}

      /* 备案审核期间隐藏管理状态 */
      .ab{display:none}