/* ==========================================================================
   前台精简样式（10-03 新增）
   场景：自用图床，不需要花哨装饰。
   原则：只做减法 —— 去背景大图、去 logo 装饰、弱化提示、把上传区做成干净白卡。
   说明：本文件在 style.css 之后引入，属覆盖层；删掉本文件即可恢复原版外观。
   ========================================================================== */

/* ---------- 1. 去掉整页背景大图，换浅灰纯色 ---------- */
html, body {
    background-image: none !important;
    background-color: #f4f5f7 !important;
}

/* ---------- 2. 顶部导航：白底细线，不用半透明黑 ---------- */
.header {
    background: #fff !important;
    border-bottom: 1px solid #e8e9ed;
    box-shadow: none !important;
}
.header .layui-nav a {
    color: #2d3036 !important;
    font-weight: 400;
}
.header .layui-nav a:hover { color: #0d9488 !important; }

/* ---------- 3. 去掉 logo 图片与宣传语 ---------- */
.left-menu,
#logo,
#logo img {
    display: none !important;
}

/* ---------- 4. 左右浮动装饰件（回到顶部等）去掉 ---------- */
#left-gg,
#right-gg {
    display: none !important;
}

/* ---------- 5. 上传区：干净白卡 + 虚线框 ---------- */
#upimg,
#multiple {
    background: #fff !important;
    border: 1px dashed #ccd0d6 !important;
    border-radius: 10px;
    padding: 34px 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    transition: border-color .2s, background .2s;
}
#upimg:hover,
#multiple:hover {
    border-color: #0d9488 !important;
}
#upimg p,
#multiple p {
    color: #5a5f68 !important;
    font-size: 14px;
}
#upimg i,
#multiple i {
    color: #0d9488 !important;
}

/* ---------- 6. 提示条：已登录时收起为一行短提示，点击展开 ---------- */
.alert {
    background: #fff !important;
    border: 1px solid #e8e9ed !important;
    border-left: 3px solid #0d9488 !important;
    border-radius: 6px;
    color: #5a5f68 !important;
    box-shadow: none !important;
}
.alert strong { color: #2d3036 !important; }

.notice-bar {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.notice-bar__short { display: none; }
/* 已登录：默认收起，只露一行短提示 */
.notice-bar--folded .notice-bar__full { display: none; }
.notice-bar--folded .notice-bar__short { display: inline; color: #9aa0a6; }
/* 展开后显示完整说明，隐藏短提示 */
.notice-bar--open { cursor: default; }
.notice-bar--open .notice-bar__short { display: none; }
.notice-bar--open .notice-bar__full { display: inline; }
.notice-bar--open .alert-inner--icon { color: #e6a23c !important; }

/* ---------- 7. 内容区留白更宽松 ---------- */
.layui-container {
    padding-bottom: 1em;
}

/* ---------- 8. 上传结果链接区卡片化 ---------- */
#links .layui-table {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
#links .layui-input {
    background: #f7f8fa !important;
    border-color: #e8e9ed !important;
    font-size: 13px;
}

/* ---------- 9. 图片墙（10-02 登录后可见）卡片化 ---------- */
.imgurl-wall {
    background: #fff !important;
    border: 1px solid #e8e9ed;
    box-shadow: none !important;
}

/* ---------- 10. 页脚：安静一点（ImgURL 要求保留版权，只能淡化不能删） ---------- */
.footer {
    background: #fff !important;
    border-top: 1px solid #e8e9ed;
    color: #c2c6cb !important;
    font-size: 12px;
}
.footer a { color: #b6bbc1 !important; }
.footer a:hover { color: #0d9488 !important; }
/* 版权声明额外淡化：存在即可，不抢视线 */
.footer--quiet a:first-child {
    font-size: 11px;
    opacity: .6;
}
.footer--quiet a:first-child:hover { opacity: 1; }

/* ---------- 11. 图片详情页 ---------- */
.htmlcontent,
.layer-img-wrap {
    background: #fff;
    border-radius: 8px;
}

/* ---------- 12. 移动端微调 ---------- */
@media (max-width: 768px) {
    #upimg, #multiple { padding: 24px 10px !important; }
    #upimg i, #multiple i { font-size: 38px !important; }
    .alert { font-size: 12px; padding: 8px 10px; }
}

/* ==========================================================================
   批量上传（10-03 新增，upload-v2.js 配套）
   ========================================================================== */
.upimg-hint {
    margin-top: 4px;
    font-size: 12px !important;
    color: #9aa0a6 !important;
}
#upimg.is-dragover {
    border-color: #0d9488 !important;
    background: #f0fdfa !important;
}

.upload-list {
    margin-top: 14px;
    background: #fff;
    border: 1px solid #e8e9ed;
    border-radius: 8px;
}
.upload-list__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f1f3;
}
.upload-list__count {
    font-size: 13px;
    color: #5a5f68;
    margin-right: auto;
}
.upload-list__count b { color: #0d9488; }

.upload-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
}
.upload-item {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f7f8fa;
    align-items: center;
}
.upload-item:last-child { border-bottom: none; }

.upload-item__thumb {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 6px;
    background: #f2f3f5;
    overflow: hidden;
    position: relative;
}
.upload-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.upload-item__body { flex: 1; min-width: 0; }
.upload-item__name {
    font-size: 13px;
    color: #2d3036;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-item__msg {
    font-size: 12px;
    color: #9aa0a6;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-item__acts { margin-top: 5px; display: flex; gap: 4px; flex-wrap: wrap; }
.upload-item__acts button {
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #5a5f68;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.6;
}
.upload-item__acts button:hover { border-color: #0d9488; color: #0d9488; }

.upload-item.is-done .upload-item__name { color: #0f7b5f; }
.upload-item.is-fail .upload-item__name { color: #d4380d; }
.upload-item.is-fail .upload-item__msg { color: #d4380d; }

.up2-toast {
    position: fixed;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    background: rgba(29, 33, 41, .92);
    color: #fff;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 20px;
    z-index: 99999;
    pointer-events: none;
}
.up2-toast--warn { background: rgba(200, 120, 30, .95); }

@media (max-width: 768px) {
    .upload-item { padding: 9px 10px; }
    .upload-item__thumb { width: 40px; height: 40px; flex-basis: 40px; }
    .upload-list__items { max-height: 320px; }
}