/* 手动设置字体链接 */
@font-face {
    font-family: 'MapleMonoNL';
    src: url('/static/maple-min.ttf');
}

* {
    font-family: MapleMonoNL, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: MapleMonoNL, sans-serif;
    /*background: url('https://images.524228.xyz/?random=1') no-repeat center center fixed;*/
    background: url('/static/cdn-image.jpg') no-repeat center center fixed;
    background-size: cover;
}

.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.form-container {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 500px;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.input-group {
    flex: 1;
    width: 100%;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.buttons {
    display: flex;
    gap: 20px;
    /*justify-content: space-between;*/
    align-items: center;
}

.RoyalBlue-btn {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    text-align: center;
}

.RoyalBlue-btn:hover {
    background-color: #0056b3;
}

.LimeGreen-btn {
    padding: 10px;
    background-color: #5cb85c;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    text-align: center;
}

.LimeGreen-btn:hover {
    background-color: #4cae4c;
}

.DimGray01-btn {
    padding: 10px;
    background-color: #808080;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 1;
    text-align: center;
}

.DimGray01-btn:hover {
    background-color: #696969;
}

/* 表单区域 */
.form-section {
    margin-bottom: 20px;
}

/* 表单标题 */
.form-section h2 {
    color: #444;
    margin-bottom: 15px;
    font-size: 18px;
    border-bottom: 2px solid #4a90e2;
    padding-bottom: 5px;
    display: inline-block;
}

/* 域名设置相关 */
.input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    position: relative;
}

/* 主体设置部分 */
.subject-section {
    margin-top: 20px;
}

/* 括展/折叠按钮 */
.subject-section .toggle-btn {
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    margin-bottom: 15px;
    width: 100%;
    text-align: left;
    font-size: 16px;
}

.subject-section .toggle-btn:hover {
    background-color: #3a7bc8;
}

/* 主体详情区域 */
.subject-fields {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* 域名选项区域 */
.domain-options {
    margin-top: 10px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
}

/* 域名选项的复选框 */
.domain-options label {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
}

.domain-options input[type="checkbox"] {
    margin-right: 5px;
}

/* 验证方法区域 */
.verification-methods {
    margin-top: 10px;
}

/* 验证方法的复选框 */
.verification-methods label {
    display: inline-block;
    margin-right: 15px;
}

.verification-methods input[type="checkbox"] {
    margin-right: 5px;
}

/* 其他按钮样式 */
.RoyalBlue-btn {
    padding: 10px;
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
}

.RoyalBlue-btn:hover {
    background-color: #3a7bc8;
}

/* 表单提交按钮 */
button[type="submit"] {
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 12px 25px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    width: 100%;
    font-weight: bold;
}

button[type="submit"]:hover {
    background-color: #3a7bc8;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.switch label:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .switch label {
    background-color: #4a90e2;
}

input:checked + .switch label:before {
    transform: translateX(26px);
}

/* 删除按钮样式 */
.delete-btn {
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.delete-btn:hover {
    background-color: #ff3333;
}

/* 其他按钮样式 */
.add-btn {
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 20px;
    display: inline-block;
}

.add-btn:hover {
    background-color: #3a7bc8;
}

/* 侧边栏 */
.sidebar {
    /*height: 80%;*/
    margin-right: 50px;
    /*margin-top: 10px;*/
    /*margin-bottom: auto;*/
    /*width: 200px;*/
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

.content {
    /*height: 80%;*/
    padding: 30px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.container {
    display: flex;
    min-height: 100vh;
    /*align-items: flex-start; !* 使子元素的起始对齐到容器的顶部 *!*/
}

.sidebar-item {
    padding: 15px 20px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.sidebar-item:hover {
    background-color: rgba(74, 144, 226, 0.1);
}

.sidebar-item.active {
    background-color: rgba(74, 144, 226, 0.2);
    color: #4a90e2;
    font-weight: bold;
    border-left: 3px solid #4a90e2;
}

/* 用户头像和下拉菜单 */
.user-profile {
    position: relative;
    cursor: pointer;
}

.avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
}

.email {
    display: inline-block;
    font-size: 14px;
    color: #333;
}

.dropdown-menu {
    position: absolute;
    top: 50px;
    right: 0;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 150px;
    display: none;
    z-index: 100;
}

.dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dropdown-item:hover {
    background-color: rgba(74, 144, 226, 0.1);
}

.dropdown-item.active {
    background-color: rgba(74, 144, 226, 0.2);
    color: #4a90e2;
}

.dropdown-item.logout {
    color: #dc3545;
}

/* 图表区域 */
.charts-section {
    margin-bottom: 30px;
}

.chart-container {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

textarea {
    flex: 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 10px;
}
.chart {
    flex: 1;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 10px;
    text-align: center;
}

.pie-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

/* 订单区域 */
.orders-section {
    margin-bottom: 30px;
}

.orders-section h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 18px;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.orders-table th, .orders-table td {
    padding: 15px;
    text-align: left;
}

.orders-table th {
    /*background-color: #f9f9f9;*/
    font-weight: bold;
    color: #555;
}

.status-active {
    color: #28a745;
}

.status-pending {
    color: #ffc107;
}

.status-expired {
    color: #dc3545;
}

.details-btn {
    padding: 5px 10px;
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.details-btn:hover {
    background-color: #3a7bc8;
}

/* 底部按钮 */
.bottom-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 200px; /* 设置侧边栏的宽度 */
        background-color: #f5f5f5; /* 侧边栏背景颜色 */
        padding: 20px 0; /* 内边距 */
        align-self: flex-start; /* 使侧边栏靠上对齐 */
    }

    .chart {
        min-width: 100%;
    }

    .bottom-buttons {
        flex-wrap: wrap;
    }

    .RoyalBlue-btn, .DimGray01-btn {
        margin: 5px;
        flex: 1 0 45%;
    }
}

/* 自定义补充样式 */
.domain-row {
    gap: 15px;
    margin-bottom: 15px;
}

.nowrap {
    white-space: nowrap;
}

.flex-grow {
    flex-grow: 1;
}

.form-switch {
    padding-left: 3.5em;
}

/* 新增样式：确保在小屏幕下域名设置部分可以换行 */
.domain-setting {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.domain-setting > div {
    flex: 1 1 auto;
}