/* ==========================================================================
   局域网快传 /tools/drop
   视觉参考 PairDrop / AirDrop：深色底、居中的圆形设备头像、点击即发送。
   配色全部走站点主题变量（--bg-primary / --accent / …），自动跟随日间 / 夜间。
   断点：≥992 桌面 / 768–991 平板 / <768 手机 / ≤420 超小屏。
   ========================================================================== */

/* ★ 老坑守护：本文件多处用 display:flex，必须让 [hidden] 能压过去 */
.dp-page [hidden],
.dp-mask[hidden],
.dp-toast[hidden],
.dp-incoming[hidden],
.dp-trans[hidden] {
    display: none !important;
}

/* 电脑端整屏（站点规范）：解除 .app / .main-content 的限宽，让快传界面铺满整屏、
   左侧导航栏保留。站点 style.css 已对 body.tools-page / body[data-page="tools"] 统一处理；
   这里再针对本页 body 类 page-drop-full 兜底，确保共享类逻辑变化也不回退成居中窄列。
   （桌面） */
body.page-drop-full .app { max-width: 100%; }
body.page-drop-full .main-content {
    max-width: 100%;
    width: 100%;
    border-right: 0;
    min-width: 0;
}

.dp-page {
    --dp-card: var(--bg-secondary);
    --dp-soft: var(--bg-hover);
    --dp-line: var(--border-color);
    --dp-dim: var(--text-secondary);
    --dp-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    --dp-av: 108px;

    position: relative;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    padding: 18px 20px 96px;
    box-sizing: border-box;
    /* 中心柔和光晕，还原 PairDrop 的舞台感 */
    background:
        radial-gradient(900px 520px at 50% 38%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
        var(--bg-primary);
}

/* ---------------- 顶部 ---------------- */
.dp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--dp-max, 1160px);
    margin: 0 auto;
}
.dp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dp-logo {
    width: 44px; height: 44px;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7b3fe4));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent);
}
.dp-logo svg { width: 24px; height: 24px; }
.dp-brand-t h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; }
.dp-brand-t p {
    margin: 2px 0 0; font-size: 13px; color: var(--dp-dim);
    max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-top-actions { display: flex; align-items: center; gap: 8px; }

/* ---------------- 按钮 ---------------- */
.dp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 13px;
    border: 1px solid var(--dp-line);
    border-radius: 10px;
    background: var(--dp-card);
    color: var(--text-primary);
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: background .16s, border-color .16s, transform .12s;
}
.dp-btn:hover { background: var(--dp-soft); border-color: var(--accent); }
.dp-btn:active { transform: scale(.97); }
.dp-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.dp-btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.dp-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.dp-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--dp-line)); }
.dp-btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); }

.dp-x {
    width: 32px; height: 32px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--dp-dim); font-size: 15px;
}
.dp-x:hover { background: var(--dp-soft); color: var(--text-primary); }

/* 极简图标按钮（刷新等） */
.dp-btn-icon { padding: 0; width: 38px; }
.dp-btn-icon .dp-btn-t { display: none; }
@keyframes dp-spin { to { transform: rotate(360deg); } }
.dp-btn.is-spin svg { animation: dp-spin .6s linear infinite; }

/* 空态里的「刷新列表」按钮 */
.dp-empty #dpEmptyRefresh { margin-top: 16px; }

/* 键盘焦点可见性 */
.dp-btn:focus-visible, .dp-fab:focus-visible, .dp-x:focus-visible,
.dp-send-opt:focus-visible, .dp-hist-seg-btn:focus-visible, .dp-switch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------------- 舞台 / 设备 ---------------- */
.dp-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--dp-max, 1160px);
    margin: 0 auto;
}
.dp-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;   /* 本机在上、附近设备在下，分区更清晰 */
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    padding: 38px 12px 24px;
    min-height: 300px;
}
.dp-peers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 34px 44px;
    width: 100%;
    max-width: 960px;
}

.dp-peer {
    position: relative;
    width: var(--dp-av);
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform .16s ease;
}
.dp-peer:hover { transform: translateY(-4px); }
.dp-peer:active { transform: translateY(-1px) scale(.98); }
.dp-peer:focus-visible { outline: none; }
.dp-peer:focus-visible .dp-avatar { box-shadow: 0 0 0 3px var(--accent); }

.dp-avatar {
    position: relative;
    width: var(--dp-av); height: var(--dp-av);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(140deg, #4b6bfb, #8b5cf6);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
    overflow: hidden;
}
.dp-av-icon { width: 46px; height: 46px; display: block; }
.dp-av-icon svg { width: 100%; height: 100%; }

.dp-peer-name {
    max-width: 116px; text-align: center;
    font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-peer-tag {
    font-size: 11.5px; color: var(--dp-dim);
    padding: 1px 8px; border-radius: 999px;
    background: var(--dp-soft); border: 1px solid var(--dp-line);
}
/* 本机直连：不经服务器的窗口，用绿色区分 */
.dp-peer-tag.is-local {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}
.dp-peer-self { cursor: default; }
.dp-peer-self:hover { transform: none; }
.dp-peer-self .dp-avatar {
    background: linear-gradient(140deg, #00ba7c, #0ea5e9);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 10px 26px rgba(0, 0, 0, .3);
}

/* 连接状态小圆点 */
.dp-dot {
    position: absolute; right: 6px; bottom: 6px;
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid var(--bg-primary);
    background: var(--text-secondary);
    transition: background .2s;
}
.dp-peer.is-ready .dp-dot { background: var(--success); }
.dp-peer.is-busy .dp-dot { background: var(--accent); }

/* 头像上的环形进度 */
.dp-ring {
    position: absolute; inset: 0;
    pointer-events: none;
    transform: rotate(-90deg);
}
.dp-ring circle {
    fill: none; stroke-width: 5; stroke-linecap: round;
    cx: 50; cy: 50; r: 47;
}
.dp-ring .dp-ring-bg { stroke: rgba(255, 255, 255, .22); }
.dp-ring .dp-ring-fg {
    stroke: #fff;
    stroke-dasharray: 295.3;
    stroke-dashoffset: 295.3;
    transition: stroke-dashoffset .18s linear;
}

/* ---------------- 空态与状态 ---------------- */
.dp-empty { text-align: center; padding: 8px 16px 34px; color: var(--dp-dim); }
.dp-empty-ico { width: 62px; height: 62px; margin: 0 auto 12px; color: var(--accent); opacity: .8; }
.dp-empty-ico svg { width: 100%; height: 100%; }
.dp-empty h2 { margin: 0 0 6px; font-size: 17px; color: var(--text-primary); }
.dp-empty p { margin: 0 auto; font-size: 13.5px; max-width: 46ch; }
.dp-empty-sub { margin-top: 6px !important; opacity: .85; }

.dp-status {
    text-align: center; font-size: 12.5px; color: var(--dp-dim);
    padding: 0 12px 10px;
}

/* ---------------- 底部操作条 ---------------- */
.dp-foot {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--dp-line);
}
.dp-fab {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 42px; padding: 0 18px;
    border: 0; border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 14.5px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: transform .12s, background .16s;
}
.dp-fab:hover { background: var(--accent-hover); }
.dp-fab:active { transform: scale(.97); }
.dp-fab svg { width: 18px; height: 18px; }
.dp-fab-ghost {
    background: var(--dp-card); color: var(--text-primary);
    border: 1px solid var(--dp-line); box-shadow: none;
}
.dp-fab-ghost:hover { background: var(--dp-soft); }
.dp-foot-hint { font-size: 12px; color: var(--dp-dim); }

/* 电脑端左侧导航常驻：固定底栏起点对齐主内容区左缘（即侧边栏右沿），
   否则 left:0 会让底栏横跨整个视口、压在左侧边栏上（含底部的 .sidebar-user）。 */
@media (min-width: 701px) {
    .dp-foot { left: var(--sidebar-width); }
    body.left-collapsed .dp-foot { left: 88px; }
}

/* ---------------- 传入请求 ---------------- */
.dp-incoming {
    position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%);
    z-index: 60;
    width: min(420px, calc(100vw - 32px));
    display: flex; flex-direction: column; gap: 10px;
}
.dp-inc-card {
    background: var(--dp-card);
    border: 1px solid var(--dp-line);
    border-radius: 14px;
    box-shadow: var(--dp-shadow);
    padding: 14px 16px;
}
.dp-inc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dp-inc-from { font-size: 13.5px; font-weight: 700; }
.dp-inc-badge {
    font-size: 11px; padding: 1px 7px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.dp-inc-files { font-size: 13px; color: var(--text-primary); word-break: break-all; margin-bottom: 4px; }
.dp-inc-meta { font-size: 12px; color: var(--dp-dim); margin-bottom: 10px; }
.dp-inc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.dp-inc-text {
    font-size: 13px; line-height: 1.55; max-height: 190px; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
    background: var(--dp-soft); border: 1px solid var(--dp-line);
    border-radius: 9px; padding: 9px 11px; margin-bottom: 10px;
}

/* ---------------- 传输列表 ---------------- */
.dp-trans {
    position: fixed; right: 16px; bottom: 78px;
    z-index: 55;
    width: min(320px, calc(100vw - 32px));
    display: flex; flex-direction: column; gap: 8px;
    max-height: 46vh; overflow: auto;
}
.dp-tr-card {
    background: var(--dp-card);
    border: 1px solid var(--dp-line);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--dp-shadow);
}
.dp-tr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.dp-tr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-tr-pct { color: var(--dp-dim); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.dp-bar {
    height: 5px; border-radius: 999px; margin-top: 7px;
    background: var(--dp-soft); overflow: hidden;
}
.dp-bar > i {
    display: block; height: 100%; width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #8b5cf6);
    transition: width .16s linear;
}
.dp-tr-sub { margin-top: 5px; font-size: 11.5px; color: var(--dp-dim); }
.dp-tr-done { color: var(--success); font-weight: 600; }
.dp-tr-fail { color: var(--danger); font-weight: 600; }
.dp-tr-pause { color: var(--warning, #d98a00); font-weight: 600; }
/* 失败记录的「关闭」按钮：默认隐藏（仅 fail 状态由 JS 显示），点击即移除该卡片 */
.dp-tr-name { flex: 1 1 auto; min-width: 0; }
.dp-tr-close {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border: 0; border-radius: 6px;
    background: transparent; color: var(--dp-dim);
    font-size: 13px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.dp-tr-close:hover { background: var(--dp-soft); color: var(--danger); }

/* ---------------- 弹窗 ---------------- */
.dp-mask {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
}
.dp-modal {
    width: min(440px, 100%);
    max-height: min(86vh, 720px);
    display: flex; flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--dp-line);
    border-radius: 16px;
    box-shadow: var(--dp-shadow);
    overflow: hidden;
}
.dp-modal-wide { width: min(560px, 100%); }
.dp-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--dp-line);
}
.dp-modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.dp-modal-body { padding: 16px; overflow: auto; }
.dp-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--dp-line);
    background: var(--bg-secondary);
}

.dp-note { margin: 0 0 12px; font-size: 12.5px; color: var(--dp-dim); line-height: 1.6; }
.dp-warn {
    margin: 12px 0 0; font-size: 12px; line-height: 1.6;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
    border-radius: 9px; padding: 8px 10px;
}

.dp-input, .dp-textarea {
    width: 100%; box-sizing: border-box;
    background: var(--bg-secondary);
    border: 1px solid var(--dp-line);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 16px;            /* ≥16px 防 iOS 聚焦缩放 */
    padding: 9px 11px;
}
.dp-input:focus, .dp-textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.dp-textarea { resize: vertical; line-height: 1.6; }

.dp-field { display: block; margin-bottom: 14px; }
.dp-field-t { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.dp-field-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--dp-dim); line-height: 1.55; }
.dp-field.dp-unsupported { display: none; }
.dp-dir-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dp-dir-name { font-size: 12.5px; color: var(--dp-dim); word-break: break-all; }
.dp-dir-name:empty::before { content: '未选择'; }
.dp-field-row { display: flex; flex-direction: column; gap: 10px; }
.dp-switch {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; cursor: pointer;
    padding: 7px 9px; border-radius: 9px;
    background: var(--bg-secondary);
    border: 1px solid var(--dp-line);
}
.dp-switch input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }

/* 配对 */
.dp-pair-code {
    text-align: center; font-size: 34px; font-weight: 800; letter-spacing: 8px;
    font-variant-numeric: tabular-nums;
    padding: 10px 0 4px; color: var(--text-primary);
}
.dp-pair-qr {
    width: 176px; height: 176px; margin: 6px auto 10px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box;
}
.dp-pair-qr canvas, .dp-pair-qr img { width: 100% !important; height: 100% !important; display: block; }
.dp-pair-qr .dp-qr-fallback { color: #333; font-size: 12px; text-align: center; line-height: 1.5; }
.dp-pair-url {
    text-align: center; font-size: 11.5px; color: var(--dp-dim);
    word-break: break-all; cursor: pointer; margin-bottom: 12px;
}
.dp-pair-url:hover { color: var(--accent); }
.dp-pair-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dp-sep {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 0 12px; color: var(--dp-dim); font-size: 12px;
}
.dp-sep::before, .dp-sep::after {
    content: ''; flex: 1 1 auto; height: 1px; background: var(--dp-line);
}
.dp-pair-join { display: flex; gap: 8px; }
.dp-pair-join .dp-input { flex: 1 1 auto; text-transform: uppercase; letter-spacing: 3px; text-align: center; }
.dp-pair-exit { margin-top: 14px; text-align: center; }

/* 发送目标选择 */
.dp-send-to { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.dp-send-opt {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; border-radius: 10px; cursor: pointer;
    background: var(--bg-secondary); border: 1px solid var(--dp-line);
    font-size: 13.5px;
}
.dp-send-opt:hover { border-color: var(--accent); }
.dp-send-opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dp-send-ico { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.dp-send-ico svg { width: 100%; height: 100%; }
/* 多选接收方：行内名称占满、右侧勾选标记仅在选中时显示 */
.dp-pick-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-pick-check {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--dp-line); box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; line-height: 1;
}
.dp-pick-row.is-on .dp-pick-check {
    background: var(--accent); border-color: var(--accent);
}
.dp-pick-row.is-on .dp-pick-check::after { content: '✓'; }
.dp-pick-row { user-select: none; }

/* 帮助 */
.dp-help { font-size: 13.5px; line-height: 1.75; }
.dp-help h3 { margin: 16px 0 6px; font-size: 14px; font-weight: 700; }
.dp-help h3:first-child { margin-top: 0; }
.dp-help ol, .dp-help ul { margin: 0; padding-left: 20px; }
.dp-help li { margin-bottom: 4px; }
.dp-help strong { color: var(--accent); }

/* ---------------- 自定义头像 ---------------- */
/* 头像图片盖在圆形头像上；有头像时用 .is-photo 隐藏默认设备图标 */
.dp-avatar .dp-av-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.dp-avatar.is-photo .dp-av-icon { display: none; }

.dp-avpick { display: flex; align-items: center; gap: 14px; }
.dp-av-prev {
    position: relative; flex: 0 0 auto;
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; overflow: hidden;
    background: linear-gradient(140deg, #00ba7c, #0ea5e9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.dp-av-prev-ico { width: 30px; height: 30px; display: block; }
.dp-av-prev-ico svg { width: 100%; height: 100%; }
.dp-av-prev-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dp-av-prev.has-photo .dp-av-prev-ico { display: none; }
.dp-avpick-acts { min-width: 0; flex: 1 1 auto; }
.dp-avpick-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dp-avpick-acts .dp-note { margin: 8px 0 0; }

/* ---------------- 传输记录 ---------------- */
.dp-hist-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.dp-hist-seg {
    display: inline-flex; padding: 2px; gap: 2px;
    background: var(--bg-secondary); border: 1px solid var(--dp-line);
    border-radius: 10px;
}
.dp-hist-seg-btn {
    border: 0; background: transparent; cursor: pointer;
    min-height: 28px; padding: 0 12px; border-radius: 8px;
    font-size: 12.5px; color: var(--dp-dim);
}
.dp-hist-seg-btn:hover { color: var(--text-primary); }
.dp-hist-seg-btn.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.dp-hist-stat { font-size: 12px; color: var(--dp-dim); font-variant-numeric: tabular-nums; }

.dp-hist-list { display: flex; flex-direction: column; gap: 8px; }
.dp-hist-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: 11px;
    background: var(--bg-secondary); border: 1px solid var(--dp-line);
}
.dp-hist-ico {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
}
.dp-hist-ico.is-out { background: var(--accent); }
.dp-hist-ico.is-in { background: var(--success); }
.dp-hist-main { min-width: 0; flex: 1 1 auto; }
.dp-hist-name {
    font-size: 13.5px; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-hist-meta { margin-top: 3px; font-size: 11.5px; color: var(--dp-dim); }
.dp-hist-state { color: var(--danger); }
.dp-hist-del {
    flex: 0 0 auto; width: 26px; height: 26px;
    border: 0; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--dp-dim); font-size: 13px;
}
.dp-hist-del:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.dp-hist-empty { text-align: center; padding: 22px 10px; color: var(--dp-dim); }
.dp-hist-empty p { margin: 0 0 4px; font-size: 13.5px; }
.dp-hist-empty-sub { font-size: 12px; }
.dp-foot-spacer { flex: 1 1 auto; }

/* ---------------- Toast ---------------- */
.dp-toast {
    position: fixed; left: 50%; top: 22px; transform: translateX(-50%);
    z-index: 400;
    max-width: calc(100vw - 32px);
    padding: 10px 16px; border-radius: 11px;
    background: var(--text-primary); color: var(--bg-primary);
    font-size: 13.5px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.dp-toast.is-err { background: var(--danger); color: #fff; }
.dp-toast.is-ok { background: var(--success); color: #fff; }

/* 拖拽高亮 */
.dp-page.is-drag .dp-stage { outline: 2px dashed var(--accent); outline-offset: 10px; border-radius: 18px; }

/* ---------------- 分享弹窗（与 /tools/music 分享功能一致） ---------------- */
.dp-share-modal {
    max-width: 380px;
    width: calc(100% - 32px);
    padding: 22px 22px 20px;
}
.dp-share-head { margin-bottom: 16px; }
.dp-share-title {
    font-size: 16px; font-weight: 700; color: var(--text-primary);
    line-height: 1.35;
}
.dp-share-sub {
    margin-top: 6px; font-size: 12.5px; color: var(--dp-dim);
    line-height: 1.5;
}
.dp-share-body { display: flex; flex-direction: column; gap: 16px; }
.dp-share-channels {
    display: flex; gap: 8px;
}
.dp-share-chan {
    flex: 1 1 0; min-height: 38px; padding: 0 6px;
    border: 1px solid var(--dp-line); border-radius: 11px;
    background: var(--dp-card); color: var(--dp-dim);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.dp-share-chan:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--accent) 40%, var(--dp-line)); }
.dp-share-chan.is-on {
    color: #fff; background: var(--accent); border-color: var(--accent);
}
.dp-share-qr-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.dp-share-qr {
    width: 184px; height: 184px; padding: 10px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 6px 20px var(--dp-shadow);
}
.dp-share-qr canvas, .dp-share-qr img { display: block; width: 164px !important; height: 164px !important; }
.dp-share-qr-fallback {
    display: flex; align-items: center; text-align: center;
    width: 100%; height: 100%; padding: 12px;
    font-size: 12.5px; color: #b21f1f; line-height: 1.5;
    box-sizing: border-box;
}
.dp-share-qr-tip { font-size: 12.5px; color: var(--dp-dim); }
.dp-share-url-row {
    display: flex; gap: 8px; align-items: stretch;
}
.dp-share-url {
    flex: 1 1 auto; min-width: 0;
    height: 40px; padding: 0 12px;
    border: 1px solid var(--dp-line); border-radius: 10px;
    background: var(--dp-soft); color: var(--text-primary);
    font-size: 13px;
}
.dp-share-copy {
    flex: 0 0 auto; padding: 0 16px; height: 40px;
    border: none; border-radius: 10px;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.dp-share-copy:hover { opacity: .9; }
.dp-share-copy-text {
    display: block; width: 100%; height: 40px;
    border: 1px solid var(--dp-line); border-radius: 10px;
    background: var(--dp-card); color: var(--text-primary);
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.dp-share-copy-text:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--dp-line)); }

@media (max-width: 480px) {
    .dp-share-modal { padding: 18px 16px 16px; }
    .dp-share-title { font-size: 15px; }
    .dp-share-chan { font-size: 12.5px; }
    .dp-share-qr { width: 168px; height: 168px; }
    .dp-share-qr canvas, .dp-share-qr img { width: 148px !important; height: 148px !important; }
    .dp-share-url-row { flex-direction: column; }
    .dp-share-copy { width: 100%; height: 38px; }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 991px) {
    .dp-page { --dp-av: 94px; }
    .dp-stage { gap: 26px 30px; padding: 30px 8px 20px; }
    .dp-brand-t p { max-width: 34ch; }
}

@media (max-width: 767px) {
    .dp-page { --dp-av: 82px; padding: 14px 14px 104px; }
    .dp-top { gap: 10px; }
    .dp-logo { width: 38px; height: 38px; border-radius: 11px; }
    .dp-logo svg { width: 20px; height: 20px; }
    .dp-brand-t h1 { font-size: 17px; }
    .dp-brand-t p { font-size: 12px; max-width: 100%; white-space: normal; }
    .dp-btn { min-height: 34px; padding: 0 10px; font-size: 12.5px; }
    /* 手机端只留图标，省出横向空间 */
    .dp-btn-t { display: none; }
    .dp-top-actions { gap: 6px; }
    .dp-stage { gap: 22px 18px; padding: 22px 4px 16px; }
    .dp-av-icon { width: 34px; height: 34px; }
    .dp-peer-name { font-size: 13px; max-width: 92px; }
    .dp-foot { gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .dp-fab { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
    .dp-foot-hint { display: none; }
    .dp-incoming { bottom: 70px; }
    .dp-trans { left: 16px; right: 16px; width: auto; bottom: 70px; max-height: 40vh; }
    .dp-pair-code { font-size: 28px; letter-spacing: 6px; }
    /* 手机上设置弹窗变窄，头像选择改为纵向排列 */
    .dp-avpick { flex-direction: column; align-items: flex-start; gap: 10px; }
    .dp-hist-bar { gap: 8px; }
}

@media (max-width: 420px) {
    .dp-page { --dp-av: 72px; }
    .dp-stage { gap: 18px 10px; }
    .dp-av-icon { width: 30px; height: 30px; }
    .dp-peer-name { font-size: 12px; max-width: 78px; }
    .dp-pair-qr { width: 150px; height: 150px; }
    .dp-mask { padding: 12px; }
    .dp-modal { max-height: 92vh; }
    /* 超小屏：底部三个操作按钮更紧凑，确保不挤压换行 */
    .dp-foot { gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .dp-fab { min-height: 38px; padding: 0 11px; font-size: 12.5px; gap: 5px; }
    .dp-fab svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .dp-page *, .dp-page *::before, .dp-page *::after {
        transition: none !important;
        animation: none !important;
    }
}