/* ========== 基础变量 ========== */
:root {
    --bg: #e0e5ec;
    --shadow-light: #ffffff;
    --shadow-dark: #a3b1c6;
    --primary: #2b75ff;
    --primary-dark: #1565c0;
    --text-main: #333;
    --text-second: #666;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #181818;
        --shadow-light: #2f2f2f;
        --shadow-dark: #000000;
        --primary: #5a9fff;
        --primary-dark: #0050ff;
        --text-main: #e0e5ec; /* 主要文字颜色调整为亮色 */
        --text-second: #a3b1c6; /* 次要文字颜色调整为亮色 */
    }
}

/* ========== 全局背景 ========== */
body {
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: var(--text-main); /* 设置全局文字颜色 */
}

/* ========== Logo 样式 ========== */
.logo {
    width: 65px;
    height: 65px;
    border-radius: 10%;
    margin-top: 7px;
    margin-right: 10px;
    float: left;
    box-shadow: none; /* 去掉拟态阴影 */
    border: none;
    background: transparent;
}

/* ========== 通用拟态凸起 ========== */
.card, .diytop, .diyboyd, .diyfoot {
    background: var(--bg);
    border-radius: 16px;
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
    padding: 20px;
    margin: 20px auto;
    border: none;
}

/* ========== 按钮 ========== */
.btn-blue, .input-group-addon {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 14px;
    box-shadow: 7px 7px 14px var(--shadow-dark), -7px -7px 14px var(--shadow-light);
    transition: all .2s ease;
}

.btn-blue:hover, .input-group-addon:hover {
    background: var(--primary-dark);
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, .2), inset -4px -4px 8px rgba(255, 255, 255, .7);
}

/* ========== 输入框 ========== */
.form-control, .form-control-shadow {
    background: var(--bg);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
    padding: 10px 14px;
    color: var(--text-main);
}

.form-control::placeholder {
    color: var(--text-second);
}

/* ========== 输入组 ========== */
.input-group-shadow {
    box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
    border-radius: 12px;
    overflow: hidden;
}

.input-group-addon {
    border-radius: 0;
    box-shadow: none;
}

/* ========== 小屏幕保持响应 ========== */
@media only screen and (max-width: 767px) {
    .card, .diytop, .diyboyd, .diyfoot {
        width: 95%;
    }
}

/* 按钮整体居中 */
.diybutton {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}