/* =====================================================================
   QrShare · 商务风格设计系统
   ---------------------------------------------------------------------
   设计基调：深藏青为主色、金铜色为点缀，冷灰背景 + 白色卡片 + 极浅描边，
   弱化圆角与阴影，强调层级与信息密度，适合商务 / B 端场景。
   全站公共组件都收敛在这里，页面里只允许用这些类和 Bootstrap 栅格，
   不要再往页面里塞 inline style。
   ===================================================================== */

/* ---------- 1. 设计变量 ---------- */
:root {
    /* 主色：深藏青 */
    --qs-navy-900: #0b2242;
    --qs-navy-800: #12315b;
    --qs-navy-700: #1a4076;
    --qs-navy-600: #23508f;
    --qs-navy-500: #3567a8;
    --qs-navy-100: #e8eef7;
    --qs-navy-050: #f3f7fc;

    /* 点缀：金铜色（只用于强调，不大面积铺） */
    --qs-bronze-600: #9b7429;
    --qs-bronze-500: #b98a3c;
    --qs-bronze-400: #cfa360;
    --qs-bronze-100: #f7efdf;

    /* 中性色 */
    --qs-ink: #16202e;
    --qs-body: #35414f;
    --qs-muted: #6b7683;
    --qs-line: #e2e6ec;
    --qs-line-soft: #eef1f6;
    --qs-bg: #f4f6f9;
    --qs-white: #fff;

    /* 语义色 */
    --qs-success: #1f7a52;
    --qs-success-bg: #e7f4ee;
    --qs-warning: #9a6a12;
    --qs-warning-bg: #fdf4e3;
    --qs-danger: #b3352f;
    --qs-danger-bg: #fbeceb;
    --qs-info: #23508f;
    --qs-info-bg: #e8eef7;

    /* 版式与节奏 */
    --qs-font-sans: "Inter", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", Arial, sans-serif;
    --qs-font-num: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --qs-radius: 6px;
    --qs-radius-sm: 4px;
    --qs-shadow-sm: 0 1px 2px rgba(16, 32, 56, .06);
    --qs-shadow: 0 2px 8px rgba(16, 32, 56, .07);
    --qs-shadow-lg: 0 10px 30px rgba(16, 32, 56, .12);
}

/* ---------- 2. 基础排版 ---------- */
html {
    position: relative;
    min-height: 100%;
    font-size: 15px;
}

@media (min-width: 1400px) {
    html { font-size: 15.5px; }
}

body {
    font-family: var(--qs-font-sans);
    background-color: var(--qs-bg);
    color: var(--qs-body);
    -webkit-font-smoothing: antialiased;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

body > .qs-main-wrap { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6, .qs-title {
    color: var(--qs-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

a { color: var(--qs-navy-600); text-decoration: none; }
a:hover { color: var(--qs-navy-800); text-decoration: underline; }

hr { border-color: var(--qs-line); opacity: 1; }

.text-muted { color: var(--qs-muted) !important; }

/* 数字用等宽字形，表格里的数值对齐更整齐 */
.qs-num, .table td.qs-num, .qs-stat-value {
    font-family: var(--qs-font-num);
    font-variant-numeric: tabular-nums;
}

/* ---------- 3. 覆盖 Bootstrap 的配色 ---------- */
.btn-primary {
    --bs-btn-bg: var(--qs-navy-800);
    --bs-btn-border-color: var(--qs-navy-800);
    --bs-btn-hover-bg: var(--qs-navy-700);
    --bs-btn-hover-border-color: var(--qs-navy-700);
    --bs-btn-active-bg: var(--qs-navy-900);
    --bs-btn-active-border-color: var(--qs-navy-900);
    --bs-btn-disabled-bg: #9aa7b8;
    --bs-btn-disabled-border-color: #9aa7b8;
}

.btn-outline-primary {
    --bs-btn-color: var(--qs-navy-700);
    --bs-btn-border-color: #b9c6da;
    --bs-btn-hover-bg: var(--qs-navy-800);
    --bs-btn-hover-border-color: var(--qs-navy-800);
    --bs-btn-active-bg: var(--qs-navy-900);
    --bs-btn-active-border-color: var(--qs-navy-900);
}

.btn-outline-secondary {
    --bs-btn-color: #4d5866;
    --bs-btn-border-color: #c8cfd9;
    --bs-btn-hover-bg: #55606e;
    --bs-btn-hover-border-color: #55606e;
}

.btn-success {
    --bs-btn-bg: var(--qs-success);
    --bs-btn-border-color: var(--qs-success);
    --bs-btn-hover-bg: #1a6745;
    --bs-btn-hover-border-color: #1a6745;
}

.btn-danger {
    --bs-btn-bg: var(--qs-danger);
    --bs-btn-border-color: var(--qs-danger);
    --bs-btn-hover-bg: #962c27;
    --bs-btn-hover-border-color: #962c27;
}

.btn-outline-danger {
    --bs-btn-color: var(--qs-danger);
    --bs-btn-border-color: #e2b6b3;
    --bs-btn-hover-bg: var(--qs-danger);
    --bs-btn-hover-border-color: var(--qs-danger);
}

.btn {
    --bs-btn-border-radius: var(--qs-radius-sm);
    --bs-btn-font-weight: 500;
    letter-spacing: .01em;
}

.btn-sm { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .82rem; }

/* 金铜色点缀按钮：只用在“主推 / 升级 / 付费”这类动作上 */
.btn-bronze {
    background-color: var(--qs-bronze-500);
    border: 1px solid var(--qs-bronze-500);
    color: #2b1f08;
    font-weight: 600;
}

.btn-bronze:hover, .btn-bronze:focus {
    background-color: var(--qs-bronze-600);
    border-color: var(--qs-bronze-600);
    color: #fff;
}

.btn-ghost-light {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.btn-ghost-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--qs-navy-800);
}

/* 表单控件：更窄的圆角、更清晰的对焦环 */
.form-control, .form-select {
    border-color: #ccd4de;
    border-radius: var(--qs-radius-sm);
    padding: .5rem .7rem;
    color: var(--qs-ink);
}

.form-control:focus, .form-select:focus {
    border-color: var(--qs-navy-500);
    box-shadow: 0 0 0 3px rgba(35, 80, 143, .12);
}

.form-label {
    font-weight: 600;
    font-size: .86rem;
    color: #2c3846;
    margin-bottom: .35rem;
}

.form-text { color: var(--qs-muted); font-size: .8rem; }

.input-group-text {
    background: var(--qs-navy-050);
    border-color: #ccd4de;
    color: #4d5866;
}

/* 卡片 */
.card {
    --bs-card-border-color: var(--qs-line);
    --bs-card-border-radius: var(--qs-radius);
    --bs-card-inner-border-radius: calc(var(--qs-radius) - 1px);
    box-shadow: var(--qs-shadow-sm);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--qs-line);
    font-weight: 600;
    color: var(--qs-ink);
    padding: .7rem 1rem;
}

.card-footer { background: #fafbfd; border-top: 1px solid var(--qs-line); }

/* 表格：商务后台的核心信息载体，去掉竖线、强化表头与行 hover */
.table {
    --bs-table-border-color: var(--qs-line-soft);
    --bs-table-hover-bg: var(--qs-navy-050);
    color: var(--qs-body);
    margin-bottom: 0;
}

.table > thead > tr > th, .table > thead.table-light > tr > th {
    color: #4a5666;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--qs-line);
    white-space: nowrap;
    vertical-align: middle;
}

/* 表头统一用极浅底色（覆盖各页面自带的 table-light / 内联背景） */
.table > thead > tr > th,
.table > thead.table-light > tr > th,
.table-light > tr > th {
    background-color: #f7f9fc !important;
}

.table > tbody > tr > td { vertical-align: middle; border-color: var(--qs-line-soft); }

.table > tbody > tr:last-child > td { border-bottom: 0; }

/* 徽标 */
.badge { font-weight: 600; letter-spacing: .02em; border-radius: var(--qs-radius-sm); }

.badge-status { padding: .3em .6em; font-size: .76rem; }

.badge-pending { background: var(--qs-warning-bg); color: var(--qs-warning); border: 1px solid #f0dcb4; }
.badge-approved { background: var(--qs-success-bg); color: var(--qs-success); border: 1px solid #bfe0d1; }
.badge-rejected { background: var(--qs-danger-bg); color: var(--qs-danger); border: 1px solid #eec7c4; }
.badge-neutral { background: #eef1f5; color: #55606e; border: 1px solid #dde3ea; }
.badge-navy { background: var(--qs-navy-100); color: var(--qs-navy-700); border: 1px solid #c9d8ec; }
.badge-bronze { background: var(--qs-bronze-100); color: var(--qs-bronze-600); border: 1px solid #e8d3ac; }

/* 分页 */
.pagination { --bs-pagination-color: var(--qs-navy-700); --bs-pagination-active-bg: var(--qs-navy-800); --bs-pagination-active-border-color: var(--qs-navy-800); --bs-pagination-border-color: var(--qs-line); --bs-pagination-hover-bg: var(--qs-navy-050); }
.pagination .page-link { font-size: .85rem; }

/* 进度条 */
.progress { background: #e9edf3; border-radius: 999px; }
.progress-bar { background-color: var(--qs-navy-600); }

/* 下拉菜单 */
.dropdown-menu {
    border-color: var(--qs-line);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-lg);
    font-size: .9rem;
}

/* 警告框 */
.alert { border-radius: var(--qs-radius-sm); border-width: 1px; font-size: .9rem; }
.alert-success { background: var(--qs-success-bg); border-color: #bfe0d1; color: #14603f; }
.alert-danger { background: var(--qs-danger-bg); border-color: #eec7c4; color: #8f2a25; }
.alert-warning { background: var(--qs-warning-bg); border-color: #f0dcb4; color: #7d550d; }
.alert-info { background: var(--qs-info-bg); border-color: #c9d8ec; color: #1b4273; }
.alert-light { background: #fbfcfe; border-color: var(--qs-line); color: var(--qs-body); }

/* 模态框 */
.modal-content { border: 0; border-radius: var(--qs-radius); box-shadow: var(--qs-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--qs-line); padding: .85rem 1.1rem; }
.modal-footer { border-top: 1px solid var(--qs-line); }

/* 列表组 */
.list-group-item { border-color: var(--qs-line-soft); }

/* 导航胶囊 */
.nav-tabs { border-bottom-color: var(--qs-line); }
.nav-tabs .nav-link { color: var(--qs-muted); border-radius: var(--qs-radius-sm) var(--qs-radius-sm) 0 0; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--qs-navy-800); font-weight: 600; border-color: var(--qs-line) var(--qs-line) #fff; }

/* ---------- 4. 顶部导航 ---------- */
.qs-navbar {
    background: linear-gradient(94deg, var(--qs-navy-900) 0%, var(--qs-navy-800) 55%, var(--qs-navy-700) 100%);
    padding-top: .45rem;
    padding-bottom: .45rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 10px rgba(11, 34, 66, .18);
}

.qs-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    font-size: 1.02rem;
}

.qs-navbar .navbar-brand:hover { color: #fff; text-decoration: none; }

.qs-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: linear-gradient(150deg, var(--qs-bronze-400), var(--qs-bronze-600));
    color: #201704;
    font-weight: 800;
    font-size: .95rem;
    flex: 0 0 auto;
}

.qs-navbar .nav-link {
    color: rgba(255, 255, 255, .8);
    font-size: .9rem;
    font-weight: 500;
    padding: .45rem .7rem !important;
    border-radius: var(--qs-radius-sm);
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    white-space: nowrap;
}

.qs-navbar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .09); text-decoration: none; }
.qs-navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .15); font-weight: 600; }
.qs-navbar .navbar-text { color: rgba(255, 255, 255, .82); font-size: .88rem; }

.qs-navbar .nav-icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: .9; }

.qs-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
    padding: .25rem .5rem;
}

.qs-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }

/* 顶部细分隔线，让导航与内容是两层 */
.qs-navbar-line {
    height: 3px;
    background: linear-gradient(90deg, var(--qs-bronze-500) 0%, var(--qs-bronze-400) 18%, rgba(255, 255, 255, 0) 55%);
}

/* 用户头像圆片 */
.qs-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 600;
}

/* ---------- 5. 页头 / 区块标题 ---------- */
.qs-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--qs-line);
}

.qs-page-title {
    font-size: 1.28rem;
    font-weight: 650;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.qs-page-title::before {
    content: "";
    width: 3px;
    height: 1.05em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--qs-bronze-500), var(--qs-bronze-400));
    display: inline-block;
}

.qs-page-sub { color: var(--qs-muted); font-size: .85rem; margin-top: .3rem; }

.qs-section-title {
    font-size: 1rem;
    font-weight: 650;
    margin: 0 0 .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.qs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

/* ---------- 6. 统计卡片 ---------- */
.qs-stat {
    background: #fff;
    border: 1px solid var(--qs-line);
    border-left: 3px solid var(--qs-navy-600);
    border-radius: var(--qs-radius);
    padding: .85rem 1rem;
    height: 100%;
    box-shadow: var(--qs-shadow-sm);
}

.qs-stat-label {
    font-size: .76rem;
    color: var(--qs-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.qs-stat-value {
    font-size: 1.42rem;
    font-weight: 700;
    color: var(--qs-ink);
    line-height: 1.25;
    margin-top: .3rem;
}

.qs-stat-hint { font-size: .78rem; color: var(--qs-muted); margin-top: .15rem; }

.qs-stat.is-bronze { border-left-color: var(--qs-bronze-500); }
.qs-stat.is-success { border-left-color: var(--qs-success); }
.qs-stat.is-danger { border-left-color: var(--qs-danger); }

/* 小号统计卡：数字与文字同一行，适合「我的素材 / 我的作品」这类计数 */
.qs-mini-stat {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid var(--qs-line);
    border-left: 3px solid var(--qs-navy-600);
    border-radius: var(--qs-radius);
    padding: .8rem .95rem;
    height: 100%;
    box-shadow: var(--qs-shadow-sm);
    color: var(--qs-body);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

a.qs-mini-stat:hover {
    box-shadow: var(--qs-shadow);
    border-left-color: var(--qs-bronze-500);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--qs-body);
}

.qs-mini-stat-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--qs-navy-050);
    border: 1px solid #dbe5f2;
    color: var(--qs-navy-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qs-mini-stat-value {
    font-family: var(--qs-font-num);
    font-variant-numeric: tabular-nums;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--qs-ink);
    line-height: 1.15;
}

.qs-mini-stat-label { font-size: .8rem; color: var(--qs-muted); }

.qs-mini-stat.is-bronze { border-left-color: var(--qs-bronze-500); }
.qs-mini-stat.is-success { border-left-color: var(--qs-success); }
.qs-mini-stat.is-danger { border-left-color: var(--qs-danger); }

/* 进度细条 + 配额提示 */
.qs-meter { height: 6px; background: #e9edf3; border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.qs-meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--qs-navy-600), var(--qs-navy-500)); border-radius: 999px; }
.qs-meter.is-warn > span { background: linear-gradient(90deg, #b8862c, var(--qs-bronze-400)); }
.qs-meter.is-danger > span { background: linear-gradient(90deg, #a8322c, #cf6a63); }

/* ---------- 7. 空状态 ---------- */
.qs-empty {
    text-align: center;
    padding: 2.6rem 1rem;
    color: var(--qs-muted);
}

.qs-empty-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto .7rem;
    border-radius: 50%;
    background: var(--qs-navy-050);
    border: 1px solid var(--qs-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--qs-navy-500);
}

/* 提示类图标（作品被关闭 / 已过期）：用暖色区分「不是出错，是被限制」 */
.qs-empty-icon-warn {
    background: #fdf3e3;
    border-color: #f0dcb8;
    color: #a9752a;
}

.qs-empty-title { color: var(--qs-ink); font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.qs-empty-text { font-size: .85rem; }

/* ---------- 8. 图片预览 ---------- */
.qs-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: .7rem;
    margin-top: .75rem;
}

.qs-preview-card {
    position: relative;
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--qs-shadow-sm);
    transition: box-shadow .15s, transform .15s;
}

.qs-preview-card:hover { box-shadow: var(--qs-shadow); transform: translateY(-1px); }

.qs-preview-thumb {
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
    background: #f1f4f8;
    cursor: zoom-in;
}

.qs-preview-video {
    position: relative;
    height: 96px;
    background: linear-gradient(150deg, #22344c, #0e1b2c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: default;
}

.qs-preview-video .qs-play {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qs-preview-name {
    font-size: .76rem;
    color: var(--qs-ink);
    padding: .35rem .5rem .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qs-preview-meta {
    font-size: .72rem;
    color: var(--qs-muted);
    padding: 0 .5rem .4rem;
    display: flex;
    justify-content: space-between;
    gap: .3rem;
}

.qs-preview-order {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(11, 34, 66, .82);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qs-preview-del {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 4px;
    background: rgba(11, 34, 66, .72);
    color: #fff;
    font-size: .8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.qs-preview-del:hover { background: var(--qs-danger); }

.qs-preview-tag {
    position: absolute;
    bottom: 46px;
    left: 5px;
    z-index: 2;
    padding: .1rem .35rem;
    border-radius: 3px;
    font-size: .68rem;
    font-weight: 600;
    background: rgba(185, 138, 60, .92);
    color: #241a05;
}

/* 图片灯箱 */
.qs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(8, 16, 28, .88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.qs-lightbox.is-open { display: flex; }

.qs-lightbox img {
    max-width: min(94vw, 1100px);
    max-height: 86vh;
    border-radius: var(--qs-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    background: #fff;
}

.qs-lightbox-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .7rem 1rem;
    color: rgba(255, 255, 255, .9);
    font-size: .84rem;
    display: flex;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.qs-lightbox-close {
    position: fixed;
    top: 14px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.qs-lightbox-close:hover { background: #fff; color: var(--qs-navy-800); }

/* 素材挑选卡片（沿用原有交互，仅换皮） */
.asset-card {
    cursor: pointer;
    position: relative;
    transition: box-shadow .15s, border-color .15s;
    border-radius: var(--qs-radius);
}

.asset-card:hover { box-shadow: 0 2px 10px rgba(18, 49, 91, .15); border-color: var(--qs-navy-500) !important; }

.asset-card.is-selected { border-color: var(--qs-navy-700) !important; box-shadow: 0 0 0 2px rgba(35, 80, 143, .18); }

.asset-card .order-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
}

/* ---------- 9. 页脚 ---------- */
.qs-footer {
    margin-top: 2.5rem;
    background: var(--qs-navy-900);
    color: rgba(255, 255, 255, .68);
    font-size: .85rem;
    flex-shrink: 0;
}

.qs-footer a { color: rgba(255, 255, 255, .82); }
.qs-footer a:hover { color: #fff; }

.qs-footer-title {
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: .6rem;
}

.qs-footer-list { list-style: none; padding: 0; margin: 0; }
.qs-footer-list li { margin-bottom: .35rem; }
.qs-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: .8rem 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .55);
}

/* 页脚底栏的链接（备案号 / 微信客服）：
   这两条不是导航链接，但用户需要看出「可以点」，
   所以加一条淡下划线，比纯文字更容易被认出来是可点的。
   注意：这套配色是为 _Layout 的深色页脚准备的；
   后台登录页是浅色背景，需要下面的浅色变体。 */
.qs-footer-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, .3);
    cursor: pointer;
}

.qs-footer-link:hover,
.qs-footer-link:focus {
    text-decoration-color: currentColor;
}

/* 分隔符：颜色压暗一点，避免和链接抢视觉 */
.qs-footer-sep { color: rgba(255, 255, 255, .25); }

/* 浅色背景下的页脚（后台登录页 Layout=null，body 用 .qs-admin-body）：
   深色页脚的白字放到浅底上几乎看不见，这里换成深色文字 */
.qs-admin-body .qs-footer-bottom {
    color: var(--qs-muted);
    border-top-color: var(--qs-line);
}

.qs-admin-body .qs-footer-link { color: var(--qs-navy-600); }
.qs-admin-body .qs-footer-link:hover,
.qs-admin-body .qs-footer-link:focus { color: var(--qs-navy-800); }
.qs-admin-body .qs-footer-sep { color: var(--qs-line); }

/* ---------- 10. 首页专用 ---------- */
.qs-hero {
    background: linear-gradient(102deg, var(--qs-navy-900) 0%, var(--qs-navy-800) 48%, #1d4a86 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 3rem 0 2.6rem;
}

.qs-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(207, 163, 96, .22), rgba(207, 163, 96, 0) 68%);
}

.qs-hero-inner { position: relative; z-index: 1; }

.qs-hero h1 {
    color: #fff;
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1.28;
    margin-bottom: .9rem;
}

.qs-hero-eyebrow {
    color: rgba(255, 255, 255, .7);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
}

.qs-hero-lead {
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    max-width: 640px;
    line-height: 1.75;
}

.qs-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    margin-top: 1.2rem;
    color: rgba(255, 255, 255, .78);
    font-size: .87rem;
}

.qs-hero-points span { display: inline-flex; align-items: center; gap: .4rem; }
.qs-hero-points .qs-tick { color: var(--qs-bronze-400); font-weight: 700; }

/* 首页 hero 右侧的关键数字块 */
.qs-hero-stat {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--qs-radius);
    padding: .85rem .9rem;
    height: 100%;
}

.qs-hero-stat-value {
    font-family: var(--qs-font-num);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.qs-hero-stat-label { font-size: .78rem; color: rgba(255, 255, 255, .72); }

@media (max-width: 575.98px) {
    .qs-hero-stat { padding: .65rem .7rem; }
    .qs-hero-stat-value { font-size: 1.2rem; }
}

.qs-feature {
    text-align: center;
    padding: .4rem .6rem;
    height: 100%;
}

.qs-feature-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto .6rem;
    border-radius: 8px;
    background: var(--qs-navy-050);
    border: 1px solid #dbe5f2;
    color: var(--qs-navy-700);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qs-feature h6 { font-weight: 650; margin-bottom: .35rem; color: var(--qs-ink); }
.qs-feature p { color: var(--qs-muted); font-size: .84rem; margin: 0; line-height: 1.7; }

.qs-band {
    background: #fff;
    border-top: 1px solid var(--qs-line);
    border-bottom: 1px solid var(--qs-line);
    padding: 1.6rem 0;
}

/* 套餐卡片 */
.qs-plan {
    background: #fff;
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius);
    padding: 1.15rem 1.1rem 1.1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--qs-shadow-sm);
    transition: box-shadow .18s, transform .18s, border-color .18s;
}

.qs-plan:hover { box-shadow: var(--qs-shadow-lg); transform: translateY(-2px); }

.qs-plan.is-featured { border-color: var(--qs-navy-700); box-shadow: 0 0 0 1px var(--qs-navy-700), var(--qs-shadow); }

.qs-plan-name {
    font-size: .95rem;
    font-weight: 650;
    color: var(--qs-ink);
    display: flex;
    align-items: center;
    gap: .45rem;
}

.qs-plan-price {
    margin: .55rem 0 .1rem;
    color: var(--qs-ink);
    font-weight: 700;
    font-family: var(--qs-font-num);
    font-size: 1.95rem;
    line-height: 1;
}

.qs-plan-price small {
    font-size: .8rem;
    font-weight: 500;
    color: var(--qs-muted);
    font-family: var(--qs-font-sans);
}

.qs-plan-specs {
    list-style: none;
    padding: .9rem 0 0;
    margin: .9rem 0 0;
    border-top: 1px dashed var(--qs-line);
    font-size: .86rem;
    flex-grow: 1;
}

.qs-plan-specs li {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem 0;
    color: var(--qs-body);
}

.qs-plan-specs li span:last-child { color: var(--qs-ink); font-weight: 600; font-family: var(--qs-font-num); }

/* 注册页图形验证码：与旁边输入框同高，点击换一张 */
.qs-captcha {
    height: 40px;
    width: 120px;
    flex: 0 0 auto;
    border: 1px solid #ccd4de;
    border-radius: var(--qs-radius-sm);
    background: #f4f7fb;
    cursor: pointer;
    object-fit: cover;
}

.qs-captcha:hover { border-color: var(--qs-navy-500); }

/* 未勾选合规确认时的「锁住」按钮：
   外观明显变灰，并用一层透明遮罩吸收点击（比 disabled 更可控，也能配文字说明原因） */
.btn.is-locked {
    position: relative;
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.35);
}

.btn.is-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: not-allowed;
}

.btn.is-locked:hover { filter: grayscale(.35); }

/* 登录 / 注册页 */
.qs-auth-wrap { padding: 2.2rem 0 3rem; }

.qs-auth-card {
    background: #fff;
    border: 1px solid var(--qs-line);
    border-top: 3px solid var(--qs-navy-800);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow);
    padding: 1.6rem 1.5rem;
}

.qs-auth-title { font-size: 1.12rem; font-weight: 650; margin-bottom: .25rem; }
.qs-auth-sub { color: var(--qs-muted); font-size: .85rem; margin-bottom: 1.2rem; }

/* ---------- 11. 分享页 ---------- */
.qs-share-head {
    background: #fff;
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--qs-shadow-sm);
}

.qs-share-media img, .qs-share-media video {
    width: 100%;
    border-radius: var(--qs-radius);
    background: #eef1f5;
}

/* 素材加载失败时的占位：CDN 域名没配好或文件已被删时不至于出现破图图标 */
.qs-media-box {
    position: relative;
    background: #eef1f5;
    border-radius: var(--qs-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.qs-media-box img, .qs-media-box video { margin-bottom: 0; display: block; }

.qs-media-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 150px;
    padding: 1.4rem 1rem;
    color: var(--qs-muted);
    background: repeating-linear-gradient(45deg, #f4f6f9, #f4f6f9 10px, #eef1f5 10px, #eef1f5 20px);
    text-align: center;
}

.qs-media-fallback-title { color: #4a5666; font-size: .9rem; font-weight: 600; }
.qs-media-fallback-text { font-size: .78rem; }

/* 分享页视频在桌面端限制高度，竖屏视频一屏也放得下 */
.qs-share-media video { max-height: 70vh; object-fit: contain; background: #0e1b2c; }
.qs-share-media img { max-height: 78vh; object-fit: contain; }

@media (max-width: 575.98px) {
    .qs-share-media video, .qs-share-media img { max-height: none; }
}

.qs-share-text {
    background: #fff;
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius);
    padding: 1rem 1.1rem;
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- 12. 后台侧边导航 ---------- */
.qs-admin-body { background: var(--qs-bg); }

.qs-admin-side {
    background: #fff;
    border-right: 1px solid var(--qs-line);
    min-height: calc(100vh - 52px);
    padding: .85rem .6rem;
}

.qs-admin-side .nav-link {
    color: #46525f;
    font-size: .89rem;
    font-weight: 500;
    border-radius: var(--qs-radius-sm);
    padding: .5rem .7rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .12rem;
}

.qs-admin-side .nav-link:hover { background: var(--qs-navy-050); color: var(--qs-navy-800); text-decoration: none; }

.qs-admin-side .nav-link.active {
    background: var(--qs-navy-100);
    color: var(--qs-navy-800);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--qs-bronze-500);
}

.qs-admin-group {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #98a2b0;
    font-weight: 700;
    padding: .7rem .7rem .3rem;
}

/* ---------- 13. 工具类 ---------- */
.qs-card-flush .card-body { padding: 1rem; }
.qs-divider { height: 1px; background: var(--qs-line); margin: 1rem 0; }
.qs-mono { font-family: var(--qs-font-num); font-variant-numeric: tabular-nums; }
.qs-break { word-break: break-all; }
.qs-nowrap { white-space: nowrap; }
.qs-clickable { cursor: pointer; }
.qs-w-100 { width: 100%; }
.qs-text-strong { color: var(--qs-ink); font-weight: 600; }
.qs-text-bronze { color: var(--qs-bronze-600); }
.qs-text-navy { color: var(--qs-navy-700); }
.qs-bg-white { background: #fff; }
.qs-mini { font-size: .78rem; }
.qs-thumb-sm { width: 40px; height: 40px; object-fit: cover; border-radius: var(--qs-radius-sm); border: 1px solid var(--qs-line); background: #f1f4f8; }

/* 响应式微调 */
@media (max-width: 991.98px) {
    .qs-navbar .nav-link { padding: .5rem .6rem !important; }
    .qs-navbar .navbar-nav { padding-top: .4rem; }
    .qs-admin-side { min-height: 0; border-right: 0; border-bottom: 1px solid var(--qs-line); }
    .qs-hero { padding: 2.2rem 0 2rem; }
    .qs-hero h1 { font-size: 1.6rem; }
    .qs-page-title { font-size: 1.14rem; }
}

@media (max-width: 575.98px) {
    .qs-preview-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .55rem; }
    .qs-preview-thumb, .qs-preview-video { height: 84px; }
    .qs-preview-tag { bottom: 42px; }
    .qs-stat-value { font-size: 1.25rem; }
    .qs-footer { font-size: .82rem; }
}

/* 打印：去掉导航与阴影 */
@media print {
    .qs-navbar, .qs-navbar-line, .qs-footer, .qs-toolbar .btn { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #ccc; }
}