@charset "utf-8";
/* =====================================================================
   dark-unify.css — dataassetssq 全站深色主题统一覆盖层
   风格对齐 YSLwt (Tpl/wap/Index/index.html + /css/mymd-unified.css)：
   深蓝渐变背景 / 玻璃卡片 / 蓝色渐变主按钮 / 统一文字色
   引入位置：head.php 中所有原有样式之后，同优先级后者覆盖
   ===================================================================== */

/* ---------- 页面背景 ---------- */
body {
    background: linear-gradient(160deg, #13182b 0%, #20252f 60%, #13182b) fixed !important;
    color: #e8eaed;
}
body.loginBg {
    background: linear-gradient(160deg, #13182b 0%, #20252f 60%, #13182b) fixed !important;
}
a { color: #82a0f5; }
a:hover, a:focus { color: #82a0f5; }
h1, h2, h3, h4, h5, h6, label, p, span, em, strong, li, td, th { color: inherit; }

/* ---------- 顶栏 ---------- */
.header, .header.white-bg {
    background: rgba(19, 24, 43, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none !important;
}
.header .logo a {
    background: none !important;
    text-indent: 0;
    width: auto;
    height: 60px;
    line-height: 60px;
    color: #e8eaed !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
}
.sidebar-toggle-box .icon-reorder { color: #9aa4b2 !important; }
.top-nav ul.top-menu > li > a .username { color: #e8eaed !important; }
.top-nav ul.top-menu > li > a .caret { border-top-color: #9aa4b2 !important; }
.top-nav ul.top-menu > li > a:hover, .top-nav ul.top-menu > li > a:focus { background: rgba(255, 255, 255, 0.06) !important; }
/* 用户头像统一为圆形裁切 */
.top-nav .dropdown-toggle img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.dropdown-menu {
    background: rgba(37, 43, 55, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}
.dropdown-menu li a { color: #e8eaed !important; }
.dropdown-menu li a:hover, .dropdown-menu li a:focus {
    background: rgba(72, 111, 238, 0.18) !important;
    color: #82a0f5 !important;
}
.dropdown-menu .divider, .dropdown-menu .log-arrow-up { display: none; }
/* 退出菜单项：原样式硬编码亮绿 #a9d96c，统一改为主题蓝色渐变 */
.dropdown-menu.extended.logout > li:last-child {
    background: linear-gradient(135deg, #486fee, #3557d6) !important;
}
.dropdown-menu.extended.logout > li:last-child > a,
.dropdown-menu.extended.logout > li:last-child > a:hover {
    background: none !important;
    color: #fff !important;
}
.dropdown-menu.extended.logout > li:last-child > a:hover i { color: #fff !important; }

/* ---------- 侧边栏 ---------- */
#sidebar { background: rgba(19, 24, 43, 0.92) !important; border-right: 1px solid rgba(255, 255, 255, 0.06); }
/* 侧边菜单分隔线：原样式为硬编码纯白 1px，改为贴合深色主题的淡透明线 */
ul.sidebar-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.sidebar-menu li a {
    color: #b0b8c4 !important;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-menu li a i { color: #8a93a6 !important; }
.sidebar-menu li a:hover { background: rgba(255, 255, 255, 0.05) !important; color: #e8eaed !important; }
.sidebar-menu li.on a, .sidebar-menu li.active a {
    background: rgba(72, 111, 238, 0.15) !important;
    color: #82a0f5 !important;
    border-left-color: #486fee;
}
.capacity {
    background: rgba(19, 24, 43, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #9aa4b2;
}
.capacity .progress { background: rgba(255, 255, 255, 0.08) !important; }
.progress { background: rgba(255, 255, 255, 0.08) !important; }
.progress-bar { background: linear-gradient(135deg, #486fee, #3557d6) !important; }

/* ---------- 按钮：统一圆角与渐变 ---------- */
.btn {
    border: none !important;
    border-radius: 8px !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.95); }
/* 按钮统一为参考图蓝色系：四档深浅区分功能 */
.btn-info, .btn-primary {
    background: linear-gradient(135deg, #5b84f5, #486fee) !important;
    box-shadow: 0 2px 8px rgba(72, 111, 238, 0.35);
}
.btn-info:hover, .btn-primary:hover { box-shadow: 0 4px 14px rgba(72, 111, 238, 0.5); }
.btn-success {
    background: linear-gradient(135deg, #486fee, #3a5fd9) !important;
    box-shadow: 0 2px 8px rgba(58, 95, 217, 0.35);
}
.btn-success:hover { box-shadow: 0 4px 14px rgba(58, 95, 217, 0.5); }
.btn-danger {
    background: linear-gradient(135deg, #3a5fd9, #2c4bb8) !important;
    box-shadow: 0 2px 8px rgba(44, 75, 184, 0.35);
}
.btn-danger:hover { box-shadow: 0 4px 14px rgba(44, 75, 184, 0.5); }
.btn-warning {
    background: linear-gradient(135deg, #82a0f5, #5b84f5) !important;
    box-shadow: 0 2px 8px rgba(91, 132, 245, 0.35);
}
.btn-warning:hover { box-shadow: 0 4px 14px rgba(91, 132, 245, 0.5); }
.btn-white, .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e8eaed !important;
    box-shadow: none;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ---------- 输入控件 ---------- */
.form-control, .logininput, input[type="text"], input[type="password"],
input[type="number"], input[type="email"], textarea, select {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px;
    color: #fff !important;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus, .logininput:focus, textarea:focus, select:focus {
    border-color: #486fee !important;
    box-shadow: 0 0 0 3px rgba(72, 111, 238, 0.25);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #6b7280 !important; }
select option { background: #2b313c; color: #fff; }
.input-group-addon {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #8a93a6 !important;
}
.input-group-addon i { color: #8a93a6; }

/* ---------- 工具栏 / 搜索 / 视图切换 ---------- */
ul.buttons { background: transparent !important; }
.searchRight .btn-white { background: rgba(255, 255, 255, 0.08) !important; }
.toggle button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9aa4b2;
}
.toggle button.active { background: rgba(72, 111, 238, 0.25); color: #82a0f5; }
.toggle button.listBtn { border-right: none; }

/* ---------- 面包屑 ---------- */
.breadcrumb {
    background: rgba(37, 43, 55, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.breadcrumb > li + li::before { color: #4b5563 !important; }
.breadcrumb .active { color: #9aa4b2 !important; }

/* ---------- 网格视图（文件卡片） ---------- */
.listType { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; }
/* 文件/文件夹雪碧图标统一色相为参考图蓝色系（橙黄原色 +190° ≈ #486fee 蓝） */
.listType .big, .listTable em, .db_class_png {
    filter: hue-rotate(190deg) saturate(0.85) brightness(1.05);
}
.listType li {
    background: rgba(37, 43, 55, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.listType li p { color: #b0b8c4 !important; }
.listType li:hover, .listType li.in {
    background: rgba(72, 111, 238, 0.10);
    border: 1px solid rgba(72, 111, 238, 0.5) !important;
}

/* ---------- 列表视图 ---------- */
.listTable { background: transparent !important; color: #e8eaed; }
.listTableTop {
    background: rgba(37, 43, 55, 0.88) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #9aa4b2;
}
.listTableIn {
    background: rgba(37, 43, 55, 0.88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: background-color 0.15s ease;
}
.listTableIn:hover { background: rgba(255, 255, 255, 0.04) !important; }
.listTableIn a, .listTableIn span { color: #e8eaed; }
.squaredFour label { background: rgba(255, 255, 255, 0.1); border-color: rgba(72, 111, 238, 0.6); }

/* ---------- 模态框 ---------- */
.modal-content {
    background: rgba(37, 43, 55, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
    color: #e8eaed;
}
.modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
.modal-header h3, .modal-title { color: #e8eaed !important; }
.modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; }
.modal-body { color: #e8eaed; }
.modalTitle { color: #9aa4b2 !important; }
.modalTitleR { color: #e8eaed !important; }
.modal .close { color: #9aa4b2 !important; text-shadow: none; }
.group ul, .list { border-color: rgba(255, 255, 255, 0.12) !important; }
.group ul li a, .list span, .list a { color: #e8eaed; }
.types li:hover { background: rgba(255, 255, 255, 0.05) !important; }
.types li.bigType { border-color: rgba(255, 255, 255, 0.08) !important; }
.sMenu { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }

/* ---------- 弹层 popover ---------- */
.popover {
    background: rgba(37, 43, 55, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e8eaed !important;
}
.popover-title {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #e8eaed !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.popover-content { color: #e8eaed !important; }
.popover.top .arrow:after { border-top-color: rgba(37, 43, 55, 0.97) !important; }
.popover.bottom .arrow:after { border-bottom-color: rgba(37, 43, 55, 0.97) !important; }

/* ---------- 分页 / 概览卡 ---------- */
.pagination > li > a, .pagination > li > span {
    background: rgba(37, 43, 55, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e8eaed !important;
}
.pagination > .active > a, .pagination > .active > span {
    background: linear-gradient(135deg, #486fee, #3557d6) !important;
    border-color: #3557d6 !important;
}
.state-overview .value { border-color: rgba(255, 255, 255, 0.1) !important; background: rgba(37, 43, 55, 0.88); }

/* ---------- 登录页 ---------- */
.login {
    background: rgba(37, 43, 55, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.login .btn { line-height: 30px; }
.login a { color: #82a0f5 !important; }
.loginLogo { margin: 30px !important; }

/* ---------- lightbox 图片查看 ---------- */
.lightbox .lb-image { border-color: rgba(255, 255, 255, 0.1) !important; }
.lb-outerContainer { background: rgba(19, 24, 43, 0.97) !important; }
.lb-container { background: rgba(19, 24, 43, 0.97) !important; }
.lb-dataContainer { background: rgba(19, 24, 43, 0.95) !important; }
.lb-data .lb-details, .lb-data .lb-caption { color: #e8eaed !important; }
.lb-data .lb-number { color: #9aa4b2 !important; }
.lb-loader .lb-text { color: #9aa4b2 !important; }
.lb-close, .lb-prev, .lb-next { filter: invert(1) brightness(1.6); }

/* ---------- 动效 ---------- */
@keyframes dvFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 卡片入场动画会在每次进入下一级目录时重新播放，形成"闪烁刷新"观感，故只保留模态框动效 */
.modal-content {
    animation: dvFadeUp 0.3s ease both;
}

/* ---------- 底部状态栏：当前目录相对路径 ---------- */
.path-status-bar {
    position: fixed;
    left: 210px; /* 与 #main-content 的 margin-left 对齐，避开左侧 210px 侧栏 */
    right: 0;
    bottom: 0;
    z-index: 30;
    height: 30px;
    line-height: 30px;
    padding: 0 14px;
    box-sizing: border-box;
    background: rgba(19, 24, 43, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #9aa4b2;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.path-status-bar i {
    margin-right: 6px;
    color: #82a0f5;
}
.path-status-bar #pathStatusText {
    color: #e8eaed;
    letter-spacing: 0.5px;
}
/* 收起侧栏时（#container 会被加上 sidebar-closed），状态栏通栏显示 */
#container.sidebar-closed ~ .path-status-bar { left: 0; }
/* 移动端侧栏为抽屉式、且容量条已隐藏，状态栏通栏 */
@media (max-width: 768px) {
    .path-status-bar { left: 0; }
}

/* ---------- 回收站列表：原路径列 ---------- */
/* 原路径列宽 200px，右侧分组整体加宽到 460px（原为 .size 94px + .updateTime 166px = 260px） */
.recycleList .listTableTopR,
.recycleList .listTableInR {
    width: 460px;
    min-width: 460px;
}
.recycleList .recyPath {
    width: 200px;
    padding: 0 10px;
    box-sizing: border-box;
    color: #9aa4b2;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recycleList .listTableTopR .recyPath {
    font-weight: 400;
    color: #e8eaed;
}
/* 视口不足 1280px 时隐藏原路径列，避免右侧分组过宽把列表行挤成两行（原布局右侧仅 260px，可用余量很小） */
@media (max-width: 1279px) {
    .recycleList .recyPath { display: none; }
    .recycleList .listTableTopR,
    .recycleList .listTableInR {
        width: 260px;
        min-width: 260px;
    }
}

/* ---------- 回收站：手机端与主文件列表保持同一显示风格 ---------- */
/* 主文件列表在 index.css 的 ≤768px 块里被改为“固定宽表格 + 横向滑动”，回收站沿用同一套策略，
   同时修正工具栏网格：回收站只有两个按钮，原 nth-last-child(2) 规则会误命中首个按钮并使其独占整行 */
@media (max-width: 768px) {
    /* 工具栏两等分平铺，两个按钮同宽同排 */
    ul.recyButtons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    ul.recyButtons > li:nth-last-child(2) {
        grid-column: auto;
        float: none !important;
        width: auto;
        margin: 0 !important;
        display: block;
    }
    /* 整表横向滑动，表头与数据行不再换行堆叠 */
    .recyWrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .recyWrap .listTable {
        width: 1016px;
        min-width: 1016px;
    }
    .recyWrap .listTableTopL,
    .recyWrap .listTableInL { width: 580px; }
    .recyWrap .cBox { width: 40px; }
    .recyWrap .size { width: 70px; }
    .recyWrap .updateTime { width: 130px; }
    .recyWrap .listTableTopR,
    .recyWrap .listTableInR {
        width: 436px;
        min-width: 0;
    }
    /* 手机端整表可横向滑动，原路径列随表查看，不再按桌面小屏规则隐藏 */
    .recyWrap .recyPath {
        display: block;
        width: 200px;
    }
    /* 名称超长省略，不再撑高行 */
    .recyWrap .name .div_pro {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ---------- 手机端横向滚动条：统一为深蓝主题 ----------
   文件列表 #list 与回收站 .recyWrap 在手机上左右滑动时，底部滚动条此前完全由浏览器
   按默认样式渲染（在该手机上呈红色），与全站深蓝主题不符，这里做主题化覆盖。
   必须显式给出滚动条高度并同时设置 track/thumb，浏览器才会渲染成自定义的经典滚动条 */
@media (max-width: 768px) {
    #list::-webkit-scrollbar,
    .recyWrap::-webkit-scrollbar {
        height: 8px;
        background: transparent;
        border-radius: 4px;
    }
    #list::-webkit-scrollbar-track,
    .recyWrap::-webkit-scrollbar-track {
        background: transparent;
    }
    #list::-webkit-scrollbar-thumb,
    .recyWrap::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #486fee, #3557d6);
        border-radius: 4px;
    }
    #list::-webkit-scrollbar-thumb:hover,
    .recyWrap::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #5b84f5, #486fee);
    }
    #list::-webkit-scrollbar-corner,
    .recyWrap::-webkit-scrollbar-corner {
        background: transparent;
    }
    /* Firefox 内核 */
    #list,
    .recyWrap {
        scrollbar-width: thin;
        scrollbar-color: #486fee transparent;
    }
}

/* ---------- 整页 / 侧栏自定义滚动条（nicescroll）：红色改为主题蓝 ----------
   common-scripts.js 里 $("#sidebar") 与 $("html") 的 niceScroll 把滑块色写死为红色 #e8403f，
   与该文件的深色主题不一致。滑块由 nicescroll 动态创建（.nicescroll-rails 的直接子元素，且不带 class），
   颜色以内联样式写入，故用 !important 覆盖；轨道（.nicescroll-rails 自身）保持深灰不动 */
.nicescroll-rails > div {
    background-color: #486fee !important;
}

/* ---------- 列表行悬停操作按钮：白色底块改为透明小图标 ----------
   index.css 中 .float_box 底色为 #fafafa，在深色主题下会渲染成一个突兀的白色方块
   （例如“公共资源”列表行悬停时出现的收藏星标），这里改为透明背景并略缩小图标，
   使其成为与全站深色主题一致的透明小图标 */
.float_box {
    background: transparent;
}
.float_box ul.control li i {
    font-size: 16px;
}

/* ---------- 用户中心三页（set / person / avatar）：独立模板统一深色主题 ----------
   这三页不经过 head.php，此前未引入本文件，自带浅色照片横幅（img/bg0.jpg）与无样式的
   bootstrap box 卡片，这里统一为全站深蓝渐变 + 玻璃卡片风格。横幅与卡片类仅这三页使用 */
.profileBanner {
    background: linear-gradient(135deg, rgba(72, 111, 238, 0.16), rgba(19, 24, 43, 0.9));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    height: 190px;
    margin-top: -20px;
}
.profileBanner img {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #2b313c;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.box, .box.box-primary {
    background: rgba(37, 43, 55, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-top: 1px solid rgba(72, 111, 238, 0.55) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.box .box-header { color: #e8eaed; }
.box .box-header .box-title { color: #e8eaed !important; }
.box .box-body { color: #b0b8c4; }
.box .box-footer {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #b0b8c4;
}
/* 手机端：横幅改流式高度、头像缩小，避免 190px 定高与 143px 头像溢出小屏 */
@media (max-width: 768px) {
    .profileBanner { height: auto; padding-bottom: 22px; }
    .profileBanner img { width: 96px; height: 96px; margin-top: 14px; }
}

/* ---------- 列表悬浮操作条：改为纯 CSS 锚定，修复视图切换后错位 ----------
   原实现依赖 JS 在页面就绪/排序回调/目录切换/新建文件夹四个时机给每个 .float_box
   写内联 position:absolute; right/top，参照值取自"当时第一行"的 position()。
   切换时机不对时（#list 处于 display:none、或新行插入后定位被跳过），操作条会以
   静态流式布局留在行内：ul.control 图标竖向堆叠在行下方并把行距撑开（时好时坏）。
   .listTableInR 本身就是 position:relative，这里直接用 CSS 锚定到其右上，
   与原正常状态的几何位置一致；!important 用于压过会话内残留的内联定位，
   四处 JS 定位逻辑已同步移除 */
#list .float_box {
    position: absolute !important;
    top: 7px !important;
    right: 15px !important;
}

/* ---------- 上传文件窗口（plupload #msg_win）：深色玻璃风格统一 ----------
   原样式为白底 + 浅蓝(#58c9f3)标题栏，与全站深蓝主题不一致。
   仅覆盖颜色/边框/阴影，窗口定位(#msg_win 的 right/position)与 JS 显隐逻辑不动 */
#msg_win {
    background: rgba(37, 43, 55, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}
/* 标题栏：浅蓝改为主题深蓝渐变 */
#msg_title {
    background: linear-gradient(135deg, #486fee, #3a56c8) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
/* 右上角最小化/关闭按钮 */
.icos a { color: #d8dde6 !important; }
.icos a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}
#msg_content { background: transparent; }
/* 文件行分隔虚线改半透明白 */
#msg_content ul li { border-bottom: 1px dashed rgba(255, 255, 255, 0.12) !important; }
.uploadTitle { color: #dfe4ec; }
.uploadSize { color: #9aa4b2; }
/* bootstrap 进度条：轨道改深色、滑块用主题蓝（原 progress-bar-info 为青蓝色） */
.uploadProportion .progress {
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}
.uploadProportion .progress-bar {
    background-image: linear-gradient(90deg, #486fee, #6b8bff) !important;
}
/* 文件列表滚动条主题化 */
#msg_content::-webkit-scrollbar { width: 8px; }
#msg_content::-webkit-scrollbar-thumb {
    background: rgba(72, 111, 238, 0.5);
    border-radius: 4px;
}
#msg_content::-webkit-scrollbar-track { background: transparent; }

/* 窄屏手机：固定 450px 宽会溢出，改为视口自适应（桌面端样式不变） */
@media (max-width: 480px) {
    #msg_win {
        width: calc(100vw - 20px) !important;
        right: 10px !important;
    }
    #msg_content { width: 100% !important; }
}