/* ============================================================
   Liein Dashboard —— 2026-09-10 重做
   1) 背景：原来那张海底城市插画细节太密，透过玻璃卡片整屏都在打架，
      换成一层安静的深蓝渐变。想换回插画：settings.yaml 里放开 background 那段。
   2) 选择器修正：旧版 CSS 全部挂在 #page_container 上，而这版 homepage
      根本没有这个元素 —— 那些规则一直是空转的。改成真实的 li.service。
   ============================================================ */

/* ---------- 背景 ----------
   注意 #__next 会被涂成不透明的 slate(30,41,59)，盖住 body，必须清掉 */
html,
body {
    background-color: #080D1A !important;
    background-image:
        radial-gradient(1250px 760px at 8% -14%,  rgba(72, 112, 205, 0.42), transparent 60%),
        radial-gradient(1050px 680px at 96% 2%,   rgba(26, 132, 150, 0.28), transparent 62%),
        radial-gradient(1000px 940px at 54% 120%, rgba(56, 70, 140, 0.32), transparent 64%),
        radial-gradient(700px 420px at 50% -6%,   rgba(150, 180, 255, 0.09), transparent 70%),
        linear-gradient(166deg, #0D1730 0%, #090F1E 46%, #05080F 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

#__next,
#page_wrapper,
#inner_wrapper {
    background-color: transparent !important;
    background-image: none !important;
}

/* 四角轻微压暗，把视线收回中间 */
#page_wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(120% 100% at 50% 38%, transparent 58%, rgba(0, 0, 0, 0.40) 100%);
}

/* ---------- 服务卡片：真实结构是 li.service > div ---------- */
ul.services-list > li.service > div {
    background-color: rgba(19, 27, 45, 0.58) !important;
    border: 1px solid rgba(130, 155, 200, 0.10) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    transition: background-color .25s ease, border-color .25s ease,
                transform .25s ease, box-shadow .25s ease !important;
}

ul.services-list > li.service > div:hover {
    background-color: rgba(28, 40, 65, 0.76) !important;
    border-color: rgba(140, 175, 230, 0.30) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}

/* 服务名和描述 */
.service-name {
    letter-spacing: .01em;
}
.service-description {
    opacity: .82;
}

/* ---------- 分组标题 ---------- */
h2.service-group-name {
    letter-spacing: .02em;
    opacity: .92;
}

/* ---------- 顶部信息条与搜索框 ---------- */
#information-widgets > div,
#search-container input {
    background-color: rgba(19, 27, 45, 0.50) !important;
    border: 1px solid rgba(130, 155, 200, 0.10) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* 数字对齐，看资源占用时不跳动 */
#information-widgets,
#information-widgets * {
    font-variant-numeric: tabular-nums;
}

/* ---------- 书签 ---------- */
ul.bookmark-group li > a {
    background-color: rgba(19, 27, 45, 0.48) !important;
    border: 1px solid rgba(130, 155, 200, 0.09) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

ul.bookmark-group li > a:hover {
    background-color: rgba(28, 40, 65, 0.68) !important;
    border-color: rgba(140, 175, 230, 0.24) !important;
    transform: translateY(-1px);
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(140, 165, 210, 0.28);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 165, 210, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    ul.services-list > li.service > div,
    ul.bookmark-group li > a {
        transition: none !important;
    }
}