/* ========================================
   Longの云盘 - copyparty custom theme
   ======================================== */

:root {
    --font-main:
        "Microsoft YaHei",
        "PingFang SC",
        "Noto Sans SC",
        "Segoe UI",
        sans-serif;

    --font-serif:
        "Noto Serif SC",
        "Songti SC",
        serif;

    --font-mono:
        "Cascadia Code",
        "JetBrains Mono",
        Consolas,
        monospace;

    --long-blue: #6ea8ff;
    --long-blue-2: #86c5ff;
    --long-purple: #9d8cff;
    --long-pink: #ff91c8;

    --glass-dark: rgba(22, 28, 48, 0.68);
    --glass-dark-strong: rgba(17, 22, 40, 0.86);
    --glass-border: rgba(255, 255, 255, 0.10);
}


/* ==============================
   深色模式
   ============================== */

html:not(.y) {
    --fg: #e8edf8;
    --fg-max: #ffffff;
    --fg2-max: #ffffff;
    --fg-weak: #aebbd1;

    --bg: rgba(18, 24, 42, 0.72);
    --bgg: #0d1324;

    --bg-u1: rgba(29, 37, 61, 0.78);
    --bg-u2: rgba(34, 43, 70, 0.82);
    --bg-u3: rgba(40, 49, 78, 0.82);
    --bg-u4: rgba(47, 58, 91, 0.88);
    --bg-u5: rgba(73, 87, 127, 0.75);
    --bg-u6: rgba(91, 106, 149, 0.75);

    --bg-d1: rgba(15, 21, 38, 0.90);
    --bg-d2: rgba(10, 15, 29, 0.94);
    --bg-d3: rgba(7, 11, 23, 0.96);
    --bg-max: #080c17;

    --row-alt: rgba(255, 255, 255, 0.025);

    --a: #79b9ff;
    --a-b: #9e90ff;
    --a-hil: #b5d9ff;
    --a-dark: #628eff;

    --tab-alt: #ff92c9;

    --btn-fg: #dceaff;
    --btn-bg: rgba(110, 168, 255, 0.10);
    --btn-h-fg: #ffffff;
    --btn-h-bg: rgba(110, 168, 255, 0.20);

    --btn-1-fg: #ffffff;
    --btn-1-bg: #718cff;
    --btn-1h-bg: #8ca5ff;

    --txt-bg: rgba(255, 255, 255, 0.07);

    --tree-bg: rgba(15, 21, 38, 0.80);

    --scroll: #799eff;

    --f-h-b1: rgba(255, 255, 255, 0.10);
}


/* ==============================
   浅色模式
   ============================== */

html.y {
    --fg: #32394a;
    --fg-max: #182033;
    --fg-weak: #707a91;

    --bg: rgba(255, 255, 255, 0.70);
    --bgg: #eef4ff;

    --bg-u1: rgba(255, 255, 255, 0.78);
    --bg-u2: rgba(250, 252, 255, 0.90);
    --bg-u3: rgba(244, 248, 255, 0.90);
    --bg-u4: rgba(238, 244, 255, 0.94);
    --bg-u5: rgba(202, 216, 240, 0.80);
    --bg-u6: rgba(186, 203, 232, 0.80);

    --bg-d1: rgba(245, 249, 255, 0.96);
    --bg-d2: rgba(235, 242, 253, 0.98);
    --bg-d3: rgba(225, 235, 250, 0.98);
    --bg-max: #ffffff;

    --row-alt: rgba(92, 133, 200, 0.035);

    --a: #397fe4;
    --a-b: #7768dc;
    --a-hil: #185fbf;
    --a-dark: #286dd1;

    --tab-alt: #dc579e;

    --btn-fg: #3a557d;
    --btn-bg: rgba(72, 126, 205, 0.09);
    --btn-h-fg: #173763;
    --btn-h-bg: rgba(87, 143, 228, 0.17);

    --btn-1-fg: #ffffff;
    --btn-1-bg: #5489e8;
    --btn-1h-bg: #709ff0;

    --txt-bg: rgba(255, 255, 255, 0.78);

    --tree-bg: rgba(255, 255, 255, 0.72);

    --scroll: #7098dd;
}


/* ==============================
   页面背景
   ============================== */

html,
body {
    min-height: 100%;
}

html:not(.y) {
    background:
        radial-gradient(
            circle at 10% 4%,
            rgba(66, 142, 255, 0.20),
            transparent 34rem
        ),
        radial-gradient(
            circle at 91% 7%,
            rgba(255, 108, 181, 0.13),
            transparent 30rem
        ),
        radial-gradient(
            circle at 55% 100%,
            rgba(118, 87, 255, 0.10),
            transparent 40rem
        ),
        linear-gradient(
            135deg,
            #0c1222 0%,
            #111a30 55%,
            #181326 100%
        ) fixed !important;
}

html.y {
    background:
        radial-gradient(
            circle at 8% 2%,
            rgba(89, 157, 255, 0.18),
            transparent 34rem
        ),
        radial-gradient(
            circle at 92% 7%,
            rgba(255, 132, 194, 0.14),
            transparent 30rem
        ),
        linear-gradient(
            135deg,
            #eef5ff,
            #f7f5ff 55%,
            #fff4fa
        ) fixed !important;
}

body {
    background: transparent !important;
    letter-spacing: 0.01em;
}


/* ==============================
   主体区域
   ============================== */

#wrap {
    margin: 1.35em 1.5em 0;
}


/* ========================================
   Longの云盘 - Argon 风格悬浮导航栏
   ======================================== */

#ops {
    position: sticky;
    top: 12px;
    z-index: 100;

    box-sizing: border-box;
    width: calc(100% - 32px);
    margin: 12px 16px 18px;
    padding: 8px 12px;

    min-height: 58px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            rgba(25, 37, 64, 0.72),
            rgba(32, 28, 57, 0.66)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;

    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* 顶部工具按钮 */

#ops a {
    box-sizing: border-box;

    margin: 0 3px !important;
    padding: 8px 10px !important;

    min-width: 42px;
    min-height: 42px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    color: #c9d8ef !important;

    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 11px !important;

    box-shadow: none !important;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


/* 鼠标悬浮 */

#ops a:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(92, 157, 255, 0.18),
            rgba(177, 112, 255, 0.12)
        ) !important;

    border-color: rgba(128, 171, 255, 0.18) !important;

    box-shadow:
        0 5px 16px rgba(44, 86, 165, 0.12) !important;

    transform: translateY(-1px);
}


/* 当前选中的功能 */

#ops a.act {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(83, 151, 255, 0.30),
            rgba(172, 104, 255, 0.22)
        ) !important;

    border-color: rgba(137, 177, 255, 0.22) !important;

    box-shadow:
        0 5px 18px rgba(59, 104, 201, 0.16) !important;
}


/* 浅色模式 */

html.y #ops {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.72),
            rgba(248, 248, 255, 0.66)
        ) !important;

    border-color: rgba(67, 105, 165, 0.11);

    box-shadow:
        0 8px 28px rgba(62, 92, 138, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

html.y #ops a {
    color: #526682 !important;
}

html.y #ops a:hover {
    color: #255da5 !important;

    background:
        linear-gradient(
            135deg,
            rgba(78, 143, 232, 0.11),
            rgba(175, 111, 220, 0.08)
        ) !important;
}


/* 手机端 */

@media (max-width: 700px) {
    #ops {
        top: 6px;

        width: calc(100% - 12px);
        margin: 6px 6px 12px;

        padding: 6px 7px;

        min-height: 52px;

        border-radius: 13px;

        overflow-x: auto;
        overflow-y: hidden;
    }

    #ops a {
        min-width: 39px;
        min-height: 39px;

        padding: 6px 8px !important;
        margin: 0 2px !important;

        flex-shrink: 0;
    }
}


/* ==============================
   路径栏
   ============================== */

#path {
    padding: 0.55em 0.75em;
    margin-top: 1em;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.035);
}

html.y #path {
    background: rgba(255, 255, 255, 0.48);
}


/* ==============================
   文件列表
   ============================== */

#files {
    border-collapse: separate;
    border-spacing: 0 5px;
}

#files thead th {
    background: rgba(19, 27, 46, 0.66);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html.y #files thead th {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(67, 105, 164, 0.10);
}

#files td,
#files tr:nth-child(2n) td {
    background: rgba(26, 34, 55, 0.56);

    transition:
        background 0.16s ease,
        transform 0.16s ease;
}

html.y #files td,
html.y #files tr:nth-child(2n) td {
    background: rgba(255, 255, 255, 0.62);
}

#files tbody tr:hover td,
#files tbody tr:hover td + td {
    background: rgba(77, 125, 201, 0.20);
}

html.y #files tbody tr:hover td,
html.y #files tbody tr:hover td + td {
    background: rgba(106, 157, 232, 0.15);
}

#files td:first-child {
    border-radius: 10px 0 0 10px;
}

#files td:last-child {
    border-radius: 0 10px 10px 0;
}


/* ==============================
   左侧目录树
   ============================== */

#tree {
    background: rgba(15, 22, 38, 0.75);

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);

    border-right: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        8px 0 28px rgba(0, 0, 0, 0.15);
}

html.y #tree {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(54, 91, 147, 0.10);
}

#treeh,
#treepar {
    background: rgba(20, 28, 48, 0.88);
}

html.y #treeh,
html.y #treepar {
    background: rgba(248, 251, 255, 0.92);
}


/* ==============================
   面板、输入框
   ============================== */

.opbox,
#doc {
    background: rgba(22, 30, 50, 0.58);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}

html.y .opbox,
html.y #doc {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(70, 105, 160, 0.10);
}

.opview input[type="text"],
.opview input[type="password"],
.opview select,
textarea {
    border-radius: 8px !important;
    border: 1px solid rgba(120, 158, 218, 0.22) !important;

    box-shadow: none !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.opview input:focus,
.opview select:focus,
textarea:focus {
    border-color: rgba(110, 168, 255, 0.75) !important;

    box-shadow:
        0 0 0 3px rgba(91, 144, 230, 0.12) !important;

    outline: none;
}


/* ==============================
   常规按钮
   ============================== */

.btn {
    border-radius: 9px;

    transition:
        background 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}


/* ==============================
   链接
   ============================== */

a,
#blogout {
    transition:
        color 0.15s ease,
        background 0.15s ease;
}


/* ==============================
   滚动条
   ============================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(111, 151, 220, 0.42);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(111, 151, 220, 0.68);
}


/* ==============================
   手机端
   ============================== */

@media (max-width: 700px) {

    #ops {
        margin: 0.5em;
        border-radius: 12px;
    }

    #wrap {
        margin-left: 0.7em;
        margin-right: 0.7em;
    }

    #files {
        border-spacing: 0 3px;
    }
}

/* ========================================
   顶部右侧账户 / 状态信息
   ======================================== */

/* 顶部信息区域整体 */
#srv_info,
#srv_info2,
#acc_info {
    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        "Noto Sans SC",
        sans-serif !important;

    font-size: 14px !important;
    line-height: 1.5 !important;

    color: rgba(205, 221, 245, 0.78) !important;
}


/* 顶部链接 */
#srv_info a,
#srv_info2 a,
#acc_info a,
#blogout {
    color: #91c7ff !important;
    text-decoration: none !important;

    padding: 4px 7px;
    border-radius: 7px;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}

#srv_info a:hover,
#srv_info2 a:hover,
#acc_info a:hover,
#blogout:hover {
    color: #ffffff !important;
    background: rgba(102, 166, 255, 0.12) !important;
}


/* “登出 long”更像一个账户按钮 */
#blogout {
    margin-left: 4px;

    background: rgba(104, 163, 255, 0.08);
    border: 1px solid rgba(117, 174, 255, 0.10);
}


/* 浅色模式 */
html.y #srv_info,
html.y #srv_info2,
html.y #acc_info {
    color: rgba(62, 80, 110, 0.76) !important;
}

html.y #srv_info a,
html.y #srv_info2 a,
html.y #acc_info a,
html.y #blogout {
    color: #397bd1 !important;
}

/* ========================================
   文件列表表头中文化
   不修改 Copyparty 原始 DOM 数据
   ======================================== */

/* 隐藏原始文字 */
#files th[name="lead"] > span,
#files th[name="href"] > span,
#files th[name="sz"] > span,
#files th[name="tags/Up_by"] > span,
#files th[name="tags/.up_at"] > span,
#files th[name="ext"] > span,
#files th[name="ts"] > span {
    font-size: 0 !important;
}


/* 操作 */
#files th[name="lead"] > span::after {
    content: "操作";
    font-size: 16px;
}


/* 文件名称 */
#files th[name="href"] > span::after {
    content: "文件名称";
    font-size: 16px;
}


/* 大小 */
#files th[name="sz"] > span::after {
    content: "大小";
    font-size: 16px;
}


/* 上传者 */
#files th[name="tags/Up_by"] > span::after {
    content: "上传者";
    font-size: 16px;
}


/* 上传时间 */
#files th[name="tags/.up_at"] > span::after {
    content: "上传时间";
    font-size: 16px;
}


/* 类型 */
#files th[name="ext"] > span::after {
    content: "类型";
    font-size: 16px;
}


/* 修改时间 */
#files th[name="ts"] > span::after {
    content: "修改时间";
    font-size: 16px;
}

/* ========================================
   顶部右侧：服务器状态 / 账户信息
   ======================================== */

/* 整个右上角信息区 */
#acc_info {
    top: 13px !important;
    right: 16px !important;

    display: flex !important;
    align-items: center;
    gap: 8px;

    padding: 7px 9px 7px 13px !important;

    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        "Noto Sans SC",
        sans-serif !important;

    font-size: 13px !important;
    line-height: 1.4 !important;

    color: rgba(205, 220, 242, 0.82) !important;

    background:
        linear-gradient(
            135deg,
            rgba(23, 34, 58, 0.62),
            rgba(42, 31, 59, 0.58)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    -webkit-backdrop-filter: blur(16px) saturate(145%);
    backdrop-filter: blur(16px) saturate(145%);

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* 隐藏 Read-Write-Move-Delete-Admin 权限 */
#acc_info > span:not(#srv_info2) {
    display: none !important;
}


/* 服务器名称 + 磁盘容量 */
#srv_info2 {
    display: inline-flex !important;
    align-items: center;

    color: rgba(193, 213, 240, 0.78) !important;
}

#srv_info2 > span {
    color: inherit !important;
}


/* 退出登录按钮 */
#acc_info > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin-left: 3px !important;
    padding: 5px 9px !important;

    color: #9dcbff !important;

    background: rgba(104, 164, 255, 0.08) !important;
    border: 1px solid rgba(121, 177, 255, 0.14) !important;
    border-radius: 8px !important;

    text-decoration: none !important;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


#acc_info > a:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(91, 157, 255, 0.22),
            rgba(164, 111, 255, 0.16)
        ) !important;

    border-color: rgba(135, 184, 255, 0.25) !important;

    transform: translateY(-1px);
}


/* 手机端 */
@media (max-width: 800px) {
    #acc_info {
        top: 8px !important;
        right: 8px !important;

        max-width: calc(100vw - 90px);

        padding: 6px 8px !important;

        font-size: 11px !important;

        border-radius: 10px;
    }

    #srv_info2 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #acc_info > a {
        flex-shrink: 0;
        padding: 4px 7px !important;
    }
}

/* ==================================================
   Longの云盘 - 紧凑顶部导航 + 统一线性图标
   ================================================== */

/*
核心按钮：
搜索 / 上传 / 新建文件夹 / 设置 → 显示文字
其他次级功能 → 只显示图标
*/

#ops {
    width: auto !important;

    /* 给右侧容量与账户信息留下空间 */
    margin-right: 410px !important;

    padding: 8px 10px !important;

    min-height: 54px !important;

    display: flex !important;
    align-items: center !important;

    gap: 3px !important;

    overflow: visible !important;
}


/* ==================================================
   所有顶部按钮
   ================================================== */

#ops > a {
    --nav-icon: none;

    box-sizing: border-box;

    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px;

    /* 隐藏 copyparty 原始 Emoji */
    font-size: 0 !important;

    color: rgba(202, 220, 244, 0.78) !important;

    background: transparent !important;

    border: 1px solid transparent !important;
    border-radius: 10px !important;

    box-shadow: none !important;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}


/* SVG 图标容器 */
#ops > a::before {
    content: "";

    display: block;

    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    background: currentColor;

    -webkit-mask-image: var(--nav-icon);
    mask-image: var(--nav-icon);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}


/* 中文文字 */
#ops > a::after {
    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        "Noto Sans SC",
        sans-serif;

    font-size: 13px !important;
    font-weight: 500;

    white-space: nowrap;

    color: inherit;
}


/* Hover */
#ops > a:hover {
    color: #ffffff !important;

    background: rgba(111, 168, 255, .11) !important;

    border-color: rgba(126, 179, 255, .12) !important;

    transform: translateY(-1px);
}


/* 当前功能 */
#ops > a.act {
    color: #bcdcff !important;

    background:
        linear-gradient(
            135deg,
            rgba(82, 147, 255, .18),
            rgba(157, 111, 255, .13)
        ) !important;

    border-color: rgba(120, 176, 255, .18) !important;
}


/* ==================================================
   图标定义
   ================================================== */


/* 收起 */
#opa_x {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

#opa_x::after {
    content: "";
}


/* 搜索 */
#opa_srch {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");

    width: auto !important;
}

#opa_srch::after {
    content: "搜索";
}


/* 最近上传 */
#opa_del {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

#opa_del::after {
    content: "";
}


/* 上传 */
#opa_up {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");

    width: auto !important;

    color: #b9d9ff !important;

    background:
        linear-gradient(
            135deg,
            rgba(82, 150, 255, .16),
            rgba(153, 112, 255, .10)
        ) !important;
}

#opa_up::after {
    content: "上传";
}


/* 基础上传 */
#opa_bup {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M12 15V8'/%3E%3Cpath d='m8.5 11.5 3.5-3.5 3.5 3.5'/%3E%3C/svg%3E");
}

#opa_bup::after {
    content: "";
}


/* 新建文件夹 */
#opa_mkd {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M12 11v6M9 14h6'/%3E%3C/svg%3E");

    width: auto !important;
}

#opa_mkd::after {
    content: "新建";
}


/* 新建文本 */
#opa_md {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

#opa_md::after {
    content: "";
}


/* 消息 */
#opa_msg {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z'/%3E%3C/svg%3E");
}

#opa_msg::after {
    content: "";
}


/* 播放器 */
#opa_auc {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E");
}

#opa_auc::after {
    content: "";
}


/* 设置 */
#opa_cfg {
    --nav-icon:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.15.37.36.7.6 1 .28.34.67.55 1.1.6H21v4h-.09A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E");

    width: auto !important;

    margin-left: 5px !important;
}

#opa_cfg::after {
    content: "设置";
}


/* ==================================================
   右侧状态区与导航彻底分开
   ================================================== */

#acc_info {
    z-index: 150 !important;
}


/* ==================================================
   中等宽度：进一步压缩
   ================================================== */

@media (max-width: 1500px) {

    #ops {
        margin-right: 330px !important;
    }

    /* “新建”也变成图标 */
    #opa_mkd {
        width: 40px !important;
    }

    #opa_mkd::after {
        content: "";
    }
}


/* ==================================================
   较窄桌面
   ================================================== */

@media (max-width: 1100px) {

    #ops {
        margin-right: 16px !important;
    }

    /* 除上传外全部图标化 */
    #opa_srch,
    #opa_cfg {
        width: 40px !important;
    }

    #opa_srch::after,
    #opa_cfg::after {
        content: "";
    }

    #acc_info #srv_info2 {
        display: none !important;
    }
}


/* ==================================================
   手机
   ================================================== */

@media (max-width: 700px) {

    #ops {
        margin-right: 6px !important;
        padding: 6px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    #ops > a,
    #opa_up {
        width: 38px !important;
        min-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;

        padding: 0 !important;

        flex-shrink: 0;
    }

    #ops > a::after {
        display: none !important;
    }

    #ops > a::before {
        width: 18px;
        height: 18px;
    }
}