* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ================= 1. 主题变量配置 ================= */

/* 默认浅色主题（Light Mode） */
:root {
    --bg-image: linear-gradient(to left, rgba(255, 0, 149, 0.2), rgba(0, 247, 255, 0.2)), url(../img/bg.png);
    
    /* 个人资料卡片 */
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: rgba(0, 0, 0, 0.1);
    --card-title: #232629;
    --card-text: #5a5f66;
    --card-btn-text: #232629;
    --card-btn-border: #232629;
    --card-btn-hover-bg: #232629;
    --card-btn-hover-text: #ffffff;

    /* KDE 终端窗口 */
    --cmd-bg: rgba(245, 247, 250, 0.92);
    --cmd-border: #cdd0d3;
    --cmd-text: #232629;
    --cmd-title-bg: #eff0f1;
    --cmd-title-text: #31363b;
    --cmd-btn-text: #5a5f66;
    --cmd-btn-hover: rgba(0, 0, 0, 0.1);

    /* 终端内部文字语法高亮 */
    --cmd-prompt: #008000;
    --cmd-path: #0000ff;
    --cmd-command: #272727;
    --cmd-link: #005cc5;
    
    --footer-text: #5a5f66;
}

/* 当操作系统开启【深色/暗黑模式】时自动触发 */
@media (prefers-color-scheme: dark) {
    :root {
        /* 个人资料卡片 */
        --card-bg: rgba(35, 38, 41, 0.92);
        --card-border: #5a5f66;
        --card-title: #fcfcfc;
        --card-text: #bdc3c7;
        --card-btn-text: #fcfcfc;
        --card-btn-border: #5a5f66;
        --card-btn-hover-bg: #3daee9;
        --card-btn-hover-text: #ffffff;

        /* KDE 终端窗口 */
        --cmd-bg: rgba(35, 38, 41, 0.95);
        --cmd-border: #5a5f66;
        --cmd-text: #fcfcfc;
        --cmd-title-bg: #31363b;
        --cmd-title-text: #eff0f1;
        --cmd-btn-text: #a0a5aa;
        --cmd-btn-hover: rgba(255, 255, 255, 0.15);

        /* 终端内部文字语法高亮 */
        --cmd-prompt: #11d111;
        --cmd-path: #3daee9;
        --cmd-command: #eff0f1;
        --cmd-link: #3daee9;

        --footer-text: #a0a5aa;
    }
}

/* ================= 2. 基础布局样式 ================= */

body {
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;      /* 保持比例拉伸，填满整个屏幕 */
    background-position: center; /* 加这句，强行把图片轴心拽到正中间，上下左右都居中 */
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

#box {
    width: 100%;
    position: relative;
    padding-top: 50px;
}

/* 个人资料卡片 */
.meBox {
    position: absolute; 
    top: 50%;
    left: 10%;
    transform: translateY(50%);
    width: 20rem;
    height: 25rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    transition: all 0.3s;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--card-border);
}

.meBox:hover {
    /* 保持居中状态下，再往上飘 5px */
    transform: translateY(calc(50% - 5px));
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.headPhoto {
    width: 8rem;
    height: 8rem;
    /* 这里我给你写了相对路径，去读外面的 img 文件夹里的 001.png */
    background: url(../img/head.png); 
    background-size: cover;
    margin: 2rem auto 0;
    border-radius: 50%;
}

.meBox-title p {
    font-size: 24px;
    font-weight: bold;
    margin-top: 1rem;
    color: var(--card-title);
}

.meBox-title .fg {
    width: 80%;
    height: 1px;
    background-color: var(--card-text);
    opacity: 0.3;
    margin: 1rem auto 0;
}

.meBox-text p {
    margin-top: 0.8rem;
    color: var(--card-text);
    font-size: 14px;
}

.meBox-Button {
    width: 100%;
    height: 3rem;
    margin-top: 2rem;
}

.meBox-Button a {
    text-decoration: none;
    color: var(--card-btn-text);
    border: 1px solid var(--card-btn-border);
    padding: 8px 24px;
    border-radius: 20px;
    transition: all 0.3s;
    display: inline-block;
}

.meBox-Button a:hover {
    color: var(--card-btn-hover-text);
    background-color: var(--card-btn-hover-bg);
    border-color: var(--card-btn-hover-bg);
}

/* ================= 3. KDE Plasma 终端窗口样式 ================= */

.cmd {
    /* 👇 1. 默认窗口大小数据配置在这里 👇 */
    width: 620px;          /* 默认初始宽度 */
    height: 360px;         /* 默认初始高度 */
    min-width: 320px;      /* 允许缩放的最小宽度 */
    min-height: 180px;     /* 允许缩放的最小高度 */

    /* 👇 2. 开启自由调整大小（拉伸）功能 👇 */
    resize: both;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    border-radius: 4px; /* KDE 标准圆角 */
    background-color: var(--cmd-bg);
    border: 1px solid var(--cmd-border);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, border-color 0.3s;
    font-size: 14px;
    color: var(--cmd-text);
    position: absolute; /* 绝对定位用于拖拽 */
}

/* 初始化两个窗口在页面上的分布位置 */
#window1 {
    top: 180px;
    left: 52%;
    z-index: 2;
}

#window2 {
    top: 370px;
    left: 60%;
    z-index: 1;
}

/* KDE Plasma 风格标题栏 */
.cmd .title {
    width: 100%;
    height: 36px;          /* 根据 KDE 比例稍微加高一点 */
    flex: 0 0 36px;
    background-color: var(--cmd-title-bg);
    color: var(--cmd-title-text);
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--cmd-border);
    user-select: none;
    /* ...前面你原来的那堆 height, display 啥的保留... */
    position: relative; /* 补上这句充当基准点 */
}

.title-left {
    display: flex;
    align-items: center;
    padding-left: 10px;
    cursor: default;       /* KDE 标题栏默认指针即可，按住时依然能拖拽 */
    flex: 1;               /* 填满剩余空间，方便鼠标拖拽 */
    height: 100%;
}

.win-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    color: var(--cmd-title-text);
    opacity: 0.8;          /* 微微透明，融入标题栏 */
}

.cmd .title .title-text {
    font-family: 'Segoe UI', system-ui, sans-serif; 
    font-weight: 500;
    opacity: 0.9;
    
    /* 强行按在正中间 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 右侧按钮区域 */
.win-btn-group {
    display: flex;
    height: 100%;
}

.win-btn {
    width: 42px;           /* KDE 按钮点击热区较宽 */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
    color: var(--cmd-title-text);
    opacity: 0.6;          /* 默认状态颜色变淡 */
    font-size: 13px;
    transition: all 0.2s ease-in-out;
}

.win-btn span {
    pointer-events: none;  /* 穿透点击事件，防止鼠标抓取到文字引发 Bug */
}

/* 悬浮效果：深色/浅色模式下通用的透明遮罩 */
.win-btn:hover {
    opacity: 1;
    background-color: rgba(127, 127, 127, 0.2); 
}

/* 关闭按钮专属 KDE 红 */
.win-btn.close:hover {
    background-color: #da4453; 
    color: white;
    opacity: 1;
}

/* 终端内文字与链接 */
.cmdText {
    padding: 15px;
    line-height: 1.6;
    flex: 1;               /* 占据窗口剩余全部高度 */
    overflow-y: auto;      /* 当窗口缩得太小或内容过多时，自动出现内部滚动条 */
}

.cmdText .prompt {
    color: var(--cmd-prompt);
    font-weight: bold;
}

.cmdText .path {
    color: var(--cmd-path);
    font-weight: bold;
}

.cmdText .command {
    color: var(--cmd-command);
}

.cmdText .ul {
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.cmdText .ul a {
    text-decoration: none;
    color: var(--cmd-link);
    transition: color 0.2s;
}

.cmdText .ul a:hover {
    text-decoration: underline;
}

/* 页脚 */
#footer {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    color: var(--footer-text);
    font-size: 13px;
}

/* ================= 4. 移动端/小屏幕响应式适配 ================= */
@media screen and (max-width: 1110px) {
    #box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .meBox {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin: 20px auto;
    }

    .cmd {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin: 20px auto;
        width: 90%;
        max-width: 500px;
    }
}
/* ================= 6. window1 天气输出 ================= */


/* TianqiAPI 免 Key 小组件 */
.weather-output {
    display: block;
    width: 100%;
    min-height: 20px;
    margin: -1px 0 2px;
    overflow: hidden;
    line-height: 0;
    background: transparent;
}

.weather-widget {
    display: block;
    width: 100%;
    max-width: 560px;
    height: 20px;
    border: 0;
    overflow: hidden;
    background: transparent;
}