.widget-wrap {
    // 玻璃层令牌（方案 §6.2）：深底 + 模糊 + 描边 + 投影，前景走 token，不再随壁纸漂移
    --wg-glass-bg: rgba(15, 23, 42, 0.42);
    --wg-glass-border: rgba(255, 255, 255, 0.18);
    --wg-glass-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
    --wg-fg: rgba(255, 255, 255, 0.94);
    --wg-fg-dim: rgba(255, 255, 255, 0.66);
    --wg-fg-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

    width: 380px;
    min-height: 200px;
    z-index: 100;
    border-radius: 5px;
    background: var(--wg-glass-bg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--wg-glass-border);
    box-shadow: var(--wg-glass-shadow);
    .widget-header {
        display: flex;
        height: 48px;
        color: var(--wg-fg-dim);
        text-shadow: var(--wg-fg-shadow);
        .widget-header-drag {
            flex: 2 auto;
            cursor: move;
        }
        .operate-btn {
            padding: 12px;
            height: 38px;
            svg {
                cursor: pointer;
                width: 24px;
                flex-shrink: 1;
                color: var(--wg-fg-dim);
            }
            &:hover svg {
                color: var(--wg-fg);
            }
        }
        .operate-btn:nth-child(2) {
            padding-left: 0;
        }
    }

    .widget-body {
        padding: 0 4px 18px;
        height: calc(100% - 48px);
        .widget-item {
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.95);
            // 内置组件的浮层（如课表班级切换下拉）需溢出卡片，故不裁切；
            // 卡片圆角由自身背景维持，疑似溢出子元素（iframe）自带底部圆角。
            overflow: visible;
            margin: 18px 14px 0 14px;
            &:first-child {
                margin-top: 0;
            }
            .no-data {
                min-height: 90px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #b9c2cc;
                font-size: 13px;
            }
        }

        .widget-app-header {
            height: 46px;
            display: flex;
            padding: 0 16px;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e9e9e9;
            // 卡头浅灰底（原版观感；合成色曾随壁纸漂移，这里显式钉死）
            background: #f7f8f9;
            // .widget-item 已改 overflow:visible，卡头底色的顶部圆角需自补
            border-radius: 6px 6px 0 0;
            color: #344449;
            font-weight: 700;
            font-size: 16px;
            svg {
                cursor: pointer;
            }
            // 右区：内置组件 header 控件挂载点 + 关闭按钮（.widget-app-header 是 space-between，右区整体靠右）
            .widget-header-right {
                display: flex;
                align-items: center;
                gap: 6px;
                min-width: 0;
            }
            .widget-header-extra {
                display: flex;
                align-items: center;
            }
        }
        iframe {
            width: 100%;
            display: block;
            min-height: 150px;
            // .widget-item 已改为 overflow:visible，页面片段的底部圆角自行补齐
            border-radius: 0 0 6px 6px;
        }
    }

    // 拖拽态翻白（沿用旧版白色语义：面板与 header 一并提亮，模糊略加强）。
    // ⚠️ 该元素同时挂着 .widget-wrap，--wg-fg* 是给深色玻璃配的白字，
    // 翻白后必须同步反转为深色，否则重演「白底压白字 / 浅灰图标不可见」。
    &__drag {
        --wg-glass-bg: rgba(255, 255, 255, 0.6);
        --wg-glass-border: rgba(15, 23, 42, 0.08);
        --wg-glass-shadow: 0 14px 44px rgba(15, 23, 42, 0.2);
        --wg-fg: #1f2d3d;
        --wg-fg-dim: rgba(31, 45, 61, 0.62);
        --wg-fg-shadow: none;

        background: var(--wg-glass-bg);
        backdrop-filter: blur(22px) saturate(150%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        box-shadow: var(--wg-glass-shadow);

        .widget-header {
            background: rgba(255, 255, 255, 0.5);
        }
    }
}

.widget-empty-box {
    height: calc(100% - 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--wg-fg);
    text-shadow: var(--wg-fg-shadow);

    svg {
        color: var(--wg-fg-dim);
    }

    h4 {
        font-weight: 500;
        margin-top: 20px;
    }
}