/* 自定义黑白主题 */
:root {
  --custom-bg-color: #121212;
  --custom-text-color: #f5f5f5;
  --custom-border-color: #444;
  --custom-accent-color: #888;
  --custom-hover-color: #666;
  --custom-card-bg: #1e1e1e;
  --custom-header-bg: #000;
  --custom-footer-bg: #000;
}

body {
  background-color: var(--custom-bg-color) !important;
  color: var(--custom-text-color) !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navbar, .header, header {
  background-color: var(--custom-header-bg) !important;
  border-bottom: 1px solid var(--custom-border-color) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.footer, footer {
  background-color: var(--custom-footer-bg) !important;
  border-top: 1px solid var(--custom-border-color) !important;
}

.card, .box, .container-box {
  background-color: var(--custom-card-bg) !important;
  border: 1px solid var(--custom-border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 20px !important;
  padding: 15px !important;
}

.btn-primary {
  background-color: #444 !important;
  border-color: #666 !important;
}

.btn-primary:hover {
  background-color: #555 !important;
  border-color: #777 !important;
}

a {
  color: #aaa !important;
  text-decoration: none !important;
}

a:hover {
  color: #ccc !important;
  text-decoration: underline !important;
}

table {
  border-color: var(--custom-border-color) !important;
}

th {
  background-color: #222 !important;
  color: var(--custom-text-color) !important;
}

tr:nth-child(even) {
  background-color: #1a1a1a !important;
}

tr:nth-child(odd) {
  background-color: #252525 !important;
}

/* 自定义边框和阴影 */
.custom-border {
  border: 2px solid var(--custom-border-color) !important;
  border-radius: 8px !important;
  padding: 15px !important;
  margin: 10px 0 !important;
}

.custom-shadow {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}

/* 导航栏样式 */
.nav-link {
  color: #bbb !important;
  font-weight: bold !important;
}

.nav-link:hover {
  color: white !important;
}

.nav-link.active, .header-links a.active {
  background-color: var(--custom-accent-color) !important;
  color: #ffffff !important;
  font-weight: bold !important;
  border-radius: 4px !important;
}

/* 按钮样式 */
.btn {
  border-radius: 4px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
  color: white !important;
  font-weight: bold !important;
  margin-bottom: 15px !important;
}

/* 输入框样式 */
input, select, textarea {
  background-color: #333 !important;
  border: 1px solid #555 !important;
  color: white !important;
  border-radius: 4px !important;
}

input:focus, select:focus, textarea:focus {
  background-color: #444 !important;
  border-color: #777 !important;
  box-shadow: 0 0 0 0.2rem rgba(100, 100, 100, 0.25) !important;
}


/* 小屏幕时容器内边距调整 */
@media (max-width: 768px) {
    header .container {
        padding: 10px 15px !important;
    }
}

/* 响应式 Header 布局：移动端或缩放时，logo与刷新键同排，菜单在第二行 */
@media (max-width: 1024px) {
    header .container {
        flex-wrap: wrap; /* 允许换行，使菜单可换至第二行 */
    }
}

@media (max-width: 768px) {
    /* 恢复上一版：第一行 logo 绝对居中 + 刷新键右侧；第二行菜单居中且加间距 */
    header .container {
        position: relative !important;
        flex-wrap: wrap !important;
        padding-top: 44px !important; /* 留出第一行（logo+刷新）空间 */
    }

    /* 移动端下 logo 居中于第一行（绝对定位） */
    header .logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 10px !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;                /* 强制不换行 */
        font-size: clamp(14px, 4.6vw, 26px) !important; /* 自适应缩小，避免两行 */
        line-height: 1.1 !important;                  /* 紧凑行高 */
    }

    /* 刷新按钮固定在第一行右侧，并缩小尺寸 */
    #refreshButton,
    #refreshButton.theme-toggle,
    .theme-toggle {
        position: absolute !important;
        right: 15px !important;
        top: 10px !important;
        margin-left: 0 !important;
        padding: 0 8px !important; /* 缩小按钮整体尺寸 */
        height: auto !important;
    }
    #refreshButton i {
        font-size: 14px !important; /* 刷新键图标缩小 */
    }

    /* 将菜单移至第二行并横向布局，适度缩小 */
    header .header-links {
        order: 2;               /* 排在第二行 */
        flex-basis: 100%;       /* 占满整行宽度 */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center; /* 菜单居中 */
        flex-wrap: wrap;        /* 菜单项可换行 */
        margin-top: 20px;       /* 增加 logo 与菜单之间的距离 */
        gap: 8px;               /* 行内间距 */
        margin-left: 0 !important; /* 覆盖全局的左侧间距，保证居中 */
    }

    header .header-links .nav-link {
        font-size: 14px !important;
        padding: 4px 8px !important;
        margin-right: 8px !important;
    }

    /* Token行：当空间不足时，让标签整体换到第二行（仅移动端生效） */
    .token-symbol-row {
        display: flex;
        flex-wrap: wrap;
        column-gap: 4px;
        row-gap: 2px;
        white-space: normal;
    }
    .token-symbol-row .token-link {
        white-space: nowrap;
        flex-shrink: 1;
    }
    /* 关键：让标签块单独占一整行（第二行开始），并允许内部继续换行 */
    .token-symbol-row .listing-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        width: 100%;
        flex-basis: 100%;
        margin-top: 2px;
    }
}

@media (max-width: 480px) {
    header .header-links .nav-link {
        font-size: 12px !important;
        padding: 3px 6px !important;
        margin-right: 6px !important;
    }
}

/* Header细节调整：logo居中、刷新键小一点、增加logo与菜单间距（仅桌面端） */
@media (min-width: 769px) {
    header .logo {
        margin: 0 auto !important; /* 使logo在容器中居中 */
    }

    header .header-links {
        margin-left: 28px !important; /* 增加logo与菜单之间距离 */
    }

    #refreshButton i {
        font-size: 14px !important; /* 刷新键图标缩小 */
    }

    #refreshButton {
        padding: 0 8px !important; /* 缩小按钮整体尺寸 */
    }
}