.loginBody{
    background-image: url(/dist/img/media/bg.jpg);
    background-size: cover;
}
.max20ch{
    width: 20ch; /* 设置容器宽度为大约容纳20个字符的宽度 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
.max25ch{
    width: 25ch; /* 设置容器宽度为大约容纳25个字符的宽度 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
.max40ch{
    width: 40ch; /* 设置容器宽度为大约容纳40个字符的宽度 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
.max30ch{
    width: 30ch; /* 设置容器宽度为大约容纳30个字符的宽度 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}
.max60ch{
    width: 60ch; /* 设置容器宽度为大约容纳20个字符的宽度 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

.has-success .form-control {
    border-color: var(--tblr-form-valid-border-color);
    padding-right: calc(1.4285714286em + .875rem);
    --tblr-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.3571428572em + .21875rem) center;
    background-size: calc(.7142857143em + .4375rem) calc(.7142857143em + .4375rem);
}
.has-success  .form-select {
    border-color: var(--tblr-form-valid-border-color);
    background-repeat: no-repeat;
    background-position: right calc(.3571428572em + .21875rem) center;
    background-size: calc(.7142857143em + .4375rem) calc(.7142857143em + .4375rem);
}

.has-danger .form-control {
    border-color: var(--tblr-form-invalid-border-color);
    padding-right: calc(1.4285714286em + .875rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.3571428572em + .21875rem) center;
    background-size: calc(.7142857143em + .4375rem) calc(.7142857143em + .4375rem);
}
.has-danger .form-select {
    border-color: var(--tblr-form-invalid-border-color);
    background-repeat: no-repeat;
    background-position: right calc(.3571428572em + .21875rem) center;
    background-size: calc(.7142857143em + .4375rem) calc(.7142857143em + .4375rem);
}

.form-group .text-help {
    color: #dc1d34;
}

.pristine-error {
    display: table;
}
.sidebar .nav-sidebar .nav-sidebar-sub {
    padding-left: 1.5rem !important;
}
.max130h {
    max-height: 130px;
    width: auto;
}
.min130h {
    min-height: 130px;
    width: auto;
}
.min500h {
    min-height: 500px;
    width: auto;
}
.input-group .el-select .el-input__inner {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ========================================
   Vue 页面加载器样式
   ======================================== */

/* Vue 编译前隐藏模板语法 */
[v-cloak] {
    display: none !important;
}

/* 页面加载器 */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #fff;
}

/* ========================================
   正方形图片样式
   ======================================== */

.square-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.square-img-container {
    aspect-ratio: 1/1;
    width: 100%;
    overflow: hidden;
    display: block;
}
@keyframes cartBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.4); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ========================================
   优惠券样式
   ======================================== */

.coupon-card-my { overflow: hidden; border: 1px solid #e6e8eb; border-radius: 8px; }
.coupon-card-available { overflow: hidden; border: 1px solid #e6e8eb; border-radius: 8px; }
.coupon-card-my.coupon-used, .coupon-card-my.coupon-expired { opacity: 0.55; }
.coupon-card-my.coupon-used .coupon-left, .coupon-card-my.coupon-expired .coupon-left { background: #b0b8c4; }

.coupon-left {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 100px; padding: 16px 12px; background: #206bc4; color: #fff;
    position: relative;
}
.coupon-left::after {
    content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
    width: 12px; height: 12px; border-radius: 50%; background: #fff;
    box-shadow: 0 -28px 0 0 #fff, 0 28px 0 0 #fff;
}
.coupon-left-my { background: #206bc4; }

.coupon-icon { opacity: 0.4; margin-bottom: 4px; }
.coupon-value-text { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.coupon-value-text small { font-size: 0.75em; }
.text-red { color: #d63939; }
.text-orange { color: #f76707; }

.coupon-right { padding: 14px 16px; }
.coupon-receive-btn { padding: 8px 20px; font-size: 15px; border-radius: 20px; font-weight: 600; }
.empty-state-icon { font-size: 48px; }
.rich-text-content img { max-width: 100%; height: auto; }

.dashboard-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}
.dashboard-chart {
    min-height: 280px;
}
.dashboard-chart-lg {
    min-height: 320px;
}
.dashboard-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tblr-secondary);
}
.dashboard-quick-link {
    display: block;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 1rem;
    color: inherit;
    text-align: center;
    text-decoration: none;
}
.dashboard-quick-link:hover {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
    text-decoration: none;
}
.dashboard-todo-link:hover {
    background: var(--tblr-bg-surface-secondary);
}
.chart-filter-actions {
    gap: .5rem;
}
.chart-table-rank {
    width: 2.5rem;
}
.chart-date-range {
    width: 260px !important;
}

.checkout-points-input {
    width: 150px;
    margin-left: auto;
}
.checkout-points-input .form-control {
    min-width: 0;
}
.points-deduct-subtext {
    font-size: 0.75rem;
    font-weight: 400;
}

.message-dropdown-card {
    min-width: 360px;
}
.message-detail-content {
    white-space: normal;
    line-height: 1.7;
}
.message-empty-icon {
    font-size: 48px;
}
#projectRegionSelect .region-cascade {
    display: grid !important;
    gap: 8px;
}
#projectRegionSelect .project-region-select-row,
#projectRegionSelect .region-cascade > .col-12,
#projectRegionSelect .region-cascade > div {
    display: block;
    width: 100%;
    margin-bottom: 0;
}
#projectRegionSelect .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
#projectRegionSelect .input-group-text {
    flex: 0 0 auto;
    min-width: 42px;
}
#projectRegionSelect .el-select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}