/* ============================================================
   widget.css —— 组件库 / 添加 弹窗（浅色主题）
   结构见 templates/widget.html，交互见 js/widget.js
   三 Tab：组件库（组件卡片网格）· 网址导航（添加网站表单）· 自定义图标
   ============================================================ */

.wg-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    /* 无遮罩：背景透明、不模糊，弹窗直接覆盖在页面上；该层仍用于居中与点击外部关闭 */
    background: transparent;
}

.wg-dialog {
    position: relative;
    width: 1120px;
    max-width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* 弹窗本身不滚动，滚动交给各面板，避免双层滚动条 */
    background: #ffffff;
    border-radius: 20px;
    padding: 26px 34px 34px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    color: #1f2430;
    animation: wg-in 0.22s ease;
}
@keyframes wg-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.wg-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #9aa3b2;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.wg-close:hover { color: #4b5563; background: #f2f4f8; }

/* ===== 顶部 Tab ===== */
.wg-tabs {
    display: flex;
    gap: 34px;
    border-bottom: 2px solid #eef0f4;
    margin-bottom: 20px;
    flex: none;
}
.wg-tab {
    position: relative;
    padding: 10px 2px 14px;
    border: none;
    background: none;
    font-size: 20px;
    font-weight: 700;
    color: #4b5260;
    cursor: pointer;
}
.wg-tab.active { color: #ff8c1a; }
.wg-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    border-radius: 2px;
    background: #ff8c1a;
}

.wg-pane { display: none; }
.wg-pane.active {
    display: flex;
    flex-direction: column;
    min-height: 0;          /* 允许子级在 flex 列中收缩并独立滚动 */
    flex: 1;
    overflow-y: auto;       /* 组件库 / 自定义图标面板内容超高时只滚面板 */
    overflow-x: hidden;
}
/* 网址导航面板：搜索框与分类固定，卡片区独立滚动，因此面板自身不滚 */
.wg-pane.active[data-pane="site"] { overflow: visible; }

/* ===== 分类 chips ===== */
/* 分类条（组件库 / 网址导航共用）：单行横向滑动，等高对齐；
   隐藏原生滚动条，靠滚轮/按住拖动滚动，右缘渐隐提示还有更多 */
.wg-chips {
    display: flex;
    flex: none;                /* 在弹窗 flex 列布局中不被压缩（overflow 会使最小高度变 0） */
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none;              /* IE/Edge 隐藏滚动条 */
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
.wg-chips.dragging { cursor: grabbing; }
.wg-chips::-webkit-scrollbar { width: 0; height: 0; display: none; }  /* Chrome/Safari 隐藏 */
.wg-chips .wg-chip { flex: none; white-space: nowrap; user-select: none; }
.wg-chip {
    padding: 7px 18px;
    border: none;
    border-radius: 18px;
    background: #f2f4f8;
    color: #8a91a0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.wg-chip:hover { background: #e7ebf2; color: #5b6270; }
.wg-chip.active {
    background: #ff8c1a;
    color: #fff;
}

/* ===== 组件卡片网格 ===== */
.wg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.wg-card {
    position: relative;
    border-radius: 18px;
    background: #f7f8fa;
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.wg-card:hover {
    box-shadow: 0 12px 28px rgba(20, 24, 40, 0.1);
    transform: translateY(-2px);
}
.wg-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #5b6270;
    text-align: center;
}
.wg-card-desc {
    margin-top: 6px;
    font-size: 15px;
    color: #a7adb9;
    text-align: center;
    min-height: 20px;
}

/* 组件预览白色舞台 */
.wg-stage {
    position: relative;
    margin-top: 16px;
    flex: 1;
    min-height: 200px;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 右上角 + / 已添加 按钮 */
.wg-add {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #ff8c1a;
    color: #fff;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(255, 140, 26, 0.4);
    transition: transform 0.12s ease, background 0.15s ease;
}
.wg-add:hover { transform: scale(1.08); }
.wg-add.added {
    background: #34c759;
    box-shadow: 0 6px 14px rgba(52, 199, 89, 0.4);
    font-size: 22px;
}

/* 轮播指示点（钉在舞台底部居中，不与预览卡片挤在一行） */
.wg-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 2;
}
.wg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e5ec;
}
.wg-dot.on { width: 20px; border-radius: 5px; background: #ff8c1a; }

.wg-empty {
    padding: 60px 0;
    text-align: center;
    color: #a7adb9;
    font-size: 16px;
}
.wg-site-retry {
    color: #4a90f5;
    cursor: pointer;
}
.wg-site-retry:hover {
    text-decoration: underline;
}

/* ===== 通用“小组件”预览块 ===== */
.wg-mock {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(20, 24, 40, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== 预览轮播：一个组件的多套形态（完整版 / 简版）左右切换 ===== */
.wg-mock-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wg-mock-views { position: relative; width: 100%; height: 150px; }
.wg-mock-view {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}
.wg-mock-view.active { display: flex; }
.wg-mock-view .wg-mock { position: static; }

/* 切换箭头（钉在舞台左右，不参与布局） */
.wg-mock-nav {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 1;
}
.wg-mock-arrow {
    pointer-events: auto;
    cursor: pointer;
    width: 28px;
    height: 28px;
    margin: 0 6px;
    line-height: 26px;
    text-align: center;
    font-size: 20px;
    background: #ffffff;
    color: #8a92a6;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(31, 45, 80, 0.18);
    transition: color 0.15s ease, transform 0.15s var(--ease-out);
}
.wg-mock-arrow:hover { color: #f0a93b; transform: scale(1.08); }

/* 下班倒计时·简版：竖排小卡（仅状态文字 + 时间 + 图） */
.mock-xbd-mini {
    width: 150px;
    height: 150px;
    padding: 10px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
}
.mock-xbd-mini .mx-label { font-size: 14px; font-weight: 700; color: #6b7490; letter-spacing: 1px; }
.mock-xbd-mini .mx-time {
    font-size: 22px;
    font-weight: 800;
    color: #454a58;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mock-xbd-mini .mx-dog { font-size: 40px; line-height: 1; margin-top: 2px; }

/* 下班倒计时：横条小卡（左文字两行 + 右吉祥物） */
.mock-xbd-bar {
    width: 220px;
    height: 64px;
    padding: 0 14px 0 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mock-xbd-bar .mx-bar-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.mock-xbd-bar .mx-label { font-size: 12px; font-weight: 700; color: #6b7490; white-space: nowrap; opacity: 0.75; }
.mock-xbd-bar .mx-time {
    font-size: 20px;
    font-weight: 800;
    color: #454a58;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mock-xbd-bar .mx-dog { font-size: 42px; line-height: 1; }

/* 预览吉祥物用真实的打工马 PNG（替代原来的 🐶 占位 emoji），按各形态收敛尺寸；
   透明底 PNG 加 drop-shadow 贴合马形轮廓，与看板真实组件观感一致 */
.mock-xbd .mx-dog img,
.mock-xbd-mini .mx-dog img,
.mock-xbd-bar .mx-dog img {
    display: block;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(31, 45, 80, 0.18));
}
.mock-xbd .mx-dog img { height: 38px; }
.mock-xbd-mini .mx-dog img { width: 40px; }
.mock-xbd-bar .mx-dog img { height: 40px; }

/* 下班倒计时：与真实完整版一致的横卡（左倒计时 + 右 2×2 彩色统计块） */
.mock-xbd {
    width: 300px;
    padding: 16px 16px 14px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.mock-xbd .mx-left {
    width: 42%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mock-xbd .mx-label { font-size: 13px; font-weight: 700; color: #6b7490; letter-spacing: 1px; }
.mock-xbd .mx-time {
    margin-top: 4px;
    font-size: 24px;
    font-weight: 800;
    color: #454a58;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mock-xbd .mx-dog { margin-top: 2px; font-size: 38px; line-height: 1; }
.mock-xbd .mx-stats {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 7px;
}
.mock-xbd .mx-stat {
    border-radius: 10px;
    padding: 7px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mock-xbd .mx-stat b { font-size: 12px; font-weight: 700; color: #5b6270; }
.mock-xbd .mx-stat span { font-size: 10px; color: #7b8296; white-space: nowrap; }
.mock-xbd .mx-stat i { font-style: normal; font-size: 15px; font-weight: 800; color: #4b5260; }
.mock-xbd .mx-blue   { background: #e4edfd; }
.mock-xbd .mx-pink   { background: #fde4eb; }
.mock-xbd .mx-purple { background: #ece3fb; }
.mock-xbd .mx-cyan   { background: #dff3f1; }

/* ===== 日历组件预览 ===== */
/* 完整版：左大日期 + 右月历 */
.mock-cal {
    width: 300px;
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    --mc-red: #f5564d;
    color: #454a58;
}
.mock-cal .mc-info {
    width: 38%;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mock-cal .mc-month { font-size: 12px; font-weight: 700; color: #6b7490; white-space: nowrap; }
.mock-cal .mc-day {
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: #2f3640;
    margin: 1px 0 3px;
    font-variant-numeric: tabular-nums;
}
.mock-cal .mc-meta { font-size: 10px; color: #9aa3b2; white-space: nowrap; }
.mock-cal .mc-lunar { font-size: 12px; font-weight: 600; color: #454a58; margin-top: 2px; white-space: nowrap; }
.mock-cal .mc-grid { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.mock-cal .mc-head,
.mock-cal .mc-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
}
.mock-cal .mc-head span {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #6b7490;
    line-height: 1.5;
}
.mock-cal .mc-head span:nth-child(6),
.mock-cal .mc-head span:nth-child(7) { color: var(--mc-red); }
.mock-cal .mc-body { gap: 1px 0; }
.mock-cal .mc-cell {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #454a58;
    line-height: 14px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.mock-cal .mc-cell.is-out { color: #c3c9d4; font-weight: 500; }
.mock-cal .mc-cell.is-weekend { color: var(--mc-red); }
.mock-cal .mc-cell.is-today { background: var(--mc-red); color: #fff; font-weight: 800; }

/* 简版：红色日历头 + 白色卡身 */
.mock-cal-mini {
    width: 128px;
    height: 150px;
    padding: 0;
    flex-direction: column;
    --mc-red: #f5564d;
}
.mock-cal-mini .mc-mini-head {
    background: linear-gradient(135deg, #ff6a5f, var(--mc-red));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 6px 0;
}
.mock-cal-mini .mc-mini-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.mock-cal-mini .mc-mini-day {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.05;
    color: #2f3640;
    font-variant-numeric: tabular-nums;
}
.mock-cal-mini .mc-mini-meta { font-size: 10px; color: #9aa3b2; margin-top: 2px; white-space: nowrap; }
.mock-cal-mini .mc-mini-lunar { font-size: 11px; font-weight: 600; color: #454a58; white-space: nowrap; }

/* 横条：左日期右星期 */
.mock-cal-bar {
    width: 190px;
    height: 64px;
    padding: 0 16px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    --mc-red: #f5564d;
}
.mock-cal-bar .mc-bar-date {
    font-size: 22px;
    font-weight: 800;
    color: #2f3640;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mock-cal-bar .mc-bar-week { font-size: 15px; font-weight: 700; color: var(--mc-red); white-space: nowrap; }

/* ===== 翻页时钟：完整版（Fliqlo 黑底大数字 + 日期，静态预览不播放动画） ===== */
.mock-fclk {
    width: 264px;
    height: 122px;
    padding: 14px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #000000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.mock-fclk .mf-clock { display: flex; align-items: center; }
.mock-fclk .mf-group { display: flex; }
.mock-fclk .mf-tile {
    display: block;
    width: 34px;
    height: 62px;
    margin-right: 3px;
    border-radius: 8px;
    background: linear-gradient(180deg, #26272b 0%, #202124 50%, #151619 50%, #151619 100%);
    position: relative;
}
.mock-fclk .mf-tile:last-child { margin-right: 0; }
.mock-fclk .mf-tile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.85);
}
/* 圆点冒号：隐藏 mock 文字“:”，用伪元素画两个圆点 */
.mock-fclk .mf-colon {
    position: relative;
    align-self: stretch;
    width: 8px;
    margin: 0 3px;
    font-size: 0;
    line-height: 0;
}
.mock-fclk .mf-colon::before,
.mock-fclk .mf-colon::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b9bcc6;
    transform: translateX(-50%);
}
.mock-fclk .mf-colon::before { top: calc(25% - 3.5px); }
.mock-fclk .mf-colon::after { bottom: calc(25% - 3.5px); }
.mock-fclk .mf-date { font-size: 12px; font-weight: 500; letter-spacing: 2px; color: #858996; white-space: nowrap; }

/* 翻页时钟：简版（HH:MM 小翻页 + 秒 + 日期） */
.mock-fclk-mini {
    width: 132px;
    height: 150px;
    padding: 12px 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #000000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.mock-fclk-mini .mf-clock { display: flex; align-items: center; }
.mock-fclk-mini .mf-group { display: flex; }
.mock-fclk-mini .mf-tile {
    display: block;
    width: 22px;
    height: 44px;
    margin-right: 2px;
    border-radius: 6px;
    background: linear-gradient(180deg, #26272b 0%, #202124 50%, #151619 50%, #151619 100%);
    position: relative;
}
.mock-fclk-mini .mf-tile:last-child { margin-right: 0; }
.mock-fclk-mini .mf-tile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.85);
}
.mock-fclk-mini .mf-colon {
    position: relative;
    align-self: stretch;
    width: 6px;
    margin: 0 2px;
    font-size: 0;
    line-height: 0;
}
.mock-fclk-mini .mf-colon::before,
.mock-fclk-mini .mf-colon::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b9bcc6;
    transform: translateX(-50%);
}
.mock-fclk-mini .mf-colon::before { top: calc(25% - 2.5px); }
.mock-fclk-mini .mf-colon::after { bottom: calc(25% - 2.5px); }
.mock-fclk-mini .mf-sec { font-size: 11px; font-weight: 700; color: #9aa0ad; letter-spacing: 1px; }
.mock-fclk-mini .mf-date { font-size: 11px; letter-spacing: 1px; color: #858996; white-space: nowrap; }

/* 翻页时钟：横条（左时间右星期） */
.mock-fclk-bar {
    width: 190px;
    height: 64px;
    padding: 0 18px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #000000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.mock-fclk-bar .mf-bar-time {
    font-size: 22px;
    font-weight: 800;
    color: #e8eaef;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mock-fclk-bar .mf-bar-week { font-size: 15px; font-weight: 700; color: #f0a93b; white-space: nowrap; }

/* ===== 热搜榜：完整版（深色卡 + 数据源 Tab + 静态热搜列表） ===== */
.mock-hotrank {
    width: 264px;
    height: 130px;
    padding: 10px 14px 8px;
    gap: 2px;
    background: linear-gradient(150deg, #3a4156 0%, #2e3447 55%, #272d3e 100%);
    box-shadow: 0 8px 24px rgba(20, 26, 44, 0.32);
}
.mh-tabs {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mh-tab {
    position: relative;
    padding: 2px 2px 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
.mh-tab.is-active {
    background: none;
    color: #fff;
    font-weight: 700;
}
.mh-tab.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}
.mh-row {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 9px;
    height: 16px;
    padding: 0 3px;
    border-radius: 6px;
}
.mh-rank {
    flex: none;
    min-width: 13px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    font-style: normal;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.42);
    font-variant-numeric: tabular-nums;
}
.mh-row.is-top .mh-rank { color: #fff; }
.mh-word {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mh-row.is-top .mh-word { color: #fff; }
.mh-hot {
    flex: none;
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 16px;
    color: #a2aabd;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 热搜榜：简版（Top3） */
.mock-hotrank-mini {
    width: 132px;
    height: 150px;
    padding: 12px 11px 10px;
    gap: 4px;
    background: linear-gradient(150deg, #3a4156 0%, #2e3447 55%, #272d3e 100%);
    box-shadow: 0 8px 24px rgba(20, 26, 44, 0.32);
}
.mh-mini-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 1px 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.3px;
}
.mock-hotrank-mini .mh-row { height: 27px; align-items: center; gap: 7px; }
.mock-hotrank-mini .mh-rank { min-width: 14px; font-size: 13px; line-height: 1; }
.mock-hotrank-mini .mh-word { font-size: 11px; line-height: 1.35; }

/* 热搜榜：横条（单条轮播样式静态展示） */
.mock-hotrank-bar {
    width: 190px;
    height: 64px;
    padding: 0 16px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: linear-gradient(150deg, #3a4156 0%, #2e3447 55%, #272d3e 100%);
    box-shadow: 0 8px 24px rgba(20, 26, 44, 0.32);
}
.mock-hotrank-bar .mh-rank { min-width: 15px; font-size: 14px; line-height: 1; }
.mh-bar-word {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 备忘录：完整版（深蓝标题栏 + 白色便签列表） ===== */
.mock-memo {
    width: 250px;
    height: 132px;
    padding: 0;
    background: #ffffff;
}
.mm-head {
    flex: none;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, #3f4a6b 0%, #363f5e 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
}
.mm-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 18px;
}
.mm-row {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #9aa0ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #eeeef0;
}
.mm-row:last-child { border-bottom: none; }

/* ===== Tab 2：网址导航（网站库） ===== */
/* 头部：搜索框靠右上角，分类标签在下整行 */
.wg-site-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
    flex: none;
}
.wg-site-head .wg-search {
    align-self: flex-end;
    width: 300px;
    margin-bottom: 16px;
}
/* 网址导航分类条：单行滚动样式继承自 .wg-chips，这里只覆盖边距与内边距 */
.wg-site-chips {
    padding-right: 4px;
    margin-bottom: 0;
}
.wg-search {
    position: relative;
    flex: none;
}
.wg-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #a7adb9;
    pointer-events: none;
}
.wg-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 40px 12px 42px;
    border: 1.5px solid #e2e5ec;
    border-radius: 12px;
    font-size: 16px;
    color: #1f2430;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* 搜索框一键清除 */
.wg-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: #d7dce5;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    display: none;
    padding: 0;
    transition: background 0.15s ease;
}
.wg-search-clear:hover { background: #b7bcc7; }
.wg-search.has-text .wg-search-clear { display: block; }
.wg-search input:focus {
    border-color: #e2e5ec;
    box-shadow: none;
}

.wg-site-panel {
    background: #f7f8fa;
    border-radius: 16px;
    padding: 22px;
    flex: 1;
    min-height: 0;        /* 填充弹窗剩余高度，卡片多时只在面板内部滚动 */
    overflow-y: auto;
    overflow-x: hidden;   /* 卡片/按钮一律不允许横向撑出滚动条 */
}
.wg-site-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    min-width: 0;
}
.wg-site-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 14px;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    cursor: pointer;
    min-width: 0;
    transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.wg-site-card:hover {
    box-shadow: 0 10px 26px rgba(20, 24, 40, 0.12);
    transform: translateY(-2px);
    border-color: #ffe0bd;
}
.wg-site-card:active { transform: translateY(0); }
/* + 按钮收进卡片内右上角：避免外溢到滚动条槽/相邻卡片导致横向滚动与重叠 */
.wg-site-plus {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: #e8f1fe;
    color: #4a90f5;
    font-size: 19px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.7);
    box-shadow: none;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    z-index: 2;
}
.wg-site-card:hover .wg-site-plus { opacity: 1; transform: scale(1); }
.wg-site-plus:hover { background: #4a90f5; color: #fff; }
.wg-site-plus.added {
    opacity: 1;
    transform: scale(1);
    background: #34c759;
    color: #fff;
    box-shadow: none;
    font-size: 15px;
}
.wg-site-ico {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef1f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 图标撑满容器：cover 等比填充，圆角由容器统一裁剪 */
.wg-site-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wg-site-ico .wg-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    background: #ff8c1a;
}
.wg-site-txt { min-width: 0; flex: 1; padding-right: 22px; }
.wg-site-name {
    font-size: 17px;
    font-weight: 700;
    color: #2f3542;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wg-site-desc {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #9aa0ad;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Tab 3：自定义图标 ===== */
.wg-custom { max-width: 880px; margin: 0 auto; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }

/* 灰卡：包裹预览 + 图标文字 + 图标颜色 */
.wg-card-gray {
    background: #eef0f4;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wg-crow {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wg-crow-colors { align-items: flex-start; }
.wg-clabel {
    flex: none;
    width: 68px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}
.wg-cinput {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.wg-cicon {
    position: absolute;
    left: 12px;
    color: #b7bcc7;
    pointer-events: none;
    flex: none;
}
.wg-cinput input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 80px 9px 34px;
    border: 1px solid #e2e5ec;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2430;
    outline: none;
    background: #ffffff;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wg-cinput input:focus { border-color: #4a90f5; background: #f5f9ff; }
/* 获取图标按钮：无边框 + 蓝色文字，像输入框内联操作 */
.wg-fetch {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #4a90f5;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.wg-fetch:hover { background: #eef4ff; }
.wg-fetch:active { background: #d9e7ff; }
.wg-fetch:disabled { opacity: 0.55; cursor: default; }

/* 预览：两个大圆角方块并排 */
.wg-cpreviews {
    display: flex;
    gap: 22px;
    justify-content: flex-start;
    margin-bottom: 8px;
}
.wg-cprev {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.wg-cprev-box {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #f0f1f5;
    font-size: 40px;
    font-weight: 700;
    color: #1f2430;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wg-cprev.active .wg-cprev-box {
    border-color: #4a90f5;
    box-shadow: inset 0 0 0 1px rgba(74, 144, 245, 0.15);
}
.wg-cprev-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}
.wg-cprev-plus {
    font-size: 44px;
    font-weight: 300;
    color: #b7bcc7;
    line-height: 1;
}
.wg-cprev-upload.has-img .wg-cprev-plus { display: none; }
.wg-cprev-letter {
    background: #4a90f5;
    color: #fff;
}
.wg-cprev-badge {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #4a90f5;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 2;
}
.wg-cprev.active .wg-cprev-badge { display: flex; }
.wg-cprev-name {
    font-size: 13px;
    color: #7a8291;
    transition: color 0.15s ease;
}
.wg-cprev.active .wg-cprev-name { color: #4a90f5; }

/* 图标颜色：圆角方块色盘 */
.wg-colors {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}
.wg-color {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    color: #fff;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wg-color:hover { border-color: rgba(74, 144, 245, 0.4); transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); }
.wg-color.active { border-color: #4a90f5; transform: none; box-shadow: none; }
.wg-color.active .wg-color-check { display: inline; }
.wg-color-check {
    display: none;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}
.wg-color-picker {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1.5px dashed #c8cdd6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background: #fff;
    color: #4a90f5;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.wg-color-picker:hover { border-color: #4a90f5; transform: translateY(-2px); }
.wg-color-picker input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.wg-cerror {
    min-height: 20px;
    font-size: 13px;
    color: #ff4d4f;
    text-align: center;
}

/* 底部按钮：蓝色实心 / 白色描边 */
.wg-cfoot {
    display: flex;
    justify-content: center;
    gap: 14px;
}
.wg-csave,
.wg-csave-continue {
    padding: 10px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.wg-csave {
    border: 1px solid #4a90f5;
    background: #4a90f5;
    color: #fff;
}
.wg-csave:hover { filter: brightness(1.08); }
.wg-csave:active { filter: brightness(0.97); }
.wg-csave-continue {
    border: 1px solid #d7dce5;
    background: #fff;
    color: #4b5260;
}
.wg-csave-continue:hover { border-color: #4a90f5; color: #4a90f5; background: #f5f9ff; }
.wg-csave-continue:active { filter: brightness(0.97); }

/* 保存成功轻提示 */
.wg-toast {
    position: absolute;
    right: 40px;
    bottom: 86px;
    padding: 9px 18px;
    border-radius: 20px;
    background: rgba(52, 199, 89, 0.95);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(52, 199, 89, 0.35);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
.wg-toast.show { opacity: 1; transform: none; }

.wg-cerror {
    min-height: 22px;
    margin: 6px 0 0 100px;
    font-size: 14px;
    color: #ff4d4f;
}

.wg-cfoot {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 18px;
}
.wg-csave,
.wg-csave-continue {
    padding: 12px 30px;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease;
}
.wg-csave {
    background: linear-gradient(90deg, #5aa2f7, #4a90f5);
    box-shadow: 0 8px 18px rgba(74, 144, 245, 0.35);
}
.wg-csave-continue {
    background: linear-gradient(90deg, #ff7a7a, #f56565);
    box-shadow: 0 8px 18px rgba(245, 101, 101, 0.35);
}
.wg-csave:hover,
.wg-csave-continue:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ============================================================
   深色主题覆盖（跟随 <html data-theme="dark">）
   弹窗外壳/卡片/输入改为深色；预览舞台 .wg-stage 保持白色，
   其内的组件 mockup 仍是看板里白底组件的真实预览，不做反色。
   ============================================================ */
:root[data-theme="dark"] .wg-dialog {
    background: var(--auth-card);
    color: var(--auth-text);
    border: 1px solid var(--auth-line);
    box-shadow: 0 30px 80px var(--auth-shadow);
}
:root[data-theme="dark"] .wg-close { color: var(--auth-muted); }
:root[data-theme="dark"] .wg-close:hover { color: var(--auth-text); background: var(--auth-card-2); }

:root[data-theme="dark"] .wg-tabs { border-bottom-color: var(--auth-line); }
:root[data-theme="dark"] .wg-tab { color: var(--auth-muted); }
:root[data-theme="dark"] .wg-tab.active { color: #ffa64a; }
:root[data-theme="dark"] .wg-tab.active::after { background: #ff8c1a; }

:root[data-theme="dark"] .wg-chip { background: var(--auth-card-2); color: var(--auth-muted); }
:root[data-theme="dark"] .wg-chip:hover { background: rgba(255, 255, 255, 0.1); color: var(--auth-text); }
:root[data-theme="dark"] .wg-chip.active { background: #ff8c1a; color: #fff; }

:root[data-theme="dark"] .wg-card { background: var(--auth-card-2); }
:root[data-theme="dark"] .wg-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .wg-card-title { color: var(--auth-text); }
:root[data-theme="dark"] .wg-card-desc { color: var(--auth-muted); }

:root[data-theme="dark"] .wg-dot { background: rgba(255, 255, 255, 0.18); }
:root[data-theme="dark"] .wg-dot.on { background: #ff8c1a; }
:root[data-theme="dark"] .wg-empty { color: var(--auth-muted); }

/* 预览舞台保持白底，轮播箭头维持白底浮层 */
:root[data-theme="dark"] .wg-mock-arrow { background: #fff; }

/* 网址导航面板 */
:root[data-theme="dark"] .wg-site-panel { background: var(--auth-card-2); }
:root[data-theme="dark"] .wg-site-card {
    background: var(--auth-card);
    border-color: var(--auth-line);
}
:root[data-theme="dark"] .wg-site-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 140, 26, 0.5);
}
:root[data-theme="dark"] .wg-site-name { color: var(--auth-text); }
:root[data-theme="dark"] .wg-site-desc { color: var(--auth-muted); }
:root[data-theme="dark"] .wg-site-ico { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .wg-search input,
:root[data-theme="dark"] .wg-cinput input {
    background: var(--auth-bg);
    border-color: var(--auth-line);
    color: var(--auth-text);
}
:root[data-theme="dark"] .wg-search input:focus,
:root[data-theme="dark"] .wg-cinput input:focus {
    border-color: #ffb066;
    box-shadow: 0 0 0 3px rgba(255, 140, 26, 0.18);
}
:root[data-theme="dark"] .wg-search svg { color: var(--auth-muted); }
:root[data-theme="dark"] .wg-search-clear { background: #4a5266; }
:root[data-theme="dark"] .wg-search-clear:hover { background: #5b6478; }

/* 自定义图标表单 */
:root[data-theme="dark"] .wg-card-gray {
    background: var(--auth-card-2);
}
:root[data-theme="dark"] .wg-clabel { color: var(--auth-muted); }
:root[data-theme="dark"] .wg-cicon { color: var(--auth-muted); }
:root[data-theme="dark"] .wg-cinput input {
    background: var(--auth-card);
    border-color: var(--auth-line);
    color: var(--auth-text);
}
:root[data-theme="dark"] .wg-cinput input:focus { border-color: #4a90f5; }
:root[data-theme="dark"] .wg-fetch {
    background: var(--auth-card);
    color: var(--auth-muted);
}
:root[data-theme="dark"] .wg-fetch:hover { background: var(--auth-card-2); color: var(--auth-text); }
:root[data-theme="dark"] .wg-cprev-box {
    background: var(--auth-card);
}
:root[data-theme="dark"] .wg-cprev-letter { background: #4a90f5; }
:root[data-theme="dark"] .wg-color-picker {
    background: var(--auth-card);
    border-color: var(--auth-line);
}
:root[data-theme="dark"] .wg-color {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .wg-csave {
    background: #4a90f5;
    border-color: #4a90f5;
}
:root[data-theme="dark"] .wg-csave:hover { background: #3f86e0; }
:root[data-theme="dark"] .wg-csave-continue {
    background: transparent;
    border-color: var(--auth-line);
    color: var(--auth-muted);
}
:root[data-theme="dark"] .wg-csave-continue:hover { border-color: #4a90f5; color: #7cb0ff; }
:root[data-theme="dark"] .wg-cerror { color: #ff7a7c; }

/* 触屏/窄屏设备没有 hover：添加按钮常显 */
@media (hover: none), (max-width: 760px) {
    .wg-site-plus { opacity: 1; transform: scale(1); }
}
@media (max-width: 980px) {
    .wg-site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .wg-dialog { padding: 20px 18px 26px; }
    .wg-tab { font-size: 17px; }
    .wg-grid { grid-template-columns: 1fr; gap: 18px; }
    .wg-site-grid { grid-template-columns: 1fr; }
    .wg-site-head .wg-search { align-self: stretch; width: 100%; }
    .wg-crow { flex-wrap: wrap; }
    .wg-clabel { width: auto; text-align: left; }
    .wg-section { padding: 16px; }
    .wg-toast { right: 20px; bottom: 76px; }
}