/* ========================================
   myLink 自定义外挂标签
   ======================================== */

.my-link {
    display: grid !important;
    grid-template-rows: 28px 1fr !important;
    grid-template-columns: 80px 1fr !important;
    height: 100px !important;
    position: relative !important;
    border: var(--aria-border, 1px solid #c9c9c9) !important;
    background: var(--card-bg, #f1f3f8) !important;
    border-radius: 10px !important;
    margin: 10px !important;
    padding: 5px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

/* ===== 上区域：提示标签 ===== */
.my-link .my-link-tip {
    font-size: 0.6rem !important;
    color: var(--aria-light-fontcolor, #828282) !important;
    grid-row: 1 !important;
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: end !important;
    padding-left: 8px !important;
    padding-bottom: 2px !important;
    transition: color 0.3s ease !important;
    z-index: 2 !important;
}

/* ===== 分割线 ===== */
.my-link .my-link-divider {
    grid-row: 1 !important;
    grid-column: 2 !important;
    align-self: end !important;
    height: 1px !important;
    background: var(--aria-border, #c9c9c9) !important;
    margin: 0 30px 0 8px !important;
    transition: background 0.3s ease !important;
}

/* ===== 下区域：图标 ===== */
.my-link .my-link-img {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--aria-border, #c9c9c9) !important;
    transition: border-color 0.3s ease !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    background: #ffffff !important;
}

/* ===== 下区域：内容容器（紧挨分割线） ===== */
.my-link .my-link-content {
    grid-row: 2 !important;
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 30px 0 8px !important;
    padding-top: 2px !important;  /* 👈 紧挨分割线 */
}

/* ===== 顶部行：标题 + 副标题 ===== */
.my-link .my-link-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* ===== 标题 ===== */
.my-link .my-link-title {
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: color 0.3s ease !important;
    color: #1c1c1c !important;
}

/* ===== 副标题 ===== */
.my-link .my-link-subtitle {
    font-size: 0.8rem !important;
    color: var(--aria-light-fontcolor, #828282) !important;
    transition: color 0.3s ease !important;
}

/* ===== 信号行（单独一行，靠右） ===== */
.my-link .my-link-signal-row {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 1px !important;
}

/* ===== 信号图标 ===== */
.my-link .my-link-signal {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.65rem !important;
}

.my-link .my-link-signal i {
    display: inline-block !important;
}

/* ===== 右侧箭头 ===== */
.my-link::after {
    content: "" !important;
    background-color: var(--aria-fontcolor, #4c4948) !important;
    width: 14px !important;
    height: 14px !important;
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
    mask-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzI1Mjk1MDA0Njc5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2NTciIGlkPSJteF9uXzE3MjUyOTUwMDQ2NzkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTgxNi42NTMwOTMgNDY5LjU0NDA0OWMtMS40OTUwNS0xLjQ5NTA1LTMuMDYwNzA5LTIuODc0NDY3LTQuNjc2NTA5LTQuMTU5NzRMNDI4LjQ3NTE5IDc5Ljg5NTY1NWMtMjEuMzUxMjg0LTIxLjM1MDI2MS01NS45Njc2ODYtMjEuMzUwMjYxLTc3LjMxNzk0NiAwLTIxLjM1MDI2MSAyMS4zNTEyODQtMjEuMzUwMjYxIDU1Ljk2NjY2MyAwIDc3LjMxNzk0NmwzNDkuMjU5NTIyIDM1MS4yNDc4MDZMMzQzLjY1NjQwOSA4NjQuODgzMDQ5Yy0yMS4zNTAyNjEgMjEuMzUxMjg0LTIxLjM1MDI2MSA1NS45NjY2NjMgMCA3Ny4zMTg5NyAyMS4zNTAyNjEgMjEuMzUwMjYxIDU1Ljk2NjY2MyAyMS4zNTAyNjEgNzcuMzE3OTQ2IDBsMzkwLjk5ODEzNS0zOTAuNjYxNDY4YzEuNjE2ODI0LTEuMjg2Mjk2IDMuMTgzNTA2LTIuNjY0Njg5IDQuNjc5NTc5LTQuMTYwNzYzIDEwLjc0MDYyMi0xMC43NDA2MjIgMTYuMDczMDctMjQuODM5NzM1IDE2LjAwNjU1Ni0zOC45MTczNThDODMyLjcyNjE2NCA0OTQuMzgyNzYgODI3LjM5MzcxNSA0ODAuMjg0NjcxIDgxNi42NTMwOTMgNDY5LjU0NDA0OXoiIGZpbGw9InZhcigtLWFyaWEtZm9udGNvbG9yKSIgcC1pZD0iMTY1OCI+PC9wYXRoPjwvc3ZnPg==") !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
    transition: all 0.3s ease !important;
}

.my-link:hover::after {
    transform: translateY(-50%) translateX(4px) !important;
    background-color: #ffffff !important;
}

/* ========================================
   悬停效果
   ======================================== */

.my-link:hover {
    background: var(--main-color, #49B1F5) !important;
    border-color: var(--main-color, #49B1F5) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10),
                0 0 20px var(--main-color, #49B1F5) !important;
}

.my-link:hover .my-link-title,
.my-link:hover .my-link-subtitle,
.my-link:hover .my-link-tip,
.my-link:hover .my-link-signal i {
    color: #ffffff !important;
}

.my-link:hover .my-link-divider {
    background: rgba(255, 255, 255, 0.3) !important;
}

.my-link:hover .my-link-img {
    border-color: var(--main-color, #49B1F5) !important;
    background: var(--main-color, #49B1F5) !important;
}

/* ========================================
   点击/激活光晕
   ======================================== */

.my-link:active {
    background: var(--main-color, #49B1F5) !important;
    border-color: var(--main-color, #49B1F5) !important;
    box-shadow: 0 0 20px var(--main-color, #49B1F5),
                0 0 40px var(--main-color, #49B1F5),
                0 0 60px var(--main-color, #49B1F5) !important;
    transform: scale(0.98) !important;
}

.my-link:active .my-link-title,
.my-link:active .my-link-subtitle,
.my-link:active .my-link-tip,
.my-link:active .my-link-signal i {
    color: #ffffff !important;
}

/* ========================================
   深色模式
   ======================================== */

[data-theme="dark"] {
    .my-link {
        background: var(--card-bg, #2c2c2c) !important;
        border-color: var(--aria-border, #8a8a8a) !important;
    }

    .my-link .my-link-title {
        color: #ffffffb3 !important;
    }

    .my-link .my-link-subtitle,
    .my-link .my-link-tip {
        color: var(--aria-light-fontcolor, #828282) !important;
    }

    .my-link:hover {
        background: var(--main-color, #49B1F5) !important;
    }

    .my-link:hover .my-link-title,
    .my-link:hover .my-link-subtitle,
    .my-link:hover .my-link-tip,
    .my-link:hover .my-link-signal i {
        color: #ffffff !important;
    }

    .my-link:hover .my-link-img {
        border-color: var(--main-color, #49B1F5) !important;
        background: var(--main-color, #49B1F5) !important;
    }
}

/* ========================================
   手机端适配
   ======================================== */

@media (max-width: 768px) {
    .my-link {
        height: 85px !important;
        padding: 4px !important;
    }

    .my-link .my-link-img {
        width: 42px !important;
        height: 42px !important;
    }

    .my-link .my-link-title {
        font-size: 0.85rem !important;
    }

    .my-link .my-link-subtitle {
        font-size: 0.6rem !important;
    }

    .my-link .my-link-tip {
        font-size: 0.5rem !important;
        padding-left: 4px !important;
    }

    .my-link .my-link-content {
        padding: 0 20px 0 8px !important;
        padding-top: 2px !important;
    }

    .my-link::after {
        width: 12px !important;
        height: 12px !important;
        right: 10px !important;
    }

    /* ===== 分割线 ===== */
    .my-link .my-link-divider {
        margin: 0 25px 0 5px !important;
    }
}