/* ==============================
   1. 基础变量（色彩与布局）
============================== */
:root {
    --bs-primary-rgb: 67, 179, 82;

    /* 通用尺寸 */
    --item-width: 280px;
    --item-height: 80px;
    --grid-spacing: 1rem;
    --item-padding: 0.85rem;

    /* 亮色主题默认值 */
    --color-bg: #f5f7fb;
    --color-card: #ffffff;
    --color-card-soft: #f0f2f8;
    --color-border: rgba(15, 23, 42, 0.06);
    --color-border-strong: rgba(15, 23, 42, 0.12);
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-accent-soft: rgba(85, 186, 99, 0.14);
}

/* 深色主题覆盖变量，通过 body.dark 控制 */
body.dark {
    --color-bg: #05070b;
    --color-card: #0e1118;
    --color-card-soft: #151824;
    --color-border: rgba(148, 163, 184, 0.16);
    --color-border-strong: rgba(148, 163, 184, 0.26);
    --color-text: #e5e7eb;
    --color-text-muted: #94a3b8;
    --color-accent-soft: rgba(85, 186, 99, 0.22);
}

/* ==============================
   2. 页面与基础元素
============================== */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
}

/* 项目名称 */
.item-name[data-v-f71ca08e] {
   font-weight: 700;
   padding-left: 10px;
   padding-right: 6px;
   margin: 2px;
   margin-right: auto;
   color: inherit;
}

/* 链接样式及动画效果 */
a {
   text-decoration: none;
   position: relative;
   padding-left: 12px;
   z-index: 1;
   display: inline-block;
   transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
   color: inherit;
}

a:not(.btn-info)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 46%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    margin: 2px;
    background-color: #55ba63;
    transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.25s;
    border-radius: 999px;
    z-index: -1;
}

/* Hover效果 */
/* 白天模式 */
a:hover,
.p-2:hover {
   color: #ffffff !important;
}

/* 夜间模式 */
.dark a:hover,
.dark .p-2:hover {
   color: #000000 !important;
}

/* 内边距样式（类似文字按钮） */
.p-2 {
   padding-left: 0px;
   padding-right: 10px;
   font-weight: 700;
   margin: 6px;
}

/* 链接悬停动画 */
a:hover::before {
   width: 100%;
   left: 0;
   border-radius: 999px;
}

/* ==============================
   3. 响应式布局
============================== */
@media (max-width: 768px) {
    .item {
        width: 100%;
        margin-right: 0;
    }
    
    :root {
        --item-height: 70px;
    }
    
    .container {
        padding: 0 0.5rem;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .item {
        width: calc(50% - var(--grid-spacing));
    }
}

@media (min-width: 1201px) {
    .item {
        width: calc(33.333% - var(--grid-spacing));
    }
}

@media (min-width: 1600px) {
    .item {
        width: calc(25% - var(--grid-spacing));
    }
    
    .item-name {
        font-size: 1.25em;
        font-weight: 700;
        letter-spacing: 0.8px;
    }
    
    .wrap > .d-flex {
        font-size: 0.9em;
        font-weight: 500;
        letter-spacing: 0.8px;
    }
}

/* ==============================
   4. 布局组件
============================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 监控列表布局 */
.monitor-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--grid-spacing) !important;
    justify-content: flex-start;
    width: 100%;
    padding: 0.5rem;
}

/* ==============================
   5. 卡片组件
============================== */
.item {
    position: relative;
    width: calc(33.333% - var(--grid-spacing));
    min-width: 280px;

    /* 使用 min-height + auto，防止进度条被挤出卡片 */
    min-height: var(--item-height);
    height: auto;

    padding: var(--item-padding) 1rem !important;
    border-radius: 18px;
    margin-bottom: var(--grid-spacing);

    background: radial-gradient(circle at top left,
                rgba(85, 186, 99, 0.09) 0,
                var(--color-card) 55%);
    border: 1px solid var(--color-border);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.02);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

/* 浅色主题的阴影稍微弱一些 */
body:not(.dark) .item {
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.7);
}

.item:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-strong);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.item > .row {
    flex-direction: row;
    width: 100%;
    margin: 0;
    align-items: center;
}

.row > div {
    width: auto;
    margin-right: 1rem;
}

/* ==============================
   6. 进度条组件
============================== */
/* 外层容器：更长、居中（不改原来的绿色） */
.hp-bar-big {
    width: 78%;                 /* 进度条更长 */
    max-width: 520px;
    min-width: 220px;

    margin: 0.7rem auto 0.1rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background-color: var(--color-accent-soft);
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

/* 正常状态：小柱子仍然使用原来的绿色 */
.hp-bar-big .beat[data-v-636dc6a9] {
    flex: 0 0 6px;
    height: 18px;
    border-radius: 999px;
    background-color: #55ba63;                     /* 保留原色 */
    box-shadow: 0 0 6px rgba(85, 186, 99, 0.9);
    transform-origin: bottom;
    animation: hp-pulse 2.2s ease-in-out infinite;
}

/* 动画错峰 */
.hp-bar-big .beat[data-v-636dc6a9]:nth-child(3n) {
    animation-delay: 0.1s;
}
.hp-bar-big .beat[data-v-636dc6a9]:nth-child(3n + 1) {
    animation-delay: 0.25s;
}
.hp-bar-big .beat[data-v-636dc6a9]:nth-child(3n + 2) {
    animation-delay: 0.4s;
}

@keyframes hp-pulse {
    0%, 60%, 100% {
        transform: scaleY(1);
        opacity: 0.9;
    }
    30% {
        transform: scaleY(1.25);
        opacity: 1;
    }
}

/* 故障状态：外层加 .is-error，柱子改为红色 */
.hp-bar-big.is-error .beat[data-v-636dc6a9] {
    background-color: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.95);
}

/* ==============================
   7. 徽章 & 标签 & 状态
============================== */
/* 徽章定位（不改原颜色） */
body:not(.mobile) .badge,
body.mobile .badge {
    position: absolute;
    top: 50%;
    right: var(--item-padding);
    transform: translateY(-50%);
}

/* 放大徽章/标签字体，但不覆盖颜色 */
.badge,
.tag-text[data-v-24636654] {
    font-size: 0.95rem;
    font-weight: 600;
}

/* 分组标题 */
.group-title span[data-v-f71ca08e] {
    display: inline-block;
    min-width: 70px;
    margin: 0 auto;
    text-align: center;
}

/* 标题 & 信息按钮 */
h2,
.h2,
.btn-info {
    margin-bottom: 0;
    font-weight: 600;
    color: #ffffff;
    border: 1px solid var(--color-border-strong);
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
    border-radius: 999px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 8%;
}

/* 深色主题：标题按钮文字改成黑色（保持原逻辑） */
.dark h2,
.dark .h2,
.dark .btn-info,
.dark .refresh-info[data-v-b8247e57] {
    color: #000000;
}

/* 状态指示器 */
.overall-status {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.35rem 0.85rem !important;
    background-color: var(--color-card-soft);
    color: var(--color-text);
}

.overall-status[data-v-b8247e57] {
    font-weight: 700;
    font-size: 0.9rem;
}

/* 维护状态背景色 */
.bg-maintenance {
    background-color: #4962bd !important;
}

/* 刷新组件 */
.refresh-info[data-v-b8247e57] {
    font-family: math;
    opacity: 0.95;
    color: #ffffff;
    border: 1px solid var(--color-border-strong);
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
    border-radius: 999px;
    padding: 6px 10px;
    display: inline-block;
    text-align: center;
    min-width: 4%;
}

/* ==============================
   8. 其他 UI 细节
============================== */
.rounded-pill {
    border-radius: 999px !important;
}

.shadow-box {
    box-shadow: 0 15px 70px rgba(15, 23, 42, 0.18);
    padding: 0;
    border-radius: 18px;
}

.dark .shadow-box {
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.9);
}

/* 间距微调 */
.mb-4,
.mb-5 {
    margin-bottom: 0.5rem !important;
}

.mt-4 {
    margin-top: 0.5rem !important;
}

.mt-5 {
    margin-top: 0 !important;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}