/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-7zm4x0sqzy] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-7zm4x0sqzy] {
    flex: 1;
}

.sidebar[b-7zm4x0sqzy] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-7zm4x0sqzy] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-7zm4x0sqzy]  a, .top-row[b-7zm4x0sqzy]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-7zm4x0sqzy]  a:hover, .top-row[b-7zm4x0sqzy]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-7zm4x0sqzy]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-7zm4x0sqzy] {
        justify-content: space-between;
    }

    .top-row[b-7zm4x0sqzy]  a, .top-row[b-7zm4x0sqzy]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-7zm4x0sqzy] {
        flex-direction: row;
    }

    .sidebar[b-7zm4x0sqzy] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-7zm4x0sqzy] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-7zm4x0sqzy]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-7zm4x0sqzy], article[b-7zm4x0sqzy] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Pages/Admin/AdminPostManager.razor.rz.scp.css */
.grid-container[b-qen75jjmfx] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 左右各占50% */
    gap: 20px;
    height: 80vh; /* 固定高度 */
    padding: 20px;
}

/* 让两边的 grid 子项在固定高度内可以收缩 */
.left-panel[b-qen75jjmfx],
.right-panel[b-qen75jjmfx] {
    min-height: 0; /* 关键：否则内容会把网格“顶开” */
}

/* 左边输入区：让 textarea 占满并滚动 */
.left-panel[b-qen75jjmfx] {
    display: flex;
}

    .left-panel textarea[b-qen75jjmfx] {
        flex: 1 1 auto; /* 填满父容器 */
        width: 100%;
        height: 100%;
        resize: none;
        font-size: 18px;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        overflow-y: auto; /* 内容多时内部滚动 */
    }

/* 右边展示区：固定容器内滚动 */
.right-panel[b-qen75jjmfx] {
    display: flex;
}

    .right-panel .output-box[b-qen75jjmfx] {
        flex: 1 1 auto; /* 填满父容器 */
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        background-color: #f9f9f9;
        overflow-y: auto; /* 内容多时内部滚动 */
        font-size: 18px;
        white-space: pre-wrap; /* 保留空格与换行 */
        box-sizing: border-box;
    }

/* 顶部设定区：竖向，左对齐 */
.toolbar[b-qen75jjmfx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 全部靠左 */
    gap: 10px;
    padding: 0 20px; /* 与下方 grid 对齐，可按需调整 */
}

/* 每一行：左label + 右chips区 */
.toolbar-item[b-qen75jjmfx] {
    display: flex;
    align-items: flex-start; /* 让多行 pills 顶齐 label 顶部 */
    gap: 12px;
}

    /* 左侧文字列宽度固定，靠左对齐 */
    .toolbar-item .label[b-qen75jjmfx] {
        flex: 0 0 100px; /* 调整为你想要的列宽 */
        font-weight: 600;
        text-align: center;
        color: #334155;
    }

/* 白色椭圆“药丸”按钮，参考 Bootstrap 风格 */
.btn-pill[b-qen75jjmfx] {
    background: #fff;
    color: #0d6efd;
    border: 3px solid #ced4da;
    border-radius: 9999px; /* 药丸形状 */
    padding: 6px 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .btn-pill:hover[b-qen75jjmfx] {
        background: #f8f9fa;
        border-color: #bfc8d2;
        box-shadow: 0 2px 6px rgba(0,0,0,.08);
    }

[b-qen75jjmfx] .title-input {
    min-width: 20vw;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}
/* /Pages/Admin/Auth.razor.rz.scp.css */
/* 登录表单外层：竖直排列所有内容 */
.login-form[b-aalg66c5dm] {
    gap: 15px;
    width: 300px;
    margin: 150px auto; /* 上下留白，左右居中 */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

    .login-form[b-aalg66c5dm]  form {
        display: flex;
        flex-direction: column;
        align-items: center; /* 让表单内的子项（按钮等）水平居中 */
        width: 100%;
        gap: 15px; /* 每个 div 和按钮之间的间距 */
    }
    /* 每个输入块 */
    .login-form div[b-aalg66c5dm] {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    /* 标签 */
    .login-form label[b-aalg66c5dm] {
        font-weight: 600;
    }

    /* 输入框 */
    .login-form input[b-aalg66c5dm] {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        width: 100%;
    }

    /* 登录按钮（Bootstrap 风格） */
    .login-form button[b-aalg66c5dm] {
        align-self: center; /* 居中 */
        width: 50%;
        padding: 10px;
        margin-top: 20px; /* 与上一个元素拉开距离 */
        background-color: #0d6efd;
        border: none;
        border-radius: 8px;
        color: #fff;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .login-form button:hover[b-aalg66c5dm] {
            background-color: #0b5ed7;
        }

/* 单字段错误提示 */
[b-aalg66c5dm] .validation-message {
    color: #dc3545;
    margin-left: 0.5em; /* 减小点和文字的间距 */
    font-size: 0.85rem;
}

[b-aalg66c5dm] ul {
    padding-left: 0; /* 列表左侧缩进 */
}
/* /Shared/Chips.razor.rz.scp.css */
.chips[b-j6fbhv2c37] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    min-height: 32px; /* 空态也有基本高度，可选 */
}

.pill[b-j6fbhv2c37] {
    background: #fff;
    color: #334155;
    border: 1px solid #ced4da;
    border-radius: 9999px; /* 药丸 */
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, background-color .15s ease;
}

    .pill:hover[b-j6fbhv2c37] {
        border-color: #bfc8d2;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }

    .pill.selected[b-j6fbhv2c37] {
        border-color: #0d6efd;
        color: #0d6efd;
        background: #eef5ff;
        box-shadow: 0 0 0 0 rgba(13,110,253,.15);
    }
/* /Shared/Hint.razor.rz.scp.css */
.alert-box[b-1wd7y9qwps] {
    position: fixed; /* 固定在屏幕上，不随滚动条变化 */
    top: 15%;
    left: 50%; /* 先靠到中间 */
    transform: translateX(-50%); /* 再水平居中 */
    background-color: #f8d7da; /* 浅红色背景 */
    color: #842029; /* 深红色文字 */
    border: 1px solid #f5c2c7;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 0.9rem;
    text-align: center;
    z-index: 9999; /* 保证在最上层 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
