.mb-3 p {
        display: inline;
        float: right; /* 右浮动 */
        margin: 0; /* 移除默认外边距 */
    }

/* 默认：浅色模式样式 */
html, body {
    background-color: #fff;
    color: #212529;
}

.container {
    max-width: 1200px;
    margin: 1rem auto;
}

/* 基本容器盒 */
.fixed-box {
    border: 1px solid #dee2e6;
    padding: 6px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* 滚动容器区域 */
.scrollable-box {
    height: 400px;
}

/* 可滚动内容区域 */
.scrollable-content {
    flex: 1;
    overflow-y: auto;
}

/* 缩小表单控件 */
.small-input {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    width: 100%;
    max-width: 100px !important;
}

/* 表单样式 */
.form-control,
.form-select {
    font-size: 0.85rem;  /* 缩小字体 */
    padding: 0.3rem 0.5rem;  /* 缩小内边距 */
    /*max-width: 120px; !* 最大宽度 *!*/
    background-color: #fff;
    border-color: #ced4da;
    color: #212529;
}

.form-control:focus,
.form-select:focus {
    border-color: #80bdff;
    box-shadow: none;
}

/* 表格样式 */
.table {
    background-color: #fff;
    color: #212529;
}

.table th, .table td {
    border-color: #dee2e6;
}

/* 结果卡片 */
.result-card {
    background-color: #f8f9fa;
    width: 100%;
    height: auto;
}

/* 成功按钮样式 */
.btn-success {
    background-color: #28a745;
    border-color: #218838;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* 自动补全列表 */
.input-group-dynamic {
    position: relative;
    margin-top: 10px;
}

.autocomplete-list {
    position: absolute;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
    display: none;
    font-size: 0.9em;
}

.autocomplete-item {
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.autocomplete-item:hover {
    background: #f8f9fa;
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    html, body {
        background-color: #121212;
        color: #e0e0e0;
    }

    .fixed-box {
        border-color: #444;
        background: #1e1e1e;
    }

    .scrollable-box {
        background-color: #1e1e1e;
    }

    .form-control,
    .form-select {
        background-color: #2b2b2b;
        border-color: #444;
        color: #e0e0e0;
    }

    .form-control:focus,
    .form-select:focus,
    input[type="text"]:focus,
    select:focus {
        background-color: #333 !important;
        border-color: #666 !important;
        color: #e0e0e0 !important;
        box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5) !important;
    }

    .table {
        background-color: #1e1e1e;
        color: #e0e0e0;
    }

    .table th, .table td {
        border-color: #444;
    }

    .btn-success {
        background-color: #388e3c;
        border-color: #2e7d32;
    }

    .btn-success:hover {
        background-color: #2e7d32;
        border-color: #276c2c;
    }

    .autocomplete-list {
        background: #2b2b2b;
        border: 1px solid #444;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .autocomplete-item {
        color: #e0e0e0;
    }

    .autocomplete-item:hover {
        background: #3a3a3a;
    }

    .result-card {
        background-color: #2d2d2d;
    }

    .result-card .text-muted {
        color: #9e9e9e !important;
    }
}

/* 移动端优化样式 */
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }

    .fixed-box {
        padding: 10px;
    }

    .scrollable-box {
        height: auto;
        max-height: 300px;
    }

    .scrollable-content {
        max-height: 260px;
        overflow-y: auto;
    }

    .small-input {
        width: 100%;
        max-width: 100%;
        margin-bottom: 8px;
    }

    .form-control,
    .form-select {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .autocomplete-list {
        font-size: 1rem;
    }

    #customModal {
        width: 95%;
        max-width: none;
    }
}